159 lines
5.7 KiB
HTML
159 lines
5.7 KiB
HTML
<html>
|
|
|
|
<head>
|
|
<title>test</title>
|
|
<style>
|
|
body {
|
|
background-color: grey;
|
|
}
|
|
|
|
table,
|
|
tr,
|
|
td,
|
|
th {
|
|
border: 1px solid black;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="lib.js"></script>
|
|
<script type="text/javascript" src="lib_btc.js"></script>
|
|
</head>
|
|
|
|
<body>
|
|
<form id="generate-address">
|
|
<fieldset>
|
|
<legend>generate-address</legend>
|
|
<input type="button" value="generate" onclick="generateNew();">
|
|
Address: <input name="address" type="text" placeholder="Address" disabled />
|
|
PrivateKey: <input name="private" type="text" placeholder="Private-Key" disabled />
|
|
</fieldset>
|
|
</form>
|
|
<form id="retrieve-address">
|
|
<fieldset>
|
|
<legend>retrieve-address</legend>
|
|
<input name="private" type="text" placeholder="Private-Key" />
|
|
<input type="button" value="retrieve" onclick="retrieveAddress();">
|
|
Address: <input name="address" type="text" placeholder="Address" disabled />
|
|
</fieldset>
|
|
</form>
|
|
<form id="send-tx">
|
|
<fieldset>
|
|
<legend>send-tx</legend>
|
|
<input name="sender" type="text" placeholder="Sender" />
|
|
<input name="receiver" type="text" placeholder="Receiver" />
|
|
<input name="amount" type="number" placeholder="Amount" />
|
|
<input name="fee" type="number" placeholder="fee" step="0.0001" />
|
|
<input type="button" value="send" onclick="sendTx();">
|
|
</fieldset>
|
|
</form>
|
|
<form id="address-details">
|
|
<fieldset>
|
|
<legend>address-details</legend>
|
|
<input name="address" type="text" placeholder="Address" />
|
|
<input type="button" value="balance" onclick="checkBalance();">
|
|
<input type="button" value="details" onclick="viewAddress();">
|
|
<div>Balance: <input name="balance" disabled /></div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th></th>
|
|
<th>address</th>
|
|
<th>amount</th>
|
|
<th>time</th>
|
|
<th>txid</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="view-details"></tbody>
|
|
</table>
|
|
</fieldset>
|
|
</form>
|
|
</body>
|
|
<script>
|
|
function generateNew() {
|
|
let newKeys = btc_api.newKeys;
|
|
let form = document.forms['generate-address'];
|
|
form['private'].value = newKeys.privkey;
|
|
form['address'].value = newKeys.address;
|
|
}
|
|
|
|
function retrieveAddress() {
|
|
let form = document.forms['retrieve-address'];
|
|
form['address'].value = btc_api.address(form['private'].value);
|
|
}
|
|
|
|
function checkBalance() {
|
|
let form = document.forms['address-details'];
|
|
let address = form["address"].value;
|
|
btc_api.getBalance(address)
|
|
.then(result => form["balance"].value = result)
|
|
.catch(error => console.error(error))
|
|
}
|
|
|
|
function sendTx() {
|
|
let form = document.forms['send-tx'];
|
|
let sender = form["sender"].value,
|
|
receiver = form["receiver"].value,
|
|
amount = parseFloat(form["amount"].value),
|
|
fee = parseFloat(form["fee"].value);
|
|
let privKey = prompt("Enter Private Key:");
|
|
btc_api.sendTx(sender, privKey, receiver, amount, fee).then(result => {
|
|
console.log(result);
|
|
alert("transaction id: " + result.txid);
|
|
}).catch(error => console.error(error))
|
|
}
|
|
|
|
function viewAddress() {
|
|
let form = document.forms['address-details']
|
|
let address = form['address'].value;
|
|
let table = document.getElementById("view-details");
|
|
table.innerHTML = '';
|
|
form['balance'].value = '';
|
|
getAddressDetails(address).then(result => {
|
|
console.debug(result);
|
|
form['balance'].value = result.balance;
|
|
result.txs.forEach(tx => {
|
|
let row = table.insertRow();
|
|
if (tx.type === "out") {
|
|
row.insertCell().innerHTML = '↗';
|
|
row.insertCell().textContent = tx.receiver;
|
|
} else if (tx.type === "in") {
|
|
row.insertCell().innerHTML = '↙';
|
|
row.insertCell().textContent = tx.sender;
|
|
}
|
|
row.insertCell().textContent = tx.amount;
|
|
row.insertCell().textContent = tx.time;
|
|
row.insertCell().textContent = tx.txid;
|
|
});
|
|
}).catch(error => console.error(error))
|
|
}
|
|
|
|
function getAddressDetails(address) {
|
|
return new Promise((resolve, reject) => {
|
|
btc_api.getAddressData(address).then(data => {
|
|
console.debug(data);
|
|
let details = {};
|
|
details.balance = data.balance;
|
|
details.address = data.address;
|
|
details.txs = data.txs.map(tx => {
|
|
let d = {
|
|
txid: tx.txid,
|
|
time: tx.time
|
|
}
|
|
//TODO: handle when both in and out (change to same)
|
|
if (tx.incoming) {
|
|
d.type = "in";
|
|
d.amount = tx.incoming.value;
|
|
d.sender = tx.incoming.inputs.map(i => i.address)
|
|
} else if (tx.outgoing) {
|
|
d.type = "out";
|
|
d.amount = tx.outgoing.value;
|
|
d.receiver = tx.outgoing.outputs.map(i => i.address)
|
|
}
|
|
return d;
|
|
})
|
|
resolve(details);
|
|
}).catch(error => reject(error))
|
|
})
|
|
}
|
|
</script>
|
|
|
|
</html> |