[CI Skip] release/stable 2.7.2

skip-checks: true

.123current

@@ -0,0 +1 @@
+2.7.2

.123trigger

@@ -24,4 +24,6 @@
 0.87.6
 0.87.7
 0.89.2
-0.89.3
+0.89.3
+2.6.2
+2.7.2

.eslintrc.js

@@ -7,6 +7,7 @@ module.exports = {
   ...base,
   ignorePatterns: [
     ...base.ignorePatterns,
+    'jest/**/*',
     '**/*.d.ts'
   ],
   parserOptions: {

.github/issue_template.md

@@ -0,0 +1,50 @@
+<!--
+
+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 ...**
+
+<!--- Try and classify your actual report -->
+
+  - [ ] Bug report
+  - [ ] Feature request
+  - [ ] Support request (please bear the comments above in mind)
+  - [ ] Other
+
+
+* **What is the current behavior and expected behavior?**
+
+<!--- 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?**
+
+<!--- Not obligatory, but suggest a motivation for the request -->
+<!--- or ideas how to implement the addition or change -->
+
+
+* **Please tell us about your environment:**
+
+<!--- Include as many relevant details about the environment you experienced the issue in -->
+<!--- Also snsure that you have tested against the latest stable releases if a bug -->
+
+  - Version:
+  - Environment:
+
+    - [ ] Node.js
+    - [ ] Browser
+    - [ ] Other (limited support for other environments available)
+
+  - Language:
+
+    - [ ] JavaScript
+    - [ ] TypeScript
+    - [ ] Other

CHANGELOG.md

@@ -1,5 +1,75 @@
 # CHANGELOG
 
+## 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:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.4.1
+
+
+## 2.3.1 May 30, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.3.1
+
+
+## 2.2.1 May 14, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.2.1
+
+
+## 2.1.1 Apr 30, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.1.1
+- Adjust Jest test init for latest `@polkadot/dev`
+
+
 ## 2.0.1 Apr 9, 2022
 
 - **Breaking change** In this major version the commonjs outputs are moved to a sub-folder. Since the export map and main field in package.json does reflect this change, there should be no usage changes. However the packages here will all need to be on the same version for internal linkage.

CONTRIBUTORS

@@ -1,4 +1,4 @@
-     606	Jaco                          	2.0.1 (#633)
+     625	Jaco                          	2.7.2 (#660)
        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)

jest.config.cjs

@@ -12,5 +12,6 @@ module.exports = {
     '\\.(css|less)$': 'empty/object',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object'
   },
+  setupFilesAfterEnv: ['<rootDir>/jest/setupEnv.js'],
   testEnvironment: 'jsdom'
 };

jest/setupEnv.js

@@ -0,0 +1,10 @@
+// Copyright 2017-2022 @polkadot/ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+const nodeCrypto = require('crypto');
+
+window.crypto = {
+  getRandomValues: function (buffer) {
+    return nodeCrypto.randomFillSync(buffer);
+  }
+};

package.json

@@ -10,7 +10,7 @@
     "url": "https://github.com/polkadot-js/ui.git"
   },
   "sideEffects": false,
-  "version": "2.0.1",
+  "version": "2.7.2",
   "workspaces": [
     "packages/*"
   ],
@@ -27,26 +27,26 @@
     "test:one": "polkadot-dev-run-test"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.9",
-    "@babel/runtime": "^7.17.9",
-    "@polkadot/dev": "^0.66.1",
-    "@polkadot/x-bundle": "^9.0.1",
-    "@types/jest": "^27.4.1",
-    "babel-loader": "^8.2.4",
+    "@babel/core": "^7.18.6",
+    "@babel/runtime": "^7.18.6",
+    "@polkadot/dev": "^0.67.50",
+    "@polkadot/x-bundle": "^9.7.2",
+    "@types/jest": "^28.1.4",
+    "babel-loader": "^8.2.5",
     "babel-plugin-transform-vue-template": "^0.4.2",
     "empty": "^0.10.1",
     "process": "^0.11.10",
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0",
-    "react-is": "^18.0.0",
-    "react-native": "^0.68.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "react-native": "^0.69.1",
     "stream-browserify": "^3.0.0",
     "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.72.0",
-    "webpack-cli": "^4.9.2",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
     "webpack-serve": "^4.0.0"
   },
   "resolutions": {
-    "typescript": "^4.6.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.0.1",
+  "version": "2.7.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.17.9"
+    "@babel/runtime": "^7.18.6"
   }
 }

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.0.1' };
+export const packageInfo = { name: '@polkadot/example-react', path: 'auto', type: 'auto', version: '2.7.2' };

