jr: multiple keypairs and they have names, one is active

jrx/src/popup.ts

@@ -38,7 +38,9 @@ p_main
     let onclick_generate =
             async function () {
                 console.log('popup p_main onclick_generate');
-                await b_lib.p_generate_keypair();
+                // @ts-ignore fuck off
+                let name : string = document.getElementById('generate-name')!.value;
+                await b_lib.p_generate_keypair(name);
                 pi_repop();
             };
     document
@@ -58,8 +60,6 @@ pi_repop
     console.log('popup pi_repop');
     let popup_data: b_lib.p_data = await b_lib.p_get_data();
 
-    // type p_data =
-    //     {pubkey_ak_strs : Array<string>};
 
     // show keypairs
     // step 1: delete the existing list of keypairs
@@ -81,28 +81,59 @@ pi_repop
     // 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 akstrs       : Array<string> = popup_data.pubkey_ak_strs;
-    let akstrs_empty : boolean       = (0 === akstrs.length);
+    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 (akstrs_empty)
+    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 keypair
+        // for each rich keypair
         // each one of these is an ak_... string
-        for (let this_akstr of akstrs)
+        for (let this_rkp of rkps)
         {
             // make an li
             let this_li = document.createElement('li');
-            // shorten akstr
-            let this_shakstr = pi_shakstr(this_akstr);
-            // make inner text the key
-            this_li.innerHTML = this_shakstr;
+
+            // 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_span = document.createElement('span');
+            addr_span.style.fontSize = 'xx-small';
+            addr_span.innerHTML = this_rkp.akstr;
+
+            // add everything inside-out
+            addr_li.appendChild(addr_span);
+            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