1123 lines
47 KiB
HTML
1123 lines
47 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>
|
|
<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 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 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">
|
|
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"
|
|
>
|
|
Add
|
|
</button>
|
|
<div class="mt-3 text-xs text-muted">
|
|
Have a private key instead?
|
|
<button
|
|
id="btn-add-wallet-import-key"
|
|
class="underline cursor-pointer bg-transparent border-none text-fg text-xs font-mono p-0"
|
|
>
|
|
Import private key
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ IMPORT PRIVATE KEY ============ -->
|
|
<div id="view-import-key" class="view hidden">
|
|
<button
|
|
id="btn-import-key-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">Import Private Key</h2>
|
|
<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 class="mb-2" id="import-key-password-section">
|
|
<label class="block mb-1">Choose a password</label>
|
|
<p class="text-xs text-muted mb-1">
|
|
This password encrypts your private key on this device.
|
|
You will need it to send funds.
|
|
</p>
|
|
<input
|
|
type="password"
|
|
id="import-key-password"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
/>
|
|
</div>
|
|
<div class="mb-2" id="import-key-password-confirm-section">
|
|
<label class="block mb-1">Confirm password</label>
|
|
<input
|
|
type="password"
|
|
id="import-key-password-confirm"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
/>
|
|
</div>
|
|
<button
|
|
id="btn-import-key-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]"
|
|
></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>
|
|
|
|
<!-- 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>
|
|
|
|
<!-- ============ 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>
|
|
|
|
<!-- token contract details (ERC-20 only) -->
|
|
<div
|
|
id="address-token-contract-info"
|
|
class="border-b border-border-light pb-2 mb-2 text-xs hidden"
|
|
></div>
|
|
|
|
<!-- actions -->
|
|
<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-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>
|
|
<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 hidden">
|
|
<div class="text-xs text-muted mb-1">
|
|
Estimated network fee
|
|
</div>
|
|
<div id="confirm-fee-amount" class="text-xs"></div>
|
|
</div>
|
|
<div id="confirm-warnings" class="mb-2 hidden"></div>
|
|
<div
|
|
id="confirm-errors"
|
|
class="mb-2 border border-border border-dashed p-2 hidden"
|
|
></div>
|
|
<button
|
|
id="btn-confirm-send"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
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 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>
|
|
|
|
<!-- ============ PASSWORD MODAL ============ -->
|
|
<div
|
|
id="password-modal"
|
|
class="hidden fixed inset-0 bg-bg flex items-center justify-center z-50"
|
|
>
|
|
<div class="border border-border p-4 bg-bg w-80">
|
|
<h2 class="font-bold mb-2">Enter Password</h2>
|
|
<p class="text-xs text-muted mb-2">
|
|
Your password is needed to authorize this transaction.
|
|
</p>
|
|
<input
|
|
type="password"
|
|
id="modal-password"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg mb-2"
|
|
/>
|
|
<div
|
|
id="modal-password-error"
|
|
class="text-xs mb-2 border border-border border-dashed p-1 hidden"
|
|
></div>
|
|
<div class="flex gap-2">
|
|
<button
|
|
id="btn-modal-confirm"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Confirm
|
|
</button>
|
|
<button
|
|
id="btn-modal-cancel"
|
|
class="border border-border px-2 py-1 hover:bg-fg hover:text-bg cursor-pointer"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</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">
|
|
<span id="receive-dot"></span>
|
|
<span id="receive-address" 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 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 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>
|
|
<p class="text-xs text-muted mb-2">
|
|
Add a new wallet from a recovery phrase or private key.
|
|
</p>
|
|
<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"
|
|
>
|
|
<input
|
|
type="checkbox"
|
|
id="settings-show-zero-balances"
|
|
/>
|
|
Show tracked tokens with zero balance
|
|
</label>
|
|
</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>
|
|
</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>
|
|
|
|
<!-- ============ 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 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 class="font-bold mb-2">Transaction</h2>
|
|
<div class="mb-4">
|
|
<div class="text-xs text-muted mb-1">Status</div>
|
|
<div id="tx-detail-status" class="text-xs"></div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="text-xs text-muted mb-1">Time</div>
|
|
<div id="tx-detail-time" class="text-xs"></div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="text-xs text-muted mb-1">Amount</div>
|
|
<div id="tx-detail-value" class="text-xs"></div>
|
|
</div>
|
|
<div class="mb-4 hidden">
|
|
<div class="text-xs text-muted mb-1">Native quantity</div>
|
|
<div id="tx-detail-native" class="text-xs"></div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<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-4">
|
|
<div class="text-xs text-muted mb-1">To</div>
|
|
<div id="tx-detail-to" class="text-xs break-all"></div>
|
|
</div>
|
|
<div class="mb-4">
|
|
<div class="text-xs text-muted mb-1">Transaction hash</div>
|
|
<div id="tx-detail-hash" class="text-xs break-all"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- ============ TRANSACTION APPROVAL ============ -->
|
|
<div id="view-approve-tx" class="view hidden">
|
|
<h2 class="font-bold mb-2">Transaction Request</h2>
|
|
<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 hidden mb-2"></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>
|
|
<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="hidden mb-3 p-2 text-xs font-bold"
|
|
style="
|
|
background: #fee2e2;
|
|
color: #991b1b;
|
|
border: 2px solid #dc2626;
|
|
border-radius: 6px;
|
|
"
|
|
></div>
|
|
|
|
<div class="mb-3">
|
|
<div class="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 hidden mb-2"></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 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>
|