Merge pull request #542 from oasisprotocol/csillag/follow-api-changes

Follow indexer api changes

.changelog/542.breaking.md

@@ -0,0 +1 @@
+Remove explorer support for token types dropped by indexer, incl. ERC721

src/app/components/Account/ShowMoreTokensLink.tsx

@@ -29,26 +29,15 @@ 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={targetShowMoreLink} color="inherit">
+    <StyledLink to={erc20link} color="inherit">
       {t('account.showMore', { counter: additionalTokensCounter })}
     </StyledLink>
   )

src/app/components/Account/__tests__/ShowMoreTokensLink.test.tsx

@@ -28,15 +28,6 @@ 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',
@@ -61,31 +52,15 @@ describe('ShowMoreTokensLink', () => {
     renderWithProviders(
       <ShowMoreTokensLink
         account={mockedAccount}
-        tokens={[mockedToken1, mockedToken2, mockedToken3, mockedToken4]}
+        tokens={[mockedToken1, mockedToken2, mockedToken4]}
         pills={[mockedToken1]}
       />,
     )
 
-    expect(screen.getByText('+ 3 more')).toBeInTheDocument()
+    expect(screen.getByText('+ 2 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',
-    )
-  })
 })

src/app/pages/AccountDetailsPage/index.tsx

@@ -26,12 +26,10 @@ export const AccountDetailsPage: FC = () => {
 
   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 || showErc721 || !!account?.stats.num_txns
+  const showTxs = showEmptyAccountDetails || showErc20 || !!account?.stats.num_txns
   const txLink = useHref('')
 
-  const showDetails = showTxs || showErc20 || showErc721
+  const showDetails = showTxs || showErc20
 
   return (
     <PageLayout>
@@ -48,7 +46,6 @@ export const AccountDetailsPage: FC = () => {
           tabs={[
             { label: t('common.transactions'), to: txLink, visible: showTxs },
             { label: t('account.ERC20'), to: erc20Link, visible: showErc20 },
-            { label: t('account.ERC721'), to: erc721Link, visible: showErc721 },
           ]}
         />
       )}

src/app/utils/route-utils.ts

@@ -56,9 +56,6 @@ export abstract class RouteUtils {
   ) => {
     const map: Record<EvmTokenType, string | undefined> = {
       ERC20: `${this.getAccountRoute(scope, account)}/tokens/erc-20`,
-      ERC721: `${this.getAccountRoute(scope, account)}/tokens/erc-721`,
-      ERC1155: undefined,
-      OasisSdk: undefined,
     }
     const tokenRoutes = map[tokenType]
     if (!tokenRoutes) throw new Error('Unexpected token type')

src/locales/en/translation.json

@@ -4,7 +4,6 @@
     "emptyTokenList": "This account holds no {{token}} tokens.",
     "emptyTransactionList": "There are no transactions on record for this account.",
     "ERC20": "ERC-20",
-    "ERC721": "ERC-721",
     "noTokens": "This account holds no tokens",
     "showMore": "+ {{counter}} more",
     "title": "Account",

src/oasis-indexer/api.ts

@@ -69,10 +69,7 @@ function wrapWithNetwork<P extends Array<any>, Q>(f: (...args: P) => Q): (net: N
 
 export const groupAccountTokenBalances = (account: Omit<RuntimeAccount, 'tokenBalances'>): RuntimeAccount => {
   const tokenBalances: Record<generated.EvmTokenType, generated.RuntimeEvmBalance[]> = {
-    ERC1155: [],
     ERC20: [],
-    ERC721: [],
-    OasisSdk: [],
   }
   account.evm_balances.forEach(balance => {
     if (balance.token_type) tokenBalances[balance.token_type].push(balance)

src/routes.tsx

@@ -79,11 +79,6 @@ export const routes: RouteObject[] = [
                 element: <TokensCard type="ERC20" />,
                 loader: addressParamLoader,
               },
-              {
-                path: 'tokens/erc-721',
-                element: <TokensCard type="ERC721" />,
-                loader: addressParamLoader,
-              },
             ],
           },
           {
@@ -110,11 +105,6 @@ export const routes: RouteObject[] = [
                 element: <TokensCard type="ERC20" />,
                 loader: addressParamLoader,
               },
-              {
-                path: 'tokens/erc-721',
-                element: <TokensCard type="ERC721" />,
-                loader: addressParamLoader,
-              },
             ],
           },
         ],