Display warning header when not on mainnet

src/App.tsx

@@ -1,5 +1,6 @@
 import React, { Suspense } from "react";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import WarningHeader from "./WarningHeader";
 import Home from "./Home";
 import Search from "./Search";
 import Title from "./Title";
@@ -26,6 +27,7 @@ const App = () => {
       ) : (
         <RuntimeContext.Provider value={runtime}>
           <div className="h-screen flex flex-col">
+            <WarningHeader />
             <Router>
               <Switch>
                 <Route path="/" exact>

src/WarningHeader.tsx

@@ -0,0 +1,28 @@
+import React, { useContext } from "react";
+import { RuntimeContext } from "./useRuntime";
+
+const WarningHeader: React.FC = () => {
+  const { provider } = useContext(RuntimeContext);
+  const chainId = provider?.network.chainId;
+  if (chainId === 1) {
+    return <></>;
+  }
+
+  let chainMsg = `ChainID: ${chainId}`;
+  if (chainId === 3) {
+    chainMsg = "Ropsten Testnet";
+  } else if (chainId === 4) {
+    chainMsg = "Rinkeby Testnet";
+  } else if (chainId === 5) {
+    chainMsg = "Görli Testnet";
+  } else if (chainId === 42) {
+    chainMsg = "Kovan Testnet";
+  }
+  return (
+    <div className="w-full bg-orange-400 text-white text-center font-bold px-2 py-1">
+      You are on {chainMsg}
+    </div>
+  );
+};
+
+export default React.memo(WarningHeader);