> ## 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 P2P payments

> Gasless peer-to-peer USDC payments on Arc, secured by passkey-protected Circle Modular Wallets.

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-p2p-payments" />

Arc P2P payments shows how to ship a passkey-secured wallet UX with gasless USDC
transfers on Arc. Users sign in with a phone number, authenticate with a
WebAuthn passkey, and send USDC to a contact without holding gas tokens.

## Preview

<PreviewImage src="/images/sample-apps/arc-p2p-payments.png" alt="P2P payments mobile interface showing USDC balance and Fund Wallet action" portrait />

## Flow

<Steps>
  <Step title="Sign up and create a passkey">
    The user registers with phone + OTP through Supabase Auth and creates a
    WebAuthn passkey stored on their device.
  </Step>

  <Step title="Modular Wallet provisioned">
    A Circle Modular Wallet is automatically created and linked to the user's
    passkey, providing a gasless smart account on Arc.
  </Step>

  <Step title="Pick recipient and amount">
    The sender selects a contact and enters a USDC amount to transfer.
  </Step>

  <Step title="Authorize transfer with passkey">
    The user confirms the transaction by authenticating with their device
    passkey (biometric or PIN).
  </Step>

  <Step title="Gasless USDC transfer on Arc">
    The signed user operation is submitted to Arc Network, where a paymaster
    sponsors gas so the sender pays nothing beyond the USDC amount.
  </Step>
</Steps>

## Tech stack

* [Next.js App Router](https://nextjs.org/docs/app) and
  [Supabase](https://supabase.com/) for accounts and history
* [Circle Modular Wallets](https://developers.circle.com/wallets/modular) with
  passkey authentication
* [Arc Network](/arc-chain) for fast, low-cost transaction settlement
* Supabase Realtime for live payment status
* [Tailwind CSS](https://tailwindcss.com/) and
  [shadcn/ui](https://ui.shadcn.com/) for the mobile-style interface
* Phone + OTP authentication through Supabase Auth