chore(ui-ux): remove eth wallet balance poll

apps/web/src/components/BridgeForm.tsx

@@ -1,6 +1,7 @@
 import clsx from "clsx";
 import BigNumber from "bignumber.js";
 import { useEffect, useState } from "react";
+import { FiRefreshCw } from "react-icons/fi";
 import { useAccount, useBalance } from "wagmi";
 import { ConnectKitButton } from "connectkit";
 import { autoUpdate, shift, size, useFloating } from "@floating-ui/react-dom";
@@ -108,15 +109,20 @@ export default function BridgeForm({
   const isSendingErcToken =
     selectedNetworkA.name === Network.Ethereum &&
     selectedTokensA.tokenA.name !== ETHEREUM_SYMBOL;
-  const { data } = useBalance({
+  const {
+    data: evmBalance,
+    refetch: refetchEvmBalance,
+    isFetching: isEvmBalanceFetching,
+  } = useBalance({
     address,
-    watch: true,
+    enabled: isSendingErcToken,
+    watch: false,
     ...(isSendingErcToken && {
       token: Erc20Tokens[selectedTokensA.tokenA.name].address,
     }),
   });
 
-  const maxAmount = new BigNumber(data?.formatted ?? 0);
+  const maxAmount = new BigNumber(evmBalance?.formatted ?? 0);
   const [fromAddress, setFromAddress] = useState<string>(address || "");
   const [hasUnconfirmedTxn, setHasUnconfirmedTxn] = useState(false);
 
@@ -160,10 +166,10 @@ export default function BridgeForm({
     setSelectedNetworkA(selectedNetworkB);
   };
 
-  const validateAmountInput = (value: string) => {
+  const validateAmountInput = (value: string, maxValue: BigNumber) => {
     const isSendingToDFC = selectedNetworkB.name === Network.DeFiChain;
     let err = "";
-    if (isSendingToDFC && new BigNumber(value).gt(maxAmount.toFixed(8))) {
+    if (isSendingToDFC && new BigNumber(value).gt(maxValue.toFixed(8))) {
       err = "Insufficient Funds";
     }
     if (
@@ -175,6 +181,8 @@ export default function BridgeForm({
       err = "Invalid Amount";
     }
     setAmountErr(err);
+
+    return err;
   };
 
   const onInputChange = (value: string): void => {
@@ -186,11 +194,24 @@ export default function BridgeForm({
       (numberOnlyRegex.test(value) && maxDpRegex.test(value))
     ) {
       setAmount(value);
-      validateAmountInput(value);
+      validateAmountInput(value, maxAmount);
     }
   };
 
-  const onTransferTokens = (): void => {
+  const onTransferTokens = async (): Promise<void> => {
+    if (isSendingErcToken) {
+      // Revalidate entered amount after refetching EVM balance
+      const refetchedEvmBalance = await refetchEvmBalance();
+      if (
+        validateAmountInput(
+          amount,
+          new BigNumber(refetchedEvmBalance.data?.formatted ?? 0)
+        )
+      ) {
+        return;
+      }
+    }
+
     if (!hasUnconfirmedTxn) {
       const newTxn = {
         selectedNetworkA,
@@ -221,6 +242,10 @@ export default function BridgeForm({
     resetNetworkEnv();
   };
 
+  const onRefreshEvmBalance = async () => {
+    await refetchEvmBalance();
+  };
+
   const getActionBtnLabel = () => {
     switch (true) {
       case hasPendingTxn:
@@ -258,16 +283,23 @@ export default function BridgeForm({
     },
   };
 
-  function confirmationModalonClose(noCloseWarning: boolean) {
+  async function confirmationModalonClose(noCloseWarning: boolean) {
     if (noCloseWarning) {
+      if (isSendingErcToken) {
+        // Wait 15 seconds to give some time for txn to be confirmed
+        setTimeout(async () => {
+          await refetchEvmBalance();
+        }, 15000);
+      }
+
       setShowConfirmModal(false);
     } else setUtilityModalData(UtilityModalMessage.leaveTransaction);
   }
 
   useEffect(() => {
     if (amount) {
       // Revalidate entered amount when selected token is changed
-      validateAmountInput(amount);
+      validateAmountInput(amount, maxAmount);
     }
   }, [maxAmount]);
 
@@ -390,26 +422,35 @@ export default function BridgeForm({
           showAmountsBtn={selectedNetworkA.name === Network.Ethereum}
           disabled={hasUnconfirmedTxn}
         />
-        <div className="flex flex-row pl-3 md:pl-5 lg:pl-6 mt-2">
-          {amountErr ? (
-            <span className="text-xs lg:text-sm text-error">{amountErr}</span>
-          ) : (
-            selectedNetworkA.name === Network.Ethereum && (
-              <>
-                <span className="text-xs lg:text-sm text-dark-700">
-                  Available:
-                </span>
-                <NumericFormat
-                  className="text-xs lg:text-sm text-dark-900 ml-1"
-                  value={maxAmount.toFixed(5, BigNumber.ROUND_FLOOR)}
-                  decimalScale={5}
-                  thousandSeparator
-                  suffix={` ${selectedTokensA.tokenA.name}`}
-                />
-              </>
-            )
-          )}
-        </div>
+        {isConnected && (
+          <div className="flex flex-row pl-3 md:pl-5 lg:pl-6 mt-2 items-center">
+            {amountErr ? (
+              <span className="text-xs lg:text-sm text-error">{amountErr}</span>
+            ) : (
+              selectedNetworkA.name === Network.Ethereum && (
+                <>
+                  <span className="text-xs lg:text-sm text-dark-700">
+                    Available:
+                  </span>
+                  <NumericFormat
+                    className="text-xs lg:text-sm text-dark-900 ml-1"
+                    value={maxAmount.toFixed(5, BigNumber.ROUND_FLOOR)}
+                    decimalScale={5}
+                    thousandSeparator
+                    suffix={` ${selectedTokensA.tokenA.name}`}
+                  />
+                  <FiRefreshCw
+                    onClick={onRefreshEvmBalance}
+                    size={12}
+                    className={clsx("text-dark-900 ml-2 cursor-pointer", {
+                      "animate-spin": isEvmBalanceFetching,
+                    })}
+                  />
+                </>
+              )
+            )}
+          </div>
+        )}
       </div>
       <SwitchButton onClick={switchNetwork} disabled={hasUnconfirmedTxn} />