chore(multisig): multisig issues (#1050)

* chore: multisig issues * chore: add loader to txns list * chore: change salt value to random number
vitwit · Jan 3, 2024 · b1b5a04 · b1b5a04 · vercel · Jan 3, 2024
1 parent 3f34e28
commit b1b5a04
Show file tree

Hide file tree

Showing 25 changed files with 167 additions and 73 deletions.
diff --git a/frontend/src/app/(routes)/multisig/Multisig.tsx b/frontend/src/app/(routes)/multisig/Multisig.tsx
@@ -18,6 +18,7 @@ const Multisig = () => {
           width={400}
           height={235}
           alt={'No Transactions'}
+          draggable={false}
         />
         <p>{message}</p>
         <button

diff --git a/frontend/src/app/(routes)/multisig/components/AccountInfo.tsx b/frontend/src/app/(routes)/multisig/components/AccountInfo.tsx
@@ -76,7 +76,13 @@ const AccountInfo: React.FC<AccountInfoProps> = (props) => {
       <h2 className="text-[20px] leading-normal font-normal">Multisig</h2>
       <div className="flex-1 flex gap-2 items-center">
         <div className="cursor-pointer" onClick={() => handleGoBack()}>
-          <Image src="/go-back-icon.svg" width={24} height={24} alt="Go Back" />
+          <Image
+            src="/go-back-icon.svg"
+            width={24}
+            height={24}
+            alt="Go Back"
+            draggable={false}
+          />
         </div>
         <div className="text-[16px] leading-10 tracking-[0.64px]">
           {multisigAccount.account.name || '-'}
@@ -164,10 +170,12 @@ const AccountDetails = ({
       <div className="multisig-info-title">
         <div className="w-full flex justify-between">
           <h2 className="text-[16px] font-bold">{name}</h2>
-          <h3 className="text-[14px] font-bold">
-            Created&nbsp;{getTimeDifferenceToFutureDate(created_at, true)}
-            &nbsp;ago
-          </h3>
+          {created_at ? (
+            <h3 className="text-[14px] font-bold">
+              Created&nbsp;{getTimeDifferenceToFutureDate(created_at, true)}
+              &nbsp;ago
+            </h3>
+          ) : null}
         </div>
       </div>
       <div className="flex-1 p-6 space-y-6 flex flex-col h-full">
@@ -206,7 +214,13 @@ const AccountDetails = ({
         </div>
         <div className="account-members">
           <div className="flex items-center">
-            <Image src={'/list-icon.svg'} width={40} height={40} alt={name} />
+            <Image
+              src={'/list-icon.svg'}
+              width={40}
+              height={40}
+              alt={name}
+              draggable={false}
+            />
             <div>Members</div>
           </div>
           <div className="members-list">
@@ -251,7 +265,7 @@ const AccountInfoItem = ({
   return (
     <div className="account-info-item">
       <div className="flex items-center">
-        <Image src={icon} width={40} height={40} alt={name} />
+        <Image src={icon} width={40} height={40} alt={name} draggable={false} />
         <div>{name}</div>
       </div>
       <div className="px-2 leading-10">{value}</div>

diff --git a/frontend/src/app/(routes)/multisig/components/AllMultisigs.tsx b/frontend/src/app/(routes)/multisig/components/AllMultisigs.tsx
@@ -92,6 +92,7 @@ const AllMultisigs: React.FC<AllMultisigsProps> = (props) => {
                   width={400}
                   height={235}
                   alt={'No Transactions'}
+                  draggable={false}
                 />
                 <div className="empty-screen-text">
                   This looks empty ! go ahead and create MultiSig account Now !
@@ -177,6 +178,7 @@ const MultisigAccountCard = ({
               width={24}
               height={24}
               alt="copy"
+              draggable={false}
             />
           </div>
         </div>

diff --git a/frontend/src/app/(routes)/multisig/components/AllTransactionsList.tsx b/frontend/src/app/(routes)/multisig/components/AllTransactionsList.tsx
@@ -11,6 +11,7 @@ import Image from 'next/image';
 import { TxStatus } from '@/types/enums';
 import { useAppSelector } from '@/custom-hooks/StateHooks';
 import { RootState } from '@/store/store';
+import { CircularProgress } from '@mui/material';
 
 interface AllTransactionsListProps {
   chainID: string;
@@ -31,15 +32,15 @@ const AllTransactionsList: React.FC<AllTransactionsListProps> = (props) => {
   const updateTxnState = useAppSelector(
     (state: RootState) => state.multisig.updateTxnRes
   );
-
   const toggleMsgDialogOpen = () => {
     setMsgDialogOpen((prevState) => !prevState);
   };
-
+  const txnsLoading = useAppSelector(
+    (state: RootState) => state.multisig?.txns?.status
+  );
   const toggleViewRawDialogOpen = () => {
     setViewRawDialogOpen((prevState) => !prevState);
   };
-
   const handleMsgDialogClose = () => {
     setMsgDialogOpen(false);
   };
@@ -120,17 +121,24 @@ const AllTransactionsList: React.FC<AllTransactionsListProps> = (props) => {
           />
         );
       })}
-      {!txnsState.list.length ? (
-        <div className="mt-[50%] flex flex-col justify-center items-center">
-          <Image
-            src="/no-transactions.png"
-            width={200}
-            height={130}
-            alt={'No Transactions'}
-          />
-          <div className="empty-screen-text">No Transactions</div>
-        </div>
-      ) : null}
+      <div className="mt-[50%] flex flex-col justify-center items-center">
+        {txnsLoading !== TxStatus.PENDING && !txnsState.list.length ? (
+          <div>
+            <Image
+              src="/no-transactions.png"
+              width={200}
+              height={130}
+              alt={'No Transactions'}
+              draggable={false}
+            />
+            <div className="empty-screen-text">No Transactions</div>
+          </div>
+        ) : null}
+        {txnsLoading === TxStatus.PENDING ? (
+          <CircularProgress size={24} sx={{ color: 'white' }} />
+        ) : null}
+      </div>
+
       <DialogViewTxnMessages
         open={msgDialogOpen}
         txn={selectedTxn}

diff --git a/frontend/src/app/(routes)/multisig/components/DeleteTxn.tsx b/frontend/src/app/(routes)/multisig/components/DeleteTxn.tsx
@@ -53,6 +53,7 @@ const DeleteTxn: React.FC<DeleteTxnProps> = (props) => {
           height={14}
           alt="Delete-Icon"
           className="cursor-pointer"
+          draggable={false}
         />
       </button>
       <DialogDeleteTxn

diff --git a/frontend/src/app/(routes)/multisig/components/DialogCreateMultisig.tsx b/frontend/src/app/(routes)/multisig/components/DialogCreateMultisig.tsx
@@ -90,7 +90,7 @@ const InputTextComponent: React.FC<InputTextComponentProps> = (props) => {
                 onClick={() =>
                   !field.disabled
                     ? handleRemoveValue(index)
-                    : alert('cannot self remove')
+                    : alert('Cannot self remove')
                 }
                 position="end"
                 sx={{
@@ -104,9 +104,14 @@ const InputTextComponent: React.FC<InputTextComponentProps> = (props) => {
                   height={24}
                   width={24}
                   alt="Delete"
+                  draggable={false}
                 />
               </InputAdornment>
-            ) : null,
+            ) : (
+              <InputAdornment position="end">
+                <div>(You)</div>
+              </InputAdornment>
+            ),
           sx: {
             input: {
               color: 'white',
@@ -231,7 +236,6 @@ const DialogCreateMultisig: React.FC<DialogCreateMultisigProps> = (props) => {
 
   const handleAddPubKey = () => {
     if (pubKeyFields?.length >= MAX_PUB_KEYS) {
-      alert(MAX_PUBKEYS_ERROR);
       dispatch(
         setError({
           type: 'error',
@@ -257,13 +261,11 @@ const DialogCreateMultisig: React.FC<DialogCreateMultisigProps> = (props) => {
     setFormError('');
 
     if (Number(threshold) < 1) {
-      alert(MIN_THRESHOLD_ERROR);
       dispatch(setError({ type: 'error', message: MIN_THRESHOLD_ERROR }));
       return;
     }
 
     if (!pubKeyFields?.length) {
-      alert(MIN_PUBKEYS_ERROR);
       dispatch(setError({ type: 'error', message: MIN_PUBKEYS_ERROR }));
       return;
     }
@@ -305,7 +307,6 @@ const DialogCreateMultisig: React.FC<DialogCreateMultisigProps> = (props) => {
 
     const uniquePubKeys = Array.from(new Set(pubKeys));
     if (uniquePubKeys?.length !== pubKeys?.length) {
-      alert(DUPLICATE_PUBKEYS_ERROR);
       dispatch(
         setError({
           type: 'error',
@@ -348,7 +349,6 @@ const DialogCreateMultisig: React.FC<DialogCreateMultisigProps> = (props) => {
       );
       /* eslint-disable @typescript-eslint/no-explicit-any */
     } catch (error: any) {
-      alert(error || FAILED_TO_GENERATE_MULTISIG);
       dispatch(
         setError({
           type: 'error',
@@ -362,7 +362,6 @@ const DialogCreateMultisig: React.FC<DialogCreateMultisigProps> = (props) => {
     if (createMultiAccRes?.status === 'idle') {
       dispatch(setError({ type: 'success', message: 'Successfully created' }));
     } else if (createMultiAccRes?.status === 'rejected') {
-      alert(createMultiAccRes?.error);
       dispatch(setError({ type: 'error', message: createMultiAccRes?.error }));
     }
   }, [createMultiAccRes]);
@@ -390,6 +389,7 @@ const DialogCreateMultisig: React.FC<DialogCreateMultisigProps> = (props) => {
                 width={24}
                 height={24}
                 alt="Close"
+                draggable={false}
               />
             </div>
           </div>
@@ -508,7 +508,7 @@ const DialogCreateMultisig: React.FC<DialogCreateMultisigProps> = (props) => {
                   type="submit"
                 >
                   {createMultiAccRes?.status === 'pending' ? (
-                    <CircularProgress size={25} />
+                    <CircularProgress size={16} sx={{ color: 'white' }} />
                   ) : (
                     'Create'
                   )}

diff --git a/frontend/src/app/(routes)/multisig/components/DialogCreateTxn.tsx b/frontend/src/app/(routes)/multisig/components/DialogCreateTxn.tsx
@@ -114,6 +114,7 @@ const FileUpload = (props: FileUploadProps) => {
                 width={32}
                 height={32}
                 alt="Upload file"
+                draggable={false}
               />
               <div className="mt-2">Upload file here</div>
             </>
@@ -192,6 +193,7 @@ const FileUpload = (props: FileUploadProps) => {
             height={24}
             width={24}
             alt="download"
+            draggable={false}
           />
         </a>
       </div>
@@ -220,6 +222,7 @@ const DialogCreateTxn: React.FC<DialogCreateTxnProps> = (props) => {
   const handleClose = () => {
     onClose();
     setMessages([]);
+    resetForm();
   };
 
   const onSelect = (value: boolean) => {
@@ -319,7 +322,11 @@ const DialogCreateTxn: React.FC<DialogCreateTxnProps> = (props) => {
     setMessages(arr);
   };
 
-  const { handleSubmit, control } = useForm({
+  const {
+    handleSubmit,
+    control,
+    reset: resetForm,
+  } = useForm({
     defaultValues: {
       msgs: [],
       gas: 900000,
@@ -453,6 +460,7 @@ const DialogCreateTxn: React.FC<DialogCreateTxnProps> = (props) => {
                 width={24}
                 height={24}
                 alt="Close"
+                draggable={false}
               />
             </div>
           </div>
@@ -639,6 +647,7 @@ const DialogCreateTxn: React.FC<DialogCreateTxnProps> = (props) => {
                     width={200}
                     height={177}
                     alt="No Messages"
+                    draggable={false}
                   />
                 </div>
               )}

diff --git a/frontend/src/app/(routes)/multisig/components/DialogDeleteMultisig.tsx b/frontend/src/app/(routes)/multisig/components/DialogDeleteMultisig.tsx
@@ -50,6 +50,7 @@ const DialogDeleteMultisig: React.FC<DialogDeleteMultisigProps> = (props) => {
                 width={24}
                 height={24}
                 alt="Close"
+                draggable={false}
               />
             </div>
           </div>
@@ -59,6 +60,7 @@ const DialogDeleteMultisig: React.FC<DialogDeleteMultisigProps> = (props) => {
               height={238}
               width={288}
               alt="Delete Txn"
+              draggable={false}
             />
             <div className="flex flex-col gap-10 w-full">
               <div className="space-y-6">

diff --git a/frontend/src/app/(routes)/multisig/components/DialogDeleteTxn.tsx b/frontend/src/app/(routes)/multisig/components/DialogDeleteTxn.tsx
@@ -50,6 +50,7 @@ const DialogDeleteTxn: React.FC<DialogDeleteTxnProps> = (props) => {
                 width={24}
                 height={24}
                 alt="Close"
+                draggable={false}
               />
             </div>
           </div>
@@ -59,6 +60,7 @@ const DialogDeleteTxn: React.FC<DialogDeleteTxnProps> = (props) => {
               height={238}
               width={288}
               alt="Delete Txn"
+              draggable={false}
             />
             <div className="flex flex-col gap-10 w-full">
               <div className="space-y-6">

diff --git a/frontend/src/app/(routes)/multisig/components/DialogTxnFailed.tsx b/frontend/src/app/(routes)/multisig/components/DialogTxnFailed.tsx
@@ -34,6 +34,7 @@ const DialogTxnFailed: React.FC<DialogTxnFailedProps> = (props) => {
                 width={24}
                 height={24}
                 alt="Close"
+                draggable={false}
               />
             </div>
           </div>
@@ -43,6 +44,7 @@ const DialogTxnFailed: React.FC<DialogTxnFailedProps> = (props) => {
               height={238}
               width={288}
               alt="Delete Txn"
+              draggable={false}
             />
             <div className="flex flex-col gap-10 w-full">
               <div className="space-y-6">

diff --git a/frontend/src/app/(routes)/multisig/components/DialogViewRaw.tsx b/frontend/src/app/(routes)/multisig/components/DialogViewRaw.tsx
@@ -39,6 +39,7 @@ const DialogViewRaw: React.FC<DialogViewRawProps> = (props) => {
                 width={24}
                 height={24}
                 alt="Close"
+                draggable={false}
               />
             </div>
           </div>

diff --git a/frontend/src/app/(routes)/multisig/components/DialogViewTxnMessages.tsx b/frontend/src/app/(routes)/multisig/components/DialogViewTxnMessages.tsx
@@ -74,6 +74,7 @@ const DialogViewTxnMessages: React.FC<DialogViewTxnMessagesProps> = (props) => {
                 width={24}
                 height={24}
                 alt="Close"
+                draggable={false}
               />
             </div>
           </div>

diff --git a/frontend/src/app/(routes)/multisig/components/TransactionCard.tsx b/frontend/src/app/(routes)/multisig/components/TransactionCard.tsx
@@ -66,6 +66,7 @@ const TransactionCard: React.FC<TransactionCardProps> = (props) => {
                 alt="View More"
                 className="cursor-pointer"
                 onClick={() => onViewMoreAction(txn)}
+                draggable={false}
               />
             </Tooltip>
           ) : null}
@@ -135,6 +136,7 @@ const TransactionCard: React.FC<TransactionCardProps> = (props) => {
                 width={14}
                 alt="Raw-Icon"
                 className="cursor-pointer"
+                draggable={false}
               />
               <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-[4px] font-medium">
                 RAW

diff --git a/frontend/src/app/(routes)/multisig/components/TransactionItem.tsx b/frontend/src/app/(routes)/multisig/components/TransactionItem.tsx
@@ -136,13 +136,19 @@ const TransactionItem: React.FC<TransactionItemProps> = (props) => {
               width={14}
               alt="Raw-Icon"
               className="cursor-pointer"
+              draggable={false}
             />
             <div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 text-white text-[4px] font-medium">
               RAW
             </div>
           </div>
         </Tooltip>
-        <DeleteTxn txId={txn.id} address={multisigAddress} chainID={chainID} isMember={isMember} />
+        <DeleteTxn
+          txId={txn.id}
+          address={multisigAddress}
+          chainID={chainID}
+          isMember={isMember}
+        />
       </div>
     </div>
   );