switch the HIDDEN DIDs to an eye-slash and shrink the icons even more

src/components/ActivityListItem.vue

@@ -10,26 +10,21 @@
       </span>
     </div>
 
-    <div
-      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">
-          <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>
+    <div class="bg-slate-100 rounded-t-md border border-slate-300 p-3 sm:p-4">
+      <div class="flex items-center gap-2 mb-6">
+
+        <EntityIcon
+          :entity-id="record.issuerDid"
+          :profile-image-url="record.issuer.profileImageUrl"
+          :icon-size="24"
+          class="rounded object-cover"
+        />
 
         <div>
           <h3 class="font-semibold">
-            {{ record.issuer.known ? record.issuer.displayName : "" }}
+            {{
+              record.issuer.known ? record.issuer.displayName : ""
+            }}
           </h3>
           <p class="ms-auto text-xs text-slate-500 italic">
             {{ friendlyDate }}
@@ -37,16 +32,10 @@
         </div>
       </div>
 
-      <a class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
-        <font-awesome icon="circle-info" class="fa-fw text-slate-500" />
-      </a>
-    </div>
-
-    <div class="bg-slate-100 rounded-b-md border border-slate-300 p-3 sm:p-4">
       <!-- 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-6 -mx-3 sm:-mx-4"
         :style="`background-image: url(${record.image});`"
       >
         <a
@@ -62,8 +51,9 @@
         </a>
       </div>
 
+      <!-- Giver - - > Receiver -->
       <div class="relative flex justify-between gap-4 max-w-lg mx-auto mb-5">
-        <!-- Source -->
+        <!-- Giver -->
         <div
           class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
@@ -74,35 +64,27 @@
                 <ProjectIcon
                   :entity-id="record.providerPlanName"
                   :icon-size="48"
-                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
+                  class="rounded *:w-full *:h-full"
                 />
               </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]"
-                />
-              </div>
-              <!-- Unknown Person -->
-              <div v-else>
-                <font-awesome
-                  icon="person-circle-question"
-                  class="text-slate-300 text-[3rem] sm:text-[4rem]"
-                />
-              </div>
+              <EntityIcon
+                v-else
+                :entity-id="record.agentDid"
+                :profile-image-url="record.issuer.profileImageUrl"
+                :icon-size="48"
+                class="rounded size-[3rem] sm:size-[4rem]"
+              />
             </div>
           </div>
-          <div
-            v-if="record.providerPlanName || record.giver.known"
-            class="text-xs mt-2 line-clamp-3 sm:line-clamp-2"
-          >
-            <font-awesome
-              :icon="record.providerPlanName ? 'users' : 'user'"
-              class="fa-fw text-slate-400"
-            />
-            {{ record.providerPlanName || record.giver.displayName }}
+          <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
+            <div v-if="record.providerPlanName || record.giver.known">
+              <font-awesome
+                :icon="record.providerPlanName ? 'users' : 'user'"
+                class="fa-fw text-slate-400"
+              />
+              {{ record.providerPlanName || record.giver.displayName }}
+            </div>
           </div>
         </div>
 
@@ -125,7 +107,7 @@
           </div>
         </div>
 
-        <!-- Destination -->
+        <!-- Recipient -->
         <div
           class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
         >
@@ -140,31 +122,23 @@
                 />
               </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]"
-                />
-              </div>
-              <!-- Unknown Person -->
-              <div v-else>
-                <font-awesome
-                  icon="person-circle-question"
-                  class="text-slate-300 text-[3rem] sm:text-[4rem]"
-                />
-              </div>
+              <EntityIcon
+                v-else
+                :entity-id="record.recipientDid"
+                :profile-image-url="record.receiver.profileImageUrl"
+                :icon-size="48"
+                class="rounded size-[3rem] sm:size-[4rem]"
+              />
             </div>
           </div>
-          <div
-            v-if="record.recipientProjectName || record.receiver.known"
-            class="text-xs mt-2 line-clamp-3 sm:line-clamp-2"
-          >
-            <font-awesome
-              :icon="record.recipientProjectName ? 'users' : 'user'"
-              class="fa-fw text-slate-400"
-            />
-            {{ record.recipientProjectName || record.receiver.displayName }}
+          <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
+            <div v-if="record.recipientProjectName || record.receiver.known">
+              <font-awesome
+                :icon="record.recipientProjectName ? 'users' : 'user'"
+                class="fa-fw text-slate-400"
+              />
+              {{ record.recipientProjectName || record.receiver.displayName }}
+            </div>
           </div>
         </div>
       </div>
