Skip to content

Instantly share code, notes, and snippets.

@roninjin10
Created February 2, 2026 23:10
Show Gist options
  • Select an option

  • Save roninjin10/c478c8f78c94bef7a30cf6f2e76845ff to your computer and use it in GitHub Desktop.

Select an option

Save roninjin10/c478c8f78c94bef7a30cf6f2e76845ff to your computer and use it in GitHub Desktop.
Misty Design

Misty Browser — UI/UX Design Document

Status: Draft Last updated: 2026-02-02 Related: PRD, Engineering


Design pillars

  • Single window, no popups: overlays/drawers inside the main view
  • Always show provenance: origin, network, account, and data source (Remote vs Local)
  • State diffs > raw calldata: show what changes, then details
  • Progressive disclosure: defaults simple, "Advanced" reveals traces/logs

Primary surfaces

1. Browser Chrome

  • Tabs
  • URL bar with ENS/Basename resolution and safety indicator
  • Nav controls
  • Wallet/network chip
  • Global status (sync, indexing mode)

2. Sidebar

  • Agent history (conversations)
  • Bookmarks
  • Wallet panel (accounts, approvals, recent activity)

3. Main canvas

  • Home agent conversation
  • Webview (dApp)
  • Explorer views (native pages)

Home: agent-first screen

Layout

  • Top bar: Misty logo, network badge ("Base"), wallet chip (locked/unlocked), overflow menu
  • Main: conversation thread + composer
  • Left sidebar: conversation history + search
  • "Quick actions" chips below composer (swap, balance, last tx, approvals)

Conversation message types

  • Text messages (agent explanations, warnings)
  • Rendered components (typed UI blocks)
  • Action prompts (confirm/cancel, connect/disconnect)
  • Inline citations (what data source was used: RPC, Index Supply, Local index)

Rendered component rules

  • Components are first-party and defined by Misty
  • Agent output references components via schema (type, props)
  • Components cannot embed raw HTML/JS
  • Components are deterministic given props

Example: "Swap 0.1 ETH to USDC"

Agent produces:

  • SwapQuoteCard:
    • From token + amount
    • To token + quote amount
    • Venue selector (Aerodrome vs Uniswap)
    • Slippage
    • Estimated gas
    • "Simulate" (always run) + "Confirm Swap"

UX contract

  • The "Confirm" button is disabled until simulation result is returned (or simulation fails with explicit reason + "Proceed anyway (unsafe)" gated behind advanced toggle).

Wallet panel

Coinbase Smart Wallet UX (flagship feature)

The wallet prioritizes Smart Wallet with passkeys for frictionless onboarding, while supporting traditional HD wallets for power users.

New user flow (passkey):

  1. "Create Wallet" → prompt Face ID / Touch ID
  2. Passkey created, Smart Wallet deployed (gasless via Paymaster)
  3. User is ready — no seed phrase, no password

Import flow (existing mnemonic):

  1. "Import Wallet" → enter 12/24 word phrase
  2. EOA derived from mnemonic
  3. Smart Wallet deployed with EOA as owner
  4. User can optionally add passkey as backup

Wallet panel shows:

  • Smart Wallet address (primary)
  • Owner type indicator: "Passkey" / "Seed Phrase" / "Multiple owners"
  • Add owner button (for recovery setup)

Owner management UI

┌─────────────────────────────────────────┐
│  Wallet Owners                          │
├─────────────────────────────────────────┤
│  ✓ Passkey (this device)       [Active] │
│    Face ID • Added Jan 15               │
│                                         │
│  ✓ Recovery phrase             [Backup] │
│    HD Wallet • Added Jan 15             │
│                                         │
│  + Add another owner                    │
│    (passkey, hardware wallet, contact)  │
└─────────────────────────────────────────┘

Smart Wallet benefits shown in UI

When sending transactions, show:

  • "Gasless" badge when Paymaster is sponsoring
  • "Batch" indicator when combining multiple actions
  • Owner who will sign (passkey icon vs key icon)

States

  1. No wallet → show create (passkey) / import (mnemonic) options
  2. Wallet exists but locked → prompt biometric or password
  3. Unlocked
  4. Connect request (per-origin)
  5. Sign message / typed data request
  6. Send transaction request (always includes simulation)
  7. Approval management
  8. Owner management (add/remove owners, recovery setup)

Key UI elements

  • Account list with labels + Basename/ENS display
  • Network selector (Base default; others in "Advanced Networks")
  • "Lock now" + auto-lock timer display
  • Permissions: list of connected sites, revoke

Signing overlays

All overlays must show:

  • Origin (domain + verified)
  • Network (Base)
  • Account
  • Human-readable summary
  • Simulation delta (for tx)
  • Expandable raw details

Explorer views (native pages)

Search entry points

  • URL bar: supports 0x…, ENS, Basenames, tx hash
  • Home quick action: "View transaction"
  • Right-click address in any component: "Open in Explorer"

Address page

Smart Wallet detection: If address is a Coinbase Smart Wallet, show enhanced view:

┌─────────────────────────────────────────────────────────────────┐
│  0x1234...abcd                              [Smart Wallet v1.1] │
├─────────────────────────────────────────────────────────────────┤
│  Owners (2)                                                     │
│  ├─ Passkey: keys.coinbase.com (credential: abc123...)         │
│  └─ EOA: 0x5678...efgh                                         │
│                                                                 │
│  Account Abstraction Activity                                   │
│  ├─ UserOperations: 47                                         │
│  ├─ Gas sponsored: 0.12 ETH (via Coinbase Paymaster)           │
│  └─ Batched transactions: 12                                   │
└─────────────────────────────────────────────────────────────────┘

