allow to switch between accounts

project.yaml

@@ -14,6 +14,7 @@
 - contacts v1 :
   - test confirmed vs unconfirmed amounts
   - allow to confirm received gives
+  - .2 warn about amounts when you cannot see them
   - remove 'copy' until it works
   - switch to prod server
   - 01 show gives with confirmations
@@ -24,7 +25,6 @@
   - get 'copy' to work on account page
 
 - contacts v+ :
-  - .2 warn about amounts when you cannot see them
   - .2 confirmed direction is wrong on ContactAmounts screen
   - .5 make advanced "show/hide amounts" button into a nice UI toggle
   - .2 show error to user when adding a duplicate contact

src/views/AccountViewView.vue

@@ -91,8 +91,8 @@
         class="text-sm text-slate-500 flex justify-between items-center mb-1"
       >
         <span
-          ><code>{{ address }}</code>
-          <button @click="copy(address)">
+          ><code>{{ activeDid }}</code>
+          <button @click="copy(activeDid)">
             <fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
           </button>
         </span>
@@ -202,11 +202,8 @@
       </button>
     </div>
 
-    <div class="flex">
-      <button
-        class="text-center text-md text-blue-500 px-1.5 py-2"
-        @click="checkLimits()"
-      >
+    <div class="flex py-2">
+      <button class="text-center text-md text-blue-500" @click="checkLimits()">
         Check Limits
       </button>
       <div v-if="!!limits?.nextWeekBeginDateTime" class="px-9">
@@ -225,6 +222,15 @@
       </div>
     </div>
 
+    <div v-if="numAccounts > 0" class="flex py-2">
+      Switch Account
+      <span v-for="accountNum in numAccounts" :key="accountNum">
+        <button class="text-blue-500 px-2" @click="switchAccount(accountNum)">
+          #{{ accountNum }}
+        </button>
+      </span>
+    </div>
+
     <div v-bind:class="computedAlertClassNames()">
       <button
         class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
