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', +}