Format token IDs in ERC721 events

ERC721 mint
0xc6a0b7f768153623819582a51ab629e97a1c2ff66a35e573fb4e708ff8293b5a

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'
@@ -33,6 +33,7 @@ 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) {
@@ -134,7 +135,7 @@ const EvmEventParamData: FC<{
         <AccountLink address={address} scope={scope} alwaysTrimOnTablet={alwaysTrimOnTable} />
       ) : null
     case 'uint256':
-      if (param.evm_token) {
+      if (param.evm_token?.type === 'ERC20') {
         return (
           <Tooltip
             arrow
@@ -152,6 +153,18 @@ const EvmEventParamData: FC<{
           </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', {

src/oasis-nexus/api.ts

@@ -910,6 +910,14 @@ const addTokenToParams = (event: generated.RuntimeEvent) => {
       }
     }
   }
+  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
 }