added loaders to txn actions when processing and fixed nav menu respo…

…nsiveness (#97)
deep-ink-ventures · Nov 3, 2023 · 16c7d02 · 16c7d02
1 parent 73381d4
commit 16c7d02
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/src/components/Transactions.tsx b/src/components/Transactions.tsx
@@ -7,6 +7,7 @@ import {
   TransactionBadge,
   UserTally,
 } from '@/components';
+import { useLoadingScreenContext } from '@/context/LoadingScreen';
 import { useDebounce } from '@/hooks/useDebounce';
 import useMC from '@/hooks/useMC';
 import useMCStore from '@/stores/MCStore';
@@ -45,6 +46,8 @@ const Transactions = ({ address }: ITransactionsProps) => {
   ]);
   const { approveTxnDB, getJwtToken, rejectTxnDB, executeMCTxn } = useMC();
 
+  const loaders = useLoadingScreenContext();
+
   const [activeAccordion, setActiveAccordion] = useState<number | null>(null);
   const [searchTerm, setSearchTerm] = useState('');
   const debouncedSearchTerm = useDebounce(searchTerm, 1000);
@@ -97,12 +100,21 @@ const Transactions = ({ address }: ITransactionsProps) => {
     }
 
     try {
+      loaders.setAction({
+        type: 'SHOW_TRANSACTION_PROCESSING',
+      });
       await approveTxnDB(txn, jwt);
+      loaders.setAction({
+        type: 'CLOSE',
+      });
       await new Promise((resolve) => {
         setTimeout(resolve, 2000);
       });
       fetchTransactions(jwt);
     } catch {
+      loaders.setAction({
+        type: 'CLOSE',
+      });
       handleErrors('Error in approving transaction');
     }
   };
@@ -113,12 +125,21 @@ const Transactions = ({ address }: ITransactionsProps) => {
     }
 
     try {
+      loaders.setAction({
+        type: 'SHOW_TRANSACTION_PROCESSING',
+      });
       await rejectTxnDB(txn, jwt);
+      loaders.setAction({
+        type: 'CLOSE',
+      });
       await new Promise((resolve) => {
         setTimeout(resolve, 2000);
       });
       fetchTransactions(jwt);
     } catch {
+      loaders.setAction({
+        type: 'CLOSE',
+      });
       handleErrors('Error in approving transaction');
     }
   };
@@ -129,12 +150,23 @@ const Transactions = ({ address }: ITransactionsProps) => {
     }
 
     try {
+      loaders.setAction({
+        type: 'SHOW_TRANSACTION_PROCESSING',
+      });
+
       await executeMCTxn(txn, jwt);
+      loaders.setAction({
+        type: 'CLOSE',
+      });
       await new Promise((resolve) => {
         setTimeout(resolve, 2000);
       });
+
       fetchTransactions(jwt);
     } catch {
+      loaders.setAction({
+        type: 'CLOSE',
+      });
       handleErrors('Error in approving transaction');
     }
   };

diff --git a/src/pages/account/[accountId]/index.tsx b/src/pages/account/[accountId]/index.tsx
@@ -76,24 +76,24 @@ const Account = () => {
   }[] = useMemo(
     () => [
       {
-        icon: <DashboardIcon className='h-4 w-4 fill-black' />,
+        icon: <DashboardIcon className='h-4 w-4 shrink-0 fill-black' />,
         label: 'Dashboard',
       },
       // {
       //   icon: <Coins className='h-4 w-4 stroke-black' />,
       //   label: 'Assets',
       // },
       {
-        icon: <SwitchIcon className='h-4 w-4 fill-black' />,
+        icon: <SwitchIcon className='h-4 w-4 shrink-0 fill-black' />,
         label: 'Transactions',
         badgeCount: multicliqueAccount?.statistics?.transactions?.data,
       },
       {
-        icon: <Proposal className='h-4 w-4 fill-black' />,
+        icon: <Proposal className='h-4 w-4 shrink-0 fill-black' />,
         label: 'Manage ELIO DAO Policy',
       },
       {
-        icon: <SettingsIcon className='h-4 w-4 fill-black' />,
+        icon: <SettingsIcon className='h-4 w-4 shrink-0 fill-black' />,
         label: 'Settings',
       },
     ],
@@ -151,7 +151,7 @@ const Account = () => {
                     active={currentTab === tab.label}
                     onClick={() => setCurrentTab(tab.label)}>
                     {tab.icon}
-                    {tab.label}
+                    <div className='w-full grow truncate'>{tab.label}</div>
                     {Boolean(tab.badgeCount) && (
                       <span className='ml-auto flex h-5 min-w-[1.25rem] items-center justify-center rounded-full bg-error-content p-2 text-sm text-white'>
                         {tab.badgeCount}