Display EVM function name in verified contract calls

.changelog/1565.feature.md

@@ -0,0 +1 @@
+Display EVM function name in verified contract calls

src/app/components/ConsensusTransactionMethod/index.tsx

@@ -103,7 +103,6 @@ const MethodIconContent: FC<MethodIconContentProps> = ({
         <Typography
           sx={{
             fontWeight: 'inherit',
-            textTransform: 'capitalize',
             order: reverseLabel ? -1 : 0,
             ...(truncate
               ? {

src/app/components/RuntimeTransactionMethod/index.tsx

@@ -10,6 +10,7 @@ import QuestionMarkIcon from '@mui/icons-material/QuestionMark'
 import LanIcon from '@mui/icons-material/Lan'
 import LanOutlinedIcon from '@mui/icons-material/LanOutlined'
 import { MethodIcon } from '../ConsensusTransactionMethod'
+import { RuntimeTransaction } from '../../../oasis-nexus/api'
 
 const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) => {
   switch (method) {
@@ -35,6 +36,21 @@ const getRuntimeTransactionLabel = (t: TFunction, method: string | undefined) =>
   }
 }
 
+/**
+ * The method call body. Defined by the runtime.
+ *
+ * May be undefined if the transaction was malformed.
+ *
+ * In theory, this could be any string as the runtimes evolve.
+ * In practice, the nexus currently expects only the following methods:
+ *   - "accounts.Transfer"
+ *   - "consensus.Deposit"
+ *   - "consensus.Withdraw"
+ *   - "consensus.Delegate"
+ *   - "consensus.Undelegate"
+ *   - "evm.Create"
+ *   - "evm.Call"
+ */
 const getRuntimeTransactionIcon = (method: string | undefined, label: string, truncate?: boolean) => {
   const props = {
     border: false,
@@ -63,28 +79,20 @@ const getRuntimeTransactionIcon = (method: string | undefined, label: string, tr
 }
 
 type RuntimeTransactionLabelProps = {
-  /**
-   * The method call body. Defined by the runtime.
-   *
-   * May be undefined if the transaction was malformed.
-   *
-   * In theory, this could be any string as the runtimes evolve.
-   * In practice, the nexus currently expects only the following methods:
-   *   - "accounts.Transfer"
-   *   - "consensus.Deposit"
-   *   - "consensus.Withdraw"
-   *   - "consensus.Delegate"
-   *   - "consensus.Undelegate"
-   *   - "evm.Create"
-   *   - "evm.Call"
-   */
-  method?: string
+  transaction: RuntimeTransaction
   truncate?: boolean
 }
 
-export const RuntimeTransactionMethod: FC<RuntimeTransactionLabelProps> = ({ method, truncate }) => {
+export const RuntimeTransactionMethod: FC<RuntimeTransactionLabelProps> = ({ transaction, truncate }) => {
   const { t } = useTranslation()
-  const label = getRuntimeTransactionLabel(t, method)
+  let label = getRuntimeTransactionLabel(t, transaction.method)
+  if (transaction.evm_fn_name) {
+    if (truncate) {
+      label = `${transaction.evm_fn_name}`
+    } else {
+      label += `: ${transaction.evm_fn_name}`
+    }
+  }
 
-  return <>{getRuntimeTransactionIcon(method, label, truncate)}</>
+  return <>{getRuntimeTransactionIcon(transaction.method, label, truncate)}</>
 }

src/app/components/Transactions/RuntimeTransactions.tsx

@@ -103,7 +103,7 @@ export const RuntimeTransactions: FC<TransactionsProps> = ({
         ...(verbose
           ? [
               {
-                content: <RuntimeTransactionMethod method={transaction.method} truncate />,
+                content: <RuntimeTransactionMethod transaction={transaction} truncate />,
                 key: 'type',
               },
               {

src/app/pages/RuntimeTransactionDetailPage/index.tsx

@@ -183,7 +183,7 @@ export const RuntimeTransactionDetailView: FC<{
 
           <dt>{t('common.type')}</dt>
           <dd>
-            <RuntimeTransactionMethod method={transaction.method} />
+            <RuntimeTransactionMethod transaction={transaction} />
           </dd>
 
           <dt>{t('transactions.encryption.format')}</dt>

src/stories/Icons.stories.tsx

@@ -5,7 +5,7 @@ import { ConsensusTransactionMethod } from '../app/components/ConsensusTransacti
 import { RuntimeTransactionMethod } from '../app/components/RuntimeTransactionMethod'
 import { TokenTransferIcon } from '../app/components/Tokens/TokenTransferIcon'
 import { EventTypeIcon } from '../app/components/RuntimeEvents/RuntimeEventDetails'
-import { ConsensusTxMethod, RuntimeEventType } from '../oasis-nexus/api'
+import { ConsensusTxMethod, RuntimeEventType, RuntimeTransaction } from '../oasis-nexus/api'
 import { COLORS } from '../styles/theme/colors'
 
 export default {
@@ -53,7 +53,7 @@ const RuntimeTemplate: StoryFn = () => {
           gap={4}
           sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingBottom: 4 }}
         >
-          <RuntimeTransactionMethod method={method} />
+          <RuntimeTransactionMethod transaction={{ method } as RuntimeTransaction} />
           <Typography sx={{ color: COLORS.grayMedium, fontSize: '12px' }}>({method})</Typography>
         </Box>
       ))}