Quickstart: Deposit and spend a Unified Balance

# Set up your directory and initialize a Node.js project
mkdir app-kit-unified-balance-browser-wallet
cd app-kit-unified-balance-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 @circle-fin/adapter-solana

# 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 { ArcTestnet, BaseSepolia } from "@circle-fin/app-kit/chains";
import { createViemAdapterFromProvider } from "@circle-fin/adapter-viem-v2";

async function connectEvmBrowserWallet() {
  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,
    capabilities: {
      supportedChains: [BaseSepolia, ArcTestnet],
    },
  });

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

import { SolanaDevnet } from "@circle-fin/app-kit/chains";
import { createSolanaAdapterFromProvider } from "@circle-fin/adapter-solana";
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,
  };
}

async function connectSolanaBrowserWallet() {
  const provider = window.solana;

  if (!provider) {
    throw new Error("No Solana browser wallet found");
  }

  const { connectedAddress } = await connectSolanaWallet(provider);

  const adapter = await createSolanaAdapterFromProvider({
    provider,
    capabilities: {
      supportedChains: [SolanaDevnet],
    },
  });

  return {
    adapter,
    connectedAddress,
  };
}

import { AppKit, type Adapter } from "@circle-fin/app-kit";
import { resolveChainIdentifier } from "@circle-fin/adapter-viem-v2";

const kit = new AppKit();

async function depositFromBaseSepolia(evmAdapter: Adapter) {
  const chain = resolveChainIdentifier("Base_Sepolia");

  if (chain.type !== "evm") {
    throw new Error(`${chain.name} is not an EVM chain`);
  }

  await evmAdapter.ensureChain(chain);

  const result = await kit.unifiedBalance.deposit({
    from: { adapter: evmAdapter, chain: "Base_Sepolia" },
    amount: "2.00",
    token: "USDC",
  });

  console.dir(result, { depth: null });

  return result;
}

{
  amount: "2.00",
  token: "USDC",
  chain: "Base_Sepolia",
  txHash: "0x...",
  explorerUrl: "https://sepolia.basescan.org/tx/0x...",
  ...
}

async function depositFromSolanaDevnet(solanaAdapter: Adapter) {
  const result = await kit.unifiedBalance.deposit({
    from: { adapter: solanaAdapter, chain: "Solana_Devnet" },
    amount: "1.00",
    token: "USDC",
  });

  console.dir(result, { depth: null });

  return result;
}

{
  amount: "1.00",
  token: "USDC",
  chain: "Solana_Devnet",
  txHash: "2k41...",
  explorerUrl: "https://solscan.io/tx/2k41...?cluster=devnet",
  ...
}

async function checkUnifiedBalance(
  evmAdapter: Adapter,
  solanaAdapter: Adapter,
) {
  const balances = await kit.unifiedBalance.getBalances({
    // Both wallets that deposited, one adapter per source.
    sources: [{ adapter: evmAdapter }, { adapter: solanaAdapter }],
    networkType: "testnet",
    includePending: true,
  });

  console.dir(balances, { depth: null });

  return balances;
}

{
  token: "USDC",
  totalConfirmedBalance: "3.00",
  totalPendingBalance: "0.00",
  breakdown: [
    {
      depositor: "0x...",
      totalConfirmed: "2.00",
      totalPending: "0.00",
      breakdown: [{ chain: "Base_Sepolia", confirmedBalance: "2.00", ... }]
    },
    {
      depositor: "...",
      totalConfirmed: "1.00",
      totalPending: "0.00",
      breakdown: [{ chain: "Solana_Devnet", confirmedBalance: "1.00", ... }]
    }
  ]
}

async function spendFromUnifiedBalance(
  evmAdapter: Adapter,
  solanaAdapter: Adapter,
  recipientAddress: string,
) {
  console.log(`Spending 2.50 USDC on Arc_Testnet for ${recipientAddress}...`);

  const result = await kit.unifiedBalance.spend({
    amount: "2.50",
    token: "USDC",
    from: [{ adapter: evmAdapter }, { adapter: solanaAdapter }],
    to: {
      adapter: evmAdapter,
      chain: "Arc_Testnet",
      recipientAddress,
    },
  });

  console.dir(result, { depth: null });

  return result;
}

Spending 2.50 USDC on Arc_Testnet for 0x...

{ recipientAddress: "0x...", destinationChain: "Arc Testnet", txHash: "0x...", ... }