Merge branch 'NewUI-flat' into NewUI-flat-4.0.5c

11 files changed, 148 insertions, 13 deletions

diff --git a/app/scripts/config.js b/app/scripts/config.js
index 1d4ff7c0d..74c5b576e 100644
--- a/app/scripts/config.js
+++ b/app/scripts/config.js
@@ -4,6 +4,15 @@ const KOVAN_RPC_URL = 'https://kovan.infura.io/metamask'
 const RINKEBY_RPC_URL = 'https://rinkeby.infura.io/metamask'
 const LOCALHOST_RPC_URL = 'http://localhost:8545'
 
+const MAINET_RPC_URL_BETA = 'https://mainnet.infura.io/metamask2'
+const ROPSTEN_RPC_URL_BETA = 'https://ropsten.infura.io/metamask2'
+const KOVAN_RPC_URL_BETA = 'https://kovan.infura.io/metamask2'
+const RINKEBY_RPC_URL_BETA = 'https://rinkeby.infura.io/metamask2'
+
+const DEFAULT_RPC = 'rinkeby'
+const OLD_UI_NETWORK_TYPE = 'network'
+const BETA_UI_NETWORK_TYPE = 'networkBeta'
+
 global.METAMASK_DEBUG = 'GULP_METAMASK_DEBUG'
 
 module.exports = {
@@ -14,9 +23,22 @@ module.exports = {
     kovan: KOVAN_RPC_URL,
     rinkeby: RINKEBY_RPC_URL,
   },
+  // Used for beta UI
+  networkBeta: {
+    localhost: LOCALHOST_RPC_URL,
+    mainnet: MAINET_RPC_URL_BETA,
+    ropsten: ROPSTEN_RPC_URL_BETA,
+    kovan: KOVAN_RPC_URL_BETA,
+    rinkeby: RINKEBY_RPC_URL_BETA,
+  },
   networkNames: {
     3: 'Ropsten',
     4: 'Rinkeby',
     42: 'Kovan',
   },
+  enums: {
+    DEFAULT_RPC,
+    OLD_UI_NETWORK_TYPE,
+    BETA_UI_NETWORK_TYPE,
+  },
 }
diff --git a/app/scripts/controllers/network.js b/app/scripts/controllers/network.js
index 377ba6eca..db1a5b374 100644
--- a/app/scripts/controllers/network.js
+++ b/app/scripts/controllers/network.js
@@ -7,14 +7,19 @@ const ComposedStore = require('obs-store/lib/composed')
 const extend = require('xtend')
 const EthQuery = require('eth-query')
 const createEventEmitterProxy = require('../lib/events-proxy.js')
