package.json

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

src/App.jsx

@@ -108,9 +108,26 @@ 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 });
@@ -119,7 +136,7 @@ function App() {
 
     useEffect(() => {
         if (isConnected && chainId !== addressChainId) {
-            const toastId = toast.loading("You are connected to wrong network. Use one of the deployed networks please.", {
+            const toastId = toast.loading("You are connected to wrong network. Use Sepolia Testnet please.", {
                 position: 'bottom-right'
             });
             setWrongNetworkToastId(toastId);
@@ -160,11 +177,8 @@ 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}
                     />
@@ -190,18 +204,8 @@ 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 />} />
-                                    wrongNetworkToastId={wrongNetworkToastId}
+                                <Route path="*" element={<NotFound />} />
-                                    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

@@ -1,13 +0,0 @@
-<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

@@ -1,71 +0,0 @@
-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,8 +1,6 @@
 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";
 
@@ -12,15 +10,7 @@ const classes = {
     pageTitle: `${PREFIX}-pageTitle`,
 };
 
-function TopBar({
+function TopBar({ chainId, address, connect, handleDrawerToggle }) {
-    chainId,
-    chainExists,
-    address,
-    wrongNetworkToastId,
-    connect,
-    handleDrawerToggle,
-    setWrongNetworkToastId
-}) {
     const themeColor = useTheme();
     const desktop = useMediaQuery(themeColor.breakpoints.up(1048));
     return (
@@ -32,12 +22,7 @@ function TopBar({
             marginRight={desktop ? "33px" : "0px"}
             >
             <Box display="flex" alignItems="center">
-                <Box display="flex" justifyContent="space-between" alignItems="center" width="320px">
+                <Box display="flex" alignItems="center">
-                    <SelectNetwork
-                        wrongNetworkToastId={wrongNetworkToastId}
-                        setWrongNetworkToastId={setWrongNetworkToastId}
-                        chainId={chainId}
-                    />
                     <Wallet address={address} connect={connect} chainId={chainId} />
                 </Box>
                 {!desktop && (

src/components/TopBar/Wallet/WalletAddressEns.tsx

@@ -8,7 +8,10 @@ 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 ? "Open Wallet" : `Connect Wallet`;
+    const label = isConnected ? `Wallet on ${chain?.name ? chain.name : "Unknown"}` : `Connect Wallet`;
     return (
         <Button
             id="fatso-menu-button"

src/containers/Bond/components/BondInputArea.jsx

@@ -82,6 +82,11 @@ 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">
@@ -183,7 +188,7 @@ const BondInputArea = ({
                                         <span>
                                             {bond.baseToken.tokenAddress.toUpperCase() === bond.quoteToken.quoteTokenAddress.toUpperCase()
                                                 ? `${formatCurrency(baseTokenString, formatDecimals, "FTSO")}`
-                                                : `${formatCurrency(baseTokenString, formatDecimals, "FTSO")} (≈${formatCurrency(baseTokenString.div(currentIndex), formatDecimals, "GHST")})`}
+                                                : `${formatCurrency(baseTokenString, formatDecimals, "FTSO")} (≈${formatCurrency(quoteTokenString, formatDecimals, "GHST")})`}
                                             </span>
                                         }
                                     />

src/containers/NotFound/NotFound.jsx

@@ -1,40 +1,8 @@
-import { useState } from "react";
+import { Box, Link, Typography } from "@mui/material";
-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)"
@@ -44,63 +12,15 @@ export default function NotFound({
             justifyContent="center"
             alignItems="center"
         >
-
+            <Link href="https://ghostchain.io" target="_blank" rel="noopener noreferrer">
-            {chainExists ?
+                <GhostStyledIcon
-                <>
+                    color="primary"
-                    <Link href="https://ghostchain.io" target="_blank" rel="noopener noreferrer">
+                    viewBox="0 0 385 372"
-                        <GhostStyledIcon
+                    component={GhostIcon}
-                            color="primary"
+                    style={{ minWidth: "230px", minHeight: "230px", width: "230px" }}
-                            viewBox="0 0 385 372"
+                    />
-                            component={GhostIcon}
+            </Link>
-                            style={{ minWidth: "230px", minHeight: "230px", width: "230px" }}
+            <Typography variant="h1">Page not found</Typography>
-                        />
-                    </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>
     );
 }