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

src/components/ActivityListItem.vue

@@ -13,15 +13,12 @@
     <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">
 
-        <div v-if="record.issuerDid">
+        <EntityIcon
-          <EntityIcon
+          :entity-id="record.issuerDid"
-            :entity-id="record.issuerDid"
+          :profile-image-url="record.issuer.profileImageUrl"
-            class="rounded size-[3rem] sm:size-[4rem] object-cover"
+          :icon-size="24"
-          />
+          class="rounded object-cover"
-        </div>
+        />
-        <div v-else>
-          <font-awesome icon="person-circle-question" class="text-slate-300 text-[3rem] sm:text-[4rem]" />
-        </div>
 
         <div>
           <h3 class="font-semibold">
@@ -54,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"
         >
@@ -66,24 +64,17 @@
                 <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
-                <EntityIcon
+                v-else
-                  :entity-id="record.agentDid"
+                :entity-id="record.agentDid"
-                  :profile-image-url="record.issuer.profileImageUrl"
+                :profile-image-url="record.issuer.profileImageUrl"
-                  class="rounded size-[3rem] sm:size-[4rem]"
+                :icon-size="48"
-                />
+                class="rounded 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>
             </div>
           </div>
           <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
@@ -116,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"
         >
@@ -131,20 +122,13 @@
                 />
               </div>
               <!-- Identicon for DIDs -->
-              <div v-else-if="record.recipientDid">
+              <EntityIcon
-                <EntityIcon
+                v-else
-                  :entity-id="record.recipientDid"
+                :entity-id="record.recipientDid"
-                  :profile-image-url="record.receiver.profileImageUrl"
+                :profile-image-url="record.receiver.profileImageUrl"
-                  class="rounded size-[3rem] sm:size-[4rem]"
+                :icon-size="48"
-                />
+                class="rounded 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>
             </div>
           </div>
           <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">

src/components/EntityIcon.vue

@@ -1,29 +1,45 @@
 <template>
-  <!-- eslint-disable-next-line vue/no-v-html -->
+  <div class="w-fit">
-  <div class="w-fit" v-html="generateIcon()"></div>
+    <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

@@ -492,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);