chore: [#3] added warning when not on mainnet

citydaoproject · May 12, 2022 · abb35f6 · abb35f6
1 parent 92c96fc
commit abb35f6
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git 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
@@ -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;
-}
+}