feat: EIP-5792 (#94)

Author: jxom

bun.lockb

@@ -70,7 +70,7 @@
     "remeda": "^1.14.0",
     "sonner": "^0.7.2",
     "use-sync-external-store": "^1.2.0",
-    "viem": "^2.9.13",
+    "viem": "^2.10.1",
     "zustand": "^4.3.8"
   },
   "devDependencies": {

package.json

@@ -24,7 +24,13 @@ export function DecodedCalldata({
   address,
   data,
   labelRight,
-}: { address?: Address | null; data: Hex; labelRight?: ReactNode }) {
+  showRawData,
+}: {
+  address?: Address | null
+  data: Hex
+  labelRight?: ReactNode
+  showRawData?: boolean
+}) {
   const selector = slice(data, 0, 4)
 
   // Try extract ABI from whatsabi autoloading (etherscan, 4byte dbs, etc)
@@ -107,7 +113,7 @@ export function DecodedCalldata({
               </Text>
             </Box>
           )}
-          <LabelledContent label="Function">
+          <LabelledContent label="Signature">
             <Box
               backgroundColor="surface/primary"
               paddingHorizontal="8px"
@@ -128,32 +134,41 @@ export function DecodedCalldata({
           )}
         </>
       )}
-      {abiItem && <Separator />}
-      <LabelledContent label="Raw Data" labelRight={labelRight}>
-        <Box
-          backgroundColor="surface/primary"
-          paddingHorizontal="8px"
-          paddingVertical="12px"
-        >
-          {selector && rawArgs ? (
-            <Text family="mono" size="11px">
-              <Text color="text/tertiary">{selector}</Text>
-              {rawArgs.replace('0x', '')}
-            </Text>
-          ) : (
-            <Text family="mono" size="11px">
-              {data}
-            </Text>
-          )}
-        </Box>
-      </LabelledContent>
+      {showRawData && abiItem && <Separator />}
+      {showRawData && (
+        <LabelledContent label="Raw Data" labelRight={labelRight}>
+          <Box
+            backgroundColor="surface/primary"
+            paddingHorizontal="8px"
+            paddingVertical="12px"
+          >
+            {selector && rawArgs ? (
+              <Text family="mono" size="11px">
+                <Text color="text/tertiary">{selector}</Text>
+                {rawArgs.replace('0x', '')}
+              </Text>
+            ) : (
+              <Text family="mono" size="11px">
+                {data}
+              </Text>
+            )}
+          </Box>
+        </LabelledContent>
+      )}
     </Stack>
   )
 }
 
 function getAbiItem({ abi, selector }: { abi: Abi; selector: Hex }) {
   const abiItem =
-    (getAbiItem_viem({ abi, name: selector }) as AbiItem) ||
+    (getAbiItem_viem({
+      abi: abi.map((x) => ({
+        ...x,
+        inputs: (x as any).inputs || [],
+        outputs: (x as any).outputs || [],
+      })),
+      name: selector,
+    }) as AbiItem) ||
     abi.find((x: any) => x.name === selector) ||
     abi.find((x: any) => x.selector === selector)
   if (!abiItem) return

src/components/abi/DecodedCalldata.tsx

@@ -0,0 +1,37 @@
+import { useMemo } from 'react'
+import { type Hex, parseAbiItem, slice } from 'viem'
+
+import { Text } from '~/design-system'
+import { useLookupSignature } from '../../hooks/useLookupSignature'
+
+import { FormattedAbiItem } from './FormattedAbiItem'
+
+export function FormattedAbiFunctionName({ data }: { data: Hex }) {
+  const selector = slice(data, 0, 4)
+  const { data: signature } = useLookupSignature({
+    selector,
+  })
+
+  const abiItem = useMemo(() => {
+    if (!signature) return
+    const abiItem = parseAbiItem(`function ${signature}`)
+    if (abiItem.type !== 'function') return
+    return abiItem
+  }, [signature])
+
+  return (
+    <Text family="mono" size="11px" wrap={false}>
+      {abiItem ? (
+        <FormattedAbiItem
+          abiItem={abiItem}
+          compact
+          showIndexed={false}
+          showParameters={false}
+          showType={false}
+        />
+      ) : (
+        selector
+      )}
+    </Text>
+  )
+}

src/components/abi/FormattedAbiFunctionName.tsx

@@ -10,6 +10,7 @@ export function FormattedAbiItem({
   compact,
   showIndexed = true,
   showParameterNames = true,
+  showParameters = true,
   showStateMutability = true,
   showReturns = true,
   showType = true,
@@ -19,6 +20,7 @@ export function FormattedAbiItem({
   compact?: boolean
   showIndexed?: boolean
   showParameterNames?: boolean
+  showParameters?: boolean
   showStateMutability?: boolean
   showReturns?: boolean
   showType?: boolean
@@ -30,7 +32,7 @@ export function FormattedAbiItem({
         <>
           {showType && <Text color="text/tertiary">function </Text>}
           {abiItem.name && <Text>{abiItem.name}</Text>}(
-          {abiItem.inputs && (
+          {showParameters && abiItem.inputs && (
             <FormattedAbiParameters
               params={abiItem.inputs}
               showNames={showParameterNames}