From d3f4d87133f89c5ff4e3276e09492c2d9c279ec2 Mon Sep 17 00:00:00 2001 From: Eugene Chybisov <18644653+chybisov@users.noreply.github.com> Date: Wed, 1 Mar 2023 12:28:21 +0700 Subject: [PATCH] fix: update local tokens cache to keep priceUSD in sync (#61) --- .../components/ChainSelect/useChainSelect.ts | 2 +- .../widget/src/hooks/useRouteExecution.ts | 2 +- packages/widget/src/hooks/useSwapRoutes.ts | 28 +++++++++++++++++-- .../src/hooks/useTokenAddressBalance.ts | 1 + packages/widget/src/hooks/useTokenBalance.ts | 20 ++++++------- packages/widget/src/hooks/useTokenSearch.ts | 26 ++++++++--------- .../pages/SettingsPage/EnabledToolsButton.tsx | 2 +- 7 files changed, 52 insertions(+), 29 deletions(-) diff --git a/packages/widget/src/components/ChainSelect/useChainSelect.ts b/packages/widget/src/components/ChainSelect/useChainSelect.ts index 1b9671da9..28b6628bc 100644 --- a/packages/widget/src/components/ChainSelect/useChainSelect.ts +++ b/packages/widget/src/components/ChainSelect/useChainSelect.ts @@ -20,7 +20,7 @@ export const useChainSelect = (formType: SwapFormType) => { } const selectedChains = chainOrder .map((chainId) => chains.find((chain) => chain.id === chainId)) - .filter((chain) => chain) as EVMChain[]; + .filter(Boolean) as EVMChain[]; return selectedChains; }; diff --git a/packages/widget/src/hooks/useRouteExecution.ts b/packages/widget/src/hooks/useRouteExecution.ts index 8fa6cc32e..2f1ce347f 100644 --- a/packages/widget/src/hooks/useRouteExecution.ts +++ b/packages/widget/src/hooks/useRouteExecution.ts @@ -105,7 +105,7 @@ export const useRouteExecution = ({ if (!routeExecution?.route) { throw Error('Execution route not found.'); } - queryClient.removeQueries(['routes']); + queryClient.removeQueries(['routes'], { exact: false }); return lifi.executeRoute(account.signer, routeExecution.route, { updateCallback, switchChainHook, diff --git a/packages/widget/src/hooks/useSwapRoutes.ts b/packages/widget/src/hooks/useSwapRoutes.ts index d4ca175b3..6b963a22d 100644 --- a/packages/widget/src/hooks/useSwapRoutes.ts +++ b/packages/widget/src/hooks/useSwapRoutes.ts @@ -1,5 +1,5 @@ import { isAddress } from '@ethersproject/address'; -import type { Route } from '@lifi/sdk'; +import type { Route, RoutesResponse, Token } from '@lifi/sdk'; import { LifiErrorCode } from '@lifi/sdk'; import { useQuery, useQueryClient } from '@tanstack/react-query'; import Big from 'big.js'; @@ -176,7 +176,7 @@ export const useSwapRoutes = () => { steps: [contractCallQuote], }; - return { routes: [route] }; + return { routes: [route] } as RoutesResponse; } return lifi.getRoutes( { @@ -213,6 +213,30 @@ export const useSwapRoutes = () => { } return true; }, + onSuccess(data) { + if (data.routes[0]) { + // Update local tokens cache to keep priceUSD in sync + const { fromToken, toToken } = data.routes[0]; + [fromToken, toToken].forEach((token) => { + queryClient.setQueriesData( + ['token-balances', account.address, token.chainId], + (data) => { + if (data) { + const clonedData = [...data]; + const index = clonedData.findIndex( + (dataToken) => dataToken.address === token.address, + ); + clonedData[index] = { + ...clonedData[index], + ...token, + }; + return clonedData; + } + }, + ); + }); + } + }, }, ); diff --git a/packages/widget/src/hooks/useTokenAddressBalance.ts b/packages/widget/src/hooks/useTokenAddressBalance.ts index b354c4add..9acb716e9 100644 --- a/packages/widget/src/hooks/useTokenAddressBalance.ts +++ b/packages/widget/src/hooks/useTokenAddressBalance.ts @@ -9,6 +9,7 @@ export const useTokenAddressBalance = ( useTokenBalances(chainId); const token = useMemo(() => { + console.log('useTokenAddressBalance'); const token = (tokensWithBalance ?? tokens)?.find( (token) => token.address === tokenAddress && token.chainId === chainId, ); diff --git a/packages/widget/src/hooks/useTokenBalance.ts b/packages/widget/src/hooks/useTokenBalance.ts index 9e29ef88e..9386f677c 100644 --- a/packages/widget/src/hooks/useTokenBalance.ts +++ b/packages/widget/src/hooks/useTokenBalance.ts @@ -83,19 +83,20 @@ export const useTokenBalance = (token?: Token, accountAddress?: string) => { }); } - queryClient.setQueryData( + queryClient.setQueriesData( ['token-balances', accountAddress, token!.chainId], (data) => { if (data) { - const index = data.findIndex( + const clonedData = [...data]; + const index = clonedData.findIndex( (dataToken) => dataToken.address === token!.address, ); - data[index] = { - ...data[index], + clonedData[index] = { + ...clonedData[index], amount: formattedAmount, }; + return clonedData; } - return data; }, ); @@ -112,11 +113,10 @@ export const useTokenBalance = (token?: Token, accountAddress?: string) => { ); const refetchAllBalances = () => { - queryClient.refetchQueries([ - 'token-balances', - token?.chainId, - accountAddress, - ]); + queryClient.refetchQueries( + ['token-balances', accountAddress, token?.chainId], + { exact: false }, + ); }; const refetchNewBalance = useCallback(() => { diff --git a/packages/widget/src/hooks/useTokenSearch.ts b/packages/widget/src/hooks/useTokenSearch.ts index aaa6741f1..2180cae79 100644 --- a/packages/widget/src/hooks/useTokenSearch.ts +++ b/packages/widget/src/hooks/useTokenSearch.ts @@ -21,20 +21,18 @@ export const useTokenSearch = ( }, ); if (token) { - queryClient.setQueriesData( - ['tokens'], - (data?: TokensResponse) => { - if ( - !data?.tokens[chainId as number].some( - (t) => t.address === token.address, - ) - ) { - data?.tokens[chainId as number].push(token as Token); - } - return data; - }, - { updatedAt: Date.now() }, - ); + queryClient.setQueriesData(['tokens'], (data) => { + if ( + data && + !data.tokens[chainId as number].some( + (t) => t.address === token.address, + ) + ) { + const clonedData = { ...data }; + clonedData.tokens[chainId as number].push(token as Token); + return clonedData; + } + }); } return token as Token; }, diff --git a/packages/widget/src/pages/SettingsPage/EnabledToolsButton.tsx b/packages/widget/src/pages/SettingsPage/EnabledToolsButton.tsx index 834cb00be..70a4edaa1 100644 --- a/packages/widget/src/pages/SettingsPage/EnabledToolsButton.tsx +++ b/packages/widget/src/pages/SettingsPage/EnabledToolsButton.tsx @@ -14,7 +14,7 @@ export const EnabledToolsButton: React.FC<{ const navigate = useNavigate(); const [enabledTools, tools] = useSettingsStore((state) => { const enabledTools = Object.values(state[`_enabled${type}`] ?? {}); - return [enabledTools.filter((tool) => tool).length, enabledTools.length]; + return [enabledTools.filter(Boolean).length, enabledTools.length]; }, shallow); const handleClick = () => {