Account Token Transfers: make tickers into links

So that we can easily look up the tokens involved

.changelog/687.2.feature.md

@@ -0,0 +1 @@
+Make tickers into links in account token transfers

src/app/components/Account/ContractCreatorInfo.tsx

@@ -60,7 +60,7 @@ export const ContractCreatorInfo: FC<{
       &nbsp;
       <Trans
         t={t}
-        i18nKey={'contract.createdAt'}
+        i18nKey="contract.createdAt"
         components={{
           TransactionLink: <TransactionLink scope={scope} hash={creationTxHash} alwaysTrim />,
         }}

src/app/components/RoundedBalance/index.tsx

@@ -1,18 +1,30 @@
 import { FC } from 'react'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import BigNumber from 'bignumber.js'
 import Tooltip from '@mui/material/Tooltip'
 import { tooltipDelay } from '../../../styles/theme'
 import { getNameForTicker } from '../../../types/ticker'
+import { SearchScope } from '../../../types/searchScope'
+import { TokenLink } from '../Tokens/TokenLink'
+import { PlaceholderLabel } from '../../utils/placeholderLabel'
 
 type RoundedBalanceProps = {
   ticker?: string
   value?: string
+  scope?: SearchScope
+  tokenAddress?: string
+  tickerAsLink?: boolean | undefined
 }
 
 const numberOfDecimals = 5
 
-export const RoundedBalance: FC<RoundedBalanceProps> = ({ ticker, value }) => {
+export const RoundedBalance: FC<RoundedBalanceProps> = ({
+  ticker,
+  value,
+  scope,
+  tokenAddress,
+  tickerAsLink,
+}) => {
   const { t } = useTranslation()
 
   if (!value) {
@@ -24,8 +36,20 @@ export const RoundedBalance: FC<RoundedBalanceProps> = ({ ticker, value }) => {
 
   const tickerName = ticker ? getNameForTicker(t, ticker) : ''
 
+  const tickerLink =
+    tickerAsLink && !!scope && !!tokenAddress ? (
+      <TokenLink scope={scope} address={tokenAddress} name={tickerName} />
+    ) : undefined
+
   if (number.isEqualTo(truncatedNumber)) {
-    return <span>{t('common.valueInToken', { value: number.toFixed(), ticker: tickerName })}</span>
+    return (
+      <Trans
+        t={t}
+        i18nKey="common.valueInTokenWithLink"
+        values={{ value: number.toFixed() }}
+        components={{ TickerLink: tickerLink ?? <PlaceholderLabel label={tickerName} /> }}
+      />
+    )
   }
 
   return (
@@ -37,14 +61,21 @@ export const RoundedBalance: FC<RoundedBalanceProps> = ({ ticker, value }) => {
         enterDelay={tooltipDelay}
         enterNextDelay={tooltipDelay}
       >
-        <span>
-          {!number.isZero() && truncatedNumber.isZero()
-            ? t('common.lessThanAmount', {
-                value: truncatedNumber.toFixed(numberOfDecimals),
-                ticker: tickerName,
-              })
-            : t('common.roundedValueInToken', { value: truncatedNumber.toFixed(), ticker: tickerName })}
-        </span>
+        {!number.isZero() && truncatedNumber.isZero() ? (
+          <Trans
+            t={t}
+            i18nKey="common.lessThanAmount"
+            values={{ value: truncatedNumber.toFixed(numberOfDecimals) }}
+            components={{ TickerLink: tickerLink ?? <PlaceholderLabel label={tickerName} /> }}
+          />
+        ) : (
+          <Trans
+            t={t}
+            i18nKey="common.roundedValueInToken"
+            values={{ value: truncatedNumber.toFixed() }}
+            components={{ TickerLink: tickerLink ?? <PlaceholderLabel label={tickerName} /> }}
+          />
+        )}
       </Tooltip>
     </span>
   )

src/app/components/Tokens/TokenTransfers.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from 'react'
 import { styled } from '@mui/material/styles'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
 import { Table, TableCellAlign, TableColProps } from '../Table'
 import { EvmTokenType, Layer, RuntimeEvent, useGetRuntimeEvmTokensAddress } from '../../../oasis-nexus/api'
@@ -18,6 +18,8 @@ import { useScreenSize } from '../../hooks/useScreensize'
 import { fromBaseUnits, getEthAccountAddressFromBase64, getEvmBech32Address } from '../../utils/helpers'
 import { AppErrors } from '../../../types/errors'
 import Skeleton from '@mui/material/Skeleton'
+import { TokenLink } from './TokenLink'
+import { PlaceholderLabel } from '../../utils/placeholderLabel'
 
 const NULL_ADDRESS = '0x0000000000000000000000000000000000000000'
 
@@ -45,10 +47,11 @@ type TableRuntimeEvent = RuntimeEvent & {
  */
 const DelayedEventBalance: FC<{
   event: RuntimeEvent
+  tickerAsLink?: boolean | undefined
 }> = props => {
   const { t } = useTranslation()
   const [oasisAddress, setOasisAddress] = useState('')
-  const { event, ...rest } = props
+  const { event, tickerAsLink } = props
 
   if (event.layer === Layer.consensus) {
     throw AppErrors.UnsupportedLayer
@@ -88,10 +91,33 @@ const DelayedEventBalance: FC<{
     const value = event.evm_log_params?.find(param => param.name === 'value')?.value as string | undefined
     const realValue = value === undefined ? undefined : fromBaseUnits(value, token?.decimals || 0)
 
-    return <RoundedBalance {...rest} value={realValue} ticker={ticker} />
+    return (
+      <RoundedBalance
+        value={realValue}
+        ticker={ticker}
+        scope={event}
+        tokenAddress={ethAddress}
+        tickerAsLink={tickerAsLink}
+      />
+    )
   } else if (token.type === EvmTokenType.ERC721) {
     const tokenID = event.evm_log_params?.find(param => param.name === 'tokenID')?.value as string | undefined
-    return tokenID ? `TokenID [${tokenID}] ${ticker}` : t('common.missing')
+    return tokenID ? (
+      <Trans
+        t={t}
+        i18nKey="common.tokenInstance"
+        components={{
+          InstanceLink: <PlaceholderLabel label={tokenID} />,
+          TickerLink: tickerAsLink ? (
+            <TokenLink scope={event} address={ethAddress!} name={ticker} />
+          ) : (
+            <PlaceholderLabel label={ticker} />
+          ),
+        }}
+      />
+    ) : (
+      t('common.missing')
+    )
   } else {
     return token.type
   }
@@ -103,6 +129,7 @@ type TokenTransfersProps = {
   isLoading: boolean
   limit: number
   pagination: false | TablePaginationProps
+  tickersAsLink?: boolean | undefined
 }
 
 export const TokenTransfers: FC<TokenTransfersProps> = ({
@@ -111,6 +138,7 @@ export const TokenTransfers: FC<TokenTransfersProps> = ({
   pagination,
   transfers,
   ownAddress,
+  tickersAsLink,
 }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
@@ -214,7 +242,7 @@ export const TokenTransfers: FC<TokenTransfersProps> = ({
         {
           key: 'value',
           align: TableCellAlign.Right,
-          content: <DelayedEventBalance event={transfer} />,
+          content: <DelayedEventBalance event={transfer} tickerAsLink={tickersAsLink} />,
         },
       ],
       highlight: transfer.markAsNew,

src/app/pages/AccountDetailsPage/AccountTokenTransfersCard.tsx

@@ -44,6 +44,7 @@ export const AccountTokenTransfersCard: FC = () => {
               isTotalCountClipped,
               rowsPerPage: NUMBER_OF_ITEMS_ON_SEPARATE_PAGE,
             }}
+            tickersAsLink
           />
         </ErrorBoundary>
       </CardContent>

src/app/utils/placeholderLabel.tsx

@@ -0,0 +1,10 @@
+import { FC } from 'react'
+
+/**
+ * Placeholder label to be used for i18next's trans
+ *
+ * For some reason, Trans will accept neither simple strings,
+ * nor on-the-fly constructed DOM nodes for components.
+ * You can use this as a thin wrapper to fix this.
+ */
+export const PlaceholderLabel: FC<{ label: string }> = ({ label }) => <span>{label}</span>

src/locales/en/translation.json

@@ -62,7 +62,7 @@
     "height": "Height",
     "hide": "Hide",
     "loadMore": "Load more",
-    "lessThanAmount": "< {{value}} {{ticker}}",
+    "lessThanAmount": "< {{value}} <TickerLink>",
     "missing": "n/a",
     "name": "Name",
     "oasis": "Oasis",
@@ -81,6 +81,7 @@
     "timestamp": "Timestamp",
     "to": "To",
     "token": "Token",
+    "tokenInstance": "TokenID [<InstanceLink />] <TickerLink/>",
     "tokens": "Tokens",
     "totalSent": "Total Sent",
     "transactions": "Transactions",
@@ -91,7 +92,8 @@
     "unknown": "Unknown",
     "value": "Value",
     "valueInToken": "{{value}} {{ticker}}",
-    "roundedValueInToken": "{{value}}… {{ticker}}",
+    "roundedValueInToken": "{{value}}… <TickerLink>",
+    "valueInTokenWithLink": "{{value}} <TickerLink>",
     "view": "View",
     "viewAll": "View all",
     "paraTimeOnline": "ParaTime Online",