234 lines
12 KiB
JavaScript
234 lines
12 KiB
JavaScript
import React 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 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 ForumIcon from '@mui/icons-material/Forum';
|
|
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 } from "../../constants";
|
|
import { AVAILABLE_DEXES } from "../../constants/dexes";
|
|
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 { useTokenSymbol } from "../../hooks/tokens";
|
|
import { useFtsoPrice, useGhstPrice } from "../../hooks/prices";
|
|
import { useLiveBonds } from "../../hooks/bonds/index";
|
|
|
|
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 { liveBonds: ghostBonds } = useLiveBonds(chainId);
|
|
const ftsoPrice = useFtsoPrice(chainId);
|
|
const ghstPrice = useGhstPrice(chainId);
|
|
|
|
const { symbol: ftsoSymbol } = useTokenSymbol(chainId, "FTSO");
|
|
const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");
|
|
|
|
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" }}
|
|
/>
|
|
</Link>
|
|
<Box display="flex" flexDirection="column" mt="10px">
|
|
<Box fontSize="12px" fontWeight="500" lineHeight={"15px"}>
|
|
{ftsoSymbol} Price: {formatCurrency(ftsoPrice, 2)}
|
|
</Box>
|
|
<Box fontSize="12px" fontWeight="500" lineHeight="15px">
|
|
{ghstSymbol} Price: {formatCurrency(ghstPrice, 2)}
|
|
</Box>
|
|
</Box>
|
|
</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="/dashboard" />
|
|
<NavItem
|
|
defaultExpanded
|
|
icon={BondIcon}
|
|
label={`Bond`}
|
|
to="/bonds"
|
|
children={
|
|
<AccordionDetails style={{ margin: "0 0 -20px", display: "flex", flexDirection: "column", gap: "10px" }}>
|
|
{sortBondsByDiscount(ghostBonds).map((bond, index) => {
|
|
return (
|
|
<Link
|
|
component={NavLink}
|
|
to={`/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={StakeIcon} label={`Stake`} to="/stake" />
|
|
<NavItem icon={ShowerIcon} label={`Faucet`} to="/faucet" />
|
|
<NavItem
|
|
icon={CurrencyExchangeIcon}
|
|
label={`Dex`}
|
|
to={'/dex/uniswap'}
|
|
children={
|
|
<AccordionDetails style={{ margin: "0 0 -10px", display: "flex", flexDirection: "column", gap: "10px" }}>
|
|
{AVAILABLE_DEXES[chainId].map((dex, index) => {
|
|
return (
|
|
<Link
|
|
component={NavLink}
|
|
to={`/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>
|
|
}
|
|
/>
|
|
<Box className="menu-divider">
|
|
<Divider />
|
|
</Box>
|
|
</>
|
|
}
|
|
|
|
<NavItem icon={PublicIcon} label={`Bridge`} href="https://bridge.ghostchain.io/" />
|
|
<NavItem
|
|
to=''
|
|
icon={PublicIcon}
|
|
label={`Ecosystem`}
|
|
children={
|
|
<AccordionDetails style={{ margin: "0 0 -10px", display: "flex", flexDirection: "column", gap: "10px" }}>
|
|
{ECOSYSTEM.map((item, index) => {
|
|
return (
|
|
<Link
|
|
href={item.link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
key={index}
|
|
style={{ textDecoration: "none" }}
|
|
>
|
|
<Box display="flex" justifyContent="end">
|
|
<Typography style={{ display: "flex", alignItems: "center" }} >
|
|
{item.name}
|
|
</Typography>
|
|
</Box>
|
|
</Link>
|
|
)
|
|
})}
|
|
</AccordionDetails>
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Box className="menu-divider">
|
|
<Divider />
|
|
</Box>
|
|
|
|
<Box>
|
|
<NavItem href="http://ghostchain.io/builders" icon={ForumIcon} label={`Forum`} />
|
|
<NavItem href="https://docs.ghostchain.io/" icon={BookIcon} label={`Docs`} />
|
|
<NavItem href="https://git.ghostchain.io/ghostchain/ghost-dao-contracts/issues" icon={ErrorOutlineIcon} label={`Git Issues`} />
|
|
<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;
|