|
| 1 | +import { useCallback } 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 { CreateLoanForm } from '@/llamalend/features/borrow/components/CreateLoanForm' |
| 9 | +import type { OnBorrowFormUpdate } from '@/llamalend/features/borrow/types' |
| 10 | +import { hasLeverage } from '@/llamalend/llama.utils' |
| 11 | +import { useCreateLoanMuiForm } from '@ui-kit/hooks/useFeatureFlags' |
| 12 | +import { t } from '@ui-kit/lib/i18n' |
| 13 | +import { type FormTab, FormTabs } from '@ui-kit/shared/ui/FormTabs/FormTabs' |
| 14 | + |
| 15 | +type CreateLoanProps = PageContentProps<MarketUrlParams> |
| 16 | + |
| 17 | +/** |
| 18 | + * Callback that synchronizes the `ChartOhlc` component with the `RangeSlider` component in the new `BorrowTabContents`. |
| 19 | + */ |
| 20 | +const useOnFormUpdate = ({ api, market }: Pick<CreateLoanProps, 'api' | 'market'>): OnBorrowFormUpdate => |
| 21 | + useCallback( |
| 22 | + async ({ debt, userCollateral, range, slippage, leverageEnabled }) => { |
| 23 | + const { setFormValues, setStateByKeys } = useStore.getState().loanCreate |
| 24 | + const formValues: FormValues = { |
| 25 | + ...DEFAULT_FORM_VALUES, |
| 26 | + n: range, |
| 27 | + debt: `${debt ?? ''}`, |
| 28 | + userCollateral: `${userCollateral ?? ''}`, |
| 29 | + } |
| 30 | + await setFormValues(api, market, formValues, `${slippage}`, leverageEnabled) |
| 31 | + setStateByKeys({ isEditLiqRange: true }) |
| 32 | + }, |
| 33 | + [api, market], |
| 34 | + ) |
| 35 | + |
| 36 | +function CreateLoanTab({ market, api, rChainId }: CreateLoanProps) { |
| 37 | + const onLoanCreated = useStore((state) => state.loanCreate.onLoanCreated) |
| 38 | + const onCreated = useCallback( |
| 39 | + async () => api && market && (await onLoanCreated(api, market)), |
| 40 | + [api, market, onLoanCreated], |
| 41 | + ) |
| 42 | + const onUpdate = useOnFormUpdate({ market, api }) |
| 43 | + return ( |
| 44 | + <CreateLoanForm networks={networks} chainId={rChainId} market={market} onUpdate={onUpdate} onCreated={onCreated} /> |
| 45 | + ) |
| 46 | +} |
| 47 | + |
| 48 | +const LendCreateTabsNewMenu = [ |
| 49 | + { value: 'create', label: t`Borrow`, component: CreateLoanTab }, |
| 50 | +] satisfies FormTab<CreateLoanProps>[] |
| 51 | + |
| 52 | +const LendCreateTabsOldMenu = [ |
| 53 | + { value: 'create', label: t`Create Loan`, component: LoanFormCreate }, |
| 54 | + { |
| 55 | + value: 'leverage', |
| 56 | + label: t`Leverage`, |
| 57 | + component: (p) => <LoanFormCreate {...p} isLeverage />, |
| 58 | + visible: ({ market }) => market && hasLeverage(market), |
| 59 | + }, |
| 60 | +] satisfies FormTab<CreateLoanProps>[] |
| 61 | + |
| 62 | +export const LoanCreateTabs = (pageProps: CreateLoanProps) => { |
| 63 | + const menu = useCreateLoanMuiForm() ? LendCreateTabsNewMenu : LendCreateTabsOldMenu |
| 64 | + const shouldWrap = menu === LendCreateTabsOldMenu |
| 65 | + return <FormTabs params={pageProps} menu={menu} shouldWrap={shouldWrap} /> |
| 66 | +} |
0 commit comments