From 19ec36adaf1c7685e87cb2b83e5a821872262f68 Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Thu, 20 Jul 2023 14:15:37 +0200
Subject: [PATCH 1/2] Refactor ContractVerificationIcon to ease adopting new
 data sources

---
 .../components/ContractVerificationIcon/index.tsx  | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/app/components/ContractVerificationIcon/index.tsx b/src/app/components/ContractVerificationIcon/index.tsx
index 7ad8afce7..8d006b577 100644
--- a/src/app/components/ContractVerificationIcon/index.tsx
+++ b/src/app/components/ContractVerificationIcon/index.tsx
@@ -50,7 +50,7 @@ const StyledBox = styled(Box, {
 })
 
 type ContractVerificationIconProps = {
-  account: RuntimeAccount | undefined
+  account: Pick<RuntimeAccount, 'address_eth' | 'evm_contract'> | undefined
   noLink?: boolean
 }
 
@@ -62,8 +62,6 @@ const Waiting: FC = () => (
 )
 
 export const ContractVerificationIcon: FC<ContractVerificationIconProps> = ({ account, noLink = false }) => {
-  const { t } = useTranslation()
-
   if (!account) {
     return <Waiting />
   }
@@ -71,6 +69,16 @@ export const ContractVerificationIcon: FC<ContractVerificationIconProps> = ({ ac
   const verified = !!account.evm_contract?.verification
   const address_eth = account.address_eth!
 
+  return <VerificationIcon address_eth={address_eth} verified={verified} noLink={noLink} />
+}
+
+export const VerificationIcon: FC<{ address_eth: string; verified: boolean; noLink?: boolean }> = ({
+  address_eth,
+  verified,
+  noLink = false,
+}) => {
+  const { t } = useTranslation()
+
   const status: VerificationStatus = verified ? 'verified' : 'unverified'
   const statusLabel: Record<VerificationStatus, string> = {
     verified: t('contract.verification.isVerified'),

From c2717d971f9a142a30be5dc92921354f14ca3af7 Mon Sep 17 00:00:00 2001
From: Kristof Csillag <kristof@oasisprotocol.org>
Date: Thu, 20 Jul 2023 14:21:25 +0200
Subject: [PATCH 2/2] 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                    |  1 +
 src/app/components/Tokens/TokenDetails.tsx    |  8 ++++++--
 src/app/components/Tokens/TokenList.tsx       | 20 +++++++++++++------
 .../TokenDashboardPage/TokenDetailsCard.tsx   |  8 ++++++--
 .../TokenDashboardPage/TokenTitleCard.tsx     | 20 +++++++++++++------
 5 files changed, 41 insertions(+), 16 deletions(-)
 create mode 100644 .changelog/760.internal.md

diff --git a/.changelog/760.internal.md b/.changelog/760.internal.md
new file mode 100644
index 000000000..fad11ced4
--- /dev/null
+++ b/.changelog/760.internal.md
@@ -0,0 +1 @@
+Improve performance when displaying token lists, using newly available data
diff --git a/src/app/components/Tokens/TokenDetails.tsx b/src/app/components/Tokens/TokenDetails.tsx
index f351a9564..2dea76db4 100644
--- a/src/app/components/Tokens/TokenDetails.tsx
+++ b/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>
diff --git a/src/app/components/Tokens/TokenList.tsx b/src/app/components/Tokens/TokenList.tsx
index 83db7d20e..e06a8be8c 100644
--- a/src/app/components/Tokens/TokenList.tsx
+++ b/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>
           ),
         },
diff --git a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx
index 3d5808959..8e76a3029 100644
--- a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx
+++ b/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>
diff --git a/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx b/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx
index 03fc254f4..1787ae2d7 100644
--- a/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx
+++ b/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>