Feature Flag + Mobile Sync (#5955)
Dan Finlay
6 years ago
committed by
Whymarrh Whitby
parent
fdc7eb2113
commit
f507f2a927
@ -0,0 +1,10 @@ |
|||||||
|
# Secret Preferences |
||||||
|
|
||||||
|
Sometimes we want to test a feature in the wild that may not be ready for public consumption. |
||||||
|
|
||||||
|
One example is our "sync with mobile" feature, which didn't make sense to roll out before the mobile version was live. |
||||||
|
|
||||||
|
To enable features like this, first open the background console, and then you can use the global method `global.setPreference(key, value)`. |
||||||
|
|
||||||
|
For example, if the feature flag was a booelan was called `mobileSync`, you might type `setPreference('mobileSync', true)`. |
||||||
|
|
||||||
@ -0,0 +1,387 @@ |
|||||||
|
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('../../../actions') |
||||||
|
const { DEFAULT_ROUTE } = require('../../../routes') |
||||||
|
const actions = require('../../../actions') |
||||||
|
|
||||||
|
const qrCode = require('qrcode-generator') |
||||||
|
|
||||||
|
import Button from '../../button' |
||||||
|
import LoadingScreen from '../../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: 'primary', |
||||||
|
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) |
||||||
Loading…
Reference in new issue