a
/
otterscan
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Use headless-ui Tabs

This commit is contained in:
Willian Mitsuda 2021-09-05 17:39:11 -03:00
parent 37b253ab39
commit 16ffe567b6
1 changed files with 71 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/AddressTransactions.tsx
View File

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