Circle USDC Gateway with embedded wallets

What We’re Building

A React (Next.js) app that connects Dynamic’s embedded wallets to Circle Gateway infrastructure, allowing users to:

Deposit USDC into Circle Gateway across multiple domains
Transfer USDC cross-chain between Sepolia, Base Sepolia, and Arc Testnet
View USDC balances across all domains in a unified interface
Sign EIP-712 messages for secure cross-chain attestations

If you want to take a quick look at the final code, check out the GitHub repository (built on the legacy React SDK with wagmi, so use it for the Circle Gateway logic; this page shows the same app wired to the JavaScript SDK).

Key Components

Embedded wallets: Non-custodial, MPC-backed wallets with seamless auth
Circle Gateway: Cross-chain infrastructure for USDC transfers between domains
EIP-712 Signing: Secure typed data signing for attestation messages

Supported Networks

This guide demonstrates Circle Gateway integration with Circle Arc testnet, along with Sepolia (Domain 0) and Base Sepolia (Domain 6). Circle Arc is a new Layer-1 blockchain network designed as an Economic Operating System for the internet, featuring predictable dollar-based fees, sub-second finality, and EVM compatibility.

How It Works

Cross-Chain Transfer Flow

Circle Gateway uses a burn-and-mint mechanism for cross-chain USDC transfers:

Deposit: Users deposit USDC into the Gateway Wallet contract on the source chain
Burn Intent: When transferring, the app constructs a burn intent specifying the source domain, destination domain, amount, and recipient
EIP-712 Signing: The burn intent is signed using EIP-712 typed data signing, which provides cryptographic proof of the user’s intent
Attestation: The signed burn intent is submitted to Circle Gateway API, which validates the signature and returns an attestation
Mint: The app switches to the destination chain and calls the Gateway Minter contract with the attestation to mint USDC

EIP-712 Typed Data

EIP-712 provides a standard way to sign structured data. The burn intent includes:

Transfer Specification: Source and destination domains, contracts, tokens, and amounts
Burn Intent: Maximum block height, maximum fee, and the transfer spec
Domain Separator: Ensures signatures are chain-specific and cannot be replayed

This secure signing mechanism ensures that cross-chain transfers are authorized by the wallet owner and cannot be tampered with.

Building the Application

Project setup

Follow the React Quickstart (JS SDK): the JavaScript SDK’s EVM extension covers external and embedded EVM wallets directly, so you don’t need wagmi. This recipe’s example uses Next.js, so scaffold with create-next-app and apply the same packages and provider wiring as in the quickstart below.

