import Link from 'next/link'
import TradeIcon from './icons/TradeIcon'
import {
EllipsisHorizontalIcon,
BuildingLibraryIcon,
LightBulbIcon,
ArrowTopRightOnSquareIcon,
ChevronDownIcon,
CurrencyDollarIcon,
ChartBarIcon,
Cog8ToothIcon,
InformationCircleIcon,
ArrowsRightLeftIcon,
} from '@heroicons/react/20/solid'
import { useRouter } from 'next/router'
import { useTranslation } from 'next-i18next'
import { Fragment, ReactNode, useEffect, useState } from 'react'
import { Disclosure, Popover, Transition } from '@headlessui/react'
import MangoAccountSummary from './account/MangoAccountSummary'
import Tooltip from './shared/Tooltip'
import { HealthType } from '@blockworks-foundation/mango-v4'
import { useWallet } from '@solana/wallet-adapter-react'
import useLocalStorageState from '../hooks/useLocalStorageState'
import { ONBOARDING_TOUR_KEY } from '../utils/constants'
import mangoStore from '@store/mangoStore'
import HealthHeart from './account/HealthHeart'
const SideNav = ({ collapsed }: { collapsed: boolean }) => {
const [, setShowOnboardingTour] = useLocalStorageState(ONBOARDING_TOUR_KEY)
const { t } = useTranslation('common')
const { connected } = useWallet()
const mangoAccount = mangoStore((s) => s.mangoAccount.current)
const router = useRouter()
const { pathname } = router
const handleTakeTour = () => {
if (pathname !== '/') {
router.push('/')
}
setShowOnboardingTour(true)
}
return (
Mango
}
title={t('account')}
pagePath="/"
/>
}
title={t('swap')}
pagePath="/swap"
/>
}
title={t('trade')}
pagePath="/trade"
/>
}
title={t('stats')}
pagePath="/stats"
/>
}
title={t('settings')}
pagePath="/settings"
/>
}
title={t('more')}
>
{/* }
title={t('fees')}
pagePath="/fees"
hideIconBg
/> */}
}
title={t('learn')}
pagePath="https://docs.mango.markets"
hideIconBg
isExternal
showTooltip={false}
/>
}
title={t('governance')}
pagePath="https://dao.mango.markets"
hideIconBg
isExternal
showTooltip={false}
/>
{connected ? (
) : null}
}
title={
Health Check
{mangoAccount
? mangoAccount.name
: connected
? 'No Account'
: 'Connect'}
}
alignBottom
hideIconBg
>
)
}
export default SideNav
const MenuItem = ({
active,
collapsed,
icon,
title,
pagePath,
hideIconBg,
isExternal,
showTooltip = true,
}: {
active?: boolean
collapsed: boolean
icon: ReactNode
title: string
pagePath: string
hideIconBg?: boolean
isExternal?: boolean
showTooltip?: boolean
}) => {
return (
{isExternal ? (
) : null}
)
}
export const ExpandableMenuItem = ({
alignBottom,
children,
collapsed,
hideIconBg,
icon,
title,
}: {
alignBottom?: boolean
children: ReactNode
collapsed: boolean
hideIconBg?: boolean
icon: ReactNode
title: string | ReactNode
}) => {
const [showMenu, setShowMenu] = useState(false)
const onHoverMenu = (open: boolean, action: string) => {
if (
(!open && action === 'onMouseEnter') ||
(open && action === 'onMouseLeave')
) {
setShowMenu(!open)
}
}
useEffect(() => {
if (collapsed) {
setShowMenu(false)
}
}, [collapsed])
const toggleMenu = () => {
setShowMenu(!showMenu)
}
return collapsed ? (
onHoverMenu(showMenu, 'onMouseEnter') : undefined
}
onMouseLeave={
!alignBottom ? () => onHoverMenu(showMenu, 'onMouseLeave') : undefined
}
className={`relative z-30 ${alignBottom ? '' : 'px-4 py-2'}`}
role="button"
>
toggleMenu()}
>
{icon}
{children}
) : (
setShowMenu(!showMenu)}
role="button"
className={`w-full px-4 py-2 ${
alignBottom ? 'h-[64px] hover:bg-th-bkg-2' : ''
}`}
>
{children}
)
}