[CI Skip] release/stable 3.2.2

skip-checks: true

.github/workflows/auto-merge.yml

@@ -10,7 +10,7 @@ jobs:
     steps:
       - uses: jacogr/action-merge@d2d64b4545acd93b0a9575177d3d215ae3f92029
         with:
-          checks: build,lint,test
+          checks: pr (build),pr (lint),pr (test)
           labels: -auto
           strategy: squash
           token: ${{ secrets.GH_PAT_BOT }}

.github/workflows/lock.yml

@@ -10,16 +10,16 @@ jobs:
     env:
       YARN_ENABLE_SCRIPTS: false
     steps:
-      - uses: dessant/lock-threads@f1a42f0f44eb83361d617a014663e1a76cf282d2
+      - uses: dessant/lock-threads@c1b35aecc5cdb1a34539d14196df55838bb2f836
         with:
           github-token: ${{ secrets.GH_PAT_BOT }}
-          issue-lock-inactive-days: '7'
-          issue-lock-comment: >
+          issue-inactive-days: '7'
+          issue-comment: >
             This thread has been automatically locked since there has not been
             any recent activity after it was closed. Please open a new issue
             if you think you have a related problem or query.
-          pr-lock-inactive-days: '2'
-          pr-lock-comment: >
+          pr-inactive-days: '2'
+          pr-comment: >
             This pull request has been automatically locked since there
             has not been any recent activity after it was closed.
             Please open a new issue for related bugs.

.github/workflows/pr-any.yml

@@ -3,10 +3,10 @@ on: [pull_request]
 
 jobs:
   pr:
+    continue-on-error: true
     strategy:
       matrix:
         step: ['lint', 'test', 'build']
-    name: ${{ matrix.step }}
     runs-on: ubuntu-latest
     env:
       YARN_ENABLE_SCRIPTS: false

.github/workflows/push-master.yml

@@ -10,7 +10,6 @@ jobs:
     strategy:
       matrix:
         step: ['build:release']
-    name: ${{ matrix.step }}
     runs-on: ubuntu-latest
     env:
       YARN_ENABLE_SCRIPTS: false

.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@98ed4cb500039dbcccf4bd9bedada4d0187f2757
-        with:
-          repo-token: ${{ secrets.GH_PAT_BOT }}
-          stale-issue-message: 'This issue has been open for 21 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: 21
-          days-before-close: 7

CHANGELOG.md

@@ -1,5 +1,70 @@
 # CHANGELOG
 
+## 3.2.2 Apr 29, 2023
+
+Changes:
+
+- Add missing `react-is` peer dependency for `styled-components`
+- Adjust compilation output for `__internal__` class fields
+- Bump to `@polkadot/util` 12.1.1
+
+
+## 3.2.1 Apr 22, 2023
+
+Changes:
+
+- Bump to `@polkadot/util` 12.0.1
+
+
+## 3.1.4 Apr 1, 2023
+
+Changes:
+
+- Bump to `@polkadot/util` 11.1.3
+
+
+## 3.1.3 Mar 25, 2023
+
+Changes:
+
+- Align `eventemitter` version with `@polkadot/api`
+
+
+## 3.1.2 Mar 25, 2023
+
+Changes:
+
+- Cater for Ethereum-compatible multisig addresses
+- Bump to `@polkadot/util` 11.1.2
+
+
+## 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:
+
+- Use consistent `.js` imports in source files (TS moduleResolution)
+- Bump to `@polkadot/util` 11.0.2
+
+
+## 3.0.1 Mar 5, 2023
+
+Changes:
+
+- Remove `@polkadot/ui-assets` package
+- Swap TS -> JS compiler to use tsc (from babel)
+- Adjust all tests to use `node:test` runner (ESM variants)
+- Bump to `@polkadot/util` 11.0.1
+
+
 ## 2.12.1 Feb 20, 2023
 
 Changes:

CONTRIBUTORS

