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 index 294aabe8..8e71b789 100644 --- 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,7 +21,7 @@ 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(); @@ -29,7 +29,12 @@ export const useMakeTransactionsWithTime = ( 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 index 6816e0ed..79460303 100644 --- 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; 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( + [ + 'useTokenMetainfo/allTokenMetainfos', + grc20Tokens?.map((token) => token.pkgPath), + currentNetwork.networkId, + ], + async (): Promise => { + 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>((accum, current) => { + if (!allTokenMetainfos) { + return {}; + } + + return allTokenMetainfos.reduce>((accum, current) => { const key = makeTokenKey(current); accum[key] = current.image || null; return accum; }, {}); - }, [currentTokenMetainfos]); + }, [allTokenMetainfos]); const initTokenMetainfos = async (withTransferEvents?: boolean): Promise => { 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 index fd7bcf58..26d2c0b1 100644 --- 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/packages/adena-extension/src/hooks/wallet/transaction-history/use-transaction-history-page.ts b/packages/adena-extension/src/hooks/wallet/transaction-history/use-transaction-history-page.ts index dfcc0aae..0f554762 100644 --- a/packages/adena-extension/src/hooks/wallet/transaction-history/use-transaction-history-page.ts +++ b/packages/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 index 32989f88..53a842d5 100644 --- 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, );