Add Program Changes back in as a tab

Signed-off-by: Nathan LeClaire <[email protected]>
workbenchapp · Mar 23, 2022 · 7eef55a · 7eef55a
1 parent c10e4f8
commit 7eef55a
Showing 1 changed file with 42 additions and 7 deletions.
diff --git a/src/renderer/nav/Accounts.tsx b/src/renderer/nav/Accounts.tsx
@@ -13,6 +13,7 @@ import AccountListView from 'renderer/components/AccountListView';
 import AccountView from 'renderer/components/AccountView';
 import InlinePK from 'renderer/components/InlinePK';
 import LogView from 'renderer/components/LogView';
+import ProgramChangeView from '../components/ProgramChangeView';
 
 import {
   accountsActions,
@@ -28,6 +29,9 @@ import {
   WBAccount,
 } from 'types/types';
 
+const LIVE_TAB_CHANGES = 'changes';
+const LIVE_TAB_TXN_LOGS = 'logs';
+
 const Accounts = () => {
   const dispatch = useDispatch();
   const accounts: AccountsState = useSelector(
@@ -37,6 +41,8 @@ const Accounts = () => {
   const { net } = validator;
   const { rootKey, selectedAccount, listedAccounts } = accounts;
   const [addBtnClicked, setAddBtnClicked] = useState<boolean>(false);
+  const [selectedLiveTab, setSelectedLiveTab] =
+    useState<string>(LIVE_TAB_CHANGES);
 
   const attemptAccountAdd = (pubKey: string, initializing: boolean) => {
     if (initializing && pubKey === ACCOUNTS_NONE_KEY) {
@@ -150,6 +156,16 @@ const Accounts = () => {
     );
   }
 
+  let selectedLiveComponent = <LogView />;
+  if (selectedLiveTab === LIVE_TAB_CHANGES) {
+    selectedLiveComponent = (
+      <ProgramChangeView
+        accounts={listedAccounts}
+        attemptAccountAdd={attemptAccountAdd}
+      />
+    );
+  }
+
   let display = <></>;
   if (validator.status === NetStatus.Running) {
     display = (
@@ -163,8 +179,9 @@ const Accounts = () => {
               </span>
               <button
                 type="button"
-                className={`ms-2 btn rounded btn-block btn-sm no-box-shadow ${addBtnClicked ? 'btn-primary-darker' : 'btn-primary'
-                  }`}
+                className={`ms-2 btn rounded btn-block btn-sm no-box-shadow ${
+                  addBtnClicked ? 'btn-primary-darker' : 'btn-primary'
+                }`}
                 onMouseDown={(
                   e: React.MouseEvent<HTMLButtonElement, MouseEvent>
                 ): void => {
@@ -191,29 +208,47 @@ const Accounts = () => {
           <div>
             <ul className="nav">
               <li
-                className={`${selectedAccount
+                className={`${
+                  selectedAccount
                     ? 'border-bottom active'
                     : 'opacity-25 cursor-not-allowed'
-                  } ms-3 me-3 pt-1 pb-1 border-3 nav-item text-secondary nav-link-tab`}
+                } ms-3 me-3 pt-1 pb-1 border-3 nav-item text-secondary nav-link-tab`}
               >
                 <small>Account</small>
               </li>
               <li
-                className={`${selectedAccountInfo ? '' : 'border-bottom active'
-                  } ms-3 me-3 pt-1 pb-1 border-3 cursor-pointer nav-item text-secondary nav-link-tab`}
+                className={`${
+                  !selectedAccountInfo && selectedLiveTab === LIVE_TAB_TXN_LOGS
+                    ? 'border-bottom active'
+                    : ''
+                } ms-3 me-3 pt-1 pb-1 border-3 cursor-pointer nav-item text-secondary nav-link-tab`}
                 onClick={() => {
                   dispatch(accountsActions.setSelected(''));
+                  setSelectedLiveTab(LIVE_TAB_TXN_LOGS);
                 }}
               >
                 <small>Logs</small>
               </li>
+              <li
+                className={`${
+                  !selectedAccountInfo && selectedLiveTab === LIVE_TAB_CHANGES
+                    ? 'border-bottom active'
+                    : ''
+                } ms-3 me-3 pt-1 pb-1 border-3 cursor-pointer nav-item text-secondary nav-link-tab`}
+                onClick={() => {
+                  dispatch(accountsActions.setSelected(''));
+                  setSelectedLiveTab(LIVE_TAB_CHANGES);
+                }}
+              >
+                <small>Program Changes</small>
+              </li>
             </ul>
           </div>
           <div className="m-2">
             {selectedAccountInfo ? (
               <AccountView account={selectedAccountInfo} />
             ) : (
-              <LogView />
+              selectedLiveComponent
             )}
           </div>
         </div>