[soamdesai-tfh]

Summary

Restyles the simulator so it looks like the World App's World ID screens while keeping every existing function (scan, paste code, v3/v4 proofs, invalid-proof test, identity switching, reset).

• Design tokens from Nucleus. Adds the public @worldcoin/nucleus package. tailwind.config.js reads its color, type-scale and button JSON at build time, next/font/local loads World Pro from the package (replacing Sora and Rubik), and icons come from the same set through the existing mask-based Icon component. cn() is taught the Nucleus type-scale classes so tailwind-merge stops dropping text colors.
• Home = credential hub. Large "Credentials" title, round QR and avatar toolbar buttons, and a stack of credential cards (Human, Passport, ID, Device) at the app's 100:63 ratio with 70px offsets. Tapping a card lifts it; cards above tuck behind it, cards below fade out, and the app's detail layout (uniqueness ring, method, issuer, "You can optionally share", "Never shared") appears beneath.
• Verification sheet = World ID 4.0 request card. Round app logo with the verified badge, "Complete verification", credential pills, " will see these proofs", then Cancel / Continue with Presenting, Presented and Failed states. Simulator-only controls (v3/v4 toggle, "Send an invalid proof") sit under a "Simulator options" divider; pills are selectable in v3 mode to pick the level to present.
• Chrome. Bottom sheets (32px corners, 58x4 grabber, 40% dim), full-screen dialogs with a 44px toolbar, 56px capsule buttons, settings rows, toasts, the 240px scanner viewfinder and error sheets follow the app's geometry and copy. Identity switching moves into Settings behind the avatar; paste code is a pill on home and a ghost button in the scanner.
• Real artwork. The gem, "Human" wordmark texture, glyph, Official ID emblem, verified badge, status marks and error heroes are the app's assets; pill and proof icons are the ones World App loads from its credential-request CDN. The ID card follows the National ID shader's pastel holographic gradient.
• Removed. The "Downloading Semaphore" chip, the passport PNG card artwork, the unused legacy icons, and dead components (Header, Item, Maintenance, IconGradient, WorldID).

Please review

• src/assets/world-id/ contains artwork copied from the private world-app-ios asset catalogs (gem, wordmark texture, glyph, badges, illustrations) into this public repo. Brand-asset sign-off may be needed before merging.
• src/stores/modalStore.ts ends with a development-only window.__modalStore hook used to drive the request sheet for screenshots. It is gated on NODE_ENV === "development" and stripped from production builds.
• Level-to-card mapping is a simplification: Orb → Human, Document → Passport, Secure Document → ID, Device → a Face-style light card. It lives in src/lib/credentials.ts.

Verification

• pnpm typecheck, pnpm lint (ESLint + Prettier) and pnpm test (20 MCP tests) pass.
• Drove every screen in headless Chrome over the DevTools protocol: home, focused Human/ID/Device cards, settings, paste code, request sheet in waiting/presenting/presented/failed states, expired-QR sheet, scanner permission state and the identity picker.
• Not covered: an end-to-end verification against a live IDKit request; the sheet states were exercised through the dev hook.

Follow-ups (separate PRs in flight)

• Service worker registration race in _app.tsx (registration waits for load, which has already fired in dev) means the prover cache never fills in next dev.
• Test identities can be seeded twice on reload before the persisted store hydrates.
• Once the service worker fix lands, cacheStore has no remaining reader and can be removed.

🤖 Generated with Claude Code

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated
worldcoin-simulator	Ready	Preview	Sep 15, 2026 12:17am UTC