Extract footer

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>
+        <div className="h-screen flex flex-col">
-          <Switch>
+          <Router>
-            <Route path="/" exact>
+            <Switch>
-              <Home />
+              <Route path="/" exact>
-            </Route>
+                <Home />
-            <Route path="/search" exact>
-              <Search />
-            </Route>
-            <Route>
-              <Title />
-              <Route path="/block/:blockNumberOrHash" exact>
-                <Block />
               </Route>
-              <Route path="/block/:blockNumber/txs" exact>
+              <Route path="/search" exact>
-                <BlockTransactions />
+                <Search />
               </Route>
-              <Route path="/tx/:txhash">
+              <Route>
-                <Transaction />
+                <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?">
+            </Switch>
-                <AddressTransactions />
+          </Router>
-              </Route>
+          <Footer />
-            </Route>
+        </div>
-          </Switch>
-        </Router>
       </RuntimeContext.Provider>
     </Suspense>
   );

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

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="m-auto">
-      <div className="flex flex-col m-auto">
+      <Logo />
-        <Logo />
+      <form
-        <form
+        className="flex flex-col"
-          className="flex flex-col m-auto"
+        onSubmit={handleSubmit}
-          onSubmit={handleSubmit}
+        autoComplete="off"
-          autoComplete="off"
+        spellCheck={false}
-          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
+          Search
-            className="w-full border rounded focus:outline-none px-2 py-1 mb-10"
+        </button>
-            type="text"
+        {latestBlock && (
-            size={50}
+          <NavLink
-            placeholder="Search by address / txn hash / block number / ENS name"
+            className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
-            onChange={handleChange}
+            to={`/block/${latestBlock.number}`}
-            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
+            <div>Latest block: {ethers.utils.commify(latestBlock.number)}</div>
-          </button>
+            <Timestamp value={latestBlock.timestamp} />
-          {latestBlock && (
+          </NavLink>
-            <NavLink
+        )}
-              className="mx-auto flex flex-col items-center space-y-1 mt-5 text-sm text-gray-500 hover:text-link-blue"
+      </form>
-              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>
   );
 };

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"