Merge pull request #1845 from oasisprotocol/lw/format-event-values

Format token amounts in events

Author: lukaw3d

.changelog/1845.bugfix.md

@@ -0,0 +1 @@
+Format token amounts in events

src/app/components/RuntimeEvents/RuntimeEventDetails.tsx

@@ -1,7 +1,7 @@
 import { EvmAbiParam, RuntimeEvent, RuntimeEventType } from '../../../oasis-nexus/api'
 import { FC } from 'react'
 import { TFunction } from 'i18next'
-import { useTranslation } from 'react-i18next'
+import { Trans, useTranslation } from 'react-i18next'
 import { StyledDescriptionList } from '../StyledDescriptionList'
 import { useScreenSize } from '../../hooks/useScreensize'
 import Table from '@mui/material/Table'
@@ -31,6 +31,9 @@ import LanIcon from '@mui/icons-material/Lan'
 import LanOutlinedIcon from '@mui/icons-material/LanOutlined'
 import { MethodIcon } from '../ConsensusTransactionMethod'
 import { TransactionLink } from '../Transactions/TransactionLink'
+import Tooltip from '@mui/material/Tooltip'
+import { tooltipDelay } from '../../../styles/theme'
+import { PlaceholderLabel } from '../../utils/PlaceholderLabel'
 
 const getRuntimeEventMethodLabel = (t: TFunction, method: string | undefined) => {
   switch (method) {
@@ -116,6 +119,7 @@ const EvmEventParamData: FC<{
   address?: string
   alwaysTrimOnTable?: boolean
 }> = ({ scope, param, address, alwaysTrimOnTable }) => {
+  const { t } = useTranslation()
   /**
    * According to the API docs:
    *
@@ -131,8 +135,43 @@ const EvmEventParamData: FC<{
         <AccountLink address={address} scope={scope} alwaysTrimOnTablet={alwaysTrimOnTable} />
       ) : null
     case 'uint256':
-      // TODO: format with BigNumber
-      return <span>{param.value as string}</span>
+      if (param.evm_token?.type === 'ERC20') {
+        return (
+          <Tooltip
+            arrow
+            placement="top"
+            title={param.value_raw}
+            enterDelay={tooltipDelay}
+            enterNextDelay={tooltipDelay}
+          >
+            <span>
+              {t('common.valueInToken', {
+                ...getPreciseNumberFormat(param.value as string),
+                ticker: param.evm_token.symbol,
+              })}
+            </span>
+          </Tooltip>
+        )
+      }
+      if (param.evm_token?.type === 'ERC721') {
+        return (
+          <Trans
+            t={t}
+            i18nKey="common.tokenInstance"
+            components={{
+              InstanceLink: <PlaceholderLabel label={param.value as string} />,
+              TickerLink: <PlaceholderLabel label={param.evm_token.symbol ?? t('common.missing')} />,
+            }}
+          />
+        )
+      }
+      return (
+        <span>
+          {t('common.valueLong', {
+            ...getPreciseNumberFormat(param.value as string),
+          })}
+        </span>
+      )
     default:
       return <span>{JSON.stringify(param.value, null, '  ')}</span>
   }

src/app/components/Tokens/TokenTransfers.tsx

@@ -13,7 +13,6 @@ import { TokenLink } from './TokenLink'
 import { PlaceholderLabel } from '../../utils/PlaceholderLabel'
 import { TokenTypeTag } from './TokenList'
 import { parseEvmEvent } from '../../utils/parseEvmEvent'
-import { fromBaseUnits } from '../../utils/number-utils'
 import { TransferIcon } from '../TransferIcon'
 import { TableCellAge } from '../TableCellAge'
 import { TableHeaderAge } from '../TableHeaderAge'
@@ -33,14 +32,10 @@ export const EventBalance: FC<{
 
   const tokenEthAddress = event.body.address
   const tokenType = event.evm_token?.type
-  const tokenDecimals = event.evm_token?.decimals
   const ticker = event.evm_token?.symbol
 
   if (tokenType === EvmTokenType.ERC20) {
-    // We are calling it 'raw' since it's not yet normalized according to decimals.
-    const rawValue = event.evm_log_params?.find(param => param.name === 'value')?.value as string | undefined
-    const value = rawValue === undefined ? undefined : fromBaseUnits(rawValue, tokenDecimals || 0)
-
+    const value = event.evm_log_params?.find(param => param.name === 'value')?.value as string | undefined
     return (
       <RoundedBalance
         value={value}

src/oasis-nexus/api.ts

@@ -93,6 +93,12 @@ declare module './generated/api' {
     layer: Layer
   }
 
+  export interface EvmAbiParam {
+    /** Added to fields that are likely an amount in tokens */
+    evm_token?: EvmEventToken
+    value_raw?: string
+  }
+
   export interface ConsensusEvent {
     network: Network
   }
@@ -893,6 +899,28 @@ const fixChecksumAddressInEvmEventParam = (param: generated.EvmAbiParam): genera
       }
     : param
 
+const addTokenToParams = (event: generated.RuntimeEvent) => {
+  if (event.evm_token?.type === 'ERC20') {
+    if (event.evm_log_name === 'Transfer' || event.evm_log_name === 'Approval') {
+      const valueParam = event.evm_log_params?.[2]
+      if (valueParam?.evm_type === 'uint256' && typeof valueParam.value === 'string') {
+        valueParam.evm_token = event.evm_token
+        valueParam.value_raw = valueParam.value
+        valueParam.value = fromBaseUnits(valueParam.value, event.evm_token.decimals ?? 0)
+      }
+    }
+  }
+  if (event.evm_token?.type === 'ERC721') {
+    if (event.evm_log_name === 'Transfer' || event.evm_log_name === 'Approval') {
+      const tokenParam = event.evm_log_params?.[2]
+      if (tokenParam?.evm_type === 'uint256' && typeof tokenParam.value === 'string') {
+        tokenParam.evm_token = event.evm_token
+      }
+    }
+  }
+  return event
+}
+
 export const useGetRuntimeEvents: typeof generated.useGetRuntimeEvents = (
   network,
   runtime,
@@ -929,6 +957,9 @@ export const useGetRuntimeEvents: typeof generated.useGetRuntimeEvents = (
                   network,
                 }
               })
+              .map(event => {
+                return addTokenToParams(event)
+              })
               .map((event): generated.RuntimeEvent => {
                 if (
                   event.type === RuntimeEventType.accountstransfer ||