From 284d0eb535dfa2e8de0813aeda7b3ec9dc79e755 Mon Sep 17 00:00:00 2001
From: Albina Nikiforova <albina.nikiforova.5670@gmail.com>
Date: Thu, 12 Dec 2024 10:13:05 +0100
Subject: [PATCH] feat(suite): nft section

---
 .../components/suite/FormattedNftAmount.tsx   |   4 +-
 packages/suite/src/support/messages.ts        |  64 ++++-
 .../views/wallet/nfts/NftsTable/NftsRow.tsx   | 272 ++++++++++++++++++
 .../views/wallet/nfts/NftsTable/NftsTable.tsx |  76 +++++
 .../views/wallet/nfts/NftsTablesSection.tsx   |  94 ++++++
 .../suite/src/views/wallet/nfts/index.tsx     |  59 ++++
 6 files changed, 566 insertions(+), 3 deletions(-)
 create mode 100644 packages/suite/src/views/wallet/nfts/NftsTable/NftsRow.tsx
 create mode 100644 packages/suite/src/views/wallet/nfts/NftsTable/NftsTable.tsx
 create mode 100644 packages/suite/src/views/wallet/nfts/NftsTablesSection.tsx
 create mode 100644 packages/suite/src/views/wallet/nfts/index.tsx

diff --git a/packages/suite/src/components/suite/FormattedNftAmount.tsx b/packages/suite/src/components/suite/FormattedNftAmount.tsx
index 90a36e95a2f..c481f2e0991 100644
--- a/packages/suite/src/components/suite/FormattedNftAmount.tsx
+++ b/packages/suite/src/components/suite/FormattedNftAmount.tsx
@@ -63,7 +63,7 @@ export const FormattedNftAmount = ({
                                 ) : (
                                     <Row gap={spacings.xxs}>
                                         <Row>{token.value}x</Row>
-                                        <Translation id="TR_TOKEN_ID" />
+                                        <Translation id="TR_TOKEN_ID_COLON" />
                                     </Row>
                                 )}
                             </Row>
