network selection added as menu select element. also some unused code removed

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.28",
   "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}
                     />

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,72 @@
+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, getNetworkName } 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";
+
+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) => {
+        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);
+    }
+
+    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"