[CI Skip] release/stable 0.85.3

skip-checks: true

.123trigger

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

.babelrc.js

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

.eslintignore

@@ -1,4 +0,0 @@
-**/build/*
-**/coverage/*
-**/node_modules/*
-**/*.d.ts

.eslintrc.js

@@ -1,11 +1,33 @@
-const base = require('@polkadot/dev/config/eslint');
+// Copyright 2017-2021 @polkadot/ui authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+const base = require('@polkadot/dev/config/eslint.cjs');
 
 module.exports = {
   ...base,
+  ignorePatterns: [
+    '.eslintrc.js',
+    '.github/**',
+    '.vscode/**',
+    '.yarn/**',
+    '**/build/*',
+    '**/coverage/*',
+    '**/node_modules/*',
+    '**/*.d.ts'
+  ],
   parserOptions: {
     ...base.parserOptions,
     project: [
       './tsconfig.json'
     ]
+  },
+  rules: {
+    ...base.rules,
+    // add override for any (a metric ton of them, initial conversion)
+    '@typescript-eslint/no-explicit-any': 'off',
+    // these should be removed, there are 8 of them as errors
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    // this seems very broken atm, false positives
+    '@typescript-eslint/unbound-method': 'off'
   }
 };

.github/workflows/lock.yml

@@ -0,0 +1,23 @@
+name: 'Lock Threads'
+
+on:
+  schedule:
+    - cron: '30 1/2 * * *'
+
+jobs:
+  lock:
+    runs-on: ubuntu-latest
+    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

@@ -5,11 +5,11 @@ jobs:
   pr:
     strategy:
       matrix:
-        step: ['lint', 'test', 'build', 'docs']
+        step: ['lint', 'test', 'build']
     name: ${{ matrix.step }}
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v2
     - name: ${{ matrix.step }}
       run: |
         yarn install --immutable | grep -v 'YN0013'

.github/workflows/push-master.yml

@@ -6,33 +6,22 @@ on:
 
 jobs:
   master:
+    if: "! startsWith(github.event.head_commit.message, '[CI Skip]')"
     strategy:
       matrix:
-        step: ['build:release', 'docs:release']
+        step: ['build:release']
     name: ${{ matrix.step }}
-    if: "! contains(github.event.head_commit.message, '[CI Skip]') && github.repository == 'polkadot-js/ui'"
     runs-on: ubuntu-latest
     steps:
-    - uses: actions/checkout@v1
+    - uses: actions/checkout@v2
       with:
         token: ${{ secrets.GH_PAT }}
     - name: ${{ matrix.step }}
       env:
         CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
-        GH_PAGES_SRC: build-docs
         GH_PAT: ${{ secrets.GH_PAT }}
-        GH_TOKEN: ${{ secrets.GH_PAT }}
-        GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        GH_RELEASE_GITHUB_API_TOKEN: ${{ secrets.GH_PAT }}
         NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       run: |
         yarn install --immutable | grep -v 'YN0013'
         yarn ${{ matrix.step }}
-
-  dummy:
-    name: Dummy
-    if: "contains(github.event.head_commit.message, '[CI Skip]')"
-    runs-on: ubuntu-latest
-    steps:
-    - name: dummy
-      run: |
-        echo "Dummy skip step"

.github/workflows/semgrep.yml

@@ -0,0 +1,18 @@
+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
+    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,17 @@
+name: 'Close stale issues and PRs'
+on:
+  schedule:
+    - cron: '30 2/2 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    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

.nvmrc

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

.prettierignore

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

.prettierrc.cjs

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

.vscode/settings.json

@@ -1,11 +0,0 @@
-{
-  "editor.tabSize": 2,
-  "files.eol": "\n",
-  "npm.packageManager": "yarn",
-  "eslint.enable": true,
-  "eslint.validate": [
-    "javascript",
-    "typescript",
-    "typescriptreact"
-  ]
-}

.yarnrc.yml

@@ -5,7 +5,9 @@ enableProgressBars: false
 nodeLinker: node-modules
 
 plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.js
+  - 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-rc.js
+yarnPath: .yarn/releases/yarn-3.0.1.cjs

CHANGELOG.md

@@ -1,65 +1,489 @@
-# 0.52.1 Apr 15, 2020
+# CHANGELOG
+
+## 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
+
+## 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
+
+## 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
+
+## 0.49.1 Feb 06, 2020
+
+Changes:
 
 - Add resolver for jest requires (tests from src)
 
-# 0.48.1 Jan 30, 2020
+
+## 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
+
+## 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
+
+## 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
+
+## 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
-- **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.
 - 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
+
+## 0.44.1 Sep 12, 2019
+
+Changes:
 
 - Update `@polkadot/util` to 1.4.1
 - Upddate to Babel 7.6
 
-# 0.43.1 Sep 10, 2019
+
+## 0.43.1 Sep 10, 2019
+
+Changes:
 
 - Add W3F Node for Kusama
 - Add extended info to ui-settings, i.e. info on each option
@@ -67,17 +491,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 Aug 24, 2019
+
+## 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 Jun 14, 2019
+
+## 0.41.1 Jun 14, 2019
+
+Changes:
 
 - Adapt interface to cater for new `@polkadot/keyring`, where pairs -
   - expose `address` getter instead of `address()`
@@ -89,16 +520,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 Jun 04, 2019
+
+## 0.40.1 Jun 04, 2019
+
+Changes:
 
 - Address encoding changes, use encoded address instead of supplied
 
-# 0.39.1 May 22, 2019
+
+## 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 May 08, 2019
+
+## 0.38.1 May 08, 2019
+
+Changes:
 
 - Sorting of keyring addresses
 - Fix JSON import defaults (previously detection was not working for old accounts)
@@ -106,70 +546,112 @@
 - Ensure only a single instance of ui-keyring is loaded
 - Adjust short address option display (keyring options)
 
-# 0.37.1 Apr 03, 2019
+
+## 0.37.1 Apr 03, 2019
+
+Changes:
 
 - Add Emberic Elm (Dried Danta discontinued)
 - @polkadot/util & @polkadot/api 0.75.1
 
-# 0.36.1 Mar 29, 2019
+
+## 0.36.1 Mar 29, 2019
+
+Changes:
 
 - Small fixes, latest @polkadot/wasm-* packages
 
-# 0.35.1  Mar 29, 2019
+
+## 0.35.1  Mar 29, 2019
+
+Changes:
 
 - @polkadot/util & @polkadot/api 0.75.1
 
-# 0.34.1 Mar 28, 2019
+
+## 0.34.1 Mar 28, 2019
+
+Changes:
 
 - Fix for blake2 in Polkadot identicon generation
 
-# 0.33.1 Mar 23, 2019
+
+## 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 Mar 20, 2019
+
+## 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 Mar 18, 2019
+
+## 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 Mar 14, 2019
+
+## 0.30.1 Mar 14, 2019
+
+Changes:
 
 - Swap to publishing -beta.x on merge (non-breaking testing)
 
-# 0.29.1 Mar 13, 2019
+
+## 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 Feb 21, 2019
+
+## 0.28.1 Feb 21, 2019
+
+Changes:
 
 Default Substrate icon is Jdenticon
 
-# 0.27.1 Feb 20, 2019
+
+## 0.27.1 Feb 20, 2019
+
+Changes:
 
 Replace Charred Cherry with Dried Danta, remove old decimals and token name configs
 
-# 0.26.1 Feb 14, 2019
+
+## 0.26.1 Feb 14, 2019
+
+Changes:
 
 Add keyring support for sd25519 (schnorrkel)
 
-# 0.25.1 Jan 09, 2019
+
+## 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.24.1 Dec 19, 2018
 
-# 0.22.1 Dec 05, 2018
+## 0.23.1 Dec 14, 2018
+
+## 0.22.1 Dec 05, 2018
+
+Changes:
 
 - Split from apps

babel.config.cjs

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

babel.config.js

