diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index 4851508a3..40d362f51 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -523,6 +523,9 @@
"networks": {
"message": "Networks"
},
+ "nevermind": {
+ "message": "Nevermind"
+ },
"newAccount": {
"message": "New Account"
},
@@ -637,9 +640,15 @@
"rejected": {
"message": "Rejected"
},
+ "reset": {
+ "message": "Reset"
+ },
"resetAccount": {
"message": "Reset Account"
},
+ "resetAccountDescription": {
+ "message": "Resetting your account will clear your transaction history."
+ },
"restoreFromSeed": {
"message": "Restore account?"
},
@@ -897,7 +906,7 @@
"message": "Welcome to the New UI (Beta)"
},
"uiWelcomeMessage": {
- "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."
+ "message": "You are now using the new Metamask UI."
},
"unapproved": {
"message": "Unapproved"
diff --git a/test/integration/lib/add-token.js b/test/integration/lib/add-token.js
index e51c854d2..5a08c90cd 100644
--- a/test/integration/lib/add-token.js
+++ b/test/integration/lib/add-token.js
@@ -43,7 +43,7 @@ async function runAddTokenFlowTest (assert, done) {
assert.equal(addTokenTitle[0].textContent, 'Add Tokens', 'add token title is correct')
// Cancel Add Token
- const cancelAddTokenButton = await queryAsync($, 'button.btn-secondary--lg.page-container__footer-button')
+ const cancelAddTokenButton = await queryAsync($, 'button.btn-default.btn--large.page-container__footer-button')
assert.ok(cancelAddTokenButton[0], 'cancel add token button present')
cancelAddTokenButton.click()
@@ -75,15 +75,15 @@ async function runAddTokenFlowTest (assert, done) {
tokenWrapper[0].click()
// Click Next button
- let nextButton = await queryAsync($, 'button.btn-primary--lg')
+ let nextButton = await queryAsync($, 'button.btn-primary.btn--large')
assert.equal(nextButton[0].textContent, 'Next', 'next button rendered')
nextButton[0].click()
// Confirm Add token
const confirmAddToken = await queryAsync($, '.confirm-add-token')
assert.ok(confirmAddToken[0], 'confirm add token rendered')
- assert.ok($('button.btn-primary--lg')[0], 'confirm add token button found')
- $('button.btn-primary--lg')[0].click()
+ assert.ok($('button.btn-primary.btn--large')[0], 'confirm add token button found')
+ $('button.btn-primary.btn--large')[0].click()
// Verify added token image
let heroBalance = await queryAsync($, '.hero-balance')
@@ -120,7 +120,7 @@ async function runAddTokenFlowTest (assert, done) {
const errorMessage = await queryAsync($, '#custom-symbol-helper-text')
assert.ok(errorMessage[0], 'error rendered')
- $('button.btn-secondary--lg')[0].click()
+ $('button.btn-default.btn--large')[0].click()
// await timeout(100000)
diff --git a/test/integration/lib/confirm-sig-requests.js b/test/integration/lib/confirm-sig-requests.js
index 3936ac5fa..d5ed7c77c 100644
--- a/test/integration/lib/confirm-sig-requests.js
+++ b/test/integration/lib/confirm-sig-requests.js
@@ -38,7 +38,7 @@ async function runConfirmSigRequestsTest(assert, done) {
let confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.equal(confirmSigRowValue[0].textContent, '0x879a053d4800c6354e76c7985a865d2922c82fb5b3f4577b2fe08b998954f2e0')
- let confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
+ let confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large')
confirmSigSignButton[0].click()
confirmSigHeadline = await queryAsync($, '.request-signature__headline')
@@ -47,7 +47,7 @@ async function runConfirmSigRequestsTest(assert, done) {
confirmSigRowValue = await queryAsync($, '.request-signature__row-value')
assert.ok(confirmSigRowValue[0].textContent.match(/^\#\sTerms\sof\sUse/))
- confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
+ confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large')
confirmSigSignButton[0].click()
confirmSigHeadline = await queryAsync($, '.request-signature__headline')
@@ -57,7 +57,7 @@ async function runConfirmSigRequestsTest(assert, done) {
assert.equal(confirmSigRowValue[0].textContent, 'Hi, Alice!')
assert.equal(confirmSigRowValue[1].textContent, '1337')
- confirmSigSignButton = await queryAsync($, 'button.btn-primary--lg')
+ confirmSigSignButton = await queryAsync($, 'button.btn-primary.btn--large')
confirmSigSignButton[0].click()
const txView = await queryAsync($, '.tx-view')
diff --git a/test/integration/lib/send-new-ui.js b/test/integration/lib/send-new-ui.js
index 3da3f4f95..176907926 100644
--- a/test/integration/lib/send-new-ui.js
+++ b/test/integration/lib/send-new-ui.js
@@ -129,7 +129,7 @@ async function runSendFlowTest(assert, done) {
await customizeGas(assert, 0, 21000, '0', '$0.00 USD')
await customizeGas(assert, 500, 60000, '0.003', '$3.60 USD')
- const sendButton = await queryAsync($, 'button.btn-primary--lg.page-container__footer-button')
+ const sendButton = await queryAsync($, 'button.btn-primary.btn--large.page-container__footer-button')
assert.equal(sendButton[0].textContent, 'Next', 'next button rendered')
sendButton[0].click()
await timeout()
@@ -169,13 +169,13 @@ async function runSendFlowTest(assert, done) {
sendAmountFieldInputInEdit.val('1.0')
reactTriggerChange(sendAmountFieldInputInEdit[0])
- const sendButtonInEdit = await queryAsync($, '.btn-primary--lg.page-container__footer-button')
+ const sendButtonInEdit = await queryAsync($, '.btn-primary.btn--large.page-container__footer-button')
assert.equal(sendButtonInEdit[0].textContent, 'Next', 'next button in edit rendered')
selectState.val('send new ui')
reactTriggerChange(selectState[0])
- const cancelButtonInEdit = await queryAsync($, '.btn-secondary--lg.page-container__footer-button')
+ const cancelButtonInEdit = await queryAsync($, '.btn-default.btn--large.page-container__footer-button')
cancelButtonInEdit[0].click()
// sendButtonInEdit[0].click()
diff --git a/test/screens/new-ui.js b/test/screens/new-ui.js
index 65a542e49..e3ba7f6ab 100644
--- a/test/screens/new-ui.js
+++ b/test/screens/new-ui.js
@@ -163,7 +163,7 @@ async function captureAllScreens() {
await delay(300)
await captureLanguageScreenShots('metamask account detail export private key screen - password entered')
- await driver.findElement(By.css('.btn-primary--lg.export-private-key__button')).click()
+ await driver.findElement(By.css('.btn-primary.btn--large.export-private-key__button')).click()
await delay(300)
await captureLanguageScreenShots('metamask account detail export private key screen - reveal key')
diff --git a/ui/app/actions.js b/ui/app/actions.js
index 649f740e9..a9372d6f3 100644
--- a/ui/app/actions.js
+++ b/ui/app/actions.js
@@ -503,17 +503,23 @@ function requestRevealSeedWords (password) {
}
function resetAccount () {
- return (dispatch) => {
- background.resetAccount((err, account) => {
- dispatch(actions.hideLoadingIndication())
- if (err) {
- dispatch(actions.displayWarning(err.message))
- }
+ return dispatch => {
+ dispatch(actions.showLoadingIndication())
- log.info('Transaction history reset for ' + account)
- dispatch(actions.showAccountsPage())
- })
- }
+ return new Promise((resolve, reject) => {
+ background.resetAccount((err, account) => {
+ dispatch(actions.hideLoadingIndication())
+ if (err) {
+ dispatch(actions.displayWarning(err.message))
+ return reject(err)
+ }
+
+ log.info('Transaction history reset for ' + account)
+ dispatch(actions.showAccountsPage())
+ resolve(account)
+ })
+ })
+ }
}
function addNewKeyring (type, opts) {
diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js
new file mode 100644
index 000000000..14a4da62a
--- /dev/null
+++ b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.component.js
@@ -0,0 +1,54 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../button'
+
+class ConfirmResetAccount extends Component {
+ static propTypes = {
+ hideModal: PropTypes.func.isRequired,
+ resetAccount: PropTypes.func.isRequired,
+ }
+
+ static contextTypes = {
+ t: PropTypes.func,
+ }
+
+ handleReset () {
+ this.props.resetAccount()
+ .then(() => this.props.hideModal())
+ }
+
+ render () {
+ const { t } = this.context
+
+ return (
+
+
+
+ { `${t('resetAccount')}?` }
+
+
+ { t('resetAccountDescription') }
+
+
+
+
+
+
+
+ )
+ }
+}
+
+export default ConfirmResetAccount
diff --git a/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
new file mode 100644
index 000000000..9630a5593
--- /dev/null
+++ b/ui/app/components/modals/confirm-reset-account/confirm-reset-account.container.js
@@ -0,0 +1,13 @@
+import { connect } from 'react-redux'
+import ConfirmResetAccount from './confirm-reset-account.component'
+
+const { hideModal, resetAccount } = require('../../../actions')
+
+const mapDispatchToProps = dispatch => {
+ return {
+ hideModal: () => dispatch(hideModal()),
+ resetAccount: () => dispatch(resetAccount()),
+ }
+}
+
+export default connect(null, mapDispatchToProps)(ConfirmResetAccount)
diff --git a/ui/app/components/modals/confirm-reset-account/index.js b/ui/app/components/modals/confirm-reset-account/index.js
new file mode 100644
index 000000000..c812ffc55
--- /dev/null
+++ b/ui/app/components/modals/confirm-reset-account/index.js
@@ -0,0 +1,2 @@
+import ConfirmResetAccount from './confirm-reset-account.container'
+module.exports = ConfirmResetAccount
diff --git a/ui/app/components/modals/index.scss b/ui/app/components/modals/index.scss
index ec6207f7e..ad6fe16d3 100644
--- a/ui/app/components/modals/index.scss
+++ b/ui/app/components/modals/index.scss
@@ -1 +1,52 @@
-@import './transaction-confirmed/index';
+.modal-container {
+ width: 100%;
+ height: 100%;
+ background-color: #fff;
+ display: flex;
+ flex-flow: column;
+ border-radius: 8px;
+
+ &__title {
+ font-size: 1.5rem;
+ font-weight: 500;
+ padding: 16px 0;
+ text-align: center;
+ }
+
+ &__description {
+ text-align: center;
+ font-size: .875rem;
+ }
+
+ &__content {
+ overflow-y: auto;
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ padding: 32px;
+
+ @media screen and (max-width: 575px) {
+ justify-content: center;
+ padding: 28px 20px;
+ }
+ }
+
+ &__footer {
+ display: flex;
+ flex-flow: row;
+ justify-content: center;
+ border-top: 1px solid #d2d8dd;
+ padding: 16px;
+ flex: 0 0 auto;
+
+ &-button {
+ min-width: 0;
+ margin-right: 16px;
+
+ &:last-of-type {
+ margin-right: 0;
+ }
+ }
+ }
+}
diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js
index 841189277..85e85597a 100644
--- a/ui/app/components/modals/modal.js
+++ b/ui/app/components/modals/modal.js
@@ -19,8 +19,30 @@ 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 ConfirmResetAccount = require('./notification-modals/confirm-reset-account')
+const ConfirmResetAccount = require('./confirm-reset-account')
const TransactionConfirmed = require('./transaction-confirmed')
+const WelcomeBeta = require('./welcome-beta')
+const Notification = require('./notification')
+
+const modalContainerBaseStyle = {
+ transform: 'translate3d(-50%, 0, 0px)',
+ border: '1px solid #CCCFD1',
+ borderRadius: '8px',
+ backgroundColor: '#FFFFFF',
+ boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
+}
+
+const modalContainerLaptopStyle = {
+ ...modalContainerBaseStyle,
+ width: '344px',
+ top: '15%',
+}
+
+const modalContainerMobileStyle = {
+ ...modalContainerBaseStyle,
+ width: '309px',
+ top: '12.5%',
+}
const accountModalStyle = {
mobileModalStyle: {
@@ -174,18 +196,18 @@ const MODALS = {
BETA_UI_NOTIFICATION_MODAL: {
contents: [
- h(NotifcationModal, {
- header: 'uiWelcome',
- message: 'uiWelcomeMessage',
- }),
+ h(Notification, [
+ h(WelcomeBeta),
+ ]),
],
mobileModalStyle: {
- width: '95%',
- top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
+ ...modalContainerMobileStyle,
},
laptopModalStyle: {
- width: '449px',
- top: 'calc(33% + 45px)',
+ ...modalContainerLaptopStyle,
+ },
+ contentStyle: {
+ borderRadius: '8px',
},
},
@@ -209,12 +231,13 @@ const MODALS = {
CONFIRM_RESET_ACCOUNT: {
contents: h(ConfirmResetAccount),
mobileModalStyle: {
- width: '95%',
- top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh',
+ ...modalContainerMobileStyle,
},
laptopModalStyle: {
- width: '473px',
- top: 'calc(33% + 45px)',
+ ...modalContainerLaptopStyle,
+ },
+ contentStyle: {
+ borderRadius: '8px',
},
},
@@ -269,31 +292,18 @@ const MODALS = {
TRANSACTION_CONFIRMED: {
disableBackdropClick: true,
contents: [
- h(TransactionConfirmed, {}, []),
+ h(Notification, [
+ h(TransactionConfirmed),
+ ]),
],
mobileModalStyle: {
- width: '100%',
- height: '100%',
- transform: 'none',
- left: '0',
- right: '0',
- margin: '0 auto',
- boxShadow: '0 0 7px 0 rgba(0,0,0,0.08)',
- top: '0',
- display: 'flex',
+ ...modalContainerMobileStyle,
},
laptopModalStyle: {
- width: '344px',
- transform: 'translate3d(-50%, 0, 0px)',
- top: '15%',
- border: '1px solid #CCCFD1',
- borderRadius: '8px',
- backgroundColor: '#FFFFFF',
- boxShadow: '0 2px 22px 0 rgba(0,0,0,0.2)',
+ ...modalContainerLaptopStyle,
},
contentStyle: {
borderRadius: '8px',
- height: '100%',
},
},
diff --git a/ui/app/components/modals/notification-modals/confirm-reset-account.js b/ui/app/components/modals/notification-modals/confirm-reset-account.js
deleted file mode 100644
index 89fa9bef1..000000000
--- a/ui/app/components/modals/notification-modals/confirm-reset-account.js
+++ /dev/null
@@ -1,46 +0,0 @@
-const { Component } = require('react')
-const PropTypes = require('prop-types')
-const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../actions')
-const NotifcationModal = require('../notification-modal')
-
-class ConfirmResetAccount extends Component {
- render () {
- const { resetAccount } = this.props
-
- return h(NotifcationModal, {
- header: 'Are you sure you want to reset account?',
- message: h('div', [
-
- h('span', `Resetting is for developer use only. This button wipes the current account's transaction history,
- which is used to calculate the current account nonce. `),
-
- h('a.notification-modal__link', {
- href: 'http://metamask.helpscoutdocs.com/article/36-resetting-an-account',
- target: '_blank',
- onClick (event) { global.platform.openWindow({ url: event.target.href }) },
- }, 'Read more.'),
-
- ]),
- showCancelButton: true,
- showConfirmButton: true,
- onConfirm: resetAccount,
-
- })
- }
-}
-
-ConfirmResetAccount.propTypes = {
- resetAccount: PropTypes.func,
-}
-
-const mapDispatchToProps = dispatch => {
- return {
- resetAccount: () => {
- dispatch(actions.resetAccount())
- },
- }
-}
-
-module.exports = connect(null, mapDispatchToProps)(ConfirmResetAccount)
diff --git a/ui/app/components/modals/notification/index.js b/ui/app/components/modals/notification/index.js
new file mode 100644
index 000000000..d60a3129b
--- /dev/null
+++ b/ui/app/components/modals/notification/index.js
@@ -0,0 +1,2 @@
+import Notification from './notification.container'
+module.exports = Notification
diff --git a/ui/app/components/modals/notification/notification.component.js b/ui/app/components/modals/notification/notification.component.js
new file mode 100644
index 000000000..1af2f3ca8
--- /dev/null
+++ b/ui/app/components/modals/notification/notification.component.js
@@ -0,0 +1,30 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Button from '../../button'
+
+const Notification = (props, context) => {
+ return (
+
+ { props.children }
+
+
+
+
+ )
+}
+
+Notification.propTypes = {
+ onHide: PropTypes.func.isRequired,
+ children: PropTypes.element,
+}
+
+Notification.contextTypes = {
+ t: PropTypes.func,
+}
+
+export default Notification
diff --git a/ui/app/components/modals/notification/notification.container.js b/ui/app/components/modals/notification/notification.container.js
new file mode 100644
index 000000000..5b98714da
--- /dev/null
+++ b/ui/app/components/modals/notification/notification.container.js
@@ -0,0 +1,38 @@
+import { connect } from 'react-redux'
+import Notification from './notification.component'
+
+const { hideModal } = require('../../../actions')
+
+const mapStateToProps = state => {
+ const { appState: { modal: { modalState: { props } } } } = state
+ const { onHide } = props
+ return {
+ onHide,
+ }
+}
+
+const mapDispatchToProps = dispatch => {
+ return {
+ hideModal: () => dispatch(hideModal()),
+ }
+}
+
+const mergeProps = (stateProps, dispatchProps, ownProps) => {
+ const { onHide, ...otherStateProps } = stateProps
+ const { hideModal, ...otherDispatchProps } = dispatchProps
+
+ return {
+ ...otherStateProps,
+ ...otherDispatchProps,
+ ...ownProps,
+ onHide: () => {
+ hideModal()
+
+ if (onHide && typeof onHide === 'function') {
+ onHide()
+ }
+ },
+ }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notification)
diff --git a/ui/app/components/modals/transaction-confirmed/index.js b/ui/app/components/modals/transaction-confirmed/index.js
index c8db91388..cee8da7f8 100644
--- a/ui/app/components/modals/transaction-confirmed/index.js
+++ b/ui/app/components/modals/transaction-confirmed/index.js
@@ -1,2 +1,2 @@
-import TransactionConfirmed from './transaction-confirmed.container'
+import TransactionConfirmed from './transaction-confirmed.component'
module.exports = TransactionConfirmed
diff --git a/ui/app/components/modals/transaction-confirmed/index.scss b/ui/app/components/modals/transaction-confirmed/index.scss
deleted file mode 100644
index f8cd1f212..000000000
--- a/ui/app/components/modals/transaction-confirmed/index.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-.transaction-confirmed {
- display: flex;
- flex-direction: column;
- align-items: center;
- padding: 32px;
-
- &__title {
- font-size: 2rem;
- padding: 16px 0;
- }
-
- &__description {
- text-align: center;
- font-size: .875rem;
- line-height: 1.5rem;
- }
-
- @media screen and (max-width: 575px) {
- justify-content: center;
- }
-}
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
index 8d3b288ae..c1c8a2976 100644
--- a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
+++ b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.component.js
@@ -1,42 +1,20 @@
-import React, { Component } from 'react'
+import React from 'react'
import PropTypes from 'prop-types'
-import Button from '../../button'
-class TransactionConfirmed extends Component {
- render () {
- const { t } = this.context
+const TransactionConfirmed = (props, context) => {
+ const { t } = context
- return (
-
-
-
-
- { `${t('confirmed')}!` }
-
-
- { t('initialTransactionConfirmed') }
-
-
-
-
-
+ return (
+
+
+
+ { `${t('confirmed')}!` }
- )
- }
-}
-
-TransactionConfirmed.propTypes = {
- hideModal: PropTypes.func.isRequired,
- onHide: PropTypes.func.isRequired,
+
+ { t('initialTransactionConfirmed') }
+
+
+ )
}
TransactionConfirmed.contextTypes = {
diff --git a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js b/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
deleted file mode 100644
index 63872f7f2..000000000
--- a/ui/app/components/modals/transaction-confirmed/transaction-confirmed.container.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { connect } from 'react-redux'
-import TransactionConfirmed from './transaction-confirmed.component'
-
-const { hideModal } = require('../../../actions')
-
-const mapStateToProps = state => {
- const { appState: { modal: { modalState: { props } } } } = state
- const { onHide } = props
- return {
- onHide,
- }
-}
-
-const mapDispatchToProps = dispatch => {
- return {
- hideModal: () => dispatch(hideModal()),
- }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(TransactionConfirmed)
diff --git a/ui/app/components/modals/welcome-beta/index.js b/ui/app/components/modals/welcome-beta/index.js
new file mode 100644
index 000000000..515c9cdaf
--- /dev/null
+++ b/ui/app/components/modals/welcome-beta/index.js
@@ -0,0 +1,2 @@
+import WelcomeBeta from './welcome-beta.component'
+module.exports = WelcomeBeta
diff --git a/ui/app/components/modals/welcome-beta/welcome-beta.component.js b/ui/app/components/modals/welcome-beta/welcome-beta.component.js
new file mode 100644
index 000000000..61571723a
--- /dev/null
+++ b/ui/app/components/modals/welcome-beta/welcome-beta.component.js
@@ -0,0 +1,23 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const TransactionConfirmed = (props, context) => {
+ const { t } = context
+
+ return (
+
+
+ { `${t('uiWelcome')}` }
+
+
+ { t('uiWelcomeMessage') }
+
+
+ )
+}
+
+TransactionConfirmed.contextTypes = {
+ t: PropTypes.func,
+}
+
+export default TransactionConfirmed