From d007f10e7a5f0cedd986d99c6a3c2ba8b4c75607 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 18:35:37 -0300
Subject: [PATCH] Add tuple support

---
 src/transaction/DecodedParamRow.tsx | 90 +++++++++++++++++------------
 1 file changed, 53 insertions(+), 37 deletions(-)

diff --git a/src/transaction/DecodedParamRow.tsx b/src/transaction/DecodedParamRow.tsx
index 3e5e2cd..68027b3 100644
--- a/src/transaction/DecodedParamRow.tsx
+++ b/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,50 +14,65 @@ 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">
-        {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-8 pr-1 font-code break-all">
-        {paramType.type === "address" ? (
-          <div className="flex items-baseline space-x-2 -ml-1 mr-3">
-            <AddressHighlighter address={r.toString()}>
-              <DecoratedAddressLink
-                address={r.toString()}
-                miner={r.toString() === txData.confirmedData?.miner}
-                txFrom={r.toString() === txData.from}
-                txTo={r.toString() === txData.to}
-              />
-            </AddressHighlighter>
-            <Copy value={r.toString()} />
-          </div>
-        ) : paramType.type === "bool" ? (
-          <span className={`${r ? "text-green-700" : "text-red-700"}`}>
-            {r.toString()}
-          </span>
-        ) : paramType.type === "bytes" ? (
-          <span>
-            {r.toString()}{" "}
-            <span className="font-sans text-xs text-gray-400">
-              {r.toString().length / 2 - 1}{" "}
-              {r.toString().length / 2 - 1 === 1 ? "byte" : "bytes"}
+    <>
+      <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 text-gray-500">{paramType.type}</td>
+        <td className="col-span-8 pr-1 font-code break-all">
+          {paramType.baseType === "address" ? (
+            <div className="flex items-baseline space-x-2 -ml-1 mr-3">
+              <AddressHighlighter address={r.toString()}>
+                <DecoratedAddressLink
+                  address={r.toString()}
+                  miner={r.toString() === txData.confirmedData?.miner}
+                  txFrom={r.toString() === txData.from}
+                  txTo={r.toString() === txData.to}
+                />
+              </AddressHighlighter>
+              <Copy value={r.toString()} />
+            </div>
+          ) : paramType.baseType === "bool" ? (
+            <span className={`${r ? "text-green-700" : "text-red-700"}`}>
+              {r.toString()}
             </span>
-          </span>
-        ) : (
-          r.toString()
-        )}
-      </td>
-    </tr>
+          ) : paramType.baseType === "bytes" ? (
+            <span>
+              {r.toString()}{" "}
+              <span className="font-sans text-xs text-gray-400">
+                {r.toString().length / 2 - 1}{" "}
+                {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}
+          />
+        ))}
+    </>
   );
 };