Update Nimiq Identicons

package.json

@@ -33,9 +33,9 @@
     "i18n:sync": "echo \"vue3-components use vue-components's language files. Please update them there.\""
   },
   "dependencies": {
-    "@nimiq/identicons": "^1.6.2",
     "@nimiq/style": "^0.8.5",
     "@nimiq/utils": "^0.9.1",
+    "identicons-esm": "^0.2.6",
     "input-format": "^0.3.7",
     "js-sha3": "^0.8.0",
     "qr-creator": "^1.0.0",

src/components/Identicon/Identicon.stories.js

@@ -6,6 +6,7 @@ export default {
     argTypes: {
         // Props
         address: { control: { type: 'text' } },
+        shouldValidateAddress: { control: { type: 'boolean' } },
     },
 };
 
@@ -22,4 +23,5 @@ const Template = (args) => ({
 export const Default = Template.bind({});
 Default.args = {
     address: 'NQ07 0000 00000000 0000 0000 0000 0000 0000',
+    shouldValidateAddress: true,
 };

src/components/Identicon/Identicon.vue

@@ -1,68 +1,22 @@
 <template>
-    <div class="identicon">
-        <img :src="dataUrl">
-    </div>
+    <nimiq-identicon :input="address" :should-validate-address="shouldValidateAddress" class="identicon" />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, ref, watch } from 'vue';
-import { ValidationUtils } from '@nimiq/utils';
-// @ts-expect-error Could not find a declaration file for module '@nimiq/identicons/dist/identicons.min.js'.
-import Identicons from '@nimiq/identicons/dist/identicons.min.js';
-
-import identiconRaw from '@nimiq/identicons/dist/identicons.min.svg?raw';
-Identicons.svgPath = `data:text/plain;base64,${window.btoa(identiconRaw)}`;
+import { defineComponent } from 'vue';
+import 'identicons-esm/web-component';
 
 export default defineComponent({
     name: 'Identicon',
     props: {
         address: {
             required: true,
             type: String,
+        },
+        shouldValidateAddress: {
+            required: false,
+            type: Boolean,
         }
-    },
-    setup(props, context) {
-        function formatAddress(str: string) {
-            return str.replace(/[\+ ]/g, '').toUpperCase().match(/.{4}/g)!.join(' ');
-        }
-
-        function isUserFriendlyAddress(str: string) {
-            return ValidationUtils.isValidAddress(str);
-        }
-
-        const placeholderDataUrl = computed(() => {
-            // tslint:disable-next-line max-line-length
-            return 'data:image/svg+xml,<svg width="64" height="64" viewBox="0 -4 64 64" fill="none" xmlns="http://www.w3.org/2000/svg"><path opacity=".1" d="M62.3 25.4L49.2 2.6A5.3 5.3 0 0 0 44.6 0H18.4c-1.9 0-3.6 1-4.6 2.6L.7 25.4c-1 1.6-1 3.6 0 5.2l13.1 22.8c1 1.6 2.7 2.6 4.6 2.6h26.2c1.9 0 3.6-1 4.6-2.6l13-22.8c1-1.6 1-3.6.1-5.2z" fill="url(%23identicon_radial)"/><defs><radialGradient id="identicon_radial" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-63.0033 0 0 -56 63 56)"><stop stop-color="%23260133"/><stop offset="1" stop-color="%231F2348"/></radialGradient></defs></svg>';
-        });
-
-        const dataUrl = ref(placeholderDataUrl.value);
-
-        watch(() => props.address, computeDataUrl, { immediate: true })
-        async function computeDataUrl(address: string, oldAddress?: string) {
-            if (props.address && isUserFriendlyAddress(props.address)) {
-                // // Set svgPath
-                // Identicons.svgPath = (await import('@nimiq/identicons/dist/identicons.min.svg?url')).default;
-
-                dataUrl.value = await Identicons.toDataUrl(formatAddress(props.address));
-            } else {
-                dataUrl.value = placeholderDataUrl.value;
-            }
-            return true;
-        }
-
-        context.expose({
-            formatAddress,
-            isUserFriendlyAddress,
-        });
-
-        return { dataUrl };
     }
 })
 </script>
-
-<style scoped>
-    img {
-        width: 100%;
-        height: 100%;
-    }
-</style>

src/components/ShinyIdenticon/ShinyIdenticon.stories.js

@@ -0,0 +1,33 @@
+import ShinyIdenticon from './ShinyIdenticon.vue';
+
+export default {
+    title: 'ShinyIdenticon',
+    component: ShinyIdenticon,
+    argTypes: {
+        // Props
+        address: { control: { type: 'text' } },
+        material: { 
+            control: { type: 'select' },
+            options: ['bronze', 'silver', 'gold'],
+            required: true
+        },
+        shouldValidateAddress: { control: { type: 'boolean' } },
+    },
+};
+
+const Template = (args) => ({
+    components: { ShinyIdenticon },
+    setup() {
+        return { args };
+    },
+    template: `
+        <ShinyIdenticon v-bind="args"/>
+    `,
+});
+
+export const Default = Template.bind({});
+Default.args = {
+    address: 'NQ07 0000 00000000 0000 0000 0000 0000 0000',
+    shouldValidateAddress: true,
+    material: 'bronze'
+};

src/components/ShinyIdenticon/ShinyIdenticon.vue

@@ -0,0 +1,28 @@
+<template>
+    <nimiq-shiny-identicon :input="address" :material="material" :should-validate-address="shouldValidateAddress" class="identicon" />
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from 'vue';
+import type { IdenticonMaterial } from 'identicons-esm/types'
+import 'identicons-esm/shiny-web-component';
+
+export default defineComponent({
+    name: 'ShinyIdenticon',
+    props: {
+        address: {
+            required: true,
+            type: String,
+        },
+        shouldValidateAddress: {
+            required: false,
+            type: Boolean,
+        },
+        material: {
+            required: false,
+            type: String as PropType<IdenticonMaterial>,
+            default: false,
+        }
+    },
+})
+</script>

src/main.ts

@@ -17,6 +17,7 @@ export { default as Copyable } from './components/Copyable/Copyable.vue';
 export { default as CopyableField } from './components/CopyableField/CopyableField.vue';
 export { default as FiatAmount } from './components/FiatAmount/FiatAmount.vue';
 export { default as Identicon } from './components/Identicon/Identicon.vue';
+export { default as ShinyIdenticon } from './components/ShinyIdenticon/ShinyIdenticon.vue';
 export { default as LabelInput } from './components/LabelInput/LabelInput.vue';
 export { default as LoadingSpinner } from './components/LoadingSpinner/LoadingSpinner.vue';
 export { default as LongPressButton } from './components/LongPressButton/LongPressButton.vue';

vite.config.ts

@@ -15,7 +15,13 @@ crypto.createHash = (alg: string, opts: crypto.HashOptions | undefined) => {
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [
-        vue(),
+        vue({
+            template: {
+                compilerOptions: {
+                    isCustomElement: (tag) => ['nimiq-shiny-identicon','nimiq-identicon'].includes(tag)
+                }
+            }
+        }),
         svgLoader({ svgo: false }),
         renameNodeModules('modules'),
     ],

yarn.lock

@@ -2376,22 +2376,22 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@nimiq/identicons@npm:^1.6.2":
-  version: 1.6.2
-  resolution: "@nimiq/identicons@npm:1.6.2"
-  dependencies:
-    dom-parser: ^0.1.5
-  checksum: 1dcc68bac36cfba6978937ff22ce02633b3142158537f3d4279bbf5113d0672d04afa805282febbd76684b125ce95b94f4579a55c5c086aec22b9ba1ca6e61eb
-  languageName: node
-  linkType: hard
-
 "@nimiq/style@npm:^0.8.5":
   version: 0.8.5
   resolution: "@nimiq/style@npm:0.8.5"
   checksum: ff88add6f57ecd91e6e63e23ac06790ccc641abdcf6c6725d6b20a921f53eeae052d2fca56d7ad4b84db7cf3922efbb4227ee3f9cb725ea8740bd6ed9b2d36e1
   languageName: node
   linkType: hard
 
+"@nimiq/utils@npm:^0.12.1":
+  version: 0.12.1
+  resolution: "@nimiq/utils@npm:0.12.1"
+  dependencies:
+    big-integer: ^1.6.44
+  checksum: 48d214a5491fc1a70d2984974968e3e8eae790143a5bd76f8aa0497efde53f933a925bc7ec46b0e4c741b8d0508239683639c840cd83a2582e62c0f77536b60b
+  languageName: node
+  linkType: hard
+
 "@nimiq/utils@npm:^0.9.1":
   version: 0.9.1
   resolution: "@nimiq/utils@npm:0.9.1"
@@ -2405,7 +2405,6 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@nimiq/vue3-components@workspace:."
   dependencies:
-    "@nimiq/identicons": ^1.6.2
     "@nimiq/style": ^0.8.5
     "@nimiq/utils": ^0.9.1
     "@storybook/addon-actions": ^6.5.13
@@ -2418,6 +2417,7 @@ __metadata:
     autoprefixer: ^10.4.13
     browserslist: 4.21.4
     gh-pages: ^4.0.0
+    identicons-esm: ^0.2.6
     input-format: ^0.3.7
     js-sha3: ^0.8.0
     postcss: ^8.4.19
@@ -6969,13 +6969,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-parser@npm:^0.1.5":
-  version: 0.1.6
-  resolution: "dom-parser@npm:0.1.6"
-  checksum: 1ead37bc4bf21823649cd8a7d95e73a2fbfaf9dde838d3c666b4b6d7cc6c8b7498d41e24465b7a2d3f61b2e72304290a10c4545ddec7468b4a190cfdddc053f1
-  languageName: node
-  linkType: hard
-
 "dom-serializer@npm:^1.0.1":
   version: 1.3.2
   resolution: "dom-serializer@npm:1.3.2"
@@ -9268,6 +9261,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"identicons-esm@npm:^0.2.6":
+  version: 0.2.6
+  resolution: "identicons-esm@npm:0.2.6"
+  dependencies:
+    "@nimiq/utils": ^0.12.1
+  checksum: 6cefdff06854ddd8e099bcb05410b0aafccb1bc7cf70efee735294b6cc3aaef3c9d3ab3a72d84215eba789d3231ecfc2f172222c26a110015ea5a87dfc0edf95
+  languageName: node
+  linkType: hard
+
 "ieee754@npm:^1.1.4":
   version: 1.2.1
   resolution: "ieee754@npm:1.2.1"