show contact's or user's icon in more places

src/views/ContactQRScanShowView.vue

@@ -44,7 +44,8 @@
         :dotsOptions="{ type: 'square' }"
         class="flex justify-center"
       />
-      <span> Click QR to copy your contact URL to your clipboard. </span>
+      <span> Click that QR to copy your contact URL to your clipboard. </span>
+      <div>Not scanning? Show it in pieces.</div>
     </div>
     <div class="text-center" v-else>
       You have no identitifiers yet, so
@@ -81,7 +82,7 @@ import { useClipboard } from "@vueuse/core";
 import { NotificationIface } from "@/constants/app";
 import { accountsDB, db } from "@/db/index";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { deriveAddress, nextDerivationPath, SimpleSigner } from "@/libs/crypto";
+import {deriveAddress, getContactPayloadFromJwtUrl, nextDerivationPath, SimpleSigner} from "@/libs/crypto";
 import QuickNav from "@/components/QuickNav.vue";
 import { Account } from "@/db/tables/accounts";
 import {
@@ -153,6 +154,7 @@ export default class ContactQRScanShow extends Vue {
             (settings?.lastName ? ` ${settings.lastName}` : ""), // deprecated, pre v 0.1.3
           publicEncKey,
           nextPublicEncKeyHash: nextPublicEncKeyHashBase64,
+          profileImageUrl: settings?.profileImageUrl,
         },
       };
 
@@ -177,9 +179,24 @@ export default class ContactQRScanShow extends Vue {
   // Unfortunately, there are not typescript definitions for the qrcode-stream component yet.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   onScanDetect(content: any) {
-    if (content[0]?.rawValue) {
-      localStorage.setItem("contactEndorserUrl", content[0].rawValue);
-      this.$router.push({ name: "contacts" });
+    const url = content[0]?.rawValue;
+    if (url) {
+      try {
+        const fullData = getContactPayloadFromJwtUrl(url);
+        console.log("fullData", fullData);
+        localStorage.setItem("contactEndorserUrl", url);
+        this.$router.push({ name: "contacts" });
+      } catch (e) {
+        this.$notify(
+          {
+            group: "alert",
+            type: "warning",
+            title: "Invalid Contact QR Code",
+            text: "The QR code isn't in the right format.",
+          },
+          5000,
+        );
+      }
     } else {
       this.$notify(
         {
@@ -188,7 +205,7 @@ export default class ContactQRScanShow extends Vue {
           title: "Invalid Contact QR Code",
           text: "No QR code detected with contact information.",
         },
-        -1,
+        5000,
       );
     }
   }
@@ -203,7 +220,7 @@ export default class ContactQRScanShow extends Vue {
         title: "Invalid Scan",
         text: "The scan was invalid.",
       },
-      -1,
+      5000,
     );
   }