Developer console: Under Chains & Networks, enable the testnets this guide uses (Sepolia, Base Sepolia, and Arc Testnet) and any other EVM networks you need. Under Sign-in Methods and Wallets, enable what your flow needs (including Embedded wallets). Under Security → Allowed Origins, add the origin where the app runs (for example http://localhost:3000).

Configure Dynamic Environment

Create a .env.local file with your Dynamic environment ID:

.env.local

NEXT_PUBLIC_DYNAMIC_ENV_ID=your-environment-id-here

You can find your Environment ID in the Dynamic developer console under Developer Settings → SDK & API Keys.

Add Chain Configuration

Create src/lib/chains.ts to define the Circle Gateway domain IDs and contract addresses. This file contains all the chain-specific configuration needed for the Gateway integration.

src/lib/chains.ts

export const DOMAIN = {
  sepolia: 0,
  baseSepolia: 6,
  arcTestnet: 26,
} as const;

export const CONTRACTS = {
  gatewayWallet: "0x0077777d7EBA4688BDeF3E311b846F25870A19B9",
  gatewayMinter: "0x0022222ABE238Cc2C7Bb1f21003F0a260052475B",
  usdc: {
    sepolia: "0x1c7D4B196Cb0C7B01d743Fbc6116a902379C7238",
    baseSepolia: "0x036CbD53842c5426634e7929541eC2318f3dCF7e",
    arcTestnet: "0x3600000000000000000000000000000000000000",
  },
} as const;

// Decimal chain IDs, used as the JavaScript SDK's `networkId` for each chain.
export const NETWORK_ID = {
  sepolia: "11155111",
  baseSepolia: "84532",
  arcTestnet: "5042002",
} as const;

This defines the three testnet domains, their USDC contract addresses, the shared Gateway contracts, and the network ID the SDK uses for each chain.

Create the Dynamic Client

Create src/lib/dynamic-client.ts. Importing this module at the app root registers the EVM extension before any component renders.

src/lib/dynamic-client.ts

import { createDynamicClient, initializeClient } from "@dynamic-labs-sdk/client";
import { addEvmExtension } from "@dynamic-labs-sdk/evm";

export const dynamicClient = createDynamicClient({
  autoInitialize: false,
  environmentId: process.env.NEXT_PUBLIC_DYNAMIC_ENV_ID!,
  metadata: {
    name: "Circle Gateway Demo",
    // Falls back for the brief window before this module runs in the browser.
    universalLink: typeof window !== "undefined" ? window.location.origin : "http://localhost:3000",
  },
});

// Register extensions immediately, before initialization completes.
// Extension functions take NO arguments — do not pass the client instance.
addEvmExtension();

void initializeClient();

Wire Up the Providers

Create src/components/providers.tsx to wrap the app in QueryClientProvider and DynamicProvider, and to create the embedded wallet as soon as a user signs in. Mount QueryClientProvider outside DynamicProvider.

src/components/providers.tsx

"use client";

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { DynamicProvider, useOnEvent } from "@dynamic-labs-sdk/react-hooks";
import {
  createWaasWalletAccounts,
  getChainsMissingWaasWalletAccounts,
} from "@dynamic-labs-sdk/client/waas";
import { dynamicClient } from "@/lib/dynamic-client";

const queryClient = new QueryClient();

// WaaS wallet creation isn't automatic — trigger it on every `userChanged` event.
function WaasBootstrap() {
  useOnEvent({
    event: "userChanged",
    listener: async (user) => {
      if (!user) return;
      const missingChains = getChainsMissingWaasWalletAccounts();
      if (missingChains.length > 0) {
        await createWaasWalletAccounts({ chains: missingChains });
      }
    },
  });
  return null;
}

export function Providers({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <DynamicProvider client={dynamicClient}>
        <WaasBootstrap />
        {children}
      </DynamicProvider>
    </QueryClientProvider>
  );
}

Wrap your root layout’s children in <Providers> (for example in src/app/layout.tsx), and import src/lib/dynamic-client at the app root so extensions register before any component renders. The JavaScript SDK is headless, so there’s no built-in login form. Create src/components/dynamic/dynamic-login.tsx with a minimal email OTP form:

src/components/dynamic/dynamic-login.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { useSendEmailOTP, useVerifyOTP } from "@dynamic-labs-sdk/react-hooks";

export default function DynamicLogin() {
  const [email, setEmail] = useState("");
  const [code, setCode] = useState("");
  const { mutate: sendEmailOTP, data: sendResult, isPending: sending } = useSendEmailOTP();
  const { mutate: verifyOTP, isPending: verifying } = useVerifyOTP();

  const otpVerification = sendResult;

  if (!otpVerification) {
    return (
      <div className="flex gap-2">
        <input
          type="email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
          placeholder="you@example.com"
          className="w-full rounded-md border bg-background px-3 py-2 text-sm"
        />
        <Button onClick={() => sendEmailOTP({ email })} disabled={sending || !email}>
          Send code
        </Button>
      </div>
    );
  }

  return (
    <div className="flex gap-2">
      <input
        value={code}
        onChange={(e) => setCode(e.target.value)}
        placeholder="123456"
        className="w-full rounded-md border bg-background px-3 py-2 text-sm"
      />
      <Button
        onClick={() => verifyOTP({ otpVerification, verificationToken: code })}
        disabled={verifying || !code}
      >
        Verify
      </Button>
    </div>
  );
}

Create Gateway Utilities

Create src/lib/gateway.ts to handle Circle Gateway API calls and EIP-712 signing. This file contains all the API communication logic for interacting with the Circle Gateway service. It provides functions to build burn intents, create EIP-712 typed data structures for signing, and handle address conversions required for cross-chain transfers. The GatewayAPI object provides methods for making HTTP requests to the Circle Gateway API, while the burnIntent and burnIntentTypedData functions construct the structured data needed for EIP-712 message signing, which is required for secure cross-chain attestations.

src/lib/gateway.ts

import { pad, maxUint256, zeroAddress, bytesToHex } from "viem";

const baseUrl = "https://gateway-api-testnet.circle.com/v1";

export const GatewayAPI = {
  async get(path: string) {
    return fetch(baseUrl + path).then((r) => r.json());
  },
  async post(path: string, body: unknown) {
    return fetch(baseUrl + path, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify(body, (_k, v) =>
        typeof v === "bigint" ? v.toString() : v
      ),
    }).then((r) => r.json());
  },
};

const domain = { name: "GatewayWallet", version: "1" } as const;
const EIP712Domain = [
  { name: "name", type: "string" },
  { name: "version", type: "string" },
];
const TransferSpec = [
  { name: "version", type: "uint32" },
  { name: "sourceDomain", type: "uint32" },
  { name: "destinationDomain", type: "uint32" },
  { name: "sourceContract", type: "bytes32" },
  { name: "destinationContract", type: "bytes32" },
  { name: "sourceToken", type: "bytes32" },
  { name: "destinationToken", type: "bytes32" },
  { name: "sourceDepositor", type: "bytes32" },
  { name: "destinationRecipient", type: "bytes32" },
  { name: "sourceSigner", type: "bytes32" },
  { name: "destinationCaller", type: "bytes32" },
  { name: "value", type: "uint256" },
  { name: "salt", type: "bytes32" },
  { name: "hookData", type: "bytes" },
];
const BurnIntent = [
  { name: "maxBlockHeight", type: "uint256" },
  { name: "maxFee", type: "uint256" },
  { name: "spec", type: "TransferSpec" },
];

const addressToBytes32 = (address: string) =>
  pad(address.toLowerCase() as `0x${string}`, { size: 32 });

