Dash 常用 HTML 组件
下面是一套 Dash 常用 HTML 组件库，专为 Dash 支付、钱包集成、Dash Platform 应用 设计，兼容 DashJS + DAPI，支持 InstantSend、二维码、用户名（DPNS）、联系人（DashPay） 等功能。
1. 基础引入（CDN 版）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Dash 应用</title>
<!-- DashJS SDK -->
<script src="https://cdn.jsdelivr.net/npm/dash@4.0.0/dist/dash.min.js"></script>
<!-- QRCode.js -->
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<!-- 样式（可选） -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.dash-btn { background: #008DE4; color: white; }
.dash-btn:hover { background: #006bb3; }
.qr-container { text-align: center; margin: 20px 0; }
</style>
</head>
<body>2. 常用 HTML 组件
1. 余额显示组件
<div class="card">
<div class="card-body text-center">
<h5>钱包余额</h5>
<h3 id="balance">加载中...</h3>
<small class="text-muted" id="address"></small>
</div>
</div>
<script>
async function showBalance() {
const client = new Dash.Client({ network: 'testnet', wallet: { mnemonic: 'your-mnemonic-here' } });
const account = await client.wallet.getAccount();
const balance = account.getTotalBalance() / 1e8;
const address = account.getUnusedAddress().address;
document.getElementById('balance').textContent = `${balance} DASH`;
document.getElementById('address').textContent = address;
}
showBalance();
</script>2. 接收二维码组件
<div class="qr-container">
<h5>扫描接收 DASH</h5>
<div id="qrcode"></div>
<p><code id="receive-address"></code></p>
</div>
<script>
async function generateQR() {
const client = new Dash.Client({ network: 'testnet', wallet: { mnemonic: 'your-mnemonic-here' } });
const account = await client.wallet.getAccount();
const address = account.getUnusedAddress().address;
document.getElementById('receive-address').textContent = address;
new QRCode(document.getElementById("qrcode"), {
text: address,
width: 200,
height: 200,
colorDark: "#008DE4",
colorLight: "#ffffff"
});
}
generateQR();
</script>3. 发送 DASH 表单
<div class="card mt-4">
<div class="card-body">
<h5>发送 DASH</h5>
<form id="sendForm">
<div class="mb-3">
<label>收款地址或用户名</label>
<input type="text" class="form-control" id="to" placeholder="yP... 或 alice.dash" required />
</div>
<div class="mb-3">
<label>金额 (DASH)</label>
<input type="number" step="0.00000001" class="form-control" id="amount" required />
</div>
<div class="form-check mb-3">
<input type="checkbox" class="form-check-input" id="instantsend" checked />
<label class="form-check-label">InstantSend（1秒确认）</label>
</div>
<button type="submit" class="btn dash-btn w-100">发送</button>
<div id="txResult" class="mt-3"></div>
</form>
</div>
</div>
<script>
document.getElementById('sendForm').onsubmit = async (e) => {
e.preventDefault();
const to = document.getElementById('to').value.trim();
const amount = parseFloat(document.getElementById('amount').value);
const instant = document.getElementById('instantsend').checked;
const client = new Dash.Client({ network: 'testnet', wallet: { mnemonic: 'your-mnemonic-here' } });
const account = await client.wallet.getAccount();
try {
const tx = account.createTransaction({
recipient: to,
satoshis: Math.floor(amount * 1e8),
instantSend: instant
});
const txid = await account.broadcastTransaction(tx);
document.getElementById('txResult').innerHTML = `
<div class="alert alert-success">
发送成功！TXID: <a href="https://testnet-insight.dashevo.org/insight/tx/${txid}" target="_blank">${txid.slice(0,16)}...</a>
</div>`;
} catch (err) {
document.getElementById('txResult').innerHTML = `<div class="alert alert-danger">${err.message}</div>`;
}
};
</script>4. DashPay 联系人选择器（用户名）
<div class="mb-3">
<label>选择联系人（DashPay）</label>
<select class="form-select" id="contactSelect">
<option value="">加载联系人...</option>
</select>
</div>
<script>
async function loadContacts() {
const client = new Dash.Client({ network: 'testnet', wallet: { mnemonic: 'your-mnemonic-here' } });
const platform = client.platform;
await platform.initialize();
const identity = await platform.identities.get((await client.wallet.getAccount()).getIdentityIds()[0]);
const contacts = await platform.names.search('contact', 'dashpay');
const select = document.getElementById('contactSelect');
select.innerHTML = '<option value="">选择联系人</option>';
contacts.forEach(c => {
const option = document.createElement('option');
option.value = c.data.to;
option.textContent = `${c.label} (${c.data.to.slice(0,10)}...)`;
select.appendChild(option);
});
select.onchange = () => {
document.getElementById('to').value = select.value;
};
}
loadContacts();
</script>5. 交易历史表格
<div class="card mt-4">
<div class="card-body">
<h5>最近交易</h5>
<div class="table-responsive">
<table class="table table-sm" id="txTable">
<thead><tr><th>时间</th><th>TXID</th><th>金额</th></tr></thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
<script>
async function loadTransactions() {
const client = new Dash.Client({ network: 'testnet', wallet: { mnemonic: 'your-mnemonic-here' } });
const account = await client.wallet.getAccount();
const address = account.getUnusedAddress().address;
const summary = await client.getDAPIClient().core.getAddressSummary(address);
const tbody = document.querySelector('#txTable tbody');
tbody.innerHTML = '';
(summary.transactions || []).slice(0, 10).forEach(tx => {
const date = new Date(tx.time * 1000).toLocaleString();
const amount = (tx.value / 1e8).toFixed(8);
const row = `<tr>
<td>${date}</td>
<td><a href="https://testnet-insight.dashevo.org/insight/tx/${tx.txid}" target="_blank">${tx.txid.slice(0,12)}...</a></td>
<td class="${amount > 0 ? 'text-success' : 'text-danger'}">${amount > 0 ? '+' : ''}${amount} DASH</td>
</tr>`;
tbody.innerHTML += row;
});
}
loadTransactions();
setInterval(loadTransactions, 30000); // 每30秒刷新
</script>6. 一键复制地址按钮
<div class="input-group mb-3">
<input type="text" class="form-control" id="copyAddress" readonly />
<button class="btn dash-btn" onclick="copyToClipboard()">复制</button>
</div>
<script>
function copyToClipboard() {
const input = document.getElementById('copyAddress');
input.select();
document.execCommand('copy');
alert('地址已复制！');
}
</script>7. 完整示例页面（复制即用）
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<title>Dash 支付面板</title>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<script src="https://cdn.jsdelivr.net/npm/dash@4.0.0/dist/dash.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/qrcode@1.5.3/build/qrcode.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>.dash-btn{background:#008DE4;color:#fff}.dash-btn:hover{background:#006bb3}</style>
</head>
<body class="container py-4">
<h1 class="text-center mb-4">Dash 支付应用</h1>
<!-- 余额 -->
<div class="card mb-3"><div class="card-body text-center">
<h5>余额</h5>
<h3 id="balance">加载中...</h3>
<small id="address"></small>
</div></div>
<!-- 接收二维码 -->
<div class="text-center mb-4">
<h5>接收 DASH</h5>
<div id="qrcode" class="d-inline-block"></div>
<p><code id="receive-address"></code></p>
</div>
<!-- 发送表单 -->
<div class="card mb-4"><div class="card-body">
<h5>发送 DASH</h5>
<form id="sendForm">
<input type="text" class="form-control mb-2" id="to" placeholder="地址或 alice.dash" required />
<input type="number" step="0.00000001" class="form-control mb-2" id="amount" placeholder="金额" required />
<div class="form-check mb-2">
<input type="checkbox" class="form-check-input" id="instantsend" checked />
<label class="form-check-label">InstantSend</label>
</div>
<button type="submit" class="btn dash-btn w-100">发送</button>
<div id="txResult"></div>
</form>
</div></div>
<!-- 交易历史 -->
<div class="card"><div class="card-body">
<h5>最近交易</h5>
<table class="table table-sm" id="txTable">
<thead><tr><th>时间</th><th>TXID</th><th>金额</th></tr></thead>
<tbody></tbody>
</table>
</div></div>
<script>
// 替换为你的测试网助记词
const MNEMONIC = 'abandon ... art';
const client = new Dash.Client({ network: 'testnet', wallet: { mnemonic: MNEMONIC } });
// 初始化所有组件
async function init() {
const account = await client.wallet.getAccount();
const address = account.getUnusedAddress().address;
const balance = account.getTotalBalance() / 1e8;
document.getElementById('balance').textContent = `${balance} DASH`;
document.getElementById('address').textContent = address;
document.getElementById('receive-address').textContent = address;
new QRCode(document.getElementById("qrcode"), { text: address, width: 180, height: 180, colorDark: "#008DE4" });
// 发送
document.getElementById('sendForm').onsubmit = async (e) => {
e.preventDefault();
const to = document.getElementById('to').value;
const amount = parseFloat(document.getElementById('amount').value);
const tx = account.createTransaction({ recipient: to, satoshis: amount * 1e8, instantSend: true });
const txid = await account.broadcastTransaction(tx);
document.getElementById('txResult').innerHTML = `<div class="alert alert-success">成功！<a href="https://testnet-insight.dashevo.org/insight/tx/${txid}" target="_blank">${txid.slice(0,16)}...</a></div>`;
init(); // 刷新
};
// 交易
const summary = await client.getDAPIClient().core.getAddressSummary(address);
const tbody = document.querySelector('#txTable tbody');
(summary.transactions || []).slice(0, 5).forEach(tx => {
const date = new Date(tx.time * 1000).toLocaleString();
const amount = (tx.value / 1e8).toFixed(6);
tbody.innerHTML += `<tr><td>${date}</td><td><a href="https://testnet-insight.dashevo.org/insight/tx/${tx.txid}" target="_blank">${tx.txid.slice(0,10)}...</a></td><td class="${amount>0?'text-success':'text-danger'}">${amount>0?'+' : ''}${amount}</td></tr>`;
});
}
init();
</script>
</body>
</html>组件汇总表
| 组件 | 功能 | 关键技术 |
|---|---|---|
| 余额显示 | 实时余额 | account.getTotalBalance() |
| 接收二维码 | 扫码收款 | QRCode.js |
| 发送表单 | InstantSend | createTransaction({ instantSend: true }) |
| 联系人选择 | DashPay 用户名 | platform.names.search() |
| 交易历史 | 链上记录 | core.getAddressSummary() |
| 复制按钮 | 一键复制 | document.execCommand('copy') |
立即测试：
将上述完整 HTML 保存为 dash.html，用浏览器打开，替换 MNEMONIC 为测试网钱包助记词即可运行！
需要我打包成 NPM 组件库、React/Vue 版本，或集成到 WordPress 吗？ 告诉我！