Update README Screen Map with all views and state transitions
All checks were successful
check / check (push) Successful in 17s
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:
276
README.md
276
README.md
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user