Feature Flag + Mobile Sync

app/_locales/en/messages.json

@@ -794,6 +794,12 @@
   "minutesShorthand": {
     "message": "Min"
   },
+  "mobileSyncTitle": {
+    "message": "Sync accounts with mobile"
+  },
+  "mobileSyncText": {
+    "message": "Please enter your password to confirm it's you!"
+  },
   "myAccounts": {
     "message": "My Accounts"
   },
@@ -1333,6 +1339,27 @@
   "symbolBetweenZeroTwelve": {
     "message": "Symbol must be between 0 and 12 characters."
   },
+  "syncWithMobile": {
+    "message": "Sync with mobile"
+  },
+  "syncWithMobileTitle": {
+    "message": "Sync with mobile"
+  },
+  "syncWithMobileDesc": {
+    "message": "You can sync your accounts and information with your mobile device. Open the MetaMask mobile app, go to \"Settings\" and tap on \"Sync from Browser Extension\""
+  },
+  "syncWithMobileDescNewUsers": {
+    "message": "If you just open the MetaMask Mobile app for the first time, just follow the steps in your phone."
+  },
+  "syncWithMobileScanThisCode": {
+    "message": "Scan this code with your MetaMask mobile app"
+  },
+  "syncWithMobileBeCareful": {
+    "message": "Make sure nobody else is looking at your screen when you scan this code"
+  },
+  "syncWithMobileComplete": {
+    "message": "Your data has been synced succesfully. Enjoy the MetaMask mobile app!"
+  },
   "takesTooLong": {
     "message": "Taking too long?"
   },

app/scripts/controllers/preferences.js