packages/example-react/webpack.config.cjs

@@ -43,8 +43,7 @@ module.exports = {
       '@polkadot/react-identicon': path.resolve(__dirname, '../react-identicon/build'),
       '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/build'),
       '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
-      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'),
-      'react/jsx-runtime': require.resolve('react/jsx-runtime')
+      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build')
     },
     extensions: ['.js', '.ts', '.tsx'],
     fallback: {}

packages/example-vue/package.json

@@ -14,9 +14,9 @@
     "url": "https://github.com/polkadot-js/ui.git"
   },
   "sideEffects": false,
-  "version": "2.0.1",
+  "version": "2.7.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.17.9"
+    "@babel/runtime": "^7.18.6"
   }
 }

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.0.1' };
+export const packageInfo = { name: '@polkadot/example-vue', path: 'auto', type: 'auto', version: '2.7.2' };

packages/react-identicon/package.json

@@ -17,24 +17,24 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.7.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
-    "@polkadot/keyring": "^9.0.1",
-    "@polkadot/ui-settings": "2.0.1",
-    "@polkadot/ui-shared": "2.0.1",
-    "@polkadot/util": "^9.0.1",
-    "@polkadot/util-crypto": "^9.0.1",
+    "@babel/runtime": "^7.18.6",
+    "@polkadot/keyring": "^9.7.2",
+    "@polkadot/ui-settings": "2.7.2",
+    "@polkadot/ui-shared": "2.7.2",
+    "@polkadot/util": "^9.7.2",
+    "@polkadot/util-crypto": "^9.7.2",
     "color": "^3.2.1",
     "ethereum-blockies-base64": "^1.0.2",
     "jdenticon": "3.1.1",
-    "react-copy-to-clipboard": "^5.0.4",
+    "react-copy-to-clipboard": "^5.1.0",
     "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@types/react-copy-to-clipboard": "^5.0.2",
-    "@types/react-dom": "^18.0.0",
+    "@types/react-dom": "^18.0.5",
     "@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.0.1' };
+export const packageInfo = { name: '@polkadot/react-identicon', path: 'auto', type: 'auto', version: '2.7.2' };

packages/react-qr/package.json

@@ -17,13 +17,13 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.7.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
-    "@polkadot/ui-settings": "2.0.1",
-    "@polkadot/util": "^9.0.1",
-    "@polkadot/util-crypto": "^9.0.1",
+    "@babel/runtime": "^7.18.6",
+    "@polkadot/ui-settings": "2.7.2",
+    "@polkadot/util": "^9.7.2",
+    "@polkadot/util-crypto": "^9.7.2",
     "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.0.1' };
+export const packageInfo = { name: '@polkadot/react-qr', path: 'auto', type: 'auto', version: '2.7.2' };

packages/reactnative-identicon/package.json

@@ -17,17 +17,17 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.7.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
-    "@polkadot/ui-shared": "2.0.1",
-    "@polkadot/util": "^9.0.1",
-    "@polkadot/util-crypto": "^9.0.1",
+    "@babel/runtime": "^7.18.6",
+    "@polkadot/ui-shared": "2.7.2",
+    "@polkadot/util": "^9.7.2",
+    "@polkadot/util-crypto": "^9.7.2",
     "react-native-svg": "^12.3.0"
   },
   "devDependencies": {
-    "@types/react-native": "^0.67.3"
+    "@types/react-native": "^0.69.1"
   },
   "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.0.1' };
+export const packageInfo = { name: '@polkadot/reactnative-identicon', path: 'auto', type: 'auto', version: '2.7.2' };

packages/ui-assets/package.json

@@ -13,10 +13,10 @@
     "url": "https://github.com/polkadot-js/ui.git"
   },
   "sideEffects": false,
