ability to refresh page after the extension is installed

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

@@ -248,6 +248,7 @@ const WelcomeView = ({
     defaultFunction,
     closeModal
 }) => {
+    const [refreshNeeded, setRefreshNeeded] = useState(false);
     const [isPending, setIsPending] = useState(false);
 
     const { epoch } = useEpoch(chainId);
@@ -256,9 +257,10 @@ const WelcomeView = ({
 
     const { isExtensionMissing } = useUnstableProvider();
 
+    const refreshPage = () => window.location.reload();
     const getConnect = () => {
+        setRefreshNeeded(true)
         window.open(GHOST_CONNECT, '_blank', 'noopener,noreferrer');
-        closeModal();
     }
 
     const callDefaultFunction = useCallback(async () => {
@@ -271,7 +273,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>
 
@@ -308,10 +310,15 @@ const WelcomeView = ({
 
             <PrimaryButton
                 disabled={isPending || gatekeeperAddress === EMPTY_ADDRESS}
-                onClick={isExtensionMissing ? getConnect : goNext}
+                onClick={isExtensionMissing
+                    ? (refreshNeeded ? refreshPage : getConnect)
+                    : goNext
+                }
                 fullWidth
             >
-                {isExtensionMissing ? "Get GHOST Connect" : `Start ${bridgeNumbers} ${"Stake\u00B2"}`}
+                {isExtensionMissing
+                    ? (refreshNeeded ? "Refresh Page" : "Get GHOST Connect")
+                    : `Start ${bridgeNumbers} ${"Stake\u00B2"}`}
             </PrimaryButton>
         </>
     )
@@ -371,7 +378,7 @@ const ConfirmStep = ({
                     amount: estimatedAmount._value.toString(),
                     sessionIndex: expectedSessionIndex,
                     transactionHash: txHash,
-                    blockNumber: blockNumber,
+                    blockNumber: Number(blockNumber),
                     chainId: chainId,
                     bridgeStability: 69, // TODO: avoid stability
                     timestamp: Date.now()

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;

src/hooks/helpers.js

@@ -9,7 +9,6 @@ import {
     FTSO_DAI_LP_ADDRESSES,
     WETH_ADDRESSES,
 } from "../constants/addresses";
-import { isNetworkLegacyType } from "../constants";
 import { config } from "../config";
 
 import { tokenNameConverter } from "../helpers/tokenConverter";
@@ -207,17 +206,6 @@ export const getTokenPurchaseLink = (chainId, tokenAddress, chainName) => {
     return purchaseUrl;
 }
 
-const sanitizeTransactionRequest = (request, isLegacy) => {
-    const finalRequest = { ...request };
-    if (isLegacy) {
-        delete finalRequest.maxFeePerGas;
-        delete finalRequest.maxPriorityFeePerGas;
-    } else {
-        delete finalRequest.gasPrice;
-    }
-    return finalRequest;
-}
-
 export const executeOnChainTransaction = async ({
     chainId,
     abi,
@@ -229,7 +217,6 @@ export const executeOnChainTransaction = async ({
     value
 }) => {
     try {
-        const isLegacy = isNetworkLegacyType(chainId);
         const { request } = await simulateContract(config, {
             abi,
             address,
@@ -238,11 +225,9 @@ export const executeOnChainTransaction = async ({
             account,
             chainId,
             value,
-            type: isLegacy ? 'legacy' : 'eip1559',
         });
 
-        const finalRequest = sanitizeTransactionRequest(request, isLegacy);
+        const txHash = await writeContract(config, request);
-        const txHash = await writeContract(config, { ...finalRequest });
         await waitForTransactionReceipt(config, {
             hash: txHash,
             onReplaced: () => toast(messages.replacedMsg),