show sidenav account summary on page load
This commit is contained in:
parent
65e6afc363
commit
e8d4d8e5d0
|
@ -10,10 +10,11 @@ import {
|
||||||
Cog8ToothIcon,
|
Cog8ToothIcon,
|
||||||
ArrowsRightLeftIcon,
|
ArrowsRightLeftIcon,
|
||||||
ArrowTrendingUpIcon,
|
ArrowTrendingUpIcon,
|
||||||
|
XMarkIcon,
|
||||||
} from '@heroicons/react/20/solid'
|
} from '@heroicons/react/20/solid'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import { useTranslation } from 'next-i18next'
|
import { useTranslation } from 'next-i18next'
|
||||||
import { Fragment, ReactNode, useEffect, useState } from 'react'
|
import { Fragment, ReactNode, useState } from 'react'
|
||||||
import { Disclosure, Popover, Transition } from '@headlessui/react'
|
import { Disclosure, Popover, Transition } from '@headlessui/react'
|
||||||
import MangoAccountSummary from './account/MangoAccountSummary'
|
import MangoAccountSummary from './account/MangoAccountSummary'
|
||||||
import Tooltip from './shared/Tooltip'
|
import Tooltip from './shared/Tooltip'
|
||||||
|
@ -23,6 +24,7 @@ import mangoStore from '@store/mangoStore'
|
||||||
import HealthHeart from './account/HealthHeart'
|
import HealthHeart from './account/HealthHeart'
|
||||||
import useMangoAccount from 'hooks/useMangoAccount'
|
import useMangoAccount from 'hooks/useMangoAccount'
|
||||||
import { useTheme } from 'next-themes'
|
import { useTheme } from 'next-themes'
|
||||||
|
import { IconButton } from './shared/Button'
|
||||||
|
|
||||||
const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
||||||
const { t } = useTranslation('common')
|
const { t } = useTranslation('common')
|
||||||
|
@ -152,9 +154,13 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
||||||
size={32}
|
size={32}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
isOpen
|
||||||
|
panelTitle={`${mangoAccount?.name || ''} ${t('account')}`}
|
||||||
title={
|
title={
|
||||||
<div className="w-24 text-left">
|
<div className="w-24 text-left">
|
||||||
<p className="mb-0.5 whitespace-nowrap text-xs">Health Check</p>
|
<p className="mb-0.5 whitespace-nowrap text-xs">
|
||||||
|
{t('account')}
|
||||||
|
</p>
|
||||||
<p className="truncate whitespace-nowrap text-sm font-bold text-th-fgd-1">
|
<p className="truncate whitespace-nowrap text-sm font-bold text-th-fgd-1">
|
||||||
{mangoAccount
|
{mangoAccount
|
||||||
? mangoAccount.name
|
? mangoAccount.name
|
||||||
|
@ -166,6 +172,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
|
||||||
}
|
}
|
||||||
alignBottom
|
alignBottom
|
||||||
hideIconBg
|
hideIconBg
|
||||||
|
showClose
|
||||||
>
|
>
|
||||||
<div className="px-4 py-2">
|
<div className="px-4 py-2">
|
||||||
<MangoAccountSummary />
|
<MangoAccountSummary />
|
||||||
|
@ -253,6 +260,9 @@ export const ExpandableMenuItem = ({
|
||||||
collapsed,
|
collapsed,
|
||||||
hideIconBg,
|
hideIconBg,
|
||||||
icon,
|
icon,
|
||||||
|
panelTitle,
|
||||||
|
isOpen,
|
||||||
|
showClose,
|
||||||
title,
|
title,
|
||||||
}: {
|
}: {
|
||||||
alignBottom?: boolean
|
alignBottom?: boolean
|
||||||
|
@ -260,26 +270,14 @@ export const ExpandableMenuItem = ({
|
||||||
collapsed: boolean
|
collapsed: boolean
|
||||||
hideIconBg?: boolean
|
hideIconBg?: boolean
|
||||||
icon: ReactNode
|
icon: ReactNode
|
||||||
|
panelTitle?: string
|
||||||
|
isOpen?: boolean
|
||||||
|
showClose?: boolean
|
||||||
title: string | ReactNode
|
title: string | ReactNode
|
||||||
}) => {
|
}) => {
|
||||||
const [showMenu, setShowMenu] = useState(false)
|
const [showMenu, setShowMenu] = useState(isOpen || false)
|
||||||
const { theme } = useTheme()
|
const { theme } = useTheme()
|
||||||
|
|
||||||
const onHoverMenu = (open: boolean, action: string) => {
|
|
||||||
if (
|
|
||||||
(!open && action === 'onMouseEnter') ||
|
|
||||||
(open && action === 'onMouseLeave')
|
|
||||||
) {
|
|
||||||
setShowMenu(!open)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
if (collapsed) {
|
|
||||||
setShowMenu(false)
|
|
||||||
}
|
|
||||||
}, [collapsed])
|
|
||||||
|
|
||||||
const toggleMenu = () => {
|
const toggleMenu = () => {
|
||||||
setShowMenu(!showMenu)
|
setShowMenu(!showMenu)
|
||||||
}
|
}
|
||||||
|
@ -287,12 +285,6 @@ export const ExpandableMenuItem = ({
|
||||||
return collapsed ? (
|
return collapsed ? (
|
||||||
<Popover>
|
<Popover>
|
||||||
<div
|
<div
|
||||||
onMouseEnter={
|
|
||||||
!alignBottom ? () => onHoverMenu(showMenu, 'onMouseEnter') : undefined
|
|
||||||
}
|
|
||||||
onMouseLeave={
|
|
||||||
!alignBottom ? () => onHoverMenu(showMenu, 'onMouseLeave') : undefined
|
|
||||||
}
|
|
||||||
className={`relative z-30 ${alignBottom ? '' : 'px-4 py-2'}`}
|
className={`relative z-30 ${alignBottom ? '' : 'px-4 py-2'}`}
|
||||||
role="button"
|
role="button"
|
||||||
>
|
>
|
||||||
|
@ -329,6 +321,20 @@ export const ExpandableMenuItem = ({
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<div className="rounded-md rounded-l-none bg-th-bkg-2 py-2">
|
<div className="rounded-md rounded-l-none bg-th-bkg-2 py-2">
|
||||||
|
<div className="flex items-center justify-between pl-4 pr-2">
|
||||||
|
{panelTitle ? (
|
||||||
|
<h3 className="text-sm font-bold">{panelTitle}</h3>
|
||||||
|
) : null}
|
||||||
|
{showClose ? (
|
||||||
|
<IconButton
|
||||||
|
onClick={() => setShowMenu(false)}
|
||||||
|
hideBg
|
||||||
|
size="small"
|
||||||
|
>
|
||||||
|
<XMarkIcon className="h-5 w-5" />
|
||||||
|
</IconButton>
|
||||||
|
) : null}
|
||||||
|
</div>
|
||||||
{children}
|
{children}
|
||||||
</div>
|
</div>
|
||||||
</Popover.Panel>
|
</Popover.Panel>
|
||||||
|
|
|
@ -90,8 +90,8 @@ const AccountOnboardingTour = () => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
selector: '#account-step-eleven',
|
selector: '#account-step-eleven',
|
||||||
title: t('health-check'),
|
title: t('account-summary'),
|
||||||
description: t('health-check-desc'),
|
description: t('account-summary-desc'),
|
||||||
orientationPreferences: [CardinalOrientation.EASTSOUTH],
|
orientationPreferences: [CardinalOrientation.EASTSOUTH],
|
||||||
movingTarget: true,
|
movingTarget: true,
|
||||||
},
|
},
|
||||||
|
|
|
@ -7,8 +7,8 @@
|
||||||
"free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
|
"free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
|
||||||
"health": "Health",
|
"health": "Health",
|
||||||
"health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
|
"health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
|
||||||
"health-check": "Health Check",
|
"account-summary": "Account Summary",
|
||||||
"health-check-desc": "Check the health of your account from any screen in the app. A green heart represents good health, orange okay and red poor.",
|
"account-summary-desc": "Check your key account information from any screen in the app.",
|
||||||
"health-impact": "Health Impact",
|
"health-impact": "Health Impact",
|
||||||
"health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
|
"health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
|
||||||
"interest-earned": "Interest Earned",
|
"interest-earned": "Interest Earned",
|
||||||
|
|
|
@ -7,8 +7,8 @@
|
||||||
"free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
|
"free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
|
||||||
"health": "Health",
|
"health": "Health",
|
||||||
"health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
|
"health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
|
||||||
"health-check": "Health Check",
|
"account-summary": "Account Summary",
|
||||||
"health-check-desc": "Check the health of your account from any screen in the app. A green heart represents good health, orange okay and red poor.",
|
"account-summary-desc": "Check your key account information from any screen in the app.",
|
||||||
"health-impact": "Health Impact",
|
"health-impact": "Health Impact",
|
||||||
"health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
|
"health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
|
||||||
"interest-earned": "Interest Earned",
|
"interest-earned": "Interest Earned",
|
||||||
|
|
|
@ -7,8 +7,8 @@
|
||||||
"free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
|
"free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
|
||||||
"health": "Health",
|
"health": "Health",
|
||||||
"health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
|
"health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
|
||||||
"health-check": "Health Check",
|
"account-summary": "Account Summary",
|
||||||
"health-check-desc": "Check the health of your account from any screen in the app. A green heart represents good health, orange okay and red poor.",
|
"account-summary-desc": "Check your key account information from any screen in the app.",
|
||||||
"health-impact": "Health Impact",
|
"health-impact": "Health Impact",
|
||||||
"health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
|
"health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
|
||||||
"interest-earned": "Interest Earned",
|
"interest-earned": "Interest Earned",
|
||||||
|
|
|
@ -7,8 +7,8 @@
|
||||||
"free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
|
"free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
|
||||||
"health": "Health",
|
"health": "Health",
|
||||||
"health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
|
"health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
|
||||||
"health-check": "Health Check",
|
"account-summary": "Account Summary",
|
||||||
"health-check-desc": "Check the health of your account from any screen in the app. A green heart represents good health, orange okay and red poor.",
|
"account-summary-desc": "Check your key account information from any screen in the app.",
|
||||||
"health-impact": "Health Impact",
|
"health-impact": "Health Impact",
|
||||||
"health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
|
"health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
|
||||||
"interest-earned": "Interest Earned",
|
"interest-earned": "Interest Earned",
|
||||||
|
|
|
@ -7,8 +7,8 @@
|
||||||
"free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
|
"free-collateral-desc": "The amount of capital you have to trade or borrow against. When your free collateral reaches $0 you won't be able to make withdrawals.",
|
||||||
"health": "Health",
|
"health": "Health",
|
||||||
"health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
|
"health-desc": "If your account health reaches 0% your account will be liquidated. You can increase the health of your account by making a deposit.",
|
||||||
"health-check": "Health Check",
|
"account-summary": "Account Summary",
|
||||||
"health-check-desc": "Check the health of your account from any screen in the app. A green heart represents good health, orange okay and red poor.",
|
"account-summary-desc": "Check your key account information from any screen in the app.",
|
||||||
"health-impact": "Health Impact",
|
"health-impact": "Health Impact",
|
||||||
"health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
|
"health-impact-desc": "Projects the health of your account before you make a swap. The first value is your current account health and the second, your projected account health.",
|
||||||
"interest-earned": "Interest Earned",
|
"interest-earned": "Interest Earned",
|
||||||
|
|
Loading…
Reference in New Issue