Fully bring back support for ERC-721 tokens

oasisprotocol · Jul 6, 2023 · 06302b6 · 06302b6
1 parent da99414
commit 06302b6
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 4 deletions.
diff --git a/src/app/components/Account/ShowMoreTokensLink.tsx b/src/app/components/Account/ShowMoreTokensLink.tsx
@@ -29,15 +29,27 @@ export const ShowMoreTokensLink: FC<ShowMoreTokensLinkProps> = ({ account, token
     EvmTokenType.ERC20,
     accountTokenContainerId,
   )
+  const erc721Link = RouteUtils.getAccountTokensRoute(
+    account,
+    account.address_eth ?? account.address,
+    EvmTokenType.ERC721,
+    accountTokenContainerId,
+  )
 
   const additionalTokensCounter = tokens.length - pills.length
 
   if (!additionalTokensCounter) {
     return null
   }
 
+  // link to ERC20 tab otherwise if there are only ERC721 tokens not included in pills link to the ERC721
+  const pillsSymbols = new Set(pills.map(({ token_contract_addr }) => token_contract_addr))
+  const showMoreItems = tokens.filter(({ token_contract_addr }) => !pillsSymbols.has(token_contract_addr))
+  const hasERC20 = showMoreItems.some(item => item.token_type === EvmTokenType.ERC20)
+  const targetShowMoreLink = hasERC20 ? erc20link : erc721Link
+
   return (
-    <StyledLink to={erc20link} color="inherit">
+    <StyledLink to={targetShowMoreLink} color="inherit">
       {t('account.showMore', { counter: additionalTokensCounter })}
     </StyledLink>
   )

diff --git a/src/app/components/Account/__tests__/ShowMoreTokensLink.test.tsx b/src/app/components/Account/__tests__/ShowMoreTokensLink.test.tsx
@@ -28,6 +28,15 @@ const mockedToken2: Token = {
   token_decimals: 18,
 }
 
+const mockedToken3: Token = {
+  balance: '0.012345',
+  token_contract_addr: 'oasis1qrg90d4qlelg5zg4q4sd4y0z8j2lpjpvuspzjly3',
+  token_name: 'ERC721',
+  token_symbol: 'ERC721',
+  token_type: EvmTokenType.ERC721,
+  token_decimals: 18,
+}
+
 const mockedToken4: Token = {
   balance: '1123.5',
   token_contract_addr: 'oasis1qrg90d4qlelg5zg4q4sd4y0z8j2lpjpvuspzjly4',
@@ -52,15 +61,31 @@ describe('ShowMoreTokensLink', () => {
     renderWithProviders(
       <ShowMoreTokensLink
         account={mockedAccount}
-        tokens={[mockedToken1, mockedToken2, mockedToken4]}
+        tokens={[mockedToken1, mockedToken2, mockedToken3, mockedToken4]}
         pills={[mockedToken1]}
       />,
     )
 
-    expect(screen.getByText('+ 2 more')).toBeInTheDocument()
+    expect(screen.getByText('+ 3 more')).toBeInTheDocument()
     expect(screen.getByRole('link')).toHaveAttribute(
       'href',
       '/mainnet/emerald/address/oasis1qrvha284gfztn7wwq6z50c86ceu28jp7csqhpx9t/tokens/erc-20#tokens',
     )
   })
+
+  it('should render ERC721 link if there is no ERC20 token', () => {
+    renderWithProviders(
+      <ShowMoreTokensLink
+        account={mockedAccount}
+        tokens={[mockedToken1, mockedToken2, mockedToken3]}
+        pills={[mockedToken1, mockedToken2]}
+      />,
+    )
+
+    expect(screen.getByText('+ 1 more')).toBeInTheDocument()
+    expect(screen.getByRole('link')).toHaveAttribute(
+      'href',
+      '/mainnet/emerald/address/oasis1qrvha284gfztn7wwq6z50c86ceu28jp7csqhpx9t/tokens/erc-721#tokens',
+    )
+  })
 })
diff --git a/src/app/pages/AccountDetailsPage/index.tsx b/src/app/pages/AccountDetailsPage/index.tsx
@@ -34,6 +34,8 @@ export const AccountDetailsPage: FC = () => {
   const tokenTransfersLink = useHref(`token-transfers#${accountTokenTransfersContainerId}`)
   const showErc20 = showEmptyAccountDetails || !!account?.tokenBalances[EvmTokenType.ERC20].length
   const erc20Link = useHref(`tokens/erc-20#${accountTokenContainerId}`)
+  const showErc721 = showEmptyAccountDetails || !!account?.tokenBalances[EvmTokenType.ERC721].length
+  const erc721Link = useHref(`tokens/erc-721#${accountTokenContainerId}`)
   const showTxs = showEmptyAccountDetails || showErc20 || !!account?.stats.num_txns
   const txLink = useHref('')
   const showCode = isContract
@@ -62,7 +64,8 @@ export const AccountDetailsPage: FC = () => {
           tabs={[
             { label: t('common.transactions'), to: txLink, visible: showTxs },
             { label: t('tokens.transfers'), to: tokenTransfersLink, visible: showTokenTransfers },
-            { label: t('common.tokens'), to: erc20Link, visible: showErc20 },
+            { label: t('account.ERC20'), to: erc20Link, visible: showErc20 },
+            { label: t('account.ERC721'), to: erc721Link, visible: showErc721 },
             { label: t('contract.code'), to: codeLink, visible: showCode },
           ]}
         />

diff --git a/src/routes.tsx b/src/routes.tsx
@@ -96,6 +96,11 @@ export const routes: RouteObject[] = [
                 element: <AccountTokensCard type="ERC20" />,
                 loader: addressParamLoader,
               },
+              {
+                path: 'tokens/erc-721',
+                element: <AccountTokensCard type="ERC721" />,
+                loader: addressParamLoader,
+              },
               {
                 path: 'code',
                 element: <ContractCodeCard />,