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

Extract footer

Browse Source
This commit is contained in:
Willian Mitsuda 2021-07-10 03:17:07 -03:00
parent f79817fc5d
commit 70c29b562f
4 changed files with 77 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/App.tsx
View File

@ -3,6 +3,7 @@ import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./Home";
import Search from "./Search";
import Title from "./Title";
import Footer from "./Footer";
import { RuntimeContext, useRuntime } from "./useRuntime";
const Block = React.lazy(() => import("./Block"));
@ -16,31 +17,36 @@ const App = () => {
return (
<Suspense fallback={<>LOADING</>}>
<RuntimeContext.Provider value={runtime}>
<Router>
<Switch>
<Route path="/" exact>
<Home />
</Route>
<Route path="/search" exact>
<Search />
</Route>
<Route>
<Title />
<Route path="/block/:blockNumberOrHash" exact>
<Block />
<div className="h-screen flex flex-col">
<Router>
<Switch>
<Route path="/" exact>
<Home />
</Route>
<Route path="/block/:blockNumber/txs" exact>
<BlockTransactions />
<Route path="/search" exact>
<Search />
</Route>
<Route path="/tx/:txhash">
<Transaction />
<Route>
<div className="mb-auto">
<Title />
<Route path="/block/:blockNumberOrHash" exact>
<Block />
</Route>
<Route path="/block/:blockNumber/txs" exact>
<BlockTransactions />
</Route>
<Route path="/tx/:txhash">
<Transaction />
</Route>
<Route path="/address/:addressOrName/:direction?">
<AddressTransactions />
</Route>
</div>
</Route>
<Route path="/address/:addressOrName/:direction?">
<AddressTransactions />
</Route>
</Route>
</Switch>
</Router>
</Switch>
</Router>
<Footer />
</div>
</RuntimeContext.Provider>
</Suspense>
);

18
src/Footer.tsx Normal file
View File

@ -0,0 +1,18 @@
import React, { useContext } from "react";
import { RuntimeContext } from "./useRuntime";
const Footer: React.FC = () => {
const { provider } = useContext(RuntimeContext);
return (
<div className="w-full px-2 py-1 border-t border-t-gray-100 text-xs bg-link-blue text-gray-200 text-center">
{provider ? (
<>Using Erigon node at {provider.connection.url}</>
) : (
<>Waiting for the provider...</>
)}
</div>
);
};
export default React.memo(Footer);

71
src/Home.tsx
View File

@ -31,49 +31,38 @@ const Home: React.FC = () => {
document.title = "Home | Otterscan";
return (
<div className="h-screen flex m-auto">
<div className="flex flex-col m-auto">
<Logo />
<form
className="flex flex-col m-auto"
onSubmit={handleSubmit}
autoComplete="off"
spellCheck={false}
<div className="m-auto">
<Logo />
<form
className="flex flex-col"
onSubmit={handleSubmit}
autoComplete="off"
spellCheck={false}
>
<input
className="w-full border rounded focus:outline-none px-2 py-1 mb-10"
type="text"
size={50}
placeholder="Search by address / txn hash / block number / ENS name"
onChange={handleChange}
autoFocus
></input>
<button
className="mx-auto px-3 py-1 mb-10 rounded bg-gray-100 hover:bg-gray-200 focus:outline-none"
type="submit"
>
<input
className="w-full border rounded focus:outline-none px-2 py-1 mb-10"
type="text"
size={50}
placeholder="Search by address / txn hash / block number / ENS name"
onChange={handleChange}
autoFocus
></input>
<button
className="mx-auto px-3 py-1 mb-10 rounded bg-gray-100 hover:bg-gray-200 focus:outline-none"
type="submit"
Search
</button>
{latestBlock && (
<NavLink
className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
to={`/block/${latestBlock.number}`}
>
Search
</button>
{latestBlock && (
<NavLink
className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
to={`/block/${latestBlock.number}`}
>
<div>
Latest block: {ethers.utils.commify(latestBlock.number)}
</div>
<Timestamp value={latestBlock.timestamp} />
</NavLink>
)}
<span className="mx-auto mt-5 text-xs text-gray-500">
{provider ? (
<>Using Erigon node at {provider.connection.url}</>
) : (
<>Waiting for the provider...</>
)}
</span>
</form>
</div>
<div>Latest block: {ethers.utils.commify(latestBlock.number)}</div>
<Timestamp value={latestBlock.timestamp} />
</NavLink>
)}
</form>
</div>
);
};

2
src/Logo.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
const Logo: React.FC = () => (
<div className="mx-auto -mt-32 mb-16 text-6xl text-link-blue font-title font-bold cursor-default flex items-center space-x-4">
<div className="mx-auto mb-16 text-6xl text-link-blue font-title font-bold cursor-default flex items-center space-x-4">
<img
className="rounded-full"
src="/otter.jpg"