diff --git a/src/App.jsx b/src/App.jsx index 584c742..1986763 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -190,8 +190,18 @@ function App() { } /> } - } /> - } /> + } /> + } /> diff --git a/src/components/TopBar/SelectNetwork.jsx b/src/components/TopBar/SelectNetwork.jsx index fa5473f..9341680 100644 --- a/src/components/TopBar/SelectNetwork.jsx +++ b/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( diff --git a/src/containers/NotFound/NotFound.jsx b/src/containers/NotFound/NotFound.jsx index cea5b77..39bc59c 100644 --- a/src/containers/NotFound/NotFound.jsx +++ b/src/containers/NotFound/NotFound.jsx @@ -1,8 +1,40 @@ -import { Box, Link, Typography } from "@mui/material"; -import GhostStyledIcon from "../../components/Icon/GhostIcon"; -import GhostIcon from "../../assets/icons/ghost-nav-header.svg?react"; +import { useState } from "react"; +import { Box, Link, Typography, SvgIcon, Button, useTheme } from "@mui/material"; +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 ( - - - - Page not found + + {chainExists ? + <> + + + + Page not found + + : + + + Select Network + + + Here is the list of networks where the protocol has been deployed. + + + + } + > + {chains.map(chain => { + return ( + + ) + })} + + + } ); }