chore: update multisig verification (#1213)

* chore: update multisig verification * chore * chore: fix lint issues --------- Co-authored-by: chary <[email protected]>
vitwit · Apr 10, 2024 · 6efcc68 · 6efcc68
1 parent 80d3f6d
commit 6efcc68
Show file tree

Hide file tree

Showing 14 changed files with 320 additions and 201 deletions.
diff --git a/frontend/src/app/(routes)/multisig/components/AccountInfo.tsx b/frontend/src/app/(routes)/multisig/components/AccountInfo.tsx
@@ -1,5 +1,8 @@
 import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
-import { deleteMultisig } from '@/store/features/multisig/multisigSlice';
+import {
+  deleteMultisig,
+  setVerifyDialogOpen,
+} from '@/store/features/multisig/multisigSlice';
 import { RootState } from '@/store/store';
 import { MultisigAccount } from '@/types/multisig';
 import { parseBalance } from '@/utils/denom';
@@ -11,6 +14,7 @@ import DialogDeleteMultisig from './DialogDeleteMultisig';
 import { getTimeDifferenceToFutureDate } from '@/utils/dataTime';
 import CommonCopy from '@/components/CommonCopy';
 import { getAuthToken } from '@/utils/localStorage';
+import useVerifyAccount from '@/custom-hooks/useVerifyAccount';
 
 interface AccountInfoProps {
   chainID: string;
@@ -99,6 +103,7 @@ const AccountInfo: React.FC<AccountInfoProps> = (props) => {
         })}
         chainID={chainID}
         isAdmin={isAdmin}
+        walletAddress={walletAddress}
       />
     </div>
   );
