Merge branch 'master' into dependabot/npm_and_yarn/frontend/next-15.0.3

vitwit · Nov 21, 2024 · 4143db6 · 4143db6
2 parents 814c34a + 28bd211
commit 4143db6
Show file tree

Hide file tree

Showing 16 changed files with 272 additions and 45 deletions.
diff --git a/frontend/src/app/(routes)/multisig/components/common/BroadCastTxn.tsx b/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]"
     />
   );

diff --git a/frontend/src/app/(routes)/multisig/components/common/SignTxn.tsx b/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]"
     />

diff --git a/frontend/src/app/(routes)/multisig/components/common/TxnsCard.tsx b/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}
       />

diff --git a/frontend/src/app/(routes)/multisig/components/multisig-account/DialogConfirmDelete.tsx b/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

diff --git a/frontend/src/app/(routes)/multisig/components/multisig-account/MultisigAccount.tsx b/frontend/src/app/(routes)/multisig/components/multisig-account/MultisigAccount.tsx
@@ -1,6 +1,7 @@
 import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
 import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
 import {
+  getDelegations as getMultisigDelegations,
   getMultisigAccounts,
   getMultisigBalances,
   multisigByAddress,
@@ -10,7 +11,6 @@ import {
   resetUpdateTxnState,
   setVerifyDialogOpen,
 } from '@/store/features/multisig/multisigSlice';
-import { getDelegations } from '@/store/features/staking/stakeSlice';
 import { useEffect, useState } from 'react';
 import MultisigAccountHeader from './MultisigAccountHeader';
 import Copy from '@/components/common/Copy';
@@ -92,7 +92,7 @@ const MultisigAccount = ({
         })
       );
       dispatch(
-        getDelegations({
+        getMultisigDelegations({
           baseURLs: restURLs,
           address: multisigAddress,
           chainID,
@@ -202,7 +202,7 @@ const MultisigAccountInfo = ({
     (state) => state.multisig.multisigAccounts
   );
   const totalStaked = useAppSelector(
-    (state) => state.staking.chains?.[chainID]?.delegations.totalStaked
+    (state) => state.multisig?.delegations.totalStaked
   );
   const balance = useAppSelector((state) => state.multisig.balance.balance);
 

diff --git a/frontend/src/app/(routes)/multisig/components/multisig-account/Transactions.tsx b/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

diff --git a/frontend/src/app/(routes)/multisig/components/multisig-dashboard/RecentTransactions.tsx b/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>
   );
 };
diff --git a/frontend/src/app/(routes)/multisig/components/txns/ReDelegate.tsx b/frontend/src/app/(routes)/multisig/components/txns/ReDelegate.tsx
@@ -48,7 +48,7 @@ const ReDelegate: React.FC<ReDelegateProps> = (props) => {
   );
 
   const delegations = useAppSelector(
-    (state: RootState) => state.staking.chains[chainID].delegations
+    (state: RootState) => state.multisig.delegations
   )
 
   useEffect(() => {

diff --git a/frontend/src/app/(routes)/multisig/components/txns/UnDelegate.tsx b/frontend/src/app/(routes)/multisig/components/txns/UnDelegate.tsx
@@ -46,7 +46,7 @@ const UnDelegate: React.FC<UnDelegateProps> = (props) => {
   );
 
   const delegations = useAppSelector(
-    (state: RootState) => state.staking.chains[chainID].delegations
+    (state: RootState) => state.multisig.delegations
   );
 
   useEffect(() => {

diff --git a/frontend/src/app/(routes)/multisig/utils/multisigSigning.ts b/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,
     };
 

diff --git a/frontend/src/components/common/CustomButton.tsx b/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}