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] 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>
 );