MP-3484: remember summaryAccount tabs and auto expand both (#574)
This commit is contained in:
parent
bcd840150d
commit
29169f14f9
@ -20,14 +20,13 @@ export default function AccordionContent(props: Props) {
|
||||
const { title, renderContent, isOpen, renderSubTitle, toggleOpen } = props.item
|
||||
|
||||
return (
|
||||
<div key={title} className='group border-b-white/10 [&:not(:last-child)]:border-b'>
|
||||
<div key={title} className='border-b border-collapse group border-white/20 last:border-b-0'>
|
||||
<div
|
||||
onClick={() => toggleOpen(props.index)}
|
||||
className={classNames(
|
||||
'mb-0 flex hover:cursor-pointer items-center justify-between border-t border-white/10 bg-white/10 p-4 text-white',
|
||||
'group-[&:first-child]:border-t-0 group-[[open]]:border-b',
|
||||
'mb-0 flex hover:cursor-pointer items-center justify-between bg-white/10 p-4 text-white border-b border-transparent',
|
||||
'[&::marker]:hidden [&::marker]:content-[""]',
|
||||
isOpen && 'border-b [&:first-child]:border-t-0',
|
||||
isOpen && 'border-white/20',
|
||||
)}
|
||||
>
|
||||
<div>
|
||||
|
@ -1,5 +1,5 @@
|
||||
import classNames from 'classnames'
|
||||
import { HTMLAttributes, useMemo } from 'react'
|
||||
import { HTMLAttributes, useCallback, useMemo } from 'react'
|
||||
|
||||
import Accordion from 'components/Accordion'
|
||||
import AccountBalancesTable from 'components/Account/AccountBalancesTable'
|
||||
@ -10,12 +10,14 @@ import DisplayCurrency from 'components/DisplayCurrency'
|
||||
import { FormattedNumber } from 'components/FormattedNumber'
|
||||
import { ArrowRight } from 'components/Icons'
|
||||
import Text from 'components/Text'
|
||||
import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
|
||||
import { LocalStorageKeys } from 'constants/localStorageKeys'
|
||||
import { BN_ZERO } from 'constants/math'
|
||||
import { ORACLE_DENOM } from 'constants/oracle'
|
||||
import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
|
||||
import useHealthComputer from 'hooks/useHealthComputer'
|
||||
import useIsOpenArray from 'hooks/useIsOpenArray'
|
||||
import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'
|
||||
import useLocalStorage from 'hooks/useLocalStorage'
|
||||
import usePrices from 'hooks/usePrices'
|
||||
import useStore from 'store'
|
||||
import { BNCoin } from 'types/classes/BNCoin'
|
||||
@ -26,7 +28,10 @@ interface Props {
|
||||
}
|
||||
|
||||
export default function AccountSummary(props: Props) {
|
||||
const [isOpen, toggleOpen] = useIsOpenArray(2, true)
|
||||
const [accountSummaryTabs, setAccountSummaryTabs] = useLocalStorage<boolean[]>(
|
||||
LocalStorageKeys.ACCOUNT_SUMMARY_TABS,
|
||||
DEFAULT_SETTINGS.accountSummaryTabs,
|
||||
)
|
||||
const { data: prices } = usePrices()
|
||||
const updatedAccount = useStore((s) => s.updatedAccount)
|
||||
const accountBalance = useMemo(
|
||||
@ -59,6 +64,13 @@ export default function AccountSummary(props: Props) {
|
||||
return updatedLeverage
|
||||
}, [updatedAccount, prices, leverage])
|
||||
|
||||
const handleToggle = useCallback(
|
||||
(index: number) => {
|
||||
setAccountSummaryTabs(accountSummaryTabs.map((tab, i) => (i === index ? !tab : tab)))
|
||||
},
|
||||
[accountSummaryTabs, setAccountSummaryTabs],
|
||||
)
|
||||
|
||||
if (!props.account) return null
|
||||
return (
|
||||
<div className='h-[546px] min-w-92.5 basis-92.5 max-w-screen overflow-y-scroll scrollbar-hide'>
|
||||
@ -106,8 +118,8 @@ export default function AccountSummary(props: Props) {
|
||||
title: `Credit Account ${props.account.id} Composition`,
|
||||
renderContent: () =>
|
||||
props.account ? <AccountComposition account={props.account} /> : null,
|
||||
isOpen: isOpen[0],
|
||||
toggleOpen: (index: number) => toggleOpen(index),
|
||||
isOpen: accountSummaryTabs[0],
|
||||
toggleOpen: (index: number) => handleToggle(index),
|
||||
renderSubTitle: () => <></>,
|
||||
},
|
||||
{
|
||||
@ -120,8 +132,8 @@ export default function AccountSummary(props: Props) {
|
||||
lendingData={lendingAssetsData}
|
||||
/>
|
||||
) : null,
|
||||
isOpen: isOpen[1],
|
||||
toggleOpen: (index: number) => toggleOpen(index),
|
||||
isOpen: accountSummaryTabs[1],
|
||||
toggleOpen: (index: number) => handleToggle(index),
|
||||
renderSubTitle: () => <></>,
|
||||
},
|
||||
]}
|
||||
|
@ -2,6 +2,7 @@ import { ASSETS } from 'constants/assets'
|
||||
import { ORACLE_DENOM } from 'constants/oracle'
|
||||
|
||||
export const DEFAULT_SETTINGS: Settings = {
|
||||
accountSummaryTabs: [true, true],
|
||||
reduceMotion: false,
|
||||
lendAssets: true,
|
||||
preferredAsset: ASSETS[0].denom,
|
||||
|
@ -1,4 +1,5 @@
|
||||
export enum LocalStorageKeys {
|
||||
ACCOUNT_SUMMARY_TABS = 'accountSummaryTabs',
|
||||
PREFERRED_ASSET = 'favouriteAsset',
|
||||
DISPLAY_CURRENCY = 'displayCurrency',
|
||||
REDUCE_MOTION = 'reduceMotion',
|
||||
|
@ -1,7 +1,8 @@
|
||||
import { useState } from 'react'
|
||||
|
||||
export default function useIsOpenArray(length: number, allowMultiple: boolean) {
|
||||
const [isOpen, setIsOpen] = useState<boolean[]>(Array.from({ length }, (_, i) => i === 0))
|
||||
export default function useIsOpenArray(length: number, allowMultiple: boolean, preset?: boolean[]) {
|
||||
const presetArray = preset ?? Array.from({ length }, (_, i) => i === 0)
|
||||
const [isOpen, setIsOpen] = useState<boolean[]>(presetArray)
|
||||
|
||||
function toggleOpen(index: number) {
|
||||
setIsOpen((prev) => {
|
||||
|
1
src/types/interfaces/store/settings.d.ts
vendored
1
src/types/interfaces/store/settings.d.ts
vendored
@ -1,4 +1,5 @@
|
||||
interface Settings {
|
||||
accountSummaryTabs: boolean[]
|
||||
displayCurrency: string
|
||||
reduceMotion: boolean
|
||||
preferredAsset: string
|
||||
|
Loading…
Reference in New Issue
Block a user