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

update left mnu panel

Browse Source 
Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
This commit is contained in:
Uncle Fatso 2026-03-25 15:41:57 +03:00
parent ef129af5ad
commit 643211efc9
Signed by: f4ts0
GPG Key ID: 565F4F2860226EBB
2 changed files with 36 additions and 49 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.6.9",
"version": "0.6.10",
"type": "module",
"scripts": {
"dev": "vite",

83
src/components/Sidebar/NavContent.jsx
View File

@ -1,4 +1,4 @@
import React from "react";
import { useMemo } from "react";
import "./Sidebar.scss";
@ -41,6 +41,7 @@ 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";
@ -51,7 +52,6 @@ import ShowerIcon from '@mui/icons-material/Shower';
import WifiProtectedSetupIcon from '@mui/icons-material/WifiProtectedSetup';
import { useTokenSymbol } from "../../hooks/tokens";
import { useFtsoPrice, useGhstPrice, useGhostedSupplyPrice } from "../../hooks/prices";
import { useLiveBonds } from "../../hooks/bonds/index";
import pckg from "../../../package.json"
@ -69,13 +69,15 @@ const StyledBox = styled(Box)(({ theme }) => ({
const NavContent = ({ chainId, addressChainId }) => {
const { liveBonds: ghostBonds } = useLiveBonds(chainId);
const ftsoPrice = useFtsoPrice(chainId);
const ghstPrice = useGhstPrice(chainId);
const ghostedSupplyPrice = useGhostedSupplyPrice(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">
@ -92,17 +94,6 @@ const NavContent = ({ chainId, addressChainId }) => {
Version {pckg.version}
</Box>
</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 fontSize="12px" fontWeight="500" lineHeight={"15px"}>
GHOSTed Supply: {formatCurrency(ghostedSupplyPrice, 2)}
</Box>
</Box>
</Box>
<Box className="menu-divider">
@ -114,14 +105,35 @@ const NavContent = ({ chainId, addressChainId }) => {
{isNetworkAvailable(chainId, addressChainId) &&
<>
<NavItem icon={DashboardIcon} label={`Dashboard`} to="/dashboard" />
{isNetworkLegacy(chainId)
? <NavItem icon={ShowerIcon} label={`Faucet`} to="/faucet" />
: <NavItem icon={WifiProtectedSetupIcon} label={`Wrapper`} to="/wrapper" />
}
<NavItem
icon={CurrencyExchangeIcon}
label={`(3, 3) Swap`}
to={'/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={`/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) Staking`} to="/stake" />
<NavItem
defaultExpanded
icon={BondIcon}
label={`Bond`}
label={`(1, 1) Bond`}
to="/bonds"
children={
<AccordionDetails style={{ margin: "0 0 -20px", display: "flex", flexDirection: "column", gap: "10px" }}>
@ -154,32 +166,7 @@ const NavContent = ({ chainId, addressChainId }) => {
</AccordionDetails>
}
/>
<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>
}
/>
<NavItem icon={StakeIcon} label={`Stake`} to="/stake" />
<NavItem icon={ForkRightIcon} label={`Bridge`} to="/bridge" />
<NavItem icon={ForkRightIcon} label={`${bridgeNumbers} Bridge`} to="/bridge" />
{isGovernanceAvailable(chainId, addressChainId) && <NavItem icon={GavelIcon} label={`Governance`} to="/governance" />}
<Box className="menu-divider">
<Divider />