Fix: removed links and elements

- Removed links from icons and giver name
- Removed confirm button
- Lint fixes

src/components/ActivityListItem.vue

@@ -0,0 +1,334 @@
+<template>
+  <li>
+    <!-- Last viewed separator -->
+    <div
+      class="border-b border-dashed border-slate-300 text-orange-400 mt-4 mb-6 font-bold text-sm"
+      v-if="record.jwtId == lastViewedClaimId"
+    >
+      <span class="block w-fit mx-auto -mb-2.5 bg-white px-2">
+        You've already seen all the following
+      </span>
+    </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">
+        <img
+          src="https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg"
+          class="size-8 object-cover rounded-full"
+        />
+
+        <div>
+          <h3 class="font-semibold">
+            {{
+              record.giver.known ? record.giver.displayName : "Anonymous Giver"
+            }}
+          </h3>
+          <p class="ms-auto text-xs text-slate-500 italic">
+            {{ friendlyDate }}
+          </p>
+        </div>
+      </div>
+
+      <!-- Record Image -->
+      <div
+        v-if="record.image"
+        class="bg-cover mb-6 -mx-3 sm:-mx-4"
+        :style="`background-image: url(${record.image});`"
+      >
+        <a
+          class="block bg-slate-100/50 backdrop-blur-md px-6 py-4 cursor-pointer"
+          @click="$emit('viewImage', record.image)"
+        >
+          <img
+            class="w-full h-auto max-w-lg max-h-96 object-contain mx-auto drop-shadow-md"
+            :src="record.image"
+            @load="$emit('cacheImage', record.image)"
+            alt="Activity image"
+          />
+        </a>
+      </div>
+
+      <div class="relative flex justify-between gap-4 max-w-lg mx-auto mb-5">
+        <!-- Source -->
+        <div
+          class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+        >
+          <div class="relative w-fit mx-auto">
+            <template v-if="record.giver.profileImageUrl">
+              <EntityIcon
+                :profile-image-url="record.giver.profileImageUrl"
+                :class="[
+                  !record.providerPlanName
+                    ? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
+                    : 'rounded size-[3rem] sm:size-[4rem] object-cover',
+                ]"
+              />
+            </template>
+            <template v-else>
+              <!-- Project Icon -->
+              <template v-if="record.providerPlanName">
+                <ProjectIcon
+                  :entityId="record.providerPlanName"
+                  :iconSize="48"
+                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
+                />
+              </template>
+              <!-- Identicon for DIDs -->
+              <template v-else-if="record.giver.did">
+                <img
+                  :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
+                  class="rounded-full size-[3rem] sm:size-[4rem]"
+                  alt="Identicon"
+                />
+              </template>
+              <!-- Unknown Person -->
+              <template v-else>
+                <fa
+                  icon="person-circle-question"
+                  class="text-slate-300 text-[3rem] sm:text-[4rem]"
+                />
+              </template>
+            </template>
+          </div>
+          <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
+            <fa
+              :icon="record.providerPlanName ? 'building' : 'user'"
+              class="fa-fw text-slate-400"
+            />
+            {{ record.giver.displayName }}
+          </div>
+        </div>
+
+        <!-- Arrow -->
+        <div
+          class="absolute inset-x-28 sm:inset-x-40 mx-2 top-1/2 -translate-y-1/2"
+        >
+          <div class="text-sm text-center leading-none font-semibold">
+            {{ fetchAmount }}
+          </div>
+
+          <div class="flex items-center">
+            <hr
+              class="grow border-t-[18px] sm:border-t-[24px] border-slate-300"
+            />
+
+            <div
+              class="shrink-0 w-0 h-0 border border-slate-300 border-t-[20px] sm:border-t-[25px] border-t-transparent border-b-[20px] sm:border-b-[25px] border-b-transparent border-s-[27px] sm:border-s-[34px] border-e-0"
+            ></div>
+          </div>
+        </div>
+
+        <!-- Destination -->
+        <div
+          class="w-28 sm:w-40 text-center bg-white border border-slate-200 rounded p-2 sm:p-3"
+        >
+          <div class="relative w-fit mx-auto">
+            <template v-if="record.receiver.profileImageUrl">
+              <EntityIcon
+                :profile-image-url="record.receiver.profileImageUrl"
+                :class="[
+                  !record.recipientProjectName
+                    ? 'rounded-full size-[3rem] sm:size-[4rem] object-cover'
+                    : 'rounded size-[3rem] sm:size-[4rem] object-cover',
+                ]"
+              />
+            </template>
+            <template v-else>
+              <!-- Project Icon -->
+              <template v-if="record.recipientProjectName">
+                <ProjectIcon
+                  :entityId="record.recipientProjectName"
+                  :iconSize="48"
+                  class="rounded size-[3rem] sm:size-[4rem] *:w-full *:h-full"
+                />
+              </template>
+              <!-- Identicon for DIDs -->
+              <template v-else-if="record.receiver.did">
+                <img
+                  :src="`https://a.fsdn.com/con/app/proj/identicons/screenshots/225506.jpg`"
+                  class="rounded-full size-[3rem] sm:size-[4rem]"
+                  alt="Identicon"
+                />
+              </template>
+              <!-- Unknown Person -->
+              <template v-else>
+                <fa
+                  icon="person-circle-question"
+                  class="text-slate-300 text-[3rem] sm:text-[4rem]"
+                />
+              </template>
+            </template>
+          </div>
+          <div class="text-xs mt-2 line-clamp-3 sm:line-clamp-2">
+            <fa
+              :icon="record.recipientProjectName ? 'building' : 'user'"
+              class="fa-fw text-slate-400"
+            />
+            {{ record.receiver.displayName }}
+          </div>
+        </div>
+      </div>
+
+      <!-- Description -->
+      <p class="font-medium">
+        <a @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer">
+          {{ description }}
+        </a>
+      </p>
+      <p class="text-sm">{{ subDescription }}</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 @click="$emit('loadClaim', record.jwtId)" class="cursor-pointer">
+        <fa icon="circle-info" class="fa-fw text-slate-500" />
+      </a>
+    </div>
+  </li>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-facing-decorator";
+import { GiveRecordWithContactInfo } from "../types";
+import EntityIcon from "./EntityIcon.vue";
+import { isGiveClaimType, notifyWhyCannotConfirm } from "../libs/util";
+import { containsHiddenDid } from "../libs/endorserServer";
+import ProjectIcon from "./ProjectIcon.vue";
+
+@Component({
+  components: {
+    EntityIcon,
+    ProjectIcon,
+  },
+})
+export default class ActivityListItem extends Vue {
+  @Prop() record!: GiveRecordWithContactInfo;
+  @Prop() lastViewedClaimId?: string;
+  @Prop() isRegistered!: boolean;
+  @Prop() activeDid!: string;
+  @Prop() confirmerIdList?: string[];
+
+  get fetchAmount(): string {
+    const claim =
+      (this.record.fullClaim as unknown).claim || this.record.fullClaim;
+
+    const amount = claim.object?.amountOfThisGood
+      ? this.displayAmount(claim.object.unitCode, claim.object.amountOfThisGood)
+      : "";
+
+    return amount;
+  }
+
+  private formatParticipantInfo(): string {
+    const { giver, receiver } = this.record;
+
+    // Both participants are known contacts
+    if (giver.known && receiver.known) {
+      return `${giver.displayName} gave to ${receiver.displayName}`;
+    }
+
+    // Only giver is known
+    if (giver.known) {
+      const recipient = this.record.recipientProjectName
+        ? `the project "${this.record.recipientProjectName}"`
+        : receiver.displayName;
+      return `${giver.displayName} gave to ${recipient}`;
+    }
+
+    // Only receiver is known
+    if (receiver.known) {
+      const provider = this.record.providerPlanName
+        ? `the project "${this.record.providerPlanName}"`
+        : giver.displayName;
+      return `${receiver.displayName} received from ${provider}`;
+    }
+
+    // Neither is known
+    return this.formatUnknownParticipants();
+  }
+
+  private formatUnknownParticipants(): string {
+    const { giver, receiver, providerPlanName, recipientProjectName } =
+      this.record;
+
+    if (providerPlanName || recipientProjectName) {
+      const from = providerPlanName
+        ? `the project "${providerPlanName}"`
+        : giver.displayName;
+      const to = recipientProjectName
+        ? `the project "${recipientProjectName}"`
+        : receiver.displayName;
+      return `from ${from} to ${to}`;
+    }
+
+    return giver.displayName === receiver.displayName
+      ? `between two who are ${giver.displayName}`
+      : `from ${giver.displayName} to ${receiver.displayName}`;
+  }
+
+  get description(): string {
+    const claim =
+      (this.record.fullClaim as unknown).claim || this.record.fullClaim;
+
+    if (!claim.description) {
+      return "something not described";
+    }
+
+    return `${claim.description}`;
+  }
+
+  get subDescription(): string {
+    const participants = this.formatParticipantInfo();
+
+    return `${participants}`;
+  }
+
+  private displayAmount(code: string, amt: number) {
+    return `${amt} ${this.currencyShortWordForCode(code, amt === 1)}`;
+  }
+
+  private currencyShortWordForCode(unitCode: string, single: boolean) {
+    return unitCode === "HUR" ? (single ? "hour" : "hours") : unitCode;
+  }
+
+  get formattedTimestamp() {
+    // Add your timestamp formatting logic here
+    return this.record.timestamp;
+  }
+
+  get canConfirm(): boolean {
+    if (!this.isRegistered) return false;
+    if (!isGiveClaimType(this.record.fullClaim?.["@type"])) return false;
+    if (this.confirmerIdList?.includes(this.activeDid)) return false;
+    if (this.record.issuerDid === this.activeDid) return false;
+    if (containsHiddenDid(this.record.fullClaim)) return false;
+    return true;
+  }
+
+  handleConfirmClick() {
+    if (!this.canConfirm) {
+      notifyWhyCannotConfirm(
+        this.$notify,
+        this.isRegistered,
+        this.record.fullClaim?.["@type"],
+        this.record,
+        this.activeDid,
+        this.confirmerIdList,
+      );
+      return;
+    }
+
+    this.$emit("confirmClaim", this.record);
+  }
+
+  get friendlyDate(): string {
+    const date = new Date(this.record.issuedAt);
+    return date.toLocaleDateString(undefined, {
+      year: "numeric",
+      month: "short",
+      day: "numeric",
+    });
+  }
+}
+</script>

