minihalf/www/main.js

/*
 * SPDX-License-Identifier: AGPL-3.0-or-later
 */

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

const IRON_BLOCK = "https://gamepedia.cursecdn.com/minecraft_gamepedia/7/7e/Block_of_Iron_JE4_BE3.png?version=692673bafa1e94785ab6012d7a3c8dc4";
const GOLD_BLOCK = "https://gamepedia.cursecdn.com/minecraft_gamepedia/7/72/Block_of_Gold_JE6_BE3.png?version=9d1a63c717df80feffa9ec93ebceb014";

var nextHalvingHeight = 630000;

var curTipBlock = null;
var recentBlocks = null;

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

    xhr.timeout = 5000;

    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 calcRenderedSatQty(sats, decimals) {
    let subBtc = sats % 100000000;
    let btc = (sats - subBtc) / 100000000;

    let maskModulus = 10 ** (8 - decimals);
    let subDecimalRem = subBtc % maskModulus;
    let decimal = (subBtc - subDecimalRem) / maskModulus;

    if (decimal != 0) {
	return btc.toString() + "." + decimal.toString();
    } else {
	return btc.toString();
    }
}

const HALVING_PERIOD = 210000;

function calcRewardAtHeight(height) {
    let epoch = Math.floor(height / HALVING_PERIOD);
    return 5000000000 / (2 ** epoch);
}

function calcRewardBreakdown(height, sats) {
    let subsidy = calcRewardAtHeight(height);
    let fees = sats - subsidy;

    let rSubsidy = calcRenderedSatQty(subsidy, 2);
    let rFees = calcRenderedSatQty(fees, 3);
    return rSubsidy + " subsidy + " + rFees + " fees"
}

function toggleElemSelected(elem) {
    if (elem.classList.contains("blbselected")) {
	elem.classList.remove("blbselected");
    } else {
	elem.classList.add("blbselected");
    }
}

function formatDate(date) {
    let year = date.getUTCFullYear();
    let month = "0" + (1 + date.getUTCMonth());
    let day = "0" + (1 + date.getUTCDate());
    let hours = "0" + date.getUTCHours();
    let minutes = "0" + date.getUTCMinutes();
    let seconds = "0" + date.getUTCSeconds();

    let datePart = year + "-" + month.substr(-2) + "-" + day.substr(-2);
    let timePart = hours.substr(-2) + ":" + minutes.substr(-2) + ":" + seconds.substr(-2);

    return datePart + " " + timePart;
}

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

    let innerElem = document.createElement("div");
    innerElem.classList.add("entryinner");
    entry.appendChild(innerElem);

    if (block.height % 2 == 0) {
	innerElem.classList.add("blocklisteven");
    } else {
	innerElem.classList.add("blocklistodd");
    }

    /* ===== Top row data ===== */

    let topElem = document.createElement("div");
    topElem.classList.add("entrytop");
    innerElem.appendChild(topElem);

    // Make the icon.
    let iconCtr = document.createElement("div");
    iconCtr.classList.add("blbiconctr");
    topElem.appendChild(iconCtr);
    let iconElem = document.createElement("img");
    iconElem.classList.add("blbicon");
    iconCtr.appendChild(iconElem);
    if (block.height % HALVING_PERIOD == 0) {
	iconElem.src = GOLD_BLOCK;
    } else {
	iconElem.src = IRON_BLOCK;
    }

    // Element for all the data.
    let dataElem = document.createElement("div");
    dataElem.classList.add("blbdata");
    topElem.appendChild(dataElem);

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

    // this makes it look a lot nicer
    dataElem.append("—");

    // Make the timestamp element.
    let timestampElem = document.createElement("span");
    let timestampDate = new Date(block.timestamp * 1000);
    timestampElem.innerHTML = formatDate(timestampDate);
    dataElem.appendChild(timestampElem);

    // this makes it look a lot nicer
    dataElem.append("—");

    // Make the reward breakdown element.
    let rewardElem = document.createElement("span");
    rewardElem.innerHTML = "Reward: ? sat";
    dataElem.appendChild(rewardElem);
    doGetBlockCoinBaseTx(block.id, function(resp) {
	let reward = resp.vout[0].value;
	let rewardStr = calcRewardBreakdown(block.height, reward);
	rewardElem.innerHTML = rewardStr;
    });

    /* ==== Detail row data ===== */

    // Details
    let detailElem = document.createElement("div");
    detailElem.classList.add("entrydetail");

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

    // Weight and height
    let sizeElem = document.createElement("div");
    detailElem.appendChild(sizeElem);
    let blockKB = Math.floor(block.size / 1024);
    let blockkWU = Math.floor(block.weight / 1024);
    sizeElem.innerHTML = "Size/Weight: " + blockKB + " KiB / " + blockkWU + " kSipa";

    // Number of transactions
    let txsElem = document.createElement("div");
    detailElem.appendChild(txsElem);
    txsElem.innerHTML = "Tx count: " + block.tx_count;

    // Make the duration element.
    if (prevBlock != null) {
	let timeElem = document.createElement("div");
	let blocktime = block.timestamp - prevBlock.timestamp;
	if (blocktime < 0) {
	    blocktime = 0; // ehhhhhhhh
	}
	timeElem.innerHTML = "Since last block: " + blocktime.toString() + " sec";
	detailElem.appendChild(timeElem);
    } else {
	let oopsElem = document.createElement("div");
	oopsElem.innerHTML = "<br/>(I don't feel like making the request to get the previous block to find the blocktime)";
	detailElem.appendChild(oopsElem);
    }

    let linksElem = document.createElement("div");
    linksElem.classList.add("detaillinks");
    detailElem.appendChild(linksElem);

    // Link to the block on Blockstream's explorer.
    let blockstreamLink = document.createElement("a");
    blockstreamLink.href = "https://blockstream.info/block/"+ block.id;
    let blockstreamLogo = document.createElement("img");
    blockstreamLogo.src = "https://blockstream.info/img/icons/blockstream-logo.png";
    blockstreamLink.appendChild(blockstreamLogo);
    let viewonElem = document.createElement("span");
    viewonElem.innerHTML = "View on blockstream.info";
    blockstreamLink.appendChild(viewonElem);
    linksElem.appendChild(blockstreamLink);

    // Thing to close the details.
    let closeElem = document.createElement("div");
    closeElem.classList.add("closebtn");
    closeElem.innerHTML = "close";
    closeElem.onclick = function() {
	// This is such a hack but it works.  We have to do this because the
	// onclick for the entry we're removing it from here *still gets run*
	// when we pick up the click here.  This just defers removing it until
	// we're about to render the next frame, so we're sure we remove it.
	window.requestAnimationFrame(function() {
	    entry.classList.remove("blbselected");
	});
    };
    detailElem.appendChild(closeElem);

    /* ===== Finalize ===== */

    // Put it together.
    innerElem.appendChild(detailElem);
    entry.appendChild(innerElem);
    entry.classList.add("blocklistentry");
    entry.onclick = function() {
	entry.classList.add("blbselected");
    };

    return entry;
}

