Merge pull request #1909 from oasisprotocol/lw/token-icons-origins

Display token icons and origins from metadata

Author: lukaw3d

.changelog/1909.feature.md

@@ -0,0 +1 @@
+Display token icons and origins from metadata

src/app/components/Account/RuntimeAccountDetailsView.tsx

@@ -14,7 +14,7 @@ import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
 import { AllTokenPrices } from '../../../coin-gecko/api'
 import { ContractCreatorInfo } from './ContractCreatorInfo'
 import { VerificationIcon } from '../ContractVerificationIcon'
-import { TokenLink } from '../Tokens/TokenLink'
+import { TokenLinkWithIcon } from '../Tokens/TokenLinkWithIcon'
 import { AccountAvatar } from '../AccountAvatar'
 import { RuntimeBalanceDisplay } from '../Balance/RuntimeBalanceDisplay'
 import { calculateFiatValue } from '../Balance/hooks'
@@ -89,7 +89,7 @@ export const RuntimeAccountDetailsView: FC<RuntimeAccountDetailsViewProps> = ({
         <>
           <dt>{t('common.token')}</dt>
           <dd>
-            <TokenLink
+            <TokenLinkWithIcon
               scope={account}
               address={token.eth_contract_addr || token.contract_addr}
               name={token.name}

src/app/components/AccountAvatar/InitialsAvatar.tsx

@@ -0,0 +1,24 @@
+import { COLORS } from '../../../styles/theme/colors'
+
+function extractTwoChars(strRaw: string) {
+  const str = strRaw.trim().replace(/[^A-Za-z0-9 ]/g, '')
+  if (str.length < 2) return str || '  '
+  const first = str[0]
+  const rest = str.slice(1)
+  const lastDigitInSequence = rest.match(/\d+/)?.[0].at(-1)
+  const firstCharAfterSpace = rest.match(/\s+./)?.[0].at(-1)
+  const firstCapitalized = rest.match(/[A-Z]/)?.[0]
+  const second = lastDigitInSequence || firstCharAfterSpace || firstCapitalized || rest[0]
+  return first + second
+}
+
+export const InitialsAvatar = ({ name, size }: { name: string; size: number }) => {
+  return (
+    <svg width={size} height={size} viewBox="0 0 100 100">
+      <rect width="100" height="100" rx="50" fill={COLORS.brandDark} />
+      <text fontSize="40" x="50" y="50" dominantBaseline="central" textAnchor="middle" fill={COLORS.white}>
+        {extractTwoChars(name)}
+      </text>
+    </svg>
+  )
+}

src/app/components/Tokens/TokenDetails.tsx

@@ -4,7 +4,7 @@ import { TextSkeleton } from '../Skeleton'
 import { StyledDescriptionList } from '../StyledDescriptionList'
 import { useScreenSize } from '../../hooks/useScreensize'
 import { useTranslation } from 'react-i18next'
-import { TokenLink } from './TokenLink'
+import { TokenLinkWithIcon } from './TokenLinkWithIcon'
 import { CopyToClipboard } from '../CopyToClipboard'
 import { AccountLink } from '../Account/AccountLink'
 import { DashboardLink } from '../../pages/ParatimeDashboardPage/DashboardLink'
@@ -40,7 +40,7 @@ export const TokenDetails: FC<{
       )}
       <dt>{t('common.name')}</dt>
       <dd>
-        <TokenLink
+        <TokenLinkWithIcon
           scope={token}
           address={token.eth_contract_addr ?? token.contract_addr}
           name={token.name}

src/app/components/Tokens/TokenLinkWithIcon.tsx

@@ -0,0 +1,38 @@
+import { FC } from 'react'
+
+import { SearchScope } from '../../../types/searchScope'
+import { TokenLink } from './TokenLink'
+import { useAccountMetadata } from '../../hooks/useAccountMetadata'
+import Box from '@mui/material/Box'
+import { COLORS } from '../../../styles/theme/colors'
+import { InitialsAvatar } from '../AccountAvatar/InitialsAvatar'
+
+export const TokenLinkWithIcon: FC<{
+  scope: SearchScope
+  address: string
+  name: string | undefined
+  highlightedPart?: string | undefined
+}> = ({ scope, address, name, highlightedPart }) => {
+  const { metadata } = useAccountMetadata(scope, address)
+  return (
+    <Box sx={{ display: 'flex', alignItems: 'center', gap: 4 }}>
+      {metadata?.icon ? (
+        <img src={metadata.icon} alt="" width={28} />
+      ) : (
+        <InitialsAvatar name={metadata?.name || name || address.slice(2, 4)} size={28} />
+      )}
+
+      <span>
+        <TokenLink
+          scope={scope}
+          address={address}
+          name={metadata?.name || name}
+          highlightedPart={highlightedPart}
+        />
+        <Box component="span" sx={{ color: COLORS.grayMedium }}>
+          {metadata?.origin && ` (${metadata.origin})`}
+        </Box>
+      </span>
+    </Box>
+  )
+}

src/app/components/Tokens/TokenList.tsx

@@ -3,7 +3,7 @@ import { EvmToken, EvmTokenType } from '../../../oasis-nexus/api'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { TablePaginationProps } from '../Table/TablePagination'
 import { AccountLink } from '../Account/AccountLink'
-import { TokenLink } from './TokenLink'
+import { TokenLinkWithIcon } from './TokenLinkWithIcon'
 import { CopyToClipboard } from '../CopyToClipboard'
 import { VerificationIcon, verificationIconBoxHeight } from '../ContractVerificationIcon'
 import Box from '@mui/material/Box'
@@ -88,7 +88,7 @@ export const TokenList = (props: TokensProps) => {
         },
         {
           content: (
-            <TokenLink
+            <TokenLinkWithIcon
               scope={token}
               address={token.eth_contract_addr ?? token.contract_addr}
               name={token.name}

src/app/data/named-accounts.ts

@@ -7,7 +7,9 @@ export type AccountMetadata = {
   address: Address
   name?: string
   description?: string
-  source: AccountMetadataSource
+  icon?: string // Sanitized URL
+  origin?: string // Origin of this token/account
+  source: AccountMetadataSource // Origin of metadata. TODO: rename to e.g. metadata_source
 }
 
 export type AccountMetadataInfo = {

src/app/data/oasis-account-names.ts

@@ -19,6 +19,7 @@ import {
 import { hasTextMatch } from '../components/HighlightedText/text-matching'
 import * as externalLinks from '../utils/externalLinks'
 import { getOasisAddress } from '../utils/helpers'
+import { hasValidProtocol } from '../utils/url'
 
 const dataSources: Record<Network, Partial<Record<Layer, string>>> = {
   [Network.mainnet]: {
@@ -55,6 +56,8 @@ const getOasisAccountsMetadata = async (network: Network, layer: Layer): Promise
       address: getOasisAddress(entry.Address),
       name: entry.Name,
       description: entry.Description,
+      origin: entry.Origin,
+      icon: entry.Icon && hasValidProtocol(entry.Icon) ? entry.Icon : undefined,
     }
     // Register the metadata in its native form
     list.push(metadata)

src/app/pages/NFTInstanceDashboardPage/InstanceDetailsCard.tsx

@@ -11,7 +11,7 @@ import { VerificationIcon } from '../../components/ContractVerificationIcon'
 import CardContent from '@mui/material/CardContent'
 import { TokenTypeTag } from '../../components/Tokens/TokenList'
 import { SearchScope } from '../../../types/searchScope'
-import { TokenLink } from '../../components/Tokens/TokenLink'
+import { TokenLinkWithIcon } from '../../components/Tokens/TokenLinkWithIcon'
 import { EvmNft } from 'oasis-nexus/api'
 import Box from '@mui/material/Box'
 
@@ -66,7 +66,7 @@ export const InstanceDetailsCard: FC<InstanceDetailsCardProps> = ({
             <dd>{nft.id}</dd>
             <dt>{t('common.collection')} </dt>
             <dd>
-              <TokenLink scope={scope} address={contractAddress} name={token?.name} />
+              <TokenLinkWithIcon scope={scope} address={contractAddress} name={token?.name} />
             </dd>
             <dt>{t('common.type')} </dt>
             <dd>

src/app/pages/RuntimeAccountDetailsPage/AccountTokensCard.tsx

@@ -11,7 +11,7 @@ import { EvmTokenType, Layer } from '../../../oasis-nexus/api'
 import { AppErrors } from '../../../types/errors'
 import { LinkableCardLayout } from '../../components/LinkableCardLayout'
 import { LinkableDiv } from '../../components/PageLayout/LinkableDiv'
-import { TokenLink } from '../../components/Tokens/TokenLink'
+import { TokenLinkWithIcon } from '../../components/Tokens/TokenLinkWithIcon'
 import { AccountLink } from '../../components/Account/AccountLink'
 import {
   getTokenTypePluralDescription,
@@ -69,7 +69,7 @@ export const AccountTokensCard: FC<AccountTokensCardProps> = ({ scope, account,
     data: [
       {
         content: (
-          <TokenLink
+          <TokenLinkWithIcon
             scope={scope}
             address={item.token_contract_addr_eth ?? item.token_contract_addr}
             name={item.token_name || t('common.missing')}