feat: Implement offchain sequence management for multisig

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

@@ -12,6 +12,7 @@ import React, { useEffect } from 'react';
 import { FAILED_TO_BROADCAST_ERROR } from '@/utils/errors';
 import useVerifyAccount from '@/custom-hooks/useVerifyAccount';
 import CustomButton from '@/components/common/CustomButton';
+import { useRouter } from 'next/navigation';
 
 interface BroadCastTxnProps {
   txn: Txn;
@@ -20,20 +21,33 @@ interface BroadCastTxnProps {
   pubKeys: MultisigAddressPubkey[];
   chainID: string;
   isMember: boolean;
+  disableBroadcast?: boolean;
+  isOverview?: boolean;
 }
 
 const BroadCastTxn: React.FC<BroadCastTxnProps> = (props) => {
-  const { txn, multisigAddress, pubKeys, threshold, chainID, isMember } = props;
+  const {
+    txn,
+    multisigAddress,
+    pubKeys,
+    threshold,
+    chainID,
+    isMember,
+    disableBroadcast,
+    isOverview,
+  } = props;
   const dispatch = useAppDispatch();
   const { getChainInfo } = useGetChainInfo();
   const {
     address: walletAddress,
     restURLs: baseURLs,
     rpcURLs,
+    chainName,
   } = getChainInfo(chainID);
   const { isAccountVerified } = useVerifyAccount({
     address: walletAddress,
   });
+  const router = useRouter();
 
   const updateTxnRes = useAppSelector(
     (state: RootState) => state.multisig.updateTxnRes
@@ -78,9 +92,13 @@ const BroadCastTxn: React.FC<BroadCastTxnProps> = (props) => {
     <CustomButton
       btnText="Broadcast"
       btnOnClick={() => {
-        broadcastTxn();
+        if (isOverview) {
+          router.push(`/multisig/${chainName}/${multisigAddress}`);
+        } else {
+          broadcastTxn();
+        }
       }}
-      btnDisabled={!isMember}
+      btnDisabled={!isMember || disableBroadcast}
       btnStyles="w-[115px]"
     />
   );

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

@@ -1,4 +1,4 @@
-import { useAppDispatch } from '@/custom-hooks/StateHooks';
+import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
 import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
 import {
   setVerifyDialogOpen,
@@ -8,23 +8,41 @@ import { Txn } from '@/types/multisig';
 import React from 'react';
 import useVerifyAccount from '@/custom-hooks/useVerifyAccount';
 import CustomButton from '@/components/common/CustomButton';
+import { useRouter } from 'next/navigation';
 
 interface SignTxnProps {
   address: string;
   txId: number;
   unSignedTxn: Txn;
   isMember: boolean;
   chainID: string;
+  isOverview?: boolean;
 }
 
 const SignTxn: React.FC<SignTxnProps> = (props) => {
-  const { address, isMember, unSignedTxn, chainID } = props;
+  const { address, isMember, unSignedTxn, chainID, isOverview } = props;
   const dispatch = useAppDispatch();
   const { getChainInfo } = useGetChainInfo();
-  const { address: walletAddress, rpcURLs } = getChainInfo(chainID);
+  const { address: walletAddress, rpcURLs, chainName } = getChainInfo(chainID);
   const { isAccountVerified } = useVerifyAccount({
     address: walletAddress,
   });
+  const router = useRouter();
+
+  const txnsCount = useAppSelector((state) => state.multisig.txns.Count);
+  const getCount = (option: string) => {
+    let count = 0;
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    txnsCount &&
+      txnsCount.forEach((t: any) => {
+        if (t?.computed_status?.toLowerCase() === option.toLowerCase()) {
+          count = t?.count;
+        }
+      });
+
+    return count;
+  };
+  const toBeBroadcastedCount = getCount('to-broadcast');
 
   const signTheTx = async () => {
     if (!isAccountVerified()) {
@@ -37,7 +55,8 @@ const SignTxn: React.FC<SignTxnProps> = (props) => {
         multisigAddress: address,
         unSignedTxn,
         walletAddress,
-        rpcURLs
+        rpcURLs,
+        toBeBroadcastedCount,
       })
     );
   };
@@ -47,7 +66,11 @@ const SignTxn: React.FC<SignTxnProps> = (props) => {
       btnText="Sign"
       btnDisabled={!isMember}
       btnOnClick={() => {
-        signTheTx();
+        if (isOverview) {
+          router.push(`/multisig/${chainName}/${address}`);
+        } else {
+          signTheTx();
+        }
       }}
       btnStyles="w-[115px]"
     />

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

@@ -40,6 +40,8 @@ export const TxnsCard = ({
   isHistory,
   onViewError,
   allowRepeat,
+  disableBroadcast,
+  isOverview,
 }: {
   txn: Txn;
   currency: Currency;
@@ -49,6 +51,8 @@ export const TxnsCard = ({
   isHistory: boolean;
   onViewError?: (errMsg: string) => void;
   allowRepeat?: boolean;
+  disableBroadcast?: boolean;
+  isOverview?: boolean;
 }) => {
   const dispatch = useAppDispatch();
   const { getChainInfo } = useGetChainInfo();
@@ -208,7 +212,7 @@ export const TxnsCard = ({
         <div className="flex gap-[2px] items-end">
           <span className="text-b1">
             {isHistory || isReadyToBroadcast()
-              ? getTimeDifferenceToFutureDate(txn.last_updated, true)
+              ? getTimeDifferenceToFutureDate(txn.signed_at, true)
               : getTimeDifferenceToFutureDate(txn.created_at, true)}
           </span>
         </div>
@@ -268,6 +272,8 @@ export const TxnsCard = ({
                   threshold={threshold}
                   chainID={chainID}
                   isMember={isMember}
+                  disableBroadcast={disableBroadcast}
+                  isOverview={isOverview}
                 />
               ) : (
                 <SignTxn
@@ -276,6 +282,7 @@ export const TxnsCard = ({
                   isMember={isMember}
                   txId={txn.id}
                   unSignedTxn={txn}
+                  isOverview={isOverview}
                 />
               )}
             </>
@@ -303,7 +310,12 @@ export const TxnsCard = ({
         open={deleteDialogOpen}
         onClose={() => setDeleteDialogOpen(false)}
         title="Delete Transaction"
-        description=" Are you sure you want to delete the transaction ?"
+        description={
+          'Are you sure you want to delete the transaction?' +
+          (isReadyToBroadcast()
+            ? ' This action will require re-signing any already signed subsequent transactions.'
+            : '')
+        }
         onDelete={onDeleteTxn}
         loading={loading === TxStatus.PENDING}
       />

frontend/src/app/(routes)/multisig/components/multisig-account/DialogConfirmDelete.tsx

@@ -54,7 +54,7 @@ const DialogConfirmDelete = ({
               />
               <div className="flex items-center flex-col gap-2">
                 <div className="text-h2 !font-bold">{title}</div>
-                <div className="text-b1-light">{description}</div>
+                <div className="text-b1-light text-center">{description}</div>
               </div>
             </div>
             <CustomButton

frontend/src/app/(routes)/multisig/components/multisig-account/Transactions.tsx

@@ -37,7 +37,7 @@ const Transactions = ({
     dispatch(getTxns({ address: multisigAddress, status: status }));
   };
 
-  const txnsCount = useAppSelector((state) => state.multisig.txns.Count)
+  const txnsCount = useAppSelector((state) => state.multisig.txns.Count);
   const txnsStatus = useAppSelector((state) => state.multisig.txns.status);
   const deleteTxnRes = useAppSelector((state) => state.multisig.deleteTxnRes);
   const signTxStatus = useAppSelector(
@@ -172,21 +172,21 @@ const TransactionsFilters = ({
 }: {
   txnsType: string;
   handleTxnsTypeChange: (type: string) => void;
-   /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
+  /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
   txnsCount: any;
 }) => {
-
   const getCount = (option: string) => {
     let count = 0;
-     /* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-    txnsCount && txnsCount.forEach((t: any) => {
-      if (t?.computed_status?.toLowerCase() === option.toLowerCase()) {
-        count = t?.count
-      }
-    })
+    /* eslint-disable @typescript-eslint/no-explicit-any */
+    txnsCount &&
+      txnsCount.forEach((t: any) => {
+        if (t?.computed_status?.toLowerCase() === option.toLowerCase()) {
+          count = t?.count;
+        }
+      });
 
-    return count
-  }
+    return count;
+  };
 
   return (
     <div className="flex gap-4 flex-wrap">
@@ -244,9 +244,19 @@ const TransactionsList = ({
     setErrMsg(errMsg);
     setViewErrorDialogOpen(true);
   };
+  const sortedTxns = [...txns].sort((a, b) => {
+    const dateA = new Date(
+      txnsType === 'to-broadcast' ? a.signed_at : a.created_at
+    ).getTime();
+    const dateB = new Date(
+      txnsType === 'to-broadcast' ? b.signed_at : b.created_at
+    ).getTime();
+    return txnsType === 'to-broadcast' ? dateA - dateB : dateB - dateA;
+  });
+
   return (
     <div className="space-y-4">
-      {txns.map((txn, index) => (
+      {sortedTxns.map((txn, index) => (
         <TxnsCard
           key={index}
           txn={txn}
@@ -257,6 +267,7 @@ const TransactionsList = ({
           isHistory={isHistory}
           onViewError={onViewError}
           allowRepeat={txnsType === 'completed'}
+          disableBroadcast={txnsType === 'to-broadcast' && index > 0}
         />
       ))}
       <DialogTxnFailed

frontend/src/app/(routes)/multisig/components/multisig-dashboard/RecentTransactions.tsx

@@ -111,14 +111,17 @@ const MultisigAccountRecentTxns = ({
             multisigAddress={multisigAddress}
             chainID={chainID}
             isHistory={false}
+            isOverview={true}
           />
         ))}
       </div>
-      <div className="flex justify-end">
-        <button onClick={handleToggleView} className="secondary-btn">
-          {showAllTxns ? 'View Less' : 'View More'}
-        </button>
-      </div>
+      {txns?.length > 1 ? (
+        <div className="flex justify-end">
+          <button onClick={handleToggleView} className="secondary-btn">
+            {showAllTxns ? 'View Less' : 'View More'}
+          </button>
+        </div>
+      ) : null}
     </div>
   );
 };

frontend/src/app/(routes)/multisig/utils/multisigSigning.ts

@@ -24,7 +24,8 @@ const signTransaction = async (
   multisigAddress: string,
   unSignedTxn: Txn,
   walletAddress: string,
-  rpcURLs: string[]
+  rpcURLs: string[],
+  toBeBroadcastedCount: number
 ) => {
   try {
     window.wallet.defaultOptions = {
@@ -47,7 +48,7 @@ const signTransaction = async (
 
     const signerData = {
       accountNumber: multisigAcc?.accountNumber,
-      sequence: multisigAcc?.sequence,
+      sequence: multisigAcc?.sequence + toBeBroadcastedCount,
       chainId: chainID,
     };
 

frontend/src/components/common/CustomButton.tsx

@@ -30,7 +30,7 @@ const CustomButton = ({
 }: CustomButtonProps) => {
   return (
     <button
-      className={`${btnStyles} ${isDelete ? 'delete-btn' : 'primary-btn'}`}
+      className={`${btnStyles} ${isDelete ? 'delete-btn' : 'primary-btn'} ${btnDisabled ? 'cursor-not-allowed opacity-50' : ''}`}
       disabled={btnDisabled}
       type={btnType || 'button'}
       onClick={btnOnClick}

frontend/src/store/features/multisig/multisigSlice.ts

@@ -464,6 +464,7 @@ export const signTransaction = createAsyncThunk(
       unSignedTxn: Txn;
       walletAddress: string;
       rpcURLs: string[];
+      toBeBroadcastedCount: number;
     },
     { rejectWithValue, dispatch }
   ) => {
@@ -473,7 +474,8 @@ export const signTransaction = createAsyncThunk(
         data.multisigAddress,
         data.unSignedTxn,
         data.walletAddress,
-        data.rpcURLs
+        data.rpcURLs,
+        data.toBeBroadcastedCount
       );
       const authToken = getAuthToken(COSMOS_CHAIN_ID);
 

frontend/src/types/multisig.d.ts

@@ -194,6 +194,7 @@ interface Txn {
   signatures: Signature[];
   last_updated: string;
   created_at: string;
+  signed_at: string;
   pubkeys?: MultisigAddressPubkey[];
   threshold?: number;
 }