Arc Fintech App

Modern multi-chain treasury management system. This sample application uses Next.js, Supabase, and Circle Developer Controlled Wallets, Circle Gateway and Circle Bridge Kit with Forwarding Service to demonstrate a multi-chain treasury management system with bridge capabilities.

Table of Contents

• Prerequisites
• Getting Started
• How It Works
• Webhooks & Real-Time Updates
• 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 Developer Controlled Wallets API key and Entity Secret

How It Works

• Built with Next.js App Router and Supabase
• Uses Circle Developer Controlled Wallets for managing multi-chain transactions
• Uses Circle Gateway for a unified, cross-chain USDC balance
• Utilizes @circle-fin/app-kit (kit.bridge / kit.estimateBridge) for bridging assets across supported chains
• Circle webhooks keep transaction and Gateway state in sync (see Webhooks & Real-Time Updates)
• Real-time UI updates powered by Supabase Realtime subscriptions
• Styled with Tailwind CSS and components from shadcn/ui

Webhooks & Real-Time Updates

The dashboard refreshes balances automatically when funds move: a Circle webhook updates a row in Supabase, and a Supabase Realtime subscription pushes that change to the UI.

Circle must reach your endpoint over the public internet, so local development needs a tunnel (e.g. ngrok). Point a tunnel at your dev server and set WEBHOOK_ENDPOINT_URL accordingly:

ngrok ht