jr: network id switching seems to work

todo: change explorer links based on network id

jrx/pages/popup.html

@@ -7,6 +7,7 @@
             background:  #d6efff;
             width: 400px;
             font-family: monospace, sans-serif;
+            font-size: 0.7em;
         }
     </style>
 </head>
@@ -44,7 +45,7 @@
 
 </div>
 
-    <!-- generate new keypair -->
+<!-- generate new keypair -->
 <div style="margin-top: 5px; width: 95%; background: #d6ffd9; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
     <table >
         <tr>
@@ -61,6 +62,7 @@
         <button id="generate-btn">Generate New Keypair</button>
     </form>
 </div>
+
 <!-- faert recovery -->
 <div style="margin-top: 5px; width: 95%; background: #ffd6d9; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
     <table >
@@ -90,6 +92,23 @@
     -->
 </div>
 
+<!-- network id -->
+<div style="margin-top: 5px; width: 95%; background: #d6d9ff; border: 1px solid #6c5d96; border-radius: 5px; padding: 5px;">
+    <table >
+        <tr>
+            <td><img src="../art/keypair.svg" style="width: 32px; height: 32px;"></td>
+            <td style="justify-content: center; font-size: 28px; text-align: center; font-weight: bold">
+                NETWORK ID
+            </td>
+        </tr>
+    </table>
+
+    <form id='netids'></form>
+</div>
+
+
+
+
 <pre id="scratch"></pre>
 
 <!--

jrx/src/b_lib.ts

@@ -75,6 +75,7 @@ export {
     p_delete_key,
     p_get_gphrase,
     p_gphrase_recover,
+    p_netid_switch,
     // background script api
     b_main
 };
@@ -243,6 +244,18 @@ p_gphrase_recover
                                                                name    : name}}}) as void;
 }
 
+async function
+p_netid_switch
+    (new_netid : string)
+    : Promise<void>
+{
+    console.log('b_lib p_netid_switch', {new_netid: new_netid});
+
+    return await browser.runtime.sendMessage({frum: 'popup',
+                                              data: {method : 'p_netid_switch',
+                                                     args   : {new_netid : new_netid}}}) as void;
+}
+
 //=============================================================================
 //=============================================================================
 // API: BACKGROUND SCRIPT
@@ -483,7 +496,7 @@ bi_msg_handler_content
         case "connection.open":
             return w2a_ok({id        : "jr",
                            name      : "JR",
-                           networkId : "gajumaru_devnet",
+                           networkId : i_state.netid_cur,
                            origin    : browser.runtime.getURL('/'),
                            type      : "extension"});
 
@@ -514,7 +527,7 @@ bi_msg_handler_content
             console.log('jr bg content message handler transaction sign');
             let tx_str : string = msg.data.params.tx;
             console.log('transaction: ', tx_str);
-            let result = await tx_sign(tx_str, secret_key)
+            let result = await tx_sign(i_state.netid_cur, tx_str, secret_key)
             if
             ('good' === result.result) {
                 return w2a_ok({signedTransaction: result.signedTransaction});
@@ -701,7 +714,8 @@ msg_sign
  */
 async function
 tx_sign
-    (tx_str     : string,
+    (netid_cur  : bi_netid,
+     tx_str     : string,
      secret_key : Uint8Array)
     : Promise< {result            : 'good',
                 signedTransaction : string}
@@ -722,8 +736,7 @@ tx_sign
         // we sign <<NetworkId, SerializedObject>>
         // SerializedObject can either be the object or the hash of the object
         // let's stick with hash for now
-        // FIXME: get network id from application state
+        let network_id      : Uint8Array = vdk_binary.encode_utf8(netid_cur);
-        let network_id      : Uint8Array = vdk_binary.encode_utf8('gajumaru_devnet');
         // let tx_hash_bytes   : Uint8Array = hash(tx_bytes);
         let sign_data       : Uint8Array = vdk_binary.bytes_concat(network_id, tx_bytes);
         // @ts-ignore yes nacl is stupid
@@ -990,6 +1003,7 @@ type bi_popup_calldata
     | bi_pc_p_delete_key
     | bi_pc_p_get_gphrase
     | bi_pc_p_gphrase_recover
+    | bi_pc_p_netid_switch
     ;
 
 type bi_pc_p_get_data
@@ -1021,6 +1035,10 @@ type bi_pc_p_gphrase_recover
        args   : {gphrase : string,
                  name    : string}};
 
+type bi_pc_p_netid_switch
+    = {method : 'p_netid_switch',
+       args   : {new_netid : string}};
+
 
 type bi_popup_return_data
     = p_data
@@ -1058,6 +1076,8 @@ bi_msg_handler_popup
             return await bi_p_get_gphrase(msg.args);
         case 'p_gphrase_recover':
             return await bi_p_gphrase_recover(msg.args);
+        case 'p_netid_switch':
+            return await bi_p_netid_switch(msg.args);
         default:
             throw new Error('unsupported popup call method');
     }
