[CI Skip] release/stable 3.1.1

skip-checks: true

.github/workflows/stale.yml

@@ -1,19 +0,0 @@
-name: 'Close stale issues and PRs'
-on:
-  schedule:
-    - cron: '40 2/3 * * *'
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    env:
-      YARN_ENABLE_SCRIPTS: false
-    steps:
-      - uses: actions/stale@v7
-        with:
-          repo-token: ${{ secrets.GH_PAT_BOT }}
-          stale-issue-message: 'This issue has been open for 365 days with no activity and is not labelled as an enhancement. It will be closed in 7 days.'
-          stale-issue-label: 'stale'
-          exempt-issue-labels: '-size-l,-size-m,-size-s,-size-xl,-size-xs,[bug]'
-          days-before-stale: 365
-          days-before-close: 7

CHANGELOG.md

@@ -1,5 +1,14 @@
 # CHANGELOG
 
+## 3.1.1 Mar 19, 2023
+
+Changes:
+
+- Swap `vue-identitycon` to use `defineComponent` (requires vue 2.7+)
+- Swap `BeachballIcon` to use `colord` library (ESM + CJS, smaller)
+- Bump to `@polkadot/util` 11.1.1
+
+
 ## 3.0.2 Mar 11, 2023
 
 Changes:

CONTRIBUTORS