@@ -1,4 +1,4 @@
-     674	Jaco                          	2.12.1 (#718)
+     710	Jaco                          	3.2.2 (#754)
        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)

README.md

@@ -13,14 +13,6 @@ The following UI components are currently available -
 
 Additionally some shared libraries, that are not dependent on any framework -
 
-- [ui-assets](packages/ui-assets/) Static assets, images and others, shared across projects
 - [ui-keyring](packages/ui-keyring/) A browser-specific wrapper around the base [@polkadot/util-keyring](https://github.com/polkadot-js/util/) library
 - [ui-settings](packages/ui-settings/) A browser local storage wrapper for app settings & configuration
 - [ui-shared](packages/ui-shared) Shared logic that is used across UI components, e.g. for icon generation
-
-## examples
-
-In addition to the above packages, there are examples available for integration of `ui-keyring`, `ui-settings` & the relevant `*-identicon` package. These are
-
-- [example-react](packages/example-react) - start with `yarn example:react` and view on `http://localhost:8080`
-- [example-vue](packages/example-vue) - start with `yarn example:vue` and view on `http://localhost:8080`

babel.config.cjs

@@ -1,16 +0,0 @@
-// Copyright 2017-2023 @polkadot/ui authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-const base = require('@polkadot/dev/config/babel-config-cjs.cjs');
-
-module.exports = Object.keys(base).reduce((config, key) => {
-  config[key] = base[key];
-
-  if (key === 'plugins') {
-    config[key] = config[key].concat([
-      'transform-vue-template'
-    ]);
-  }
-
-  return config;
-}, {});

jest.config.cjs

@@ -1,17 +0,0 @@
-// Copyright 2017-2023 @polkadot/ui authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-const config = require('@polkadot/dev/config/jest.cjs');
-
-module.exports = {
-  ...config,
-  moduleNameMapper: {
-    '@polkadot/react-(identicon|qr)(.*)$': '<rootDir>/packages/react-$1/src/$2',
-    '@polkadot/reactnative-(identicon)(.*)$': '<rootDir>/packages/reactnative-$1/src/$2',
-    '@polkadot/ui-(assets|keyring|settings|shared)(.*)$': '<rootDir>/packages/ui-$1/src/$2',
-    '\\.(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

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

package.json

@@ -1,6 +1,9 @@
 {
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "bugs": "https://github.com/polkadot-js/ui/issues",
+  "engines": {
+    "node": ">=18.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": "2.12.1",
+  "version": "3.2.2",
   "versions": {
-    "git": "2.12.1",
-    "npm": "2.12.1"
+    "git": "3.2.2",
+    "npm": "3.2.2"
   },
   "workspaces": [
     "packages/*"
@@ -24,31 +27,21 @@
     "build:release": "polkadot-ci-ghact-build",
     "build:rollup": "polkadot-exec-rollup --config",
     "clean": "polkadot-dev-clean-build",
-    "example:react": "yarn build && cd packages/example-react && yarn polkadot-exec-webpack --config webpack.config.cjs",
-    "example:vue": "yarn build && cd packages/example-vue && yarn polkadot-exec-webpack --config webpack.config.cjs",
     "lint": "polkadot-dev-run-lint",
     "postinstall": "polkadot-dev-yarn-only",
-    "test": "polkadot-dev-run-test --env jest -- --coverage --runInBand",
-    "test:one": "polkadot-dev-run-test"
+    "test": "polkadot-dev-run-test --env browser",
+    "test:one": "polkadot-dev-run-test --env browser"
   },
   "devDependencies": {
-    "@babel/core": "^7.20.12",
-    "@babel/runtime": "^7.20.13",
-    "@polkadot/dev": "^0.68.40",
-    "@polkadot/x-bundle": "^10.4.2",
-    "@types/jest": "^29.4.0",
-    "babel-loader": "^8.3.0",
-    "babel-plugin-transform-vue-template": "^0.4.2",
-    "empty": "^0.10.1",
-    "process": "^0.11.10",
+    "@polkadot/dev": "^0.73.6",
+    "@polkadot/x-bundle": "^12.1.1",
+    "@types/node": "^18.16.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
-    "react-native": "^0.71.3",
-    "stream-browserify": "^3.0.0",
-    "vue-template-compiler": "^2.7.14"
+    "react-native": "^0.71.7"
   },
   "resolutions": {
-    "typescript": "^4.9.5"
+    "typescript": "^5.0.4"
   }
 }

packages/example-react/README.md

@@ -1,3 +0,0 @@
-# @polkadot/example-react
-
-A versy basic React example with `@polkadot/ui-keyring`, `@polkadot/ui-settings` & `@polkadot/react-identicon`

packages/example-react/index.html

@@ -1,37 +0,0 @@
-<html>
-  <head>
-    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
-    <style>
-      #example {
-        padding: 0.5em;
-      }
-
-      button {
-        cursor: pointer;
-        padding: 0.5rem 0.75rem;
-      }
-
-      label {
-        display: block;
-        margin: 0.25rem 0;
-        opacity: 0.5;
-      }
-
-      section {
-        padding: 0.5rem 1rem;
-      }
-
-      textarea {
-        resize: none;
-      }
-
-      .icon {
-        margin-right: 0.75rem;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="example"></div>
-    <script src="./build/main.js"></script>
-  </body>
-</html>

packages/example-react/package.json

@@ -1,22 +0,0 @@
-{
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "bugs": "https://github.com/polkadot-js/ui/issues",
-  "contributors": [],
-  "description": "A very basic example with ui-* & react-* packages",
-  "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/example-react#readme",
-  "license": "Apache-2.0",
-  "maintainers": [],
-  "name": "@polkadot/example-react",
-  "private": true,
-  "repository": {
-    "directory": "packages/example-react",
-    "type": "git",
-    "url": "https://github.com/polkadot-js/ui.git"
-  },
-  "sideEffects": false,
-  "version": "2.12.1",
-  "main": "index.js",
-  "dependencies": {
-    "@babel/runtime": "^7.20.13"
-  }
-}

packages/example-react/src/detectOther.ts

@@ -1,6 +0,0 @@
-// Copyright 2017-2023 @polkadot/example-react authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-// Empty template, auto-generated by @polkadot/dev
-
-export default [];

packages/example-react/src/detectPackage.ts

@@ -1,11 +0,0 @@
-// Copyright 2017-2023 @polkadot/example-react authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-// Do not edit, auto-generated by @polkadot/dev
-
-import { detectPackage } from '@polkadot/util';
-
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
-
-detectPackage(packageInfo, null, others);

packages/example-react/src/index.tsx

@@ -1,121 +0,0 @@
-// Copyright 2017-2023 @polkadot/example-react authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import React, { useCallback, useEffect, useState } from 'react';
-import ReactDOM from 'react-dom';
-
-import { Identicon } from '@polkadot/react-identicon';
-import { keyring } from '@polkadot/ui-keyring';
-import { settings } from '@polkadot/ui-settings';
-import { cryptoWaitReady, mnemonicGenerate } from '@polkadot/util-crypto';
-
-interface Props {
-  className?: string;
-}
-
-const rootElement = document.getElementById('example');
-
-if (!rootElement) {
-  throw new Error('Unable to find element with id \'example\'');
-}
-
-function App ({ className }: Props): React.ReactElement<Props> | null {
-  const [address, setAddress] = useState<string | null>(null);
-  const [phrase, setPhrase] = useState<string | null>(null);
-  const [ss58Format, setSS58Format] = useState(42);
-
-  const _onClickNew = useCallback(
-    (): void => {
-      const phrase = mnemonicGenerate(12);
-      const { address } = keyring.createFromUri(phrase);
-
-      setAddress(keyring.encodeAddress(address, ss58Format));
-      setPhrase(phrase);
-    },
-    [ss58Format]
-  );
-
-  const _onChangeSS58Format = useCallback(
-    ({ currentTarget: { value } }: React.SyntheticEvent<HTMLSelectElement>): void => {
-      setSS58Format(parseInt(value, 10));
-    },
-    []
-  );
-
-  useEffect((): void => {
-    _onClickNew();
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  useEffect((): void => {
-    address && setAddress(keyring.encodeAddress(address, ss58Format));
-  }, [address, ss58Format]);
-
-  if (!address || !phrase) {
-    return null;
-  }
-
-  return (
-    <div className={className}>
-      <section>
-        <button onClick={_onClickNew}>another random address</button>
-      </section>
-      <section>
-        <label>phrase</label>
-        <textarea
-          cols={40}
-          readOnly
-          rows={4}
-          value={phrase}
-        />
-      </section>
-      <section>
-        <label>icons</label>
-        <Identicon
-          className='icon'
-          value={address}
-        />
-        <Identicon
-          className='icon'
-          theme='polkadot'
-          value={address}
-        />
-        <Identicon
-          className='icon'
-          theme='beachball'
-          value={address}
-        />
-      </section>
-      <section>
-        <label>address</label>
-        {address}
-      </section>
-      <section>
-        <label>ss58 format</label>
-        <select
-          onChange={_onChangeSS58Format}
-          value={ss58Format}
-        >
-          {settings.availablePrefixes
-            .filter((_, index): boolean => index !== 0)
-            .map(({ text, value }): React.ReactNode => (
-              <option
-                key={value}
-                value={value}
-              >
-                {text}
-              </option>
-            ))
-          }
-        </select>
-      </section>
-    </div>
-  );
-}
-
-cryptoWaitReady()
-  .then((): void => {
-    keyring.loadAll({ ss58Format: 42, type: 'sr25519' });
-    ReactDOM.render(<App />, rootElement);
-  })
-  .catch(console.error);

packages/example-react/src/packageInfo.ts

@@ -1,6 +0,0 @@
-// Copyright 2017-2023 @polkadot/example-react authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-// Do not edit, auto-generated by @polkadot/dev
-
-export const packageInfo = { name: '@polkadot/example-react', path: 'auto', type: 'auto', version: '2.12.1' };

packages/example-react/tsconfig.build.json

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

packages/example-react/webpack.config.cjs

@@ -1,53 +0,0 @@
-// Copyright 2017-2023 @polkadot/example-react authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-const path = require('path');
-const { WebpackPluginServe } = require('webpack-plugin-serve');
-
-module.exports = {
-  context: __dirname,
-  devtool: 'eval-cheap-source-map',
-  entry: './src/index.tsx',
-  mode: 'development',
-  module: {
-    rules: [
-      {
-        exclude: /(node_modules)/,
-        test: /\.(ts|tsx)$/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: require('../../babel.config.cjs')
-          }
-        ]
-      }
-    ]
-  },
-  output: {
-    chunkFilename: '[name].[chunkhash:8].js',
-    filename: '[name].js',
-    globalObject: '(typeof self !== \'undefined\' ? self : this)',
-    path: path.join(__dirname, 'build')
-  },
-  plugins: [
-    new WebpackPluginServe({
-      hmr: false, // switch off, Chrome WASM memory leak
-      liveReload: false, // explict off, overrides hmr
-      port: 8080,
-      progress: false, // since we have hmr off, disable
-      static: __dirname
-    })
-  ],
-  resolve: {
-    alias: {
-      '@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')
-    },
-    extensions: ['.js', '.ts', '.tsx'],
-    fallback: {}
-  },
-  target: 'web',
-  watch: true
-};

packages/example-vue/README.md

@@ -1,3 +0,0 @@
-# @polkadot/example-vue
-
-A versy basic Vue.js example with `@polkadot/ui-keyring`, `@polkadot/ui-settings` & `@polkadot/vue-identicon`

packages/example-vue/index.html

@@ -1,38 +0,0 @@
-<html>
-  <head>
-    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
-    <style>
-      #example {
-        padding: 0.5em;
-      }
-
-      button {
-        cursor: pointer;
-        padding: 0.5rem 0.75rem;
-      }
-
-      label {
-        display: block;
-        margin: 0.25rem 0;
-        opacity: 0.5;
-      }
-
-      section {
-        padding: 0.5rem 1rem;
-      }
-
-      textarea {
-        resize: none;
-      }
-
-      .icon {
-        display: inline-block;
-        margin-right: 0.75rem;
-      }
-    </style>
-  </head>
-  <body>
-    <div id="example"></div>
-    <script src="./build/main.js"></script>
-  </body>
-</html>

packages/example-vue/package.json

@@ -1,22 +0,0 @@
-{
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "bugs": "https://github.com/polkadot-js/ui/issues",
-  "contributors": [],
-  "description": "A very basic example with ui-* & vue-* packages",
-  "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/example-vue#readme",
-  "license": "Apache-2.0",
-  "maintainers": [],
-  "name": "@polkadot/example-vue",
-  "private": true,
-  "repository": {
-    "directory": "packages/example-vue",
-    "type": "git",
-    "url": "https://github.com/polkadot-js/ui.git"
-  },
-  "sideEffects": false,
-  "version": "2.12.1",
-  "main": "index.js",
-  "dependencies": {
-    "@babel/runtime": "^7.20.13"
-  }
-}

packages/example-vue/src/detectOther.ts

@@ -1,6 +0,0 @@
-// Copyright 2017-2023 @polkadot/example-vue authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-// Empty template, auto-generated by @polkadot/dev
-
-export default [];

packages/example-vue/src/detectPackage.ts

@@ -1,11 +0,0 @@
-// Copyright 2017-2023 @polkadot/example-vue authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-// Do not edit, auto-generated by @polkadot/dev
-
-import { detectPackage } from '@polkadot/util';
-
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
-
-detectPackage(packageInfo, null, others);

packages/example-vue/src/index.ts

@@ -1,99 +0,0 @@
-// Copyright 2017-2023 @polkadot/example-vue authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import type { Prefix } from '@polkadot/util-crypto/address/types';
-
-import Vue, { VNode } from 'vue';
-
-import { keyring } from '@polkadot/ui-keyring';
-import { settings } from '@polkadot/ui-settings';
-import { cryptoWaitReady, mnemonicGenerate } from '@polkadot/util-crypto';
-import Identicon from '@polkadot/vue-identicon';
-
-interface Account {
-  address: string;
-  phrase: string;
-}
-
-interface Data extends Account {
-  ss58Format: Prefix;
-  ss58Options: { text: string; value: string | number }[];
-}
-
-const ss58Options = settings.availablePrefixes.filter((_, index): boolean => index !== 0);
-
-function generateAccount (ss58Format: Prefix = 42): Account {
-  const phrase = mnemonicGenerate(12);
-  const { address } = keyring.createFromUri(phrase);
-
-  return {
-    address: keyring.encodeAddress(address, ss58Format),
-    phrase
-  };
-}
-
-const Example = Vue.extend({
-  components: {
-    Identicon
-  },
-  data: function (): Data {
-    return {
-      ...generateAccount(),
-      ss58Format: 42,
-      ss58Options
-    };
-  },
-  methods: {
-    onClickNew: function (): void {
-      const { address, phrase } = generateAccount(this.ss58Format);
-
-      this.address = address;
-      this.phrase = phrase;
-    }
-  },
-  name: 'Example',
-  template: `
-    <div id="example">
-      <section>
-        <button v-on:click="onClickNew">another random address</button>
-      </section>
-      <section>
-        <label>phrase</label>
-        <textarea :cols="40" :rows="4" readonly v-model="phrase" />
-      </section>
-      <section>
-        <label>icons</label>
-        <Identicon class='icon' :value="address" />
-        <Identicon class='icon' :value="address" :theme="'polkadot'" />
-        <Identicon class='icon' :value="address" :theme="'beachball'" />
-      </section>
-      <section>
-        <label>address</label>
-        {{ address }}
-      </section>
-      <section>
-        <label>ss58 format</label>
-        <select v-model="ss58Format">
-          <option v-for="option in ss58Options" v-bind:value="option.value">
-            {{ option.text }}
-          </option>
-        </select>
-      </section>
-    </div>
-  `,
-  watch: {
-    ss58Format: function (): void {
-      this.address = keyring.encodeAddress(this.address, this.ss58Format);
-    }
-  }
-});
-
-cryptoWaitReady()
-  .then((): void => {
-    keyring.loadAll({ ss58Format: 42, type: 'sr25519' });
-
-    new Vue({
-      render: (h): VNode => h(Example)
-    }).$mount('#example');
-  })
-  .catch(console.error);

packages/example-vue/src/packageInfo.ts

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

packages/example-vue/tsconfig.build.json

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

packages/example-vue/webpack.config.cjs

@@ -1,52 +0,0 @@
-// Copyright 2017-2023 @polkadot/example-vue authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-const path = require('path');
-const { WebpackPluginServe } = require('webpack-plugin-serve');
-
-module.exports = {
-  context: __dirname,
-  devtool: 'eval-cheap-source-map',
-  entry: './src/index.ts',
-  mode: 'development',
-  module: {
-    rules: [
-      {
-        exclude: /(node_modules)/,
-        test: /\.(ts|tsx)$/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: require('../../babel.config.cjs')
-          }
-        ]
-      }
-    ]
-  },
-  output: {
-    chunkFilename: '[name].[chunkhash:8].js',
-    filename: '[name].js',
-    globalObject: '(typeof self !== \'undefined\' ? self : this)',
-    path: path.join(__dirname, 'build')
-  },
-  plugins: [
-    new WebpackPluginServe({
-      hmr: false, // switch off, Chrome WASM memory leak
-      liveReload: false, // explict off, overrides hmr
-      port: 8080,
-      progress: false, // since we have hmr off, disable
-      static: __dirname
-    })
-  ],
-  resolve: {
-    alias: {
-      '@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'),
-      '@polkadot/vue-identicon': path.resolve(__dirname, '../vue-identicon/build')
-    },
-    extensions: ['.js', '.ts', '.tsx']
-  },
-  target: 'web',
-  watch: true
-};

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": ">=16"
+  },
   "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,24 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.12.1",
