[CI Skip] release/stable 0.58.1

skip-checks: true

.123trigger

@@ -1 +1,2 @@
 1
+0.57.20.57.3

.eslintrc.js

@@ -7,5 +7,14 @@ module.exports = {
     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/push-master.yml

@@ -10,7 +10,7 @@ jobs:
       matrix:
         step: ['build:release', 'docs:release']
     name: ${{ matrix.step }}
-    if: "! contains(github.event.head_commit.message, '[CI Skip]') && github.repository == 'polkadot-js/ui'"
+    if: "! startsWith(github.event.head_commit.message, '[CI Skip]') && github.repository == 'polkadot-js/ui'"
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v1
@@ -21,16 +21,13 @@ jobs:
         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

.yarnrc.yml

@@ -8,4 +8,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.js
     spec: "@yarnpkg/plugin-interactive-tools"
 
-yarnPath: .yarn/releases/yarn-rc.js
+yarnPath: .yarn/releases/yarn-2.1.1.cjs

CHANGELOG.md

@@ -1,73 +1,137 @@
-# 0.53.1 May 14, 2020
+# CHANGELOG
+
+## 0.58.1 Aug 31, 2020
+
+- Add Subsocial to ss58 defaults (Thanks to https://github.com/F3Joule)
+
+- Support QR scanning where name contains ":"
+- Support for Moonbeam ETH-compatible crypto types
+
+
+## 0.57.3 Jul 27, 2020
+
+- 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
+
+- Add Kulupu to ss58 options (https://github.com/carumusan)
+
+- 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
+
+- Better error-handling for invalid FileStore accounts (Thanks to https://github.com/yuhui1208)
+
+- 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
+
+- Add genesisHash to signer payload (Thanks to https://github.com/hanwencheng)
+- Allow QR scanning to parse mini keys (Thanks to https://github.com/hanwencheng)
+
+- 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
 
 - 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)
+
 - 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
+
+## 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
+
 - 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)
+
 - 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
 
 - 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
 
 - 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
 
 - Add resolver for jest requires (tests from src)
 
-# 0.48.1 Jan 30, 2020
+
+## 0.48.1 Jan 30, 2020
 
 - 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
 
 - 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)
+
 - 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.
 
 - 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
 
 - Update `@polkadot/util` to 1.4.1
 - Upddate to Babel 7.6
 
-# 0.43.1 Sep 10, 2019
+
+## 0.43.1 Sep 10, 2019
 
 - Add W3F Node for Kusama
 - Add extended info to ui-settings, i.e. info on each option
@@ -75,17 +139,20 @@
 - 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`
+
 - 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
 
 - Adapt interface to cater for new `@polkadot/keyring`, where pairs -
   - expose `address` getter instead of `address()`
@@ -97,16 +164,19 @@
 - 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
 
 - Address encoding changes, use encoded address instead of supplied
 
-# 0.39.1 May 22, 2019
+
+## 0.39.1 May 22, 2019
 
 - 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
 
 - Sorting of keyring addresses
 - Fix JSON import defaults (previously detection was not working for old accounts)
@@ -114,70 +184,84 @@
 - 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
 
 - 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
 
 - Small fixes, latest @polkadot/wasm-* packages
 
-# 0.35.1  Mar 29, 2019
+
+## 0.35.1  Mar 29, 2019
 
 - @polkadot/util & @polkadot/api 0.75.1
 
-# 0.34.1 Mar 28, 2019
+
+## 0.34.1 Mar 28, 2019
 
 - Fix for blake2 in Polkadot identicon generation
 
-# 0.33.1 Mar 23, 2019
+
+## 0.33.1 Mar 23, 2019
 
 - 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
 
 - 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
 
 - 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
 
 - Swap to publishing -beta.x on merge (non-breaking testing)
 
-# 0.29.1 Mar 13, 2019
+
+## 0.29.1 Mar 13, 2019
 
 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
 
 Default Substrate icon is Jdenticon
 
-# 0.27.1 Feb 20, 2019
+
+## 0.27.1 Feb 20, 2019
 
 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
 
 Add keyring support for sd25519 (schnorrkel)
 
-# 0.25.1 Jan 09, 2019
+
+## 0.25.1 Jan 09, 2019
 
 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
 
 - Split from apps

lerna.json

@@ -10,5 +10,5 @@
   "packages": [
     "packages/*"
   ],
-  "version": "0.53.1"
+  "version": "0.58.1"
 }

package.json

@@ -8,8 +8,7 @@
     "packages/*"
   ],
   "resolutions": {
-    "babel-core": "^7.0.0-bridge.0",
-    "typescript": "^3.8.3"
+    "babel-core": "^7.0.0-bridge.0"
   },
   "scripts": {
     "build": "polkadot-dev-build-ts",
@@ -30,18 +29,22 @@
     "test:one": "polkadot-dev-run-test"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/runtime": "^7.9.6",
-    "@polkadot/dev": "^0.52.19",
-    "@polkadot/ts": "^0.3.21",
-    "@types/jest": "^25.2.1",
+    "@babel/core": "^7.11.4",
+    "@babel/runtime": "^7.11.2",
+    "@polkadot/dev": "^0.55.43",
+    "@polkadot/ts": "^0.3.40",
+    "@types/jest": "^26.0.10",
     "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.2",
-    "vue-template-compiler": "^2.6.11",
+    "react-native": "^0.63.2",
+    "typedoc": "^0.18.0",
+    "typedoc-plugin-markdown": "^2.4.2",
+    "typedoc-plugin-no-inherit": "^1.1.10",
+    "vue-template-compiler": "^2.6.12",
     "webpack-serve": "^3.2.0"
-  }
+  },
+  "version": "0.58.1"
 }

packages/example-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/example-react",
-  "version": "0.53.1",
+  "version": "0.58.1",
   "description": "A very basic example with ui-* & react-* packages",
   "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -9,6 +9,6 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.6"
+    "@babel/runtime": "^7.11.2"
   }
 }

packages/example-react/src/index.tsx

@@ -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-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/example-vue",
-  "version": "0.53.1",
+  "version": "0.58.1",
   "description": "A very basic example with ui-* & vue-* packages",
   "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -9,6 +9,6 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.6"
+    "@babel/runtime": "^7.11.2"
   }
 }

packages/example-vue/src/index.ts

@@ -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/exampleReactNative/App.tsx

@@ -12,6 +12,7 @@ import { mnemonicGenerate, cryptoWaitReady } 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,7 +51,7 @@ 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);
@@ -80,6 +85,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 +94,7 @@ export default function App (): React.ReactElement<{}> | null {
   };
 
   if (!isReady) {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
     initialize();
   }
 

packages/exampleReactNative/package.json

@@ -1,6 +1,6 @@
 {
   "name": "exampleReactNative",
-  "version": "0.53.1",
+  "version": "0.58.1",
   "private": true,
   "workspaces": {
     "nohoist": [
@@ -23,30 +23,30 @@
     "test": "jest"
   },
   "dependencies": {
-    "@polkadot/reactnative-identicon": "0.53.1",
-    "@polkadot/ui-keyring": "0.53.1",
-    "@polkadot/ui-settings": "0.53.1",
-    "@react-native-community/async-storage": "^1.10.0",
-    "fast-text-encoding": "^1.0.2",
+    "@polkadot/reactnative-identicon": "0.58.1",
+    "@polkadot/ui-keyring": "0.58.1",
+    "@polkadot/ui-settings": "0.58.1",
+    "@react-native-community/async-storage": "^1.12.0",
+    "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.2",
+    "react-native": "^0.63.2",
     "react-native-crypto": "^2.2.0",
     "react-native-randombytes": "^3.5.3",
     "stream-http": "^3.1.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
-    "@babel/runtime": "^7.9.6",
-    "@polkadot/keyring": "^2.10.1",
-    "@polkadot/util": "^2.10.1",
-    "@polkadot/util-crypto": "^2.10.1",
-    "@react-native-community/cli-platform-ios": "^4.8.0",
-    "@types/react-test-renderer": "16.9.2",
-    "babel-jest": "^26.0.1",
-    "metro-react-native-babel-preset": "^0.59.0",
+    "@babel/core": "^7.11.4",
+    "@babel/runtime": "^7.11.2",
+    "@polkadot/keyring": "^3.4.1",
+    "@polkadot/util": "^3.4.1",
+    "@polkadot/util-crypto": "^3.4.1",
+    "@react-native-community/cli-platform-ios": "^4.11.0",
+    "@types/react-test-renderer": "16.9.3",
+    "babel-jest": "^26.3.0",
+    "metro-react-native-babel-preset": "^0.63.0",
     "react-test-renderer": "16.13.1"
   },
   "peerDependencies": {

packages/react-identicon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/react-identicon",
-  "version": "0.53.1",
+  "version": "0.58.1",
   "description": "Renders an SVG picture representing an address",
   "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -9,13 +9,12 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.6",
-    "@polkadot/ui-settings": "0.53.1",
-    "@polkadot/ui-shared": "0.53.1",
+    "@babel/runtime": "^7.11.2",
+    "@polkadot/ui-settings": "0.58.1",
+    "@polkadot/ui-shared": "0.58.1",
     "color": "^3.1.2",
     "jdenticon": "2.2.0",
-    "react-copy-to-clipboard": "^5.0.2",
-    "styled-components": "^5.1.0"
+    "react-copy-to-clipboard": "^5.0.2"
   },
   "peerDependencies": {
     "@polkadot/keyring": "*",
@@ -23,15 +22,17 @@
     "@polkadot/util-crypto": "*",
     "react": "*",
     "react-dom": "*",
-    "react-is": "*"
+    "react-is": "*",
+    "styled-components": "*"
   },
   "devDependencies": {
-    "@polkadot/keyring": "^2.10.1",
-    "@polkadot/util": "^2.10.1",
-    "@polkadot/util-crypto": "^2.10.1",
+    "@polkadot/keyring": "^3.4.1",
+    "@polkadot/util": "^3.4.1",
+    "@polkadot/util-crypto": "^3.4.1",
     "@types/react-copy-to-clipboard": "^4.3.0",
     "@types/react-dom": "^16.9.8",
-    "@types/styled-components": "^5.1.0",
+    "@types/styled-components": "^5.1.2",
+    "styled-components": "^5.1.1",
     "xmlserializer": "^0.6.1"
   }
 }

packages/react-identicon/src/Identicon.tsx

@@ -43,19 +43,15 @@ 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: '';
     }
   }
 `;
@@ -110,14 +106,14 @@ 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;
+    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;
 
     return (
       <Wrapper
-        className={`ui--IdentityIcon ${className}`}
+        className={`ui--IdentityIcon  ${className}`}
         key={address}
         style={style}
       >

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

@@ -7,7 +7,7 @@ import { 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 Beachball ({ address, className = '', size, style }: Props): React.ReactElement<Props> {
   const updateElem = useCallback(
     (node: HTMLDivElement): void => {
       node && node.appendChild(
@@ -19,7 +19,7 @@ function Beachball ({ address, className, size, style }: Props): React.ReactElem
 
   return (
     <div
-      className={`container ${className}`}
+      className={className}
       ref={updateElem}
       style={style}
     />

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

@@ -6,18 +6,15 @@ import { Props } from '../types';
 
 import React from 'react';
 
-function Empty ({ className, size, style }: Props): React.ReactElement<Props> {
+function Empty ({ 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}
+    />
   );
 }
 

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

@@ -7,10 +7,10 @@ import { Props } from '../types';
 import React from 'react';
 import jdenticon from 'jdenticon';
 
-function Jdenticon ({ className, publicKey, size, style }: Props): React.ReactElement<Props> {
+function Jdenticon ({ className = '', publicKey, size, style }: Props): React.ReactElement<Props> {
   return (
     <div
-      className={`container ${className}`}
+      className={className}
       dangerouslySetInnerHTML={{
         __html: jdenticon.toSvg(publicKey.substr(2), size)
       }}

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

@@ -17,15 +17,11 @@
 //   - 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 { Props } from '../types';
 
 import React from 'react';
 import { polkadotIcon } from '@polkadot/ui-shared';
 
-interface Props extends BaseProps {
-  isAlternative?: boolean;
-}
-
 function renderCircle ({ cx, cy, fill, r }: Circle, key: number): React.ReactNode {
   return (
     <circle
@@ -38,22 +34,19 @@ 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>
   );
 }
 

packages/react-identicon/src/types.ts

@@ -3,17 +3,20 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { 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 {

packages/react-qr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/react-qr",
-  "version": "0.53.1",
+  "version": "0.58.1",
   "description": "Generates and reads QR codes",
   "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -9,13 +9,13 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.6",
+    "@babel/runtime": "^7.11.2",
     "qrcode-generator": "^1.4.4",
     "react-qr-reader": "^2.2.1"
   },
   "devDependencies": {
     "@types/react-qr-reader": "^2.1.3",
-    "@types/styled-components": "^5.1.0"
+    "@types/styled-components": "^5.1.2"
   },
   "peerDependencies": {
     "@polkadot/util": "*",

packages/react-qr/src/Display.tsx

@@ -2,27 +2,31 @@
 // 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';
-
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { xxhashAsHex } from '@polkadot/util-crypto';
 
 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;
@@ -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 [containerStyle, setContainerStyle] = useState(createImgSize(size));
+  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);
+  // 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;
+      }
 
-    if (valueHash === prevState.valueHash) {
-      return null;
-    }
+      let frameIdx = state.frameIdx + 1;
 
-    const frames: Uint8Array[] = skipEncoding
-      ? [value]
-      : createFrames(value);
+      // 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;
+      }
 
-    // encode on demand
-    return {
-      frameIdx: 0,
-      frames,
-      image: getDataUrl(frames[0]),
-      valueHash
+      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 => {
+    setContainerStyle(createImgSize(size));
+  }, [size]);
+
+  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 default 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

@@ -2,16 +2,17 @@
 // 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';
-
 import React, { useEffect, useState } from 'react';
 
 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 {

packages/react-qr/src/DisplayPayload.tsx

@@ -2,25 +2,27 @@
 // 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';
-
 import React, { useEffect, useState } from 'react';
 
 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 {
+function DisplayPayload ({ address, className, cmd, genesisHash, 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]);
+    setData(createSignPayload(address, cmd, payload, genesisHash));
+  }, [address, cmd, payload, genesisHash]);
 
   if (!data) {
     return null;

packages/react-qr/src/NetworkSpecs.tsx

@@ -6,12 +6,14 @@ import { NetworkSpecsStruct } from '@polkadot/ui-settings';
 
 import React, { useEffect, useState } from 'react';
 import QrDisplay from './Display';
-import { BaseProps } from './types';
 
 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 {

packages/react-qr/src/Scan.tsx

@@ -2,18 +2,19 @@
 // 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';
-
-import React, { useCallback } from 'react';
+import React, { useCallback, useEffect, useState } 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 +24,26 @@ const DEFAULT_ERROR = (error: Error): void => {
 };
 
 function Scan ({ className, delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style }: Props): React.ReactElement<Props> {
+  const [containerStyle, setContainerStyle] = useState(createImgSize(size));
+
+  useEffect((): void => {
+    setContainerStyle(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'

packages/react-qr/src/ScanAddress.tsx

@@ -2,42 +2,48 @@
 // 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';
-
 import React, { useCallback } from 'react';
 import { assert } from '@polkadot/util';
 import { decodeAddress } from '@polkadot/util-crypto';
 
-import { ADDRESS_PREFIX } from './constants';
+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;
 }
 
 function ScanAddress ({ className, onError, onScan, size, style }: Props): React.ReactElement<Props> {
   const _onScan = useCallback(
     (data: string | null): void => {
-      if (!data || !onScan) {
-        return;
-      }
+      if (data) {
+        try {
+          const [prefix, content, genesisHash, ...name] = data.split(':');
+          const isValidPrefix = prefix === ADDRESS_PREFIX || prefix === SEED_PREFIX;
 
-      try {
-        const [prefix, address, genesisHash, name] = data.split(':');
+          assert(isValidPrefix, `Invalid prefix received, expected '${ADDRESS_PREFIX}/${SEED_PREFIX}' , found '${prefix}'`);
 
-        assert(prefix === ADDRESS_PREFIX, `Invalid address received, expected '${ADDRESS_PREFIX}', found '${prefix}'`);
+          const isAddress = prefix === ADDRESS_PREFIX;
 
-        decodeAddress(address);
-        onScan({ address, genesisHash, name });
-      } catch (error) {
-        console.error('@polkadot/react-qr:QrScanAddress', error.message, data);
+          if (isAddress) {
+            decodeAddress(content);
+          }
+
+          onScan({ content, genesisHash, isAddress, name: name?.length ? name.join(':') : undefined });
+        } catch (error) {
+          console.error('@polkadot/react-qr:QrScanAddress', (error as Error).message, data);
+        }
       }
     },
     [onScan]

packages/react-qr/src/ScanSignature.tsx

@@ -2,8 +2,6 @@
 // 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';
-
 import React, { useCallback } from 'react';
 
 import QrScan from './Scan';
@@ -12,20 +10,17 @@ 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]
   );
 

packages/react-qr/src/constants.ts

@@ -3,6 +3,7 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 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 +20,6 @@ export {
   CMD_SIGN_MSG,
   CRYPTO_SR25519,
   FRAME_SIZE,
+  SEED_PREFIX,
   SUBSTRATE_ID
 };

packages/react-qr/src/qrcode.ts

@@ -9,7 +9,7 @@ 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;
 

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

@@ -64,7 +64,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 +72,8 @@ describe('util', (): void => {
         '01' + // sr25519
         '03' + // sign tx
         'f4cd755672a8f9542ca9da4fbf2182e79135d94304002e6a09ffc96fef6e6c4c' + // publickey
-        '544849532049532053504152544121' // THIS IS SPARTA!
+        '544849532049532053504152544121' + // THIS IS SPARTA!
+        'b0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe' // genesisHash
       );
     });
   });
@@ -81,7 +82,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 +91,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

@@ -33,13 +33,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,6 +1,6 @@
 {
   "name": "@polkadot/reactnative-identicon",
-  "version": "0.53.1",
+  "version": "0.58.1",
   "description": "Renders an SVG picture representing an address",
   "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -9,8 +9,8 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.6",
-    "@polkadot/ui-shared": "0.53.1",
+    "@babel/runtime": "^7.11.2",
+    "@polkadot/ui-shared": "0.58.1",
     "react-native-svg": "^12.1.0"
   },
   "peerDependencies": {
@@ -19,7 +19,7 @@
     "react-native": "*"
   },
   "devDependencies": {
-    "@polkadot/util-crypto": "^2.10.1",
-    "@types/react-native": "^0.62.7"
+    "@polkadot/util-crypto": "^3.4.1",
+    "@types/react-native": "^0.63.10"
   }
 }

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

@@ -3,17 +3,13 @@
 // of the Apache-2.0 license. See the LICENSE file for details.
 
 import { Circle as CircleType } from '@polkadot/ui-shared/icons/types';
-import { Props as BaseProps } from '../types';
+import { 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;
-}
-
 function renderCircle ({ cx, cy, fill, r }: CircleType, key: number): React.ReactNode {
   return (
     <SvgCircle

packages/reactnative-identicon/src/types.ts

@@ -4,6 +4,7 @@
 
 export interface Props {
   address: string;
+  isAlternative?: boolean;
   publicKey: string;
   size: number;
 }

packages/ui-assets/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/ui-assets",
-  "version": "0.53.1",
+  "version": "0.58.1",
   "description": "Static assets shared accross projects",
   "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -9,6 +9,6 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.6"
+    "@babel/runtime": "^7.11.2"
   }
 }

packages/ui-keyring/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/ui-keyring",
-  "version": "0.53.1",
+  "version": "0.58.1",
   "main": "index.js",
   "repository": "https://github.com/polkadot-js/apps.git",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -17,23 +17,24 @@
     "./ledger/transportsWeb": "./ledger/transportsEmpty"
   },
   "dependencies": {
-    "@babel/runtime": "^7.9.6",
-    "@ledgerhq/hw-transport-webusb": "^5.15.0",
-    "ledger-polkadot": "^0.7.0",
+    "@babel/runtime": "^7.11.2",
+    "@ledgerhq/hw-transport-webusb": "^5.22.0",
+    "@zondax/ledger-polkadot": "^0.11.0",
     "mkdirp": "^1.0.4",
-    "rxjs": "^6.5.5",
+    "rxjs": "^6.6.2",
     "store": "^2.0.12"
   },
   "devDependencies": {
-    "@polkadot/keyring": "^2.10.1",
-    "@polkadot/types": "^1.14.1",
-    "@polkadot/util": "^2.10.1",
+    "@polkadot/keyring": "^3.4.1",
+    "@polkadot/types": "^1.31.1",
+    "@polkadot/util": "^3.4.1",
     "@types/ledgerhq__hw-transport-node-hid": "^4.22.1",
-    "@types/mkdirp": "^1.0.0",
+    "@types/ledgerhq__hw-transport-webusb": "^4.70.0",
+    "@types/mkdirp": "^1.0.1",
     "@types/store": "^2.0.2"
   },
   "optionalDependencies": {
-    "@ledgerhq/hw-transport-node-hid": "^5.15.0"
+    "@ledgerhq/hw-transport-node-hid": "^5.22.0"
   },
   "peerDependencies": {
     "@polkadot/keyring": "*",

packages/ui-keyring/src/Base.ts

@@ -15,7 +15,6 @@ import addresses from './observable/addresses';
 import contracts from './observable/contracts';
 import env from './observable/development';
 import BrowserStore from './stores/Browser'; // direct import (skip index with all)
-import { MAX_PASS_LEN } from './defaults';
 
 export default class Base {
   #accounts: AddressSubject;
@@ -91,7 +90,7 @@ export default class Base {
   }
 
   public isPassValid (password: string): boolean {
-    return password.length > 0 && password.length <= MAX_PASS_LEN;
+    return password.length > 0;
   }
 
   public setSS58Format (ss58Format?: Prefix): void {

packages/ui-keyring/src/Keyring.ts

@@ -11,7 +11,7 @@ import BN from 'bn.js';
 import createPair from '@polkadot/keyring/pair';
 import chains from '@polkadot/ui-settings/defaults/chains';
 import { bnToBn, hexToU8a, isHex, isString, u8aSorted } from '@polkadot/util';
-import { createKeyMulti } from '@polkadot/util-crypto';
+import { base64Decode, createKeyMulti } from '@polkadot/util-crypto';
 
 import env from './observable/development';
 import Base from './Base';
@@ -273,15 +273,14 @@ export class Keyring extends Base implements KeyringStruct {
   }
 
   public restoreAccount (json: KeyringPair$Json, password: string): KeyringPair {
-    const type = Array.isArray(json.encoding.content) ? json.encoding.content[1] : 'ed25519';
+    const cryptoType = Array.isArray(json.encoding.content) ? json.encoding.content[1] : 'ed25519';
+    const encType = Array.isArray(json.encoding.type) ? json.encoding.type : [json.encoding.type];
     const pair = createPair(
-      { toSS58: this.encodeAddress, type },
-      {
-        // FIXME Just for the transition period (ignoreChecksum)
-        publicKey: this.decodeAddress(json.address, true)
-      },
+      { toSS58: this.encodeAddress, type: cryptoType },
+      { publicKey: this.decodeAddress(json.address, true) },
       json.meta,
-      hexToU8a(json.encoded)
+      isHex(json.encoded) ? hexToU8a(json.encoded) : base64Decode(json.encoded),
+      encType
     );
 
     // unlock, save account and then lock (locking cleans secretKey, so needs to be last)

packages/ui-keyring/src/defaults.ts

@@ -8,7 +8,6 @@ import { decodeAddress } from '@polkadot/keyring';
 const ACCOUNT_PREFIX = 'account:';
 const ADDRESS_PREFIX = 'address:';
 const CONTRACT_PREFIX = 'contract:';
-const MAX_PASS_LEN = 32;
 
 function toHex (address: string): string {
   return u8aToHex(
@@ -38,6 +37,5 @@ export {
   addressKey,
   addressRegex,
   contractKey,
-  contractRegex,
-  MAX_PASS_LEN
+  contractRegex
 };

packages/ui-keyring/src/ledger/index.ts

@@ -2,9 +2,10 @@
 // This software may be modified and distributed under the terms
 // of the Apache-2.0 license. See the LICENSE file for details.
 
+import Transport from '@ledgerhq/hw-transport';
 import { LedgerAddress, LedgerSignature, LedgerTypes, LedgerVersion } from './types';
 
-import LedgerApp, { ResponseBase } from 'ledger-polkadot';
+import { ResponseBase, SubstrateApp, newKusamaApp, newPolkadotApp } from '@zondax/ledger-polkadot';
 import { assert, bufferToU8a, u8aToBuffer, u8aToHex } from '@polkadot/util';
 
 import allNode from './transportsNode';
@@ -20,36 +21,47 @@ const SUCCESS_CODE = 0x9000;
 
 const transports = allNode.concat(allWeb);
 
+const APPS: Record<string, (transport: Transport) => SubstrateApp> = {
+  kusama: newKusamaApp,
+  polkadot: newPolkadotApp
+};
+
+type Chain = keyof typeof APPS;
+
 // A very basic wrapper for a ledger app -
 //  - it connects automatically, creating an app as required
 //  - Promises return errors (instead of wrapper errors)
 export default class Ledger {
-  #app: LedgerApp | null = null;
+  #app: SubstrateApp | null = null;
 
-  #type: LedgerTypes;
+  #chain: Chain;
 
-  constructor (type: LedgerTypes) {
+  #transport: LedgerTypes;
+
+  constructor (transport: LedgerTypes, chain: Chain) {
     // u2f is deprecated
-    assert(['hid', 'webusb'].includes(type), `Unsupported transport ${type}`);
+    assert(['hid', 'webusb'].includes(transport), `Unsupported transport ${transport}`);
+    assert(Object.keys(APPS).includes(chain), `Unsupported chain ${chain}`);
 
-    this.#type = type;
+    this.#chain = chain;
+    this.#transport = transport;
   }
 
-  private async _getApp (): Promise<LedgerApp> {
+  private async _getApp (): Promise<SubstrateApp> {
     if (!this.#app) {
-      const def = transports.find(({ type }) => type === this.#type);
+      const def = transports.find(({ type }) => type === this.#transport);
 
-      assert(def, `Unable to find a transport for ${this.#type}`);
+      assert(def, `Unable to find a transport for ${this.#transport}`);
 
       const transport = await def.create();
 
-      this.#app = new LedgerApp(transport);
+      this.#app = APPS[this.#chain](transport);
     }
 
     return this.#app;
   }
 
-  private async _withApp <T> (fn: (app: LedgerApp) => Promise<T>): Promise<T> {
+  private async _withApp <T> (fn: (app: SubstrateApp) => Promise<T>): Promise<T> {
     try {
       const app = await this._getApp();
 
@@ -70,7 +82,7 @@ export default class Ledger {
   }
 
   public async getAddress (confirm = false, account = LEDGER_DEFAULT_ACCOUNT, change = LEDGER_DEFAULT_CHANGE, addressIndex = LEDGER_DEFAULT_INDEX): Promise<LedgerAddress> {
-    return this._withApp(async (app: LedgerApp): Promise<LedgerAddress> => {
+    return this._withApp(async (app: SubstrateApp): Promise<LedgerAddress> => {
       const { address, pubKey } = await this._wrapError(app.getAddress(account, change, addressIndex, confirm));
 
       return {
@@ -81,7 +93,7 @@ export default class Ledger {
   }
 
   public async getVersion (): Promise<LedgerVersion> {
-    return this._withApp(async (app: LedgerApp): Promise<LedgerVersion> => {
+    return this._withApp(async (app: SubstrateApp): Promise<LedgerVersion> => {
       const { device_locked: isLocked, major, minor, patch, test_mode: isTestMode } = await this._wrapError(app.getVersion());
 
       return {
@@ -93,7 +105,7 @@ export default class Ledger {
   }
 
   public async sign (message: Uint8Array, account = LEDGER_DEFAULT_ACCOUNT, change = LEDGER_DEFAULT_CHANGE, addressIndex = LEDGER_DEFAULT_INDEX): Promise<LedgerSignature> {
-    return this._withApp(async (app: LedgerApp): Promise<LedgerSignature> => {
+    return this._withApp(async (app: SubstrateApp): Promise<LedgerSignature> => {
       const buffer = u8aToBuffer(message);
       const { signature } = await this._wrapError(app.sign(account, change, addressIndex, buffer));
 

packages/ui-keyring/src/ledger/ledgerhq_hw-transport-webusb.d.ts

@@ -1 +0,0 @@
-declare module '@ledgerhq/hw-transport-webusb';

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

@@ -7,6 +7,7 @@ import { KeyringStore, KeyringJson } from '../types';
 import fs from 'fs';
 import mkdirp from 'mkdirp';
 import path from 'path';
+import { assert } from '@polkadot/util';
 
 // NOTE untested and unused by any known apps, probably broken in various mysterious ways
 export default class FileStore implements KeyringStore {
@@ -23,14 +24,20 @@ export default class FileStore implements KeyringStore {
   public all (cb: (key: string, value: KeyringJson) => void): void {
     fs
       .readdirSync(this.#path)
-      .filter((key): boolean => !['.', '..'].includes(key))
+      .filter((key): boolean => !['.', '..', '.DS_Store'].includes(key))
       .forEach((key): void => {
-        cb(key, this._readKey(key));
+        const value = this._readKey(key);
+
+        value?.address && cb(key, value);
       });
   }
 
   public get (key: string, cb: (value: KeyringJson) => void): void {
-    cb(this._readKey(key));
+    const value = this._readKey(key);
+
+    assert(value?.address, `Invalid JSON found for ${key}`);
+
+    cb(value);
   }
 
   public remove (key: string, cb?: () => void): void {
@@ -47,9 +54,15 @@ export default class FileStore implements KeyringStore {
     return path.join(this.#path, key);
   }
 
-  private _readKey (key: string): KeyringJson {
-    return JSON.parse(
-      fs.readFileSync(this._getPath(key)).toString('utf-8')
-    );
+  private _readKey (key: string): KeyringJson | undefined {
+    try {
+      return JSON.parse(
+        fs.readFileSync(this._getPath(key)).toString('utf-8')
+      ) as KeyringJson;
+    } catch (error) {
+      console.error(error);
+    }
+
+    return undefined;
   }
 }

packages/ui-keyring/src/types.ts

@@ -26,7 +26,6 @@ export interface KeyringOptions extends KeyringOptionsBase {
   store?: KeyringStore;
 }
 
-// eslint-disable-next-line @typescript-eslint/class-name-casing
 export interface KeyringJson$Meta {
   contract?: ContractMeta;
   genesisHash?: string | null;
@@ -39,8 +38,7 @@ export interface KeyringJson$Meta {
   whenCreated?: number;
   whenEdited?: number;
   whenUsed?: number;
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  [index: string]: any;
+  [index: string]: unknown;
 }
 
 export interface KeyringJson {

packages/ui-settings/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/ui-settings",
-  "version": "0.53.1",
+  "version": "0.58.1",
   "description": "Manages app settings",
   "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -9,12 +9,12 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.6",
-    "eventemitter3": "^4.0.1",
+    "@babel/runtime": "^7.11.2",
+    "eventemitter3": "^4.0.6",
     "store": "^2.0.12"
   },
   "devDependencies": {
-    "@polkadot/util": "^2.10.1",
+    "@polkadot/util": "^3.4.1",
     "@types/store": "^2.0.2"
   },
   "peerDependencies": {

packages/ui-settings/src/Settings.ts

@@ -6,7 +6,7 @@ import EventEmitter from 'eventemitter3';
 import store from 'store';
 import { isUndefined } from '@polkadot/util';
 
-import { CAMERA_DEFAULT, CAMERA, CRYPTOS, ENDPOINT_DEFAULT, ENDPOINTS, ICON_DEFAULT, ICONS, LANGUAGE_DEFAULT, LEDGER_CONN, LEDGER_CONN_DEFAULT, LOCKING_DEFAULT, LOCKING, PREFIX_DEFAULT, PREFIXES, UIMODE_DEFAULT, UIMODES, UITHEME_DEFAULT, UITHEMES } from './defaults';
+import { CAMERA_DEFAULT, CAMERA, CRYPTOS, CRYPTOS_ETH, ENDPOINT_DEFAULT, ENDPOINTS, ICON_DEFAULT, ICONS, LANGUAGE_DEFAULT, LEDGER_CONN, LEDGER_CONN_DEFAULT, LOCKING_DEFAULT, LOCKING, PREFIX_DEFAULT, PREFIXES, UIMODE_DEFAULT, UIMODES, UITHEME_DEFAULT, UITHEMES } from './defaults';
 import { Option, SettingsStruct } from './types';
 
 type ChangeCallback = (settings: SettingsStruct) => void;
@@ -42,11 +42,11 @@ export class Settings implements SettingsStruct {
   #uiTheme: string;
 
   constructor () {
-    const settings = store.get('settings') || {};
+    const settings = (store.get('settings') as SettingsStruct) || {};
 
     this.#emitter = new EventEmitter();
 
-    this.#apiUrl = (typeof settings.apiUrl === 'string' && settings.apiUrl) || process.env.WS_URL || ENDPOINT_DEFAULT;
+    this.#apiUrl = (typeof settings.apiUrl === 'string' && settings.apiUrl) || process.env.WS_URL || (ENDPOINT_DEFAULT.value as string);
     this.#camera = withDefault(CAMERA, settings.camera, CAMERA_DEFAULT);
     this.#ledgerConn = withDefault(LEDGER_CONN, settings.ledgerConn, LEDGER_CONN_DEFAULT);
     this.#i18nLang = settings.i18nLang || LANGUAGE_DEFAULT;
@@ -101,6 +101,10 @@ export class Settings implements SettingsStruct {
     return CRYPTOS;
   }
 
+  public get availableCryptosEth (): Option[] {
+    return CRYPTOS_ETH;
+  }
+
   public get availableIcons (): Option[] {
     return ICONS;
   }

packages/ui-settings/src/defaults/chains.ts

@@ -9,6 +9,9 @@ const chains: Record<string, ChainDef> = {
     '0x3fd7b9eb6a00376e5be61f01abb429ffb0b104be05eaff4d458da48fcd425baf', // Kusama CC1
     '0xe3777fa922cafbff200cadeaea1a76bd7898ad5b89f7848999058b50e715f636', // Kusama CC2
     '0xb0a8d493285c2df73290dfb7e61f870f17b41801197a149ca93654499ea3dafe' // Kusama CC3
+  ],
+  polkadot: [
+    '0x91b171bb158e2d3848fa23a9f1c25182fb8e20313b2c1eb49219da7a70ce90c3' // Polkadot CC1
   ]
 };
 

packages/ui-settings/src/defaults/crypto.ts

@@ -6,18 +6,26 @@ import { Option } from '../types';
 
 export const CRYPTOS: Option[] = [
   {
-    info: 'ecdsa',
-    text: 'ECDSA (ecdsa)',
-    value: 'ecdsa'
+    info: 'sr25519',
+    text: 'Schnorrkel (sr25519, recommended)',
+    value: 'sr25519'
   },
   {
     info: 'ed25519',
-    text: 'Edwards (ed25519)',
+    text: 'Edwards (ed25519, alternative)',
     value: 'ed25519'
   },
   {
-    info: 'sr25519',
-    text: 'Schnorrkel (sr25519)',
-    value: 'sr25519'
+    info: 'ecdsa',
+    text: 'ECDSA (Non BTC/ETH compatible)',
+    value: 'ecdsa'
+  }
+];
+
+export const CRYPTOS_ETH: Option[] = [
+  {
+    info: 'ethereum',
+    text: 'ECDSA (ETH compatible)',
+    value: 'ethereum'
   }
 ];

packages/ui-settings/src/defaults/index.ts

@@ -4,7 +4,7 @@
 
 import { Option } from '../types';
 
-import { CRYPTOS } from './crypto';
+import { CRYPTOS, CRYPTOS_ETH } from './crypto';
 import { ENDPOINTS, ENDPOINT_DEFAULT } from './endpoints';
 import { LEDGER_CONN, LEDGER_CONN_DEFAULT } from './ledger';
 import { PREFIXES, PREFIX_DEFAULT } from './ss58';
@@ -46,6 +46,7 @@ export {
   CAMERA_DEFAULT,
   CAMERA,
   CRYPTOS,
+  CRYPTOS_ETH,
   ENDPOINT_DEFAULT,
   ENDPOINTS,
   ICON_DEFAULT,

packages/ui-settings/src/defaults/ss58.ts

@@ -12,24 +12,36 @@ export const PREFIXES: Option[] = [
     text: 'Default for the connected node',
     value: -1
   },
+  // keep as first (well, after default)
   {
     info: 'substrate',
-    text: 'Substrate (development)',
+    text: 'Substrate (generic)',
     value: 42
   },
+  // all in ascending order based on value
+  {
+    info: 'polkadot',
+    text: 'Polkadot (live)',
+    value: 0
+  },
   {
     info: 'kusama',
     text: 'Kusama (canary)',
     value: 2
   },
-  {
-    info: 'polkadot',
-    text: 'Polkadot (live)',
-    value: 0
-  },
   {
     info: 'edgeware',
     text: 'Edgeware (live)',
     value: 7
+  },
+  {
+    info: 'kulupu',
+    text: 'Kulupu (live)',
+    value: 16
+  },
+  {
+    info: 'subsocial',
+    text: 'Subsocial (live)',
+    value: 28
   }
 ];

packages/ui-shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/ui-shared",
-  "version": "0.53.1",
+  "version": "0.58.1",
   "description": "Shared logic that is usable accross all frameworks-specific areas",
   "main": "index.js",
   "author": "Jaco Greeff <jacogr@gmail.com>",
@@ -9,7 +9,7 @@
   ],
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.6",
+    "@babel/runtime": "^7.11.2",
     "color": "^3.1.2"
   },
   "peerDependencies": {
@@ -17,8 +17,9 @@
     "@polkadot/util-crypto": "*"
   },
   "devDependencies": {
-    "@polkadot/util": "^2.10.1",
-    "@polkadot/util-crypto": "^2.10.1",
-    "@types/color": "^3.0.1"
+    "@polkadot/util": "^3.4.1",
+    "@polkadot/util-crypto": "^3.4.1",
+    "@types/color": "^3.0.1",
+    "@types/xmlserializer": "^0.6.1"
   }
 }

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

@@ -7,7 +7,7 @@ import container from './container';
 describe('container', (): void => {
   it('applies default styles', (): void => {
     expect(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
       (container(100).style as any)._values
     ).toMatchObject({
       background: 'white',
@@ -23,7 +23,7 @@ describe('container', (): void => {
 
   it('overrides with supplied styles', (): void => {
     expect(
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/no-unsafe-member-access
       (container(50, 'black', '', { display: 'block' }).style as any)._values
     ).toMatchObject({
       background: 'black',

packages/ui-shared/src/icons/beachball/xmlserializer.d.ts

@@ -1,5 +0,0 @@
-// Copyright 2017-2020 @polkadot/ui-shared authors & contributors
-// This software may be modified and distributed under the terms
-// of the Apache-2.0 license. See the LICENSE file for details.
-
-declare module 'xmlserializer';

packages/vue-identicon/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@polkadot/vue-identicon",
-  "version": "0.53.1",
+  "version": "0.58.1",
   "description": "Renders an SVG picture representing an address",
   "author": "Jaco Greeff <jacogr@gmail.com>",
   "maintainers": [
@@ -9,8 +9,8 @@
   "main": "index.js",
   "license": "Apache-2.0",
   "dependencies": {
-    "@babel/runtime": "^7.9.6",
-    "@polkadot/ui-shared": "0.53.1",
+    "@babel/runtime": "^7.11.2",
+    "@polkadot/ui-shared": "0.58.1",
     "jdenticon": "2.2.0"
   },
   "peerDependencies": {
@@ -18,7 +18,7 @@
     "vue": "*"
   },
   "devDependencies": {
-    "@polkadot/util-crypto": "^2.10.1",
-    "vue": "^2.6.11"
+    "@polkadot/util-crypto": "^3.4.1",
+    "vue": "^2.6.12"
   }
 }

packages/vue-identicon/src/Identicon.ts

@@ -65,8 +65,8 @@ export const Identicon = Vue.extend({
   },
   methods: {
     createData: function (): void {
-      this.iconSize = this.size || DEFAULT_SIZE;
-      this.type = this.theme;
+      this.iconSize = this.size as number || DEFAULT_SIZE;
+      this.type = this.theme as 'empty';
 
       this.recodeAddress();
     },

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

@@ -25,7 +25,7 @@ export const Jdenticon = Vue.extend({
   },
   methods: {
     createSvgHtml: function (): void {
-      this.svgHtml = jdenticon.toSvg(this.publicKey.substr(2), this.size);
+      this.svgHtml = jdenticon.toSvg((this.publicKey as string).substr(2), this.size);
     }
   },
   props: ['publicKey', 'size'],

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

@@ -9,6 +9,11 @@ interface Data {
   svgHtml: string;
 }
 
+interface This {
+  address: string;
+  isAlternative?: boolean;
+}
+
 /**
  * @name Polkadot
  * @description The Polkadot default identicon
@@ -25,11 +30,11 @@ export const Polkadot = Vue.extend({
   },
   methods: {
     createSvgHtml: function (): void {
-      const circles = polkadotIcon(this.address, { isAlternative: this.isAlternative || false }).map(({ cx, cy, fill, r }) =>
+      const circles = polkadotIcon(this.address, { isAlternative: (this as This).isAlternative || false }).map(({ cx, cy, fill, r }) =>
         `<circle cx=${cx} cy=${cy} fill="${fill}" r=${r} />`
       ).join('');
 
-      this.svgHtml = `<svg height=${this.size} viewBox='0 0 64 64' width=${this.size}>${circles}</svg>`;
+      this.svgHtml = `<svg height=${this.size as number} viewBox='0 0 64 64' width=${this.size as number}>${circles}</svg>`;
     }
   },
   props: ['address', 'isAlternative', 'size'],