|
|
|
@ -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( |
|
|
|
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, |
|
|
|
}, |
|
|
|
{ |
|
|
|
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') |
|
|
|
console.log(`BRIDGESTREAM_DATA=${BRIDGESTREAM_DATA}`) // eslint-disable-line
|
|
|
|
|
|
|
|
const nextFrame = ({ frame }, { chunks }) => { |
|
|
|
frame = (frame + 1) % chunks.length |
|
|
|
return { frame } |
|
|
|
const nextFrame = ({ frame, framesRendered }) => { |
|
|
|
frame = (frame + 1) % this.chunks.length |
|
|
|
framesRendered = Math.min(Math.max(framesRendered, frame + 1), this.chunks.length) |
|
|
|
return { frame, framesRendered } |
|
|
|
} |
|
|
|
|
|
|
|
let lastT |
|
|
|
@ -71,14 +78,16 @@ class QRCodeExporter extends PureComponent< |
|
|
|
cancelAnimationFrame(this._raf) |
|
|
|
} |
|
|
|
|
|
|
|
chunks: string[] |
|
|
|
_raf: * |
|
|
|
|
|
|
|
render() { |
|
|
|
const { frame } = this.state |
|
|
|
const { chunks, size } = this.props |
|
|
|
const { frame, framesRendered } = this.state |
|
|
|
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> |
|
|
|
|
Gaëtan Renaudeau
6 years ago
GitHub