dc7451a4e2
Some checks failed
check / check (push) Has been cancelled
The Send button was enabled whenever the amount alone fit the balance, so a max-value ETH send passed the confirmation screen and failed at broadcast, after the user had committed to it. The arithmetic moves into src/shared/txValidation.js as a pure function over 18-decimal fixed point: native ETH now requires amount + fee <= balance, and an ERC-20 transfer requires the ETH balance to cover the fee on top of the token check, reported as its own error. Validation re-runs when the async estimate resolves; Send stays disabled while the estimate is pending and when it fails, so an unknown fee is never treated as zero. The fee messages are static elements that already reserve their space, so nothing moves when the estimate lands. The fee reserved is the one the node will actually require. The send pins no fee fields, so ethers broadcasts a type-2 transaction and the node validates it against value + gasLimit * maxFeePerGas; gating on gasPrice would under-reserve by roughly gasLimit * baseFee and let through exactly the broadcast failure this change exists to prevent. feeReserveWei() derives that reserve, falling back to gasPrice only where no type-2 pricing exists, and the fee shown on screen is the same figure so the displayed number and the gate can never contradict each other. validateTransfer() fails closed: a feeWei that is not a non-negative bigint under FEE_KNOWN, and any unrecognised feeStatus, block exactly as FEE_UNAVAILABLE does rather than counting as a fee of zero.
1540 lines
66 KiB
HTML
1540 lines
66 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">
|
|
Maximum 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
|
|
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>
|
|
<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 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>
|
|
|
|
<!-- ============ 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>
|