Skip to content

useExchangePaySelection

Full snapshot of the Exchange Pay deposit selection for review screens and submit gating.

When to use

When a component needs provider + currency + amount together (for example a confirm step). Prefer the focused hooks (providers, currency, amount) for pickers.

Example

tsx
import {
  useExchangePayOrder,
  useExchangePaySelection,
} from '@swapped/connect-sdk/react'

function ReviewAndSubmit() {
  const {
    selectedProvider,
    selectedCurrency,
    amount,
    canSubmit,
    reset,
  } = useExchangePaySelection()
  const { createOrder, isCreating } = useExchangePayOrder()

  return (
    <div>
      <p>
        Deposit ${amount} as {selectedCurrency?.symbol} via {selectedProvider}
      </p>
      <button type="button" onClick={reset}>
        Reset
      </button>
      <button
        type="button"
        disabled={!canSubmit || isCreating}
        onClick={() => void createOrder()}
      >
        Continue
      </button>
    </div>
  )
}

Returns

FieldPurpose
selectedProviderExchange
selectedCurrencyReceive currency
amount / amountFloat / minAmountFiatAmount
canSubmitReady to call createOrder()
reset()Clear selection back toward defaults

Requires ExchangePayContextProvider.