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

jrx/pages/popup.html

@@ -27,7 +27,7 @@
         <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">
-                KEYPAIRS
+                ACCOUNTS
             </td>
         </tr>
     </table>
@@ -42,12 +42,25 @@
     <!-- keypairs added dynamically from page script -->
     <ul id="keypairs"></ul>
 
+</div>
+
     <!-- generate new keypair -->
+<div style="margin-top: 5px; width: 95%; background: #d6ffd9; 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">
+                GENERATE NEW KEYPAIR
+            </td>
+        </tr>
+    </table>
     <form>
+        <label for="generate-name">Name:</label>
+        <input id="generate-name" value="default1"></input>
+        <br>
         <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 >
@@ -62,6 +75,7 @@
     <form>
         <label for="faert-input">GajuPhrase:</label>
         <input id="faert-input"></input>
+        <br>
         <button id="faert-btn">Recover Keypair from GajuPhrase</button>
     </form>
     <!-- recover from seed phrase