Merge pull request #2065 from oasisprotocol/lw/evm-params

Display evm_fn_params in transaction details

Author: lukaw3d

.changelog/2065.feature.md

@@ -0,0 +1 @@
+Display evm_fn_params in transaction details

.eslintrc.js

@@ -35,6 +35,10 @@ const config = {
             name: 'date-fns/formatDistanceToNow',
             message: 'Use formatDistanceToNow from dateFormatter.ts instead.',
           },
+          {
+            name: 'js-yaml',
+            message: "Use 'yamlDump' instead.",
+          },
         ],
         patterns: [
           {

package.json

@@ -64,6 +64,7 @@
     "bip39": "^3.1.0",
     "date-fns": "3.6.0",
     "i18next": "23.16.8",
+    "js-yaml": "^4.1.0",
     "monaco-editor": "^0.52.2",
     "react": "18.3.1",
     "react-dom": "18.3.1",
@@ -80,6 +81,7 @@
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "14.5.2",
+    "@types/js-yaml": "^4.0.9",
     "@types/node": "20.17.24",
     "@types/node-fetch": "2.6.12",
     "@types/react": "18.3.19",

src/app/components/LongDataDisplay/index.tsx

@@ -68,6 +68,7 @@ export const LongDataDisplay: FC<{ data: string; fontWeight?: number; collapsedL
           display: '-webkit-box',
           WebkitLineClamp: isExpanded ? 'none' : collapsedLinesNumber,
           WebkitBoxOrient: 'vertical',
+          whiteSpace: 'pre-wrap',
         }}
       >
         {data}

src/app/pages/RuntimeTransactionDetailPage/index.tsx

@@ -44,6 +44,7 @@ import Link from '@mui/material/Link'
 import { Link as RouterLink } from 'react-router-dom'
 import { RouteUtils } from '../../utils/route-utils'
 import Tooltip from '@mui/material/Tooltip'
+import { yamlDump } from '../../utils/yamlDump'
 
 export const RuntimeTransactionDetailPage: FC = () => {
   const { t } = useTranslation()
@@ -179,7 +180,18 @@ export const RuntimeTransactionDetailView: FC<{
           <dd>
             <RuntimeTransactionMethod transaction={transaction} />
           </dd>
-
+          {transaction.evm_fn_params && (
+            <>
+              <dt>{t('transactions.method.evm.call')}</dt>
+              <dd>
+                <LongDataDisplay
+                  data={`${transaction.evm_fn_name}(\n${yamlDump(transaction.evm_fn_params.map(a => ({ [a.name]: a.value })))})`}
+                  collapsedLinesNumber={8}
+                  fontWeight={400}
+                />
+              </dd>
+            </>
+          )}
           <dt>{t('transactions.encryption.format')}</dt>
           <dd>
             <TransactionEncryptionStatus envelope={envelope} withText={true} />

src/app/utils/yamlDump.ts

@@ -0,0 +1,10 @@
+// eslint-disable-next-line no-restricted-imports
+import { dump } from 'js-yaml'
+
+export function yamlDump(obj: any) {
+  return dump(obj, {
+    replacer: (k, v) => {
+      return v
+    },
+  })
+}

yarn.lock

@@ -2385,6 +2385,11 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-1.0.7.tgz#4158d3105276773d5b7695cd4834b1722e4f37a8"
   integrity sha512-w28IoSUCJpidD/TGviZwwMJckNESJZXFu7NBZ5YJ4mEUnNraUn9Pm8HSZm/jDF1pDWYKspWE7oVphigUPRakIQ==
 
+"@types/js-yaml@^4.0.9":
+  version "4.0.9"
+  resolved "https://registry.yarnpkg.com/@types/js-yaml/-/js-yaml-4.0.9.tgz#cd82382c4f902fed9691a2ed79ec68c5898af4c2"
+  integrity sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==
+
 "@types/json-schema@^7.0.9":
   version "7.0.12"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.12.tgz#d70faba7039d5fca54c83c7dbab41051d2b6f6cb"