New version of qrcode exporter

package.json

@@ -70,7 +70,7 @@
     "measure-scrollbar": "^1.1.0",
     "moment": "^2.22.2",
     "qrcode": "^1.2.0",
-    "qrloop": "^0.6.1",
+    "qrloop": "0.8.0-beta.2",
     "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,26 +11,15 @@ import { encode } from '@ledgerhq/live-common/lib/cross'
 import { dataToFrames } from 'qrloop/exporter'
 import QRCode from './base/QRCode'
 
-const mapStateToProps = createSelector(
-  accountsSelector,
-  exportSettingsSelector,
-  (accounts, settings) => ({
-    chunks: dataToFrames(
-      encode({
-        accounts,
-        settings,
-        exporterName: 'desktop',
-        exporterVersion: __APP_VERSION__,
-      }),
-      200,
-      4,
-    ),
-  }),
-)
+const mapStateToProps = createStructuredSelector({
+  accounts: accountsSelector,
+  settings: exportSettingsSelector,
+})
 
 class QRCodeExporter extends PureComponent<
   {
-    chunks: string[],
+    accounts: *,
+    settings: *,
     size: number,
   },
   {
@@ -42,17 +31,34 @@ 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(dataToFrames(data, 160, 1))).toString(
+        'base64',
+      )
+      console.log(`BRIDGESTREAM_DATA=${BRIDGESTREAM_DATA}`) // eslint-disable-line
+    }, 500)
+  }
+
   state = {
     frame: 0,
     fps: 3,
   }
 
   componentDidMount() {
-    const BRIDGESTREAM_DATA = Buffer.from(JSON.stringify(this.props.chunks)).toString('base64')
-    console.log(`BRIDGESTREAM_DATA=${BRIDGESTREAM_DATA}`) // eslint-disable-line
-
-    const nextFrame = ({ frame }, { chunks }) => {
-      frame = (frame + 1) % chunks.length
+    const nextFrame = ({ frame }) => {
+      frame = (frame + 1) % this.chunks.length
       return { frame }
     }
 
@@ -71,11 +77,13 @@ class QRCodeExporter extends PureComponent<
     cancelAnimationFrame(this._raf)
   }
 
+  chunks: string[]
   _raf: *
 
   render() {
     const { frame } = 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) => (

yarn.lock

@@ -12861,10 +12861,10 @@ qrcode@^1.2.0:
     pngjs "^3.3.0"
     yargs "^8.0.2"
 
-qrloop@^0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/qrloop/-/qrloop-0.6.1.tgz#167f8868f03018c7625b0e887049830e9253beae"
-  integrity sha512-1wJwoKpukmkfqwzyb9lMMEE9BDWXlKv63J/gdWMIeUfzgSR3QrZ3VKTtjN9Xvyo1DWwJd/G3FuMtJaH9cf+XUw==
+qrloop@0.8.0-beta.2:
+  version "0.8.0-beta.2"
+  resolved "https://registry.yarnpkg.com/qrloop/-/qrloop-0.8.0-beta.2.tgz#23253ffe4a2754a5752039225db81e58a068ae42"
+  integrity sha512-hCSS6pJ+eIDQGaHqztEq/WIn0w5T06nBWptCUl6oX3rJbdmpK7cg0cqGBSnB+pITKtzyvPpVe4t7L0tIGk7NhQ==
   dependencies:
     flow-typed "^2.5.1"
     md5 "^2.2.1"