From 9fa3b8be0b18a7835400456234d6290dc2a14891 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Mon, 24 Jul 2023 19:32:11 +0800
Subject: [PATCH 1/3] Built jdenticon component

---
 package-lock.json             | 23 +++++++++++++++++++++++
 package.json                  |  1 +
 src/components/EntityIcon.vue | 19 +++++++++++++++++++
 3 files changed, 43 insertions(+)
 create mode 100644 src/components/EntityIcon.vue

diff --git a/package-lock.json b/package-lock.json
index df6f9bab..39609170 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -33,6 +33,7 @@
         "ethereum-cryptography": "^2.0.0",
         "ethereumjs-util": "^7.1.5",
         "ethr-did-resolver": "^8.0.0",
+        "jdenticon": "^3.2.0",
         "js-generate-password": "^0.1.9",
         "localstorage-slim": "^2.4.0",
         "luxon": "^3.3.0",
@@ -12048,6 +12049,14 @@
       "resolved": "https://registry.npmjs.org/canonicalize/-/canonicalize-2.0.0.tgz",
       "integrity": "sha512-ulDEYPv7asdKvqahuAY35c1selLdzDwHqugK92hfkzvlDCwXRRelDkR+Er33md/PtnpqHemgkuDPanZ4fiYZ8w=="
     },
+    "node_modules/canvas-renderer": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/canvas-renderer/-/canvas-renderer-2.2.1.tgz",
+      "integrity": "sha512-RrBgVL5qCEDIXpJ6NrzyRNoTnXxYarqm/cS/W6ERhUJts5UQtt/XPEosGN3rqUkZ4fjBArlnCbsISJ+KCFnIAg==",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/case-sensitive-paths-webpack-plugin": {
       "version": "2.4.0",
       "resolved": "https://registry.npmmirror.com/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz",
@@ -17797,6 +17806,20 @@
       "integrity": "sha512-JVAfqNPTvNq3sB/VHQJAFxN/sPgKnsKrCwyRt15zwNCdrMMJDdcEOdubuy+DuJYYdm0ox1J4uzEuYKkN+9yhVg==",
       "dev": true
     },