@@ -95,7 +95,7 @@ export const FormattedNftAmount = ({
             <Row className={className}>
                 {signValue ? <Sign value={signValue} /> : null}
                 <Box margin={{ right: spacings.xxs }}>
-                    <Translation id="TR_TOKEN_ID" />
+                    <Translation id="TR_TOKEN_ID_COLON" />
                 </Box>
                 {isWithLink ? (
                     <TrezorLink
diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts
index 44c411158e0..e39e25317dd 100644
--- a/packages/suite/src/support/messages.ts
+++ b/packages/suite/src/support/messages.ts
@@ -2595,6 +2595,14 @@ export default defineMessages({
         defaultMessage: 'Unrecognized tokens pose potential risks. Use caution.',
         id: 'TR_TOKEN_UNRECOGNIZED_BY_TREZOR_TOOLTIP',
     },
+    TR_COLLECTIONS_UNRECOGNIZED_BY_TREZOR: {
+        defaultMessage: 'Unrecognized collections',
+        id: 'TR_COLLECTIONS_UNRECOGNIZED_BY_TREZOR',
+    },
+    TR_NFT_UNRECOGNIZED_BY_TREZOR_TOOLTIP: {
+        defaultMessage: 'Unrecognized NFTs pose potential risks. Use caution.',
+        id: 'TR_NFT_UNRECOGNIZED_BY_TREZOR_TOOLTIP',
+    },
     TR_LEARN: {
         defaultMessage: 'Learn',
         description: 'Link to Suite Guide.',
@@ -2718,6 +2726,14 @@ export default defineMessages({
         defaultMessage: 'Tokens',
         id: 'TR_NAV_TOKENS',
     },
+    TR_NAV_COLLECTIONS: {
+        defaultMessage: 'Collections',
+        id: 'TR_NAV_COLLECTIONS',
+    },
+    TR_NAV_NFTS: {
+        defaultMessage: 'NFTs',
+        id: 'TR_NAV_NFTS',
+    },
     TR_NAV_SIGN_AND_VERIFY: {
         defaultMessage: 'Sign & verify',
         description:
@@ -3307,8 +3323,13 @@ export default defineMessages({
         defaultMessage: 'Details',
         id: 'TR_TRANSACTION_DETAILS',
     },
-    TR_TOKEN_ID: {
+    TR_TOKEN_ID_COLON: {
         defaultMessage: 'Token ID:',
+        id: 'TR_TOKEN_ID_COLON',
+    },
+
+    TR_TOKEN_ID: {
+        defaultMessage: 'Token ID',
         id: 'TR_TOKEN_ID',
     },
     TR_NO_TRANSPORT: {
@@ -4979,6 +5000,15 @@ export default defineMessages({
         defaultMessage: 'Experimental',
         description: 'Section title for Early Access program so far',
     },
+    TR_EXPERIMENTAL_NFT_SECTION: {
+        id: 'TR_EXPERIMENTAL_NFT_SECTION',
+        defaultMessage: 'NFT Section',
+    },
+    TR_EXPERIMENTAL_NFT_SECTION_DESCRIPTION: {
+        id: 'TR_EXPERIMENTAL_NFT_SECTION_DESCRIPTION',
+        defaultMessage:
+            'Access NFT section in your wallet. Right now available only for EVM based chains.',
+    },
     TR_EXPERIMENTAL_FEATURES_ALLOW: {
         id: 'TR_EXPERIMENTAL_FEATURES_ALLOW',
         defaultMessage: 'Experimental features',
@@ -5294,18 +5324,42 @@ export default defineMessages({
         id: 'TR_TOKENS',
         defaultMessage: 'Tokens',
     },
+    TR_COLLECTION_NAME: {
+        id: 'TR_COLLECTION_NAME',
+        defaultMessage: 'Collection name',
+    },
+    TR_ID: {
+        id: 'TR_ID',
+        defaultMessage: 'ID',
+    },
+    TR_NFT: {
+        id: 'TR_NFT',
+        defaultMessage: 'NFT',
+    },
     TR_TOKENS_EMPTY: {
         id: 'TR_TOKENS_EMPTY',
         defaultMessage: 'No tokens... yet.',
     },
+    TR_NFT_EMPTY: {
+        id: 'TR_NFT_EMPTY',
+        defaultMessage: 'No NFT collections... yet.',
+    },
     TR_TOKENS_EMPTY_CHECK_HIDDEN: {
         id: 'TR_TOKENS_EMPTY_CHECK_HIDDEN',
         defaultMessage: 'No tokens. They may be hidden.',
     },
+    TR_NFT_EMPTY_CHECK_HIDDEN: {
+        id: 'TR_NFT_EMPTY_CHECK_HIDDEN',
+        defaultMessage: 'No NFT collections. They may be hidden.',
+    },
     TR_HIDDEN_TOKENS_EMPTY: {
         id: 'TR_HIDDEN_TOKENS_EMPTY',
         defaultMessage: 'You have no hidden tokens.',
     },
+    TR_HIDDEN_NFT_EMPTY: {
+        id: 'TR_HIDDEN_NFT_EMPTY',
+        defaultMessage: 'You have no hidden NFT collections.',
+    },
     TR_ADD_TOKEN_TITLE: {
         id: 'TR_ADD_TOKEN_TITLE',
         defaultMessage: 'Add ERC20 token',
@@ -5395,6 +5449,10 @@ export default defineMessages({
         defaultMessage: 'Amount',
         id: 'AMOUNT',
     },
+    TR_QUANTITY: {
+        defaultMessage: 'Quantity',
+        id: 'TR_QUANTITY',
+    },
     AMOUNT_SEND_MAX: {
         id: 'AMOUNT_SEND_MAX',
         defaultMessage: 'Send max',
@@ -6364,6 +6422,10 @@ export default defineMessages({
         id: 'TR_UNHIDE_TOKEN',
         defaultMessage: 'Unhide token',
     },
+    TR_HIDE_COLLECTION: {
+        id: 'TR_HIDE_COLLECTION',
+        defaultMessage: 'Hide collection',
+    },
     TR_UNHIDE: {
         id: 'TR_UNHIDE',
         defaultMessage: 'Unhide',
diff --git a/packages/suite/src/views/wallet/nfts/NftsTable/NftsRow.tsx b/packages/suite/src/views/wallet/nfts/NftsTable/NftsRow.tsx
new file mode 100644
index 00000000000..4f7e32222af
--- /dev/null
+++ b/packages/suite/src/views/wallet/nfts/NftsTable/NftsRow.tsx
@@ -0,0 +1,272 @@
+import { useState } from 'react';
+
+import styled from 'styled-components';
+
+import { Network } from '@suite-common/wallet-config';
+import {
+    DefinitionType,
+    tokenDefinitionsActions,
+    TokenManagementAction,
+    EnhancedTokenInfo,
+} from '@suite-common/token-definitions';
+import {
+    Badge,
+    Button,
+    Column,
+    Dropdown,
+    GroupedMenuItems,
+    Icon,
+    Row,
+    Table,
+    Text,
+} from '@trezor/components';
+import { spacings } from '@trezor/theme';
+import { SelectedAccountStatus } from '@suite-common/wallet-types';
+import { getNftExplorerUrl } from '@suite-common/wallet-utils';
+
+import { goto } from 'src/actions/suite/routerActions';
+import {
+    HiddenPlaceholder,
+    RedactNumericalValue,
+    Translation,
+    TrezorLink,
+} from 'src/components/suite';
+import { useDispatch, useSelector } from 'src/hooks/suite';
+import { SUITE } from 'src/actions/suite/constants';
+import { selectIsCopyAddressModalShown } from 'src/reducers/suite/suiteReducer';
+import { onCopyAddressWithModal } from 'src/actions/suite/copyAddressActions';
+
+type NftsRowProps = {
+    nft: EnhancedTokenInfo;
+    network: Network;
+    selectedAccount: SelectedAccountStatus;
+    isShown?: boolean;
+};
+
+const CollectionToggle = styled.div`
+    user-select: none;
+`;
+
+const IconWrapper = styled.div<{ $isActive: boolean }>`
+    transition: transform 0.2s ease-in-out;
+    transform: ${({ $isActive }) => ($isActive ? 'rotate(0)' : 'rotate(-90deg)')};
+`;
+
+const NftsRow = ({ nft, network, isShown, selectedAccount }: NftsRowProps) => {
+    const dispatch = useDispatch();
+
+    const [isCollectionOpen, setIsCollectionOpen] = useState(false);
+
+    const shouldShowCopyAddressModal = useSelector(selectIsCopyAddressModalShown);
+    const { account } = selectedAccount;
+
+    const getNftContractExplorerUrl = (network: Network, nft: EnhancedTokenInfo) => {
+        const explorerUrl = network.explorer.account;
+        const contractAddress = nft.contract;
+        const queryString = network.explorer.queryString ?? '';
+
+        return `${explorerUrl}${contractAddress}${queryString}`;
+    };
+
+    const nftItemsCount = nft.ids?.length || nft.multiTokenValues?.length || 0;
+
+    return (
+        <>
+            <Table.Row onClick={() => setIsCollectionOpen(!isCollectionOpen)}>
+                <Table.Cell colSpan={1}>
+                    <CollectionToggle>
+                        <Row gap={spacings.xs}>
+                            <IconWrapper $isActive={isCollectionOpen}>
+                                <Icon size={18} name="chevronDown" />
+                            </IconWrapper>
+                            <Text>{nft.name}</Text>
+                            <Badge>{nftItemsCount}</Badge>
+                        </Row>
+                    </CollectionToggle>
+                </Table.Cell>
+                <Table.Cell colSpan={4} />
+                <Table.Cell colSpan={1} align="right">
+                    <Row gap={spacings.xs}>
+                        <Dropdown
+                            alignMenu="bottom-right"
+                            items={
+                                [
+                                    {
+                                        key: 'export',
+                                        options: [
+                                            {
+                                                label: <Translation id="TR_HIDE_COLLECTION" />,
+                                                icon: 'hide',
+                                                onClick: () =>
+                                                    dispatch(
+                                                        tokenDefinitionsActions.setTokenStatus({
+                                                            symbol: network.symbol,
+                                                            contractAddress: nft.contract || '',
+                                                            status: TokenManagementAction.HIDE,
+                                                            type: DefinitionType.NFT,
+                                                        }),
+                                                    ),
+                                                isHidden: isShown === false,
+                                            },
+                                            {
+                                                label: <Translation id="TR_VIEW_ALL_TRANSACTION" />,
+                                                icon: 'newspaper',
+                                                onClick: () => {
+                                                    dispatch({
+                                                        type: SUITE.SET_TRANSACTION_HISTORY_PREFILL,
+                                                        payload: nft.contract || '',
+                                                    });
+                                                    if (account) {
+                                                        dispatch(
+                                                            goto('wallet-index', {
+                                                                params: {
+                                                                    symbol: account.symbol,
+                                                                    accountIndex: account.index,
+                                                                    accountType:
+                                                                        account.accountType,
+                                                                },
+                                                            }),
+                                                        );
+                                                    }
+                                                },
+                                            },
+                                            {
+                                                label: <Translation id="TR_VIEW_IN_EXPLORER" />,
+                                                icon: 'arrowUpRight',
+                                                onClick: () => {
+                                                    window.open(
+                                                        getNftContractExplorerUrl(network, nft),
+                                                        '_blank',
+                                                    );
+                                                },
+                                            },
+                                        ],
+                                    },
+                                    {
+                                        key: 'contract-address',
+                                        label: <Translation id="TR_CONTRACT_ADDRESS" />,
+                                        options: [
+                                            {
+                                                label: (
+                                                    <Row gap={spacings.xxs}>
+                                                        {nft.contract}
+                                                        <Icon name="copy" size={14} />
+                                                    </Row>
+                                                ),
+                                                onClick: () =>
+                                                    onCopyAddressWithModal(
+                                                        nft.contract || '',
+                                                        'contract',
+                                                        shouldShowCopyAddressModal,
+                                                    ),
+                                            },
+                                        ],
+                                    },
+                                ].filter(category => category) as GroupedMenuItems[]
+                            }
+                        />
+                        {!isShown && (
+                            <Button
+                                icon="show"
+                                onClick={() => {
+                                    dispatch(
+                                        tokenDefinitionsActions.setTokenStatus({
+                                            symbol: network.symbol,
+                                            contractAddress: nft.contract || '',
+                                            status: TokenManagementAction.SHOW,
+                                            type: DefinitionType.NFT,
+                                        }),
+                                    );
+                                }}
+                                variant="tertiary"
+                                size="small"
+                            >
+                                <Translation id="TR_UNHIDE" />
+                            </Button>
+                        )}
+                    </Row>
+                </Table.Cell>
+            </Table.Row>
+            {nft.type === 'ERC721' && (
+                <>
+                    {nft.ids?.map((id, index) => (
+                        <Table.Row
+                            key={id}
+                            isCollapsed={!isCollectionOpen}
+                            isHighlightedOnHover={false}
+                        >
+                            <Table.Cell></Table.Cell>
+                            <Table.Cell align="right">
+                                <Column alignItems="flex-end">
+                                    <HiddenPlaceholder>
+                                        <RedactNumericalValue value="1" />
+                                    </HiddenPlaceholder>
+                                </Column>
+                            </Table.Cell>
+                            <Table.Cell align="right" colSpan={2}>
+                                <Column alignItems="flex-end">
+                                    <HiddenPlaceholder key={nft.contract + index}>
+                                        <TrezorLink
+                                            href={getNftExplorerUrl(network, nft, id.toString())}
+                                            target="_blank"
+                                            variant="underline"
+                                        >
+                                            <RedactNumericalValue value={id.toString()} />
+                                        </TrezorLink>
+                                    </HiddenPlaceholder>
+                                </Column>
+                            </Table.Cell>
+                        </Table.Row>
+                    ))}
+                </>
+            )}
+            {nft.type === 'ERC1155' && (
+                <>
+                    {nft.multiTokenValues?.map((value, index) => (
+                        <Table.Row
+                            key={nft.contract + index}
+                            isCollapsed={!isCollectionOpen}
+                            isHighlightedOnHover={false}
+                        >
+                            <Table.Cell></Table.Cell>
+                            <Table.Cell align="right">
+                                <Column alignItems="flex-end">
+                                    <Row key={nft.contract + index}>
+                                        <HiddenPlaceholder>
+                                            <RedactNumericalValue
+                                                value={value.value?.toString() || ''}
+                                            />
+                                        </HiddenPlaceholder>
+                                    </Row>
+                                </Column>
+                            </Table.Cell>
+                            <Table.Cell align="right" colSpan={2}>
+                                <Column alignItems="flex-end">
+                                    <Row key={nft.contract + index}>
+                                        <HiddenPlaceholder>
+                                            <TrezorLink
+                                                href={getNftExplorerUrl(
+                                                    network,
+                                                    nft,
+                                                    value?.id?.toString(),
+                                                )}
+                                                target="_blank"
+                                                variant="underline"
+                                            >
+                                                <RedactNumericalValue
+                                                    value={value.id?.toString() || ''}
+                                                />
+                                            </TrezorLink>
+                                        </HiddenPlaceholder>
+                                    </Row>
+                                </Column>
+                            </Table.Cell>
+                        </Table.Row>
+                    ))}
+                </>
+            )}
+        </>
+    );
+};
+
+export default NftsRow;
diff --git a/packages/suite/src/views/wallet/nfts/NftsTable/NftsTable.tsx b/packages/suite/src/views/wallet/nfts/NftsTable/NftsTable.tsx
new file mode 100644
index 00000000000..ec1f68e2f9f
--- /dev/null
+++ b/packages/suite/src/views/wallet/nfts/NftsTable/NftsTable.tsx
@@ -0,0 +1,76 @@
+import { SelectedAccountLoaded } from '@suite-common/wallet-types';
+import { Card, Column, Table } from '@trezor/components';
+import { getNetwork } from '@suite-common/wallet-config';
+import { spacings } from '@trezor/theme';
+
+import { GetTokensOutputType } from 'src/utils/wallet/tokenUtils';
+import { Translation } from 'src/components/suite/Translation';
+
+import NftsRow from './NftsRow';
+
+type NftsTableProps = {
+    selectedAccount: SelectedAccountLoaded;
+    isShown?: boolean;
+    verified?: boolean;
+    nfts: GetTokensOutputType;
+};
+
+const NftsTable = ({ selectedAccount, isShown, verified, nfts }: NftsTableProps) => {
+    const { account } = selectedAccount;
+    const network = getNetwork(account.symbol);
+
+    const getNftsToShow = () => {
+        if (isShown) {
+            return [...nfts.shownWithBalance, ...nfts.shownWithoutBalance];
+        }
+
+        return verified
+            ? [...nfts.hiddenWithBalance, ...nfts.hiddenWithoutBalance]
+            : [...nfts.unverifiedWithBalance, ...nfts.unverifiedWithoutBalance];
+    };
+
+    const nftsToShow = getNftsToShow();
+
+    return nftsToShow.length > 0 ? (
+        <Column width="100%" alignItems="start" gap={12}>
+            <Card paddingType="none" overflow="hidden">
+                <Table
+                    margin={{ top: spacings.xs }}
+                    colWidths={[
+                        { minWidth: '200px', maxWidth: '250px' },
+                        { minWidth: '100px', maxWidth: '250px' },
+                        { minWidth: '100px', maxWidth: '250px' },
+                    ]}
+                    isRowHighlightedOnHover
+                >
+                    <Table.Header>
+                        <Table.Row>
+                            <Table.Cell colSpan={1}>
+                                <Translation id="TR_COLLECTION_NAME" />
+                            </Table.Cell>
+                            <Table.Cell align="right" colSpan={1}>
+                                <Translation id="TR_QUANTITY" />
+                            </Table.Cell>
+                            <Table.Cell align="right" colSpan={1}>
+                                <Translation id="TR_TOKEN_ID" />
+                            </Table.Cell>
+                        </Table.Row>
+                    </Table.Header>
+                    <Table.Body>
+                        {nftsToShow.map(nft => (
+                            <NftsRow
+                                nft={nft}
+                                key={nft.contract}
+                                network={network}
+                                isShown={isShown}
+                                selectedAccount={selectedAccount}
+                            />
+                        ))}
+                    </Table.Body>
+                </Table>
+            </Card>
+        </Column>
+    ) : null;
+};
+
+export default NftsTable;
diff --git a/packages/suite/src/views/wallet/nfts/NftsTablesSection.tsx b/packages/suite/src/views/wallet/nfts/NftsTablesSection.tsx
new file mode 100644
index 00000000000..2becbf74ceb
--- /dev/null
+++ b/packages/suite/src/views/wallet/nfts/NftsTablesSection.tsx
@@ -0,0 +1,94 @@
+import { Banner, H3, Column } from '@trezor/components';
+import { SelectedAccountLoaded } from '@suite-common/wallet-types';
+import { selectNftDefinitions } from '@suite-common/token-definitions';
+
+import { Translation } from 'src/components/suite';
+import { useSelector } from 'src/hooks/suite';
+import { getTokens } from 'src/utils/wallet/tokenUtils';
+
+import { NoTokens } from '../tokens/common/NoTokens';
+import NftsTable from './NftsTable/NftsTable';
+
+type EvmNftsTablesProps = {
+    selectedAccount: SelectedAccountLoaded;
+    searchQuery: string;
+    isShown: boolean;
+};
+
+export const NftsTablesSection = ({
+    selectedAccount,
+    searchQuery,
+    isShown = true,
+}: EvmNftsTablesProps) => {
+    const nftDefinitions = useSelector(state =>
+        selectNftDefinitions(state, selectedAccount.account.symbol),
+    );
+    const nfts = getTokens({
+        tokens: selectedAccount.account.tokens || [],
+        symbol: selectedAccount.account.symbol,
+        tokenDefinitions: nftDefinitions,
+        isNft: true,
+        searchQuery,
+    });
+
+    const areNoShownNfts = !nfts?.shownWithBalance.length && !nfts?.shownWithoutBalance.length;
+
+    const areNoHiddenNfts = !nfts?.hiddenWithBalance.length && !nfts?.hiddenWithoutBalance.length;
+
+    const areNoUnverifiedNfts =
+        !nfts?.unverifiedWithBalance.length && !nfts?.unverifiedWithoutBalance.length;
+
+    const hiddenEvmNfts = (
+        <Column gap={24} alignItems="stretch">
+            <NftsTable
+                selectedAccount={selectedAccount}
+                isShown={false}
+                verified={true}
+                nfts={nfts}
+            />
+            <H3>
+                <Translation id="TR_COLLECTIONS_UNRECOGNIZED_BY_TREZOR" />
+            </H3>
+            <Banner variant="warning" icon>
+                <Translation id="TR_NFT_UNRECOGNIZED_BY_TREZOR_TOOLTIP" />
+            </Banner>
+            <NftsTable
+                selectedAccount={selectedAccount}
+                isShown={false}
+                verified={false}
+                nfts={nfts}
+            />
+        </Column>
+    );
+
+    if (isShown) {
+        if (areNoShownNfts) {
+            return (
+                <NoTokens
+                    title={
+                        <Translation
+                            id={
+                                nfts?.hiddenWithBalance.length ||
+                                nfts?.hiddenWithoutBalance.length ||
+                                nfts?.unverifiedWithBalance.length ||
+                                nfts?.unverifiedWithoutBalance.length
+                                    ? 'TR_NFT_EMPTY_CHECK_HIDDEN'
+                                    : 'TR_NFT_EMPTY'
+                            }
+                        />
+                    }
+                />
+            );
+        }
+
+        return (
+            <NftsTable selectedAccount={selectedAccount} isShown={isShown} verified nfts={nfts} />
+        );
+    } else {
+        if (areNoHiddenNfts && areNoUnverifiedNfts) {
+            return <NoTokens title={<Translation id="TR_HIDDEN_NFT_EMPTY" />} />;
+        }
+
+        return hiddenEvmNfts;
+    }
+};
diff --git a/packages/suite/src/views/wallet/nfts/index.tsx b/packages/suite/src/views/wallet/nfts/index.tsx
new file mode 100644
index 00000000000..9ee8315edda
--- /dev/null
+++ b/packages/suite/src/views/wallet/nfts/index.tsx
@@ -0,0 +1,59 @@
+import { useState, useEffect } from 'react';
+import { Route, Switch } from 'react-router-dom';
+
+import { WalletLayout } from 'src/components/wallet';
+import { useDispatch, useSelector } from 'src/hooks/suite';
+import { goto } from 'src/actions/suite/routerActions';
+
+import { TokensNavigation } from '../tokens/TokensNavigation';
+import { NftsTablesSection } from './NftsTablesSection';
+
+export const Nfts = () => {
+    const [searchQuery, setSearchQuery] = useState('');
+
+    const { selectedAccount } = useSelector(state => state.wallet);
+
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        if (
+            selectedAccount.status === 'loaded' &&
+            !selectedAccount.network?.features.includes('nfts')
+        ) {
+            dispatch(goto('wallet-index', { preserveParams: true }));
+        }
+    }, [selectedAccount, dispatch]);
+
+    if (selectedAccount.status !== 'loaded') {
+        return <WalletLayout title="TR_NFT" account={selectedAccount} />;
+    }
+
+    return (
+        <WalletLayout title="TR_NFT" account={selectedAccount} isSubpage={false}>
+            <TokensNavigation
+                selectedAccount={selectedAccount}
+                searchQuery={searchQuery}
+                setSearchQuery={setSearchQuery}
+                isNft
+            />
+            <Switch>
+                <Route path={`${process.env.ASSET_PREFIX}/accounts/nfts/hidden`}>
+                    <NftsTablesSection
+                        selectedAccount={selectedAccount}
+                        searchQuery={searchQuery}
+                        isShown={false}
+                    />
+                </Route>
+                <Route path="*">
+                    <NftsTablesSection
+                        selectedAccount={selectedAccount}
+                        searchQuery={searchQuery}
+                        isShown
+                    />
+                </Route>
+            </Switch>
+        </WalletLayout>
+    );
+};
+
+export default Nfts;