Skip to content

Commit bb2ec5e

Browse files
0xAlunara0xAlunara
committed
refactor: move user loan details fetching for mint markets out of
zustand into a tanstack
1 parent 710119e commit bb2ec5e

File tree

27 files changed

+340
-301
lines changed

27 files changed

+340
-301
lines changed

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

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
import { useCallback, useEffect, useMemo, useState } from 'react'
22
import { styled } from 'styled-components'
3+
import { useAccount } from 'wagmi'
34
import PoolActivity from '@/loan/components/ChartOhlcWrapper/PoolActivity'
4-
import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
5+
import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
56
import useStore from '@/loan/store/useStore'
67
import AlertBox from '@ui/AlertBox'
78
import Box from '@ui/Box'
@@ -26,7 +27,11 @@ const ChartOhlcWrapper = ({ rChainId, llamma, llammaId, betaBackgroundColor }: C
2627
const collateralDecreaseActiveKey = useStore((state) => state.loanCollateralDecrease.activeKey)
2728
const formValues = useStore((state) => state.loanCreate.formValues)
2829
const activeKeyLiqRange = useStore((state) => state.loanCreate.activeKeyLiqRange)
29-
const userPrices = useUserLoanDetails(llammaId)?.userPrices ?? null
30+
31+
const { address: userAddress } = useAccount()
32+
const { data: userLoanDetails } = useUserLoanDetails({ chainId: rChainId, marketId: llammaId, userAddress })
33+
const { userPrices } = userLoanDetails ?? {}
34+
3035
const liqRangesMapper = useStore((state) => state.loanCreate.liqRangesMapper[activeKeyLiqRange])
3136
const increaseLoanPrices = useStore((state) => state.loanIncrease.detailInfo[increaseActiveKey]?.prices ?? null)
3237
const decreaseLoanPrices = useStore((state) => state.loanDecrease.detailInfo[decreaseActiveKey]?.prices ?? null)

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

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
import { ReactNode, useEffect, useMemo, useState } from 'react'
2+
import { useAccount } from 'wagmi'
23
import ChartBandBalances from '@/loan/components/ChartBandBalances'
34
import type { BrushStartEndIndex } from '@/loan/components/ChartBandBalances/types'
4-
import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
5+
import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
56
import useStore from '@/loan/store/useStore'
67
import { Llamma } from '@/loan/types/loan.types'
78
import { t } from '@ui-kit/lib/i18n'
9+
import { Chain } from '@ui-kit/utils'
810

911
const DEFAULT_BAND_CHART_DATA = {
1012
collateral: '0',
@@ -30,7 +32,14 @@ const ChartUserBands = ({
3032
selectorMenu?: ReactNode
3133
}) => {
3234
const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
33-
const { userBandsBalances, userLiquidationBand } = useUserLoanDetails(llammaId) ?? {}
35+
36+
const { address: userAddress } = useAccount()
37+
const { data: userLoanDetails } = useUserLoanDetails({
38+
chainId: Chain.Ethereum, // mint markets are only available on mainnet
39+
marketId: llammaId,
40+
userAddress,
41+
})
42+
const { userBandsBalances, userLiquidationBand } = userLoanDetails ?? {}
3443

3544
const [brushIndex, setBrushIndex] = useState<BrushStartEndIndex>({
3645
startIndex: undefined,

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { styled } from 'styled-components'
2+
import { useAccount } from 'wagmi'
23
import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
34
import DetailInfoEstGas from '@/loan/components/DetailInfoEstimateGas'
45
import DetailInfoHealth from '@/loan/components/DetailInfoHealth'
@@ -8,7 +9,7 @@ import DetailInfoSlippageTolerance from '@/loan/components/DetailInfoSlippageTol
89
import DetailInfoTradeRoutes from '@/loan/components/PageLoanCreate/LoanFormCreate/components/DetailInfoTradeRoutes'
910
import type { FormDetailInfo, FormDetailInfoSharedProps } from '@/loan/components/PageLoanCreate/types'
1011
import { DEFAULT_DETAIL_INFO_LEVERAGE } from '@/loan/components/PageLoanCreate/utils'
11-
import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
12+
import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
1213
import useStore from '@/loan/store/useStore'
1314
import { getTokenName } from '@/loan/utils/utilsLoan'
1415
import DetailInfo from '@ui/DetailInfo'
@@ -42,7 +43,13 @@ const DetailInfoLeverage = ({
4243
const isEditLiqRange = useStore((state) => state.loanCreate.isEditLiqRange)
4344
const liqRanges = useStore((state) => state.loanCreate.liqRanges[activeKeyLiqRange])
4445
const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
45-
const userLoanDetails = useUserLoanDetails(llammaId)
46+
47+
const { address: userAddress } = useAccount()
48+
const { data: userLoanDetails } = useUserLoanDetails({
49+
chainId,
50+
marketId: llammaId,
51+
userAddress,
52+
})
4653

4754
const maxSlippage = useUserProfileStore((state) => state.maxSlippage.crypto)
4855

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

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
1+
import { useAccount } from 'wagmi'
12
import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
23
import DetailInfoEstGas from '@/loan/components/DetailInfoEstimateGas'
34
import DetailInfoHealth from '@/loan/components/DetailInfoHealth'
45
import DetailInfoLiqRange from '@/loan/components/DetailInfoLiqRange'
56
import DetailInfoN from '@/loan/components/DetailInfoN'
67
import type { FormDetailInfo, FormDetailInfoSharedProps } from '@/loan/components/PageLoanCreate/types'
78
import { DEFAULT_DETAIL_INFO } from '@/loan/components/PageLoanManage/utils'
8-
import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
9+
import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
910
import useStore from '@/loan/store/useStore'
1011
import { LiquidationRangeSlider } from '@ui-kit/shared/ui/LiquidationRangeSlider'
1112

@@ -34,7 +35,13 @@ const DetailInfoNonLeverage = ({
3435
const isEditLiqRange = useStore((state) => state.loanCreate.isEditLiqRange)
3536
const liqRanges = useStore((state) => state.loanCreate.liqRanges[activeKeyLiqRange])
3637
const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
37-
const userLoanDetails = useUserLoanDetails(llammaId)
38+
39+
const { address: userAddress } = useAccount()
40+
const { data: userLoanDetails } = useUserLoanDetails({
41+
chainId,
42+
marketId: llammaId,
43+
userAddress,
44+
})
3845

3946
return (
4047
<div>

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,6 @@ const Page = () => {
6363
const isMdUp = useLayoutStore((state) => state.isMdUp)
6464
const fetchLoanDetails = useStore((state) => state.loans.fetchLoanDetails)
6565
const fetchUserLoanWalletBalances = useStore((state) => state.loans.fetchUserLoanWalletBalances)
66-
const resetUserDetailsState = useStore((state) => state.loans.resetUserDetailsState)
6766
const setFormValues = useStore((state) => state.loanCreate.setFormValues)
6867
const setStateByKeys = useStore((state) => state.loanCreate.setStateByKeys)
6968
const chartExpanded = useStore((state) => state.ohlcCharts.chartExpanded)
@@ -121,7 +120,6 @@ const Page = () => {
121120
useEffect(() => {
122121
if (isHydrated && curve) {
123122
if (market) {
124-
resetUserDetailsState(market)
125123
fetchInitial(curve, isLeverage, market)
126124
void fetchLoanDetails(curve, market)
127125
setLoaded(true)

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

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
2+
import { useAccount } from 'wagmi'
23
import AlertFormError from '@/loan/components/AlertFormError'
34
import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
45
import DetailInfoEstimateGas from '@/loan/components/DetailInfoEstimateGas'
@@ -11,7 +12,7 @@ import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageLo
1112
import type { FormEstGas, PageLoanManageProps } from '@/loan/components/PageLoanManage/types'
1213
import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS, DEFAULT_HEALTH_MODE } from '@/loan/components/PageLoanManage/utils'
1314
import { DEFAULT_WALLET_BALANCES } from '@/loan/constants'
14-
import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
15+
import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
1516
import networks from '@/loan/networks'
1617
import { DEFAULT_FORM_STATUS } from '@/loan/store/createLoanCollateralDecreaseSlice'
1718
import useStore from '@/loan/store/useStore'
@@ -47,7 +48,9 @@ const CollateralDecrease = ({ curve, llamma, llammaId, rChainId }: Props) => {
4748
const formValues = useStore((state) => state.loanCollateralDecrease.formValues)
4849
const maxRemovable = useStore((state) => state.loanCollateralDecrease.maxRemovable)
4950
const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
50-
const userLoanDetails = useUserLoanDetails(llammaId)
51+
52+
const { address: userAddress } = useAccount()
53+
const { data: userLoanDetails } = useUserLoanDetails({ chainId: rChainId, marketId: llammaId, userAddress })
5154
const userWalletBalances = useStore(
5255
(state) => state.loans.userWalletBalancesMapper[llammaId] ?? DEFAULT_WALLET_BALANCES,
5356
)

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

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import type { ReactNode } from 'react'
22
import { useCallback, useEffect, useRef, useState } from 'react'
3+
import { useAccount } from 'wagmi'
34
import AlertFormError from '@/loan/components/AlertFormError'
45
import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
56
import DetailInfoEstimateGas from '@/loan/components/DetailInfoEstimateGas'
@@ -12,7 +13,7 @@ import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageLo
1213
import type { FormEstGas, PageLoanManageProps } from '@/loan/components/PageLoanManage/types'
1314
import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS, DEFAULT_HEALTH_MODE } from '@/loan/components/PageLoanManage/utils'
1415
import { DEFAULT_WALLET_BALANCES } from '@/loan/constants'
15-
import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
16+
import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
1617
import networks from '@/loan/networks'
1718
import { DEFAULT_FORM_STATUS } from '@/loan/store/createLoanCollateralIncreaseSlice'
1819
import useStore from '@/loan/store/useStore'
@@ -36,9 +37,9 @@ import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput'
3637
import { TokenLabel } from '@ui-kit/shared/ui/TokenLabel'
3738
import { decimal, type Decimal } from '@ui-kit/utils'
3839

39-
interface Props extends Pick<PageLoanManageProps, 'curve' | 'isReady' | 'llamma' | 'llammaId'> {}
40+
interface Props extends Pick<PageLoanManageProps, 'curve' | 'isReady' | 'llamma' | 'llammaId' | 'rChainId'> {}
4041

41-
const CollateralIncrease = ({ curve, isReady, llamma, llammaId }: Props) => {
42+
const CollateralIncrease = ({ curve, isReady, llamma, llammaId, rChainId }: Props) => {
4243
const isSubscribed = useRef(false)
4344

4445
const activeKey = useStore((state) => state.loanCollateralIncrease.activeKey)
@@ -47,12 +48,18 @@ const CollateralIncrease = ({ curve, isReady, llamma, llammaId }: Props) => {
4748
const formStatus = useStore((state) => state.loanCollateralIncrease.formStatus)
4849
const formValues = useStore((state) => state.loanCollateralIncrease.formValues)
4950
const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
50-
const userLoanDetails = useUserLoanDetails(llammaId)
5151
const userWalletBalancesLoading = useStore((state) => state.loans.userWalletBalancesLoading)
5252
const userWalletBalances = useStore(
5353
(state) => state.loans.userWalletBalancesMapper[llammaId] ?? DEFAULT_WALLET_BALANCES,
5454
)
5555

56+
const { address: userAddress } = useAccount()
57+
const { data: userLoanDetails } = useUserLoanDetails({
58+
chainId: rChainId,
59+
marketId: llammaId,
60+
userAddress,
61+
})
62+
5663
const fetchStepApprove = useStore((state) => state.loanCollateralIncrease.fetchStepApprove)
5764
const fetchStepIncrease = useStore((state) => state.loanCollateralIncrease.fetchStepIncrease)
5865
const setFormValues = useStore((state) => state.loanCollateralIncrease.setFormValues)

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
2+
import { useAccount } from 'wagmi'
23
import AlertFormError from '@/loan/components/AlertFormError'
34
import AlertFormWarning from '@/loan/components/AlertFormWarning'
45
import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
@@ -11,7 +12,7 @@ import { StyledDetailInfoWrapper, StyledInpChip } from '@/loan/components/PageLo
1112
import type { FormEstGas, PageLoanManageProps } from '@/loan/components/PageLoanManage/types'
1213
import { DEFAULT_DETAIL_INFO, DEFAULT_FORM_EST_GAS, DEFAULT_HEALTH_MODE } from '@/loan/components/PageLoanManage/utils'
1314
import { DEFAULT_WALLET_BALANCES } from '@/loan/constants'
14-
import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
15+
import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
1516
import networks from '@/loan/networks'
1617
import { DEFAULT_FORM_STATUS } from '@/loan/store/createLoanDecreaseSlice'
1718
import useStore from '@/loan/store/useStore'
@@ -50,7 +51,14 @@ const LoanDecrease = ({ curve, llamma, llammaId, params, rChainId }: Props) => {
5051
const formStatus = useStore((state) => state.loanDecrease.formStatus)
5152
const formValues = useStore((state) => state.loanDecrease.formValues)
5253
const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
53-
const userLoanDetails = useUserLoanDetails(llammaId)
54+
55+
const { address: userAddress } = useAccount()
56+
const { data: userLoanDetails } = useUserLoanDetails({
57+
chainId: rChainId,
58+
marketId: llammaId,
59+
userAddress,
60+
})
61+
5462
const userWalletBalances = useStore(
5563
(state) => state.loans.userWalletBalancesMapper[llammaId] ?? DEFAULT_WALLET_BALANCES,
5664
)

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

Lines changed: 10 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
22
import { styled } from 'styled-components'
3+
import { useAccount } from 'wagmi'
34
import AlertFormError from '@/loan/components/AlertFormError'
45
import AlertFormWarning from '@/loan/components/AlertFormWarning'
56
import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
@@ -22,7 +23,7 @@ import {
2223
DEFAULT_HEALTH_MODE,
2324
hasDeleverage,
2425
} from '@/loan/components/PageLoanManage/utils'
25-
import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
26+
import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
2627
import networks from '@/loan/networks'
2728
import useStore from '@/loan/store/useStore'
2829
import { LlamaApi, Llamma } from '@/loan/types/loan.types'
@@ -69,7 +70,14 @@ const LoanDeleverage = ({
6970
const formValues = useStore((state) => state.loanDeleverage.formValues)
7071
const isPageVisible = useLayoutStore((state) => state.isPageVisible)
7172
const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
72-
const userLoanDetails = useUserLoanDetails(llammaId)
73+
74+
const { address: userAddress } = useAccount()
75+
const { data: userLoanDetails } = useUserLoanDetails({
76+
chainId: rChainId,
77+
marketId: llammaId,
78+
userAddress,
79+
})
80+
7381
const userWalletBalances = useStore((state) => state.loans.userWalletBalancesMapper[llammaId])
7482
const userWalletBalancesLoading = useStore((state) => state.loans.userWalletBalancesLoading)
7583
const fetchStepRepay = useStore((state) => state.loanDeleverage.fetchStepRepay)

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

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
2+
import { useAccount } from 'wagmi'
23
import AlertFormError from '@/loan/components/AlertFormError'
34
import DetailInfoBorrowRate from '@/loan/components/DetailInfoBorrowRate'
45
import DetailInfoEstimateGas from '@/loan/components/DetailInfoEstimateGas'
@@ -15,7 +16,7 @@ import {
1516
DEFAULT_HEALTH_MODE,
1617
DEFAULT_USER_WALLET_BALANCES,
1718
} from '@/loan/components/PageLoanManage/utils'
18-
import { useUserLoanDetails } from '@/loan/hooks/useUserLoanDetails'
19+
import { useUserLoanDetails } from '@/loan/entities/user-loan-details.query'
1920
import networks from '@/loan/networks'
2021
import { DEFAULT_FORM_STATUS, getMaxRecvActiveKey } from '@/loan/store/createLoanIncreaseSlice'
2122
import useStore from '@/loan/store/useStore'
@@ -39,10 +40,10 @@ import { LargeTokenInput } from '@ui-kit/shared/ui/LargeTokenInput'
3940
import { TokenLabel } from '@ui-kit/shared/ui/TokenLabel'
4041
import { decimal, type Decimal } from '@ui-kit/utils'
4142

42-
interface Props extends Pick<PageLoanManageProps, 'curve' | 'isReady' | 'llamma' | 'llammaId'> {}
43+
interface Props extends Pick<PageLoanManageProps, 'curve' | 'isReady' | 'llamma' | 'llammaId' | 'rChainId'> {}
4344

4445
// Borrow more
45-
const LoanIncrease = ({ curve, isReady, llamma, llammaId }: Props) => {
46+
const LoanIncrease = ({ curve, isReady, llamma, llammaId, rChainId }: Props) => {
4647
const isSubscribed = useRef(false)
4748

4849
const activeKey = useStore((state) => state.loanIncrease.activeKey)
@@ -53,7 +54,14 @@ const LoanIncrease = ({ curve, isReady, llamma, llammaId }: Props) => {
5354
const maxRecvActiveKey = llamma ? getMaxRecvActiveKey(llamma, formValues.collateral) : ''
5455
const maxRecv = useStore((state) => state.loanIncrease.maxRecv[maxRecvActiveKey])
5556
const loanDetails = useStore((state) => state.loans.detailsMapper[llammaId])
56-
const userLoanDetails = useUserLoanDetails(llammaId)
57+
58+
const { address: userAddress } = useAccount()
59+
const { data: userLoanDetails } = useUserLoanDetails({
60+
chainId: rChainId,
61+
marketId: llammaId,
62+
userAddress,
63+
})
64+
5765
const userWalletBalancesLoading = useStore((state) => state.loans.userWalletBalancesLoading)
5866
const userWalletBalances = useStore(
5967
(state) => state.loans.userWalletBalancesMapper[llammaId] ?? DEFAULT_USER_WALLET_BALANCES,

0 commit comments

Comments
 (0)