Quickstart: Bridge Tokens Across Blockchains

# Set up your directory and initialize a Node.js project
mkdir app-kit-bridge-browser-wallet
cd app-kit-bridge-browser-wallet
npm init -y
npm pkg set type=module

# Install App Kit packages
npm install @circle-fin/app-kit @circle-fin/adapter-viem-v2 viem

# Install TypeScript and a local Vite dev server for the browser demo
npm install --save-dev typescript vite

npx tsc --init

cat <<'EOF' > tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "bundler",
    "strict": true,
    "types": ["node"]
  }
}
EOF

import type { EIP1193Provider } from "viem";

type EIP6963ProviderInfo = {
  uuid: string;
  name: string;
  icon: string;
  rdns: string;
};

type EIP6963ProviderDetail = {
  info: EIP6963ProviderInfo;
  provider: EIP1193Provider;
};

declare global {
  interface WindowEventMap {
    "eip6963:announceProvider": CustomEvent<EIP6963ProviderDetail>;
  }
}

async function discoverBrowserWallets(): Promise<EIP6963ProviderDetail[]> {
  const providers = new Map<string, EIP6963ProviderDetail>();

  const handleProviderAnnouncement = (
    event: WindowEventMap["eip6963:announceProvider"],
  ) => {
    providers.set(event.detail.info.uuid, event.detail);
  };

  window.addEventListener(
    "eip6963:announceProvider",
    handleProviderAnnouncement,
  );
  window.dispatchEvent(new Event("eip6963:requestProvider"));

  await new Promise((resolve) => window.setTimeout(resolve, 250));
  window.removeEventListener(
    "eip6963:announceProvider",
    handleProviderAnnouncement,
  );

  return [...providers.values()];
}

async function connectWallet(provider: EIP1193Provider) {
  await provider.request({
    method: "eth_requestAccounts",
    params: undefined, // Required by the provider type even though this method has no params.
  });

  const accounts = (await provider.request({
    method: "eth_accounts",
    params: undefined, // Required by the provider type even though this method has no params.
  })) as string[];

  return {
    connectedAddress: accounts[0] ?? null,
  };
}

import { createViemAdapterFromProvider } from "@circle-fin/adapter-viem-v2";

async function connectBrowserWallet() {
  const providers = await discoverBrowserWallets();
  const selectedWallet =
    providers.find(
      ({ info }) => info.rdns === "io.metamask" || info.name === "MetaMask",
    ) ?? providers[0];

  if (!selectedWallet) {
    throw new Error("No EIP-6963 browser wallet found");
  }

  const { connectedAddress } = await connectWallet(selectedWallet.provider);

  const adapter = await createViemAdapterFromProvider({
    provider: selectedWallet.provider,
  });

  return {
    adapter,
    connectedAddress,
    walletName: selectedWallet.info.name,
  };
}

import { AppKit } from "@circle-fin/app-kit";

const kit = new AppKit();

async function bridgeUSDCWithBrowserWallet() {
  const { adapter, connectedAddress, walletName } =
    await connectBrowserWallet();

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

  if (result.state === "error") {
    result = await kit.retryBridge(result, {
      from: adapter,
      to: adapter,
    });
  }

  console.log(`Submitted bridge with ${walletName}`, {
    connectedAddress,
    result,
  });
  return result;
}

kit.on("*", (payload) => {
  console.log("Action:", payload);
});

Event received: {
  protocol: "cctp",
  version: "v2",
  traceId: "550afd44ba4c6d1d1bf4880b9ded3840",
  values: {
    name: "approve",
    state: "success",
    txHash: "0xdeadbeefcafebabe1234567890abcdef1234567890abcdef1234567890abcd",
    data: {
      txHash:
        "0xdeadbeefcafebabe1234567890abcdef1234567890abcdef1234567890abcd",
      status: "success",
      cumulativeGasUsed: 17138643n,
      gasUsed: 38617n,
      blockNumber: 8778959n,
      blockHash:
        "0xbeadfacefeed1234567890abcdef1234567890abcdef1234567890abcdef12",
      transactionIndex: 173,
      effectiveGasPrice: 1037232n,
    },
    explorerUrl:
      "https://testnet.arcscan.app/tx/0xdeadbeefcafebabe1234567890abcdef1234567890abcdef1234567890abcd",
  },
  method: "approve",
}

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

import type { CreateSolanaAdapterFromProviderParams } from "@circle-fin/adapter-solana";

type SolanaWalletProvider = CreateSolanaAdapterFromProviderParams["provider"];

declare global {
  interface Window {
    solana?: SolanaWalletProvider;
  }
}

async function connectSolanaWallet(provider: SolanaWalletProvider) {
  const connection = await provider.connect();

  return {
    connectedAddress:
      connection.publicKey?.toString() ??
      provider.publicKey?.toString() ??
      null,
  };
}

import { createViemAdapterFromProvider } from "@circle-fin/adapter-viem-v2";
import { createSolanaAdapterFromProvider } from "@circle-fin/adapter-solana";
import type { EIP1193Provider } from "viem";

async function createBridgeAdapters(
  evmProvider: EIP1193Provider,
  solanaProvider: SolanaWalletProvider,
) {
  const evmAdapter = await createViemAdapterFromProvider({
    provider: evmProvider,
  });

  const solanaAdapter = await createSolanaAdapterFromProvider({
    provider: solanaProvider,
  });

  return {
    evmAdapter,
    solanaAdapter,
  };
}

import { AppKit } from "@circle-fin/app-kit";
import type { EIP1193Provider } from "viem";

const kit = new AppKit();

async function bridgeUSDCWithSolanaBrowserWallet(
  evmProvider: EIP1193Provider,
  solanaProvider: SolanaWalletProvider,
) {
  const { evmAdapter, solanaAdapter } = await createBridgeAdapters(
    evmProvider,
    solanaProvider,
  );

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

  console.log(
    "Submitted bridge from Solana browser wallet to EVM destination",
    {
      result,
    },
  );

  return result;
}

let result = await kit.bridge({
  from: { adapter: solanaAdapter, chain: "Solana_Devnet" },
  to: { adapter: evmAdapter, chain: "Arc_Testnet" },
  amount: "1.00",
});

if (result.state === "error") {
  result = await kit.retryBridge(result, {
    from: solanaAdapter,
    to: evmAdapter,
  });
}

kit.on("*", (payload) => {
  console.log("Action:", payload);
});

steps: [
  {
    name: "burn",
    state: "success",
    txHash: "5UfgJ5vVZxUxefDGqzqkVLHzHxVTyYH9StYyHKSNc7WLyFTmgL5RFGujWNqEbUBdNKRkHmx7ZRQR3FVhdEwxKHm",
    data: {
      txHash:
        "5UfgJ5vVZxUxefDGqzqkVLHzHxVTyYH9StYyHKSNc7WLyFTmgL5RFGujWNqEbUBdNKRkHmx7ZRQR3FVhdEwxKHm",
      status: "success",
      blockNumber: 312456789n,
      blockHash: "HxVTyYH9StYyHKSNc7WLyFTmgL5RFGujWNqEbUBdNK",
      transactionIndex: 0,
      gasUsed: 25000n,
      cumulativeGasUsed: 0n,
      effectiveGasPrice: 5000n,
      explorerUrl:
        "https://solscan.io/tx/5UfgJ5vVZxUxefDGqzqkVLHzHxVTyYH9StYyHKSNc7WLyFTmgL5RFGujWNqEbUBdNKRkHmx7ZRQR3FVhdEwxKHm?cluster=devnet",
    },
  },
];