@@ -1,4 +1,4 @@
-     687	Jaco                          	3.0.2 (#730)
+     696	Jaco                          	3.1.1 (#739)
        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)

package.json

@@ -1,6 +1,9 @@
 {
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "bugs": "https://github.com/polkadot-js/ui/issues",
+  "engines": {
+    "node": ">=14"
+  },
   "homepage": "https://github.com/polkadot-js/ui#readme",
   "license": "Apache-2.0",
   "packageManager": "yarn@3.2.0",
@@ -11,10 +14,10 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "versions": {
-    "git": "3.0.2",
-    "npm": "3.0.2"
+    "git": "3.1.1",
+    "npm": "3.1.1"
   },
   "workspaces": [
     "packages/*"
@@ -30,15 +33,15 @@
     "test:one": "polkadot-dev-run-test --env browser"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.71.4",
-    "@polkadot/x-bundle": "^11.0.2",
-    "@types/node": "^18.15.0",
+    "@polkadot/dev": "^0.72.15",
+    "@polkadot/x-bundle": "^11.1.1",
+    "@types/node": "^18.15.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
     "react-native": "^0.71.4"
   },
   "resolutions": {
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.2"
   }
 }

packages/react-identicon/package.json

@@ -1,11 +1,12 @@
 {
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "bugs": "https://github.com/polkadot-js/ui/issues",
-  "contributors": [],
   "description": "Renders an SVG picture representing an address",
+  "engines": {
+    "node": ">=14"
+  },
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/react-identicon#readme",
   "license": "Apache-2.0",
-  "maintainers": [],
   "name": "@polkadot/react-identicon",
   "repository": {
     "directory": "packages/react-identicon",
@@ -17,26 +18,25 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "main": "index.js",
   "dependencies": {
-    "@polkadot/keyring": "^11.0.2",
-    "@polkadot/ui-settings": "3.0.2",
-    "@polkadot/ui-shared": "3.0.2",
-    "@polkadot/util": "^11.0.2",
-    "@polkadot/util-crypto": "^11.0.2",
-    "color": "^3.2.1",
+    "@polkadot/keyring": "^11.1.1",
+    "@polkadot/ui-settings": "3.1.1",
+    "@polkadot/ui-shared": "3.1.1",
+    "@polkadot/util": "^11.1.1",
+    "@polkadot/util-crypto": "^11.1.1",
     "ethereum-blockies-base64": "^1.0.2",
     "jdenticon": "3.2.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "styled-components": "^5.3.8",
+    "styled-components": "^5.3.9",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
     "@types/react-copy-to-clipboard": "^5.0.4",
     "@types/react-dom": "^18.0.11",
     "@types/styled-components": "^5.1.26",
-    "styled-components": "^5.3.8",
+    "styled-components": "^5.3.9",
     "xmlserializer": "^0.6.1"
   },
   "peerDependencies": {

packages/react-identicon/src/Identicon.tsx

@@ -74,7 +74,7 @@ class BaseIcon extends React.PureComponent<Props, State> {
           address,
           publicKey
         };
-    } catch (error) {
+    } catch {
       return {
         address: '',
         publicKey: '0x'

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

packages/react-qr/package.json

@@ -1,11 +1,12 @@
 {
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "bugs": "https://github.com/polkadot-js/ui/issues",
-  "contributors": [],
   "description": "Generates and reads QR codes",
+  "engines": {
+    "node": ">=14"
+  },
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/react-qr#readme",
   "license": "Apache-2.0",
-  "maintainers": [],
   "name": "@polkadot/react-qr",
   "repository": {
     "directory": "packages/react-qr",
@@ -17,15 +18,15 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "main": "index.js",
   "dependencies": {
-    "@polkadot/ui-settings": "3.0.2",
-    "@polkadot/util": "^11.0.2",
-    "@polkadot/util-crypto": "^11.0.2",
+    "@polkadot/ui-settings": "3.1.1",
+    "@polkadot/util": "^11.1.1",
+    "@polkadot/util-crypto": "^11.1.1",
     "qrcode-generator": "^1.4.4",
     "react-qr-reader": "^2.2.1",
-    "styled-components": "^5.3.8",
+    "styled-components": "^5.3.9",
     "tslib": "^2.5.0"
   },
   "devDependencies": {

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

packages/react-qr/src/util.spec.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/react-qr authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import { u8aConcat, u8aToHex, u8aToString } from '@polkadot/util';
 import { randomAsU8a } from '@polkadot/util-crypto';

packages/reactnative-identicon/package.json

@@ -1,11 +1,12 @@
 {
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "bugs": "https://github.com/polkadot-js/ui/issues",
-  "contributors": [],
   "description": "Renders an SVG picture representing an address",
+  "engines": {
+    "node": ">=14"
+  },
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/reactnative-identicon#readme",
   "license": "Apache-2.0",
-  "maintainers": [],
   "name": "@polkadot/reactnative-identicon",
   "repository": {
     "directory": "packages/reactnative-identicon",
@@ -17,12 +18,12 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "main": "index.js",
   "dependencies": {
-    "@polkadot/ui-shared": "3.0.2",
-    "@polkadot/util": "^11.0.2",
-    "@polkadot/util-crypto": "^11.0.2",
+    "@polkadot/ui-shared": "3.1.1",
+    "@polkadot/util": "^11.1.1",
+    "@polkadot/util-crypto": "^11.1.1",
     "react-native-svg": "^12.5.1",
     "tslib": "^2.5.0"
   },

packages/reactnative-identicon/src/Identicon.tsx

@@ -54,7 +54,7 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
       return address === prevState.address
         ? null
         : { address, publicKey };
-    } catch (error) {
+    } catch {
       return {
         address: '',
         publicKey: '0x'

packages/reactnative-identicon/src/icons/Empty.tsx

@@ -5,7 +5,7 @@ import type { Props } from '../types.js';
 
 import React from 'react';
 import { View } from 'react-native';
-import Svg, { Circle } from 'react-native-svg';
+import { Circle, Svg } from 'react-native-svg';
 
 export default function Empty ({ size }: Props): React.ReactElement<Props> {
   return (

packages/reactnative-identicon/src/icons/Polkadot.tsx

@@ -6,7 +6,7 @@ import type { Props } from '../types.js';
 
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
-import Svg, { Circle as SvgCircle } from 'react-native-svg';
+import { Circle as SvgCircle, Svg } from 'react-native-svg';
 
 import { polkadotIcon } from '@polkadot/ui-shared';
 

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: '3.0.2' };
+export const packageInfo = { name: '@polkadot/reactnative-identicon', path: 'auto', type: 'auto', version: '3.1.1' };

packages/ui-keyring/package.json

@@ -1,10 +1,11 @@
 {
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "bugs": "https://github.com/polkadot-js/ui/issues",
-  "contributors": [],
+  "engines": {
+    "node": ">=14"
+  },
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-keyring#readme",
   "license": "Apache-2.0",
-  "maintainers": [],
   "name": "@polkadot/ui-keyring",
   "repository": {
     "directory": "packages/ui-keyring",
@@ -16,13 +17,13 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "main": "index.js",
   "dependencies": {
-    "@polkadot/keyring": "^11.0.2",
-    "@polkadot/ui-settings": "3.0.2",
-    "@polkadot/util": "^11.0.2",
-    "@polkadot/util-crypto": "^11.0.2",
+    "@polkadot/keyring": "^11.1.1",
+    "@polkadot/ui-settings": "3.1.1",
+    "@polkadot/util": "^11.1.1",
+    "@polkadot/util-crypto": "^11.1.1",
     "mkdirp": "^2.1.5",
     "rxjs": "^7.8.0",
     "store": "^2.0.12",

packages/ui-keyring/src/Keyring.ts

@@ -289,7 +289,7 @@ export class Keyring extends Base implements KeyringStruct {
               this.loadContract(json, key);
             }
           }
-        } catch (error) {
+        } catch {
           console.warn(`Keyring: Unable to load ${key}:${stringify(json)}`);
         }
       }
@@ -299,7 +299,7 @@ export class Keyring extends Base implements KeyringStruct {
       if (this.allowGenesis(account)) {
         try {
           this.loadInjected(account.address, account.meta, account.type);
-        } catch (error) {
+        } catch {
           console.warn(`Keyring: Unable to inject ${stringify(account)}`);
         }
       }

packages/ui-keyring/src/options/index.spec.ts

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-keyring authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import type { KeyringStruct } from '../types.js';
 

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

packages/ui-settings/package.json

@@ -1,11 +1,12 @@
 {
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "bugs": "https://github.com/polkadot-js/ui/issues",
-  "contributors": [],
   "description": "Manages app settings",
+  "engines": {
+    "node": ">=14"
+  },
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-settings#readme",
   "license": "Apache-2.0",
-  "maintainers": [],
   "name": "@polkadot/ui-settings",
   "repository": {
     "directory": "packages/ui-settings",
@@ -17,11 +18,11 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "main": "index.js",
   "dependencies": {
-    "@polkadot/networks": "^11.0.2",
-    "@polkadot/util": "^11.0.2",
+    "@polkadot/networks": "^11.1.1",
+    "@polkadot/util": "^11.1.1",
     "eventemitter3": "^4.0.7",
     "store": "^2.0.12",
     "tslib": "^2.5.0"

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

packages/ui-shared/package.json

@@ -1,11 +1,12 @@
 {
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "bugs": "https://github.com/polkadot-js/ui/issues",
-  "contributors": [],
   "description": "Shared logic that is usable accross all frameworks-specific areas",
+  "engines": {
+    "node": ">=14"
+  },
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-shared#readme",
   "license": "Apache-2.0",
-  "maintainers": [],
   "name": "@polkadot/ui-shared",
   "repository": {
     "directory": "packages/ui-shared",
@@ -17,16 +18,15 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "main": "index.js",
   "dependencies": {
-    "color": "^3.2.1",
+    "colord": "^2.9.3",
     "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@polkadot/util": "^11.0.2",
-    "@polkadot/util-crypto": "^11.0.2",
-    "@types/color": "^3.0.3",
+    "@polkadot/util": "^11.1.1",
+    "@polkadot/util-crypto": "^11.1.1",
     "@types/xmlserializer": "^0.6.3",
     "xmlserializer": "^0.6.1"
   },

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

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import type { ColorGen } from './types.js';
 
@@ -19,8 +19,9 @@ describe('colors', (): void => {
     expect(
       colors()
     ).toEqual(
-      // 'hsla(166.70000000000005, 98.6%, 27.6%, 0.9)'
-      'hsl(37.19999999999999, 100%, 54.9%)'
+      // with original color ...
+      // 'hsl(37.19999999999999, 100%, 54.9%)'
+      'hsl(37, 100%, 55%)'
     );
   });
 
@@ -28,17 +29,22 @@ describe('colors', (): void => {
     expect(
       colors(0.5)
     ).toEqual(
-      // 'hsla(166.70000000000005, 98.6%, 27.6%, 0.5)'
-      'hsla(37.19999999999999, 100%, 54.9%, 0.5)'
+      // with original color ...
+      // 'hsla(37.19999999999999, 100%, 54.9%, 0.5)'
+      'hsla(37, 100%, 55%, 0.5)'
     );
   });
 
   it('rolates colors', (): void => {
-    colors();
+    const orig = colors();
+
+    expect(
+      orig
+    ).toEqual('hsl(37, 100%, 55%)');
 
     expect(
       colors()
-    ).not.toEqual('hsla(166.70000000000005, 98.6%, 27.6%, 0.9)');
+    ).not.toEqual(orig);
   });
 
   it('works in edge conditions (0xff)', (): void => {
@@ -53,8 +59,9 @@ describe('colors', (): void => {
     expect(
       colors()
     ).toEqual(
-      // 'hsla(234.39999999999998, 75.9%, 51.2%, 0.9)'
-      'hsl(15, 0%, 100%)'
+      // with original color ...
+      // 'hsl(15, 0%, 100%)'
+      'hsl(0, 0%, 100%)'
     );
   });
 });

packages/ui-shared/src/icons/beachball/colors.ts

@@ -3,9 +3,10 @@
 
 // Copyright 2016 Dan Finlay
 
+import type { Colord } from 'colord';
 import type { ColorGen, Seeder } from './types.js';
 
-import Color from 'color';
+import { colord } from 'colord';
 
 import { COLORS } from './defaults.js';
 
@@ -13,8 +14,8 @@ const WOBBLE = 30;
 
 export function colors (seeder: Seeder): ColorGen {
   const amount = (seeder() * WOBBLE) - (WOBBLE / 2);
-  const all = COLORS.map((hex): Color =>
-    Color(hex).rotate(amount)
+  const all = COLORS.map((hex): Colord =>
+    colord(hex).rotate(amount)
   );
 
   return (alpha = 1): string => {
@@ -22,6 +23,6 @@ export function colors (seeder: Seeder): ColorGen {
 
     return all.splice(index, 1)[0]
       .alpha(alpha)
-      .string();
+      .toHslString();
   };
 }

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

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import { container } from './container.js';
 

packages/ui-shared/src/icons/beachball/defaults.ts

@@ -3,14 +3,9 @@
 
 // Copyright 2016 Dan Finlay
 
-const COLORS: string[] = [
+export const COLORS: readonly string[] = [
   // https://sashat.me/2017/01/11/list-of-20-simple-distinct-colors/
   '#ffe119', '#4363d8', '#f58231', '#fabebe', '#e6beff', '#800000', '#000075', '#a9a9a9', '#ffffff', '#000000'
-];
+] as const;
 
-const SHAPE_COUNT = 5;
-
-export {
-  COLORS,
-  SHAPE_COUNT
-};
+export const SHAPE_COUNT = 5 as const;

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

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import xmlserializer from 'xmlserializer';
 
@@ -15,7 +15,9 @@ describe('identicon', (): void => {
         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>'
+      // with original color ...
+      // '<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>'
+      '<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(26, 26, 26); 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, 66%, 55%)"/><circle cx="128" cy="153.6" r="102.4" fill="hsl(10, 91%, 58%)"/><circle cx="128" cy="166.4" r="76.8" fill="hsl(345, 86%, 86%)"/><circle cx="128" cy="179.2" r="51.2" fill="hsl(262, 100%, 87%)"/><circle cx="128" cy="192" r="25.6" fill="hsl(345, 100%, 25%)"/></svg></div></div>'
     );
   });
 
@@ -26,7 +28,9 @@ describe('identicon', (): void => {
         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>'
+      // with original color ...
+      // '<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>'
+      '<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(26, 26, 26); 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, 66%, 55%)"/><circle cx="50" cy="60" r="40" fill="hsl(10, 91%, 58%)"/><circle cx="50" cy="65" r="30" fill="hsl(345, 86%, 86%)"/><circle cx="50" cy="70" r="20" fill="hsl(262, 100%, 87%)"/><circle cx="50" cy="75" r="10" fill="hsl(345, 100%, 25%)"/></svg></div></div>'
     );
   });
 });

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

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import type { Seeder } from './types.js';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import xmlserializer from 'xmlserializer';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import xs from 'xmlserializer';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import xs from 'xmlserializer';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import xs from 'xmlserializer';
 

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

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import xs from 'xmlserializer';
 

packages/ui-shared/src/icons/polkadot.spec.ts

@@ -1,7 +1,7 @@
 // Copyright 2018-2023 @polkadot/ui-shared authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-/// <reference types="@polkadot/dev/node/test/node" />
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
 
 import { polkadotIcon } from './polkadot.js';
 

packages/ui-shared/src/icons/polkadot.ts

@@ -57,7 +57,7 @@ function getRotation (isSixPoint: boolean): { r: number; ro2: number; r3o4: numb
   return { r, r3o4, ro2, ro4, rroot3o2, rroot3o4 };
 }
 
-function getCircleXY (isSixPoint: boolean): [number, number][] {
+function getCircleXY (isSixPoint = false): [number, number][] {
   const { r, r3o4, ro2, ro4, rroot3o2, rroot3o4 } = getRotation(isSixPoint);
 
   return [

packages/ui-shared/src/icons/types.ts

@@ -9,6 +9,6 @@ export interface Circle {
 }
 
 export interface Options {
-  isAlternative: boolean;
+  isAlternative?: boolean;
   size?: number;
 }

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

packages/vue-identicon/package.json

@@ -1,11 +1,12 @@
 {
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "bugs": "https://github.com/polkadot-js/ui/issues",
-  "contributors": [],
   "description": "Renders an SVG picture representing an address",
+  "engines": {
+    "node": ">=14"
+  },
   "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/vue-identicon#readme",
   "license": "Apache-2.0",
-  "maintainers": [],
   "name": "@polkadot/vue-identicon",
   "repository": {
     "directory": "packages/vue-identicon",
@@ -17,12 +18,12 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "main": "index.js",
   "dependencies": {
-    "@polkadot/ui-shared": "3.0.2",
-    "@polkadot/util": "^11.0.2",
-    "@polkadot/util-crypto": "^11.0.2",
+    "@polkadot/ui-shared": "3.1.1",
+    "@polkadot/util": "^11.1.1",
+    "@polkadot/util-crypto": "^11.1.1",
     "jdenticon": "3.2.0",
     "tslib": "^2.5.0"
   },
@@ -32,6 +33,6 @@
   "peerDependencies": {
     "@polkadot/util": "*",
     "@polkadot/util-crypto": "*",
-    "vue": "*"
+    "vue": "^2.7"
   }
 }

packages/vue-identicon/src/Identicon.ts

@@ -3,7 +3,7 @@
 
 import type { Prefix } from '@polkadot/util-crypto/address/types';
 
-import Vue, { VNode } from 'vue';
+import { defineComponent, VNode } from 'vue';
 
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
@@ -33,7 +33,7 @@ function encodeAccount (value: string | Uint8Array, prefix?: Prefix): Account {
     const publicKey = u8aToHex(decodeAddress(address, false, prefix));
 
     return { address, publicKey };
-  } catch (error) {
+  } catch {
     return { address: '', publicKey: '0x' };
   }
 }
@@ -46,7 +46,7 @@ function encodeAccount (value: string | Uint8Array, prefix?: Prefix): Account {
  * <Identicon :size="128" :theme="polkadot" :value="..." />
  * ```
  */
-export const Identicon = Vue.extend({
+export const Identicon = defineComponent({
   components: {
     Beachball,
     Empty,
@@ -81,19 +81,37 @@ export const Identicon = Vue.extend({
   },
   props: ['prefix', 'isAlternative', 'size', 'theme', 'value'],
   render (h): VNode {
-    const { address, iconSize, isAlternativeIcon, publicKey, type } = this.$data as Data;
+    const { address, iconSize, isAlternativeIcon, publicKey, type } = this.$data;
 
     if (type === 'empty') {
-      return h('Empty', { attrs: { key: address, size: iconSize } }, []);
+      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: isAlternativeIcon, key: address, size: iconSize } }, []);
+      return h('Jdenticon', {
+        attrs: {
+          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);
+
+    return h(cmp, {
+      attrs: {
+        address,
+        isAlternative: isAlternativeIcon,
+        key: address,
+        size: iconSize
+      }
+    }, []);
   },
   watch: {
     value: function (): void {

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

@@ -1,11 +1,11 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import Vue, { VNode } from 'vue';
+import { defineComponent, VNode } from 'vue';
 
 import { beachballIcon } from '@polkadot/ui-shared';
 
-type propsType = {
+type PropsType = {
   address: string;
   size: number;
   isAlternative: boolean;
@@ -15,13 +15,16 @@ type propsType = {
  * @name Beachball
  * @description The Beachball identicon
  */
-export const Beachball = Vue.extend({
+export const Beachball = defineComponent({
   props: ['address', 'size', 'isAlternative'],
-  // eslint-disable-next-line quotes
   render (h): VNode {
-    const { address, isAlternative, size } = this.$props as propsType;
-    const bb = beachballIcon(address, { isAlternative, size });
+    const { address, isAlternative, size } = this.$props as PropsType;
 
-    return h(Vue.component('VCBeachball', { template: bb.outerHTML }));
+    return h({
+      template: beachballIcon(address, {
+        isAlternative,
+        size
+      }).outerHTML
+    });
   }
 });

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

@@ -1,13 +1,13 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
 /**
  * @name Empty
  * @description An empty identicon
  */
-export const Empty = Vue.extend({
+export const Empty = defineComponent({
   props: ['size'],
   template: `
     <svg :height="size" :width="size" viewBox="0 0 64 64">

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

@@ -2,9 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import * as jdenticon from 'jdenticon';
-import Vue, { VNode } from 'vue';
+import { defineComponent, VNode } from 'vue';
 
-type propsType = {
+type PropsType = {
   publicKey: string,
   size: number
 }
@@ -13,13 +13,13 @@ type propsType = {
  * @name Jdenticon
  * @description The substrate default via Jdenticon
  */
-export const Jdenticon = Vue.extend({
+export const Jdenticon = defineComponent({
   props: ['publicKey', 'size'],
-  // eslint-disable-next-line quotes
   render (h): VNode {
-    const { publicKey, size } = this.$props as propsType;
-    const cmp = Vue.component('CJdenticon', { template: jdenticon.toSvg(publicKey.substring(2), size) });
+    const { publicKey, size } = this.$props as PropsType;
 
-    return h(cmp);
+    return h({
+      template: jdenticon.toSvg(publicKey.substring(2), size)
+    });
   }
 });

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

@@ -1,7 +1,7 @@
 // Copyright 2017-2023 @polkadot/vue-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import Vue, { VNode } from 'vue';
+import { defineComponent, VNode } from 'vue';
 
 import { polkadotIcon } from '@polkadot/ui-shared';
 
@@ -15,21 +15,20 @@ type propsType = {
  * @name Polkadot
  * @description The Polkadot default identicon
  */
-export const Polkadot = Vue.extend({
+export const Polkadot = defineComponent({
   props: ['address', 'isAlternative', 'size'],
-  // eslint-disable-next-line quotes
   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 } }, []);
-    }
+    const circles = polkadotIcon(address, { isAlternative }).map(({ cx, cy, fill, r }) =>
+      h('circle', { attrs: { cx, cy, fill, r } }, [])
     );
 
-    return h('svg', { attrs: { height: size, viewBox: '0 0 64 64', width: size } }, circles);
+    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: '3.0.2' };
+export const packageInfo = { name: '@polkadot/vue-identicon', path: 'auto', type: 'auto', version: '3.1.1' };

tsconfig.base.json

@@ -14,7 +14,6 @@
       "@polkadot/ui-shared/icons/*": ["ui-shared/src/icons/*.ts"],
       "@polkadot/ui-shared/packageInfo": ["ui-shared/src/packageInfo.ts"],
       "@polkadot/vue-identicon": ["vue-identicon/src/index.ts"],
-    },
-    "skipLibCheck": true
+    }
   }
  }