fixed refetchgin of account data (#747)

Co-authored-by: Linkie Link <linkielink.dev@gmail.com>

src/components/Modals/BorrowModal.tsx

@@ -9,15 +9,15 @@ import DisplayCurrency from 'components/common/DisplayCurrency'
 import Divider from 'components/common/Divider'
 import { FormattedNumber } from 'components/common/FormattedNumber'
 import { ArrowRight, InfoCircle } from 'components/common/Icons'
-import Modal from 'components/Modals/Modal'
 import Switch from 'components/common/Switch'
 import Text from 'components/common/Text'
 import TitleAndSubCell from 'components/common/TitleAndSubCell'
 import TokenInputWithSlider from 'components/common/TokenInput/TokenInputWithSlider'
+import Modal from 'components/Modals/Modal'
 import { BN_ZERO } from 'constants/math'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useMarketAssets from 'hooks/markets/useMarketAssets'
 import useAutoLend from 'hooks/useAutoLend'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 import useHealthComputer from 'hooks/useHealthComputer'
 import useToggle from 'hooks/useToggle'
 import { useUpdatedAccount } from 'hooks/useUpdatedAccount'

src/components/Modals/LendAndReclaim/index.tsx

@@ -2,7 +2,7 @@ import { useCallback } from 'react'
 
 import AssetAmountSelectActionModal from 'components/Modals/AssetAmountSelectActionModal'
 import DetailsHeader from 'components/Modals/LendAndReclaim/DetailsHeader'
-import useCurrentAccount from 'hooks/useCurrentAccount'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useLendAndReclaimModal from 'hooks/useLendAndReclaimModal'
 import { useUpdatedAccount } from 'hooks/useUpdatedAccount'
 import useStore from 'store'

src/components/Modals/Vault/index.tsx

@@ -3,13 +3,13 @@ import { useCallback, useMemo } from 'react'
 
 import DoubleLogo from 'components/common/DoubleLogo'
 import { InfoCircle } from 'components/common/Icons'
+import Text from 'components/common/Text'
+import { Tooltip } from 'components/common/Tooltip'
 import Modal from 'components/Modals/Modal'
 import VaultModalContent from 'components/Modals/Vault/VaultModalContent'
 import VaultModalContentHeader from 'components/Modals/Vault/VaultModalContentHeader'
-import Text from 'components/common/Text'
-import { Tooltip } from 'components/common/Tooltip'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useAsset from 'hooks/assets/useAsset'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 import useStore from 'store'
 
 export default function VaultModalController() {

src/components/account/AccountBalancesTable/index.tsx

@@ -8,7 +8,7 @@ import ActionButton from 'components/common/Button/ActionButton'
 import Card from 'components/common/Card'
 import Table from 'components/common/Table'
 import ConditionalWrapper from 'hocs/ConditionalWrapper'
-import useCurrentAccount from 'hooks/useCurrentAccount'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useStore from 'store'
 import { getPage, getRoute } from 'utils/route'
 

src/components/account/AccountComposition.tsx

@@ -42,7 +42,7 @@ export default function AccountComposition(props: Props) {
   const { data: prices } = usePrices()
   const { data: hlsStrategies } = useHLSStakingAssets()
   const assets = useAllAssets()
-  const { data } = useBorrowMarketAssetsTableData(false)
+  const data = useBorrowMarketAssetsTableData()
   const borrowAssetsData = useMemo(() => data?.allAssets || [], [data])
   const { availableAssets: lendingAvailableAssets, accountLentAssets } =
     useLendingMarketAssetsTableData()

src/components/account/AccountDetails/index.tsx

@@ -20,6 +20,7 @@ import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { ORACLE_DENOM } from 'constants/oracle'
 import useAccountIds from 'hooks/accounts/useAccountIds'
 import useAccounts from 'hooks/accounts/useAccounts'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useLocalStorage from 'hooks/localStorage/useLocalStorage'
 import useAccountId from 'hooks/useAccountId'
@@ -92,7 +93,7 @@ function AccountDetails(props: Props) {
     return updatedLeverage
   }, [updatedAccount, prices, leverage, assets])
 
-  const { data } = useBorrowMarketAssetsTableData(false)
+  const data = useBorrowMarketAssetsTableData()
   const borrowAssetsData = useMemo(() => data?.allAssets || [], [data])
 
   const { availableAssets: lendingAvailableAssets, accountLentAssets } =

src/components/account/AccountFund/AccountFundFullPage.tsx

@@ -5,8 +5,8 @@ import Card from 'components/common/Card'
 import { CircularProgress } from 'components/common/CircularProgress'
 import FullOverlayContent from 'components/common/FullOverlayContent'
 import useAccounts from 'hooks/accounts/useAccounts'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useAccountId from 'hooks/useAccountId'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 import useStore from 'store'
 
 export default function AccountFundFullPage() {

src/components/account/AccountList/AccountStats.tsx

@@ -33,7 +33,7 @@ export default function AccountStats(props: Props) {
     [account, assets, prices],
   )
   const { health, healthFactor } = useHealthComputer(account)
-  const { data } = useBorrowMarketAssetsTableData(false)
+  const data = useBorrowMarketAssetsTableData()
   const borrowAssetsData = useMemo(() => data?.allAssets || [], [data])
   const { availableAssets: lendingAvailableAssets, accountLentAssets } =
     useLendingMarketAssetsTableData()

src/components/account/AccountSummary.tsx

@@ -45,7 +45,7 @@ export default function AccountSummary(props: Props) {
         : BN_ZERO,
     [props.account, updatedAccount, prices, assets],
   )
-  const { data } = useBorrowMarketAssetsTableData(false)
+  const data = useBorrowMarketAssetsTableData()
   const borrowAssetsData = useMemo(() => data?.allAssets || [], [data])
   const { availableAssets: lendingAvailableAssets, accountLentAssets } =
     useLendingMarketAssetsTableData()

src/components/account/CurrentAccountSummary.tsx

@@ -1,5 +1,5 @@
 import AccountSummary from 'components/account/AccountSummary'
-import useCurrentAccount from 'hooks/useCurrentAccount'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 
 function CurrentAccountSummary() {
   const account = useCurrentAccount()

src/components/borrow/Borrowings.tsx

@@ -5,7 +5,7 @@ import useBorrowEnabledAssets from 'hooks/assets/useBorrowEnabledAssets'
 import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
 
 export default function Borrowings() {
-  const { data } = useBorrowMarketAssetsTableData()
+  const data = useBorrowMarketAssetsTableData()
 
   if (!data?.allAssets?.length) {
     return <Fallback />

src/components/perps/BalancesTable/Columns/Manage.tsx

@@ -3,7 +3,8 @@ import { useSearchParams } from 'react-router-dom'
 
 import DropDownButton from 'components/common/Button/DropDownButton'
 import { Cross, Edit } from 'components/common/Icons'
-import useCurrentAccount from 'hooks/useCurrentAccount'
+import { PerpPositionRow } from 'components/perps/BalancesTable/usePerpsBalancesData'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useStore from 'store'
 import { SearchParams } from 'types/enums/searchParams'
 import { getSearchParamsObject } from 'utils/route'

src/components/perps/BalancesTable/usePerpsBalancesData.ts

@@ -1,9 +1,9 @@
 import { useMemo } from 'react'
 
 import { BN_ZERO } from 'constants/math'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import usePerpsEnabledAssets from 'hooks/assets/usePerpsEnabledAssets'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 import usePrices from 'hooks/usePrices'
 import { getAccountNetValue } from 'utils/accounts'
 import { byDenom } from 'utils/array'

src/components/perps/Module/PerpsManageModule/usePerpsManageModule.ts

@@ -2,10 +2,10 @@ import { useCallback, useMemo } from 'react'
 import { useSearchParams } from 'react-router-dom'
 
 import { BN_ZERO } from 'constants/math'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import usePerpPosition from 'hooks/perps/usePerpPosition'
 import usePerpsAsset from 'hooks/perps/usePerpsAsset'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 import usePrice from 'hooks/usePrice'
 import usePrices from 'hooks/usePrices'
 import { SearchParams } from 'types/enums/searchParams'

src/components/perps/Module/Summary.tsx

@@ -4,11 +4,11 @@ import { useCallback, useMemo } from 'react'
 import AssetAmount from 'components/common/assets/AssetAmount'
 import ActionButton from 'components/common/Button/ActionButton'
 import { ArrowRight } from 'components/common/Icons'
-import TradeDirection from 'components/perps/BalancesTable/Columns/TradeDirection'
-import OpeningFee from 'components/perps/Module/OpeningFee'
 import SummaryLine from 'components/common/SummaryLine'
 import Text from 'components/common/Text'
-import useCurrentAccount from 'hooks/useCurrentAccount'
+import TradeDirection from 'components/perps/BalancesTable/Columns/TradeDirection'
+import OpeningFee from 'components/perps/Module/OpeningFee'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useStore from 'store'
 import { BNCoin } from 'types/classes/BNCoin'
 import { formatLeverage } from 'utils/formatters'

src/components/portfolio/Account/Balances.tsx

@@ -15,7 +15,7 @@ interface Props {
 function Content(props: Props) {
   const { data: account } = useAccount(props.accountId, true)
 
-  const { data } = useBorrowMarketAssetsTableData(false)
+  const data = useBorrowMarketAssetsTableData()
   const borrowAssets = useMemo(() => data?.allAssets || [], [data])
   const { allAssets: lendingAssets } = useLendingMarketAssetsTableData()
 

src/components/portfolio/Account/Summary.tsx

@@ -22,7 +22,7 @@ function Content(props: Props) {
   const { data: account } = useAccount(props.accountId, true)
   const { data: prices } = usePrices()
   const { health, healthFactor } = useHealthComputer(account)
-  const { data } = useBorrowMarketAssetsTableData(false)
+  const data = useBorrowMarketAssetsTableData()
   const borrowAssets = useMemo(() => data?.allAssets || [], [data])
   const { allAssets: lendingAssets } = useLendingMarketAssetsTableData()
   const { data: hlsStrategies } = useHLSStakingAssets()

src/components/portfolio/Card/index.tsx

@@ -35,7 +35,7 @@ export default function PortfolioCard(props: Props) {
   const { data: prices } = usePrices()
   const currentAccountId = useAccountId()
   const { allAssets: lendingAssets } = useLendingMarketAssetsTableData()
-  const { data } = useBorrowMarketAssetsTableData(false)
+  const data = useBorrowMarketAssetsTableData()
   const { data: hlsStrategies } = useHLSStakingAssets()
   const [searchParams] = useSearchParams()
   const assets = useAllAssets()

src/components/portfolio/Overview/Summary.tsx

@@ -19,7 +19,7 @@ export default function PortfolioSummary() {
   const { address: urlAddress } = useParams()
   const walletAddress = useStore((s) => s.address)
   const { data: prices } = usePrices()
-  const { data } = useBorrowMarketAssetsTableData(false)
+  const data = useBorrowMarketAssetsTableData()
   const borrowAssets = useMemo(() => data?.allAssets || [], [data])
   const { allAssets: lendingAssets } = useLendingMarketAssetsTableData()
   const { data: accounts } = useAccounts('default', urlAddress || walletAddress)

src/components/trade/AccountDetailsCard.tsx

@@ -1,13 +1,13 @@
 import { useMemo } from 'react'
 
 import AccountBalancesTable from 'components/account/AccountBalancesTable'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useBorrowMarketAssetsTableData from 'hooks/useBorrowMarketAssetsTableData'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 import useLendingMarketAssetsTableData from 'hooks/useLendingMarketAssetsTableData'
 
 export default function AccountDetailsCard() {
   const account = useCurrentAccount()
-  const { data } = useBorrowMarketAssetsTableData(false)
+  const data = useBorrowMarketAssetsTableData()
   const borrowAssetsData = useMemo(() => data?.allAssets || [], [data])
   const { availableAssets: lendingAvailableAssets, accountLentAssets } =
     useLendingMarketAssetsTableData()

src/components/trade/TradeModule/AssetSelector/AssetList.tsx

@@ -4,10 +4,10 @@ import { useMemo } from 'react'
 import { ChevronDown } from 'components/common/Icons'
 import Text from 'components/common/Text'
 import AssetSelectorItem from 'components/trade/TradeModule/AssetSelector/AssetSelectorItem'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
 import useMarketAssets from 'hooks/markets/useMarketAssets'
 import useMarketDeposits from 'hooks/markets/useMarketDeposits'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 import usePrices from 'hooks/usePrices'
 import useStore from 'store'
 import { getMergedBalancesForAsset } from 'utils/accounts'

src/components/trade/TradeModule/AssetSelector/PairsList.tsx

@@ -2,11 +2,11 @@ import { useMemo } from 'react'
 
 import Text from 'components/common/Text'
 import AssetSelectorItem from 'components/trade/TradeModule/AssetSelector/AssetSelectorItem'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useBaseAsset from 'hooks/assets/useBasetAsset'
 import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
 import useMarketAssets from 'hooks/markets/useMarketAssets'
 import useMarketDeposits from 'hooks/markets/useMarketDeposits'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 import usePrices from 'hooks/usePrices'
 import { getMergedBalancesForAsset } from 'utils/accounts'
 import { byDenom } from 'utils/array'

src/components/trade/TradeModule/SwapForm/index.tsx

@@ -19,13 +19,13 @@ import TradeSummary from 'components/trade/TradeModule/SwapForm/TradeSummary'
 import { DEFAULT_SETTINGS } from 'constants/defaultSettings'
 import { LocalStorageKeys } from 'constants/localStorageKeys'
 import { BN_ZERO } from 'constants/math'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useMarketEnabledAssets from 'hooks/assets/useMarketEnabledAssets'
 import useLocalStorage from 'hooks/localStorage/useLocalStorage'
 import useMarketAssets from 'hooks/markets/useMarketAssets'
 import useMarketBorrowings from 'hooks/markets/useMarketBorrowings'
 import useAutoLend from 'hooks/useAutoLend'
 import useChainConfig from 'hooks/useChainConfig'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 import useHealthComputer from 'hooks/useHealthComputer'
 import useSwapRoute from 'hooks/useSwapRoute'
 import useToggle from 'hooks/useToggle'

src/hooks/accounts/useCurrentAccount.tsx

@@ -0,0 +1,11 @@
+import { useMemo } from 'react'
+
+import useAccount from 'hooks/accounts/useAccount'
+import useAccountId from 'hooks/useAccountId'
+
+export default function useCurrentAccount(): Account | undefined {
+  const accountId = useAccountId()
+  const { data: account } = useAccount(accountId || undefined)
+
+  return useMemo(() => account, [account])
+}

src/hooks/perps/usePerpPosition.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react'
 
-import useCurrentAccount from 'hooks/useCurrentAccount'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import { byDenom } from 'utils/array'
 
 export default function usePerpPosition(denom: string): PerpsPosition | undefined {

src/hooks/useAutoLend.ts

@@ -1,6 +1,6 @@
 import useAccounts from 'hooks/accounts/useAccounts'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useAutoLendEnabledAccountIds from 'hooks/localStorage/useAutoLendEnabledAccountIds'
-import useCurrentAccount from 'hooks/useCurrentAccount'
 
 export default function useAutoLend(): {
   autoLendEnabledAccountIds: string[]

src/hooks/useBorrowEnabledMarkets.ts

@@ -1,6 +1,8 @@
+import { useMemo } from 'react'
+
 import useMarketAssets from 'hooks/markets/useMarketAssets'
 
 export default function useBorrowEnabledMarkets() {
   const { data: markets } = useMarketAssets()
-  return markets.filter((market) => market.borrowEnabled)
+  return useMemo(() => markets.filter((market) => market.borrowEnabled), [markets])
 }

src/hooks/useBorrowMarketAssetsTableData.ts

@@ -1,61 +1,55 @@
-import useSWR from 'swr'
+import { useMemo } from 'react'
 
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 import useAllAssets from 'hooks/assets/useAllAssets'
 import useMarketBorrowings from 'hooks/markets/useMarketBorrowings'
 import useMarketDeposits from 'hooks/markets/useMarketDeposits'
 import useMarketLiquidities from 'hooks/markets/useMarketLiquidities'
 import useBorrowEnabledMarkets from 'hooks/useBorrowEnabledMarkets'
-import useCurrentAccountDebts from 'hooks/useCurrentAccountDebts'
 import { byDenom } from 'utils/array'
 import { BN } from 'utils/helpers'
 
-export default function useBorrowMarketAssetsTableData(suspense = true) {
+export default function useBorrowMarketAssetsTableData() {
   const markets = useBorrowEnabledMarkets()
-  const accountDebts = useCurrentAccountDebts()
+  const account = useCurrentAccount()
   const { data: borrowData } = useMarketBorrowings()
   const { data: marketDeposits } = useMarketDeposits()
   const { data: marketLiquidities } = useMarketLiquidities()
   const assets = useAllAssets()
 
-  return useSWR(
-    'borrowMarketAssetsTableData',
-    async (): Promise<{
-      accountBorrowedAssets: BorrowMarketTableData[]
-      availableAssets: BorrowMarketTableData[]
-      allAssets: BorrowMarketTableData[]
-    }> => {
-      const accountBorrowedAssets: BorrowMarketTableData[] = [],
-        availableAssets: BorrowMarketTableData[] = []
+  return useMemo((): {
+    accountBorrowedAssets: BorrowMarketTableData[]
+    availableAssets: BorrowMarketTableData[]
+    allAssets: BorrowMarketTableData[]
+  } => {
+    const accountBorrowedAssets: BorrowMarketTableData[] = [],
+      availableAssets: BorrowMarketTableData[] = []
 
-      markets.forEach(({ denom, apy, ltv }) => {
-        const asset = assets.find(byDenom(denom)) as Asset
-        const borrow = borrowData.find((borrow) => borrow.denom === denom)
-        const marketDepositAmount = BN(marketDeposits.find(byDenom(denom))?.amount ?? 0)
-        const marketLiquidityAmount = BN(marketLiquidities.find(byDenom(denom))?.amount ?? 0)
+    markets.forEach(({ denom, apy, ltv }) => {
+      const asset = assets.find(byDenom(denom)) as Asset
+      const borrow = borrowData.find((borrow) => borrow.denom === denom)
+      const marketDepositAmount = BN(marketDeposits.find(byDenom(denom))?.amount ?? 0)
+      const marketLiquidityAmount = BN(marketLiquidities.find(byDenom(denom))?.amount ?? 0)
 
-        const debt = accountDebts?.find((debt) => debt.denom === denom)
-        if (!borrow) return
+      const debt = account?.debts?.find((debt) => debt.denom === denom)
+      if (!borrow) return
 
-        const borrowMarketAsset: BorrowMarketTableData = {
-          ...borrow,
-          asset,
-          debt: debt?.amount,
-          marketDepositAmount,
-          marketLiquidityAmount,
-          apy,
-          ltv,
-        }
-        ;(borrowMarketAsset.debt ? accountBorrowedAssets : availableAssets).push(borrowMarketAsset)
-      })
-
-      return {
-        accountBorrowedAssets,
-        availableAssets,
-        allAssets: [...accountBorrowedAssets, ...availableAssets],
+      const borrowMarketAsset: BorrowMarketTableData = {
+        ...borrow,
+        asset,
+        debt: debt?.amount,
+        marketDepositAmount,
+        marketLiquidityAmount,
+        apy,
+        ltv,
       }
-    },
-    {
-      suspense,
-    },
-  )
+      ;(borrowMarketAsset.debt ? accountBorrowedAssets : availableAssets).push(borrowMarketAsset)
+    })
+
+    return {
+      accountBorrowedAssets,
+      availableAssets,
+      allAssets: [...accountBorrowedAssets, ...availableAssets],
+    }
+  }, [account?.debts, assets, borrowData, marketDeposits, marketLiquidities, markets])
 }

src/hooks/useCurrentAccount.tsx

@@ -1,11 +0,0 @@
-import { useMemo } from 'react'
-
-import useAccounts from 'hooks/accounts/useAccounts'
-import useAccountId from 'hooks/useAccountId'
-
-export default function useCurrentAccount(): Account | undefined {
-  const accountId = useAccountId()
-  const { data: accounts } = useAccounts('default', undefined, false)
-
-  return useMemo(() => accounts?.find((account) => account.id === accountId), [accountId, accounts])
-}

src/hooks/useCurrentAccountDebts.ts

@@ -1,6 +0,0 @@
-import useCurrentAccount from 'hooks/useCurrentAccount'
-
-export default function useCurrentAccountDebts() {
-  const account = useCurrentAccount()
-  return account?.debts ?? []
-}

src/hooks/useCurrentAccountDeposits.ts

@@ -1,4 +1,4 @@
-import useCurrentAccount from 'hooks/useCurrentAccount'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 
 export default function useCurrentAccountDeposits() {
   const account = useCurrentAccount()

src/hooks/useCurrentAccountLends.ts

@@ -1,4 +1,4 @@
-import useCurrentAccount from 'hooks/useCurrentAccount'
+import useCurrentAccount from 'hooks/accounts/useCurrentAccount'
 
 export default function useCurrentAccountLends() {
   const account = useCurrentAccount()