ghostchain/ghost-dao-interface
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ability to select available networks on NotFound page

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2025-05-15 21:55:33 +03:00
parent 1376e380fd
commit b340a532a1
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
3 changed files with 109 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/App.jsx
View File

@ -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="*" element={<NotFound />} />
<Route path="/empty" 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>

9
src/components/TopBar/SelectNetwork.jsx
View File

@ -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(

106
src/containers/NotFound/NotFound.jsx
View File

@ -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 (
<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
color="primary"
viewBox="0 0 385 372"
component={GhostIcon}
style={{ minWidth: "230px", minHeight: "230px", width: "230px" }}
/>
</Link>
<Typography variant="h1">Page not found</Typography>
{chainExists ?
<>
<Link href="https://ghostchain.io" target="_blank" rel="noopener noreferrer">
<GhostStyledIcon
color="primary"
viewBox="0 0 385 372"
component={GhostIcon}
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>
);
}