src/db/tables/settings.ts

@@ -20,7 +20,7 @@ export type Settings = {
   // active Decentralized ID
   activeDid?: string; // only used in the MASTER_SETTINGS_KEY entry
 
-  apiServer: string; // API server URL
+  apiServer?: string; // API server URL
 
   filterFeedByNearby?: boolean; // filter by nearby
   filterFeedByVisible?: boolean; // filter by visible users ie. anyone not hidden

src/main.ts

@@ -58,6 +58,7 @@ import {
   faHandHoldingDollar,
   faHandHoldingHeart,
   faHouseChimney,
+  faImage,
   faImagePortrait,
   faLeftRight,
   faLightbulb,
@@ -87,6 +88,7 @@ import {
   faUser,
   faUsers,
   faXmark,
+  faBuilding,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -137,6 +139,7 @@ library.add(
   faHandHoldingDollar,
   faHandHoldingHeart,
   faHouseChimney,
+  faImage,
   faImagePortrait,
   faLeftRight,
   faLightbulb,
@@ -166,6 +169,7 @@ library.add(
   faUser,
   faUsers,
   faXmark,
+  faBuilding,
 );
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";

src/types/index.ts

@@ -0,0 +1,20 @@
+export interface GiveRecordWithContactInfo {
+  jwtId: string;
+  fullClaim: unknown; // Replace with proper type
+  giver: {
+    known: boolean;
+    displayName: string;
+    profileImageUrl?: string;
+  };
+  receiver: {
+    known: boolean;
+    displayName: string;
+    profileImageUrl?: string;
+  };
+  providerPlanName?: string;
+  recipientProjectName?: string;
+  description?: string;
+  subDescription?: string;
+  image?: string;
+  timestamp: string;
+}

src/views/HomeView.vue

@@ -186,23 +186,23 @@
     </div>
 
     <!-- Results List -->
-    <div class="bg-slate-100 rounded-md px-4 py-3 mt-4 mb-4">
+    <div class="mt-4 mb-4">
       <div class="flex items-center mb-4">
-        <h2 class="text-xl font-bold">
+        <h2 class="text-xl font-bold flex items-center gap-4">
           Latest Activity
-          <button @click="openFeedFilters()">
-            <span class="text-xs text-white">
-              <fa
-                v-if="resultsAreFiltered()"
-                icon="filter"
-                class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
-              />
-              <fa
-                v-else
-                icon="filter"
-                class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-1 py-1.5 rounded-md"
-              />
-            </span>
+          <button
+            v-if="resultsAreFiltered()"
+            class="bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md text-xs text-white"
+            @click="openFeedFilters()"
+          >
+            <fa icon="filter" class="fa-fw" />
+          </button>
+          <button
+            v-else
+            class="bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] px-3 py-1.5 rounded-md text-xs text-white"
+            @click="openFeedFilters()"
+          >
+            <fa icon="filter" class="fa-fw" />
           </button>
         </h2>
       </div>
@@ -249,117 +249,20 @@
       </div>
 
       <InfiniteScroll @reached-bottom="loadMoreGives">
-        <ul id="listLatestActivity" class="border-t border-slate-300">
-          <li
-            class="border-b border-slate-300 py-2"
+        <ul id="listLatestActivity" class="space-y-4">
+          <ActivityListItem
             v-for="record in feedData"
             :key="record.jwtId"
-          >
-            <div
-              class="border-b border-slate-300 text-orange-400 pb-2 mb-2 font-bold text-sm"
-              v-if="record.jwtId == feedLastViewedClaimId"
-            >
-              You've already seen all the following
-            </div>
-
-            <div class="grid grid-cols-12">
-              <span class="pt-1 col-span-1 justify-self-start">
-                <span>
-                  <fa
-                    icon="circle-user"
-                    :class="
-                      computeKnownPersonIconStyleClassNames(
-                        record.giver.known || record.receiver.known,
-                      )
-                    "
-                    @click="toastUser('This involves your contacts.')"
-                  />
-                  <fa
-                    icon="gift"
-                    class="pl-3 text-slate-500"
-                    @click="toastUser('This is a gift.')"
-                  />
-                </span>
-              </span>
-              <span class="col-span-10 justify-self-stretch overflow-hidden">
-                <!-- show giver and/or receiver profiles... which seemed like a good idea but actually adds clutter
-                <span
-                  v-if="
-                    record.giver.profileImageUrl ||
-                    record.receiver.profileImageUrl
-                  "
-                >
-                  <EntityIcon
-                    v-if="record.agentDid !== activeDid"
-                    :icon-size="32"
-                    :profile-image-url="record.giver.profileImageUrl"
-                    class="inline-block align-middle border border-slate-300 rounded-md mr-1"
-                  />
-                  <fa
-                    v-if="
-                      record.agentDid !== activeDid &&
-                      record.recipientDid !== activeDid &&
-                      !record.fulfillsPlanHandleId
-                    "
-                    icon="ellipsis"
-                    class="text-slate"
-                  />
-                  <EntityIcon
-                    v-if="
-                      record.recipientDid !== activeDid &&
-                      !record.fulfillsPlanHandleId
-                    "
-                    :iconSize="32"
-                    :profile-image-url="record.receiver.profileImageUrl"
-                    class="inline-block align-middle border border-slate-300 rounded-md ml-1"
-                  />
-                </span>
-                -->
-                <span class="pl-2 block break-words">
-                  {{ giveDescription(record) }}
-                </span>
-                <a @click="onClickLoadClaim(record.jwtId)">
-                  <fa
-                    icon="file-lines"
-                    class="pl-2 text-slate-500 cursor-pointer"
-                  />
-                </a>
-              </span>
-              <span class="col-span-1 justify-self-end">
-                <router-link
-                  v-if="record.fulfillsPlanHandleId"
-                  :to="
-                    '/project/' +
-                    encodeURIComponent(record.fulfillsPlanHandleId)
-                  "
-                >
-                  <fa icon="hammer" class="text-blue-500" />
-                </router-link>
-                <router-link
-                  v-if="record.providerPlanHandleId"
-                  :to="
-                    '/project/' +
-                    encodeURIComponent(record.providerPlanHandleId)
-                  "
-                >
-                  <fa icon="hammer" class="text-blue-500" />
-                </router-link>
-              </span>
-            </div>
-            <div v-if="record.image" class="w-full">
-              <div
-                class="cursor-pointer"
-                @click="openImageViewer(record.image)"
-              >
-                <img
-                  :src="record.image"
-                  class="w-full aspect-[3/2] object-cover rounded-xl mt-2"
-                  alt="shared content"
-                  @load="cacheImageData($event, record.image)"
-                />
-              </div>
-            </div>
-          </li>
+            :record="record"
+            :lastViewedClaimId="feedLastViewedClaimId"
+            :isRegistered="isRegistered"
+            :activeDid="activeDid"
+            :confirmerIdList="record.confirmerIdList"
+            @loadClaim="onClickLoadClaim"
+            @viewImage="openImageViewer"
+            @cacheImage="cacheImageData"
+            @confirmClaim="confirmClaim"
+          />
         </ul>
       </InfiniteScroll>
       <div v-if="isFeedLoading">
@@ -401,6 +304,7 @@ import TopMessage from "../components/TopMessage.vue";
 import UserNameDialog from "../components/UserNameDialog.vue";
 import ChoiceButtonDialog from "../components/ChoiceButtonDialog.vue";
 import ImageViewer from "../components/ImageViewer.vue";
+import ActivityListItem from "../components/ActivityListItem.vue";
 import {
   AppString,
   NotificationIface,
@@ -436,6 +340,8 @@ import {
   OnboardPage,
   registerSaveAndActivatePasskey,
 } from "../libs/util";
+import * as serverUtil from "../libs/endorserServer";
+// import { fa0 } from "@fortawesome/free-solid-svg-icons";
 
 interface GiveRecordWithContactInfo extends GiveSummaryRecord {
   giver: {
@@ -466,6 +372,7 @@ interface GiveRecordWithContactInfo extends GiveSummaryRecord {
     TopMessage,
     UserNameDialog,
     ImageViewer,
+    ActivityListItem,
   },
 })
 export default class HomeView extends Vue {
@@ -559,6 +466,7 @@ export default class HomeView extends Vue {
           if (resp.status === 200) {
             await updateAccountSettings(this.activeDid, {
               isRegistered: true,
+              ...(await retrieveSettingsForActiveAccount()),
             });
             this.isRegistered = true;
           }
@@ -1002,5 +910,67 @@ export default class HomeView extends Vue {
     this.selectedImage = imageUrl;
     this.isImageViewerOpen = true;
   }
+
+  async confirmClaim(record: GiveRecordWithContactInfo) {
+    this.$notify(
+      {
+        group: "modal",
+        type: "confirm",
+        title: "Confirm",
+        text: "Do you personally confirm that this is true?",
+        onYes: async () => {
+          const goodClaim = serverUtil.removeSchemaContext(
+            serverUtil.removeVisibleToDids(
+              serverUtil.addLastClaimOrHandleAsIdIfMissing(
+                record.fullClaim,
+                record.jwtId,
+                record.handleId,
+              ),
+            ),
+          );
+
+          const confirmationClaim = {
+            "@context": "https://schema.org",
+            "@type": "AgreeAction",
+            object: goodClaim,
+          };
+
+          const result = await serverUtil.createAndSubmitClaim(
+            confirmationClaim,
+            this.activeDid,
+            this.apiServer,
+            this.axios,
+          );
+
+          if (result.type === "success") {
+            this.$notify(
+              {
+                group: "alert",
+                type: "success",
+                title: "Success",
+                text: "Confirmation submitted.",
+              },
+              3000,
+            );
+
+            // Refresh the feed to show updated confirmation status
+            await this.updateAllFeed();
+          } else {
+            console.error("Error submitting confirmation:", result);
+            this.$notify(
+              {
+                group: "alert",
+                type: "danger",
+                title: "Error",
+                text: "There was a problem submitting the confirmation.",
+              },
+              5000,
+            );
+          }
+        },
+      },
+      -1,
+    );
+  }
 }
 </script>

src/views/ProjectViewView.vue

@@ -341,23 +341,37 @@
             <div v-else-if="givesTotalsByUnit.length > 0" class="flex-1">
               <span class="font-semibold mr-2 shrink-0">Totals</span>
               <span class="whitespace-nowrap overflow-hidden text-ellipsis">
-                <a @click="totalsExpanded = !totalsExpanded" class="cursor-pointer text-blue-500">
+                <a
+                  @click="totalsExpanded = !totalsExpanded"
+                  class="cursor-pointer text-blue-500"
+                >
                   <!-- just show the hours, or alternatively whatever is first -->
                   <span v-if="givenTotalHours() > 0">
                     {{ givenTotalHours() }} {{ libsUtil.UNIT_SHORT["HUR"] }}
                   </span>
                   <span v-else>
-                    {{ givesTotalsByUnit[0].amount }} {{ libsUtil.UNIT_SHORT[givesTotalsByUnit[0].unit] }}
+                    {{ givesTotalsByUnit[0].amount }}
+                    {{ libsUtil.UNIT_SHORT[givesTotalsByUnit[0].unit] }}
                   </span>
                   <span v-if="givesTotalsByUnit.length > 1">...</span>
                   <span>
-                    <fa :icon="totalsExpanded ? 'chevron-up' : 'chevron-right'" class="fa-fw text-xs ml-1" />
+                    <fa
+                      :icon="totalsExpanded ? 'chevron-up' : 'chevron-right'"
+                      class="fa-fw text-xs ml-1"
+                    />
                   </span>
                 </a>
                 <!-- show the full list when expanded -->
                 <div v-if="totalsExpanded">
-                  <div v-for="(total, index) in givesTotalsByUnit" :key="total.unit" class="ml-2">
-                    <fa :icon="libsUtil.iconForUnitCode(total.unit)" class="fa-fw text-slate-400 mr-1" />
+                  <div
+                    v-for="total in givesTotalsByUnit"
+                    :key="total.unit"
+                    class="ml-2"
+                  >
+                    <fa
+                      :icon="libsUtil.iconForUnitCode(total.unit)"
+                      class="fa-fw text-slate-400 mr-1"
+                    />
                     {{ total.amount }} {{ libsUtil.UNIT_LONG[total.unit] }}
                   </div>
                 </div>
@@ -365,7 +379,9 @@
             </div>
             <div v-else>
               <span class="font-semibold mr-2 shrink-0">
-                {{ givesToThis.length }}{{ givesHitLimit ? "+" : "" }} record{{ givesToThis.length === 1 ? "" : "s" }}
+                {{ givesToThis.length }}{{ givesHitLimit ? "+" : "" }} record{{
+                  givesToThis.length === 1 ? "" : "s"
+                }}
               </span>
             </div>
           </div>
@@ -374,62 +390,71 @@
           <ul class="mt-2 text-sm border-t border-slate-300">
             <li
               v-for="give in givesToThis"
-            :key="give.id"
-            class="py-1.5 border-b border-slate-300"
-          >
-            <div class="flex justify-between gap-4">
-              <span>
-                <fa icon="user" class="fa-fw text-slate-400" />
-                {{
-                  serverUtil.didInfo(
-                    give.agentDid,
-                    activeDid,
-                    allMyDids,
-                    allContacts,
-                  )
-                }}
-              </span>
-              <span v-if="give.amount" class="whitespace-nowrap">
-                <fa
-                  :icon="libsUtil.iconForUnitCode(give.unit)"
-                  class="fa-fw text-slate-400"
-                />{{ give.amount }}
-              </span>
-            </div>
-            <div class="text-slate-500">
-              <fa icon="calendar" class="fa-fw text-slate-400" />
-              {{ give.issuedAt?.substring(0, 10) }}
-            </div>
-            <div v-if="give.description" class="text-slate-500">
-              <fa icon="comment" class="fa-fw text-slate-400" />
-              {{ give.description }}
-            </div>
-            <div class="flex justify-between">
-              <a @click="onClickLoadClaim(give.jwtId)">
-                <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
-              </a>
+              :key="give.id"
+              class="py-1.5 border-b border-slate-300"
+            >
+              <div class="flex justify-between gap-4">
+                <span>
+                  <fa icon="user" class="fa-fw text-slate-400" />
+                  {{
+                    serverUtil.didInfo(
+                      give.agentDid,
+                      activeDid,
+                      allMyDids,
+                      allContacts,
+                    )
+                  }}
+                </span>
+                <span v-if="give.amount" class="whitespace-nowrap">
+                  <fa
+                    :icon="libsUtil.iconForUnitCode(give.unit)"
+                    class="fa-fw text-slate-400"
+                  />{{ give.amount }}
+                </span>
+              </div>
+              <div class="text-slate-500">
+                <fa icon="calendar" class="fa-fw text-slate-400" />
+                {{ give.issuedAt?.substring(0, 10) }}
+              </div>
+              <div v-if="give.description" class="text-slate-500">
+                <fa icon="comment" class="fa-fw text-slate-400" />
+                {{ give.description }}
+              </div>
+              <div class="flex justify-between">
+                <a @click="onClickLoadClaim(give.jwtId)">
+                  <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
+                </a>
 
-              <a
-                v-if="
-                  checkIsConfirmable(give) &&
-                  !recentlyCheckedAndUnconfirmableJwts.includes(give.jwtId)
-                "
-                @click="deepCheckConfirmable(give)"
-              >
-                <fa icon="circle-check" class="text-blue-500 cursor-pointer" />
-              </a>
-              <a v-else-if="checkingConfirmationForJwtId === give.jwtId">
-                <fa icon="spinner" class="fa-spin-pulse" />
-              </a>
-              <a v-else @click="shallowNotifyWhyCannotConfirm(give)">
-                <fa icon="circle-check" class="text-slate-500 cursor-pointer" />
-              </a>
-            </div>
-            <div v-if="give.fullClaim.image" class="flex justify-center">
-              <a :href="give.fullClaim.image" target="_blank">
-                <img :src="give.fullClaim.image" class="h-24 mt-2 rounded-xl" />
-              </a>
-            </div>
+                <a
+                  v-if="
+                    checkIsConfirmable(give) &&
+                    !recentlyCheckedAndUnconfirmableJwts.includes(give.jwtId)
+                  "
+                  @click="deepCheckConfirmable(give)"
+                >
+                  <fa
+                    icon="circle-check"
+                    class="text-blue-500 cursor-pointer"
+                  />
+                </a>
+                <a v-else-if="checkingConfirmationForJwtId === give.jwtId">
+                  <fa icon="spinner" class="fa-spin-pulse" />
+                </a>
+                <a v-else @click="shallowNotifyWhyCannotConfirm(give)">
+                  <fa
+                    icon="circle-check"
+                    class="text-slate-500 cursor-pointer"
+                  />
+                </a>
+              </div>
+              <div v-if="give.fullClaim.image" class="flex justify-center">
+                <a :href="give.fullClaim.image" target="_blank">
+                  <img
+                    :src="give.fullClaim.image"
+                    class="h-24 mt-2 rounded-xl"
+                  />
+                </a>
+              </div>
             </li>
           </ul>
         </div>
@@ -594,7 +619,7 @@ export default class ProjectViewView extends Vue {
   givesHitLimit = false;
   givesProvidedByThis: Array<GiveSummaryRecord> = [];
   givesProvidedByHitLimit = false;
-  givesTotalsByUnit: Array<{unit: string, amount: number}> = [];
+  givesTotalsByUnit: Array<{ unit: string; amount: number }> = [];
   imageUrl = "";
   isRegistered = false;
   issuer = "";
@@ -1254,14 +1279,17 @@ export default class ProjectViewView extends Vue {
 
   async loadTotals() {
     this.loadingTotals = true;
-    const url = this.apiServer + "/api/v2/report/givesToPlans?planIds=" + encodeURIComponent(JSON.stringify([this.projectId]));
+    const url =
+      this.apiServer +
+      "/api/v2/report/givesToPlans?planIds=" +
+      encodeURIComponent(JSON.stringify([this.projectId]));
     const headers = await serverUtil.getHeaders(this.activeDid);
 
     try {
       const resp = await this.axios.get(url, { headers });
       if (resp.status === 200 && resp.data.data) {
         // Calculate totals by unit
-        const totals: {[key: string]: number} = {};
+        const totals: { [key: string]: number } = {};
         resp.data.data.forEach((give: GiveSummaryRecord) => {
           const amount = give.fullClaim.object?.amountOfThisGood;
           const unit = give.fullClaim.object?.unitCode;
@@ -1269,12 +1297,14 @@ export default class ProjectViewView extends Vue {
             totals[unit] = (totals[unit] || 0) + amount;
           }
         });
-        
+
         // Convert totals object to array format
-        this.givesTotalsByUnit = Object.entries(totals).map(([unit, amount]) => ({
-          unit,
-          amount
-        }));
+        this.givesTotalsByUnit = Object.entries(totals).map(
+          ([unit, amount]) => ({
+            unit,
+            amount,
+          }),
+        );
       }
     } catch (error) {
       console.error("Error loading totals:", error);
@@ -1293,7 +1323,9 @@ export default class ProjectViewView extends Vue {
   }
 
   givenTotalHours(): number {
-    return this.givesTotalsByUnit.find(total => total.unit === "HUR")?.amount || 0;
+    return (
+      this.givesTotalsByUnit.find((total) => total.unit === "HUR")?.amount || 0
+    );
   }
 }
 </script>