Skip to content

useCashAppAmount ​

Manage the deposit amount input and read the minimum from the current asset selection.

When to use ​

On the amount form. Prefer this over reading selectedAsset.minAmountFiat yourself when you are inside CashAppProvider.

Example ​

tsx
import { useCashAppAmount, useCashAppAsset } from '@swapped/connect-sdk/react'

function AmountField() {
  const { selectedAsset } = useCashAppAsset()
  const {
    amount,
    setAmount,
    formattedMinAmount,
    error,
    onBlur,
    setToMin,
    isValid,
  } = useCashAppAmount()

  return (
    <div>
      <input
        value={amount}
        onChange={event => setAmount(event.target.value)}
        onBlur={onBlur}
        inputMode="decimal"
      />
      <p>
        Minimum ${formattedMinAmount}
        {selectedAsset ? ` for ${selectedAsset.asset}` : ''}
      </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, always 2 decimal places). Cash App is USD-only, so setFormatDefaults({ fiatDecimals, maxFiatDecimals }) does not change this.

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 } = useCashAppAmount({
  clampToMax: true,
  maxAmountFiat: 500, // consumer-defined max (Cash App has no API max)
})

When using maxAmountFiat, gate submit with this hook’s isValid (selection canSubmit only knows about the asset minimum).

To bump the amount up to the new asset minimum when the token changes, pass adjustAmountOnAssetChange on CashAppProvider.

Options ​

OptionDefaultPurpose
clampToMaxfalseClamp input down to maxAmountFiat while typing
maxAmountFiat-Optional consumer-defined maximum

Returns ​

FieldPurpose
amount / setAmount / amountFloatControlled input
minAmountFiat / formattedMinAmountMinimum (from selected asset)
maxAmountFiat / formattedMaxAmountMaximum (from options, or null)
touched / setTouched / onBlur / resetTouchedTouch state
setToMinFill the asset minimum
error / isValidStructured validation (error.code for i18n)
isLoadingAssets still loading

Requires CashAppProvider.