fix: update account health on modal close (#776)

src/components/account/AccountBalancesTable/useAccountBalanceData.tsx

@@ -24,7 +24,6 @@ export default function useAccountBalanceData(props: Props) {
     const accountDeposits = usedAccount?.deposits ?? []
     const accountLends = usedAccount?.lends ?? []
     const accountDebts = usedAccount?.debts ?? []
-    const accountVaults = usedAccount?.vaults ?? []
 
     const deposits: AccountBalanceRow[] = []
     accountDeposits.forEach((deposit) => {

src/components/account/AccountSummary/index.tsx

@@ -27,10 +27,11 @@ interface Props {
 }
 
 export default function AccountSummary(props: Props) {
-  const storageKey = props.isAccountDetails
+  const { account, isAccountDetails, isHls } = props
+  const storageKey = isAccountDetails
     ? LocalStorageKeys.ACCOUNT_DETAILS_TABS
     : LocalStorageKeys.ACCOUNT_SUMMARY_TABS
-  const defaultSetting = props.isAccountDetails
+  const defaultSetting = isAccountDetails
     ? DEFAULT_SETTINGS.accountDetailsTabs
     : DEFAULT_SETTINGS.accountSummaryTabs
   const [accountSummaryTabs, setAccountSummaryTabs] = useLocalStorage<boolean[]>(
@@ -50,12 +51,13 @@ export default function AccountSummary(props: Props) {
     () => [...lendingAvailableAssets, ...accountLentAssets],
     [lendingAvailableAssets, accountLentAssets],
   )
-  const { health, healthFactor } = useHealthComputer(props.account)
+  const { health, healthFactor } = useHealthComputer(account)
-  const { health: updatedHealth, healthFactor: updatedHealthFactor } =
+  const { health: updatedHealth, healthFactor: updatedHealthFactor } = useHealthComputer(
-    useHealthComputer(updatedAccount)
+    updatedAccount || account,
+  )
   const leverage = useMemo(
-    () => (props.account ? calculateAccountLeverage(props.account, prices, assets) : BN_ZERO),
+    () => (account ? calculateAccountLeverage(account, prices, assets) : BN_ZERO),
-    [props.account, prices, assets],
+    [account, prices, assets],
   )
   const updatedLeverage = useMemo(() => {
     if (!updatedAccount) return null
@@ -75,7 +77,7 @@ export default function AccountSummary(props: Props) {
   const apr = useMemo(
     () =>
       calculateAccountApr(
-        updatedAccount ?? props.account,
+        updatedAccount ?? account,
         borrowAssetsData,
         lendingAssetsData,
         prices,
@@ -101,7 +103,7 @@ export default function AccountSummary(props: Props) {
       {
         title: `Composition`,
         renderContent: () =>
-          props.account ? <AccountComposition account={props.account} isHls={props.isHls} /> : null,
+          account ? <AccountComposition account={account} isHls={isHls} /> : null,
         isOpen: accountSummaryTabs[0],
         toggleOpen: (index: number) => handleToggle(index),
         renderSubTitle: () => <></>,
@@ -109,13 +111,13 @@ export default function AccountSummary(props: Props) {
       {
         title: 'Balances',
         renderContent: () =>
-          props.account ? (
+          account ? (
             <AccountBalancesTable
-              account={props.account}
+              account={account}
               borrowingData={borrowAssetsData}
               lendingData={lendingAssetsData}
               hideCard
-              isHls={props.isHls}
+              isHls={isHls}
             />
           ) : null,
         isOpen: accountSummaryTabs[1],
@@ -124,41 +126,34 @@ export default function AccountSummary(props: Props) {
       },
     ]
 
-    if (props.account.vaults.length > 0)
+    if (account.vaults.length > 0)
       itemsArray.push({
         title: 'Strategies',
         renderContent: () =>
-          props.account ? <AccountStrategiesTable account={props.account} hideCard /> : null,
+          account ? <AccountStrategiesTable account={account} hideCard /> : null,
         isOpen: accountSummaryTabs[2] ?? false,
         toggleOpen: (index: number) => handleToggle(index),
         renderSubTitle: () => <></>,
       })
 
-    if (props.account.perps.length > 0)
+    if (account.perps.length > 0)
       itemsArray.push({
         title: 'Perp Positions',
         renderContent: () =>
-          props.account ? <AccountPerpPositionTable account={props.account} hideCard /> : null,
+          account ? <AccountPerpPositionTable account={account} hideCard /> : null,
-        isOpen: accountSummaryTabs[props.account.vaults.length > 0 ? 3 : 2] ?? false,
+        isOpen: accountSummaryTabs[account.vaults.length > 0 ? 3 : 2] ?? false,
         toggleOpen: (index: number) => handleToggle(index),
         renderSubTitle: () => <></>,
       })
 
     return itemsArray
-  }, [
+  }, [account, borrowAssetsData, lendingAssetsData, isHls, handleToggle, accountSummaryTabs])
-    props.account,
-    borrowAssetsData,
-    lendingAssetsData,
-    props.isHls,
-    handleToggle,
-    accountSummaryTabs,
-  ])
 
-  if (!props.account) return null
+  if (!account) return null
   return (
     <>
       <AccountSummaryHeader
-        account={props.account}
+        account={account}
         updatedAccount={updatedAccount}
         prices={prices}
         assets={assets}
@@ -169,7 +164,7 @@ export default function AccountSummary(props: Props) {
         updatedHealth={updatedHealth}
         healthFactor={healthFactor}
         updatedHealthFactor={updatedHealthFactor}
-        isAccountDetails={props.isAccountDetails}
+        isAccountDetails={isAccountDetails}
       />
       <Accordion items={items} allowMultipleOpen />
     </>