Design System

Connection Patterns

Two connection methods: standard wallet (dapp-kit) and zkLogin (Web2 OAuth).

Standard Wallet Connection

Uses @mysten/dapp-kit ConnectButton. Supports Sui Wallet, Slush, Ethos, Suiet. The app never sees private keys — signing is delegated to the wallet.

zkLogin (No Extension Required)

Sign in with Google, Apple, or Twitch. A ZK proof derives a Sui address from the OAuth credential — no wallet extension needed. This is the highest UX unlock for user onboarding.

Sign in with zkLogin

No wallet extension needed. Sign in with your existing account.

Note: This demo simulates the zkLogin flow. Production requires a backend prover service to generate ZK proofs from JWT tokens.

Connection Guard

Wraps any content behind wallet prerequisite checks: connected, correct network, sufficient gas. Shows a specific CTA per failure state.

Wallet Not Connected
Connect your Sui wallet to continue

Sponsored Session

Wraps transaction UI with gas sponsorship context. When a sponsor relay is configured, users don't need SUI for gas fees.

Gas SponsoredTransaction fees covered by sponsor
Transaction UI rendered inside sponsored context. Gas fees covered by sponsor.
Note: This is an R&D shell. Production sponsor integration requires a backend relay that signs gas for the user's transaction.