parameterize main identifier (to prepare the way for multiple)

src/views/AccountViewView.vue

@@ -240,8 +240,11 @@
 
 <script lang="ts">
 import "dexie-export-import";
+import * as R from "ramda";
 import { Options, Vue } from "vue-class-component";
 import { useClipboard } from "@vueuse/core";
+
+import { AppString } from "@/constants/app";
 import { db, accountsDB } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import {
@@ -250,7 +253,7 @@ import {
   generateSeed,
   newIdentifier,
 } from "@/libs/crypto";
-import { AppString } from "@/constants/app";
+import { AxiosError } from "axios/index";
 //import { testServerRegisterUser } from "../test";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
@@ -269,6 +272,7 @@ interface RateLimits {
   components: {},
 })
 export default class AccountViewView extends Vue {
+  activeDid = "";
   address = "";
   derivationPath = "";
   firstName = "";
@@ -297,6 +301,7 @@ export default class AccountViewView extends Vue {
       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;
@@ -319,18 +324,27 @@ export default class AccountViewView extends Vue {
         await accountsDB.accounts.add({
           dateCreated: new Date().toISOString(),
           derivationPath: this.derivationPath,
+          did: newId.did,
           identity: JSON.stringify(newId),
           mnemonic: this.mnemonic,
           publicKeyHex: newId.keys[0].publicKeyHex,
         });
+        this.activeDid = newId.did;
       }
 
       const accounts = await accountsDB.accounts.toArray();
-      const identity = JSON.parse(accounts[0].identity);
+      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.";
@@ -387,7 +401,8 @@ export default class AccountViewView extends Vue {
     const url = endorserApiServer + "/api/report/rateLimits";
     await accountsDB.open();
     const accounts = await accountsDB.accounts.toArray();
-    const identity = JSON.parse(accounts[0].identity);
+    const account = R.find((acc) => acc.did === this.address, accounts);
+    const identity = JSON.parse(account?.identity || "undefined");
     const token = await accessToken(identity);
     const headers = {
       "Content-Type": "application/json",
@@ -396,21 +411,23 @@ export default class AccountViewView extends Vue {
 
     try {
       const resp = await this.axios.get(url, { headers });
+      // axios throws an exception on a 400
       if (resp.status === 200) {
         this.limits = resp.data;
-      } else {
-        this.alertTitle = "Error from Server";
-        console.log("Bad response retrieving limits: ", resp.data);
-        if (resp.data.error?.message) {
-          this.alertMessage = resp.data.error?.message;
-        } else {
-          this.alertMessage = "Bad server response of " + resp.status;
-        }
-        this.isAlertVisible = true;
       }
-    } catch (err) {
+    } catch (error: unknown) {
+      const serverError = error as AxiosError;
+
       this.alertTitle = "Error from Server";
-      this.alertMessage = err as string;
+      console.log("Bad response retrieving limits: ", serverError);
+      // Anybody know how to access items inside "response.data" without this?
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      const data: any = serverError.response?.data;
+      if (data.error.message) {
+        this.alertMessage = data.error.message;
+      } else {
+        this.alertMessage = "Bad server response. See logs for details.";
+      }
       this.isAlertVisible = true;
     }
   }