From e583a591f1c6f4bdcd19723424ddeb059f27ce70 Mon Sep 17 00:00:00 2001 From: Uncle Fatso Date: Mon, 11 May 2026 14:15:42 +0300 Subject: [PATCH] change the pageview path for analytics; make it dependant on network name Signed-off-by: Uncle Fatso --- package.json | 2 +- src/components/Sidebar/NavContent.jsx | 5 ----- .../TopBar/Wallet/InitialWalletView.tsx | 17 ++++++++++++++++- src/containers/Bond/BondModal.jsx | 2 +- src/containers/Bond/Bonds.jsx | 8 +++++--- src/containers/Breakout/BreakoutModal.jsx | 2 +- src/containers/Bridge/Bridge.jsx | 7 +++++-- src/containers/Faucet/Faucet.jsx | 7 +++++-- src/containers/Governance/Governance.jsx | 12 +++++++----- src/containers/Governance/NewProposal.jsx | 7 +++++-- src/containers/Governance/ProposalDetails.jsx | 7 +++++-- src/containers/Stake/StakeContainer.jsx | 6 ++++-- .../TreasuryDashboard/TreasuryDashboard.jsx | 8 +++++--- src/containers/WethWrapper/WethWrapper.jsx | 7 +++++-- 14 files changed, 65 insertions(+), 32 deletions(-) diff --git a/package.json b/package.json index e2e425e..486687e 100644 --- a/package.json +++ b/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", diff --git a/src/components/Sidebar/NavContent.jsx b/src/components/Sidebar/NavContent.jsx index d04d1cf..319788c 100644 --- a/src/components/Sidebar/NavContent.jsx +++ b/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 ( diff --git a/src/components/TopBar/Wallet/InitialWalletView.tsx b/src/components/TopBar/Wallet/InitialWalletView.tsx index 087ac23..761deee 100644 --- a/src/components/TopBar/Wallet/InitialWalletView.tsx +++ b/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 ( diff --git a/src/containers/Bond/BondModal.jsx b/src/containers/Bond/BondModal.jsx index 8a70c3f..244b79d 100644 --- a/src/containers/Bond/BondModal.jsx +++ b/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); diff --git a/src/containers/Bond/Bonds.jsx b/src/containers/Bond/Bonds.jsx index e76d4cc..db1aee9 100644 --- a/src/containers/Bond/Bonds.jsx +++ b/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); diff --git a/src/containers/Breakout/BreakoutModal.jsx b/src/containers/Breakout/BreakoutModal.jsx index 58d1729..a1fed94 100644 --- a/src/containers/Breakout/BreakoutModal.jsx +++ b/src/containers/Breakout/BreakoutModal.jsx @@ -271,7 +271,7 @@ const WelcomeView = ({ return ( <> {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:` } diff --git a/src/containers/Bridge/Bridge.jsx b/src/containers/Bridge/Bridge.jsx index 9528d98..9e9d0ff 100644 --- a/src/containers/Bridge/Bridge.jsx +++ b/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(); diff --git a/src/containers/Faucet/Faucet.jsx b/src/containers/Faucet/Faucet.jsx index 2e97132..39fb262 100644 --- a/src/containers/Faucet/Faucet.jsx +++ b/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; diff --git a/src/containers/Governance/Governance.jsx b/src/containers/Governance/Governance.jsx index a5d9ff1..93470ff 100644 --- 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, 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 ( diff --git a/src/containers/Governance/NewProposal.jsx b/src/containers/Governance/NewProposal.jsx index ad2716c..494051a 100644 --- a/src/containers/Governance/NewProposal.jsx +++ b/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)); diff --git a/src/containers/Governance/ProposalDetails.jsx b/src/containers/Governance/ProposalDetails.jsx index 750ff8d..246b19e 100644 --- a/src/containers/Governance/ProposalDetails.jsx +++ b/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(() => { diff --git a/src/containers/Stake/StakeContainer.jsx b/src/containers/Stake/StakeContainer.jsx index e404bcc..1c8c81b 100644 --- a/src/containers/Stake/StakeContainer.jsx +++ b/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 ( diff --git a/src/containers/TreasuryDashboard/TreasuryDashboard.jsx b/src/containers/TreasuryDashboard/TreasuryDashboard.jsx index 8ea1f00..a9429cd 100644 --- a/src/containers/TreasuryDashboard/TreasuryDashboard.jsx +++ b/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 ( <> diff --git a/src/containers/WethWrapper/WethWrapper.jsx b/src/containers/WethWrapper/WethWrapper.jsx index 8656d41..99171ec 100644 --- a/src/containers/WethWrapper/WethWrapper.jsx +++ b/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;