Tabs:

  • Overview (balances snapshot, approvals summary, owners for Smart Wallets)
  • Transactions (decode UserOperations to show inner transactions)
  • Token transfers
  • Approvals
  • Contracts (if verified)
  • Owners (Smart Wallet only — add/remove history)
  • Analytics (optional later)

Important: Address page must show Data Source badge:

  • "Local (TrueBlocks)" or "Remote (Index Supply)" or "RPC (direct)"

This is core to user trust and to debugging.

Transaction page

  • Summary: status, block, timestamp, from/to, value, fee
  • Simulation diff (if tx is pending or if simulated before)
  • Decoded actions (protocol-aware where possible)
  • Logs/events (expandable)
  • "Copy share link"

Indexing and data source UX (Base-specific)

How indexing works

By default, Misty builds a local TrueBlocks index in the background. While syncing, it falls back to Index Supply for instant data. Once the local index catches up, all queries stay local.

User-facing modes:

  1. Standard (default)

    • TrueBlocks builds locally in background
    • Index Supply provides data until local is ready
    • Automatic switchover when synced
  2. Private

    • Local TrueBlocks only — no remote fallback
    • May show partial results until fully synced

Status indicator

A persistent chip near network badge:

  • "Index: Remote" (green)
  • "Index: Building (12%)" (yellow)
  • "Index: Local" (green)

Click opens "Index Settings" sheet:

  • Progress bar
  • Disk usage estimate
  • RPC requirements ("local node recommended")
  • Toggle for "Allow remote fallback"

Note: Local indexing via TrueBlocks requires time and resources to build. UX should be transparent about sync progress and resource usage.


Settings

Security

  • Auto-lock timeout
  • Require simulation before tx confirm (default ON)
  • Block "unlimited approvals" without extra confirmation (default ON)

Data & privacy

  • Index mode: Standard / Private
  • Fallback provider: Index Supply (used during TrueBlocks sync), BYO key option
  • Clear local cached history
  • Optional telemetry (off by default)

Server sync (user-consented updates)

All server-side data requires explicit user approval before applying.

Update notification:

┌─────────────────────────────────────────────────────────────────┐
│  🔄 Update Available                                            │
│                                                                 │
│  47 new labels • 3 app updates • 2 blocklist entries           │
│                                                                 │
│  [Review Changes]                      [Dismiss]  [Update Now] │
└─────────────────────────────────────────────────────────────────┘

Review changes screen:

┌─────────────────────────────────────────────────────────────────┐
│  Review Update                                      [Apply All] │
├─────────────────────────────────────────────────────────────────┤
│  New Labels (47)                                    [Accept All]│
│  ├─ ☑ 0x1234...abcd → "Aerodrome: Router v2"                   │
│  ├─ ☑ 0x5678...efgh → "Morpho: Blue Pool"                      │
│  ├─ ☐ 0x9abc...ijkl → "Unknown DEX"        [Reject]            │
│  └─ ... 44 more                                                │
│                                                                 │
│  Blocklist Additions (2)                            [Accept All]│
│  ├─ ☑ 0xdead...beef → "Known phishing contract"                │
│  └─ ☑ fake-uniswap.com → "Phishing site"                       │
│                                                                 │
│  App Updates (3)                                    [Accept All]│
│  ├─ ☑ Aerodrome integration updated                            │
│  └─ ... 2 more                                                 │
└─────────────────────────────────────────────────────────────────┘

Users can:

  • Accept all changes at once
  • Review and cherry-pick individual changes
  • Reject specific items
  • Dismiss and review later

Error states and copy requirements

Index Supply reorg handling

Index Supply can send a cursor/block height lower than previously received; UI should show:

  • "Chain reorg detected — refreshing activity feed"

…and then reinitialize state per crash-only guidance. (Index Supply)

Remote query failure

  • "Remote history temporarily unavailable"
  • Suggest: retry, switch to local-only (if enabled)

Local indexing not configured

  • "Local index requires a dedicated RPC endpoint. Add one in Settings."

(Do not auto-start local indexing silently.)



Companion extension UX

Connection flow

When a dApp requests connection via the Misty extension:

  1. Extension forwards eth_requestAccounts to Misty desktop
  2. Misty shows connection dialog (even if minimized — brings window to front)
  3. User selects account(s) to connect
  4. Approval sent back through extension to dApp

Transaction flow

  1. dApp calls eth_sendTransaction via extension
  2. Extension routes to Misty desktop
  3. Misty shows full transaction review (same as internal webview):
    • Origin (e.g., "uniswap.org")
    • Simulation results
    • Decoded calldata
    • Warnings
  4. User approves/rejects in native UI
  5. Result returns to dApp

Status indicator

Extension popup shows:

  • Connection status: "Connected to Misty" / "Misty not running"
  • Current account + network
  • Quick actions: lock wallet, switch account

"Appear as MetaMask" mode

For dApps that only detect MetaMask:

  • Toggle in extension settings
  • Sets window.ethereum.isMetaMask = true
  • Maintains Misty functionality underneath

References

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment