Appearance
useExchangePayAmount
Manage the deposit amount input and read the minimum from the current currency selection.
When to use
On the amount form. Prefer this over reading selectedCurrency.minAmountFiat yourself when you are inside ExchangePayContextProvider.
Example
tsx
import {
useExchangePayAmount,
useExchangePayCurrency,
} from '@swapped/connect-sdk/react'
function AmountField() {
const { selectedCurrency } = useExchangePayCurrency()
const {
amount,
setAmount,
formattedMinAmount,
error,
onBlur,
setToMin,
isValid,
} = useExchangePayAmount()
return (
<div>
<input
value={amount}
onChange={event => setAmount(event.target.value)}
onBlur={onBlur}
inputMode="decimal"
/>
<p>
Minimum ${formattedMinAmount}
{selectedCurrency ? ` for ${selectedCurrency.symbol}` : ''}
</p>
{error && <p>{error.message}</p>}
{!isValid && error?.code === 'below_min' && (
<button type="button" onClick={setToMin}>
Update order
</button>
)}
<p>{isValid ? 'Ready' : 'Fix amount'}</p>
</div>
)
}Values below the minimum are allowed while typing; validation surfaces via error / isValid after touch. setAmount sanitizes input (commas → dots, digits, at most two decimal places).
Translating validation errors
error is structured ({ code, message, metadata }). Switch on code for i18n; use message as an English fallback:
tsx
import type { AmountValidationError } from '@swapped/connect-sdk'
function translateAmountError(error: AmountValidationError): string {
switch (error.code) {
case 'below_min':
return `Min amount ${error.metadata.formattedMinAmount}`
case 'above_spendable':
return `Max amount ${error.metadata.formattedMaxAmount}`
case 'above_balance':
return `Balance is ${error.metadata.formattedBalanceAmount}`
case 'amount_zero':
return 'Amount cannot be 0'
case 'invalid_amount':
default:
return error.message
}
}Optional max clamping
tsx
const { amount, setAmount } = useExchangePayAmount({
clampToMax: true,
maxAmountFiat: 500, // consumer-defined max (Exchange Pay has no API max)
})When using maxAmountFiat, gate submit with this hook’s isValid (selection canSubmit only knows about the currency minimum).
To bump the amount up to the new currency minimum when the token changes, pass adjustAmountOnCurrencyChange on ExchangePayContextProvider.
Options
| Option | Default | Purpose |
|---|---|---|
clampToMax | false | Clamp input down to maxAmountFiat while typing |
maxAmountFiat | — | Optional consumer-defined maximum |
Returns
| Field | Purpose |
|---|---|
amount / setAmount / amountFloat | Controlled input |
minAmountFiat / formattedMinAmount | Minimum (from selected currency) |
maxAmountFiat / formattedMaxAmount | Maximum (from options, or null) |
touched / setTouched / onBlur / resetTouched | Touch state |
setToMin | Fill the currency minimum |
error / isValid | Structured validation (error.code for i18n) |
isLoading | Currencies still loading |
Requires ExchangePayContextProvider.