Browse Source

Added basic functionality.

master
Trey Del Bonis 4 years ago
parent
commit
9ab3d626ba
6 changed files with 227 additions and 0 deletions
  1. 34
    0
      www/index.html
  2. 7
    0
      www/index.html~
  3. 140
    0
      www/main.js
  4. 1
    0
      www/main.js~
  5. 42
    0
      www/style.css
  6. 3
    0
      www/style.css~

+ 34
- 0
www/index.html View File

@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8"/>
<meta name="author" content="Trey Del Bonis"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

<title>Minihalf Halving Countdown</title>
<script src="main.js"></script>
<link rel="stylesheet" type="text/css" href="style.css"/>
</head>

<body onload="init();">

<div id="content">
<h1>Bitcoin Block Halving Countdown!</h1>
<h2>Remaining: <span id="blocksleft">...</span></h2>

<div id="blocklist">
<span id="blocklistloading">Loading...</span>
</div>

</div>

<hr/>

<div id="footer">
Made by <a href="https://tr3y.io">Trey</a>
</div>

</body>

</html>

+ 7
- 0
www/index.html~ View File

@@ -0,0 +1,7 @@
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>

+ 140
- 0
www/main.js View File

@@ -0,0 +1,140 @@
/*
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

const API_PREFIX = "https://blockstream.info/api";

let nextHalvingHeight = 630000;

var curTipBlock = null;

function doApiReq(endpoint, cb) {
let xhr = new XMLHttpRequest();

xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if (xhr.status == 200) {
let json = JSON.parse(xhr.responseText);
cb(json);
} else {
// TODO Make this better?
cb(null);
}
}
};

xhr.open("GET", API_PREFIX + endpoint);
xhr.send()
}

function doGetRecentBlocks(cb) {
doApiReq("/blocks/tip", cb);
}

function doGetBlockCoinBaseTx(blockhash, cb) {
doApiReq("/block/" + blockhash + "/txs", function(resp) {
if (resp != null) {
cb(resp[0]);
} else {
cb(null);
}
});
}

function makeBlockElem(block, prevBlock) {
let elem = document.createElement("div");

// Make the height element.
let heightElem = document.createElement("span");
heightElem.innerHTML = block.height.toString();
heightElem.classList.add("blbheight");
elem.appendChild(heightElem);

// Make the hash element.
let hashElem = document.createElement("span");
hashElem.innerHTML = block.id;
hashElem.classList.add("blbhash");
elem.appendChild(hashElem);

// Make the reward breakdown element.
let rewardElem = document.createElement("span");
rewardElem.innerHTML = "Reward: ? sat";
rewardElem.classList.add("blbreward");
elem.appendChild(rewardElem);

// Invoke the thing to populate the reward.
doGetBlockCoinBaseTx(block.id, function(resp) {
let reward = resp.vout[0].value;

let rewardSubBtc = reward % 100000000;
let rewardBtc = (reward - rewardSubBtc) / 100000000;
let rewardBtcStr = rewardBtc.toString() + "." + rewardSubBtc.toString();

rewardElem.innerHTML = "Reward: " + rewardBtcStr + " BTC";
});

// Make the duration element.
let timeElem = document.createElement("span");
if (prevBlock != null) {
let blocktime = block.timestamp - prevBlock.timestamp;
timeElem.innerHTML = blocktime.toString() + " sec";
}
timeElem.classList.add("blbtime");
elem.appendChild(timeElem);

// Add the class.
elem.classList.add("blocklistblock");

return elem;
}

var blocksleftElem = null;

function updateCurrentTip(block) {

if (blocksleftElem == null) {
blocksleftElem = document.getElementById("blocksleft");
}

curHeight = block.height;
blocksleftElem.innerHTML = (nextHalvingHeight - curTipBlock.height).toString()

}

function populateRecentBlocks(blocks) {

console.log(blocks);

let blocklist = document.getElementById("blocklist");
let loadingElem = document.getElementById("blocklistloading");

curTipBlock = blocks[0];
updateCurrentTip(curTipBlock.height);

for (let i = 0; i < blocks.length; i++) {

if (i < blocks.length - 1) {
let elem = makeBlockElem(blocks[i], blocks[i + 1]);
blocklist.appendChild(elem);
} else {
let elem = makeBlockElem(blocks[i], null);
blocklist.appendChild(elem);
}
}

loadingElem.style.display = "none";

}

function init() {

console.log("Hello!");

doGetRecentBlocks(function(blocks) {
populateRecentBlocks(blocks);

// TODO Set up more stuff.
})

}

+ 1
- 0
www/main.js~ View File

@@ -0,0 +1 @@
const API_PREFIX = "https://blockstream.info/api";

+ 42
- 0
www/style.css View File

@@ -0,0 +1,42 @@
body {
font-family: sans-serif;
}

#blocklist {
margin: 0 auto;
}

.blocklistblock {
margin: 6pt;
border: 1px solid black;
border-radius: 3px 3px 3px 3px;
padding: 12pt;

width: 100%;
}

.blocklistblock:hover {
background-color: lightgrey;
}

.blocklistblock > span {
margin: 4pt;
}

.blbheight {
width: 10%;
}

.blbhash {
width: 20%;

font-family: monospace;
}

.blbreward {
width: 15%;
}

.blbtime {
width: 15%;
}

+ 3
- 0
www/style.css~ View File

@@ -0,0 +1,3 @@
body {
font-family: sans-serif;
}

Loading…
Cancel
Save