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

src/components/AccordionContent.tsx

@@ -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',
+          'mb-0 flex hover:cursor-pointer items-center justify-between bg-white/10 p-4 text-white border-b border-transparent',
-          'group-[&:first-child]:border-t-0 group-[[open]]:border-b',
           '[&::marker]:hidden [&::marker]:content-[""]',
-          isOpen && 'border-b [&:first-child]:border-t-0',
+          isOpen && 'border-white/20',
         )}
       >
         <div>

src/components/Account/AccountSummary.tsx

@@ -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],
+            isOpen: accountSummaryTabs[0],
-            toggleOpen: (index: number) => toggleOpen(index),
+            toggleOpen: (index: number) => handleToggle(index),
             renderSubTitle: () => <></>,
           },
           {
@@ -120,8 +132,8 @@ export default function AccountSummary(props: Props) {
                   lendingData={lendingAssetsData}
                 />
               ) : null,
-            isOpen: isOpen[1],
+            isOpen: accountSummaryTabs[1],
-            toggleOpen: (index: number) => toggleOpen(index),
+            toggleOpen: (index: number) => handleToggle(index),
             renderSubTitle: () => <></>,
           },
         ]}

src/constants/defaultSettings.ts

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

src/constants/localStorageKeys.ts

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

src/hooks/useIsOpenArray.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react'
 
-export default function useIsOpenArray(length: number, allowMultiple: boolean) {
+export default function useIsOpenArray(length: number, allowMultiple: boolean, preset?: boolean[]) {
-  const [isOpen, setIsOpen] = useState<boolean[]>(Array.from({ length }, (_, i) => i === 0))
+  const presetArray = preset ?? Array.from({ length }, (_, i) => i === 0)
+  const [isOpen, setIsOpen] = useState<boolean[]>(presetArray)
 
   function toggleOpen(index: number) {
     setIsOpen((prev) => {

src/types/interfaces/store/settings.d.ts

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