[CI Skip] release/stable 2.0.1

skip-checks: true

.github/workflows/auto-approve.yml

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

.github/workflows/auto-merge.yml

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

.github/workflows/lock.yml

@@ -7,6 +7,8 @@ on:
 jobs:
   lock:
     runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_SCRIPTS: false
     steps:
       - uses: dessant/lock-threads@v2
         with:

.github/workflows/pr-any.yml

@@ -8,6 +8,8 @@ jobs:
         step: ['lint', 'test', 'build']
     name: ${{ matrix.step }}
     runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_SCRIPTS: false
     steps:
     - uses: actions/checkout@v2
     - name: ${{ matrix.step }}

.github/workflows/push-master.yml

@@ -12,17 +12,18 @@ jobs:
         step: ['build:release']
     name: ${{ matrix.step }}
     runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_SCRIPTS: false
+      CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
+      GH_PAT: ${{ secrets.GH_PAT }}
+      GH_RELEASE_GITHUB_API_TOKEN: ${{ secrets.GH_PAT }}
+      NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
     steps:
     - uses: actions/checkout@v2
       with:
         fetch-depth: 0
         token: ${{ secrets.GH_PAT }}
     - name: ${{ matrix.step }}
-      env:
-        CC_TEST_REPORTER_ID: ${{ secrets.CC_TEST_REPORTER_ID }}
-        GH_PAT: ${{ secrets.GH_PAT }}
-        GH_RELEASE_GITHUB_API_TOKEN: ${{ secrets.GH_PAT }}
-        NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       run: |
         yarn install --immutable | grep -v 'YN0013'
         yarn ${{ matrix.step }}

.github/workflows/semgrep.yml

@@ -9,6 +9,8 @@ jobs:
   check:
     if: "! startsWith(github.event.head_commit.message, '[CI Skip]') && (!github.event.pull_request || github.event.pull_request.head.repo.full_name == github.repository)"
     runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_SCRIPTS: false
     steps:
       - uses: actions/checkout@v2
       - uses: returntocorp/semgrep-action@v1

.github/workflows/stale.yml

@@ -6,6 +6,8 @@ on:
 jobs:
   stale:
     runs-on: ubuntu-latest
+    env:
+      YARN_ENABLE_SCRIPTS: false
     steps:
       - uses: actions/stale@v3
         with:

.gitignore

@@ -1,4 +1,6 @@
 build/
+build-cjs/
+build-esm/
 build-docs/
 coverage/
 node_modules/

.yarnrc.yml

@@ -10,4 +10,4 @@ plugins:
   - path: .yarn/plugins/@yarnpkg/plugin-version.cjs
     spec: "@yarnpkg/plugin-version"
 
-yarnPath: .yarn/releases/yarn-3.1.1.cjs
+yarnPath: .yarn/releases/yarn-3.2.0.cjs

CHANGELOG.md

@@ -1,5 +1,49 @@
 # CHANGELOG
 
+## 2.0.1 Apr 9, 2022
+
+- **Breaking change** In this major version the commonjs outputs are moved to a sub-folder. Since the export map and main field in package.json does reflect this change, there should be no usage changes. However the packages here will all need to be on the same version for internal linkage.
+
+Changes:
+
+- Adjust Polkadot icon generation with lazy init
+- Output commonjs files under the `cjs/**` root
+- Upgrade to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 9.0.1
+
+
+## 1.4.1 Mar 27, 2022
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.7.1
+
+
+## 1.3.1 Mar 19, 2022
+
+Changes:
+
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.6.1
+- Additional workaround for Vite bundling
+
+
+## 1.2.1 Mar 12, 2022
+
+Changes:
+
+- Adjust for bundlers where `import.meta.url` is undefined
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.5.1
+
+
+## 1.1.1 Feb 14, 2022
+
+Changes:
+
+- Adjust ordering in state & timeouts for QR display
+- Add `timerDelay` property to QR display to control frame timeouts
+- Adjust webpack example config (cleanups, remove unneeded plugins)
+- Updated to `@polkadot/{hw-ledger, keyring, util, util-crypto}` 8.4.1
+
+
 ## 1.0.1 Jan 29, 2022
 
 **Breaking change** The `Ledger` export from `@polkadot/ui-keyring` has been removed. For users of this class, import it directly from `@polkadot/hw-ledger`

