[CI Skip] release/stable 3.11.2

skip-checks: true

.yarnrc.yml

@@ -12,4 +12,4 @@ logFilters:
 
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.3.1.cjs
+yarnPath: .yarn/releases/yarn-4.5.1.cjs

CHANGELOG.md

@@ -1,5 +1,52 @@
 # CHANGELOG
 
+## 3.11.2 Oct 30, 2024
+
+Changes:
+
+- Upgrade polkadot/common to 13.2.2 ([#814](https://github.com/polkadot-js/ui/pull/814))
+
+
+## 3.11.1 Oct 23, 2024
+
+Changes:
+
+- Upgrade polkadot/common to 13.2.1 ([#811](https://github.com/polkadot-js/ui/pull/811))
+- Bump yarn to 4.5.1 ([#812](https://github.com/polkadot-js/ui/pull/812))
+- Bump dev 0.81.2 ([#810](https://github.com/polkadot-js/ui/pull/810))
+  - Correctly exports CJS and ESM
+
+
+## 3.10.1 Sep 20, 2024
+
+Changes:
+
+- Upgrade polkadot/common to 13.1.1 ([#808](https://github.com/polkadot-js/ui/pull/808))
+- Bump yarn to 4.4.0 ([#806](https://github.com/polkadot-js/ui/pull/806))
+
+
+## 3.9.1 Aug 13, 2024
+
+Changes:
+
+- Upgrade @polkadot/dev to 0.79.3 ([#803](https://github.com/polkadot-js/ui/pull/803))
+- Add chainSpecific option for ledger ([#804](https://github.com/polkadot-js/ui/pull/804))
+
+
+## 3.8.3 July 31, 2024
+
+Changes:
+
+- Fix Qr Scanner (Thanks to https://github.com/ryanleecode)
+
+
+## 3.8.2 July 22, 2024
+
+Changes:
+
+- Fix ledgerApp bug, and remove legacy
+
+
 ## 3.8.1 July 22, 2024
 
 Changes:

CONTRIBUTORS

@@ -1,5 +1,5 @@
      735	Jaco                          	Adjust Vue peerDependency, >= 2.7 for defineComponent (#782)
-      11	Tarik Gul                     	3.8.1 (#797)
+      26	Tarik Gul                     	3.11.2 (#815)
        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)
@@ -30,6 +30,7 @@
        1	Nantian                       	fix bigint type (#510)
        1	Nikhil Ranjan                 	Updated to valid javascript (#271)
        1	omahs                         	Fix: typos (#709)
+       1	Ryan Lee                      	fix: qr-code (#801)
        1	Shawn Tabrizi                 	Add a new `notification` setting (#498)
        1	Wei Tang                      	Add Kulupu to the network selection list (#254)
        1	WoeOm                         	add darwinia ss58 (#379)

package.json

@@ -6,7 +6,7 @@
   },
   "homepage": "https://github.com/polkadot-js/ui#readme",
   "license": "Apache-2.0",
-  "packageManager": "yarn@4.3.1",
+  "packageManager": "yarn@4.5.1",
   "private": true,
   "repository": {
     "type": "git",
@@ -14,10 +14,10 @@
   },
   "sideEffects": false,
   "type": "module",
-  "version": "3.8.1",
+  "version": "3.11.2",
   "versions": {
-    "git": "3.8.1",
+    "git": "3.11.2",
-    "npm": "3.8.1"
+    "npm": "3.11.2"
   },
   "workspaces": [
     "packages/*"
@@ -33,8 +33,8 @@
     "test:one": "polkadot-dev-run-test --env browser"
   },
   "devDependencies": {
-    "@polkadot/dev": "^0.78.3",
+    "@polkadot/dev": "^0.81.2",
-    "@polkadot/x-bundle": "^13.0.2",
+    "@polkadot/x-bundle": "^13.2.2",
     "@types/node": "^20.10.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",

packages/react-identicon/package.json

@@ -18,14 +18,14 @@
     "./packageDetect.cjs"
   ],
   "type": "module",
-  "version": "3.8.1",
+  "version": "3.11.2",
   "main": "index.js",
   "dependencies": {
-    "@polkadot/keyring": "^13.0.2",
+    "@polkadot/keyring": "^13.2.2",
-    "@polkadot/ui-settings": "3.8.1",
+    "@polkadot/ui-settings": "3.11.2",
-    "@polkadot/ui-shared": "3.8.1",
+    "@polkadot/ui-shared": "3.11.2",
-    "@polkadot/util": "^13.0.2",
+    "@polkadot/util": "^13.2.2",
-    "@polkadot/util-crypto": "^13.0.2",
+    "@polkadot/util-crypto": "^13.2.2",
     "ethereum-blockies-base64": "^1.0.2",
     "jdenticon": "3.2.0",
     "react-copy-to-clipboard": "^5.1.0",

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

packages/react-qr/package.json

@@ -18,20 +18,18 @@
     "./packageDetect.cjs"
   ],
   "type": "module",
-  "version": "3.8.1",
+  "version": "3.11.2",
   "main": "index.js",
   "dependencies": {
-    "@polkadot/ui-settings": "3.8.1",
+    "@polkadot/ui-settings": "3.11.2",
-    "@polkadot/util": "^13.0.2",
+    "@polkadot/util": "^13.2.2",
-    "@polkadot/util-crypto": "^13.0.2",
+    "@polkadot/util-crypto": "^13.2.2",
+    "@zxing/browser": "^0.1.5",
+    "@zxing/library": "^0.21.2",
     "qrcode-generator": "^1.4.4",
-    "react-qr-reader": "^2.2.1",
     "styled-components": "^6.1.1",
     "tslib": "^2.6.2"
   },
-  "devDependencies": {
-    "@types/react-qr-reader": "^2.1.7"
-  },
   "peerDependencies": {
     "@polkadot/util": "*",
     "@polkadot/util-crypto": "*",

packages/react-qr/src/Scan.tsx

@@ -1,8 +1,8 @@
 // Copyright 2017-2024 @polkadot/react-qr authors & contributors
 // SPDX-License-Identifier: Apache-2.0
 
-import React, { useCallback, useMemo } from 'react';
+import { BrowserQRCodeReader, type IScannerControls } from '@zxing/browser';
-import Reader from 'react-qr-reader';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 
 import { styled } from './styled.js';
 import { createImgSize } from './util.js';
@@ -23,6 +23,9 @@ const DEFAULT_ERROR = (error: Error): void => {
 };
 
 function Scan ({ className = '', delay = DEFAULT_DELAY, onError = DEFAULT_ERROR, onScan, size, style = {} }: Props): React.ReactElement<Props> {
+  const videoRef = useRef<HTMLVideoElement>(null);
+  const controlsRef = useRef<IScannerControls | null>(null);
+
   const containerStyle = useMemo(
     () => createImgSize(size),
     [size]
@@ -33,21 +36,52 @@ function Scan ({ className = '', delay = DEFAULT_DELAY, onError = DEFAULT_ERROR,
     [onError]
   );
 
-  const _onScan = useCallback(
+  useEffect(() => {
-    (data: string | null) => data && onScan(data),
+    const codeReader = new BrowserQRCodeReader();
-    [onScan]
+
-  );
+    const startScanning = async () => {
+      try {
+        const videoInputDevices = await BrowserQRCodeReader.listVideoInputDevices();
+        const selectedDeviceId = videoInputDevices[0].deviceId;
+
+        controlsRef.current = await codeReader.decodeFromVideoDevice(
+          selectedDeviceId,
+          videoRef.current ?? undefined,
+          (result, error) => {
+            if (result) {
+              onScan(result.getText());
+            }
+
+            if (error && !(error instanceof Error)) {
+              _onError(new Error(error));
+            }
+          }
+        );
+      } catch (error) {
+        _onError(error instanceof Error ? error : new Error('Unknown error occurred'));
+      }
+    };
+
+    // eslint-disable-next-line @typescript-eslint/no-misused-promises
+    const timeoutId = setTimeout(startScanning, delay);
+
+    return () => {
+      clearTimeout(timeoutId);
+
+      if (controlsRef.current) {
+        controlsRef.current.stop();
+      }
+    };
+  }, [onScan, _onError, delay]);
 
   return (
     <StyledDiv
       className={className}
       style={containerStyle}
     >
-      <Reader
+      <video
         className='ui--qr-Scan'
-        delay={delay}
+        ref={videoRef}
-        onError={_onError}
-        onScan={_onScan}
         style={style}
       />
     </StyledDiv>
@@ -60,10 +94,6 @@ const StyledDiv = styled.div`
     height: 100%;
     transform: matrix(-1, 0, 0, 1, 0, 0);
     width: 100%;
-
-    video {
-      margin: 0;
-    }
   }
 `;
 

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

packages/reactnative-identicon/package.json

@@ -18,12 +18,12 @@
     "./packageDetect.cjs"
   ],
   "type": "module",
-  "version": "3.8.1",
+  "version": "3.11.2",
   "main": "index.js",
   "dependencies": {
-    "@polkadot/ui-shared": "3.8.1",
+    "@polkadot/ui-shared": "3.11.2",
-    "@polkadot/util": "^13.0.2",
+    "@polkadot/util": "^13.2.2",
-    "@polkadot/util-crypto": "^13.0.2",
+    "@polkadot/util-crypto": "^13.2.2",
     "react-native-svg": "^14.1.0",
     "tslib": "^2.6.2"
   },

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

packages/ui-keyring/package.json

@@ -17,13 +17,13 @@
     "./packageDetect.cjs"
   ],
   "type": "module",
-  "version": "3.8.1",
+  "version": "3.11.2",
   "main": "index.js",
   "dependencies": {
-    "@polkadot/keyring": "^13.0.2",
+    "@polkadot/keyring": "^13.2.2",
-    "@polkadot/ui-settings": "3.8.1",
+    "@polkadot/ui-settings": "3.11.2",
-    "@polkadot/util": "^13.0.2",
+    "@polkadot/util": "^13.2.2",
-    "@polkadot/util-crypto": "^13.0.2",
+    "@polkadot/util-crypto": "^13.2.2",
     "mkdirp": "^3.0.1",
     "rxjs": "^7.8.1",
     "store": "^2.0.12",

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: '3.8.1' };
+export const packageInfo = { name: '@polkadot/ui-keyring', path: 'auto', type: 'auto', version: '3.11.2' };

packages/ui-settings/package.json

@@ -18,11 +18,11 @@
     "./packageDetect.cjs"
   ],
   "type": "module",
-  "version": "3.8.1",
+  "version": "3.11.2",
   "main": "index.js",
   "dependencies": {
-    "@polkadot/networks": "^13.0.2",
+    "@polkadot/networks": "^13.2.2",
-    "@polkadot/util": "^13.0.2",
+    "@polkadot/util": "^13.2.2",
     "eventemitter3": "^5.0.1",
     "store": "^2.0.12",
     "tslib": "^2.6.2"

packages/ui-settings/src/Settings.ts

@@ -211,6 +211,7 @@ export class Settings implements SettingsStruct {
     this.#apiUrl = settings.apiUrl || this.#apiUrl;
     this.#camera = settings.camera || this.#camera;
     this.#ledgerConn = settings.ledgerConn || this.#ledgerConn;
+    this.#ledgerApp = settings.ledgerApp || this.#ledgerApp;
     this.#i18nLang = settings.i18nLang || this.#i18nLang;
     this.#icon = settings.icon || this.#icon;
     this.#locking = settings.locking || this.#locking;

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

@@ -43,8 +43,8 @@ export const LEDGER_APP: Option[] = [
     value: 'migration'
   },
   {
-    info: 'legacy',
+    info: 'chainSpecific',
-    text: 'Use the Ledger Legacy App',
+    text: 'Use the Chain Specific Ledger App',
-    value: 'legacy'
+    value: 'chainSpecific'
   }
 ];

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: '3.8.1' };
+export const packageInfo = { name: '@polkadot/ui-settings', path: 'auto', type: 'auto', version: '3.11.2' };

packages/ui-shared/package.json

@@ -18,15 +18,15 @@
     "./packageDetect.cjs"
   ],
   "type": "module",
-  "version": "3.8.1",
+  "version": "3.11.2",
   "main": "index.js",
   "dependencies": {
     "colord": "^2.9.3",
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@polkadot/util": "^13.0.2",
+    "@polkadot/util": "^13.2.2",
-    "@polkadot/util-crypto": "^13.0.2",
+    "@polkadot/util-crypto": "^13.2.2",
     "@types/xmlserializer": "^0.6.6",
     "xmlserializer": "^0.6.1"
   },

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

@@ -17,7 +17,7 @@ describe('identicon', (): void => {
     ).toEqual(
       // with original color ...
       // '<div xmlns="http://www.w3.org/1999/xhtml" class="" style="background: white; border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><div class="" style="background: rgb(20, 20, 20); border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="256" height="256"><circle cx="128" cy="140.8" r="128" fill="hsl(212.10000000000002, 65.6%, 55.5%)"/><circle cx="128" cy="153.6" r="102.4" fill="hsl(9.800000000000011, 90.7%, 57.6%)"/><circle cx="128" cy="166.4" r="76.8" fill="hsl(345, 85.7%, 86.3%)"/><circle cx="128" cy="179.2" r="51.2" fill="hsl(261.9, 100%, 87.3%)"/><circle cx="128" cy="192" r="25.6" fill="hsl(345, 100%, 25.1%)"/></svg></div></div>'
-      '<div xmlns="http://www.w3.org/1999/xhtml" class="" style="background: white; border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><div class="" style="background: rgb(26, 26, 26); border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="256" height="256"><circle cx="128" cy="140.8" r="128" fill="hsl(212, 66%, 55%)"/><circle cx="128" cy="153.6" r="102.4" fill="hsl(10, 91%, 58%)"/><circle cx="128" cy="166.4" r="76.8" fill="hsl(345, 86%, 86%)"/><circle cx="128" cy="179.2" r="51.2" fill="hsl(262, 100%, 87%)"/><circle cx="128" cy="192" r="25.6" fill="hsl(345, 100%, 25%)"/></svg></div></div>'
+      '<div xmlns="http://www.w3.org/1999/xhtml" class="" style="background: white; border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><div class="" style="background: rgb(255, 167, 26); border-radius: 128px; display: inline-block; height: 256px; margin: 0px; overflow: hidden; padding: 0px; width: 256px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="256" height="256"><circle cx="128" cy="140.8" r="128" fill="hsl(212, 66%, 55%)"/><circle cx="128" cy="153.6" r="102.4" fill="hsl(10, 91%, 58%)"/><circle cx="128" cy="166.4" r="76.8" fill="hsl(345, 86%, 86%)"/><circle cx="128" cy="179.2" r="51.2" fill="hsl(262, 100%, 87%)"/><circle cx="128" cy="192" r="25.6" fill="hsl(345, 100%, 25%)"/></svg></div></div>'
     );
   });
 
@@ -30,7 +30,7 @@ describe('identicon', (): void => {
     ).toEqual(
       // with original color ...
       // '<div xmlns="http://www.w3.org/1999/xhtml" class="testClass" style="background: white; border-radius: 50px; display: block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><div class="" style="background: rgb(20, 20, 20); border-radius: 50px; display: inline-block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100"><circle cx="50" cy="55" r="50" fill="hsl(212.10000000000002, 65.6%, 55.5%)"/><circle cx="50" cy="60" r="40" fill="hsl(9.800000000000011, 90.7%, 57.6%)"/><circle cx="50" cy="65" r="30" fill="hsl(345, 85.7%, 86.3%)"/><circle cx="50" cy="70" r="20" fill="hsl(261.9, 100%, 87.3%)"/><circle cx="50" cy="75" r="10" fill="hsl(345, 100%, 25.1%)"/></svg></div></div>'
-      '<div xmlns="http://www.w3.org/1999/xhtml" class="testClass" style="background: white; border-radius: 50px; display: block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><div class="" style="background: rgb(26, 26, 26); border-radius: 50px; display: inline-block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100"><circle cx="50" cy="55" r="50" fill="hsl(212, 66%, 55%)"/><circle cx="50" cy="60" r="40" fill="hsl(10, 91%, 58%)"/><circle cx="50" cy="65" r="30" fill="hsl(345, 86%, 86%)"/><circle cx="50" cy="70" r="20" fill="hsl(262, 100%, 87%)"/><circle cx="50" cy="75" r="10" fill="hsl(345, 100%, 25%)"/></svg></div></div>'
+      '<div xmlns="http://www.w3.org/1999/xhtml" class="testClass" style="background: white; border-radius: 50px; display: block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><div class="" style="background: rgb(255, 167, 26); border-radius: 50px; display: inline-block; height: 100px; margin: 0px; overflow: hidden; padding: 0px; width: 100px;"><svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100"><circle cx="50" cy="55" r="50" fill="hsl(212, 66%, 55%)"/><circle cx="50" cy="60" r="40" fill="hsl(10, 91%, 58%)"/><circle cx="50" cy="65" r="30" fill="hsl(345, 86%, 86%)"/><circle cx="50" cy="70" r="20" fill="hsl(262, 100%, 87%)"/><circle cx="50" cy="75" r="10" fill="hsl(345, 100%, 25%)"/></svg></div></div>'
     );
   });
 });

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: '3.8.1' };
+export const packageInfo = { name: '@polkadot/ui-shared', path: 'auto', type: 'auto', version: '3.11.2' };

packages/vue-identicon/package.json

@@ -18,12 +18,12 @@
     "./packageDetect.cjs"
   ],
   "type": "module",
-  "version": "3.8.1",
+  "version": "3.11.2",
   "main": "index.js",
   "dependencies": {
-    "@polkadot/ui-shared": "3.8.1",
+    "@polkadot/ui-shared": "3.11.2",
-    "@polkadot/util": "^13.0.2",
+    "@polkadot/util": "^13.2.2",
-    "@polkadot/util-crypto": "^13.0.2",
+    "@polkadot/util-crypto": "^13.2.2",
     "jdenticon": "3.2.0",
     "tslib": "^2.6.2"
   },

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