From fddfbfc29b9c54cab27fec6a5200a86c0dad7b81 Mon Sep 17 00:00:00 2001
From: Willian Mitsuda <wmitsuda@gmail.com>
Date: Sat, 24 Jul 2021 05:46:48 -0300
Subject: [PATCH] Display warning header when not on mainnet

---
 src/App.tsx           |  2 ++
 src/WarningHeader.tsx | 28 ++++++++++++++++++++++++++++
 2 files changed, 30 insertions(+)
 create mode 100644 src/WarningHeader.tsx

diff --git a/src/App.tsx b/src/App.tsx
index 4a4c323..72326ee 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/WarningHeader.tsx b/src/WarningHeader.tsx
new file mode 100644
index 0000000..b21c249
--- /dev/null
+++ b/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);