CONTRIBUTORS

@@ -1,4 +1,4 @@
-     579	Jaco                          	1.0.1 (#605)
+     606	Jaco                          	2.0.1 (#633)
        7	YJ                            	fix #224: decrease frame size to 1024, set multipart bool (#225)
        4	Antoine Estienne              	Refactor logic to better use prefix (#491)
        4	kwingram25                    	fix ff api url issue (#289)

README.md

@@ -30,5 +30,4 @@ Additionally some shared libraries, that is not dependent on any framework -
 In addition to the above packages, there are examples available for intergation  of `ui-keyring`, `ui-settings` & the relevant `*-identicon` package. These are
 
 - [example-react](packages/example-react) - start with `yarn example:react` and view on `http://localhost:8080`
-- [example-reactnative](packages/exampleReactNative) - start with `yarn example:rn:packager` to start the packager service and then either `yarn example:rn:android` or `yarn example:rn:ios` in another terminal
 - [example-vue](packages/example-vue) - start with `yarn example:vue` and view on `http://localhost:8080`

package.json

@@ -3,14 +3,14 @@
   "bugs": "https://github.com/polkadot-js/ui/issues",
   "homepage": "https://github.com/polkadot-js/ui#readme",
   "license": "Apache-2.0",
-  "packageManager": "yarn@3.0.1",
+  "packageManager": "yarn@3.2.0",
   "private": true,
   "repository": {
     "type": "git",
     "url": "https://github.com/polkadot-js/ui.git"
   },
   "sideEffects": false,
-  "version": "1.0.1",
+  "version": "2.0.1",
   "workspaces": [
     "packages/*"
   ],
@@ -19,39 +19,34 @@
     "build:release": "polkadot-ci-ghact-build",
     "build:rollup": "polkadot-exec-rollup --config",
     "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",
-    "demo:identicon:vue": "yarn build && webpack-serve --config packages/vue-identicon/webpack.config.js --content packages/vue-identicon --port 8080",
-    "example:react": "yarn build && cd packages/example-react && webpack --config webpack.config.js",
-    "example:rn:android": "cd packages/exampleReactNative && yarn android",
-    "example:rn:ios": "cd packages/exampleReactNative && cd ios && pod install && cd .. && yarn ios",
-    "example:rn:packager": "yarn build && cd packages/exampleReactNative && yarn copy-workspace-packages && yarn start",
-    "example:vue": "yarn build && cd packages/example-vue && webpack --config webpack.config.js",
+    "example:react": "yarn build && cd packages/example-react && webpack --config webpack.config.cjs",
+    "example:vue": "yarn build && cd packages/example-vue && webpack --config webpack.config.cjs",
     "lint": "polkadot-dev-run-lint",
     "postinstall": "polkadot-dev-yarn-only",
     "test": "polkadot-dev-run-test --coverage --runInBand",
     "test:one": "polkadot-dev-run-test"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.12",
-    "@babel/runtime": "^7.16.7",
-    "@polkadot/dev": "^0.65.46",
-    "@polkadot/x-bundle": "^8.3.3",
-    "@types/jest": "^27.4.0",
-    "babel-loader": "^8.2.3",
+    "@babel/core": "^7.17.9",
+    "@babel/runtime": "^7.17.9",
+    "@polkadot/dev": "^0.66.1",
+    "@polkadot/x-bundle": "^9.0.1",
+    "@types/jest": "^27.4.1",
+    "babel-loader": "^8.2.4",
     "babel-plugin-transform-vue-template": "^0.4.2",
     "empty": "^0.10.1",
     "process": "^0.11.10",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-is": "^17.0.2",
-    "react-native": "^0.67.1",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-is": "^18.0.0",
+    "react-native": "^0.68.0",
     "stream-browserify": "^3.0.0",
     "vue-template-compiler": "^2.6.14",
-    "webpack": "^5.67.0",
+    "webpack": "^5.72.0",
     "webpack-cli": "^4.9.2",
     "webpack-serve": "^4.0.0"
   },
   "resolutions": {
-    "typescript": "^4.5.5"
+    "typescript": "^4.6.3"
   }
 }

packages/example-react/package.json

@@ -14,9 +14,9 @@
     "url": "https://github.com/polkadot-js/ui.git"
   },
   "sideEffects": false,
-  "version": "1.0.1",
+  "version": "2.0.1",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.16.7"
+    "@babel/runtime": "^7.17.9"
   }
 }

