fix for the max possible payout based on the @harpo suggestion

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

package.json

@@ -1,7 +1,7 @@
 {
   "name": "ghost-dao-interface",
   "private": true,
-  "version": "0.0.27",
+  "version": "0.0.29",
   "type": "module",
   "scripts": {
     "dev": "vite",

src/App.jsx

@@ -108,26 +108,9 @@ function App() {
     const provider = usePublicClient();
     const chainId  = useChainId();
 
-    const [migrationModalOpen, setMigrationModalOpen] = useState(false);
-    const migModalClose = () => {
-        setMigrationModalOpen(false);
-    };
-
     const isSmallerScreen = useMediaQuery("(max-width: 1047px)");
     const isSmallScreen = useMediaQuery("(max-width: 600px)");
 
-    async function loadDetails(whichDetails) {
-        const loadProvider = provider;
-
-        if (whichDetails === "app") {
-            loadApp(loadProvider);
-        }
-
-        if (whichDetails === "account" && address && isConnected) {
-            loadAccount(loadProvider);
-        }
-    }
-
     useEffect(() => {
         if (shouldTriggerSafetyCheck()) {
             toast.success("Safety Check: Always verify you're on app.dao.ghostchain.io!", { duration: 5000 });
@@ -136,7 +119,7 @@ function App() {
 
     useEffect(() => {
         if (isConnected && chainId !== addressChainId) {
-            const toastId = toast.loading("You are connected to wrong network. Use Sepolia Testnet please.", {
+            const toastId = toast.loading("You are connected to wrong network. Use one of the deployed networks please.", {
                 position: 'bottom-right'
             });
             setWrongNetworkToastId(toastId);
@@ -177,8 +160,11 @@ function App() {
                 <div className={`app ${isSmallerScreen && "tablet"} ${isSmallScreen && "mobile"} ${theme}`}>
                     <Toaster>{t => <Messages toast={t} />}</Toaster>
                     <TopBar
+                        wrongNetworkToastId={wrongNetworkToastId}
+                        setWrongNetworkToastId={setWrongNetworkToastId}
                         address={address}
                         chainId={addressChainId ? addressChainId : chainId}
+                        chainExists={chainExists}
                         handleDrawerToggle={handleDrawerToggle}
                         connect={tryConnectInjected}
                     />
@@ -204,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>

src/assets/tokens/ETH.svg

@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="2500" height="2500" viewBox="0 0 32 32">
+  <g fill="none" fill-rule="evenodd">
+    <circle cx="16" cy="16" r="16" fill="#627EEA"/>
+    <g fill="#FFF" fill-rule="nonzero">
+      <path fill-opacity=".602" d="M16.498 4v8.87l7.497 3.35z"/>
+      <path d="M16.498 4L9 16.22l7.498-3.35z"/>
+      <path fill-opacity=".602" d="M16.498 21.968v6.027L24 17.616z"/>
+      <path d="M16.498 27.995v-6.028L9 17.616z"/>
+      <path fill-opacity=".2" d="M16.498 20.573l7.497-4.353-7.497-3.348z"/>
+      <path fill-opacity=".602" d="M9 16.22l7.498 4.353v-7.701z"/>
+    </g>
+  </g>
+</svg>

src/components/TopBar/SelectNetwork.jsx

@@ -0,0 +1,71 @@
+import { useState, useEffect } from "react";
+
+import { Box, Typography, SvgIcon, useTheme } from "@mui/material";
+
+import InputLabel from '@mui/material/InputLabel';
+import MenuItem from '@mui/material/MenuItem';
+import FormHelperText from '@mui/material/FormHelperText';
+import FormControl from '@mui/material/FormControl';
+import Select from '@mui/material/Select';
+
+import { isNetworkAvailable } from "../../constants";
+import EthIcon from "../../assets/tokens/ETH.svg?react";
+
+import { useSwitchChain } from 'wagmi';
+import toast from "react-hot-toast";
+
+function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId }) {
+    const theme = useTheme();
+    const { chains, switchChain } = useSwitchChain();
+
+    const [networkId, setNetworkId] = useState(chainId);
+
+    useEffect(() => {
+        if (chainId !== networkId) setNetworkId(chainId);
+    }, [chainId])
+
+    const handleChange = (event) => {
+        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(
+        <FormControl sx={{ width: "155px" }}>
+            <Select
+                labelId="network-select-helper-label"
+                id="network-select-helper"
+                value={networkId}
+                onChange={handleChange}
+                sx={{
+                    boxShadow: 'none',
+                    '.MuiOutlinedInput-notchedOutline': {
+                        borderColor: `${theme.colors.backgroundColor} !important`,
+                    },
+                    '.Mui-focused': {
+                        border: `1px solid ${theme.colors.backgroundColor} !important`,
+                    }
+                }}
+            >
+                {chains.map(chain => {
+                    return (
+                        <MenuItem key={chain.name} value={chain.id}>
+                            <Box gap="10px" display="flex" flexDirection="row" alignItems="center">
+                                <SvgIcon component={EthIcon} viewBox="0 0 32 32" />
+                                <Typography>{chain.name}</Typography>
+                            </Box>
+                        </MenuItem>
+                    )
+                })}
+            </Select>
+        </FormControl>
+    )
+}
+
+export default SelectNetwork;

src/components/TopBar/TopBar.jsx

@@ -1,6 +1,8 @@
 import { Box, Button, SvgIcon, useMediaQuery, useTheme } from "@mui/material";
 import MenuIcon from "../../assets/icons/hamburger.svg?react";
 import Wallet from "./Wallet"
+import SelectNetwork from "./SelectNetwork";
+
 
 const PREFIX = "TopBar";
 
@@ -10,7 +12,15 @@ const classes = {
     pageTitle: `${PREFIX}-pageTitle`,
 };
 
-function TopBar({ chainId, address, connect, handleDrawerToggle }) {
+function TopBar({
+    chainId,
+    chainExists,
+    address,
+    wrongNetworkToastId,
+    connect,
+    handleDrawerToggle,
+    setWrongNetworkToastId
+}) {
     const themeColor = useTheme();
     const desktop = useMediaQuery(themeColor.breakpoints.up(1048));
     return (
@@ -22,7 +32,12 @@ function TopBar({ chainId, address, connect, handleDrawerToggle }) {
             marginRight={desktop ? "33px" : "0px"}
             >
             <Box display="flex" alignItems="center">
-                <Box display="flex" alignItems="center">
+                <Box display="flex" justifyContent="space-between" alignItems="center" width="320px">
+                    <SelectNetwork
+                        wrongNetworkToastId={wrongNetworkToastId}
+                        setWrongNetworkToastId={setWrongNetworkToastId}
+                        chainId={chainId}
+                    />
                     <Wallet address={address} connect={connect} chainId={chainId} />
                 </Box>
                 {!desktop && (

src/components/TopBar/Wallet/WalletAddressEns.tsx

@@ -8,10 +8,7 @@ export default function WalletAddressEns() {
 
     return (
         <div className="wallet-link">
-            {/*ens?.avatar && <img className="avatar" src={ens.avatar} alt={address} />*/}
-
             <Link href={`https://etherscan.io/address/${address}`} target="_blank">
-                {/*ens?.name || shorten(address)*/}
                 {shorten(address)}
             </Link>
         </div>

src/components/TopBar/Wallet/index.tsx

@@ -11,7 +11,7 @@ const WalletButton = ({ openWallet, connect }) => {
     const { isConnected, chain } = useAccount();
     const theme = useTheme();
     const onClick = isConnected ? openWallet : connect;
-    const label = isConnected ? `Wallet on ${chain?.name ? chain.name : "Unknown"}` : `Connect Wallet`;
+    const label = isConnected ? "Open Wallet" : `Connect Wallet`;
     return (
         <Button
             id="fatso-menu-button"

src/containers/Bond/components/BondInputArea.jsx

@@ -82,11 +82,6 @@ const BondInputArea = ({
         : bond.capacity.inBaseToken
     );
 
-    const quoteTokenString = (bond.maxPayout.inQuoteToken.lt(bond.capacity.inQuoteToken)
-        ? bond.maxPayout.inQuoteToken
-        : bond.capacity.inQuoteToken
-    );
-
     return (
         <Box minHeight="calc(100vh - 210px)" display="flex" flexDirection="column" justifyContent="center">
             <Box display="flex" flexDirection="row" width="100%" justifyContent="center" mt="10px">
@@ -188,7 +183,7 @@ const BondInputArea = ({
                                         <span>
                                             {bond.baseToken.tokenAddress.toUpperCase() === bond.quoteToken.quoteTokenAddress.toUpperCase()
                                                 ? `${formatCurrency(baseTokenString, formatDecimals, "FTSO")}`
-                                                : `${formatCurrency(baseTokenString, formatDecimals, "FTSO")} (≈${formatCurrency(quoteTokenString, formatDecimals, "GHST")})`}
+                                                : `${formatCurrency(baseTokenString, formatDecimals, "FTSO")} (≈${formatCurrency(baseTokenString.div(currentIndex), formatDecimals, "GHST")})`}
                                             </span>
                                         }
                                     />

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 (
         <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>
     );
 }