101 lines
2.5 KiB
Markdown
101 lines
2.5 KiB
Markdown
# Usage Guide
|
|
|
|
HTML prototypes for the Sonr Motr WASM Wallet using [Web Awesome](https://webawesome.com) components.
|
|
|
|
## Quick Start
|
|
|
|
```bash
|
|
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](MIGRATION.md) for detailed migration patterns and HTMX integration examples.
|