- add useQuery hook for fetching token balance

ten-protocol · Aug 27, 2024 · 345012e · 345012e
1 parent 9f881b7
commit 345012e
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 56 deletions.
diff --git a/tools/bridge-frontend/src/components/modules/bridge/index.tsx b/tools/bridge-frontend/src/components/modules/bridge/index.tsx
@@ -28,6 +28,7 @@ import { TransferToSection } from "./transfer-to-section";
 import { bridgeSchema } from "@/src/schemas/bridge";
 import { handleStorage } from "@/src/lib/utils/walletUtils";
 import useWalletStore from "@/src/stores/wallet-store";
+import { useQuery } from "@tanstack/react-query";
 
 export default function Dashboard() {
   const {
@@ -40,7 +41,6 @@ export default function Dashboard() {
   } = useWalletStore();
   const { getNativeBalance, getTokenBalance, sendERC20, sendNative } =
     useContractService();
-  const intervalId = React.useRef<any>(null);
 
   const tokens = isL1ToL2 ? L1TOKENS : L2TOKENS;
   const fromChains = isL1ToL2 ? L1CHAINS : L2CHAINS;
@@ -65,12 +65,31 @@ export default function Dashboard() {
 
   const [fromChain, toChain, token, receiver, amount] = textValues;
 
-  const [fromTokenBalance, setFromTokenBalance] = React.useState<any>(0);
+  async function fetchTokenBalance(token: string, address: string) {
+    if (!token || !address) return null;
+
+    const selectedToken = tokens.find((t) => t.value === token);
+    if (!selectedToken) return null;
+
+    return selectedToken.isNative
+      ? await getNativeBalance(address)
+      : await getTokenBalance(selectedToken.address, address);
+  }
+
+  const { data } = useQuery({
+    queryKey: ["tokenBalance", token, address, fromChain],
+    queryFn: () => fetchTokenBalance(token, address),
+    enabled: !!token && !!address && !!fromChain && walletConnected,
+    refetchInterval: balancePollingInterval,
+  });
+
+  const tokenBalance = (data || 0.0) as number;
+
   const [open, setOpen] = React.useState(false);
 
   const onSubmit = React.useCallback(
     async (data: any) => {
-      if (amount > fromTokenBalance) {
+      if (amount > tokenBalance) {
         setError("amount", {
           type: "manual",
           message: "Amount must be less than balance",
@@ -118,7 +137,7 @@ export default function Dashboard() {
       }
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [address, token, tokens, receiver, fromTokenBalance]
+    [address, token, tokens, receiver, tokenBalance]
   );
 
   const setAmount = React.useCallback(
@@ -130,11 +149,11 @@ export default function Dashboard() {
         });
         return;
       }
-      const amount = Math.floor(((fromTokenBalance * value) / 100) * 100) / 100;
+      const amount = Math.floor(((tokenBalance * value) / 100) * 100) / 100;
       setValue("amount", amount.toString());
     },
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [fromTokenBalance, token]
+    [tokenBalance, token]
   );
 
   const handleSwitchNetwork = React.useCallback(
@@ -162,48 +181,6 @@ export default function Dashboard() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [address]);
 
-  React.useEffect(() => {
-    const fetchTokenBalance = async () => {
-      if (!token || !address) return;
-
-      try {
-        const selectedToken = tokens.find((t: IToken) => t.value === token);
-        if (!selectedToken) return;
-
-        const balance = selectedToken.isNative
-          ? await getNativeBalance(address)
-          : await getTokenBalance(selectedToken.address, address);
-
-        setFromTokenBalance(balance);
-      } catch (error) {
-        console.error("Failed to fetch balance:", error);
-      }
-    };
-
-    fetchTokenBalance();
-
-    intervalId.current = setInterval(() => {
-      fetchTokenBalance();
-    }, balancePollingInterval);
-
-    return () => {
-      if (intervalId.current) {
-        clearInterval(intervalId.current);
-      }
-    };
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [
-    fromChain,
-    token,
-    amount,
-    receiver,
-    provider,
-    isL1ToL2,
-    walletConnected,
-    address,
-  ]);
-
   React.useEffect(() => {
     setValue("fromChain", isL1ToL2 ? L1CHAINS[0].value : L2CHAINS[0].value);
     setValue("toChain", isL1ToL2 ? L2CHAINS[0].value : L1CHAINS[0].value);
@@ -229,7 +206,7 @@ export default function Dashboard() {
                 form={form}
                 fromChains={fromChains}
                 tokens={tokens}
-                fromTokenBalance={fromTokenBalance}
+                tokenBalance={tokenBalance}
                 loading={loading || formState.isSubmitting}
                 setAmount={setAmount}
                 walletConnected={walletConnected}
@@ -249,7 +226,7 @@ export default function Dashboard() {
               <SubmitButton
                 walletConnected={walletConnected}
                 loading={loading || formState.isSubmitting}
-                fromTokenBalance={fromTokenBalance}
+                tokenBalance={tokenBalance}
               />
             </form>
           </Form>

diff --git a/tools/bridge-frontend/src/components/modules/bridge/submit-button.tsx b/tools/bridge-frontend/src/components/modules/bridge/submit-button.tsx
@@ -5,11 +5,11 @@ import ConnectWalletButton from "../common/connect-wallet";
 export const SubmitButton = ({
   walletConnected,
   loading,
-  fromTokenBalance,
+  tokenBalance,
 }: {
   walletConnected: boolean;
   loading: boolean;
-  fromTokenBalance: number;
+  tokenBalance: number;
 }) => {
   return (
     <div className="flex items-center justify-center mt-4">
@@ -18,7 +18,7 @@ export const SubmitButton = ({
           type="submit"
           className="text-sm font-bold leading-none w-full"
           size="lg"
-          disabled={loading || fromTokenBalance <= 0}
+          disabled={loading || tokenBalance <= 0}
         >
           {loading ? <Loader /> : "Initiate Bridge Transaction"}
         </Button>

diff --git a/tools/bridge-frontend/src/components/modules/bridge/transfer-from-section.tsx b/tools/bridge-frontend/src/components/modules/bridge/transfer-from-section.tsx
@@ -11,15 +11,15 @@ export const TransferFromSection = ({
   form,
   fromChains,
   tokens,
-  fromTokenBalance,
+  tokenBalance,
   loading,
   setAmount,
   walletConnected,
 }: {
   form: ReturnType<typeof useCustomHookForm>;
   fromChains: IChain[];
   tokens: IToken[];
-  fromTokenBalance: string;
+  tokenBalance: number;
   loading: boolean;
   setAmount: (value: number) => void;
   walletConnected: boolean;
@@ -36,7 +36,7 @@ export const TransferFromSection = ({
           <div className="pl-2">
             <p className="text-sm text-muted-foreground">Balance:</p>
             <strong className="text-lg float-right word-wrap">
-              {loading ? <Skeleton /> : fromTokenBalance || "0.00"}
+              {loading ? <Skeleton /> : tokenBalance || "0.00"}
             </strong>
           </div>
         </div>