diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
index 8eaf81a8..c85dfab6 100644
--- a/src/components/Header/index.tsx
+++ b/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,9 +72,11 @@ const Title = styled(NavLink)`
pointer-events: auto;
justify-self: flex-start;
margin-right: 12px;
+
:hover {
cursor: pointer;
}
+
${({ theme }) => theme.mediaWidth.upToSmall`
justify-self: center;
`};
@@ -81,6 +84,7 @@ const Title = styled(NavLink)`
const UniIcon = styled.div`
transition: transform 0.3s ease;
+
:hover {
transform: rotate(-5deg);
}
@@ -169,7 +173,7 @@ export default function Header() {
pathname === '/'}
+ isActive={(match, { pathname }) => SUPPORTED_NETWORK_PATH_NAMES.includes(pathname)}
>
Overview
diff --git a/src/components/Menu/NetworkDropdown.tsx b/src/components/Menu/NetworkDropdown.tsx
index 78ba989f..2a0e7acc 100644
--- a/src/components/Menu/NetworkDropdown.tsx
+++ b/src/components/Menu/NetworkDropdown.tsx
@@ -1,7 +1,8 @@
+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'
@@ -9,6 +10,7 @@ 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(null)
useOnClickOutside(node, () => setShowMenu(false))
+ const currentTabPath = useMemo(
+ () => Object.values(HEADER_EXTRA_TABS_ROUTES).find((extraTab) => pathname.includes(extraTab)) || '',
+ [pathname]
+ )
+
return (
setShowMenu(!showMenu)}>
@@ -114,7 +123,12 @@ export default function NetworkDropdown() {
{SUPPORTED_NETWORK_VERSIONS.map((n) => {
return (
-
+
{
setShowMenu(false)
diff --git a/src/constants/networks.ts b/src/constants/networks.ts
index 9c8ba38b..c6da37c7 100644
--- a/src/constants/networks.ts
+++ b/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,
diff --git a/src/constants/tabs.ts b/src/constants/tabs.ts
new file mode 100644
index 00000000..7397eeea
--- /dev/null
+++ b/src/constants/tabs.ts
@@ -0,0 +1,4 @@
+export const HEADER_EXTRA_TABS_ROUTES = {
+ pools: 'pools',
+ tokens: 'tokens',
+}