Add semantic highlight to address input/log params

src/transaction/DecodedInput.tsx

@@ -1,12 +1,17 @@
 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> = ({ txDesc }) => (
+const DecodedInput: React.FC<DecodedInputProps> = ({ txData, txDesc }) => (
-  <table className="border rounded">
+  <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">
@@ -27,7 +32,21 @@ const DecodedInput: React.FC<DecodedInputProps> = ({ txDesc }) => (
             {txDesc.functionFragment.inputs[i].type}
           </td>
           <td className="col-span-8 pr-1 font-code break-all">
-            {r.toString()}
+            {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>
       ))}

src/transaction/DecodedLog.tsx

@@ -1,12 +1,17 @@
 import React from "react";
 import { LogDescription } from "@ethersproject/abi";
+import AddressHighlighter from "../components/AddressHighlighter";
+import DecoratedAddressLink from "../components/DecoratedAddressLink";
+import Copy from "../components/Copy";
+import { TransactionData } from "../types";
 
 type DecodedLogProps = {
+  txData: TransactionData;
   logDesc: LogDescription;
 };
 
-const DecodedLog: React.FC<DecodedLogProps> = ({ logDesc }) => (
+const DecodedLog: React.FC<DecodedLogProps> = ({ txData, logDesc }) => (
-  <table className="border rounded">
+  <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">
@@ -25,7 +30,21 @@ const DecodedLog: React.FC<DecodedLogProps> = ({ logDesc }) => (
           </td>
           <td className="col-span-1">{logDesc.eventFragment.inputs[i].type}</td>
           <td className="col-span-8 pr-1 font-code break-all">
-            {r.toString()}
+            {logDesc.eventFragment.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>
       ))}

src/transaction/Details.tsx

@@ -327,7 +327,7 @@ const Details: React.FC<DetailsProps> = ({
               ) : txDesc === null ? (
                 <>No decoded data</>
               ) : (
-                <DecodedInput txDesc={txDesc} />
+                <DecodedInput txData={txData} txDesc={txDesc} />
               )}
             </Tab.Panel>
             <Tab.Panel>

src/transaction/LogEntry.tsx

@@ -53,7 +53,7 @@ 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 logDesc={logDesc} />
+                    <DecodedLog txData={txData} logDesc={logDesc} />
                   </div>
                 </div>
               </>