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 &&

*/}
-
- {/*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 (