Refactorings

src/AddressTransactions.tsx

@@ -216,16 +216,12 @@ const AddressTransactions: React.FC = () => {
             </StandardSubtitle>
             <Tab.Group>
               <Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
-                <Tab as={Fragment}>
+                <NavTab href={`/address/${checksummedAddress}`}>
-                  <NavTab href={`/address/${checksummedAddress}`}>
+                  Overview
-                    Overview
+                </NavTab>
-                  </NavTab>
+                <NavTab href={`/address/${checksummedAddress}/contract`}>
-                </Tab>
+                  Contract
-                <Tab as={Fragment}>
+                </NavTab>
-                  <NavTab href={`/address/${checksummedAddress}/contract`}>
-                    Contract
-                  </NavTab>
-                </Tab>
               </Tab.List>
               <Tab.Panels>
                 <Switch>

src/Transaction.tsx

@@ -1,9 +1,9 @@
 import React, { useMemo, useContext } from "react";
 import { Route, Switch, useParams } from "react-router-dom";
+import { Tab } from "@headlessui/react";
 import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
 import ContentFrame from "./ContentFrame";
-import TabGroup from "./components/TabGroup";
 import NavTab from "./components/NavTab";
 import Details from "./transaction/Details";
 import Logs from "./transaction/Logs";
@@ -56,14 +56,17 @@ const Transaction: React.FC = () => {
       )}
       {txData && (
         <SelectionContext.Provider value={selectionCtx}>
-          <TabGroup>
+          <Tab.Group>
-            <NavTab href={`/tx/${txhash}`}>Overview</NavTab>
+            <Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
-            {txData.confirmedData?.blockNumber !== undefined && (
+              <NavTab href={`/tx/${txhash}`}>Overview</NavTab>
-              <NavTab href={`/tx/${txhash}/logs`}>
+              {txData.confirmedData?.blockNumber !== undefined && (
-                Logs{txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
+                <NavTab href={`/tx/${txhash}/logs`}>
-              </NavTab>
+                  Logs
-            )}
+                  {txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
-          </TabGroup>
+                </NavTab>
+              )}
+            </Tab.List>
+          </Tab.Group>
           <Switch>
             <Route path="/tx/:txhash/" exact>
               <Details

src/address/Contracts.tsx

@@ -1,5 +1,6 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState, useEffect, useContext, Fragment } from "react";
-import { ethers } from "ethers";
+import { commify } from "@ethersproject/units";
+import { Tab } from "@headlessui/react";
 import ContentFrame from "../ContentFrame";
 import InfoRow from "../components/InfoRow";
 import Contract from "./Contract";
@@ -40,7 +41,7 @@ const Contracts: React.FC<ContractsProps> = ({
               <span>
                 <span className="font-bold text-green-600">Yes</span> with{" "}
                 <span className="font-bold text-green-600">
-                  {ethers.utils.commify(optimizer?.runs)}
+                  {commify(optimizer?.runs)}
                 </span>{" "}
                 runs
               </span>
@@ -56,20 +57,24 @@ const Contracts: React.FC<ContractsProps> = ({
         )}
         {rawMetadata !== undefined && rawMetadata !== null && (
           <div>
-            <div className="flex truncate">
+            <Tab.Group>
-              {Object.entries(rawMetadata.sources).map(([k]) => (
+              <Tab.List className="flex truncate">
-                <button
+                {Object.entries(rawMetadata.sources).map(([k]) => (
-                  className={`border-b-2 border-transparent rounded-t text-sm px-2 py-1 ${
+                  <Tab key={k} as={Fragment}>
-                    selected === k
+                    <button
-                      ? "border-orange-300 font-bold bg-gray-200 text-gray-500"
+                      className={`border-b-2 border-transparent rounded-t text-sm px-2 py-1 ${
-                      : "hover:border-orange-200 bg-gray-100 hover:text-gray-500 text-gray-400 transition-transform transition-colors duration-75 transform origin-bottom scale-95 hover:scale-100"
+                        selected === k
-                  }`}
+                          ? "border-orange-300 font-bold bg-gray-200 text-gray-500"
-                  onClick={() => setSelected(k)}
+                          : "hover:border-orange-200 bg-gray-100 hover:text-gray-500 text-gray-400 transition-transform transition-colors duration-75 transform origin-bottom scale-95 hover:scale-100"
-                >
+                      }`}
-                  {k}
+                      onClick={() => setSelected(k)}
-                </button>
+                    >
-              ))}
+                      {k}
-            </div>
+                    </button>
+                  </Tab>
+                ))}
+              </Tab.List>
+            </Tab.Group>
             {selected && (
               <Contract
                 checksummedAddress={checksummedAddress}

src/components/NavTab.tsx

@@ -1,20 +1,23 @@
-import React from "react";
+import React, { Fragment } from "react";
 import { NavLink } from "react-router-dom";
+import { Tab } from "@headlessui/react";
 
 type NavTabProps = {
   href: string;
 };
 
 const NavTab: React.FC<NavTabProps> = ({ href, children }) => (
-  <NavLink
+  <Tab as={Fragment}>
-    className="text-gray-500 border-transparent hover:text-link-blue text-sm font-bold px-3 py-3 border-b-2"
+    <NavLink
-    activeClassName="text-link-blue border-link-blue"
+      className="text-gray-500 border-transparent hover:text-link-blue text-sm font-bold px-3 py-3 border-b-2"
-    to={href}
+      activeClassName="text-link-blue border-link-blue"
-    exact
+      to={href}
-    replace
+      exact
-  >
+      replace
-    {children}
+    >
-  </NavLink>
+      {children}
+    </NavLink>
+  </Tab>
 );
 
 export default NavTab;

src/components/TabGroup.tsx

@@ -1,7 +0,0 @@
-const TabGroup: React.FC = ({ children }) => (
-  <div className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
-    {children}
-  </div>
-);
-
-export default TabGroup;