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