Usage Guide

HTML prototypes for the Sonr Motr WASM Wallet using Web Awesome components.

Quick Start

bun install
bun run dev

Open http://localhost:5156

Available Views

Auth Views (Popup/Webview Optimized)

Path	Purpose
`/`	Onboarding landing page
`/register.html`	WebAuthn registration
`/login.html`	WebAuthn sign-in
`/authorize.html`	OAuth consent screen
`/demo.html`	Auth webview showcase

Dashboard Views

Path	Purpose
`/accounts.html`	Account management
`/activity.html`	Activity feed
`/tokens.html`	Token display
`/asset.html`	Asset detail page
`/nfts.html`	NFT gallery
`/transactions.html`	Transaction history
`/connections.html`	Connected apps
`/device.html`	Device detail page
`/service.html`	Connected service detail
`/settings.html`	Wallet settings

Project Structure

wa-sink/
├── sink/                  # HTML prototypes
│   ├── welcome.html
│   ├── register.html
│   ├── login.html
│   ├── authorize.html
│   ├── demo.html
│   ├── accounts.html
│   ├── activity.html
│   ├── tokens.html
│   ├── asset.html
│   ├── nfts.html
│   ├── transactions.html
│   ├── connections.html
│   ├── device.html
│   ├── service.html
│   ├── settings.html
│   ├── dashboard.html
│   └── charts.js
├── autoloader.js          # Web Awesome loader
├── serve.ts               # Bun dev server
└── package.json

Viewport Sizes (Auth Views)

Preset	Dimensions	Use Case
Small	360 x 540	Mobile popup
Medium	420 x 600	Default popup
Large	480 x 680	Desktop popup
Mobile	375 x 667	iPhone viewport

Web Awesome Components

Primary color: #17c2ff

Layout Classes

wa-stack - Vertical flex
wa-cluster - Horizontal flex
wa-grid - CSS grid
wa-flank - Space-between

Gap sizes: 3xs, 2xs, xs, s, m, l, xl, 2xl, 3xl

Typography

Headings: wa-heading-xs through wa-heading-2xl
Captions: wa-caption-xs, wa-caption-s, wa-caption-m
Labels: wa-label-s, wa-label-m

Templ Migration

Each HTML file contains a migration guide comment at the top with conversion instructions for Go templ templates.

See MIGRATION.md for detailed migration patterns and HTMX integration examples.

2.5 KiB Raw Blame History