-  "version": "2.0.1",
+  "version": "2.7.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
-    "@polkadot/util": "^9.0.1"
+    "@babel/runtime": "^7.18.6",
+    "@polkadot/util": "^9.7.2"
   }
 }

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.0.1' };
+export const packageInfo = { name: '@polkadot/ui-assets', path: 'auto', type: 'auto', version: '2.7.2' };

packages/ui-keyring/package.json

@@ -16,14 +16,14 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.7.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
-    "@polkadot/keyring": "^9.0.1",
-    "@polkadot/ui-settings": "2.0.1",
-    "@polkadot/util": "^9.0.1",
-    "@polkadot/util-crypto": "^9.0.1",
+    "@babel/runtime": "^7.18.6",
+    "@polkadot/keyring": "^9.7.2",
+    "@polkadot/ui-settings": "2.7.2",
+    "@polkadot/util": "^9.7.2",
+    "@polkadot/util-crypto": "^9.7.2",
     "mkdirp": "^1.0.4",
     "rxjs": "^7.5.5",
     "store": "^2.0.12"

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.0.1' };
+export const packageInfo = { name: '@polkadot/ui-keyring', path: 'auto', type: 'auto', version: '2.7.2' };

packages/ui-keyring/src/stores/Browser.ts

@@ -6,24 +6,23 @@ import type { KeyringJson, KeyringStore } from '../types';
 import store from 'store';
 
 export class BrowserStore implements KeyringStore {
-  public all (cb: (key: string, value: KeyringJson) => void): void {
+  public all (fn: (key: string, value: KeyringJson) => void): void {
     store.each((value: KeyringJson, key: string): void => {
-      cb(key, value);
+      fn(key, value);
     });
   }
 
-  public get (key: string, cb: (value: KeyringJson) => void): void {
-    // eslint-disable-next-line node/no-callback-literal
-    cb(store.get(key) as KeyringJson);
+  public get (key: string, fn: (value: KeyringJson) => void): void {
+    fn(store.get(key) as KeyringJson);
   }
 
-  public remove (key: string, cb?: () => void): void {
+  public remove (key: string, fn?: () => void): void {
     store.remove(key);
-    cb && cb();
+    fn && fn();
   }
 
-  public set (key: string, value: KeyringJson, cb?: () => void): void {
+  public set (key: string, value: KeyringJson, fn?: () => void): void {
     store.set(key, value);
-    cb && cb();
+    fn && fn();
   }
 }

packages/ui-keyring/src/stores/File.ts

@@ -21,33 +21,33 @@ export class FileStore implements KeyringStore {
     this.#path = path;
   }
 
-  public all (cb: (key: string, value: KeyringJson) => void): void {
+  public all (fn: (key: string, value: KeyringJson) => void): void {
     fs
       .readdirSync(this.#path)
       .filter((key): boolean => !['.', '..', '.DS_Store'].includes(key))
       .forEach((key): void => {
         const value = this._readKey(key);
 
-        value?.address && cb(key, value);
+        value?.address && fn(key, value);
       });
   }
 
-  public get (key: string, cb: (value: KeyringJson) => void): void {
+  public get (key: string, fn: (value: KeyringJson) => void): void {
     const value = this._readKey(key);
 
     assert(value?.address, `Invalid JSON found for ${key}`);
 
-    cb(value);
+    fn(value);
   }
 
-  public remove (key: string, cb?: () => void): void {
+  public remove (key: string, fn?: () => void): void {
     fs.unlinkSync(this._getPath(key));
-    cb && cb();
+    fn && fn();
   }
 
-  public set (key: string, value: KeyringJson, cb?: () => void): void {
+  public set (key: string, value: KeyringJson, fn?: () => void): void {
     fs.writeFileSync(this._getPath(key), Buffer.from(JSON.stringify(value), 'utf-8'));
-    cb && cb();
+    fn && fn();
   }
 
   private _getPath (key: string): string {

packages/ui-settings/package.json

@@ -17,12 +17,12 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.7.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
-    "@polkadot/networks": "^9.0.1",
-    "@polkadot/util": "^9.0.1",
+    "@babel/runtime": "^7.18.6",
+    "@polkadot/networks": "^9.7.2",
+    "@polkadot/util": "^9.7.2",
     "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.0.1' };
+export const packageInfo = { name: '@polkadot/ui-settings', path: 'auto', type: 'auto', version: '2.7.2' };

packages/ui-shared/package.json

@@ -17,15 +17,15 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.7.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
+    "@babel/runtime": "^7.18.6",
     "color": "^3.2.1"
   },
   "devDependencies": {
-    "@polkadot/util": "^9.0.1",
-    "@polkadot/util-crypto": "^9.0.1",
+    "@polkadot/util": "^9.7.2",
+    "@polkadot/util-crypto": "^9.7.2",
     "@types/color": "^3.0.3",
     "@types/xmlserializer": "^0.6.2",
     "xmlserializer": "^0.6.1"

packages/ui-shared/src/icons/beachball/index.spec.ts

@@ -9,7 +9,8 @@ describe('identicon', (): void => {
   it('generates a basic [0,..,0] identicon', (): void => {
     expect(
       xmlserializer.serializeToString(
-        beachballIcon(new Uint8Array(32), { isAlternative: false, size: 256 })
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        beachballIcon(new Uint8Array(32), { isAlternative: false, size: 256 }) as any
       )
     ).toEqual(
       '<div xmlns="http://www.w3.org/1999/xhtml" class="" style="background: white; border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><div class="" style="background: rgb(20, 20, 20); border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="256" height="256"><circle cx="128" cy="140.8" r="128" fill="hsl(212.10000000000002, 65.6%, 55.5%)"/><circle cx="128" cy="153.6" r="102.4" fill="hsl(9.800000000000011, 90.7%, 57.6%)"/><circle cx="128" cy="166.4" r="76.8" fill="hsl(345, 85.7%, 86.3%)"/><circle cx="128" cy="179.2" r="51.2" fill="hsl(261.9, 100%, 87.3%)"/><circle cx="128" cy="192" r="25.6" fill="hsl(345, 100%, 25.1%)"/></svg></div></div>'
@@ -19,7 +20,8 @@ describe('identicon', (): void => {
   it('allows overrides', (): void => {
     expect(
       xmlserializer.serializeToString(
-        beachballIcon(new Uint8Array(32), { isAlternative: false, size: 100 }, 'testClass', { display: 'block' })
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        beachballIcon(new Uint8Array(32), { isAlternative: false, size: 100 }, 'testClass', { display: 'block' }) as any
       )
     ).toEqual(
       '<div xmlns="http://www.w3.org/1999/xhtml" class="testClass" style="background: white; border-radius: 50px; display: block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><div class="" style="background: rgb(20, 20, 20); border-radius: 50px; display: inline-block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100"><circle cx="50" cy="55" r="50" fill="hsl(212.10000000000002, 65.6%, 55.5%)"/><circle cx="50" cy="60" r="40" fill="hsl(9.800000000000011, 90.7%, 57.6%)"/><circle cx="50" cy="65" r="30" fill="hsl(345, 85.7%, 86.3%)"/><circle cx="50" cy="70" r="20" fill="hsl(261.9, 100%, 87.3%)"/><circle cx="50" cy="75" r="10" fill="hsl(345, 100%, 25.1%)"/></svg></div></div>'

packages/ui-shared/src/icons/beachball/shape/circle.spec.ts

@@ -10,7 +10,8 @@ describe('circle', (): void => {
   it('creates a circle shape', (): void => {
     expect(
       xmlserializer.serializeToString(
-        circle(seeder(), 'blue', 50, 2)
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        circle(seeder(), 'blue', 50, 2) as any
       )
     ).toEqual('<circle xmlns="http://www.w3.org/2000/svg" cx="25" cy="32.5" r="15" fill="blue"/>');
   });

packages/ui-shared/src/icons/beachball/svg/circle.spec.ts

@@ -9,7 +9,8 @@ describe('circle', (): void => {
   it('creates a basic SVG circle element', (): void => {
     expect(
       serializeToString(
-        circle(123, 12, 34)
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        circle(123, 12, 34) as any
       )
     ).toEqual('<circle xmlns="http://www.w3.org/2000/svg" cx="12" cy="34" r="123"/>');
   });

packages/ui-shared/src/icons/beachball/svg/element.spec.ts

@@ -9,7 +9,8 @@ describe('element', (): void => {
   it('creates a basic SVG element', (): void => {
     expect(
       serializeToString(
-        element(123)
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        element(123) as any
       )
     ).toEqual('<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="123" height="123"/>');
   });

packages/ui-shared/src/icons/beachball/svg/rect.spec.ts

@@ -9,7 +9,8 @@ describe('rect', (): void => {
   it('creates a basic SVG rect element', (): void => {
     expect(
       serializeToString(
-        rect(123)
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        rect(123) as any
       )
     ).toEqual('<rect xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="123" height="123" rx="7.6875" ry="7.6875"/>');
   });

packages/ui-shared/src/icons/beachball/svg/svg.spec.ts

@@ -9,7 +9,8 @@ describe('svg', (): void => {
   it('creates a basic SVG element', (): void => {
     expect(
       serializeToString(
-        svg('rect')
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument,@typescript-eslint/no-explicit-any
+        svg('rect') as any
       )
     ).toEqual('<rect xmlns="http://www.w3.org/2000/svg"/>');
   });

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.0.1' };
+export const packageInfo = { name: '@polkadot/ui-shared', path: 'auto', type: 'auto', version: '2.7.2' };

packages/vue-identicon/package.json

@@ -17,13 +17,13 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.0.1",
+  "version": "2.7.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.17.9",
-    "@polkadot/ui-shared": "2.0.1",
-    "@polkadot/util": "^9.0.1",
-    "@polkadot/util-crypto": "^9.0.1",
+    "@babel/runtime": "^7.18.6",
+    "@polkadot/ui-shared": "2.7.2",
+    "@polkadot/util": "^9.7.2",
+    "@polkadot/util-crypto": "^9.7.2",
     "jdenticon": "3.1.1"
   },
   "devDependencies": {

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;
+  isAlternative: boolean;
   publicKey: string;
   type: 'beachball' | 'empty' | 'jdenticon' | 'polkadot' | 'substrate';
 }
@@ -59,6 +60,7 @@ export const Identicon = Vue.extend({
     return {
       address: '',
       iconSize: DEFAULT_SIZE,
+      isAlternative: false,
       publicKey: '0x',
       type: 'empty'
     };
@@ -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
-  // here so we don't create a div wrapped for the div wrapper of the icon
-  template: `
-    <div v-if="type === 'empty' || address === ''">
-      <Empty :key="address" :size="iconSize" />
-    </div>
-    <div v-else-if="type === 'beachball'">
-      <Beachball :key="address" :address="address" :size="iconSize" />
-    </div>
-    <div v-else-if="type === 'polkadot'">
-      <Polkadot :key="address" :address="address" :isAlternative="isAlternative" :size="iconSize" />
-    </div>
-    <div v-else>
-      <Jdenticon :key="address" :publicKey="publicKey" :size="iconSize" />
-    </div>
-  `,
+  render (h): VNode {
+    const { address, iconSize, isAlternative, publicKey, type } = this.$data as Data;
+
+    if (type === 'empty') {
+      return h('Empty', { attrs: { key: address, size: iconSize } }, []);
+    } else if (type === 'jdenticon') {
+      return h('Jdenticon', { attrs: { key: address, publicKey, size: iconSize } }, []);
+    } else {
+      // handles: beachball and polkadot
+      // TODO: substrate
+      const cmp = type.charAt(0).toUpperCase() + type.slice(1);
+
+      return h(cmp, { attrs: { address, isAlternative, key: address, size: iconSize } }, []);
+    }
+  },
   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 from 'vue';
+import Vue, { VNode } from 'vue';
 
 import { beachballIcon } from '@polkadot/ui-shared';
 
-interface Data {
-  html: string;
+type propsType = {
+  address: string;
+  size: number;
+  isAlternative: boolean;
 }
 
 /**
@@ -16,21 +16,12 @@ interface Data {
  * @description The Beachball identicon
  */
 export const Beachball = Vue.extend({
-  created: function (): void {
-    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'],
+  props: ['address', 'size', 'isAlternative'],
   // 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 {
-  svgHtml: string;
+type propsType = {
+  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 {
-  svgHtml: string;
-}
-
-interface This {
+type propsType = {
   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.0.1' };
+export const packageInfo = { name: '@polkadot/vue-identicon', path: 'auto', type: 'auto', version: '2.7.2' };