@@ -18,7 +18,9 @@ class PreferencesController {
    * @property {object} store.assetImages Contains assets objects related to assets added
    * @property {boolean} store.useBlockie The users preference for blockie identicons within the UI
    * @property {object} store.featureFlags A key-boolean map, where keys refer to features and booleans to whether the
-   * user wishes to see that feature
+   * user wishes to see that feature.
+   *
+   * Feature flags can be set by the global function `setPreference(feature, enabled)`, and so should not expose any sensitive behavior.
    * @property {object} store.knownMethodData Contains all data methods known by the user
    * @property {string} store.currentLocale The preferred language locale key
    * @property {string} store.selectedAddress A hex string that matches the currently selected address in the app
@@ -33,6 +35,11 @@ class PreferencesController {
       tokens: [],
       suggestedTokens: {},
       useBlockie: false,
+
+      // WARNING: Do not use feature flags for security-sensitive things.
+      // Feature flag toggling is available in the global namespace
+      // for convenient testing of pre-release features, and should never
+      // perform sensitive operations.
       featureFlags: {},
       knownMethodData: {},
       currentLocale: opts.initLangCode,
@@ -52,6 +59,10 @@ class PreferencesController {
     this.store = new ObservableStore(initState)
     this.openPopup = opts.openPopup
     this._subscribeProviderType()
+
+    global.setPreference = (key, value) => {
+      return this.setFeatureFlag(key, value)
+    }
   }
 // PUBLIC METHODS
 

app/scripts/metamask-controller.js

@@ -56,6 +56,7 @@ const EthQuery = require('eth-query')
 const ethUtil = require('ethereumjs-util')
 const sigUtil = require('eth-sig-util')
 
+
 module.exports = class MetamaskController extends EventEmitter {
 
   /**
@@ -410,6 +411,9 @@ module.exports = class MetamaskController extends EventEmitter {
       checkHardwareStatus: nodeify(this.checkHardwareStatus, this),
       unlockHardwareWalletAccount: nodeify(this.unlockHardwareWalletAccount, this),
 
+      // mobile
+      fetchInfoToSync: nodeify(this.fetchInfoToSync, this),
+
       // vault management
       submitPassword: nodeify(this.submitPassword, this),
 
@@ -586,6 +590,60 @@ module.exports = class MetamaskController extends EventEmitter {
     })
   }
 
+  /**
+   * Collects all the information that we want to share
+   * with the mobile client for syncing purposes
+   * @returns Promise<Object> Parts of the state that we want to syncx
+   */
+   async fetchInfoToSync () {
+    // Preferences
+    const {
+      accountTokens,
+      currentLocale,
+      frequentRpcList,
+      identities,
+      selectedAddress,
+      tokens,
+    } = this.preferencesController.store.getState()
+
+    const preferences = {
+      accountTokens,
+      currentLocale,
+      frequentRpcList,
+      identities,
+      selectedAddress,
+      tokens,
+    }
+
+    // Accounts
+    const hdKeyring = this.keyringController.getKeyringsByType('HD Key Tree')[0]
+    const hdAccounts = await hdKeyring.getAccounts()
+    const accounts = {
+      hd: hdAccounts.filter((item, pos) => (hdAccounts.indexOf(item) === pos)).map(address => ethUtil.toChecksumAddress(address)),
+      simpleKeyPair: [],
+      ledger: [],
+      trezor: [],
+    }
+
+    // transactions
+
+    let transactions = this.txController.store.getState().transactions
+    // delete tx for other accounts that we're not importing
+    transactions = transactions.filter(tx => {
+      const checksummedTxFrom = ethUtil.toChecksumAddress(tx.txParams.from)
+      return (
+        accounts.hd.includes(checksummedTxFrom)
+      )
+    })
+
+    return {
+      accounts,
+      preferences,
+      transactions,
+      network: this.networkController.store.getState(),
+    }
+  }
+
   /*
    * Submits the user's password and attempts to unlock the vault.
    * Also synchronizes the preferencesController, to ensure its schema

docs/README.md

@@ -18,3 +18,4 @@ To learn how to develop MetaMask-compatible applications, visit our [Developer D
 - [How to manage notices that appear when the app starts up](./notices.md)
 - [How to port MetaMask to a new platform](./porting_to_new_environment.md)
 - [How to generate a visualization of this repository's development](./development-visualization.md)
+- [How to add a feature behind a secret feature flag](./secret-preferences.md)

docs/secret-preferences.md

@@ -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)`.
+

gulpfile.js

@@ -304,6 +304,7 @@ createTasksForBuildJsMascara({ taskPrefix: 'dev:mascara:js', devMode: true })
 function createTasksForBuildJsUIDeps ({ dependenciesToBundle, filename }) {
   const destinations = browserPlatforms.map(platform => `./dist/${platform}`)
 
+
   const bundleTaskOpts = Object.assign({
     buildSourceMaps: true,
     sourceMapDir: '../sourcemaps',
@@ -512,6 +513,8 @@ function generateBundler (opts, performBundle) {
   bundler.transform(envify({
     METAMASK_DEBUG: opts.devMode,
     NODE_ENV: opts.devMode ? 'development' : 'production',
+    PUBNUB_SUB_KEY: process.env.PUBNUB_SUB_KEY || '',
+    PUBNUB_PUB_KEY: process.env.PUBNUB_PUB_KEY || '',
   }), {
     global: true,
   })

mascara/src/app/buy-ether-widget/index.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
 import {connect} from 'react-redux'
-import {qrcode} from 'qrcode-npm'
+import {qrcode} from 'qrcode-generator'
 import copyToClipboard from 'copy-to-clipboard'
 import ShapeShiftForm from '../shapeshift-form'
 import {buyEth, showAccountDetail} from '../../../../ui/app/actions'

mascara/src/app/shapeshift-form/index.js

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import classnames from 'classnames'
-import {qrcode} from 'qrcode-npm'
+import qrcode from 'qrcode-generator'
 import {connect} from 'react-redux'
 import {shapeShiftSubview, pairUpdate, buyWithShapeShift} from '../../../../ui/app/actions'
 import {isValidAddress} from '../../../../ui/app/util'