fix: query for tokens if not present in local cache

lifinance · Sep 30, 2022 · d809d8e · d809d8e
1 parent 7c9a188
commit d809d8e
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 7 deletions.
diff --git a/packages/widget/src/components/TokenList/TokenList.tsx b/packages/widget/src/components/TokenList/TokenList.tsx
@@ -55,7 +55,7 @@ export const TokenList: FC<TokenListProps> = ({
     !!selectedChainId;
 
   const { token: searchedToken, isLoading: isSearchedTokenLoading } =
-    useTokenSearch(tokenSearchFilter, selectedChainId, tokenSearchEnabled);
+    useTokenSearch(selectedChainId, tokenSearchFilter, tokenSearchEnabled);
 
   const isLoading =
     isTokensLoading || (tokenSearchEnabled && isSearchedTokenLoading);

diff --git a/packages/widget/src/hooks/useToken.ts b/packages/widget/src/hooks/useToken.ts
@@ -1,5 +1,6 @@
 import { useMemo } from 'react';
 import { useTokens } from './useTokens';
+import { useTokenSearch } from './useTokenSearch';
 
 export const useToken = (chainId: number, tokenAddress: string) => {
   const { tokens, isLoading } = useTokens(chainId);
@@ -11,8 +12,12 @@ export const useToken = (chainId: number, tokenAddress: string) => {
     return token;
   }, [chainId, tokenAddress, tokens]);
 
+  const tokenSearchEnabled = isLoading && !token;
+  const { token: searchedToken, isLoading: isSearchedTokenLoading } =
+    useTokenSearch(chainId, tokenAddress, tokenSearchEnabled);
+
   return {
-    token,
-    isLoading,
+    token: token ?? searchedToken,
+    isLoading: isLoading || (tokenSearchEnabled && isSearchedTokenLoading),
   };
 };
diff --git a/packages/widget/src/hooks/useTokenSearch.ts b/packages/widget/src/hooks/useTokenSearch.ts
@@ -4,13 +4,13 @@ import { useLiFi } from '../providers';
 import type { Token } from '../types';
 
 export const useTokenSearch = (
-  token: string,
   chainId: number,
+  token: string,
   enabled?: boolean,
 ) => {
   const lifi = useLiFi();
   const queryClient = useQueryClient();
-  const { data, isLoading, isFetching, isFetched } = useQuery(
+  const { data, isLoading } = useQuery(
     ['token-search', chainId, token],
     async ({ queryKey: [, chainId, token], signal }) => {
       const data = await lifi.getToken(chainId as ChainId, token as string, {
@@ -34,7 +34,5 @@ export const useTokenSearch = (
   return {
     token: data,
     isLoading,
-    isFetching,
-    isFetched,
   };
 };