const { Component } = require('react') const { connect } = require('react-redux') const PropTypes = require('prop-types') const h = require('react-hyperscript') const classnames = require('classnames') const PubNub = require('pubnub') const { requestRevealSeedWords, fetchInfoToSync } = require('../../store/actions') const { DEFAULT_ROUTE } = require('../../helpers/constants/routes') const actions = require('../../store/actions') const qrCode = require('qrcode-generator') import Button from '../../components/ui/button' import LoadingScreen from '../../components/ui/loading-screen' const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN' const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN' class MobileSyncPage extends Component { static propTypes = { history: PropTypes.object, selectedAddress: PropTypes.string, displayWarning: PropTypes.func, fetchInfoToSync: PropTypes.func, requestRevealSeedWords: PropTypes.func, } constructor (props) { super(props) this.state = { screen: PASSWORD_PROMPT_SCREEN, password: '', seedWords: null, error: null, syncing: false, completed: false, } this.syncing = false } componentDidMount () { const passwordBox = document.getElementById('password-box') if (passwordBox) { passwordBox.focus() } } handleSubmit (event) { event.preventDefault() this.setState({ seedWords: null, error: null }) this.props.requestRevealSeedWords(this.state.password) .then(seedWords => { this.generateCipherKeyAndChannelName() this.setState({ seedWords, screen: REVEAL_SEED_SCREEN }) this.initWebsockets() }) .catch(error => this.setState({ error: error.message })) } generateCipherKeyAndChannelName () { this.cipherKey = `${this.props.selectedAddress.substr(-4)}-${PubNub.generateUUID()}` this.channelName = `mm-${PubNub.generateUUID()}` } initWebsockets () { this.pubnub = new PubNub({ subscribeKey: process.env.PUBNUB_SUB_KEY, publishKey: process.env.PUBNUB_PUB_KEY, cipherKey: this.cipherKey, ssl: true, }) this.pubnubListener = this.pubnub.addListener({ message: (data) => { const {channel, message} = data // handle message if (channel !== this.channelName || !message) { return false } if (message.event === 'start-sync') { this.startSyncing() } else if (message.event === 'end-sync') { this.disconnectWebsockets() this.setState({syncing: false, completed: true}) } }, }) this.pubnub.subscribe({ channels: [this.channelName], withPresence: false, }) } disconnectWebsockets () { if (this.pubnub && this.pubnubListener) { this.pubnub.disconnect(this.pubnubListener) } } // Calculating a PubNub Message Payload Size. calculatePayloadSize (channel, message) { return encodeURIComponent( channel + JSON.stringify(message) ).length + 100 } chunkString (str, size) { const numChunks = Math.ceil(str.length / size) const chunks = new Array(numChunks) for (let i = 0, o = 0; i < numChunks; ++i, o += size) { chunks[i] = str.substr(o, size) } return chunks } notifyError (errorMsg) { return new Promise((resolve, reject) => { this.pubnub.publish( { message: { event: 'error-sync', data: errorMsg, }, channel: this.channelName, sendByPost: false, // true to send via post storeInHistory: false, }, (status, response) => { if (!status.error) { resolve() } else { reject(response) } }) }) } async startSyncing () { if (this.syncing) return false this.syncing = true this.setState({syncing: true}) const { accounts, network, preferences, transactions } = await this.props.fetchInfoToSync() const allDataStr = JSON.stringify({ accounts, network, preferences, transactions, udata: { pwd: this.state.password, seed: this.state.seedWords, }, }) const chunks = this.chunkString(allDataStr, 17000) const totalChunks = chunks.length try { for (let i = 0; i < totalChunks; i++) { await this.sendMessage(chunks[i], i + 1, totalChunks) } } catch (e) { this.props.displayWarning('Sync failed :(') this.setState({syncing: false}) this.syncing = false this.notifyError(e.toString()) } } sendMessage (data, pkg, count) { return new Promise((resolve, reject) => { this.pubnub.publish( { message: { event: 'syncing-data', data, totalPkg: count, currentPkg: pkg, }, channel: this.channelName, sendByPost: false, // true to send via post storeInHistory: false, }, (status, response) => { if (!status.error) { resolve() } else { reject(response) } } ) }) } componentWillUnmount () { this.disconnectWebsockets() } renderWarning (text) { return ( h('.page-container__warning-container', [ h('.page-container__warning-message', [ h('div', [text]), ]), ]) ) } renderContent () { const { t } = this.context if (this.state.syncing) { return h(LoadingScreen, {loadingMessage: 'Sync in progress'}) } if (this.state.completed) { return h('div.reveal-seed__content', {}, h('label.reveal-seed__label', { style: { width: '100%', textAlign: 'center', }, }, t('syncWithMobileComplete')), ) } return this.state.screen === PASSWORD_PROMPT_SCREEN ? h('div', {}, [ this.renderWarning(this.context.t('mobileSyncText')), h('.reveal-seed__content', [ this.renderPasswordPromptContent(), ]), ]) : h('div', {}, [ this.renderWarning(this.context.t('syncWithMobileBeCareful')), h('.reveal-seed__content', [ this.renderRevealSeedContent() ]), ]) } renderPasswordPromptContent () { const { t } = this.context return ( h('form', { onSubmit: event => this.handleSubmit(event), }, [ h('label.input-label', { htmlFor: 'password-box', }, t('enterPasswordContinue')), h('.input-group', [ h('input.form-control', { type: 'password', placeholder: t('password'), id: 'password-box', value: this.state.password, onChange: event => this.setState({ password: event.target.value }), className: classnames({ 'form-control--error': this.state.error }), }), ]), this.state.error && h('.reveal-seed__error', this.state.error), ]) ) } renderRevealSeedContent () { const qrImage = qrCode(0, 'M') qrImage.addData(`metamask-sync:${this.channelName}|@|${this.cipherKey}`) qrImage.make() const { t } = this.context return ( h('div', [ h('label.reveal-seed__label', { style: { width: '100%', textAlign: 'center', }, }, t('syncWithMobileScanThisCode')), h('.div.qr-wrapper', { style: { display: 'flex', justifyContent: 'center', }, dangerouslySetInnerHTML: { __html: qrImage.createTableTag(4), }, }), ]) ) } renderFooter () { return this.state.screen === PASSWORD_PROMPT_SCREEN ? this.renderPasswordPromptFooter() : this.renderRevealSeedFooter() } renderPasswordPromptFooter () { return ( h('div.new-account-import-form__buttons', {style: {padding: 30}}, [ h(Button, { type: 'default', large: true, className: 'new-account-create-form__button', onClick: () => this.props.history.push(DEFAULT_ROUTE), }, this.context.t('cancel')), h(Button, { type: 'secondary', large: true, className: 'new-account-create-form__button', onClick: event => this.handleSubmit(event), disabled: this.state.password === '', }, this.context.t('next')), ]) ) } renderRevealSeedFooter () { return ( h('.page-container__footer', {style: {padding: 30}}, [ h(Button, { type: 'default', large: true, className: 'page-container__footer-button', onClick: () => this.props.history.push(DEFAULT_ROUTE), }, this.context.t('close')), ]) ) } render () { return ( h('.page-container', [ h('.page-container__header', [ h('.page-container__title', this.context.t('syncWithMobileTitle')), this.state.screen === PASSWORD_PROMPT_SCREEN ? h('.page-container__subtitle', this.context.t('syncWithMobileDesc')) : null, this.state.screen === PASSWORD_PROMPT_SCREEN ? h('.page-container__subtitle', this.context.t('syncWithMobileDescNewUsers')) : null, ]), h('.page-container__content', [ this.renderContent(), ]), this.renderFooter(), ]) ) } } MobileSyncPage.propTypes = { requestRevealSeedWords: PropTypes.func, fetchInfoToSync: PropTypes.func, history: PropTypes.object, } MobileSyncPage.contextTypes = { t: PropTypes.func, } const mapDispatchToProps = dispatch => { return { requestRevealSeedWords: password => dispatch(requestRevealSeedWords(password)), fetchInfoToSync: () => dispatch(fetchInfoToSync()), displayWarning: (message) => dispatch(actions.displayWarning(message || null)), } } const mapStateToProps = state => { const { metamask: { selectedAddress }, } = state return { selectedAddress, } } module.exports = connect(mapStateToProps, mapDispatchToProps)(MobileSyncPage)