Vanillae/jrx/src/popup.ts

/**
 * This is the script for the popup window
 */

import * as b_lib from './b_lib.js';

p_main();

/**
 * runs whenever the popup opens
 *
 * also whenever a button is clicked it appears the page re-renders which
 * re-runs this
 *
 * suggests the following structure:
 *
 * 1. Contact the background script and say "I'm a popup".
 * 2. Get all relevant data.
 * 3. Render
 *
 * On click:
 *
 * 1. Send relevant information back to background script
 * 2. Epstein
 */
async function
p_main
    ()
    : Promise<void>
{
    //let scratch = document.getElementById('scratch')!;
    //scratch.innerText += 'line 17 hello\n';
    console.log('popup main');
    await pi_repop();


    // add unique name for default
    // @ts-ignore fuck off
    document.getElementById('generate-name')!.value = await b_lib.p_get_unique_name();

    // add hooks for each button
    let onclick_generate =
            async function () {
                console.log('popup p_main onclick_generate');
                // @ts-ignore fuck off
                let name : string = document.getElementById('generate-name')!.value;
                await b_lib.p_generate_keypair(name);
                pi_repop();
            };
    document
        .getElementById('generate-btn')!
        .addEventListener('click', onclick_generate);
}


/**
 * query background library for popup display data and populate fields with it
 */
async function
pi_repop
    ()
    : Promise<void>
{
    console.log('popup pi_repop');
    let popup_data: b_lib.p_data = await b_lib.p_get_data();


    // show keypairs
    // step 1: delete the existing list of keypairs
    let kill_all_children =
            function (elt : HTMLElement) {
                // from: https://www.geeksforgeeks.org/remove-all-the-child-elements-of-a-dom-node-in-javascript/
                // kill the last child repeatedly
                let child = elt.lastElementChild;
                while (child) {
                    elt.removeChild(child);
                    child = elt.lastElementChild;
                }
            };
    // get the ul
    let pubkeys_ul = document.getElementById('keypairs')!;
    // delete the existing list of keypairs
    // we will repopulate it in a minute
    // this isn't necessary right now but in the future we will add a delete
    // keypair function so this is prophylaxis
    kill_all_children(pubkeys_ul);

    // type p_data
    //     = {rich_pubkeys: Array<p_rich_pubkey>};
    // type p_rich_pubkey
    //     = {akstr  : string,
    //        active : boolean,
    //        name   : string};

    // keypairs
    let rkps         : Array<b_lib.p_rich_pubkey> = popup_data.rich_pubkeys;
    let no_keypairs : boolean                    = (0 === rkps.length);

    // if the keypairs are empty unhide the "no keypairs" paragraph
    if (no_keypairs)
        document.getElementById('no-keypairs')!.hidden = false;
    // if the keypairs are not empty
    else
    {
        // hide the "no keypairs" paragraph
        document.getElementById('no-keypairs')!.hidden = true;
        // for each rich keypair
        // each one of these is an ak_... string
        for (let this_rkp of rkps)
        {
            // make an li
            let this_li = document.createElement('li');

            // make a ul
            let rkp_ul = document.createElement('ul');

            // make a li for the name
            let name_li = document.createElement('li');
            name_li.innerHTML = 'Name: ' + this_rkp.name;

            // make li for address
            let addr_li = document.createElement('li');
            addr_li.innerHTML = 'Addr: ';

            let addr_a = document.createElement('a');
            addr_a.href = 'https://explorer.qpq.swiss/accounts/' + this_rkp.akstr;
            addr_a.style.fontSize = 'xx-small';
            addr_a.innerHTML = this_rkp.akstr;

            // add everything inside-out
            addr_li.appendChild(addr_a);
            rkp_ul.appendChild(addr_li);
            rkp_ul.appendChild(name_li);
            this_li.appendChild(rkp_ul);


            // if active, make background green
            if (this_rkp.active)
                this_li.style.background = 'green';
            else
                this_li.style.background = 'red';

            // // balance
            // // add a br
            // let br = document.createElement('br');
            // this_li.appendChild(br);

            // // add balance
            // this_li.innerHTML += 'Balance: ';
            // let maybe_balance = await pi_balance(this_akstr);
            // // if there is a balance, show it in green
            // if (maybe_balance.ok)
            // {
            //     let greentext         = document.createElement('span');
            //     greentext.style.color = 'green';
            //     // @ts-ignore fuck off i know what i'm doing
            //     greentext.innerHTML   = '' + maybe_balance.balance;

            //     this_li.appendChild(greentext);
            // }
            // // if not, show reason and make it red
            // else
            // {
            //     let redtext         = document.createElement('span');
            //     redtext.style.color = 'red';
            //     // @ts-ignore fuck off i know what i'm doing
            //     redtext.innerHTML   = '' + maybe_balance.reason;

            //     this_li.appendChild(redtext);
            // }

            // add it to the list
            pubkeys_ul.appendChild(this_li);
        }
    }
}



/**
 * shorten the ak_... str
 */
function
pi_shakstr
    (akstr : string)
    : string
{
    console.log('popup shakstr');
    return akstr.slice(0, 10) + '...';
}



/**
 * get account balance of ak_... str
 */
async function
pi_balance
    (akstr : string)
    : Promise< {ok      : true,
                balance : number}
             | {ok      : false,
                reason  : string}
             >
{
    let endpoint_init_url         = 'http://demonet.qpq.swiss:3013';
    let this_endpoint             = endpoint_init_url + '/accounts/' + akstr;
    let input_params              = {pubkey: akstr};
    // fetch: https://developer.mozilla.org/en-US/docs/Web/API/fetch
    let response = await fetch(this_endpoint);
    // 200 = ok
    // 400 = pubkey malformed
    // 404 = account dne
    switch (response.status) {
        case 200:
            // unstringify the body
            let return_data = response.json();
            // get the balance
            // @ts-ignore talking to foreign api
            let balance = return_data.balance;
            return {ok      : true,
                    balance : balance};
        // pubkey malformed
        case 400:
            return {ok     : false,
                    reason : 'Pubkey Malformed'};
        // account dne
        case 404:
            return {ok     : false,
                    reason : 'Account DNE'};
        // wtf
        default:
            return {ok     : false,
                    reason : 'Unexpected response from node'};
    }
}