feat: loan management form add collateral #1715

0xPearce · 2025-11-28T18:35:59Z

update the add collateral form to match the design
added collateral, prevCollateral, prevHealth, prevDebt and prevLTV to the accordion
added input and balance in USD
prev and current leverage field coming soon, waiting for llamalend.js (there are 2 tickets for it)
refactored getErrorMessage from /loan and /lend int /llamalend

Empty	With User Value

Gracefully handle user rejection (unlike my Ex):

vercel · 2025-11-28T18:36:04Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Review	Updated (UTC)
curve-dapp	Ready	Preview, Comment	Dec 13, 2025 3:19pm
curve-dapp-storybook	Ready	Preview, Comment	Dec 13, 2025 3:19pm

apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx

apps/main/src/llamalend/widgets/manage-loan/LoanInfoAccordion.tsx

apps/main/src/llamalend/widgets/manage-loan/LoanFormTokenInput.tsx

apps/main/src/llamalend/queries/utils.ts

apps/main/src/llamalend/widgets/manage-loan/LoanInfoAccordion.tsx

…n suite

packages/curve-ui-kit/src/shared/ui/ActionInfo.tsx

apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx

packages/curve-ui-kit/src/shared/ui/ActionInfo.tsx

apps/main/src/llamalend/helpers.ts

apps/main/src/llamalend/queries/add-collateral/add-collateral-gas-estimate.query.ts

0xAlunara · 2025-12-11T15:50:29Z

apps/main/src/llamalend/queries/user-state.query.ts

 import { userMarketValidationSuite } from '@ui-kit/lib/model/query/user-market-validation'
 import type { Decimal } from '@ui-kit/utils'

+export type UserState = {


Suggested change

export type UserState = {

type QueryData<TUseQuery extends (...args: any[]) => any> = NonNullable<ReturnType<TUseQuery>['data']>

export type UserState = QueryData<typeof useUserState>

Personally I'd rather deduce types implicitly rather than write types as bookkeeping, prevents having to define things twice or more.
We can probably put the QueryData type in a shared places, perhaps in curve-ui-kit\src\lib\queries\types.ts.

Extracting and exporting whatever's returned by queries can be be defined simply as export type UserState = QueryData<typeof useUserState>
Don't forget to remove the Promise<UserState> return type from the queryFn.

Thoughts @DanielSchiavini?

(not a blocker btw, just my personal opinion)

Sounds cleaner and more maintanable to me

apps/main/src/llamalend/queries/utils.ts

apps/main/src/llamalend/widgets/manage-loan/LoanInfoAccordion.tsx

apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx

…pproved

…adability

feat: loan management form remove collateral

0xAlunara · 2025-12-13T17:25:28Z

packages/curve-ui-kit/src/shared/ui/ActionInfo.tsx


  const errorMessage = (typeof error === 'object' && error?.message) || (typeof error === 'string' && error)
-  const showPrevValue = value != null && prevValue != null
+  const showPrevValue = isSet(value) && isSet(prevValue)


Wouldn't const showPrevValue = !!value && !!prevValue have sufficed? 😄
Or something along those lines

Well if value or prevValue is 0, you still want to treat it as a truthy value. That said, you could argue that we don’t use numbers anymore, only Decimal. This approach is more robust imo

This is incorrect though, cause if value and prevValue are ReactNode, then values like false should also be hidden

0xAlunara · 2025-12-13T17:29:24Z

Should we abbreviate the debt and collateral numbers with 'k' and such as we do in a lot of places? These big numbers look a bit ugly. But you could argue that you want the 'exact' data 🤔

Should we also get rid of the 'max removable' helper message? It offers the exact same functionality now as with the old walletBalance that has turned into a llama positionBalance. This holds only for removal I think.

c2tp.eth

0xPearce · 2025-12-15T08:18:52Z

Should we abbreviate the debt and collateral numbers with 'k' and such as we do in a lot of places? These big numbers look a bit ugly. But you could argue that you want the 'exact' data 🤔

Should we also get rid of the 'max removable' helper message? It offers the exact same functionality now as with the old walletBalance that has turned into a llama positionBalance. This holds only for removal I think.

c2tp.eth

Regarding the collateral, the point was to show the exact data. If I add a small amount of BTC to my position, it could get lost due to rounding, which would make the accordion information not very useful.

Yes, that’s definitely something I wanted to address as well. We currently have three different ways to select the max removable amount: the helper message, the position balance, and the MAX button. We should probably remove one or two of these, perhaps the helper message and the MAX button?

DanielSchiavini · 2025-12-15T10:24:11Z

apps/main/src/llamalend/features/manage-loan/hooks/useAddCollateralForm.ts

+        const value =
+          values.userCollateral != null &&
+          state?.collateral != null &&
+          decimal(new BigNumber(values.userCollateral).plus(state.collateral).toString())
+        return value ? { value, tokenSymbol: collateralToken?.symbol } : null


Can't we just

Suggested change

const value =

values.userCollateral != null &&

state?.collateral != null &&

decimal(new BigNumber(values.userCollateral).plus(state.collateral).toString())

return value ? { value, tokenSymbol: collateralToken?.symbol } : null

values.userCollateral && state?.collateral && {

value: decimal(new BigNumber(values.userCollateral).plus(state.collateral)),

tokenSymbol: collateralToken?.symbol

}

Note that decimal should support BigNumber imo

DanielSchiavini · 2025-12-15T10:25:08Z

apps/main/src/llamalend/features/manage-loan/hooks/useRemoveCollateralForm.ts

+          state?.collateral != null &&
+          values.userCollateral != null &&
+          decimal(
+            BigNumber.max(new BigNumber(state.collateral).minus(new BigNumber(values.userCollateral)), '0').toString(),


Suggested change

BigNumber.max(new BigNumber(state.collateral).minus(new BigNumber(values.userCollateral)), '0').toString(),

BigNumber.max(0, new BigNumber(state.collateral).minus(new BigNumber(values.userCollateral))),

DanielSchiavini · 2025-12-15T10:31:16Z

apps/main/src/llamalend/widgets/manage-loan/LoanFormTokenInput.tsx

-        () => ({ balance, symbol: token?.symbol, loading: isBalanceLoading }),
-        [balance, isBalanceLoading, token?.symbol],
-      )}
+      walletBalance={walletBalance}


Argh this is not a real wallet balance anymore, and tbh LargeTokenInput should not care.
As discussed, for future developments let's try to pass generic ReactNodes

DanielSchiavini · 2025-12-15T10:33:23Z

apps/main/src/llamalend/widgets/manage-loan/LoanFormTokenInput.tsx

+      balance: position ? position.data : balance,
+      symbol: token?.symbol,
+      loading: position ? position.isLoading : isBalanceLoading,


Suggested change

balance: position ? position.data : balance,

symbol: token?.symbol,

loading: position ? position.isLoading : isBalanceLoading,

balance: position?.data ?? balance,

symbol: token?.symbol,

loading: position?.isLoading ?? isBalanceLoading,

DanielSchiavini · 2025-12-15T10:33:49Z

apps/main/src/llamalend/widgets/manage-loan/LoanFormTokenInput.tsx

+    tokenAddress: token?.address,
+  })
+
+  const position = positionBalance?.position