packages/example-react/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/example-react', path: 'auto', type: 'auto', version: '1.0.1' };
+export const packageInfo = { name: '@polkadot/example-react', path: 'auto', type: 'auto', version: '2.0.1' };

packages/example-react/webpack.config.cjs

@@ -3,7 +3,6 @@
 
 const path = require('path');
 const { WebpackPluginServe } = require('webpack-plugin-serve');
-const webpack = require('webpack');
 
 module.exports = {
   context: __dirname,
@@ -37,12 +36,6 @@ module.exports = {
       port: 8080,
       progress: false, // since we have hmr off, disable
       static: __dirname
-    }),
-    new webpack.ProvidePlugin({
-      Buffer: ['buffer', 'Buffer']
-    }),
-    new webpack.ProvidePlugin({
-      process: 'process/browser'
     })
   ],
   resolve: {
@@ -51,14 +44,11 @@ module.exports = {
       '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/build'),
       '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
       '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'),
-      'process/browser': require.resolve('process/browser'),
       'react/jsx-runtime': require.resolve('react/jsx-runtime')
     },
     extensions: ['.js', '.ts', '.tsx'],
-    fallback: {
-      buffer: require.resolve('buffer'),
-      stream: require.resolve('stream-browserify')
-    }
+    fallback: {}
   },
+  target: 'web',
   watch: true
 };

packages/example-vue/package.json

@@ -14,9 +14,9 @@
     "url": "https://github.com/polkadot-js/ui.git"
   },
   "sideEffects": false,
-  "version": "1.0.1",
+  "version": "2.0.1",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.16.7"
+    "@babel/runtime": "^7.17.9"
   }
 }

packages/example-vue/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/example-vue', path: 'auto', type: 'auto', version: '1.0.1' };
+export const packageInfo = { name: '@polkadot/example-vue', path: 'auto', type: 'auto', version: '2.0.1' };

packages/example-vue/webpack.config.cjs

@@ -2,9 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 const path = require('path');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
 const { WebpackPluginServe } = require('webpack-plugin-serve');
-const webpack = require('webpack');
 
 module.exports = {
   context: __dirname,
@@ -22,10 +20,6 @@ module.exports = {
             options: require('../../babel.config.cjs')
           }
         ]
-      },
-      {
-        loader: 'vue-loader',
-        test: /\.vue$/
       }
     ]
   },
@@ -42,13 +36,6 @@ module.exports = {
       port: 8080,
       progress: false, // since we have hmr off, disable
       static: __dirname
-    }),
-    new VueLoaderPlugin(),
-    new webpack.ProvidePlugin({
-      Buffer: ['buffer', 'Buffer']
-    }),
-    new webpack.ProvidePlugin({
-      process: 'process/browser'
     })
   ],
   resolve: {
@@ -56,10 +43,10 @@ module.exports = {
       '@polkadot/ui-keyring': path.resolve(__dirname, '../ui-keyring/build'),
       '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
       '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'),
-      '@polkadot/vue-identicon': path.resolve(__dirname, '../vue-identicon/build'),
-      'process/browser': require.resolve('process/browser')
+      '@polkadot/vue-identicon': path.resolve(__dirname, '../vue-identicon/build')
     },
     extensions: ['.js', '.ts', '.tsx']
   },
+  target: 'web',
   watch: true
 };

packages/react-identicon/package.json

