1569 lines
75 KiB
HTML
1569 lines
75 KiB
HTML
|
<!doctype html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8">
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|||
|
|
<title>Contractless Wallet</title>
|
|||
|
|
<link rel="stylesheet" href="styles.css">
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
<section class="startup-screen" data-startup-screen>
|
|||
|
|
<div class="startup-card">
|
|||
|
|
<div class="brand startup-brand">
|
|||
|
|
<div class="brand-mark wallet-image"></div>
|
|||
|
|
<div>
|
|||
|
|
<div class="brand-name">Contractless</div>
|
|||
|
|
<div class="brand-subtitle">Wallet</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-copy">
|
|||
|
|
<h1>Open Wallet</h1>
|
|||
|
|
<p>Create a new address, load an existing wallet file, or restore from a private key source.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="network-toggle" aria-label="Wallet network">
|
|||
|
|
<button class="active" type="button" data-network-toggle="testnet">Testnet</button>
|
|||
|
|
<button type="button" data-network-toggle="mainnet">Mainnet</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-actions">
|
|||
|
|
<button class="startup-action primary-start" type="button" data-start-mode="load">
|
|||
|
|
<strong>Load Existing Wallet</strong>
|
|||
|
|
<span>Select a wallet file already on this device.</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="startup-action" type="button" data-start-mode="create">
|
|||
|
|
<strong>Create New Wallet</strong>
|
|||
|
|
<span>Generate a new encrypted wallet file.</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="startup-action" type="button" data-start-mode="import-key">
|
|||
|
|
<strong>Import Private Key</strong>
|
|||
|
|
<span>Restore from a private key value.</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="startup-action" type="button" data-start-mode="import-image">
|
|||
|
|
<strong>Import Private Key Image</strong>
|
|||
|
|
<span>Restore from a base64 or image-based key backup.</span>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<form class="startup-form hidden" data-create-wallet-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Wallet Name</span>
|
|||
|
|
<input type="text" autocomplete="off" placeholder="bruce" data-wallet-name>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Wallet Encryption Key</span>
|
|||
|
|
<input type="password" autocomplete="new-password" data-wallet-key>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Confirm Wallet Key</span>
|
|||
|
|
<input type="password" autocomplete="new-password" data-wallet-key-confirm>
|
|||
|
|
</label>
|
|||
|
|
<div class="startup-form-actions">
|
|||
|
|
<button class="secondary-button" type="button" data-cancel-startup-form>Cancel</button>
|
|||
|
|
<button class="primary-button" type="submit" data-create-wallet-submit>Create Wallet</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message" data-startup-message></div>
|
|||
|
|
</form>
|
|||
|
|
<form class="startup-form hidden" data-load-wallet-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Saved Wallets</span>
|
|||
|
|
<div class="wallet-picker-row">
|
|||
|
|
<select data-wallet-list>
|
|||
|
|
<option value="">No wallets found</option>
|
|||
|
|
</select>
|
|||
|
|
<button class="secondary-button browse-wallet-button" type="button" aria-label="Browse wallet files" data-browse-wallet>...</button>
|
|||
|
|
</div>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Wallet Encryption Key</span>
|
|||
|
|
<input type="password" autocomplete="current-password" data-load-wallet-key>
|
|||
|
|
</label>
|
|||
|
|
<div class="startup-form-actions">
|
|||
|
|
<button class="secondary-button" type="button" data-refresh-wallet-list>Refresh</button>
|
|||
|
|
<button class="secondary-button" type="button" data-cancel-startup-form>Cancel</button>
|
|||
|
|
<button class="primary-button" type="submit" data-load-wallet-submit>Load Wallet</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message" data-load-message></div>
|
|||
|
|
</form>
|
|||
|
|
<form class="startup-form hidden" data-import-key-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Wallet Name</span>
|
|||
|
|
<input type="text" autocomplete="off" placeholder="bruce" data-import-wallet-name>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Private Key</span>
|
|||
|
|
<textarea rows="5" spellcheck="false" data-import-private-key></textarea>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Wallet Encryption Key</span>
|
|||
|
|
<input type="password" autocomplete="new-password" data-import-wallet-key>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Confirm Wallet Key</span>
|
|||
|
|
<input type="password" autocomplete="new-password" data-import-wallet-key-confirm>
|
|||
|
|
</label>
|
|||
|
|
<div class="startup-form-actions">
|
|||
|
|
<button class="secondary-button" type="button" data-cancel-startup-form>Cancel</button>
|
|||
|
|
<button class="primary-button" type="submit" data-import-key-submit>Import Wallet</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message" data-import-message></div>
|
|||
|
|
</form>
|
|||
|
|
<form class="startup-form hidden" data-import-image-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Wallet Name</span>
|
|||
|
|
<input type="text" autocomplete="off" placeholder="bruce" data-import-image-wallet-name>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Private Key Image</span>
|
|||
|
|
<div class="wallet-picker-row">
|
|||
|
|
<input type="text" autocomplete="off" readonly placeholder="Select PNG image" data-import-image-path>
|
|||
|
|
<button class="secondary-button browse-wallet-button" type="button" aria-label="Browse private key image" data-browse-private-key-image>...</button>
|
|||
|
|
</div>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Wallet Encryption Key</span>
|
|||
|
|
<input type="password" autocomplete="new-password" data-import-image-wallet-key>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Confirm Wallet Key</span>
|
|||
|
|
<input type="password" autocomplete="new-password" data-import-image-wallet-key-confirm>
|
|||
|
|
</label>
|
|||
|
|
<div class="startup-form-actions">
|
|||
|
|
<button class="secondary-button" type="button" data-cancel-startup-form>Cancel</button>
|
|||
|
|
<button class="primary-button" type="submit" data-import-image-submit>Import Wallet</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message" data-import-image-message></div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<div class="app-shell">
|
|||
|
|
<aside class="sidebar" aria-label="Primary navigation">
|
|||
|
|
<div class="brand">
|
|||
|
|
<div class="brand-mark" data-wallet-image-mark>C</div>
|
|||
|
|
<div>
|
|||
|
|
<div class="brand-name">Contractless</div>
|
|||
|
|
<div class="brand-subtitle">Wallet</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<nav class="nav-list">
|
|||
|
|
<button class="nav-item active" data-view="dashboard" type="button">
|
|||
|
|
<span class="nav-icon">*</span>
|
|||
|
|
<span>Dashboard</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="nav-item" data-view="send" type="button">
|
|||
|
|
<span class="nav-icon">></span>
|
|||
|
|
<span>Transactions</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="nav-item" data-view="receive" type="button">
|
|||
|
|
<span class="nav-icon"><</span>
|
|||
|
|
<span>Receive</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="nav-item" data-view="history" type="button">
|
|||
|
|
<span class="nav-icon">=</span>
|
|||
|
|
<span>History</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="nav-item" data-view="assets" type="button">
|
|||
|
|
<span class="nav-icon">o</span>
|
|||
|
|
<span>Assets</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="nav-item" data-view="nfts" type="button">
|
|||
|
|
<span class="nav-icon">#</span>
|
|||
|
|
<span>NFTs</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="nav-item" data-view="loans" type="button">
|
|||
|
|
<span class="nav-icon">$</span>
|
|||
|
|
<span>Loans</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="nav-item" data-view="marketing" type="button">
|
|||
|
|
<span class="nav-icon">%</span>
|
|||
|
|
<span>Marketing</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="nav-item" data-view="addressbook" type="button">
|
|||
|
|
<span class="nav-icon">@</span>
|
|||
|
|
<span>Address Book</span>
|
|||
|
|
</button>
|
|||
|
|
<button class="nav-item" data-view="settings" type="button">
|
|||
|
|
<span class="nav-icon">*</span>
|
|||
|
|
<span>Settings</span>
|
|||
|
|
</button>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<div class="sidebar-footer">
|
|||
|
|
<div class="mini-label">Active Network</div>
|
|||
|
|
<div class="network-chip">
|
|||
|
|
<span class="status-dot"></span>
|
|||
|
|
<span data-network-label>Testnet</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="mini-label bridge-label" data-bridge-status>Static prototype</div>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
|
|||
|
|
<div class="main-shell">
|
|||
|
|
<header class="topbar">
|
|||
|
|
<div class="topbar-wallet-mark brand-mark" data-wallet-image-mark aria-hidden="true">C</div>
|
|||
|
|
<div class="topbar-group wallet-select">
|
|||
|
|
<span class="topbar-label">Wallet</span>
|
|||
|
|
<select class="select-button" data-top-wallet-list>
|
|||
|
|
<option value="">No wallet loaded</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="topbar-group node-select">
|
|||
|
|
<span class="topbar-label">Broadcast Node</span>
|
|||
|
|
<select class="select-button" data-broadcast-node>
|
|||
|
|
<option value="">Loading nodes...</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<form class="topbar-group payment-uri-entry" data-payment-uri-entry>
|
|||
|
|
<label class="topbar-label" for="topbar-payment-uri">Payment URI</label>
|
|||
|
|
<input
|
|||
|
|
id="topbar-payment-uri"
|
|||
|
|
type="text"
|
|||
|
|
inputmode="url"
|
|||
|
|
autocomplete="off"
|
|||
|
|
spellcheck="false"
|
|||
|
|
placeholder="Paste payment URI and press Enter"
|
|||
|
|
data-topbar-payment-uri
|
|||
|
|
>
|
|||
|
|
</form>
|
|||
|
|
<div class="topbar-spacer"></div>
|
|||
|
|
<button class="info-button" type="button" aria-label="Node information" title="Node information" data-node-info>
|
|||
|
|
<svg class="button-icon" viewBox="0 0 24 24" aria-hidden="true">
|
|||
|
|
<circle cx="12" cy="12" r="9"></circle>
|
|||
|
|
<path d="M12 10v6"></path>
|
|||
|
|
<path d="M12 7h.01"></path>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
<button class="icon-button" type="button" aria-label="Lock wallet" title="Lock wallet" data-lock-wallet>
|
|||
|
|
<svg class="button-icon" viewBox="0 0 24 24" aria-hidden="true">
|
|||
|
|
<rect x="5" y="11" width="14" height="9" rx="2"></rect>
|
|||
|
|
<path d="M8 11V7a4 4 0 0 1 7.4-2.1"></path>
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<main class="content">
|
|||
|
|
<section class="dashboard-grid" id="dashboard-view">
|
|||
|
|
<div class="balance-panel panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Balance overview</h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="balance-split">
|
|||
|
|
<div class="balance-main">
|
|||
|
|
<div class="brand-mark wallet-image"></div>
|
|||
|
|
<div>
|
|||
|
|
<span class="field-label" data-base-balance-label>CLTC Balance</span>
|
|||
|
|
<div class="balance-value" data-clc-balance>Load wallet</div>
|
|||
|
|
<div class="usd-value" data-balance-status>Balances refresh while dashboard is open.</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="token-balances" data-token-balances>
|
|||
|
|
<div class="token-title">Token Balances</div>
|
|||
|
|
<div class="empty-balance">No wallet loaded.</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="registration-panel panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Wallet Registration</h2>
|
|||
|
|
</div>
|
|||
|
|
<span class="registration-badge">Registered</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="address-card">
|
|||
|
|
<span class="field-label">Address</span>
|
|||
|
|
<code data-active-address></code>
|
|||
|
|
</div>
|
|||
|
|
<div class="address-card">
|
|||
|
|
<span class="field-label">Vanity Address</span>
|
|||
|
|
<code data-active-vanity></code>
|
|||
|
|
</div>
|
|||
|
|
<div class="address-card">
|
|||
|
|
<span class="field-label">Registration</span>
|
|||
|
|
<button class="registration-action unregistered" type="button" data-registration-action>Register Address</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="quick-panel panel side-card">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Quick Actions</h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="quick-actions">
|
|||
|
|
<button type="button" data-open-create-transaction>Create Transaction</button>
|
|||
|
|
<button type="button" data-open-import-transaction>Broadcast Transaction</button>
|
|||
|
|
<button type="button" data-open-vanity-transaction>Create Vanity</button>
|
|||
|
|
<button type="button" data-open-address-book>Add Contact</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="transactions-panel panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Recent Transactions</h2>
|
|||
|
|
</div>
|
|||
|
|
<button class="text-button" type="button" data-view-all-transactions>View All</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="table-wrap">
|
|||
|
|
<table>
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>Type</th>
|
|||
|
|
<th>Asset</th>
|
|||
|
|
<th>Counterparty</th>
|
|||
|
|
<th>Status</th>
|
|||
|
|
<th>Amount</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody data-recent-transactions>
|
|||
|
|
</tbody>
|
|||
|
|
</table>
|
|||
|
|
<div class="recent-transactions-state" data-recent-transactions-state>
|
|||
|
|
Load a wallet to view recent transactions.
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="network-panel panel side-card">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Network Information</h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-list">
|
|||
|
|
<div><span>Latest Block</span><b data-network-info-height>--</b></div>
|
|||
|
|
<div><span>Network</span><b data-network-info-network>Testnet / CLTC</b></div>
|
|||
|
|
<div><span>Difficulty</span><b data-network-info-difficulty>--</b></div>
|
|||
|
|
<div><span>Mempool Tx</span><b data-network-info-mempool>--</b></div>
|
|||
|
|
<div><span>Chain Tx</span><b data-network-info-chain-tx>--</b></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="registration-notice unregistered" data-registration-notice>
|
|||
|
|
Address must be registered before this wallet can receive coins or tokens.
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="transaction-view hidden" id="transaction-view">
|
|||
|
|
<div class="transaction-workspace">
|
|||
|
|
<div class="transaction-main panel">
|
|||
|
|
<div class="panel-header transaction-header">
|
|||
|
|
<div>
|
|||
|
|
<h2 id="transaction-panel-title">Unbroadcast Transactions</h2>
|
|||
|
|
<p id="transaction-panel-copy">Transactions saved locally and waiting for review.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="secondary-button" type="button" data-import-transaction>Import Transaction</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="unbroadcast-list" data-transaction-list></div>
|
|||
|
|
<div class="startup-message" data-unbroadcast-list-message></div>
|
|||
|
|
|
|||
|
|
<form class="transaction-form hidden" data-form-panel>
|
|||
|
|
<div class="form-grid compact" data-transfer-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Receiver</span>
|
|||
|
|
<input data-transfer-receiver placeholder="Receiver address or vanity">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Asset</span>
|
|||
|
|
<select data-transfer-asset></select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Amount</span>
|
|||
|
|
<input data-transfer-amount inputmode="decimal" placeholder="0.0000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Transaction Fee</span>
|
|||
|
|
<input data-transfer-fee inputmode="decimal" placeholder="0.0000" readonly>
|
|||
|
|
</label>
|
|||
|
|
<div class="review-grid wide transfer-details">
|
|||
|
|
<div><span>Coin / Token</span><b data-transfer-coin>--</b></div>
|
|||
|
|
<div><span>NFT Series</span><b data-transfer-nft-series>0</b></div>
|
|||
|
|
<div><span>Available Balance</span><b data-transfer-balance>--</b></div>
|
|||
|
|
<div><span>Sender</span><b data-transfer-sender>--</b></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-actions" data-transfer-actions>
|
|||
|
|
<button class="secondary-button" type="button" data-transfer-save>Save Transaction</button>
|
|||
|
|
<button class="primary-button" type="button" data-transfer-broadcast>Broadcast Transaction</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message" data-transfer-message></div>
|
|||
|
|
|
|||
|
|
<div class="form-grid compact hidden" data-create-token-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Token Ticker</span>
|
|||
|
|
<input data-create-token-ticker maxlength="15" placeholder="3 to 15 characters">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Initial Supply</span>
|
|||
|
|
<input data-create-token-number inputmode="decimal" placeholder="0.00000000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Transaction Fee</span>
|
|||
|
|
<input data-create-token-fee inputmode="decimal" readonly>
|
|||
|
|
</label>
|
|||
|
|
<label class="checkbox-row">
|
|||
|
|
<input type="checkbox" data-create-token-allow-more>
|
|||
|
|
<span>Allow issuing more tokens later</span>
|
|||
|
|
</label>
|
|||
|
|
<div class="review-grid wide transfer-details">
|
|||
|
|
<div><span>Cap Rule</span><b data-create-token-cap>Hard capped</b></div>
|
|||
|
|
<div><span>Creator</span><b data-create-token-creator>--</b></div>
|
|||
|
|
<div><span>Fee</span><b data-create-token-fee-label>500.00000000</b></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-actions hidden" data-create-token-actions>
|
|||
|
|
<button class="secondary-button" type="button" data-create-token-save>Save Transaction</button>
|
|||
|
|
<button class="primary-button" type="button" data-create-token-broadcast>Broadcast Transaction</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message hidden" data-create-token-message></div>
|
|||
|
|
|
|||
|
|
<div class="form-grid compact hidden" data-issue-token-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Token</span>
|
|||
|
|
<select data-issue-token-ticker>
|
|||
|
|
<option value="">Loading tokens...</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Additional Supply</span>
|
|||
|
|
<input data-issue-token-number inputmode="decimal" placeholder="0.00000000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Transaction Fee</span>
|
|||
|
|
<input data-issue-token-fee inputmode="decimal" readonly>
|
|||
|
|
</label>
|
|||
|
|
<div class="review-grid wide transfer-details">
|
|||
|
|
<div><span>Creator</span><b data-issue-token-creator>--</b></div>
|
|||
|
|
<div><span>Issuance Policy</span><b data-issue-token-policy>--</b></div>
|
|||
|
|
<div><span>Fee</span><b data-issue-token-fee-label>100.00000000</b></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-actions hidden" data-issue-token-actions>
|
|||
|
|
<button class="secondary-button" type="button" data-issue-token-save>Save Transaction</button>
|
|||
|
|
<button class="primary-button" type="button" data-issue-token-broadcast>Broadcast Transaction</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message hidden" data-issue-token-message></div>
|
|||
|
|
|
|||
|
|
<div class="form-grid compact hidden" data-create-nft-form>
|
|||
|
|
<div class="form-inline-actions create-nft-help-row">
|
|||
|
|
<button class="secondary-button" type="button" data-nft-instructions-open>NFT Instructions</button>
|
|||
|
|
</div>
|
|||
|
|
<label>
|
|||
|
|
<span>NFT Type</span>
|
|||
|
|
<select data-create-nft-series>
|
|||
|
|
<option value="0">Standalone NFT</option>
|
|||
|
|
<option value="1">Collection</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>NFT Name</span>
|
|||
|
|
<input data-create-nft-name maxlength="15" placeholder="3 to 15 characters">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>IPFS CID</span>
|
|||
|
|
<input data-create-nft-ipfs maxlength="100" placeholder="CIDv0 or CIDv1">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Item Count</span>
|
|||
|
|
<input data-create-nft-count type="number" min="1" max="4294967295" value="1">
|
|||
|
|
</label>
|
|||
|
|
<label class="create-nft-description">
|
|||
|
|
<span>Description</span>
|
|||
|
|
<textarea data-create-nft-description maxlength="100" rows="3" placeholder="Maximum 100 characters"></textarea>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Transaction Fee</span>
|
|||
|
|
<input data-create-nft-fee inputmode="decimal" readonly>
|
|||
|
|
</label>
|
|||
|
|
<div class="review-grid wide transfer-details">
|
|||
|
|
<div><span>Creator</span><b data-create-nft-creator>--</b></div>
|
|||
|
|
<div><span>Mint Type</span><b data-create-nft-type-label>Standalone NFT</b></div>
|
|||
|
|
<div><span>Items Created</span><b data-create-nft-count-label>1</b></div>
|
|||
|
|
<div><span>Fee</span><b data-create-nft-fee-label>0.50000000</b></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-actions hidden" data-create-nft-actions>
|
|||
|
|
<button class="secondary-button" type="button" data-create-nft-save>Save Transaction</button>
|
|||
|
|
<button class="primary-button" type="button" data-create-nft-broadcast>Broadcast Transaction</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message hidden" data-create-nft-message></div>
|
|||
|
|
|
|||
|
|
<div class="form-grid compact hidden" data-swap-offer-form>
|
|||
|
|
<div class="form-section-title">You Offer</div>
|
|||
|
|
<label>
|
|||
|
|
<span>Asset</span>
|
|||
|
|
<select data-swap-offer-asset></select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Amount</span>
|
|||
|
|
<input data-swap-offer-amount inputmode="decimal" placeholder="0.00000000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Miner Tip</span>
|
|||
|
|
<input data-swap-offer-tip inputmode="decimal" placeholder="0.00000000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Your Fee</span>
|
|||
|
|
<input data-swap-offer-fee value="1.00000000" readonly>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<div class="form-section-title">You Request</div>
|
|||
|
|
<label>
|
|||
|
|
<span>Asset</span>
|
|||
|
|
<select data-swap-request-asset></select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Amount</span>
|
|||
|
|
<input data-swap-request-amount inputmode="decimal" placeholder="0.00000000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Counterparty Miner Tip</span>
|
|||
|
|
<input data-swap-request-tip inputmode="decimal" placeholder="0.00000000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Counterparty Fee</span>
|
|||
|
|
<input data-swap-request-fee value="1.00000000" readonly>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<label>
|
|||
|
|
<span>Counterparty Address</span>
|
|||
|
|
<input data-swap-counterparty placeholder="Short or vanity address">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Offer Expires In</span>
|
|||
|
|
<div class="input-with-suffix">
|
|||
|
|
<input data-swap-expiration type="number" min="1" max="720" value="72">
|
|||
|
|
<span>hours</span>
|
|||
|
|
</div>
|
|||
|
|
</label>
|
|||
|
|
<div class="review-grid wide transfer-details">
|
|||
|
|
<div><span>Sender</span><b data-swap-sender>--</b></div>
|
|||
|
|
<div><span>Available</span><b data-swap-available>--</b></div>
|
|||
|
|
<div><span>Base Fees</span><b data-swap-fees>1.00000000 each</b></div>
|
|||
|
|
<div><span>Signature State</span><b>Awaiting signature</b></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-actions hidden" data-swap-offer-actions>
|
|||
|
|
<button class="primary-button" type="button" data-swap-offer-save>Sign and Save Offer</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="saved-transaction-path hidden" data-swap-saved-path-panel>
|
|||
|
|
<div>
|
|||
|
|
<span>Saved Offer File</span>
|
|||
|
|
<input type="text" readonly data-swap-saved-path>
|
|||
|
|
</div>
|
|||
|
|
<button class="secondary-button" type="button" data-swap-copy-path>Copy Path</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message hidden" data-swap-offer-message></div>
|
|||
|
|
|
|||
|
|
<div class="form-grid compact hidden" data-loan-offer-form>
|
|||
|
|
<div class="form-section-title">Loan Terms</div>
|
|||
|
|
<label>
|
|||
|
|
<span>Asset to Lend</span>
|
|||
|
|
<select data-loan-asset></select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Loan Amount</span>
|
|||
|
|
<input data-loan-amount inputmode="decimal" placeholder="0.00000000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Borrower Address</span>
|
|||
|
|
<input data-loan-borrower placeholder="Short or vanity address">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Loan Start</span>
|
|||
|
|
<input data-loan-start type="datetime-local" step="60">
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<div class="form-section-title">Collateral</div>
|
|||
|
|
<label>
|
|||
|
|
<span>Collateral Asset</span>
|
|||
|
|
<select data-loan-collateral></select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Collateral Amount</span>
|
|||
|
|
<input data-loan-collateral-amount inputmode="decimal" placeholder="0.00000000">
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<div class="form-section-title">Repayment Schedule</div>
|
|||
|
|
<label>
|
|||
|
|
<span>Payment Period</span>
|
|||
|
|
<select data-loan-payment-period>
|
|||
|
|
<option value="d">Daily</option>
|
|||
|
|
<option value="w">Weekly</option>
|
|||
|
|
<option value="m">Monthly</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Number of Payments</span>
|
|||
|
|
<input data-loan-payment-number type="number" min="1" max="255" value="1">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Amount per Payment</span>
|
|||
|
|
<input data-loan-payment-amount inputmode="decimal" placeholder="0.00000000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Missed Payments Allowed</span>
|
|||
|
|
<input data-loan-grace-period type="number" min="0" max="255" value="0">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Maximum Overdue Value</span>
|
|||
|
|
<input data-loan-max-late-value inputmode="decimal" placeholder="0.00000000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Transaction Fee</span>
|
|||
|
|
<input data-loan-fee value="3.00000000" readonly>
|
|||
|
|
</label>
|
|||
|
|
|
|||
|
|
<div class="loan-condition-note">
|
|||
|
|
Collateral can be claimed only after both limits are exceeded: the allowed
|
|||
|
|
number of missed payments and the maximum overdue value.
|
|||
|
|
</div>
|
|||
|
|
<div class="review-grid wide transfer-details">
|
|||
|
|
<div><span>Lender</span><b data-loan-lender>--</b></div>
|
|||
|
|
<div><span>Available to Lend</span><b data-loan-available>--</b></div>
|
|||
|
|
<div><span>Scheduled Repayment</span><b data-loan-total-repayment>--</b></div>
|
|||
|
|
<div><span>Signature State</span><b>Awaiting lender signature</b></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-actions hidden" data-loan-offer-actions>
|
|||
|
|
<button class="primary-button" type="button" data-loan-offer-save>Sign and Save Loan Offer</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="saved-transaction-path hidden" data-loan-saved-path-panel>
|
|||
|
|
<div>
|
|||
|
|
<span>Saved Loan Offer File</span>
|
|||
|
|
<input type="text" readonly data-loan-saved-path>
|
|||
|
|
</div>
|
|||
|
|
<button class="secondary-button" type="button" data-loan-copy-path>Copy Path</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message hidden" data-loan-offer-message></div>
|
|||
|
|
|
|||
|
|
<div class="form-grid compact hidden" data-loan-payment-form>
|
|||
|
|
<label class="wide">
|
|||
|
|
<span>Active Loan</span>
|
|||
|
|
<select data-loan-payment-contract>
|
|||
|
|
<option value="">Loading active loans...</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Payment Amount</span>
|
|||
|
|
<input data-loan-payment-value inputmode="decimal" placeholder="0.00000000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Miner Tip (1%)</span>
|
|||
|
|
<input data-loan-payment-tip readonly>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Transaction Fee</span>
|
|||
|
|
<input data-loan-payment-fee value="0.01000000" readonly>
|
|||
|
|
</label>
|
|||
|
|
<div class="loan-payment-warning hidden" data-loan-payment-warning></div>
|
|||
|
|
<div class="review-grid wide transfer-details">
|
|||
|
|
<div><span>Lender</span><b data-loan-payment-lender>--</b></div>
|
|||
|
|
<div><span>Loan Asset</span><b data-loan-payment-asset>--</b></div>
|
|||
|
|
<div><span>Scheduled Payment</span><b data-loan-payment-scheduled>--</b></div>
|
|||
|
|
<div><span>Confirmed Paid</span><b data-loan-payment-confirmed>--</b></div>
|
|||
|
|
<div><span>Pending Payments</span><b data-loan-payment-pending>--</b></div>
|
|||
|
|
<div><span>Remaining After Pending</span><b data-loan-payment-remaining>--</b></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-actions hidden" data-loan-payment-actions>
|
|||
|
|
<button class="secondary-button" type="button" data-loan-payment-save>Save Transaction</button>
|
|||
|
|
<button class="primary-button" type="button" data-loan-payment-broadcast>Broadcast Transaction</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message hidden" data-loan-payment-message></div>
|
|||
|
|
|
|||
|
|
<div class="form-grid compact hidden" data-collateral-claim-form>
|
|||
|
|
<label class="wide">
|
|||
|
|
<span>Claimable Collateral</span>
|
|||
|
|
<select data-collateral-claim-contract>
|
|||
|
|
<option value="">Loading claimable collateral...</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Transaction Fee</span>
|
|||
|
|
<input data-collateral-claim-fee value="3.00000000" readonly>
|
|||
|
|
</label>
|
|||
|
|
<div class="review-grid wide transfer-details">
|
|||
|
|
<div><span>Role</span><b data-collateral-claim-role>--</b></div>
|
|||
|
|
<div><span>Reason</span><b data-collateral-claim-reason>--</b></div>
|
|||
|
|
<div><span>Lender</span><b data-collateral-claim-lender>--</b></div>
|
|||
|
|
<div><span>Borrower</span><b data-collateral-claim-borrower>--</b></div>
|
|||
|
|
<div><span>Loan</span><b data-collateral-claim-loan>--</b></div>
|
|||
|
|
<div><span>Collateral</span><b data-collateral-claim-collateral>--</b></div>
|
|||
|
|
<div><span>Confirmed Paid</span><b data-collateral-claim-confirmed>--</b></div>
|
|||
|
|
<div><span>Remaining</span><b data-collateral-claim-remaining>--</b></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-actions hidden" data-collateral-claim-actions>
|
|||
|
|
<button class="secondary-button" type="button" data-collateral-claim-save>Save Transaction</button>
|
|||
|
|
<button class="primary-button" type="button" data-collateral-claim-broadcast>Broadcast Transaction</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message hidden" data-collateral-claim-message></div>
|
|||
|
|
|
|||
|
|
<div class="form-grid compact hidden" data-burn-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Asset to Burn</span>
|
|||
|
|
<select data-burn-asset></select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Amount</span>
|
|||
|
|
<input data-burn-amount inputmode="decimal" placeholder="0.00000000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Transaction Fee</span>
|
|||
|
|
<input data-burn-fee value="0.00010000" readonly>
|
|||
|
|
</label>
|
|||
|
|
<div class="review-grid wide transfer-details">
|
|||
|
|
<div><span>Burner</span><b data-burn-address>--</b></div>
|
|||
|
|
<div><span>Available</span><b data-burn-available>--</b></div>
|
|||
|
|
<div><span>Burn Type</span><b data-burn-type>--</b></div>
|
|||
|
|
<div><span>Fee</span><b data-burn-fee-label>0.00010000</b></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-actions hidden" data-burn-actions>
|
|||
|
|
<button class="secondary-button" type="button" data-burn-save>Save Transaction</button>
|
|||
|
|
<button class="primary-button" type="button" data-burn-broadcast>Broadcast Transaction</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message hidden" data-burn-message></div>
|
|||
|
|
|
|||
|
|
<div class="form-grid compact hidden" data-marketing-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Campaign ID</span>
|
|||
|
|
<input data-marketing-campaign type="number" min="0" placeholder="0">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Ad Type</span>
|
|||
|
|
<select data-marketing-ad-type>
|
|||
|
|
<option value="banner">Banner</option>
|
|||
|
|
<option value="social">Social</option>
|
|||
|
|
<option value="text">Text</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Keyword</span>
|
|||
|
|
<input data-marketing-keyword maxlength="40" placeholder="Up to 40 characters">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Displayed Location</span>
|
|||
|
|
<input data-marketing-displayed maxlength="100" placeholder="URL, location, or placement">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Impressions</span>
|
|||
|
|
<input data-marketing-impression type="number" min="0" max="255" value="0">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Clicks</span>
|
|||
|
|
<input data-marketing-click type="number" min="0" max="255" value="0">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Impression Value</span>
|
|||
|
|
<input data-marketing-impression-value inputmode="decimal" placeholder="0.00">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Click Value</span>
|
|||
|
|
<input data-marketing-click-value inputmode="decimal" placeholder="0.00">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Transaction Fee</span>
|
|||
|
|
<input data-marketing-fee value="1.00000000" readonly>
|
|||
|
|
</label>
|
|||
|
|
<div class="review-grid wide transfer-details">
|
|||
|
|
<div><span>Advertiser</span><b data-marketing-advertiser>--</b></div>
|
|||
|
|
<div><span>Fee</span><b data-marketing-fee-label>1.00000000</b></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-actions hidden" data-marketing-actions>
|
|||
|
|
<button class="secondary-button" type="button" data-marketing-save>Save Transaction</button>
|
|||
|
|
<button class="primary-button" type="button" data-marketing-broadcast>Broadcast Transaction</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message hidden" data-marketing-message></div>
|
|||
|
|
|
|||
|
|
<div class="form-grid compact hidden" data-vanity-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Vanity Name</span>
|
|||
|
|
<div class="input-with-button">
|
|||
|
|
<input data-vanity-name maxlength="20" placeholder="Letters only">
|
|||
|
|
<button class="secondary-button" type="button" data-vanity-check>Check Availability</button>
|
|||
|
|
</div>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Transaction Fee</span>
|
|||
|
|
<input data-vanity-fee value="5.00000000" readonly>
|
|||
|
|
</label>
|
|||
|
|
<div class="review-grid wide transfer-details">
|
|||
|
|
<div><span>Owner</span><b data-vanity-owner>--</b></div>
|
|||
|
|
<div><span>Vanity Address</span><b data-vanity-preview>--</b></div>
|
|||
|
|
<div><span>Fee</span><b data-vanity-fee-label>5.00000000</b></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="form-actions hidden" data-vanity-actions>
|
|||
|
|
<button class="secondary-button" type="button" data-vanity-save>Save Transaction</button>
|
|||
|
|
<button class="primary-button" type="button" data-vanity-broadcast>Broadcast Transaction</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message hidden" data-vanity-message></div>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<div class="transaction-review hidden" data-review-panel>
|
|||
|
|
<div class="review-grid" data-unbroadcast-review-grid></div>
|
|||
|
|
<pre class="transaction-json-preview" data-unbroadcast-json></pre>
|
|||
|
|
<div class="form-actions">
|
|||
|
|
<button class="secondary-button" type="button" data-unbroadcast-back>Back</button>
|
|||
|
|
<button class="secondary-button danger" type="button" data-unbroadcast-delete>Delete Local Copy</button>
|
|||
|
|
<button class="secondary-button" type="button" data-unbroadcast-sign>Sign Transaction</button>
|
|||
|
|
<button class="primary-button" type="button" data-unbroadcast-broadcast>Broadcast</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message" data-unbroadcast-review-message></div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<aside class="transaction-types panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Transaction Types</h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="transaction-type-list">
|
|||
|
|
<button class="transaction-type active" type="button" data-transaction-type="Transfer">Transfer</button>
|
|||
|
|
<button class="transaction-type" type="button" data-transaction-type="Create Token">Create Token</button>
|
|||
|
|
<button class="transaction-type" type="button" data-transaction-type="Issue More Tokens">Issue more Tokens</button>
|
|||
|
|
<button class="transaction-type" type="button" data-transaction-type="Create NFT">Create NFT</button>
|
|||
|
|
<button class="transaction-type" type="button" data-transaction-type="Swap">Swap</button>
|
|||
|
|
<button class="transaction-type" type="button" data-transaction-type="Create Loan">Create Loan</button>
|
|||
|
|
<button class="transaction-type" type="button" data-transaction-type="Loan Payment">Loan Payment</button>
|
|||
|
|
<button class="transaction-type" type="button" data-transaction-type="Collateral Claim">Collateral Claim</button>
|
|||
|
|
<button class="transaction-type" type="button" data-transaction-type="Burn">Burn</button>
|
|||
|
|
<button class="transaction-type" type="button" data-transaction-type="Marketing">Marketing</button>
|
|||
|
|
<button class="transaction-type" type="button" data-transaction-type="Vanity Address">Vanity Address</button>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="receive-view hidden" id="receive-view">
|
|||
|
|
<div class="receive-workspace">
|
|||
|
|
<div class="receive-main panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Receive</h2>
|
|||
|
|
<p>Share this address or create a payment request.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="receive-address-card">
|
|||
|
|
<span class="field-label">Active Address</span>
|
|||
|
|
<div class="copy-row">
|
|||
|
|
<code data-active-address>ca4001e5ace696310a696ce20bacb1d28e37045a.cltc</code>
|
|||
|
|
<button class="secondary-button" type="button" data-copy-address>Copy</button>
|
|||
|
|
</div>
|
|||
|
|
<span class="field-label">Vanity Address</span>
|
|||
|
|
<div class="copy-row">
|
|||
|
|
<code data-active-vanity>N/A</code>
|
|||
|
|
<button class="secondary-button" type="button" data-copy-vanity disabled>Copy</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="receive-request">
|
|||
|
|
<div class="qr-placeholder" data-payment-qr-wrap>
|
|||
|
|
<canvas data-payment-qr width="256" height="256" aria-label="Payment request QR"></canvas>
|
|||
|
|
<span data-payment-qr-label>Payment Request</span>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form class="request-form" data-payment-request-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Asset</span>
|
|||
|
|
<select data-payment-asset>
|
|||
|
|
<option>CLTC</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Requested Amount</span>
|
|||
|
|
<input data-payment-amount inputmode="decimal" placeholder="0.0000">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Contact Label</span>
|
|||
|
|
<input data-payment-label placeholder="Name or company for address book">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Payment URI</span>
|
|||
|
|
<input data-payment-uri readonly>
|
|||
|
|
</label>
|
|||
|
|
<div class="form-actions compact-actions">
|
|||
|
|
<button class="secondary-button" type="button" data-copy-payment-qr>Copy Payment Request QR</button>
|
|||
|
|
<button class="primary-button" type="button" data-copy-payment-uri>Copy Payment URI</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message" data-payment-message></div>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<aside class="receive-side panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Address Details</h2>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-list">
|
|||
|
|
<div><span>Wallet</span><b data-active-wallet-short>d65d...58d4</b></div>
|
|||
|
|
<div><span>Registration</span><b data-receive-registration>Registered</b></div>
|
|||
|
|
<div><span>Vanity</span><b data-active-vanity>goldenvault.cltc</b></div>
|
|||
|
|
<div><span>Network</span><b data-network-label>Testnet</b></div>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="history-view hidden" id="history-view">
|
|||
|
|
<div class="history-workspace panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Transaction History</h2>
|
|||
|
|
<p>Confirmed and submitted activity for the active address.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="history-tools">
|
|||
|
|
<input type="search" data-history-search placeholder="Search txid or type" autocomplete="off">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="history-table-wrap">
|
|||
|
|
<table class="history-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>Date</th>
|
|||
|
|
<th>Type</th>
|
|||
|
|
<th>Asset</th>
|
|||
|
|
<th>Counterparty</th>
|
|||
|
|
<th>Status</th>
|
|||
|
|
<th>Amount</th>
|
|||
|
|
<th>Fee</th>
|
|||
|
|
<th>Tx Hash</th>
|
|||
|
|
<th>Block</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody data-history-transactions></tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="history-card-list" data-history-cards></div>
|
|||
|
|
<div class="recent-transactions-state" data-history-state>Load a wallet to view transaction history.</div>
|
|||
|
|
<div class="history-footer">
|
|||
|
|
<div></div>
|
|||
|
|
<div class="history-footer-center">
|
|||
|
|
<span data-history-count></span>
|
|||
|
|
<nav class="history-pagination" data-history-pagination hidden aria-label="Transaction history pages">
|
|||
|
|
<button class="icon-button history-page-button" type="button" data-history-page="first" title="First page" aria-label="First page">|<</button>
|
|||
|
|
<button class="icon-button history-page-button" type="button" data-history-page="previous" title="Previous page" aria-label="Previous page"><</button>
|
|||
|
|
<label class="history-page-label">
|
|||
|
|
Page
|
|||
|
|
<input type="number" min="1" value="1" data-history-page-input aria-label="History page number">
|
|||
|
|
<span>of <b data-history-page-total>1</b></span>
|
|||
|
|
</label>
|
|||
|
|
<button class="icon-button history-page-button" type="button" data-history-page="next" title="Next page" aria-label="Next page">></button>
|
|||
|
|
<button class="icon-button history-page-button" type="button" data-history-page="last" title="Last page" aria-label="Last page">>|</button>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<button class="secondary-button" type="button" data-history-export-open>Export</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="assets-view hidden" id="assets-view">
|
|||
|
|
<div class="assets-workspace panel">
|
|||
|
|
<div class="panel-header assets-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Assets</h2>
|
|||
|
|
<p>Token catalog and balances for the active address.</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="asset-controls">
|
|||
|
|
<input data-assets-search type="search" value="" placeholder="Search assets">
|
|||
|
|
<select data-assets-sort>
|
|||
|
|
<option value="default">Holding first</option>
|
|||
|
|
<option value="balance">Largest balance</option>
|
|||
|
|
<option value="ticker">A-Z</option>
|
|||
|
|
<option value="created">Newest created</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="asset-filter-row">
|
|||
|
|
<button class="filter-pill active" type="button" data-assets-filter="all">All</button>
|
|||
|
|
<button class="filter-pill" type="button" data-assets-filter="holding">Holding</button>
|
|||
|
|
<button class="filter-pill" type="button" data-assets-filter="created">Created by me</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="portfolio-grid" data-assets-cards></div>
|
|||
|
|
<div class="assets-state" data-assets-state>Load a wallet to view assets.</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="nfts-view hidden" id="nfts-view">
|
|||
|
|
<div class="nfts-workspace">
|
|||
|
|
<div class="nft-main panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>NFTs</h2>
|
|||
|
|
<p>Owned NFT records for the active address.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="secondary-button" type="button" data-nfts-refresh>Refresh</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="nft-list" data-nfts-list></div>
|
|||
|
|
<div class="nft-footer">
|
|||
|
|
<div class="assets-state" data-nfts-state>Load a wallet to view NFTs.</div>
|
|||
|
|
<nav class="history-pagination" data-nfts-pagination hidden aria-label="NFT pages">
|
|||
|
|
<button class="icon-button history-page-button" type="button" data-nfts-page="first" title="First page" aria-label="First page">|<</button>
|
|||
|
|
<button class="icon-button history-page-button" type="button" data-nfts-page="previous" title="Previous page" aria-label="Previous page"><</button>
|
|||
|
|
<label class="history-page-label">
|
|||
|
|
<span>Page</span>
|
|||
|
|
<input type="number" min="1" value="1" data-nfts-page-input aria-label="NFT page number">
|
|||
|
|
<span>of <b data-nfts-page-total>1</b></span>
|
|||
|
|
</label>
|
|||
|
|
<button class="icon-button history-page-button" type="button" data-nfts-page="next" title="Next page" aria-label="Next page">></button>
|
|||
|
|
<button class="icon-button history-page-button" type="button" data-nfts-page="last" title="Last page" aria-label="Last page">>|</button>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<aside class="nft-config panel" data-nft-detail-panel>
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2 data-nft-detail-title>NFT Details</h2>
|
|||
|
|
<p data-nft-detail-subtitle>Select an owned NFT.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-list compact nft-detail-list">
|
|||
|
|
<div><span>Name</span><b data-nft-detail-name>--</b></div>
|
|||
|
|
<div><span>Asset</span><b data-nft-detail-asset>--</b></div>
|
|||
|
|
<div><span>Creator</span><b data-nft-detail-creator>--</b></div>
|
|||
|
|
<div><span>Genesis</span><b data-nft-detail-genesis>--</b></div>
|
|||
|
|
<div><span>Metadata</span><b data-nft-detail-metadata>--</b></div>
|
|||
|
|
</div>
|
|||
|
|
<div class="nft-metadata-summary" data-nft-metadata-summary></div>
|
|||
|
|
<div class="nft-provenance">
|
|||
|
|
<h3>Provenance</h3>
|
|||
|
|
<div data-nft-history></div>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="loans-view hidden" id="loans-view">
|
|||
|
|
<div class="loans-workspace">
|
|||
|
|
<div class="loan-main panel">
|
|||
|
|
<div class="panel-header loans-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Loans</h2>
|
|||
|
|
<p>Loan records grouped by lifecycle and wallet role.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="primary-button" type="button" data-loans-create>Create Loan</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="loan-controls">
|
|||
|
|
<input type="search" placeholder="Search loans" data-loans-search>
|
|||
|
|
<select data-loans-role-filter>
|
|||
|
|
<option value="all">All roles</option>
|
|||
|
|
<option value="lender">Lending</option>
|
|||
|
|
<option value="borrower">Borrowing</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="loan-filter-row">
|
|||
|
|
<button class="filter-pill active" type="button" data-loans-status-filter="all">All</button>
|
|||
|
|
<button class="filter-pill" type="button" data-loans-status-filter="active">Active</button>
|
|||
|
|
<button class="filter-pill" type="button" data-loans-status-filter="delinquent">Delinquent</button>
|
|||
|
|
<button class="filter-pill" type="button" data-loans-status-filter="inactive">Completed</button>
|
|||
|
|
<button class="secondary-button compact-button" type="button" data-loans-refresh>Refresh</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="loan-list" data-loans-list></div>
|
|||
|
|
<div class="subtle-state" data-loans-state>Load a wallet to view loans.</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<aside class="loan-detail panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Loan Details</h2>
|
|||
|
|
<p>Selected loan lifecycle.</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div class="loan-detail-grid" data-loan-detail-grid></div>
|
|||
|
|
|
|||
|
|
<div class="loan-timeline">
|
|||
|
|
<h3>Payment History</h3>
|
|||
|
|
<div class="loan-payment-table" data-loan-payment-history></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="loan-actions">
|
|||
|
|
<button class="secondary-button" type="button" data-loan-copy-contract>Copy Contract Hash</button>
|
|||
|
|
<button class="secondary-button" type="button" data-loan-make-payment>Make Payment</button>
|
|||
|
|
<button class="primary-button" type="button" data-loan-claim-collateral>Claim Collateral</button>
|
|||
|
|
</div>
|
|||
|
|
</aside>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="marketing-view hidden" id="marketing-view">
|
|||
|
|
<div class="history-workspace panel">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Marketing Campaigns</h2>
|
|||
|
|
<p>Campaign activity reported by an agency wallet.</p>
|
|||
|
|
</div>
|
|||
|
|
<form class="marketing-campaign-controls" data-marketing-campaign-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Agency Wallet</span>
|
|||
|
|
<input data-marketing-campaign-advertiser placeholder="Agency wallet address" autocomplete="off">
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Campaign ID</span>
|
|||
|
|
<input data-marketing-campaign-id inputmode="numeric" placeholder="0" autocomplete="off">
|
|||
|
|
</label>
|
|||
|
|
<button class="primary-button" type="submit" data-marketing-campaign-load>Load Campaign</button>
|
|||
|
|
</form>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="marketing-summary-grid">
|
|||
|
|
<div><span>Records</span> <div><b data-marketing-total-records>--</b></div></div>
|
|||
|
|
<div><span>Impressions</span> <div><b data-marketing-total-impressions>--</b></div></div>
|
|||
|
|
<div><span>Clicks</span> <div><b data-marketing-total-clicks>--</b></div></div>
|
|||
|
|
<div><span>Avg Impression Value</span> <div>$<b data-marketing-avg-impression-value>--</b></div></div>
|
|||
|
|
<div><span>Avg Click Value</span> <div>$<b data-marketing-avg-click-value>--</b></div></div>
|
|||
|
|
<div><span>Total Value</span> <div>$<b data-marketing-total-value>--</b></div></div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="history-table-wrap marketing-table-wrap">
|
|||
|
|
<table class="history-table marketing-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>Time</th>
|
|||
|
|
<th>Campaign</th>
|
|||
|
|
<th>Ad Type</th>
|
|||
|
|
<th>Keyword</th>
|
|||
|
|
<th>Displayed</th>
|
|||
|
|
<th>Impressions</th>
|
|||
|
|
<th>Clicks</th>
|
|||
|
|
<th>Impression Value</th>
|
|||
|
|
<th>Click Value</th>
|
|||
|
|
<th>Status</th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody data-marketing-campaign-rows></tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="history-card-list" data-marketing-campaign-cards></div>
|
|||
|
|
<div class="recent-transactions-state" data-marketing-campaign-state>Enter an agency wallet and campaign ID to load campaign activity.</div>
|
|||
|
|
<div class="history-footer">
|
|||
|
|
<div></div>
|
|||
|
|
<div class="history-footer-center">
|
|||
|
|
<span data-marketing-campaign-count></span>
|
|||
|
|
<nav class="history-pagination" data-marketing-campaign-pagination hidden aria-label="Marketing campaign pages">
|
|||
|
|
<button class="icon-button history-page-button" type="button" data-marketing-campaign-page="first" title="First page" aria-label="First page">|<</button>
|
|||
|
|
<button class="icon-button history-page-button" type="button" data-marketing-campaign-page="previous" title="Previous page" aria-label="Previous page"><</button>
|
|||
|
|
<label class="history-page-label">
|
|||
|
|
Page
|
|||
|
|
<input type="number" min="1" value="1" data-marketing-campaign-page-input aria-label="Marketing campaign page number">
|
|||
|
|
<span>of <b data-marketing-campaign-page-total>1</b></span>
|
|||
|
|
</label>
|
|||
|
|
<button class="icon-button history-page-button" type="button" data-marketing-campaign-page="next" title="Next page" aria-label="Next page">></button>
|
|||
|
|
<button class="icon-button history-page-button" type="button" data-marketing-campaign-page="last" title="Last page" aria-label="Last page">>|</button>
|
|||
|
|
</nav>
|
|||
|
|
</div>
|
|||
|
|
<button class="secondary-button" type="button" data-marketing-campaign-refresh>Refresh</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="addressbook-view hidden" id="addressbook-view">
|
|||
|
|
<div class="addressbook-workspace panel">
|
|||
|
|
<div class="panel-header addressbook-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Address Book</h2>
|
|||
|
|
<p>Contacts discovered from transactions and saved manually.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="secondary-button" type="button" data-address-book-refresh-vanity>Refresh Vanity</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="addressbook-controls">
|
|||
|
|
<input data-address-book-search type="search" placeholder="Search label, vanity, or address">
|
|||
|
|
<select data-address-book-sort>
|
|||
|
|
<option value="latest">Latest Transactions</option>
|
|||
|
|
<option value="label">Label A-Z</option>
|
|||
|
|
<option value="vanity">Vanity A-Z</option>
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="addressbook-table-wrap">
|
|||
|
|
<table class="addressbook-table">
|
|||
|
|
<thead>
|
|||
|
|
<tr>
|
|||
|
|
<th>Label</th>
|
|||
|
|
<th>Vanity</th>
|
|||
|
|
<th>Address</th>
|
|||
|
|
<th>Last Transaction</th>
|
|||
|
|
<th></th>
|
|||
|
|
</tr>
|
|||
|
|
</thead>
|
|||
|
|
<tbody data-address-book-rows></tbody>
|
|||
|
|
</table>
|
|||
|
|
</div>
|
|||
|
|
<div class="addressbook-card-list" data-address-book-cards></div>
|
|||
|
|
<div class="addressbook-state" data-address-book-state></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="settings-view hidden" id="settings-view">
|
|||
|
|
<div class="settings-workspace panel">
|
|||
|
|
<div class="panel-header settings-header">
|
|||
|
|
<div>
|
|||
|
|
<h2>Settings</h2>
|
|||
|
|
<p>Wallet behavior, nodes, storage, gateways, and security.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="primary-button" type="button" data-settings-save>Save Settings</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="settings-grid">
|
|||
|
|
<section class="settings-section">
|
|||
|
|
<h3>Wallet</h3>
|
|||
|
|
<label>
|
|||
|
|
<span>Default Wallet Folder</span>
|
|||
|
|
<div class="settings-path-row">
|
|||
|
|
<input data-settings-wallet-path>
|
|||
|
|
<button class="secondary-button" type="button" data-settings-browse="wallet_path" data-settings-browse-kind="folder">...</button>
|
|||
|
|
</div>
|
|||
|
|
</label>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="settings-section">
|
|||
|
|
<h3>Wallet Backup</h3>
|
|||
|
|
<button class="secondary-button" type="button" data-backup-wallet-image>Backup Wallet Image (PNG)</button>
|
|||
|
|
<button class="secondary-button" type="button" data-backup-private-key>Backup Wallet Private Key (TXT)</button>
|
|||
|
|
<button class="secondary-button" type="button" data-print-private-key>Print Wallet Private Key and Encryption Key</button>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="settings-section">
|
|||
|
|
<h3>Broadcast Nodes</h3>
|
|||
|
|
<label>
|
|||
|
|
<span>Default Node</span>
|
|||
|
|
<input data-settings-default-node>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Saved Nodes</span>
|
|||
|
|
<textarea data-settings-saved-nodes></textarea>
|
|||
|
|
</label>
|
|||
|
|
<button class="secondary-button" type="button" data-settings-test-node>Test Selected Node</button>
|
|||
|
|
<div class="startup-message hidden" data-settings-node-test-status></div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="settings-section">
|
|||
|
|
<h3>Storage</h3>
|
|||
|
|
<label>
|
|||
|
|
<span>Unbroadcast Transactions</span>
|
|||
|
|
<div class="settings-path-row">
|
|||
|
|
<input data-settings-unbroadcast-path>
|
|||
|
|
<button class="secondary-button" type="button" data-settings-browse="unbroadcast_transactions_path" data-settings-browse-kind="folder">...</button>
|
|||
|
|
</div>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Address Book</span>
|
|||
|
|
<div class="settings-path-row">
|
|||
|
|
<input data-settings-address-book-path>
|
|||
|
|
<button class="secondary-button" type="button" data-settings-browse="address_book_path" data-settings-browse-kind="file">...</button>
|
|||
|
|
</div>
|
|||
|
|
</label>
|
|||
|
|
<button class="secondary-button" type="button" data-settings-cache-open>Clear Local Cache</button>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="settings-section">
|
|||
|
|
<h3>IPFS</h3>
|
|||
|
|
<label>
|
|||
|
|
<span>IPFS Gateway</span>
|
|||
|
|
<input data-settings-ipfs-gateway>
|
|||
|
|
</label>
|
|||
|
|
<p class="settings-help">
|
|||
|
|
Check https://ipfs.github.io/public-gateway-checker/ for active public gateways.
|
|||
|
|
Active gateways can still fail to return specific IPFS data if they cannot find or stream a provider.
|
|||
|
|
</p>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section class="settings-section">
|
|||
|
|
<h3>Security</h3>
|
|||
|
|
<label>
|
|||
|
|
<span>Auto-lock Timeout</span>
|
|||
|
|
<select data-settings-auto-lock-timeout>
|
|||
|
|
<option>5 minutes</option>
|
|||
|
|
<option>15 minutes</option>
|
|||
|
|
<option>30 minutes</option>
|
|||
|
|
<option>Never</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<label>
|
|||
|
|
<span>Clipboard Clear Timeout</span>
|
|||
|
|
<select data-settings-clipboard-timeout>
|
|||
|
|
<option>30 seconds</option>
|
|||
|
|
<option>60 seconds</option>
|
|||
|
|
<option>Never</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<label class="check-row">
|
|||
|
|
<input type="checkbox" data-settings-require-key>
|
|||
|
|
<span>Require wallet key before signing</span>
|
|||
|
|
</label>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message" data-settings-message></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</main>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<nav class="mobile-nav" aria-label="Mobile navigation">
|
|||
|
|
<button class="mobile-item active" data-view="dashboard" type="button">*<span>Dashboard</span></button>
|
|||
|
|
<button class="mobile-item" data-view="receive" type="button"><<span>Receive</span></button>
|
|||
|
|
<button class="mobile-item" data-view="send" type="button">><span>Txs</span></button>
|
|||
|
|
<button class="mobile-item" data-view="history" type="button">=<span>History</span></button>
|
|||
|
|
<button class="mobile-item" data-mobile-more type="button" aria-expanded="false">*<span>More</span></button>
|
|||
|
|
</nav>
|
|||
|
|
|
|||
|
|
<div class="mobile-more-backdrop hidden" data-mobile-more-backdrop></div>
|
|||
|
|
<section class="mobile-more-sheet hidden" aria-label="More wallet pages" data-mobile-more-sheet>
|
|||
|
|
<button class="mobile-more-item" data-view="assets" type="button">
|
|||
|
|
<span>o</span>
|
|||
|
|
<b>Assets</b>
|
|||
|
|
</button>
|
|||
|
|
<button class="mobile-more-item" data-view="marketing" type="button">
|
|||
|
|
<span>%</span>
|
|||
|
|
<b>Marketing</b>
|
|||
|
|
</button>
|
|||
|
|
<button class="mobile-more-item" data-view="addressbook" type="button">
|
|||
|
|
<span>@</span>
|
|||
|
|
<b>Address Book</b>
|
|||
|
|
</button>
|
|||
|
|
<button class="mobile-more-item" data-view="settings" type="button">
|
|||
|
|
<span>*</span>
|
|||
|
|
<b>Settings</b>
|
|||
|
|
</button>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<div class="modal-backdrop hidden" data-node-modal>
|
|||
|
|
<section class="node-modal" role="dialog" aria-modal="true" aria-labelledby="node-modal-title">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2 id="node-modal-title">Node Information</h2>
|
|||
|
|
<p>Broadcast endpoint details</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="info-button close" type="button" aria-label="Close node information" data-node-close>x</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="status-list">
|
|||
|
|
<div><span>Broadcast Node</span><b data-node-info-node>--</b></div>
|
|||
|
|
<div><span>Node Height</span><b data-node-info-height>--</b></div>
|
|||
|
|
<div><span>Node Time</span><b data-node-info-time>--</b></div>
|
|||
|
|
<div><span>Last Checked</span><b data-node-info-last-checked>--</b></div>
|
|||
|
|
<div><span>Largest Mempool Fee</span><b data-node-info-largest-fee>--</b></div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="modal-backdrop hidden" data-wallet-switch-modal>
|
|||
|
|
<section class="node-modal" role="dialog" aria-modal="true" aria-labelledby="wallet-switch-title">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2 id="wallet-switch-title">Switch Wallet</h2>
|
|||
|
|
<p data-wallet-switch-name>Unlock the selected wallet</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="info-button close" type="button" aria-label="Cancel wallet switch" data-wallet-switch-close>x</button>
|
|||
|
|
</div>
|
|||
|
|
<form class="startup-form modal-form" data-wallet-switch-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Wallet Encryption Key</span>
|
|||
|
|
<input type="password" autocomplete="current-password" data-wallet-switch-key>
|
|||
|
|
</label>
|
|||
|
|
<div class="startup-form-actions">
|
|||
|
|
<button class="secondary-button" type="button" data-wallet-switch-cancel>Cancel</button>
|
|||
|
|
<button class="primary-button" type="submit" data-wallet-switch-submit>Switch Wallet</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message" data-wallet-switch-message></div>
|
|||
|
|
</form>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="modal-backdrop hidden" data-history-export-modal>
|
|||
|
|
<section class="node-modal" role="dialog" aria-modal="true" aria-labelledby="history-export-title">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2 id="history-export-title">Export History</h2>
|
|||
|
|
<p>Choose a file format for the active address.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="info-button close" type="button" aria-label="Close history export" data-history-export-close>x</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="history-export-options">
|
|||
|
|
<button class="secondary-button" type="button" data-history-export-format="json">JSON</button>
|
|||
|
|
<button class="secondary-button" type="button" data-history-export-format="xml">XML</button>
|
|||
|
|
<button class="secondary-button" type="button" data-history-export-format="csv">CSV</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message" data-history-export-message></div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="modal-backdrop hidden" data-backup-key-modal>
|
|||
|
|
<section class="node-modal" role="dialog" aria-modal="true" aria-labelledby="backup-key-title">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2 id="backup-key-title" data-backup-key-title>Wallet Backup</h2>
|
|||
|
|
<p data-backup-key-copy>Enter the wallet encryption key.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="info-button close" type="button" aria-label="Cancel wallet backup" data-backup-key-close>x</button>
|
|||
|
|
</div>
|
|||
|
|
<form class="startup-form modal-form" data-backup-key-form>
|
|||
|
|
<label>
|
|||
|
|
<span>Wallet Encryption Key</span>
|
|||
|
|
<input type="password" autocomplete="current-password" data-backup-key-input>
|
|||
|
|
</label>
|
|||
|
|
<div class="startup-form-actions">
|
|||
|
|
<button class="secondary-button" type="button" data-backup-key-cancel>Cancel</button>
|
|||
|
|
<button class="primary-button" type="submit" data-backup-key-submit>Continue</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message" data-backup-key-message></div>
|
|||
|
|
</form>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="modal-backdrop hidden" data-cache-clear-modal>
|
|||
|
|
<section class="node-modal" role="dialog" aria-modal="true" aria-labelledby="cache-clear-title">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2 id="cache-clear-title">Clear Local Cache</h2>
|
|||
|
|
<p>Choose exactly which local wallet data to remove.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="info-button close" type="button" aria-label="Close cache clearing" data-cache-clear-close>x</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="cache-clear-options">
|
|||
|
|
<button class="secondary-button" type="button" data-cache-clear-kind="history">Clear transaction history</button>
|
|||
|
|
<button class="secondary-button" type="button" data-cache-clear-kind="nft">Clear NFT media</button>
|
|||
|
|
<button class="secondary-button" type="button" data-cache-clear-kind="nft_details">Clear NFT details</button>
|
|||
|
|
<button class="secondary-button danger" type="button" data-cache-clear-kind="address_book">Clear address book</button>
|
|||
|
|
</div>
|
|||
|
|
<div class="startup-message" data-cache-clear-message></div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="modal-backdrop nft-instructions-backdrop hidden" data-nft-instructions-modal>
|
|||
|
|
<section class="node-modal nft-instructions-modal" role="dialog" aria-modal="true" aria-labelledby="nft-instructions-title">
|
|||
|
|
<div class="panel-header">
|
|||
|
|
<div>
|
|||
|
|
<h2 id="nft-instructions-title">NFT Metadata Instructions</h2>
|
|||
|
|
<p>Prepare metadata before creating the NFT transaction.</p>
|
|||
|
|
</div>
|
|||
|
|
<button class="info-button close" type="button" aria-label="Close NFT instructions" data-nft-instructions-close>x</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="nft-instructions-body">
|
|||
|
|
<section>
|
|||
|
|
<h3>Hosting</h3>
|
|||
|
|
<p>Contractless records the metadata CID, but it does not provide IPFS hosting. Upload and pin the metadata JSON, plus any images or media, with a hosting provider before creating the NFT.</p>
|
|||
|
|
<div class="nft-hosting-links">
|
|||
|
|
<a href="https://www.pinata.cloud/" target="_blank" rel="noreferrer">Pinata</a>
|
|||
|
|
<a href="https://filebase.com/" target="_blank" rel="noreferrer">Filebase</a>
|
|||
|
|
<a href="https://thirdweb.com/storage" target="_blank" rel="noreferrer">thirdweb Storage</a>
|
|||
|
|
<a href="https://www.lighthouse.storage/" target="_blank" rel="noreferrer">Lighthouse</a>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h3>Single Image NFT</h3>
|
|||
|
|
<p>For one NFT, upload the image first, then upload a JSON file like this. Use the metadata JSON CID in the wallet's IPFS CID field.</p>
|
|||
|
|
<pre><code>{
|
|||
|
|
"name": "Example Artwork #1",
|
|||
|
|
"description": "A short description of the NFT.",
|
|||
|
|
"image": "ipfs://IMAGE_CID/example.png",
|
|||
|
|
"external_url": "https://example.com/nft/1",
|
|||
|
|
"attributes": [
|
|||
|
|
{ "trait_type": "Background", "value": "Blue" },
|
|||
|
|
{ "trait_type": "Edition", "value": "1 of 1" }
|
|||
|
|
]
|
|||
|
|
}</code></pre>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h3>Collection / Series</h3>
|
|||
|
|
<p>For a series, pin one parent folder that contains both the metadata folder and the images folder. Use the CID of that parent folder in the wallet's IPFS CID field. Do not use the CID for one numbered JSON file, and do not use the CID for the images folder alone.</p>
|
|||
|
|
<pre><code>collection-root/ <- use this folder CID in the transaction
|
|||
|
|
metadata/
|
|||
|
|
1.json
|
|||
|
|
2.json
|
|||
|
|
3.json
|
|||
|
|
|
|||
|
|
images/
|
|||
|
|
1.png
|
|||
|
|
2.png
|
|||
|
|
3.png</code></pre>
|
|||
|
|
<p>From that parent CID, the wallet can load metadata/1.json, metadata/2.json, and the matching image paths. Each metadata file should use the same single NFT format, with item-specific names, images, and traits.</p>
|
|||
|
|
<pre><code>{
|
|||
|
|
"name": "Example Collection #1",
|
|||
|
|
"description": "Item 1 from Example Collection.",
|
|||
|
|
"image": "ipfs://PARENT_FOLDER_CID/images/1.png",
|
|||
|
|
"attributes": [
|
|||
|
|
{ "trait_type": "Background", "value": "Blue" },
|
|||
|
|
{ "trait_type": "Rarity", "value": "Common" }
|
|||
|
|
]
|
|||
|
|
}</code></pre>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section>
|
|||
|
|
<h3>RWA / Non-Image NFT</h3>
|
|||
|
|
<p>For real-world assets or non-image records, keep the common fields and place asset-specific details under attributes or a contractless object.</p>
|
|||
|
|
<pre><code>{
|
|||
|
|
"name": "Equipment Certificate #42",
|
|||
|
|
"description": "Ownership record for a physical asset.",
|
|||
|
|
"image": "ipfs://IMAGE_CID/certificate-preview.png",
|
|||
|
|
"external_url": "https://example.com/certificates/42",
|
|||
|
|
"attributes": [
|
|||
|
|
{ "trait_type": "Asset Type", "value": "Equipment" },
|
|||
|
|
{ "trait_type": "Serial Number", "value": "EQ-2026-0042" }
|
|||
|
|
],
|
|||
|
|
"contractless": {
|
|||
|
|
"metadata_type": "rwa",
|
|||
|
|
"issuer": "Example Agency",
|
|||
|
|
"document": "ipfs://DOCUMENT_CID/asset-record.pdf"
|
|||
|
|
}
|
|||
|
|
}</code></pre>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script src="js/app_state.js"></script>
|
|||
|
|
<script src="js/dashboard_network.js"></script>
|
|||
|
|
<script src="js/address_book.js"></script>
|
|||
|
|
<script src="js/transaction_history.js"></script>
|
|||
|
|
<script src="js/history_page.js"></script>
|
|||
|
|
<script src="js/assets_page.js"></script>
|
|||
|
|
<script src="js/nfts_page.js"></script>
|
|||
|
|
<script src="js/loans_page.js"></script>
|
|||
|
|
<script src="js/marketing_campaign_page.js"></script>
|
|||
|
|
<script src="js/receive_page.js"></script>
|
|||
|
|
<script src="js/dashboard_balance_registration.js"></script>
|
|||
|
|
<script src="js/transfer_form.js"></script>
|
|||
|
|
<script src="js/create_token_form.js"></script>
|
|||
|
|
<script src="js/issue_token_form.js"></script>
|
|||
|
|
<script src="js/create_nft_form.js"></script>
|
|||
|
|
<script src="js/swap_offer_form.js"></script>
|
|||
|
|
<script src="js/loan_offer_form.js"></script>
|
|||
|
|
<script src="js/loan_payment_form.js"></script>
|
|||
|
|
<script src="js/collateral_claim_form.js"></script>
|
|||
|
|
<script src="js/burn_form.js"></script>
|
|||
|
|
<script src="js/marketing_form.js"></script>
|
|||
|
|
<script src="js/vanity_address_form.js"></script>
|
|||
|
|
<script src="js/unbroadcast_transactions.js"></script>
|
|||
|
|
<script src="js/wallet_session.js"></script>
|
|||
|
|
<script src="js/startup_forms.js"></script>
|
|||
|
|
<script src="js/settings_page.js"></script>
|
|||
|
|
<script src="js/navigation_actions.js"></script>
|
|||
|
|
<script src="js/modals_events.js"></script>
|
|||
|
|
</body>
|
|||
|
|
</html>
|