clawbot
414de0419b
All checks were successful
check / check (push) Successful in 25s
Address rows on Home now carry an [x] control on wallets that derive their addresses from an extended key and hold more than one; it opens a confirmation screen before anything is removed. Removing an address destroys nothing: it stays derivable from key material the wallet still holds, and any funds at it stay where they are. That is also why the screen is not password-gated, unlike delete-wallet — a password gates the disclosure or destruction of a secret, and this does neither. Getting the address back into the list is another matter, and the copy states it exactly rather than promising a route the app refuses. "+" derives the next unused index, because the derivation counter is a high-water mark and is not rewound, and re-importing the wallet's key material is rejected as a duplicate for as long as the wallet is present — which it always is here, since a wallet never gives up its last address. What works is deleting the whole wallet in Settings, which asks for the password and destroys the stored secret, then importing again: the scan that follows rediscovers the address only if it has on-chain activity, and an address that was never used does not come back at all. The text is built by recoveryPathText() rather than sitting in index.html so it can name the wallet's own kind of key material, an xprv wallet having no recovery phrase to re-import. A balance is surfaced as a warning, never a refusal, and holding something means any ERC-20 as well as ETH, at any size: an address with no ETH and a stablecoin position must not get a blank line on the screen whose job is to warn. The warning names no figure of its own, because the balance lines round to four decimals and a sentence built from a rounded number would report 0.0000 ETH for an address holding real money; the amounts come from the same balanceLinesForAddress() and getAddressValueUsd() every other screen uses. The state transition lives next to the wallet one in src/shared/walletDelete.js and shares its address comparison, site-permission cleanup and broadcast, so the rules match one level down: the last address of a wallet is never removable, the selection moves only when it was the address removed, an index after the splice is decremented, a selection in another wallet is untouched, and AUTISTMASK_ACTIVE_CHANGED is broadcast when the active address moves so a connected site stops being told about an address the user removed.
1661 lines
72 KiB
HTML
1661 lines
72 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. It
|
|
must be the master key for the wallet; an account-level
|
|
or child key is not supported.
|
|
</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">Network fee</div>
|
|
<div id="confirm-fee-amount" class="text-xs"></div>
|
|
<!-- Holds its one line of space from the first paint, so
|
|
the reserve appearing when the estimate lands moves
|
|
nothing. The placeholder is never seen. -->
|
|
<div
|
|
id="confirm-fee-reserve"
|
|
class="text-xs text-muted"
|
|
style="visibility: hidden"
|
|
>
|
|
reserve pending
|
|
</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
|
|
id="confirm-amount-fee-error"
|
|
class="mb-2 border border-border border-dashed p-2 text-xs"
|
|
style="visibility: hidden"
|
|
>
|
|
Your balance does not cover this amount plus the network
|
|
fee. Please go back and send a smaller amount.
|
|
</div>
|
|
<div
|
|
id="confirm-gas-error"
|
|
class="mb-2 border border-border border-dashed p-2 text-xs"
|
|
style="visibility: hidden"
|
|
>
|
|
You do not have enough ETH to pay the network fee for this
|
|
transfer. Please add ETH to this address and try again.
|
|
</div>
|
|
<div
|
|
id="confirm-fee-unknown-error"
|
|
class="mb-2 border border-border border-dashed p-2 text-xs"
|
|
style="visibility: hidden"
|
|
>
|
|
The network fee could not be estimated, so this transaction
|
|
cannot be checked against your balance. Please go back and
|
|
try again.
|
|
</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>
|
|
<label
|
|
class="text-xs flex items-center gap-1 cursor-pointer mb-2"
|
|
>
|
|
<input type="checkbox" id="settings-utc-timestamps" />
|
|
UTC Timestamps
|
|
</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-spoofed-symbols"
|
|
/>
|
|
Hide fake tokens impersonating a known symbol
|
|
</label>
|
|
<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>
|
|
</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 class="bg-well p-3 mx-1 mb-3">
|
|
<h3 class="font-bold mb-1">About</h3>
|
|
<p class="text-xs mb-2">
|
|
<a
|
|
href="https://git.eeqj.de/sneak/AutistMask"
|
|
class="underline decoration-dashed"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>AutistMask</a
|
|
>
|
|
— Minimal Ethereum wallet browser extension.
|
|
</p>
|
|
<div class="text-xs">
|
|
<div class="mb-1">
|
|
<span class="text-muted">License:</span>
|
|
<span id="about-license"></span>
|
|
</div>
|
|
<div class="mb-1">
|
|
<span class="text-muted">Author:</span>
|
|
<span id="about-author"></span>
|
|
</div>
|
|
<div class="mb-1">
|
|
<span class="text-muted">Version:</span>
|
|
<span
|
|
id="about-version"
|
|
class="cursor-pointer select-none"
|
|
></span>
|
|
</div>
|
|
<div class="mb-1">
|
|
<span class="text-muted">Release date:</span>
|
|
<span id="about-release-date"></span>
|
|
</div>
|
|
<div>
|
|
<span class="text-muted">Commit:</span>
|
|
<a
|
|
id="about-commit-link"
|
|
class="underline decoration-dashed"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
></a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
id="settings-debug-well"
|
|
class="bg-well p-3 mx-1 mb-3"
|
|
style="display: none"
|
|
>
|
|
<h3 class="font-bold mb-1">Debug</h3>
|
|
<label
|
|
class="text-xs flex items-center gap-1 cursor-pointer"
|
|
>
|
|
<input type="checkbox" id="settings-debug-mode" />
|
|
Enable debug mode
|
|
</label>
|
|
</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>
|
|
|
|
<!-- ============ DELETE ADDRESS CONFIRM ============ -->
|
|
<div id="view-delete-address-confirm" class="view hidden">
|
|
<button
|
|
id="btn-delete-address-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">Remove Address</h2>
|
|
<p class="text-xs mb-2">
|
|
You are about to remove
|
|
<strong id="delete-address-label"></strong> from
|
|
<strong id="delete-address-wallet-name"></strong>.
|
|
</p>
|
|
<div
|
|
id="delete-address-value"
|
|
class="text-xs mb-2 break-all min-h-[1rem]"
|
|
></div>
|
|
<div
|
|
class="text-xs mb-2 border border-border border-dashed p-2"
|
|
>
|
|
This only stops this wallet from tracking the address.
|
|
Nothing is destroyed and no key is deleted. Any funds at the
|
|
address stay exactly where they are, and the address remains
|
|
yours. Any site permissions granted to this address are
|
|
forgotten.
|
|
</div>
|
|
<!-- Filled by src/popup/views/deleteAddress.js: the route
|
|
back names the wallet's own kind of key material. -->
|
|
<div
|
|
id="delete-address-recovery"
|
|
class="text-xs mb-2 border border-border border-dashed p-2"
|
|
></div>
|
|
<div
|
|
id="delete-address-balance"
|
|
class="text-xs mb-2 min-h-[1.25rem] pointer-events-none"
|
|
>
|
|
|
|
</div>
|
|
<p class="text-xs text-muted mb-3">
|
|
A wallet always keeps at least one address. To remove the
|
|
last one, delete the whole wallet from Settings instead.
|
|
</p>
|
|
<div
|
|
id="delete-address-flash"
|
|
class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
|
|
style="visibility: hidden"
|
|
></div>
|
|
<button
|
|
id="btn-delete-address-confirm"
|
|
class="border border-border text-red-500 px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Remove Address
|
|
</button>
|
|
</div>
|
|
|
|
<!-- ============ SHOW RECOVERY PHRASE ============ -->
|
|
<div id="view-show-phrase" class="view hidden">
|
|
<button
|
|
id="btn-show-phrase-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-1">Recovery Phrase</h2>
|
|
<p class="text-xs mb-3" id="show-phrase-wallet-name"></p>
|
|
<div
|
|
class="text-xs mb-3 border border-border border-dashed p-2"
|
|
>
|
|
Anyone who has these words can take every coin and token in
|
|
this wallet, from any device, without your password. Never
|
|
type them into a website and never show them to anyone.
|
|
</div>
|
|
<div
|
|
id="show-phrase-flash"
|
|
class="text-xs text-red-500 mb-2 min-h-[1.25rem]"
|
|
style="visibility: hidden"
|
|
></div>
|
|
<div id="show-phrase-password-section" class="mb-2">
|
|
<label class="block mb-1">Password</label>
|
|
<input
|
|
type="password"
|
|
id="show-phrase-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-show-phrase-reveal"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer mt-2"
|
|
>
|
|
Reveal
|
|
</button>
|
|
</div>
|
|
<div id="show-phrase-result" class="hidden">
|
|
<div
|
|
id="show-phrase-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>
|
|
|
|
<!-- ============ 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>
|