ability to select available networks on NotFound page

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

src/App.jsx

@@ -190,8 +190,18 @@ function App() {
                                         <Route path="/dex/:name" element={<Dex connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                     </>
                                 }
-                                <Route path="/empty" element={<NotFound />} />
+                                <Route path="/empty" element={<NotFound
-                                <Route path="*" element={<NotFound />} />
+                                    wrongNetworkToastId={wrongNetworkToastId}
+                                    setWrongNetworkToastId={setWrongNetworkToastId}
+                                    chainId={addressChainId ? addressChainId : chainId}
+                                    chainExists={chainExists}
+                                />} />
+                                <Route path="*" element={<NotFound
+                                    wrongNetworkToastId={wrongNetworkToastId}
+                                    setWrongNetworkToastId={setWrongNetworkToastId}
+                                    chainId={addressChainId ? addressChainId : chainId}
+                                    chainExists={chainExists}
+                                />} />
                             </Routes>
                         </Suspense>
                     </div>

src/components/TopBar/SelectNetwork.jsx

@@ -8,9 +8,8 @@ import FormHelperText from '@mui/material/FormHelperText';
 import FormControl from '@mui/material/FormControl';
 import Select from '@mui/material/Select';
 
-import { isNetworkAvailable, getNetworkName } from "../../constants";
+import { isNetworkAvailable } from "../../constants";
 import EthIcon from "../../assets/tokens/ETH.svg?react";
-import GhostStyledIcon from "../Icon/GhostIcon";
 
 import { useSwitchChain } from 'wagmi';
 import toast from "react-hot-toast";
@@ -26,15 +25,15 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId })
     }, [chainId])
 
     const handleChange = (event) => {
-        setNetworkId(event.target.value);
-        switchChain({ chainId: event.target.value });
-
         const chainName = chains.find((chain) => chain.id === event.target.value).name;
         toast.dismiss(wrongNetworkToastId);
         const toastId = toast.loading(`Trying to connect to ${chainName} network... Wait please`, {
             position: 'bottom-right'
         });
         setWrongNetworkToastId(toastId);
+
+        setNetworkId(event.target.value);
+        switchChain({ chainId: event.target.value });
     }
 
     return(

src/containers/NotFound/NotFound.jsx

@@ -1,8 +1,40 @@
-import { Box, Link, Typography } from "@mui/material";
+import { useState } from "react";
-import GhostStyledIcon from "../../components/Icon/GhostIcon";
+import { Box, Link, Typography, SvgIcon, Button, useTheme } from "@mui/material";
-import GhostIcon from "../../assets/icons/ghost-nav-header.svg?react";
+import { styled } from "@mui/material/styles";
+
+import GhostStyledIcon from "../../components/Icon/GhostIcon";
+import Paper from "../../components/Paper/Paper";
+
+import GhostIcon from "../../assets/icons/ghost-nav-header.svg?react";
+import EthIcon from "../../assets/tokens/ETH.svg?react";
+
+import { useSwitchChain } from 'wagmi';
+import toast from "react-hot-toast";
+
+export default function NotFound({
+    chainId,
+    chainExists,
+    wrongNetworkToastId,
+    setWrongNetworkToastId
+}) {
+    const theme = useTheme();
+    const { chains, switchChain } = useSwitchChain();
+
+    const [networkId, setNetworkId] = useState(chainId);
+
+    const handleChange = (newChainId) => {
+        const chainName = chains.find((chain) => chain.id === newChainId).name;
+        toast.dismiss(wrongNetworkToastId);
+        const toastId = toast.loading(`Trying to connect to ${chainName} network... Wait please`, {
+            position: 'bottom-right'
+        });
+        setWrongNetworkToastId(toastId);
+
+
+        setNetworkId(newChainId);
+        switchChain({ chainId: newChainId });
+    }
 
-export default function NotFound() {
     return (
         <Box
             height="calc(100vh - 45px)"
@@ -12,15 +44,63 @@ export default function NotFound() {
             justifyContent="center"
             alignItems="center"
         >
-            <Link href="https://ghostchain.io" target="_blank" rel="noopener noreferrer">
+
-                <GhostStyledIcon
+            {chainExists ?
-                    color="primary"
+                <>
-                    viewBox="0 0 385 372"
+                    <Link href="https://ghostchain.io" target="_blank" rel="noopener noreferrer">
-                    component={GhostIcon}
+                        <GhostStyledIcon
-                    style={{ minWidth: "230px", minHeight: "230px", width: "230px" }}
+                            color="primary"
-                    />
+                            viewBox="0 0 385 372"
-            </Link>
+                            component={GhostIcon}
-            <Typography variant="h1">Page not found</Typography>
+                            style={{ minWidth: "230px", minHeight: "230px", width: "230px" }}
+                        />
+                    </Link>
+                    <Typography variant="h1">Page not found</Typography>
+                </>
+                :
+                <Box sx={{ maxWidth: "300px" }}>
+                    <Paper
+                        fullWidth
+                        enableBackground
+                        headerContent={
+                            <Box display="flex" alignItems="center" flexDirection="column" gap="20px">
+                                <Typography variant="h2">Select Network</Typography>
+                                <Box>
+                                    <Typography sx={{ lineHeight: "1.2em", fontSize: "0.88em" }}>
+                                        Here is the list of networks where the protocol has been deployed.
+                                    </Typography>
+                                </Box>
+                            </Box>
+                        }
+                    >
+                        {chains.map(chain => {
+                            return (
+                                <Button
+                                    key={chain.name}
+                                    id={`select-network-menu-button-${chain.id}`}
+                                    variant="text"
+                                    size="large"
+                                    color="secondary"
+                                    sx={{ justifyContent: "start", paddingTop: "10px" }}
+                                    onClick={() => handleChange(chain.id)}
+                                    fullWidth
+                                >
+                                    <Box
+                                        display="flex"
+                                        flexDirection="row"
+                                        justifyContent="space-between"
+                                        alignItems="center"
+                                        gap="15px"
+                                    >
+                                        <SvgIcon component={EthIcon} viewBox="0 0 32 32" />
+                                        <Typography fontSize="1.2em">{chain.name}</Typography>
+                                    </Box>
+                                </Button>
+                            )
+                        })}
+                    </Paper>
+                </Box>
+            }
         </Box>
     );
 }