Add tuple support

src/transaction/DecodedParamRow.tsx

@@ -6,6 +6,7 @@ import { ParamType } from "@ethersproject/abi";
 import { TransactionData } from "../types";
 
 type DecodedParamRowProps = {
+  prefix?: string;
   i?: number | undefined;
   r: any;
   paramType: ParamType;
@@ -13,22 +14,25 @@ type DecodedParamRowProps = {
 };
 
 const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
+  prefix,
   i,
   r,
   paramType,
   txData,
 }) => {
   return (
+    <>
       <tr className="grid grid-cols-12 gap-x-2 py-2">
         <td className="col-span-3 pl-1">
+          {prefix && <span className="text-gray-300">{prefix}</span>}
           {paramType.name}{" "}
           {i !== undefined && (
             <span className="text-gray-400 text-xs">({i})</span>
           )}
         </td>
-      <td className="col-span-1">{paramType.type}</td>
+        <td className="col-span-1 text-gray-500">{paramType.type}</td>
         <td className="col-span-8 pr-1 font-code break-all">
-        {paramType.type === "address" ? (
+          {paramType.baseType === "address" ? (
             <div className="flex items-baseline space-x-2 -ml-1 mr-3">
               <AddressHighlighter address={r.toString()}>
                 <DecoratedAddressLink
@@ -40,11 +44,11 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
               </AddressHighlighter>
               <Copy value={r.toString()} />
             </div>
-        ) : paramType.type === "bool" ? (
+          ) : paramType.baseType === "bool" ? (
             <span className={`${r ? "text-green-700" : "text-red-700"}`}>
               {r.toString()}
             </span>
-        ) : paramType.type === "bytes" ? (
+          ) : paramType.baseType === "bytes" ? (
             <span>
               {r.toString()}{" "}
               <span className="font-sans text-xs text-gray-400">
@@ -52,11 +56,23 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
                 {r.toString().length / 2 - 1 === 1 ? "byte" : "bytes"}
               </span>
             </span>
+          ) : paramType.baseType === "tuple" ? (
+            <></>
           ) : (
             r.toString()
           )}
         </td>
       </tr>
+      {paramType.baseType === "tuple" &&
+        r.map((e: any, idx: number) => (
+          <DecodedParamRow
+            prefix={paramType.name + "."}
+            r={e}
+            paramType={paramType.components[idx]}
+            txData={txData}
+          />
+        ))}
+    </>
   );
 };