Swift

Swift turns invoices into instant payments.

An AI agent validates the invoice, builds the transaction, and generates a QR code; the client scans, verifies, and pays instantly with one tap.

No addresses. No errors. Just scan and pay!

Live at: https://swift-ckb.vercel.app

Features

• Invoice Creation: Simple form to create freelancer invoices
• AI Validation: Smart validation of invoice data
• QR Code Generation: Instant QR code for payment
• QR Scanning: Camera-based, or manually paste link as a fallback
• CKB Integration: Built on CKB Pudge testnet
• Transaction Tracking: Live explorer integration

How It Works

1. Freelancer creates an invoice with name, work description, amount, and CKB address
2. AI Agent validates the invoice data
3. CKB Integration builds the transaction and calculates fees
4. A QR code is generated with the invoice and transaction details
5. Client scans the QR code and reviews the invoice
6. Payment is approved, signed, and broadcast to the CKB testnet
7. Confirmation displays the transaction hash and explorer link

Payment Model

• The invoice amount is sent entirely to the freelancer
• The network fee is paid separately by the client’s wallet
• The app does not include the network fee in the invoice total

Screenshots

1. User Onboarding (Wallet Connection & Role Selection)

2. Freelancer Dashboard (Recent Invoices)

3. Invoice Creation Interface

4. QR Code & Payment Link Generation

5. Invoice Access via Shared Link

6. Transaction Approval (Client Side)

7. Client Dashboard Overview

8. Alternative Payment Method (Fallback)

9. Fallback Payment via Direct Link

Screenshots (Previous Version)

Landing Page (Legacy UI)

QR Code Generation (Legacy)

QR Usage Instructions (Legacy)

Tech Stack

• Frontend: React 19 + Vite 6 + TailwindCSS 3
• CCC Core & Connector: @ckb-ccc/core + @ckb-ccc/connector-react
• QR: qrcode + html5-qrcode

Installation & Usage

Prerequisites

• Node.js 18+
• npm

Setup Instructions

1. Install dependencies:

npm install

2. Create your local env file:

cp .env.example .env

3. Set the environment variables:

VITE_SUPABASE_URL=https://your-project.supabase.co
VITE_SUPABASE_ANON_KEY=your-anon-key
VITE_APP_URL=http://localhost:5173

4. Start the app:

npm run dev

6. Open:

http://localhost:5173

Project Structure

swift/
├── index.html
├── package.json
├── vercel.json
├── src/
│   ├── App.jsx
│   ├── main.jsx
│   ├── index.css
│   ├── lib/
│   │   └── supabase.js
│   ├── utils/
│   │   └── validateInvoice.js
│   ├── ckb/
│   │   └── transaction.js
│   └── components/
│       ├── Landing.jsx
│       ├── RoleSelection.jsx
│       ├── FreelancerDashboard.jsx
│       ├── InvoiceForm.jsx
│       ├── QRDisplay.jsx
│       ├── ClientDashboard.jsx
│       ├── QRScanner.jsx
│       ├── InvoiceApproval.jsx
│       └── Confirmation.jsx
└── .env.example

Useful Links

• Faucet: https://faucet.nervos.org
• Explorer: https://testnet.explorer.nervos.org