Skip to content

Commit 07df2c4

Browse files
0xAlunara0xAlunara
authored
Merge pull request #1745 from curvefi/revert/refactor/routes
revert: "Merge pull request #1730 from curvefi/refactor/routes"
2 parents 2858898 + 0d1d520 commit 07df2c4

File tree

40 files changed

+490
-641
lines changed

40 files changed

+490
-641
lines changed

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -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(getLoanCreatePathname(params, owmId, 'create'))
2929
}}
3030
>
3131
Create loan

‎apps/main/src/lend/components/PageLoanCreate/LoanCreateTabs.tsx‎

Lines changed: 0 additions & 66 deletions
This file was deleted.

‎apps/main/src/lend/components/PageLoanCreate/LoanFormCreate/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -412,7 +412,7 @@ const LoanCreate = ({
412412
size="large"
413413
onClick={() => {
414414
setStateByKeyMarkets('marketDetailsView', 'user')
415-
push(getLoanManagePathname(params, rOwmId))
415+
push(getLoanManagePathname(params, rOwmId, 'loan'))
416416
}}
417417
>
418418
Manage loan
@@ -431,7 +431,7 @@ const LoanCreate = ({
431431
)}
432432
{steps && <Stepper steps={steps} />}
433433
{formStatus.isComplete && market && (
434-
<LinkButton variant="filled" size="large" href={getLoanManagePathname(params, market.id)}>
434+
<LinkButton variant="filled" size="large" href={getLoanManagePathname(params, market.id, 'loan')}>
435435
Manage loan
436436
</LinkButton>
437437
)}

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ 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 { LoanCreateTabs } from '@/lend/components/PageLoanCreate/LoanCreateTabs'
6+
import LoanCreate from '@/lend/components/PageLoanCreate/index'
77
import { useOneWayMarket } from '@/lend/entities/chain'
88
import { useLendPageTitle } from '@/lend/hooks/useLendPageTitle'
99
import { useMarketDetails } from '@/lend/hooks/useMarketDetails'
@@ -35,7 +35,7 @@ const { Spacing } = SizesAndSpaces
3535

3636
const Page = () => {
3737
const params = useParams<MarketUrlParams>()
38-
const { rMarket, rChainId } = parseMarketParams(params)
38+
const { rMarket, rChainId, rFormType } = parseMarketParams(params)
3939

4040
const { data: market, isSuccess } = useOneWayMarket(rChainId, rMarket)
4141
const { llamaApi: api = null, connectState } = useConnection()
@@ -88,6 +88,7 @@ const Page = () => {
8888
params,
8989
rChainId,
9090
rOwmId,
91+
rFormType,
9192
api,
9293
market,
9394
titleMapper,
@@ -96,7 +97,7 @@ const Page = () => {
9697
}
9798
const positionDetailsHrefs = {
9899
borrow: '',
99-
supply: getVaultPathname(params, rOwmId),
100+
supply: getVaultPathname(params, rOwmId, 'deposit'),
100101
}
101102

102103
return isSuccess && !market ? (
@@ -105,7 +106,7 @@ const Page = () => {
105106
<>
106107
<DetailPageStack>
107108
<AppPageFormsWrapper data-testid="form-wrapper">
108-
{rChainId && rOwmId && <LoanCreateTabs {...pageProps} params={params} />}
109+
{rChainId && rOwmId && <LoanCreate {...pageProps} params={params} />}
109110
</AppPageFormsWrapper>
110111
<Stack flexDirection="column" flexGrow={1} sx={{ gap: Spacing.md }}>
111112
<CampaignRewardsBanner

‎apps/main/src/lend/components/PageLoanCreate/index.tsx‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
import { useCallback, useMemo } from 'react'
2+
import LoanFormCreate from '@/lend/components/PageLoanCreate/LoanFormCreate'
3+
import type { FormValues } from '@/lend/components/PageLoanCreate/types'
4+
import { DEFAULT_FORM_VALUES } from '@/lend/components/PageLoanCreate/utils'
5+
import networks from '@/lend/networks'
6+
import useStore from '@/lend/store/useStore'
7+
import { type MarketUrlParams, type PageContentProps } from '@/lend/types/lend.types'
8+
import { getLoanCreatePathname } from '@/lend/utils/utilsRouter'
9+
import { CreateLoanForm } from '@/llamalend/features/borrow/components/CreateLoanForm'
10+
import type { OnBorrowFormUpdate } from '@/llamalend/features/borrow/types'
11+
import Stack from '@mui/material/Stack'
12+
import { AppFormContentWrapper } from '@ui/AppForm'
13+
import { useNavigate } from '@ui-kit/hooks/router'
14+
import { useCreateLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags'
15+
import { t } from '@ui-kit/lib/i18n'
16+
import { TabsSwitcher, type TabOption } from '@ui-kit/shared/ui/TabsSwitcher'
17+
import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
18+
19+
const { MaxWidth } = SizesAndSpaces
20+
21+
/**
22+
* Callback that synchronizes the `ChartOhlc` component with the `RangeSlider` component in the new `BorrowTabContents`.
23+
*/
24+
const useOnFormUpdate = ({ api, market }: PageContentProps): OnBorrowFormUpdate =>
25+
useCallback(
26+
async ({ debt, userCollateral, range, slippage, leverageEnabled }) => {
27+
const { setFormValues, setStateByKeys } = useStore.getState().loanCreate
28+
const formValues: FormValues = {
29+
...DEFAULT_FORM_VALUES,
30+
n: range,
31+
debt: `${debt ?? ''}`,
32+
userCollateral: `${userCollateral ?? ''}`,
33+
}
34+
await setFormValues(api, market, formValues, `${slippage}`, leverageEnabled)
35+
setStateByKeys({ isEditLiqRange: true })
36+
},
37+
[api, market],
38+
)
39+
40+
const LoanCreate = (pageProps: PageContentProps & { params: MarketUrlParams }) => {
41+
const { rChainId, rOwmId, rFormType, market, params, api } = pageProps
42+
const push = useNavigate()
43+
const shouldUseBorrowUnifiedForm = useCreateLoanMuiForm()
44+
const onUpdate = useOnFormUpdate(pageProps)
45+
46+
const onLoanCreated = useStore((state) => state.loanCreate.onLoanCreated)
47+
const resetState = useStore((state) => state.loanCreate.resetState)
48+
49+
type Tab = 'create' | 'leverage'
50+
const tabs: TabOption<Tab>[] = useMemo(
51+
() =>
52+
shouldUseBorrowUnifiedForm
53+
? // the new borrow form contains both create and leverage functionality
54+
[{ value: 'create' as const, label: t`Borrow` }]
55+
: [
56+
{ value: 'create' as const, label: t`Create Loan` },
57+
...(market?.leverage.hasLeverage() ? [{ value: 'leverage' as const, label: t`Leverage` }] : []),
58+
],
59+
[market?.leverage, shouldUseBorrowUnifiedForm],
60+
)
61+
62+
const onCreated = useCallback(
63+
async () => api && market && (await onLoanCreated(api, market)),
64+
[api, market, onLoanCreated],
65+
)
66+
67+
return (
68+
<Stack
69+
sx={{
70+
width: { mobile: '100%', tablet: MaxWidth.actionCard },
71+
marginInline: { mobile: 'auto', desktop: 0 },
72+
}}
73+
>
74+
<TabsSwitcher
75+
variant="contained"
76+
size="medium"
77+
value={!rFormType ? 'create' : rFormType}
78+
onChange={(key) => {
79+
resetState({ rChainId, rOwmId, key })
80+
push(getLoanCreatePathname(params, rOwmId, key))
81+
}}
82+
options={tabs}
83+
/>
84+
{shouldUseBorrowUnifiedForm ? (
85+
<CreateLoanForm
86+
networks={networks}
87+
chainId={rChainId}
88+
market={market ?? undefined}
89+
onUpdate={onUpdate}
90+
onCreated={onCreated}
91+
/>
92+
) : (
93+
<Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
94+
<AppFormContentWrapper>
95+
<LoanFormCreate isLeverage={rFormType === 'leverage'} {...pageProps} />
96+
</AppFormContentWrapper>
97+
</Stack>
98+
)}
99+
</Stack>
100+
)
101+
}
102+
103+
export default LoanCreate

‎apps/main/src/lend/components/PageLoanCreate/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
import type { HealthMode } from '@/llamalend/llamalend.types'
1111
import type { Step } from '@ui/Stepper/types'
1212

13+
export type FormType = 'create' | 'vault' | 'leverage'
1314
export type StepKey = 'APPROVAL' | 'CREATE' | ''
1415
export type InpError = 'too-much' | 'too-much-max' | ''
1516

‎apps/main/src/lend/components/PageLoanManage/LoanBorrowMore/index.tsx‎

Lines changed: 10 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -21,13 +21,11 @@ import useStore from '@/lend/store/useStore'
2121
import { Api, OneWayMarketTemplate, PageContentProps } from '@/lend/types/lend.types'
2222
import { _showNoLoanFound } from '@/lend/utils/helpers'
2323
import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
24-
import { hasLeverage } from '@/llamalend/llama.utils'
2524
import type { HealthMode } from '@/llamalend/llamalend.types'
2625
import { useLoanExists } from '@/llamalend/queries/loan-exists'
2726
import Stack from '@mui/material/Stack'
2827
import Typography from '@mui/material/Typography'
2928
import AlertBox from '@ui/AlertBox'
30-
import { AppFormContentWrapper } from '@ui/AppForm'
3129
import { getActiveStep } from '@ui/Stepper/helpers'
3230
import Stepper from '@ui/Stepper/Stepper'
3331
import type { Step } from '@ui/Stepper/types'
@@ -42,9 +40,17 @@ import { SizesAndSpaces } from '@ui-kit/themes/design/1_sizes_spaces'
4240

4341
const { Spacing } = SizesAndSpaces
4442

45-
const LoanBorrowMore = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey }: PageContentProps) => {
43+
const LoanBorrowMore = ({
44+
rChainId,
45+
rOwmId,
46+
isLeverage = false,
47+
isLoaded,
48+
api,
49+
market,
50+
userActiveKey,
51+
}: PageContentProps & { isLeverage?: boolean }) => {
4652
const isSubscribed = useRef(false)
47-
const isLeverage = !!market && hasLeverage(market)
53+
4854
const activeKey = useStore((state) => state.loanBorrowMore.activeKey)
4955
const activeKeyMax = useStore((state) => state.loanBorrowMore.activeKeyMax)
5056
const detailInfoLeverage = useStore((state) => state.loanBorrowMore.detailInfoLeverage[activeKey])
@@ -430,14 +436,3 @@ const LoanBorrowMore = ({ rChainId, rOwmId, isLoaded, api, market, userActiveKey
430436
}
431437

432438
export default LoanBorrowMore
433-
434-
/**
435-
* The new implementation of LoanBorrowMore with mui isn't ready yet. For now, we wrap the old one for styling.
436-
*/
437-
export const LoanBorrowMoreWrapped = (props: PageContentProps) => (
438-
<Stack sx={{ backgroundColor: (t) => t.design.Layer[1].Fill }}>
439-
<AppFormContentWrapper>
440-
<LoanBorrowMore {...props} />
441-
</AppFormContentWrapper>
442-
</Stack>
443-
)

‎apps/main/src/lend/components/PageLoanManage/LoanCollateralAdd/index.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import useStore from '@/lend/store/useStore'
1919
import { Api, OneWayMarketTemplate, PageContentProps } from '@/lend/types/lend.types'
2020
import { _showNoLoanFound } from '@/lend/utils/helpers'
2121
import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
22-
import { AddCollateralForm } from '@/llamalend/features/manage-loan/components/AddCollateralForm'
2322
import { useLoanExists } from '@/llamalend/queries/loan-exists'
2423
import AlertBox from '@ui/AlertBox'
2524
import { getActiveStep } from '@ui/Stepper/helpers'
@@ -259,7 +258,3 @@ const LoanCollateralAdd = ({ rChainId, rOwmId, api, isLoaded, market, userActive
259258
}
260259

261260
export default LoanCollateralAdd
262-
263-
export const LoanAddCollateralTab = ({ rChainId, market, isLoaded }: PageContentProps) => (
264-
<AddCollateralForm networks={networks} chainId={rChainId} market={market} enabled={isLoaded} />
265-
)

‎apps/main/src/lend/components/PageLoanManage/LoanCollateralRemove/index.tsx‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,6 @@ import useStore from '@/lend/store/useStore'
2121
import { Api, OneWayMarketTemplate, PageContentProps } from '@/lend/types/lend.types'
2222
import { _showNoLoanFound } from '@/lend/utils/helpers'
2323
import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
24-
import { RemoveCollateralForm } from '@/llamalend/features/manage-loan/components/RemoveCollateralForm'
2524
import type { HealthMode } from '@/llamalend/llamalend.types'
2625
import { useLoanExists } from '@/llamalend/queries/loan-exists'
2726
import AlertBox from '@ui/AlertBox'
@@ -297,7 +296,3 @@ const LoanCollateralRemove = ({ rChainId, rOwmId, isLoaded, api, market, userAct
297296
}
298297

299298
export default LoanCollateralRemove
300-
301-
export const LoanRemoveCollateralTab = ({ rChainId, market, isLoaded }: PageContentProps) => (
302-
<RemoveCollateralForm networks={networks} chainId={rChainId} market={market} enabled={isLoaded} />
303-
)

‎apps/main/src/lend/components/PageLoanManage/LoanRepay/index.tsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ import { Api, FormError, type MarketUrlParams, OneWayMarketTemplate, PageContent
2020
import { _showNoLoanFound } from '@/lend/utils/helpers'
2121
import { getCollateralListPathname } from '@/lend/utils/utilsRouter'
2222
import { DEFAULT_HEALTH_MODE } from '@/llamalend/constants'
23-
import { RepayForm } from '@/llamalend/features/manage-loan/components/RepayForm'
2423
import type { HealthMode } from '@/llamalend/llamalend.types'
2524
import { useLoanExists } from '@/llamalend/queries/loan-exists'
2625
import Stack from '@mui/material/Stack'
@@ -538,11 +537,3 @@ const LoanRepay = ({
538537
}
539538

540539
export default LoanRepay
541-
542-
export const LoanRepayFromWalletTab = ({ rChainId, market, isLoaded }: PageContentProps) => (
543-
<RepayForm fromWallet networks={networks} chainId={rChainId} market={market} enabled={isLoaded} />
544-
)
545-
546-
export const LoanRepayFromCollateralTab = ({ rChainId, market, isLoaded }: PageContentProps) => (
547-
<RepayForm fromCollateral networks={networks} chainId={rChainId} market={market} enabled={isLoaded} />
548-
)

0 commit comments

Comments
 (0)