WalletForge – No-Code Smart Wallet Builder (PWA)

WalletForge is a production-ready Progressive Web App that lets product teams ship fully branded embedded smart wallets in under 30 seconds. It pairs Alchemy Account Kit v3 smart accounts with Supabase storage, a live preview builder, and one-click export workflows.

Built with Next.js 15 App Router, Bootstrap 5, next-pwa, and pure JavaScript.

Features

• ⚡ Hero flow with headline “Launch your own embedded smart wallet in <30 seconds”.
• 🛠️ Drag-and-toggle builder for social logins, passkeys, paymasters, session keys, chains, and branding.
• 🔍 Real-time preview iframe that mirrors the embedded wallet UI.
• 🔐 “Generate Wallet” action creates a Light Smart Account through Alchemy, renders QR + address, and stores config to Supabase.
• 📦 Export suite: copy-paste React component, download auto-generated NPM package, and deploy to Vercel.
• 📱 Fully responsive, glassmorphism styling using Bootstrap utilities only.
• 📲 Installable PWA with offline cache, manifest, and splash theme.
• 🎉 Bonus perks: Alchemy badge, Share to X CTA, and confetti on success.

Tech Stack

• next@15.0.3
• react@18.3.1
• bootstrap@5.3.3 + bootstrap-icons
• next-pwa@5.6.0
• @alchemy/aa-core, @alchemy/aa-alchemy, @alchemy/aa-accounts
• @supabase/supabase-js
• canvas-confetti, jszip, qrcode, viem

Getting Started

1. Install dependencies

npm install

2. Configure environment variables

Create a .env.local file in the project root:

ALCHEMY_API_KEY=your_alchemy_https_api_key
ALCHEMY_PAYMASTER_POLICY_ID=optional_chainId:policyId
WALLETFORGE_OWNER_PRIVATE_KEY=0xyour_eoa_private_key

NEXT_PUBLIC_SUPABASE_URL=https://your-project.supabase.co
NEXT_PUBLIC_SUPABASE_ANON_KEY=public-anon-key
SUPABASE_SERVICE_ROLE_KEY=service-role-key

Security tips

• Use a dedicated EOA with minimal funds for WALLETFORGE_OWNER_PRIVATE_KEY.
• Never commit .env.local or keys to source control.
• You can omit SUPABASE_SERVICE_ROLE_KEY if server-side persistence is not required.

3. Supabase schema

Run the following SQL in Supabase to store generated wallet configs:

create table if not exists wallet_configs (
  id uuid primary key default gen_random_uuid(),
  account_address text not null,
  chain text not null,
  wallet_name text not null,
  template_id text,
  config_json jsonb not null,
  created_at timestamptz default now()
);

4. Development server

npm run dev

Open http://localhost:3000 to access WalletForge.

5. Trigger PWA build (optional)

next-pwa auto-generates the service worker during next build. Run:

npm run build

Export Workflows

• Copy React component – instantly copies an embeddable smart wallet component.
• Download NPM package – zips a ready-to-publish package (walletforge-xxxx).
• Deploy to Vercel – opens a pre-filled deployment URL for one-click hosting.

Deploying to Vercel

1. Ensure environment variables are set in Vercel dashboard (same as .env.local).
2. Click “Deploy to Vercel” from the app or run vercel CLI.
3. PWA assets (manifest + icons) and API routes are production-ready.

vercel.json in the repository pins the framework to Next.js 15 and enables ES modules.

Troubleshooting

Issue	Fix
Missing ALCHEMY_API_KEY error	Confirm .env.local is loaded or set via Vercel.
Supabase insertion fails	Double-check wallet_configs table and service key.
window is undefined	Use actions inside components marked 'use client' (already configured).
Confetti not firing	Ensure browser allows canvas rendering; check console for throttling warnings.

License

MIT – customize and ship production wallets at light speed ⚡. "# walletforge"