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}`}>
                   Overview
                 </NavTab>
-                </Tab>
-                <Tab as={Fragment}>
                 <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>
+            <Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
               <NavTab href={`/tx/${txhash}`}>Overview</NavTab>
               {txData.confirmedData?.blockNumber !== undefined && (
                 <NavTab href={`/tx/${txhash}/logs`}>
-                Logs{txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
+                  Logs
+                  {txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
                 </NavTab>
               )}
-          </TabGroup>
+            </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,8 +57,10 @@ const Contracts: React.FC<ContractsProps> = ({
         )}
         {rawMetadata !== undefined && rawMetadata !== null && (
           <div>
-            <div className="flex truncate">
+            <Tab.Group>
+              <Tab.List className="flex truncate">
                 {Object.entries(rawMetadata.sources).map(([k]) => (
+                  <Tab key={k} as={Fragment}>
                     <button
                       className={`border-b-2 border-transparent rounded-t text-sm px-2 py-1 ${
                         selected === k
@@ -68,8 +71,10 @@ const Contracts: React.FC<ContractsProps> = ({
                     >
                       {k}
                     </button>
+                  </Tab>
                 ))}
-            </div>
+              </Tab.List>
+            </Tab.Group>
             {selected && (
               <Contract
                 checksummedAddress={checksummedAddress}

src/components/NavTab.tsx

@@ -1,11 +1,13 @@
-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 }) => (
+  <Tab as={Fragment}>
     <NavLink
       className="text-gray-500 border-transparent hover:text-link-blue text-sm font-bold px-3 py-3 border-b-2"
       activeClassName="text-link-blue border-link-blue"
@@ -15,6 +17,7 @@ const NavTab: React.FC<NavTabProps> = ({ href, children }) => (
     >
       {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;