[CI Skip] release/stable 2.6.2

skip-checks: true

.123current

@@ -0,0 +1 @@
+2.6.2

.123trigger

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

.babelrc.js

@@ -1 +0,0 @@
-module.exports = require('./babel.config.js');

.circleci/config.yml

@@ -1,24 +0,0 @@
-version: 2
-jobs:
-  build:
-    branches:
-      ignore:
-        - gh-pages
-    working_directory: ~/polkadot-js
-    docker:
-      - image: circleci/node:10
-    steps:
-      - checkout
-      - restore_cache:
-          key: dependency-cache-{{ checksum "yarn.lock" }}
-      - run:
-          name: install-deps
-          command: yarn install --frozen-lockfile
-      - save_cache:
-          key: dependency-cache-{{ checksum "yarn.lock" }}
-          paths:
-            - ./node_modules
-            - ~/.cache/yarn
-      - run:
-          name: build
-          command: yarn polkadot-dev-circleci-build

.codeclimate.yml

@@ -1,3 +1,17 @@
+checks:
+  argument-count:
+    config:
+      threshold: 5
+  method-complexity:
+    config:
+      threshold: 7
+  method-count:
+    config:
+      threshold: 25
+  method-lines:
+    config:
+      threshold: 30
+
 exclude_patterns:
 - "**/*.spec.js"
 - "**/*.spec.ts"

.eslintignore