export function burnIntent({
  account,
  from,
  to,
  amount,
  recipient,
}: {
  account: string;
  from: {
    domain: number;
    gatewayWallet: { address: `0x${string}` };
    usdc: { address: `0x${string}` };
  };
  to: {
    domain: number;
    gatewayMinter: { address: `0x${string}` };
    usdc: { address: `0x${string}` };
  };
  amount: number;
  recipient?: string;
}) {
  return {
    maxBlockHeight: maxUint256,
    maxFee: BigInt(2010000),
    spec: {
      version: 1,
      sourceDomain: from.domain,
      destinationDomain: to.domain,
      sourceContract: from.gatewayWallet.address,
      destinationContract: to.gatewayMinter.address,
      sourceToken: from.usdc.address,
      destinationToken: to.usdc.address,
      sourceDepositor: account,
      destinationRecipient: recipient || account,
      sourceSigner: account,
      destinationCaller: zeroAddress,
      value: BigInt(Math.floor(amount * 1e6)),
      salt: bytesToHex(crypto.getRandomValues(new Uint8Array(32))),
      hookData: "0x",
    },
  } as const;
}

export function burnIntentTypedData(intent: ReturnType<typeof burnIntent>) {
  const spec = intent.spec;
  return {
    types: { EIP712Domain, TransferSpec, BurnIntent },
    domain,
    primaryType: "BurnIntent" as const,
    message: {
      ...intent,
      spec: {
        ...spec,
        sourceContract: addressToBytes32(spec.sourceContract),
        destinationContract: addressToBytes32(spec.destinationContract),
        sourceToken: addressToBytes32(spec.sourceToken),
        destinationToken: addressToBytes32(spec.destinationToken),
        sourceDepositor: addressToBytes32(spec.sourceDepositor),
        destinationRecipient: addressToBytes32(spec.destinationRecipient),
        sourceSigner: addressToBytes32(spec.sourceSigner),
        destinationCaller: addressToBytes32(spec.destinationCaller || zeroAddress),
      },
    },
  } as const;
}

This handles Circle Gateway API calls and creates EIP-712 typed data for signing cross-chain transfers. Nothing here depends on Dynamic: it’s the same Circle Gateway logic as any other client.

Build Main Gateway Component

Create src/components/GatewayApp.tsx for the main interface. This component serves as the central hub for the Gateway integration, displaying USDC balances across all three domains and providing access to deposit and transfer functionality. The component:

Fetches balances: Retrieves USDC balances from Circle Gateway API for all supported domains
Displays unified view: Shows balances across Sepolia, Base Sepolia, and Arc Testnet in a single interface
Manages state: Handles loading states and error handling for API calls
Integrates forms: Includes deposit and transfer forms for user interactions

The JavaScript SDK doesn’t track a “current” wallet, so this page picks the first EVM wallet account with isEvmWalletAccount and passes it down to the deposit and transfer forms:

JavaScript
React

import { getWalletAccounts, onEvent } from "@dynamic-labs-sdk/client";
import { isEvmWalletAccount } from "@dynamic-labs-sdk/evm";

let evmWalletAccount = getWalletAccounts().find(isEvmWalletAccount) ?? null;

onEvent({
  event: "walletAccountsChanged",
  listener: ({ walletAccounts }) => {
    evmWalletAccount = walletAccounts.find(isEvmWalletAccount) ?? null;
  },
});

import { useGetWalletAccounts } from "@dynamic-labs-sdk/react-hooks";
import { isEvmWalletAccount } from "@dynamic-labs-sdk/evm";

const { data: walletAccounts = [] } = useGetWalletAccounts();
const walletAccount = walletAccounts.find(isEvmWalletAccount);

The full GatewayApp.tsx page below wires this into the balance grid and the deposit/transfer forms:

src/components/GatewayApp.tsx

"use client";

import { useEffect, useState } from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import DynamicLogin from "@/components/dynamic/dynamic-login";
import { useUser, useGetWalletAccounts, useInitStatus } from "@dynamic-labs-sdk/react-hooks";
import { isEvmWalletAccount } from "@dynamic-labs-sdk/evm";
import TransferForm from "@/components/TransferForm";
import DepositForm from "@/components/DepositForm";
import { DOMAIN } from "@/lib/chains";

type Balance = { domain: number; balance: string };

const GATEWAY_API_BASE_URL = "https://gateway-api-testnet.circle.com/v1";

async function gatewayPost(path: string, body: unknown) {
  const res = await fetch(GATEWAY_API_BASE_URL + path, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(body, (_k, v) =>
      typeof v === "bigint" ? v.toString() : v
    ),
  });
  return res.json();
}

async function gatewayBalances(
  token: string,
  depositor: string,
  domains?: number[]
) {
  if (!domains)
    domains = [DOMAIN.sepolia, DOMAIN.baseSepolia, DOMAIN.arcTestnet];
  return gatewayPost("/balances", {
    token,
    sources: domains.map((domain) => ({ depositor, domain })),
  });
}

