Refactorings

This commit is contained in:
Willian Mitsuda 2021-09-06 03:43:20 -03:00
parent a76a2d71a2
commit fe336c5c43
5 changed files with 53 additions and 53 deletions

View File

@ -216,16 +216,12 @@ const AddressTransactions: React.FC = () => {
</StandardSubtitle> </StandardSubtitle>
<Tab.Group> <Tab.Group>
<Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white"> <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}`}>
<NavTab href={`/address/${checksummedAddress}`}> Overview
Overview </NavTab>
</NavTab> <NavTab href={`/address/${checksummedAddress}/contract`}>
</Tab> Contract
<Tab as={Fragment}> </NavTab>
<NavTab href={`/address/${checksummedAddress}/contract`}>
Contract
</NavTab>
</Tab>
</Tab.List> </Tab.List>
<Tab.Panels> <Tab.Panels>
<Switch> <Switch>

View File

@ -1,9 +1,9 @@
import React, { useMemo, useContext } from "react"; import React, { useMemo, useContext } from "react";
import { Route, Switch, useParams } from "react-router-dom"; import { Route, Switch, useParams } from "react-router-dom";
import { Tab } from "@headlessui/react";
import StandardFrame from "./StandardFrame"; import StandardFrame from "./StandardFrame";
import StandardSubtitle from "./StandardSubtitle"; import StandardSubtitle from "./StandardSubtitle";
import ContentFrame from "./ContentFrame"; import ContentFrame from "./ContentFrame";
import TabGroup from "./components/TabGroup";
import NavTab from "./components/NavTab"; import NavTab from "./components/NavTab";
import Details from "./transaction/Details"; import Details from "./transaction/Details";
import Logs from "./transaction/Logs"; import Logs from "./transaction/Logs";
@ -56,14 +56,17 @@ const Transaction: React.FC = () => {
)} )}
{txData && ( {txData && (
<SelectionContext.Provider value={selectionCtx}> <SelectionContext.Provider value={selectionCtx}>
<TabGroup> <Tab.Group>
<NavTab href={`/tx/${txhash}`}>Overview</NavTab> <Tab.List className="flex space-x-2 border-l border-r border-t rounded-t-lg bg-white">
{txData.confirmedData?.blockNumber !== undefined && ( <NavTab href={`/tx/${txhash}`}>Overview</NavTab>
<NavTab href={`/tx/${txhash}/logs`}> {txData.confirmedData?.blockNumber !== undefined && (
Logs{txData && ` (${txData.confirmedData?.logs?.length ?? 0})`} <NavTab href={`/tx/${txhash}/logs`}>
</NavTab> Logs
)} {txData && ` (${txData.confirmedData?.logs?.length ?? 0})`}
</TabGroup> </NavTab>
)}
</Tab.List>
</Tab.Group>
<Switch> <Switch>
<Route path="/tx/:txhash/" exact> <Route path="/tx/:txhash/" exact>
<Details <Details

View File

@ -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 ContentFrame from "../ContentFrame";
import InfoRow from "../components/InfoRow"; import InfoRow from "../components/InfoRow";
import Contract from "./Contract"; import Contract from "./Contract";
@ -40,7 +41,7 @@ const Contracts: React.FC<ContractsProps> = ({
<span> <span>
<span className="font-bold text-green-600">Yes</span> with{" "} <span className="font-bold text-green-600">Yes</span> with{" "}
<span className="font-bold text-green-600"> <span className="font-bold text-green-600">
{ethers.utils.commify(optimizer?.runs)} {commify(optimizer?.runs)}
</span>{" "} </span>{" "}
runs runs
</span> </span>
@ -56,20 +57,24 @@ const Contracts: React.FC<ContractsProps> = ({
)} )}
{rawMetadata !== undefined && rawMetadata !== null && ( {rawMetadata !== undefined && rawMetadata !== null && (
<div> <div>
<div className="flex truncate"> <Tab.Group>
{Object.entries(rawMetadata.sources).map(([k]) => ( <Tab.List className="flex truncate">
<button {Object.entries(rawMetadata.sources).map(([k]) => (
className={`border-b-2 border-transparent rounded-t text-sm px-2 py-1 ${ <Tab key={k} as={Fragment}>
selected === k <button
? "border-orange-300 font-bold bg-gray-200 text-gray-500" className={`border-b-2 border-transparent rounded-t text-sm px-2 py-1 ${
: "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" selected === k
}`} ? "border-orange-300 font-bold bg-gray-200 text-gray-500"
onClick={() => setSelected(k)} : "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"
> }`}
{k} onClick={() => setSelected(k)}
</button> >
))} {k}
</div> </button>
</Tab>
))}
</Tab.List>
</Tab.Group>
{selected && ( {selected && (
<Contract <Contract
checksummedAddress={checksummedAddress} checksummedAddress={checksummedAddress}

View File

@ -1,20 +1,23 @@
import React from "react"; import React, { Fragment } from "react";
import { NavLink } from "react-router-dom"; import { NavLink } from "react-router-dom";
import { Tab } from "@headlessui/react";
type NavTabProps = { type NavTabProps = {
href: string; href: string;
}; };
const NavTab: React.FC<NavTabProps> = ({ href, children }) => ( const NavTab: React.FC<NavTabProps> = ({ href, children }) => (
<NavLink <Tab as={Fragment}>
className="text-gray-500 border-transparent hover:text-link-blue text-sm font-bold px-3 py-3 border-b-2" <NavLink
activeClassName="text-link-blue border-link-blue" className="text-gray-500 border-transparent hover:text-link-blue text-sm font-bold px-3 py-3 border-b-2"
to={href} activeClassName="text-link-blue border-link-blue"
exact to={href}
replace exact
> replace
{children} >
</NavLink> {children}
</NavLink>
</Tab>
); );
export default NavTab; export default NavTab;

View File

@ -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;