@@ -17,26 +17,26 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@polkadot/keyring": "^8.3.3",
-    "@polkadot/ui-settings": "1.0.1",
-    "@polkadot/ui-shared": "1.0.1",
-    "@polkadot/util": "^8.3.3",
-    "@polkadot/util-crypto": "^8.3.3",
+    "@babel/runtime": "^7.17.9",
+    "@polkadot/keyring": "^9.0.1",
+    "@polkadot/ui-settings": "2.0.1",
+    "@polkadot/ui-shared": "2.0.1",
+    "@polkadot/util": "^9.0.1",
+    "@polkadot/util-crypto": "^9.0.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.3"
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@types/react-copy-to-clipboard": "^5.0.2",
-    "@types/react-dom": "^17.0.11",
-    "@types/styled-components": "^5.1.21",
-    "styled-components": "^5.3.3",
+    "@types/react-dom": "^18.0.0",
+    "@types/styled-components": "^5.1.25",
+    "styled-components": "^5.3.5",
     "xmlserializer": "^0.6.1"
   },
   "peerDependencies": {

packages/react-identicon/src/Demo.tsx

@@ -1,54 +0,0 @@
-// Copyright 2017-2022 @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 { Identicon } from '.';
-
-const THEMES = ['beachball', 'polkadot', 'substrate'];
-
-export default class Demo extends React.PureComponent {
-  public override render (): React.ReactNode {
-    const identities: string[] = [];
-
-    while (identities.length !== 50) {
-      identities.push(
-        encodeAddress(randomAsU8a(32))
-      );
-    }
-
-    return (
-      <div>
-        <div>
-          {identities.map((value, index): React.ReactNode => (
-            <Identicon
-              key={value.toString()}
-              theme={THEMES[index % THEMES.length] as 'empty'}
-              value={value}
-            />
-          ))}
-        </div>
-        <div>
-          {THEMES.map((theme): React.ReactNode => (
-            <Identicon
-              key={theme}
-              theme={theme as 'empty'}
-              value='5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY'
-            />
-          ))}
-        </div>
-      </div>
-    );
-  }
-}
-
-const rootElement = document.getElementById('demo');
-
-if (!rootElement) {
-  throw new Error('Unable to find element with id \'demo\'');
-}
-
-ReactDOM.render(<Demo />, rootElement);

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

@@ -4,15 +4,18 @@
 import type { Props } from '../types';
 
 import * as jdenticon from 'jdenticon';
-import React from 'react';
+import React, { useMemo } from 'react';
 
 function Identicon ({ className = '', publicKey, size, style }: Props): React.ReactElement<Props> {
+  const html = useMemo(
+    () => ({ __html: jdenticon.toSvg(publicKey.substr(2), size) }),
+    [publicKey, size]
+  );
+
   return (
     <div
       className={className}
-      dangerouslySetInnerHTML={{
-        __html: jdenticon.toSvg(publicKey.substr(2), size)
-      }}
+      dangerouslySetInnerHTML={html}
       style={style}
     />
   );

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

@@ -19,7 +19,7 @@
 import type { Circle } from '@polkadot/ui-shared/icons/types';
 import type { Props } from '../types';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 
 import { polkadotIcon } from '@polkadot/ui-shared';
 
@@ -36,6 +36,11 @@ function renderCircle ({ cx, cy, fill, r }: Circle, key: number): React.ReactNod
 }
 
 function Identicon ({ address, className = '', isAlternative = false, size, style }: Props): React.ReactElement<Props> {
+  const circles = useMemo(
+    () => polkadotIcon(address, { isAlternative }),
+    [address, isAlternative]
+  );
+
   return (
     <svg
       className={className}
@@ -46,7 +51,7 @@ function Identicon ({ address, className = '', isAlternative = false, size, styl
       viewBox='0 0 64 64'
       width={size}
     >
-      {polkadotIcon(address, { isAlternative }).map(renderCircle)}
+      {circles.map(renderCircle)}
     </svg>
   );
 }

packages/react-identicon/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/react-identicon', path: 'auto', type: 'auto', version: '1.0.1' };
+export const packageInfo = { name: '@polkadot/react-identicon', path: 'auto', type: 'auto', version: '2.0.1' };

packages/react-identicon/webpack.config.js

@@ -1,45 +0,0 @@
-// Copyright 2017-2022 @polkadot/react-identicon authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-const path = require('path');
-const webpack = require('webpack');
-const ENV = process.env.NODE_ENV || 'development';
-const isProd = ENV === 'production';
-
-module.exports = {
-  context: __dirname,
-  devtool: isProd ? 'source-map' : 'eval-cheap-source-map',
-  entry: './src/Demo.tsx',
-  mode: ENV,
-  module: {
-    rules: [
-      {
-        exclude: /(node_modules)/,
-        test: /\.(js|ts|tsx)$/,
-        use: [
-          'babel-loader'
-        ]
-      }
-    ]
-  },
-  output: {
-    filename: './Demo.js',
-    path: path.join(__dirname, 'build')
-  },
-  plugins: [
-    new webpack.ProvidePlugin({
-      Buffer: ['buffer', 'Buffer']
-    }),
-    new webpack.ProvidePlugin({
-      process: 'process/browser'
-    })
-  ],
-  resolve: {
-    alias: {
-      '@polkadot/ui-settings': path.resolve(__dirname, '../ui-settings/build'),
-      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'),
-      'process/browser': require.resolve('process/browser')
-    },
-    extensions: ['.js', '.jsx', '.ts', '.tsx']
-  }
-};

packages/react-qr/package.json

@@ -17,20 +17,20 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@polkadot/ui-settings": "1.0.1",
-    "@polkadot/util": "^8.3.3",
-    "@polkadot/util-crypto": "^8.3.3",
+    "@babel/runtime": "^7.17.9",
+    "@polkadot/ui-settings": "2.0.1",
+    "@polkadot/util": "^9.0.1",
+    "@polkadot/util-crypto": "^9.0.1",
     "qrcode-generator": "^1.4.4",
     "react-qr-reader": "^2.2.1",
-    "styled-components": "^5.3.3"
+    "styled-components": "^5.3.5"
   },
   "devDependencies": {
     "@types/react-qr-reader": "^2.1.4",
-    "@types/styled-components": "^5.1.21"
+    "@types/styled-components": "^5.1.25"
   },
   "peerDependencies": {
     "@polkadot/util": "*",

packages/react-qr/src/Display.tsx

@@ -15,6 +15,7 @@ interface Props {
   size?: string | number;
   skipEncoding?: boolean;
   style?: React.CSSProperties;
+  timerDelay?: number;
   value: Uint8Array;
 }
 
@@ -30,7 +31,7 @@ interface TimerState {
   timerId: number | null;
 }
 
-const FRAME_DELAY = 2500;
+const DEFAULT_FRAME_DELAY = 2750;
 const TIMER_INC = 500;
 
 function getDataUrl (value: Uint8Array): string {
@@ -44,9 +45,9 @@ function getDataUrl (value: Uint8Array): string {
   return qr.createDataURL(16, 0);
 }
 
-function Display ({ className, size, skipEncoding, style, value }: Props): React.ReactElement<Props> | null {
+function Display ({ className, size, skipEncoding, style, timerDelay = DEFAULT_FRAME_DELAY, value }: Props): React.ReactElement<Props> | null {
   const [{ image }, setFrameState] = useState<FrameState>({ frameIdx: 0, frames: [], image: null, valueHash: null });
-  const timerRef = useRef<TimerState>({ timerDelay: FRAME_DELAY, timerId: null });
+  const timerRef = useRef<TimerState>({ timerDelay, timerId: null });
 
   const containerStyle = useMemo(
     () => createImgSize(size),
@@ -69,18 +70,21 @@ function Display ({ className, size, skipEncoding, style, value }: Props): React
         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 objectSpread({}, state, {
+      const newState = objectSpread<FrameState>({}, state, {
         frameIdx,
         image: getDataUrl(state.frames[frameIdx])
       });
+
+      // set the new timer last
+      timerRef.current.timerId = setTimeout(nextFrame, timerRef.current.timerDelay);
+
+      return newState;
     });
 
-    timerRef.current.timerId = window.setTimeout(nextFrame, FRAME_DELAY);
+    timerRef.current.timerId = window.setTimeout(nextFrame, timerRef.current.timerDelay);
 
     return (): void => {
       // eslint-disable-next-line react-hooks/exhaustive-deps

packages/react-qr/src/DisplayAddress.tsx

@@ -12,9 +12,10 @@ interface Props {
   className?: string;
   size?: string | number;
   style?: React.CSSProperties;
+  timerDelay?: number;
 }
 
-function DisplayAddress ({ address, className, genesisHash, size, style }: Props): React.ReactElement<Props> | null {
+function DisplayAddress ({ address, className, genesisHash, size, style, timerDelay }: Props): React.ReactElement<Props> | null {
   const data = useMemo(
     () => createAddressPayload(address, genesisHash),
     [address, genesisHash]
@@ -30,6 +31,7 @@ function DisplayAddress ({ address, className, genesisHash, size, style }: Props
       size={size}
       skipEncoding
       style={style}
+      timerDelay={timerDelay}
       value={data}
     />
   );

packages/react-qr/src/DisplayPayload.tsx

@@ -10,13 +10,15 @@ interface Props {
   address: string;
   className?: string;
   cmd: number;
+  delay?: number;
   genesisHash: Uint8Array | string;
   payload: Uint8Array;
   size?: string | number;
   style?: React.CSSProperties;
+  timerDelay?: number;
 }
 
-function DisplayPayload ({ address, className, cmd, genesisHash, payload, size, style }: Props): React.ReactElement<Props> | null {
+function DisplayPayload ({ address, className, cmd, genesisHash, payload, size, style, timerDelay }: Props): React.ReactElement<Props> | null {
   const data = useMemo(
     () => createSignPayload(address, cmd, payload, genesisHash),
     [address, cmd, payload, genesisHash]
@@ -31,6 +33,7 @@ function DisplayPayload ({ address, className, cmd, genesisHash, payload, size,
       className={className}
       size={size}
       style={style}
+      timerDelay={timerDelay}
       value={data}
     />
   );

packages/react-qr/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/react-qr', path: 'auto', type: 'auto', version: '1.0.1' };
+export const packageInfo = { name: '@polkadot/react-qr', path: 'auto', type: 'auto', version: '2.0.1' };

packages/reactnative-identicon/package.json

@@ -17,17 +17,17 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@polkadot/ui-shared": "1.0.1",
-    "@polkadot/util": "^8.3.3",
-    "@polkadot/util-crypto": "^8.3.3",
-    "react-native-svg": "^12.2.0"
+    "@babel/runtime": "^7.17.9",
+    "@polkadot/ui-shared": "2.0.1",
+    "@polkadot/util": "^9.0.1",
+    "@polkadot/util-crypto": "^9.0.1",
+    "react-native-svg": "^12.3.0"
   },
   "devDependencies": {
-    "@types/react-native": "^0.66.15"
+    "@types/react-native": "^0.67.3"
   },
   "peerDependencies": {
     "@polkadot/util": "*",

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

@@ -4,7 +4,7 @@
 import type { Circle as CircleType } from '@polkadot/ui-shared/icons/types';
 import type { Props } from '../types';
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { View } from 'react-native';
 import Svg, { Circle as SvgCircle } from 'react-native-svg';
 
@@ -23,6 +23,11 @@ function renderCircle ({ cx, cy, fill, r }: CircleType, key: number): React.Reac
 }
 
 export default function Identicon ({ address, isAlternative = false, size }: Props): React.ReactElement<Props> {
+  const circles = useMemo(
+    () => polkadotIcon(address, { isAlternative }),
+    [address, isAlternative]
+  );
+
   return (
     <View>
       <Svg
@@ -31,7 +36,7 @@ export default function Identicon ({ address, isAlternative = false, size }: Pro
         viewBox='0 0 64 64'
         width={size}
       >
-        {polkadotIcon(address, { isAlternative }).map(renderCircle)}
+        {circles.map(renderCircle)}
       </Svg>
     </View>
   );

packages/reactnative-identicon/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/reactnative-identicon', path: 'auto', type: 'auto', version: '1.0.1' };
+export const packageInfo = { name: '@polkadot/reactnative-identicon', path: 'auto', type: 'auto', version: '2.0.1' };

packages/ui-assets/package.json

@@ -13,10 +13,10 @@
     "url": "https://github.com/polkadot-js/ui.git"
   },
   "sideEffects": false,
-  "version": "1.0.1",
+  "version": "2.0.1",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@polkadot/util": "^8.3.3"
+    "@babel/runtime": "^7.17.9",
+    "@polkadot/util": "^9.0.1"
   }
 }

packages/ui-assets/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/ui-assets', path: 'auto', type: 'auto', version: '1.0.1' };
+export const packageInfo = { name: '@polkadot/ui-assets', path: 'auto', type: 'auto', version: '2.0.1' };

packages/ui-keyring/package.json

@@ -16,16 +16,16 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@polkadot/keyring": "^8.3.3",
-    "@polkadot/ui-settings": "1.0.1",
-    "@polkadot/util": "^8.3.3",
-    "@polkadot/util-crypto": "^8.3.3",
+    "@babel/runtime": "^7.17.9",
+    "@polkadot/keyring": "^9.0.1",
+    "@polkadot/ui-settings": "2.0.1",
+    "@polkadot/util": "^9.0.1",
+    "@polkadot/util-crypto": "^9.0.1",
     "mkdirp": "^1.0.4",
-    "rxjs": "^7.5.2",
+    "rxjs": "^7.5.5",
     "store": "^2.0.12"
   },
   "devDependencies": {

packages/ui-keyring/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/ui-keyring', path: 'auto', type: 'auto', version: '1.0.1' };
+export const packageInfo = { name: '@polkadot/ui-keyring', path: 'auto', type: 'auto', version: '2.0.1' };

packages/ui-settings/package.json

@@ -17,12 +17,12 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@polkadot/networks": "^8.3.3",
-    "@polkadot/util": "^8.3.3",
+    "@babel/runtime": "^7.17.9",
+    "@polkadot/networks": "^9.0.1",
+    "@polkadot/util": "^9.0.1",
     "eventemitter3": "^4.0.7",
     "store": "^2.0.12"
   },

packages/ui-settings/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/ui-settings', path: 'auto', type: 'auto', version: '1.0.1' };
+export const packageInfo = { name: '@polkadot/ui-settings', path: 'auto', type: 'auto', version: '2.0.1' };

packages/ui-shared/package.json

@@ -17,16 +17,16 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
+    "@babel/runtime": "^7.17.9",
     "color": "^3.2.1"
   },
   "devDependencies": {
-    "@polkadot/util": "^8.3.3",
-    "@polkadot/util-crypto": "^8.3.3",
-    "@types/color": "^3.0.2",
+    "@polkadot/util": "^9.0.1",
+    "@polkadot/util-crypto": "^9.0.1",
+    "@types/color": "^3.0.3",
     "@types/xmlserializer": "^0.6.2",
     "xmlserializer": "^0.6.1"
   },

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

@@ -22,7 +22,6 @@ const blake2 = (value: Uint8Array): Uint8Array =>
 const S = 64;
 const C = S / 2;
 const Z = S / 64 * 5;
-const ZERO = blake2(new Uint8Array(32));
 
 /* eslint-disable sort-keys */
 const SCHEMA: { [index: string]: Scheme } = {
@@ -43,6 +42,8 @@ const OUTER_CIRCLE: Circle = {
   r: C
 };
 
+let zeroHash: Uint8Array = new Uint8Array();
+
 function getRotation (isSixPoint: boolean): { r: number; ro2: number; r3o4: number; ro4: number; rroot3o2: number; rroot3o4: number } {
   const r = isSixPoint
     ? (C / 8 * 5)
@@ -98,7 +99,11 @@ function findScheme (d: number): Scheme {
 }
 
 function addressToId (address: string): Uint8Array {
-  return blake2(decodeAddress(address)).map((x, i): number => (x + 256 - ZERO[i]) % 256);
+  if (!zeroHash.length) {
+    zeroHash = blake2(new Uint8Array(32));
+  }
+
+  return blake2(decodeAddress(address)).map((x, i) => (x + 256 - zeroHash[i]) % 256);
 }
 
 function getColors (address: string): string[] {
@@ -132,10 +137,19 @@ function getColors (address: string): string[] {
  * @description Generate a array of the circles that make up an identicon
  */
 export function polkadotIcon (address: string, { isAlternative }: Options): Circle[] {
-  const colors = getColors(address);
+  const xy = getCircleXY(isAlternative);
+  let colors: string[];
+
+  try {
+    // in some cases, e.g. RN where crypto may not be initialized, chaos can
+    // happen when hashing, in these cases we just fill with a placeholder
+    colors = getColors(address);
+  } catch {
+    colors = new Array<string>(xy.length).fill('#ddd');
+  }
 
   return [OUTER_CIRCLE].concat(
-    getCircleXY(isAlternative).map(([cx, cy], index): Circle => ({
+    xy.map(([cx, cy], index): Circle => ({
       cx, cy, fill: colors[index], r: Z
     }))
   );

packages/ui-shared/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/ui-shared', path: 'auto', type: 'auto', version: '1.0.1' };
+export const packageInfo = { name: '@polkadot/ui-shared', path: 'auto', type: 'auto', version: '2.0.1' };

packages/vue-identicon/package.json

@@ -17,13 +17,13 @@
     "./detectPackage.cjs"
   ],
   "type": "module",
-  "version": "1.0.1",
+  "version": "2.0.1",
   "main": "index.js",
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@polkadot/ui-shared": "1.0.1",
-    "@polkadot/util": "^8.3.3",
-    "@polkadot/util-crypto": "^8.3.3",
+    "@babel/runtime": "^7.17.9",
+    "@polkadot/ui-shared": "2.0.1",
+    "@polkadot/util": "^9.0.1",
+    "@polkadot/util-crypto": "^9.0.1",
     "jdenticon": "3.1.1"
   },
   "devDependencies": {

packages/vue-identicon/src/Demo.ts

@@ -1,40 +0,0 @@
-// Copyright 2017-2022 @polkadot/vue-identicon authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-import Vue, { VNode } from 'vue';
-
-import Identicon from './index';
-
-interface Data {
-  address: string;
-  size: number;
-}
-
-/**
- * @name Demo
- * @description Demo component
- */
-const Demo = Vue.extend({
-  components: {
-    Identicon
-  },
-  data: function (): Data {
-    return {
-      address: '5GrwvaEF5zXb26Fz9rcQpDWS57CtERHpNehXCPcNoHGKutQY',
-      size: 128
-    };
-  },
-  name: 'Demo',
-  template: `
-    <div id="demo">
-      <Identicon :size="size" :theme="'polkadot'" :value="address" />
-      <Identicon :size="size" :theme="'substrate'" :value="address" />
-      <Identicon :size="size" :theme="'beachball'" :value="address" />
-      <Identicon :size="size" :theme="'empty'" />
-    </div>
-  `
-});
-
-new Vue({
-  render: (h): VNode => h(Demo)
-}).$mount('#demo');

packages/vue-identicon/src/packageInfo.ts

@@ -3,4 +3,4 @@
 
 // Do not edit, auto-generated by @polkadot/dev
 
-export const packageInfo = { name: '@polkadot/vue-identicon', path: 'auto', type: 'auto', version: '1.0.1' };
+export const packageInfo = { name: '@polkadot/vue-identicon', path: 'auto', type: 'auto', version: '2.0.1' };

packages/vue-identicon/webpack.config.js

@@ -1,50 +0,0 @@
-// Copyright 2017-2022 @polkadot/react-identicon authors & contributors
-// SPDX-License-Identifier: Apache-2.0
-
-const path = require('path');
-const VueLoaderPlugin = require('vue-loader/lib/plugin');
-const webpack = require('webpack');
-const ENV = process.env.NODE_ENV || 'development';
-const isProd = ENV === 'production';
-
-module.exports = {
-  context: __dirname,
-  devtool: isProd ? 'source-map' : 'eval-cheap-source-map',
-  entry: './src/Demo.ts',
-  mode: ENV,
-  module: {
-    rules: [
-      {
-        exclude: /(node_modules)/,
-        test: /\.(js|ts)$/,
-        use: [
-          'babel-loader'
-        ]
-      },
-      {
-        loader: 'vue-loader',
-        test: /\.vue$/
-      }
-    ]
-  },
-  output: {
-    filename: './demo.js',
-    path: path.join(__dirname, 'build')
-  },
-  plugins: [
-    new VueLoaderPlugin(),
-    new webpack.ProvidePlugin({
-      Buffer: ['buffer', 'Buffer']
-    }),
-    new webpack.ProvidePlugin({
-      process: 'process/browser'
-    })
-  ],
-  resolve: {
-    alias: {
-      '@polkadot/ui-shared': path.resolve(__dirname, '../ui-shared/build'),
-      'process/browser': require.resolve('process/browser')
-    },
-    extensions: ['.js', '.ts']
-  }
-};

tsconfig.eslint.json

@@ -6,6 +6,7 @@
   },
   "include": [
     "packages/**/src/**/*",
+    "packages/**/*.cjs",
     "packages/**/*.js"
   ],
   "exclude": [