01 / Access
Wallet connect
Choose, connect, confirm. No hidden signature request.
- Primary
- Continue
- Escape
- Use a different wallet
Back to design system
Design artifact 07 / Popup kit
Trust at the edge of a click.
The moments where a trader commits money, reveals a wallet, or asks for help. Seven dialogs and two inline surfaces, built on the same Terminal Ledger grammar: graphite, hairline rules, one signal color, and a visible way out.
07
modal patterns
02
inline surfaces
01
focus trap
Specimen / 02Live
Trade / Order ticket
Confirm order
Check the size, price, and liquidation level before you sign.
Limit price$68,420.00
Size0.25 BTC
Margin$3,421.00
Liquidation$55,961.20
I understand this position can be liquidated.
CancelConfirm long
Esc closes Focus trappedSheet < 640px
01 / The kit
Seven surfaces. One contract.
Every dialog answers three questions: what is happening, what does it cost, and how do I leave? Open one to test focus, Escape, and the mobile sheet.
02 / Trade
Order confirmation
Size, margin, and liquidation in one final check.
- Primary
- Confirm long
- Escape
- Cancel
03 / Risk
Risk disclosure
The five risks that matter, then an explicit acknowledgement.
- Primary
- I understand
- Escape
- Cancel
04 / Onboarding
Faucet success
A receipt, not a dead end: amount, hash, next step.
- Primary
- Start trading
- Escape
- Close
05 / Support
Support ticket
Structured intake with a ticket ID and a reply promise.
- Primary
- Create ticket
- Escape
- Close
06 / System
Connection lost
Say what is safe, offer retry, keep REST open.
- Primary
- Reconnect now
- Escape
- Use REST
07 / Mobile
Mobile action sheet
Thumb-reachable actions, destructive item last.
- Primary
- Action-specific
- Escape
- Cancel
08 / Inline
Consent + toast
Not every interruption deserves a modal. Privacy choices live in a compact banner; confirmations live in a toast.
02 / Inline surfaces
Interrupt only when it earns it.
Consent is a preference, not a roadblock. Toasts confirm work that is already done. Both stay out of the keyboard path.
08 / Consent banner
Privacy, in plain language
docs.nexwest.app/docs/quickstart
Privacy / Local storage
A small ledger, not a tracking net.
We store your theme, recent searches, and checklist progress in this browser. Optional analytics stays off until you allow it. We do not sell personal data.
Waiting for a choice
The production banner stores the choice in local storage and only loads analytics when a token is configured and the visitor opts in. Reopen it from “Privacy choices” in the footer.
09 / Toast
Confirm, don’t congratulate
Rules
- • One line for what happened, one for what to do next.
- • Auto-dismiss after 6s; pause on hover is a future step.
- • Errors stay until dismissed. Success can disappear.
03 / Behavior
The rules behind the surfaces
Escape always works
Esc closes, the backdrop closes, and every dialog has a visible close control.
Focus is contained
Tab and Shift+Tab cycle inside the panel. Focus returns to the trigger on close.
Mobile is a sheet
Below 640px the dialog anchors to the bottom with a grab handle and safe-area room.
One decision
Primary action is singular. Destructive actions are last and visually separated.
State matrix
No state yet
| Pattern | Trigger | Success | Failure | Recovery |
|---|---|---|---|---|
| Wallet | Connect | Address + chain | Rejected / wrong chain | Retry or switch wallet |
| Order | Confirm | Order ID + open state | Margin / rejection | Edit size, retry |
| Risk | First trade | Accepted | Not accepted | Stay on docs |
| Faucet | Claim | Amount + hash | Cooldown | Show next window |
| Support | Submit | Ticket ID | Validation / storage | Keep the form |
| Connection | Heartbeat loss | Replay from seq | Retry fails | REST fallback |
04 / Handoff
Built as one primitive, not nine one-offs.
All dialogs share a portal, a focus trap, body scroll lock, Escape handling, and a mobile bottom-sheet layout. The kit lives in src/components/ui/modal.tsx and src/components/popups/.
Portal
Rendered into document.body; never clipped by a card.
Focus
Tab cycles inside. Focus returns to the trigger.
Escape
Esc and backdrop both close; the close button is visible.
Mobile
Bottom sheet below 640px with a grab handle.
Motion
180–220ms, reduced-motion safe, never bounces.
Z-index
Consent 70, modal 80, toast 90. No stacking wars.