aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorChi Kei Chan <chikeichan@gmail.com>2017-12-08 01:47:31 +0800
committerGitHub <noreply@github.com>2017-12-08 01:47:31 +0800
commite0d0e19c925224bddf56a4088fb9c402d995d79f (patch)
treef6306a17629d68e217488ab15af7ce5029c07335 /ui
parent2e9137dddd4abd07cc45caa670f09bdc9559bbbb (diff)
parentefa894a0c3af0b8182b639c25b4c249b083009cf (diff)
downloadtangerine-wallet-browser-e0d0e19c925224bddf56a4088fb9c402d995d79f.tar
tangerine-wallet-browser-e0d0e19c925224bddf56a4088fb9c402d995d79f.tar.gz
tangerine-wallet-browser-e0d0e19c925224bddf56a4088fb9c402d995d79f.tar.bz2
tangerine-wallet-browser-e0d0e19c925224bddf56a4088fb9c402d995d79f.tar.lz
tangerine-wallet-browser-e0d0e19c925224bddf56a4088fb9c402d995d79f.tar.xz
tangerine-wallet-browser-e0d0e19c925224bddf56a4088fb9c402d995d79f.tar.zst
tangerine-wallet-browser-e0d0e19c925224bddf56a4088fb9c402d995d79f.zip
Merge pull request #2697 from danjm/MM-333-auto-add-users-to-new-UI
[NewUI] Auto add users to new ui
Diffstat (limited to 'ui')
-rw-r--r--ui/app/actions.js50
-rw-r--r--ui/app/app.js53
-rw-r--r--ui/app/components/modals/modal.js37
-rw-r--r--ui/app/components/modals/notification-modal.js51
-rw-r--r--ui/app/css/index.scss1
-rw-r--r--ui/app/css/itcss/components/menu.scss2
-rw-r--r--ui/app/css/itcss/components/modal.scss36
-rw-r--r--ui/app/css/itcss/components/settings.scss5
-rw-r--r--ui/app/reducers/metamask.js8
-rw-r--r--ui/app/root.js4
-rw-r--r--ui/app/select-app.js47
-rw-r--r--ui/app/selectors.js18
-rw-r--r--ui/app/settings.js25
13 files changed, 299 insertions, 38 deletions
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 326c361cd..ed0518184 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -239,6 +239,11 @@ var actions = {
SET_USE_BLOCKIE: 'SET_USE_BLOCKIE',
setUseBlockie,
+
+ // Feature Flags
+ setFeatureFlag,
+ updateFeatureFlags,
+ UPDATE_FEATURE_FLAGS: 'UPDATE_FEATURE_FLAGS',
}
module.exports = actions
@@ -997,9 +1002,10 @@ function showConfigPage (transitionForward = true) {
}
}
-function showAddTokenPage () {
+function showAddTokenPage (transitionForward = true) {
return {
type: actions.SHOW_ADD_TOKEN_PAGE,
+ value: transitionForward,
}
}
@@ -1281,7 +1287,8 @@ function exportAccount (password, address) {
return reject(err)
}
- dispatch(self.exportAccountComplete())
+ // dispatch(self.exportAccountComplete())
+ dispatch(self.showPrivateKey(result))
return resolve(result)
})
@@ -1448,7 +1455,7 @@ function reshowQrCode (data, coin) {
dispatch(actions.showLoadingIndication())
shapeShiftRequest('marketinfo', {pair: `${coin.toLowerCase()}_eth`}, (mktResponse) => {
if (mktResponse.error) return dispatch(actions.displayWarning(mktResponse.error))
-
+
var message = [
`Deposit your ${coin} to the address bellow:`,
`Deposit Limit: ${mktResponse.limit}`,
@@ -1456,10 +1463,11 @@ function reshowQrCode (data, coin) {
]
dispatch(actions.hideLoadingIndication())
- return dispatch(actions.showModal({
- name: 'SHAPESHIFT_DEPOSIT_TX',
- Qr: { data, message },
- }))
+ return dispatch(actions.showQrView(data, message))
+ // return dispatch(actions.showModal({
+ // name: 'SHAPESHIFT_DEPOSIT_TX',
+ // Qr: { data, message },
+ // }))
})
}
}
@@ -1515,6 +1523,34 @@ function updateTokenExchangeRate (token = '') {
}
}
+function setFeatureFlag (feature, activated) {
+ const notificationType = activated
+ ? 'BETA_UI_NOTIFICATION_MODAL'
+ : 'OLD_UI_NOTIFICATION_MODAL'
+ 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))
+ dispatch(actions.showModal({ name: notificationType }))
+ resolve(updatedFeatureFlags)
+ })
+ })
+ }
+}
+
+function updateFeatureFlags (updatedFeatureFlags) {
+ return {
+ type: actions.UPDATE_FEATURE_FLAGS,
+ value: updatedFeatureFlags,
+ }
+}
+
// Call Background Then Update
//
// A function generator for a common pattern wherein:
diff --git a/ui/app/app.js b/ui/app/app.js
index e90c3e98e..88a5c8458 100644
--- a/ui/app/app.js
+++ b/ui/app/app.js
@@ -116,40 +116,41 @@ App.prototype.render = function () {
log.debug('Main ui render function')
return (
+ h('.new-ui', [
+ h('.flex-column.full-height', {
+ style: {
+ overflowX: 'hidden',
+ position: 'relative',
+ alignItems: 'center',
+ },
+ }, [
- h('.flex-column.full-height', {
- style: {
- overflowX: 'hidden',
- position: 'relative',
- alignItems: 'center',
- },
- }, [
-
- // global modal
- h(Modal, {}, []),
+ // global modal
+ h(Modal, {}, []),
- // app bar
- this.renderAppBar(),
+ // app bar
+ this.renderAppBar(),
- // sidebar
- this.renderSidebar(),
+ // sidebar
+ this.renderSidebar(),
- // network dropdown
- h(NetworkDropdown, {
- provider: this.props.provider,
- frequentRpcList: this.props.frequentRpcList,
- }, []),
+ // network dropdown
+ h(NetworkDropdown, {
+ provider: this.props.provider,
+ frequentRpcList: this.props.frequentRpcList,
+ }, []),
- h(AccountMenu),
+ h(AccountMenu),
- (isLoading || isLoadingNetwork) && h(Loading, {
- loadingMessage: loadMessage,
- }),
+ (isLoading || isLoadingNetwork) && h(Loading, {
+ loadingMessage: loadMessage,
+ }),
- // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
+ // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }),
- // content
- this.renderPrimary(),
+ // content
+ this.renderPrimary(),
+ ]),
])
)
}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index f2909f3c3..2ff6accaa 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -16,6 +16,7 @@ const NewAccountModal = require('./new-account-modal')
const ShapeshiftDepositTxModal = require('./shapeshift-deposit-tx-modal.js')
const HideTokenConfirmationModal = require('./hide-token-confirmation-modal')
const CustomizeGasModal = require('../customize-gas-modal')
+const NotifcationModal = require('./notification-modal')
const accountModalStyle = {
mobileModalStyle: {
@@ -133,6 +134,42 @@ const MODALS = {
},
},
+ BETA_UI_NOTIFICATION_MODAL: {
+ contents: [
+ h(NotifcationModal, {
+ header: 'Welcome to the New UI (Beta)',
+ message: `You are now using the new Metamask UI. Take a look around, try out new features like sending tokens,
+ and let us know if you have any issues.`,
+ }),
+ ],
+ mobileModalStyle: {
+ width: '95%',
+ top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+ },
+ laptopModalStyle: {
+ width: '449px',
+ top: 'calc(33% + 45px)',
+ },
+ },
+
+ OLD_UI_NOTIFICATION_MODAL: {
+ contents: [
+ h(NotifcationModal, {
+ header: 'Old UI',
+ message: `You have returned to the old UI. You can switch back to the New UI through the option in the top
+ right dropdown menu.`,
+ }),
+ ],
+ mobileModalStyle: {
+ width: '95%',
+ top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh',
+ },
+ laptopModalStyle: {
+ width: '449px',
+ top: 'calc(33% + 45px)',
+ },
+ },
+
NEW_ACCOUNT: {
contents: [
h(NewAccountModal, {}, []),
diff --git a/ui/app/components/modals/notification-modal.js b/ui/app/components/modals/notification-modal.js
new file mode 100644
index 000000000..239144b0c
--- /dev/null
+++ b/ui/app/components/modals/notification-modal.js
@@ -0,0 +1,51 @@
+const { Component } = require('react')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const { connect } = require('react-redux')
+const actions = require('../../actions')
+
+class NotificationModal extends Component {
+ render () {
+ const {
+ header,
+ message,
+ } = this.props
+
+ return h('div', [
+ h('div.notification-modal-wrapper', {
+ }, [
+
+ h('div.notification-modal-header', {}, [
+ header,
+ ]),
+
+ h('div.notification-modal-message-wrapper', {}, [
+ h('div.notification-modal-message', {}, [
+ message,
+ ]),
+ ]),
+
+ h('div.modal-close-x', {
+ onClick: this.props.hideModal,
+ }),
+
+ ]),
+ ])
+ }
+}
+
+NotificationModal.propTypes = {
+ hideModal: PropTypes.func,
+ header: PropTypes.string,
+ message: PropTypes.string,
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ hideModal: () => {
+ dispatch(actions.hideModal())
+ },
+ }
+}
+
+module.exports = connect(null, mapDispatchToProps)(NotificationModal)
diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss
index 01899ccad..445c819ff 100644
--- a/ui/app/css/index.scss
+++ b/ui/app/css/index.scss
@@ -4,6 +4,7 @@
http://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528
https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/
*/
+
@import './itcss/settings/index.scss';
@import './itcss/tools/index.scss';
@import './itcss/generic/index.scss';
diff --git a/ui/app/css/itcss/components/menu.scss b/ui/app/css/itcss/components/menu.scss
index 17e24de98..77c49bbcf 100644
--- a/ui/app/css/itcss/components/menu.scss
+++ b/ui/app/css/itcss/components/menu.scss
@@ -11,7 +11,7 @@
flex-flow: row nowrap;
align-items: center;
position: relative;
- z-index: 200;
+ z-index: 201;
font-weight: 200;
@media screen and (max-width: 575px) {
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index b69bd5c7e..9b64564d6 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -563,3 +563,39 @@
}
}
}
+
+//Notification Modal
+
+.notification-modal-wrapper {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-start;
+ align-items: center;
+ position: relative;
+ border: 1px solid $alto;
+ box-shadow: 0 0 2px 2px $alto;
+ font-family: Roboto;
+}
+
+.notification-modal-header {
+ background: $wild-sand;
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ padding: 30px;
+ font-size: 22px;
+ color: $nile-blue;
+ height: 79px;
+}
+
+.notification-modal-message {
+ padding: 20px;
+}
+
+.notification-modal-message {
+ width: 100%;
+ display: flex;
+ justify-content: center;
+ font-size: 17px;
+ color: $nile-blue;
+} \ No newline at end of file
diff --git a/ui/app/css/itcss/components/settings.scss b/ui/app/css/itcss/components/settings.scss
index 2f29d8017..d60ebd934 100644
--- a/ui/app/css/itcss/components/settings.scss
+++ b/ui/app/css/itcss/components/settings.scss
@@ -145,6 +145,11 @@
color: $monzo;
}
+.settings__clear-button--orange {
+ border: 1px solid rgba(247, 134, 28, 1);
+ color: rgba(247, 134, 28, 1);
+}
+
.settings__info-logo-wrapper {
height: 80px;
margin-bottom: 20px;
diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js
index 98207f23b..95b41e5f3 100644
--- a/ui/app/reducers/metamask.js
+++ b/ui/app/reducers/metamask.js
@@ -38,6 +38,7 @@ function reduceMetamask (state, action) {
},
coinOptions: {},
useBlockie: false,
+ featureFlags: {},
}, state.metamask)
switch (action.type) {
@@ -319,7 +320,7 @@ function reduceMetamask (state, action) {
return extend(metamaskState, {
tokenExchangeRates: {
...metamaskState.tokenExchangeRates,
- [marketinfo.pair]: ssMarketInfo,
+ [ssMarketInfo.pair]: ssMarketInfo,
},
coinOptions,
})
@@ -329,6 +330,11 @@ function reduceMetamask (state, action) {
useBlockie: action.value,
})
+ case actions.UPDATE_FEATURE_FLAGS:
+ return extend(metamaskState, {
+ featureFlags: action.value,
+ })
+
default:
return metamaskState
diff --git a/ui/app/root.js b/ui/app/root.js
index 9e7314b20..21d6d1829 100644
--- a/ui/app/root.js
+++ b/ui/app/root.js
@@ -2,7 +2,7 @@ const inherits = require('util').inherits
const Component = require('react').Component
const Provider = require('react-redux').Provider
const h = require('react-hyperscript')
-const App = require('./app')
+const SelectedApp = require('./select-app')
module.exports = Root
@@ -15,7 +15,7 @@ Root.prototype.render = function () {
h(Provider, {
store: this.props.store,
}, [
- h(App),
+ h(SelectedApp),
])
)
diff --git a/ui/app/select-app.js b/ui/app/select-app.js
new file mode 100644
index 000000000..ffa31b767
--- /dev/null
+++ b/ui/app/select-app.js
@@ -0,0 +1,47 @@
+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')
+const { autoAddToBetaUI } = require('./selectors')
+const { setFeatureFlag } = require('./actions')
+
+function mapStateToProps (state) {
+ return {
+ betaUI: state.metamask.featureFlags.betaUI,
+ autoAdd: autoAddToBetaUI(state),
+ isUnlocked: state.metamask.isUnlocked,
+ }
+}
+
+function mapDispatchToProps (dispatch) {
+ return {
+ setFeatureFlagToBeta: () => dispatch(setFeatureFlag('betaUI', true)),
+ }
+}
+module.exports = connect(mapStateToProps, mapDispatchToProps)(SelectedApp)
+
+inherits(SelectedApp, Component)
+function SelectedApp () {
+ this.state = {
+ autoAdd: false,
+ }
+ Component.call(this)
+}
+
+SelectedApp.prototype.componentWillReceiveProps = function (nextProps) {
+ const { isUnlocked, setFeatureFlagToBeta } = this.props
+
+ if (!isUnlocked && nextProps.isUnlocked && nextProps.autoAdd) {
+ this.setState({ autoAdd: nextProps.autoAdd })
+ setFeatureFlagToBeta()
+ }
+}
+
+SelectedApp.prototype.render = function () {
+ const { betaUI } = this.props
+ const { autoAdd } = this.state
+ const Selected = betaUI ? App : OldApp
+ return h(Selected)
+}
diff --git a/ui/app/selectors.js b/ui/app/selectors.js
index f891f70c0..22ef439c4 100644
--- a/ui/app/selectors.js
+++ b/ui/app/selectors.js
@@ -24,6 +24,7 @@ const selectors = {
getSendAmount,
getSelectedTokenToFiatRate,
getSelectedTokenContract,
+ autoAddToBetaUI,
getSendMaxModeState,
}
@@ -163,3 +164,20 @@ function getSelectedTokenContract (state) {
? global.eth.contract(abi).at(selectedToken.address)
: null
}
+
+function autoAddToBetaUI (state) {
+ const autoAddTransactionThreshold = 12
+ const autoAddAccountsThreshold = 2
+ const autoAddTokensThreshold = 1
+
+ const numberOfTransactions = state.metamask.selectedAddressTxList.length
+ const numberOfAccounts = Object.keys(state.metamask.accounts).length
+ const numberOfTokensAdded = state.metamask.tokens.length
+
+ const userPassesThreshold = (numberOfTransactions > autoAddTransactionThreshold) &&
+ (numberOfAccounts > autoAddAccountsThreshold) &&
+ (numberOfTokensAdded > autoAddTokensThreshold)
+ const userIsNotInBeta = !state.metamask.featureFlags.betaUI
+
+ return userIsNotInBeta && userPassesThreshold
+} \ No newline at end of file
diff --git a/ui/app/settings.js b/ui/app/settings.js
index caa36d2b8..ca7535d26 100644
--- a/ui/app/settings.js
+++ b/ui/app/settings.js
@@ -228,6 +228,26 @@ class Settings extends Component {
])
)
}
+
+ renderOldUI () {
+ const { setFeatureFlagToBeta } = this.props
+
+ return (
+ h('div.settings__content-row', [
+ h('div.settings__content-item', 'Use old UI'),
+ h('div.settings__content-item', [
+ h('div.settings__content-item-col', [
+ h('button.settings__clear-button.settings__clear-button--orange', {
+ onClick (event) {
+ event.preventDefault()
+ setFeatureFlagToBeta()
+ },
+ }, 'Use old UI'),
+ ]),
+ ]),
+ ])
+ )
+ }
renderSettingsContent () {
const { warning } = this.props
@@ -241,10 +261,11 @@ class Settings extends Component {
this.renderNewRpcUrl(),
this.renderStateLogs(),
this.renderSeedWords(),
+ this.renderOldUI(),
])
)
}
-
+
renderLogo () {
return (
h('div.settings__info-logo-wrapper', [
@@ -362,6 +383,7 @@ Settings.propTypes = {
setRpcTarget: PropTypes.func,
displayWarning: PropTypes.func,
revealSeedConfirmation: PropTypes.func,
+ setFeatureFlagToBeta: PropTypes.func,
warning: PropTypes.string,
goHome: PropTypes.func,
}
@@ -381,6 +403,7 @@ const mapDispatchToProps = dispatch => {
displayWarning: warning => dispatch(actions.displayWarning(warning)),
revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()),
setUseBlockie: value => dispatch(actions.setUseBlockie(value)),
+ setFeatureFlagToBeta: () => dispatch(actions.setFeatureFlag('betaUI', false)),
}
}