Skip to content

Commit

Permalink
feat(suite): nfts tables
Browse files Browse the repository at this point in the history
  • Loading branch information
enjojoy committed Dec 4, 2024
1 parent 931ef9a commit f1df078
Show file tree
Hide file tree
Showing 7 changed files with 554 additions and 3 deletions.
7 changes: 7 additions & 0 deletions packages/blockchain-link-types/src/common.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import type {
AddressAlias,
TokenTransfer as BlockbookTokenTransfer,
ContractInfo,
MultiTokenValue,
StakingPool,
} from './blockbook-api';

Expand Down Expand Up @@ -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 */
Expand Down Expand Up @@ -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?
}

Expand Down
4 changes: 2 additions & 2 deletions packages/suite/src/components/suite/FormattedNftAmount.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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
Expand Down
47 changes: 46 additions & 1 deletion packages/suite/src/support/messages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
Expand Down Expand Up @@ -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:
Expand Down Expand Up @@ -3302,8 +3314,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: {
Expand Down Expand Up @@ -5289,18 +5306,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',
Expand Down Expand Up @@ -5390,6 +5431,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',
Expand Down
127 changes: 127 additions & 0 deletions packages/suite/src/views/wallet/nfts/EvmNftsTables.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,127 @@
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 EvmNftsTables = ({
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 shownEvmNfts = (
<Column gap={24}>
<NftsTable
selectedAccount={selectedAccount}
type="ERC721"
isShown={isShown}
verified
nfts={nfts}
/>
<NftsTable
selectedAccount={selectedAccount}
type="ERC1155"
isShown={isShown}
verified
nfts={nfts}
/>
</Column>
);

const hiddenEvmNfts = (
<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>
);

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 shownEvmNfts;
} else {
if (areNoHiddenNfts && areNoUnverifiedNfts) {
return <NoTokens title={<Translation id="TR_HIDDEN_NFT_EMPTY" />} />;
}

return hiddenEvmNfts;
}
};
Loading

0 comments on commit f1df078

Please sign in to comment.