Web3 patterns · spec sheet

Wallet, auth, transactions, staking, project-backing

Each tile is one state your agents need to ship. Copy the markup from any tile and drop it into the SPA — the classes already match public/sc.css where they overlap. Tiles labelled NEW are not yet in the codebase.

01 · Wallet
Sidebar wallet pill — all four states
Lives at the bottom of nav#appNav. State is computed from the wallet adapter; agents should branch on connected ? wrongNetwork ? 'wrong' : 'connected' : busy ? 'connecting' : 'idle'.
A
Idle
DISCONNECTED
B
Connecting
PENDING
Disable click. Spinner replaces the ◎ glyph. ~1–3s typical.
C
Connected
READY
Truncate to head6…tail4. Cyan accent on connected. Right-rail chain pill.
D
Wrong network
SWITCH
Click triggers wallet_switchEthereumChain to Base (8453).
02 · Connect modal
Wallet picker — opens from the sidebar pill
Three wallets at minimum (MetaMask, Coinbase, WalletConnect). Last-used wallet pinned to top with a ★ recent meta. WalletConnect shows the QR sheet on click (not pictured — that's a separate sub-state).
A
Wallet picker
NEW
Connect a wallet
Base · Chain 8453 · Read-only by default
Backdrop rgba(10,14,26,.85) + backdrop-filter: blur(4px). Esc-to-close.
B
No wallet detected
EDGE
No wallet detected
Install one to continue
Already have one? Refresh the page after installing.
Show when window.ethereum is missing. Link out to wallet's install page.
03 · SIWE auth
Three-step "Sign In with Ethereum" sequence
Fires after connect, before the app loads. The message must echo domain · uri · chainId · nonce · issuedAt; the nonce comes from /api/auth/nonce. Server verifies via /api/auth/login.
A
Idle · prompt
STEP 1
Verify your wallet
Sign a message to prove you own 0x4a…f2c. No gas, no transaction.
domain: supercompute.io
chain: Base · 8453
nonce: 8f2c…a91d
issued: 2026-05-13T14:22Z
Show the message before signing — users hate blind signatures.
B
Awaiting signature
STEP 2
Check your wallet
A signature request is open in your wallet. Approve to continue.
Waiting for signature…
Disable the button. Mirror MetaMask's "awaiting confirmation".
C
Verified
STEP 3
You're in.
Welcome back. Loading your member dashboard…
✓ Signed in as 0x4a…f2c
Auto-dismiss after ~600ms. Cache the session token in KV.
D
User rejected
REJECTED
Signature cancelled
You can try again or sign in with email instead.
ACTION_REJECTED · User rejected the request
Catch code 4001. Don't auto-retry.
E
Server verify failed
RETRY
Couldn't verify signature
Nonce may have expired. Generate a fresh one and try again.
401 · nonce_expired · request a new nonce
Nonces in KV with 5-min TTL. Refresh nonce + restart from step A.
04 · Transaction lifecycle
Toasts + modals for every on-chain action
Pattern: open the action modal, user clicks Confirm, modal flips to a "check your wallet" state, then to "pending" with a BaseScan link, then "success" with the hash. Toasts for shorter actions like claim.
A
Toast · pending
PENDING
Stake submitted
100 $SCOM · awaiting confirmation
View on BaseScan ↗
Sticky toast. Auto-promotes to success on confirmation.
B
Toast · success
CONFIRMED
✓
Stake confirmed
100 $SCOM staked · 12.4% APR active
View tx ↗
Auto-dismiss after 6s. Click to reveal the hash.
C
Toast · error
FAILED
!
Stake reverted
Insufficient allowance · approve first
Retry →
Map common reverts to plain-English hints.
D
Modal · pending
PENDING
Transaction submitted
Backing The Glyph Foundry with 50 USDC. Usually confirms in under 2 seconds on Base.
tx: 0x9a4c…71f3b8e2 copy
Use for high-stakes flows: backing a project, claiming, deploying.
E
Modal · success
CONFIRMED
✓
You're backing The Glyph Foundry
50 USDC committed. You'll receive 50 GLYPH credit when the project launches.
tx: 0x9a4c…71f3b8e2 copy
Share-CTA optional. Persist to user history.
05 · Balance bar
Sticks above the page body on member surfaces
Live ETH + USDC + $SCOM + network indicator. Refresh every 15s via publicClient.getBalance. Hide when disconnected.
A
Connected · Base
LIVE
Address
0x4a…f2c
ETH
0.842ETH
USDC
1,204.50USDC
$SCOM
8,420SCOM
B Base
Light-touch live indicator. Click an asset to open send/receive.
06 · Staking
$SCOM stake / LP / claim card
Input-driven card. Max button fills from the user's balance. APR live from the contract. Disable Stake until amount > 0 and ≤ balance.
A
Stake · idle
EMPTY
SC
Stake $SCOM
Single-sided · 30-day unlock
12.4% APR
$SCOM ▾
Wallet balance8,420 $SCOM
Already staked2,500 $SCOM
Default state. CTA disabled until amount is valid.
B
Stake · valid
READY
SC
Stake $SCOM
Single-sided · 30-day unlock
12.4% APR
$SCOM ▾
Wallet balance8,420 $SCOM
Projected (12 mo)+124 $SCOM
Pink-focus border on input. CTA enables and shows the amount.
C
Approve first
APPROVE
SC
Stake $SCOM
First-time staker
12.4% APR
$SCOM
Step 1 of 2: Approve the staking contract to move your $SCOM. One-time gas fee.
Show on first stake. After approval the CTA flips to "Stake".
07 · Back a builder
Project launch card — back, track, claim
Three card states for the projects rail. All-or-nothing target + soft-cap. Action surface lives in the project detail page; cards here are the landing-grid version.
A
Open · accepting backs
LIVE
⌬
The Glyph Foundry
$GLYPH · agentic typeface launch
Raised
24.2K
Backers
312
64% of 38K goal8 days left
Default open state. Backers + raised refresh on confirmation.
B
Funded
FUNDED
✓
KNIGHT Open-Source
$KNIGHT · TradeDesk agent
Raised
52.6K
Backers
684
132% fundedClosed May 3
Green theming once goal hits. CTA flips to "Track delivery".
C
Claim available
CLAIM
//
KNIGHT Open-Source
$KNIGHT · delivery complete
Your back
50 USDC
Claimable
5,000
$KNIGHT credit · vested
Surface in user inventory + project card when wallet matches.
/* End of sheet — covers 7 surfaces × 22 states. Pair with cms-patterns.html for content workflows. */