From 74171f9f1c3bf09fd415e09f154dd9621da71c2d Mon Sep 17 00:00:00 2001
From: KillariDev <13102010+KillariDev@users.noreply.github.com>
Date: Tue, 19 May 2026 07:54:51 +0000
Subject: [PATCH] Rename REP deposit UI to collateral terminology

- Update labels, prompts, and liquidation messages to say REP collateral
- Move approval guidance into the deposit control and add wallet balance context
- Refresh security vault and pool tests for the new wording
---
 ui/ts/components/LiquidationModal.tsx         |  2 +-
 .../SecurityPoolWorkflowSection.tsx           | 16 +++---
 ui/ts/components/SecurityVaultSection.tsx     |  4 +-
 ui/ts/components/VaultMetricGrid.tsx          |  2 +-
 ui/ts/hooks/useSecurityVaultOperations.ts     |  4 +-
 ui/ts/lib/liquidation.ts                      |  4 +-
 .../securityPoolWorkflowSection.test.tsx      | 50 ++++++++++++++++++-
 ui/ts/tests/securityPoolsSection.test.ts      |  2 +-
 ui/ts/tests/securityVault.test.ts             |  4 +-
 ui/ts/tests/securityVaultSection.test.tsx     |  1 +
 10 files changed, 70 insertions(+), 19 deletions(-)