@@ -273,11 +279,10 @@ interface RateLimits {
 })
 export default class AccountViewView extends Vue {
   activeDid = "";
-  address = "";
   derivationPath = "";
   firstName = "";
   lastName = "";
-  mnemonic = "";
+  numAccounts = 0;
   publicHex = "";
   publicBase64 = "";
   limits: RateLimits | null = null;
@@ -300,23 +305,22 @@ export default class AccountViewView extends Vue {
     try {
       await db.open();
       const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-      if (settings) {
-        this.activeDid = settings.activeDid || "";
-        this.firstName = settings.firstName || "";
-        this.lastName = settings.lastName || "";
-        this.showContactGives = !!settings.showContactGivesInline;
-      }
+      this.activeDid = settings?.activeDid || "";
+      this.firstName = settings?.firstName || "";
+      this.lastName = settings?.lastName || "";
+      this.showContactGives = !!settings?.showContactGivesInline;
 
       await accountsDB.open();
-      const numAccounts = await accountsDB.accounts.count();
-      if (numAccounts === 0) {
+      this.numAccounts = await accountsDB.accounts.count();
+      if (this.numAccounts === 0) {
+        let address = ""; // 0x... ETH address, without "did:eth:"
         let privateHex = "";
-        this.mnemonic = generateSeed();
-        [this.address, privateHex, this.publicHex, this.derivationPath] =
-          deriveAddress(this.mnemonic);
+        const mnemonic = generateSeed();
+        [address, privateHex, this.publicHex, this.derivationPath] =
+          deriveAddress(mnemonic);
 
         const newId = newIdentifier(
-          this.address,
+          address,
           this.publicHex,
           privateHex,
           this.derivationPath
@@ -326,7 +330,7 @@ export default class AccountViewView extends Vue {
           derivationPath: this.derivationPath,
           did: newId.did,
           identity: JSON.stringify(newId),
-          mnemonic: this.mnemonic,
+          mnemonic: mnemonic,
           publicKeyHex: newId.keys[0].publicKeyHex,
         });
         this.activeDid = newId.did;
@@ -335,16 +339,13 @@ export default class AccountViewView extends Vue {
       const accounts = await accountsDB.accounts.toArray();
       const account = R.find((acc) => acc.did === this.activeDid, accounts);
       const identity = JSON.parse(account?.identity || "undefined");
-      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;
 
-      if (settings) {
       db.settings.update(MASTER_SETTINGS_KEY, {
         activeDid: identity.did,
       });
-      }
     } catch (err) {
       this.alertMessage =
         "Clear your cache and start over (after data backup). See console log for more info.";
@@ -358,12 +359,9 @@ export default class AccountViewView extends Vue {
     this.showContactGives = !this.showContactGives;
     try {
       await db.open();
-      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-      if (settings) {
       db.settings.update(MASTER_SETTINGS_KEY, {
         showContactGivesInline: this.showContactGives,
       });
-      }
     } catch (err) {
       this.alertMessage =
         "Clear your cache and start over (after data backup). See console log for more info.";
@@ -401,7 +399,7 @@ export default class AccountViewView extends Vue {
     const url = endorserApiServer + "/api/report/rateLimits";
     await accountsDB.open();
     const accounts = await accountsDB.accounts.toArray();
-    const account = R.find((acc) => acc.did === this.address, accounts);
+    const account = R.find((acc) => acc.did === this.activeDid, accounts);
     const identity = JSON.parse(account?.identity || "undefined");
     const token = await accessToken(identity);
     const headers = {
@@ -432,6 +430,22 @@ export default class AccountViewView extends Vue {
     }
   }
 
+  async switchAccount(accountNum: number) {
+    await accountsDB.open();
+    const accounts = await accountsDB.accounts.toArray();
+    const account = accounts[accountNum - 1];
+
+    await db.open();
+    db.settings.update(MASTER_SETTINGS_KEY, {
+      activeDid: account.did,
+    });
+
+    this.activeDid = account.did;
+    this.derivationPath = account.derivationPath;
+    this.publicHex = account.publicKeyHex;
+    this.publicBase64 = Buffer.from(this.publicHex, "hex").toString("base64");
+  }
+
   public showContactGivesClassNames() {
     return {
       "bg-slate-900": !this.showContactGives,

src/views/ContactAmountsView.vue

@@ -25,7 +25,7 @@
         ></router-link>
       </li>
       <!-- Contacts -->
-      <li class="basis-1/5 rounded-md text-slate-400">
+      <li class="basis-1/5 rounded-md text-slate-500">
         <router-link
           :to="{ name: 'contacts' }"
           class="block text-center py-3 px-1"

src/views/ImportAccountView.vue

@@ -77,8 +77,6 @@ export default class ImportAccountView extends Vue {
 
       try {
         await accountsDB.open();
-        const num_accounts = await accountsDB.accounts.count();
-        if (num_accounts === 0) {
         await accountsDB.accounts.add({
           dateCreated: new Date().toISOString(),
           derivationPath: this.derivationPath,
@@ -87,16 +85,12 @@ export default class ImportAccountView extends Vue {
           mnemonic: mne,
           publicKeyHex: newId.keys[0].publicKeyHex,
         });
-        }
 
         // record that as the active DID
         await db.open();
-        const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-        if (settings) {
         db.settings.update(MASTER_SETTINGS_KEY, {
           activeDid: newId.did,
         });
-        }
         this.$router.push({ name: "account" });
       } catch (err) {
         console.log("Error!");

src/views/NewEditAccountView.vue

@@ -70,10 +70,8 @@ export default class NewEditAccountView extends Vue {
   async created() {
     await db.open();
     const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-    if (settings) {
-      this.firstName = settings.firstName || "";
-      this.lastName = settings.lastName || "";
-    }
+    this.firstName = settings?.firstName || "";
+    this.lastName = settings?.lastName || "";
   }
 
   onClickSaveChanges() {