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] 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 df6f9ba..3960917 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 062adb0..083b2d8 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 0000000..0029849
--- /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>