diff --git a/src/Transaction.tsx b/src/Transaction.tsx index e204633..1857f72 100644 --- a/src/Transaction.tsx +++ b/src/Transaction.tsx @@ -11,6 +11,8 @@ import { RuntimeContext } from "./useRuntime"; import { SelectionContext, useSelection } from "./useSelection"; import { useInternalOperations, useTxData } from "./useErigonHooks"; import { useETHUSDOracle } from "./usePriceOracle"; +import { useSourcify, useTransactionDescription } from "./useSourcify"; +import { SourcifySource } from "./url"; type TransactionParams = { txhash: string; @@ -44,6 +46,13 @@ const Transaction: React.FC = () => { txData?.confirmedData?.blockNumber ); + const metadata = useSourcify( + txData?.to, + provider?.network.chainId, + SourcifySource.CUSTOM_SNAPSHOT_SERVER // TODO: use dynamic selector + ); + const txDesc = useTransactionDescription(metadata, txData); + return ( Transaction Details @@ -71,6 +80,7 @@ const Transaction: React.FC = () => {
= ({ txData, + txDesc, internalOps, sendsEthToMiner, ethUSDPrice, @@ -333,6 +336,26 @@ const Details: React.FC = ({ value={inputMode === 0 ? txData.data : utfInput} readOnly /> + {txDesc && ( + + + + + + + + + {txDesc.args.map((r, i) => ( + + + + + + + ))} + +
#nametypevalue
{i}{txDesc.functionFragment.inputs[i].name}{txDesc.functionFragment.inputs[i].type}{r}
+ )} diff --git a/src/useSourcify.ts b/src/useSourcify.ts index bab8423..398953a 100644 --- a/src/useSourcify.ts +++ b/src/useSourcify.ts @@ -1,4 +1,6 @@ -import { useState, useEffect } from "react"; +import { useState, useEffect, useMemo } from "react"; +import { Interface } from "@ethersproject/abi"; +import { TransactionData } from "./types"; import { sourcifyMetadata, SourcifySource, sourcifySourceFile } from "./url"; export type Metadata = { @@ -119,3 +121,30 @@ export const useContract = ( return content; }; + +export const useTransactionDescription = ( + metadata: Metadata | null | undefined, + txData: TransactionData | null | undefined +) => { + const txDesc = useMemo(() => { + if (!metadata || !txData) { + return undefined; + } + + const abi = metadata.output.abi; + const intf = new Interface(abi as any); + console.log(intf); + return intf.parseTransaction({ + data: txData.data, + value: txData.value, + }); + }, [metadata, txData]); + + console.log(metadata); + console.log(txDesc); + if (txDesc?.functionFragment) { + console.log(txDesc.functionFragment.inputs); + console.log(txDesc.args.toString()); + } + return txDesc; +};