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

README.md

@@ -153,8 +153,10 @@ To add an icon, add to main.ts and reference with `fa` element and `icon` attrib
 
 Gifts make the world go 'round!
 
+* [WebStorm by JetBrains](https://www.jetbrains.com/webstorm/) for the free open-source license
 * [Máximo Fernández](https://medium.com/@maxfarenas) for the 3D [code](https://github.com/maxfer03/vue-three-ns) and [explanatory post](https://medium.com/nicasource/building-an-interactive-web-portfolio-with-vue-three-js-part-three-implementing-three-js-452cb375ef80)
-* [Many tools & libraries]() such as Nodejs.org, IntelliJ Idea, Veramo.io, Vuejs.org, threejs.org
+* [Many tools & libraries](https://gitea.anomalistdesign.com/trent_larson/crowd-funder-for-time-pwa/src/branch/master/package.json#L10) such as Nodejs.org, IntelliJ Idea, Veramo.io, Vuejs.org, threejs.org
 * [Bush 3D model](https://sketchfab.com/3d-models/lupine-plant-bf30f1110c174d4baedda0ed63778439)
 * [Forest floor image](https://www.goodfreephotos.com/albums/textures/leafy-autumn-forest-floor.jpg)
 * Time Safari logo assisted by [DALL-E in ChatGPT](https://chat.openai.com/g/g-2fkFE8rbu-dall-e)
+* [DiceBear](https://www.dicebear.com/licenses/) and [Avataaars](https://www.dicebear.com/styles/avataaars/#details) for human-looking identicons

project.task.yaml

@@ -1,9 +1,10 @@
 
 tasks:
 
+- .5 give list of visible IDs on the claim detail page
+  - instead of text, make links to share the data with contacts and ask for help
 - choose an agent via a contact chooser (not just copy-paste a DID)
 - .5 find out why clicking quickly back-and-forth onto the "my project" page often shows error "You need an identifier to load your projects." (easier to reproduce on desktop?)
-- .5 give list of visible IDs on the claim detail page
 - .5 bug - it didn't show the "fulfills offer" on the claim detail page for a give that had one - https://test.timesafari.app/claim/01HMFWRPA3PD6Q9EYFKX3MC41J
 - 01 replace all "confirm" prompts with nicer modal
 - .1 hide project-create button on project page if not registered

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);