fix: disable token loading while wallet disconnected

lifinance · Apr 20, 2022 · be23def · be23def
1 parent c576101
commit be23def
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 14 deletions.
diff --git a/packages/widget/src/components/TokenList/TokenList.tsx b/packages/widget/src/components/TokenList/TokenList.tsx
@@ -1,12 +1,5 @@
 import { Box, List, Typography } from '@mui/material';
-import {
-  FC,
-  PropsWithChildren,
-  useCallback,
-  useMemo,
-  useRef,
-  useTransition,
-} from 'react';
+import { FC, PropsWithChildren, useCallback, useMemo, useRef } from 'react';
 import { useFormContext, useWatch } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 import { defaultRangeExtractor, Range, useVirtual } from 'react-virtual';
@@ -34,7 +27,6 @@ export const TokenList: FC<PropsWithChildren<TokenListProps>> = ({
   onClick,
 }) => {
   const { t } = useTranslation();
-  const [, startTransition] = useTransition();
   const { account } = useWallet();
   const { setValue } = useFormContext();
   const [selectedChainId, myTokensFilter] = useWatch({
@@ -107,10 +99,8 @@ export const TokenList: FC<PropsWithChildren<TokenListProps>> = ({
 
   const handleTokenClick = useCallback(
     (tokenAddress: string) => {
+      setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
       onClick?.();
-      startTransition(() => {
-        setValue(SwapFormKeyHelper.getTokenKey(formType), tokenAddress);
-      });
     },
     [formType, onClick, setValue],
   );

diff --git a/packages/widget/src/hooks/useTokens.ts b/packages/widget/src/hooks/useTokens.ts
@@ -62,6 +62,9 @@ export const useTokens = (selectedChainId: number) => {
     [formatTokens, data?.tokens],
   );
 
+  const isBalancesLoadingEnabled =
+    Boolean(account.address) && Boolean(data) && Boolean(chains);
+
   const {
     data: tokensWithBalance,
     isLoading: isBalancesLoading,
@@ -84,7 +87,7 @@ export const useTokens = (selectedChainId: number) => {
       return formatedTokens;
     },
     {
-      enabled: Boolean(account.address) && Boolean(data) && Boolean(chains),
+      enabled: isBalancesLoadingEnabled,
       refetchIntervalInBackground: true,
       refetchInterval: 60_000,
       staleTime: 60_000,
@@ -96,7 +99,9 @@ export const useTokens = (selectedChainId: number) => {
     tokensWithBalance: tokensWithBalance?.[1],
     isLoading: (isLoading && isFetching) || isChainsLoading,
     isBalancesLoading:
-      (isLoading && isFetching) || isChainsLoading || isBalancesLoading,
+      (isLoading && isFetching) ||
+      isChainsLoading ||
+      (isBalancesLoading && isBalancesLoadingEnabled),
     isBalancesFetching,
     updateBalances: refetch,
   };