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

126
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,48 +209,23 @@ 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}`}>
</Tab> Overview
</TabGroup> </CustomTab>
<Switch> </Tab>
<Route path="/address/:addressOrName" exact> <Tab as={Fragment}>
<ContentFrame tabs> <CustomTab href={`/address/${checksummedAddress}/contract`}>
<div className="flex justify-between items-baseline py-3"> Contract
<div className="text-sm text-gray-500"> </CustomTab>
{page === undefined ? ( </Tab>
<>Waiting for search results...</> </Tab.List>
) : ( <Tab.Panels>
<>{page.length} transactions on this page</> <Switch>
)} <Route path="/address/:addressOrName" exact>
</div> <ContentFrame tabs>
<UndefinedPageControl
address={params.addressOrName}
isFirst={controller?.isFirst}
isLast={controller?.isLast}
prevHash={page ? page[0].hash : ""}
nextHash={page ? page[page.length - 1].hash : ""}
disabled={controller === undefined}
/>
</div>
<ResultHeader
feeDisplay={feeDisplay}
feeDisplayToggler={feeDisplayToggler}
/>
{controller ? (
<SelectionContext.Provider value={selectionCtx}>
{controller.getPage().map((tx) => (
<TransactionItem
key={tx.hash}
tx={tx}
ensCache={reverseCache}
selectedAddress={checksummedAddress}
feeDisplay={feeDisplay}
priceMap={priceMap}
/>
))}
<div className="flex justify-between items-baseline py-3"> <div className="flex justify-between items-baseline py-3">
<div className="text-sm text-gray-500"> <div className="text-sm text-gray-500">
{page === undefined ? ( {page === undefined ? (
@ -266,16 +247,51 @@ const AddressTransactions: React.FC = () => {
feeDisplay={feeDisplay} feeDisplay={feeDisplay}
feeDisplayToggler={feeDisplayToggler} feeDisplayToggler={feeDisplayToggler}
/> />
</SelectionContext.Provider> {controller ? (
) : ( <SelectionContext.Provider value={selectionCtx}>
<PendingResults /> {controller.getPage().map((tx) => (
)} <TransactionItem
</ContentFrame> key={tx.hash}
</Route> tx={tx}
<Route path="/address/:addressOrName/contract" exact> ensCache={reverseCache}
<Contracts checksummedAddress={checksummedAddress} /> selectedAddress={checksummedAddress}
</Route> feeDisplay={feeDisplay}
</Switch> priceMap={priceMap}
/>
))}
<div className="flex justify-between items-baseline py-3">
<div className="text-sm text-gray-500">
{page === undefined ? (
<>Waiting for search results...</>
) : (
<>{page.length} transactions on this page</>
)}
</div>
<UndefinedPageControl
address={params.addressOrName}
isFirst={controller?.isFirst}
isLast={controller?.isLast}
prevHash={page ? page[0].hash : ""}
nextHash={page ? page[page.length - 1].hash : ""}
disabled={controller === undefined}
/>
</div>
<ResultHeader
feeDisplay={feeDisplay}
feeDisplayToggler={feeDisplayToggler}
/>
</SelectionContext.Provider>
) : (
<PendingResults />
)}
</ContentFrame>
</Route>
<Route path="/address/:addressOrName/contract" exact>
<Contracts checksummedAddress={checksummedAddress} />
</Route>
</Switch>
</Tab.Panels>
</Tab.Group>
</> </>
) )
)} )}