add first stab at showing how the contact is visible in my network

src/libs/util.ts

@@ -95,6 +95,61 @@ export const canFulfillOffer = (veriClaim: GenericServerRecord) => {
   return !!(veriClaim.claimType === "Offer" && offerGiverDid(veriClaim));
 };
 
+// return object with paths and arrays of DIDs for any keys ending in "VisibleToDid"
+export function findAllVisibleToDids(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  input: any,
+): Record<string, Array<string>> {
+  if (Array.isArray(input)) {
+    const result: Record<string, Array<string>> = {};
+    for (let i = 0; i < input.length; i++) {
+      const inside = findAllVisibleToDids(input[i]);
+      for (const key in inside) {
+        result["[" + i + "]" + key] = inside[key];
+      }
+    }
+    return result;
+  } else if (input instanceof Object) {
+    // regular map (non-array) object
+    const result: Record<string, Array<string>> = {};
+    for (const key in input) {
+      if (key.endsWith("VisibleToDids")) {
+        const newKey = key.slice(0, -"VisibleToDids".length);
+        result["." + newKey] = input[key];
+      } else {
+        const inside = findAllVisibleToDids(input[key]);
+        for (const insideKey in inside) {
+          result["." + key + insideKey] = inside[insideKey];
+        }
+      }
+    }
+    return result;
+  } else {
+    return {};
+  }
+}
+
+/**
+ * Test findAllVisibleToDids
+ *
+
+ pkgx +deno.land sh
+
+ import * as R from 'ramda';
+
+ console.log(R.equals(findAllVisibleToDids(null), {}));
+ console.log(R.equals(findAllVisibleToDids(9), {}));
+ console.log(R.equals(findAllVisibleToDids([]), {}));
+ console.log(R.equals(findAllVisibleToDids({}), {}));
+ console.log(R.equals(findAllVisibleToDids({ issuer: "abc" }), {}));
+ console.log(R.equals(findAllVisibleToDids({ issuerVisibleToDids: ["abc"] }), { ".issuer": ["abc"] }));
+ console.log(R.equals(findAllVisibleToDids([{ issuerVisibleToDids: ["abc"] }]), { "[0].issuer": ["abc"] }));
+ console.log(R.equals(findAllVisibleToDids(["xyz", { fluff: { issuerVisibleToDids: ["abc"] } }]), { "[1].fluff.issuer": ["abc"] }));
+ console.log(R.equals(findAllVisibleToDids(["xyz", { fluff: { issuerVisibleToDids: ["abc"] }, stuff: [ { did: "HIDDEN", agentDidVisibleToDids: ["def", "ghi"] } ] }]), { "[1].fluff.issuer": ["abc"], "[1].stuff[0].agentDid": ["def", "ghi"] }));
+
+ *
+ **/
+
 /**
  * Generates a new identity, saves it to the database, and sets it as the active identity.
  * @return {Promise<string>} with the DID of the new identity

src/views/ClaimView.vue

@@ -236,6 +236,35 @@
 
     <div>
       <h2 class="font-bold uppercase text-xl mt-8 mb-2">Visible Details</h2>
+      <div v-if="Object.keys(veriClaimDidsVisible).length > 0">
+        Some of the details are not visible to you but they are visible to some
+        of your contacts. If you'd like an introduction, share the information
+        with them and ask them to connect you.
+        <div
+          v-for="(visibleDidPath, index) of Object.keys(veriClaimDidsVisible)"
+          :key="index"
+          class="list-disc flex justify-start p-2"
+        >
+          <div class="text-sm p-4">
+            {{ visibleDidPath }}
+          </div>
+          <div class="p-4">
+            <ul>
+              <li
+                v-for="(visDid, idx2) of veriClaimDidsVisible[visibleDidPath]"
+                :key="idx2"
+                class="list-disc"
+              >
+                <div class="text-sm">
+                  {{ didInfo(visDid) }}
+                  {{ veriClaim.publicUrls?.[visDid] || "" }}
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+      <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
       <pre
         class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md"
         >{{ veriClaimDump }}</pre
@@ -325,6 +354,7 @@ export default class ClaimView extends Vue {
   showIdCopy = false;
   veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
   veriClaimDump = "";
+  veriClaimDidsVisible = {};
 
   yaml = yaml;
   libsUtil = libsUtil;
@@ -421,13 +451,13 @@ export default class ClaimView extends Vue {
   }
 
   // Isn't there a better way to make this available to the template?
-  didInfo(
-    did: string,
-    activeDid: string,
-    dids: Array<string>,
-    contacts: Array<Contact>,
-  ) {
-    return serverUtil.didInfo(did, activeDid, dids, contacts);
+  didInfo(did: string) {
+    return serverUtil.didInfo(
+      did,
+      this.activeDid,
+      this.allMyDids,
+      this.allContacts,
+    );
   }
 
   async loadClaim(claimId: string, identity: IIdentifier) {
@@ -440,6 +470,9 @@ export default class ClaimView extends Vue {
       if (resp.status === 200) {
         this.veriClaim = resp.data;
         this.veriClaimDump = yaml.dump(this.veriClaim);
+        this.veriClaimDidsVisible = libsUtil.findAllVisibleToDids(
+          this.veriClaim,
+        );
       } else {
         // actually, axios typically throws an error so we never get here
         console.error("Error getting claim:", resp);