feat(suite): nft section

trezor · Dec 3, 2024 · deb7eaf · deb7eaf
1 parent b5489cf
commit deb7eaf
Show file tree

Hide file tree

Showing 24 changed files with 724 additions and 74 deletions.
diff --git a/packages/blockchain-link-types/src/common.ts b/packages/blockchain-link-types/src/common.ts
@@ -5,6 +5,7 @@ import type {
     AddressAlias,
     TokenTransfer as BlockbookTokenTransfer,
     ContractInfo,
+    MultiTokenValue,
     StakingPool,
 } from './blockbook-api';
 
@@ -55,6 +56,8 @@ export interface ServerInfo {
 
 export type TokenStandard = 'ERC20' | 'ERC1155' | 'ERC721' | 'SPL' | 'BEP20';
 
+export type EvmNftTokenStandard = Extract<TokenStandard, 'ERC1155' | 'ERC721'>;
+
 export type TransferType = 'sent' | 'recv' | 'self' | 'unknown';
 
 /* Transaction */
@@ -188,6 +191,10 @@ export interface TokenInfo {
     accounts?: TokenAccount[]; // token accounts for solana
     policyId?: string; // Cardano policy id
     fingerprint?: string; // Cardano starting with "asset"
+    multiTokenValues?: MultiTokenValue[];
+    ids?: string[];
+    totalReceived?: string;
+    totalSent?: string;
     // transfers: number, // total transactions?
 }
 

diff --git a/packages/suite-desktop-ui/src/support/Router.tsx b/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,

diff --git a/packages/suite-web/src/support/Router.tsx b/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(

diff --git a/packages/suite/src/components/wallet/TokenIconSetWrapper.tsx b/packages/suite/src/components/wallet/TokenIconSetWrapper.tsx
@@ -30,8 +30,11 @@ export const TokenIconSetWrapper = ({ accounts, symbol }: TokenIconSetWrapperPro
 
     if (!allTokensWithRates.length) return null;
 
-    const tokens = getTokens(allTokensWithRates, symbol, coinDefinitions)
-        .shownWithBalance as TokensWithRates[];
+    const tokens = getTokens({
+        tokens: allTokensWithRates,
+        symbol: symbol,
+        tokenDefinitions: coinDefinitions,
+    })?.shownWithBalance as TokensWithRates[];
 
     const aggregatedTokens = Object.values(
         tokens.reduce((acc: Record<string, TokensWithRates>, token) => {

diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountNavigation.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountTopPanel/AccountNavigation.tsx
@@ -13,6 +13,8 @@ export const ACCOUNT_TABS = [
     'wallet-index',
     'wallet-details',
     'wallet-tokens',
+    'wallet-nfts',
+    'wallet-nfts-hidden',
     'wallet-tokens-hidden',
     'wallet-staking',
 ];
@@ -54,6 +56,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, 'nft'),
+            activeRoutes: ['wallet-nfts', 'wallet-nfts-hidden'],
+            'data-testid': '@wallet/menu/wallet-nfts',
+        },
         {
             id: 'wallet-staking',
             callback: () => {

diff --git a/packages/suite/src/components/wallet/WalletLayout/AccountsMenu/AccountSection.tsx b/packages/suite/src/components/wallet/WalletLayout/AccountsMenu/AccountSection.tsx
@@ -39,18 +39,22 @@ export const AccountSection = ({
 
     const showGroup = ['ethereum', 'solana', 'cardano'].includes(networkType);
 
-    const tokens = getTokens(accountTokens, account.symbol, coinDefinitions);
+    const tokens = getTokens({
+        tokens: accountTokens,
+        symbol: account.symbol,
+        tokenDefinitions: coinDefinitions,
+    });
 
     const dataTestKey = `@account-menu/${symbol}/${accountType}/${index}`;
 
-    return showGroup && (isStakeShown || tokens.shownWithBalance.length) ? (
+    return showGroup && (isStakeShown || tokens?.shownWithBalance?.length) ? (
         <AccountItemsGroup
             key={`${descriptor}-${symbol}`}
             account={account}
             accountLabel={accountLabel}
             selected={selected}
             showStaking={isStakeShown}
-            tokens={tokens.shownWithBalance}
+            tokens={tokens?.shownWithBalance}
             dataTestKey={dataTestKey}
         />
     ) : (
@@ -62,7 +66,7 @@ export const AccountSection = ({
             onClick={onItemClick}
             accountLabel={accountLabel}
             formattedBalance={formattedBalance}
-            tokens={tokens.shownWithBalance}
+            tokens={tokens?.shownWithBalance}
             dataTestKey={dataTestKey}
         />
     );

diff --git 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,10 @@ export default defineMessages({
         defaultMessage: 'Tokens',
         id: 'TR_NAV_TOKENS',
     },
+    TR_NAV_NFTS: {
+        defaultMessage: 'NFT',
+        id: 'TR_NAV_NFTS',
+    },
     TR_NAV_SIGN_AND_VERIFY: {
         defaultMessage: 'Sign & verify',
         description:
@@ -5289,14 +5301,34 @@ 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.',

diff --git a/packages/suite/src/utils/wallet/tokenUtils.ts b/packages/suite/src/utils/wallet/tokenUtils.ts
@@ -1,14 +1,20 @@
 import { BigNumber } from '@trezor/utils/src/bigNumber';
 import { Account, Rate, TokenAddress, RatesByKey } from '@suite-common/wallet-types';
 import { TokenInfo } from '@trezor/connect';
-import { getFiatRateKey, isNftToken, isTokenMatchesSearch } from '@suite-common/wallet-utils';
+import {
+    getFiatRateKey,
+    isNftMatchesSearch,
+    isNftToken,
+    isTokenMatchesSearch,
+} from '@suite-common/wallet-utils';
 import { NetworkSymbol, getNetworkFeatures } from '@suite-common/wallet-config';
 import { FiatCurrencyCode } from '@suite-common/suite-config';
 import {
     EnhancedTokenInfo,
     TokenDefinition,
     isTokenDefinitionKnown,
 } from '@suite-common/token-definitions';
+import { Token } from '@trezor/blockchain-link-types/src/blockbook-api';
 
 export interface TokensWithRates extends TokenInfo {
     fiatValue: BigNumber;
@@ -65,16 +71,46 @@ export const formatTokenSymbol = (symbol: string) => {
     return isTokenSymbolLong ? `${upperCasedSymbol.slice(0, 7)}...` : upperCasedSymbol;
 };
 
-export const getTokens = (
-    tokens: EnhancedTokenInfo[] | TokenInfo[],
-    symbol: NetworkSymbol,
-    coinDefinitions?: TokenDefinition,
-    searchQuery?: string,
-) => {
+type GetTokens = {
+    tokens: EnhancedTokenInfo[] | TokenInfo[];
+    symbol: NetworkSymbol;
+    tokenDefinitions?: TokenDefinition;
+    searchQuery?: string;
+    isNft?: boolean;
+};
+
+export type TokensResult = {
+    shownWithBalance: EnhancedTokenInfo[];
+    shownWithoutBalance: EnhancedTokenInfo[];
+    hiddenWithBalance: EnhancedTokenInfo[];
+    hiddenWithoutBalance: EnhancedTokenInfo[];
+    unverifiedWithBalance: EnhancedTokenInfo[];
+    unverifiedWithoutBalance: EnhancedTokenInfo[];
+};
+
+// export type NftTokensResult = {
+//     shownVerified: EnhancedTokenInfo[];
+//     shownUnverified: EnhancedTokenInfo[];
+//     hiddenVerified: EnhancedTokenInfo[];
+//     hiddenUnverified: EnhancedTokenInfo[];
+// };
+
+export const getTokens = ({
+    tokens = [],
+    symbol,
+    tokenDefinitions,
+    searchQuery,
+    isNft = false,
+}: GetTokens): TokensResult => {
     // filter out NFT tokens until we implement them
-    const tokensWithoutNFTs = tokens.filter(token => !isNftToken(token));
 
-    const hasCoinDefinitions = getNetworkFeatures(symbol).includes('coin-definitions');
+    const filteredTokens = isNft
+        ? tokens.filter(token => isNftToken(token))
+        : tokens.filter(token => !isNftToken(token));
+
+    const hasDefinitions = getNetworkFeatures(symbol).includes(
+        isNft ? 'nft-definitions' : 'coin-definitions',
+    );
 
     const shownWithBalance: EnhancedTokenInfo[] = [];
     const shownWithoutBalance: EnhancedTokenInfo[] = [];
@@ -83,16 +119,23 @@ export const getTokens = (
     const unverifiedWithBalance: EnhancedTokenInfo[] = [];
     const unverifiedWithoutBalance: EnhancedTokenInfo[] = [];
 
-    tokensWithoutNFTs.forEach(token => {
-        const isKnown = isTokenDefinitionKnown(coinDefinitions?.data, symbol, token.contract);
-        const isHidden = coinDefinitions?.hide.includes(token.contract);
-        const isShown = coinDefinitions?.show.includes(token.contract);
+    filteredTokens.forEach(token => {
+        const isKnown = isTokenDefinitionKnown(tokenDefinitions?.data, symbol, token.contract);
+        const isHidden = tokenDefinitions?.hide.includes(token.contract);
+        const isShown = tokenDefinitions?.show.includes(token.contract);
 
         const query = searchQuery ? searchQuery.trim().toLowerCase() : '';
 
-        if (searchQuery && !isTokenMatchesSearch(token, query)) return;
+        if (
+            searchQuery &&
+            (!isTokenMatchesSearch(token, query) ||
+                (isNft && isNftMatchesSearch(token as Token, query)))
+        )
+            return;
 
-        const hasBalance = new BigNumber(token?.balance || '0').gt(0);
+        const hasBalance =
+            new BigNumber(token?.balance || '0').gt(0) ||
+            (isNft && (token?.multiTokenValues?.length || 0) > 0);
 
         const pushToArray = (
             arrayWithBalance: EnhancedTokenInfo[],
@@ -107,7 +150,7 @@ export const getTokens = (
 
         if (isShown) {
             pushToArray(shownWithBalance, shownWithoutBalance);
-        } else if (hasCoinDefinitions && !isKnown) {
+        } else if (hasDefinitions && !isKnown) {
             pushToArray(unverifiedWithBalance, unverifiedWithoutBalance);
         } else if (isHidden) {
             pushToArray(hiddenWithBalance, hiddenWithoutBalance);

diff --git a/packages/suite/src/views/dashboard/AssetsView/assetsViewUtils.ts b/packages/suite/src/views/dashboard/AssetsView/assetsViewUtils.ts
@@ -23,9 +23,13 @@ export const handleTokensAndStakingData = (
     const assetStakingBalance = accountsThatStaked.reduce((total, account) => {
         return total.plus(getAccountTotalStakingBalance(account));
     }, new BigNumber(0));
-    const tokens = getTokens(assetTokens ?? [], symbol, coinDefinitions);
+    const tokens = getTokens({
+        tokens: assetTokens ?? [],
+        symbol,
+        tokenDefinitions: coinDefinitions,
+    });
     const tokensWithRates = enhanceTokensWithRates(
-        tokens.shownWithBalance ?? [],
+        tokens?.shownWithBalance ?? [],
         localCurrency,
         symbol,
         currentFiatRates,

diff --git a/packages/suite/src/views/wallet/nfts/HiddenNfts.tsx b/packages/suite/src/views/wallet/nfts/HiddenNfts.tsx
@@ -0,0 +1,74 @@
+import { Banner, Column, H3 } 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 NftsTable from './NftsTable/NftsTable';
+import { NoTokens } from '../tokens/common/NoTokens';
+
+type NftsTableProps = {
+    selectedAccount: SelectedAccountLoaded;
+    searchQuery: string;
+};
+
+export const HiddenNfts = ({ selectedAccount, searchQuery }: NftsTableProps) => {
+    // const filteredTokens = filterNftTokens(selectedAccount.account.tokens || []);
+    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,
+    });
+
+    return nfts &&
+        (nfts.hiddenWithBalance.length > 0 ||
+            nfts.hiddenWithoutBalance.length > 0 ||
+            nfts.unverifiedWithBalance.length > 0 ||
+            nfts.unverifiedWithoutBalance.length > 0) ? (
+        <Column gap={24} alignItems="stretch">
+            <NftsTable
+                selectedAccount={selectedAccount}
+                type="ERC721"
+                isShown={false}
+                verified={true}
+                nfts={nfts}
+            />
+            <NftsTable
+                selectedAccount={selectedAccount}
+                type="ERC1155"
+                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}
+                type="ERC721"
+                isShown={false}
+                verified={false}
+                nfts={nfts}
+            />
+            <NftsTable
+                selectedAccount={selectedAccount}
+                type="ERC1155"
+                isShown={false}
+                verified={false}
+                nfts={nfts}
+            />
+        </Column>
+    ) : (
+        <NoTokens title={<Translation id="TR_TOKENS_EMPTY" />} />
+    );
+};