Suggested change

const position = positionBalance?.position

const { position, tooltip } = positionBalance ?? {}

DanielSchiavini · 2025-12-15T10:38:30Z

packages/curve-ui-kit/src/shared/ui/ActionInfo.tsx


  const errorMessage = (typeof error === 'object' && error?.message) || (typeof error === 'string' && error)
-  const showPrevValue = value != null && prevValue != null
+  const showPrevValue = isSet(value) && isSet(prevValue)


This is incorrect though, cause if value and prevValue are ReactNode, then values like false should also be hidden

DanielSchiavini · 2025-12-15T10:38:44Z

packages/curve-ui-kit/src/shared/ui/ActionInfo.tsx

  large: 'headingSBold',
 } as const satisfies Record<ActionInfoSize, TypographyVariantKey>

+const isSet = (v: ReactNode) => v != null && v !== ''


As mentioned below, ReactNodes can be false too

Suggested change

const isSet = (v: ReactNode) => v != null && v !== ''

const isSet = (v: ReactNode) => v || v === 0

DanielSchiavini · 2025-12-15T10:41:38Z

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

   */
  tokenSelector?: ReactNode

+  // TODO: rename to just "balance" because multipurpose now (walletBalance, positionBalance ...)


yeah there is already a balance prop

Suggested change

// TODO: rename to just "balance" because multipurpose now (walletBalance, positionBalance ...)

// TODO: receive a `maxBalance` ReactNode to allow anything to be injected

0xPearce added 5 commits November 27, 2025 14:27

feat: layer 1 fill to collateral sub tabs

5120611

feat: add collateral usd rate for input and token balance

c2f1d4f

feat: input balance usd

49c3571

refactor: loan info accordion with prev and current helper

1fb7656

feat: previous collateral, debt, ltv and health to form

23ce0e1

0xPearce commented Nov 28, 2025

View reviewed changes

apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx Outdated Show resolved Hide resolved

apps/main/src/llamalend/widgets/manage-loan/LoanInfoAccordion.tsx Outdated Show resolved Hide resolved

0xPearce requested a review from DanielSchiavini December 1, 2025 10:42

DanielSchiavini reviewed Dec 1, 2025

View reviewed changes

0xPearce added 4 commits December 1, 2025 12:31

refactor: handle prev and current values in the action info

2b8fffb

fix: token address already handled by validation suite

6c2bc46

feat: added collateral greater than wallet balance error to validatio…

cebd7b7

…n suite

feat: improve add collateral button label

9dcfe73

vercel bot deployed to Preview – curve-dapp-storybook December 1, 2025 15:49 View deployment

vercel bot deployed to Preview – curve-dapp December 1, 2025 15:49 View deployment

fix: add collateral approve estimate gas query

1e876e2

vercel bot deployed to Preview – curve-dapp December 1, 2025 16:33 View deployment

vercel bot deployed to Preview – curve-dapp-storybook December 1, 2025 16:33 View deployment

