Merge branch 'master' into gifting-ui-2025-05

src/App.vue

@@ -4,7 +4,7 @@
   <!-- Messages in the upper-right - https://github.com/emmanuelsw/notiwind -->
   <NotificationGroup group="alert">
     <div
-      class="fixed top-4 right-4 w-full max-w-sm flex flex-col items-start justify-end"
+      class="fixed z-[90] top-[max(1rem,env(safe-area-inset-top))] right-4 left-4 sm:left-auto sm:w-full sm:max-w-sm flex flex-col items-start justify-end"
     >
       <Notification
         v-slot="{ notifications, close }"
@@ -144,10 +144,10 @@
   <!--
     This "group" of "modal" is the prompt for an answer.
     Set "type" as follows: "confirm" for yes/no, and "notification" ones:
-     "-permission", "-mute", "-off"
+      "-permission", "-mute", "-off"
   -->
   <NotificationGroup group="modal">
-    <div class="fixed z-[100] top-0 inset-x-0 w-full">
+    <div class="fixed z-[100] top-[env(safe-area-inset-top)] inset-x-0 w-full">
       <Notification
         v-slot="{ notifications, close }"
         enter="transform ease-out duration-300 transition"
@@ -167,10 +167,10 @@
           role="alert"
         >
           <!--
-           Type of "confirm" will post a message.
-           With onYes function, show a "Yes" button to call that function.
-           With onNo function, show a "No" button to call that function,
-             and pass it state of "askAgain" field shown if you set promptToStopAsking.
+            Type of "confirm" will post a message.
+            With onYes function, show a "Yes" button to call that function.
+            With onNo function, show a "No" button to call that function,
+              and pass it state of "askAgain" field shown if you set promptToStopAsking.
           -->
           <div
             v-if="notification.type === 'confirm'"
@@ -330,8 +330,11 @@
 
 <script lang="ts">
 import { Vue, Component } from "vue-facing-decorator";
-import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "./db/index";
-import { NotificationIface } from "./constants/app";
+
+import { NotificationIface, USE_DEXIE_DB } from "./constants/app";
+import * as databaseUtil from "./db/databaseUtil";
+import { retrieveSettingsForActiveAccount } from "./db/index";
+import { logConsoleAndDb } from "./db/databaseUtil";
 import { logger } from "./utils/logger";
 
 interface Settings {
@@ -396,7 +399,11 @@ export default class App extends Vue {
 
     try {
       logger.log("Retrieving settings for the active account...");
-      const settings: Settings = await retrieveSettingsForActiveAccount();
+      let settings: Settings =
+        await databaseUtil.retrieveSettingsForActiveAccount();
+      if (USE_DEXIE_DB) {
+        settings = await retrieveSettingsForActiveAccount();
+      }
       logger.log("Retrieved settings:", settings);
 
       const notifyingNewActivity = !!settings?.notifyingNewActivityTime;
@@ -539,4 +546,15 @@ export default class App extends Vue {
 }
 </script>
 
-<style></style>
+<style>
+#Content {
+  padding-left: max(1.5rem, env(safe-area-inset-left));
+  padding-right: max(1.5rem, env(safe-area-inset-right));
+  padding-top: max(1.5rem, env(safe-area-inset-top));
+  padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
+}
+
+#QuickNav ~ #Content {
+  padding-bottom: calc(env(safe-area-inset-bottom) + 6.333rem);
+}
+</style>

src/components/ActivityListItem.vue

@@ -14,22 +14,34 @@
       class="flex items-center justify-between gap-2 text-lg bg-slate-200 border border-slate-300 border-b-0 rounded-t-md px-3 sm:px-4 py-1 sm:py-2"
     >
       <div class="flex items-center gap-2">
-        <div v-if="record.issuerDid">
+        <router-link
+          v-if="record.issuerDid && !isHiddenDid(record.issuerDid)"
+          :to="{
+            path: '/did/' + encodeURIComponent(record.issuerDid),
+          }"
+          title="More details about this person"
+        >
           <EntityIcon
             :entity-id="record.issuerDid"
             class="rounded-full bg-white overflow-hidden !size-[2rem] object-cover"
           />
-        </div>
-        <div v-else>
-          <font-awesome
-            icon="person-circle-question"
-            class="text-slate-300 text-[2rem]"
-          />
-        </div>
+        </router-link>
+        <font-awesome
+          v-else-if="isHiddenDid(record.issuerDid)"
+          icon="eye-slash"
+          class="text-slate-400 !size-[2rem] cursor-pointer"
+          @click="notifyHiddenPerson"
+        />
+        <font-awesome
+          v-else
+          icon="person-circle-question"
+          class="text-slate-400 !size-[2rem] cursor-pointer"
+          @click="notifyUnknownPerson"
+        />
 
         <div>
-          <h3 class="font-semibold">
-            {{ record.issuer.known ? record.issuer.displayName : "" }}
+          <h3 v-if="record.issuer.known" class="font-semibold leading-tight">
+            {{ record.issuer.displayName }}
           </h3>
           <p class="ms-auto text-xs text-slate-500 italic">
             {{ friendlyDate }}
@@ -37,7 +49,11 @@
         </div>
       </div>
 
-      <a class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
+      <a
+        class="cursor-pointer"
+        data-testid="circle-info-link"
+        @click="$emit('loadClaim', record.jwtId)"
+      >
         <font-awesome icon="circle-info" class="fa-fw text-slate-500" />
       </a>
     </div>
@@ -46,7 +62,7 @@
       <!-- Record Image -->
       <div
         v-if="record.image"
-        class="bg-cover mb-6 -mt-3 sm:-mt-4 -mx-3 sm:-mx-4"
+        class="bg-cover mb-2 -mt-3 sm:-mt-4 -mx-3 sm:-mx-4"
         :style="`background-image: url(${record.image});`"
       >
         <a
@@ -57,34 +73,64 @@
             class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
             :src="record.image"
             alt="Activity image"
-            @load="$emit('cacheImage', record.image)"
+            @load="cacheImage(record.image)"
           />
         </a>
       </div>
 
+      <!-- Description -->
+      <p class="font-medium">
+        <a class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
+          {{ description }}
+        </a>
+      </p>
+
       <div
-        class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mb-5"
+        class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
       >
         <!-- Source -->
         <div
-          class="w-[8rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+          class="w-[7rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
             <div>
               <!-- Project Icon -->
               <div v-if="record.providerPlanName">
-                <ProjectIcon
-                  :entity-id="record.providerPlanName"
-                  :icon-size="48"
-                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
-                />
+                <router-link
+                  :to="{
+                    path:
+                      '/project/' +
+                      encodeURIComponent(record.providerPlanHandleId || ''),
+                  }"
+                  title="View project details"
+                >
+                  <ProjectIcon
+                    :entity-id="record.providerPlanHandleId || ''"
+                    :icon-size="48"
+                    class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
+                  />
+                </router-link>
               </div>
               <!-- Identicon for DIDs -->
               <div v-else-if="record.agentDid">
-                <EntityIcon
-                  :entity-id="record.agentDid"
-                  :profile-image-url="record.issuer.profileImageUrl"
-                  class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
+                <router-link
+                  v-if="!isHiddenDid(record.agentDid)"
+                  :to="{
+                    path: '/did/' + encodeURIComponent(record.agentDid),
+                  }"
+                  title="More details about this person"
+                >
+                  <EntityIcon
+                    :entity-id="record.agentDid"
+                    :profile-image-url="record.issuer.profileImageUrl"
+                    class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
+                  />
+                </router-link>
+                <font-awesome
+                  v-else
+                  icon="eye-slash"
+                  class="text-slate-300 !size-[3rem] sm:!size-[4rem]"
+                  @click="notifyHiddenPerson"
                 />
               </div>
               <!-- Unknown Person -->
@@ -92,6 +138,7 @@
                 <font-awesome
                   icon="person-circle-question"
                   class="text-slate-300 text-[3rem] sm:text-[4rem]"
+                  @click="notifyUnknownPerson"
                 />
               </div>
             </div>
@@ -110,9 +157,11 @@
 
         <!-- Arrow -->
         <div
-          class="absolute inset-x-[8rem] sm:inset-x-[12rem] mx-2 top-1/2 -translate-y-1/2"
+          class="absolute inset-x-[7rem] sm:inset-x-[12rem] mx-2 top-1/2 -translate-y-1/2"
         >
-          <div class="text-sm text-center leading-none font-semibold pe-[15px]">
+          <div
+            class="text-sm text-center leading-none font-semibold pe-2 sm:pe-4"
+          >
             {{ fetchAmount }}
           </div>
 
@@ -129,24 +178,47 @@
 
         <!-- Destination -->
         <div
-          class="w-[8rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+          class="w-[7rem] sm:w-[12rem] text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
           <div class="relative w-fit mx-auto">
             <div>
               <!-- Project Icon -->
               <div v-if="record.recipientProjectName">
-                <ProjectIcon
-                  :entity-id="record.recipientProjectName"
-                  :icon-size="48"
-                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
-                />
+                <router-link
+                  :to="{
+                    path:
+                      '/project/' +
+                      encodeURIComponent(record.fulfillsPlanHandleId || ''),
+                  }"
+                  title="View project details"
+                >
+                  <ProjectIcon
+                    :entity-id="record.fulfillsPlanHandleId || ''"
+                    :icon-size="48"
+                    class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
+                  />
+                </router-link>
               </div>
               <!-- Identicon for DIDs -->
               <div v-else-if="record.recipientDid">
-                <EntityIcon
-                  :entity-id="record.recipientDid"
-                  :profile-image-url="record.receiver.profileImageUrl"
-                  class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
+                <router-link
+                  v-if="!isHiddenDid(record.recipientDid)"
+                  :to="{
+                    path: '/did/' + encodeURIComponent(record.recipientDid),
+                  }"
+                  title="More details about this person"
+                >
+                  <EntityIcon
+                    :entity-id="record.recipientDid"
+                    :profile-image-url="record.receiver.profileImageUrl"
+                    class="rounded-full bg-slate-100 overflow-hidden !size-[3rem] sm:!size-[4rem]"
+                  />
+                </router-link>
+                <font-awesome
+                  v-else
+                  icon="eye-slash"
+                  class="text-slate-300 !size-[3rem] sm:!size-[4rem]"
+                  @click="notifyHiddenPerson"
                 />
               </div>
               <!-- Unknown Person -->
@@ -154,6 +226,7 @@
                 <font-awesome
                   icon="person-circle-question"
                   class="text-slate-300 text-[3rem] sm:text-[4rem]"
+                  @click="notifyUnknownPerson"
                 />
               </div>
             </div>
@@ -170,24 +243,18 @@
           </div>
         </div>
       </div>
-
-      <!-- Description -->
-      <p class="font-medium">
-        <a class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
-          {{ description }}
-        </a>
-      </p>
     </div>
   </li>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from "vue-facing-decorator";
+import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
 import { GiveRecordWithContactInfo } from "../types";
 import EntityIcon from "./EntityIcon.vue";
 import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
-import { containsHiddenDid } from "../libs/endorserServer";
+import { containsHiddenDid, isHiddenDid } from "../libs/endorserServer";
 import ProjectIcon from "./ProjectIcon.vue";
+import { NotificationIface } from "../constants/app";
 
 @Component({
   components: {
@@ -202,6 +269,38 @@ export default class ActivityListItem extends Vue {
   @Prop() activeDid!: string;
   @Prop() confirmerIdList?: string[];
 
+  isHiddenDid = isHiddenDid;
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  notifyHiddenPerson() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "warning",
+        title: "Person Outside Your Network",
+        text: "This person is not visible to you.",
+      },
+      3000,
+    );
+  }
+
+  notifyUnknownPerson() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "warning",
+        title: "Unidentified Person",
+        text: "Nobody specific was recognized.",
+      },
+      3000,
+    );
+  }
+
+  @Emit()
+  cacheImage(image: string) {
+    return image;
+  }
+
   get fetchAmount(): string {
     const claim =
       (this.record.fullClaim as unknown).claim || this.record.fullClaim;
@@ -217,7 +316,7 @@ export default class ActivityListItem extends Vue {
     const claim =
       (this.record.fullClaim as unknown).claim || this.record.fullClaim;
 
-    return `${claim.description}`;
+    return `${claim?.description || ""}`;
   }
 
   private displayAmount(code: string, amt: number) {

src/components/DataExportSection.vue

@@ -0,0 +1,216 @@
+/** * Data Export Section Component * * Provides UI and functionality for
+exporting user data and backing up identifier seeds. * Includes buttons for seed
+backup and database export, with platform-specific download instructions. * *
+@component * @displayName DataExportSection * @example * ```vue *
+<DataExportSection :active-did="currentDid" />
+* ``` */
+
+<template>
+  <div
+    id="sectionDataExport"
+    class="bg-slate-100 rounded-md overflow-hidden px-4 py-4 mt-8 mb-8"
+  >
+    <div class="mb-2 font-bold">Data Export</div>
+    <router-link
+      v-if="activeDid"
+      :to="{ name: 'seed-backup' }"
+      class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-2 mt-2"
+    >
+      Backup Identifier Seed
+    </router-link>
+
+    <button
+      :class="computedStartDownloadLinkClassNames()"
+      class="block w-full text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
+      @click="exportDatabase()"
+    >
+      Download Contacts
+    </button>
+    <a
+      ref="downloadLink"
+      :class="computedDownloadLinkClassNames()"
+      class="block w-full text-center text-md bg-gradient-to-b from-green-500 to-green-800 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md mb-6"
+    >
+      If no download happened yet, click again here to download now.
+    </a>
+    <div v-if="platformCapabilities.needsFileHandlingInstructions" class="mt-4">
+      <p>
+        After the download, you can save the file in your preferred storage
+        location.
+      </p>
+      <ul>
+        <li
+          v-if="platformCapabilities.isIOS"
+          class="list-disc list-outside ml-4"
+        >
+          On iOS: You will be prompted to choose a location to save your backup
+          file.
+        </li>
+        <li
+          v-if="platformCapabilities.isMobile && !platformCapabilities.isIOS"
+          class="list-disc list-outside ml-4"
+        >
+          On Android: You will be prompted to choose a location to save your
+          backup file.
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-facing-decorator";
+import { AppString, NotificationIface } from "../constants/app";
+
+import { Contact } from "../db/tables/contacts";
+import * as databaseUtil from "../db/databaseUtil";
+
+import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
+import {
+  PlatformService,
+  PlatformCapabilities,
+} from "../services/PlatformService";
+import { contactsToExportJson } from "../libs/util";
+
+/**
+ * @vue-component
+ * Data Export Section Component
+ * Handles database export and seed backup functionality with platform-specific behavior
+ */
+@Component
+export default class DataExportSection extends Vue {
+  /**
+   * Notification function injected by Vue
+   * Used to show success/error messages to the user
+   */
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  /**
+   * Active DID (Decentralized Identifier) of the user
+   * Controls visibility of seed backup option
+   * @required
+   */
+  @Prop({ required: true }) readonly activeDid!: string;
+
+  /**
+   * URL for the database export download
+   * Created and revoked dynamically during export process
+   * Only used in web platform
+   */
+  downloadUrl = "";
+
+  /**
+   * Platform service instance for platform-specific operations
+   */
+  private platformService: PlatformService =
+    PlatformServiceFactory.getInstance();
+
+  /**
+   * Platform capabilities for the current platform
+   */
+  private get platformCapabilities(): PlatformCapabilities {
+    return this.platformService.getCapabilities();
+  }
+
+  /**
+   * Lifecycle hook to clean up resources
+   * Revokes object URL when component is unmounted (web platform only)
+   */
+  beforeUnmount() {
+    if (this.downloadUrl && this.platformCapabilities.hasFileDownload) {
+      URL.revokeObjectURL(this.downloadUrl);
+    }
+  }
+
+  /**
+   * Exports the database to a JSON file
+   * Uses platform-specific methods for saving the exported data
+   * Shows success/error notifications to user
+   *
+   * @throws {Error} If export fails
+   * @emits {Notification} Success or error notification
+   */
+  public async exportDatabase() {
+    try {
+      let allContacts: Contact[] = [];
+      const platformService = PlatformServiceFactory.getInstance();
+      const result = await platformService.dbQuery(`SELECT * FROM contacts`);
+      if (result) {
+        allContacts = databaseUtil.mapQueryResultToValues(
+          result,
+        ) as unknown as Contact[];
+      }
+      // if (USE_DEXIE_DB) {
+      //   await db.open();
+      //   allContacts = await db.contacts.toArray();
+      // }
+
+      // Convert contacts to export format
+      const exportData = contactsToExportJson(allContacts);
+      const jsonStr = JSON.stringify(exportData, null, 2);
+      const blob = new Blob([jsonStr], { type: "application/json" });
+
+      const fileName = `${AppString.APP_NAME_NO_SPACES}-backup-contacts.json`;
+
+      if (this.platformCapabilities.hasFileDownload) {
+        // Web platform: Use download link
+        this.downloadUrl = URL.createObjectURL(blob);
+        const downloadAnchor = this.$refs.downloadLink as HTMLAnchorElement;
+        downloadAnchor.href = this.downloadUrl;
+        downloadAnchor.download = fileName;
+        downloadAnchor.click();
+        setTimeout(() => URL.revokeObjectURL(this.downloadUrl), 1000);
+      } else if (this.platformCapabilities.hasFileSystem) {
+        // Native platform: Write to app directory
+        await this.platformService.writeAndShareFile(fileName, jsonStr);
+      } else {
+        throw new Error("This platform does not support file downloads.");
+      }
+
+      this.$notify(
+        {
+          group: "alert",
+          type: "success",
+          title: "Export Successful",
+          text: this.platformCapabilities.hasFileDownload
+            ? "See your downloads directory for the backup."
+            : "The backup file has been saved.",
+        },
+        3000,
+      );
+    } catch (error) {
+      logger.error("Export Error:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Export Error",
+          text: "There was an error exporting the data.",
+        },
+        3000,
+      );
+    }
+  }
+
+  /**
+   * Computes class names for the initial download button
+   * @returns Object with 'hidden' class when download is in progress (web platform only)
+   */
+  public computedStartDownloadLinkClassNames() {
+    return {
+      hidden: this.downloadUrl && this.platformCapabilities.hasFileDownload,
+    };
+  }
+
+  /**
+   * Computes class names for the secondary download link
+   * @returns Object with 'hidden' class when no download is available or not on web platform
+   */
+  public computedDownloadLinkClassNames() {
+    return {
+      hidden: !this.downloadUrl || !this.platformCapabilities.hasFileDownload,
+    };
+  }
+}
+</script>

src/components/FeedFilters.vue

@@ -99,6 +99,9 @@ import {
   LTileLayer,
 } from "@vue-leaflet/vue-leaflet";
 import { Router } from "vue-router";
+
+import { USE_DEXIE_DB } from "@/constants/app";
+import * as databaseUtil from "../db/databaseUtil";
 import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
 
@@ -122,7 +125,10 @@ export default class FeedFilters extends Vue {
   async open(onCloseIfChanged: () => void) {
     this.onCloseIfChanged = onCloseIfChanged;
 
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.hasVisibleDid = !!settings.filterFeedByVisible;
     this.isNearby = !!settings.filterFeedByNearby;
     if (settings.searchBoxes && settings.searchBoxes.length > 0) {
@@ -136,17 +142,29 @@ export default class FeedFilters extends Vue {
   async toggleHasVisibleDid() {
     this.settingChanged = true;
     this.hasVisibleDid = !this.hasVisibleDid;
-    await db.settings.update(MASTER_SETTINGS_KEY, {
+    await databaseUtil.updateDefaultSettings({
       filterFeedByVisible: this.hasVisibleDid,
     });
+
+    if (USE_DEXIE_DB) {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
+        filterFeedByVisible: this.hasVisibleDid,
+      });
+    }
   }
 
   async toggleNearby() {
     this.settingChanged = true;
     this.isNearby = !this.isNearby;
-    await db.settings.update(MASTER_SETTINGS_KEY, {
+    await databaseUtil.updateDefaultSettings({
       filterFeedByNearby: this.isNearby,
     });
+
+    if (USE_DEXIE_DB) {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
+        filterFeedByNearby: this.isNearby,
+      });
+    }
   }
 
   async clearAll() {
@@ -154,11 +172,18 @@ export default class FeedFilters extends Vue {
       this.settingChanged = true;
     }
 
-    await db.settings.update(MASTER_SETTINGS_KEY, {
+    await databaseUtil.updateDefaultSettings({
       filterFeedByNearby: false,
       filterFeedByVisible: false,
     });
 
+    if (USE_DEXIE_DB) {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
+        filterFeedByNearby: false,
+        filterFeedByVisible: false,
+      });
+    }
+
     this.hasVisibleDid = false;
     this.isNearby = false;
   }
@@ -168,11 +193,18 @@ export default class FeedFilters extends Vue {
       this.settingChanged = true;
     }
 
-    await db.settings.update(MASTER_SETTINGS_KEY, {
+    await databaseUtil.updateDefaultSettings({
       filterFeedByNearby: true,
       filterFeedByVisible: true,
     });
 
+    if (USE_DEXIE_DB) {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
+        filterFeedByNearby: true,
+        filterFeedByVisible: true,
+      });
+    }
+
     this.hasVisibleDid = true;
     this.isNearby = true;
   }

src/components/GiftedDialog.vue

@@ -177,7 +177,7 @@
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-facing-decorator";
 
-import { NotificationIface } from "../constants/app";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import {
   createAndSubmitGive,
   didInfo,
@@ -186,7 +186,10 @@ import {
 import * as libsUtil from "../libs/util";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
 import { Contact } from "../db/tables/contacts";
+import * as databaseUtil from "../db/databaseUtil";
 import { retrieveAccountDids } from "../libs/util";
+import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 import EntityIcon from "../components/EntityIcon.vue";
 
 @Component({
@@ -210,7 +213,6 @@ export default class GiftedDialog extends Vue {
   customTitle?: string;
   description = "";
   giver?: libsUtil.GiverReceiverInputInfo; // undefined means no identified giver agent
-  isTrade = false;
   offerId = "";
   prompt = "";
   receiver?: libsUtil.GiverReceiverInputInfo;
@@ -239,11 +241,23 @@ export default class GiftedDialog extends Vue {
     this.currentStep = giver ? 2 : 1;
 
     try {
-      const settings = await retrieveSettingsForActiveAccount();
+      let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+      if (USE_DEXIE_DB) {
+        settings = await retrieveSettingsForActiveAccount();
+      }
       this.apiServer = settings.apiServer || "";
       this.activeDid = settings.activeDid || "";
 
-      this.allContacts = await db.contacts.toArray();
+      const platformService = PlatformServiceFactory.getInstance();
+      const result = await platformService.dbQuery(`SELECT * FROM contacts`);
+      if (result) {
+        this.allContacts = databaseUtil.mapQueryResultToValues(
+          result,
+        ) as unknown as Contact[];
+      }
+      if (USE_DEXIE_DB) {
+        this.allContacts = await db.contacts.toArray();
+      }
 
       this.allMyDids = await retrieveAccountDids();
 
@@ -397,15 +411,12 @@ export default class GiftedDialog extends Vue {
         unitCode,
         this.toProjectId,
         this.offerId,
-        this.isTrade,
+        false,
         undefined,
         this.fromProjectId,
       );
 
-      if (
-        result.type === "error" ||
-        this.isGiveCreationError(result.response)
-      ) {
+      if (!result.success) {
         const errorMessage = this.getGiveCreationErrorMessage(result);
         logger.error("Error with give creation result:", result);
         this.$notify(
@@ -423,7 +434,7 @@ export default class GiftedDialog extends Vue {
             group: "alert",
             type: "success",
             title: "Success",
-            text: `That ${this.isTrade ? "trade" : "gift"} was recorded.`,
+            text: `That gift was recorded.`,
           },
           7000,
         );
@@ -452,15 +463,6 @@ export default class GiftedDialog extends Vue {
 
   // Helper functions for readability
 
-  /**
-   * @param result response "data" from the server
-   * @returns true if the result indicates an error
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  isGiveCreationError(result: any) {
-    return result.status !== 201 || result.data?.error;
-  }
-
   /**
    * @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data")
    * @returns best guess at an error message

src/components/GiftedPrompts.vue

@@ -74,10 +74,12 @@
 import { Vue, Component } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { AppString, NotificationIface } from "../constants/app";
+import { AppString, NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import { db } from "../db/index";
 import { Contact } from "../db/tables/contacts";
+import * as databaseUtil from "../db/databaseUtil";
 import { GiverReceiverInputInfo } from "../libs/util";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 
 @Component
 export default class GivenPrompts extends Vue {
@@ -127,8 +129,16 @@ export default class GivenPrompts extends Vue {
     this.visible = true;
     this.callbackOnFullGiftInfo = callbackOnFullGiftInfo;
 
-    await db.open();
-    this.numContacts = await db.contacts.count();
+    const platformService = PlatformServiceFactory.getInstance();
+    const result = await platformService.dbQuery(
+      "SELECT COUNT(*) FROM contacts",
+    );
+    if (result) {
+      this.numContacts = result.values[0][0] as number;
+    }
+    if (USE_DEXIE_DB) {
+      this.numContacts = await db.contacts.count();
+    }
     this.shownContactDbIndices = new Array<boolean>(this.numContacts); // all undefined to start
   }
 
@@ -217,6 +227,7 @@ export default class GivenPrompts extends Vue {
 
     let someContactDbIndex = Math.floor(Math.random() * this.numContacts);
     let count = 0;
+
     // as long as the index has an entry, loop
     while (
       this.shownContactDbIndices[someContactDbIndex] != null &&
@@ -229,10 +240,21 @@ export default class GivenPrompts extends Vue {
       this.nextIdeaPastContacts();
     } else {
       // get the contact at that offset
-      await db.open();
-      this.currentContact = await db.contacts
-        .offset(someContactDbIndex)
-        .first();
+      const platformService = PlatformServiceFactory.getInstance();
+      const result = await platformService.dbQuery(
+        "SELECT * FROM contacts LIMIT 1 OFFSET ?",
+        [someContactDbIndex],
+      );
+      if (result) {
+        const mappedContacts = databaseUtil.mapQueryResultToValues(result);
+        this.currentContact = mappedContacts[0] as unknown as Contact;
+      }
+      if (USE_DEXIE_DB) {
+        await db.open();
+        this.currentContact = await db.contacts
+          .offset(someContactDbIndex)
+          .first();
+      }
       this.shownContactDbIndices[someContactDbIndex] = true;
     }
   }

src/components/HiddenDidDialog.vue

@@ -48,11 +48,7 @@
                   <span>
                     {{ didInfo(visDid) }}
                     <span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
-                      <a
-                        :href="`/did/${visDid}`"
-                        target="_blank"
-                        class="text-blue-500"
-                      >
+                      <a :href="`/did/${visDid}`" class="text-blue-500">
                         <font-awesome
                           icon="arrow-up-right-from-square"
                           class="fa-fw"

src/components/ImageMethodDialog.vue

@@ -1,108 +1,413 @@
 <template>
   <div v-if="visible" class="dialog-overlay z-[60]">
     <div class="dialog relative">
-      <div class="text-lg text-center font-light relative z-50">
+      <div class="text-lg text-center font-bold relative">
+        <h1 id="ViewHeading" class="text-center font-bold">
+          <span v-if="uploading">Uploading Image&hellip;</span>
+          <span v-else-if="blob">{{
+            crop ? "Crop Image" : "Preview Image"
+          }}</span>
+          <span v-else-if="showCameraPreview">Upload Image</span>
+          <span v-else>Add Photo</span>
+        </h1>
         <div
-          id="ViewHeading"
-          class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-0.5 bg-black/50 text-white leading-none"
-        >
-          Add Photo
-        </div>
-        <div
-          class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white"
+          class="text-2xl text-center px-1 py-0.5 leading-none absolute -right-1 top-0"
           @click="close()"
         >
           <font-awesome icon="xmark" class="w-[1em]"></font-awesome>
         </div>
       </div>
 
-      <div>
-        <div class="text-center mt-8">
-          <div>
-            <font-awesome
-              icon="camera"
-              class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md"
-              @click="openPhotoDialog()"
-            />
-          </div>
-          <div class="mt-4">
-            <input type="file" @change="uploadImageFile" />
-          </div>
-          <div class="mt-4">
-            <span class="mt-2">
-              ... or paste a URL:
-              <input v-model="imageUrl" type="text" class="border-2" />
-            </span>
-            <span class="ml-2">
-              <font-awesome
-                v-if="imageUrl"
-                icon="check"
-                class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-2 rounded-md cursor-pointer"
-                @click="acceptUrl"
-              />
-              <!-- so that there's no shifting when it becomes visible -->
-              <font-awesome
-                v-else
-                icon="check"
-                class="text-white bg-white px-2 py-2"
-              />
-            </span>
-          </div>
+      <!-- FEEDBACK: Show if camera preview is not visible after mounting -->
+      <div
+        v-if="!showCameraPreview && !blob && isRegistered"
+        class="bg-red-100 text-red-700 border border-red-400 rounded px-4 py-3 my-4 text-sm"
+      >
+        <strong>Camera preview not started.</strong>
+        <div v-if="cameraState === 'off'">
+          <span v-if="platformCapabilities.isMobile">
+            <b>Note:</b> This mobile browser may not support direct camera
+            access, or the app is treating it as a native app.<br />
+            <b>Tip:</b> Try using a desktop browser, or check if your browser
+            supports camera access for web apps.<br />
+            <b>Developer:</b> The platform detection logic may be skipping
+            camera preview for mobile browsers. <br />
+            <b>Action:</b> Review <code>platformCapabilities.isMobile</code> and
+            ensure web browsers on mobile are not treated as native apps.
+          </span>
+          <span v-else>
+            <b>Tip:</b> Your browser supports camera APIs, but the preview did
+            not start. Try refreshing the page or checking browser permissions.
+          </span>
         </div>
+        <div v-else-if="cameraState === 'error'">
+          <b>Error:</b> {{ error || cameraStateMessage }}
+        </div>
+        <div v-else>
+          <b>Status:</b> {{ cameraStateMessage || "Unknown reason." }}
+        </div>
+      </div>
+
+      <div class="mt-4">
+        <template v-if="isRegistered">
+          <div v-if="!blob">
+            <div
+              class="border-b border-dashed border-slate-300 text-orange-400 mb-4 font-bold text-sm"
+            >
+              <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
+                Take a photo with your camera
+              </span>
+            </div>
+            <div
+              v-if="showCameraPreview"
+              class="camera-preview relative flex bg-black overflow-hidden mb-4"
+            >
+              <!-- Diagnostic Panel -->
+              <div
+                v-if="showDiagnostics"
+                class="absolute top-0 left-0 right-0 bg-black/80 text-white text-xs p-2 pt-8 z-20 overflow-auto max-h-[50vh]"
+              >
+                <div class="grid grid-cols-2 gap-2">
+                  <div>
+                    <p><strong>Camera State:</strong> {{ cameraState }}</p>
+                    <p>
+                      <strong>State Message:</strong>
+                      {{ cameraStateMessage || "None" }}
+                    </p>
+                    <p><strong>Error:</strong> {{ error || "None" }}</p>
+                    <p>
+                      <strong>Preview Active:</strong>
+                      {{ showCameraPreview ? "Yes" : "No" }}
+                    </p>
+                    <p>
+                      <strong>Stream Active:</strong>
+                      {{ !!cameraStream ? "Yes" : "No" }}
+                    </p>
+                  </div>
+                  <div>
+                    <p><strong>Browser:</strong> {{ userAgent }}</p>
+                    <p>
+                      <strong>HTTPS:</strong>
+                      {{ isSecureContext ? "Yes" : "No" }}
+                    </p>
+                    <p>
+                      <strong>MediaDevices:</strong>
+                      {{ hasMediaDevices ? "Yes" : "No" }}
+                    </p>
+                    <p>
+                      <strong>GetUserMedia:</strong>
+                      {{ hasGetUserMedia ? "Yes" : "No" }}
+                    </p>
+                    <p>
+                      <strong>Platform:</strong>
+                      {{ platformCapabilities.isMobile ? "Mobile" : "Desktop" }}
+                    </p>
+                  </div>
+                </div>
+              </div>
+
+              <!-- Toggle Diagnostics Button -->
+              <button
+                class="absolute top-2 right-2 bg-black/50 text-white px-2 py-1 rounded text-xs z-30"
+                @click="toggleDiagnostics"
+              >
+                {{ showDiagnostics ? "Hide Diagnostics" : "Show Diagnostics" }}
+              </button>
+              <div class="camera-container w-full h-full relative">
+                <video
+                  ref="videoElement"
+                  class="camera-video w-full h-full object-cover"
+                  autoplay
+                  playsinline
+                  muted
+                ></video>
+                <div
+                  class="absolute bottom-4 inset-x-0 flex items-center justify-center gap-4"
+                >
+                  <button
+                    class="bg-white text-slate-800 p-3 rounded-full text-2xl leading-none"
+                    @click="capturePhoto"
+                  >
+                    <font-awesome icon="camera" class="w-[1em]" />
+                  </button>
+                  <button
+                    v-if="platformCapabilities.isMobile"
+                    class="bg-white text-slate-800 p-3 rounded-full text-2xl leading-none"
+                    @click="rotateCamera"
+                  >
+                    <font-awesome icon="rotate" class="w-[1em]" />
+                  </button>
+                </div>
+              </div>
+            </div>
+            <div
+              class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-4 font-bold text-sm"
+            >
+              <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
+                OR choose a file from your device
+              </span>
+            </div>
+            <div class="mt-4">
+              <input
+                type="file"
+                class="w-full file:text-center file:bg-gradient-to-b file:from-slate-400 file:to-slate-700 file:shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] file:text-white file:px-3 file:py-2 file:rounded-md file:border-none file:cursor-pointer file:me-2"
+                @change="uploadImageFile"
+              />
+            </div>
+            <div
+              class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-4 font-bold text-sm"
+            >
+              <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
+                OR paste an image URL
+              </span>
+            </div>
+            <div class="flex items-center gap-2 mt-4">
+              <input
+                v-model="imageUrl"
+                type="text"
+                class="block w-full rounded border border-slate-400 px-4 py-2"
+                placeholder="https://example.com/image.jpg"
+              />
+              <button
+                v-if="imageUrl"
+                class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-2 rounded-md cursor-pointer"
+                @click="acceptUrl"
+              >
+                <font-awesome icon="check" class="fa-fw" />
+              </button>
+            </div>
+          </div>
+
+          <div v-else>
+            <div v-if="uploading" class="flex justify-center">
+              <font-awesome
+                icon="spinner"
+                class="fa-spin fa-3x text-center block px-12 py-12"
+              />
+            </div>
+            <div v-else>
+              <div v-if="crop">
+                <VuePictureCropper
+                  :box-style="{
+                    backgroundColor: '#f8f8f8',
+                    margin: 'auto',
+                  }"
+                  :img="createBlobURL(blob)"
+                  :options="{
+                    viewMode: 1,
+                    dragMode: 'crop',
+                    aspectRatio: 1 / 1,
+                  }"
+                  class="max-h-[50vh] max-w-[90vw] object-contain"
+                />
+              </div>
+              <div v-else>
+                <div class="flex justify-center">
+                  <img
+                    :src="createBlobURL(blob)"
+                    class="mt-2 rounded max-h-[50vh] max-w-[90vw] object-contain"
+                  />
+                </div>
+              </div>
+              <div
+                :class="[
+                  'grid gap-2 mt-2',
+                  showRetry ? 'grid-cols-2' : 'grid-cols-1',
+                ]"
+              >
+                <button
+                  class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-2 px-3 rounded-md"
+                  @click="uploadImage"
+                >
+                  <span>Upload</span>
+                </button>
+                <button
+                  v-if="showRetry"
+                  class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-2 px-3 rounded-md"
+                  @click="retryImage"
+                >
+                  <span>Retry</span>
+                </button>
+              </div>
+            </div>
+          </div>
+        </template>
+        <template v-else>
+          <div
+            id="noticeBeforeUpload"
+            class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3"
+            role="alert"
+            aria-live="polite"
+          >
+            <p class="mb-2">
+              Before you can upload a photo, a friend needs to register you.
+            </p>
+            <button
+              class="inline-block text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+              @click="handleQRCodeClick"
+            >
+              Share Your Info
+            </button>
+          </div>
+        </template>
       </div>
     </div>
   </div>
-  <PhotoDialog ref="photoDialog" />
 </template>
 
 <script lang="ts">
 import axios from "axios";
 import { ref } from "vue";
 import { Component, Vue } from "vue-facing-decorator";
-
-import PhotoDialog from "../components/PhotoDialog.vue";
-import { NotificationIface } from "../constants/app";
+import VuePictureCropper, { cropper } from "vue-picture-cropper";
+import { Capacitor } from "@capacitor/core";
+import {
+  DEFAULT_IMAGE_API_SERVER,
+  NotificationIface,
+  USE_DEXIE_DB,
+} from "../constants/app";
+import { retrieveSettingsForActiveAccount } from "../db/index";
+import { accessToken } from "../libs/crypto";
+import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
+import * as databaseUtil from "../db/databaseUtil";
 
 const inputImageFileNameRef = ref<Blob>();
 
 @Component({
-  components: { PhotoDialog },
+  components: { VuePictureCropper },
+  props: {
+    isRegistered: {
+      type: Boolean,
+      default: true,
+    },
+    defaultCameraMode: {
+      type: String,
+      default: "environment",
+      validator: (value: string) => ["environment", "user"].includes(value),
+    },
+  },
 })
 export default class ImageMethodDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  claimType: string;
+  /** Active DID for user authentication */
+  activeDid = "";
+
+  /** Current image blob being processed */
+  blob?: Blob;
+
+  /** Type of claim for the image */
+  claimType: string = "";
+
+  /** Whether to show cropping interface */
   crop: boolean = false;
+
+  /** Name of the selected file */
+  fileName?: string;
+
+  /** Callback function to set image URL after upload */
   imageCallback: (imageUrl?: string) => void = () => {};
+
+  /** URL for image input */
   imageUrl?: string;
+
+  /** Whether to show retry button */
+  showRetry = true;
+
+  /** Upload progress state */
+  uploading = false;
+
+  /** Dialog visibility state */
   visible = false;
 
+  /** Whether to show camera preview */
+  showCameraPreview = false;
+
+  /** Camera stream reference */
+  private cameraStream: MediaStream | null = null;
+
+  /** Current camera facing mode */
+  private currentFacingMode: "environment" | "user" = "environment";
+
+  private platformService = PlatformServiceFactory.getInstance();
+  URL = window.URL || window.webkitURL;
+
+  private platformCapabilities = this.platformService.getCapabilities();
+
+  // Add diagnostic properties
+  showDiagnostics = false;
+  userAgent = navigator.userAgent;
+  isSecureContext = window.isSecureContext;
+  hasMediaDevices = !!navigator.mediaDevices;
+  hasGetUserMedia = !!(
+    navigator.mediaDevices && navigator.mediaDevices.getUserMedia
+  );
+  cameraState:
+    | "off"
+    | "initializing"
+    | "ready"
+    | "active"
+    | "error"
+    | "permission_denied"
+    | "not_found"
+    | "in_use" = "off";
+  cameraStateMessage?: string;
+  error: string | null = null;
+
+  /**
+   * Lifecycle hook: Initializes component and retrieves user settings
+   * @throws {Error} When settings retrieval fails
+   */
+  async mounted() {
+    try {
+      let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+      if (USE_DEXIE_DB) {
+        settings = await retrieveSettingsForActiveAccount();
+      }
+      this.activeDid = settings.activeDid || "";
+    } catch (error: unknown) {
+      logger.error("Error retrieving settings from database:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text:
+            error instanceof Error
+              ? error.message
+              : "There was an error retrieving your settings.",
+        },
+        -1,
+      );
+    }
+  }
+
+  /**
+   * Lifecycle hook: Cleans up camera stream when component is destroyed
+   */
+  beforeDestroy() {
+    this.stopCameraPreview();
+  }
+
   open(setImageFn: (arg: string) => void, claimType: string, crop?: boolean) {
+    logger.debug("ImageMethodDialog.open called");
     this.claimType = claimType;
     this.crop = !!crop;
     this.imageCallback = setImageFn;
-
     this.visible = true;
-  }
+    this.currentFacingMode = this.defaultCameraMode as "environment" | "user";
 
-  openPhotoDialog(blob?: Blob, fileName?: string) {
-    this.visible = false;
-
-    (this.$refs.photoDialog as PhotoDialog).open(
-      this.imageCallback,
-      this.claimType,
-      this.crop,
-      blob,
-      fileName,
-    );
+    // Start camera preview immediately
+    logger.debug("Starting camera preview from open()");
+    this.startCameraPreview();
   }
 
   async uploadImageFile(event: Event) {
-    this.visible = false;
+    const target = event.target as HTMLInputElement;
+    if (!target.files) return;
 
-    inputImageFileNameRef.value = event.target.files[0];
-    // https://developer.mozilla.org/en-US/docs/Web/API/File
-    // ... plus it has a `type` property from my testing
+    inputImageFileNameRef.value = target.files[0];
     const file = inputImageFileNameRef.value;
     if (file != null) {
       const reader = new FileReader();
@@ -112,7 +417,9 @@ export default class ImageMethodDialog extends Vue {
           const blob = new Blob([new Uint8Array(data)], {
             type: file.type,
           });
-          this.openPhotoDialog(blob, file.name as string);
+          this.blob = blob;
+          this.fileName = file.name;
+          this.showRetry = false;
         }
       };
       reader.readAsArrayBuffer(file as Blob);
@@ -120,21 +427,16 @@ export default class ImageMethodDialog extends Vue {
   }
 
   async acceptUrl() {
-    this.visible = false;
     if (this.crop) {
       try {
-        const urlBlobResponse: Blob = await axios.get(this.imageUrl as string, {
-          responseType: "blob", // This ensures the data is returned as a Blob
+        const urlBlobResponse = await axios.get(this.imageUrl as string, {
+          responseType: "blob",
         });
         const fullUrl = new URL(this.imageUrl as string);
         const fileName = fullUrl.pathname.split("/").pop() as string;
-        (this.$refs.photoDialog as PhotoDialog).open(
-          this.imageCallback,
-          this.claimType,
-          this.crop,
-          urlBlobResponse.data as Blob,
-          fileName,
-        );
+        this.blob = urlBlobResponse.data as Blob;
+        this.fileName = fileName;
+        this.showRetry = false;
       } catch (error) {
         this.$notify(
           {
@@ -148,11 +450,273 @@ export default class ImageMethodDialog extends Vue {
       }
     } else {
       this.imageCallback(this.imageUrl);
+      this.close();
     }
   }
 
   close() {
     this.visible = false;
+    this.stopCameraPreview();
+    const bottomNav = document.querySelector("#QuickNav") as HTMLElement;
+    if (bottomNav) {
+      bottomNav.style.display = "";
+    }
+    this.blob = undefined;
+    this.showCameraPreview = false;
+  }
+
+  async startCameraPreview() {
+    logger.debug("startCameraPreview called");
+    logger.debug("Current showCameraPreview state:", this.showCameraPreview);
+    logger.debug("Platform capabilities:", this.platformCapabilities);
+    logger.debug("MediaDevices available:", !!navigator.mediaDevices);
+    logger.debug(
+      "getUserMedia available:",
+      !!(navigator.mediaDevices && navigator.mediaDevices.getUserMedia),
+    );
+
+    try {
+      this.cameraState = "initializing";
+      this.cameraStateMessage = "Requesting camera access...";
+      this.showCameraPreview = true;
+      await this.$nextTick();
+
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        throw new Error("Camera API not available in this browser");
+      }
+
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: this.currentFacingMode },
+      });
+      logger.debug("Camera access granted");
+      this.cameraStream = stream;
+      this.cameraState = "active";
+      this.cameraStateMessage = "Camera is active";
+
+      await this.$nextTick();
+
+      const videoElement = this.$refs.videoElement as HTMLVideoElement;
+      if (videoElement) {
+        videoElement.srcObject = stream;
+        await new Promise((resolve) => {
+          videoElement.onloadedmetadata = () => {
+            videoElement
+              .play()
+              .then(() => {
+                logger.debug("Video element started playing");
+                resolve(true);
+              })
+              .catch((error) => {
+                logger.error("Error playing video:", error);
+                throw error;
+              });
+          };
+        });
+      } else {
+        logger.error("Video element not found");
+        throw new Error("Video element not found");
+      }
+    } catch (error) {
+      logger.error("Error starting camera preview:", error);
+      let errorMessage =
+        error instanceof Error ? error.message : "Failed to access camera";
+      if (
+        error instanceof Error &&
+        (error.name === "NotReadableError" || error.name === "TrackStartError")
+      ) {
+        errorMessage =
+          "Camera is in use by another application. Please close any other apps or browser tabs using the camera and try again.";
+      } else if (
+        error instanceof Error &&
+        (error.name === "NotAllowedError" ||
+          error.name === "PermissionDeniedError")
+      ) {
+        errorMessage =
+          "Camera access was denied. Please allow camera access in your browser settings.";
+      }
+      this.cameraState = "error";
+      this.cameraStateMessage = errorMessage;
+      this.error = errorMessage;
+      this.showCameraPreview = false;
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: errorMessage,
+        },
+        5000,
+      );
+    }
+  }
+
+  stopCameraPreview() {
+    if (this.cameraStream) {
+      this.cameraStream.getTracks().forEach((track) => track.stop());
+      this.cameraStream = null;
+    }
+    this.showCameraPreview = false;
+    this.cameraState = "off";
+    this.cameraStateMessage = "Camera stopped";
+    this.error = null;
+  }
+
+  async capturePhoto() {
+    if (!this.cameraStream) return;
+
+    try {
+      const videoElement = this.$refs.videoElement as HTMLVideoElement;
+      const canvas = document.createElement("canvas");
+      canvas.width = videoElement.videoWidth;
+      canvas.height = videoElement.videoHeight;
+      const ctx = canvas.getContext("2d");
+      ctx?.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+
+      canvas.toBlob(
+        (blob) => {
+          if (blob) {
+            this.blob = blob;
+            this.fileName = `photo_${Date.now()}.jpg`;
+            this.showRetry = true;
+            this.stopCameraPreview();
+          }
+        },
+        "image/jpeg",
+        0.95,
+      );
+    } catch (error) {
+      logger.error("Error capturing photo:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Failed to capture photo. Please try again.",
+        },
+        5000,
+      );
+    }
+  }
+
+  async rotateCamera() {
+    // Toggle between front and back cameras
+    this.currentFacingMode =
+      this.currentFacingMode === "environment" ? "user" : "environment";
+
+    // Stop current stream
+    if (this.cameraStream) {
+      this.cameraStream.getTracks().forEach((track) => track.stop());
+      this.cameraStream = null;
+    }
+
+    // Start new stream with updated facing mode
+    await this.startCameraPreview();
+  }
+
+  private createBlobURL(blob: Blob): string {
+    return URL.createObjectURL(blob);
+  }
+
+  async retryImage() {
+    this.blob = undefined;
+    if (!this.platformCapabilities.isNativeApp) {
+      await this.startCameraPreview();
+    }
+  }
+
+  async uploadImage() {
+    this.uploading = true;
+
+    if (this.crop) {
+      this.blob = (await cropper?.getBlob()) || undefined;
+    }
+
+    const token = await accessToken(this.activeDid);
+    const headers = {
+      Authorization: "Bearer " + token,
+    };
+    const formData = new FormData();
+    if (!this.blob) {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "There was an error finding the picture. Please try again.",
+        },
+        5000,
+      );
+      this.uploading = false;
+      this.close();
+      return;
+    }
+    formData.append("image", this.blob, this.fileName || "photo.jpg");
+    formData.append("claimType", this.claimType);
+    try {
+      if (
+        window.location.hostname === "localhost" &&
+        !DEFAULT_IMAGE_API_SERVER.includes("localhost")
+      ) {
+        logger.log(
+          "Using shared image API server, so only users on that server can play with images.",
+        );
+      }
+      const response = await axios.post(
+        DEFAULT_IMAGE_API_SERVER + "/image",
+        formData,
+        { headers },
+      );
+      this.uploading = false;
+
+      this.close();
+      this.imageCallback(response.data.url as string);
+    } catch (error: unknown) {
+      let errorMessage = "There was an error saving the picture.";
+
+      if (axios.isAxiosError(error)) {
+        const status = error.response?.status;
+        const data = error.response?.data;
+
+        if (status === 401) {
+          errorMessage = "Authentication failed. Please try logging in again.";
+        } else if (status === 413) {
+          errorMessage = "Image file is too large. Please try a smaller image.";
+        } else if (status === 415) {
+          errorMessage =
+            "Unsupported image format. Please try a different image.";
+        } else if (status && status >= 500) {
+          errorMessage = "Server error. Please try again later.";
+        } else if (data?.message) {
+          errorMessage = data.message;
+        }
+      }
+
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: errorMessage,
+        },
+        5000,
+      );
+      this.uploading = false;
+      this.blob = undefined;
+      this.close();
+    }
+  }
+
+  // Add toggle method
+  toggleDiagnostics() {
+    this.showDiagnostics = !this.showDiagnostics;
+  }
+
+  private handleQRCodeClick() {
+    if (Capacitor.isNativePlatform()) {
+      this.$router.push({ name: "contact-qr-scan-full" });
+    } else {
+      this.$router.push({ name: "contact-qr" });
+    }
   }
 }
 </script>
@@ -178,5 +742,16 @@ export default class ImageMethodDialog extends Vue {
   border-radius: 0.5rem;
   width: 100%;
   max-width: 700px;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Add styles for diagnostic panel */
+.diagnostic-panel {
+  font-family: monospace;
+  white-space: pre-wrap;
+  word-break: break-all;
 }
 </style>

src/components/ImageViewer.vue

@@ -40,6 +40,7 @@
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-facing-decorator";
 import { UAParser } from "ua-parser-js";
+import { logger } from "../utils/logger";
 
 @Component({ emits: ["update:isOpen"] })
 export default class ImageViewer extends Vue {

src/components/MembersList.vue

@@ -172,8 +172,10 @@ import {
 } from "../libs/endorserServer";
 import { decryptMessage } from "../libs/crypto";
 import { Contact } from "../db/tables/contacts";
+import * as databaseUtil from "../db/databaseUtil";
 import * as libsUtil from "../libs/util";
-import { NotificationIface } from "../constants/app";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 
 interface Member {
   admitted: boolean;
@@ -209,7 +211,10 @@ export default class MembersList extends Vue {
   contacts: Array<Contact> = [];
 
   async created() {
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.activeDid = settings.activeDid || "";
     this.apiServer = settings.apiServer || "";
     this.firstName = settings.firstName || "";
@@ -296,7 +301,7 @@ export default class MembersList extends Vue {
         this.decryptedMembers.length === 0 ||
         this.decryptedMembers[0].member.memberId !== this.members[0].memberId
       ) {
-        return "Your password is not the same as the organizer. Reload or have them check their password.";
+        return "Your password is not the same as the organizer. Retry or have them check their password.";
       } else {
         // the first (organizer) member was decrypted OK
         return "";
@@ -337,7 +342,7 @@ export default class MembersList extends Vue {
           group: "alert",
           type: "info",
           title: "Contact Exists",
-          text: "They are in your contacts. If you want to remove them, you must do that from the contacts screen.",
+          text: "They are in your contacts. To remove them, use the contacts page.",
         },
         10000,
       );
@@ -347,7 +352,7 @@ export default class MembersList extends Vue {
           group: "alert",
           type: "info",
           title: "Contact Available",
-          text: "This is to add them to your contacts. If you want to remove them later, you must do that from the contacts screen.",
+          text: "This is to add them to your contacts. To remove them later, use the contacts page.",
         },
         10000,
       );
@@ -355,7 +360,16 @@ export default class MembersList extends Vue {
   }
 
   async loadContacts() {
-    this.contacts = await db.contacts.toArray();
+    const platformService = PlatformServiceFactory.getInstance();
+    const result = await platformService.dbQuery("SELECT * FROM contacts");
+    if (result) {
+      this.contacts = databaseUtil.mapQueryResultToValues(
+        result,
+      ) as unknown as Contact[];
+    }
+    if (USE_DEXIE_DB) {
+      this.contacts = await db.contacts.toArray();
+    }
   }
 
   getContactFor(did: string): Contact | undefined {
@@ -439,7 +453,14 @@ export default class MembersList extends Vue {
           if (result.success) {
             decrMember.isRegistered = true;
             if (oldContact) {
-              await db.contacts.update(decrMember.did, { registered: true });
+              const platformService = PlatformServiceFactory.getInstance();
+              await platformService.dbExec(
+                "UPDATE contacts SET registered = ? WHERE did = ?",
+                [true, decrMember.did],
+              );
+              if (USE_DEXIE_DB) {
+                await db.contacts.update(decrMember.did, { registered: true });
+              }
               oldContact.registered = true;
             }
             this.$notify(
@@ -492,7 +513,14 @@ export default class MembersList extends Vue {
         name: member.name,
       };
 
-      await db.contacts.add(newContact);
+      const platformService = PlatformServiceFactory.getInstance();
+      await platformService.dbExec(
+        "INSERT INTO contacts (did, name) VALUES (?, ?)",
+        [member.did, member.name],
+      );
+      if (USE_DEXIE_DB) {
+        await db.contacts.add(newContact);
+      }
       this.contacts.push(newContact);
 
       this.$notify(

src/components/OfferDialog.vue

@@ -82,12 +82,13 @@
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-facing-decorator";
 
-import { NotificationIface } from "../constants/app";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import {
   createAndSubmitOffer,
   serverMessageForUser,
 } from "../libs/endorserServer";
 import * as libsUtil from "../libs/util";
+import * as databaseUtil from "../db/databaseUtil";
 import { retrieveSettingsForActiveAccount } from "../db/index";
 import { logger } from "../utils/logger";
 
@@ -116,7 +117,10 @@ export default class OfferDialog extends Vue {
       this.recipientDid = recipientDid;
       this.recipientName = recipientName;
 
-      const settings = await retrieveSettingsForActiveAccount();
+      let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+      if (USE_DEXIE_DB) {
+        settings = await retrieveSettingsForActiveAccount();
+      }
       this.apiServer = settings.apiServer || "";
       this.activeDid = settings.activeDid || "";
 
@@ -245,10 +249,7 @@ export default class OfferDialog extends Vue {
         this.projectId,
       );
 
-      if (
-        result.type === "error" ||
-        this.isOfferCreationError(result.response)
-      ) {
+      if (!result.success) {
         const errorMessage = this.getOfferCreationErrorMessage(result);
         logger.error("Error with offer creation result:", result);
         this.$notify(
@@ -292,15 +293,6 @@ export default class OfferDialog extends Vue {
 
   // Helper functions for readability
 
-  /**
-   * @param result response "data" from the server
-   * @returns true if the result indicates an error
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  isOfferCreationError(result: any) {
-    return result.status !== 201 || result.data?.error;
-  }
-
   /**
    * @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data")
    * @returns best guess at an error message

src/components/OnboardingDialog.vue

@@ -5,7 +5,7 @@
       <h1 class="text-xl font-bold text-center mb-4 relative">
         Welcome to Time Safari
         <br />
-        - Showcasing Gratitude & Magnifying Time
+        - Showcase Impact & Magnify Time
         <div
           class="text-lg text-center leading-none absolute right-0 -top-1"
           @click="onClickClose(true)"
@@ -14,6 +14,9 @@
         </div>
       </h1>
 
+      The feed underneath this pop-up shows the latest contributions, some from
+      people and some from projects.
+
       <p v-if="isRegistered" class="mt-4">
         You can now log things that you've seen:
         <span v-if="numContacts > 0">
@@ -23,14 +26,10 @@
         <span class="bg-green-600 text-white rounded-full">
           <font-awesome icon="plus" class="fa-fw" />
         </span>
-        button to express your appreciation for... whatever -- maybe thanks for
-        showing you all these fascinating stories of
-        <em>gratitude</em>.
+        button to express your appreciation for... whatever.
       </p>
-      <p v-else class="mt-4">
-        The feed underneath this pop-up shows the latest gifts that others have
-        recognized. Once someone registers you, you can log your appreciation,
-        too.
+      <p class="mt-4">
+        Once someone registers you, you can log your appreciation, too.
       </p>
 
       <p class="mt-4">
@@ -201,13 +200,16 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 
-import { NotificationIface } from "../constants/app";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import {
   db,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
 } from "../db/index";
+import * as databaseUtil from "../db/databaseUtil";
 import { OnboardPage } from "../libs/util";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
+import { Contact } from "@/db/tables/contacts";
 
 @Component({
   computed: {
@@ -222,7 +224,7 @@ export default class OnboardingDialog extends Vue {
   $router!: Router;
 
   activeDid = "";
-  firstContactName = null;
+  firstContactName = "";
   givenName = "";
   isRegistered = false;
   numContacts = 0;
@@ -231,29 +233,54 @@ export default class OnboardingDialog extends Vue {
 
   async open(page: OnboardPage) {
     this.page = page;
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.activeDid = settings.activeDid || "";
     this.isRegistered = !!settings.isRegistered;
-    const contacts = await db.contacts.toArray();
-    this.numContacts = contacts.length;
-    if (this.numContacts > 0) {
-      this.firstContactName = contacts[0].name;
+    const platformService = PlatformServiceFactory.getInstance();
+    const dbContacts = await platformService.dbQuery("SELECT * FROM contacts");
+    if (dbContacts) {
+      this.numContacts = dbContacts.values.length;
+      const firstContact = dbContacts.values[0];
+      const fullContact = databaseUtil.mapColumnsToValues(dbContacts.columns, [
+        firstContact,
+      ]) as unknown as Contact;
+      this.firstContactName = fullContact.name || "";
+    }
+    if (USE_DEXIE_DB) {
+      const contacts = await db.contacts.toArray();
+      this.numContacts = contacts.length;
+      if (this.numContacts > 0) {
+        this.firstContactName = contacts[0].name || "";
+      }
     }
     this.visible = true;
     if (this.page === OnboardPage.Create) {
       // we'll assume that they've been through all the other pages
-      await updateAccountSettings(this.activeDid, {
+      await databaseUtil.updateDidSpecificSettings(this.activeDid, {
         finishedOnboarding: true,
       });
+      if (USE_DEXIE_DB) {
+        await updateAccountSettings(this.activeDid, {
+          finishedOnboarding: true,
+        });
+      }
     }
   }
 
   async onClickClose(done?: boolean, goHome?: boolean) {
     this.visible = false;
     if (done) {
-      await updateAccountSettings(this.activeDid, {
+      await databaseUtil.updateDidSpecificSettings(this.activeDid, {
         finishedOnboarding: true,
       });
+      if (USE_DEXIE_DB) {
+        await updateAccountSettings(this.activeDid, {
+          finishedOnboarding: true,
+        });
+      }
       if (goHome) {
         this.$router.push({ name: "home" });
       }

src/components/PhotoDialog.vue

@@ -1,18 +1,30 @@
+/** * PhotoDialog.vue - Cross-platform photo capture and selection component * *
+This component provides a unified interface for taking photos and selecting
+images * across different platforms (web, mobile) using the PlatformService. It
+supports: * - Taking photos using device camera * - Selecting images from device
+gallery * - Image cropping functionality * - Image upload to server * - Error
+handling and user feedback * * Features: * - Responsive design with mobile-first
+approach * - Cross-platform compatibility through PlatformService * - Image
+cropping with aspect ratio control * - Progress feedback during upload * -
+Comprehensive error handling * * @author Matthew Raymer * @version 1.0.0 * @file
+PhotoDialog.vue */
+
 <template>
   <div v-if="visible" class="dialog-overlay z-[60]">
     <div class="dialog relative">
       <div class="text-lg text-center font-light relative z-50">
         <div
           id="ViewHeading"
-          class="text-center font-bold absolute top-0 left-0 right-0 px-4 py-0.5 bg-black/50 text-white leading-none"
+          class="text-center font-bold absolute top-0 inset-x-0 px-4 py-2 bg-black/50 text-white leading-none pointer-events-none"
         >
           <span v-if="uploading"> Uploading... </span>
           <span v-else-if="blob"> Look Good? </span>
+          <span v-else-if="showCameraPreview"> Take Photo </span>
           <span v-else> Say "Cheese"! </span>
         </div>
 
         <div
-          class="text-lg text-center px-2 py-0.5 leading-none absolute right-0 top-0 text-white"
+          class="text-lg text-center px-2 py-2 leading-none absolute right-0 top-0 text-white cursor-pointer"
           @click="close()"
         >
           <font-awesome icon="xmark" class="w-[1em]"></font-awesome>
@@ -36,15 +48,10 @@
             :options="{
               viewMode: 1,
               dragMode: 'crop',
-              aspectRatio: 9 / 9,
+              aspectRatio: 1 / 1,
             }"
             class="max-h-[90vh] max-w-[90vw] object-contain"
           />
-          <!-- This gives a round cropper.
-            :presetMode="{
-              mode: 'round',
-            }"
-          -->
         </div>
         <div v-else>
           <div class="flex justify-center">
@@ -54,67 +61,55 @@
             />
           </div>
         </div>
-        <div class="absolute bottom-[1rem] left-[1rem] px-2 py-1">
+        <div class="grid grid-cols-2 gap-2 mt-2">
           <button
-            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-1 px-2 rounded-md"
+            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-2 px-3 rounded-md"
             @click="uploadImage"
           >
             <span>Upload</span>
           </button>
-        </div>
-        <div
-          v-if="showRetry"
-          class="absolute bottom-[1rem] right-[1rem] px-2 py-1"
-        >
           <button
-            class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-1 px-2 rounded-md"
+            v-if="showRetry"
+            class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white py-2 px-3 rounded-md"
             @click="retryImage"
           >
             <span>Retry</span>
           </button>
         </div>
       </div>
-      <div v-else ref="cameraContainer">
-        <!--
-          Camera "resolution" doesn't change how it shows on screen but rather stretches the result,
-          eg. the following which just stretches it vertically:
-          :resolution="{ width: 375, height: 812 }"
-        -->
-        <camera
-          ref="camera"
-          facing-mode="environment"
-          autoplay
-          @started="cameraStarted()"
-        >
-          <div
-            class="absolute portrait:bottom-0 portrait:left-0 portrait:right-0 portrait:pb-2 landscape:right-0 landscape:top-0 landscape:bottom-0 landscape:pr-4 flex landscape:flex-row justify-center items-center"
+      <div v-else-if="showCameraPreview" class="camera-preview">
+        <div class="camera-container">
+          <video
+            ref="videoElement"
+            class="camera-video"
+            autoplay
+            playsinline
+            muted
+          ></video>
+          <button
+            class="absolute bottom-4 left-1/2 -translate-x-1/2 bg-white text-slate-800 p-3 rounded-full text-2xl leading-none"
+            @click="capturePhoto"
           >
-            <button
-              class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
-              @click="takeImage()"
-            >
-              <font-awesome icon="camera" class="w-[1em]"></font-awesome>
-            </button>
-          </div>
-          <div
-            class="absolute portrait:bottom-2 portrait:right-16 landscape:right-0 landscape:bottom-16 landscape:pr-4 flex justify-center items-center"
+            <font-awesome icon="camera" class="w-[1em]" />
+          </button>
+        </div>
+      </div>
+      <div v-else>
+        <div class="flex flex-col items-center justify-center gap-4 p-4">
+          <button
+            v-if="isRegistered"
+            class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
+            @click="startCameraPreview"
           >
-            <button
-              class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
-              @click="swapMirrorClass()"
-            >
-              <font-awesome icon="left-right" class="w-[1em]"></font-awesome>
-            </button>
-          </div>
-          <div v-if="numDevices > 1" class="absolute bottom-2 right-4">
-            <button
-              class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
-              @click="switchCamera()"
-            >
-              <font-awesome icon="rotate" class="w-[1em]"></font-awesome>
-            </button>
-          </div>
-        </camera>
+            <font-awesome icon="camera" class="w-[1em]" />
+          </button>
+          <button
+            class="bg-blue-500 hover:bg-blue-700 text-white font-bold p-3 rounded-full text-2xl leading-none"
+            @click="pickPhoto"
+          >
+            <font-awesome icon="image" class="w-[1em]" />
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -122,58 +117,113 @@
 
 <script lang="ts">
 import axios from "axios";
-import Camera from "simple-vue-camera";
 import { Component, Vue } from "vue-facing-decorator";
 import VuePictureCropper, { cropper } from "vue-picture-cropper";
-
-import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "../constants/app";
+import {
+  DEFAULT_IMAGE_API_SERVER,
+  NotificationIface,
+  USE_DEXIE_DB,
+} from "../constants/app";
+import * as databaseUtil from "../db/databaseUtil";
 import { retrieveSettingsForActiveAccount } from "../db/index";
 import { accessToken } from "../libs/crypto";
 import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
 
-@Component({ components: { Camera, VuePictureCropper } })
+@Component({ components: { VuePictureCropper } })
 export default class PhotoDialog extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
-  activeDeviceNumber = 0;
+  /** Active DID for user authentication */
   activeDid = "";
+
+  /** Current image blob being processed */
   blob?: Blob;
+
+  /** Type of claim for the image */
   claimType = "";
+
+  /** Whether to show cropping interface */
   crop = false;
+
+  /** Name of the selected file */
   fileName?: string;
-  mirror = false;
-  numDevices = 0;
+
+  /** Callback function to set image URL after upload */
   setImageCallback: (arg: string) => void = () => {};
+
+  /** Whether to show retry button */
   showRetry = true;
+
+  /** Upload progress state */
   uploading = false;
+
+  /** Dialog visibility state */
   visible = false;
 
+  /** Whether to show camera preview */
+  showCameraPreview = false;
+
+  /** Camera stream reference */
+  private cameraStream: MediaStream | null = null;
+
+  private platformService = PlatformServiceFactory.getInstance();
   URL = window.URL || window.webkitURL;
 
+  isRegistered = false;
+  private platformCapabilities = this.platformService.getCapabilities();
+
+  /**
+   * Lifecycle hook: Initializes component and retrieves user settings
+   * @throws {Error} When settings retrieval fails
+   */
   async mounted() {
+    // logger.log("PhotoDialog mounted");
     try {
-      const settings = await retrieveSettingsForActiveAccount();
+      let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+      if (USE_DEXIE_DB) {
+        settings = await retrieveSettingsForActiveAccount();
+      }
       this.activeDid = settings.activeDid || "";
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    } catch (err: any) {
-      logger.error("Error retrieving settings from database:", err);
+      this.isRegistered = !!settings.isRegistered;
+      logger.log("isRegistered:", this.isRegistered);
+    } catch (error: unknown) {
+      logger.error("Error retrieving settings from database:", error);
       this.$notify(
         {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: err.message || "There was an error retrieving your settings.",
+          text:
+            error instanceof Error
+              ? error.message
+              : "There was an error retrieving your settings.",
         },
         -1,
       );
     }
   }
 
-  open(
+  /**
+   * Lifecycle hook: Cleans up camera stream when component is destroyed
+   */
+  beforeDestroy() {
+    this.stopCameraPreview();
+  }
+
+  /**
+   * Opens the photo dialog with specified configuration
+   * @param setImageFn - Callback function to handle image URL after upload
+   * @param claimType - Type of claim for the image
+   * @param crop - Whether to enable cropping
+   * @param blob - Optional existing image blob
+   * @param inputFileName - Optional filename for the image
+   */
+  async open(
     setImageFn: (arg: string) => void,
     claimType: string,
     crop?: boolean,
-    blob?: Blob, // for image upload, just to use the cropping function
+    blob?: Blob,
     inputFileName?: string,
   ) {
     this.visible = true;
@@ -187,17 +237,28 @@ export default class PhotoDialog extends Vue {
     if (blob) {
       this.blob = blob;
       this.fileName = inputFileName;
-      // doesn't make sense to retry the file upload; they can cancel if they picked the wrong one
       this.showRetry = false;
     } else {
       this.blob = undefined;
       this.fileName = undefined;
       this.showRetry = true;
+      // Start camera preview automatically if no blob is provided
+      if (!this.platformCapabilities.isMobile) {
+        await this.startCameraPreview();
+      }
     }
   }
 
+  /**
+   * Closes the photo dialog and resets state
+   */
   close() {
+    logger.debug(
+      "Dialog closing, current showCameraPreview:",
+      this.showCameraPreview,
+    );
     this.visible = false;
+    this.stopCameraPreview();
     const bottomNav = document.querySelector("#QuickNav") as HTMLElement;
     if (bottomNav) {
       bottomNav.style.display = "";
@@ -205,141 +266,224 @@ export default class PhotoDialog extends Vue {
     this.blob = undefined;
   }
 
-  async cameraStarted() {
-    const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
-    if (cameraComponent) {
-      this.numDevices = (await cameraComponent.devices(["videoinput"])).length;
-      this.mirror = cameraComponent.facingMode === "user";
-      // figure out which device is active
-      const currentDeviceId = cameraComponent.currentDeviceID();
-      const devices = await cameraComponent.devices(["videoinput"]);
-      this.activeDeviceNumber = devices.findIndex(
-        (device) => device.deviceId === currentDeviceId,
+  /**
+   * Starts the camera preview
+   */
+  async startCameraPreview() {
+    logger.debug("startCameraPreview called");
+    logger.debug("Current showCameraPreview state:", this.showCameraPreview);
+    logger.debug("Platform capabilities:", this.platformCapabilities);
+
+    // If we're on a mobile device or using Capacitor, use the platform service
+    if (this.platformCapabilities.isMobile) {
+      logger.debug("Using platform service for mobile device");
+      try {
+        const result = await this.platformService.takePicture();
+        this.blob = result.blob;
+        this.fileName = result.fileName;
+      } catch (error) {
+        logger.error("Error taking picture:", error);
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Failed to take picture. Please try again.",
+          },
+          5000,
+        );
+      }
+      return;
+    }
+
+    // For desktop web browsers, use our custom preview
+    logger.debug("Starting camera preview for desktop browser");
+    try {
+      // Set state before requesting camera access
+      this.showCameraPreview = true;
+      logger.debug("showCameraPreview set to:", this.showCameraPreview);
+
+      // Force a re-render
+      await this.$nextTick();
+      logger.debug(
+        "After nextTick, showCameraPreview is:",
+        this.showCameraPreview,
       );
-    }
-  }
 
-  async switchCamera() {
-    const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
-    this.activeDeviceNumber = (this.activeDeviceNumber + 1) % this.numDevices;
-    const devices = await cameraComponent?.devices(["videoinput"]);
-    await cameraComponent?.changeCamera(
-      devices[this.activeDeviceNumber].deviceId,
-    );
-  }
+      logger.debug("Requesting camera access...");
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: { facingMode: "environment" },
+      });
+      logger.debug("Camera access granted, setting up video element");
+      this.cameraStream = stream;
 
-  async takeImage(/* payload: MouseEvent */) {
-    const cameraComponent = this.$refs.camera as InstanceType<typeof Camera>;
+      // Force another re-render after getting the stream
+      await this.$nextTick();
+      logger.debug(
+        "After getting stream, showCameraPreview is:",
+        this.showCameraPreview,
+      );
 
-    /**
-     * This logic to set the image height & width correctly.
-     * Without it, the portrait orientation ends up with an image that is stretched horizontally.
-     * Note that it's the same with raw browser Javascript; see the "drawImage" example below.
-     * Now that I've done it, I can't explain why it works.
-     */
-    let imageHeight = cameraComponent?.resolution?.height;
-    let imageWidth = cameraComponent?.resolution?.width;
-    const initialImageRatio = imageWidth / imageHeight;
-    const windowRatio = window.innerWidth / window.innerHeight;
-    if (initialImageRatio > 1 && windowRatio < 1) {
-      // the image is wider than it is tall, and the window is taller than it is wide
-      // For some reason, mobile in portrait orientation renders a horizontally-stretched image.
-      // We're gonna force it opposite.
-      imageHeight = cameraComponent?.resolution?.width;
-      imageWidth = cameraComponent?.resolution?.height;
-    } else if (initialImageRatio < 1 && windowRatio > 1) {
-      // the image is taller than it is wide, and the window is wider than it is tall
-      // Haven't seen this happen, but we'll do it just in case.
-      imageHeight = cameraComponent?.resolution?.width;
-      imageWidth = cameraComponent?.resolution?.height;
-    }
-    const newImageRatio = imageWidth / imageHeight;
-    if (newImageRatio < windowRatio) {
-      // the image is a taller ratio than the window, so fit the height first
-      imageHeight = window.innerHeight / 2;
-      imageWidth = imageHeight * newImageRatio;
-    } else {
-      // the image is a wider ratio than the window, so fit the width first
-      imageWidth = window.innerWidth / 2;
-      imageHeight = imageWidth / newImageRatio;
-    }
-
-    // The resolution is only necessary because of that mobile portrait-orientation case.
-    // The mobile emulation in a browser shows something stretched vertically, but real devices work fine.
-    this.blob =
-      (await cameraComponent?.snapshot({
-        height: imageHeight,
-        width: imageWidth,
-      })) || undefined;
-    // png is default
-    this.fileName = "snapshot.png";
-    if (!this.blob) {
+      const videoElement = this.$refs.videoElement as HTMLVideoElement;
+      if (videoElement) {
+        logger.debug("Video element found, setting srcObject");
+        videoElement.srcObject = stream;
+        // Wait for video to be ready
+        await new Promise((resolve) => {
+          videoElement.onloadedmetadata = () => {
+            logger.debug("Video metadata loaded");
+            videoElement.play().then(() => {
+              logger.debug("Video playback started");
+              resolve(true);
+            });
+          };
+        });
+      } else {
+        logger.error("Video element not found");
+      }
+    } catch (error) {
+      logger.error("Error starting camera preview:", error);
       this.$notify(
         {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "There was an error taking the picture. Please try again.",
+          text: "Failed to access camera. Please try again.",
         },
         5000,
       );
-      return;
+      this.showCameraPreview = false;
     }
   }
 
+  /**
+   * Stops the camera preview and cleans up resources
+   */
+  stopCameraPreview() {
+    logger.debug(
+      "Stopping camera preview, current showCameraPreview:",
+      this.showCameraPreview,
+    );
+    if (this.cameraStream) {
+      this.cameraStream.getTracks().forEach((track) => track.stop());
+      this.cameraStream = null;
+    }
+    this.showCameraPreview = false;
+    logger.debug(
+      "After stopping, showCameraPreview is:",
+      this.showCameraPreview,
+    );
+  }
+
+  /**
+   * Captures a photo from the camera preview
+   */
+  async capturePhoto() {
+    if (!this.cameraStream) return;
+
+    try {
+      const videoElement = this.$refs.videoElement as HTMLVideoElement;
+      const canvas = document.createElement("canvas");
+      canvas.width = videoElement.videoWidth;
+      canvas.height = videoElement.videoHeight;
+      const ctx = canvas.getContext("2d");
+      ctx?.drawImage(videoElement, 0, 0, canvas.width, canvas.height);
+
+      canvas.toBlob(
+        (blob) => {
+          if (blob) {
+            this.blob = blob;
+            this.fileName = `photo_${Date.now()}.jpg`;
+            this.stopCameraPreview();
+          }
+        },
+        "image/jpeg",
+        0.95,
+      );
+    } catch (error) {
+      logger.error("Error capturing photo:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Failed to capture photo. Please try again.",
+        },
+        5000,
+      );
+    }
+  }
+
+  /**
+   * Captures a photo using device camera
+   * @throws {Error} When camera access fails
+   */
+  async takePhoto() {
+    try {
+      const result = await this.platformService.takePicture();
+      this.blob = result.blob;
+      this.fileName = result.fileName;
+    } catch (error: unknown) {
+      logger.error("Error taking picture:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Failed to take picture. Please try again.",
+        },
+        5000,
+      );
+    }
+  }
+
+  /**
+   * Selects an image from device gallery
+   * @throws {Error} When gallery access fails
+   */
+  async pickPhoto() {
+    try {
+      const result = await this.platformService.pickImage();
+      this.blob = result.blob;
+      this.fileName = result.fileName;
+    } catch (error: unknown) {
+      logger.error("Error picking image:", error);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Failed to pick image. Please try again.",
+        },
+        5000,
+      );
+    }
+  }
+
+  /**
+   * Creates a blob URL for image preview
+   * @param blob - Image blob to create URL for
+   * @returns {string} Blob URL for the image
+   */
   private createBlobURL(blob: Blob): string {
     return URL.createObjectURL(blob);
   }
 
+  /**
+   * Resets the current image selection and restarts camera preview
+   */
   async retryImage() {
     this.blob = undefined;
-  }
-
-  /****
-
-   Here's an approach to photo capture without a library. It has similar quirks.
-   Now that we've fixed styling for simple-vue-camera, it's not critical to refactor. Maybe someday.
-
-   <button id="start-camera" @click="cameraClicked">Start Camera</button>
-   <video id="video" width="320" height="240" autoplay></video>
-   <button id="snap-photo" @click="photoSnapped">Snap Photo</button>
-   <canvas id="canvas" width="320" height="240"></canvas>
-
-  async cameraClicked() {
-    const video = document.querySelector("#video");
-    const stream = await navigator.mediaDevices.getUserMedia({
-      video: true,
-      audio: false,
-    });
-    if (video instanceof HTMLVideoElement) {
-      video.srcObject = stream;
+    if (!this.platformCapabilities.isMobile) {
+      await this.startCameraPreview();
     }
   }
-  photoSnapped() {
-    const video = document.querySelector("#video");
-    const canvas = document.querySelector("#canvas");
-    if (
-      canvas instanceof HTMLCanvasElement &&
-      video instanceof HTMLVideoElement
-    ) {
-      canvas
-        ?.getContext("2d")
-        ?.drawImage(video, 0, 0, canvas.width, canvas.height);
-      // ... or set the blob:
-      // canvas?.toBlob(
-      //   (blob) => {
-      //     this.blob = blob;
-      //   },
-      //   "image/jpeg",
-      //   1,
-      // );
-
-      // data url of the image
-      const image_data_url = canvas?.toDataURL("image/jpeg");
-    }
-  }
-  ****/
 
+  /**
+   * Uploads the current image to the server
+   * Handles cropping if enabled and manages upload state
+   * @throws {Error} When upload fails or server returns error
+   */
   async uploadImage() {
     this.uploading = true;
 
@@ -350,11 +494,9 @@ export default class PhotoDialog extends Vue {
     const token = await accessToken(this.activeDid);
     const headers = {
       Authorization: "Bearer " + token,
-      // axios fills in Content-Type of multipart/form-data
     };
     const formData = new FormData();
     if (!this.blob) {
-      // yeah, this should never happen, but it helps with subsequent type checking
       this.$notify(
         {
           group: "alert",
@@ -367,7 +509,7 @@ export default class PhotoDialog extends Vue {
       this.uploading = false;
       return;
     }
-    formData.append("image", this.blob, this.fileName || "snapshot.png");
+    formData.append("image", this.blob, this.fileName || "photo.jpg");
     formData.append("claimType", this.claimType);
     try {
       if (
@@ -387,14 +529,64 @@ export default class PhotoDialog extends Vue {
 
       this.close();
       this.setImageCallback(response.data.url as string);
-    } catch (error) {
-      logger.error("Error uploading the image", error);
+    } catch (error: unknown) {
+      // Log the raw error first
+      logger.error("Raw error object:", JSON.stringify(error, null, 2));
+
+      let errorMessage = "There was an error saving the picture.";
+
+      if (axios.isAxiosError(error)) {
+        const status = error.response?.status;
+        const statusText = error.response?.statusText;
+        const data = error.response?.data;
+
+        // Log detailed error information
+        logger.error("Upload error details:", {
+          status,
+          statusText,
+          data: JSON.stringify(data, null, 2),
+          message: error.message,
+          config: {
+            url: error.config?.url,
+            method: error.config?.method,
+            headers: error.config?.headers,
+          },
+        });
+
+        if (status === 401) {
+          errorMessage = "Authentication failed. Please try logging in again.";
+        } else if (status === 413) {
+          errorMessage = "Image file is too large. Please try a smaller image.";
+        } else if (status === 415) {
+          errorMessage =
+            "Unsupported image format. Please try a different image.";
+        } else if (status && status >= 500) {
+          errorMessage = "Server error. Please try again later.";
+        } else if (data?.message) {
+          errorMessage = data.message;
+        }
+      } else if (error instanceof Error) {
+        // Log non-Axios error with full details
+        logger.error("Non-Axios error details:", {
+          name: error.name,
+          message: error.message,
+          stack: error.stack,
+          error: JSON.stringify(error, Object.getOwnPropertyNames(error), 2),
+        });
+      } else {
+        // Log any other type of error
+        logger.error("Unknown error type:", {
+          error: JSON.stringify(error, null, 2),
+          type: typeof error,
+        });
+      }
+
       this.$notify(
         {
           group: "alert",
           type: "danger",
           title: "Error",
-          text: "There was an error saving the picture.",
+          text: errorMessage,
         },
         5000,
       );
@@ -402,21 +594,11 @@ export default class PhotoDialog extends Vue {
       this.blob = undefined;
     }
   }
-
-  swapMirrorClass() {
-    this.mirror = !this.mirror;
-    if (this.mirror) {
-      (this.$refs.cameraContainer as HTMLElement).classList.add("mirror-video");
-    } else {
-      (this.$refs.cameraContainer as HTMLElement).classList.remove(
-        "mirror-video",
-      );
-    }
-  }
 }
 </script>
 
 <style>
+/* Dialog overlay styling */
 .dialog-overlay {
   z-index: 60;
   position: fixed;
@@ -431,19 +613,50 @@ export default class PhotoDialog extends Vue {
   padding: 1.5rem;
 }
 
+/* Dialog container styling */
 .dialog {
   background-color: white;
   padding: 1rem;
   border-radius: 0.5rem;
   width: 100%;
   max-width: 700px;
+  max-height: 90vh;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
-.mirror-video {
-  transform: scaleX(-1);
-  -webkit-transform: scaleX(-1); /* For Safari */
-  -moz-transform: scaleX(-1); /* For Firefox */
-  -ms-transform: scaleX(-1); /* For IE */
-  -o-transform: scaleX(-1); /* For Opera */
+/* Camera preview styling */
+.camera-preview {
+  flex: 1;
+  background-color: #000;
+  overflow: hidden;
+  position: relative;
+}
+
+.camera-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+
+.camera-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.capture-button {
+  position: absolute;
+  bottom: 1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  background: linear-gradient(to bottom, #60a5fa, #2563eb);
+  color: white;
+  padding: 0.75rem 1.5rem;
+  border-radius: 9999px;
+  box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.5);
+  border: none;
+  cursor: pointer;
 }
 </style>

src/components/ProjectIcon.vue

@@ -1,18 +1,14 @@
 <!-- eslint-disable vue/no-v-html -->
 <template>
   <a
-    v-if="linkToFull && imageUrl"
+    v-if="linkToFullImage && imageUrl"
     :href="imageUrl"
     target="_blank"
     class="h-full w-full object-contain"
   >
-    <div class="h-full w-full object-contain" v-html="generateIdenticon()" />
+    <div class="h-full w-full object-contain" v-html="generateIcon()" />
   </a>
-  <div
-    v-else
-    class="h-full w-full object-contain"
-    v-html="generateIdenticon()"
-  />
+  <div v-else class="h-full w-full object-contain" v-html="generateIcon()" />
 </template>
 <script lang="ts">
 import { toSvg } from "jdenticon";
@@ -35,9 +31,9 @@ export default class ProjectIcon extends Vue {
   @Prop entityId = "";
   @Prop iconSize = 0;
   @Prop imageUrl = "";
-  @Prop linkToFull = false;
+  @Prop linkToFullImage = false;
 
-  generateIdenticon() {
+  generateIcon() {
     if (this.imageUrl) {
       return `<img src="${this.imageUrl}" class="w-full h-full object-contain" />`;
     } else {

src/components/PushNotificationPermission.vue

@@ -102,7 +102,12 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 
-import { DEFAULT_PUSH_SERVER, NotificationIface } from "../constants/app";
+import {
+  DEFAULT_PUSH_SERVER,
+  NotificationIface,
+  USE_DEXIE_DB,
+} from "../constants/app";
+import * as databaseUtil from "../db/databaseUtil";
 import {
   logConsoleAndDb,
   retrieveSettingsForActiveAccount,
@@ -169,7 +174,10 @@ export default class PushNotificationPermission extends Vue {
     this.isVisible = true;
     this.pushType = pushType;
     try {
-      const settings = await retrieveSettingsForActiveAccount();
+      let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+      if (USE_DEXIE_DB) {
+        settings = await retrieveSettingsForActiveAccount();
+      }
       let pushUrl = DEFAULT_PUSH_SERVER;
       if (settings?.webPushServer) {
         pushUrl = settings.webPushServer;

src/components/QuickNav.vue

@@ -1,6 +1,9 @@
 <template>
   <!-- QUICK NAV -->
-  <nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
+  <nav
+    id="QuickNav"
+    class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50 pb-[env(safe-area-inset-bottom)]"
+  >
     <ul class="flex text-2xl px-6 py-2 gap-1 max-w-3xl mx-auto">
       <!-- Home Feed -->
       <li

src/components/TopMessage.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="absolute right-5 top-3">
+  <div class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top))]">
     <span class="align-center text-red-500 mr-2">{{ message }}</span>
     <span class="ml-2">
       <router-link
@@ -15,7 +15,8 @@
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-facing-decorator";
 
-import { AppString, NotificationIface } from "../constants/app";
+import { AppString, NotificationIface, USE_DEXIE_DB } from "../constants/app";
+import * as databaseUtil from "../db/databaseUtil";
 import { retrieveSettingsForActiveAccount } from "../db/index";
 
 @Component
@@ -28,7 +29,10 @@ export default class TopMessage extends Vue {
 
   async mounted() {
     try {
-      const settings = await retrieveSettingsForActiveAccount();
+      let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+      if (USE_DEXIE_DB) {
+        settings = await retrieveSettingsForActiveAccount();
+      }
       if (
         settings.warnIfTestServer &&
         settings.apiServer !== AppString.PROD_ENDORSER_API_SERVER

src/components/UserNameDialog.vue

@@ -37,9 +37,11 @@
 <script lang="ts">
 import { Vue, Component, Prop } from "vue-facing-decorator";
 
-import { NotificationIface } from "../constants/app";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
+import * as databaseUtil from "../db/databaseUtil";
 import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 
 @Component
 export default class UserNameDialog extends Vue {
@@ -61,15 +63,25 @@ export default class UserNameDialog extends Vue {
    */
   async open(aCallback?: (name?: string) => void) {
     this.callback = aCallback || this.callback;
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.givenName = settings.firstName || "";
     this.visible = true;
   }
 
   async onClickSaveChanges() {
-    await db.settings.update(MASTER_SETTINGS_KEY, {
-      firstName: this.givenName,
-    });
+    const platformService = PlatformServiceFactory.getInstance();
+    await platformService.dbExec(
+      "UPDATE settings SET firstName = ? WHERE id = ?",
+      [this.givenName, MASTER_SETTINGS_KEY],
+    );
+    if (USE_DEXIE_DB) {
+      await db.settings.update(MASTER_SETTINGS_KEY, {
+        firstName: this.givenName,
+      });
+    }
     this.visible = false;
     this.callback(this.givenName);
   }

src/components/World/components/objects/landmarks.js

@@ -3,6 +3,8 @@ import * as THREE from "three";
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader";
 import * as SkeletonUtils from "three/addons/utils/SkeletonUtils";
 import * as TWEEN from "@tweenjs/tween.js";
+import { USE_DEXIE_DB } from "../../../../constants/app";
+import * as databaseUtil from "../../../../db/databaseUtil";
 import { retrieveSettingsForActiveAccount } from "../../../../db";
 import { getHeaders } from "../../../../libs/endorserServer";
 import { logger } from "../../../../utils/logger";
@@ -14,7 +16,10 @@ export async function loadLandmarks(vue, world, scene, loop) {
   vue.setWorldProperty("animationDurationSeconds", ANIMATION_DURATION_SECS);
 
   try {
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     const activeDid = settings.activeDid || "";
     const apiServer = settings.apiServer;
     const headers = await getHeaders(activeDid);

src/constants/app.ts

@@ -7,6 +7,7 @@ export enum AppString {
   // This is used in titles and verbiage inside the app.
   // There is also an app name without spaces, for packaging in the package.json file used in the manifest.
   APP_NAME = "Time Safari",
+  APP_NAME_NO_SPACES = "TimeSafari",
 
   PROD_ENDORSER_API_SERVER = "https://api.endorser.ch",
   TEST_ENDORSER_API_SERVER = "https://test-api.endorser.ch",
@@ -32,24 +33,26 @@ export const APP_SERVER =
 
 export const DEFAULT_ENDORSER_API_SERVER =
   import.meta.env.VITE_DEFAULT_ENDORSER_API_SERVER ||
-  AppString.TEST_ENDORSER_API_SERVER;
+  AppString.PROD_ENDORSER_API_SERVER;
 
 export const DEFAULT_IMAGE_API_SERVER =
   import.meta.env.VITE_DEFAULT_IMAGE_API_SERVER ||
-  AppString.TEST_IMAGE_API_SERVER;
+  AppString.PROD_IMAGE_API_SERVER;
 
 export const DEFAULT_PARTNER_API_SERVER =
   import.meta.env.VITE_DEFAULT_PARTNER_API_SERVER ||
-  AppString.TEST_PARTNER_API_SERVER;
+  AppString.PROD_PARTNER_API_SERVER;
 
 export const DEFAULT_PUSH_SERVER =
-  window.location.protocol + "//" + window.location.host;
+  import.meta.env.VITE_DEFAULT_PUSH_SERVER || AppString.PROD_PUSH_SERVER;
 
 export const IMAGE_TYPE_PROFILE = "profile";
 
 export const PASSKEYS_ENABLED =
   !!import.meta.env.VITE_PASSKEYS_ENABLED || false;
 
+export const USE_DEXIE_DB = false;
+
 /**
  * The possible values for "group" and "type" are in App.vue.
  * Some of this comes from the notiwind package, some is custom.

src/db-sql/migration.ts

@@ -0,0 +1,138 @@
+import migrationService from "../services/migrationService";
+import { DEFAULT_ENDORSER_API_SERVER } from "@/constants/app";
+import { arrayBufferToBase64 } from "@/libs/crypto";
+
+// Generate a random secret for the secret table
+
+// It's not really secure to maintain the secret next to the user's data.
+// However, until we have better hooks into a real wallet or reliable secure
+// storage, we'll do this for user convenience. As they sign more records
+// and integrate with more people, they'll value it more and want to be more
+// secure, so we'll prompt them to take steps to back it up, properly encrypt,
+// etc. At the beginning, we'll prompt for a password, then we'll prompt for a
+// PWA so it's not in a browser... and then we hope to be integrated with a
+// real wallet or something else more secure.
+
+// One might ask: why encrypt at all? We figure a basic encryption is better
+// than none. Plus, we expect to support their own password or keystore or
+// external wallet as better signing options in the future, so it's gonna be
+// important to have the structure where each account access might require
+// user action.
+
+// (Once upon a time we stored the secret in localStorage, but it frequently
+// got erased, even though the IndexedDB still had the identity data. This
+// ended up throwing lots of errors to the user... and they'd end up in a state
+// where they couldn't take action because they couldn't unlock that identity.)
+
+const randomBytes = crypto.getRandomValues(new Uint8Array(32));
+const secretBase64 = arrayBufferToBase64(randomBytes);
+
+// Each migration can include multiple SQL statements (with semicolons)
+const MIGRATIONS = [
+  {
+    name: "001_initial",
+    // see ../db/tables files for explanations of the fields
+    sql: `
+      CREATE TABLE IF NOT EXISTS accounts (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        dateCreated TEXT NOT NULL,
+        derivationPath TEXT,
+        did TEXT NOT NULL,
+        identityEncrBase64 TEXT, -- encrypted & base64-encoded
+        mnemonicEncrBase64 TEXT, -- encrypted & base64-encoded
+        passkeyCredIdHex TEXT,
+        publicKeyHex TEXT NOT NULL
+      );
+
+      CREATE INDEX IF NOT EXISTS idx_accounts_did ON accounts(did);
+
+      CREATE TABLE IF NOT EXISTS secret (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        secretBase64 TEXT NOT NULL
+      );
+
+      INSERT INTO secret (id, secretBase64) VALUES (1, '${secretBase64}');
+
+      CREATE TABLE IF NOT EXISTS settings (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        accountDid TEXT,
+        activeDid TEXT,
+        apiServer TEXT,
+        filterFeedByNearby BOOLEAN,
+        filterFeedByVisible BOOLEAN,
+        finishedOnboarding BOOLEAN,
+        firstName TEXT,
+        hideRegisterPromptOnNewContact BOOLEAN,
+        isRegistered BOOLEAN,
+        lastName TEXT,
+        lastAckedOfferToUserJwtId TEXT,
+        lastAckedOfferToUserProjectsJwtId TEXT,
+        lastNotifiedClaimId TEXT,
+        lastViewedClaimId TEXT,
+        notifyingNewActivityTime TEXT,
+        notifyingReminderMessage TEXT,
+        notifyingReminderTime TEXT,
+        partnerApiServer TEXT,
+        passkeyExpirationMinutes INTEGER,
+        profileImageUrl TEXT,
+        searchBoxes TEXT, -- Stored as JSON string
+        showContactGivesInline BOOLEAN,
+        showGeneralAdvanced BOOLEAN,
+        showShortcutBvc BOOLEAN,
+        vapid TEXT,
+        warnIfProdServer BOOLEAN,
+        warnIfTestServer BOOLEAN,
+        webPushServer TEXT
+      );
+
+      CREATE INDEX IF NOT EXISTS idx_settings_accountDid ON settings(accountDid);
+
+      INSERT INTO settings (id, apiServer) VALUES (1, '${DEFAULT_ENDORSER_API_SERVER}');
+
+      CREATE TABLE IF NOT EXISTS contacts (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        did TEXT NOT NULL,
+        name TEXT,
+        contactMethods TEXT, -- Stored as JSON string
+        nextPubKeyHashB64 TEXT,
+        notes TEXT,
+        profileImageUrl TEXT,
+        publicKeyBase64 TEXT,
+        seesMe BOOLEAN,
+        registered BOOLEAN
+      );
+
+      CREATE INDEX IF NOT EXISTS idx_contacts_did ON contacts(did);
+      CREATE INDEX IF NOT EXISTS idx_contacts_name ON contacts(name);
+
+      CREATE TABLE IF NOT EXISTS logs (
+        date TEXT NOT NULL,
+        message TEXT NOT NULL
+      );
+
+      CREATE TABLE IF NOT EXISTS temp (
+        id TEXT PRIMARY KEY,
+        blobB64 TEXT
+      );
+      `,
+  },
+];
+
+/**
+ * @param sqlExec - A function that executes a SQL statement and returns the result
+ * @param extractMigrationNames - A function that extracts the names (string array) from "select name from migrations"
+ */
+export async function runMigrations<T>(
+  sqlExec: (sql: string) => Promise<unknown>,
+  sqlQuery: (sql: string) => Promise<T>,
+  extractMigrationNames: (result: T) => Set<string>,
+): Promise<void> {
+  for (const migration of MIGRATIONS) {
+    migrationService.registerMigration(migration);
+  }
+  await migrationService.runMigrations(
+    sqlExec,
+    sqlQuery,
+    extractMigrationNames,
+  );
+}

src/db/databaseUtil.ts

@@ -0,0 +1,426 @@
+/**
+ * This file is the SQL replacement of the index.ts file in the db directory.
+ * That file will eventually be deleted.
+ */
+
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
+import { MASTER_SETTINGS_KEY, Settings } from "./tables/settings";
+import { logger } from "@/utils/logger";
+import { DEFAULT_ENDORSER_API_SERVER } from "@/constants/app";
+import { QueryExecResult } from "@/interfaces/database";
+
+export async function updateDefaultSettings(
+  settingsChanges: Settings,
+): Promise<boolean> {
+  delete settingsChanges.accountDid; // just in case
+  // ensure there is no "id" that would override the key
+  delete settingsChanges.id;
+  try {
+    const platformService = PlatformServiceFactory.getInstance();
+    const { sql, params } = generateUpdateStatement(
+      settingsChanges,
+      "settings",
+      "id = ?",
+      [MASTER_SETTINGS_KEY],
+    );
+    const result = await platformService.dbExec(sql, params);
+    return result.changes === 1;
+  } catch (error) {
+    logger.error("Error updating default settings:", error);
+    if (error instanceof Error) {
+      throw error; // Re-throw if it's already an Error with a message
+    } else {
+      throw new Error(
+        `Failed to update settings. We recommend you try again or restart the app.`,
+      );
+    }
+  }
+}
+
+export async function insertDidSpecificSettings(
+  did: string,
+  settings: Partial<Settings> = {},
+): Promise<boolean> {
+  const platform = PlatformServiceFactory.getInstance();
+  const { sql, params } = generateInsertStatement(
+    { ...settings, accountDid: did }, // make sure accountDid is set to the given value
+    "settings",
+  );
+  const result = await platform.dbExec(sql, params);
+  return result.changes === 1;
+}
+
+export async function updateDidSpecificSettings(
+  accountDid: string,
+  settingsChanges: Settings,
+): Promise<boolean> {
+  settingsChanges.accountDid = accountDid;
+  delete settingsChanges.id; // key off account, not ID
+
+  const platform = PlatformServiceFactory.getInstance();
+
+  // First try to update existing record
+  const { sql: updateSql, params: updateParams } = generateUpdateStatement(
+    settingsChanges,
+    "settings",
+    "accountDid = ?",
+    [accountDid],
+  );
+
+  const updateResult = await platform.dbExec(updateSql, updateParams);
+  return updateResult.changes === 1;
+}
+
+const DEFAULT_SETTINGS: Settings = {
+  id: MASTER_SETTINGS_KEY,
+  activeDid: undefined,
+  apiServer: DEFAULT_ENDORSER_API_SERVER,
+};
+
+// retrieves default settings
+export async function retrieveSettingsForDefaultAccount(): Promise<Settings> {
+  const platform = PlatformServiceFactory.getInstance();
+  const sql = "SELECT * FROM settings WHERE id = ?";
+  const result = await platform.dbQuery(sql, [MASTER_SETTINGS_KEY]);
+  if (!result) {
+    return DEFAULT_SETTINGS;
+  } else {
+    const settings = mapColumnsToValues(
+      result.columns,
+      result.values,
+    )[0] as Settings;
+    if (settings.searchBoxes) {
+      // @ts-expect-error - the searchBoxes field is a string in the DB
+      settings.searchBoxes = JSON.parse(settings.searchBoxes);
+    }
+    return settings;
+  }
+}
+
+/**
+ * Retrieves settings for the active account, merging with default settings
+ *
+ * @returns Promise<Settings> Combined settings with account-specific overrides
+ * @throws Will log specific errors for debugging but returns default settings on failure
+ */
+export async function retrieveSettingsForActiveAccount(): Promise<Settings> {
+  try {
+    // Get default settings first
+    const defaultSettings = await retrieveSettingsForDefaultAccount();
+    // If no active DID, return defaults
+    if (!defaultSettings.activeDid) {
+      return defaultSettings;
+    }
+
+    // Get account-specific settings
+    try {
+      const platform = PlatformServiceFactory.getInstance();
+      const result = await platform.dbQuery(
+        "SELECT * FROM settings WHERE accountDid = ?",
+        [defaultSettings.activeDid],
+      );
+
+      if (!result?.values?.length) {
+        // we created DID-specific settings when generated or imported, so this shouldn't happen
+        return defaultSettings;
+      }
+
+      // Map and filter settings
+      const overrideSettings = mapColumnsToValues(
+        result.columns,
+        result.values,
+      )[0] as Settings;
+
+      const overrideSettingsFiltered = Object.fromEntries(
+        Object.entries(overrideSettings).filter(([_, v]) => v !== null),
+      );
+
+      // Merge settings
+      const settings = { ...defaultSettings, ...overrideSettingsFiltered };
+
+      // Handle searchBoxes parsing
+      if (settings.searchBoxes) {
+        settings.searchBoxes = parseJsonField(settings.searchBoxes, []);
+      }
+
+      return settings;
+    } catch (error) {
+      logConsoleAndDb(
+        `[databaseUtil] Failed to retrieve account settings for ${defaultSettings.activeDid}: ${error}`,
+        true,
+      );
+      // Return defaults on error
+      return defaultSettings;
+    }
+  } catch (error) {
+    logConsoleAndDb(
+      `[databaseUtil] Failed to retrieve default settings: ${error}`,
+      true,
+    );
+    // Return minimal default settings on complete failure
+    return {
+      id: MASTER_SETTINGS_KEY,
+      activeDid: undefined,
+      apiServer: DEFAULT_ENDORSER_API_SERVER,
+    };
+  }
+}
+
+let lastCleanupDate: string | null = null;
+export let memoryLogs: string[] = [];
+
+/**
+ * Logs a message to the database with proper handling of concurrent writes
+ * @param message - The message to log
+ * @author Matthew Raymer
+ */
+export async function logToDb(message: string): Promise<void> {
+  const platform = PlatformServiceFactory.getInstance();
+  const todayKey = new Date().toDateString();
+  const nowKey = new Date().toISOString();
+
+  try {
+    memoryLogs.push(`${new Date().toISOString()} ${message}`);
+    // Try to insert first, if it fails due to UNIQUE constraint, update instead
+    await platform.dbExec("INSERT INTO logs (date, message) VALUES (?, ?)", [
+      nowKey,
+      message,
+    ]);
+
+    // Clean up old logs (keep only last 7 days) - do this less frequently
+    // Only clean up if the date is different from the last cleanup
+    if (!lastCleanupDate || lastCleanupDate !== todayKey) {
+      const sevenDaysAgo = new Date(
+        new Date().getTime() - 7 * 24 * 60 * 60 * 1000,
+      );
+      memoryLogs = memoryLogs.filter(
+        (log) => log.split(" ")[0] > sevenDaysAgo.toDateString(),
+      );
+      await platform.dbExec("DELETE FROM logs WHERE date < ?", [
+        sevenDaysAgo.toDateString(),
+      ]);
+      lastCleanupDate = todayKey;
+    }
+  } catch (error) {
+    // Log to console as fallback
+    // eslint-disable-next-line no-console
+    console.error(
+      "Error logging to database:",
+      error,
+      " ... for original message:",
+      message,
+    );
+  }
+}
+
+// similar method is in the sw_scripts/additional-scripts.js file
+export async function logConsoleAndDb(
+  message: string,
+  isError = false,
+): Promise<void> {
+  if (isError) {
+    logger.error(`${new Date().toISOString()} ${message}`);
+  } else {
+    logger.log(`${new Date().toISOString()} ${message}`);
+  }
+  await logToDb(message);
+}
+
+/**
+ * Generates an SQL INSERT statement and parameters from a model object.
+ * @param model The model object containing fields to update
+ * @param tableName The name of the table to update
+ * @returns Object containing the SQL statement and parameters array
+ */
+export function generateInsertStatement(
+  model: Record<string, unknown>,
+  tableName: string,
+): { sql: string; params: unknown[] } {
+  const columns = Object.keys(model).filter((key) => model[key] !== undefined);
+  const values = Object.values(model).filter((value) => value !== undefined);
+  const placeholders = values.map(() => "?").join(", ");
+  const insertSql = `INSERT INTO ${tableName} (${columns.join(", ")}) VALUES (${placeholders})`;
+
+  return {
+    sql: insertSql,
+    params: values,
+  };
+}
+
+/**
+ * Generates an SQL UPDATE statement and parameters from a model object.
+ * @param model The model object containing fields to update
+ * @param tableName The name of the table to update
+ * @param whereClause The WHERE clause for the update (e.g. "id = ?")
+ * @param whereParams Parameters for the WHERE clause
+ * @returns Object containing the SQL statement and parameters array
+ */
+export function generateUpdateStatement(
+  model: Record<string, unknown>,
+  tableName: string,
+  whereClause: string,
+  whereParams: unknown[] = [],
+): { sql: string; params: unknown[] } {
+  // Filter out undefined/null values and create SET clause
+  const setClauses: string[] = [];
+  const params: unknown[] = [];
+
+  Object.entries(model).forEach(([key, value]) => {
+    setClauses.push(`${key} = ?`);
+    params.push(value ?? null);
+  });
+
+  if (setClauses.length === 0) {
+    throw new Error("No valid fields to update");
+  }
+
+  const sql = `UPDATE ${tableName} SET ${setClauses.join(", ")} WHERE ${whereClause}`;
+
+  return {
+    sql,
+    params: [...params, ...whereParams],
+  };
+}
+
+export function mapQueryResultToValues(
+  record: QueryExecResult | undefined,
+): Array<Record<string, unknown>> {
+  if (!record) {
+    return [];
+  }
+  return mapColumnsToValues(record.columns, record.values) as Array<
+    Record<string, unknown>
+  >;
+}
+
+/**
+ * Maps an array of column names to an array of value arrays, creating objects where each column name
+ * is mapped to its corresponding value.
+ * @param columns Array of column names to use as object keys
+ * @param values Array of value arrays, where each inner array corresponds to one row of data
+ * @returns Array of objects where each object maps column names to their corresponding values
+ */
+export function mapColumnsToValues(
+  columns: string[],
+  values: unknown[][],
+): Array<Record<string, unknown>> {
+  return values.map((row) => {
+    const obj: Record<string, unknown> = {};
+    columns.forEach((column, index) => {
+      obj[column] = row[index];
+    });
+    return obj;
+  });
+}
+
+/**
+ * Debug function to inspect raw settings data in the database
+ * This helps diagnose issues with data corruption or malformed JSON
+ * @param did Optional DID to inspect specific account settings
+ * @author Matthew Raymer
+ */
+export async function debugSettingsData(did?: string): Promise<void> {
+  try {
+    const platform = PlatformServiceFactory.getInstance();
+
+    // Get all settings records
+    const allSettings = await platform.dbQuery("SELECT * FROM settings");
+
+    logConsoleAndDb(
+      `[DEBUG] Total settings records: ${allSettings?.values?.length || 0}`,
+      false,
+    );
+
+    if (allSettings?.values?.length) {
+      allSettings.values.forEach((row, index) => {
+        const settings = mapColumnsToValues(allSettings.columns, [row])[0];
+        logConsoleAndDb(`[DEBUG] Settings record ${index + 1}:`, false);
+        logConsoleAndDb(`[DEBUG] - ID: ${settings.id}`, false);
+        logConsoleAndDb(`[DEBUG] - accountDid: ${settings.accountDid}`, false);
+        logConsoleAndDb(`[DEBUG] - activeDid: ${settings.activeDid}`, false);
+
+        if (settings.searchBoxes) {
+          logConsoleAndDb(
+            `[DEBUG] - searchBoxes type: ${typeof settings.searchBoxes}`,
+            false,
+          );
+          logConsoleAndDb(
+            `[DEBUG] - searchBoxes value: ${String(settings.searchBoxes)}`,
+            false,
+          );
+
+          // Try to parse it
+          try {
+            const parsed = JSON.parse(String(settings.searchBoxes));
+            logConsoleAndDb(
+              `[DEBUG] - searchBoxes parsed successfully: ${JSON.stringify(parsed)}`,
+              false,
+            );
+          } catch (parseError) {
+            logConsoleAndDb(
+              `[DEBUG] - searchBoxes parse error: ${parseError}`,
+              true,
+            );
+          }
+        }
+
+        logConsoleAndDb(
+          `[DEBUG] - Full record: ${JSON.stringify(settings, null, 2)}`,
+          false,
+        );
+      });
+    }
+
+    // If specific DID provided, also check accounts table
+    if (did) {
+      const account = await platform.dbQuery(
+        "SELECT * FROM accounts WHERE did = ?",
+        [did],
+      );
+      logConsoleAndDb(
+        `[DEBUG] Account for ${did}: ${JSON.stringify(account, null, 2)}`,
+        false,
+      );
+    }
+  } catch (error) {
+    logConsoleAndDb(`[DEBUG] Error inspecting settings data: ${error}`, true);
+  }
+}
+
+/**
+ * Platform-agnostic JSON parsing utility
+ * Handles different SQLite implementations:
+ * - Web SQLite (wa-sqlite/absurd-sql): Auto-parses JSON strings to objects
+ * - Capacitor SQLite: Returns raw strings that need manual parsing
+ *
+ * @param value The value to parse (could be string or already parsed object)
+ * @param defaultValue Default value if parsing fails
+ * @returns Parsed object or default value
+ * @author Matthew Raymer
+ */
+export function parseJsonField<T>(value: unknown, defaultValue: T): T {
+  try {
+    // If already an object (web SQLite auto-parsed), return as-is
+    if (typeof value === "object" && value !== null) {
+      return value as T;
+    }
+
+    // If it's a string (Capacitor SQLite or fallback), parse it
+    if (typeof value === "string") {
+      return JSON.parse(value) as T;
+    }
+
+    // If it's null/undefined, return default
+    if (value === null || value === undefined) {
+      return defaultValue;
+    }
+
+    return defaultValue;
+  } catch (error) {
+    logConsoleAndDb(
+      `[databaseUtil] Failed to parse JSON field: ${error}`,
+      true,
+    );
+    return defaultValue;
+  }
+}

src/db/index.ts

@@ -1,3 +1,9 @@
+/**
+ * This is the original IndexedDB version of the database.
+ * It will eventually be replaced fully by the SQL version in databaseUtil.ts.
+ * Turn this on or off with the USE_DEXIE_DB constant in constants/app.ts.
+ */
+
 import BaseDexie, { Table } from "dexie";
 import { encrypted, Encryption } from "@pvermeer/dexie-encrypted-addon";
 import * as R from "ramda";
@@ -26,8 +32,8 @@ type NonsensitiveTables = {
 };
 
 // Using 'unknown' instead of 'any' for stricter typing and to avoid TypeScript warnings
-export type SecretDexie<T extends unknown = SecretTable> = BaseDexie & T;
-export type SensitiveDexie<T extends unknown = SensitiveTables> = BaseDexie & T;
+type SecretDexie<T extends unknown = SecretTable> = BaseDexie & T;
+type SensitiveDexie<T extends unknown = SensitiveTables> = BaseDexie & T;
 export type NonsensitiveDexie<T extends unknown = NonsensitiveTables> =
   BaseDexie & T;
 
@@ -87,9 +93,85 @@ const DEFAULT_SETTINGS: Settings = {
 
 // Event handler to initialize the non-sensitive database with default settings
 db.on("populate", async () => {
-  await db.settings.add(DEFAULT_SETTINGS);
+  try {
+    await db.settings.add(DEFAULT_SETTINGS);
+  } catch (error) {
+    logger.error("Error populating the database with default settings:", error);
+  }
 });
 
+// Helper function to safely open the database with retries
+async function safeOpenDatabase(retries = 1, delay = 500): Promise<void> {
+  // logger.log("Starting safeOpenDatabase with retries:", retries);
+  for (let i = 0; i < retries; i++) {
+    try {
+      // logger.log(`Attempt ${i + 1}: Checking if database is open...`);
+      if (!db.isOpen()) {
+        // logger.log(`Attempt ${i + 1}: Database is closed, attempting to open...`);
+
+        // Create a promise that rejects after 5 seconds
+        const timeoutPromise = new Promise((_, reject) => {
+          setTimeout(() => reject(new Error("Database open timed out")), 500);
+        });
+
+        // Race between the open operation and the timeout
+        const openPromise = db.open();
+        // logger.log(`Attempt ${i + 1}: Waiting for db.open() promise...`);
+        await Promise.race([openPromise, timeoutPromise]);
+
+        // If we get here, the open succeeded
+        // logger.log(`Attempt ${i + 1}: Database opened successfully`);
+        return;
+      }
+      // logger.log(`Attempt ${i + 1}: Database was already open`);
+      return;
+    } catch (error) {
+      logger.error(`Attempt ${i + 1}: Database open failed:`, error);
+      if (i < retries - 1) {
+        logger.log(`Attempt ${i + 1}: Waiting ${delay}ms before retry...`);
+        await new Promise((resolve) => setTimeout(resolve, delay));
+      } else {
+        throw error;
+      }
+    }
+  }
+}
+
+export async function updateDefaultSettings(
+  settingsChanges: Settings,
+): Promise<number> {
+  delete settingsChanges.accountDid; // just in case
+  // ensure there is no "id" that would override the key
+  delete settingsChanges.id;
+  try {
+    try {
+      // logger.log("Database state before open:", db.isOpen() ? "open" : "closed");
+      // logger.log("Database name:", db.name);
+      // logger.log("Database version:", db.verno);
+      await safeOpenDatabase();
+    } catch (openError: unknown) {
+      logger.error("Failed to open database:", openError, String(openError));
+      throw new Error(
+        `The database connection failed. We recommend you try again or restart the app.`,
+      );
+    }
+    const result = await db.settings.update(
+      MASTER_SETTINGS_KEY,
+      settingsChanges,
+    );
+    return result;
+  } catch (error) {
+    logger.error("Error updating default settings:", error);
+    if (error instanceof Error) {
+      throw error; // Re-throw if it's already an Error with a message
+    } else {
+      throw new Error(
+        `Failed to update settings. We recommend you try again or restart the app.`,
+      );
+    }
+  }
+}
+
 // Manage the encryption key.
 
 // It's not really secure to maintain the secret next to the user's data.
@@ -183,15 +265,6 @@ export async function retrieveSettingsForActiveAccount(): Promise<Settings> {
   }
 }
 
-export async function updateDefaultSettings(
-  settingsChanges: Settings,
-): Promise<void> {
-  delete settingsChanges.accountDid; // just in case
-  // ensure there is no "id" that would override the key
-  delete settingsChanges.id;
-  await db.settings.update(MASTER_SETTINGS_KEY, settingsChanges);
-}
-
 export async function updateAccountSettings(
   accountDid: string,
   settingsChanges: Settings,

src/db/tables/accounts.ts

@@ -45,6 +45,12 @@ export type Account = {
   publicKeyHex: string;
 };
 
+// When finished with USE_DEXIE_DB, move these fields to Account and move identity and mnemonic here.
+export type AccountEncrypted = Account & {
+  identityEncrBase64: string;
+  mnemonicEncrBase64: string;
+};
+
 /**
  * Schema for the accounts table in the database.
  * Fields starting with a $ character are encrypted.

src/electron/main.ts

@@ -0,0 +1,215 @@
+import { app, BrowserWindow } from "electron";
+import path from "path";
+import fs from "fs";
+
+// Simple logger implementation
+const logger = {
+  // eslint-disable-next-line no-console
+  log: (...args: unknown[]) => console.log(...args),
+  // eslint-disable-next-line no-console
+  error: (...args: unknown[]) => console.error(...args),
+  // eslint-disable-next-line no-console
+  info: (...args: unknown[]) => console.info(...args),
+  // eslint-disable-next-line no-console
+  warn: (...args: unknown[]) => console.warn(...args),
+  // eslint-disable-next-line no-console
+  debug: (...args: unknown[]) => console.debug(...args),
+};
+
+// Check if running in dev mode
+const isDev = process.argv.includes("--inspect");
+
+function createWindow(): void {
+  // Add before createWindow function
+  const preloadPath = path.join(__dirname, "preload.js");
+  logger.log("Checking preload path:", preloadPath);
+  logger.log("Preload exists:", fs.existsSync(preloadPath));
+
+  // Log environment and paths
+  logger.log("process.cwd():", process.cwd());
+  logger.log("__dirname:", __dirname);
+  logger.log("app.getAppPath():", app.getAppPath());
+  logger.log("app.isPackaged:", app.isPackaged);
+
+  // List files in __dirname and __dirname/www
+  try {
+    logger.log("Files in __dirname:", fs.readdirSync(__dirname));
+    const wwwDir = path.join(__dirname, "www");
+    if (fs.existsSync(wwwDir)) {
+      logger.log("Files in www:", fs.readdirSync(wwwDir));
+    } else {
+      logger.log("www directory does not exist in __dirname");
+    }
+  } catch (e) {
+    logger.error("Error reading directories:", e);
+  }
+
+  // Create the browser window.
+  const mainWindow = new BrowserWindow({
+    width: 1200,
+    height: 800,
+    webPreferences: {
+      nodeIntegration: false,
+      contextIsolation: true,
+      webSecurity: true,
+      allowRunningInsecureContent: false,
+      preload: path.join(__dirname, "preload.js"),
+    },
+  });
+
+  // Always open DevTools for now
+  mainWindow.webContents.openDevTools();
+
+  // Intercept requests to fix asset paths
+  mainWindow.webContents.session.webRequest.onBeforeRequest(
+    {
+      urls: [
+        "file://*/*/assets/*",
+        "file://*/assets/*",
+        "file:///assets/*", // Catch absolute paths
+        "<all_urls>", // Catch all URLs as a fallback
+      ],
+    },
+    (details, callback) => {
+      let url = details.url;
+
+      // Handle paths that don't start with file://
+      if (!url.startsWith("file://") && url.includes("/assets/")) {
+        url = `file://${path.join(__dirname, "www", url)}`;
+      }
+
+      // Handle absolute paths starting with /assets/
+      if (url.includes("/assets/") && !url.includes("/www/assets/")) {
+        const baseDir = url.includes("dist-electron")
+          ? url.substring(
+              0,
+              url.indexOf("/dist-electron") + "/dist-electron".length,
+            )
+          : `file://${__dirname}`;
+        const assetPath = url.split("/assets/")[1];
+        const newUrl = `${baseDir}/www/assets/${assetPath}`;
+        callback({ redirectURL: newUrl });
+        return;
+      }
+
+      callback({}); // No redirect for other URLs
+    },
+  );
+
+  if (isDev) {
+    // Debug info
+    logger.log("Debug Info:");
+    logger.log("Running in dev mode:", isDev);
+    logger.log("App is packaged:", app.isPackaged);
+    logger.log("Process resource path:", process.resourcesPath);
+    logger.log("App path:", app.getAppPath());
+    logger.log("__dirname:", __dirname);
+    logger.log("process.cwd():", process.cwd());
+  }
+
+  let indexPath = path.resolve(__dirname, "dist-electron", "www", "index.html");
+  if (!fs.existsSync(indexPath)) {
+    // Fallback for dev mode
+    indexPath = path.resolve(
+      process.cwd(),
+      "dist-electron",
+      "www",
+      "index.html",
+    );
+  }
+
+  if (isDev) {
+    logger.log("Loading index from:", indexPath);
+    logger.log("www path:", path.join(__dirname, "www"));
+    logger.log("www assets path:", path.join(__dirname, "www", "assets"));
+  }
+
+  if (!fs.existsSync(indexPath)) {
+    logger.error(`Index file not found at: ${indexPath}`);
+    throw new Error("Index file not found");
+  }
+
+  // Add CSP headers to allow API connections
+  mainWindow.webContents.session.webRequest.onHeadersReceived(
+    (details, callback) => {
+      callback({
+        responseHeaders: {
+          ...details.responseHeaders,
+          "Content-Security-Policy": [
+            "default-src 'self';" +
+              "connect-src 'self' https://api.endorser.ch https://*.timesafari.app;" +
+              "img-src 'self' data: https: blob:;" +
+              "script-src 'self' 'unsafe-inline' 'unsafe-eval';" +
+              "style-src 'self' 'unsafe-inline';" +
+              "font-src 'self' data:;",
+          ],
+        },
+      });
+    },
+  );
+
+  // Load the index.html
+  mainWindow
+    .loadFile(indexPath)
+    .then(() => {
+      logger.log("Successfully loaded index.html");
+      if (isDev) {
+        mainWindow.webContents.openDevTools();
+        logger.log("DevTools opened - running in dev mode");
+      }
+    })
+    .catch((err) => {
+      logger.error("Failed to load index.html:", err);
+      logger.error("Attempted path:", indexPath);
+    });
+
+  // Listen for console messages from the renderer
+  mainWindow.webContents.on("console-message", (_event, _level, message) => {
+    logger.log("Renderer Console:", message);
+  });
+
+  // Add right after creating the BrowserWindow
+  mainWindow.webContents.on(
+    "did-fail-load",
+    (_event, errorCode, errorDescription) => {
+      logger.error("Page failed to load:", errorCode, errorDescription);
+    },
+  );
+
+  mainWindow.webContents.on("preload-error", (_event, preloadPath, error) => {
+    logger.error("Preload script error:", preloadPath, error);
+  });
+
+  mainWindow.webContents.on(
+    "console-message",
+    (_event, _level, message, line, sourceId) => {
+      logger.log("Renderer Console:", line, sourceId, message);
+    },
+  );
+
+  // Enable remote debugging when in dev mode
+  if (isDev) {
+    mainWindow.webContents.openDevTools();
+  }
+}
+
+// Handle app ready
+app.whenReady().then(createWindow);
+
+// Handle all windows closed
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+
+app.on("activate", () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});
+
+// Handle any errors
+process.on("uncaughtException", (error) => {
+  logger.error("Uncaught Exception:", error);
+});

src/electron/preload.js

@@ -2,24 +2,33 @@ const { contextBridge, ipcRenderer } = require("electron");
 
 const logger = {
   log: (message, ...args) => {
+    // Always log in development, log with context in production
     if (process.env.NODE_ENV !== "production") {
       /* eslint-disable no-console */
-      console.log(message, ...args);
+      console.log(`[Preload] ${message}`, ...args);
       /* eslint-enable no-console */
     }
   },
   warn: (message, ...args) => {
-    if (process.env.NODE_ENV !== "production") {
-      /* eslint-disable no-console */
-      console.warn(message, ...args);
-      /* eslint-enable no-console */
-    }
+    // Always log warnings
+    /* eslint-disable no-console */
+    console.warn(`[Preload] ${message}`, ...args);
+    /* eslint-enable no-console */
   },
   error: (message, ...args) => {
+    // Always log errors
     /* eslint-disable no-console */
-    console.error(message, ...args); // Errors should always be logged
+    console.error(`[Preload] ${message}`, ...args);
     /* eslint-enable no-console */
   },
+  info: (message, ...args) => {
+    // Always log info in development, log with context in production
+    if (process.env.NODE_ENV !== "production") {
+      /* eslint-disable no-console */
+      console.info(`[Preload] ${message}`, ...args);
+      /* eslint-enable no-console */
+    }
+  },
 };
 
 // Use a more direct path resolution approach
@@ -41,7 +50,10 @@ const getPath = (pathType) => {
   }
 };
 
-logger.log("Preload script starting...");
+logger.info("Preload script starting...");
+
+// Force electron platform in the renderer process
+window.process = { env: { VITE_PLATFORM: "electron" } };
 
 try {
   contextBridge.exposeInMainWorld("electronAPI", {
@@ -65,6 +77,7 @@ try {
     env: {
       isElectron: true,
       isDev: process.env.NODE_ENV === "development",
+      platform: "electron", // Explicitly set platform
     },
     // Path utilities
     getBasePath: () => {
@@ -72,7 +85,7 @@ try {
     },
   });
 
-  logger.log("Preload script completed successfully");
+  logger.info("Preload script completed successfully");
 } catch (error) {
   logger.error("Error in preload script:", error);
 }

src/env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="vite/client" />
+
+declare const __USE_QR_READER__: boolean;
+declare const __IS_MOBILE__: boolean;

src/interfaces/absurd-sql.d.ts

@@ -0,0 +1,59 @@
+import type { QueryExecResult, SqlValue } from "./database";
+
+declare module "@jlongster/sql.js" {
+  interface SQL {
+    Database: new (path: string, options?: { filename: boolean }) => AbsurdSqlDatabase;
+    FS: {
+      mkdir: (path: string) => void;
+      mount: (fs: any, options: any, path: string) => void;
+      open: (path: string, flags: string) => any;
+      close: (stream: any) => void;
+    };
+    register_for_idb: (fs: any) => void;
+  }
+
+  interface AbsurdSqlDatabase {
+    exec: (sql: string, params?: unknown[]) => Promise<QueryExecResult[]>;
+    run: (
+      sql: string,
+      params?: unknown[],
+    ) => Promise<{ changes: number; lastId?: number }>;
+  }
+
+  const initSqlJs: (options?: {
+    locateFile?: (file: string) => string;
+  }) => Promise<SQL>;
+
+  export default initSqlJs;
+}
+
+declare module "absurd-sql" {
+  import type { SQL } from "@jlongster/sql.js";
+
+  export class SQLiteFS {
+    constructor(fs: any, backend: any);
+  }
+}
+
+declare module "absurd-sql/dist/indexeddb-backend" {
+  export default class IndexedDBBackend {
+    constructor();
+  }
+}
+
+declare module "absurd-sql/dist/indexeddb-main-thread" {
+  export interface SQLiteOptions {
+    filename?: string;
+    autoLoad?: boolean;
+    debug?: boolean;
+  }
+
+  export interface SQLiteDatabase {
+    exec: (sql: string, params?: unknown[]) => Promise<QueryExecResult[]>;
+    close: () => Promise<void>;
+  }
+
+  export function initSqlJs(options?: any): Promise<any>;
+  export function createDatabase(options?: SQLiteOptions): Promise<SQLiteDatabase>;
+  export function openDatabase(options?: SQLiteOptions): Promise<SQLiteDatabase>;
+} 

src/interfaces/claims.ts

@@ -1,15 +1,24 @@
-import { GenericVerifiableCredential } from "./common";
+/**
+ * Types of Claims
+ *
+ * Note that these are for the claims that get signed.
+ * Records that are the latest edited entities are in the records.ts file.
+ *
+ */
 
-export interface AgreeVerifiableCredential {
-  "@context": string;
+import { ClaimObject } from "./common";
+
+export interface AgreeActionClaim extends ClaimObject {
+  "@context": "https://schema.org";
   "@type": string;
   object: Record<string, unknown>;
 }
 
 // Note that previous VCs may have additional fields.
 // https://endorser.ch/doc/html/transactions.html#id4
-export interface GiveVerifiableCredential extends GenericVerifiableCredential {
-  "@context"?: string;
+export interface GiveActionClaim extends ClaimObject {
+  // context is optional because it might be embedded in another claim, eg. an AgreeAction
+  "@context"?: "https://schema.org";
   "@type": "GiveAction";
   agent?: { identifier: string };
   description?: string;
@@ -17,16 +26,25 @@ export interface GiveVerifiableCredential extends GenericVerifiableCredential {
   identifier?: string;
   image?: string;
   object?: { amountOfThisGood: number; unitCode: string };
-  provider?: GenericVerifiableCredential;
+  provider?: ClaimObject;
   recipient?: { identifier: string };
 }
 
+export interface JoinActionClaim extends ClaimObject {
+  agent?: { identifier: string };
+  event?: { organizer?: { name: string }; name?: string; startTime?: string };
+}
+
 // Note that previous VCs may have additional fields.
 // https://endorser.ch/doc/html/transactions.html#id8
-export interface OfferVerifiableCredential extends GenericVerifiableCredential {
-  "@context"?: string;
+export interface OfferClaim extends ClaimObject {
+  "@context": "https://schema.org";
   "@type": "Offer";
+  agent?: { identifier: string };
   description?: string;
+  fulfills?: { "@type": string; identifier?: string; lastClaimId?: string }[];
+  identifier?: string;
+  image?: string;
   includesObject?: { amountOfThisGood: number; unitCode: string };
   itemOffered?: {
     description?: string;
@@ -37,14 +55,18 @@ export interface OfferVerifiableCredential extends GenericVerifiableCredential {
       name?: string;
     };
   };
-  offeredBy?: { identifier: string };
+  offeredBy?: {
+    type?: "Person";
+    identifier: string;
+  };
+  provider?: ClaimObject;
   recipient?: { identifier: string };
   validThrough?: string;
 }
 
 // Note that previous VCs may have additional fields.
 // https://endorser.ch/doc/html/transactions.html#id7
-export interface PlanVerifiableCredential extends GenericVerifiableCredential {
+export interface PlanActionClaim extends ClaimObject {
   "@context": "https://schema.org";
   "@type": "PlanAction";
   name: string;
@@ -58,11 +80,18 @@ export interface PlanVerifiableCredential extends GenericVerifiableCredential {
 }
 
 // AKA Registration & RegisterAction
-export interface RegisterVerifiableCredential {
-  "@context": string;
+export interface RegisterActionClaim extends ClaimObject {
+  "@context": "https://schema.org";
   "@type": "RegisterAction";
   agent: { identifier: string };
   identifier?: string;
-  object: string;
+  object?: string;
   participant?: { identifier: string };
 }
+
+export interface TenureClaim extends ClaimObject {
+  "@context": "https://endorser.ch";
+  "@type": "Tenure";
+  party?: { identifier: string };
+  spatialUnit?: { geo?: { polygon?: string } };
+}

src/interfaces/common.ts

@@ -34,3 +34,77 @@ export interface ErrorResult extends ResultWithType {
   type: "error";
   error: InternalError;
 }
+
+export interface KeyMeta {
+  did: string;
+  publicKeyHex: string;
+  derivationPath?: string;
+  passkeyCredIdHex?: string; // The Webauthn credential ID in hex, if this is from a passkey
+}
+
+export interface KeyMetaMaybeWithPrivate extends KeyMeta {
+  mnemonic?: string; // 12 or 24 words encoding the seed
+  identity?: string; // Stringified IIdentifier object from Veramo
+}
+
+export interface KeyMetaWithPrivate extends KeyMeta {
+  mnemonic: string; // 12 or 24 words encoding the seed
+  identity: string; // Stringified IIdentifier object from Veramo
+}
+
+export interface QuantitativeValue extends GenericVerifiableCredential {
+  "@type": "QuantitativeValue";
+  "@context"?: string;
+  amountOfThisGood: number;
+  unitCode: string;
+}
+
+export interface AxiosErrorResponse {
+  message?: string;
+  response?: {
+    data?: {
+      error?: {
+        message?: string;
+      };
+      [key: string]: unknown;
+    };
+    status?: number;
+    config?: unknown;
+  };
+  config?: unknown;
+  [key: string]: unknown;
+}
+
+export interface UserInfo {
+  did: string;
+  name: string;
+  publicEncKey: string;
+  registered: boolean;
+  profileImageUrl?: string;
+  nextPublicEncKeyHash?: string;
+}
+
+export interface CreateAndSubmitClaimResult {
+  success: boolean;
+  error?: string;
+  handleId?: string;
+}
+
+export interface Agent {
+  identifier?: string;
+  did?: string;
+}
+
+export interface ClaimObject {
+  "@type": string;
+  "@context"?: string;
+  [key: string]: unknown;
+}
+
+export interface VerifiableCredentialClaim {
+  "@context"?: string;
+  "@type": string;
+  type: string[];
+  credentialSubject: ClaimObject;
+  [key: string]: unknown;
+}

src/interfaces/database.ts

@@ -0,0 +1,15 @@
+export type SqlValue = string | number | null | Uint8Array;
+
+export interface QueryExecResult {
+  columns: Array<string>;
+  values: Array<Array<SqlValue>>;
+}
+
+export interface DatabaseService {
+  initialize(): Promise<void>;
+  query(sql: string, params?: unknown[]): Promise<QueryExecResult[]>;
+  run(
+    sql: string,
+    params?: unknown[],
+  ): Promise<{ changes: number; lastId?: number }>;
+}

src/interfaces/deepLinks.ts

@@ -1,11 +1,106 @@
 /**
- * @file Deep Link Interface Definitions
+ * @file Deep Link Type Definitions and Validation Schemas
  * @author Matthew Raymer
  *
- * Defines the core interfaces for the deep linking system.
- * These interfaces are used across the deep linking implementation
- * to ensure type safety and consistent error handling.
+ * This file defines the type system and validation schemas for deep linking in the TimeSafari app.
+ * It uses Zod for runtime validation while providing TypeScript types for compile-time checking.
+ *
+ * Type Strategy:
+ * 1. Define base URL schema to validate the fundamental deep link structure
+ * 2. Define route-specific parameter schemas with exact validation rules
+ * 3. Generate TypeScript types from Zod schemas for type safety
+ * 4. Export both schemas and types for use in deep link handling
+ *
+ * Usage:
+ * - Import schemas for runtime validation in deep link handlers
+ * - Import types for type-safe parameter handling in components
+ * - Use DeepLinkParams type for type-safe access to route parameters
+ *
+ * @example
+ * // Runtime validation
+ * const params = deepLinkSchemas.claim.parse({ id: "123", view: "details" });
+ *
+ * // Type-safe parameter access
+ * function handleClaimParams(params: DeepLinkParams["claim"]) {
+ *   // TypeScript knows params.id exists and params.view is optional
+ * }
  */
+import { z } from "zod";
+
+// Add a union type of all valid route paths
+export const VALID_DEEP_LINK_ROUTES = [
+  "user-profile",
+  "project-details",
+  "onboard-meeting-setup",
+  "invite-one-accept",
+  "contact-import",
+  "confirm-gift",
+  "claim",
+  "claim-cert",
+  "claim-add-raw",
+  "contact-edit",
+  "contacts",
+  "did",
+] as const;
+
+// Create a type from the array
+export type DeepLinkRoute = (typeof VALID_DEEP_LINK_ROUTES)[number];
+
+// Update your schema definitions to use this type
+export const baseUrlSchema = z.object({
+  scheme: z.literal("timesafari"),
+  path: z.string(),
+  queryParams: z.record(z.string()).optional(),
+});
+
+// Use the type to ensure route validation
+export const routeSchema = z.enum(VALID_DEEP_LINK_ROUTES);
+
+// Parameter validation schemas for each route type
+export const deepLinkSchemas = {
+  "user-profile": z.object({
+    id: z.string(),
+  }),
+  "project-details": z.object({
+    id: z.string(),
+  }),
+  "onboard-meeting-setup": z.object({
+    id: z.string(),
+  }),
+  "invite-one-accept": z.object({
+    id: z.string(),
+  }),
+  "contact-import": z.object({
+    jwt: z.string(),
+  }),
+  "confirm-gift": z.object({
+    id: z.string(),
+  }),
+  claim: z.object({
+    id: z.string(),
+  }),
+  "claim-cert": z.object({
+    id: z.string(),
+  }),
+  "claim-add-raw": z.object({
+    id: z.string(),
+    claim: z.string().optional(),
+    claimJwtId: z.string().optional(),
+  }),
+  "contact-edit": z.object({
+    did: z.string(),
+  }),
+  contacts: z.object({
+    contacts: z.string(), // JSON string of contacts array
+  }),
+  did: z.object({
+    did: z.string(),
+  }),
+};
+
+export type DeepLinkParams = {
+  [K in keyof typeof deepLinkSchemas]: z.infer<(typeof deepLinkSchemas)[K]>;
+};
 
 export interface DeepLinkError extends Error {
   code: string;

src/interfaces/give.ts

@@ -0,0 +1,25 @@
+/**
+ * Interfaces for the give records with limited contact information, good to show on a feed.
+ **/
+
+import { GiveSummaryRecord } from "./records";
+
+// Common interface for views with summary contact information
+export interface ContactInfo {
+  known: boolean;
+  displayName: string;
+  profileImageUrl?: string;
+}
+
+// Define a subset of contact information fields
+interface GiveContactInfo {
+  giver: ContactInfo;
+  issuer: ContactInfo;
+  receiver: ContactInfo;
+  providerPlanName?: string;
+  recipientProjectName?: string;
+  image?: string;
+}
+
+// Combine GiveSummaryRecord with contact information
+export type GiveRecordWithContactInfo = GiveSummaryRecord & GiveContactInfo;

src/interfaces/index.ts

@@ -1,7 +1,37 @@
-export * from "./claims";
-export * from "./claims-result";
-export * from "./common";
+export type {
+  // From common.ts
+  GenericCredWrapper,
+  GenericVerifiableCredential,
+  KeyMeta,
+  // Exclude types that are also exported from other files
+  // GiveVerifiableCredential,
+  // OfferVerifiableCredential,
+  // RegisterVerifiableCredential,
+  // PlanSummaryRecord,
+  // UserInfo,
+} from "./common";
+
+export type {
+  // From claims.ts
+  GiveActionClaim,
+  OfferClaim,
+  RegisterActionClaim,
+} from "./claims";
+
+export type {
+  // From claims-result.ts
+  CreateAndSubmitClaimResult,
+} from "./claims-result";
+
+export type {
+  // From records.ts
+  PlanSummaryRecord,
+} from "./records";
+
+export type {
+  // From user.ts
+  UserInfo,
+} from "./user";
+
 export * from "./limits";
-export * from "./records";
-export * from "./user";
 export * from "./deepLinks";

src/interfaces/records.ts

@@ -1,14 +1,14 @@
-import { GiveVerifiableCredential, OfferVerifiableCredential } from "./claims";
+import { GiveActionClaim, OfferClaim } from "./claims";
 
 // a summary record; the VC is found the fullClaim field
 export interface GiveSummaryRecord {
-  [x: string]: PropertyKey | undefined | GiveVerifiableCredential;
+  [x: string]: PropertyKey | undefined | GiveActionClaim;
   type?: string;
   agentDid: string;
   amount: number;
   amountConfirmed: number;
   description: string;
-  fullClaim: GiveVerifiableCredential;
+  fullClaim: GiveActionClaim;
   fulfillsHandleId: string;
   fulfillsPlanHandleId?: string;
   fulfillsType?: string;
@@ -26,7 +26,7 @@ export interface OfferSummaryRecord {
   amount: number;
   amountGiven: number;
   amountGivenConfirmed: number;
-  fullClaim: OfferVerifiableCredential;
+  fullClaim: OfferClaim;
   fulfillsPlanHandleId: string;
   handleId: string;
   issuerDid: string;

src/libs/crypto/index.ts

@@ -9,6 +9,7 @@ import {
   createEndorserJwtForDid,
   CONTACT_URL_PATH_ENDORSER_CH_OLD,
   CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
+  CONTACT_CONFIRM_URL_PATH_TIME_SAFARI,
 } from "../../libs/endorserServer";
 import { DEFAULT_DID_PROVIDER_NAME } from "../veramo/setup";
 import { logger } from "../../utils/logger";
@@ -31,7 +32,7 @@ export const newIdentifier = (
   publicHex: string,
   privateHex: string,
   derivationPath: string,
-): Omit<IIdentifier, keyof "provider"> => {
+): IIdentifier => {
   return {
     did: DEFAULT_DID_PROVIDER_NAME + ":" + address,
     keys: [
@@ -104,34 +105,41 @@ export const accessToken = async (did?: string) => {
 };
 
 /**
- @return payload of JWT pulled out of any recognized URL path (if any)
+ * Extract JWT from various URL formats
+ * @param jwtUrlText The URL containing the JWT
+ * @returns The extracted JWT or null if not found
  */
 export const getContactJwtFromJwtUrl = (jwtUrlText: string) => {
-  let jwtText = jwtUrlText;
-  const appImportConfirmUrlLoc = jwtText.indexOf(
-    CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI,
-  );
-  if (appImportConfirmUrlLoc > -1) {
-    jwtText = jwtText.substring(
-      appImportConfirmUrlLoc +
-        CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI.length,
-    );
+  try {
+    let jwtText = jwtUrlText;
+
+    // Try to extract JWT from URL paths
+    const paths = [
+      CONTACT_CONFIRM_URL_PATH_TIME_SAFARI,
+      CONTACT_IMPORT_CONFIRM_URL_PATH_TIME_SAFARI,
+      CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
+      CONTACT_URL_PATH_ENDORSER_CH_OLD,
+    ];
+
+    for (const path of paths) {
+      const pathIndex = jwtText.indexOf(path);
+      if (pathIndex > -1) {
+        jwtText = jwtText.substring(pathIndex + path.length);
+        break;
+      }
+    }
+
+    // Validate JWT format
+    if (!jwtText.match(/^[A-Za-z0-9-_]+\.[A-Za-z0-9-_]+\.[A-Za-z0-9-_]*$/)) {
+      logger.error("Invalid JWT format in URL:", jwtUrlText);
+      return null;
+    }
+
+    return jwtText;
+  } catch (error) {
+    logger.error("Error extracting JWT from URL:", error);
+    return null;
   }
-  const appImportOneUrlLoc = jwtText.indexOf(
-    CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI,
-  );
-  if (appImportOneUrlLoc > -1) {
-    jwtText = jwtText.substring(
-      appImportOneUrlLoc + CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI.length,
-    );
-  }
-  const endorserUrlPathLoc = jwtText.indexOf(CONTACT_URL_PATH_ENDORSER_CH_OLD);
-  if (endorserUrlPathLoc > -1) {
-    jwtText = jwtText.substring(
-      endorserUrlPathLoc + CONTACT_URL_PATH_ENDORSER_CH_OLD.length,
-    );
-  }
-  return jwtText;
 };
 
 export const nextDerivationPath = (origDerivPath: string) => {
@@ -151,7 +159,7 @@ export const nextDerivationPath = (origDerivPath: string) => {
 };
 
 // Base64 encoding/decoding utilities for browser
-function base64ToArrayBuffer(base64: string): Uint8Array {
+export function base64ToArrayBuffer(base64: string): Uint8Array {
   const binaryString = atob(base64);
   const bytes = new Uint8Array(binaryString.length);
   for (let i = 0; i < binaryString.length; i++) {
@@ -160,7 +168,7 @@ function base64ToArrayBuffer(base64: string): Uint8Array {
   return bytes;
 }
 
-function arrayBufferToBase64(buffer: ArrayBuffer): string {
+export function arrayBufferToBase64(buffer: ArrayBuffer): string {
   const binary = String.fromCharCode(...new Uint8Array(buffer));
   return btoa(binary);
 }
@@ -170,7 +178,7 @@ const IV_LENGTH = 12;
 const KEY_LENGTH = 256;
 const ITERATIONS = 100000;
 
-// Encryption helper function
+// Message encryption helper function, used for onboarding meeting messages
 export async function encryptMessage(message: string, password: string) {
   const encoder = new TextEncoder();
   const salt = crypto.getRandomValues(new Uint8Array(SALT_LENGTH));
@@ -218,7 +226,7 @@ export async function encryptMessage(message: string, password: string) {
   return btoa(JSON.stringify(result));
 }
 
-// Decryption helper function
+// Message decryption helper function, used for onboarding meeting messages
 export async function decryptMessage(encryptedJson: string, password: string) {
   const decoder = new TextDecoder();
   const { salt, iv, encrypted } = JSON.parse(atob(encryptedJson));
@@ -265,7 +273,7 @@ export async function decryptMessage(encryptedJson: string, password: string) {
 }
 
 // Test function to verify encryption/decryption
-export async function testEncryptionDecryption() {
+export async function testMessageEncryptionDecryption() {
   try {
     const testMessage = "Hello, this is a test message! 🚀";
     const testPassword = "myTestPassword123";
@@ -291,9 +299,111 @@ export async function testEncryptionDecryption() {
     logger.log("\nTesting with wrong password...");
     try {
       await decryptMessage(encrypted, "wrongPassword");
-      logger.log("Should not reach here");
+      logger.log("Incorrectly decrypted with wrong password ❌");
     } catch (error) {
-      logger.log("Correctly failed with wrong password ✅");
+      logger.log("Correctly failed to decrypt with wrong password ✅");
+    }
+
+    return success;
+  } catch (error) {
+    logger.error("Test failed with error:", error);
+    return false;
+  }
+}
+
+// Simple encryption using Node's crypto, used for the initial encryption of the identity and mnemonic
+export async function simpleEncrypt(
+  text: string,
+  secret: ArrayBuffer,
+): Promise<ArrayBuffer> {
+  const iv = crypto.getRandomValues(new Uint8Array(16));
+
+  // Derive a 256-bit key from the secret using SHA-256
+  const keyData = await crypto.subtle.digest("SHA-256", secret);
+  const key = await crypto.subtle.importKey(
+    "raw",
+    keyData,
+    { name: "AES-GCM" },
+    false,
+    ["encrypt"],
+  );
+
+  const encrypted = await crypto.subtle.encrypt(
+    { name: "AES-GCM", iv },
+    key,
+    new TextEncoder().encode(text),
+  );
+
+  // Combine IV and encrypted data
+  const result = new Uint8Array(iv.length + encrypted.byteLength);
+  result.set(iv);
+  result.set(new Uint8Array(encrypted), iv.length);
+
+  return result.buffer;
+}
+
+// Simple decryption using Node's crypto, used for the default decryption of identity and mnemonic
+export async function simpleDecrypt(
+  encryptedText: ArrayBuffer,
+  secret: ArrayBuffer,
+): Promise<string> {
+  const data = new Uint8Array(encryptedText);
+
+  // Extract IV and encrypted data
+  const iv = data.slice(0, 16);
+  const encrypted = data.slice(16);
+
+  // Derive the same 256-bit key from the secret using SHA-256
+  const keyData = await crypto.subtle.digest("SHA-256", secret);
+  const key = await crypto.subtle.importKey(
+    "raw",
+    keyData,
+    { name: "AES-GCM" },
+    false,
+    ["decrypt"],
+  );
+
+  const decrypted = await crypto.subtle.decrypt(
+    { name: "AES-GCM", iv },
+    key,
+    encrypted,
+  );
+
+  return new TextDecoder().decode(decrypted);
+}
+
+// Test function for simple encryption/decryption
+export async function testSimpleEncryptionDecryption() {
+  try {
+    const testMessage = "Hello, this is a test message! 🚀";
+    const testSecret = crypto.getRandomValues(new Uint8Array(32));
+
+    logger.log("Original message:", testMessage);
+
+    // Test encryption
+    logger.log("Encrypting...");
+    const encrypted = await simpleEncrypt(testMessage, testSecret);
+    const encryptedBase64 = arrayBufferToBase64(encrypted);
+    logger.log("Encrypted result:", encryptedBase64);
+
+    // Test decryption
+    logger.log("Decrypting...");
+    const encryptedArrayBuffer = base64ToArrayBuffer(encryptedBase64);
+    const decrypted = await simpleDecrypt(encryptedArrayBuffer, testSecret);
+    logger.log("Decrypted result:", decrypted);
+
+    // Verify
+    const success = testMessage === decrypted;
+    logger.log("Test " + (success ? "PASSED ✅" : "FAILED ❌"));
+    logger.log("Messages match:", success);
+
+    // Test with wrong secret
+    logger.log("\nTesting with wrong secret...");
+    try {
+      await simpleDecrypt(encryptedArrayBuffer, new Uint8Array(32));
+      logger.log("Incorrectly decrypted with wrong secret ❌");
+    } catch (error) {
+      logger.log("Correctly failed to decrypt with wrong secret ✅");
     }
 
     return success;

src/libs/crypto/vc/index.ts

@@ -17,29 +17,12 @@ import { didEthLocalResolver } from "./did-eth-local-resolver";
 import { PEER_DID_PREFIX, verifyPeerSignature } from "./didPeer";
 import { base64urlDecodeString, createDidPeerJwt } from "./passkeyDidPeer";
 import { urlBase64ToUint8Array } from "./util";
+import { KeyMeta, KeyMetaWithPrivate } from "../../../interfaces/common";
 
 export const ETHR_DID_PREFIX = "did:ethr:";
 export const JWT_VERIFY_FAILED_CODE = "JWT_VERIFY_FAILED";
 export const UNSUPPORTED_DID_METHOD_CODE = "UNSUPPORTED_DID_METHOD";
 
-/**
- * Meta info about a key
- */
-export interface KeyMeta {
-  /**
-   * Decentralized ID for the key
-   */
-  did: string;
-  /**
-   * Stringified IIDentifier object from Veramo
-   */
-  identity?: string;
-  /**
-   * The Webauthn credential ID in hex, if this is from a passkey
-   */
-  passkeyCredIdHex?: string;
-}
-
 const ethLocalResolver = new Resolver({ ethr: didEthLocalResolver });
 
 /**
@@ -51,7 +34,7 @@ export function isFromPasskey(keyMeta?: KeyMeta): boolean {
 }
 
 export async function createEndorserJwtForKey(
-  account: KeyMeta,
+  account: KeyMetaWithPrivate,
   payload: object,
   expiresIn?: number,
 ) {

src/libs/crypto/vc/passkeyDidPeer.ts

@@ -1,7 +1,6 @@
 import { Buffer } from "buffer/";
 import { JWTPayload } from "did-jwt";
-import { DIDResolutionResult } from "did-resolver";
-import { sha256 } from "ethereum-cryptography/sha256.js";
+import { p256 } from "@noble/curves/p256";
 import {
   startAuthentication,
   startRegistration,
@@ -11,12 +10,13 @@ import {
   generateRegistrationOptions,
   verifyAuthenticationResponse,
   verifyRegistrationResponse,
+  VerifyAuthenticationResponseOpts,
 } from "@simplewebauthn/server";
-import { VerifyAuthenticationResponseOpts } from "@simplewebauthn/server/esm/authentication/verifyAuthenticationResponse";
 import {
   Base64URLString,
   PublicKeyCredentialCreationOptionsJSON,
   PublicKeyCredentialRequestOptionsJSON,
+  AuthenticatorAssertionResponse,
 } from "@simplewebauthn/types";
 
 import { AppString } from "../../../constants/app";
@@ -194,16 +194,19 @@ export class PeerSetup {
       },
     };
 
-    const credential = await navigator.credentials.get(options);
+    const credential = (await navigator.credentials.get(
+      options,
+    )) as PublicKeyCredential;
     // console.log("nav credential get", credential);
 
-    this.authenticatorData = credential?.response.authenticatorData;
+    const response = credential?.response as AuthenticatorAssertionResponse;
+    this.authenticatorData = response?.authenticatorData;
     const authenticatorDataBase64Url = arrayBufferToBase64URLString(
       this.authenticatorData as ArrayBuffer,
     );
 
     this.clientDataJsonBase64Url = arrayBufferToBase64URLString(
-      credential?.response.clientDataJSON,
+      response?.clientDataJSON,
     );
 
     // Our custom type of JWANT means the signature is based on a concatenation of the two Webauthn properties
@@ -228,9 +231,7 @@ export class PeerSetup {
       .replace(/\//g, "_")
       .replace(/=+$/, "");
 
-    const origSignature = Buffer.from(credential?.response.signature).toString(
-      "base64",
-    );
+    const origSignature = Buffer.from(response?.signature).toString("base64");
     this.signature = origSignature
       .replace(/\+/g, "-")
       .replace(/\//g, "_")
@@ -315,24 +316,18 @@ export async function createDidPeerJwt(
 // ... and this import:
 // import { p256 } from "@noble/curves/p256";
 export async function verifyJwtP256(
-  credIdHex: string,
   issuerDid: string,
   authenticatorData: ArrayBuffer,
   challenge: Uint8Array,
-  clientDataJsonBase64Url: Base64URLString,
   signature: Base64URLString,
 ) {
   const authDataFromBase = Buffer.from(authenticatorData);
-  const clientDataFromBase = Buffer.from(clientDataJsonBase64Url, "base64");
   const sigBuffer = Buffer.from(signature, "base64");
   const finalSigBuffer = unwrapEC2Signature(sigBuffer);
   const publicKeyBytes = peerDidToPublicKeyBytes(issuerDid);
 
-  // Hash the client data
-  const hash = sha256(clientDataFromBase);
-
-  // Construct the preimage
-  const preimage = Buffer.concat([authDataFromBase, hash]);
+  // Use challenge in preimage construction
+  const preimage = Buffer.concat([authDataFromBase, Buffer.from(challenge)]);
 
   const isValid = p256.verify(
     finalSigBuffer,
@@ -383,122 +378,37 @@ export async function verifyJwtSimplewebauthn(
 
 // similar code is in endorser-ch util-crypto.ts verifyPeerSignature
 export async function verifyJwtWebCrypto(
-  credId: Base64URLString,
   issuerDid: string,
   authenticatorData: ArrayBuffer,
   challenge: Uint8Array,
-  clientDataJsonBase64Url: Base64URLString,
   signature: Base64URLString,
 ) {
   const authDataFromBase = Buffer.from(authenticatorData);
-  const clientDataFromBase = Buffer.from(clientDataJsonBase64Url, "base64");
   const sigBuffer = Buffer.from(signature, "base64");
   const finalSigBuffer = unwrapEC2Signature(sigBuffer);
 
-  // Hash the client data
-  const hash = sha256(clientDataFromBase);
+  // Use challenge in preimage construction
+  const preimage = Buffer.concat([authDataFromBase, Buffer.from(challenge)]);
 
-  // Construct the preimage
-  const preimage = Buffer.concat([authDataFromBase, hash]);
   return verifyPeerSignature(preimage, issuerDid, finalSigBuffer);
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-async function peerDidToDidDocument(did: string): Promise<DIDResolutionResult> {
-  if (!did.startsWith("did:peer:0z")) {
-    throw new Error(
-      "This only verifies a peer DID, method 0, encoded base58btc.",
-    );
-  }
-  // this is basically hard-coded from https://www.w3.org/TR/did-core/#example-various-verification-method-types
-  // (another reference is the @aviarytech/did-peer resolver)
+// Remove unused functions:
+// - peerDidToDidDocument
+// - COSEtoPEM
+// - base64urlDecodeArrayBuffer
+// - base64urlEncodeArrayBuffer
+// - pemToCryptoKey
 
-  /**
-   * Looks like JsonWebKey2020 isn't too difficult:
-   * - change context security/suites link to jws-2020/v1
-   * - change publicKeyMultibase to publicKeyJwk generated with cborToKeys
-   * - change type to JsonWebKey2020
-   */
-
-  const id = did.split(":")[2];
-  const multibase = id.slice(1);
-  const encnumbasis = multibase.slice(1);
-  const didDocument = {
-    "@context": [
-      "https://www.w3.org/ns/did/v1",
-      "https://w3id.org/security/suites/secp256k1-2019/v1",
-    ],
-    assertionMethod: [did + "#" + encnumbasis],
-    authentication: [did + "#" + encnumbasis],
-    capabilityDelegation: [did + "#" + encnumbasis],
-    capabilityInvocation: [did + "#" + encnumbasis],
-    id: did,
-    keyAgreement: undefined,
-    service: undefined,
-    verificationMethod: [
-      {
-        controller: did,
-        id: did + "#" + encnumbasis,
-        publicKeyMultibase: multibase,
-        type: "EcdsaSecp256k1VerificationKey2019",
-      },
-    ],
-  };
-  return {
-    didDocument,
-    didDocumentMetadata: {},
-    didResolutionMetadata: { contentType: "application/did+ld+json" },
-  };
-}
-
-// convert COSE public key to PEM format
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function COSEtoPEM(cose: Buffer) {
-  // const alg = cose.get(3); // Algorithm
-  const x = cose[-2]; // x-coordinate
-  const y = cose[-3]; // y-coordinate
-
-  // Ensure the coordinates are in the correct format
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-expect-error because it complains about the type of x and y
-  const pubKeyBuffer = Buffer.concat([Buffer.from([0x04]), x, y]);
-
-  // Convert to PEM format
-  const pem = `-----BEGIN PUBLIC KEY-----
-${pubKeyBuffer.toString("base64")}
------END PUBLIC KEY-----`;
-
-  return pem;
-}
-
-// tried the base64url library but got an error using their Buffer
+// Keep only the used functions:
 export function base64urlDecodeString(input: string) {
   return atob(input.replace(/-/g, "+").replace(/_/g, "/"));
 }
 
-// tried the base64url library but got an error using their Buffer
 export function base64urlEncodeString(input: string) {
   return btoa(input).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
 }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function base64urlDecodeArrayBuffer(input: string) {
-  input = input.replace(/-/g, "+").replace(/_/g, "/");
-  const pad = input.length % 4 === 0 ? "" : "====".slice(input.length % 4);
-  const str = atob(input + pad);
-  const bytes = new Uint8Array(str.length);
-  for (let i = 0; i < str.length; i++) {
-    bytes[i] = str.charCodeAt(i);
-  }
-  return bytes.buffer;
-}
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-function base64urlEncodeArrayBuffer(buffer: ArrayBuffer) {
-  const str = String.fromCharCode(...new Uint8Array(buffer));
-  return base64urlEncodeString(str);
-}
-
 // from @simplewebauthn/browser
 function arrayBufferToBase64URLString(buffer: ArrayBuffer) {
   const bytes = new Uint8Array(buffer);
@@ -523,28 +433,3 @@ function base64URLStringToArrayBuffer(base64URLString: string) {
   }
   return buffer;
 }
-
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-async function pemToCryptoKey(pem: string) {
-  const binaryDerString = atob(
-    pem
-      .split("\n")
-      .filter((x) => !x.includes("-----"))
-      .join(""),
-  );
-  const binaryDer = new Uint8Array(binaryDerString.length);
-  for (let i = 0; i < binaryDerString.length; i++) {
-    binaryDer[i] = binaryDerString.charCodeAt(i);
-  }
-  // console.log("binaryDer", binaryDer.buffer);
-  return await window.crypto.subtle.importKey(
-    "spki",
-    binaryDer.buffer,
-    {
-      name: "RSASSA-PKCS1-v1_5",
-      hash: "SHA-256",
-    },
-    true,
-    ["verify"],
-  );
-}

src/libs/endorserServer.ts

@@ -26,29 +26,42 @@ import {
   DEFAULT_IMAGE_API_SERVER,
   NotificationIface,
   APP_SERVER,
+  USE_DEXIE_DB,
 } from "../constants/app";
 import { Contact } from "../db/tables/contacts";
 import { accessToken, deriveAddress, nextDerivationPath } from "../libs/crypto";
-import { logConsoleAndDb, NonsensitiveDexie } from "../db/index";
-
+import { NonsensitiveDexie } from "../db/index";
+import { logConsoleAndDb } from "../db/databaseUtil";
 import {
   retrieveAccountMetadata,
   retrieveFullyDecryptedAccount,
   getPasskeyExpirationSeconds,
 } from "../libs/util";
-import { createEndorserJwtForKey, KeyMeta } from "../libs/crypto/vc";
+import { createEndorserJwtForKey } from "../libs/crypto/vc";
+import {
+  GiveActionClaim,
+  JoinActionClaim,
+  OfferClaim,
+  PlanActionClaim,
+  RegisterActionClaim,
+  TenureClaim,
+} from "../interfaces/claims";
 
 import {
-  GiveVerifiableCredential,
-  OfferVerifiableCredential,
-  RegisterVerifiableCredential,
-  GenericVerifiableCredential,
   GenericCredWrapper,
-  PlanSummaryRecord,
+  GenericVerifiableCredential,
+  AxiosErrorResponse,
   UserInfo,
   CreateAndSubmitClaimResult,
-} from "../interfaces";
+  ClaimObject,
+  VerifiableCredentialClaim,
+  QuantitativeValue,
+  KeyMetaWithPrivate,
+  KeyMetaMaybeWithPrivate,
+} from "../interfaces/common";
+import { PlanSummaryRecord } from "../interfaces/records";
 import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 
 /**
  * Standard context for schema.org data
@@ -86,6 +99,12 @@ export const CONTACT_IMPORT_ONE_URL_PATH_TIME_SAFARI = "/contacts?contactJwt=";
  */
 export const CONTACT_URL_PATH_ENDORSER_CH_OLD = "/contact?jwt=";
 
+/**
+ * URL path suffix for contact confirmation
+ * @constant {string}
+ */
+export const CONTACT_CONFIRM_URL_PATH_TIME_SAFARI = "/contact/confirm/";
+
 /**
  * The prefix for handle IDs, the permanent ID for claims on Endorser
  * @constant {string}
@@ -94,7 +113,10 @@ export const ENDORSER_CH_HANDLE_PREFIX = "https://endorser.ch/entity/";
 
 export const BLANK_GENERIC_SERVER_RECORD: GenericCredWrapper<GenericVerifiableCredential> =
   {
-    claim: { "@type": "" },
+    claim: {
+      "@context": SCHEMA_ORG_CONTEXT,
+      "@type": "",
+    },
     handleId: "",
     id: "",
     issuedAt: "",
@@ -119,7 +141,7 @@ export function isDid(did: string): boolean {
  * @param {string} did - The DID to check
  * @returns {boolean} True if DID is hidden
  */
-export function isHiddenDid(did: string): boolean {
+export function isHiddenDid(did: string | undefined): boolean {
   return did === HIDDEN_DID;
 }
 
@@ -174,37 +196,21 @@ export function isEmptyOrHiddenDid(did?: string): boolean {
  * };
  * testRecursivelyOnStrings(isHiddenDid, obj); // Returns: true
  */
-function testRecursivelyOnStrings(
-  func: (arg0: unknown) => boolean,
+const testRecursivelyOnStrings = (
   input: unknown,
-): boolean {
-  // Test direct string values
-  if (Object.prototype.toString.call(input) === "[object String]") {
-    return func(input);
+  test: (s: string) => boolean,
+): boolean => {
+  if (typeof input === "string") {
+    return test(input);
+  } else if (Array.isArray(input)) {
+    return input.some((item) => testRecursivelyOnStrings(item, test));
+  } else if (input && typeof input === "object") {
+    return Object.values(input as Record<string, unknown>).some((value) =>
+      testRecursivelyOnStrings(value, test),
+    );
   }
-  // Recursively test objects and arrays
-  else if (input instanceof Object) {
-    if (!Array.isArray(input)) {
-      // Handle plain objects
-      for (const key in input) {
-        if (testRecursivelyOnStrings(func, input[key])) {
-          return true;
-        }
-      }
-    } else {
-      // Handle arrays
-      for (const value of input) {
-        if (testRecursivelyOnStrings(func, value)) {
-          return true;
-        }
-      }
-    }
-    return false;
-  } else {
-    // Non-string, non-object values can't contain strings
-    return false;
-  }
-}
+  return false;
+};
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export function containsHiddenDid(obj: any) {
@@ -545,7 +551,11 @@ export async function setPlanInCache(
  * @returns {string|undefined} User-friendly message or undefined if none found
  */
 export function serverMessageForUser(error: unknown): string | undefined {
-  return error?.response?.data?.error?.message;
+  if (error && typeof error === "object" && "response" in error) {
+    const err = error as AxiosErrorResponse;
+    return err.response?.data?.error?.message;
+  }
+  return undefined;
 }
 
 /**
@@ -567,18 +577,27 @@ export function errorStringForLog(error: unknown) {
     // --- property '_value' closes the circle
   }
   let fullError = "" + error + " - JSON: " + stringifiedError;
-  const errorResponseText = JSON.stringify(error.response);
-  // for some reason, error.response is not included in stringify result (eg. for 400 errors on invite redemptions)
-  if (!R.empty(errorResponseText) && !fullError.includes(errorResponseText)) {
-    // add error.response stuff
-    if (R.equals(error?.config, error?.response?.config)) {
-      // but exclude "config" because it's already in there
-      const newErrorResponseText = JSON.stringify(
-        R.omit(["config"] as never[], error.response),
-      );
-      fullError += " - .response w/o same config JSON: " + newErrorResponseText;
-    } else {
-      fullError += " - .response JSON: " + errorResponseText;
+
+  if (error && typeof error === "object" && "response" in error) {
+    const err = error as AxiosErrorResponse;
+    const errorResponseText = JSON.stringify(err.response);
+    // for some reason, error.response is not included in stringify result (eg. for 400 errors on invite redemptions)
+    if (!R.empty(errorResponseText) && !fullError.includes(errorResponseText)) {
+      // add error.response stuff
+      if (
+        err.response?.config &&
+        err.config &&
+        R.equals(err.config, err.response.config)
+      ) {
+        // but exclude "config" because it's already in there
+        const newErrorResponseText = JSON.stringify(
+          R.omit(["config"] as never[], err.response),
+        );
+        fullError +=
+          " - .response w/o same config JSON: " + newErrorResponseText;
+      } else {
+        fullError += " - .response JSON: " + errorResponseText;
+      }
     }
   }
   return fullError;
@@ -636,7 +655,7 @@ export async function getNewOffersToUserProjects(
  * @param lastClaimId supplied when editing a previous claim
  */
 export function hydrateGive(
-  vcClaimOrig?: GiveVerifiableCredential,
+  vcClaimOrig?: GiveActionClaim,
   fromDid?: string,
   toDid?: string,
   description?: string,
@@ -648,10 +667,8 @@ export function hydrateGive(
   imageUrl?: string,
   providerPlanHandleId?: string,
   lastClaimId?: string,
-): GiveVerifiableCredential {
-  // Remember: replace values or erase if it's null
-
-  const vcClaim: GiveVerifiableCredential = vcClaimOrig
+): GiveActionClaim {
+  const vcClaim: GiveActionClaim = vcClaimOrig
     ? R.clone(vcClaimOrig)
     : {
         "@context": SCHEMA_ORG_CONTEXT,
@@ -659,55 +676,71 @@ export function hydrateGive(
       };
 
   if (lastClaimId) {
-    // this is an edit
     vcClaim.lastClaimId = lastClaimId;
     delete vcClaim.identifier;
   }
 
-  vcClaim.agent = fromDid ? { identifier: fromDid } : undefined;
-  vcClaim.recipient = toDid ? { identifier: toDid } : undefined;
+  if (fromDid) {
+    vcClaim.agent = { identifier: fromDid };
+  }
+  if (toDid) {
+    vcClaim.recipient = { identifier: toDid };
+  }
   vcClaim.description = description || undefined;
-  vcClaim.object =
-    amount && !isNaN(amount)
-      ? { amountOfThisGood: amount, unitCode: unitCode || "HUR" }
-      : undefined;
 
-  // ensure fulfills is an array
+  if (amount && !isNaN(amount)) {
+    const quantitativeValue: QuantitativeValue = {
+      amountOfThisGood: amount,
+      unitCode: unitCode || "HUR",
+    };
+    vcClaim.object = quantitativeValue;
+  }
+
+  // Initialize fulfills array if not present
   if (!Array.isArray(vcClaim.fulfills)) {
     vcClaim.fulfills = vcClaim.fulfills ? [vcClaim.fulfills] : [];
   }
-  // ... and replace or add each element, ending with Trade or Donate
-  // I realize the following doesn't change any elements that are not PlanAction or Offer or Trade/Action.
+
+  // Filter and add fulfills elements
   vcClaim.fulfills = vcClaim.fulfills.filter(
-    (elem) => elem["@type"] !== "PlanAction",
+    (elem: { "@type": string }) => elem["@type"] !== "PlanAction",
   );
+
   if (fulfillsProjectHandleId) {
     vcClaim.fulfills.push({
       "@type": "PlanAction",
       identifier: fulfillsProjectHandleId,
     });
   }
+
   vcClaim.fulfills = vcClaim.fulfills.filter(
-    (elem) => elem["@type"] !== "Offer",
+    (elem: { "@type": string }) => elem["@type"] !== "Offer",
   );
+
   if (fulfillsOfferHandleId) {
     vcClaim.fulfills.push({
       "@type": "Offer",
       identifier: fulfillsOfferHandleId,
     });
   }
-  // do Trade/Donate last because current endorser.ch only looks at the first for plans & offers
+
   vcClaim.fulfills = vcClaim.fulfills.filter(
-    (elem) =>
+    (elem: { "@type": string }) =>
       elem["@type"] !== "DonateAction" && elem["@type"] !== "TradeAction",
   );
-  vcClaim.fulfills.push({ "@type": isTrade ? "TradeAction" : "DonateAction" });
+
+  vcClaim.fulfills.push({
+    "@type": isTrade ? "TradeAction" : "DonateAction",
+  });
 
   vcClaim.image = imageUrl || undefined;
 
-  vcClaim.provider = providerPlanHandleId
-    ? { "@type": "PlanAction", identifier: providerPlanHandleId }
-    : undefined;
+  if (providerPlanHandleId) {
+    vcClaim.provider = {
+      "@type": "PlanAction",
+      identifier: providerPlanHandleId,
+    };
+  }
 
   return vcClaim;
 }
@@ -731,7 +764,7 @@ export async function createAndSubmitGive(
   unitCode?: string,
   fulfillsProjectHandleId?: string,
   fulfillsOfferHandleId?: string,
-  isTrade: boolean = false,
+  isTrade: boolean = false, // remove, because this app is all for gifting
   imageUrl?: string,
   providerPlanHandleId?: string,
 ): Promise<CreateAndSubmitClaimResult> {
@@ -768,7 +801,7 @@ export async function createAndSubmitGive(
 export async function editAndSubmitGive(
   axios: Axios,
   apiServer: string,
-  fullClaim: GenericCredWrapper<GiveVerifiableCredential>,
+  fullClaim: GenericCredWrapper<GiveActionClaim>,
   issuerDid: string,
   fromDid?: string,
   toDid?: string,
@@ -809,7 +842,7 @@ export async function editAndSubmitGive(
  * @param lastClaimId supplied when editing a previous claim
  */
 export function hydrateOffer(
-  vcClaimOrig?: OfferVerifiableCredential,
+  vcClaimOrig?: OfferClaim,
   fromDid?: string,
   toDid?: string,
   itemDescription?: string,
@@ -819,10 +852,8 @@ export function hydrateOffer(
   fulfillsProjectHandleId?: string,
   validThrough?: string,
   lastClaimId?: string,
-): OfferVerifiableCredential {
-  // Remember: replace values or erase if it's null
-
-  const vcClaim: OfferVerifiableCredential = vcClaimOrig
+): OfferClaim {
+  const vcClaim: OfferClaim = vcClaimOrig
     ? R.clone(vcClaimOrig)
     : {
         "@context": SCHEMA_ORG_CONTEXT,
@@ -835,14 +866,20 @@ export function hydrateOffer(
     delete vcClaim.identifier;
   }
 
-  vcClaim.offeredBy = fromDid ? { identifier: fromDid } : undefined;
-  vcClaim.recipient = toDid ? { identifier: toDid } : undefined;
+  if (fromDid) {
+    vcClaim.offeredBy = { identifier: fromDid };
+  }
+  if (toDid) {
+    vcClaim.recipient = { identifier: toDid };
+  }
   vcClaim.description = conditionDescription || undefined;
 
-  vcClaim.includesObject =
-    amount && !isNaN(amount)
-      ? { amountOfThisGood: amount, unitCode: unitCode || "HUR" }
-      : undefined;
+  if (amount && !isNaN(amount)) {
+    vcClaim.includesObject = {
+      amountOfThisGood: amount,
+      unitCode: unitCode || "HUR",
+    };
+  }
 
   if (itemDescription || fulfillsProjectHandleId) {
     vcClaim.itemOffered = vcClaim.itemOffered || {};
@@ -854,6 +891,7 @@ export function hydrateOffer(
       };
     }
   }
+
   vcClaim.validThrough = validThrough || undefined;
 
   return vcClaim;
@@ -893,7 +931,7 @@ export async function createAndSubmitOffer(
     undefined,
   );
   return createAndSubmitClaim(
-    vcClaim as OfferVerifiableCredential,
+    vcClaim as OfferClaim,
     issuerDid,
     apiServer,
     axios,
@@ -903,7 +941,7 @@ export async function createAndSubmitOffer(
 export async function editAndSubmitOffer(
   axios: Axios,
   apiServer: string,
-  fullClaim: GenericCredWrapper<OfferVerifiableCredential>,
+  fullClaim: GenericCredWrapper<OfferClaim>,
   issuerDid: string,
   itemDescription: string,
   amount?: number,
@@ -926,7 +964,7 @@ export async function editAndSubmitOffer(
     fullClaim.id,
   );
   return createAndSubmitClaim(
-    vcClaim as OfferVerifiableCredential,
+    vcClaim as OfferClaim,
     issuerDid,
     apiServer,
     axios,
@@ -982,26 +1020,25 @@ export async function createAndSubmitClaim(
       },
     });
 
-    return { type: "success", response };
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  } catch (error: any) {
+    return { success: true, handleId: response.data?.handleId };
+  } catch (error: unknown) {
     logger.error("Error submitting claim:", error);
     const errorMessage: string =
       serverMessageForUser(error) ||
-      error.message ||
+      (error && typeof error === "object" && "message" in error
+        ? String(error.message)
+        : undefined) ||
       "Got some error submitting the claim. Check your permissions, network, and error logs.";
 
     return {
-      type: "error",
-      error: {
-        error: errorMessage,
-      },
+      success: false,
+      error: errorMessage,
     };
   }
 }
 
 export async function generateEndorserJwtUrlForAccount(
-  account: KeyMeta,
+  account: KeyMetaMaybeWithPrivate,
   isRegistered: boolean,
   givenName: string,
   profileImageUrl: string,
@@ -1025,12 +1062,9 @@ export async function generateEndorserJwtUrlForAccount(
   }
 
   // Add the next key -- not recommended for the QR code for such a high resolution
-  if (isContact && account?.mnemonic && account?.derivationPath) {
-    const newDerivPath = nextDerivationPath(account.derivationPath as string);
-    const nextPublicHex = deriveAddress(
-      account.mnemonic as string,
-      newDerivPath,
-    )[2];
+  if (isContact && account.derivationPath && account.mnemonic) {
+    const newDerivPath = nextDerivationPath(account.derivationPath);
+    const nextPublicHex = deriveAddress(account.mnemonic, newDerivPath)[2];
     const nextPublicEncKey = Buffer.from(nextPublicHex, "hex");
     const nextPublicEncKeyHash = sha256(nextPublicEncKey);
     const nextPublicEncKeyHashBase64 =
@@ -1050,7 +1084,11 @@ export async function createEndorserJwtForDid(
   expiresIn?: number,
 ) {
   const account = await retrieveFullyDecryptedAccount(issuerDid);
-  return createEndorserJwtForKey(account as KeyMeta, payload, expiresIn);
+  return createEndorserJwtForKey(
+    account as KeyMetaWithPrivate,
+    payload,
+    expiresIn,
+  );
 }
 
 /**
@@ -1098,21 +1136,21 @@ export const capitalizeAndInsertSpacesBeforeCaps = (text: string) => {
 
  similar code is also contained in endorser-mobile
  **/
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const claimSummary = (
-  claim: GenericCredWrapper<GenericVerifiableCredential>,
+  claim:
+    | GenericVerifiableCredential
+    | GenericCredWrapper<GenericVerifiableCredential>,
 ) => {
   if (!claim) {
-    // to differentiate from "something" above
     return "something";
   }
-  let specificClaim:
-    | GenericVerifiableCredential
-    | GenericCredWrapper<GenericVerifiableCredential> = claim;
-  if (claim.claim) {
-    // probably a Verified Credential
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    specificClaim = claim.claim;
+  let specificClaim: GenericVerifiableCredential;
+  if ("claim" in claim) {
+    // It's a GenericCredWrapper
+    specificClaim = claim.claim as GenericVerifiableCredential;
+  } else {
+    // It's already a GenericVerifiableCredential
+    specificClaim = claim;
   }
   if (Array.isArray(specificClaim)) {
     if (specificClaim.length === 1) {
@@ -1147,88 +1185,112 @@ export const claimSpecialDescription = (
   identifiers: Array<string>,
   contacts: Array<Contact>,
 ) => {
-  let claim = record.claim;
-  if (claim.claim) {
-    // it's probably a Verified Credential
-    claim = claim.claim;
+  let claim:
+    | GenericVerifiableCredential
+    | GenericCredWrapper<GenericVerifiableCredential> = record.claim;
+  if ("claim" in claim) {
+    // it's a nested GenericCredWrapper
+    claim = claim.claim as GenericVerifiableCredential;
   }
 
   const issuer = didInfo(record.issuer, activeDid, identifiers, contacts);
   const type = claim["@type"] || "UnknownType";
 
   if (type === "AgreeAction") {
-    return issuer + " agreed with " + claimSummary(claim.object);
+    return (
+      issuer +
+      " agreed with " +
+      claimSummary(claim.object as GenericVerifiableCredential)
+    );
   } else if (isAccept(claim)) {
-    return issuer + " accepted " + claimSummary(claim.object);
+    return (
+      issuer +
+      " accepted " +
+      claimSummary(claim.object as GenericVerifiableCredential)
+    );
   } else if (type === "GiveAction") {
-    // agent.did is for legacy data, before March 2023
-    const giver = claim.agent?.identifier || claim.agent?.did;
+    const giveClaim = claim as GiveActionClaim;
+    // @ts-expect-error because .did may be found in legacy data, before March 2023
+    const legacyGiverDid = giveClaim.agent?.did;
+    const giver = giveClaim.agent?.identifier || legacyGiverDid;
     const giverInfo = didInfo(giver, activeDid, identifiers, contacts);
-    let gaveAmount = claim.object?.amountOfThisGood
-      ? displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
+    let gaveAmount = giveClaim.object?.amountOfThisGood
+      ? displayAmount(
+          giveClaim.object.unitCode as string,
+          giveClaim.object.amountOfThisGood as number,
+        )
       : "";
-    if (claim.description) {
+    if (giveClaim.description) {
       if (gaveAmount) {
         gaveAmount = gaveAmount + ", and also: ";
       }
-      gaveAmount = gaveAmount + claim.description;
+      gaveAmount = gaveAmount + giveClaim.description;
     }
     if (!gaveAmount) {
       gaveAmount = "something not described";
     }
-    // recipient.did is for legacy data, before March 2023
-    const gaveRecipientId = claim.recipient?.identifier || claim.recipient?.did;
+    // @ts-expect-error because .did may be found in legacy data, before March 2023
+    const legacyRecipDid = giveClaim.recipient?.did;
+    const gaveRecipientId = giveClaim.recipient?.identifier || legacyRecipDid;
     const gaveRecipientInfo = gaveRecipientId
       ? " to " + didInfo(gaveRecipientId, activeDid, identifiers, contacts)
       : "";
     return giverInfo + " gave" + gaveRecipientInfo + ": " + gaveAmount;
   } else if (type === "JoinAction") {
-    // agent.did is for legacy data, before March 2023
-    const agent = claim.agent?.identifier || claim.agent?.did;
+    const joinClaim = claim as JoinActionClaim;
+    // @ts-expect-error because .did may be found in legacy data, before March 2023
+    const legacyDid = joinClaim.agent?.did;
+    const agent = joinClaim.agent?.identifier || legacyDid;
     const contactInfo = didInfo(agent, activeDid, identifiers, contacts);
 
     let eventOrganizer =
-      claim.event && claim.event.organizer && claim.event.organizer.name;
+      joinClaim.event &&
+      joinClaim.event.organizer &&
+      joinClaim.event.organizer.name;
     eventOrganizer = eventOrganizer || "";
-    let eventName = claim.event && claim.event.name;
+    let eventName = joinClaim.event && joinClaim.event.name;
     eventName = eventName ? " " + eventName : "";
     let fullEvent = eventOrganizer + eventName;
     fullEvent = fullEvent ? " attended the " + fullEvent : "";
 
-    let eventDate = claim.event && claim.event.startTime;
+    let eventDate = joinClaim.event && joinClaim.event.startTime;
     eventDate = eventDate ? " at " + eventDate : "";
     return contactInfo + fullEvent + eventDate;
   } else if (isOffer(claim)) {
-    const offerer = claim.offeredBy?.identifier;
+    const offerClaim = claim as OfferClaim;
+    const offerer = offerClaim.offeredBy?.identifier;
     const contactInfo = didInfo(offerer, activeDid, identifiers, contacts);
     let offering = "";
-    if (claim.includesObject) {
+    if (offerClaim.includesObject) {
       offering +=
         " " +
         displayAmount(
-          claim.includesObject.unitCode,
-          claim.includesObject.amountOfThisGood,
+          offerClaim.includesObject.unitCode,
+          offerClaim.includesObject.amountOfThisGood,
         );
     }
-    if (claim.itemOffered?.description) {
-      offering += ", saying: " + claim.itemOffered?.description;
+    if (offerClaim.itemOffered?.description) {
+      offering += ", saying: " + offerClaim.itemOffered?.description;
     }
-    // recipient.did is for legacy data, before March 2023
-    const offerRecipientId =
-      claim.recipient?.identifier || claim.recipient?.did;
+    // @ts-expect-error because .did may be found in legacy data, before March 2023
+    const legacyDid = offerClaim.recipient?.did;
+    const offerRecipientId = offerClaim.recipient?.identifier || legacyDid;
     const offerRecipientInfo = offerRecipientId
       ? " to " + didInfo(offerRecipientId, activeDid, identifiers, contacts)
       : "";
     return contactInfo + " offered" + offering + offerRecipientInfo;
   } else if (type === "PlanAction") {
-    const claimer = claim.agent?.identifier || record.issuer;
+    const planClaim = claim as PlanActionClaim;
+    const claimer = planClaim.agent?.identifier || record.issuer;
     const claimerInfo = didInfo(claimer, activeDid, identifiers, contacts);
-    return claimerInfo + " announced a project: " + claim.name;
+    return claimerInfo + " announced a project: " + planClaim.name;
   } else if (type === "Tenure") {
-    // party.did is for legacy data, before March 2023
-    const claimer = claim.party?.identifier || claim.party?.did;
+    const tenureClaim = claim as TenureClaim;
+    // @ts-expect-error because .did may be found in legacy data, before March 2023
+    const legacyDid = tenureClaim.party?.did;
+    const claimer = tenureClaim.party?.identifier || legacyDid;
     const contactInfo = didInfo(claimer, activeDid, identifiers, contacts);
-    const polygon = claim.spatialUnit?.geo?.polygon || "";
+    const polygon = tenureClaim.spatialUnit?.geo?.polygon || "";
     return (
       contactInfo +
       " possesses [" +
@@ -1236,11 +1298,7 @@ export const claimSpecialDescription = (
       "...]"
     );
   } else {
-    return (
-      issuer +
-      " declared " +
-      claimSummary(claim as GenericCredWrapper<GenericVerifiableCredential>)
-    );
+    return issuer + " declared " + claimSummary(claim);
   }
 };
 
@@ -1280,32 +1338,42 @@ export async function createEndorserJwtVcFromClaim(
   return createEndorserJwtForDid(issuerDid, vcPayload);
 }
 
+/**
+ * Create a JWT for a RegisterAction claim.
+ *
+ * @param activeDid - The DID of the user creating the invite
+ * @param contact - The contact to register, with a 'did' field (all optional for invites)
+ * @param identifier - The identifier for the invite, usually random
+ * @param expiresIn - The number of seconds until the invite expires
+ * @returns The JWT for the RegisterAction claim
+ */
 export async function createInviteJwt(
   activeDid: string,
   contact?: Contact,
-  inviteId?: string,
-  expiresIn?: number,
+  identifier?: string,
+  expiresIn?: number, // in seconds
 ): Promise<string> {
-  const vcClaim: RegisterVerifiableCredential = {
+  const vcClaim: RegisterActionClaim = {
     "@context": SCHEMA_ORG_CONTEXT,
     "@type": "RegisterAction",
     agent: { identifier: activeDid },
     object: SERVICE_ID,
+    identifier: identifier,
   };
-  if (contact) {
+  if (contact?.did) {
     vcClaim.participant = { identifier: contact.did };
   }
-  if (inviteId) {
-    vcClaim.identifier = inviteId;
-  }
+
   // Make a payload for the claim
-  const vcPayload = {
+  const vcPayload: { vc: VerifiableCredentialClaim } = {
     vc: {
       "@context": ["https://www.w3.org/2018/credentials/v1"],
+      "@type": "VerifiableCredential",
       type: ["VerifiableCredential"],
-      credentialSubject: vcClaim,
+      credentialSubject: vcClaim as unknown as ClaimObject, // Type assertion needed due to object being string
     },
   };
+
   // Create a signature using private key of identity
   const vcJwt = await createEndorserJwtForDid(activeDid, vcPayload, expiresIn);
   return vcJwt;
@@ -1317,21 +1385,44 @@ export async function register(
   axios: Axios,
   contact: Contact,
 ): Promise<{ success?: boolean; error?: string }> {
-  const vcJwt = await createInviteJwt(activeDid, contact);
+  try {
+    const vcJwt = await createInviteJwt(activeDid, contact);
+    const url = apiServer + "/api/v2/claim";
+    const resp = await axios.post<{
+      success?: {
+        handleId?: string;
+        embeddedRecordError?: string;
+      };
+      error?: string;
+      message?: string;
+    }>(url, { jwtEncoded: vcJwt });
 
-  const url = apiServer + "/api/v2/claim";
-  const resp = await axios.post(url, { jwtEncoded: vcJwt });
-  if (resp.data?.success?.handleId) {
-    return { success: true };
-  } else if (resp.data?.success?.embeddedRecordError) {
-    let message =
-      "There was some problem with the registration and so it may not be complete.";
-    if (typeof resp.data.success.embeddedRecordError == "string") {
-      message += " " + resp.data.success.embeddedRecordError;
+    if (resp.data?.success?.handleId) {
+      return { success: true };
+    } else if (resp.data?.success?.embeddedRecordError) {
+      let message =
+        "There was some problem with the registration and so it may not be complete.";
+      if (typeof resp.data.success.embeddedRecordError === "string") {
+        message += " " + resp.data.success.embeddedRecordError;
+      }
+      return { error: message };
+    } else {
+      logger.error("Registration error:", JSON.stringify(resp.data));
+      return { error: "Got a server error when registering." };
+    }
+  } catch (error: unknown) {
+    if (error && typeof error === "object") {
+      const err = error as AxiosErrorResponse;
+      const errorMessage =
+        err.message ||
+        (err.response?.data &&
+        typeof err.response.data === "object" &&
+        "message" in err.response.data
+          ? (err.response.data as { message: string }).message
+          : undefined);
+      logger.error("Registration error:", errorMessage || JSON.stringify(err));
+      return { error: errorMessage || "Got a server error when registering." };
     }
-    return { error: message };
-  } else {
-    logger.error(resp);
     return { error: "Got a server error when registering." };
   }
 }
@@ -1357,7 +1448,14 @@ export async function setVisibilityUtil(
     if (resp.status === 200) {
       const success = resp.data.success;
       if (success) {
-        db.contacts.update(contact.did, { seesMe: visibility });
+        const platformService = PlatformServiceFactory.getInstance();
+        await platformService.dbExec(
+          "UPDATE contacts SET seesMe = ? WHERE did = ?",
+          [visibility, contact.did],
+        );
+        if (USE_DEXIE_DB) {
+          db.contacts.update(contact.did, { seesMe: visibility });
+        }
       }
       return { success };
     } else {

src/libs/fontawesome.ts

@@ -17,6 +17,7 @@ import {
   faBurst,
   faCalendar,
   faCamera,
+  faCameraRotate,
   faCaretDown,
   faChair,
   faCheck,
@@ -54,6 +55,7 @@ import {
   faHandHoldingDollar,
   faHandHoldingHeart,
   faHouseChimney,
+  faImage,
   faImagePortrait,
   faLeftRight,
   faLightbulb,
@@ -99,6 +101,7 @@ library.add(
   faBurst,
   faCalendar,
   faCamera,
+  faCameraRotate,
   faCaretDown,
   faChair,
   faCheck,
@@ -136,6 +139,7 @@ library.add(
   faHandHoldingDollar,
   faHandHoldingHeart,
   faHouseChimney,
+  faImage,
   faImagePortrait,
   faLeftRight,
   faLightbulb,

src/libs/util.ts

@@ -5,29 +5,46 @@ import { Buffer } from "buffer";
 import * as R from "ramda";
 import { useClipboard } from "@vueuse/core";
 
-import { DEFAULT_PUSH_SERVER, NotificationIface } from "../constants/app";
+import {
+  DEFAULT_PUSH_SERVER,
+  NotificationIface,
+  USE_DEXIE_DB,
+} from "../constants/app";
 import {
   accountsDBPromise,
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
   updateDefaultSettings,
 } from "../db/index";
-import { Account } from "../db/tables/accounts";
+import { Account, AccountEncrypted } from "../db/tables/accounts";
 import { Contact } from "../db/tables/contacts";
+import * as databaseUtil from "../db/databaseUtil";
 import { DEFAULT_PASSKEY_EXPIRATION_MINUTES } from "../db/tables/settings";
-import { deriveAddress, generateSeed, newIdentifier } from "../libs/crypto";
-import * as serverUtil from "../libs/endorserServer";
 import {
-  containsHiddenDid,
+  arrayBufferToBase64,
+  base64ToArrayBuffer,
+  deriveAddress,
+  generateSeed,
+  newIdentifier,
+  simpleDecrypt,
+  simpleEncrypt,
+} from "../libs/crypto";
+import * as serverUtil from "../libs/endorserServer";
+import { containsHiddenDid } from "../libs/endorserServer";
+import {
   GenericCredWrapper,
   GenericVerifiableCredential,
-  GiveSummaryRecord,
-  OfferVerifiableCredential,
-} from "../libs/endorserServer";
-import { KeyMeta } from "../libs/crypto/vc";
+  KeyMetaWithPrivate,
+} from "../interfaces/common";
+import { GiveSummaryRecord } from "../interfaces/records";
+import { OfferClaim } from "../interfaces/claims";
 import { createPeerDid } from "../libs/crypto/vc/didPeer";
 import { registerCredential } from "../libs/crypto/vc/passkeyDidPeer";
 import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
+import { sha256 } from "ethereum-cryptography/sha256";
+import { IIdentifier } from "@veramo/core";
+import { insertDidSpecificSettings, parseJsonField } from "../db/databaseUtil";
 
 export interface GiverReceiverInputInfo {
   did?: string;
@@ -66,18 +83,24 @@ export const UNIT_LONG: Record<string, string> = {
 };
 /* eslint-enable prettier/prettier */
 
-const UNIT_CODES: Record<string, Record<string, string>> = {
+const UNIT_CODES: Record<
+  string,
+  { name: string; faIcon: string; decimals: number }
+> = {
   BTC: {
     name: "Bitcoin",
     faIcon: "bitcoin-sign",
+    decimals: 4,
   },
   HUR: {
     name: "hours",
     faIcon: "clock",
+    decimals: 0,
   },
   USD: {
     name: "US Dollars",
     faIcon: "dollar",
+    decimals: 2,
   },
 };
 
@@ -85,6 +108,13 @@ export function iconForUnitCode(unitCode: string) {
   return UNIT_CODES[unitCode]?.faIcon || "question";
 }
 
+export function formattedAmount(amount: number, unitCode: string) {
+  const unit = UNIT_CODES[unitCode];
+  const amountStr = amount.toFixed(unit?.decimals ?? 4);
+  const unitName = unit?.name || "?";
+  return amountStr + " " + unitName;
+}
+
 // from https://stackoverflow.com/a/175787/845494
 // ... though it appears even this isn't precisely right so keep doing "|| 0" or something in sensitive places
 //
@@ -364,16 +394,19 @@ export function base64ToBlob(base64DataUrl: string, sliceSize = 512) {
  * @param veriClaim is expected to have fields: claim and issuer
  */
 export function offerGiverDid(
-  veriClaim: GenericCredWrapper<OfferVerifiableCredential>,
+  veriClaim: GenericCredWrapper<OfferClaim>,
 ): string | undefined {
-  let giver;
-  if (
-    veriClaim.claim.offeredBy?.identifier &&
-    !serverUtil.isHiddenDid(veriClaim.claim.offeredBy.identifier as string)
-  ) {
-    giver = veriClaim.claim.offeredBy.identifier;
-  } else if (veriClaim.issuer && !serverUtil.isHiddenDid(veriClaim.issuer)) {
-    giver = veriClaim.issuer;
+  const innerClaim = veriClaim.claim as OfferClaim;
+  let giver: string | undefined = undefined;
+
+  giver = innerClaim.offeredBy?.identifier;
+  if (giver && !serverUtil.isHiddenDid(giver)) {
+    return giver;
+  }
+
+  giver = veriClaim.issuer;
+  if (giver && !serverUtil.isHiddenDid(giver)) {
+    return giver;
   }
   return giver;
 }
@@ -384,10 +417,12 @@ export function offerGiverDid(
  */
 export const canFulfillOffer = (
   veriClaim: GenericCredWrapper<GenericVerifiableCredential>,
+  isRegistered: boolean,
 ) => {
   return (
+    isRegistered &&
     veriClaim.claimType === "Offer" &&
-    !!offerGiverDid(veriClaim as GenericCredWrapper<OfferVerifiableCredential>)
+    !!offerGiverDid(veriClaim as GenericCredWrapper<OfferClaim>)
   );
 };
 
@@ -457,74 +492,236 @@ export function findAllVisibleToDids(
  *
  **/
 
-export interface AccountKeyInfo extends Account, KeyMeta {}
+export type AccountKeyInfo = Account & KeyMetaWithPrivate;
 
 export const retrieveAccountCount = async (): Promise<number> => {
-  // one of the few times we use accountsDBPromise directly; try to avoid more usage
-  const accountsDB = await accountsDBPromise;
-  return await accountsDB.accounts.count();
+  let result = 0;
+  const platformService = PlatformServiceFactory.getInstance();
+  const dbResult = await platformService.dbQuery(
+    `SELECT COUNT(*) FROM accounts`,
+  );
+  if (dbResult?.values?.[0]?.[0]) {
+    result = dbResult.values[0][0] as number;
+  }
+
+  if (USE_DEXIE_DB) {
+    // one of the few times we use accountsDBPromise directly; try to avoid more usage
+    const accountsDB = await accountsDBPromise;
+    result = await accountsDB.accounts.count();
+  }
+  return result;
 };
 
 export const retrieveAccountDids = async (): Promise<string[]> => {
-  // one of the few times we use accountsDBPromise directly; try to avoid more usage
-  const accountsDB = await accountsDBPromise;
-  const allAccounts = await accountsDB.accounts.toArray();
-  const allDids = allAccounts.map((acc) => acc.did);
+  const platformService = PlatformServiceFactory.getInstance();
+  const dbAccounts = await platformService.dbQuery(`SELECT did FROM accounts`);
+  let allDids =
+    databaseUtil
+      .mapQueryResultToValues(dbAccounts)
+      ?.map((row) => row[0] as string) || [];
+  if (USE_DEXIE_DB) {
+    // this is the old way
+    // one of the few times we use accountsDBPromise directly; try to avoid more usage
+    const accountsDB = await accountsDBPromise;
+    const allAccounts = await accountsDB.accounts.toArray();
+    allDids = allAccounts.map((acc) => acc.did);
+  }
   return allDids;
 };
 
-// This is provided and recommended when the full key is not necessary so that
-// future work could separate this info from the sensitive key material.
+/**
+ * This is provided and recommended when the full key is not necessary so that
+ * future work could separate this info from the sensitive key material.
+ *
+ * If you need the private key data, use retrieveFullyDecryptedAccount instead.
+ */
 export const retrieveAccountMetadata = async (
   activeDid: string,
-): Promise<AccountKeyInfo | undefined> => {
-  // one of the few times we use accountsDBPromise directly; try to avoid more usage
-  const accountsDB = await accountsDBPromise;
-  const account = (await accountsDB.accounts
-    .where("did")
-    .equals(activeDid)
-    .first()) as Account;
+): Promise<Account | undefined> => {
+  let result: Account | undefined = undefined;
+  const platformService = PlatformServiceFactory.getInstance();
+  const dbAccount = await platformService.dbQuery(
+    `SELECT * FROM accounts WHERE did = ?`,
+    [activeDid],
+  );
+  const account = databaseUtil.mapQueryResultToValues(dbAccount)[0] as Account;
   if (account) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const { identity, mnemonic, ...metadata } = account;
-    return metadata;
+    result = metadata;
   } else {
-    return undefined;
+    result = undefined;
   }
+  if (USE_DEXIE_DB) {
+    // one of the few times we use accountsDBPromise directly; try to avoid more usage
+    const accountsDB = await accountsDBPromise;
+    const account = (await accountsDB.accounts
+      .where("did")
+      .equals(activeDid)
+      .first()) as Account;
+    if (account) {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { identity, mnemonic, ...metadata } = account;
+      result = metadata;
+    } else {
+      result = undefined;
+    }
+  }
+  return result;
 };
 
-export const retrieveAllAccountsMetadata = async (): Promise<Account[]> => {
-  // one of the few times we use accountsDBPromise directly; try to avoid more usage
-  const accountsDB = await accountsDBPromise;
-  const array = await accountsDB.accounts.toArray();
-  return array.map((account) => {
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { identity, mnemonic, ...metadata } = account;
-    return metadata;
-  });
-};
-
+/**
+ * This contains sensitive data. If possible, use retrieveAccountMetadata instead.
+ *
+ * @param activeDid
+ * @returns account info with private key data decrypted
+ */
 export const retrieveFullyDecryptedAccount = async (
   activeDid: string,
-): Promise<AccountKeyInfo | undefined> => {
-  // one of the few times we use accountsDBPromise directly; try to avoid more usage
-  const accountsDB = await accountsDBPromise;
-  const account = (await accountsDB.accounts
-    .where("did")
-    .equals(activeDid)
-    .first()) as Account;
-  return account;
+): Promise<Account | undefined> => {
+  let result: Account | undefined = undefined;
+  const platformService = PlatformServiceFactory.getInstance();
+  const dbSecrets = await platformService.dbQuery(
+    `SELECT secretBase64 from secret`,
+  );
+  if (
+    !dbSecrets ||
+    dbSecrets.values.length === 0 ||
+    dbSecrets.values[0].length === 0
+  ) {
+    throw new Error(
+      "No secret found. We recommend you clear your data and start over.",
+    );
+  }
+  const secretBase64 = dbSecrets.values[0][0] as string;
+  const secret = base64ToArrayBuffer(secretBase64);
+  const dbAccount = await platformService.dbQuery(
+    `SELECT * FROM accounts WHERE did = ?`,
+    [activeDid],
+  );
+  if (
+    !dbAccount ||
+    dbAccount.values.length === 0 ||
+    dbAccount.values[0].length === 0
+  ) {
+    throw new Error("Account not found.");
+  }
+  const fullAccountData = databaseUtil.mapQueryResultToValues(
+    dbAccount,
+  )[0] as AccountEncrypted;
+  const identityEncr = base64ToArrayBuffer(fullAccountData.identityEncrBase64);
+  const mnemonicEncr = base64ToArrayBuffer(fullAccountData.mnemonicEncrBase64);
+  fullAccountData.identity = await simpleDecrypt(identityEncr, secret);
+  fullAccountData.mnemonic = await simpleDecrypt(mnemonicEncr, secret);
+  result = fullAccountData;
+
+  if (USE_DEXIE_DB) {
+    // one of the few times we use accountsDBPromise directly; try to avoid more usage
+    const accountsDB = await accountsDBPromise;
+    const account = (await accountsDB.accounts
+      .where("did")
+      .equals(activeDid)
+      .first()) as Account;
+    result = account;
+  }
+  return result;
 };
 
-// let's try and eliminate this
-export const retrieveAllFullyDecryptedAccounts = async (): Promise<
-  Array<AccountKeyInfo>
+export const retrieveAllAccountsMetadata = async (): Promise<
+  AccountEncrypted[]
 > => {
-  const accountsDB = await accountsDBPromise;
-  const allAccounts = await accountsDB.accounts.toArray();
-  return allAccounts;
+  const platformService = PlatformServiceFactory.getInstance();
+  const dbAccounts = await platformService.dbQuery(`SELECT * FROM accounts`);
+  const accounts = databaseUtil.mapQueryResultToValues(dbAccounts) as Account[];
+  let result = accounts.map((account) => {
+    return account as AccountEncrypted;
+  });
+  if (USE_DEXIE_DB) {
+    // one of the few times we use accountsDBPromise directly; try to avoid more usage
+    const accountsDB = await accountsDBPromise;
+    const array = await accountsDB.accounts.toArray();
+    result = array.map((account) => {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      const { identity, mnemonic, ...metadata } = account;
+      // This is not accurate because they can't be decrypted, but we're removing Dexie anyway.
+      const identityStr = JSON.stringify(identity);
+      const encryptedAccount = {
+        identityEncrBase64: sha256(
+          new TextEncoder().encode(identityStr),
+        ).toString(),
+        mnemonicEncrBase64: sha256(
+          new TextEncoder().encode(account.mnemonic),
+        ).toString(),
+        ...metadata,
+      };
+      return encryptedAccount as AccountEncrypted;
+    });
+  }
+  return result;
 };
 
+/**
+ * Saves a new identity to both SQL and Dexie databases
+ */
+export async function saveNewIdentity(
+  identity: IIdentifier,
+  mnemonic: string,
+  derivationPath: string,
+): Promise<void> {
+  try {
+    // add to the new sql db
+    const platformService = PlatformServiceFactory.getInstance();
+    const secrets = await platformService.dbQuery(
+      `SELECT secretBase64 FROM secret`,
+    );
+    if (!secrets?.values?.length || !secrets.values[0]?.length) {
+      throw new Error(
+        "No initial encryption supported. We recommend you clear your data and start over.",
+      );
+    }
+    const secretBase64 = secrets.values[0][0] as string;
+    const secret = base64ToArrayBuffer(secretBase64);
+    const identityStr = JSON.stringify(identity);
+    const encryptedIdentity = await simpleEncrypt(identityStr, secret);
+    const encryptedMnemonic = await simpleEncrypt(mnemonic, secret);
+    const encryptedIdentityBase64 = arrayBufferToBase64(encryptedIdentity);
+    const encryptedMnemonicBase64 = arrayBufferToBase64(encryptedMnemonic);
+    const sql = `INSERT INTO accounts (dateCreated, derivationPath, did, identityEncrBase64, mnemonicEncrBase64, publicKeyHex)
+       VALUES (?, ?, ?, ?, ?, ?)`;
+    const params = [
+      new Date().toISOString(),
+      derivationPath,
+      identity.did,
+      encryptedIdentityBase64,
+      encryptedMnemonicBase64,
+      identity.keys[0].publicKeyHex,
+    ];
+    await platformService.dbExec(sql, params);
+    await databaseUtil.updateDefaultSettings({ activeDid: identity.did });
+    await databaseUtil.insertDidSpecificSettings(identity.did);
+
+    if (USE_DEXIE_DB) {
+      // one of the few times we use accountsDBPromise directly; try to avoid more usage
+      const accountsDB = await accountsDBPromise;
+      await accountsDB.accounts.add({
+        dateCreated: new Date().toISOString(),
+        derivationPath: derivationPath,
+        did: identity.did,
+        identity: identityStr,
+        mnemonic: mnemonic,
+        publicKeyHex: identity.keys[0].publicKeyHex,
+      });
+      await updateDefaultSettings({ activeDid: identity.did });
+      await insertDidSpecificSettings(identity.did);
+    }
+  } catch (error) {
+    logger.error("Failed to update default settings:", error);
+    throw new Error(
+      "Failed to set default settings. Please try again or restart the app.",
+    );
+  }
+}
+
 /**
  * Generates a new identity, saves it to the database, and sets it as the active identity.
  * @return {Promise<string>} with the DID of the new identity
@@ -536,23 +733,14 @@ export const generateSaveAndActivateIdentity = async (): Promise<string> => {
     deriveAddress(mnemonic);
 
   const newId = newIdentifier(address, publicHex, privateHex, derivationPath);
-  const identity = JSON.stringify(newId);
 
-  // one of the few times we use accountsDBPromise directly; try to avoid more usage
-  const accountsDB = await accountsDBPromise;
-  await accountsDB.accounts.add({
-    dateCreated: new Date().toISOString(),
-    derivationPath: derivationPath,
-    did: newId.did,
-    identity: identity,
-    mnemonic: mnemonic,
-    publicKeyHex: newId.keys[0].publicKeyHex,
+  await saveNewIdentity(newId, mnemonic, derivationPath);
+  await databaseUtil.updateDidSpecificSettings(newId.did, {
+    isRegistered: false,
   });
-
-  await updateDefaultSettings({ activeDid: newId.did });
-  //console.log("Updated default settings in util");
-  await updateAccountSettings(newId.did, { isRegistered: false });
-
+  if (USE_DEXIE_DB) {
+    await updateAccountSettings(newId.did, { isRegistered: false });
+  }
   return newId.did;
 };
 
@@ -570,9 +758,19 @@ export const registerAndSavePasskey = async (
     passkeyCredIdHex,
     publicKeyHex: Buffer.from(publicKeyBytes).toString("hex"),
   };
-  // one of the few times we use accountsDBPromise directly; try to avoid more usage
-  const accountsDB = await accountsDBPromise;
-  await accountsDB.accounts.add(account);
+  const insertStatement = databaseUtil.generateInsertStatement(
+    account,
+    "accounts",
+  );
+  await PlatformServiceFactory.getInstance().dbExec(
+    insertStatement.sql,
+    insertStatement.params,
+  );
+  if (USE_DEXIE_DB) {
+    // one of the few times we use accountsDBPromise directly; try to avoid more usage
+    const accountsDB = await accountsDBPromise;
+    await accountsDB.accounts.add(account);
+  }
   return account;
 };
 
@@ -580,13 +778,22 @@ export const registerSaveAndActivatePasskey = async (
   keyName: string,
 ): Promise<Account> => {
   const account = await registerAndSavePasskey(keyName);
-  await updateDefaultSettings({ activeDid: account.did });
-  await updateAccountSettings(account.did, { isRegistered: false });
+  await databaseUtil.updateDefaultSettings({ activeDid: account.did });
+  await databaseUtil.updateDidSpecificSettings(account.did, {
+    isRegistered: false,
+  });
+  if (USE_DEXIE_DB) {
+    await updateDefaultSettings({ activeDid: account.did });
+    await updateAccountSettings(account.did, { isRegistered: false });
+  }
   return account;
 };
 
 export const getPasskeyExpirationSeconds = async (): Promise<number> => {
-  const settings = await retrieveSettingsForActiveAccount();
+  let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+  if (USE_DEXIE_DB) {
+    settings = await retrieveSettingsForActiveAccount();
+  }
   return (
     (settings?.passkeyExpirationMinutes ?? DEFAULT_PASSKEY_EXPIRATION_MINUTES) *
     60
@@ -602,7 +809,10 @@ export const sendTestThroughPushServer = async (
   subscriptionJSON: PushSubscriptionJSON,
   skipFilter: boolean,
 ): Promise<AxiosResponse> => {
-  const settings = await retrieveSettingsForActiveAccount();
+  let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+  if (USE_DEXIE_DB) {
+    settings = await retrieveSettingsForActiveAccount();
+  }
   let pushUrl: string = DEFAULT_PUSH_SERVER as string;
   if (settings?.webPushServer) {
     pushUrl = settings.webPushServer;
@@ -630,3 +840,96 @@ export const sendTestThroughPushServer = async (
   logger.log("Got response from web push server:", response);
   return response;
 };
+
+/**
+ * Converts a Contact object to a CSV line string following the established format.
+ * The format matches CONTACT_CSV_HEADER: "name,did,pubKeyBase64,seesMe,registered,contactMethods"
+ * where contactMethods is stored as a stringified JSON array.
+ *
+ * @param contact - The Contact object to convert
+ * @returns A CSV-formatted string representing the contact
+ * @throws {Error} If the contact object is missing required fields
+ */
+export const contactToCsvLine = (contact: Contact): string => {
+  if (!contact.did) {
+    throw new Error("Contact must have a did field");
+  }
+
+  // Escape fields that might contain commas or quotes
+  const escapeField = (field: string | boolean | undefined): string => {
+    if (field === undefined) return "";
+    const str = String(field);
+    if (str.includes(",") || str.includes('"')) {
+      return `"${str.replace(/"/g, '""')}"`;
+    }
+    return str;
+  };
+
+  // Handle contactMethods array by stringifying it
+  const contactMethodsStr = contact.contactMethods
+    ? escapeField(JSON.stringify(parseJsonField(contact.contactMethods, [])))
+    : "";
+
+  const fields = [
+    escapeField(contact.name),
+    escapeField(contact.did),
+    escapeField(contact.publicKeyBase64),
+    escapeField(contact.seesMe),
+    escapeField(contact.registered),
+    contactMethodsStr,
+  ];
+
+  return fields.join(",");
+};
+
+/**
+ * Interface for the JSON export format of database tables
+ */
+export interface TableExportData {
+  tableName: string;
+  rows: Array<Record<string, unknown>>;
+}
+
+/**
+ * Interface for the complete database export format
+ */
+export interface DatabaseExport {
+  data: {
+    data: Array<TableExportData>;
+  };
+}
+
+/**
+ * Converts an array of contacts to the standardized database export JSON format.
+ * This format is used for data migration and backup purposes.
+ *
+ * @param contacts - Array of Contact objects to convert
+ * @returns DatabaseExport object in the standardized format
+ */
+export const contactsToExportJson = (contacts: Contact[]): DatabaseExport => {
+  // Convert each contact to a plain object and ensure all fields are included
+  const rows = contacts.map((contact) => ({
+    did: contact.did,
+    name: contact.name || null,
+    contactMethods: contact.contactMethods
+      ? JSON.stringify(parseJsonField(contact.contactMethods, []))
+      : null,
+    nextPubKeyHashB64: contact.nextPubKeyHashB64 || null,
+    notes: contact.notes || null,
+    profileImageUrl: contact.profileImageUrl || null,
+    publicKeyBase64: contact.publicKeyBase64 || null,
+    seesMe: contact.seesMe || false,
+    registered: contact.registered || false,
+  }));
+
+  return {
+    data: {
+      data: [
+        {
+          tableName: "contacts",
+          rows,
+        },
+      ],
+    },
+  };
+};

src/main.capacitor.ts

@@ -29,12 +29,12 @@
  */
 
 import { initializeApp } from "./main.common";
-import { App } from "./lib/capacitor/app";
+import { App } from "./libs/capacitor/app";
 import router from "./router";
 import { handleApiError } from "./services/api";
 import { AxiosError } from "axios";
 import { DeepLinkHandler } from "./services/deepLinks";
-import { logConsoleAndDb } from "./db";
+import { logConsoleAndDb } from "./db/databaseUtil";
 import { logger } from "./utils/logger";
 
 logger.log("[Capacitor] Starting initialization");

src/main.common.ts

@@ -6,10 +6,16 @@ import axios from "axios";
 import VueAxios from "vue-axios";
 import Notifications from "notiwind";
 import "./assets/styles/tailwind.css";
-import { FontAwesomeIcon } from "./lib/fontawesome";
+import { FontAwesomeIcon } from "./libs/fontawesome";
 import Camera from "simple-vue-camera";
 import { logger } from "./utils/logger";
 
+const platform = process.env.VITE_PLATFORM;
+const pwa_enabled = process.env.VITE_PWA_ENABLED === "true";
+
+logger.log("Platform", JSON.stringify({ platform }));
+logger.log("PWA enabled", JSON.stringify({ pwa_enabled }));
+
 // Global Error Handler
 function setupGlobalErrorHandler(app: VueApp) {
   logger.log("[App Init] Setting up global error handler");

src/main.electron.ts

@@ -1,4 +1,16 @@
 import { initializeApp } from "./main.common";
+import { logger } from "./utils/logger";
+
+const platform = process.env.VITE_PLATFORM;
+const pwa_enabled = process.env.VITE_PWA_ENABLED === "true";
+
+logger.info("[Electron] Initializing app");
+logger.info("[Electron] Platform:", { platform });
+logger.info("[Electron] PWA enabled:", { pwa_enabled });
+
+if (pwa_enabled) {
+  logger.warn("[Electron] PWA is enabled, but not supported in electron");
+}
 
 const app = initializeApp();
 app.mount("#app");

src/main.ts

@@ -1,217 +0,0 @@
-import { createPinia } from "pinia";
-import { App as VueApp, ComponentPublicInstance, createApp } from "vue";
-import App from "./App.vue";
-import "./registerServiceWorker";
-import router from "./router";
-import axios from "axios";
-import VueAxios from "vue-axios";
-import Notifications from "notiwind";
-import "./assets/styles/tailwind.css";
-
-import { library } from "@fortawesome/fontawesome-svg-core";
-import {
-  faArrowDown,
-  faArrowLeft,
-  faArrowRight,
-  faArrowRotateBackward,
-  faArrowUpRightFromSquare,
-  faArrowUp,
-  faBan,
-  faBitcoinSign,
-  faBurst,
-  faCalendar,
-  faCamera,
-  faCaretDown,
-  faChair,
-  faCheck,
-  faChevronDown,
-  faChevronLeft,
-  faChevronRight,
-  faChevronUp,
-  faCircle,
-  faCircleCheck,
-  faCircleInfo,
-  faCircleQuestion,
-  faCircleRight,
-  faCircleUser,
-  faClock,
-  faCoins,
-  faComment,
-  faCopy,
-  faDollar,
-  faEllipsis,
-  faEllipsisVertical,
-  faEnvelopeOpenText,
-  faEraser,
-  faEye,
-  faEyeSlash,
-  faFileContract,
-  faFileLines,
-  faFilter,
-  faFloppyDisk,
-  faFolderOpen,
-  faForward,
-  faGift,
-  faGlobe,
-  faHammer,
-  faHand,
-  faHandHoldingDollar,
-  faHandHoldingHeart,
-  faHouseChimney,
-  faImage,
-  faImagePortrait,
-  faLeftRight,
-  faLightbulb,
-  faLink,
-  faLocationDot,
-  faLongArrowAltLeft,
-  faLongArrowAltRight,
-  faMagnifyingGlass,
-  faMessage,
-  faMinus,
-  faPen,
-  faPersonCircleCheck,
-  faPersonCircleQuestion,
-  faPlus,
-  faQuestion,
-  faQrcode,
-  faRightFromBracket,
-  faRotate,
-  faShareNodes,
-  faSpinner,
-  faSquare,
-  faSquareCaretDown,
-  faSquareCaretUp,
-  faSquarePlus,
-  faThumbtack,
-  faTrashCan,
-  faTriangleExclamation,
-  faUser,
-  faUsers,
-  faXmark,
-} from "@fortawesome/free-solid-svg-icons";
-
-library.add(
-  faArrowDown,
-  faArrowLeft,
-  faArrowRight,
-  faArrowRotateBackward,
-  faArrowUpRightFromSquare,
-  faArrowUp,
-  faBan,
-  faBitcoinSign,
-  faBurst,
-  faCalendar,
-  faCamera,
-  faCaretDown,
-  faChair,
-  faCheck,
-  faChevronDown,
-  faChevronLeft,
-  faChevronRight,
-  faChevronUp,
-  faCircle,
-  faCircleCheck,
-  faCircleInfo,
-  faCircleQuestion,
-  faCircleRight,
-  faCircleUser,
-  faClock,
-  faCoins,
-  faComment,
-  faCopy,
-  faDollar,
-  faEllipsis,
-  faEllipsisVertical,
-  faEnvelopeOpenText,
-  faEraser,
-  faEye,
-  faEyeSlash,
-  faFileContract,
-  faFileLines,
-  faFilter,
-  faFloppyDisk,
-  faFolderOpen,
-  faForward,
-  faGift,
-  faGlobe,
-  faHammer,
-  faHand,
-  faHandHoldingDollar,
-  faHandHoldingHeart,
-  faHouseChimney,
-  faImage,
-  faImagePortrait,
-  faLeftRight,
-  faLightbulb,
-  faLink,
-  faLocationDot,
-  faLongArrowAltLeft,
-  faLongArrowAltRight,
-  faMagnifyingGlass,
-  faMessage,
-  faMinus,
-  faPen,
-  faPersonCircleCheck,
-  faPersonCircleQuestion,
-  faPlus,
-  faQrcode,
-  faQuestion,
-  faRotate,
-  faRightFromBracket,
-  faShareNodes,
-  faSpinner,
-  faSquare,
-  faSquareCaretDown,
-  faSquareCaretUp,
-  faSquarePlus,
-  faThumbtack,
-  faTrashCan,
-  faTriangleExclamation,
-  faUser,
-  faUsers,
-  faXmark,
-);
-
-import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
-import Camera from "simple-vue-camera";
-import { logger } from "./utils/logger";
-
-// Can trigger this with a 'throw' inside some top-level function, eg. on the HomeView
-function setupGlobalErrorHandler(app: VueApp) {
-  // @ts-expect-error 'cause we cannot see why config is not defined
-  app.config.errorHandler = (
-    err: Error,
-    instance: ComponentPublicInstance | null,
-    info: string,
-  ) => {
-    logger.error(
-      "Ouch! Global Error Handler.",
-      "Error:",
-      err,
-      "- Error toString:",
-      err.toString(),
-      "- Info:",
-      info,
-      "- Instance:",
-      instance,
-    );
-    // Want to show a nice notiwind notification but can't figure out how.
-    alert(
-      (err.message || "Something bad happened") +
-        " - Try reloading or restarting the app.",
-    );
-  };
-}
-
-const app = createApp(App)
-  .component("fa", FontAwesomeIcon)
-  .component("camera", Camera)
-  .use(createPinia())
-  .use(VueAxios, axios)
-  .use(router)
-  .use(Notifications);
-
-setupGlobalErrorHandler(app);
-
-app.mount("#app");

src/main.web.ts

@@ -1,5 +1,37 @@
+import { initBackend } from "absurd-sql/dist/indexeddb-main-thread";
 import { initializeApp } from "./main.common";
-import "./registerServiceWorker"; // Web PWA support
+import { logger } from "./utils/logger";
+
+const platform = process.env.VITE_PLATFORM;
+const pwa_enabled = process.env.VITE_PWA_ENABLED === "true";
+
+logger.info("[Web] PWA enabled", { pwa_enabled });
+logger.info("[Web] Platform", { platform });
+
+// Only import service worker for web builds
+if (platform !== "electron" && pwa_enabled) {
+  import("./registerServiceWorker"); // Web PWA support
+}
 
 const app = initializeApp();
+
+function sqlInit() {
+  // see https://github.com/jlongster/absurd-sql
+  const worker = new Worker(
+    new URL("./registerSQLWorker.js", import.meta.url),
+    {
+      type: "module",
+    },
+  );
+  // This is only required because Safari doesn't support nested
+  // workers. This installs a handler that will proxy creating web
+  // workers through the main thread
+  initBackend(worker);
+}
+if (platform === "web" || platform === "development") {
+  sqlInit();
+} else {
+  logger.info("[Web] SQL not initialized for platform", { platform });
+}
+
 app.mount("#app");

src/registerSQLWorker.js

@@ -0,0 +1,6 @@
+import databaseService from "./services/AbsurdSqlDatabaseService";
+
+async function run() {
+  await databaseService.initialize();
+}
+run();

src/registerServiceWorker.ts

@@ -2,8 +2,18 @@
 
 import { register } from "register-service-worker";
 
-// Only register service worker if explicitly enabled and in production
+// Check if we're in an Electron environment
+const isElectron =
+  process.env.VITE_PLATFORM === "electron" ||
+  process.env.VITE_DISABLE_PWA === "true" ||
+  window.navigator.userAgent.toLowerCase().includes("electron");
+
+// Only register service worker if:
+// 1. Not in Electron
+// 2. PWA is explicitly enabled
+// 3. In production mode
 if (
+  !isElectron &&
   process.env.VITE_PWA_ENABLED === "true" &&
   process.env.NODE_ENV === "production"
 ) {
@@ -34,6 +44,12 @@ if (
   });
 } else {
   console.log(
-    "Service worker registration skipped - not enabled or not in production",
+    `Service worker registration skipped - ${
+      isElectron
+        ? "running in Electron"
+        : process.env.VITE_PWA_ENABLED !== "true"
+          ? "PWA not enabled"
+          : "not in production mode"
+    }`,
   );
 }

src/router/index.ts

@@ -2,35 +2,11 @@ import {
   createRouter,
   createWebHistory,
   createMemoryHistory,
-  NavigationGuardNext,
   RouteLocationNormalized,
   RouteRecordRaw,
 } from "vue-router";
-import { accountsDBPromise } from "../db/index";
 import { logger } from "../utils/logger";
 
-/**
- *
- * @param to :RouteLocationNormalized
- * @param from :RouteLocationNormalized
- * @param next :NavigationGuardNext
- */
-const enterOrStart = async (
-  to: RouteLocationNormalized,
-  from: RouteLocationNormalized,
-  next: NavigationGuardNext,
-) => {
-  // one of the few times we use accountsDBPromise directly; try to avoid more usage
-  const accountsDB = await accountsDBPromise;
-  const num_accounts = await accountsDB.accounts.count();
-
-  if (num_accounts > 0) {
-    next();
-  } else {
-    next({ name: "start" });
-  }
-};
-
 const routes: Array<RouteRecordRaw> = [
   {
     path: "/account",
@@ -87,6 +63,11 @@ const routes: Array<RouteRecordRaw> = [
     name: "contact-qr",
     component: () => import("../views/ContactQRScanShowView.vue"),
   },
+  {
+    path: "/contact-qr-scan-full",
+    name: "contact-qr-scan-full",
+    component: () => import("../views/ContactQRScanFullView.vue"),
+  },
   {
     path: "/contacts",
     name: "contacts",
@@ -211,7 +192,6 @@ const routes: Array<RouteRecordRaw> = [
     path: "/projects",
     name: "projects",
     component: () => import("../views/ProjectsView.vue"),
-    beforeEnter: enterOrStart,
   },
   {
     path: "/quick-action-bvc",
@@ -238,11 +218,6 @@ const routes: Array<RouteRecordRaw> = [
     name: "recent-offers-to-user-projects",
     component: () => import("../views/RecentOffersToUserProjectsView.vue"),
   },
-  {
-    path: "/scan-contact",
-    name: "scan-contact",
-    component: () => import("../views/ContactScanView.vue"),
-  },
   {
     path: "/search-area",
     name: "search-area",

src/services/AbsurdSqlDatabaseService.d.ts

@@ -0,0 +1,29 @@
+import { DatabaseService } from "../interfaces/database";
+
+declare module "@jlongster/sql.js" {
+  interface SQL {
+    Database: unknown;
+    FS: unknown;
+    register_for_idb: (fs: unknown) => void;
+  }
+
+  function initSqlJs(config: {
+    locateFile: (file: string) => string;
+  }): Promise<SQL>;
+  export default initSqlJs;
+}
+
+declare module "absurd-sql" {
+  export class SQLiteFS {
+    constructor(fs: unknown, backend: unknown);
+  }
+}
+
+declare module "absurd-sql/dist/indexeddb-backend" {
+  export default class IndexedDBBackend {
+    constructor();
+  }
+}
+
+declare const databaseService: DatabaseService;
+export default databaseService;

src/services/AbsurdSqlDatabaseService.ts

@@ -0,0 +1,231 @@
+import initSqlJs from "@jlongster/sql.js";
+import { SQLiteFS } from "absurd-sql";
+import IndexedDBBackend from "absurd-sql/dist/indexeddb-backend";
+
+import { runMigrations } from "../db-sql/migration";
+import type { DatabaseService, QueryExecResult } from "../interfaces/database";
+import { logger } from "@/utils/logger";
+
+interface QueuedOperation {
+  type: "run" | "query";
+  sql: string;
+  params: unknown[];
+  resolve: (value: unknown) => void;
+  reject: (reason: unknown) => void;
+}
+
+interface AbsurdSqlDatabase {
+  exec: (sql: string, params?: unknown[]) => Promise<QueryExecResult[]>;
+  run: (
+    sql: string,
+    params?: unknown[],
+  ) => Promise<{ changes: number; lastId?: number }>;
+}
+
+class AbsurdSqlDatabaseService implements DatabaseService {
+  private static instance: AbsurdSqlDatabaseService | null = null;
+  private db: AbsurdSqlDatabase | null;
+  private initialized: boolean;
+  private initializationPromise: Promise<void> | null = null;
+  private operationQueue: Array<QueuedOperation> = [];
+  private isProcessingQueue: boolean = false;
+
+  private constructor() {
+    this.db = null;
+    this.initialized = false;
+  }
+
+  static getInstance(): AbsurdSqlDatabaseService {
+    if (!AbsurdSqlDatabaseService.instance) {
+      AbsurdSqlDatabaseService.instance = new AbsurdSqlDatabaseService();
+    }
+    return AbsurdSqlDatabaseService.instance;
+  }
+
+  async initialize(): Promise<void> {
+    // If already initialized, return immediately
+    if (this.initialized) {
+      return;
+    }
+
+    // If initialization is in progress, wait for it
+    if (this.initializationPromise) {
+      return this.initializationPromise;
+    }
+
+    // Start initialization
+    this.initializationPromise = this._initialize();
+    try {
+      await this.initializationPromise;
+    } catch (error) {
+      logger.error(`AbsurdSqlDatabaseService initialize method failed:`, error);
+      this.initializationPromise = null; // Reset on failure
+      throw error;
+    }
+  }
+
+  private async _initialize(): Promise<void> {
+    if (this.initialized) {
+      return;
+    }
+
+    const SQL = await initSqlJs({
+      locateFile: (file: string) => {
+        return new URL(
+          `/node_modules/@jlongster/sql.js/dist/${file}`,
+          import.meta.url,
+        ).href;
+      },
+    });
+
+    const sqlFS = new SQLiteFS(SQL.FS, new IndexedDBBackend());
+    SQL.register_for_idb(sqlFS);
+
+    SQL.FS.mkdir("/sql");
+    SQL.FS.mount(sqlFS, {}, "/sql");
+
+    const path = "/sql/timesafari.absurd-sql";
+    if (typeof SharedArrayBuffer === "undefined") {
+      const stream = SQL.FS.open(path, "a+");
+      await stream.node.contents.readIfFallback();
+      SQL.FS.close(stream);
+    }
+
+    this.db = new SQL.Database(path, { filename: true });
+    if (!this.db) {
+      throw new Error(
+        "The database initialization failed. We recommend you restart or reinstall.",
+      );
+    }
+
+    // An error is thrown without this pragma: "File has invalid page size. (the first block of a new file must be written first)"
+    await this.db.exec(`PRAGMA journal_mode=MEMORY;`);
+    const sqlExec = this.db.run.bind(this.db);
+    const sqlQuery = this.db.exec.bind(this.db);
+
+    // Extract the migration names for the absurd-sql format
+    const extractMigrationNames: (result: QueryExecResult[]) => Set<string> = (
+      result,
+    ) => {
+      // Even with the "select name" query, the QueryExecResult may be [] (which doesn't make sense to me).
+      const names = result?.[0]?.values.map((row) => row[0] as string) || [];
+      return new Set(names);
+    };
+
+    // Run migrations
+    await runMigrations(sqlExec, sqlQuery, extractMigrationNames);
+
+    this.initialized = true;
+
+    // Start processing the queue after initialization
+    this.processQueue();
+  }
+
+  private async processQueue(): Promise<void> {
+    if (this.isProcessingQueue || !this.initialized || !this.db) {
+      return;
+    }
+
+    this.isProcessingQueue = true;
+
+    while (this.operationQueue.length > 0) {
+      const operation = this.operationQueue.shift();
+      if (!operation) continue;
+
+      try {
+        let result: unknown;
+        switch (operation.type) {
+          case "run":
+            result = await this.db.run(operation.sql, operation.params);
+            break;
+          case "query":
+            result = await this.db.exec(operation.sql, operation.params);
+            break;
+        }
+        operation.resolve(result);
+      } catch (error) {
+        logger.error(
+          "Error while processing SQL queue:",
+          error,
+          " ... for sql:",
+          operation.sql,
+          " ... with params:",
+          operation.params,
+        );
+        operation.reject(error);
+      }
+    }
+
+    this.isProcessingQueue = false;
+  }
+
+  private async queueOperation<R>(
+    type: QueuedOperation["type"],
+    sql: string,
+    params: unknown[] = [],
+  ): Promise<R> {
+    return new Promise<R>((resolve, reject) => {
+      const operation: QueuedOperation = {
+        type,
+        sql,
+        params,
+        resolve: (value: unknown) => resolve(value as R),
+        reject,
+      };
+      this.operationQueue.push(operation);
+
+      // If we're already initialized, start processing the queue
+      if (this.initialized && this.db) {
+        this.processQueue();
+      }
+    });
+  }
+
+  private async waitForInitialization(): Promise<void> {
+    // If we have an initialization promise, wait for it
+    if (this.initializationPromise) {
+      await this.initializationPromise;
+      return;
+    }
+
+    // If not initialized and no promise, start initialization
+    if (!this.initialized) {
+      await this.initialize();
+      return;
+    }
+
+    // If initialized but no db, something went wrong
+    if (!this.db) {
+      logger.error(
+        `Database not properly initialized after await waitForInitialization() - initialized flag is true but db is null`,
+      );
+      throw new Error(
+        `The database could not be initialized. We recommend you restart or reinstall.`,
+      );
+    }
+  }
+
+  // Used for inserts, updates, and deletes
+  async run(
+    sql: string,
+    params: unknown[] = [],
+  ): Promise<{ changes: number; lastId?: number }> {
+    await this.waitForInitialization();
+    return this.queueOperation<{ changes: number; lastId?: number }>(
+      "run",
+      sql,
+      params,
+    );
+  }
+
+  // Note that the resulting array may be empty if there are no results from the query
+  async query(sql: string, params: unknown[] = []): Promise<QueryExecResult[]> {
+    await this.waitForInitialization();
+    return this.queueOperation<QueryExecResult[]>("query", sql, params);
+  }
+}
+
+// Create a singleton instance
+const databaseService = AbsurdSqlDatabaseService.getInstance();
+
+export default databaseService;

src/services/PlatformService.ts

@@ -0,0 +1,133 @@
+import { QueryExecResult } from "@/interfaces/database";
+
+/**
+ * Represents the result of an image capture or selection operation.
+ * Contains both the image data as a Blob and the associated filename.
+ */
+export interface ImageResult {
+  /** The image data as a Blob object */
+  blob: Blob;
+  /** The filename associated with the image */
+  fileName: string;
+}
+
+/**
+ * Platform capabilities interface defining what features are available
+ * on the current platform implementation
+ */
+export interface PlatformCapabilities {
+  /** Whether the platform supports native file system access */
+  hasFileSystem: boolean;
+  /** Whether the platform supports native camera access */
+  hasCamera: boolean;
+  /** Whether the platform is a mobile device */
+  isMobile: boolean;
+  /** Whether the platform is iOS specifically */
+  isIOS: boolean;
+  /** Whether the platform supports native file download */
+  hasFileDownload: boolean;
+  /** Whether the platform requires special file handling instructions */
+  needsFileHandlingInstructions: boolean;
+  /** Whether the platform is a native app (Capacitor, Electron, etc.) */
+  isNativeApp: boolean;
+}
+
+/**
+ * Platform-agnostic interface for handling platform-specific operations.
+ * Provides a common API for file system operations, camera interactions,
+ * and platform detection across different platforms (web, mobile, desktop).
+ */
+export interface PlatformService {
+  // Platform capabilities
+  /**
+   * Gets the current platform's capabilities
+   * @returns Object describing what features are available on this platform
+   */
+  getCapabilities(): PlatformCapabilities;
+
+  // File system operations
+  /**
+   * Reads the contents of a file at the specified path.
+   * @param path - The path to the file to read
+   * @returns Promise resolving to the file contents as a string
+   */
+  readFile(path: string): Promise<string>;
+
+  /**
+   * Writes content to a file at the specified path.
+   * @param path - The path where the file should be written
+   * @param content - The content to write to the file
+   * @returns Promise that resolves when the write is complete
+   */
+  writeFile(path: string, content: string): Promise<void>;
+
+  /**
+   * Writes content to a file at the specified path and shares it.
+   * @param fileName - The filename of the file to write
+   * @param content - The content to write to the file
+   * @returns Promise that resolves when the write is complete
+   */
+  writeAndShareFile(fileName: string, content: string): Promise<void>;
+
+  /**
+   * Deletes a file at the specified path.
+   * @param path - The path to the file to delete
+   * @returns Promise that resolves when the deletion is complete
+   */
+  deleteFile(path: string): Promise<void>;
+
+  /**
+   * Lists all files in the specified directory.
+   * @param directory - The directory path to list
+   * @returns Promise resolving to an array of filenames
+   */
+  listFiles(directory: string): Promise<string[]>;
+
+  // Camera operations
+  /**
+   * Activates the device camera to take a picture.
+   * @returns Promise resolving to the captured image result
+   */
+  takePicture(): Promise<ImageResult>;
+
+  /**
+   * Opens a file picker to select an existing image.
+   * @returns Promise resolving to the selected image result
+   */
+  pickImage(): Promise<ImageResult>;
+
+  /**
+   * Rotates the camera between front and back cameras.
+   * @returns Promise that resolves when the camera is rotated
+   */
+  rotateCamera(): Promise<void>;
+
+  /**
+   * Handles deep link URLs for the application.
+   * @param url - The deep link URL to handle
+   * @returns Promise that resolves when the deep link has been handled
+   */
+  handleDeepLink(url: string): Promise<void>;
+
+  /**
+   * Executes a SQL query on the database.
+   * @param sql - The SQL query to execute
+   * @param params - The parameters to pass to the query
+   * @returns Promise resolving to the query result
+   */
+  dbQuery(
+    sql: string,
+    params?: unknown[],
+  ): Promise<QueryExecResult | undefined>;
+
+  /**
+   * Executes a create/update/delete on the database.
+   * @param sql - The SQL statement to execute
+   * @param params - The parameters to pass to the statement
+   * @returns Promise resolving to the result of the statement
+   */
+  dbExec(
+    sql: string,
+    params?: unknown[],
+  ): Promise<{ changes: number; lastId?: number }>;
+}

src/services/PlatformServiceFactory.ts

@@ -0,0 +1,58 @@
+import { PlatformService } from "./PlatformService";
+import { WebPlatformService } from "./platforms/WebPlatformService";
+import { CapacitorPlatformService } from "./platforms/CapacitorPlatformService";
+import { ElectronPlatformService } from "./platforms/ElectronPlatformService";
+import { PyWebViewPlatformService } from "./platforms/PyWebViewPlatformService";
+
+/**
+ * Factory class for creating platform-specific service implementations.
+ * Implements the Singleton pattern to ensure only one instance of PlatformService exists.
+ *
+ * The factory determines which platform implementation to use based on the VITE_PLATFORM
+ * environment variable. Supported platforms are:
+ * - capacitor: Mobile platform using Capacitor
+ * - electron: Desktop platform using Electron
+ * - pywebview: Python WebView implementation
+ * - web: Default web platform (fallback)
+ *
+ * @example
+ * ```typescript
+ * const platformService = PlatformServiceFactory.getInstance();
+ * await platformService.takePicture();
+ * ```
+ */
+export class PlatformServiceFactory {
+  private static instance: PlatformService | null = null;
+
+  /**
+   * Gets or creates the singleton instance of PlatformService.
+   * Creates the appropriate platform-specific implementation based on environment.
+   *
+   * @returns {PlatformService} The singleton instance of PlatformService
+   */
+  public static getInstance(): PlatformService {
+    if (PlatformServiceFactory.instance) {
+      return PlatformServiceFactory.instance;
+    }
+
+    const platform = process.env.VITE_PLATFORM || "web";
+
+    switch (platform) {
+      case "capacitor":
+        PlatformServiceFactory.instance = new CapacitorPlatformService();
+        break;
+      case "electron":
+        PlatformServiceFactory.instance = new ElectronPlatformService();
+        break;
+      case "pywebview":
+        PlatformServiceFactory.instance = new PyWebViewPlatformService();
+        break;
+      case "web":
+      default:
+        PlatformServiceFactory.instance = new WebPlatformService();
+        break;
+    }
+
+    return PlatformServiceFactory.instance;
+  }
+}

src/services/QRScanner/CapacitorQRScanner.ts

@@ -0,0 +1,249 @@
+import {
+  BarcodeScanner,
+  BarcodeFormat,
+  StartScanOptions,
+  LensFacing,
+} from "@capacitor-mlkit/barcode-scanning";
+import {
+  QRScannerService,
+  ScanListener,
+  QRScannerOptions,
+  CameraStateListener,
+  CameraState,
+} from "./types";
+import { logger } from "@/utils/logger";
+
+export class CapacitorQRScanner implements QRScannerService {
+  private scanListener: ScanListener | null = null;
+  private isScanning = false;
+  private listenerHandles: Array<() => Promise<void>> = [];
+  private cleanupPromise: Promise<void> | null = null;
+  private cameraStateListeners: Set<CameraStateListener> = new Set();
+  private currentState: CameraState = "off";
+  private currentStateMessage?: string;
+
+  async checkPermissions(): Promise<boolean> {
+    try {
+      logger.debug("Checking camera permissions");
+      const { camera } = await BarcodeScanner.checkPermissions();
+      return camera === "granted";
+    } catch (error) {
+      const wrappedError =
+        error instanceof Error ? error : new Error(String(error));
+      logger.error("Error checking camera permissions:", {
+        error: wrappedError.message,
+      });
+      return false;
+    }
+  }
+
+  async requestPermissions(): Promise<boolean> {
+    try {
+      // First check if we already have permissions
+      if (await this.checkPermissions()) {
+        logger.debug("Camera permissions already granted");
+        return true;
+      }
+
+      logger.debug("Requesting camera permissions");
+      const { camera } = await BarcodeScanner.requestPermissions();
+      const granted = camera === "granted";
+      logger.debug(`Camera permissions ${granted ? "granted" : "denied"}`);
+      return granted;
+    } catch (error) {
+      const wrappedError =
+        error instanceof Error ? error : new Error(String(error));
+      logger.error("Error requesting camera permissions:", {
+        error: wrappedError.message,
+      });
+      return false;
+    }
+  }
+
+  async isSupported(): Promise<boolean> {
+    try {
+      logger.debug("Checking scanner support");
+      const { supported } = await BarcodeScanner.isSupported();
+      logger.debug(`Scanner support: ${supported}`);
+      return supported;
+    } catch (error) {
+      const wrappedError =
+        error instanceof Error ? error : new Error(String(error));
+      logger.error("Error checking scanner support:", {
+        error: wrappedError.message,
+      });
+      return false;
+    }
+  }
+
+  async startScan(options?: QRScannerOptions): Promise<void> {
+    if (this.isScanning) {
+      logger.debug("Scanner already running");
+      return;
+    }
+
+    if (this.cleanupPromise) {
+      logger.debug("Waiting for previous cleanup to complete");
+      await this.cleanupPromise;
+    }
+
+    try {
+      this.updateCameraState("initializing", "Starting camera...");
+
+      // Ensure we have permissions before starting
+      if (!(await this.checkPermissions())) {
+        this.updateCameraState("permission_denied", "Camera permission denied");
+        logger.debug("Requesting camera permissions");
+        const granted = await this.requestPermissions();
+        if (!granted) {
+          throw new Error("Camera permission denied");
+        }
+      }
+
+      // Check if scanning is supported
+      if (!(await this.isSupported())) {
+        this.updateCameraState(
+          "error",
+          "QR scanning not supported on this device",
+        );
+        throw new Error("QR scanning not supported on this device");
+      }
+
+      logger.info("Starting MLKit scanner");
+      this.isScanning = true;
+      this.updateCameraState("active", "Camera is active");
+
+      const scanOptions: StartScanOptions = {
+        formats: [BarcodeFormat.QrCode],
+        lensFacing:
+          options?.camera === "front" ? LensFacing.Front : LensFacing.Back,
+      };
+
+      logger.debug("Scanner options:", scanOptions);
+
+      // Add listener for barcode scans
+      const handle = await BarcodeScanner.addListener(
+        "barcodeScanned",
+        (result) => {
+          if (this.scanListener && result.barcode?.rawValue) {
+            this.scanListener.onScan(result.barcode.rawValue);
+          }
+        },
+      );
+      this.listenerHandles.push(handle.remove);
+
+      // Start continuous scanning
+      await BarcodeScanner.startScan(scanOptions);
+      logger.info("MLKit scanner started successfully");
+    } catch (error) {
+      const wrappedError =
+        error instanceof Error ? error : new Error(String(error));
+      logger.error("Error during QR scan:", {
+        error: wrappedError.message,
+        stack: wrappedError.stack,
+      });
+      this.isScanning = false;
+      this.updateCameraState("error", wrappedError.message);
+      await this.cleanup();
+      this.scanListener?.onError?.(wrappedError);
+      throw wrappedError;
+    }
+  }
+
+  async stopScan(): Promise<void> {
+    if (!this.isScanning) {
+      logger.debug("Scanner not running");
+      return;
+    }
+
+    try {
+      logger.debug("Stopping QR scanner");
+      this.updateCameraState("off", "Camera stopped");
+      await BarcodeScanner.stopScan();
+      logger.info("QR scanner stopped successfully");
+    } catch (error) {
+      const wrappedError =
+        error instanceof Error ? error : new Error(String(error));
+      logger.error("Error stopping QR scan:", {
+        error: wrappedError.message,
+        stack: wrappedError.stack,
+      });
+      this.updateCameraState("error", wrappedError.message);
+      this.scanListener?.onError?.(wrappedError);
+      throw wrappedError;
+    } finally {
+      this.isScanning = false;
+    }
+  }
+
+  addListener(listener: ScanListener): void {
+    this.scanListener = listener;
+  }
+
+  async cleanup(): Promise<void> {
+    // Prevent multiple simultaneous cleanup attempts
+    if (this.cleanupPromise) {
+      return this.cleanupPromise;
+    }
+
+    this.cleanupPromise = (async () => {
+      try {
+        logger.debug("Starting QR scanner cleanup");
+
+        // Stop scanning if active
+        if (this.isScanning) {
+          await this.stopScan();
+        }
+
+        // Remove all listeners
+        for (const handle of this.listenerHandles) {
+          try {
+            await handle();
+          } catch (error) {
+            logger.warn("Error removing listener:", error);
+          }
+        }
+
+        logger.info("QR scanner cleanup completed");
+      } catch (error) {
+        const wrappedError =
+          error instanceof Error ? error : new Error(String(error));
+        logger.error("Error during cleanup:", {
+          error: wrappedError.message,
+          stack: wrappedError.stack,
+        });
+        throw wrappedError;
+      } finally {
+        this.listenerHandles = [];
+        this.scanListener = null;
+        this.cleanupPromise = null;
+      }
+    })();
+
+    return this.cleanupPromise;
+  }
+
+  onStream(callback: (stream: MediaStream | null) => void): void {
+    // No-op for native scanner
+    callback(null);
+  }
+
+  addCameraStateListener(listener: CameraStateListener): void {
+    this.cameraStateListeners.add(listener);
+    // Immediately notify the new listener of current state
+    listener.onStateChange(this.currentState, this.currentStateMessage);
+  }
+
+  removeCameraStateListener(listener: CameraStateListener): void {
+    this.cameraStateListeners.delete(listener);
+  }
+
+  private updateCameraState(state: CameraState, message?: string): void {
+    this.currentState = state;
+    this.currentStateMessage = message;
+    // Notify all listeners of state change
+    for (const listener of this.cameraStateListeners) {
+      listener.onStateChange(state, message);
+    }
+  }
+}

src/services/QRScanner/QRScannerFactory.ts

@@ -0,0 +1,100 @@
+import { Capacitor } from "@capacitor/core";
+import { QRScannerService } from "./types";
+import { CapacitorQRScanner } from "./CapacitorQRScanner";
+import { WebInlineQRScanner } from "./WebInlineQRScanner";
+import { logger } from "@/utils/logger";
+
+/**
+ * Factory class for creating QR scanner instances based on platform
+ */
+export class QRScannerFactory {
+  private static instance: QRScannerService | null = null;
+
+  private static isNativePlatform(): boolean {
+    // Debug logging for build flags
+    logger.log("Build flags:", {
+      IS_MOBILE:
+        typeof __IS_MOBILE__ !== "undefined" ? __IS_MOBILE__ : "undefined",
+      USE_QR_READER:
+        typeof __USE_QR_READER__ !== "undefined"
+          ? __USE_QR_READER__
+          : "undefined",
+      VITE_PLATFORM: process.env.VITE_PLATFORM,
+    });
+
+    const capacitorNative = Capacitor.isNativePlatform();
+    const isMobile =
+      typeof __IS_MOBILE__ !== "undefined" ? __IS_MOBILE__ : capacitorNative;
+    const platform = Capacitor.getPlatform();
+
+    logger.log("Platform detection:", {
+      capacitorNative,
+      isMobile,
+      platform,
+      userAgent: navigator.userAgent,
+    });
+
+    // Always use native scanner on Android/iOS
+    if (platform === "android" || platform === "ios") {
+      logger.log("Using native scanner due to platform:", platform);
+      return true;
+    }
+
+    // For other platforms, use native if available
+    const useNative = capacitorNative || isMobile;
+    logger.log("Platform decision:", {
+      useNative,
+      reason: useNative ? "capacitorNative/isMobile" : "web",
+    });
+    return useNative;
+  }
+
+  /**
+   * Get a QR scanner instance appropriate for the current platform
+   */
+  static getInstance(): QRScannerService {
+    if (!this.instance) {
+      const isNative = this.isNativePlatform();
+      logger.log(
+        `Creating QR scanner for platform: ${isNative ? "native" : "web"}`,
+      );
+
+      try {
+        if (isNative) {
+          logger.log("Using native MLKit scanner");
+          this.instance = new CapacitorQRScanner();
+        } else if (
+          typeof __USE_QR_READER__ !== "undefined"
+            ? __USE_QR_READER__
+            : !isNative
+        ) {
+          logger.log("Using web QR scanner");
+          this.instance = new WebInlineQRScanner();
+        } else {
+          throw new Error(
+            "No QR scanner implementation available for this platform",
+          );
+        }
+      } catch (error) {
+        logger.error("Error creating QR scanner:", error);
+        throw error;
+      }
+    }
+    return this.instance!;
+  }
+
+  /**
+   * Clean up the current scanner instance
+   */
+  static async cleanup(): Promise<void> {
+    if (this.instance) {
+      try {
+        await this.instance.cleanup();
+      } catch (error) {
+        logger.error("Error cleaning up QR scanner:", error);
+      } finally {
+        this.instance = null;
+      }
+    }
+  }
+}

src/services/QRScanner/WebInlineQRScanner.ts

@@ -0,0 +1,693 @@
+import {
+  QRScannerService,
+  ScanListener,
+  QRScannerOptions,
+  CameraState,
+  CameraStateListener,
+} from "./types";
+import { logger } from "@/utils/logger";
+import { EventEmitter } from "events";
+import jsQR from "jsqr";
+
+// Build identifier to help distinguish between builds
+const BUILD_ID = `build-${Date.now()}`;
+
+export class WebInlineQRScanner implements QRScannerService {
+  private scanListener: ScanListener | null = null;
+  private isScanning = false;
+  private stream: MediaStream | null = null;
+  private events = new EventEmitter();
+  private canvas: HTMLCanvasElement | null = null;
+  private context: CanvasRenderingContext2D | null = null;
+  private video: HTMLVideoElement | null = null;
+  private animationFrameId: number | null = null;
+  private scanAttempts = 0;
+  private lastScanTime = 0;
+  private readonly id: string;
+  private readonly TARGET_FPS = 15; // Target 15 FPS for scanning
+  private readonly FRAME_INTERVAL = 1000 / 15; // ~67ms between frames
+  private lastFrameTime = 0;
+  private cameraStateListeners: Set<CameraStateListener> = new Set();
+  private currentState: CameraState = "off";
+  private currentStateMessage?: string;
+  private options: QRScannerOptions;
+
+  constructor(options?: QRScannerOptions) {
+    // Generate a short random ID for this scanner instance
+    this.id = Math.random().toString(36).substring(2, 8).toUpperCase();
+    this.options = options ?? {};
+    logger.error(
+      `[WebInlineQRScanner:${this.id}] Initializing scanner with options:`,
+      {
+        ...this.options,
+        buildId: BUILD_ID,
+        targetFps: this.TARGET_FPS,
+      },
+    );
+    // Create canvas and video elements
+    this.canvas = document.createElement("canvas");
+    this.context = this.canvas.getContext("2d", { willReadFrequently: true });
+    this.video = document.createElement("video");
+    this.video.setAttribute("playsinline", "true"); // Required for iOS
+    logger.error(
+      `[WebInlineQRScanner:${this.id}] DOM elements created successfully`,
+    );
+  }
+
+  private updateCameraState(state: CameraState, message?: string) {
+    this.currentState = state;
+    this.currentStateMessage = message;
+    this.cameraStateListeners.forEach((listener) => {
+      try {
+        listener.onStateChange(state, message);
+        logger.info(
+          `[WebInlineQRScanner:${this.id}] Camera state changed to: ${state}`,
+          {
+            state,
+            message,
+          },
+        );
+      } catch (error) {
+        logger.error(
+          `[WebInlineQRScanner:${this.id}] Error in camera state listener:`,
+          error,
+        );
+      }
+    });
+  }
+
+  addCameraStateListener(listener: CameraStateListener): void {
+    this.cameraStateListeners.add(listener);
+    // Immediately notify the new listener of current state
+    listener.onStateChange(this.currentState, this.currentStateMessage);
+  }
+
+  removeCameraStateListener(listener: CameraStateListener): void {
+    this.cameraStateListeners.delete(listener);
+  }
+
+  async checkPermissions(): Promise<boolean> {
+    try {
+      this.updateCameraState("initializing", "Checking camera permissions...");
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Checking camera permissions...`,
+      );
+
+      // First try the Permissions API if available
+      if (navigator.permissions && navigator.permissions.query) {
+        try {
+          const permissions = await navigator.permissions.query({
+            name: "camera" as PermissionName,
+          });
+          logger.error(
+            `[WebInlineQRScanner:${this.id}] Permission state from Permissions API:`,
+            permissions.state,
+          );
+          if (permissions.state === "granted") {
+            this.updateCameraState("ready", "Camera permissions granted");
+            return true;
+          }
+        } catch (permError) {
+          // Permissions API might not be supported, continue with getUserMedia check
+          logger.error(
+            `[WebInlineQRScanner:${this.id}] Permissions API not supported:`,
+            permError,
+          );
+        }
+      }
+
+      // If Permissions API is not available or didn't return granted,
+      // try a test getUserMedia call
+      try {
+        const testStream = await navigator.mediaDevices.getUserMedia({
+          video: true,
+        });
+        // If we get here, we have permission
+        testStream.getTracks().forEach((track) => track.stop());
+        this.updateCameraState("ready", "Camera permissions granted");
+        return true;
+      } catch (mediaError) {
+        const error = mediaError as Error;
+        logger.error(
+          `[WebInlineQRScanner:${this.id}] getUserMedia test failed:`,
+          {
+            name: error.name,
+            message: error.message,
+          },
+        );
+
+        if (
+          error.name === "NotAllowedError" ||
+          error.name === "PermissionDeniedError"
+        ) {
+          this.updateCameraState("permission_denied", "Camera access denied");
+          return false;
+        }
+        // For other errors, we'll try requesting permissions explicitly
+        return false;
+      }
+    } catch (error) {
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Error checking camera permissions:`,
+        {
+          error: error instanceof Error ? error.message : String(error),
+          stack: error instanceof Error ? error.stack : undefined,
+        },
+      );
+      this.updateCameraState("error", "Error checking camera permissions");
+      return false;
+    }
+  }
+
+  async requestPermissions(): Promise<boolean> {
+    try {
+      this.updateCameraState(
+        "initializing",
+        "Requesting camera permissions...",
+      );
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Requesting camera permissions...`,
+      );
+
+      // First check if we have any video devices
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const videoDevices = devices.filter(
+        (device) => device.kind === "videoinput",
+      );
+
+      logger.error(`[WebInlineQRScanner:${this.id}] Found video devices:`, {
+        count: videoDevices.length,
+        devices: videoDevices.map((d) => ({ id: d.deviceId, label: d.label })),
+        userAgent: navigator.userAgent,
+      });
+
+      if (videoDevices.length === 0) {
+        logger.error(`[WebInlineQRScanner:${this.id}] No video devices found`);
+        this.updateCameraState("not_found", "No camera found on this device");
+        throw new Error("No camera found on this device");
+      }
+
+      // Try to get a stream with specific constraints
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Requesting camera stream with constraints:`,
+        {
+          facingMode: "environment",
+          width: { ideal: 1280 },
+          height: { ideal: 720 },
+        },
+      );
+
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          video: {
+            facingMode: "environment",
+            width: { ideal: 1280 },
+            height: { ideal: 720 },
+          },
+        });
+
+        this.updateCameraState("ready", "Camera permissions granted");
+
+        // Stop the test stream immediately
+        stream.getTracks().forEach((track) => {
+          logger.error(`[WebInlineQRScanner:${this.id}] Stopping test track:`, {
+            kind: track.kind,
+            label: track.label,
+            readyState: track.readyState,
+          });
+          track.stop();
+        });
+        return true;
+      } catch (mediaError) {
+        const error = mediaError as Error;
+        logger.error(
+          `[WebInlineQRScanner:${this.id}] Error requesting camera access:`,
+          {
+            name: error.name,
+            message: error.message,
+            userAgent: navigator.userAgent,
+          },
+        );
+
+        // Update state based on error type
+        if (
+          error.name === "NotFoundError" ||
+          error.name === "DevicesNotFoundError"
+        ) {
+          this.updateCameraState("not_found", "No camera found on this device");
+          throw new Error("No camera found on this device");
+        } else if (
+          error.name === "NotAllowedError" ||
+          error.name === "PermissionDeniedError"
+        ) {
+          this.updateCameraState("permission_denied", "Camera access denied");
+          throw new Error(
+            "Camera access denied. Please grant camera permission and try again",
+          );
+        } else if (
+          error.name === "NotReadableError" ||
+          error.name === "TrackStartError"
+        ) {
+          this.updateCameraState(
+            "in_use",
+            "Camera is in use by another application",
+          );
+          throw new Error("Camera is in use by another application");
+        } else {
+          this.updateCameraState("error", error.message);
+          throw new Error(`Camera error: ${error.message}`);
+        }
+      }
+    } catch (error) {
+      const wrappedError =
+        error instanceof Error ? error : new Error(String(error));
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Error in requestPermissions:`,
+        {
+          error: wrappedError.message,
+          stack: wrappedError.stack,
+          userAgent: navigator.userAgent,
+        },
+      );
+      throw wrappedError;
+    }
+  }
+
+  async isSupported(): Promise<boolean> {
+    try {
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Checking browser support...`,
+      );
+      // Check for secure context first
+      if (!window.isSecureContext) {
+        logger.error(
+          `[WebInlineQRScanner:${this.id}] Camera access requires HTTPS (secure context)`,
+        );
+        return false;
+      }
+
+      // Check for camera API support
+      if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
+        logger.error(
+          `[WebInlineQRScanner:${this.id}] Camera API not supported in this browser`,
+        );
+        return false;
+      }
+
+      // Check if we have any video devices
+      const devices = await navigator.mediaDevices.enumerateDevices();
+      const hasVideoDevices = devices.some(
+        (device) => device.kind === "videoinput",
+      );
+
+      logger.error(`[WebInlineQRScanner:${this.id}] Device support check:`, {
+        hasSecureContext: window.isSecureContext,
+        hasMediaDevices: !!navigator.mediaDevices,
+        hasGetUserMedia: !!navigator.mediaDevices?.getUserMedia,
+        hasVideoDevices,
+        deviceCount: devices.length,
+      });
+
+      if (!hasVideoDevices) {
+        logger.error(`[WebInlineQRScanner:${this.id}] No video devices found`);
+        return false;
+      }
+
+      return true;
+    } catch (error) {
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Error checking camera support:`,
+        {
+          error: error instanceof Error ? error.message : String(error),
+          stack: error instanceof Error ? error.stack : undefined,
+        },
+      );
+      return false;
+    }
+  }
+
+  private async scanQRCode(): Promise<void> {
+    if (!this.video || !this.canvas || !this.context || !this.stream) {
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Cannot scan: missing required elements`,
+        {
+          hasVideo: !!this.video,
+          hasCanvas: !!this.canvas,
+          hasContext: !!this.context,
+          hasStream: !!this.stream,
+        },
+      );
+      return;
+    }
+
+    try {
+      const now = Date.now();
+      const timeSinceLastFrame = now - this.lastFrameTime;
+
+      // Throttle frame processing to target FPS
+      if (timeSinceLastFrame < this.FRAME_INTERVAL) {
+        this.animationFrameId = requestAnimationFrame(() => this.scanQRCode());
+        return;
+      }
+
+      this.lastFrameTime = now;
+
+      // Set canvas dimensions to match video
+      this.canvas.width = this.video.videoWidth;
+      this.canvas.height = this.video.videoHeight;
+
+      // Draw video frame to canvas
+      this.context.drawImage(
+        this.video,
+        0,
+        0,
+        this.canvas.width,
+        this.canvas.height,
+      );
+
+      // Get image data from canvas
+      const imageData = this.context.getImageData(
+        0,
+        0,
+        this.canvas.width,
+        this.canvas.height,
+      );
+
+      // Increment scan attempts
+      this.scanAttempts++;
+      const timeSinceLastScan = now - this.lastScanTime;
+
+      // Log scan attempt every 100 frames or 1 second
+      if (this.scanAttempts % 100 === 0 || timeSinceLastScan >= 1000) {
+        logger.error(`[WebInlineQRScanner:${this.id}] Scanning frame:`, {
+          attempt: this.scanAttempts,
+          dimensions: {
+            width: this.canvas.width,
+            height: this.canvas.height,
+          },
+          fps: Math.round(1000 / timeSinceLastScan),
+          imageDataSize: imageData.data.length,
+          imageDataWidth: imageData.width,
+          imageDataHeight: imageData.height,
+          timeSinceLastFrame,
+          targetFPS: this.TARGET_FPS,
+        });
+        this.lastScanTime = now;
+      }
+
+      // Scan for QR code
+      const code = jsQR(imageData.data, imageData.width, imageData.height, {
+        inversionAttempts: "attemptBoth", // Try both normal and inverted
+      });
+
+      if (code) {
+        // Check if the QR code is blurry by examining the location points
+        const { topRightCorner, topLeftCorner, bottomLeftCorner } =
+          code.location;
+        const width = Math.sqrt(
+          Math.pow(topRightCorner.x - topLeftCorner.x, 2) +
+            Math.pow(topRightCorner.y - topLeftCorner.y, 2),
+        );
+        const height = Math.sqrt(
+          Math.pow(bottomLeftCorner.x - topLeftCorner.x, 2) +
+            Math.pow(bottomLeftCorner.y - topLeftCorner.y, 2),
+        );
+
+        // Adjust minimum size based on canvas dimensions
+        const minSize = Math.min(this.canvas.width, this.canvas.height) * 0.1; // 10% of the smaller dimension
+        const isBlurry =
+          width < minSize ||
+          height < minSize ||
+          !code.data ||
+          code.data.length === 0;
+
+        logger.error(`[WebInlineQRScanner:${this.id}] QR Code detected:`, {
+          data: code.data,
+          location: code.location,
+          attempts: this.scanAttempts,
+          isBlurry,
+          dimensions: {
+            width,
+            height,
+            minSize,
+            canvasWidth: this.canvas.width,
+            canvasHeight: this.canvas.height,
+            relativeWidth: width / this.canvas.width,
+            relativeHeight: height / this.canvas.height,
+          },
+          corners: {
+            topLeft: topLeftCorner,
+            topRight: topRightCorner,
+            bottomLeft: bottomLeftCorner,
+          },
+        });
+
+        if (isBlurry) {
+          if (this.scanListener?.onError) {
+            this.scanListener.onError(
+              new Error(
+                "QR code detected but too blurry to read. Please hold the camera steady and ensure the QR code is well-lit.",
+              ),
+            );
+          }
+          // Continue scanning if QR code is blurry
+          this.animationFrameId = requestAnimationFrame(() =>
+            this.scanQRCode(),
+          );
+          return;
+        }
+
+        if (this.scanListener?.onScan) {
+          this.scanListener.onScan(code.data);
+        }
+        // Stop scanning after successful detection
+        await this.stopScan();
+        return;
+      }
+
+      // Continue scanning if no QR code found
+      this.animationFrameId = requestAnimationFrame(() => this.scanQRCode());
+    } catch (error) {
+      logger.error(`[WebInlineQRScanner:${this.id}] Error scanning QR code:`, {
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+        attempt: this.scanAttempts,
+        videoState: this.video
+          ? {
+              readyState: this.video.readyState,
+              paused: this.video.paused,
+              ended: this.video.ended,
+              width: this.video.videoWidth,
+              height: this.video.videoHeight,
+            }
+          : null,
+        canvasState: this.canvas
+          ? {
+              width: this.canvas.width,
+              height: this.canvas.height,
+            }
+          : null,
+      });
+      if (this.scanListener?.onError) {
+        this.scanListener.onError(
+          error instanceof Error ? error : new Error(String(error)),
+        );
+      }
+    }
+  }
+
+  async startScan(options?: QRScannerOptions): Promise<void> {
+    if (this.isScanning) {
+      logger.error(`[WebInlineQRScanner:${this.id}] Scanner already running`);
+      return;
+    }
+
+    // Update options if provided
+    if (options) {
+      this.options = { ...this.options, ...options };
+    }
+
+    try {
+      this.isScanning = true;
+      this.scanAttempts = 0;
+      this.lastScanTime = Date.now();
+      this.updateCameraState("initializing", "Starting camera...");
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Starting scan with options:`,
+        this.options,
+      );
+
+      // Get camera stream with options
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Requesting camera stream...`,
+      );
+      this.stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          facingMode: this.options.camera === "front" ? "user" : "environment",
+          width: { ideal: 1280 },
+          height: { ideal: 720 },
+        },
+      });
+
+      this.updateCameraState("active", "Camera is active");
+
+      logger.error(`[WebInlineQRScanner:${this.id}] Camera stream obtained:`, {
+        tracks: this.stream.getTracks().map((t) => ({
+          kind: t.kind,
+          label: t.label,
+          readyState: t.readyState,
+        })),
+        options: this.options,
+      });
+
+      // Set up video element
+      if (this.video) {
+        this.video.srcObject = this.stream;
+        // Only show preview if showPreview is true
+        if (this.options.showPreview) {
+          this.video.style.display = "block";
+        } else {
+          this.video.style.display = "none";
+        }
+        await this.video.play();
+        logger.error(
+          `[WebInlineQRScanner:${this.id}] Video element started playing`,
+        );
+      }
+
+      // Emit stream to component
+      this.events.emit("stream", this.stream);
+      logger.error(`[WebInlineQRScanner:${this.id}] Stream event emitted`);
+
+      // Start QR code scanning
+      this.scanQRCode();
+    } catch (error) {
+      this.isScanning = false;
+      const wrappedError =
+        error instanceof Error ? error : new Error(String(error));
+
+      // Update state based on error type
+      if (
+        wrappedError.name === "NotReadableError" ||
+        wrappedError.name === "TrackStartError"
+      ) {
+        this.updateCameraState(
+          "in_use",
+          "Camera is in use by another application",
+        );
+      } else {
+        this.updateCameraState("error", wrappedError.message);
+      }
+
+      if (this.scanListener?.onError) {
+        this.scanListener.onError(wrappedError);
+      }
+      throw wrappedError;
+    }
+  }
+
+  async stopScan(): Promise<void> {
+    if (!this.isScanning) {
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Scanner not running, nothing to stop`,
+      );
+      return;
+    }
+
+    try {
+      logger.error(`[WebInlineQRScanner:${this.id}] Stopping scan`, {
+        scanAttempts: this.scanAttempts,
+        duration: Date.now() - this.lastScanTime,
+      });
+
+      // Stop animation frame
+      if (this.animationFrameId !== null) {
+        cancelAnimationFrame(this.animationFrameId);
+        this.animationFrameId = null;
+        logger.error(
+          `[WebInlineQRScanner:${this.id}] Animation frame cancelled`,
+        );
+      }
+
+      // Stop video
+      if (this.video) {
+        this.video.pause();
+        this.video.srcObject = null;
+        logger.error(`[WebInlineQRScanner:${this.id}] Video element stopped`);
+      }
+
+      // Stop all tracks in the stream
+      if (this.stream) {
+        this.stream.getTracks().forEach((track) => {
+          logger.error(`[WebInlineQRScanner:${this.id}] Stopping track:`, {
+            kind: track.kind,
+            label: track.label,
+            readyState: track.readyState,
+          });
+          track.stop();
+        });
+        this.stream = null;
+      }
+
+      // Emit stream stopped event
+      this.events.emit("stream", null);
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Stream stopped event emitted`,
+      );
+    } catch (error) {
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Error stopping scan:`,
+        error,
+      );
+      this.updateCameraState("error", "Error stopping camera");
+      throw error;
+    } finally {
+      this.isScanning = false;
+      logger.error(`[WebInlineQRScanner:${this.id}] Scan stopped successfully`);
+    }
+  }
+
+  addListener(listener: ScanListener): void {
+    logger.error(`[WebInlineQRScanner:${this.id}] Adding scan listener`);
+    this.scanListener = listener;
+  }
+
+  onStream(callback: (stream: MediaStream | null) => void): void {
+    logger.error(
+      `[WebInlineQRScanner:${this.id}] Adding stream event listener`,
+    );
+    this.events.on("stream", callback);
+  }
+
+  async cleanup(): Promise<void> {
+    try {
+      logger.error(`[WebInlineQRScanner:${this.id}] Starting cleanup`);
+      await this.stopScan();
+      this.events.removeAllListeners();
+      logger.error(`[WebInlineQRScanner:${this.id}] Event listeners removed`);
+
+      // Clean up DOM elements
+      if (this.video) {
+        this.video.remove();
+        this.video = null;
+        logger.error(`[WebInlineQRScanner:${this.id}] Video element removed`);
+      }
+      if (this.canvas) {
+        this.canvas.remove();
+        this.canvas = null;
+        logger.error(`[WebInlineQRScanner:${this.id}] Canvas element removed`);
+      }
+      this.context = null;
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Cleanup completed successfully`,
+      );
+    } catch (error) {
+      logger.error(
+        `[WebInlineQRScanner:${this.id}] Error during cleanup:`,
+        error,
+      );
+      this.updateCameraState("error", "Error during cleanup");
+      throw error;
+    }
+  }
+}

src/services/QRScanner/types.ts

@@ -0,0 +1,69 @@
+// QR Scanner Service Types
+
+/**
+ * Listener interface for QR code scan events
+ */
+export interface ScanListener {
+  /** Called when a QR code is successfully scanned */
+  onScan: (result: string) => void;
+  /** Called when an error occurs during scanning */
+  onError?: (error: Error) => void;
+}
+
+/**
+ * Options for configuring the QR scanner
+ */
+export interface QRScannerOptions {
+  /** Camera to use ('front' or 'back') */
+  camera?: "front" | "back";
+  /** Whether to show a preview of the camera feed */
+  showPreview?: boolean;
+  /** Whether to play a sound on successful scan */
+  playSound?: boolean;
+}
+
+export type CameraState =
+  | "initializing" // Camera is being initialized
+  | "ready" // Camera is ready to use
+  | "active" // Camera is actively streaming
+  | "in_use" // Camera is in use by another application
+  | "permission_denied" // Camera permission was denied
+  | "not_found" // No camera found on device
+  | "error" // Generic error state
+  | "off"; // Camera is off/stopped
+
+export interface CameraStateListener {
+  onStateChange: (state: CameraState, message?: string) => void;
+}
+
+/**
+ * Interface for QR scanner service implementations
+ */
+export interface QRScannerService {
+  /** Check if camera permissions are granted */
+  checkPermissions(): Promise<boolean>;
+
+  /** Request camera permissions from the user */
+  requestPermissions(): Promise<boolean>;
+
+  /** Check if QR scanning is supported on this device */
+  isSupported(): Promise<boolean>;
+
+  /** Start scanning for QR codes */
+  startScan(options?: QRScannerOptions): Promise<void>;
+
+  /** Stop scanning for QR codes */
+  stopScan(): Promise<void>;
+
+  /** Add a listener for scan events */
+  addListener(listener: ScanListener): void;
+
+  /** Add a listener for camera state changes */
+  addCameraStateListener(listener: CameraStateListener): void;
+
+  /** Remove a camera state listener */
+  removeCameraStateListener(listener: CameraStateListener): void;
+
+  /** Clean up scanner resources */
+  cleanup(): Promise<void>;
+}

src/services/api.ts

@@ -1,5 +1,40 @@
+/**
+ * API error handling utilities for the application.
+ * Provides centralized error handling for API requests with platform-specific logging.
+ *
+ * @module api
+ */
+
 import { AxiosError } from "axios";
 import { logger } from "../utils/logger";
+
+/**
+ * Handles API errors with platform-specific logging and error processing.
+ *
+ * @param error - The Axios error object from the failed request
+ * @param endpoint - The API endpoint that was called
+ * @returns null for rate limit errors (400), throws the error otherwise
+ * @throws The original error for non-rate-limit cases
+ *
+ * @remarks
+ * Special handling includes:
+ * - Enhanced logging for Capacitor platform
+ * - Rate limit detection and handling
+ * - Detailed error information logging including:
+ *   - Error message
+ *   - HTTP status
+ *   - Response data
+ *   - Request configuration (URL, method, headers)
+ *
+ * @example
+ * ```typescript
+ * try {
+ *   await api.getData();
+ * } catch (error) {
+ *   handleApiError(error as AxiosError, '/api/data');
+ * }
+ * ```
+ */
 export const handleApiError = (error: AxiosError, endpoint: string) => {
   if (process.env.VITE_PLATFORM === "capacitor") {
     logger.error(`[Capacitor API Error] ${endpoint}:`, {

src/services/deepLinks.ts

@@ -7,7 +7,7 @@
  *
  * Architecture:
  * 1. DeepLinkHandler class encapsulates all deep link processing logic
- * 2. Uses Zod schemas from types/deepLinks for parameter validation
+ * 2. Uses Zod schemas from interfaces/deepLinks for parameter validation
  * 3. Provides consistent error handling and logging
  * 4. Maps validated parameters to Vue router calls
  *
@@ -23,6 +23,23 @@
  * - Query parameter validation and sanitization
  * - Type-safe parameter passing to router
  *
+ * Deep Link Format:
+ * timesafari://<route>[/<param>][?queryParam1=value1&queryParam2=value2]
+ *
+ * Supported Routes:
+ * - user-profile: View user profile
+ * - project-details: View project details
+ * - onboard-meeting-setup: Setup onboarding meeting
+ * - invite-one-accept: Accept invitation
+ * - contact-import: Import contacts
+ * - confirm-gift: Confirm gift
+ * - claim: View claim
+ * - claim-cert: View claim certificate
+ * - claim-add-raw: Add raw claim
+ * - contact-edit: Edit contact
+ * - contacts: View contacts
+ * - did: View DID
+ *
  * @example
  * const handler = new DeepLinkHandler(router);
  * await handler.handleDeepLink("timesafari://claim/123?view=details");
@@ -34,19 +51,57 @@ import {
   baseUrlSchema,
   routeSchema,
   DeepLinkRoute,
-} from "../types/deepLinks";
-import { logConsoleAndDb } from "../db";
+} from "../interfaces/deepLinks";
+import { logConsoleAndDb } from "../db/databaseUtil";
 import type { DeepLinkError } from "../interfaces/deepLinks";
 
+/**
+ * Handles processing and routing of deep links in the application.
+ * Provides validation, error handling, and routing for deep link URLs.
+ */
 export class DeepLinkHandler {
   private router: Router;
 
+  /**
+   * Creates a new DeepLinkHandler instance.
+   * @param router - Vue Router instance for navigation
+   */
   constructor(router: Router) {
     this.router = router;
   }
 
   /**
-   * Parses deep link URL into path, params and query components
+   * Maps deep link routes to their corresponding Vue router names and optional parameter keys.
+   *
+   * The paramKey is used to extract the parameter from the route path,
+   * because "router.replace" expects the right parameter name for the route.
+   * The default is "id".
+   */
+  private readonly ROUTE_MAP: Record<
+    string,
+    { name: string; paramKey?: string }
+  > = {
+    "user-profile": { name: "user-profile" },
+    "project-details": { name: "project-details" },
+    "onboard-meeting-setup": { name: "onboard-meeting-setup" },
+    "invite-one-accept": { name: "invite-one-accept" },
+    "contact-import": { name: "contact-import" },
+    "confirm-gift": { name: "confirm-gift" },
+    claim: { name: "claim" },
+    "claim-cert": { name: "claim-cert" },
+    "claim-add-raw": { name: "claim-add-raw" },
+    "contact-edit": { name: "contact-edit", paramKey: "did" },
+    contacts: { name: "contacts" },
+    did: { name: "did", paramKey: "did" },
+  };
+
+  /**
+   * Parses deep link URL into path, params and query components.
+   * Validates URL structure using Zod schemas.
+   *
+   * @param url - The deep link URL to parse (format: scheme://path[?query])
+   * @throws {DeepLinkError} If URL format is invalid
+   * @returns Parsed URL components (path, params, query)
    */
   private parseDeepLink(url: string) {
     const parts = url.split("://");
@@ -64,6 +119,15 @@ export class DeepLinkHandler {
     const [path, queryString] = parts[1].split("?");
     const [routePath, param] = path.split("/");
 
+    // Validate route exists before proceeding
+    if (!this.ROUTE_MAP[routePath]) {
+      throw {
+        code: "INVALID_ROUTE",
+        message: `Invalid route path: ${routePath}`,
+        details: { routePath },
+      };
+    }
+
     const query: Record<string, string> = {};
     if (queryString) {
       new URLSearchParams(queryString).forEach((value, key) => {
@@ -71,16 +135,21 @@ export class DeepLinkHandler {
       });
     }
 
-    return {
-      path: routePath,
-      params: param ? { id: param } : {},
-      query,
-    };
+    const params: Record<string, string> = {};
+    if (param) {
+      // Now we know routePath exists in ROUTE_MAP
+      const routeConfig = this.ROUTE_MAP[routePath];
+      params[routeConfig.paramKey ?? "id"] = param;
+    }
+    return { path: routePath, params, query };
   }
 
   /**
-   * Processes incoming deep links and routes them appropriately
-   * @param url The deep link URL to process
+   * Processes incoming deep links and routes them appropriately.
+   * Handles validation, error handling, and routing to the correct view.
+   *
+   * @param url - The deep link URL to process
+   * @throws {DeepLinkError} If URL processing fails
    */
   async handleDeepLink(url: string): Promise<void> {
     try {
@@ -107,35 +176,26 @@ export class DeepLinkHandler {
   }
 
   /**
-   * Routes the deep link to appropriate view with validated parameters
+   * Routes the deep link to appropriate view with validated parameters.
+   * Validates route and parameters using Zod schemas before routing.
+   *
+   * @param path - The route path from the deep link
+   * @param params - URL parameters
+   * @param query - Query string parameters
+   * @throws {DeepLinkError} If validation fails or route is invalid
    */
   private async validateAndRoute(
     path: string,
     params: Record<string, string>,
     query: Record<string, string>,
   ): Promise<void> {
-    const routeMap: Record<string, string> = {
-      "user-profile": "user-profile",
-      "project-details": "project-details",
-      "onboard-meeting-setup": "onboard-meeting-setup",
-      "invite-one-accept": "invite-one-accept",
-      "contact-import": "contact-import",
-      "confirm-gift": "confirm-gift",
-      claim: "claim",
-      "claim-cert": "claim-cert",
-      "claim-add-raw": "claim-add-raw",
-      "contact-edit": "contact-edit",
-      contacts: "contacts",
-      did: "did",
-    };
-
     // First try to validate the route path
     let routeName: string;
 
     try {
       // Validate route exists
       const validRoute = routeSchema.parse(path) as DeepLinkRoute;
-      routeName = routeMap[validRoute];
+      routeName = this.ROUTE_MAP[validRoute].name;
     } catch (error) {
       // Log the invalid route attempt
       logConsoleAndDb(`[DeepLink] Invalid route path: ${path}`, true);

src/services/migrationService.ts

@@ -0,0 +1,60 @@
+interface Migration {
+  name: string;
+  sql: string;
+}
+
+export class MigrationService {
+  private static instance: MigrationService;
+  private migrations: Migration[] = [];
+
+  private constructor() {}
+
+  static getInstance(): MigrationService {
+    if (!MigrationService.instance) {
+      MigrationService.instance = new MigrationService();
+    }
+    return MigrationService.instance;
+  }
+
+  registerMigration(migration: Migration) {
+    this.migrations.push(migration);
+  }
+
+  /**
+   * @param sqlExec - A function that executes a SQL statement and returns some update result
+   * @param sqlQuery - A function that executes a SQL query and returns the result in some format
+   * @param extractMigrationNames - A function that extracts the names (string array) from a "select name from migrations" query
+   */
+  async runMigrations<T>(
+    // note that this does not take parameters because the Capacitor SQLite 'execute' is different
+    sqlExec: (sql: string) => Promise<unknown>,
+    sqlQuery: (sql: string) => Promise<T>,
+    extractMigrationNames: (result: T) => Set<string>,
+  ): Promise<void> {
+    // Create migrations table if it doesn't exist
+    await sqlExec(`
+      CREATE TABLE IF NOT EXISTS migrations (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        name TEXT NOT NULL UNIQUE,
+        executed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+      );
+    `);
+
+    // Get list of executed migrations
+    const result1: T = await sqlQuery("SELECT name FROM migrations;");
+    const executedMigrations = extractMigrationNames(result1);
+
+    // Run pending migrations in order
+    for (const migration of this.migrations) {
+      if (!executedMigrations.has(migration.name)) {
+        await sqlExec(migration.sql);
+
+        await sqlExec(
+          `INSERT INTO migrations (name) VALUES ('${migration.name}')`,
+        );
+      }
+    }
+  }
+}
+
+export default MigrationService.getInstance();

src/services/plan.ts

@@ -1,12 +1,55 @@
+/**
+ * Plan service module for handling plan and claim data loading.
+ * Provides functionality to load plans with retry mechanism and error handling.
+ *
+ * @module plan
+ */
+
 import axios from "axios";
 import { logger } from "../utils/logger";
 
+/**
+ * Response interface for plan loading operations.
+ * Represents the structure of both successful and error responses.
+ */
 interface PlanResponse {
+  /** The response data payload */
   data?: unknown;
+  /** HTTP status code of the response */
   status?: number;
+  /** Error message in case of failure */
   error?: string;
+  /** Response headers */
+  headers?: unknown;
 }
 
+/**
+ * Loads a plan with automatic retry mechanism.
+ * Attempts to load the plan multiple times in case of failure.
+ *
+ * @param handle - The unique identifier for the plan or claim
+ * @param retries - Number of retry attempts (default: 3)
+ * @returns Promise resolving to PlanResponse
+ *
+ * @remarks
+ * - Implements exponential backoff with 1 second delay between retries
+ * - Provides detailed logging of each attempt and any errors
+ * - Handles both plan and claim flows based on handle content
+ * - Logs comprehensive error information including:
+ *   - HTTP status and headers
+ *   - Response data
+ *   - Request configuration
+ *
+ * @example
+ * ```typescript
+ * const response = await loadPlanWithRetry('plan-123');
+ * if (response.error) {
+ *   console.error(response.error);
+ * } else {
+ *   console.log(response.data);
+ * }
+ * ```
+ */
 export const loadPlanWithRetry = async (
   handle: string,
   retries = 3,
@@ -58,6 +101,22 @@ export const loadPlanWithRetry = async (
   }
 };
 
+/**
+ * Makes a single API request to load a plan or claim.
+ * Determines the appropriate endpoint based on the handle.
+ *
+ * @param handle - The unique identifier for the plan or claim
+ * @returns Promise resolving to PlanResponse
+ * @throws Will throw an error if the API request fails
+ *
+ * @remarks
+ * - Automatically detects claim vs plan endpoints based on handle
+ * - Uses axios for HTTP requests
+ * - Provides detailed error logging
+ * - Different endpoints:
+ *   - Claims: /api/claims/{handle}
+ *   - Plans: /api/plans/{handle}
+ */
 export const loadPlan = async (handle: string): Promise<PlanResponse> => {
   logger.log(`[Plan Service] Making API request for plan ${handle}`);
 

src/services/platforms/CapacitorPlatformService.ts

@@ -0,0 +1,741 @@
+import { Filesystem, Directory, Encoding } from "@capacitor/filesystem";
+import {
+  Camera,
+  CameraResultType,
+  CameraSource,
+  CameraDirection,
+} from "@capacitor/camera";
+import { Share } from "@capacitor/share";
+import {
+  SQLiteConnection,
+  SQLiteDBConnection,
+  CapacitorSQLite,
+  capSQLiteChanges,
+  DBSQLiteValues,
+} from "@capacitor-community/sqlite";
+
+import { runMigrations } from "@/db-sql/migration";
+import { QueryExecResult } from "@/interfaces/database";
+import {
+  ImageResult,
+  PlatformService,
+  PlatformCapabilities,
+} from "../PlatformService";
+import { logger } from "../../utils/logger";
+
+interface QueuedOperation {
+  type: "run" | "query";
+  sql: string;
+  params: unknown[];
+  resolve: (value: unknown) => void;
+  reject: (reason: unknown) => void;
+}
+
+/**
+ * Platform service implementation for Capacitor (mobile) platform.
+ * Provides native mobile functionality through Capacitor plugins for:
+ * - File system operations
+ * - Camera and image picker
+ * - Platform-specific features
+ * - SQLite database operations
+ */
+export class CapacitorPlatformService implements PlatformService {
+  /** Current camera direction */
+  private currentDirection: CameraDirection = "BACK";
+
+  private sqlite: SQLiteConnection;
+  private db: SQLiteDBConnection | null = null;
+  private dbName = "timesafari.sqlite";
+  private initialized = false;
+  private initializationPromise: Promise<void> | null = null;
+  private operationQueue: Array<QueuedOperation> = [];
+  private isProcessingQueue: boolean = false;
+
+  constructor() {
+    this.sqlite = new SQLiteConnection(CapacitorSQLite);
+  }
+
+  private async initializeDatabase(): Promise<void> {
+    // If already initialized, return immediately
+    if (this.initialized) {
+      return;
+    }
+
+    // If initialization is in progress, wait for it
+    if (this.initializationPromise) {
+      return this.initializationPromise;
+    }
+
+    // Start initialization
+    this.initializationPromise = this._initialize();
+    try {
+      await this.initializationPromise;
+    } catch (error) {
+      logger.error(
+        "[CapacitorPlatformService] Initialize method failed:",
+        error,
+      );
+      this.initializationPromise = null; // Reset on failure
+      throw error;
+    }
+  }
+
+  private async _initialize(): Promise<void> {
+    if (this.initialized) {
+      return;
+    }
+
+    try {
+      // Create/Open database
+      this.db = await this.sqlite.createConnection(
+        this.dbName,
+        false,
+        "no-encryption",
+        1,
+        false,
+      );
+
+      await this.db.open();
+
+      // Set journal mode to WAL for better performance
+      // await this.db.execute("PRAGMA journal_mode=WAL;");
+
+      // Run migrations
+      await this.runCapacitorMigrations();
+
+      this.initialized = true;
+      logger.log(
+        "[CapacitorPlatformService] SQLite database initialized successfully",
+      );
+
+      // Start processing the queue after initialization
+      this.processQueue();
+    } catch (error) {
+      logger.error(
+        "[CapacitorPlatformService] Error initializing SQLite database:",
+        error,
+      );
+      throw new Error(
+        "[CapacitorPlatformService] Failed to initialize database",
+      );
+    }
+  }
+
+  private async processQueue(): Promise<void> {
+    if (this.isProcessingQueue || !this.initialized || !this.db) {
+      return;
+    }
+
+    this.isProcessingQueue = true;
+
+    while (this.operationQueue.length > 0) {
+      const operation = this.operationQueue.shift();
+      if (!operation) continue;
+
+      try {
+        let result: unknown;
+        switch (operation.type) {
+          case "run": {
+            const runResult = await this.db.run(
+              operation.sql,
+              operation.params,
+            );
+            result = {
+              changes: runResult.changes?.changes || 0,
+              lastId: runResult.changes?.lastId,
+            };
+            break;
+          }
+          case "query": {
+            const queryResult = await this.db.query(
+              operation.sql,
+              operation.params,
+            );
+            result = {
+              columns: Object.keys(queryResult.values?.[0] || {}),
+              values: (queryResult.values || []).map((row) =>
+                Object.values(row),
+              ),
+            };
+            break;
+          }
+        }
+        operation.resolve(result);
+      } catch (error) {
+        logger.error(
+          "[CapacitorPlatformService] Error while processing SQL queue:",
+          error,
+        );
+        operation.reject(error);
+      }
+    }
+
+    this.isProcessingQueue = false;
+  }
+
+  private async queueOperation<R>(
+    type: QueuedOperation["type"],
+    sql: string,
+    params: unknown[] = [],
+  ): Promise<R> {
+    return new Promise<R>((resolve, reject) => {
+      const operation: QueuedOperation = {
+        type,
+        sql,
+        params,
+        resolve: (value: unknown) => resolve(value as R),
+        reject,
+      };
+      this.operationQueue.push(operation);
+
+      // If we're already initialized, start processing the queue
+      if (this.initialized && this.db) {
+        this.processQueue();
+      }
+    });
+  }
+
+  private async waitForInitialization(): Promise<void> {
+    // If we have an initialization promise, wait for it
+    if (this.initializationPromise) {
+      await this.initializationPromise;
+      return;
+    }
+
+    // If not initialized and no promise, start initialization
+    if (!this.initialized) {
+      await this.initializeDatabase();
+      return;
+    }
+
+    // If initialized but no db, something went wrong
+    if (!this.db) {
+      logger.error(
+        "[CapacitorPlatformService] Database not properly initialized after await waitForInitialization() - initialized flag is true but db is null",
+      );
+      throw new Error(
+        "[CapacitorPlatformService] The database could not be initialized. We recommend you restart or reinstall.",
+      );
+    }
+  }
+
+  private async runCapacitorMigrations(): Promise<void> {
+    if (!this.db) {
+      throw new Error("Database not initialized");
+    }
+
+    const sqlExec: (sql: string) => Promise<capSQLiteChanges> =
+      this.db.execute.bind(this.db);
+    const sqlQuery: (sql: string) => Promise<DBSQLiteValues> =
+      this.db.query.bind(this.db);
+    const extractMigrationNames: (result: DBSQLiteValues) => Set<string> = (
+      result,
+    ) => {
+      const names =
+        result.values?.map((row: { name: string }) => row.name) || [];
+      return new Set(names);
+    };
+    runMigrations(sqlExec, sqlQuery, extractMigrationNames);
+  }
+
+  /**
+   * Gets the capabilities of the Capacitor platform
+   * @returns Platform capabilities object
+   */
+  getCapabilities(): PlatformCapabilities {
+    return {
+      hasFileSystem: true,
+      hasCamera: true,
+      isMobile: true,
+      isIOS: /iPad|iPhone|iPod/.test(navigator.userAgent),
+      hasFileDownload: false,
+      needsFileHandlingInstructions: true,
+      isNativeApp: true,
+    };
+  }
+
+  /**
+   * Checks and requests storage permissions if needed
+   * @returns Promise that resolves when permissions are granted
+   * @throws Error if permissions are denied
+   */
+  private async checkStoragePermissions(): Promise<void> {
+    try {
+      const logData = {
+        platform: this.getCapabilities().isIOS ? "iOS" : "Android",
+        timestamp: new Date().toISOString(),
+      };
+      logger.log(
+        "Checking storage permissions",
+        JSON.stringify(logData, null, 2),
+      );
+
+      if (this.getCapabilities().isIOS) {
+        // iOS uses different permission model
+        return;
+      }
+
+      // Try to access a test directory to check permissions
+      try {
+        await Filesystem.stat({
+          path: "/storage/emulated/0/Download",
+          directory: Directory.Documents,
+        });
+        logger.log(
+          "Storage permissions already granted",
+          JSON.stringify({ timestamp: new Date().toISOString() }, null, 2),
+        );
+        return;
+      } catch (error: unknown) {
+        const err = error as Error;
+        const errorLogData = {
+          error: {
+            message: err.message,
+            name: err.name,
+            stack: err.stack,
+          },
+          timestamp: new Date().toISOString(),
+        };
+
+        // "File does not exist" is expected and not a permission error
+        if (err.message === "File does not exist") {
+          logger.log(
+            "Directory does not exist (expected), proceeding with write",
+            JSON.stringify(errorLogData, null, 2),
+          );
+          return;
+        }
+
+        // Check for actual permission errors
+        if (
+          err.message.includes("permission") ||
+          err.message.includes("access")
+        ) {
+          logger.log(
+            "Permission check failed, requesting permissions",
+            JSON.stringify(errorLogData, null, 2),
+          );
+
+          // The Filesystem plugin will automatically request permissions when needed
+          // We just need to try the operation again
+          try {
+            await Filesystem.stat({
+              path: "/storage/emulated/0/Download",
+              directory: Directory.Documents,
+            });
+            logger.log(
+              "Storage permissions granted after request",
+              JSON.stringify({ timestamp: new Date().toISOString() }, null, 2),
+            );
+            return;
+          } catch (retryError: unknown) {
+            const retryErr = retryError as Error;
+            throw new Error(
+              `Failed to obtain storage permissions: ${retryErr.message}`,
+            );
+          }
+        }
+
+        // For any other error, log it but don't treat as permission error
+        logger.log(
+          "Unexpected error during permission check",
+          JSON.stringify(errorLogData, null, 2),
+        );
+        return;
+      }
+    } catch (error: unknown) {
+      const err = error as Error;
+      const errorLogData = {
+        error: {
+          message: err.message,
+          name: err.name,
+          stack: err.stack,
+        },
+        timestamp: new Date().toISOString(),
+      };
+      logger.error(
+        "Error checking/requesting permissions",
+        JSON.stringify(errorLogData, null, 2),
+      );
+      throw new Error(`Failed to obtain storage permissions: ${err.message}`);
+    }
+  }
+
+  /**
+   * Reads a file from the app's data directory.
+   * @param path - Relative path to the file in the app's data directory
+   * @returns Promise resolving to the file contents as string
+   * @throws Error if file cannot be read or doesn't exist
+   */
+  async readFile(path: string): Promise<string> {
+    const file = await Filesystem.readFile({
+      path,
+      directory: Directory.Data,
+    });
+    if (file.data instanceof Blob) {
+      return await file.data.text();
+    }
+    return file.data;
+  }
+
+  /**
+   * Writes content to a file in the app's safe storage and offers sharing.
+   *
+   * Platform-specific behavior:
+   * - Saves to app's Documents directory
+   * - Offers sharing functionality to move file elsewhere
+   *
+   * The method handles:
+   * 1. Writing to app-safe storage
+   * 2. Sharing the file with user's preferred app
+   * 3. Error handling and logging
+   *
+   * @param fileName - The name of the file to create (e.g. "backup.json")
+   * @param content - The content to write to the file
+   *
+   * @throws Error if:
+   * - File writing fails
+   * - Sharing fails
+   *
+   * @example
+   * ```typescript
+   * // Save and share a JSON file
+   * await platformService.writeFile(
+   *   "backup.json",
+   *   JSON.stringify(data)
+   * );
+   * ```
+   */
+  async writeFile(fileName: string, content: string): Promise<void> {
+    try {
+      // Check storage permissions before proceeding
+      await this.checkStoragePermissions();
+
+      const logData = {
+        targetFileName: fileName,
+        contentLength: content.length,
+        platform: this.getCapabilities().isIOS ? "iOS" : "Android",
+        timestamp: new Date().toISOString(),
+      };
+      logger.log(
+        "Starting writeFile operation",
+        JSON.stringify(logData, null, 2),
+      );
+
+      // For Android, we need to handle content URIs differently
+      if (this.getCapabilities().isIOS) {
+        // Write to app's Documents directory for iOS
+        const writeResult = await Filesystem.writeFile({
+          path: fileName,
+          data: content,
+          directory: Directory.Data,
+          encoding: Encoding.UTF8,
+        });
+
+        const writeSuccessLogData = {
+          path: writeResult.uri,
+          timestamp: new Date().toISOString(),
+        };
+        logger.log(
+          "File write successful",
+          JSON.stringify(writeSuccessLogData, null, 2),
+        );
+
+        // Offer to share the file
+        try {
+          await Share.share({
+            title: "TimeSafari Backup",
+            text: "Here is your TimeSafari backup file.",
+            url: writeResult.uri,
+            dialogTitle: "Share your backup",
+          });
+
+          logger.log(
+            "Share dialog shown",
+            JSON.stringify({ timestamp: new Date().toISOString() }, null, 2),
+          );
+        } catch (shareError) {
+          // Log share error but don't fail the operation
+          logger.error(
+            "Share dialog failed",
+            JSON.stringify(
+              {
+                error: shareError,
+                timestamp: new Date().toISOString(),
+              },
+              null,
+              2,
+            ),
+          );
+        }
+      } else {
+        // For Android, first write to app's Documents directory
+        const writeResult = await Filesystem.writeFile({
+          path: fileName,
+          data: content,
+          directory: Directory.Data,
+          encoding: Encoding.UTF8,
+        });
+
+        const writeSuccessLogData = {
+          path: writeResult.uri,
+          timestamp: new Date().toISOString(),
+        };
+        logger.log(
+          "File write successful to app storage",
+          JSON.stringify(writeSuccessLogData, null, 2),
+        );
+
+        // Then share the file to let user choose where to save it
+        try {
+          await Share.share({
+            title: "TimeSafari Backup",
+            text: "Here is your TimeSafari backup file.",
+            url: writeResult.uri,
+            dialogTitle: "Save your backup",
+          });
+
+          logger.log(
+            "Share dialog shown for Android",
+            JSON.stringify({ timestamp: new Date().toISOString() }, null, 2),
+          );
+        } catch (shareError) {
+          // Log share error but don't fail the operation
+          logger.error(
+            "Share dialog failed for Android",
+            JSON.stringify(
+              {
+                error: shareError,
+                timestamp: new Date().toISOString(),
+              },
+              null,
+              2,
+            ),
+          );
+        }
+      }
+    } catch (error: unknown) {
+      const err = error as Error;
+      const finalErrorLogData = {
+        error: {
+          message: err.message,
+          name: err.name,
+          stack: err.stack,
+        },
+        timestamp: new Date().toISOString(),
+      };
+      logger.error(
+        "Error in writeFile operation:",
+        JSON.stringify(finalErrorLogData, null, 2),
+      );
+      throw new Error(`Failed to save file: ${err.message}`);
+    }
+  }
+
+  /**
+   * Writes content to a file in the device's app-private storage.
+   * Then shares the file using the system share dialog.
+   *
+   * Works on both Android and iOS without needing external storage permissions.
+   *
+   * @param fileName - The name of the file to create (e.g. "backup.json")
+   * @param content - The content to write to the file
+   */
+  async writeAndShareFile(fileName: string, content: string): Promise<void> {
+    const timestamp = new Date().toISOString();
+    const logData = {
+      action: "writeAndShareFile",
+      fileName,
+      contentLength: content.length,
+      timestamp,
+    };
+    logger.log("[CapacitorPlatformService]", JSON.stringify(logData, null, 2));
+
+    try {
+      // Check storage permissions before proceeding
+      await this.checkStoragePermissions();
+
+      const { uri } = await Filesystem.writeFile({
+        path: fileName,
+        data: content,
+        directory: Directory.Data,
+        encoding: Encoding.UTF8,
+        recursive: true,
+      });
+
+      logger.log("[CapacitorPlatformService] File write successful:", {
+        uri,
+        timestamp: new Date().toISOString(),
+      });
+
+      await Share.share({
+        title: "TimeSafari Backup",
+        text: "Here is your backup file.",
+        url: uri,
+        dialogTitle: "Share your backup file",
+      });
+    } catch (error) {
+      const err = error as Error;
+      const errLog = {
+        message: err.message,
+        stack: err.stack,
+        timestamp: new Date().toISOString(),
+      };
+      logger.error(
+        "[CapacitorPlatformService] Error writing or sharing file:",
+        JSON.stringify(errLog, null, 2),
+      );
+      throw new Error(`Failed to write or share file: ${err.message}`);
+    }
+  }
+
+  /**
+   * Deletes a file from the app's data directory.
+   * @param path - Relative path to the file to delete
+   * @throws Error if deletion fails or file doesn't exist
+   */
+  async deleteFile(path: string): Promise<void> {
+    await Filesystem.deleteFile({
+      path,
+      directory: Directory.Data,
+    });
+  }
+
+  /**
+   * Lists files in the specified directory within app's data directory.
+   * @param directory - Relative path to the directory to list
+   * @returns Promise resolving to array of filenames
+   * @throws Error if directory cannot be read or doesn't exist
+   */
+  async listFiles(directory: string): Promise<string[]> {
+    const result = await Filesystem.readdir({
+      path: directory,
+      directory: Directory.Data,
+    });
+    return result.files.map((file) =>
+      typeof file === "string" ? file : file.name,
+    );
+  }
+
+  /**
+   * Opens the device camera to take a picture.
+   * Configures camera for high quality images with editing enabled.
+   * @returns Promise resolving to the captured image data
+   * @throws Error if camera access fails or user cancels
+   */
+  async takePicture(): Promise<ImageResult> {
+    try {
+      const image = await Camera.getPhoto({
+        quality: 90,
+        allowEditing: true,
+        resultType: CameraResultType.Base64,
+        source: CameraSource.Camera,
+        direction: this.currentDirection,
+      });
+
+      const blob = await this.processImageData(image.base64String);
+      return {
+        blob,
+        fileName: `photo_${Date.now()}.${image.format || "jpg"}`,
+      };
+    } catch (error) {
+      logger.error("Error taking picture with Capacitor:", error);
+      throw new Error("Failed to take picture");
+    }
+  }
+
+  /**
+   * Opens the device photo gallery to pick an existing image.
+   * Configures picker for high quality images with editing enabled.
+   * @returns Promise resolving to the selected image data
+   * @throws Error if gallery access fails or user cancels
+   */
+  async pickImage(): Promise<ImageResult> {
+    try {
+      const image = await Camera.getPhoto({
+        quality: 90,
+        allowEditing: true,
+        resultType: CameraResultType.Base64,
+        source: CameraSource.Photos,
+      });
+
+      const blob = await this.processImageData(image.base64String);
+      return {
+        blob,
+        fileName: `photo_${Date.now()}.${image.format || "jpg"}`,
+      };
+    } catch (error) {
+      logger.error("Error picking image with Capacitor:", error);
+      throw new Error("Failed to pick image");
+    }
+  }
+
+  /**
+   * Converts base64 image data to a Blob.
+   * @param base64String - Base64 encoded image data
+   * @returns Promise resolving to image Blob
+   * @throws Error if conversion fails
+   */
+  private async processImageData(base64String?: string): Promise<Blob> {
+    if (!base64String) {
+      throw new Error("No image data received");
+    }
+
+    // Convert base64 to blob
+    const byteCharacters = atob(base64String);
+    const byteArrays = [];
+    for (let offset = 0; offset < byteCharacters.length; offset += 512) {
+      const slice = byteCharacters.slice(offset, offset + 512);
+      const byteNumbers = new Array(slice.length);
+      for (let i = 0; i < slice.length; i++) {
+        byteNumbers[i] = slice.charCodeAt(i);
+      }
+      const byteArray = new Uint8Array(byteNumbers);
+      byteArrays.push(byteArray);
+    }
+    return new Blob(byteArrays, { type: "image/jpeg" });
+  }
+
+  /**
+   * Rotates the camera between front and back cameras.
+   * @returns Promise that resolves when the camera is rotated
+   */
+  async rotateCamera(): Promise<void> {
+    this.currentDirection = this.currentDirection === "BACK" ? "FRONT" : "BACK";
+    logger.debug(`Camera rotated to ${this.currentDirection} camera`);
+  }
+
+  /**
+   * Handles deep link URLs for the application.
+   * Note: Capacitor handles deep links automatically.
+   * @param _url - The deep link URL (unused)
+   */
+  async handleDeepLink(_url: string): Promise<void> {
+    // Capacitor handles deep links automatically
+    // This is just a placeholder for the interface
+    return Promise.resolve();
+  }
+
+  /**
+   * @see PlatformService.dbQuery
+   */
+  async dbQuery(sql: string, params?: unknown[]): Promise<QueryExecResult> {
+    await this.waitForInitialization();
+    return this.queueOperation<QueryExecResult>("query", sql, params || []);
+  }
+
+  /**
+   * @see PlatformService.dbExec
+   */
+  async dbExec(
+    sql: string,
+    params?: unknown[],
+  ): Promise<{ changes: number; lastId?: number }> {
+    await this.waitForInitialization();
+    return this.queueOperation<{ changes: number; lastId?: number }>(
+      "run",
+      sql,
+      params || [],
+    );
+  }
+}

src/services/platforms/ElectronPlatformService.ts

@@ -0,0 +1,348 @@
+import {
+  ImageResult,
+  PlatformService,
+  PlatformCapabilities,
+} from "../PlatformService";
+import { logger } from "../../utils/logger";
+import { QueryExecResult, SqlValue } from "@/interfaces/database";
+import {
+  SQLiteConnection,
+  SQLiteDBConnection,
+  CapacitorSQLite,
+  Changes,
+} from "@capacitor-community/sqlite";
+import { DEFAULT_ENDORSER_API_SERVER } from "@/constants/app";
+
+interface Migration {
+  name: string;
+  sql: string;
+}
+
+/**
+ * Platform service implementation for Electron (desktop) platform.
+ * Provides native desktop functionality through Electron and Capacitor plugins for:
+ * - File system operations (TODO)
+ * - Camera integration (TODO)
+ * - SQLite database operations
+ * - System-level features (TODO)
+ */
+export class ElectronPlatformService implements PlatformService {
+  private sqlite: SQLiteConnection;
+  private db: SQLiteDBConnection | null = null;
+  private dbName = "timesafari.db";
+  private initialized = false;
+
+  constructor() {
+    this.sqlite = new SQLiteConnection(CapacitorSQLite);
+  }
+
+  private async initializeDatabase(): Promise<void> {
+    if (this.initialized) {
+      return;
+    }
+
+    try {
+      // Create/Open database
+      this.db = await this.sqlite.createConnection(
+        this.dbName,
+        false,
+        "no-encryption",
+        1,
+        false,
+      );
+
+      await this.db.open();
+
+      // Set journal mode to WAL for better performance
+      await this.db.execute("PRAGMA journal_mode=WAL;");
+
+      // Run migrations
+      await this.runMigrations();
+
+      this.initialized = true;
+      logger.log(
+        "[ElectronPlatformService] SQLite database initialized successfully",
+      );
+    } catch (error) {
+      logger.error(
+        "[ElectronPlatformService] Error initializing SQLite database:",
+        error,
+      );
+      throw new Error(
+        "[ElectronPlatformService] Failed to initialize database",
+      );
+    }
+  }
+
+  private async runMigrations(): Promise<void> {
+    if (!this.db) {
+      throw new Error("Database not initialized");
+    }
+
+    // Create migrations table if it doesn't exist
+    await this.db.execute(`
+      CREATE TABLE IF NOT EXISTS migrations (
+        id INTEGER PRIMARY KEY AUTOINCREMENT,
+        name TEXT NOT NULL UNIQUE,
+        executed_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+      );
+    `);
+
+    // Get list of executed migrations
+    const result = await this.db.query("SELECT name FROM migrations;");
+    const executedMigrations = new Set(
+      result.values?.map((row) => row[0]) || [],
+    );
+
+    // Run pending migrations in order
+    const migrations: Migration[] = [
+      {
+        name: "001_initial",
+        sql: `
+          CREATE TABLE IF NOT EXISTS accounts (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            dateCreated TEXT NOT NULL,
+            derivationPath TEXT,
+            did TEXT NOT NULL,
+            identityEncrBase64 TEXT,
+            mnemonicEncrBase64 TEXT,
+            passkeyCredIdHex TEXT,
+            publicKeyHex TEXT NOT NULL
+          );
+
+          CREATE INDEX IF NOT EXISTS idx_accounts_did ON accounts(did);
+
+          CREATE TABLE IF NOT EXISTS secret (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            secretBase64 TEXT NOT NULL
+          );
+
+          CREATE TABLE IF NOT EXISTS settings (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            accountDid TEXT,
+            activeDid TEXT,
+            apiServer TEXT,
+            filterFeedByNearby BOOLEAN,
+            filterFeedByVisible BOOLEAN,
+            finishedOnboarding BOOLEAN,
+            firstName TEXT,
+            hideRegisterPromptOnNewContact BOOLEAN,
+            isRegistered BOOLEAN,
+            lastName TEXT,
+            lastAckedOfferToUserJwtId TEXT,
+            lastAckedOfferToUserProjectsJwtId TEXT,
+            lastNotifiedClaimId TEXT,
+            lastViewedClaimId TEXT,
+            notifyingNewActivityTime TEXT,
+            notifyingReminderMessage TEXT,
+            notifyingReminderTime TEXT,
+            partnerApiServer TEXT,
+            passkeyExpirationMinutes INTEGER,
+            profileImageUrl TEXT,
+            searchBoxes TEXT,
+            showContactGivesInline BOOLEAN,
+            showGeneralAdvanced BOOLEAN,
+            showShortcutBvc BOOLEAN,
+            vapid TEXT,
+            warnIfProdServer BOOLEAN,
+            warnIfTestServer BOOLEAN,
+            webPushServer TEXT
+          );
+
+          CREATE INDEX IF NOT EXISTS idx_settings_accountDid ON settings(accountDid);
+
+          INSERT INTO settings (id, apiServer) VALUES (1, '${DEFAULT_ENDORSER_API_SERVER}');
+
+          CREATE TABLE IF NOT EXISTS contacts (
+            id INTEGER PRIMARY KEY AUTOINCREMENT,
+            did TEXT NOT NULL,
+            name TEXT,
+            contactMethods TEXT,
+            nextPubKeyHashB64 TEXT,
+            notes TEXT,
+            profileImageUrl TEXT,
+            publicKeyBase64 TEXT,
+            seesMe BOOLEAN,
+            registered BOOLEAN
+          );
+
+          CREATE INDEX IF NOT EXISTS idx_contacts_did ON contacts(did);
+          CREATE INDEX IF NOT EXISTS idx_contacts_name ON contacts(name);
+
+          CREATE TABLE IF NOT EXISTS logs (
+            date TEXT PRIMARY KEY,
+            message TEXT NOT NULL
+          );
+
+          CREATE TABLE IF NOT EXISTS temp (
+            id TEXT PRIMARY KEY,
+            blobB64 TEXT
+          );
+        `,
+      },
+    ];
+
+    for (const migration of migrations) {
+      if (!executedMigrations.has(migration.name)) {
+        await this.db.execute(migration.sql);
+        await this.db.run("INSERT INTO migrations (name) VALUES (?)", [
+          migration.name,
+        ]);
+        logger.log(`Migration ${migration.name} executed successfully`);
+      }
+    }
+  }
+
+  /**
+   * Gets the capabilities of the Electron platform
+   * @returns Platform capabilities object
+   */
+  getCapabilities(): PlatformCapabilities {
+    return {
+      hasFileSystem: false, // Not implemented yet
+      hasCamera: false, // Not implemented yet
+      isMobile: false,
+      isIOS: false,
+      hasFileDownload: false, // Not implemented yet
+      needsFileHandlingInstructions: false,
+    };
+  }
+
+  /**
+   * Reads a file from the filesystem.
+   * @param _path - Path to the file to read
+   * @returns Promise that should resolve to file contents
+   * @throws Error with "Not implemented" message
+   * @todo Implement file reading using Electron's file system API
+   */
+  async readFile(_path: string): Promise<string> {
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Writes content to a file.
+   * @param _path - Path where to write the file
+   * @param _content - Content to write to the file
+   * @throws Error with "Not implemented" message
+   * @todo Implement file writing using Electron's file system API
+   */
+  async writeFile(_path: string, _content: string): Promise<void> {
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Writes content to a file and opens the system share dialog.
+   * @param _fileName - Name of the file to create
+   * @param _content - Content to write to the file
+   * @throws Error with "Not implemented" message
+   * @todo Implement using Electron's dialog and file system APIs
+   */
+  async writeAndShareFile(_fileName: string, _content: string): Promise<void> {
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Deletes a file from the filesystem.
+   * @param _path - Path to the file to delete
+   * @throws Error with "Not implemented" message
+   * @todo Implement file deletion using Electron's file system API
+   */
+  async deleteFile(_path: string): Promise<void> {
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Lists files in the specified directory.
+   * @param _directory - Path to the directory to list
+   * @returns Promise that should resolve to array of filenames
+   * @throws Error with "Not implemented" message
+   * @todo Implement directory listing using Electron's file system API
+   */
+  async listFiles(_directory: string): Promise<string[]> {
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Should open system camera to take a picture.
+   * @returns Promise that should resolve to captured image data
+   * @throws Error with "Not implemented" message
+   * @todo Implement camera access using Electron's media APIs
+   */
+  async takePicture(): Promise<ImageResult> {
+    logger.error("takePicture not implemented in Electron platform");
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Should open system file picker for selecting an image.
+   * @returns Promise that should resolve to selected image data
+   * @throws Error with "Not implemented" message
+   * @todo Implement file picker using Electron's dialog API
+   */
+  async pickImage(): Promise<ImageResult> {
+    logger.error("pickImage not implemented in Electron platform");
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Should handle deep link URLs for the desktop application.
+   * @param _url - The deep link URL to handle
+   * @throws Error with "Not implemented" message
+   * @todo Implement deep link handling using Electron's protocol handler
+   */
+  async handleDeepLink(_url: string): Promise<void> {
+    logger.error("handleDeepLink not implemented in Electron platform");
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * @see PlatformService.dbQuery
+   */
+  async dbQuery(sql: string, params?: unknown[]): Promise<QueryExecResult> {
+    await this.initializeDatabase();
+    if (!this.db) {
+      throw new Error("Database not initialized");
+    }
+
+    try {
+      const result = await this.db.query(sql, params || []);
+      const values = result.values || [];
+      return {
+        columns: [], // SQLite plugin doesn't provide column names in query result
+        values: values as SqlValue[][],
+      };
+    } catch (error) {
+      logger.error("Error executing query:", error);
+      throw new Error(
+        `Database query failed: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }
+
+  /**
+   * @see PlatformService.dbExec
+   */
+  async dbExec(
+    sql: string,
+    params?: unknown[],
+  ): Promise<{ changes: number; lastId?: number }> {
+    await this.initializeDatabase();
+    if (!this.db) {
+      throw new Error("Database not initialized");
+    }
+
+    try {
+      const result = await this.db.run(sql, params || []);
+      const changes = result.changes as Changes;
+      return {
+        changes: changes?.changes || 0,
+        lastId: changes?.lastId,
+      };
+    } catch (error) {
+      logger.error("Error executing statement:", error);
+      throw new Error(
+        `Database execution failed: ${error instanceof Error ? error.message : String(error)}`,
+      );
+    }
+  }
+}

src/services/platforms/PyWebViewPlatformService.ts

@@ -0,0 +1,135 @@
+import {
+  ImageResult,
+  PlatformService,
+  PlatformCapabilities,
+} from "../PlatformService";
+import { logger } from "../../utils/logger";
+import { QueryExecResult } from "@/interfaces/database";
+
+/**
+ * Platform service implementation for PyWebView platform.
+ * Note: This is a placeholder implementation with most methods currently unimplemented.
+ * Implements the PlatformService interface but throws "Not implemented" errors for most operations.
+ *
+ * @remarks
+ * This service is intended for Python-based desktop applications using pywebview.
+ * Future implementations should provide:
+ * - Integration with Python backend file operations
+ * - System camera access through Python
+ * - Native system dialogs via pywebview
+ * - Python-JavaScript bridge functionality
+ */
+export class PyWebViewPlatformService implements PlatformService {
+  /**
+   * Gets the capabilities of the PyWebView platform
+   * @returns Platform capabilities object
+   */
+  getCapabilities(): PlatformCapabilities {
+    return {
+      hasFileSystem: false, // Not implemented yet
+      hasCamera: false, // Not implemented yet
+      isMobile: false,
+      isIOS: false,
+      hasFileDownload: false, // Not implemented yet
+      needsFileHandlingInstructions: false,
+    };
+  }
+
+  /**
+   * Reads a file using the Python backend.
+   * @param _path - Path to the file to read
+   * @returns Promise that should resolve to file contents
+   * @throws Error with "Not implemented" message
+   * @todo Implement file reading through pywebview's Python-JavaScript bridge
+   */
+  async readFile(_path: string): Promise<string> {
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Writes content to a file using the Python backend.
+   * @param _path - Path where to write the file
+   * @param _content - Content to write to the file
+   * @throws Error with "Not implemented" message
+   * @todo Implement file writing through pywebview's Python-JavaScript bridge
+   */
+  async writeFile(_path: string, _content: string): Promise<void> {
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Deletes a file using the Python backend.
+   * @param _path - Path to the file to delete
+   * @throws Error with "Not implemented" message
+   * @todo Implement file deletion through pywebview's Python-JavaScript bridge
+   */
+  async deleteFile(_path: string): Promise<void> {
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Lists files in the specified directory using the Python backend.
+   * @param _directory - Path to the directory to list
+   * @returns Promise that should resolve to array of filenames
+   * @throws Error with "Not implemented" message
+   * @todo Implement directory listing through pywebview's Python-JavaScript bridge
+   */
+  async listFiles(_directory: string): Promise<string[]> {
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Should open system camera through Python backend.
+   * @returns Promise that should resolve to captured image data
+   * @throws Error with "Not implemented" message
+   * @todo Implement camera access using Python's camera libraries
+   */
+  async takePicture(): Promise<ImageResult> {
+    logger.error("takePicture not implemented in PyWebView platform");
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Should open system file picker through pywebview.
+   * @returns Promise that should resolve to selected image data
+   * @throws Error with "Not implemented" message
+   * @todo Implement file picker using pywebview's file dialog API
+   */
+  async pickImage(): Promise<ImageResult> {
+    logger.error("pickImage not implemented in PyWebView platform");
+    throw new Error("Not implemented");
+  }
+
+  /**
+   * Should handle deep link URLs through the Python backend.
+   * @param _url - The deep link URL to handle
+   * @throws Error with "Not implemented" message
+   * @todo Implement deep link handling using Python's URL handling capabilities
+   */
+  async handleDeepLink(_url: string): Promise<void> {
+    logger.error("handleDeepLink not implemented in PyWebView platform");
+    throw new Error("Not implemented");
+  }
+
+  dbQuery(sql: string, params?: unknown[]): Promise<QueryExecResult> {
+    throw new Error("Not implemented for " + sql + " with params " + params);
+  }
+  dbExec(
+    sql: string,
+    params?: unknown[],
+  ): Promise<{ changes: number; lastId?: number }> {
+    throw new Error("Not implemented for " + sql + " with params " + params);
+  }
+
+  /**
+   * Should write and share a file using the Python backend.
+   * @param _fileName - Name of the file to write and share
+   * @param _content - Content to write to the file
+   * @throws Error with "Not implemented" message
+   * @todo Implement file writing and sharing through pywebview's Python-JavaScript bridge
+   */
+  async writeAndShareFile(_fileName: string, _content: string): Promise<void> {
+    logger.error("writeAndShareFile not implemented in PyWebView platform");
+    throw new Error("Not implemented");
+  }
+}

src/services/platforms/WebPlatformService.ts

@@ -0,0 +1,393 @@
+import {
+  ImageResult,
+  PlatformService,
+  PlatformCapabilities,
+} from "../PlatformService";
+import { logger } from "../../utils/logger";
+import { QueryExecResult } from "@/interfaces/database";
+import databaseService from "../AbsurdSqlDatabaseService";
+
+/**
+ * Platform service implementation for web browser platform.
+ * Implements the PlatformService interface with web-specific functionality.
+ *
+ * @remarks
+ * This service provides web-based implementations for:
+ * - Image capture using the browser's file input
+ * - Image selection from local filesystem
+ * - Image processing and conversion
+ *
+ * Note: File system operations are not available in the web platform
+ * due to browser security restrictions. These methods throw appropriate errors.
+ */
+export class WebPlatformService implements PlatformService {
+  /**
+   * Gets the capabilities of the web platform
+   * @returns Platform capabilities object
+   */
+  getCapabilities(): PlatformCapabilities {
+    return {
+      hasFileSystem: false,
+      hasCamera: true, // Through file input with capture
+      isMobile: /iPhone|iPad|iPod|Android/i.test(navigator.userAgent),
+      isIOS: /iPad|iPhone|iPod/.test(navigator.userAgent),
+      hasFileDownload: true,
+      needsFileHandlingInstructions: false,
+    };
+  }
+
+  /**
+   * Not supported in web platform.
+   * @param _path - Unused path parameter
+   * @throws Error indicating file system access is not available
+   */
+  async readFile(_path: string): Promise<string> {
+    throw new Error("File system access not available in web platform");
+  }
+
+  /**
+   * Not supported in web platform.
+   * @param _path - Unused path parameter
+   * @param _content - Unused content parameter
+   * @throws Error indicating file system access is not available
+   */
+  async writeFile(_path: string, _content: string): Promise<void> {
+    throw new Error("File system access not available in web platform");
+  }
+
+  /**
+   * Not supported in web platform.
+   * @param _path - Unused path parameter
+   * @throws Error indicating file system access is not available
+   */
+  async deleteFile(_path: string): Promise<void> {
+    throw new Error("File system access not available in web platform");
+  }
+
+  /**
+   * Not supported in web platform.
+   * @param _directory - Unused directory parameter
+   * @throws Error indicating file system access is not available
+   */
+  async listFiles(_directory: string): Promise<string[]> {
+    throw new Error("File system access not available in web platform");
+  }
+
+  /**
+   * Opens the device camera for photo capture on desktop browsers using getUserMedia.
+   * On mobile browsers, uses file input with capture attribute.
+   * Falls back to file input if getUserMedia is not available or fails.
+   *
+   * @returns Promise resolving to the captured image data
+   */
+  async takePicture(): Promise<ImageResult> {
+    const isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
+    const hasGetUserMedia = !!(
+      navigator.mediaDevices && navigator.mediaDevices.getUserMedia
+    );
+
+    // If on mobile, use file input with capture attribute (existing behavior)
+    if (isMobile || !hasGetUserMedia) {
+      return new Promise((resolve, reject) => {
+        const input = document.createElement("input");
+        input.type = "file";
+        input.accept = "image/*";
+        input.capture = "environment";
+
+        input.onchange = async (e) => {
+          const file = (e.target as HTMLInputElement).files?.[0];
+          if (file) {
+            try {
+              const blob = await this.processImageFile(file);
+              resolve({
+                blob,
+                fileName: file.name || "photo.jpg",
+              });
+            } catch (error) {
+              logger.error("Error processing camera image:", error);
+              reject(new Error("Failed to process camera image"));
+            }
+          } else {
+            reject(new Error("No image captured"));
+          }
+        };
+
+        input.click();
+      });
+    }
+
+    // Desktop: Use getUserMedia for webcam capture
+    return new Promise((resolve, reject) => {
+      let stream: MediaStream | null = null;
+      let video: HTMLVideoElement | null = null;
+      let captureButton: HTMLButtonElement | null = null;
+      let overlay: HTMLDivElement | null = null;
+      const cleanup = () => {
+        if (stream) {
+          stream.getTracks().forEach((track) => track.stop());
+        }
+        if (video && video.parentNode) video.parentNode.removeChild(video);
+        if (captureButton && captureButton.parentNode)
+          captureButton.parentNode.removeChild(captureButton);
+        if (overlay && overlay.parentNode)
+          overlay.parentNode.removeChild(overlay);
+      };
+
+      // Move async operations inside Promise body
+      navigator.mediaDevices
+        .getUserMedia({
+          video: { facingMode: "user" },
+        })
+        .then((mediaStream) => {
+          stream = mediaStream;
+          // Create overlay for video and button
+          overlay = document.createElement("div");
+          overlay.style.position = "fixed";
+          overlay.style.top = "0";
+          overlay.style.left = "0";
+          overlay.style.width = "100vw";
+          overlay.style.height = "100vh";
+          overlay.style.background = "rgba(0,0,0,0.8)";
+          overlay.style.display = "flex";
+          overlay.style.flexDirection = "column";
+          overlay.style.justifyContent = "center";
+          overlay.style.alignItems = "center";
+          overlay.style.zIndex = "9999";
+
+          video = document.createElement("video");
+          video.autoplay = true;
+          video.playsInline = true;
+          video.style.maxWidth = "90vw";
+          video.style.maxHeight = "70vh";
+          video.srcObject = stream;
+          overlay.appendChild(video);
+
+          captureButton = document.createElement("button");
+          captureButton.textContent = "Capture Photo";
+          captureButton.style.marginTop = "2rem";
+          captureButton.style.padding = "1rem 2rem";
+          captureButton.style.fontSize = "1.2rem";
+          captureButton.style.background = "#2563eb";
+          captureButton.style.color = "white";
+          captureButton.style.border = "none";
+          captureButton.style.borderRadius = "0.5rem";
+          captureButton.style.cursor = "pointer";
+          overlay.appendChild(captureButton);
+
+          document.body.appendChild(overlay);
+
+          captureButton.onclick = () => {
+            try {
+              // Create a canvas to capture the frame
+              const canvas = document.createElement("canvas");
+              canvas.width = video!.videoWidth;
+              canvas.height = video!.videoHeight;
+              const ctx = canvas.getContext("2d");
+              ctx?.drawImage(video!, 0, 0, canvas.width, canvas.height);
+              canvas.toBlob(
+                (blob) => {
+                  cleanup();
+                  if (blob) {
+                    resolve({
+                      blob,
+                      fileName: `photo_${Date.now()}.jpg`,
+                    });
+                  } else {
+                    reject(new Error("Failed to capture image from webcam"));
+                  }
+                },
+                "image/jpeg",
+                0.95,
+              );
+            } catch (err) {
+              cleanup();
+              reject(err);
+            }
+          };
+        })
+        .catch((error) => {
+          cleanup();
+          logger.error("Error accessing webcam:", error);
+          // Fallback to file input
+          const input = document.createElement("input");
+          input.type = "file";
+          input.accept = "image/*";
+          input.onchange = (e) => {
+            const file = (e.target as HTMLInputElement).files?.[0];
+            if (file) {
+              this.processImageFile(file)
+                .then((blob) => {
+                  resolve({
+                    blob,
+                    fileName: file.name || "photo.jpg",
+                  });
+                })
+                .catch((error) => {
+                  logger.error("Error processing fallback image:", error);
+                  reject(new Error("Failed to process fallback image"));
+                });
+            } else {
+              reject(new Error("No image selected"));
+            }
+          };
+          input.click();
+        });
+    });
+  }
+
+  /**
+   * Opens a file input dialog for selecting an image file.
+   * Creates a temporary file input element to access local files.
+   *
+   * @returns Promise resolving to the selected image data
+   * @throws Error if image processing fails or no image is selected
+   *
+   * @remarks
+   * Allows selection of any image file type.
+   * Processes the selected image to ensure consistent format.
+   */
+  async pickImage(): Promise<ImageResult> {
+    return new Promise((resolve, reject) => {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/*";
+
+      input.onchange = async (e) => {
+        const file = (e.target as HTMLInputElement).files?.[0];
+        if (file) {
+          try {
+            const blob = await this.processImageFile(file);
+            resolve({
+              blob,
+              fileName: file.name || "photo.jpg",
+            });
+          } catch (error) {
+            logger.error("Error processing picked image:", error);
+            reject(new Error("Failed to process picked image"));
+          }
+        } else {
+          reject(new Error("No image selected"));
+        }
+      };
+
+      input.click();
+    });
+  }
+
+  /**
+   * Processes an image file to ensure consistent format.
+   * Converts the file to a data URL and then to a Blob.
+   *
+   * @param file - The image File object to process
+   * @returns Promise resolving to processed image Blob
+   * @throws Error if file reading or conversion fails
+   *
+   * @remarks
+   * This method ensures consistent image format across different
+   * input sources by converting through data URL to Blob.
+   */
+  private async processImageFile(file: File): Promise<Blob> {
+    return new Promise((resolve, reject) => {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        const dataUrl = event.target?.result as string;
+        // Convert to blob to ensure consistent format
+        fetch(dataUrl)
+          .then((res) => res.blob())
+          .then((blob) => resolve(blob))
+          .catch((error) => {
+            logger.error("Error converting data URL to blob:", error);
+            reject(error);
+          });
+      };
+      reader.onerror = (error) => {
+        logger.error("Error reading file:", error);
+        reject(error);
+      };
+      reader.readAsDataURL(file);
+    });
+  }
+
+  /**
+   * Checks if running on Capacitor platform.
+   * @returns false, as this is not Capacitor
+   */
+  isCapacitor(): boolean {
+    return false;
+  }
+
+  /**
+   * Checks if running on Electron platform.
+   * @returns false, as this is not Electron
+   */
+  isElectron(): boolean {
+    return false;
+  }
+
+  /**
+   * Checks if running on PyWebView platform.
+   * @returns false, as this is not PyWebView
+   */
+  isPyWebView(): boolean {
+    return false;
+  }
+
+  /**
+   * Checks if running on web platform.
+   * @returns true, as this is the web implementation
+   */
+  isWeb(): boolean {
+    return true;
+  }
+
+  /**
+   * Handles deep link URLs in the web platform.
+   * Deep links are handled through URL parameters in the web environment.
+   *
+   * @param _url - The deep link URL to handle (unused in web implementation)
+   * @returns Promise that resolves immediately as web handles URLs naturally
+   */
+  async handleDeepLink(_url: string): Promise<void> {
+    // Web platform can handle deep links through URL parameters
+    return Promise.resolve();
+  }
+
+  /**
+   * Not supported in web platform.
+   * @param _fileName - Unused fileName parameter
+   * @param _content - Unused content parameter
+   * @throws Error indicating file system access is not available
+   */
+  async writeAndShareFile(_fileName: string, _content: string): Promise<void> {
+    throw new Error("File system access not available in web platform");
+  }
+
+  /**
+   * @see PlatformService.dbQuery
+   */
+  dbQuery(
+    sql: string,
+    params?: unknown[],
+  ): Promise<QueryExecResult | undefined> {
+    return databaseService.query(sql, params).then((result) => result[0]);
+  }
+
+  /**
+   * @see PlatformService.dbExec
+   */
+  dbExec(
+    sql: string,
+    params?: unknown[],
+  ): Promise<{ changes: number; lastId?: number }> {
+    return databaseService.run(sql, params);
+  }
+
+  async dbGetOneRow(
+    sql: string,
+    params?: unknown[],
+  ): Promise<unknown[] | undefined> {
+    return databaseService
+      .query(sql, params)
+      .then((result: QueryExecResult[]) => result[0]?.values[0]);
+  }
+}

src/test/index.ts

@@ -1,6 +1,7 @@
 import axios from "axios";
 import * as didJwt from "did-jwt";
-import { AppString } from "../constants/app";
+import { AppString, USE_DEXIE_DB } from "../constants/app";
+import * as databaseUtil from "../db/databaseUtil";
 import { retrieveSettingsForActiveAccount } from "../db";
 import { SERVICE_ID } from "../libs/endorserServer";
 import { deriveAddress, newIdentifier } from "../libs/crypto";
@@ -16,7 +17,10 @@ export async function testServerRegisterUser() {
 
   const identity0 = newIdentifier(addr, publicHex, privateHex, deriPath);
 
-  const settings = await retrieveSettingsForActiveAccount();
+  let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+  if (USE_DEXIE_DB) {
+    settings = await retrieveSettingsForActiveAccount();
+  }
 
   // Make a claim
   const vcClaim = {

src/types/absurd-sql.d.ts

@@ -0,0 +1,45 @@
+declare module 'absurd-sql/dist/indexeddb-backend' {
+  export default class IndexedDBBackend {
+    constructor(options?: {
+      dbName?: string;
+      storeName?: string;
+      onReady?: () => void;
+      onError?: (error: Error) => void;
+    });
+    init(): Promise<void>;
+    exec(sql: string, params?: any[]): Promise<any>;
+    close(): Promise<void>;
+  }
+}
+
+declare module 'absurd-sql/dist/indexeddb-main-thread' {
+  export function initBackend(worker: Worker): Promise<void>;
+
+  export default class IndexedDBMainThread {
+    constructor(options?: {
+      dbName?: string;
+      storeName?: string;
+      onReady?: () => void;
+      onError?: (error: Error) => void;
+    });
+    init(): Promise<void>;
+    exec(sql: string, params?: any[]): Promise<any>;
+    close(): Promise<void>;
+  }
+}
+
+declare module 'absurd-sql' {
+  export class SQLiteFS {
+    constructor(fs: unknown, backend: IndexedDBBackend);
+    init(): Promise<void>;
+    close(): Promise<void>;
+    exec(sql: string, params?: any[]): Promise<any>;
+    prepare(sql: string): Promise<any>;
+    run(sql: string, params?: any[]): Promise<any>;
+    get(sql: string, params?: any[]): Promise<any>;
+    all(sql: string, params?: any[]): Promise<any[]>;
+  }
+
+  export * from 'absurd-sql/dist/indexeddb-backend';
+  export * from 'absurd-sql/dist/indexeddb-main-thread';
+} 

src/types/deepLinks.ts

@@ -1,103 +0,0 @@
-/**
- * @file Deep Link Type Definitions and Validation Schemas
- * @author Matthew Raymer
- *
- * This file defines the type system and validation schemas for deep linking in the TimeSafari app.
- * It uses Zod for runtime validation while providing TypeScript types for compile-time checking.
- *
- * Type Strategy:
- * 1. Define base URL schema to validate the fundamental deep link structure
- * 2. Define route-specific parameter schemas with exact validation rules
- * 3. Generate TypeScript types from Zod schemas for type safety
- * 4. Export both schemas and types for use in deep link handling
- *
- * Usage:
- * - Import schemas for runtime validation in deep link handlers
- * - Import types for type-safe parameter handling in components
- * - Use DeepLinkParams type for type-safe access to route parameters
- *
- * @example
- * // Runtime validation
- * const params = deepLinkSchemas.claim.parse({ id: "123", view: "details" });
- *
- * // Type-safe parameter access
- * function handleClaimParams(params: DeepLinkParams["claim"]) {
- *   // TypeScript knows params.id exists and params.view is optional
- * }
- */
-import { z } from "zod";
-
-// Add a union type of all valid route paths
-export const VALID_DEEP_LINK_ROUTES = [
-  "user-profile",
-  "project-details",
-  "onboard-meeting-setup",
-  "invite-one-accept",
-  "contact-import",
-  "confirm-gift",
-  "claim",
-  "claim-cert",
-  "claim-add-raw",
-  "contact-edit",
-  "contacts",
-  "did",
-] as const;
-
-// Create a type from the array
-export type DeepLinkRoute = (typeof VALID_DEEP_LINK_ROUTES)[number];
-
-// Update your schema definitions to use this type
-export const baseUrlSchema = z.object({
-  scheme: z.literal("timesafari"),
-  path: z.string(),
-  queryParams: z.record(z.string()).optional(),
-});
-
-// Use the type to ensure route validation
-export const routeSchema = z.enum(VALID_DEEP_LINK_ROUTES);
-
-// Parameter validation schemas for each route type
-export const deepLinkSchemas = {
-  "user-profile": z.object({
-    id: z.string(),
-  }),
-  "project-details": z.object({
-    id: z.string(),
-  }),
-  "onboard-meeting-setup": z.object({
-    id: z.string(),
-  }),
-  "invite-one-accept": z.object({
-    id: z.string(),
-  }),
-  "contact-import": z.object({
-    jwt: z.string(),
-  }),
-  "confirm-gift": z.object({
-    id: z.string(),
-  }),
-  claim: z.object({
-    id: z.string(),
-  }),
-  "claim-cert": z.object({
-    id: z.string(),
-  }),
-  "claim-add-raw": z.object({
-    id: z.string(),
-    claim: z.string().optional(),
-    claimJwtId: z.string().optional(),
-  }),
-  "contact-edit": z.object({
-    did: z.string(),
-  }),
-  contacts: z.object({
-    contacts: z.string(), // JSON string of contacts array
-  }),
-  did: z.object({
-    id: z.string(),
-  }),
-};
-
-export type DeepLinkParams = {
-  [K in keyof typeof deepLinkSchemas]: z.infer<(typeof deepLinkSchemas)[K]>;
-};

src/types/global.d.ts

@@ -0,0 +1,36 @@
+import type { QueryExecResult, SqlValue } from "./database";
+
+declare module '@jlongster/sql.js' {
+  interface SQL {
+    Database: new (path: string, options?: { filename: boolean }) => Database;
+    FS: {
+      mkdir: (path: string) => void;
+      mount: (fs: any, options: any, path: string) => void;
+      open: (path: string, flags: string) => any;
+      close: (stream: any) => void;
+    };
+    register_for_idb: (fs: any) => void;
+  }
+
+  interface Database {
+    exec: (sql: string, params?: unknown[]) => Promise<QueryExecResult[]>;
+    run: (sql: string, params?: unknown[]) => Promise<{ changes: number; lastId?: number }>;
+    get: (sql: string, params?: unknown[]) => Promise<SqlValue[]>;
+    all: (sql: string, params?: unknown[]) => Promise<SqlValue[][]>;
+    prepare: (sql: string) => Promise<Statement>;
+    close: () => void;
+  }
+
+  interface Statement {
+    run: (params?: unknown[]) => Promise<{ changes: number; lastId?: number }>;
+    get: (params?: unknown[]) => Promise<SqlValue[]>;
+    all: (params?: unknown[]) => Promise<SqlValue[][]>;
+    finalize: () => void;
+  }
+
+  const initSqlJs: (options?: {
+    locateFile?: (file: string) => string;
+  }) => Promise<SQL>;
+
+  export default initSqlJs;
+} 

src/types/index.ts

@@ -1,25 +0,0 @@
-import { GiveSummaryRecord, GiveVerifiableCredential } from "interfaces";
-
-export interface GiveRecordWithContactInfo extends GiveSummaryRecord {
-  jwtId: string;
-  fullClaim: GiveVerifiableCredential;
-  giver: {
-    known: boolean;
-    displayName: string;
-    profileImageUrl?: string;
-  };
-  issuer: {
-    known: boolean;
-    displayName: string;
-    profileImageUrl?: string;
-  };
-  receiver: {
-    known: boolean;
-    displayName: string;
-    profileImageUrl?: string;
-  };
-  providerPlanName?: string;
-  recipientProjectName?: string;
-  description: string;
-  image?: string;
-}

src/types/modules.d.ts

@@ -0,0 +1,67 @@
+import type { QueryExecResult, SqlValue } from "./database";
+
+declare module '@jlongster/sql.js' {
+  interface SQL {
+    Database: new (path: string, options?: { filename: boolean }) => Database;
+    FS: {
+      mkdir: (path: string) => void;
+      mount: (fs: any, options: any, path: string) => void;
+      open: (path: string, flags: string) => any;
+      close: (stream: any) => void;
+    };
+    register_for_idb: (fs: any) => void;
+  }
+
+  interface Database {
+    exec: (sql: string, params?: unknown[]) => Promise<QueryExecResult[]>;
+    run: (sql: string, params?: unknown[]) => Promise<{ changes: number; lastId?: number }>;
+    get: (sql: string, params?: unknown[]) => Promise<SqlValue[]>;
+    all: (sql: string, params?: unknown[]) => Promise<SqlValue[][]>;
+    prepare: (sql: string) => Promise<Statement>;
+    close: () => void;
+  }
+
+  interface Statement {
+    run: (params?: unknown[]) => Promise<{ changes: number; lastId?: number }>;
+    get: (params?: unknown[]) => Promise<SqlValue[]>;
+    all: (params?: unknown[]) => Promise<SqlValue[][]>;
+    finalize: () => void;
+  }
+
+  const initSqlJs: (options?: {
+    locateFile?: (file: string) => string;
+  }) => Promise<SQL>;
+
+  export default initSqlJs;
+}
+
+declare module 'absurd-sql' {
+  import type { SQL } from '@jlongster/sql.js';
+  export class SQLiteFS {
+    constructor(fs: any, backend: any);
+  }
+}
+
+declare module 'absurd-sql/dist/indexeddb-backend' {
+  export default class IndexedDBBackend {
+    constructor();
+  }
+}
+
+declare module 'absurd-sql/dist/indexeddb-main-thread' {
+  import type { QueryExecResult } from './database';
+  export interface SQLiteOptions {
+    filename?: string;
+    autoLoad?: boolean;
+    debug?: boolean;
+  }
+
+  export interface SQLiteDatabase {
+    exec: (sql: string, params?: unknown[]) => Promise<QueryExecResult[]>;
+    close: () => Promise<void>;
+  }
+
+  export function initSqlJs(options?: any): Promise<any>;
+  export function createDatabase(options?: SQLiteOptions): Promise<SQLiteDatabase>;
+  export function openDatabase(options?: SQLiteOptions): Promise<SQLiteDatabase>;
+} 

src/types/sql.js.d.ts

@@ -0,0 +1,57 @@
+/**
+ * Type definitions for @jlongster/sql.js
+ * @author Matthew Raymer
+ * @description TypeScript declaration file for the SQL.js WASM module with filesystem support
+ */
+
+declare module '@jlongster/sql.js' {
+  export interface FileSystem {
+    mkdir(path: string): void;
+    mount(fs: any, opts: any, mountpoint: string): void;
+    open(path: string, flags: string): FileStream;
+    close(stream: FileStream): void;
+  }
+
+  export interface FileStream {
+    node: {
+      contents: {
+        readIfFallback(): Promise<void>;
+      };
+    };
+  }
+
+  export interface Database {
+    exec(sql: string, params?: any[]): Promise<QueryExecResult[]>;
+    prepare(sql: string): Statement;
+    run(sql: string, params?: any[]): Promise<{ changes: number; lastId?: number }>;
+    close(): void;
+  }
+
+  export interface QueryExecResult {
+    columns: string[];
+    values: any[][];
+  }
+
+  export interface Statement {
+    bind(params: any[]): void;
+    step(): boolean;
+    get(): any[];
+    getColumnNames(): string[];
+    reset(): void;
+    free(): void;
+  }
+
+  export interface InitSqlJsStatic {
+    (config?: {
+      locateFile?: (file: string) => string;
+      wasmBinary?: ArrayBuffer;
+    }): Promise<{
+      Database: new (path?: string | Uint8Array, opts?: { filename?: boolean }) => Database;
+      FS: FileSystem;
+      register_for_idb: (fs: any) => void;
+    }>;
+  }
+
+  const initSqlJs: InitSqlJsStatic;
+  export default initSqlJs;
+} 

src/utils/LogCollector.ts

@@ -0,0 +1,47 @@
+type LogLevel = "log" | "info" | "warn" | "error";
+
+interface LogEntry {
+  level: LogLevel;
+  message: unknown[];
+  timestamp: string;
+}
+
+class LogCollector {
+  private logs: LogEntry[] = [];
+  private originalConsole: Partial<
+    Record<LogLevel, (..._args: unknown[]) => void>
+  > = {};
+
+  constructor() {
+    (["log", "info", "warn", "error"] as LogLevel[]).forEach((level) => {
+      // eslint-disable-next-line no-console
+      this.originalConsole[level] = console[level];
+      // eslint-disable-next-line no-console
+      console[level] = (..._args: unknown[]) => {
+        this.logs.push({
+          level,
+          message: _args,
+          timestamp: new Date().toISOString(),
+        });
+        this.originalConsole[level]?.apply(console, _args);
+      };
+    });
+  }
+
+  getLogs(): string {
+    return this.logs
+      .map(
+        (entry) =>
+          `[${entry.timestamp}] [${entry.level.toUpperCase()}] ${entry.message
+            .map((m) => (typeof m === "object" ? JSON.stringify(m) : String(m)))
+            .join(" ")}`,
+      )
+      .join("\n");
+  }
+
+  clear() {
+    this.logs = [];
+  }
+}
+
+export const logCollector = new LogCollector();

src/utils/empty-module.js

@@ -0,0 +1,2 @@
+// Empty module to satisfy Node.js built-in module imports
+export default {};

src/utils/logger.ts

@@ -1,9 +1,9 @@
-import { logToDb } from "../db";
+import { logToDb } from "../db/databaseUtil";
 
 function safeStringify(obj: unknown) {
   const seen = new WeakSet();
 
-  return JSON.stringify(obj, (key, value) => {
+  return JSON.stringify(obj, (_key, value) => {
     if (typeof value === "object" && value !== null) {
       if (seen.has(value)) {
         return "[Circular]";
@@ -20,16 +20,43 @@ function safeStringify(obj: unknown) {
 }
 
 export const logger = {
-  log: (message: string, ...args: unknown[]) => {
+  debug: (message: string, ...args: unknown[]) => {
     if (process.env.NODE_ENV !== "production") {
+      // eslint-disable-next-line no-console
+      console.debug(message, ...args);
+      // const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
+      // logToDb(message + argsString);
+    }
+  },
+  log: (message: string, ...args: unknown[]) => {
+    if (
+      process.env.NODE_ENV !== "production" ||
+      process.env.VITE_PLATFORM === "capacitor"
+    ) {
       // eslint-disable-next-line no-console
       console.log(message, ...args);
       const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
       logToDb(message + argsString);
     }
   },
+  info: (message: string, ...args: unknown[]) => {
+    if (
+      process.env.NODE_ENV !== "production" ||
+      process.env.VITE_PLATFORM === "capacitor" ||
+      process.env.VITE_PLATFORM === "electron"
+    ) {
+      // eslint-disable-next-line no-console
+      console.info(message, ...args);
+      const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
+      logToDb(message + argsString);
+    }
+  },
   warn: (message: string, ...args: unknown[]) => {
-    if (process.env.NODE_ENV !== "production") {
+    if (
+      process.env.NODE_ENV !== "production" ||
+      process.env.VITE_PLATFORM === "capacitor" ||
+      process.env.VITE_PLATFORM === "electron"
+    ) {
       // eslint-disable-next-line no-console
       console.warn(message, ...args);
       const argsString = args.length > 0 ? " - " + safeStringify(args) : "";
@@ -44,3 +71,11 @@ export const logger = {
     logToDb(message + argsString);
   },
 };
+
+// Add CommonJS export for Electron
+if (typeof module !== "undefined" && module.exports) {
+  module.exports = { logger };
+}
+
+// Add default export for ESM
+export default { logger };

src/utils/node-modules/crypto.js

@@ -0,0 +1,17 @@
+// Minimal crypto module implementation for browser using Web Crypto API
+const crypto = {
+  ...window.crypto,
+  // Add any Node.js crypto methods that might be needed
+  randomBytes: (size) => {
+    const buffer = new Uint8Array(size);
+    window.crypto.getRandomValues(buffer);
+    return buffer;
+  },
+  createHash: () => ({
+    update: () => ({
+      digest: () => new Uint8Array(32), // Return empty hash
+    }),
+  }),
+};
+
+export default crypto;

src/utils/node-modules/fs.js

@@ -0,0 +1,18 @@
+// Minimal fs module implementation for browser
+const fs = {
+  readFileSync: () => {
+    throw new Error("fs.readFileSync is not supported in browser");
+  },
+  writeFileSync: () => {
+    throw new Error("fs.writeFileSync is not supported in browser");
+  },
+  existsSync: () => false,
+  mkdirSync: () => {},
+  readdirSync: () => [],
+  statSync: () => ({
+    isDirectory: () => false,
+    isFile: () => false,
+  }),
+};
+
+export default fs;

src/utils/node-modules/path.js

@@ -0,0 +1,13 @@
+// Minimal path module implementation for browser
+const path = {
+  resolve: (...parts) => parts.join("/"),
+  join: (...parts) => parts.join("/"),
+  dirname: (p) => p.split("/").slice(0, -1).join("/"),
+  basename: (p) => p.split("/").pop(),
+  extname: (p) => {
+    const parts = p.split(".");
+    return parts.length > 1 ? "." + parts.pop() : "";
+  },
+};
+
+export default path;

src/views/ClaimAddRawView.vue

@@ -33,8 +33,10 @@ import { Component, Vue } from "vue-facing-decorator";
 import { AxiosInstance } from "axios";
 
 import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "../constants/app";
-import { logConsoleAndDb, retrieveSettingsForActiveAccount } from "../db/index";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
+import * as databaseUtil from "../db/databaseUtil";
+import { retrieveSettingsForActiveAccount } from "../db/index";
+import { logConsoleAndDb } from "../db/databaseUtil";
 import * as serverUtil from "../libs/endorserServer";
 import * as libsUtil from "../libs/util";
 import { errorStringForLog } from "../libs/endorserServer";
@@ -77,7 +79,10 @@ export default class ClaimAddRawView extends Vue {
    * Initialize settings from active account
    */
   private async initializeSettings() {
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.activeDid = settings.activeDid || "";
     this.apiServer = settings.apiServer || "";
   }

src/views/ClaimCertificateView.vue

@@ -14,11 +14,14 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { nextTick } from "vue";
 import QRCode from "qrcode";
-import { APP_SERVER, NotificationIface } from "../constants/app";
+import { APP_SERVER, NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
+import * as databaseUtil from "../db/databaseUtil";
 import * as serverUtil from "../libs/endorserServer";
 import { GenericCredWrapper, GenericVerifiableCredential } from "../interfaces";
 import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
+import { Contact } from "@/db/tables/contacts";
 @Component
 export default class ClaimCertificateView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
@@ -32,7 +35,10 @@ export default class ClaimCertificateView extends Vue {
   serverUtil = serverUtil;
 
   async created() {
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.activeDid = settings.activeDid || "";
     this.apiServer = settings.apiServer || "";
     const pathParams = window.location.pathname.substring(
@@ -84,8 +90,17 @@ export default class ClaimCertificateView extends Vue {
     claimData: GenericCredWrapper<GenericVerifiableCredential>,
     confirmerIds: Array<string>,
   ) {
-    await db.open();
-    const allContacts = await db.contacts.toArray();
+    const platformService = PlatformServiceFactory.getInstance();
+    const dbAllContacts = await platformService.dbQuery(
+      "SELECT * FROM contacts",
+    );
+    let allContacts = databaseUtil.mapQueryResultToValues(
+      dbAllContacts,
+    ) as unknown as Contact[];
+    if (USE_DEXIE_DB) {
+      await db.open();
+      allContacts = await db.contacts.toArray();
+    }
 
     const canvas = this.$refs.claimCanvas as HTMLCanvasElement;
     if (canvas) {

src/views/ClaimReportCertificateView.vue

@@ -11,10 +11,13 @@ import { Component, Vue } from "vue-facing-decorator";
 import { nextTick } from "vue";
 import QRCode from "qrcode";
 
-import { APP_SERVER, NotificationIface } from "../constants/app";
+import { APP_SERVER, NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
+import * as databaseUtil from "../db/databaseUtil";
 import * as endorserServer from "../libs/endorserServer";
 import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
+import { Contact } from "@/db/tables/contacts";
 @Component
 export default class ClaimReportCertificateView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
@@ -28,7 +31,10 @@ export default class ClaimReportCertificateView extends Vue {
   endorserServer = endorserServer;
 
   async created() {
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.activeDid = settings.activeDid || "";
     this.apiServer = settings.apiServer || "";
     const pathParams = window.location.pathname.substring(
@@ -66,8 +72,17 @@ export default class ClaimReportCertificateView extends Vue {
   async drawCanvas(
     claimData: endorserServer.GenericCredWrapper<endorserServer.GenericVerifiableCredential>,
   ) {
-    await db.open();
-    const allContacts = await db.contacts.toArray();
+    const platformService = PlatformServiceFactory.getInstance();
+    const dbAllContacts = await platformService.dbQuery(
+      "SELECT * FROM contacts",
+    );
+    let allContacts = databaseUtil.mapQueryResultToValues(
+      dbAllContacts,
+    ) as unknown as Contact[];
+    if (USE_DEXIE_DB) {
+      await db.open();
+      allContacts = await db.contacts.toArray();
+    }
 
     const canvas = this.$refs.claimCanvas as HTMLCanvasElement;
     if (canvas) {

src/views/ClaimView.vue

@@ -206,7 +206,7 @@
 
     <div class="mt-8">
       <button
-        v-if="libsUtil.canFulfillOffer(veriClaim)"
+        v-if="libsUtil.canFulfillOffer(veriClaim, isRegistered)"
         class="col-span-1 block w-fit text-center text-md bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
         @click="openFulfillGiftDialog()"
       >
@@ -292,11 +292,7 @@
                   <div class="text-sm">
                     {{ didInfo(confirmerId) }}
                     <span v-if="!serverUtil.isEmptyOrHiddenDid(confirmerId)">
-                      <a
-                        :href="`/did/${confirmerId}`"
-                        target="_blank"
-                        class="text-blue-500"
-                      >
+                      <a :href="`/did/${confirmerId}`" class="text-blue-500">
                         <font-awesome
                           icon="arrow-up-right-from-square"
                           class="fa-fw"
@@ -333,11 +329,7 @@
                   <div class="text-sm">
                     {{ didInfo(confsVisibleTo) }}
                     <span v-if="!serverUtil.isEmptyOrHiddenDid(confsVisibleTo)">
-                      <a
-                        :href="`/did/${confsVisibleTo}`"
-                        target="_blank"
-                        class="text-blue-500"
-                      >
+                      <a :href="`/did/${confsVisibleTo}`" class="text-blue-500">
                         <font-awesome
                           icon="arrow-up-right-from-square"
                           class="fa-fw"
@@ -451,11 +443,7 @@
                   <span>
                     {{ didInfo(visDid) }}
                     <span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
-                      <a
-                        :href="`/did/${visDid}`"
-                        target="_blank"
-                        class="text-blue-500"
-                      >
+                      <a :href="`/did/${visDid}`" class="text-blue-500">
                         <font-awesome
                           icon="arrow-up-right-from-square"
                           class="fa-fw"
@@ -542,21 +530,16 @@ import { useClipboard } from "@vueuse/core";
 import { GenericVerifiableCredential } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "../constants/app";
-import {
-  db,
-  logConsoleAndDb,
-  retrieveSettingsForActiveAccount,
-} from "../db/index";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
+import * as databaseUtil from "../db/databaseUtil";
+import { db } from "../db/index";
+import { logConsoleAndDb } from "../db/databaseUtil";
 import { Contact } from "../db/tables/contacts";
 import * as serverUtil from "../libs/endorserServer";
-import {
-  GenericCredWrapper,
-  OfferVerifiableCredential,
-  ProviderInfo,
-} from "../interfaces";
+import { GenericCredWrapper, OfferClaim, ProviderInfo } from "../interfaces";
 import * as libsUtil from "../libs/util";
 import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 
 @Component({
   components: { GiftedDialog, QuickNav },
@@ -620,11 +603,24 @@ export default class ClaimView extends Vue {
   }
 
   async created() {
-    logger.log("ClaimView created");
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    }
+
     this.activeDid = settings.activeDid || "";
     this.apiServer = settings.apiServer || "";
-    this.allContacts = await db.contacts.toArray();
+    const platformService = PlatformServiceFactory.getInstance();
+    const dbAllContacts = await platformService.dbQuery(
+      "SELECT * FROM contacts",
+    );
+    this.allContacts = databaseUtil.mapQueryResultToValues(
+      dbAllContacts,
+    ) as unknown as Contact[];
+    if (USE_DEXIE_DB) {
+      await db.open();
+      this.allContacts = await db.contacts.toArray();
+    }
     this.isRegistered = settings.isRegistered || false;
 
     try {
@@ -690,7 +686,6 @@ export default class ClaimView extends Vue {
   }
 
   async loadClaim(claimId: string, userDid: string) {
-    logger.log("[ClaimView] loadClaim called with claimId:", claimId);
     const urlPath = libsUtil.isGlobalUri(claimId)
       ? "/api/claim/byHandle/"
       : "/api/claim/";
@@ -698,7 +693,6 @@ export default class ClaimView extends Vue {
     const headers = await serverUtil.getHeaders(userDid);
 
     try {
-      logger.log("[ClaimView] Making API request to:", url);
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200) {
         this.veriClaim = resp.data;
@@ -968,7 +962,7 @@ export default class ClaimView extends Vue {
   openFulfillGiftDialog() {
     const giver: libsUtil.GiverReceiverInputInfo = {
       did: libsUtil.offerGiverDid(
-        this.veriClaim as GenericCredWrapper<OfferVerifiableCredential>,
+        this.veriClaim as GenericCredWrapper<OfferClaim>,
       ),
     };
     (this.$refs.customGiveDialog as GiftedDialog).open(

src/views/ConfirmGiftView.vue

@@ -105,7 +105,6 @@
                     encodeURIComponent(giveDetails?.fulfillsPlanHandleId || '')
                   "
                   class="text-blue-500 mt-2 cursor-pointer"
-                  target="_blank"
                 >
                   This fulfills a bigger plan
                   <font-awesome
@@ -129,7 +128,6 @@
                     encodeURIComponent(giveDetails?.fulfillsHandleId || '')
                   "
                   class="text-blue-500 mt-2 cursor-pointer"
-                  target="_blank"
                 >
                   This fulfills
                   {{
@@ -438,9 +436,10 @@ import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "../constants/app";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
 import { Contact } from "../db/tables/contacts";
+import * as databaseUtil from "../db/databaseUtil";
 import * as serverUtil from "../libs/endorserServer";
 import { GenericVerifiableCredential, GiveSummaryRecord } from "../interfaces";
 import { displayAmount } from "../libs/endorserServer";
@@ -448,6 +447,7 @@ import * as libsUtil from "../libs/util";
 import { retrieveAccountDids } from "../libs/util";
 import TopMessage from "../components/TopMessage.vue";
 import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 /**
  * ConfirmGiftView Component
  *
@@ -528,10 +528,23 @@ export default class ConfirmGiftView extends Vue {
    * Initializes component settings and user data
    */
   private async initializeSettings() {
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.activeDid = settings.activeDid || "";
     this.apiServer = settings.apiServer || "";
-    this.allContacts = await db.contacts.toArray();
+    const platformService = PlatformServiceFactory.getInstance();
+    const dbAllContacts = await platformService.dbQuery(
+      "SELECT * FROM contacts",
+    );
+    this.allContacts = databaseUtil.mapQueryResultToValues(
+      dbAllContacts,
+    ) as unknown as Contact[];
+    if (USE_DEXIE_DB) {
+      await db.open();
+      this.allContacts = await db.contacts.toArray();
+    }
     this.isRegistered = settings.isRegistered || false;
     this.allMyDids = await retrieveAccountDids();
 

src/views/ContactAmountsView.vue

@@ -117,13 +117,14 @@ import { Component, Vue } from "vue-facing-decorator";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 
 import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "../constants/app";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
 import { Contact } from "../db/tables/contacts";
+import * as databaseUtil from "../db/databaseUtil";
 import {
   AgreeVerifiableCredential,
   GiveSummaryRecord,
-  GiveVerifiableCredential,
+  GiveActionClaim,
 } from "../interfaces";
 import {
   createEndorserJwtVcFromClaim,
@@ -133,6 +134,7 @@ import {
 } from "../libs/endorserServer";
 import { retrieveAccountCount } from "../libs/util";
 import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 @Component({ components: { QuickNav } })
 export default class ContactAmountssView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
@@ -154,9 +156,23 @@ export default class ContactAmountssView extends Vue {
   async created() {
     try {
       const contactDid = this.$route.query["contactDid"] as string;
-      this.contact = (await db.contacts.get(contactDid)) || null;
+      const platformService = PlatformServiceFactory.getInstance();
+      const dbContact = await platformService.dbQuery(
+        "SELECT * FROM contacts WHERE did = ?",
+        [contactDid],
+      );
+      this.contact = databaseUtil.mapQueryResultToValues(
+        dbContact,
+      )[0] as unknown as Contact;
+      if (USE_DEXIE_DB) {
+        await db.open();
+        this.contact = (await db.contacts.get(contactDid)) || null;
+      }
 
-      const settings = await retrieveSettingsForActiveAccount();
+      let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+      if (USE_DEXIE_DB) {
+        settings = await retrieveSettingsForActiveAccount();
+      }
       this.activeDid = settings?.activeDid || "";
       this.apiServer = settings?.apiServer || "";
 
@@ -260,7 +276,7 @@ export default class ContactAmountssView extends Vue {
     // Make claim
     // I use clone here because otherwise it gets a Proxy object.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const origClaim: GiveVerifiableCredential = R.clone(record.fullClaim);
+    const origClaim: GiveActionClaim = R.clone(record.fullClaim);
     if (record.fullClaim["@context"] == SCHEMA_ORG_CONTEXT) {
       delete origClaim["@context"];
     }

src/views/ContactEditView.vue

@@ -138,9 +138,13 @@ import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 
 import QuickNav from "../components/QuickNav.vue";
 import TopMessage from "../components/TopMessage.vue";
-import { AppString, NotificationIface } from "../constants/app";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
+import * as databaseUtil from "../db/databaseUtil";
+import { parseJsonField } from "../db/databaseUtil";
 import { db } from "../db/index";
+import { PlatformServiceFactory } from "../services/PlatformServiceFactory";
 import { Contact, ContactMethod } from "../db/tables/contacts";
+import { AppString } from "../constants/app";
 
 /**
  * Contact Edit View Component
@@ -188,7 +192,7 @@ export default class ContactEditView extends Vue {
   $router!: Router;
 
   /** Current contact data */
-  contact: Contact = {
+  contact: Contact | undefined = {
     did: "",
     name: "",
     notes: "",
@@ -220,7 +224,19 @@ export default class ContactEditView extends Vue {
    */
   async created() {
     const contactDid = this.$route.params.did;
-    const contact = await db.contacts.get(contactDid || "");
+    const platformService = PlatformServiceFactory.getInstance();
+    const dbContact = await platformService.dbQuery(
+      "SELECT * FROM contacts WHERE did = ?",
+      [contactDid],
+    );
+    let contact: Contact | undefined = databaseUtil.mapQueryResultToValues(
+      dbContact,
+    )[0] as unknown as Contact;
+    contact.contactMethods = parseJsonField(contact?.contactMethods, []);
+    if (USE_DEXIE_DB) {
+      await db.open();
+      contact = await db.contacts.get(contactDid || "");
+    }
     if (contact) {
       this.contact = contact;
       this.contactName = contact.name || "";
@@ -322,12 +338,24 @@ export default class ContactEditView extends Vue {
     }
 
     // Save to database
-    await db.contacts.update(this.contact.did, {
-      name: this.contactName,
-      notes: this.contactNotes,
-      contactMethods: contactMethods,
-    });
-
+    const platformService = PlatformServiceFactory.getInstance();
+    const contactMethodsString = JSON.stringify(contactMethods);
+    await platformService.dbExec(
+      "UPDATE contacts SET name = ?, notes = ?, contactMethods = ? WHERE did = ?",
+      [
+        this.contactName,
+        this.contactNotes,
+        contactMethodsString,
+        this.contact?.did || "",
+      ],
+    );
+    if (USE_DEXIE_DB) {
+      await db.contacts.update(this.contact?.did || "", {
+        name: this.contactName,
+        notes: this.contactNotes,
+        contactMethods: contactMethods,
+      });
+    }
     // Notify success and redirect
     this.$notify({
       group: "alert",
@@ -336,7 +364,7 @@ export default class ContactEditView extends Vue {
       text: "The contact info has been updated successfully.",
     });
     (this.$router as Router).push({
-      path: "/did/" + encodeURIComponent(this.contact.did),
+      path: "/did/" + encodeURIComponent(this.contact?.did || ""),
     });
   }
 }

src/views/ContactGiftingView.vue

@@ -76,11 +76,13 @@ import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import EntityIcon from "../components/EntityIcon.vue";
-import { NotificationIface } from "../constants/app";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
 import { Contact } from "../db/tables/contacts";
+import * as databaseUtil from "../db/databaseUtil";
 import { GiverReceiverInputInfo } from "../libs/util";
 import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 @Component({
   components: { GiftedDialog, QuickNav, EntityIcon },
 })
@@ -98,16 +100,29 @@ export default class ContactGiftingView extends Vue {
 
   async created() {
     try {
-      const settings = await retrieveSettingsForActiveAccount();
+      let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+      if (USE_DEXIE_DB) {
+        settings = await retrieveSettingsForActiveAccount();
+      }
       this.apiServer = settings.apiServer || "";
       this.activeDid = settings.activeDid || "";
 
-      // .orderBy("name") wouldn't retrieve any entries with a blank name
-      // .toCollection.sortBy("name") didn't sort in an order I understood
-      const baseContacts = await db.contacts.toArray();
-      this.allContacts = baseContacts.sort((a, b) =>
-        (a.name || "").localeCompare(b.name || ""),
+      const platformService = PlatformServiceFactory.getInstance();
+      const dbAllContacts = await platformService.dbQuery(
+        "SELECT * FROM contacts ORDER BY name",
       );
+      this.allContacts = databaseUtil.mapQueryResultToValues(
+        dbAllContacts,
+      ) as unknown as Contact[];
+      if (USE_DEXIE_DB) {
+        await db.open();
+        // .orderBy("name") wouldn't retrieve any entries with a blank name
+        // .toCollection.sortBy("name") didn't sort in an order I understood
+        const baseContacts = await db.contacts.toArray();
+        this.allContacts = baseContacts.sort((a, b) =>
+          (a.name || "").localeCompare(b.name || ""),
+        );
+      }
 
       this.projectId = (this.$route.query["projectId"] as string) || "";
       this.prompt = (this.$route.query["prompt"] as string) ?? this.prompt;

src/views/ContactImportView.vue

@@ -200,13 +200,20 @@ import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import QuickNav from "../components/QuickNav.vue";
 import EntityIcon from "../components/EntityIcon.vue";
 import OfferDialog from "../components/OfferDialog.vue";
-import { APP_SERVER, AppString, NotificationIface } from "../constants/app";
+import {
+  APP_SERVER,
+  AppString,
+  NotificationIface,
+  USE_DEXIE_DB,
+} from "../constants/app";
 import {
   db,
   logConsoleAndDb,
   retrieveSettingsForActiveAccount,
 } from "../db/index";
 import { Contact, ContactMethod } from "../db/tables/contacts";
+import * as databaseUtil from "../db/databaseUtil";
+import { parseJsonField } from "../db/databaseUtil";
 import * as libsUtil from "../libs/util";
 import {
   capitalizeAndInsertSpacesBeforeCaps,
@@ -215,6 +222,77 @@ import {
 } from "../libs/endorserServer";
 import { getContactJwtFromJwtUrl } from "../libs/crypto";
 import { decodeEndorserJwt } from "../libs/crypto/vc";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
+
+/**
+ * Interface for contact data as stored in the database
+ * Differs from Contact interface in that contactMethods is stored as a JSON string
+ */
+interface ContactDbRecord {
+  did: string;
+  contactMethods: string;
+  name: string;
+  notes: string;
+  profileImageUrl: string;
+  publicKeyBase64: string;
+  nextPubKeyHashB64: string;
+  seesMe: boolean;
+  registered: boolean;
+}
+
+/**
+ * Ensures a value is a string, never null or undefined
+ */
+function safeString(val: unknown): string {
+  return typeof val === "string" ? val : val == null ? "" : String(val);
+}
+
+/**
+ * Converts a Contact object to a ContactDbRecord for database storage
+ * @param contact The contact object to convert
+ * @returns A ContactDbRecord with contactMethods as a JSON string
+ * @throws Error if contact.did is missing or invalid
+ */
+function contactToDbRecord(contact: Contact): ContactDbRecord {
+  if (!contact.did) {
+    throw new Error("Contact must have a DID");
+  }
+
+  // Convert contactMethods array to JSON string, defaulting to empty array
+  const contactMethodsStr =
+    contact.contactMethods != null
+      ? JSON.stringify(contact.contactMethods)
+      : "[]";
+
+  return {
+    did: safeString(contact.did), // Required field, must be present
+    contactMethods: contactMethodsStr,
+    name: safeString(contact.name),
+    notes: safeString(contact.notes),
+    profileImageUrl: safeString(contact.profileImageUrl),
+    publicKeyBase64: safeString(contact.publicKeyBase64),
+    nextPubKeyHashB64: safeString(contact.nextPubKeyHashB64),
+    seesMe: contact.seesMe ?? false,
+    registered: contact.registered ?? false,
+  };
+}
+
+/**
+ * Converts a ContactDbRecord back to a Contact object
+ * @param record The database record to convert
+ * @returns A Contact object with parsed contactMethods array
+ */
+function dbRecordToContact(record: ContactDbRecord): Contact {
+  return {
+    ...record,
+    name: safeString(record.name),
+    notes: safeString(record.notes),
+    profileImageUrl: safeString(record.profileImageUrl),
+    publicKeyBase64: safeString(record.publicKeyBase64),
+    nextPubKeyHashB64: safeString(record.nextPubKeyHashB64),
+    contactMethods: parseJsonField(record.contactMethods, []),
+  };
+}
 
 /**
  * Contact Import View Component
@@ -337,7 +415,10 @@ export default class ContactImportView extends Vue {
    * Initializes component settings from active account
    */
   private async initializeSettings() {
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.activeDid = settings.activeDid || "";
     this.apiServer = settings.apiServer || "";
   }
@@ -401,8 +482,17 @@ export default class ContactImportView extends Vue {
     this.contactsImporting = contacts;
     this.contactsSelected = new Array(this.contactsImporting.length).fill(true);
 
-    await db.open();
-    const baseContacts = await db.contacts.toArray();
+    const platformService = PlatformServiceFactory.getInstance();
+    const dbAllContacts = await platformService.dbQuery(
+      "SELECT * FROM contacts",
+    );
+    let baseContacts = databaseUtil.mapQueryResultToValues(
+      dbAllContacts,
+    ) as unknown as Contact[];
+    if (USE_DEXIE_DB) {
+      await db.open();
+      baseContacts = await db.contacts.toArray();
+    }
 
     // Check for existing contacts and differences
     for (let i = 0; i < this.contactsImporting.length; i++) {
@@ -514,13 +604,39 @@ export default class ContactImportView extends Vue {
       if (this.contactsSelected[i]) {
         const contact = this.contactsImporting[i];
         const existingContact = this.contactsExisting[contact.did];
+        const platformService = PlatformServiceFactory.getInstance();
+
+        // Convert contact to database record format
+        const contactToStore = contactToDbRecord(contact);
+
         if (existingContact) {
-          await db.contacts.update(contact.did, contact);
+          // Update existing contact
+          const { sql, params } = databaseUtil.generateUpdateStatement(
+            contactToStore as unknown as Record<string, unknown>,
+            "contacts",
+            "did = ?",
+            [contact.did],
+          );
+          await platformService.dbExec(sql, params);
+          if (USE_DEXIE_DB) {
+            // For Dexie, we need to parse the contactMethods back to an array
+            await db.contacts.update(
+              contact.did,
+              dbRecordToContact(contactToStore),
+            );
+          }
           updatedCount++;
         } else {
-          // without explicit clone on the Proxy, we get: DataCloneError: Failed to execute 'add' on 'IDBObjectStore': #<Object> could not be cloned.
-          // DataError: Failed to execute 'add' on 'IDBObjectStore': Evaluating the object store's key path yielded a value that is not a valid key.
-          await db.contacts.add(R.clone(contact));
+          // Add new contact
+          const { sql, params } = databaseUtil.generateInsertStatement(
+            contactToStore as unknown as Record<string, unknown>,
+            "contacts",
+          );
+          await platformService.dbExec(sql, params);
+          if (USE_DEXIE_DB) {
+            // For Dexie, we need to parse the contactMethods back to an array
+            await db.contacts.add(dbRecordToContact(contactToStore));
+          }
           importedCount++;
         }
       }

src/views/ContactQRScanFullView.vue

@@ -0,0 +1,615 @@
+<template>
+  <!-- CONTENT -->
+  <section id="Content" class="relative w-[100vw] h-[100vh]">
+    <div
+      class="p-6 bg-white w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto"
+    >
+      <div class="mb-4">
+        <h1 class="text-xl text-center font-semibold relative">
+          <!-- Back -->
+          <a
+            class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+            @click="handleBack"
+          >
+            <font-awesome icon="chevron-left" class="fa-fw" />
+          </a>
+
+          <!-- Quick Help -->
+          <a
+            class="text-xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
+            @click="toastQRCodeHelp()"
+          >
+            <font-awesome icon="circle-question" class="fa-fw" />
+          </a>
+
+          Share Contact Info
+        </h1>
+      </div>
+
+      <div
+        v-if="!givenName"
+        class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mt-4"
+      >
+        <p class="mb-2">
+          <b>Note:</b> your identity currently does <b>not</b> include a name.
+        </p>
+        <button
+          class="inline-block text-md uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-4 py-2 rounded-md"
+          @click="openUserNameDialog"
+        >
+          Set Your Name
+        </button>
+      </div>
+
+      <UserNameDialog ref="userNameDialog" />
+
+      <div
+        v-if="activeDid && activeDid.startsWith(ETHR_DID_PREFIX)"
+        class="block w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto mt-4"
+        @click="onCopyUrlToClipboard()"
+      >
+        <!--
+          Play with display options: https://qr-code-styling.com/
+          See docs: https://www.npmjs.com/package/qr-code-generator-vue3
+        -->
+        <QRCodeVue3
+          :value="qrValue"
+          :width="606"
+          :height="606"
+          :corners-square-options="{ type: 'square' }"
+          :dots-options="{ type: 'square', color: '#000' }"
+        />
+      </div>
+
+      <div v-else-if="activeDid" class="text-center mt-4">
+        <!-- Not an ETHR DID so force them to paste it. (Passkey Peer DIDs are too big.) -->
+        <span class="text-blue-500" @click="onCopyDidToClipboard()">
+          Click here to copy your DID to your clipboard.
+        </span>
+        <span>
+          Then give it to them so they can paste it in their list of People.
+        </span>
+      </div>
+
+      <div v-else class="text-center mt-4">
+        You have no identitifiers yet, so
+        <router-link
+          :to="{ name: 'start' }"
+          class="bg-blue-500 text-white px-1.5 py-1 rounded-md"
+        >
+          create your identifier.
+        </router-link>
+        <br />
+        If you don't do that first, these contacts won't see your activity.
+      </div>
+    </div>
+
+    <div
+      class="relative w-full max-w-[calc((100vh-env(safe-area-inset-top)-env(safe-area-inset-bottom))*0.4)] mx-auto border border-dashed border-white mt-8 aspect-square"
+    >
+      <p
+        class="absolute top-0 left-0 right-0 bg-black bg-opacity-50 text-white text-sm text-center py-2 z-10"
+      >
+        Position QR code in the frame
+      </p>
+
+      <p
+        v-if="error"
+        class="absolute bottom-0 left-0 right-0 bg-black bg-opacity-50 text-sm text-center py-2 z-20 text-rose-400"
+      >
+        {{ error }}
+      </p>
+    </div>
+  </section>
+</template>
+
+<script lang="ts">
+import QRCodeVue3 from "qr-code-generator-vue3";
+import { Component, Vue } from "vue-facing-decorator";
+import { Router } from "vue-router";
+import { useClipboard } from "@vueuse/core";
+
+import { logger } from "../utils/logger";
+import { QRScannerFactory } from "../services/QRScanner/QRScannerFactory";
+import QuickNav from "../components/QuickNav.vue";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
+import { db } from "../db/index";
+import { Contact } from "../db/tables/contacts";
+import { getContactJwtFromJwtUrl } from "../libs/crypto";
+import { decodeEndorserJwt, ETHR_DID_PREFIX } from "../libs/crypto/vc";
+import { retrieveSettingsForActiveAccount } from "../db/index";
+import * as databaseUtil from "../db/databaseUtil";
+import { setVisibilityUtil } from "../libs/endorserServer";
+import UserNameDialog from "../components/UserNameDialog.vue";
+import { generateEndorserJwtUrlForAccount } from "../libs/endorserServer";
+import { retrieveAccountMetadata } from "../libs/util";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
+import { parseJsonField } from "../db/databaseUtil";
+
+interface QRScanResult {
+  rawValue?: string;
+  barcode?: string;
+}
+
+interface IUserNameDialog {
+  open: (callback: (name: string) => void) => void;
+}
+
+@Component({
+  components: {
+    QuickNav,
+    QRCodeVue3,
+    UserNameDialog,
+  },
+})
+export default class ContactQRScan extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+  $router!: Router;
+
+  isScanning = false;
+  error: string | null = null;
+  activeDid = "";
+  apiServer = "";
+  givenName = "";
+  qrValue = "";
+  ETHR_DID_PREFIX = ETHR_DID_PREFIX;
+
+  // Add new properties to track scanning state
+  private lastScannedValue: string = "";
+  private lastScanTime: number = 0;
+  private readonly SCAN_DEBOUNCE_MS = 5000; // Increased from 2000 to 5000ms to better handle mobile scanning
+
+  // Add cleanup tracking
+  private isCleaningUp = false;
+  private isMounted = false;
+
+  async created() {
+    try {
+      let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+      if (USE_DEXIE_DB) {
+        settings = await retrieveSettingsForActiveAccount();
+      }
+      this.activeDid = settings.activeDid || "";
+      this.apiServer = settings.apiServer || "";
+      this.givenName = settings.firstName || "";
+
+      const account = await retrieveAccountMetadata(this.activeDid);
+      if (account) {
+        const name =
+          (settings.firstName || "") +
+          (settings.lastName ? ` ${settings.lastName}` : "");
+        this.qrValue = await generateEndorserJwtUrlForAccount(
+          account,
+          !!settings.isRegistered,
+          name,
+          settings.profileImageUrl || "",
+          false,
+        );
+      }
+    } catch (error) {
+      logger.error("Error initializing component:", {
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+      });
+      this.$notify({
+        group: "alert",
+        type: "danger",
+        title: "Initialization Error",
+        text: "Failed to initialize QR scanner. Please try again.",
+      });
+    }
+  }
+
+  async startScanning() {
+    if (this.isCleaningUp) {
+      logger.debug("Cannot start scanning during cleanup");
+      return;
+    }
+
+    try {
+      this.error = null;
+      this.isScanning = true;
+      this.lastScannedValue = "";
+      this.lastScanTime = 0;
+
+      const scanner = QRScannerFactory.getInstance();
+
+      // Check if scanning is supported first
+      if (!(await scanner.isSupported())) {
+        this.error =
+          "Camera access requires HTTPS. Please use a secure connection.";
+        this.isScanning = false;
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "HTTPS Required",
+            text: "Camera access requires a secure (HTTPS) connection",
+          },
+          5000,
+        );
+        return;
+      }
+
+      // Check permissions first
+      if (!(await scanner.checkPermissions())) {
+        const granted = await scanner.requestPermissions();
+        if (!granted) {
+          this.error = "Camera permission denied";
+          this.isScanning = false;
+          // Show notification for better visibility
+          this.$notify(
+            {
+              group: "alert",
+              type: "warning",
+              title: "Camera Access Required",
+              text: "Camera permission denied",
+            },
+            5000,
+          );
+          return;
+        }
+      }
+
+      // Add scan listener
+      scanner.addListener({
+        onScan: this.onScanDetect,
+        onError: this.onScanError,
+      });
+
+      // Start scanning
+      await scanner.startScan();
+    } catch (error) {
+      this.error = error instanceof Error ? error.message : String(error);
+      this.isScanning = false;
+      logger.error("Error starting scan:", {
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+      });
+    }
+  }
+
+  async stopScanning() {
+    try {
+      const scanner = QRScannerFactory.getInstance();
+      await scanner.stopScan();
+    } catch (error) {
+      logger.error("Error stopping scan:", {
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+      });
+    } finally {
+      this.isScanning = false;
+      this.lastScannedValue = "";
+      this.lastScanTime = 0;
+    }
+  }
+
+  async cleanupScanner() {
+    if (this.isCleaningUp) {
+      return;
+    }
+
+    this.isCleaningUp = true;
+    try {
+      logger.info("Cleaning up QR scanner resources");
+      await this.stopScanning();
+      await QRScannerFactory.cleanup();
+    } catch (error) {
+      logger.error("Error during scanner cleanup:", {
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+      });
+    } finally {
+      this.isCleaningUp = false;
+    }
+  }
+
+  /**
+   * Handle QR code scan result with debouncing to prevent duplicate scans
+   */
+  async onScanDetect(result: string | QRScanResult) {
+    try {
+      // Extract raw value from different possible formats
+      const rawValue =
+        typeof result === "string"
+          ? result
+          : result?.rawValue || result?.barcode;
+      if (!rawValue) {
+        logger.warn("Invalid scan result - no value found:", result);
+        return;
+      }
+
+      // Debounce duplicate scans
+      const now = Date.now();
+      if (
+        rawValue === this.lastScannedValue &&
+        now - this.lastScanTime < this.SCAN_DEBOUNCE_MS
+      ) {
+        logger.info("Ignoring duplicate scan:", rawValue);
+        return;
+      }
+
+      // Update scan tracking
+      this.lastScannedValue = rawValue;
+      this.lastScanTime = now;
+
+      logger.info("Processing QR code scan result:", rawValue);
+
+      // Extract JWT
+      const jwt = getContactJwtFromJwtUrl(rawValue);
+      if (!jwt) {
+        logger.warn("Invalid QR code format - no JWT found in URL");
+        this.$notify({
+          group: "alert",
+          type: "danger",
+          title: "Invalid QR Code",
+          text: "This QR code does not contain valid contact information. Please scan a TimeSafari contact QR code.",
+        });
+        return;
+      }
+
+      // Process JWT and contact info
+      logger.info("Decoding JWT payload from QR code");
+      const decodedJwt = await decodeEndorserJwt(jwt);
+      if (!decodedJwt?.payload?.own) {
+        logger.warn("Invalid JWT payload - missing 'own' field");
+        this.$notify({
+          group: "alert",
+          type: "danger",
+          title: "Invalid Contact Info",
+          text: "The contact information is incomplete or invalid.",
+        });
+        return;
+      }
+
+      const contactInfo = decodedJwt.payload.own;
+      const did = contactInfo.did || decodedJwt.payload.iss;
+      if (!did) {
+        logger.warn("Invalid contact info - missing DID");
+        this.$notify({
+          group: "alert",
+          type: "danger",
+          title: "Invalid Contact",
+          text: "The contact DID is missing.",
+        });
+        return;
+      }
+
+      // Create contact object
+      const contact = {
+        did: did,
+        name: contactInfo.name || "",
+        email: contactInfo.email || "",
+        phone: contactInfo.phone || "",
+        company: contactInfo.company || "",
+        title: contactInfo.title || "",
+        notes: contactInfo.notes || "",
+      };
+
+      // Add contact but keep scanning
+      logger.info("Adding new contact to database:", {
+        did: contact.did,
+        name: contact.name,
+      });
+      await this.addNewContact(contact);
+    } catch (error) {
+      logger.error("Error processing contact QR code:", {
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+      });
+      this.$notify({
+        group: "alert",
+        type: "danger",
+        title: "Error",
+        text:
+          error instanceof Error
+            ? error.message
+            : "Could not process QR code. Please try again.",
+      });
+    }
+  }
+
+  onScanError(error: Error) {
+    this.error = error.message;
+    logger.error("QR code scan error:", {
+      error: error.message,
+      stack: error.stack,
+    });
+  }
+
+  async setVisibility(contact: Contact, visibility: boolean) {
+    const result = await setVisibilityUtil(
+      this.activeDid,
+      this.apiServer,
+      this.axios,
+      db,
+      contact,
+      visibility,
+    );
+    if (result.error) {
+      this.$notify({
+        group: "alert",
+        type: "danger",
+        title: "Error Setting Visibility",
+        text: result.error as string,
+      });
+    } else if (!result.success) {
+      logger.warn("Unexpected result from setting visibility:", result);
+    }
+  }
+
+  async addNewContact(contact: Contact) {
+    try {
+      logger.info("Opening database connection for new contact");
+
+      // Check if contact already exists
+      const platformService = PlatformServiceFactory.getInstance();
+      const dbAllContacts = await platformService.dbQuery(
+        "SELECT * FROM contacts WHERE did = ?",
+        [contact.did],
+      );
+      const existingContacts = databaseUtil.mapQueryResultToValues(
+        dbAllContacts,
+      ) as unknown as Contact[];
+      let existingContact: Contact | undefined = existingContacts[0];
+      if (USE_DEXIE_DB) {
+        await db.open();
+        const existingContacts = await db.contacts.toArray();
+        existingContact = existingContacts.find((c) => c.did === contact.did);
+      }
+
+      if (existingContact) {
+        logger.info("Contact already exists", { did: contact.did });
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Contact Exists",
+            text: "This contact has already been added to your list.",
+          },
+          3000,
+        );
+        return;
+      }
+
+      // Add new contact
+      // @ts-expect-error because we're just using the value to store to the DB
+      contact.contactMethods = JSON.stringify(
+        parseJsonField(contact.contactMethods, []),
+      );
+      const { sql, params } = databaseUtil.generateInsertStatement(
+        contact as unknown as Record<string, unknown>,
+        "contacts",
+      );
+      await platformService.dbExec(sql, params);
+      if (USE_DEXIE_DB) {
+        await db.contacts.add(contact);
+      }
+
+      if (this.activeDid) {
+        logger.info("Setting contact visibility", { did: contact.did });
+        await this.setVisibility(contact, true);
+        contact.seesMe = true;
+      }
+
+      this.$notify(
+        {
+          group: "alert",
+          type: "success",
+          title: "Contact Added",
+          text: this.activeDid
+            ? "They were added, and your activity is visible to them."
+            : "They were added.",
+        },
+        3000,
+      );
+    } catch (error) {
+      logger.error("Error saving contact to database:", {
+        did: contact.did,
+        error: error instanceof Error ? error.message : String(error),
+        stack: error instanceof Error ? error.stack : undefined,
+      });
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Contact Error",
+          text: "Could not save contact. Check if it already exists.",
+        },
+        5000,
+      );
+    }
+  }
+
+  // Lifecycle hooks
+  mounted() {
+    this.isMounted = true;
+    document.addEventListener("pause", this.handleAppPause);
+    document.addEventListener("resume", this.handleAppResume);
+    this.startScanning(); // Automatically start scanning when view is mounted
+  }
+
+  beforeDestroy() {
+    this.isMounted = false;
+    document.removeEventListener("pause", this.handleAppPause);
+    document.removeEventListener("resume", this.handleAppResume);
+    this.cleanupScanner();
+  }
+
+  async handleAppPause() {
+    if (!this.isMounted) return;
+
+    logger.info("App paused, stopping scanner");
+    await this.stopScanning();
+  }
+
+  handleAppResume() {
+    if (!this.isMounted) return;
+
+    logger.info("App resumed, scanner can be restarted by user");
+    this.isScanning = false;
+  }
+
+  async handleBack() {
+    await this.cleanupScanner();
+    this.$router.back();
+  }
+
+  toastQRCodeHelp() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "QR Code Help",
+        text: "Click the QR code to copy your contact info to your clipboard.",
+      },
+      5000,
+    );
+  }
+
+  onCopyUrlToClipboard() {
+    useClipboard()
+      .copy(this.qrValue)
+      .then(() => {
+        this.$notify(
+          {
+            group: "alert",
+            type: "toast",
+            title: "Copied",
+            text: "Contact URL was copied to clipboard.",
+          },
+          2000,
+        );
+      });
+  }
+
+  onCopyDidToClipboard() {
+    useClipboard()
+      .copy(this.activeDid)
+      .then(() => {
+        this.$notify(
+          {
+            group: "alert",
+            type: "info",
+            title: "Copied",
+            text: "Your DID was copied to the clipboard. Have them paste it in the box on their 'People' screen to add you.",
+          },
+          5000,
+        );
+      });
+  }
+
+  openUserNameDialog() {
+    (this.$refs.userNameDialog as IUserNameDialog).open((name: string) => {
+      this.givenName = name;
+    });
+  }
+}
+</script>
+
+<style scoped>
+.aspect-square {
+  aspect-ratio: 1 / 1;
+}
+</style>

src/views/ContactScanView.vue

@@ -1,92 +0,0 @@
-<template>
-  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
-    <div id="ViewBreadcrumb" class="mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
-        <!-- Cancel -->
-        <router-link
-          :to="{ name: 'account' }"
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
-        </router-link>
-
-        Scan Contact
-      </h1>
-    </div>
-
-    <h3 class="text-sm uppercase font-semibold mb-2">Scan a QR Code…</h3>
-    <div class="bg-black rounded overflow-hidden relative mb-4">
-      <img src="https://picsum.photos/400/400?random=1" class="w-full" />
-
-      <!-- Darken overlay -->
-      <!-- Top -->
-      <div class="absolute top-0 left-0 right-0 bg-black/50 h-1/4"></div>
-      <!-- Reft -->
-      <div class="absolute top-1/4 bottom-1/4 left-0 bg-black/50 w-1/4"></div>
-      <!-- Right -->
-      <div class="absolute top-1/4 bottom-1/4 right-0 bg-black/50 w-1/4"></div>
-      <!-- Bottom -->
-      <div class="absolute bottom-0 left-0 right-0 bg-black/50 h-1/4"></div>
-
-      <!-- Reticle overlay -->
-      <!-- Top-left -->
-      <div
-        class="absolute top-1/4 left-1/4 h-6 w-6 border-white border-t-4 border-l-4 drop-shadow"
-      ></div>
-      <!-- Top-right -->
-      <div
-        class="absolute top-1/4 right-1/4 h-6 w-6 border-white border-t-4 border-r-4 drop-shadow"
-      ></div>
-      <!-- Bottom-left -->
-      <div
-        class="absolute bottom-1/4 left-1/4 h-6 w-6 border-white border-b-4 border-l-4 drop-shadow"
-      ></div>
-      <!-- Bottom-right -->
-      <div
-        class="absolute bottom-1/4 right-1/4 h-6 w-6 border-white border-b-4 border-r-4 drop-shadow"
-      ></div>
-    </div>
-
-    <h3 class="text-sm uppercase font-semibold mb-2">…or Enter Contact Data</h3>
-    <input
-      type="text"
-      placeholder="Name (optional)"
-      class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-    />
-    <input
-      type="text"
-      placeholder="ID"
-      class="block w-full rounded border border-slate-400 mb-2 px-3 py-2"
-    />
-    <input
-      type="text"
-      placeholder="Public Key (optional)"
-      class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
-    />
-
-    <div class="mt-8">
-      <div class="grid grid-cols-1 sm:grid-cols-2 gap-2">
-        <input
-          type="submit"
-          class="block w-full text-center text-lg font-bold uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-3 rounded-md"
-          value="Look Up Contact"
-        />
-        <button
-          type="button"
-          class="block w-full text-center text-md uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
-        >
-          Cancel
-        </button>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
-
-@Component({
-  components: {},
-})
-export default class ContactScanView extends Vue {}
-</script>

src/views/ContactsView.vue

@@ -12,7 +12,7 @@
       <span />
       <span>
         <a
-          href="/help-onboarding"
+          :href="APP_SERVER + '/help-onboarding'"
           target="_blank"
           class="text-xs uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md ml-1"
         >
@@ -54,27 +54,22 @@
           />
         </span>
         <span
-          class="flex items-center bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
+          class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
         >
           <font-awesome
             icon="chair"
             class="fa-fw text-2xl"
-            @click="
-              warning(
-                'You must get registered before you can initiate an onboarding meeting.',
-                'Not Registered',
-              )
-            "
+            @click="$router.push({ name: 'onboard-meeting-list' })"
           />
         </span>
       </span>
 
-      <router-link
-        :to="{ name: 'contact-qr' }"
+      <button
         class="flex items-center bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 mr-1 rounded-md"
+        @click="handleQRCodeClick"
       >
         <font-awesome icon="qrcode" class="fa-fw text-2xl" />
-      </router-link>
+      </button>
 
       <textarea
         v-model="contactInput"
@@ -83,7 +78,7 @@
         class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2 h-10"
       />
       <button
-        class="px-4 rounded-r bg-green-200 border border-l-0 border-green-400"
+        class="px-4 rounded-r bg-green-200 border border-green-400"
         @click="onClickNewContact()"
       >
         <font-awesome icon="plus" class="fa-fw" />
@@ -91,8 +86,8 @@
     </div>
 
     <div v-if="contacts.length > 0" class="flex justify-between">
-      <div class="w-full text-left">
-        <div v-if="!showGiveNumbers">
+      <div class="">
+        <div v-if="!showGiveNumbers" class="flex items-center">
           <input
             type="checkbox"
             :checked="contactsSelected.length === contacts.length"
@@ -106,52 +101,33 @@
           />
           <button
             v-if="!showGiveNumbers"
-            href=""
-            class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
-            :style="
+            :class="
               contactsSelected.length > 0
-                ? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
-                : 'background-image: linear-gradient(to bottom, #94a3b8, #374151);'
+                ? 'text-md bg-gradient-to-b from-blue-400 to-blue-700 ' +
+                  'shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ' +
+                  'ml-3 px-3 py-1.5 rounded-md cursor-pointer'
+                : 'text-md bg-gradient-to-b from-slate-400 to-slate-700 ' +
+                  'shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-slate-300 ' +
+                  'ml-3 px-3 py-1.5 rounded-md cursor-not-allowed'
             "
             data-testId="copySelectedContactsButtonTop"
             @click="copySelectedContacts()"
           >
-            Copy Selections
-          </button>
-          <button @click="showCopySelectionsInfo()">
-            <font-awesome
-              icon="circle-info"
-              class="text-xl text-blue-500 ml-4"
-            />
+            Copy
           </button>
+          <font-awesome
+            icon="circle-info"
+            class="text-2xl text-blue-500 ml-2"
+            @click="showCopySelectionsInfo()"
+          />
         </div>
       </div>
 
-      <div class="w-full text-right">
+      <div class="flex items-center gap-2">
         <button
+          v-if="showGiveNumbers"
           href=""
-          class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
-          @click="toggleShowContactAmounts()"
-        >
-          {{
-            showGiveNumbers ? "Hide Hours, Offer, etc" : "See Hours, Offer, etc"
-          }}
-        </button>
-      </div>
-    </div>
-    <div v-if="showGiveNumbers" class="flex justify-between mt-1">
-      <div class="w-full text-right">
-        In the following, only the most recent hours are included. To see more,
-        click
-        <span
-          class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 py-1 rounded-md"
-        >
-          <font-awesome icon="file-lines" class="fa-fw" />
-        </span>
-        <br />
-        <button
-          href=""
-          class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md mt-1"
+          class="text-md bg-gradient-to-b shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
           :class="showGiveAmountsClassNames()"
           @click="toggleShowGiveTotals()"
         >
@@ -164,6 +140,25 @@
           }}
           <font-awesome icon="left-right" class="fa-fw" />
         </button>
+
+        <button
+          href=""
+          class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-3 py-1.5 rounded-md"
+          @click="toggleShowContactAmounts()"
+        >
+          {{ showGiveNumbers ? "Hide Actions" : "See Actions" }}
+        </button>
+      </div>
+    </div>
+    <div v-if="showGiveNumbers" class="my-3">
+      <div class="w-full text-center text-sm italic text-slate-600">
+        Only the most recent hours are included. <br />To see more, click
+        <span
+          class="text-sm uppercase bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1 py-0.5 rounded"
+        >
+          <font-awesome icon="file-lines" class="text-xs fa-fw" />
+        </span>
+        <br />
       </div>
     </div>
 
@@ -171,7 +166,7 @@
     <ul
       v-if="contacts.length > 0"
       id="listContacts"
-      class="border-t border-slate-300 mt-1"
+      class="border-t border-slate-300 my-2"
     >
       <li
         v-for="contact in filteredContacts()"
@@ -179,8 +174,8 @@
         class="border-b border-slate-300 pt-1 pb-1"
         data-testId="contactListItem"
       >
-        <div class="grow overflow-hidden">
-          <div class="flex items-center gap-3">
+        <div class="flex items-center justify-between gap-3">
+          <div class="flex overflow-hidden min-w-0 items-center gap-3">
             <input
               v-if="!showGiveNumbers"
               type="checkbox"
@@ -200,16 +195,23 @@
             <EntityIcon
               :contact="contact"
               :icon-size="48"
-              class="inline-block align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
+              class="shrink-0 align-text-bottom border border-slate-300 rounded cursor-pointer overflow-hidden"
               @click="showLargeIdenticon = contact"
             />
 
-            <h2 class="text-base font-semibold w-1/3 truncate flex-shrink-0">
-              {{ contactNameNonBreakingSpace(contact.name) }}
-            </h2>
+            <div class="overflow-hidden">
+              <h2 class="text-base font-semibold truncate">
+                <router-link
+                  :to="{
+                    path: '/did/' + encodeURIComponent(contact.did),
+                  }"
+                  title="See more about this person"
+                >
+                  {{ contactNameNonBreakingSpace(contact.name) }}
+                </router-link>
+              </h2>
 
-            <span>
-              <div class="flex gap-2 items-center">
+              <div class="flex gap-1.5 items-center overflow-hidden">
                 <router-link
                   :to="{
                     path: '/did/' + encodeURIComponent(contact.did),
@@ -218,63 +220,63 @@
                 >
                   <font-awesome
                     icon="circle-info"
-                    class="text-xl text-blue-500"
+                    class="text-base text-blue-500"
                   />
                 </router-link>
 
-                <span class="text-sm overflow-hidden">{{
-                  libsUtil.shortDid(contact.did)
-                }}</span>
+                <span class="text-xs truncate">{{ contact.did }}</span>
               </div>
               <div class="text-sm">
                 {{ contact.notes }}
               </div>
-            </span>
+            </div>
           </div>
+
           <div
             v-if="showGiveNumbers && contact.did != activeDid"
-            class="ml-auto flex gap-1.5 mt-2"
+            class="flex gap-1.5 items-end"
           >
-            <button
-              class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-l-md"
-              :title="givenToMeDescriptions[contact.did] || ''"
-              @click="confirmShowGiftedDialog(contact.did, activeDid)"
-            >
-              From:
-              <br />
-              {{
-                /* eslint-disable prettier/prettier */
-                showGiveTotals
-                  ? ((givenToMeConfirmed[contact.did] || 0)
-                      + (givenToMeUnconfirmed[contact.did] || 0))
-                  : showGiveConfirmed
-                      ? (givenToMeConfirmed[contact.did] || 0)
-                      : (givenToMeUnconfirmed[contact.did] || 0)
-                /* eslint-enable prettier/prettier */
-              }}
-            </button>
+            <div class="text-center">
+              <div class="text-xs leading-none mb-1">From/To</div>
+              <div class="flex items-center">
+                <button
+                  class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2.5 py-1.5 rounded-l-md"
+                  :title="givenToMeDescriptions[contact.did] || ''"
+                  @click="confirmShowGiftedDialog(contact.did, activeDid)"
+                >
+                  {{
+                    /* eslint-disable prettier/prettier */
+                    showGiveTotals
+                      ? ((givenToMeConfirmed[contact.did] || 0)
+                          + (givenToMeUnconfirmed[contact.did] || 0))
+                      : showGiveConfirmed
+                          ? (givenToMeConfirmed[contact.did] || 0)
+                          : (givenToMeUnconfirmed[contact.did] || 0)
+                    /* eslint-enable prettier/prettier */
+                  }}
+                </button>
+
+                <button
+                  class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2.5 py-1.5 rounded-r-md border-l"
+                  :title="givenByMeDescriptions[contact.did] || ''"
+                  @click="confirmShowGiftedDialog(activeDid, contact.did)"
+                >
+                  {{
+                    /* eslint-disable prettier/prettier */
+                    showGiveTotals
+                      ? ((givenByMeConfirmed[contact.did] || 0)
+                        + (givenByMeUnconfirmed[contact.did] || 0))
+                      : showGiveConfirmed
+                          ? (givenByMeConfirmed[contact.did] || 0)
+                          : (givenByMeUnconfirmed[contact.did] || 0)
+                    /* eslint-enable prettier/prettier */
+                  }}
+                </button>
+              </div>
+            </div>
 
             <button
-              class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white -ml-1.5 px-2 py-1.5 rounded-r-md border-l"
-              :title="givenByMeDescriptions[contact.did] || ''"
-              @click="confirmShowGiftedDialog(activeDid, contact.did)"
-            >
-              To:
-              <br />
-              {{
-                /* eslint-disable prettier/prettier */
-                showGiveTotals
-                  ? ((givenByMeConfirmed[contact.did] || 0)
-                    + (givenByMeUnconfirmed[contact.did] || 0))
-                  : showGiveConfirmed
-                      ? (givenByMeConfirmed[contact.did] || 0)
-                      : (givenByMeUnconfirmed[contact.did] || 0)
-                /* eslint-enable prettier/prettier */
-              }}
-            </button>
-
-            <button
-              class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-blue-400"
+              class="text-sm bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md"
               data-testId="offerButton"
               @click="openOfferDialog(contact.did, contact.name)"
             >
@@ -286,10 +288,10 @@
                 name: 'contact-amounts',
                 query: { contactDid: contact.did },
               }"
-              class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md border border-slate-400"
+              class="text-sm bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-2 py-1.5 rounded-md"
               title="See more given activity"
             >
-              <fa icon="file-lines" class="fa-fw" />
+              <font-awesome icon="file-lines" class="fa-fw" />
             </router-link>
           </div>
         </div>
@@ -312,16 +314,18 @@
       />
       <button
         v-if="!showGiveNumbers"
-        href=""
-        class="text-md bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ml-3 px-3 py-1.5 rounded-md"
-        :style="
+        :class="
           contactsSelected.length > 0
-            ? 'background-image: linear-gradient(to bottom, #3b82f6, #1e40af);'
-            : 'background-image: linear-gradient(to bottom, #94a3b8, #374151);'
+            ? 'text-md bg-gradient-to-b from-blue-400 to-blue-700 ' +
+              'shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white ' +
+              'ml-3 px-3 py-1.5 rounded-md cursor-pointer'
+            : 'text-md bg-gradient-to-b from-slate-400 to-slate-700 ' +
+              'shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-slate-300 ' +
+              'ml-3 px-3 py-1.5 rounded-md cursor-not-allowed'
         "
         @click="copySelectedContacts()"
       >
-        Copy Selections
+        Copy
       </button>
     </div>
 
@@ -353,6 +357,7 @@ import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
 import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
+import { Capacitor } from "@capacitor/core";
 
 import QuickNav from "../components/QuickNav.vue";
 import EntityIcon from "../components/EntityIcon.vue";
@@ -360,7 +365,12 @@ import GiftedDialog from "../components/GiftedDialog.vue";
 import OfferDialog from "../components/OfferDialog.vue";
 import ContactNameDialog from "../components/ContactNameDialog.vue";
 import TopMessage from "../components/TopMessage.vue";
-import { APP_SERVER, AppString, NotificationIface } from "../constants/app";
+import {
+  APP_SERVER,
+  AppString,
+  NotificationIface,
+  USE_DEXIE_DB,
+} from "../constants/app";
 import {
   db,
   logConsoleAndDb,
@@ -369,6 +379,7 @@ import {
   updateDefaultSettings,
 } from "../db/index";
 import { Contact } from "../db/tables/contacts";
+import * as databaseUtil from "../db/databaseUtil";
 import { getContactJwtFromJwtUrl } from "../libs/crypto";
 import { decodeEndorserJwt } from "../libs/crypto/vc";
 import {
@@ -389,6 +400,7 @@ import {
 import * as libsUtil from "../libs/util";
 import { generateSaveAndActivateIdentity } from "../libs/util";
 import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 @Component({
   components: {
     GiftedDialog,
@@ -433,12 +445,16 @@ export default class ContactsView extends Vue {
   showGiveConfirmed = true;
   showLargeIdenticon?: Contact;
 
+  APP_SERVER = APP_SERVER;
   AppString = AppString;
   libsUtil = libsUtil;
 
   public async created() {
-    await db.open();
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      await db.open();
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.activeDid = settings.activeDid || "";
     this.apiServer = settings.apiServer || "";
     this.isRegistered = !!settings.isRegistered;
@@ -456,12 +472,22 @@ export default class ContactsView extends Vue {
       this.loadGives();
     }
 
-    // .orderBy("name") wouldn't retrieve any entries with a blank name
-    // .toCollection.sortBy("name") didn't sort in an order I understood
-    const baseContacts = await db.contacts.toArray();
-    this.contacts = baseContacts.sort((a, b) =>
-      (a.name || "").localeCompare(b.name || ""),
+    const platformService = PlatformServiceFactory.getInstance();
+    const dbAllContacts = await platformService.dbQuery(
+      "SELECT * FROM contacts ORDER BY name",
     );
+    this.contacts = databaseUtil.mapQueryResultToValues(
+      dbAllContacts,
+    ) as unknown as Contact[];
+    if (USE_DEXIE_DB) {
+      await db.open();
+      // .orderBy("name") wouldn't retrieve any entries with a blank name
+      // .toCollection.sortBy("name") didn't sort in an order I understood
+      const baseContacts = await db.contacts.toArray();
+      this.contacts = baseContacts.sort((a, b) =>
+        (a.name || "").localeCompare(b.name || ""),
+      );
+    }
   }
 
   private async processContactJwt() {
@@ -518,7 +544,12 @@ export default class ContactsView extends Vue {
         if (response.status != 201) {
           throw { error: { response: response } };
         }
-        await updateAccountSettings(this.activeDid, { isRegistered: true });
+        await databaseUtil.updateDidSpecificSettings(this.activeDid, {
+          isRegistered: true,
+        });
+        if (USE_DEXIE_DB) {
+          await updateAccountSettings(this.activeDid, { isRegistered: true });
+        }
         this.isRegistered = true;
         this.$notify(
           {
@@ -819,12 +850,22 @@ export default class ContactsView extends Vue {
         this.danger("An error occurred. Some contacts may have been added.");
       }
 
-      // .orderBy("name") wouldn't retrieve any entries with a blank name
-      // .toCollection.sortBy("name") didn't sort in an order I understood
-      const baseContacts = await db.contacts.toArray();
-      this.contacts = baseContacts.sort((a, b) =>
-        (a.name || "").localeCompare(b.name || ""),
+      const platformService = PlatformServiceFactory.getInstance();
+      const dbAllContacts = await platformService.dbQuery(
+        "SELECT * FROM contacts ORDER BY name",
       );
+      this.contacts = databaseUtil.mapQueryResultToValues(
+        dbAllContacts,
+      ) as unknown as Contact[];
+      if (USE_DEXIE_DB) {
+        await db.open();
+        // .orderBy("name") wouldn't retrieve any entries with a blank name
+        // .toCollection.sortBy("name") didn't sort in an order I understood
+        const baseContacts = await db.contacts.toArray();
+        this.contacts = baseContacts.sort((a, b) =>
+          (a.name || "").localeCompare(b.name || ""),
+        );
+      }
       return;
     }
 
@@ -933,7 +974,15 @@ export default class ContactsView extends Vue {
       seesMe,
       registered,
     };
-    return db.contacts.add(newContact);
+    const platformService = PlatformServiceFactory.getInstance();
+    const { sql, params } = databaseUtil.generateInsertStatement(
+      newContact as unknown as Record<string, unknown>,
+      "contacts",
+    );
+    await platformService.dbExec(sql, params);
+    if (USE_DEXIE_DB) {
+      await db.contacts.add(newContact);
+    }
   }
 
   private async addContact(newContact: Contact) {
@@ -945,8 +994,18 @@ export default class ContactsView extends Vue {
       this.danger("The DID must begin with 'did:'", "Invalid DID");
       return;
     }
-    return db.contacts
-      .add(newContact)
+
+    const platformService = PlatformServiceFactory.getInstance();
+    const { sql, params } = databaseUtil.generateInsertStatement(
+      newContact as unknown as Record<string, unknown>,
+      "contacts",
+    );
+    let contactPromise = platformService.dbExec(sql, params);
+    if (USE_DEXIE_DB) {
+      // @ts-expect-error since the result of this promise won't be used, and this will go away soon
+      contactPromise = db.contacts.add(newContact);
+    }
+    return contactPromise
       .then(() => {
         const allContacts = this.contacts.concat([newContact]);
         this.contacts = R.sort(
@@ -974,17 +1033,27 @@ export default class ContactsView extends Vue {
                   text: "Do you want to register them?",
                   onCancel: async (stopAsking?: boolean) => {
                     if (stopAsking) {
-                      await updateDefaultSettings({
+                      await databaseUtil.updateDefaultSettings({
                         hideRegisterPromptOnNewContact: stopAsking,
                       });
+                      if (USE_DEXIE_DB) {
+                        await updateDefaultSettings({
+                          hideRegisterPromptOnNewContact: stopAsking,
+                        });
+                      }
                       this.hideRegisterPromptOnNewContact = stopAsking;
                     }
                   },
                   onNo: async (stopAsking?: boolean) => {
                     if (stopAsking) {
-                      await updateDefaultSettings({
+                      await databaseUtil.updateDefaultSettings({
                         hideRegisterPromptOnNewContact: stopAsking,
                       });
+                      if (USE_DEXIE_DB) {
+                        await updateDefaultSettings({
+                          hideRegisterPromptOnNewContact: stopAsking,
+                        });
+                      }
                       this.hideRegisterPromptOnNewContact = stopAsking;
                     }
                   },
@@ -1062,7 +1131,14 @@ export default class ContactsView extends Vue {
       );
       if (regResult.success) {
         contact.registered = true;
-        await db.contacts.update(contact.did, { registered: true });
+        const platformService = PlatformServiceFactory.getInstance();
+        await platformService.dbExec(
+          "UPDATE contacts SET registered = ? WHERE did = ?",
+          [true, contact.did],
+        );
+        if (USE_DEXIE_DB) {
+          await db.contacts.update(contact.did, { registered: true });
+        }
 
         this.$notify(
           {
@@ -1271,9 +1347,14 @@ export default class ContactsView extends Vue {
   private async toggleShowContactAmounts() {
     const newShowValue = !this.showGiveNumbers;
     try {
-      await updateDefaultSettings({
+      await databaseUtil.updateDefaultSettings({
         showContactGivesInline: newShowValue,
       });
+      if (USE_DEXIE_DB) {
+        await updateDefaultSettings({
+          showContactGivesInline: newShowValue,
+        });
+      }
     } catch (err) {
       const fullError =
         "Error updating contact-amounts setting: " + errorStringForLog(err);
@@ -1438,5 +1519,13 @@ export default class ContactsView extends Vue {
       );
     }
   }
+
+  private handleQRCodeClick() {
+    if (Capacitor.isNativePlatform()) {
+      this.$router.push({ name: "contact-qr-scan-full" });
+    } else {
+      this.$router.push({ name: "contact-qr" });
+    }
+  }
 }
 </script>

src/views/DIDView.vue

@@ -232,15 +232,16 @@ import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import QuickNav from "../components/QuickNav.vue";
 import InfiniteScroll from "../components/InfiniteScroll.vue";
 import TopMessage from "../components/TopMessage.vue";
-import { NotificationIface } from "../constants/app";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
 import { Contact } from "../db/tables/contacts";
 import { BoundingBox } from "../db/tables/settings";
+import * as databaseUtil from "../db/databaseUtil";
 import {
   GenericCredWrapper,
   GenericVerifiableCredential,
-  GiveVerifiableCredential,
-  OfferVerifiableCredential,
+  GiveActionClaim,
+  OfferClaim,
 } from "../interfaces";
 import {
   capitalizeAndInsertSpacesBeforeCaps,
@@ -253,6 +254,7 @@ import {
 import * as libsUtil from "../libs/util";
 import EntityIcon from "../components/EntityIcon.vue";
 import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 
 /**
  * DIDView Component
@@ -323,7 +325,10 @@ export default class DIDView extends Vue {
    * Initializes component settings from active account
    */
   private async initializeSettings() {
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.activeDid = settings.activeDid || "";
     this.apiServer = settings.apiServer || "";
   }
@@ -370,7 +375,17 @@ export default class DIDView extends Vue {
   private async loadContactInformation() {
     if (!this.viewingDid) return;
 
-    this.contactFromDid = await db.contacts.get(this.viewingDid);
+    const platformService = PlatformServiceFactory.getInstance();
+    const dbContacts = await platformService.dbQuery(
+      "SELECT * FROM contacts WHERE did = ?",
+      [this.viewingDid],
+    );
+    this.contactFromDid = databaseUtil.mapQueryResultToValues(
+      dbContacts,
+    )[0] as unknown as Contact;
+    if (USE_DEXIE_DB) {
+      this.contactFromDid = await db.contacts.get(this.viewingDid);
+    }
     if (this.contactFromDid) {
       this.contactYaml = yaml.dump(this.contactFromDid);
     }
@@ -433,8 +448,14 @@ export default class DIDView extends Vue {
    * @param contact - Contact object to be deleted
    */
   async deleteContact(contact: Contact) {
-    await db.open();
-    await db.contacts.delete(contact.did);
+    const platformService = PlatformServiceFactory.getInstance();
+    await platformService.dbExec("DELETE FROM contacts WHERE did = ?", [
+      contact.did,
+    ]);
+    if (USE_DEXIE_DB) {
+      await db.open();
+      await db.contacts.delete(contact.did);
+    }
     this.$notify(
       {
         group: "alert",
@@ -492,7 +513,14 @@ export default class DIDView extends Vue {
       );
       if (regResult.success) {
         contact.registered = true;
-        await db.contacts.update(contact.did, { registered: true });
+        const platformService = PlatformServiceFactory.getInstance();
+        await platformService.dbExec(
+          "UPDATE contacts SET registered = ? WHERE did = ?",
+          [true, contact.did],
+        );
+        if (USE_DEXIE_DB) {
+          await db.contacts.update(contact.did, { registered: true });
+        }
 
         this.$notify(
           {
@@ -629,7 +657,7 @@ export default class DIDView extends Vue {
    */
   public claimAmount(claim: GenericVerifiableCredential) {
     if (claim.claimType === "GiveAction") {
-      const giveClaim = claim.claim as GiveVerifiableCredential;
+      const giveClaim = claim.claim as GiveActionClaim;
       if (giveClaim.object?.unitCode && giveClaim.object?.amountOfThisGood) {
         return displayAmount(
           giveClaim.object.unitCode,
@@ -639,7 +667,7 @@ export default class DIDView extends Vue {
         return "";
       }
     } else if (claim.claimType === "Offer") {
-      const offerClaim = claim.claim as OfferVerifiableCredential;
+      const offerClaim = claim.claim as OfferClaim;
       if (
         offerClaim.includesObject?.unitCode &&
         offerClaim.includesObject?.amountOfThisGood
@@ -781,7 +809,14 @@ export default class DIDView extends Vue {
         const visibility = resp.data;
         contact.seesMe = visibility;
         //console.log("Visi check:", visibility, contact.seesMe, contact.did);
-        await db.contacts.update(contact.did, { seesMe: visibility });
+        const platformService = PlatformServiceFactory.getInstance();
+        await platformService.dbExec(
+          "UPDATE contacts SET seesMe = ? WHERE did = ?",
+          [visibility, contact.did],
+        );
+        if (USE_DEXIE_DB) {
+          await db.contacts.update(contact.did, { seesMe: visibility });
+        }
 
         this.$notify(
           {

src/views/DeepLinkErrorView.vue

@@ -41,8 +41,8 @@
 <script setup lang="ts">
 import { computed, onMounted } from "vue";
 import { useRoute, useRouter } from "vue-router";
-import { VALID_DEEP_LINK_ROUTES } from "../types/deepLinks";
-import { logConsoleAndDb } from "../db";
+import { VALID_DEEP_LINK_ROUTES } from "../interfaces/deepLinks";
+import { logConsoleAndDb } from "../db/databaseUtil";
 import { logger } from "../utils/logger";
 
 const route = useRoute();

src/views/DiscoverView.vue

@@ -11,30 +11,9 @@
 
     <OnboardingDialog ref="onboardingDialog" />
 
-    <!-- Quick Search -->
-    <div
-      id="QuickSearch"
-      class="mt-8 mb-4 flex"
-      :style="{ visibility: isSearchVisible ? 'visible' : 'hidden' }"
-    >
-      <input
-        v-model="searchTerms"
-        type="text"
-        placeholder="Search…"
-        class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
-        @keyup.enter="searchSelected()"
-      />
-      <button
-        class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
-        @click="searchSelected()"
-      >
-        <font-awesome icon="magnifying-glass" class="fa-fw"></font-awesome>
-      </button>
-    </div>
-
     <!-- Result Tabs -->
     <!-- Top Level Selection -->
-    <div class="text-center text-slate-500 border-b border-slate-300 mb-4">
+    <div class="text-center text-slate-500 border-b border-slate-300 mt-4 mb-2">
       <ul class="flex flex-wrap justify-center gap-4 -mb-px">
         <li>
           <a
@@ -146,6 +125,27 @@
       </ul>
     </div>
 
+    <!-- Quick Search -->
+    <div
+      id="QuickSearch"
+      class="mt-6 mb-4 flex"
+      :style="{ display: isSearchVisible ? 'flex' : 'none' }"
+    >
+      <input
+        v-model="searchTerms"
+        type="text"
+        placeholder="Search…"
+        class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
+        @keyup.enter="searchSelected()"
+      />
+      <button
+        class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
+        @click="searchSelected()"
+      >
+        <font-awesome icon="magnifying-glass" class="fa-fw"></font-awesome>
+      </button>
+    </div>
+
     <div v-if="isLocalActive">
       <div class="text-center">
         <button
@@ -159,9 +159,10 @@
     </div>
 
     <div v-if="isMappedActive && !tempSearchBox">
-      <div class="mt-4 h-96 w-5/6 mx-auto">
+      <div class="mt-6 h-96 w-full mx-auto">
         <l-map
           ref="projectMap"
+          class="z-40"
           @ready="onMapReady"
           @moveend="onMoveEnd"
           @movestart="onMoveStart"
@@ -197,14 +198,19 @@
           -->
         </span>
         <span v-else-if="isAnywhereActive"
-          >No projects were found with that search.</span
+          >No {{ isProjectsActive ? "projects" : "people" }} were found with
+          that search.</span
         >
       </p>
     </div>
 
     <!-- Results List -->
     <InfiniteScroll @reached-bottom="loadMoreData">
-      <ul id="listDiscoverResults">
+      <ul
+        v-if="projects.length > 0 || userProfiles.length > 0"
+        id="listDiscoverResults"
+        class="border-t border-slate-300 mt-6"
+      >
         <!-- Projects List -->
         <template v-if="isProjectsActive">
           <li
@@ -317,6 +323,7 @@ import TopMessage from "../components/TopMessage.vue";
 import {
   NotificationIface,
   DEFAULT_PARTNER_API_SERVER,
+  USE_DEXIE_DB,
 } from "../constants/app";
 import {
   db,
@@ -325,6 +332,7 @@ import {
 } from "../db/index";
 import { Contact } from "../db/tables/contacts";
 import { BoundingBox } from "../db/tables/settings";
+import * as databaseUtil from "../db/databaseUtil";
 import { PlanData } from "../interfaces";
 import {
   didInfo,
@@ -333,6 +341,8 @@ import {
 } from "../libs/endorserServer";
 import { OnboardPage, retrieveAccountDids } from "../libs/util";
 import { logger } from "../utils/logger";
+import { UserProfile } from "@/libs/partnerServer";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
 interface Tile {
   indexLat: number;
   indexLon: number;
@@ -392,14 +402,22 @@ export default class DiscoverView extends Vue {
 
     const searchPeople = !!this.$route.query["searchPeople"];
 
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.activeDid = (settings.activeDid as string) || "";
     this.apiServer = (settings.apiServer as string) || "";
     this.partnerApiServer =
       (settings.partnerApiServer as string) || this.partnerApiServer;
     this.searchBox = settings.searchBoxes?.[0] || null;
 
-    this.allContacts = await db.contacts.toArray();
+    const platformService = PlatformServiceFactory.getInstance();
+    const dbContacts = await platformService.dbQuery("SELECT * FROM contacts");
+    this.allContacts = databaseUtil.mapQueryResultToValues(dbContacts) as unknown as Contact[];
+    if (USE_DEXIE_DB) {
+      this.allContacts = await db.contacts.toArray();
+    }
 
     this.allMyDids = await retrieveAccountDids();
 

src/views/GiftedDetailsView.vue

@@ -93,7 +93,7 @@
         />
       </span>
     </div>
-    <ImageMethodDialog ref="imageDialog" />
+    <ImageMethodDialog ref="imageDialog" default-camera-mode="environment" />
 
     <div class="mt-4 flex justify-between gap-2">
       <!-- First Column for Giver -->
@@ -215,11 +215,6 @@
       </div>
     </div>
 
-    <div class="mt-8 flex">
-      <input v-model="isTrade" type="checkbox" class="h-6 w-6 mr-2" />
-      <label class="text-sm mt-1">This was a trade (not a gift)</label>
-    </div>
-
     <div v-if="showGeneralAdvanced" class="mt-4 flex">
       <router-link
         :to="{
@@ -266,9 +261,14 @@ import { RouteLocationNormalizedLoaded, Router } from "vue-router";
 import ImageMethodDialog from "../components/ImageMethodDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import TopMessage from "../components/TopMessage.vue";
-import { DEFAULT_IMAGE_API_SERVER, NotificationIface } from "../constants/app";
+import {
+  DEFAULT_IMAGE_API_SERVER,
+  NotificationIface,
+  USE_DEXIE_DB,
+} from "../constants/app";
 import { db, retrieveSettingsForActiveAccount } from "../db/index";
-import { GenericCredWrapper, GiveVerifiableCredential } from "../interfaces";
+import * as databaseUtil from "../db/databaseUtil";
+import { GenericCredWrapper, GiveActionClaim } from "../interfaces";
 import {
   createAndSubmitGive,
   didInfo,
@@ -280,6 +280,8 @@ import {
 import * as libsUtil from "../libs/util";
 import { retrieveAccountDids } from "../libs/util";
 import { logger } from "../utils/logger";
+import { PlatformServiceFactory } from "@/services/PlatformServiceFactory";
+import { Contact } from "@/db/tables/contacts";
 
 @Component({
   components: {
@@ -307,10 +309,9 @@ export default class GiftedDetails extends Vue {
   giverName = "";
   hideBackButton = false;
   imageUrl = "";
-  isTrade = false;
   message = "";
   offerId = "";
-  prevCredToEdit?: GenericCredWrapper<GiveVerifiableCredential>;
+  prevCredToEdit?: GenericCredWrapper<GiveActionClaim>;
   providerProjectId = "";
   providerProjectName = "a project";
   providedByProject = false; // basically static, based on input; if we allow changing then let's fix things (see below)
@@ -327,7 +328,7 @@ export default class GiftedDetails extends Vue {
       this.prevCredToEdit = (this.$route.query["prevCredToEdit"] as string)
         ? (JSON.parse(
             this.$route.query["prevCredToEdit"] as string,
-          ) as GenericCredWrapper<GiveVerifiableCredential>)
+          ) as GenericCredWrapper<GiveActionClaim>)
         : undefined;
     } catch (error) {
       this.$notify(
@@ -427,7 +428,10 @@ export default class GiftedDetails extends Vue {
       this.imageUrl = this.$route.query["shareUrl"] as string;
     }
 
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
     this.apiServer = settings.apiServer || "";
     this.activeDid = settings.activeDid || "";
 
@@ -435,7 +439,16 @@ export default class GiftedDetails extends Vue {
       (this.giverDid && !this.giverName) ||
       (this.recipientDid && !this.recipientName)
     ) {
-      const allContacts = await db.contacts.toArray();
+      const platformService = PlatformServiceFactory.getInstance();
+      const dbContacts = await platformService.dbQuery(
+        "SELECT * FROM contacts",
+      );
+      let allContacts = databaseUtil.mapQueryResultToValues(
+        dbContacts,
+      ) as unknown as Contact[];
+      if (USE_DEXIE_DB) {
+        allContacts = await db.contacts.toArray();
+      }
       const allMyDids = await retrieveAccountDids();
       if (this.giverDid && !this.giverName) {
         this.giverName = didInfo(
@@ -790,7 +803,7 @@ export default class GiftedDetails extends Vue {
           this.unitCode,
           fulfillsProjectId,
           this.offerId,
-          this.isTrade,
+          false,
           this.imageUrl,
           this.providerProjectId,
         );
@@ -806,16 +819,13 @@ export default class GiftedDetails extends Vue {
           this.unitCode,
           fulfillsProjectId,
           this.offerId,
-          this.isTrade,
+          false,
           this.imageUrl,
           this.providerProjectId,
         );
       }
 
-      if (
-        result.type === "error" ||
-        this.isGiveCreationError(result.response)
-      ) {
+      if (!result.success) {
         const errorMessage = this.getGiveCreationErrorMessage(result);
         logger.error("Error with give creation result:", result);
         this.$notify(
@@ -833,7 +843,7 @@ export default class GiftedDetails extends Vue {
             group: "alert",
             type: "success",
             title: "Success",
-            text: `That ${this.isTrade ? "trade" : "gift"} was recorded.`,
+            text: `That gift was recorded.`,
           },
           3000,
         );
@@ -870,7 +880,7 @@ export default class GiftedDetails extends Vue {
       ? this.fulfillsProjectId
       : undefined;
     const giveClaim = hydrateGive(
-      this.prevCredToEdit?.claim as GiveVerifiableCredential,
+      this.prevCredToEdit?.claim as GiveActionClaim,
       giverDid,
       recipientDid,
       this.description,
@@ -878,7 +888,7 @@ export default class GiftedDetails extends Vue {
       this.unitCode,
       fulfillsProjectId,
       this.offerId,
-      this.isTrade,
+      false,
       this.imageUrl,
       this.providerProjectId,
       this.prevCredToEdit?.id as string,
@@ -889,15 +899,6 @@ export default class GiftedDetails extends Vue {
 
   // Helper functions for readability
 
-  /**
-   * @param result response "data" from the server
-   * @returns true if the result indicates an error
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  isGiveCreationError(result: any) {
-    return result.status !== 201 || result.data?.error;
-  }
-
   /**
    * @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data")
    * @returns best guess at an error message

src/views/HelpNotificationsView.vue

@@ -308,13 +308,15 @@
 import { Component, Vue } from "vue-facing-decorator";
 
 import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "../constants/app";
+import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
 import { DIRECT_PUSH_TITLE, sendTestThroughPushServer } from "../libs/util";
 import PushNotificationPermission from "../components/PushNotificationPermission.vue";
 import { db } from "../db/index";
 import { MASTER_SETTINGS_KEY } from "../db/tables/settings";
+import * as databaseUtil from "../db/databaseUtil";
 import { Router } from "vue-router";
 import { logger } from "../utils/logger";
+
 @Component({ components: { PushNotificationPermission, QuickNav } })
 export default class HelpNotificationsView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
@@ -420,10 +422,16 @@ export default class HelpNotificationsView extends Vue {
       DIRECT_PUSH_TITLE,
       async (success: boolean, timeText: string, message?: string) => {
         if (success) {
-          await db.settings.update(MASTER_SETTINGS_KEY, {
+          databaseUtil.updateDefaultSettings({
             notifyingReminderMessage: message,
             notifyingReminderTime: timeText,
           });
+          if (USE_DEXIE_DB) {
+            await db.settings.update(MASTER_SETTINGS_KEY, {
+              notifyingReminderMessage: message,
+              notifyingReminderTime: timeText,
+            });
+          }
           this.notifyingReminder = true;
           this.notifyingReminderMessage = message || "";
           this.notifyingReminderTime = timeText;

src/views/HelpOnboardingView.vue

@@ -114,5 +114,5 @@ import { Component, Vue } from "vue-facing-decorator";
 import QuickNav from "../components/QuickNav.vue";
 
 @Component({ components: { QuickNav } })
-export default class Help extends Vue {}
+export default class HelpOnboardingView extends Vue {}
 </script>

src/views/HelpView.vue

@@ -211,11 +211,11 @@
 
       <h2 class="text-xl font-semibold">How do I add someone else?</h2>
       <p>
-        <a href="/help-onboarding" target="_blank" class="text-blue-500">
+        <a :href="APP_SERVER + '/help-onboarding'" target="_blank" class="text-blue-500">
           Use these instructions.
         </a>
         To start scanning, go to the
-        <router-link class="text-blue-500" to="/contact-qr">contact-scanning page.</router-link>
+        <span class="text-blue-500 cursor-pointer" @click="handleQRCodeClick">contact-scanning page.</span>
       </p>
       <p>
         If they are not nearby to scan QR codes, you each can tap on the QR code
@@ -502,27 +502,27 @@
         then don't use it.
         <br />
         As for data & privacy:
-        <ul class="list-disc list-outside ml-4">
-          <li>
-            If using notifications, a server stores push token data. That can be revoked at any time
-            by disabling notifications on the Profile <font-awesome icon="circle-user" class="fa-fw" /> page.
-          </li>
-          <li>
-            If sending images, a server stores them, too. They can be removed by editing the claim
-            and deleting them.
-          </li>
-          <li>
-            If sending other partner system data (eg. to Trustroots) a public key and message
-            data are stored on a server. Those can be removed via direct personal request.
-          </li>
-          <li>
-            For all other claim data,
-            <a href="https://endorser.ch/privacy-policy" target="_blank" class="text-blue-500">
-              the Endorser Service has this Privacy Policy.
-            </a>
-          </li>
-        </ul>
       </p>
+      <ul class="list-disc list-outside ml-4">
+        <li>
+          If using notifications, a server stores push token data. That can be revoked at any time
+          by disabling notifications on the Profile <font-awesome icon="circle-user" class="fa-fw" /> page.
+        </li>
+        <li>
+          If sending images, a server stores them, too. They can be removed by editing the claim
+          and deleting them.
+        </li>
+        <li>
+          If sending other partner system data (eg. to Trustroots) a public key and message
+          data are stored on a server. Those can be removed via direct personal request.
+        </li>
+        <li>
+          For all other claim data,
+          <a href="https://endorser.ch/privacy-policy" target="_blank" class="text-blue-500">
+            the Endorser Service has this Privacy Policy.
+          </a>
+        </li>
+      </ul>
 
       <h2 class="text-xl font-semibold">How can I contribute?</h2>
       <p>
@@ -549,8 +549,8 @@
       <h2 class="text-xl font-semibold">Where can I read more?</h2>
       <p>
         This is part of the
-        <a href="https://livesofgiving.org" target="_blank" class="text-blue-500">
-          Lives of Giving
+        <a href="https://livesofimpact.org" target="_blank" class="text-blue-500">
+          Lives of Impact
         </a>
         initiative.
       </p>
@@ -576,17 +576,19 @@
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
 import { useClipboard } from "@vueuse/core";
+import { Capacitor } from "@capacitor/core";
 
 import * as Package from "../../package.json";
 import QuickNav from "../components/QuickNav.vue";
-import { NotificationIface } from "../constants/app";
+import { APP_SERVER, NotificationIface, USE_DEXIE_DB } from "../constants/app";
+import * as databaseUtil from "../db/databaseUtil";
 import {
   retrieveSettingsForActiveAccount,
   updateAccountSettings,
 } from "../db/index";
 
 @Component({ components: { QuickNav } })
-export default class Help extends Vue {
+export default class HelpView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
   $router!: Router;
 
@@ -600,6 +602,11 @@ export default class Help extends Vue {
   showDidCopy = false;
   showVerifiable = false;
 
+  APP_SERVER = APP_SERVER;
+
+  // Ideally, we put no functionality in here, especially in the setup,
+  // because we never want this page to have a chance of throwing an error.
+
   // call fn, copy text to the clipboard, then redo fn after 2 seconds
   doCopyTwoSecRedo(text: string, fn: () => void) {
     fn();
@@ -609,13 +616,30 @@ export default class Help extends Vue {
   }
 
   async unsetFinishedOnboarding() {
-    const settings = await retrieveSettingsForActiveAccount();
+    let settings = await databaseUtil.retrieveSettingsForActiveAccount();
+    if (USE_DEXIE_DB) {
+      settings = await retrieveSettingsForActiveAccount();
+    }
+
     if (settings.activeDid) {
-      await updateAccountSettings(settings.activeDid, {
+      await databaseUtil.updateDidSpecificSettings(settings.activeDid, {
         finishedOnboarding: false,
       });
+      if (USE_DEXIE_DB) {
+        await updateAccountSettings(settings.activeDid, {
+          finishedOnboarding: false,
+        });
+      }
     }
     this.$router.push({ name: "home" });
   }
+
+  private handleQRCodeClick() {
+    if (Capacitor.isNativePlatform()) {
+      this.$router.push({ name: "contact-qr-scan-full" });
+    } else {
+      this.$router.push({ name: "contact-qr" });
+    }
+  }
 }
 </script>