DAC-290 capture network and show banners

react-web/src/app/App.scss

@@ -9,4 +9,20 @@ header button {
 section > svg.spinner {
     top: 100px;
     left: 50%;
+}
+
+
+#contentWrapper {
+    margin: 0 auto;
+    padding: 40px;
+    color: #2d333a;
+    @media (max-width: 768px) {
+      & {
+        padding: 0;
+      }
+    }
+}
+
+#globalBanners {
+    padding: 10px 40px;
 }

react-web/src/app/App.tsx

@@ -1,12 +1,14 @@
-import React, { lazy, Suspense } from "react";
+import React, { lazy, memo, Suspense } from "react";
 import { Routes, Route, Outlet } from "react-router-dom";
 import { BASE_URL } from "constants/route";
+import Alert from '@mui/material/Alert';
 
 import "./App.scss";
 import Header from "components/Header/Header";
 import PrivateRoutes from "components/PrivateRoutes/PrivateRoutes";
 import NotFound from "components/NotFound/NotFound";
 import Loader from "components/Loader/Loader";
+import { useAppSelector } from "store/store";
 
 const Certification = lazy(() => import("../pages/certification/Certification"));
 const MaintenancePage = lazy(() => import("../pages/maintenance/Maintenance"));
@@ -19,9 +21,31 @@ const Pricing = lazy(() => import("../pages/pricing/Pricing"));
 
 
 const PageLayout = () => {
+  const { network } = useAppSelector((state) => state.auth);
+
+  const networkNames:{[x:string]:string} = {
+    '0': 'Mainnet',
+    '1': 'Testnet',
+    '2': 'Preprod'
+  }
+
+  const Banner = memo(() => {
+    const networkEnvVar: any = process.env.REACT_APP_WALLET_NETWORK
+
+    return (<>
+      {network !== null && network !== 1 ? 
+        <Alert severity="info" style={{marginBottom: '10px'}}>Your connected wallet is not in Mainnet.</Alert> : null}
+      {network !== null && network?.toString() !== networkEnvVar ? 
+        <Alert severity="warning">Please make sure you are connected to wallet in {networkNames[networkEnvVar]}.</Alert> : null}
+    </>)
+  })
+
   return (
     <>
       <Header />
+      <section id="globalBanners">
+        <Banner />
+      </section>
       {/* Load page content here */}
       <section data-testid="contentWrapper" id="contentWrapper">
         <Suspense fallback={<Loader />}>

react-web/src/components/ConnectWallet/ConnectWallet.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useCallback } from "react";
 import { useAppDispatch } from "store/store";
-import { getProfileDetails } from "store/slices/auth.slice";
+import { getProfileDetails, setNetwork } from "store/slices/auth.slice";
 
 import Modal from "components/Modal/Modal";
 import Button from "components/Button/Button";
@@ -35,11 +35,14 @@ const ConnectWallet = () => {
         try {
             setWalletLoading(true)
             const enabledWallet = await CardanoNS[walletName].enable();
-            setWallet(enabledWallet)
-            setWalletName(walletName)
-            if (enabledWallet) {
-                setAddress(await enabledWallet.getChangeAddress())
-            }
+            enabledWallet.getNetworkId().then(async (data: number) => { console.log('new network -', data)
+                dispatch(setNetwork(data))
+                setWallet(enabledWallet)
+                setWalletName(walletName)
+                if (enabledWallet) {
+                    setAddress(await enabledWallet.getChangeAddress())
+                }
+            })
         } catch (err) {
             handleError(err)
         }

react-web/src/components/Header/Header.tsx

@@ -1,18 +1,19 @@
 import React, { useEffect, useState, memo, useCallback } from "react";
 import { useNavigate, Link } from "react-router-dom";
 import { useAppDispatch, useAppSelector } from "store/store";
-import { logout, getProfileDetails } from "store/slices/auth.slice";
+import { logout, getProfileDetails, setNetwork } from "store/slices/auth.slice";
 import "./Header.scss";
 
 import AvatarDropDown from "components/AvatarDropdown/AvatarDropdown";
 import ConnectWallet from "components/ConnectWallet/ConnectWallet";
 import { useDelayedApi } from "hooks/useDelayedApi";
 
 const Header = () => {
-  const { isLoggedIn, address, wallet } = useAppSelector((state) => state.auth);
+  const { isLoggedIn, address, wallet, network } = useAppSelector((state) => state.auth);
   const dispatch = useAppDispatch();
   const [isActive, setIsActive] = useState(false);
   const [pollForAddress, setPollForAddress] = useState(false);
+  const [pollForNetwork, setPollForNetwork] = useState(false);
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -24,6 +25,9 @@ const Header = () => {
         try {
           const enabledWallet = await window.cardano[walletNameCache].enable()
           dispatch(getProfileDetails({"address": addressCache, "wallet": enabledWallet, "walletName": walletNameCache}))
+          enabledWallet.getNetworkId().then(async (data: number) => { console.log('new network -', data)
+            dispatch(setNetwork(data))
+          })
         } catch(e) {
           console.log(e)
         }
@@ -41,24 +45,45 @@ const Header = () => {
 
   useEffect(() => {
     setPollForAddress(wallet && address && isLoggedIn);
-  }, [wallet, address, isLoggedIn]);
+    setPollForNetwork(wallet && address && isLoggedIn && network !== null)
+  }, [wallet, address, isLoggedIn, network]);
+
+  const forceUserLogout = () => {
+    // account/network has been changed. Force logout the user
+    setPollForAddress(false);
+    setPollForNetwork(false)
+    dispatch(logout());
+  }
 
   useDelayedApi(
     async () => {
       setPollForAddress(false);
       const newAddress = wallet ? await wallet.getChangeAddress() : null;
       if (newAddress && address !== newAddress) {
-        // account has been changed. Force logout the user
-        dispatch(logout());
-        setPollForAddress(false);
+        forceUserLogout()
       } else {
         setPollForAddress(true);
       }
     },
-    3 * 1000,
+    1 * 1000,
     pollForAddress
   );
 
+  useDelayedApi(
+    async() => {
+      setPollForNetwork(false)
+      wallet.getNetworkId().then((id: number) => {
+        if (id !== network) {
+          forceUserLogout();
+        } else {
+          setPollForNetwork(false)
+        }
+      })
+    },
+    1 * 1000,
+    pollForNetwork
+  )
+
   const hasCachedAddress = () => {
     return (!localStorage.getItem('address')?.length || !localStorage.getItem('walletName')?.length)
   }

react-web/src/index.scss

@@ -15,17 +15,6 @@ body {
   // position: relative;
 }
 
-#contentWrapper {
-  margin: 0 auto;
-  padding: 40px;
-  color: #2d333a;
-  @media (max-width: 768px) {
-    & {
-      padding: 0;
-    }
-  }
-}
-
 input {
   font-family: monospace, -apple-system, BlinkMacSystemFont, "Segoe UI",
     "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",

react-web/src/store/slices/auth.slice.ts

@@ -9,6 +9,7 @@ interface AuthState {
   wallet: any;
   userDetails: IUserProfile;
   loading: boolean;
+  network: number | null;
 }
 
 // Define the initial state using that type
@@ -17,7 +18,8 @@ const initialState: AuthState = {
   address: '',
   wallet: null,
   userDetails: {dapp: null},
-  loading: false
+  loading: false,
+  network: null
 };
 
 const clearLSCache = () => {
@@ -41,9 +43,13 @@ export const authSlice = createSlice({
       clearLSCache();
     },
     logout: (state) => {
-      clearLSCache()
+      clearLSCache();
+      state.loading = false;
       return initialState
     },
+    setNetwork: (state, actions) => {
+      state.network = actions.payload
+    }
   },
   extraReducers: (builder) => {
     builder.addCase(getProfileDetails.pending, (state) => {state.loading = true;})
@@ -70,6 +76,6 @@ export const authSlice = createSlice({
 });
 
 
-export const { logout, clearCache } = authSlice.actions;
+export const { logout, clearCache, setNetwork } = authSlice.actions;
 
 export default authSlice.reducer;