From cf14485c60c05e884292d27a18511ccb0f0f537c Mon Sep 17 00:00:00 2001 From: jinoosss Date: Tue, 5 Nov 2024 20:13:49 +0900 Subject: [PATCH] fix: adjust nft loadings --- .../src/hooks/nft/use-is-loading-nft.ts | 20 +++++++++++++++++++ .../src/pages/popup/wallet/history/index.tsx | 16 ++++++++------- .../src/pages/popup/wallet/nft/collection.tsx | 11 ++++++++-- .../src/pages/popup/wallet/nft/index.tsx | 18 ++++++++++++----- .../transaction-history-query.mapper.ts | 17 +++++++++------- 5 files changed, 61 insertions(+), 21 deletions(-) create mode 100644 packages/adena-extension/src/hooks/nft/use-is-loading-nft.ts 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 new file mode 100644 index 00000000..4ab58a7e --- /dev/null +++ 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 index 02662590..1eca6084 100644 --- 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 = () => { diff --git a/packages/adena-extension/src/pages/popup/wallet/nft/collection.tsx b/packages/adena-extension/src/pages/popup/wallet/nft/collection.tsx index 51939383..40e1a38e 100644 --- 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 => { /> diff --git a/packages/adena-extension/src/pages/popup/wallet/nft/index.tsx b/packages/adena-extension/src/pages/popup/wallet/nft/index.tsx index bc032b13..5fc8a111 100644 --- a/packages/adena-extension/src/pages/popup/wallet/nft/index.tsx +++ b/packages/adena-extension/src/pages/popup/wallet/nft/index.tsx @@ -1,6 +1,5 @@ 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'; @@ -8,13 +7,14 @@ 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 => { , ): 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,