icu-wallet-kit-demo

A live demo of icu-wallet-kit's ConnectButton, WalletPicker, useWallet and framework-free core — slotted through icu-ui-kit's real Button/Modal/Alert and re-themed live by an accent picker, so the point of the kit's slot system ("your app's own look, not the kit's") is something you can watch happen rather than take on faith.

• Pure Preact, no compat alias. The app imports icu-wallet-kit/preact and icu-ui-kit/preact directly — never the React entries, never preact/compat.
• No real wallet required. icu-wallet-kit has no way to fake a browser extension being installed, so this demo ships a small, clearly-labelled simulated wallet (src/lib/fakeWallet.ts) that announces itself over the real eip6963:announceProvider event. Everything downstream of that — discovery, the picker row, connect, the connected chip, chain switching, disconnect — is icu-wallet-kit's own code, unmodified.
• No CSS framework of its own. icu-wallet-kit ships zero styling; the only design system on this page is icu-ui-kit's stylesheet plus this demo's own small dm-* layer.

Run it

npm ci
npm run dev        # vite dev server

Other scripts:

Script	What it does
npm run build	Production build to dist/
npm run preview	Serve the built dist/ via Vite's own preview server
npm run typecheck	tsc --noEmit
npm run verify	Headless Chrome DevTools Protocol check against a built dist/, plus a screenshots/gallery.png screenshot — zero extra dependencies, see scripts/verify.mjs
npm start	Serve dist/ for production — scripts/serve.mjs, binds 0.0.0.0:$PORT

Requires Node >=20.

How it resolves both kits

vite.config.ts aliases icu-wallet-kit/preact, icu-wallet-kit/core, icu-ui-kit/preact, icu-ui-kit/core and icu-ui-kit's stylesheet paths straight onto sibling working trees (../icu-wallet-kit/src, ../icu-ui-kit/src) when they're present — so local development always exercises whatever is currently on disk in those checkouts, not a stale installed copy. Each kit is detected independently, so one can be mid-edit without breaking the other's resolution.

Set WALLET_KIT=dist and/or UI_KIT=dist to force resolution through the installed packages instead — what a deploy does, since it clones this repo alone and neither sibling exists there.

/core and /preact only get their own independent module-scoped session (what npm run verify's CoreGallery check tests) when consumed this way — against sibling source, both entries resolve to the same TypeScript file, so that one check is a no-op NOTE rather than a real PASS/FAIL unless both npm run build and npm run verify are run with WALLET_KIT=dist.

Deploying

nixpacks.toml pins the Node version, runs npm ci (never npm install — the lockfile is the point of a reproducible build) and starts the container with scripts/serve.mjs.

License

MIT — see LICENSE.