Merge branch 'main' into refactor/user-balances-tanstack-query

Author: 0xAlunara

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

@@ -17,7 +17,7 @@ import { DEFAULT_FORM_STATUS } from '@/loan/store/createLoanCollateralIncreaseSl
 import useStore from '@/loan/store/useStore'
 import { CollateralAlert, LlamaApi, Llamma } from '@/loan/types/loan.types'
 import { curveProps } from '@/loan/utils/helpers'
-import { hasV1Deleverage } from '@/loan/utils/leverage'
+import { hasDeleverage } from '@/loan/utils/leverage'
 import { getStepStatus, getTokenName } from '@/loan/utils/utilsLoan'
 import { getLoanManagePathname } from '@/loan/utils/utilsRouter'
 import Accordion from '@ui/Accordion'
@@ -439,7 +439,7 @@ const LoanCreate = ({
           <Box grid gridRowGap={2}>
             <p>{t`You can leverage your collateral up to 9x. This has the effect of repeat trading crvUSD to collateral and depositing to maximize your collateral position. Essentially, all borrowed crvUSD is utilized to purchase more collateral.`}</p>
             <p>{t`Be careful, if the collateral price dips, you would need to repay the entire amount to reclaim your initial position.`}</p>
-            {!hasV1Deleverage(llamma) && (
+            {!hasDeleverage(llamma) && (
               <p>{t`WARNING: The corresponding deleverage button is also not yet available.`}</p>
             )}
           </Box>

apps/main/src/loan/lib/apiCrvusd.ts

@@ -331,8 +331,18 @@ const loanCreate = {
   ) => {
     log('loanEstGas', llamma.collateralSymbol, collateral, debt, n, maxSlippage)
     const resp = { activeKey, isApproved: false, estimatedGas: initialGas, error: '' }
+    const userBorrowed = '0' // hardcode to zero as that's not displayed in the form
 
     try {
+      if (isLeverage && hasV2Leverage(llamma)) {
+        await llamma.leverageV2.createLoanExpectedCollateral(collateral, userBorrowed, debt, +maxSlippage)
+        resp.isApproved = await llamma.leverageV2.createLoanIsApproved(collateral, userBorrowed)
+        resp.estimatedGas = resp.isApproved
+          ? await llamma.leverageV2.estimateGas.createLoan(collateral, userBorrowed, debt, n, +maxSlippage)
+          : await llamma.leverageV2.estimateGas.createLoanApprove(collateral, userBorrowed)
+        return resp
+      }
+
       resp.isApproved = isLeverage
         ? await llamma.leverage.createLoanIsApproved(collateral)
         : await llamma.createLoanIsApproved(collateral)
@@ -390,8 +400,54 @@ const loanCreate = {
     maxSlippage: string,
   ) => {
     log('detailInfoLeverage', llamma.collateralSymbol, userCollateral, debt, n, maxSlippage)
+    const userBorrowed = '0' // hardcode to zero as that's not displayed in the form
 
     try {
+      if (hasV2Leverage(llamma)) {
+        // Expected collateral must run first to populate swap data cache used by other calls
+        const expectedCollateralResult = await llamma.leverageV2.createLoanExpectedCollateral(
+          userCollateral,
+          userBorrowed,
+          debt,
+          +maxSlippage,
+        )
+        const [
+          maxRangeResult,
+          loanBandsResult,
+          loanPricesResult,
+          loanHealthFullResult,
+          loanHealthNotFullResult,
+          priceImpactResult,
+        ] = await Promise.allSettled([
+          llamma.leverageV2.createLoanMaxRange(userCollateral, userBorrowed, debt),
+          llamma.leverageV2.createLoanBands(userCollateral, userBorrowed, debt, n),
+          llamma.leverageV2.createLoanPrices(userCollateral, userBorrowed, debt, n),
+          llamma.leverageV2.createLoanHealth(userCollateral, userBorrowed, debt, n, true),
+          llamma.leverageV2.createLoanHealth(userCollateral, userBorrowed, debt, n, false),
+          llamma.leverageV2.createLoanPriceImpact(userBorrowed, debt),
+        ])
+
+        const expectedCollateral = expectedCollateralResult
+        const priceImpact = fulfilledValue(priceImpactResult) ?? ''
+
+        return {
+          activeKey,
+          resp: {
+            collateral: expectedCollateral?.totalCollateral ?? '',
+            leverage: expectedCollateral?.leverage ?? '',
+            routeName: '',
+            maxRange: fulfilledValue(maxRangeResult) ?? null,
+            bands: reverseBands(fulfilledValue(loanBandsResult) ?? [0, 0]),
+            prices: fulfilledValue(loanPricesResult) ?? [],
+            healthFull: fulfilledValue(loanHealthFullResult) ?? '',
+            healthNotFull: fulfilledValue(loanHealthNotFullResult) ?? '',
+            priceImpact,
+            isHighImpact: +priceImpact > 0 && +maxSlippage > 0 ? +priceImpact > +maxSlippage : false,
+            error: '',
+          },
+        }
+      }
+
       const { collateral, leverage, routeIdx } = await llamma.leverage.createLoanCollateral(userCollateral, debt)
       const [
         routeNameResult,
@@ -459,21 +515,29 @@ const loanCreate = {
     const liqRangesList: LiqRange[] = []
     const liqRangesListMapper: { [n: string]: LiqRange & { sliderIdx: number } } = {}
     let sliderIdx = 0
+    const isV2LeverageSupported = hasV2Leverage(llamma)
+    const userBorrowed = '0' // hardcode to zero as that's not displayed in the form
 
     const [maxRecvsResults, loanBandsResults, loanPricesResults] = await Promise.allSettled([
       haveCollateral
         ? isLeverage
-          ? llamma.leverage.createLoanMaxRecvAllRanges(collateral)
+          ? isV2LeverageSupported
+            ? llamma.leverageV2.createLoanMaxRecvAllRanges(collateral, userBorrowed)
+            : llamma.leverage.createLoanMaxRecvAllRanges(collateral)
           : llamma.createLoanMaxRecvAllRanges(collateral)
         : null,
       haveCollateral && haveDebt
         ? isLeverage
-          ? llamma.leverage.createLoanBandsAllRanges(collateral, debt)
+          ? isV2LeverageSupported
+            ? llamma.leverageV2.createLoanBandsAllRanges(collateral, userBorrowed, debt)
+            : llamma.leverage.createLoanBandsAllRanges(collateral, debt)
           : llamma.createLoanBandsAllRanges(collateral, debt)
         : null,
       haveCollateral && haveDebt
         ? isLeverage
-          ? llamma.leverage.createLoanPricesAllRanges(collateral, debt)
+          ? isV2LeverageSupported
+            ? llamma.leverageV2.createLoanPricesAllRanges(collateral, userBorrowed, debt)
+            : llamma.leverage.createLoanPricesAllRanges(collateral, debt)
           : llamma.createLoanPricesAllRanges(collateral, debt)
         : null,
     ])
@@ -523,7 +587,19 @@ const loanCreate = {
   maxRecvLeverage: async (activeKey: string, llamma: Llamma, collateral: string, n: number) => {
     log('maxRecvLeverage', llamma.collateralSymbol, collateral, n)
     let resp: MaxRecvLeverageForm = { maxBorrowable: '', maxCollateral: '', leverage: '', routeIdx: null }
+    const userBorrowed = '0' // hardcode to zero as that's not displayed in the form
     try {
+      if (hasV2Leverage(llamma)) {
+        const result = await llamma.leverageV2.createLoanMaxRecv(collateral, userBorrowed, n)
+        resp = {
+          maxBorrowable: result.maxDebt,
+          maxCollateral: result.maxTotalCollateral,
+          leverage: result.maxLeverage,
+          routeIdx: null,
+        }
+        return { activeKey, resp, error: '' }
+      }
+
       resp = await llamma.leverage.createLoanMaxRecv(collateral, n)
       return { activeKey, resp, error: '' }
     } catch (error) {
@@ -534,9 +610,12 @@ const loanCreate = {
   approve: async (activeKey: string, provider: Provider, llamma: Llamma, isLeverage: boolean, collateral: string) => {
     log('createLoanApprove', llamma.collateralSymbol, isLeverage ? 'leverage' : '', collateral)
     const resp = { activeKey, hashes: [] as string[], error: '' }
+    const userBorrowed = '0' // hardcode to zero as that's not displayed in the form
     try {
       resp.hashes = isLeverage
-        ? await llamma.leverage.createLoanApprove(collateral)
+        ? hasV2Leverage(llamma)
+          ? await llamma.leverageV2.createLoanApprove(collateral, userBorrowed)
+          : await llamma.leverage.createLoanApprove(collateral)
         : await llamma.createLoanApprove(collateral)
       await waitForTransactions(resp.hashes, provider)
       return resp
@@ -558,9 +637,12 @@ const loanCreate = {
   ) => {
     log('loanCreate', llamma.collateralSymbol, isLeverage ? 'isLeverage' : '', collateral, debt, n, maxSlippage)
     const resp = { activeKey, hash: '', error: '' }
+    const userBorrowed = '0' // hardcode to zero as that's not displayed in the form
     try {
       resp.hash = isLeverage
-        ? await llamma.leverage.createLoan(collateral, debt, n, +maxSlippage)
+        ? hasV2Leverage(llamma)
+          ? await llamma.leverageV2.createLoan(collateral, userBorrowed, debt, n, +maxSlippage)
+          : await llamma.leverage.createLoan(collateral, debt, n, +maxSlippage)
         : await llamma.createLoan(collateral, debt, n)
       await waitForTransaction(resp.hash, provider)
       return resp

packages/curve-ui-kit/src/shared/ui/stories/LargeTokenInput.stories.tsx

@@ -106,6 +106,10 @@ const meta: Meta<typeof LargeTokenInput> = {
       control: 'number',
       description: 'Optional dollar value of the given input balance',
     },
+    children: {
+      control: 'object',
+      description: 'Optional children to be rendered below the input',
+    },
   },
   args: {
     walletBalance: TOKEN_OPTIONS[0].walletBalance,
@@ -233,4 +237,32 @@ export const WithReactNodeMessage: Story = {
   },
 }
 
+export const WithChildren: Story = {
+  args: {
+    children: (
+      <Stack
+        spacing={1}
+        sx={{
+          padding: 2,
+          backgroundColor: (t) => t.design.Layer[2].Fill,
+        }}
+      >
+        <Typography variant="bodyMBold">Additional Content</Typography>
+        <Typography variant="bodySRegular" color="textSecondary">
+          The children prop allows you to render custom content below the input. This can be useful for displaying
+          additional information, actions, or any other custom UI elements.
+        </Typography>
+      </Stack>
+    ),
+  },
+  render: (args) => <LargeTokenInputWithTokenSelector {...args} />,
+  parameters: {
+    docs: {
+      description: {
+        story: 'Large token input with custom children content rendered below the input',
+      },
+    },
+  },
+}
+
 export default meta