Skip to content

Commit 00826b6

Browse files
DanielSchiaviniDanielSchiavini
authored
Merge pull request #1736 from curvefi/refactor/merge-lend-routes
refactor: merge lend create and manage loan + vault pages
2 parents 0c91342 + 7e967f9 commit 00826b6

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

69 files changed

+369
-665
lines changed

‎apps/main/src/lend/components/AlertNoLoanFound.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { styled } from 'styled-components'
22
import useStore from '@/lend/store/useStore'
33
import type { UrlParams } from '@/lend/types/lend.types'
4-
import { getLoanCreatePathname } from '@/lend/utils/utilsRouter'
4+
import { getLoanPathname } from '@/lend/utils/utilsRouter'
55
import AlertBox from '@ui/AlertBox'
66
import type { AlertType } from '@ui/AlertBox/types'
77
import Button from '@ui/Button'
@@ -25,7 +25,7 @@ const AlertNoLoanFound = ({ alertType, owmId }: { alertType?: AlertType; owmId:
2525
size="large"
2626
onClick={() => {
2727
setStateByKeyMarkets('marketDetailsView', 'market')
28-
push(getLoanCreatePathname(params, owmId))
28+
push(getLoanPathname(params, owmId))
2929
}}
3030
>
3131
Create loan

‎apps/main/src/lend/components/BandsComp.tsx‎

Lines changed: 22 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -9,46 +9,39 @@ import { t } from '@ui-kit/lib/i18n'
99

1010
type BandsCompProps = {
1111
pageProps: PageContentProps
12-
page: 'create' | 'manage'
13-
loanExists: boolean
12+
loanExists: boolean | undefined
1413
}
1514

16-
export const BandsComp = ({ pageProps, page, loanExists }: BandsCompProps) => {
15+
export const BandsComp = ({ pageProps, loanExists }: BandsCompProps) => {
1716
const { rChainId, rOwmId, market } = pageProps
18-
const [selectedBand, setSelectedBand] = useState<'user' | 'market'>(page === 'create' ? 'market' : 'user')
17+
const [selectedBand, setSelectedBand] = useState<'user' | 'market'>(loanExists ? 'user' : 'market')
1918

20-
const SelectorMenu =
21-
page === 'create' ? null : (
22-
<SelectorRow>
23-
<SelectorButton
24-
variant="text"
25-
className={selectedBand === 'user' ? 'active' : ''}
26-
onClick={() => setSelectedBand('user')}
27-
>
28-
{t`Position Bands`}
29-
</SelectorButton>
30-
<SelectorButton
31-
variant="text"
32-
className={selectedBand === 'market' ? 'active' : ''}
33-
onClick={() => setSelectedBand('market')}
34-
>
35-
{t`Market Bands`}
36-
</SelectorButton>
37-
</SelectorRow>
38-
)
19+
const SelectorMenu = loanExists && (
20+
<SelectorRow>
21+
<SelectorButton
22+
variant="text"
23+
className={selectedBand === 'user' ? 'active' : ''}
24+
onClick={() => setSelectedBand('user')}
25+
>
26+
{t`Position Bands`}
27+
</SelectorButton>
28+
<SelectorButton
29+
variant="text"
30+
className={selectedBand === 'market' ? 'active' : ''}
31+
onClick={() => setSelectedBand('market')}
32+
>
33+
{t`Market Bands`}
34+
</SelectorButton>
35+
</SelectorRow>
36+
)
3937

4038
return (
4139
<Stack>
4240
{selectedBand === 'user' && loanExists && (
4341
<DetailsUserLoanChartBandBalances {...pageProps} selectorMenu={SelectorMenu} />
4442
)}
4543
{(selectedBand === 'market' || !loanExists) && (
46-
<DetailsLoanChartBalances
47-
rChainId={rChainId}
48-
rOwmId={rOwmId}
49-
market={market}
50-
selectorMenu={loanExists ? SelectorMenu : undefined}
51-
/>
44+
<DetailsLoanChartBalances rChainId={rChainId} rOwmId={rOwmId} market={market} selectorMenu={SelectorMenu} />
5245
)}
5346
</Stack>
5447
)

‎apps/main/src/lend/components/InpChipVaultShareUsdRate.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { StyledInpChip } from '@/lend/components/PageLoanManage/styles'
1+
import { StyledInpChip } from '@/lend/components/styles'
22
import useVaultShares from '@/lend/hooks/useVaultShares'
33
import { ChainId } from '@/lend/types/lend.types'
44
import Box from '@ui/Box'

‎apps/main/src/lend/components/InpToken.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useCallback } from 'react'
22
import InpChipUsdRate from '@/lend/components/InpChipUsdRate'
3-
import { StyledInpChip } from '@/lend/components/PageLoanManage/styles'
3+
import { StyledInpChip } from '@/lend/components/styles'
44
import type { NetworkConfig } from '@/lend/types/lend.types'
55
import Box from '@ui/Box'
66
import InputProvider, { InputDebounced, InputMaxBtn } from '@ui/InputComp'

‎apps/main/src/lend/components/InpTokenBorrow.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useCallback } from 'react'
22
import InpChipUsdRate from '@/lend/components/InpChipUsdRate'
3-
import { StyledInpChip } from '@/lend/components/PageLoanManage/styles'
43
import { FieldsTitle } from '@/lend/components/SharedFormStyles/FieldsWrapper'
4+
import { StyledInpChip } from '@/lend/components/styles'
55
import type { NetworkConfig } from '@/lend/types/lend.types'
66
import Box from '@ui/Box'
77
import type { BoxProps } from '@ui/Box/types'

‎apps/main/src/lend/components/InpTokenRemove.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useCallback } from 'react'
22
import InpChipUsdRate from '@/lend/components/InpChipUsdRate'
3-
import { StyledInpChip } from '@/lend/components/PageLoanManage/styles'
43
import { FieldsTitle } from '@/lend/components/SharedFormStyles/FieldsWrapper'
4+
import { StyledInpChip } from '@/lend/components/styles'
55
import type { NetworkConfig } from '@/lend/types/lend.types'
66
import Box from '@ui/Box'
77
import type { BoxProps } from '@ui/Box/types'

‎apps/main/src/lend/components/MarketInformationComp.tsx‎

Lines changed: 4 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -18,24 +18,17 @@ const { Spacing } = SizesAndSpaces
1818

1919
type MarketInformationCompProps = {
2020
pageProps: PageContentProps
21-
loanExists?: boolean
21+
loanExists: boolean | undefined
2222
userActiveKey: string
2323
type: 'borrow' | 'supply'
24-
page?: 'create' | 'manage'
2524
}
2625

2726
const EMPTY_ARRAY: never[] = []
2827

2928
/**
30-
* Reusable component for OHLC charts, Bands (if applicable), and market parameters. For /create, /manage, /vault pages.
29+
* Reusable component for OHLC charts, Bands (if applicable), and market parameters, used in market and vault pages.
3130
*/
32-
export const MarketInformationComp = ({
33-
pageProps,
34-
loanExists = false,
35-
userActiveKey,
36-
type,
37-
page = 'manage',
38-
}: MarketInformationCompProps) => {
31+
export const MarketInformationComp = ({ pageProps, loanExists, userActiveKey, type }: MarketInformationCompProps) => {
3932
const { rChainId, rOwmId, market } = pageProps
4033
const collateralTokenAddress = market?.collateral_token.address
4134
const borrowedTokenAddress = market?.borrowed_token.address
@@ -88,7 +81,7 @@ export const MarketInformationComp = ({
8881
)}
8982
{type === 'borrow' && !newBandsChartEnabled && isAdvancedMode && (
9083
<Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill, gap: Spacing.md, padding: Spacing.md }}>
91-
<BandsComp pageProps={pageProps} page={page} loanExists={loanExists} />
84+
<BandsComp pageProps={pageProps} loanExists={loanExists} />
9285
</Stack>
9386
)}
9487
{market && isAdvancedMode && (

apps/main/src/lend/components/PageLoanManage/Page.tsx renamed to apps/main/src/lend/components/PageLendMarket/LendMarketPage.tsx

Lines changed: 58 additions & 61 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import type { Address } from 'viem'
33
import CampaignRewardsBanner from '@/lend/components/CampaignRewardsBanner'
44
import { MarketInformationComp } from '@/lend/components/MarketInformationComp'
55
import { MarketInformationTabs } from '@/lend/components/MarketInformationTabs'
6-
import { ManageLoanTabs } from '@/lend/components/PageLoanManage/ManageLoanTabs'
6+
import { LoanCreateTabs } from '@/lend/components/PageLendMarket/LoanCreateTabs'
7+
import { ManageLoanTabs } from '@/lend/components/PageLendMarket/ManageLoanTabs'
78
import { useOneWayMarket } from '@/lend/entities/chain'
89
import { useBorrowPositionDetails } from '@/lend/hooks/useBorrowPositionDetails'
910
import { useLendPageTitle } from '@/lend/hooks/useLendPageTitle'
@@ -13,8 +14,8 @@ import { helpers } from '@/lend/lib/apiLending'
1314
import networks from '@/lend/networks'
1415
import useStore from '@/lend/store/useStore'
1516
import { type MarketUrlParams } from '@/lend/types/lend.types'
16-
import { getVaultPathname, parseMarketParams } from '@/lend/utils/helpers'
17-
import { getCollateralListPathname } from '@/lend/utils/utilsRouter'
17+
import { getCollateralListPathname, parseMarketParams } from '@/lend/utils/helpers'
18+
import { getVaultPathname } from '@/lend/utils/utilsRouter'
1819
import { MarketDetails } from '@/llamalend/features/market-details'
1920
import { BorrowPositionDetails, NoPosition } from '@/llamalend/features/market-position-details'
2021
import { UserPositionHistory } from '@/llamalend/features/user-position-history'
@@ -35,41 +36,28 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
3536

3637
const { Spacing } = SizesAndSpaces
3738

38-
const Page = () => {
39+
export const LendMarketPage = () => {
3940
const params = useParams<MarketUrlParams>()
40-
const { rMarket, rChainId } = parseMarketParams(params)
41+
const { rMarket, rChainId: chainId } = parseMarketParams(params)
42+
43+
const { data: market, isSuccess } = useOneWayMarket(chainId, rMarket)
4144
const { llamaApi: api = null, connectState } = useCurve()
4245
const titleMapper = useTitleMapper()
43-
const { data: market, isSuccess } = useOneWayMarket(rChainId, rMarket)
44-
const rOwmId = market?.id ?? ''
45-
const userActiveKey = helpers.getUserActiveKey(api, market!)
46+
const { provider, connect } = useWallet()
47+
4648
const isPageVisible = useLayoutStore((state) => state.isPageVisible)
4749
const fetchAllMarketDetails = useStore((state) => state.markets.fetchAll)
50+
const fetchUserMarketBalances = useStore((state) => state.user.fetchUserMarketBalances)
4851
const fetchAllUserMarketDetails = useStore((state) => state.user.fetchAll)
4952
const setMarketsStateKey = useStore((state) => state.markets.setStateByKey)
50-
const { provider, connect } = useWallet()
5153

54+
const marketId = market?.id ?? '' // todo: use market?.id directly everywhere since we pass the market too!
55+
const userActiveKey = helpers.getUserActiveKey(api, market!)
5256
const { signerAddress } = api ?? {}
57+
useLendPageTitle(market?.collateral_token?.symbol ?? rMarket, t`Lend`)
5358

54-
const { data: loanExists } = useLoanExists({
55-
chainId: rChainId,
56-
marketId: market?.id,
57-
userAddress: signerAddress,
58-
})
59-
60-
const [isLoaded, setLoaded] = useState(false)
61-
62-
const borrowPositionDetails = useBorrowPositionDetails({
63-
chainId: rChainId,
64-
market: market ?? undefined,
65-
marketId: rOwmId,
66-
})
67-
const marketDetails = useMarketDetails({
68-
chainId: rChainId,
69-
llamma: market,
70-
llammaId: rOwmId,
71-
})
72-
const network = networks[rChainId]
59+
const marketDetails = useMarketDetails({ chainId, market, marketId })
60+
const network = networks[chainId]
7361
const {
7462
data: userCollateralEvents,
7563
isLoading: collateralEventsIsLoading,
@@ -83,62 +71,73 @@ const Page = () => {
8371
borrowToken: market?.borrowed_token,
8472
network,
8573
})
74+
const { data: loanExists, isLoading: isLoanExistsLoading } = useLoanExists({
75+
chainId,
76+
marketId: marketId,
77+
userAddress: signerAddress,
78+
})
8679

87-
const isInSoftLiquidation =
88-
borrowPositionDetails.liquidationAlert.softLiquidation || borrowPositionDetails.liquidationAlert.hardLiquidation
80+
const [isLoaded, setLoaded] = useState(false)
8981

90-
useEffect(() => {
91-
if (api && market && isPageVisible) {
92-
if (loanExists) setMarketsStateKey('marketDetailsView', 'user')
93-
setLoaded(true)
94-
}
95-
}, [api, isPageVisible, loanExists, market, setMarketsStateKey])
82+
const borrowPositionDetails = useBorrowPositionDetails({ chainId, market: market, marketId })
9683

9784
useEffect(() => {
9885
// delay fetch rest after form details are fetched first
9986
const timer = setTimeout(async () => {
100-
if (!api || !market || !isPageVisible || !isLoaded) return
101-
void fetchAllMarketDetails(api, market, true)
102-
if (api.signerAddress && loanExists) {
103-
void fetchAllUserMarketDetails(api, market, true)
87+
if (!api || !market || !isPageVisible) return
88+
await fetchAllMarketDetails(api, market, true)
89+
if (api.signerAddress) {
90+
await fetchUserMarketBalances(api, market, true)
91+
if (loanExists) {
92+
void fetchAllUserMarketDetails(api, market, true)
93+
}
10494
}
10595
}, REFRESH_INTERVAL['3s'])
10696
return () => clearTimeout(timer)
107-
}, [api, fetchAllMarketDetails, fetchAllUserMarketDetails, isLoaded, isPageVisible, loanExists, market])
108-
109-
useLendPageTitle(market?.collateral_token?.symbol, 'Manage')
110-
111-
const pageProps = {
112-
params,
113-
rChainId,
114-
rOwmId,
115-
isLoaded,
97+
}, [
11698
api,
99+
fetchAllMarketDetails,
100+
fetchUserMarketBalances,
101+
fetchAllUserMarketDetails,
102+
isPageVisible,
117103
market,
118-
userActiveKey,
119-
titleMapper,
120-
}
104+
loanExists,
105+
])
106+
107+
useEffect(() => {
108+
if (api && market && isPageVisible) {
109+
if (loanExists) setMarketsStateKey('marketDetailsView', 'user')
110+
setLoaded(true)
111+
}
112+
}, [api, isPageVisible, loanExists, market, setMarketsStateKey])
121113

122-
const positionDetailsHrefs = {
123-
borrow: '',
124-
supply: getVaultPathname(params, rOwmId),
125-
}
114+
const pageProps = { params, rChainId: chainId, rOwmId: marketId, isLoaded, api, market, userActiveKey, titleMapper }
126115

127116
return isSuccess && !market ? (
128117
<ErrorPage title="404" subtitle={t`Market Not Found`} continueUrl={getCollateralListPathname(params)} />
129118
) : provider ? (
130119
<>
131120
<DetailPageStack>
132121
<AppPageFormsWrapper>
133-
{rChainId && rOwmId && <ManageLoanTabs isInSoftLiquidation={isInSoftLiquidation} {...pageProps} />}
122+
{chainId &&
123+
marketId &&
124+
!isLoanExistsLoading &&
125+
(loanExists ? (
126+
<ManageLoanTabs position={borrowPositionDetails} {...pageProps} />
127+
) : (
128+
<LoanCreateTabs {...pageProps} params={params} />
129+
))}
134130
</AppPageFormsWrapper>
135131
<Stack flexDirection="column" flexGrow={1} sx={{ gap: Spacing.md }}>
136132
<CampaignRewardsBanner
137-
chainId={rChainId}
133+
chainId={chainId}
138134
borrowAddress={market?.addresses?.controller || ''}
139135
supplyAddress={market?.addresses?.vault || ''}
140136
/>
141-
<MarketInformationTabs currentTab={'borrow'} hrefs={positionDetailsHrefs}>
137+
<MarketInformationTabs
138+
currentTab={'borrow'}
139+
hrefs={{ borrow: '', supply: getVaultPathname(params, marketId) }}
140+
>
142141
{loanExists ? (
143142
<BorrowPositionDetails {...borrowPositionDetails} />
144143
) : (
@@ -185,5 +184,3 @@ const Page = () => {
185184
</Box>
186185
)
187186
}
188-
189-
export default Page

apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/components/DetailInfo.tsx renamed to apps/main/src/lend/components/PageLendMarket/LoanBorrowMore/components/DetailInfo.tsx

File renamed without changes.

apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/components/DetailInfoLeverage.tsx renamed to apps/main/src/lend/components/PageLendMarket/LoanBorrowMore/components/DetailInfoLeverage.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import DetailInfoLiqRange from '@/lend/components/DetailInfoLiqRange'
77
import DetailInfoPriceImpact from '@/lend/components/DetailInfoPriceImpact'
88
import DetailInfoRate from '@/lend/components/DetailInfoRate'
99
import DetailInfoSlippageTolerance from '@/lend/components/DetailInfoSlippageTolerance'
10-
import { _parseValues } from '@/lend/components/PageLoanManage/LoanBorrowMore/utils'
10+
import { _parseValues } from '@/lend/components/PageLendMarket/LoanBorrowMore/utils'
1111
import networks from '@/lend/networks'
1212
import useStore from '@/lend/store/useStore'
1313
import { PageContentProps } from '@/lend/types/lend.types'

0 commit comments

Comments
 (0)