Merge pull request #760 from oasisprotocol/csillag/optimize-token-list

Improve performance when displaying token lists, using newly available data
oasisprotocol · Aug 1, 2023 · f9ba715 · f9ba715
2 parents e000cc6 + c2717d9
commit f9ba715
Show file tree

Hide file tree

Showing 6 changed files with 52 additions and 19 deletions.
diff --git a/.changelog/760.internal.md b/.changelog/760.internal.md
@@ -0,0 +1 @@
+Improve performance when displaying token lists, using newly available data
diff --git 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,15 +62,23 @@ const Waiting: FC = () => (
 )
 
 export const ContractVerificationIcon: FC<ContractVerificationIconProps> = ({ account, noLink = false }) => {
-  const { t } = useTranslation()
-
   if (!account) {
     return <Waiting />
   }
 
   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'),

diff --git 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
@@ -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
@@ -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
@@ -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>
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Improve performance when displaying token lists, using newly available data