export default function GatewayApp() {
  const { data: initStatus } = useInitStatus();
  const { data: user } = useUser();
  const { data: walletAccounts = [] } = useGetWalletAccounts();
  const walletAccount = walletAccounts.find(isEvmWalletAccount);
  const address = walletAccount?.address;
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [balances, setBalances] = useState<Balance[]>([]);

  useEffect(() => {
    if (initStatus !== "finished" || !address) return;
    const run = async () => {
      setLoading(true);
      setError(null);
      try {
        const resp = await gatewayBalances("USDC", address, [
          DOMAIN.sepolia,
          DOMAIN.baseSepolia,
          DOMAIN.arcTestnet,
        ]);
        setBalances(resp.balances || []);
      } catch {
        setError("Failed to load balances");
      } finally {
        setLoading(false);
      }
    };
    run();
  }, [initStatus, address]);

  return (
    <div className="w-full max-w-xl space-y-4">
      <Card>
        <CardHeader>
          <CardTitle>Circle Gateway (Testnet)</CardTitle>
        </CardHeader>
        <CardContent className="space-y-3">
          {!user ? (
            <DynamicLogin />
          ) : !walletAccount ? (
            <div>Setting up your embedded wallet...</div>
          ) : (
            <>
              <div className="text-sm text-muted-foreground break-all">
                Address: {address}
              </div>
              <div className="space-y-2">
                <div className="font-medium">USDC Balances</div>
                <div className="text-sm text-muted-foreground">
                  Base Sepolia (domain 6), Sepolia (domain 0), Arc Testnet
                  (domain 26)
                </div>
                {loading ? (
                  <div>Loading balances...</div>
                ) : error ? (
                  <div className="text-red-500">{error}</div>
                ) : (
                  <div className="grid grid-cols-1 gap-2">
                    <div className="flex items-center justify-between rounded-md border p-3">
                      <span>Domain 0 (Sepolia)</span>
                      <span>
                        {balances.find((b) => b.domain === 0)?.balance ?? "0"}{" "}
                        USDC
                      </span>
                    </div>
                    <div className="flex items-center justify-between rounded-md border p-3">
                      <span>Domain 6 (Base Sepolia)</span>
                      <span>
                        {balances.find((b) => b.domain === 6)?.balance ?? "0"}{" "}
                        USDC
                      </span>
                    </div>
                    <div className="flex items-center justify-between rounded-md border p-3">
                      <span>Domain 26 (Arc Testnet)</span>
                      <span>
                        {balances.find((b) => b.domain === 26)?.balance ?? "0"}{" "}
                        USDC
                      </span>
                    </div>
                  </div>
                )}
              </div>

              <div className="pt-2 space-y-2">
                <DepositForm walletAccount={walletAccount} />
                <TransferForm walletAccount={walletAccount} />
              </div>
            </>
          )}
        </CardContent>
      </Card>
    </div>
  );
}

This component fetches and displays USDC balances across all three domains, plus the deposit and transfer forms. It gates the whole UI behind useInitStatus().data === 'finished' and shows the login form until useUser() returns a user; once signed in, it waits for the embedded wallet created by WaasBootstrap before rendering the forms.

Create Deposit Form

Create src/components/DepositForm.tsx for depositing USDC. This component handles the two-step deposit process required by Circle Gateway:

Approve Gateway Wallet: Grants the Gateway Wallet contract permission to spend the user’s USDC
Deposit to Gateway: Transfers USDC into the Gateway Wallet contract on the selected chain

The core of this flow (checking the active network, switching if needed, and sending the approve + deposit transactions) is the same whether or not you’re in React:

JavaScript
React

import { getActiveNetworkData, switchActiveNetwork } from "@dynamic-labs-sdk/client";
import {
  createWalletClientForWalletAccount,
  createPublicClientFromNetworkData,
} from "@dynamic-labs-sdk/evm/viem";
import { parseUnits } from "viem";
import { CONTRACTS, NETWORK_ID } from "./chains";

const erc20Abi = [
  {
    type: "function",
    name: "approve",
    stateMutability: "nonpayable",
    inputs: [
      { name: "spender", type: "address" },
      { name: "amount", type: "uint256" },
    ],
    outputs: [{ name: "", type: "bool" }],
  },
];

const gatewayWalletAbi = [
  {
    type: "function",
    name: "deposit",
    stateMutability: "nonpayable",
    inputs: [
      { name: "token", type: "address" },
      { name: "amount", type: "uint256" },
    ],
    outputs: [],
  },
];

