Refactorings
This commit is contained in:
parent
a76a2d71a2
commit
fe336c5c43
|
@ -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>
|
||||
<NavTab href={`/address/${checksummedAddress}`}>
|
||||
Overview
|
||||
</NavTab>
|
||||
<NavTab href={`/address/${checksummedAddress}/contract`}>
|
||||
Contract
|
||||
</NavTab>
|
||||
</Tab.List>
|
||||
<Tab.Panels>
|
||||
<Switch>
|
||||
|
|
|
@ -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>
|
||||
<NavTab href={`/tx/${txhash}`}>Overview</NavTab>
|
||||
{txData.confirmedData?.blockNumber !== undefined && (
|
||||
<NavTab href={`/tx/${txhash}/logs`}>
|
||||
Logs{txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
|
||||
</NavTab>
|
||||
)}
|
||||
</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})`}
|
||||
</NavTab>
|
||||
)}
|
||||
</Tab.List>
|
||||
</Tab.Group>
|
||||
<Switch>
|
||||
<Route path="/tx/:txhash/" exact>
|
||||
<Details
|
||||
|
|
|
@ -1,5 +1,6 @@
|
|||
import React, { useState, useEffect, useContext } from "react";
|
||||
import { ethers } from "ethers";
|
||||
import React, { useState, useEffect, useContext, Fragment } from "react";
|
||||
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">
|
||||
{Object.entries(rawMetadata.sources).map(([k]) => (
|
||||
<button
|
||||
className={`border-b-2 border-transparent rounded-t text-sm px-2 py-1 ${
|
||||
selected === k
|
||||
? "border-orange-300 font-bold bg-gray-200 text-gray-500"
|
||||
: "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"
|
||||
}`}
|
||||
onClick={() => setSelected(k)}
|
||||
>
|
||||
{k}
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
<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
|
||||
? "border-orange-300 font-bold bg-gray-200 text-gray-500"
|
||||
: "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"
|
||||
}`}
|
||||
onClick={() => setSelected(k)}
|
||||
>
|
||||
{k}
|
||||
</button>
|
||||
</Tab>
|
||||
))}
|
||||
</Tab.List>
|
||||
</Tab.Group>
|
||||
{selected && (
|
||||
<Contract
|
||||
checksummedAddress={checksummedAddress}
|
||||
|
|
|
@ -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
|
||||
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"
|
||||
to={href}
|
||||
exact
|
||||
replace
|
||||
>
|
||||
{children}
|
||||
</NavLink>
|
||||
<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"
|
||||
to={href}
|
||||
exact
|
||||
replace
|
||||
>
|
||||
{children}
|
||||
</NavLink>
|
||||
</Tab>
|
||||
);
|
||||
|
||||
export default NavTab;
|
||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue