@@ -3,74 +3,122 @@ import styles from '../index.module.scss'
33import { NavItem , Images , SubLink } from '@hyperplay/ui'
44import { Link , useLocation } from 'react-router-dom'
55import { useTranslation } from 'react-i18next'
6+ import { observer } from 'mobx-react-lite'
7+ import walletState from 'frontend/state/WalletState'
8+ import { PROVIDERS } from '@hyperplay/utils'
9+ import classNames from 'classnames'
10+ import { Popover } from '@mantine/core'
11+ import { useDisclosure } from '@mantine/hooks'
612
713export interface PortfolioNavItemProps {
814 collapsed : boolean
915}
1016
11- export function PortfolioNavItem ( { collapsed } : PortfolioNavItemProps ) {
12- const location = useLocation ( )
13- const { pathname } = location
14- const [ mmCollapsed , mmSetCollapsed ] = useState ( false )
15- const { t } = useTranslation ( )
17+ export const PortfolioNavItem = observer (
18+ ( { collapsed } : PortfolioNavItemProps ) => {
19+ const location = useLocation ( )
20+ const { pathname } = location
21+ const [ mmCollapsed , mmSetCollapsed ] = useState ( false )
22+ const { t } = useTranslation ( )
23+ const [ opened , { close, open } ] = useDisclosure ( false )
1624
17- return (
18- < NavItem
19- title = { t ( 'overlay.links.portfolio' , 'Portfolio' ) }
20- icon = { < Images . MetaMaskColored fill = "none" width = { 22 } height = { 36 } /> }
21- key = { '/portfolio' }
22- collapsed = { collapsed }
23- selected = { pathname . startsWith ( '/portfolio' ) }
24- onClick = { ( ) => mmSetCollapsed ( ! mmCollapsed ) }
25- subLinksCollapsed = { mmCollapsed }
26- setSubLinksCollapsed = { ( ) => mmSetCollapsed ( ! mmCollapsed ) }
27- subLinks = { [
28- < SubLink
29- key = { 'Portfolio' }
30- component = { Link }
31- to = { '/portfolio' }
32- selected = { pathname === '/portfolio' }
33- className = { styles . sublink }
34- >
35- { t ( 'overlay.links.portfolio' , 'Portfolio' ) }
36- </ SubLink > ,
37- < SubLink
38- key = { 'Swap' }
39- component = { Link }
40- to = { '/portfolio/swap' }
41- selected = { pathname === '/portfolio/swap' }
42- className = { styles . sublink }
43- >
44- { t ( 'overlay.links.swap' , 'Swap' ) }
45- </ SubLink > ,
46- < SubLink
47- key = { 'Bridge' }
48- component = { Link }
49- to = { '/portfolio/bridge' }
50- selected = { pathname === '/portfolio/bridge' }
51- className = { styles . sublink }
52- >
53- { t ( 'overlay.links.bridge' , 'Bridge' ) }
54- </ SubLink > ,
55- < SubLink
56- key = { 'Buy' }
57- component = { Link }
58- to = { '/portfolio/buy' }
59- selected = { pathname === '/portfolio/buy' }
60- className = { styles . sublink }
61- >
62- { t ( 'overlay.links.buy' , 'Buy' ) }
63- </ SubLink > ,
64- < SubLink
65- key = { 'Sell' }
66- component = { Link }
67- to = { '/portfolio/sell' }
68- selected = { pathname === '/portfolio/sell' }
69- className = { styles . sublink }
70- >
71- { t ( 'overlay.links.sell' , 'Sell' ) }
72- </ SubLink >
73- ] }
74- />
75- )
76- }
25+ const enablePortfolioNavItem =
26+ walletState . isConnected &&
27+ ( walletState . provider === PROVIDERS . METAMASK_EXTENSION ||
28+ walletState . provider === PROVIDERS . METAMASK_MOBILE )
29+
30+ const navItemClasses : Record < string , boolean > = { }
31+ navItemClasses [ styles . disabled ] = ! enablePortfolioNavItem
32+
33+ return (
34+ < Popover
35+ opened = { opened && ! enablePortfolioNavItem }
36+ unstyled
37+ classNames = { { dropdown : styles . popoverDropdown , arrow : styles . arrow } }
38+ position = "bottom-start"
39+ offset = { 0 }
40+ withArrow
41+ arrowPosition = "side"
42+ arrowOffset = { 16 }
43+ >
44+ < Popover . Target >
45+ < div >
46+ < NavItem
47+ onMouseEnter = { open }
48+ onMouseLeave = { close }
49+ title = { t ( 'overlay.links.portfolio' , 'Portfolio' ) }
50+ icon = {
51+ < Images . MetaMaskColored fill = "none" width = { 22 } height = { 36 } />
52+ }
53+ key = { '/portfolio' }
54+ collapsed = { collapsed }
55+ selected = { pathname . startsWith ( '/portfolio' ) }
56+ onClick = { ( ) => mmSetCollapsed ( ! mmCollapsed ) }
57+ subLinksCollapsed = { mmCollapsed || ! enablePortfolioNavItem }
58+ setSubLinksCollapsed = { ( ) => mmSetCollapsed ( ! mmCollapsed ) }
59+ classNames = { { link : classNames ( navItemClasses ) } }
60+ subLinks = { [
61+ < SubLink
62+ key = { 'Portfolio' }
63+ component = { Link }
64+ to = { '/portfolio' }
65+ selected = { pathname === '/portfolio' }
66+ className = { styles . sublink }
67+ >
68+ { t ( 'overlay.links.portfolio' , 'Portfolio' ) }
69+ </ SubLink > ,
70+ < SubLink
71+ key = { 'Swap' }
72+ component = { Link }
73+ to = { '/portfolio/swap' }
74+ selected = { pathname === '/portfolio/swap' }
75+ className = { styles . sublink }
76+ >
77+ { t ( 'overlay.links.swap' , 'Swap' ) }
78+ </ SubLink > ,
79+ < SubLink
80+ key = { 'Bridge' }
81+ component = { Link }
82+ to = { '/portfolio/bridge' }
83+ selected = { pathname === '/portfolio/bridge' }
84+ className = { styles . sublink }
85+ >
86+ { t ( 'overlay.links.bridge' , 'Bridge' ) }
87+ </ SubLink > ,
88+ < SubLink
89+ key = { 'Buy' }
90+ component = { Link }
91+ to = { '/portfolio/buy' }
92+ selected = { pathname === '/portfolio/buy' }
93+ className = { styles . sublink }
94+ >
95+ { t ( 'overlay.links.buy' , 'Buy' ) }
96+ </ SubLink > ,
97+ < SubLink
98+ key = { 'Sell' }
99+ component = { Link }
100+ to = { '/portfolio/sell' }
101+ selected = { pathname === '/portfolio/sell' }
102+ className = { styles . sublink }
103+ >
104+ { t ( 'overlay.links.sell' , 'Sell' ) }
105+ </ SubLink >
106+ ] }
107+ />
108+ </ div >
109+ </ Popover . Target >
110+ < Popover . Dropdown >
111+ < div className = { classNames ( 'caption' , styles . unsupportedModalTitle ) } >
112+ { t ( 'wallet.unsupported' , 'Unsupported Wallet Connection' ) }
113+ </ div >
114+ < div className = "caption-sm color-neutral-400" >
115+ { t (
116+ 'wallet.portfolio.onlyExtension' ,
117+ 'MetaMask Portfolio is only available when connected with MetaMask.'
118+ ) }
119+ </ div >
120+ </ Popover . Dropdown >
121+ </ Popover >
122+ )
123+ }
124+ )
0 commit comments