Merge pull request #1595 from gre/qrcodeexporter-new-version

New version of qrcode exporter

package.json

@@ -41,7 +41,7 @@
     "@ledgerhq/hw-transport": "^4.24.0",
     "@ledgerhq/hw-transport-node-hid": "4.24.0",
     "@ledgerhq/ledger-core": "2.0.0-rc.11",
-    "@ledgerhq/live-common": "4.3.0",
+    "@ledgerhq/live-common": "4.4.2",
     "animated": "^0.2.2",
     "async": "^2.6.1",
     "axios": "^0.18.0",
@@ -70,7 +70,7 @@
     "measure-scrollbar": "^1.1.0",
     "moment": "^2.22.2",
     "qrcode": "^1.2.0",
-    "qrloop": "^0.6.1",
+    "qrloop": "0.8.1",
     "qs": "^6.5.1",
     "raven": "^2.5.0",
     "raven-js": "^3.24.2",

src/components/QRCodeExporter.js

@@ -2,7 +2,7 @@
 
 import React, { PureComponent } from 'react'
 import { Buffer } from 'buffer'
-import { createSelector } from 'reselect'
+import { createStructuredSelector } from 'reselect'
 import { connect } from 'react-redux'
 
 import { accountsSelector } from 'reducers/accounts'
@@ -11,30 +11,20 @@ import { encode } from '@ledgerhq/live-common/lib/cross'
 import { dataToFrames } from 'qrloop/exporter'
 import QRCode from './base/QRCode'
 
-const mapStateToProps = createSelector(
+const mapStateToProps = createStructuredSelector({
-  accountsSelector,
+  accounts: accountsSelector,
-  exportSettingsSelector,
+  settings: exportSettingsSelector,
-  (accounts, settings) => ({
+})
-    chunks: dataToFrames(
-      encode({
-        accounts,
-        settings,
-        exporterName: 'desktop',
-        exporterVersion: __APP_VERSION__,
-      }),
-      200,
-      4,
-    ),
-  }),
-)
 
 class QRCodeExporter extends PureComponent<
   {
-    chunks: string[],
+    accounts: *,
+    settings: *,
     size: number,
   },
   {
     frame: number,
+    framesRendered: number,
     fps: number,
   },
 > {
@@ -42,18 +32,35 @@ class QRCodeExporter extends PureComponent<
     size: 460,
   }
 
