Merge branch 'master' into gifting-periphery-improvements

src/components/GiftedDialog.vue

@@ -853,7 +853,7 @@ export default class GiftedDialog extends Vue {
       );
 
       if (!result.success) {
-        const errorMessage = this.getGiveCreationErrorMessage(result);
+        const errorMessage = result.error;
         logger.error("Error with give creation result:", result);
         this.$notify(
           {
@@ -899,19 +899,6 @@ export default class GiftedDialog extends Vue {
 
   // Helper functions for readability
 
-  /**
-   * @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data")
-   * @returns best guess at an error message
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  getGiveCreationErrorMessage(result: any) {
-    return (
-      result.error?.userMessage ||
-      result.error?.error ||
-      result.response?.data?.error?.message
-    );
-  }
-
   explainData() {
     this.$notify(
       {

src/components/HiddenDidDialog.vue

@@ -48,12 +48,15 @@
                   <span>
                     {{ didInfo(visDid) }}
                     <span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
-                      <a :href="`/did/${visDid}`" class="text-blue-500">
+                      <router-link
+                        :to="{ path: '/did/' + encodeURIComponent(visDid) }"
+                        class="text-blue-500"
+                      >
                         <font-awesome
                           icon="arrow-up-right-from-square"
                           class="fa-fw"
                         />
-                      </a>
+                      </router-link>
                     </span>
                   </span>
                 </div>
@@ -74,7 +77,7 @@
             If you'd like an introduction,
             <a
               class="text-blue-500"
-              @click="copyToClipboard('A link to this page', windowLocation)"
+              @click="copyToClipboard('A link to this page', deepLinkUrl)"
               >click here to copy this page, paste it into a message, and ask if
               they'll tell you more about the {{ roleName }}.</a
             >
@@ -101,7 +104,7 @@ import * as R from "ramda";
 import { useClipboard } from "@vueuse/core";
 import { Contact } from "../db/tables/contacts";
 import * as serverUtil from "../libs/endorserServer";
-import { NotificationIface } from "../constants/app";
+import { APP_SERVER, NotificationIface } from "../constants/app";
 
 @Component
 export default class HiddenDidDialog extends Vue {
@@ -114,7 +117,8 @@ export default class HiddenDidDialog extends Vue {
   activeDid = "";
   allMyDids: Array<string> = [];
   canShare = false;
-  windowLocation = window.location.href;
+  deepLinkPathSuffix = "";
+  deepLinkUrl = window.location.href; // this is changed to a deep link in the setup
 
   R = R;
   serverUtil = serverUtil;
@@ -126,17 +130,21 @@ export default class HiddenDidDialog extends Vue {
   }
 
   open(
+    deepLinkPathSuffix: string,
     roleName: string,
     visibleToDids: string[],
     allContacts: Array<Contact>,
     activeDid: string,
     allMyDids: Array<string>,
   ) {
+    this.deepLinkPathSuffix = deepLinkPathSuffix;
     this.roleName = roleName;
     this.visibleToDids = visibleToDids;
     this.allContacts = allContacts;
     this.activeDid = activeDid;
     this.allMyDids = allMyDids;
+
+    this.deepLinkUrl = APP_SERVER + "/deep-link/" + this.deepLinkPathSuffix;
     this.isOpen = true;
   }
 
@@ -170,11 +178,11 @@ export default class HiddenDidDialog extends Vue {
   }
 
   onClickShareClaim() {
-    this.copyToClipboard("A link to this page", this.windowLocation);
+    this.copyToClipboard("A link to this page", this.deepLinkUrl);
     window.navigator.share({
       title: "Help Connect Me",
       text: "I'm trying to find the people who recorded this. Can you help me?",
-      url: this.windowLocation,
+      url: this.deepLinkUrl,
     });
   }
 }

src/components/IconRenderer.vue

@@ -0,0 +1,90 @@
+<template>
+  <svg
+    v-if="iconData"
+    :class="svgClass"
+    :fill="fill"
+    :stroke="stroke"
+    :viewBox="viewBox"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path v-for="(path, index) in iconData.paths" :key="index" v-bind="path" />
+  </svg>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-facing-decorator";
+import icons from "../assets/icons.json";
+import { logger } from "../utils/logger";
+
+/**
+ * Icon path interface
+ */
+interface IconPath {
+  d: string;
+  fillRule?: string;
+  clipRule?: string;
+  strokeLinecap?: string;
+  strokeLinejoin?: string;
+  strokeWidth?: string | number;
+  fill?: string;
+  stroke?: string;
+}
+
+/**
+ * Icon data interface
+ */
+interface IconData {
+  paths: IconPath[];
+}
+
+/**
+ * Icons JSON structure
+ */
+interface IconsJson {
+  [key: string]: IconPath | IconData;
+}
+
+/**
+ * Icon Renderer Component
+ *
+ * This component loads SVG icon definitions from a JSON file and renders them
+ * as SVG elements. It provides a clean way to use icons without cluttering
+ * templates with long SVG path definitions.
+ *
+ * @author Matthew Raymer
+ * @version 1.0.0
+ * @since 2024
+ */
+@Component({
+  name: "IconRenderer",
+})
+export default class IconRenderer extends Vue {
+  @Prop({ required: true }) readonly iconName!: string;
+  @Prop({ default: "h-5 w-5" }) readonly svgClass!: string;
+  @Prop({ default: "none" }) readonly fill!: string;
+  @Prop({ default: "currentColor" }) readonly stroke!: string;
+  @Prop({ default: "0 0 24 24" }) readonly viewBox!: string;
+
+  /**
+   * Get the icon data for the specified icon name
+   *
+   * @returns {IconData | null} The icon data object or null if not found
+   */
+  get iconData(): IconData | null {
+    const icon = (icons as IconsJson)[this.iconName];
+    if (!icon) {
+      logger.warn(`Icon "${this.iconName}" not found in icons.json`);
+      return null;
+    }
+
+    // Convert single path to array format for consistency
+    if ("d" in icon) {
+      return {
+        paths: [icon as IconPath],
+      };
+    }
+
+    return icon as IconData;
+  }
+}
+</script>

src/components/OfferDialog.vue

@@ -83,10 +83,7 @@
 import { Vue, Component, Prop } from "vue-facing-decorator";
 
 import { NotificationIface, USE_DEXIE_DB } from "../constants/app";
-import {
-  createAndSubmitOffer,
-  serverMessageForUser,
-} from "../libs/endorserServer";
+import { createAndSubmitOffer } from "../libs/endorserServer";
 import * as libsUtil from "../libs/util";
 import * as databaseUtil from "../db/databaseUtil";
 import { retrieveSettingsForActiveAccount } from "../db/index";
@@ -250,7 +247,7 @@ export default class OfferDialog extends Vue {
       );
 
       if (!result.success) {
-        const errorMessage = this.getOfferCreationErrorMessage(result);
+        const errorMessage = result.error;
         logger.error("Error with offer creation result:", result);
         this.$notify(
           {
@@ -290,21 +287,6 @@ export default class OfferDialog extends Vue {
       );
     }
   }
-
-  // Helper functions for readability
-
-  /**
-   * @param result direct response eg. ErrorResult or SuccessResult (potentially with embedded "data")
-   * @returns best guess at an error message
-   */
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  getOfferCreationErrorMessage(result: any) {
-    return (
-      serverMessageForUser(result) ||
-      result.error?.userMessage ||
-      result.error?.error
-    );
-  }
 }
 </script>
 

src/components/TopMessage.vue

@@ -38,14 +38,13 @@ export default class TopMessage extends Vue {
         settings.apiServer !== AppString.PROD_ENDORSER_API_SERVER
       ) {
         const didPrefix = settings.activeDid?.slice(11, 15);
-        this.message = "You're linked to a non-prod server, user " + didPrefix;
+        this.message = "You're not using prod, user " + didPrefix;
       } else if (
         settings.warnIfProdServer &&
         settings.apiServer === AppString.PROD_ENDORSER_API_SERVER
       ) {
         const didPrefix = settings.activeDid?.slice(11, 15);
-        this.message =
-          "You're linked to the production server, user " + didPrefix;
+        this.message = "You are using prod, user " + didPrefix;
       }
     } catch (err: unknown) {
       this.$notify(