@@ -176,6 +150,14 @@
         </a>
       </p>
     </div>
+
+    <div
+      class="flex items-center gap-2 text-lg bg-slate-300 rounded-b-md px-3 sm:px-4 py-1 sm:py-2"
+    >
+      <a class="cursor-pointer" @click="$emit('loadClaim', record.jwtId)">
+        <font-awesome icon="circle-info" class="fa-fw text-slate-500" />
+      </a>
+    </div>
   </li>
 </template>
 

src/components/EntityIcon.vue

@@ -1,29 +1,45 @@
 <template>
-  <!-- eslint-disable-next-line vue/no-v-html -->
-  <div class="w-fit" v-html="generateIcon()"></div>
+  <div class="w-fit">
+    <font-awesome
+      v-if="!this.contact?.did && !this.entityId"
+      icon="person-circle-question"
+      :class="`fa-fw text-slate-400`"
+      :style="{ width: `${this.iconSize}px`, height: `${this.iconSize}px` }"
+    />
+    <font-awesome
+      v-else-if="isHiddenDid"
+      icon="eye-slash"
+      :class="`fa-fw text-slate-400`"
+      :style="{ width: `${this.iconSize}px`, height: `${this.iconSize}px` }"
+    />
+    <div v-else v-html="generateIcon()"></div>
+  </div>
 </template>
 <script lang="ts">
 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";
+import { isHiddenDid } from "@/libs/endorserServer";
 
 @Component
 export default class EntityIcon extends Vue {
-  @Prop contact: Contact;
+  @Prop contact: Contact = null;
   @Prop entityId = ""; // overridden by contact.did or profileImageUrl
   @Prop iconSize = 0;
   @Prop profileImageUrl = ""; // overridden by contact.profileImageUrl
 
+  get isHiddenDid() {
+    const identifier = this.contact?.did || this.entityId;
+    return isHiddenDid(identifier);
+  }
+
   generateIcon() {
     const imageUrl = this.contact?.profileImageUrl || this.profileImageUrl;
     if (imageUrl) {
       return `<img src="${imageUrl}" class="rounded" width="${this.iconSize}" height="${this.iconSize}" />`;
     } else {
       const identifier = this.contact?.did || this.entityId;
-      if (!identifier) {
-        return `<img src="../src/assets/blank-square.svg" class="rounded" width="${this.iconSize}" height="${this.iconSize}" />`;
-      }
       // https://api.dicebear.com/8.x/avataaars/svg?seed=
       // ... does not render things with the same seed as this library.
       // "did:ethr:0x222BB77E6Ff3774d34c751f3c1260866357B677b" yields a girl with flowers in her hair and a lightning earring

src/views/HomeView.vue

@@ -344,6 +344,7 @@ import * as serverUtil from "../libs/endorserServer";
 import { logger } from "../utils/logger";
 import { GiveRecordWithContactInfo } from "types";
 
+
 /**
  * HomeView - Main view component for the application's home page
  *
@@ -491,31 +492,6 @@ export default class HomeView extends Vue {
         }
       }
 
-      // this returns a Promise but we don't need to wait for it
-      this.updateAllFeed();
-
-      if (this.activeDid) {
-        const offersToUserData = await getNewOffersToUser(
-          this.axios,
-          this.apiServer,
-          this.activeDid,
-          this.lastAckedOfferToUserJwtId,
-        );
-        this.numNewOffersToUser = offersToUserData.data.length;
-        this.newOffersToUserHitLimit = offersToUserData.hitLimit;
-      }
-
-      if (this.activeDid) {
-        const offersToUserProjects = await getNewOffersToUserProjects(
-          this.axios,
-          this.apiServer,
-          this.activeDid,
-          this.lastAckedOfferToUserProjectsJwtId,
-        );
-        this.numNewOffersToUserProjects = offersToUserProjects.data.length;
-        this.newOffersToUserProjectsHitLimit = offersToUserProjects.hitLimit;
-      }
-
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
       logConsoleAndDb("Error retrieving settings or feed: " + err, true);