Your first widget

With the provider mounted, this is all you need to render a working transfer + bridge widget:

"use client";

import { WhiskSend } from "@usewhisk/react";

export default function SendPage() {
  return (
    <main className="mx-auto max-w-md py-16">
      <WhiskSend />
    </main>
  );
}

Open the page and you'll see a "Connect wallet" card. Connect a wallet and the widget walks through the rest:

Listening to the flow

Three callbacks cover most analytics needs. They're stable, so you can include them in useEffect deps without re-rendering:

<WhiskSend
  onSuccess={({ quote, finalTxHash }) => {
    analytics.track("whisk.send.success", {
      amount: quote.amountIn,
      route: quote.route.kind,
      tx: finalTxHash,
    });
  }}
  onError={(error) => {
    analytics.track("whisk.send.error", {
      code: error.name,
      message: error.message,
    });
  }}
  onStateChange={(state) => {
    console.log("[whisk]", state.kind);
  }}
/>

onStateChange fires on every transition, including transient ones like resolving and quoting. If you only care about terminal states, gate it:

onStateChange={(state) => {
  if (state.kind === "success" || state.kind === "error") {
    /* … */
  }
}}

Adding swap

If you have a Circle Console kit key, pass it through and the swap tab appears next to transfer. Without the key, the swap tab hides itself:

<WhiskSend
  kitKey={process.env.NEXT_PUBLIC_CIRCLE_KIT_KEY}
  tabs={["transfer", "swap"]}
  defaultTab="transfer"
/>

The two tabs share the same connection state, so connecting a wallet once unlocks both surfaces.

Where this falls short

<WhiskSend> is opinionated about layout; it's a card, it's centred, it owns its width. If you need a different shape (sidebar wizard, full-page checkout, sheet from the bottom), drop down to the primitives. See Components → Primitives.

Next

Lock the amount, recipient, or chain to build checkout-style flows.