diff --git a/package.json b/package.json index d459c65..f1b854a 100644 --- a/package.json +++ b/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", diff --git a/src/App.jsx b/src/App.jsx index 503d7cd..584c742 100644 --- a/src/App.jsx +++ b/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() {
{t => } diff --git a/src/assets/tokens/ETH.svg b/src/assets/tokens/ETH.svg new file mode 100644 index 0000000..2b0b05d --- /dev/null +++ b/src/assets/tokens/ETH.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/src/components/TopBar/SelectNetwork.jsx b/src/components/TopBar/SelectNetwork.jsx new file mode 100644 index 0000000..fa5473f --- /dev/null +++ b/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( + + + + ) +} + +export default SelectNetwork; diff --git a/src/components/TopBar/TopBar.jsx b/src/components/TopBar/TopBar.jsx index 9994be8..487909c 100644 --- a/src/components/TopBar/TopBar.jsx +++ b/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"} > - + + {!desktop && ( diff --git a/src/components/TopBar/Wallet/WalletAddressEns.tsx b/src/components/TopBar/Wallet/WalletAddressEns.tsx index 2c364cb..c44269d 100644 --- a/src/components/TopBar/Wallet/WalletAddressEns.tsx +++ b/src/components/TopBar/Wallet/WalletAddressEns.tsx @@ -8,10 +8,7 @@ export default function WalletAddressEns() { return (
- {/*ens?.avatar && {address}*/} - - {/*ens?.name || shorten(address)*/} {shorten(address)}
diff --git a/src/components/TopBar/Wallet/index.tsx b/src/components/TopBar/Wallet/index.tsx index 3b988a2..8dbcefa 100644 --- a/src/components/TopBar/Wallet/index.tsx +++ b/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 (