From abb35f633dfdb3781b7d54e8f21286d67ef1513d Mon Sep 17 00:00:00 2001
From: "Michael D. Norman" <michael.norman@denormans.com>
Date: Thu, 12 May 2022 09:03:13 -0500
Subject: [PATCH] chore: [#3] added warning when not on mainnet

---
 pages/index.tsx    |  5 ++++-
 styles/globals.css | 12 +++++++++---
 2 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/pages/index.tsx b/pages/index.tsx
index 9d311bd..b6147db 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -32,7 +32,7 @@ const Home: NextPage = () => {
     account: address,
     connect,
     disconnect,
-    chainId, // TODO trkaplan warn users connected to different chain for better UX
+    chainId,
   } = useWallet();
 
   const { parcelNFTDetails, refetch } = useParcelNFT(PARCEL0_NFT_CONTRACT_ADDRESSES[chainId ?? 0]);
@@ -110,6 +110,9 @@ const Home: NextPage = () => {
       <div className="page-header">
         <div className="header-content">
           <img className="logo" src="/citydao-logo.png" alt="CityDAO" />
+          {chainId && chainId !== 1 ? (
+            <div className="network-warning-container">Warning: Not on Main Ethereum Network</div>
+          ) : null}
           <div className="connect-button-container">
             <ConnectButton onClick={connect} address={address || undefined} enabled={true} />
           </div>
diff --git a/styles/globals.css b/styles/globals.css
index 6189b6a..42ec5b9 100644
--- a/styles/globals.css
+++ b/styles/globals.css
@@ -8,6 +8,7 @@
   --color-hover: #d7e5e0;
   --color-disabled: #a7a7a7;
   --color-disabled-text: gray;
+  --color-warning: #ff9900;
   --width-max:1444px;
 }
 
@@ -46,6 +47,11 @@ main {
   display: flex;
   justify-content: space-between;
 }
+.network-warning-container {
+  color: var(--color-warning);
+  align-items: center;
+  display: flex;
+}
 .connect-button-container {
   border-left: 1px solid var(--color-primary);
   align-items: center;
@@ -360,11 +366,11 @@ button.border-button {
   bottom: 0;
   right: 0;
   left: 0;
-  
+
   display: flex;
   align-items: center;
   justify-content: center;
-  
+
   background: rgba(0,0,0,0.5);
 }
 
@@ -384,4 +390,4 @@ button.border-button {
   line-height: 20px;
   width: 365px;
   margin: 42px auto 0;
-}
\ No newline at end of file
+}