+  "version": "3.2.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@polkadot/keyring": "^10.4.2",
-    "@polkadot/ui-settings": "2.12.1",
-    "@polkadot/ui-shared": "2.12.1",
-    "@polkadot/util": "^10.4.2",
-    "@polkadot/util-crypto": "^10.4.2",
-    "color": "^3.2.1",
+    "@polkadot/keyring": "^12.1.1",
+    "@polkadot/ui-settings": "3.2.2",
+    "@polkadot/ui-shared": "3.2.2",
+    "@polkadot/util": "^12.1.1",
+    "@polkadot/util-crypto": "^12.1.1",
     "ethereum-blockies-base64": "^1.0.2",
     "jdenticon": "3.2.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "styled-components": "^5.3.6"
+    "styled-components": "^5.3.10",
+    "tslib": "^2.5.0"
   },
   "devDependencies": {
     "@types/react-copy-to-clipboard": "^5.0.4",
-    "@types/react-dom": "^18.0.11",
+    "@types/react-dom": "^18.2.1",
     "@types/styled-components": "^5.1.26",
-    "styled-components": "^5.3.6",
     "xmlserializer": "^0.6.1"
   },
   "peerDependencies": {
@@ -45,7 +44,6 @@
     "@polkadot/util-crypto": "*",
     "react": "*",
     "react-dom": "*",
-    "react-is": "*",
-    "styled-components": "*"
+    "react-is": "*"
   }
 }

packages/react-identicon/src/Identicon.tsx

@@ -2,27 +2,17 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Prefix } from '@polkadot/util-crypto/address/types';
-import type { IdentityProps as Props, Props as ComponentProps } from './types';
+import type { IdentityProps as Props, Props as ComponentProps } from './types.js';
 
 import React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
-import styledComponents from 'styled-components';
 
 import { ICON_DEFAULT_HOST, settings } from '@polkadot/ui-settings';
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress, ethereumEncode } from '@polkadot/util-crypto';
 
-import { Beachball, Empty, Ethereum, Jdenticon, Polkadot } from './icons';
-
-// In styled-components v6, there is a named export which can be used
-// directly, i.e. "import { styled } from ..." with no more magic. Until
-// such time the cjs vs esm import here is problematic, so we hack around
-// the various shapes below
-const styled = (
-  (styledComponents as unknown as { styled: typeof styledComponents }).styled ||
-  (styledComponents as unknown as { default: typeof styledComponents }).default ||
-  styledComponents
-);
+import { Beachball, Empty, Ethereum, Jdenticon, Polkadot } from './icons/index.js';
+import { styled } from './styled.js';
 
 const Fallback = Beachball;
 
@@ -74,7 +64,7 @@ class BaseIcon extends React.PureComponent<Props, State> {
           address,
           publicKey
         };
