Add devdoc params help to verified decoded input params

src/Transaction.tsx

@@ -82,6 +82,8 @@ const Transaction: React.FC = () => {
               <Details
                 txData={txData}
                 txDesc={txDesc}
+                userDoc={metadata?.output.userdoc}
+                devDoc={metadata?.output.devdoc}
                 internalOps={internalOps}
                 sendsEthToMiner={sendsEthToMiner}
                 ethUSDPrice={blockETHUSDPrice}

src/transaction/Details.tsx

@@ -37,10 +37,13 @@ import PercentagePosition from "../components/PercentagePosition";
 import ModeTab from "../components/ModeTab";
 import DecodedParamsTable from "./decoder/DecodedParamsTable";
 import { rawInputTo4Bytes, use4Bytes } from "../use4Bytes";
+import { DevDoc, UserDoc } from "../useSourcify";
 
 type DetailsProps = {
   txData: TransactionData;
   txDesc: TransactionDescription | null | undefined;
+  userDoc?: UserDoc | undefined;
+  devDoc?: DevDoc | undefined;
   internalOps?: InternalOperation[];
   sendsEthToMiner: boolean;
   ethUSDPrice: BigNumber | undefined;
@@ -49,6 +52,8 @@ type DetailsProps = {
 const Details: React.FC<DetailsProps> = ({
   txData,
   txDesc,
+  userDoc,
+  devDoc,
   internalOps,
   sendsEthToMiner,
   ethUSDPrice,
@@ -80,6 +85,8 @@ const Details: React.FC<DetailsProps> = ({
   }, [txData, fourBytesEntry]);
 
   const resolvedTxDesc = txDesc ?? fourBytesTxDesc;
+  const userMethod = txDesc ? userDoc?.methods[txDesc.signature] : undefined;
+  const devMethod = txDesc ? devDoc?.methods[txDesc.signature] : undefined;
 
   return (
     <ContentFrame tabs>
@@ -353,6 +360,8 @@ const Details: React.FC<DetailsProps> = ({
                   paramTypes={resolvedTxDesc.functionFragment.inputs}
                   txData={txData}
                   hasParamNames={resolvedTxDesc === txDesc}
+                  userMethod={userMethod}
+                  devMethod={devMethod}
                 />
               )}
             </Tab.Panel>

src/transaction/decoder/DecodedParamRow.tsx

@@ -1,5 +1,9 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, useState } from "react";
 import { ParamType } from "@ethersproject/abi";
+import { Switch } from "@headlessui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faQuestionCircle } from "@fortawesome/free-regular-svg-icons/faQuestionCircle";
+import { faQuestionCircle as faQuestionCircleSolid } from "@fortawesome/free-solid-svg-icons/faQuestionCircle";
 import Uint256Decoder from "./Uint256Decoder";
 import AddressDecoder from "./AddressDecoder";
 import BooleanDecoder from "./BooleanDecoder";
@@ -13,6 +17,7 @@ type DecodedParamRowProps = {
   paramType: ParamType;
   txData: TransactionData;
   arrayElem?: number | undefined;
+  help?: string | undefined;
 };
 
 const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
@@ -22,10 +27,15 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
   paramType,
   txData,
   arrayElem,
-}) => (
+  help,
+}) => {
+  const [showHelp, setShowHelp] = useState<boolean>(false);
+
+  return (
     <>
       <tr className="grid grid-cols-12 gap-x-2 py-2 hover:bg-gray-100">
         <td className="col-span-3 pl-1">
+          <div>
             {prefix && <span className="text-gray-300">{prefix}</span>}
             {arrayElem !== undefined ? (
               <span className="text-gray-400">
@@ -40,6 +50,23 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
                 )}
               </>
             )}
+            {help && (
+              <>
+                {" "}
+                <Switch
+                  checked={showHelp}
+                  onChange={setShowHelp}
+                  className="text-gray-500"
+                >
+                  <FontAwesomeIcon
+                    icon={showHelp ? faQuestionCircleSolid : faQuestionCircle}
+                    size="1x"
+                  />
+                </Switch>
+              </>
+            )}
+          </div>
+          {help && showHelp && <div className="mt-2 text-gray-400">{help}</div>}
         </td>
         <td className="col-span-1 text-gray-500">{paramType.type}</td>
         <td className="col-span-8 pr-1 font-code break-all">
@@ -51,7 +78,8 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
             <BooleanDecoder r={r} />
           ) : paramType.baseType === "bytes" ? (
             <BytesDecoder r={r} />
-        ) : paramType.baseType === "tuple" || paramType.baseType === "array" ? (
+          ) : paramType.baseType === "tuple" ||
+            paramType.baseType === "array" ? (
             <></>
           ) : (
             r.toString()
@@ -88,5 +116,6 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
         ))}
     </>
   );
+};
 
 export default React.memo(DecodedParamRow);

src/transaction/decoder/DecodedParamsTable.tsx

@@ -2,12 +2,15 @@ import React from "react";
 import { ParamType, Result } from "@ethersproject/abi";
 import DecodedParamRow from "./DecodedParamRow";
 import { TransactionData } from "../../types";
+import { DevMethod, UserMethod } from "../../useSourcify";
 
 type DecodedParamsTableProps = {
   args: Result;
   paramTypes: ParamType[];
   txData: TransactionData;
   hasParamNames?: boolean;
+  userMethod?: UserMethod | undefined;
+  devMethod?: DevMethod | undefined;
 };
 
 const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
@@ -15,6 +18,7 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
   paramTypes,
   txData,
   hasParamNames = true,
+  devMethod,
 }) => (
   <table className="border w-full">
     <thead>
@@ -43,6 +47,7 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
           r={r}
           paramType={paramTypes[i]}
           txData={txData}
+          help={devMethod?.params?.[paramTypes[i].name]}
         />
       ))}
     </tbody>

src/useSourcify.ts

@@ -3,6 +3,33 @@ import { Interface } from "@ethersproject/abi";
 import { TransactionData } from "./types";
 import { sourcifyMetadata, SourcifySource, sourcifySourceFile } from "./url";
 
+export type UserMethod = {
+  notice?: string | undefined;
+};
+
+export type UserEvent = {
+  notice?: string | undefined;
+};
+
+export type UserDoc = {
+  kind: "user";
+  version?: number | undefined;
+  notice?: string | undefined;
+  methods: Record<string, UserMethod>;
+  events: Record<string, UserEvent>;
+};
+
+export type DevMethod = {
+  params?: Record<string, string>;
+  returns?: Record<string, string>;
+};
+
+export type DevDoc = {
+  kind: "dev";
+  version?: number | undefined;
+  methods: Record<string, DevMethod>;
+};
+
 export type Metadata = {
   version: string;
   language: string;
@@ -33,8 +60,8 @@ export type Metadata = {
   };
   output: {
     abi: any[];
-    userdocs: any[];
-    devdoc: any[];
+    userdoc?: UserDoc | undefined;
+    devdoc?: DevDoc | undefined;
   };
 };