eth-merge-widget-blue.js

// Color: Blue
// 
// Created by: ng
// Twitter: iamng_eth
//
// Enjoy!

const color = "#ffffff"
const accent = "#00A9FE"

const configUrl = `https://eth-merge-widget.netlify.app/target-block.json`;
const configReq = new Request(configUrl);
const configRes = await configReq.loadJSON();

const targetBlock = configRes.targetBlock
const avgBlockTime = 13.8 // in seconds

const ethGasStationApiUrl = `https://ethgasstation.info/api/ethgasAPI.json`;
const req = new Request(ethGasStationApiUrl);
const res = await req.loadJSON();

const width = 115
const h = 8
const w = new ListWidget()
w.backgroundColor = new Color('#000000')

const blockNumber = (res.blockNum);
const blocksLeft = targetBlock - blockNumber

if (blocksLeft > 0) {
    w.addSpacer(6);
    const title = w.addText('Eth Merge in')
    title.textColor = new Color(color)
    title.font = Font.systemFont(16)

    w.addSpacer(2);
    const secToGo = blocksLeft * avgBlockTime
    const secToGoText = secondsToDhms(secToGo)
    const timeLeft = w.addText(secToGoText)
    timeLeft.textColor = new Color(accent)
    timeLeft.font = Font.boldSystemFont(20)

    w.addSpacer(8);
    const blocksLeftText = w.addText(`${blocksLeft}`)
    blocksLeftText.textColor = new Color(color)
    blocksLeftText.font = Font.boldSystemFont(16)

    const blocksToGo = w.addText('blocks to go')
    blocksToGo.textColor = new Color(color)
    blocksToGo.font = Font.systemFont(12)

    w.addSpacer(18);
    const progress = w.addImage(createProgress(50000, 50000 - blocksLeft))
    progress.imageSize = new Size(width, h)
    w.addSpacer(6)
} else {
    const allGood = w.addText("Eth Merge Happened!")
    allGood.textColor = new Color(accent)
    allGood.font = Font.boldSystemFont(22)

    w.addSpacer(8)
    const rockets = w.addText("🚀🚀🚀🚀🚀")
    rockets.font = Font.boldSystemFont(16)
}

Script.setWidget(w)
Script.complete()
w.presentSmall()

function secondsToDhms(seconds) {
    seconds = Number(seconds);
    var d = Math.floor(seconds / (3600 * 24));
    var h = Math.floor(seconds % (3600 * 24) / 3600);
    var m = Math.floor(seconds % 3600 / 60);
    var s = Math.floor(seconds % 60);

    var dDisplay = d > 0 ? d + 'd ' : '';
    var hDisplay = h > 0 ? h + 'h ' : '';
    var mDisplay = m > 0 ? m + 'm ' : '';
    var sDisplay = s > 0 && d <= 0 ? s + 's' : '';

    return dDisplay + hDisplay + mDisplay + sDisplay;
}

function createProgress(total, havegone) {
    const context = new DrawContext()
    context.size = new Size(width, h)
    context.opaque = false
    context.respectScreenScale = true
    context.setFillColor(new Color(color))
    const path = new Path()
    path.addRoundedRect(new Rect(0, 0, width, h), 5, 4)
    context.addPath(path)
    context.fillPath()
    context.setFillColor(new Color(accent))
    const path1 = new Path()
    path1.addRoundedRect(new Rect(0, 0, width * havegone / total, h), 5, 4)
    context.addPath(path1)
    context.fillPath()
    return context.getImage()
}