use current network inside network parameters

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

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",

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 { Outlet, Navigate, Route, Routes, useLocation, useParams } from "react-router-dom";
-import { useAccount, useConnect, useChainId, useConfig, usePublicClient, injected } from "wagmi";
+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="/:network" element={<AvailableNetworkGuard allowedNetworks={chains.map(chain => chain.name.toLowerCase())} /> }>
-                                        <Route path="/dashboard" element={<TreasuryDashboard chainId={addressChainId ? addressChainId : chainId} />} />
+                                        <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" 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="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="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="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="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="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} />} />
+                                        <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" 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/: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} />} />}
+                                        {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;

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" />
+                                <NavItem icon={ForkRightIcon} label={`${bridgeNumbers} GHOST Staking`} to={`/${chainName}/bridge`} />
-                                    {isGovernanceAvailable(chainId, addressChainId) && <NavItem icon={GavelIcon} label={`Governance`} to="/governance" />}
+                                    {isGovernanceAvailable(chainId, addressChainId) && <NavItem icon={GavelIcon} label={`Governance`} to={`/${chainName}/governance`} />}
                                     <Box className="menu-divider">
-                                      <Divider />
+                                        <Divider />
                                     </Box>
                                 </>
                             }

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);

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,

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",

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>
         </>
     );

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 { useEffect, useState, useMemo } from "react";
-import { Link as RouterLink, useLocation, useNavigate, useParams } from "react-router-dom";
+import { Link as RouterLink, useLocation, useParams, useNavigate } from "react-router-dom";
-import { useAccount, useChainId } from "wagmi";
+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 { id, network } = useParams();
-    const { liveBonds } = useLiveBonds(chainId);
+    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">

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);
 

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`}

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

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>

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",

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]}`,

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,

src/hooks/helpers.js

@@ -185,13 +185,13 @@ export const getBondNameDisplayName = (chainId, stringValue, tokenAddress) => {
     return stringValue;
 }
 
-export const getTokenPurchaseLink = (chainId, tokenAddress) => {
+export const getTokenPurchaseLink = (chainId, tokenAddress, chainName) => {
-    let purchaseUrl = "https://app.dao.ghostchain.io/#/dex/uniswap";
+    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]: