diff --git a/CHANGELOG.md b/CHANGELOG.md index dd5e7a5c..3ea8b98d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -5,6 +5,7 @@ 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) diff --git a/package.json b/package.json index 46c92c87..90560cf0 100644 --- a/package.json +++ b/package.json @@ -29,7 +29,7 @@ "devDependencies": { "@babel/core": "^7.16.12", "@babel/runtime": "^7.16.7", - "@polkadot/dev": "^0.65.46", + "@polkadot/dev": "^0.65.47", "@polkadot/x-bundle": "^8.3.3", "@types/jest": "^27.4.0", "babel-loader": "^8.2.3", @@ -39,10 +39,10 @@ "react": "^17.0.2", "react-dom": "^17.0.2", "react-is": "^17.0.2", - "react-native": "^0.67.1", + "react-native": "^0.67.2", "stream-browserify": "^3.0.0", "vue-template-compiler": "^2.6.14", - "webpack": "^5.67.0", + "webpack": "^5.68.0", "webpack-cli": "^4.9.2", "webpack-serve": "^4.0.0" }, diff --git a/packages/react-qr/src/Display.tsx b/packages/react-qr/src/Display.tsx index 1e4a45f2..9956e8ab 100644 --- a/packages/react-qr/src/Display.tsx +++ b/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 | null { +function Display ({ className, size, skipEncoding, style, timerDelay = DEFAULT_FRAME_DELAY, value }: Props): React.ReactElement | null { const [{ image }, setFrameState] = useState({ frameIdx: 0, frames: [], image: null, valueHash: null }); - const timerRef = useRef({ timerDelay: FRAME_DELAY, timerId: null }); + const timerRef = useRef({ timerDelay, timerId: null }); const containerStyle = useMemo( () => createImgSize(size), @@ -83,7 +84,7 @@ function Display ({ className, size, skipEncoding, style, value }: Props): React 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 diff --git a/packages/react-qr/src/DisplayAddress.tsx b/packages/react-qr/src/DisplayAddress.tsx index 52d5dc33..50313d33 100644 --- a/packages/react-qr/src/DisplayAddress.tsx +++ b/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 | null { +function DisplayAddress ({ address, className, genesisHash, size, style, timerDelay }: Props): React.ReactElement | 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} /> ); diff --git a/packages/react-qr/src/DisplayPayload.tsx b/packages/react-qr/src/DisplayPayload.tsx index 454c1b41..3da26b13 100644 --- a/packages/react-qr/src/DisplayPayload.tsx +++ b/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 | null { +function DisplayPayload ({ address, className, cmd, genesisHash, payload, size, style, timerDelay }: Props): React.ReactElement | 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} /> ); diff --git a/packages/ui-shared/package.json b/packages/ui-shared/package.json index d90fd334..57680f0b 100644 --- a/packages/ui-shared/package.json +++ b/packages/ui-shared/package.json @@ -26,7 +26,7 @@ "devDependencies": { "@polkadot/util": "^8.3.3", "@polkadot/util-crypto": "^8.3.3", - "@types/color": "^3.0.2", + "@types/color": "^3.0.3", "@types/xmlserializer": "^0.6.2", "xmlserializer": "^0.6.1" }, diff --git a/yarn.lock b/yarn.lock index 87dadfc1..49cab31d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2047,9 +2047,9 @@ __metadata: languageName: node linkType: hard -"@polkadot/dev@npm:^0.65.46": - version: 0.65.46 - resolution: "@polkadot/dev@npm:0.65.46" +"@polkadot/dev@npm:^0.65.47": + version: 0.65.47 + resolution: "@polkadot/dev@npm:0.65.47" dependencies: "@babel/cli": ^7.16.8 "@babel/core": ^7.16.12 @@ -2073,8 +2073,8 @@ __metadata: "@rollup/plugin-json": ^4.1.0 "@rollup/plugin-node-resolve": ^13.1.3 "@rushstack/eslint-patch": ^1.1.0 - "@typescript-eslint/eslint-plugin": 5.10.1 - "@typescript-eslint/parser": 5.10.1 + "@typescript-eslint/eslint-plugin": 5.10.2 + "@typescript-eslint/parser": 5.10.2 "@vue/component-compiler-utils": ^3.3.0 babel-jest: ^27.4.6 babel-plugin-module-extension-resolver: ^1.0.0-rc.2 @@ -2135,7 +2135,7 @@ __metadata: polkadot-exec-rollup: scripts/polkadot-exec-rollup.mjs polkadot-exec-tsc: scripts/polkadot-exec-tsc.mjs polkadot-exec-webpack: scripts/polkadot-exec-webpack.mjs - checksum: 12ca091e24a61bf232206e30588c860cecfa80ab783b8621c09f6c7930c4f5ad2e57250189c5e1c1dc63306b669b3c3b8371f7995930a53858979785cbcd6ec1 + checksum: 4e333947b6775932001c93ead65850b268e831abdd332be4e66a0508350c8a1b675b759fb744a71ad0aed9f8bac99a0e483024792ece8f3bfd066be9406c5b52 languageName: node linkType: hard @@ -2302,7 +2302,7 @@ __metadata: "@babel/runtime": ^7.16.7 "@polkadot/util": ^8.3.3 "@polkadot/util-crypto": ^8.3.3 - "@types/color": ^3.0.2 + "@types/color": ^3.0.3 "@types/xmlserializer": ^0.6.2 color: ^3.2.1 xmlserializer: ^0.6.1 @@ -2844,12 +2844,12 @@ __metadata: languageName: node linkType: hard -"@types/color@npm:^3.0.2": - version: 3.0.2 - resolution: "@types/color@npm:3.0.2" +"@types/color@npm:^3.0.3": + version: 3.0.3 + resolution: "@types/color@npm:3.0.3" dependencies: "@types/color-convert": "*" - checksum: ee25101a59b921a08fdb8270f82ff22db6a0bfdc4c48a8a72616a282590c14912fc6183518f7ecf3080216c243dddb88729653a34a7e30ec707f120bf1070d00 + checksum: 4a54a6eca687b1f19d393c6c44e292009e913fa2377b5b815d1cd04470131087d7a799718d9e66a970f43e6ba16e7056a5b40b49d2d0d1d0f1530aff23864528 languageName: node linkType: hard @@ -3126,13 +3126,13 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/eslint-plugin@npm:5.10.1": - version: 5.10.1 - resolution: "@typescript-eslint/eslint-plugin@npm:5.10.1" +"@typescript-eslint/eslint-plugin@npm:5.10.2": + version: 5.10.2 + resolution: "@typescript-eslint/eslint-plugin@npm:5.10.2" dependencies: - "@typescript-eslint/scope-manager": 5.10.1 - "@typescript-eslint/type-utils": 5.10.1 - "@typescript-eslint/utils": 5.10.1 + "@typescript-eslint/scope-manager": 5.10.2 + "@typescript-eslint/type-utils": 5.10.2 + "@typescript-eslint/utils": 5.10.2 debug: ^4.3.2 functional-red-black-tree: ^1.0.1 ignore: ^5.1.8 @@ -3145,42 +3145,42 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 44d71b4622c0e53bb0c576f2b94bf9274faf0c2f3d5fc0357ecec211add6ebfc96c15a5fa68aab8eede1a928f09631062517617ee83a8d228d2c81215c0156a8 + checksum: 460808a3c7d0390a7dcc1b2e717c2c4e303a31f9161fbc8c4ecc7bec076285d636d505d2f1ca9932c7a7989ea0fc3a78023be9f342bd8c4bdfe4a9842d0c053a languageName: node linkType: hard -"@typescript-eslint/parser@npm:5.10.1": - version: 5.10.1 - resolution: "@typescript-eslint/parser@npm:5.10.1" +"@typescript-eslint/parser@npm:5.10.2": + version: 5.10.2 + resolution: "@typescript-eslint/parser@npm:5.10.2" dependencies: - "@typescript-eslint/scope-manager": 5.10.1 - "@typescript-eslint/types": 5.10.1 - "@typescript-eslint/typescript-estree": 5.10.1 + "@typescript-eslint/scope-manager": 5.10.2 + "@typescript-eslint/types": 5.10.2 + "@typescript-eslint/typescript-estree": 5.10.2 debug: ^4.3.2 peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 peerDependenciesMeta: typescript: optional: true - checksum: 36e94b3fb5010f09311f1667f8beed1ece46677e738424df78e266eef0957e33671d505a7979d775e863b553d509ce8dbee6201a6994da5282ff38f8e1ae0303 + checksum: c83e3afee090e9cc830d6c59cd87681a83ae95f2daa848040f2e67ef34f87c5ec707a571b3ccb31b67adc0447b22b62c048a6cb088e661801dacb9c2cf070a9c languageName: node linkType: hard -"@typescript-eslint/scope-manager@npm:5.10.1": - version: 5.10.1 - resolution: "@typescript-eslint/scope-manager@npm:5.10.1" +"@typescript-eslint/scope-manager@npm:5.10.2": + version: 5.10.2 + resolution: "@typescript-eslint/scope-manager@npm:5.10.2" dependencies: - "@typescript-eslint/types": 5.10.1 - "@typescript-eslint/visitor-keys": 5.10.1 - checksum: a4f802ca683bcb3db0e14739d02e680f0f51b6562c23380ea9e0878a70f638572650bd2dbc62f8d74bc39657c053c3e6469a0d4179d3d99bb94fd47bd14d6ecf + "@typescript-eslint/types": 5.10.2 + "@typescript-eslint/visitor-keys": 5.10.2 + checksum: 22c8ac9047a1a276e0b911eca0eee30c4f7f7089688dca36314da28143d349c504e542116d3e201d52da50b212f38b2125e3918e6ae2e2b0b57964fb1cdf8fcd languageName: node linkType: hard -"@typescript-eslint/type-utils@npm:5.10.1": - version: 5.10.1 - resolution: "@typescript-eslint/type-utils@npm:5.10.1" +"@typescript-eslint/type-utils@npm:5.10.2": + version: 5.10.2 + resolution: "@typescript-eslint/type-utils@npm:5.10.2" dependencies: - "@typescript-eslint/utils": 5.10.1 + "@typescript-eslint/utils": 5.10.2 debug: ^4.3.2 tsutils: ^3.21.0 peerDependencies: @@ -3188,7 +3188,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: f7310e036490c47bce132ad4c8185dc253eb5afb954788335811f46ae36c0ea92816319ca1072481f9a8dbac3cd36cc22a8cdc86f2014d0882b8c4029c69d491 + checksum: 7732c826ef6c798af0f45b85f0389688e614de16c7c2c7e446a664787df360242cf2bc9d68d6ce1993f1bfc289b5d6a75a400fc968b7ded187c30c40f978de52 languageName: node linkType: hard @@ -3199,19 +3199,19 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/types@npm:5.10.1": - version: 5.10.1 - resolution: "@typescript-eslint/types@npm:5.10.1" - checksum: e8bbedae74637c35677aab92eceb154e8f1b100b6015d4aa20b5d52bb2e486e50733feca07610406763e1cc36c448a97ca77f058f4e07e7c61bd8d830c092030 +"@typescript-eslint/types@npm:5.10.2": + version: 5.10.2 + resolution: "@typescript-eslint/types@npm:5.10.2" + checksum: fa44dbd31d12f16ada6a6e7dba61ff90bf955b400f314f7378d9775cc8e13ef5da3318e89a90c3c3f75d50179e6be104ed8f90d4e77a02d6f7793b346bf25f15 languageName: node linkType: hard -"@typescript-eslint/typescript-estree@npm:5.10.1": - version: 5.10.1 - resolution: "@typescript-eslint/typescript-estree@npm:5.10.1" +"@typescript-eslint/typescript-estree@npm:5.10.2": + version: 5.10.2 + resolution: "@typescript-eslint/typescript-estree@npm:5.10.2" dependencies: - "@typescript-eslint/types": 5.10.1 - "@typescript-eslint/visitor-keys": 5.10.1 + "@typescript-eslint/types": 5.10.2 + "@typescript-eslint/visitor-keys": 5.10.2 debug: ^4.3.2 globby: ^11.0.4 is-glob: ^4.0.3 @@ -3220,7 +3220,7 @@ __metadata: peerDependenciesMeta: typescript: optional: true - checksum: 5721e99baa9b286a474a22c4b08e6ac5a0d79435e7f2a91e876e6a2135a44244f0a83ff42cc1cd2ac23cc6ee014965baaa84481e9017f703c45f22e474620c7f + checksum: 2fdad1448578ee5c7f5876c998de50e2fa5fd6eed9effbfa9b0cf2579afe195964f0e4ebaa5d94ae228096cddf016500e9c8cc2f60c3dff981f09ebb42e5de53 languageName: node linkType: hard @@ -3242,19 +3242,19 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/utils@npm:5.10.1": - version: 5.10.1 - resolution: "@typescript-eslint/utils@npm:5.10.1" +"@typescript-eslint/utils@npm:5.10.2": + version: 5.10.2 + resolution: "@typescript-eslint/utils@npm:5.10.2" dependencies: "@types/json-schema": ^7.0.9 - "@typescript-eslint/scope-manager": 5.10.1 - "@typescript-eslint/types": 5.10.1 - "@typescript-eslint/typescript-estree": 5.10.1 + "@typescript-eslint/scope-manager": 5.10.2 + "@typescript-eslint/types": 5.10.2 + "@typescript-eslint/typescript-estree": 5.10.2 eslint-scope: ^5.1.1 eslint-utils: ^3.0.0 peerDependencies: eslint: ^6.0.0 || ^7.0.0 || ^8.0.0 - checksum: beca5b5eb56b6236215baa409619fc8eea700e733094683c3ac39236bf442793b61fcf3ad6fe57ccec265649962d84c1951900e47bd55208ed50c4c2c7d8cf6b + checksum: d0dde3066f52405dffc2cbccd43d2aa2d9336510f178aa43812d616c951ea45f83693e2f6a88e3abfc94e2cc5f9eb3f2be9221a38848fe70aaffc294794c9d53 languageName: node linkType: hard @@ -3268,13 +3268,13 @@ __metadata: languageName: node linkType: hard -"@typescript-eslint/visitor-keys@npm:5.10.1": - version: 5.10.1 - resolution: "@typescript-eslint/visitor-keys@npm:5.10.1" +"@typescript-eslint/visitor-keys@npm:5.10.2": + version: 5.10.2 + resolution: "@typescript-eslint/visitor-keys@npm:5.10.2" dependencies: - "@typescript-eslint/types": 5.10.1 + "@typescript-eslint/types": 5.10.2 eslint-visitor-keys: ^3.0.0 - checksum: 7e1e1a41b2df797534ee56c0d9ae2a056e0ca0ca019b31125fd52d7deb0e802d899920031f2dbf88a951e6752d8fcbd9fa904eaeccb50cf30d2b92b54fd7879d + checksum: f80caa1f0d71da096e9e18728b76046286cad691b178c0d101b71e5b553ee4a427ae2c2f8b9bc789dce266f62b026b7ca88ddafd52fde4f0dbb24e05765629b7 languageName: node linkType: hard @@ -11931,9 +11931,9 @@ fsevents@~2.1.2: languageName: node linkType: hard -"react-native@npm:^0.67.1": - version: 0.67.1 - resolution: "react-native@npm:0.67.1" +"react-native@npm:^0.67.2": + version: 0.67.2 + resolution: "react-native@npm:0.67.2" dependencies: "@jest/create-cache-key-function": ^27.0.1 "@react-native-community/cli": ^6.0.0 @@ -11969,7 +11969,7 @@ fsevents@~2.1.2: react: 17.0.2 bin: react-native: cli.js - checksum: 20be59649160e904ba17e2ab964dabfcca5dfe1d21d3c5b1e276cb16d65d964f1789a3d3a6300c59e74c839702e8015b38a4a09ca4346e6b46502249a9d7d72e + checksum: 6e8bd1a8ab1c8fad2928fd1aa921363fd2d49d4622c6edea38c3f80e67cf43253347661a545b69637f149fbc3a762f0a0e26a3bcf0003ac3c46dd83adb63b2b2 languageName: node linkType: hard @@ -12530,7 +12530,7 @@ resolve@^2.0.0-next.3: dependencies: "@babel/core": ^7.16.12 "@babel/runtime": ^7.16.7 - "@polkadot/dev": ^0.65.46 + "@polkadot/dev": ^0.65.47 "@polkadot/x-bundle": ^8.3.3 "@types/jest": ^27.4.0 babel-loader: ^8.2.3 @@ -12540,10 +12540,10 @@ resolve@^2.0.0-next.3: react: ^17.0.2 react-dom: ^17.0.2 react-is: ^17.0.2 - react-native: ^0.67.1 + react-native: ^0.67.2 stream-browserify: ^3.0.0 vue-template-compiler: ^2.6.14 - webpack: ^5.67.0 + webpack: ^5.68.0 webpack-cli: ^4.9.2 webpack-serve: ^4.0.0 languageName: unknown @@ -14503,9 +14503,9 @@ resolve@^2.0.0-next.3: languageName: node linkType: hard -"webpack@npm:^5.67.0": - version: 5.67.0 - resolution: "webpack@npm:5.67.0" +"webpack@npm:^5.68.0": + version: 5.68.0 + resolution: "webpack@npm:5.68.0" dependencies: "@types/eslint-scope": ^3.7.0 "@types/estree": ^0.0.50 @@ -14536,7 +14536,7 @@ resolve@^2.0.0-next.3: optional: true bin: webpack: bin/webpack.js - checksum: a7f810a5e1d4d78b533ca0caf42fa889839326073cedd3ac8e59e5c4890ca864ab0265fa5b2608715746ff3e34cbfaf4f15d56a92bc3f717a2f5c13202d58b6c + checksum: ac6efd861a0bfb35d8a467fba0d87f905ef6e1a9a9f7e3db42ea459cf191268094cedd025d3eb36a1464e2208a0c193f3f4a92531ba58850246f3c6b8f210b03 languageName: node linkType: hard