Merge pull request #4279 from CrocSwap/remove-network-switching-hard-…

…reloads

Remove network switching hard reloads

src/App/App.tsx

@@ -147,6 +147,7 @@ export default function App() {
             showMobileVersion && <FooterNav />
         );
 
+
     return (
         <>
             {location.pathname == '/' && platformName !== 'futa' && (

src/App/components/PageHeader/NetworkSelector/NetworkSelector.tsx

@@ -2,8 +2,6 @@
 import DropdownMenu2 from '../../../../components/Global/DropdownMenu2/DropdownMenu2';
 import { ItemEnterAnimation } from '../../../../utils/others/FramerMotionAnimations';
 import { useContext, useEffect, useState } from 'react';
-import { CrocEnvContext } from '../../../../contexts/CrocEnvContext';
-
 import { supportedNetworks } from '../../../../ambient-utils/constants';
 import { ChainSpec } from '@crocswap-libs/sdk';
 import { useSearchParams } from 'react-router-dom';
@@ -21,7 +19,10 @@ import scrollSepoliaLogo from '../../../../assets/images/networks/scroll_sepolia
 import ETH from '../../../../assets/images/networks/ethereum_logo.svg';
 import sepoliaLogo from '../../../../assets/images/networks/sepolia_logo.webp';
 import { lookupChain } from '@crocswap-libs/sdk/dist/context';
-import { BrandContext } from '../../../../contexts/BrandContext';
+import {
+    BrandContext,
+    BrandContextIF,
+} from '../../../../contexts/BrandContext';
 import { lookupChainId } from '../../../../ambient-utils/dataLayer';
 import { useSwitchNetwork, useWeb3ModalAccount } from '@web3modal/ethers/react';
 import useMediaQuery from '../../../../utils/hooks/useMediaQuery';
@@ -30,6 +31,11 @@ interface propsIF {
     customBR?: string;
 }
 import { motion } from 'framer-motion';
+import {
+    AppStateContext,
+    AppStateContextIF,
+} from '../../../../contexts/AppStateContext';
+import { useBottomSheet } from '../../../../contexts/BottomSheetContext';
 
 interface NetworkIF {
     id: string;
@@ -46,12 +52,14 @@ interface NetworkIF {
 export default function NetworkSelector(props: propsIF) {
     const {
         chooseNetwork,
-        chainData: { chainId },
-        chainData,
-    } = useContext(CrocEnvContext);
-    const { networks, platformName, includeCanto } = useContext(BrandContext);
+        activeNetwork: { chainId },
+    } = useContext<AppStateContextIF>(AppStateContext);
+    const { networks, platformName, includeCanto } =
+        useContext<BrandContextIF>(BrandContext);
+        const {  closeBottomSheet } =
+        useBottomSheet();
     const { switchNetwork } = useSwitchNetwork();
-    const smallScreen = useMediaQuery('(max-width: 600px)');
+    const smallScreen: boolean = useMediaQuery('(max-width: 600px)');
 
     const linkGenIndex: linkGenMethodsIF = useLinkGen('index');
     const [searchParams, setSearchParams] = useSearchParams();
@@ -99,10 +107,7 @@ export default function NetworkSelector(props: propsIF) {
             // check if chain is supported and not the current chain in the app
             // yes → trigger machinery to switch the current network
             // no → no action except to clear the param from the URL
-            if (
-                supportedNetworks[targetChain] &&
-                targetChain !== chainData.chainId
-            ) {
+            if (supportedNetworks[targetChain] && targetChain !== chainId) {
                 // use web3modal if wallet is connected, otherwise use in-app toggle
                 if (isConnected) {
                     switchNetwork(parseInt(targetChain));
@@ -206,11 +211,15 @@ export default function NetworkSelector(props: propsIF) {
             <motion.li
                 className={styles.networkItem}
                 id={network.id}
-                onClick={() =>
-                    network.isExternal
-                        ? window.open(network.link, '_blank')
-                        : handleClick(chainMap.get(network.chainId))
-                }
+                onClick={() => {
+                    if (network.isExternal) {
+                        window.open(network.link, '_blank');
+                    } else {
+                        handleClick(chainMap.get(network.chainId));
+                    }
+                    closeBottomSheet()
+                }}
+
                 key={network.id}
                 custom={network.custom}
                 variants={ItemEnterAnimation}

src/App/components/PageHeader/PageHeader.tsx

@@ -1,23 +1,32 @@
-import {
-    useEffect,
-    useState,
-    memo,
-    useContext,
-    useCallback,
-} from 'react';
+import { useEffect, useState, memo, useContext, useCallback } from 'react';
 import { Link, useLocation } from 'react-router-dom';
 import { AnimateSharedLayout, motion } from 'framer-motion';
 import UserMenu from './UserMenu/UserMenu';
 import NetworkSelector from './NetworkSelector/NetworkSelector';
 import logo from '../../../assets/images/logos/logo_mark.svg';
 import TradeNowButton from '../../../components/Home/Landing/TradeNowButton/TradeNowButton';
 import useMediaQuery from '../../../utils/hooks/useMediaQuery';
-import { AppStateContext } from '../../../contexts/AppStateContext';
-import { CrocEnvContext } from '../../../contexts/CrocEnvContext';
-import { PoolContext } from '../../../contexts/PoolContext';
-import { SidebarContext } from '../../../contexts/SidebarContext';
-import { TradeTokenContext } from '../../../contexts/TradeTokenContext';
-import { TradeTableContext } from '../../../contexts/TradeTableContext';
+import {
+    AppStateContext,
+    AppStateContextIF,
+} from '../../../contexts/AppStateContext';
+import {
+    CrocEnvContext,
+    CrocEnvContextIF,
+} from '../../../contexts/CrocEnvContext';
+import { PoolContext, PoolContextIF } from '../../../contexts/PoolContext';
+import {
+    SidebarContext,
+    SidebarContextIF,
+} from '../../../contexts/SidebarContext';
+import {
+    TradeTokenContext,
+    TradeTokenContextIF,
+} from '../../../contexts/TradeTokenContext';
+import {
+    TradeTableContext,
+    TradeTableContextIF,
+} from '../../../contexts/TradeTableContext';
 import {
     getFormattedNumber,
     chainNumToString,
@@ -31,36 +40,45 @@ import {
 } from '../../../utils/hooks/useLinkGen';
 import { FlexContainer } from '../../../styled/Common';
 import Button from '../../../components/Form/Button';
-import { UserDataContext } from '../../../contexts/UserDataContext';
-import { GraphDataContext } from '../../../contexts/GraphDataContext';
-import { TokenBalanceContext } from '../../../contexts/TokenBalanceContext';
+import {
+    UserDataContext,
+    UserDataContextIF,
+} from '../../../contexts/UserDataContext';
+import {
+    GraphDataContext,
+    GraphDataContextIF,
+} from '../../../contexts/GraphDataContext';
+import {
+    TokenBalanceContext,
+    TokenBalanceContextIF,
+} from '../../../contexts/TokenBalanceContext';
 import { TradeDataContext } from '../../../contexts/TradeDataContext';
-import { ReceiptContext } from '../../../contexts/ReceiptContext';
+import {
+    ReceiptContext,
+    ReceiptContextIF,
+} from '../../../contexts/ReceiptContext';
 import { BrandContext, BrandContextIF } from '../../../contexts/BrandContext';
 import styles from './PageHeader.module.css';
 import { useBottomSheet } from '../../../contexts/BottomSheetContext';
 
 const PageHeader = function () {
     const {
-        crocEnv,
-        setCrocEnv,
-        chainData: { chainId, poolIndex: poolId },
-    } = useContext(CrocEnvContext);
-    const { headerImage } = useContext<BrandContextIF>(BrandContext);
-
-    const {
+        activeNetwork: { chainId, poolIndex: poolId },
         walletModal: { open: openWalletModal },
         appHeaderDropdown,
-    } = useContext(AppStateContext);
-    const { resetTokenBalances } = useContext(TokenBalanceContext);
-    const { resetUserGraphData } = useContext(GraphDataContext);
-    const {  isBottomSheetOpen } =
-    useBottomSheet();
-
+    } = useContext<AppStateContextIF>(AppStateContext);
+    const { crocEnv, setCrocEnv } =
+        useContext<CrocEnvContextIF>(CrocEnvContext);
+    const { headerImage } = useContext<BrandContextIF>(BrandContext);
+    const { resetTokenBalances } =
+        useContext<TokenBalanceContextIF>(TokenBalanceContext);
+    const { resetUserGraphData } =
+        useContext<GraphDataContextIF>(GraphDataContext);
     const { poolPriceDisplay, isTradeDollarizationEnabled, usdPrice } =
-        useContext(PoolContext);
-    const { recentPools } = useContext(SidebarContext);
-    const { setShowAllData, activeTradeTab } = useContext(TradeTableContext);
+        useContext<PoolContextIF>(PoolContext);
+    const { recentPools } = useContext<SidebarContextIF>(SidebarContext);
+    const { setShowAllData, activeTradeTab } =
+        useContext<TradeTableContextIF>(TradeTableContext);
     const {
         baseToken: {
             setBalance: setBaseTokenBalance,
@@ -70,10 +88,11 @@ const PageHeader = function () {
             setBalance: setQuoteTokenBalance,
             setDexBalance: setQuoteTokenDexBalance,
         },
-    } = useContext(TradeTokenContext);
+    } = useContext<TradeTokenContextIF>(TradeTokenContext);
     const { userAddress, isUserConnected, disconnectUser, ensName } =
-        useContext(UserDataContext);
-    const { resetReceiptData } = useContext(ReceiptContext);
+        useContext<UserDataContextIF>(UserDataContext);
+    const { resetReceiptData } = useContext<ReceiptContextIF>(ReceiptContext);
+    const { isBottomSheetOpen } = useBottomSheet();
 
     // eslint-disable-next-line
     const [mobileNavToggle, setMobileNavToggle] = useState<boolean>(false);
@@ -349,11 +368,7 @@ const PageHeader = function () {
 
     const routeDisplay = (
         <AnimateSharedLayout>
-            <nav
-                className={styles.primaryNavigation}
-                id='primary_navigation'
-
-            >
+            <nav className={styles.primaryNavigation} id='primary_navigation'>
                 {linkData.map((link, idx) =>
                     link.shouldDisplay ? (
                         <Link
@@ -415,7 +430,11 @@ const PageHeader = function () {
             <header
                 className={styles.primaryHeader}
                 data-testid={'page-header'}
-                style={{ position: 'sticky', top: 0, zIndex: isBottomSheetOpen ? 0.1 : 10 }}
+                style={{
+                    position: 'sticky',
+                    top: 0,
+                    zIndex: isBottomSheetOpen ? 0.1 : 10,
+                }}
             >
                 <div
                     onClick={(event: React.MouseEvent) => {
@@ -436,8 +455,8 @@ const PageHeader = function () {
                             <img
                                 className={styles.logoText}
                                 src={logo}
-                                    alt='ambient'
-                                    width='70px'
+                                alt='ambient'
+                                width='70px'
                             />
                         )}
                     </Link>
@@ -466,7 +485,6 @@ const PageHeader = function () {
                     )}
                 </div>
             </header>
-            {/* {isDevMenuEnabled && showDevMenu && <MobileDropdown />} */}
         </>
     );
 };

src/App/components/PageHeader/UserMenu/UserProfileCard.tsx

@@ -1,15 +1,14 @@
 import { useContext } from 'react';
 import { FiCopy, FiExternalLink } from 'react-icons/fi';
 import { Link } from 'react-router-dom';
-import { getChainExplorer } from '../../../../ambient-utils/dataLayer';
 import { getAvatarComponent } from '../../../../components/Chat/ChatRenderUtils';
 import IconWithTooltip from '../../../../components/Global/IconWithTooltip/IconWithTooltip';
-import { CrocEnvContext } from '../../../../contexts/CrocEnvContext';
 import { UserDataContext } from '../../../../contexts/UserDataContext';
 import { FlexContainer } from '../../../../styled/Common';
-import styles from './UserProfileCard.module.css'
+import styles from './UserProfileCard.module.css';
+import { AppStateContext } from '../../../../contexts/AppStateContext';
 
-interface LevelDropdownPropsIF {
+interface propsIF {
     ensName: string;
     accountAddress: string;
     handleCopyAddress: () => void;
@@ -18,50 +17,52 @@ interface LevelDropdownPropsIF {
     isMobileDropdown?: boolean;
 }
 
-export default function UserProfileCard(props: LevelDropdownPropsIF) {
-    const { ensName, accountAddress, handleCopyAddress, accountAddressFull, isMobileDropdown } =
-        props;
+export default function UserProfileCard(props: propsIF) {
     const {
-        chainData: { chainId },
-    } = useContext(CrocEnvContext);
+        ensName,
+        accountAddress,
+        handleCopyAddress,
+        accountAddressFull,
+        isMobileDropdown,
+    } = props;
+    const { activeNetwork } = useContext(AppStateContext);
     const { userAddress, resolvedAddressFromContext, userAvatarData } =
         useContext(UserDataContext);
-    const blockExplorer = getChainExplorer(chainId);
     const link = resolvedAddressFromContext
         ? `/${resolvedAddressFromContext}`
         : `/${userAddress}`;
 
     return (
-        <div className={`${styles.nameDisplayContainer} ${isMobileDropdown && styles.mobileDropdown}`}>
+        <div
+            className={`${styles.nameDisplayContainer} ${isMobileDropdown && styles.mobileDropdown}`}
+        >
             <Link to={link}>
                 {userAddress &&
                     userAvatarData &&
                     getAvatarComponent(userAddress, userAvatarData, 50)}
             </Link>
-
             <FlexContainer alignItems='center' flexDirection='column'>
                 <div className={styles.nameDisplay}>
                     <h2>{ensName !== '' ? ensName : accountAddress}</h2>
-
                     <IconWithTooltip
                         title={`${'View wallet address on block explorer'}`}
                         placement='right'
                     >
                         <a
                             target='_blank'
                             rel='noreferrer'
-                            href={`${blockExplorer}address/${accountAddressFull}`}
+                            href={`${activeNetwork.blockExplorer}address/${accountAddressFull}`}
                             aria-label='View address on Etherscan'
                         >
                             <FiExternalLink />
                         </a>
                     </IconWithTooltip>
-
                     <IconWithTooltip
                         title={`${'Copy wallet address to clipboard'}`}
                         placement='right'
                     >
-                        <button className={styles.copyButton}
+                        <button
+                            className={styles.copyButton}
                             onClick={handleCopyAddress}
                             aria-label='Copy address to clipboard'
                         >
@@ -71,7 +72,7 @@ export default function UserProfileCard(props: LevelDropdownPropsIF) {
                 </div>
                 <div className={styles.walletDisplay}>
                     <p>Connected Wallet:</p>
-                    <p>{props.accountAddress}</p>
+                    <p>{accountAddress}</p>
                 </div>
             </FlexContainer>
         </div>