@@ -1,3 +0,0 @@
-**/build/*
-**/coverage/*
-**/node_modules/*

.eslintrc.js

@@ -1,7 +1,15 @@
-const base = require('@polkadot/dev-react/config/eslint');
+// Copyright 2017-2022 @polkadot/ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+const base = require('@polkadot/dev/config/eslint.cjs');
 
 module.exports = {
   ...base,
+  ignorePatterns: [
+    ...base.ignorePatterns,
+    'jest/**/*',
+    '**/*.d.ts'
+  ],
   parserOptions: {
     ...base.parserOptions,
     project: [

.github/issue_template.md

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

.github/workflows/auto-approve.yml

@@ -0,0 +1,16 @@
+name: bot
+
+on:
+  pull_request:
+    types: [labeled]
+
+jobs:
+  approve:
+    if: "! startsWith(github.event.head_commit.message, '[CI Skip]') && (!github.event.pull_request || github.event.pull_request.head.repo.full_name == github.repository)"
+    runs-on: ubuntu-latest
+    steps:
+      - uses: jacogr/action-approve@master
+        with:
+          authors: jacogr
+          labels: -auto
+          token: ${{ secrets.GH_PAT_BOT }}

.github/workflows/auto-merge.yml

@@ -0,0 +1,16 @@
+name: bot
+
+on:
+  pull_request:
+    types: [labeled]
+
+jobs:
+  merge:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: jacogr/action-merge@master
+        with:
+          checks: build,lint,test
+          labels: -auto
+          strategy: squash
+          token: ${{ secrets.GH_PAT_BOT }}

.github/workflows/lock.yml

@@ -0,0 +1,25 @@
+name: 'Lock Threads'
+
+on:
+  schedule:
+    - cron: '25 2/3 * * *'
+
+jobs:
+  lock:
+    runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_SCRIPTS: false
+    steps:
+      - uses: dessant/lock-threads@v2
+        with:
+          github-token: ${{ secrets.GH_PAT_BOT }}
+          issue-lock-inactive-days: '7'
+          issue-lock-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: >
+            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

@@ -0,0 +1,18 @@
+name: PR
+on: [pull_request]
+
+jobs:
+  pr:
+    strategy:
+      matrix:
+        step: ['lint', 'test', 'build']
+    name: ${{ matrix.step }}
+    runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_SCRIPTS: false
+    steps:
+    - uses: actions/checkout@v2
+    - name: ${{ matrix.step }}
+      run: |
+        yarn install --immutable | grep -v 'YN0013'
+        yarn ${{ matrix.step }}

.github/workflows/push-master.yml

@@ -0,0 +1,29 @@
+name: Master
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  master:
+    if: "! startsWith(github.event.head_commit.message, '[CI Skip]')"
+    strategy:
+      matrix:
+        step: ['build:release']
+    name: ${{ matrix.step }}
+    runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_SCRIPTS: false
+      CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
+      GH_PAT: ${{ secrets.GH_PAT }}
+      GH_RELEASE_GITHUB_API_TOKEN: ${{ secrets.GH_PAT }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+    steps:
+    - uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+        token: ${{ secrets.GH_PAT }}
+    - name: ${{ matrix.step }}
+      run: |
+        yarn install --immutable | grep -v 'YN0013'
+        yarn ${{ matrix.step }}

.github/workflows/semgrep.yml

@@ -0,0 +1,20 @@
+name: Semgrep
+on:
+  pull_request: {}
+  push:
+    branches:
+      - master
+
+jobs:
+  check:
+    if: "! startsWith(github.event.head_commit.message, '[CI Skip]') && (!github.event.pull_request || github.event.pull_request.head.repo.full_name == github.repository)"
+    runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_SCRIPTS: false
+    steps:
+      - uses: actions/checkout@v2
+      - uses: returntocorp/semgrep-action@v1
+        with:
+          auditOn: push
+          publishToken: ${{ secrets.SEMGREP_APP_TOKEN }}
+          publishDeployment: 1395

.github/workflows/stale.yml

@@ -0,0 +1,19 @@
+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@v3
+        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

.gitignore

@@ -1,16 +1,24 @@
 build/
+build-cjs/
+build-esm/
 build-docs/
 coverage/
 node_modules/
 tmp/
+.idea
 .DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
 .npmrc
+.yarn/*
+!.yarn/releases
+!.yarn/plugins
+.pnp.*
 cc-test-reporter
 package-lock.json
 npm-debug.log*
+tsconfig.*buildinfo
 yarn-debug.log*
 yarn-error.log*

.mailmap

@@ -0,0 +1,3 @@
+Jaco <jacogr@gmail.com>
+github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> <action@github.com>
+github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Github Actions <action@github.com>

.nvmrc

@@ -1 +0,0 @@
-10.13.0

.prettierignore

@@ -0,0 +1,3 @@
+build
+coverage
+packages

.prettierrc.cjs

@@ -0,0 +1,4 @@
+// Copyright 2017-2022 @polkadot/ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+module.exports = require('@polkadot/dev/config/prettier.cjs');

.travis.yml

@@ -1,28 +0,0 @@
-language: node_js
-node_js:
-  - "10"
-env:
-  global:
-    - CC_TEST_REPORTER_ID=8317dd42c8674d0f3094dda84c022abced4d0bf632b53406afd239ec4b039db2
-    - GH_PAGES_SRC="build-docs"
-cache:
-  yarn: true
-  directories:
-    - node_modules
-before_install:
-  - curl -o- -L https://yarnpkg.com/install.sh | bash
-  - curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
-  - chmod +x ./cc-test-reporter
-  - export PATH=$HOME/.yarn/bin:$PATH
-before_script:
-  - ./cc-test-reporter before-build
-script:
-  - yarn polkadot-dev-travis-build
-after_script:
-  - ./cc-test-reporter after-build --exit-code $TRAVIS_TEST_RESULT
-deploy:
-  skip_cleanup: true
-  provider: script
-  script: yarn polkadot-dev-travis-deploy
-  on:
-    branch: master

.yarnrc.yml

@@ -0,0 +1,13 @@
+enableImmutableInstalls: false
+
+enableProgressBars: false
+
+nodeLinker: node-modules
+
+plugins:
+  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
+    spec: "@yarnpkg/plugin-interactive-tools"
+  - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
+    spec: "@yarnpkg/plugin-version"
+
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

BOUNTIES.md

@@ -0,0 +1,19 @@
+# Bounties
+
+From time-to-time we will add bounties for features.
+
+These are generously provided by the [Web3 Foundation](https://web3.foundation/) and as such employees of Parity or those of the W3F are ineligible for them. (This includes people being by either Party for development or community work, related or un-related to polkadot-js).
+
+The idea is that these bounties should be left open to community participation, so only if there is no outside interest for a specific issue, should those directly or indirectly paid by the W3F for work, attempt to close an issue. (in which case it will be "un-bountied")
+
+Current bounties are tracked by the [!bounty](https://github.com/polkadot-js/ui/labels/%21bounty) label.
+
+## Process
+
+Once listed, the normal [Gitcoin](https://gitcoin.co/) process kicks in. This means application, work and payment is managed by this tool. The values for bounties are determined by the size estimation done by the team.
+
+## Some small requests
+
+Please don't start work on an issue until you have been approved via the gitcoin interface. We generally love enthusiasm and code in the repo, however short-cutting the process does create some issues for the management of the bounties. We certainly don't want to be playing favorites if 2 PRs for the same issue are created at the same time. And in cases where somebody else has been approved and an unapproved PR comes in... well, it gets really murky.
+
+When making changes, please do not force push in your PRs, especially not after a review has been started. We will clone your repo and work from that, doing a simple `pull` on a force-pushed branch ends up being, well, less than simple. We squash merge all PRs, so you do not clutter up the history by using stock-standard pushes to your branch.

CHANGELOG.md

@@ -1,9 +1,745 @@
-# 0.44.1
+# CHANGELOG
+
+## 2.6.2 Jun 25, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.6.2
+
+
+## 2.6.1 Jun 23, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.6.1
+- Upgrade libs to latest stable versions
+
+
+## 2.5.1 Jun 19, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.5.1
+- Upgrade libs to latest stable versions
+
+
+## 2.4.1 Jun 4, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.4.1
+
+
+## 2.3.1 May 30, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.3.1
+
+
+## 2.2.1 May 14, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.2.1
+
+
+## 2.1.1 Apr 30, 2022
+
+Changes:
+
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.1.1
+- Adjust Jest test init for latest `@polkadot/dev`
+
+
+## 2.0.1 Apr 9, 2022
+
+- **Breaking change** In this major version the commonjs outputs are moved to a sub-folder. Since the export map and main field in package.json does reflect this change, there should be no usage changes. However the packages here will all need to be on the same version for internal linkage.
+
+Changes:
+
+- Adjust Polkadot icon generation with lazy init
+- Output commonjs files under the `cjs/**` root
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.0.1
+
+
+## 1.4.1 Mar 27, 2022
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.7.1
+
+
+## 1.3.1 Mar 19, 2022
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.6.1
+- Additional workaround for Vite bundling
+
+
+## 1.2.1 Mar 12, 2022
+
+Changes:
+
+- Adjust for bundlers where `import.meta.url` is undefined
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.5.1
+
+
+## 1.1.1 Feb 14, 2022
+
+Changes:
+
+- Adjust ordering in state & timeouts for QR display
+- Add `timerDelay` property to QR display to control frame timeouts
+- Adjust webpack example config (cleanups, remove unneeded plugins)
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.4.1
+
+
+## 1.0.1 Jan 29, 2022
+
+**Breaking change** The `Ledger` export from `@polkadot/ui-keyring` has been removed. For users of this class, import it directly from `@polkadot/hw-ledger`
+
+**Important** This is the first release in the long-outstanding `1.x` range. Apart from the notable breaking changes, it has no functional differences to the previous versions.
+
+Changes:
+
+- Remove `Ledger` export in `ui-keyring`
+
+
+## 0.89.3 Jan 23, 2022
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.3.3
+
+
+## 0.89.2 Jan 15, 2022
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.3.2
+
+
+## 0.89.1 Jan 9, 2022
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.3.1
+
+
+## 0.88.1 Jan 2, 2022
+
+- Allow for loading of accounts on additional genesisHashes
+- Ensure package path is availble under ESM & CJS
+
+
+## 0.87.7 Dec 27, 2021
+
+Changes:
+
+- Internal dev packages bumps, publish changes
+
+
+## 0.87.6 Dec 19, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.2.2
+
+
+## 0.87.5 Dec 5, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.1.2
+
+
+## 0.87.4 Dec 5, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.1.1
+
+
+## 0.87.3 Dec 1, 2021
+
+Changes:
+
+- Use `hasProcess` check from `@polkadot/util`
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.0.5
+
+
+## 0.87.2 Nov 30, 2021
+
+Contributed:
+
+- Correct check for `process` variable (Thanks to https://github.com/AndreiEres)
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.0.4
+
+
+## 0.87.1 Nov 28, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.0.2
+
+
+## 0.86.7 Nov 22, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.9.2
+
+
+## 0.86.6 Nov 21, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.9.1
+
+
+## 0.86.5 Nov 6, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.8.2
+
+
+## 0.86.4 Nov 6, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.8.1
+
+
+## 0.86.3 Nov 1, 2021
+
+Changes:
+
+- Add publish skip to all examples
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.7.1
+
+
+## 0.86.2 Oct 24, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.6.1
+
+
+## 0.86.1 Oct 16, 2021
+
+Contributed:
+
+- Check for existence of `process` before using (Thanks to https://github.com/wirednkod)
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.5.1
+
+
+## 0.85.5 Oct 10, 2021
+
+Changes:
+
+- Update rxjs to 7.4 (aligning with use in API)
+
+
+## 0.85.4 Sep 17, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.4.1
+
+
+## 0.85.3 Aug 29, 2021
+
+Changes:
+
+- Revert color bump to 4.0.1, keep at 3.2.1 (numeric separators on Vue & react-native)
+
+
+## 0.85.2 Aug 28, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.3.1
+
+
+## 0.85.1 Aug 15, 2021
+
+Contributed:
+
+- Always use `bigint` type to indicate instance (Thanks to https://github.com/ntduan)
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.2.1
+
+
+## 0.84.3 Aug 2, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.1.1
+
+
+## 0.84.2 Jul 26, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.0.3
+
+
+## 0.84.1 Jul 11, 2021
+
+Changes:
+
+- Internal RxJs usage has been bumped to the 7.2 version
+- Allow building as a completely stand-alone browser bundle (experimental)
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 7.0.1
+
+
+## 0.83.1 Jul 5, 2021
+
+Contributed:
+
+- Add support for notifications setting (Thanks to https://github.com/shawntabrizi)
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.11.1
+
+
+## 0.82.1 Jun 26, 2021
+
+Contributed:
+
+- Adjust Qr address imports (Thanks to https://github.com/joelamouche)
+- Bubble errors on Qr scanning (Thanks to https://github.com/joelamouche)
+
+Changes:
+
+- Fix `keyring.setSS58Format` to correctly set for prefix 0
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.10.1
+
+
+## 0.81.1 Jun 20, 2021
+
+Contributed:
+
+- Import `ethereum` addresses via QR (Thanks to https://github.com/joelamouche)
+- Support settings for non-RPC connectors (Thanks to https://github.com/wirednkod)
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.9.1
+- Fix webpack demo import locations
+
+
+## 0.80.1 Jun 14, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.8.1
+
+
+## 0.79.1 Jun 6, 2021
+
+Changes:
+
+- Add support for WebHID selection (as exposed by ledger packages)
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.7.1
+
+
+## 0.78.1 May 29, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.6.1
+
+
+## 0.77.1 May 25, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.5.1
+
+
+## 0.76.1 May 16, 2021
+
+Contributed:
+
+- Pass through injected account types (Thanks to https://github.com/joelamouche)
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.4.1
+
+
+## 0.75.1 Apr 25, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.3.1
+
+
+## 0.74.1 Apr 18, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.2.1
+
+
+## 0.73.1 Apr 12, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.1.1
+
+
+## 0.72.1 Mar 15, 2021
+
+Contributed:
+
+- Added support for batch import/export functionality (Thanks to https://github.com/BubbleBear)
+
+
+## 0.71.3 Mar 8, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.0.5
+
+
+## 0.71.2 Mar 6, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.0.4
+
+
+## 0.71.1 Mar 6, 2021
+
+Changes:
+
+- Build to ESM by default (with cjs versions via export map)
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 6.0.3
+
+
+## 0.70.1 Feb 28, 2021
+
+Changes:
+
+- Use `detectPackage` with `packageInfo` & check for monorepo dependencies
+- Remove `mkdirp` resolution to ensure local views work with Webpack
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 5.9.2
+
+
+## 0.69.1 Feb 7, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 5.6.1
+
+
+## 0.68.1 Feb 1, 2021
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 5.5.1
+- Added `ed25519-ledger` option for `hdLedger` from `@polkadot/util-crypto`
+
+
+## 0.67.1 Jan 24, 2021
+
+Contributed:
+
+- Store hardware accounts (Thanks to https://github.com/Tbaut)
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 5.4.4
+- Cleanup dependencies to only have common (no api repo)
+
+
+## 0.66.1 Jan 17, 2021
+
+- **Important** Users of the `@polkadot/ledger` package should now import `@polkadot/hw-wallet`
+
+Contributed:
+
+- Dock Ledger integration (Thanks to https://github.com/lovesh, moved to common)
+- Polymesh Ledger integration (https://github.com/adamdossa, moved to common)
+
+Changes:
+
+- Remove `@polkadot/ledger` package (Moved to common as `@polkadot/hw-ledger`)
+- Keyring options genesis allows a `string` | `Hash` (e.g. `api.genesisHash`) input
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 5.3.1
+- Removed `@polkadot/types` dependencies (only interface needed, supplied)
+
+
+## 0.65.1 Dec 28, 2020
+
+Changes:
+
+- Updated to `@polkadot/{keyring, util, util-crypto}` 5.2.2
+- Updated to `@polkadot/api` 3.2.2
+
+
+## 0.64.1 Dec 21, 2020
+
+Changes:
+
+- Don't re-export types from index (esm build compat)
+- Correctly mark `detectPackage` as a side-effect
+- Updated to `@polkadot/{keyring, util, util-crypto}` 5.1.1
+- Updated to `@polkadot/api` 3.1.1
+
+
+## 0.63.1 Dec 14, 2020
+
+Contributed:
+
+- Export types for icons (Thanks to https://github.com/Tbaut)
+
+Changes:
+
+- Bump to latest WebUSB from Ledger
+- Swap Ledger functionality to dedicated packages
+- Build esm packages alongside cjs
+- Convert all imports/exports to named
+- Pass pair type through to all creation actions
+- Allow for transparent failures on account injection
+- Swap to using `import type { ... }`
+- Updated to `@polkadot/{keyring, util, util-crypto}` 5.0.1
+- Updated to `@polkadot/api` 3.0.1
+
+
+## 0.62.1 Nov 9, 2020
+
+Changes:
+
+- Update address checks to allow for Ethereum-compatible chains
+- Add Ethereum icon type (uses blockies underneath)
+- Updated to `@polkadot/{keyring, util, util-crypto}` 4.0.1
+- Updated to `@polkadot/api` 2.6.1
+
+
+## 0.61.1 Oct 19, 2020
+
+Contributed:
+
+- Add Darwinia ss58 (Thanks to https://github.com/WoeOm)
+- Swap network identifiers to `@polkadot/networks` (Thanks to https://github.com/Tbaut)
+
+Changes:
+
+- Explicit deps versions (with peerDependencies as provided)
+- Bump to `@polkadot/api` 2.3.1
+- Bump to `@polkadot/util` 3.6.1
+
+
+## 0.60.1 Oct 7, 2020
+
+Changes:
+
+- Allow for custom IdentityIcon overrides
+- Move docs to docs repo
+- Bump to `@polkadot/api` 2.1.1
+
+
+## 0.59.1 Sep 28, 2020
+
+Changes:
+
+- Expose createFromJson on keyring to compliment createFromUri
+- Support Account/address indexes for Ledger
+- Bump to `@polkadot/api` 2.0.1
+- Bump to `@polkadot/util` 3.5.1
+
+
+## 0.58.1 Aug 31, 2020
+
+Contributed:
+
+- Add Subsocial to ss58 defaults (Thanks to https://github.com/F3Joule)
+
+Changes:
+
+- Support QR scanning where name contains ":"
+- Support for Moonbeam ETH-compatible crypto types
+
+
+## 0.57.3 Jul 27, 2020
+
+Changes:
+
+- Support for JSON v3 kdf-enabled format
+- Adjust password validity checks (alongside v3)
+- Bump to `@polkadot/api` 1.26.1
+- Bump to `@polkadot/util` 3.0.1
+
+
+## 0.56.1 Jul 20, 2020
+
+Contributed:
+
+- Add Kulupu to ss58 options (https://github.com/carumusan)
+
+Changes:
+
+- Remove CC1 naming for Polkadot (as applicable)
+- Flatten React IdentityIcon (no extra wrapping)
+- Bump to `@polkadot/api` 1.25.1
+- Bump to `@polkadot/util` 2.18.1
+
+
+## 0.55.1 Jul 2, 2020
+
+Contributed:
+
+- Better error-handling for invalid FileStore accounts (Thanks to https://github.com/yuhui1208)
+
+Changes:
+
+- Adjust react-qr `Scan*` making `onScan` callbacks required
+- Rework the react-qr display to use functional components
+- Bump to `@polkadot/api` 1.21.1
+- Bump to `@polkadot/util` 2.15.1
+
+
+## 0.54.1 Jun 16, 2020
+
+Contributed:
+
+- Add genesisHash to signer payload (Thanks to https://github.com/hanwencheng)
+- Allow QR scanning to parse mini keys (Thanks to https://github.com/hanwencheng)
+
+Changes:
+
+- Adjust ordering of available crypto types (native first)
+- Rename Substrate prefix entry (42) to "generic"
+- Bump to `@polkadot/api` 1.19.1
+- Bump to `@polkadot/util` 2.14.1
+
+
+## 0.53.1 May 14, 2020
+
+Contributed:
+
+- Add Ecdsa to the supported crypto types options (Thanks to https://github.com/akru)
+- Add Egedware to network prefix settings (Thanks to https://github.com/jnaviask)
+
+Changes:
+
+- Add `addMultisig` into keyring (with all options to re-create address)
+- Bump to `@polkadot/api` 1.14.1
+- Bump to `@polkadot/util` 2.10.1
+
+
+## 0.52.1 Apr 15, 2020
+
+- **Breaking change** (TypeScript only) The `*.d.ts` files now contain TypeScript 3.8 features, `#private`, which is not usable in older versions
+
+Contributed:
+
+- Allow for the encoding of chain-settings via QR (Thanks to https://github.com/hanwencheng)
+- Enhance checks for ws url in settings (Thanks to https://github.com/kwingram25)
+
+Changes:
+
+- Start of `isAlternative` implementations for identicons to react, react-native & vue (currently only Polkadot sixPoint)
+- Bump to `@polkadot/api` 1.10 & `@polkadot/util` 2.8
+- Convert `private <field>` to `#<field>`
+- Remove internal/duplicated ui-keyring ss58Format mapping, rather set it directly on wrapped keyring
+
+
+## 0.51.1 Feb 18, 2020
+
+Changes:
+
+- Support formatting of addresses via createPair base on latest upstream keyring
+- Bump to `@polkadot/api` 1.3.1
+- Bump to `@polkadot/util` 2.4.1
+
+
+## 0.50.1 Feb 16, 2020
+
+Changes:
+
+- ui-settings does not expose pre-configured endpoints by default (only local dev node)
+- Bump to `@polkadot/api` 1.2.1
+- Bump to `@polkadot/util` 2.3.1
+
+
+## 0.49.1 Feb 06, 2020
+
+Changes:
+
+- Add resolver for jest requires (tests from src)
+
+
+## 0.48.1 Jan 30, 2020
+
+Changes:
+
+- Add Westend & Kulupulu, remove Alexander
+- Update Edgeware wss uri
+- Change display name for Kusama
+- Mirror QR scanning display
+
+
+## 0.47.1 Nov 29, 2019
+
+Changes:
+
+- Support for Kusama CC3 (network endpoints)
+- Genesis hashes for accounts can now lookup against a range (so CC2-locked accounts will show on CC3)
+- Language options have been removed from settings (these will be app-specific)
+- QR display loops now have a timeout decay (slower as it loops)
+
+
+## 0.46.1 Oct 25, 2019
+
+- Add an example for using React Native (thanks to https://github.com/cameronfr)
+
+Changes:
+
+- Add base documentation for getting started
+- Add camera access to the setting structure
+
+
+## 0.45.1 Sep 26, 2019
+
+- **Breaking change** The subscription subject for `ui-keyring` does not return a pre-formatted React object anymore. This is SUI-specific, so had limited use and therefore should not even be split into a `react-keyring` component. Rather users of this functionality should construct their own options for their framework.
+
+Changes:
+
+- Support for Kusama CC2
+- Experimental support for signing via Ledger HW
+- Add specific settings for the icon type to `ui-settings`
+- Add Edgeware live RPC endpoints to `ui-settings`
+- Adjust `react-identicon` highlights (validators)
+- Add `example-{react, vue}` highlighting simple use with `ui-keyring`, `ui-settings` & `*-identicon` components
+
+
+## 0.44.1 Sep 12, 2019
+
+Changes:
 
 - Update `@polkadot/util` to 1.4.1
-- Upddate to babel 7.6
+- Upddate to Babel 7.6
 
-# 0.43.1
+
+## 0.43.1 Sep 10, 2019
+
+Changes:
 
 - Add W3F Node for Kusama
 - Add extended info to ui-settings, i.e. info on each option
@@ -11,17 +747,24 @@
 - ui-keyring now check the genesisHash on  all load operations (if supplied)
 - react-qr is now operational and integrated in the polkadot-js/extension and apps repos
 
-# 0.42.1
+
+## 0.42.1 Aug 24, 2019
 
 - **Breaking Change** The `@polkadot/ui-identicon` package has been renamed to `@polkadot/react-identicon`
 - **Breaking change** For `@polkadot/ui-keyring` the stores are now not exported from the index, imports should be changed to either `ui-keyring/stores` or explicitly to `ui-keyring/stores/Extension`
+
+Changes:
+
 - Support for Kusama with endpoints and settings
 - The `@polkadot/reactnative-identicon` package has been added (only Polkadot support atm)
 - The `@polkadot/react-qr` package has been added to display/scan QR codes
 - `@polkadot/ui-settings` has UNfrastructure added as an RPC provider for Alex
 - `@polkadot/ui-settings` exposes a dropdown with address prefix options
 
-# 0.41.1
+
+## 0.41.1 Jun 14, 2019
+
+Changes:
 
 - Adapt interface to cater for new `@polkadot/keyring`, where pairs -
   - expose `address` getter instead of `address()`
@@ -33,16 +776,25 @@
 - Remove previously deprecated kering functions, `createAccount`, `createAccountExternal` & `createAccountMnemonic`
 - Remove (previously deprecated), `@polkadot/ui-util`, all these functions have been incorporated in `@polkadot/util`
 
-# 0.40.1
+
+## 0.40.1 Jun 04, 2019
+
+Changes:
 
 - Address encoding changes, use encoded address instead of supplied
 
-# 0.39.1
+
+## 0.39.1 May 22, 2019
+
+Changes:
 
 - Allow for externally injected accounts
 - @polkadot/util 0.91.1 & @polkadot/api 0.79.1
 
-# 0.38.1
+
+## 0.38.1 May 08, 2019
+
+Changes:
 
 - Sorting of keyring addresses
 - Fix JSON import defaults (previously detection was not working for old accounts)
@@ -50,62 +802,112 @@
 - Ensure only a single instance of ui-keyring is loaded
 - Adjust short address option display (keyring options)
 
-# 0.37.1
+
+## 0.37.1 Apr 03, 2019
+
+Changes:
 
 - Add Emberic Elm (Dried Danta discontinued)
 - @polkadot/util & @polkadot/api 0.75.1
 
-# 0.36.1
+
+## 0.36.1 Mar 29, 2019
+
+Changes:
 
 - Small fixes, latest @polkadot/wasm-* packages
 
-# 0.35.1
+
+## 0.35.1  Mar 29, 2019
+
+Changes:
 
 - @polkadot/util & @polkadot/api 0.75.1
 
-# 0.34.1
+
+## 0.34.1 Mar 28, 2019
+
+Changes:
 
 - Fix for blake2 in Polkadot identicon generation
 
-# 0.33.1
+
+## 0.33.1 Mar 23, 2019
+
+Changes:
 
 - Rename createUri and createExternal to addExternal and addUri
 - Rename addAccountPair to addPair
 - Add additional createFromUri function to create pair, but not add it
 - Latest api, util & util-crypto (this with WASM and JS fallbacks)
 
-# 0.32.1
+
+## 0.32.1 Mar 20, 2019
+
+Changes:
 
 - Add createUri to create an account from a path uri
 - Add createExternal as an alias for createAccountExternal
 - Deprecate createAccount, createAccountExternal and createAccountMnemonic
 - Fix styled-component dependencies when used in a non-@polkadot project
 
-# 0.31.1
+
+## 0.31.1 Mar 18, 2019
+
+Changes:
 
 - Allow for latest keyring with sr25519 derived support
 - When using dev mode, it assumes the substrate node has sr25519 derived keys
 
-# 0.30.1
+
+## 0.30.1 Mar 14, 2019
+
+Changes:
 
 - Swap to publishing -beta.x on merge (non-breaking testing)
 
-# 0.29.1
+
+## 0.29.1 Mar 13, 2019
+
+Changes:
 
 Swap to using a dev HDKD keyring (only available on latest substrate master, only affects nodes running with --dev, normal operation unaffected)
 
-# 0.28.1
+
+## 0.28.1 Feb 21, 2019
+
+Changes:
 
 Default Substrate icon is Jdenticon
 
-# 0.27.1
+
+## 0.27.1 Feb 20, 2019
+
+Changes:
 
 Replace Charred Cherry with Dried Danta, remove old decimals and token name configs
 
-# 0.26.1
+
+## 0.26.1 Feb 14, 2019
+
+Changes:
 
 Add keyring support for sd25519 (schnorrkel)
 
-# 0.25.1
+
+## 0.25.1 Jan 09, 2019
+
+Changes:
 
 Add `@polkadot/{keyring,util,util-crypto,types}` as peerDependencies for the various packages as used. Thie should allow less churn on this repo with version bumps, although it does add some extra effort onto the users of these libraries. (But the assumption is that they use these anyway)
+
+
+## 0.24.1 Dec 19, 2018
+
+## 0.23.1 Dec 14, 2018
+
+## 0.22.1 Dec 05, 2018
+
+Changes:
+
+- Split from apps

CONTRIBUTORS

@@ -0,0 +1,33 @@
+     623	Jaco                          	2.6.2 (#657)
+       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)
+       4	Thibaut Sardan                	store hardware wallets (#431)
+       3	Luke Sugiura                  	remove language options (#244)
+       3	Stefanie Doll                 	Replace isUndefined util with explicit typeof check (#107)
+       2	Drew Stone                    	Add Edgeware testnet and mainnet updated endpoints (#274)
+       2	Hanwen Cheng                  	allow qr to scan seed qr (#330)
+       2	Nikos Kontakis                	Fix undefined process error that may appear when using ui (#524)
+       2	Vlad Proshchavaiev            	Add Subsocial to ss58 defaults (#358)
+       2	Xiliang Chen                  	Update UNfrastructure node label (#160)
+       2	雪霁                            	Batch export patch up (#455)
+       1	Adam Dossa                    	Add Polymesh Ledger Integration (#427)
+       1	Alex Siman                    	Fix typo in README: stiorage -> storage (#69)
+       1	Alexander Krupenkin           	Added ECDSA crypto type (#313)
+       1	Andrei Eres                   	Fix raising error if process has not defined yet (#548)
+       1	Axel Chalon                   	Simplify KeyringAddress interface (#144)
+       1	Cameron Franz                 	react-native example app port (#223)
+       1	carumusan                     	Add kulupu (#342)
+       1	Harry Liu                     	Update README.md (#166)
+       1	Jake Naviasky                 	Add Edgeware chain prefix to settings. (#317)
+       1	Logan Saether                 	Propose W3F node (#188)
+       1	Lovesh Harchandani            	Allow Ledger support for Dock (#425)
+       1	Luke Schoen                   	Fix typo in heading (#114)
+       1	Nantian                       	fix bigint type (#510)
+       1	Nikhil Ranjan                 	Updated to valid javascript (#271)
+       1	Shawn Tabrizi                 	Add a new `notification` setting (#498)
+       1	Wei Tang                      	Add Kulupu to the network selection list (#254)
+       1	WoeOm                         	add darwinia ss58 (#379)
+       1	yuhui1208                     	[Stores] make FileStroe read key safely  (#338)
+       1	Yuri                          	Add webpack 5 support (#557)
+       1	菩提                            	fix some bugs  (#260)

README.md

@@ -7,7 +7,7 @@
 
 # @polkadot/ui
 
-Basic browser and UI components for creating apps using the polkadot{.js} libraries
+Basic browser and framework agnostic UI components for creating apps using the polkadot{.js} libraries
 
 ## overview
 
@@ -18,9 +18,16 @@ The following UI components are currently available -
 - [vue-identicon](packages/vue-identicon/) Vue identity icon generator with address as input
 - [react-qr](packages/react-qr/) QR code generator/reader for [uos](https://github.com/maciejhirsz/uos) (Substrate/Polkadot only)
 
-Additionally some shared libraries -
+Additionally some shared libraries, that is not dependent on any framework -
 
 - [ui-assets](packages/ui-assets/) Static assets, images and others, shared accross 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 accross UI components, e.g. for icon generation
+
+## examples
+
+In addition to the above packages, there are examples available for intergation  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,5 +1,7 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-const base = require('@polkadot/dev-react/config/babel');
+// Copyright 2017-2022 @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];

copy-to-apps.sh

@@ -1,20 +0,0 @@
-#!/bin/bash
-
-function copy_folder () {
-  SRC="packages/$1/build"
-  DST="../apps/node_modules/@polkadot/$1"
-
-  echo "** Copying $SRC to $DST"
-
-  rm -rf $DST
-  cp -r $SRC $DST
-}
-
-yarn polkadot-dev-build-ts
-
-copy_folder "react-identicon"
-copy_folder "react-qr"
-copy_folder "ui-assets"
-copy_folder "ui-keyring"
-copy_folder "ui-settings"
-copy_folder "ui-shared"

copy-to-extension.sh

@@ -1,20 +0,0 @@
-#!/bin/bash
-
-function copy_folder () {
-  SRC="packages/$1/build"
-  DST="../extension/node_modules/@polkadot/$1"
-
-  echo "** Copying $SRC to $DST"
-
-  rm -rf $DST
-  cp -r $SRC $DST
-}
-
-yarn polkadot-dev-build-ts
-
-copy_folder "react-identicon"
-copy_folder "react-qr"
-copy_folder "ui-assets"
-copy_folder "ui-keyring"
-copy_folder "ui-settings"
-copy_folder "ui-shared"

docs/.vuepress/config.js

@@ -1,35 +0,0 @@
-module.exports = {
-  base: '/ui/',
-  title: 'polkadot-js/ui',
-  description: 'UI utilities, libraries and React components in use across @polkadot projects',
-  markdown: {
-    lineNumbers: true
-  },
-  themeConfig: {
-    displayAllHeaders: true,
-    nav: [
-      { text: 'Polkadot/Substrate Apps', link: 'https://polkadot.js.org/apps/' },
-      { text: 'Project family', link: 'https://polkadot.js.org/' },
-      {
-        text: 'Documentation',
-        items: [
-          { text: 'API Reference', link: 'https://polkadot.js.org/api/' },
-          { text: 'Utility Reference', link: 'https://polkadot.js.org/common/' },
-          { text: 'UI Libs Reference (this)', link: 'https://polkadot.js.org/ui/' },
-        ]
-      },
-      { text: 'GitHub', link: 'https://github.com/polkadot-js/ui' }
-    ],
-    search: false,
-    sidebar: [
-      ['/react-identicon/', '@polkadot/react-identicon'],
-      ['/react-qr/', '@polkadot/react-qr'],
-      ['/reactnative-identicon/', '@polkadot/reactnative-identicon'],
-      ['/ui-keyring/', '@polkadot/ui-keyring'],
-      ['/ui-settings/', '@polkadot/ui-settings'],
-      ['/ui-shared/', '@polkadot/ui-shared'],
-      ['/vue-identicon/', '@polkadot/vue-identicon'],
-      '/CONTRIBUTING.md'
-    ]
-  }
-};

docs/.vuepress/styles/palette.styl

@@ -1,9 +0,0 @@
-$accentColor = #fd8824
-$textColor = #2c3e50
-
-.home .hero .description,
-.home .feature h2,
-.home .feature p {
-  color: $textColor
-  opacity: 0.75
-}

docs/404.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="initial-scale=0.5, maximum-scale=1">
+    <meta http-equiv="refresh" content="0;URL='https://polkadot.js.org/docs/'" />
+    <title>Redirecting to https://polkadot.js.org/docs/</title>
+  </head>
+  <body>
+    Redirecting to <a href="https://polkadot.js.org/docs/">https://polkadot.js.org/docs/</a>
+  </body>
+</html>

docs/README.md

@@ -1,51 +0,0 @@
----
-home: true
-heroText:
-tagline:
-# Bringing JavaScript to the Polkadot world.
-# actionText: Repository Overview
-# actionLink: /REPOS.md
-features:
-- title: Identicon
-  details: A flexible identity icon generator supporting a number of display styles based on theme.
-- title: Keyring
-  details: An extension to the base keyring that allows for additions such as browser storage.
-- title: Utilities
-  details: Utilities for formatting and working with settings inside any browser-based application.
-
-footer: Apache-2 Licensed | Copyright © 2017-2019 polkadot-js authors and contributors
----
-
-## Welcome
-
-This is a collection of UI libraries, utlities and classes that allows for easier use of the Polkadot JS infrastructure inside your apps.
-
-::: tip Examples
-In a rush and just want examples? [Jump right in](react-identicon/README.md) and get a handle the libraries in your projects.
-:::
-
-## Available packages
-
-This repository split up into a number of internal packages, namely -
-
-- [React Identicon](react-identicon/README.md) Display of identity icons based on theme, also availble for [React Native](reactnative-identicon/README.md) and [Vue](vue-identicon/README.md)
-- [keyring](ui-keyring/README.md) A keyring with browser-specific extensions
-- [settings](ui-settings/README.md) Setting management and defaults
-
-## The Polkadot Project
-
-You can read more about the Polkadot Network at [https://polkadot.network/](https://polkadot.network/) and more about the polkadot-js projects at [https://polkadot.js.org](https://polkadot.js.org)
-
-## Github repositories
-
-You can find the Polkadot repositories at:
-
-- [https://github.com/polkadot-js](https://github.com/polkadot-js)
-- [https://github.com/paritytech/polkadot](https://github.com/paritytech/polkadot)
-- [https://github.com/paritytech/substrate](https://github.com/paritytech/substrate)
-
-This documentation is generated from [https://github.com/polkadot-js/ui](https://github.com/polkadot-js/ui)
-
-## Contributing
-
-Contribution to the Polkadot JS projects are more than welcome. You can [report issues](https://github.com/polkadot-js/ui/issues/new) and [log feature requests](https://github.com/polkadot-js/ui/issues/new).

docs/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="initial-scale=0.5, maximum-scale=1">
+    <meta http-equiv="refresh" content="0;URL='https://polkadot.js.org/docs/'" />
+    <title>Redirecting to https://polkadot.js.org/docs/</title>
+  </head>
+  <body>
+    Redirecting to <a href="https://polkadot.js.org/docs/">https://polkadot.js.org/docs/</a>
+  </body>
+</html>

jest.config.cjs

@@ -0,0 +1,17 @@
+// Copyright 2017-2022 @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.config.js

@@ -1,12 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const config = require('@polkadot/dev-react/config/jest');
-
-module.exports = Object.assign({}, 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',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object',
-    '\\.(css|less)$': 'empty/object'
-  }
-});

jest/setupEnv.js

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

lerna.json

@@ -1,14 +0,0 @@
-{
-  "lerna": "2.11.0",
-  "npmClient": "yarn",
-  "useWorkspaces": true,
-  "command": {
-    "publish": {
-      "allowBranch": "master"
-    }
-  },
-  "packages": [
-    "packages/*"
-  ],
-  "version": "0.44.1"
-}

package.json

@@ -1,36 +1,52 @@
 {
-  "version": "0.44.1",
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "bugs": "https://github.com/polkadot-js/ui/issues",
+  "homepage": "https://github.com/polkadot-js/ui#readme",
+  "license": "Apache-2.0",
+  "packageManager": "yarn@3.2.0",
   "private": true,
-  "engines": {
-    "yarn": "^1.10.1"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/polkadot-js/ui.git"
   },
-  "homepage": ".",
+  "sideEffects": false,
+  "version": "2.6.2",
   "workspaces": [
     "packages/*"
   ],
-  "resolutions": {
-    "babel-core": "^7.0.0-bridge.0",
-    "typescript": "^3.6.3"
-  },
   "scripts": {
-    "build": "polkadot-dev-build-ts && polkadot-dev-build-docs",
-    "check": "yarn lint",
-    "lint": "eslint --ext .js,.jsx,.ts,.tsx . && tsc --noEmit --pretty",
+    "build": "polkadot-dev-build-ts",
+    "build:release": "polkadot-ci-ghact-build",
+    "build:rollup": "polkadot-exec-rollup --config",
     "clean": "polkadot-dev-clean-build",
-    "demo:identicon:react": "webpack-serve --config packages/react-identicon/webpack.config.js --content packages/react-identicon --port 3000",
-    "demo:identicon:vue": "webpack-serve --config packages/vue-identicon/webpack.config.js --content packages/vue-identicon --port 3000",
+    "example:react": "yarn build && cd packages/example-react && webpack --config webpack.config.cjs",
+    "example:vue": "yarn build && cd packages/example-vue && webpack --config webpack.config.cjs",
+    "lint": "polkadot-dev-run-lint",
     "postinstall": "polkadot-dev-yarn-only",
-    "test": "jest --coverage --runInBand",
-    "test:one": "jest"
+    "test": "polkadot-dev-run-test --coverage --runInBand",
+    "test:one": "polkadot-dev-run-test"
   },
   "devDependencies": {
-    "@babel/core": "^7.6.0",
-    "@babel/runtime": "^7.6.0",
-    "@polkadot/dev-react": "^0.31.0-beta.8",
-    "@polkadot/ts": "^0.1.72",
+    "@babel/core": "^7.18.5",
+    "@babel/runtime": "^7.18.3",
+    "@polkadot/dev": "^0.67.42",
+    "@polkadot/x-bundle": "^9.6.2",
+    "@types/jest": "^28.1.3",
+    "babel-loader": "^8.2.5",
     "babel-plugin-transform-vue-template": "^0.4.2",
     "empty": "^0.10.1",
-    "gh-pages": "^2.1.1",
-    "webpack-serve": "^3.1.1"
+    "process": "^0.11.10",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
+    "react-native": "^0.69.0",
+    "stream-browserify": "^3.0.0",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^5.73.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-serve": "^4.0.0"
+  },
+  "resolutions": {
+    "typescript": "^4.7.4"
   }
 }

packages/example-react/LICENSE

@@ -0,0 +1,201 @@
+                              Apache License
+                        Version 2.0, January 2004
+                    http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+  "License" shall mean the terms and conditions for use, reproduction,
+  and distribution as defined by Sections 1 through 9 of this document.
+
+  "Licensor" shall mean the copyright owner or entity authorized by
+  the copyright owner that is granting the License.
+
+  "Legal Entity" shall mean the union of the acting entity and all
+  other entities that control, are controlled by, or are under common
+  control with that entity. For the purposes of this definition,
+  "control" means (i) the power, direct or indirect, to cause the
+  direction or management of such entity, whether by contract or
+  otherwise, or (ii) ownership of fifty percent (50%) or more of the
+  outstanding shares, or (iii) beneficial ownership of such entity.
+
+  "You" (or "Your") shall mean an individual or Legal Entity
+  exercising permissions granted by this License.
+
+  "Source" form shall mean the preferred form for making modifications,
+  including but not limited to software source code, documentation
+  source, and configuration files.
+
+  "Object" form shall mean any form resulting from mechanical
+  transformation or translation of a Source form, including but
+  not limited to compiled object code, generated documentation,
+  and conversions to other media types.
+
+  "Work" shall mean the work of authorship, whether in Source or
+  Object form, made available under the License, as indicated by a
+  copyright notice that is included in or attached to the work
+  (an example is provided in the Appendix below).
+
+  "Derivative Works" shall mean any work, whether in Source or Object
+  form, that is based on (or derived from) the Work and for which the
+  editorial revisions, annotations, elaborations, or other modifications
+  represent, as a whole, an original work of authorship. For the purposes
+  of this License, Derivative Works shall not include works that remain
+  separable from, or merely link (or bind by name) to the interfaces of,
+  the Work and Derivative Works thereof.
+
+  "Contribution" shall mean any work of authorship, including
+  the original version of the Work and any modifications or additions
+  to that Work or Derivative Works thereof, that is intentionally
+  submitted to Licensor for inclusion in the Work by the copyright owner
+  or by an individual or Legal Entity authorized to submit on behalf of
+  the copyright owner. For the purposes of this definition, "submitted"
+  means any form of electronic, verbal, or written communication sent
+  to the Licensor or its representatives, including but not limited to
+  communication on electronic mailing lists, source code control systems,
+  and issue tracking systems that are managed by, or on behalf of, the
+  Licensor for the purpose of discussing and improving the Work, but
+  excluding communication that is conspicuously marked or otherwise
+  designated in writing by the copyright owner as "Not a Contribution."
+
+  "Contributor" shall mean Licensor and any individual or Legal Entity
+  on behalf of whom a Contribution has been received by Licensor and
+  subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+  this License, each Contributor hereby grants to You a perpetual,
+  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+  copyright license to reproduce, prepare Derivative Works of,
+  publicly display, publicly perform, sublicense, and distribute the
+  Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+  this License, each Contributor hereby grants to You a perpetual,
+  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+  (except as stated in this section) patent license to make, have made,
+  use, offer to sell, sell, import, and otherwise transfer the Work,
+  where such license applies only to those patent claims licensable
+  by such Contributor that are necessarily infringed by their
+  Contribution(s) alone or by combination of their Contribution(s)
+  with the Work to which such Contribution(s) was submitted. If You
+  institute patent litigation against any entity (including a
+  cross-claim or counterclaim in a lawsuit) alleging that the Work
+  or a Contribution incorporated within the Work constitutes direct
+  or contributory patent infringement, then any patent licenses
+  granted to You under this License for that Work shall terminate
+  as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+  Work or Derivative Works thereof in any medium, with or without
+  modifications, and in Source or Object form, provided that You
+  meet the following conditions:
+
+  (a) You must give any other recipients of the Work or
+      Derivative Works a copy of this License; and
+
+  (b) You must cause any modified files to carry prominent notices
+      stating that You changed the files; and
+
+  (c) You must retain, in the Source form of any Derivative Works
+      that You distribute, all copyright, patent, trademark, and
+      attribution notices from the Source form of the Work,
+      excluding those notices that do not pertain to any part of
+      the Derivative Works; and
+
+  (d) If the Work includes a "NOTICE" text file as part of its
+      distribution, then any Derivative Works that You distribute must
+      include a readable copy of the attribution notices contained
+      within such NOTICE file, excluding those notices that do not
+      pertain to any part of the Derivative Works, in at least one
+      of the following places: within a NOTICE text file distributed
+      as part of the Derivative Works; within the Source form or
+      documentation, if provided along with the Derivative Works; or,
+      within a display generated by the Derivative Works, if and
+      wherever such third-party notices normally appear. The contents
+      of the NOTICE file are for informational purposes only and
+      do not modify the License. You may add Your own attribution
+      notices within Derivative Works that You distribute, alongside
+      or as an addendum to the NOTICE text from the Work, provided
+      that such additional attribution notices cannot be construed
+      as modifying the License.
+
+  You may add Your own copyright statement to Your modifications and
+  may provide additional or different license terms and conditions
+  for use, reproduction, or distribution of Your modifications, or
+  for any such Derivative Works as a whole, provided Your use,
+  reproduction, and distribution of the Work otherwise complies with
+  the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+  any Contribution intentionally submitted for inclusion in the Work
+  by You to the Licensor shall be under the terms and conditions of
+  this License, without any additional terms or conditions.
+  Notwithstanding the above, nothing herein shall supersede or modify
+  the terms of any separate license agreement you may have executed
+  with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+  names, trademarks, service marks, or product names of the Licensor,
+  except as required for reasonable and customary use in describing the
+  origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+  agreed to in writing, Licensor provides the Work (and each
+  Contributor provides its Contributions) on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+  implied, including, without limitation, any warranties or conditions
+  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+  PARTICULAR PURPOSE. You are solely responsible for determining the
+  appropriateness of using or redistributing the Work and assume any
+  risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+  whether in tort (including negligence), contract, or otherwise,
+  unless required by applicable law (such as deliberate and grossly
+  negligent acts) or agreed to in writing, shall any Contributor be
+  liable to You for damages, including any direct, indirect, special,
+  incidental, or consequential damages of any character arising as a
+  result of this License or out of the use or inability to use the
+  Work (including but not limited to damages for loss of goodwill,
+  work stoppage, computer failure or malfunction, or any and all
+  other commercial damages or losses), even if such Contributor
+  has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+  the Work or Derivative Works thereof, You may choose to offer,
+  and charge a fee for, acceptance of support, warranty, indemnity,
+  or other liability obligations and/or rights consistent with this
+  License. However, in accepting such obligations, You may act only
+  on Your own behalf and on Your sole responsibility, not on behalf
+  of any other Contributor, and only if You agree to indemnify,
+  defend, and hold each Contributor harmless for any liability
+  incurred by, or claims asserted against, such Contributor by reason
+  of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+  To apply the Apache License to your work, attach the following
+  boilerplate notice, with the fields enclosed by brackets "[]"
+  replaced with your own identifying information. (Don't include
+  the brackets!)  The text should be enclosed in the appropriate
+  comment syntax for the file format. We also recommend that a
+  file or class name and description of purpose be included on the
+  same "printed page" as the copyright notice for easier
+  identification within third-party archives.
+
+Copyright [yyyy] [name of copyright owner]
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

packages/example-react/README.md

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

packages/example-react/index.html

@@ -0,0 +1,37 @@
+<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

@@ -0,0 +1,22 @@
+{
+  "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.6.2",
+  "main": "index.js",
+  "dependencies": {
+    "@babel/runtime": "^7.18.3"
+  }
+}

packages/example-react/src/detectOther.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2022 @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

@@ -0,0 +1,11 @@
+// Copyright 2017-2022 @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

@@ -0,0 +1,121 @@
+// Copyright 2017-2022 @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

@@ -0,0 +1,6 @@
+// Copyright 2017-2022 @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.6.2' };

packages/example-react/tsconfig.build.json

@@ -0,0 +1,12 @@
+{
+  "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

@@ -0,0 +1,53 @@
+// Copyright 2017-2022 @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/LICENSE

@@ -0,0 +1,201 @@
+                              Apache License
+                        Version 2.0, January 2004
+                    http://www.apache.org/licenses/
+
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+1. Definitions.
+
+  "License" shall mean the terms and conditions for use, reproduction,
+  and distribution as defined by Sections 1 through 9 of this document.
+
+  "Licensor" shall mean the copyright owner or entity authorized by
+  the copyright owner that is granting the License.
+
+  "Legal Entity" shall mean the union of the acting entity and all
+  other entities that control, are controlled by, or are under common
+  control with that entity. For the purposes of this definition,
+  "control" means (i) the power, direct or indirect, to cause the
+  direction or management of such entity, whether by contract or
+  otherwise, or (ii) ownership of fifty percent (50%) or more of the
+  outstanding shares, or (iii) beneficial ownership of such entity.
+
+  "You" (or "Your") shall mean an individual or Legal Entity
+  exercising permissions granted by this License.
+
+  "Source" form shall mean the preferred form for making modifications,
+  including but not limited to software source code, documentation
+  source, and configuration files.
+
+  "Object" form shall mean any form resulting from mechanical
+  transformation or translation of a Source form, including but
+  not limited to compiled object code, generated documentation,
+  and conversions to other media types.
+
+  "Work" shall mean the work of authorship, whether in Source or
+  Object form, made available under the License, as indicated by a
+  copyright notice that is included in or attached to the work
+  (an example is provided in the Appendix below).
+
+  "Derivative Works" shall mean any work, whether in Source or Object
+  form, that is based on (or derived from) the Work and for which the
+  editorial revisions, annotations, elaborations, or other modifications
+  represent, as a whole, an original work of authorship. For the purposes
+  of this License, Derivative Works shall not include works that remain
+  separable from, or merely link (or bind by name) to the interfaces of,
+  the Work and Derivative Works thereof.
+
+  "Contribution" shall mean any work of authorship, including
+  the original version of the Work and any modifications or additions
+  to that Work or Derivative Works thereof, that is intentionally
+  submitted to Licensor for inclusion in the Work by the copyright owner
+  or by an individual or Legal Entity authorized to submit on behalf of
+  the copyright owner. For the purposes of this definition, "submitted"
+  means any form of electronic, verbal, or written communication sent
+  to the Licensor or its representatives, including but not limited to
+  communication on electronic mailing lists, source code control systems,
+  and issue tracking systems that are managed by, or on behalf of, the
+  Licensor for the purpose of discussing and improving the Work, but
+  excluding communication that is conspicuously marked or otherwise
+  designated in writing by the copyright owner as "Not a Contribution."
+
+  "Contributor" shall mean Licensor and any individual or Legal Entity
+  on behalf of whom a Contribution has been received by Licensor and
+  subsequently incorporated within the Work.
+
+2. Grant of Copyright License. Subject to the terms and conditions of
+  this License, each Contributor hereby grants to You a perpetual,
+  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+  copyright license to reproduce, prepare Derivative Works of,
+  publicly display, publicly perform, sublicense, and distribute the
+  Work and such Derivative Works in Source or Object form.
+
+3. Grant of Patent License. Subject to the terms and conditions of
+  this License, each Contributor hereby grants to You a perpetual,
+  worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+  (except as stated in this section) patent license to make, have made,
+  use, offer to sell, sell, import, and otherwise transfer the Work,
+  where such license applies only to those patent claims licensable
+  by such Contributor that are necessarily infringed by their
+  Contribution(s) alone or by combination of their Contribution(s)
+  with the Work to which such Contribution(s) was submitted. If You
+  institute patent litigation against any entity (including a
+  cross-claim or counterclaim in a lawsuit) alleging that the Work
+  or a Contribution incorporated within the Work constitutes direct
+  or contributory patent infringement, then any patent licenses
+  granted to You under this License for that Work shall terminate
+  as of the date such litigation is filed.
+
+4. Redistribution. You may reproduce and distribute copies of the
+  Work or Derivative Works thereof in any medium, with or without
+  modifications, and in Source or Object form, provided that You
+  meet the following conditions:
+
+  (a) You must give any other recipients of the Work or
+      Derivative Works a copy of this License; and
+
+  (b) You must cause any modified files to carry prominent notices
+      stating that You changed the files; and
+
+  (c) You must retain, in the Source form of any Derivative Works
+      that You distribute, all copyright, patent, trademark, and
+      attribution notices from the Source form of the Work,
+      excluding those notices that do not pertain to any part of
+      the Derivative Works; and
+
+  (d) If the Work includes a "NOTICE" text file as part of its
+      distribution, then any Derivative Works that You distribute must
+      include a readable copy of the attribution notices contained
+      within such NOTICE file, excluding those notices that do not
+      pertain to any part of the Derivative Works, in at least one
+      of the following places: within a NOTICE text file distributed
+      as part of the Derivative Works; within the Source form or
+      documentation, if provided along with the Derivative Works; or,
+      within a display generated by the Derivative Works, if and
+      wherever such third-party notices normally appear. The contents
+      of the NOTICE file are for informational purposes only and
+      do not modify the License. You may add Your own attribution
+      notices within Derivative Works that You distribute, alongside
+      or as an addendum to the NOTICE text from the Work, provided
+      that such additional attribution notices cannot be construed
+      as modifying the License.
+
+  You may add Your own copyright statement to Your modifications and
+  may provide additional or different license terms and conditions
+  for use, reproduction, or distribution of Your modifications, or
+  for any such Derivative Works as a whole, provided Your use,
+  reproduction, and distribution of the Work otherwise complies with
+  the conditions stated in this License.
+
+5. Submission of Contributions. Unless You explicitly state otherwise,
+  any Contribution intentionally submitted for inclusion in the Work
+  by You to the Licensor shall be under the terms and conditions of
+  this License, without any additional terms or conditions.
+  Notwithstanding the above, nothing herein shall supersede or modify
+  the terms of any separate license agreement you may have executed
+  with Licensor regarding such Contributions.
+
+6. Trademarks. This License does not grant permission to use the trade
+  names, trademarks, service marks, or product names of the Licensor,
+  except as required for reasonable and customary use in describing the
+  origin of the Work and reproducing the content of the NOTICE file.
+
+7. Disclaimer of Warranty. Unless required by applicable law or
+  agreed to in writing, Licensor provides the Work (and each
+  Contributor provides its Contributions) on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+  implied, including, without limitation, any warranties or conditions
+  of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+  PARTICULAR PURPOSE. You are solely responsible for determining the
+  appropriateness of using or redistributing the Work and assume any
+  risks associated with Your exercise of permissions under this License.
+
+8. Limitation of Liability. In no event and under no legal theory,
+  whether in tort (including negligence), contract, or otherwise,
+  unless required by applicable law (such as deliberate and grossly
+  negligent acts) or agreed to in writing, shall any Contributor be
+  liable to You for damages, including any direct, indirect, special,
+  incidental, or consequential damages of any character arising as a
+  result of this License or out of the use or inability to use the
+  Work (including but not limited to damages for loss of goodwill,
+  work stoppage, computer failure or malfunction, or any and all
+  other commercial damages or losses), even if such Contributor
+  has been advised of the possibility of such damages.
+
+9. Accepting Warranty or Additional Liability. While redistributing
+  the Work or Derivative Works thereof, You may choose to offer,
+  and charge a fee for, acceptance of support, warranty, indemnity,
+  or other liability obligations and/or rights consistent with this
+  License. However, in accepting such obligations, You may act only
+  on Your own behalf and on Your sole responsibility, not on behalf
+  of any other Contributor, and only if You agree to indemnify,
+  defend, and hold each Contributor harmless for any liability
+  incurred by, or claims asserted against, such Contributor by reason
+  of your accepting any such warranty or additional liability.
+
+END OF TERMS AND CONDITIONS
+
+APPENDIX: How to apply the Apache License to your work.
+
+  To apply the Apache License to your work, attach the following
+  boilerplate notice, with the fields enclosed by brackets "[]"
+  replaced with your own identifying information. (Don't include
+  the brackets!)  The text should be enclosed in the appropriate
+  comment syntax for the file format. We also recommend that a
+  file or class name and description of purpose be included on the
+  same "printed page" as the copyright notice for easier
+  identification within third-party archives.
+
+Copyright [yyyy] [name of copyright owner]
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

packages/example-vue/README.md

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

packages/example-vue/index.html

@@ -0,0 +1,38 @@
+<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

@@ -0,0 +1,22 @@
+{
+  "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.6.2",
+  "main": "index.js",
+  "dependencies": {
+    "@babel/runtime": "^7.18.3"
+  }
+}

packages/example-vue/src/detectOther.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2022 @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

@@ -0,0 +1,11 @@
+// Copyright 2017-2022 @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

@@ -0,0 +1,99 @@
+// Copyright 2017-2022 @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

@@ -0,0 +1,6 @@
+// Copyright 2017-2022 @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.6.2' };

packages/example-vue/tsconfig.build.json

@@ -0,0 +1,12 @@
+{
+  "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

@@ -0,0 +1,52 @@
+// Copyright 2017-2022 @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/index.html

@@ -12,6 +12,6 @@
   </head>
   <body>
     <div id="demo"></div>
-    <script src="./demo.js"></script>
+    <script src="./build/Demo.js"></script>
   </body>
 </html>

packages/react-identicon/package.json

@@ -1,32 +1,51 @@
 {
-  "name": "@polkadot/react-identicon",
-  "version": "0.44.1",
-  "description": "Renders an SVG picture representing an address",
-  "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
+  "bugs": "https://github.com/polkadot-js/ui/issues",
+  "contributors": [],
+  "description": "Renders an SVG picture representing an address",
+  "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",
+    "type": "git",
+    "url": "https://github.com/polkadot-js/ui.git"
+  },
+  "sideEffects": [
+    "./detectPackage.js",
+    "./detectPackage.cjs"
+  ],
+  "type": "module",
+  "version": "2.6.2",
+  "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.6.0",
-    "@polkadot/ui-settings": "^0.44.1",
-    "@polkadot/ui-shared": "^0.44.1",
-    "@types/color": "^3.0.0",
-    "@types/react-copy-to-clipboard": "^4.2.6",
-    "color": "^3.1.2",
-    "jdenticon": "2.2.0",
-    "react-copy-to-clipboard": "^5.0.1",
-    "styled-components": "^4.3.1"
+    "@babel/runtime": "^7.18.3",
+    "@polkadot/keyring": "^9.6.2",
+    "@polkadot/ui-settings": "2.6.2",
+    "@polkadot/ui-shared": "2.6.2",
+    "@polkadot/util": "^9.6.2",
+    "@polkadot/util-crypto": "^9.6.2",
+    "color": "^3.2.1",
+    "ethereum-blockies-base64": "^1.0.2",
+    "jdenticon": "3.1.1",
+    "react-copy-to-clipboard": "^5.1.0",
+    "styled-components": "^5.3.5"
+  },
+  "devDependencies": {
+    "@types/react-copy-to-clipboard": "^5.0.2",
+    "@types/react-dom": "^18.0.5",
+    "@types/styled-components": "^5.1.25",
+    "styled-components": "^5.3.5",
+    "xmlserializer": "^0.6.1"
   },
   "peerDependencies": {
     "@polkadot/keyring": "*",
+    "@polkadot/util": "*",
     "@polkadot/util-crypto": "*",
-    "react": "*"
-  },
-  "devDependencies": {
-    "@polkadot/keyring": "^1.4.1",
-    "@polkadot/util-crypto": "^1.4.1",
-    "xmlserializer": "^0.6.1"
+    "react": "*",
+    "react-dom": "*",
+    "react-is": "*",
+    "styled-components": "*"
   }
 }

packages/react-identicon/src/Demo.tsx

@@ -1,37 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { encodeAddress, randomAsU8a } from '@polkadot/util-crypto';
-
-import IdentityIcon from '.';
-
-export default class Demo extends React.PureComponent {
-  public render (): React.ReactNode {
-    const identities: string[] = [];
-
-    while (identities.length !== 50) {
-      identities.push(
-        encodeAddress(randomAsU8a(32))
-      );
-    }
-
-    return identities.map((value): React.ReactNode => (
-      <IdentityIcon
-        key={value.toString()}
-        theme='jdenticon'
-        value={value}
-      />
-    ));
-  }
-}
-
-const rootElement = document.getElementById('demo');
-
-if (!rootElement) {
-  throw new Error('Unable to find element with id \'demo\'');
-}
-
-ReactDOM.render(<Demo />, rootElement);

packages/react-identicon/src/Identicon.tsx

@@ -1,18 +1,18 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Prefix } from '@polkadot/util-crypto/address/types';
-import { IdentityProps as Props, Props as ComponentProps } from './types';
+import type { Prefix } from '@polkadot/util-crypto/address/types';
+import type { IdentityProps as Props, Props as ComponentProps } from './types';
 
 import React from 'react';
 import CopyToClipboard from 'react-copy-to-clipboard';
 import styled from 'styled-components';
-import settings from '@polkadot/ui-settings';
-import { isHex, isU8a, u8aToHex } from '@polkadot/util';
-import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
-import { Beachball, Empty, Jdenticon, Polkadot } from './icons';
+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';
 
 const Fallback = Beachball;
 
@@ -25,10 +25,12 @@ const DEFAULT_SIZE = 64;
 const Components: Record<string, React.ComponentType<ComponentProps>> = {
   beachball: Beachball,
   empty: Empty,
+  ethereum: Ethereum,
   jdenticon: Jdenticon,
   polkadot: Polkadot,
   substrate: Jdenticon
 };
+
 const Wrapper = styled.div`
   cursor: copy;
   display: inline-block;
@@ -42,25 +44,21 @@ const Wrapper = styled.div`
       position: relative;
     }
 
-    &:before {
+    &.highlight:before {
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       border-radius: 50%;
-      box-shadow: 0 0 5px 2px #e0e0e0;
+      box-shadow: 0 0 5px 2px #aaa;
       content: '';
     }
-
-    &.highlight:before {
-      box-shadow: 0 0 5px 2px red;
-    }
   }
 `;
 
-export default class IdentityIcon extends React.PureComponent<Props, State> {
-  public state: State = {
+class BaseIcon extends React.PureComponent<Props, State> {
+  public override state: State = {
     address: '',
     publicKey: '0x'
   };
@@ -68,10 +66,18 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
   private static prefix?: Prefix = undefined;
 
   public static setDefaultPrefix (prefix: Prefix): void {
-    IdentityIcon.prefix = prefix;
+    BaseIcon.prefix = prefix;
   }
 
-  public static getDerivedStateFromProps ({ prefix = IdentityIcon.prefix, value }: Props, prevState: State): State | null {
+  public static getDerivedStateFromProps ({ prefix = BaseIcon.prefix, theme, value }: Props, prevState: State): State | null {
+    if (theme === 'ethereum') {
+      const address = isU8a(value)
+        ? ethereumEncode(value)
+        : value || '';
+
+      return { address, publicKey: '' };
+    }
+
     try {
       const address = isU8a(value) || isHex(value)
         ? encodeAddress(value, prefix)
@@ -92,9 +98,9 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
     }
   }
 
-  public render (): React.ReactNode {
+  public override render (): React.ReactNode {
     const { address } = this.state;
-    const wrapped = this.getWrapped(this.state);
+    const wrapped = this.getWrapped(this.state, this.props);
 
     return !address
       ? wrapped
@@ -108,21 +114,22 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
       );
   }
 
-  private getWrapped ({ address, publicKey }: State): React.ReactNode {
-    const { className, isHighlight = false, size = DEFAULT_SIZE, style, theme = settings.uiTheme } = this.props;
+  private getWrapped ({ address, publicKey }: State, { Custom }: Props): React.ReactNode {
+    const { className = '', isAlternative, isHighlight, size = DEFAULT_SIZE, style, theme = settings.icon } = this.props;
     const Component = !address
       ? Empty
-      : Components[theme] || Fallback;
+      : Custom || Components[theme === 'default' ? ICON_DEFAULT_HOST : theme] || Fallback;
 
     return (
       <Wrapper
-        className={`ui--IdentityIcon ${className}`}
+        className={`ui--IdentityIcon  ${className}`}
         key={address}
         style={style}
       >
         <Component
           address={address}
           className={isHighlight ? 'highlight' : ''}
+          isAlternative={isAlternative}
           publicKey={publicKey}
           size={size}
         />
@@ -137,5 +144,11 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
     if (address && onCopy) {
       onCopy(address);
     }
-  }
+  };
 }
+
+function Icon (props: Props): React.ReactElement<Props> {
+  return <BaseIcon {...props} />;
+}
+
+export const Identicon = React.memo(Icon);

packages/react-identicon/src/bundle.ts

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

packages/react-identicon/src/detectOther.ts

@@ -0,0 +1,7 @@
+// Copyright 2017-2022 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { packageInfo as settingsInfo } from '@polkadot/ui-settings/packageInfo';
+import { packageInfo as sharedInfo } from '@polkadot/ui-shared/packageInfo';
+
+export default [settingsInfo, sharedInfo];

packages/react-identicon/src/detectPackage.ts

@@ -0,0 +1,11 @@
+// Copyright 2017-2022 @polkadot/react-identicon 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/react-identicon/src/icons/Beachball.tsx

@@ -1,32 +1,29 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Props } from '../types';
+import type { Props } from '../types';
 
-import React from 'react';
-import generate from '@polkadot/ui-shared/beachballIcon';
+import React, { useCallback } from 'react';
 
-export default class Beachball extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, style } = this.props;
+import { beachballIcon } from '@polkadot/ui-shared';
 
-    return (
-      <div
-        className={`container ${className}`}
-        ref={this.appendIcon}
-        style={style}
-      />
-    );
-  }
-
-  private appendIcon = (node: Element | null): void => {
-    const { address, size } = this.props;
-
-    if (node) {
-      node.appendChild(
-        generate(address, size)
+function Identicon ({ address, className = '', size, style }: Props): React.ReactElement<Props> {
+  const updateElem = useCallback(
+    (node: HTMLDivElement): void => {
+      node && node.appendChild(
+        beachballIcon(address, { isAlternative: false, size })
       );
-    }
-  }
+    },
+    [address, size]
+  );
+
+  return (
+    <div
+      className={className}
+      ref={updateElem}
+      style={style}
+    />
+  );
 }
+
+export const Beachball = React.memo(Identicon);

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

@@ -1,26 +1,20 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Props } from '../types';
+import type { Props } from '../types';
 
 import React from 'react';
 
-export default class Empty extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, size, style } = this.props;
-
-    return (
-      <div
-        className={`container ${className}`}
-        style={style}
-      >
-        <svg
-          height={size}
-          viewBox='0 0 64 64'
-          width={size}
-        />
-      </div>
-    );
-  }
+function Identicon ({ className = '', size, style }: Props): React.ReactElement<Props> {
+  return (
+    <svg
+      className={className}
+      height={size}
+      style={style}
+      viewBox='0 0 64 64'
+      width={size}
+    />
+  );
 }
+
+export const Empty = React.memo(Identicon);

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

@@ -0,0 +1,29 @@
+// Copyright 2017-2022 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Props } from '../types';
+
+import makeBlockie from 'ethereum-blockies-base64';
+import React, { useMemo } from 'react';
+import styled from 'styled-components';
+
+function Identicon ({ address, className = '', style }: Props): React.ReactElement<Props> {
+  const imgSrc = useMemo(
+    () => makeBlockie(address),
+    [address]
+  );
+
+  return (
+    <img
+      className={className}
+      src={imgSrc}
+      style={style}
+    />
+  );
+}
+
+export const Ethereum = React.memo(styled(Identicon)(({ size }: Props) => `
+  display: block;
+  height: ${size}px;
+  width: ${size}px;
+`));

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

@@ -1,24 +1,24 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Props } from '../types';
+import type { Props } from '../types';
 
-import React from 'react';
-import jdenticon from 'jdenticon';
+import * as jdenticon from 'jdenticon';
+import React, { useMemo } from 'react';
 
-export default class Jdenticon extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, publicKey, size, style } = this.props;
+function Identicon ({ className = '', publicKey, size, style }: Props): React.ReactElement<Props> {
+  const html = useMemo(
+    () => ({ __html: jdenticon.toSvg(publicKey.substr(2), size) }),
+    [publicKey, size]
+  );
 
-    return (
-      <div
-        className={`container ${className}`}
-        style={style}
-        dangerouslySetInnerHTML={ {
-          __html: jdenticon.toSvg(publicKey.substr(2), size)
-        } }
-      />
-    );
-  }
+  return (
+    <div
+      className={className}
+      dangerouslySetInnerHTML={html}
+      style={style}
+    />
+  );
 }
+
+export const Jdenticon = React.memo(Identicon);

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

@@ -1,7 +1,7 @@
+// Copyright 2018-2022 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
 // Copyright 2018 Paritytech via paritytech/oo7/polkadot-identicon
-// Copyright 2018 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
 
 // This has been converted from the original version that can be found at
 //
@@ -16,46 +16,44 @@
 //   - Move constants to file-level
 //   - Overall it is now just a static component, expecting an address as an input value
 
-import { Props as BaseProps } from '../types';
+import type { Circle } from '@polkadot/ui-shared/icons/types';
+import type { Props } from '../types';
 
-import React from 'react';
-import generateIcon, { Circle } from '@polkadot/ui-shared/polkadotIcon';
+import React, { useMemo } from 'react';
 
-interface Props extends BaseProps {
-  sixPoint?: boolean;
+import { polkadotIcon } from '@polkadot/ui-shared';
+
+function renderCircle ({ cx, cy, fill, r }: Circle, key: number): React.ReactNode {
+  return (
+    <circle
+      cx={cx}
+      cy={cy}
+      fill={fill}
+      key={key}
+      r={r}
+    />
+  );
 }
 
-export default class Identicon extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { address, className, sixPoint, size, style } = this.props;
+function Identicon ({ address, className = '', isAlternative = false, size, style }: Props): React.ReactElement<Props> {
+  const circles = useMemo(
+    () => polkadotIcon(address, { isAlternative }),
+    [address, isAlternative]
+  );
 
-    return (
-      <div
-        className={`container ${className}`}
-        style={style}
-      >
-        <svg
-          id={address}
-          name={address}
-          width={size}
-          height={size}
-          viewBox='0 0 64 64'
-        >
-          {generateIcon(address, sixPoint).map(this.renderCircle)}
-        </svg>
-      </div>
-    );
-  }
-
-  private renderCircle = ({ cx, cy, r, fill }: Circle, key: number): React.ReactNode => {
-    return (
-      <circle
-        key={key}
-        cx={cx}
-        cy={cy}
-        r={r}
-        fill={fill}
-      />
-    );
-  }
+  return (
+    <svg
+      className={className}
+      height={size}
+      id={address}
+      name={address}
+      style={style}
+      viewBox='0 0 64 64'
+      width={size}
+    >
+      {circles.map(renderCircle)}
+    </svg>
+  );
 }
+
+export const Polkadot = React.memo(Identicon);

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

@@ -1,8 +1,8 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-export { default as Beachball } from './Beachball';
-export { default as Empty } from './Empty';
-export { default as Jdenticon } from './Jdenticon';
-export { default as Polkadot } from './Polkadot';
+export { Beachball } from './Beachball';
+export { Empty } from './Empty';
+export { Ethereum } from './Ethereum';
+export { Jdenticon } from './Jdenticon';
+export { Polkadot } from './Polkadot';

packages/react-identicon/src/index.ts

@@ -1,8 +1,10 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import Identicon from './Identicon';
-export * from './icons';
+import './detectPackage';
+
+import { Identicon } from './bundle';
+
+export * from './bundle';
 
 export default Identicon;

packages/react-identicon/src/packageInfo.ts

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

packages/react-identicon/src/types.ts

@@ -1,25 +1,33 @@
-// Copyright 2018 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2018-2022 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Prefix } from '@polkadot/util-crypto/address/types';
+import type { Prefix } from '@polkadot/util-crypto/address/types';
+
+import React from 'react';
 
 export interface BaseProps {
   className?: string;
-  style?: Record<string, string | number>;
+  style?: React.CSSProperties;
 }
 
 export interface Props extends BaseProps {
   address: string;
+  isAlternative?: boolean;
+  className?: string;
   publicKey: string;
   size: number;
+  style?: React.CSSProperties;
 }
 
 export interface IdentityProps extends BaseProps {
+  Custom?: React.ComponentType<Props>;
+  isAlternative?: boolean;
   isHighlight?: boolean;
   onCopy?: (value: string) => void;
   prefix?: Prefix;
   size?: number;
-  theme?: 'beachball' | 'empty' | 'jdenticon' | 'polkadot' | 'substrate';
+  theme?: IconTheme;
   value?: string | Uint8Array | null;
 }
+
+export type IconTheme = 'beachball' | 'empty' | 'ethereum' | 'jdenticon' | 'polkadot' | 'substrate';

packages/react-identicon/tsconfig.build.json

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

packages/react-identicon/webpack.config.js

@@ -1,38 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-identicon authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const path = require('path');
-
-const ENV = process.env.NODE_ENV || 'development';
-const isProd = ENV === 'production';
-
-module.exports = {
-  context: __dirname,
-  devtool: isProd ? 'source-map' : 'cheap-eval-source-map',
-  entry: './src/Demo.tsx',
-  mode: ENV,
-  output: {
-    path: __dirname,
-    filename: './demo.js'
-  },
-  resolve: {
-    alias: {
-      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/src')
-    },
-    extensions: ['.js', '.jsx', '.ts', '.tsx']
-  },
-  module: {
-    rules: [
-      {
-        test: /\.(js|ts|tsx)$/,
-        exclude: /(node_modules)/,
-        use: [
-          'babel-loader'
-        ]
-      }
-    ]
-  },
-  plugins: []
-};

packages/react-qr/package.json

@@ -1,17 +1,42 @@
 {
-  "name": "@polkadot/react-qr",
-  "version": "0.44.1",
-  "description": "Generates and reads QR codes",
-  "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
+  "bugs": "https://github.com/polkadot-js/ui/issues",
+  "contributors": [],
+  "description": "Generates and reads QR codes",
+  "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",
+    "type": "git",
+    "url": "https://github.com/polkadot-js/ui.git"
+  },
+  "sideEffects": [
+    "./detectPackage.js",
+    "./detectPackage.cjs"
+  ],
+  "type": "module",
+  "version": "2.6.2",
+  "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.6.0",
-    "@types/react-qr-reader": "^2.1.1",
-    "qrcode-generator": "^1.4.3",
-    "react-qr-reader": "^2.2.1"
+    "@babel/runtime": "^7.18.3",
+    "@polkadot/ui-settings": "2.6.2",
+    "@polkadot/util": "^9.6.2",
+    "@polkadot/util-crypto": "^9.6.2",
+    "qrcode-generator": "^1.4.4",
+    "react-qr-reader": "^2.2.1",
+    "styled-components": "^5.3.5"
+  },
+  "devDependencies": {
+    "@types/react-qr-reader": "^2.1.4",
+    "@types/styled-components": "^5.1.25"
+  },
+  "peerDependencies": {
+    "@polkadot/util": "*",
+    "@polkadot/util-crypto": "*",
+    "react": "*",
+    "react-dom": "*",
+    "styled-components": "*"
   }
 }

packages/react-qr/src/Display.tsx

@@ -1,131 +1,140 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
-
-import React from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import styled from 'styled-components';
+
+import { objectSpread } from '@polkadot/util';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
-import qrcode from './qrcode';
+import { qrcode } from './qrcode';
 import { createFrames, createImgSize } from './util';
 
-interface Props extends BaseProps {
+interface Props {
+  className?: string;
+  size?: string | number;
   skipEncoding?: boolean;
+  style?: React.CSSProperties;
+  timerDelay?: number;
   value: Uint8Array;
 }
 
-interface State {
+interface FrameState {
   frames: Uint8Array[];
   frameIdx: number;
   image: string | null;
-  timerId: number | null;
   valueHash: string | null;
 }
 
-const FRAME_DELAY = 2100;
+interface TimerState {
+  timerDelay: number;
+  timerId: number | null;
+}
+
+const DEFAULT_FRAME_DELAY = 2750;
+const TIMER_INC = 500;
 
 function getDataUrl (value: Uint8Array): string {
   const qr = qrcode(0, 'M');
 
-  // HACK See out qrcode stringToBytes override as used internally. This
-  // will only work for the case where we actuall pass `Bytes` in here
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  qr.addData(value as any, 'Byte');
+  // HACK See our qrcode stringToBytes override as used internally. This
+  // will only work for the case where we actually pass `Bytes` in here
+  qr.addData(value as unknown as string, 'Byte');
   qr.make();
 
   return qr.createDataURL(16, 0);
 }
 
-class Display extends React.PureComponent<Props, State> {
-  public state: State = {
-    frames: [],
-    frameIdx: 0,
-    image: null,
-    timerId: null,
-    valueHash: 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 });
 
-  public static getDerivedStateFromProps ({ value, skipEncoding = false }: Props, prevState: State): Pick<State, never> | null {
-    const valueHash = xxhashAsHex(value);
+  const containerStyle = useMemo(
+    () => createImgSize(size),
+    [size]
+  );
 
-    if (valueHash === prevState.valueHash) {
-      return null;
-    }
+  // run on initial load to setup the global timer and provide and unsubscribe
+  useEffect((): () => void => {
+    const nextFrame = () => setFrameState((state): FrameState => {
+      // when we have a single frame, we only ever fire once
+      if (state.frames.length <= 1) {
+        return state;
+      }
 
-    const frames: Uint8Array[] = skipEncoding
-      ? [value]
-      : createFrames(value);
+      let frameIdx = state.frameIdx + 1;
 
-    // encode on demand
-    return {
-      frames,
-      frameIdx: 0,
-      image: getDataUrl(frames[0]),
-      valueHash
+      // when we overflow, skip to the first and slightly increase the delay between frames
+      if (frameIdx === state.frames.length) {
+        frameIdx = 0;
+        timerRef.current.timerDelay = timerRef.current.timerDelay + TIMER_INC;
+      }
+
+      // only encode the frames on demand, not above as part of the
+      // state derivation - in the case of large payloads, this should
+      // be slightly more responsive on initial load
+      const newState = objectSpread<FrameState>({}, state, {
+        frameIdx,
+        image: getDataUrl(state.frames[frameIdx])
+      });
+
+      // set the new timer last
+      timerRef.current.timerId = setTimeout(nextFrame, timerRef.current.timerDelay);
+
+      return newState;
+    });
+
+    timerRef.current.timerId = window.setTimeout(nextFrame, timerRef.current.timerDelay);
+
+    return (): void => {
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+      timerRef.current.timerId && clearTimeout(timerRef.current.timerId);
     };
-  }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
-  public componentDidMount (): void {
-    this.setState({
-      timerId: window.setInterval(this.nextFrame, FRAME_DELAY)
+  useEffect((): void => {
+    setFrameState((state): FrameState => {
+      const valueHash = xxhashAsHex(value);
+
+      if (valueHash === state.valueHash) {
+        return state;
+      }
+
+      const frames: Uint8Array[] = skipEncoding
+        ? [value]
+        : createFrames(value);
+
+      // encode on demand
+      return {
+        frameIdx: 0,
+        frames,
+        image: getDataUrl(frames[0]),
+        valueHash
+      };
     });
+  }, [skipEncoding, value]);
+
+  if (!image) {
+    return null;
   }
 
-  public componentWillUnmount (): void {
-    const { timerId } = this.state;
-
-    if (timerId) {
-      clearInterval(timerId);
-    }
-  }
-
-  public render (): React.ReactNode {
-    const { className, size, style } = this.props;
-    const { image } = this.state;
-
-    if (!image) {
-      return null;
-    }
-
-    return (
+  return (
+    <div
+      className={className}
+      style={containerStyle}
+    >
       <div
-        className={className}
-        style={createImgSize(size)}
+        className='ui--qr-Display'
+        style={style}
       >
-        <div
-          className='ui--qr-Display'
-          style={style}
-        >
-          <img src={image} />
-        </div>
+        <img src={image} />
       </div>
-    );
-  }
-
-  private nextFrame = (): void => {
-    const { frames, frameIdx } = this.state;
-
-    if (!frames || frames.length <= 1) {
-      return;
-    }
-
-    const nextIdx = frameIdx === frames.length - 1
-      ? 0
-      : frameIdx + 1;
-
-    // only encode the frames on demand, not above as part of the
-    // state derivation - in the case of large payloads, this should
-    // be slightly more responsive on initial load
-    this.setState({
-      frameIdx: nextIdx,
-      image: getDataUrl(frames[nextIdx])
-    });
-  }
+    </div>
+  );
 }
 
-export default styled(Display as React.ComponentClass<Props>)`
+export const QrDisplay = React.memo(styled(Display)`
   .ui--qr-Display {
     height: 100%;
     width: 100%;
@@ -139,4 +148,4 @@ export default styled(Display as React.ComponentClass<Props>)`
       width: auto !important;
     }
   }
-`;
+`);

packages/react-qr/src/DisplayAddress.tsx

@@ -1,58 +1,40 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
-
-import React from 'react';
-import { xxhashAsHex } from '@polkadot/util-crypto';
+import React, { useMemo } from 'react';
 
+import { QrDisplay } from './Display';
 import { createAddressPayload } from './util';
-import QrDisplay from './Display';
 
-interface Props extends BaseProps {
+interface Props {
   address: string;
   genesisHash: string;
+  className?: string;
+  size?: string | number;
+  style?: React.CSSProperties;
+  timerDelay?: number;
 }
 
-interface State {
-  data: Uint8Array | null;
-  dataHash: string | null;
-}
+function DisplayAddress ({ address, className, genesisHash, size, style, timerDelay }: Props): React.ReactElement<Props> | null {
+  const data = useMemo(
+    () => createAddressPayload(address, genesisHash),
+    [address, genesisHash]
+  );
 
-export default class DisplayExtrinsic extends React.PureComponent<Props, State> {
-  public state: State = {
-    data: null,
-    dataHash: null
-  };
-
-  public static getDerivedStateFromProps ({ address, genesisHash }: Props, prevState: State): State | null {
-    const data = createAddressPayload(address, genesisHash);
-    const dataHash = xxhashAsHex(data);
-
-    if (dataHash === prevState.dataHash) {
-      return null;
-    }
-
-    return { data, dataHash };
+  if (!data) {
+    return null;
   }
 
-  public render (): React.ReactNode {
-    const { className, size, style } = this.props;
-    const { data } = this.state;
-
-    if (!data) {
-      return null;
-    }
-
-    return (
-      <QrDisplay
-        className={className}
-        skipEncoding={true}
-        size={size}
-        style={style}
-        value={data}
-      />
-    );
-  }
+  return (
+    <QrDisplay
+      className={className}
+      size={size}
+      skipEncoding
+      style={style}
+      timerDelay={timerDelay}
+      value={data}
+    />
+  );
 }
+
+export const QrDisplayAddress = React.memo(DisplayAddress);

packages/react-qr/src/DisplayPayload.tsx

@@ -1,58 +1,42 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
-
-import React from 'react';
-import { xxhashAsHex } from '@polkadot/util-crypto';
+import React, { useMemo } from 'react';
 
+import { QrDisplay } from './Display';
 import { createSignPayload } from './util';
-import QrDisplay from './Display';
 
-interface Props extends BaseProps {
+interface Props {
   address: string;
+  className?: string;
   cmd: number;
+  delay?: number;
+  genesisHash: Uint8Array | string;
   payload: Uint8Array;
+  size?: string | number;
+  style?: React.CSSProperties;
+  timerDelay?: number;
 }
 
-interface State {
-  data: Uint8Array | null;
-  dataHash: string | null;
-}
+function DisplayPayload ({ address, className, cmd, genesisHash, payload, size, style, timerDelay }: Props): React.ReactElement<Props> | null {
+  const data = useMemo(
+    () => createSignPayload(address, cmd, payload, genesisHash),
+    [address, cmd, payload, genesisHash]
+  );
 
-export default class DisplayPayload extends React.PureComponent<Props, State> {
-  public state: State = {
-    data: null,
-    dataHash: null
-  };
-
-  public static getDerivedStateFromProps ({ address, cmd, payload }: Props, prevState: State): State | null {
-    const data = createSignPayload(address, cmd, payload);
-    const dataHash = xxhashAsHex(data);
-
-    if (dataHash === prevState.dataHash) {
-      return null;
-    }
-
-    return { data, dataHash };
+  if (!data) {
+    return null;
   }
 
-  public render (): React.ReactNode {
-    const { className, size, style } = this.props;
-    const { data } = this.state;
-
-    if (!data) {
-      return null;
-    }
-
-    return (
-      <QrDisplay
-        className={className}
-        size={size}
-        style={style}
-        value={data}
-      />
-    );
-  }
+  return (
+    <QrDisplay
+      className={className}
+      size={size}
+      style={style}
+      timerDelay={timerDelay}
+      value={data}
+    />
+  );
 }
+
+export const QrDisplayPayload = React.memo(DisplayPayload);

packages/react-qr/src/NetworkSpecs.tsx

@@ -0,0 +1,39 @@
+// Copyright 2017-2022 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { NetworkSpecsStruct } from '@polkadot/ui-settings/types';
+
+import React, { useMemo } from 'react';
+
+import { QrDisplay } from './Display';
+import { encodeString } from './util';
+
+interface Props {
+  className?: string;
+  networkSpecs: NetworkSpecsStruct;
+  size?: string | number;
+  style?: React.CSSProperties;
+}
+
+function DisplayNetworkSpecs ({ className, networkSpecs, size, style }: Props): React.ReactElement<Props> | null {
+  const data = useMemo(
+    () => encodeString(JSON.stringify(networkSpecs)),
+    [networkSpecs]
+  );
+
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <QrDisplay
+      className={className}
+      size={size}
+      skipEncoding
+      style={style}
+      value={data}
+    />
+  );
+}
+
+export const QrNetworkSpecs = React.memo(DisplayNetworkSpecs);

packages/react-qr/src/Scan.tsx

@@ -1,71 +1,68 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
-
-import React from 'react';
+import React, { useCallback, useMemo } from 'react';
 import Reader from 'react-qr-reader';
 import styled from 'styled-components';
 
 import { createImgSize } from './util';
 
-interface Props extends BaseProps {
+interface Props {
+  className?: string;
   delay?: number;
   onError?: (error: Error) => void;
-  onScan?: (data: string) => void;
+  onScan: (data: string) => void;
+  size?: string | number;
+  style?: React.CSSProperties;
 }
 
 const DEFAULT_DELAY = 150;
+
 const DEFAULT_ERROR = (error: Error): void => {
   console.error('@polkadot/react-qr:Scan', error.message);
 };
 
-class Scan extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, delay = DEFAULT_DELAY, size, style } = this.props;
+function Scan ({ className, delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style }: Props): React.ReactElement<Props> {
+  const containerStyle = useMemo(
+    () => createImgSize(size),
+    [size]
+  );
 
-    return (
-      <div
-        className={className}
-        style={createImgSize(size)}
-      >
-        <Reader
-          className='ui--qr-Scan'
-          delay={delay}
-          onError={this.onError}
-          onScan={this.onScan}
-          style={style}
-        />
-      </div>
-    );
-  }
+  const _onError = useCallback(
+    (error: Error) => onError(error),
+    [onError]
+  );
 
-  private onError = (error: Error): void => {
-    const { onError = DEFAULT_ERROR } = this.props;
+  const _onScan = useCallback(
+    (data: string | null) => data && onScan(data),
+    [onScan]
+  );
 
-    onError(error);
-  }
-
-  private onScan = (data: string | null): void => {
-    const { onScan } = this.props;
-
-    if (!data || !onScan) {
-      return;
-    }
-
-    onScan(data);
-  }
+  return (
+    <div
+      className={className}
+      style={containerStyle}
+    >
+      <Reader
+        className='ui--qr-Scan'
+        delay={delay}
+        onError={_onError}
+        onScan={_onScan}
+        style={style}
+      />
+    </div>
+  );
 }
 
-export default styled(Scan)`
+export const QrScan = React.memo(styled(Scan)`
   .ui--qr-Scan {
     display: inline-block;
     height: 100%;
+    transform: matrix(-1, 0, 0, 1, 0, 0);
     width: 100%;
 
     video {
       margin: 0;
     }
   }
-`;
+`);

packages/react-qr/src/ScanAddress.tsx

@@ -1,57 +1,76 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
+import React, { useCallback } from 'react';
 
-import React from 'react';
 import { assert } from '@polkadot/util';
-
-import { ADDRESS_PREFIX } from './constants';
-import QrScan from './Scan';
 import { decodeAddress } from '@polkadot/util-crypto';
 
+import { ADDRESS_PREFIX, SEED_PREFIX } from './constants';
+import { QrScan } from './Scan';
+
 interface ScanType {
-  address: string;
+  isAddress: boolean;
+  content: string;
   genesisHash: string;
+  name?: string;
 }
 
-interface Props extends BaseProps {
+interface Props {
+  className?: string;
   onError?: (error: Error) => void;
-  onScan?: (scanned: ScanType) => void;
+  onScan: (scanned: ScanType) => void;
+  size?: string | number;
+  style?: React.CSSProperties;
+  isEthereum?: boolean
 }
 
-export default class ScanAddress extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, onError, size, style } = this.props;
+function ScanAddress ({ className, isEthereum, onError, onScan, size, style }: Props): React.ReactElement<Props> {
+  const _onScan = useCallback(
+    (data: string | null): void => {
+      if (data) {
+        try {
+          let prefix: string, content: string, genesisHash: string, name: string[];
 
-    return (
-      <QrScan
-        className={className}
-        onError={onError}
-        onScan={this.onScan}
-        size={size}
-        style={style}
-      />
-    );
-  }
+          if (!isEthereum) {
+            [prefix, content, genesisHash, ...name] = data.split(':');
+          } else {
+            [prefix, content, ...name] = data.split(':');
+            genesisHash = '';
+            content = content.substring(0, 42);
+          }
 
-  private onScan = (data: string | null): void => {
-    const { onScan } = this.props;
+          const expectedPrefix = (isEthereum ? 'ethereum' : ADDRESS_PREFIX);
+          const isValidPrefix = (prefix === expectedPrefix) || (prefix === SEED_PREFIX);
 
-    if (!data || !onScan) {
-      return;
-    }
+          assert(isValidPrefix, `Invalid prefix received, expected '${expectedPrefix} or ${SEED_PREFIX}' , found '${prefix}'`);
 
-    try {
-      const [prefix, address, genesisHash] = data.split(':');
+          const isAddress = prefix === expectedPrefix;
 
-      assert(prefix === ADDRESS_PREFIX, `Invalid address received, expected '${ADDRESS_PREFIX}', found '${prefix}'`);
+          if (isAddress && !isEthereum) {
+            decodeAddress(content);
+          }
 
-      decodeAddress(address);
-      onScan({ address, genesisHash });
-    } catch (error) {
-      console.error('@polkadot/react-qr:QrScanAddress', error.message, data);
-    }
-  }
+          onScan({ content, genesisHash, isAddress, name: name?.length ? name.join(':') : undefined });
+        } catch (error) {
+          onError && onError(error as Error);
+
+          console.error('@polkadot/react-qr:QrScanAddress', (error as Error).message, data);
+        }
+      }
+    },
+    [onScan, onError, isEthereum]
+  );
+
+  return (
+    <QrScan
+      className={className}
+      onError={onError}
+      onScan={_onScan}
+      size={size}
+      style={style}
+    />
+  );
 }
+
+export const QrScanAddress = React.memo(ScanAddress);

packages/react-qr/src/ScanSignature.tsx

@@ -1,44 +1,39 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
+import type { HexString } from '@polkadot/util/types';
 
-import React from 'react';
+import React, { useCallback } from 'react';
 
-import QrScan from './Scan';
+import { QrScan } from './Scan';
 
 interface ScanType {
-  signature: string;
+  signature: HexString;
 }
 
-interface Props extends BaseProps {
+interface Props {
+  className?: string;
   onError?: (error: Error) => void;
-  onScan?: (scanned: ScanType) => void;
+  onScan: (scanned: ScanType) => void;
+  size?: string | number;
+  style?: React.CSSProperties;
 }
 
-export default class ScanSignature extends React.PureComponent<Props> {
-  public render (): React.ReactNode {
-    const { className, onError, size, style } = this.props;
+function ScanSignature ({ className, onError, onScan, size, style }: Props): React.ReactElement<Props> {
+  const _onScan = useCallback(
+    (signature: string | null) => signature && onScan({ signature: `0x${signature}` }),
+    [onScan]
+  );
 
-    return (
-      <QrScan
-        className={className}
-        onError={onError}
-        onScan={this.onScan}
-        size={size}
-        style={style}
-      />
-    );
-  }
-
-  private onScan = (signature: string | null): void => {
-    const { onScan } = this.props;
-
-    if (!signature || !onScan) {
-      return;
-    }
-
-    onScan({ signature: `0x${signature}` });
-  }
+  return (
+    <QrScan
+      className={className}
+      onError={onError}
+      onScan={_onScan}
+      size={size}
+      style={style}
+    />
+  );
 }
+
+export const QrScanSignature = React.memo(ScanSignature);

packages/react-qr/src/bundle.ts

@@ -0,0 +1,9 @@
+// Copyright 2017-2022 @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';

packages/react-qr/src/constants.ts

@@ -1,9 +1,9 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 const ADDRESS_PREFIX = 'substrate';
-const FRAME_SIZE = 2048;
+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]);
@@ -19,5 +19,6 @@ export {
   CMD_SIGN_MSG,
   CRYPTO_SR25519,
   FRAME_SIZE,
+  SEED_PREFIX,
   SUBSTRATE_ID
 };

packages/react-qr/src/detectOther.ts

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

packages/react-qr/src/detectPackage.ts

@@ -0,0 +1,11 @@
+// Copyright 2017-2022 @polkadot/react-qr 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/react-qr/src/index.ts

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

packages/react-qr/src/index.tsx

@@ -1,8 +0,0 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-export { default as QrDisplayAddress } from './DisplayAddress';
-export { default as QrDisplayPayload } from './DisplayPayload';
-export { default as QrScanAddress } from './ScanAddress';
-export { default as QrScanSignature } from './ScanSignature';

packages/react-qr/src/packageInfo.ts

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

packages/react-qr/src/qrcode.ts

@@ -1,6 +1,5 @@
-// Copyright 2017-2019 @polkadot/react-qr authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
+// Copyright 2017-2022 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 import _qrcode from 'qrcode-generator';
 
@@ -9,8 +8,8 @@ const qrcode: typeof _qrcode = _qrcode;
 
 // HACK The default function take string -> number[], the Uint8array is compatible
 // with that signature and the use thereof
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
 (qrcode as any).stringToBytes = (data: Uint8Array): Uint8Array =>
   data;
 
-export default qrcode;
+export { qrcode };