use current network inside network parameters

Signed-off-by: Uncle Fatso <uncle.fatso@ghostchain.io>
2026-04-05 21:18:34 +03:00 · 2026-04-05 21:18:34 +03:00 · e9eff0b651
commit e9eff0b651
parent 6213504ef3
16 changed files with 124 additions and 69 deletions
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
  "name": "ghost-dao-interface",
  "private": true,
-  "version": "0.6.13",
+  "version": "0.6.14",
  "type": "module",
  "scripts": {
    "dev": "vite",
--- a/src/App.jsx
+++ b/src/App.jsx
@ -5,8 +5,16 @@ import CssBaseline from "@mui/material/CssBaseline";
 import { styled, ThemeProvider } from "@mui/material/styles";
 import { lazy, Suspense, useCallback, useEffect, useState } from "react";
 import toast, { Toaster } from "react-hot-toast";
-import { Navigate, Route, Routes, useLocation } from "react-router-dom";
-import { useAccount, useConnect, useChainId, useConfig, usePublicClient, injected } from "wagmi";
+import { Outlet, Navigate, Route, Routes, useLocation, useParams } from "react-router-dom";
+import {
+    useAccount,
+    useConnect,
+    useChainId,
+    useConfig,
+    usePublicClient,
+    useSwitchChain,
+    injected
+} from "wagmi";

 import Messages from "./components/Messages/Messages";
 import NavDrawer from "./components/Sidebar/NavDrawer";
@ -100,6 +108,7 @@ function App() {
    const [theme, toggleTheme] = useTheme();

    const config = useConfig();
+    const { chains } = useSwitchChain();
    const { connect, error: errorMessage } = useConnect();
    const tryConnectInjected = () => connect({ connector: injected() });

@ -203,23 +212,23 @@ function App() {
                    <div className={`${classes.content} ${isSmallerScreen && classes.contentShift}`}>
                        <Suspense fallback={<div></div>}>
                            <Routes>
-                                <Route path="/" element={<Navigate to={chainExists ? "/dashboard" : "/empty"} />} />
+                                <Route path="/" element={<Navigate to={chainExists ? `/${chains.at(0).name.toLowerCase()}/dashboard` : "/empty"} />} />
                                {chainExists &&
-                                    <>
-                                        <Route path="/dashboard" element={<TreasuryDashboard chainId={addressChainId ? addressChainId : chainId} />} />
-                                        <Route path="/bonds" element={<Bonds connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
-                                        <Route path="/bonds/:id" element={<BondModalContainer connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
-                                        <Route path="/stake" element={<StakeContainer connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId}/>} />
+                                    <Route path="/:network" element={<AvailableNetworkGuard allowedNetworks={chains.map(chain => chain.name.toLowerCase())} /> }>
+                                        <Route path="dashboard" element={<TreasuryDashboard chainId={addressChainId ? addressChainId : chainId} />} />
+                                        <Route path="bonds" element={<Bonds connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
+                                        <Route path="bonds/:id" element={<BondModalContainer connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
+                                        <Route path="stake" element={<StakeContainer connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                        {isNetworkLegacy(chainId)
-                                            ? <Route path="/faucet" element={<Faucet config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
-                                            : <Route path="/wrapper" element={<Wrapper config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
+                                            ? <Route path="faucet" element={<Faucet config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
+                                            : <Route path="wrapper" element={<Wrapper config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
                                        }
-                                        <Route path="/bridge" element={<Bridge config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
-                                        <Route path="/dex/:name" element={<Dex config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
-                                        {isGovernanceAvailable(chainId, addressChainId) && <Route path="/governance" element={<Governance config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />}
-                                        {isGovernanceAvailable(chainId, addressChainId) && <Route path="/governance/:id" element={<ProposalDetails config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />}
-                                        {isGovernanceAvailable(chainId, addressChainId) && <Route path="/governance/create" element={<NewProposal config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />}
-                                    </>
+                                        <Route path="bridge" element={<Bridge config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
+                                        <Route path="dex/:name" element={<Dex config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />
+                                        {isGovernanceAvailable(chainId, addressChainId) && <Route path="governance" element={<Governance config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />}
+                                        {isGovernanceAvailable(chainId, addressChainId) && <Route path="governance/:id" element={<ProposalDetails config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />}
+                                        {isGovernanceAvailable(chainId, addressChainId) && <Route path="governance/create" element={<NewProposal config={config} connect={tryConnectInjected} address={address} chainId={addressChainId ? addressChainId : chainId} />} />}
+                                    </Route>
                                }
                                <Route path="/empty" element={<NotFound
                                    wrongNetworkToastId={wrongNetworkToastId}
@ -242,4 +251,12 @@ function App() {
    );
 }

+const AvailableNetworkGuard = ({ allowedNetworks }) => {
+    const { network } = useParams();
+    if (!allowedNetworks.includes(network)) {
+        return <Navigate to="/empty" replace />;
+    }
+    return <Outlet />
+}
+
 export default App;
--- a/src/components/Sidebar/NavContent.jsx
+++ b/src/components/Sidebar/NavContent.jsx
@ -16,6 +16,7 @@ import {
 } 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';
@ -68,6 +69,11 @@ const StyledBox = styled(Box)(({ theme }) => ({
 }));

 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");
@ -104,18 +110,18 @@ const NavContent = ({ chainId, addressChainId }) => {
                        <div className="dapp-nav" id="navbarNav">
                            {isNetworkAvailable(chainId, addressChainId) &&
                                <>
-                                    <NavItem icon={DashboardIcon} label={`Dashboard`} to="/dashboard" />
+                                    <NavItem icon={DashboardIcon} label={`Dashboard`} to={`/${chainName}/dashboard`} />
                                    <NavItem
                                        icon={CurrencyExchangeIcon}
                                        label={`(3, 3) Swap`}
-                                        to={'/dex/uniswap'}
+                                        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={`/dex/${dex.name.toLowerCase()}`}
+                                                            to={`/${chainName}/dex/${dex.name.toLowerCase()}`}
                                                            key={index}
                                                            style={{ textDecoration: "none" }}
                                                        >
@ -129,19 +135,19 @@ const NavContent = ({ chainId, addressChainId }) => {
                                            </AccordionDetails>
                                        }
                                    />
-                                <NavItem icon={StakeIcon} label={`(3, 3) Stake`} to="/stake" />
+                                <NavItem icon={StakeIcon} label={`(3, 3) Stake`} to={`/${chainName}/stake`} />
                                    <NavItem
                                        defaultExpanded
                                        icon={BondIcon}
                                        label={`(1, 1) Bond`}
-                                        to="/bonds"
+                                        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={`/bonds/${bond.id}`}
+                                                            to={`/${chainName}/bonds/${bond.id}`}
                                                            key={index}
                                                            style={{ textDecoration: "none" }}
                                                        >
@ -166,10 +172,10 @@ const NavContent = ({ chainId, addressChainId }) => {
                                            </AccordionDetails>
                                        }
                                    />
-                                <NavItem icon={ForkRightIcon} label={`${bridgeNumbers} GHOST Staking`} to="/bridge" />
-                                    {isGovernanceAvailable(chainId, addressChainId) && <NavItem icon={GavelIcon} label={`Governance`} to="/governance" />}
+                                <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 />
+                                        <Divider />
                                    </Box>
                                </>
                            }
--- a/src/components/TopBar/SelectNetwork.jsx
+++ b/src/components/TopBar/SelectNetwork.jsx
@ -13,10 +13,14 @@ import { parseKnownToken } from "../../components/Token/Token";

 import { useSwitchChain } from 'wagmi';
 import toast from "react-hot-toast";
+import { useNavigate, useLocation } from 'react-router-dom';

 function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, small }) {
    const theme = useTheme();
+    const navigate = useNavigate();
+
    const { chains, switchChain } = useSwitchChain();
+    const { pathname } = useLocation();

    const [networkId, setNetworkId] = useState(chainId);

@ -24,6 +28,16 @@ function SelectNetwork({ chainId, wrongNetworkToastId, setWrongNetworkToastId, s
        if (chainId !== networkId) setNetworkId(chainId);
    }, [chainId])

+    useEffect(() => {
+        const chainName = chains.find((chain) => chain.id === chainId).name;
+        const parts = pathname.split('/');
+        if (parts.length > 2) {
+            parts[1] = chainName.toLowerCase();
+            const newPath = parts.join("/");
+            navigate(newPath);
+        }
+    }, [chains, chainId])
+
    const handleChange = (event) => {
        const chainName = chains.find((chain) => chain.id === event.target.value).name;
        toast.dismiss(wrongNetworkToastId);
--- a/src/components/TopBar/Wallet/InitialWalletView.tsx
+++ b/src/components/TopBar/Wallet/InitialWalletView.tsx
@ -24,7 +24,7 @@ import { formatCurrency, shorten } from "../../../helpers";
 import { DecimalBigNumber } from "../../../helpers/DecimalBigNumber";
 import { RESERVE_ADDRESSES, FTSO_ADDRESSES } from "../../../constants/addresses";

-import { useAccount, useDisconnect  } from "wagmi";
+import { useAccount, useDisconnect, useSwitchChain } from "wagmi";

 const DisconnectButton = ({ onClose }) => {
    const { disconnect } = useDisconnect();
@ -109,10 +109,11 @@ function InitialWalletView({ isWalletOpen, address, chainId, onClose }) {
    const theme = useTheme();
    const navigate = useNavigate();
    const tokens = useWallet(chainId, address);
+    const { chains } = useSwitchChain();

    const onBtnClick = (dexName, from, to) => {
        navigate({
-            pathname: "/dex/" + dexName,
+            pathname: `${chains.find(chain => chain.id === chainId).name.toLowerCase()}/dex/` + dexName,
            search: createSearchParams({
                pool: true,
                from: from,
--- a/src/components/TopBar/Wallet/Token.tsx
+++ b/src/components/TopBar/Wallet/Token.tsx
@ -32,7 +32,7 @@ import {
 import { useLpValuation } from "../../../hooks/treasury";
 import { useUniswapV2PairReserves } from "../../../hooks/uniswapv2";
 import { getTokenIcons } from "../../../hooks/helpers";
-import { useAccount, useBalance as useNativeBalance, useConfig } from "wagmi";
+import { useAccount, useBalance as useNativeBalance, useConfig, useSwitchChain, useChainId } from "wagmi";

 const addTokenToWallet = async (token, userAddress) => {
    if (!window.ethereum) return;
@ -87,13 +87,20 @@ export const Token = (props) => {
    } = props;
    const theme = useTheme();
    const navigate = useNavigate();
+    const chainId = useChainId();
+
+    const { chains } = useSwitchChain();
+
+    const chainName = useMemo(() => {
+        return chains.find(chain => chain.id === chainId).name.toLowerCase();
+    }, [chains, chainId])

    const useLink = (symbol, fromAddress, toAddress, isPool) => {
        if (faucetPath) {
            navigate({ pathname: faucetPath })
        } else {
            navigate({
-                pathname: "/dex/uniswap",
+                pathname: `${chainName}/dex/uniswap`,
                search: isPool ?
                    createSearchParams({
                        pool: "true",
--- a/src/components/TopBar/Wallet/index.tsx
+++ b/src/components/TopBar/Wallet/index.tsx
@ -76,7 +76,12 @@ export function Wallet({ address, chainId, connect }) {
                onOpen={openWallet}
                onClose={closeWallet}
            >
-                <InitialWalletView isWalletOpen={isWalletOpen} address={address} chainId={chainId} onClose={closeWallet} />
+                <InitialWalletView
+                    isWalletOpen={isWalletOpen}
+                    address={address}
+                    chainId={chainId}
+                    onClose={closeWallet}
+                />
            </StyledSwipeableDrawer>
        </>
    );
--- a/src/containers/Bond/BondModal.jsx
+++ b/src/containers/Bond/BondModal.jsx
@ -1,8 +1,8 @@
 import { ArrowBack } from "@mui/icons-material";
 import { Box, Link, Skeleton, Typography } from "@mui/material";
-import { useEffect, useState } from "react";
-import { Link as RouterLink, useLocation, useNavigate, useParams } from "react-router-dom";
-import { useAccount, useChainId } from "wagmi";
+import { useEffect, useState, useMemo } from "react";
+import { Link as RouterLink, useLocation, useParams, useNavigate } from "react-router-dom";
+import { useAccount, useSwitchChain } from "wagmi";
 import ReactGA from "react-ga4";

 import PageTitle from "../../components/PageTitle/PageTitle";
@ -24,8 +24,8 @@ import { useLiveBonds } from "../../hooks/bonds";
 import { useFtsoPrice } from "../../hooks/prices";

 const BondModalContainer = ({ chainId, address, connect }) => {
-    const { id } = useParams();
-    const { liveBonds } = useLiveBonds(chainId);
+    const { id, network } = useParams();
+    const { liveBonds } = useLiveBonds(chainId, network);
    const bond = liveBonds.find(bond => bond.id === Number(id));

    if (!bond) return <NotFound />;
@ -35,6 +35,7 @@ const BondModalContainer = ({ chainId, address, connect }) => {

 export const BondModal = ({ bond, chainId, address, connect }) => {
    const navigate = useNavigate();
+    const { network } = useParams();
    const { pathname } = useLocation();

    const [slippage, setSlippage] = useState(localStorage.getItem("bond-slippage") || "10");
@ -63,18 +64,18 @@ export const BondModal = ({ bond, chainId, address, connect }) => {

    useEffect(() => {
        const handleKeyDown = (event) => {
-            if (event.key === "Escape") isSettingsOpen ? setSettingsOpen(false) : navigate("/bonds");
+            if (event.key === "Escape") isSettingsOpen ? setSettingsOpen(false) : navigate(`/${network}/bonds`);
        };
        window.addEventListener("keydown", handleKeyDown);
        return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [navigate, isSettingsOpen]);
+    }, [network, navigate, isSettingsOpen]);

    return (
        <Box>
            <PageTitle
                name={
                    <Box display="flex" flexDirection="row" alignItems="center">
-                        <Link component={RouterLink} to="/bonds">
+                        <Link component={RouterLink} to={`/${network}/bonds`}>
                            <Box display="flex" flexDirection="row">
                                <ArrowBack />
                                <Typography fontWeight="500" marginLeft="9.5px" marginRight="18px">
--- a/src/containers/Bond/Bonds.jsx
+++ b/src/containers/Bond/Bonds.jsx
@ -1,5 +1,6 @@
 import { Box, Tab, Tabs, Typography, Container, useMediaQuery } from "@mui/material";
 import { useEffect, useState } from "react";
+import { useParams } from "react-router-dom";
 import ReactGA from "react-ga4";

 import Paper from "../../components/Paper/Paper";
@ -19,6 +20,7 @@ import { useFtsoPrice } from "../../hooks/prices";
 import { useTokenSymbol } from "../../hooks/tokens";

 const Bonds = ({ chainId, address, connect }) => {
+    const { network } = useParams();
    const [isZoomed] = useState(false);
    const [secondsTo, setSecondsTo] = useState(0);

@ -29,7 +31,7 @@ const Bonds = ({ chainId, address, connect }) => {
        ReactGA.send({ hitType: "pageview", page: "/bonds" });
    }, []);

-    const { liveBonds } = useLiveBonds(chainId);
+    const { liveBonds } = useLiveBonds(chainId, network);
    const totalReserves = useTotalReserves(chainId);
    const ftsoPrice = useFtsoPrice(chainId);

--- a/src/containers/Bond/components/BondList.jsx
+++ b/src/containers/Bond/components/BondList.jsx
@ -11,7 +11,7 @@ import {
    Typography,
    useMediaQuery
 } from "@mui/material";
-import { NavLink } from "react-router-dom";
+import { NavLink, useParams } from "react-router-dom";
 import ArrowUp from "../../../assets/icons/arrow-up.svg?react";

 import BondDiscount from "./BondDiscount";
@ -26,6 +26,7 @@ import { TertiaryButton } from "../../../components/Button";

 export const BondList = ({ bonds, secondsTo, chainId }) => {
    const isSmallScreen = useScreenSize("md");
+    const { network } = useParams();

    if (bonds.length === 0) {
        return (
@ -43,7 +44,7 @@ export const BondList = ({ bonds, secondsTo, chainId }) => {
                </Box>

                {sortBondsByDiscount(bonds).map(bond => (
-                    <BondCard key={bond.id} secondsTo={secondsTo} bond={bond} />
+                    <BondCard key={bond.id} secondsTo={secondsTo} bond={bond} chainName={network} />
                ))}
            </>
        );
@ -53,7 +54,7 @@ export const BondList = ({ bonds, secondsTo, chainId }) => {
        <>
            <BondTable>
                {sortBondsByDiscount(bonds).map(bond => (
-                    <BondRow key={bond.id} bond={bond} secondsTo={secondsTo} />
+                    <BondRow key={bond.id} bond={bond} secondsTo={secondsTo} chainName={network} />
                ))}
            </BondTable>

@ -64,7 +65,7 @@ export const BondList = ({ bonds, secondsTo, chainId }) => {
    );
 };

-const BondCard = ({ bond, secondsTo }) => {
+const BondCard = ({ bond, secondsTo, chainName }) => {
    const quoteTokenName = bond.quoteToken.name;
    const baseTokenName = bond.baseToken.name;

@ -130,7 +131,7 @@ const BondCard = ({ bond, secondsTo }) => {
            <Box mt="16px">
                <Link
                    component={NavLink}
-                    to={`/bonds/${bond.id}`}
+                    to={`/${chainName}/bonds/${bond.id}`}
                >
                    <TertiaryButton fullWidth>
                        Bond
@ -173,7 +174,7 @@ const payoutTokenCapacity = (bond) => {
    return `${formatNumber(payoutTokenCapacity, 4)} ${bond.baseToken.name}`;
 };

-const BondRow = ({ bond, secondsTo }) => {
+const BondRow = ({ bond, secondsTo, chainName }) => {
    const quoteTokenName = bond.quoteToken.name;
    const baseTokenName = bond.baseToken.name;

@ -221,7 +222,7 @@ const BondRow = ({ bond, secondsTo }) => {
            <TableCell style={{ padding: "8px 0" }}>
                <Link
                    component={NavLink}
-                    to={`/bonds/${bond.id}`}
+                    to={`/${chainName}/bonds/${bond.id}`}
                >
                    <TertiaryButton fullWidth disabled={bond.isSoldOut}>
                        {bond.isSoldOut ? "Sold Out" : `Bond`}
--- a/src/containers/Governance/Governance.jsx
+++ b/src/containers/Governance/Governance.jsx
@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import ReactGA from "react-ga4";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";

 import { Box, Container, Grid, Divider, Typography, useMediaQuery } from "@mui/material";

@ -19,13 +19,10 @@ const Governance = ({ connect, config, address, chainId }) => {
    const isSmallScreen = useMediaQuery("(max-width: 650px)");
    const isVerySmallScreen = useMediaQuery("(max-width: 379px)");
    const navigate = useNavigate();
+    const { network } = useParams();

    const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");

-    const handleModal = () => {
-        const navigate = useNavigate();
-    }
-
    useEffect(() => {
        ReactGA.send({ hitType: "pageview", page: "/governance" });
    }, []);
@ -70,7 +67,7 @@ const Governance = ({ connect, config, address, chainId }) => {
                        <Box mt="45px" display="flex" flexDirection="column" alignItems="center" justifyContent="center">
                            <PrimaryButton
                                fullWidth
-                                onClick={() => navigate(`/governance/create`)}
+                                onClick={() => navigate(`/${network}/governance/create`)}
                                sx={{ maxWidth: isSemiSmallScreen ? "100%" : "350px" }}
                            >
                                Create Proposal
--- a/src/containers/Governance/components/ProposalsList.jsx
+++ b/src/containers/Governance/components/ProposalsList.jsx
@ -1,5 +1,5 @@
 import { useState, useMemo } from "react";
-import { useNavigate } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";

 import {
    Box,
@ -50,6 +50,8 @@ const ProposalsList = ({ chainId, address, config }) => {
    const navigate = useNavigate();
    const theme = useTheme();

+    const { network } = useParams();
+
    const [proposalsFilter, setProposalFilter] = useState("active");

    const myStoredProposals = localStorage.getItem(`${MY_PROPOSALS_PREFIX}-${chainId}-${address}`);
@ -106,7 +108,7 @@ const ProposalsList = ({ chainId, address, config }) => {
                            proposal={proposal}
                            blockNumber={blockNumber}
                            chainId={chainId}
-                            openProposal={() => navigate(`/governance/${proposal.hashes.full}`)}
+                            openProposal={() => navigate(`${network}/governance/${proposal.hashes.full}`)}
                        />
                    ))}
                </Box>
@ -153,7 +155,7 @@ const ProposalsList = ({ chainId, address, config }) => {
                        proposal={proposal}
                        blockNumber={blockNumber}
                        chainId={chainId}
-                        openProposal={() => navigate(`/governance/${proposal.hashes.full}`)}
+                        openProposal={() => navigate(`/${network}/governance/${proposal.hashes.full}`)}
                    />
                ))}
            </ProposalTable>
--- a/src/containers/Stake/components/FarmPools.jsx
+++ b/src/containers/Stake/components/FarmPools.jsx
@ -9,7 +9,7 @@ import {
    Box,
    useMediaQuery,
 } from "@mui/material";
-import { useNavigate, createSearchParams } from "react-router-dom";
+import { useNavigate, useParams, createSearchParams } from "react-router-dom";

 import Paper from "../../../components/Paper/Paper";
 import { SecondaryButton } from "../../../components/Button";
@ -26,6 +26,7 @@ import { EMPTY_ADDRESS, FTSO_ADDRESSES } from "../../../constants/addresses";

 const FarmPools = ({ chainId }) => {
    const isSmallScreen = useMediaQuery("(max-width: 775px)");
+    const { network } = useParams();

    const { totalSupply: reserveFtsoUniTotalSupply } = useTotalSupply(chainId, "RESERVE_FTSO");
    const reserveFtsoUniValuation = useLpValuation(chainId, "RESERVE_FTSO", reserveFtsoUniTotalSupply._value);
@ -38,7 +39,7 @@ const FarmPools = ({ chainId }) => {
            icons: ["FTSO", isNetworkLegacy(chainId) ? "GDAI" : tokenNameConverter(chainId, reserveSymbol)],
            name: `${ftsoSymbol}-${reserveSymbol}`,
            dex: "Uniswap V2",
-            url: "/dex/uniswap",
+            url: `/${network}/dex/uniswap`,
            tvl: reserveFtsoUniValuation,
            params: createSearchParams({
                pool: "true",
--- a/src/containers/TreasuryDashboard/components/TokenInfo.jsx
+++ b/src/containers/TreasuryDashboard/components/TokenInfo.jsx
@ -1,6 +1,6 @@
 import { Grid, Box, Typography, useTheme } from "@mui/material";
 import { useAccount, useConfig, useBalance as useBalanceNative } from "wagmi";
-import { useNavigate, createSearchParams } from "react-router-dom";
+import { useNavigate, useParams, createSearchParams } from "react-router-dom";

 import Token from "../../../components/Token/Token";
 import { SecondaryButton } from "../../../components/Button";
@ -79,6 +79,7 @@ const TokenTab = ({ isMobileScreen, theme, tokenName, tokenUrl, tokenUrlParams,

 const TokenInfo = ({ chainId, isMobileScreen }) => {
    const theme = useTheme();
+    const { network } = useParams();
    const { address } = useAccount();

    const config = useConfig();
@ -104,7 +105,7 @@ const TokenInfo = ({ chainId, isMobileScreen }) => {
            <Box display="flex" flexWrap="wrap" justifyContent="space-between" mt="10px" gap="25px">
                <TokenTab
                    isMobileScreen={isMobileScreen}
-                    tokenUrl="/dex/uniswap"
+                    tokenUrl={`/${network}/dex/uniswap`}
                    tokenUrlParams={createSearchParams({
                        from: `${reserveAddress}`,
                        to: `${ftsoAddress}`,
@ -117,7 +118,7 @@ const TokenInfo = ({ chainId, isMobileScreen }) => {
                />
                <TokenTab
                    isMobileScreen={isMobileScreen}
-                    tokenUrl="/dex/uniswap"
+                    tokenUrl={`/${network}/dex/uniswap`}
                    tokenUrlParams={createSearchParams({
                        from: `${reserveAddress}`,
                        to: `${ghstAddress}`,
@ -141,7 +142,7 @@ const TokenInfo = ({ chainId, isMobileScreen }) => {
                )}
                <TokenTab
                    isMobileScreen={isMobileScreen}
-                    tokenUrl="/dex/uniswap"
+                    tokenUrl={`/${network}/dex/uniswap`}
                    tokenUrlParams={createSearchParams({
                        from: `${EMPTY_ADDRESS}`,
                        to: `${WETH_ADDRESSES[chainId]}`,
--- a/src/hooks/bonds/index.js
+++ b/src/hooks/bonds/index.js
@ -22,7 +22,7 @@ import { DecimalBigNumber } from "../../helpers/DecimalBigNumber";
 import { shorten } from "../../helpers";
 import { tokenNameConverter } from "../../helpers/tokenConverter";

-export const useLiveBonds = (chainId) => {
+export const useLiveBonds = (chainId, chainName) => {
    const ftsoPrice = useFtsoPrice(chainId);
    const baseTokenPerUsd = useReservePrice(chainId);
    const originalCoefficient = useOrinalCoefficient(chainId);
@ -159,13 +159,13 @@ export const useLiveBonds = (chainId) => {
            displayName: getBondNameDisplayName(chainId, bondName, quoteTokenAddress),
            baseToken: {
                name: baseTokenSymbol,
-                purchaseUrl: getTokenPurchaseLink(chainId, ""),
+                purchaseUrl: getTokenPurchaseLink(chainId, "", chainName),
                icons: ["FTSO"],
                tokenAddress: getTokenAddress(chainId, "FTSO")
            },
            quoteToken: {
                name: tokenNameConverter(chainId, quoteTokenSymbol),
-                purchaseUrl: getTokenPurchaseLink(chainId, quoteTokenAddress),
+                purchaseUrl: getTokenPurchaseLink(chainId, quoteTokenAddress, chainName),
                icons: getTokenIcons(chainId, quoteTokenAddress),
                decimals: quoteTokenDecimals,
                quoteTokenAddress,
--- a/src/hooks/helpers.js
+++ b/src/hooks/helpers.js
@ -185,13 +185,13 @@ export const getBondNameDisplayName = (chainId, stringValue, tokenAddress) => {
    return stringValue;
 }

-export const getTokenPurchaseLink = (chainId, tokenAddress) => {
-    let purchaseUrl = "https://app.dao.ghostchain.io/#/dex/uniswap";
+export const getTokenPurchaseLink = (chainId, tokenAddress, chainName) => {
+    let purchaseUrl = `https://app.dao.ghostchain.io/#/${chainName}/dex/uniswap`;
    switch (tokenAddress) {
        case RESERVE_ADDRESSES[chainId]:
-            purchaseUrl = "https://app.dao.ghostchain.io/#/faucet";
+            purchaseUrl = `https://app.dao.ghostchain.io/#/${chainName}/faucet`;
            if (chainId == 63) {
-                purchaseUrl = "https://app.dao.ghostchain.io/#/wrapper";
+                purchaseUrl = `https://app.dao.ghostchain.io/#/${chainName}/wrapper`;
            }
            break;
        case FTSO_DAI_LP_ADDRESSES[chainId]: