107 lines
4.2 KiB
JavaScript
107 lines
4.2 KiB
JavaScript
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 });
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
height="calc(100vh - 45px)"
|
|
width="100%"
|
|
display="flex"
|
|
flexDirection="column"
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
>
|
|
|
|
{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>
|
|
);
|
|
}
|