TokenDetails.tsx

import { FC } from 'react'
import { EvmToken } from '../../../oasis-nexus/api'
import { TextSkeleton } from '../Skeleton'
import { StyledDescriptionList } from '../StyledDescriptionList'
import { useScreenSize } from '../../hooks/useScreensize'
import { useTranslation } from 'react-i18next'
import { TokenLinkWithIcon } from './TokenLinkWithIcon'
import { CopyToClipboard } from '../CopyToClipboard'
import { AccountLink } from '../Account/AccountLink'
import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
import { VerificationIcon } from '../ContractVerificationIcon'
import { TokenTypeTag } from './TokenList'
import { RoundedBalance } from '../RoundedBalance'
import { HighlightedText } from '../HighlightedText'

export const TokenDetails: FC<{
  isLoading?: boolean
  token: EvmToken | undefined
  showLayer?: boolean
  standalone?: boolean
}> = ({ isLoading, token, showLayer, standalone = false }) => {
  const { t } = useTranslation()
  const { isMobile } = useScreenSize()

  if (isLoading) return <TextSkeleton numberOfRows={7} />
  if (!token) return null

  return (
    <StyledDescriptionList titleWidth={isMobile ? '100px' : '200px'} standalone={standalone}>
      {showLayer && (
        <>
          <dt>{t('common.paratime')}</dt>
          <dd>
            <DashboardLink scope={token} />
          </dd>
        </>
      )}
      <dt>{t('common.name')}</dt>
      <dd>
        <TokenLinkWithIcon
          scope={token}
          address={token.eth_contract_addr ?? token.contract_addr}
          name={token.name}
        />
        <div className="ml-2 font-bold text-muted-foreground whitespace-nowrap">
          <HighlightedText text={token.symbol} />
        </div>
      </dd>

      <dt>{t('common.type')}</dt>
      <dd>
        <TokenTypeTag tokenType={token.type} />
      </dd>

      <dt>{t(isMobile ? 'common.smartContract_short' : 'common.smartContract')}</dt>
      <dd>
        <div className="inline-flex items-center">
          <AccountLink
            showOnlyAddress
            scope={token}
            address={token.eth_contract_addr ?? token.contract_addr}
          />
          <CopyToClipboard value={token.eth_contract_addr ?? token.contract_addr} />
        </div>
      </dd>
      <dt>{t('contract.verification.title')}</dt>
      <dd>
        <VerificationIcon
          address_eth={token.eth_contract_addr}
          scope={token}
          verificationLevel={token.verification_level}
        />
      </dd>

      <dt>{t(isMobile ? 'tokens.holders' : 'tokens.holdersCount')}</dt>
      <dd>
        {typeof token.num_holders === 'number' ? token.num_holders.toLocaleString() : t('common.missing')}
      </dd>

      <dt>{t('tokens.totalSupply')}</dt>
      <dd>
        {token.total_supply ? (
          <RoundedBalance compactLargeNumbers value={token.total_supply} ticker={token?.symbol} />
        ) : (
          t('common.missing')
        )}
      </dd>
    </StyledDescriptionList>
  )
}