> ## 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 fintech

> Multichain treasury console with crosschain capital movement using Circle Bridge Kit, Gateway, and the Forwarding Service.

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-fintech" />

Arc fintech shows how to run a multichain treasury: aggregate USDC balances
across networks, route payouts using Bridge Kit, and relay the resulting
transactions through the Forwarding Service so funds land where they're needed.

## Preview

<PreviewImage src="/images/sample-apps/arc-fintech.png" alt="Multichain treasury dashboard with balances across Arc, Base, Avalanche, and Ethereum" />

## Flow

<Steps>
  <Step title="View balances across chains">
    The treasury dashboard pulls USDC balances from developer-controlled wallets
    on each supported network through Gateway and displays them as a unified
    view.
  </Step>

  <Step title="Choose payout destination">
    The operator selects a target chain and recipient address for the capital
    movement.
  </Step>

  <Step title="Bridge Kit routes the transfer">
    [Bridge Kit](/app-kit/bridge) determines the optimal crosschain path and
    initiates the USDC transfer between source and destination chains.
  </Step>

  <Step title="Forwarding Service relays the transaction">
    The Forwarding Service picks up the bridged transaction and relays it to the
    destination contract or wallet.
  </Step>

  <Step title="Funds settle on the target chain">
    USDC arrives in the target wallet and the dashboard updates in real time
    through Supabase Realtime.
  </Step>
</Steps>

## Tech stack

* [Next.js App Router](https://nextjs.org/docs/app) and
  [Supabase](https://supabase.com/) for the treasury console
* [Circle developer-controlled wallets](https://developers.circle.com/wallets/dev-controlled)
  for multichain operator wallets
* [Circle Gateway](https://developers.circle.com/gateway) for unified USDC
  balance across chains
* [Bridge Kit](/app-kit/bridge) (`@circle-fin/bridge-kit`) for crosschain
  transfers
* Circle Forwarding Service for relaying transactions
* Supabase Realtime for live transaction status
* [Tailwind CSS](https://tailwindcss.com/) and
  [shadcn/ui](https://ui.shadcn.com/) for the dashboard interface