clawbot
e53420f2e2
All checks were successful
check / check (push) Successful in 9s
## Summary Adds Sepolia testnet support to AutistMask. ### Changes - **New `src/shared/networks.js`** — centralized network definitions (mainnet + Sepolia) with chain IDs, default RPC/Blockscout endpoints, and block explorer URLs - **State management** — `networkId` added to persisted state; defaults to mainnet for backward compatibility - **Settings UI** — network selector dropdown lets users switch between Ethereum Mainnet and Sepolia Testnet - **Dynamic explorer links** — all hardcoded `etherscan.io` URLs replaced with dynamic links from the current network config (`sepolia.etherscan.io` for Sepolia) - **Background service** — `wallet_switchEthereumChain` now accepts both mainnet (0x1) and Sepolia (0xaa36a7); broadcasts `chainChanged` to connected dApps - **Inpage provider** — fetches chain ID on init and updates dynamically via `chainChanged` events (no more hardcoded `0x1`) - **Blockscout API** — uses `eth-sepolia.blockscout.com/api/v2` for Sepolia - **Etherscan labels** — phishing/scam checks use the correct explorer per network - **Price fetching** — skipped on testnets (testnet tokens have no real market value) - **RPC validation** — checks against the selected network's chain ID, not hardcoded mainnet - **ethers provider** — `getProvider()` uses the correct ethers `Network` for Sepolia ### API Endpoints Verified | Service | Mainnet | Sepolia | |---------|---------|--------| | Etherscan | etherscan.io | sepolia.etherscan.io | | Blockscout | eth.blockscout.com/api/v2 | eth-sepolia.blockscout.com/api/v2 | | RPC | ethereum-rpc.publicnode.com | ethereum-sepolia-rpc.publicnode.com | | CoinDesk (prices) | ✅ | N/A (skipped on testnet) | closes #110 Reviewed-on: #137 THIS WAS ONESHOTTED USING OPUS 4. WTAF Co-authored-by: clawbot <clawbot@noreply.example.org> Co-committed-by: clawbot <clawbot@noreply.example.org>
1457 lines
62 KiB
HTML
1457 lines
62 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
<title>AutistMask</title>
|
|
<link rel="stylesheet" href="styles.css" />
|
|
</head>
|
|
<body class="bg-bg text-fg font-mono text-sm">
|
|
<div id="app" class="p-2 pr-5 overflow-x-hidden">
|
|
<!-- ============ GLOBAL TITLE BAR ============ -->
|
|
<div
|
|
class="flex justify-between items-center border-b border-border pb-1 mb-2"
|
|
>
|
|
<h1>
|
|
<span class="font-bold">AutistMask</span> by
|
|
<a
|
|
href="https://sneak.berlin"
|
|
target="_blank"
|
|
class="underline decoration-dashed"
|
|
>@sneak</a
|
|
>
|
|
</h1>
|
|
<button
|
|
id="btn-settings"
|
|
class="border border-border text-fg cursor-pointer text-xl px-1 leading-none hover:bg-fg hover:text-bg"
|
|
title="Settings"
|
|
>
|
|
⚙
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ============ FLASH MESSAGE AREA ============ -->
|
|
<div
|
|
id="flash-msg"
|
|
class="text-xs text-muted min-h-[1.25rem] mb-1"
|
|
></div>
|
|
|
|
<!-- ============ WELCOME / FIRST USE ============ -->
|
|
<div id="view-welcome" class="view hidden">
|
|
<p class="mb-3">Welcome! To get started, add a wallet.</p>
|
|
<button
|
|
id="btn-welcome-add"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Add wallet
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ============ ADD WALLET (unified create/import) ============ -->
|
|
<div id="view-add-wallet" class="view hidden">
|
|
<button
|
|
id="btn-add-wallet-back"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
|
>
|
|
< Back
|
|
</button>
|
|
<h2 class="font-bold mb-2">Add Wallet</h2>
|
|
|
|
<!-- Mode selector tabs -->
|
|
<div
|
|
class="flex border-b border-border mb-3"
|
|
id="add-wallet-tabs"
|
|
>
|
|
<button
|
|
id="tab-mnemonic"
|
|
class="px-3 py-1.5 cursor-pointer text-xs font-bold border border-border border-b-bg bg-bg -mb-px"
|
|
>
|
|
From Phrase
|
|
</button>
|
|
<button
|
|
id="tab-privkey"
|
|
class="px-3 py-1.5 cursor-pointer text-xs text-muted border border-dashed border-border-light border-b-transparent -mb-px hover:bg-fg hover:text-bg"
|
|
>
|
|
From Key
|
|
</button>
|
|
<button
|
|
id="tab-xprv"
|
|
class="px-3 py-1.5 cursor-pointer text-xs text-muted border border-dashed border-border-light border-b-transparent -mb-px hover:bg-fg hover:text-bg"
|
|
>
|
|
From xprv
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Mnemonic form section -->
|
|
<div id="add-wallet-section-mnemonic">
|
|
<p class="mb-2">
|
|
Enter your 12 or 24 word recovery phrase below, or click
|
|
the button to roll the die for a new one.
|
|
</p>
|
|
<div class="mb-1 flex justify-end">
|
|
<button
|
|
id="btn-generate-phrase"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer text-xs"
|
|
title="Generate a random recovery phrase"
|
|
>
|
|
[⚀]
|
|
</button>
|
|
</div>
|
|
<div class="mb-2">
|
|
<textarea
|
|
id="wallet-mnemonic"
|
|
rows="3"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg resize-y"
|
|
placeholder="word word word ..."
|
|
></textarea>
|
|
</div>
|
|
<div
|
|
id="add-wallet-phrase-warning"
|
|
class="text-xs mb-2 border border-border border-dashed p-2"
|
|
style="visibility: hidden"
|
|
>
|
|
Write these words down and keep them safe. Anyone with
|
|
them can take your funds; if you lose them, your wallet
|
|
is gone.
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Private key form section -->
|
|
<div id="add-wallet-section-privkey" class="hidden">
|
|
<p class="mb-2">
|
|
Paste your private key below. This wallet will have a
|
|
single address.
|
|
</p>
|
|
<div class="mb-2">
|
|
<input
|
|
type="password"
|
|
id="import-private-key"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
placeholder="0x..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Extended key (xprv) form section -->
|
|
<div id="add-wallet-section-xprv" class="hidden">
|
|
<p class="mb-2">
|
|
Paste your extended private key (xprv) below. This will
|
|
import the HD wallet and scan for used addresses.
|
|
</p>
|
|
<div class="mb-2">
|
|
<input
|
|
type="password"
|
|
id="import-xprv-key"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
placeholder="xprv..."
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Shared password fields -->
|
|
<div class="mb-2" id="add-wallet-password-section">
|
|
<label class="block mb-1">Choose a password</label>
|
|
<p
|
|
class="text-xs text-muted mb-1"
|
|
id="add-wallet-password-hint"
|
|
>
|
|
This password encrypts your recovery phrase on this
|
|
device. You will need it to send funds.
|
|
</p>
|
|
<input
|
|
type="password"
|
|
id="add-wallet-password"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
/>
|
|
</div>
|
|
<div class="mb-2" id="add-wallet-password-confirm-section">
|
|
<label class="block mb-1">Confirm password</label>
|
|
<input
|
|
type="password"
|
|
id="add-wallet-password-confirm"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
/>
|
|
</div>
|
|
<button
|
|
id="btn-add-wallet-confirm"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Import
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ============ MAIN VIEW: ALL WALLETS & ADDRESSES ============ -->
|
|
<div id="view-main" class="view hidden">
|
|
<!-- active address headline -->
|
|
<div
|
|
id="total-value"
|
|
class="text-2xl font-bold min-h-[2rem] text-fg"
|
|
></div>
|
|
<div
|
|
id="total-value-sub"
|
|
class="text-xs text-muted mb-2 min-h-[1rem]"
|
|
>
|
|
|
|
</div>
|
|
|
|
<!-- active address display -->
|
|
<div
|
|
id="active-address-display"
|
|
class="text-xs break-all mb-3"
|
|
></div>
|
|
|
|
<!-- quick actions for active address -->
|
|
<div class="flex gap-2 mb-2">
|
|
<button
|
|
id="btn-main-send"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
|
|
>
|
|
Send
|
|
</button>
|
|
<button
|
|
id="btn-main-receive"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
|
|
>
|
|
Receive
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ETH price -->
|
|
<div
|
|
id="eth-price-display"
|
|
class="bg-well text-center font-bold text-xs p-1 mx-1 mb-3 min-h-[1.5rem]"
|
|
>
|
|
|
|
</div>
|
|
|
|
<!-- wallet list -->
|
|
<div id="wallet-list"></div>
|
|
|
|
<!-- recent transactions across all addresses -->
|
|
<div>
|
|
<div
|
|
class="font-bold bg-section py-1 px-2"
|
|
style="margin-left: -0.5rem; margin-right: -0.5rem"
|
|
>
|
|
Recent Transactions
|
|
</div>
|
|
<div id="home-tx-list">
|
|
<div class="text-muted text-xs py-1">Loading...</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="py-1" style="margin: 0 -0.5rem"> </div>
|
|
|
|
<div class="text-xs text-muted">
|
|
<span
|
|
id="btn-add-wallet-bottom"
|
|
class="underline decoration-dashed cursor-pointer"
|
|
>Add additional wallet...</span
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ ADDRESS DETAIL VIEW ============ -->
|
|
<div id="view-address" class="view hidden">
|
|
<button
|
|
id="btn-address-back"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
|
>
|
|
< Back
|
|
</button>
|
|
<div
|
|
id="address-jazzicon"
|
|
class="flex justify-center mt-1 mb-3"
|
|
></div>
|
|
<div
|
|
class="flex justify-between items-center border-b border-border pb-1 mb-2"
|
|
>
|
|
<h2 class="font-bold" id="address-title">Address</h2>
|
|
</div>
|
|
|
|
<div
|
|
id="address-ens"
|
|
class="font-bold mb-1 hidden flex items-center"
|
|
></div>
|
|
<div
|
|
class="text-xs mb-1 cursor-pointer break-all"
|
|
title="Click to copy"
|
|
id="address-line"
|
|
>
|
|
<span id="address-dot"></span>
|
|
<span id="address-full"></span>
|
|
<span id="address-etherscan-link"></span>
|
|
</div>
|
|
<div
|
|
id="address-usd-total"
|
|
class="text-xs text-muted mb-3 text-right min-h-[1rem]"
|
|
>
|
|
|
|
</div>
|
|
<!-- balances -->
|
|
<div class="border-b border-border-light pb-2 mb-2">
|
|
<div id="address-balances" class="min-h-[1.25rem]">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- actions -->
|
|
<div class="flex gap-2 mb-3">
|
|
<button
|
|
id="btn-send"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
|
|
>
|
|
Send
|
|
</button>
|
|
<button
|
|
id="btn-receive"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
|
|
>
|
|
Receive
|
|
</button>
|
|
<button
|
|
id="btn-add-token"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
|
|
>
|
|
+ Token
|
|
</button>
|
|
<div class="relative">
|
|
<button
|
|
id="btn-more-menu"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
aria-label="More actions"
|
|
>
|
|
···
|
|
</button>
|
|
<div
|
|
id="more-menu-dropdown"
|
|
class="hidden absolute right-0 top-full mt-1 border border-border bg-bg z-50 whitespace-nowrap py-1"
|
|
>
|
|
<button
|
|
id="btn-export-privkey"
|
|
class="block w-full text-left px-4 py-1.5 text-xs font-light text-muted hover:bg-hover hover:text-fg cursor-pointer"
|
|
>
|
|
Export Private Key
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- transactions -->
|
|
<div class="mt-3">
|
|
<div class="border-b border-border pb-1 mb-1">
|
|
<h2 class="font-bold">Transactions</h2>
|
|
</div>
|
|
<div id="tx-list" class="overflow-hidden">
|
|
<div class="text-muted text-xs py-1">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ EXPORT PRIVATE KEY VIEW ============ -->
|
|
<div id="view-export-privkey" class="view hidden">
|
|
<button
|
|
id="btn-export-privkey-back"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
|
>
|
|
< Back
|
|
</button>
|
|
<div
|
|
id="export-privkey-jazzicon"
|
|
class="flex justify-center mt-1 mb-3"
|
|
></div>
|
|
<h2 class="font-bold mb-1">Export Private Key</h2>
|
|
<p class="text-xs mb-1" id="export-privkey-title"></p>
|
|
<p class="text-xs mb-3">
|
|
<span id="export-privkey-dot"></span>
|
|
<span
|
|
id="export-privkey-address"
|
|
class="cursor-pointer"
|
|
title="Click to copy"
|
|
></span>
|
|
</p>
|
|
<p class="text-xs mb-3 text-muted">
|
|
Warning: anyone with this private key can access and
|
|
transfer all funds from this address. Never share it.
|
|
</p>
|
|
<div
|
|
id="export-privkey-flash"
|
|
class="text-xs mb-2 min-h-[1.25rem]"
|
|
style="visibility: hidden"
|
|
></div>
|
|
<div id="export-privkey-password-section" class="mb-2">
|
|
<label class="block mb-1">Password</label>
|
|
<input
|
|
type="password"
|
|
id="export-privkey-password"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
placeholder="Enter your password to continue"
|
|
/>
|
|
<button
|
|
id="btn-export-privkey-confirm"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mt-2"
|
|
>
|
|
Reveal
|
|
</button>
|
|
</div>
|
|
<div id="export-privkey-result" class="hidden">
|
|
<div
|
|
id="export-privkey-value"
|
|
class="bg-danger-well rounded p-2 font-mono text-xs break-all cursor-pointer mb-1"
|
|
title="Click to copy"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ ADDRESS-TOKEN DETAIL VIEW ============ -->
|
|
<div id="view-address-token" class="view hidden">
|
|
<button
|
|
id="btn-address-token-back"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
|
>
|
|
< Back
|
|
</button>
|
|
<div
|
|
id="address-token-jazzicon"
|
|
class="flex justify-center mt-1 mb-3"
|
|
></div>
|
|
<div
|
|
class="flex justify-between items-center border-b border-border pb-1 mb-2"
|
|
>
|
|
<h2 class="font-bold" id="address-token-title">Token</h2>
|
|
</div>
|
|
|
|
<div
|
|
class="text-xs mb-1 cursor-pointer break-all"
|
|
title="Click to copy"
|
|
id="address-token-line"
|
|
>
|
|
<span id="address-token-dot"></span>
|
|
<span id="address-token-full"></span>
|
|
<span id="address-token-etherscan-link"></span>
|
|
</div>
|
|
<div
|
|
id="address-token-usd-total"
|
|
class="text-xs text-muted mb-3 text-right min-h-[1rem]"
|
|
>
|
|
|
|
</div>
|
|
<!-- single token balance -->
|
|
<div class="border-b border-border-light pb-2 mb-2">
|
|
<div id="address-token-balance" class="min-h-[1.25rem]">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- actions -->
|
|
<div class="flex gap-2 mb-3">
|
|
<button
|
|
id="btn-address-token-send"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
|
|
>
|
|
Send
|
|
</button>
|
|
<button
|
|
id="btn-address-token-receive"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer flex-1"
|
|
>
|
|
Receive
|
|
</button>
|
|
</div>
|
|
|
|
<!-- token contract details (ERC-20 only) -->
|
|
<div
|
|
id="address-token-contract-info"
|
|
class="bg-hover rounded-md mx-1 p-3 mb-3 text-xs hidden"
|
|
></div>
|
|
|
|
<!-- token-filtered transactions -->
|
|
<div class="mt-3">
|
|
<div class="border-b border-border pb-1 mb-1">
|
|
<h2 class="font-bold">Transactions</h2>
|
|
</div>
|
|
<div id="address-token-tx-list" class="overflow-hidden">
|
|
<div class="text-muted text-xs py-1">Loading...</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ SEND ============ -->
|
|
<div id="view-send" class="view hidden">
|
|
<button
|
|
id="btn-send-back"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
|
>
|
|
< Back
|
|
</button>
|
|
<h2 class="font-bold mb-2">Send</h2>
|
|
<div class="mb-2">
|
|
<label class="block mb-1 text-xs text-muted">From</label>
|
|
<div id="send-from" class="text-xs mb-1"></div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="block mb-1">What to send</label>
|
|
<select
|
|
id="send-token"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
>
|
|
<option value="ETH">ETH</option>
|
|
</select>
|
|
<div id="send-token-static" class="text-sm hidden"></div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="block mb-1">To</label>
|
|
<input
|
|
type="text"
|
|
id="send-to"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
placeholder="Address (0x...) or ENS name"
|
|
/>
|
|
<div
|
|
id="send-to-error"
|
|
class="text-xs"
|
|
style="min-height: 1.25rem; color: #cc0000"
|
|
></div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="flex justify-between mb-1">
|
|
<label>Amount</label>
|
|
<span
|
|
id="send-balance"
|
|
class="text-xs text-muted"
|
|
></span>
|
|
</div>
|
|
<input
|
|
type="text"
|
|
id="send-amount"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
placeholder="0.0"
|
|
/>
|
|
</div>
|
|
<button
|
|
id="btn-send-review"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Review
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ============ CONFIRM TRANSACTION ============ -->
|
|
<div id="view-confirm-tx" class="view hidden">
|
|
<button
|
|
id="btn-confirm-back"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
|
>
|
|
< Back
|
|
</button>
|
|
<h2 class="font-bold mb-2">Confirm Transaction</h2>
|
|
|
|
<!-- transaction type -->
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Type</div>
|
|
<div id="confirm-type" class="text-xs font-bold"></div>
|
|
</div>
|
|
|
|
<!-- ERC-20 token contract (hidden for ETH) -->
|
|
<div id="confirm-token-section" class="mb-3 hidden">
|
|
<div class="text-xs text-muted mb-1">Token contract</div>
|
|
<div
|
|
id="confirm-token-contract"
|
|
class="text-xs break-all"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">From</div>
|
|
<div id="confirm-from" class="text-xs break-all"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">To</div>
|
|
<div id="confirm-to" class="text-xs break-all"></div>
|
|
<div
|
|
id="confirm-to-ens"
|
|
class="text-xs text-muted hidden"
|
|
></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Amount</div>
|
|
<div id="confirm-amount" class="font-bold"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Your balance</div>
|
|
<div id="confirm-balance" class="text-xs"></div>
|
|
</div>
|
|
<div id="confirm-fee" class="mb-3" style="visibility: hidden">
|
|
<div class="text-xs text-muted mb-1">
|
|
Estimated network fee
|
|
</div>
|
|
<div id="confirm-fee-amount" class="text-xs"></div>
|
|
</div>
|
|
<div
|
|
id="confirm-warnings"
|
|
class="mb-2"
|
|
style="visibility: hidden"
|
|
></div>
|
|
<div
|
|
id="confirm-recipient-warning"
|
|
class="mb-2"
|
|
style="visibility: hidden"
|
|
>
|
|
<div
|
|
class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
|
|
>
|
|
WARNING: The recipient address has ZERO transaction
|
|
history. This may indicate a fresh or unused address.
|
|
Double-check the address before sending.
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="confirm-contract-warning"
|
|
class="mb-2"
|
|
style="visibility: hidden"
|
|
>
|
|
<div
|
|
class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
|
|
>
|
|
WARNING: The recipient is a smart contract. Sending ETH
|
|
or tokens directly to a contract may result in permanent
|
|
loss of funds.
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="confirm-burn-warning"
|
|
class="mb-2"
|
|
style="visibility: hidden"
|
|
>
|
|
<div
|
|
class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
|
|
>
|
|
WARNING: This is a known null/burn address. Funds sent
|
|
here are permanently destroyed and cannot be recovered.
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="confirm-etherscan-warning"
|
|
class="mb-2"
|
|
style="visibility: hidden"
|
|
>
|
|
<div
|
|
class="border border-red-500 border-dashed p-2 text-xs font-bold text-red-500"
|
|
>
|
|
WARNING: Etherscan has flagged this address as
|
|
phishing/scam. Do not send funds to this address.
|
|
</div>
|
|
</div>
|
|
<div
|
|
id="confirm-errors"
|
|
class="mb-2 border border-border border-dashed p-2"
|
|
style="visibility: hidden; min-height: 1.25rem"
|
|
></div>
|
|
<div class="mb-2">
|
|
<label class="block mb-1 text-xs">Password</label>
|
|
<input
|
|
type="password"
|
|
id="confirm-tx-password"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
/>
|
|
</div>
|
|
<div
|
|
id="confirm-tx-password-error"
|
|
class="text-xs mb-2 min-h-[1.25rem]"
|
|
style="visibility: hidden"
|
|
></div>
|
|
<button
|
|
id="btn-confirm-send"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Sign & Send
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ============ WAIT FOR TX CONFIRMATION ============ -->
|
|
<div id="view-wait-tx" class="view hidden">
|
|
<h2 class="font-bold mb-2">Transaction Broadcast</h2>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Amount</div>
|
|
<div id="wait-tx-summary" class="font-bold"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">To</div>
|
|
<div id="wait-tx-to" class="text-xs break-all"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Transaction hash</div>
|
|
<div id="wait-tx-hash" class="text-xs break-all"></div>
|
|
</div>
|
|
<div id="wait-tx-status" class="text-xs text-muted"></div>
|
|
</div>
|
|
|
|
<!-- ============ TX SUCCESS ============ -->
|
|
<div id="view-success-tx" class="view hidden">
|
|
<h2 class="font-bold mb-2">Transaction Confirmed</h2>
|
|
<div id="success-tx-decoded" class="mb-3 hidden text-xs"></div>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Amount</div>
|
|
<div id="success-tx-summary" class="font-bold"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">To</div>
|
|
<div id="success-tx-to" class="text-xs break-all"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Block</div>
|
|
<div id="success-tx-block" class="text-xs"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Transaction hash</div>
|
|
<div id="success-tx-hash" class="text-xs break-all"></div>
|
|
</div>
|
|
<button
|
|
id="btn-success-tx-done"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Done
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ============ TX ERROR ============ -->
|
|
<div id="view-error-tx" class="view hidden">
|
|
<h2 class="font-bold mb-2">Transaction Failed</h2>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Amount</div>
|
|
<div id="error-tx-summary" class="font-bold"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">To</div>
|
|
<div id="error-tx-to" class="text-xs break-all"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div
|
|
id="error-tx-message"
|
|
class="text-xs border border-border border-dashed p-2"
|
|
></div>
|
|
</div>
|
|
<div id="error-tx-hash-section" class="mb-3 hidden">
|
|
<div class="text-xs text-muted mb-1">Transaction hash</div>
|
|
<div id="error-tx-hash" class="text-xs break-all"></div>
|
|
</div>
|
|
<button
|
|
id="btn-error-tx-done"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Done
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ============ RECEIVE ============ -->
|
|
<div id="view-receive" class="view hidden">
|
|
<button
|
|
id="btn-receive-back"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
|
>
|
|
< Back
|
|
</button>
|
|
<h2 class="font-bold mb-2">Receive</h2>
|
|
<p class="mb-2">
|
|
Share this address with the sender. Make sure you only use
|
|
this address to receive Ethereum tokens.
|
|
</p>
|
|
<div class="flex justify-center mb-3">
|
|
<canvas id="receive-qr"></canvas>
|
|
</div>
|
|
<div
|
|
class="border border-border p-2 break-all mb-3 text-xs cursor-pointer"
|
|
>
|
|
<span id="receive-address-block" class="select-all"></span>
|
|
<span id="receive-etherscan-link"></span>
|
|
</div>
|
|
<button
|
|
id="btn-receive-copy"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Copy address
|
|
</button>
|
|
<div
|
|
id="receive-erc20-warning"
|
|
class="text-xs border border-border border-dashed p-2 mt-3"
|
|
style="visibility: hidden"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- ============ ADD TOKEN ============ -->
|
|
<div id="view-add-token" class="view hidden">
|
|
<button
|
|
id="btn-add-token-back"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
|
>
|
|
< Back
|
|
</button>
|
|
<h2 class="font-bold mb-2">Add Token</h2>
|
|
<p class="mb-2">
|
|
Enter the contract address of the token you want to track.
|
|
You can find this on the token's page on Etherscan.
|
|
</p>
|
|
<div class="mb-2">
|
|
<label class="block mb-1">Contract address</label>
|
|
<input
|
|
type="text"
|
|
id="add-token-address"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
placeholder="0x..."
|
|
/>
|
|
</div>
|
|
<div
|
|
id="add-token-info"
|
|
class="text-xs text-muted mb-2 min-h-[1.25rem]"
|
|
style="visibility: hidden"
|
|
></div>
|
|
<div class="mb-2">
|
|
<label class="block mb-1 text-xs text-muted"
|
|
>Or pick a common token:</label
|
|
>
|
|
<div
|
|
id="common-token-list"
|
|
class="flex flex-wrap gap-1"
|
|
></div>
|
|
</div>
|
|
<button
|
|
id="btn-add-token-confirm"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Add
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ============ SETTINGS ============ -->
|
|
<div id="view-settings" class="view hidden">
|
|
<button
|
|
id="btn-settings-back"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
|
>
|
|
< Back
|
|
</button>
|
|
<h2 class="font-bold mb-3">Settings</h2>
|
|
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<h3 class="font-bold mb-1">Wallets</h3>
|
|
<div id="settings-wallet-list" class="mb-2"></div>
|
|
<button
|
|
id="btn-main-add-wallet"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
+ Add wallet
|
|
</button>
|
|
</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">
|
|
<h3 class="font-bold mb-1">Display</h3>
|
|
<label
|
|
class="text-xs flex items-center gap-1 cursor-pointer mb-2"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
id="settings-show-zero-balances"
|
|
/>
|
|
Show tracked tokens with zero balance
|
|
</label>
|
|
<div class="text-xs flex items-center gap-1">
|
|
<label for="settings-theme">Theme:</label>
|
|
<select
|
|
id="settings-theme"
|
|
class="border border-border p-1 bg-bg text-fg text-xs cursor-pointer"
|
|
>
|
|
<option value="system">System</option>
|
|
<option value="light">Light</option>
|
|
<option value="dark">Dark</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<h3 class="font-bold mb-1">Network</h3>
|
|
<p class="text-xs text-muted mb-1">
|
|
Select the Ethereum network. Switching networks will
|
|
update the RPC and Blockscout endpoints to their
|
|
defaults.
|
|
</p>
|
|
<div class="text-xs flex items-center gap-1">
|
|
<select
|
|
id="settings-network"
|
|
class="border border-border p-1 bg-bg text-fg text-xs cursor-pointer"
|
|
>
|
|
<option value="mainnet">Ethereum Mainnet</option>
|
|
<option value="sepolia">Sepolia Testnet</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<h3 class="font-bold mb-1">Ethereum RPC</h3>
|
|
<p class="text-xs text-muted mb-1">
|
|
The server used to talk to the Ethereum network. Change
|
|
this if you run your own node or prefer a different
|
|
provider.
|
|
</p>
|
|
<input
|
|
type="text"
|
|
id="settings-rpc"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
/>
|
|
<button
|
|
id="btn-save-rpc"
|
|
class="border border-border px-2 py-1 mt-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<h3 class="font-bold mb-1">Blockscout API</h3>
|
|
<p class="text-xs text-muted mb-1">
|
|
Used to fetch token balances and transaction history.
|
|
Change this if you run your own Blockscout instance.
|
|
</p>
|
|
<input
|
|
type="text"
|
|
id="settings-blockscout"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
/>
|
|
<button
|
|
id="btn-save-blockscout"
|
|
class="border border-border px-2 py-1 mt-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Save
|
|
</button>
|
|
</div>
|
|
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<h3 class="font-bold mb-1">Token Spam Protection</h3>
|
|
<p class="text-xs text-muted mb-2">
|
|
Scammers deploy fake token contracts that emit spoofed
|
|
Transfer events to plant look-alike addresses in your
|
|
transaction history. These filters hide fraudulent
|
|
transfers and prevent interaction with suspicious
|
|
tokens.
|
|
</p>
|
|
<label
|
|
class="text-xs flex items-center gap-1 cursor-pointer mb-2"
|
|
>
|
|
<input type="checkbox" id="settings-hide-low-holders" />
|
|
Hide tokens with fewer than 1,000 holders
|
|
</label>
|
|
<label
|
|
class="text-xs flex items-center gap-1 cursor-pointer mb-2"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
id="settings-hide-fraud-contracts"
|
|
/>
|
|
Hide transactions from detected fraud contracts
|
|
</label>
|
|
<label
|
|
class="text-xs flex items-center gap-1 cursor-pointer mb-1"
|
|
>
|
|
<input type="checkbox" id="settings-hide-dust" />
|
|
Hide dust transactions below
|
|
</label>
|
|
<div class="flex items-center gap-1">
|
|
<input
|
|
type="text"
|
|
inputmode="numeric"
|
|
id="settings-dust-threshold"
|
|
class="border border-border p-1 text-xs bg-bg text-fg"
|
|
style="width: 10ch"
|
|
/>
|
|
<span class="text-xs text-muted">gwei</span>
|
|
</div>
|
|
<label
|
|
class="text-xs flex items-center gap-1 cursor-pointer mb-1"
|
|
>
|
|
<input type="checkbox" id="settings-utc-timestamps" />
|
|
UTC Timestamps
|
|
</label>
|
|
</div>
|
|
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<h3 class="font-bold mb-1">Allowed Sites</h3>
|
|
<p class="text-xs text-muted mb-2">
|
|
Sites that can connect to your wallet without asking.
|
|
</p>
|
|
<div id="settings-allowed-sites"></div>
|
|
</div>
|
|
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<h3 class="font-bold mb-1">Denied Sites</h3>
|
|
<p class="text-xs text-muted mb-2">
|
|
Sites that are blocked from connecting to your wallet.
|
|
</p>
|
|
<div id="settings-denied-sites"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ DELETE WALLET CONFIRM ============ -->
|
|
<div id="view-delete-wallet-confirm" class="view hidden">
|
|
<button
|
|
id="btn-delete-wallet-back"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
|
>
|
|
< Back
|
|
</button>
|
|
<h2 class="font-bold mb-3">Delete Wallet</h2>
|
|
<p class="text-xs mb-3">
|
|
Deleting
|
|
<strong id="delete-wallet-name"></strong> is permanent. Any
|
|
funds will be unrecoverable without your recovery phrase.
|
|
</p>
|
|
<div
|
|
id="delete-wallet-flash"
|
|
class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
|
|
style="visibility: hidden"
|
|
></div>
|
|
<div class="mb-2">
|
|
<label class="block mb-1">Password</label>
|
|
<input
|
|
type="password"
|
|
id="delete-wallet-password"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
placeholder="Enter your password to confirm"
|
|
/>
|
|
</div>
|
|
<button
|
|
id="btn-delete-wallet-confirm"
|
|
class="border border-border text-red-500 px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Confirm Delete
|
|
</button>
|
|
</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"
|
|
>
|
|
< 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 min-h-[1.25rem]"
|
|
style="visibility: 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 ============ -->
|
|
<div id="view-transaction" class="view hidden">
|
|
<button
|
|
id="btn-tx-back"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mb-2"
|
|
>
|
|
< Back
|
|
</button>
|
|
<h2 id="tx-detail-heading" class="font-bold mb-2">
|
|
Transaction
|
|
</h2>
|
|
|
|
<!-- ── Identity ── -->
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<div class="mb-2">
|
|
<div class="text-xs text-muted mb-1">
|
|
Transaction hash
|
|
</div>
|
|
<div
|
|
id="tx-detail-hash"
|
|
class="text-xs break-all"
|
|
></div>
|
|
</div>
|
|
<div id="tx-detail-type-section" class="mb-2 hidden">
|
|
<div class="text-xs text-muted mb-1">Type</div>
|
|
<div
|
|
id="tx-detail-type"
|
|
class="text-xs font-bold"
|
|
></div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="text-xs text-muted mb-1">Status</div>
|
|
<div id="tx-detail-status" class="text-xs"></div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="text-xs text-muted mb-1">From</div>
|
|
<div
|
|
id="tx-detail-from"
|
|
class="text-xs break-all"
|
|
></div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<div class="text-xs text-muted mb-1">To</div>
|
|
<div id="tx-detail-to" class="text-xs break-all"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Timing ── -->
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<div class="mb-2">
|
|
<div class="text-xs text-muted mb-1">Time</div>
|
|
<div id="tx-detail-time" class="text-xs"></div>
|
|
</div>
|
|
<div id="tx-detail-block-section" class="mb-2 hidden">
|
|
<div class="text-xs text-muted mb-1">Block</div>
|
|
<div id="tx-detail-block" class="text-xs"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Value ── -->
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<div class="mb-2">
|
|
<div class="text-xs text-muted mb-1">Amount</div>
|
|
<div id="tx-detail-value" class="text-xs"></div>
|
|
</div>
|
|
<div class="mb-2 hidden">
|
|
<div class="text-xs text-muted mb-1">
|
|
Native quantity
|
|
</div>
|
|
<div id="tx-detail-native" class="text-xs"></div>
|
|
</div>
|
|
<div
|
|
id="tx-detail-token-contract-section"
|
|
class="mb-2 hidden"
|
|
>
|
|
<div class="text-xs text-muted mb-1">
|
|
Token contract
|
|
</div>
|
|
<div
|
|
id="tx-detail-token-contract"
|
|
class="text-xs break-all"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Decoded details ── -->
|
|
<div id="tx-detail-calldata-section" class="hidden">
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<div id="tx-detail-calldata-well" class="mb-2">
|
|
<div class="text-xs text-muted mb-1">Action</div>
|
|
<div
|
|
id="tx-detail-calldata-action"
|
|
class="text-xs font-bold mb-2"
|
|
></div>
|
|
<div
|
|
id="tx-detail-calldata-details"
|
|
class="text-xs"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Network details ── -->
|
|
<div id="tx-detail-network-section" class="hidden">
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<div id="tx-detail-nonce-section" class="mb-2 hidden">
|
|
<div class="text-xs text-muted mb-1">Nonce</div>
|
|
<div id="tx-detail-nonce" class="text-xs"></div>
|
|
</div>
|
|
<div
|
|
id="tx-detail-gasprice-section"
|
|
class="mb-2 hidden"
|
|
>
|
|
<div class="text-xs text-muted mb-1">Gas price</div>
|
|
<div id="tx-detail-gasprice" class="text-xs"></div>
|
|
</div>
|
|
<div id="tx-detail-gasused-section" class="mb-2 hidden">
|
|
<div class="text-xs text-muted mb-1">Gas used</div>
|
|
<div id="tx-detail-gasused" class="text-xs"></div>
|
|
</div>
|
|
<div id="tx-detail-fee-section" class="mb-2 hidden">
|
|
<div class="text-xs text-muted mb-1">
|
|
Transaction fee
|
|
</div>
|
|
<div id="tx-detail-fee" class="text-xs"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ── Raw data ── -->
|
|
<div id="tx-detail-rawdata-section" class="hidden">
|
|
<div class="bg-well p-3 mx-1 mb-3">
|
|
<div class="mb-2">
|
|
<div class="text-xs text-muted mb-1">Raw data</div>
|
|
<div
|
|
id="tx-detail-rawdata"
|
|
class="text-xs break-all font-mono border border-border border-dashed p-2"
|
|
></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ TRANSACTION APPROVAL ============ -->
|
|
<div id="view-approve-tx" class="view hidden">
|
|
<h2 class="font-bold mb-2">Transaction Request</h2>
|
|
<div
|
|
id="approve-tx-phishing-warning"
|
|
class="mb-3 p-2 text-xs font-bold hidden bg-red-100 text-red-800 border-2 border-red-600 rounded-md"
|
|
>
|
|
⚠️ PHISHING WARNING: This site is on a known phishing
|
|
blocklist. This transaction may steal your funds. Proceed
|
|
with extreme caution.
|
|
</div>
|
|
<p class="mb-2">
|
|
<span id="approve-tx-hostname" class="font-bold"></span>
|
|
wants to send a transaction.
|
|
</p>
|
|
|
|
<!-- decoded action (shown when calldata is recognized) -->
|
|
<div
|
|
id="approve-tx-decoded"
|
|
class="mb-3 border border-border border-dashed p-2 hidden"
|
|
>
|
|
<div class="text-xs text-muted mb-1">Action</div>
|
|
<div
|
|
id="approve-tx-action"
|
|
class="text-xs font-bold mb-2"
|
|
></div>
|
|
<div id="approve-tx-decoded-details" class="text-xs"></div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">From</div>
|
|
<div id="approve-tx-from" class="text-xs break-all"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Contract</div>
|
|
<div id="approve-tx-to" class="text-xs break-all"></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Value</div>
|
|
<div id="approve-tx-value" class="text-xs font-bold"></div>
|
|
</div>
|
|
<div id="approve-tx-data-section" class="mb-3 hidden">
|
|
<div class="text-xs text-muted mb-1">Raw data</div>
|
|
<div id="approve-tx-data" class="text-xs break-all"></div>
|
|
</div>
|
|
<div class="mb-2">
|
|
<label class="block mb-1 text-xs">Password</label>
|
|
<input
|
|
type="password"
|
|
id="approve-tx-password"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
/>
|
|
</div>
|
|
<div
|
|
id="approve-tx-error"
|
|
class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem]"
|
|
style="visibility: hidden"
|
|
></div>
|
|
<div class="flex justify-between">
|
|
<button
|
|
id="btn-approve-tx"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Confirm
|
|
</button>
|
|
<button
|
|
id="btn-reject-tx"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Reject
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ SIGNATURE APPROVAL ============ -->
|
|
<div id="view-approve-sign" class="view hidden">
|
|
<h2 class="font-bold mb-2">Signature Request</h2>
|
|
<div
|
|
id="approve-sign-phishing-warning"
|
|
class="mb-3 p-2 text-xs font-bold hidden bg-red-100 text-red-800 border-2 border-red-600 rounded-md"
|
|
>
|
|
⚠️ PHISHING WARNING: This site is on a known phishing
|
|
blocklist. Signing this message may authorize theft of your
|
|
funds. Proceed with extreme caution.
|
|
</div>
|
|
<p class="mb-2">
|
|
<span id="approve-sign-hostname" class="font-bold"></span>
|
|
wants you to sign a message.
|
|
</p>
|
|
|
|
<div
|
|
id="approve-sign-danger-warning"
|
|
class="mb-3 p-2 text-xs font-bold"
|
|
style="
|
|
visibility: hidden;
|
|
min-height: 1.25rem;
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
border: 2px solid #dc2626;
|
|
border-radius: 6px;
|
|
"
|
|
></div>
|
|
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Type</div>
|
|
<div id="approve-sign-type" class="text-xs font-bold"></div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">From</div>
|
|
<div id="approve-sign-from" class="text-xs break-all"></div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<div class="text-xs text-muted mb-1">Message</div>
|
|
<div
|
|
id="approve-sign-message"
|
|
class="text-xs break-all"
|
|
style="max-height: 12rem; overflow-y: auto"
|
|
></div>
|
|
</div>
|
|
|
|
<div class="mb-2">
|
|
<label class="block mb-1 text-xs">Password</label>
|
|
<input
|
|
type="password"
|
|
id="approve-sign-password"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
/>
|
|
</div>
|
|
<div
|
|
id="approve-sign-error"
|
|
class="text-xs mb-2 border border-border border-dashed p-1 min-h-[1.25rem]"
|
|
style="visibility: hidden"
|
|
></div>
|
|
<div class="flex justify-between">
|
|
<button
|
|
id="btn-approve-sign"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Sign
|
|
</button>
|
|
<button
|
|
id="btn-reject-sign"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Reject
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ SITE APPROVAL ============ -->
|
|
<div id="view-approve-site" class="view hidden">
|
|
<h2 class="font-bold mb-2">Connection Request</h2>
|
|
<div
|
|
id="approve-site-phishing-warning"
|
|
class="mb-3 p-2 text-xs font-bold hidden bg-red-100 text-red-800 border-2 border-red-600 rounded-md"
|
|
>
|
|
⚠️ PHISHING WARNING: This site is on a known phishing
|
|
blocklist. Connecting your wallet may result in loss of
|
|
funds. Proceed with extreme caution.
|
|
</div>
|
|
<div class="mb-3">
|
|
<p class="mb-2">
|
|
<span id="approve-hostname" class="font-bold"></span>
|
|
wants to connect to your wallet.
|
|
</p>
|
|
<div class="text-xs text-muted mb-1">
|
|
Address that will be shared:
|
|
</div>
|
|
<div
|
|
id="approve-address"
|
|
class="text-xs flex items-center mb-2"
|
|
></div>
|
|
</div>
|
|
<div class="mb-3">
|
|
<label
|
|
class="text-xs flex items-center gap-1 cursor-pointer"
|
|
>
|
|
<input type="checkbox" id="approve-remember" checked />
|
|
Remember my choice for this site
|
|
</label>
|
|
</div>
|
|
<div class="flex justify-between">
|
|
<button
|
|
id="btn-approve"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Allow
|
|
</button>
|
|
<button
|
|
id="btn-reject"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Deny
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="index.js"></script>
|
|
</body>
|
|
</html>
|