Use headless-ui Tabs

src/AddressTransactions.tsx

@@ -1,4 +1,10 @@
-import React, { useState, useEffect, useMemo, useContext } from "react";
+import React, {
+  useState,
+  useEffect,
+  useMemo,
+  useContext,
+  Fragment,
+} from "react";
 import {
   useParams,
   useLocation,
@@ -8,14 +14,14 @@ import {
 } from "react-router-dom";
 import { BlockTag } from "@ethersproject/abstract-provider";
 import { getAddress, isAddress } from "@ethersproject/address";
+import { Tab } from "@headlessui/react";
 import queryString from "query-string";
 import Blockies from "react-blockies";
 import StandardFrame from "./StandardFrame";
 import StandardSubtitle from "./StandardSubtitle";
 import Copy from "./components/Copy";
 import ContentFrame from "./ContentFrame";
-import TabGroup from "./components/TabGroup";
-import Tab from "./components/Tab";
+import CustomTab from "./components/Tab";
 import Contracts from "./address/Contracts";
 import UndefinedPageControl from "./search/UndefinedPageControl";
 import ResultHeader from "./search/ResultHeader";
@@ -203,12 +209,20 @@ const AddressTransactions: React.FC = () => {
                 )}
               </div>
             </StandardSubtitle>
-            <TabGroup>
-              <Tab href={`/address/${checksummedAddress}`}>Overview</Tab>
-              <Tab href={`/address/${checksummedAddress}/contract`}>
-                Contract
+            <Tab.Group>
+              <Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
+                <Tab as={Fragment}>
+                  <CustomTab href={`/address/${checksummedAddress}`}>
+                    Overview
+                  </CustomTab>
                 </Tab>
-            </TabGroup>
+                <Tab as={Fragment}>
+                  <CustomTab href={`/address/${checksummedAddress}/contract`}>
+                    Contract
+                  </CustomTab>
+                </Tab>
+              </Tab.List>
+              <Tab.Panels>
                 <Switch>
                   <Route path="/address/:addressOrName" exact>
                     <ContentFrame tabs>
@@ -276,6 +290,8 @@ const AddressTransactions: React.FC = () => {
                     <Contracts checksummedAddress={checksummedAddress} />
                   </Route>
                 </Switch>
+              </Tab.Panels>
+            </Tab.Group>
           </>
         )
       )}