From 9f818d36b2efbfc001de7611cda06138da52bc62 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 15 Sep 2021 14:43:36 -0300
Subject: [PATCH 01/29] First working prototype

---
 src/Transaction.tsx         | 10 ++++++++++
 src/transaction/Details.tsx | 23 +++++++++++++++++++++++
 src/useSourcify.ts          | 31 ++++++++++++++++++++++++++++++-
 3 files changed, 63 insertions(+), 1 deletion(-)

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index e204633..1857f72 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -11,6 +11,8 @@ import { RuntimeContext } from "./useRuntime";
 import { SelectionContext, useSelection } from "./useSelection";
 import { useInternalOperations, useTxData } from "./useErigonHooks";
 import { useETHUSDOracle } from "./usePriceOracle";
+import { useSourcify, useTransactionDescription } from "./useSourcify";
+import { SourcifySource } from "./url";
 
 type TransactionParams = {
   txhash: string;
@@ -44,6 +46,13 @@ const Transaction: React.FC = () => {
     txData?.confirmedData?.blockNumber
   );
 
+  const metadata = useSourcify(
+    txData?.to,
+    provider?.network.chainId,
+    SourcifySource.CUSTOM_SNAPSHOT_SERVER // TODO: use dynamic selector
+  );
+  const txDesc = useTransactionDescription(metadata, txData);
+
   return (
     <StandardFrame>
       <StandardSubtitle>Transaction Details</StandardSubtitle>
@@ -71,6 +80,7 @@ const Transaction: React.FC = () => {
             <Route path="/tx/:txhash/" exact>
               <Details
                 txData={txData}
+                txDesc={txDesc}
                 internalOps={internalOps}
                 sendsEthToMiner={sendsEthToMiner}
                 ethUSDPrice={blockETHUSDPrice}
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index e5ba19a..d6cf61c 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -1,4 +1,5 @@
 import React, { useMemo, useState } from "react";
+import { TransactionDescription } from "@ethersproject/abi";
 import { BigNumber } from "@ethersproject/bignumber";
 import { toUtf8String } from "@ethersproject/strings";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
@@ -31,6 +32,7 @@ import PercentagePosition from "../components/PercentagePosition";
 
 type DetailsProps = {
   txData: TransactionData;
+  txDesc: TransactionDescription | null | undefined;
   internalOps?: InternalOperation[];
   sendsEthToMiner: boolean;
   ethUSDPrice: BigNumber | undefined;
@@ -38,6 +40,7 @@ type DetailsProps = {
 
 const Details: React.FC<DetailsProps> = ({
   txData,
+  txDesc,
   internalOps,
   sendsEthToMiner,
   ethUSDPrice,
@@ -333,6 +336,26 @@ const Details: React.FC<DetailsProps> = ({
             value={inputMode === 0 ? txData.data : utfInput}
             readOnly
           />
+          {txDesc && (
+            <table>
+              <thead>
+                <th>#</th>
+                <th>name</th>
+                <th>type</th>
+                <th>value</th>
+              </thead>
+              <tbody>
+                {txDesc.args.map((r, i) => (
+                  <tr key={i}>
+                    <td>{i}</td>
+                    <td>{txDesc.functionFragment.inputs[i].name}</td>
+                    <td>{txDesc.functionFragment.inputs[i].type}</td>
+                    <td>{r}</td>
+                  </tr>
+                ))}
+              </tbody>
+            </table>
+          )}
         </div>
       </InfoRow>
     </ContentFrame>
diff --git a/src/useSourcify.ts b/src/useSourcify.ts
index bab8423..398953a 100644
--- a/src/useSourcify.ts
+++ b/src/useSourcify.ts
@@ -1,4 +1,6 @@
-import { useState, useEffect } from "react";
+import { useState, useEffect, useMemo } from "react";
+import { Interface } from "@ethersproject/abi";
+import { TransactionData } from "./types";
 import { sourcifyMetadata, SourcifySource, sourcifySourceFile } from "./url";
 
 export type Metadata = {
@@ -119,3 +121,30 @@ export const useContract = (
 
   return content;
 };
+
+export const useTransactionDescription = (
+  metadata: Metadata | null | undefined,
+  txData: TransactionData | null | undefined
+) => {
+  const txDesc = useMemo(() => {
+    if (!metadata || !txData) {
+      return undefined;
+    }
+
+    const abi = metadata.output.abi;
+    const intf = new Interface(abi as any);
+    console.log(intf);
+    return intf.parseTransaction({
+      data: txData.data,
+      value: txData.value,
+    });
+  }, [metadata, txData]);
+
+  console.log(metadata);
+  console.log(txDesc);
+  if (txDesc?.functionFragment) {
+    console.log(txDesc.functionFragment.inputs);
+    console.log(txDesc.args.toString());
+  }
+  return txDesc;
+};

From f02258b25d3618630005817b03494920a362dbd6 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 15 Sep 2021 15:34:49 -0300
Subject: [PATCH 02/29] Migrate code to headless-ui

---
 src/transaction/Details.tsx | 110 ++++++++++++++++++++++--------------
 1 file changed, 67 insertions(+), 43 deletions(-)

diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index d6cf61c..cca0ea1 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -1,7 +1,8 @@
-import React, { useMemo, useState } from "react";
+import React, { useMemo } from "react";
 import { TransactionDescription } from "@ethersproject/abi";
 import { BigNumber } from "@ethersproject/bignumber";
 import { toUtf8String } from "@ethersproject/strings";
+import { Tab } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCheckCircle } from "@fortawesome/free-solid-svg-icons/faCheckCircle";
 import { faCube } from "@fortawesome/free-solid-svg-icons/faCube";
@@ -48,7 +49,6 @@ const Details: React.FC<DetailsProps> = ({
   const hasEIP1559 =
     txData.confirmedData?.blockBaseFeePerGas !== undefined &&
     txData.confirmedData?.blockBaseFeePerGas !== null;
-  const [inputMode, setInputMode] = useState<number>(0);
 
   const utfInput = useMemo(() => {
     try {
@@ -312,51 +312,75 @@ const Details: React.FC<DetailsProps> = ({
         </>
       )}
       <InfoRow title="Input Data">
-        <div className="space-y-1">
-          <div className="flex space-x-1">
-            <button
-              className={`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
-                inputMode === 0 ? "border-blue-300" : ""
-              }`}
-              onClick={() => setInputMode(0)}
+        <Tab.Group>
+          <Tab.List className="flex space-x-1 mb-1">
+            <Tab
+              className={({ selected }) =>
+                `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
+                  selected ? "border-blue-300" : ""
+                }`
+              }
+            >
+              Decoded
+            </Tab>
+            <Tab
+              className={({ selected }) =>
+                `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
+                  selected ? "border-blue-300" : ""
+                }`
+              }
             >
               Raw
-            </button>
-            <button
-              className={`border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
-                inputMode === 1 ? "border-blue-300" : ""
-              }`}
-              onClick={() => setInputMode(1)}
+            </Tab>
+            <Tab
+              className={({ selected }) =>
+                `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
+                  selected ? "border-blue-300" : ""
+                }`
+              }
             >
               UTF-8
-            </button>
-          </div>
-          <textarea
-            className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
-            value={inputMode === 0 ? txData.data : utfInput}
-            readOnly
-          />
-          {txDesc && (
-            <table>
-              <thead>
-                <th>#</th>
-                <th>name</th>
-                <th>type</th>
-                <th>value</th>
-              </thead>
-              <tbody>
-                {txDesc.args.map((r, i) => (
-                  <tr key={i}>
-                    <td>{i}</td>
-                    <td>{txDesc.functionFragment.inputs[i].name}</td>
-                    <td>{txDesc.functionFragment.inputs[i].type}</td>
-                    <td>{r}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-          )}
-        </div>
+            </Tab>
+          </Tab.List>
+          <Tab.Panels>
+            <Tab.Panel>
+              {txDesc && (
+                <table>
+                  <thead>
+                    <th>#</th>
+                    <th>name</th>
+                    <th>type</th>
+                    <th>value</th>
+                  </thead>
+                  <tbody>
+                    {txDesc.args.map((r, i) => (
+                      <tr key={i}>
+                        <td>{i}</td>
+                        <td>{txDesc.functionFragment.inputs[i].name}</td>
+                        <td>{txDesc.functionFragment.inputs[i].type}</td>
+                        <td>{r}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </Tab.Panel>
+            <Tab.Panel>
+              <textarea
+                className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
+                value={txData.data}
+                readOnly
+              />
+            </Tab.Panel>
+            <Tab.Panel>
+              <textarea
+                className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
+                value={utfInput}
+                readOnly
+              />
+            </Tab.Panel>
+          </Tab.Panels>
+        </Tab.Group>
       </InfoRow>
     </ContentFrame>
   );

From 706fb425f5d965095a9bf98374d5da8ad71eeeaa Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 15 Sep 2021 15:58:37 -0300
Subject: [PATCH 03/29] Initial styling

---
 src/transaction/DecodedInput.tsx | 34 ++++++++++++++++++++++++++++++++
 src/transaction/Details.tsx      | 24 ++--------------------
 2 files changed, 36 insertions(+), 22 deletions(-)
 create mode 100644 src/transaction/DecodedInput.tsx

diff --git a/src/transaction/DecodedInput.tsx b/src/transaction/DecodedInput.tsx
new file mode 100644
index 0000000..f41406b
--- /dev/null
+++ b/src/transaction/DecodedInput.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { TransactionDescription } from "@ethersproject/abi";
+
+type DecodedInputProps = {
+  txDesc: TransactionDescription;
+};
+
+const DecodedInput: React.FC<DecodedInputProps> = ({ txDesc }) => (
+  <table className="border rounded">
+    <thead className="grid grid-cols-12 text-left gap-x-1 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>
+    </thead>
+    <tbody className="divide-y">
+      {txDesc.args.map((r, i) => (
+        <tr key={i} className="grid grid-cols-12 gap-x-1 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">{r}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);
+
+export default React.memo(DecodedInput);
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index cca0ea1..f2cebce 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -30,6 +30,7 @@ import PercentageBar from "../components/PercentageBar";
 import ExternalLink from "../components/ExternalLink";
 import RelativePosition from "../components/RelativePosition";
 import PercentagePosition from "../components/PercentagePosition";
+import DecodedInput from "./DecodedInput";
 
 type DetailsProps = {
   txData: TransactionData;
@@ -343,28 +344,7 @@ const Details: React.FC<DetailsProps> = ({
             </Tab>
           </Tab.List>
           <Tab.Panels>
-            <Tab.Panel>
-              {txDesc && (
-                <table>
-                  <thead>
-                    <th>#</th>
-                    <th>name</th>
-                    <th>type</th>
-                    <th>value</th>
-                  </thead>
-                  <tbody>
-                    {txDesc.args.map((r, i) => (
-                      <tr key={i}>
-                        <td>{i}</td>
-                        <td>{txDesc.functionFragment.inputs[i].name}</td>
-                        <td>{txDesc.functionFragment.inputs[i].type}</td>
-                        <td>{r}</td>
-                      </tr>
-                    ))}
-                  </tbody>
-                </table>
-              )}
-            </Tab.Panel>
+            <Tab.Panel>{txDesc && <DecodedInput txDesc={txDesc} />}</Tab.Panel>
             <Tab.Panel>
               <textarea
                 className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"

From fa26567d0c11f3c6da1b925eb3dd2e4ae9e955f9 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 15 Sep 2021 16:12:15 -0300
Subject: [PATCH 04/29] Remove debug code

---
 src/useSourcify.ts | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/src/useSourcify.ts b/src/useSourcify.ts
index 398953a..61022c7 100644
--- a/src/useSourcify.ts
+++ b/src/useSourcify.ts
@@ -140,11 +140,5 @@ export const useTransactionDescription = (
     });
   }, [metadata, txData]);
 
-  console.log(metadata);
-  console.log(txDesc);
-  if (txDesc?.functionFragment) {
-    console.log(txDesc.functionFragment.inputs);
-    console.log(txDesc.args.toString());
-  }
   return txDesc;
 };

From 2f19ab3ab3facf0cf7d9653f439e868062caed26 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Fri, 17 Sep 2021 19:42:19 -0300
Subject: [PATCH 05/29] Initial implementation of log decoding

---
 src/Transaction.tsx                     |  2 +-
 src/transaction/DecodedInput.tsx        | 14 ++--
 src/transaction/DecodedLog.tsx          | 34 ++++++++++
 src/transaction/DecodedLogSignature.tsx | 23 +++++++
 src/transaction/LogEntry.tsx            | 75 +++++++++++++++++++++
 src/transaction/Logs.tsx                | 90 ++++++++++---------------
 src/useSourcify.ts                      |  1 -
 7 files changed, 177 insertions(+), 62 deletions(-)
 create mode 100644 src/transaction/DecodedLog.tsx
 create mode 100644 src/transaction/DecodedLogSignature.tsx
 create mode 100644 src/transaction/LogEntry.tsx

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 1857f72..2fc69a2 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -87,7 +87,7 @@ const Transaction: React.FC = () => {
               />
             </Route>
             <Route path="/tx/:txhash/logs/" exact>
-              <Logs txData={txData} />
+              <Logs txData={txData} metadata={metadata} />
             </Route>
           </Switch>
         </SelectionContext.Provider>
diff --git a/src/transaction/DecodedInput.tsx b/src/transaction/DecodedInput.tsx
index f41406b..1e4bcd4 100644
--- a/src/transaction/DecodedInput.tsx
+++ b/src/transaction/DecodedInput.tsx
@@ -7,12 +7,14 @@ type DecodedInputProps = {
 
 const DecodedInput: React.FC<DecodedInputProps> = ({ txDesc }) => (
   <table className="border rounded">
-    <thead className="grid grid-cols-12 text-left gap-x-1 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>
+    <thead>
+      <tr className="grid grid-cols-12 text-left gap-x-1 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) => (
diff --git a/src/transaction/DecodedLog.tsx b/src/transaction/DecodedLog.tsx
new file mode 100644
index 0000000..a55da73
--- /dev/null
+++ b/src/transaction/DecodedLog.tsx
@@ -0,0 +1,34 @@
+import React from "react";
+import { LogDescription } from "@ethersproject/abi";
+
+type DecodedLogProps = {
+  logDesc: LogDescription;
+};
+
+const DecodedLog: React.FC<DecodedLogProps> = ({ logDesc }) => (
+  <table className="border rounded">
+    <thead>
+      <tr className="grid grid-cols-12 text-left gap-x-1 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">
+      {logDesc.args.map((r, i) => (
+        <tr key={i} className="grid grid-cols-12 gap-x-1 py-2">
+          <td className="col-span-3 pl-1">
+            {logDesc.eventFragment.inputs[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-8 pr-1 font-code break-all">{r}</td>
+        </tr>
+      ))}
+    </tbody>
+  </table>
+);
+
+export default React.memo(DecodedLog);
diff --git a/src/transaction/DecodedLogSignature.tsx b/src/transaction/DecodedLogSignature.tsx
new file mode 100644
index 0000000..daceeee
--- /dev/null
+++ b/src/transaction/DecodedLogSignature.tsx
@@ -0,0 +1,23 @@
+import React from "react";
+import { EventFragment } from "@ethersproject/abi";
+
+type DecodedLogSignatureProps = {
+  event: EventFragment;
+};
+
+const DecodedLogSignature: React.FC<DecodedLogSignatureProps> = ({ event }) => {
+  return (
+    <span>
+      <span className="text-blue-900 font-bold">{event.name}</span>(
+      {event.inputs.map((input, i) => (
+        <>
+          {i > 0 ? ", " : ""}
+          <span>{input.format("full")}</span>
+        </>
+      ))}
+      ){event.anonymous ? " anonymous" : ""}
+    </span>
+  );
+};
+
+export default React.memo(DecodedLogSignature);
diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx
new file mode 100644
index 0000000..a41f070
--- /dev/null
+++ b/src/transaction/LogEntry.tsx
@@ -0,0 +1,75 @@
+import React from "react";
+import { Log } from "@ethersproject/abstract-provider";
+import { LogDescription } from "@ethersproject/abi";
+import DecoratedAddressLink from "../components/DecoratedAddressLink";
+import DecodedLog from "./DecodedLog";
+import DecodedLogSignature from "./DecodedLogSignature";
+import { TransactionData } from "../types";
+
+type LogEntryProps = {
+  txData: TransactionData;
+  log: Log;
+  logDesc: LogDescription | null | undefined;
+};
+
+const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
+  <div className="flex space-x-10 py-5">
+    <div>
+      <span className="rounded-full w-12 h-12 flex items-center justify-center bg-green-50 text-green-500">
+        {log.logIndex}
+      </span>
+    </div>
+    <div className="w-full space-y-2">
+      <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+        <div className="font-bold text-right">Address</div>
+        <div className="col-span-11 mr-auto">
+          <DecoratedAddressLink
+            address={log.address}
+            miner={log.address === txData.confirmedData?.miner}
+            txFrom={log.address === txData.from}
+            txTo={log.address === txData.to}
+          />
+        </div>
+      </div>
+      {logDesc && (
+        <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+          <div className="text-right">Signature</div>
+          <div className="flex space-x-2 items-center col-span-11 font-mono">
+            <DecodedLogSignature event={logDesc.eventFragment} />
+          </div>
+        </div>
+      )}
+      {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} />
+          </div>
+        </div>
+      )}
+      {log.topics.map((t, i) => (
+        <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm" key={i}>
+          <div className="text-right">{i === 0 && "Topics"}</div>
+          <div className="flex space-x-2 items-center col-span-11 font-mono">
+            <span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs">
+              {i}
+            </span>
+            <span>{t}</span>
+          </div>
+        </div>
+      ))}
+      <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+        <div className="text-right pt-2">Data</div>
+        <div className="col-span-11">
+          <textarea
+            className="w-full h-40 bg-gray-50 font-mono focus:outline-none border rounded p-2"
+            value={log.data}
+            readOnly
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+);
+
+export default React.memo(LogEntry);
diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index e57dc6a..a727628 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -1,63 +1,45 @@
-import React from "react";
+import React, { useMemo } from "react";
+import { Interface } from "@ethersproject/abi";
 import ContentFrame from "../ContentFrame";
-import DecoratedAddressLink from "../components/DecoratedAddressLink";
+import LogEntry from "./LogEntry";
 import { TransactionData } from "../types";
+import { Metadata } from "../useSourcify";
 
 type LogsProps = {
   txData: TransactionData;
+  metadata: Metadata | null | undefined;
 };
 
-const Logs: React.FC<LogsProps> = ({ txData }) => (
-  <ContentFrame tabs>
-    <div className="text-sm py-4">Transaction Receipt Event Logs</div>
-    {txData.confirmedData &&
-      txData.confirmedData.logs.map((l, i) => (
-        <div className="flex space-x-10 py-5" key={i}>
-          <div>
-            <span className="rounded-full w-12 h-12 flex items-center justify-center bg-green-50 text-green-500">
-              {l.logIndex}
-            </span>
-          </div>
-          <div className="w-full space-y-2">
-            <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-              <div className="font-bold text-right">Address</div>
-              <div className="col-span-11 mr-auto">
-                <DecoratedAddressLink
-                  address={l.address}
-                  miner={l.address === txData.confirmedData?.miner}
-                  txFrom={l.address === txData.from}
-                  txTo={l.address === txData.to}
-                />
-              </div>
-            </div>
-            {l.topics.map((t, i) => (
-              <div
-                className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"
-                key={i}
-              >
-                <div className="text-right">{i === 0 && "Topics"}</div>
-                <div className="flex space-x-2 items-center col-span-11 font-mono">
-                  <span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs">
-                    {i}
-                  </span>
-                  <span>{t}</span>
-                </div>
-              </div>
-            ))}
-            <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-              <div className="text-right pt-2">Data</div>
-              <div className="col-span-11">
-                <textarea
-                  className="w-full h-20 bg-gray-50 font-mono focus:outline-none border rounded p-2"
-                  value={l.data}
-                  readOnly
-                />
-              </div>
-            </div>
-          </div>
-        </div>
-      ))}
-  </ContentFrame>
-);
+const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
+  const logDesc = useMemo(() => {
+    if (!metadata || !txData) {
+      return undefined;
+    }
+
+    const abi = metadata.output.abi;
+    const intf = new Interface(abi as any);
+    return txData.confirmedData?.logs.map((l) =>
+      intf.parseLog({
+        topics: l.topics,
+        data: l.data,
+      })
+    );
+  }, [metadata, txData]);
+
+  return (
+    <ContentFrame tabs>
+      <div className="text-sm py-4">Transaction Receipt Event Logs</div>
+      {txData.confirmedData &&
+        txData.confirmedData.logs.map((l, i) => (
+          <LogEntry
+            key={i}
+            txData={txData}
+            log={l}
+            logDesc={logDesc && logDesc[i]}
+          />
+        ))}
+    </ContentFrame>
+  );
+};
 
 export default React.memo(Logs);
diff --git a/src/useSourcify.ts b/src/useSourcify.ts
index 61022c7..8c1d52f 100644
--- a/src/useSourcify.ts
+++ b/src/useSourcify.ts
@@ -133,7 +133,6 @@ export const useTransactionDescription = (
 
     const abi = metadata.output.abi;
     const intf = new Interface(abi as any);
-    console.log(intf);
     return intf.parseTransaction({
       data: txData.data,
       value: txData.value,

From b5c69a2d3f4f890786a4f3467c3a5f2223132c5d Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 15:08:44 -0300
Subject: [PATCH 06/29] Extract ModeTaab component

---
 src/components/ModeTab.tsx  | 16 ++++++++++++++++
 src/transaction/Details.tsx | 31 ++++---------------------------
 2 files changed, 20 insertions(+), 27 deletions(-)
 create mode 100644 src/components/ModeTab.tsx

diff --git a/src/components/ModeTab.tsx b/src/components/ModeTab.tsx
new file mode 100644
index 0000000..14a33fd
--- /dev/null
+++ b/src/components/ModeTab.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Tab } from "@headlessui/react";
+
+const ModeTab: React.FC = ({ children }) => (
+  <Tab
+    className={({ selected }) =>
+      `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
+        selected ? "border-blue-300" : ""
+      }`
+    }
+  >
+    {children}
+  </Tab>
+);
+
+export default ModeTab;
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index f2cebce..9f55c3a 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -30,6 +30,7 @@ import PercentageBar from "../components/PercentageBar";
 import ExternalLink from "../components/ExternalLink";
 import RelativePosition from "../components/RelativePosition";
 import PercentagePosition from "../components/PercentagePosition";
+import ModeTab from "../components/ModeTab";
 import DecodedInput from "./DecodedInput";
 
 type DetailsProps = {
@@ -315,33 +316,9 @@ const Details: React.FC<DetailsProps> = ({
       <InfoRow title="Input Data">
         <Tab.Group>
           <Tab.List className="flex space-x-1 mb-1">
-            <Tab
-              className={({ selected }) =>
-                `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
-                  selected ? "border-blue-300" : ""
-                }`
-              }
-            >
-              Decoded
-            </Tab>
-            <Tab
-              className={({ selected }) =>
-                `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
-                  selected ? "border-blue-300" : ""
-                }`
-              }
-            >
-              Raw
-            </Tab>
-            <Tab
-              className={({ selected }) =>
-                `border rounded-lg px-2 py-1 bg-gray-100 hover:bg-gray-200 hover:shadow text-xs text-gray-500 hover:text-gray-600 ${
-                  selected ? "border-blue-300" : ""
-                }`
-              }
-            >
-              UTF-8
-            </Tab>
+            <ModeTab>Decoded</ModeTab>
+            <ModeTab>Raw</ModeTab>
+            <ModeTab>UTF-8</ModeTab>
           </Tab.List>
           <Tab.Panels>
             <Tab.Panel>{txDesc && <DecodedInput txDesc={txDesc} />}</Tab.Panel>

From 450f2e72f3c2b4a6d37c74bc6fb460495482d1f8 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 15:25:30 -0300
Subject: [PATCH 07/29] Split log display modes

---
 src/transaction/LogEntry.tsx | 93 ++++++++++++++++++++++--------------
 1 file changed, 56 insertions(+), 37 deletions(-)

diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx
index a41f070..3d8312b 100644
--- a/src/transaction/LogEntry.tsx
+++ b/src/transaction/LogEntry.tsx
@@ -1,7 +1,9 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { Log } from "@ethersproject/abstract-provider";
 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 DecodedLogSignature from "./DecodedLogSignature";
 import { TransactionData } from "../types";
@@ -31,43 +33,60 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
           />
         </div>
       </div>
-      {logDesc && (
-        <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-          <div className="text-right">Signature</div>
-          <div className="flex space-x-2 items-center col-span-11 font-mono">
-            <DecodedLogSignature event={logDesc.eventFragment} />
+      <Tab.Group>
+        <Tab.List className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+          <div className="col-start-2 col-span-11 flex space-x-1 mb-1">
+            <ModeTab>Decoded</ModeTab>
+            <ModeTab>Raw</ModeTab>
           </div>
-        </div>
-      )}
-      {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} />
-          </div>
-        </div>
-      )}
-      {log.topics.map((t, i) => (
-        <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm" key={i}>
-          <div className="text-right">{i === 0 && "Topics"}</div>
-          <div className="flex space-x-2 items-center col-span-11 font-mono">
-            <span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs">
-              {i}
-            </span>
-            <span>{t}</span>
-          </div>
-        </div>
-      ))}
-      <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-        <div className="text-right pt-2">Data</div>
-        <div className="col-span-11">
-          <textarea
-            className="w-full h-40 bg-gray-50 font-mono focus:outline-none border rounded p-2"
-            value={log.data}
-            readOnly
-          />
-        </div>
-      </div>
+        </Tab.List>
+        <Tab.Panels as={Fragment}>
+          <Tab.Panel className="space-y-2">
+            {logDesc && (
+              <>
+                <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+                  <div className="text-right">Signature</div>
+                  <div className="flex space-x-2 items-center col-span-11 font-mono">
+                    <DecodedLogSignature event={logDesc.eventFragment} />
+                  </div>
+                </div>
+                <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} />
+                  </div>
+                </div>
+              </>
+            )}
+          </Tab.Panel>
+          <Tab.Panel className="space-y-2">
+            {log.topics.map((t, i) => (
+              <div
+                className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm"
+                key={i}
+              >
+                <div className="text-right">{i === 0 && "Topics"}</div>
+                <div className="flex space-x-2 items-center col-span-11 font-mono">
+                  <span className="rounded bg-gray-100 text-gray-500 px-2 py-1 text-xs">
+                    {i}
+                  </span>
+                  <span>{t}</span>
+                </div>
+              </div>
+            ))}
+            <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+              <div className="text-right pt-2">Data</div>
+              <div className="col-span-11">
+                <textarea
+                  className="w-full h-40 bg-gray-50 font-mono focus:outline-none border rounded p-2"
+                  value={log.data}
+                  readOnly
+                />
+              </div>
+            </div>
+          </Tab.Panel>
+        </Tab.Panels>
+      </Tab.Group>
     </div>
   </div>
 );

From 4605bca7a5171b3cc1aecf11a87a81030e613c02 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 15:40:19 -0300
Subject: [PATCH 08/29] Add missing data output

---
 src/transaction/Details.tsx | 10 +++++++++-
 src/useSourcify.ts          |  3 +++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 9f55c3a..f3e5721 100644
--- a/src/transaction/Details.tsx
+++ b/src/transaction/Details.tsx
@@ -321,7 +321,15 @@ const Details: React.FC<DetailsProps> = ({
             <ModeTab>UTF-8</ModeTab>
           </Tab.List>
           <Tab.Panels>
-            <Tab.Panel>{txDesc && <DecodedInput txDesc={txDesc} />}</Tab.Panel>
+            <Tab.Panel>
+              {txDesc === undefined ? (
+                <>Waiting for data...</>
+              ) : txDesc === null ? (
+                <>No decoded data</>
+              ) : (
+                <DecodedInput txDesc={txDesc} />
+              )}
+            </Tab.Panel>
             <Tab.Panel>
               <textarea
                 className="w-full h-40 bg-gray-50 text-gray-500 font-mono focus:outline-none border rounded p-2"
diff --git a/src/useSourcify.ts b/src/useSourcify.ts
index 8c1d52f..cfac981 100644
--- a/src/useSourcify.ts
+++ b/src/useSourcify.ts
@@ -127,6 +127,9 @@ export const useTransactionDescription = (
   txData: TransactionData | null | undefined
 ) => {
   const txDesc = useMemo(() => {
+    if (metadata === null) {
+      return null;
+    }
     if (!metadata || !txData) {
       return undefined;
     }

From 97c46e383d2eef7b3673bb2b2c16560b2ed3214c Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 15:46:29 -0300
Subject: [PATCH 09/29] Fix missing key prop

---
 src/transaction/DecodedLogSignature.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/transaction/DecodedLogSignature.tsx b/src/transaction/DecodedLogSignature.tsx
index daceeee..42cfbe9 100644
--- a/src/transaction/DecodedLogSignature.tsx
+++ b/src/transaction/DecodedLogSignature.tsx
@@ -10,10 +10,10 @@ const DecodedLogSignature: React.FC<DecodedLogSignatureProps> = ({ event }) => {
     <span>
       <span className="text-blue-900 font-bold">{event.name}</span>(
       {event.inputs.map((input, i) => (
-        <>
+        <span key={i}>
           {i > 0 ? ", " : ""}
           <span>{input.format("full")}</span>
-        </>
+        </span>
       ))}
       ){event.anonymous ? " anonymous" : ""}
     </span>

From c7c9f386177b77b94c872c2ff950e6eb02f5d425 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 15:52:33 -0300
Subject: [PATCH 10/29] Fix display of bool input/event params; fix grid x
 spacing

---
 src/transaction/DecodedInput.tsx | 8 +++++---
 src/transaction/DecodedLog.tsx   | 8 +++++---
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/transaction/DecodedInput.tsx b/src/transaction/DecodedInput.tsx
index 1e4bcd4..f4c5c97 100644
--- a/src/transaction/DecodedInput.tsx
+++ b/src/transaction/DecodedInput.tsx
@@ -8,7 +8,7 @@ type DecodedInputProps = {
 const DecodedInput: React.FC<DecodedInputProps> = ({ txDesc }) => (
   <table className="border rounded">
     <thead>
-      <tr className="grid grid-cols-12 text-left gap-x-1 py-2 bg-gray-100">
+      <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>
@@ -18,7 +18,7 @@ const DecodedInput: React.FC<DecodedInputProps> = ({ txDesc }) => (
     </thead>
     <tbody className="divide-y">
       {txDesc.args.map((r, i) => (
-        <tr key={i} className="grid grid-cols-12 gap-x-1 py-2">
+        <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>
@@ -26,7 +26,9 @@ const DecodedInput: React.FC<DecodedInputProps> = ({ txDesc }) => (
           <td className="col-span-1">
             {txDesc.functionFragment.inputs[i].type}
           </td>
-          <td className="col-span-8 pr-1 font-code break-all">{r}</td>
+          <td className="col-span-8 pr-1 font-code break-all">
+            {r.toString()}
+          </td>
         </tr>
       ))}
     </tbody>
diff --git a/src/transaction/DecodedLog.tsx b/src/transaction/DecodedLog.tsx
index a55da73..9f7a0d1 100644
--- a/src/transaction/DecodedLog.tsx
+++ b/src/transaction/DecodedLog.tsx
@@ -8,7 +8,7 @@ type DecodedLogProps = {
 const DecodedLog: React.FC<DecodedLogProps> = ({ logDesc }) => (
   <table className="border rounded">
     <thead>
-      <tr className="grid grid-cols-12 text-left gap-x-1 py-2 bg-gray-100">
+      <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>
@@ -18,13 +18,15 @@ const DecodedLog: React.FC<DecodedLogProps> = ({ logDesc }) => (
     </thead>
     <tbody className="divide-y">
       {logDesc.args.map((r, i) => (
-        <tr key={i} className="grid grid-cols-12 gap-x-1 py-2">
+        <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}{" "}
             <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-8 pr-1 font-code break-all">{r}</td>
+          <td className="col-span-8 pr-1 font-code break-all">
+            {r.toString()}
+          </td>
         </tr>
       ))}
     </tbody>

From 1ac2679fadfd4937722517466fbeb51aa41150fd Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 16:10:47 -0300
Subject: [PATCH 11/29] Add semantic highlight to address input/log params

---
 src/transaction/DecodedInput.tsx | 25 ++++++++++++++++++++++---
 src/transaction/DecodedLog.tsx   | 25 ++++++++++++++++++++++---
 src/transaction/Details.tsx      |  2 +-
 src/transaction/LogEntry.tsx     |  2 +-
 4 files changed, 46 insertions(+), 8 deletions(-)

diff --git a/src/transaction/DecodedInput.tsx b/src/transaction/DecodedInput.tsx
index f4c5c97..9764c8f 100644
--- a/src/transaction/DecodedInput.tsx
+++ b/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 }) => (
-  <table className="border rounded">
+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">
@@ -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>
       ))}
diff --git a/src/transaction/DecodedLog.tsx b/src/transaction/DecodedLog.tsx
index 9f7a0d1..c4a904f 100644
--- a/src/transaction/DecodedLog.tsx
+++ b/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 }) => (
-  <table className="border rounded">
+const DecodedLog: React.FC<DecodedLogProps> = ({ txData, logDesc }) => (
+  <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>
       ))}
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index f3e5721..9328e41 100644
--- a/src/transaction/Details.tsx
+++ b/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>
diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx
index 3d8312b..7e78ff7 100644
--- a/src/transaction/LogEntry.tsx
+++ b/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>
               </>

From f662a8c72ef8ce746efdedfa5cb48d34e80b8fb0 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 17:41:00 -0300
Subject: [PATCH 12/29] Refactor and extract common component

---
 src/transaction/DecodedInput.tsx              | 57 -------------------
 ...{DecodedLog.tsx => DecodedParamsTable.tsx} | 23 +++++---
 src/transaction/Details.tsx                   |  8 ++-
 src/transaction/LogEntry.tsx                  |  8 ++-
 4 files changed, 26 insertions(+), 70 deletions(-)
 delete mode 100644 src/transaction/DecodedInput.tsx
 rename src/transaction/{DecodedLog.tsx => DecodedParamsTable.tsx} (76%)

diff --git a/src/transaction/DecodedInput.tsx b/src/transaction/DecodedInput.tsx
deleted file mode 100644
index 9764c8f..0000000
--- a/src/transaction/DecodedInput.tsx
+++ /dev/null
@@ -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);
diff --git a/src/transaction/DecodedLog.tsx b/src/transaction/DecodedParamsTable.tsx
similarity index 76%
rename from src/transaction/DecodedLog.tsx
rename to src/transaction/DecodedParamsTable.tsx
index c4a904f..cbed748 100644
--- a/src/transaction/DecodedLog.tsx
+++ b/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);
diff --git a/src/transaction/Details.tsx b/src/transaction/Details.tsx
index 9328e41..bea1587 100644
--- a/src/transaction/Details.tsx
+++ b/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>
diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx
index 7e78ff7..438cb6f 100644
--- a/src/transaction/LogEntry.tsx
+++ b/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>
               </>

From 698e2a365c6f2e3fddb9f493e9bd48dc45235d72 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 17:43:47 -0300
Subject: [PATCH 13/29] Custom colors for bool params

---
 src/transaction/DecodedParamsTable.tsx | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/transaction/DecodedParamsTable.tsx b/src/transaction/DecodedParamsTable.tsx
index cbed748..1d79347 100644
--- a/src/transaction/DecodedParamsTable.tsx
+++ b/src/transaction/DecodedParamsTable.tsx
@@ -47,6 +47,10 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
                 </AddressHighlighter>
                 <Copy value={r.toString()} />
               </div>
+            ) : paramTypes[i].type === "bool" ? (
+              <span className={`${r ? "text-green-700" : "text-red-700"}`}>
+                {r.toString()}
+              </span>
             ) : (
               r.toString()
             )}

From 101aa5a21ff6bb83bffa8a7be2ffeb23a2afaf1a Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 17:53:02 -0300
Subject: [PATCH 14/29] Custom formatting for bytes param type (no fixed size)

---
 src/transaction/DecodedParamsTable.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/transaction/DecodedParamsTable.tsx b/src/transaction/DecodedParamsTable.tsx
index 1d79347..fca7a81 100644
--- a/src/transaction/DecodedParamsTable.tsx
+++ b/src/transaction/DecodedParamsTable.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { LogDescription, ParamType, Result } from "@ethersproject/abi";
+import { ParamType, Result } from "@ethersproject/abi";
 import AddressHighlighter from "../components/AddressHighlighter";
 import DecoratedAddressLink from "../components/DecoratedAddressLink";
 import Copy from "../components/Copy";
@@ -51,6 +51,14 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
               <span className={`${r ? "text-green-700" : "text-red-700"}`}>
                 {r.toString()}
               </span>
+            ) : paramTypes[i].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"}
+                </span>
+              </span>
             ) : (
               r.toString()
             )}

From 04fdd74a949b04a9fd3c79969d395eedb1f055cf Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 17:57:39 -0300
Subject: [PATCH 15/29] Add standard address decorations to log emitter
 addresses

---
 src/transaction/LogEntry.tsx | 19 +++++++++++++------
 1 file changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx
index 438cb6f..acf6980 100644
--- a/src/transaction/LogEntry.tsx
+++ b/src/transaction/LogEntry.tsx
@@ -2,7 +2,9 @@ import React, { Fragment } from "react";
 import { Log } from "@ethersproject/abstract-provider";
 import { LogDescription } from "@ethersproject/abi";
 import { Tab } from "@headlessui/react";
+import AddressHighlighter from "../components/AddressHighlighter";
 import DecoratedAddressLink from "../components/DecoratedAddressLink";
+import Copy from "../components/Copy";
 import ModeTab from "../components/ModeTab";
 import DecodedParamsTable from "./DecodedParamsTable";
 import DecodedLogSignature from "./DecodedLogSignature";
@@ -25,12 +27,17 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
       <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
         <div className="font-bold text-right">Address</div>
         <div className="col-span-11 mr-auto">
-          <DecoratedAddressLink
-            address={log.address}
-            miner={log.address === txData.confirmedData?.miner}
-            txFrom={log.address === txData.from}
-            txTo={log.address === txData.to}
-          />
+          <div className="flex items-baseline space-x-2 -ml-1 mr-3">
+            <AddressHighlighter address={log.address}>
+              <DecoratedAddressLink
+                address={log.address}
+                miner={log.address === txData.confirmedData?.miner}
+                txFrom={log.address === txData.from}
+                txTo={log.address === txData.to}
+              />
+            </AddressHighlighter>
+            <Copy value={log.address} />
+          </div>
         </div>
       </div>
       <Tab.Group>

From 0179b40eaf3342f147374147f6c2bd8c02b86ff3 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 18:03:54 -0300
Subject: [PATCH 16/29] UI adjustments

---
 src/transaction/DecodedParamsTable.tsx | 2 +-
 src/transaction/LogEntry.tsx           | 9 ++++-----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/src/transaction/DecodedParamsTable.tsx b/src/transaction/DecodedParamsTable.tsx
index fca7a81..72c9262 100644
--- a/src/transaction/DecodedParamsTable.tsx
+++ b/src/transaction/DecodedParamsTable.tsx
@@ -20,7 +20,7 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
     <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>
+          name <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>
diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx
index acf6980..0ce96dd 100644
--- a/src/transaction/LogEntry.tsx
+++ b/src/transaction/LogEntry.tsx
@@ -42,7 +42,8 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
       </div>
       <Tab.Group>
         <Tab.List className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-          <div className="col-start-2 col-span-11 flex space-x-1 mb-1">
+          <div className="text-right">Parameters</div>
+          <div className="col-span-11 flex space-x-1 mb-1">
             <ModeTab>Decoded</ModeTab>
             <ModeTab>Raw</ModeTab>
           </div>
@@ -52,14 +53,12 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
             {logDesc && (
               <>
                 <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
-                  <div className="text-right">Signature</div>
-                  <div className="flex space-x-2 items-center col-span-11 font-mono">
+                  <div className="col-start-2 flex space-x-2 items-center col-span-11 font-mono">
                     <DecodedLogSignature event={logDesc.eventFragment} />
                   </div>
                 </div>
                 <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">
+                  <div className="col-start-2 flex space-x-2 items-center col-span-11">
                     <DecodedParamsTable
                       args={logDesc.args}
                       paramTypes={logDesc.eventFragment.inputs}

From f2d6bc54a963dce0e4a928a4a710bcccac9cdcbc Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 18:18:38 -0300
Subject: [PATCH 17/29] Extract DecodedParamRow component

---
 src/transaction/DecodedParamRow.tsx    | 63 ++++++++++++++++++++++++++
 src/transaction/DecodedParamsTable.tsx | 47 ++++---------------
 2 files changed, 71 insertions(+), 39 deletions(-)
 create mode 100644 src/transaction/DecodedParamRow.tsx

diff --git a/src/transaction/DecodedParamRow.tsx b/src/transaction/DecodedParamRow.tsx
new file mode 100644
index 0000000..3e5e2cd
--- /dev/null
+++ b/src/transaction/DecodedParamRow.tsx
@@ -0,0 +1,63 @@
+import React from "react";
+import AddressHighlighter from "../components/AddressHighlighter";
+import DecoratedAddressLink from "../components/DecoratedAddressLink";
+import Copy from "../components/Copy";
+import { ParamType } from "@ethersproject/abi";
+import { TransactionData } from "../types";
+
+type DecodedParamRowProps = {
+  i?: number | undefined;
+  r: any;
+  paramType: ParamType;
+  txData: TransactionData;
+};
+
+const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
+  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"}
+            </span>
+          </span>
+        ) : (
+          r.toString()
+        )}
+      </td>
+    </tr>
+  );
+};
+
+export default React.memo(DecodedParamRow);
diff --git a/src/transaction/DecodedParamsTable.tsx b/src/transaction/DecodedParamsTable.tsx
index 72c9262..ff439d8 100644
--- a/src/transaction/DecodedParamsTable.tsx
+++ b/src/transaction/DecodedParamsTable.tsx
@@ -1,8 +1,6 @@
 import React from "react";
 import { ParamType, Result } from "@ethersproject/abi";
-import AddressHighlighter from "../components/AddressHighlighter";
-import DecoratedAddressLink from "../components/DecoratedAddressLink";
-import Copy from "../components/Copy";
+import DecodedParamRow from "./DecodedParamRow";
 import { TransactionData } from "../types";
 
 type DecodedParamsTableProps = {
@@ -28,42 +26,13 @@ const DecodedParamsTable: React.FC<DecodedParamsTableProps> = ({
     </thead>
     <tbody className="divide-y">
       {args.map((r, i) => (
-        <tr key={i} className="grid grid-cols-12 gap-x-2 py-2">
-          <td className="col-span-3 pl-1">
-            {paramTypes[i].name}{" "}
-            <span className="text-gray-400 text-xs">({i})</span>
-          </td>
-          <td className="col-span-1">{paramTypes[i].type}</td>
-          <td className="col-span-8 pr-1 font-code break-all">
-            {paramTypes[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>
-            ) : paramTypes[i].type === "bool" ? (
-              <span className={`${r ? "text-green-700" : "text-red-700"}`}>
-                {r.toString()}
-              </span>
-            ) : paramTypes[i].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"}
-                </span>
-              </span>
-            ) : (
-              r.toString()
-            )}
-          </td>
-        </tr>
+        <DecodedParamRow
+          key={i}
+          i={i}
+          r={r}
+          paramType={paramTypes[i]}
+          txData={txData}
+        />
       ))}
     </tbody>
   </table>

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 18/29] 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}
+          />
+        ))}
+    </>
   );
 };
 

From 6008eb102d82f2ce83240dce81e5963cc809c01a Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 19:38:35 -0300
Subject: [PATCH 19/29] Optional chaining

---
 src/transaction/Logs.tsx | 7 +------
 1 file changed, 1 insertion(+), 6 deletions(-)

diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index a727628..d4233b7 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -31,12 +31,7 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
       <div className="text-sm py-4">Transaction Receipt Event Logs</div>
       {txData.confirmedData &&
         txData.confirmedData.logs.map((l, i) => (
-          <LogEntry
-            key={i}
-            txData={txData}
-            log={l}
-            logDesc={logDesc && logDesc[i]}
-          />
+          <LogEntry key={i} txData={txData} log={l} logDesc={logDesc?.[i]} />
         ))}
     </ContentFrame>
   );

From a0896c59a325b93e7546bfad440ce40bbb6442ec Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 18 Sep 2021 19:42:45 -0300
Subject: [PATCH 20/29] Fix support for different log emitters

---
 src/transaction/Logs.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index d4233b7..62196fa 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -19,10 +19,12 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
     const abi = metadata.output.abi;
     const intf = new Interface(abi as any);
     return txData.confirmedData?.logs.map((l) =>
-      intf.parseLog({
-        topics: l.topics,
-        data: l.data,
-      })
+      l.address === txData.to
+        ? intf.parseLog({
+            topics: l.topics,
+            data: l.data,
+          })
+        : undefined
     );
   }, [metadata, txData]);
 

From 28b4bfed7f59216e030166cc9e95f4611199c83f Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sun, 19 Sep 2021 04:24:38 -0300
Subject: [PATCH 21/29] Add hover color

---
 src/transaction/DecodedParamRow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/transaction/DecodedParamRow.tsx b/src/transaction/DecodedParamRow.tsx
index 68027b3..40f3a13 100644
--- a/src/transaction/DecodedParamRow.tsx
+++ b/src/transaction/DecodedParamRow.tsx
@@ -22,7 +22,7 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
 }) => {
   return (
     <>
-      <tr className="grid grid-cols-12 gap-x-2 py-2">
+      <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>}
           {paramType.name}{" "}

From 18275f86a275c8f18de36ff4df1364f725a93b2c Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 20 Sep 2021 18:12:07 -0300
Subject: [PATCH 22/29] Fix missing key attribute

---
 src/transaction/DecodedParamRow.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/transaction/DecodedParamRow.tsx b/src/transaction/DecodedParamRow.tsx
index 40f3a13..9d9bcf8 100644
--- a/src/transaction/DecodedParamRow.tsx
+++ b/src/transaction/DecodedParamRow.tsx
@@ -65,7 +65,7 @@ const DecodedParamRow: React.FC<DecodedParamRowProps> = ({
       </tr>
       {paramType.baseType === "tuple" &&
         r.map((e: any, idx: number) => (
-          <DecodedParamRow
+          <DecodedParamRow key={idx}
             prefix={paramType.name + "."}
             r={e}
             paramType={paramType.components[idx]}

From 7f15a12f4a5b149a40bab4f75650fa52ff1413ff Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Mon, 20 Sep 2021 18:15:00 -0300
Subject: [PATCH 23/29] Add support for multiple log emitter addresses

---
 src/transaction/Logs.tsx |  48 +++++++++++++-----
 src/useSourcify.ts       | 103 +++++++++++++++++++++++++++++++--------
 2 files changed, 119 insertions(+), 32 deletions(-)

diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index 62196fa..875f268 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -3,7 +3,8 @@ import { Interface } from "@ethersproject/abi";
 import ContentFrame from "../ContentFrame";
 import LogEntry from "./LogEntry";
 import { TransactionData } from "../types";
-import { Metadata } from "../useSourcify";
+import { Metadata, useMultipleMetadata } from "../useSourcify";
+import { SourcifySource } from "../url";
 
 type LogsProps = {
   txData: TransactionData;
@@ -11,22 +12,45 @@ type LogsProps = {
 };
 
 const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
+  const baseMetadatas = useMemo((): Record<string, Metadata | null> => {
+    if (!txData.to || metadata === undefined) {
+      return {};
+    }
+
+    const md: Record<string, Metadata | null> = {};
+    md[txData.to] = metadata;
+    return md;
+  }, [txData.to, metadata]);
+
+  const logAddresses = useMemo(
+    () => txData.confirmedData?.logs.map((l) => l.address) ?? [],
+    [txData]
+  );
+  const metadatas = useMultipleMetadata(
+    baseMetadatas,
+    logAddresses,
+    1,
+    SourcifySource.CUSTOM_SNAPSHOT_SERVER
+  );
   const logDesc = useMemo(() => {
     if (!metadata || !txData) {
       return undefined;
     }
 
-    const abi = metadata.output.abi;
-    const intf = new Interface(abi as any);
-    return txData.confirmedData?.logs.map((l) =>
-      l.address === txData.to
-        ? intf.parseLog({
-            topics: l.topics,
-            data: l.data,
-          })
-        : undefined
-    );
-  }, [metadata, txData]);
+    return txData.confirmedData?.logs.map((l) => {
+      const mt = metadatas[l.address];
+      if (!mt) {
+        return undefined;
+      }
+
+      const abi = mt.output.abi;
+      const intf = new Interface(abi as any);
+      return intf.parseLog({
+        topics: l.topics,
+        data: l.data,
+      });
+    });
+  }, [metadatas, metadata, txData]);
 
   return (
     <ContentFrame tabs>
diff --git a/src/useSourcify.ts b/src/useSourcify.ts
index cfac981..e1c8607 100644
--- a/src/useSourcify.ts
+++ b/src/useSourcify.ts
@@ -38,11 +38,38 @@ export type Metadata = {
   };
 };
 
+export const fetchSourcifyMetadata = async (
+  checksummedAddress: string,
+  chainId: number,
+  source: SourcifySource,
+  abortController: AbortController
+): Promise<Metadata | null> => {
+  try {
+    const contractMetadataURL = sourcifyMetadata(
+      checksummedAddress,
+      chainId,
+      source
+    );
+    const result = await fetch(contractMetadataURL, {
+      signal: abortController.signal,
+    });
+    if (result.ok) {
+      const _metadata = await result.json();
+      return _metadata;
+    }
+
+    return null;
+  } catch (err) {
+    console.error(err);
+    return null;
+  }
+};
+
 export const useSourcify = (
   checksummedAddress: string | undefined,
   chainId: number | undefined,
   source: SourcifySource
-) => {
+): Metadata | null | undefined => {
   const [rawMetadata, setRawMetadata] = useState<Metadata | null | undefined>();
 
   useEffect(() => {
@@ -53,25 +80,13 @@ export const useSourcify = (
 
     const abortController = new AbortController();
     const fetchMetadata = async () => {
-      try {
-        const contractMetadataURL = sourcifyMetadata(
-          checksummedAddress,
-          chainId,
-          source
-        );
-        const result = await fetch(contractMetadataURL, {
-          signal: abortController.signal,
-        });
-        if (result.ok) {
-          const _metadata = await result.json();
-          setRawMetadata(_metadata);
-        } else {
-          setRawMetadata(null);
-        }
-      } catch (err) {
-        console.error(err);
-        setRawMetadata(null);
-      }
+      const _metadata = await fetchSourcifyMetadata(
+        checksummedAddress,
+        chainId,
+        source,
+        abortController
+      );
+      setRawMetadata(_metadata);
     };
     fetchMetadata();
 
@@ -83,6 +98,54 @@ export const useSourcify = (
   return rawMetadata;
 };
 
+export const useMultipleMetadata = (
+  baseMetadatas: Record<string, Metadata | null>,
+  checksummedAddress: (string | undefined)[],
+  chainId: number | undefined,
+  source: SourcifySource
+): Record<string, Metadata | null | undefined> => {
+  const [rawMetadata, setRawMetadata] = useState<
+    Record<string, Metadata | null | undefined>
+  >({});
+
+  useEffect(() => {
+    if (!checksummedAddress || chainId === undefined) {
+      return;
+    }
+    setRawMetadata({});
+
+    const abortController = new AbortController();
+    const fetchMetadata = async (addresses: string[]) => {
+      const promises: Promise<Metadata | null>[] = [];
+      for (const addr of addresses) {
+        promises.push(
+          fetchSourcifyMetadata(addr, chainId, source, abortController)
+        );
+      }
+
+      const results = await Promise.all(promises);
+      const metadatas: Record<string, Metadata | null> = { ...baseMetadatas };
+      for (let i = 0; i < results.length; i++) {
+        metadatas[addresses[i]] = results[i];
+      }
+      setRawMetadata(metadatas);
+    };
+
+    const deduped = new Set(
+      checksummedAddress.filter(
+        (a): a is string => a !== undefined && baseMetadatas[a] === undefined
+      )
+    );
+    fetchMetadata(Array.from(deduped));
+
+    return () => {
+      abortController.abort();
+    };
+  }, [baseMetadatas, checksummedAddress, chainId, source]);
+
+  return rawMetadata;
+};
+
 export const useContract = (
   checksummedAddress: string,
   networkId: number,

From 4ec5fb7681beecc48f9e1332dad95d41bf6ad121 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 22 Sep 2021 03:02:21 -0300
Subject: [PATCH 24/29] Fix proxy/delegatecall scenarios

---
 src/useSourcify.ts | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/useSourcify.ts b/src/useSourcify.ts
index e1c8607..b60fde9 100644
--- a/src/useSourcify.ts
+++ b/src/useSourcify.ts
@@ -199,10 +199,15 @@ export const useTransactionDescription = (
 
     const abi = metadata.output.abi;
     const intf = new Interface(abi as any);
-    return intf.parseTransaction({
-      data: txData.data,
-      value: txData.value,
-    });
+    try {
+      return intf.parseTransaction({
+        data: txData.data,
+        value: txData.value,
+      });
+    } catch (err) {
+      console.warn("Couldn't find function signature", err);
+      return null;
+    }
   }, [metadata, txData]);
 
   return txDesc;

From b5c76a4e0195a1e1417347edd147964e20ba778d Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 22 Sep 2021 15:11:13 -0300
Subject: [PATCH 25/29] Fix log metadata search

---
 src/Transaction.tsx      |  2 +-
 src/transaction/Logs.tsx | 19 ++++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index 2fc69a2..a412d0b 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -49,7 +49,7 @@ const Transaction: React.FC = () => {
   const metadata = useSourcify(
     txData?.to,
     provider?.network.chainId,
-    SourcifySource.CUSTOM_SNAPSHOT_SERVER // TODO: use dynamic selector
+    SourcifySource.CENTRAL_SERVER // TODO: use dynamic selector
   );
   const txDesc = useTransactionDescription(metadata, txData);
 
diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index 875f268..a274c90 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -30,10 +30,10 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
     baseMetadatas,
     logAddresses,
     1,
-    SourcifySource.CUSTOM_SNAPSHOT_SERVER
+    SourcifySource.CENTRAL_SERVER // TODO: use dynamic selector
   );
   const logDesc = useMemo(() => {
-    if (!metadata || !txData) {
+    if (!txData) {
       return undefined;
     }
 
@@ -45,12 +45,17 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
 
       const abi = mt.output.abi;
       const intf = new Interface(abi as any);
-      return intf.parseLog({
-        topics: l.topics,
-        data: l.data,
-      });
+      try {
+        return intf.parseLog({
+          topics: l.topics,
+          data: l.data,
+        });
+      } catch (err) {
+        console.warn("Couldn't find function signature", err);
+        return null;
+      }
     });
-  }, [metadatas, metadata, txData]);
+  }, [metadatas, txData]);
 
   return (
     <ContentFrame tabs>

From 5e982d3b55de5484ce5cba068ddf7fab47ea9391 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Wed, 22 Sep 2021 15:30:54 -0300
Subject: [PATCH 26/29] Guard against errors on getting erc20 metadata

---
 src/TokenTransferItem.tsx |  1 +
 src/useErigonHooks.ts     | 24 ++++++++++++++----------
 2 files changed, 15 insertions(+), 10 deletions(-)

diff --git a/src/TokenTransferItem.tsx b/src/TokenTransferItem.tsx
index a093b7f..c9f40a2 100644
--- a/src/TokenTransferItem.tsx
+++ b/src/TokenTransferItem.tsx
@@ -18,6 +18,7 @@ type TokenTransferItemProps = {
   tokenMetas: TokenMetas;
 };
 
+// TODO: handle partial
 const TokenTransferItem: React.FC<TokenTransferItemProps> = ({
   t,
   txData,
diff --git a/src/useErigonHooks.ts b/src/useErigonHooks.ts
index 477f7b4..7322a0d 100644
--- a/src/useErigonHooks.ts
+++ b/src/useErigonHooks.ts
@@ -225,16 +225,20 @@ export const useTxData = (
           continue;
         }
         const erc20Contract = new Contract(t.token, erc20, provider);
-        const [name, symbol, decimals] = await Promise.all([
-          erc20Contract.name(),
-          erc20Contract.symbol(),
-          erc20Contract.decimals(),
-        ]);
-        tokenMetas[t.token] = {
-          name,
-          symbol,
-          decimals,
-        };
+        try {
+          const [name, symbol, decimals] = await Promise.all([
+            erc20Contract.name(),
+            erc20Contract.symbol(),
+            erc20Contract.decimals(),
+          ]);
+          tokenMetas[t.token] = {
+            name,
+            symbol,
+            decimals,
+          };
+        } catch (err) {
+          console.warn(`Couldn't get token ${t.token} metadata; ignoring`, err);
+        }
       }
 
       setTxData({

From bef7691d77a72349c9677a48bf8e32690f539013 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 23 Sep 2021 18:25:52 -0300
Subject: [PATCH 27/29] Turn sourcify intergration mode into a global config

---
 src/AddressTransactions.tsx |  8 +---
 src/App.tsx                 | 45 +++++++++++++++--------
 src/SourcifyMenu.tsx        | 73 +++++++++++++++++++++++++++++++++++++
 src/Title.tsx               |  2 +
 src/Transaction.tsx         |  5 ++-
 src/address/Contract.tsx    |  5 +--
 src/address/Contracts.tsx   | 25 +------------
 src/address/RadioButton.tsx | 24 ------------
 src/transaction/Logs.tsx    |  5 ++-
 src/useAppConfig.ts         | 13 +++++++
 10 files changed, 129 insertions(+), 76 deletions(-)
 create mode 100644 src/SourcifyMenu.tsx
 delete mode 100644 src/address/RadioButton.tsx
 create mode 100644 src/useAppConfig.ts

diff --git a/src/AddressTransactions.tsx b/src/AddressTransactions.tsx
index 45a07ca..e3a23a0 100644
--- a/src/AddressTransactions.tsx
+++ b/src/AddressTransactions.tsx
@@ -31,8 +31,8 @@ import { useENSCache } from "./useReverseCache";
 import { useFeeToggler } from "./search/useFeeToggler";
 import { SelectionContext, useSelection } from "./useSelection";
 import { useMultipleETHUSDOracle } from "./usePriceOracle";
+import { useAppConfigContext } from "./useAppConfig";
 import { useSourcify } from "./useSourcify";
-import { SourcifySource } from "./url";
 
 type BlockParams = {
   addressOrName: string;
@@ -180,9 +180,7 @@ const AddressTransactions: React.FC = () => {
   const [feeDisplay, feeDisplayToggler] = useFeeToggler();
 
   const selectionCtx = useSelection();
-  const [sourcifySource, setSourcifySource] = useState<SourcifySource>(
-    SourcifySource.IPFS_IPNS
-  );
+  const { sourcifySource } = useAppConfigContext();
   const rawMetadata = useSourcify(
     checksummedAddress,
     provider?.network.chainId,
@@ -316,8 +314,6 @@ const AddressTransactions: React.FC = () => {
                     <Contracts
                       checksummedAddress={checksummedAddress}
                       rawMetadata={rawMetadata}
-                      sourcifySource={sourcifySource}
-                      setSourcifySource={setSourcifySource}
                     />
                   </Route>
                 </Switch>
diff --git a/src/App.tsx b/src/App.tsx
index 4f1333d..648c58f 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { Suspense } from "react";
+import React, { Suspense, useMemo, useState } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
 import WarningHeader from "./WarningHeader";
 import Home from "./Home";
@@ -9,6 +9,8 @@ import London from "./special/london/London";
 import Footer from "./Footer";
 import { ConnectionStatus } from "./types";
 import { RuntimeContext, useRuntime } from "./useRuntime";
+import { AppConfig, AppConfigContext } from "./useAppConfig";
+import { SourcifySource } from "./url";
 
 const Block = React.lazy(() => import("./Block"));
 const BlockTransactions = React.lazy(() => import("./BlockTransactions"));
@@ -17,6 +19,15 @@ const Transaction = React.lazy(() => import("./Transaction"));
 
 const App = () => {
   const runtime = useRuntime();
+  const [sourcifySource, setSourcifySource] = useState<SourcifySource>(
+    SourcifySource.IPFS_IPNS
+  );
+  const appConfig = useMemo((): AppConfig => {
+    return {
+      sourcifySource,
+      setSourcifySource,
+    };
+  }, [sourcifySource, setSourcifySource]);
 
   return (
     <Suspense fallback={<>LOADING</>}>
@@ -41,21 +52,23 @@ const App = () => {
                   <London />
                 </Route>
                 <Route>
-                  <div className="mb-auto">
-                    <Title />
-                    <Route path="/block/:blockNumberOrHash" exact>
-                      <Block />
-                    </Route>
-                    <Route path="/block/:blockNumber/txs" exact>
-                      <BlockTransactions />
-                    </Route>
-                    <Route path="/tx/:txhash">
-                      <Transaction />
-                    </Route>
-                    <Route path="/address/:addressOrName/:direction?">
-                      <AddressTransactions />
-                    </Route>
-                  </div>
+                  <AppConfigContext.Provider value={appConfig}>
+                    <div className="mb-auto">
+                      <Title />
+                      <Route path="/block/:blockNumberOrHash" exact>
+                        <Block />
+                      </Route>
+                      <Route path="/block/:blockNumber/txs" exact>
+                        <BlockTransactions />
+                      </Route>
+                      <Route path="/tx/:txhash">
+                        <Transaction />
+                      </Route>
+                      <Route path="/address/:addressOrName/:direction?">
+                        <AddressTransactions />
+                      </Route>
+                    </div>
+                  </AppConfigContext.Provider>
                 </Route>
               </Switch>
             </Router>
diff --git a/src/SourcifyMenu.tsx b/src/SourcifyMenu.tsx
new file mode 100644
index 0000000..36f43a5
--- /dev/null
+++ b/src/SourcifyMenu.tsx
@@ -0,0 +1,73 @@
+import React from "react";
+import { Menu } from "@headlessui/react";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBars } from "@fortawesome/free-solid-svg-icons/faBars";
+import { SourcifySource } from "./url";
+import { useAppConfigContext } from "./useAppConfig";
+
+const SourcifyMenu: React.FC = () => {
+  const { sourcifySource, setSourcifySource } = useAppConfigContext();
+
+  return (
+    <Menu>
+      <div className="relative self-stretch">
+        <Menu.Button className="w-full h-full flex justify-center items-center space-x-2 text-sm border rounded px-2 py-1">
+          <FontAwesomeIcon icon={faBars} size="1x" />
+        </Menu.Button>
+        <Menu.Items className="absolute right-0 mt-1 border p-1 rounded-b bg-white flex flex-col text-sm min-w-max">
+          <div className="px-2 py-1 text-xs border-b border-gray-300">
+            Sourcify Datasource
+          </div>
+          <SourcifyMenuItem
+            checked={sourcifySource === SourcifySource.IPFS_IPNS}
+            onClick={() => setSourcifySource(SourcifySource.IPFS_IPNS)}
+          >
+            Resolve IPNS
+          </SourcifyMenuItem>
+          <SourcifyMenuItem
+            checked={sourcifySource === SourcifySource.CENTRAL_SERVER}
+            onClick={() => setSourcifySource(SourcifySource.CENTRAL_SERVER)}
+          >
+            Sourcify Servers
+          </SourcifyMenuItem>
+          <SourcifyMenuItem
+            checked={sourcifySource === SourcifySource.CUSTOM_SNAPSHOT_SERVER}
+            onClick={() =>
+              setSourcifySource(SourcifySource.CUSTOM_SNAPSHOT_SERVER)
+            }
+          >
+            Local Snapshot
+          </SourcifyMenuItem>
+        </Menu.Items>
+      </div>
+    </Menu>
+  );
+};
+
+type SourcifyMenuItemProps = {
+  checked?: boolean;
+  onClick: () => void;
+};
+
+const SourcifyMenuItem: React.FC<SourcifyMenuItemProps> = ({
+  checked = false,
+  onClick,
+  children,
+}) => (
+  <Menu.Item>
+    {({ active }) => (
+      <button
+        className={`text-sm text-left px-2 py-1 ${
+          active ? "border-orange-200 text-gray-500" : "text-gray-400"
+        } transition-transform transition-colors duration-75 ${
+          checked ? "text-gray-900" : ""
+        }`}
+        onClick={onClick}
+      >
+        {children}
+      </button>
+    )}
+  </Menu.Item>
+);
+
+export default React.memo(SourcifyMenu);
diff --git a/src/Title.tsx b/src/Title.tsx
index 25b408d..e4c5f47 100644
--- a/src/Title.tsx
+++ b/src/Title.tsx
@@ -5,6 +5,7 @@ import { faQrcode } from "@fortawesome/free-solid-svg-icons/faQrcode";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 import PriceBox from "./PriceBox";
 import CameraScanner from "./search/CameraScanner";
+import SourcifyMenu from "./SourcifyMenu";
 import { RuntimeContext } from "./useRuntime";
 
 const Title: React.FC = () => {
@@ -82,6 +83,7 @@ const Title: React.FC = () => {
               Search
             </button>
           </form>
+          <SourcifyMenu />
         </div>
       </div>
     </>
diff --git a/src/Transaction.tsx b/src/Transaction.tsx
index a412d0b..29c7208 100644
--- a/src/Transaction.tsx
+++ b/src/Transaction.tsx
@@ -11,8 +11,8 @@ import { RuntimeContext } from "./useRuntime";
 import { SelectionContext, useSelection } from "./useSelection";
 import { useInternalOperations, useTxData } from "./useErigonHooks";
 import { useETHUSDOracle } from "./usePriceOracle";
+import { useAppConfigContext } from "./useAppConfig";
 import { useSourcify, useTransactionDescription } from "./useSourcify";
-import { SourcifySource } from "./url";
 
 type TransactionParams = {
   txhash: string;
@@ -46,10 +46,11 @@ const Transaction: React.FC = () => {
     txData?.confirmedData?.blockNumber
   );
 
+  const { sourcifySource } = useAppConfigContext();
   const metadata = useSourcify(
     txData?.to,
     provider?.network.chainId,
-    SourcifySource.CENTRAL_SERVER // TODO: use dynamic selector
+    sourcifySource
   );
   const txDesc = useTransactionDescription(metadata, txData);
 
diff --git a/src/address/Contract.tsx b/src/address/Contract.tsx
index eece5fd..7ddfe56 100644
--- a/src/address/Contract.tsx
+++ b/src/address/Contract.tsx
@@ -3,9 +3,9 @@ import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
 import hljs from "highlight.js";
 import docco from "react-syntax-highlighter/dist/esm/styles/hljs/docco";
 import { useContract } from "../useSourcify";
-import { SourcifySource } from "../url";
 
 import hljsDefineSolidity from "highlightjs-solidity";
+import { useAppConfigContext } from "../useAppConfig";
 hljsDefineSolidity(hljs);
 
 type ContractProps = {
@@ -13,7 +13,6 @@ type ContractProps = {
   networkId: number;
   filename: string;
   source: any;
-  sourcifySource: SourcifySource;
 };
 
 const Contract: React.FC<ContractProps> = ({
@@ -21,8 +20,8 @@ const Contract: React.FC<ContractProps> = ({
   networkId,
   filename,
   source,
-  sourcifySource,
 }) => {
+  const { sourcifySource } = useAppConfigContext();
   const content = useContract(
     checksummedAddress,
     networkId,
diff --git a/src/address/Contracts.tsx b/src/address/Contracts.tsx
index 4d322c3..0745d73 100644
--- a/src/address/Contracts.tsx
+++ b/src/address/Contracts.tsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useContext, Fragment } from "react";
 import { commify } from "@ethersproject/units";
-import { Menu, RadioGroup } from "@headlessui/react";
+import { Menu } from "@headlessui/react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faChevronDown } from "@fortawesome/free-solid-svg-icons/faChevronDown";
 import ContentFrame from "../ContentFrame";
@@ -11,21 +11,16 @@ import Contract from "./Contract";
 import { RuntimeContext } from "../useRuntime";
 import { Metadata } from "../useSourcify";
 import ExternalLink from "../components/ExternalLink";
-import { openInRemixURL, SourcifySource } from "../url";
-import RadioButton from "./RadioButton";
+import { openInRemixURL } from "../url";
 
 type ContractsProps = {
   checksummedAddress: string;
   rawMetadata: Metadata | null | undefined;
-  sourcifySource: SourcifySource;
-  setSourcifySource: (sourcifySource: SourcifySource) => void;
 };
 
 const Contracts: React.FC<ContractsProps> = ({
   checksummedAddress,
   rawMetadata,
-  sourcifySource,
-  setSourcifySource,
 }) => {
   const { provider } = useContext(RuntimeContext);
 
@@ -39,21 +34,6 @@ const Contracts: React.FC<ContractsProps> = ({
 
   return (
     <ContentFrame tabs>
-      <InfoRow title="Sourcify integration">
-        <RadioGroup value={sourcifySource} onChange={setSourcifySource}>
-          <div className="flex space-x-2">
-            <RadioButton value={SourcifySource.IPFS_IPNS}>
-              Resolve IPNS @localhost:8080 gateway
-            </RadioButton>
-            <RadioButton value={SourcifySource.CENTRAL_SERVER}>
-              Sourcify Servers
-            </RadioButton>
-            <RadioButton value={SourcifySource.CUSTOM_SNAPSHOT_SERVER}>
-              Local Snapshot @localhost:3006
-            </RadioButton>
-          </div>
-        </RadioGroup>
-      </InfoRow>
       {rawMetadata && (
         <>
           <InfoRow title="Language">
@@ -145,7 +125,6 @@ const Contracts: React.FC<ContractsProps> = ({
                   networkId={provider!.network.chainId}
                   filename={selected}
                   source={rawMetadata.sources[selected]}
-                  sourcifySource={sourcifySource}
                 />
               )}
             </div>
diff --git a/src/address/RadioButton.tsx b/src/address/RadioButton.tsx
deleted file mode 100644
index e93fad3..0000000
--- a/src/address/RadioButton.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import React from "react";
-import { RadioGroup } from "@headlessui/react";
-import { SourcifySource } from "../url";
-
-type RadioButtonProps = {
-  value: SourcifySource;
-};
-
-const RadioButton: React.FC<RadioButtonProps> = ({ value, children }) => (
-  <RadioGroup.Option
-    className={({ checked }) =>
-      `border rounded px-2 py-1 cursor-pointer ${
-        checked
-          ? "bg-blue-400 hover:bg-blue-500 text-white"
-          : "hover:bg-gray-200"
-      }`
-    }
-    value={value}
-  >
-    {children}
-  </RadioGroup.Option>
-);
-
-export default RadioButton;
diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index a274c90..3990a24 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -3,8 +3,8 @@ import { Interface } from "@ethersproject/abi";
 import ContentFrame from "../ContentFrame";
 import LogEntry from "./LogEntry";
 import { TransactionData } from "../types";
+import { useAppConfigContext } from "../useAppConfig";
 import { Metadata, useMultipleMetadata } from "../useSourcify";
-import { SourcifySource } from "../url";
 
 type LogsProps = {
   txData: TransactionData;
@@ -22,6 +22,7 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
     return md;
   }, [txData.to, metadata]);
 
+  const { sourcifySource } = useAppConfigContext();
   const logAddresses = useMemo(
     () => txData.confirmedData?.logs.map((l) => l.address) ?? [],
     [txData]
@@ -30,7 +31,7 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
     baseMetadatas,
     logAddresses,
     1,
-    SourcifySource.CENTRAL_SERVER // TODO: use dynamic selector
+    sourcifySource
   );
   const logDesc = useMemo(() => {
     if (!txData) {
diff --git a/src/useAppConfig.ts b/src/useAppConfig.ts
new file mode 100644
index 0000000..56007e0
--- /dev/null
+++ b/src/useAppConfig.ts
@@ -0,0 +1,13 @@
+import React, { useContext } from "react";
+import { SourcifySource } from "./url";
+
+export type AppConfig = {
+  sourcifySource: SourcifySource;
+  setSourcifySource: (newSourcifySource: SourcifySource) => void;
+};
+
+export const AppConfigContext = React.createContext<AppConfig>(undefined!);
+
+export const useAppConfigContext = () => {
+  return useContext(AppConfigContext);
+};

From 380abf2adc8d6d0ca154d97b35561e95677a1e9c Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 23 Sep 2021 18:33:20 -0300
Subject: [PATCH 28/29] Custom msg for 0 logs

---
 src/transaction/Logs.tsx | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index 3990a24..72258f0 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -60,11 +60,24 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
 
   return (
     <ContentFrame tabs>
-      <div className="text-sm py-4">Transaction Receipt Event Logs</div>
-      {txData.confirmedData &&
-        txData.confirmedData.logs.map((l, i) => (
-          <LogEntry key={i} txData={txData} log={l} logDesc={logDesc?.[i]} />
-        ))}
+      {txData.confirmedData && (
+        <>
+          {txData.confirmedData.logs.length > 0 ? (
+            <>
+              {txData.confirmedData.logs.map((l, i) => (
+                <LogEntry
+                  key={i}
+                  txData={txData}
+                  log={l}
+                  logDesc={logDesc?.[i]}
+                />
+              ))}
+            </>
+          ) : (
+            <div className="text-sm py-4">Transaction didn't emit any logs</div>
+          )}
+        </>
+      )}
     </ContentFrame>
   );
 };

From 13f32f8a356c8b82efea773a2084b264cc4d9c10 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Thu, 23 Sep 2021 18:46:08 -0300
Subject: [PATCH 29/29] Properly differentiate pending/cant decode log data

---
 src/transaction/LogEntry.tsx | 14 +++++++++++++-
 src/transaction/Logs.tsx     |  6 +++---
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/transaction/LogEntry.tsx b/src/transaction/LogEntry.tsx
index 0ce96dd..1d4e85f 100644
--- a/src/transaction/LogEntry.tsx
+++ b/src/transaction/LogEntry.tsx
@@ -50,7 +50,19 @@ const LogEntry: React.FC<LogEntryProps> = ({ txData, log, logDesc }) => (
         </Tab.List>
         <Tab.Panels as={Fragment}>
           <Tab.Panel className="space-y-2">
-            {logDesc && (
+            {logDesc === undefined ? (
+              <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+                <div className="col-start-2 flex space-x-2 items-center col-span-11">
+                  Waiting for data...
+                </div>
+              </div>
+            ) : logDesc === null ? (
+              <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
+                <div className="col-start-2 flex space-x-2 items-center col-span-11">
+                  No decoded data
+                </div>
+              </div>
+            ) : (
               <>
                 <div className="grid grid-cols-12 gap-x-3 gap-y-5 text-sm">
                   <div className="col-start-2 flex space-x-2 items-center col-span-11 font-mono">
diff --git a/src/transaction/Logs.tsx b/src/transaction/Logs.tsx
index 72258f0..45fe491 100644
--- a/src/transaction/Logs.tsx
+++ b/src/transaction/Logs.tsx
@@ -33,7 +33,7 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
     1,
     sourcifySource
   );
-  const logDesc = useMemo(() => {
+  const logDescs = useMemo(() => {
     if (!txData) {
       return undefined;
     }
@@ -41,7 +41,7 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
     return txData.confirmedData?.logs.map((l) => {
       const mt = metadatas[l.address];
       if (!mt) {
-        return undefined;
+        return mt;
       }
 
       const abi = mt.output.abi;
@@ -69,7 +69,7 @@ const Logs: React.FC<LogsProps> = ({ txData, metadata }) => {
                   key={i}
                   txData={txData}
                   log={l}
-                  logDesc={logDesc?.[i]}
+                  logDesc={logDescs?.[i]}
                 />
               ))}
             </>