// source is one of "sepolia" | "baseSepolia" | "arcTestnet"
export async function depositUsdc({ walletAccount, source, amount }) {
  const { networkData: activeNetworkData } = await getActiveNetworkData({ walletAccount });
  const selectedNetworkId = NETWORK_ID[source];

  if (activeNetworkData?.networkId !== selectedNetworkId) {
    await switchActiveNetwork({ networkId: selectedNetworkId, walletAccount });
  }

  const tokenAddress = CONTRACTS.usdc[source];
  const gatewayWallet = CONTRACTS.gatewayWallet;
  const value = parseUnits(amount, 6);

  const walletClient = await createWalletClientForWalletAccount({ walletAccount });
  const { networkData } = await getActiveNetworkData({ walletAccount });
  const publicClient = createPublicClientFromNetworkData({ networkData });

  // 1) Approve GatewayWallet to spend USDC
  const approveHash = await walletClient.writeContract({
    address: tokenAddress,
    abi: erc20Abi,
    functionName: "approve",
    args: [gatewayWallet, value],
  });
  await publicClient.waitForTransactionReceipt({ hash: approveHash });

  // 2) Call deposit on GatewayWallet
  const depositHash = await walletClient.writeContract({
    address: gatewayWallet,
    abi: gatewayWalletAbi,
    functionName: "deposit",
    args: [tokenAddress, value],
  });
  await publicClient.waitForTransactionReceipt({ hash: depositHash });

  return depositHash;
}

src/components/DepositForm.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useGetActiveNetworkData, useSwitchActiveNetwork } from "@dynamic-labs-sdk/react-hooks";
import {
  createWalletClientForWalletAccount,
  createPublicClientFromNetworkData,
} from "@dynamic-labs-sdk/evm/viem";
import { getActiveNetworkData } from "@dynamic-labs-sdk/client";
import type { EvmWalletAccount } from "@dynamic-labs-sdk/evm";
import { CONTRACTS, NETWORK_ID } from "@/lib/chains";
import { parseUnits } from "viem";

const erc20Abi = [
  {
    type: "function",
    name: "transfer",
    stateMutability: "nonpayable",
    inputs: [
      { name: "to", type: "address", internalType: "address" },
      { name: "amount", type: "uint256", internalType: "uint256" },
    ],
    outputs: [{ name: "", type: "bool", internalType: "bool" }],
  },
  {
    type: "function",
    name: "approve",
    stateMutability: "nonpayable",
    inputs: [
      { name: "spender", type: "address", internalType: "address" },
      { name: "amount", type: "uint256", internalType: "uint256" },
    ],
    outputs: [{ name: "", type: "bool", internalType: "bool" }],
  },
];

const gatewayWalletAbi = [
  {
    type: "function",
    name: "deposit",
    stateMutability: "nonpayable",
    inputs: [
      { name: "token", type: "address", internalType: "address" },
      { name: "amount", type: "uint256", internalType: "uint256" },
    ],
    outputs: [],
  },
];

type ChainKey = "sepolia" | "baseSepolia" | "arcTestnet";

const CHAINS: { key: ChainKey; label: string; networkId: string }[] = [
  { key: "sepolia", label: "Sepolia (domain 0)", networkId: NETWORK_ID.sepolia },
  { key: "baseSepolia", label: "Base Sepolia (domain 6)", networkId: NETWORK_ID.baseSepolia },
  { key: "arcTestnet", label: "Arc Testnet (domain 26)", networkId: NETWORK_ID.arcTestnet },
];

