add correct encodings for public keys, plus some instructions for entering a contact

package-lock.json

@@ -23,6 +23,7 @@
         "@vueuse/core": "^9.6.0",
         "@zxing/text-encoding": "^0.9.0",
         "axios": "^1.2.2",
+        "buffer": "^6.0.3",
         "class-transformer": "^0.5.1",
         "core-js": "^3.26.1",
         "dexie": "^3.2.2",
@@ -7510,9 +7511,9 @@
       "dev": true
     },
     "node_modules/@types/node": {
-      "version": "18.11.9",
-      "resolved": "https://registry.npmmirror.com/@types/node/-/node-18.11.9.tgz",
-      "integrity": "sha512-CRpX21/kGdzjOpFsZSkcrXMGIBWMGNIHXXBVFSH+ggkftxg+XYP20TESbh+zFvFj3EQOl5byk0HTRn1IL6hbqg=="
+      "version": "18.15.5",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-18.15.5.tgz",
+      "integrity": "sha512-Ark2WDjjZO7GmvsyFFf81MXuGTA/d6oP38anyxWOL6EREyBKAxKoFHwBhaZxCfLRLpO8JgVXwqOwSwa7jRcjew=="
     },
     "node_modules/@types/normalize-package-data": {
       "version": "2.4.1",

package.json

@@ -23,6 +23,7 @@
     "@vueuse/core": "^9.6.0",
     "@zxing/text-encoding": "^0.9.0",
     "axios": "^1.2.2",
+    "buffer": "^6.0.3",
     "class-transformer": "^0.5.1",
     "core-js": "^3.26.1",
     "dexie": "^3.2.2",

project.yaml

@@ -12,7 +12,7 @@
 - replace user-affecting console.logs with error messages (eg. catches)
 
 - contacts v1 :
-  - .2 show gives with new setting
+  - remove 'copy' until it works
   - 01 show gives with confirmations
   - .5 Add page to show seed.
   - 01 Provide a way to import the non-sensitive data.
@@ -20,6 +20,7 @@
   - 01 register others
   - .2 move all "identity" references to temporary account access
   - .1 remove "scan new contact"
+  - get 'copy' to work on account page
 
 - contacts v+ :
   - .5 make advanced "show/hide amounts" button into a nice UI toggle

src/views/AccountViewView.vue

@@ -110,10 +110,20 @@
         </span>
       </div>
 
-      <div class="text-slate-500 text-sm font-bold">Public Key</div>
+      <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
       <div class="text-sm text-slate-500 mb-1">
-        <span
-          ><code>{{ publicHex }}</code>
+        <span>
+          <code>{{ publicBase64 }}</code>
+          <button @click="copy(publicBase64)">
+            <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
+          </button>
+        </span>
+      </div>
+
+      <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
+      <div class="text-sm text-slate-500 mb-1">
+        <span>
+          <code>{{ publicHex }}</code>
           <button @click="copy(publicHex)">
             <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
           </button>
@@ -138,15 +148,6 @@
       Edit Identity
     </router-link>
 
-    <h3 class="text-sm uppercase font-semibold mb-3">Contact Actions</h3>
-
-    <a
-      href="contact-scan.html"
-      class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
-    >
-      Scan New Contact
-    </a>
-
     <h3 class="text-sm uppercase font-semibold mb-3">Data</h3>
 
     <a
@@ -223,6 +224,9 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
 //import { testServerRegisterUser } from "../test";
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Buffer = require("buffer/").Buffer;
+
 @Options({
   components: {},
 })
@@ -232,6 +236,7 @@ export default class AccountViewView extends Vue {
   lastName = "";
   mnemonic = "";
   publicHex = "";
+  publicBase64 = "";
   derivationPath = "";
   showContactGives = false;
 
@@ -281,6 +286,7 @@ export default class AccountViewView extends Vue {
       const identity = JSON.parse(accounts[0].identity);
       this.address = identity.did;
       this.publicHex = identity.keys[0].publicKeyHex;
+      this.publicBase64 = Buffer.from(this.publicHex, "hex").toString("base64");
       this.derivationPath = identity.keys[0].meta.derivationPath;
     } catch (err) {
       this.alertMessage =

src/views/ContactsView.vue

@@ -144,6 +144,9 @@ import { accountsDB, db } from "@/db";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const Buffer = require("buffer/").Buffer;
+
 export interface GiveVerifiableCredential {
   "@context": string;
   "@type": string;
@@ -196,6 +199,11 @@ export default class ContactsView extends Vue {
         publicKeyBase64 = this.contactInput.substring(commaPos2 + 1).trim();
       }
     }
+    // help with potential mistakes while this sharing requires copy-and-paste
+    if (publicKeyBase64 && /^[0-9A-Fa-f]{66}$/i.test(publicKeyBase64)) {
+      // it must be all hex (compressed public key), so convert
+      publicKeyBase64 = Buffer.from(publicKeyBase64, "hex").toString("base64");
+    }
     const newContact = { did, name, publicKeyBase64 };
     await db.contacts.add(newContact);
     this.contacts = this.contacts.concat([newContact]);

src/views/HelpView.vue

@@ -134,6 +134,18 @@
           <li>Make sure you have your backup file (above), then contact us.</li>
         </ul>
       </div>
+
+      <h2 class="text-xl font-semibold">
+        How do I add someone to my contacts?
+      </h2>
+      <p>
+        Tell them to copy their ID, which typically starts with "did:ethr:...",
+        and send it to you. Go to the Contacts
+        <fa icon="circle-user" class="fa-fw" /> page and enter that into the top
+        form. You may add a name by adding a comma followed by their name; you
+        may also add their public key by adding another comma followed by the
+        key.
+      </p>
     </div>
   </section>
 </template>