Building Send, Swap, and Bridge Flows with App Kit

Most onchain applications don’t rely on a single transaction.

A typical user flow involves a few steps: receiving value, converting it into another asset, and moving that value across chains. Each step is familiar on its own, but bringing them together into a smooth product experience often requires stitching across multiple tools.

App Kit is designed to simplify that.

App Kit provides a unified interface for sending tokens on the same chain, swapping assets, and bridging USDC across chains. It includes adapters that let you plug in the client libraries and wallet infrastructure you already use, such as viem, ethers.js, Solana Web3.js, and Circle Wallets. This makes it easier to integrate App Kit into your existing stack and interact with both EVM and non-EVM assets through a single SDK, without having to manage RPC infrastructure directly.

From individual actions to complete flows

If you look at how value moves through most applications, the pattern is consistent.

Value is sent, transformed, and moved across chains. While each of these actions is straightforward, the developer experience of combining them is often fragmented.

App Kit brings these together through three methods:

• send() for same-chain token transfers
• swap() for asset conversion
• bridge() for crosschain USDC movement

What makes this useful is not just the coverage, but the consistency. Each method follows a similar request shape, adapter model, and lifecycle pattern, which makes it easier to build multi-step workflows without reworking your integration.

Setting up with an adapter

To get started, you’ll initialize an adapter and create an App Kit instance. App Kit supports multiple adapters depending on how you manage wallets. For this walkthrough, we’ll use the viem adapter, which works well with standard EVM applications.

Install the required packages:

npm install @circle-fin/app-kit @circle-fin/adapter-viem-v2 viem

‍

Set your environment variables. The private key is used to sign transactions with your wallet, and the App Kit key is used for swap flows. You can get the App Kit key from the Circle Console.

KIT_KEY=your_app_kit_key
PRIVATE_KEY=your_private_key

‍

Then initialize the adapter and App Kit:

import { AppKit } from "@circle-fin/app-kit";
import { createViemAdapterFromPrivateKey } from "@circle-fin/adapter-viem-v2";

const adapter = createViemAdapterFromPrivateKey({
  privateKey: process.env.PRIVATE_KEY as string,
});

const kit = new AppKit();

‍

Once initialized, the same setup can be reused across send, swap, and bridge flows.

Sending tokens on the same chain

A natural starting point is a same-chain transfer.

const result = await kit.send({
  from: { adapter, chain: "Arc_Testnet" },
  to: "RECIPIENT_ADDRESS",
  amount: "1.00",
  token: "USDC",
});

‍

This pattern is useful for delivering value between wallets on the same chain, such as payouts, wallet funding, or internal transfers.

App Kit supports send flows using common token aliases or token contract addresses. Supported aliases include USDC, EURC, USDT, USDe, DAI, PYUSD, and NATIVE. You can also provide a token contract address when transferring other supported assets.

Bridging USDC across chains

When users need to move value across chains, you can extend the same setup with bridge().

const result = await kit.bridge({
  from: { adapter, chain: "Arc_Testnet" },
  to: { adapter, chain: "Ethereum_Sepolia" },
  amount: "1.00",
});

‍

Because this follows the same structure as send(), adding crosschain functionality does not introduce a new integration model.

You can also attach a fixed fee directly within the request:

const result = await kit.bridge({
  from: { adapter, chain: "Arc_Testnet" },
  to: { adapter, chain: "Ethereum_Sepolia" },
  amount: "1.00",
  config: {
    customFee: {
      value: "0.10",
      recipientAddress: "YOUR_WALLET",
    },
  },
});

‍

This allows applications to capture value as part of crosschain flows without introducing additional infrastructure.

Swapping assets onchain

For flows that require asset conversion, App Kit provides swap().

const result = await kit.swap({
  from: { adapter, chain: "Ethereum" },
  tokenIn: "NATIVE",
  tokenOut: "USDC",
  amountIn: "0.01",
  config: {
    kitKey: process.env.KIT_KEY!,
  },
});

‍

App Kit supports swaps across a range of assets, including stablecoins such as USDC, EURC, USDT, USDe, DAI, and PYUSD, as well as native tokens on supported blockchains.

Custom fees can also be applied to swaps as a percentage of the transaction amount:

const result = await kit.swap({
  from: { adapter, chain: "Ethereum" },
  tokenIn: "NATIVE",
  tokenOut: "USDC",
  amountIn: "0.01",
  config: {
    kitKey: process.env.KIT_KEY!,
    customFee: {
      percentageBps: 100, // 1% fee
      recipientAddress: "YOUR_WALLET",
    },
  },
});

Composing the full flow

In practice, these actions are rarely used in isolation.

A user might receive funds on Arc Testnet, bridge USDC to Ethereum, and then swap into the asset required for the next step. From the user’s perspective, this feels like a single experience.

From the developer’s perspective, it is built using a consistent set of primitives that share the same structure and configuration model.

Getting started

App Kit provides a straightforward way to build the flows most onchain applications need, including sending tokens, swapping assets, and bridging value across chains. Because it works across multiple adapters, you can integrate it into your existing stack and expand into more complex flows over time.

Start building with App Kit by exploring the documentation and following the quickstarts to integrate your first send, swap, or bridge flow.