Format token values in ERC20 events

ERC20 transfer
0x69ba2b1c23a5e76043d43c192985db4d9829f4894be7d26765e90214d4dc910e

ERC20 approval
0x061ce16ad3433f7b23d4cc03f46e231176fd6d62986d4ec0be8f24faebd447f4

Burn
0xadfb838be0d4c4261193e88051156af6488e89960a872da9c040a99f184b08a1

Mint
0xd69958564337597153d7a6f08f5d158bc95fe37ce8adefaaaa35e86488ee4403

Author: lukaw3d

src/app/components/RuntimeEvents/RuntimeEventDetails.tsx

@@ -31,6 +31,8 @@ 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'
 
 const getRuntimeEventMethodLabel = (t: TFunction, method: string | undefined) => {
   switch (method) {
@@ -116,6 +118,7 @@ const EvmEventParamData: FC<{
   address?: string
   alwaysTrimOnTable?: boolean
 }> = ({ scope, param, address, alwaysTrimOnTable }) => {
+  const { t } = useTranslation()
   /**
    * According to the API docs:
    *
@@ -131,6 +134,24 @@ const EvmEventParamData: FC<{
         <AccountLink address={address} scope={scope} alwaysTrimOnTablet={alwaysTrimOnTable} />
       ) : null
     case 'uint256':
+      if (param.evm_token) {
+        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>
+        )
+      }
       return (
         <span>
           {t('common.valueLong', {

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,20 @@ 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)
+      }
+    }
+  }
+  return event
+}
+
 export const useGetRuntimeEvents: typeof generated.useGetRuntimeEvents = (
   network,
   runtime,
@@ -929,6 +949,9 @@ export const useGetRuntimeEvents: typeof generated.useGetRuntimeEvents = (
                   network,
                 }
               })
+              .map(event => {
+                return addTokenToParams(event)
+              })
               .map((event): generated.RuntimeEvent => {
                 if (
                   event.type === RuntimeEventType.accountstransfer ||