1
+ import { Button , HamburgerButton , Logo , NavOverlay } from '@streamr/streamr-layout'
1
2
import React , { FunctionComponent , HTMLAttributes } from 'react'
3
+ import { Link , useLocation , useNavigate } from 'react-router-dom'
2
4
import styled from 'styled-components'
3
- import { useLocation , Link , useNavigate } from 'react-router-dom'
4
- import { Button , HamburgerButton , Logo , NavOverlay } from '@streamr/streamr-layout'
5
- import { DESKTOP , TABLET } from '~/shared/utils/styled'
6
- import SvgIcon from '~/shared/components/SvgIcon'
7
- import { truncate } from '~/shared/utils/text'
5
+ import { ChainSelector as UnstyledChainSelector } from '~/components/ChainSelector'
6
+ import { useMediaQuery } from '~/hooks'
7
+ import { useOperatorForWalletQuery } from '~/hooks/operators'
8
8
import { connectModal } from '~/modals/ConnectModal'
9
+ import SvgIcon from '~/shared/components/SvgIcon'
9
10
import { useEns , useWalletAccount } from '~/shared/stores/wallet'
10
- import toast from '~/utils/toast '
11
- import { useOperatorForWalletQuery } from '~/hooks/operators '
11
+ import { DESKTOP , TABLET } from '~/shared/ utils/styled '
12
+ import { truncate } from '~/shared/utils/text '
12
13
import { saveOperator } from '~/utils'
13
- import { useMediaQuery } from '~/hooks'
14
- import { ChainSelector as UnstyledChainSelector } from '~/components/ChainSelector'
15
- import { useCurrentChainId } from '~/utils/chains'
14
+ import { useCurrentChainId , useCurrentChainKey } from '~/utils/chains'
16
15
import { Route as R , routeOptions } from '~/utils/routes'
17
- import { useCurrentChainSymbolicName } from '~/utils/chains'
18
- import { Avatarless , Name , Username } from './User'
16
+ import toast from '~/utils/toast'
19
17
import {
20
18
Avatar ,
21
19
LogoLink ,
@@ -36,8 +34,9 @@ import {
36
34
UserInfoMobile ,
37
35
WalletAddress ,
38
36
} from './Nav.styles'
39
- import { Dropdown } from './NetworkDropdown'
40
37
import { NetworkAccordion } from './NetworkAccordion'
38
+ import { Dropdown } from './NetworkDropdown'
39
+ import { Avatarless , Name , Username } from './User'
41
40
42
41
const UnstyledDesktopNav : FunctionComponent = ( props ) => {
43
42
const { pathname } = useLocation ( )
@@ -56,7 +55,7 @@ const UnstyledDesktopNav: FunctionComponent = (props) => {
56
55
57
56
const chainId = useCurrentChainId ( )
58
57
59
- const chainName = useCurrentChainSymbolicName ( )
58
+ const chainKey = useCurrentChainKey ( )
60
59
61
60
return (
62
61
< div { ...props } data-testid = { 'desktop-nav' } >
@@ -71,14 +70,14 @@ const UnstyledDesktopNav: FunctionComponent = (props) => {
71
70
< div />
72
71
< NavbarItem >
73
72
< NavbarLinkDesktop highlight = { pathname . startsWith ( R . projects ( ) ) } >
74
- < NavLink as = { Link } to = { R . projects ( routeOptions ( chainName ) ) } >
73
+ < NavLink as = { Link } to = { R . projects ( routeOptions ( chainKey ) ) } >
75
74
Projects
76
75
</ NavLink >
77
76
</ NavbarLinkDesktop >
78
77
</ NavbarItem >
79
78
< NavbarItem >
80
79
< NavbarLinkDesktop highlight = { pathname . startsWith ( R . streams ( ) ) } >
81
- < NavLink as = { Link } to = { R . streams ( routeOptions ( chainName ) ) } >
80
+ < NavLink as = { Link } to = { R . streams ( routeOptions ( chainKey ) ) } >
82
81
Streams
83
82
</ NavLink >
84
83
</ NavbarLinkDesktop >
@@ -138,7 +137,7 @@ const UnstyledDesktopNav: FunctionComponent = (props) => {
138
137
navigate (
139
138
R . operator (
140
139
operator . id ,
141
- routeOptions ( chainName ) ,
140
+ routeOptions ( chainKey ) ,
142
141
) ,
143
142
)
144
143
} }
@@ -202,7 +201,7 @@ const UnstyledMobileNav: FunctionComponent<{ className?: string }> = ({ classNam
202
201
203
202
const { pathname } = useLocation ( )
204
203
205
- const chainName = useCurrentChainSymbolicName ( )
204
+ const chainKey = useCurrentChainKey ( )
206
205
207
206
return (
208
207
< NavOverlay className = { className } >
@@ -226,12 +225,12 @@ const UnstyledMobileNav: FunctionComponent<{ className?: string }> = ({ classNam
226
225
</ UserInfoMobile >
227
226
) }
228
227
< NavbarLinkMobile highlight = { pathname . startsWith ( R . projects ( ) ) } >
229
- < NavLink as = { Link } to = { R . projects ( routeOptions ( chainName ) ) } >
228
+ < NavLink as = { Link } to = { R . projects ( routeOptions ( chainKey ) ) } >
230
229
Projects
231
230
</ NavLink >
232
231
</ NavbarLinkMobile >
233
232
< NavbarLinkMobile highlight = { pathname . startsWith ( R . streams ( ) ) } >
234
- < NavLink as = { Link } to = { R . streams ( routeOptions ( chainName ) ) } >
233
+ < NavLink as = { Link } to = { R . streams ( routeOptions ( chainKey ) ) } >
235
234
Streams
236
235
</ NavLink >
237
236
</ NavbarLinkMobile >
0 commit comments