a095c2b74f
Replace the muted text link at the bottom of AddressDetail with a '···' overflow/more button in the action button row. Clicking it opens a dropdown with 'Export Private Key' as an option. Clicking outside closes the dropdown. The pattern is reusable for future secondary actions.
1306 lines
56 KiB
HTML
1306 lines
56 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 class="mt-1 text-xs text-muted">
|
|
Have an extended private key (xprv)?
|
|
<button
|
|
id="btn-add-wallet-import-xprv"
|
|
class="underline cursor-pointer bg-transparent border-none text-fg text-xs font-mono p-0"
|
|
>
|
|
Import xprv
|
|
</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>
|
|
|
|
<!-- ============ IMPORT XPRV ============ -->
|
|
<div id="view-import-xprv" class="view hidden">
|
|
<button
|
|
id="btn-import-xprv-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 Extended Private Key</h2>
|
|
<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 class="mb-2" id="import-xprv-password-section">
|
|
<label class="block mb-1">Choose a password</label>
|
|
<p class="text-xs text-muted mb-1">
|
|
This password encrypts your key on this device. You will
|
|
need it to send funds.
|
|
</p>
|
|
<input
|
|
type="password"
|
|
id="import-xprv-password"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
/>
|
|
</div>
|
|
<div class="mb-2" id="import-xprv-password-confirm-section">
|
|
<label class="block mb-1">Confirm password</label>
|
|
<input
|
|
type="password"
|
|
id="import-xprv-password-confirm"
|
|
class="border border-border p-1 w-full font-mono text-sm bg-bg text-fg"
|
|
/>
|
|
</div>
|
|
<button
|
|
id="btn-import-xprv-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 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 min-w-[10rem]"
|
|
>
|
|
<button
|
|
id="btn-export-privkey"
|
|
class="block w-full text-left px-3 py-2 text-sm hover:bg-fg hover:text-bg 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>
|
|
<h2 class="font-bold mb-3">Export Private Key</h2>
|
|
<p class="text-xs mb-1" id="export-privkey-label"></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 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="border border-dashed border-border p-2 font-mono text-xs break-all cursor-pointer mb-1"
|
|
title="Click to copy"
|
|
></div>
|
|
<p class="text-xs text-muted">Click to copy.</p>
|
|
</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>
|
|
<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>
|
|
<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"
|
|
>
|
|
<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>
|
|
|
|
<!-- ============ 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 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 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>
|
|
<div id="tx-detail-type-section" class="mb-4 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-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 id="tx-detail-calldata-section" class="mb-4 hidden">
|
|
<div
|
|
id="tx-detail-calldata-well"
|
|
class="mb-3 border border-border border-dashed p-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 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 id="tx-detail-rawdata-section" class="mb-4 hidden">
|
|
<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>
|
|
|
|
<!-- ============ 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>
|