@pezkuwi/vue-identicon 3.16.6

package/build-tsc-esm/Identicon.js

@@ -0,0 +1,111 @@
+import { defineComponent, h } from 'vue';
+import { isHex, isU8a, u8aToHex } from '@pezkuwi/util';
+import { decodeAddress, encodeAddress, isEthereumAddress } from '@pezkuwi/util-crypto';
+import { Beachball, Empty, Jdenticon, Polkadot } from './icons/index.js';
+import { adaptVNodeAttrs } from './util.js';
+const DEFAULT_SIZE = 64;
+function resolvePublicKey(value, prefix) {
+    if (isHex(value) && isEthereumAddress(value)) {
+        return value.padEnd(66, '0');
+    }
+    return isU8a(value) || isHex(value)
+        ? encodeAddress(value, prefix)
+        : value;
+}
+export function encodeAccount(value, prefix) {
+    try {
+        const address = resolvePublicKey(value, prefix);
+        const publicKey = u8aToHex(decodeAddress(address, false, prefix));
+        return { address, publicKey };
+    }
+    catch {
+        return { address: '', publicKey: '0x' };
+    }
+}
+/**
+ * @name Identicon
+ * @description The main Identicon component, taking a number of properties
+ * @example
+ * ```html
+ * <Identicon :size="128" :theme="polkadot" :value="..." />
+ * ```
+ */
+export const Identicon = defineComponent({
+    components: {
+        Beachball,
+        Empty,
+        Jdenticon,
+        Polkadot
+    },
+    created: function () {
+        this.createData();
+    },
+    data: function () {
+        return {
+            address: '',
+            iconSize: DEFAULT_SIZE,
+            isAlternativeIcon: false,
+            publicKey: '0x',
+            type: 'empty'
+        };
+    },
+    methods: {
+        createData: function () {
+            this.iconSize = this.size || DEFAULT_SIZE;
+            this.type = this.theme;
+            this.isAlternativeIcon = this.isAlternative || false;
+            this.recodeAddress();
+        },
+        recodeAddress: function () {
+            const { address, publicKey } = encodeAccount(this.value);
+            this.address = address;
+            this.publicKey = publicKey;
+        }
+    },
+    props: ['prefix', 'isAlternative', 'size', 'theme', 'value'],
+    render() {
+        const { address, iconSize, isAlternativeIcon, publicKey, type } = this.$data;
+        if (type === 'empty') {
+            return h(Empty, {
+                ...adaptVNodeAttrs({
+                    key: address,
+                    size: iconSize
+                })
+            }, []);
+        }
+        else if (type === 'jdenticon') {
+            return h(Jdenticon, {
+                ...adaptVNodeAttrs({
+                    key: address,
+                    publicKey,
+                    size: iconSize
+                })
+            }, []);
+        }
+        else if (type === 'substrate') {
+            throw new Error('substrate type is not supported');
+        }
+        const cmp = type.charAt(0).toUpperCase() + type.slice(1);
+        if (['Beachball', 'Polkadot'].includes(cmp)) {
+            const component = cmp === 'Beachball'
+                ? Beachball
+                : Polkadot;
+            return h(component, {
+                ...adaptVNodeAttrs({
+                    address,
+                    isAlternative: isAlternativeIcon,
+                    key: address,
+                    size: iconSize
+                })
+            }, []);
+        }
+        else {
+            return h(cmp, {}, []);
+        }
+    },
+    watch: {
+        value: function () {
+            this.recodeAddress();
+        }
+    }
+});

package/build-tsc-esm/bundle.js

@@ -0,0 +1,2 @@
+export { Identicon } from './Identicon.js';
+export { packageInfo } from './packageInfo.js';

package/build-tsc-esm/icons/Beachball.js

@@ -0,0 +1,18 @@
+import { defineComponent, h } from 'vue';
+import { beachballIcon } from '@pezkuwi/ui-shared';
+/**
+ * @name Beachball
+ * @description The Beachball identicon
+ */
+export const Beachball = defineComponent({
+    props: ['address', 'size', 'isAlternative'],
+    render() {
+        const { address, isAlternative, size } = this.$props;
+        return h({
+            template: beachballIcon(address, {
+                isAlternative,
+                size
+            }).outerHTML
+        });
+    }
+});

package/build-tsc-esm/icons/Empty.js

@@ -0,0 +1,13 @@
+import { defineComponent } from 'vue';
+/**
+ * @name Empty
+ * @description An empty identicon
+ */
+export const Empty = defineComponent({
+    props: ['size'],
+    template: `
+    <svg :height="size" :width="size" viewBox="0 0 64 64">
+      <circle cx="50%" cy="50%" fill="#eee" r="50%" />
+    </svg>
+  `
+});

