Extract decoders

src/transaction/decoder/AddressDecoder.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import AddressHighlighter from "../../components/AddressHighlighter";
+import DecoratedAddressLink from "../../components/DecoratedAddressLink";
+import Copy from "../../components/Copy";
+import { TransactionData } from "../../types";
+
+type AddressDecoderProps = {
+  r: any;
+  txData: TransactionData;
+};
+
+const AddressDecoder: React.FC<AddressDecoderProps> = ({ r, txData }) => (
+  <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>
+);
+
+export default React.memo(AddressDecoder);

src/transaction/decoder/BooleanDecoder.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+
+type BooleanDecoderProps = {
+  r: any;
+};
+
+const BooleanDecoder: React.FC<BooleanDecoderProps> = ({ r }) => (
+  <span className={`${r ? "text-green-700" : "text-red-700"}`}>
+    {r.toString()}
+  </span>
+);
+
+export default React.memo(BooleanDecoder);

src/transaction/decoder/BytesDecoder.tsx

@@ -0,0 +1,17 @@
+import React from "react";
+
+type BytesDecoderProps = {
+  r: any;
+};
+
+const BytesDecoder: React.FC<BytesDecoderProps> = ({ r }) => (
+  <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>
+);
+
+export default React.memo(BytesDecoder);

src/transaction/decoder/DecodedParamRow.tsx

@@ -1,8 +1,8 @@
 import React, { ReactNode } from "react";
 import { ParamType } from "@ethersproject/abi";
-import AddressHighlighter from "../../components/AddressHighlighter";
-import DecoratedAddressLink from "../../components/DecoratedAddressLink";
-import Copy from "../../components/Copy";
+import AddressDecoder from "./AddressDecoder";
+import BooleanDecoder from "./BooleanDecoder";
+import BytesDecoder from "./BytesDecoder";
 import { TransactionData } from "../../types";
 
 type DecodedParamRowProps = {
@@ -21,83 +21,62 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
   paramType,
   txData,
   arrayElem,
-}) => {
-  return (
-    <>
-      <tr className="grid grid-cols-12 gap-x-2 py-2 hover:bg-gray-100">
-        <td className="col-span-3 pl-1">
-          {prefix && <span className="text-gray-300">{prefix}</span>}
-          {arrayElem !== undefined ? (
-            <span className="text-gray-400">
-              {" "}
-              [<span className="text-black">{arrayElem}</span>]
-            </span>
-          ) : (
-            <>
-              {paramType.name ?? <span className="italic">param_{i}</span>}{" "}
-              {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>
-          ) : 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" ||
-            paramType.baseType === "array" ? (
-            <></>
-          ) : (
-            r.toString()
-          )}
-        </td>
-      </tr>
-      {paramType.baseType === "tuple" &&
-        r.map((e: any, idx: number) => (
-          <DecodedParamRow
-            key={idx}
-            prefix={paramType.name + "."}
-            r={e}
-            paramType={paramType.components[idx]}
-            txData={txData}
-          />
-        ))}
-      {paramType.baseType === "array" &&
-        r.map((e: any, idx: number) => (
-          <DecodedParamRow
-            key={idx}
-            prefix={paramType.name ?? <span className="italic">param_{i}</span>}
-            r={e}
-            paramType={paramType.arrayChildren}
-            txData={txData}
-            arrayElem={idx}
-          />
-        ))}
-    </>
-  );
-};
+}) => (
+  <>
+    <tr className="grid grid-cols-12 gap-x-2 py-2 hover:bg-gray-100">
+      <td className="col-span-3 pl-1">
+        {prefix && <span className="text-gray-300">{prefix}</span>}
+        {arrayElem !== undefined ? (
+          <span className="text-gray-400">
+            {" "}
+            [<span className="text-black">{arrayElem}</span>]
+          </span>
+        ) : (
+          <>
+            {paramType.name ?? <span className="italic">param_{i}</span>}{" "}
+            {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" ? (
+          <AddressDecoder r={r} txData={txData} />
+        ) : paramType.baseType === "bool" ? (
+          <BooleanDecoder r={r} />
+        ) : paramType.baseType === "bytes" ? (
+          <BytesDecoder r={r} />
+        ) : paramType.baseType === "tuple" || paramType.baseType === "array" ? (
+          <></>
+        ) : (
+          r.toString()
+        )}
+      </td>
+    </tr>
+    {paramType.baseType === "tuple" &&
+      r.map((e: any, idx: number) => (
+        <DecodedParamRow
+          key={idx}
+          prefix={paramType.name + "."}
+          r={e}
+          paramType={paramType.components[idx]}
+          txData={txData}
+        />
+      ))}
+    {paramType.baseType === "array" &&
+      r.map((e: any, idx: number) => (
+        <DecodedParamRow
+          key={idx}
+          prefix={paramType.name ?? <span className="italic">param_{i}</span>}
+          r={e}
+          paramType={paramType.arrayChildren}
+          txData={txData}
+          arrayElem={idx}
+        />
+      ))}
+  </>
+);
 
 export default React.memo(DecodedParamRow);