MP-3484: remember summaryAccount tabs and auto expand both (#574)

This commit is contained in:
Linkie Link 2023-10-23 15:04:33 +02:00 committed by GitHub
parent bcd840150d
commit 29169f14f9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 28 additions and 13 deletions

View File

@ -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>

View File

@ -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: () => <></>,
},
]}

View File

@ -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,

View File

@ -1,4 +1,5 @@
export enum LocalStorageKeys {
ACCOUNT_SUMMARY_TABS = 'accountSummaryTabs',
PREFERRED_ASSET = 'favouriteAsset',
DISPLAY_CURRENCY = 'displayCurrency',
REDUCE_MOTION = 'reduceMotion',

View File

@ -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) => {

View File

@ -1,4 +1,5 @@
interface Settings {
accountSummaryTabs: boolean[]
displayCurrency: string
reduceMotion: boolean
preferredAsset: string