Extract footer
This commit is contained in:
parent
f79817fc5d
commit
70c29b562f
50
src/App.tsx
50
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 (
|
||||
<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>
|
||||
);
|
||||
|
|
|
@ -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
71
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>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in New Issue