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

src/components/EntityIcon.vue

@@ -5,20 +5,29 @@
 import { createAvatar, StyleOptions } from "@dicebear/core";
 import { avataaars } from "@dicebear/collection";
 import { Vue, Component, Prop } from "vue-facing-decorator";
+import { Contact } from "@/db/tables/contacts";
 
 @Component
 export default class EntityIcon extends Vue {
-  @Prop entityId = "";
+  @Prop contact: Contact;
+  @Prop entityId = ""; // overridden by contact.did or profileImageUrl
   @Prop iconSize = 0;
+  @Prop profileImageUrl = ""; // overridden by contact.profileImageUrl
 
   generateIcon() {
-    const options: StyleOptions<object> = {
-      seed: this.entityId || "",
-      size: this.iconSize,
-    };
-    const avatar = createAvatar(avataaars, options);
-    const svgString = avatar.toString();
-    return svgString;
+    const imageUrl = this.contact?.profileImageUrl || this.profileImageUrl;
+    if (imageUrl) {
+      return `<img src="${imageUrl}" alt="avatar" width="${this.iconSize}" height="${this.iconSize}" />`;
+    } else {
+      const identifier = this.contact?.did || this.entityId;
+      const options: StyleOptions<object> = {
+        seed: (identifier as string) || "",
+        size: this.iconSize,
+      };
+      const avatar = createAvatar(avataaars, options);
+      const svgString = avatar.toString();
+      return svgString;
+    }
   }
 }
 </script>

src/components/GiftedPhotoDialog.vue

@@ -133,7 +133,8 @@ export default class GiftedPhotoDialog extends Vue {
   activeDeviceNumber = 0;
   activeDid = "";
   blob: Blob | null = null;
-  crop: boolean;
+  claimType = "GiveAction";
+  crop = false;
   mirror = false;
   numDevices = 0;
   setImage: (arg: string) => void = () => {};
@@ -162,9 +163,10 @@ export default class GiftedPhotoDialog extends Vue {
     }
   }
 
-  open(setImageFn: (arg: string) => void, crop?: boolean) {
+  open(setImageFn: (arg: string) => void, crop?: boolean, claimType?: string) {
     this.visible = true;
     this.crop = !!crop;
+    this.claimType = claimType || "GiveAction";
     const bottomNav = document.querySelector("#QuickNav") as HTMLElement;
     if (bottomNav) {
       bottomNav.style.display = "none";
@@ -329,7 +331,7 @@ export default class GiftedPhotoDialog extends Vue {
       return;
     }
     formData.append("image", this.blob, "snapshot.png"); // png is set in snapshot()
-    formData.append("claimType", "GiveAction");
+    formData.append("claimType", this.claimType);
     try {
       const response = await axios.post(
         DEFAULT_IMAGE_API_SERVER + "/image",