update left mnu panel

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>

package.json

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

src/components/Sidebar/NavContent.jsx

@@ -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
-                                        ? <NavItem icon={ShowerIcon} label={`Faucet`} to="/faucet" />
+                                        icon={CurrencyExchangeIcon}
-                                        : <NavItem icon={WifiProtectedSetupIcon} label={`Wrapper`} to="/wrapper" />
+                                        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
+                                <NavItem icon={ForkRightIcon} label={`${bridgeNumbers} Bridge`} to="/bridge" />
-                                        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" />
                                     {isGovernanceAvailable(chainId, addressChainId) && <NavItem icon={GavelIcon} label={`Governance`} to="/governance" />}
                                     <Box className="menu-divider">
                                       <Divider />