Remove workarounds for old Nexus versions

Also, add support for handling tokens with missing type.

src/app/components/ContractVerificationIcon/index.tsx

@@ -8,9 +8,7 @@ import { COLORS } from '../../../styles/theme/colors'
 import Link from '@mui/material/Link'
 import Typography from '@mui/material/Typography'
 import Skeleton from '@mui/material/Skeleton'
-import { Runtime, RuntimeAccount } from '../../../oasis-nexus/api'
-import { SearchScope } from '../../../types/searchScope'
-import { useGetRuntimeAccountsAddress } from '../../../oasis-nexus/api'
+import { RuntimeAccount } from '../../../oasis-nexus/api'
 
 type VerificationStatus = 'verified' | 'unverified'
 
@@ -116,17 +114,3 @@ export const VerificationIcon: FC<{ address_eth: string; verified: boolean; noLi
     </>
   )
 }
-
-export const DelayedContractVerificationIcon: FC<{
-  scope: SearchScope
-  contractOasisAddress: string
-  noLink?: boolean | undefined
-}> = ({ scope, contractOasisAddress, noLink }) => {
-  const accountQuery = useGetRuntimeAccountsAddress(
-    scope.network,
-    scope.layer as Runtime,
-    contractOasisAddress,
-  )
-
-  return <ContractVerificationIcon account={accountQuery.data?.data} noLink={noLink} />
-}

src/app/components/Tokens/TokenDetails.tsx

@@ -8,7 +8,7 @@ import { TokenLink } from './TokenLink'
 import { CopyToClipboard } from '../CopyToClipboard'
 import { AccountLink } from '../Account/AccountLink'
 import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
-import { DelayedContractVerificationIcon, VerificationIcon } from '../ContractVerificationIcon'
+import { VerificationIcon } from '../ContractVerificationIcon'
 import Box from '@mui/material/Box'
 import { COLORS } from '../../../styles/theme/colors'
 import { TokenTypeTag } from './TokenList'
