Arc Fintech Starter App

Modern peer-to-peer payment system. This sample application uses Next.js, Supabase, and Circle Modular Wallets with Passkey security to demonstrate a seamless, gasless P2P payment system on the Arc Network.

Table of Contents

• Prerequisites
• Getting Started
• How It Works
• Environment Variables
• User Accounts

Prerequisites

• Node.js v22+ — Install via nvm
• Supabase CLI — Install via npm install -g supabase or see Supabase CLI docs
• Docker Desktop (only if using the local Supabase path) — Install Docker Desktop
• Circle API key and Entity Secret

Getting Started

1. Clone the repository and install dependencies:

   git clone git@github.com:akelani-circle/arc-p2p-payments.git
   cd arc-p2p-payments
   npm install

2. Set up environment variables:

   cp .env.example .env.local

   Then edit .env.local and fill in all required values (see Environment Variables section below).

3. Set up the database — Choose one of the two paths below:

   Path 1: Local Supabase (Docker)

   Requires Docker Desktop installed and running.

   npx supabase start
   npx supabase migration up

   The output of npx supabase start will display the Supabase URL and API keys needed for your .env.local.

   Path 2: Remote Supabase (Cloud)

   Requires a Supabase account and project.

   npx supabase link --project-ref <your-project-ref>
   npx supabase db push

   Retrieve your project URL and API keys from the Supabase dashboard under Settings → API.

4. Start the development server:

   npm run dev

   The app will be available at http://localhost:3000.

How It Works

• Built with Next.js App Router and Supabase
• Uses Circle Modular Wallets for managing transactions with Passkey security
• Uses Arc Network for fast and low-cost transactions
• Real-time UI updates powered by Supabase Realtime subscriptions
• Styled with Tailwind CSS and components from shadcn/ui

Environment Variables

Copy .env.example to .env.local and fill in the required values:

# Supabase
NEXT_PUBLIC_SUPABASE_URL=your-project-url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your-anon-key

# Circle
CIRCLE_API_KEY=your-circle-api-key
CIRCLE_ENTITY_SECRET=your-circle-entity-secret
NEXT_PUBLIC_CIRCLE_CLIENT_KEY=your-circle-client-key
NEXT_PUBLIC_CIRCLE_CLIENT_URL=https://modular-sdk.circle.com/v1/rpc/w3s/buidl

Variable	Scope	Purpose
NEXT_PUBLIC_SUPABASE_URL	Public	Supabase project URL.
NEXT_PUBLIC_SUPABASE_ANON_KEY	Public	Supabase anonymous key.
CIRCLE_API_KEY	Server-side	Circle API key for wallet operations.
CIRCLE_ENTITY_SECRET	Server-side	Circle entity secret for signing transactions.
NEXT_PUBLIC_CIRCLE_CLIENT_KEY	Public	Circle client key for modular wallets.
NEXT_PUBLIC_CIRCLE_CLIENT_URL	Public	Circle modular wallet SDK RPC URL.

User Accounts

Test Accounts (Local Supabase)

If you are running Supabase locally, you can use the following pre-defined phone numbers and OTPs for testing (configured in supabase/config.toml):

Phone Number	OTP
+14152127777	123456
+14152128888	654321

Default Account

On first visit, you can also sign up with any email and password, then set up your passkey.

Security & Usage Model

This sample application:

• Assumes testnet usage only
• Handles secrets via environment variables
• Is not intended for production use without modification