package/build-tsc-esm/icons/Jdenticon.js

@@ -0,0 +1,15 @@
+import * as jdenticon from 'jdenticon';
+import { defineComponent, h } from 'vue';
+/**
+ * @name Jdenticon
+ * @description The substrate default via Jdenticon
+ */
+export const Jdenticon = defineComponent({
+    props: ['publicKey', 'size'],
+    render() {
+        const { publicKey, size } = this.$props;
+        return h({
+            template: jdenticon.toSvg(publicKey.substring(2), size)
+        });
+    }
+});

package/build-tsc-esm/icons/Polkadot.js

@@ -0,0 +1,21 @@
+import { defineComponent, h } from 'vue';
+import { polkadotIcon } from '@pezkuwi/ui-shared';
+import { adaptVNodeAttrs } from '../util.js';
+/**
+ * @name Polkadot
+ * @description The Polkadot default identicon
+ */
+export const Polkadot = defineComponent({
+    props: ['address', 'isAlternative', 'size'],
+    render() {
+        const { address, isAlternative, size } = this.$props;
+        const circles = polkadotIcon(address, { isAlternative }).map(({ cx, cy, fill, r }) => h('circle', { ...adaptVNodeAttrs({ cx, cy, fill, r }) }, []));
+        return h('svg', {
+            ...adaptVNodeAttrs({
+                height: size,
+                viewBox: '0 0 64 64',
+                width: size
+            })
+        }, circles);
+    }
+});

package/build-tsc-esm/icons/index.js

@@ -0,0 +1,4 @@
+export * from './Beachball.js';
+export * from './Empty.js';
+export * from './Jdenticon.js';
+export * from './Polkadot.js';

package/build-tsc-esm/index.js

@@ -0,0 +1,4 @@
+import './packageDetect.js';
+import { Identicon } from './bundle.js';
+export * from './bundle.js';
+export default Identicon;

package/build-tsc-esm/packageDetect.js

@@ -0,0 +1,4 @@
+import { packageInfo as sharedInfo } from '@pezkuwi/ui-shared/packageInfo';
+import { detectPackage } from '@pezkuwi/util';
+import { packageInfo } from './packageInfo.js';
+detectPackage(packageInfo, null, [sharedInfo]);

package/build-tsc-esm/packageInfo.js

@@ -0,0 +1 @@
+export const packageInfo = { name: '@pezkuwi/vue-identicon', path: (import.meta && import.meta.url) ? new URL(import.meta.url).pathname.substring(0, new URL(import.meta.url).pathname.lastIndexOf('/') + 1) : 'auto', type: 'esm', version: '3.16.6' };

package/build-tsc-esm/util.js

@@ -0,0 +1,12 @@
+import { version } from 'vue';
+const isV3 = version.startsWith('3.');
+/**
+ * @internal
+ *
+ * Adjust attributes to be usable in both Vue 2 and Vue 3 components.
+ */
+export function adaptVNodeAttrs(data) {
+    return isV3
+        ? data
+        : { attrs: data };
+}

package/index.html

