fix: wait for balances to load before showing warning

lifinance · Aug 3, 2022 · 58ae002 · 58ae002
1 parent 076a967
commit 58ae002
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 3 deletions.
diff --git a/packages/widget/src/hooks/useGasSufficiency.ts b/packages/widget/src/hooks/useGasSufficiency.ts
@@ -27,7 +27,8 @@ export const useGasSufficiency = (route?: Route) => {
       ],
     });
   const fromAmount = useDebouncedWatch(SwapFormKey.FromAmount, 250);
-  const { tokens: fromChainTokenBalances } = useTokenBalances(fromChainId);
+  const { tokens: fromChainTokenBalances, isBalanceFetched } =
+    useTokenBalances(fromChainId);
   const { tokens: toChainTokenBalances } = useTokenBalances(toChainId);
   const { getChainById } = useChains();
 
@@ -117,14 +118,20 @@ export const useGasSufficiency = (route?: Route) => {
   ]);
 
   const insufficientFunds = useMemo(() => {
-    if (!account.isActive || !fromToken || !fromAmount) {
+    if (!account.isActive || !fromToken || !fromAmount || !isBalanceFetched) {
       return false;
     }
     const balance = Big(
       fromChainTokenBalances?.find((t) => t.address === fromToken)?.amount ?? 0,
     );
     return Big(fromAmount).gt(balance);
-  }, [account.isActive, fromAmount, fromChainTokenBalances, fromToken]);
+  }, [
+    account.isActive,
+    fromAmount,
+    fromChainTokenBalances,
+    fromToken,
+    isBalanceFetched,
+  ]);
 
   return {
     insufficientGas,

diff --git a/packages/widget/src/hooks/useTokenBalances.ts b/packages/widget/src/hooks/useTokenBalances.ts
@@ -17,6 +17,7 @@ export const useTokenBalances = (selectedChainId: number) => {
   const {
     data: tokensWithBalance,
     isLoading: isBalanceLoading,
+    isFetched: isBalanceFetched,
     refetch,
   } = useQuery(
     ['token-balances', selectedChainId, account.address],
@@ -57,6 +58,7 @@ export const useTokenBalances = (selectedChainId: number) => {
     tokens: tokensWithBalance ?? (tokens as TokenAmount[] | undefined),
     isLoading: isLoading || isChainsLoading,
     isBalanceLoading: isBalanceLoading && isBalanceLoadingEnabled,
+    isBalanceFetched,
     updateBalances: refetch,
   };
 };