Track usage of old and new UI (#2794)

[NewUI] Track usage of old and new UI
feature/default_network_editable
Alexander Tseung 7 years ago committed by GitHub
parent 4acd48966e
commit a218008adf
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
  1. 22
      app/scripts/config.js
  2. 40
      app/scripts/controllers/network.js
  3. 1
      app/scripts/metamask-controller.js
  4. 6
      old-ui/app/app.js
  5. 37
      ui/app/actions.js
  6. 7
      ui/app/reducers/metamask.js
  7. 13
      ui/app/select-app.js
  8. 10
      ui/app/settings.js
  9. 6
      ui/index.js

@ -4,6 +4,15 @@ const KOVAN_RPC_URL = 'https://kovan.infura.io/metamask'
const RINKEBY_RPC_URL = 'https://rinkeby.infura.io/metamask' const RINKEBY_RPC_URL = 'https://rinkeby.infura.io/metamask'
const LOCALHOST_RPC_URL = 'http://localhost:8545' 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' global.METAMASK_DEBUG = 'GULP_METAMASK_DEBUG'
module.exports = { module.exports = {
@ -14,9 +23,22 @@ module.exports = {
kovan: KOVAN_RPC_URL, kovan: KOVAN_RPC_URL,
rinkeby: RINKEBY_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: { networkNames: {
3: 'Ropsten', 3: 'Ropsten',
4: 'Rinkeby', 4: 'Rinkeby',
42: 'Kovan', 42: 'Kovan',
}, },
enums: {
DEFAULT_RPC,
OLD_UI_NETWORK_TYPE,
BETA_UI_NETWORK_TYPE,
},
} }

@ -7,14 +7,19 @@ const ComposedStore = require('obs-store/lib/composed')
const extend = require('xtend') const extend = require('xtend')
const EthQuery = require('eth-query') const EthQuery = require('eth-query')
const createEventEmitterProxy = require('../lib/events-proxy.js') const createEventEmitterProxy = require('../lib/events-proxy.js')
const RPC_ADDRESS_LIST = require('../config.js').network const networkConfig = require('../config.js')
const DEFAULT_RPC = RPC_ADDRESS_LIST['rinkeby'] const { OLD_UI_NETWORK_TYPE, DEFAULT_RPC } = networkConfig.enums
const INFURA_PROVIDER_TYPES = ['ropsten', 'rinkeby', 'kovan', 'mainnet'] const INFURA_PROVIDER_TYPES = ['ropsten', 'rinkeby', 'kovan', 'mainnet']
module.exports = class NetworkController extends EventEmitter { module.exports = class NetworkController extends EventEmitter {
constructor (config) { constructor (config) {
super() 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) config.provider.rpcTarget = this.getRpcAddressForType(config.provider.type, config.provider)
this.networkStore = new ObservableStore('loading') this.networkStore = new ObservableStore('loading')
this.providerStore = new ObservableStore(config.provider) this.providerStore = new ObservableStore(config.provider)
@ -24,6 +29,23 @@ module.exports = class NetworkController extends EventEmitter {
this.on('networkDidChange', this.lookupNetwork) 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) { initializeProvider (_providerParams) {
this._baseProviderParams = _providerParams this._baseProviderParams = _providerParams
const { type, rpcTarget } = this.providerStore.getState() const { type, rpcTarget } = this.providerStore.getState()
@ -83,10 +105,13 @@ module.exports = class NetworkController extends EventEmitter {
return this.getRpcAddressForType(provider.type) return this.getRpcAddressForType(provider.type)
} }
async setProviderType (type) { async setProviderType (type, forceUpdate = false) {
assert(type !== 'rpc', `NetworkController.setProviderType - cannot connect by type "rpc"`) assert(type !== 'rpc', `NetworkController.setProviderType - cannot connect by type "rpc"`)
// skip if type already matches // skip if type already matches
if (type === this.getProviderConfig().type) return if (type === this.getProviderConfig().type && !forceUpdate) {
return
}
const rpcTarget = this.getRpcAddressForType(type) const rpcTarget = this.getRpcAddressForType(type)
assert(rpcTarget, `NetworkController - unknown rpc address for type "${type}"`) assert(rpcTarget, `NetworkController - unknown rpc address for type "${type}"`)
this.providerStore.updateState({ type, rpcTarget }) this.providerStore.updateState({ type, rpcTarget })
@ -98,8 +123,11 @@ module.exports = class NetworkController extends EventEmitter {
} }
getRpcAddressForType (type, provider = this.getProviderConfig()) { getRpcAddressForType (type, provider = this.getProviderConfig()) {
if (RPC_ADDRESS_LIST[type]) return RPC_ADDRESS_LIST[type] if (this._networkEndpoints[type]) {
return provider && provider.rpcTarget ? provider.rpcTarget : DEFAULT_RPC return this._networkEndpoints[type]
}
return provider && provider.rpcTarget ? provider.rpcTarget : this._defaultRpc
} }
// //

@ -353,6 +353,7 @@ module.exports = class MetamaskController extends EventEmitter {
submitPassword: nodeify(keyringController.submitPassword, keyringController), submitPassword: nodeify(keyringController.submitPassword, keyringController),
// network management // network management
setNetworkEndpoints: nodeify(networkController.setNetworkEndpoints, networkController),
setProviderType: nodeify(networkController.setProviderType, networkController), setProviderType: nodeify(networkController.setProviderType, networkController),
setCustomRpc: nodeify(this.setCustomRpc, this), setCustomRpc: nodeify(this.setCustomRpc, this),

@ -34,6 +34,7 @@ const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete')
const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') const HDRestoreVaultScreen = require('./keychains/hd/restore-vault')
const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation')
const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns const AccountDropdowns = require('./components/account-dropdowns').AccountDropdowns
const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
module.exports = connect(mapStateToProps)(App) module.exports = connect(mapStateToProps)(App)
@ -405,7 +406,10 @@ App.prototype.renderDropdown = function () {
h(DropdownMenuItem, { h(DropdownMenuItem, {
closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }), closeMenu: () => this.setState({ isMainMenuOpen: !isOpen }),
onClick: () => { this.props.dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')) }, onClick: () => {
this.props.dispatch(actions.setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
.then(() => this.props.dispatch(actions.setNetworkEndpoints(BETA_UI_NETWORK_TYPE)))
},
}, 'Try Beta!'), }, 'Try Beta!'),
]) ])
} }

@ -240,12 +240,17 @@ var actions = {
SET_USE_BLOCKIE: 'SET_USE_BLOCKIE', SET_USE_BLOCKIE: 'SET_USE_BLOCKIE',
setUseBlockie, setUseBlockie,
// Feature Flags // Feature Flags
setFeatureFlag, setFeatureFlag,
updateFeatureFlags, updateFeatureFlags,
UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS', UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS',
// Network
setNetworkEndpoints,
updateNetworkEndpointType,
UPDATE_NETWORK_ENDPOINT_TYPE: 'UPDATE_NETWORK_ENDPOINT_TYPE',
retryTransaction, retryTransaction,
} }
@ -1489,7 +1494,7 @@ function reshowQrCode (data, coin) {
dispatch(actions.showLoadingIndication()) dispatch(actions.showLoadingIndication())
shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => { shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error)) if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
var message = [ var message = [
`Deposit your ${coin} to the address bellow:`, `Deposit your ${coin} to the address bellow:`,
`Deposit Limit: ${mktResponse.limit}`, `Deposit Limit: ${mktResponse.limit}`,
@ -1565,7 +1570,7 @@ function setFeatureFlag (feature, activated, notificationType) {
dispatch(actions.hideLoadingIndication()) dispatch(actions.hideLoadingIndication())
if (err) { if (err) {
dispatch(actions.displayWarning(err.message)) dispatch(actions.displayWarning(err.message))
reject(err) return reject(err)
} }
dispatch(actions.updateFeatureFlags(updatedFeatureFlags)) dispatch(actions.updateFeatureFlags(updatedFeatureFlags))
notificationType && dispatch(actions.showModal({ name: notificationType })) notificationType && dispatch(actions.showModal({ name: notificationType }))
@ -1646,3 +1651,27 @@ function setUseBlockie (val) {
}) })
} }
} }
function setNetworkEndpoints (networkEndpointType) {
return dispatch => {
log.debug('background.setNetworkEndpoints')
return new Promise((resolve, reject) => {
background.setNetworkEndpoints(networkEndpointType, err => {
if (err) {
dispatch(actions.displayWarning(err.message))
return reject(err)
}
dispatch(actions.updateNetworkEndpointType(networkEndpointType))
resolve(networkEndpointType)
})
})
}
}
function updateNetworkEndpointType (networkEndpointType) {
return {
type: actions.UPDATE_NETWORK_ENDPOINT_TYPE,
value: networkEndpointType,
}
}

