Fix routes when network toggled

src/components/Header/index.tsx

@@ -10,6 +10,7 @@ import NetworkDropdown from 'components/Menu/NetworkDropdown'
 import { useActiveNetworkVersion } from 'state/application/hooks'
 import { networkPrefix } from 'utils/networkPrefix'
 import { AutoColumn } from 'components/Column'
+import { SUPPORTED_NETWORK_PATH_NAMES } from '../../constants/networks'
 
 const HeaderFrame = styled.div`
   display: grid;
@@ -71,16 +72,19 @@ const Title = styled(NavLink)`
   pointer-events: auto;
   justify-self: flex-start;
   margin-right: 12px;
+
   :hover {
     cursor: pointer;
   }
+
   ${({ theme }) => theme.mediaWidth.upToSmall`
     justify-self: center;
   `};
 `
 
 const UniIcon = styled.div`
   transition: transform 0.3s ease;
+
   :hover {
     transform: rotate(-5deg);
   }
@@ -169,7 +173,7 @@ export default function Header() {
           <StyledNavLink
             id={`pool-nav-link`}
             to={networkPrefix(activeNewtork)}
-            isActive={(match, { pathname }) => pathname === '/'}
+            isActive={(match, { pathname }) => SUPPORTED_NETWORK_PATH_NAMES.includes(pathname)}
           >
             Overview
           </StyledNavLink>

src/components/Menu/NetworkDropdown.tsx

@@ -1,14 +1,16 @@
+import React, { useState, useRef, useMemo } from 'react'
+import { useLocation } from 'react-router-dom'
 import { RowFixed, RowBetween } from 'components/Row'
 import { PolygonNetworkInfo, SUPPORTED_NETWORK_VERSIONS } from 'constants/networks'
 import useTheme from 'hooks/useTheme'
-import React, { useState, useRef } from 'react'
 import { ChevronDown } from 'react-feather'
 import { useActiveNetworkVersion } from 'state/application/hooks'
 import styled from 'styled-components'
 import { StyledInternalLink, TYPE } from 'theme'
 import { useOnClickOutside } from 'hooks/useOnClickOutside'
 import { AutoColumn } from 'components/Column'
 import { EthereumNetworkInfo } from '../../constants/networks'
+import { HEADER_EXTRA_TABS_ROUTES } from '../../constants/tabs'
 
 const Container = styled.div`
   position: relative;
@@ -55,6 +57,7 @@ const NetworkRow = styled(RowBetween)<{ active?: boolean; disabled?: boolean }>`
   background-color: ${({ theme, active }) => (active ? theme.bg2 : theme.bg1)};
   border-radius: 8px;
   opacity: ${({ disabled }) => (disabled ? '0.5' : 1)};
+
   :hover {
     cursor: ${({ disabled }) => (disabled ? 'initial' : 'pointer')};
     opacity: ${({ disabled }) => (disabled ? 0.5 : 0.7)};
@@ -84,12 +87,18 @@ const GreenDot = styled.div`
 export default function NetworkDropdown() {
   const [activeNetwork] = useActiveNetworkVersion()
   const theme = useTheme()
+  const { pathname } = useLocation()
 
   const [showMenu, setShowMenu] = useState(false)
 
   const node = useRef<HTMLDivElement>(null)
   useOnClickOutside(node, () => setShowMenu(false))
 
+  const currentTabPath = useMemo(
+    () => Object.values(HEADER_EXTRA_TABS_ROUTES).find((extraTab) => pathname.includes(extraTab)) || '',
+    [pathname]
+  )
+
   return (
     <Container ref={node}>
       <Wrapper onClick={() => setShowMenu(!showMenu)}>
@@ -114,7 +123,12 @@ export default function NetworkDropdown() {
             </TYPE.main>
             {SUPPORTED_NETWORK_VERSIONS.map((n) => {
               return (
-                <StyledInternalLink key={n.id} to={`${n === EthereumNetworkInfo ? '' : '/' + n.route}/`}>
+                <StyledInternalLink
+                  key={n.id}
+                  to={`${
+                    n.name === EthereumNetworkInfo.name ? `/${currentTabPath}` : `${n.pathName}${currentTabPath}`
+                  }`}
+                >
                   <NetworkRow
                     onClick={() => {
                       setShowMenu(false)

src/constants/networks.ts

@@ -13,6 +13,7 @@ export enum SupportedNetwork {
 export type NetworkInfo = {
   id: SupportedNetwork
   route: string
+  pathName: string
   name: string
   imageURL: string
   bgColor: string
@@ -24,6 +25,7 @@ export type NetworkInfo = {
 export const EthereumNetworkInfo: NetworkInfo = {
   id: SupportedNetwork.ETHEREUM,
   route: '',
+  pathName: '/',
   name: 'Ethereum',
   bgColor: '#fc077d',
   primaryColor: '#fc077d',
@@ -34,6 +36,7 @@ export const EthereumNetworkInfo: NetworkInfo = {
 export const ArbitrumNetworkInfo: NetworkInfo = {
   id: SupportedNetwork.ARBITRUM,
   route: 'arbitrum',
+  pathName: '/arbitrum/',
   name: 'Arbitrum',
   imageURL: ARBITRUM_LOGO_URL,
   bgColor: '#0A294B',
@@ -45,6 +48,7 @@ export const ArbitrumNetworkInfo: NetworkInfo = {
 export const OptimismNetworkInfo: NetworkInfo = {
   id: SupportedNetwork.OPTIMISM,
   route: 'optimism',
+  pathName: '/optimism/',
   name: 'Optimism',
   bgColor: '#F01B36',
   primaryColor: '#F01B36',
@@ -56,6 +60,7 @@ export const OptimismNetworkInfo: NetworkInfo = {
 export const PolygonNetworkInfo: NetworkInfo = {
   id: SupportedNetwork.POLYGON,
   route: 'polygon',
+  pathName: '/polygon/',
   name: 'Polygon',
   bgColor: '#8247e5',
   primaryColor: '#8247e5',
@@ -64,6 +69,13 @@ export const PolygonNetworkInfo: NetworkInfo = {
   blurb: '',
 }
 
+export const SUPPORTED_NETWORK_PATH_NAMES = [
+  EthereumNetworkInfo.pathName,
+  ArbitrumNetworkInfo.pathName,
+  OptimismNetworkInfo.pathName,
+  PolygonNetworkInfo.pathName,
+]
+
 export const SUPPORTED_NETWORK_VERSIONS: NetworkInfo[] = [
   EthereumNetworkInfo,
   PolygonNetworkInfo,

src/constants/tabs.ts

@@ -0,0 +1,4 @@
+export const HEADER_EXTRA_TABS_ROUTES = {
+  pools: 'pools',
+  tokens: 'tokens',
+}