+    "node_modules/jdenticon": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jdenticon/-/jdenticon-3.2.0.tgz",
+      "integrity": "sha512-z6Iq3fTODUMSOiR2nNYrqigS6Y0GvdXfyQWrUby7htDHvX7GNEwaWR4hcaL+FmhEgBe08Xkup/BKxXQhDJByPA==",
+      "dependencies": {
+        "canvas-renderer": "~2.2.0"
+      },
+      "bin": {
+        "jdenticon": "bin/jdenticon.js"
+      },
+      "engines": {
+        "node": ">=6.4.0"
+      }
+    },
     "node_modules/jest-environment-node": {
       "version": "29.5.0",
       "resolved": "https://registry.npmjs.org/jest-environment-node/-/jest-environment-node-29.5.0.tgz",
diff --git a/package.json b/package.json
index 062adb04..083b2d88 100644
--- a/package.json
+++ b/package.json
@@ -33,6 +33,7 @@
     "ethereum-cryptography": "^2.0.0",
     "ethereumjs-util": "^7.1.5",
     "ethr-did-resolver": "^8.0.0",
+    "jdenticon": "^3.2.0",
     "js-generate-password": "^0.1.9",
     "localstorage-slim": "^2.4.0",
     "luxon": "^3.3.0",
diff --git a/src/components/EntityIcon.vue b/src/components/EntityIcon.vue
new file mode 100644
index 00000000..00298492
--- /dev/null
+++ b/src/components/EntityIcon.vue
@@ -0,0 +1,19 @@
+<template>
+  <div v-html="generateIdenticon()" class="w-fit"></div>
+</template>
+<script lang="ts">
+import { Vue, Component, Prop } from "vue-facing-decorator";
+import { toSvg } from "jdenticon";
+
+@Component
+export default class EntityIcon extends Vue {
+  @Prop entityId = "";
+  @Prop iconSize = "";
+
+  generateIdenticon() {
+    const svgString = toSvg(this.entityId, this.iconSize);
+    return svgString;
+  }
+}
+</script>
+<style scoped></style>

From 503bb1bd93886ca7e42c76966981acc5a4992584 Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Mon, 24 Jul 2023 19:32:30 +0800
Subject: [PATCH 2/3] Added jdenticon to home and contact gives views

---
 src/views/ContactGiftingView.vue | 17 +++++++++++++----
 src/views/HomeView.vue           | 11 +++++++----
 2 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/src/views/ContactGiftingView.vue b/src/views/ContactGiftingView.vue
index 11b78213..d0fa939c 100644
--- a/src/views/ContactGiftingView.vue
+++ b/src/views/ContactGiftingView.vue
@@ -24,8 +24,12 @@
     <ul class="border-t border-slate-300">
       <li class="border-b border-slate-300 py-3">
         <h2 class="text-base flex gap-4 items-center">
-          <span class="grow italic"
-            ><fa icon="question-circle" class="fa-fw fa-xl text-slate-400"></fa>
+          <span class="grow italic text-slate-500"
+            ><EntityIcon
+              entityId="Anonymous"
+              :iconSize="32"
+              class="opacity-50 inline-block align-middle border border-dashed border-slate-400 bg-slate-200 rounded-md mr-1"
+            ></EntityIcon>
             Anonymous
           </span>
           <span class="text-right">
@@ -46,7 +50,11 @@
       >
         <h2 class="text-base flex gap-4 items-center">
           <span class="grow font-semibold"
-            ><fa icon="user" class="fa-fw fa-xl text-slate-400"></fa>
+            ><EntityIcon
+              :entityId="contact.did"
+              :iconSize="32"
+              class="inline-block align-middle border border-slate-300 rounded-md mr-1"
+            ></EntityIcon>
             {{ contact.name || "(no name)" }}
           </span>
           <span class="text-right">
@@ -87,9 +95,10 @@ import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
 import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
+import EntityIcon from "@/components/EntityIcon";
 
 @Component({
-  components: { GiftedDialog, AlertMessage, QuickNav },
+  components: { GiftedDialog, AlertMessage, QuickNav, EntityIcon },
 })
 export default class HomeView extends Vue {
   activeDid = "";
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index d7bb77fc..a582403f 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -16,9 +16,11 @@
           :key="contact.did"
           @click="openDialog(contact)"
         >
-          <div class="mb-1">
-            <fa icon="user" class="fa-fw fa-xl text-slate-400"></fa>
-          </div>
+          <EntityIcon
+            :entityId="contact.did"
+            :iconSize="64"
+            class="mx-auto border border-slate-300 rounded-md mb-1"
+          ></EntityIcon>
           <h3
             class="text-xs font-medium text-ellipsis whitespace-nowrap overflow-hidden"
           >
@@ -95,9 +97,10 @@ import { createAndSubmitGive, didInfo } from "@/libs/endorserServer";
 import { Contact } from "@/db/tables/contacts";
 import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
+import EntityIcon from "@/components/EntityIcon";
 
 @Component({
-  components: { GiftedDialog, AlertMessage, QuickNav },
+  components: { GiftedDialog, AlertMessage, QuickNav, EntityIcon },
 })
 export default class HomeView extends Vue {
   activeDid = "";

From 4b87692231c3ac2a6145db528304096f87ad246c Mon Sep 17 00:00:00 2001
From: Jose Olarte III <brownspank@anomalistdesign.com>
Date: Tue, 25 Jul 2023 18:41:23 +0800
Subject: [PATCH 3/3] Added jdenticon to more views

---
 src/views/ContactsView.vue    | 18 ++++++++++++------
 src/views/DiscoverView.vue    | 16 +++++++++-------
 src/views/ProjectViewView.vue | 35 ++++++++++++++++++++++++-----------
 src/views/ProjectsView.vue    | 12 +++++++-----
 4 files changed, 52 insertions(+), 29 deletions(-)

diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index e3f3c6c5..66a87df8 100644
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -72,12 +72,17 @@
     <!-- Results List -->
     <ul v-if="contacts.length > 0" class="border-t border-slate-300">
       <li
-        class="border-b border-slate-300 py-4"
+        class="border-b border-slate-300 pt-2.5 pb-4"
         v-for="contact in contacts"
         :key="contact.did"
       >
         <div class="grow overflow-hidden">
           <h2 class="text-base font-semibold">
+            <EntityIcon
+              :entityId="contact.did"
+              :iconSize="24"
+              class="inline-block align-text-bottom border border-slate-300 rounded"
+            ></EntityIcon>
             {{ contact.name || "(no name)" }}
           </h2>
           <div class="text-sm truncate">{{ contact.did }}</div>
@@ -137,7 +142,7 @@
 
             <div v-if="!showGiveNumbers" class="ml-auto flex gap-1.5">
               <button
-                class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
+                class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded-l-md"
                 @click="onClickAddGive(activeDid, contact.did)"
                 title="givenByMeDescriptions[contact.did]"
               >
@@ -152,11 +157,11 @@
                         : (givenByMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <fa icon="plus" class="fa-fw" />
+                <fa icon="plus" />
               </button>
 
               <button
-                class="text-sm uppercase bg-blue-600 text-white px-2 py-1.5 rounded-md"
+                class="text-sm bg-blue-600 text-white px-2 py-1.5 rounded-r-md -ml-1.5 border-l border-blue-400"
                 @click="onClickAddGive(contact.did, activeDid)"
                 title="givenToMeDescriptions[contact.did]"
               >
@@ -171,7 +176,7 @@
                         : (givenToMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <fa icon="plus" class="fa-fw" />
+                <fa icon="plus" />
               </button>
 
               <router-link
@@ -214,12 +219,13 @@ import {
 import { Component, Vue } from "vue-facing-decorator";
 import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
+import EntityIcon from "@/components/EntityIcon";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
 @Component({
-  components: { AlertMessage, QuickNav },
+  components: { AlertMessage, QuickNav, EntityIcon },
 })
 export default class ContactsView extends Vue {
   activeDid = "";
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index a223f72e..e3b4c12f 100644
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -83,17 +83,18 @@
             class="block py-4 flex gap-4"
           >
             <div class="w-12">
-              <img
-                src="https://picsum.photos/200/200?random=1"
-                class="w-full rounded"
-              />
+              <EntityIcon
+                :entityId="project.handleId"
+                :iconSize="48"
+                class="block border border-slate-300 rounded-md"
+              ></EntityIcon>
             </div>
 
             <div class="grow">
-              <h2 class="text-base font-semibold">Canyon cleanup</h2>
+              <h2 class="text-base font-semibold">{{ project.name }}</h2>
               <div class="text-sm">
                 <fa icon="user" class="fa-fw text-slate-400"></fa>
-                {{ project.name }}
+                (User)
               </div>
             </div>
           </a>
@@ -116,9 +117,10 @@ import { accessToken } from "@/libs/crypto";
 import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
 import InfiniteScroll from "@/components/InfiniteScroll";
+import EntityIcon from "@/components/EntityIcon";
 
 @Component({
-  components: { AlertMessage, QuickNav, InfiniteScroll },
+  components: { AlertMessage, QuickNav, InfiniteScroll, EntityIcon },
 })
 export default class DiscoverView extends Vue {
   activeDid = "";
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index f53dc3fc..acd06c3d 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -26,16 +26,28 @@
     <!-- Project Details -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
       <div>
-        <h2 class="text-xl font-semibold">{{ name }}</h2>
-        <div class="flex justify-between gap-4 text-sm mb-3">
-          <span
-            ><fa icon="user" class="fa-fw text-slate-400"></fa>
-            {{ issuer }}</span
-          >
-          <span
-            ><fa icon="calendar" class="fa-fw text-slate-400"></fa
-            >{{ timeSince }}
-          </span>
+        <div class="block pb-4 flex gap-4">
+          <div class="flex-none w-16 pt-1">
+            <EntityIcon
+              :entityId="projectId"
+              :iconSize="64"
+              class="block border border-slate-300 rounded-md"
+            ></EntityIcon>
+          </div>
+
+          <div class="overflow-hidden">
+            <h2 class="text-xl font-semibold">{{ name }}</h2>
+            <div class="text-sm mb-3">
+              <div class="truncate"
+                ><fa icon="user" class="fa-fw text-slate-400"></fa>
+                {{ issuer }}</div
+              >
+              <div
+                ><fa icon="calendar" class="fa-fw text-slate-400"></fa
+                >{{ timeSince }}
+              </div>
+            </div>
+          </div>
         </div>
 
         <div class="text-sm text-slate-500">
@@ -173,9 +185,10 @@ import {
 } from "@/libs/endorserServer";
 import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
+import EntityIcon from "@/components/EntityIcon";
 
 @Component({
-  components: { GiftedDialog, AlertMessage, QuickNav },
+  components: { GiftedDialog, AlertMessage, QuickNav, EntityIcon },
 })
 export default class ProjectViewView extends Vue {
   activeDid = "";
diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index 0def1230..4277ab7a 100644
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -50,10 +50,11 @@
             class="block py-4 flex gap-4"
           >
             <div class="flex-none w-12">
-              <img
-                src="https://picsum.photos/200/200?random=1"
-                class="w-full rounded"
-              />
+              <EntityIcon
+                :entityId="project.handleId"
+                :iconSize="48"
+                class="inline-block align-middle border border-slate-300 rounded-md"
+              ></EntityIcon>
             </div>
 
             <div class="grow overflow-hidden">
@@ -82,9 +83,10 @@ import { IIdentifier } from "@veramo/core";
 import InfiniteScroll from "@/components/InfiniteScroll";
 import AlertMessage from "@/components/AlertMessage";
 import QuickNav from "@/components/QuickNav";
+import EntityIcon from "@/components/EntityIcon";
 
 @Component({
-  components: { InfiniteScroll, AlertMessage, QuickNav },
+  components: { InfiniteScroll, AlertMessage, QuickNav, EntityIcon },
 })
 export default class ProjectsView extends Vue {
   apiServer = "";