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

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>