@@ -55,11 +55,7 @@ export const TokenDetails: FC<{
       </dd>
       <dt>{t('contract.verification.title')}</dt>
       <dd>
-        {token.is_verified === undefined ? ( // Workaround for old Nexus versions. TODO: remove when new version of Nexus has been deployed everywhere.
-          <DelayedContractVerificationIcon scope={token} contractOasisAddress={token.contract_addr} />
-        ) : (
-          <VerificationIcon address_eth={token.eth_contract_addr} verified={token.is_verified} />
-        )}
+        <VerificationIcon address_eth={token.eth_contract_addr} verified={token.is_verified} />
       </dd>
 
       <dt>{t(isMobile ? 'tokens.holdersCount_short' : 'tokens.holdersCount')}</dt>

src/app/components/Tokens/TokenList.tsx

@@ -5,11 +5,7 @@ import { TablePaginationProps } from '../Table/TablePagination'
 import { AccountLink } from '../Account/AccountLink'
 import { TokenLink } from './TokenLink'
 import { CopyToClipboard } from '../CopyToClipboard'
-import {
-  DelayedContractVerificationIcon,
-  VerificationIcon,
-  verificationIconBoxHeight,
-} from '../ContractVerificationIcon'
+import { VerificationIcon, verificationIconBoxHeight } from '../ContractVerificationIcon'
 import Box from '@mui/material/Box'
 import {
   getTokenTypeDescription,
@@ -30,13 +26,16 @@ type TokensProps = {
   pagination: false | TablePaginationProps
 }
 
-export const TokenTypeTag: FC<{ tokenType: EvmTokenType; sx?: SxProps }> = ({ tokenType, sx = {} }) => {
+export const TokenTypeTag: FC<{ tokenType: EvmTokenType | undefined; sx?: SxProps }> = ({
+  tokenType,
+  sx = {},
+}) => {
   const { t } = useTranslation()
   return (
     <Box
       sx={{
-        background: tokenBackgroundColor[tokenType],
-        border: `1px solid ${tokenBorderColor[tokenType]}`,
+        background: tokenBackgroundColor[tokenType ?? 'missing'],
+        border: `1px solid ${tokenBorderColor[tokenType ?? 'missing']}`,
         display: 'inline-block',
         borderRadius: 2,
         py: 1,
@@ -51,7 +50,7 @@ export const TokenTypeTag: FC<{ tokenType: EvmTokenType; sx?: SxProps }> = ({ to
       <Typography component="span">{getTokenTypeDescription(t, tokenType)}</Typography>
       &nbsp;
       <Typography component="span" color={COLORS.grayMedium}>
-        {t('common.parentheses', { subject: getTokenTypeStrictName(t, tokenType) })}
+        {t('common.parentheses', { subject: getTokenTypeStrictName(t, tokenType ?? 'missing') })}
       </Typography>
     </Box>
   )
@@ -120,15 +119,7 @@ export const TokenList = (props: TokensProps) => {
                 width: '100%',
               }}
             >
-              {token.is_verified === undefined ? ( // Workaround for old Nexus versions. TODO: remove when new version of Nexus has been deployed everywhere.
-                <DelayedContractVerificationIcon
-                  scope={token}
-                  contractOasisAddress={token.contract_addr}
-                  noLink
-                />
-              ) : (
-                <VerificationIcon address_eth={token.eth_contract_addr} verified={token.is_verified} noLink />
-              )}
+              <VerificationIcon address_eth={token.eth_contract_addr} verified={token.is_verified} noLink />
             </Box>
           ),
         },

src/app/components/Tokens/TokenTransfers.tsx

@@ -16,10 +16,8 @@ import { TokenTransferIcon } from './TokenTransferIcon'
 import { RoundedBalance } from '../RoundedBalance'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { fromBaseUnits, getEthAccountAddressFromBase64 } from '../../utils/helpers'
-import Skeleton from '@mui/material/Skeleton'
 import { TokenLink } from './TokenLink'
 import { PlaceholderLabel } from '../../utils/PlaceholderLabel'
-import { useTokenWithBase64Address } from './hooks'
 import { TokenTypeTag } from './TokenList'
 import { parseEvmEvent } from '../../utils/parseEvmEvent'
 
@@ -41,43 +39,6 @@ type TableRuntimeEvent = RuntimeEvent & {
   markAsNew?: boolean
 }
 
-/**
- * This is a wrapper around EventBalance which is able to load the referenced token for extra data
- */
-const DelayedEventBalance: FC<{
-  event: RuntimeEvent
-  tickerAsLink?: boolean | undefined
-}> = ({ event, tickerAsLink }) => {
-  const { t } = useTranslation()
-  const { isLoading, isError, token } = useTokenWithBase64Address(event, event.body.address)
-
-  if (isLoading) {
-    return <Skeleton variant="text" />
-  }
-  if (isError || !token) {
-    if (process.env.NODE_ENV !== 'production') {
-      console.log('Event:', JSON.stringify(event, null, '  '))
-      throw new Error("Can't identify token for this event! (See console.)")
-    }
-    return t('common.missing')
-  }
-
-  return (
-    <EventBalance
-      event={{
-        ...event,
-        evm_token: {
-          ...(event.evm_token ?? {}),
-          type: token.type,
-          decimals: token.decimals,
-          symbol: token.symbol,
-        },
-      }}
-      tickerAsLink={tickerAsLink}
-    />
-  )
-}
-
 /**
  * This is a wrapper around RoundedBalance which is able to display event balance properly, based on the token type
  */
@@ -130,19 +91,6 @@ export const EventBalance: FC<{
   }
 }
 
-const DelayedTokenTransferTokenType: FC<{ event: RuntimeEvent }> = ({ event }) => {
-  const { t } = useTranslation()
-  const { isLoading, isError, token } = useTokenWithBase64Address(event, event.body.address)
-
-  if (isLoading) {
-    return <Skeleton variant="text" />
-  }
-  if (isError || !token) {
-    return t('common.missing')
-  }
-  return <TokenTypeTag tokenType={token.type} />
-}
-
 type TokenTransfersProps = {
   transfers?: TableRuntimeEvent[]
   /**
@@ -262,23 +210,15 @@ export const TokenTransfers: FC<TokenTransfersProps> = ({
           ? [
               {
                 key: 'tokenType',
-                content: transfer.evm_token?.type ? (
-                  <TokenTypeTag tokenType={transfer.evm_token.type} />
-                ) : (
-                  <DelayedTokenTransferTokenType event={transfer} />
-                ),
+                content: <TokenTypeTag tokenType={transfer.evm_token!.type} />,
                 align: TableCellAlign.Center,
               },
             ]
           : []),
         {
           key: 'value',
           align: TableCellAlign.Right,
-          content: transfer.evm_token?.type ? (
-            <EventBalance event={transfer} tickerAsLink={differentTokens} />
-          ) : (
-            <DelayedEventBalance event={transfer} tickerAsLink={differentTokens} />
-          ),
+          content: <EventBalance event={transfer} tickerAsLink={differentTokens} />,
         },
       ],
       highlight: transfer.markAsNew,

src/app/pages/AccountDetailsPage/AccountTokensCard.tsx

@@ -21,7 +21,6 @@ import {
   getTokenTypeStrictName,
 } from '../../../types/tokens'
 import { SearchScope } from '../../../types/searchScope'
-import Skeleton from '@mui/material/Skeleton'
 import { AccountDetailsContext } from './index'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
 
@@ -31,19 +30,6 @@ type AccountTokensCardProps = AccountDetailsContext & {
 
 export const accountTokenContainerId = 'tokens'
 
-export const DelayedContractLink: FC<{ scope: SearchScope; oasisAddress: string }> = ({
-  scope,
-  oasisAddress,
-}) => {
-  const { isLoading, account: contract } = useAccount(scope, oasisAddress)
-
-  if (isLoading) {
-    return <Skeleton variant={'text'} />
-  }
-
-  return <ContractLink scope={scope} address={contract?.address_eth ?? oasisAddress} />
-}
-
 export const ContractLink: FC<{ scope: SearchScope; address: string }> = ({ scope, address }) => {
   return (
     <Box sx={{ display: 'flex', alignContent: 'center' }}>
@@ -85,14 +71,7 @@ export const AccountTokensCard: FC<AccountTokensCardProps> = ({ scope, address,
       {
         content: (
           <LinkableDiv id={item.token_contract_addr_eth ?? item.token_contract_addr}>
-            {item.token_contract_addr_eth === undefined ? ( // TODO remove temporal workaround when latest Nexus is deployed
-              <DelayedContractLink scope={scope} oasisAddress={item.token_contract_addr} />
-            ) : (
-              <ContractLink
-                scope={scope}
-                address={item.token_contract_addr_eth ?? item.token_contract_addr}
-              />
-            )}
+            <ContractLink scope={scope} address={item.token_contract_addr_eth ?? item.token_contract_addr} />
           </LinkableDiv>
         ),
         key: 'hash',

src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx

@@ -8,7 +8,7 @@ import { useScreenSize } from '../../hooks/useScreensize'
 import { useTranslation } from 'react-i18next'
 import { AccountLink } from '../../components/Account/AccountLink'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
-import { DelayedContractVerificationIcon, VerificationIcon } from '../../components/ContractVerificationIcon'
+import { VerificationIcon } from '../../components/ContractVerificationIcon'
 import { getNameForTicker, Ticker } from '../../../types/ticker'
 import { DelayedContractCreatorInfo } from '../../components/Account/ContractCreatorInfo'
 import CardContent from '@mui/material/CardContent'
@@ -51,11 +51,7 @@ export const TokenDetailsCard: FC<{ scope: SearchScope; address: string }> = ({
 
             <dt>{t('contract.verification.title')}</dt>
             <dd>
-              {token.is_verified === undefined ? ( // Workaround for old Nexus versions. TODO: remove when new version of Nexus has been deployed everywhere.
-                <DelayedContractVerificationIcon scope={token} contractOasisAddress={token.contract_addr} />
-              ) : (
-                <VerificationIcon address_eth={token.eth_contract_addr} verified={token.is_verified} />
-              )}
+              <VerificationIcon address_eth={token.eth_contract_addr} verified={token.is_verified} />
             </dd>
 
             <dt>{t('common.type')} </dt>

src/app/pages/TokenDashboardPage/TokenTitleCard.tsx

@@ -5,7 +5,7 @@ import Typography from '@mui/material/Typography'
 import { COLORS } from '../../../styles/theme/colors'
 import { useTokenInfo } from './hook'
 import Skeleton from '@mui/material/Skeleton'
-import { DelayedContractVerificationIcon, VerificationIcon } from '../../components/ContractVerificationIcon'
+import { VerificationIcon } from '../../components/ContractVerificationIcon'
 import { AccountLink } from '../../components/Account/AccountLink'
 import Box from '@mui/material/Box'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
@@ -67,19 +67,7 @@ export const TokenTitleCard: FC<{ scope: SearchScope; address: string }> = ({ sc
                   alignItems: 'center',
                 }}
               >
-                {token.is_verified === undefined ? ( // Workaround for old Nexus versions. TODO: remove when new version of Nexus has been deployed everywhere.
-                  <DelayedContractVerificationIcon
-                    scope={token}
-                    contractOasisAddress={token.contract_addr}
-                    noLink
-                  />
-                ) : (
-                  <VerificationIcon
-                    address_eth={token.eth_contract_addr}
-                    verified={token.is_verified}
-                    noLink
-                  />
-                )}
+                <VerificationIcon address_eth={token.eth_contract_addr} verified={token.is_verified} noLink />
                 <AccountLink scope={token} address={token.eth_contract_addr || token.contract_addr} />
                 <CopyToClipboard value={token.eth_contract_addr || token.contract_addr} />
               </Box>

src/routes.tsx

@@ -117,7 +117,7 @@ export const routes: RouteObject[] = [
             element: <TokensPage />,
           },
           {
-            path: `token/:address`, // This is a temporal workaround, until we have the required dedicated functionality for tokens
+            path: `token/:address`,
             element: <TokenDashboardPage />,
             loader: addressParamLoader,
             children: [

src/types/tokens.ts

@@ -3,24 +3,28 @@ import { TFunction } from 'i18next'
 import { exhaustedTypeWarning } from './errors'
 import { COLORS } from '../styles/theme/colors'
 
-export const getTokenTypeDescription = (t: TFunction, tokenType: EvmTokenType): string => {
-  switch (tokenType) {
+export const getTokenTypeDescription = (t: TFunction, tokenType: EvmTokenType | undefined): string => {
+  switch (tokenType ?? 'missing') {
+    case 'missing':
+      return t('common.missing')
     case 'ERC20':
       return t('common.token')
     case 'ERC721':
       return t('common.nft')
     default:
-      exhaustedTypeWarning('Unknown token type', tokenType)
+      exhaustedTypeWarning('Unknown token type', tokenType as any)
       return '???'
   }
 }
 
-export const tokenBackgroundColor: Record<EvmTokenType, string> = {
+export const tokenBackgroundColor: Record<EvmTokenType | 'missing', string> = {
+  missing: COLORS.errorIndicatorBackground,
   ERC20: COLORS.brandMedium15,
   ERC721: COLORS.pink15,
 }
 
-export const tokenBorderColor: Record<EvmTokenType, string> = {
+export const tokenBorderColor: Record<EvmTokenType | 'missing', string> = {
+  missing: COLORS.pink,
   ERC20: COLORS.brandMedium,
   ERC721: COLORS.pink,
 }
@@ -37,8 +41,10 @@ export const getTokenTypePluralDescription = (t: TFunction, tokenType: EvmTokenT
   }
 }
 
-export const getTokenTypeStrictName = (t: TFunction, tokenType: EvmTokenType): string => {
+export const getTokenTypeStrictName = (t: TFunction, tokenType: EvmTokenType | 'missing'): string => {
   switch (tokenType) {
+    case 'missing':
+      return t('common.missing')
     case 'ERC20':
       return t('account.ERC20')
     case 'ERC721':