[CI Skip] release/stable 2.9.4

skip-checks: true

.123trigger

@@ -1,27 +0,0 @@
-2
-0.57.20.57.3
-0.66.2
-0.66.3
-0.71.2
-0.71.3
-
-0.84.2
-0.84.3
-0.85.2
-0.85.3
-0.85.4
-0.85.5
-0.86.2
-0.86.3
-0.86.4
-0.86.5
-0.86.6
-0.86.7
-0.87.2
-0.87.3
-0.87.4
-0.87.5
-0.87.6
-0.87.7
-0.89.2
-0.89.3

.github/issue_template.md

@@ -0,0 +1,86 @@
+<!--
+
+For general support, howto, coding and bundling questions, please
+use the Substrate & Polkadot StackExchange at
+
+  https://substrate.stackexchange.com/
+
+and get other ecosystem developers involved. This issues in this
+repository are meant for the tracking of feature requests and bug
+reports.
+
+While all issues are looked at non-bug and non-features would take
+quite a bit longer to get to and may yield less than satisfactory
+responses in this format.
+
+Additionally, please ensure you have done a search on the existing
+and closed issues before logging a new request. This saves time on
+all sides.
+
+-->
+
+
+* **I'm submitting a ...**
+
+<!---
+
+REQUIRED:
+
+Classify the type of report your are submitting
+
+-->
+
+  - [ ] Bug report
+  - [ ] Feature request
+  - [ ] Support request
+  - [ ] Other
+
+
+* **What is the current behavior and expected behavior?**
+
+<!---
+
+REQUIRED:
+
+If you're describing a bug, tell us what should happen. If you're
+suggesting a change/improvement, tell us how it should work.
+
+-->
+
+
+* **What is the motivation for changing the behavior?**
+
+<!---
+
+OPTIONAL:
+
+Suggest a motivation for the request or ideas how to implement the
+addition or change
+
+-->
+
+
+* **Please tell us about your environment:**
+
+<!---
+
+REQUIRED:
+
+Include as many relevant details about the environment in which you
+experienced the issue. Also ensure that you have tested against the
+latest stable releases if you believe this to be a bug
+
+-->
+
+  - Version:
+  - Environment:
+
+    - [ ] Node.js
+    - [ ] Browser
+    - [ ] Other (limited support for other environments)
+
+  - Language:
+
+    - [ ] JavaScript
+    - [ ] TypeScript (include tsc --version)
+    - [ ] Other

.gitignore

@@ -1,7 +1,5 @@
 build/
-build-cjs/
+build-*/
-build-esm/
-build-docs/
 coverage/
 node_modules/
 tmp/

CHANGELOG.md

@@ -1,5 +1,88 @@
 # CHANGELOG
 
