Refactor how we load and display contract verification info

Make it so that only the contract address is needed, and everything else is nicely wrapped in a component.
oasisprotocol · Jul 1, 2023 · a6381ef · a6381ef
1 parent 6fe0139
commit a6381ef
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 24 deletions.
diff --git a/src/app/components/Account/ContractVerificationInfo.tsx b/src/app/components/Account/ContractVerificationInfo.tsx
@@ -0,0 +1,36 @@
+import { ContractVerificationIcon } from '../ContractVerificationIcon'
+import { FC } from 'react'
+import { SearchScope } from '../../../types/searchScope'
+import { Runtime, RuntimeAccount, useGetRuntimeAccountsAddress } from '../../../oasis-nexus/api'
+import Skeleton from '@mui/material/Skeleton'
+
+const Waiting: FC = () => <Skeleton variant="text" sx={{ display: 'inline-block', width: '100%' }} />
+
+export const ContractVerificationInfo: FC<{
+  account?: RuntimeAccount
+  noLink?: boolean | undefined
+}> = ({ account, noLink }) => {
+  return account ? (
+    <ContractVerificationIcon
+      verified={!!account.evm_contract?.verification}
+      address_eth={account.address_eth!}
+      noLink={noLink}
+    />
+  ) : (
+    <Waiting />
+  )
+}
+
+export const DelayedContractVerificationInfo: FC<{
+  scope: SearchScope
+  contractOasisAddress: string
+  noLink?: boolean | undefined
+}> = ({ scope, contractOasisAddress, noLink }) => {
+  const accountQuery = useGetRuntimeAccountsAddress(
+    scope.network,
+    scope.layer as Runtime,
+    contractOasisAddress,
+  )
+
+  return <ContractVerificationInfo account={accountQuery.data?.data} noLink={noLink} />
+}
diff --git a/src/app/components/Account/index.tsx b/src/app/components/Account/index.tsx
@@ -20,7 +20,7 @@ import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
 import { getNameForTicker, Ticker } from '../../../types/ticker'
 import { TokenPriceInfo } from '../../../coin-gecko/api'
 import { ContractCreatorInfo } from './ContractCreatorInfo'
-import { ContractVerificationIcon } from '../ContractVerificationIcon'
+import { ContractVerificationInfo } from './ContractVerificationInfo'
 import { TokenLink } from '../Tokens/TokenLink'
 
 export const StyledAvatarContainer = styled('dt')(({ theme }) => ({
@@ -119,10 +119,7 @@ export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPric
             <>
               <dt>{t('contract.verification.title')}</dt>
               <dd>
-                <ContractVerificationIcon
-                  verified={!!account?.evm_contract?.verification}
-                  address_eth={account.address_eth!}
-                />
+                <ContractVerificationInfo account={account} />
               </dd>
             </>
           )}

diff --git a/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx b/src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx
@@ -10,7 +10,7 @@ import { useScreenSize } from '../../hooks/useScreensize'
 import { useTranslation } from 'react-i18next'
 import { AccountLink } from '../../components/Account/AccountLink'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
-import { ContractVerificationIcon } from '../../components/ContractVerificationIcon'
+import { DelayedContractVerificationInfo } from '../../components/Account/ContractVerificationInfo'
 import { getTokenTypeName } from './TokenTypeCard'
 import { getNameForTicker, Ticker } from '../../../types/ticker'
 import { DelayedContractCreatorInfo } from '../../components/Account/ContractCreatorInfo'
@@ -26,8 +26,6 @@ export const TokenDetailsCard: FC = () => {
   const { account, isLoading: accountIsLoading } = useAccount(scope, address)
   const isLoading = tokenIsLoading || accountIsLoading
 
-  const contract = account?.evm_contract
-
   const balance = account?.balances[0]?.balance
   const nativeToken = account?.ticker || Ticker.ROSE
   const tickerName = getNameForTicker(t, nativeToken)
@@ -36,7 +34,7 @@ export const TokenDetailsCard: FC = () => {
     <Card>
       <CardContent>
         {isLoading && <TextSkeleton numberOfRows={7} />}
-        {account && token && contract && (
+        {account && token && (
           <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'}>
             <dt>{t('common.token')}</dt>
             <dd>{token.name}</dd>
@@ -49,10 +47,7 @@ export const TokenDetailsCard: FC = () => {
 
             <dt>{t('contract.verification.title')}</dt>
             <dd>
-              <ContractVerificationIcon
-                verified={!!contract?.verification}
-                address_eth={account.address_eth!}
-              />
+              <DelayedContractVerificationInfo scope={token} contractOasisAddress={token.contract_addr} />
             </dd>
 
             <dt>{t('common.type')} </dt>

diff --git a/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx b/src/app/pages/TokenDashboardPage/TokenTitleCard.tsx
@@ -7,8 +7,7 @@ import Typography from '@mui/material/Typography'
 import { COLORS } from '../../../styles/theme/colors'
 import { useTokenInfo } from './hook'
 import Skeleton from '@mui/material/Skeleton'
-import { ContractVerificationIcon } from '../../components/ContractVerificationIcon'
-import { useAccount } from '../AccountDetailsPage/hook'
+import { DelayedContractVerificationInfo } from '../../components/Account/ContractVerificationInfo'
 import { AccountLink } from '../../components/Account/AccountLink'
 import Box from '@mui/material/Box'
 import { CopyToClipboard } from '../../components/CopyToClipboard'
@@ -20,13 +19,10 @@ export const TokenTitleCard: FC = () => {
   const address = useLoaderData() as string
 
   const { isLoading, token } = useTokenInfo(scope, address)
-  const { account } = useAccount(scope, address)
 
   const title = isLoading ? <TitleSkeleton /> : token?.name
   const subTitle = isLoading ? null : ` (${token?.symbol})` || null
 
-  const addressEth = account?.address_eth
-
   return (
     <Card>
       <CardContent>
@@ -62,21 +58,22 @@ export const TokenTitleCard: FC = () => {
               {subTitle}
             </Typography>
           </Box>
-          {addressEth && (
+
+          {token && (
             <Box
               sx={{
                 display: 'flex',
                 justifyContent: 'center',
                 alignItems: 'center',
               }}
             >
-              <ContractVerificationIcon
-                verified={!!account?.evm_contract?.verification}
-                address_eth={addressEth}
+              <DelayedContractVerificationInfo
+                scope={token}
+                contractOasisAddress={token.contract_addr}
                 noLink
               />
-              <AccountLink scope={account} address={addressEth} />
-              <CopyToClipboard value={account.address_eth || account.address} />
+              <AccountLink scope={token} address={token.eth_contract_addr || token.contract_addr} />
+              <CopyToClipboard value={token.eth_contract_addr || token.contract_addr} />
             </Box>
           )}
         </Box>