@@ -114,6 +119,7 @@ const AccountDetails = ({
   chainName,
   chainID,
   isAdmin,
+  walletAddress,
 }: {
   multisigAccount: MultisigAccount;
   actionsRequired: number;
@@ -122,6 +128,7 @@ const AccountDetails = ({
   chainName: string;
   chainID: string;
   isAdmin: boolean;
+  walletAddress: string;
 }) => {
   const { account: accountInfo, pubkeys } = multisigAccount;
   const { address, name, created_at, threshold } = accountInfo;
@@ -130,6 +137,10 @@ const AccountDetails = ({
   const deleteMultisigRes = useAppSelector(
     (state: RootState) => state.multisig.deleteMultisigRes
   );
+  const { isAccountVerified } = useVerifyAccount({
+    chainID,
+    address: walletAddress,
+  });
 
   const router = useRouter();
 
@@ -164,6 +175,14 @@ const AccountDetails = ({
     }
   };
 
+  const handleDeleteMultisig = () => {
+    if (!isAccountVerified()) {
+      dispatch(setVerifyDialogOpen(true));
+      return;
+    }
+    setDeleteDialogOpen(true);
+  };
+
   return (
     <div className="flex flex-col rounded-2xl w-full bg-[#0E0B26] h-full">
       <div className="multisig-info-title">
@@ -230,7 +249,7 @@ const AccountDetails = ({
         </div>
         <div>
           <button
-            onClick={() => setDeleteDialogOpen(true)}
+            onClick={() => handleDeleteMultisig()}
             className={
               isAdmin
                 ? 'delete-multisig-btn'

diff --git a/frontend/src/app/(routes)/multisig/components/AllMultisigs.tsx b/frontend/src/app/(routes)/multisig/components/AllMultisigs.tsx
@@ -2,6 +2,7 @@ import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
 import {
   getMultisigAccounts,
   resetCreateMultisigRes,
+  setVerifyDialogOpen,
 } from '@/store/features/multisig/multisigSlice';
 import { RootState } from '@/store/store';
 import { TxStatus } from '@/types/enums';
@@ -15,6 +16,7 @@ import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
 import Link from 'next/link';
 import { copyToClipboard } from '@/utils/copyToClipboard';
 import { setError } from '@/store/features/common/commonSlice';
+import useVerifyAccount from '@/custom-hooks/useVerifyAccount';
 
 interface AllMultisigsProps {
   address: string;
@@ -40,6 +42,7 @@ const AllMultisigs: React.FC<AllMultisigsProps> = (props) => {
   const { pubkey } = accountInfo;
   const { getChainInfo } = useGetChainInfo();
   const { prefix, restURLs } = getChainInfo(chainID);
+  const { isAccountVerified } = useVerifyAccount({ chainID, address });
 
   useEffect(() => {
     if (address) {
@@ -59,6 +62,14 @@ const AllMultisigs: React.FC<AllMultisigsProps> = (props) => {
     }
   }, [createMultiAccRes]);
 
+  const handleCreateMultisig = () => {
+    if (isAccountVerified()) {
+      setDialogOpen(true);
+    } else {
+      dispatch(setVerifyDialogOpen(true));
+    }
+  };
+
   return (
     <div className="flex-1 pl-10 py-6 text-white space-y-6 max-h-screen overflow-y-scroll">
       <div>
@@ -70,7 +81,7 @@ const AllMultisigs: React.FC<AllMultisigsProps> = (props) => {
               <div>
                 <button
                   className="create-multisig-btn"
-                  onClick={() => setDialogOpen(true)}
+                  onClick={() => handleCreateMultisig()}
                 >
                   Create Multisig
                 </button>
@@ -100,7 +111,7 @@ const AllMultisigs: React.FC<AllMultisigsProps> = (props) => {
                 <div>
                   <button
                     className="create-multisig-btn-2"
-                    onClick={() => setDialogOpen(true)}
+                    onClick={() => handleCreateMultisig()}
                   >
                     Create Multisig
                   </button>

diff --git a/frontend/src/app/(routes)/multisig/components/BroadCastTxn.tsx b/frontend/src/app/(routes)/multisig/components/BroadCastTxn.tsx
@@ -3,6 +3,7 @@ import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
 import { setError } from '@/store/features/common/commonSlice';
 import {
   resetUpdateTxnState,
+  setVerifyDialogOpen,
   updateTxn,
 } from '@/store/features/multisig/multisigSlice';
 import { RootState } from '@/store/store';
@@ -17,6 +18,7 @@ import React, { useEffect, useState } from 'react';
 import { MultisigTxStatus } from '@/types/enums';
 import { FAILED_TO_BROADCAST_ERROR } from '@/utils/errors';
 import { CircularProgress } from '@mui/material';
+import useVerifyAccount from '@/custom-hooks/useVerifyAccount';
 
 interface BroadCastTxnProps {
   txn: Txn;
@@ -33,6 +35,10 @@ const BroadCastTxn: React.FC<BroadCastTxnProps> = (props) => {
   const [load, setLoad] = useState(false);
   const { getChainInfo } = useGetChainInfo();
   const { rpc, address: walletAddress } = getChainInfo(chainID);
+  const { isAccountVerified } = useVerifyAccount({
+    chainID,
+    address: walletAddress,
+  });
 
   const updateTxnRes = useAppSelector(
     (state: RootState) => state.multisig.updateTxnRes
@@ -56,6 +62,10 @@ const BroadCastTxn: React.FC<BroadCastTxnProps> = (props) => {
   }, []);
 
   const broadcastTxn = async () => {
+    if (!isAccountVerified()) {
+      dispatch(setVerifyDialogOpen(true));
+      return;
+    }
     setLoad(true);
     const authToken = getAuthToken(chainID);
     const queryParams = {

diff --git a/frontend/src/app/(routes)/multisig/components/DeleteTxn.tsx b/frontend/src/app/(routes)/multisig/components/DeleteTxn.tsx
@@ -1,10 +1,14 @@
 import { useAppDispatch } from '@/custom-hooks/StateHooks';
 import useGetChainInfo from '@/custom-hooks/useGetChainInfo';
-import { deleteTxn } from '@/store/features/multisig/multisigSlice';
+import {
+  deleteTxn,
+  setVerifyDialogOpen,
+} from '@/store/features/multisig/multisigSlice';
 import { getAuthToken } from '@/utils/localStorage';
 import Image from 'next/image';
 import React, { useState } from 'react';
 import DialogDeleteTxn from './DialogDeleteTxn';
+import useVerifyAccount from '@/custom-hooks/useVerifyAccount';
 
 interface DeleteTxnProps {
   txId: number;
@@ -20,6 +24,10 @@ const DeleteTxn: React.FC<DeleteTxnProps> = (props) => {
   const { getChainInfo } = useGetChainInfo();
   const { address: walletAddress } = getChainInfo(chainID);
   const authToken = getAuthToken(chainID);
+  const { isAccountVerified } = useVerifyAccount({
+    chainID,
+    address: walletAddress,
+  });
 
   const deleteTx = () => {
     dispatch(
@@ -40,12 +48,20 @@ const DeleteTxn: React.FC<DeleteTxnProps> = (props) => {
     setDeleteDialogOpen(false);
   };
 
+  const handleDeleteTxn = () => {
+    if (!isAccountVerified()) {
+      dispatch(setVerifyDialogOpen(true));
+      return;
+    }
+    setDeleteDialogOpen(true);
+  };
+
   return (
     <>
       <button
         className="action-image justify-center items-center flex"
         disabled={!isMember}
-        onClick={() => setDeleteDialogOpen(true)}
+        onClick={() => handleDeleteTxn()}
       >
         <Image
           src="/delete-icon.svg"

diff --git a/frontend/src/app/(routes)/multisig/components/DialogVerifyAccount.tsx b/frontend/src/app/(routes)/multisig/components/DialogVerifyAccount.tsx
@@ -0,0 +1,54 @@
+import { dialogBoxPaperPropStyles } from '@/utils/commonStyles';
+import { Dialog, DialogContent } from '@mui/material';
+import React from 'react';
+import VerifyAccount from './VerifyAccount';
+import { useAppDispatch, useAppSelector } from '@/custom-hooks/StateHooks';
+import { setVerifyDialogOpen } from '@/store/features/multisig/multisigSlice';
+import Image from 'next/image';
+import { CLOSE_ICON_PATH } from '@/utils/constants';
+
+const DialogVerifyAccount = ({
+  address,
+  chainID,
+}: {
+  chainID: string;
+  address: string;
+}) => {
+  const dispatch = useAppDispatch();
+  const open = useAppSelector((state) => state.multisig.verifyDialogOpen);
+  const handleClose = () => {
+    dispatch(setVerifyDialogOpen(false));
+  };
+  return (
+    <Dialog
+      open={open}
+      onClose={handleClose}
+      maxWidth="lg"
+      PaperProps={{
+        sx: dialogBoxPaperPropStyles,
+      }}
+    >
+      <DialogContent sx={{ padding: 0 }}>
+        <div className="w-[890px] text-white">
+          <div className="px-10 py-6 pt-10 flex justify-end">
+            <div onClick={handleClose}>
+              <Image
+                className="cursor-pointer"
+                src={CLOSE_ICON_PATH}
+                width={24}
+                height={24}
+                alt="Close"
+                draggable={false}
+              />
+            </div>
+          </div>
+          <div className="mb-10 flex gap-6 px-10 items-center">
+            <VerifyAccount chainID={chainID} walletAddress={address} />
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export default DialogVerifyAccount;