Introduction
A React widget for sending and bridging USDC, built on Circle App Kit.
Whisk is a React component you drop into a page so people can send USDC. Once it's mounted, they can pay anyone with a wallet, on any chain Circle App Kit supports, with or without a bridge in the middle. You don't have to think about wagmi configs, CCTP step ordering, or which RPC speaks Solana; Whisk handles all of that behind the component.
import {
WhiskProvider,
WhiskSend,
createWhiskConfig,
evm,
} from "@usewhisk/react";
import "@usewhisk/react/styles.css";
const config = createWhiskConfig({
wallets: [evm({ projectId: process.env.WALLETCONNECT_PROJECT_ID! })],
chains: ["Arc_Testnet", "Base_Sepolia"],
});
export default function Page() {
return (
<WhiskProvider config={config}>
<WhiskSend />
</WhiskProvider>
);
}Save the file. Open the page. That's the entire integration. Connect a wallet, type an address, type an amount, hit send. If the destination is a different chain than the source, Whisk routes through CCTP; if it's the same chain, it skips the bridge.
Two packages
@usewhisk/react ships the components, hooks, and provider.
@usewhisk/core ships the engine that drives them; pure
TypeScript, no React import. The React package re-exports the few
helpers most apps need (chainInfo, composeResolvers,
WhiskError subclasses), so you almost never have to import from
core directly.
What it does that you don't have to
Recipient lookup
Addresses, ENS names, and ENSIP-11 multichain coin types resolve against the destination chain. Bring your own resolvers; Lens, Farcaster, an internal email lookup, and they slot into the same chain.
Quote and route
Same-chain transfers go direct. Cross-chain transfers route through CCTP v2 with Circle's Iris forwarder handling the mint, so the user signs once.
State you can read
Every transition fires through a discriminated union. Narrow on state.kind
and the rest of the shape is fully typed. Good for analytics, custom UI, or
a global app store.
A theme you can repaint
Every visible property routes through a CSS variable scoped to
[data-whisk]. Override --whisk-primary once; the whole widget follows.
Nothing leaks into the rest of your app.
A note on status
Whisk is live on 17 testnets today. Mainnet is in progress. If you're
building toward production, build against testnet first. The API
won't change between testnet and mainnet, only the chain identifiers
you put in createWhiskConfig.
Where to start
- New to the library: Install Whisk.
- Want to understand the parts: Concepts.
- Building a payment flow: Recipes.
- Reaching for a specific hook: Hooks.