diff --git a/packages/widget/src/components/TokenList/TokenList.tsx b/packages/widget/src/components/TokenList/TokenList.tsx index 32fc3ec3d..76fff489a 100644 --- 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> = ({ 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> = ({ 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 index f5963199f..dd7982b19 100644 --- 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, };