export default function DepositForm({ walletAccount }: { walletAccount: EvmWalletAccount }) {
  const { data: activeNetwork } = useGetActiveNetworkData({ walletAccount });
  const { mutateAsync: switchNetwork } = useSwitchActiveNetwork();
  const [amount, setAmount] = useState("1");
  const [source, setSource] = useState<ChainKey>("sepolia");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [txHash, setTxHash] = useState<string | null>(null);

  const onDeposit = async () => {
    setLoading(true);
    setError(null);
    setTxHash(null);
    try {
      if (!amount || Number(amount) <= 0) {
        throw new Error("Enter a positive amount");
      }

      const selected = CHAINS.find((c) => c.key === source)!;
      if (activeNetwork?.networkData?.networkId !== selected.networkId) {
        await switchNetwork({ networkId: selected.networkId, walletAccount });
      }

      const tokenAddress = CONTRACTS.usdc[source] as `0x${string}`;
      const gatewayWallet = CONTRACTS.gatewayWallet as `0x${string}`;
      const value = parseUnits(amount || "0", 6);

      const walletClient = await createWalletClientForWalletAccount({ walletAccount });
      const { networkData } = await getActiveNetworkData({ walletAccount });
      const publicClient = createPublicClientFromNetworkData({ networkData });

      // 1) Approve GatewayWallet to spend USDC
      const approveHash = await walletClient.writeContract({
        address: tokenAddress,
        abi: erc20Abi,
        functionName: "approve",
        args: [gatewayWallet, value],
      });
      await publicClient.waitForTransactionReceipt({ hash: approveHash });

      // 2) Call deposit on GatewayWallet
      const depositHash = await walletClient.writeContract({
        address: gatewayWallet,
        abi: gatewayWalletAbi,
        functionName: "deposit",
        args: [tokenAddress, value],
      });
      await publicClient.waitForTransactionReceipt({ hash: depositHash });
      setTxHash(depositHash);
    } catch (e: unknown) {
      const msg = e instanceof Error ? e.message : "Failed to deposit";
      if (
        typeof msg === "string" &&
        msg.toLowerCase().includes("insufficient funds")
      ) {
        setError("Not enough native token to pay gas on the selected chain");
      } else {
        setError(msg);
      }
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Deposit USDC to Gateway</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
          <div className="sm:col-span-1">
            <label className="mb-1 block text-sm text-muted-foreground">
              Source chain
            </label>
            <select
              className="w-full rounded-md border bg-background px-3 py-2 text-sm"
              value={source}
              onChange={(e) => setSource(e.target.value as ChainKey)}
            >
              {CHAINS.map((c) => (
                <option key={c.key} value={c.key}>
                  {c.label}
                </option>
              ))}
            </select>
          </div>
          <div className="sm:col-span-1">
            <label className="mb-1 block text-sm text-muted-foreground">
              Amount (USDC)
            </label>
            <input
              type="number"
              min="0"
              step="0.01"
              value={amount}
              onChange={(e) => setAmount(e.target.value)}
              className="w-full rounded-md border bg-background px-3 py-2 text-sm"
              placeholder="Amount"
            />
          </div>
          <div className="sm:col-span-1 flex items-end">
            <Button onClick={onDeposit} disabled={loading} className="w-full">
              {loading ? "Depositing..." : "Deposit"}
            </Button>
          </div>
        </div>
        {error && <div className="text-sm text-red-500">{error}</div>}
        {txHash && (
          <div className="text-sm">
            Deposit tx: <span className="break-all">{txHash}</span>
          </div>
        )}
        <div className="text-xs text-muted-foreground">
          Approves and deposits USDC into the gateway wallet contract:{" "}
          {CONTRACTS.gatewayWallet}
        </div>
      </CardContent>
    </Card>
  );
}

The React tab is the actual DepositForm.tsx used in this recipe’s Next.js app: it wraps the same approve-then-deposit flow in a form, comparing the active network from useGetActiveNetworkData against the selected source chain and calling useSwitchActiveNetwork’s switchNetwork first if they don’t match, then waiting for the approval transaction to confirm (via a Viem PublicClient created with createPublicClientFromNetworkData) before proceeding with the deposit. Users can select which chain they want to deposit on (Sepolia, Base Sepolia, or Arc Testnet), and the component will switch to that network if needed. It validates that the amount is positive before starting. Once the deposit succeeds, the transaction hash is displayed so users can track it on the blockchain explorer. This makes the USDC available in the Gateway Wallet contract, ready for cross-chain transfers.

Create Transfer Form

This form builds a burn intent, signs it with EIP-712 typed data, submits it to Circle Gateway for attestation, then switches to the destination chain and mints. The signing and minting logic is the same whether or not you’re in React:

JavaScript
React

import { getActiveNetworkData, switchActiveNetwork } from "@dynamic-labs-sdk/client";
import { createWalletClientForWalletAccount } from "@dynamic-labs-sdk/evm/viem";
import { CONTRACTS, DOMAIN, NETWORK_ID } from "./chains";
import { GatewayAPI, burnIntent, burnIntentTypedData } from "./gateway";

const gatewayMinterAbi = [
  {
    type: "function",
    name: "gatewayMint",
    inputs: [
      { name: "attestationPayload", type: "bytes" },
      { name: "signature", type: "bytes" },
    ],
    outputs: [],
    stateMutability: "nonpayable",
  },
];

// source and destination are "sepolia" | "baseSepolia" | "arcTestnet"
export async function transferUsdc({ walletAccount, source, destination, amount }) {
  const address = walletAccount.address;

  // Build burn intent for selected source → destination
  const intent = burnIntent({
    account: address,
    from: {
      domain: DOMAIN[source],
      gatewayWallet: { address: CONTRACTS.gatewayWallet },
      usdc: { address: CONTRACTS.usdc[source] },
    },
    to: {
      domain: DOMAIN[destination],
      gatewayMinter: { address: CONTRACTS.gatewayMinter },
      usdc: { address: CONTRACTS.usdc[destination] },
    },
    amount: parseFloat(amount),
    recipient: address,
  });

  const typedData = burnIntentTypedData(intent);
  const walletClient = await createWalletClientForWalletAccount({ walletAccount });
  const signature = await walletClient.signTypedData({
    domain: typedData.domain,
    types: {
      TransferSpec: typedData.types.TransferSpec,
      BurnIntent: typedData.types.BurnIntent,
    },
    primaryType: typedData.primaryType,
    message: typedData.message,
  });

  const resp = await GatewayAPI.post("/transfer", [
    { burnIntent: typedData.message, signature },
  ]);
  if (resp.success === false) throw new Error(resp.message || "Gateway error");

  const { attestation, signature: attSig } = resp;

  const destinationNetworkId = NETWORK_ID[destination];
  const { networkData: activeNetworkData } = await getActiveNetworkData({ walletAccount });
  if (activeNetworkData?.networkId !== destinationNetworkId) {
    await switchActiveNetwork({ networkId: destinationNetworkId, walletAccount });
  }

  const mintWalletClient = await createWalletClientForWalletAccount({ walletAccount });
  const hash = await mintWalletClient.writeContract({
    address: CONTRACTS.gatewayMinter,
    abi: gatewayMinterAbi,
    functionName: "gatewayMint",
    args: [attestation, attSig],
  });

  return hash;
}

src/components/TransferForm.tsx

"use client";

import { useState } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { useGetActiveNetworkData, useSwitchActiveNetwork } from "@dynamic-labs-sdk/react-hooks";
import { createWalletClientForWalletAccount } from "@dynamic-labs-sdk/evm/viem";
import type { EvmWalletAccount } from "@dynamic-labs-sdk/evm";
import { CONTRACTS, DOMAIN, NETWORK_ID } from "@/lib/chains";
import { GatewayAPI, burnIntent, burnIntentTypedData } from "@/lib/gateway";

const gatewayMinterAbi = [
  {
    type: "function",
    name: "gatewayMint",
    inputs: [
      { name: "attestationPayload", type: "bytes", internalType: "bytes" },
      { name: "signature", type: "bytes", internalType: "bytes" },
    ],
    outputs: [],
    stateMutability: "nonpayable",
  },
];

type ChainKey = "sepolia" | "baseSepolia" | "arcTestnet";

const CHAINS: {
  key: ChainKey;
  label: string;
  networkId: string;
  domain: number;
}[] = [
  {
    key: "sepolia",
    label: "Sepolia (domain 0)",
    networkId: NETWORK_ID.sepolia,
    domain: DOMAIN.sepolia,
  },
  {
    key: "baseSepolia",
    label: "Base Sepolia (domain 6)",
    networkId: NETWORK_ID.baseSepolia,
    domain: DOMAIN.baseSepolia,
  },
  {
    key: "arcTestnet",
    label: "Arc Testnet (domain 26)",
    networkId: NETWORK_ID.arcTestnet,
    domain: DOMAIN.arcTestnet,
  },
];

export default function TransferForm({ walletAccount }: { walletAccount: EvmWalletAccount }) {
  const address = walletAccount.address;
  const { data: activeNetwork } = useGetActiveNetworkData({ walletAccount });
  const { mutateAsync: switchNetwork } = useSwitchActiveNetwork();
  const [amountEth, setAmountEth] = useState("1");
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const [txHash, setTxHash] = useState<string | null>(null);
  const [source, setSource] = useState<ChainKey>("sepolia");
  const [destination, setDestination] = useState<ChainKey>("baseSepolia");

  const onTransfer = async () => {
    setLoading(true);
    setError(null);
    setTxHash(null);
    try {
      if (source === destination) {
        throw new Error("Source and destination must be different");
      }

      const src = CHAINS.find((c) => c.key === source)!;
      const dst = CHAINS.find((c) => c.key === destination)!;

      // Build burn intent for selected source → destination
      const intent = burnIntent({
        account: address,
        from: {
          domain: src.domain,
          gatewayWallet: { address: CONTRACTS.gatewayWallet as `0x${string}` },
          usdc: { address: CONTRACTS.usdc[source] as `0x${string}` },
        },
        to: {
          domain: dst.domain,
          gatewayMinter: { address: CONTRACTS.gatewayMinter as `0x${string}` },
          usdc: { address: CONTRACTS.usdc[destination] as `0x${string}` },
        },
        amount: parseFloat(amountEth),
        recipient: address,
      });

      const typedData = burnIntentTypedData(intent);
      const walletClient = await createWalletClientForWalletAccount({ walletAccount });
      const signature = await walletClient.signTypedData({
        domain: typedData.domain as {
          name: string;
          version: string;
        },
        types: {
          TransferSpec: typedData.types.TransferSpec as Array<{
            name: string;
            type: string;
          }>,
          BurnIntent: typedData.types.BurnIntent as Array<{
            name: string;
            type: string;
          }>,
        },
        primaryType: typedData.primaryType as "BurnIntent",
        message: typedData.message as Record<string, unknown>,
      });

      const resp = await GatewayAPI.post("/transfer", [
        { burnIntent: typedData.message, signature },
      ]);
      if (resp.success === false)
        throw new Error(resp.message || "Gateway error");

      const { attestation, signature: attSig } = resp;

      if (activeNetwork?.networkData?.networkId !== dst.networkId) {
        await switchNetwork({ networkId: dst.networkId, walletAccount });
      }

      const mintWalletClient = await createWalletClientForWalletAccount({ walletAccount });
      const hash = await mintWalletClient.writeContract({
        address: CONTRACTS.gatewayMinter as `0x${string}`,
        abi: gatewayMinterAbi,
        functionName: "gatewayMint",
        args: [attestation, attSig],
      });
      setTxHash(hash);
    } catch (e: unknown) {
      const errMsg = e instanceof Error ? e.message : "Failed to transfer";
      setError(errMsg);
    } finally {
      setLoading(false);
    }
  };

  return (
    <Card>
      <CardHeader>
        <CardTitle>Transfer USDC</CardTitle>
      </CardHeader>
      <CardContent className="space-y-3">
        <div className="grid grid-cols-1 gap-3 sm:grid-cols-3">
          <div className="sm:col-span-1">
            <label className="mb-1 block text-sm text-muted-foreground">
              Source chain
            </label>
            <select
              className="w-full rounded-md border bg-background px-3 py-2 text-sm"
              value={source}
              onChange={(e) => setSource(e.target.value as ChainKey)}
            >
              {CHAINS.map((c) => (
                <option key={c.key} value={c.key}>
                  {c.label}
                </option>
              ))}
            </select>
          </div>
          <div className="sm:col-span-1">
            <label className="mb-1 block text-sm text-muted-foreground">
              Destination chain
            </label>
            <select
              className="w-full rounded-md border bg-background px-3 py-2 text-sm"
              value={destination}
              onChange={(e) => setDestination(e.target.value as ChainKey)}
            >
              {CHAINS.map((c) => (
                <option key={c.key} value={c.key}>
                  {c.label}
                </option>
              ))}
            </select>
          </div>
          <div className="sm:col-span-1">
            <label className="mb-1 block text-sm text-muted-foreground">
              Amount (USDC)
            </label>
            <input
              type="number"
              min="0"
              step="0.01"
              value={amountEth}
              onChange={(e) => setAmountEth(e.target.value)}
              className="w-full rounded-md border bg-background px-3 py-2 text-sm"
              placeholder="Amount"
            />
          </div>
          <div className="sm:col-span-3 flex items-end">
            <Button onClick={onTransfer} disabled={loading} className="w-full">
              {loading ? "Transferring..." : "Transfer"}
            </Button>
          </div>
        </div>
        {error && <div className="text-sm text-red-500">{error}</div>}
        {txHash && (
          <div className="text-sm">
            Mint tx: <span className="break-all">{txHash}</span>
          </div>
        )}
      </CardContent>
    </Card>
  );
}

Both tabs implement the same cross-chain transfer flow using Circle Gateway’s burn-and-mint mechanism: build a burn intent specifying the source and destination domains, contract addresses, amount, and recipient; convert it to EIP-712 typed data and sign it with a Viem wallet client from createWalletClientForWalletAccount. Signing happens on the source chain’s active network, so no switch is needed yet. The signed burn intent is sent to Circle Gateway’s API, which validates the signature and returns an attestation. The flow then switches to the destination chain and uses the attestation to mint USDC there. The React tab is the actual TransferForm.tsx used in this recipe’s Next.js app, wrapping the same flow in a form.

Update Main Page

Update src/app/page.tsx to use the GatewayApp component. This is the entry point for the application that renders the main Gateway interface. QueryClientProvider and DynamicProvider already wrap the tree from Providers in your root layout, so this page only needs the Gateway UI itself.

src/app/page.tsx

"use client";

import { PageLayout } from "@/components/ui/page-layout";
import GatewayApp from "@/components/GatewayApp";

export default function Main() {
  return (
    <PageLayout>
      <GatewayApp />
    </PageLayout>
  );
}

Enable Transaction Simulation

Dynamic’s transaction simulation shows detailed transaction previews before execution. To enable:

Go to your Dynamic developer console
Navigate to Developer Settings → Embedded Wallets → Dynamic
Enable “Show Confirmation UI” and “Transaction Simulation” toggles

When enabled, users see a transaction preview when depositing or transferring USDC:

Configure CORS

Add http://localhost:3000 to CORS origins in your Dynamic developer console under Developer Settings > CORS Origins.

Run the Application

Start the development server:

npm run dev

yarn dev

pnpm dev

bun dev

The application will be available at http://localhost:3000.

Conclusion

If you want to take a look at the full source code, check out the GitHub repository. This integration demonstrates how Dynamic’s embedded wallets connect to Circle Gateway for secure cross-chain USDC transfers using EIP-712 signing.

Recipes

Circle USDC Gateway with embedded wallets

What We’re Building

Key Components

Supported Networks

How It Works

Cross-Chain Transfer Flow

EIP-712 Typed Data

Building the Application

Project setup

Configure Dynamic Environment

Add Chain Configuration

Create the Dynamic Client

Wire Up the Providers

Create Gateway Utilities

Build Main Gateway Component

Create Deposit Form

Create Transfer Form

Update Main Page

Enable Transaction Simulation

Configure CORS

Run the Application

Conclusion

Additional Resources

​What We’re Building

​Key Components

​Supported Networks

​How It Works

​Cross-Chain Transfer Flow

​EIP-712 Typed Data

​Building the Application

​Project setup

​Configure Dynamic Environment

​Add Chain Configuration

​Create the Dynamic Client

​Wire Up the Providers

​Create a Login Component

​Create Gateway Utilities

​Build Main Gateway Component

​Create Deposit Form

​Create Transfer Form

​Update Main Page

​Enable Transaction Simulation

​Configure CORS

​Run the Application

​Conclusion

​Additional Resources

What We’re Building

Key Components

Supported Networks

How It Works

Cross-Chain Transfer Flow

EIP-712 Typed Data

Building the Application

Project setup

Configure Dynamic Environment

Add Chain Configuration

Create the Dynamic Client

Wire Up the Providers

Create a Login Component

Create Gateway Utilities

Build Main Gateway Component

Create Deposit Form

Create Transfer Form

Update Main Page

Enable Transaction Simulation

Configure CORS

Run the Application

Conclusion

Additional Resources