When displaying token verification status, rely on data in token info

Don't send extra round-trips to ask data about
the underlying contract, since verification data is now mirrored
inside the token info.

.changelog/760.internal.md

@@ -0,0 +1 @@
+Improve performance when displaying token lists, using newly available data

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 } from '../ContractVerificationIcon'
+import { DelayedContractVerificationIcon, VerificationIcon } from '../ContractVerificationIcon'
 import Box from '@mui/material/Box'
 import { COLORS } from '../../../styles/theme/colors'
 import { TokenTypeTag } from './TokenList'
@@ -55,7 +55,11 @@ export const TokenDetails: FC<{
       </dd>
       <dt>{t('contract.verification.title')}</dt>
       <dd>
-        <DelayedContractVerificationIcon scope={token} contractOasisAddress={token.contract_addr} />
+        {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} />
+        )}
       </dd>
 
       <dt>{t(isMobile ? 'tokens.holdersCount_short' : 'tokens.holdersCount')}</dt>

src/app/components/Tokens/TokenList.tsx

@@ -5,7 +5,11 @@ import { TablePaginationProps } from '../Table/TablePagination'
 import { AccountLink } from '../Account/AccountLink'
 import { TokenLink } from './TokenLink'
 import { CopyToClipboard } from '../CopyToClipboard'
-import { DelayedContractVerificationIcon, verificationIconBoxHeight } from '../ContractVerificationIcon'
+import {
+  DelayedContractVerificationIcon,
+  VerificationIcon,
+  verificationIconBoxHeight,
+} from '../ContractVerificationIcon'
 import Box from '@mui/material/Box'
 import {
   getTokenTypeDescription,
@@ -116,11 +120,15 @@ export const TokenList = (props: TokensProps) => {
                 width: '100%',
               }}
             >
-              <DelayedContractVerificationIcon
-                scope={token}
-                contractOasisAddress={token.contract_addr}
-                noLink
-              />
+              {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 />
+              )}
             </Box>
           ),
         },

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 } from '../../components/ContractVerificationIcon'
+import { DelayedContractVerificationIcon, VerificationIcon } from '../../components/ContractVerificationIcon'
 import { getNameForTicker, Ticker } from '../../../types/ticker'
 import { DelayedContractCreatorInfo } from '../../components/Account/ContractCreatorInfo'
 import CardContent from '@mui/material/CardContent'
@@ -50,7 +50,11 @@ export const TokenDetailsCard: FC<{ scope: SearchScope; address: string }> = ({
 
             <dt>{t('contract.verification.title')}</dt>
             <dd>
-              <DelayedContractVerificationIcon scope={token} contractOasisAddress={token.contract_addr} />
+              {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} />
+              )}
             </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 } from '../../components/ContractVerificationIcon'
+import { DelayedContractVerificationIcon, VerificationIcon } from '../../components/ContractVerificationIcon'
 import { AccountLink } from '../../components/Account/AccountLink'
 import Box from '@mui/material/Box'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
@@ -67,11 +67,19 @@ export const TokenTitleCard: FC<{ scope: SearchScope; address: string }> = ({ sc
                   alignItems: 'center',
                 }}
               >
-                <DelayedContractVerificationIcon
-                  scope={token}
-                  contractOasisAddress={token.contract_addr}
-                  noLink
-                />
+                {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
+                  />
+                )}
                 <AccountLink scope={token} address={token.eth_contract_addr || token.contract_addr} />
                 <CopyToClipboard value={token.eth_contract_addr || token.contract_addr} />
               </Box>