@ -1,6 +1,7 @@
const extend = require('xtend') const extend = require('xtend')
const actions = require('../actions') const actions = require('../actions')
const MetamascaraPlatform = require('../../../app/scripts/platforms/window') const MetamascaraPlatform = require('../../../app/scripts/platforms/window')
const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums
module.exports = reduceMetamask module.exports = reduceMetamask
@ -39,6 +40,7 @@ function reduceMetamask (state, action) {
coinOptions: {}, coinOptions: {},
useBlockie: false, useBlockie: false,
featureFlags: {}, featureFlags: {},
networkEndpointType: OLD_UI_NETWORK_TYPE,
}, state.metamask) }, state.metamask)
switch (action.type) { switch (action.type) {
@ -335,6 +337,11 @@ function reduceMetamask (state, action) {
featureFlags: action.value, featureFlags: action.value,
}) })
case actions.UPDATE_NETWORK_ENDPOINT_TYPE:
return extend(metamaskState, {
networkEndpointType: action.value,
})
default: default:
return metamaskState return metamaskState

@ -5,7 +5,8 @@ const h = require('react-hyperscript')
const App = require('./app') const App = require('./app')
const OldApp = require('../../old-ui/app/app') const OldApp = require('../../old-ui/app/app')
const { autoAddToBetaUI } = require('./selectors') const { autoAddToBetaUI } = require('./selectors')
const { setFeatureFlag } = require('./actions') const { setFeatureFlag, setNetworkEndpoints } = require('./actions')
const { BETA_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
function mapStateToProps (state) { function mapStateToProps (state) {
return { return {
@ -19,8 +20,14 @@ function mapStateToProps (state) {
function mapDispatchToProps (dispatch) { function mapDispatchToProps (dispatch) {
return { return {
setFeatureFlagWithModal: () => dispatch(setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL')), setFeatureFlagWithModal: () => {
setFeatureFlagWithoutModal: () => dispatch(setFeatureFlag('betaUI', true)), return dispatch(setFeatureFlag('betaUI', true, 'BETA_UI_NOTIFICATION_MODAL'))
.then(() => dispatch(setNetworkEndpoints(BETA_UI_NETWORK_TYPE)))
},
setFeatureFlagWithoutModal: () => {
return dispatch(setFeatureFlag('betaUI', true))
.then(() => dispatch(setNetworkEndpoints(BETA_UI_NETWORK_TYPE)))
},
} }
} }
module.exports = connect(mapStateToProps, mapDispatchToProps)(SelectedApp) module.exports = connect(mapStateToProps, mapDispatchToProps)(SelectedApp)

@ -9,6 +9,7 @@ const { exportAsFile } = require('./util')
const TabBar = require('./components/tab-bar') const TabBar = require('./components/tab-bar')
const SimpleDropdown = require('./components/dropdowns/simple-dropdown') const SimpleDropdown = require('./components/dropdowns/simple-dropdown')
const ToggleButton = require('react-toggle-button') const ToggleButton = require('react-toggle-button')
const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
const getInfuraCurrencyOptions = () => { const getInfuraCurrencyOptions = () => {
const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {
@ -228,7 +229,7 @@ class Settings extends Component {
]) ])
) )
} }
renderOldUI () { renderOldUI () {
const { setFeatureFlagToBeta } = this.props const { setFeatureFlagToBeta } = this.props
@ -265,7 +266,7 @@ class Settings extends Component {
]) ])
) )
} }
renderLogo () { renderLogo () {
return ( return (
h('div.settings__info-logo-wrapper', [ h('div.settings__info-logo-wrapper', [
@ -405,7 +406,10 @@ const mapDispatchToProps = dispatch => {
displayWarning: warning => dispatch(actions.displayWarning(warning)), displayWarning: warning => dispatch(actions.displayWarning(warning)),
revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()), revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
setUseBlockie: value => dispatch(actions.setUseBlockie(value)), setUseBlockie: value => dispatch(actions.setUseBlockie(value)),
setFeatureFlagToBeta: () => dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')), setFeatureFlagToBeta: () => {
return dispatch(actions.setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL'))
.then(() => dispatch(actions.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)))
},
} }
} }

@ -4,6 +4,8 @@ const Root = require('./app/root')
const actions = require('./app/actions') const actions = require('./app/actions')
const configureStore = require('./app/store') const configureStore = require('./app/store')
const txHelper = require('./lib/tx-helper') const txHelper = require('./lib/tx-helper')
const { OLD_UI_NETWORK_TYPE, BETA_UI_NETWORK_TYPE } = require('../app/scripts/config').enums
global.log = require('loglevel') global.log = require('loglevel')
module.exports = launchMetamaskUi module.exports = launchMetamaskUi
@ -35,6 +37,10 @@ function startApp (metamaskState, accountManager, opts) {
networkVersion: opts.networkVersion, networkVersion: opts.networkVersion,
}) })
const useBetaUi = metamaskState.featureFlags.betaUI
const networkEndpointType = useBetaUi ? BETA_UI_NETWORK_TYPE : OLD_UI_NETWORK_TYPE
store.dispatch(actions.setNetworkEndpoints(networkEndpointType))
// if unconfirmed txs, start on txConf page // if unconfirmed txs, start on txConf page
const unapprovedTxsAll = txHelper(metamaskState.unapprovedTxs, metamaskState.unapprovedMsgs, metamaskState.unapprovedPersonalMsgs, metamaskState.unapprovedTypedMessages, metamaskState.network) const unapprovedTxsAll = txHelper(metamaskState.unapprovedTxs, metamaskState.unapprovedMsgs, metamaskState.unapprovedPersonalMsgs, metamaskState.unapprovedTypedMessages, metamaskState.network)
const numberOfUnapprivedTx = unapprovedTxsAll.length const numberOfUnapprivedTx = unapprovedTxsAll.length

Loading…
Cancel
Save