EVM NFT section

packages/suite-desktop-ui/src/support/Router.tsx

@@ -33,6 +33,7 @@ import { SettingsCoins } from 'src/views/settings/SettingsCoins/SettingsCoins';
 import { SettingsDebug } from 'src/views/settings/SettingsDebug/SettingsDebug';
 import { SettingsDevice } from 'src/views/settings/SettingsDevice/SettingsDevice';
 import { Tokens } from 'src/views/wallet/tokens';
+import { Nfts } from 'src/views/wallet/nfts';
 import PasswordManager from 'src/views/password-manager';
 
 const components: { [key: string]: ComponentType<any> } = {
@@ -47,6 +48,7 @@ const components: { [key: string]: ComponentType<any> } = {
     'wallet-sign-verify': WalletSignVerify,
     'wallet-anonymize': WalletAnonymize,
     'wallet-tokens': Tokens,
+    'wallet-nfts': Nfts,
     'wallet-coinmarket-buy': CoinmarketBuyForm,
     'wallet-coinmarket-buy-detail': CoinmarketBuyDetail,
     'wallet-coinmarket-buy-offers': CoinmarketBuyOffers,

packages/suite-web/src/support/Router.tsx

@@ -31,6 +31,7 @@ const components: Record<PageName, LazyExoticComponent<ComponentType<any>>> = {
         () => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/details'),
     ),
     'wallet-tokens': lazy(() => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/tokens')),
+    'wallet-nfts': lazy(() => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/nfts')),
     'wallet-send': lazy(() => import(/* webpackChunkName: "wallet" */ 'src/views/wallet/send')),
     'wallet-staking': lazy(() =>
         import(/* webpackChunkName: "wallet" */ 'src/views/wallet/staking/WalletStaking').then(

packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountNavigation.tsx

@@ -14,6 +14,8 @@ export const ACCOUNT_TABS = [
     'wallet-index',
     'wallet-details',
     'wallet-tokens',
+    'wallet-nfts',
+    'wallet-nfts-hidden',
     'wallet-tokens-hidden',
     'wallet-staking',
 ];
@@ -57,6 +59,16 @@ export const AccountNavigation = () => {
             activeRoutes: ['wallet-tokens', 'wallet-tokens-hidden'],
             'data-testid': '@wallet/menu/wallet-tokens',
         },
+        {
+            id: 'wallet-nfts',
+            callback: () => {
+                goToWithAnalytics('wallet-nfts', { preserveParams: true });
+            },
+            title: <Translation id="TR_NAV_NFTS" />,
+            isHidden: !hasNetworkFeatures(account, 'nfts'),
+            activeRoutes: ['wallet-nfts', 'wallet-nfts-hidden'],
+            'data-testid': '@wallet/menu/wallet-nfts',
+        },
         {
             id: 'wallet-staking',
             callback: () => {

packages/suite/src/views/wallet/tokens/TokensNavigation.tsx

@@ -1,46 +1,85 @@
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 
 import { SelectedAccountLoaded } from '@suite-common/wallet-types';
-import { selectCoinDefinitions } from '@suite-common/token-definitions';
-import { IconButton, Row, SubTabs } from '@trezor/components';
+import { selectCoinDefinitions, selectNftDefinitions } from '@suite-common/token-definitions';
+import { IconButton, IconName, Row, SubTabs } from '@trezor/components';
 import { EventType, analytics } from '@trezor/suite-analytics';
 import { Route } from '@suite-common/suite-types';
 
 import { useDispatch, useSelector } from 'src/hooks/suite';
-import { getTokens } from 'src/utils/wallet/tokenUtils';
+import { getTokens, GetTokensOutputType } from 'src/utils/wallet/tokenUtils';
 import { selectIsDebugModeActive } from 'src/reducers/suite/suiteReducer';
 import { selectRouteName } from 'src/reducers/suite/routerReducer';
 import { SearchAction } from 'src/components/wallet/SearchAction';
 import { openModal } from 'src/actions/suite/modalActions';
 import { Translation } from 'src/components/suite';
 import { goto } from 'src/actions/suite/routerActions';
 
+import { TranslationKey } from '../../../components/suite/Translation';
+
+type SubTabConfig = {
+    isNft: boolean;
+    tokens: GetTokensOutputType;
+    goToRoute: (route: Route['name']) => () => void;
+};
+
+type SubTabItem = {
+    id: string;
+    iconName: IconName;
+    onClick: () => void;
+    count: number;
+    labelId: TranslationKey;
+};
+
+const getSubTabConfig = ({ isNft, tokens, goToRoute }: SubTabConfig) =>
+    [
+        {
+            id: isNft ? 'wallet-nfts' : 'wallet-tokens',
+            iconName: isNft ? 'pictureFrame' : 'tokens',
+            onClick: goToRoute(isNft ? 'wallet-nfts' : 'wallet-tokens'),
+            count: tokens.shownWithBalance.length,
+            labelId: isNft ? 'TR_NAV_COLLECTIONS' : 'TR_NAV_TOKENS',
+        },
+        {
+            id: isNft ? 'wallet-nfts-hidden' : 'wallet-tokens-hidden',
+            iconName: 'hide',
+            onClick: goToRoute(isNft ? 'wallet-nfts-hidden' : 'wallet-tokens-hidden'),
+            count: tokens.hiddenWithBalance.length,
+            labelId: 'TR_HIDDEN',
+        },
+    ] satisfies SubTabItem[];
+
 interface TokensNavigationProps {
     selectedAccount: SelectedAccountLoaded;
     searchQuery: string;
     setSearchQuery: Dispatch<SetStateAction<string>>;
+    isNft?: boolean;
 }
 
 export const TokensNavigation = ({
     selectedAccount,
     searchQuery,
     setSearchQuery,
+    isNft = false,
 }: TokensNavigationProps) => {
     const { account } = selectedAccount;
     const [isExpanded, setExpanded] = useState(false);
     const routeName = useSelector(selectRouteName);
-    const coinDefinitions = useSelector(state =>
-        selectCoinDefinitions(state, selectedAccount.account.symbol),
+    const tokenDefinitions = useSelector(state =>
+        isNft
+            ? selectNftDefinitions(state, selectedAccount.account.symbol)
+            : selectCoinDefinitions(state, selectedAccount.account.symbol),
     );
     const isDebug = useSelector(selectIsDebugModeActive);
     const dispatch = useDispatch();
 
-    const tokens = getTokens(
-        selectedAccount.account.tokens || [],
-        selectedAccount.account.symbol,
-        coinDefinitions,
-    );
-    const showAddToken = ['ethereum'].includes(account.networkType) && isDebug;
+    const tokens = getTokens({
+        tokens: selectedAccount.account.tokens || [],
+        symbol: selectedAccount.account.symbol,
+        tokenDefinitions,
+        isNft,
+    });
+    const showAddToken = ['ethereum'].includes(account.networkType) && isDebug && !isNft;
 
     const handleAddToken = () => {
         if (account.symbol) {
@@ -64,22 +103,17 @@ export const TokensNavigation = ({
     return (
         <Row alignItems="center" justifyContent="space-between">
             <SubTabs activeItemId={routeName} size="medium">
-                <SubTabs.Item
-                    id="wallet-tokens"
-                    iconName="tokens"
-                    onClick={goToRoute('wallet-tokens')}
-                    count={tokens.shownWithBalance.length}
-                >
-                    <Translation id="TR_NAV_TOKENS" />
-                </SubTabs.Item>
-                <SubTabs.Item
-                    id="wallet-tokens-hidden"
-                    iconName="hide"
-                    onClick={goToRoute('wallet-tokens-hidden')}
-                    count={tokens.hiddenWithBalance.length}
-                >
-                    <Translation id="TR_HIDDEN" />
-                </SubTabs.Item>
+                {getSubTabConfig({ isNft, tokens, goToRoute }).map(tab => (
+                    <SubTabs.Item
+                        key={tab.id}
+                        id={tab.id}
+                        iconName={tab.iconName}
+                        onClick={tab.onClick}
+                        count={tab.count}
+                    >
+                        <Translation id={tab.labelId} />
+                    </SubTabs.Item>
+                ))}
             </SubTabs>
             <Row>
                 <SearchAction

suite-common/suite-config/src/routes.ts

@@ -276,6 +276,20 @@ export const routes = [
         params: walletParams,
         isNestedRoute: true,
     },
+    {
+        name: 'wallet-nfts',
+        pattern: '/accounts/nfts',
+        app: 'wallet',
+        params: walletParams,
+    },
+    {
+        name: 'wallet-nfts-hidden',
+        pattern: '/accounts/nfts/hidden',
+        app: 'wallet',
+        params: walletParams,
+        isNestedRoute: true,
+    },
+
     {
         name: 'wallet-anonymize',
         pattern: '/accounts/anonymize',

suite-common/wallet-config/src/networksConfig.ts

@@ -93,6 +93,7 @@ export const networks = {
             'rbf',
             'sign-verify',
             'tokens',
+            'nfts',
             'coin-definitions',
             'nft-definitions',
             'staking',
@@ -124,7 +125,7 @@ export const networks = {
         decimals: 18,
         testnet: false,
         explorer: getExplorerUrls('https://pol1.trezor.io', 'ethereum'),
-        features: ['rbf', 'sign-verify', 'tokens', 'coin-definitions', 'nft-definitions'],
+        features: ['rbf', 'sign-verify', 'tokens', 'nfts', 'coin-definitions', 'nft-definitions'],
         backendTypes: ['blockbook'],
         accountTypes: {
             ledger: {
@@ -146,7 +147,7 @@ export const networks = {
         decimals: 18,
         testnet: false,
         explorer: getExplorerUrls('https://bsc1.trezor.io', 'ethereum'),
-        features: ['rbf', 'sign-verify', 'tokens', 'coin-definitions', 'nft-definitions'],
+        features: ['rbf', 'sign-verify', 'tokens', 'nfts', 'coin-definitions', 'nft-definitions'],
         backendTypes: ['blockbook'],
         accountTypes: {
             ledger: {
@@ -168,7 +169,7 @@ export const networks = {
         decimals: 18,
         testnet: false,
         explorer: getExplorerUrls('https://basescan.org', 'ethereum'),
-        features: ['rbf', 'sign-verify', 'tokens', 'coin-definitions', 'nft-definitions'],
+        features: ['rbf', 'sign-verify', 'tokens', 'nfts', 'coin-definitions', 'nft-definitions'],
         backendTypes: ['blockbook'],
         accountTypes: {
             ledger: {
@@ -191,7 +192,7 @@ export const networks = {
         decimals: 18,
         testnet: false,
         explorer: getExplorerUrls('https://op1.trezor.io', 'ethereum'),
-        features: ['rbf', 'sign-verify', 'tokens', 'coin-definitions', 'nft-definitions'],
+        features: ['rbf', 'sign-verify', 'tokens', 'nfts', 'coin-definitions', 'nft-definitions'],
         backendTypes: ['blockbook'],
         accountTypes: {
             ledger: {
@@ -277,7 +278,7 @@ export const networks = {
         decimals: 18,
         testnet: false,
         explorer: getExplorerUrls('https://etc1.trezor.io', 'ethereum'),
-        features: ['sign-verify', 'tokens', 'coin-definitions'],
+        features: ['sign-verify', 'tokens', 'coin-definitions', 'nfts', 'nft-definitions'],
         backendTypes: ['blockbook'],
         accountTypes: {},
         coingeckoId: 'ethereum-classic',
@@ -530,7 +531,7 @@ export const networks = {
         decimals: 18,
         testnet: true,
         explorer: getExplorerUrls('https://sepolia1.trezor.io', 'ethereum'),
-        features: ['rbf', 'sign-verify', 'tokens'],
+        features: ['rbf', 'sign-verify', 'tokens', 'nfts', 'nft-definitions'],
         backendTypes: ['blockbook'],
         accountTypes: {},
         coingeckoId: undefined,
@@ -545,7 +546,7 @@ export const networks = {
         decimals: 18,
         testnet: true,
         explorer: getExplorerUrls('https://holesky1.trezor.io', 'ethereum'),
-        features: ['rbf', 'sign-verify', 'tokens', 'staking'],
+        features: ['rbf', 'sign-verify', 'tokens', 'nfts', 'nft-definitions'],
         backendTypes: ['blockbook'],
         accountTypes: {},
         coingeckoId: undefined,

suite-common/wallet-config/src/types.ts

@@ -55,6 +55,7 @@ export type BackendType = TrezorConnectBackendType | NonStandardBackendType;
 
 export type NetworkFeature =
     | 'rbf'
+    | 'nfts'
     | 'sign-verify'
     | 'amount-unit'
     | 'tokens'

suite-common/wallet-utils/src/__tests__/accountUtils.test.ts

@@ -238,6 +238,7 @@ describe('account utils', () => {
             'rbf',
             'sign-verify',
             'tokens',
+            'nfts',
             'coin-definitions',
             'nft-definitions',
             'staking',