diff --git a/src/App.tsx b/src/App.tsx index 2bf5e2a..195f2e8 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -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 ( LOADING}> - - - - - - - - - - - <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> ); diff --git a/src/Footer.tsx b/src/Footer.tsx new file mode 100644 index 0000000..61d59d7 --- /dev/null +++ b/src/Footer.tsx @@ -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); diff --git a/src/Home.tsx b/src/Home.tsx index 8626dce..7d74fcd 100644 --- a/src/Home.tsx +++ b/src/Home.tsx @@ -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> ); }; diff --git a/src/Logo.tsx b/src/Logo.tsx index 9d00d2c..905ee2c 100644 --- a/src/Logo.tsx +++ b/src/Logo.tsx @@ -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"