diff options
Diffstat (limited to 'ui/app')
18 files changed, 156 insertions, 225 deletions
diff --git a/ui/app/accounts/new-account/index.js b/ui/app/accounts/new-account/index.js deleted file mode 100644 index acf0dc6e4..000000000 --- a/ui/app/accounts/new-account/index.js +++ /dev/null @@ -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), - - ]), - - ]) -} diff --git a/ui/app/app.js b/ui/app/app.js index 22dc8c343..09af2db2c 100644 --- a/ui/app/app.js +++ b/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 }), ]) diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index f031f2446..ddb751a64 100644 --- a/ui/app/components/account-menu/index.js +++ b/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', }), diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js index 0454ee2f1..080f3eca5 100644 --- a/ui/app/components/pages/add-token.js +++ b/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' diff --git a/ui/app/accounts/import/index.js b/ui/app/components/pages/create-account/import-account/index.js index 0c901c09b..0c901c09b 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/components/pages/create-account/import-account/index.js diff --git a/ui/app/components/pages/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js index c7d232d30..36644f1a0 100644 --- a/ui/app/components/pages/import-account/json.js +++ b/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', ]), diff --git a/ui/app/components/pages/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js index a236d90ee..785bf2cb6 100644 --- a/ui/app/components/pages/import-account/private-key.js +++ b/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)) } diff --git a/ui/app/components/pages/import-account/seed.js b/ui/app/components/pages/create-account/import-account/seed.js index b4a7c0afa..b4a7c0afa 100644 --- a/ui/app/components/pages/import-account/seed.js +++ b/ui/app/components/pages/create-account/import-account/seed.js diff --git a/ui/app/components/pages/create-account/index.js b/ui/app/components/pages/create-account/index.js new file mode 100644 index 000000000..0962477d8 --- /dev/null +++ b/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) diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/components/pages/create-account/new-account.js index 494726ae4..a3bfefc84 100644 --- a/ui/app/accounts/new-account/create-form.js +++ b/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()), } } diff --git a/ui/app/components/pages/import-account/index.js b/ui/app/components/pages/import-account/index.js deleted file mode 100644 index 481ed6a4b..000000000 --- a/ui/app/components/pages/import-account/index.js +++ /dev/null @@ -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 diff --git a/ui/app/components/pages/settings/index.js b/ui/app/components/pages/settings/index.js index 39e9b26ed..384ae4b41 100644 --- a/ui/app/components/pages/settings/index.js +++ b/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(), ]), diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js index d8155eb9b..87479c84e 100644 --- a/ui/app/components/pages/settings/info.js +++ b/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, } diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js index fb3f20a95..5506df1ae 100644 --- a/ui/app/components/pages/settings/settings.js +++ b/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) => { diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss index c5e4ea761..5837a80bb 100644 --- a/ui/app/css/itcss/components/new-account.scss +++ 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 { diff --git a/ui/app/root.js b/ui/app/root.js index 64f365c9e..09deae1b1 100644 --- a/ui/app/root.js +++ b/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), ]) ) } diff --git a/ui/app/routes.js b/ui/app/routes.js index d1d634db2..8b4501fe3 100644 --- a/ui/app/routes.js +++ b/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, diff --git a/ui/app/select-app.js b/ui/app/select-app.js index 193c98353..c6ef1abda 100644 --- a/ui/app/select-app.js +++ b/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) } |