From c98583a993f8d460311cef0b2ad5a4e2f305c092 Mon Sep 17 00:00:00 2001 From: jinoosss <112360739+jinoosss@users.noreply.github.com> Date: Wed, 6 Nov 2024 20:06:18 +0900 Subject: [PATCH] fix: fix UI issues (#623) --- .../manage-token-list-item.tsx | 2 +- .../token-balance/token-balance.styles.ts | 2 +- .../transaction-history-list-item.tsx | 38 ++++++++++--------- .../transaction-history-list.tsx | 4 +- .../nft-collection-assets.styles.ts | 2 +- .../nft-collection-card.tsx | 4 +- .../nft-collections/nft-collections.styles.ts | 2 +- .../src/hooks/nft/use-get-grc721-balance.ts | 2 +- .../src/hooks/nft/use-get-grc721-tokens.ts | 5 ++- .../hooks/use-make-transactions-with-time.ts | 25 +++++++++--- .../src/hooks/use-token-metainfo.tsx | 6 ++- .../use-token-transactions-page.ts | 7 +++- .../token-details/use-token-transactions.ts | 7 +++- .../use-transaction-history-page.ts | 15 ++++++-- .../use-transaction-history.ts | 7 +++- .../src/pages/popup/wallet/history/index.tsx | 13 +++---- .../popup/wallet/token-details/index.tsx | 11 +++--- .../transaction-history-query.mapper.ts | 4 +- 18 files changed, 101 insertions(+), 55 deletions(-) diff --git a/packages/adena-extension/src/components/molecules/manage-token-list/manage-token-list-item.tsx b/packages/adena-extension/src/components/molecules/manage-token-list/manage-token-list-item.tsx index bbbd70a0..82f68340 100644 --- a/packages/adena-extension/src/components/molecules/manage-token-list/manage-token-list-item.tsx +++ b/packages/adena-extension/src/components/molecules/manage-token-list/manage-token-list-item.tsx @@ -92,7 +92,7 @@ const ManageTokenListItem: React.FC = ({ denom={token.balance.denom} orientation='HORIZONTAL' fontColor={theme.neutral.a} - fontStyleKey='body4Reg' + fontStyleKey='captionReg' minimumFontSize='10px' /> diff --git a/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts b/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts index 250a9df9..bc6abe03 100644 --- a/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts +++ b/packages/adena-extension/src/components/molecules/token-balance/token-balance.styles.ts @@ -27,11 +27,11 @@ export const TokenBalanceWrapper = styled.div` : css` flex-direction: column; `} - align-items: center; width: fit-content; height: auto; text-align: center; justify-content: center; + align-items: flex-start; column-gap: 4px; .denom-wrapper { diff --git a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.tsx b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.tsx index dd3d7fcf..22325cae 100644 --- a/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.tsx +++ b/packages/adena-extension/src/components/molecules/transaction-history/transaction-history-list-item/transaction-history-list-item.tsx @@ -5,7 +5,7 @@ import FailedIcon from '@assets/failed.svg'; import SuccessIcon from '@assets/success.svg'; import { TokenBalance } from '@components/molecules'; import { UseQueryOptions, UseQueryResult } from '@tanstack/react-query'; -import React, { useCallback } from 'react'; +import React, { useCallback, useMemo } from 'react'; import { TransactionHistoryListItemWrapper } from './transaction-history-list-item.styles'; export interface TransactionHistoryListItemProps { @@ -29,23 +29,27 @@ export interface TransactionHistoryListItemProps { onClickItem: (hash: string) => void; } -const TransactionHistoryListItem: React.FC = ({ - hash, - logo, - type, - status, - title, - extraInfo, - description, - amount, - valueType, - queryGRC721TokenUri, - onClickItem, -}) => { +const TransactionHistoryListItem: React.FC = (args) => { + const { + hash, + logo, + type, + status, + title, + extraInfo, + description, + amount, + valueType, + queryGRC721TokenUri, + onClickItem, + } = args; + const tokenUriQuery = - type === 'TRANSFER_GRC721' && queryGRC721TokenUri ? queryGRC721TokenUri(logo || '', '0') : null; + type === 'TRANSFER_GRC721' && queryGRC721TokenUri !== undefined + ? queryGRC721TokenUri(logo || '', '0') + : null; - const getLogoImage = useCallback(() => { + const logoImage = useMemo(() => { if (type === 'TRANSFER_GRC721' && tokenUriQuery) { return tokenUriQuery?.data || `${UnknownTokenIcon}`; } @@ -78,7 +82,7 @@ const TransactionHistoryListItem: React.FC = ({ return ( onClickItem(hash)}>
- logo image + logo image = ({ {title}
- {transactions.map((transaction, index) => ( + {transactions.map((transaction) => ( = ({ }, ); - const { data: balance } = queryGRC721Balance(grc721Collection.packagePath); + const { data: balance } = queryGRC721Balance(grc721Collection.packagePath, { + refetchOnMount: true, + }); const isFetchedCardTokenUri = useMemo(() => { if (!grc721Collection.isTokenUri) { diff --git a/packages/adena-extension/src/components/pages/nft/nft-collections/nft-collections.styles.ts b/packages/adena-extension/src/components/pages/nft/nft-collections/nft-collections.styles.ts index d0ca29ab..f8282206 100644 --- a/packages/adena-extension/src/components/pages/nft/nft-collections/nft-collections.styles.ts +++ b/packages/adena-extension/src/components/pages/nft/nft-collections/nft-collections.styles.ts @@ -22,7 +22,7 @@ export const NFTCollectionsWrapper = styled.div` .description { position: absolute; - top: 210px; + top: 139px; left: 0px; width: 100%; text-align: center; diff --git a/packages/adena-extension/src/hooks/nft/use-get-grc721-balance.ts b/packages/adena-extension/src/hooks/nft/use-get-grc721-balance.ts index d7f3e331..25d98ee2 100644 --- a/packages/adena-extension/src/hooks/nft/use-get-grc721-balance.ts +++ b/packages/adena-extension/src/hooks/nft/use-get-grc721-balance.ts @@ -22,7 +22,7 @@ export const useGetGRC721Balance = ( return tokenService.fetchGRC721Balance(packagePath, currentAddress).catch(() => null); }, - staleTime: Infinity, + staleTime: 0, ...options, }); }; diff --git a/packages/adena-extension/src/hooks/nft/use-get-grc721-tokens.ts b/packages/adena-extension/src/hooks/nft/use-get-grc721-tokens.ts index 13b3053c..9b020cd3 100644 --- a/packages/adena-extension/src/hooks/nft/use-get-grc721-tokens.ts +++ b/packages/adena-extension/src/hooks/nft/use-get-grc721-tokens.ts @@ -38,8 +38,9 @@ export const useGetGRC721Tokens = ( })) .reverse(); }, - staleTime: Infinity, - keepPreviousData: true, + staleTime: 1_000, + keepPreviousData: false, + refetchOnMount: true, ...options, }); }; 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 9aae6bf3..294aabe8 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 @@ -1,4 +1,5 @@ -import { useQuery } from '@tanstack/react-query'; +import { TransactionHistoryMapper } from '@repositories/transaction/mapper/transaction-history-mapper'; +import { useQuery, useQueryClient } from '@tanstack/react-query'; import { TransactionInfo } from '@types'; import { useGetAllGRC721Collections } from './nft/use-get-all-grc721-collections'; import { useAdenaContext } from './use-context'; @@ -11,7 +12,7 @@ export interface UseMakeTransactionsWithTimeReturn { isLoading: boolean; isFetched: boolean; isFetching: boolean; - data: TransactionInfo[] | null | undefined; + data: { title: string; transactions: TransactionInfo[] }[] | null | undefined; } export const useMakeTransactionsWithTime = ( @@ -20,11 +21,13 @@ export const useMakeTransactionsWithTime = ( ): UseMakeTransactionsWithTimeReturn => { const { currentNetwork } = useNetwork(); const { transactionHistoryService } = useAdenaContext(); - const { getTokenImageByDenom, getTokenAmount } = useTokenMetainfo(); + const { allTokenMetainfos, getTokenImageByDenom, 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 || ''], queryFn: () => { @@ -34,9 +37,12 @@ export const useMakeTransactionsWithTime = ( return Promise.all( transactions.map(async (transaction) => { - const time = await transactionHistoryService.fetchBlockTime( - Number(transaction.height || 1), + const time = await queryClient.fetchQuery( + ['blockTime', currentNetwork.networkId, transaction.height || 1], + () => transactionHistoryService.fetchBlockTime(Number(transaction.height || 1)), + { staleTime: Infinity }, ); + if (transaction.type === 'TRANSFER_GRC721') { const amount = transaction.amount; const collection = grc721Collections.find( @@ -73,11 +79,18 @@ export const useMakeTransactionsWithTime = ( }), ); }, + select: (data) => { + if (!data) { + return null; + } + return TransactionHistoryMapper.queryToDisplay(data); + }, enabled: !!transactionHistoryService.supported && !!transactions && isFetchedTokens && - isFetchedGRC721Collections, + isFetchedGRC721Collections && + allTokenMetainfos.length > 0, 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 ee04c112..6816e0ed 100644 --- a/packages/adena-extension/src/hooks/use-token-metainfo.tsx +++ b/packages/adena-extension/src/hooks/use-token-metainfo.tsx @@ -195,7 +195,11 @@ export const useTokenMetainfo = (): UseTokenMetainfoReturn => { (amount: { value: string; denom: string }) => { const tokenMeta = tokenMetaMap[amount.denom]; if (!tokenMeta) { - return amount; + const paths = amount.denom.split('/'); + return { + ...amount, + denom: paths.length > 0 ? paths[paths.length - 1] : amount.denom, + }; } const value = BigNumber(amount.value) .shiftedBy(tokenMeta.decimals * -1) 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 cd733fd2..fd7bcf58 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 @@ -13,7 +13,12 @@ export const useTokenTransactionsPage = ( tokenPath: string, { enabled }: { enabled: boolean }, ): { - data: TransactionInfo[] | null; + data: + | { + title: string; + transactions: TransactionInfo[]; + }[] + | null; isFetched: boolean; status: 'loading' | 'error' | 'success'; isLoading: boolean; diff --git a/packages/adena-extension/src/hooks/wallet/token-details/use-token-transactions.ts b/packages/adena-extension/src/hooks/wallet/token-details/use-token-transactions.ts index a63d379c..9689946e 100644 --- a/packages/adena-extension/src/hooks/wallet/token-details/use-token-transactions.ts +++ b/packages/adena-extension/src/hooks/wallet/token-details/use-token-transactions.ts @@ -13,7 +13,12 @@ export const useTokenTransactions = ( tokenPath: string, { enabled }: { enabled: boolean }, ): { - data: TransactionInfo[] | null; + data: + | { + title: string; + transactions: TransactionInfo[]; + }[] + | null; isFetched: boolean; status: 'loading' | 'error' | 'success'; isLoading: boolean; 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 5d89ce6a..dfcc0aae 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 @@ -1,5 +1,5 @@ -import { useMemo } from 'react'; import { RefetchOptions, useInfiniteQuery } from '@tanstack/react-query'; +import { useMemo } from 'react'; import { useAdenaContext } from '@hooks/use-context'; import { useCurrentAccount } from '@hooks/use-current-account'; @@ -8,12 +8,19 @@ import { useNetwork } from '@hooks/use-network'; import { useTokenMetainfo } from '@hooks/use-token-metainfo'; import { TransactionInfo, TransactionWithPageInfo } from '@types'; +const REFETCH_INTERVAL = 5_000; + export const useTransactionHistoryPage = ({ enabled, }: { enabled: boolean; }): { - data: TransactionInfo[] | null; + data: + | { + title: string; + transactions: TransactionInfo[]; + }[] + | null; isFetched: boolean; status: 'loading' | 'error' | 'success'; isLoading: boolean; @@ -61,6 +68,8 @@ export const useTransactionHistoryPage = ({ tokenMetainfos.length > 0 && transactionHistoryService.supported && enabled, + keepPreviousData: true, + refetchInterval: REFETCH_INTERVAL, }, ); @@ -75,7 +84,7 @@ export const useTransactionHistoryPage = ({ }, [allTransactions]); const { data, isFetched, status, isLoading, isFetching } = useMakeTransactionsWithTime( - `history/page/all/${currentNetwork.chainId}/${transactions?.length}`, + `history/page/all/${currentNetwork.chainId}/${transactions?.length || 0}`, 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 07f733e9..32989f88 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 @@ -15,7 +15,12 @@ export const useTransactionHistory = ({ }: { enabled: boolean; }): { - data: TransactionInfo[] | null; + data: + | { + title: string; + transactions: TransactionInfo[]; + }[] + | null; isFetched: boolean; status: 'loading' | 'error' | 'success'; isLoading: boolean; diff --git a/packages/adena-extension/src/pages/popup/wallet/history/index.tsx b/packages/adena-extension/src/pages/popup/wallet/history/index.tsx index 1eca6084..31c0f080 100644 --- a/packages/adena-extension/src/pages/popup/wallet/history/index.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/history/index.tsx @@ -3,6 +3,7 @@ import styled from 'styled-components'; import { HISTORY_FETCH_INTERVAL_TIME } from '@common/constants/interval.constant'; import { TransactionHistory } from '@components/molecules'; +import { useGetAllGRC721Collections } from '@hooks/nft/use-get-all-grc721-collections'; import { useGetGRC721TokenUri } from '@hooks/nft/use-get-grc721-token-uri'; import useAppNavigate from '@hooks/use-app-navigate'; import { useCurrentAccount } from '@hooks/use-current-account'; @@ -10,7 +11,6 @@ import { useNetwork } from '@hooks/use-network'; import useScrollHistory from '@hooks/use-scroll-history'; import { useTransactionHistory } from '@hooks/wallet/transaction-history/use-transaction-history'; import { useTransactionHistoryPage } from '@hooks/wallet/transaction-history/use-transaction-history-page'; -import { TransactionHistoryMapper } from '@repositories/transaction/mapper/transaction-history-mapper'; import mixins from '@styles/mixins'; import { fonts } from '@styles/theme'; import { RoutePath } from '@types'; @@ -40,6 +40,8 @@ const HistoryContainer: React.FC = () => { const { saveScrollPosition } = useScrollHistory(scrollRef); const { currentNetwork } = useNetwork(); + useGetAllGRC721Collections({ refetchOnMount: true }); + const isUsedApi = useMemo(() => { return !!currentNetwork.apiUrl; }, [currentNetwork]); @@ -64,7 +66,7 @@ const HistoryContainer: React.FC = () => { }, [loadingNextFetch, isLoading, isFetching, hasNextPage]); useEffect(() => { - if (document.getElementsByTagName('body').length > 0) { + if (document.getElementsByTagName('body') && document.getElementsByTagName('body').length > 0) { setBodyElement(document.getElementsByTagName('body')[0]); } }, [document.getElementsByTagName('body')]); @@ -90,10 +92,7 @@ const HistoryContainer: React.FC = () => { const onClickItem = useCallback( (hash: string) => { - const transactions = - TransactionHistoryMapper.queryToDisplay(data || []).flatMap( - (group) => group.transactions, - ) ?? []; + const transactions = data?.flatMap((group) => group.transactions) ?? []; const transactionInfo = transactions.find((transaction) => transaction.hash === hash); if (transactionInfo) { saveScrollPosition(scrollRef.current?.scrollTop || 0); @@ -112,7 +111,7 @@ const HistoryContainer: React.FC = () => { diff --git a/packages/adena-extension/src/pages/popup/wallet/token-details/index.tsx b/packages/adena-extension/src/pages/popup/wallet/token-details/index.tsx index b19c88ef..94cb0271 100644 --- a/packages/adena-extension/src/pages/popup/wallet/token-details/index.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/token-details/index.tsx @@ -10,7 +10,6 @@ import { DoubleButton, TransactionHistory } from '@components/molecules'; import { useCurrentAccount } from '@hooks/use-current-account'; import useHistoryData from '@hooks/use-history-data'; import useScrollHistory from '@hooks/use-scroll-history'; -import { TransactionHistoryMapper } from '@repositories/transaction/mapper/transaction-history-mapper'; import { getTheme } from '@styles/theme'; import { RoutePath } from '@types'; @@ -143,7 +142,10 @@ export const TokenDetails = (): JSX.Element => { }, [currentBalances, tokenBalance]); const transactions = useMemo(() => { - return TransactionHistoryMapper.queryToDisplay(data || []); + if (!data) { + return []; + } + return data; }, [data]); const onScrollListener = (): void => { @@ -158,10 +160,7 @@ export const TokenDetails = (): JSX.Element => { const onClickItem = useCallback( (hash: string) => { - const transactions = - TransactionHistoryMapper.queryToDisplay(data ?? []).flatMap( - (group) => group.transactions, - ) ?? []; + const transactions = data?.flatMap((group) => group.transactions) ?? []; const transactionInfo = transactions.find((transaction) => transaction.hash === hash); if (transactionInfo) { saveScrollPosition(scrollRef.current?.scrollTop || 0); diff --git a/packages/adena-extension/src/repositories/transaction/mapper/transaction-history-query.mapper.ts b/packages/adena-extension/src/repositories/transaction/mapper/transaction-history-query.mapper.ts index 392cecd6..b607188d 100644 --- a/packages/adena-extension/src/repositories/transaction/mapper/transaction-history-query.mapper.ts +++ b/packages/adena-extension/src/repositories/transaction/mapper/transaction-history-query.mapper.ts @@ -258,7 +258,7 @@ export function mapVMTransaction( return { hash: tx.hash, height: tx.block_height, - logo: '', + logo: firstMessage.value.pkg_path || '', type: 'TRANSFER', status: tx.success ? 'SUCCESS' : 'FAIL', typeName: 'Send', @@ -288,7 +288,7 @@ export function mapVMTransaction( return { hash: tx.hash, height: tx.block_height, - logo: '', + logo: firstMessage.value.pkg_path || '', type: 'TRANSFER_GRC721', status: tx.success ? 'SUCCESS' : 'FAIL', typeName: 'Send',