DanielSchiavini reviewed Dec 1, 2025

View reviewed changes

packages/curve-ui-kit/src/shared/ui/ActionInfo.tsx Outdated Show resolved Hide resolved

apps/main/src/llamalend/features/manage-loan/components/AddCollateralForm.tsx Outdated Show resolved Hide resolved

DanielSchiavini reviewed Dec 1, 2025

View reviewed changes

packages/curve-ui-kit/src/shared/ui/ActionInfo.tsx Outdated Show resolved Hide resolved

feat: remove min height from AppFormContentWrapper

b99b20d

vercel bot deployed to Preview – curve-dapp-storybook December 2, 2025 08:51 View deployment

vercel bot deployed to Preview – curve-dapp December 2, 2025 08:51 View deployment

feat: fire icon to transaction action info

d098bf6

vercel bot deployed to Preview – curve-dapp-storybook December 2, 2025 09:39 View deployment

vercel bot deployed to Preview – curve-dapp December 2, 2025 09:39 View deployment

0xPearce added 2 commits December 2, 2025 12:20

feat: layer 1 fill subtabs for lend markets

ec65aa4

fix: review minor changes and optimizations

0486409

vercel bot deployed to Preview – curve-dapp-storybook December 2, 2025 11:54 View deployment

vercel bot deployed to Preview – curve-dapp December 2, 2025 11:54 View deployment

vercel bot deployed to Preview – curve-dapp December 11, 2025 13:29 View deployment

Merge branch 'feat/add-collateral-form' into feat/remove-collateral-form

b44d053

0xAlunara reviewed Dec 11, 2025

View reviewed changes

refactor: LoanInfoAccordion ternary and gaps

c88be3b

vercel bot deployed to Preview – curve-dapp December 12, 2025 15:22 View deployment

vercel bot deployed to Preview – curve-dapp-storybook December 12, 2025 15:22 View deployment

DanielSchiavini previously approved these changes Dec 12, 2025

View reviewed changes

0xPearce added 5 commits December 13, 2025 12:13

feat: combine gas estimation for approval and add collateral if not a…

c390786

…pproved

refactor: deduce userState type from query

fff1f4e

fix: check for empty string in Action Info

1cddcf3

refactor: tokenSymbol part of query's data

7b9be3a

refactor: combine query state

4ba0d56

0xPearce dismissed DanielSchiavini’s stale review via 4ba0d56 December 13, 2025 14:11

vercel bot deployed to Preview – curve-dapp December 13, 2025 14:13 View deployment

vercel bot deployed to Preview – curve-dapp-storybook December 13, 2025 14:13 View deployment

Merge branch 'main' into feat/add-collateral-form

6ee365c

vercel bot deployed to Preview – curve-dapp-storybook December 13, 2025 14:16 View deployment

vercel bot deployed to Preview – curve-dapp December 13, 2025 14:16 View deployment

0xPearce added 3 commits December 13, 2025 15:16

Merge branch 'feat/add-collateral-form' into feat/remove-collateral-form

40f91f8

fix: tokenSymbol part of query's data

64c86d0

refactor: hardcode LlamaIcon for position balance and improve code re…

88f912a

…adability

0xPearce added Merge on Monday and removed do not merge labels Dec 13, 2025

Merge pull request #1748 from curvefi/feat/remove-collateral-form

2a4c061

feat: loan management form remove collateral

vercel bot deployed to Preview – curve-dapp-storybook December 13, 2025 15:19 View deployment

vercel bot deployed to Preview – curve-dapp December 13, 2025 15:19 View deployment

0xAlunara reviewed Dec 13, 2025

View reviewed changes

DanielSchiavini reviewed Dec 15, 2025

View reviewed changes

	export type UserState = {
	type QueryData<TUseQuery extends (...args: any[]) => any> = NonNullable<ReturnType<TUseQuery>['data']>
	export type UserState = QueryData<typeof useUserState>

	BigNumber.max(new BigNumber(state.collateral).minus(new BigNumber(values.userCollateral)), '0').toString(),
	BigNumber.max(0, new BigNumber(state.collateral).minus(new BigNumber(values.userCollateral))),

	const position = positionBalance?.position
	const { position, tooltip } = positionBalance ?? {}

	const isSet = (v: ReactNode) => v != null && v !== ''
	const isSet = (v: ReactNode) => v \|\| v === 0

	// TODO: rename to just "balance" because multipurpose now (walletBalance, positionBalance ...)
	// TODO: receive a `maxBalance` ReactNode to allow anything to be injected

feat: loan management form add collateral #1715

Are you sure you want to change the base?

feat: loan management form add collateral #1715

Uh oh!

Conversation

0xPearce commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Nov 28, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

0xAlunara Dec 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

0xAlunara commented Dec 13, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

0xPearce commented Dec 15, 2025

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

0xPearce commented Nov 28, 2025 •

edited

Loading

vercel bot commented Nov 28, 2025 •

edited

Loading

0xAlunara Dec 11, 2025 •

edited

Loading

0xAlunara commented Dec 13, 2025 •

edited

Loading