Update README Screen Map with all views and state transitions
All checks were successful
check / check (push) Successful in 17s

Complete rewrite of the Screen Map section documenting all 17 views:
Welcome, Home, AddWallet, ImportKey, AddressDetail, AddressToken,
Send, ConfirmTx, WaitTx, SuccessTx, ErrorTx, Receive,
TransactionDetail, AddToken, Settings, SiteApproval, TxApproval.

Each view documents its elements (with display details like blockies,
color dots, etherscan links, formatting) and all state transitions
with their destination screens and conditions.
This commit is contained in:
2026-02-27 12:07:11 +07:00
parent d229000258
commit 6c3cc0c516

276
README.md
View File

@@ -187,140 +187,270 @@ transitions.
- **When**: No wallets exist yet. - **When**: No wallets exist yet.
- **Elements**: "AutistMask" heading, brief intro text, "Add wallet" button. - **Elements**: "AutistMask" heading, brief intro text, "Add wallet" button.
- **Transitions**: - **Transitions**:
- "Add wallet" → pushes **AddWallet** - "Add wallet" → **AddWallet**
#### Home #### Home
- **When**: At least one wallet exists. This is the root screen. - **When**: At least one wallet exists. This is the root screen.
- **Elements**: - **Elements**:
- Header: "AutistMask", Settings button - Header: "AutistMask", Settings gear button
- Total ETH balance across all addresses (large text) - Active address ETH balance (large) + USD value (inline parentheses)
- Total USD value (small text below ETH total, cached 5 min) - Total USD value across all tokens (small text)
- List of wallets, each showing: - Active address (color dot, full address, etherscan link, tap to copy)
- Wallet name (editable — tap to rename) - Send / Receive quick-action buttons
- "+" button (HD wallets only) to derive next address - ETH/USD price display
- List of addresses under that wallet: - Wallet list: each wallet shows name (tap to rename), "+" button (HD only),
- Address name (editable — tap to rename, default "Address N") and its addresses with color dots, balances, and `[info]` buttons
- Full address (untruncated) - Recent transactions across all addresses (merged, deduplicated, filtered)
- ETH balance + USD value (small text) - "Add additional wallet..." link at bottom
- "+ Add wallet" button at the bottom
- **Transitions**: - **Transitions**:
- Tap address → pushes **AddressDetail** - Tap address row → sets active address (no screen change)
- "+" on wallet → derives address inline (no screen change) - `[info]` on address → **AddressDetail**
- "+ Add wallet" → pushes **AddWallet** - "Send" → **Send** (selects active address)
- Settings → pushes **Settings** - "Receive" → **Receive** (shows active address QR)
- "+" on wallet → derives next address inline
- "Add additional wallet..." → **AddWallet**
- Settings gear → **Settings** (toggles; tap again to return)
- Tap home tx row → **AddressDetail** (for the address involved)
#### AddWallet #### AddWallet
- **When**: User wants to add a new wallet (from Home or Welcome). - **When**: User wants to add a new wallet (from Home, Welcome, or Settings).
- **Elements**: - **Elements**:
- "Add Wallet" heading - "Add Wallet" heading, "Back" button
- Instruction text - Instruction text
- Die button `[die]` (generates random recovery phrase, can be clicked - Die button `[die]` (generates random recovery phrase)
repeatedly) - Recovery phrase textarea
- Recovery phrase textarea (empty by default, or filled by die)
- Backup warning box (shown after die is clicked) - Backup warning box (shown after die is clicked)
- "Add" button, "Back" button - Password + confirm password inputs
- "Have a private key instead?" link → pushes **ImportKey** - "Add" button
- "Have a private key instead?" link
- **Transitions**: - **Transitions**:
- "Add" (valid phrase) → pops to **Home** - "Add" (valid phrase + password) → **Home**
- "Back" → pops to previous (Home or Welcome) - "Back" → previous screen (Home or Welcome)
- "Have a private key instead?" → pushes **ImportKey** - "Have a private key instead?" → **ImportKey**
#### ImportKey #### ImportKey
- **When**: User wants to import a single private key. - **When**: User wants to import a single private key.
- **Elements**: - **Elements**:
- "Import Private Key" heading - "Import Private Key" heading, "Back" button
- Instruction text - Instruction text
- Private key input (password-masked) - Private key input (password-masked)
- "Import" button, "Back" button - Password + confirm password inputs
- "Import" button
- **Transitions**: - **Transitions**:
- "Import" (valid key) → pops to **Home** - "Import" (valid key + password) → **Home**
- "Back" → pops to previous - "Back" → **AddWallet**
#### AddressDetail #### AddressDetail
- **When**: User tapped an address from Home. - **When**: User tapped `[info]` on an address from Home.
- **Elements**: - **Elements**:
- Header: wallet name, "Back" button - "Back" button
- Address name (editable — tap to rename) - Blockie identicon (48px, centered)
- ENS name (if resolved, shown above address) - Title: "Wallet Name — Address N"
- Full address (tap to copy, "Copied!" feedback) - ENS name (if resolved, bold with color dot)
- ETH balance (large) + USD value (small) - Full address (color dot, etherscan link, tap to copy)
- "Send" button, "Receive" button - USD total for address
- Token list with balances - Balance list: ETH + tracked ERC-20 tokens (4 decimal places, USD inline).
- "+ Add" token button Each balance row is clickable → **AddressToken**
- Send / Receive / + Token buttons
- Transaction list (with ENS resolution for counterparties)
- **Transitions**: - **Transitions**:
- "Send" → pushes **Send** - Tap balance row → **AddressToken** (for that token)
- "Receive" → pushes **Receive** - "Send" → **Send**
- "+ Add" → pushes **AddToken** - "Receive" → **Receive**
- "Back" → pops to **Home** - "+ Token" → **AddToken**
- Tap transaction row → **TransactionDetail**
- "Back" → **Home**
#### AddressToken
- **When**: User clicked a specific token balance on AddressDetail.
- **Elements**:
- "Back" button
- Blockie identicon (48px, centered)
- Title: "Wallet Name — Address N — TOKEN"
- Full address (color dot, etherscan link, tap to copy)
- USD total for this token
- Single token balance line (4 decimal places)
- Send / Receive buttons
- Token-filtered transaction list (only this token's transfers)
- **Transitions**:
- "Send" → **Send** (token pre-selected and locked in dropdown)
- "Receive" → **Receive** (ERC-20 warning shown for non-ETH tokens)
- Tap transaction row → **TransactionDetail**
- "Back" → **AddressDetail**
#### Send #### Send
- **When**: User wants to send ETH or a token from this address. - **When**: User wants to send ETH or a token from this address.
- **Elements**: - **Elements**:
- "Send" heading - "Send" heading, "Back" button
- Token selector (ETH + any added tokens) - From: address with color dot + etherscan link
- "To" input (accepts address or ENS name, resolves before sending) - What to send: token dropdown (or static display with contract address when
- Amount input locked from AddressToken)
- Fee estimate (shown after entering amount) - To: address or ENS name input
- "Send" button, "Cancel" button - Amount input with current balance display
- Status area (resolving ENS, confirming, errors) - "Review" button
- **Transitions**: - **Transitions**:
- "Send" (valid) → prompts for password (to decrypt private key), submits - "Review" (valid inputs, ENS resolved) → **ConfirmTx**
transaction, shows result, stays on screen - "Back" → **AddressToken** (if came from token view) or **AddressDetail**
- "Cancel" → pops to **AddressDetail**
#### ConfirmTx
- **When**: User reviewed send details and is ready to authorize.
- **Elements**:
- "Confirm Transaction" heading, "Back" button
- Type: "Native ETH transfer" or "ERC-20 token transfer (SYMBOL)"
- Token contract: full address + etherscan link (ERC-20 only)
- From: blockie + color dot + full address + etherscan link + wallet title
- To: blockie + color dot + full address + etherscan link + ENS name
- Amount: value + symbol (USD in parentheses)
- Your balance: value + symbol (USD in parentheses)
- Estimated network fee: ETH amount (USD in parentheses), fetched async
- Warnings (scam address, self-send)
- Errors (insufficient balance)
- "Send" button (disabled if errors)
- **Transitions**:
- "Send" → password modal → broadcast tx → **WaitTx**
- "Send" → password modal → broadcast fails → **ErrorTx**
- "Back" → **Send**
#### WaitTx
- **When**: Transaction has been broadcast, waiting for on-chain confirmation.
- **Elements**:
- "Transaction Broadcast" heading (no back button — tx is irreversible)
- Amount + symbol
- To: color dot + full address + etherscan link
- Transaction hash: full hash (tap to copy) + etherscan link
- Count-up timer: "Waiting for confirmation... Ns"
- **Behavior**: Polls `getTransactionReceipt` every 10 seconds.
- **Transitions**:
- Receipt found → **SuccessTx**
- 60 seconds without confirmation → **ErrorTx** (timeout message)
#### SuccessTx
- **When**: Transaction confirmed on-chain.
- **Elements**:
- "Transaction Confirmed" heading
- Amount + symbol
- To: color dot + full address + etherscan link
- Block number
- Transaction hash: full hash (tap to copy) + etherscan link
- "Done" button
- **Transitions**:
- "Done" → **AddressToken** (if `selectedToken` set) or **AddressDetail**
#### ErrorTx
- **When**: Transaction broadcast failed, or timed out waiting for confirmation.
- **Elements**:
- "Transaction Failed" heading
- Amount + symbol
- To: color dot + full address + etherscan link
- Error message (dashed border box)
- Transaction hash section (hidden if broadcast failed before getting hash):
full hash (tap to copy) + etherscan link
- "Done" button
- **Transitions**:
- "Done" → **AddressToken** (if `selectedToken` set) or **AddressDetail**
#### Receive #### Receive
- **When**: User wants to receive funds at this address. - **When**: User wants to receive funds at this address.
- **Elements**: - **Elements**:
- "Receive" heading - "Receive" heading, "Back" button
- Instruction text - Instruction text
- QR code encoding the address - QR code encoding the address
- Full address (displayed, selectable) - Full address (color dot, selectable, etherscan link)
- "Copy address" button - "Copy address" button
- "Back" button - ERC-20 warning (shown when navigating from AddressToken for non-ETH token)
- **Transitions**: - **Transitions**:
- "Back" → pops to **AddressDetail** - "Back" → **AddressToken** (if `selectedToken` set) or **AddressDetail**
#### TransactionDetail
- **When**: User tapped a transaction row from AddressDetail or AddressToken.
- **Elements**:
- "Transaction" heading, "Back" button
- Status: "Success" or "Failed"
- Time: ISO datetime + relative age in parentheses
- Amount: value + symbol (bold)
- From: blockie + color dot + full address (tap to copy) + etherscan link
- ENS name if available
- To: blockie + color dot + full address (tap to copy) + etherscan link
- ENS name if available
- Transaction hash: full hash (tap to copy) + etherscan link
- **Transitions**:
- "Back" → **AddressToken** (if `selectedToken` set) or **AddressDetail**
#### AddToken #### AddToken
- **When**: User wants to track an ERC-20 token on this address. - **When**: User wants to track an ERC-20 token on this address.
- **Elements**: - **Elements**:
- "Add Token" heading - "Add Token" heading, "Back" button
- Instruction text (find contract address on Etherscan) - Instruction text (find contract address on Etherscan)
- Contract address input - Contract address input
- Token info preview (name, symbol — fetched from contract) - Token info preview (name, symbol — fetched from contract)
- "Add" button, "Cancel" button - Common token quick-pick buttons
- "Add" button
- **Transitions**: - **Transitions**:
- "Add" (valid contract) → pops to **AddressDetail** - "Add" (valid contract) → **AddressDetail**
- "Cancel" → pops to **AddressDetail** - "Back" → **AddressDetail**
#### Settings #### Settings
- **When**: User tapped Settings from Home. - **When**: User tapped Settings gear from Home.
- **Elements**: - **Elements**:
- "Settings" heading - "Settings" heading, "Back" button
- Network section: RPC endpoint URL input, "Save" button, explanatory text - Wallets: "+ Add wallet" button
- "Back" button - Display: "Show tracked tokens with zero balance" checkbox
- Ethereum RPC: endpoint URL input + "Save" button
- Blockscout API: endpoint URL input + "Save" button
- Token Spam Protection:
- "Hide tokens with fewer than 1,000 holders" checkbox
- "Hide transactions from detected fraud contracts" checkbox
- "Hide dust transactions below N gwei" checkbox + threshold input
- Allowed Sites: list with remove buttons
- Denied Sites: list with remove buttons
- **Transitions**: - **Transitions**:
- "Back" → pops to **Home** - "+ Add wallet" → **AddWallet**
- "Back" (or Settings gear again) → **Home**
#### Approval (future) #### SiteApproval
- **When**: A connected website requests wallet access or a transaction - **When**: A website requests wallet access via `eth_requestAccounts`. Opened
signature. Opened by the background script, not by user navigation. in a separate popup by the background script.
- **Elements**: - **Elements**:
- "A website is requesting access" heading - "Connection Request" heading
- Site origin (bold) - Site hostname (bold)
- Request type and details (preformatted) - Address that will be shared (color dot + full address + etherscan link)
- "Allow" button, "Deny" button - "Remember my choice for this site" checkbox
- "Allow" / "Deny" buttons
- **Transitions**: - **Transitions**:
- "Allow" / "Deny" → closes popup (returns result to background script) - "Allow" / "Deny" → closes popup (returns result to background script)
#### TxApproval
- **When**: A connected website requests a transaction via
`eth_sendTransaction`. Opened in a separate popup by the background script.
- **Elements**:
- "Transaction Request" heading
- Site hostname (bold) + "wants to send a transaction"
- From: color dot + full address + etherscan link
- To: color dot + full address + etherscan link (or "contract creation")
- Value: amount in ETH (4 decimal places)
- Data: raw transaction data (shown if present)
- Password input
- "Confirm" / "Reject" buttons
- **Transitions**:
- "Confirm" (with password) → closes popup (returns result to background)
- "Reject" → closes popup (returns rejection to background)
### External Services ### External Services
AutistMask is not a fully self-contained offline tool. It necessarily AutistMask is not a fully self-contained offline tool. It necessarily