+  constructor(props) {
+    super()
+    const { accounts, settings } = props
+    const data = encode({
+      accounts,
+      settings,
+      exporterName: 'desktop',
+      exporterVersion: __APP_VERSION__,
+    })
+
+    this.chunks = dataToFrames(data, 160, 4)
+
+    setTimeout(() => {
+      const BRIDGESTREAM_DATA = Buffer.from(JSON.stringify(this.chunks)).toString('base64')
+      console.log(`BRIDGESTREAM_DATA=${BRIDGESTREAM_DATA}`) // eslint-disable-line
+    }, 500)
+  }
+
   state = {
     frame: 0,
+    framesRendered: 1,
     fps: 3,
   }
 
   componentDidMount() {
-    const BRIDGESTREAM_DATA = Buffer.from(JSON.stringify(this.props.chunks)).toString('base64')
+    const nextFrame = ({ frame, framesRendered }) => {
-    console.log(`BRIDGESTREAM_DATA=${BRIDGESTREAM_DATA}`) // eslint-disable-line
+      frame = (frame + 1) % this.chunks.length
-
+      framesRendered = Math.min(Math.max(framesRendered, frame + 1), this.chunks.length)
-    const nextFrame = ({ frame }, { chunks }) => {
+      return { frame, framesRendered }
-      frame = (frame + 1) % chunks.length
-      return { frame }
     }
 
     let lastT
@@ -71,14 +78,16 @@ class QRCodeExporter extends PureComponent<
     cancelAnimationFrame(this._raf)
   }
 
+  chunks: string[]
   _raf: *
 
   render() {
-    const { frame } = this.state
+    const { frame, framesRendered } = this.state
-    const { chunks, size } = this.props
+    const { size } = this.props
+    const { chunks } = this
     return (
       <div style={{ position: 'relative', width: size, height: size }}>
-        {chunks.map((chunk, i) => (
+        {chunks.slice(0, framesRendered).map((chunk, i) => (
           <div key={String(i)} style={{ position: 'absolute', opacity: i === frame ? 1 : 0 }}>
             <QRCode data={chunk} size={size} errorCorrectionLevel="M" />
           </div>

src/components/SettingsPage/sections/Tools.js

@@ -3,6 +3,7 @@
 /* eslint-disable react/jsx-no-literals */
 
 import React, { PureComponent } from 'react'
+import liveCommonPkg from '@ledgerhq/live-common/package.json'
 import { translate } from 'react-i18next'
 import Box, { Card } from 'components/base/Box'
 import Modal, { ModalBody, ModalContent, ModalTitle } from 'components/base/Modal'
@@ -30,6 +31,7 @@ class TabProfile extends PureComponent<*, *> {
         <Box flow={2}>
           <QRCodeExporter />
         </Box>
+        <Box style={{ textAlign: 'right' }}>{liveCommonPkg.version}</Box>
       </ModalContent>
     </ModalBody>
   )

yarn.lock

@@ -1753,20 +1753,20 @@
     bindings "^1.3.0"
     nan "^2.6.2"
 
-"@ledgerhq/live-common@4.3.0":
+"@ledgerhq/live-common@4.4.2":
-  version "4.3.0"
+  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-4.3.0.tgz#f983cb691642f1372d89e6a9320986141ab31045"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/live-common/-/live-common-4.4.2.tgz#0c60efe9f13fa17c39db880ee87d68561ba54da8"
-  integrity sha512-086MHRLvkPB7qxpzBGm2W1bE3yMbUxwCF2JuEMiQzgTK4fNPYV9mz+qR+qhYYcUXuXZQ2fCnCBYDqUlfo1Wb3g==
+  integrity sha512-oghcqyZY9G2xSH/PDDqTH2DZ+JLeRLEN0nEEo1t48zdXsu6LZ5ZweF8pK3jSETi+IfLYOzUuB93iJM1+AcVYAA==
   dependencies:
     "@ledgerhq/hw-app-btc" "^4.24.0"
     "@ledgerhq/hw-app-eth" "^4.24.0"
     "@ledgerhq/hw-app-xrp" "^4.24.0"
     "@ledgerhq/hw-transport" "^4.24.0"
     bignumber.js "^7.2.1"
+    compressjs gre/compressjs#hermit
     eip55 "^1.0.3"
     invariant "^2.2.2"
     lodash "^4.17.4"
-    node-lzw "^0.3.1"
     numeral "^2.0.6"
     prando "^3.0.1"
     react "*"
@@ -5236,6 +5236,13 @@ commander@~2.13.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c"
   integrity sha512-MVuS359B+YzaWqjCL/c+22gfryv+mCBPHAv3zyVI2GN8EY6IRP8VwtasXn8jyyhvvq84R4ImN1OKRtcbIasjYA==
 
+commander@~2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-2.8.1.tgz#06be367febfda0c330aa1e2a072d3dc9762425d4"
+  integrity sha1-Br42f+v9oMMwqh4qBy09yXYkJdQ=
+  dependencies:
+    graceful-readlink ">= 1.0.0"
+
 common-tags@^1.7.2:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -5291,6 +5298,12 @@ compression@^1.5.2:
     safe-buffer "5.1.1"
     vary "~1.1.2"
 
+compressjs@gre/compressjs#hermit:
+  version "1.2.0"
+  resolved "https://codeload.github.com/gre/compressjs/tar.gz/19652f100671e559d7731980c26cd06a7e999b8d"
+  dependencies:
+    commander "~2.8.1"
+
 concat-map@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
@@ -8473,6 +8486,11 @@ graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.2, graceful-fs@^4.1.6,
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.11.tgz#0e8bdfe4d1ddb8854d64e04ea7c00e2a026e5658"
   integrity sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=
 
+"graceful-readlink@>= 1.0.0":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/graceful-readlink/-/graceful-readlink-1.0.1.tgz#4cafad76bc62f02fa039b2f94e9a3dd3a391a725"
+  integrity sha1-TK+tdrxi8C+gObL5Tpo906ORpyU=
+
 grouped-queue@^0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/grouped-queue/-/grouped-queue-0.3.3.tgz#c167d2a5319c5a0e0964ef6a25b7c2df8996c85c"
@@ -11405,11 +11423,6 @@ node-loader@^0.6.0:
   resolved "https://registry.yarnpkg.com/node-loader/-/node-loader-0.6.0.tgz#c797ef51095ed5859902b157f6384f6361e05ae8"
   integrity sha1-x5fvUQle1YWZArFX9jhPY2HgWug=
 
-node-lzw@^0.3.1:
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/node-lzw/-/node-lzw-0.3.1.tgz#f50e37968976aca83320028b91f101df4a436b2d"
-  integrity sha1-9Q43lol2rKgzIAKLkfEB30pDay0=
-
 node-modules-regexp@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
@@ -12873,10 +12886,10 @@ qrcode@^1.2.0:
     pngjs "^3.3.0"
     yargs "^8.0.2"
 
-qrloop@^0.6.1:
+qrloop@0.8.1:
-  version "0.6.1"
+  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/qrloop/-/qrloop-0.6.1.tgz#167f8868f03018c7625b0e887049830e9253beae"
+  resolved "https://registry.yarnpkg.com/qrloop/-/qrloop-0.8.1.tgz#27fa3dabfba4247842fdcc7a1e5a439c69ba3e2c"
-  integrity sha512-1wJwoKpukmkfqwzyb9lMMEE9BDWXlKv63J/gdWMIeUfzgSR3QrZ3VKTtjN9Xvyo1DWwJd/G3FuMtJaH9cf+XUw==
+  integrity sha512-8erD63Y39HFY1x4OsaA3ZZdcUB1FA8vz0rkQSH95ECiRnjPtk+NOz+bw7dFHQBiVqZX/6I2GyczSNTnjUV+17w==
   dependencies:
     flow-typed "^2.5.1"
     md5 "^2.2.1"