@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
+    <style>
+      #demo {
+        padding: 0.5em;
+      }
+      .padded {
+        margin: 0.5em !important;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="demo"></div>
+    <script src="./build/Demo.js"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,38 @@
+{
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "bugs": "https://github.com/pezkuwichain/ui/issues",
+  "description": "Renders an SVG picture representing an address",
+  "engines": {
+    "node": ">=18"
+  },
+  "homepage": "https://github.com/pezkuwichain/ui/tree/master/packages/vue-identicon#readme",
+  "license": "Apache-2.0",
+  "name": "@pezkuwi/vue-identicon",
+  "repository": {
+    "directory": "packages/vue-identicon",
+    "type": "git",
+    "url": "https://github.com/pezkuwichain/ui.git"
+  },
+  "sideEffects": [
+    "./packageDetect.js",
+    "./packageDetect.cjs"
+  ],
+  "type": "module",
+  "version": "3.16.6",
+  "main": "index.js",
+  "dependencies": {
+    "@pezkuwi/ui-shared": "3.16.6",
+    "@pezkuwi/util": "^14.0.5",
+    "@pezkuwi/util-crypto": "^14.0.5",
+    "jdenticon": "3.2.0",
+    "tslib": "^2.8.1"
+  },
+  "devDependencies": {
+    "vue": "^2.7.16"
+  },
+  "peerDependencies": {
+    "@pezkuwi/util": "*",
+    "@pezkuwi/util-crypto": "*",
+    "vue": ">= 2.7"
+  }
+}

package/src/Identicon.ts

@@ -0,0 +1,141 @@
+// Copyright 2017-2025 @pezkuwi/vue-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { VNode } from 'vue';
+import type { Prefix } from '@pezkuwi/util-crypto/address/types';
+
+import { defineComponent, h } from 'vue';
+
+import { isHex, isU8a, u8aToHex } from '@pezkuwi/util';
+import { decodeAddress, encodeAddress, isEthereumAddress } from '@pezkuwi/util-crypto';
+
+import { Beachball, Empty, Jdenticon, Polkadot } from './icons/index.js';
+import { adaptVNodeAttrs } from './util.js';
+
+interface Account {
+  address: string;
+  publicKey: string;
+}
+
+interface Data {
+  address: string;
+  iconSize: number;
+  isAlternativeIcon: boolean;
+  publicKey: string;
+  type: 'beachball' | 'empty' | 'jdenticon' | 'polkadot' | 'substrate';
+}
+
+const DEFAULT_SIZE = 64;
+
+function resolvePublicKey (value: string | Uint8Array, prefix?: Prefix): string {
+  if (isHex(value) && isEthereumAddress(value)) {
+    return value.padEnd(66, '0');
+  }
+
+  return isU8a(value) || isHex(value)
+    ? encodeAddress(value as string, prefix)
+    : value;
+}
+
+export function encodeAccount (value: string | Uint8Array, prefix?: Prefix): Account {
+  try {
+    const address = resolvePublicKey(value, prefix);
+    const publicKey = u8aToHex(decodeAddress(address, false, prefix));
+
+    return { address, publicKey };
+  } catch {
+    return { address: '', publicKey: '0x' };
+  }
+}
+
+/**
+ * @name Identicon
+ * @description The main Identicon component, taking a number of properties
+ * @example
+ * ```html
+ * <Identicon :size="128" :theme="polkadot" :value="..." />
+ * ```
+ */
+export const Identicon = defineComponent({
+  components: {
+    Beachball,
+    Empty,
+    Jdenticon,
+    Polkadot
+  },
+  created: function (): void {
+    this.createData();
+  },
+  data: function (): Data {
+    return {
+      address: '',
+      iconSize: DEFAULT_SIZE,
+      isAlternativeIcon: false,
+      publicKey: '0x',
+      type: 'empty'
+    };
+  },
+  methods: {
+    createData: function (): void {
+      this.iconSize = this.size as number || DEFAULT_SIZE;
+      this.type = this.theme as 'empty';
+      this.isAlternativeIcon = this.isAlternative as boolean || false;
+      this.recodeAddress();
+    },
+    recodeAddress: function (): void {
+      const { address, publicKey } = encodeAccount(this.value as string);
+
+      this.address = address;
+      this.publicKey = publicKey;
+    }
+  },
+  props: ['prefix', 'isAlternative', 'size', 'theme', 'value'],
+  render (): VNode {
+    const { address, iconSize, isAlternativeIcon, publicKey, type } = this.$data;
+
+    if (type === 'empty') {
+      return h(Empty, {
+        ...adaptVNodeAttrs({
+          key: address,
+          size: iconSize
+        })
+      }, []);
+    } else if (type === 'jdenticon') {
+      return h(Jdenticon, {
+        ...adaptVNodeAttrs(
+          {
+            key: address,
+            publicKey,
+            size: iconSize
+          }
+        )
+      }, []);
+    } else if (type === 'substrate') {
+      throw new Error('substrate type is not supported');
+    }
+
+    const cmp = type.charAt(0).toUpperCase() + type.slice(1);
+
+    if (['Beachball', 'Polkadot'].includes(cmp)) {
+      const component = cmp === 'Beachball'
+        ? Beachball
+        : Polkadot;
+
+      return h(component, {
+        ...adaptVNodeAttrs({
+          address,
+          isAlternative: isAlternativeIcon,
+          key: address,
+          size: iconSize
+        })
+      }, []);
+    } else {
+      return h(cmp, {}, []);
+    }
+  },
+  watch: {
+    value: function (): void {
+      this.recodeAddress();
+    }
+  }
+});

package/src/bundle.ts

@@ -0,0 +1,5 @@
+// Copyright 2017-2025 @pezkuwi/vue-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export { Identicon } from './Identicon.js';
+export { packageInfo } from './packageInfo.js';

package/src/icons/Beachball.ts

@@ -0,0 +1,32 @@
+// Copyright 2017-2025 @pezkuwi/vue-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { VNode } from 'vue';
+
+import { defineComponent, h } from 'vue';
+
+import { beachballIcon } from '@pezkuwi/ui-shared';
+
+interface PropsType {
+  address: string;
+  size: number;
+  isAlternative: boolean;
+}
+
+/**
+ * @name Beachball
+ * @description The Beachball identicon
+ */
+export const Beachball = defineComponent({
+  props: ['address', 'size', 'isAlternative'],
+  render (): VNode {
+    const { address, isAlternative, size } = this.$props as PropsType;
+
+    return h({
+      template: beachballIcon(address, {
+        isAlternative,
+        size
+      }).outerHTML
+    });
+  }
+});

package/src/icons/Empty.ts

@@ -0,0 +1,17 @@
+// Copyright 2017-2025 @pezkuwi/vue-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { defineComponent } from 'vue';
+
+/**
+ * @name Empty
+ * @description An empty identicon
+ */
+export const Empty = defineComponent({
+  props: ['size'],
+  template: `
+    <svg :height="size" :width="size" viewBox="0 0 64 64">
+      <circle cx="50%" cy="50%" fill="#eee" r="50%" />
+    </svg>
+  `
+});

package/src/icons/Jdenticon.ts

@@ -0,0 +1,27 @@
+// Copyright 2017-2025 @pezkuwi/vue-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { VNode } from 'vue';
+
+import * as jdenticon from 'jdenticon';
+import { defineComponent, h } from 'vue';
+
+interface PropsType {
+  publicKey: string,
+  size: number
+}
+
+/**
+ * @name Jdenticon
+ * @description The substrate default via Jdenticon
+ */
+export const Jdenticon = defineComponent({
+  props: ['publicKey', 'size'],
+  render (): VNode {
+    const { publicKey, size } = this.$props as PropsType;
+
+    return h({
+      template: jdenticon.toSvg(publicKey.substring(2), size)
+    });
+  }
+});

package/src/icons/Polkadot.ts

@@ -0,0 +1,38 @@
+// Copyright 2017-2025 @pezkuwi/vue-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { VNode } from 'vue';
+
+import { defineComponent, h } from 'vue';
+
+import { polkadotIcon } from '@pezkuwi/ui-shared';
+
+import { adaptVNodeAttrs } from '../util.js';
+
+interface propsType {
+  address: string;
+  isAlternative: boolean;
+  size: number;
+}
+
+/**
+ * @name Polkadot
+ * @description The Polkadot default identicon
+ */
+export const Polkadot = defineComponent({
+  props: ['address', 'isAlternative', 'size'],
+  render (): VNode {
+    const { address, isAlternative, size } = this.$props as propsType;
+    const circles = polkadotIcon(address, { isAlternative }).map(({ cx, cy, fill, r }) =>
+      h('circle', { ...adaptVNodeAttrs({ cx, cy, fill, r }) }, [])
+    );
+
+    return h('svg', {
+      ...adaptVNodeAttrs({
+        height: size,
+        viewBox: '0 0 64 64',
+        width: size
+      })
+    }, circles);
+  }
+});

package/src/icons/index.ts

@@ -0,0 +1,7 @@
+// Copyright 2017-2025 @pezkuwi/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+export * from './Beachball.js';
+export * from './Empty.js';
+export * from './Jdenticon.js';
+export * from './Polkadot.js';

package/src/index.ts

@@ -0,0 +1,10 @@
+// Copyright 2017-2025 @pezkuwi/vue-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import './packageDetect.js';
+
+import { Identicon } from './bundle.js';
+
+export * from './bundle.js';
+
+export default Identicon;

package/src/packageDetect.ts

@@ -0,0 +1,12 @@
+// Copyright 2017-2026 @pezkuwi/vue-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Do not edit, auto-generated by @pezkuwi/dev
+// (packageInfo imports will be kept as-is, user-editable)
+
+import { packageInfo as sharedInfo } from '@pezkuwi/ui-shared/packageInfo';
+import { detectPackage } from '@pezkuwi/util';
+
+import { packageInfo } from './packageInfo.js';
+
+detectPackage(packageInfo, null, [sharedInfo]);

package/src/packageInfo.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2026 @pezkuwi/vue-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Do not edit, auto-generated by @pezkuwi/dev
+
+export const packageInfo = { name: '@pezkuwi/vue-identicon', path: 'auto', type: 'auto', version: '3.16.6' };

package/src/util.ts

@@ -0,0 +1,17 @@
+// Copyright 2017-2025 @pezkuwi/vue-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { version } from 'vue';
+
+const isV3 = version.startsWith('3.');
+
+/**
+ * @internal
+ *
+ * Adjust attributes to be usable in both Vue 2 and Vue 3 components.
+ */
+export function adaptVNodeAttrs (data: Record<string, unknown>): Record<string, unknown> {
+  return isV3
+    ? data
+    : { attrs: data };
+}

package/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "baseUrl": "..",
+    "outDir": "./build",
+    "rootDir": "./src"
+  },
+  "references": [
+    { "path": "../ui-shared/tsconfig.build.json" }
+  ]
+}