Multisig sequence management

frontend/src/app/(routes)/multisig/components/DialogUpdateSequence.tsx

@@ -0,0 +1,78 @@
+import CustomButton from '@/components/common/CustomButton';
+import { Dialog, DialogContent } from '@mui/material';
+import Image from 'next/image';
+import React from 'react';
+
+const DialogUpdateSequence = ({
+  open,
+  onClose,
+  onUpdateSequence,
+  loading,
+}: {
+  open: boolean;
+  onClose: () => void;
+  onUpdateSequence: () => void;
+  loading: boolean;
+}) => {
+  return (
+    <Dialog
+      open={open}
+      onClose={onClose}
+      maxWidth="lg"
+      sx={{
+        '& .MuiDialog-paper': {
+          color: 'white',
+        },
+      }}
+      PaperProps={{
+        sx: {
+          borderRadius: '16px',
+          background: '#1C1C20',
+        },
+      }}
+    >
+      <DialogContent sx={{ padding: 0 }}>
+        <div className="w-[550px] p-4 relative">
+          <button
+            className="absolute top-6 right-6 hover:bg-[#ffffff10] w-8 h-8 rounded-full flex items-center justify-center"
+            onClick={onClose}
+          >
+            <Image src="/close.svg" width={20} height={20} alt="close-icon" />
+          </button>
+          <div className="px-10 py-20 space-y-10">
+            <div className="flex flex-col items-center gap-6">
+              <div className="border-[4px] bg-[#F3B2AD] border-[#933A42] rounded-full w-16 h-16 mx-auto flex justify-center items-center">
+                <div className="p-6 leading-none font-bold text-[48px] text-[#933A42] select-none">
+                  !
+                </div>
+              </div>
+              <div className="flex items-center flex-col gap-2">
+                <div className="text-h2 !font-bold">Transaction Sequence Outdated</div>
+                <div className="text-b1-light text-center">
+                  Transaction sequence is outdated. To broadcast this
+                  transaction, the sequence number needs to be updated.
+                </div>
+                <div className="text-b1-light text-center">
+                  Would you like to update?
+                </div>
+              </div>
+            </div>
+            <div className="space-y-6">
+              <div className="text-b1-light !font-normal rounded-lg bg-[#ffffff0d] p-2 !text-red-400">
+                After this action all the signers will be required to re-sign.
+              </div>
+              <CustomButton
+                btnOnClick={onUpdateSequence}
+                btnText="Update Sequence"
+                btnLoading={loading}
+                btnStyles="w-full !border-[#D92101] !bg-[#D921011A] delete-multisig-btn"
+              />
+            </div>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DialogUpdateSequence;

frontend/src/app/(routes)/multisig/components/common/BroadCastTxn.tsx

@@ -3,16 +3,28 @@ import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
 import { setError } from '@/store/features/common/commonSlice';
 import {
   broadcastTransaction,
+  resetUpdateTxnSequences,
   resetUpdateTxnState,
   setVerifyDialogOpen,
+  updateTxnSequences,
 } from '@/store/features/multisig/multisigSlice';
 import { RootState } from '@/store/store';
 import { MultisigAddressPubkey, Txn } from '@/types/multisig';
-import React, { useEffect } from 'react';
-import { FAILED_TO_BROADCAST_ERROR } from '@/utils/errors';
+import React, { useEffect, useState } from 'react';
+import {
+  CANNOT_BROADCAST_ERROR,
+  FAILED_TO_BROADCAST_ERROR,
+  FAILED_TO_BROADCAST_TRY_AGAIN,
+  FAILED_TO_UPDATE_SEQUENCE,
+  UPDATED_SEQUENCE_SUCCESSFULLY,
+} from '@/utils/errors';
 import useVerifyAccount from '@/custom-hooks/useVerifyAccount';
 import CustomButton from '@/components/common/CustomButton';
 import { useRouter } from 'next/navigation';
+import DialogUpdateSequence from '../DialogUpdateSequence';
+import { getAuthToken } from '@/utils/localStorage';
+import { COSMOS_CHAIN_ID } from '@/utils/constants';
+import { TxStatus } from '@/types/enums';
 
 interface BroadCastTxnProps {
   txn: Txn;
@@ -21,8 +33,13 @@ interface BroadCastTxnProps {
   pubKeys: MultisigAddressPubkey[];
   chainID: string;
   isMember: boolean;
-  disableBroadcast?: boolean;
   isOverview?: boolean;
+  broadcastInfo?: {
+    disable: boolean;
+    isSequenceLess: boolean;
+    isSequenceGreater: boolean;
+    isSequenceAvailable: boolean;
+  };
 }
 
 const BroadCastTxn: React.FC<BroadCastTxnProps> = (props) => {
@@ -33,8 +50,8 @@ const BroadCastTxn: React.FC<BroadCastTxnProps> = (props) => {
     threshold,
     chainID,
     isMember,
-    disableBroadcast,
     isOverview,
+    broadcastInfo,
   } = props;
   const dispatch = useAppDispatch();
   const { getChainInfo } = useGetChainInfo();
@@ -49,9 +66,15 @@ const BroadCastTxn: React.FC<BroadCastTxnProps> = (props) => {
   });
   const router = useRouter();
 
+  const [seqNotSyncOpen, setSeqNotSyncOpen] = useState(false);
   const updateTxnRes = useAppSelector(
     (state: RootState) => state.multisig.updateTxnRes
   );
+  const updateTxnSequencesStatus = useAppSelector(
+    (state) => state.multisig.updateTxnSequences
+  );
+
+  const authToken = getAuthToken(COSMOS_CHAIN_ID);
 
   useEffect(() => {
     if (updateTxnRes.status === 'rejected') {
@@ -71,10 +94,6 @@ const BroadCastTxn: React.FC<BroadCastTxnProps> = (props) => {
   }, []);
 
   const broadcastTxn = async () => {
-    if (!isAccountVerified()) {
-      dispatch(setVerifyDialogOpen(true));
-      return;
-    }
     dispatch(
       broadcastTransaction({
         chainID,
@@ -88,19 +107,80 @@ const BroadCastTxn: React.FC<BroadCastTxnProps> = (props) => {
       })
     );
   };
+
+  const handleBroadcast = () => {
+    if (!isAccountVerified()) {
+      dispatch(setVerifyDialogOpen(true));
+      return;
+    }
+    if (isOverview) {
+      router.push(`/multisig/${chainName}/${multisigAddress}`);
+    } else if (broadcastInfo) {
+      if (broadcastInfo.isSequenceLess) {
+        setSeqNotSyncOpen(true);
+      } else if (broadcastInfo.isSequenceGreater) {
+        dispatch(setError({ type: 'error', message: CANNOT_BROADCAST_ERROR }));
+      } else if (!broadcastInfo.isSequenceAvailable) {
+        // TODO: Sequence number is not available is the txn is signed before adding txn_Sequence into db 
+        // This needs to be handled 
+        dispatch(
+          setError({ type: 'error', message: "Seqeunce not found" })
+        );
+      } else if (!broadcastInfo.disable) {
+        broadcastTxn();
+      } else {
+        dispatch(
+          setError({ type: 'error', message: FAILED_TO_BROADCAST_TRY_AGAIN })
+        );
+      }
+    }
+  };
+
+  const handleUpdateSequence = () => {
+    dispatch(
+      updateTxnSequences({
+        data: { address: multisigAddress },
+        queryParams: {
+          address: walletAddress,
+          signature: authToken?.signature || '',
+        },
+      })
+    );
+  };
+
+  useEffect(() => {
+    if (updateTxnSequencesStatus.status === TxStatus.IDLE) {
+      dispatch(
+        setError({ type: 'success', message: UPDATED_SEQUENCE_SUCCESSFULLY })
+      );
+      dispatch(resetUpdateTxnSequences());
+      setSeqNotSyncOpen(false);
+    }
+    if (updateTxnSequencesStatus.status === TxStatus.REJECTED) {
+      dispatch(
+        setError({
+          type: 'error',
+          message: updateTxnSequencesStatus?.error || FAILED_TO_UPDATE_SEQUENCE,
+        })
+      );
+    }
+  }, [updateTxnSequencesStatus]);
+
   return (
-    <CustomButton
-      btnText="Broadcast"
-      btnOnClick={() => {
-        if (isOverview) {
-          router.push(`/multisig/${chainName}/${multisigAddress}`);
-        } else {
-          broadcastTxn();
-        }
-      }}
-      btnDisabled={!isMember || disableBroadcast}
-      btnStyles="w-[115px]"
-    />
+    <>
+      <CustomButton
+        btnText="Broadcast"
+        btnOnClick={handleBroadcast}
+        btnDisabled={!isMember}
+        btnStyles="w-[115px]"
+      />
+      <DialogUpdateSequence
+        open={seqNotSyncOpen}
+        onClose={() => setSeqNotSyncOpen(false)}
+        onUpdateSequence={handleUpdateSequence}
+        loading={updateTxnSequencesStatus.status === TxStatus.PENDING}
+      />
+    </>
   );
 };
 

frontend/src/app/(routes)/multisig/components/common/SignTxn.tsx

@@ -16,11 +16,16 @@ interface SignTxnProps {
   unSignedTxn: Txn;
   isMember: boolean;
   chainID: string;
+  isSigned: boolean;
   isOverview?: boolean;
 }
 
+// TODO: Sequence number is not available is the txn is signed before adding txn_Sequence into db
+// This needs to be handled
+
 const SignTxn: React.FC<SignTxnProps> = (props) => {
-  const { address, isMember, unSignedTxn, chainID, isOverview } = props;
+  const { address, isMember, unSignedTxn, chainID, isOverview, isSigned } =
+    props;
   const dispatch = useAppDispatch();
   const { getChainInfo } = useGetChainInfo();
   const { address: walletAddress, rpcURLs, chainName } = getChainInfo(chainID);
@@ -30,6 +35,17 @@ const SignTxn: React.FC<SignTxnProps> = (props) => {
   const router = useRouter();
 
   const txnsCount = useAppSelector((state) => state.multisig.txns.Count);
+  const allTxns = useAppSelector((state) => state.multisig.txns.list);
+  const multisigAccount = useAppSelector(
+    (state) => state.multisig.multisigAccount
+  );
+
+  const partiallySigned = allTxns.filter(
+    (tx) =>
+      tx.signatures.length > 0 &&
+      tx.signatures.length < multisigAccount.account.threshold
+  );
+
   const getCount = (option: string) => {
     let count = 0;
     /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -56,14 +72,16 @@ const SignTxn: React.FC<SignTxnProps> = (props) => {
         unSignedTxn,
         walletAddress,
         rpcURLs,
+        txnSequence: unSignedTxn.txn_sequence,
         toBeBroadcastedCount,
+        partiallySignedCount: partiallySigned?.length,
       })
     );
   };
 
   return (
     <CustomButton
-      btnText="Sign"
+      btnText={isSigned ? 'Signed' : 'Sign'}
       btnDisabled={!isMember}
       btnOnClick={() => {
         if (isOverview) {

frontend/src/app/(routes)/multisig/components/common/TxnsCard.tsx

@@ -30,6 +30,8 @@ import useVerifyAccount from '@/custom-hooks/useVerifyAccount';
 import { fee } from '@/txns/execute';
 import DialogRepeatTxn from '../DialogRepeatTxn';
 import { getTimeDifferenceToFutureDate } from '@/utils/dataTime';
+import { setError } from '@/store/features/common/commonSlice';
+import { ADMIN_ONLY_ALLOWED } from '@/utils/errors';
 
 export const TxnsCard = ({
   txn,
@@ -40,8 +42,8 @@ export const TxnsCard = ({
   isHistory,
   onViewError,
   allowRepeat,
-  disableBroadcast,
   isOverview,
+  broadcastInfo,
 }: {
   txn: Txn;
   currency: Currency;
@@ -51,8 +53,13 @@ export const TxnsCard = ({
   isHistory: boolean;
   onViewError?: (errMsg: string) => void;
   allowRepeat?: boolean;
-  disableBroadcast?: boolean;
   isOverview?: boolean;
+  broadcastInfo?: {
+    disable: boolean;
+    isSequenceLess: boolean;
+    isSequenceGreater: boolean;
+    isSequenceAvailable: boolean;
+  };
 }) => {
   const dispatch = useAppDispatch();
   const { getChainInfo } = useGetChainInfo();
@@ -61,6 +68,11 @@ export const TxnsCard = ({
   const { isAccountVerified } = useVerifyAccount({
     address: walletAddress,
   });
+  const multisigAccount = useAppSelector(
+    (state) => state.multisig.multisigAccount
+  );
+  const isAdmin =
+    multisigAccount?.account?.created_by === (walletAddress || '');
 
   const [showAll, setShowAll] = useState(false);
   const [viewRawOpen, setViewRawOpen] = useState(false);
@@ -81,7 +93,15 @@ export const TxnsCard = ({
 
   const loading = useAppSelector((state) => state.multisig.deleteTxnRes.status);
 
+  const isSigned = txn?.signatures?.some(
+    (sign) => sign.address === walletAddress
+  );
+
   const hanldeDeleteTxn = () => {
+    if (!isAdmin) {
+      dispatch(setError({ type: 'error', message: ADMIN_ONLY_ALLOWED }));
+      return;
+    }
     if (isAccountVerified()) {
       setDeleteDialogOpen(true);
     } else {
@@ -272,8 +292,8 @@ export const TxnsCard = ({
                   threshold={threshold}
                   chainID={chainID}
                   isMember={isMember}
-                  disableBroadcast={disableBroadcast}
                   isOverview={isOverview}
+                  broadcastInfo={broadcastInfo}
                 />
               ) : (
                 <SignTxn
@@ -283,6 +303,7 @@ export const TxnsCard = ({
                   txId={txn.id}
                   unSignedTxn={txn}
                   isOverview={isOverview}
+                  isSigned={isSigned}
                 />
               )}
             </>