Improve address rendering and add liquidation guardrails

ui/css/index.css

@@ -2262,6 +2262,18 @@ strong.metric-value-danger {
 	overflow-wrap: anywhere;
 }
 
+.liquidation-modal-actions {
+	align-items: flex-start;
+}
+
+.liquidation-modal-actions > .tx-action {
+	align-self: flex-start;
+}
+
+.liquidation-modal-actions > button {
+	align-self: flex-start;
+}
+
 .form-grid {
 	display: grid;
 	gap: 1.1rem;

ui/dist/css/index.css

@@ -2262,6 +2262,18 @@ strong.metric-value-danger {
 	overflow-wrap: anywhere;
 }
 
+.liquidation-modal-actions {
+	align-items: flex-start;
+}
+
+.liquidation-modal-actions > .tx-action {
+	align-self: flex-start;
+}
+
+.liquidation-modal-actions > button {
+	align-self: flex-start;
+}
+
 .form-grid {
 	display: grid;
 	gap: 1.1rem;

ui/ts/components/LiquidationModal.tsx

@@ -8,6 +8,7 @@ import { FormInput } from './FormInput.js'
 import { MetricField } from './MetricField.js'
 import { OpenOraclePriceValue } from './OpenOraclePriceValue.js'
 import { TransactionActionButton } from './TransactionActionButton.js'
+import { sameAddress } from '../lib/address.js'
 import { formatCurrencyInputBalance } from '../lib/formatters.js'
 import { getLiquidationFailureReason, simulateLiquidation } from '../lib/liquidation.js'
 import { parseRepAmountInput } from '../lib/marketForm.js'
@@ -167,6 +168,8 @@ export function LiquidationModal({
 	const callerPoolOracleCollateralization = callerVaultSummary === undefined ? undefined : getVaultCollateralizationPercent(callerVaultSummary.repDepositShare, callerVaultSummary.securityBondAllowance, poolOraclePrice)
 	const liquidationExecutionMode = getLiquidationExecutionMode(currentPoolOracleManagerDetails)
 	const buttonLabels = getLiquidationButtonLabels(currentPoolOracleManagerDetails)
+	const trimmedLiquidationTargetVault = liquidationTargetVault.trim()
+	const sameVaultWarning = accountAddress === undefined || trimmedLiquidationTargetVault === '' || !sameAddress(accountAddress, trimmedLiquidationTargetVault) ? undefined : 'Select a target vault that is different from the caller vault.'
 	const liquidationSimulation =
 		targetVaultSummary === undefined || poolOraclePrice === undefined || selectedPool?.securityMultiplier === undefined || liquidationAmountValue === undefined
 			? undefined
@@ -197,11 +200,13 @@ export function LiquidationModal({
 					? 'Refreshing Open Oracle validity before liquidation.'
 					: liquidationManagerAddress === undefined || liquidationSecurityPoolAddress === undefined
 						? 'Reload the selected pool before liquidating.'
-						: liquidationTargetVault.trim() === ''
+						: trimmedLiquidationTargetVault === ''
 							? 'Select a target vault first.'
-							: liquidationAmount.trim() === ''
-								? 'Enter a liquidation amount.'
-								: directLiquidationReason
+							: sameVaultWarning !== undefined
+								? sameVaultWarning
+								: liquidationAmount.trim() === ''
+									? 'Enter a liquidation amount.'
+									: directLiquidationReason
 
 	const queuedLiquidationOperation =
 		securityPoolOverviewResult?.action !== 'queueLiquidation' || currentPoolOracleManagerDetails?.pendingOperation?.operation !== 'liquidation' || currentPoolOracleManagerDetails.pendingOperation.targetVault !== liquidationTargetVault ? undefined : currentPoolOracleManagerDetails.pendingOperation
@@ -298,7 +303,7 @@ export function LiquidationModal({
 					<AddressInfo address={liquidationSecurityPoolAddress} label='Security Pool' />
 					<MetricField label='Security Multiplier'>{selectedPool?.securityMultiplier === undefined ? 'Unavailable' : `${selectedPool.securityMultiplier.toString()}x`}</MetricField>
 					<MetricField label='Caller Vault'>{accountAddress === undefined ? 'Connect wallet' : <AddressValue address={accountAddress} />}</MetricField>
-					<MetricField label='Target Vault'>{liquidationTargetVault.trim() === '' ? 'None selected' : liquidationTargetVault}</MetricField>
+					<MetricField label='Target Vault'>{trimmedLiquidationTargetVault === '' ? 'None selected' : <AddressValue address={trimmedLiquidationTargetVault} />}</MetricField>
 					<MetricField label='Open Oracle Price' valueTagName='span'>
 						<OpenOraclePriceValue currentTimestamp={currentTimestamp} lastPrice={poolOraclePrice} lastSettlementTimestamp={poolOracleSettlementTimestamp} priceValidUntilTimestamp={currentPoolOracleManagerDetails?.priceValidUntilTimestamp} />
 					</MetricField>
@@ -313,6 +318,17 @@ export function LiquidationModal({
 						{callerPoolOracleCollateralization === undefined ? 'Unavailable' : <CurrencyValue value={callerPoolOracleCollateralization} suffix='%' copyable={false} />}
 					</MetricField>
 				</DataGrid>
+				{sameVaultWarning === undefined ? null : (
+					<section className='entity-card compact'>
+						<div className='entity-card-header'>
+							<div>
+								<h4>Invalid Liquidation Pair</h4>
+							</div>
+							<span className='badge warn'>Warning</span>
+						</div>
+						<p className='detail'>{sameVaultWarning}</p>
+					</section>
+				)}
 				<div className='form-grid'>
 					<label className='field'>
 						<span>Liquidation Amount (ETH)</span>
@@ -347,7 +363,7 @@ export function LiquidationModal({
 						</div>
 					</section>
 				)}
-				<div className='actions'>
+				<div className='actions liquidation-modal-actions'>
 					<button className='secondary' onClick={closeLiquidationModal}>
 						Cancel
 					</button>

ui/ts/components/SecurityPoolSection.tsx

@@ -124,7 +124,11 @@ export function SecurityPoolSection({
 						? undefined
 						: {
 								title: 'Security pool created',
-								detail: `Created pool ${securityPoolResult.securityPoolAddress}.`,
+								detail: (
+									<>
+										Created pool <AddressValue address={securityPoolResult.securityPoolAddress} />.
+									</>
+								),
 								nextStep: 'Open the pool to begin operating vault, trading, reporting, and fork workflows.',
 							}
 				}

ui/ts/components/SecurityPoolWorkflowSection.tsx

@@ -1173,7 +1173,7 @@ export function SecurityPoolWorkflowSection({
 			<OperationModal isOpen={vaultActionModal === 'claim-fees'} onClose={() => setVaultActionModal(undefined)} title='Claim Fees' description='Confirm the claimable fee balance before submitting the fee redemption for this vault.'>
 				<div className='workflow-metric-grid'>
 					<MetricField label='Claimable Fees'>{selectedVaultDetails === undefined ? '—' : <CurrencyValue value={selectedVaultDetails.unpaidEthFees} suffix='ETH' />}</MetricField>
-					<MetricField label='Vault'>{selectedVaultAddress === '' ? 'None selected' : selectedVaultAddress}</MetricField>
+					<MetricField label='Vault'>{selectedVaultAddress === '' ? 'None selected' : <AddressValue address={selectedVaultAddress} />}</MetricField>
 				</div>
 				<RequirementsChecklist
 					items={[

ui/ts/components/TradingSection.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from 'preact/hooks'
 import { ActionLauncherCard } from './ActionLauncherCard.js'
+import { AddressValue } from './AddressValue.js'
 import { ResultBanner } from './ResultBanner.js'
 import { CurrencyValue } from './CurrencyValue.js'
 import { EnumDropdown } from './EnumDropdown.js'
@@ -221,7 +222,7 @@ export function TradingSection({
 					{ label: 'Action', value: tradingResult.action },
 					...(tradingResult.action !== 'migrateShares' || tradingResult.shareOutcome === undefined ? [] : [{ label: 'Share Outcome', value: tradingResult.shareOutcome }]),
 					...(tradingResult.action !== 'migrateShares' || tradingResult.targetOutcomeIndexes === undefined ? [] : [{ label: 'Target Outcome Indexes', value: tradingResult.targetOutcomeIndexes.join(', ') }]),
-					{ label: 'Pool', value: tradingResult.securityPoolAddress },
+					{ label: 'Pool', value: <AddressValue address={tradingResult.securityPoolAddress} /> },
 					{ label: 'Universe', value: <UniverseLink universeId={tradingResult.universeId} /> },
 					{ label: 'Transaction', value: <TransactionHashLink hash={tradingResult.hash} /> },
 				]}

ui/ts/tests/liquidationModal.test.tsx

@@ -93,6 +93,8 @@ function createSelectedPool(overrides: Partial<ListedSecurityPool> = {}): Listed
 describe('LiquidationModal', () => {
 	let restoreDomEnvironment: (() => void) | undefined
 	let cleanupRenderedComponent: (() => Promise<void>) | undefined
+	const defaultCallerVaultAddress = getAddress('0x0000000000000000000000000000000000000001')
+	const defaultTargetVaultAddress = getAddress('0x00000000000000000000000000000000000000a1')
 
 	beforeEach(() => {
 		const domEnvironment = installDomEnvironment()
@@ -109,7 +111,7 @@ describe('LiquidationModal', () => {
 	function renderLiquidationModal(overrides: Partial<Parameters<typeof LiquidationModal>[0]> = {}) {
 		return renderIntoDocument(
 			<LiquidationModal
-				accountAddress={zeroAddress}
+				accountAddress={defaultCallerVaultAddress}
 				closeLiquidationModal={() => undefined}
 				currentPoolOracleManagerDetails={undefined}
 				isMainnet
@@ -118,7 +120,7 @@ describe('LiquidationModal', () => {
 				liquidationManagerAddress={zeroAddress}
 				liquidationModalOpen
 				liquidationSecurityPoolAddress={zeroAddress}
-				liquidationTargetVault={zeroAddress}
+				liquidationTargetVault={defaultTargetVaultAddress}
 				loadingPoolOracleManager={false}
 				onLoadPoolOracleManager={() => undefined}
 				onLiquidationAmountChange={() => undefined}
@@ -130,8 +132,8 @@ describe('LiquidationModal', () => {
 				selectedPool={createSelectedPool()}
 				securityPoolOverviewActiveAction={undefined}
 				securityPoolOverviewResult={undefined}
-				callerVaultSummary={createTargetVaultSummary({ vaultAddress: getAddress('0x0000000000000000000000000000000000000001') })}
-				targetVaultSummary={createTargetVaultSummary()}
+				callerVaultSummary={createTargetVaultSummary({ vaultAddress: defaultCallerVaultAddress })}
+				targetVaultSummary={createTargetVaultSummary({ vaultAddress: defaultTargetVaultAddress })}
 				{...overrides}
 			/>,
 		)
@@ -377,6 +379,95 @@ describe('LiquidationModal', () => {
 		expect(documentQueries.getByText(/^Open Oracle Price$/)).not.toBeNull()
 	})
 
+	test('uses a dedicated top-aligned action row when execute liquidation shows a disabled reason', async () => {
+		const renderedComponent = await renderLiquidationModal({
+			currentPoolOracleManagerDetails: createOracleManagerDetails({
+				isPriceValid: true,
+				lastPrice: 10n * 10n ** 18n,
+			}),
+			liquidationAmount: '2',
+			selectedPool: createSelectedPool({
+				securityMultiplier: 2n,
+			}),
+			callerVaultSummary: createTargetVaultSummary({
+				repDepositShare: 29n * 10n ** 18n,
+				securityBondAllowance: 1n * 10n ** 18n,
+				vaultAddress: getAddress('0x0000000000000000000000000000000000000001'),
+			}),
+			targetVaultSummary: createTargetVaultSummary({
+				repDepositShare: 30n * 10n ** 18n,
+				securityBondAllowance: 2n * 10n ** 18n,
+			}),
+		})
+		cleanupRenderedComponent = renderedComponent.cleanup
+
+		const documentQueries = within(document.body)
+		const executeButton = documentQueries.getByRole('button', { name: 'Execute Liquidation' }) as HTMLButtonElement
+		const cancelButton = documentQueries.getByRole('button', { name: 'Cancel' })
+		const actionContainer = cancelButton.closest('.liquidation-modal-actions')
+
+		expect(executeButton.disabled).toBe(true)
+		expect(documentQueries.getByText('The caller vault would become liquidatable after this liquidation.')).not.toBeNull()
+		expect(actionContainer).not.toBeNull()
+		expect(actionContainer?.className).toContain('actions')
+		expect(actionContainer?.className).toContain('liquidation-modal-actions')
+	})
+
+	test('renders the target vault with the shared address value component', async () => {
+		const callerVaultAddress = getAddress('0x0000000000000000000000000000000000000001')
+		const targetVaultAddress = getAddress('0x00000000000000000000000000000000000000a1')
+		const renderedComponent = await renderLiquidationModal({
+			accountAddress: callerVaultAddress,
+			liquidationTargetVault: targetVaultAddress,
+			callerVaultSummary: createTargetVaultSummary({
+				vaultAddress: callerVaultAddress,
+			}),
+			targetVaultSummary: createTargetVaultSummary({
+				vaultAddress: targetVaultAddress,
+			}),
+		})
+		cleanupRenderedComponent = renderedComponent.cleanup
+
+		const documentQueries = within(document.body)
+		expect(documentQueries.getByRole('button', { name: `Copy address ${callerVaultAddress}` })).not.toBeNull()
+		const targetVaultButton = documentQueries.getByRole('button', { name: `Copy address ${targetVaultAddress}` })
+		expect(targetVaultButton).not.toBeNull()
+		expect(targetVaultButton.textContent).toContain(targetVaultAddress)
+	})
+
+	test('shows a warning and disables liquidation when caller and target vaults are the same', async () => {
+		const vaultAddress = getAddress('0x00000000000000000000000000000000000000a1')
+		const renderedComponent = await renderLiquidationModal({
+			accountAddress: vaultAddress,
+			currentPoolOracleManagerDetails: createOracleManagerDetails({
+				isPriceValid: true,
+				lastPrice: 10n * 10n ** 18n,
+			}),
+			liquidationAmount: '1',
+			liquidationTargetVault: vaultAddress,
+			selectedPool: createSelectedPool({
+				securityMultiplier: 2n,
+			}),
+			callerVaultSummary: createTargetVaultSummary({
+				repDepositShare: 100n * 10n ** 18n,
+				securityBondAllowance: 2n * 10n ** 18n,
+				vaultAddress,
+			}),
+			targetVaultSummary: createTargetVaultSummary({
+				repDepositShare: 5n * 10n ** 18n,
+				securityBondAllowance: 2n * 10n ** 18n,
+				vaultAddress,
+			}),
+		})
+		cleanupRenderedComponent = renderedComponent.cleanup
+
+		const documentQueries = within(document.body)
+		const executeButton = documentQueries.getByRole('button', { name: 'Execute Liquidation' }) as HTMLButtonElement
+		expect(executeButton.disabled).toBe(true)
+		expect(documentQueries.getByRole('heading', { name: 'Invalid Liquidation Pair' })).not.toBeNull()
+		expect(documentQueries.getAllByText('Select a target vault that is different from the caller vault.')).toHaveLength(2)
+	})
+
 	test('shows the caller vault and a post-liquidation simulation', async () => {
 		const callerVaultAddress = getAddress('0x0000000000000000000000000000000000000001')
 		const renderedComponent = await renderLiquidationModal({

ui/ts/tests/securityPoolSection.test.tsx

@@ -1,8 +1,9 @@
 /// <reference types="bun-types" />
 
 import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
+import { within } from '@testing-library/dom'
 import { h } from 'preact'
-import { zeroAddress } from 'viem'
+import { getAddress, zeroAddress, zeroHash } from 'viem'
 import { SecurityPoolSection } from '../components/SecurityPoolSection.js'
 import type { AccountState } from '../types/app.js'
 import type { MarketDetails } from '../types/contracts.js'
@@ -133,4 +134,27 @@ describe('SecurityPoolSection', () => {
 		expect(headings).not.toContain('Requirements')
 		expect(headings).not.toContain('Existing Pools')
 	})
+
+	test('renders the created pool banner detail with the shared address value component', async () => {
+		const poolAddress = getAddress('0x00000000000000000000000000000000000000a1')
+		const renderedComponent = await renderIntoDocument(
+			h(
+				SecurityPoolSection,
+				createProps({
+					securityPoolResult: {
+						deployPoolHash: zeroHash,
+						questionId: '0x01',
+						securityPoolAddress: poolAddress,
+						securityMultiplier: 2n,
+						universeId: 1n,
+					},
+				}),
+			),
+		)
+		cleanupRenderedComponent = renderedComponent.cleanup
+
+		const documentQueries = within(document.body)
+		expect(documentQueries.getByRole('heading', { name: 'Security pool created' })).not.toBeNull()
+		expect(documentQueries.getAllByRole('button', { name: `Copy address ${poolAddress}` }).length).toBeGreaterThanOrEqual(2)
+	})
 })

ui/ts/tests/securityPoolWorkflowSection.test.tsx

@@ -4,7 +4,7 @@ import { afterEach, beforeEach, describe, expect, test } from 'bun:test'
 import { fireEvent, within } from '@testing-library/dom'
 import { render } from 'preact'
 import { act } from 'preact/test-utils'
-import { zeroAddress } from 'viem'
+import { getAddress, zeroAddress } from 'viem'
 import { SecurityPoolWorkflowSection } from '../components/SecurityPoolWorkflowSection.js'
 import type { AccountState } from '../types/app.js'
 import type { ListedSecurityPool, MarketDetails, OracleManagerDetails, SecurityPoolVaultSummary, SecurityVaultDetails } from '../types/contracts.js'
@@ -433,6 +433,51 @@ describe('SecurityPoolWorkflowSection', () => {
 		expect(documentQueries.getAllByText('Locked REP').length).toBeGreaterThan(0)
 	})
 
+	test('renders the claim-fees modal vault with the shared address value component', async () => {
+		const vaultAddress = getAddress('0x00000000000000000000000000000000000000a1')
+		const poolVault = createSecurityPoolVaultSummary({ vaultAddress })
+		const renderedComponent = await renderIntoDocument(
+			<SecurityPoolWorkflowSection
+				{...createSecurityPoolWorkflowProps({
+					checkedSecurityPoolAddress: zeroAddress,
+					securityPoolAddress: zeroAddress,
+					securityPools: [
+						createSelectedPool({
+							vaultCount: 1n,
+							vaults: [poolVault],
+						}),
+					],
+					securityVault: createSecurityVaultProps({
+						selectedPoolSecurityMultiplier: 2n,
+						securityVaultDetails: createSecurityVaultDetails({ vaultAddress }),
+						securityVaultForm: {
+							depositAmount: '',
+							repWithdrawAmount: '',
+							securityBondAllowanceAmount: '',
+							securityPoolAddress: zeroAddress,
+							selectedVaultAddress: vaultAddress,
+						},
+					}),
+				})}
+				showHeader={false}
+			/>,
+		)
+		cleanupRenderedComponent = renderedComponent.cleanup
+
+		const documentQueries = within(document.body)
+		const claimFeesButton = documentQueries.getAllByRole('button', { name: 'Claim Fees' })[0]
+		if (!(claimFeesButton instanceof HTMLElement)) {
+			throw new Error('Expected claim fees launcher button')
+		}
+
+		await act(() => {
+			fireEvent.click(claimFeesButton)
+		})
+
+		const dialog = documentQueries.getByRole('dialog')
+		expect(within(dialog).getByRole('button', { name: `Copy address ${vaultAddress}` })).not.toBeNull()
+	})
+
 	test('auto-loads the selected vault when a routed pool opens in the vault view', async () => {
 		const loadSecurityVaultCalls: Array<string | undefined> = []
 		const selectedPoolAddress = zeroAddress