�fix: fix UI issues (#623)

onbloc · Nov 6, 2024 · c98583a · c98583a
1 parent 3555e1c
commit c98583a
Show file tree

Hide file tree

Showing 18 changed files with 101 additions and 55 deletions.
diff --git a/...ges/adena-extension/src/components/molecules/manage-token-list/manage-token-list-item.tsx b/...ges/adena-extension/src/components/molecules/manage-token-list/manage-token-list-item.tsx
@@ -92,7 +92,7 @@ const ManageTokenListItem: React.FC<ManageTokenListItemProps> = ({
             denom={token.balance.denom}
             orientation='HORIZONTAL'
             fontColor={theme.neutral.a}
-            fontStyleKey='body4Reg'
+            fontStyleKey='captionReg'
             minimumFontSize='10px'
           />
         </div>

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
@@ -27,11 +27,11 @@ export const TokenBalanceWrapper = styled.div<TokenBalanceWrapperProps>`
         : 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/...cules/transaction-history/transaction-history-list-item/transaction-history-list-item.tsx b/...cules/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<TransactionHistoryListItemProps> = ({
-  hash,
-  logo,
-  type,
-  status,
-  title,
-  extraInfo,
-  description,
-  amount,
-  valueType,
-  queryGRC721TokenUri,
-  onClickItem,
-}) => {
+const TransactionHistoryListItem: React.FC<TransactionHistoryListItemProps> = (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<TransactionHistoryListItemProps> = ({
   return (
     <TransactionHistoryListItemWrapper onClick={(): void => onClickItem(hash)}>
       <div className='logo-wrapper'>
-        <img className='logo' src={getLogoImage()} alt='logo image' />
+        <img className='logo' src={logoImage} alt='logo image' />
         <img
           className='badge'
           src={status === 'SUCCESS' ? SuccessIcon : FailedIcon}

diff --git a/...nents/molecules/transaction-history/transaction-history-list/transaction-history-list.tsx b/...nents/molecules/transaction-history/transaction-history-list/transaction-history-list.tsx
@@ -25,9 +25,9 @@ const TransactionHistoryList: React.FC<TransactionHistoryListProps> = ({
     <TransactionHistoryListWrapper>
       <span className='title'>{title}</span>
       <div className='list-wrapper'>
-        {transactions.map((transaction, index) => (
+        {transactions.map((transaction) => (
           <TransactionHistoryListItem
-            key={index}
+            key={transaction.hash}
             {...transaction}
             queryGRC721TokenUri={queryGRC721TokenUri}
             onClickItem={onClickItem}

diff --git a/...src/components/pages/nft-collection/nft-collection-assets/nft-collection-assets.styles.ts b/...src/components/pages/nft-collection/nft-collection-assets/nft-collection-assets.styles.ts
@@ -11,7 +11,7 @@ export const NFTCollectionAssetsWrapper = styled.div`
 
   .description {
     position: absolute;
-    top: 210px;
+    top: 139px;
     left: 0px;
     width: 100%;
     text-align: center;

diff --git a/...ages/adena-extension/src/components/pages/nft/nft-collection-card/nft-collection-card.tsx b/...ages/adena-extension/src/components/pages/nft/nft-collection-card/nft-collection-card.tsx
@@ -40,7 +40,9 @@ const NFTCollectionCard: React.FC<NFTCollectionCardProps> = ({
     },
   );
 
-  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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...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
@@ -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
@@ -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
@@ -3,14 +3,14 @@ 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';
 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 = () => {
       </StyledTitleWrapper>
       <TransactionHistory
         status={isSupported ? status : 'error'}
-        transactionInfoLists={data ? TransactionHistoryMapper.queryToDisplay(data) : []}
+        transactionInfoLists={data || []}
         queryGRC721TokenUri={useGetGRC721TokenUri}
         onClickItem={onClickItem}
       />

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
@@ -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);