@@ -1,17 +0,0 @@
-// Copyright 2017-2020 @polkadot/ui authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-const base = require('@polkadot/dev/config/babel');
-
-module.exports = Object.keys(base).reduce((config, key) => {
-  config[key] = base[key];
-
-  if (key === 'plugins') {
-    config[key] = config[key].concat([
-      'transform-vue-template'
-    ]);
-  }
-
-  return config;
-}, {});

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,50 +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: [
-      {
-        title: 'Getting started',
-        path: '/start/',
-        collapsable: false,
-        sidebarDepth: 0,
-        children: [
-          ['start/packages.md', 'Available packages'],
-          ['start/keyring.md', 'Keyring'],
-          ['start/keyring.accounts.md', 'Keyring accounts'],
-          ['start/keyring.derivation.md', 'Account derivation'],
-          ['start/keyring.retrieve.md', 'Account retrieval'],
-          ['start/keyring.other.md', 'Other addresses'],
-          ['start/FAQ.md', 'FAQ']
-        ]
-      },
-      ['/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,52 +0,0 @@
----
-home: true
-heroText:
-tagline:
-# Bringing JavaScript to the Polkadot world.
-# actionText: Repository Overview
-# actionLink: /REPOS.md
-features:
-- title: Frameworks
-  details: We support multiple UI frameworks, including React, React Native and Vue.
-- 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.
-
-footer: Apache-2 Licensed | Copyright © 2017-2019 polkadot-js authors and contributors
----
-
-## Welcome
-
-This is a collection of UI libraries, utilities and classes that allows for easier use of the Polkadot JS infrastructure inside your apps.
-
-::: tip Getting started
-For those new to these repose, we provide a [getting started](start/README.md) guide to take you from the tame to the insane.
-:::
-
-## Available packages
-
-This repository split up into a number of internal packages, namely -
-
-- Examples take a short dive into some functionality, either for [React](example-react/README.md), [React Native](exampleReactNative) and [Vue](example-vue/README.md).
-- Identicons display identity icons based on theme, available for [React](react-identicon/README.md) 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>

docs/start/FAQ.md

@@ -1,11 +0,0 @@
-# FAQ
-
-The list will be updated/expanded as questions come up, dealing with some common issues that users find.
-
-## I have a crypto has not been initialized error
-
-When using the keyring, make sure that you are [initializing the keyring](keyring.md#initialization) before attempting to use it. Generally you would hook this into the async API creation (which transparently caters for the WASM load).
-
-## My React Native build runs out of memory
-
-When using the keyring packages with RN, due to a lack of support, an [asm.js fallback](https://github.com/polkadot-js/wasm/issues/19) is provided. This does however all some memory load to the application build process (and is by no means fast), ensure that you adjust your build flags to include `NODE_OPTIONS=--max_old_space_size=8192`, for instance doing `NODE_OPTIONS=--max_old_space_size=8192 yarn run ios`

docs/start/README.md

@@ -1,15 +0,0 @@
-# Getting started
-
-These sections should provide you with all the information needed to install any packages in this repo, understand the structure of the interfaces and allow you to start using it. It really focusses on the general packages with any framework-specific packages such as icons as detailed in their own section.
-
-## What this is not
-
-This is not line-by-line documentation of all the existing function calls available, nor it is tied to a specific framework that you may end up using. We have users using frameworks such as Angular, Electron, React, React Native, Next.js and Vue and even support direct environments such as browser extensions, Electron apps in addition to the normal web applications you may be used to. There will be some things in the libraries that are probably not covered, which brings us to the next point...
-
-## Help us help others
-
-If you spot gaps in the information provided, or are uncertain about any specific area, please do [log an issue](https://github.com/polkadot-js/ui/issues) or if you are that way inclined, make a pull-request. We really want to have good documentation in these areas and allow people to be productive right from the start.
-
-## Ready? Steady? Go!
-
-If you already have a good grasp on the API and are just looking for a specific answer, you may want to take a look at the [Frequently Asked Questions](FAQ.md). With all that said, let's get started... [What are all these things and what can I do with it](packages.md)

docs/start/keyring.accounts.md

@@ -1,49 +0,0 @@
-# Keyring accounts
-
-With our keyring setup completed in the previous section, and all available accounts loaded, we are ready to proceed. However we have not actually loaded any accounts yet, since well, we have not created or stored any previously. So let's change that.
-
-## Adding accounts
-
-The keyring has a number of ways to add accounts, but in 99% of the cases, you should need only a single method to add an account to the keyring - `addUri(suri: string, password?: string, meta: KeyringPair$Meta = {}, type?: KeypairType)`. Let's jump in with some explicit examples -
-
-```js
-import { mnemonicGenerate } from '@polkadot/util-crypto';
-
-...
-// generate a random mnemonic, 12 words in length
-const mnemonic = mnemonicGenerate(12);
-
-// add the account, encrypt the stored JSON with an account-specific password
-const { pair, json } = keyring.addUri(mnemonic, 'myStr0ngP@ssworD', { name: 'mnemonic acc' });
-```
-
-The above example is relatively straight-forward. Create an account with the specified mnemonic, encrypt the account (as stored) with the password and attach some metadata to the account. It returns a pair instance (we will work with these later) as well as the encrypted json as is saved to the store.
-
-Metadata is free form, with any indicators that you would find useful in your application. Some fields that are known to be used in (and also exists other keyring entries such as contacts & contracts) includes -
-
-- `genesisHash` - a hex value of the genesis this accounts belong to. If specified, the account will only be loaded when the same genesisHash is available in the keyring options
-
-- `name` - a human-readable description for the account
-
-## Non-mnemonic accounts
-
-Generally, we would encourage all wallets and users to only support mnemonic phrases - these are portable between crypto implementations, has built-in checksums and is a standard across the blockchain environment.
-
-In some cases however, either due to the need to provide backwards compatibility or for closed environments, other seed types may be used. The `addUri` will detect the type of input, i.e. if a hex-encoded value is provided, it will treat it as a raw seed. With this in mind, we can rewrite our example above to generate a random raw seed -
-
-```js
-import { randomAsHex } from '@polkadot/util-crypto';
-
-...
-// generate a random hex raw seed, this needs to be 32 bytes in length
-const seed = randomAsHex(32);
-
-// add the account, encrypting it, override to ed25519
-const { pair, json } = keyring.addUri(seed, 'weakpass', { name: 'hex seed acc' }, 'ed25519');
-```
-
-In addition to creating the account in the same fashion as in the preceding section, we are overriding the type of the account created here. Assuming we created the keyring with the `type: 'sr25519'` option, the first mnemonic account was created with an `sr25519` type. Here we specify the type of crypto explicitly, and therefore create a non-default (for this keyring instance) `ed25519` type.
-
-## Deriving accounts
-
-In the next section, we will expand our account creation capabilities and take a look at [account derivation and passing suri options](keyring.derivation.md).

docs/start/keyring.derivation.md

@@ -1,29 +0,0 @@
-# Account derivation
-
-[Secret URIs](https://github.com/paritytech/substrate/wiki/Secret-URI-Test-Vectors) are a way of describing the phrase/seed along with derivation paths. This explains the naming of the default add as `addUri(...)`, it can handle mnemonics, seeds and apply suri derivations on these.
-
-## Diving in
-
-As a follow-up on what we have done in the preceding section, we take a dive into expanding our account addition with derivation, in this case we are applying two hard paths, `hard` followed by `derivation` -
-
-```js
-...
-// add the account with hard derivation paths
-keyring.addUri(`${mnemonic}//hard//derivation`, 'donotcare', { name: 'testing derive' });
-```
-
-This format is standard across the `@polkadot/keyring`, `@polkadot/ui-keyring` as well as [Substrate subkey](https://github.com/paritytech/substrate/tree/master/subkey), so it is a Polkadot/Substrate specific way of defining derivation paths.
-
-## Understanding paths
-
-To build a suri, you paths, the format is always `<mnemonic or seed>[//hard][/soft][///password]` and it is  passed as-is to the `addUri(...)` function. the derivation types are -
-
-- Soft derivation, i.e `/<soft path>` - Here a single slash, `/`, denotes a soft derivation. Please note that any pair with an `ed25519` type does not support soft derivations, these are only applicable to `sr25519` types.
-
-- Hard derivation, i.e. `//<hard path>` - Here two slashes, `//`, denoted a hard derivation. This  is available to both `sr25519` and `ed25519` pairs. Underlying it will apply a hashing function on the secret, generating a new secret for the remainder of the derivations.
-
-- Password, i.e. `///<password>` - Here three slashed, `///`, denoted the (optional) password. Unlike hard and soft derivations that can be mixed, only a single password should be specified. The password here applies to the actual uri, not be be confused by the JSON encryption password. It is an additional security layer - if your full mnemonic and all paths do leak without the password, a bad actor would still not be able to generate a compatible secret to access funds without the password.
-
-## Retrieving accounts
-
-With a fim grasp on adding accounts, next we will take a look at [retrieving account and account subscriptions](keyring.retrieve.md).

docs/start/keyring.md

@@ -1,104 +0,0 @@
-# Keyring
-
-The [@polkadot/ui-keyring](https://www.npmjs.com/package/@polkadot/ui-keyring) package provides a wrapper around the [@polkadot/keyring](https://www.npmjs.com/package/@polkadot/keyring) package, specifically for use in browser environments. The `ui-keyring` only extends the `keyring`, but does not replace it. All underlying account management functions are provided by the base keyring, the browser-specific extensions allows for transparent management of account state in storage.
-
-Additionally where the base keyring is focussed on accounts, the `ui-keyring` extends this to cater for an address-book, contracts and allows for accounts to be tied to a specific chain. Since UIs are typically split into different parts, it also allows for subscriptions on accounts, so notifications are available when accounts are added or removed.
-
-## Installation
-
-If you already use the [@polkadot/api](https://www.npmjs.com/package/@polkadot/api) in your project (which is true in most cases), you don't need anything more than `yarn add @polkadot/ui-keyring`.
-
-If however you use the `ui-keyring` independently (i.e. in an address generator, like the examples) you would need the `keyring` dependency as well, `yarn add @polkadot/keyring @polkadot/ui-keyring`. (In the first case the `@polkadot/api` already comes bundled with the base keyring, so no additional dependencies are needed).
-
-## Initialization
-
-To understand the initialization process, some background on the underlying libraries are required. For the [Schnorrkel sr25519](https://github.com/w3f/schnorrkel) a WASM library is used. This means that before `sr25519` can be used, the WASM libraries needs to be loaded and initialized. This is not an issue when the keyring only uses `ed25519`.
-
-With this in mind, we take care of the  initialization as before we load our keyring, yielding -
-
-```js
-import keyring from '@polkadot/ui-keyring';
-import { cryptoWaitReady } from '@polkadot/util-crypto';
-
-cryptoWaitReady().then(() => {
-  // load all available addresses and accounts
-  keyring.loadAll({ ss58Format: 42, type: 'sr25519' });
-
-  // additional initialization here, including rendering
-});
-```
-
-The `cryptoWaitReady()` promise resolves as soon as the underlying WASM libraries have been made available. This is followed by `keyring.loadAll(...)` which is the main initialization for the keyring, which
-
-- initializes the underlying `@polkadot/keyring`
-- loads all available accounts, addresses band contracts previously stored
-- sets up the default address format with `42` (This is the substrate development default. When not specified, this defaults to `42`)
-- defaults to `sr25519` accounts (We can still add `ed25519` accounts, more on this later. When not specified this defaults to `ed25519`)
-
-Since you would generally want the keyring available before rendering the UI (although it can be done elsewhere, showing some info while loading), the following pattern is used in our examples, both React and Vue shown here -
-
-```js
-...
-cryptoWaitReady().then(() => {
-  keyring.loadAll({ ... });
-
-  // mount React and render
-  ReactDOM.render(<App />, document.getElementById('app'));
-});
-```
-
-```js
-...
-cryptoWaitReady().then(() => {
-  keyring.loadAll({ ... });
-
-  // mount Vue and render
-  new Vue({ render: (h) => h(App) }).$mount('#app');
-});
-```
-
-When using the keyring together with the Polkadot-js API, the above would be adapted since the API itself already has a check for the WASM availability. In this case, we can adapt the interface to follow the following pattern -
-
-```js
-import { ApiPromise } from '@polkadot/api';
-import keyring from '@polkadot/ui-keyring';
-
-...
-ApiPromise.create({ ... }).then(() => {
-  keyring.loadAll({ ... });
-
-  // additional initialization here, including rendering
-});
-```
-
-The above pattern is how initialization is done in some applications such as the [polkadot-js apps UI](https://polkadot.js.org/apps/).
-
-## Additional create options
-
-In addition to the `ss58Format` and `type` options (both optional), the following additional configuration options are available to the `loadAll(...)` call -
-
-- `filter?: (json: KeyringJson) => boolean` - An optional filter that is executed on account loading. This allows us to check the loaded account and apply rules on it before including it in the keyring. Generally this would be used for advanced cases, any account that is filtered with `false` won't appear.
-
-- `genesisHash?: Hash` - The `genesisHash` of accounts to should be loaded. The meta property of the account _may_ contain a `genesisHash`, when both are available and non-matching, the account will not be included. To populate this option, the easiest way is to pass the `api.genesisHash` property.
-
-- `isDevelopment?: boolean` - This flag, when set to `true` loads the keyring in development mode. This means that the default development accounts such as "Alice", "Bob", ..., "Ferdie" are included in the keyring. Generally you would only specify this when  actually connected to a development chain.
-
-- `store?: KeyringStore` - An optional store to be used. By default the `ui-keyring` will user browser localStorage, but with a specific store this behavior can be adjusted. For instance, for an extension we would default to the extension store (although localStorage is available) and for Electron apps, we may want to default to file storage.
-
-```js
-import { ExtensionStore } from '@polkadot/ui-keyring/stores';
-
-// For file storage where available, e.g. in Electron environments.
-// This takes an path in the constructor, new FileStore('~./keyring-data')
-// import { FileStore } from '@polkadot/ui-keyring/stores';
-
-// When the store is not specified, it defaults to new BrowserStore()
-// import { BrowserStore } from '@polkadot/ui-keyring/stores';
-
-...
-keyring.loadAll({ store: new ExtensionStore(), ... });
-```
-
-## Managing accounts
-
-With the keyring installed and ready for use, [next we will dive into adding and managing accounts](keyring.accounts.md).

docs/start/keyring.other.md

@@ -1,41 +0,0 @@
-# Other addresses
-
-As mentioned in previous sections, the keyring not only has the ability to manage accounts (i.e. keypairs), but also allows you to add addresses/contacts as well as contracts to the keyring. This is very useful in the case where you are developing a wallet and want to save external addresses to interact with.
-
-Here we will give an overview of working with addresses, the same concepts can be expanded to work with contracts.
-
-## Adding an address
-
-For accounts, we have the `addUri(...)` endpoint that allows us to create and save an account. For addresses, we the keyring exposes `saveAddress (address: string, meta: KeyringPair$Meta)`, which we can use to save any address -
-
-```js
-...
-// add the address
-const FAUCET_ADDR = 'FvnazYM5KAetYpXoVDfqt9WFcJogKbekXVJ3Fz5oW2Dv82P';
-const json = keyring.saveAddress(FAUCET_ADDR, { name: 'Alex faucet' });
-
-// the faucet will now be in the list of available addresses
-keyring.getAddresses().forEach(...)
-```
-
-From this point forward, the address is in your keyring and can be retrieved via the `getAddresses()` interface. The same call can be used to update the meta for the address, for instance if we wish to change the name above, we can do -
-
-```js
-...
-const json = keyring.saveAddress(FAUCET_ADDR, { name: 'Alexander Faucet' });
-```
-
-And the already-saved address will be updated with the new metadata.
-
-## Removing an address
-
-To clear and address and remove it from the keyring, we can use the `forgetAddress(address: string)` call, this mirrors the `forgetAccount(address: string)` and `forgetContract(address: string)` calls. For instance -
-
-```js
-...
-// remove the specific address
-keyring.forgetAddress(FAUCET_ADDR);
-
-/// the faucet will not be in the list of addresses anymore
-keyring.getAddresses().forEach(...)
-```

docs/start/keyring.retrieve.md

@@ -1,57 +0,0 @@
-# Account retrieval
-
-Adding accounts is good. Having access to these accounts when added via `const { pair } = keyring.addUr(...)` is better, but being able to access these to iterate over at a later point (even after reload), is magic. Here we will try to add some magic to your experience, allowing you to retrieve accounts as well as subscribe to changes as they happen.
-
-## Loading all available
-
-As we've seen in the keyring init section, when we can `loadAll`, it loads all added added - this includes those added via `addUri(...)` which transparently saves to the provided storage. Loading means it is available in the keyring, to get a list of the accounts, we can then do -
-
-```js
-import { u8aToHex } from '@polkadot/util';
-
-...
-const accounts = keyring.getAccounts();
-
-accounts.forEach(({ address, meta, publicKey }) =>
-  console.log(address, JSON.stringify(meta), u8aToHex(publicKey))
-);
-```
-
-The above interface was probably not quite what you have been expecting, rather you would have expected to get back a list of the pairs, but rather you received a list of the account descriptors. Some rationale for this approach - since we have `getAccounts()`, `getAddresses()` (for contacts) and `getContracts()` the consistent interface here is applicable. Instead based on an address, you can then retrieve a specific pair -
-
-```js
-accounts.forEach(({ address }) => {
-  // retrieve via address or publicKey
-  const pair = getPair(address);
-
-  // display the locked account status
-  console.log(address, pair.isLocked);
-});
-```
-
-Similarly we have a `getPairs()` that mirrors `getAccounts()`, but retrieves the list of available pairs - which is the output you probably expected from the initial `getAccounts()` call.
-
-## Subscriptions (Optional)
-
-In addition to the retrieving of accounts on demand, we can actually subscribe to accounts for the keyring. This subscription returns a list of all accounts as they are updated, i.e. when a new account is added it will callback with a list of all the account, including the new one, when an account is removed, it will callback with a list of accounts, excluding the removed member.
-
-```js
-...
-// create a subscription to all available accounts, updated real-time
-const sub = keyring.accounts.subject.subscribe((accounts) => {
-  accounts.forEach(({ json, option }) =>
-    // json is the stored data, including address
-    // option is a { name: meta.name, value: address }
-  );
-});
-
-...
-// at some point  when we are not interested anymore, we can unsubscribe
-sub.unsubscribe();
-```
-
-As with the `get{Accounts|Addresses|Contracts}()` functions, similarly we have in addition to `keyring.accounts.subject` the `keyring.addresses.subject` and `keyring.contracts.subject` subscriptions available, with the same generic result set.
-
-## Other address types
-
-We have been referencing contacts and contracts and number of times up till now, up next we will take a look at [how to store other addresses, be if for an address book or contract](keyring.other.md).

docs/start/packages.md

@@ -1,35 +0,0 @@
-# Available Packages
-
-Let's take a slightly deeper diver into the available packages that we provide. While we won't (yet) cover the specifics of Frameworks-specifics (such as React, React Native or Vue), we will also take a slight detour from the rest of the  getting started sections, just allowing a comprehensive overview of everything provided... including the framework-specifics.
-
-## Organization
-
-Before we get to the available packages, just a note on the organization of the available items. We have a number of types of packages, with the following prefixes -
-
-- `@polkadot/example-*` - These are very basic examples that shows how to actually use the libraries in your own applications. for instance the `@polkadot/example-vue` shows step-by-step how to build a simple key generator with the keyring and the Vue-specific icons. (The `@polkadot/example-react` is equivalent... and we would love to see the same for React Native...)
-
-- `@polkadot/ui-*` - These packages are all framework agnostic. It doesn't matter if you use Angular, React or Vue - these packages are designed to be framework independent and should work in any environment that has the intent of being displayed in a browser window, yes, including Electron.
-
-- `@polkadot/react-*` - As the name suggests, these packages are meant for use with React. In some cases (e.g. UOS support), these may be slightly ahead of other frameworks. However where an equivalent package exists, we always aim for feature parity.
-
-- `@polkadot/reactnative-*` - Specifically for React Native applications.
-
-- `@polkadot/vue-*` - Specifically for Vue applications.
-
-With the above in mind, let's take an initial tour through the various generic implementations.
-
-##  Generic UI libraries
-
-As indicated, all of the `@polkadot/ui-*` packages are meant to be framework independent. The only common thread between these are that they are designed for use inside a browser, with no requirement for using a development framework.
-
-The first package we will look at is the [@polkadot/ui-assets package](https://www.npmjs.com/package/@polkadot/ui-assets). It really is just a collection of images that are available for various chains & nodes and makes no assumption about how you are including it in your app, or rather which packager you use.
-
-Up next is a critical component of any non-trivial app that also manages accounts, [@polkadot/ui-keyring](https://www.npmjs.com/package/@polkadot/ui-keyring). It is a browser-specific wrapper around the [@polkadot/keyring pcakge](https://www.npmjs.com/package/@polkadot/keyring) that transparently handles access to accounts, addresses, contracts and storage (saving accounts between use) all while allowing for swapable storage depending on your environment, be it browser, extension or Electron.
-
-[@polkadot/ui-settings](https://www.npmjs.com/package/@polkadot/ui-settings) provides a set of default settings, UI end network related, that could be useful to application developers in certain circumstances. The relates to settings such are ss58 formats, network endpoints and other.
-
-Last-up is the [@polkadot/ui-shared](https://www.npmjs.com/package/@polkadot/ui-shared) package. It is not deemed as generally useful to building apps, but rather contains shared code that is used within other packages, for instance in the generation of icons.
-
-## Diving in
-
-Now that we have some bearing of where we are, it is time to take a dive in, [let's start with the keyring and see what we can do](keyring.md).

jest.config.cjs

@@ -0,0 +1,30 @@
+// Copyright 2017-2021 @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'
+  },
+  modulePathIgnorePatterns: [
+    '<rootDir>/packages/example-react/build',
+    '<rootDir>/packages/example-vue/build',
+    '<rootDir>/packages/exampleReactNative/build',
+    '<rootDir>/packages/react-identicon/build',
+    '<rootDir>/packages/react-qr/build',
+    '<rootDir>/packages/reactnative-identicon/build',
+    '<rootDir>/packages/ui-assets/build',
+    '<rootDir>/packages/ui-keyring/build',
+    '<rootDir>/packages/ui-settings/build',
+    '<rootDir>/packages/ui-shared/build',
+    '<rootDir>/packages/vue-identicon/build'
+  ],
+  testEnvironment: 'jsdom',
+  transformIgnorePatterns: ['/node_modules/(?!@polkadot|@babel/runtime/helpers/esm/)']
+};

jest.config.js

@@ -1,16 +0,0 @@
-// Copyright 2017-2020 @polkadot/ui authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-const config = require('@polkadot/dev/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',
-    '\\.(css|less)$': 'empty/object',
-    '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$': 'empty/object'
-  },
-  resolver: './jest.resolver.js'
-});

jest.resolver.js

@@ -1,11 +0,0 @@
-// Copyright 2017-2020 @polkadot/ui authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-const path = require('path');
-
-module.exports = function resolver (file, config) {
-  return file.includes('package.json')
-    ? path.join(config.basedir.replace('/src', '/'), file)
-    : config.defaultResolver(file, config);
-};

lerna.json

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

package.json

@@ -8,14 +8,12 @@
     "packages/*"
   ],
   "resolutions": {
-    "babel-core": "^7.0.0-bridge.0",
-    "typescript": "^3.8.3"
+    "typescript": "^4.3.5"
   },
   "scripts": {
     "build": "polkadot-dev-build-ts",
     "build:release": "polkadot-ci-ghact-build",
-    "docs": "polkadot-dev-build-docs",
-    "docs:release": "polkadot-ci-ghact-docs",
+    "build:rollup": "polkadot-exec-rollup --config",
     "lint": "polkadot-dev-run-lint",
     "clean": "polkadot-dev-clean-build",
     "demo:identicon:react": "yarn build && webpack-serve --config packages/react-identicon/webpack.config.js --content packages/react-identicon --port 8080",
@@ -30,18 +28,23 @@
     "test:one": "polkadot-dev-run-test"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/runtime": "^7.9.2",
-    "@polkadot/dev": "^0.52.9",
-    "@polkadot/ts": "^0.3.18",
-    "@types/jest": "^25.2.1",
+    "@babel/core": "^7.15.0",
+    "@babel/runtime": "^7.15.3",
+    "@polkadot/dev": "^0.62.62",
+    "@polkadot/ts": "^0.4.6",
+    "@polkadot/x-bundle": "^7.3.1",
+    "@types/jest": "^27.0.1",
     "babel-plugin-transform-vue-template": "^0.4.2",
     "empty": "^0.10.1",
-    "react": "^16.13.1",
-    "react-dom": "^16.13.1",
-    "react-is": "^16.13.1",
-    "react-native": "^0.62.1",
-    "vue-template-compiler": "^2.6.11",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-is": "^17.0.2",
+    "react-native": "^0.65.1",
+    "vue-template-compiler": "^2.6.14",
+    "webpack": "^4.46.0",
+    "webpack-cli": "^3.3.12",
     "webpack-serve": "^3.2.0"
-  }
+  },
+  "version": "0.85.3",
+  "packageManager": "yarn@3.0.1"
 }

packages/example-react/package.json

@@ -1,14 +1,12 @@
 {
   "name": "@polkadot/example-react",
-  "version": "0.52.1",
+  "version": "0.85.3",
   "description": "A very basic example with ui-* & react-* packages",
   "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
+  "maintainers": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.2"
+    "@babel/runtime": "^7.15.3"
   }
 }

packages/example-react/src/index.tsx

@@ -1,13 +1,13 @@
-// Copyright 2017-2020 @polkadot/example-react 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-2021 @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 { mnemonicGenerate, cryptoWaitReady } from '@polkadot/util-crypto';
+
+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;
@@ -113,7 +113,9 @@ function App ({ className }: Props): React.ReactElement<Props> | null {
   );
 }
 
-cryptoWaitReady().then((): void => {
-  keyring.loadAll({ ss58Format: 42, type: 'sr25519' });
-  ReactDOM.render(<App />, rootElement);
-});
+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-2021 @polkadot/example-react authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Auto-generated by @polkadot/dev, do not edit
+
+export const packageInfo = { name: '@polkadot/example-react', version: '0.85.3' };

packages/example-react/webpack.config.js

@@ -1,6 +1,5 @@
-// Copyright 2017-2020 @polkadot/example-react 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-2021 @polkadot/example-react authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 const path = require('path');
 const { WebpackPluginServe } = require('webpack-plugin-serve');
@@ -18,7 +17,7 @@ module.exports = {
         use: [
           {
             loader: 'babel-loader',
-            options: require('../../babel.config.js')
+            options: require('../../babel.config.cjs')
           }
         ]
       }

packages/example-vue/package.json

@@ -1,14 +1,12 @@
 {
   "name": "@polkadot/example-vue",
-  "version": "0.52.1",
+  "version": "0.85.3",
   "description": "A very basic example with ui-* & vue-* packages",
   "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
+  "maintainers": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.2"
+    "@babel/runtime": "^7.15.3"
   }
 }

packages/example-vue/src/index.ts

@@ -1,13 +1,13 @@
-// Copyright 2017-2020 @polkadot/example-vue 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-2021 @polkadot/example-vue 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 Vue, { VNode } from 'vue';
-import keyring from '@polkadot/ui-keyring';
-import settings from '@polkadot/ui-settings';
-import { mnemonicGenerate, cryptoWaitReady } from '@polkadot/util-crypto';
+
+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 {
@@ -88,10 +88,12 @@ const Example = Vue.extend({
   }
 });
 
-cryptoWaitReady().then((): void => {
-  keyring.loadAll({ ss58Format: 42, type: 'sr25519' });
+cryptoWaitReady()
+  .then((): void => {
+    keyring.loadAll({ ss58Format: 42, type: 'sr25519' });
 
-  new Vue({
-    render: (h): VNode => h(Example)
-  }).$mount('#example');
-});
+    new Vue({
+      render: (h): VNode => h(Example)
+    }).$mount('#example');
+  })
+  .catch(console.error);

packages/example-vue/src/packageInfo.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2021 @polkadot/example-vue authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Auto-generated by @polkadot/dev, do not edit
+
+export const packageInfo = { name: '@polkadot/example-vue', version: '0.85.3' };

packages/example-vue/webpack.config.js

@@ -1,6 +1,5 @@
-// Copyright 2017-2020 @polkadot/example-vue 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-2021 @polkadot/example-vue authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 const path = require('path');
 const VueLoaderPlugin = require('vue-loader/lib/plugin');
@@ -19,7 +18,7 @@ module.exports = {
         use: [
           {
             loader: 'babel-loader',
-            options: require('../../babel.config.js')
+            options: require('../../babel.config.cjs')
           }
         ]
       },

packages/exampleReactNative/App.tsx

@@ -1,17 +1,18 @@
-// Copyright 2017-2020 @polkadot/example-react 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-2021 @polkadot/example-react authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import { Button, SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, View } from 'react-native';
 import { Colors } from 'react-native/Libraries/NewAppScreen';
+
 import Identicon from '@polkadot/reactnative-identicon';
-import keyring from '@polkadot/ui-keyring';
-import settings from '@polkadot/ui-settings';
-import { mnemonicGenerate, cryptoWaitReady } from '@polkadot/util-crypto';
+import { keyring } from '@polkadot/ui-keyring';
+import { settings } from '@polkadot/ui-settings';
+import { cryptoWaitReady, mnemonicGenerate } from '@polkadot/util-crypto';
 
 const styles = StyleSheet.create({
   body: {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
     backgroundColor: Colors.white
   },
   buttonContainer: {
@@ -20,11 +21,13 @@ const styles = StyleSheet.create({
     flexDirection: 'column'
   },
   mainTitle: {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
     color: Colors.black,
     fontSize: 28,
     fontWeight: '600'
   },
   scrollView: {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
     backgroundColor: Colors.lighter
   },
   sectionContainer: {
@@ -32,12 +35,14 @@ const styles = StyleSheet.create({
     paddingHorizontal: 24
   },
   sectionDescription: {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
     color: Colors.dark,
     fontSize: 18,
     fontWeight: '400',
     marginTop: 8
   },
   sectionTitle: {
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment,@typescript-eslint/no-unsafe-member-access
     color: Colors.black,
     fontSize: 24,
     fontWeight: '600'
@@ -46,23 +51,28 @@ const styles = StyleSheet.create({
 
 const globalAny = global as unknown as Window;
 
-export default function App (): React.ReactElement<{}> | null {
+export default function App (): React.ReactElement | null {
   const [isReady, setReady] = useState(false);
   const [address, setAddress] = useState<string | null>(null);
   const [phrase, setPhrase] = useState<string | null>(null);
   const [ss58Format, setSS58Format] = useState(42);
 
-  const _onClickNew = (): void => {
-    const phrase = mnemonicGenerate(12);
-    const { address } = keyring.createFromUri(phrase);
+  const _onClickNew = useCallback(
+    (): void => {
+      const phrase = mnemonicGenerate(12);
+      const { address } = keyring.createFromUri(phrase);
 
-    setAddress(keyring.encodeAddress(address, ss58Format));
-    setPhrase(phrase);
-  };
+      setAddress(keyring.encodeAddress(address, ss58Format));
+      setPhrase(phrase);
+    },
+    [ss58Format]
+  );
 
-  const _onChangeSS58Format = (value: string): void => {
-    setSS58Format(parseInt(value, 10));
-  };
+  const _onChangeSS58Format = useCallback(
+    (value: string) =>
+      () => setSS58Format(parseInt(value, 10)),
+    []
+  );
 
   useEffect((): void => {
     isReady && _onClickNew();
@@ -80,6 +90,7 @@ export default function App (): React.ReactElement<{}> | null {
       console.log('Error loading keyring ', e);
     }
 
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
     await globalAny.localStorage.init();
     await cryptoWaitReady();
 
@@ -88,6 +99,7 @@ export default function App (): React.ReactElement<{}> | null {
   };
 
   if (!isReady) {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     initialize();
   }
 
@@ -101,7 +113,8 @@ export default function App (): React.ReactElement<{}> | null {
       <SafeAreaView>
         <ScrollView
           contentInsetAdjustmentBehavior='automatic'
-          style={styles.scrollView}>
+          style={styles.scrollView}
+        >
           <View style={styles.body}>
             <View style={styles.sectionContainer}>
               <Text style={styles.mainTitle}>React-Native Example</Text>
@@ -137,7 +150,7 @@ export default function App (): React.ReactElement<{}> | null {
                   .map(({ text, value }): React.ReactNode => (
                     <Button
                       key={value}
-                      onPress={(): void => _onChangeSS58Format(value.toString())}
+                      onPress={_onChangeSS58Format(value.toString())}
                       title={text}
                     />
                   ))

packages/exampleReactNative/babel.config.js

@@ -1,6 +1,5 @@
-// Copyright 2017-2020 @polkadot/example-reactnative 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-2021 @polkadot/example-reactnative authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 module.exports = {
   presets: ['module:metro-react-native-babel-preset']

packages/exampleReactNative/index.js

@@ -1,10 +1,10 @@
-// Copyright 2017-2020 @polkadot/example-react 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-2021 @polkadot/example-react authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 import './nodeGlobalsShim.js';
 
 import { AppRegistry } from 'react-native';
+
 import App from './App';
 import { name as appName } from './app.json';
 

packages/exampleReactNative/ios/Podfile

@@ -1,38 +1,38 @@
 platform :ios, '9.0'
-require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
+require_relative '../../../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
 target 'exampleReactNative' do
   # Pods for exampleReactNative
-  pod 'FBLazyVector', :path => "../node_modules/react-native/Libraries/FBLazyVector"
-  pod 'FBReactNativeSpec', :path => "../node_modules/react-native/Libraries/FBReactNativeSpec"
-  pod 'RCTRequired', :path => "../node_modules/react-native/Libraries/RCTRequired"
-  pod 'RCTTypeSafety', :path => "../node_modules/react-native/Libraries/TypeSafety"
-  pod 'React', :path => '../node_modules/react-native/'
-  pod 'React-Core', :path => '../node_modules/react-native/'
-  pod 'React-CoreModules', :path => '../node_modules/react-native/React/CoreModules'
-  pod 'React-Core/DevSupport', :path => '../node_modules/react-native/'
-  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
-  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
-  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
-  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
-  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
-  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
-  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
-  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
-  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
-  pod 'React-Core/RCTWebSocket', :path => '../node_modules/react-native/'
+  pod 'FBLazyVector', :path => "../../../node_modules/react-native/Libraries/FBLazyVector"
+  pod 'FBReactNativeSpec', :path => "../../../node_modules/react-native/Libraries/FBReactNativeSpec"
+  pod 'RCTRequired', :path => "../../../node_modules/react-native/Libraries/RCTRequired"
+  pod 'RCTTypeSafety', :path => "../../../node_modules/react-native/Libraries/TypeSafety"
+  pod 'React', :path => '../../../node_modules/react-native/'
+  pod 'React-Core', :path => '../../../node_modules/react-native/'
+  pod 'React-CoreModules', :path => '../../../node_modules/react-native/React/CoreModules'
+  pod 'React-Core/DevSupport', :path => '../../../node_modules/react-native/'
+  pod 'React-RCTActionSheet', :path => '../../../node_modules/react-native/Libraries/ActionSheetIOS'
+  pod 'React-RCTAnimation', :path => '../../../node_modules/react-native/Libraries/NativeAnimation'
+  pod 'React-RCTBlob', :path => '../../../node_modules/react-native/Libraries/Blob'
+  pod 'React-RCTImage', :path => '../../../node_modules/react-native/Libraries/Image'
+  pod 'React-RCTLinking', :path => '../../../node_modules/react-native/Libraries/LinkingIOS'
+  pod 'React-RCTNetwork', :path => '../../../node_modules/react-native/Libraries/Network'
+  pod 'React-RCTSettings', :path => '../../../node_modules/react-native/Libraries/Settings'
+  pod 'React-RCTText', :path => '../../../node_modules/react-native/Libraries/Text'
+  pod 'React-RCTVibration', :path => '../../../node_modules/react-native/Libraries/Vibration'
+  pod 'React-Core/RCTWebSocket', :path => '../../../node_modules/react-native/'
 
-  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
-  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
-  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
-  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
-  pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
-  pod 'ReactCommon/turbomodule/core', :path => "../node_modules/react-native/ReactCommon"
-  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
+  pod 'React-cxxreact', :path => '../../../node_modules/react-native/ReactCommon/cxxreact'
+  pod 'React-jsi', :path => '../../../node_modules/react-native/ReactCommon/jsi'
+  pod 'React-jsiexecutor', :path => '../../../node_modules/react-native/ReactCommon/jsiexecutor'
+  pod 'React-jsinspector', :path => '../../../node_modules/react-native/ReactCommon/jsinspector'
+  pod 'ReactCommon/jscallinvoker', :path => "../../../node_modules/react-native/ReactCommon"
+  pod 'ReactCommon/turbomodule/core', :path => "../../../node_modules/react-native/ReactCommon"
+  pod 'Yoga', :path => '../../../node_modules/react-native/ReactCommon/yoga'
 
-  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
-  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
-  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
+  pod 'DoubleConversion', :podspec => '../../../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
+  pod 'glog', :podspec => '../../../node_modules/react-native/third-party-podspecs/glog.podspec'
+  pod 'Folly', :podspec => '../../../node_modules/react-native/third-party-podspecs/Folly.podspec'
 
 
   target 'exampleReactNativeTests' do

packages/exampleReactNative/metro.config.js

@@ -1,6 +1,5 @@
-// Copyright 2017-2020 @polkadot/example-reactnative 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-2021 @polkadot/example-reactnative authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 const path = require('path');
 const getWorkspaces = require('get-yarn-workspaces');

packages/exampleReactNative/nodeGlobalsShim.js

@@ -1,10 +1,10 @@
-// Copyright 2017-2020 @polkadot/example-reactnative 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-2021 @polkadot/example-reactnative authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 /* eslint-disable no-global-assign */
 
 import 'fast-text-encoding';
+
 import AsyncStorage from '@react-native-community/async-storage';
 
 class Storage {

packages/exampleReactNative/package.json

@@ -1,18 +1,7 @@
 {
   "name": "exampleReactNative",
-  "version": "0.52.1",
+  "version": "0.85.3",
   "private": true,
-  "workspaces": {
-    "nohoist": [
-      "react-native",
-      "react-native/**",
-      "react-native-randombytes",
-      "react-native-randombytes/**",
-      "@react-native-community/**",
-      "react-native-svg",
-      "react-native-svg/**"
-    ]
-  },
   "scripts": {
     "copy-workspace-packages": "yarn copy-identicon && yarn copy-ui-shared",
     "copy-identicon": "mkdir -p node_modules/@polkadot/reactnative-identicon && cp -r ../reactnative-identicon/build/* ./node_modules/@polkadot/reactnative-identicon",
@@ -23,36 +12,31 @@
     "test": "jest"
   },
   "dependencies": {
-    "@polkadot/reactnative-identicon": "0.52.1",
-    "@polkadot/ui-keyring": "0.52.1",
-    "@polkadot/ui-settings": "0.52.1",
-    "@react-native-community/async-storage": "^1.9.0",
-    "fast-text-encoding": "^1.0.1",
+    "@polkadot/keyring": "^7.3.1",
+    "@polkadot/reactnative-identicon": "0.85.3",
+    "@polkadot/ui-keyring": "0.85.3",
+    "@polkadot/ui-settings": "0.85.3",
+    "@polkadot/util": "^7.3.1",
+    "@polkadot/util-crypto": "^7.3.1",
+    "@react-native-community/async-storage": "^1.12.1",
+    "fast-text-encoding": "^1.0.3",
     "get-yarn-workspaces": "^1.0.2",
     "os-browserify": "^0.3.0",
     "process": "^0.11.10",
-    "react": "16.13.1",
-    "react-native": "^0.62.1",
+    "react": "^17.0.2",
+    "react-native": "^0.65.1",
     "react-native-crypto": "^2.2.0",
-    "react-native-randombytes": "^3.5.3",
-    "stream-http": "^3.1.0"
+    "react-native-randombytes": "^3.6.1",
+    "stream-http": "^3.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/runtime": "^7.9.2",
-    "@polkadot/keyring": "^2.8.1",
-    "@polkadot/util": "^2.8.1",
-    "@polkadot/util-crypto": "^2.8.1",
-    "@react-native-community/cli-platform-ios": "^4.5.0",
-    "@types/react-test-renderer": "16.9.2",
-    "babel-jest": "^25.2.6",
-    "metro-react-native-babel-preset": "^0.59.0",
-    "react-test-renderer": "16.13.1"
-  },
-  "peerDependencies": {
-    "@polkadot/keyring": "*",
-    "@polkadot/util": "*",
-    "@polkadot/util-crypto": "*"
+    "@babel/core": "^7.15.0",
+    "@babel/runtime": "^7.15.3",
+    "@react-native-community/cli-platform-ios": "^5.0.2",
+    "@types/react-test-renderer": "17.0.1",
+    "babel-jest": "^27.1.0",
+    "metro-react-native-babel-preset": "^0.66.2",
+    "react-test-renderer": "17.0.2"
   },
   "jest": {
     "preset": "react-native",

packages/react-identicon/package.json

@@ -1,21 +1,28 @@
 {
   "name": "@polkadot/react-identicon",
-  "version": "0.52.1",
+  "version": "0.85.3",
+  "type": "module",
   "description": "Renders an SVG picture representing an address",
   "main": "index.js",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
+  "sideEffects": [
+    "./detectPackage.js",
+    "./detectPackage.cjs"
   ],
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "maintainers": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.2",
-    "@polkadot/ui-settings": "0.52.1",
-    "@polkadot/ui-shared": "0.52.1",
-    "color": "^3.1.2",
-    "jdenticon": "2.2.0",
-    "react-copy-to-clipboard": "^5.0.2",
-    "styled-components": "^5.0.1"
+    "@babel/runtime": "^7.15.3",
+    "@polkadot/keyring": "^7.3.1",
+    "@polkadot/ui-settings": "0.85.3",
+    "@polkadot/ui-shared": "0.85.3",
+    "@polkadot/util": "^7.3.1",
+    "@polkadot/util-crypto": "^7.3.1",
+    "color": "^3.2.1",
+    "ethereum-blockies-base64": "^1.0.2",
+    "jdenticon": "3.1.1",
+    "react-copy-to-clipboard": "^5.0.4",
+    "styled-components": "^5.3.1"
   },
   "peerDependencies": {
     "@polkadot/keyring": "*",
@@ -23,15 +30,14 @@
     "@polkadot/util-crypto": "*",
     "react": "*",
     "react-dom": "*",
-    "react-is": "*"
+    "react-is": "*",
+    "styled-components": "*"
   },
   "devDependencies": {
-    "@polkadot/keyring": "^2.8.1",
-    "@polkadot/util": "^2.8.1",
-    "@polkadot/util-crypto": "^2.8.1",
-    "@types/react-copy-to-clipboard": "^4.3.0",
-    "@types/react-dom": "^16.9.6",
-    "@types/styled-components": "^5.0.1",
+    "@types/react-copy-to-clipboard": "^5.0.1",
+    "@types/react-dom": "^17.0.9",
+    "@types/styled-components": "^5.1.13",
+    "styled-components": "^5.3.1",
     "xmlserializer": "^0.6.1"
   }
 }

packages/react-identicon/src/Demo.tsx

@@ -1,17 +1,17 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 import React from 'react';
 import ReactDOM from 'react-dom';
+
 import { encodeAddress, randomAsU8a } from '@polkadot/util-crypto';
 
-import IdentityIcon from '.';
+import { Identicon } from '.';
 
 const THEMES = ['beachball', 'polkadot', 'substrate'];
 
 export default class Demo extends React.PureComponent {
-  public render (): React.ReactNode {
+  public override render (): React.ReactNode {
     const identities: string[] = [];
 
     while (identities.length !== 50) {
@@ -24,7 +24,7 @@ export default class Demo extends React.PureComponent {
       <div>
         <div>
           {identities.map((value, index): React.ReactNode => (
-            <IdentityIcon
+            <Identicon
               key={value.toString()}
               theme={THEMES[index % THEMES.length] as 'empty'}
               value={value}
@@ -33,7 +33,7 @@ export default class Demo extends React.PureComponent {
         </div>
         <div>
           {THEMES.map((theme): React.ReactNode => (
-            <IdentityIcon
+            <Identicon
               key={theme}
               theme={theme as 'empty'}
               value='5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY'

packages/react-identicon/src/Identicon.tsx

@@ -1,18 +1,18 @@
-// Copyright 2017-2020 @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-2021 @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, { ICON_DEFAULT_HOST } 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,6 +25,7 @@ const DEFAULT_SIZE = 64;
 const Components: Record<string, React.ComponentType<ComponentProps>> = {
   beachball: Beachball,
   empty: Empty,
+  ethereum: Ethereum,
   jdenticon: Jdenticon,
   polkadot: Polkadot,
   substrate: Jdenticon
@@ -43,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;
-      content: '';
-    }
-
-    &.highlight:before {
       box-shadow: 0 0 5px 2px #aaa;
+      content: '';
     }
   }
 `;
 
 class BaseIcon extends React.PureComponent<Props, State> {
-  public state: State = {
+  public override state: State = {
     address: '',
     publicKey: '0x'
   };
@@ -72,7 +69,15 @@ class BaseIcon extends React.PureComponent<Props, State> {
     BaseIcon.prefix = prefix;
   }
 
-  public static getDerivedStateFromProps ({ prefix = BaseIcon.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)
@@ -93,9 +98,9 @@ class BaseIcon 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
@@ -109,15 +114,15 @@ class BaseIcon extends React.PureComponent<Props, State> {
       );
   }
 
-  private getWrapped ({ address, publicKey }: State): React.ReactNode {
-    const { className, isAlternative, isHighlight, size = DEFAULT_SIZE, style, theme = settings.icon } = 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 === 'default' ? ICON_DEFAULT_HOST : 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}
       >
@@ -142,8 +147,8 @@ class BaseIcon extends React.PureComponent<Props, State> {
   }
 }
 
-function Identicon (props: Props): React.ReactElement<Props> {
+function Icon (props: Props): React.ReactElement<Props> {
   return <BaseIcon {...props} />;
 }
 
-export default React.memo(Identicon);
+export const Identicon = React.memo(Icon);

packages/react-identicon/src/bundle.ts

@@ -0,0 +1,7 @@
+// Copyright 2017-2021 @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/detectPackage.ts

@@ -0,0 +1,10 @@
+// Copyright 2017-2021 @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';
+import { detectPackage } from '@polkadot/util';
+
+import { packageInfo } from './packageInfo';
+
+detectPackage(packageInfo, typeof __dirname !== 'undefined' && __dirname, [settingsInfo, sharedInfo]);

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

@@ -1,13 +1,13 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Props } from '../types';
+import type { Props } from '../types';
 
 import React, { useCallback } from 'react';
+
 import { beachballIcon } from '@polkadot/ui-shared';
 
-function Beachball ({ address, className, size, style }: Props): React.ReactElement<Props> {
+function Identicon ({ address, className = '', size, style }: Props): React.ReactElement<Props> {
   const updateElem = useCallback(
     (node: HTMLDivElement): void => {
       node && node.appendChild(
@@ -19,11 +19,11 @@ function Beachball ({ address, className, size, style }: Props): React.ReactElem
 
   return (
     <div
-      className={`container ${className}`}
+      className={className}
       ref={updateElem}
       style={style}
     />
   );
 }
 
-export default React.memo(Beachball);
+export const Beachball = React.memo(Identicon);

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

@@ -1,24 +1,20 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Props } from '../types';
+import type { Props } from '../types';
 
 import React from 'react';
 
-function Empty ({ className, size, style }: Props): React.ReactElement<Props> {
+function Identicon ({ className = '', size, style }: Props): React.ReactElement<Props> {
   return (
-    <div
-      className={`container ${className}`}
+    <svg
+      className={className}
+      height={size}
       style={style}
-    >
-      <svg
-        height={size}
-        viewBox='0 0 64 64'
-        width={size}
-      />
-    </div>
+      viewBox='0 0 64 64'
+      width={size}
+    />
   );
 }
 
-export default React.memo(Empty);
+export const Empty = React.memo(Identicon);

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

@@ -0,0 +1,29 @@
+// Copyright 2017-2021 @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,16 +1,15 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Props } from '../types';
+import type { Props } from '../types';
 
+import * as jdenticon from 'jdenticon';
 import React from 'react';
-import jdenticon from 'jdenticon';
 
-function Jdenticon ({ className, publicKey, size, style }: Props): React.ReactElement<Props> {
+function Identicon ({ className = '', publicKey, size, style }: Props): React.ReactElement<Props> {
   return (
     <div
-      className={`container ${className}`}
+      className={className}
       dangerouslySetInnerHTML={{
         __html: jdenticon.toSvg(publicKey.substr(2), size)
       }}
@@ -19,4 +18,4 @@ function Jdenticon ({ className, publicKey, size, style }: Props): React.ReactEl
   );
 }
 
-export default React.memo(Jdenticon);
+export const Jdenticon = React.memo(Identicon);

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

@@ -1,7 +1,7 @@
+// Copyright 2018-2021 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
 // Copyright 2018 Paritytech via paritytech/oo7/polkadot-identicon
-// Copyright 2018-2020 @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,15 +16,12 @@
 //   - Move constants to file-level
 //   - Overall it is now just a static component, expecting an address as an input value
 
-import { Circle } from '@polkadot/ui-shared/icons/types';
-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 { polkadotIcon } from '@polkadot/ui-shared';
 
-interface Props extends BaseProps {
-  isAlternative?: boolean;
-}
+import { polkadotIcon } from '@polkadot/ui-shared';
 
 function renderCircle ({ cx, cy, fill, r }: Circle, key: number): React.ReactNode {
   return (
@@ -38,23 +35,20 @@ function renderCircle ({ cx, cy, fill, r }: Circle, key: number): React.ReactNod
   );
 }
 
-function Identicon ({ address, className, isAlternative = false, size, style }: Props): React.ReactElement<Props> {
+function Identicon ({ address, className = '', isAlternative = false, size, style }: Props): React.ReactElement<Props> {
   return (
-    <div
-      className={`container ${className}`}
+    <svg
+      className={className}
+      height={size}
+      id={address}
+      name={address}
       style={style}
+      viewBox='0 0 64 64'
+      width={size}
     >
-      <svg
-        height={size}
-        id={address}
-        name={address}
-        viewBox='0 0 64 64'
-        width={size}
-      >
-        {polkadotIcon(address, { isAlternative }).map(renderCircle)}
-      </svg>
-    </div>
+      {polkadotIcon(address, { isAlternative }).map(renderCircle)}
+    </svg>
   );
 }
 
-export default React.memo(Identicon);
+export const Polkadot = React.memo(Identicon);

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

@@ -1,8 +1,8 @@
-// Copyright 2017-2020 @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-2021 @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-2020 @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-2021 @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-2021 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Auto-generated by @polkadot/dev, do not edit
+
+export const packageInfo = { name: '@polkadot/react-identicon', version: '0.85.3' };

packages/react-identicon/src/types.ts

@@ -1,27 +1,33 @@
-// Copyright 2018-2020 @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-2021 @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/webpack.config.js

@@ -1,6 +1,5 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 const path = require('path');
 

packages/react-qr/package.json

@@ -1,21 +1,24 @@
 {
   "name": "@polkadot/react-qr",
-  "version": "0.52.1",
+  "version": "0.85.3",
+  "type": "module",
   "description": "Generates and reads QR codes",
   "main": "index.js",
+  "sideEffects": false,
   "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
+  "maintainers": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.2",
+    "@babel/runtime": "^7.15.3",
+    "@polkadot/util": "^7.3.1",
+    "@polkadot/util-crypto": "^7.3.1",
     "qrcode-generator": "^1.4.4",
-    "react-qr-reader": "^2.2.1"
+    "react-qr-reader": "^2.2.1",
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@types/react-qr-reader": "^2.1.2",
-    "@types/styled-components": "^5.0.1"
+    "@types/react-qr-reader": "^2.1.4",
+    "@types/styled-components": "^5.1.13"
   },
   "peerDependencies": {
     "@polkadot/util": "*",

packages/react-qr/src/Display.tsx

@@ -1,28 +1,32 @@
-// Copyright 2017-2020 @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-2021 @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 { 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;
   value: Uint8Array;
 }
 
-interface State {
+interface FrameState {
   frames: Uint8Array[];
   frameIdx: number;
   image: string | null;
+  valueHash: string | null;
+}
+
+interface TimerState {
   timerDelay: number;
   timerId: number | null;
-  valueHash: string | null;
 }
 
 const FRAME_DELAY = 2500;
@@ -31,8 +35,8 @@ 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
+  // HACK See our qrcode stringToBytes override as used internally. This
+  // will only work for the case where we actually pass `Bytes` in here
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   qr.addData(value as any, 'Byte');
   qr.make();
@@ -40,99 +44,94 @@ function getDataUrl (value: Uint8Array): string {
   return qr.createDataURL(16, 0);
 }
 
-class Display extends React.PureComponent<Props, State> {
-  public state: State = {
-    frameIdx: 0,
-    frames: [],
-    image: null,
-    timerDelay: FRAME_DELAY,
-    timerId: null,
-    valueHash: null
-  };
+function Display ({ className, size, skipEncoding, style, value }: Props): React.ReactElement<Props> | null {
+  const [{ image }, setFrameState] = useState<FrameState>({ frameIdx: 0, frames: [], image: null, valueHash: null });
+  const timerRef = useRef<TimerState>({ timerDelay: FRAME_DELAY, timerId: null });
 
-  public static getDerivedStateFromProps ({ skipEncoding = false, value }: 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 {
-      frameIdx: 0,
-      frames,
-      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;
+      }
+
+      timerRef.current.timerId = setTimeout(nextFrame, timerRef.current.timerDelay);
+
+      // 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
+      return {
+        ...state,
+        frameIdx,
+        image: getDataUrl(state.frames[frameIdx])
+      };
+    });
+
+    timerRef.current.timerId = window.setTimeout(nextFrame, FRAME_DELAY);
+
+    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.setTimeout(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) {
-      clearTimeout(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 { frameIdx, frames, timerDelay } = this.state;
-
-    if (!frames || frames.length <= 1) {
-      return;
-    }
-
-    const nextIdx = frameIdx === frames.length - 1
-      ? 0
-      : frameIdx + 1;
-    const nextDelay = timerDelay + ((nextIdx === 0) ? TIMER_INC : 0);
-    const timerId = setTimeout(this.nextFrame, nextDelay);
-
-    // 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]),
-      timerDelay: nextDelay,
-      timerId
-    });
-  }
+    </div>
+  );
 }
 
-export default styled(Display as React.ComponentClass<Props>)`
+export const QrDisplay = React.memo(styled(Display)`
   .ui--qr-Display {
     height: 100%;
     width: 100%;
@@ -146,4 +145,4 @@ export default styled(Display as React.ComponentClass<Props>)`
       width: auto !important;
     }
   }
-`;
+`);

packages/react-qr/src/DisplayAddress.tsx

@@ -1,25 +1,24 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
-
-import React, { useEffect, useState } from 'react';
+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;
 }
 
-function DisplayExtrinsic ({ address, className, genesisHash, size, style }: Props): React.ReactElement<Props> | null {
-  const [data, setData] = useState<Uint8Array | null>(null);
-
-  useEffect((): void => {
-    setData(createAddressPayload(address, genesisHash));
-  }, [address, genesisHash]);
+function DisplayAddress ({ address, className, genesisHash, size, style }: Props): React.ReactElement<Props> | null {
+  const data = useMemo(
+    () => createAddressPayload(address, genesisHash),
+    [address, genesisHash]
+  );
 
   if (!data) {
     return null;
@@ -36,4 +35,4 @@ function DisplayExtrinsic ({ address, className, genesisHash, size, style }: Pro
   );
 }
 
-export default React.memo(DisplayExtrinsic);
+export const QrDisplayAddress = React.memo(DisplayAddress);

packages/react-qr/src/DisplayPayload.tsx

@@ -1,26 +1,26 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
-
-import React, { useEffect, useState } from 'react';
+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;
+  genesisHash: Uint8Array | string;
   payload: Uint8Array;
+  size?: string | number;
+  style?: React.CSSProperties;
 }
 
-function DisplayPayload ({ address, className, cmd, payload, size, style }: Props): React.ReactElement<Props> | null {
-  const [data, setData] = useState<Uint8Array | null>(null);
-
-  useEffect((): void => {
-    setData(createSignPayload(address, cmd, payload));
-  }, [address, cmd, payload]);
+function DisplayPayload ({ address, className, cmd, genesisHash, payload, size, style }: Props): React.ReactElement<Props> | null {
+  const data = useMemo(
+    () => createSignPayload(address, cmd, payload, genesisHash),
+    [address, cmd, payload, genesisHash]
+  );
 
   if (!data) {
     return null;
@@ -36,4 +36,4 @@ function DisplayPayload ({ address, className, cmd, payload, size, style }: Prop
   );
 }
 
-export default React.memo(DisplayPayload);
+export const QrDisplayPayload = React.memo(DisplayPayload);

packages/react-qr/src/NetworkSpecs.tsx

@@ -1,25 +1,25 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { NetworkSpecsStruct } from '@polkadot/ui-settings';
+import type { NetworkSpecsStruct } from '@polkadot/ui-settings/types';
 
-import React, { useEffect, useState } from 'react';
-import QrDisplay from './Display';
-import { BaseProps } from './types';
+import React, { useMemo } from 'react';
 
+import { QrDisplay } from './Display';
 import { encodeString } from './util';
 
-interface Props extends BaseProps {
+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, setData] = useState<Uint8Array | null>(null);
-
-  useEffect((): void => {
-    setData(encodeString(JSON.stringify(networkSpecs)));
-  }, [networkSpecs]);
+  const data = useMemo(
+    () => encodeString(JSON.stringify(networkSpecs)),
+    [networkSpecs]
+  );
 
   if (!data) {
     return null;
@@ -36,4 +36,4 @@ function DisplayNetworkSpecs ({ className, networkSpecs, size, style }: Props):
   );
 }
 
-export default React.memo(DisplayNetworkSpecs);
+export const QrNetworkSpecs = React.memo(DisplayNetworkSpecs);

packages/react-qr/src/Scan.tsx

@@ -1,19 +1,19 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { BaseProps } from './types';
-
-import React, { useCallback } 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;
@@ -23,26 +23,25 @@ const DEFAULT_ERROR = (error: Error): void => {
 };
 
 function Scan ({ className, delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style }: Props): React.ReactElement<Props> {
+  const containerStyle = useMemo(
+    () => createImgSize(size),
+    [size]
+  );
+
   const _onError = useCallback(
-    (error: Error): void => onError(error),
+    (error: Error) => onError(error),
     [onError]
   );
 
   const _onScan = useCallback(
-    (data: string | null): void => {
-      if (!data || !onScan) {
-        return;
-      }
-
-      onScan(data);
-    },
+    (data: string | null) => data && onScan(data),
     [onScan]
   );
 
   return (
     <div
       className={className}
-      style={createImgSize(size)}
+      style={containerStyle}
     >
       <Reader
         className='ui--qr-Scan'
@@ -55,7 +54,7 @@ function Scan ({ className, delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onSc
   );
 }
 
-export default React.memo(styled(Scan)`
+export const QrScan = React.memo(styled(Scan)`
   .ui--qr-Scan {
     display: inline-block;
     height: 100%;

packages/react-qr/src/ScanAddress.tsx

@@ -1,46 +1,65 @@
-// Copyright 2017-2020 @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.
-
-import { BaseProps } from './types';
+// Copyright 2017-2021 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 import React, { useCallback } from 'react';
+
 import { assert } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
-import { ADDRESS_PREFIX } from './constants';
-import QrScan from './Scan';
+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
 }
 
-function ScanAddress ({ className, onError, onScan, size, style }: Props): React.ReactElement<Props> {
+function ScanAddress ({ className, isEthereum, onError, onScan, size, style }: Props): React.ReactElement<Props> {
   const _onScan = useCallback(
     (data: string | null): void => {
-      if (!data || !onScan) {
-        return;
-      }
+      if (data) {
+        try {
+          let prefix: string, content: string, genesisHash: string, name: string[];
 
-      try {
-        const [prefix, address, genesisHash, name] = data.split(':');
+          if (!isEthereum) {
+            [prefix, content, genesisHash, ...name] = data.split(':');
+          } else {
+            [prefix, content, ...name] = data.split(':');
+            genesisHash = '';
+            content = content.substring(0, 42);
+          }
 
-        assert(prefix === ADDRESS_PREFIX, `Invalid address received, expected '${ADDRESS_PREFIX}', found '${prefix}'`);
+          const expectedPrefix = (isEthereum ? 'ethereum' : ADDRESS_PREFIX);
+          const isValidPrefix = (prefix === expectedPrefix) || (prefix === SEED_PREFIX);
 
-        decodeAddress(address);
-        onScan({ address, genesisHash, name });
-      } catch (error) {
-        console.error('@polkadot/react-qr:QrScanAddress', error.message, data);
+          assert(isValidPrefix, `Invalid prefix received, expected '${expectedPrefix} or ${SEED_PREFIX}' , found '${prefix}'`);
+
+          const isAddress = prefix === expectedPrefix;
+
+          if (isAddress && !isEthereum) {
+            decodeAddress(content);
+          }
+
+          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]
+    [onScan, onError, isEthereum]
   );
 
   return (
@@ -54,4 +73,4 @@ function ScanAddress ({ className, onError, onScan, size, style }: Props): React
   );
 }
 
-export default React.memo(ScanAddress);
+export const QrScanAddress = React.memo(ScanAddress);

packages/react-qr/src/ScanSignature.tsx

@@ -1,31 +1,25 @@
-// Copyright 2017-2020 @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.
-
-import { BaseProps } from './types';
+// Copyright 2017-2021 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 import React, { useCallback } from 'react';
 
-import QrScan from './Scan';
+import { QrScan } from './Scan';
 
 interface ScanType {
   signature: 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;
 }
 
 function ScanSignature ({ className, onError, onScan, size, style }: Props): React.ReactElement<Props> {
   const _onScan = useCallback(
-    (signature: string | null): void => {
-      if (!signature || !onScan) {
-        return;
-      }
-
-      onScan({ signature: `0x${signature}` });
-    },
+    (signature: string | null) => signature && onScan({ signature: `0x${signature}` }),
     [onScan]
   );
 
@@ -40,4 +34,4 @@ function ScanSignature ({ className, onError, onScan, size, style }: Props): Rea
   );
 }
 
-export default React.memo(ScanSignature);
+export const QrScanSignature = React.memo(ScanSignature);

packages/react-qr/src/constants.ts

@@ -1,8 +1,8 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 const ADDRESS_PREFIX = 'substrate';
+const SEED_PREFIX = 'secret';
 const FRAME_SIZE = 1024;
 const SUBSTRATE_ID = new Uint8Array([0x53]);
 const CRYPTO_SR25519 = new Uint8Array([0x01]);
@@ -19,5 +19,6 @@ export {
   CMD_SIGN_MSG,
   CRYPTO_SR25519,
   FRAME_SIZE,
+  SEED_PREFIX,
   SUBSTRATE_ID
 };

packages/react-qr/src/index.tsx

@@ -1,9 +1,9 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-export { default as QrDisplayAddress } from './DisplayAddress';
-export { default as QrDisplayPayload } from './DisplayPayload';
-export { default as QrScanAddress } from './ScanAddress';
-export { default as QrScanSignature } from './ScanSignature';
-export { default as QrNetworkSpecs } from './NetworkSpecs';
+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/packageInfo.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2021 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Auto-generated by @polkadot/dev, do not edit
+
+export const packageInfo = { name: '@polkadot/react-qr', version: '0.85.3' };

packages/react-qr/src/qrcode.ts

@@ -1,6 +1,5 @@
-// Copyright 2017-2020 @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-2021 @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 };

packages/react-qr/src/types.ts

@@ -1,9 +0,0 @@
-// Copyright 2017-2020 @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 interface BaseProps {
-  className?: string;
-  size?: string | number;
-  style?: Record<string, string | number>;
-}

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

@@ -1,12 +1,11 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 import { u8aConcat, u8aToHex, u8aToString } from '@polkadot/util';
-
-import { createAddressPayload, createSignPayload, createFrames, decodeString, encodeNumber, encodeString } from './util';
 import { randomAsU8a } from '@polkadot/util-crypto';
 
+import { createAddressPayload, createFrames, createSignPayload, decodeString, encodeNumber, encodeString } from './util';
+
 describe('util', (): void => {
   describe('Uint8Array <-> string', (): void => {
     let u8a: Uint8Array;
@@ -64,7 +63,7 @@ describe('util', (): void => {
     it('encodes a payload properly', (): void => {
       expect(
         u8aToHex(
-          createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', 3, 'THIS IS SPARTA!')
+          createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', 3, 'THIS IS SPARTA!', '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe')
         )
       ).toEqual(
         '0x' + // prefix
@@ -72,7 +71,8 @@ describe('util', (): void => {
         '01' + // sr25519
         '03' + // sign tx
         'f4cd755672a8f9542ca9da4fbf2182e79135d94304002e6a09ffc96fef6e6c4c' + // publickey
-        '544849532049532053504152544121' // THIS IS SPARTA!
+        '544849532049532053504152544121' + // THIS IS SPARTA!
+        'b0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe' // genesisHash
       );
     });
   });
@@ -81,7 +81,7 @@ describe('util', (): void => {
     it('encodes frames properly', (): void => {
       expect(
         createFrames(
-          createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', 0, '0x12345678')
+          createSignPayload('5HbgaJEuVN5qGbkhgtuDQANivSWwHXWsC2erP1SQUXgciTVq', 0, '0x12345678', '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe')
         ).map((u8a): string => u8aToHex(u8a))
       ).toEqual([
         '0x' +
@@ -90,7 +90,8 @@ describe('util', (): void => {
         '0000' + // index
         '530100' + // payload info, substrate + sr25519 + signtx
         'f4cd755672a8f9542ca9da4fbf2182e79135d94304002e6a09ffc96fef6e6c4c' + // publicKey
-        '12345678' // data
+        '12345678' + // data
+        'b0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe' // genesisHash
       ]);
     });
   });

packages/react-qr/src/util.ts

@@ -1,6 +1,5 @@
-// Copyright 2017-2020 @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-2021 @polkadot/react-qr authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 import { isString, u8aConcat, u8aToU8a } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
@@ -33,13 +32,14 @@ export function createAddressPayload (address: string, genesisHash: string): Uin
   return encodeString(`${ADDRESS_PREFIX}:${address}:${genesisHash}`);
 }
 
-export function createSignPayload (address: string, cmd: number, payload: string | Uint8Array): Uint8Array {
+export function createSignPayload (address: string, cmd: number, payload: string | Uint8Array, genesisHash: string | Uint8Array): Uint8Array {
   return u8aConcat(
     SUBSTRATE_ID,
     CRYPTO_SR25519,
     new Uint8Array([cmd]),
     decodeAddress(address),
-    u8aToU8a(payload)
+    u8aToU8a(payload),
+    u8aToU8a(genesisHash)
   );
 }
 

packages/reactnative-identicon/package.json

@@ -1,25 +1,30 @@
 {
   "name": "@polkadot/reactnative-identicon",
-  "version": "0.52.1",
+  "version": "0.85.3",
+  "type": "module",
   "description": "Renders an SVG picture representing an address",
   "main": "index.js",
-  "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
+  "sideEffects": [
+    "./detectPackage.js",
+    "./detectPackage.cjs"
   ],
+  "author": "Jaco Greeff <jacogr@gmail.com>",
+  "maintainers": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.2",
-    "@polkadot/ui-shared": "0.52.1",
-    "react-native-svg": "^12.0.3"
+    "@babel/runtime": "^7.15.3",
+    "@polkadot/ui-shared": "0.85.3",
+    "@polkadot/util": "^7.3.1",
+    "@polkadot/util-crypto": "^7.3.1",
+    "react-native-svg": "^12.1.1"
   },
   "peerDependencies": {
+    "@polkadot/util": "*",
     "@polkadot/util-crypto": "*",
     "react": "*",
     "react-native": "*"
   },
   "devDependencies": {
-    "@polkadot/util-crypto": "^2.8.1",
-    "@types/react-native": "^0.62.1"
+    "@types/react-native": "^0.64.13"
   }
 }

packages/reactnative-identicon/src/Identicon.tsx

@@ -1,11 +1,11 @@
-// Copyright 2017-2020 @polkadot/reactnative-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-2021 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Prefix } from '@polkadot/util-crypto/address/types';
-import { Props as ComponentProps } from './types';
+import type { Prefix } from '@polkadot/util-crypto/address/types';
+import type { Props as ComponentProps } from './types';
 
 import React from 'react';
+
 import { isHex, isU8a, u8aToHex } from '@polkadot/util';
 import { decodeAddress, encodeAddress } from '@polkadot/util-crypto';
 
@@ -33,7 +33,7 @@ const Components: Record<string, React.ComponentType<ComponentProps>> = {
 };
 
 export default class IdentityIcon extends React.PureComponent<Props, State> {
-  public state: State = {
+  public override state: State = {
     address: '',
     publicKey: '0x'
   };
@@ -62,7 +62,7 @@ export default class IdentityIcon extends React.PureComponent<Props, State> {
     }
   }
 
-  public render (): React.ReactNode {
+  public override render (): React.ReactNode {
     const { theme = DEFAULT_THEME, size = DEFAULT_SIZE } = this.props;
     const { address, publicKey } = this.state;
 

packages/reactnative-identicon/src/detectPackage.ts

@@ -0,0 +1,9 @@
+// Copyright 2017-2021 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import { packageInfo as sharedInfo } from '@polkadot/ui-shared/packageInfo';
+import { detectPackage } from '@polkadot/util';
+
+import { packageInfo } from './packageInfo';
+
+detectPackage(packageInfo, typeof __dirname !== 'undefined' && __dirname, [sharedInfo]);

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

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

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

@@ -1,18 +1,14 @@
-// Copyright 2018-2020 @polkadot/reactnative-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-2021 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
-import { Circle as CircleType } from '@polkadot/ui-shared/icons/types';
-import { Props as BaseProps } from '../types';
+import type { Circle as CircleType } from '@polkadot/ui-shared/icons/types';
+import type { Props } from '../types';
 
 import React from 'react';
 import { View } from 'react-native';
 import Svg, { Circle as SvgCircle } from 'react-native-svg';
-import { polkadotIcon } from '@polkadot/ui-shared';
 
-interface Props extends BaseProps {
-  isAlternative?: boolean;
-}
+import { polkadotIcon } from '@polkadot/ui-shared';
 
 function renderCircle ({ cx, cy, fill, r }: CircleType, key: number): React.ReactNode {
   return (

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

@@ -1,6 +1,5 @@
-// Copyright 2017-2020 @polkadot/reactnative-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-2021 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 export { default as Empty } from './Empty';
 export { default as Polkadot } from './Polkadot';

packages/reactnative-identicon/src/index.ts

@@ -1,8 +1,11 @@
-// Copyright 2017-2020 @polkadot/reactnative-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-2021 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import './detectPackage';
 
 import Identicon from './Identicon';
+
 export * from './icons';
+export { packageInfo } from './packageInfo';
 
 export default Identicon;

packages/reactnative-identicon/src/packageInfo.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2021 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Auto-generated by @polkadot/dev, do not edit
+
+export const packageInfo = { name: '@polkadot/reactnative-identicon', version: '0.85.3' };

packages/reactnative-identicon/src/types.ts

@@ -1,9 +1,9 @@
-// Copyright 2018-2020 @polkadot/reactnative-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-2021 @polkadot/reactnative-identicon authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 export interface Props {
   address: string;
+  isAlternative?: boolean;
   publicKey: string;
   size: number;
 }

packages/ui-assets/package.json

@@ -1,14 +1,12 @@
 {
   "name": "@polkadot/ui-assets",
-  "version": "0.52.1",
+  "version": "0.85.3",
   "description": "Static assets shared accross projects",
   "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
-  "maintainers": [
-    "Jaco Greeff <jacogr@gmail.com>"
-  ],
+  "maintainers": [],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.2"
+    "@babel/runtime": "^7.15.3"
   }
 }

packages/ui-assets/src/index.ts

@@ -0,0 +1,4 @@
+// Copyright 2017-2021 @polkadot/ui-assets authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// empty

packages/ui-assets/src/packageInfo.ts

@@ -0,0 +1,6 @@
+// Copyright 2017-2021 @polkadot/ui-assets authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+// Auto-generated by @polkadot/dev, do not edit
+
+export const packageInfo = { name: '@polkadot/ui-assets', version: '0.85.3' };

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

@@ -1,6 +1,5 @@
-// Copyright 2017-2020 @polkadot/ui-assets 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-2021 @polkadot/ui-assets authors & contributors
+// SPDX-License-Identifier: Apache-2.0
 
 declare module '*.svg' {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any