Add create new account routes, fix conflicts from uat updates

mascara/src/app/first-time/index.js

@@ -3,7 +3,7 @@ import {connect} from 'react-redux'
 import CreatePasswordScreen from './create-password-screen'
 import UniqueImageScreen from './unique-image-screen'
 import NoticeScreen from './notice-screen'
-import BackupPhraseScreen from './backup-phrase-screen'
+import BackupPhraseScreen from './seed-screen'
 import ImportAccountScreen from './import-account-screen'
 import ImportSeedPhraseScreen from './import-seed-phrase-screen'
 import {onboardingBuyEthView} from '../../../../ui/app/actions'

ui/app/accounts/new-account/index.js

@@ -1,81 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const connect = require('react-redux').connect
-const actions = require('../../actions')
-const { getCurrentViewContext } = require('../../selectors')
-const classnames = require('classnames')
-
-const NewAccountCreateForm = require('./create-form')
-const NewAccountImportForm = require('../import')
-
-function mapStateToProps (state) {
-  return {
-    displayedForm: getCurrentViewContext(state),
-  }
-}
-
-function mapDispatchToProps (dispatch) {
-  return {
-    displayForm: form => dispatch(actions.setNewAccountForm(form)),
-    showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
-    showExportPrivateKeyModal: () => {
-      dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
-    },
-    hideModal: () => dispatch(actions.hideModal()),
-    saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)),
-  }
-}
-
-inherits(AccountDetailsModal, Component)
-function AccountDetailsModal (props) {
-  Component.call(this)
-
-  this.state = {
-    displayedForm: props.displayedForm,
-  }
-}
-
-module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountDetailsModal)
-
-AccountDetailsModal.prototype.render = function () {
-  const { displayedForm, displayForm } = this.props
-
-  return h('div.new-account', {}, [
-    
-    h('div.new-account__header', [
-
-      h('div.new-account__title', 'New Account'),
-
-      h('div.new-account__tabs', [
-
-        h('div.new-account__tabs__tab', {
-          className: classnames('new-account__tabs__tab', {
-            'new-account__tabs__selected': displayedForm === 'CREATE',
-            'new-account__tabs__unselected cursor-pointer': displayedForm !== 'CREATE',
-          }),
-          onClick: () => displayForm('CREATE'),
-        }, 'Create'),
-
-        h('div.new-account__tabs__tab', {
-          className: classnames('new-account__tabs__tab', {
-            'new-account__tabs__selected': displayedForm === 'IMPORT',
-            'new-account__tabs__unselected cursor-pointer': displayedForm !== 'IMPORT',
-          }),
-          onClick: () => displayForm('IMPORT'),
-        }, 'Import'),
-
-      ]),
-
-    ]),
-
-    h('div.new-account__form', [
-
-      displayedForm === 'CREATE'
-        ? h(NewAccountCreateForm)
-        : h(NewAccountImportForm),
-
-    ]),
-
-  ])
-}

ui/app/app.js

@@ -33,7 +33,7 @@ const UnlockPage = require('./components/pages/unlock')
 const RestoreVaultPage = require('./components/pages/keychains/restore-vault')
 const RevealSeedPage = require('./components/pages/keychains/reveal-seed')
 const AddTokenPage = require('./components/pages/add-token')
-const ImportAccountPage = require('./components/pages/import-account')
+const CreateAccountPage = require('./components/pages/create-account')
 const NoticeScreen = require('./components/pages/notice')
 const SignatureRequestPage = require('./components/pages/signature-request')
 
@@ -58,7 +58,7 @@ const {
   CONFIRM_SEED_ROUTE,
   RESTORE_VAULT_ROUTE,
   ADD_TOKEN_ROUTE,
-  IMPORT_ACCOUNT_ROUTE,
+  NEW_ACCOUNT_ROUTE,
   SEND_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,
   INITIALIZE_ROUTE,
@@ -115,7 +115,7 @@ class App extends Component {
         h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }),
         h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }),
         h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }),
-        h(Authenticated, { path: IMPORT_ACCOUNT_ROUTE, exact, component: ImportAccountPage }),
+        h(Authenticated, { path: NEW_ACCOUNT_ROUTE, component: CreateAccountPage }),
         h(Authenticated, { path: SIGNATURE_REQUEST_ROUTE, exact, component: SignatureRequestPage }),
         h(Authenticated, { path: DEFAULT_ROUTE, exact, component: this.renderPrimary }),
       ])

