211 lines
11 KiB
JavaScript
211 lines
11 KiB
JavaScript
import { useMemo } from "react";
|
|
|
|
import "./Sidebar.scss";
|
|
|
|
import {
|
|
Box,
|
|
Grid,
|
|
Link,
|
|
Paper,
|
|
SvgIcon,
|
|
Typography,
|
|
Divider,
|
|
Accordion,
|
|
AccordionSummary,
|
|
AccordionDetails,
|
|
} from "@mui/material";
|
|
import { styled } from "@mui/material/styles";
|
|
import { NavLink } from "react-router-dom";
|
|
import { useSwitchChain } from "wagmi";
|
|
|
|
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
|
|
import GitHubIcon from '@mui/icons-material/GitHub';
|
|
import XIcon from '@mui/icons-material/X';
|
|
import TelegramIcon from '@mui/icons-material/Telegram';
|
|
import HowToVoteIcon from '@mui/icons-material/HowToVote';
|
|
import HubIcon from '@mui/icons-material/Hub';
|
|
import PublicIcon from '@mui/icons-material/Public';
|
|
import ForkRightIcon from '@mui/icons-material/ForkRight';
|
|
import GavelIcon from '@mui/icons-material/Gavel';
|
|
import CasinoIcon from '@mui/icons-material/Casino';
|
|
import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
|
|
import BookIcon from '@mui/icons-material/Book';
|
|
import CurrencyExchangeIcon from '@mui/icons-material/CurrencyExchange';
|
|
|
|
import GhostIcon from "../../assets/icons/ghost-nav-header.svg?react";
|
|
import NavItem from "../NavItem/NavItem";
|
|
import GhostStyledIcon from "../Icon/GhostIcon";
|
|
import DiscordIcon from "../Icon/DiscordIcon";
|
|
import BondIcon from "../Icon/BondIcon";
|
|
import StakeIcon from "../Icon/StakeIcon";
|
|
import WrapIcon from "../Icon/WrapIcon";
|
|
|
|
import { isNetworkAvailable, isNetworkLegacy, isGovernanceAvailable } from "../../constants";
|
|
import { AVAILABLE_DEXES } from "../../constants/dexes";
|
|
import { GATEKEEPER_ADDRESSES } from "../../constants/addresses";
|
|
import { ECOSYSTEM } from "../../constants/ecosystem";
|
|
import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
|
|
import { sortBondsByDiscount, formatCurrency } from "../../helpers";
|
|
import BondDiscount from "../../containers/Bond/components/BondDiscount";
|
|
|
|
import DashboardIcon from '@mui/icons-material/Dashboard';
|
|
import ShowerIcon from '@mui/icons-material/Shower';
|
|
import WifiProtectedSetupIcon from '@mui/icons-material/WifiProtectedSetup';
|
|
|
|
import { useTokenSymbol } from "../../hooks/tokens";
|
|
import { useLiveBonds } from "../../hooks/bonds/index";
|
|
import pckg from "../../../package.json"
|
|
|
|
const PREFIX = "NavContent";
|
|
|
|
const classes = {
|
|
gray: `${PREFIX}-gray`,
|
|
};
|
|
|
|
const StyledBox = styled(Box)(({ theme }) => ({
|
|
[`& .${classes.gray}`]: {
|
|
color: theme.colors.gray[90],
|
|
},
|
|
}));
|
|
|
|
const NavContent = ({ chainId, addressChainId }) => {
|
|
const { chains } = useSwitchChain();
|
|
const chainName = useMemo(() => {
|
|
return chains.find(chain => chain.id === chainId).name.toLowerCase();
|
|
}, [chains, chainId, addressChainId])
|
|
|
|
const { liveBonds: ghostBonds } = useLiveBonds(chainId);
|
|
const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO");
|
|
const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");
|
|
|
|
const bridgeNumbers = useMemo(() => {
|
|
const connectedNetworks = Object.keys(GATEKEEPER_ADDRESSES).length;
|
|
const number = 1 + connectedNetworks * 3;
|
|
return `(${number}, ${number})`;
|
|
}, [chainId]);
|
|
|
|
return (
|
|
<Paper className="dapp-sidebar">
|
|
<Box className="dapp-sidebar-inner" display="flex" justifyContent="space-between" flexDirection="column">
|
|
<div className="dapp-menu-top">
|
|
<Box className="branding-header">
|
|
<Link href="https://app.dao.ghostchain.io" target="_blank" rel="noopener noreferrer">
|
|
<SvgIcon
|
|
color="primary"
|
|
viewBox="0 0 400 372"
|
|
component={GhostIcon}
|
|
style={{ width: "150px", height: "150px" }}
|
|
/>
|
|
<Box mb="10px" mt="-40px" fontSize="12px" fontWeight="500" lineHeight={"15px"}>
|
|
Version {pckg.version}
|
|
</Box>
|
|
</Link>
|
|
</Box>
|
|
|
|
<Box className="menu-divider">
|
|
<Divider />
|
|
</Box>
|
|
|
|
<div className="dapp-menu-links">
|
|
<div className="dapp-nav" id="navbarNav">
|
|
{isNetworkAvailable(chainId, addressChainId) &&
|
|
<>
|
|
<NavItem icon={DashboardIcon} label={`Dashboard`} to={`/${chainName}/dashboard`} />
|
|
<NavItem
|
|
icon={CurrencyExchangeIcon}
|
|
label={`(3, 3) Swap`}
|
|
to={`/${chainName}/dex/uniswap`}
|
|
children={
|
|
AVAILABLE_DEXES[chainId].length > 1 && <AccordionDetails style={{ margin: "0 0 -10px", display: "flex", flexDirection: "column", gap: "10px" }}>
|
|
{AVAILABLE_DEXES[chainId].map((dex, index) => {
|
|
return (
|
|
<Link
|
|
component={NavLink}
|
|
to={`/${chainName}/dex/${dex.name.toLowerCase()}`}
|
|
key={index}
|
|
style={{ textDecoration: "none" }}
|
|
>
|
|
<Box display="flex" alignItems="center" justifyContent="end">
|
|
<GhostStyledIcon color="inherit" viewBox={dex.viewBox} component={dex.icon} />
|
|
{dex.name} v2
|
|
</Box>
|
|
</Link>
|
|
)
|
|
})}
|
|
</AccordionDetails>
|
|
}
|
|
/>
|
|
<NavItem icon={StakeIcon} label={`(3, 3) Stake`} to={`/${chainName}/stake`} />
|
|
<NavItem
|
|
defaultExpanded
|
|
icon={BondIcon}
|
|
label={`(1, 1) Bond`}
|
|
to={`/${chainName}/bonds`}
|
|
children={
|
|
<AccordionDetails style={{ margin: "0 0 -20px", display: "flex", flexDirection: "column", gap: "10px" }}>
|
|
{sortBondsByDiscount(ghostBonds).map((bond, index) => {
|
|
return (
|
|
<Link
|
|
component={NavLink}
|
|
to={`/${chainName}/bonds/${bond.id}`}
|
|
key={index}
|
|
style={{ textDecoration: "none" }}
|
|
>
|
|
<Box mb="10px" display="flex" justifyContent="end">
|
|
<Typography
|
|
style={{
|
|
width: "180px",
|
|
justifyContent: "space-between",
|
|
display: "flex",
|
|
gap: "10px"
|
|
}}
|
|
component="span"
|
|
variant="body2"
|
|
>
|
|
{bond.displayName}
|
|
<BondDiscount textOnly discount={bond.discount} />
|
|
</Typography>
|
|
</Box>
|
|
</Link>
|
|
)
|
|
})}
|
|
</AccordionDetails>
|
|
}
|
|
/>
|
|
<NavItem icon={ForkRightIcon} label={`${bridgeNumbers} GHOST Staking`} to={`/${chainName}/bridge`} />
|
|
{isGovernanceAvailable(chainId, addressChainId) && <NavItem icon={GavelIcon} label={`Governance`} to={`/${chainName}/governance`} />}
|
|
<Box className="menu-divider">
|
|
<Divider />
|
|
</Box>
|
|
</>
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Box>
|
|
<NavItem href="http://ecosystem.ghostchain.io" icon={PublicIcon} label={`Ecosystem`} />
|
|
<NavItem href="https://ghostchain.io/game-theory-3-3" icon={CasinoIcon} label={`(3, 3) Game Theory`} />
|
|
<NavItem href="https://docs.ghostchain.io/" icon={BookIcon} label={`Documentation`} />
|
|
<StyledBox display="flex" justifyContent="space-around" paddingY="24px">
|
|
<Link href="https://git.ghostchain.io/ghostchain/ghost-dao-contracts" target="_blank" rel="noopener noreferrer">
|
|
<GhostStyledIcon viewBox="0 0 24 24" component={GitHubIcon} className={classes.gray} />
|
|
</Link>
|
|
<Link href="https://x.com/realGhostChain" target="_blank" rel="noopener noreferrer">
|
|
<GhostStyledIcon viewBox="0 0 24 24" component={XIcon} className={classes.gray} />
|
|
</Link>
|
|
<Link href="https://discord.gg/CvYP7vrqN3" target="_blank" rel="noopener noreferrer">
|
|
<GhostStyledIcon viewBox="0 0 24 24" component={DiscordIcon} className={classes.gray} />
|
|
</Link>
|
|
<Link href="https://t.me/realGhostChain" target="_blank" rel="noopener noreferrer">
|
|
<GhostStyledIcon viewBox="0 0 24 24" component={TelegramIcon} className={classes.gray} />
|
|
</Link>
|
|
</StyledBox>
|
|
</Box>
|
|
</Box>
|
|
</Paper>
|
|
);
|
|
};
|
|
|
|
export default NavContent;
|