Improve token lists

.changelog/638.feature.md

@@ -0,0 +1 @@
+Include contract verification info in token lists

src/app/components/Account/ContractCreatorInfo.tsx

@@ -2,10 +2,16 @@ import { FC } from 'react'
 import { SearchScope } from '../../../types/searchScope'
 import { Trans, useTranslation } from 'react-i18next'
 import { TransactionLink } from '../Transactions/TransactionLink'
-import { Layer, useGetRuntimeTransactionsTxHash } from '../../../oasis-nexus/api'
+import {
+  Layer,
+  Runtime,
+  useGetRuntimeAccountsAddress,
+  useGetRuntimeTransactionsTxHash,
+} from '../../../oasis-nexus/api'
 import { AppErrors } from '../../../types/errors'
 import { AccountLink } from './AccountLink'
 import Box from '@mui/material/Box'
+import Skeleton from '@mui/material/Skeleton'
 
 const TxSender: FC<{ scope: SearchScope; txHash: string }> = ({ scope, txHash }) => {
   const { t } = useTranslation()
@@ -15,37 +21,66 @@ const TxSender: FC<{ scope: SearchScope; txHash: string }> = ({ scope, txHash })
   const query = useGetRuntimeTransactionsTxHash(scope.network, scope.layer, txHash)
   const tx = query.data?.data.transactions[0]
   const senderAddress = tx?.sender_0_eth || tx?.sender_0
-  return senderAddress ? (
+
+  return query.isLoading ? (
+    <Skeleton
+      variant="text"
+      sx={{
+        width: '25%',
+      }}
+    />
+  ) : senderAddress ? (
     <AccountLink scope={scope} address={senderAddress} alwaysTrim />
   ) : (
     t('common.missing')
   )
 }
 
-export const ContractCreatorInfo: FC<{ scope: SearchScope; address: string | undefined }> = ({
-  scope,
-  address,
-}) => {
+export const ContractCreatorInfo: FC<{
+  scope: SearchScope
+  isLoading?: boolean
+  creationTxHash: string | undefined
+}> = ({ scope, isLoading, creationTxHash }) => {
   const { t } = useTranslation()
-  return address === undefined ? (
+
+  return isLoading ? (
+    <Skeleton variant="text" sx={{ width: '50%' }} />
+  ) : creationTxHash === undefined ? (
     t('common.missing')
   ) : (
     <Box
       sx={{
         display: 'flex',
         alignItems: 'center',
         gap: 3,
+        minWidth: '25%',
       }}
     >
-      <TxSender scope={scope} txHash={address} />
+      <TxSender scope={scope} txHash={creationTxHash} />
       &nbsp;
       <Trans
         t={t}
         i18nKey={'contract.createdAt'}
         components={{
-          TransactionLink: <TransactionLink scope={scope} hash={address} alwaysTrim />,
+          TransactionLink: <TransactionLink scope={scope} hash={creationTxHash} alwaysTrim />,
         }}
       />
     </Box>
   )
 }
+
+export const DelayedContractCreatorInfo: FC<{
+  scope: SearchScope
+  contractAddress: string | undefined
+}> = ({ scope, contractAddress }) => {
+  const accountQuery = useGetRuntimeAccountsAddress(scope.network, scope.layer as Runtime, contractAddress!)
+
+  const account = accountQuery.data?.data
+  const contract = account?.evm_contract
+
+  const creationTxHash = contract?.eth_creation_tx || contract?.creation_tx
+
+  return (
+    <ContractCreatorInfo scope={scope} isLoading={accountQuery.isLoading} creationTxHash={creationTxHash} />
+  )
+}

src/app/components/Account/index.tsx

@@ -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!}
-                />
+                <ContractVerificationIcon account={account} />
               </dd>
             </>
           )}
