Refactor and extract common component

src/transaction/DecodedInput.tsx

@@ -1,57 +0,0 @@
-import React from "react";
-import { TransactionDescription } from "@ethersproject/abi";
-import AddressHighlighter from "../components/AddressHighlighter";
-import DecoratedAddressLink from "../components/DecoratedAddressLink";
-import Copy from "../components/Copy";
-import { TransactionData } from "../types";
-
-type DecodedInputProps = {
-  txData: TransactionData;
-  txDesc: TransactionDescription;
-};
-
-const DecodedInput: React.FC<DecodedInputProps> = ({ txData, txDesc }) => (
-  <table className="border rounded w-full">
-    <thead>
-      <tr className="grid grid-cols-12 text-left gap-x-2 py-2 bg-gray-100">
-        <th className="col-span-3 pl-1">
-          param <span className="text-gray-400 text-xs">(index)</span>
-        </th>
-        <th className="col-span-1">type</th>
-        <th className="col-span-8 pr-1">value</th>
-      </tr>
-    </thead>
-    <tbody className="divide-y">
-      {txDesc.args.map((r, i) => (
-        <tr key={i} className="grid grid-cols-12 gap-x-2 py-2">
-          <td className="col-span-3 pl-1">
-            {txDesc.functionFragment.inputs[i].name}{" "}
-            <span className="text-gray-400 text-xs">({i})</span>
-          </td>
-          <td className="col-span-1">
-            {txDesc.functionFragment.inputs[i].type}
-          </td>
-          <td className="col-span-8 pr-1 font-code break-all">
-            {txDesc.functionFragment.inputs[i].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>
-            ) : (
-              r.toString()
-            )}
-          </td>
-        </tr>
-      ))}
-    </tbody>
-  </table>
-);
-
-export default React.memo(DecodedInput);

src/transaction/DecodedParamsTable.tsx

@@ -1,16 +1,21 @@
 import React from "react";
-import { LogDescription } from "@ethersproject/abi";
+import { LogDescription, ParamType, Result } from "@ethersproject/abi";
 import AddressHighlighter from "../components/AddressHighlighter";
 import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import Copy from "../components/Copy";
 import { TransactionData } from "../types";
 
-type DecodedLogProps = {
+type DecodedParamsTableProps = {
+  args: Result;
+  paramTypes: ParamType[];
   txData: TransactionData;
-  logDesc: LogDescription;
 };
 
-const DecodedLog: React.FC<DecodedLogProps> = ({ txData, logDesc }) => (
+const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
+  args,
+  paramTypes,
+  txData,
+}) => (
   <table className="border rounded w-full">
     <thead>
       <tr className="grid grid-cols-12 text-left gap-x-2 py-2 bg-gray-100">
@@ -22,15 +27,15 @@ const DecodedLog: React.FC<DecodedLogProps> = ({ txData, logDesc }) => (
       </tr>
     </thead>
     <tbody className="divide-y">
-      {logDesc.args.map((r, i) => (
+      {args.map((r, i) => (
         <tr key={i} className="grid grid-cols-12 gap-x-2 py-2">
           <td className="col-span-3 pl-1">
-            {logDesc.eventFragment.inputs[i].name}{" "}
+            {paramTypes[i].name}{" "}
             <span className="text-gray-400 text-xs">({i})</span>
           </td>
-          <td className="col-span-1">{logDesc.eventFragment.inputs[i].type}</td>
+          <td className="col-span-1">{paramTypes[i].type}</td>
           <td className="col-span-8 pr-1 font-code break-all">
-            {logDesc.eventFragment.inputs[i].type === "address" ? (
+            {paramTypes[i].type === "address" ? (
               <div className="flex items-baseline space-x-2 -ml-1 mr-3">
                 <AddressHighlighter address={r.toString()}>
                   <DecoratedAddressLink
@@ -52,4 +57,4 @@ const DecodedLog: React.FC<DecodedLogProps> = ({ txData, logDesc }) => (
   </table>
 );
 
-export default React.memo(DecodedLog);
+export default React.memo(DecodedParamsTable);

src/transaction/Details.tsx

@@ -31,7 +31,7 @@ import ExternalLink from "../components/ExternalLink";
 import RelativePosition from "../components/RelativePosition";
 import PercentagePosition from "../components/PercentagePosition";
 import ModeTab from "../components/ModeTab";
-import DecodedInput from "./DecodedInput";
+import DecodedParamsTable from "./DecodedParamsTable";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -327,7 +327,11 @@ const Details: React.FC<DetailsProps> = ({
               ) : txDesc === null ? (
                 <>No decoded data</>
               ) : (
-                <DecodedInput txData={txData} txDesc={txDesc} />
+                <DecodedParamsTable
+                  args={txDesc.args}
+                  paramTypes={txDesc.functionFragment.inputs}
+                  txData={txData}
+                />
               )}
             </Tab.Panel>
             <Tab.Panel>

src/transaction/LogEntry.tsx

@@ -4,7 +4,7 @@ import { LogDescription } from "@ethersproject/abi";
 import { Tab } from "@headlessui/react";
 import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import ModeTab from "../components/ModeTab";
-import DecodedLog from "./DecodedLog";
+import DecodedParamsTable from "./DecodedParamsTable";
 import DecodedLogSignature from "./DecodedLogSignature";
 import { TransactionData } from "../types";
 
@@ -53,7 +53,11 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
                 <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
                   <div className="text-right">Name</div>
                   <div className="flex space-x-2 items-center col-span-11">
-                    <DecodedLog txData={txData} logDesc={logDesc} />
+                    <DecodedParamsTable
+                      args={logDesc.args}
+                      paramTypes={logDesc.eventFragment.inputs}
+                      txData={txData}
+                    />
                   </div>
                 </div>
               </>