Account Token Transfers: make tickers into links

So that we can easily look up the tokens involved
oasisprotocol · Jul 7, 2023 · 0c0437e · 0c0437e
1 parent be2f1f6
commit 0c0437e
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 13 deletions.
diff --git a/.changelog/687.2.feature.md b/.changelog/687.2.feature.md
@@ -0,0 +1 @@
+Make tickers into links in account token transfers
diff --git a/src/app/components/RoundedBalance/index.tsx b/src/app/components/RoundedBalance/index.tsx
@@ -1,18 +1,29 @@
 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'
 
 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 +35,24 @@ 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 tickerLink ? (
+      <Trans
+        t={t}
+        i18nKey={'common.valueInTokenWithLink'}
+        values={{ value: number.toFixed() }}
+        components={{ TickerLink: tickerLink }}
+      />
+    ) : (
+      <span>
+        {t('common.valueInToken', { value: number.toFixed(), ticker: tickerName })} {tickerLink}
+      </span>
+    )
   }
 
   return (
@@ -37,14 +64,34 @@ export const RoundedBalance: FC<RoundedBalanceProps> = ({ ticker, value }) => {
         enterDelay={tooltipDelay}
         enterNextDelay={tooltipDelay}
       >
-        <span>
-          {!number.isZero() && truncatedNumber.isZero()
-            ? t('common.lessThanAmount', {
+        {!number.isZero() && truncatedNumber.isZero() ? (
+          tickerLink ? (
+            <Trans
+              t={t}
+              i18nKey={'common.lessThanAmountWithLink'}
+              values={{ value: truncatedNumber.toFixed(numberOfDecimals) }}
+              components={{ TickerLink: tickerLink }}
+            />
+          ) : (
+            <span>
+              {t('common.lessThanAmount', {
                 value: truncatedNumber.toFixed(numberOfDecimals),
                 ticker: tickerName,
-              })
-            : t('common.roundedValueInToken', { value: truncatedNumber.toFixed(), ticker: tickerName })}
-        </span>
+              })}
+            </span>
+          )
+        ) : tickerLink ? (
+          <Trans
+            t={t}
+            i18nKey={'common.roundedValueInTokenWithLink'}
+            values={{ value: truncatedNumber.toFixed() }}
+            components={{ TickerLink: tickerLink }}
+          />
+        ) : (
+          <span>
+            {t('common.roundedValueInToken', { value: truncatedNumber.toFixed(), ticker: tickerName })}{' '}
+          </span>
+        )}
       </Tooltip>
     </span>
   )

diff --git a/src/app/components/Tokens/TokenTransfers.tsx b/src/app/components/Tokens/TokenTransfers.tsx
@@ -18,6 +18,7 @@ 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'
 
 const NULL_ADDRESS = '0x0000000000000000000000000000000000000000'
 
@@ -45,10 +46,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 +90,24 @@ 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 ? (
+      <span>
+        TokenID [{tokenID}] <TokenLink scope={event} address={ethAddress!} name={ticker} />
+      </span>
+    ) : (
+      t('common.missing')
+    )
   } else {
     return token.type
   }
@@ -103,6 +119,7 @@ type TokenTransfersProps = {
   isLoading: boolean
   limit: number
   pagination: false | TablePaginationProps
+  tickersAsLink?: boolean | undefined
 }
 
 export const TokenTransfers: FC<TokenTransfersProps> = ({
@@ -111,6 +128,7 @@ export const TokenTransfers: FC<TokenTransfersProps> = ({
   pagination,
   transfers,
   ownAddress,
+  tickersAsLink,
 }) => {
   const { t } = useTranslation()
   const { isMobile } = useScreenSize()
@@ -214,7 +232,7 @@ export const TokenTransfers: FC<TokenTransfersProps> = ({
         {
           key: 'value',
           align: TableCellAlign.Right,
-          content: <DelayedEventBalance event={transfer} />,
+          content: <DelayedEventBalance event={transfer} tickerAsLink={tickersAsLink} />,
         },
       ],
       highlight: transfer.markAsNew,

diff --git a/src/app/pages/AccountDetailsPage/AccountTokenTransfersCard.tsx b/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>

diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -63,6 +63,7 @@
     "hide": "Hide",
     "loadMore": "Load more",
     "lessThanAmount": "< {{value}} {{ticker}}",
+    "lessThanAmountWithLink": "< {{value}} <TickerLink>",
     "missing": "n/a",
     "name": "Name",
     "oasis": "Oasis",
@@ -92,6 +93,8 @@
     "value": "Value",
     "valueInToken": "{{value}} {{ticker}}",
     "roundedValueInToken": "{{value}}… {{ticker}}",
+    "roundedValueInTokenWithLink": "{{value}}… <TickerLink>",
+    "valueInTokenWithLink": "{{value}} <TickerLink>",
     "view": "View",
     "viewAll": "View all",
     "paraTimeOnline": "ParaTime Online",
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Make tickers into links in account token transfers