Merge remote-tracking branch 'origin/jdenticon-entity-photos'

1 year ago · 9a41aff8f0
9 changed files with 114 additions and 35 deletions
--- 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",
@ -12049,6 +12050,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",
@ -17798,6 +17807,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",
--- 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",
--- a/src/components/EntityIcon.vue
+++ 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>
--- 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 = "";
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@ -76,12 +76,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>
@ -144,7 +149,7 @@
              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]"
              >
@ -159,11 +164,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]"
              >
@ -178,7 +183,7 @@
                        : (givenToMeUnconfirmed[contact.did] || 0)
                  /* eslint-enable prettier/prettier */
                }}
-                <fa icon="plus" class="fa-fw" />
+                <fa icon="plus" />
              </button>

              <router-link
@ -221,12 +226,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 = "";
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@ -83,13 +83,15 @@
            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">{{ project.name }}</h2>
              <h2 class="text-base font-semibold">{{ project.name }}</h2>
              <div class="text-sm">
                <fa icon="user" class="fa-fw text-slate-400"></fa>
@ -120,9 +122,10 @@ import { didInfo } from "@/libs/endorserServer";
 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 = "";
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -104,9 +104,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"
          >
@ -183,9 +185,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 = "";
--- 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">
@ -183,9 +195,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 = "";
--- 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 = "";