ui/app/components/account-menu/index.js

@@ -8,7 +8,13 @@ const actions = require('../../actions')
 const { Menu, Item, Divider, CloseArea } = require('../dropdowns/components/menu')
 const Identicon = require('../identicon')
 const { formatBalance } = require('../../util')
-const { SETTINGS_ROUTE, INFO_ROUTE, IMPORT_ACCOUNT_ROUTE, DEFAULT_ROUTE } = require('../../routes')
+const {
+  SETTINGS_ROUTE,
+  INFO_ROUTE,
+  NEW_ACCOUNT_ROUTE,
+  IMPORT_ACCOUNT_ROUTE,
+  DEFAULT_ROUTE,
+} = require('../../routes')
 
 module.exports = compose(
   withRouter,
@@ -86,12 +92,18 @@ AccountMenu.prototype.render = function () {
     h('div.account-menu__accounts', this.renderAccounts()),
     h(Divider),
     h(Item, {
-      onClick: () => showNewAccountPage('CREATE'),
+      onClick: () => {
+        toggleAccountMenu()
+        history.push(NEW_ACCOUNT_ROUTE)
+      },
       icon: h('img', { src: 'images/plus-btn-white.svg' }),
       text: 'Create Account',
     }),
     h(Item, {
-      onClick: () => showNewAccountPage('IMPORT'),
+      onClick: () => {
+        toggleAccountMenu()
+        history.push(IMPORT_ACCOUNT_ROUTE)
+      },
       icon: h('img', { src: 'images/import-account.svg' }),
       text: 'Import Account',
     }),

ui/app/components/pages/add-token.js

@@ -27,7 +27,6 @@ const fuse = new Fuse(contractList, {
 const actions = require('../../actions')
 const ethUtil = require('ethereumjs-util')
 const { tokenInfoGetter } = require('../../token-util')
-const R = require('ramda')
 const { DEFAULT_ROUTE } = require('../../routes')
 
 const emptyAddr = '0x0000000000000000000000000000000000000000'

ui/app/components/pages/create-account/import-account/json.js

@@ -1,13 +1,19 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../actions')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const { connect } = require('react-redux')
+const actions = require('../../../../actions')
 const FileInput = require('react-simple-file-input').default
+const { DEFAULT_ROUTE } = require('../../../../routes')
 
 const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
 
-module.exports = connect(mapStateToProps)(JsonImportSubview)
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps)
+)(JsonImportSubview)
 
 function mapStateToProps (state) {
   return {
@@ -50,7 +56,7 @@ JsonImportSubview.prototype.render = function () {
       h('div.new-account-create-form__buttons', {}, [
 
         h('button.new-account-create-form__button-cancel', {
-          onClick: () => this.props.goHome(),
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, [
           'CANCEL',
         ]),

ui/app/components/pages/create-account/import-account/private-key.js

@@ -1,10 +1,16 @@
 const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
-const connect = require('react-redux').connect
-const actions = require('../../../actions')
+const { withRouter } = require('react-router-dom')
+const { compose } = require('recompose')
+const { connect } = require('react-redux')
+const actions = require('../../../../actions')
+const { DEFAULT_ROUTE } = require('../../../../routes')
 
-module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView)
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(PrivateKeyImportView)
 
 function mapStateToProps (state) {
   return {
@@ -14,9 +20,8 @@ function mapStateToProps (state) {
 
 function mapDispatchToProps (dispatch) {
   return {
-    goHome: () => dispatch(actions.goHome()),
     importNewAccount: (strategy, [ privateKey ]) => {
-      dispatch(actions.importNewAccount(strategy, [ privateKey ]))
+      return dispatch(actions.importNewAccount(strategy, [ privateKey ]))
     },
     displayWarning: () => dispatch(actions.displayWarning(null)),
   }
@@ -28,7 +33,7 @@ function PrivateKeyImportView () {
 }
 
 PrivateKeyImportView.prototype.render = function () {
-  const { error, goHome } = this.props
+  const { error } = this.props
 
   return (
     h('div.new-account-import-form__private-key', [
@@ -43,7 +48,7 @@ PrivateKeyImportView.prototype.render = function () {
       h('div.new-account-create-form__buttons', {}, [
 
         h('button.new-account-create-form__button-cancel', {
-          onClick: () => goHome(),
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
         }, [
           'CANCEL',
         ]),
@@ -71,6 +76,8 @@ PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) {
 PrivateKeyImportView.prototype.createNewKeychain = function () {
   const input = document.getElementById('private-key-box')
   const privateKey = input.value
+  const { importNewAccount, history } = this.props
 
-  this.props.importNewAccount('Private Key', [ privateKey ])
+  importNewAccount('Private Key', [ privateKey ])
+    .then(() => history.push(DEFAULT_ROUTE))
 }

ui/app/components/pages/create-account/index.js

@@ -0,0 +1,81 @@
+const Component = require('react').Component
+const { Switch, Route, matchPath } = require('react-router-dom')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const connect = require('react-redux').connect
+const actions = require('../../../actions')
+const { getCurrentViewContext } = require('../../../selectors')
+const classnames = require('classnames')
+const NewAccountCreateForm = require('./new-account')
+const NewAccountImportForm = require('./import-account')
+const { NEW_ACCOUNT_ROUTE, IMPORT_ACCOUNT_ROUTE } = require('../../../routes')
+
+class CreateAccountPage extends Component {
+  renderTabs () {
+    const { history, location } = this.props
+
+    return h('div.new-account__tabs', [
+      h('div.new-account__tabs__tab', {
+        className: classnames('new-account__tabs__tab', {
+          'new-account__tabs__selected': matchPath(location.pathname, {
+            path: NEW_ACCOUNT_ROUTE, exact: true,
+          }),
+        }),
+        onClick: () => history.push(NEW_ACCOUNT_ROUTE),
+      }, 'Create'),
+
+      h('div.new-account__tabs__tab', {
+        className: classnames('new-account__tabs__tab', {
+          'new-account__tabs__selected': matchPath(location.pathname, {
+            path: IMPORT_ACCOUNT_ROUTE, exact: true,
+          }),
+        }),
+        onClick: () => history.push(IMPORT_ACCOUNT_ROUTE),
+      }, 'Import'),
+    ])
+  }
+
+  render () {
+    return h('div.new-account', {}, [
+      h('div.new-account__header', [
+        h('div.new-account__title', 'New Account'),
+        this.renderTabs(),
+      ]),
+      h('div.new-account__form', [
+        h(Switch, [
+          h(Route, {
+            exact: true,
+            path: NEW_ACCOUNT_ROUTE,
+            component: NewAccountCreateForm,
+          }),
+          h(Route, {
+            exact: true,
+            path: IMPORT_ACCOUNT_ROUTE,
+            component: NewAccountImportForm,
+          }),
+        ]),
+      ]),
+    ])
+  }
+}
+
+CreateAccountPage.propTypes = {
+  location: PropTypes.object,
+  history: PropTypes.object,
+}
+
+const mapStateToProps = state => ({
+  displayedForm: getCurrentViewContext(state),
+})
+
+const mapDispatchToProps = dispatch => ({
+  displayForm: form => dispatch(actions.setNewAccountForm(form)),
+  showQrView: (selected, identity) => dispatch(actions.showQrView(selected, identity)),
+  showExportPrivateKeyModal: () => {
+    dispatch(actions.showModal({ name: 'EXPORT_PRIVATE_KEY' }))
+  },
+  hideModal: () => dispatch(actions.hideModal()),
+  saveAccountLabel: (address, label) => dispatch(actions.saveAccountLabel(address, label)),
+})
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(CreateAccountPage)

ui/app/components/pages/create-account/new-account.js

@@ -2,7 +2,8 @@ const { Component } = require('react')
 const PropTypes = require('prop-types')
 const h = require('react-hyperscript')
 const { connect } = require('react-redux')
-const actions = require('../../actions')
+const actions = require('../../../actions')
+const { DEFAULT_ROUTE } = require('../../../routes')
 
 class NewAccountCreateForm extends Component {
   constructor (props) {
@@ -17,6 +18,7 @@ class NewAccountCreateForm extends Component {
 
   render () {
     const { newAccountName } = this.state
+    const { history, createAccount } = this.props
 
     return h('div.new-account-create-form', [
 
@@ -35,13 +37,16 @@ class NewAccountCreateForm extends Component {
       h('div.new-account-create-form__buttons', {}, [
 
         h('button.new-account-create-form__button-cancel', {
-          onClick: () => this.props.goHome(),
+          onClick: () => history.push(DEFAULT_ROUTE),
         }, [
           'CANCEL',
         ]),
 
         h('button.new-account-create-form__button-create', {
-          onClick: () => this.props.createAccount(newAccountName),
+          onClick: () => {
+            createAccount(newAccountName)
+              .then(() => history.push(DEFAULT_ROUTE))
+          },
         }, [
           'CREATE',
         ]),
@@ -56,8 +61,8 @@ NewAccountCreateForm.propTypes = {
   hideModal: PropTypes.func,
   showImportPage: PropTypes.func,
   createAccount: PropTypes.func,
-  goHome: PropTypes.func,
   numberOfExistingAccounts: PropTypes.number,
+  history: PropTypes.object,
 }
 
 const mapStateToProps = state => {
@@ -73,23 +78,17 @@ const mapStateToProps = state => {
 
 const mapDispatchToProps = dispatch => {
   return {
-    toCoinbase: (address) => {
-      dispatch(actions.buyEth({ network: '1', address, amount: 0 }))
-    },
-    hideModal: () => {
-      dispatch(actions.hideModal())
-    },
-    createAccount: (newAccountName) => {
-      dispatch(actions.addNewAccount())
-        .then((newAccountAddress) => {
+    toCoinbase: address => dispatch(actions.buyEth({ network: '1', address, amount: 0 })),
+    hideModal: () => dispatch(actions.hideModal()),
+    createAccount: newAccountName => {
+      return dispatch(actions.addNewAccount())
+        .then(newAccountAddress => {
           if (newAccountName) {
             dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName))
           }
-          dispatch(actions.goHome())
         })
     },
     showImportPage: () => dispatch(actions.showImportPage()),
-    goHome: () => dispatch(actions.goHome()),
   }
 }
 

ui/app/components/pages/import-account/index.js

@@ -1,95 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const PropTypes = require('prop-types')
-import Select from 'react-select'
-
-// Subviews
-const JsonImportView = require('./json.js')
-const PrivateKeyImportView = require('./private-key.js')
-
-const PRIVATE_KEY_MENU_ITEM = 'Private Key'
-const JSON_FILE_MENU_ITEM = 'JSON File'
-
-class ImportAccount extends Component {
-  constructor (props) {
-    super(props)
-
-    this.state = {
-      current: PRIVATE_KEY_MENU_ITEM,
-      menuItems: [ PRIVATE_KEY_MENU_ITEM, JSON_FILE_MENU_ITEM ],
-    }
-  }
-
-  renderImportView () {
-    const { current } = this.state
-
-    switch (current) {
-      case 'Private Key':
-        return h(PrivateKeyImportView)
-      case 'JSON File':
-        return h(JsonImportView)
-      default:
-        return h(JsonImportView)
-    }
-  }
-
-  render () {
-    const { history } = this.props
-    const { current, menuItems } = this.state
-
-    return (
-      h('div.flex-center', {
-        style: {
-          flexDirection: 'column',
-          marginTop: '32px',
-        },
-      }, [
-        h('.section-title.flex-row.flex-center', [
-          h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', {
-            onClick: history.goBack,
-          }),
-          h('h2.page-subtitle', 'Import Accounts'),
-        ]),
-        h('div', {
-          style: {
-            padding: '10px 0',
-            width: '260px',
-            color: 'rgb(174, 174, 174)',
-          },
-        }, [
-
-          h('h3', { style: { padding: '3px' } }, 'SELECT TYPE'),
-
-          h('style', `
-            .has-value.Select--single > .Select-control .Select-value .Select-value-label, .Select-value-label {
-              color: rgb(174,174,174);
-            }
-          `),
-
-          h(Select, {
-            name: 'import-type-select',
-            clearable: false,
-            value: current,
-            options: menuItems.map(type => {
-              return {
-                value: type,
-                label: type,
-              }
-            }),
-            onChange: opt => {
-              this.setState({ current: opt.value })
-            },
-          }),
-        ]),
-
-        this.renderImportView(),
-      ])
-    )
-  }
-}
-
-ImportAccount.propTypes = {
-  history: PropTypes.object,
-}
-
-module.exports = ImportAccount

ui/app/components/pages/settings/index.js

@@ -5,7 +5,7 @@ const h = require('react-hyperscript')
 const TabBar = require('../../tab-bar')
 const Settings = require('./settings')
 const Info = require('./info')
-const { SETTINGS_ROUTE, INFO_ROUTE } = require('../../../routes')
+const { DEFAULT_ROUTE, SETTINGS_ROUTE, INFO_ROUTE } = require('../../../routes')
 
 class Config extends Component {
   renderTabs () {
@@ -30,7 +30,7 @@ class Config extends Component {
       h('.main-container.settings', {}, [
         h('.settings__header', [
           h('div.settings__close-button', {
-            onClick: () => history.push('/'),
+            onClick: () => history.push(DEFAULT_ROUTE),
           }),
           this.renderTabs(),
         ]),

ui/app/components/pages/settings/info.js

@@ -100,7 +100,6 @@ Info.propTypes = {
   displayWarning: PropTypes.func,
   revealSeedConfirmation: PropTypes.func,
   warning: PropTypes.string,
-  goHome: PropTypes.func,
   location: PropTypes.object,
   history: PropTypes.object,
 }

ui/app/components/pages/settings/settings.js

@@ -11,7 +11,7 @@ const { exportAsFile } = require('../../../util')
 const SimpleDropdown = require('../../dropdowns/simple-dropdown')
 const ToggleButton = require('react-toggle-button')
 const { REVEAL_SEED_ROUTE } = require('../../../routes')
-const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums
+const { OLD_UI_NETWORK_TYPE } = require('../../../../../app/scripts/config').enums
 
 const getInfuraCurrencyOptions = () => {
   const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => {

ui/app/css/itcss/components/new-account.scss

@@ -35,13 +35,14 @@
       font-size: 18px;
       line-height: 24px;
       text-align: center;
+      cursor: pointer;
     }
 
     &__tab:first-of-type {
       margin-right: 20px;
     }
 
-    &__unselected:hover {
+    &__tab:hover {
       color: $black;
       border-bottom: none;
     }
@@ -49,9 +50,9 @@
     &__selected {
       color: $curious-blue;
       border-bottom: 3px solid $curious-blue;
+      cursor: initial;
     }
   }
-
 }
 
 .new-account-import-form {

ui/app/root.js

@@ -3,7 +3,6 @@ const PropTypes = require('prop-types')
 const { Provider } = require('react-redux')
 const h = require('react-hyperscript')
 const SelectedApp = require('./select-app')
-const { HashRouter } = require('react-router-dom')
 
 class Root extends Component {
   render () {
@@ -11,11 +10,7 @@ class Root extends Component {
 
     return (
       h(Provider, { store }, [
-        h(HashRouter, {
-          hashType: 'noslash',
-        }, [
-          h(SelectedApp),
-        ]),
+        h(SelectedApp),
       ])
     )
   }

ui/app/routes.js

@@ -6,7 +6,8 @@ const REVEAL_SEED_ROUTE = '/seed'
 const CONFIRM_SEED_ROUTE = '/confirm-seed'
 const RESTORE_VAULT_ROUTE = '/restore-vault'
 const ADD_TOKEN_ROUTE = '/add-token'
-const IMPORT_ACCOUNT_ROUTE = '/import-account'
+const NEW_ACCOUNT_ROUTE = '/new-account'
+const IMPORT_ACCOUNT_ROUTE = '/new-account/import'
 const SEND_ROUTE = '/send'
 const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction'
 const INITIALIZE_ROUTE = '/initialize'
@@ -22,6 +23,7 @@ module.exports = {
   CONFIRM_SEED_ROUTE,
   RESTORE_VAULT_ROUTE,
   ADD_TOKEN_ROUTE,
+  NEW_ACCOUNT_ROUTE,
   IMPORT_ACCOUNT_ROUTE,
   SEND_ROUTE,
   CONFIRM_TRANSACTION_ROUTE,

ui/app/select-app.js

@@ -2,6 +2,7 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const connect = require('react-redux').connect
 const h = require('react-hyperscript')
+const { HashRouter } = require('react-router-dom')
 const App = require('./app')
 const OldApp = require('../../old-ui/app/app')
 const { autoAddToBetaUI } = require('./selectors')
@@ -62,7 +63,12 @@ SelectedApp.prototype.render = function () {
   // const Selected = betaUI || isMascara || firstTime ? App : OldApp
 
   const { betaUI, isMascara } = this.props
-  const Selected = betaUI || isMascara ? App : OldApp
 
-  return h(Selected)
+  return betaUI || isMascara
+  ? h(HashRouter, {
+      hashType: 'noslash',
+    }, [
+      h(App),
+    ])
+  : h(OldApp)
 }