-    } catch (error) {
+    } catch {
       return {
         address: '',
         publicKey: '0x'
@@ -99,7 +89,7 @@ class BaseIcon extends React.PureComponent<Props, State> {
   }
 
   private getWrapped ({ address, publicKey }: State, { Custom }: Props): React.ReactNode {
-    const { className = '', isAlternative, isHighlight, size = DEFAULT_SIZE, style, theme = settings.icon } = this.props;
+    const { className = '', isAlternative, isHighlight, size = DEFAULT_SIZE, style = {}, theme = settings.icon } = this.props;
     const Component = !address
       ? Empty
       : Custom || Components[theme === 'default' ? ICON_DEFAULT_HOST : theme] || Fallback;

packages/react-identicon/src/bundle.ts

@@ -1,7 +1,6 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './icons';
-
-export { Identicon } from './Identicon';
-export { packageInfo } from './packageInfo';
+export * from './icons/index.js';
+export { Identicon } from './Identicon.js';
+export { packageInfo } from './packageInfo.js';

packages/react-identicon/src/detectPackage.ts

@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);

packages/react-identicon/src/icons/Beachball.tsx

@@ -1,13 +1,13 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Props } from '../types';
+import type { Props } from '../types.js';
 
 import React, { useCallback } from 'react';
 
 import { beachballIcon } from '@polkadot/ui-shared';
 
-function Identicon ({ address, className = '', size, style }: Props): React.ReactElement<Props> {
+function Identicon ({ address, className = '', size, style = {} }: Props): React.ReactElement<Props> {
   const updateElem = useCallback(
     (node: HTMLDivElement): void => {
       node && node.appendChild(

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

@@ -1,11 +1,11 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Props } from '../types';
+import type { Props } from '../types.js';
 
 import React from 'react';
 
-function Identicon ({ className = '', size, style }: Props): React.ReactElement<Props> {
+function Identicon ({ className = '', size, style = {} }: Props): React.ReactElement<Props> {
   return (
     <svg
       className={className}

packages/react-identicon/src/icons/Ethereum.tsx

@@ -1,27 +1,18 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Props } from '../types';
+import type { Props } from '../types.js';
 
 import makeBlockie from 'ethereum-blockies-base64';
 import React, { useMemo } from 'react';
-import styledComponents from 'styled-components';
 
-// In styled-components v6, there is a named export which can be used
-// directly, i.e. "import { styled } from ..." with no more magic. Until
-// such time the cjs vs esm import here is problematic, so we hack around
-// the various shapes below
-const styled = (
-  (styledComponents as unknown as { styled: typeof styledComponents }).styled ||
-  (styledComponents as unknown as { default: typeof styledComponents }).default ||
-  styledComponents
-);
+import { styled } from '../styled.js';
 
 interface ImgProps {
   size: number;
 }
 
-function Identicon ({ address, className = '', size, style }: Props): React.ReactElement<Props> {
+function Identicon ({ address, className = '', size, style = {} }: Props): React.ReactElement<Props> {
   const imgSrc = useMemo(
     () => makeBlockie(address),
     [address]

packages/react-identicon/src/icons/Jdenticon.tsx

@@ -1,12 +1,12 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Props } from '../types';
+import type { Props } from '../types.js';
 
 import * as jdenticon from 'jdenticon';
 import React, { useMemo } from 'react';
 
-function Identicon ({ className = '', publicKey, size, style }: Props): React.ReactElement<Props> {
+function Identicon ({ className = '', publicKey, size, style = {} }: Props): React.ReactElement<Props> {
   const html = useMemo(
     () => ({ __html: jdenticon.toSvg(publicKey.substring(2), size) }),
     [publicKey, size]

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

@@ -17,7 +17,7 @@
 //   - Overall it is now just a static component, expecting an address as an input value
 
 import type { Circle } from '@polkadot/ui-shared/icons/types';
-import type { Props } from '../types';
+import type { Props } from '../types.js';
 
 import React, { useMemo } from 'react';
 
@@ -35,7 +35,7 @@ function renderCircle ({ cx, cy, fill, r }: Circle, key: number): React.ReactNod
   );
 }
 
-function Identicon ({ address, className = '', isAlternative = false, size, style }: Props): React.ReactElement<Props> {
+function Identicon ({ address, className = '', isAlternative = false, size, style = {} }: Props): React.ReactElement<Props> {
   const circles = useMemo(
     () => polkadotIcon(address, { isAlternative }),
     [address, isAlternative]

packages/react-identicon/src/icons/index.ts

@@ -1,8 +1,8 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { Beachball } from './Beachball';
-export { Empty } from './Empty';
-export { Ethereum } from './Ethereum';
-export { Jdenticon } from './Jdenticon';
-export { Polkadot } from './Polkadot';
+export { Beachball } from './Beachball.js';
+export { Empty } from './Empty.js';
+export { Ethereum } from './Ethereum.js';
+export { Jdenticon } from './Jdenticon.js';
+export { Polkadot } from './Polkadot.js';

packages/react-identicon/src/index.ts

@@ -1,10 +1,10 @@
 // Copyright 2017-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import './detectPackage';
+import './detectPackage.js';
 
-import { Identicon } from './bundle';
+import { Identicon } from './bundle.js';
 
-export * from './bundle';
+export * from './bundle.js';
 
 export default Identicon;

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

packages/react-identicon/src/styled.ts

@@ -0,0 +1,16 @@
+// Copyright 2017-2023 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { StyledInterface } from 'styled-components';
+
+import styledComponents from 'styled-components';
+
+// In styled-components v6, there is a named export which can be used
+// directly, i.e. "import { styled } from ..." with no more magic. Until
+// such time the cjs vs esm import here is problematic, so we hack around
+// the various shapes below
+export const styled = (
+  (styledComponents as unknown as { styled: StyledInterface }).styled ||
+  (styledComponents as unknown as { default: StyledInterface }).default ||
+  styledComponents as unknown as StyledInterface
+);

packages/react-identicon/src/types.ts

@@ -1,10 +1,9 @@
 // Copyright 2018-2023 @polkadot/react-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+import type React from 'react';
 import type { Prefix } from '@polkadot/util-crypto/address/types';
 
-import React from 'react';
-
 export interface BaseProps {
   className?: string;
   style?: React.CSSProperties;
@@ -12,11 +11,9 @@ export interface BaseProps {
 
 export interface Props extends BaseProps {
   address: string;
-  isAlternative?: boolean;
-  className?: string;
+  isAlternative?: boolean | undefined;
   publicKey: string;
   size: number;
-  style?: React.CSSProperties;
 }
 
 export interface IdentityProps extends BaseProps {

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": ">=16"
+  },
   "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,16 +18,16 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.12.1",
+  "version": "3.2.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@polkadot/ui-settings": "2.12.1",
-    "@polkadot/util": "^10.4.2",
-    "@polkadot/util-crypto": "^10.4.2",
+    "@polkadot/ui-settings": "3.2.2",
+    "@polkadot/util": "^12.1.1",
+    "@polkadot/util-crypto": "^12.1.1",
     "qrcode-generator": "^1.4.4",
     "react-qr-reader": "^2.2.1",
-    "styled-components": "^5.3.6"
+    "styled-components": "^5.3.10",
+    "tslib": "^2.5.0"
   },
   "devDependencies": {
     "@types/react-qr-reader": "^2.1.4",
@@ -37,6 +38,6 @@
     "@polkadot/util-crypto": "*",
     "react": "*",
     "react-dom": "*",
-    "styled-components": "*"
+    "react-is": "*"
   }
 }

packages/react-qr/src/Display.tsx

@@ -2,30 +2,20 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import React, { useEffect, useMemo, useRef, useState } from 'react';
-import styledComponents from 'styled-components';
 
 import { objectSpread } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
-import { qrcode } from './qrcode';
-import { createFrames, createImgSize } from './util';
-
-// In styled-components v6, there is a named export which can be used
-// directly, i.e. "import { styled } from ..." with no more magic. Until
-// such time the cjs vs esm import here is problematic, so we hack around
-// the various shapes below
-const styled = (
-  (styledComponents as unknown as { styled: typeof styledComponents }).styled ||
-  (styledComponents as unknown as { default: typeof styledComponents }).default ||
-  styledComponents
-);
+import { qrcode } from './qrcode.js';
+import { styled } from './styled.js';
+import { createFrames, createImgSize } from './util.js';
 
 interface Props {
-  className?: string;
-  size?: string | number;
+  className?: string | undefined;
+  size?: string | number | undefined;
   skipEncoding?: boolean;
-  style?: React.CSSProperties;
-  timerDelay?: number;
+  style?: React.CSSProperties | undefined;
+  timerDelay?: number | undefined;
   value: Uint8Array;
 }
 
@@ -55,7 +45,7 @@ function getDataUrl (value: Uint8Array): string {
   return qr.createDataURL(16, 0);
 }
 
-function Display ({ className, size, skipEncoding, style, timerDelay = DEFAULT_FRAME_DELAY, value }: Props): React.ReactElement<Props> | null {
+function Display ({ className = '', size, skipEncoding, style = {}, timerDelay = DEFAULT_FRAME_DELAY, value }: Props): React.ReactElement<Props> | null {
   const [{ image }, setFrameState] = useState<FrameState>({ frameIdx: 0, frames: [], image: null, valueHash: null });
   const timerRef = useRef<TimerState>({ timerDelay, timerId: null });
 

packages/react-qr/src/DisplayAddress.tsx

@@ -3,8 +3,8 @@
 
 import React, { useMemo } from 'react';
 
-import { QrDisplay } from './Display';
-import { createAddressPayload } from './util';
+import { QrDisplay } from './Display.js';
+import { createAddressPayload } from './util.js';
 
 interface Props {
   address: string;

packages/react-qr/src/DisplayPayload.tsx

@@ -3,8 +3,8 @@
 
 import React, { useMemo } from 'react';
 
-import { QrDisplay } from './Display';
-import { createSignPayload } from './util';
+import { QrDisplay } from './Display.js';
+import { createSignPayload } from './util.js';
 
 interface Props {
   address: string;

packages/react-qr/src/NetworkSpecs.tsx

@@ -5,8 +5,8 @@ import type { NetworkSpecsStruct } from '@polkadot/ui-settings/types';
 
 import React, { useMemo } from 'react';
 
-import { QrDisplay } from './Display';
-import { encodeString } from './util';
+import { QrDisplay } from './Display.js';
+import { encodeString } from './util.js';
 
 interface Props {
   className?: string;

packages/react-qr/src/Scan.tsx

@@ -3,27 +3,17 @@
 
 import React, { useCallback, useMemo } from 'react';
 import Reader from 'react-qr-reader';
-import styledComponents from 'styled-components';
 
-import { createImgSize } from './util';
-
-// In styled-components v6, there is a named export which can be used
-// directly, i.e. "import { styled } from ..." with no more magic. Until
-// such time the cjs vs esm import here is problematic, so we hack around
-// the various shapes below
-const styled = (
-  (styledComponents as unknown as { styled: typeof styledComponents }).styled ||
-  (styledComponents as unknown as { default: typeof styledComponents }).default ||
-  styledComponents
-);
+import { styled } from './styled.js';
+import { createImgSize } from './util.js';
 
 interface Props {
-  className?: string;
+  className?: string | undefined;
   delay?: number;
-  onError?: (error: Error) => void;
+  onError?: undefined | ((error: Error) => void);
   onScan: (data: string) => void;
-  size?: string | number;
-  style?: React.CSSProperties;
+  size?: string | number | undefined;
+  style?: React.CSSProperties | undefined;
 }
 
 const DEFAULT_DELAY = 150;
@@ -32,7 +22,7 @@ const DEFAULT_ERROR = (error: Error): void => {
   console.error('@polkadot/react-qr:Scan', error.message);
 };
 
-function Scan ({ className, delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style }: Props): React.ReactElement<Props> {
+function Scan ({ className = '', delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style = {} }: Props): React.ReactElement<Props> {
   const containerStyle = useMemo(
     () => createImgSize(size),
     [size]

packages/react-qr/src/ScanAddress.tsx

@@ -3,17 +3,16 @@
 
 import React, { useCallback } from 'react';
 
-import { assert } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
-import { ADDRESS_PREFIX, SEED_PREFIX } from './constants';
-import { QrScan } from './Scan';
+import { ADDRESS_PREFIX, SEED_PREFIX } from './constants.js';
+import { QrScan } from './Scan.js';
 
 interface ScanType {
   isAddress: boolean;
   content: string;
   genesisHash: string;
-  name?: string;
+  name?: string | undefined;
 }
 
 interface Props {
@@ -43,7 +42,9 @@ function ScanAddress ({ className, isEthereum, onError, onScan, size, style }: P
           const expectedPrefix = (isEthereum ? 'ethereum' : ADDRESS_PREFIX);
           const isValidPrefix = (prefix === expectedPrefix) || (prefix === SEED_PREFIX);
 
-          assert(isValidPrefix, `Invalid prefix received, expected '${expectedPrefix} or ${SEED_PREFIX}' , found '${prefix}'`);
+          if (!isValidPrefix) {
+            throw new Error(`Invalid prefix received, expected '${expectedPrefix} or ${SEED_PREFIX}' , found '${prefix}'`);
+          }
 
           const isAddress = prefix === expectedPrefix;
 

packages/react-qr/src/ScanSignature.tsx

@@ -5,7 +5,7 @@ import type { HexString } from '@polkadot/util/types';
 
 import React, { useCallback } from 'react';
 
-import { QrScan } from './Scan';
+import { QrScan } from './Scan.js';
 
 interface ScanType {
   signature: HexString;

packages/react-qr/src/bundle.ts

@@ -1,9 +1,9 @@
 // Copyright 2017-2023 @polkadot/react-qr authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { QrDisplayAddress } from './DisplayAddress';
-export { QrDisplayPayload } from './DisplayPayload';
-export { QrScanAddress } from './ScanAddress';
-export { QrScanSignature } from './ScanSignature';
-export { QrNetworkSpecs } from './NetworkSpecs';
-export { packageInfo } from './packageInfo';
+export { QrDisplayAddress } from './DisplayAddress.js';
+export { QrDisplayPayload } from './DisplayPayload.js';
+export { QrNetworkSpecs } from './NetworkSpecs.js';
+export { packageInfo } from './packageInfo.js';
+export { QrScanAddress } from './ScanAddress.js';
+export { QrScanSignature } from './ScanSignature.js';

packages/react-qr/src/constants.ts

@@ -1,24 +1,12 @@
 // Copyright 2017-2023 @polkadot/react-qr authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-const ADDRESS_PREFIX = 'substrate';
-const SEED_PREFIX = 'secret';
-const FRAME_SIZE = 1024;
-const SUBSTRATE_ID = new Uint8Array([0x53]);
-const CRYPTO_SR25519 = new Uint8Array([0x01]);
-const CMD_SIGN_TX = new Uint8Array([0]);
-const CMD_SIGN_TX_HASH = new Uint8Array([1]);
-const CMD_SIGN_IMMORTAL_TX = new Uint8Array([2]);
-const CMD_SIGN_MSG = new Uint8Array([3]);
-
-export {
-  ADDRESS_PREFIX,
-  CMD_SIGN_TX,
-  CMD_SIGN_TX_HASH,
-  CMD_SIGN_IMMORTAL_TX,
-  CMD_SIGN_MSG,
-  CRYPTO_SR25519,
-  FRAME_SIZE,
-  SEED_PREFIX,
-  SUBSTRATE_ID
-};
+export const ADDRESS_PREFIX = 'substrate';
+export const SEED_PREFIX = 'secret';
+export const FRAME_SIZE = 1024;
+export const SUBSTRATE_ID = new Uint8Array([0x53]);
+export const CRYPTO_SR25519 = new Uint8Array([0x01]);
+export const CMD_SIGN_TX = new Uint8Array([0]);
+export const CMD_SIGN_TX_HASH = new Uint8Array([1]);
+export const CMD_SIGN_IMMORTAL_TX = new Uint8Array([2]);
+export const CMD_SIGN_MSG = new Uint8Array([3]);

packages/react-qr/src/detectPackage.ts

@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);

packages/react-qr/src/index.ts

@@ -1,6 +1,6 @@
 // Copyright 2017-2023 @polkadot/react-qr authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import './detectPackage';
+import './detectPackage.js';
 
-export * from './bundle';
+export * from './bundle.js';

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

packages/react-qr/src/styled.ts

@@ -0,0 +1,16 @@
+// Copyright 2017-2023 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { StyledInterface } from 'styled-components';
+
+import styledComponents from 'styled-components';
+
+// In styled-components v6, there is a named export which can be used
+// directly, i.e. "import { styled } from ..." with no more magic. Until
+// such time the cjs vs esm import here is problematic, so we hack around
+// the various shapes below
+export const styled = (
+  (styledComponents as unknown as { styled: StyledInterface }).styled ||
+  (styledComponents as unknown as { default: StyledInterface }).default ||
+  styledComponents as unknown as StyledInterface
+);

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

@@ -1,10 +1,12 @@
 // Copyright 2017-2023 @polkadot/react-qr authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
+/// <reference types="@polkadot/dev-test/globals.d.ts" />
+
 import { u8aConcat, u8aToHex, u8aToString } from '@polkadot/util';
 import { randomAsU8a } from '@polkadot/util-crypto';
 
-import { createAddressPayload, createFrames, createSignPayload, decodeString, encodeNumber, encodeString } from './util';
+import { createAddressPayload, createFrames, createSignPayload, decodeString, encodeNumber, encodeString } from './util.js';
 
 describe('util', (): void => {
   describe('Uint8Array <-> string', (): void => {

packages/react-qr/src/util.ts

@@ -4,7 +4,7 @@
 import { isString, u8aConcat, u8aToU8a } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
-import { ADDRESS_PREFIX, CRYPTO_SR25519, FRAME_SIZE, SUBSTRATE_ID } from './constants';
+import { ADDRESS_PREFIX, CRYPTO_SR25519, FRAME_SIZE, SUBSTRATE_ID } from './constants.js';
 
 const MULTIPART = new Uint8Array([0]);
 
@@ -13,9 +13,10 @@ export function encodeNumber (value: number): Uint8Array {
 }
 
 export function encodeString (value: string): Uint8Array {
-  const u8a = new Uint8Array(value.length);
+  const count = value.length;
+  const u8a = new Uint8Array(count);
 
-  for (let i = 0; i < value.length; i++) {
+  for (let i = 0; i < count; i++) {
     u8a[i] = value.charCodeAt(i);
   }
 

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": ">=16"
+  },
   "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,17 +18,17 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.12.1",
+  "version": "3.2.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@polkadot/ui-shared": "2.12.1",
-    "@polkadot/util": "^10.4.2",
-    "@polkadot/util-crypto": "^10.4.2",
-    "react-native-svg": "^12.5.1"
+    "@polkadot/ui-shared": "3.2.2",
+    "@polkadot/util": "^12.1.1",
+    "@polkadot/util-crypto": "^12.1.1",
+    "react-native-svg": "^12.5.1",
+    "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@types/react-native": "^0.71.3"
+    "@types/react-native": "^0.71.6"
   },
   "peerDependencies": {
     "@polkadot/util": "*",

packages/reactnative-identicon/src/Identicon.tsx

@@ -2,14 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Prefix } from '@polkadot/util-crypto/address/types';
-import type { Props as ComponentProps } from './types';
+import type { Props as ComponentProps } from './types.js';
 
 import React from 'react';
 
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
-import { Empty, Polkadot } from './icons';
+import { Empty, Polkadot } from './icons/index.js';
 
 const Fallback = Polkadot;
 
@@ -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/bundle.ts

@@ -1,5 +1,5 @@
 // Copyright 2017-2023 @polkadot/reactnative-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export * from './icons';
-export { packageInfo } from './packageInfo';
+export * from './icons/index.js';
+export { packageInfo } from './packageInfo.js';

packages/reactnative-identicon/src/detectPackage.ts

@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);

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

@@ -1,11 +1,11 @@
 // Copyright 2017-2023 @polkadot/reactnative-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import type { Props } from '../types';
+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

@@ -2,11 +2,11 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import type { Circle as CircleType } from '@polkadot/ui-shared/icons/types';
-import type { Props } from '../types';
+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/icons/index.ts

@@ -1,5 +1,5 @@
 // Copyright 2017-2023 @polkadot/reactnative-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-export { default as Empty } from './Empty';
-export { default as Polkadot } from './Polkadot';
+export { default as Empty } from './Empty.js';
+export { default as Polkadot } from './Polkadot.js';

packages/reactnative-identicon/src/index.ts

@@ -1,10 +1,10 @@
 // Copyright 2017-2023 @polkadot/reactnative-identicon authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import './detectPackage';
+import './detectPackage.js';
 
-import Identicon from './Identicon';
+import Identicon from './Identicon.js';
 
-export * from './bundle';
+export * from './bundle.js';
 
 export default Identicon;

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

packages/ui-assets/README.md

@@ -1,3 +0,0 @@
-# @polkadot/ui-assets
-
-Static assets including images shared across projects

packages/ui-assets/package.json

@@ -1,22 +0,0 @@
-{
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "bugs": "https://github.com/polkadot-js/ui/issues",
-  "contributors": [],
-  "description": "Static assets shared accross projects",
-  "homepage": "https://github.com/polkadot-js/ui/tree/master/packages/ui-assets#readme",
-  "license": "Apache-2.0",
-  "maintainers": [],
-  "name": "@polkadot/ui-assets",
-  "repository": {
-    "directory": "packages/ui-assets",
-    "type": "git",
-    "url": "https://github.com/polkadot-js/ui.git"
-  },
-  "sideEffects": false,
-  "version": "2.12.1",
-  "main": "index.js",
-  "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@polkadot/util": "^10.4.2"
-  }
-}

packages/ui-assets/src/detectOther.ts

@@ -1,6 +0,0 @@
-// Copyright 2017-2023 @polkadot/ui-assets authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-// Empty template, auto-generated by @polkadot/dev
-
-export default [];

packages/ui-assets/src/detectPackage.ts

@@ -1,11 +0,0 @@
-// Copyright 2017-2023 @polkadot/ui-assets authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-// Do not edit, auto-generated by @polkadot/dev
-
-import { detectPackage } from '@polkadot/util';
-
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
-
-detectPackage(packageInfo, null, others);

packages/ui-assets/src/edgeware-circle.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512px" height="512px" viewBox="0 0 512 512" version="1.1" style="zoom: 1;"><!-- Generator: Sketch 57.1 (83088) - https://sketch.com --><title>logo-white-with-bg</title><desc>Created with Sketch.</desc><g id="logo-white-with-bg" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect fill="#111111" x="0" y="0" width="512" height="512" visibility="hidden"></rect><circle stroke="#000000" id="circle1" stroke-width="3px" cy="256px" fill="#111111" r="250px" cx="256px" transform=""></circle><path d="M160.5,199.5 L160.5,319.5" id="Line" stroke="#FFFFFF" stroke-width="22" stroke-linecap="square"></path><path d="M160.5,199.5 L160.5,319.5" id="Line" stroke="#FFFFFF" stroke-width="22" stroke-linecap="square" transform="translate(160.500000, 259.500000) rotate(60.000000) translate(-160.500000, -259.500000)"></path><path d="M160.5,199.5 L160.5,319.5" id="Line" stroke="#FFFFFF" stroke-width="22" stroke-linecap="square" transform="translate(160.500000, 259.500000) rotate(-60.000000) translate(-160.500000, -259.500000)"></path><path d="M348.5,206.5 L348.5,256.5" id="Line" stroke="#FFFFFF" stroke-width="22" stroke-linecap="square" transform="translate(348.500000, 231.500000) scale(1, -1) translate(-348.500000, -231.500000)"></path><path d="M385.739092,271 L385.739092,321" id="Line" stroke="#FFFFFF" stroke-width="22" stroke-linecap="square" transform="translate(385.739092, 296.000000) scale(-1, 1) rotate(60.000000) translate(-385.739092, -296.000000)"></path><path d="M311.260908,271 L311.260908,321" id="Line" stroke="#FFFFFF" stroke-width="22" stroke-linecap="square" transform="translate(311.260908, 296.000000) scale(-1, 1) rotate(-60.000000) translate(-311.260908, -296.000000)"></path></g></svg>

packages/ui-assets/src/edgeware.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="yes"?><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="512px" height="512px" viewBox="0 0 512 512" version="1.1" style="zoom: 1;"><!-- Generator: Sketch 57.1 (83088) - https://sketch.com --><title>logo-white-with-bg</title><desc>Created with Sketch.</desc><g id="logo-white-with-bg" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect fill="#111111" x="0" y="0" width="512" height="512"></rect><path d="M160.5,199.5 L160.5,319.5" id="Line" stroke="#FFFFFF" stroke-width="22" stroke-linecap="square"></path><path d="M160.5,199.5 L160.5,319.5" id="Line" stroke="#FFFFFF" stroke-width="22" stroke-linecap="square" transform="translate(160.500000, 259.500000) rotate(60.000000) translate(-160.500000, -259.500000)"></path><path d="M160.5,199.5 L160.5,319.5" id="Line" stroke="#FFFFFF" stroke-width="22" stroke-linecap="square" transform="translate(160.500000, 259.500000) rotate(-60.000000) translate(-160.500000, -259.500000)"></path><path d="M348.5,206.5 L348.5,256.5" id="Line" stroke="#FFFFFF" stroke-width="22" stroke-linecap="square" transform="translate(348.500000, 231.500000) scale(1, -1) translate(-348.500000, -231.500000)"></path><path d="M385.739092,271 L385.739092,321" id="Line" stroke="#FFFFFF" stroke-width="22" stroke-linecap="square" transform="translate(385.739092, 296.000000) scale(-1, 1) rotate(60.000000) translate(-385.739092, -296.000000)"></path><path d="M311.260908,271 L311.260908,321" id="Line" stroke="#FFFFFF" stroke-width="22" stroke-linecap="square" transform="translate(311.260908, 296.000000) scale(-1, 1) rotate(-60.000000) translate(-311.260908, -296.000000)"></path></g></svg>

packages/ui-assets/src/empty.svg

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="15 15 140 140" style="enable-background:new 0 0 170 170;" xml:space="preserve">
-<style type="text/css">
-	.bg0{fill:#888;}
-</style>
-<g><circle class="bg0" cx="85" cy="85" r="70"/></g>
-</svg>

packages/ui-assets/src/index.ts

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

packages/ui-assets/src/packageInfo.ts

@@ -1,6 +0,0 @@
-// Copyright 2017-2023 @polkadot/ui-assets authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-// Do not edit, auto-generated by @polkadot/dev
-
-export const packageInfo = { name: '@polkadot/ui-assets', path: 'auto', type: 'auto', version: '2.12.1' };

packages/ui-assets/src/polkadot-circle.svg

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="15 15 140 140" style="enable-background:new 0 0 170 170;" xml:space="preserve">
-<style type="text/css">
-	.bg0{fill:#fff;}
-	.st0{fill:#E6007A;}
-</style>
-<g>
-	<circle class="bg0" cx="85" cy="85" r="70"/>
-	<g>
-		<path d="M85,34.7c-20.8,0-37.8,16.9-37.8,37.8c0,4.2,0.7,8.3,2,12.3c0.9,2.7,3.9,4.2,6.7,3.3c2.7-0.9,4.2-3.9,3.3-6.7 c-1.1-3.1-1.6-6.4-1.5-9.7C58.1,57.6,69.5,46,83.6,45.3c15.7-0.8,28.7,11.7,28.7,27.2c0,14.5-11.4,26.4-25.7,27.2 c0,0-5.3,0.3-7.9,0.7c-1.3,0.2-2.3,0.4-3,0.5c-0.3,0.1-0.6-0.2-0.5-0.5l0.9-4.4L81,73.4c0.6-2.8-1.2-5.6-4-6.2 c-2.8-0.6-5.6,1.2-6.2,4c0,0-11.8,55-11.9,55.6c-0.6,2.8,1.2,5.6,4,6.2c2.8,0.6,5.6-1.2,6.2-4c0.1-0.6,1.7-7.9,1.7-7.9 c1.2-5.6,5.8-9.7,11.2-10.4c1.2-0.2,5.9-0.5,5.9-0.5c19.5-1.5,34.9-17.8,34.9-37.7C122.8,51.6,105.8,34.7,85,34.7z"/>
-	</g>
-</g>
-<path class="st0" d="M87.7,121.7c-3.4-0.7-6.8,1.4-7.5,4.9c-0.7,3.4,1.4,6.8,4.9,7.5c3.4,0.7,6.8-1.4,7.5-4.9 C93.3,125.7,91.2,122.4,87.7,121.7z"/>
-</svg>

packages/ui-assets/src/polkadot-dots.svg

@@ -1 +0,0 @@
-<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 436.22 436.22"><defs><style>.cls-1{fill:none;}.cls-2{clip-path:url(#clip-path);}.cls-3{fill:#f2f2f2;}.cls-4{fill:#4d4d4d;}.cls-5{fill:#d64ca8;}</style><clipPath id="clip-path" transform="translate(-782.01 -781.74)"><circle class="cls-1" cx="1001.02" cy="1001.98" r="215.98"/></clipPath></defs><title>Polkadot dot logo</title><g class="cls-2"><rect class="cls-3" x="782.01" y="781.74" width="436.22" height="436.22" transform="translate(-781.74 1218.23) rotate(-90)"/><circle class="cls-4" cx="84.89" cy="298" r="22.44"/><circle class="cls-4" cx="84.89" cy="222.44" r="22.44"/><circle class="cls-4" cx="84.89" cy="146.89" r="22.44"/><circle class="cls-4" cx="153.81" cy="334.98" r="22.44"/><circle class="cls-4" cx="153.81" cy="259.43" r="22.44"/><circle class="cls-4" cx="153.81" cy="183.88" r="22.44"/><circle class="cls-4" cx="153.81" cy="108.33" r="22.44"/><circle class="cls-4" cx="220.2" cy="373.55" r="22.44"/><circle class="cls-4" cx="220.2" cy="298" r="22.44"/><circle class="cls-5" cx="220.2" cy="222.44" r="22.44"/><circle class="cls-4" cx="220.2" cy="146.89" r="22.44"/><circle class="cls-4" cx="220.2" cy="71.34" r="22.44"/><circle class="cls-4" cx="289.12" cy="334.98" r="22.44"/><circle class="cls-4" cx="289.12" cy="259.43" r="22.44"/><circle class="cls-4" cx="289.12" cy="183.88" r="22.44"/><circle class="cls-4" cx="289.12" cy="108.33" r="22.44"/><circle class="cls-4" cx="355.5" cy="298" r="22.44"/><circle class="cls-4" cx="355.5" cy="222.44" r="22.44"/><circle class="cls-4" cx="355.5" cy="146.89" r="22.44"/></g></svg>

packages/ui-assets/src/polkadot-js.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8" standalone="yes"?>
-<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="15 15 140 140" style="enable-background:new 0 0 170 170;zoom: 1;" xml:space="preserve">
-<style type="text/css">
-	.bg0{fill:#FF8C00}
-	.st0{fill:#FFFFFF;}
-</style>
-<g>
-	<circle class="bg0" cx="85" cy="85" r="70"/>
-	<g>
-		<path class="st0" d="M85,34.7c-20.8,0-37.8,16.9-37.8,37.8c0,4.2,0.7,8.3,2,12.3c0.9,2.7,3.9,4.2,6.7,3.3c2.7-0.9,4.2-3.9,3.3-6.7 c-1.1-3.1-1.6-6.4-1.5-9.7C58.1,57.6,69.5,46,83.6,45.3c15.7-0.8,28.7,11.7,28.7,27.2c0,14.5-11.4,26.4-25.7,27.2 c0,0-5.3,0.3-7.9,0.7c-1.3,0.2-2.3,0.4-3,0.5c-0.3,0.1-0.6-0.2-0.5-0.5l0.9-4.4L81,73.4c0.6-2.8-1.2-5.6-4-6.2 c-2.8-0.6-5.6,1.2-6.2,4c0,0-11.8,55-11.9,55.6c-0.6,2.8,1.2,5.6,4,6.2c2.8,0.6,5.6-1.2,6.2-4c0.1-0.6,1.7-7.9,1.7-7.9 c1.2-5.6,5.8-9.7,11.2-10.4c1.2-0.2,5.9-0.5,5.9-0.5c19.5-1.5,34.9-17.8,34.9-37.7C122.8,51.6,105.8,34.7,85,34.7z M87.7,121.7 c-3.4-0.7-6.8,1.4-7.5,4.9c-0.7,3.4,1.4,6.8,4.9,7.5c3.4,0.7,6.8-1.4,7.5-4.9C93.3,125.7,91.2,122.4,87.7,121.7z"/>
-	</g>
-</g>
-</svg>

packages/ui-assets/src/polkadot-white.svg

@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="15 15 140 140" style="enable-background:new 0 0 170 170;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#FFFFFF;}
-	.st1{fill:#E6007A;}
-</style>
-<g>
-	<g>
-		<path class="st0" d="M85,34.7c-20.8,0-37.8,16.9-37.8,37.8c0,4.2,0.7,8.3,2,12.3c0.9,2.7,3.9,4.2,6.7,3.3c2.7-0.9,4.2-3.9,3.3-6.7 c-1.1-3.1-1.6-6.4-1.5-9.7C58.1,57.6,69.5,46,83.6,45.3c15.7-0.8,28.7,11.7,28.7,27.2c0,14.5-11.4,26.4-25.7,27.2 c0,0-5.3,0.3-7.9,0.7c-1.3,0.2-2.3,0.4-3,0.5c-0.3,0.1-0.6-0.2-0.5-0.5l0.9-4.4L81,73.4c0.6-2.8-1.2-5.6-4-6.2s-5.6,1.2-6.2,4 c0,0-11.8,55-11.9,55.6c-0.6,2.8,1.2,5.6,4,6.2c2.8,0.6,5.6-1.2,6.2-4c0.1-0.6,1.7-7.9,1.7-7.9c1.2-5.6,5.8-9.7,11.2-10.4 c1.2-0.2,5.9-0.5,5.9-0.5c19.5-1.5,34.9-17.8,34.9-37.7C122.8,51.6,105.8,34.7,85,34.7z"/>
-	</g>
-</g>
-<path class="st1" d="M87.7,121.7c-3.4-0.7-6.8,1.4-7.5,4.9c-0.7,3.4,1.4,6.8,4.9,7.5c3.4,0.7,6.8-1.4,7.5-4.9 C93.3,125.7,91.2,122.4,87.7,121.7z"/>
-</svg>

packages/ui-assets/src/substrate-circle.svg

@@ -1,17 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;" xml:space="preserve">
-<style type="text/css">
-	.bg0{fill:#fff;}
-	.st0{fill:#231F20;}
-</style>
-<g>
-	<circle class="bg0" cx="1000" cy="1000" r="1000"/>
-	<polygon class="st0" points="1000.5,1959.6 974.6,1974.5 979.3,1977.2 1000.5,1965 1000.5,1989 1862.2,1491.5 1862.2,1437.7 1000.5,1935.2"/>
-	<polygon class="st0" points="1000.5,1796.1 833.1,1892.8 841.2,1897.5 1000.5,1805.6 1000.5,1825.8 1862.2,1328.2 1862.2,1278.3 1000.5,1775.8"/>
-	<polygon class="st0" points="1000.5,1632.7 691.5,1811.1 703.2,1817.8 1000.5,1646.2 1000.5,1662.3 1862.2,1164.8 1862.2,1118.9 1000.5,1616.4"/>
-	<path class="st0" d="M1862.2,495.9l-12.7-7.3l-690 398.4l-89.6-51.7l209.7-121.1v-30.3l454.1-262.2l-22.2-12.8l-431.9,249.3v-26 L998.9,794.3l-96.8-55.9l690-398.4l-18.7-10.8l-690,398.4l-94.2-54.4l153-88.3l-28.6-16.5l537.1-310.1l-15.2-8.8L898.4,559.6 l-27.2-15.7l-153.4,88.3v31.7l-143.8,83l-10.5-6L137.9,986.5v41.8l461.8-266.6l-10.6-6.1l128.6-74.2V714l94.6,54.6l-100.2,57.8 l-7-4L137.9,1150v37.8L738,841.3l-7.1-4.1l100.1-57.8l96.8,55.9L717.8,956.6v22l-579.9,334.8v33.7l579.9-334.8v25.8l90,51.9 l-669.8,386.7v14.6l13.1,7.6l682.5-394l93.1,53.7l-208.8,119.4v27.4l-450.9,260.4l22.2,12.8l428.7-247.5v31.6l281.1-162.3l84.9,49 l-83.3,48.1v8.1l-592.1,341.8l18.7,10.8l573.4-331v8.1l116.1-67l92.1,53.2l-150.3,86.8l13.2,7.6l-71.1,41v12.2L550,1729.3l15.2,8.8 l435.3-251.3v12.1l107.3-62l21.6,12.5l150.3-86.6v-25.1l582.6-336.3v-41.8l-582.6,336.3v-15.3l-92.1-53.2l674.6-389.5v-37.8 l-707.4,408.4l-84.9-49l209.7-121.1v-27.6l582.6-336.3v-33.7l-582.6,336.3v-20.7l-94.4-54.5l677-390.9V495.9z M789.2,997.4 l209.7-121.1l89.5,51.7l-99.9,57.7l0,0l-109.8,63.4L789.2,997.4z M1208.6,997.4L998,1117.9l-93.4-53.9l96.4-55.7v0l113.3-65.4 L1208.6,997.4z"/>
-	<polygon class="st0" points="447.4,674.1 1309.1,176.6 1297.4,169.8 435.7,667.3 421.7,659.3 137.9,823.1 137.9,869 461.5,682.2"/>
-	<polygon class="st0" points="305.7,592.5 1167.6,94.9 1159.4,90.1 297.5,587.8 279.9,577.7 137.9,659.7 137.9,709.6 323.3,602.6"/>
-	<polygon class="st0" points="163.9,510.9 1026,13.1 1021.3,10.4 159.2,508.2 138.2,496.1 137.9,496.2 137.9,550.2 185,523"/>
-</g>
-</svg>

packages/ui-assets/src/substrate-hexagon.svg

@@ -1 +0,0 @@
-<svg viewBox="0 0 1976.45 2282.21" xmlns="http://www.w3.org/2000/svg"><path d="m1976.45 1711.65v-1141.1l-988.23-570.55-988.22 570.55v1141.1l988.22 570.56z"/><g fill="#fff"><path d="m988.62 2101-25.9 14.9 4.7 2.7 21.2-12.2v24l861.7-497.5v-53.8l-861.7 497.5z"/><path d="m988.62 1937.5-167.4 96.7 8.1 4.7 159.3-91.9v20.2l861.7-497.6v-49.9l-861.7 497.5z"/><path d="m988.62 1774.1-309 178.4 11.7 6.7 297.3-171.6v16.1l861.7-497.5v-45.9l-861.7 497.5z"/><path d="m1859.56 499.46-12.7-7.3-690 398.4-89.6-51.7 209.74-121.1v-30.3l454.1-262.2-22.2-12.8-431.9 249.3v-26l-280.7 162.1-96.84-55.86 690-398.4-18.7-10.8-690 398.4-94.2-54.4 153-88.3-28.56-16.5 537.1-310.1-15.2-8.8-537.1 310.1-27.2-15.7-153.4 88.3v31.7l-143.8 83-10.5-6-425.6 245.6v41.8l461.8-266.6-10.6-6.1 128.56-74.2v32.6l94.6 54.6-100.2 57.8-7-4-567.2 327.6v37.8l600.1-346.5-7.1-4.1 100.1-57.8 96.8 55.9-210 121.3v22l-579.9 334.8v33.7l579.9-334.8v25.8l90 51.9-669.8 386.7v14.6l13.1 7.6 682.5-394 93.1 53.7-208.8 119.4v27.4l-450.9 260.4 22.2 12.8 428.7-247.5v31.6l281.1-162.3 84.9 49-83.3 48.1v8.1l-592.1 341.8 18.7 10.8 573.4-331v8.1l116.1-67 92.1 53.2-150.3 86.8 13.2 7.6-71.1 41v12.2l-450.6 260.2 15.2 8.8 435.3-251.3v12.1l107.3-62 21.6 12.5 150.3-86.6v-25.1l582.6-336.3v-41.8l-582.6 336.3v-15.3l-92.06-53.2 674.6-389.5v-37.8l-707.4 408.4-84.9-49 209.7-121.1v-27.6l582.6-336.3v-33.7l-582.6 336.26v-20.66l-94.4-54.5 677-390.9zm-1073 501.54 209.7-121.1 89.5 51.7-99.9 57.7-109.8 63.4zm419.4 0-210.6 120.5-93.4-53.9 96.4-55.7 113.3-65.4z" transform="translate(-9.23 137.85)"/><path d="m435.52 815.5 861.7-497.5-11.7-6.8-861.7 497.5-14-8-283.8 163.8v45.9l323.6-186.8z"/><path d="m293.82 733.9 861.9-497.6-8.2-4.8-861.9 497.7-17.6-10.1-142 82v49.9l185.4-107z"/><path d="m152.02 652.3 862.1-497.8-4.7-2.7-862.1 497.8-21-12.1-.3.1v54l47.1-27.2z"/></g></svg>

packages/ui-assets/src/substrate-white.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 2000 2000" style="enable-background:new 0 0 2000 2000;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#eee;}
-</style>
-<g>
-	<polygon class="st0" points="1000.5,1959.6 974.6,1974.5 979.3,1977.2 1000.5,1965 1000.5,1989 1862.2,1491.5 1862.2,1437.7 1000.5,1935.2"/>
-	<polygon class="st0" points="1000.5,1796.1 833.1,1892.8 841.2,1897.5 1000.5,1805.6 1000.5,1825.8 1862.2,1328.2 1862.2,1278.3 1000.5,1775.8"/>
-	<polygon class="st0" points="1000.5,1632.7 691.5,1811.1 703.2,1817.8 1000.5,1646.2 1000.5,1662.3 1862.2,1164.8 1862.2,1118.9 1000.5,1616.4"/>
-	<path class="st0" d="M1862.2,495.9l-12.7-7.3l-690,398.4l-89.6-51.7l209.7-121.1v-30.3l454.1-262.2l-22.2-12.8l-431.9,249.3v-26 L998.9,794.3l-96.8-55.9l690-398.4l-18.7-10.8l-690,398.4l-94.2-54.4l153-88.3l-28.6-16.5l537.1-310.1l-15.2-8.8L898.4,559.6 l-27.2-15.7l-153.4,88.3v31.7l-143.8,83l-10.5-6L137.9,986.5v41.8l461.8-266.6l-10.6-6.1l128.6-74.2V714l94.6,54.6l-100.2,57.8 l-7-4L137.9,1150v37.8L738,841.3l-7.1-4.1l100.1-57.8l96.8,55.9L717.8,956.6v22l-579.9,334.8v33.7l579.9-334.8v25.8l90,51.9 l-669.8,386.7v14.6l13.1,7.6l682.5-394l93.1,53.7l-208.8,119.4v27.4l-450.9,260.4l22.2,12.8l428.7-247.5v31.6l281.1-162.3l84.9,49 l-83.3,48.1v8.1l-592.1,341.8l18.7,10.8l573.4-331v8.1l116.1-67l92.1,53.2l-150.3,86.8l13.2,7.6l-71.1,41v12.2L550,1729.3l15.2,8.8 l435.3-251.3v12.1l107.3-62l21.6,12.5l150.3-86.6v-25.1l582.6-336.3v-41.8l-582.6,336.3v-15.3l-92.1-53.2l674.6-389.5v-37.8 l-707.4,408.4l-84.9-49l209.7-121.1v-27.6l582.6-336.3v-33.7l-582.6,336.3v-20.7l-94.4-54.5l677-390.9V495.9z M789.2,997.4 l209.7-121.1l89.5,51.7l-99.9,57.7l0,0l-109.8,63.4L789.2,997.4z M1208.6,997.4L998,1117.9l-93.4-53.9l96.4-55.7v0l113.3-65.4 L1208.6,997.4z"/>
-	<polygon class="st0" points="447.4,674.1 1309.1,176.6 1297.4,169.8 435.7,667.3 421.7,659.3 137.9,823.1 137.9,869 461.5,682.2"/>
-	<polygon class="st0" points="305.7,592.5 1167.6,94.9 1159.4,90.1 297.5,587.8 279.9,577.7 137.9,659.7 137.9,709.6 323.3,602.6"/>
-	<polygon class="st0" points="163.9,510.9 1026,13.1 1021.3,10.4 159.2,508.2 138.2,496.1 137.9,496.2 137.9,550.2 185,523"/>
-</g>
-</svg>

packages/ui-assets/src/types.d.ts

@@ -1,8 +0,0 @@
-// Copyright 2017-2023 @polkadot/ui-assets authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-declare module '*.svg' {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const content: any;
-  export default content;
-}

packages/ui-assets/tsconfig.build.json

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

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": ">=16"
+  },
   "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,20 +17,20 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "2.12.1",
+  "version": "3.2.2",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.20.13",
-    "@polkadot/keyring": "^10.4.2",
-    "@polkadot/ui-settings": "2.12.1",
-    "@polkadot/util": "^10.4.2",
-    "@polkadot/util-crypto": "^10.4.2",
-    "mkdirp": "^2.1.3",
-    "rxjs": "^7.8.0",
-    "store": "^2.0.12"
+    "@polkadot/keyring": "^12.1.1",
+    "@polkadot/ui-settings": "3.2.2",
+    "@polkadot/util": "^12.1.1",
+    "@polkadot/util-crypto": "^12.1.1",
+    "mkdirp": "^2.1.6",
+    "rxjs": "^7.8.1",
+    "store": "^2.0.12",
+    "tslib": "^2.5.0"
   },
   "devDependencies": {
-    "@types/mkdirp": "^1.0.2",
+    "@types/mkdirp": "^2.0.0",
     "@types/store": "^2.0.2"
   },
   "peerDependencies": {

packages/ui-keyring/src/Base.ts

@@ -3,17 +3,17 @@
 
 import type { KeyringInstance, KeyringPair } from '@polkadot/keyring/types';
 import type { Prefix } from '@polkadot/util-crypto/address/types';
-import type { AddressSubject } from './observable/types';
-import type { KeyringOptions, KeyringStore } from './types';
+import type { AddressSubject } from './observable/types.js';
+import type { KeyringOptions, KeyringStore } from './types.js';
 
 import { createTestKeyring } from '@polkadot/keyring';
 import { isBoolean, isNumber, isString } from '@polkadot/util';
 
-import { accounts } from './observable/accounts';
-import { addresses } from './observable/addresses';
-import { contracts } from './observable/contracts';
-import { env } from './observable/env';
-import { BrowserStore } from './stores/Browser'; // direct import (skip index with all)
+import { accounts } from './observable/accounts.js';
+import { addresses } from './observable/addresses.js';
+import { contracts } from './observable/contracts.js';
+import { env } from './observable/env.js';
+import { BrowserStore } from './stores/Browser.js'; // direct import (skip index with all)
 
 export class Base {
   #accounts: AddressSubject;
@@ -22,11 +22,13 @@ export class Base {
 
   #contracts: AddressSubject;
 
+  #isEthereum: boolean;
+
   #keyring?: KeyringInstance;
 
   protected _store: KeyringStore;
 
-  protected _genesisHash?: string;
+  protected _genesisHash?: string | undefined;
 
   protected _genesisHashAdd: string[] = [];
 
@@ -34,6 +36,7 @@ export class Base {
     this.#accounts = accounts;
     this.#addresses = addresses;
     this.#contracts = contracts;
+    this.#isEthereum = false;
     this._store = new BrowserStore();
   }
 
@@ -49,6 +52,10 @@ export class Base {
     return this.#contracts;
   }
 
+  public get isEthereum (): boolean {
+    return this.#isEthereum;
+  }
+
   public get keyring (): KeyringInstance {
     if (this.#keyring) {
       return this.#keyring;
@@ -117,6 +124,9 @@ export class Base {
       this.setDevMode(options.isDevelopment);
     }
 
+    // set Ethereum state
+    this.#isEthereum = keyring.type === 'ethereum';
+
     this.#keyring = keyring;
     this._genesisHash = options.genesisHash && (
       isString(options.genesisHash)

packages/ui-keyring/src/Keyring.ts

@@ -5,18 +5,18 @@ import type { KeyringPair, KeyringPair$Json, KeyringPair$Meta } from '@polkadot/
 import type { BN } from '@polkadot/util';
 import type { EncryptedJson } from '@polkadot/util-crypto/json/types';
 import type { KeypairType } from '@polkadot/util-crypto/types';
-import type { AddressSubject, SingleAddress } from './observable/types';
-import type { CreateResult, KeyringAddress, KeyringAddressType, KeyringItemType, KeyringJson, KeyringJson$Meta, KeyringOptions, KeyringPairs$Json, KeyringStruct } from './types';
+import type { AddressSubject, SingleAddress } from './observable/types.js';
+import type { CreateResult, KeyringAddress, KeyringAddressType, KeyringItemType, KeyringJson, KeyringJson$Meta, KeyringOptions, KeyringPairs$Json, KeyringStruct } from './types.js';
 
 import { createPair } from '@polkadot/keyring';
 import { chains } from '@polkadot/ui-settings';
 import { bnToBn, hexToU8a, isFunction, isHex, isString, objectSpread, stringify, stringToU8a, u8aSorted, u8aToString } from '@polkadot/util';
 import { base64Decode, createKeyMulti, jsonDecrypt, jsonEncrypt } from '@polkadot/util-crypto';
 
-import { env } from './observable/env';
-import { Base } from './Base';
-import { accountKey, accountRegex, addressKey, addressRegex, contractKey, contractRegex } from './defaults';
-import { KeyringOption } from './options';
+import { env } from './observable/env.js';
+import { KeyringOption } from './options/index.js';
+import { Base } from './Base.js';
+import { accountKey, accountRegex, addressKey, addressRegex, contractKey, contractRegex } from './defaults.js';
 
 const RECENT_EXPIRY = 24 * 60 * 60;
 
@@ -46,10 +46,20 @@ export class Keyring extends Base implements KeyringStruct {
   }
 
   public addMultisig (addresses: (string | Uint8Array)[], threshold: bigint | BN | number, meta: KeyringPair$Meta = {}): CreateResult {
-    const address = createKeyMulti(addresses, threshold);
+    let address = createKeyMulti(addresses, threshold);
+
+    // For Ethereum chains, the first 20 bytes of the hash indicates the actual address
+    // Testcases via creation and on-chain events:
+    // -  input: 0x7a1671a0224c8927b08f978027d586ab6868de0d31bb5bc956b625ced2ab18c4
+    // - output: 0x7a1671a0224c8927b08f978027d586ab6868de0d
+    if (this.isEthereum) {
+      address = address.slice(0, 20);
+    }
 
     // we could use `sortAddresses`, but rather use internal encode/decode so we are 100%
-    const who = u8aSorted(addresses.map((who) => this.decodeAddress(who))).map((who) => this.encodeAddress(who));
+    const who = u8aSorted(
+      addresses.map((who) => this.decodeAddress(who))
+    ).map((who) => this.encodeAddress(who));
 
     return this.addExternal(address, objectSpread<KeyringPair$Meta>({}, meta, { isMultisig: true, threshold: bnToBn(threshold).toNumber(), who }));
   }
@@ -289,7 +299,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 +309,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/bundle.ts

@@ -1,10 +1,10 @@
 // Copyright 2017-2023 @polkadot/ui-keyring authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import { Keyring } from './Keyring';
+import { Keyring } from './Keyring.js';
 
-export { packageInfo } from './packageInfo';
+export { packageInfo } from './packageInfo.js';
 
-const keyring = new Keyring();
+export const keyring = new Keyring();
 
-export { Keyring, keyring };
+export { Keyring };

packages/ui-keyring/src/defaults.ts

@@ -15,26 +15,20 @@ function toHex (address: string): string {
   );
 }
 
-const accountKey = (address: string): string =>
-  `${ACCOUNT_PREFIX}${toHex(address)}`;
+export function accountKey (address: string): string {
+  return `${ACCOUNT_PREFIX}${toHex(address)}`;
+}
 
-const addressKey = (address: string): string =>
-  `${ADDRESS_PREFIX}${toHex(address)}`;
+export function addressKey (address: string): string {
+  return `${ADDRESS_PREFIX}${toHex(address)}`;
+}
 
-const contractKey = (address: string): string =>
-  `${CONTRACT_PREFIX}${toHex(address)}`;
+export function contractKey (address: string): string {
+  return `${CONTRACT_PREFIX}${toHex(address)}`;
+}
 
-const accountRegex = new RegExp(`^${ACCOUNT_PREFIX}0x[0-9a-f]*`, '');
+export const accountRegex = new RegExp(`^${ACCOUNT_PREFIX}0x[0-9a-f]*`, '');
 
-const addressRegex = new RegExp(`^${ADDRESS_PREFIX}0x[0-9a-f]*`, '');
+export const addressRegex = new RegExp(`^${ADDRESS_PREFIX}0x[0-9a-f]*`, '');
 
-const contractRegex = new RegExp(`^${CONTRACT_PREFIX}0x[0-9a-f]*`, '');
-
-export {
-  accountKey,
-  accountRegex,
-  addressKey,
-  addressRegex,
-  contractKey,
-  contractRegex
-};
+export const contractRegex = new RegExp(`^${CONTRACT_PREFIX}0x[0-9a-f]*`, '');

packages/ui-keyring/src/detectPackage.ts

@@ -5,7 +5,7 @@
 
 import { detectPackage } from '@polkadot/util';
 
-import others from './detectOther';
-import { packageInfo } from './packageInfo';
+import others from './detectOther.js';
+import { packageInfo } from './packageInfo.js';
 
 detectPackage(packageInfo, null, others);