feature(ui-ux): refetch hot wallet balance and transfer guard

apps/web/src/components/BridgeForm.tsx

@@ -7,7 +7,13 @@ import { ConnectKitButton } from "connectkit";
 import { autoUpdate, shift, size, useFloating } from "@floating-ui/react-dom";
 import { networks, useNetworkContext } from "@contexts/NetworkContext";
 import { useNetworkEnvironmentContext } from "@contexts/NetworkEnvironmentContext";
-import { Network, NetworkOptionsI, SelectionType, TokensI } from "types";
+import {
+  Network,
+  NetworkOptionsI,
+  SelectionType,
+  TokensI,
+  TokenBalances,
+} from "types";
 import SwitchIcon from "@components/icons/SwitchIcon";
 import UtilityModal, {
   ModalConfigType,
@@ -129,29 +135,50 @@ export default function BridgeForm({
 
   const { getBalance } = useCheckBalance();
   const [isBalanceSufficient, setIsBalanceSufficient] = useState(true);
-  const [tokenBalances, setTokenBalances] = useState({});
+  const [tokenBalances, setTokenBalances] = useState<TokenBalances | {}>({});
+  const [isVerifyingTransaction, setIsVerifyingTransaction] = useState(false);
 
-  const checkBalance = debounce(async () => {
+  async function getBalanceFn(): Promise<TokenBalances | {}> {
     const key = `${selectedNetworkA.name}-${selectedTokensA.tokenB.symbol}`;
     const balance = await getBalance(selectedTokensA.tokenB.symbol);
-    setTokenBalances({
+    const updatedBalances = {
       ...tokenBalances,
       [key]: balance,
-    });
+    };
+
+    setTokenBalances(updatedBalances);
+    return updatedBalances;
+  }
+
+  const checkBalance = debounce(async () => {
+    await getBalanceFn();
   }, 200);
 
-  useEffect(() => {
+  async function verifySufficientHWBalance(
+    refetch?: boolean
+  ): Promise<boolean | undefined> {
     const key = `${selectedNetworkA.name}-${selectedTokensA.tokenB.symbol}`;
-    const balance = tokenBalances[key];
+    const balance = (refetch ? await getBalanceFn() : tokenBalances)[key];
+
     if (balance === null) {
       setIsBalanceSufficient(false);
+      return false;
     }
+
     if (balance) {
       const isSufficientBalance = new BigNumber(balance).isGreaterThanOrEqualTo(
         amount !== "" ? amount : 0
       );
+
       setIsBalanceSufficient(isSufficientBalance);
+      return isSufficientBalance;
     }
+
+    return undefined;
+  }
+
+  useEffect(() => {
+    verifySufficientHWBalance();
   }, [selectedNetworkA, selectedTokensA, networkEnv, tokenBalances, amount]);
 
   useEffect(() => {
@@ -198,33 +225,38 @@ export default function BridgeForm({
   };
 
   const onTransferTokens = async (): Promise<void> => {
-    if (isSendingFromEthNetwork) {
-      // Revalidate entered amount after refetching EVM balance
-      const refetchedEvmBalance = await refetchEvmBalance();
-      if (
-        validateAmountInput(
+    setIsVerifyingTransaction(true);
+    const isBalanceSufficientVerified = await verifySufficientHWBalance(true);
+    if (isBalanceSufficientVerified) {
+      if (isSendingFromEthNetwork) {
+        // Revalidate entered amount after refetching EVM balance
+        const refetchedEvmBalance = await refetchEvmBalance();
+        if (
+          validateAmountInput(
+            amount,
+            new BigNumber(refetchedEvmBalance.data?.formatted ?? 0)
+          )
+        ) {
+          setIsVerifyingTransaction(false);
+          return;
+        }
+      }
+      if (!hasUnconfirmedTxn) {
+        const newTxn = {
+          selectedNetworkA,
+          selectedTokensA,
+          selectedNetworkB,
+          selectedTokensB,
+          networkEnv,
           amount,
-          new BigNumber(refetchedEvmBalance.data?.formatted ?? 0)
-        )
-      ) {
-        return;
+          fromAddress,
+          toAddress: addressInput,
+        };
+        setStorage("txn-form", JSON.stringify(newTxn));
       }
+      setShowConfirmModal(true);
     }
-
-    if (!hasUnconfirmedTxn) {
-      const newTxn = {
-        selectedNetworkA,
-        selectedTokensA,
-        selectedNetworkB,
-        selectedTokensB,
-        networkEnv,
-        amount,
-        fromAddress,
-        toAddress: addressInput,
-      };
-      setStorage("txn-form", JSON.stringify(newTxn));
-    }
-    setShowConfirmModal(true);
+    setIsVerifyingTransaction(false);
   };
 
   const onResetTransferForm = () => {
@@ -524,7 +556,7 @@ export default function BridgeForm({
             <ActionButton
               testId="transfer-btn"
               label={getActionBtnLabel()}
-              isLoading={hasPendingTxn}
+              isLoading={hasPendingTxn || isVerifyingTransaction}
               disabled={
                 (isConnected && !isFormValid) ||
                 hasPendingTxn ||

apps/web/src/types.ts

@@ -52,6 +52,10 @@ export interface NetworkOptionsI {
   tokens: TokensI[];
 }
 
+export interface TokenBalances {
+  [key: string]: number;
+}
+
 export interface ProgressStepI {
   step: number;
   label: string;