> ## Documentation Index
> Fetch the complete documentation index at: https://docs.arc.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Sample app | Arc multichain wallet

> Unified USDC balance and crosschain transfers powered by Circle Gateway, with wallet connection through Wagmi and Viem.

export const PreviewImage = ({src, alt, portrait = false}) => <div className={`not-prose my-4 rounded-xl border border-gray-200 dark:border-white/10 overflow-hidden bg-white dark:bg-[#1F2F44] ${portrait ? "max-w-xs mx-auto" : ""}`}>
    <div className="flex items-center gap-1.5 px-3 py-2 border-b border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-white/[0.04]">
      <span className="w-2.5 h-2.5 rounded-full bg-red-400/70 dark:bg-red-400/60" />
      <span className="w-2.5 h-2.5 rounded-full bg-yellow-400/70 dark:bg-yellow-400/60" />
      <span className="w-2.5 h-2.5 rounded-full bg-green-400/70 dark:bg-green-400/60" />
    </div>
    <img src={src} alt={alt} className="block w-full h-auto" loading="lazy" />
  </div>;

export const SampleAppActions = ({back, repoUrl}) => <div className="not-prose flex items-center gap-3 mb-6">
    {back && <a href={back} className="inline-flex items-center gap-1 text-sm text-gray-500 dark:text-[#888] hover:text-[#3E74BB] dark:hover:text-[#ACC6E9] no-underline mr-2">
        <span aria-hidden="true">←</span> Back
      </a>}
    {repoUrl && <a href={repoUrl} target="_blank" rel="noreferrer" className="inline-flex items-center gap-2 px-4 py-2 rounded-lg bg-white dark:bg-[#1F2F44] border border-gray-200 dark:border-white/10 text-sm font-medium text-gray-900 dark:text-white no-underline hover:border-gray-300 dark:hover:border-white/25 hover:bg-gray-50 dark:hover:bg-white/[0.06] transition-all">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
          <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
        </svg>
        Clone and edit
      </a>}
  </div>;

<SampleAppActions back="/arc/references/sample-applications" repoUrl="https://github.com/circlefin/arc-multichain-wallet" />

Arc multichain wallet shows how
[Circle Gateway](https://developers.circle.com/gateway) gives users a single
USDC balance across chains, with deposits on any supported chain and a
burn-and-mint flow for moving funds to the destination.

## Preview

<PreviewImage src="/images/sample-apps/arc-multichain-wallet.png" alt="Unified USDC balance and crosschain transfer interface" />

## Flow

<Steps>
  <Step title="Approve Gateway to spend USDC">
    The user grants an ERC-20 allowance so Gateway can move USDC on their
    behalf.
  </Step>

  <Step title="Deposit on source chain">
    USDC is deposited into the Gateway contract on the chain where the user
    currently holds funds.
  </Step>

  <Step title="Unified balance updates">
    The dashboard reflects the new unified USDC balance in real time through
    Supabase Realtime.
  </Step>

  <Step title="Sign EIP-712 burn intent">
    The user signs a typed-data message authorizing Gateway to burn USDC on the
    source chain.
  </Step>

  <Step title="Gateway issues attestation">
    Gateway verifies the burn and produces an attestation that authorizes
    minting on the destination chain.
  </Step>

  <Step title="Mint USDC on destination chain">
    Gateway mints the equivalent USDC amount on the destination chain,
    completing the crosschain transfer.
  </Step>
</Steps>

## Tech stack

* [Next.js](https://nextjs.org/) and [Supabase](https://supabase.com/) for the
  dashboard and user accounts
* [Circle Gateway](https://developers.circle.com/gateway) for the unified USDC
  balance and crosschain transfers
* [Circle developer-controlled wallets](https://developers.circle.com/wallets/dev-controlled)
  for server-side wallet operations
* [Wagmi](https://wagmi.sh/) and [Viem](https://viem.sh/) for wallet connection
  and EIP-712 signing
* Supported testnets: Arc Testnet, Base Sepolia, Avalanche Fuji
* Supabase Realtime for live deposit and transfer status