fix: adjust nft loadings

onbloc · Nov 5, 2024 · cf14485 · cf14485
1 parent 1c3c472
commit cf14485
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 21 deletions.
diff --git a/packages/adena-extension/src/hooks/nft/use-is-loading-nft.ts b/packages/adena-extension/src/hooks/nft/use-is-loading-nft.ts
@@ -0,0 +1,20 @@
+import { useIsFetching } from '@tanstack/react-query';
+import { GET_GRC721_BALANCE_QUERY_KEY } from './use-get-grc721-balance';
+import { GET_GRC721_COLLECTIONS_QUERY_KEY } from './use-get-grc721-collections';
+import { GET_GRC721_TOKEN_URI_QUERY_KEY } from './use-get-grc721-token-uri';
+
+export const useIsLoadingNFT = (): number => {
+  return useIsFetching({
+    predicate: (query) => {
+      return (
+        Array.isArray(query.queryKey) &&
+        query.state.data === undefined &&
+        [
+          GET_GRC721_COLLECTIONS_QUERY_KEY,
+          GET_GRC721_BALANCE_QUERY_KEY,
+          GET_GRC721_TOKEN_URI_QUERY_KEY,
+        ].includes(query.queryKey[0])
+      );
+    },
+  });
+};
diff --git a/packages/adena-extension/src/pages/popup/wallet/history/index.tsx b/packages/adena-extension/src/pages/popup/wallet/history/index.tsx
@@ -1,18 +1,19 @@
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
 
+import { HISTORY_FETCH_INTERVAL_TIME } from '@common/constants/interval.constant';
 import { TransactionHistory } from '@components/molecules';
-import { RoutePath } from '@types';
-import { TransactionHistoryMapper } from '@repositories/transaction/mapper/transaction-history-mapper';
-import useScrollHistory from '@hooks/use-scroll-history';
-import { fonts } from '@styles/theme';
-import mixins from '@styles/mixins';
+import { useGetGRC721TokenUri } from '@hooks/nft/use-get-grc721-token-uri';
 import useAppNavigate from '@hooks/use-app-navigate';
-import { useTransactionHistory } from '@hooks/wallet/transaction-history/use-transaction-history';
 import { useCurrentAccount } from '@hooks/use-current-account';
-import { HISTORY_FETCH_INTERVAL_TIME } from '@common/constants/interval.constant';
 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';
 
 const StyledHistoryLayout = styled.div`
   ${mixins.flex({ align: 'normal', justify: 'normal' })};
@@ -112,6 +113,7 @@ const HistoryContainer: React.FC = () => {
       <TransactionHistory
         status={isSupported ? status : 'error'}
         transactionInfoLists={data ? TransactionHistoryMapper.queryToDisplay(data) : []}
+        queryGRC721TokenUri={useGetGRC721TokenUri}
         onClickItem={onClickItem}
       />
     </StyledHistoryLayout>

diff --git a/packages/adena-extension/src/pages/popup/wallet/nft/collection.tsx b/packages/adena-extension/src/pages/popup/wallet/nft/collection.tsx
@@ -6,6 +6,7 @@ import NFTCollectionAssets from '@components/pages/nft-collection/nft-collection
 import NFTCollectionHeader from '@components/pages/nft-collection/nft-collection-header/nft-collection-header';
 import { useGetGRC721TokenUri } from '@hooks/nft/use-get-grc721-token-uri';
 import { useGetGRC721Tokens } from '@hooks/nft/use-get-grc721-tokens';
+import { useIsLoadingNFT } from '@hooks/nft/use-is-loading-nft';
 import useAppNavigate from '@hooks/use-app-navigate';
 import useLink from '@hooks/use-link';
 import mixins from '@styles/mixins';
@@ -17,7 +18,7 @@ const Wrapper = styled.main`
   width: 100%;
   height: 100%;
   padding-top: 24px;
-  gap: 8px;
+  gap: 12px;
   background-color: ${getTheme('neutral', '_8')};
 `;
 
@@ -32,6 +33,12 @@ export const NftCollection = (): JSX.Element => {
     },
   );
 
+  const fetchingCount = useIsLoadingNFT();
+
+  const isFinishFetchedGRC721Tokens = useMemo(() => {
+    return fetchingCount === 0 && isFetchedGRC721Tokens;
+  }, [fetchingCount, isFetchedGRC721Tokens]);
+
   const title = useMemo(() => {
     return params.collection.name;
   }, [params.collection]);
@@ -64,7 +71,7 @@ export const NftCollection = (): JSX.Element => {
       />
       <NFTCollectionAssets
         tokens={grc721Tokens}
-        isFetchedTokens={isFetchedGRC721Tokens}
+        isFetchedTokens={isFinishFetchedGRC721Tokens}
         moveAssetPage={moveCollectionAssetPage}
         queryGRC721TokenUri={useGetGRC721TokenUri}
       />

diff --git a/packages/adena-extension/src/pages/popup/wallet/nft/index.tsx b/packages/adena-extension/src/pages/popup/wallet/nft/index.tsx
@@ -1,20 +1,20 @@
 import styled from 'styled-components';
 
-import { GNOT_TOKEN } from '@common/constants/token.constant';
 import NFTCollections from '@components/pages/nft/nft-collections/nft-collections';
 import NFTHeader from '@components/pages/nft/nft-header/nft-header';
 import { useNFTCollectionHandler } from '@hooks/nft/use-collection-handler';
 import { useGetGRC721Balance } from '@hooks/nft/use-get-grc721-balance';
 import { useGetGRC721Collections } from '@hooks/nft/use-get-grc721-collections';
 import { useGetGRC721PinnedCollections } from '@hooks/nft/use-get-grc721-pinned-collections';
 import { useGetGRC721TokenUri } from '@hooks/nft/use-get-grc721-token-uri';
+import { useIsLoadingNFT } from '@hooks/nft/use-is-loading-nft';
 import useAppNavigate from '@hooks/use-app-navigate';
 import { useCurrentAccount } from '@hooks/use-current-account';
 import useLink from '@hooks/use-link';
 import mixins from '@styles/mixins';
 import { getTheme } from '@styles/theme';
 import { GRC721CollectionModel, RoutePath } from '@types';
-import { useCallback } from 'react';
+import { useCallback, useMemo } from 'react';
 
 const Wrapper = styled.main`
   ${mixins.flex({ align: 'flex-start', justify: 'flex-start' })};
