fix: apply token metadata to transaction history (#630)

onbloc · Nov 7, 2024 · 963805b · 963805b
1 parent 6bd0e04
commit 963805b
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 27 deletions.
diff --git a/packages/adena-extension/src/hooks/use-make-transactions-with-time.ts b/packages/adena-extension/src/hooks/use-make-transactions-with-time.ts
@@ -21,15 +21,20 @@ export const useMakeTransactionsWithTime = (
 ): UseMakeTransactionsWithTimeReturn => {
   const { currentNetwork } = useNetwork();
   const { transactionHistoryService } = useAdenaContext();
-  const { allTokenMetainfos, getTokenImageByDenom, getTokenAmount } = useTokenMetainfo();
+  const { allTokenMetainfos, tokenLogoMap, getTokenAmount } = useTokenMetainfo();
   const { isFetched: isFetchedTokens } = useGRC20Tokens();
   const { data: grc721Collections = [], isFetched: isFetchedGRC721Collections } =
     useGetAllGRC721Collections();
 
   const queryClient = useQueryClient();
 
   const { status, isLoading, isFetched, isFetching, data } = useQuery({
-    queryKey: ['useMakeTransactionsWithTime', currentNetwork.chainId, key || ''],
+    queryKey: [
+      'useMakeTransactionsWithTime',
+      currentNetwork.chainId,
+      Object.values(tokenLogoMap).length,
+      key || '',
+    ],
     queryFn: () => {
       if (!transactions || !grc721Collections) {
         return null;
@@ -73,7 +78,7 @@ export const useMakeTransactionsWithTime = (
                 denom: 'GNOT',
               },
             ),
-            logo: getTokenImageByDenom(transaction.logo) || '',
+            logo: tokenLogoMap?.[transaction.amount.denom] || '',
             date: time || '',
           };
         }),
@@ -90,7 +95,8 @@ export const useMakeTransactionsWithTime = (
       !!transactions &&
       isFetchedTokens &&
       isFetchedGRC721Collections &&
-      allTokenMetainfos.length > 0,
+      !!allTokenMetainfos &&
+      tokenLogoMap !== null,
     keepPreviousData: true,
   });
 

diff --git a/packages/adena-extension/src/hooks/use-token-metainfo.tsx b/packages/adena-extension/src/hooks/use-token-metainfo.tsx
@@ -6,6 +6,7 @@ import { useCurrentAccount } from './use-current-account';
 import { useNetwork } from './use-network';
 
 import { TokenState } from '@states';
+import { useQuery } from '@tanstack/react-query';
 import { GRC20TokenModel, TokenModel } from '@types';
 import { Account } from 'adena-module';
 import BigNumber from 'bignumber.js';
@@ -25,7 +26,7 @@ interface GRC20Token {
 
 export type UseTokenMetainfoReturn = {
   tokenMetainfos: TokenModel[];
-  allTokenMetainfos: TokenModel[];
+  allTokenMetainfos: TokenModel[] | null;
   currentTokenMetainfos: TokenModel[];
   tokenLogoMap: Record<string, string | null>;
   getTokenAmount: (amount: { value: string; denom: string }) => { value: string; denom: string };
@@ -77,20 +78,30 @@ export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
   const { addCollections } = useNFTCollectionHandler();
   const { data: grc20Tokens } = useGRC20Tokens();
 
-  const allTokenMetainfos = useMemo(() => {
-    if (!grc20Tokens || tokenMetainfos.length === 0) {
-      return tokenMetainfos;
-    }
-
-    const remainTokens = grc20Tokens.filter(
-      (token) =>
-        !!token &&
-        tokenMetainfos.findIndex(
-          (meta) => isGRC20TokenModel(meta) && meta?.pkgPath !== token?.pkgPath,
-        ),
-    );
-    return [...tokenMetainfos, ...remainTokens];
-  }, [tokenMetainfos, grc20Tokens]);
+  const { data: allTokenMetainfos = null } = useQuery<TokenModel[]>(
+    [
+      'useTokenMetainfo/allTokenMetainfos',
+      grc20Tokens?.map((token) => token.pkgPath),
+      currentNetwork.networkId,
+    ],
+    async (): Promise<TokenModel[]> => {
+      const fetchedTokenMetainfos = await tokenService.fetchTokenMetainfos();
+      const remainGRC20Tokens = grc20Tokens
+        ? grc20Tokens.filter(
+            (token) =>
+              !fetchedTokenMetainfos.find(
+                (meta) => isGRC20TokenModel(meta) && meta?.pkgPath === token?.pkgPath,
+              ),
+          )
+        : [];
+
+      return [...fetchedTokenMetainfos, ...remainGRC20Tokens];
+    },
+    {
+      staleTime: Infinity,
+      enabled: !!grc20Tokens,
+    },
+  );
 
   const currentTokenMetainfos = useMemo(() => {
     return tokenMetainfos.filter(
@@ -99,6 +110,10 @@ export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
   }, [tokenMetainfos, currentNetwork]);
 
   const tokenMetaMap = useMemo(() => {
+    if (!allTokenMetainfos) {
+      return {};
+    }
+
     return allTokenMetainfos.reduce<{ [key in string]: TokenModel }>((acc, current) => {
       if (isNativeTokenModel(current)) {
         acc[current.denom] = current;
@@ -111,12 +126,16 @@ export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
   }, [allTokenMetainfos]);
 
   const tokenLogoMap = useMemo(() => {
-    return currentTokenMetainfos.reduce<Record<string, string | null>>((accum, current) => {
+    if (!allTokenMetainfos) {
+      return {};
+    }
+
+    return allTokenMetainfos.reduce<Record<string, string | null>>((accum, current) => {
       const key = makeTokenKey(current);
       accum[key] = current.image || null;
       return accum;
     }, {});
-  }, [currentTokenMetainfos]);
+  }, [allTokenMetainfos]);
 
   const initTokenMetainfos = async (withTransferEvents?: boolean): Promise<void> => {
     if (!currentAccount || !currentNetwork.apiUrl) {
@@ -281,7 +300,7 @@ export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
       currentAccount.id,
     );
 
-    const changedTokenMetainfos = tokenMetainfos
+    const newTokenMetainfos = tokenMetainfos
       .filter(
         (t1) =>
           !currentTokenMetainfos.find(
@@ -296,7 +315,8 @@ export const useTokenMetainfo = (): UseTokenMetainfoReturn => {
       }));
 
     await tokenService.updateTokenMetainfosByAccountId(currentAccount.id, [
-      ...changedTokenMetainfos,
+      ...currentTokenMetainfos,
+      ...newTokenMetainfos,
     ]);
     return true;
   };

diff --git a/packages/adena-extension/src/hooks/wallet/token-details/use-token-transactions-page.ts b/packages/adena-extension/src/hooks/wallet/token-details/use-token-transactions-page.ts
@@ -79,7 +79,7 @@ export const useTokenTransactionsPage = (
   }, [allTransactions]);
 
   const { data, isFetched, status, isLoading, isFetching } = useMakeTransactionsWithTime(
-    `token-details/page/history/${currentNetwork.chainId}/${transactions?.length}/${tokenPath}`,
+    `token-details/page/history/${currentNetwork.chainId}/${transactions?.[0].hash}/${tokenPath}`,
     transactions,
   );
 

diff --git a/...ages/adena-extension/src/hooks/wallet/transaction-history/use-transaction-history-page.ts b/...ages/adena-extension/src/hooks/wallet/transaction-history/use-transaction-history-page.ts
@@ -81,10 +81,10 @@ export const useTransactionHistoryPage = ({
     return allTransactions.pages.flatMap(
       (page: unknown) => (page as TransactionWithPageInfo).transactions,
     );
-  }, [allTransactions]);
+  }, [allTransactions?.pages]);
 
   const { data, isFetched, status, isLoading, isFetching } = useMakeTransactionsWithTime(
-    `history/page/all/${currentNetwork.chainId}/${transactions?.length || 0}`,
+    `history/page/all/${currentNetwork.chainId}/${transactions?.[0].hash}`,
     transactions,
   );
 

diff --git a/packages/adena-extension/src/hooks/wallet/transaction-history/use-transaction-history.ts b/packages/adena-extension/src/hooks/wallet/transaction-history/use-transaction-history.ts
@@ -73,7 +73,7 @@ export const useTransactionHistory = ({
   }, [allTransactions, blockIndex]);
 
   const { data, isFetched, status, isLoading, isFetching } = useMakeTransactionsWithTime(
-    `history/common/all/${currentNetwork.chainId}/${transactions?.length}`,
+    `history/common/all/${currentNetwork.chainId}/${transactions?.[0].hash}`,
     transactions,
   );