refactor: user loan details for mint markets from Zustand store to TanStack query

apps/main/src/llamalend/queries/loan-exists.ts

@@ -7,6 +7,7 @@ export const {
   useQuery: useLoanExists,
   refetchQuery: refetchLoanExists,
   getQueryData: getLoanExists,
+  invalidate: invalidateLoanExists,
 } = queryFactory({
   queryKey: (params: UserMarketParams) => [...rootKeys.userMarket(params), 'loan-exists'] as const,
   queryFn: async ({ marketId, userAddress }: UserMarketQuery) => {

apps/main/src/loan/components/ChartOhlcWrapper/index.tsx

@@ -1,7 +1,8 @@
 import { useCallback, useEffect, useMemo, useState } from 'react'
 import { styled } from 'styled-components'
+import { useAccount } from 'wagmi'
 import PoolActivity from '@/loan/components/ChartOhlcWrapper/PoolActivity'
-import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
+import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
 import useStore from '@/loan/store/useStore'
 import AlertBox from '@ui/AlertBox'
 import Box from '@ui/Box'
@@ -26,7 +27,11 @@ const ChartOhlcWrapper = ({ rChainId, llamma, llammaId, betaBackgroundColor }: C
   const collateralDecreaseActiveKey = useStore((state) => state.loanCollateralDecrease.activeKey)
   const formValues = useStore((state) => state.loanCreate.formValues)
   const activeKeyLiqRange = useStore((state) => state.loanCreate.activeKeyLiqRange)
-  const userPrices = useUserLoanDetails(llammaId)?.userPrices ?? null
+
+  const { address: userAddress } = useAccount()
+  const { data: userLoanDetails } = useUserLoanDetails({ chainId: rChainId, marketId: llammaId, userAddress })
+  const { userPrices } = userLoanDetails ?? {}
+
   const liqRangesMapper = useStore((state) => state.loanCreate.liqRangesMapper[activeKeyLiqRange])
   const increaseLoanPrices = useStore((state) => state.loanIncrease.detailInfo[increaseActiveKey]?.prices ?? null)
   const decreaseLoanPrices = useStore((state) => state.loanDecrease.detailInfo[decreaseActiveKey]?.prices ?? null)

apps/main/src/loan/components/ChartUserBands.tsx

@@ -1,10 +1,12 @@
 import { ReactNode, useEffect, useMemo, useState } from 'react'
+import { useAccount } from 'wagmi'
 import ChartBandBalances from '@/loan/components/ChartBandBalances'
 import type { BrushStartEndIndex } from '@/loan/components/ChartBandBalances/types'
-import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
+import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
 import useStore from '@/loan/store/useStore'
 import { Llamma } from '@/loan/types/loan.types'
 import { t } from '@ui-kit/lib/i18n'
+import { Chain } from '@ui-kit/utils'
 
 const DEFAULT_BAND_CHART_DATA = {
   collateral: '0',
@@ -30,7 +32,14 @@ const ChartUserBands = ({
   selectorMenu?: ReactNode
 }) => {
   const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
-  const { userBandsBalances, userLiquidationBand } = useUserLoanDetails(llammaId) ?? {}
+
+  const { address: userAddress } = useAccount()
+  const { data: userLoanDetails } = useUserLoanDetails({
+    chainId: Chain.Ethereum, // mint markets are only available on mainnet
+    marketId: llammaId,
+    userAddress,
+  })
+  const { userBandsBalances, userLiquidationBand } = userLoanDetails ?? {}
 
   const [brushIndex, setBrushIndex] = useState<BrushStartEndIndex>({
     startIndex: undefined,

apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoLeverage.tsx

@@ -1,4 +1,5 @@
 import { styled } from 'styled-components'
+import { useAccount } from 'wagmi'
 import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
 import DetailInfoEstGas from '@/loan/components/DetailInfoEstimateGas'
 import DetailInfoHealth from '@/loan/components/DetailInfoHealth'
@@ -8,7 +9,7 @@ import DetailInfoSlippageTolerance from '@/loan/components/DetailInfoSlippageTol
 import DetailInfoTradeRoutes from '@/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoTradeRoutes'
 import type { FormDetailInfo, FormDetailInfoSharedProps } from '@/loan/components/PageLoanCreate/types'
 import { DEFAULT_DETAIL_INFO_LEVERAGE } from '@/loan/components/PageLoanCreate/utils'
-import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
+import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
 import useStore from '@/loan/store/useStore'
 import { getTokenName } from '@/loan/utils/utilsLoan'
 import DetailInfo from '@ui/DetailInfo'
@@ -42,7 +43,13 @@ const DetailInfoLeverage = ({
   const isEditLiqRange = useStore((state) => state.loanCreate.isEditLiqRange)
   const liqRanges = useStore((state) => state.loanCreate.liqRanges[activeKeyLiqRange])
   const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
-  const userLoanDetails = useUserLoanDetails(llammaId)
+
+  const { address: userAddress } = useAccount()
+  const { data: userLoanDetails } = useUserLoanDetails({
+    chainId,
+    marketId: llammaId,
+    userAddress,
+  })
 
   const maxSlippage = useUserProfileStore((state) => state.maxSlippage.crypto)
 

apps/main/src/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoNonLeverage.tsx

@@ -1,11 +1,12 @@
+import { useAccount } from 'wagmi'
 import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
 import DetailInfoEstGas from '@/loan/components/DetailInfoEstimateGas'
 import DetailInfoHealth from '@/loan/components/DetailInfoHealth'
 import DetailInfoLiqRange from '@/loan/components/DetailInfoLiqRange'
 import DetailInfoN from '@/loan/components/DetailInfoN'
 import type { FormDetailInfo, FormDetailInfoSharedProps } from '@/loan/components/PageLoanCreate/types'
 import { DEFAULT_DETAIL_INFO } from '@/loan/components/PageLoanManage/utils'
-import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
+import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
 import useStore from '@/loan/store/useStore'
 import { LiquidationRangeSlider } from '@ui-kit/shared/ui/LiquidationRangeSlider'
 
@@ -34,7 +35,13 @@ const DetailInfoNonLeverage = ({
   const isEditLiqRange = useStore((state) => state.loanCreate.isEditLiqRange)
   const liqRanges = useStore((state) => state.loanCreate.liqRanges[activeKeyLiqRange])
   const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
-  const userLoanDetails = useUserLoanDetails(llammaId)
+
+  const { address: userAddress } = useAccount()
+  const { data: userLoanDetails } = useUserLoanDetails({
+    chainId,
+    marketId: llammaId,
+    userAddress,
+  })
 
   return (
     <div>

apps/main/src/loan/components/PageLoanCreate/Page.tsx

@@ -63,7 +63,6 @@ const Page = () => {
   const isMdUp = useLayoutStore((state) => state.isMdUp)
   const fetchLoanDetails = useStore((state) => state.loans.fetchLoanDetails)
   const fetchUserLoanWalletBalances = useStore((state) => state.loans.fetchUserLoanWalletBalances)
-  const resetUserDetailsState = useStore((state) => state.loans.resetUserDetailsState)
   const setFormValues = useStore((state) => state.loanCreate.setFormValues)
   const setStateByKeys = useStore((state) => state.loanCreate.setStateByKeys)
   const chartExpanded = useStore((state) => state.ohlcCharts.chartExpanded)
@@ -121,7 +120,6 @@ const Page = () => {
   useEffect(() => {
     if (isHydrated && curve) {
       if (market) {
-        resetUserDetailsState(market)
         fetchInitial(curve, isLeverage, market)
         void fetchLoanDetails(curve, market)
         setLoaded(true)

apps/main/src/loan/components/PageLoanManage/CollateralDecrease/index.tsx

@@ -1,4 +1,5 @@
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { useAccount } from 'wagmi'
 import AlertFormError from '@/loan/components/AlertFormError'
 import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
 import DetailInfoEstimateGas from '@/loan/components/DetailInfoEstimateGas'
@@ -11,7 +12,7 @@ import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageLo
 import type { FormEstGas, PageLoanManageProps } from '@/loan/components/PageLoanManage/types'
 import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS, DEFAULT_HEALTH_MODE } from '@/loan/components/PageLoanManage/utils'
 import { DEFAULT_WALLET_BALANCES } from '@/loan/constants'
-import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
+import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
 import networks from '@/loan/networks'
 import { DEFAULT_FORM_STATUS } from '@/loan/store/createLoanCollateralDecreaseSlice'
 import useStore from '@/loan/store/useStore'
@@ -47,7 +48,9 @@ const CollateralDecrease = ({ curve, llamma, llammaId, rChainId }: Props) => {
   const formValues = useStore((state) => state.loanCollateralDecrease.formValues)
   const maxRemovable = useStore((state) => state.loanCollateralDecrease.maxRemovable)
   const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
-  const userLoanDetails = useUserLoanDetails(llammaId)
+
+  const { address: userAddress } = useAccount()
+  const { data: userLoanDetails } = useUserLoanDetails({ chainId: rChainId, marketId: llammaId, userAddress })
   const userWalletBalances = useStore(
     (state) => state.loans.userWalletBalancesMapper[llammaId] ?? DEFAULT_WALLET_BALANCES,
   )

apps/main/src/loan/components/PageLoanManage/CollateralIncrease/index.tsx

@@ -1,5 +1,6 @@
 import type { ReactNode } from 'react'
 import { useCallback, useEffect, useRef, useState } from 'react'
+import { useAccount } from 'wagmi'
 import AlertFormError from '@/loan/components/AlertFormError'
 import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
 import DetailInfoEstimateGas from '@/loan/components/DetailInfoEstimateGas'
@@ -12,7 +13,7 @@ import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageLo
 import type { FormEstGas, PageLoanManageProps } from '@/loan/components/PageLoanManage/types'
 import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS, DEFAULT_HEALTH_MODE } from '@/loan/components/PageLoanManage/utils'
 import { DEFAULT_WALLET_BALANCES } from '@/loan/constants'
-import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
+import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
 import networks from '@/loan/networks'
 import { DEFAULT_FORM_STATUS } from '@/loan/store/createLoanCollateralIncreaseSlice'
 import useStore from '@/loan/store/useStore'
@@ -36,9 +37,9 @@ import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput'
 import { TokenLabel } from '@ui-kit/shared/ui/TokenLabel'
 import { decimal, type Decimal } from '@ui-kit/utils'
 
-interface Props extends Pick<PageLoanManageProps, 'curve' | 'isReady' | 'llamma' | 'llammaId'> {}
+interface Props extends Pick<PageLoanManageProps, 'curve' | 'isReady' | 'llamma' | 'llammaId' | 'rChainId'> {}
 
-const CollateralIncrease = ({ curve, isReady, llamma, llammaId }: Props) => {
+const CollateralIncrease = ({ curve, isReady, llamma, llammaId, rChainId }: Props) => {
   const isSubscribed = useRef(false)
 
   const activeKey = useStore((state) => state.loanCollateralIncrease.activeKey)
@@ -47,12 +48,18 @@ const CollateralIncrease = ({ curve, isReady, llamma, llammaId }: Props) => {
   const formStatus = useStore((state) => state.loanCollateralIncrease.formStatus)
   const formValues = useStore((state) => state.loanCollateralIncrease.formValues)
   const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
-  const userLoanDetails = useUserLoanDetails(llammaId)
   const userWalletBalancesLoading = useStore((state) => state.loans.userWalletBalancesLoading)
   const userWalletBalances = useStore(
     (state) => state.loans.userWalletBalancesMapper[llammaId] ?? DEFAULT_WALLET_BALANCES,
   )
 
+  const { address: userAddress } = useAccount()
+  const { data: userLoanDetails } = useUserLoanDetails({
+    chainId: rChainId,
+    marketId: llammaId,
+    userAddress,
+  })
+
   const fetchStepApprove = useStore((state) => state.loanCollateralIncrease.fetchStepApprove)
   const fetchStepIncrease = useStore((state) => state.loanCollateralIncrease.fetchStepIncrease)
   const setFormValues = useStore((state) => state.loanCollateralIncrease.setFormValues)

apps/main/src/loan/components/PageLoanManage/LoanDecrease/index.tsx

@@ -1,4 +1,6 @@
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { useAccount } from 'wagmi'
+import { refetchLoanExists } from '@/llamalend/queries/loan-exists'
 import AlertFormError from '@/loan/components/AlertFormError'
 import AlertFormWarning from '@/loan/components/AlertFormWarning'
 import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
@@ -11,7 +13,7 @@ import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageLo
 import type { FormEstGas, PageLoanManageProps } from '@/loan/components/PageLoanManage/types'
 import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS, DEFAULT_HEALTH_MODE } from '@/loan/components/PageLoanManage/utils'
 import { DEFAULT_WALLET_BALANCES } from '@/loan/constants'
-import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
+import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
 import networks from '@/loan/networks'
 import { DEFAULT_FORM_STATUS } from '@/loan/store/createLoanDecreaseSlice'
 import useStore from '@/loan/store/useStore'
@@ -50,7 +52,14 @@ const LoanDecrease = ({ curve, llamma, llammaId, params, rChainId }: Props) => {
   const formStatus = useStore((state) => state.loanDecrease.formStatus)
   const formValues = useStore((state) => state.loanDecrease.formValues)
   const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
-  const userLoanDetails = useUserLoanDetails(llammaId)
+
+  const { address: userAddress } = useAccount()
+  const { data: userLoanDetails } = useUserLoanDetails({
+    chainId: rChainId,
+    marketId: llammaId,
+    userAddress,
+  })
+
   const userWalletBalances = useStore(
     (state) => state.loans.userWalletBalancesMapper[llammaId] ?? DEFAULT_WALLET_BALANCES,
   )
@@ -140,7 +149,13 @@ const LoanDecrease = ({ curve, llamma, llammaId, params, rChainId }: Props) => {
       const resp = await fetchStepDecrease(payloadActiveKey, curve, llamma, formValues)
 
       if (isSubscribed.current && resp && resp.hash && resp.activeKey === activeKey) {
-        const txInfoBarMessage = resp.loanExists
+        const loanExists = await refetchLoanExists({
+          chainId,
+          marketId: llammaId,
+          userAddress,
+        })
+
+        const txInfoBarMessage = loanExists
           ? t`Transaction complete`
           : t`Transaction complete. This loan is payoff and will no longer be manageable.`
 
@@ -149,7 +164,7 @@ const LoanDecrease = ({ curve, llamma, llammaId, params, rChainId }: Props) => {
             description={txInfoBarMessage}
             txHash={scanTxPath(networks[rChainId], resp.hash)}
             onClose={() => {
-              if (resp.loanExists) {
+              if (loanExists) {
                 reset(false, true)
               } else {
                 push(getCollateralListPathname(params))
@@ -160,7 +175,7 @@ const LoanDecrease = ({ curve, llamma, llammaId, params, rChainId }: Props) => {
       }
       notification?.dismiss()
     },
-    [activeKey, fetchStepDecrease, push, params, rChainId, reset],
+    [fetchStepDecrease, activeKey, chainId, llammaId, userAddress, rChainId, reset, push, params],
   )
 
   const getSteps = useCallback(

apps/main/src/loan/components/PageLoanManage/LoanDeleverage/index.tsx

@@ -1,5 +1,7 @@
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import { styled } from 'styled-components'
+import { useAccount } from 'wagmi'
+import { refetchLoanExists } from '@/llamalend/queries/loan-exists'
 import AlertFormError from '@/loan/components/AlertFormError'
 import AlertFormWarning from '@/loan/components/AlertFormWarning'
 import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
@@ -22,7 +24,7 @@ import {
   DEFAULT_HEALTH_MODE,
   hasDeleverage,
 } from '@/loan/components/PageLoanManage/utils'
-import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
+import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
 import networks from '@/loan/networks'
 import useStore from '@/loan/store/useStore'
 import { LlamaApi, Llamma } from '@/loan/types/loan.types'
@@ -69,7 +71,14 @@ const LoanDeleverage = ({
   const formValues = useStore((state) => state.loanDeleverage.formValues)
   const isPageVisible = useLayoutStore((state) => state.isPageVisible)
   const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
-  const userLoanDetails = useUserLoanDetails(llammaId)
+
+  const { address: userAddress } = useAccount()
+  const { data: userLoanDetails } = useUserLoanDetails({
+    chainId: rChainId,
+    marketId: llammaId,
+    userAddress,
+  })
+
   const userWalletBalances = useStore((state) => state.loans.userWalletBalancesMapper[llammaId])
   const userWalletBalancesLoading = useStore((state) => state.loans.userWalletBalancesLoading)
   const fetchStepRepay = useStore((state) => state.loanDeleverage.fetchStepRepay)
@@ -127,7 +136,13 @@ const LoanDeleverage = ({
       const resp = await fetchStepRepay(payloadActiveKey, curve, llamma, formValues, maxSlippage)
 
       if (isSubscribed.current && resp && resp.hash && resp.activeKey === activeKey) {
-        const txInfoBarMessage = resp.loanExists
+        const loanExists = await refetchLoanExists({
+          chainId,
+          marketId: llammaId,
+          userAddress,
+        })
+
+        const txInfoBarMessage = loanExists
           ? t`Transaction complete`
           : t`Transaction complete. This loan is paid-off and will no longer be manageable.`
 
@@ -136,7 +151,7 @@ const LoanDeleverage = ({
             description={txInfoBarMessage}
             txHash={scanTxPath(networks[rChainId], resp.hash)}
             onClose={() => {
-              if (resp.loanExists) {
+              if (loanExists) {
                 updateFormValues({}, '', true)
               } else {
                 push(getCollateralListPathname(params))
@@ -147,7 +162,18 @@ const LoanDeleverage = ({
       }
       if (typeof dismiss === 'function') dismiss()
     },
-    [activeKey, collateralName, fetchStepRepay, push, params, rChainId, updateFormValues],
+    [
+      collateralName,
+      fetchStepRepay,
+      activeKey,
+      chainId,
+      llammaId,
+      userAddress,
+      rChainId,
+      updateFormValues,
+      push,
+      params,
+    ],
   )
 
   const getSteps = useCallback(

apps/main/src/loan/components/PageLoanManage/LoanIncrease/index.tsx

@@ -1,4 +1,5 @@
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import { useAccount } from 'wagmi'
 import AlertFormError from '@/loan/components/AlertFormError'
 import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
 import DetailInfoEstimateGas from '@/loan/components/DetailInfoEstimateGas'
@@ -15,7 +16,7 @@ import {
   DEFAULT_HEALTH_MODE,
   DEFAULT_USER_WALLET_BALANCES,
 } from '@/loan/components/PageLoanManage/utils'
-import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
+import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
 import networks from '@/loan/networks'
 import { DEFAULT_FORM_STATUS, getMaxRecvActiveKey } from '@/loan/store/createLoanIncreaseSlice'
 import useStore from '@/loan/store/useStore'
@@ -39,10 +40,10 @@ import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput'
 import { TokenLabel } from '@ui-kit/shared/ui/TokenLabel'
 import { decimal, type Decimal } from '@ui-kit/utils'
 
-interface Props extends Pick<PageLoanManageProps, 'curve' | 'isReady' | 'llamma' | 'llammaId'> {}
+interface Props extends Pick<PageLoanManageProps, 'curve' | 'isReady' | 'llamma' | 'llammaId' | 'rChainId'> {}
 
 // Borrow more
-const LoanIncrease = ({ curve, isReady, llamma, llammaId }: Props) => {
+const LoanIncrease = ({ curve, isReady, llamma, llammaId, rChainId }: Props) => {
   const isSubscribed = useRef(false)
 
   const activeKey = useStore((state) => state.loanIncrease.activeKey)
@@ -53,7 +54,14 @@ const LoanIncrease = ({ curve, isReady, llamma, llammaId }: Props) => {
   const maxRecvActiveKey = llamma ? getMaxRecvActiveKey(llamma, formValues.collateral) : ''
   const maxRecv = useStore((state) => state.loanIncrease.maxRecv[maxRecvActiveKey])
   const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
-  const userLoanDetails = useUserLoanDetails(llammaId)
+
+  const { address: userAddress } = useAccount()
+  const { data: userLoanDetails } = useUserLoanDetails({
+    chainId: rChainId,
+    marketId: llammaId,
+    userAddress,
+  })
+
   const userWalletBalancesLoading = useStore((state) => state.loans.userWalletBalancesLoading)
   const userWalletBalances = useStore(
     (state) => state.loans.userWalletBalancesMapper[llammaId] ?? DEFAULT_USER_WALLET_BALANCES,