new row

oasisprotocol · Sep 13, 2024 · 5a57c65 · 5a57c65
1 parent 2c20473
commit 5a57c65
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 30 deletions.
diff --git a/src/app/components/RuntimeTransactionMethod/index.tsx b/src/app/components/RuntimeTransactionMethod/index.tsx
@@ -15,6 +15,7 @@ import { AbiCoder } from 'ethers'
 import { base64ToHex } from '../../utils/helpers'
 import { hexToBytes } from '@ethereumjs/util'
 import * as oasis from '@oasisprotocol/client'
+import { LongDataDisplay } from '../LongDataDisplay'
 
 const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) => {
   switch (method) {
@@ -94,52 +95,83 @@ export const RuntimeTransactionMethod: FC<RuntimeTransactionLabelProps> = ({ tra
     if (truncate) {
       label = `${transaction.evm_fn_name}`
     } else {
-      label = `${label}: ${transaction.evm_fn_name}(${transaction.evm_fn_params?.map(a => JSON.stringify(a.value)).join(', ')})`
+      label += `: ${transaction.evm_fn_name}`
     }
   }
   if (transaction.to_eth === '0x0100000000000000000000000000000000000103' && transaction.body?.data) {
     // Subcall precompile
     try {
       const coder = AbiCoder.defaultAbiCoder()
-      const [methodName, cborHexArgs] = coder.decode(['string', 'bytes'], base64ToHex(transaction.body.data))
+      const parsed = coder.decode(['string', 'bytes'], base64ToHex(transaction.body.data))
+      const methodName = parsed[0]
 
       if (truncate) {
         label = `${methodName}`
       } else {
         label += `: ${methodName}`
+      }
+    } catch (e) {
+      console.error('Failed to parse subcall data (might be malformed)', e, transaction)
+    }
+  }
 
-        const rawArgs = oasis.misc.fromCBOR(hexToBytes(cborHexArgs))
-        if (rawArgs === null) {
-          label += `(null)`
-        } else if (typeof rawArgs === 'object' && !Array.isArray(rawArgs)) {
-          const jsonArgs = JSON.stringify(
-            rawArgs,
-            (key, value) => {
-              if (value instanceof Uint8Array) {
-                if (key === 'from') return oasis.staking.addressToBech32(value)
-                if (key === 'to') return oasis.staking.addressToBech32(value)
-                if (key === 'shares') return oasis.quantity.toBigInt(value).toLocaleString()
-                return `0x${oasis.misc.toHex(value)}`
-              }
-              if (Array.isArray(value) && value.length === 2) {
-                if (key === 'amount') {
-                  return [
-                    oasis.quantity.toBigInt(value[0]).toLocaleString(),
-                    oasis.misc.toStringUTF8(value[1]),
-                  ]
-                }
+  return <>{getRuntimeTransactionIcon(transaction.method, label, truncate)}</>
+}
+
+export const RuntimeTransactionEVMParams: FC<RuntimeTransactionLabelProps> = ({
+  transaction,
+}: {
+  transaction: RuntimeTransaction
+}) => {
+  const { t } = useTranslation()
+
+  let text = ''
+  if (transaction.evm_fn_name) {
+    text = `${transaction.evm_fn_name}(${transaction.evm_fn_params?.map(a => JSON.stringify(a.value, null, 2)).join(', ')})`
+  }
+  if (transaction.to_eth === '0x0100000000000000000000000000000000000103' && transaction.body?.data) {
+    // Subcall precompile
+    try {
+      const coder = AbiCoder.defaultAbiCoder()
+      const [methodName, cborHexArgs] = coder.decode(['string', 'bytes'], base64ToHex(transaction.body.data))
+
+      text = `${methodName}`
+      const rawArgs = oasis.misc.fromCBOR(hexToBytes(cborHexArgs))
+      if (rawArgs === null) {
+        text += `(null)`
+      } else if (typeof rawArgs === 'object' && !Array.isArray(rawArgs)) {
+        const jsonArgs = JSON.stringify(
+          rawArgs,
+          (key, value) => {
+            if (value instanceof Uint8Array) {
+              if (key === 'from') return oasis.staking.addressToBech32(value)
+              if (key === 'to') return oasis.staking.addressToBech32(value)
+              if (key === 'shares') return oasis.quantity.toBigInt(value).toLocaleString()
+              return `0x${oasis.misc.toHex(value)}`
+            }
+            if (Array.isArray(value) && value.length === 2) {
+              if (key === 'amount') {
+                return [oasis.quantity.toBigInt(value[0]).toLocaleString(), oasis.misc.toStringUTF8(value[1])]
               }
-              return value
-            },
-            2,
-          )
-          label += `(${jsonArgs})`
-        }
+            }
+            return value
+          },
+          2,
+        )
+        text += `(${jsonArgs})`
       }
     } catch (e) {
       console.error('Failed to parse subcall data (might be malformed)', e, transaction)
     }
   }
 
-  return <>{getRuntimeTransactionIcon(transaction.method, label, truncate)}</>
+  if (!text) return null
+  return (
+    <>
+      <dt>{t('transactions.method.evm.call')}</dt>
+      <dd>
+        <LongDataDisplay data={text} collapsedLinesNumber={2} fontWeight={400} />
+      </dd>
+    </>
+  )
 }
diff --git a/src/app/pages/RuntimeTransactionDetailPage/index.tsx b/src/app/pages/RuntimeTransactionDetailPage/index.tsx
@@ -11,7 +11,7 @@ import { StyledDescriptionList } from '../../components/StyledDescriptionList'
 import { PageLayout } from '../../components/PageLayout'
 import { SubPageCard } from '../../components/SubPageCard'
 import { StatusIcon } from '../../components/StatusIcon'
-import { RuntimeTransactionMethod } from '../../components/RuntimeTransactionMethod'
+import { RuntimeTransactionEVMParams, RuntimeTransactionMethod } from '../../components/RuntimeTransactionMethod'
 import { useFormattedTimestampStringWithDistance } from '../../hooks/useFormattedTimestamp'
 import { styled } from '@mui/material/styles'
 import { useScreenSize } from '../../hooks/useScreensize'
@@ -231,6 +231,8 @@ export const RuntimeTransactionDetailView: FC<{
             <RuntimeTransactionMethod transaction={transaction} />
           </dd>
 
+          <RuntimeTransactionEVMParams transaction={transaction} />
+
           <dt>{t('transactions.encryption.format')}</dt>
           <dd>
             <TransactionEncryptionStatus envelope={transaction.encryption_envelope} withText={true} />