Compare commits

..

27 Commits

Author SHA1 Message Date
3fd3e30f44 fix: label swap methods as "Swap" in tx lists, remove unused variable
All checks were successful
check / check (push) Successful in 23s
- Map known DEX methods (execute, swap, multicall, etc.) to "Swap"
  label instead of raw method name like "Execute"
- Remove unused displayData variable in transactionDetail.js

Addresses review feedback on PR #10.
2026-02-27 12:31:25 -08:00
clawbot
76059c3674 fix: display swaps and contract calls correctly in tx history (closes #3)
- Preserve contract call metadata (direction, label, method) when token
  transfers merge with normal txs in fetchRecentTransactions
- Handle 'contract' direction in counterparty display for home and
  address detail list views
- Add decoded calldata display to transaction detail view, fetching
  raw input from Blockscout and using decodeCalldata from approval.js
- Show 'Unknown contract call' with raw hex for unrecognized calldata
- Export decodeCalldata from approval.js for reuse
2026-02-27 12:31:13 -08:00
0ed7b8e61d Merge pull request 'fix: show ERC-20 contract details in address-token view (closes #9)' (#11) from fix/address-token-details into main
All checks were successful
check / check (push) Successful in 8s
Reviewed-on: #11
2026-02-27 21:09:37 +01:00
user
560065dd77 fix: show ERC-20 contract details in address-token view (closes #9)
All checks were successful
check / check (push) Successful in 22s
2026-02-27 12:06:22 -08:00
0413c52229 Merge pull request 'security: fix high-severity findings from audit (closes #6)' (#7) from fix/high-severity-security into main
All checks were successful
check / check (push) Successful in 9s
Reviewed-on: #7
2026-02-27 20:56:43 +01:00
b01df0639b Merge branch 'main' into fix/high-severity-security
All checks were successful
check / check (push) Successful in 21s
2026-02-27 20:56:09 +01:00
8beb3cd70c Merge pull request 'Fix all RULES.md divergences' (#2) from fix/rules-audit-divergences into main
All checks were successful
check / check (push) Successful in 8s
Reviewed-on: #2
2026-02-27 20:55:25 +01:00
31b22c1325 style: format README.md and RULES.md with Prettier
All checks were successful
check / check (push) Successful in 21s
2026-02-27 11:39:44 -08:00
eec96f9054 security: clear decrypted secrets after use (best-effort)
All checks were successful
check / check (push) Successful in 21s
2026-02-27 11:36:56 -08:00
f13cd0fd47 security: add TODO comments for password plaintext over runtime.sendMessage 2026-02-27 11:36:19 -08:00
b478d9efa9 security: validate sender URL for popup-only messages 2026-02-27 11:35:42 -08:00
d59ebfd461 security: derive RPC origin from sender instead of trusting msg.origin 2026-02-27 11:35:31 -08:00
13e2bdb0b0 security: add prominent danger warning for eth_sign requests 2026-02-27 11:35:21 -08:00
95314ff229 security: replace predictable sequential approval IDs with crypto.randomUUID() 2026-02-27 11:34:48 -08:00
1237cf8491 security: increase minimum password length from 8 to 12 characters 2026-02-27 11:34:32 -08:00
afc4868001 docs: document Blockscout as third external service in README
Some checks failed
check / check (push) Failing after 13s
2026-02-27 03:25:02 -08:00
a6017ce32c docs: add agent-protection notice to RULES.md 2026-02-27 03:25:01 -08:00
9cceca8576 Merge branch 'main' into fix/rules-audit-divergences
All checks were successful
check / check (push) Successful in 22s
2026-02-27 11:55:51 +01:00
6a3be80379 Merge pull request 'add tracked token list management to settings' (#5) from feature/settings-token-management into main
All checks were successful
check / check (push) Successful in 9s
Reviewed-on: #5
2026-02-27 11:55:32 +01:00
3d8feb4c5a Add token management to Settings
All checks were successful
check / check (push) Successful in 22s
- Tracked Tokens well in settings with [x] remove buttons
- New settings-addtoken view with:
  - Top-10 quick-pick buttons (tracked ones dimmed+disabled)
  - Top-100 dropdown showing "Token Name (SYMBOL)", tracked disabled
  - Manual contract address entry with RPC lookup
- View comment in helpers.js about keeping README in sync
2026-02-27 17:52:30 +07:00
aca8c4b2a7 Add name and url fields to all 512 tokens in tokenList.js
Names fetched from CoinGecko bulk API (100% coverage).
URLs sourced from ethereum-lists GitHub repo + manual curation
for major tokens. Some lesser-known tokens have empty URLs which
can be populated incrementally.
2026-02-27 17:51:08 +07:00
user
2244b52f5f fix: rules audit items 1,3,6 (closes #1)
All checks were successful
check / check (push) Successful in 22s
2026-02-27 02:18:45 -08:00
9365cd03a6 Resolve all README FIXMEs and add RULES.md audit checklist
All checks were successful
check / check (push) Successful in 19s
- Update Architecture tree to match actual src/ structure
- Fix settings button to have border and hover state (Clickable Affordance)
- Cap truncateMiddle to remove at most 10 chars (anti-spoofing guard)
- Raise caller floor from 10 to 32 chars for address display
- Fill in default RPC URL (ethereum-rpc.publicnode.com)
- Fix dependencies table intro (four runtime libs, not two)
- Clean up TODO section: remove all completed items
- Add RULES.md: concise audit checklist derived from README policies
2026-02-27 16:52:00 +07:00
6b301dee28 Resolve all README FIXMEs and enforce truncation safety
All checks were successful
check / check (push) Successful in 18s
- Update Architecture tree to match actual src/ structure
- Fix settings button to have border and hover state (Clickable Affordance)
- Cap truncateMiddle to remove at most 10 chars (anti-spoofing guard)
- Raise caller floor from 10 to 32 chars for address display
- Fill in default RPC URL (ethereum-rpc.publicnode.com)
- Fix dependencies table intro (four runtime libs, not two)
- Clean up TODO section: remove all completed items
2026-02-27 16:48:00 +07:00
d67023e80d Show exact amounts and address titles in transaction detail
All checks were successful
check / check (push) Successful in 5s
- Display full-precision amount (no 4-decimal truncation) in the
  transaction detail view, with native quantity (wei/base units) below
- Both amount and native quantity are click-copyable
- Show wallet/address title above from/to when the address is ours
- Update README Display Consistency to document the exception
2026-02-27 16:09:44 +07:00
b9250dab2e Fix layout shift from async USD prices and token balances
Reserve vertical space with min-height and   placeholders for all
elements populated by async data: per-address USD totals, ETH price
display, token balance containers, and total value sub-line.  Prevents
buttons and click targets from moving when price API responds.
2026-02-27 16:05:49 +07:00
9e45c75d29 Implement personal_sign and eth_signTypedData_v4 message signing
All checks were successful
check / check (push) Successful in 4s
Replace stub error handlers with full approval flow for personal_sign,
eth_sign, eth_signTypedData_v4, and eth_signTypedData. Uses toolbar
popup only (no fallback window) and keeps sign approvals pending across
popup close/reopen cycles so the user can respond via the toolbar icon.
2026-02-27 15:27:14 +07:00
20 changed files with 2748 additions and 356 deletions

372
README.md
View File

@@ -6,6 +6,24 @@ Chrome and Firefox. It manages HD wallets derived from BIP-39 seed phrases and
supports sending and receiving ETH and ERC-20 tokens, as well as web3 site supports sending and receiving ETH and ERC-20 tokens, as well as web3 site
connection and authentication via the EIP-1193 provider API. connection and authentication via the EIP-1193 provider API.
The most popular browser-based EVM wallet has a cute mascot, but sucks now. It
has tracking, ads, preferred placement for swaps, tx broadcast fuckery,
intercepts tx status links to their own site instead of going to Etherscan, etc.
None of the common alternatives work on Firefox.
Hence, a minimally viable ERC20 browser wallet/signer that works cross-platform.
Everything you need, nothing you don't. We import as few libraries as possible,
don't implement any crypto, and don't send user-specific data anywhere but a
(user-configurable) Ethereum RPC endpoint (which defaults to a public node). The
extension contacts exactly three external services: the configured RPC node for
blockchain interactions, a public CoinDesk API (no API key) for realtime price
information, and a Blockscout block-explorer API for transaction history and
token balances. All three endpoints are user-configurable.
In the extension is a hardcoded list of the top ERC20 contract addresses. You
can add any ERC20 contract by contract address if you wish, but the hardcoded
list exists to detect symbol spoofing attacks and improve UX.
## Getting Started ## Getting Started
```bash ```bash
@@ -24,9 +42,9 @@ Load the extension:
## Rationale ## Rationale
MetaMask has become bloated with swap UIs, portfolio dashboards, analytics, Common popular EVM wallets have become bloated with swap UIs, portfolio
tracking, and advertisements. It is no longer a simple wallet. Most alternatives dashboards, analytics, tracking, and advertisements. It is no longer a simple
(Rabby, Rainbow, etc.) only support Chromium browsers, leaving Firefox users wallet. Most alternatives only support Chromium browsers, leaving Firefox users
without a usable option. without a usable option.
AutistMask exists to provide the absolute minimum viable Ethereum wallet AutistMask exists to provide the absolute minimum viable Ethereum wallet
@@ -46,47 +64,70 @@ separate output directories.
``` ```
src/ src/
background/ — service worker / background script background/ — service worker / background script
index.js — extension lifecycle, message routing index.js — RPC routing, approval flows, message signing
wallet.js — wallet management (create, import, derive via ethers.js) content/ — content script injected into web pages
provider.js — EIP-1193 JSON-RPC provider implementation index.js — relay between inpage provider and background
popup/ — popup UI (the main wallet interface) inpage.js — the window.ethereum provider object (EIP-1193)
popup/ — popup UI (the main wallet interface)
index.html index.html
index.js index.js — entry point, view routing, state restore
styles/ — CSS (Tailwind) styles/main.css — Tailwind source
content/content script injected into web pages views/ — one JS module per screen (home, send, approval, etc.)
index.jsinjects the provider into page context shared/ modules used by both popup and background
inpage.js — the window.ethereum provider object balances.js — ETH + ERC-20 balance fetching via RPC + Blockscout
shared/ — shared utilities constants.js — chain IDs, default RPC endpoint, ERC-20 ABI
vault.js — encrypted storage via libsodium ens.js — ENS forward/reverse resolution
constants.js — chain IDs, default RPC endpoints, ERC-20 ABI prices.js — ETH/USD and token/USD via CoinDesk API
scamlist.js — known fraud contract addresses
state.js — persisted state (extension storage)
tokenList.js — top ERC-20 tokens by market cap (hardcoded)
transactions.js — tx history fetching + anti-poisoning filters
uniswap.js — Uniswap Universal Router calldata decoder
vault.js — password-based encryption via libsodium
wallet.js — mnemonic generation, HD derivation, signing
manifest/ manifest/
chrome.json — Manifest V3 for Chrome chrome.json — Manifest V3 for Chrome
firefox.json — Manifest V2/V3 for Firefox firefox.json — Manifest V2 for Firefox
``` ```
### UI Design Philosophy ### UI Design Philosophy
The UI follows a "Universal Paperclips" aesthetic — a deliberately spartan, The UI is inspired by _Universal Paperclips_. It's deliberately minimal,
almost brutalist approach. The guiding principle is that an unskilled, monochrome, fast, and includes once-popular usability affordances that seem to
non-technical person should be able to figure out how to use it without any have fallen out of fashion in modern UI design. Clickable things look clickable.
crypto knowledge. Things don't flash or spin or move around unnecessarily. This is a tool for
getting work done, not a toy.
This is designed for a normal audience. Basic familiarity with cryptocurrency
terms is required, but you need not be a programmer or software engineer to use
this wallet.
If you _are_ basically familiar with cryptocurrency terms, you should be able to
use all of the main features of this wallet without having to read the
documentation; i.e. we wish for the primary functionality to remain easily
discoverable.
#### Visual Style #### Visual Style
- **Monochrome**: Black text on white background. No brand colors, no gradients, - **Monochrome**: Black text on white background. Color is only used when and
no color-coding. Color may be introduced later for specific semantic purposes where it is semantically meaningful and explicitly useful, such as error
(e.g. error states) but the baseline is monochrome. messages, critical warnings, or address disambiguation. (Notable exception: we
use color dots, and identicons, to help a user easily distinguish addresses.)
- **Text-first**: Every piece of information is presented as text. Balances are - **Text-first**: Every piece of information is presented as text. Balances are
numbers. Addresses are hex strings. Status is a sentence. No progress spinners numbers. Addresses are hex strings. Flash messages are sentences. All fiddly
with animations — a text status line is sufficient. bits can be clicked to copy to the clipboard, and external links to Etherscan
are provided everywhere they might be useful.
- **Monospace font**: All text is rendered in the system monospace font. - **Monospace font**: All text is rendered in the system monospace font.
Ethereum addresses, transaction hashes, and balances are inherently Ethereum addresses, transaction hashes, and balances are inherently
fixed-width data. Rather than mixing proportional and monospace fonts, we use fixed-width data. Rather than mixing proportional and monospace fonts, we use
monospace everywhere for visual consistency and alignment. monospace everywhere for visual consistency and alignment.
- **No images**: Zero image assets in the entire extension. No logos, no - **No images**: Zero image assets in the entire extension. No logos, no
illustrations, no token icons. Token identity is conveyed by symbol text (ETH, illustrations, no token icons. Token identity is conveyed by symbol text (ETH,
USDC, etc.). USDC, etc.). We display
[Blockie identicons](https://github.com/MyCryptoHQ/ethereum-blockies-base64)
on critical screens and when space is available to allow users to disambiguate
addresses visually, as a security feature.
- **Tailwind CSS**: Utility-first CSS via Tailwind. No custom CSS classes for - **Tailwind CSS**: Utility-first CSS via Tailwind. No custom CSS classes for
styling. Tailwind is configured with a minimal monochrome palette. This keeps styling. Tailwind is configured with a minimal monochrome palette. This keeps
the styling co-located with the markup and eliminates CSS file management. the styling co-located with the markup and eliminates CSS file management.
@@ -95,16 +136,19 @@ crypto knowledge.
would add bundle size, build complexity, and attack surface for no benefit at would add bundle size, build complexity, and attack surface for no benefit at
this scale. this scale.
- **360x600 popup**: Standard browser extension popup dimensions. The UI is - **360x600 popup**: Standard browser extension popup dimensions. The UI is
designed for this fixed viewport — no responsive breakpoints needed. designed for this fixed viewport.
#### No Layout Shift #### No Layout Shift
Asynchronous state changes (clipboard confirmation, transaction status, error Asynchronous state changes (clipboard confirmation, transaction status, error
messages, flash notifications) must never move existing UI elements. All dynamic messages, flash notifications, API results returning) must _never_ move around
content areas reserve their space up front using `min-height` or always-present the existing UI elements. All dynamic content areas must reserve their space up
wrapper elements. `visibility: hidden` is preferred over `display: none` when front using `min-height` or always-present wrapper elements.
the element's space must be preserved. This prevents jarring content jumps that `visibility: hidden` is preferred over `display: none` when the element's space
disorient users and avoids mis-clicks caused by shifting buttons. must be preserved. This prevents jarring content jumps that disorient users and
can cause dangerous mis-clicks. Anyone who has multi-tabled on ClubGG and
smashed the big red "all-in blind preflop" button when trying to simply "call"
on a different table knows exactly tf I am talking about.
#### Clickable Affordance #### Clickable Affordance
@@ -118,24 +162,40 @@ click it.
#### Display Consistency #### Display Consistency
The same data must be formatted identically everywhere it appears. Token and ETH The same data must be formatted identically everywhere it appears. Token and ETH
amounts are always displayed with exactly 4 decimal places (e.g. "1.0500 ETH", amounts are displayed with exactly 4 decimal places (e.g. "1.0500 ETH", "17.1900
"17.1900 USDT") in balance lists, transaction lists, transaction details, send USDT") in balance lists, transaction lists, send confirmations, and approval
confirmations, and any other context. Timestamps include both an ISO datetime screens. Timestamps include both an ISO datetime and a humanized relative age
and a humanized relative age wherever shown. If a formatting rule applies in one wherever shown. If a formatting rule applies in one place, it applies in every
place, it applies in every place. Users should never see the same value rendered place. Users should never see the same value rendered differently on two
differently on two screens. screens.
**Specific Exception — Truncation:** On some non-critical display locations, we
may truncate _a small number_ of characters from the middle of an address solely
due to display size constraints. Wherever possible, and, notably, **in all
critical contexts (transaction confirmation view before signing, transaction
history detail view) addresses will _NEVER_ be truncated**. Even in places we
truncate addresses, we truncate only a maximum of 10 characters, which means
that the portions still displayed will be more than adequate for the user to
verify addresses even in the case of address spoofing attacks. Clicking an
address will always copy the full, untruncated value.
**Specific Exception — Transaction Detail view:** The transaction detail screen
is the authoritative record of a specific transaction and shows the exact,
untruncated amount with all meaningful decimal places (e.g. "0.00498824598498216
ETH"). It also shows the native quantity (e.g. "4988245984982160 wei") below it.
Both are click-copyable. Truncating to 4 decimals in summary views is acceptable
for scannability, but the detail view must never discard precision — it is the
one place the user can always use to verify exact details.
#### Language & Labeling #### Language & Labeling
All user-facing text avoids crypto jargon wherever possible: All user-facing text avoids unnecessary jargon wherever possible:
- "Recovery phrase" instead of "seed phrase", "mnemonic", or "BIP-39 mnemonic" - "Recovery phrase" instead of "seed phrase", "mnemonic", or "BIP-39 mnemonic"
- "Address" instead of "account", "derived key", or "HD child" - "Address" instead of "account", "derived key", or "HD child"
- "Password" instead of "encryption key" or "vault passphrase" - "Password" instead of "encryption key" or "vault passphrase"
- "Private key" instead of "secret key" or "signing key"
- Buttons use plain verbs: "Send", "Receive", "Copy address", "Add", "Back", - Buttons use plain verbs: "Send", "Receive", "Copy address", "Add", "Back",
"Cancel", "Lock", "Unlock", "Allow", "Deny" "Cancel", "Lock", "Unlock", "Allow", "Deny"
- No bracket notation like `[locked]` or `[setup]` — just plain titles
- Helpful inline descriptions where needed (e.g. "This password locks the wallet - Helpful inline descriptions where needed (e.g. "This password locks the wallet
on this device. It is not the same as your recovery phrase.") on this device. It is not the same as your recovery phrase.")
- Error messages are full sentences ("Please enter your password." not "password - Error messages are full sentences ("Please enter your password." not "password
@@ -144,14 +204,14 @@ All user-facing text avoids crypto jargon wherever possible:
#### Full Identifiers Policy #### Full Identifiers Policy
Addresses, transaction hashes, contract addresses, and all other cryptographic Addresses, transaction hashes, contract addresses, and all other cryptographic
identifiers are displayed in full whenever possible — never truncated. Address identifiers are displayed in full whenever possible. We truncate only in
poisoning attacks exploit truncated displays by generating fraud addresses that specific, limited, non-critical places and even then only a small amount that
share the same prefix and suffix as a legitimate address. If a user only sees still prevents spoofing attacks. Address poisoning attacks exploit truncated
`0xAbCd...1234`, an attacker can create an address with the same visible displays by generating fraud addresses that share the same prefix and suffix as
characters and trick the user into sending funds to it. Showing the complete a legitimate address. If a user only sees `0xAbCd...1234`, an attacker can
identifier defeats this class of attack. Truncation is only acceptable in create an address with the same visible characters and trick the user into
space-constrained contexts where the full identifier is accessible one tap away sending funds to it. Showing the complete identifier defeats this class of
(e.g. a tooltip or copy action). attack.
#### Data Model #### Data Model
@@ -437,37 +497,71 @@ transitions.
#### TxApproval #### TxApproval
- **When**: A connected website requests a transaction via - **When**: A connected website requests a transaction via
`eth_sendTransaction`. Opened in a separate popup by the background script. `eth_sendTransaction`. Opened via the toolbar popup by the background script.
- **Elements**: - **Elements**:
- "Transaction Request" heading - "Transaction Request" heading
- Site hostname (bold) + "wants to send a transaction" - Site hostname (bold) + "wants to send a transaction"
- Decoded action (if calldata is recognized): action name, token details,
amounts, steps, deadline (see Transaction Decoding)
- From: color dot + full address + etherscan link - From: color dot + full address + etherscan link
- To: color dot + full address + etherscan link (or "contract creation") - To/Contract: color dot + full address + etherscan link (or "contract
creation"), token symbol label if known
- Value: amount in ETH (4 decimal places) - Value: amount in ETH (4 decimal places)
- Data: raw transaction data (shown if present) - Raw data: full calldata displayed inline (shown if present)
- Password input - Password input
- "Confirm" / "Reject" buttons - "Confirm" / "Reject" buttons
- **Transitions**: - **Transitions**:
- "Confirm" (with password) → closes popup (returns result to background) - "Confirm" (with password) → closes popup (returns result to background)
- "Reject" → closes popup (returns rejection to background) - "Reject" → closes popup (returns rejection to background)
#### SignApproval
- **When**: A connected website requests a message signature via
`personal_sign`, `eth_sign`, or `eth_signTypedData_v4`. Opened via the toolbar
popup by the background script.
- **Elements**:
- "Signature Request" heading
- Site hostname (bold) + "wants you to sign a message"
- Type: "Personal message" or "Typed data (EIP-712)"
- From: color dot + full address + etherscan link
- Message: decoded UTF-8 text (personal_sign) or formatted domain/type/
message fields (EIP-712 typed data)
- Password input
- "Sign" / "Reject" buttons
- **Transitions**:
- "Sign" (with password) → signs locally → closes popup (returns signature)
- "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
communicates with external services to function as a wallet: communicates with three external services to function as a wallet:
- **Ethereum JSON-RPC endpoint**: The extension needs an Ethereum node to query - **Ethereum JSON-RPC endpoint**: The extension needs an Ethereum node to query
balances (`eth_getBalance`), read ERC-20 token contracts (`eth_call`), balances (`eth_getBalance`), read ERC-20 token contracts (`eth_call`),
estimate gas (`eth_estimateGas`), fetch nonces (`eth_getTransactionCount`), estimate gas (`eth_estimateGas`), fetch nonces (`eth_getTransactionCount`),
broadcast transactions (`eth_sendRawTransaction`), and check transaction broadcast transactions (`eth_sendRawTransaction`), and check transaction
receipts. The default endpoint is a public RPC (configurable by the user to receipts. The default endpoint is a public RPC (configurable by the user to
any endpoint they prefer, including a local node). This is the only external any endpoint they prefer, including a local node). By default the extension
service the extension talks to. talks to `https://ethereum-rpc.publicnode.com`.
- **Data sent**: Ethereum addresses, transaction data, contract call
parameters. The RPC endpoint can see all on-chain queries and submitted
transactions.
- **CoinDesk CADLI price API**: Used to fetch ETH/USD and token/USD prices for - **CoinDesk CADLI price API**: Used to fetch ETH/USD and token/USD prices for
displaying fiat values. The price is cached for 5 minutes to avoid excessive displaying fiat values. The price is cached for 5 minutes to avoid excessive
requests. No API key required. No user data is sent — only a list of token requests. No API key required. No user data is sent — only a list of token
symbols. symbols. Note that CoinDesk will receive your client IP.
- **Data sent**: Token symbol strings only (e.g. "ETH", "USDC"). No
addresses or user-specific data.
- **Blockscout block-explorer API**: Used to fetch transaction history (normal
transactions and ERC-20 token transfers), ERC-20 token balances, and token
holder counts (for spam filtering). The default endpoint is
`https://eth.blockscout.com/api/v2` (configurable by the user in Settings).
- **Data sent**: Ethereum addresses. Blockscout receives the user's
addresses to query their transaction history and token balances. No
private keys, passwords, or signing operations are sent.
What the extension does NOT do: What the extension does NOT do:
@@ -477,14 +571,15 @@ What the extension does NOT do:
- No Infura/Alchemy dependency (any JSON-RPC endpoint works) - No Infura/Alchemy dependency (any JSON-RPC endpoint works)
- No backend servers operated by the developer - No backend servers operated by the developer
The user's RPC endpoint and the CoinDesk price API are the only external These three services (RPC endpoint, CoinDesk price API, and Blockscout API) are
services. Users who want maximum privacy can point the RPC at their own node the only external services. All three endpoints are user-configurable. Users who
(price fetching can be disabled in a future version). want maximum privacy can point the RPC and Blockscout URLs at their own
self-hosted instances (price fetching can be disabled in a future version).
### Dependencies ### Dependencies
AutistMask uses two runtime libraries. All cryptographic operations are AutistMask uses four runtime libraries. All cryptographic operations are
delegated to these libraries — see the Crypto Policy section below. delegated to ethers and libsodium — see the Crypto Policy section below.
| Package | Version | License | Purpose | | Package | Version | License | Purpose |
| -------------------------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | -------------------------- | ------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
@@ -509,17 +604,11 @@ Dev dependencies (not shipped in extension):
`pbkdf`, `hmac`, `encrypt`, `decrypt`, `hash`, `cipher`, `digest`, `sign` `pbkdf`, `hmac`, `encrypt`, `decrypt`, `hash`, `cipher`, `digest`, `sign`
(case-insensitive) appear in our own source code (outside of `node_modules/`), (case-insensitive) appear in our own source code (outside of `node_modules/`),
it is almost certainly a bug. All cryptographic operations must go through it is almost certainly a bug. All cryptographic operations must go through
`ethers` or `libsodium-wrappers-sumo`. This policy exists because: `ethers` or `libsodium-wrappers-sumo`. Both are widely audited and
battle-tested.
- Rolling your own crypto is the single most common source of security
vulnerabilities in wallet software.
- Both libraries are widely audited and battle-tested.
- Keeping crypto out of application code makes security review tractable:
reviewers only need to verify that we call the libraries correctly, not that
we implemented crypto correctly.
Exceptions require explicit authorization in a code comment referencing this Exceptions require explicit authorization in a code comment referencing this
policy. policy, but as of now there are none.
### DEBUG Mode Policy ### DEBUG Mode Policy
@@ -551,12 +640,12 @@ project owner.
- **The password is NOT used in address derivation.** It exists solely to - **The password is NOT used in address derivation.** It exists solely to
protect the recovery phrase / private key on disk. Anyone with the protect the recovery phrase / private key on disk. Anyone with the
recovery phrase can restore the wallet on any device without this recovery phrase can restore the wallet on any device without this
password. This matches MetaMask's behavior. password. This matches standard EVM wallet behavior.
- **BIP-39 / BIP-44 via ethers.js**: Mnemonic generation, validation, and HD key - **BIP-39 / BIP-44 via ethers.js**: Mnemonic generation, validation, and HD key
derivation (`m/44'/60'/0'/0/n`) are handled entirely by ethers.js. The BIP-39 derivation (`m/44'/60'/0'/0/n`) are handled entirely by ethers.js. The BIP-39
passphrase is always empty (matching MetaMask and most wallet software). The passphrase is always empty (matching most wallet software). The user's
user's password is completely separate and has no effect on which addresses password is completely separate and has no effect on which addresses are
are generated. generated.
- **ethers.js for everything Ethereum**: Transaction construction, signing, gas - **ethers.js for everything Ethereum**: Transaction construction, signing, gas
estimation, RPC communication, ERC-20 contract calls, and address derivation estimation, RPC communication, ERC-20 contract calls, and address derivation
are all handled by ethers.js. This means zero hand-rolled Ethereum logic. are all handled by ethers.js. This means zero hand-rolled Ethereum logic.
@@ -578,13 +667,16 @@ project owner.
- View ERC-20 token balances (user adds token by contract address) - View ERC-20 token balances (user adds token by contract address)
- Send ETH to an address - Send ETH to an address
- Send ERC-20 tokens to an address - Send ERC-20 tokens to an address
- Receive ETH/tokens (display address, copy to clipboard) - Receive ETH/tokens (display address, copy to clipboard, QR code)
- Connect to web3 sites (EIP-1193 `eth_requestAccounts`) - Connect to web3 sites (EIP-1193 `eth_requestAccounts`)
- Sign transactions requested by connected sites - Sign transactions requested by connected sites (`eth_sendTransaction`)
- Sign messages (`personal_sign`, `eth_sign`) - Sign messages (`personal_sign`, `eth_sign`)
- Lock/unlock with password - Sign typed data (`eth_signTypedData_v4`, `eth_signTypedData`)
- Configurable RPC endpoint - Human-readable transaction decoding (ERC-20, Uniswap Universal Router)
- Future: USD value display (and other fiat currencies) - ETH/USD and token/USD price display
- Configurable RPC endpoint and Blockscout API
- Address poisoning protection (spam token filtering, dust filtering, fraud
contract blocklist)
### Address Poisoning and Fake Token Transfer Attacks ### Address Poisoning and Fake Token Transfer Attacks
@@ -672,104 +764,84 @@ indexes it as a real token transfer.
designed as a sharp tool — users who understand the risks can configure the designed as a sharp tool — users who understand the risks can configure the
wallet to show everything unfiltered, unix-style. wallet to show everything unfiltered, unix-style.
### Non-Goals #### Transaction Decoding
- Token swaps (use a DEX in the browser) When a dApp asks the user to approve a transaction, AutistMask attempts to
- NFT display or management decode the calldata into a human-readable summary. This is purely a display
- Multi-chain support (Ethereum mainnet only, for now) convenience to help the user understand what they are signing — it is not
endorsement, special treatment, or partnership with any protocol.
AutistMask is a generic web3 wallet. It treats all dApps, protocols, and
contracts equally. No contract gets special handling, priority, or integration
beyond what is needed to show the user a legible confirmation screen. Our
commitment is to the user, not to any service, site, or contract.
Decoded transaction summaries are best-effort. If decoding fails, the raw
calldata is displayed in full. The decoders live in self-contained modules under
`src/shared/` (e.g. `uniswap.js`) so they can be added for common contracts
without polluting wallet-specific code. Contributions of decoders for other
widely-used contracts are welcome.
Currently supported:
- **ERC-20**: `approve()` and `transfer()` calls — shows token symbol, spender
or recipient, and amount.
- **Uniswap Universal Router**: `execute()` calls — shows swap direction (e.g.
"Swap USDT → ETH"), token addresses, amounts, execution steps, and deadline.
Decodes Permit2, V2/V3/V4 swaps, wrap/unwrap, and balance checks.
### Non-Goals Forever
- Built in token swaps (use a DEX in the browser)
- Analytics, telemetry, or tracking of any kind - Analytics, telemetry, or tracking of any kind
- Advertisements or promotions - Advertisements or promotions
- Phishing detection - Obscure token list auto-discovery (user adds tokens manually)
- Hardware wallet support (maybe later) - We detect common/popular ERC20s in the basic case
- Token list auto-discovery (user adds tokens manually)
- Fiat on/off ramps - Fiat on/off ramps
- Browser notifications - Extensive transaction decoding/parsing
- Transaction history (use Etherscan) - For common ones we will do best-effort, but you should just use a block
explorer.
## TODO — 0.1.0 MVP ### Non-Goals for 1.0
Everything needed for a minimal working wallet that can send and receive ETH. - Multi-chain support (Ethereum mainnet only)
- Hardware wallet support
### Done ## TODO
- [x] Project scaffolding (Makefile, Dockerfile, CI, manifests, esbuild)
- [x] Tailwind CSS build pipeline
- [x] Popup UI shell with screen stacking (Welcome, AddWallet, Home,
AddressDetail, Send, Receive, Settings)
- [x] BIP-39 mnemonic generation via ethers.js (die button)
- [x] BIP-39 mnemonic validation on import
- [x] BIP-32/BIP-44 HD key derivation (real addresses from xpub)
- [x] Private key import (real address via ethers.Wallet)
- [x] Xpub stored unencrypted for read-only address derivation
- [x] State persistence to extension storage (survives popup close)
- [x] Live ETH balance fetching via JSON-RPC (`eth_getBalance`)
- [x] ENS reverse lookup (address → name) and forward resolution (name → address
in Send field)
- [x] ETH/USD price fetching via CoinDesk API
- [x] USD value display next to ETH balances
- [x] Full address display everywhere (no truncation)
- [x] Token list module with ~150 ERC-20 tokens ordered by market cap
### Wallet Management ### Wallet Management
- [ ] Rename wallets (tap wallet name on Home to edit)
- [ ] Rename addresses (tap address name on AddressDetail to edit)
- [ ] Delete wallet (with confirmation) - [ ] Delete wallet (with confirmation)
- [ ] Delete address from HD wallet (with confirmation) - [ ] Delete address from HD wallet (with confirmation)
- [ ] Show wallet's recovery phrase (requires password, from Settings or wallet - [ ] Show wallet's recovery phrase (requires password)
context menu)
### Sending ### Transactions
- [x] Encrypt recovery phrase / private key with password via libsodium
(Argon2id + XSalsa20-Poly1305)
- [x] Password prompt on Send (decrypt private key to construct transaction)
- [x] Transaction construction via ethers.js (to, value, gasLimit, gasPrice)
- [ ] Gas estimation and fee display before confirming - [ ] Gas estimation and fee display before confirming
- [x] Broadcast transaction via `eth_sendRawTransaction`
- [x] Transaction status feedback (pending → confirmed / failed)
### Receiving
- [x] QR code generation for address (qrcode library, renders to canvas)
### Display
- [ ] Home screen: total ETH balance summed across all addresses
- [ ] Home screen: total USD value (small text under total ETH)
- [ ] Cache ETH/USD price for 5 minutes (don't re-fetch on every popup open)
- [ ] Per-address USD value in small text under ETH balance everywhere
### Tokens (ERC-20)
- [ ] Add token by contract address (fetch name/symbol/decimals from contract)
- [ ] Display ERC-20 token balances per address
- [ ] Send ERC-20 tokens
### Testing ### Testing
- [ ] Tests for mnemonic generation and address derivation - [ ] Tests for mnemonic generation and address derivation
- [ ] Tests for xpub derivation and child address generation - [ ] Tests for xpub derivation and child address generation
- [ ] Tests for token list module (getTopTokenPrices, getTopTokenSymbols)
- [ ] Test on Chrome (Manifest V3)
- [ ] Test on Firefox (Manifest V2) - [ ] Test on Firefox (Manifest V2)
### Scam List ### Scam List
- [ ] Research and document each address in scamlist.js (what it is, why it's on - [ ] Research and document each address in scamlist.js
the list, source) - [ ] Add more known fraud addresses from Etherscan labels
- [ ] Add more known fraud addresses from Etherscan labels (drainers, phishing,
address poisoning deployers)
### Post-MVP ### Future
- [ ] EIP-1193 provider injection (window.ethereum) for web3 site connectivity
- [ ] Site connection approval flow
- [ ] Transaction signing approval flow (requests from connected sites)
- [ ] Message signing (`personal_sign`, `eth_sign`)
- [ ] Multi-currency fiat display (EUR, GBP, etc.) - [ ] Multi-currency fiat display (EUR, GBP, etc.)
- [ ] Security audit of key management - [ ] Security audit of key management
## Policies
- We don't mention "the other wallet" by name in code or documentation. We're
our own thing.
- The README is the complete authoritative technical documentation. It's ok if
it gets big.
## License ## License
GPL-3.0. See [LICENSE](LICENSE). GPL-3.0. See [LICENSE](LICENSE).

121
RULES.md Normal file
View File

@@ -0,0 +1,121 @@
> **⚠️ THIS FILE MUST NEVER BE MODIFIED BY AGENTS.** RULES.md is maintained
> exclusively by the project owner. AI agents, bots, and automated tools must
> treat this file as read-only. If an audit finds a divergence between the code
> and this file, the code must be changed to match — never the other way around.
# AutistMask Rules Checklist
This file is derived from README.md and REPO_POLICIES.md for use as an audit
checklist. The authoritative policies are in those two files. If this file
contradicts either, the originals govern.
---
## Cryptography
- [ ] No raw crypto primitives in application code (`aes`, `sha`, `pbkdf`,
`hmac`, `encrypt`, `decrypt`, `hash`, `cipher`, `digest`, `sign`)
- [ ] All crypto goes through `ethers` or `libsodium-wrappers-sumo`
- [ ] No exceptions without an explicit code comment citing the Crypto Policy
- [ ] Secrets encrypted at rest with Argon2id + XSalsa20-Poly1305
- [ ] Password never used in address derivation (encryption only)
## External Communication
- [ ] Extension contacts exactly three external services: configured RPC
endpoint, CoinDesk price API, and Blockscout block-explorer API
- [ ] No analytics, telemetry, or tracking
- [ ] No user-specific data sent except to the configured RPC endpoint
- [ ] No Infura/Alchemy hard dependency
- [ ] No backend servers operated by the developer
- [ ] RPC endpoint is user-configurable (defaults to publicnode.com)
## Dependencies
- [ ] Four runtime libraries only: `ethers`, `libsodium-wrappers-sumo`,
`qrcode`, `ethereum-blockies-base64`
- [ ] No JS framework (React, Vue, Svelte, etc.)
- [ ] All external references pinned by cryptographic hash (per REPO_POLICIES)
## Address Display & Anti-Spoofing
- [ ] Addresses displayed in full in all critical contexts (tx confirmation,
send confirmation, transaction detail)
- [ ] `truncateMiddle()` removes at most 10 characters — enforced in code
- [ ] Caller floor for address truncation is 32 characters minimum
- [ ] Clicking any address copies the full untruncated value
- [ ] Known token symbol verification: transfers claiming a known symbol from an
unrecognized contract are filtered
- [ ] Tokens with < 1,000 holders hidden from tx history and send selector
- [ ] Dust transactions below configurable threshold hidden
- [ ] Fraud contract blocklist applied to tx history
## Display Consistency
- [ ] Token/ETH amounts: exactly 4 decimal places in all summary views
- [ ] Transaction detail view: exact untruncated amount (full precision)
- [ ] Transaction detail view: native quantity shown (wei / base units)
- [ ] Both amount and native quantity are click-copyable
- [ ] Timestamps: ISO datetime + relative age, everywhere they appear
- [ ] Same data formatted identically across all screens
## No Layout Shift
- [ ] All async-populated elements have `min-height` or placeholder content
- [ ] `formatUsd(null)` returns `""` — callers must use `&nbsp;` fallback
- [ ] `visibility: hidden` preferred over `display: none` when space must be
preserved
- [ ] No UI element moves when async data (prices, balances, tx lists) arrives
## Clickable Affordance
- [ ] Every button has visible border, padding, and hover state
- [ ] Every clickable text element has underline or dashed underline
- [ ] No invisible hit targets
## DEBUG Mode
- [ ] DEBUG mode only enables: red banner + hardcoded test mnemonic
- [ ] No `if (DEBUG)` branches that skip functionality or bypass security
- [ ] New DEBUG conditionals require explicit project owner approval
## Transaction Decoding
- [ ] Decoding is best-effort display convenience only
- [ ] No protocol gets special handling beyond the confirmation screen
- [ ] If decoding fails, raw calldata displayed in full (not truncated)
- [ ] Decoders are self-contained modules in `src/shared/`
## Approval Flow
- [ ] Site connection: explicit user approval via popup
- [ ] Transaction signing: password required, decoded details shown
- [ ] Message signing: password required, message content shown
- [ ] Typed data signing: password required, domain/type/message fields shown
- [ ] Rejected approvals return EIP-1193 error code 4001
- [ ] TX and sign approvals persist across popup close/reopen (toolbar popup)
## Secrets & Storage
- [ ] Public data (xpubs, addresses, balances) stored unencrypted
- [ ] Private data (recovery phrases, private keys) encrypted at rest
- [ ] Password only required for signing operations
- [ ] No secrets in `.env`, credentials, or API keys committed to repo
- [ ] `git add -A` / `git add .` never used
## Build & Workflow
- [ ] All tool invocations via `make` targets, never directly
- [ ] `make check` = `make test` + `make lint` + `make fmt-check`
- [ ] `main` always passes `make check`
- [ ] Feature branches for all changes, merge to main when done
- [ ] No force-push to `main`
- [ ] Pre-commit hook runs `make check`
## Language & Labeling
- [ ] "Recovery phrase" not "seed phrase" or "mnemonic"
- [ ] "Address" not "account" or "derived key"
- [ ] "Password" not "encryption key" or "vault passphrase"
- [ ] Error messages are full sentences
- [ ] No competitor mentioned by name in code or documentation

View File

@@ -30,7 +30,6 @@ const connectedSites = {};
// Pending approval requests: { id: { origin, hostname, resolve } } // Pending approval requests: { id: { origin, hostname, resolve } }
const pendingApprovals = {}; const pendingApprovals = {};
let nextApprovalId = 1;
async function getState() { async function getState() {
const result = await storageApi.get("autistmask"); const result = await storageApi.get("autistmask");
@@ -127,7 +126,7 @@ function openApprovalWindow(id) {
// Prefers the browser-action popup (anchored to toolbar, no macOS Space switch). // Prefers the browser-action popup (anchored to toolbar, no macOS Space switch).
function requestApproval(origin, hostname) { function requestApproval(origin, hostname) {
return new Promise((resolve) => { return new Promise((resolve) => {
const id = nextApprovalId++; const id = crypto.randomUUID();
pendingApprovals[id] = { origin, hostname, resolve }; pendingApprovals[id] = { origin, hostname, resolve };
if (actionApi && typeof actionApi.openPopup === "function") { if (actionApi && typeof actionApi.openPopup === "function") {
@@ -149,9 +148,10 @@ function requestApproval(origin, hostname) {
} }
// Open a tx-approval popup and return a promise that resolves with txHash or error. // Open a tx-approval popup and return a promise that resolves with txHash or error.
// Uses the toolbar popup only — no fallback window.
function requestTxApproval(origin, hostname, txParams) { function requestTxApproval(origin, hostname, txParams) {
return new Promise((resolve) => { return new Promise((resolve) => {
const id = nextApprovalId++; const id = crypto.randomUUID();
pendingApprovals[id] = { pendingApprovals[id] = {
origin, origin,
hostname, hostname,
@@ -160,20 +160,20 @@ function requestTxApproval(origin, hostname, txParams) {
type: "tx", type: "tx",
}; };
if (actionApi && typeof actionApi.openPopup === "function") { if (actionApi && typeof actionApi.setPopup === "function") {
actionApi.setPopup({ actionApi.setPopup({
popup: "src/popup/index.html?approval=" + id, popup: "src/popup/index.html?approval=" + id,
}); });
}
if (actionApi && typeof actionApi.openPopup === "function") {
try { try {
const result = actionApi.openPopup(); const result = actionApi.openPopup();
if (result && typeof result.catch === "function") { if (result && typeof result.catch === "function") {
result.catch(() => openApprovalWindow(id)); result.catch(() => {});
} }
} catch { } catch {
openApprovalWindow(id); // openPopup unsupported — user clicks toolbar icon
} }
} else {
openApprovalWindow(id);
} }
}); });
} }
@@ -183,7 +183,7 @@ function requestTxApproval(origin, hostname, txParams) {
// popup URL is still set, so the user can click the toolbar icon to respond. // popup URL is still set, so the user can click the toolbar icon to respond.
function requestSignApproval(origin, hostname, signParams) { function requestSignApproval(origin, hostname, signParams) {
return new Promise((resolve) => { return new Promise((resolve) => {
const id = nextApprovalId++; const id = crypto.randomUUID();
pendingApprovals[id] = { pendingApprovals[id] = {
origin, origin,
hostname, hostname,
@@ -211,28 +211,19 @@ function requestSignApproval(origin, hostname, signParams) {
} }
// Detect when an approval popup (browser-action) closes without a response. // Detect when an approval popup (browser-action) closes without a response.
// Sign approvals are NOT auto-rejected on disconnect because toolbar popups // TX and sign approvals are NOT auto-rejected on disconnect because toolbar
// naturally close on focus loss and the user can reopen them. // popups naturally close on focus loss and the user can reopen them.
runtime.onConnect.addListener((port) => { runtime.onConnect.addListener((port) => {
if (port.name.startsWith("approval:")) { if (port.name.startsWith("approval:")) {
const id = parseInt(port.name.split(":")[1], 10); const id = port.name.split(":")[1];
port.onDisconnect.addListener(() => { port.onDisconnect.addListener(() => {
const approval = pendingApprovals[id]; const approval = pendingApprovals[id];
if (approval) { if (approval) {
if (approval.type === "sign") { if (approval.type === "tx" || approval.type === "sign") {
// Keep pending — user can reopen the toolbar popup // Keep pending — user can reopen the toolbar popup
return; return;
} }
if (approval.type === "tx") { approval.resolve({ approved: false, remember: false });
approval.resolve({
error: {
code: 4001,
message: "User rejected the request.",
},
});
} else {
approval.resolve({ approved: false, remember: false });
}
delete pendingApprovals[id]; delete pendingApprovals[id];
} }
resetPopupUrl(); resetPopupUrl();
@@ -450,6 +441,13 @@ async function handleRpc(method, params, origin) {
? { method, message: params[0], from: params[1] } ? { method, message: params[0], from: params[1] }
: { method, message: params[1], from: params[0] }; : { method, message: params[1], from: params[0] };
if (method === "eth_sign") {
signParams.dangerWarning =
"\u26a0\ufe0f DANGER: This site is requesting to sign a raw hash. " +
"This can be used to sign transactions that drain your funds. " +
"Only proceed if you fully understand what you are signing.";
}
const decision = await requestSignApproval( const decision = await requestSignApproval(
origin, origin,
hostname, hostname,
@@ -526,7 +524,13 @@ async function broadcastAccountsChanged() {
} }
// Reject and close any pending approval popups so they don't hang // Reject and close any pending approval popups so they don't hang
for (const [id, approval] of Object.entries(pendingApprovals)) { for (const [id, approval] of Object.entries(pendingApprovals)) {
approval.resolve({ approved: false, remember: false }); if (approval.type === "tx" || approval.type === "sign") {
approval.resolve({
error: { code: 4001, message: "User rejected the request." },
});
} else {
approval.resolve({ approved: false, remember: false });
}
if (approval.windowId) { if (approval.windowId) {
windowsApi.remove(approval.windowId, () => { windowsApi.remove(approval.windowId, () => {
if (runtime.lastError) { if (runtime.lastError) {
@@ -613,12 +617,39 @@ if (windowsApi && windowsApi.onRemoved) {
// Listen for messages from content scripts and popup // Listen for messages from content scripts and popup
runtime.onMessage.addListener((msg, sender, sendResponse) => { runtime.onMessage.addListener((msg, sender, sendResponse) => {
if (msg.type === "AUTISTMASK_RPC") { if (msg.type === "AUTISTMASK_RPC") {
handleRpc(msg.method, msg.params, msg.origin).then((response) => { // Derive origin from trusted sender info to prevent origin spoofing.
// Chrome MV3 provides sender.origin; Firefox MV2 fallback uses sender.tab.url.
let trustedOrigin = msg.origin; // fallback only if sender info unavailable
if (sender.origin) {
trustedOrigin = sender.origin;
} else if (sender.tab && sender.tab.url) {
try {
trustedOrigin = new URL(sender.tab.url).origin;
} catch {
// keep fallback
}
}
handleRpc(msg.method, msg.params, trustedOrigin).then((response) => {
sendResponse(response); sendResponse(response);
}); });
return true; return true;
} }
// Validate that popup-only messages originate from the extension itself.
const POPUP_ONLY_TYPES = [
"AUTISTMASK_GET_APPROVAL",
"AUTISTMASK_APPROVAL_RESPONSE",
"AUTISTMASK_TX_RESPONSE",
"AUTISTMASK_SIGN_RESPONSE",
];
if (POPUP_ONLY_TYPES.includes(msg.type)) {
const extUrl = runtime.getURL("");
if (!sender.url || !sender.url.startsWith(extUrl)) {
sendResponse({ error: "Unauthorized sender" });
return false;
}
}
if (msg.type === "AUTISTMASK_GET_APPROVAL") { if (msg.type === "AUTISTMASK_GET_APPROVAL") {
const approval = pendingApprovals[msg.id]; const approval = pendingApprovals[msg.id];
if (approval) { if (approval) {
@@ -683,7 +714,8 @@ runtime.onMessage.addListener((msg, sender, sendResponse) => {
if (wallet) break; if (wallet) break;
} }
if (!wallet) throw new Error("Wallet not found"); if (!wallet) throw new Error("Wallet not found");
const decrypted = await decryptWithPassword( // TODO(security): Move decryption to popup to avoid sending password via runtime.sendMessage
let decrypted = await decryptWithPassword(
wallet.encryptedSecret, wallet.encryptedSecret,
msg.password, msg.password,
); );
@@ -692,6 +724,10 @@ runtime.onMessage.addListener((msg, sender, sendResponse) => {
addrIndex, addrIndex,
decrypted, decrypted,
); );
// Best-effort: clear decrypted secret after use.
// Note: JS strings are immutable; this nulls the reference but
// the original string may persist in memory until GC.
decrypted = null;
const provider = getProvider(state.rpcUrl); const provider = getProvider(state.rpcUrl);
const connected = signer.connect(provider); const connected = signer.connect(provider);
const tx = await connected.sendTransaction(approval.txParams); const tx = await connected.sendTransaction(approval.txParams);
@@ -737,7 +773,8 @@ runtime.onMessage.addListener((msg, sender, sendResponse) => {
if (wallet) break; if (wallet) break;
} }
if (!wallet) throw new Error("Wallet not found"); if (!wallet) throw new Error("Wallet not found");
const decrypted = await decryptWithPassword( // TODO(security): Move decryption to popup to avoid sending password via runtime.sendMessage
let decrypted = await decryptWithPassword(
wallet.encryptedSecret, wallet.encryptedSecret,
msg.password, msg.password,
); );
@@ -746,6 +783,10 @@ runtime.onMessage.addListener((msg, sender, sendResponse) => {
addrIndex, addrIndex,
decrypted, decrypted,
); );
// Best-effort: clear decrypted secret after use.
// Note: JS strings are immutable; this nulls the reference but
// the original string may persist in memory until GC.
decrypted = null;
const sp = approval.signParams; const sp = approval.signParams;
let signature; let signature;

View File

@@ -23,7 +23,7 @@
</h1> </h1>
<button <button
id="btn-settings" id="btn-settings"
class="bg-transparent border-none text-fg cursor-pointer text-2xl p-0 leading-none" class="border border-border text-fg cursor-pointer text-xl px-1 leading-none hover:bg-fg hover:text-bg"
title="Settings" title="Settings"
> >
&#9881; &#9881;
@@ -274,11 +274,15 @@
</div> </div>
<div <div
id="address-usd-total" id="address-usd-total"
class="text-xs text-muted mb-3 text-right" class="text-xs text-muted mb-3 text-right min-h-[1rem]"
></div> >
&nbsp;
</div>
<!-- balances --> <!-- balances -->
<div class="border-b border-border-light pb-2 mb-2"> <div class="border-b border-border-light pb-2 mb-2">
<div id="address-balances"></div> <div id="address-balances" class="min-h-[1.25rem]">
&nbsp;
</div>
</div> </div>
<!-- actions --> <!-- actions -->
@@ -343,13 +347,23 @@
</div> </div>
<div <div
id="address-token-usd-total" id="address-token-usd-total"
class="text-xs text-muted mb-3 text-right" class="text-xs text-muted mb-3 text-right min-h-[1rem]"
></div> >
&nbsp;
</div>
<!-- single token balance --> <!-- single token balance -->
<div class="border-b border-border-light pb-2 mb-2"> <div class="border-b border-border-light pb-2 mb-2">
<div id="address-token-balance"></div> <div id="address-token-balance" class="min-h-[1.25rem]">
&nbsp;
</div>
</div> </div>
<!-- token contract details (ERC-20 only) -->
<div
id="address-token-contract-info"
class="border-b border-border-light pb-2 mb-2 text-xs hidden"
></div>
<!-- actions --> <!-- actions -->
<div class="flex gap-2 mb-3"> <div class="flex gap-2 mb-3">
<button <button
@@ -705,6 +719,21 @@
</button> </button>
</div> </div>
<div class="bg-well p-3 mx-1 mb-3">
<h3 class="font-bold mb-1">Tracked Tokens</h3>
<p class="text-xs text-muted mb-2">
ERC-20 tokens whose balances are tracked across all
addresses.
</p>
<div id="settings-tracked-tokens"></div>
<button
id="btn-settings-add-token"
class="border border-border px-2 py-1 mt-2 hover:bg-fg hover:text-bg cursor-pointer"
>
+ Add token
</button>
</div>
<div class="bg-well p-3 mx-1 mb-3"> <div class="bg-well p-3 mx-1 mb-3">
<h3 class="font-bold mb-1">Display</h3> <h3 class="font-bold mb-1">Display</h3>
<label <label
@@ -816,6 +845,73 @@
</div> </div>
</div> </div>
<!-- ============ SETTINGS: ADD TOKEN ============ -->
<div id="view-settings-addtoken" class="view hidden">
<button
id="btn-settings-addtoken-back"
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
>
&lt; Back
</button>
<h2 class="font-bold mb-2">Add Token</h2>
<p class="text-xs text-muted mb-3">
Pick a common token or enter a contract address manually.
</p>
<!-- top 10 quick-pick buttons -->
<div class="mb-3">
<label class="block mb-1 text-xs text-muted"
>Top tokens:</label
>
<div
id="settings-addtoken-top10"
class="flex flex-wrap gap-1"
></div>
</div>
<!-- top 100 dropdown -->
<div class="mb-3">
<label class="block mb-1 text-xs text-muted"
>Or pick from top 100:</label
>
<select
id="settings-addtoken-select"
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
>
<option value="">-- select --</option>
</select>
<button
id="btn-settings-addtoken-select"
class="border border-border px-2 py-1 mt-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Add selected
</button>
</div>
<!-- manual contract address -->
<div class="mb-3">
<label class="block mb-1 text-xs text-muted"
>Or enter contract address:</label
>
<input
type="text"
id="settings-addtoken-address"
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
placeholder="0x..."
/>
<div
id="settings-addtoken-info"
class="text-xs text-muted mt-1 hidden"
></div>
<button
id="btn-settings-addtoken-manual"
class="border border-border px-2 py-1 mt-1 hover:bg-fg hover:text-bg cursor-pointer"
>
Add
</button>
</div>
</div>
<!-- ============ TRANSACTION DETAIL ============ --> <!-- ============ TRANSACTION DETAIL ============ -->
<div id="view-transaction" class="view hidden"> <div id="view-transaction" class="view hidden">
<button <button
@@ -835,7 +931,11 @@
</div> </div>
<div class="mb-4"> <div class="mb-4">
<div class="text-xs text-muted mb-1">Amount</div> <div class="text-xs text-muted mb-1">Amount</div>
<div id="tx-detail-value" class="text-xs font-bold"></div> <div id="tx-detail-value" class="text-xs"></div>
</div>
<div class="mb-4 hidden">
<div class="text-xs text-muted mb-1">Native quantity</div>
<div id="tx-detail-native" class="text-xs"></div>
</div> </div>
<div class="mb-4"> <div class="mb-4">
<div class="text-xs text-muted mb-1">From</div> <div class="text-xs text-muted mb-1">From</div>
@@ -845,6 +945,15 @@
<div class="text-xs text-muted mb-1">To</div> <div class="text-xs text-muted mb-1">To</div>
<div id="tx-detail-to" class="text-xs break-all"></div> <div id="tx-detail-to" class="text-xs break-all"></div>
</div> </div>
<div id="tx-detail-calldata-section" class="mb-4 hidden">
<div class="text-xs text-muted mb-1">
Contract interaction
</div>
<div
id="tx-detail-calldata"
class="text-xs break-all border border-border border-dashed p-2"
></div>
</div>
<div class="mb-4"> <div class="mb-4">
<div class="text-xs text-muted mb-1">Transaction hash</div> <div class="text-xs text-muted mb-1">Transaction hash</div>
<div id="tx-detail-hash" class="text-xs break-all"></div> <div id="tx-detail-hash" class="text-xs break-all"></div>
@@ -886,11 +995,7 @@
</div> </div>
<div id="approve-tx-data-section" class="mb-3 hidden"> <div id="approve-tx-data-section" class="mb-3 hidden">
<div class="text-xs text-muted mb-1">Raw data</div> <div class="text-xs text-muted mb-1">Raw data</div>
<div <div id="approve-tx-data" class="text-xs break-all"></div>
id="approve-tx-data"
class="text-xs break-all"
style="max-height: 4rem; overflow-y: auto"
></div>
</div> </div>
<div class="mb-2"> <div class="mb-2">
<label class="block mb-1 text-xs">Password</label> <label class="block mb-1 text-xs">Password</label>
@@ -925,6 +1030,17 @@
wants you to sign a message. wants you to sign a message.
</p> </p>
<div
id="approve-sign-danger-warning"
class="hidden mb-3 p-2 text-xs font-bold"
style="
background: #fee2e2;
color: #991b1b;
border: 2px solid #dc2626;
border-radius: 6px;
"
></div>
<div class="mb-3"> <div class="mb-3">
<div class="text-xs text-muted mb-1">Type</div> <div class="text-xs text-muted mb-1">Type</div>
<div id="approve-sign-type" class="text-xs font-bold"></div> <div id="approve-sign-type" class="text-xs font-bold"></div>

View File

@@ -20,6 +20,7 @@ const transactionDetail = require("./views/transactionDetail");
const receive = require("./views/receive"); const receive = require("./views/receive");
const addToken = require("./views/addToken"); const addToken = require("./views/addToken");
const settings = require("./views/settings"); const settings = require("./views/settings");
const settingsAddToken = require("./views/settingsAddToken");
const approval = require("./views/approval"); const approval = require("./views/approval");
function renderWalletList() { function renderWalletList() {
@@ -60,6 +61,8 @@ const ctx = {
showConfirmTx: (txInfo) => confirmTx.show(txInfo), showConfirmTx: (txInfo) => confirmTx.show(txInfo),
showReceive: () => receive.show(), showReceive: () => receive.show(),
showTransactionDetail: (tx) => transactionDetail.show(tx), showTransactionDetail: (tx) => transactionDetail.show(tx),
showSettingsView: () => settings.show(),
showSettingsAddTokenView: () => settingsAddToken.show(),
}; };
// Views that can be fully re-rendered from persisted state. // Views that can be fully re-rendered from persisted state.
@@ -70,6 +73,7 @@ const RESTORABLE_VIEWS = new Set([
"address-token", "address-token",
"receive", "receive",
"settings", "settings",
"settings-addtoken",
"transaction", "transaction",
"success-tx", "success-tx",
"error-tx", "error-tx",
@@ -120,6 +124,9 @@ function restoreView() {
case "settings": case "settings":
settings.show(); settings.show();
break; break;
case "settings-addtoken":
settingsAddToken.show();
break;
case "transaction": case "transaction":
if (state.viewData && state.viewData.tx) { if (state.viewData && state.viewData.tx) {
transactionDetail.render(); transactionDetail.render();
@@ -212,6 +219,7 @@ async function init() {
receive.init(ctx); receive.init(ctx);
addToken.init(ctx); addToken.init(ctx);
settings.init(ctx); settings.init(ctx);
settingsAddToken.init(ctx);
if (!state.hasWallet) { if (!state.hasWallet) {
showView("welcome"); showView("welcome");

View File

@@ -49,8 +49,8 @@ function init(ctx) {
showFlash("Please choose a password."); showFlash("Please choose a password.");
return; return;
} }
if (pw.length < 8) { if (pw.length < 12) {
showFlash("Password must be at least 8 characters."); showFlash("Password must be at least 12 characters.");
return; return;
} }
if (pw !== pw2) { if (pw !== pw2) {

View File

@@ -54,7 +54,8 @@ function show() {
const addrLink = etherscanAddressLink(addr.address); const addrLink = etherscanAddressLink(addr.address);
$("address-etherscan-link").innerHTML = $("address-etherscan-link").innerHTML =
`<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`; `<a href="${addrLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
$("address-usd-total").textContent = formatUsd(getAddressValueUsd(addr)); const usdTotal = formatUsd(getAddressValueUsd(addr));
$("address-usd-total").innerHTML = usdTotal || "&nbsp;";
const ensEl = $("address-ens"); const ensEl = $("address-ens");
if (addr.ensName) { if (addr.ensName) {
ensEl.innerHTML = ensEl.innerHTML =
@@ -184,13 +185,16 @@ function renderTransactions(txs) {
let html = ""; let html = "";
let i = 0; let i = 0;
for (const tx of txs) { for (const tx of txs) {
const counterparty = tx.direction === "sent" ? tx.to : tx.from; const counterparty =
tx.direction === "sent" || tx.direction === "contract"
? tx.to
: tx.from;
const ensName = ensNameMap.get(counterparty) || null; const ensName = ensNameMap.get(counterparty) || null;
const dirLabel = tx.directionLabel; const dirLabel = tx.directionLabel;
const amountStr = tx.value const amountStr = tx.value
? escapeHtml(tx.value + " " + tx.symbol) ? escapeHtml(tx.value + " " + tx.symbol)
: escapeHtml(tx.symbol); : escapeHtml(tx.symbol);
const maxAddr = Math.max(10, 36 - Math.max(0, amountStr.length - 10)); const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
const displayAddr = ensName || truncateMiddle(counterparty, maxAddr); const displayAddr = ensName || truncateMiddle(counterparty, maxAddr);
const addrStr = escapeHtml(displayAddr); const addrStr = escapeHtml(displayAddr);
const dot = addressDotHtml(counterparty); const dot = addressDotHtml(counterparty);

View File

@@ -124,11 +124,55 @@ function show() {
// USD total for this token only // USD total for this token only
const usdVal = price ? amount * price : 0; const usdVal = price ? amount * price : 0;
$("address-token-usd-total").textContent = formatUsd(usdVal); const usdStr = formatUsd(usdVal);
$("address-token-usd-total").innerHTML = usdStr || "&nbsp;";
// Single token balance line (no tokenId — not clickable here) // Single token balance line (no tokenId — not clickable here)
$("address-token-balance").innerHTML = balanceLine(symbol, amount, price); $("address-token-balance").innerHTML = balanceLine(symbol, amount, price);
// Token contract details (ERC-20 only)
const contractInfo = $("address-token-contract-info");
if (tokenId !== "ETH") {
const tb = (addr.tokenBalances || []).find(
(t) => t.address.toLowerCase() === tokenId.toLowerCase(),
);
const tokenName = tb && tb.name ? escapeHtml(tb.name) : null;
const tokenSymbol = tb && tb.symbol ? escapeHtml(tb.symbol) : null;
const tokenDecimals = tb && tb.decimals != null ? tb.decimals : null;
const tokenHolders = tb && tb.holders != null ? tb.holders : null;
const dot = addressDotHtml(tokenId);
const tokenLink = `https://etherscan.io/token/${escapeHtml(tokenId)}`;
let infoHtml =
`<div class="font-bold mb-1">Token Contract</div>` +
`<div class="flex items-center mb-1">${dot}` +
`<span class="break-all underline decoration-dashed cursor-pointer" id="address-token-contract-copy" data-copy="${escapeHtml(tokenId)}">${escapeHtml(tokenId)}</span>` +
`<a href="${tokenLink}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>` +
`</div>`;
const details = [];
if (tokenName)
details.push(`<span class="text-muted">Name:</span> ${tokenName}`);
if (tokenSymbol)
details.push(
`<span class="text-muted">Symbol:</span> ${tokenSymbol}`,
);
if (tokenDecimals != null)
details.push(
`<span class="text-muted">Decimals:</span> ${tokenDecimals}`,
);
if (tokenHolders != null)
details.push(
`<span class="text-muted">Holders:</span> ${Number(tokenHolders).toLocaleString()}`,
);
if (details.length > 0) {
infoHtml += `<div class="flex flex-wrap gap-x-3 gap-y-1">${details.join("")}</div>`;
}
contractInfo.innerHTML = infoHtml;
contractInfo.classList.remove("hidden");
} else {
contractInfo.innerHTML = "";
contractInfo.classList.add("hidden");
}
// Transactions // Transactions
$("address-token-tx-list").innerHTML = $("address-token-tx-list").innerHTML =
'<div class="text-muted text-xs py-1">Loading...</div>'; '<div class="text-muted text-xs py-1">Loading...</div>';
@@ -215,7 +259,7 @@ function renderTransactions(txs) {
const amountStr = tx.value const amountStr = tx.value
? escapeHtml(tx.value + " " + tx.symbol) ? escapeHtml(tx.value + " " + tx.symbol)
: escapeHtml(tx.symbol); : escapeHtml(tx.symbol);
const maxAddr = Math.max(10, 36 - Math.max(0, amountStr.length - 10)); const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
const displayAddr = ensName || truncateMiddle(counterparty, maxAddr); const displayAddr = ensName || truncateMiddle(counterparty, maxAddr);
const addrStr = escapeHtml(displayAddr); const addrStr = escapeHtml(displayAddr);
const dot = addressDotHtml(counterparty); const dot = addressDotHtml(counterparty);
@@ -251,6 +295,14 @@ function init(_ctx) {
} }
}); });
$("address-token-contract-info").addEventListener("click", (e) => {
const copyEl = e.target.closest("[data-copy]");
if (copyEl) {
navigator.clipboard.writeText(copyEl.dataset.copy);
showFlash("Copied!");
}
});
$("btn-address-token-back").addEventListener("click", () => { $("btn-address-token-back").addEventListener("click", () => {
ctx.showAddressDetail(); ctx.showAddressDetail();
}); });

View File

@@ -4,6 +4,7 @@ const { formatEther, formatUnits, Interface, toUtf8String } = require("ethers");
const { ERC20_ABI } = require("../../shared/constants"); const { ERC20_ABI } = require("../../shared/constants");
const { TOKEN_BY_ADDRESS } = require("../../shared/tokenList"); const { TOKEN_BY_ADDRESS } = require("../../shared/tokenList");
const txStatus = require("./txStatus"); const txStatus = require("./txStatus");
const uniswap = require("../../shared/uniswap");
const runtime = const runtime =
typeof browser !== "undefined" ? browser.runtime : chrome.runtime; typeof browser !== "undefined" ? browser.runtime : chrome.runtime;
@@ -40,81 +41,90 @@ function etherscanTokenLink(address) {
return `https://etherscan.io/token/${address}`; return `https://etherscan.io/token/${address}`;
} }
// Try to decode calldata using the ERC-20 ABI. // Try to decode calldata using known ABIs.
// Returns { name, description, details } or null. // Returns { name, description, details } or null.
function decodeCalldata(data, toAddress) { function decodeCalldata(data, toAddress) {
if (!data || data === "0x" || data.length < 10) return null; if (!data || data === "0x" || data.length < 10) return null;
// Try ERC-20 (approve / transfer)
try { try {
const parsed = erc20Iface.parseTransaction({ data }); const parsed = erc20Iface.parseTransaction({ data });
if (!parsed) return null; if (parsed) {
const token = TOKEN_BY_ADDRESS.get(toAddress.toLowerCase());
const tokenSymbol = token ? token.symbol : null;
const tokenDecimals = token ? token.decimals : 18;
const contractLabel = tokenSymbol
? tokenSymbol + " (" + toAddress + ")"
: toAddress;
const token = TOKEN_BY_ADDRESS.get(toAddress.toLowerCase()); if (parsed.name === "approve") {
const tokenSymbol = token ? token.symbol : null; const spender = parsed.args[0];
const tokenDecimals = token ? token.decimals : 18; const rawAmount = parsed.args[1];
const contractLabel = tokenSymbol const maxUint = BigInt(
? tokenSymbol + " (" + toAddress + ")" "0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff",
: toAddress; );
const isUnlimited = rawAmount === maxUint;
const amountStr = isUnlimited
? "Unlimited"
: formatTxValue(formatUnits(rawAmount, tokenDecimals)) +
(tokenSymbol ? " " + tokenSymbol : "");
if (parsed.name === "approve") { return {
const spender = parsed.args[0]; name: "Token Approval",
const rawAmount = parsed.args[1]; description: tokenSymbol
const maxUint = BigInt( ? "Approve spending of your " + tokenSymbol
"0xffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffffff", : "Approve spending of an ERC-20 token",
); details: [
const isUnlimited = rawAmount === maxUint; {
const amountStr = isUnlimited label: "Token",
? "Unlimited" value: contractLabel,
: formatTxValue(formatUnits(rawAmount, tokenDecimals)) + address: toAddress,
(tokenSymbol ? " " + tokenSymbol : ""); isToken: true,
},
{
label: "Spender",
value: spender,
address: spender,
},
{ label: "Amount", value: amountStr },
],
};
}
return { if (parsed.name === "transfer") {
name: "Token Approval", const to = parsed.args[0];
description: tokenSymbol const rawAmount = parsed.args[1];
? "Approve spending of your " + tokenSymbol const amountStr =
: "Approve spending of an ERC-20 token", formatTxValue(formatUnits(rawAmount, tokenDecimals)) +
details: [ (tokenSymbol ? " " + tokenSymbol : "");
{
label: "Token", return {
value: contractLabel, name: "Token Transfer",
address: toAddress, description: tokenSymbol
isToken: true, ? "Transfer " + tokenSymbol
}, : "Transfer ERC-20 token",
{ label: "Spender", value: spender, address: spender }, details: [
{ label: "Amount", value: amountStr }, {
], label: "Token",
}; value: contractLabel,
address: toAddress,
isToken: true,
},
{ label: "Recipient", value: to, address: to },
{ label: "Amount", value: amountStr },
],
};
}
} }
if (parsed.name === "transfer") {
const to = parsed.args[0];
const rawAmount = parsed.args[1];
const amountStr =
formatTxValue(formatUnits(rawAmount, tokenDecimals)) +
(tokenSymbol ? " " + tokenSymbol : "");
return {
name: "Token Transfer",
description: tokenSymbol
? "Transfer " + tokenSymbol
: "Transfer ERC-20 token",
details: [
{
label: "Token",
value: contractLabel,
address: toAddress,
isToken: true,
},
{ label: "Recipient", value: to, address: to },
{ label: "Amount", value: amountStr },
],
};
}
return null;
} catch { } catch {
return null; // Not ERC-20 — fall through
} }
// Try Uniswap Universal Router
const routerResult = uniswap.decode(data, toAddress);
if (routerResult) return routerResult;
return null;
} }
function showTxApproval(details) { function showTxApproval(details) {
@@ -284,6 +294,18 @@ function showSignApproval(details) {
} }
} }
// Display danger warning for eth_sign (raw hash signing)
const warningEl = $("approve-sign-danger-warning");
if (warningEl) {
if (sp.dangerWarning) {
warningEl.textContent = sp.dangerWarning;
warningEl.classList.remove("hidden");
} else {
warningEl.textContent = "";
warningEl.classList.add("hidden");
}
}
$("approve-sign-password").value = ""; $("approve-sign-password").value = "";
$("approve-sign-error").classList.add("hidden"); $("approve-sign-error").classList.add("hidden");
$("btn-approve-sign").disabled = false; $("btn-approve-sign").disabled = false;
@@ -363,6 +385,7 @@ function init(ctx) {
type: "AUTISTMASK_TX_RESPONSE", type: "AUTISTMASK_TX_RESPONSE",
id: approvalId, id: approvalId,
approved: true, approved: true,
// TODO(security): Move decryption to popup to avoid sending password via runtime.sendMessage
password: password, password: password,
}, },
(response) => { (response) => {
@@ -402,6 +425,7 @@ function init(ctx) {
type: "AUTISTMASK_SIGN_RESPONSE", type: "AUTISTMASK_SIGN_RESPONSE",
id: approvalId, id: approvalId,
approved: true, approved: true,
// TODO(security): Move decryption to popup to avoid sending password via runtime.sendMessage
password: password, password: password,
}, },
(response) => { (response) => {
@@ -429,4 +453,4 @@ function init(ctx) {
}); });
} }
module.exports = { init, show }; module.exports = { init, show, decodeCalldata };

View File

@@ -334,8 +334,13 @@ function init(ctx) {
tx = await contract.transfer(pendingTx.to, amount); tx = await contract.transfer(pendingTx.to, amount);
} }
// Best-effort: clear decrypted secret after use.
// Note: JS strings are immutable; this nulls the reference but
// the original string may persist in memory until GC.
decryptedSecret = null;
txStatus.showWait(pendingTx, tx.hash); txStatus.showWait(pendingTx, tx.hash);
} catch (e) { } catch (e) {
decryptedSecret = null;
const hash = tx ? tx.hash : null; const hash = tx ? tx.hash : null;
txStatus.showError(pendingTx, hash, e.shortMessage || e.message); txStatus.showError(pendingTx, hash, e.shortMessage || e.message);
} }

View File

@@ -8,6 +8,8 @@ const {
} = require("../../shared/prices"); } = require("../../shared/prices");
const { state, saveState } = require("../../shared/state"); const { state, saveState } = require("../../shared/state");
// When views are added, removed, or transitions between them change,
// update the view-navigation documentation in README.md to match.
const VIEWS = [ const VIEWS = [
"welcome", "welcome",
"add-wallet", "add-wallet",
@@ -23,6 +25,7 @@ const VIEWS = [
"receive", "receive",
"add-token", "add-token",
"settings", "settings",
"settings-addtoken",
"transaction", "transaction",
"approve-site", "approve-site",
"approve-tx", "approve-tx",
@@ -82,7 +85,7 @@ function showFlash(msg, duration = 2000) {
function balanceLine(symbol, amount, price, tokenId) { function balanceLine(symbol, amount, price, tokenId) {
const qty = amount.toFixed(4); const qty = amount.toFixed(4);
const usd = price ? formatUsd(amount * price) : ""; const usd = price ? formatUsd(amount * price) || "&nbsp;" : "&nbsp;";
const tokenAttr = tokenId ? ` data-token="${tokenId}"` : ""; const tokenAttr = tokenId ? ` data-token="${tokenId}"` : "";
const clickClass = tokenId const clickClass = tokenId
? " cursor-pointer hover:bg-hover balance-row" ? " cursor-pointer hover:bg-hover balance-row"
@@ -131,9 +134,18 @@ function balanceLinesForAddress(addr, trackedTokens, showZero) {
return html; return html;
} }
// Truncate the middle of a string, replacing removed characters with "…".
// Safety: refuses to truncate more than 10 characters, which is the maximum
// that still prevents address spoofing attacks (see Display Consistency in
// README). Callers that need to display less should use a different UI
// approach rather than silently making addresses insecure.
function truncateMiddle(str, maxLen) { function truncateMiddle(str, maxLen) {
if (str.length <= maxLen) return str; if (str.length <= maxLen) return str;
if (maxLen < 5) return str.slice(0, maxLen); const removed = str.length - maxLen + 1; // +1 for the ellipsis char
if (removed > 10) {
maxLen = str.length - 10 + 1;
}
if (maxLen >= str.length) return str;
const half = Math.floor((maxLen - 1) / 2); const half = Math.floor((maxLen - 1) / 2);
return str.slice(0, half) + "\u2026" + str.slice(-(maxLen - 1 - half)); return str.slice(0, half) + "\u2026" + str.slice(-(maxLen - 1 - half));
} }
@@ -210,6 +222,41 @@ function formatAddressHtml(address, ensName, maxLen, title) {
return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(displayAddr)}</span></div>`; return `<div class="flex items-center">${dot}<span class="break-all">${escapeHtml(displayAddr)}</span></div>`;
} }
function isoDate(timestamp) {
const d = new Date(timestamp * 1000);
const pad = (n) => String(n).padStart(2, "0");
return (
d.getFullYear() +
"-" +
pad(d.getMonth() + 1) +
"-" +
pad(d.getDate()) +
" " +
pad(d.getHours()) +
":" +
pad(d.getMinutes()) +
":" +
pad(d.getSeconds())
);
}
function timeAgo(timestamp) {
const seconds = Math.floor(Date.now() / 1000 - timestamp);
if (seconds < 60) return seconds + " seconds ago";
const minutes = Math.floor(seconds / 60);
if (minutes < 60)
return minutes + " minute" + (minutes !== 1 ? "s" : "") + " ago";
const hours = Math.floor(minutes / 60);
if (hours < 24) return hours + " hour" + (hours !== 1 ? "s" : "") + " ago";
const days = Math.floor(hours / 24);
if (days < 30) return days + " day" + (days !== 1 ? "s" : "") + " ago";
const months = Math.floor(days / 30);
if (months < 12)
return months + " month" + (months !== 1 ? "s" : "") + " ago";
const years = Math.floor(days / 365);
return years + " year" + (years !== 1 ? "s" : "") + " ago";
}
module.exports = { module.exports = {
$, $,
showError, showError,
@@ -224,4 +271,6 @@ module.exports = {
addressTitle, addressTitle,
formatAddressHtml, formatAddressHtml,
truncateMiddle, truncateMiddle,
isoDate,
timeAgo,
}; };

View File

@@ -3,6 +3,8 @@ const {
showView, showView,
showFlash, showFlash,
balanceLinesForAddress, balanceLinesForAddress,
isoDate,
timeAgo,
addressDotHtml, addressDotHtml,
escapeHtml, escapeHtml,
truncateMiddle, truncateMiddle,
@@ -38,13 +40,15 @@ function renderTotalValue() {
const ethPrice = getPrice("ETH"); const ethPrice = getPrice("ETH");
if (priceEl) { if (priceEl) {
priceEl.textContent = ethPrice ? formatUsd(ethPrice) + " USD/ETH" : ""; priceEl.innerHTML = ethPrice
? formatUsd(ethPrice) + " USD/ETH"
: "&nbsp;";
} }
const addr = findActiveAddr(); const addr = findActiveAddr();
if (!addr) { if (!addr) {
el.textContent = ""; el.innerHTML = "&nbsp;";
if (subEl) subEl.textContent = ""; if (subEl) subEl.innerHTML = "&nbsp;";
return; return;
} }
const ethBal = parseFloat(addr.balance || "0"); const ethBal = parseFloat(addr.balance || "0");
@@ -54,8 +58,8 @@ function renderTotalValue() {
if (subEl) { if (subEl) {
const totalUsd = getAddressValueUsd(addr); const totalUsd = getAddressValueUsd(addr);
subEl.textContent = subEl.innerHTML =
totalUsd !== null ? "Total: " + formatUsd(totalUsd) : ""; totalUsd !== null ? "Total: " + formatUsd(totalUsd) : "&nbsp;";
} }
} }
@@ -85,41 +89,6 @@ function renderActiveAddress() {
} }
} }
function timeAgo(timestamp) {
const seconds = Math.floor(Date.now() / 1000 - timestamp);
if (seconds < 60) return seconds + " seconds ago";
const minutes = Math.floor(seconds / 60);
if (minutes < 60)
return minutes + " minute" + (minutes !== 1 ? "s" : "") + " ago";
const hours = Math.floor(minutes / 60);
if (hours < 24) return hours + " hour" + (hours !== 1 ? "s" : "") + " ago";
const days = Math.floor(hours / 24);
if (days < 30) return days + " day" + (days !== 1 ? "s" : "") + " ago";
const months = Math.floor(days / 30);
if (months < 12)
return months + " month" + (months !== 1 ? "s" : "") + " ago";
const years = Math.floor(days / 365);
return years + " year" + (years !== 1 ? "s" : "") + " ago";
}
function isoDate(timestamp) {
const d = new Date(timestamp * 1000);
const pad = (n) => String(n).padStart(2, "0");
return (
d.getFullYear() +
"-" +
pad(d.getMonth() + 1) +
"-" +
pad(d.getDate()) +
" " +
pad(d.getHours()) +
":" +
pad(d.getMinutes()) +
":" +
pad(d.getSeconds())
);
}
let homeTxs = []; let homeTxs = [];
function renderHomeTxList(ctx) { function renderHomeTxList(ctx) {
@@ -133,12 +102,15 @@ function renderHomeTxList(ctx) {
let html = ""; let html = "";
let i = 0; let i = 0;
for (const tx of homeTxs) { for (const tx of homeTxs) {
const counterparty = tx.direction === "sent" ? tx.to : tx.from; const counterparty =
tx.direction === "sent" || tx.direction === "contract"
? tx.to
: tx.from;
const dirLabel = tx.directionLabel; const dirLabel = tx.directionLabel;
const amountStr = tx.value const amountStr = tx.value
? escapeHtml(tx.value + " " + tx.symbol) ? escapeHtml(tx.value + " " + tx.symbol)
: escapeHtml(tx.symbol); : escapeHtml(tx.symbol);
const maxAddr = Math.max(10, 36 - Math.max(0, amountStr.length - 10)); const maxAddr = Math.max(32, 36 - Math.max(0, amountStr.length - 10));
const displayAddr = truncateMiddle(counterparty, maxAddr); const displayAddr = truncateMiddle(counterparty, maxAddr);
const addrStr = escapeHtml(displayAddr); const addrStr = escapeHtml(displayAddr);
const dot = addressDotHtml(counterparty); const dot = addressDotHtml(counterparty);
@@ -276,7 +248,7 @@ function render(ctx) {
html += `<span class="flex-shrink-0 ml-1">${infoBtn}</span>`; html += `<span class="flex-shrink-0 ml-1">${infoBtn}</span>`;
html += `</div>`; html += `</div>`;
const addrUsd = formatUsd(getAddressValueUsd(addr)); const addrUsd = formatUsd(getAddressValueUsd(addr));
html += `<div class="text-xs text-muted text-right">${addrUsd}</div>`; html += `<div class="text-xs text-muted text-right min-h-[1rem]">${addrUsd || "&nbsp;"}</div>`;
html += balanceLinesForAddress( html += balanceLinesForAddress(
addr, addr,
state.trackedTokens, state.trackedTokens,

View File

@@ -30,8 +30,8 @@ function init(ctx) {
showFlash("Please choose a password."); showFlash("Please choose a password.");
return; return;
} }
if (pw.length < 8) { if (pw.length < 12) {
showFlash("Password must be at least 8 characters."); showFlash("Password must be at least 12 characters.");
return; return;
} }
if (pw !== pw2) { if (pw !== pw2) {

View File

@@ -1,4 +1,4 @@
const { $, showView, showFlash } = require("./helpers"); const { $, showView, showFlash, escapeHtml } = require("./helpers");
const { state, saveState } = require("../../shared/state"); const { state, saveState } = require("../../shared/state");
const { ETHEREUM_MAINNET_CHAIN_ID } = require("../../shared/constants"); const { ETHEREUM_MAINNET_CHAIN_ID } = require("../../shared/constants");
const { log, debugFetch } = require("../../shared/log"); const { log, debugFetch } = require("../../shared/log");
@@ -38,9 +38,37 @@ function renderSiteList(containerId, siteMap, stateKey) {
}); });
} }
function renderTrackedTokens() {
const container = $("settings-tracked-tokens");
if (state.trackedTokens.length === 0) {
container.innerHTML = '<p class="text-xs text-muted">None</p>';
return;
}
let html = "";
state.trackedTokens.forEach((token, idx) => {
const label = token.name
? escapeHtml(token.name) + " (" + escapeHtml(token.symbol) + ")"
: escapeHtml(token.symbol);
html += `<div class="flex justify-between items-center text-xs py-1 border-b border-border-light">`;
html += `<span>${label}</span>`;
html += `<button class="btn-remove-token border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer" data-idx="${idx}">[x]</button>`;
html += `</div>`;
});
container.innerHTML = html;
container.querySelectorAll(".btn-remove-token").forEach((btn) => {
btn.addEventListener("click", async () => {
const idx = parseInt(btn.dataset.idx, 10);
state.trackedTokens.splice(idx, 1);
await saveState();
renderTrackedTokens();
});
});
}
function show() { function show() {
$("settings-rpc").value = state.rpcUrl; $("settings-rpc").value = state.rpcUrl;
$("settings-blockscout").value = state.blockscoutUrl; $("settings-blockscout").value = state.blockscoutUrl;
renderTrackedTokens();
renderSiteLists(); renderSiteLists();
showView("settings"); showView("settings");
} }
@@ -155,6 +183,11 @@ function init(ctx) {
$("btn-main-add-wallet").addEventListener("click", ctx.showAddWalletView); $("btn-main-add-wallet").addEventListener("click", ctx.showAddWalletView);
$("btn-settings-add-token").addEventListener(
"click",
ctx.showSettingsAddTokenView,
);
$("btn-settings-back").addEventListener("click", () => { $("btn-settings-back").addEventListener("click", () => {
ctx.renderWalletList(); ctx.renderWalletList();
showView("main"); showView("main");

View File

@@ -0,0 +1,159 @@
const { $, showView, showFlash } = require("./helpers");
const { getTopTokens } = require("../../shared/tokenList");
const { state, saveState } = require("../../shared/state");
const { lookupTokenInfo } = require("../../shared/balances");
const { isScamAddress } = require("../../shared/scamlist");
const { log } = require("../../shared/log");
let ctx;
function isTracked(address) {
const lower = address.toLowerCase();
return state.trackedTokens.some((t) => t.address.toLowerCase() === lower);
}
function tokenLabel(t) {
return t.name ? t.name + " (" + t.symbol + ")" : t.symbol;
}
function renderTop10() {
const el = $("settings-addtoken-top10");
el.innerHTML = getTopTokens(10)
.map((t) => {
const tracked = isTracked(t.address);
const cls = tracked
? "border border-border px-1 text-xs opacity-40 cursor-default"
: "border border-border px-1 hover:bg-fg hover:text-bg cursor-pointer text-xs";
return (
`<button class="settings-addtoken-quick ${cls}"` +
` data-address="${t.address}"` +
` data-symbol="${t.symbol}"` +
` data-decimals="${t.decimals}"` +
` data-name="${(t.name || "").replace(/"/g, "&quot;")}"` +
`${tracked ? " disabled" : ""}>${t.symbol}</button>`
);
})
.join("");
el.querySelectorAll(".settings-addtoken-quick:not([disabled])").forEach(
(btn) => {
btn.addEventListener("click", async () => {
const token = {
address: btn.dataset.address,
symbol: btn.dataset.symbol,
decimals: parseInt(btn.dataset.decimals, 10),
name: btn.dataset.name || btn.dataset.symbol,
};
state.trackedTokens.push(token);
await saveState();
showFlash("Added " + token.symbol);
renderTop10();
renderDropdown();
ctx.doRefreshAndRender();
});
},
);
}
function renderDropdown() {
const sel = $("settings-addtoken-select");
const tokens = getTopTokens(100);
let html = '<option value="">-- select --</option>';
for (const t of tokens) {
const tracked = isTracked(t.address);
const label = tokenLabel(t) + (tracked ? " (tracked)" : "");
html +=
`<option value="${t.address}"` +
` data-symbol="${t.symbol}"` +
` data-decimals="${t.decimals}"` +
` data-name="${(t.name || "").replace(/"/g, "&quot;")}"` +
`${tracked ? " disabled" : ""}>${label}</option>`;
}
sel.innerHTML = html;
}
function show() {
$("settings-addtoken-address").value = "";
$("settings-addtoken-info").classList.add("hidden");
renderTop10();
renderDropdown();
showView("settings-addtoken");
}
function init(_ctx) {
ctx = _ctx;
$("btn-settings-addtoken-back").addEventListener("click", () => {
ctx.showSettingsView();
});
$("btn-settings-addtoken-select").addEventListener("click", async () => {
const sel = $("settings-addtoken-select");
const opt = sel.options[sel.selectedIndex];
if (!opt || !opt.value) {
showFlash("Please select a token.");
return;
}
if (isTracked(opt.value)) {
showFlash("Already tracked.");
return;
}
const token = {
address: opt.value,
symbol: opt.dataset.symbol,
decimals: parseInt(opt.dataset.decimals, 10),
name: opt.dataset.name || opt.dataset.symbol,
};
state.trackedTokens.push(token);
await saveState();
showFlash("Added " + token.symbol);
renderTop10();
renderDropdown();
ctx.doRefreshAndRender();
});
$("btn-settings-addtoken-manual").addEventListener("click", async () => {
const addr = $("settings-addtoken-address").value.trim();
if (!addr || !addr.startsWith("0x")) {
showFlash(
"Please enter a valid contract address starting with 0x.",
);
return;
}
if (isTracked(addr)) {
showFlash("Already tracked.");
return;
}
if (isScamAddress(addr)) {
showFlash("This address is on a known scam/fraud list.");
return;
}
const infoEl = $("settings-addtoken-info");
infoEl.textContent = "Looking up token...";
infoEl.classList.remove("hidden");
log.debugf("Looking up token contract", addr);
try {
const info = await lookupTokenInfo(addr, state.rpcUrl);
log.infof("Adding token", info.symbol, addr);
state.trackedTokens.push({
address: addr,
symbol: info.symbol,
decimals: info.decimals,
name: info.name,
});
await saveState();
showFlash("Added " + info.symbol);
$("settings-addtoken-address").value = "";
infoEl.classList.add("hidden");
renderTop10();
renderDropdown();
ctx.doRefreshAndRender();
} catch (e) {
const detail = e.shortMessage || e.message || String(e);
log.errorf("Token lookup failed for", addr, detail);
showFlash(detail);
infoEl.classList.add("hidden");
}
});
}
module.exports = { init, show };

View File

@@ -6,10 +6,15 @@ const {
showView, showView,
showFlash, showFlash,
addressDotHtml, addressDotHtml,
addressTitle,
escapeHtml, escapeHtml,
isoDate,
timeAgo,
} = require("./helpers"); } = require("./helpers");
const { state } = require("../../shared/state"); const { state } = require("../../shared/state");
const makeBlockie = require("ethereum-blockies-base64"); const makeBlockie = require("ethereum-blockies-base64");
const { log, debugFetch } = require("../../shared/log");
const { decodeCalldata } = require("./approval");
const EXT_ICON = const EXT_ICON =
`<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` + `<span style="display:inline-block;width:10px;height:10px;margin-left:4px;vertical-align:middle">` +
@@ -20,41 +25,6 @@ const EXT_ICON =
let ctx; let ctx;
function isoDate(timestamp) {
const d = new Date(timestamp * 1000);
const pad = (n) => String(n).padStart(2, "0");
return (
d.getFullYear() +
"-" +
pad(d.getMonth() + 1) +
"-" +
pad(d.getDate()) +
" " +
pad(d.getHours()) +
":" +
pad(d.getMinutes()) +
":" +
pad(d.getSeconds())
);
}
function timeAgo(timestamp) {
const seconds = Math.floor(Date.now() / 1000 - timestamp);
if (seconds < 60) return seconds + " seconds ago";
const minutes = Math.floor(seconds / 60);
if (minutes < 60)
return minutes + " minute" + (minutes !== 1 ? "s" : "") + " ago";
const hours = Math.floor(minutes / 60);
if (hours < 24) return hours + " hour" + (hours !== 1 ? "s" : "") + " ago";
const days = Math.floor(hours / 24);
if (days < 30) return days + " day" + (days !== 1 ? "s" : "") + " ago";
const months = Math.floor(days / 30);
if (months < 12)
return months + " month" + (months !== 1 ? "s" : "") + " ago";
const years = Math.floor(days / 365);
return years + " year" + (years !== 1 ? "s" : "") + " ago";
}
function copyableHtml(text, extraClass) { function copyableHtml(text, extraClass) {
const cls = const cls =
"underline decoration-dashed cursor-pointer" + "underline decoration-dashed cursor-pointer" +
@@ -67,15 +37,18 @@ function blockieHtml(address) {
return `<img src="${src}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`; return `<img src="${src}" width="48" height="48" style="image-rendering:pixelated;border-radius:50%;display:inline-block">`;
} }
function txAddressHtml(address, ensName) { function txAddressHtml(address, ensName, title) {
const blockie = blockieHtml(address); const blockie = blockieHtml(address);
const dot = addressDotHtml(address); const dot = addressDotHtml(address);
const link = `https://etherscan.io/address/${address}`; const link = `https://etherscan.io/address/${address}`;
const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`; const extLink = `<a href="${link}" target="_blank" rel="noopener" class="inline-flex items-center">${EXT_ICON}</a>`;
let html = `<div class="mb-1">${blockie}</div>`; let html = `<div class="mb-1">${blockie}</div>`;
if (title) {
html += `<div class="flex items-center font-bold">${dot}${escapeHtml(title)}</div>`;
}
if (ensName) { if (ensName) {
html += html +=
`<div class="flex items-center">${dot}` + `<div class="flex items-center">${title ? "" : dot}` +
copyableHtml(ensName, "") + copyableHtml(ensName, "") +
extLink + extLink +
`</div>` + `</div>` +
@@ -84,7 +57,7 @@ function txAddressHtml(address, ensName) {
`</div>`; `</div>`;
} else { } else {
html += html +=
`<div class="flex items-center">${dot}` + `<div class="flex items-center">${title ? "" : dot}` +
copyableHtml(address, "break-all") + copyableHtml(address, "break-all") +
extLink + extLink +
`</div>`; `</div>`;
@@ -105,26 +78,61 @@ function show(tx) {
from: tx.from, from: tx.from,
to: tx.to, to: tx.to,
value: tx.value, value: tx.value,
exactValue: tx.exactValue || tx.value,
rawAmount: tx.rawAmount || "",
rawUnit: tx.rawUnit || "",
symbol: tx.symbol, symbol: tx.symbol,
timestamp: tx.timestamp, timestamp: tx.timestamp,
isError: tx.isError, isError: tx.isError,
fromEns: tx.fromEns || null, fromEns: tx.fromEns || null,
toEns: tx.toEns || null, toEns: tx.toEns || null,
directionLabel: tx.directionLabel || null, directionLabel: tx.directionLabel || null,
direction: tx.direction || null,
isContractCall: tx.isContractCall || false,
method: tx.method || null,
}, },
}; };
render(); render();
if (tx.isContractCall || tx.direction === "contract") {
loadCalldata(tx.hash, tx.to);
}
} }
function render() { function render() {
const tx = state.viewData.tx; const tx = state.viewData.tx;
if (!tx) return; if (!tx) return;
$("tx-detail-hash").innerHTML = txHashHtml(tx.hash); $("tx-detail-hash").innerHTML = txHashHtml(tx.hash);
$("tx-detail-from").innerHTML = txAddressHtml(tx.from, tx.fromEns);
$("tx-detail-to").innerHTML = txAddressHtml(tx.to, tx.toEns); const fromTitle = addressTitle(tx.from, state.wallets);
$("tx-detail-value").textContent = tx.value const toTitle = addressTitle(tx.to, state.wallets);
? tx.value + " " + tx.symbol $("tx-detail-from").innerHTML = txAddressHtml(
tx.from,
tx.fromEns,
fromTitle,
);
$("tx-detail-to").innerHTML = txAddressHtml(tx.to, tx.toEns, toTitle);
// Exact amount (full precision, copyable)
const exactStr = tx.exactValue
? tx.exactValue + " " + tx.symbol
: tx.directionLabel + " " + tx.symbol; : tx.directionLabel + " " + tx.symbol;
$("tx-detail-value").innerHTML = copyableHtml(exactStr, "font-bold");
// Native quantity (raw integer, copyable)
const nativeEl = $("tx-detail-native");
if (tx.rawAmount && tx.rawUnit) {
const nativeStr = tx.rawAmount + " " + tx.rawUnit;
nativeEl.innerHTML = copyableHtml(nativeStr, "");
nativeEl.parentElement.classList.remove("hidden");
} else {
nativeEl.innerHTML = "";
nativeEl.parentElement.classList.add("hidden");
}
// Hide calldata section by default; loadCalldata will show it if needed
const calldataSection = $("tx-detail-calldata-section");
if (calldataSection) calldataSection.classList.add("hidden");
$("tx-detail-time").textContent = $("tx-detail-time").textContent =
isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")"; isoDate(tx.timestamp) + " (" + timeAgo(tx.timestamp) + ")";
$("tx-detail-status").textContent = tx.isError ? "Failed" : "Success"; $("tx-detail-status").textContent = tx.isError ? "Failed" : "Success";
@@ -141,6 +149,62 @@ function render() {
}); });
} }
function renderDecodedCalldata(decoded) {
let html = `<div class="font-bold mb-1">${escapeHtml(decoded.name)}</div>`;
if (decoded.description) {
html += `<div class="text-muted mb-1">${escapeHtml(decoded.description)}</div>`;
}
for (const detail of decoded.details || []) {
html += `<div class="mb-1"><span class="text-muted">${escapeHtml(detail.label)}:</span> `;
if (detail.address) {
const dot = addressDotHtml(detail.address);
html += `${dot}${copyableHtml(detail.value, "break-all")}`;
} else {
html += escapeHtml(detail.value);
}
html += `</div>`;
}
return html;
}
async function loadCalldata(txHash, toAddress) {
const section = $("tx-detail-calldata-section");
const container = $("tx-detail-calldata");
if (!section || !container) return;
try {
const resp = await debugFetch(
state.blockscoutUrl + "/transactions/" + txHash,
);
if (!resp.ok) return;
const txData = await resp.json();
const inputData = txData.raw_input || txData.input || null;
if (!inputData || inputData === "0x") return;
const decoded = decodeCalldata(inputData, toAddress || "");
if (decoded) {
container.innerHTML = renderDecodedCalldata(decoded);
} else {
const method = txData.method || "Unknown method";
let html = `<div class="font-bold mb-1">Unknown contract call</div>`;
html += `<div class="text-muted mb-1">${escapeHtml(method)}</div>`;
html += `<div class="break-all font-mono text-xs">${copyableHtml(inputData, "break-all")}</div>`;
container.innerHTML = html;
}
section.classList.remove("hidden");
// Bind copy handlers for new elements
section.querySelectorAll("[data-copy]").forEach((el) => {
el.onclick = () => {
navigator.clipboard.writeText(el.dataset.copy);
showFlash("Copied!");
};
});
} catch (e) {
log.errorf("loadCalldata failed:", e.message);
}
}
function init(_ctx) { function init(_ctx) {
ctx = _ctx; ctx = _ctx;
$("btn-tx-back").addEventListener("click", () => { $("btn-tx-back").addEventListener("click", () => {

File diff suppressed because it is too large Load Diff

View File

@@ -27,6 +27,9 @@ function parseTx(tx, addrLower) {
// For contract calls, produce a meaningful label instead of "0.0000 ETH" // For contract calls, produce a meaningful label instead of "0.0000 ETH"
let symbol = "ETH"; let symbol = "ETH";
let value = formatTxValue(formatEther(rawWei)); let value = formatTxValue(formatEther(rawWei));
let exactValue = formatEther(rawWei);
let rawAmount = rawWei;
let rawUnit = "wei";
let direction = from.toLowerCase() === addrLower ? "sent" : "received"; let direction = from.toLowerCase() === addrLower ? "sent" : "received";
let directionLabel = direction === "sent" ? "Sent" : "Received"; let directionLabel = direction === "sent" ? "Sent" : "Received";
if (toIsContract && method && method !== "transfer") { if (toIsContract && method && method !== "transfer") {
@@ -34,10 +37,27 @@ function parseTx(tx, addrLower) {
if (token) { if (token) {
symbol = token.symbol; symbol = token.symbol;
} }
const label = method.charAt(0).toUpperCase() + method.slice(1); // Map known DEX methods to "Swap" for cleaner display
const SWAP_METHODS = new Set([
"execute",
"swap",
"swapExactTokensForTokens",
"swapTokensForExactTokens",
"swapExactETHForTokens",
"swapTokensForExactETH",
"swapExactTokensForETH",
"swapETHForExactTokens",
"multicall",
]);
const label = SWAP_METHODS.has(method)
? "Swap"
: method.charAt(0).toUpperCase() + method.slice(1);
direction = "contract"; direction = "contract";
directionLabel = label; directionLabel = label;
value = ""; value = "";
exactValue = "";
rawAmount = "";
rawUnit = "";
} }
return { return {
@@ -47,6 +67,9 @@ function parseTx(tx, addrLower) {
from: from, from: from,
to: to, to: to,
value: value, value: value,
exactValue: exactValue,
rawAmount: rawAmount,
rawUnit: rawUnit,
valueGwei: Math.floor(Number(BigInt(rawWei) / BigInt(1000000000))), valueGwei: Math.floor(Number(BigInt(rawWei) / BigInt(1000000000))),
symbol: symbol, symbol: symbol,
direction: direction, direction: direction,
@@ -63,17 +86,21 @@ function parseTokenTransfer(tt, addrLower) {
const from = tt.from?.hash || ""; const from = tt.from?.hash || "";
const to = tt.to?.hash || ""; const to = tt.to?.hash || "";
const decimals = parseInt(tt.total?.decimals || "18", 10); const decimals = parseInt(tt.total?.decimals || "18", 10);
const rawValue = tt.total?.value || "0"; const rawVal = tt.total?.value || "0";
const direction = from.toLowerCase() === addrLower ? "sent" : "received"; const direction = from.toLowerCase() === addrLower ? "sent" : "received";
const sym = tt.token?.symbol || "?";
return { return {
hash: tt.transaction_hash, hash: tt.transaction_hash,
blockNumber: tt.block_number, blockNumber: tt.block_number,
timestamp: Math.floor(new Date(tt.timestamp).getTime() / 1000), timestamp: Math.floor(new Date(tt.timestamp).getTime() / 1000),
from: from, from: from,
to: to, to: to,
value: formatTxValue(formatUnits(rawValue, decimals)), value: formatTxValue(formatUnits(rawVal, decimals)),
exactValue: formatUnits(rawVal, decimals),
rawAmount: rawVal,
rawUnit: sym + " base units (10^-" + decimals + ")",
valueGwei: null, valueGwei: null,
symbol: tt.token?.symbol || "?", symbol: sym,
direction: direction, direction: direction,
directionLabel: direction === "sent" ? "Sent" : "Received", directionLabel: direction === "sent" ? "Sent" : "Received",
isError: false, isError: false,
@@ -126,9 +153,18 @@ async function fetchRecentTransactions(address, blockscoutUrl, count = 25) {
// When a token transfer shares a hash with a normal tx, the normal tx // When a token transfer shares a hash with a normal tx, the normal tx
// is the contract call (0 ETH) and the token transfer has the real // is the contract call (0 ETH) and the token transfer has the real
// amount and symbol. Replace the normal tx with the token transfer. // amount and symbol. Replace the normal tx with the token transfer,
// but preserve contract call metadata (direction, label, method) so
// swaps and other contract interactions display correctly.
for (const tt of ttJson.items || []) { for (const tt of ttJson.items || []) {
const parsed = parseTokenTransfer(tt, addrLower); const parsed = parseTokenTransfer(tt, addrLower);
const existing = txsByHash.get(parsed.hash);
if (existing && existing.direction === "contract") {
parsed.direction = "contract";
parsed.directionLabel = existing.directionLabel;
parsed.isContractCall = true;
parsed.method = existing.method;
}
txsByHash.set(parsed.hash, parsed); txsByHash.set(parsed.hash, parsed);
} }

333
src/shared/uniswap.js Normal file
View File

@@ -0,0 +1,333 @@
// Decode Uniswap Universal Router execute() calldata into human-readable
// swap details. Designed to be extended with other DEX decoders later.
const { Interface, AbiCoder, getBytes, formatUnits } = require("ethers");
const { TOKEN_BY_ADDRESS } = require("./tokenList");
const coder = AbiCoder.defaultAbiCoder();
const ROUTER_IFACE = new Interface([
"function execute(bytes commands, bytes[] inputs, uint256 deadline)",
]);
// Universal Router command IDs (lower 5 bits of each command byte)
const COMMAND_NAMES = {
0x00: "V3 Swap (Exact In)",
0x01: "V3 Swap (Exact Out)",
0x02: "Permit2 Transfer",
0x03: "Permit2 Permit Batch",
0x04: "Sweep",
0x05: "Transfer",
0x06: "Pay Portion",
0x08: "V2 Swap (Exact In)",
0x09: "V2 Swap (Exact Out)",
0x0a: "Permit2 Permit",
0x0b: "Wrap ETH",
0x0c: "Unwrap WETH",
0x0d: "Permit2 Transfer Batch",
0x0e: "Balance Check",
0x10: "V4 Swap",
0x11: "V3 Position Mgr Permit",
0x12: "V3 Position Mgr Call",
0x13: "V4 Initialize Pool",
0x14: "V4 Position Mgr Call",
0x21: "Execute Sub-Plan",
};
function formatAmount(raw, decimals) {
const parts = formatUnits(raw, decimals).split(".");
if (parts.length === 1) return parts[0] + ".0000";
const dec = (parts[1] + "0000").slice(0, 4);
return parts[0] + "." + dec;
}
function tokenInfo(address) {
if (!address || address === "0x0000000000000000000000000000000000000000") {
return { symbol: "ETH", decimals: 18, address: null };
}
const t = TOKEN_BY_ADDRESS.get(address.toLowerCase());
if (t) return { symbol: t.symbol, decimals: t.decimals, address };
return { symbol: null, decimals: 18, address };
}
// Decode PERMIT2_PERMIT (command 0x0a) input bytes.
// ABI: ((address token, uint160 amount, uint48 expiration, uint48 nonce),
// address spender, uint256 sigDeadline), bytes signature
function decodePermit2(input) {
try {
const d = coder.decode(
[
"tuple(tuple(address,uint160,uint48,uint48),address,uint256)",
"bytes",
],
input,
);
return { token: d[0][0][0], amount: d[0][0][1], spender: d[0][1] };
} catch {
return null;
}
}
// Decode BALANCE_CHECK_ERC20 (command 0x0e) input bytes.
// ABI: (address owner, address token, uint256 minBalance)
function decodeBalanceCheck(input) {
try {
const d = coder.decode(["address", "address", "uint256"], input);
return { owner: d[0], token: d[1], minBalance: d[2] };
} catch {
return null;
}
}
// Decode V2_SWAP_EXACT_IN (command 0x08) input bytes.
// ABI: (address recipient, uint256 amountIn, uint256 amountOutMin,
// address[] path, bool payerIsUser)
function decodeV2SwapExactIn(input) {
try {
const d = coder.decode(
["address", "uint256", "uint256", "address[]", "bool"],
input,
);
return {
amountIn: d[1],
amountOutMin: d[2],
tokenIn: d[3][0],
tokenOut: d[3][d[3].length - 1],
};
} catch {
return null;
}
}
// Decode V2_SWAP_EXACT_OUT (command 0x09) input bytes.
// ABI: (address recipient, uint256 amountOut, uint256 amountInMax,
// address[] path, bool payerIsUser)
function decodeV2SwapExactOut(input) {
try {
const d = coder.decode(
["address", "uint256", "uint256", "address[]", "bool"],
input,
);
return {
amountOut: d[1],
amountInMax: d[2],
tokenIn: d[3][0],
tokenOut: d[3][d[3].length - 1],
};
} catch {
return null;
}
}
// Decode V3 swap path (packed: token(20) + fee(3) + token(20) ...)
function decodeV3Path(pathHex) {
const hex = pathHex.startsWith("0x") ? pathHex.slice(2) : pathHex;
if (hex.length < 40) return null;
const tokenIn = "0x" + hex.slice(0, 40);
const tokenOut = "0x" + hex.slice(-40);
return { tokenIn, tokenOut };
}
// Decode V3_SWAP_EXACT_IN (command 0x00) input bytes.
// ABI: (address recipient, uint256 amountIn, uint256 amountOutMin,
// bytes path, bool payerIsUser)
function decodeV3SwapExactIn(input) {
try {
const d = coder.decode(
["address", "uint256", "uint256", "bytes", "bool"],
input,
);
const path = decodeV3Path(d[3]);
if (!path) return null;
return {
amountIn: d[1],
amountOutMin: d[2],
tokenIn: path.tokenIn,
tokenOut: path.tokenOut,
};
} catch {
return null;
}
}
// Decode WRAP_ETH (command 0x0b) input bytes.
// ABI: (address recipient, uint256 amount)
function decodeWrapEth(input) {
try {
const d = coder.decode(["address", "uint256"], input);
return { amount: d[1] };
} catch {
return null;
}
}
// Try to decode a Universal Router execute() call.
// Returns { name, description, details } matching the format used by
// the approval UI, or null if the calldata is not a recognised execute().
function decode(data, toAddress) {
try {
const parsed = ROUTER_IFACE.parseTransaction({ data });
if (!parsed) return null;
const commandsBytes = getBytes(parsed.args[0]);
const inputs = parsed.args[1];
const deadline = parsed.args[2];
let inputToken = null;
let inputAmount = null;
let outputToken = null;
let minOutput = null;
let hasUnwrapWeth = false;
const commandNames = [];
for (let i = 0; i < commandsBytes.length; i++) {
const cmdId = commandsBytes[i] & 0x1f;
commandNames.push(
COMMAND_NAMES[cmdId] ||
"Command 0x" + cmdId.toString(16).padStart(2, "0"),
);
try {
if (cmdId === 0x0a) {
const p = decodePermit2(inputs[i]);
if (p) {
inputToken = p.token;
inputAmount = p.amount;
}
}
if (cmdId === 0x0e) {
const b = decodeBalanceCheck(inputs[i]);
if (b) {
outputToken = b.token;
minOutput = b.minBalance;
}
}
if (cmdId === 0x00) {
const s = decodeV3SwapExactIn(inputs[i]);
if (s) {
if (!inputToken) inputToken = s.tokenIn;
if (!outputToken) outputToken = s.tokenOut;
if (!inputAmount) inputAmount = s.amountIn;
if (!minOutput) minOutput = s.amountOutMin;
}
}
if (cmdId === 0x08) {
const s = decodeV2SwapExactIn(inputs[i]);
if (s) {
if (!inputToken) inputToken = s.tokenIn;
if (!outputToken) outputToken = s.tokenOut;
if (!inputAmount) inputAmount = s.amountIn;
if (!minOutput) minOutput = s.amountOutMin;
}
}
if (cmdId === 0x0b) {
const w = decodeWrapEth(inputs[i]);
if (w && !inputToken) {
inputToken =
"0x0000000000000000000000000000000000000000";
inputAmount = w.amount;
}
}
if (cmdId === 0x0c) {
hasUnwrapWeth = true;
}
} catch {
// Skip commands we can't decode
}
}
// Resolve token info
const inInfo = tokenInfo(inputToken);
const outInfo = hasUnwrapWeth
? { symbol: "ETH", decimals: 18, address: null }
: tokenInfo(outputToken);
const inSymbol = inInfo.symbol;
const outSymbol = outInfo.symbol;
const name =
inSymbol && outSymbol
? "Swap " + inSymbol + " \u2192 " + outSymbol
: "Uniswap Swap";
const details = [];
details.push({
label: "Protocol",
value: "Uniswap Universal Router",
address: toAddress,
});
if (inputToken && inInfo.address) {
const label = inSymbol
? inSymbol + " (" + inputToken + ")"
: inputToken;
details.push({
label: "Token In",
value: label,
address: inputToken,
isToken: true,
});
} else if (inSymbol === "ETH") {
details.push({ label: "Token In", value: "ETH (native)" });
}
if (inputAmount !== null && inputAmount !== undefined) {
const maxUint160 = BigInt(
"0xffffffffffffffffffffffffffffffffffffffff",
);
const amountStr =
inputAmount >= maxUint160
? "Unlimited"
: formatAmount(inputAmount, inInfo.decimals) +
(inSymbol ? " " + inSymbol : "");
details.push({ label: "Amount", value: amountStr });
}
if (outSymbol) {
if (outInfo.address) {
const label = outSymbol
? outSymbol + " (" + outputToken + ")"
: outputToken;
details.push({
label: "Token Out",
value: label,
address: outputToken,
isToken: true,
});
} else {
details.push({ label: "Token Out", value: outSymbol });
}
}
if (minOutput !== null && minOutput !== undefined) {
const minStr =
formatAmount(minOutput, outInfo.decimals) +
(outSymbol ? " " + outSymbol : "");
details.push({ label: "Min. received", value: minStr });
}
details.push({ label: "Steps", value: commandNames.join(" \u2192 ") });
const deadlineDate = new Date(Number(deadline) * 1000);
details.push({
label: "Deadline",
value: deadlineDate.toISOString().replace("T", " ").slice(0, 19),
});
return {
name,
description: "Swap via Uniswap Universal Router",
details,
};
} catch {
return null;
}
}
module.exports = { decode };

274
tests/uniswap.test.js Normal file
View File

@@ -0,0 +1,274 @@
const { AbiCoder, Interface, solidityPacked } = require("ethers");
const uniswap = require("../src/shared/uniswap");
const ROUTER_ADDR = "0x66a9893cc07d91d95644aedd05d03f95e1dba8af";
const USDT_ADDR = "0xdAC17F958D2ee523a2206206994597C13D831ec7";
const WETH_ADDR = "0xC02aaA39b223FE8D0A0e5C4F27eAD9083C756Cc2";
const USER_ADDR = "0x66133E8ea0f5D1d612D2502a968757D1048c214a";
// AutistMask's first-ever swap, 2026-02-27.
// Swapped USDT for ETH via Uniswap V4 Universal Router.
// https://etherscan.io/tx/0x6749f50c4e8f975b6d14780d5f539cf151d1594796ac49b7d6a5348ba0735e77
const FIRST_SWAP_CALLDATA =
"0x3593564c" +
"000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000a0" +
"0000000000000000000000000000000000000000000000000000000069a1550f00000000000000000000000000000000000000000000000000000000000000020a10000000000000000000000000000000000000000000000000000000000000" +
"0000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000001c0" +
"0000000000000000000000000000000000000000000000000000000000000160000000000000000000000000dac17f958d2ee523a2206206994597c13d831ec7000000000000000000000000ffffffffffffffffffffffffffffffffffffffff" +
"0000000000000000000000000000000000000000000000000000000069c8daf6000000000000000000000000000000000000000000000000000000000000000000000000000000000000000066a9893cc07d91d95644aedd05d03f95e1dba8af" +
"0000000000000000000000000000000000000000000000000000000069a154fe00000000000000000000000000000000000000000000000000000000000000e00000000000000000000000000000000000000000000000000000000000000041" +
"230249bb7133205db7b2389b587c723cc182302907b9545dc40c59c33ad1d53078a65732f4182fedbc0d9d85c51d580bdc93db3556fac38f18e140da47d0eb631c00000000000000000000000000000000000000000000000000000000000000" +
"00000000000000000000000000000000000000000000000000000000000003c0000000000000000000000000000000000000000000000000000000000000004000000000000000000000000000000000000000000000000000000000000000800000000000000000000000000000000000000000000000000000000000000003" +
"070b0e0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000300000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000220" +
"00000000000000000000000000000000000000000000000000000000000002a000000000000000000000000000000000000000000000000000000000000001a00000000000000000000000000000000000000000000000000000000000000020000000000000000000000000dac17f958d2ee523a2206206994597c13d831ec7" +
"0000000000000000000000000000000000000000000000000000000000000080000000000000000000000000000000000000000000000000000000000007a1200000000000000000000000000000000000000000000000000000dcb050d338e7" +
"0000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000002000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000064" +
"0000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000a0" +
"0000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000" +
"dac17f958d2ee523a2206206994597c13d831ec70000000000000000000000000000000000000000000000000000000000000000000000000000000000000001000000000000000000000000000000000000000000000000000000000000006000000000000000000000000000000000000000000000000000000000000000000000000000000000000000" +
"66133e8ea0f5d1d612d2502a968757d1048c214a0000000000000000000000000000000000000000000000000000000000000000756e6978000000000012";
const coder = AbiCoder.defaultAbiCoder();
const routerIface = new Interface([
"function execute(bytes commands, bytes[] inputs, uint256 deadline)",
]);
// Helper: build a minimal execute() calldata from commands + inputs
function buildExecute(commands, inputs, deadline) {
return routerIface.encodeFunctionData("execute", [
commands,
inputs,
deadline,
]);
}
// Helper: encode a PERMIT2_PERMIT input (command 0x0a)
function encodePermit2(token, amount, spender) {
return coder.encode(
[
"tuple(tuple(address,uint160,uint48,uint48),address,uint256)",
"bytes",
],
[[[token, amount, 0, 0], spender, 9999999999], "0x1234"],
);
}
// Helper: encode a BALANCE_CHECK_ERC20 input (command 0x0e)
function encodeBalanceCheck(owner, token, minBalance) {
return coder.encode(
["address", "address", "uint256"],
[owner, token, minBalance],
);
}
// Helper: encode a WRAP_ETH input (command 0x0b)
function encodeWrapEth(recipient, amount) {
return coder.encode(["address", "uint256"], [recipient, amount]);
}
// Helper: encode a V2_SWAP_EXACT_IN input (command 0x08)
function encodeV2SwapExactIn(recipient, amountIn, amountOutMin, pathAddrs) {
return coder.encode(
["address", "uint256", "uint256", "address[]", "bool"],
[recipient, amountIn, amountOutMin, pathAddrs, true],
);
}
// Helper: encode a V3_SWAP_EXACT_IN input (command 0x00)
function encodeV3SwapExactIn(recipient, amountIn, amountOutMin, pathTokens) {
// V3 path: token(20) + fee(3) + token(20) ...
let pathHex = pathTokens[0].slice(2).toLowerCase();
for (let i = 1; i < pathTokens.length; i++) {
pathHex += "000bb8"; // fee 3000 = 0x000bb8
pathHex += pathTokens[i].slice(2).toLowerCase();
}
return coder.encode(
["address", "uint256", "uint256", "bytes", "bool"],
[recipient, amountIn, amountOutMin, "0x" + pathHex, true],
);
}
// Helper: encode a V4_SWAP input (command 0x10) — just a passthrough blob
function encodeV4Swap(actions, params) {
return coder.encode(["bytes", "bytes[]"], [actions, params]);
}
describe("uniswap decoder", () => {
test("returns null for non-execute calldata", () => {
expect(uniswap.decode("0x", ROUTER_ADDR)).toBeNull();
expect(uniswap.decode("0xdeadbeef", ROUTER_ADDR)).toBeNull();
expect(uniswap.decode(null, ROUTER_ADDR)).toBeNull();
});
test("decodes first-ever AutistMask swap (PERMIT2_PERMIT + V4_SWAP)", () => {
const result = uniswap.decode(FIRST_SWAP_CALLDATA, ROUTER_ADDR);
expect(result).not.toBeNull();
expect(result.name).toBe("Swap USDT \u2192 ETH");
expect(result.description).toContain("Uniswap");
const labels = result.details.map((d) => d.label);
expect(labels).toContain("Protocol");
expect(labels).toContain("Token In");
expect(labels).toContain("Steps");
expect(labels).toContain("Deadline");
const tokenIn = result.details.find((d) => d.label === "Token In");
expect(tokenIn.value).toContain("USDT");
expect(tokenIn.address.toLowerCase()).toBe(USDT_ADDR.toLowerCase());
const steps = result.details.find((d) => d.label === "Steps");
expect(steps.value).toContain("Permit2 Permit");
expect(steps.value).toContain("V4 Swap");
});
test("decodes V2_SWAP_EXACT_IN with known tokens", () => {
const data = buildExecute(
"0x08", // V2_SWAP_EXACT_IN
[
encodeV2SwapExactIn(
USER_ADDR,
1000000n, // 1 USDT (6 decimals)
500000000000000n, // 0.0005 ETH
[USDT_ADDR, WETH_ADDR],
),
],
9999999999n,
);
const result = uniswap.decode(data, ROUTER_ADDR);
expect(result).not.toBeNull();
expect(result.name).toBe("Swap USDT \u2192 WETH");
const amount = result.details.find((d) => d.label === "Amount");
expect(amount.value).toBe("1.0000 USDT");
const minOut = result.details.find((d) => d.label === "Min. received");
expect(minOut.value).toContain("WETH");
});
test("decodes V3_SWAP_EXACT_IN with known tokens", () => {
const data = buildExecute(
"0x00", // V3_SWAP_EXACT_IN
[
encodeV3SwapExactIn(
USER_ADDR,
2000000n, // 2 USDT
1000000000000000n, // 0.001 ETH
[USDT_ADDR, WETH_ADDR],
),
],
9999999999n,
);
const result = uniswap.decode(data, ROUTER_ADDR);
expect(result).not.toBeNull();
expect(result.name).toBe("Swap USDT \u2192 WETH");
});
test("decodes WRAP_ETH as ETH input", () => {
const data = buildExecute(
"0x0b", // WRAP_ETH
[encodeWrapEth(ROUTER_ADDR, 1000000000000000000n)],
9999999999n,
);
const result = uniswap.decode(data, ROUTER_ADDR);
expect(result).not.toBeNull();
const tokenIn = result.details.find((d) => d.label === "Token In");
expect(tokenIn.value).toBe("ETH (native)");
const amount = result.details.find((d) => d.label === "Amount");
expect(amount.value).toContain("1.0000");
expect(amount.value).toContain("ETH");
});
test("decodes UNWRAP_WETH as ETH output", () => {
const data = buildExecute(
solidityPacked(["uint8", "uint8"], [0x08, 0x0c]),
[
encodeV2SwapExactIn(USER_ADDR, 1000000n, 500000000000000n, [
USDT_ADDR,
WETH_ADDR,
]),
encodeWrapEth(USER_ADDR, 0n), // UNWRAP_WETH same encoding
],
9999999999n,
);
const result = uniswap.decode(data, ROUTER_ADDR);
expect(result).not.toBeNull();
// UNWRAP_WETH means output is native ETH
expect(result.name).toBe("Swap USDT \u2192 ETH");
});
test("decodes BALANCE_CHECK_ERC20 for min output", () => {
const data = buildExecute(
solidityPacked(["uint8", "uint8"], [0x0b, 0x0e]),
[
encodeWrapEth(ROUTER_ADDR, 1000000000000000000n),
encodeBalanceCheck(USER_ADDR, USDT_ADDR, 2000000n),
],
9999999999n,
);
const result = uniswap.decode(data, ROUTER_ADDR);
expect(result).not.toBeNull();
const minOut = result.details.find((d) => d.label === "Min. received");
expect(minOut).toBeDefined();
expect(minOut.value).toContain("2.0000");
expect(minOut.value).toContain("USDT");
});
test("shows command names in steps", () => {
const data = buildExecute(
solidityPacked(["uint8", "uint8", "uint8"], [0x0a, 0x10, 0x0c]),
[
encodePermit2(USDT_ADDR, 1000000n, ROUTER_ADDR),
encodeV4Swap("0x07", ["0x"]),
encodeWrapEth(USER_ADDR, 0n), // reusing for UNWRAP_WETH
],
9999999999n,
);
const result = uniswap.decode(data, ROUTER_ADDR);
expect(result).not.toBeNull();
const steps = result.details.find((d) => d.label === "Steps");
expect(steps.value).toBe(
"Permit2 Permit \u2192 V4 Swap \u2192 Unwrap WETH",
);
});
test("formats permit amount when not unlimited", () => {
const data = buildExecute(
"0x0a",
[encodePermit2(USDT_ADDR, 5000000n, ROUTER_ADDR)],
9999999999n,
);
const result = uniswap.decode(data, ROUTER_ADDR);
expect(result).not.toBeNull();
const amount = result.details.find((d) => d.label === "Amount");
expect(amount.value).toBe("5.0000 USDT");
});
test("handles unknown tokens gracefully", () => {
const fakeToken = "0x1111111111111111111111111111111111111111";
const data = buildExecute(
"0x0a",
[encodePermit2(fakeToken, 1000000000000000000n, ROUTER_ADDR)],
9999999999n,
);
const result = uniswap.decode(data, ROUTER_ADDR);
expect(result).not.toBeNull();
expect(result.name).toBe("Uniswap Swap");
const tokenIn = result.details.find((d) => d.label === "Token In");
expect(tokenIn.value).toContain(fakeToken);
});
});