@@ -23,7 +23,7 @@ const Wrapper = styled.main`
   flex-shrink: 0;
   padding-top: 24px;
   padding-bottom: 96px;
-  gap: 8px;
+  gap: 12px;
   background-color: ${getTheme('neutral', '_8')};
 `;
 
@@ -45,6 +45,12 @@ export const Nft = (): JSX.Element => {
 
   const { pinCollection, unpinCollection } = useNFTCollectionHandler();
 
+  const fetchingCount = useIsLoadingNFT();
+
+  const isFinishFetchedCollections = useMemo(() => {
+    return fetchingCount === 0 && isFetchedCollections;
+  }, [fetchingCount, isFetchedCollections]);
+
   const pin = useCallback(
     async (packagePath: string) => {
       await pinCollection(packagePath);
@@ -71,7 +77,9 @@ export const Nft = (): JSX.Element => {
   const moveDepositPage = useCallback(() => {
     navigate(RoutePath.Deposit, {
       state: {
-        token: GNOT_TOKEN,
+        token: {
+          symbol: 'NFT',
+        },
         type: 'token',
       },
     });
@@ -93,7 +101,7 @@ export const Nft = (): JSX.Element => {
       <NFTHeader openGnoscan={openGnoscan} moveDepositPage={moveDepositPage} />
       <NFTCollections
         collections={collections}
-        isFetchedCollections={isFetchedCollections}
+        isFetchedCollections={isFinishFetchedCollections}
         pinnedCollections={pinnedCollections}
         isFetchedPinnedCollections={isFetchedPinnedCollections}
         pin={pin}

diff --git a/...s/adena-extension/src/repositories/transaction/mapper/transaction-history-query.mapper.ts b/...s/adena-extension/src/repositories/transaction/mapper/transaction-history-query.mapper.ts
@@ -102,12 +102,12 @@ export function mapReceivedTransactionByMsgCall(
   tx: TransactionResponse<MsgCallValue>,
 ): TransactionInfo {
   const firstMessage = getDefaultMessage(tx.messages);
-  if (firstMessage.value.func === 'TransferFrom') {
+  if (firstMessage.value.func === 'TransferFrom' && tx.messages.length === 1) {
     return {
       hash: tx.hash,
       height: tx.block_height,
       logo: firstMessage.value.pkg_path || '',
-      type: tx.messages.length === 1 ? 'TRANSFER_GRC721' : 'MULTI_CONTRACT_CALL',
+      type: 'TRANSFER_GRC721',
       status: tx.success ? 'SUCCESS' : 'FAIL',
       typeName: 'Receive',
       title: 'Receive',
@@ -117,7 +117,7 @@ export function mapReceivedTransactionByMsgCall(
         value: firstMessage.value.args?.[2] || '0',
         denom: firstMessage.value.pkg_path || '',
       },
-      to: formatAddress(firstMessage.value.caller || '', 4),
+      to: formatAddress(firstMessage.value.args?.[1] || '', 4),
       from: formatAddress(firstMessage.value.args?.[0] || '', 4),
       originTo: firstMessage.value.caller || '',
       originFrom: firstMessage.value.args?.[0] || '',
@@ -250,11 +250,11 @@ export function mapVMTransaction(
     const isTransfer = messageValue.func === 'Transfer';
     const isTransferGRC721 = messageValue.func === 'TransferFrom';
 
-    const fromAddress = messageValue.caller || '';
-    const toAddress = messageValue.args?.[0] || '';
-    const sendAmount = messageValue.args?.[1] || '0';
-
     if (isTransfer) {
+      const fromAddress = messageValue.caller || '';
+      const toAddress = messageValue.args?.[0] || '';
+      const sendAmount = messageValue.args?.[1] || '0';
+
       return {
         hash: tx.hash,
         height: tx.block_height,
@@ -282,6 +282,9 @@ export function mapVMTransaction(
     }
 
     if (isTransferGRC721) {
+      const fromAddress = messageValue.args?.[0] || '';
+      const toAddress = messageValue.args?.[1] || '';
+
       return {
         hash: tx.hash,
         height: tx.block_height,