var blocksLeftElem = null;
var timeLeftElem = null;

function updateRemainingCount(block) {
    if (blocksLeftElem == null) {
	blocksLeftElem = document.getElementById("blocksleft");
    }

    if (timeLeftElem == null) {
	timeLeftElem = document.getElementById("timeleft");
    }

    let blocksLeft = nextHalvingHeight - curTipBlock.height;
    blocksLeftElem.innerHTML = blocksLeft.toString()

    if (blocksLeft < 1) {
	timeLeftElem.innerHTML = "Halving imminent!";
    } else {
	let nowUnix = Date.now() / 1000; // wtf???

	let sinceLastBlock = nowUnix - block.timestamp;
	let secsLeft = ((blocksLeft * 10 * 60) - sinceLastBlock)|0;

	let secsPart = secsLeft % 60;
	let minLeft = (secsLeft - secsPart) / 60;
	let minPart = minLeft % 60;
	let hrsLeft = (minLeft - minPart) / 60;

	let acc = secsPart + "s";
	if (minLeft > 0) {
	    acc = (minPart + "m ") + acc;
	}
	if (hrsLeft > 0) {
	    acc = (hrsLeft + "h ") + acc;
	}

	timeLeftElem.innerHTML = "roughly " + acc + " remaining";
    }
}

function addNewBlock(block) {

    let prev = recentBlocks[0];
    recentBlocks = [block].concat(recentBlocks);
    let elem = makeBlockElem(block, prev);

    elem.classList.add("newblock");
    setTimeout(function() {
	elem.classList.remove("newblock");
    }, 2000);

    let blocklist = document.getElementById("blocklist");
    blocklist.prepend(elem);

}

function populateRecentBlocks(blocks) {

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

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

    for (let i = 0; i < blocks.length; i++) {
	let block = blocks[i];
	let prevBlock = null;
	if (i < blocks.length - 1) {
	    prevBlock = blocks[i + 1];
	}

	let elem = makeBlockElem(block, prevBlock);

	if (i == 0) {
	    // Adding the new block so we give it the class to make it colored,
	    // but set a timer so it goes away eventually.
	    elem.classList.add("newblock");
	    setTimeout(function() {
		elem.classList.remove("newblock");
	    }, 2000);
	}

	blocklist.appendChild(elem);

    }

    loadingElem.style.display = "none";
    updateRemainingCount(curTipBlock);
}

function getPollDelayAtHeight(height) {
    let blocksUntilHalving = HALVING_PERIOD - (height % HALVING_PERIOD);
    if (blocksUntilHalving == 1) {
	return 1000;
    } else if (blocksUntilHalving == 2) {
	return 2500;
    } else {
	return 10000;
    }
}

function checkNewBlocks() {
    console.log("Polling for new blocks...");
    doGetRecentBlocks(function(blocks) {
	if (blocks == null) {
	    alert("Error polling for new bocks, please refresh the page.");
	    return;
	}

	// Find the index of the newest known block.
	let knownHeight = recentBlocks[0].height;
	let newestKnownIndex = -1;
	for (let i = 0; i < blocks.length; i++) {
	    if (blocks[i].height == knownHeight) {
		newestKnownIndex = i;
		break;
	    }
	}

	// If there's no new blocks, exit.
	if (newestKnownIndex == 0) {
	    console.log("No new blocks found.");
	} else if (newestKnownIndex == -1) {
	    console.log("wtf");
	}

	// If there are new blocks, add them.
	for (let i = newestKnownIndex - 1; i >= 0; i--) {
	    let newBlock = blocks[i];
	    console.log("Adding new block at height " + newBlock.height + " (" + newBlock.id + ")");
	    addNewBlock(newBlock);
	}

	// Set up to call this again.
	setTimeout(checkNewBlocks, getPollDelayAtHeight(recentBlocks[0].height));
    });
}

function init() {
    console.log("Hello!");

    doGetRecentBlocks(function(blocks) {
	if (blocks == null) {
	    alert("Error loading blocks, please refresh the page.");
	    return;
	}

	recentBlocks = blocks;

	populateRecentBlocks(blocks);
	setTimeout(checkNewBlocks, 5000);
	setInterval(function() {
	    updateRemainingCount(recentBlocks[0]);
	}, 1000);
    });
}