change the pageview path for analytics; make it dependant on network name

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

package.json

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

src/components/Sidebar/NavContent.jsx

@@ -17,7 +17,6 @@ import {
 import { styled } from "@mui/material/styles";
 import { NavLink } from "react-router-dom";
 import { useSwitchChain } from "wagmi";
-import ReactGA from "react-ga4";
 
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
 import GitHubIcon from '@mui/icons-material/GitHub';
@@ -87,10 +86,6 @@ const NavContent = ({ chainId, addressChainId }) => {
         return `(${number}, ${number})`;
     }, [chainId]);
 
-    useEffect(() => {
-        ReactGA.send({ hitType: "pageview", page: "/sidebar" });
-    }, []);
-
     return (
         <Paper className="dapp-sidebar">
             <Box className="dapp-sidebar-inner" display="flex" justifyContent="space-between" flexDirection="column">

src/components/TopBar/Wallet/InitialWalletView.tsx

@@ -1,3 +1,4 @@
+import { useMemo } from "react";
 import {
     Box,
     Button,
@@ -12,8 +13,9 @@ import {
 import { styled } from '@mui/material/styles';
 import CloseIcon from '@mui/icons-material/Close';
 import LoopIcon from '@mui/icons-material/Loop';
+import ReactGA from "react-ga4";
 import { ReactElement, useState, useEffect } from "react";
-import { useNavigate, createSearchParams } from "react-router-dom";
+import { useNavigate, useLocation, createSearchParams } from "react-router-dom";
 
 import GhostStyledIcon from "../../Icon/GhostIcon";
 import { Tokens, useWallet } from "./Token";
@@ -108,9 +110,14 @@ const WalletTotalValue = ({ address, tokens }) => {
 function InitialWalletView({ isWalletOpen, address, chainId, onClose }) {
     const theme = useTheme();
     const navigate = useNavigate();
+    const location = useLocation();
     const tokens = useWallet(chainId, address);
     const { chains } = useSwitchChain();
 
+    const chainName = useMemo(() => {
+        return chains.find(chain => chain.id === chainId).name.toLowerCase();
+    }, [chains, chainId])
+
     const onBtnClick = (dexName, from, to) => {
         navigate({
             pathname: `${chains.find(chain => chain.id === chainId).name.toLowerCase()}/dex/` + dexName,
@@ -123,12 +130,20 @@ function InitialWalletView({ isWalletOpen, address, chainId, onClose }) {
         onClose();
     }
 
+    useEffect(() => {
+        if (isWalletOpen) {
+            console.log(`/${chainName.toLowerCase()}/sidebar`)
+            ReactGA.send({ hitType: "pageview", page: `/${chainName.toLowerCase()}/sidebar` });
+        }
+    }, [isWalletOpen, chainName])
+
     useEffect(() => {
         if (isWalletOpen) {
             Object.values(tokens ?? {}).forEach(token => token.refetch());
         }
     }, [isWalletOpen, tokens])
 
+
     return (
         <Paper>
             <Box sx={{ padding: theme.spacing(0, 3), display: "flex", flexDirection: "column", minHeight: "100vh" }}>

src/containers/Bond/BondModal.jsx

@@ -49,7 +49,7 @@ export const BondModal = ({ bond, chainId, address, config, connect }) => {
 
     useEffect(() => {
         ReactGA.send({ hitType: "pageview", page: pathname });
-    }, [])
+    }, [pathname])
 
     const setRecipientAddress = useCallback((value) => {
         setRecipientAddressInner(value);

src/containers/Bond/Bonds.jsx

@@ -1,6 +1,6 @@
 import { Box, Tab, Tabs, Typography, Container, useMediaQuery } from "@mui/material";
 import { useEffect, useState } from "react";
-import { useParams } from "react-router-dom";
+import { useParams, useLocation } from "react-router-dom";
 import ReactGA from "react-ga4";
 
 import Paper from "../../components/Paper/Paper";
@@ -20,7 +20,9 @@ import { useFtsoPrice } from "../../hooks/prices";
 import { useTokenSymbol } from "../../hooks/tokens";
 
 const Bonds = ({ chainId, address, connect }) => {
+    const location = useLocation();
     const { network } = useParams();
+
     const [isZoomed] = useState(false);
     const [secondsTo, setSecondsTo] = useState(0);
 
@@ -28,8 +30,8 @@ const Bonds = ({ chainId, address, connect }) => {
     const isVerySmallScreen = useMediaQuery("(max-width: 379px)");
 
     useEffect(() => {
-        ReactGA.send({ hitType: "pageview", page: "/bonds" });
-    }, []);
+        ReactGA.send({ hitType: "pageview", page: location.pathname });
+    }, [location]);
 
     const { liveBonds } = useLiveBonds(chainId, network);
     const totalReserves = useTotalReserves(chainId);

src/containers/Breakout/BreakoutModal.jsx

@@ -271,7 +271,7 @@ const WelcomeView = ({
     return (
         <>
             <Typography>{warmupPeriod <= 0
-                ? `You've succesfully warmed-up your ${isStakingOpened ? " " : "bonded "}${ftsoSymbol} ${isStakingOpened ? "(3, 3)" : "(1, 1)"} Staked at:`
+                ? `You have succesfully warmed-up your ${isStakingOpened ? " " : "bonded "}${ftsoSymbol} ${isStakingOpened ? "(3, 3)" : "(1, 1)"} Staked at:`
                 : `${isStakingOpened ? "Stake" : "Bond"} is in warm-up${isStakingOpened ? "" : ", which extends with each purchase"}. Your ${ftsoSymbol} ${isStakingOpened ? "(3, 3)" : "(1, 1)"} is Staked at:`
             }</Typography>
 

src/containers/Bridge/Bridge.jsx

@@ -1,4 +1,5 @@
 import { useEffect, useState, useMemo, useCallback } from "react";
+import { useLocation } from "react-router-dom";
 import ReactGA from "react-ga4";
 
 import {
@@ -56,6 +57,8 @@ import { BridgeHeader } from "./BridgeHeader";
 import { BridgeCardAction, BridgeCardHistory } from "./BridgeCard";
 
 const Bridge = ({ chainId, address, config, connect }) => {
+    const location = useLocation();
+
     const isBigScreen = useMediaQuery("(max-width: 980px)")
     const isSmallScreen = useMediaQuery("(max-width: 650px)");
     const isSemiSmallScreen = useMediaQuery("(max-width: 540px)");
@@ -158,8 +161,8 @@ const Bridge = ({ chainId, address, config, connect }) => {
     const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");
 
     useEffect(() => {
-        ReactGA.send({ hitType: "pageview", page: "/bridge" });
-    }, []);
+        ReactGA.send({ hitType: "pageview", page: location.pathname });
+    }, [location]);
 
     const chainExplorerUrl = useMemo(() => {
         const client = config?.getClient();

src/containers/Faucet/Faucet.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from "react";
 import { Box, Container, Typography, useMediaQuery } from "@mui/material";
 import { useConfig, useBalance } from "wagmi";
 import { Helmet } from "react-helmet";
+import { useLocation } from "react-router-dom";
 import ReactGA from "react-ga4";
 
 import PageTitle from "../../components/PageTitle/PageTitle";
@@ -26,6 +27,8 @@ import {
 } from "../../hooks/tokens";
 
 const Faucet = ({ chainId, address, config, connect }) => {
+    const location = useLocation();
+
     const isSmallScreen = useMediaQuery("(max-width: 650px)");
     const isSemiSmallScreen = useMediaQuery("(max-width: 480px)");
     const isVerySmallScreen = useMediaQuery("(max-width: 379px)");
@@ -54,8 +57,8 @@ const Faucet = ({ chainId, address, config, connect }) => {
     const { symbol: reserveSymbol } = useTokenSymbol(chainId, "RESERVE");
 
     useEffect(() => {
-        ReactGA.send({ hitType: "pageview", page: "/faucet" });
-    }, [])
+        ReactGA.send({ hitType: "pageview", page: location.pathname });
+    }, [location])
 
     useEffect(() => {
         const value = nativeBalance ? nativeBalance.value : 0n;

src/containers/Governance/Governance.jsx

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 import ReactGA from "react-ga4";
-import { useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams, useLocation } from "react-router-dom";
 
 import { Box, Container, Grid, Divider, Typography, useMediaQuery } from "@mui/material";
 
@@ -15,17 +15,19 @@ import { ProposalsCount, MinQuorumPercentage, ProposalThreshold } from "./compon
 import { useTokenSymbol } from "../../hooks/tokens";
 
 const Governance = ({ connect, config, address, chainId }) => {
+    const location = useLocation();
+    const navigate = useNavigate();
+    const { network } = useParams();
+
     const isSemiSmallScreen = useMediaQuery("(max-width: 745px)");
     const isSmallScreen = useMediaQuery("(max-width: 650px)");
     const isVerySmallScreen = useMediaQuery("(max-width: 379px)");
-    const navigate = useNavigate();
-    const { network } = useParams();
 
     const { symbol: ghstSymbol } = useTokenSymbol(chainId, "GHST");
 
     useEffect(() => {
-        ReactGA.send({ hitType: "pageview", page: "/governance" });
-    }, []);
+        ReactGA.send({ hitType: "pageview", page: location.pathname });
+    }, [location]);
 
     return (
         <Box>

src/containers/Governance/NewProposal.jsx

@@ -1,4 +1,5 @@
 import { useState, useMemo, useCallback, useEffect } from "react";
+import { useLocation } from 'react-router-dom';
 import ReactGA from "react-ga4";
 
 import {
@@ -38,6 +39,8 @@ import { parseFunctionCalldata } from "./components/functions/index";
 import { MY_PROPOSALS_PREFIX } from "./helpers";
 
 const NewProposal = ({ config, address, connect, chainId }) => {
+    const location = useLocation();
+
     const isSemiSmallScreen = useMediaQuery("(max-width: 745px)");
     const isSmallScreen = useMediaQuery("(max-width: 650px)");
     const isVerySmallScreen = useMediaQuery("(max-width: 379px)");
@@ -67,8 +70,8 @@ const NewProposal = ({ config, address, connect, chainId }) => {
     }, [chainId, address]);
 
     useEffect(() => {
-        ReactGA.send({ hitType: "pageview", page: "/governance/create" });
-    }, []);
+        ReactGA.send({ hitType: "pageview", page: location.pathname });
+    }, [location]);
 
     const addCalldata = (calldata) => setProposalFunctions(prev => [...prev, calldata]);
     const removeCalldata = (index) => setProposalFunctions(prev => prev.filter((_, i) => i !== index));

src/containers/Governance/ProposalDetails.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState, useMemo, useCallback } from "react";
 import ReactGA from "react-ga4";
-import { useParams } from 'react-router-dom';
+import { useParams, useLocation } from 'react-router-dom';
 import { useQueryClient } from '@tanstack/react-query';
 import { useBlock, useBlockNumber } from "wagmi";
 
@@ -77,6 +77,7 @@ import RepeatIcon from '@mui/icons-material/Repeat';
 const HUNDRED = new DecimalBigNumber(100n, 0);
 
 const ProposalDetails = ({ chainId, address, connect, config }) => {
+    const location = useLocation();
     const { id } = useParams();
     const proposalId = BigInt(id);
 
@@ -109,8 +110,10 @@ const ProposalDetails = ({ chainId, address, connect, config }) => {
     const { pastTotalSupply: totalSupply } = usePastTotalSupply(chainId, "GHST", proposalSnapshot);
     const { pastVotes } = usePastVotes(chainId, "GHST", proposalSnapshot, address);
 
+    console.log(location.pathname)
+
     useEffect(() => {
-        ReactGA.send({ hitType: "pageview", page: `/governance/${id}` });
+        ReactGA.send({ hitType: "pageview", page: `${chainId}/governance/${id}` });
     }, []);
 
     const quorumPercentage = useMemo(() => {

src/containers/Stake/StakeContainer.jsx

@@ -1,5 +1,6 @@
 import { Dispatch, SetStateAction, useState, useEffect } from "react";
 import { Box, Container, Grid, Divider, Typography, useMediaQuery, useTheme } from "@mui/material";
+import { useLocation } from "react-router-dom";
 import ReactGA from "react-ga4";
 
 import Paper from "../../components/Paper/Paper";
@@ -19,6 +20,7 @@ import { useEpoch } from "../../hooks/staking";
 import { useTokenSymbol } from "../../hooks/tokens";
 
 export const StakeContainer = ({ chainId, address, connect }) => {
+    const location = useLocation();
     const [isModalOpened, handleModal] = useState(false);
 
     const isSemiSmallScreen = useMediaQuery("(max-width: 745px)");
@@ -31,8 +33,8 @@ export const StakeContainer = ({ chainId, address, connect }) => {
     const { epoch, refetch: refetchEpoch } = useEpoch(chainId);
 
     useEffect(() => {
-        ReactGA.send({ hitType: "pageview", page: "/stake" });
-    }, [])
+        ReactGA.send({ hitType: "pageview", page: location.pathname });
+    }, [location])
 
     if (isModalOpened) {
         return (

src/containers/TreasuryDashboard/TreasuryDashboard.jsx

@@ -1,6 +1,6 @@
 import { Box, Container, Grid, useMediaQuery, useTheme } from "@mui/material";
 import { memo, useEffect, useMemo, useState } from "react";
-import { Outlet, Route, Routes, useSearchParams } from "react-router-dom";
+import { Outlet, Route, Routes, useSearchParams, useLocation } from "react-router-dom";
 import ReactGA from "react-ga4";
 
 import {
@@ -74,9 +74,11 @@ const TreasuryDashboard = ({ chainId }) => {
     const isSmallScreen = useMediaQuery("(max-width: 650px)");
     const isVerySmallScreen = useMediaQuery("(max-width: 379px)");
 
+    const location = useLocation();
+
     useEffect(() => {
-        ReactGA.send({ hitType: "pageview", page: "/dashboard" });
-    }, []);
+        ReactGA.send({ hitType: "pageview", page: location.pathname });
+    }, [location]);
 
     return (
         <>

src/containers/WethWrapper/WethWrapper.jsx

@@ -2,6 +2,7 @@ import { useState, useEffect, useMemo } from "react";
 import { Box, Container, Typography, useMediaQuery } from "@mui/material";
 import { useConfig, useBalance } from "wagmi";
 import { Helmet } from "react-helmet";
+import { useLocation } from "react-router-dom";
 import ReactGA from "react-ga4";
 
 import PageTitle from "../../components/PageTitle/PageTitle";
@@ -30,6 +31,8 @@ const WethWrapper = ({ chainId, address, config, connect }) => {
     const isSemiSmallScreen = useMediaQuery("(max-width: 480px)");
     const isVerySmallScreen = useMediaQuery("(max-width: 379px)");
 
+    const location = useLocation();
+
     const [chainName, setChainName] = useState("");
     const [isMint, setIsMint] = useState(true);
     const [isPending, setIsPending] = useState(false);
@@ -50,8 +53,8 @@ const WethWrapper = ({ chainId, address, config, connect }) => {
     const { symbol: reserveSymbol } = useTokenSymbol(chainId, "RESERVE");
 
     useEffect(() => {
-        ReactGA.send({ hitType: "pageview", page: "/wrapper" });
-    }, [])
+        ReactGA.send({ hitType: "pageview", page: location.pathname });
+    }, [location])
 
     useEffect(() => {
         const value = nativeBalance ? nativeBalance.value : 0n;