diff --git a/ui/ts/components/LiquidationModal.tsx b/ui/ts/components/LiquidationModal.tsx
index fc8328d3..36be2160 100644
--- a/ui/ts/components/LiquidationModal.tsx
+++ b/ui/ts/components/LiquidationModal.tsx
@@ -332,7 +332,7 @@ export function LiquidationModal({
 							</div>
 						</div>
 						<div className='workflow-metric-grid'>
-							<MetricField label='REP Deposit'>
+							<MetricField label='REP Collateral'>
 								<CurrencyValue value={liquidationSimulation.callerAfter.repDepositShare} suffix='REP' />
 							</MetricField>
 							<MetricField label='Security Bond Allowance'>
diff --git a/ui/ts/components/SecurityPoolWorkflowSection.tsx b/ui/ts/components/SecurityPoolWorkflowSection.tsx
index 9b8860ac..5d0d192b 100644
--- a/ui/ts/components/SecurityPoolWorkflowSection.tsx
+++ b/ui/ts/components/SecurityPoolWorkflowSection.tsx
@@ -269,7 +269,7 @@ export function SecurityPoolWorkflowSection({
 	const hasValidOraclePrice = hasValidSecurityVaultOraclePrice(selectedVaultDetails?.managerAddress, currentPoolOracleManagerDetails)
 	const depositAmount = (() => {
 		try {
-			return parseRepAmountInput(securityVault.securityVaultForm.depositAmount ?? '', 'REP deposit amount')
+			return parseRepAmountInput(securityVault.securityVaultForm.depositAmount ?? '', 'REP collateral amount')
 		} catch {
 			return undefined
 		}
@@ -347,7 +347,7 @@ export function SecurityPoolWorkflowSection({
 	const vaultReadinessActions = getSecurityPoolVaultReadinessActions([
 		{
 			actionLabel: 'Deposit REP',
-			description: 'Add REP to the selected vault, including approval from inside the operation.',
+			description: 'Add REP to the selected vault.',
 			key: 'deposit-rep',
 			onAction: () => setVaultActionModal('deposit-rep'),
 			readiness: depositGuardMessage === undefined ? 'ready' : 'warning',
@@ -569,7 +569,7 @@ export function SecurityPoolWorkflowSection({
 								<MetricField label='Open Interest Fee / Year'>
 									<CurrencyValue value={openInterestFeePerYearBigint(loadedSelectedPool.currentRetentionRate)} suffix='%' />
 								</MetricField>
-								<MetricField label='Total REP Deposited'>
+								<MetricField label='Total REP Collateral'>
 									<CurrencyValue value={loadedSelectedPool.totalRepDeposit} suffix='REP' />
 								</MetricField>
 								<MetricField label='Total Security Bond Allowance'>
@@ -888,7 +888,7 @@ export function SecurityPoolWorkflowSection({
 				</div>
 			</section>
 
-			<OperationModal isOpen={vaultActionModal === 'deposit-rep'} onClose={() => setVaultActionModal(undefined)} title='Deposit REP' description='Review the selected vault, complete REP approval if needed, then deposit REP.'>
+			<OperationModal isOpen={vaultActionModal === 'deposit-rep'} onClose={() => setVaultActionModal(undefined)} title='Deposit REP' description='Review the selected vault, then deposit REP.'>
 				{selectedVaultDetails === undefined ? <p className='detail'>Refresh the selected vault before depositing REP.</p> : null}
 				{selectedVaultDetails === undefined ? null : (
 					<>
@@ -904,7 +904,7 @@ export function SecurityPoolWorkflowSection({
 							variant='embedded'
 						/>
 						<label className='field'>
-							<span>REP Deposit Amount</span>
+							<span>REP Collateral Amount</span>
 							<div className='field-inline'>
 								<FormInput className='field-inline-input' value={securityVault.securityVaultForm.depositAmount} onInput={event => securityVault.onSecurityVaultFormChange({ depositAmount: event.currentTarget.value })} />
 								<button
@@ -920,6 +920,11 @@ export function SecurityPoolWorkflowSection({
 								</button>
 							</div>
 						</label>
+						<div className='workflow-metric-grid'>
+							<MetricField label='Wallet REP'>
+								<CurrencyValue value={securityVault.securityVaultRepBalance} suffix='REP' />
+							</MetricField>
+						</div>
 						<TokenApprovalControl
 							actionLabel='depositing REP'
 							allowanceError={securityVault.securityVaultRepApproval.error}
@@ -937,7 +942,6 @@ export function SecurityPoolWorkflowSection({
 						<RequirementsChecklist
 							items={[
 								{ key: 'owned', label: 'Selected vault is owned by the connected account', resolved: selectedVaultIsOwnedByAccount },
-								{ key: 'approval', label: 'REP approval is sufficient for the deposit amount', resolved: approvalRequirement.hasSufficientApproval, ...(approvalRequirement.hasSufficientApproval ? {} : { detail: 'Approve REP inside this modal before depositing.' }) },
 								{ key: 'balance', label: 'Wallet REP balance covers the deposit amount', resolved: repBalanceGap === undefined || repBalanceGap <= 0n, ...(repBalanceGap !== undefined && repBalanceGap > 0n ? { detail: `Need ${formatCurrencyBalance(repBalanceGap)} more REP.` } : {}) },
 								{ key: 'minimum', label: 'First deposit meets the vault minimum', resolved: !isDepositBelowMinimum, ...(isDepositBelowMinimum ? { detail: `First deposits must be at least ${formatCurrencyBalance(MIN_SECURITY_VAULT_REP_DEPOSIT)} REP.` } : {}) },
 							]}
diff --git a/ui/ts/components/SecurityVaultSection.tsx b/ui/ts/components/SecurityVaultSection.tsx
index 27ebc444..ddf7a03e 100644
--- a/ui/ts/components/SecurityVaultSection.tsx
+++ b/ui/ts/components/SecurityVaultSection.tsx
@@ -106,7 +106,7 @@ export function SecurityVaultSection({
 	const selectedVaultIsOwnedByAccount = isSelectedVaultOwnedByAccountHelper(selectedVaultAddress, accountState.address)
 	const depositAmount = (() => {
 		try {
-			return parseRepAmountInput(normalizedSecurityVaultForm.depositAmount, 'REP deposit amount')
+			return parseRepAmountInput(normalizedSecurityVaultForm.depositAmount, 'REP collateral amount')
 		} catch {
 			return undefined
 		}
@@ -287,7 +287,7 @@ export function SecurityVaultSection({
 
 			<SectionBlock title='Deposit REP'>
 				<label className='field'>
-					<span>REP Deposit Amount</span>
+					<span>REP Collateral Amount</span>
 					<div className='field-inline'>
 						<FormInput className='field-inline-input' value={normalizedSecurityVaultForm.depositAmount} onInput={event => onSecurityVaultFormChange({ depositAmount: event.currentTarget.value })} />
 						<button
diff --git a/ui/ts/components/VaultMetricGrid.tsx b/ui/ts/components/VaultMetricGrid.tsx
index f8df5c12..d725701e 100644
--- a/ui/ts/components/VaultMetricGrid.tsx
+++ b/ui/ts/components/VaultMetricGrid.tsx
@@ -12,7 +12,7 @@ export function VaultMetricGrid({ approvedRep, className = '', lockedRepInEscala
 
 	return (
 		<div className={[gridClassName, className].filter(Boolean).join(' ')}>
-			<MetricField className={metricClassName} label='Rep Deposit'>
+			<MetricField className={metricClassName} label='REP Collateral'>
 				<CurrencyValue value={repDepositShare} suffix='REP' />
 			</MetricField>
 			{approvedRep === undefined ? undefined : (
diff --git a/ui/ts/hooks/useSecurityVaultOperations.ts b/ui/ts/hooks/useSecurityVaultOperations.ts
index cd514036..767e14c7 100644
--- a/ui/ts/hooks/useSecurityVaultOperations.ts
+++ b/ui/ts/hooks/useSecurityVaultOperations.ts
@@ -183,7 +183,7 @@ export function useSecurityVaultOperations({ accountAddress, enabled, onTransact
 			async (vaultAddress, securityPoolAddress) => {
 				const details = await loadExistingSecurityVaultDetails(securityPoolAddress, vaultAddress, 'Security pool does not exist')
 				if (details === undefined) return undefined
-				const approvalAmount = amount ?? parseRepAmountInput(securityVaultForm.value.depositAmount, 'REP deposit amount')
+				const approvalAmount = amount ?? parseRepAmountInput(securityVaultForm.value.depositAmount, 'REP collateral amount')
 				return await approveErc20(createWalletWriteClient(vaultAddress, { onTransactionSubmitted }), details.repToken, securityPoolAddress, approvalAmount, 'approveRep')
 			},
 			'Failed to approve REP',
@@ -199,7 +199,7 @@ export function useSecurityVaultOperations({ accountAddress, enabled, onTransact
 		await runVaultAction(
 			'depositRep',
 			async (vaultAddress, securityPoolAddress) => {
-				const depositAmount = parseRepAmountInput(securityVaultForm.value.depositAmount, 'REP deposit amount')
+				const depositAmount = parseRepAmountInput(securityVaultForm.value.depositAmount, 'REP collateral amount')
 				const details = await loadExistingSecurityVaultDetails(securityPoolAddress, vaultAddress, 'Security pool does not exist')
 				if (details === undefined) return undefined
 				const currentRepBalance = await loadErc20Balance(createConnectedReadClient(), details.repToken, vaultAddress)
diff --git a/ui/ts/lib/liquidation.ts b/ui/ts/lib/liquidation.ts
index 38b2e6bc..79f2c9ce 100644
--- a/ui/ts/lib/liquidation.ts
+++ b/ui/ts/lib/liquidation.ts
@@ -97,9 +97,9 @@ export function getLiquidationFailureReason({
 	})
 	if (simulation.debtToMove <= 0n) return 'This vault has no debt available to move.'
 	if (isVaultLiquidatable(repPerEthPrice, simulation.callerAfter.securityBondAllowance, simulation.callerAfter.repDepositShare, securityMultiplier)) return 'The caller vault would become liquidatable after this liquidation.'
-	if (simulation.targetAfter.repDepositShare !== 0n && simulation.targetAfter.repDepositShare < MIN_REP_DEPOSIT) return 'The target vault would fall below the minimum REP deposit after liquidation.'
+	if (simulation.targetAfter.repDepositShare !== 0n && simulation.targetAfter.repDepositShare < MIN_REP_DEPOSIT) return 'The target vault would fall below the minimum REP collateral after liquidation.'
 	if (simulation.targetAfter.securityBondAllowance !== 0n && simulation.targetAfter.securityBondAllowance < MIN_SECURITY_BOND_DEBT) return 'The target vault would fall below the minimum security bond allowance after liquidation.'
-	if (simulation.callerAfter.repDepositShare < MIN_REP_DEPOSIT) return 'The caller vault would remain below the minimum REP deposit after liquidation.'
+	if (simulation.callerAfter.repDepositShare < MIN_REP_DEPOSIT) return 'The caller vault would remain below the minimum REP collateral after liquidation.'
 	if (simulation.callerAfter.securityBondAllowance < MIN_SECURITY_BOND_DEBT) return 'The caller vault would remain below the minimum security bond allowance after liquidation.'
 	return undefined
 }
diff --git a/ui/ts/tests/securityPoolWorkflowSection.test.tsx b/ui/ts/tests/securityPoolWorkflowSection.test.tsx
index 7a8b2e2f..12b991a7 100644
--- a/ui/ts/tests/securityPoolWorkflowSection.test.tsx
+++ b/ui/ts/tests/securityPoolWorkflowSection.test.tsx
@@ -390,7 +390,7 @@ describe('SecurityPoolWorkflowSection', () => {
 		expect(documentQueries.queryByRole('heading', { name: 'Selected Pool Summary' })).toBeNull()
 		expect(documentQueries.queryByText('Workflow')).toBeNull()
 		expect(documentQueries.getByText('Question description')).not.toBeNull()
-		expect(documentQueries.getByText('Total REP Deposited')).not.toBeNull()
+		expect(documentQueries.getByText('Total REP Collateral')).not.toBeNull()
 		expect(documentQueries.getByText('Open Oracle Price')).not.toBeNull()
 		expect(documentQueries.queryByText('Oracle Expires In')).toBeNull()
 		const selectedPoolContext = document.body.querySelector('.sticky-object-context.static')
@@ -398,7 +398,7 @@ describe('SecurityPoolWorkflowSection', () => {
 			throw new Error('Expected a non-sticky selected pool context card')
 		}
 		const lookupLabel = within(selectedPoolContext).getByText('Security Pool Address')
-		const firstSummaryMetric = within(selectedPoolContext).getByText('Total REP Deposited')
+		const firstSummaryMetric = within(selectedPoolContext).getByText('Total REP Collateral')
 		const lookupPosition = selectedPoolContext.textContent?.indexOf(lookupLabel.textContent ?? '') ?? -1
 		const summaryPosition = selectedPoolContext.textContent?.indexOf(firstSummaryMetric.textContent ?? '') ?? -1
 		expect(lookupPosition).toBeGreaterThanOrEqual(0)
@@ -853,6 +853,52 @@ describe('SecurityPoolWorkflowSection', () => {
 		expectTransactionButtonDisabled(document.body, 'Claim Fees', 'Refresh the selected vault first.')
 	})
 
+	test('keeps REP approval guidance inside the approval control in the deposit modal', async () => {
+		const selectedPoolAddress = zeroAddress
+		const renderedComponent = await renderIntoDocument(
+			<SecurityPoolWorkflowSection
+				{...createSecurityPoolWorkflowProps({
+					accountState: createAccountState(),
+					securityPoolAddress: selectedPoolAddress,
+					securityPools: [createSelectedPool({ securityPoolAddress: selectedPoolAddress })],
+					securityVault: createSecurityVaultProps({
+						securityVaultDetails: createSecurityVaultDetails({ securityPoolAddress: selectedPoolAddress }),
+						securityVaultForm: {
+							depositAmount: '10',
+							repWithdrawAmount: '',
+							securityBondAllowanceAmount: '',
+							securityPoolAddress: selectedPoolAddress,
+							selectedVaultAddress: zeroAddress,
+						},
+						securityVaultRepBalance: 25n * 10n ** 18n,
+						securityVaultRepApproval: {
+							error: undefined,
+							loading: false,
+							value: 0n,
+						},
+					}),
+					selectedPoolView: 'vaults',
+				})}
+				showHeader={false}
+			/>,
+		)
+		cleanupRenderedComponent = renderedComponent.cleanup
+
+		const documentQueries = within(document.body)
+		await act(() => {
+			fireEvent.click(documentQueries.getAllByRole('button', { name: 'Deposit REP' })[0] as HTMLElement)
+		})
+
+		const depositDialog = documentQueries.getByRole('dialog', { name: 'Deposit REP' })
+		const modalQueries = within(depositDialog)
+		expect(modalQueries.queryByText('Review the selected vault, complete REP approval if needed, then deposit REP.')).toBeNull()
+		expect(modalQueries.queryByText('REP approval is sufficient for the deposit amount')).toBeNull()
+		expect(modalQueries.queryByText('Approve REP inside this modal before depositing.')).toBeNull()
+		expect(modalQueries.getByText('Wallet REP')).not.toBeNull()
+		expect(modalQueries.getByText('Required REP')).not.toBeNull()
+		expect(modalQueries.getByText('REP Approval Amount')).not.toBeNull()
+	})
+
 	test('caps REP withdrawals to the oracle-backed amount in the seeded security-pool shape', async () => {
 		const selectedPoolAddress = zeroAddress
 		const renderedComponent = await renderIntoDocument(
diff --git a/ui/ts/tests/securityPoolsSection.test.ts b/ui/ts/tests/securityPoolsSection.test.ts
index 4a69719c..6e93049f 100644
--- a/ui/ts/tests/securityPoolsSection.test.ts
+++ b/ui/ts/tests/securityPoolsSection.test.ts
@@ -537,7 +537,7 @@ void describe('SecurityPoolsSection', () => {
 		expect(contextQueries.queryByRole('tab', { name: 'Operate' })).toBeNull()
 		expect(documentQueries.queryByRole('heading', { name: 'Security pools' })).toBeNull()
 		const lookupLabel = contextQueries.getByText('Security Pool Address')
-		const summaryMetric = contextQueries.getByText('Total REP Deposited')
+		const summaryMetric = contextQueries.getByText('Total REP Collateral')
 		const lookupPosition = selectedPoolContext.textContent?.indexOf(lookupLabel.textContent ?? '') ?? -1
 		const summaryPosition = selectedPoolContext.textContent?.indexOf(summaryMetric.textContent ?? '') ?? -1
 		expect(lookupPosition).toBeGreaterThanOrEqual(0)
diff --git a/ui/ts/tests/securityVault.test.ts b/ui/ts/tests/securityVault.test.ts
index 017bb8be..14c878f9 100644
--- a/ui/ts/tests/securityVault.test.ts
+++ b/ui/ts/tests/securityVault.test.ts
@@ -27,8 +27,8 @@ void describe('security vault helpers', () => {
 	})
 
 	void test('parses security vault REP inputs as 18-decimal token amounts', () => {
-		expect(parseRepAmountInput('10', 'REP deposit amount')).toBe(MIN_SECURITY_VAULT_REP_DEPOSIT)
-		expect(parseRepAmountInput('10.5', 'REP deposit amount')).toBe(105n * 10n ** 17n)
+		expect(parseRepAmountInput('10', 'REP collateral amount')).toBe(MIN_SECURITY_VAULT_REP_DEPOSIT)
+		expect(parseRepAmountInput('10.5', 'REP collateral amount')).toBe(105n * 10n ** 17n)
 		expect(parseRepAmountInput('0.25', 'REP withdraw amount')).toBe(25n * 10n ** 16n)
 	})
 
diff --git a/ui/ts/tests/securityVaultSection.test.tsx b/ui/ts/tests/securityVaultSection.test.tsx
index b49ef746..0dc8ae8e 100644
--- a/ui/ts/tests/securityVaultSection.test.tsx
+++ b/ui/ts/tests/securityVaultSection.test.tsx
@@ -100,6 +100,7 @@ describe('SecurityVaultSection', () => {
 
 		const documentQueries = within(document.body)
 		expect(documentQueries.getByText('Selected Vault')).not.toBeNull()
+		expect(documentQueries.getAllByText('REP Collateral').length).toBeGreaterThan(0)
 		expect(documentQueries.getAllByText('Approved REP').length).toBeGreaterThan(0)
 		expect(documentQueries.getAllByText('Locked REP').length).toBeGreaterThan(0)
 	})