Improve QRCode mobile export

src/components/QRCodeExporter.js

@@ -17,36 +17,44 @@ const mapStateToProps = createSelector(accountsSelector, accounts => ({
   }),
 }))
 
+const LOW_FPS = 2
+const HIGH_FPS = 8
+
 class QRCodeExporter extends PureComponent<
   {
     chunks: string[],
-    fps: number,
     size: number,
   },
   {
     frame: number,
+    fps: number,
   },
 > {
   static defaultProps = {
-    fps: 4,
-    size: 480,
+    size: 440,
   }
 
   state = {
     frame: 0,
+    fps: HIGH_FPS,
   }
 
   componentDidMount() {
-    console.log(`BRIDGESTREAM_DATA=${JSON.stringify(this.props.chunks)}`) // eslint-disable-line
+    console.log(`BRIDGESTREAM_DATA=${btoa(JSON.stringify(this.props.chunks))}`) // eslint-disable-line
+
+    const nextFrame = ({ frame, fps }, { chunks }) => {
+      frame = (frame + 1) % chunks.length
+      return {
+        frame,
+        fps: frame === 0 ? (fps === LOW_FPS ? HIGH_FPS : LOW_FPS) : fps,
+      }
+    }
 
-    const nextFrame = ({ frame }, { chunks }) => ({
-      frame: (frame + 1) % chunks.length,
-    })
     let lastT
     const loop = t => {
       this._raf = requestAnimationFrame(loop)
       if (!lastT) lastT = t
-      if ((t - lastT) * this.props.fps < 1000) return
+      if ((t - lastT) * this.state.fps < 1000) return
       lastT = t
       this.setState(nextFrame)
     }
@@ -66,7 +74,7 @@ class QRCodeExporter extends PureComponent<
       <div style={{ position: 'relative', width: size, height: size }}>
         {chunks.map((chunk, i) => (
           <div key={String(i)} style={{ position: 'absolute', opacity: i === frame ? 1 : 0 }}>
-            <QRCode data={chunk} size={size} />
+            <QRCode data={chunk} size={size} errorCorrectionLevel="M" />
           </div>
         ))}
       </div>

src/components/SettingsPage/sections/Tools.js

@@ -26,9 +26,7 @@ class TabProfile extends PureComponent<*, *> {
     <ModalBody onClose={onClose} justify="center" align="center">
       <ModalTitle>{'QRCode Mobile Export'}</ModalTitle>
       <ModalContent flow={4}>
-        <Box>
-          Open Ledger Wallet Mobile App, go to <strong>Settings {'>'} Import Accounts</strong>
-        </Box>
+        <Box>Scan this animated QRCode with Ledger Live Mobile App</Box>
         <QRCodeExporter />
       </ModalContent>
     </ModalBody>

src/components/base/QRCode/index.js

@@ -5,12 +5,14 @@ import qrcode from 'qrcode'
 
 type Props = {
   data: string,
+  errorCorrectionLevel: string,
   size: number,
 }
 
 class QRCode extends PureComponent<Props> {
   static defaultProps = {
     size: 200,
+    errorCorrectionLevel: 'Q',
   }
 
   componentDidMount() {
@@ -24,11 +26,11 @@ class QRCode extends PureComponent<Props> {
   _canvas = null
 
   drawQRCode() {
-    const { data, size } = this.props
+    const { data, size, errorCorrectionLevel } = this.props
     qrcode.toCanvas(this._canvas, data, {
       width: size,
       margin: 0,
-      errorCorrectionLevel: 'Q',
+      errorCorrectionLevel,
       color: {
         light: '#ffffff00', // transparent background
       },