add number of confirmers to certificate & show DID info when appropriate

src/libs/endorserServer.ts

@@ -437,6 +437,7 @@ export function didInfoForContact(
   activeDid: string | undefined,
   contact?: Contact,
   allMyDids: string[] = [],
+  showDidForVisible: boolean = false,
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 ): { known: boolean; displayName: string; profileImageUrl?: string } {
   if (!did) return { displayName: "Someone Unnamed/Unknown", known: false };
@@ -453,9 +454,11 @@ export function didInfoForContact(
     return myId
       ? { displayName: "You (Alt ID)", known: true }
       : isHiddenDid(did)
-        ? { displayName: "Someone Totally Outside Your View", known: false }
+        ? { displayName: "Someone Outside Your View", known: false }
         : {
-            displayName: "Someone Visible But Outside Your Contact List",
+            displayName: showDidForVisible
+              ? did
+              : "Someone Visible But Not In Your Contact List",
             known: false,
           };
   }
@@ -483,8 +486,13 @@ export function didInfoForCertificate(
   did: string | undefined,
   contacts: Contact[],
 ): string {
-  return didInfoForContact(did, undefined, contactForDid(did, contacts), [])
-    .displayName;
+  return didInfoForContact(
+    did,
+    undefined,
+    contactForDid(did, contacts),
+    [],
+    true,
+  ).displayName;
 }
 
 let passkeyAccessToken: string = "";

src/views/ClaimCertificateView.vue

@@ -23,7 +23,7 @@ import QRCode from "qrcode";
 
 import { APP_SERVER, NotificationIface } from "@/constants/app";
 import { db, retrieveSettingsForActiveAccount } from "@/db/index";
-import * as endorserServer from "@/libs/endorserServer";
+import * as serverUtil from "@/libs/endorserServer";
 
 @Component
 export default class ClaimCertificateView extends Vue {
@@ -35,7 +35,7 @@ export default class ClaimCertificateView extends Vue {
   claimId = "";
   claimData = null;
 
-  endorserServer = endorserServer;
+  serverUtil = serverUtil;
 
   async created() {
     const settings = await retrieveSettingsForActiveAccount();
@@ -50,14 +50,27 @@ export default class ClaimCertificateView extends Vue {
 
   async fetchClaim() {
     try {
-      const response = await fetch(
+      const headers = await serverUtil.getHeaders(this.activeDid);
+      const response = await this.axios.get(
         `${this.apiServer}/api/claim/${this.claimId}`,
+        { headers },
       );
-      if (response.ok) {
-        this.claimData = await response.json();
+      if (response.status === 200) {
+        this.claimData = await response.data;
+        const claimEntryIds = [this.claimId];
+        const headers = await serverUtil.getHeaders(this.activeDid);
+        const confirmerResponse = await this.axios.post(
+          `${this.apiServer}/api/v2/report/confirmers/?claimEntryIds=${this.claimId}`,
+          { claimEntryIds },
+          { headers },
+        );
+        let confirmerIds: Array<string> = [];
+        if (confirmerResponse.status === 200) {
+          confirmerIds = await confirmerResponse.data.data;
+        }
         await nextTick(); // Wait for the DOM to update
         if (this.claimData) {
-          this.drawCanvas(this.claimData);
+          this.drawCanvas(this.claimData, confirmerIds);
         }
       } else {
         throw new Error(`Error fetching claim: ${response.statusText}`);
@@ -74,7 +87,8 @@ export default class ClaimCertificateView extends Vue {
   }
 
   async drawCanvas(
-    claimData: endorserServer.GenericCredWrapper<endorserServer.GenericVerifiableCredential>,
+    claimData: serverUtil.GenericCredWrapper<serverUtil.GenericVerifiableCredential>,
+    confirmerIds: Array<string>,
   ) {
     await db.open();
     const allContacts = await db.contacts.toArray();
@@ -102,7 +116,7 @@ export default class ClaimCertificateView extends Vue {
           // Draw claim type
           ctx.font = "bold 20px Arial";
           const claimTypeText =
-            this.endorserServer.capitalizeAndInsertSpacesBeforeCaps(
+            this.serverUtil.capitalizeAndInsertSpacesBeforeCaps(
               claimData.claimType || "",
             );
           const claimTypeWidth = ctx.measureText(claimTypeText).width;
@@ -121,8 +135,10 @@ export default class ClaimCertificateView extends Vue {
               (CANVAS_WIDTH - presentedWidth) / 2, // Center horizontally
               CANVAS_HEIGHT * 0.37,
             );
-            const agentText = endorserServer.didInfoForCertificate(
-              claimData.claim.agent,
+            const agentDid =
+              claimData.claim.agent.identifier || claimData.claim.agent;
+            const agentText = serverUtil.didInfoForCertificate(
+              agentDid,
               allContacts,
             );
             ctx.font = "bold 20px Arial";
@@ -155,12 +171,21 @@ export default class ClaimCertificateView extends Vue {
             ctx.font = "14px Arial";
             const issuerText =
               "Issued by " +
-              endorserServer.didInfoForCertificate(
-                claimData.issuer,
-                allContacts,
-              );
+              serverUtil.didInfoForCertificate(claimData.issuer, allContacts);
             ctx.fillText(issuerText, CANVAS_WIDTH * 0.3, CANVAS_HEIGHT * 0.6);
           }
+          if (confirmerIds.length > 0) {
+            const confirmerText =
+              "Confirmed by " +
+              confirmerIds.length +
+              (confirmerIds.length === 1 ? " person" : " people");
+            ctx.font = "14px Arial";
+            ctx.fillText(
+              confirmerText,
+              CANVAS_WIDTH * 0.3,
+              CANVAS_HEIGHT * 0.63,
+            );
+          }
 
           // Draw claim ID
           ctx.font = "14px Arial";

src/views/ClaimView.vue

@@ -19,7 +19,7 @@
     <!-- Details -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
       <div class="block flex gap-4 overflow-hidden">
-        <div class="overflow-hidden">
+        <div class="overflow-hidden w-full">
           <div class="flex justify-between">
             <h2 class="text-md font-bold">
               {{ capitalizeAndInsertSpacesBeforeCaps(veriClaim.claimType) }}

src/views/NewEditProjectView.vue

@@ -490,7 +490,7 @@ export default class NewEditProjectView extends Vue {
             title: "Error Saving Idea",
             text: "Server did not save the idea. Try again.",
           },
-          -1,
+          5000,
         );
       }
     } catch (error) {
@@ -511,7 +511,7 @@ export default class NewEditProjectView extends Vue {
               title: "User Message",
               text: userMessage,
             },
-            -1,
+            5000,
           );
         } else {
           this.$notify(
@@ -521,7 +521,7 @@ export default class NewEditProjectView extends Vue {
               title: "Server Message",
               text: JSON.stringify(serverError.toJSON()),
             },
-            -1,
+            5000,
           );
         }
       } else {
@@ -533,7 +533,7 @@ export default class NewEditProjectView extends Vue {
             title: "Claim Error",
             text: error as string,
           },
-          -1,
+          5000,
         );
       }
       // Now set that error for the user to see.

test-playwright/40-add-contact.spec.ts

@@ -76,6 +76,7 @@ test('Add contact, record gift, confirm gift', async ({ page }) => {
   await page.getByText('You have a seed').click();
   await page.getByPlaceholder('Seed Phrase').fill('rigid shrug mobile smart veteran half all pond toilet brave review universe ship congress found yard skate elite apology jar uniform subway slender luggage');
   await page.getByRole('button', { name: 'Import' }).click();
+  await expect(page.getByRole('code')).toContainText('did:ethr:0x0000694B58C2cC69658993A90D3840C560f2F51F');
 
   // Go to home view and look for gift
   await page.goto('./');