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,