🪙 Canton Network Wallet - Testnet Edition

A web application to connect to Canton Network testnet and view your wallet balance. Built with Auth0 authentication and configured for Palladium Labs testnet.

🎯 What This App Does

• Connect to Canton Network: Uses OAuth2 authentication through the Canton Network Quickstart
• Display User Info: Shows your party ID, wallet URL, and authentication status
• View Balance: Links to your Canton Network wallet to view Canton Coin balance
• Clean UI: Simple, modern interface built with React + TypeScript + Vite

📋 Prerequisites

Before running this app, you need:

1. Canton Network Quickstart running locally

   • Located at: ~/Documents/cn-quickstart/cn-quickstart/quickstart
   • Must be built and started: cd quickstart && make build && make start
   • Backend should be accessible at: http://app-provider.localhost:3000

2. Node.js and npm installed

   • Node.js v24+ (you already have this!)
   • npm v11+ (you already have this!)

🚀 Quick Start

Step 1: Start Canton Network Quickstart

# In a separate terminal
cd ~/Documents/cn-quickstart/cn-quickstart/quickstart
make start

Wait for all containers to be healthy (especially splice, backend-service, nginx).

Step 2: Login to Quickstart (First Time)

1. Open: http://app-provider.localhost:3000
2. Login with credentials:
   • Username: app-provider or app-user
   • Password: (provided by quickstart)
3. This creates an authenticated session

Step 3: Run This Balance App

# In this directory
npm install    # Already done!
npm run dev

The app will start at: http://localhost:5173

Step 4: Use the App

1. Open http://localhost:5173 in your browser
2. Click "Check Connection Status" to verify connection
3. If not authenticated, click "Login with Canton Network"
4. Once connected, you'll see:
   • Your username
   • Your party ID (Canton Network address)
   • Link to your wallet
   • Admin status

🏗️ How It Works

Architecture

Browser (localhost:5173)
    ↓ fetch('/api/user')
Vite Dev Server (proxy)
    ↓ proxies to http://app-provider.localhost:3000/api
Canton Quickstart Backend
    ↓ queries via gRPC
Canton Network Participant Node

Key Features

1. Vite Proxy: Configured in vite.config.ts to forward /api requests to the quickstart backend
2. CORS Handling: Proxy handles CORS issues automatically
3. Session Cookies: Authentication cookies from quickstart backend are preserved
4. Type Safety: Full TypeScript support with proper interfaces

📁 Project Structure

canton-balance-app/
├── src/
│   ├── App.tsx          # Main component with wallet connection logic
│   ├── App.css          # Styling
│   ├── main.tsx         # React entry point
│   └── vite-env.d.ts    # Vite type definitions
├── vite.config.ts       # Vite configuration with proxy
├── package.json         # Dependencies
└── README.md           # This file

🔧 Configuration

Backend URL

The app connects to the quickstart backend via Vite proxy:

// vite.config.ts
server: {
  proxy: {
    '/api': {
      target: 'http://app-provider.localhost:3000',
      changeOrigin: true,
      secure: false,
    }
  }
}

Switching to Testnet

When you get Canton Network testnet access:

1. Update vite.config.ts proxy target to testnet URL
2. Update OAuth login URL in App.tsx
3. Configure testnet authentication credentials

🐛 Troubleshooting

"Failed to fetch user info"

• Cause: Quickstart backend not running
• Fix: Make sure make start completed successfully in quickstart directory
• Check: Visit http://app-provider.localhost:3000 directly

"Not authenticated"

• Cause: No active session with quickstart
• Fix:
  1. Visit http://app-provider.localhost:3000
  2. Login with app-provider or app-user
  3. Return to http://localhost:5173 and click "Check Connection Status"

CORS Errors

• Cause: Vite proxy not working
• Fix: Restart the dev server (npm run dev)

Port Already in Use

• Cause: Another app using port 5173
• Fix: Change port in vite.config.ts or kill the other process

🚢 Next Steps

Adding Balance Query Feature

To actually query Canton Coin balance (not just link to wallet), you'll need to:

1. Understand Canton Coin Contract Structure

   • Find the Template ID for Canton Coin
   • Learn the contract schema (fields, parties, amount)

2. Query Contracts via Backend

   • Option A: Add a new endpoint to quickstart backend that queries CC contracts
   • Option B: Query Participant Query Store (PQS) directly if accessible

3. Display Balance

   • Parse contract data
   • Sum up all Canton Coin contracts owned by user's party
   • Display total balance

Example pseudocode:

const queryBalance = async (partyId: string) => {
  const response = await fetch('/api/canton-coin/balance', {
    method: 'POST',
    body: JSON.stringify({ party: partyId })
  });
  const data = await response.json();
  return data.totalBalance;
}

Deploying to Production

When ready to deploy:

1. Build the app: npm run build
2. Deploy dist/ folder to:
   • Vercel: vercel --prod
   • Netlify: netlify deploy --prod
   • GitHub Pages: Push to gh-pages branch
3. Update proxy/API configuration for testnet

📚 Resources

• Canton Network Docs: https://docs.digitalasset.com
• Canton Network Quickstart: ~/Documents/cn-quickstart/cn-quickstart/quickstart/README.md
• Vite Docs: https://vite.dev
• React Docs: https://react.dev

📄 License

Built for Canton Network development. Free to use and modify.

---

Built with: React + TypeScript + Vite Connects to: Canton Network Quickstart (Local) Future: Deploy to Canton Network Testnet