@@ -1361,6 +1381,79 @@ bi_p_gphrase_recover
 
 
 
+async function
+bi_p_netid_switch
+    (args: {new_netid : string})
+    : Promise<void>
+{
+    console.log('b_lib bi_p_netid_switch', {new_netid: args.new_netid});
+
+    // get state
+    let istate : bi_state = await bi_get_state();
+
+    // type bi_state
+    //     = {rich_keypairs : Array<bi_rich_keypair>,
+    //        netid_cur     : bi_netid,
+    //        netids_alt    : Array<bi_netid>};
+    //
+    // let NETIDS_ALL     : Array<bi_netid> = [NETID_GDEV, NETID_AETEST, NETID_AEMAIN];
+
+    // if this is already the network id, do nothing
+    if
+    (istate.netid_cur === args.new_netid)
+        return;
+    // next make sure it's allowed
+    else if
+    (!elem(args.new_netid, NETIDS_ALL))
+        throw new Error('invalid network id: ' + args.new_netid);
+    // ok now we know we're definitely switching to a valid network id
+    else {
+        // set the current network id to the one the user asked for
+        istate.netid_cur = args.new_netid as bi_netid;
+        // new alts are all of them minus the new current one
+        istate.netids_alt = exclude(args.new_netid, NETIDS_ALL) as Array<bi_netid>;
+
+        await bi_set_state(istate);
+    }
+}
+
+function
+elem
+    <t>
+    (item : t,
+     list : Array<t>)
+    : boolean
+{
+    for (let im of list)
+        if (item === im)
+            return true;
+
+    return false;
+}
+
+
+function
+exclude
+    <t>
+    (item : t,
+     list : Array<t>)
+    : Array<t>
+{
+    // accumulator
+    let new_list : Array<t> = [];
+
+    for (let im of list) {
+        if (im === item)
+            continue;
+        else
+            new_list.push(im);
+    }
+
+    return new_list;
+}
+
+
+
 
 //=============================================================================
 //=============================================================================

jrx/src/popup.ts

@@ -42,6 +42,7 @@ p_main
     document.getElementById('faert-name')!.value = unique_name;
 
     // add hooks for each button
+    // for generating new keypair
     let onclick_generate =
             async function () {
                 console.log('popup p_main onclick_generate');
@@ -72,6 +73,22 @@ p_main
 }
 
 
+// kill all the children
+function
+pfizer
+    (elt : HTMLElement)
+    : void
+{
+    // 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;
+    }
+}
+
+
 /**
  * query background library for popup display data and populate fields with it
  */
@@ -84,26 +101,68 @@ pi_repop
     let popup_data: b_lib.p_data = await b_lib.p_get_data();
     console.log('popup pi_repop popup_data', popup_data);
 
+    // network ids
+    // grab the relevent element
+    let netid_form = document.getElementById('netids')!;
+    // eliminate children
+    pfizer(netid_form);
+
+    // add radio button for current network id
+    let netid_cur_input = document.createElement('input');
+    netid_cur_input.setAttribute('type',    'radio');
+    netid_cur_input.setAttribute('value',   popup_data.netid_cur);
+    netid_cur_input.setAttribute('id',      'r-' + popup_data.netid_cur);
+    netid_cur_input.checked = true;
+
+    let netid_cur_label = document.createElement('label');
+    netid_cur_label.setAttribute('for',   'r-' + popup_data.netid_cur);
+    netid_cur_label.innerHTML = popup_data.netid_cur;
+
+    // add elements to form
+    netid_form.appendChild(netid_cur_input);
+    netid_form.appendChild(netid_cur_label);
+
+    // add alt ids
+    for (let netid_alt of popup_data.netids_alt) {
+        // add brs here
+        netid_form.appendChild(document.createElement('br'));
+
+        // add radio button for this network id
+        let netid_alt_input = document.createElement('input');
+        netid_alt_input.setAttribute('type', 'radio');
+        netid_alt_input.setAttribute('value', netid_alt);
+        netid_alt_input.setAttribute('id',    'r-' + netid_alt);
+
+        let netid_alt_label = document.createElement('label');
+        netid_alt_label.setAttribute('for',   'r-' + netid_alt);
+        netid_alt_label.innerHTML = netid_alt;
+
+        // add elements to form
+        netid_form.appendChild(netid_alt_input);
+        netid_form.appendChild(netid_alt_label);
+
+        // function to call background script
+        let switchnet =
+                async function() {
+                    await b_lib.p_netid_switch(netid_alt);
+                    pi_repop();
+                };
+
+        // add netid switch things
+        netid_alt_input.onclick = switchnet;
+        netid_alt_label.onclick = switchnet;
+    }
+
 
     // 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);
+    pfizer(pubkeys_ul);
 
     // type p_data
     //     = {rich_pubkeys: Array<p_rich_pubkey>};
@@ -221,63 +280,3 @@ pi_repop
         }
     }
 }
-
-
-
-/**
- * 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'};
-    }
-}