Getting started (React)

Create a core client, wrap your tree with SwappedConnectProvider, then use hooks from @swapped/connect-sdk/react.

Install

npm install @swapped/connect-sdk

Peer dependency: react >= 18.

Setup

import { createSwappedConnectClient } from '@swapped/connect-sdk'
import {
  SwappedConnectProvider,
  useGetPaymentMethods,
} from '@swapped/connect-sdk/react'

const client = createSwappedConnectClient({
  sessionId: 'your-session-id',
})

// Provider does not load the session — do it once at bootstrap
void client.loadSession()

function App() {
  return (
    <SwappedConnectProvider client={client}>
      <PaymentMethods />
    </SwappedConnectProvider>
  )
}

function PaymentMethods() {
  const { paymentMethods, isLoading } = useGetPaymentMethods({
    category: 'exchanges',
  })

  if (isLoading) return <p>Loading…</p>

  return (
    <ul>
      {paymentMethods.map(method => (
        <li key={method.id}>{method.name}</li>
      ))}
    </ul>
  )
}

Create the client once and pass it into the provider. Hooks only work under SwappedConnectProvider.

Typical order of work

1. createSwappedConnectClient → loadSession → wrap with SwappedConnectProvider
2. Gate UI on session view (useSessionView) — only active can pay. Read session data with useSession() / maintenance with useMaintenance()
3. List payment methods
4. Run a deposit flow — Wallets, Exchange Pay, or Coinbase
5. Use event hooks as needed
6. restartSession() (via useSwappedConnectClient) for another payment, or destroy() when done

Entry points

Import	Purpose
@swapped/connect-sdk	Create the client
@swapped/connect-sdk/react	Provider and hooks
@swapped/connect-sdk/format	Display helpers

Prefer vanilla JS/TS? See the Core track.