-const RPC_ADDRESS_LIST = require('../config.js').network
-const DEFAULT_RPC = RPC_ADDRESS_LIST['rinkeby']
+const networkConfig = require('../config.js')
+const { OLD_UI_NETWORK_TYPE, DEFAULT_RPC } = networkConfig.enums
 const INFURA_PROVIDER_TYPES = ['ropsten', 'rinkeby', 'kovan', 'mainnet']
 
 module.exports = class NetworkController extends EventEmitter {
 
   constructor (config) {
     super()
+
+    this._networkEndpointVersion = OLD_UI_NETWORK_TYPE
+    this._networkEndpoints = this.getNetworkEndpoints(OLD_UI_NETWORK_TYPE)
+    this._defaultRpc = this._networkEndpoints[DEFAULT_RPC]
+
     config.provider.rpcTarget = this.getRpcAddressForType(config.provider.type, config.provider)
     this.networkStore = new ObservableStore('loading')
     this.providerStore = new ObservableStore(config.provider)
@@ -24,6 +29,23 @@ module.exports = class NetworkController extends EventEmitter {
     this.on('networkDidChange', this.lookupNetwork)
   }
 
+  async setNetworkEndpoints (version) {
+    if (version === this._networkEndpointVersion) {
+      return
+    }
+
+    this._networkEndpointVersion = version
+    this._networkEndpoints = this.getNetworkEndpoints(version)
+    this._defaultRpc = this._networkEndpoints[DEFAULT_RPC]
+    const { type } = this.getProviderConfig()
+
+    return this.setProviderType(type, true)
+  }
+
+  getNetworkEndpoints (version = OLD_UI_NETWORK_TYPE) {
+    return networkConfig[version]
+  }
+
   initializeProvider (_providerParams) {
     this._baseProviderParams = _providerParams
     const { type, rpcTarget } = this.providerStore.getState()
@@ -83,10 +105,13 @@ module.exports = class NetworkController extends EventEmitter {
     return this.getRpcAddressForType(provider.type)
   }
 
-  async setProviderType (type) {
+  async setProviderType (type, forceUpdate = false) {
     assert(type !== 'rpc', `NetworkController.setProviderType - cannot connect by type "rpc"`)
     // skip if type already matches
-    if (type === this.getProviderConfig().type) return
+    if (type === this.getProviderConfig().type && !forceUpdate) {
+      return
+    }
+
     const rpcTarget = this.getRpcAddressForType(type)
     assert(rpcTarget, `NetworkController - unknown rpc address for type "${type}"`)
     this.providerStore.updateState({ type, rpcTarget })
@@ -98,8 +123,11 @@ module.exports = class NetworkController extends EventEmitter {
   }
 
   getRpcAddressForType (type, provider = this.getProviderConfig()) {
-    if (RPC_ADDRESS_LIST[type]) return RPC_ADDRESS_LIST[type]
-    return provider && provider.rpcTarget ? provider.rpcTarget : DEFAULT_RPC
+    if (this._networkEndpoints[type]) {
+      return this._networkEndpoints[type]
+    }
+
+    return provider && provider.rpcTarget ? provider.rpcTarget : this._defaultRpc
   }
 
   //
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index c42f47037..39d15fd83 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -9,11 +9,21 @@ class PreferencesController {
       frequentRpcList: [],
       currentAccountTab: 'history',
       tokens: [],
+      useBlockie: false,
+      featureFlags: {},
     }, opts.initState)
     this.store = new ObservableStore(initState)
   }
 // PUBLIC METHODS
 
+  setUseBlockie (val) {
+    this.store.updateState({ useBlockie: val })
+  }
+
+  getUseBlockie () {
+    return this.store.getState().useBlockie
+  }
+
   setSelectedAddress (_address) {
     return new Promise((resolve, reject) => {
       const address = normalizeAddress(_address)
@@ -43,6 +53,17 @@ class PreferencesController {
     }
 
     this.store.updateState({ tokens })
+
+    return Promise.resolve(tokens)
+  }
+
+  removeToken (rawAddress) {
+    const tokens = this.store.getState().tokens
+
+    const updatedTokens = tokens.filter(token => token.address !== rawAddress)
+
+    this.store.updateState({ tokens: updatedTokens })
+    return Promise.resolve(updatedTokens)
   }
 
   getTokens () {
@@ -82,6 +103,22 @@ class PreferencesController {
   getFrequentRpcList () {
     return this.store.getState().frequentRpcList
   }
+
+  setFeatureFlag (feature, activated) {
+    const currentFeatureFlags = this.store.getState().featureFlags
+    const updatedFeatureFlags = {
+      ...currentFeatureFlags,
+      [feature]: activated,
+    }
+
+    this.store.updateState({ featureFlags: updatedFeatureFlags })
+
+    return Promise.resolve(updatedFeatureFlags)
+  }
+
+  getFeatureFlags () {
+    return this.store.getState().featureFlags
+  }
   //
   // PRIVATE METHODS
   //
diff --git a/app/scripts/controllers/transactions.js b/app/scripts/controllers/transactions.js
index 7c7efb84d..7f3130540 100644
--- a/app/scripts/controllers/transactions.js
+++ b/app/scripts/controllers/transactions.js
@@ -193,6 +193,10 @@ module.exports = class TransactionController extends EventEmitter {
     this.txStateManager.updateTx(txMeta, 'retryTransaction: manual retry')
   }
 
+  async updateTransaction (txMeta) {
+    this.txStateManager.updateTx(txMeta, 'confTx: user updated transaction')
+  }
+
   async updateAndApproveTransaction (txMeta) {
     this.txStateManager.updateTx(txMeta, 'confTx: user approved transaction')
     await this.approveTransaction(txMeta.id)
diff --git a/app/scripts/lib/environment-type.js b/app/scripts/lib/environment-type.js
new file mode 100644
index 000000000..7966926eb
--- /dev/null
+++ b/app/scripts/lib/environment-type.js
@@ -0,0 +1,10 @@
+module.exports = function environmentType () {
+  const url = window.location.href
+  if (url.match(/popup.html$/)) {
+    return 'popup'
+  } else if (url.match(/home.html$/)) {
+    return 'responsive'
+  } else {
+    return 'notification'
+  }
+}
diff --git a/app/scripts/lib/is-popup-or-notification.js b/app/scripts/lib/is-popup-or-notification.js
index 693fa8751..e2999411f 100644
--- a/app/scripts/lib/is-popup-or-notification.js
+++ b/app/scripts/lib/is-popup-or-notification.js
@@ -1,6 +1,9 @@
 module.exports = function isPopupOrNotification () {
   const url = window.location.href
-  if (url.match(/popup.html$/)) {
+  // if (url.match(/popup.html$/) || url.match(/home.html$/)) {
+  // Below regexes needed for feature toggles (e.g. see line ~340 in ui/app/app.js)
+  // Revert below regexes to above commented out regexes before merge to master
+  if (url.match(/popup.html(?:\?.+)*$/) || url.match(/home.html(?:\?.+)*$/)) {
     return 'popup'
   } else {
     return 'notification'
diff --git a/app/scripts/lib/notification-manager.js b/app/scripts/lib/notification-manager.js
index 7846ef7f0..adaf60c65 100644
--- a/app/scripts/lib/notification-manager.js
+++ b/app/scripts/lib/notification-manager.js
@@ -1,5 +1,5 @@
 const extension = require('extensionizer')
-const height = 520
+const height = 620
 const width = 360
 
 
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 23f2a1598..b50a04703 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -335,6 +335,7 @@ module.exports = class MetamaskController extends EventEmitter {
       // etc
       getState: (cb) => cb(null, this.getState()),
       setCurrentCurrency: this.setCurrentCurrency.bind(this),
+      setUseBlockie: this.setUseBlockie.bind(this),
       markAccountsFound: this.markAccountsFound.bind(this),
 
       // coinbase
@@ -352,13 +353,16 @@ module.exports = class MetamaskController extends EventEmitter {
       submitPassword: nodeify(keyringController.submitPassword, keyringController),
 
       // network management
+      setNetworkEndpoints: nodeify(networkController.setNetworkEndpoints, networkController),
       setProviderType: nodeify(networkController.setProviderType, networkController),
       setCustomRpc: nodeify(this.setCustomRpc, this),
 
       // PreferencesController
       setSelectedAddress: nodeify(preferencesController.setSelectedAddress, preferencesController),
       addToken: nodeify(preferencesController.addToken, preferencesController),
+      removeToken: nodeify(preferencesController.removeToken, preferencesController),
       setCurrentAccountTab: nodeify(preferencesController.setCurrentAccountTab, preferencesController),
+      setFeatureFlag: nodeify(preferencesController.setFeatureFlag, preferencesController),
 
       // AddressController
       setAddressBook: nodeify(addressBookController.setAddressBook, addressBookController),
@@ -373,6 +377,7 @@ module.exports = class MetamaskController extends EventEmitter {
 
       // txController
       cancelTransaction: nodeify(txController.cancelTransaction, txController),
+      updateTransaction: nodeify(txController.updateTransaction, txController),
       updateAndApproveTransaction: nodeify(txController.updateAndApproveTransaction, txController),
       retryTransaction: nodeify(this.retryTransaction, this),
 
@@ -821,6 +826,15 @@ module.exports = class MetamaskController extends EventEmitter {
     return rpcTarget
   }
 
+  setUseBlockie (val, cb) {
+    try {
+      this.preferencesController.setUseBlockie(val)
+      cb(null)
+    } catch (err) {
+      cb(err)
+    }
+  }
+
   recordFirstTimeInfo (initState) {
     if (!('firstTimeInfo' in initState)) {
       initState.firstTimeInfo = {
diff --git a/app/scripts/platforms/extension.js b/app/scripts/platforms/extension.js
index 2f47512eb..f5cc255d1 100644
--- a/app/scripts/platforms/extension.js
+++ b/app/scripts/platforms/extension.js
@@ -17,6 +17,11 @@ class ExtensionPlatform {
     return extension.runtime.getManifest().version
   }
 
+  openExtensionInBrowser () {
+    const extensionURL = extension.runtime.getURL('home.html')
+    this.openWindow({ url: extensionURL })
+  }
+
   getPlatformInfo (cb) {
     try {
       extension.runtime.getPlatformInfo((platform) => {
diff --git a/app/scripts/popup-core.js b/app/scripts/popup-core.js
index f1eb394d7..2e4334bb1 100644
--- a/app/scripts/popup-core.js
+++ b/app/scripts/popup-core.js
@@ -1,6 +1,7 @@
 const EventEmitter = require('events').EventEmitter
 const async = require('async')
 const Dnode = require('dnode')
+const Eth = require('ethjs')
 const EthQuery = require('eth-query')
 const launchMetamaskUi = require('../../ui')
 const StreamProvider = require('web3-stream-provider')
@@ -34,6 +35,7 @@ function setupWeb3Connection (connectionStream) {
   providerStream.on('error', console.error.bind(console))
   global.ethereumProvider = providerStream
   global.ethQuery = new EthQuery(providerStream)
+  global.eth = new Eth(providerStream)
 }
 
 function setupControllerConnection (connectionStream, cb) {
diff --git a/app/scripts/popup.js b/app/scripts/popup.js
index 5f17f0651..d0952af6a 100644
--- a/app/scripts/popup.js
+++ b/app/scripts/popup.js
@@ -1,5 +1,6 @@
 const injectCss = require('inject-css')
-const MetaMaskUiCss = require('../../ui/css')
+const OldMetaMaskUiCss = require('../../old-ui/css')
+const NewMetaMaskUiCss = require('../../ui/css')
 const startPopup = require('./popup-core')
 const PortStream = require('./lib/port-stream.js')
 const isPopupOrNotification = require('./lib/is-popup-or-notification')
@@ -11,10 +12,6 @@ const notificationManager = new NotificationManager()
 // create platform global
 global.platform = new ExtensionPlatform()
 
-// inject css
-const css = MetaMaskUiCss()
-injectCss(css)
-
 // identify window type (popup, notification)
 const windowType = isPopupOrNotification()
 global.METAMASK_UI_TYPE = windowType
@@ -28,8 +25,21 @@ const connectionStream = new PortStream(extensionPort)
 const container = document.getElementById('app-content')
 startPopup({ container, connectionStream }, (err, store) => {
   if (err) return displayCriticalError(err)
+
+  let betaUIState = store.getState().metamask.featureFlags.betaUI
+  let css = betaUIState ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
+  let deleteInjectedCss = injectCss(css)
+  let newBetaUIState
+
   store.subscribe(() => {
     const state = store.getState()
+    newBetaUIState = state.metamask.featureFlags.betaUI
+    if (newBetaUIState !== betaUIState) {
+      deleteInjectedCss()
+      betaUIState = newBetaUIState
+      css = betaUIState ? NewMetaMaskUiCss() : OldMetaMaskUiCss()
+      deleteInjectedCss = injectCss(css)
+    }
     if (state.appState.shouldClose) notificationManager.closePopup()
   })
 })