@@ -133,7 +130,7 @@ export const Account: FC<AccountProps> = ({ account, token, isLoading, tokenPric
               <dd>
                 <ContractCreatorInfo
                   scope={account}
-                  address={contract.eth_creation_tx || contract.creation_tx}
+                  creationTxHash={contract.eth_creation_tx || contract.creation_tx}
                 />
               </dd>
             </>

src/app/components/ContractVerificationIcon/index.tsx

@@ -7,6 +7,10 @@ import { styled } from '@mui/material/styles'
 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'
 
 type VerificationStatus = 'verified' | 'unverified'
 
@@ -25,14 +29,16 @@ const statusIcon: Record<VerificationStatus, ReactNode> = {
   unverified: <CancelIcon color="error" fontSize="small" />,
 }
 
+export const verificationIconBoxHeight = 28
+
 const StyledBox = styled(Box, {
   shouldForwardProp: prop => prop !== 'verified',
-})(({ verified }: ContractVerificationIconProps) => {
+})(({ verified }: { verified: boolean; address_eth: string }) => {
   const status: VerificationStatus = verified ? 'verified' : 'unverified'
   return {
     display: 'flex',
     justifyContent: 'center',
-    height: '28px',
+    height: verificationIconBoxHeight,
     fontSize: '12px',
     backgroundColor: statusBgColor[status],
     color: statusFgColor[status],
@@ -44,17 +50,27 @@ const StyledBox = styled(Box, {
 })
 
 type ContractVerificationIconProps = {
-  verified: boolean
-  address_eth: string
+  account: RuntimeAccount | undefined
   noLink?: boolean
 }
 
-export const ContractVerificationIcon: FC<ContractVerificationIconProps> = ({
-  verified,
-  address_eth,
-  noLink = false,
-}) => {
+const Waiting: FC = () => (
+  <Skeleton
+    variant="text"
+    sx={{ display: 'inline-block', width: '100%', height: verificationIconBoxHeight }}
+  />
+)
+
+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!
+
   const status: VerificationStatus = verified ? 'verified' : 'unverified'
   const statusLabel: Record<VerificationStatus, string> = {
     verified: t('contract.verification.isVerified'),
@@ -90,3 +106,17 @@ export const ContractVerificationIcon: FC<ContractVerificationIconProps> = ({
     </>
   )
 }
+
+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,9 @@ import { TokenLink } from './TokenLink'
 import { CopyToClipboard } from '../CopyToClipboard'
 import { AccountLink } from '../Account/AccountLink'
 import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
-import { LongDataDisplay } from '../LongDataDisplay'
+import { DelayedContractVerificationIcon } from '../ContractVerificationIcon'
+import Box from '@mui/material/Box'
+import { COLORS } from '../../../styles/theme/colors'
 
 export const TokenDetails: FC<{
   isLoading?: boolean
@@ -35,6 +37,7 @@ export const TokenDetails: FC<{
       <dt>{t('common.name')}</dt>
       <dd>
         <TokenLink scope={token} address={token.eth_contract_addr ?? token.contract_addr} name={token.name} />
+        <Box sx={{ ml: 3, fontWeight: 700, color: COLORS.grayMedium }}>({token.symbol})</Box>
       </dd>
 
       <dt>{t(isMobile ? 'common.smartContract_short' : 'common.smartContract')}</dt>
@@ -44,17 +47,20 @@ export const TokenDetails: FC<{
           <CopyToClipboard value={token.eth_contract_addr ?? token.contract_addr} />
         </span>
       </dd>
+      <dt>{t('contract.verification.title')}</dt>
+      <dd>
+        <DelayedContractVerificationIcon scope={token} contractOasisAddress={token.contract_addr} />
+      </dd>
 
       <dt>{t(isMobile ? 'tokens.holdersCount_short' : 'tokens.holdersCount')}</dt>
       <dd>{token.num_holders.toLocaleString()}</dd>
 
       <dt>{t('tokens.totalSupply')}</dt>
       <dd>
-        <LongDataDisplay data={token.total_supply || t('common.missing')} threshold={100} fontWeight={400} />
+        {token.total_supply
+          ? t('tokens.totalSupplyValue', { value: token.total_supply })
+          : t('common.missing')}
       </dd>
-
-      <dt>{t('common.ticker')}</dt>
-      <dd>{token.symbol}</dd>
     </StyledDescriptionList>
   )
 }

src/app/components/Tokens/TokenList.tsx

@@ -5,6 +5,8 @@ import { TablePaginationProps } from '../Table/TablePagination'
 import { AccountLink } from '../Account/AccountLink'
 import { TokenLink } from './TokenLink'
 import { CopyToClipboard } from '../CopyToClipboard'
+import { DelayedContractVerificationIcon } from '../ContractVerificationIcon'
+import Box from '@mui/material/Box'
 
 type TokensProps = {
   tokens?: EvmToken[]
@@ -20,6 +22,7 @@ export const TokenList = (props: TokensProps) => {
     { key: 'index', content: '' },
     { key: 'name', content: t('common.name') },
     { key: 'contract', content: t('common.smartContract') },
+    { key: 'verification', content: t('contract.verification.title') },
     {
       key: 'holders',
       content: t('tokens.holdersCount'),
@@ -60,6 +63,24 @@ export const TokenList = (props: TokensProps) => {
           ),
           key: 'contactAddress',
         },
+        {
+          key: 'verification',
+          content: (
+            <Box
+              sx={{
+                display: 'inline-flex',
+                verticalAlign: 'middle',
+                width: '100%',
+              }}
+            >
+              <DelayedContractVerificationIcon
+                scope={token}
+                contractOasisAddress={token.contract_addr}
+                noLink
+              />
+            </Box>
+          ),
+        },
         {
           content: token.num_holders.toLocaleString(),
           key: 'holdersCount',

src/app/pages/AccountDetailsPage/index.tsx

@@ -23,8 +23,8 @@ export const AccountDetailsPage: FC = () => {
 
   const scope = useRequiredScopeParam()
   const address = useLoaderData() as string
-  const { account, isLoading, isError } = useAccount(scope, address)
-  const { token } = useTokenInfo(scope, address)
+  const { account, isLoading: isAcccountLoading, isError } = useAccount(scope, address)
+  const { token, isLoading: isTokenLoading } = useTokenInfo(scope, address)
   const { totalCount: numberOfTokenTransfers } = useAccountTokenTransfers(scope, address)
 
   const tokenPriceInfo = useTokenPrice(account?.ticker || Ticker.ROSE)
@@ -40,6 +40,7 @@ export const AccountDetailsPage: FC = () => {
   const codeLink = useHref(`code#${contractCodeContainerId}`)
 
   const showDetails = showTxs || showErc20
+  const isLoading = isAcccountLoading || isTokenLoading
 
   return (
     <PageLayout>

src/app/pages/TokenDashboardPage/TokenDetailsCard.tsx

@@ -10,10 +10,10 @@ 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 { DelayedContractVerificationIcon } from '../../components/ContractVerificationIcon'
 import { getTokenTypeName } from './TokenTypeCard'
 import { getNameForTicker, Ticker } from '../../../types/ticker'
-import { ContractCreatorInfo } from '../../components/Account/ContractCreatorInfo'
+import { DelayedContractCreatorInfo } from '../../components/Account/ContractCreatorInfo'
 import CardContent from '@mui/material/CardContent'
 
 export const TokenDetailsCard: FC = () => {
@@ -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>
@@ -55,20 +53,17 @@ export const TokenDetailsCard: FC = () => {
 
             <dt>{t('contract.verification.title')}</dt>
             <dd>
-              <ContractVerificationIcon
-                verified={!!contract?.verification}
-                address_eth={account.address_eth!}
-              />
+              <DelayedContractVerificationIcon scope={token} contractOasisAddress={token.contract_addr} />
             </dd>
 
             <dt>{t('common.type')} </dt>
             <dd>{getTokenTypeName(t, token.type)} </dd>
 
             <dt>{t('contract.creator')}</dt>
             <dd>
-              <ContractCreatorInfo
-                scope={account}
-                address={contract.eth_creation_tx || contract.creation_tx}
+              <DelayedContractCreatorInfo
+                scope={token}
+                contractAddress={token.eth_contract_addr || token.contract_addr}
               />
             </dd>