ghostchain/ghost-dao-interface
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2025-05-15 19:53:47 +03:00
parent 7f0b59aa8c
commit 1376e380fd
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
7 changed files with 108 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

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

22
src/App.jsx
View File

@ -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}
/>

13
src/assets/tokens/ETH.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 617 B

72
src/components/TopBar/SelectNetwork.jsx Normal file
View File

@ -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;

19
src/components/TopBar/TopBar.jsx
View File

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

3
src/components/TopBar/Wallet/WalletAddressEns.tsx
View File

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

2
src/components/TopBar/Wallet/index.tsx
View File

@ -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"