1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 01:39:44 +01:00

Add UI selection

This commit is contained in:
Dan 2017-11-14 12:34:55 -03:30
parent 6561e75aa2
commit 7f79524070
11 changed files with 136 additions and 51 deletions

View File

@ -10,6 +10,7 @@ class PreferencesController {
currentAccountTab: 'history', currentAccountTab: 'history',
tokens: [], tokens: [],
useBlockie: false, useBlockie: false,
featureFlags: {},
}, opts.initState) }, opts.initState)
this.store = new ObservableStore(initState) this.store = new ObservableStore(initState)
} }
@ -100,6 +101,22 @@ class PreferencesController {
getFrequentRpcList () { getFrequentRpcList () {
return this.store.getState().frequentRpcList return this.store.getState().frequentRpcList
} }
setFeatureFlag (feature, activated) {
const currentFeatureFlags = this.store.getState().featureFlags
const updatedFeatureFlags = {
...currentFeatureFlags,
[feature]: activated,
}
this.store.updateState({ featureFlags: updatedFeatureFlags })
console.log(`!!! updatedFeatureFlags`, updatedFeatureFlags);
return Promise.resolve(updatedFeatureFlags)
}
getFeatureFlags () {
return this.store.getState().featureFlags
}
// //
// PRIVATE METHODS // PRIVATE METHODS
// //

View File

@ -341,6 +341,7 @@ module.exports = class MetamaskController extends EventEmitter {
addToken: nodeify(preferencesController.addToken, preferencesController), addToken: nodeify(preferencesController.addToken, preferencesController),
removeToken: nodeify(preferencesController.removeToken, preferencesController), removeToken: nodeify(preferencesController.removeToken, preferencesController),
setCurrentAccountTab: nodeify(preferencesController.setCurrentAccountTab, preferencesController), setCurrentAccountTab: nodeify(preferencesController.setCurrentAccountTab, preferencesController),
setFeatureFlag: nodeify(preferencesController.setFeatureFlag, preferencesController),
// AddressController // AddressController
setAddressBook: nodeify(addressBookController.setAddressBook, addressBookController), setAddressBook: nodeify(addressBookController.setAddressBook, addressBookController),

View File

@ -12,6 +12,7 @@ const notificationManager = new NotificationManager()
global.platform = new ExtensionPlatform() global.platform = new ExtensionPlatform()
// inject css // inject css
console.log(`MetaMaskUiCss`, MetaMaskUiCss);
const css = MetaMaskUiCss() const css = MetaMaskUiCss()
injectCss(css) injectCss(css)

View File

@ -93,7 +93,7 @@ App.prototype.render = function () {
log.debug('Main ui render function') log.debug('Main ui render function')
return ( return (
h('.old-ui', [
h('.flex-column.full-height', { h('.flex-column.full-height', {
style: { style: {
// Windows was showing a vertical scroll bar: // Windows was showing a vertical scroll bar:
@ -119,6 +119,7 @@ App.prototype.render = function () {
this.renderPrimary(), this.renderPrimary(),
]), ]),
]) ])
])
) )
} }

View File

@ -237,6 +237,11 @@ var actions = {
SET_USE_BLOCKIE: 'SET_USE_BLOCKIE', SET_USE_BLOCKIE: 'SET_USE_BLOCKIE',
setUseBlockie, setUseBlockie,
// Feature Flags
setFeatureFlag,
updateFeatureFlags,
UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS',
} }
module.exports = actions module.exports = actions
@ -1506,6 +1511,30 @@ function updateTokenExchangeRate (token = '') {
} }
} }
function setFeatureFlag (feature, activated) {
return (dispatch) => {
dispatch(actions.showLoadingIndication())
return new Promise((resolve, reject) => {
background.setFeatureFlag(feature, activated, (err, updatedFeatureFlags) => {
dispatch(actions.hideLoadingIndication())
if (err) {
dispatch(actions.displayWarning(err.message))
reject(err)
}
dispatch(actions.updateFeatureFlags(updatedFeatureFlags))
resolve(updatedFeatureFlags)
})
})
}
}
function updateFeatureFlags (updatedFeatureFlags) {
return {
type: actions.UPDATE_FEATURE_FLAGS,
value: updatedFeatureFlags,
}
}
// Call Background Then Update // Call Background Then Update
// //
// A function generator for a common pattern wherein: // A function generator for a common pattern wherein:

View File

@ -116,7 +116,7 @@ App.prototype.render = function () {
log.debug('Main ui render function') log.debug('Main ui render function')
return ( return (
h('.new-ui', [
h('.flex-column.full-height', { h('.flex-column.full-height', {
style: { style: {
overflowX: 'hidden', overflowX: 'hidden',
@ -151,6 +151,7 @@ App.prototype.render = function () {
// content // content
this.renderPrimary(), this.renderPrimary(),
]) ])
])
) )
} }
@ -268,6 +269,13 @@ App.prototype.renderAppBar = function () {
}, },
}, 'MetaMask'), }, 'MetaMask'),
h('span', {
style: {},
onClick: () => {
props.dispatch(actions.setFeatureFlag('betaUI', false))
},
}, 'Leave Beta')
]), ]),
h('div.header__right-actions', [ h('div.header__right-actions', [

View File

@ -4,6 +4,7 @@
http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528 http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
*/ */
@import './itcss/settings/index.scss'; @import './itcss/settings/index.scss';
@import './itcss/tools/index.scss'; @import './itcss/tools/index.scss';
@import './itcss/generic/index.scss'; @import './itcss/generic/index.scss';

View File

@ -11,7 +11,7 @@
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
position: relative; position: relative;
z-index: 200; z-index: 201;
font-weight: 200; font-weight: 200;
@media screen and (max-width: 575px) { @media screen and (max-width: 575px) {

View File

@ -37,6 +37,7 @@ function reduceMetamask (state, action) {
}, },
coinOptions: {}, coinOptions: {},
useBlockie: false, useBlockie: false,
featureFlags: {},
}, state.metamask) }, state.metamask)
switch (action.type) { switch (action.type) {
@ -320,6 +321,11 @@ function reduceMetamask (state, action) {
useBlockie: action.value, useBlockie: action.value,
}) })
case actions.UPDATE_FEATURE_FLAGS:
return extend(metamaskState, {
featureFlags: action.value,
})
default: default:
return metamaskState return metamaskState

View File

@ -2,7 +2,7 @@ const inherits = require('util').inherits
const Component = require('react').Component const Component = require('react').Component
const Provider = require('react-redux').Provider const Provider = require('react-redux').Provider
const h = require('react-hyperscript') const h = require('react-hyperscript')
const App = require('./app') const SelectedApp = require('./select-app')
module.exports = Root module.exports = Root
@ -15,7 +15,7 @@ Root.prototype.render = function () {
h(Provider, { h(Provider, {
store: this.props.store, store: this.props.store,
}, [ }, [
h(App), h(SelectedApp),
]) ])
) )

21
ui/app/select-app.js Normal file
View File

@ -0,0 +1,21 @@
const inherits = require('util').inherits
const Component = require('react').Component
const connect = require('react-redux').connect
const h = require('react-hyperscript')
const App = require('./app')
const OldApp = require('../../old-ui/app/app')
function mapStateToProps (state) {
return { betaUI: state.metamask.featureFlags.betaUI }
}
module.exports = connect(mapStateToProps)(SelectedApp)
inherits(SelectedApp, Component)
function SelectedApp () { Component.call(this) }
SelectedApp.prototype.render = function () {
const { betaUI } = this.props
const Selected = betaUI ? App : OldApp
return h(Selected)
}