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,8 +21,7 @@ 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">
@@ -44,31 +43,12 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
       <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>
+          <AddressDecoder r={r} txData={txData} />
         ) : paramType.baseType === "bool" ? (
-            <span className={`${r ? "text-green-700" : "text-red-700"}`}>
-              {r.toString()}
-            </span>
+          <BooleanDecoder r={r} />
         ) : 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" ? (
+          <BytesDecoder r={r} />
+        ) : paramType.baseType === "tuple" || paramType.baseType === "array" ? (
           <></>
         ) : (
           r.toString()
@@ -98,6 +78,5 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
       ))}
   </>
 );
-};
 
 export default React.memo(DecodedParamRow);