+## 2.9.4 Aug 6, 2022
+
+Changes:
+
+- Bump to `@polkadot/util` 10.1.3
+
+
+## 2.9.3 Jul 30, 2022
+
+Changes:
+
+- Bump to `@polkadot/util` 10.1.2
+
+
+## 2.9.2 Jul 24, 2022
+
+Contributed:
+
+- Adjust vue-identicon with no props/data duplication (Thanks to https://github.com/vikiival)
+
+
+## 2.9.1 Jul 21, 2022
+
+Changes:
+
+- Bump to `@polkadot/util` 10.1.1
+
+
+## 2.8.2 Jul 10, 2022
+
+Changes:
+
+- Bump to `@polkadot/util` 10.0.2
+
+
+## 2.8.1 Jul 9, 2022
+
+Changes:
+
+- Bump to `@polkadot/util` 10.0.1
+
+
+## 2.7.2 Jul 4, 2022
+
+Changes:
+
+- Bump to `@polkadot/util-crypto` 9.7.2 (w/ `@polkadot/wasm-crypto` 6.2.2)
+
+
+## 2.7.1 Jul 1, 2022
+
+Contributed:
+
+- Remove extra div wrappers in `vue-identicon` (Thanks to https://github.com/dcolley)
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.7.1
+
+
+## 2.6.2 Jun 25, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.6.2
+
+
+## 2.6.1 Jun 23, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.6.1
+- Upgrade libs to latest stable versions
+
+
+## 2.5.1 Jun 19, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.5.1
+- Upgrade libs to latest stable versions
+
+
 ## 2.4.1 Jun 4, 2022
 
 Changes:

CONTRIBUTORS

@@ -1,4 +1,4 @@
-     615	Jaco                          	2.4.1 (#648)
+     635	Jaco                          	2.9.4 (#673)
        7	YJ                            	fix #224: decrease frame size to 1024, set multipart bool (#225)
        4	Antoine Estienne              	Refactor logic to better use prefix (#491)
        4	kwingram25                    	fix ff api url issue (#289)
@@ -18,6 +18,7 @@
        1	Axel Chalon                   	Simplify KeyringAddress interface (#144)
        1	Cameron Franz                 	react-native example app port (#223)
        1	carumusan                     	Add kulupu (#342)
+       1	Derek Colley                  	Remove redundant `div` wrappers in vue-identicon (#643)
        1	Harry Liu                     	Update README.md (#166)
        1	Jake Naviasky                 	Add Edgeware chain prefix to settings. (#317)
        1	Logan Saether                 	Propose W3F node (#188)
@@ -26,6 +27,7 @@
        1	Nantian                       	fix bigint type (#510)
        1	Nikhil Ranjan                 	Updated to valid javascript (#271)
        1	Shawn Tabrizi                 	Add a new `notification` setting (#498)
+       1	Viki Val                      	:bug: identicon has isAlternative both as data and prop (#668)
        1	Wei Tang                      	Add Kulupu to the network selection list (#254)
        1	WoeOm                         	add darwinia ss58 (#379)
        1	yuhui1208                     	[Stores] make FileStroe read key safely  (#338)

package.json

@@ -10,7 +10,12 @@
     "url": "https://github.com/polkadot-js/ui.git"
   },
   "sideEffects": false,
-  "version": "2.4.1",
+  "type": "module",
+  "version": "2.9.4",
+  "versions": {
+    "git": "2.9.4",
+    "npm": "2.9.4"
+  },
   "workspaces": [
     "packages/*"
   ],
@@ -27,26 +32,26 @@
     "test:one": "polkadot-dev-run-test"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.2",
+    "@babel/core": "^7.18.10",
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.18.9",
-    "@polkadot/dev": "^0.66.34",
+    "@polkadot/dev": "^0.67.88",
-    "@polkadot/x-bundle": "^9.4.1",
+    "@polkadot/x-bundle": "^10.1.3",
-    "@types/jest": "^28.1.0",
+    "@types/jest": "^28.1.6",
     "babel-loader": "^8.2.5",
     "babel-plugin-transform-vue-template": "^0.4.2",
     "empty": "^0.10.1",
     "process": "^0.11.10",
-    "react": "^18.1.0",
+    "react": "^18.2.0",
-    "react-dom": "^18.1.0",
+    "react-dom": "^18.2.0",
-    "react-is": "^18.1.0",
+    "react-is": "^18.2.0",
-    "react-native": "^0.68.2",
+    "react-native": "^0.69.3",
     "stream-browserify": "^3.0.0",
-    "vue-template-compiler": "^2.6.14",
+    "vue-template-compiler": "^2.7.8",
-    "webpack": "^5.73.0",
+    "webpack": "^5.74.0",
-    "webpack-cli": "^4.9.2",
+    "webpack-cli": "^4.10.0",
     "webpack-serve": "^4.0.0"
   },
   "resolutions": {
-    "typescript": "^4.7.3"
+    "typescript": "^4.7.4"
   }
 }

packages/example-react/package.json

@@ -14,9 +14,9 @@
     "url": "https://github.com/polkadot-js/ui.git"
   },
   "sideEffects": false,
-  "version": "2.4.1",
+  "version": "2.9.4",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.18.3"
+    "@babel/runtime": "^7.18.9"
   }
 }

packages/example-react/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/example-react', path: 'auto', type: 'auto', version: '2.4.1' };
+export const packageInfo = { name: '@polkadot/example-react', path: 'auto', type: 'auto', version: '2.9.4' };

packages/example-vue/package.json

@@ -14,9 +14,9 @@
     "url": "https://github.com/polkadot-js/ui.git"
   },
   "sideEffects": false,
-  "version": "2.4.1",
+  "version": "2.9.4",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.18.3"
+    "@babel/runtime": "^7.18.9"
   }
 }

packages/example-vue/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/example-vue', path: 'auto', type: 'auto', version: '2.4.1' };
+export const packageInfo = { name: '@polkadot/example-vue', path: 'auto', type: 'auto', version: '2.9.4' };

packages/react-identicon/package.json

@@ -17,15 +17,15 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.4.1",
+  "version": "2.9.4",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.18.9",
-    "@polkadot/keyring": "^9.4.1",
+    "@polkadot/keyring": "^10.1.3",
-    "@polkadot/ui-settings": "2.4.1",
+    "@polkadot/ui-settings": "2.9.4",
-    "@polkadot/ui-shared": "2.4.1",
+    "@polkadot/ui-shared": "2.9.4",
-    "@polkadot/util": "^9.4.1",
+    "@polkadot/util": "^10.1.3",
-    "@polkadot/util-crypto": "^9.4.1",
+    "@polkadot/util-crypto": "^10.1.3",
     "color": "^3.2.1",
     "ethereum-blockies-base64": "^1.0.2",
     "jdenticon": "3.1.1",
@@ -33,8 +33,8 @@
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
-    "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-copy-to-clipboard": "^5.0.4",
-    "@types/react-dom": "^18.0.5",
+    "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.1.25",
     "styled-components": "^5.3.5",
     "xmlserializer": "^0.6.1"

packages/react-identicon/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/react-identicon', path: 'auto', type: 'auto', version: '2.4.1' };
+export const packageInfo = { name: '@polkadot/react-identicon', path: 'auto', type: 'auto', version: '2.9.4' };

packages/react-qr/package.json

@@ -17,13 +17,13 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.4.1",
+  "version": "2.9.4",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.18.9",
-    "@polkadot/ui-settings": "2.4.1",
+    "@polkadot/ui-settings": "2.9.4",
-    "@polkadot/util": "^9.4.1",
+    "@polkadot/util": "^10.1.3",
-    "@polkadot/util-crypto": "^9.4.1",
+    "@polkadot/util-crypto": "^10.1.3",
     "qrcode-generator": "^1.4.4",
     "react-qr-reader": "^2.2.1",
     "styled-components": "^5.3.5"

packages/react-qr/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/react-qr', path: 'auto', type: 'auto', version: '2.4.1' };
+export const packageInfo = { name: '@polkadot/react-qr', path: 'auto', type: 'auto', version: '2.9.4' };

packages/reactnative-identicon/package.json

@@ -17,17 +17,17 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.4.1",
+  "version": "2.9.4",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.18.9",
-    "@polkadot/ui-shared": "2.4.1",
+    "@polkadot/ui-shared": "2.9.4",
-    "@polkadot/util": "^9.4.1",
+    "@polkadot/util": "^10.1.3",
-    "@polkadot/util-crypto": "^9.4.1",
+    "@polkadot/util-crypto": "^10.1.3",
-    "react-native-svg": "^12.3.0"
+    "react-native-svg": "^12.4.3"
   },
   "devDependencies": {
-    "@types/react-native": "^0.67.8"
+    "@types/react-native": "^0.69.5"
   },
   "peerDependencies": {
     "@polkadot/util": "*",

packages/reactnative-identicon/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/reactnative-identicon', path: 'auto', type: 'auto', version: '2.4.1' };
+export const packageInfo = { name: '@polkadot/reactnative-identicon', path: 'auto', type: 'auto', version: '2.9.4' };

packages/ui-assets/package.json

@@ -13,10 +13,10 @@
     "url": "https://github.com/polkadot-js/ui.git"
   },
   "sideEffects": false,
-  "version": "2.4.1",
+  "version": "2.9.4",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.18.9",
-    "@polkadot/util": "^9.4.1"
+    "@polkadot/util": "^10.1.3"
   }
 }

packages/ui-assets/src/index.ts

@@ -1,4 +1,4 @@
 // Copyright 2017-2022 @polkadot/ui-assets authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-// empty
+export {};

packages/ui-assets/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/ui-assets', path: 'auto', type: 'auto', version: '2.4.1' };
+export const packageInfo = { name: '@polkadot/ui-assets', path: 'auto', type: 'auto', version: '2.9.4' };

packages/ui-keyring/package.json

@@ -16,16 +16,16 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.4.1",
+  "version": "2.9.4",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.18.9",
-    "@polkadot/keyring": "^9.4.1",
+    "@polkadot/keyring": "^10.1.3",
-    "@polkadot/ui-settings": "2.4.1",
+    "@polkadot/ui-settings": "2.9.4",
-    "@polkadot/util": "^9.4.1",
+    "@polkadot/util": "^10.1.3",
-    "@polkadot/util-crypto": "^9.4.1",
+    "@polkadot/util-crypto": "^10.1.3",
     "mkdirp": "^1.0.4",
-    "rxjs": "^7.5.5",
+    "rxjs": "^7.5.6",
     "store": "^2.0.12"
   },
   "devDependencies": {

packages/ui-keyring/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/ui-keyring', path: 'auto', type: 'auto', version: '2.4.1' };
+export const packageInfo = { name: '@polkadot/ui-keyring', path: 'auto', type: 'auto', version: '2.9.4' };

packages/ui-settings/package.json

@@ -17,12 +17,12 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.4.1",
+  "version": "2.9.4",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.18.9",
-    "@polkadot/networks": "^9.4.1",
+    "@polkadot/networks": "^10.1.3",
-    "@polkadot/util": "^9.4.1",
+    "@polkadot/util": "^10.1.3",
     "eventemitter3": "^4.0.7",
     "store": "^2.0.12"
   },

packages/ui-settings/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/ui-settings', path: 'auto', type: 'auto', version: '2.4.1' };
+export const packageInfo = { name: '@polkadot/ui-settings', path: 'auto', type: 'auto', version: '2.9.4' };

packages/ui-shared/package.json

@@ -17,17 +17,17 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.4.1",
+  "version": "2.9.4",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.18.9",
     "color": "^3.2.1"
   },
   "devDependencies": {
-    "@polkadot/util": "^9.4.1",
+    "@polkadot/util": "^10.1.3",
-    "@polkadot/util-crypto": "^9.4.1",
+    "@polkadot/util-crypto": "^10.1.3",
     "@types/color": "^3.0.3",
-    "@types/xmlserializer": "^0.6.2",
+    "@types/xmlserializer": "^0.6.3",
     "xmlserializer": "^0.6.1"
   },
   "peerDependencies": {

packages/ui-shared/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/ui-shared', path: 'auto', type: 'auto', version: '2.4.1' };
+export const packageInfo = { name: '@polkadot/ui-shared', path: 'auto', type: 'auto', version: '2.9.4' };

packages/vue-identicon/package.json

@@ -17,17 +17,17 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.4.1",
+  "version": "2.9.4",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
+    "@babel/runtime": "^7.18.9",
-    "@polkadot/ui-shared": "2.4.1",
+    "@polkadot/ui-shared": "2.9.4",
-    "@polkadot/util": "^9.4.1",
+    "@polkadot/util": "^10.1.3",
-    "@polkadot/util-crypto": "^9.4.1",
+    "@polkadot/util-crypto": "^10.1.3",
     "jdenticon": "3.1.1"
   },
   "devDependencies": {
-    "vue": "^2.6.14"
+    "vue": "^2.7.8"
   },
   "peerDependencies": {
     "@polkadot/util": "*",

packages/vue-identicon/src/Identicon.ts

@@ -3,7 +3,7 @@
 
 import type { Prefix } from '@polkadot/util-crypto/address/types';
 
-import Vue from 'vue';
+import Vue, { VNode } from 'vue';
 
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
@@ -18,6 +18,7 @@ interface Account {
 interface Data {
   address: string;
   iconSize: number;
+  isAlternativeIcon: boolean;
   publicKey: string;
   type: 'beachball' | 'empty' | 'jdenticon' | 'polkadot' | 'substrate';
 }
@@ -59,6 +60,7 @@ export const Identicon = Vue.extend({
     return {
       address: '',
       iconSize: DEFAULT_SIZE,
+      isAlternativeIcon: false,
       publicKey: '0x',
       type: 'empty'
     };
@@ -67,7 +69,7 @@ export const Identicon = Vue.extend({
     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 {
@@ -78,22 +80,21 @@ export const Identicon = Vue.extend({
     }
   },
   props: ['prefix', 'isAlternative', 'size', 'theme', 'value'],
-  // FIXME These nested divs are not correct, would like a different way
+  render (h): VNode {
-  // here so we don't create a div wrapped for the div wrapper of the icon
+    const { address, iconSize, isAlternativeIcon, publicKey, type } = this.$data as Data;
-  template: `
+
-    <div v-if="type === 'empty' || address === ''">
+    if (type === 'empty') {
-      <Empty :key="address" :size="iconSize" />
+      return h('Empty', { attrs: { key: address, size: iconSize } }, []);
-    </div>
+    } else if (type === 'jdenticon') {
-    <div v-else-if="type === 'beachball'">
+      return h('Jdenticon', { attrs: { key: address, publicKey, size: iconSize } }, []);
-      <Beachball :key="address" :address="address" :size="iconSize" />
+    } else {
-    </div>
+      // handles: beachball and polkadot
-    <div v-else-if="type === 'polkadot'">
+      // TODO: substrate
-      <Polkadot :key="address" :address="address" :isAlternative="isAlternative" :size="iconSize" />
+      const cmp = type.charAt(0).toUpperCase() + type.slice(1);
-    </div>
+
-    <div v-else>
+      return h(cmp, { attrs: { address, isAlternative: isAlternativeIcon, key: address, size: iconSize } }, []);
-      <Jdenticon :key="address" :publicKey="publicKey" :size="iconSize" />
+    }
-    </div>
+  },
-  `,
   watch: {
     value: function (): void {
       this.recodeAddress();

packages/vue-identicon/src/icons/Beachball.ts

@@ -1,14 +1,14 @@
 // Copyright 2017-2022 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Options } from '@polkadot/ui-shared/icons/types';
+import Vue, { VNode } from 'vue';
-
-import Vue from 'vue';
 
 import { beachballIcon } from '@polkadot/ui-shared';
 
-interface Data {
+type propsType = {
-  html: string;
+  address: string;
+  size: number;
+  isAlternative: boolean;
 }
 
 /**
@@ -16,21 +16,12 @@ interface Data {
  * @description The Beachball identicon
  */
 export const Beachball = Vue.extend({
-  created: function (): void {
+  props: ['address', 'size', 'isAlternative'],
-    this.createHtml();
-  },
-  data: function (): Data {
-    return {
-      // eslint-disable-next-line quotes
-      html: `<div />`
-    };
-  },
-  methods: {
-    createHtml: function (): void {
-      this.html = beachballIcon(this.address as string, this.size as Options).outerHTML;
-    }
-  },
-  props: ['address', 'size'],
   // eslint-disable-next-line quotes
-  template: `<div v-html="html" />`
+  render (h): VNode {
+    const { address, isAlternative, size } = this.$props as propsType;
+    const bb = beachballIcon(address, { isAlternative, size });
+
+    return h(Vue.component('VCBeachball', { template: bb.outerHTML }));
+  }
 });

packages/vue-identicon/src/icons/Jdenticon.ts

@@ -2,10 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as jdenticon from 'jdenticon';
-import Vue from 'vue';
+import Vue, { VNode } from 'vue';
 
-interface Data {
+type propsType = {
-  svgHtml: string;
+  publicKey: string,
+  size: number
 }
 
 /**
@@ -13,21 +14,12 @@ interface Data {
  * @description The substrate default via Jdenticon
  */
 export const Jdenticon = Vue.extend({
-  created: function (): void {
-    this.createSvgHtml();
-  },
-  data: function (): Data {
-    return {
-      // eslint-disable-next-line quotes
-      svgHtml: `<svg viewBox="0 0 64 64" />`
-    };
-  },
-  methods: {
-    createSvgHtml: function (): void {
-      this.svgHtml = jdenticon.toSvg((this.publicKey as string).substr(2), this.size as number);
-    }
-  },
   props: ['publicKey', 'size'],
   // eslint-disable-next-line quotes
-  template: `<div v-html="svgHtml" />`
+  render (h): VNode {
+    const { publicKey, size } = this.$props as propsType;
+    const cmp = Vue.component('CJdenticon', { template: jdenticon.toSvg(publicKey.substring(2), size) });
+
+    return h(cmp);
+  }
 });

packages/vue-identicon/src/icons/Polkadot.ts

@@ -1,17 +1,14 @@
 // Copyright 2017-2022 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import Vue from 'vue';
+import Vue, { VNode } from 'vue';
 
 import { polkadotIcon } from '@polkadot/ui-shared';
 
-interface Data {
+type propsType = {
-  svgHtml: string;
-}
-
-interface This {
   address: string;
-  isAlternative?: boolean;
+  isAlternative: boolean;
+  size: number;
 }
 
 /**
@@ -19,25 +16,20 @@ interface This {
  * @description The Polkadot default identicon
  */
 export const Polkadot = Vue.extend({
-  created: function (): void {
-    this.createSvgHtml();
-  },
-  data: function (): Data {
-    return {
-      // eslint-disable-next-line quotes
-      svgHtml: `<svg viewBox="0 0 64 64" />`
-    };
-  },
-  methods: {
-    createSvgHtml: function (): void {
-      const circles = polkadotIcon(this.address as string, { isAlternative: (this as This).isAlternative || false }).map(({ cx, cy, fill, r }) =>
-        `<circle cx=${cx} cy=${cy} fill="${fill}" r=${r} />`
-      ).join('');
-
-      this.svgHtml = `<svg height=${this.size as number} viewBox='0 0 64 64' width=${this.size as number}>${circles}</svg>`;
-    }
-  },
   props: ['address', 'isAlternative', 'size'],
   // eslint-disable-next-line quotes
-  template: `<div v-html="svgHtml" />`
+  render (h): VNode {
+    const { address, isAlternative, size } = this.$props as propsType;
+    const circles = polkadotIcon(address, {
+      isAlternative: isAlternative || false
+    }).map(({ cx,
+      cy,
+      fill,
+      r }) => {
+      return h('circle', { attrs: { cx, cy, fill, r } }, []);
+    }
+    );
+
+    return h('svg', { attrs: { height: size, viewBox: '0 0 64 64', width: size } }, circles);
+  }
 });

packages/vue-identicon/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/vue-identicon', path: 'auto', type: 'auto', version: '2.4.1' };
+export const packageInfo = { name: '@polkadot/vue-identicon', path: 'auto', type: 'auto', version: '2.9.4' };