From e226b10a89d87af07c7c35ff1251a8264f3bb1b8 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 28 Nov 2017 20:24:35 -0800 Subject: Add react-router to allow use of the browser back button --- app/scripts/lib/is-popup-or-notification.js | 3 +- package.json | 1 + ui/app/account-detail.js | 4 +- ui/app/accounts/import/json.js | 100 --- ui/app/accounts/import/private-key.js | 71 -- ui/app/accounts/import/seed.js | 30 - ui/app/actions.js | 80 +- ui/app/add-token.js | 357 -------- ui/app/app.js | 908 +++++++++++---------- ui/app/components/account-menu/index.js | 25 +- ui/app/components/notice.js | 132 --- ui/app/components/pages/add-token.js | 359 ++++++++ ui/app/components/pages/authenticated.js | 42 + ui/app/components/pages/import-account/index.js | 95 +++ ui/app/components/pages/import-account/json.js | 100 +++ .../components/pages/import-account/private-key.js | 71 ++ ui/app/components/pages/import-account/seed.js | 30 + ui/app/components/pages/keychains/restore-vault.js | 167 ++++ ui/app/components/pages/keychains/reveal-seed.js | 192 +++++ ui/app/components/pages/notice.js | 219 +++++ ui/app/components/pages/settings/index.js | 59 ++ ui/app/components/pages/settings/info.js | 108 +++ ui/app/components/pages/settings/settings.js | 283 +++++++ ui/app/components/pages/unauthenticated/unlock.js | 172 ++++ ui/app/components/pending-tx/confirm-send-ether.js | 21 +- ui/app/components/pending-tx/confirm-send-token.js | 18 +- ui/app/components/send/send-v2-container.js | 7 +- ui/app/components/tab-bar.js | 26 +- ui/app/components/tx-list.js | 12 +- ui/app/components/tx-view.js | 14 +- ui/app/components/wallet-view.js | 14 +- ui/app/conf-tx.js | 32 +- ui/app/css/index.scss | 6 + ui/app/css/itcss/components/index.scss | 2 + ui/app/css/itcss/components/pages/index.scss | 1 + ui/app/css/itcss/components/pages/unlock.scss | 9 + ui/app/css/itcss/components/sections.scss | 6 + ui/app/first-time/init-menu.js | 293 +++---- ui/app/keychains/hd/create-vault-complete.js | 91 --- ui/app/keychains/hd/recover-seed/confirmation.js | 121 --- ui/app/keychains/hd/restore-vault.js | 152 ---- ui/app/main-container.js | 34 +- ui/app/root.js | 38 +- ui/app/routes.js | 27 + ui/app/send-v2.js | 10 +- ui/app/settings.js | 410 ---------- ui/app/unlock.js | 122 --- yarn.lock | 89 +- 48 files changed, 2880 insertions(+), 2283 deletions(-) delete mode 100644 ui/app/accounts/import/json.js delete mode 100644 ui/app/accounts/import/private-key.js delete mode 100644 ui/app/accounts/import/seed.js delete mode 100644 ui/app/add-token.js delete mode 100644 ui/app/components/notice.js create mode 100644 ui/app/components/pages/add-token.js create mode 100644 ui/app/components/pages/authenticated.js create mode 100644 ui/app/components/pages/import-account/index.js create mode 100644 ui/app/components/pages/import-account/json.js create mode 100644 ui/app/components/pages/import-account/private-key.js create mode 100644 ui/app/components/pages/import-account/seed.js create mode 100644 ui/app/components/pages/keychains/restore-vault.js create mode 100644 ui/app/components/pages/keychains/reveal-seed.js create mode 100644 ui/app/components/pages/notice.js create mode 100644 ui/app/components/pages/settings/index.js create mode 100644 ui/app/components/pages/settings/info.js create mode 100644 ui/app/components/pages/settings/settings.js create mode 100644 ui/app/components/pages/unauthenticated/unlock.js create mode 100644 ui/app/css/itcss/components/pages/index.scss create mode 100644 ui/app/css/itcss/components/pages/unlock.scss delete mode 100644 ui/app/keychains/hd/create-vault-complete.js delete mode 100644 ui/app/keychains/hd/recover-seed/confirmation.js delete mode 100644 ui/app/keychains/hd/restore-vault.js create mode 100644 ui/app/routes.js delete mode 100644 ui/app/settings.js delete mode 100644 ui/app/unlock.js diff --git a/app/scripts/lib/is-popup-or-notification.js b/app/scripts/lib/is-popup-or-notification.js index e2999411f..ad3e825c0 100644 --- a/app/scripts/lib/is-popup-or-notification.js +++ b/app/scripts/lib/is-popup-or-notification.js @@ -3,7 +3,8 @@ module.exports = function isPopupOrNotification () { // if (url.match(/popup.html$/) || url.match(/home.html$/)) { // Below regexes needed for feature toggles (e.g. see line ~340 in ui/app/app.js) // Revert below regexes to above commented out regexes before merge to master - if (url.match(/popup.html(?:\?.+)*$/) || url.match(/home.html(?:\?.+)*$/)) { + if (url.match(/popup.html(?:\?.+)*$/) || + url.match(/home.html(?:\?.+)*$/) || url.match(/home.html(?:#.*)*$/)) { return 'popup' } else { return 'notification' diff --git a/package.json b/package.json index 72b4951db..b7c35c053 100644 --- a/package.json +++ b/package.json @@ -145,6 +145,7 @@ "react-hyperscript": "^3.0.0", "react-markdown": "^3.0.0", "react-redux": "^5.0.5", + "react-router-dom": "^4.2.2", "react-select": "^1.0.0", "react-simple-file-input": "^2.0.0", "react-toggle-button": "^2.2.0", diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 0da435298..85951f512 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -71,8 +71,8 @@ AccountDetailScreen.prototype.tabSections = function () { { content: 'Sent', key: 'history' }, { content: 'Tokens', key: 'tokens' }, ], - defaultTab: currentAccountTab || 'history', - tabSelected: (key) => { + selectedTab: currentAccountTab || 'history', + onSelect: key => { this.props.dispatch(actions.setCurrentAccountTab(key)) }, }), diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js deleted file mode 100644 index 486ed8886..000000000 --- a/ui/app/accounts/import/json.js +++ /dev/null @@ -1,100 +0,0 @@ -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 FileInput = require('react-simple-file-input').default - -const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' - -module.exports = connect(mapStateToProps)(JsonImportSubview) - -function mapStateToProps (state) { - return { - error: state.appState.warning, - } -} - -inherits(JsonImportSubview, Component) -function JsonImportSubview () { - Component.call(this) -} - -JsonImportSubview.prototype.render = function () { - const { error } = this.props - - return ( - h('div', { - style: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - padding: '5px 15px 0px 15px', - }, - }, [ - - h('p', 'Used by a variety of different clients'), - h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'), - - h(FileInput, { - readAs: 'text', - onLoad: this.onLoad.bind(this), - style: { - margin: '20px 0px 12px 20px', - fontSize: '15px', - }, - }), - - h('input.large-input.letter-spacey', { - type: 'password', - placeholder: 'Enter password', - id: 'json-password-box', - onKeyPress: this.createKeyringOnEnter.bind(this), - style: { - width: 260, - marginTop: 12, - }, - }), - - h('button.primary', { - onClick: this.createNewKeychain.bind(this), - style: { - margin: 12, - }, - }, 'Import'), - - error ? h('span.error', error) : null, - ]) - ) -} - -JsonImportSubview.prototype.onLoad = function (event, file) { - this.setState({file: file, fileContents: event.target.result}) -} - -JsonImportSubview.prototype.createKeyringOnEnter = function (event) { - if (event.key === 'Enter') { - event.preventDefault() - this.createNewKeychain() - } -} - -JsonImportSubview.prototype.createNewKeychain = function () { - const state = this.state - const { fileContents } = state - - if (!fileContents) { - const message = 'You must select a file to import.' - return this.props.dispatch(actions.displayWarning(message)) - } - - const passwordInput = document.getElementById('json-password-box') - const password = passwordInput.value - - if (!password) { - const message = 'You must enter a password for the selected file.' - return this.props.dispatch(actions.displayWarning(message)) - } - - this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ])) -} diff --git a/ui/app/accounts/import/private-key.js b/ui/app/accounts/import/private-key.js deleted file mode 100644 index e214bcbbe..000000000 --- a/ui/app/accounts/import/private-key.js +++ /dev/null @@ -1,71 +0,0 @@ -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') - -module.exports = connect(mapStateToProps)(PrivateKeyImportView) - -function mapStateToProps (state) { - return { - error: state.appState.warning, - } -} - -inherits(PrivateKeyImportView, Component) -function PrivateKeyImportView () { - Component.call(this) -} - -PrivateKeyImportView.prototype.componentWillUnmount = function () { - this.props.dispatch(actions.displayWarning(null)) -} - -PrivateKeyImportView.prototype.render = function () { - const { error } = this.props - - return ( - h('div', { - style: { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - padding: '5px 15px 0px 15px', - }, - }, [ - h('span', 'Paste your private key string here'), - - h('input.large-input.letter-spacey', { - type: 'password', - id: 'private-key-box', - onKeyPress: this.createKeyringOnEnter.bind(this), - style: { - width: 260, - marginTop: 12, - }, - }), - - h('button.primary', { - onClick: this.createNewKeychain.bind(this), - style: { - margin: 12, - }, - }, 'Import'), - - error ? h('span.error', error) : null, - ]) - ) -} - -PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) { - if (event.key === 'Enter') { - event.preventDefault() - this.createNewKeychain() - } -} - -PrivateKeyImportView.prototype.createNewKeychain = function () { - const input = document.getElementById('private-key-box') - const privateKey = input.value - this.props.dispatch(actions.importNewAccount('Private Key', [ privateKey ])) -} diff --git a/ui/app/accounts/import/seed.js b/ui/app/accounts/import/seed.js deleted file mode 100644 index b4a7c0afa..000000000 --- a/ui/app/accounts/import/seed.js +++ /dev/null @@ -1,30 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const h = require('react-hyperscript') -const connect = require('react-redux').connect - -module.exports = connect(mapStateToProps)(SeedImportSubview) - -function mapStateToProps (state) { - return {} -} - -inherits(SeedImportSubview, Component) -function SeedImportSubview () { - Component.call(this) -} - -SeedImportSubview.prototype.render = function () { - return ( - h('div', { - style: { - }, - }, [ - `Paste your seed phrase here!`, - h('textarea'), - h('br'), - h('button', 'Submit'), - ]) - ) -} - diff --git a/ui/app/actions.js b/ui/app/actions.js index ed0518184..51cc4dfbf 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -266,14 +266,18 @@ function tryUnlockMetamask (password) { dispatch(actions.showLoadingIndication()) dispatch(actions.unlockInProgress()) log.debug(`background.submitPassword`) - background.submitPassword(password, (err) => { - dispatch(actions.hideLoadingIndication()) - if (err) { - dispatch(actions.unlockFailed(err.message)) - } else { - dispatch(actions.transitionForward()) - forceUpdateMetamaskState(dispatch) - } + + return new Promise((resolve, reject) => { + background.submitPassword(password, err => { + dispatch(actions.hideLoadingIndication()) + + if (err) { + reject(err) + } else { + dispatch(actions.transitionForward()) + return forceUpdateMetamaskState(dispatch).then(resolve) + } + }) }) } } @@ -291,7 +295,7 @@ function transitionBackward () { } function confirmSeedWords () { - return (dispatch) => { + return dispatch => { dispatch(actions.showLoadingIndication()) log.debug(`background.clearSeedWordCache`) return new Promise((resolve, reject) => { @@ -299,7 +303,7 @@ function confirmSeedWords () { dispatch(actions.hideLoadingIndication()) if (err) { dispatch(actions.displayWarning(err.message)) - reject(err) + return reject(err) } log.info('Seed word cache cleared. ' + account) @@ -344,14 +348,14 @@ function createNewVaultAndKeychain (password) { return reject(err) } log.debug(`background.placeSeedWords`) + background.placeSeedWords((err) => { if (err) { dispatch(actions.displayWarning(err.message)) return reject(err) } dispatch(actions.hideLoadingIndication()) - forceUpdateMetamaskState(dispatch) - resolve() + forceUpdateMetamaskState(dispatch).then(resolve) }) }) }) @@ -696,16 +700,23 @@ function updateAndApproveTx (txData) { log.info('actions: updateAndApproveTx: ' + JSON.stringify(txData)) return (dispatch) => { log.debug(`actions calling background.updateAndApproveTx`) - background.updateAndApproveTransaction(txData, (err) => { - dispatch(actions.hideLoadingIndication()) - dispatch(actions.updateTransactionParams(txData.id, txData.txParams)) - dispatch(actions.clearSend()) - if (err) { - dispatch(actions.txError(err)) - dispatch(actions.goHome()) - return log.error(err.message) - } - dispatch(actions.completedTx(txData.id)) + + return new Promise((resolve, reject) => { + background.updateAndApproveTransaction(txData, err => { + dispatch(actions.hideLoadingIndication()) + dispatch(actions.updateTransactionParams(txData.id, txData.txParams)) + dispatch(actions.clearSend()) + + if (err) { + dispatch(actions.txError(err)) + dispatch(actions.goHome()) + log.error(err.message) + reject(err) + } + + dispatch(actions.completedTx(txData.id)) + resolve(txData) + }) }) } } @@ -751,10 +762,13 @@ function cancelTypedMsg (msgData) { } function cancelTx (txData) { - return (dispatch) => { + return dispatch => { log.debug(`background.cancelTransaction`) - background.cancelTransaction(txData.id, () => { - dispatch(actions.completedTx(txData.id)) + return new Promise((resolve, reject) => { + background.cancelTransaction(txData.id, () => { + dispatch(actions.completedTx(txData.id)) + resolve(txData) + }) }) } } @@ -1585,11 +1599,17 @@ function callBackgroundThenUpdate (method, ...args) { function forceUpdateMetamaskState (dispatch) { log.debug(`background.getState`) - background.getState((err, newState) => { - if (err) { - return dispatch(actions.displayWarning(err.message)) - } - dispatch(actions.updateMetamaskState(newState)) + + return new Promise((resolve, reject) => { + background.getState((err, newState) => { + if (err) { + reject(err) + return dispatch(actions.displayWarning(err.message)) + } + + dispatch(actions.updateMetamaskState(newState)) + resolve(newState) + }) }) } diff --git a/ui/app/add-token.js b/ui/app/add-token.js deleted file mode 100644 index 10aaae103..000000000 --- a/ui/app/add-token.js +++ /dev/null @@ -1,357 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const classnames = require('classnames') -const h = require('react-hyperscript') -const connect = require('react-redux').connect -const Fuse = require('fuse.js') -const contractMap = require('eth-contract-metadata') -const TokenBalance = require('./components/token-balance') -const Identicon = require('./components/identicon') -const contractList = Object.entries(contractMap) - .map(([ _, tokenData]) => tokenData) - .filter(tokenData => Boolean(tokenData.erc20)) -const fuse = new Fuse(contractList, { - shouldSort: true, - threshold: 0.45, - location: 0, - distance: 100, - maxPatternLength: 32, - minMatchCharLength: 1, - keys: ['address', 'name', 'symbol'], -}) -const actions = require('./actions') -const ethUtil = require('ethereumjs-util') -const { tokenInfoGetter } = require('./token-util') -const R = require('ramda') - -const emptyAddr = '0x0000000000000000000000000000000000000000' - -module.exports = connect(mapStateToProps, mapDispatchToProps)(AddTokenScreen) - -function mapStateToProps (state) { - const { identities, tokens } = state.metamask - return { - identities, - tokens, - } -} - -function mapDispatchToProps (dispatch) { - return { - goHome: () => dispatch(actions.goHome()), - addTokens: tokens => dispatch(actions.addTokens(tokens)), - } -} - -inherits(AddTokenScreen, Component) -function AddTokenScreen () { - this.state = { - isShowingConfirmation: false, - customAddress: '', - customSymbol: '', - customDecimals: 0, - searchQuery: '', - isCollapsed: true, - selectedTokens: {}, - errors: {}, - } - this.tokenAddressDidChange = this.tokenAddressDidChange.bind(this) - this.onNext = this.onNext.bind(this) - Component.call(this) -} - -AddTokenScreen.prototype.componentWillMount = function () { - this.tokenInfoGetter = tokenInfoGetter() -} - -AddTokenScreen.prototype.toggleToken = function (address, token) { - const { selectedTokens, errors } = this.state - const { [address]: selectedToken } = selectedTokens - this.setState({ - selectedTokens: { - ...selectedTokens, - [address]: selectedToken ? null : token, - }, - errors: { - ...errors, - tokenSelector: null, - }, - }) -} - -AddTokenScreen.prototype.onNext = function () { - const { isValid, errors } = this.validate() - - return !isValid - ? this.setState({ errors }) - : this.setState({ isShowingConfirmation: true }) -} - -AddTokenScreen.prototype.tokenAddressDidChange = function (e) { - const customAddress = e.target.value.trim() - this.setState({ customAddress }) - if (ethUtil.isValidAddress(customAddress) && customAddress !== emptyAddr) { - this.attemptToAutoFillTokenParams(customAddress) - } else { - this.setState({ - customSymbol: '', - customDecimals: 0, - }) - } -} - -AddTokenScreen.prototype.checkExistingAddresses = function (address) { - if (!address) return false - const tokensList = this.props.tokens - const matchesAddress = existingToken => { - return existingToken.address.toLowerCase() === address.toLowerCase() - } - - return R.any(matchesAddress)(tokensList) -} - -AddTokenScreen.prototype.validate = function () { - const errors = {} - const identitiesList = Object.keys(this.props.identities) - const { customAddress, customSymbol, customDecimals, selectedTokens } = this.state - const standardAddress = ethUtil.addHexPrefix(customAddress).toLowerCase() - - if (customAddress) { - const validAddress = ethUtil.isValidAddress(customAddress) - if (!validAddress) { - errors.customAddress = 'Address is invalid. ' - } - - const validDecimals = customDecimals >= 0 && customDecimals < 36 - if (!validDecimals) { - errors.customDecimals = 'Decimals must be at least 0, and not over 36.' - } - - const symbolLen = customSymbol.trim().length - const validSymbol = symbolLen > 0 && symbolLen < 10 - if (!validSymbol) { - errors.customSymbol = 'Symbol must be between 0 and 10 characters.' - } - - const ownAddress = identitiesList.includes(standardAddress) - if (ownAddress) { - errors.customAddress = 'Personal address detected. Input the token contract address.' - } - - const tokenAlreadyAdded = this.checkExistingAddresses(customAddress) - if (tokenAlreadyAdded) { - errors.customAddress = 'Token has already been added.' - } - } else if ( - Object.entries(selectedTokens) - .reduce((isEmpty, [ symbol, isSelected ]) => ( - isEmpty && !isSelected - ), true) - ) { - errors.tokenSelector = 'Must select at least 1 token.' - } - - return { - isValid: !Object.keys(errors).length, - errors, - } -} - -AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address) { - const { symbol, decimals } = await this.tokenInfoGetter(address) - if (symbol && decimals) { - this.setState({ - customSymbol: symbol, - customDecimals: decimals.toString(), - }) - } -} - -AddTokenScreen.prototype.renderCustomForm = function () { - const { customAddress, customSymbol, customDecimals, errors } = this.state - - return !this.state.isCollapsed && ( - h('div.add-token__add-custom-form', [ - h('div', { - className: classnames('add-token__add-custom-field', { - 'add-token__add-custom-field--error': errors.customAddress, - }), - }, [ - h('div.add-token__add-custom-label', 'Token Address'), - h('input.add-token__add-custom-input', { - type: 'text', - onChange: this.tokenAddressDidChange, - value: customAddress, - }), - h('div.add-token__add-custom-error-message', errors.customAddress), - ]), - h('div', { - className: classnames('add-token__add-custom-field', { - 'add-token__add-custom-field--error': errors.customSymbol, - }), - }, [ - h('div.add-token__add-custom-label', 'Token Symbol'), - h('input.add-token__add-custom-input', { - type: 'text', - value: customSymbol, - disabled: true, - }), - h('div.add-token__add-custom-error-message', errors.customSymbol), - ]), - h('div', { - className: classnames('add-token__add-custom-field', { - 'add-token__add-custom-field--error': errors.customDecimals, - }), - }, [ - h('div.add-token__add-custom-label', 'Decimals of Precision'), - h('input.add-token__add-custom-input', { - type: 'number', - value: customDecimals, - disabled: true, - }), - h('div.add-token__add-custom-error-message', errors.customDecimals), - ]), - ]) - ) -} - -AddTokenScreen.prototype.renderTokenList = function () { - const { searchQuery = '', selectedTokens } = this.state - const results = searchQuery - ? fuse.search(searchQuery) || [] - : contractList - - return Array(6).fill(undefined) - .map((_, i) => { - const { logo, symbol, name, address } = results[i] || {} - const tokenAlreadyAdded = this.checkExistingAddresses(address) - return Boolean(logo || symbol || name) && ( - h('div.add-token__token-wrapper', { - className: classnames({ - 'add-token__token-wrapper--selected': selectedTokens[address], - 'add-token__token-wrapper--disabled': tokenAlreadyAdded, - }), - onClick: () => !tokenAlreadyAdded && this.toggleToken(address, results[i]), - }, [ - h('div.add-token__token-icon', { - style: { - backgroundImage: `url(images/contract/${logo})`, - }, - }), - h('div.add-token__token-data', [ - h('div.add-token__token-symbol', symbol), - h('div.add-token__token-name', name), - ]), - // tokenAlreadyAdded && ( - // h('div.add-token__token-message', 'Already added') - // ), - ]) - ) - }) -} - -AddTokenScreen.prototype.renderConfirmation = function () { - const { - customAddress: address, - customSymbol: symbol, - customDecimals: decimals, - selectedTokens, - } = this.state - - const { addTokens, goHome } = this.props - - const customToken = { - address, - symbol, - decimals, - } - - const tokens = address && symbol && decimals - ? { ...selectedTokens, [address]: customToken } - : selectedTokens - - return ( - h('div.add-token', [ - h('div.add-token__wrapper', [ - h('div.add-token__title-container.add-token__confirmation-title', [ - h('div.add-token__title', 'Add Token'), - h('div.add-token__description', 'Would you like to add these tokens?'), - ]), - h('div.add-token__content-container.add-token__confirmation-content', [ - h('div.add-token__description.add-token__confirmation-description', 'Your balances'), - h('div.add-token__confirmation-token-list', - Object.entries(tokens) - .map(([ address, token ]) => ( - h('span.add-token__confirmation-token-list-item', [ - h(Identicon, { - className: 'add-token__confirmation-token-icon', - diameter: 75, - address, - }), - h(TokenBalance, { token }), - ]) - )) - ), - ]), - ]), - h('div.add-token__buttons', [ - h('button.btn-secondary', { - onClick: () => addTokens(tokens).then(goHome), - }, 'Add Tokens'), - h('button.btn-tertiary', { - onClick: () => this.setState({ isShowingConfirmation: false }), - }, 'Back'), - ]), - ]) - ) -} - -AddTokenScreen.prototype.render = function () { - const { isCollapsed, errors, isShowingConfirmation } = this.state - const { goHome } = this.props - - return isShowingConfirmation - ? this.renderConfirmation() - : ( - h('div.add-token', [ - h('div.add-token__wrapper', [ - h('div.add-token__title-container', [ - h('div.add-token__title', 'Add Token'), - h('div.add-token__description', 'Keep track of the tokens you’ve bought with your MetaMask account. If you bought tokens using a different account, those tokens will not appear here.'), - h('div.add-token__description', 'Search for tokens or select from our list of popular tokens.'), - ]), - h('div.add-token__content-container', [ - h('div.add-token__input-container', [ - h('input.add-token__input', { - type: 'text', - placeholder: 'Search', - onChange: e => this.setState({ searchQuery: e.target.value }), - }), - h('div.add-token__search-input-error-message', errors.tokenSelector), - ]), - h( - 'div.add-token__token-icons-container', - this.renderTokenList(), - ), - ]), - h('div.add-token__footers', [ - h('div.add-token__add-custom', { - onClick: () => this.setState({ isCollapsed: !isCollapsed }), - }, [ - 'Add custom token', - h(`i.fa.fa-angle-${isCollapsed ? 'down' : 'up'}`), - ]), - this.renderCustomForm(), - ]), - ]), - h('div.add-token__buttons', [ - h('button.btn-secondary', { - onClick: this.onNext, - }, 'Next'), - h('button.btn-tertiary', { - onClick: goHome, - }, 'Cancel'), - ]), - ]) - ) -} diff --git a/ui/app/app.js b/ui/app/app.js index 1f40eccbe..168ec6559 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -1,6 +1,7 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const connect = require('react-redux').connect +const { Component } = require('react') +const { connect } = require('react-redux') +const { Switch, Route, Redirect, withRouter } = require('react-router-dom') +const { compose } = require('recompose') const h = require('react-hyperscript') const actions = require('./actions') // mascara @@ -14,23 +15,25 @@ const MainContainer = require('./main-container') const SendTransactionScreen2 = require('./components/send/send-v2-container') const ConfirmTxScreen = require('./conf-tx') // notice -const NoticeScreen = require('./components/notice') const generateLostAccountsNotice = require('../lib/lost-accounts-notice') // slideout menu const WalletView = require('./components/wallet-view') // other views -const Settings = require('./settings') -const AddTokenScreen = require('./add-token') -const Import = require('./accounts/import') +const Authenticated = require('./components/pages/authenticated') +const Settings = require('./components/pages/settings') +const UnlockPage = require('./components/pages/unauthenticated/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 NoticeScreen = require('./components/pages/notice') + const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') const Identicon = require('./components/identicon') const BuyView = require('./components/buy-button-subview') -const HDCreateVaultComplete = require('./keychains/hd/create-vault-complete') -const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') -const RevealSeedConfirmation = require('./keychains/hd/recover-seed/confirmation') const ReactCSSTransitionGroup = require('react-addons-css-transition-group') const NetworkDropdown = require('./components/dropdowns/network-dropdown') const AccountMenu = require('./components/account-menu') @@ -39,482 +42,565 @@ const QrView = require('./components/qr-code') // Global Modals const Modal = require('./components/modals/index').Modal -module.exports = connect(mapStateToProps, mapDispatchToProps)(App) - -inherits(App, Component) -function App () { Component.call(this) } - -function mapStateToProps (state) { - const { - identities, - accounts, - address, - keyrings, - isInitialized, - noActiveNotices, - seedWords, - } = state.metamask - const selected = address || Object.keys(accounts)[0] - - return { - // state from plugin - networkDropdownOpen: state.appState.networkDropdownOpen, - sidebarOpen: state.appState.sidebarOpen, - isLoading: state.appState.isLoading, - loadingMessage: state.appState.loadingMessage, - noActiveNotices: state.metamask.noActiveNotices, - isInitialized: state.metamask.isInitialized, - isUnlocked: state.metamask.isUnlocked, - selectedAddress: state.metamask.selectedAddress, - currentView: state.appState.currentView, - activeAddress: state.appState.activeAddress, - transForward: state.appState.transForward, - isMascara: state.metamask.isMascara, - isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), - seedWords: state.metamask.seedWords, - unapprovedTxs: state.metamask.unapprovedTxs, - unapprovedMsgs: state.metamask.unapprovedMsgs, - menuOpen: state.appState.menuOpen, - network: state.metamask.network, - provider: state.metamask.provider, - forgottenPassword: state.appState.forgottenPassword, - lastUnreadNotice: state.metamask.lastUnreadNotice, - lostAccounts: state.metamask.lostAccounts, - frequentRpcList: state.metamask.frequentRpcList || [], - currentCurrency: state.metamask.currentCurrency, - - // state needed to get account dropdown temporarily rendering from app bar - identities, - selected, - keyrings, +// Routes +const { + DEFAULT_ROUTE, + UNLOCK_ROUTE, + SETTINGS_ROUTE, + REVEAL_SEED_ROUTE, + RESTORE_VAULT_ROUTE, + ADD_TOKEN_ROUTE, + IMPORT_ACCOUNT_ROUTE, + SEND_ROUTE, + CONFIRM_TRANSACTION_ROUTE, + INITIALIZE_MENU_ROUTE, + NOTICE_ROUTE, +} = require('./routes') + +class App extends Component { + constructor (props) { + super(props) + + this.renderPrimary = this.renderPrimary.bind(this) } -} -function mapDispatchToProps (dispatch, ownProps) { - return { - dispatch, - hideSidebar: () => dispatch(actions.hideSidebar()), - showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), - hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), - setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), - toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), + componentWillMount () { + const { currentCurrency, setCurrentCurrency } = this.props + + if (!currentCurrency) { + setCurrentCurrencyToUSD() + } } -} -App.prototype.componentWillMount = function () { - if (!this.props.currentCurrency) { - this.props.setCurrentCurrencyToUSD() + renderRoutes () { + const exact = true + + return ( + h(Switch, [ + h(Route, { path: INITIALIZE_MENU_ROUTE, exact, component: InitializeMenuScreen }), + h(Route, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), + h(Route, { path: SETTINGS_ROUTE, component: Settings }), + h(Route, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), + h(Route, { path: NOTICE_ROUTE, exact, component: NoticeScreen }), + h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }), + h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }), + h(Authenticated, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedPage }), + h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }), + h(Authenticated, { path: IMPORT_ACCOUNT_ROUTE, exact, component: ImportAccountPage }), + h(Authenticated, { path: DEFAULT_ROUTE, exact, component: this.renderPrimary }), + ]) + ) } -} -App.prototype.render = function () { - var props = this.props - const { isLoading, loadingMessage, network } = props - const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' - const loadMessage = loadingMessage || isLoadingNetwork ? - `Connecting to ${this.getNetworkName()}` : null - log.debug('Main ui render function') - - return ( - h('.flex-column.full-height', { - style: { - overflowX: 'hidden', - position: 'relative', - alignItems: 'center', - }, - }, [ + render () { + var props = this.props + const { isLoading, loadingMessage, network } = props + const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' + const loadMessage = loadingMessage || isLoadingNetwork ? + `Connecting to ${this.getNetworkName()}` : null + log.debug('Main ui render function') - // global modal - h(Modal, {}, []), + return ( + h('.flex-column.full-height', { + style: { + overflowX: 'hidden', + position: 'relative', + alignItems: 'center', + }, + }, [ - // app bar - this.renderAppBar(), + // global modal + h(Modal, {}, []), - // sidebar - this.renderSidebar(), + // app bar + this.renderAppBar(), - // network dropdown - h(NetworkDropdown, { - provider: this.props.provider, - frequentRpcList: this.props.frequentRpcList, - }, []), + // sidebar + this.renderSidebar(), - h(AccountMenu), + // network dropdown + h(NetworkDropdown, { + provider: this.props.provider, + frequentRpcList: this.props.frequentRpcList, + }, []), - (isLoading || isLoadingNetwork) && h(Loading, { - loadingMessage: loadMessage, - }), + h(AccountMenu), - // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), + (isLoading || isLoadingNetwork) && h(Loading, { + loadingMessage: loadMessage, + }), - // content - this.renderPrimary(), - ]) - ) -} + // this.renderLoadingIndicator({ isLoading, isLoadingNetwork, loadMessage }), -App.prototype.renderGlobalModal = function () { - return h(Modal, { - ref: 'modalRef', - }, [ - // h(BuyOptions, {}, []), - ]) -} + // content + this.renderRoutes(), + // this.renderPrimary(), + ]) + ) + } -App.prototype.renderSidebar = function () { - - return h('div', { - }, [ - h('style', ` - .sidebar-enter { - transition: transform 300ms ease-in-out; - transform: translateX(-100%); - } - .sidebar-enter.sidebar-enter-active { - transition: transform 300ms ease-in-out; - transform: translateX(0%); - } - .sidebar-leave { - transition: transform 200ms ease-out; - transform: translateX(0%); - } - .sidebar-leave.sidebar-leave-active { - transition: transform 200ms ease-out; - transform: translateX(-100%); - } - `), - - h(ReactCSSTransitionGroup, { - transitionName: 'sidebar', - transitionEnterTimeout: 300, - transitionLeaveTimeout: 200, + renderGlobalModal () { + return h(Modal, { + ref: 'modalRef', }, [ - // A second instance of Walletview is used for non-mobile viewports - this.props.sidebarOpen ? h(WalletView, { - responsiveDisplayClassname: '.sidebar', - style: {}, - }) : undefined, - - ]), - - // overlay - // TODO: add onClick for overlay to close sidebar - this.props.sidebarOpen ? h('div.sidebar-overlay', { - style: {}, - onClick: () => { - this.props.hideSidebar() - }, - }, []) : undefined, - ]) -} - -App.prototype.renderAppBar = function () { - const { - isUnlocked, - network, - provider, - networkDropdownOpen, - showNetworkDropdown, - hideNetworkDropdown, - currentView, - } = this.props - - if (window.METAMASK_UI_TYPE === 'notification') { - return null + // h(BuyOptions, {}, []), + ]) } - const props = this.props - const {isMascara, isOnboarding} = props + renderSidebar () { + return h('div', [ + h('style', ` + .sidebar-enter { + transition: transform 300ms ease-in-out; + transform: translateX(-100%); + } + .sidebar-enter.sidebar-enter-active { + transition: transform 300ms ease-in-out; + transform: translateX(0%); + } + .sidebar-leave { + transition: transform 200ms ease-out; + transform: translateX(0%); + } + .sidebar-leave.sidebar-leave-active { + transition: transform 200ms ease-out; + transform: translateX(-100%); + } + `), + + h(ReactCSSTransitionGroup, { + transitionName: 'sidebar', + transitionEnterTimeout: 300, + transitionLeaveTimeout: 200, + }, [ + // A second instance of Walletview is used for non-mobile viewports + this.props.sidebarOpen ? h(WalletView, { + responsiveDisplayClassname: '.sidebar', + style: {}, + }) : undefined, - // Do not render header if user is in mascara onboarding - if (isMascara && isOnboarding) { - return null - } + ]), - // Do not render header if user is in mascara buy ether - if (isMascara && props.currentView.name === 'buyEth') { - return null + // overlay + // TODO: add onClick for overlay to close sidebar + this.props.sidebarOpen ? h('div.sidebar-overlay', { + style: {}, + onClick: () => { + this.props.hideSidebar() + }, + }, []) : undefined, + ]) } - return ( + renderAppBar () { + const { + isUnlocked, + network, + provider, + networkDropdownOpen, + showNetworkDropdown, + hideNetworkDropdown, + currentView, + isMascara, + isOnboarding, + history, + } = this.props + + if (window.METAMASK_UI_TYPE === 'notification') { + return null + } + + // Do not render header if user is in mascara onboarding + if (isMascara && isOnboarding) { + return null + } - h('.full-width', { - style: {}, - }, [ + // Do not render header if user is in mascara buy ether + if (isMascara && currentView.name === 'buyEth') { + return null + } + + return ( - h('.app-header.flex-row.flex-space-between', { + h('.full-width', { style: {}, }, [ - h('div.app-header-contents', {}, [ - h('div.left-menu-wrapper', { - onClick: () => { - props.dispatch(actions.backToAccountDetail(props.activeAddress)) - }, - }, [ - // mini logo - h('img.metafox-icon', { - height: 29, - width: 29, - src: '/images/icon-128.png', - }), - - // metamask name - h('h1', { - style: { - position: 'relative', - paddingLeft: '9px', - color: '#5B5D67', - }, - }, 'MetaMask'), - - ]), - h('div.header__right-actions', [ - h('div.network-component-wrapper', { - style: {}, + h('.app-header.flex-row.flex-space-between', { + style: {}, + }, [ + h('div.app-header-contents', {}, [ + h('div.left-menu-wrapper', { + onClick: () => history.push(DEFAULT_ROUTE), }, [ - // Network Indicator - h(NetworkIndicator, { - network, - provider, - disabled: currentView.name === 'confTx', - onClick: (event) => { - event.preventDefault() - event.stopPropagation() - return networkDropdownOpen === false - ? showNetworkDropdown() - : hideNetworkDropdown() - }, + // mini logo + h('img.metafox-icon', { + height: 29, + width: 29, + src: '/images/icon-128.png', }), + // metamask name + h('h1', { + style: { + position: 'relative', + paddingLeft: '9px', + color: '#5B5D67', + }, + }, 'MetaMask'), + ]), - isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [ - h(Identicon, { - address: this.props.selectedAddress, - diameter: 32, - }), + h('div.header__right-actions', [ + h('div.network-component-wrapper', { + style: {}, + }, [ + // Network Indicator + h(NetworkIndicator, { + network, + provider, + disabled: currentView.name === 'confTx', + onClick: (event) => { + event.preventDefault() + event.stopPropagation() + return networkDropdownOpen === false + ? showNetworkDropdown() + : hideNetworkDropdown() + }, + }), + + ]), + + isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [ + h(Identicon, { + address: this.props.selectedAddress, + diameter: 32, + }), + ]), ]), ]), ]), - ]), - - ]) - ) -} - - -App.prototype.renderLoadingIndicator = function ({ isLoading, isLoadingNetwork, loadMessage }) { - const { isMascara } = this.props - - return isMascara - ? null - : h(Loading, { - isLoading: isLoading || isLoadingNetwork, - loadingMessage: loadMessage, - }) -} - -App.prototype.renderBackButton = function (style, justArrow = false) { - var props = this.props - return ( - h('.flex-row', { - key: 'leftArrow', - style: style, - onClick: () => props.dispatch(actions.goBackToInitView()), - }, [ - h('i.fa.fa-arrow-left.cursor-pointer'), - justArrow ? null : h('div.cursor-pointer', { - style: { - marginLeft: '3px', - }, - onClick: () => props.dispatch(actions.goBackToInitView()), - }, 'BACK'), - ]) - ) -} + ]) + ) + } -App.prototype.renderPrimary = function () { - log.debug('rendering primary') - var props = this.props - const {isMascara, isOnboarding} = props + renderLoadingIndicator ({ isLoading, isLoadingNetwork, loadMessage }) { + const { isMascara } = this.props - if (isMascara && isOnboarding) { - return h(MascaraFirstTime) + return isMascara + ? null + : h(Loading, { + isLoading: isLoading || isLoadingNetwork, + loadingMessage: loadMessage, + }) } - // notices - if (!props.noActiveNotices) { - log.debug('rendering notice screen for unread notices.') - return h(NoticeScreen, { - notice: props.lastUnreadNotice, - key: 'NoticeScreen', - onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), - }) - } else if (props.lostAccounts && props.lostAccounts.length > 0) { - log.debug('rendering notice screen for lost accounts view.') - return h(NoticeScreen, { - notice: generateLostAccountsNotice(props.lostAccounts), - key: 'LostAccountsNotice', - onConfirm: () => props.dispatch(actions.markAccountsFound()), - }) - } + renderBackButton (style, justArrow = false) { + const { dispatch } = this.props - if (props.seedWords) { - log.debug('rendering seed words') - return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) + return ( + h('.flex-row', { + key: 'leftArrow', + style: style, + onClick: () => dispatch(actions.goBackToInitView()), + }, [ + h('i.fa.fa-arrow-left.cursor-pointer'), + justArrow ? null : h('div.cursor-pointer', { + style: { + marginLeft: '3px', + }, + onClick: () => dispatch(actions.goBackToInitView()), + }, 'BACK'), + ]) + ) } - // show initialize screen - if (!props.isInitialized || props.forgottenPassword) { - // show current view - log.debug('rendering an initialize screen') - switch (props.currentView.name) { + renderPrimary () { + log.debug('rendering primary') + const { + isMascara, + isOnboarding, + noActiveNotices, + lostAccounts, + isInitialized, + forgottenPassword, + currentView, + activeAddress, + unapprovedTxs = {}, + } = this.props + + if (isMascara && isOnboarding) { + return h(MascaraFirstTime) + } - case 'restoreVault': - log.debug('rendering restore vault screen') - return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) + // notices + if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { + return h(Redirect, { + to: { + pathname: NOTICE_ROUTE, + }, + }) + } - default: - log.debug('rendering menu screen') - return h(InitializeMenuScreen, {key: 'menuScreenInit'}) + // unapprovedTxs + if (Object.keys(unapprovedTxs).length) { + return h(Redirect, { + to: { + pathname: CONFIRM_TRANSACTION_ROUTE, + }, + }) } - } - // show unlock screen - if (!props.isUnlocked) { - return h(MainContainer, { - currentViewName: props.currentView.name, - isUnlocked: props.isUnlocked, - }) - } + // if (!props.noActiveNotices) { + // log.debug('rendering notice screen for unread notices.') + // return h(NoticeScreen, { + // notice: props.lastUnreadNotice, + // key: 'NoticeScreen', + // onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), + // }) + // } else if (props.lostAccounts && props.lostAccounts.length > 0) { + // log.debug('rendering notice screen for lost accounts view.') + // return h(NoticeScreen, { + // notice: generateLostAccountsNotice(props.lostAccounts), + // key: 'LostAccountsNotice', + // onConfirm: () => props.dispatch(actions.markAccountsFound()), + // }) + // } + + // if (props.seedWords) { + // log.debug('rendering seed words') + // return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) + // } + + // show initialize screen + if (!isInitialized || forgottenPassword) { + // show current view + log.debug('rendering an initialize screen') + // switch (props.currentView.name) { + + // case 'restoreVault': + // log.debug('rendering restore vault screen') + // return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) + + // default: + // log.debug('rendering menu screen') + // return h(InitializeMenuScreen, {key: 'menuScreenInit'}) + // } + } - // show current view - switch (props.currentView.name) { + // // show unlock screen + // if (!props.isUnlocked) { + // return h(MainContainer, { + // currentViewName: props.currentView.name, + // isUnlocked: props.isUnlocked, + // }) + // } - case 'accountDetail': - log.debug('rendering main container') - return h(MainContainer, {key: 'account-detail'}) + // show current view + switch (currentView.name) { - case 'sendTransaction': - log.debug('rendering send tx screen') + case 'accountDetail': + log.debug('rendering main container') + return h(MainContainer, {key: 'account-detail'}) - // Going to leave this here until we are ready to delete SendTransactionScreen v1 - // const SendComponentToRender = checkFeatureToggle('send-v2') - // ? SendTransactionScreen2 - // : SendTransactionScreen + // case 'sendTransaction': + // log.debug('rendering send tx screen') - return h(SendTransactionScreen2, {key: 'send-transaction'}) + // // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // // const SendComponentToRender = checkFeatureToggle('send-v2') + // // ? SendTransactionScreen2 + // // : SendTransactionScreen - case 'sendToken': - log.debug('rendering send token screen') + // return h(SendTransactionScreen2, {key: 'send-transaction'}) - // Going to leave this here until we are ready to delete SendTransactionScreen v1 - // const SendTokenComponentToRender = checkFeatureToggle('send-v2') - // ? SendTransactionScreen2 - // : SendTokenScreen + // case 'sendToken': + // log.debug('rendering send token screen') - return h(SendTransactionScreen2, {key: 'sendToken'}) + // // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // // const SendTokenComponentToRender = checkFeatureToggle('send-v2') + // // ? SendTransactionScreen2 + // // : SendTokenScreen - case 'newKeychain': - log.debug('rendering new keychain screen') - return h(NewKeyChainScreen, {key: 'new-keychain'}) + // return h(SendTransactionScreen2, {key: 'sendToken'}) - case 'confTx': - log.debug('rendering confirm tx screen') - return h(ConfirmTxScreen, {key: 'confirm-tx'}) + case 'newKeychain': + log.debug('rendering new keychain screen') + return h(NewKeyChainScreen, {key: 'new-keychain'}) - case 'add-token': - log.debug('rendering add-token screen from unlock screen.') - return h(AddTokenScreen, {key: 'add-token'}) + // case 'confTx': + // log.debug('rendering confirm tx screen') + // return h(Redirect, { + // to: { + // pathname: CONFIRM_TRANSACTION_ROUTE, + // }, + // }) + // return h(ConfirmTxScreen, {key: 'confirm-tx'}) - case 'config': - log.debug('rendering config screen') - return h(Settings, {key: 'config'}) + // case 'add-token': + // log.debug('rendering add-token screen from unlock screen.') + // return h(AddTokenScreen, {key: 'add-token'}) - case 'import-menu': - log.debug('rendering import screen') - return h(Import, {key: 'import-menu'}) + // case 'config': + // log.debug('rendering config screen') + // return h(Settings, {key: 'config'}) - case 'reveal-seed-conf': - log.debug('rendering reveal seed confirmation screen') - return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) + // case 'import-menu': + // log.debug('rendering import screen') + // return h(Import, {key: 'import-menu'}) - case 'info': - log.debug('rendering info screen') - return h(Settings, {key: 'info', tab: 'info'}) + // case 'reveal-seed-conf': + // log.debug('rendering reveal seed confirmation screen') + // return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) - case 'buyEth': - log.debug('rendering buy ether screen') - return h(BuyView, {key: 'buyEthView'}) + // case 'info': + // log.debug('rendering info screen') + // return h(Settings, {key: 'info', tab: 'info'}) - case 'onboardingBuyEth': - log.debug('rendering onboarding buy ether screen') - return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) + case 'buyEth': + log.debug('rendering buy ether screen') + return h(BuyView, {key: 'buyEthView'}) - case 'qr': - log.debug('rendering show qr screen') - return h('div', { - style: { - position: 'absolute', - height: '100%', - top: '0px', - left: '0px', - }, - }, [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { - onClick: () => props.dispatch(actions.backToAccountDetail(props.activeAddress)), - style: { - marginLeft: '10px', - marginTop: '50px', - }, - }), - h('div', { + case 'onboardingBuyEth': + log.debug('rendering onboarding buy ether screen') + return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) + + case 'qr': + log.debug('rendering show qr screen') + return h('div', { style: { position: 'absolute', - left: '44px', - width: '285px', + height: '100%', + top: '0px', + left: '0px', }, }, [ - h(QrView, {key: 'qr'}), - ]), - ]) + h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { + onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)), + style: { + marginLeft: '10px', + marginTop: '50px', + }, + }), + h('div', { + style: { + position: 'absolute', + left: '44px', + width: '285px', + }, + }, [ + h(QrView, {key: 'qr'}), + ]), + ]) - default: - log.debug('rendering default, account detail screen') - return h(MainContainer, {key: 'account-detail'}) + default: + log.debug('rendering default, account detail screen') + return h(MainContainer, {key: 'account-detail'}) + } } -} -App.prototype.toggleMetamaskActive = function () { - if (!this.props.isUnlocked) { - // currently inactive: redirect to password box - var passwordBox = document.querySelector('input[type=password]') - if (!passwordBox) return - passwordBox.focus() - } else { - // currently active: deactivate - this.props.dispatch(actions.lockMetamask(false)) + toggleMetamaskActive () { + if (!this.props.isUnlocked) { + // currently inactive: redirect to password box + var passwordBox = document.querySelector('input[type=password]') + if (!passwordBox) return + passwordBox.focus() + } else { + // currently active: deactivate + this.props.dispatch(actions.lockMetamask(false)) + } + } + + getNetworkName () { + const { provider } = this.props + const providerName = provider.type + + let name + + if (providerName === 'mainnet') { + name = 'Main Ethereum Network' + } else if (providerName === 'ropsten') { + name = 'Ropsten Test Network' + } else if (providerName === 'kovan') { + name = 'Kovan Test Network' + } else if (providerName === 'rinkeby') { + name = 'Rinkeby Test Network' + } else { + name = 'Unknown Private Network' + } + + return name } } -App.prototype.getNetworkName = function () { - const { provider } = this.props - const providerName = provider.type - - let name - - if (providerName === 'mainnet') { - name = 'Main Ethereum Network' - } else if (providerName === 'ropsten') { - name = 'Ropsten Test Network' - } else if (providerName === 'kovan') { - name = 'Kovan Test Network' - } else if (providerName === 'rinkeby') { - name = 'Rinkeby Test Network' - } else { - name = 'Unknown Private Network' +function mapStateToProps (state) { + const { appState, metamask } = state + const { + networkDropdownOpen, + sidebarOpen, + isLoading, + loadingMessage, + } = appState + + const { + identities, + accounts, + address, + keyrings, + isInitialized, + noActiveNotices, + seedWords, + unapprovedTxs, + lastUnreadNotice, + lostAccounts, + } = metamask + const selected = address || Object.keys(accounts)[0] + + return { + // state from plugin + networkDropdownOpen, + sidebarOpen, + isLoading, + loadingMessage, + noActiveNotices, + isInitialized, + isUnlocked: state.metamask.isUnlocked, + selectedAddress: state.metamask.selectedAddress, + currentView: state.appState.currentView, + activeAddress: state.appState.activeAddress, + transForward: state.appState.transForward, + isMascara: state.metamask.isMascara, + isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), + seedWords: state.metamask.seedWords, + unapprovedTxs, + unapprovedMsgs: state.metamask.unapprovedMsgs, + menuOpen: state.appState.menuOpen, + network: state.metamask.network, + provider: state.metamask.provider, + forgottenPassword: state.appState.forgottenPassword, + lastUnreadNotice, + lostAccounts, + frequentRpcList: state.metamask.frequentRpcList || [], + currentCurrency: state.metamask.currentCurrency, + + // state needed to get account dropdown temporarily rendering from app bar + identities, + selected, + keyrings, } +} - return name +function mapDispatchToProps (dispatch, ownProps) { + return { + dispatch, + hideSidebar: () => dispatch(actions.hideSidebar()), + showNetworkDropdown: () => dispatch(actions.showNetworkDropdown()), + hideNetworkDropdown: () => dispatch(actions.hideNetworkDropdown()), + setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), + toggleAccountMenu: () => dispatch(actions.toggleAccountMenu()), + } } + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(App) diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index a9f075ec7..0965cba38 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -1,13 +1,19 @@ const inherits = require('util').inherits const Component = require('react').Component const connect = require('react-redux').connect +const { compose } = require('recompose') +const { withRouter } = require('react-router-dom') const h = require('react-hyperscript') 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 } = require('../../routes') -module.exports = connect(mapStateToProps, mapDispatchToProps)(AccountMenu) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(AccountMenu) inherits(AccountMenu, Component) function AccountMenu () { Component.call(this) } @@ -19,7 +25,6 @@ function mapStateToProps (state) { keyrings: state.metamask.keyrings, identities: state.metamask.identities, accounts: state.metamask.accounts, - } } @@ -63,6 +68,7 @@ AccountMenu.prototype.render = function () { lockMetamask, showConfigPage, showInfoPage, + history, } = this.props return h(Menu, { className: 'account-menu', isShowing: isAccountMenuOpen }, [ @@ -84,18 +90,27 @@ AccountMenu.prototype.render = function () { text: 'Create Account', }), h(Item, { - onClick: showImportPage, + onClick: () => { + toggleAccountMenu() + history.push(IMPORT_ACCOUNT_ROUTE) + }, icon: h('img', { src: 'images/import-account.svg' }), text: 'Import Account', }), h(Divider), h(Item, { - onClick: showInfoPage, + onClick: () => { + toggleAccountMenu() + history.push(INFO_ROUTE) + }, icon: h('img', { src: 'images/mm-info-icon.svg' }), text: 'Info & Help', }), h(Item, { - onClick: showConfigPage, + onClick: () => { + toggleAccountMenu() + history.push(SETTINGS_ROUTE) + }, icon: h('img', { src: 'images/settings.svg' }), text: 'Settings', }), diff --git a/ui/app/components/notice.js b/ui/app/components/notice.js deleted file mode 100644 index 941ac33e6..000000000 --- a/ui/app/components/notice.js +++ /dev/null @@ -1,132 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const h = require('react-hyperscript') -const ReactMarkdown = require('react-markdown') -const linker = require('extension-link-enabler') -const findDOMNode = require('react-dom').findDOMNode - -module.exports = Notice - -inherits(Notice, Component) -function Notice () { - Component.call(this) -} - -Notice.prototype.render = function () { - const { notice, onConfirm } = this.props - const { title, date, body } = notice - const state = this.state || { disclaimerDisabled: true } - const disabled = state.disclaimerDisabled - - return ( - h('.flex-column.flex-center.flex-grow', { - style: { - width: '100%', - }, - }, [ - h('h3.flex-center.text-transform-uppercase.terms-header', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - width: '100%', - fontSize: '20px', - textAlign: 'center', - padding: 6, - }, - }, [ - title, - ]), - - h('h5.flex-center.text-transform-uppercase.terms-header', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - marginBottom: 24, - width: '100%', - fontSize: '20px', - textAlign: 'center', - padding: 6, - }, - }, [ - date, - ]), - - h('style', ` - - .markdown { - overflow-x: hidden; - } - - .markdown h1, .markdown h2, .markdown h3 { - margin: 10px 0; - font-weight: bold; - } - - .markdown strong { - font-weight: bold; - } - .markdown em { - font-style: italic; - } - - .markdown p { - margin: 10px 0; - } - - .markdown a { - color: #df6b0e; - } - - `), - - h('div.markdown', { - onScroll: (e) => { - var object = e.currentTarget - if (object.offsetHeight + object.scrollTop + 100 >= object.scrollHeight) { - this.setState({disclaimerDisabled: false}) - } - }, - style: { - background: 'rgb(235, 235, 235)', - height: '310px', - padding: '6px', - width: '90%', - overflowY: 'scroll', - scroll: 'auto', - }, - }, [ - h(ReactMarkdown, { - className: 'notice-box', - source: body, - skipHtml: true, - }), - ]), - - h('button.primary', { - disabled, - onClick: () => { - this.setState({disclaimerDisabled: true}) - onConfirm() - }, - style: { - marginTop: '18px', - }, - }, 'Accept'), - ]) - ) -} - -Notice.prototype.componentDidMount = function () { - // eslint-disable-next-line react/no-find-dom-node - var node = findDOMNode(this) - linker.setupListener(node) - if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) { - this.setState({disclaimerDisabled: false}) - } -} - -Notice.prototype.componentWillUnmount = function () { - // eslint-disable-next-line react/no-find-dom-node - var node = findDOMNode(this) - linker.teardownListener(node) -} diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js new file mode 100644 index 000000000..7f0c37475 --- /dev/null +++ b/ui/app/components/pages/add-token.js @@ -0,0 +1,359 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const classnames = require('classnames') +const h = require('react-hyperscript') +const connect = require('react-redux').connect +const Fuse = require('fuse.js') +const contractMap = require('eth-contract-metadata') +const TokenBalance = require('../../components/token-balance') +const Identicon = require('../../components/identicon') +const contractList = Object.entries(contractMap) + .map(([ _, tokenData]) => tokenData) + .filter(tokenData => Boolean(tokenData.erc20)) +const fuse = new Fuse(contractList, { + shouldSort: true, + threshold: 0.45, + location: 0, + distance: 100, + maxPatternLength: 32, + minMatchCharLength: 1, + keys: ['address', 'name', 'symbol'], +}) +// const actions = require('./actions') +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' + +module.exports = connect(mapStateToProps, mapDispatchToProps)(AddTokenScreen) + +function mapStateToProps (state) { + const { identities, tokens } = state.metamask + return { + identities, + tokens, + } +} + +function mapDispatchToProps (dispatch) { + return { + goHome: () => dispatch(actions.goHome()), + addTokens: tokens => dispatch(actions.addTokens(tokens)), + } +} + +inherits(AddTokenScreen, Component) +function AddTokenScreen () { + this.state = { + isShowingConfirmation: false, + customAddress: '', + customSymbol: '', + customDecimals: 0, + searchQuery: '', + isCollapsed: true, + selectedTokens: {}, + errors: {}, + } + this.tokenAddressDidChange = this.tokenAddressDidChange.bind(this) + this.onNext = this.onNext.bind(this) + Component.call(this) +} + +AddTokenScreen.prototype.componentWillMount = function () { + this.tokenInfoGetter = tokenInfoGetter() +} + +AddTokenScreen.prototype.toggleToken = function (address, token) { + const { selectedTokens, errors } = this.state + const { [address]: selectedToken } = selectedTokens + this.setState({ + selectedTokens: { + ...selectedTokens, + [address]: selectedToken ? null : token, + }, + errors: { + ...errors, + tokenSelector: null, + }, + }) +} + +AddTokenScreen.prototype.onNext = function () { + const { isValid, errors } = this.validate() + + return !isValid + ? this.setState({ errors }) + : this.setState({ isShowingConfirmation: true }) +} + +AddTokenScreen.prototype.tokenAddressDidChange = function (e) { + const customAddress = e.target.value.trim() + this.setState({ customAddress }) + if (ethUtil.isValidAddress(customAddress) && customAddress !== emptyAddr) { + this.attemptToAutoFillTokenParams(customAddress) + } else { + this.setState({ + customSymbol: '', + customDecimals: 0, + }) + } +} + +AddTokenScreen.prototype.checkExistingAddresses = function (address) { + if (!address) return false + const tokensList = this.props.tokens + const matchesAddress = existingToken => { + return existingToken.address.toLowerCase() === address.toLowerCase() + } + + return R.any(matchesAddress)(tokensList) +} + +AddTokenScreen.prototype.validate = function () { + const errors = {} + const identitiesList = Object.keys(this.props.identities) + const { customAddress, customSymbol, customDecimals, selectedTokens } = this.state + const standardAddress = ethUtil.addHexPrefix(customAddress).toLowerCase() + + if (customAddress) { + const validAddress = ethUtil.isValidAddress(customAddress) + if (!validAddress) { + errors.customAddress = 'Address is invalid. ' + } + + const validDecimals = customDecimals >= 0 && customDecimals < 36 + if (!validDecimals) { + errors.customDecimals = 'Decimals must be at least 0, and not over 36.' + } + + const symbolLen = customSymbol.trim().length + const validSymbol = symbolLen > 0 && symbolLen < 10 + if (!validSymbol) { + errors.customSymbol = 'Symbol must be between 0 and 10 characters.' + } + + const ownAddress = identitiesList.includes(standardAddress) + if (ownAddress) { + errors.customAddress = 'Personal address detected. Input the token contract address.' + } + + const tokenAlreadyAdded = this.checkExistingAddresses(customAddress) + if (tokenAlreadyAdded) { + errors.customAddress = 'Token has already been added.' + } + } else if ( + Object.entries(selectedTokens) + .reduce((isEmpty, [ symbol, isSelected ]) => ( + isEmpty && !isSelected + ), true) + ) { + errors.tokenSelector = 'Must select at least 1 token.' + } + + return { + isValid: !Object.keys(errors).length, + errors, + } +} + +AddTokenScreen.prototype.attemptToAutoFillTokenParams = async function (address) { + const { symbol, decimals } = await this.tokenInfoGetter(address) + if (symbol && decimals) { + this.setState({ + customSymbol: symbol, + customDecimals: decimals.toString(), + }) + } +} + +AddTokenScreen.prototype.renderCustomForm = function () { + const { customAddress, customSymbol, customDecimals, errors } = this.state + + return !this.state.isCollapsed && ( + h('div.add-token__add-custom-form', [ + h('div', { + className: classnames('add-token__add-custom-field', { + 'add-token__add-custom-field--error': errors.customAddress, + }), + }, [ + h('div.add-token__add-custom-label', 'Token Address'), + h('input.add-token__add-custom-input', { + type: 'text', + onChange: this.tokenAddressDidChange, + value: customAddress, + }), + h('div.add-token__add-custom-error-message', errors.customAddress), + ]), + h('div', { + className: classnames('add-token__add-custom-field', { + 'add-token__add-custom-field--error': errors.customSymbol, + }), + }, [ + h('div.add-token__add-custom-label', 'Token Symbol'), + h('input.add-token__add-custom-input', { + type: 'text', + value: customSymbol, + disabled: true, + }), + h('div.add-token__add-custom-error-message', errors.customSymbol), + ]), + h('div', { + className: classnames('add-token__add-custom-field', { + 'add-token__add-custom-field--error': errors.customDecimals, + }), + }, [ + h('div.add-token__add-custom-label', 'Decimals of Precision'), + h('input.add-token__add-custom-input', { + type: 'number', + value: customDecimals, + disabled: true, + }), + h('div.add-token__add-custom-error-message', errors.customDecimals), + ]), + ]) + ) +} + +AddTokenScreen.prototype.renderTokenList = function () { + const { searchQuery = '', selectedTokens } = this.state + const results = searchQuery + ? fuse.search(searchQuery) || [] + : contractList + + return Array(6).fill(undefined) + .map((_, i) => { + const { logo, symbol, name, address } = results[i] || {} + const tokenAlreadyAdded = this.checkExistingAddresses(address) + return Boolean(logo || symbol || name) && ( + h('div.add-token__token-wrapper', { + className: classnames({ + 'add-token__token-wrapper--selected': selectedTokens[address], + 'add-token__token-wrapper--disabled': tokenAlreadyAdded, + }), + onClick: () => !tokenAlreadyAdded && this.toggleToken(address, results[i]), + }, [ + h('div.add-token__token-icon', { + style: { + backgroundImage: `url(images/contract/${logo})`, + }, + }), + h('div.add-token__token-data', [ + h('div.add-token__token-symbol', symbol), + h('div.add-token__token-name', name), + ]), + // tokenAlreadyAdded && ( + // h('div.add-token__token-message', 'Already added') + // ), + ]) + ) + }) +} + +AddTokenScreen.prototype.renderConfirmation = function () { + const { + customAddress: address, + customSymbol: symbol, + customDecimals: decimals, + selectedTokens, + } = this.state + + const { addTokens, history } = this.props + + const customToken = { + address, + symbol, + decimals, + } + + const tokens = address && symbol && decimals + ? { ...selectedTokens, [address]: customToken } + : selectedTokens + + return ( + h('div.add-token', [ + h('div.add-token__wrapper', [ + h('div.add-token__title-container.add-token__confirmation-title', [ + h('div.add-token__title', 'Add Token'), + h('div.add-token__description', 'Would you like to add these tokens?'), + ]), + h('div.add-token__content-container.add-token__confirmation-content', [ + h('div.add-token__description.add-token__confirmation-description', 'Your balances'), + h('div.add-token__confirmation-token-list', + Object.entries(tokens) + .map(([ address, token ]) => ( + h('span.add-token__confirmation-token-list-item', [ + h(Identicon, { + className: 'add-token__confirmation-token-icon', + diameter: 75, + address, + }), + h(TokenBalance, { token }), + ]) + )) + ), + ]), + ]), + h('div.add-token__buttons', [ + h('button.btn-secondary', { + onClick: () => addTokens(tokens).then(() => history.push(DEFAULT_ROUTE)), + }, 'Add Tokens'), + h('button.btn-tertiary', { + onClick: () => this.setState({ isShowingConfirmation: false }), + }, 'Back'), + ]), + ]) + ) +} + +AddTokenScreen.prototype.render = function () { + const { isCollapsed, errors, isShowingConfirmation } = this.state + const { history } = this.props + + return isShowingConfirmation + ? this.renderConfirmation() + : ( + h('div.add-token', [ + h('div.add-token__wrapper', [ + h('div.add-token__title-container', [ + h('div.add-token__title', 'Add Token'), + h('div.add-token__description', 'Keep track of the tokens you’ve bought with your MetaMask account. If you bought tokens using a different account, those tokens will not appear here.'), + h('div.add-token__description', 'Search for tokens or select from our list of popular tokens.'), + ]), + h('div.add-token__content-container', [ + h('div.add-token__input-container', [ + h('input.add-token__input', { + type: 'text', + placeholder: 'Search', + onChange: e => this.setState({ searchQuery: e.target.value }), + }), + h('div.add-token__search-input-error-message', errors.tokenSelector), + ]), + h( + 'div.add-token__token-icons-container', + this.renderTokenList(), + ), + ]), + h('div.add-token__footers', [ + h('div.add-token__add-custom', { + onClick: () => this.setState({ isCollapsed: !isCollapsed }), + }, [ + 'Add custom token', + h(`i.fa.fa-angle-${isCollapsed ? 'down' : 'up'}`), + ]), + this.renderCustomForm(), + ]), + ]), + h('div.add-token__buttons', [ + h('button.btn-secondary', { + onClick: this.onNext, + }, 'Next'), + h('button.btn-tertiary', { + onClick: () => history.goBack(), + }, 'Cancel'), + ]), + ]) + ) +} diff --git a/ui/app/components/pages/authenticated.js b/ui/app/components/pages/authenticated.js new file mode 100644 index 000000000..78f3a4225 --- /dev/null +++ b/ui/app/components/pages/authenticated.js @@ -0,0 +1,42 @@ +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const { Redirect, Route } = require('react-router-dom') +const h = require('react-hyperscript') +const { UNLOCK_ROUTE, INITIALIZE_MENU_ROUTE } = require('../../routes') + +const Authenticated = ({ component: Component, isUnlocked, isInitialized, ...props }) => { + + const render = props => { + switch (true) { + case isUnlocked: + return h(Component, { ...props }) + case !isInitialized: + return h(Redirect, { to: { pathname: INITIALIZE_MENU_ROUTE } }) + default: + return h(Redirect, { to: { pathname: UNLOCK_ROUTE } }) + } + } + + return ( + h(Route, { + ...props, + render, + }) + ) +} + +Authenticated.propTypes = { + component: PropTypes.func, + isUnlocked: PropTypes.bool, + isInitialized: PropTypes.bool, +} + +const mapStateToProps = state => { + const { metamask: { isUnlocked, isInitialized } } = state + return { + isUnlocked, + isInitialized, + } +} + +module.exports = connect(mapStateToProps)(Authenticated) diff --git a/ui/app/components/pages/import-account/index.js b/ui/app/components/pages/import-account/index.js new file mode 100644 index 000000000..481ed6a4b --- /dev/null +++ b/ui/app/components/pages/import-account/index.js @@ -0,0 +1,95 @@ +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/import-account/json.js b/ui/app/components/pages/import-account/json.js new file mode 100644 index 000000000..63a44b4b7 --- /dev/null +++ b/ui/app/components/pages/import-account/json.js @@ -0,0 +1,100 @@ +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 FileInput = require('react-simple-file-input').default + +const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' + +module.exports = connect(mapStateToProps)(JsonImportSubview) + +function mapStateToProps (state) { + return { + error: state.appState.warning, + } +} + +inherits(JsonImportSubview, Component) +function JsonImportSubview () { + Component.call(this) +} + +JsonImportSubview.prototype.render = function () { + const { error } = this.props + + return ( + h('div', { + style: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: '5px 15px 0px 15px', + }, + }, [ + + h('p', 'Used by a variety of different clients'), + h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'), + + h(FileInput, { + readAs: 'text', + onLoad: this.onLoad.bind(this), + style: { + margin: '20px 0px 12px 20px', + fontSize: '15px', + }, + }), + + h('input.large-input.letter-spacey', { + type: 'password', + placeholder: 'Enter password', + id: 'json-password-box', + onKeyPress: this.createKeyringOnEnter.bind(this), + style: { + width: 260, + marginTop: 12, + }, + }), + + h('button.primary', { + onClick: this.createNewKeychain.bind(this), + style: { + margin: 12, + }, + }, 'Import'), + + error ? h('span.error', error) : null, + ]) + ) +} + +JsonImportSubview.prototype.onLoad = function (event, file) { + this.setState({file: file, fileContents: event.target.result}) +} + +JsonImportSubview.prototype.createKeyringOnEnter = function (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewKeychain() + } +} + +JsonImportSubview.prototype.createNewKeychain = function () { + const state = this.state + const { fileContents } = state + + if (!fileContents) { + const message = 'You must select a file to import.' + return this.props.dispatch(actions.displayWarning(message)) + } + + const passwordInput = document.getElementById('json-password-box') + const password = passwordInput.value + + if (!password) { + const message = 'You must enter a password for the selected file.' + return this.props.dispatch(actions.displayWarning(message)) + } + + this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ])) +} diff --git a/ui/app/components/pages/import-account/private-key.js b/ui/app/components/pages/import-account/private-key.js new file mode 100644 index 000000000..217e6d9f9 --- /dev/null +++ b/ui/app/components/pages/import-account/private-key.js @@ -0,0 +1,71 @@ +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') + +module.exports = connect(mapStateToProps)(PrivateKeyImportView) + +function mapStateToProps (state) { + return { + error: state.appState.warning, + } +} + +inherits(PrivateKeyImportView, Component) +function PrivateKeyImportView () { + Component.call(this) +} + +PrivateKeyImportView.prototype.componentWillUnmount = function () { + this.props.dispatch(actions.displayWarning(null)) +} + +PrivateKeyImportView.prototype.render = function () { + const { error } = this.props + + return ( + h('div', { + style: { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: '5px 15px 0px 15px', + }, + }, [ + h('span', 'Paste your private key string here'), + + h('input.large-input.letter-spacey', { + type: 'password', + id: 'private-key-box', + onKeyPress: this.createKeyringOnEnter.bind(this), + style: { + width: 260, + marginTop: 12, + }, + }), + + h('button.primary', { + onClick: this.createNewKeychain.bind(this), + style: { + margin: 12, + }, + }, 'Import'), + + error ? h('span.error', error) : null, + ]) + ) +} + +PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewKeychain() + } +} + +PrivateKeyImportView.prototype.createNewKeychain = function () { + const input = document.getElementById('private-key-box') + const privateKey = input.value + this.props.dispatch(actions.importNewAccount('Private Key', [ privateKey ])) +} diff --git a/ui/app/components/pages/import-account/seed.js b/ui/app/components/pages/import-account/seed.js new file mode 100644 index 000000000..b4a7c0afa --- /dev/null +++ b/ui/app/components/pages/import-account/seed.js @@ -0,0 +1,30 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const connect = require('react-redux').connect + +module.exports = connect(mapStateToProps)(SeedImportSubview) + +function mapStateToProps (state) { + return {} +} + +inherits(SeedImportSubview, Component) +function SeedImportSubview () { + Component.call(this) +} + +SeedImportSubview.prototype.render = function () { + return ( + h('div', { + style: { + }, + }, [ + `Paste your seed phrase here!`, + h('textarea'), + h('br'), + h('button', 'Submit'), + ]) + ) +} + diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js new file mode 100644 index 000000000..5573f2dd2 --- /dev/null +++ b/ui/app/components/pages/keychains/restore-vault.js @@ -0,0 +1,167 @@ +const { withRouter } = require('react-router-dom') +const PropTypes = require('prop-types') +const { compose } = require('recompose') +const PersistentForm = require('../../../../lib/persistent-form') +const { connect } = require('react-redux') +const h = require('react-hyperscript') +const { createNewVaultAndRestore } = require('../../../actions') +const { DEFAULT_ROUTE } = require('../../../routes') + +class RestoreVaultPage extends PersistentForm { + constructor (props) { + super(props) + + this.state = { + error: null, + } + } + + createOnEnter (event) { + if (event.key === 'Enter') { + this.createNewVaultAndRestore() + } + } + + createNewVaultAndRestore () { + this.setState({ error: null }) + + // check password + var passwordBox = document.getElementById('password-box') + var password = passwordBox.value + var passwordConfirmBox = document.getElementById('password-box-confirm') + var passwordConfirm = passwordConfirmBox.value + + if (password.length < 8) { + this.setState({ error: 'Password not long enough' }) + return + } + + if (password !== passwordConfirm) { + this.setState({ error: 'Passwords don\'t match' }) + return + } + + // check seed + var seedBox = document.querySelector('textarea.twelve-word-phrase') + var seed = seedBox.value.trim() + if (seed.split(' ').length !== 12) { + this.setState({ error: 'Seed phrases are 12 words long' }) + return + } + + // submit + this.props.createNewVaultAndRestore(password, seed) + .then(() => history.push(DEFAULT_ROUTE)) + .catch(({ message }) => this.setState({ error: message })) + } + + render () { + const { error } = this.state + const { history } = this.props + this.persistentFormParentId = 'restore-vault-form' + + return ( + h('.initialize-screen.flex-column.flex-center.flex-grow', [ + + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginBottom: 24, + width: '100%', + fontSize: '20px', + padding: 6, + }, + }, [ + 'Restore Vault', + ]), + + // wallet seed entry + h('h3', 'Wallet Seed'), + h('textarea.twelve-word-phrase.letter-spacey', { + dataset: { + persistentFormId: 'wallet-seed', + }, + placeholder: 'Enter your secret twelve word phrase here to restore your vault.', + }), + + // password + h('input.large-input.letter-spacey', { + type: 'password', + id: 'password-box', + placeholder: 'New Password (min 8 chars)', + dataset: { + persistentFormId: 'password', + }, + style: { + width: 260, + marginTop: 12, + }, + }), + + // confirm password + h('input.large-input.letter-spacey', { + type: 'password', + id: 'password-box-confirm', + placeholder: 'Confirm Password', + onKeyPress: this.createOnEnter.bind(this), + dataset: { + persistentFormId: 'password-confirmation', + }, + style: { + width: 260, + marginTop: 16, + }, + }), + + error && ( + h('span.error.in-progress-notification', error) + ), + + // submit + h('.flex-row.flex-space-between', { + style: { + marginTop: 30, + width: '50%', + }, + }, [ + + // cancel + h('button.primary', { onClick: () => history.goBack() }, 'CANCEL'), + + // submit + h('button.primary', { + onClick: this.createNewVaultAndRestore.bind(this), + }, 'OK'), + + ]), + ]) + ) + } +} + +RestoreVaultPage.propTypes = { + history: PropTypes.object, +} + +const mapStateToProps = state => { + const { appState: { warning, forgottenPassword } } = state + + return { + warning, + forgottenPassword, + } +} + +const mapDispatchToProps = dispatch => { + return { + createNewVaultAndRestore: (password, seed) => { + return dispatch(createNewVaultAndRestore(password, seed)) + }, + } +} + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(RestoreVaultPage) diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js new file mode 100644 index 000000000..dc2cfc23e --- /dev/null +++ b/ui/app/components/pages/keychains/reveal-seed.js @@ -0,0 +1,192 @@ +const { Component } = require('react') +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const { exportAsFile } = require('../../../util') +const { requestRevealSeed, confirmSeedWords } = require('../../../actions') +const { DEFAULT_ROUTE } = require('../../../routes') + +class RevealSeedPage extends Component { + componentDidMount () { + document.getElementById('password-box').focus() + } + + checkConfirmation (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.revealSeedWords() + } + } + + revealSeedWords () { + const password = document.getElementById('password-box').value + this.props.requestRevealSeed(password) + } + + renderSeed () { + const { seedWords, confirmSeedWords, history } = this.props + + return ( + h('.initialize-screen.flex-column.flex-center.flex-grow', [ + + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginTop: 36, + marginBottom: 8, + width: '100%', + fontSize: '20px', + padding: 6, + }, + }, [ + 'Vault Created', + ]), + + h('div', { + style: { + fontSize: '1em', + marginTop: '10px', + textAlign: 'center', + }, + }, [ + h('span.error', 'These 12 words are the only way to restore your MetaMask accounts.\nSave them somewhere safe and secret.'), + ]), + + h('textarea.twelve-word-phrase', { + readOnly: true, + value: seedWords, + }), + + h('button.primary', { + onClick: () => confirmSeedWords().then(() => history.push(DEFAULT_ROUTE)), + style: { + margin: '24px', + fontSize: '0.9em', + marginBottom: '10px', + }, + }, 'I\'ve copied it somewhere safe'), + + h('button.primary', { + onClick: () => exportAsFile(`MetaMask Seed Words`, seedWords), + style: { + margin: '10px', + fontSize: '0.9em', + }, + }, 'Save Seed Words As File'), + ]) + ) + } + + renderConfirmation () { + const { history, warning, inProgress } = this.props + + return ( + h('.initialize-screen.flex-column.flex-center.flex-grow', { + style: { maxWidth: '420px' }, + }, [ + + h('h3.flex-center.text-transform-uppercase', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginBottom: 24, + width: '100%', + fontSize: '20px', + padding: 6, + }, + }, [ + 'Reveal Seed Words', + ]), + + h('.div', { + style: { + display: 'flex', + flexDirection: 'column', + padding: '20px', + justifyContent: 'center', + }, + }, [ + + h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'), + + // confirmation + h('input.large-input.letter-spacey', { + type: 'password', + id: 'password-box', + placeholder: 'Enter your password to confirm', + onKeyPress: this.checkConfirmation.bind(this), + style: { + width: 260, + marginTop: '12px', + }, + }), + + h('.flex-row.flex-start', { + style: { + marginTop: 30, + width: '50%', + }, + }, [ + // cancel + h('button.primary', { + onClick: () => history.goBack(), + }, 'CANCEL'), + + // submit + h('button.primary', { + style: { marginLeft: '10px' }, + onClick: this.revealSeedWords.bind(this), + }, 'OK'), + + ]), + + warning && ( + h('span.error', { + style: { + margin: '20px', + }, + }, warning.split('-')) + ), + + inProgress && ( + h('span.in-progress-notification', 'Generating Seed...') + ), + ]), + ]) + ) + } + + render () { + return this.props.seedWords + ? this.renderSeed() + : this.renderConfirmation() + } +} + +RevealSeedPage.propTypes = { + requestRevealSeed: PropTypes.func, + confirmSeedWords: PropTypes.func, + seedWords: PropTypes.string, + inProgress: PropTypes.bool, + history: PropTypes.object, + warning: PropTypes.string, +} + +const mapStateToProps = state => { + const { appState: { warning }, metamask: { seedWords } } = state + + return { + warning, + seedWords, + } +} + +const mapDispatchToProps = dispatch => { + return { + requestRevealSeed: password => dispatch(requestRevealSeed(password)), + confirmSeedWords: () => dispatch(confirmSeedWords()), + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(RevealSeedPage) diff --git a/ui/app/components/pages/notice.js b/ui/app/components/pages/notice.js new file mode 100644 index 000000000..8e68cd52b --- /dev/null +++ b/ui/app/components/pages/notice.js @@ -0,0 +1,219 @@ +const { Component } = require('react') +const h = require('react-hyperscript') +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const ReactMarkdown = require('react-markdown') +const linker = require('extension-link-enabler') +const generateLostAccountsNotice = require('../../../lib/lost-accounts-notice') +const findDOMNode = require('react-dom').findDOMNode +const actions = require('../../actions') +const { DEFAULT_ROUTE } = require('../../routes') + +class Notice extends Component { + constructor (props) { + super(props) + + this.state = { + disclaimerDisabled: true, + } + } + + componentWillMount () { + if (!this.props.notice) { + this.props.history.push(DEFAULT_ROUTE) + } + } + + componentDidMount () { + // eslint-disable-next-line react/no-find-dom-node + var node = findDOMNode(this) + linker.setupListener(node) + if (document.getElementsByClassName('notice-box')[0].clientHeight < 310) { + this.setState({ disclaimerDisabled: false }) + } + } + + componentWillReceiveProps (nextProps) { + if (!nextProps.notice) { + this.props.history.push(DEFAULT_ROUTE) + } + } + + componentWillUnmount () { + // eslint-disable-next-line react/no-find-dom-node + var node = findDOMNode(this) + linker.teardownListener(node) + } + + handleAccept () { + this.setState({ disclaimerDisabled: true }) + this.props.onConfirm() + } + + render () { + const { notice = {} } = this.props + const { title, date, body } = notice + // const state = this.state || { disclaimerDisabled: true } + const { disclaimerDisabled } = this.state + + return ( + h('.flex-column.flex-center.flex-grow', { + style: { + width: '100%', + }, + }, [ + h('h3.flex-center.text-transform-uppercase.terms-header', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + width: '100%', + fontSize: '20px', + textAlign: 'center', + padding: 6, + }, + }, [ + title, + ]), + + h('h5.flex-center.text-transform-uppercase.terms-header', { + style: { + background: '#EBEBEB', + color: '#AEAEAE', + marginBottom: 24, + width: '100%', + fontSize: '20px', + textAlign: 'center', + padding: 6, + }, + }, [ + date, + ]), + + h('style', ` + + .markdown { + overflow-x: hidden; + } + + .markdown h1, .markdown h2, .markdown h3 { + margin: 10px 0; + font-weight: bold; + } + + .markdown strong { + font-weight: bold; + } + .markdown em { + font-style: italic; + } + + .markdown p { + margin: 10px 0; + } + + .markdown a { + color: #df6b0e; + } + + `), + + h('div.markdown', { + onScroll: (e) => { + var object = e.currentTarget + if (object.offsetHeight + object.scrollTop + 100 >= object.scrollHeight) { + this.setState({ disclaimerDisabled: false }) + } + }, + style: { + background: 'rgb(235, 235, 235)', + height: '310px', + padding: '6px', + width: '90%', + overflowY: 'scroll', + scroll: 'auto', + }, + }, [ + h(ReactMarkdown, { + className: 'notice-box', + source: body, + skipHtml: true, + }), + ]), + + h('button.primary', { + disabled: disclaimerDisabled, + onClick: () => this.handleAccept(), + style: { + marginTop: '18px', + }, + }, 'Accept'), + ]) + ) + } + +} + +const mapStateToProps = state => { + const { metamask } = state + const { noActiveNotices, lastUnreadNotice, lostAccounts } = metamask + // if (!props.noActiveNotices) { + // log.debug('rendering notice screen for unread notices.') + // return h(NoticeScreen, { + // notice: props.lastUnreadNotice, + // key: 'NoticeScreen', + // onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), + // }) + // } else if (props.lostAccounts && props.lostAccounts.length > 0) { + // log.debug('rendering notice screen for lost accounts view.') + // return h(NoticeScreen, { + // notice: generateLostAccountsNotice(props.lostAccounts), + // key: 'LostAccountsNotice', + // onConfirm: () => props.dispatch(actions.markAccountsFound()), + // }) + // } + + return { + noActiveNotices, + lastUnreadNotice, + lostAccounts, + } +} + +Notice.propTypes = { + notice: PropTypes.object, + onConfirm: PropTypes.func, + history: PropTypes.object, +} + +const mapDispatchToProps = dispatch => { + return { + markNoticeRead: lastUnreadNotice => dispatch(actions.markNoticeRead(lastUnreadNotice)), + markAccountsFound: () => dispatch(actions.markAccountsFound()), + } +} + +const mergeProps = (stateProps, dispatchProps, ownProps) => { + const { noActiveNotices, lastUnreadNotice, lostAccounts } = stateProps + const { markNoticeRead, markAccountsFound } = dispatchProps + + let notice + let onConfirm + + if (!noActiveNotices) { + notice = lastUnreadNotice + onConfirm = () => markNoticeRead(lastUnreadNotice) + } else if (lostAccounts && lostAccounts.length > 0) { + notice = generateLostAccountsNotice(lostAccounts) + onConfirm = () => markAccountsFound() + } + + return { + ...stateProps, + ...dispatchProps, + ...ownProps, + notice, + onConfirm, + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps, mergeProps)(Notice) diff --git a/ui/app/components/pages/settings/index.js b/ui/app/components/pages/settings/index.js new file mode 100644 index 000000000..39e9b26ed --- /dev/null +++ b/ui/app/components/pages/settings/index.js @@ -0,0 +1,59 @@ +const { Component } = require('react') +const { Switch, Route, matchPath } = require('react-router-dom') +const PropTypes = require('prop-types') +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') + +class Config extends Component { + renderTabs () { + const { history, location } = this.props + + return h('div.settings__tabs', [ + h(TabBar, { + tabs: [ + { content: 'Settings', key: SETTINGS_ROUTE }, + { content: 'Info', key: INFO_ROUTE }, + ], + isActive: key => matchPath(location.pathname, { path: key, exact: true }), + onSelect: key => history.push(key), + }), + ]) + } + + render () { + const { history } = this.props + + return ( + h('.main-container.settings', {}, [ + h('.settings__header', [ + h('div.settings__close-button', { + onClick: () => history.push('/'), + }), + this.renderTabs(), + ]), + h(Switch, [ + h(Route, { + exact: true, + path: INFO_ROUTE, + component: Info, + }), + h(Route, { + exact: true, + path: SETTINGS_ROUTE, + component: Settings, + }), + ]), + ]) + ) + } +} + +Config.propTypes = { + location: PropTypes.object, + history: PropTypes.object, +} + +module.exports = Config diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js new file mode 100644 index 000000000..d8155eb9b --- /dev/null +++ b/ui/app/components/pages/settings/info.js @@ -0,0 +1,108 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') + +class Info extends Component { + renderLogo () { + return ( + h('div.settings__info-logo-wrapper', [ + h('img.settings__info-logo', { src: 'images/info-logo.png' }), + ]) + ) + } + + renderInfoLinks () { + return ( + h('div.settings__content-item.settings__content-item--without-height', [ + h('div.settings__info-link-header', 'Links'), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://metamask.io/privacy.html', + target: '_blank', + }, [ + h('span.settings__info-link', 'Privacy Policy'), + ]), + ]), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://metamask.io/terms.html', + target: '_blank', + }, [ + h('span.settings__info-link', 'Terms of Use'), + ]), + ]), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://metamask.io/attributions.html', + target: '_blank', + }, [ + h('span.settings__info-link', 'Attributions'), + ]), + ]), + h('hr.settings__info-separator'), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://support.metamask.io', + target: '_blank', + }, [ + h('span.settings__info-link', 'Visit our Support Center'), + ]), + ]), + h('div.settings__info-link-item', [ + h('a', { + href: 'https://metamask.io/', + target: '_blank', + }, [ + h('span.settings__info-link', 'Visit our web site'), + ]), + ]), + h('div.settings__info-link-item', [ + h('a', { + target: '_blank', + href: 'mailto:help@metamask.io?subject=Feedback', + }, [ + h('span.settings__info-link', 'Email us!'), + ]), + ]), + ]) + ) + } + + render () { + return ( + h('div.settings__content', [ + h('div.settings__content-row', [ + h('div.settings__content-item.settings__content-item--without-height', [ + this.renderLogo(), + h('div.settings__info-item', [ + h('div.settings__info-version-header', 'MetaMask Version'), + h('div.settings__info-version-number', '4.0.0'), + ]), + h('div.settings__info-item', [ + h( + 'div.settings__info-about', + 'MetaMask is designed and built in California.' + ), + ]), + ]), + this.renderInfoLinks(), + ]), + ]) + ) + } +} + +Info.propTypes = { + tab: PropTypes.string, + metamask: PropTypes.object, + setCurrentCurrency: PropTypes.func, + setRpcTarget: PropTypes.func, + displayWarning: PropTypes.func, + revealSeedConfirmation: PropTypes.func, + warning: PropTypes.string, + goHome: PropTypes.func, + location: PropTypes.object, + history: PropTypes.object, +} + +module.exports = Info diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js new file mode 100644 index 000000000..537270dee --- /dev/null +++ b/ui/app/components/pages/settings/settings.js @@ -0,0 +1,283 @@ +const { Component } = require('react') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const { connect } = require('react-redux') +const actions = require('../../../actions') +const infuraCurrencies = require('../../../infura-conversion.json') +const validUrl = require('valid-url') +const { exportAsFile } = require('../../../util') +const SimpleDropdown = require('../../dropdowns/simple-dropdown') +const ToggleButton = require('react-toggle-button') +const { REVEAL_SEED_ROUTE } = require('../../../routes') + +const getInfuraCurrencyOptions = () => { + const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { + return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase()) + }) + + return sortedCurrencies.map(({ quote: { code, name } }) => { + return { + displayValue: `${code.toUpperCase()} - ${name}`, + key: code, + value: code, + } + }) +} + +class Settings extends Component { + constructor (props) { + super(props) + + this.state = { + newRpc: '', + } + } + + renderBlockieOptIn () { + const { metamask: { useBlockie }, setUseBlockie } = this.props + + return h('div.settings__content-row', [ + h('div.settings__content-item', [ + h('span', 'Use Blockies Identicon'), + ]), + h('div.settings__content-item', [ + h('div.settings__content-item-col', [ + h(ToggleButton, { + value: useBlockie, + onToggle: (value) => setUseBlockie(!value), + activeLabel: '', + inactiveLabel: '', + }), + ]), + ]), + ]) + } + + renderCurrentConversion () { + const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props + + return h('div.settings__content-row', [ + h('div.settings__content-item', [ + h('span', 'Current Conversion'), + h('span.settings__content-description', `Updated ${Date(conversionDate)}`), + ]), + h('div.settings__content-item', [ + h('div.settings__content-item-col', [ + h(SimpleDropdown, { + placeholder: 'Select Currency', + options: getInfuraCurrencyOptions(), + selectedOption: currentCurrency, + onSelect: newCurrency => setCurrentCurrency(newCurrency), + }), + ]), + ]), + ]) + } + + renderCurrentProvider () { + const { metamask: { provider = {} } } = this.props + let title, value, color + + switch (provider.type) { + + case 'mainnet': + title = 'Current Network' + value = 'Main Ethereum Network' + color = '#038789' + break + + case 'ropsten': + title = 'Current Network' + value = 'Ropsten Test Network' + color = '#e91550' + break + + case 'kovan': + title = 'Current Network' + value = 'Kovan Test Network' + color = '#690496' + break + + case 'rinkeby': + title = 'Current Network' + value = 'Rinkeby Test Network' + color = '#ebb33f' + break + + default: + title = 'Current RPC' + value = provider.rpcTarget + } + + return h('div.settings__content-row', [ + h('div.settings__content-item', title), + h('div.settings__content-item', [ + h('div.settings__content-item-col', [ + h('div.settings__provider-wrapper', [ + h('div.settings__provider-icon', { style: { background: color } }), + h('div', value), + ]), + ]), + ]), + ]) + } + + renderNewRpcUrl () { + return ( + h('div.settings__content-row', [ + h('div.settings__content-item', [ + h('span', 'New RPC URL'), + ]), + h('div.settings__content-item', [ + h('div.settings__content-item-col', [ + h('input.settings__input', { + placeholder: 'New RPC URL', + onChange: event => this.setState({ newRpc: event.target.value }), + onKeyPress: event => { + if (event.key === 'Enter') { + this.validateRpc(this.state.newRpc) + } + }, + }), + h('div.settings__rpc-save-button', { + onClick: event => { + event.preventDefault() + this.validateRpc(this.state.newRpc) + }, + }, 'Save'), + ]), + ]), + ]) + ) + } + + validateRpc (newRpc) { + const { setRpcTarget, displayWarning } = this.props + + if (validUrl.isWebUri(newRpc)) { + setRpcTarget(newRpc) + } else { + const appendedRpc = `http://${newRpc}` + + if (validUrl.isWebUri(appendedRpc)) { + displayWarning('URIs require the appropriate HTTP/HTTPS prefix.') + } else { + displayWarning('Invalid RPC URI') + } + } + } + + renderStateLogs () { + return ( + h('div.settings__content-row', [ + h('div.settings__content-item', [ + h('div', 'State Logs'), + h( + 'div.settings__content-description', + 'State logs contain your public account addresses and sent transactions.' + ), + ]), + h('div.settings__content-item', [ + h('div.settings__content-item-col', [ + h('button.settings__clear-button', { + onClick (event) { + exportAsFile('MetaMask State Logs', window.logState()) + }, + }, 'Download State Logs'), + ]), + ]), + ]) + ) + } + + renderSeedWords () { + const { history } = this.props + + return ( + h('div.settings__content-row', [ + h('div.settings__content-item', 'Reveal Seed Words'), + h('div.settings__content-item', [ + h('div.settings__content-item-col', [ + h('button.settings__clear-button.settings__clear-button--red', { + onClick: () => history.push(REVEAL_SEED_ROUTE), + }, 'Reveal Seed Words'), + ]), + ]), + ]) + ) + } + + 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'), + ]), + ]), + ]) + ) + } + + render () { + const { warning } = this.props + + return ( + h('div.settings__content', [ + warning && h('div.settings__error', warning), + this.renderBlockieOptIn(), + this.renderCurrentConversion(), + // this.renderCurrentProvider(), + this.renderNewRpcUrl(), + this.renderStateLogs(), + this.renderSeedWords(), + this.renderOldUI(), + ]) + ) + } +} + +Settings.propTypes = { + metamask: PropTypes.object, + setUseBlockie: PropTypes.func, + setCurrentCurrency: PropTypes.func, + setRpcTarget: PropTypes.func, + displayWarning: PropTypes.func, + revealSeedConfirmation: PropTypes.func, + setFeatureFlagToBeta: PropTypes.func, + warning: PropTypes.string, + history: PropTypes.object, +} + +const mapStateToProps = state => { + return { + metamask: state.metamask, + warning: state.appState.warning, + } +} + +const mapDispatchToProps = dispatch => { + return { + setCurrentCurrency: currency => dispatch(actions.setCurrentCurrency(currency)), + setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)), + displayWarning: warning => dispatch(actions.displayWarning(warning)), + revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()), + setUseBlockie: value => dispatch(actions.setUseBlockie(value)), + setFeatureFlagToBeta: () => dispatch(actions.setFeatureFlag('betaUI', false)), + } +} + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(Settings) diff --git a/ui/app/components/pages/unauthenticated/unlock.js b/ui/app/components/pages/unauthenticated/unlock.js new file mode 100644 index 000000000..72f27c11d --- /dev/null +++ b/ui/app/components/pages/unauthenticated/unlock.js @@ -0,0 +1,172 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const { connect } = require('react-redux') +const h = require('react-hyperscript') +const { Redirect, withRouter } = require('react-router-dom') +const { compose } = require('recompose') +const { tryUnlockMetamask, forgotPassword } = require('../../../actions') +const getCaretCoordinates = require('textarea-caret') +const EventEmitter = require('events').EventEmitter +const Mascot = require('../../mascot') +const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../../routes') + +class UnlockScreen extends Component { + constructor (props) { + super(props) + + this.state = { + error: null, + } + + this.animationEventEmitter = new EventEmitter() + } + + componentDidMount () { + const passwordBox = document.getElementById('password-box') + + if (passwordBox) { + passwordBox.focus() + } + } + + tryUnlockMetamask (password) { + const { tryUnlockMetamask, history } = this.props + tryUnlockMetamask(password) + .then(() => history.push(DEFAULT_ROUTE)) + .catch(({ message }) => this.setState({ error: message })) + } + + onSubmit (event) { + const input = document.getElementById('password-box') + const password = input.value + this.tryUnlockMetamask(password) + } + + onKeyPress (event) { + if (event.key === 'Enter') { + this.submitPassword(event) + } + } + + submitPassword (event) { + var element = event.target + var password = element.value + // reset input + element.value = '' + this.tryUnlockMetamask(password) + } + + inputChanged (event) { + // tell mascot to look at page action + var element = event.target + var boundingRect = element.getBoundingClientRect() + var coordinates = getCaretCoordinates(element, element.selectionEnd) + this.animationEventEmitter.emit('point', { + x: boundingRect.left + coordinates.left - element.scrollLeft, + y: boundingRect.top + coordinates.top - element.scrollTop, + }) + } + + render () { + const { error } = this.state + const { isUnlocked, history } = this.props + + if (isUnlocked) { + return ( + h(Redirect, { + to: { + pathname: DEFAULT_ROUTE, + }, + }) + ) + } + + return ( + h('.unlock-page.main-container', [ + h('.flex-column', { + style: { + width: 'inherit', + }, + }, [ + h('.unlock-screen.flex-column.flex-center.flex-grow', [ + + h(Mascot, { + animationEventEmitter: this.animationEventEmitter, + }), + + h('h1', { + style: { + fontSize: '1.4em', + textTransform: 'uppercase', + color: '#7F8082', + }, + }, 'MetaMask'), + + h('input.large-input', { + type: 'password', + id: 'password-box', + placeholder: 'enter password', + style: { + background: 'white', + }, + onKeyPress: this.onKeyPress.bind(this), + onInput: this.inputChanged.bind(this), + }), + + h('.error', { + style: { + display: error ? 'block' : 'none', + padding: '0 20px', + textAlign: 'center', + }, + }, error), + + h('button.primary.cursor-pointer', { + onClick: this.onSubmit.bind(this), + style: { + margin: 10, + }, + }, 'Unlock'), + + h('.flex-row.flex-center.flex-grow', [ + h('p.pointer', { + onClick: () => history.push(RESTORE_VAULT_ROUTE), + style: { + fontSize: '0.8em', + color: 'rgb(247, 134, 28)', + textDecoration: 'underline', + }, + }, 'Restore from seed phrase'), + ]), + ]), + ]), + ]) + ) + } +} + +UnlockScreen.propTypes = { + forgotPassword: PropTypes.func, + tryUnlockMetamask: PropTypes.func, + history: PropTypes.object, + isUnlocked: PropTypes.bool, +} + +const mapStateToProps = state => { + const { metamask: { isUnlocked } } = state + return { + isUnlocked, + } +} + +const mapDispatchToProps = dispatch => { + return { + forgotPassword: () => dispatch(forgotPassword()), + tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)), + } +} + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(UnlockScreen) diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 1264da153..8a167f7cd 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -1,5 +1,7 @@ const Component = require('react').Component const { connect } = require('react-redux') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const h = require('react-hyperscript') const inherits = require('util').inherits const actions = require('../../actions') @@ -11,8 +13,12 @@ const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const { conversionUtil, addCurrencies } = require('../../conversion-util') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') +const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes') -module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(ConfirmSendEther) function mapStateToProps (state) { const { @@ -43,6 +49,7 @@ function mapDispatchToProps (dispatch) { to, value: amount, } = txParams + dispatch(actions.updateSend({ gasLimit, gasPrice, @@ -52,7 +59,6 @@ function mapDispatchToProps (dispatch) { errors: { to: null, amount: null }, editingTransactionId: id, })) - dispatch(actions.showSendPage()) }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), } @@ -177,8 +183,14 @@ ConfirmSendEther.prototype.getData = function () { } } +ConfirmSendEther.prototype.editTransaction = function (txMeta) { + const { editTransaction, history } = this.props + editTransaction(txMeta) + history.push(SEND_ROUTE) +} + ConfirmSendEther.prototype.render = function () { - const { editTransaction, currentCurrency, clearSend } = this.props + const { currentCurrency, clearSend } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -220,7 +232,7 @@ ConfirmSendEther.prototype.render = function () { h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ h('button.confirm-screen-back-button', { - onClick: () => editTransaction(txMeta), + onClick: () => this.editTransaction(txMeta), }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), h('div.confirm-screen-header-tip'), @@ -422,6 +434,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) { ConfirmSendEther.prototype.cancel = function (event, txMeta) { event.preventDefault() this.props.cancelTransaction(txMeta) + .then(() => this.props.history.push(DEFAULT_ROUTE)) } ConfirmSendEther.prototype.checkValidity = function () { diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 727cd260b..8087e431f 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -1,5 +1,7 @@ const Component = require('react').Component const { connect } = require('react-redux') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const h = require('react-hyperscript') const inherits = require('util').inherits const ethAbi = require('ethereumjs-abi') @@ -27,8 +29,12 @@ const { getSelectedAddress, getSelectedTokenContract, } = require('../../selectors') +const { SEND_ROUTE, DEFAULT_ROUTE } = require('../../routes') -module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(ConfirmSendToken) function mapStateToProps (state, ownProps) { const { token: { symbol }, txData } = ownProps @@ -99,6 +105,12 @@ function ConfirmSendToken () { this.onSubmit = this.onSubmit.bind(this) } +ConfirmSendToken.prototype.editTransaction = function (txMeta) { + const { editTransaction, history } = this.props + editTransaction(txMeta) + history.push(SEND_ROUTE) +} + ConfirmSendToken.prototype.componentWillMount = function () { const { tokenContract, selectedAddress } = this.props tokenContract && tokenContract @@ -293,7 +305,6 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { } ConfirmSendToken.prototype.render = function () { - const { editTransaction } = this.props const txMeta = this.gatherTxMeta() const { from: { @@ -316,7 +327,7 @@ ConfirmSendToken.prototype.render = function () { h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ h('button.confirm-screen-back-button', { - onClick: () => editTransaction(txMeta), + onClick: () => this.editTransaction(txMeta), }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), h('div.confirm-screen-header-tip'), @@ -416,6 +427,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) { ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() this.props.cancelTransaction(txMeta) + .then(() => this.props.history.push(DEFAULT_ROUTE)) } ConfirmSendToken.prototype.checkValidity = function () { diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index 655de8897..5998bd252 100644 --- a/ui/app/components/send/send-v2-container.js +++ b/ui/app/components/send/send-v2-container.js @@ -2,6 +2,8 @@ const connect = require('react-redux').connect const actions = require('../../actions') const abi = require('ethereumjs-abi') const SendEther = require('../../send-v2') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const { accountsWithSendEtherInfoSelector, @@ -16,7 +18,10 @@ const { getSelectedTokenContract, } = require('../../selectors') -module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(SendEther) function mapStateToProps (state) { const fromAccounts = accountsWithSendEtherInfoSelector(state) diff --git a/ui/app/components/tab-bar.js b/ui/app/components/tab-bar.js index 0edced119..32c9e4f24 100644 --- a/ui/app/components/tab-bar.js +++ b/ui/app/components/tab-bar.js @@ -4,31 +4,17 @@ const PropTypes = require('react').PropTypes const classnames = require('classnames') class TabBar extends Component { - constructor (props) { - super(props) - const { defaultTab, tabs } = props - - this.state = { - subview: defaultTab || tabs[0].key, - } - } - render () { - const { tabs = [], tabSelected } = this.props - const { subview } = this.state + const { tabs = [], onSelect, isActive } = this.props return ( h('.tab-bar', {}, [ - tabs.map((tab) => { - const { key, content } = tab + tabs.map(({ key, content }) => { return h('div', { className: classnames('tab-bar__tab pointer', { - 'tab-bar__tab--active': subview === key, + 'tab-bar__tab--active': isActive(key, content), }), - onClick: () => { - this.setState({ subview: key }) - tabSelected(key) - }, + onClick: () => onSelect(key), key, }, content) }), @@ -39,9 +25,9 @@ class TabBar extends Component { } TabBar.propTypes = { - defaultTab: PropTypes.string, + isActive: PropTypes.func.isRequired, tabs: PropTypes.array, - tabSelected: PropTypes.func, + onSelect: PropTypes.func, } module.exports = TabBar diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 70722f43e..6f18ea814 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -10,8 +10,14 @@ const { formatDate } = require('../util') const { showConfTxPage } = require('../actions') const classnames = require('classnames') const { tokenInfoGetter } = require('../token-util') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') +const { CONFIRM_TRANSACTION_ROUTE } = require('../routes') -module.exports = connect(mapStateToProps, mapDispatchToProps)(TxList) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(TxList) function mapStateToProps (state) { return { @@ -88,7 +94,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionHash, transactionNetworkId, } = props - const { showConfTxPage } = this.props + const { showConfTxPage, history } = this.props const opts = { key: transActionId || transactionHash, @@ -106,7 +112,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa const isUnapproved = transactionStatus === 'unapproved' if (isUnapproved) { - opts.onClick = () => showConfTxPage({id: transActionId}) + opts.onClick = () => history.push(CONFIRM_TRANSACTION_ROUTE) opts.transactionStatus = 'Not Started' } else if (transactionHash) { opts.onClick = () => this.view(transactionHash, transactionNetworkId) diff --git a/ui/app/components/tx-view.js b/ui/app/components/tx-view.js index e42a20c85..46029166e 100644 --- a/ui/app/components/tx-view.js +++ b/ui/app/components/tx-view.js @@ -3,14 +3,20 @@ const connect = require('react-redux').connect const h = require('react-hyperscript') const ethUtil = require('ethereumjs-util') const inherits = require('util').inherits +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const actions = require('../actions') const selectors = require('../selectors') +const { SEND_ROUTE } = require('../routes') const BalanceComponent = require('./balance-component') const TxList = require('./tx-list') const Identicon = require('./identicon') -module.exports = connect(mapStateToProps, mapDispatchToProps)(TxView) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(TxView) function mapStateToProps (state) { const sidebarOpen = state.appState.sidebarOpen @@ -63,7 +69,7 @@ TxView.prototype.renderHeroBalance = function () { } TxView.prototype.renderButtons = function () { - const {selectedToken, showModal, showSendPage, showSendTokenPage } = this.props + const {selectedToken, showModal, history } = this.props return !selectedToken ? ( @@ -82,7 +88,7 @@ TxView.prototype.renderButtons = function () { textAlign: 'center', marginLeft: '0.8em', }, - onClick: showSendPage, + onClick: () => history.push(SEND_ROUTE), }, 'SEND'), ]) ) @@ -93,7 +99,7 @@ TxView.prototype.renderButtons = function () { textAlign: 'center', marginLeft: '0.8em', }, - onClick: showSendTokenPage, + onClick: () => history.push(SEND_ROUTE), }, 'SEND'), ]) ) diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 3cb7a8b76..3b4443ef6 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -1,6 +1,8 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const inherits = require('util').inherits const Identicon = require('./identicon') // const AccountDropdowns = require('./dropdowns/index.js').AccountDropdowns @@ -9,8 +11,12 @@ const actions = require('../actions') const BalanceComponent = require('./balance-component') const TokenList = require('./token-list') const selectors = require('../selectors') +const { ADD_TOKEN_ROUTE } = require('../routes') -module.exports = connect(mapStateToProps, mapDispatchToProps)(WalletView) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(WalletView) function mapStateToProps (state) { @@ -89,6 +95,7 @@ WalletView.prototype.render = function () { showAccountDetailModal, hideSidebar, showAddTokenPage, + history, } = this.props // temporary logs + fake extra wallets // console.log('walletview, selectedAccount:', selectedAccount) @@ -152,10 +159,7 @@ WalletView.prototype.render = function () { h(TokenList), h('button.wallet-view__add-token-button', { - onClick: () => { - showAddTokenPage() - hideSidebar() - }, + onClick: () => history.push(ADD_TOKEN_ROUTE), }, 'Add Token'), ]) } diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 9f273aaec..ce0012d5b 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -2,6 +2,8 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const actions = require('./actions') const txHelper = require('../lib/tx-helper') @@ -11,17 +13,12 @@ const SignatureRequest = require('./components/signature-request') // const PendingPersonalMsg = require('./components/pending-personal-msg') // const PendingTypedMsg = require('./components/pending-typed-msg') const Loading = require('./components/loading') +const { DEFAULT_ROUTE } = require('./routes') -// const contentDivider = h('div', { -// style: { -// marginLeft: '16px', -// marginRight: '16px', -// height:'1px', -// background:'#E7E7E7', -// }, -// }) - -module.exports = connect(mapStateToProps)(ConfirmTxScreen) +module.exports = compose( + withRouter, + connect(mapStateToProps) +)(ConfirmTxScreen) function mapStateToProps (state) { return { @@ -48,6 +45,20 @@ function ConfirmTxScreen () { Component.call(this) } +ConfirmTxScreen.prototype.componentWillMount = function () { + const { unapprovedTxs = {} } = this.props + if (Object.keys(unapprovedTxs).length === 0) { + this.props.history.push(DEFAULT_ROUTE) + } +} + +ConfirmTxScreen.prototype.componentWillReceiveProps = function (nextProps) { + const { unapprovedTxs = {} } = nextProps + if (Object.keys(unapprovedTxs).length === 0) { + this.props.history.push(DEFAULT_ROUTE) + } +} + ConfirmTxScreen.prototype.render = function () { const props = this.props const { @@ -146,6 +157,7 @@ ConfirmTxScreen.prototype.buyEth = function (address, event) { ConfirmTxScreen.prototype.sendTransaction = function (txData, event) { this.stopPropagation(event) this.props.dispatch(actions.updateAndApproveTx(txData)) + .then(() => this.props.history.push(DEFAULT_ROUTE)) } ConfirmTxScreen.prototype.cancelTransaction = function (txData, event) { diff --git a/ui/app/css/index.scss b/ui/app/css/index.scss index 445c819ff..c068028f8 100644 --- a/ui/app/css/index.scss +++ b/ui/app/css/index.scss @@ -6,9 +6,15 @@ */ @import './itcss/settings/index.scss'; + @import './itcss/tools/index.scss'; + @import './itcss/generic/index.scss'; + @import './itcss/base/index.scss'; + @import './itcss/objects/index.scss'; + @import './itcss/components/index.scss'; + @import './itcss/trumps/index.scss'; diff --git a/ui/app/css/itcss/components/index.scss b/ui/app/css/itcss/components/index.scss index dfb4f23f0..e1ec42c66 100644 --- a/ui/app/css/itcss/components/index.scss +++ b/ui/app/css/itcss/components/index.scss @@ -51,3 +51,5 @@ @import './account-dropdown-mini.scss'; @import './editable-label.scss'; + +@import './pages/index.scss'; diff --git a/ui/app/css/itcss/components/pages/index.scss b/ui/app/css/itcss/components/pages/index.scss new file mode 100644 index 000000000..82446fd7a --- /dev/null +++ b/ui/app/css/itcss/components/pages/index.scss @@ -0,0 +1 @@ +@import './unlock.scss'; diff --git a/ui/app/css/itcss/components/pages/unlock.scss b/ui/app/css/itcss/components/pages/unlock.scss new file mode 100644 index 000000000..5d438377b --- /dev/null +++ b/ui/app/css/itcss/components/pages/unlock.scss @@ -0,0 +1,9 @@ +.unlock-page { + box-shadow: none; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + background: rgb(247, 247, 247); + width: 100%; +} diff --git a/ui/app/css/itcss/components/sections.scss b/ui/app/css/itcss/components/sections.scss index 388aea175..ace46bd8a 100644 --- a/ui/app/css/itcss/components/sections.scss +++ b/ui/app/css/itcss/components/sections.scss @@ -17,6 +17,12 @@ textarea.twelve-word-phrase { resize: none; } +.initialize-screen { + width: 100%; + z-index: $main-container-z-index; + background: #f7f7f7; +} + .initialize-screen hr { width: 60px; margin: 12px; diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index b4587f1ee..6832f5ddf 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -1,184 +1,191 @@ -const inherits = require('util').inherits -const EventEmitter = require('events').EventEmitter -const Component = require('react').Component -const connect = require('react-redux').connect +const { EventEmitter } = require('events') +const { Component } = require('react') +const { connect } = require('react-redux') const h = require('react-hyperscript') +const PropTypes = require('prop-types') const Mascot = require('../components/mascot') const actions = require('../actions') const Tooltip = require('../components/tooltip') const getCaretCoordinates = require('textarea-caret') +const { RESTORE_VAULT_ROUTE, DEFAULT_ROUTE } = require('../routes') -let isSubmitting = false +class InitializeMenuScreen extends Component { + constructor (props) { + super(props) -module.exports = connect(mapStateToProps)(InitializeMenuScreen) - -inherits(InitializeMenuScreen, Component) -function InitializeMenuScreen () { - Component.call(this) - this.animationEventEmitter = new EventEmitter() -} + this.animationEventEmitter = new EventEmitter() + this.state = { + warning: null, + } + } -function mapStateToProps (state) { - return { - // state from plugin - currentView: state.appState.currentView, - warning: state.appState.warning, + componentWillMount () { + const { isInitialized, isUnlocked, history } = this.props + if (isInitialized || isUnlocked) { + history.push(DEFAULT_ROUTE) + } } -} -InitializeMenuScreen.prototype.render = function () { - var state = this.props + componentDidMount () { + document.getElementById('password-box').focus() + } - switch (state.currentView.name) { + render () { + const { history } = this.props + const { warning } = this.state - default: - return this.renderMenu(state) + return ( + h('.initialize-screen.flex-column.flex-center.flex-grow', [ - } -} + h(Mascot, { + animationEventEmitter: this.animationEventEmitter, + }), -// InitializeMenuScreen.prototype.componentDidMount = function(){ -// document.getElementById('password-box').focus() -// } + h('h1', { + style: { + fontSize: '1.3em', + textTransform: 'uppercase', + color: '#7F8082', + marginBottom: 10, + }, + }, 'MetaMask'), -InitializeMenuScreen.prototype.renderMenu = function (state) { - return ( - h('.initialize-screen.flex-column.flex-center.flex-grow', [ + h('div', [ + h('h3', { + style: { + fontSize: '0.8em', + color: '#7F8082', + display: 'inline', + }, + }, 'Encrypt your new DEN'), + + h(Tooltip, { + title: 'Your DEN is your password-encrypted storage within MetaMask.', + }, [ + h('i.fa.fa-question-circle.pointer', { + style: { + fontSize: '18px', + position: 'relative', + color: 'rgb(247, 134, 28)', + top: '2px', + marginLeft: '4px', + }, + }), + ]), + ]), - h(Mascot, { - animationEventEmitter: this.animationEventEmitter, - }), + h('span.error.in-progress-notification', warning), - h('h1', { - style: { - fontSize: '1.3em', - textTransform: 'uppercase', - color: '#7F8082', - marginBottom: 10, - }, - }, 'MetaMask'), + // password + h('input.large-input.letter-spacey', { + type: 'password', + id: 'password-box', + placeholder: 'New Password (min 8 chars)', + onInput: this.inputChanged.bind(this), + style: { + width: 260, + marginTop: 12, + }, + }), + + // confirm password + h('input.large-input.letter-spacey', { + type: 'password', + id: 'password-box-confirm', + placeholder: 'Confirm Password', + onKeyPress: this.createVaultOnEnter.bind(this), + onInput: this.inputChanged.bind(this), + style: { + width: 260, + marginTop: 16, + }, + }), - h('div', [ - h('h3', { + h('button.primary', { + onClick: this.createNewVaultAndKeychain.bind(this), style: { - fontSize: '0.8em', - color: '#7F8082', - display: 'inline', + margin: 12, }, - }, 'Encrypt your new DEN'), + }, 'Create'), - h(Tooltip, { - title: 'Your DEN is your password-encrypted storage within MetaMask.', - }, [ - h('i.fa.fa-question-circle.pointer', { + h('.flex-row.flex-center.flex-grow', [ + h('p.pointer', { + onClick: () => history.push(RESTORE_VAULT_ROUTE), style: { - fontSize: '18px', - position: 'relative', + fontSize: '0.8em', color: 'rgb(247, 134, 28)', - top: '2px', - marginLeft: '4px', + textDecoration: 'underline', }, - }), + }, 'Import Existing DEN'), ]), - ]), - - h('span.in-progress-notification', state.warning), - - // password - h('input.large-input.letter-spacey', { - type: 'password', - id: 'password-box', - placeholder: 'New Password (min 8 chars)', - onInput: this.inputChanged.bind(this), - style: { - width: 260, - marginTop: 12, - }, - }), - - // confirm password - h('input.large-input.letter-spacey', { - type: 'password', - id: 'password-box-confirm', - placeholder: 'Confirm Password', - onKeyPress: this.createVaultOnEnter.bind(this), - onInput: this.inputChanged.bind(this), - style: { - width: 260, - marginTop: 16, - }, - }), - - - h('button.primary', { - onClick: this.createNewVaultAndKeychain.bind(this), - style: { - margin: 12, - }, - }, 'Create'), - - h('.flex-row.flex-center.flex-grow', [ - h('p.pointer', { - onClick: this.showRestoreVault.bind(this), - style: { - fontSize: '0.8em', - color: 'rgb(247, 134, 28)', - textDecoration: 'underline', - }, - }, 'Import Existing DEN'), - ]), - ]) - ) -} + ]) + ) + } -InitializeMenuScreen.prototype.createVaultOnEnter = function (event) { - if (event.key === 'Enter') { - event.preventDefault() - this.createNewVaultAndKeychain() + createVaultOnEnter (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewVaultAndKeychain() + } } -} -InitializeMenuScreen.prototype.componentDidMount = function () { - document.getElementById('password-box').focus() + createNewVaultAndKeychain () { + const { history } = this.props + var passwordBox = document.getElementById('password-box') + var password = passwordBox.value + var passwordConfirmBox = document.getElementById('password-box-confirm') + var passwordConfirm = passwordConfirmBox.value + + this.setState({ warning: null }) + + if (password.length < 8) { + this.setState({ warning: 'password not long enough' }) + return + } + if (password !== passwordConfirm) { + this.setState({ warning: 'passwords don\'t match' }) + return + } + + this.props.createNewVaultAndKeychain(password) + .then(() => history.push(DEFAULT_ROUTE)) + } + + inputChanged (event) { + // tell mascot to look at page action + var element = event.target + var boundingRect = element.getBoundingClientRect() + var coordinates = getCaretCoordinates(element, element.selectionEnd) + this.animationEventEmitter.emit('point', { + x: boundingRect.left + coordinates.left - element.scrollLeft, + y: boundingRect.top + coordinates.top - element.scrollTop, + }) + } } -InitializeMenuScreen.prototype.showRestoreVault = function () { - this.props.dispatch(actions.showRestoreVault()) +InitializeMenuScreen.propTypes = { + history: PropTypes.object, + isInitialized: PropTypes.bool, + isUnlocked: PropTypes.bool, + createNewVaultAndKeychain: PropTypes.func, } -InitializeMenuScreen.prototype.createNewVaultAndKeychain = function () { - var passwordBox = document.getElementById('password-box') - var password = passwordBox.value - var passwordConfirmBox = document.getElementById('password-box-confirm') - var passwordConfirm = passwordConfirmBox.value +const mapStateToProps = state => { + const { metamask: { isInitialized, isUnlocked } } = state - if (password.length < 8) { - this.warning = 'password not long enough' - this.props.dispatch(actions.displayWarning(this.warning)) - return - } - if (password !== passwordConfirm) { - this.warning = 'passwords don\'t match' - this.props.dispatch(actions.displayWarning(this.warning)) - return + return { + isInitialized, + isUnlocked, } +} - if (!isSubmitting) { - isSubmitting = true - this.props.dispatch(actions.createNewVaultAndKeychain(password)) +const mapDispatchToProps = dispatch => { + return { + createNewVaultAndKeychain: password => dispatch(actions.createNewVaultAndKeychain(password)), } } -InitializeMenuScreen.prototype.inputChanged = function (event) { - // tell mascot to look at page action - var element = event.target - var boundingRect = element.getBoundingClientRect() - var coordinates = getCaretCoordinates(element, element.selectionEnd) - this.animationEventEmitter.emit('point', { - x: boundingRect.left + coordinates.left - element.scrollLeft, - y: boundingRect.top + coordinates.top - element.scrollTop, - }) -} +module.exports = connect(mapStateToProps, mapDispatchToProps)(InitializeMenuScreen) diff --git a/ui/app/keychains/hd/create-vault-complete.js b/ui/app/keychains/hd/create-vault-complete.js deleted file mode 100644 index 5ab5d4c33..000000000 --- a/ui/app/keychains/hd/create-vault-complete.js +++ /dev/null @@ -1,91 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const connect = require('react-redux').connect -const h = require('react-hyperscript') -const actions = require('../../actions') -const exportAsFile = require('../../util').exportAsFile - -module.exports = connect(mapStateToProps)(CreateVaultCompleteScreen) - -inherits(CreateVaultCompleteScreen, Component) -function CreateVaultCompleteScreen () { - Component.call(this) -} - -function mapStateToProps (state) { - return { - seed: state.appState.currentView.seedWords, - cachedSeed: state.metamask.seedWords, - } -} - -CreateVaultCompleteScreen.prototype.render = function () { - var state = this.props - var seed = state.seed || state.cachedSeed || '' - - return ( - - h('.initialize-screen.flex-column.flex-center.flex-grow', [ - - // // subtitle and nav - // h('.section-title.flex-row.flex-center', [ - // h('h2.page-subtitle', 'Vault Created'), - // ]), - - h('h3.flex-center.text-transform-uppercase', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - marginTop: 36, - marginBottom: 8, - width: '100%', - fontSize: '20px', - padding: 6, - }, - }, [ - 'Vault Created', - ]), - - h('div', { - style: { - fontSize: '1em', - marginTop: '10px', - textAlign: 'center', - }, - }, [ - h('span.error', 'These 12 words are the only way to restore your MetaMask accounts.\nSave them somewhere safe and secret.'), - ]), - - h('textarea.twelve-word-phrase', { - readOnly: true, - value: seed, - }), - - h('button.primary', { - onClick: () => this.confirmSeedWords() - .then(account => this.showAccountDetail(account)), - style: { - margin: '24px', - fontSize: '0.9em', - marginBottom: '10px', - }, - }, 'I\'ve copied it somewhere safe'), - - h('button.primary', { - onClick: () => exportAsFile(`MetaMask Seed Words`, seed), - style: { - margin: '10px', - fontSize: '0.9em', - }, - }, 'Save Seed Words As File'), - ]) - ) -} - -CreateVaultCompleteScreen.prototype.confirmSeedWords = function () { - return this.props.dispatch(actions.confirmSeedWords()) -} - -CreateVaultCompleteScreen.prototype.showAccountDetail = function (account) { - return this.props.dispatch(actions.showAccountDetail(account)) -} diff --git a/ui/app/keychains/hd/recover-seed/confirmation.js b/ui/app/keychains/hd/recover-seed/confirmation.js deleted file mode 100644 index 4335186a5..000000000 --- a/ui/app/keychains/hd/recover-seed/confirmation.js +++ /dev/null @@ -1,121 +0,0 @@ -const inherits = require('util').inherits - -const Component = require('react').Component -const connect = require('react-redux').connect -const h = require('react-hyperscript') -const actions = require('../../../actions') - -module.exports = connect(mapStateToProps)(RevealSeedConfirmation) - -inherits(RevealSeedConfirmation, Component) -function RevealSeedConfirmation () { - Component.call(this) -} - -function mapStateToProps (state) { - return { - warning: state.appState.warning, - } -} - -RevealSeedConfirmation.prototype.render = function () { - const props = this.props - - return ( - - h('.initialize-screen.flex-column.flex-center.flex-grow', { - style: { maxWidth: '420px' }, - }, [ - - h('h3.flex-center.text-transform-uppercase', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - marginBottom: 24, - width: '100%', - fontSize: '20px', - padding: 6, - }, - }, [ - 'Reveal Seed Words', - ]), - - h('.div', { - style: { - display: 'flex', - flexDirection: 'column', - padding: '20px', - justifyContent: 'center', - }, - }, [ - - h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'), - - // confirmation - h('input.large-input.letter-spacey', { - type: 'password', - id: 'password-box', - placeholder: 'Enter your password to confirm', - onKeyPress: this.checkConfirmation.bind(this), - style: { - width: 260, - marginTop: '12px', - }, - }), - - h('.flex-row.flex-start', { - style: { - marginTop: 30, - width: '50%', - }, - }, [ - // cancel - h('button.primary', { - onClick: this.goHome.bind(this), - }, 'CANCEL'), - - // submit - h('button.primary', { - style: { marginLeft: '10px' }, - onClick: this.revealSeedWords.bind(this), - }, 'OK'), - - ]), - - (props.warning) && ( - h('span.error', { - style: { - margin: '20px', - }, - }, props.warning.split('-')) - ), - - props.inProgress && ( - h('span.in-progress-notification', 'Generating Seed...') - ), - ]), - ]) - ) -} - -RevealSeedConfirmation.prototype.componentDidMount = function () { - document.getElementById('password-box').focus() -} - -RevealSeedConfirmation.prototype.goHome = function () { - this.props.dispatch(actions.showConfigPage(false)) -} - -// create vault - -RevealSeedConfirmation.prototype.checkConfirmation = function (event) { - if (event.key === 'Enter') { - event.preventDefault() - this.revealSeedWords() - } -} - -RevealSeedConfirmation.prototype.revealSeedWords = function () { - var password = document.getElementById('password-box').value - this.props.dispatch(actions.requestRevealSeed(password)) -} diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js deleted file mode 100644 index 06e51d9b3..000000000 --- a/ui/app/keychains/hd/restore-vault.js +++ /dev/null @@ -1,152 +0,0 @@ -const inherits = require('util').inherits -const PersistentForm = require('../../../lib/persistent-form') -const connect = require('react-redux').connect -const h = require('react-hyperscript') -const actions = require('../../actions') - -module.exports = connect(mapStateToProps)(RestoreVaultScreen) - -inherits(RestoreVaultScreen, PersistentForm) -function RestoreVaultScreen () { - PersistentForm.call(this) -} - -function mapStateToProps (state) { - return { - warning: state.appState.warning, - forgottenPassword: state.appState.forgottenPassword, - } -} - -RestoreVaultScreen.prototype.render = function () { - var state = this.props - this.persistentFormParentId = 'restore-vault-form' - - return ( - - h('.initialize-screen.flex-column.flex-center.flex-grow', [ - - h('h3.flex-center.text-transform-uppercase', { - style: { - background: '#EBEBEB', - color: '#AEAEAE', - marginBottom: 24, - width: '100%', - fontSize: '20px', - padding: 6, - }, - }, [ - 'Restore Vault', - ]), - - // wallet seed entry - h('h3', 'Wallet Seed'), - h('textarea.twelve-word-phrase.letter-spacey', { - dataset: { - persistentFormId: 'wallet-seed', - }, - placeholder: 'Enter your secret twelve word phrase here to restore your vault.', - }), - - // password - h('input.large-input.letter-spacey', { - type: 'password', - id: 'password-box', - placeholder: 'New Password (min 8 chars)', - dataset: { - persistentFormId: 'password', - }, - style: { - width: 260, - marginTop: 12, - }, - }), - - // confirm password - h('input.large-input.letter-spacey', { - type: 'password', - id: 'password-box-confirm', - placeholder: 'Confirm Password', - onKeyPress: this.createOnEnter.bind(this), - dataset: { - persistentFormId: 'password-confirmation', - }, - style: { - width: 260, - marginTop: 16, - }, - }), - - (state.warning) && ( - h('span.error.in-progress-notification', state.warning) - ), - - // submit - - h('.flex-row.flex-space-between', { - style: { - marginTop: 30, - width: '50%', - }, - }, [ - - // cancel - h('button.primary', { - onClick: this.showInitializeMenu.bind(this), - }, 'CANCEL'), - - // submit - h('button.primary', { - onClick: this.createNewVaultAndRestore.bind(this), - }, 'OK'), - - ]), - ]) - - ) -} - -RestoreVaultScreen.prototype.showInitializeMenu = function () { - if (this.props.forgottenPassword) { - this.props.dispatch(actions.backToUnlockView()) - } else { - this.props.dispatch(actions.showInitializeMenu()) - } -} - -RestoreVaultScreen.prototype.createOnEnter = function (event) { - if (event.key === 'Enter') { - this.createNewVaultAndRestore() - } -} - -RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { - // check password - var passwordBox = document.getElementById('password-box') - var password = passwordBox.value - var passwordConfirmBox = document.getElementById('password-box-confirm') - var passwordConfirm = passwordConfirmBox.value - if (password.length < 8) { - this.warning = 'Password not long enough' - - this.props.dispatch(actions.displayWarning(this.warning)) - return - } - if (password !== passwordConfirm) { - this.warning = 'Passwords don\'t match' - this.props.dispatch(actions.displayWarning(this.warning)) - return - } - // check seed - var seedBox = document.querySelector('textarea.twelve-word-phrase') - var seed = seedBox.value.trim() - if (seed.split(' ').length !== 12) { - this.warning = 'seed phrases are 12 words long' - this.props.dispatch(actions.displayWarning(this.warning)) - return - } - // submit - this.warning = null - this.props.dispatch(actions.displayWarning(this.warning)) - this.props.dispatch(actions.createNewVaultAndRestore(password, seed)) -} diff --git a/ui/app/main-container.js b/ui/app/main-container.js index 031f61e84..ad50ee13d 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -2,9 +2,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const AccountAndTransactionDetails = require('./account-and-transaction-details') -const HDRestoreVaultScreen = require('./keychains/hd/restore-vault') -const Settings = require('./settings') -const UnlockScreen = require('./unlock') +const UnlockScreen = require('./components/pages/unauthenticated/unlock') module.exports = MainContainer @@ -26,36 +24,6 @@ MainContainer.prototype.render = function () { style: {}, } - if (this.props.isUnlocked === false) { - switch (this.props.currentViewName) { - case 'restoreVault': - log.debug('rendering restore vault screen') - contents = { - component: HDRestoreVaultScreen, - key: 'HDRestoreVaultScreen', - } - break - case 'config': - log.debug('rendering config screen from unlock screen.') - return h(Settings, {key: 'config'}) - default: - log.debug('rendering locked screen') - contents = { - component: UnlockScreen, - style: { - boxShadow: 'none', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - background: '#F7F7F7', - // must force 100%, because lock screen is full-width - width: '100%', - }, - key: 'locked', - } - } - } - return h('div.main-container', { style: contents.style, }, [ diff --git a/ui/app/root.js b/ui/app/root.js index 21d6d1829..64f365c9e 100644 --- a/ui/app/root.js +++ b/ui/app/root.js @@ -1,22 +1,28 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const Provider = require('react-redux').Provider +const { Component } = require('react') +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') -module.exports = Root - -inherits(Root, Component) -function Root () { Component.call(this) } - -Root.prototype.render = function () { - return ( +class Root extends Component { + render () { + const { store } = this.props - h(Provider, { - store: this.props.store, - }, [ - h(SelectedApp), - ]) + return ( + h(Provider, { store }, [ + h(HashRouter, { + hashType: 'noslash', + }, [ + h(SelectedApp), + ]), + ]) + ) + } +} - ) +Root.propTypes = { + store: PropTypes.object, } + +module.exports = Root diff --git a/ui/app/routes.js b/ui/app/routes.js new file mode 100644 index 000000000..1305d6b1e --- /dev/null +++ b/ui/app/routes.js @@ -0,0 +1,27 @@ +const DEFAULT_ROUTE = '/' +const UNLOCK_ROUTE = '/unlock' +const SETTINGS_ROUTE = '/settings' +const INFO_ROUTE = '/settings/info' +const REVEAL_SEED_ROUTE = '/reveal-seed-confirm' +const RESTORE_VAULT_ROUTE = '/restore-vault' +const ADD_TOKEN_ROUTE = '/add-token' +const IMPORT_ACCOUNT_ROUTE = '/import-account' +const SEND_ROUTE = '/send' +const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction' +const INITIALIZE_MENU_ROUTE = '/initialize-menu' +const NOTICE_ROUTE = '/notice' + +module.exports = { + DEFAULT_ROUTE, + UNLOCK_ROUTE, + SETTINGS_ROUTE, + INFO_ROUTE, + REVEAL_SEED_ROUTE, + RESTORE_VAULT_ROUTE, + ADD_TOKEN_ROUTE, + IMPORT_ACCOUNT_ROUTE, + SEND_ROUTE, + CONFIRM_TRANSACTION_ROUTE, + INITIALIZE_MENU_ROUTE, + NOTICE_ROUTE, +} diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index e1b88f0db..32bbdfe6e 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -28,6 +28,7 @@ const { isTokenBalanceSufficient, } = require('./components/send/send-utils') const { isValidAddress } = require('./util') +const { CONFIRM_TRANSACTION_ROUTE } = require('./routes') module.exports = SendTransactionScreen @@ -508,9 +509,9 @@ SendTransactionScreen.prototype.renderForm = function () { SendTransactionScreen.prototype.renderFooter = function () { const { - goHome, clearSend, errors: { amount: amountError, to: toError }, + history, } = this.props const noErrors = !amountError && toError === null @@ -520,7 +521,7 @@ SendTransactionScreen.prototype.renderFooter = function () { h('button.send-v2__cancel-btn', { onClick: () => { clearSend() - goHome() + history.goBack() }, }, 'Cancel'), h(`button.send-v2__next-btn${errorClass}`, { @@ -555,7 +556,7 @@ SendTransactionScreen.prototype.addToAddressBookIfNew = function (newAddress) { SendTransactionScreen.prototype.onSubmit = function (event) { event.preventDefault() const { - from: {address: from}, + from: { address: from }, to, amount, gasLimit: gas, @@ -578,6 +579,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) { if (editingTransactionId) { backToConfirmScreen(editingTransactionId) + this.props.history.push(CONFIRM_TRANSACTION_ROUTE) return } @@ -596,4 +598,6 @@ SendTransactionScreen.prototype.onSubmit = function (event) { selectedToken ? signTokenTx(selectedToken.address, to, amount, txParams) : signTx(txParams) + + this.props.history.push(CONFIRM_TRANSACTION_ROUTE) } diff --git a/ui/app/settings.js b/ui/app/settings.js deleted file mode 100644 index ca7535d26..000000000 --- a/ui/app/settings.js +++ /dev/null @@ -1,410 +0,0 @@ -const { Component } = require('react') -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const { connect } = require('react-redux') -const actions = require('./actions') -const infuraCurrencies = require('./infura-conversion.json') -const validUrl = require('valid-url') -const { exportAsFile } = require('./util') -const TabBar = require('./components/tab-bar') -const SimpleDropdown = require('./components/dropdowns/simple-dropdown') -const ToggleButton = require('react-toggle-button') - -const getInfuraCurrencyOptions = () => { - const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { - return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase()) - }) - - return sortedCurrencies.map(({ quote: { code, name } }) => { - return { - displayValue: `${code.toUpperCase()} - ${name}`, - key: code, - value: code, - } - }) -} - -class Settings extends Component { - constructor (props) { - super(props) - - const { tab } = props - const activeTab = tab === 'info' ? 'info' : 'settings' - - this.state = { - activeTab, - newRpc: '', - } - } - - renderTabs () { - const { activeTab } = this.state - - return h('div.settings__tabs', [ - h(TabBar, { - tabs: [ - { content: 'Settings', key: 'settings' }, - { content: 'Info', key: 'info' }, - ], - defaultTab: activeTab, - tabSelected: key => this.setState({ activeTab: key }), - }), - ]) - } - - renderBlockieOptIn () { - const { metamask: { useBlockie }, setUseBlockie } = this.props - - return h('div.settings__content-row', [ - h('div.settings__content-item', [ - h('span', 'Use Blockies Identicon'), - ]), - h('div.settings__content-item', [ - h('div.settings__content-item-col', [ - h(ToggleButton, { - value: useBlockie, - onToggle: (value) => setUseBlockie(!value), - activeLabel: '', - inactiveLabel: '', - }), - ]), - ]), - ]) - } - - renderCurrentConversion () { - const { metamask: { currentCurrency, conversionDate }, setCurrentCurrency } = this.props - - return h('div.settings__content-row', [ - h('div.settings__content-item', [ - h('span', 'Current Conversion'), - h('span.settings__content-description', `Updated ${Date(conversionDate)}`), - ]), - h('div.settings__content-item', [ - h('div.settings__content-item-col', [ - h(SimpleDropdown, { - placeholder: 'Select Currency', - options: getInfuraCurrencyOptions(), - selectedOption: currentCurrency, - onSelect: newCurrency => setCurrentCurrency(newCurrency), - }), - ]), - ]), - ]) - } - - renderCurrentProvider () { - const { metamask: { provider = {} } } = this.props - let title, value, color - - switch (provider.type) { - - case 'mainnet': - title = 'Current Network' - value = 'Main Ethereum Network' - color = '#038789' - break - - case 'ropsten': - title = 'Current Network' - value = 'Ropsten Test Network' - color = '#e91550' - break - - case 'kovan': - title = 'Current Network' - value = 'Kovan Test Network' - color = '#690496' - break - - case 'rinkeby': - title = 'Current Network' - value = 'Rinkeby Test Network' - color = '#ebb33f' - break - - default: - title = 'Current RPC' - value = provider.rpcTarget - } - - return h('div.settings__content-row', [ - h('div.settings__content-item', title), - h('div.settings__content-item', [ - h('div.settings__content-item-col', [ - h('div.settings__provider-wrapper', [ - h('div.settings__provider-icon', { style: { background: color } }), - h('div', value), - ]), - ]), - ]), - ]) - } - - renderNewRpcUrl () { - return ( - h('div.settings__content-row', [ - h('div.settings__content-item', [ - h('span', 'New RPC URL'), - ]), - h('div.settings__content-item', [ - h('div.settings__content-item-col', [ - h('input.settings__input', { - placeholder: 'New RPC URL', - onChange: event => this.setState({ newRpc: event.target.value }), - onKeyPress: event => { - if (event.key === 'Enter') { - this.validateRpc(this.state.newRpc) - } - }, - }), - h('div.settings__rpc-save-button', { - onClick: event => { - event.preventDefault() - this.validateRpc(this.state.newRpc) - }, - }, 'Save'), - ]), - ]), - ]) - ) - } - - validateRpc (newRpc) { - const { setRpcTarget, displayWarning } = this.props - - if (validUrl.isWebUri(newRpc)) { - setRpcTarget(newRpc) - } else { - const appendedRpc = `http://${newRpc}` - - if (validUrl.isWebUri(appendedRpc)) { - displayWarning('URIs require the appropriate HTTP/HTTPS prefix.') - } else { - displayWarning('Invalid RPC URI') - } - } - } - - renderStateLogs () { - return ( - h('div.settings__content-row', [ - h('div.settings__content-item', [ - h('div', 'State Logs'), - h( - 'div.settings__content-description', - 'State logs contain your public account addresses and sent transactions.' - ), - ]), - h('div.settings__content-item', [ - h('div.settings__content-item-col', [ - h('button.settings__clear-button', { - onClick (event) { - exportAsFile('MetaMask State Logs', window.logState()) - }, - }, 'Download State Logs'), - ]), - ]), - ]) - ) - } - - renderSeedWords () { - const { revealSeedConfirmation } = this.props - - return ( - h('div.settings__content-row', [ - h('div.settings__content-item', 'Reveal Seed Words'), - h('div.settings__content-item', [ - h('div.settings__content-item-col', [ - h('button.settings__clear-button.settings__clear-button--red', { - onClick (event) { - event.preventDefault() - revealSeedConfirmation() - }, - }, 'Reveal Seed Words'), - ]), - ]), - ]) - ) - } - - 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 - - return ( - h('div.settings__content', [ - warning && h('div.settings__error', warning), - this.renderBlockieOptIn(), - this.renderCurrentConversion(), - // this.renderCurrentProvider(), - this.renderNewRpcUrl(), - this.renderStateLogs(), - this.renderSeedWords(), - this.renderOldUI(), - ]) - ) - } - - renderLogo () { - return ( - h('div.settings__info-logo-wrapper', [ - h('img.settings__info-logo', { src: 'images/info-logo.png' }), - ]) - ) - } - - renderInfoLinks () { - return ( - h('div.settings__content-item.settings__content-item--without-height', [ - h('div.settings__info-link-header', 'Links'), - h('div.settings__info-link-item', [ - h('a', { - href: 'https://metamask.io/privacy.html', - target: '_blank', - }, [ - h('span.settings__info-link', 'Privacy Policy'), - ]), - ]), - h('div.settings__info-link-item', [ - h('a', { - href: 'https://metamask.io/terms.html', - target: '_blank', - }, [ - h('span.settings__info-link', 'Terms of Use'), - ]), - ]), - h('div.settings__info-link-item', [ - h('a', { - href: 'https://metamask.io/attributions.html', - target: '_blank', - }, [ - h('span.settings__info-link', 'Attributions'), - ]), - ]), - h('hr.settings__info-separator'), - h('div.settings__info-link-item', [ - h('a', { - href: 'https://support.metamask.io', - target: '_blank', - }, [ - h('span.settings__info-link', 'Visit our Support Center'), - ]), - ]), - h('div.settings__info-link-item', [ - h('a', { - href: 'https://metamask.io/', - target: '_blank', - }, [ - h('span.settings__info-link', 'Visit our web site'), - ]), - ]), - h('div.settings__info-link-item', [ - h('a', { - target: '_blank', - href: 'mailto:help@metamask.io?subject=Feedback', - }, [ - h('span.settings__info-link', 'Email us!'), - ]), - ]), - ]) - ) - } - - renderInfoContent () { - return ( - h('div.settings__content', [ - h('div.settings__content-row', [ - h('div.settings__content-item.settings__content-item--without-height', [ - this.renderLogo(), - h('div.settings__info-item', [ - h('div.settings__info-version-header', 'MetaMask Version'), - h('div.settings__info-version-number', '4.0.0'), - ]), - h('div.settings__info-item', [ - h( - 'div.settings__info-about', - 'MetaMask is designed and built in California.' - ), - ]), - ]), - this.renderInfoLinks(), - ]), - ]) - ) - } - - render () { - const { goHome } = this.props - const { activeTab } = this.state - - return ( - h('.main-container.settings', {}, [ - h('.settings__header', [ - h('div.settings__close-button', { - onClick: goHome, - }), - this.renderTabs(), - ]), - - activeTab === 'settings' - ? this.renderSettingsContent() - : this.renderInfoContent(), - ]) - ) - } -} - -Settings.propTypes = { - tab: PropTypes.string, - metamask: PropTypes.object, - setUseBlockie: PropTypes.func, - setCurrentCurrency: PropTypes.func, - setRpcTarget: PropTypes.func, - displayWarning: PropTypes.func, - revealSeedConfirmation: PropTypes.func, - setFeatureFlagToBeta: PropTypes.func, - warning: PropTypes.string, - goHome: PropTypes.func, -} - -const mapStateToProps = state => { - return { - metamask: state.metamask, - warning: state.appState.warning, - } -} - -const mapDispatchToProps = dispatch => { - return { - goHome: () => dispatch(actions.goHome()), - setCurrentCurrency: currency => dispatch(actions.setCurrentCurrency(currency)), - setRpcTarget: newRpc => dispatch(actions.setRpcTarget(newRpc)), - displayWarning: warning => dispatch(actions.displayWarning(warning)), - revealSeedConfirmation: () => dispatch(actions.revealSeedConfirmation()), - setUseBlockie: value => dispatch(actions.setUseBlockie(value)), - setFeatureFlagToBeta: () => dispatch(actions.setFeatureFlag('betaUI', false)), - } -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(Settings) diff --git a/ui/app/unlock.js b/ui/app/unlock.js deleted file mode 100644 index ec97b03bf..000000000 --- a/ui/app/unlock.js +++ /dev/null @@ -1,122 +0,0 @@ -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 getCaretCoordinates = require('textarea-caret') -const EventEmitter = require('events').EventEmitter - -const Mascot = require('./components/mascot') - -module.exports = connect(mapStateToProps)(UnlockScreen) - -inherits(UnlockScreen, Component) -function UnlockScreen () { - Component.call(this) - this.animationEventEmitter = new EventEmitter() -} - -function mapStateToProps (state) { - return { - warning: state.appState.warning, - } -} - -UnlockScreen.prototype.render = function () { - const state = this.props - const warning = state.warning - return ( - h('.flex-column', { - style: { - width: 'inherit', - }, - }, [ - h('.unlock-screen.flex-column.flex-center.flex-grow', [ - - h(Mascot, { - animationEventEmitter: this.animationEventEmitter, - }), - - h('h1', { - style: { - fontSize: '1.4em', - textTransform: 'uppercase', - color: '#7F8082', - }, - }, 'MetaMask'), - - h('input.large-input', { - type: 'password', - id: 'password-box', - placeholder: 'enter password', - style: { - background: 'white', - }, - onKeyPress: this.onKeyPress.bind(this), - onInput: this.inputChanged.bind(this), - }), - - h('.error', { - style: { - display: warning ? 'block' : 'none', - padding: '0 20px', - textAlign: 'center', - }, - }, warning), - - h('button.primary.cursor-pointer', { - onClick: this.onSubmit.bind(this), - style: { - margin: 10, - }, - }, 'Unlock'), - ]), - - h('.flex-row.flex-center.flex-grow', [ - h('p.pointer', { - onClick: () => this.props.dispatch(actions.forgotPassword()), - style: { - fontSize: '0.8em', - color: 'rgb(247, 134, 28)', - textDecoration: 'underline', - }, - }, 'Restore from seed phrase'), - ]), - ]) - ) -} - -UnlockScreen.prototype.componentDidMount = function () { - document.getElementById('password-box').focus() -} - -UnlockScreen.prototype.onSubmit = function (event) { - const input = document.getElementById('password-box') - const password = input.value - this.props.dispatch(actions.tryUnlockMetamask(password)) -} - -UnlockScreen.prototype.onKeyPress = function (event) { - if (event.key === 'Enter') { - this.submitPassword(event) - } -} - -UnlockScreen.prototype.submitPassword = function (event) { - var element = event.target - var password = element.value - // reset input - element.value = '' - this.props.dispatch(actions.tryUnlockMetamask(password)) -} - -UnlockScreen.prototype.inputChanged = function (event) { - // tell mascot to look at page action - var element = event.target - var boundingRect = element.getBoundingClientRect() - var coordinates = getCaretCoordinates(element, element.selectionEnd) - this.animationEventEmitter.emit('point', { - x: boundingRect.left + coordinates.left - element.scrollLeft, - y: boundingRect.top + coordinates.top - element.scrollTop, - }) -} diff --git a/yarn.lock b/yarn.lock index 9a455caa7..1bc847b99 100644 --- a/yarn.lock +++ b/yarn.lock @@ -20,8 +20,13 @@ through2 "^2.0.3" "@types/node@*": +<<<<<<< HEAD version "8.0.58" resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.58.tgz#5b3881c0be3a646874803fee3197ea7f1ed6df90" +======= + version "8.0.53" + resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.53.tgz#396b35af826fa66aad472c8cb7b8d5e277f4e6d8" +>>>>>>> Add react-router to allow use of the browser back button "@types/node@^6.0.46": version "6.0.88" @@ -3155,6 +3160,7 @@ envify@^4.0.0: enzyme-adapter-react-15@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/enzyme-adapter-react-15/-/enzyme-adapter-react-15-1.0.5.tgz#99f9a03ff2c2303e517342935798a6bdfbb75fac" +<<<<<<< HEAD dependencies: enzyme-adapter-utils "^1.1.0" lodash "^4.17.4" @@ -3166,6 +3172,19 @@ enzyme-adapter-utils@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.2.0.tgz#7f4471ee0a70b91169ec8860d2bf0a6b551664b2" dependencies: +======= + dependencies: + enzyme-adapter-utils "^1.1.0" + lodash "^4.17.4" + object.assign "^4.0.4" + object.values "^1.0.4" + prop-types "^15.5.10" + +enzyme-adapter-utils@^1.1.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.2.0.tgz#7f4471ee0a70b91169ec8860d2bf0a6b551664b2" + dependencies: +>>>>>>> Add react-router to allow use of the browser back button lodash "^4.17.4" object.assign "^4.0.4" prop-types "^15.5.10" @@ -3813,11 +3832,19 @@ ethjs-query@^0.2.4, ethjs-query@^0.2.6, ethjs-query@^0.2.9: ethjs-rpc "0.1.5" ethjs-query@^0.3.1: +<<<<<<< HEAD version "0.3.2" resolved "https://registry.yarnpkg.com/ethjs-query/-/ethjs-query-0.3.2.tgz#f488a48ce1994cd4c77eccb7b52902c6f29cfd85" dependencies: ethjs-format "0.2.4" ethjs-rpc "0.1.8" +======= + version "0.3.1" + resolved "https://registry.yarnpkg.com/ethjs-query/-/ethjs-query-0.3.1.tgz#aed5b60bdb7e73ad831d1218c8b067310013b86f" + dependencies: + ethjs-format "0.2.4" + ethjs-rpc "0.1.5" +>>>>>>> Add react-router to allow use of the browser back button ethjs-rpc@0.1.5: version "0.1.5" @@ -5044,6 +5071,16 @@ he@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/he/-/he-1.1.1.tgz#93410fd21b009735151f8868c2f271f3427e23fd" +history@^4.7.2: + version "4.7.2" + resolved "https://registry.yarnpkg.com/history/-/history-4.7.2.tgz#22b5c7f31633c5b8021c7f4a8a954ac139ee8d5b" + dependencies: + invariant "^2.2.1" + loose-envify "^1.2.0" + resolve-pathname "^2.2.0" + value-equal "^0.4.0" + warning "^3.0.0" + hmac-drbg@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1" @@ -5060,7 +5097,7 @@ hoist-non-react-statics@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" -hoist-non-react-statics@^2.2.1: +hoist-non-react-statics@^2.2.1, hoist-non-react-statics@^2.3.0: version "2.3.1" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0" @@ -5316,7 +5353,7 @@ interpret@^1.0.0: version "1.0.4" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.0.4.tgz#820cdd588b868ffb191a809506d6c9c8f212b1b0" -invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.2: +invariant@^2.0.0, invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.2.tgz#9e1f56ac0acdb6bf303306f338be3b204ae60360" dependencies: @@ -6435,7 +6472,7 @@ longest@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097" -loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1: +loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.2.0, loose-envify@^1.3.1: version "1.3.1" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.3.1.tgz#d1a8ad33fa9ce0e713d65fdd0ac8b748d478c848" dependencies: @@ -7919,7 +7956,11 @@ prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8: fbjs "^0.8.9" loose-envify "^1.3.1" +<<<<<<< HEAD prop-types@^15.5.7, prop-types@^15.6.0: +======= +prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.6.0: +>>>>>>> Add react-router to allow use of the browser back button version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -8197,6 +8238,14 @@ react-motion@^0.5.2: prop-types "^15.5.8" raf "^3.1.0" +react-motion@^0.5.2: + version "0.5.2" + resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316" + dependencies: + performance-now "^0.2.0" + prop-types "^15.5.8" + raf "^3.1.0" + react-redux@^5.0.5: version "5.0.6" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.6.tgz#23ed3a4f986359d68b5212eaaa681e60d6574946" @@ -8208,6 +8257,32 @@ react-redux@^5.0.5: loose-envify "^1.1.0" prop-types "^15.5.10" +<<<<<<< HEAD +======= +react-router-dom@^4.2.2: + version "4.2.2" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d" + dependencies: + history "^4.7.2" + invariant "^2.2.2" + loose-envify "^1.3.1" + prop-types "^15.5.4" + react-router "^4.2.0" + warning "^3.0.0" + +react-router@^4.2.0: + version "4.2.0" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-4.2.0.tgz#61f7b3e3770daeb24062dae3eedef1b054155986" + dependencies: + history "^4.7.2" + hoist-non-react-statics "^2.3.0" + invariant "^2.2.2" + loose-envify "^1.3.1" + path-to-regexp "^1.7.0" + prop-types "^15.5.4" + warning "^3.0.0" + +>>>>>>> Add react-router to allow use of the browser back button react-select@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.1.0.tgz#626a2de839fdea2ade74dd1b143a9bde34be6c82" @@ -8668,6 +8743,10 @@ resolve-from@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748" +resolve-pathname@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" + resolve-url@~0.2.1: version "0.2.1" resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -10287,6 +10366,10 @@ validate-npm-package-license@^3.0.1: spdx-correct "~1.0.0" spdx-expression-parse "~1.0.0" +value-equal@^0.4.0: + version "0.4.0" + resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" + varint@^4.0.0: version "4.0.1" resolved "https://registry.yarnpkg.com/varint/-/varint-4.0.1.tgz#490829b942d248463b2b35097995c3bf737198e9" -- cgit From dde39e82b5723ba8056b73f0f823d40c3e702a99 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 01:24:30 -0500 Subject: Add routes for mascara --- mascara/src/app/first-time/backup-phrase-screen.js | 79 ++++++----- .../src/app/first-time/create-password-screen.js | 144 +++++++++++---------- mascara/src/app/first-time/index.css | 5 +- mascara/src/app/first-time/notice-screen.js | 87 +++++++------ ui/app/app.js | 48 +++++-- ui/app/components/account-menu/index.js | 22 +--- ui/app/components/pages/authenticated.js | 16 +-- ui/app/components/pages/keychains/reveal-seed.js | 5 +- ui/app/components/pages/metamask-route.js | 28 ++++ ui/app/components/pages/notice.js | 16 --- ui/app/components/pages/unauthenticated/index.js | 38 ++++++ ui/app/first-time/init-menu.js | 2 +- ui/app/routes.js | 4 +- 13 files changed, 296 insertions(+), 198 deletions(-) create mode 100644 ui/app/components/pages/metamask-route.js create mode 100644 ui/app/components/pages/unauthenticated/index.js diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js index c68dacea2..266a82cdb 100644 --- a/mascara/src/app/first-time/backup-phrase-screen.js +++ b/mascara/src/app/first-time/backup-phrase-screen.js @@ -1,5 +1,6 @@ -import React, {Component, PropTypes} from 'react' -import {connect} from 'react-redux'; +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import {connect} from 'react-redux' import classnames from 'classnames' import shuffle from 'lodash.shuffle' import {compose, onlyUpdateForPropTypes} from 'recompose' @@ -7,6 +8,7 @@ import Identicon from '../../../../ui/app/components/identicon' import {confirmSeedWords} from '../../../../ui/app/actions' import Breadcrumbs from './breadcrumbs' import LoadingScreen from './loading-screen' +import { DEFAULT_ROUTE } from '../../../../ui/app/routes' const LockIcon = props => ( ( /> -); +) class BackupPhraseScreen extends Component { static propTypes = { isLoading: PropTypes.bool.isRequired, address: PropTypes.string.isRequired, - seedWords: PropTypes.string.isRequired, - next: PropTypes.func.isRequired, + seedWords: PropTypes.string, confirmSeedWords: PropTypes.func.isRequired, + history: PropTypes.object, }; static defaultProps = { - seedWords: '' - }; + seedWords: '', + } static PAGE = { SECRET: 'secret', - CONFIRM: 'confirm' - }; + CONFIRM: 'confirm', + } - constructor(props) { + constructor (props) { const {seedWords} = props super(props) this.state = { @@ -66,13 +68,20 @@ class BackupPhraseScreen extends Component { } } + componentWillMount () { + const { seedWords, history } = this.props + if (!seedWords) { + history.push(DEFAULT_ROUTE) + } + } + renderSecretWordsContainer () { const { isShowingSecret } = this.state return (
{this.props.seedWords}
@@ -88,10 +97,10 @@ class BackupPhraseScreen extends Component {
)} - ); + ) } - renderSecretScreen() { + renderSecretScreen () { const { isShowingSecret } = this.state return ( @@ -109,7 +118,7 @@ class BackupPhraseScreen extends Component { className="first-time-flow__button" onClick={() => isShowingSecret && this.setState({ isShowingSecret: false, - page: BackupPhraseScreen.PAGE.CONFIRM + page: BackupPhraseScreen.PAGE.CONFIRM, })} disabled={!isShowingSecret} > @@ -133,9 +142,9 @@ class BackupPhraseScreen extends Component { ) } - renderConfirmationScreen() { - const { seedWords, confirmSeedWords, next } = this.props; - const { selectedSeeds, shuffledSeeds } = this.state; + renderConfirmationScreen () { + const { seedWords, confirmSeedWords, history } = this.props + const { selectedSeeds, shuffledSeeds } = this.state const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') return ( @@ -165,17 +174,17 @@ class BackupPhraseScreen extends Component { - ) + ) } renderBack () { @@ -205,7 +214,7 @@ class BackupPhraseScreen extends Component { onClick={e => { e.preventDefault() this.setState({ - page: BackupPhraseScreen.PAGE.SECRET + page: BackupPhraseScreen.PAGE.SECRET, }) }} href="#" @@ -227,15 +236,21 @@ class BackupPhraseScreen extends Component { } render () { - return this.props.isLoading - ? - : ( -
- {this.renderBack()} - - {this.renderContent()} -
- ) + return ( +
+ { + this.props.isLoading + ? + : ( +
+ {this.renderBack()} + + {this.renderContent()} +
+ ) + } +
+ ) } } diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 2f4b81e7c..102d8a7c3 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,103 +1,109 @@ -import React, {Component, PropTypes} from 'react' -import {connect} from 'react-redux'; -import {createNewVaultAndKeychain} from '../../../../ui/app/actions' +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import {connect} from 'react-redux' +import { createNewVaultAndKeychain } from '../../../../ui/app/actions' import LoadingScreen from './loading-screen' import Breadcrumbs from './breadcrumbs' +import { DEFAULT_ROUTE, IMPORT_ACCOUNT_ROUTE } from '../../../../ui/app/routes' class CreatePasswordScreen extends Component { static propTypes = { isLoading: PropTypes.bool.isRequired, createAccount: PropTypes.func.isRequired, - goToImportWithSeedPhrase: PropTypes.func.isRequired, - goToImportAccount: PropTypes.func.isRequired, - next: PropTypes.func.isRequired + history: PropTypes.object.isRequired, } state = { password: '', - confirmPassword: '' + confirmPassword: '', } - isValid() { - const {password, confirmPassword} = this.state; + isValid () { + const { password, confirmPassword } = this.state if (!password || !confirmPassword) { - return false; + return false } if (password.length < 8) { - return false; + return false } - return password === confirmPassword; + return password === confirmPassword } createAccount = () => { if (!this.isValid()) { - return; + return } - const {password} = this.state; - const {createAccount, next} = this.props; + const { password } = this.state + const { createAccount, history } = this.props createAccount(password) - .then(next); + .then(() => history.push(DEFAULT_ROUTE)) } - render() { - const { isLoading, goToImportAccount, goToImportWithSeedPhrase } = this.props + render () { + const { isLoading } = this.props - return isLoading - ? - : ( -
-
- Create Password -
- this.setState({password: e.target.value})} - /> - this.setState({confirmPassword: e.target.value})} - /> - - { - e.preventDefault() - goToImportWithSeedPhrase() - }} - > - Import with seed phrase - - { /* } - { - e.preventDefault() - goToImportAccount() - }} - > - Import an account - - { */ } - -
- ) + return ( +
+ { + isLoading + ? + : ( +
+
+ Create Password +
+ this.setState({password: e.target.value})} + /> + this.setState({confirmPassword: e.target.value})} + /> + + { + e.preventDefault() + history.push(IMPORT_ACCOUNT_ROUTE) + }} + > + Import with seed phrase + + { /* } + { + e.preventDefault() + goToImportAccount() + }} + > + Import an account + + { */ } + +
+ ) + } +
+ ) } } diff --git a/mascara/src/app/first-time/index.css b/mascara/src/app/first-time/index.css index 28aa3060a..157989d07 100644 --- a/mascara/src/app/first-time/index.css +++ b/mascara/src/app/first-time/index.css @@ -75,7 +75,7 @@ .backup-phrase__tips { margin: 40px 0 !important; - width: initial !important; + width: initial !important; } .backup-phrase__confirm-secret, @@ -337,7 +337,7 @@ button.backup-phrase__confirm-seed-option:hover { padding: 14px 21px; appearance: none; -webkit-appearance: none; - -moz-appearance: none; + -moz-appearance: none; cursor: pointer; } @@ -540,6 +540,7 @@ button.backup-phrase__confirm-seed-option:hover { text-transform: uppercase; margin: 35px 0 14px; transition: 200ms ease-in-out; + background: #f7861c; } button.first-time-flow__button[disabled] { diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js index d09070a95..be54b9fc0 100644 --- a/mascara/src/app/first-time/notice-screen.js +++ b/mascara/src/app/first-time/notice-screen.js @@ -1,10 +1,12 @@ -import React, {Component, PropTypes} from 'react' +import React, { Component } from 'react' +import PropTypes from 'prop-types' import Markdown from 'react-markdown' -import {connect} from 'react-redux' +import { connect } from 'react-redux' import debounce from 'lodash.debounce' -import {markNoticeRead} from '../../../../ui/app/actions' +import { markNoticeRead } from '../../../../ui/app/actions' import Identicon from '../../../../ui/app/components/identicon' import Breadcrumbs from './breadcrumbs' +import { DEFAULT_ROUTE } from '../../../../ui/app/routes' class NoticeScreen extends Component { static propTypes = { @@ -12,70 +14,77 @@ class NoticeScreen extends Component { lastUnreadNotice: PropTypes.shape({ title: PropTypes.string, date: PropTypes.string, - body: PropTypes.string + body: PropTypes.string, }), - next: PropTypes.func.isRequired + location: PropTypes.shape({ + state: PropTypes.shape({ + next: PropTypes.func.isRequired, + }), + }), + markNoticeRead: PropTypes.func, + history: PropTypes.object, }; static defaultProps = { - lastUnreadNotice: {} + lastUnreadNotice: {}, }; state = { atBottom: false, } - componentDidMount() { + componentDidMount () { this.onScroll() } acceptTerms = () => { - const { markNoticeRead, lastUnreadNotice, next } = this.props; - const defer = markNoticeRead(lastUnreadNotice) - .then(() => this.setState({ atBottom: false })) - - if ((/terms/gi).test(lastUnreadNotice.title)) { - defer.then(next) - } + const { markNoticeRead, lastUnreadNotice, history } = this.props + markNoticeRead(lastUnreadNotice) + .then(() => { + history.push(DEFAULT_ROUTE) + this.setState({ atBottom: false }) + }) } onScroll = debounce(() => { if (this.state.atBottom) return const target = document.querySelector('.tou__body') - const {scrollTop, offsetHeight, scrollHeight} = target; - const atBottom = scrollTop + offsetHeight >= scrollHeight; + const {scrollTop, offsetHeight, scrollHeight} = target + const atBottom = scrollTop + offsetHeight >= scrollHeight this.setState({atBottom: atBottom}) }, 25) - render() { + render () { const { address, - lastUnreadNotice: { title, body } - } = this.props; + lastUnreadNotice: { title, body }, + } = this.props const { atBottom } = this.state return ( -
- -
{title}
- - - + +
{title}
+ + + +
) } @@ -84,9 +93,9 @@ class NoticeScreen extends Component { export default connect( ({ metamask: { selectedAddress, lastUnreadNotice } }) => ({ lastUnreadNotice, - address: selectedAddress + address: selectedAddress, }), dispatch => ({ - markNoticeRead: notice => dispatch(markNoticeRead(notice)) + markNoticeRead: notice => dispatch(markNoticeRead(notice)), }) )(NoticeScreen) diff --git a/ui/app/app.js b/ui/app/app.js index 168ec6559..68384f30d 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -5,8 +5,10 @@ const { compose } = require('recompose') const h = require('react-hyperscript') const actions = require('./actions') // mascara -const MascaraFirstTime = require('../../mascara/src/app/first-time').default +const MascaraCreatePassword = require('../../mascara/src/app/first-time/create-password-screen').default const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default +const MascaraNoticeScreen = require('../../mascara/src/app/first-time/notice-screen').default +const MascaraBackupPhraseScreen = require('../../mascara/src/app/first-time/backup-phrase-screen').default // init const InitializeMenuScreen = require('./first-time/init-menu') const NewKeyChainScreen = require('./new-keychain') @@ -22,6 +24,8 @@ const WalletView = require('./components/wallet-view') // other views const Authenticated = require('./components/pages/authenticated') +const Unauthenticated = require('./components/pages/unauthenticated') +const MetamaskRoute = require('./components/pages/metamask-route') const Settings = require('./components/pages/settings') const UnlockPage = require('./components/pages/unauthenticated/unlock') const RestoreVaultPage = require('./components/pages/keychains/restore-vault') @@ -53,7 +57,7 @@ const { IMPORT_ACCOUNT_ROUTE, SEND_ROUTE, CONFIRM_TRANSACTION_ROUTE, - INITIALIZE_MENU_ROUTE, + INITIALIZE_ROUTE, NOTICE_ROUTE, } = require('./routes') @@ -65,7 +69,7 @@ class App extends Component { } componentWillMount () { - const { currentCurrency, setCurrentCurrency } = this.props + const { currentCurrency, setCurrentCurrencyToUSD } = this.props if (!currentCurrency) { setCurrentCurrencyToUSD() @@ -77,14 +81,29 @@ class App extends Component { return ( h(Switch, [ - h(Route, { path: INITIALIZE_MENU_ROUTE, exact, component: InitializeMenuScreen }), - h(Route, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), - h(Route, { path: SETTINGS_ROUTE, component: Settings }), - h(Route, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), - h(Route, { path: NOTICE_ROUTE, exact, component: NoticeScreen }), + h(MetamaskRoute, { + path: INITIALIZE_ROUTE, + exact, + component: InitializeMenuScreen, + mascaraComponent: MascaraCreatePassword, + }), + h(MetamaskRoute, { + path: REVEAL_SEED_ROUTE, + exact, + component: RevealSeedPage, + mascaraComponent: MascaraBackupPhraseScreen, + }), + h(Unauthenticated, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), + h(Unauthenticated, { path: SETTINGS_ROUTE, component: Settings }), + h(Unauthenticated, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), + h(Unauthenticated, { + path: NOTICE_ROUTE, + exact, + component: NoticeScreen, + mascaraComponent: MascaraNoticeScreen, + }), h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }), h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }), - h(Authenticated, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedPage }), h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }), h(Authenticated, { path: IMPORT_ACCOUNT_ROUTE, exact, component: ImportAccountPage }), h(Authenticated, { path: DEFAULT_ROUTE, exact, component: this.renderPrimary }), @@ -327,10 +346,17 @@ class App extends Component { currentView, activeAddress, unapprovedTxs = {}, + seedWords, } = this.props - if (isMascara && isOnboarding) { - return h(MascaraFirstTime) + // seed words + if (seedWords) { + log.debug('rendering seed words') + return h(Redirect, { + to: { + pathname: REVEAL_SEED_ROUTE, + }, + }) } // notices diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index 0965cba38..0d3b43ae9 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -8,7 +8,7 @@ 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 } = require('../../routes') +const { SETTINGS_ROUTE, INFO_ROUTE, IMPORT_ACCOUNT_ROUTE, DEFAULT_ROUTE } = require('../../routes') module.exports = compose( withRouter, @@ -40,22 +40,10 @@ function mapDispatchToProps (dispatch) { dispatch(actions.displayWarning(null)) dispatch(actions.toggleAccountMenu()) }, - showConfigPage: () => { - dispatch(actions.showConfigPage()) - dispatch(actions.toggleAccountMenu()) - }, showNewAccountModal: () => { dispatch(actions.showModal({ name: 'NEW_ACCOUNT' })) dispatch(actions.toggleAccountMenu()) }, - showImportPage: () => { - dispatch(actions.showImportPage()) - dispatch(actions.toggleAccountMenu()) - }, - showInfoPage: () => { - dispatch(actions.showInfoPage()) - dispatch(actions.toggleAccountMenu()) - }, } } @@ -64,10 +52,7 @@ AccountMenu.prototype.render = function () { isAccountMenuOpen, toggleAccountMenu, showNewAccountModal, - showImportPage, lockMetamask, - showConfigPage, - showInfoPage, history, } = this.props @@ -78,7 +63,10 @@ AccountMenu.prototype.render = function () { }, [ 'My Accounts', h('button.account-menu__logout-button', { - onClick: lockMetamask, + onClick: () => { + lockMetamask() + history.push(DEFAULT_ROUTE) + }, }, 'Log out'), ]), h(Divider), diff --git a/ui/app/components/pages/authenticated.js b/ui/app/components/pages/authenticated.js index 78f3a4225..89bd238d2 100644 --- a/ui/app/components/pages/authenticated.js +++ b/ui/app/components/pages/authenticated.js @@ -1,26 +1,26 @@ const { connect } = require('react-redux') const PropTypes = require('prop-types') -const { Redirect, Route } = require('react-router-dom') +const { Redirect } = require('react-router-dom') const h = require('react-hyperscript') -const { UNLOCK_ROUTE, INITIALIZE_MENU_ROUTE } = require('../../routes') +const MetamaskRoute = require('./metamask-route') +const { UNLOCK_ROUTE, INITIALIZE_ROUTE } = require('../../routes') const Authenticated = ({ component: Component, isUnlocked, isInitialized, ...props }) => { - - const render = props => { + const component = renderProps => { switch (true) { case isUnlocked: - return h(Component, { ...props }) + return h(Component, { ...renderProps }) case !isInitialized: - return h(Redirect, { to: { pathname: INITIALIZE_MENU_ROUTE } }) + return h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) default: return h(Redirect, { to: { pathname: UNLOCK_ROUTE } }) } } return ( - h(Route, { + h(MetamaskRoute, { ...props, - render, + component, }) ) } diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js index dc2cfc23e..029eb7d8e 100644 --- a/ui/app/components/pages/keychains/reveal-seed.js +++ b/ui/app/components/pages/keychains/reveal-seed.js @@ -8,7 +8,10 @@ const { DEFAULT_ROUTE } = require('../../../routes') class RevealSeedPage extends Component { componentDidMount () { - document.getElementById('password-box').focus() + const passwordBox = document.getElementById('password-box') + if (passwordBox) { + passwordBox.focus() + } } checkConfirmation (event) { diff --git a/ui/app/components/pages/metamask-route.js b/ui/app/components/pages/metamask-route.js new file mode 100644 index 000000000..23c5b5199 --- /dev/null +++ b/ui/app/components/pages/metamask-route.js @@ -0,0 +1,28 @@ +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const { Route } = require('react-router-dom') +const h = require('react-hyperscript') + +const MetamaskRoute = ({ component, mascaraComponent, isMascara, ...props }) => { + return ( + h(Route, { + ...props, + component: isMascara && mascaraComponent ? mascaraComponent : component, + }) + ) +} + +MetamaskRoute.propTypes = { + component: PropTypes.func, + mascaraComponent: PropTypes.func, + isMascara: PropTypes.bool, +} + +const mapStateToProps = state => { + const { metamask: { isMascara } } = state + return { + isMascara, + } +} + +module.exports = connect(mapStateToProps)(MetamaskRoute) diff --git a/ui/app/components/pages/notice.js b/ui/app/components/pages/notice.js index 8e68cd52b..2329a9147 100644 --- a/ui/app/components/pages/notice.js +++ b/ui/app/components/pages/notice.js @@ -53,7 +53,6 @@ class Notice extends Component { render () { const { notice = {} } = this.props const { title, date, body } = notice - // const state = this.state || { disclaimerDisabled: true } const { disclaimerDisabled } = this.state return ( @@ -156,21 +155,6 @@ class Notice extends Component { const mapStateToProps = state => { const { metamask } = state const { noActiveNotices, lastUnreadNotice, lostAccounts } = metamask - // if (!props.noActiveNotices) { - // log.debug('rendering notice screen for unread notices.') - // return h(NoticeScreen, { - // notice: props.lastUnreadNotice, - // key: 'NoticeScreen', - // onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), - // }) - // } else if (props.lostAccounts && props.lostAccounts.length > 0) { - // log.debug('rendering notice screen for lost accounts view.') - // return h(NoticeScreen, { - // notice: generateLostAccountsNotice(props.lostAccounts), - // key: 'LostAccountsNotice', - // onConfirm: () => props.dispatch(actions.markAccountsFound()), - // }) - // } return { noActiveNotices, diff --git a/ui/app/components/pages/unauthenticated/index.js b/ui/app/components/pages/unauthenticated/index.js new file mode 100644 index 000000000..f8b5fa172 --- /dev/null +++ b/ui/app/components/pages/unauthenticated/index.js @@ -0,0 +1,38 @@ +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const { Redirect } = require('react-router-dom') +const h = require('react-hyperscript') +const { INITIALIZE_ROUTE } = require('../../../routes') +const MetamaskRoute = require('../metamask-route') + +const Unauthenticated = ({ component: Component, isInitialized, ...props }) => { + const component = renderProps => { + return isInitialized + ? h(Component, { ...renderProps }) + : h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) + } + + return ( + h(MetamaskRoute, { + ...props, + component, + }) + ) +} + +Unauthenticated.propTypes = { + component: PropTypes.func, + isInitialized: PropTypes.bool, + isMascara: PropTypes.bool, + mascaraComponent: PropTypes.func, +} + +const mapStateToProps = state => { + const { metamask: { isInitialized, isMascara } } = state + return { + isInitialized, + isMascara, + } +} + +module.exports = connect(mapStateToProps)(Unauthenticated) diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index 6832f5ddf..addcedc77 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -35,7 +35,7 @@ class InitializeMenuScreen extends Component { const { warning } = this.state return ( - h('.initialize-screen.flex-column.flex-center.flex-grow', [ + h('.initialize-screen.flex-column.flex-center', [ h(Mascot, { animationEventEmitter: this.animationEventEmitter, diff --git a/ui/app/routes.js b/ui/app/routes.js index 1305d6b1e..72be616a7 100644 --- a/ui/app/routes.js +++ b/ui/app/routes.js @@ -8,7 +8,7 @@ const ADD_TOKEN_ROUTE = '/add-token' const IMPORT_ACCOUNT_ROUTE = '/import-account' const SEND_ROUTE = '/send' const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction' -const INITIALIZE_MENU_ROUTE = '/initialize-menu' +const INITIALIZE_ROUTE = '/initialize' const NOTICE_ROUTE = '/notice' module.exports = { @@ -22,6 +22,6 @@ module.exports = { IMPORT_ACCOUNT_ROUTE, SEND_ROUTE, CONFIRM_TRANSACTION_ROUTE, - INITIALIZE_MENU_ROUTE, + INITIALIZE_ROUTE, NOTICE_ROUTE, } -- cgit From ec5e0a711cac3d35afcb1ecf5881f11adb4b3a06 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 03:06:09 -0500 Subject: Fix lint errors --- ui/app/app.js | 54 ++++++++++++++++++++++++++++++++-------- ui/app/components/tx-list.js | 2 +- ui/app/components/wallet-view.js | 1 - ui/app/main-container.js | 1 - 4 files changed, 44 insertions(+), 14 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index 68384f30d..3f6795386 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -1,6 +1,7 @@ const { Component } = require('react') +const PropTypes = require('prop-types') const { connect } = require('react-redux') -const { Switch, Route, Redirect, withRouter } = require('react-router-dom') +const { Switch, Redirect, withRouter } = require('react-router-dom') const { compose } = require('recompose') const h = require('react-hyperscript') const actions = require('./actions') @@ -16,8 +17,6 @@ const NewKeyChainScreen = require('./new-keychain') const MainContainer = require('./main-container') const SendTransactionScreen2 = require('./components/send/send-v2-container') const ConfirmTxScreen = require('./conf-tx') -// notice -const generateLostAccountsNotice = require('../lib/lost-accounts-notice') // slideout menu const WalletView = require('./components/wallet-view') @@ -112,9 +111,15 @@ class App extends Component { } render () { - var props = this.props - const { isLoading, loadingMessage, network } = props - const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' + const { + isLoading, + loadingMessage, + network, + provider, + frequentRpcList, + currentView, + } = this.props + const isLoadingNetwork = network === 'loading' && currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? `Connecting to ${this.getNetworkName()}` : null log.debug('Main ui render function') @@ -139,8 +144,8 @@ class App extends Component { // network dropdown h(NetworkDropdown, { - provider: this.props.provider, - frequentRpcList: this.props.frequentRpcList, + provider, + frequentRpcList, }, []), h(AccountMenu), @@ -153,7 +158,6 @@ class App extends Component { // content this.renderRoutes(), - // this.renderPrimary(), ]) ) } @@ -337,8 +341,6 @@ class App extends Component { renderPrimary () { log.debug('rendering primary') const { - isMascara, - isOnboarding, noActiveNotices, lostAccounts, isInitialized, @@ -558,6 +560,36 @@ class App extends Component { } } +App.propTypes = { + currentCurrency: PropTypes.string, + setCurrentCurrencyToUSD: PropTypes.func, + isLoading: PropTypes.bool, + loadingMessage: PropTypes.string, + network: PropTypes.string, + provider: PropTypes.object, + frequentRpcList: PropTypes.array, + currentView: PropTypes.object, + sidebarOpen: PropTypes.bool, + hideSidebar: PropTypes.func, + isMascara: PropTypes.bool, + isOnboarding: PropTypes.bool, + isUnlocked: PropTypes.bool, + networkDropdownOpen: PropTypes.bool, + showNetworkDropdown: PropTypes.func, + hideNetworkDropdown: PropTypes.func, + history: PropTypes.object, + dispatch: PropTypes.func, + toggleAccountMenu: PropTypes.func, + selectedAddress: PropTypes.string, + noActiveNotices: PropTypes.bool, + lostAccounts: PropTypes.array, + isInitialized: PropTypes.bool, + forgottenPassword: PropTypes.bool, + activeAddress: PropTypes.string, + unapprovedTxs: PropTypes.object, + seedWords: PropTypes.string, +} + function mapStateToProps (state) { const { appState, metamask } = state const { diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 6f18ea814..2c4c3dd31 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -94,7 +94,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionHash, transactionNetworkId, } = props - const { showConfTxPage, history } = this.props + const { history } = this.props const opts = { key: transActionId || transactionHash, diff --git a/ui/app/components/wallet-view.js b/ui/app/components/wallet-view.js index 3b4443ef6..72ffc5d65 100644 --- a/ui/app/components/wallet-view.js +++ b/ui/app/components/wallet-view.js @@ -94,7 +94,6 @@ WalletView.prototype.render = function () { keyrings, showAccountDetailModal, hideSidebar, - showAddTokenPage, history, } = this.props // temporary logs + fake extra wallets diff --git a/ui/app/main-container.js b/ui/app/main-container.js index ad50ee13d..fabf4e563 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -2,7 +2,6 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits const AccountAndTransactionDetails = require('./account-and-transaction-details') -const UnlockScreen = require('./components/pages/unauthenticated/unlock') module.exports = MainContainer -- cgit From d9ea2df6c2a2cabedead09f90c3c9bb7b4c37dd1 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 14:29:52 -0500 Subject: Add route for Mascara confirm seed --- mascara/src/app/first-time/backup-phrase-screen.js | 269 --------------------- mascara/src/app/first-time/confirm-seed-screen.js | 133 ++++++++++ mascara/src/app/first-time/seed-screen.js | 158 ++++++++++++ ui/app/app.js | 11 +- ui/app/routes.js | 4 +- 5 files changed, 303 insertions(+), 272 deletions(-) delete mode 100644 mascara/src/app/first-time/backup-phrase-screen.js create mode 100644 mascara/src/app/first-time/confirm-seed-screen.js create mode 100644 mascara/src/app/first-time/seed-screen.js diff --git a/mascara/src/app/first-time/backup-phrase-screen.js b/mascara/src/app/first-time/backup-phrase-screen.js deleted file mode 100644 index 266a82cdb..000000000 --- a/mascara/src/app/first-time/backup-phrase-screen.js +++ /dev/null @@ -1,269 +0,0 @@ -import React, { Component } from 'react' -import PropTypes from 'prop-types' -import {connect} from 'react-redux' -import classnames from 'classnames' -import shuffle from 'lodash.shuffle' -import {compose, onlyUpdateForPropTypes} from 'recompose' -import Identicon from '../../../../ui/app/components/identicon' -import {confirmSeedWords} from '../../../../ui/app/actions' -import Breadcrumbs from './breadcrumbs' -import LoadingScreen from './loading-screen' -import { DEFAULT_ROUTE } from '../../../../ui/app/routes' - -const LockIcon = props => ( - - - - - -) - -class BackupPhraseScreen extends Component { - static propTypes = { - isLoading: PropTypes.bool.isRequired, - address: PropTypes.string.isRequired, - seedWords: PropTypes.string, - confirmSeedWords: PropTypes.func.isRequired, - history: PropTypes.object, - }; - - static defaultProps = { - seedWords: '', - } - - static PAGE = { - SECRET: 'secret', - CONFIRM: 'confirm', - } - - constructor (props) { - const {seedWords} = props - super(props) - this.state = { - isShowingSecret: false, - page: BackupPhraseScreen.PAGE.SECRET, - selectedSeeds: [], - shuffledSeeds: seedWords && shuffle(seedWords.split(' ')), - } - } - - componentWillMount () { - const { seedWords, history } = this.props - if (!seedWords) { - history.push(DEFAULT_ROUTE) - } - } - - renderSecretWordsContainer () { - const { isShowingSecret } = this.state - - return ( -
-
- {this.props.seedWords} -
- {!isShowingSecret && ( -
- - -
- )} -
- ) - } - - renderSecretScreen () { - const { isShowingSecret } = this.state - - return ( -
-
-
Secret Backup Phrase
-
- Your secret backup phrase makes it easy to back up and restore your account. -
-
- WARNING: Never disclose your backup phrase. Anyone with this phrase can take your Ether forever. -
- {this.renderSecretWordsContainer()} - - -
-
-
Tips:
-
- Store this phrase in a password manager like 1password. -
-
- Write this phrase on a piece of paper and store in a secure location. If you want even more security, write it down on multiple pieces of paper and store each in 2 - 3 different locations. -
-
- Memorize this phrase. -
-
-
- ) - } - - renderConfirmationScreen () { - const { seedWords, confirmSeedWords, history } = this.props - const { selectedSeeds, shuffledSeeds } = this.state - const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') - - return ( -
-
-
Confirm your Secret Backup Phrase
-
- Please select each phrase in order to make sure it is correct. -
-
- {selectedSeeds.map(([_, word], i) => ( - - ))} -
-
- {shuffledSeeds.map((word, i) => { - const isSelected = selectedSeeds - .filter(([index, seed]) => seed === word && index === i) - .length - - return ( - - ) - })} -
- -
-
- ) - } - - renderBack () { - return this.state.page === BackupPhraseScreen.PAGE.CONFIRM - ? ( - { - e.preventDefault() - this.setState({ - page: BackupPhraseScreen.PAGE.SECRET, - }) - }} - href="#" - > - {`< Back`} - - ) - : null - } - - renderContent () { - switch (this.state.page) { - case BackupPhraseScreen.PAGE.CONFIRM: - return this.renderConfirmationScreen() - case BackupPhraseScreen.PAGE.SECRET: - default: - return this.renderSecretScreen() - } - } - - render () { - return ( -
- { - this.props.isLoading - ? - : ( -
- {this.renderBack()} - - {this.renderContent()} -
- ) - } -
- ) - } -} - -export default compose( - onlyUpdateForPropTypes, - connect( - ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ - seedWords, - isLoading, - address: selectedAddress, - }), - dispatch => ({ - confirmSeedWords: () => dispatch(confirmSeedWords()), - }) - ) -)(BackupPhraseScreen) diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js new file mode 100644 index 000000000..6b730a2f8 --- /dev/null +++ b/mascara/src/app/first-time/confirm-seed-screen.js @@ -0,0 +1,133 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { connect } from 'react-redux' +import classnames from 'classnames' +import shuffle from 'lodash.shuffle' +import { compose, onlyUpdateForPropTypes } from 'recompose' +import Identicon from '../../../../ui/app/components/identicon' +import { confirmSeedWords } from '../../../../ui/app/actions' +import Breadcrumbs from './breadcrumbs' +import LoadingScreen from './loading-screen' +import { DEFAULT_ROUTE } from '../../../../ui/app/routes' + +class ConfirmSeedScreen extends Component { + static propTypes = { + isLoading: PropTypes.bool.isRequired, + address: PropTypes.string.isRequired, + seedWords: PropTypes.string, + confirmSeedWords: PropTypes.func.isRequired, + history: PropTypes.object, + }; + + static defaultProps = { + seedWords: '', + } + + constructor (props) { + super(props) + const { seedWords } = props + this.state = { + selectedSeeds: [], + shuffledSeeds: seedWords && shuffle(seedWords.split(' ')), + } + } + + componentWillMount () { + const { seedWords, history } = this.props + if (!seedWords) { + history.push(DEFAULT_ROUTE) + } + } + + render () { + const { seedWords, confirmSeedWords, history } = this.props + const { selectedSeeds, shuffledSeeds } = this.state + const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') + + return ( +
+ { + this.props.isLoading + ? + : ( +
+ +
+
+
+ Confirm your Secret Backup Phrase +
+
+ Please select each phrase in order to make sure it is correct. +
+
+ {selectedSeeds.map(([_, word], i) => ( + + ))} +
+
+ {shuffledSeeds.map((word, i) => { + const isSelected = selectedSeeds + .filter(([index, seed]) => seed === word && index === i) + .length + + return ( + + ) + })} +
+ +
+
+ +
+ ) + } +
+ ) + } +} + +export default compose( + onlyUpdateForPropTypes, + connect( + ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ + seedWords, + isLoading, + address: selectedAddress, + }), + dispatch => ({ + confirmSeedWords: () => dispatch(confirmSeedWords()), + }) + ) +)(ConfirmSeedScreen) diff --git a/mascara/src/app/first-time/seed-screen.js b/mascara/src/app/first-time/seed-screen.js new file mode 100644 index 000000000..dc1da851c --- /dev/null +++ b/mascara/src/app/first-time/seed-screen.js @@ -0,0 +1,158 @@ +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import { connect } from 'react-redux' +import classnames from 'classnames' +import { compose, onlyUpdateForPropTypes } from 'recompose' +import Identicon from '../../../../ui/app/components/identicon' +import Breadcrumbs from './breadcrumbs' +import LoadingScreen from './loading-screen' +import { DEFAULT_ROUTE, CONFIRM_SEED_ROUTE } from '../../../../ui/app/routes' + +const LockIcon = props => ( + + + + + +) + +class BackupPhraseScreen extends Component { + static propTypes = { + isLoading: PropTypes.bool.isRequired, + address: PropTypes.string.isRequired, + seedWords: PropTypes.string, + history: PropTypes.object, + }; + + static defaultProps = { + seedWords: '', + } + + constructor (props) { + super(props) + this.state = { + isShowingSecret: false, + } + } + + componentWillMount () { + const { seedWords, history } = this.props + if (!seedWords) { + history.push(DEFAULT_ROUTE) + } + } + + renderSecretWordsContainer () { + const { isShowingSecret } = this.state + + return ( +
+
+ {this.props.seedWords} +
+ {!isShowingSecret && ( +
+ + +
+ )} +
+ ) + } + + renderSecretScreen () { + const { isShowingSecret } = this.state + const { history } = this.props + + return ( +
+
+
Secret Backup Phrase
+
+ Your secret backup phrase makes it easy to back up and restore your account. +
+
+ WARNING: Never disclose your backup phrase. Anyone with this phrase can take your Ether forever. +
+ {this.renderSecretWordsContainer()} + + +
+
+
Tips:
+
+ Store this phrase in a password manager like 1password. +
+
+ Write this phrase on a piece of paper and store in a secure location. If you want even more security, write it down on multiple pieces of paper and store each in 2 - 3 different locations. +
+
+ Memorize this phrase. +
+
+
+ ) + } + + render () { + return ( +
+ { + this.props.isLoading + ? + : ( +
+ + {this.renderSecretScreen()} +
+ ) + } +
+ ) + } +} + +export default compose( + onlyUpdateForPropTypes, + connect( + ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ + seedWords, + isLoading, + address: selectedAddress, + }) + ) +)(BackupPhraseScreen) diff --git a/ui/app/app.js b/ui/app/app.js index 3f6795386..8c3cfee2f 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -9,7 +9,8 @@ const actions = require('./actions') const MascaraCreatePassword = require('../../mascara/src/app/first-time/create-password-screen').default const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default const MascaraNoticeScreen = require('../../mascara/src/app/first-time/notice-screen').default -const MascaraBackupPhraseScreen = require('../../mascara/src/app/first-time/backup-phrase-screen').default +const MascaraSeedScreen = require('../../mascara/src/app/first-time/seed-screen').default +const MascaraConfirmSeedScreen = require('../../mascara/src/app/first-time/confirm-seed-screen').default // init const InitializeMenuScreen = require('./first-time/init-menu') const NewKeyChainScreen = require('./new-keychain') @@ -51,6 +52,7 @@ const { UNLOCK_ROUTE, SETTINGS_ROUTE, REVEAL_SEED_ROUTE, + CONFIRM_SEED_ROUTE, RESTORE_VAULT_ROUTE, ADD_TOKEN_ROUTE, IMPORT_ACCOUNT_ROUTE, @@ -90,7 +92,12 @@ class App extends Component { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedPage, - mascaraComponent: MascaraBackupPhraseScreen, + mascaraComponent: MascaraSeedScreen, + }), + h(MetamaskRoute, { + path: CONFIRM_SEED_ROUTE, + exact, + mascaraComponent: MascaraConfirmSeedScreen, }), h(Unauthenticated, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), h(Unauthenticated, { path: SETTINGS_ROUTE, component: Settings }), diff --git a/ui/app/routes.js b/ui/app/routes.js index 72be616a7..de96eb3f5 100644 --- a/ui/app/routes.js +++ b/ui/app/routes.js @@ -2,7 +2,8 @@ const DEFAULT_ROUTE = '/' const UNLOCK_ROUTE = '/unlock' const SETTINGS_ROUTE = '/settings' const INFO_ROUTE = '/settings/info' -const REVEAL_SEED_ROUTE = '/reveal-seed-confirm' +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' @@ -17,6 +18,7 @@ module.exports = { SETTINGS_ROUTE, INFO_ROUTE, REVEAL_SEED_ROUTE, + CONFIRM_SEED_ROUTE, RESTORE_VAULT_ROUTE, ADD_TOKEN_ROUTE, IMPORT_ACCOUNT_ROUTE, -- cgit From 706a6b0ad6d7b6e2d56252f17713e63430d84abc Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 15:13:02 -0500 Subject: Add initialized checks for first time flow routes --- mascara/src/app/first-time/confirm-seed-screen.js | 8 +- ui/app/app.js | 16 +- ui/app/components/pages/authenticated.js | 28 ++-- ui/app/components/pages/initialized.js | 25 ++++ ui/app/components/pages/unauthenticated/index.js | 38 ----- ui/app/components/pages/unauthenticated/unlock.js | 172 ---------------------- ui/app/components/pages/unlock.js | 170 +++++++++++++++++++++ 7 files changed, 217 insertions(+), 240 deletions(-) create mode 100644 ui/app/components/pages/initialized.js delete mode 100644 ui/app/components/pages/unauthenticated/index.js delete mode 100644 ui/app/components/pages/unauthenticated/unlock.js create mode 100644 ui/app/components/pages/unlock.js diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js index 6b730a2f8..c9382689e 100644 --- a/mascara/src/app/first-time/confirm-seed-screen.js +++ b/mascara/src/app/first-time/confirm-seed-screen.js @@ -12,10 +12,10 @@ import { DEFAULT_ROUTE } from '../../../../ui/app/routes' class ConfirmSeedScreen extends Component { static propTypes = { - isLoading: PropTypes.bool.isRequired, - address: PropTypes.string.isRequired, + isLoading: PropTypes.bool, + address: PropTypes.string, seedWords: PropTypes.string, - confirmSeedWords: PropTypes.func.isRequired, + confirmSeedWords: PropTypes.func, history: PropTypes.object, }; @@ -28,7 +28,7 @@ class ConfirmSeedScreen extends Component { const { seedWords } = props this.state = { selectedSeeds: [], - shuffledSeeds: seedWords && shuffle(seedWords.split(' ')), + shuffledSeeds: seedWords && shuffle(seedWords.split(' ')) || [], } } diff --git a/ui/app/app.js b/ui/app/app.js index 8c3cfee2f..6717b3d67 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -24,10 +24,10 @@ const WalletView = require('./components/wallet-view') // other views const Authenticated = require('./components/pages/authenticated') -const Unauthenticated = require('./components/pages/unauthenticated') +const Initialized = require('./components/pages/initialized') const MetamaskRoute = require('./components/pages/metamask-route') const Settings = require('./components/pages/settings') -const UnlockPage = require('./components/pages/unauthenticated/unlock') +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') @@ -88,21 +88,21 @@ class App extends Component { component: InitializeMenuScreen, mascaraComponent: MascaraCreatePassword, }), - h(MetamaskRoute, { + h(Initialized, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedPage, mascaraComponent: MascaraSeedScreen, }), - h(MetamaskRoute, { + h(Initialized, { path: CONFIRM_SEED_ROUTE, exact, mascaraComponent: MascaraConfirmSeedScreen, }), - h(Unauthenticated, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), - h(Unauthenticated, { path: SETTINGS_ROUTE, component: Settings }), - h(Unauthenticated, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), - h(Unauthenticated, { + h(Initialized, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), + h(Initialized, { path: SETTINGS_ROUTE, component: Settings }), + h(Initialized, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), + h(Initialized, { path: NOTICE_ROUTE, exact, component: NoticeScreen, diff --git a/ui/app/components/pages/authenticated.js b/ui/app/components/pages/authenticated.js index 89bd238d2..1f6b0be49 100644 --- a/ui/app/components/pages/authenticated.js +++ b/ui/app/components/pages/authenticated.js @@ -5,28 +5,20 @@ const h = require('react-hyperscript') const MetamaskRoute = require('./metamask-route') const { UNLOCK_ROUTE, INITIALIZE_ROUTE } = require('../../routes') -const Authenticated = ({ component: Component, isUnlocked, isInitialized, ...props }) => { - const component = renderProps => { - switch (true) { - case isUnlocked: - return h(Component, { ...renderProps }) - case !isInitialized: - return h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) - default: - return h(Redirect, { to: { pathname: UNLOCK_ROUTE } }) - } - } +const Authenticated = props => { + const { isUnlocked, isInitialized } = props - return ( - h(MetamaskRoute, { - ...props, - component, - }) - ) + switch (true) { + case isUnlocked && isInitialized: + return h(MetamaskRoute, { ...props }) + case !isInitialized: + return h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) + default: + return h(Redirect, { to: { pathname: UNLOCK_ROUTE } }) + } } Authenticated.propTypes = { - component: PropTypes.func, isUnlocked: PropTypes.bool, isInitialized: PropTypes.bool, } diff --git a/ui/app/components/pages/initialized.js b/ui/app/components/pages/initialized.js new file mode 100644 index 000000000..3adf67b28 --- /dev/null +++ b/ui/app/components/pages/initialized.js @@ -0,0 +1,25 @@ +const { connect } = require('react-redux') +const PropTypes = require('prop-types') +const { Redirect } = require('react-router-dom') +const h = require('react-hyperscript') +const { INITIALIZE_ROUTE } = require('../../routes') +const MetamaskRoute = require('./metamask-route') + +const Initialized = props => { + return props.isInitialized + ? h(MetamaskRoute, { ...props }) + : h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) +} + +Initialized.propTypes = { + isInitialized: PropTypes.bool, +} + +const mapStateToProps = state => { + const { metamask: { isInitialized } } = state + return { + isInitialized, + } +} + +module.exports = connect(mapStateToProps)(Initialized) diff --git a/ui/app/components/pages/unauthenticated/index.js b/ui/app/components/pages/unauthenticated/index.js deleted file mode 100644 index f8b5fa172..000000000 --- a/ui/app/components/pages/unauthenticated/index.js +++ /dev/null @@ -1,38 +0,0 @@ -const { connect } = require('react-redux') -const PropTypes = require('prop-types') -const { Redirect } = require('react-router-dom') -const h = require('react-hyperscript') -const { INITIALIZE_ROUTE } = require('../../../routes') -const MetamaskRoute = require('../metamask-route') - -const Unauthenticated = ({ component: Component, isInitialized, ...props }) => { - const component = renderProps => { - return isInitialized - ? h(Component, { ...renderProps }) - : h(Redirect, { to: { pathname: INITIALIZE_ROUTE } }) - } - - return ( - h(MetamaskRoute, { - ...props, - component, - }) - ) -} - -Unauthenticated.propTypes = { - component: PropTypes.func, - isInitialized: PropTypes.bool, - isMascara: PropTypes.bool, - mascaraComponent: PropTypes.func, -} - -const mapStateToProps = state => { - const { metamask: { isInitialized, isMascara } } = state - return { - isInitialized, - isMascara, - } -} - -module.exports = connect(mapStateToProps)(Unauthenticated) diff --git a/ui/app/components/pages/unauthenticated/unlock.js b/ui/app/components/pages/unauthenticated/unlock.js deleted file mode 100644 index 72f27c11d..000000000 --- a/ui/app/components/pages/unauthenticated/unlock.js +++ /dev/null @@ -1,172 +0,0 @@ -const { Component } = require('react') -const PropTypes = require('prop-types') -const { connect } = require('react-redux') -const h = require('react-hyperscript') -const { Redirect, withRouter } = require('react-router-dom') -const { compose } = require('recompose') -const { tryUnlockMetamask, forgotPassword } = require('../../../actions') -const getCaretCoordinates = require('textarea-caret') -const EventEmitter = require('events').EventEmitter -const Mascot = require('../../mascot') -const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../../routes') - -class UnlockScreen extends Component { - constructor (props) { - super(props) - - this.state = { - error: null, - } - - this.animationEventEmitter = new EventEmitter() - } - - componentDidMount () { - const passwordBox = document.getElementById('password-box') - - if (passwordBox) { - passwordBox.focus() - } - } - - tryUnlockMetamask (password) { - const { tryUnlockMetamask, history } = this.props - tryUnlockMetamask(password) - .then(() => history.push(DEFAULT_ROUTE)) - .catch(({ message }) => this.setState({ error: message })) - } - - onSubmit (event) { - const input = document.getElementById('password-box') - const password = input.value - this.tryUnlockMetamask(password) - } - - onKeyPress (event) { - if (event.key === 'Enter') { - this.submitPassword(event) - } - } - - submitPassword (event) { - var element = event.target - var password = element.value - // reset input - element.value = '' - this.tryUnlockMetamask(password) - } - - inputChanged (event) { - // tell mascot to look at page action - var element = event.target - var boundingRect = element.getBoundingClientRect() - var coordinates = getCaretCoordinates(element, element.selectionEnd) - this.animationEventEmitter.emit('point', { - x: boundingRect.left + coordinates.left - element.scrollLeft, - y: boundingRect.top + coordinates.top - element.scrollTop, - }) - } - - render () { - const { error } = this.state - const { isUnlocked, history } = this.props - - if (isUnlocked) { - return ( - h(Redirect, { - to: { - pathname: DEFAULT_ROUTE, - }, - }) - ) - } - - return ( - h('.unlock-page.main-container', [ - h('.flex-column', { - style: { - width: 'inherit', - }, - }, [ - h('.unlock-screen.flex-column.flex-center.flex-grow', [ - - h(Mascot, { - animationEventEmitter: this.animationEventEmitter, - }), - - h('h1', { - style: { - fontSize: '1.4em', - textTransform: 'uppercase', - color: '#7F8082', - }, - }, 'MetaMask'), - - h('input.large-input', { - type: 'password', - id: 'password-box', - placeholder: 'enter password', - style: { - background: 'white', - }, - onKeyPress: this.onKeyPress.bind(this), - onInput: this.inputChanged.bind(this), - }), - - h('.error', { - style: { - display: error ? 'block' : 'none', - padding: '0 20px', - textAlign: 'center', - }, - }, error), - - h('button.primary.cursor-pointer', { - onClick: this.onSubmit.bind(this), - style: { - margin: 10, - }, - }, 'Unlock'), - - h('.flex-row.flex-center.flex-grow', [ - h('p.pointer', { - onClick: () => history.push(RESTORE_VAULT_ROUTE), - style: { - fontSize: '0.8em', - color: 'rgb(247, 134, 28)', - textDecoration: 'underline', - }, - }, 'Restore from seed phrase'), - ]), - ]), - ]), - ]) - ) - } -} - -UnlockScreen.propTypes = { - forgotPassword: PropTypes.func, - tryUnlockMetamask: PropTypes.func, - history: PropTypes.object, - isUnlocked: PropTypes.bool, -} - -const mapStateToProps = state => { - const { metamask: { isUnlocked } } = state - return { - isUnlocked, - } -} - -const mapDispatchToProps = dispatch => { - return { - forgotPassword: () => dispatch(forgotPassword()), - tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)), - } -} - -module.exports = compose( - withRouter, - connect(mapStateToProps, mapDispatchToProps) -)(UnlockScreen) diff --git a/ui/app/components/pages/unlock.js b/ui/app/components/pages/unlock.js new file mode 100644 index 000000000..27e093a29 --- /dev/null +++ b/ui/app/components/pages/unlock.js @@ -0,0 +1,170 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const { connect } = require('react-redux') +const h = require('react-hyperscript') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') +const { tryUnlockMetamask, forgotPassword } = require('../../actions') +const getCaretCoordinates = require('textarea-caret') +const EventEmitter = require('events').EventEmitter +const Mascot = require('../mascot') +const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../routes') + +class UnlockScreen extends Component { + constructor (props) { + super(props) + + this.state = { + error: null, + } + + this.animationEventEmitter = new EventEmitter() + } + + componentWillMount () { + const { isUnlocked, history } = this.props + + if (isUnlocked) { + history.push(DEFAULT_ROUTE) + } + } + + componentDidMount () { + const passwordBox = document.getElementById('password-box') + + if (passwordBox) { + passwordBox.focus() + } + } + + tryUnlockMetamask (password) { + const { tryUnlockMetamask, history } = this.props + tryUnlockMetamask(password) + .then(() => history.push(DEFAULT_ROUTE)) + .catch(({ message }) => this.setState({ error: message })) + } + + onSubmit (event) { + const input = document.getElementById('password-box') + const password = input.value + this.tryUnlockMetamask(password) + } + + onKeyPress (event) { + if (event.key === 'Enter') { + this.submitPassword(event) + } + } + + submitPassword (event) { + var element = event.target + var password = element.value + // reset input + element.value = '' + this.tryUnlockMetamask(password) + } + + inputChanged (event) { + // tell mascot to look at page action + var element = event.target + var boundingRect = element.getBoundingClientRect() + var coordinates = getCaretCoordinates(element, element.selectionEnd) + this.animationEventEmitter.emit('point', { + x: boundingRect.left + coordinates.left - element.scrollLeft, + y: boundingRect.top + coordinates.top - element.scrollTop, + }) + } + + render () { + const { error } = this.state + const { history } = this.props + + return ( + h('.unlock-page.main-container', [ + h('.flex-column', { + style: { + width: 'inherit', + }, + }, [ + h('.unlock-screen.flex-column.flex-center.flex-grow', [ + + h(Mascot, { + animationEventEmitter: this.animationEventEmitter, + }), + + h('h1', { + style: { + fontSize: '1.4em', + textTransform: 'uppercase', + color: '#7F8082', + }, + }, 'MetaMask'), + + h('input.large-input', { + type: 'password', + id: 'password-box', + placeholder: 'enter password', + style: { + background: 'white', + }, + onKeyPress: this.onKeyPress.bind(this), + onInput: this.inputChanged.bind(this), + }), + + h('.error', { + style: { + display: error ? 'block' : 'none', + padding: '0 20px', + textAlign: 'center', + }, + }, error), + + h('button.primary.cursor-pointer', { + onClick: this.onSubmit.bind(this), + style: { + margin: 10, + }, + }, 'Unlock'), + + h('.flex-row.flex-center.flex-grow', [ + h('p.pointer', { + onClick: () => history.push(RESTORE_VAULT_ROUTE), + style: { + fontSize: '0.8em', + color: 'rgb(247, 134, 28)', + textDecoration: 'underline', + }, + }, 'Restore from seed phrase'), + ]), + ]), + ]), + ]) + ) + } +} + +UnlockScreen.propTypes = { + forgotPassword: PropTypes.func, + tryUnlockMetamask: PropTypes.func, + history: PropTypes.object, + isUnlocked: PropTypes.bool, +} + +const mapStateToProps = state => { + const { metamask: { isUnlocked } } = state + return { + isUnlocked, + } +} + +const mapDispatchToProps = dispatch => { + return { + forgotPassword: () => dispatch(forgotPassword()), + tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)), + } +} + +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(UnlockScreen) -- cgit From 5d1187c37bfee988d7384f189f228882ce847005 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 4 Dec 2017 22:27:42 -0500 Subject: Add route for signature request --- ui/app/actions.js | 131 ++++++++--- ui/app/app.js | 25 ++- ui/app/components/pages/signature-request.js | 321 +++++++++++++++++++++++++++ ui/app/components/signature-request.js | 253 --------------------- ui/app/conf-tx.js | 27 +-- ui/app/routes.js | 2 + 6 files changed, 454 insertions(+), 305 deletions(-) create mode 100644 ui/app/components/pages/signature-request.js delete mode 100644 ui/app/components/signature-request.js diff --git a/ui/app/actions.js b/ui/app/actions.js index 51cc4dfbf..60bd4a1ee 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -489,35 +489,47 @@ function signMsg (msgData) { return (dispatch) => { dispatch(actions.showLoadingIndication()) - log.debug(`actions calling background.signMessage`) - background.signMessage(msgData, (err, newState) => { - log.debug('signMessage called back') - dispatch(actions.updateMetamaskState(newState)) - dispatch(actions.hideLoadingIndication()) + return new Promise((resolve, reject) => { + log.debug(`actions calling background.signMessage`) + background.signMessage(msgData, (err, newState) => { + log.debug('signMessage called back') + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.hideLoadingIndication()) - if (err) log.error(err) - if (err) return dispatch(actions.displayWarning(err.message)) + if (err) { + log.error(err) + dispatch(actions.displayWarning(err.message)) + return reject(err) + } - dispatch(actions.completedTx(msgData.metamaskId)) + dispatch(actions.completedTx(msgData.metamaskId)) + return resolve(msgData) + }) }) } } function signPersonalMsg (msgData) { log.debug('action - signPersonalMsg') - return (dispatch) => { + return dispatch => { dispatch(actions.showLoadingIndication()) - log.debug(`actions calling background.signPersonalMessage`) - background.signPersonalMessage(msgData, (err, newState) => { - log.debug('signPersonalMessage called back') - dispatch(actions.updateMetamaskState(newState)) - dispatch(actions.hideLoadingIndication()) + return new Promise((resolve, reject) => { + log.debug(`actions calling background.signPersonalMessage`) + background.signPersonalMessage(msgData, (err, newState) => { + log.debug('signPersonalMessage called back') + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.hideLoadingIndication()) - if (err) log.error(err) - if (err) return dispatch(actions.displayWarning(err.message)) + if (err) { + log.error(err) + dispatch(actions.displayWarning(err.message)) + return reject(err) + } - dispatch(actions.completedTx(msgData.metamaskId)) + dispatch(actions.completedTx(msgData.metamaskId)) + return resolve(msgData) + }) }) } } @@ -527,16 +539,22 @@ function signTypedMsg (msgData) { return (dispatch) => { dispatch(actions.showLoadingIndication()) - log.debug(`actions calling background.signTypedMessage`) - background.signTypedMessage(msgData, (err, newState) => { - log.debug('signTypedMessage called back') - dispatch(actions.updateMetamaskState(newState)) - dispatch(actions.hideLoadingIndication()) + return new Promise((resolve, reject) => { + log.debug(`actions calling background.signTypedMessage`) + background.signTypedMessage(msgData, (err, newState) => { + log.debug('signTypedMessage called back') + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.hideLoadingIndication()) - if (err) log.error(err) - if (err) return dispatch(actions.displayWarning(err.message)) + if (err) { + log.error(err) + dispatch(actions.displayWarning(err.message)) + return reject(err) + } - dispatch(actions.completedTx(msgData.metamaskId)) + dispatch(actions.completedTx(msgData.metamaskId)) + return resolve(msgData) + }) }) } } @@ -744,21 +762,66 @@ function txError (err) { } function cancelMsg (msgData) { - log.debug(`background.cancelMessage`) - background.cancelMessage(msgData.id) - return actions.completedTx(msgData.id) + return dispatch => { + dispatch(actions.showLoadingIndication()) + + return new Promise((resolve, reject) => { + log.debug(`background.cancelMessage`) + background.cancelMessage(msgData.id, (err, newState) => { + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.hideLoadingIndication()) + + if (err) { + return reject(err) + } + + dispatch(actions.completedTx(msgData.id)) + return resolve(msgData) + }) + }) + } } function cancelPersonalMsg (msgData) { - const id = msgData.id - background.cancelPersonalMessage(id) - return actions.completedTx(id) + return dispatch => { + dispatch(actions.showLoadingIndication()) + + return new Promise((resolve, reject) => { + const id = msgData.id + background.cancelPersonalMessage(id, (err, newState) => { + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.hideLoadingIndication()) + + if (err) { + return reject(err) + } + + dispatch(actions.completedTx(id)) + return resolve(msgData) + }) + }) + } } function cancelTypedMsg (msgData) { - const id = msgData.id - background.cancelTypedMessage(id) - return actions.completedTx(id) + return dispatch => { + dispatch(actions.showLoadingIndication()) + + return new Promise((resolve, reject) => { + const id = msgData.id + background.cancelTypedMessage(id, (err, newState) => { + dispatch(actions.updateMetamaskState(newState)) + dispatch(actions.hideLoadingIndication()) + + if (err) { + return reject(err) + } + + dispatch(actions.completedTx(id)) + return resolve(msgData) + }) + }) + } } function cancelTx (txData) { diff --git a/ui/app/app.js b/ui/app/app.js index 6717b3d67..07be459fc 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -33,6 +33,7 @@ const RevealSeedPage = require('./components/pages/keychains/reveal-seed') const AddTokenPage = require('./components/pages/add-token') const ImportAccountPage = require('./components/pages/import-account') const NoticeScreen = require('./components/pages/notice') +const SignatureRequestPage = require('./components/pages/signature-request') const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') @@ -60,6 +61,7 @@ const { CONFIRM_TRANSACTION_ROUTE, INITIALIZE_ROUTE, NOTICE_ROUTE, + SIGNATURE_REQUEST_ROUTE, } = require('./routes') class App extends Component { @@ -112,6 +114,7 @@ class App extends Component { 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: SIGNATURE_REQUEST_ROUTE, exact, component: SignatureRequestPage }), h(Authenticated, { path: DEFAULT_ROUTE, exact, component: this.renderPrimary }), ]) ) @@ -356,6 +359,9 @@ class App extends Component { activeAddress, unapprovedTxs = {}, seedWords, + unapprovedMsgCount = 0, + unapprovedPersonalMsgCount = 0, + unapprovedTypedMessagesCount = 0, } = this.props // seed words @@ -386,6 +392,15 @@ class App extends Component { }) } + // unapproved messages + if (unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) { + return h(Redirect, { + to: { + pathname: SIGNATURE_REQUEST_ROUTE, + }, + }) + } + // if (!props.noActiveNotices) { // log.debug('rendering notice screen for unread notices.') // return h(NoticeScreen, { @@ -595,6 +610,9 @@ App.propTypes = { activeAddress: PropTypes.string, unapprovedTxs: PropTypes.object, seedWords: PropTypes.string, + unapprovedMsgCount: PropTypes.number, + unapprovedPersonalMsgCount: PropTypes.number, + unapprovedTypedMessagesCount: PropTypes.number, } function mapStateToProps (state) { @@ -617,6 +635,9 @@ function mapStateToProps (state) { unapprovedTxs, lastUnreadNotice, lostAccounts, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, } = metamask const selected = address || Object.keys(accounts)[0] @@ -637,7 +658,9 @@ function mapStateToProps (state) { isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), seedWords: state.metamask.seedWords, unapprovedTxs, - unapprovedMsgs: state.metamask.unapprovedMsgs, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, menuOpen: state.appState.menuOpen, network: state.metamask.network, provider: state.metamask.provider, diff --git a/ui/app/components/pages/signature-request.js b/ui/app/components/pages/signature-request.js new file mode 100644 index 000000000..0c9f4a091 --- /dev/null +++ b/ui/app/components/pages/signature-request.js @@ -0,0 +1,321 @@ +const { Component } = require('react') +const h = require('react-hyperscript') +const PropTypes = require('prop-types') +const Identicon = require('../identicon') +const { connect } = require('react-redux') +const ethUtil = require('ethereumjs-util') +const classnames = require('classnames') + +const AccountDropdownMini = require('../dropdowns/account-dropdown-mini') + +const actions = require('../../actions') +const { conversionUtil } = require('../../conversion-util') +const txHelper = require('../../../lib/tx-helper') +const { DEFAULT_ROUTE } = require('../../routes') + +const { + getSelectedAccount, + getCurrentAccountWithSendEtherInfo, + getSelectedAddress, + accountsWithSendEtherInfoSelector, + conversionRateSelector, +} = require('../../selectors.js') + +class SignatureRequest extends Component { + constructor (props) { + super(props) + + this.state = { + selectedAccount: props.selectedAccount, + accountDropdownOpen: false, + } + } + + componentWillMount () { + const { + unapprovedMsgCount = 0, + unapprovedPersonalMsgCount = 0, + unapprovedTypedMessagesCount = 0, + } = this.props + + if (unapprovedMsgCount + unapprovedPersonalMsgCount + unapprovedTypedMessagesCount < 1) { + this.props.history.push(DEFAULT_ROUTE) + } + } + + renderHeader () { + return h('div.request-signature__header', [ + + h('div.request-signature__header-background'), + + h('div.request-signature__header__text', 'Signature Request'), + + h('div.request-signature__header__tip-container', [ + h('div.request-signature__header__tip'), + ]), + + ]) + } + + renderAccountDropdown () { + const { + selectedAccount, + accountDropdownOpen, + } = this.state + + const { accounts } = this.props + + return h('div.request-signature__account', [ + + h('div.request-signature__account-text', ['Account:']), + + h(AccountDropdownMini, { + selectedAccount, + accounts, + onSelect: selectedAccount => this.setState({ selectedAccount }), + dropdownOpen: accountDropdownOpen, + openDropdown: () => this.setState({ accountDropdownOpen: true }), + closeDropdown: () => this.setState({ accountDropdownOpen: false }), + }), + + ]) + } + + renderBalance () { + const { balance, conversionRate } = this.props + + const balanceInEther = conversionUtil(balance, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromDenomination: 'WEI', + numberOfDecimals: 6, + conversionRate, + }) + + return h('div.request-signature__balance', [ + + h('div.request-signature__balance-text', ['Balance:']), + + h('div.request-signature__balance-value', `${balanceInEther} ETH`), + + ]) + } + + renderAccountInfo () { + return h('div.request-signature__account-info', [ + + this.renderAccountDropdown(), + + this.renderRequestIcon(), + + this.renderBalance(), + + ]) + } + + renderRequestIcon () { + const { requesterAddress } = this.props + + return h('div.request-signature__request-icon', [ + h(Identicon, { + diameter: 40, + address: requesterAddress, + }), + ]) + } + + renderRequestInfo () { + return h('div.request-signature__request-info', [ + + h('div.request-signature__headline', [ + `Your signature is being requested`, + ]), + + ]) + } + + msgHexToText (hex) { + try { + const stripped = ethUtil.stripHexPrefix(hex) + const buff = Buffer.from(stripped, 'hex') + return buff.toString('utf8') + } catch (e) { + return hex + } + } + + renderBody () { + let rows = [] + let notice = 'You are signing:' + + const { txData = {} } = this.props + const { type, msgParams = {} } = txData + const { data } = msgParams + + if (type === 'personal_sign') { + rows = [{ name: 'Message', value: this.msgHexToText(data) }] + } else if (type === 'eth_signTypedData') { + rows = data + } else if (type === 'eth_sign') { + rows = [{ name: 'Message', value: data }] + notice = `Signing this message can have + dangerous side effects. Only sign messages from + sites you fully trust with your entire account. + This dangerous method will be removed in a future version. ` + } + + return h('div.request-signature__body', {}, [ + + this.renderAccountInfo(), + + this.renderRequestInfo(), + + h('div.request-signature__notice', { + className: classnames({ + 'request-signature__notice': type === 'personal_sign' || type === 'eth_signTypedData', + 'request-signature__warning': type === 'eth_sign', + }), + }, [notice]), + + h('div.request-signature__rows', [ + + ...rows.map(({ name, value }) => { + return h('div.request-signature__row', [ + h('div.request-signature__row-title', [`${name}:`]), + h('div.request-signature__row-value', value), + ]) + }), + + ]), + + ]) + } + + renderFooter () { + const { + txData = {}, + signPersonalMessage, + signTypedMessage, + cancelPersonalMessage, + cancelTypedMessage, + signMessage, + cancelMessage, + history, + } = this.props + + const { type } = txData + + let cancel = () => Promise.resolve() + let sign = () => Promise.resolve() + const { msgParams: params = {}, id } = txData + params.id = id + params.metamaskId = id + + switch (type) { + case 'personal_sign': + cancel = () => cancelPersonalMessage(params) + sign = () => signPersonalMessage(params) + break + case 'eth_signTypedData': + cancel = () => cancelTypedMessage(params) + sign = () => signTypedMessage(params) + break + case 'eth_sign': + cancel = () => cancelMessage(params) + sign = () => signMessage(params) + break + } + + return h('div.request-signature__footer', [ + h('button.request-signature__footer__cancel-button', { + onClick: () => { + cancel().then(() => history.push(DEFAULT_ROUTE)) + }, + }, 'CANCEL'), + h('button.request-signature__footer__sign-button', { + onClick: () => { + sign().then(() => history.push(DEFAULT_ROUTE)) + }, + }, 'SIGN'), + ]) + } + + render () { + return ( + h('div.request-signature__container', [ + + this.renderHeader(), + + this.renderBody(), + + this.renderFooter(), + + ]) + ) + } +} + +SignatureRequest.propTypes = { + txData: PropTypes.object, + signPersonalMessage: PropTypes.func, + cancelPersonalMessage: PropTypes.func, + signTypedMessage: PropTypes.func, + cancelTypedMessage: PropTypes.func, + signMessage: PropTypes.func, + cancelMessage: PropTypes.func, + requesterAddress: PropTypes.string, + accounts: PropTypes.array, + conversionRate: PropTypes.number, + balance: PropTypes.string, + selectedAccount: PropTypes.object, + history: PropTypes.object, + unapprovedMsgCount: PropTypes.number, + unapprovedPersonalMsgCount: PropTypes.number, + unapprovedTypedMessagesCount: PropTypes.number, +} + +const mapStateToProps = state => { + const { metamask } = state + const { + unapprovedTxs, + unapprovedMsgs, + unapprovedPersonalMsgs, + unapprovedTypedMessages, + network, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, + } = metamask + const unconfTxList = txHelper( + unapprovedTxs, + unapprovedMsgs, + unapprovedPersonalMsgs, + unapprovedTypedMessages, + network + ) || [] + + return { + balance: getSelectedAccount(state).balance, + selectedAccount: getCurrentAccountWithSendEtherInfo(state), + selectedAddress: getSelectedAddress(state), + accounts: accountsWithSendEtherInfoSelector(state), + conversionRate: conversionRateSelector(state), + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, + txData: unconfTxList[0] || {}, + } +} + +const mapDispatchToProps = dispatch => { + return { + signPersonalMessage: params => dispatch(actions.signPersonalMsg(params)), + cancelPersonalMessage: params => dispatch(actions.cancelPersonalMsg(params)), + signTypedMessage: params => dispatch(actions.signTypedMsg(params)), + cancelTypedMessage: params => dispatch(actions.cancelTypedMsg(params)), + signMessage: params => dispatch(actions.signMsg(params)), + cancelMessage: params => dispatch(actions.cancelMsg(params)), + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest) diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js deleted file mode 100644 index c5cc23aa8..000000000 --- a/ui/app/components/signature-request.js +++ /dev/null @@ -1,253 +0,0 @@ -const Component = require('react').Component -const h = require('react-hyperscript') -const inherits = require('util').inherits -const Identicon = require('./identicon') -const connect = require('react-redux').connect -const ethUtil = require('ethereumjs-util') -const classnames = require('classnames') - -const AccountDropdownMini = require('./dropdowns/account-dropdown-mini') - -const actions = require('../actions') -const { conversionUtil } = require('../conversion-util') - -const { - getSelectedAccount, - getCurrentAccountWithSendEtherInfo, - getSelectedAddress, - accountsWithSendEtherInfoSelector, - conversionRateSelector, -} = require('../selectors.js') - -function mapStateToProps (state) { - return { - balance: getSelectedAccount(state).balance, - selectedAccount: getCurrentAccountWithSendEtherInfo(state), - selectedAddress: getSelectedAddress(state), - requester: null, - requesterAddress: null, - accounts: accountsWithSendEtherInfoSelector(state), - conversionRate: conversionRateSelector(state), - } -} - -function mapDispatchToProps (dispatch) { - return { - goHome: () => dispatch(actions.goHome()), - } -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest) - -inherits(SignatureRequest, Component) -function SignatureRequest (props) { - Component.call(this) - - this.state = { - selectedAccount: props.selectedAccount, - accountDropdownOpen: false, - } -} - -SignatureRequest.prototype.renderHeader = function () { - return h('div.request-signature__header', [ - - h('div.request-signature__header-background'), - - h('div.request-signature__header__text', 'Signature Request'), - - h('div.request-signature__header__tip-container', [ - h('div.request-signature__header__tip'), - ]), - - ]) -} - -SignatureRequest.prototype.renderAccountDropdown = function () { - const { - selectedAccount, - accountDropdownOpen, - } = this.state - - const { - accounts, - } = this.props - - return h('div.request-signature__account', [ - - h('div.request-signature__account-text', ['Account:']), - - h(AccountDropdownMini, { - selectedAccount, - accounts, - onSelect: selectedAccount => this.setState({ selectedAccount }), - dropdownOpen: accountDropdownOpen, - openDropdown: () => this.setState({ accountDropdownOpen: true }), - closeDropdown: () => this.setState({ accountDropdownOpen: false }), - }), - - ]) -} - -SignatureRequest.prototype.renderBalance = function () { - const { balance, conversionRate } = this.props - - const balanceInEther = conversionUtil(balance, { - fromNumericBase: 'hex', - toNumericBase: 'dec', - fromDenomination: 'WEI', - numberOfDecimals: 6, - conversionRate, - }) - - return h('div.request-signature__balance', [ - - h('div.request-signature__balance-text', ['Balance:']), - - h('div.request-signature__balance-value', `${balanceInEther} ETH`), - - ]) -} - -SignatureRequest.prototype.renderAccountInfo = function () { - return h('div.request-signature__account-info', [ - - this.renderAccountDropdown(), - - this.renderRequestIcon(), - - this.renderBalance(), - - ]) -} - -SignatureRequest.prototype.renderRequestIcon = function () { - const { requesterAddress } = this.props - - return h('div.request-signature__request-icon', [ - h(Identicon, { - diameter: 40, - address: requesterAddress, - }), - ]) -} - -SignatureRequest.prototype.renderRequestInfo = function () { - return h('div.request-signature__request-info', [ - - h('div.request-signature__headline', [ - `Your signature is being requested`, - ]), - - ]) -} - -SignatureRequest.prototype.msgHexToText = function (hex) { - try { - const stripped = ethUtil.stripHexPrefix(hex) - const buff = Buffer.from(stripped, 'hex') - return buff.toString('utf8') - } catch (e) { - return hex - } -} - -SignatureRequest.prototype.renderBody = function () { - let rows - let notice = 'You are signing:' - - const { txData } = this.props - const { type, msgParams: { data } } = txData - - if (type === 'personal_sign') { - rows = [{ name: 'Message', value: this.msgHexToText(data) }] - } else if (type === 'eth_signTypedData') { - rows = data - } else if (type === 'eth_sign') { - rows = [{ name: 'Message', value: data }] - notice = `Signing this message can have - dangerous side effects. Only sign messages from - sites you fully trust with your entire account. - This dangerous method will be removed in a future version. ` - } - - return h('div.request-signature__body', {}, [ - - this.renderAccountInfo(), - - this.renderRequestInfo(), - - h('div.request-signature__notice', { - className: classnames({ - 'request-signature__notice': type === 'personal_sign' || type === 'eth_signTypedData', - 'request-signature__warning': type === 'eth_sign', - }), - }, [notice]), - - h('div.request-signature__rows', [ - - ...rows.map(({ name, value }) => { - return h('div.request-signature__row', [ - h('div.request-signature__row-title', [`${name}:`]), - h('div.request-signature__row-value', value), - ]) - }), - - ]), - - ]) -} - -SignatureRequest.prototype.renderFooter = function () { - const { - signPersonalMessage, - signTypedMessage, - cancelPersonalMessage, - cancelTypedMessage, - signMessage, - cancelMessage, - } = this.props - - const { txData } = this.props - const { type } = txData - - let cancel - let sign - if (type === 'personal_sign') { - cancel = cancelPersonalMessage - sign = signPersonalMessage - } else if (type === 'eth_signTypedData') { - cancel = cancelTypedMessage - sign = signTypedMessage - } else if (type === 'eth_sign') { - cancel = cancelMessage - sign = signMessage - } - - return h('div.request-signature__footer', [ - h('button.request-signature__footer__cancel-button', { - onClick: cancel, - }, 'CANCEL'), - h('button.request-signature__footer__sign-button', { - onClick: sign, - }, 'SIGN'), - ]) -} - -SignatureRequest.prototype.render = function () { - return ( - - h('div.request-signature__container', [ - - this.renderHeader(), - - this.renderBody(), - - this.renderFooter(), - - ]) - - ) - -} - diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index ce0012d5b..05bbd2696 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -8,7 +8,6 @@ const actions = require('./actions') const txHelper = require('../lib/tx-helper') const PendingTx = require('./components/pending-tx') -const SignatureRequest = require('./components/signature-request') // const PendingMsg = require('./components/pending-msg') // const PendingPersonalMsg = require('./components/pending-personal-msg') // const PendingTypedMsg = require('./components/pending-typed-msg') @@ -21,6 +20,12 @@ module.exports = compose( )(ConfirmTxScreen) function mapStateToProps (state) { + const { metamask } = state + const { + unapprovedMsgCount, + unapprovedPersonalMsgCount, + } = metamask + return { identities: state.metamask.identities, accounts: state.metamask.accounts, @@ -37,6 +42,8 @@ function mapStateToProps (state) { currentCurrency: state.metamask.currentCurrency, blockGasLimit: state.metamask.currentBlockGasLimit, computedBalances: state.metamask.computedBalances, + unapprovedMsgCount, + unapprovedPersonalMsgCount, } } @@ -125,27 +132,13 @@ ConfirmTxScreen.prototype.render = function () { function currentTxView (opts) { log.info('rendering current tx view') const { txData } = opts - const { txParams, msgParams } = txData + const { txParams } = txData if (txParams) { log.debug('txParams detected, rendering pending tx') return h(PendingTx, opts) - } else if (msgParams) { - log.debug('msgParams detected, rendering pending msg') - - return h(SignatureRequest, opts) - - // if (type === 'eth_sign') { - // log.debug('rendering eth_sign message') - // return h(PendingMsg, opts) - // } else if (type === 'personal_sign') { - // log.debug('rendering personal_sign message') - // return h(PendingPersonalMsg, opts) - // } else if (type === 'eth_signTypedData') { - // log.debug('rendering eth_signTypedData message') - // return h(PendingTypedMsg, opts) - // } } + return h(Loading) } diff --git a/ui/app/routes.js b/ui/app/routes.js index de96eb3f5..d1d634db2 100644 --- a/ui/app/routes.js +++ b/ui/app/routes.js @@ -11,6 +11,7 @@ const SEND_ROUTE = '/send' const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction' const INITIALIZE_ROUTE = '/initialize' const NOTICE_ROUTE = '/notice' +const SIGNATURE_REQUEST_ROUTE = '/signature-request' module.exports = { DEFAULT_ROUTE, @@ -26,4 +27,5 @@ module.exports = { CONFIRM_TRANSACTION_ROUTE, INITIALIZE_ROUTE, NOTICE_ROUTE, + SIGNATURE_REQUEST_ROUTE, } -- cgit From d905b86ba775aad888d1dfd22257958fd9415909 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 6 Dec 2017 18:13:34 -0500 Subject: Add prop-types to package.json, redirect from create-password screen when isInitialized --- .../src/app/first-time/create-password-screen.js | 21 ++++++++++++++++++++- package.json | 3 ++- 2 files changed, 22 insertions(+), 2 deletions(-) diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 102d8a7c3..17b9174b8 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -11,6 +11,8 @@ class CreatePasswordScreen extends Component { isLoading: PropTypes.bool.isRequired, createAccount: PropTypes.func.isRequired, history: PropTypes.object.isRequired, + isInitialized: PropTypes.bool, + isUnlocked: PropTypes.bool, } state = { @@ -18,6 +20,13 @@ class CreatePasswordScreen extends Component { confirmPassword: '', } + componentWillMount () { + const { isInitialized, isUnlocked, history } = this.props + if (isInitialized || isUnlocked) { + history.push(DEFAULT_ROUTE) + } + } + isValid () { const { password, confirmPassword } = this.state @@ -107,8 +116,18 @@ class CreatePasswordScreen extends Component { } } +const mapStateToProps = state => { + const { metamask: { isInitialized, isUnlocked }, appState: { isLoading } } = state + + return { + isLoading, + isInitialized, + isUnlocked, + } +} + export default connect( - ({ appState: { isLoading } }) => ({ isLoading }), + mapStateToProps, dispatch => ({ createAccount: password => dispatch(createNewVaultAndKeychain(password)), }) diff --git a/package.json b/package.json index b7c35c053..06ff281ac 100644 --- a/package.json +++ b/package.json @@ -101,8 +101,8 @@ "fast-json-patch": "^2.0.4", "fast-levenshtein": "^2.0.6", "fuse.js": "^3.2.0", - "gulp-autoprefixer": "^4.0.0", "gulp": "github:gulpjs/gulp#4.0", + "gulp-autoprefixer": "^4.0.0", "gulp-eslint": "^4.0.0", "gulp-sass": "^3.1.0", "hat": "0.0.3", @@ -135,6 +135,7 @@ "post-message-stream": "^3.0.0", "promise-filter": "^1.1.0", "promise-to-callback": "^1.0.0", + "prop-types": "^15.6.0", "pump": "^1.0.2", "pumpify": "^1.3.4", "qrcode-npm": "0.0.3", -- cgit From 0c6fef3dec4f3ba70e8e86275ee9db4f2d58d129 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 31 Jan 2018 18:08:49 -0800 Subject: Add create new account routes, fix conflicts from uat updates --- mascara/src/app/first-time/index.js | 2 +- ui/app/accounts/import/index.js | 80 -- ui/app/accounts/new-account/create-form.js | 96 --- ui/app/accounts/new-account/index.js | 81 -- ui/app/app.js | 6 +- ui/app/components/account-menu/index.js | 18 +- ui/app/components/pages/add-token.js | 1 - .../pages/create-account/import-account/index.js | 80 ++ .../pages/create-account/import-account/json.js | 106 +++ .../create-account/import-account/private-key.js | 83 ++ .../pages/create-account/import-account/seed.js | 30 + ui/app/components/pages/create-account/index.js | 81 ++ .../components/pages/create-account/new-account.js | 95 +++ ui/app/components/pages/import-account/index.js | 95 --- ui/app/components/pages/import-account/json.js | 100 --- .../components/pages/import-account/private-key.js | 76 -- ui/app/components/pages/import-account/seed.js | 30 - ui/app/components/pages/settings/index.js | 4 +- ui/app/components/pages/settings/info.js | 1 - ui/app/components/pages/settings/settings.js | 2 +- ui/app/css/itcss/components/new-account.scss | 5 +- ui/app/root.js | 7 +- ui/app/routes.js | 4 +- ui/app/select-app.js | 10 +- yarn.lock | 934 ++++++++++++--------- 25 files changed, 1029 insertions(+), 998 deletions(-) delete mode 100644 ui/app/accounts/import/index.js delete mode 100644 ui/app/accounts/new-account/create-form.js delete mode 100644 ui/app/accounts/new-account/index.js create mode 100644 ui/app/components/pages/create-account/import-account/index.js create mode 100644 ui/app/components/pages/create-account/import-account/json.js create mode 100644 ui/app/components/pages/create-account/import-account/private-key.js create mode 100644 ui/app/components/pages/create-account/import-account/seed.js create mode 100644 ui/app/components/pages/create-account/index.js create mode 100644 ui/app/components/pages/create-account/new-account.js delete mode 100644 ui/app/components/pages/import-account/index.js delete mode 100644 ui/app/components/pages/import-account/json.js delete mode 100644 ui/app/components/pages/import-account/private-key.js delete mode 100644 ui/app/components/pages/import-account/seed.js diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js index 66b591bd8..eec830ad2 100644 --- a/mascara/src/app/first-time/index.js +++ b/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' diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js deleted file mode 100644 index 0c901c09b..000000000 --- a/ui/app/accounts/import/index.js +++ /dev/null @@ -1,80 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const h = require('react-hyperscript') -const connect = require('react-redux').connect -import Select from 'react-select' - -// Subviews -const JsonImportView = require('./json.js') -const PrivateKeyImportView = require('./private-key.js') - -const menuItems = [ - 'Private Key', - 'JSON File', -] - -module.exports = connect(mapStateToProps)(AccountImportSubview) - -function mapStateToProps (state) { - return { - menuItems, - } -} - -inherits(AccountImportSubview, Component) -function AccountImportSubview () { - Component.call(this) -} - -AccountImportSubview.prototype.render = function () { - const props = this.props - const state = this.state || {} - const { menuItems } = props - const { type } = state - - return ( - h('div.new-account-import-form', [ - - h('div.new-account-import-form__select-section', [ - - h('div.new-account-import-form__select-label', 'SELECT TYPE'), - - h(Select, { - className: 'new-account-import-form__select', - name: 'import-type-select', - clearable: false, - value: type || menuItems[0], - options: menuItems.map((type) => { - return { - value: type, - label: type, - } - }), - onChange: (opt) => { - this.setState({ type: opt.value }) - }, - }), - - ]), - - this.renderImportView(), - ]) - ) -} - -AccountImportSubview.prototype.renderImportView = function () { - const props = this.props - const state = this.state || {} - const { type } = state - const { menuItems } = props - const current = type || menuItems[0] - - switch (current) { - case 'Private Key': - return h(PrivateKeyImportView) - case 'JSON File': - return h(JsonImportView) - default: - return h(JsonImportView) - } -} diff --git a/ui/app/accounts/new-account/create-form.js b/ui/app/accounts/new-account/create-form.js deleted file mode 100644 index 494726ae4..000000000 --- a/ui/app/accounts/new-account/create-form.js +++ /dev/null @@ -1,96 +0,0 @@ -const { Component } = require('react') -const PropTypes = require('prop-types') -const h = require('react-hyperscript') -const { connect } = require('react-redux') -const actions = require('../../actions') - -class NewAccountCreateForm extends Component { - constructor (props) { - super(props) - const { numberOfExistingAccounts = 0 } = props - const newAccountNumber = numberOfExistingAccounts + 1 - - this.state = { - newAccountName: `Account ${newAccountNumber}`, - } - } - - render () { - const { newAccountName } = this.state - - return h('div.new-account-create-form', [ - - h('div.new-account-create-form__input-label', {}, [ - 'Account Name', - ]), - - h('div.new-account-create-form__input-wrapper', {}, [ - h('input.new-account-create-form__input', { - value: this.state.newAccountName, - placeholder: 'E.g. My new account', - onChange: event => this.setState({ newAccountName: event.target.value }), - }, []), - ]), - - h('div.new-account-create-form__buttons', {}, [ - - h('button.new-account-create-form__button-cancel', { - onClick: () => this.props.goHome(), - }, [ - 'CANCEL', - ]), - - h('button.new-account-create-form__button-create', { - onClick: () => this.props.createAccount(newAccountName), - }, [ - 'CREATE', - ]), - - ]), - - ]) - } -} - -NewAccountCreateForm.propTypes = { - hideModal: PropTypes.func, - showImportPage: PropTypes.func, - createAccount: PropTypes.func, - goHome: PropTypes.func, - numberOfExistingAccounts: PropTypes.number, -} - -const mapStateToProps = state => { - const { metamask: { network, selectedAddress, identities = {} } } = state - const numberOfExistingAccounts = Object.keys(identities).length - - return { - network, - address: selectedAddress, - numberOfExistingAccounts, - } -} - -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) => { - if (newAccountName) { - dispatch(actions.saveAccountLabel(newAccountAddress, newAccountName)) - } - dispatch(actions.goHome()) - }) - }, - showImportPage: () => dispatch(actions.showImportPage()), - goHome: () => dispatch(actions.goHome()), - } -} - -module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm) 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/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js new file mode 100644 index 000000000..0c901c09b --- /dev/null +++ b/ui/app/components/pages/create-account/import-account/index.js @@ -0,0 +1,80 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const connect = require('react-redux').connect +import Select from 'react-select' + +// Subviews +const JsonImportView = require('./json.js') +const PrivateKeyImportView = require('./private-key.js') + +const menuItems = [ + 'Private Key', + 'JSON File', +] + +module.exports = connect(mapStateToProps)(AccountImportSubview) + +function mapStateToProps (state) { + return { + menuItems, + } +} + +inherits(AccountImportSubview, Component) +function AccountImportSubview () { + Component.call(this) +} + +AccountImportSubview.prototype.render = function () { + const props = this.props + const state = this.state || {} + const { menuItems } = props + const { type } = state + + return ( + h('div.new-account-import-form', [ + + h('div.new-account-import-form__select-section', [ + + h('div.new-account-import-form__select-label', 'SELECT TYPE'), + + h(Select, { + className: 'new-account-import-form__select', + name: 'import-type-select', + clearable: false, + value: type || menuItems[0], + options: menuItems.map((type) => { + return { + value: type, + label: type, + } + }), + onChange: (opt) => { + this.setState({ type: opt.value }) + }, + }), + + ]), + + this.renderImportView(), + ]) + ) +} + +AccountImportSubview.prototype.renderImportView = function () { + const props = this.props + const state = this.state || {} + const { type } = state + const { menuItems } = props + const current = type || menuItems[0] + + switch (current) { + case 'Private Key': + return h(PrivateKeyImportView) + case 'JSON File': + return h(JsonImportView) + default: + return h(JsonImportView) + } +} diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js new file mode 100644 index 000000000..36644f1a0 --- /dev/null +++ b/ui/app/components/pages/create-account/import-account/json.js @@ -0,0 +1,106 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +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 = compose( + withRouter, + connect(mapStateToProps) +)(JsonImportSubview) + +function mapStateToProps (state) { + return { + error: state.appState.warning, + } +} + +inherits(JsonImportSubview, Component) +function JsonImportSubview () { + Component.call(this) +} + +JsonImportSubview.prototype.render = function () { + const { error } = this.props + + return ( + h('div.new-account-import-form__json', [ + + h('p', 'Used by a variety of different clients'), + h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'), + + h(FileInput, { + readAs: 'text', + onLoad: this.onLoad.bind(this), + style: { + margin: '20px 0px 12px 34%', + fontSize: '15px', + display: 'flex', + justifyContent: 'center', + }, + }), + + h('input.new-account-import-form__input-password', { + type: 'password', + placeholder: 'Enter password', + id: 'json-password-box', + onKeyPress: this.createKeyringOnEnter.bind(this), + }), + + h('div.new-account-create-form__buttons', {}, [ + + h('button.new-account-create-form__button-cancel', { + onClick: () => this.props.history.push(DEFAULT_ROUTE), + }, [ + 'CANCEL', + ]), + + h('button.new-account-create-form__button-create', { + onClick: () => this.createNewKeychain.bind(this), + }, [ + 'IMPORT', + ]), + + ]), + + error ? h('span.error', error) : null, + ]) + ) +} + +JsonImportSubview.prototype.onLoad = function (event, file) { + this.setState({file: file, fileContents: event.target.result}) +} + +JsonImportSubview.prototype.createKeyringOnEnter = function (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewKeychain() + } +} + +JsonImportSubview.prototype.createNewKeychain = function () { + const state = this.state + const { fileContents } = state + + if (!fileContents) { + const message = 'You must select a file to import.' + return this.props.dispatch(actions.displayWarning(message)) + } + + const passwordInput = document.getElementById('json-password-box') + const password = passwordInput.value + + if (!password) { + const message = 'You must enter a password for the selected file.' + return this.props.dispatch(actions.displayWarning(message)) + } + + this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ])) +} diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js new file mode 100644 index 000000000..785bf2cb6 --- /dev/null +++ b/ui/app/components/pages/create-account/import-account/private-key.js @@ -0,0 +1,83 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +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 = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(PrivateKeyImportView) + +function mapStateToProps (state) { + return { + error: state.appState.warning, + } +} + +function mapDispatchToProps (dispatch) { + return { + importNewAccount: (strategy, [ privateKey ]) => { + return dispatch(actions.importNewAccount(strategy, [ privateKey ])) + }, + displayWarning: () => dispatch(actions.displayWarning(null)), + } +} + +inherits(PrivateKeyImportView, Component) +function PrivateKeyImportView () { + Component.call(this) +} + +PrivateKeyImportView.prototype.render = function () { + const { error } = this.props + + return ( + h('div.new-account-import-form__private-key', [ + h('span.new-account-create-form__instruction', 'Paste your private key string here:'), + + h('input.new-account-import-form__input-password', { + type: 'password', + id: 'private-key-box', + onKeyPress: () => this.createKeyringOnEnter(), + }), + + h('div.new-account-create-form__buttons', {}, [ + + h('button.new-account-create-form__button-cancel', { + onClick: () => this.props.history.push(DEFAULT_ROUTE), + }, [ + 'CANCEL', + ]), + + h('button.new-account-create-form__button-create', { + onClick: () => this.createNewKeychain(), + }, [ + 'IMPORT', + ]), + + ]), + + error ? h('span.error', error) : null, + ]) + ) +} + +PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) { + if (event.key === 'Enter') { + event.preventDefault() + this.createNewKeychain() + } +} + +PrivateKeyImportView.prototype.createNewKeychain = function () { + const input = document.getElementById('private-key-box') + const privateKey = input.value + const { importNewAccount, history } = this.props + + importNewAccount('Private Key', [ privateKey ]) + .then(() => history.push(DEFAULT_ROUTE)) +} diff --git a/ui/app/components/pages/create-account/import-account/seed.js b/ui/app/components/pages/create-account/import-account/seed.js new file mode 100644 index 000000000..b4a7c0afa --- /dev/null +++ b/ui/app/components/pages/create-account/import-account/seed.js @@ -0,0 +1,30 @@ +const inherits = require('util').inherits +const Component = require('react').Component +const h = require('react-hyperscript') +const connect = require('react-redux').connect + +module.exports = connect(mapStateToProps)(SeedImportSubview) + +function mapStateToProps (state) { + return {} +} + +inherits(SeedImportSubview, Component) +function SeedImportSubview () { + Component.call(this) +} + +SeedImportSubview.prototype.render = function () { + return ( + h('div', { + style: { + }, + }, [ + `Paste your seed phrase here!`, + h('textarea'), + h('br'), + h('button', 'Submit'), + ]) + ) +} + 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/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js new file mode 100644 index 000000000..a3bfefc84 --- /dev/null +++ b/ui/app/components/pages/create-account/new-account.js @@ -0,0 +1,95 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const h = require('react-hyperscript') +const { connect } = require('react-redux') +const actions = require('../../../actions') +const { DEFAULT_ROUTE } = require('../../../routes') + +class NewAccountCreateForm extends Component { + constructor (props) { + super(props) + const { numberOfExistingAccounts = 0 } = props + const newAccountNumber = numberOfExistingAccounts + 1 + + this.state = { + newAccountName: `Account ${newAccountNumber}`, + } + } + + render () { + const { newAccountName } = this.state + const { history, createAccount } = this.props + + return h('div.new-account-create-form', [ + + h('div.new-account-create-form__input-label', {}, [ + 'Account Name', + ]), + + h('div.new-account-create-form__input-wrapper', {}, [ + h('input.new-account-create-form__input', { + value: this.state.newAccountName, + placeholder: 'E.g. My new account', + onChange: event => this.setState({ newAccountName: event.target.value }), + }, []), + ]), + + h('div.new-account-create-form__buttons', {}, [ + + h('button.new-account-create-form__button-cancel', { + onClick: () => history.push(DEFAULT_ROUTE), + }, [ + 'CANCEL', + ]), + + h('button.new-account-create-form__button-create', { + onClick: () => { + createAccount(newAccountName) + .then(() => history.push(DEFAULT_ROUTE)) + }, + }, [ + 'CREATE', + ]), + + ]), + + ]) + } +} + +NewAccountCreateForm.propTypes = { + hideModal: PropTypes.func, + showImportPage: PropTypes.func, + createAccount: PropTypes.func, + numberOfExistingAccounts: PropTypes.number, + history: PropTypes.object, +} + +const mapStateToProps = state => { + const { metamask: { network, selectedAddress, identities = {} } } = state + const numberOfExistingAccounts = Object.keys(identities).length + + return { + network, + address: selectedAddress, + numberOfExistingAccounts, + } +} + +const mapDispatchToProps = dispatch => { + return { + 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)) + } + }) + }, + showImportPage: () => dispatch(actions.showImportPage()), + } +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(NewAccountCreateForm) 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/import-account/json.js b/ui/app/components/pages/import-account/json.js deleted file mode 100644 index c7d232d30..000000000 --- a/ui/app/components/pages/import-account/json.js +++ /dev/null @@ -1,100 +0,0 @@ -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 FileInput = require('react-simple-file-input').default - -const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' - -module.exports = connect(mapStateToProps)(JsonImportSubview) - -function mapStateToProps (state) { - return { - error: state.appState.warning, - } -} - -inherits(JsonImportSubview, Component) -function JsonImportSubview () { - Component.call(this) -} - -JsonImportSubview.prototype.render = function () { - const { error } = this.props - - return ( - h('div.new-account-import-form__json', [ - - h('p', 'Used by a variety of different clients'), - h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'), - - h(FileInput, { - readAs: 'text', - onLoad: this.onLoad.bind(this), - style: { - margin: '20px 0px 12px 34%', - fontSize: '15px', - display: 'flex', - justifyContent: 'center', - }, - }), - - h('input.new-account-import-form__input-password', { - type: 'password', - placeholder: 'Enter password', - id: 'json-password-box', - onKeyPress: this.createKeyringOnEnter.bind(this), - }), - - h('div.new-account-create-form__buttons', {}, [ - - h('button.new-account-create-form__button-cancel', { - onClick: () => this.props.goHome(), - }, [ - 'CANCEL', - ]), - - h('button.new-account-create-form__button-create', { - onClick: () => this.createNewKeychain.bind(this), - }, [ - 'IMPORT', - ]), - - ]), - - error ? h('span.error', error) : null, - ]) - ) -} - -JsonImportSubview.prototype.onLoad = function (event, file) { - this.setState({file: file, fileContents: event.target.result}) -} - -JsonImportSubview.prototype.createKeyringOnEnter = function (event) { - if (event.key === 'Enter') { - event.preventDefault() - this.createNewKeychain() - } -} - -JsonImportSubview.prototype.createNewKeychain = function () { - const state = this.state - const { fileContents } = state - - if (!fileContents) { - const message = 'You must select a file to import.' - return this.props.dispatch(actions.displayWarning(message)) - } - - const passwordInput = document.getElementById('json-password-box') - const password = passwordInput.value - - if (!password) { - const message = 'You must enter a password for the selected file.' - return this.props.dispatch(actions.displayWarning(message)) - } - - this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ])) -} diff --git a/ui/app/components/pages/import-account/private-key.js b/ui/app/components/pages/import-account/private-key.js deleted file mode 100644 index a236d90ee..000000000 --- a/ui/app/components/pages/import-account/private-key.js +++ /dev/null @@ -1,76 +0,0 @@ -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') - -module.exports = connect(mapStateToProps, mapDispatchToProps)(PrivateKeyImportView) - -function mapStateToProps (state) { - return { - error: state.appState.warning, - } -} - -function mapDispatchToProps (dispatch) { - return { - goHome: () => dispatch(actions.goHome()), - importNewAccount: (strategy, [ privateKey ]) => { - dispatch(actions.importNewAccount(strategy, [ privateKey ])) - }, - displayWarning: () => dispatch(actions.displayWarning(null)), - } -} - -inherits(PrivateKeyImportView, Component) -function PrivateKeyImportView () { - Component.call(this) -} - -PrivateKeyImportView.prototype.render = function () { - const { error, goHome } = this.props - - return ( - h('div.new-account-import-form__private-key', [ - h('span.new-account-create-form__instruction', 'Paste your private key string here:'), - - h('input.new-account-import-form__input-password', { - type: 'password', - id: 'private-key-box', - onKeyPress: () => this.createKeyringOnEnter(), - }), - - h('div.new-account-create-form__buttons', {}, [ - - h('button.new-account-create-form__button-cancel', { - onClick: () => goHome(), - }, [ - 'CANCEL', - ]), - - h('button.new-account-create-form__button-create', { - onClick: () => this.createNewKeychain(), - }, [ - 'IMPORT', - ]), - - ]), - - error ? h('span.error', error) : null, - ]) - ) -} - -PrivateKeyImportView.prototype.createKeyringOnEnter = function (event) { - if (event.key === 'Enter') { - event.preventDefault() - this.createNewKeychain() - } -} - -PrivateKeyImportView.prototype.createNewKeychain = function () { - const input = document.getElementById('private-key-box') - const privateKey = input.value - - this.props.importNewAccount('Private Key', [ privateKey ]) -} diff --git a/ui/app/components/pages/import-account/seed.js b/ui/app/components/pages/import-account/seed.js deleted file mode 100644 index b4a7c0afa..000000000 --- a/ui/app/components/pages/import-account/seed.js +++ /dev/null @@ -1,30 +0,0 @@ -const inherits = require('util').inherits -const Component = require('react').Component -const h = require('react-hyperscript') -const connect = require('react-redux').connect - -module.exports = connect(mapStateToProps)(SeedImportSubview) - -function mapStateToProps (state) { - return {} -} - -inherits(SeedImportSubview, Component) -function SeedImportSubview () { - Component.call(this) -} - -SeedImportSubview.prototype.render = function () { - return ( - h('div', { - style: { - }, - }, [ - `Paste your seed phrase here!`, - h('textarea'), - h('br'), - h('button', 'Submit'), - ]) - ) -} - 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) } diff --git a/yarn.lock b/yarn.lock index 8085d871b..dc01bc5f7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2,59 +2,64 @@ # yarn lockfile v1 -"@babel/code-frame@7.0.0-beta.31": - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.31.tgz#473d021ecc573a2cce1c07d5b509d5215f46ba35" +"@babel/code-frame@7.0.0-beta.36": + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.0.0-beta.36.tgz#2349d7ec04b3a06945ae173280ef8579b63728e4" dependencies: chalk "^2.0.0" esutils "^2.0.2" js-tokens "^3.0.0" -"@babel/helper-function-name@7.0.0-beta.31": - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.31.tgz#afe63ad799209989348b1109b44feb66aa245f57" +"@babel/helper-function-name@7.0.0-beta.36": + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.0.0-beta.36.tgz#366e3bc35147721b69009f803907c4d53212e88d" dependencies: - "@babel/helper-get-function-arity" "7.0.0-beta.31" - "@babel/template" "7.0.0-beta.31" - "@babel/traverse" "7.0.0-beta.31" - "@babel/types" "7.0.0-beta.31" + "@babel/helper-get-function-arity" "7.0.0-beta.36" + "@babel/template" "7.0.0-beta.36" + "@babel/types" "7.0.0-beta.36" -"@babel/helper-get-function-arity@7.0.0-beta.31": - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.31.tgz#1176d79252741218e0aec872ada07efb2b37a493" +"@babel/helper-get-function-arity@7.0.0-beta.36": + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@babel/helper-get-function-arity/-/helper-get-function-arity-7.0.0-beta.36.tgz#f5383bac9a96b274828b10d98900e84ee43e32b8" dependencies: - "@babel/types" "7.0.0-beta.31" + "@babel/types" "7.0.0-beta.36" -"@babel/template@7.0.0-beta.31": - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.31.tgz#577bb29389f6c497c3e7d014617e7d6713f68bda" +"@babel/template@7.0.0-beta.36": + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.36.tgz#02e903de5d68bd7899bce3c5b5447e59529abb00" dependencies: - "@babel/code-frame" "7.0.0-beta.31" - "@babel/types" "7.0.0-beta.31" - babylon "7.0.0-beta.31" + "@babel/code-frame" "7.0.0-beta.36" + "@babel/types" "7.0.0-beta.36" + babylon "7.0.0-beta.36" lodash "^4.2.0" -"@babel/traverse@7.0.0-beta.31": - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.31.tgz#db399499ad74aefda014f0c10321ab255134b1df" +"@babel/traverse@7.0.0-beta.36": + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.0.0-beta.36.tgz#1dc6f8750e89b6b979de5fe44aa993b1a2192261" dependencies: - "@babel/code-frame" "7.0.0-beta.31" - "@babel/helper-function-name" "7.0.0-beta.31" - "@babel/types" "7.0.0-beta.31" - babylon "7.0.0-beta.31" + "@babel/code-frame" "7.0.0-beta.36" + "@babel/helper-function-name" "7.0.0-beta.36" + "@babel/types" "7.0.0-beta.36" + babylon "7.0.0-beta.36" debug "^3.0.1" - globals "^10.0.0" + globals "^11.1.0" invariant "^2.2.0" lodash "^4.2.0" -"@babel/types@7.0.0-beta.31": - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.31.tgz#42c9c86784f674c173fb21882ca9643334029de4" +"@babel/types@7.0.0-beta.36": + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.36.tgz#64f2004353de42adb72f9ebb4665fc35b5499d23" dependencies: esutils "^2.0.2" lodash "^4.2.0" to-fast-properties "^2.0.0" +"@browserify/acorn5-object-spread@^5.0.1": + version "5.0.1" + resolved "https://registry.yarnpkg.com/@browserify/acorn5-object-spread/-/acorn5-object-spread-5.0.1.tgz#92e9b37f97beac9ec429a3cc479ded380297540c" + dependencies: + acorn "^5.2.1" + "@gulp-sourcemaps/identity-map@1.X": version "1.0.1" resolved "https://registry.yarnpkg.com/@gulp-sourcemaps/identity-map/-/identity-map-1.0.1.tgz#cfa23bc5840f9104ce32a65e74db7e7a974bbee1" @@ -73,22 +78,8 @@ through2 "^2.0.3" "@types/node@*": -<<<<<<< HEAD -<<<<<<< HEAD - version "8.0.58" - resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.58.tgz#5b3881c0be3a646874803fee3197ea7f1ed6df90" -======= version "8.0.53" resolved "https://registry.yarnpkg.com/@types/node/-/node-8.0.53.tgz#396b35af826fa66aad472c8cb7b8d5e277f4e6d8" ->>>>>>> Add react-router to allow use of the browser back button - -"@types/node@^6.0.46": - version "6.0.88" - resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.88.tgz#f618f11a944f6a18d92b5c472028728a3e3d4b66" -======= - version "8.5.2" - resolved "https://registry.yarnpkg.com/@types/node/-/node-8.5.2.tgz#83b8103fa9a2c2e83d78f701a9aa7c9539739aa5" ->>>>>>> b05d21b1ba308bdb5b758d53dd79593a7a2bf26e JSONStream@^0.8.4: version "0.8.4" @@ -104,7 +95,7 @@ JSONStream@^1.0.3: jsonparse "^1.2.0" through ">=2.2.7 <3" -abab@^1.0.3: +abab@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.4.tgz#5faad9c2c07f60dd76770f71cf025b62a63cfd4e" @@ -157,7 +148,7 @@ acorn-dynamic-import@^2.0.0: dependencies: acorn "^4.0.3" -acorn-globals@^4.0.0: +acorn-globals@^4.1.0: version "4.1.0" resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.1.0.tgz#ab716025dbe17c54d3ef81d32ece2b2d99fe2538" dependencies: @@ -169,7 +160,7 @@ acorn-jsx@^3.0.0: dependencies: acorn "^3.0.4" -acorn@5.X, acorn@^5.0.0, acorn@^5.0.3, acorn@^5.1.2, acorn@^5.2.1: +acorn@5.X, acorn@^5.0.0, acorn@^5.0.3, acorn@^5.2.1, acorn@^5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.3.0.tgz#7446d39459c54fb49a80e6ee6478149b940ec822" @@ -509,8 +500,8 @@ assert@^1.1.1, assert@^1.4.0: util "0.10.3" assertion-error@^1.0.1: - version "1.0.2" - resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.0.2.tgz#13ca515d86206da0bac66e834dd397d87581094c" + version "1.1.0" + resolved "https://registry.yarnpkg.com/assertion-error/-/assertion-error-1.1.0.tgz#e60b6b0e8f301bd97e5375215bda406c85118c0b" assign-symbols@^1.0.0: version "1.0.0" @@ -527,8 +518,8 @@ astw@^2.0.0: acorn "^4.0.3" async-done@^1.2.0, async-done@^1.2.2: - version "1.2.3" - resolved "https://registry.yarnpkg.com/async-done/-/async-done-1.2.3.tgz#6c7abc7d61ca27fe6f1f2ba3206ea9ae60a43983" + version "1.2.4" + resolved "https://registry.yarnpkg.com/async-done/-/async-done-1.2.4.tgz#17b0fcefb9a33cb9de63daa8904c0a65bd535fa0" dependencies: end-of-stream "^1.1.0" once "^1.3.2" @@ -555,6 +546,10 @@ async-foreach@^0.1.3: version "0.1.3" resolved "https://registry.yarnpkg.com/async-foreach/-/async-foreach-0.1.3.tgz#36121f845c0578172de419a97dbeb1d16ec34542" +async-limiter@~1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/async-limiter/-/async-limiter-1.0.0.tgz#78faed8c3d074ab81f22b4e985d79e8738f720f8" + async-reduce@0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/async-reduce/-/async-reduce-0.0.1.tgz#b236b5f376d6fae381cded9006aa7f2c73b17f31" @@ -611,14 +606,14 @@ autoprefixer@^6.0.0: postcss-value-parser "^3.2.3" autoprefixer@^7.0.0, autoprefixer@^7.1.2: - version "7.2.3" - resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.3.tgz#c2841e38b7940c2d0a9bbffd72c75f33637854f8" + version "7.2.5" + resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-7.2.5.tgz#04ccbd0c6a61131b6d13f53d371926092952d192" dependencies: - browserslist "^2.10.0" - caniuse-lite "^1.0.30000783" + browserslist "^2.11.1" + caniuse-lite "^1.0.30000791" normalize-range "^0.1.2" num2fraction "^1.2.2" - postcss "^6.0.14" + postcss "^6.0.16" postcss-value-parser "^3.2.3" await-semaphore@^0.1.1: @@ -670,13 +665,13 @@ babel-core@^6.0.14, babel-core@^6.23.1, babel-core@^6.24.1, babel-core@^6.26.0: source-map "^0.5.6" babel-eslint@^8.0.0: - version "8.1.2" - resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.1.2.tgz#a39230b0c20ecbaa19a35d5633bf9b9ca2c8116f" + version "8.2.1" + resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-8.2.1.tgz#136888f3c109edc65376c23ebf494f36a3e03951" dependencies: - "@babel/code-frame" "7.0.0-beta.31" - "@babel/traverse" "7.0.0-beta.31" - "@babel/types" "7.0.0-beta.31" - babylon "7.0.0-beta.31" + "@babel/code-frame" "7.0.0-beta.36" + "@babel/traverse" "7.0.0-beta.36" + "@babel/types" "7.0.0-beta.36" + babylon "7.0.0-beta.36" eslint-scope "~3.7.1" eslint-visitor-keys "^1.0.0" @@ -1244,7 +1239,7 @@ babel-preset-env@^1.3.2: invariant "^2.2.2" semver "^5.3.0" -babel-preset-es2015@^6.22.0, babel-preset-es2015@^6.24.0, babel-preset-es2015@^6.6.0: +babel-preset-es2015@^6.22.0, babel-preset-es2015@^6.6.0: version "6.24.1" resolved "https://registry.yarnpkg.com/babel-preset-es2015/-/babel-preset-es2015-6.24.1.tgz#d44050d6bc2c9feea702aaf38d727a0210538939" dependencies: @@ -1388,9 +1383,9 @@ babelify@^8.0.0: version "8.0.0" resolved "https://registry.yarnpkg.com/babelify/-/babelify-8.0.0.tgz#6f60f5f062bfe7695754ef2403b842014a580ed3" -babylon@7.0.0-beta.31: - version "7.0.0-beta.31" - resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.31.tgz#7ec10f81e0e456fd0f855ad60fa30c2ac454283f" +babylon@7.0.0-beta.36: + version "7.0.0-beta.36" + resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.36.tgz#3a3683ba6a9a1e02b0aa507c8e63435e39305b9e" babylon@^6.18.0: version "6.18.0" @@ -1536,8 +1531,8 @@ bindings@^1.2.1: resolved "https://registry.yarnpkg.com/bindings/-/bindings-1.3.0.tgz#b346f6ecf6a95f5a815c5839fc7cdb22502f1ed7" bip39@^2.2.0, bip39@^2.4.0: - version "2.4.0" - resolved "https://registry.yarnpkg.com/bip39/-/bip39-2.4.0.tgz#a0b8adbf163f53495f00f05d9ede7c25369ccf13" + version "2.5.0" + resolved "https://registry.yarnpkg.com/bip39/-/bip39-2.5.0.tgz#51cbd5179460504a63ea3c000db3f787ca051235" dependencies: create-hash "^1.1.0" pbkdf2 "^3.0.9" @@ -1698,12 +1693,13 @@ browser-pack@^5.0.1: umd "^3.0.0" browser-pack@^6.0.1: - version "6.0.2" - resolved "https://registry.yarnpkg.com/browser-pack/-/browser-pack-6.0.2.tgz#f86cd6cef4f5300c8e63e07a4d512f65fbff4531" + version "6.0.3" + resolved "https://registry.yarnpkg.com/browser-pack/-/browser-pack-6.0.3.tgz#91ca96518583ef580ab063a309de62e407767a39" dependencies: JSONStream "^1.0.3" - combine-source-map "~0.7.1" + combine-source-map "~0.8.0" defined "^1.0.0" + safe-buffer "^5.1.1" through2 "^2.0.0" umd "^3.0.0" @@ -1805,7 +1801,7 @@ browserify-zlib@^0.2.0, browserify-zlib@~0.2.0: dependencies: pako "~1.0.5" -browserify@^14.0.0, browserify@^14.4.0: +browserify@^14.4.0: version "14.5.0" resolved "https://registry.yarnpkg.com/browserify/-/browserify-14.5.0.tgz#0bbbce521acd6e4d1d54d8e9365008efb85a9cc5" dependencies: @@ -1857,6 +1853,59 @@ browserify@^14.0.0, browserify@^14.4.0: vm-browserify "~0.0.1" xtend "^4.0.0" +browserify@^15.2.0: + version "15.2.0" + resolved "https://registry.yarnpkg.com/browserify/-/browserify-15.2.0.tgz#1e121ba1fa72cf9fd2d8df002f8674b68b45df89" + dependencies: + JSONStream "^1.0.3" + assert "^1.4.0" + browser-pack "^6.0.1" + browser-resolve "^1.11.0" + browserify-zlib "~0.2.0" + buffer "^5.0.2" + cached-path-relative "^1.0.0" + concat-stream "~1.5.1" + console-browserify "^1.1.0" + constants-browserify "~1.0.0" + crypto-browserify "^3.0.0" + defined "^1.0.0" + deps-sort "^2.0.0" + domain-browser "~1.1.0" + duplexer2 "~0.1.2" + events "~1.1.0" + glob "^7.1.0" + has "^1.0.0" + htmlescape "^1.1.0" + https-browserify "^1.0.0" + inherits "~2.0.1" + insert-module-globals "^7.0.0" + labeled-stream-splicer "^2.0.0" + mkdirp "^0.5.0" + module-deps "^5.0.1" + os-browserify "~0.3.0" + parents "^1.0.1" + path-browserify "~0.0.0" + process "~0.11.0" + punycode "^1.3.2" + querystring-es3 "~0.2.0" + read-only-stream "^2.0.0" + readable-stream "^2.0.2" + resolve "^1.1.4" + shasum "^1.0.0" + shell-quote "^1.6.1" + stream-browserify "^2.0.0" + stream-http "^2.0.0" + string_decoder "~1.0.0" + subarg "^1.0.0" + syntax-error "^1.1.1" + through2 "^2.0.0" + timers-browserify "^1.0.1" + tty-browserify "~0.0.0" + url "~0.11.0" + util "~0.10.1" + vm-browserify "~0.0.1" + xtend "^4.0.0" + browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.7.6: version "1.7.7" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-1.7.7.tgz#0bd76704258be829b2398bb50e4b62d1a166b0b9" @@ -1864,12 +1913,12 @@ browserslist@^1.1.1, browserslist@^1.1.3, browserslist@^1.7.6: caniuse-db "^1.0.30000639" electron-to-chromium "^1.2.7" -browserslist@^2.1.2, browserslist@^2.10.0: - version "2.10.0" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.10.0.tgz#bac5ee1cc69ca9d96403ffb8a3abdc5b6aed6346" +browserslist@^2.1.2, browserslist@^2.11.1: + version "2.11.3" + resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-2.11.3.tgz#fe36167aed1bbcde4827ebfe71347a2cc70b99b2" dependencies: - caniuse-lite "^1.0.30000780" - electron-to-chromium "^1.3.28" + caniuse-lite "^1.0.30000792" + electron-to-chromium "^1.3.30" bs58@^2.0.1: version "2.0.1" @@ -2015,12 +2064,12 @@ camelcase@^4.1.0: resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd" caniuse-db@^1.0.30000187, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639: - version "1.0.30000784" - resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000784.tgz#1be95012d9489c7719074f81aee57dbdffe6361b" + version "1.0.30000798" + resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000798.tgz#92f26f77f89cc2a4d60487f41e0b3d2a6c3fe341" -caniuse-lite@^1.0.30000780, caniuse-lite@^1.0.30000783: - version "1.0.30000784" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000784.tgz#129ced74e9a1280a441880b6cd2bce30ef59e6c0" +caniuse-lite@^1.0.30000791, caniuse-lite@^1.0.30000792: + version "1.0.30000792" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000792.tgz#d0cea981f8118f3961471afbb43c9a1e5bbf0332" caseless@~0.11.0: version "0.11.0" @@ -2185,13 +2234,12 @@ circular-json@^0.3.1: resolved "https://registry.yarnpkg.com/circular-json/-/circular-json-0.3.3.tgz#815c99ea84f6809529d2f45791bdf82711352d66" class-utils@^0.3.5: - version "0.3.5" - resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.5.tgz#17e793103750f9627b2176ea34cfd1b565903c80" + version "0.3.6" + resolved "https://registry.yarnpkg.com/class-utils/-/class-utils-0.3.6.tgz#f93369ae8b9a7ce02fd41faad0ca83033190c463" dependencies: arr-union "^3.1.0" define-property "^0.2.5" isobject "^3.0.0" - lazy-cache "^2.0.2" static-extend "^0.1.1" classnames@^2.2.4, classnames@^2.2.5: @@ -2228,6 +2276,14 @@ cliui@^3.0.3, cliui@^3.2.0: strip-ansi "^3.0.1" wrap-ansi "^2.0.0" +cliui@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.0.0.tgz#743d4650e05f36d1ed2575b59638d87322bfbbcc" + dependencies: + string-width "^2.1.1" + strip-ansi "^4.0.0" + wrap-ansi "^2.0.0" + clone-buffer@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/clone-buffer/-/clone-buffer-1.0.0.tgz#e3e25b207ac4e701af721e2cb5a16792cac3dc58" @@ -2380,6 +2436,15 @@ combine-source-map@~0.7.1: lodash.memoize "~3.0.3" source-map "~0.5.3" +combine-source-map@~0.8.0: + version "0.8.0" + resolved "https://registry.yarnpkg.com/combine-source-map/-/combine-source-map-0.8.0.tgz#a58d0df042c186fcf822a8e8015f5450d2d79a8b" + dependencies: + convert-source-map "~1.1.0" + inline-source-map "~0.6.0" + lodash.memoize "~3.0.3" + source-map "~0.5.3" + combined-stream@^1.0.5, combined-stream@~1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.5.tgz#938370a57b4a51dea2c77c15d5c5fdf895164009" @@ -2396,11 +2461,7 @@ commander@2.9.0: dependencies: graceful-readlink ">= 1.0.0" -commander@^2.5.0, commander@^2.6.0, commander@^2.9.0, commander@~2.12.1: - version "2.12.2" - resolved "https://registry.yarnpkg.com/commander/-/commander-2.12.2.tgz#0f5946c427ed9ec0d91a46bb9def53e54650e555" - -commander@~2.13.0: +commander@^2.5.0, commander@^2.6.0, commander@^2.9.0, commander@~2.13.0: version "2.13.0" resolved "https://registry.yarnpkg.com/commander/-/commander-2.13.0.tgz#6964bca67685df7c1f1430c584f07d7597885b9c" @@ -2502,7 +2563,7 @@ content-disposition@0.5.2: version "0.5.2" resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.2.tgz#0cf68bb9ddf5f2be7961c3a85178cb85dba78cb4" -content-type-parser@^1.0.1: +content-type-parser@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/content-type-parser/-/content-type-parser-1.0.2.tgz#caabe80623e63638b2502fd4c7f12ff4ce2352e7" @@ -2960,10 +3021,14 @@ delegates@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a" -depd@1.1.1, depd@~1.1.0, depd@~1.1.1: +depd@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359" +depd@~1.1.0, depd@~1.1.1: + version "1.1.2" + resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9" + deps-sort@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/deps-sort/-/deps-sort-2.0.0.tgz#091724902e84658260eb910748cccd1af6e21fb5" @@ -3037,6 +3102,14 @@ detective@^4.0.0, detective@^4.3.1: acorn "^5.2.1" defined "^1.0.0" +detective@^5.0.2: + version "5.0.2" + resolved "https://registry.yarnpkg.com/detective/-/detective-5.0.2.tgz#84ec2e1c581e74211e2ae4ffce1edf52c3263f84" + dependencies: + "@browserify/acorn5-object-spread" "^5.0.1" + acorn "^5.2.1" + defined "^1.0.0" + di@^0.0.1: version "0.0.1" resolved "https://registry.yarnpkg.com/di/-/di-0.0.1.tgz#806649326ceaa7caa3306d75d985ea2748ba913c" @@ -3103,9 +3176,9 @@ dnode@^1.2.2: optionalDependencies: weak "^1.0.0" -doctrine@^2.0.0, doctrine@^2.0.2: - version "2.0.2" - resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.0.2.tgz#68f96ce8efc56cc42651f1faadb4f175273b0075" +doctrine@^2.0.2, doctrine@^2.1.0: + version "2.1.0" + resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-2.1.0.tgz#5cd01fc101621b42c4cd7f5d1a66243716d3f39d" dependencies: esutils "^2.0.2" @@ -3150,7 +3223,11 @@ dom-walk@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/dom-walk/-/dom-walk-0.1.1.tgz#672226dc74c8f799ad35307df936aba11acd6018" -domain-browser@^1.1.1, domain-browser@~1.1.0: +domain-browser@^1.1.1: + version "1.2.0" + resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda" + +domain-browser@~1.1.0: version "1.1.7" resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.1.7.tgz#867aa4b093faa05f1de08c06f4d7b21fdf8698bc" @@ -3163,8 +3240,10 @@ domelementtype@~1.1.1: resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b" domexception@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.0.tgz#81fe5df81b3f057052cde3a9fa9bf536a85b9ab0" + version "1.0.1" + resolved "https://registry.yarnpkg.com/domexception/-/domexception-1.0.1.tgz#937442644ca6a31261ef36e3ec677fe805582c90" + dependencies: + webidl-conversions "^4.0.2" domhandler@^2.3.0: version "2.4.1" @@ -3220,9 +3299,9 @@ duplexer@^0.1.1, duplexer@~0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1" -duplexify@^3.1.2, duplexify@^3.4.2, duplexify@^3.5.0: - version "3.5.1" - resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.1.tgz#4e1516be68838bc90a49994f0b39a6e5960befcd" +duplexify@^3.4.2, duplexify@^3.5.0, duplexify@^3.5.3: + version "3.5.3" + resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.5.3.tgz#8b5818800df92fd0125b27ab896491912858243e" dependencies: end-of-stream "^1.0.0" inherits "^2.0.1" @@ -3256,15 +3335,9 @@ ee-first@1.1.1: version "1.1.1" resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d" -electron-releases@^2.1.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/electron-releases/-/electron-releases-2.1.0.tgz#c5614bf811f176ce3c836e368a0625782341fd4e" - -electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.28: - version "1.3.30" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.30.tgz#9666f532a64586651fc56a72513692e820d06a80" - dependencies: - electron-releases "^2.1.0" +electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30: + version "1.3.31" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.31.tgz#00d832cba9fe2358652b0c48a8816c8e3a037e9f" elliptic@^6.0.0, elliptic@^6.2.3: version "6.4.0" @@ -3283,8 +3356,8 @@ emojis-list@^2.0.0: resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389" encodeurl@~1.0.1: - version "1.0.1" - resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.1.tgz#79e3d58655346909fe6f0f45a5de68103b294d20" + version "1.0.2" + resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59" encoding@^0.1.11: version "0.1.12" @@ -3293,8 +3366,8 @@ encoding@^0.1.11: iconv-lite "~0.4.13" end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.0: - version "1.4.0" - resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.0.tgz#7a90d833efda6cfa6eac0f4949dbb0fad3a63206" + version "1.4.1" + resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.1.tgz#ed29634d19baba463b6ce6b80a37213eab71ec43" dependencies: once "^1.4.0" @@ -3413,19 +3486,6 @@ envify@^4.0.0: enzyme-adapter-react-15@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/enzyme-adapter-react-15/-/enzyme-adapter-react-15-1.0.5.tgz#99f9a03ff2c2303e517342935798a6bdfbb75fac" -<<<<<<< HEAD - dependencies: - enzyme-adapter-utils "^1.1.0" - lodash "^4.17.4" - object.assign "^4.0.4" - object.values "^1.0.4" - prop-types "^15.5.10" - -enzyme-adapter-utils@^1.1.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.3.0.tgz#d6c85756826c257a8544d362cc7a67e97ea698c7" - dependencies: -======= dependencies: enzyme-adapter-utils "^1.1.0" lodash "^4.17.4" @@ -3437,10 +3497,9 @@ enzyme-adapter-utils@^1.1.0: version "1.2.0" resolved "https://registry.yarnpkg.com/enzyme-adapter-utils/-/enzyme-adapter-utils-1.2.0.tgz#7f4471ee0a70b91169ec8860d2bf0a6b551664b2" dependencies: ->>>>>>> Add react-router to allow use of the browser back button lodash "^4.17.4" object.assign "^4.0.4" - prop-types "^15.6.0" + prop-types "^15.5.10" enzyme@^3.2.0: version "3.3.0" @@ -3494,13 +3553,13 @@ es-to-primitive@^1.1.1: is-symbol "^1.0.1" es5-ext@^0.10.14, es5-ext@^0.10.30, es5-ext@^0.10.35, es5-ext@^0.10.9, es5-ext@~0.10.14, es5-ext@~0.10.2: - version "0.10.37" - resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.37.tgz#0ee741d148b80069ba27d020393756af257defc3" + version "0.10.38" + resolved "https://registry.yarnpkg.com/es5-ext/-/es5-ext-0.10.38.tgz#fa7d40d65bbc9bb8a67e1d3f9cc656a00530eed3" dependencies: - es6-iterator "~2.0.1" + es6-iterator "~2.0.3" es6-symbol "~3.1.1" -es6-iterator@^2.0.1, es6-iterator@~2.0.1: +es6-iterator@^2.0.1, es6-iterator@~2.0.1, es6-iterator@~2.0.3: version "2.0.3" resolved "https://registry.yarnpkg.com/es6-iterator/-/es6-iterator-2.0.3.tgz#a7de889141a05a94b0854403b2d0a0fbfa98f3b7" dependencies: @@ -3603,12 +3662,12 @@ eslint-plugin-mocha@^4.9.0: ramda "^0.24.1" eslint-plugin-react@^7.4.0: - version "7.5.1" - resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.5.1.tgz#52e56e8d80c810de158859ef07b880d2f56ee30b" + version "7.6.1" + resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.6.1.tgz#5d0e908be599f0c02fbf4eef0c7ed6f29dff7633" dependencies: - doctrine "^2.0.0" + doctrine "^2.0.2" has "^1.0.1" - jsx-ast-utils "^2.0.0" + jsx-ast-utils "^2.0.1" prop-types "^15.6.0" eslint-scope@^3.7.1, eslint-scope@~3.7.1: @@ -3623,8 +3682,8 @@ eslint-visitor-keys@^1.0.0: resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#3f3180fb2e291017716acb4c9d6d5b5c34a6a81d" eslint@^4.0.0, eslint@^4.2.0: - version "4.14.0" - resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.14.0.tgz#96609768d1dd23304faba2d94b7fefe5a5447a82" + version "4.16.0" + resolved "https://registry.yarnpkg.com/eslint/-/eslint-4.16.0.tgz#934ada9e98715e1d7bbfd6f6f0519ed2fab35cc1" dependencies: ajv "^5.3.0" babel-code-frame "^6.22.0" @@ -3632,7 +3691,7 @@ eslint@^4.0.0, eslint@^4.2.0: concat-stream "^1.6.0" cross-spawn "^5.1.0" debug "^3.1.0" - doctrine "^2.0.2" + doctrine "^2.1.0" eslint-scope "^3.7.1" eslint-visitor-keys "^1.0.0" espree "^3.5.2" @@ -3747,19 +3806,21 @@ eth-block-tracker@^1.0.7: tape "^4.6.3" eth-block-tracker@^2.1.2, eth-block-tracker@^2.2.0, eth-block-tracker@^2.2.2: - version "2.2.2" - resolved "https://registry.yarnpkg.com/eth-block-tracker/-/eth-block-tracker-2.2.2.tgz#b3d72cd82ba5ee37471d22bac4f56387ee4137cf" + version "2.3.0" + resolved "https://registry.yarnpkg.com/eth-block-tracker/-/eth-block-tracker-2.3.0.tgz#4cb782c8ef8fde2f5dc894921ae1f5c1077c35a4" dependencies: async-eventemitter ahultgren/async-eventemitter#fa06e39e56786ba541c180061dbf2c0a5bbf951c - babelify "^7.3.0" eth-query "^2.1.0" + ethereumjs-tx "^1.3.3" + ethereumjs-util "^5.1.3" ethjs-util "^0.1.3" + json-rpc-engine "^3.6.0" pify "^2.3.0" tape "^4.6.3" eth-contract-metadata@^1.1.5: - version "1.3.0" - resolved "https://registry.yarnpkg.com/eth-contract-metadata/-/eth-contract-metadata-1.3.0.tgz#caf3cdc3d69995b6d7532c9d96fedbad46361ca8" + version "1.5.0" + resolved "https://registry.yarnpkg.com/eth-contract-metadata/-/eth-contract-metadata-1.5.0.tgz#97fbbfe588b66b55f2830dae0fa0ccdb40280128" eth-ens-namehash@^1.0.2: version "1.0.2" @@ -3768,17 +3829,18 @@ eth-ens-namehash@^1.0.2: idna-uts46 "^1.0.1" js-sha3 "^0.5.7" -eth-hd-keyring@^1.2.1: - version "1.2.1" - resolved "https://registry.yarnpkg.com/eth-hd-keyring/-/eth-hd-keyring-1.2.1.tgz#15ab3919b4153a8497e14673e8e8039e5965131c" +eth-hd-keyring@^1.2.1, eth-hd-keyring@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/eth-hd-keyring/-/eth-hd-keyring-1.2.2.tgz#ad5f479074436a93b439b0b95c79095c28791882" dependencies: bip39 "^2.2.0" - eth-sig-util "^1.3.0" + eth-sig-util "^1.4.2" ethereumjs-util "^5.1.1" ethereumjs-wallet "^0.6.0" events "^1.1.1" + xtend "^4.0.1" -eth-json-rpc-filters@^1.2.4: +eth-json-rpc-filters@^1.2.5: version "1.2.5" resolved "https://registry.yarnpkg.com/eth-json-rpc-filters/-/eth-json-rpc-filters-1.2.5.tgz#2d119830d91c300396e0b00a00e884de69a5cd8b" dependencies: @@ -3787,17 +3849,18 @@ eth-json-rpc-filters@^1.2.4: json-rpc-engine "^3.4.0" lodash.flatmap "^4.5.0" -eth-json-rpc-infura@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/eth-json-rpc-infura/-/eth-json-rpc-infura-1.0.2.tgz#f0c5e7e04e2b65336b2a5c049bc64a2980da7a0a" +eth-json-rpc-infura@^2.0.5: + version "2.0.11" + resolved "https://registry.yarnpkg.com/eth-json-rpc-infura/-/eth-json-rpc-infura-2.0.11.tgz#134bf54ff15e96a9116424c0db9b66aa079bfbbe" dependencies: eth-json-rpc-middleware "^1.5.0" json-rpc-engine "^3.4.0" + json-rpc-error "^2.0.0" tape "^4.8.0" eth-json-rpc-middleware@^1.0.0, eth-json-rpc-middleware@^1.2.7, eth-json-rpc-middleware@^1.5.0: - version "1.5.0" - resolved "https://registry.yarnpkg.com/eth-json-rpc-middleware/-/eth-json-rpc-middleware-1.5.0.tgz#16b1053386aa3803b125732aa6de07eadf068729" + version "1.5.2" + resolved "https://registry.yarnpkg.com/eth-json-rpc-middleware/-/eth-json-rpc-middleware-1.5.2.tgz#14cb0af1e9910c24dd063beabbbb7142d39d9bb9" dependencies: async "^2.5.0" eth-query "^2.1.2" @@ -3807,21 +3870,22 @@ eth-json-rpc-middleware@^1.0.0, eth-json-rpc-middleware@^1.2.7, eth-json-rpc-mid ethereumjs-util "^5.1.2" ethereumjs-vm "^2.1.0" fetch-ponyfill "^4.0.0" + json-rpc-engine "^3.6.0" json-rpc-error "^2.0.0" json-stable-stringify "^1.0.1" promise-to-callback "^1.0.0" tape "^4.6.3" -eth-keyring-controller@^2.1.3: - version "2.1.3" - resolved "https://registry.yarnpkg.com/eth-keyring-controller/-/eth-keyring-controller-2.1.3.tgz#4ba11f677daaf68f48e1b438df420f616b876aeb" +eth-keyring-controller@^2.1.4: + version "2.1.4" + resolved "https://registry.yarnpkg.com/eth-keyring-controller/-/eth-keyring-controller-2.1.4.tgz#0518d9d89af0d8af362a2821e4d550a8be14a807" dependencies: bip39 "^2.4.0" bluebird "^3.5.0" browser-passworder "^2.0.3" - eth-hd-keyring "^1.2.1" + eth-hd-keyring "^1.2.2" eth-sig-util "^1.4.0" - eth-simple-keyring "^1.2.0" + eth-simple-keyring "^1.2.1" ethereumjs-util "^5.1.2" loglevel "^1.5.0" obs-store "^2.4.1" @@ -3840,21 +3904,22 @@ eth-query@^2.0.2, eth-query@^2.1.0, eth-query@^2.1.2: json-rpc-random-id "^1.0.0" xtend "^4.0.1" -eth-sig-util@^1.3.0, eth-sig-util@^1.4.0: - version "1.4.1" - resolved "https://registry.yarnpkg.com/eth-sig-util/-/eth-sig-util-1.4.1.tgz#dfcde3cbd03c38d429ad8695938a2678ec56f1ae" +eth-sig-util@^1.3.0, eth-sig-util@^1.4.0, eth-sig-util@^1.4.2: + version "1.4.2" + resolved "https://registry.yarnpkg.com/eth-sig-util/-/eth-sig-util-1.4.2.tgz#8d958202c7edbaae839707fba6f09ff327606210" dependencies: ethereumjs-abi "git+https://github.com/ethereumjs/ethereumjs-abi.git" ethereumjs-util "^5.1.1" -eth-simple-keyring@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/eth-simple-keyring/-/eth-simple-keyring-1.2.0.tgz#b151d2c75877e2cddf94ae5feae78214cf198846" +eth-simple-keyring@^1.2.1: + version "1.2.1" + resolved "https://registry.yarnpkg.com/eth-simple-keyring/-/eth-simple-keyring-1.2.1.tgz#6d7b352dc5a9a5020d61f69faf21efb2f6363f45" dependencies: - eth-sig-util "^1.3.0" + eth-sig-util "^1.4.2" ethereumjs-util "^5.1.1" ethereumjs-wallet "^0.6.0" events "^1.1.1" + xtend "^4.0.1" eth-token-tracker@^1.1.4: version "1.1.4" @@ -3937,17 +4002,16 @@ ethereumjs-util@4.5.0, ethereumjs-util@^4.0.1, ethereumjs-util@^4.3.0, ethereumj rlp "^2.0.0" secp256k1 "^3.0.1" -ethereumjs-util@^5.0.0, ethereumjs-util@^5.0.1, ethereumjs-util@^5.1.1, ethereumjs-util@^5.1.2: - version "5.1.2" - resolved "https://registry.yarnpkg.com/ethereumjs-util/-/ethereumjs-util-5.1.2.tgz#25ba0215cbb4c2f0b108a6f96af2a2e62e45921f" +ethereumjs-util@^5.0.0, ethereumjs-util@^5.0.1, ethereumjs-util@^5.1.1, ethereumjs-util@^5.1.2, ethereumjs-util@^5.1.3: + version "5.1.3" + resolved "https://registry.yarnpkg.com/ethereumjs-util/-/ethereumjs-util-5.1.3.tgz#0c1f6efb1da9c5b6720a65697859fc0be6672df0" dependencies: - babel-preset-es2015 "^6.24.0" - babelify "^7.3.0" bn.js "^4.8.0" create-hash "^1.1.2" ethjs-util "^0.1.3" keccak "^1.0.2" rlp "^2.0.0" + safe-buffer "^5.1.1" secp256k1 "^3.0.1" "ethereumjs-util@github:ethereumjs/ethereumjs-util#ac5d0908536b447083ea422b435da27f26615de9": @@ -4076,28 +4140,16 @@ ethjs-query@^0.2.4, ethjs-query@^0.2.6, ethjs-query@^0.2.9: ethjs-rpc "0.1.5" ethjs-query@^0.3.1: -<<<<<<< HEAD - version "0.3.2" - resolved "https://registry.yarnpkg.com/ethjs-query/-/ethjs-query-0.3.2.tgz#f488a48ce1994cd4c77eccb7b52902c6f29cfd85" - dependencies: - ethjs-format "0.2.4" - ethjs-rpc "0.1.8" -======= version "0.3.1" resolved "https://registry.yarnpkg.com/ethjs-query/-/ethjs-query-0.3.1.tgz#aed5b60bdb7e73ad831d1218c8b067310013b86f" dependencies: ethjs-format "0.2.4" ethjs-rpc "0.1.5" ->>>>>>> Add react-router to allow use of the browser back button ethjs-rpc@0.1.5: version "0.1.5" resolved "https://registry.yarnpkg.com/ethjs-rpc/-/ethjs-rpc-0.1.5.tgz#099e22f27dc4c18b6978a485fc36b1b0f7969080" -ethjs-rpc@0.1.8: - version "0.1.8" - resolved "https://registry.yarnpkg.com/ethjs-rpc/-/ethjs-rpc-0.1.8.tgz#1676740e41c7228196a71189d33f15c9c85b599d" - ethjs-schema@0.1.5: version "0.1.5" resolved "https://registry.yarnpkg.com/ethjs-schema/-/ethjs-schema-0.1.5.tgz#59740e3b3977bcdbb9b11bc3068201e8aceabb0d" @@ -4304,7 +4356,7 @@ extend-shallow@^2.0.1: dependencies: is-extendable "^0.1.0" -extend-shallow@^3.0.0: +extend-shallow@^3.0.0, extend-shallow@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-3.0.2.tgz#26a71aaf073b39fb2127172746131c2704028db8" dependencies: @@ -4344,8 +4396,8 @@ extglob@^0.3.1: is-extglob "^1.0.0" extglob@^2.0.2: - version "2.0.3" - resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.3.tgz#55e019d0c95bf873949c737b7e5172dba84ebb29" + version "2.0.4" + resolved "https://registry.yarnpkg.com/extglob/-/extglob-2.0.4.tgz#ad00fe4dc612a9232e8718711dc5cb5ab0285543" dependencies: array-unique "^0.3.2" define-property "^1.0.0" @@ -4768,11 +4820,11 @@ function-bind@^1.0.2, function-bind@^1.1.0, function-bind@^1.1.1, function-bind@ resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d" function.prototype.name@^1.0.3: - version "1.0.3" - resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.0.3.tgz#0099ae5572e9dd6f03c97d023fd92bcc5e639eac" + version "1.1.0" + resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.0.tgz#8bd763cc0af860a859cc5d49384d74b932cd2327" dependencies: define-properties "^1.1.2" - function-bind "^1.1.0" + function-bind "^1.1.1" is-callable "^1.1.3" functional-red-black-tree@^1.0.1: @@ -4981,13 +5033,9 @@ global@~4.3.0: min-document "^2.19.0" process "~0.5.1" -globals@^10.0.0: - version "10.4.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-10.4.0.tgz#5c477388b128a9e4c5c5d01c7a2aca68c68b2da7" - -globals@^11.0.1: - version "11.1.0" - resolved "https://registry.yarnpkg.com/globals/-/globals-11.1.0.tgz#632644457f5f0e3ae711807183700ebf2e4633e4" +globals@^11.0.1, globals@^11.1.0: + version "11.2.0" + resolved "https://registry.yarnpkg.com/globals/-/globals-11.2.0.tgz#aa2ece052a787563ba70a3dcd9dc2eb8a9a0488c" globals@^9.18.0: version "9.18.0" @@ -5038,8 +5086,8 @@ globule@^1.0.0: minimatch "~3.0.2" glogg@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/glogg/-/glogg-1.0.0.tgz#7fe0f199f57ac906cf512feead8f90ee4a284fc5" + version "1.0.1" + resolved "https://registry.yarnpkg.com/glogg/-/glogg-1.0.1.tgz#dcf758e44789cc3f3d32c1f3562a3676e6a34810" dependencies: sparkles "^1.0.0" @@ -5066,27 +5114,28 @@ growly@^1.3.0: resolved "https://registry.yarnpkg.com/growly/-/growly-1.3.0.tgz#f10748cbe76af964b7c96c93c6bcc28af120c081" gulp-autoprefixer@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/gulp-autoprefixer/-/gulp-autoprefixer-4.0.0.tgz#e00a8c571b85d06516ac26341be90dfd9fc1eab0" + version "4.1.0" + resolved "https://registry.yarnpkg.com/gulp-autoprefixer/-/gulp-autoprefixer-4.1.0.tgz#064af73cc02cadac8ff34d0bf93ffdfb94ea12aa" dependencies: autoprefixer "^7.0.0" - gulp-util "^3.0.0" + fancy-log "^1.3.2" + plugin-error "^0.1.2" postcss "^6.0.1" through2 "^2.0.0" vinyl-sourcemaps-apply "^0.2.0" gulp-babel@^7.0.0: - version "7.0.0" - resolved "https://registry.yarnpkg.com/gulp-babel/-/gulp-babel-7.0.0.tgz#7b93c975159f7a0553e4263b4a55100ccc239b28" + version "7.0.1" + resolved "https://registry.yarnpkg.com/gulp-babel/-/gulp-babel-7.0.1.tgz#b9c8e29fa376b36c57989db820fc1c1715bb47cb" dependencies: - gulp-util "^3.0.0" + plugin-error "^1.0.1" replace-ext "0.0.1" through2 "^2.0.0" vinyl-sourcemaps-apply "^0.2.0" gulp-cli@^2.0.0: - version "2.0.0" - resolved "https://registry.yarnpkg.com/gulp-cli/-/gulp-cli-2.0.0.tgz#7f049ad298ed388cda9bd813b5d7062407d62cad" + version "2.0.1" + resolved "https://registry.yarnpkg.com/gulp-cli/-/gulp-cli-2.0.1.tgz#7847e220cb3662f2be8a6d572bf14e17be5a994b" dependencies: ansi-colors "^1.0.1" archy "^1.0.0" @@ -5094,25 +5143,26 @@ gulp-cli@^2.0.0: color-support "^1.1.3" concat-stream "^1.6.0" copy-props "^2.0.1" - fancy-log "^1.1.0" + fancy-log "^1.3.2" gulplog "^1.0.0" - interpret "^1.0.0" + interpret "^1.1.0" isobject "^3.0.1" - liftoff "^2.3.0" + liftoff "^2.5.0" matchdep "^2.0.0" mute-stdout "^1.0.0" pretty-hrtime "^1.0.0" replace-homedir "^1.0.0" - semver-greatest-satisfied-range "^1.0.0" + semver-greatest-satisfied-range "^1.1.0" v8flags "^3.0.1" yargs "^7.1.0" gulp-eslint@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/gulp-eslint/-/gulp-eslint-4.0.0.tgz#16d9ea4d696e7b7a9d65eeb1aa5bc4ba0a22c7f7" + version "4.0.2" + resolved "https://registry.yarnpkg.com/gulp-eslint/-/gulp-eslint-4.0.2.tgz#18a2a6768e4404cbf3e203239cb57474168fa606" dependencies: eslint "^4.0.0" - gulp-util "^3.0.8" + fancy-log "^1.3.2" + plugin-error "^1.0.0" gulp-if@^2.0.2: version "2.0.2" @@ -5168,8 +5218,8 @@ gulp-sass@^3.1.0: vinyl-sourcemaps-apply "^0.2.0" gulp-sourcemaps@^2.6.0: - version "2.6.2" - resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.2.tgz#4f41c72b35a7ea06b666d2e3f57917e2c0e71c4e" + version "2.6.4" + resolved "https://registry.yarnpkg.com/gulp-sourcemaps/-/gulp-sourcemaps-2.6.4.tgz#cbb2008450b1bcce6cd23bf98337be751bf6e30a" dependencies: "@gulp-sourcemaps/identity-map" "1.X" "@gulp-sourcemaps/map-sources" "1.X" @@ -5179,7 +5229,7 @@ gulp-sourcemaps@^2.6.0: debug-fabulous "1.X" detect-newline "2.X" graceful-fs "4.X" - source-map "0.X" + source-map "~0.6.0" strip-bom-string "1.X" through2 "2.X" @@ -5228,7 +5278,7 @@ gulp-uglify@^3.0.0: uglify-js "^3.0.5" vinyl-sourcemaps-apply "^0.2.0" -gulp-util@^3.0, gulp-util@^3.0.0, gulp-util@^3.0.2, gulp-util@^3.0.7, gulp-util@^3.0.8, gulp-util@~3.0.0: +gulp-util@^3.0, gulp-util@^3.0.2, gulp-util@^3.0.7, gulp-util@^3.0.8, gulp-util@~3.0.0: version "3.0.8" resolved "https://registry.yarnpkg.com/gulp-util/-/gulp-util-3.0.8.tgz#0054e1e744502e27c04c187c3ecc505dd54bbb4f" dependencies: @@ -5267,12 +5317,13 @@ gulp-watch@^4.3.5: vinyl-file "^2.0.0" gulp-zip@^4.0.0: - version "4.0.0" - resolved "https://registry.yarnpkg.com/gulp-zip/-/gulp-zip-4.0.0.tgz#1cefc08b4bf36df4b5b1e7c6b36ee55ebbe4a881" + version "4.1.0" + resolved "https://registry.yarnpkg.com/gulp-zip/-/gulp-zip-4.1.0.tgz#dab178bd99afa190923f1eb78abaf0db47817704" dependencies: get-stream "^3.0.0" - gulp-util "^3.0.0" + plugin-error "^0.1.2" through2 "^2.0.1" + vinyl "^2.1.0" yazl "^2.1.0" "gulp@github:gulpjs/gulp#4.0": @@ -5493,11 +5544,7 @@ hoek@4.x.x: version "4.2.0" resolved "https://registry.yarnpkg.com/hoek/-/hoek-4.2.0.tgz#72d9d0754f7fe25ca2d01ad8f8f9a9449a89526d" -<<<<<<< HEAD -hoist-non-react-statics@^2.2.1, hoist-non-react-statics@^2.3.0: -======= -hoist-non-react-statics@^2.2.1, hoist-non-react-statics@^2.3.1: ->>>>>>> b05d21b1ba308bdb5b758d53dd79593a7a2bf26e +hoist-non-react-statics@^2.2.1, hoist-non-react-statics@^2.3.0, hoist-non-react-statics@^2.3.1: version "2.3.1" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.3.1.tgz#343db84c6018c650778898240135a1420ee22ce0" @@ -5518,7 +5565,7 @@ hosted-git-info@^2.1.4: version "2.5.0" resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-2.5.0.tgz#6d60e34b3abbc8313062c3b798ef8d901a07af3c" -html-encoding-sniffer@^1.0.1: +html-encoding-sniffer@^1.0.2: version "1.0.2" resolved "https://registry.yarnpkg.com/html-encoding-sniffer/-/html-encoding-sniffer-1.0.2.tgz#e70d84b94da53aa375e11fe3a351be6642ca46f8" dependencies: @@ -5763,7 +5810,7 @@ insert-module-globals@^7.0.0: through2 "^2.0.0" xtend "^4.0.0" -interpret@^1.0.0: +interpret@^1.0.0, interpret@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.1.0.tgz#7ed1b1410c6a0e0f78cf95d3b8440c63f78b8614" @@ -6065,8 +6112,8 @@ is-relative@^1.0.0: is-unc-path "^1.0.0" is-resolvable@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.0.1.tgz#acca1cd36dbe44b974b924321555a70ba03b1cf4" + version "1.1.0" + resolved "https://registry.yarnpkg.com/is-resolvable/-/is-resolvable-1.1.0.tgz#fb18f87ce1feb925169c9a407c19318a3206ed88" is-stream@^1.0.1, is-stream@^1.1.0: version "1.1.0" @@ -6228,8 +6275,8 @@ jazzicon@^1.2.0: raphael "^2.2.0" js-base64@^2.1.8, js-base64@^2.1.9: - version "2.4.0" - resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.0.tgz#9e566fee624751a1d720c966cd6226d29d4025aa" + version "2.4.3" + resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.4.3.tgz#2e545ec2b0f2957f41356510205214e98fad6582" js-beautify@~1.5.4: version "1.5.10" @@ -6275,33 +6322,35 @@ jsdom-global@^3.0.2: resolved "https://registry.yarnpkg.com/jsdom-global/-/jsdom-global-3.0.2.tgz#6bd299c13b0c4626b2da2c0393cd4385d606acb9" jsdom@^11.1.0: - version "11.5.1" - resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.5.1.tgz#5df753b8d0bca20142ce21f4f6c039f99a992929" + version "11.6.1" + resolved "https://registry.yarnpkg.com/jsdom/-/jsdom-11.6.1.tgz#43fffc10072597a8ee9680cba46900d9e4dbeba2" dependencies: - abab "^1.0.3" - acorn "^5.1.2" - acorn-globals "^4.0.0" + abab "^1.0.4" + acorn "^5.3.0" + acorn-globals "^4.1.0" array-equal "^1.0.0" browser-process-hrtime "^0.1.2" - content-type-parser "^1.0.1" + content-type-parser "^1.0.2" cssom ">= 0.3.2 < 0.4.0" cssstyle ">= 0.2.37 < 0.3.0" domexception "^1.0.0" escodegen "^1.9.0" - html-encoding-sniffer "^1.0.1" + html-encoding-sniffer "^1.0.2" left-pad "^1.2.0" nwmatcher "^1.4.3" - parse5 "^3.0.2" - pn "^1.0.0" + parse5 "^4.0.0" + pn "^1.1.0" request "^2.83.0" - request-promise-native "^1.0.3" - sax "^1.2.1" - symbol-tree "^3.2.1" + request-promise-native "^1.0.5" + sax "^1.2.4" + symbol-tree "^3.2.2" tough-cookie "^2.3.3" + w3c-hr-time "^1.0.1" webidl-conversions "^4.0.2" - whatwg-encoding "^1.0.1" - whatwg-url "^6.3.0" - xml-name-validator "^2.0.1" + whatwg-encoding "^1.0.3" + whatwg-url "^6.4.0" + ws "^4.0.0" + xml-name-validator "^3.0.0" jsesc@^1.3.0: version "1.3.0" @@ -6339,9 +6388,9 @@ json-rpc-engine@3.2.0: babelify "^7.3.0" json-rpc-error "^2.0.0" -json-rpc-engine@^3.0.1, json-rpc-engine@^3.1.0, json-rpc-engine@^3.4.0: - version "3.4.0" - resolved "https://registry.yarnpkg.com/json-rpc-engine/-/json-rpc-engine-3.4.0.tgz#8a1647a7f2cc7018f4802f41ec8208d281f78bfc" +json-rpc-engine@^3.0.1, json-rpc-engine@^3.1.0, json-rpc-engine@^3.4.0, json-rpc-engine@^3.6.0: + version "3.6.1" + resolved "https://registry.yarnpkg.com/json-rpc-engine/-/json-rpc-engine-3.6.1.tgz#f53084726dc6dedeead0e2c457eeb997135f1e25" dependencies: async "^2.0.1" babel-preset-env "^1.3.2" @@ -6453,7 +6502,7 @@ jstransform@^10.1.0: esprima-fb "13001.1001.0-dev-harmony-fb" source-map "0.1.31" -jsx-ast-utils@^2.0.0: +jsx-ast-utils@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.1.tgz#e801b1b39985e20fffc87b40e3748080e2dcac7f" dependencies: @@ -6693,7 +6742,7 @@ lexical-scope@^1.2.0: dependencies: astw "^2.0.0" -liftoff@^2.3.0: +liftoff@^2.5.0: version "2.5.0" resolved "https://registry.yarnpkg.com/liftoff/-/liftoff-2.5.0.tgz#2009291bb31cea861bbf10a7c15a28caf75c31ec" dependencies: @@ -6707,8 +6756,8 @@ liftoff@^2.3.0: resolve "^1.1.7" livereload-js@^2.2.0: - version "2.2.2" - resolved "https://registry.yarnpkg.com/livereload-js/-/livereload-js-2.2.2.tgz#6c87257e648ab475bc24ea257457edcc1f8d0bc2" + version "2.3.0" + resolved "https://registry.yarnpkg.com/livereload-js/-/livereload-js-2.3.0.tgz#c3ab22e8aaf5bf3505d80d098cbad67726548c9a" load-json-file@^1.0.0: version "1.1.0" @@ -6958,8 +7007,8 @@ log-symbols@^1.0.0, log-symbols@^1.0.2: chalk "^1.0.0" log-symbols@^2.0.0: - version "2.1.0" - resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.1.0.tgz#f35fa60e278832b538dc4dddcbb478a45d3e3be6" + version "2.2.0" + resolved "https://registry.yarnpkg.com/log-symbols/-/log-symbols-2.2.0.tgz#5740e1c5d6f0dfda4ad9323b5332107ef6b4c40a" dependencies: chalk "^2.0.1" @@ -6971,16 +7020,16 @@ log4js@^0.6.31: semver "~4.3.3" loglevel@^1.4.1, loglevel@^1.5.0: - version "1.6.0" - resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.0.tgz#ae0caa561111498c5ba13723d6fb631d24003934" + version "1.6.1" + resolved "https://registry.yarnpkg.com/loglevel/-/loglevel-1.6.1.tgz#e0fc95133b6ef276cdc8887cdaf24aa6f156f8fa" lolex@^1.6.0: version "1.6.0" resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.6.0.tgz#3a9a0283452a47d7439e72731b9e07d7386e49f6" lolex@^2.2.0: - version "2.3.1" - resolved "https://registry.yarnpkg.com/lolex/-/lolex-2.3.1.tgz#3d2319894471ea0950ef64692ead2a5318cff362" + version "2.3.2" + resolved "https://registry.yarnpkg.com/lolex/-/lolex-2.3.2.tgz#85f9450425103bf9e7a60668ea25dc43274ca807" longest-streak@^2.0.1: version "2.0.2" @@ -7003,9 +7052,12 @@ loud-rejection@^1.0.0: currently-unhandled "^0.4.1" signal-exit "^3.0.0" -lru-cache@2.2.x: - version "2.2.4" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-2.2.4.tgz#6c658619becf14031d0d0b594b16042ce4dc063d" +lru-cache@4.1.x, lru-cache@^4.0.1: + version "4.1.1" + resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55" + dependencies: + pseudomap "^1.0.2" + yallist "^2.1.2" lru-cache@^3.2.0: version "3.2.0" @@ -7013,13 +7065,6 @@ lru-cache@^3.2.0: dependencies: pseudomap "^1.0.1" -lru-cache@^4.0.1: - version "4.1.1" - resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.1.tgz#622e32e82488b49279114a4f9ecf45e7cd6bba55" - dependencies: - pseudomap "^1.0.2" - yallist "^2.1.2" - lru-queue@0.1: version "0.1.0" resolved "https://registry.yarnpkg.com/lru-queue/-/lru-queue-0.1.0.tgz#2738bd9f0d3cf4f84490c5736c48699ac632cda3" @@ -7272,8 +7317,8 @@ micromatch@^2.1.5, micromatch@^2.3.11, micromatch@^2.3.7: regex-cache "^0.4.2" micromatch@^3.0.4: - version "3.1.4" - resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.4.tgz#bb812e741a41f982c854e42b421a7eac458796f4" + version "3.1.5" + resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-3.1.5.tgz#d05e168c206472dfbca985bfef4f57797b4cd4ba" dependencies: arr-diff "^4.0.0" array-unique "^0.3.2" @@ -7381,8 +7426,8 @@ minimist@~0.0.1, minimist@~0.0.8: resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf" mississippi@^1.2.0: - version "1.3.0" - resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-1.3.0.tgz#d201583eb12327e3c5c1642a404a9cacf94e34f5" + version "1.3.1" + resolved "https://registry.yarnpkg.com/mississippi/-/mississippi-1.3.1.tgz#2a8bb465e86550ac8b36a7b6f45599171d78671e" dependencies: concat-stream "^1.5.0" duplexify "^3.4.2" @@ -7464,6 +7509,26 @@ module-deps@^4.0.8: through2 "^2.0.0" xtend "^4.0.0" +module-deps@^5.0.1: + version "5.0.1" + resolved "https://registry.yarnpkg.com/module-deps/-/module-deps-5.0.1.tgz#3bc47c14b0a6d925aff2ec4a177b456a96ae0396" + dependencies: + JSONStream "^1.0.3" + browser-resolve "^1.7.0" + cached-path-relative "^1.0.0" + concat-stream "~1.6.0" + defined "^1.0.0" + detective "^5.0.2" + duplexer2 "^0.1.2" + inherits "^2.0.1" + parents "^1.0.0" + readable-stream "^2.0.2" + resolve "^1.1.3" + stream-combiner2 "^1.1.1" + subarg "^1.0.0" + through2 "^2.0.0" + xtend "^4.0.0" + ms@0.7.1: version "0.7.1" resolved "https://registry.yarnpkg.com/ms/-/ms-0.7.1.tgz#9cd13c03adbff25b65effde7ce864ee952017098" @@ -7526,8 +7591,8 @@ nan@^2.0.5, nan@^2.0.8, nan@^2.2.1, nan@^2.3.0, nan@^2.3.2: resolved "https://registry.yarnpkg.com/nan/-/nan-2.8.0.tgz#ed715f3fe9de02b57a5e6252d90a96675e1f085a" nanomatch@^1.2.5: - version "1.2.6" - resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.6.tgz#f27233e97c34a8706b7e781a4bc611c957a81625" + version "1.2.7" + resolved "https://registry.yarnpkg.com/nanomatch/-/nanomatch-1.2.7.tgz#53cd4aa109ff68b7f869591fdc9d10daeeea3e79" dependencies: arr-diff "^4.0.0" array-unique "^0.3.2" @@ -7566,8 +7631,8 @@ next-tick@1: resolved "https://registry.yarnpkg.com/next-tick/-/next-tick-1.0.0.tgz#ca86d1fe8828169b0120208e3dc8424b9db8342c" nise@^1.2.0: - version "1.2.0" - resolved "https://registry.yarnpkg.com/nise/-/nise-1.2.0.tgz#079d6cadbbcb12ba30e38f1c999f36ad4d6baa53" + version "1.2.2" + resolved "https://registry.yarnpkg.com/nise/-/nise-1.2.2.tgz#9aa5edb500da38035884106e3c571341bc68b2c1" dependencies: formatio "^1.2.0" just-extend "^1.1.26" @@ -7576,8 +7641,8 @@ nise@^1.2.0: text-encoding "^0.6.4" nock@^9.0.14: - version "9.1.5" - resolved "https://registry.yarnpkg.com/nock/-/nock-9.1.5.tgz#9e4878e0e1c050bdd93ae1e326e89461ea15618b" + version "9.1.6" + resolved "https://registry.yarnpkg.com/nock/-/nock-9.1.6.tgz#16395af4c45b0fd84d1a4a9668154e16fa6624db" dependencies: chai ">=1.9.2 <4.0.0" debug "^2.2.0" @@ -7643,13 +7708,13 @@ node-libs-browser@^2.0.0: vm-browserify "0.0.4" node-notifier@^5.0.1: - version "5.1.2" - resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.1.2.tgz#2fa9e12605fa10009d44549d6fcd8a63dde0e4ff" + version "5.2.1" + resolved "https://registry.yarnpkg.com/node-notifier/-/node-notifier-5.2.1.tgz#fa313dd08f5517db0e2502e5758d664ac69f9dea" dependencies: growly "^1.3.0" - semver "^5.3.0" - shellwords "^0.1.0" - which "^1.2.12" + semver "^5.4.1" + shellwords "^0.1.1" + which "^1.3.0" node-pre-gyp@^0.6.39: version "0.6.39" @@ -8075,8 +8140,10 @@ p-finally@^1.0.0: resolved "https://registry.yarnpkg.com/p-finally/-/p-finally-1.0.0.tgz#3fbcfb15b899a44123b34b6dcc18b724336a2cae" p-limit@^1.1.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.1.0.tgz#b07ff2d9a5d88bec806035895a2bab66a27988bc" + version "1.2.0" + resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-1.2.0.tgz#0e92b6bedcb59f022c13d0f1949dc82d15909f1c" + dependencies: + p-try "^1.0.0" p-locate@^2.0.0: version "2.0.0" @@ -8088,6 +8155,10 @@ p-map@^1.1.1: version "1.2.0" resolved "https://registry.yarnpkg.com/p-map/-/p-map-1.2.0.tgz#e4e94f311eabbc8633a1e79908165fca26241b6b" +p-try@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/p-try/-/p-try-1.0.0.tgz#cbc79cdbaf8fd4228e13f621f2b1a237c1b207b3" + pako@~1.0.5: version "1.0.6" resolved "https://registry.yarnpkg.com/pako/-/pako-1.0.6.tgz#0101211baa70c4bca4a0f63f2206e97b7dfaf258" @@ -8174,12 +8245,16 @@ parse-passwd@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6" -parse5@^3.0.1, parse5@^3.0.2: +parse5@^3.0.1: version "3.0.3" resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c" dependencies: "@types/node" "*" +parse5@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/parse5/-/parse5-4.0.0.tgz#6d78656e3da8d78b4ec0b906f7c08ef1dfe3f608" + parsejson@0.0.3: version "0.0.3" resolved "https://registry.yarnpkg.com/parsejson/-/parsejson-0.0.3.tgz#ab7e3759f209ece99437973f7d0f1f64ae0e64ab" @@ -8298,6 +8373,10 @@ pbkdf2@^3.0.3, pbkdf2@^3.0.9: safe-buffer "^5.0.1" sha.js "^2.4.8" +percentile@^1.2.0: + version "1.2.0" + resolved "https://registry.yarnpkg.com/percentile/-/percentile-1.2.0.tgz#fa3b05c1ffd355b35228529834e5fa37f0bd465d" + performance-now@^0.2.0: version "0.2.0" resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-0.2.0.tgz#33ef30c5c77d4ea21c5a53869d91b56d8f2555e5" @@ -8367,6 +8446,15 @@ plugin-error@^0.1.2: arr-union "^2.0.1" extend-shallow "^1.1.2" +plugin-error@^1.0.0, plugin-error@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/plugin-error/-/plugin-error-1.0.1.tgz#77016bd8919d0ac377fdcdd0322328953ca5781c" + dependencies: + ansi-colors "^1.0.1" + arr-diff "^4.0.0" + arr-union "^3.1.0" + extend-shallow "^3.0.2" + plur@^2.0.0, plur@^2.1.0, plur@^2.1.2: version "2.1.2" resolved "https://registry.yarnpkg.com/plur/-/plur-2.1.2.tgz#7482452c1a0f508e3e344eaec312c91c29dc655a" @@ -8377,9 +8465,9 @@ pluralize@^7.0.0: version "7.0.0" resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777" -pn@^1.0.0: - version "1.0.0" - resolved "https://registry.yarnpkg.com/pn/-/pn-1.0.0.tgz#1cf5a30b0d806cd18f88fc41a6b5d4ad615b3ba9" +pn@^1.1.0: + version "1.1.0" + resolved "https://registry.yarnpkg.com/pn/-/pn-1.1.0.tgz#e2f4cef0e219f463c179ab37463e4e1ecdccbafb" pojo-migrator@^2.1.0: version "2.1.0" @@ -8482,10 +8570,10 @@ postcss-scss@^0.4.0: postcss "^5.2.13" postcss-scss@^1.0.2: - version "1.0.2" - resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-1.0.2.tgz#ff45cf3354b879ee89a4eb68680f46ac9bb14f94" + version "1.0.3" + resolved "https://registry.yarnpkg.com/postcss-scss/-/postcss-scss-1.0.3.tgz#4c00ab440fc1c994134e3d4e600c23341af6cd27" dependencies: - postcss "^6.0.3" + postcss "^6.0.15" postcss-selector-parser@^2.0.0, postcss-selector-parser@^2.1.1: version "2.2.3" @@ -8523,13 +8611,13 @@ postcss@^5.0.0, postcss@^5.0.18, postcss@^5.0.20, postcss@^5.0.21, postcss@^5.0. source-map "^0.5.6" supports-color "^3.2.3" -postcss@^6.0.1, postcss@^6.0.14, postcss@^6.0.3, postcss@^6.0.6, postcss@^6.0.8: - version "6.0.14" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.14.tgz#5534c72114739e75d0afcf017db853099f562885" +postcss@^6.0.1, postcss@^6.0.14, postcss@^6.0.15, postcss@^6.0.16, postcss@^6.0.6, postcss@^6.0.8: + version "6.0.16" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.16.tgz#112e2fe2a6d2109be0957687243170ea5589e146" dependencies: chalk "^2.3.0" source-map "^0.6.1" - supports-color "^4.4.0" + supports-color "^5.1.0" prelude-ls@~1.1.2: version "1.1.2" @@ -8607,7 +8695,6 @@ prompt@^1.0.0: utile "0.3.x" winston "2.1.x" -<<<<<<< HEAD prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8: version "15.5.10" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.5.10.tgz#2797dfc3126182e3a95e3dfbb2e893ddd7456154" @@ -8615,14 +8702,7 @@ prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.8: fbjs "^0.8.9" loose-envify "^1.3.1" -<<<<<<< HEAD -prop-types@^15.5.7, prop-types@^15.6.0: -======= prop-types@^15.5.4, prop-types@^15.5.7, prop-types@^15.6.0: ->>>>>>> Add react-router to allow use of the browser back button -======= -prop-types@^15.5.10, prop-types@^15.5.6, prop-types@^15.5.7, prop-types@^15.5.8, prop-types@^15.6.0: ->>>>>>> b05d21b1ba308bdb5b758d53dd79593a7a2bf26e version "15.6.0" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.0.tgz#ceaf083022fc46b4a35f69e13ef75aed0d639856" dependencies: @@ -8670,13 +8750,20 @@ pump@^1.0.0, pump@^1.0.2: end-of-stream "^1.1.0" once "^1.3.1" +pump@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909" + dependencies: + end-of-stream "^1.1.0" + once "^1.3.1" + pumpify@^1.3.3, pumpify@^1.3.4, pumpify@^1.3.5: - version "1.3.5" - resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.3.5.tgz#1b671c619940abcaeac0ad0e3a3c164be760993b" + version "1.4.0" + resolved "https://registry.yarnpkg.com/pumpify/-/pumpify-1.4.0.tgz#80b7c5df7e24153d03f0e7ac8a05a5d068bd07fb" dependencies: - duplexify "^3.1.2" - inherits "^2.0.1" - pump "^1.0.0" + duplexify "^3.5.3" + inherits "^2.0.3" + pump "^2.0.0" punycode@1.3.2: version "1.3.2" @@ -8790,8 +8877,8 @@ randomatic@^1.1.3: kind-of "^4.0.0" randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5: - version "2.0.5" - resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.5.tgz#dc009a246b8d09a177b4b7a0ae77bc570f4b1b79" + version "2.0.6" + resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80" dependencies: safe-buffer "^5.1.0" @@ -8830,8 +8917,8 @@ raw-body@~2.1.5: unpipe "1.0.0" rc@^1.1.7: - version "1.2.2" - resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.2.tgz#d8ce9cb57e8d64d9c7badd9876c7c34cbe3c7077" + version "1.2.4" + resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.4.tgz#a0f606caae2a3b862bbd0ef85482c0125b315fa3" dependencies: deep-extend "~0.4.0" ini "~1.3.0" @@ -8864,18 +8951,18 @@ react-hyperscript@^2.4.0: react ">= 0.12.0 < 16.0.0" react-hyperscript@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/react-hyperscript/-/react-hyperscript-3.0.0.tgz#3c16010b33175de6bc01fd1ebad0a16a9a6dc9ab" + version "3.1.0" + resolved "https://registry.yarnpkg.com/react-hyperscript/-/react-hyperscript-3.1.0.tgz#8f0fa74003b20ccee98fbb496dfb0791139a287d" -react-input-autosize@^2.1.0: - version "2.1.2" - resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.1.2.tgz#a3dc11a5517c434db25229925541309de3f7a8f5" +react-input-autosize@^2.1.2: + version "2.2.1" + resolved "https://registry.yarnpkg.com/react-input-autosize/-/react-input-autosize-2.2.1.tgz#ec428fa15b1592994fb5f9aa15bb1eb6baf420f8" dependencies: prop-types "^15.5.8" react-markdown@^3.0.0: - version "3.1.3" - resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-3.1.3.tgz#5ac1f20cb5a3e8c47b6ae3c8522e813b08f58c34" + version "3.1.4" + resolved "https://registry.yarnpkg.com/react-markdown/-/react-markdown-3.1.4.tgz#4f37aa5ac4f78f64f93b41b12ad0c08e92eb1680" dependencies: prop-types "^15.6.0" remark-parse "^4.0.0" @@ -8891,14 +8978,6 @@ react-motion@^0.5.2: prop-types "^15.5.8" raf "^3.1.0" -react-motion@^0.5.2: - version "0.5.2" - resolved "https://registry.yarnpkg.com/react-motion/-/react-motion-0.5.2.tgz#0dd3a69e411316567927917c6626551ba0607316" - dependencies: - performance-now "^0.2.0" - prop-types "^15.5.8" - raf "^3.1.0" - react-redux@^5.0.5: version "5.0.6" resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-5.0.6.tgz#23ed3a4f986359d68b5212eaaa681e60d6574946" @@ -8910,8 +8989,6 @@ react-redux@^5.0.5: loose-envify "^1.1.0" prop-types "^15.5.10" -<<<<<<< HEAD -======= react-router-dom@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-4.2.2.tgz#c8a81df3adc58bba8a76782e946cbd4eae649b8d" @@ -8935,14 +9012,13 @@ react-router@^4.2.0: prop-types "^15.5.4" warning "^3.0.0" ->>>>>>> Add react-router to allow use of the browser back button react-select@^1.0.0: - version "1.1.0" - resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.1.0.tgz#626a2de839fdea2ade74dd1b143a9bde34be6c82" + version "1.2.1" + resolved "https://registry.yarnpkg.com/react-select/-/react-select-1.2.1.tgz#a2fe58a569eb14dcaa6543816260b97e538120d1" dependencies: classnames "^2.2.4" prop-types "^15.5.8" - react-input-autosize "^2.1.0" + react-input-autosize "^2.1.2" react-simple-file-input@^2.0.0: version "2.0.1" @@ -9090,7 +9166,7 @@ read@1.0.x: isarray "0.0.1" string_decoder "~0.10.x" -readable-stream@^2, readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.6, readable-stream@^2.2.9, readable-stream@^2.3.3: +readable-stream@^2, readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.5, readable-stream@^2.0.6, readable-stream@^2.1.4, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.2.9, readable-stream@^2.3.3: version "2.3.3" resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.3.tgz#368f2512d79f9d46fdfc71349ae7878bbc1eb95c" dependencies: @@ -9363,7 +9439,7 @@ request-promise-core@1.1.1: dependencies: lodash "^4.13.1" -request-promise-native@^1.0.3: +request-promise-native@^1.0.5: version "1.0.5" resolved "https://registry.yarnpkg.com/request-promise-native/-/request-promise-native-1.0.5.tgz#5281770f68e0c9719e5163fd3fab482215f4fda5" dependencies: @@ -9512,13 +9588,6 @@ resolve-from@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-3.0.0.tgz#b22c7af7d9d6881bc8b6e653335eebcb0a188748" -<<<<<<< HEAD -resolve-pathname@^2.2.0: - version "2.2.0" - resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" - -resolve-url@~0.2.1: -======= resolve-from@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6" @@ -9529,8 +9598,11 @@ resolve-options@^1.1.0: dependencies: value-or-function "^3.0.0" +resolve-pathname@^2.2.0: + version "2.2.0" + resolved "https://registry.yarnpkg.com/resolve-pathname/-/resolve-pathname-2.2.0.tgz#7e9ae21ed815fd63ab189adeee64dc831eefa879" + resolve-url@^0.2.1, resolve-url@~0.2.1: ->>>>>>> b05d21b1ba308bdb5b758d53dd79593a7a2bf26e version "0.2.1" resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a" @@ -9662,7 +9734,7 @@ sass-graph@^2.2.4: scss-tokenizer "^0.2.3" yargs "^7.0.0" -sax@^1.2.1: +sax@^1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" @@ -9701,8 +9773,8 @@ scss-tokenizer@^0.2.3: source-map "^0.4.2" secp256k1@^3.0.1: - version "3.4.0" - resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-3.4.0.tgz#1c905b256fa4ae5b9cc170e672dd59b4c5de46a4" + version "3.5.0" + resolved "https://registry.yarnpkg.com/secp256k1/-/secp256k1-3.5.0.tgz#677d3b8a8e04e1a5fa381a1ae437c54207b738d0" dependencies: bindings "^1.2.1" bip66 "^1.1.3" @@ -9717,15 +9789,15 @@ semaphore@>=1.0.1, semaphore@^1.0.3, semaphore@^1.0.5: version "1.1.0" resolved "https://registry.yarnpkg.com/semaphore/-/semaphore-1.1.0.tgz#aaad8b86b20fe8e9b32b16dc2ee682a8cd26a8aa" -semver-greatest-satisfied-range@^1.0.0: +semver-greatest-satisfied-range@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/semver-greatest-satisfied-range/-/semver-greatest-satisfied-range-1.1.0.tgz#13e8c2658ab9691cb0cd71093240280d36f77a5b" dependencies: sver-compat "^1.5.0" -"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.4.1, semver@~5.4.1: - version "5.4.1" - resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e" +"semver@2 || 3 || 4 || 5", semver@^5.1.0, semver@^5.3.0, semver@^5.4.1: + version "5.5.0" + resolved "https://registry.yarnpkg.com/semver/-/semver-5.5.0.tgz#dc4bbc7a6ca9d916dee5d43516f0092b58f7b8ab" semver@~4.3.3: version "4.3.6" @@ -9735,6 +9807,10 @@ semver@~5.3.0: version "5.3.0" resolved "https://registry.yarnpkg.com/semver/-/semver-5.3.0.tgz#9b2ce5d3de02d17c6012ad326aa6b4d0cf54f94f" +semver@~5.4.1: + version "5.4.1" + resolved "https://registry.yarnpkg.com/semver/-/semver-5.4.1.tgz#e059c09d8571f0540823733433505d3a2f00b18e" + send@0.16.1: version "0.16.1" resolved "https://registry.yarnpkg.com/send/-/send-0.16.1.tgz#a70e1ca21d1382c11d0d9f6231deb281080d7ab3" @@ -9807,8 +9883,8 @@ setprototypeof@1.1.0: resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656" sha.js@^2.4.0, sha.js@^2.4.8, sha.js@~2.4.4: - version "2.4.9" - resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.9.tgz#98f64880474b74f4a38b8da9d3c0f2d104633e7d" + version "2.4.10" + resolved "https://registry.yarnpkg.com/sha.js/-/sha.js-2.4.10.tgz#b1fde5cd7d11a5626638a07c604ab909cfa31f9b" dependencies: inherits "^2.0.1" safe-buffer "^5.0.1" @@ -9849,7 +9925,7 @@ shell-quote@^1.4.2, shell-quote@^1.6.1: array-reduce "~0.0.0" jsonify "~0.0.0" -shellwords@^0.1.0: +shellwords@^0.1.1: version "0.1.1" resolved "https://registry.yarnpkg.com/shellwords/-/shellwords-0.1.1.tgz#d6b9181c1a48d397324c84871efbcfc73fc0654b" @@ -9862,15 +9938,15 @@ signal-exit@^3.0.0, signal-exit@^3.0.1, signal-exit@^3.0.2: resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d" sinon@^4.0.0: - version "4.1.3" - resolved "https://registry.yarnpkg.com/sinon/-/sinon-4.1.3.tgz#fc599eda47ed9f1a694ce774b94ab44260bd7ac5" + version "4.2.2" + resolved "https://registry.yarnpkg.com/sinon/-/sinon-4.2.2.tgz#e039ab27bdb426fc61363c380726e996a2e2c620" dependencies: diff "^3.1.0" formatio "1.2.0" lodash.get "^4.4.2" lolex "^2.2.0" nise "^1.2.0" - supports-color "^4.4.0" + supports-color "^5.1.0" type-detect "^4.0.5" sizzle@2.3.3: @@ -10055,9 +10131,9 @@ source-map@0.1.31: dependencies: amdefine ">=0.0.4" -source-map@0.X, "source-map@>= 0.1.2", source-map@^0.6.1, source-map@~0.6.1: - version "0.6.1" - resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" +"source-map@>= 0.1.2": + version "0.7.0" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.0.tgz#ebf0d13a48f3619f91891816fdda932f83a6021f" source-map@^0.1.38, source-map@~0.1.33: version "0.1.43" @@ -10075,6 +10151,10 @@ source-map@^0.5.1, source-map@^0.5.3, source-map@^0.5.6, source-map@~0.5.0, sour version "0.5.7" resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc" +source-map@^0.6.1, source-map@~0.6.0, source-map@~0.6.1: + version "0.6.1" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" + sparkles@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/sparkles/-/sparkles-1.0.0.tgz#1acbbfb592436d10bbe8f785b7cc6f82815012c3" @@ -10246,12 +10326,12 @@ stream-exhaust@^1.0.1: resolved "https://registry.yarnpkg.com/stream-exhaust/-/stream-exhaust-1.0.2.tgz#acdac8da59ef2bc1e17a2c0ccf6c320d120e555d" stream-http@^2.0.0, stream-http@^2.7.2: - version "2.7.2" - resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.7.2.tgz#40a050ec8dc3b53b33d9909415c02c0bf1abfbad" + version "2.8.0" + resolved "https://registry.yarnpkg.com/stream-http/-/stream-http-2.8.0.tgz#fd86546dac9b1c91aff8fc5d287b98fafb41bc10" dependencies: builtin-status-codes "^3.0.0" inherits "^2.0.1" - readable-stream "^2.2.6" + readable-stream "^2.3.3" to-arraybuffer "^1.0.0" xtend "^4.0.0" @@ -10578,12 +10658,18 @@ supports-color@^3.1.0, supports-color@^3.1.2, supports-color@^3.2.3: dependencies: has-flag "^1.0.0" -supports-color@^4.0.0, supports-color@^4.4.0: +supports-color@^4.0.0: version "4.5.0" resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-4.5.0.tgz#be7a0de484dec5c5cddf8b3d59125044912f635b" dependencies: has-flag "^2.0.0" +supports-color@^5.1.0: + version "5.1.0" + resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.1.0.tgz#058a021d1b619f7ddf3980d712ea3590ce7de3d5" + dependencies: + has-flag "^2.0.0" + sver-compat@^1.5.0: version "1.5.0" resolved "https://registry.yarnpkg.com/sver-compat/-/sver-compat-1.5.0.tgz#3cf87dfeb4d07b4a3f14827bc186b3fd0c645cd8" @@ -10608,10 +10694,10 @@ sw-stream@^2.0.0: through2 "^2.0.3" symbol-observable@^1.0.3, symbol-observable@^1.0.4: - version "1.1.0" - resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.1.0.tgz#5c68fd8d54115d9dfb72a84720549222e8db9b32" + version "1.2.0" + resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804" -symbol-tree@^3.2.1: +symbol-tree@^3.2.2: version "3.2.2" resolved "https://registry.yarnpkg.com/symbol-tree/-/symbol-tree-3.2.2.tgz#ae27db38f660a7ae2e1c3b7d1bc290819b8519e6" @@ -10829,8 +10915,8 @@ timers-browserify@^1.0.1: process "~0.11.0" timers-browserify@^2.0.4: - version "2.0.4" - resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.4.tgz#96ca53f4b794a5e7c0e1bd7cc88a372298fa01e6" + version "2.0.6" + resolved "https://registry.yarnpkg.com/timers-browserify/-/timers-browserify-2.0.6.tgz#241e76927d9ca05f4d959819022f5b3664b64bae" dependencies: setimmediate "^1.0.4" @@ -10968,10 +11054,14 @@ trumpet@^1.7.1: readable-stream "^1.0.27-1" through2 "^1.0.0" -tty-browserify@0.0.0, tty-browserify@~0.0.0: +tty-browserify@0.0.0: version "0.0.0" resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.0.tgz#a157ba402da24e9bf957f9aa69d524eed42901a6" +tty-browserify@~0.0.0: + version "0.0.1" + resolved "https://registry.yarnpkg.com/tty-browserify/-/tty-browserify-0.0.1.tgz#3f05251ee17904dfd0677546670db9651682b811" + tunnel-agent@^0.6.0: version "0.6.0" resolved "https://registry.yarnpkg.com/tunnel-agent/-/tunnel-agent-0.6.0.tgz#27a5dea06b36b04a0a9966774b290868f0fc40fd" @@ -11001,8 +11091,8 @@ type-detect@^1.0.0: resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-1.0.0.tgz#762217cc06db258ec48908a1298e8b95121e8ea2" type-detect@^4.0.0, type-detect@^4.0.5: - version "4.0.5" - resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.5.tgz#d70e5bc81db6de2a381bcaca0c6e0cbdc7635de2" + version "4.0.7" + resolved "https://registry.yarnpkg.com/type-detect/-/type-detect-4.0.7.tgz#862bd2cf6058ad92799ff5a5b8cf7b6cec726198" type-is@~1.6.10, type-is@~1.6.15: version "1.6.15" @@ -11019,16 +11109,9 @@ ua-parser-js@^0.7.9: version "0.7.17" resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.17.tgz#e9ec5f9498b9ec910e7ae3ac626a805c4d09ecac" -uglify-es@^3.0.15: - version "3.3.3" - resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.3.tgz#095f5314d2a5d27e215390e50fa90751473dac2f" - dependencies: - commander "~2.12.1" - source-map "~0.6.1" - -uglify-es@^3.2.0: - version "3.3.7" - resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.7.tgz#d1249af668666aba7cb1163e277455be9eb393cf" +uglify-es@^3.0.15, uglify-es@^3.2.0: + version "3.3.9" + resolved "https://registry.yarnpkg.com/uglify-es/-/uglify-es-3.3.9.tgz#0c1c4f0700bed8dbc124cdb304d2592ca203e677" dependencies: commander "~2.13.0" source-map "~0.6.1" @@ -11043,10 +11126,11 @@ uglify-js@^2.6, uglify-js@^2.8.27: uglify-to-browserify "~1.0.0" uglify-js@^3.0.5: - version "3.3.7" - resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.7.tgz#28463e7c7451f89061d2b235e30925bf5625e14d" + version "3.3.9" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.3.9.tgz#33869666c8ab7f7658ce3d22f0f1ced40097d33a" dependencies: commander "~2.13.0" + source-map "~0.6.1" uglify-to-browserify@~1.0.0: version "1.0.2" @@ -11070,6 +11154,10 @@ ultron@1.0.x: version "1.0.2" resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.0.2.tgz#ace116ab557cd197386a4e88f4685378c8b2e4fa" +ultron@~1.1.0: + version "1.1.1" + resolved "https://registry.yarnpkg.com/ultron/-/ultron-1.1.1.tgz#9fe1536a10a664a65266a1e3ccf85fd36302bc9c" + umd@^3.0.0: version "3.0.1" resolved "https://registry.yarnpkg.com/umd/-/umd-3.0.1.tgz#8ae556e11011f63c2596708a8837259f01b3d60e" @@ -11210,10 +11298,10 @@ use@^2.0.0: lazy-cache "^2.0.2" useragent@^2.1.12: - version "2.2.1" - resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.2.1.tgz#cf593ef4f2d175875e8bb658ea92e18a4fd06d8e" + version "2.3.0" + resolved "https://registry.yarnpkg.com/useragent/-/useragent-2.3.0.tgz#217f943ad540cb2128658ab23fc960f6a88c9972" dependencies: - lru-cache "2.2.x" + lru-cache "4.1.x" tmp "0.0.x" utf8@^2.1.1: @@ -11250,8 +11338,8 @@ uuid@^2.0.1: resolved "https://registry.yarnpkg.com/uuid/-/uuid-2.0.3.tgz#67e2e863797215530dff318e5bf9dcebfd47b21a" uuid@^3.0.0, uuid@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.1.0.tgz#3dd3d3e790abc24d7b0d3a034ffababe28ebbc04" + version "3.2.1" + resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.2.1.tgz#12c528bb9d58d0b9265d9a2f6f0fe8be17ff1f14" v8flags@^3.0.1: version "3.0.1" @@ -11270,15 +11358,13 @@ validate-npm-package-license@^3.0.1: spdx-correct "~1.0.0" spdx-expression-parse "~1.0.0" -<<<<<<< HEAD value-equal@^0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/value-equal/-/value-equal-0.4.0.tgz#c5bdd2f54ee093c04839d71ce2e4758a6890abc7" -======= + value-or-function@^3.0.0: version "3.0.0" resolved "https://registry.yarnpkg.com/value-or-function/-/value-or-function-3.0.0.tgz#1c243a50b595c1be54a754bfece8563b9ff8d813" ->>>>>>> b05d21b1ba308bdb5b758d53dd79593a7a2bf26e varint@^4.0.0: version "4.0.1" @@ -11315,7 +11401,7 @@ vfile@^2.0.0: unist-util-stringify-position "^1.0.0" vfile-message "^1.0.0" -vinyl-buffer@^1.0.0: +vinyl-buffer@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/vinyl-buffer/-/vinyl-buffer-1.0.1.tgz#96c1a3479b8c5392542c612029013b5b27f88bbf" dependencies: @@ -11334,10 +11420,9 @@ vinyl-file@^2.0.0: vinyl "^1.1.0" vinyl-fs@^3.0.0: - version "3.0.1" - resolved "https://registry.yarnpkg.com/vinyl-fs/-/vinyl-fs-3.0.1.tgz#74af5f6836a1cf414d35eeb3c10f2e65fc2a2c10" + version "3.0.2" + resolved "https://registry.yarnpkg.com/vinyl-fs/-/vinyl-fs-3.0.2.tgz#1b86258844383f57581fcaac081fe09ef6d6d752" dependencies: - flush-write-stream "^1.0.0" fs-mkdirp-stream "^1.0.0" glob-stream "^6.1.0" graceful-fs "^4.0.0" @@ -11346,6 +11431,7 @@ vinyl-fs@^3.0.0: lead "^1.0.0" object.assign "^4.0.4" pumpify "^1.3.5" + readable-stream "^2.3.3" remove-bom-buffer "^3.0.0" remove-bom-stream "^1.2.0" resolve-options "^1.1.0" @@ -11421,6 +11507,12 @@ vreme@^3.0.2: version "3.0.2" resolved "https://registry.yarnpkg.com/vreme/-/vreme-3.0.2.tgz#4721376b449457fefde8a849d3340933b90b5686" +w3c-hr-time@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.1.tgz#82ac2bff63d950ea9e3189a58a65625fedf19045" + dependencies: + browser-process-hrtime "^0.1.2" + walk-sync@0.3.1: version "0.3.1" resolved "https://registry.yarnpkg.com/walk-sync/-/walk-sync-0.3.1.tgz#558a16aeac8c0db59c028b73c66f397684ece465" @@ -11435,11 +11527,11 @@ warning@^3.0.0: loose-envify "^1.0.0" watchify@^3.9.0: - version "3.9.0" - resolved "https://registry.yarnpkg.com/watchify/-/watchify-3.9.0.tgz#f075fd2e8a86acde84cedba6e5c2a0bedd523d9e" + version "3.10.0" + resolved "https://registry.yarnpkg.com/watchify/-/watchify-3.10.0.tgz#f436605553c432d87f62f718cc78077418ffbccb" dependencies: anymatch "^1.3.0" - browserify "^14.0.0" + browserify "^15.2.0" chokidar "^1.0.0" defined "^1.0.0" outpipe "^1.1.0" @@ -11461,9 +11553,9 @@ weak@^1.0.0: bindings "^1.2.1" nan "^2.0.5" -web3-provider-engine@^13.3.2, web3-provider-engine@^13.4.0: - version "13.4.0" - resolved "https://registry.yarnpkg.com/web3-provider-engine/-/web3-provider-engine-13.4.0.tgz#78c2794ba926d0c5b94c6e8955abb994bb8e8854" +web3-provider-engine@^13.3.2, web3-provider-engine@^13.5.0: + version "13.6.0" + resolved "https://registry.yarnpkg.com/web3-provider-engine/-/web3-provider-engine-13.6.0.tgz#836f51c4ee48bd7583acf3696033779c704c2214" dependencies: async "^2.5.0" clone "^2.0.0" @@ -11502,8 +11594,8 @@ web3@^0.18.4: xmlhttprequest "*" web3@^0.20.1: - version "0.20.3" - resolved "https://registry.yarnpkg.com/web3/-/web3-0.20.3.tgz#caa44373dc8815ac8767bddb6ba73073964caa8b" + version "0.20.4" + resolved "https://registry.yarnpkg.com/web3/-/web3-0.20.4.tgz#400e6579a65bb4a3dde71a6ebf6509afadc33a04" dependencies: bignumber.js "git+https://github.com/frozeman/bignumber.js-nolookahead.git" crypto-js "^3.1.4" @@ -11559,7 +11651,7 @@ websocket-extensions@>=0.1.1: version "0.1.3" resolved "https://registry.yarnpkg.com/websocket-extensions/-/websocket-extensions-0.1.3.tgz#5d2ff22977003ec687a4b87073dfbbac146ccf29" -whatwg-encoding@^1.0.1: +whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/whatwg-encoding/-/whatwg-encoding-1.0.3.tgz#57c235bc8657e914d24e1a397d3c82daee0a6ba3" dependencies: @@ -11569,7 +11661,7 @@ whatwg-fetch@>=0.10.0: version "2.0.3" resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84" -whatwg-url@^6.3.0: +whatwg-url@^6.4.0: version "6.4.0" resolved "https://registry.yarnpkg.com/whatwg-url/-/whatwg-url-6.4.0.tgz#08fdf2b9e872783a7a1f6216260a1d66cc722e08" dependencies: @@ -11680,6 +11772,14 @@ ws@1.1.2: options ">=0.0.5" ultron "1.0.x" +ws@^4.0.0: + version "4.0.0" + resolved "https://registry.yarnpkg.com/ws/-/ws-4.0.0.tgz#bfe1da4c08eeb9780b986e0e4d10eccd7345999f" + dependencies: + async-limiter "~1.0.0" + safe-buffer "~5.1.0" + ultron "~1.1.0" + wtf-8@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a" @@ -11709,9 +11809,9 @@ xhr@^2.2.0: parse-headers "^2.0.0" xtend "^4.0.0" -xml-name-validator@^2.0.1: - version "2.0.1" - resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-2.0.1.tgz#4d8b8f1eccd3419aa362061becef515e1e559635" +xml-name-validator@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a" xmldom@^0.1.19: version "0.1.27" @@ -11766,7 +11866,7 @@ yargs-parser@^5.0.0: dependencies: camelcase "^3.0.0" -yargs-parser@^8.0.0: +yargs-parser@^8.0.0, yargs-parser@^8.1.0: version "8.1.0" resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-8.1.0.tgz#f1376a33b6629a5d063782944da732631e966950" dependencies: @@ -11777,10 +11877,10 @@ yargs@^1.2.6: resolved "https://registry.yarnpkg.com/yargs/-/yargs-1.3.3.tgz#054de8b61f22eefdb7207059eaef9d6b83fb931a" yargs@^10.0.3: - version "10.0.3" - resolved "https://registry.yarnpkg.com/yargs/-/yargs-10.0.3.tgz#6542debd9080ad517ec5048fb454efe9e4d4aaae" + version "10.1.2" + resolved "https://registry.yarnpkg.com/yargs/-/yargs-10.1.2.tgz#454d074c2b16a51a43e2fb7807e4f9de69ccb5c5" dependencies: - cliui "^3.2.0" + cliui "^4.0.0" decamelize "^1.1.1" find-up "^2.1.0" get-caller-file "^1.0.1" @@ -11791,7 +11891,7 @@ yargs@^10.0.3: string-width "^2.0.0" which-module "^2.0.0" y18n "^3.2.1" - yargs-parser "^8.0.0" + yargs-parser "^8.1.0" yargs@^3.5.4: version "3.32.0" -- cgit From f38675c9ac99d966b39e3faccd2bf8d7facea9dc Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 7 Dec 2017 01:18:41 -0330 Subject: Checks if there is currently a send in progress before redirecting to default in conf-tx --- ui/app/conf-tx.js | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 913563d12..9a323e6c2 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -44,6 +44,7 @@ function mapStateToProps (state) { computedBalances: state.metamask.computedBalances, unapprovedMsgCount, unapprovedPersonalMsgCount, + send: state.metamask.send, } } @@ -53,15 +54,18 @@ function ConfirmTxScreen () { } ConfirmTxScreen.prototype.componentWillMount = function () { - const { unapprovedTxs = {} } = this.props - if (Object.keys(unapprovedTxs).length === 0) { + const { unapprovedTxs = {}, send } = this.props + const { to } = send + if (Object.keys(unapprovedTxs).length === 0 && !to) { this.props.history.push(DEFAULT_ROUTE) } } ConfirmTxScreen.prototype.componentWillReceiveProps = function (nextProps) { + const { send } = this.props + const { to } = send const { unapprovedTxs = {} } = nextProps - if (Object.keys(unapprovedTxs).length === 0) { + if (Object.keys(unapprovedTxs).length === 0 && !to) { this.props.history.push(DEFAULT_ROUTE) } } -- cgit From 2fd9e58e612e9fe341c9107a677238a566e3c1b8 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 1 Feb 2018 14:13:08 -0800 Subject: Fix lint errors --- ui/app/components/account-menu/index.js | 6 ------ ui/app/components/pending-tx/confirm-send-ether.js | 2 +- ui/app/info.js | 1 - ui/app/send-v2.js | 4 ++-- 4 files changed, 3 insertions(+), 10 deletions(-) diff --git a/ui/app/components/account-menu/index.js b/ui/app/components/account-menu/index.js index ddb751a64..e9ae61735 100644 --- a/ui/app/components/account-menu/index.js +++ b/ui/app/components/account-menu/index.js @@ -53,11 +53,6 @@ function mapDispatchToProps (dispatch) { dispatch(actions.hideSidebar()) dispatch(actions.toggleAccountMenu()) }, - showNewAccountPage: (formToSelect) => { - dispatch(actions.showNewAccountPage(formToSelect)) - dispatch(actions.hideSidebar()) - dispatch(actions.toggleAccountMenu()) - }, showInfoPage: () => { dispatch(actions.showInfoPage()) dispatch(actions.hideSidebar()) @@ -70,7 +65,6 @@ AccountMenu.prototype.render = function () { const { isAccountMenuOpen, toggleAccountMenu, - showNewAccountPage, lockMetamask, history, } = this.props diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index e63415194..a2d6adcd0 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -232,7 +232,7 @@ ConfirmSendEther.prototype.render = function () { h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ h('button.btn-clear.confirm-screen-back-button', { - onClick: () => editTransaction(txMeta), + onClick: () => this.editTransaction(txMeta), }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), h('div.confirm-screen-header-tip'), diff --git a/ui/app/info.js b/ui/app/info.js index 92cc80c20..17e1ecbb4 100644 --- a/ui/app/info.js +++ b/ui/app/info.js @@ -2,7 +2,6 @@ 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') module.exports = connect(mapStateToProps)(InfoScreen) diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 5eb90143e..7cee46c9c 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -659,7 +659,7 @@ SendTransactionScreen.prototype.onSubmit = function (event) { selectedToken ? signTokenTx(selectedToken.address, to, amount, txParams) : signTx(txParams) - - this.props.history.push(CONFIRM_TRANSACTION_ROUTE) } + + this.props.history.push(CONFIRM_TRANSACTION_ROUTE) } -- cgit From 72ffa2c3f5abbcb06c8ab5fdf20b9d934c330692 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 9 Feb 2018 12:05:27 -0800 Subject: Fix react-router related exceptions --- ui/app/app.js | 2 +- ui/app/components/pending-tx/confirm-send-token.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index 0ecfd0dde..168dfa9ac 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -268,7 +268,7 @@ class App extends Component { }, [ h('div.app-header-contents', {}, [ h('div.left-menu-wrapper', { - onClick: () => history.push(DEFAULT_ROUTE), + onClick: () => props.history.push(DEFAULT_ROUTE), }, [ // mini logo h('img.metafox-icon', { diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index da3a92fa8..f52fd01da 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -327,7 +327,7 @@ ConfirmSendToken.prototype.render = function () { h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ h('button.btn-clear.confirm-screen-back-button', { - onClick: () => editTransaction(txMeta), + onClick: () => this.editTransaction(txMeta), }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), h('div.confirm-screen-header-tip'), -- cgit From 58f52b2b8de9efd43896e23ab0ac9972f45bb278 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Wed, 28 Mar 2018 13:21:53 -0700 Subject: Fix merge conflicts. Refactor onboarding flow. --- .../src/app/first-time/create-password-screen.js | 30 +++++--- .../src/app/first-time/import-account-screen.js | 1 + .../app/first-time/import-seed-phrase-screen.js | 10 +-- mascara/src/app/first-time/index.js | 86 ++++++++++++++++------ mascara/src/app/first-time/notice-screen.js | 42 ++++++----- ui/app/app.js | 26 ++++--- ui/app/components/pages/add-token.js | 4 +- .../pages/create-account/import-account/index.js | 2 +- .../pages/create-account/import-account/json.js | 2 +- .../create-account/import-account/private-key.js | 2 +- .../pages/create-account/import-account/seed.js | 2 +- .../components/pages/create-account/new-account.js | 2 +- ui/app/components/pages/settings/info.js | 17 +++-- ui/app/components/pages/settings/settings.js | 20 ++++- ui/app/components/pages/signature-request.js | 2 +- ui/app/routes.js | 10 ++- ui/app/send-v2.js | 4 +- ui/app/welcome-screen.js | 5 +- 18 files changed, 176 insertions(+), 91 deletions(-) diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 8fee04d1c..c34391fa6 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,13 +1,19 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' import { createNewVaultAndKeychain } from '../../../../ui/app/actions' import LoadingScreen from './loading-screen' import Breadcrumbs from './breadcrumbs' -import { DEFAULT_ROUTE, IMPORT_ACCOUNT_ROUTE } from '../../../../ui/app/routes' import EventEmitter from 'events' import Mascot from '../../../../ui/app/components/mascot' import classnames from 'classnames' +import { + DEFAULT_ROUTE, + INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_IMPORT_ACCOUNT_ROUTE, +} from '../../../../ui/app/routes' class CreatePasswordScreen extends Component { static propTypes = { @@ -63,7 +69,7 @@ class CreatePasswordScreen extends Component { } render () { - const { isLoading, isMascara } = this.props + const { isLoading, isMascara, history } = this.props return isLoading ? @@ -114,7 +120,7 @@ class CreatePasswordScreen extends Component { className="first-time-flow__link create-password__import-link" onClick={e => { e.preventDefault() - history.push(IMPORT_ACCOUNT_ROUTE) + history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) }} > Import with seed phrase @@ -125,7 +131,7 @@ class CreatePasswordScreen extends Component { className="first-time-flow__link create-password__import-link" onClick={e => { e.preventDefault() - goToImportAccount() + history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE) }} > Import an account @@ -140,18 +146,22 @@ class CreatePasswordScreen extends Component { } const mapStateToProps = state => { - const { metamask: { isInitialized, isUnlocked }, appState: { isLoading } } = state + const { metamask: { isInitialized, isUnlocked, isMascara }, appState: { isLoading } } = state return { isLoading, isInitialized, isUnlocked, + isMascara, } } -export default connect( - mapStateToProps, - dispatch => ({ - createAccount: password => dispatch(createNewVaultAndKeychain(password)), - }) +export default compose( + withRouter, + connect( + mapStateToProps, + dispatch => ({ + createAccount: password => dispatch(createNewVaultAndKeychain(password)), + }) + ) )(CreatePasswordScreen) diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js index ab0aca0f0..fdcaa7199 100644 --- a/mascara/src/app/first-time/import-account-screen.js +++ b/mascara/src/app/first-time/import-account-screen.js @@ -142,6 +142,7 @@ class ImportAccountScreen extends Component { render () { const { OPTIONS } = ImportAccountScreen const { selectedOption } = this.state + console.log('RENDER IMPORT') return this.props.isLoading ? diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js index 86f02ceac..4eec37723 100644 --- a/mascara/src/app/first-time/import-seed-phrase-screen.js +++ b/mascara/src/app/first-time/import-seed-phrase-screen.js @@ -8,16 +8,16 @@ import { displayWarning, unMarkPasswordForgotten, } from '../../../../ui/app/actions' +import { DEFAULT_ROUTE } from '../../../../ui/app/routes' class ImportSeedPhraseScreen extends Component { static propTypes = { warning: PropTypes.string, - back: PropTypes.func.isRequired, - next: PropTypes.func.isRequired, createNewVaultAndRestore: PropTypes.func.isRequired, hideWarning: PropTypes.func.isRequired, displayWarning: PropTypes.func, leaveImportSeedScreenState: PropTypes.func, + history: PropTypes.object, }; state = { @@ -64,14 +64,14 @@ class ImportSeedPhraseScreen extends Component { const { password, seedPhrase } = this.state const { createNewVaultAndRestore, - next, displayWarning, leaveImportSeedScreenState, + history, } = this.props leaveImportSeedScreenState() createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase)) - .then(next) + .then(() => history.push(DEFAULT_ROUTE)) } render () { @@ -86,7 +86,7 @@ class ImportSeedPhraseScreen extends Component { className="import-account__back-button" onClick={e => { e.preventDefault() - this.props.back() + this.props.history.goBack() }} href="#" > diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js index b3494dec2..ea56a2f6e 100644 --- a/mascara/src/app/first-time/index.js +++ b/mascara/src/app/first-time/index.js @@ -1,6 +1,8 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' +import { withRouter, Switch, Route, Redirect } from 'react-router-dom' +import { compose } from 'recompose' import CreatePasswordScreen from './create-password-screen' import UniqueImageScreen from './unique-image-screen' import NoticeScreen from './notice-screen' @@ -12,6 +14,13 @@ import { unMarkPasswordForgotten, showModal, } from '../../../../ui/app/actions' +import { + DEFAULT_ROUTE, + WELCOME_ROUTE, + INITIALIZE_ROUTE, + INITIALIZE_IMPORT_ACCOUNT_ROUTE, + INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, +} from '../../../../ui/app/routes' class FirstTimeFlow extends Component { @@ -20,7 +29,10 @@ class FirstTimeFlow extends Component { seedWords: PropTypes.string, address: PropTypes.string, noActiveNotices: PropTypes.bool, - goToBuyEtherView: PropTypes.func.isRequired, + goToBuyEtherView: PropTypes.func, + isUnlocked: PropTypes.bool, + history: PropTypes.object, + welcomeScreenSeen: PropTypes.bool, }; static defaultProps = { @@ -47,6 +59,14 @@ class FirstTimeFlow extends Component { } } + componentDidMount () { + const { isInitialized, isUnlocked, history } = this.props + + if (isInitialized || isUnlocked) { + history.push(DEFAULT_ROUTE) + } + } + setScreenType (screenType) { this.setState({ screenType }) } @@ -141,34 +161,54 @@ class FirstTimeFlow extends Component { } render () { - return ( -
- {this.renderScreen()} -
- ) + return this.props.welcomeScreenSeen + ? ( +
+ + + + + +
+ ) + : } - } -export default connect( - ({ - metamask: { - isInitialized, - seedWords, - noActiveNotices, - selectedAddress, - forgottenPassword, - } - }) => ({ +const mapStateToProps = ({ metamask }) => { + const { + isInitialized, + seedWords, + noActiveNotices, + selectedAddress, + forgottenPassword, + isMascara, + isUnlocked, + welcomeScreenSeen, + } = metamask + + return { + isMascara, isInitialized, seedWords, noActiveNotices, address: selectedAddress, forgottenPassword, - }), - dispatch => ({ - leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()), - openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})), - }) -)(FirstTimeFlow) + isUnlocked, + welcomeScreenSeen, + } +} +const mapDispatchToProps = dispatch => ({ + leaveImportSeedScreenState: () => dispatch(unMarkPasswordForgotten()), + openBuyEtherModal: () => dispatch(showModal({ name: 'DEPOSIT_ETHER'})), +}) + +export default compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(FirstTimeFlow) diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js index caba71866..90213fe16 100644 --- a/mascara/src/app/first-time/notice-screen.js +++ b/mascara/src/app/first-time/notice-screen.js @@ -70,27 +70,29 @@ class NoticeScreen extends Component { isLoading ? : ( -
-
-
- -
{title}
- - - + +
{title}
+ + + +
diff --git a/ui/app/app.js b/ui/app/app.js index d114cde09..2b6d5fc62 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -1,21 +1,23 @@ const { Component } = require('react') const PropTypes = require('prop-types') const { connect } = require('react-redux') -const { Switch, Redirect, withRouter } = require('react-router-dom') +const { Route, Switch, Redirect, withRouter } = require('react-router-dom') const { compose } = require('recompose') const h = require('react-hyperscript') const actions = require('./actions') const classnames = require('classnames') const t = require('../i18n') +// init +const InitializeScreen = require('../../mascara/src/app/first-time').default +const WelcomeScreen = require('./welcome-screen').default +const NewKeyChainScreen = require('./new-keychain') // mascara const MascaraCreatePassword = require('../../mascara/src/app/first-time/create-password-screen').default const MascaraBuyEtherScreen = require('../../mascara/src/app/first-time/buy-ether-screen').default const MascaraNoticeScreen = require('../../mascara/src/app/first-time/notice-screen').default const MascaraSeedScreen = require('../../mascara/src/app/first-time/seed-screen').default const MascaraConfirmSeedScreen = require('../../mascara/src/app/first-time/confirm-seed-screen').default -// init -const NewKeyChainScreen = require('./new-keychain') // accounts const MainContainer = require('./main-container') @@ -28,7 +30,6 @@ const WalletView = require('./components/wallet-view') // other views const Authenticated = require('./components/pages/authenticated') const Initialized = require('./components/pages/initialized') -const MetamaskRoute = require('./components/pages/metamask-route') const Settings = require('./components/pages/settings') const UnlockPage = require('./components/pages/unlock') const RestoreVaultPage = require('./components/pages/keychains/restore-vault') @@ -65,6 +66,7 @@ const { INITIALIZE_ROUTE, NOTICE_ROUTE, SIGNATURE_REQUEST_ROUTE, + WELCOME_ROUTE, } = require('./routes') class App extends Component { @@ -87,11 +89,14 @@ class App extends Component { return ( h(Switch, [ - h(MetamaskRoute, { - path: INITIALIZE_ROUTE, + h(Route, { + path: WELCOME_ROUTE, exact, - component: InitializeMenuScreen, - mascaraComponent: MascaraCreatePassword, + component: WelcomeScreen, + }), + h(Route, { + path: INITIALIZE_ROUTE, + component: InitializeScreen, }), h(Initialized, { path: REVEAL_SEED_ROUTE, @@ -110,8 +115,7 @@ class App extends Component { h(Initialized, { path: NOTICE_ROUTE, exact, - component: NoticeScreen, - mascaraComponent: MascaraNoticeScreen, + component: MascaraNoticeScreen, }), h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }), h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }), @@ -465,7 +469,7 @@ class App extends Component { // // default: // // log.debug('rendering menu screen') - // // return h(InitializeMenuScreen, {key: 'menuScreenInit'}) + // // return h(InitializeScreen, {key: 'menuScreenInit'}) // // } // } diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js index 782ce79ae..3b7a65b21 100644 --- a/ui/app/components/pages/add-token.js +++ b/ui/app/components/pages/add-token.js @@ -25,7 +25,7 @@ const fuse = new Fuse(contractList, { }) const actions = require('../../actions') const ethUtil = require('ethereumjs-util') -const t = require('../i18n') +const t = require('../../../i18n') const { tokenInfoGetter } = require('../../token-util') const { DEFAULT_ROUTE } = require('../../routes') @@ -409,7 +409,7 @@ AddTokenScreen.prototype.render = function () { !isShowingConfirmation && h('div.add-token__buttons', [ h('button.btn-secondary--lg.add-token__cancel-button', { - onClick: history.goBack(), + onClick: () => history.goBack(), }, t('cancel')), h('button.btn-primary--lg.add-token__confirm-button', { onClick: this.onNext, diff --git a/ui/app/components/pages/create-account/import-account/index.js b/ui/app/components/pages/create-account/import-account/index.js index fc9031a65..8031ea36d 100644 --- a/ui/app/components/pages/create-account/import-account/index.js +++ b/ui/app/components/pages/create-account/import-account/index.js @@ -2,7 +2,7 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect -const t = require('../../../i18n') +const t = require('../../../../../i18n') import Select from 'react-select' // Subviews diff --git a/ui/app/components/pages/create-account/import-account/json.js b/ui/app/components/pages/create-account/import-account/json.js index ef056b1b1..554a67df4 100644 --- a/ui/app/components/pages/create-account/import-account/json.js +++ b/ui/app/components/pages/create-account/import-account/json.js @@ -6,7 +6,7 @@ const { compose } = require('recompose') const { connect } = require('react-redux') const actions = require('../../../../actions') const FileInput = require('react-simple-file-input').default -const t = require('../../../i18n') +const t = require('../../../../../i18n') const { DEFAULT_ROUTE } = require('../../../../routes') const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts' diff --git a/ui/app/components/pages/create-account/import-account/private-key.js b/ui/app/components/pages/create-account/import-account/private-key.js index f48feeb0e..a30492e3b 100644 --- a/ui/app/components/pages/create-account/import-account/private-key.js +++ b/ui/app/components/pages/create-account/import-account/private-key.js @@ -6,7 +6,7 @@ const { compose } = require('recompose') const { connect } = require('react-redux') const actions = require('../../../../actions') const { DEFAULT_ROUTE } = require('../../../../routes') -const t = require('../../../i18n') +const t = require('../../../../../i18n') module.exports = compose( withRouter, diff --git a/ui/app/components/pages/create-account/import-account/seed.js b/ui/app/components/pages/create-account/import-account/seed.js index 9ffc669a2..85fa93faa 100644 --- a/ui/app/components/pages/create-account/import-account/seed.js +++ b/ui/app/components/pages/create-account/import-account/seed.js @@ -2,7 +2,7 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') const connect = require('react-redux').connect -const t = require('../../../i18n') +const t = require('../../../../../i18n') module.exports = connect(mapStateToProps)(SeedImportSubview) diff --git a/ui/app/components/pages/create-account/new-account.js b/ui/app/components/pages/create-account/new-account.js index 889ae9206..ceeb8a05b 100644 --- a/ui/app/components/pages/create-account/new-account.js +++ b/ui/app/components/pages/create-account/new-account.js @@ -4,7 +4,7 @@ const h = require('react-hyperscript') const { connect } = require('react-redux') const actions = require('../../../actions') const { DEFAULT_ROUTE } = require('../../../routes') -const t = require('../../../i18n') +const t = require('../../../../i18n') class NewAccountCreateForm extends Component { constructor (props) { diff --git a/ui/app/components/pages/settings/info.js b/ui/app/components/pages/settings/info.js index 87479c84e..cb1782562 100644 --- a/ui/app/components/pages/settings/info.js +++ b/ui/app/components/pages/settings/info.js @@ -1,6 +1,7 @@ const { Component } = require('react') const PropTypes = require('prop-types') const h = require('react-hyperscript') +const t = require('../../../../i18n') class Info extends Component { renderLogo () { @@ -14,13 +15,13 @@ class Info extends Component { renderInfoLinks () { return ( h('div.settings__content-item.settings__content-item--without-height', [ - h('div.settings__info-link-header', 'Links'), + h('div.settings__info-link-header', t('links')), h('div.settings__info-link-item', [ h('a', { href: 'https://metamask.io/privacy.html', target: '_blank', }, [ - h('span.settings__info-link', 'Privacy Policy'), + h('span.settings__info-link', t('privacyMsg')), ]), ]), h('div.settings__info-link-item', [ @@ -28,7 +29,7 @@ class Info extends Component { href: 'https://metamask.io/terms.html', target: '_blank', }, [ - h('span.settings__info-link', 'Terms of Use'), + h('span.settings__info-link', t('terms')), ]), ]), h('div.settings__info-link-item', [ @@ -36,7 +37,7 @@ class Info extends Component { href: 'https://metamask.io/attributions.html', target: '_blank', }, [ - h('span.settings__info-link', 'Attributions'), + h('span.settings__info-link', t('attributions')), ]), ]), h('hr.settings__info-separator'), @@ -45,7 +46,7 @@ class Info extends Component { href: 'https://support.metamask.io', target: '_blank', }, [ - h('span.settings__info-link', 'Visit our Support Center'), + h('span.settings__info-link', t('supportCenter')), ]), ]), h('div.settings__info-link-item', [ @@ -53,7 +54,7 @@ class Info extends Component { href: 'https://metamask.io/', target: '_blank', }, [ - h('span.settings__info-link', 'Visit our web site'), + h('span.settings__info-link', t('visitWebSite')), ]), ]), h('div.settings__info-link-item', [ @@ -61,7 +62,7 @@ class Info extends Component { target: '_blank', href: 'mailto:help@metamask.io?subject=Feedback', }, [ - h('span.settings__info-link', 'Email us!'), + h('span.settings__info-link', t('emailUs')), ]), ]), ]) @@ -81,7 +82,7 @@ class Info extends Component { h('div.settings__info-item', [ h( 'div.settings__info-about', - 'MetaMask is designed and built in California.' + t('builtInCalifornia') ), ]), ]), diff --git a/ui/app/components/pages/settings/settings.js b/ui/app/components/pages/settings/settings.js index 6ce0556db..219ace651 100644 --- a/ui/app/components/pages/settings/settings.js +++ b/ui/app/components/pages/settings/settings.js @@ -12,7 +12,7 @@ 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 t = require('../i18n') +const t = require('../../../../i18n') const getInfuraCurrencyOptions = () => { const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -237,6 +237,24 @@ class Settings extends Component { ) } + renderResetAccount () { + const { showResetAccountConfirmationModal } = this.props + + return h('div.settings__content-row', [ + h('div.settings__content-item', t('resetAccount')), + h('div.settings__content-item', [ + h('div.settings__content-item-col', [ + h('button.btn-primary--lg.settings__button--orange', { + onClick (event) { + event.preventDefault() + showResetAccountConfirmationModal() + }, + }, t('resetAccount')), + ]), + ]), + ]) + } + render () { const { warning, isMascara } = this.props diff --git a/ui/app/components/pages/signature-request.js b/ui/app/components/pages/signature-request.js index 2e7f3ea20..e9271fce1 100644 --- a/ui/app/components/pages/signature-request.js +++ b/ui/app/components/pages/signature-request.js @@ -8,7 +8,7 @@ const classnames = require('classnames') const AccountDropdownMini = require('../dropdowns/account-dropdown-mini') -const t = require('../../i18n') +const t = require('../../../i18n') const { conversionUtil } = require('../../conversion-util') const { DEFAULT_ROUTE } = require('../../routes') diff --git a/ui/app/routes.js b/ui/app/routes.js index 8b4501fe3..aadf91cf5 100644 --- a/ui/app/routes.js +++ b/ui/app/routes.js @@ -10,9 +10,12 @@ 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' const NOTICE_ROUTE = '/notice' const SIGNATURE_REQUEST_ROUTE = '/signature-request' +const WELCOME_ROUTE = '/welcome' +const INITIALIZE_ROUTE = '/initialize' +const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/import-account' +const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/import-with-seed-phrase' module.exports = { DEFAULT_ROUTE, @@ -27,7 +30,10 @@ module.exports = { IMPORT_ACCOUNT_ROUTE, SEND_ROUTE, CONFIRM_TRANSACTION_ROUTE, - INITIALIZE_ROUTE, NOTICE_ROUTE, SIGNATURE_REQUEST_ROUTE, + WELCOME_ROUTE, + INITIALIZE_ROUTE, + INITIALIZE_IMPORT_ACCOUNT_ROUTE, + INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, } diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index df819dbd8..9e0ede720 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -186,7 +186,7 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) { } SendTransactionScreen.prototype.renderHeader = function () { - const { selectedToken, clearSend, goHome } = this.props + const { selectedToken, clearSend, history } = this.props return h('div.page-container__header', [ @@ -197,7 +197,7 @@ SendTransactionScreen.prototype.renderHeader = function () { h('div.page-container__header-close', { onClick: () => { clearSend() - goHome() + history.goBack() }, }), diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js index cdbb6dba8..f32491b0d 100644 --- a/ui/app/welcome-screen.js +++ b/ui/app/welcome-screen.js @@ -5,19 +5,22 @@ import PropTypes from 'prop-types' import {connect} from 'react-redux' import {closeWelcomeScreen} from './actions' import Mascot from './components/mascot' +import { INITIALIZE_ROUTE } from './routes' class WelcomeScreen extends Component { static propTypes = { closeWelcomeScreen: PropTypes.func.isRequired, + history: PropTypes.object, } - constructor(props) { + constructor (props) { super(props) this.animationEventEmitter = new EventEmitter() } initiateAccountCreation = () => { this.props.closeWelcomeScreen() + this.props.history.push(INITIALIZE_ROUTE) } render () { -- cgit From bdc4a6964ae83faa8229c50870e3bcc9b9074989 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 30 Mar 2018 14:51:11 -0700 Subject: Fix merge conflicts. Refactor renderPrimary into Home component --- mascara/src/app/first-time/notice-screen.js | 5 +- ui/app/app.js | 442 ++++++++++----------- ui/app/components/pages/add-token.js | 2 +- ui/app/components/pages/home.js | 333 ++++++++++++++++ ui/app/components/pages/keychains/restore-vault.js | 26 +- ui/app/components/pages/signature-request.js | 284 ------------- ui/app/components/pages/unlock.js | 147 ++++--- ui/app/components/signature-request.js | 17 +- ui/app/conf-tx.js | 44 +- ui/app/routes.js | 4 +- 10 files changed, 694 insertions(+), 610 deletions(-) create mode 100644 ui/app/components/pages/home.js delete mode 100644 ui/app/components/pages/signature-request.js diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js index 90213fe16..a342f059c 100644 --- a/mascara/src/app/first-time/notice-screen.js +++ b/mascara/src/app/first-time/notice-screen.js @@ -42,10 +42,7 @@ class NoticeScreen extends Component { acceptTerms = () => { const { markNoticeRead, lastUnreadNotice, history } = this.props markNoticeRead(lastUnreadNotice) - .then(() => { - history.push(DEFAULT_ROUTE) - this.setState({ atBottom: false }) - }) + .then(() => history.push(DEFAULT_ROUTE)) } onScroll = debounce(() => { diff --git a/ui/app/app.js b/ui/app/app.js index 719830fda..5d47a4189 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -27,6 +27,7 @@ const ConfirmTxScreen = require('./conf-tx') const WalletView = require('./components/wallet-view') // other views +const Home = require('./components/pages/home') const Authenticated = require('./components/pages/authenticated') const Initialized = require('./components/pages/initialized') const Settings = require('./components/pages/settings') @@ -36,7 +37,6 @@ const RevealSeedPage = require('./components/pages/keychains/reveal-seed') const AddTokenPage = require('./components/pages/add-token') const CreateAccountPage = require('./components/pages/create-account') const NoticeScreen = require('./components/pages/notice') -const SignatureRequestPage = require('./components/pages/signature-request') const Loading = require('./components/loading') const NetworkIndicator = require('./components/network') @@ -69,11 +69,11 @@ const { } = require('./routes') class App extends Component { - constructor (props) { - super(props) + // constructor (props) { + // super(props) - this.renderPrimary = this.renderPrimary.bind(this) - } + // this.renderPrimary = this.renderPrimary.bind(this) + // } componentWillMount () { const { currentCurrency, setCurrentCurrencyToUSD } = this.props @@ -116,12 +116,11 @@ class App extends Component { exact, component: MascaraNoticeScreen, }), - h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, exact, component: ConfirmTxScreen }), + h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, component: ConfirmTxScreen }), h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }), h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }), 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 }), + h(Authenticated, { path: DEFAULT_ROUTE, exact, component: Home }), ]) ) } @@ -357,233 +356,205 @@ class App extends Component { }) } - renderBackButton (style, justArrow = false) { - const { dispatch } = this.props - - return ( - h('.flex-row', { - key: 'leftArrow', - style: style, - onClick: () => dispatch(actions.goBackToInitView()), - }, [ - h('i.fa.fa-arrow-left.cursor-pointer'), - justArrow ? null : h('div.cursor-pointer', { - style: { - marginLeft: '3px', - }, - onClick: () => dispatch(actions.goBackToInitView()), - }, 'BACK'), - ]) - ) - } - - renderPrimary () { - log.debug('rendering primary') - const { - noActiveNotices, - lostAccounts, - forgottenPassword, - currentView, - activeAddress, - unapprovedTxs = {}, - seedWords, - unapprovedMsgCount = 0, - unapprovedPersonalMsgCount = 0, - unapprovedTypedMessagesCount = 0, - } = this.props - - // seed words - if (seedWords) { - log.debug('rendering seed words') - return h(Redirect, { - to: { - pathname: REVEAL_SEED_ROUTE, - }, - }) - } - - if (forgottenPassword) { - log.debug('rendering restore vault screen') - return h(Redirect, { - to: { - pathname: RESTORE_VAULT_ROUTE, - }, - }) - } - - // notices - if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { - return h(Redirect, { - to: { - pathname: NOTICE_ROUTE, - }, - }) - } - - // unapprovedTxs - if (Object.keys(unapprovedTxs).length) { - return h(Redirect, { - to: { - pathname: CONFIRM_TRANSACTION_ROUTE, - }, - }) - } - - // unapproved messages - if (unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) { - return h(Redirect, { - to: { - pathname: SIGNATURE_REQUEST_ROUTE, - }, - }) - } - - // if (!props.noActiveNotices) { - // log.debug('rendering notice screen for unread notices.') - // return h(NoticeScreen, { - // notice: props.lastUnreadNotice, - // key: 'NoticeScreen', - // onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), - // }) - // } else if (props.lostAccounts && props.lostAccounts.length > 0) { - // log.debug('rendering notice screen for lost accounts view.') - // return h(NoticeScreen, { - // notice: generateLostAccountsNotice(props.lostAccounts), - // key: 'LostAccountsNotice', - // onConfirm: () => props.dispatch(actions.markAccountsFound()), - // }) - // } - - // if (props.seedWords) { - // log.debug('rendering seed words') - // return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) - // } - - // show initialize screen - // if (!isInitialized || forgottenPassword) { - // // show current view - // log.debug('rendering an initialize screen') - // // switch (props.currentView.name) { - - // // case 'restoreVault': - // // log.debug('rendering restore vault screen') - // // return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) - - // // default: - // // log.debug('rendering menu screen') - // // return h(InitializeScreen, {key: 'menuScreenInit'}) - // // } - // } - - // // show unlock screen - // if (!props.isUnlocked) { - // return h(MainContainer, { - // currentViewName: props.currentView.name, - // isUnlocked: props.isUnlocked, - // }) - // } - - // show current view - switch (currentView.name) { - - case 'accountDetail': - log.debug('rendering main container') - return h(MainContainer, {key: 'account-detail'}) - - // case 'sendTransaction': - // log.debug('rendering send tx screen') - - // // Going to leave this here until we are ready to delete SendTransactionScreen v1 - // // const SendComponentToRender = checkFeatureToggle('send-v2') - // // ? SendTransactionScreen2 - // // : SendTransactionScreen - - // return h(SendTransactionScreen2, {key: 'send-transaction'}) - - // case 'sendToken': - // log.debug('rendering send token screen') - - // // Going to leave this here until we are ready to delete SendTransactionScreen v1 - // // const SendTokenComponentToRender = checkFeatureToggle('send-v2') - // // ? SendTransactionScreen2 - // // : SendTokenScreen - - // return h(SendTransactionScreen2, {key: 'sendToken'}) - - case 'newKeychain': - log.debug('rendering new keychain screen') - return h(NewKeyChainScreen, {key: 'new-keychain'}) - - // case 'confTx': - // log.debug('rendering confirm tx screen') - // return h(Redirect, { - // to: { - // pathname: CONFIRM_TRANSACTION_ROUTE, - // }, - // }) - // return h(ConfirmTxScreen, {key: 'confirm-tx'}) - - // case 'add-token': - // log.debug('rendering add-token screen from unlock screen.') - // return h(AddTokenScreen, {key: 'add-token'}) - - // case 'config': - // log.debug('rendering config screen') - // return h(Settings, {key: 'config'}) - - // case 'import-menu': - // log.debug('rendering import screen') - // return h(Import, {key: 'import-menu'}) - - // case 'reveal-seed-conf': - // log.debug('rendering reveal seed confirmation screen') - // return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) - - // case 'info': - // log.debug('rendering info screen') - // return h(Settings, {key: 'info', tab: 'info'}) - - case 'buyEth': - log.debug('rendering buy ether screen') - return h(BuyView, {key: 'buyEthView'}) - - case 'onboardingBuyEth': - log.debug('rendering onboarding buy ether screen') - return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) - - case 'qr': - log.debug('rendering show qr screen') - return h('div', { - style: { - position: 'absolute', - height: '100%', - top: '0px', - left: '0px', - }, - }, [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { - onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)), - style: { - marginLeft: '10px', - marginTop: '50px', - }, - }), - h('div', { - style: { - position: 'absolute', - left: '44px', - width: '285px', - }, - }, [ - h(QrView, {key: 'qr'}), - ]), - ]) - - default: - log.debug('rendering default, account detail screen') - return h(MainContainer, {key: 'account-detail'}) - } - } + // renderPrimary () { + // log.debug('rendering primary') + // const { + // noActiveNotices, + // lostAccounts, + // forgottenPassword, + // currentView, + // activeAddress, + // unapprovedTxs = {}, + // seedWords, + // unapprovedMsgCount = 0, + // unapprovedPersonalMsgCount = 0, + // unapprovedTypedMessagesCount = 0, + // } = this.props + + // // seed words + // if (seedWords) { + // log.debug('rendering seed words') + // return h(Redirect, { + // to: { + // pathname: REVEAL_SEED_ROUTE, + // }, + // }) + // } + + // if (forgottenPassword) { + // log.debug('rendering restore vault screen') + // return h(Redirect, { + // to: { + // pathname: RESTORE_VAULT_ROUTE, + // }, + // }) + // } + + // // notices + // if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { + // return h(Redirect, { + // to: { + // pathname: NOTICE_ROUTE, + // }, + // }) + // } + + // // unapprovedTxs and unapproved messages + // if (Object.keys(unapprovedTxs).length || + // unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) { + // return h(Redirect, { + // to: { + // pathname: CONFIRM_TRANSACTION_ROUTE, + // }, + // }) + // } + + // // if (!props.noActiveNotices) { + // // log.debug('rendering notice screen for unread notices.') + // // return h(NoticeScreen, { + // // notice: props.lastUnreadNotice, + // // key: 'NoticeScreen', + // // onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), + // // }) + // // } else if (props.lostAccounts && props.lostAccounts.length > 0) { + // // log.debug('rendering notice screen for lost accounts view.') + // // return h(NoticeScreen, { + // // notice: generateLostAccountsNotice(props.lostAccounts), + // // key: 'LostAccountsNotice', + // // onConfirm: () => props.dispatch(actions.markAccountsFound()), + // // }) + // // } + + // // if (props.seedWords) { + // // log.debug('rendering seed words') + // // return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) + // // } + + // // show initialize screen + // // if (!isInitialized || forgottenPassword) { + // // // show current view + // // log.debug('rendering an initialize screen') + // // // switch (props.currentView.name) { + + // // // case 'restoreVault': + // // // log.debug('rendering restore vault screen') + // // // return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) + + // // // default: + // // // log.debug('rendering menu screen') + // // // return h(InitializeScreen, {key: 'menuScreenInit'}) + // // // } + // // } + + // // // show unlock screen + // // if (!props.isUnlocked) { + // // return h(MainContainer, { + // // currentViewName: props.currentView.name, + // // isUnlocked: props.isUnlocked, + // // }) + // // } + + // // show current view + // switch (currentView.name) { + + // case 'accountDetail': + // log.debug('rendering main container') + // return h(MainContainer, {key: 'account-detail'}) + + // // case 'sendTransaction': + // // log.debug('rendering send tx screen') + + // // // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // // // const SendComponentToRender = checkFeatureToggle('send-v2') + // // // ? SendTransactionScreen2 + // // // : SendTransactionScreen + + // // return h(SendTransactionScreen2, {key: 'send-transaction'}) + + // // case 'sendToken': + // // log.debug('rendering send token screen') + + // // // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // // // const SendTokenComponentToRender = checkFeatureToggle('send-v2') + // // // ? SendTransactionScreen2 + // // // : SendTokenScreen + + // // return h(SendTransactionScreen2, {key: 'sendToken'}) + + // case 'newKeychain': + // log.debug('rendering new keychain screen') + // return h(NewKeyChainScreen, {key: 'new-keychain'}) + + // // case 'confTx': + // // log.debug('rendering confirm tx screen') + // // return h(Redirect, { + // // to: { + // // pathname: CONFIRM_TRANSACTION_ROUTE, + // // }, + // // }) + // // return h(ConfirmTxScreen, {key: 'confirm-tx'}) + + // // case 'add-token': + // // log.debug('rendering add-token screen from unlock screen.') + // // return h(AddTokenScreen, {key: 'add-token'}) + + // // case 'config': + // // log.debug('rendering config screen') + // // return h(Settings, {key: 'config'}) + + // // case 'import-menu': + // // log.debug('rendering import screen') + // // return h(Import, {key: 'import-menu'}) + + // // case 'reveal-seed-conf': + // // log.debug('rendering reveal seed confirmation screen') + // // return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) + + // // case 'info': + // // log.debug('rendering info screen') + // // return h(Settings, {key: 'info', tab: 'info'}) + + // case 'buyEth': + // log.debug('rendering buy ether screen') + // return h(BuyView, {key: 'buyEthView'}) + + // case 'onboardingBuyEth': + // log.debug('rendering onboarding buy ether screen') + // return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) + + // case 'qr': + // log.debug('rendering show qr screen') + // return h('div', { + // style: { + // position: 'absolute', + // height: '100%', + // top: '0px', + // left: '0px', + // }, + // }, [ + // h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { + // onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)), + // style: { + // marginLeft: '10px', + // marginTop: '50px', + // }, + // }), + // h('div', { + // style: { + // position: 'absolute', + // left: '44px', + // width: '285px', + // }, + // }, [ + // h(QrView, {key: 'qr'}), + // ]), + // ]) + + // default: + // log.debug('rendering default, account detail screen') + // return h(MainContainer, {key: 'account-detail'}) + // } + // } toggleMetamaskActive () { if (!this.props.isUnlocked) { @@ -676,6 +647,7 @@ App.propTypes = { betaUI: PropTypes.bool, isMouseUser: PropTypes.bool, setMouseUserState: PropTypes.func, + t: PropTypes.func, } function mapStateToProps (state) { diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js index b33373c19..61c245c32 100644 --- a/ui/app/components/pages/add-token.js +++ b/ui/app/components/pages/add-token.js @@ -2,7 +2,7 @@ const inherits = require('util').inherits const Component = require('react').Component const classnames = require('classnames') const h = require('react-hyperscript') -const connect = require('./metamask-connect') +const connect = require('../../metamask-connect') const R = require('ramda') const Fuse = require('fuse.js') const contractMap = require('eth-contract-metadata') diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js new file mode 100644 index 000000000..4f8c00768 --- /dev/null +++ b/ui/app/components/pages/home.js @@ -0,0 +1,333 @@ +const { Component } = require('react') +const PropTypes = require('prop-types') +const connect = require('../../metamask-connect') +const { Redirect, withRouter } = require('react-router-dom') +const { compose } = require('recompose') +const h = require('react-hyperscript') +const actions = require('../../actions') + +// init +const NewKeyChainScreen = require('../../new-keychain') +// mascara +const MascaraBuyEtherScreen = require('../../../../mascara/src/app/first-time/buy-ether-screen').default + +// accounts +const MainContainer = require('../../main-container') + +// other views +const BuyView = require('../../components/buy-button-subview') +const QrView = require('../../components/qr-code') + +// Routes +const { + REVEAL_SEED_ROUTE, + RESTORE_VAULT_ROUTE, + CONFIRM_TRANSACTION_ROUTE, + NOTICE_ROUTE, +} = require('../../routes') + +class Home extends Component { + componentDidMount () { + const { + unapprovedTxs = {}, + unapprovedMsgCount = 0, + unapprovedPersonalMsgCount = 0, + unapprovedTypedMessagesCount = 0, + } = this.props + + console.log('IN HOME COMPONENDIMOUNT') + // unapprovedTxs and unapproved messages + if (Object.keys(unapprovedTxs).length || + unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) { + console.log('IN HOME SHOULD REDIRECT') + this.props.history.push(CONFIRM_TRANSACTION_ROUTE) + } + } + + render () { + log.debug('rendering primary') + const { + noActiveNotices, + lostAccounts, + forgottenPassword, + currentView, + activeAddress, + seedWords, + } = this.props + + // seed words + if (seedWords) { + log.debug('rendering seed words') + return h(Redirect, { + to: { + pathname: REVEAL_SEED_ROUTE, + }, + }) + } + + if (forgottenPassword) { + log.debug('rendering restore vault screen') + return h(Redirect, { + to: { + pathname: RESTORE_VAULT_ROUTE, + }, + }) + } + + // notices + if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { + return h(Redirect, { + to: { + pathname: NOTICE_ROUTE, + }, + }) + } + + // if (!props.noActiveNotices) { + // log.debug('rendering notice screen for unread notices.') + // return h(NoticeScreen, { + // notice: props.lastUnreadNotice, + // key: 'NoticeScreen', + // onConfirm: () => props.dispatch(actions.markNoticeRead(props.lastUnreadNotice)), + // }) + // } else if (props.lostAccounts && props.lostAccounts.length > 0) { + // log.debug('rendering notice screen for lost accounts view.') + // return h(NoticeScreen, { + // notice: generateLostAccountsNotice(props.lostAccounts), + // key: 'LostAccountsNotice', + // onConfirm: () => props.dispatch(actions.markAccountsFound()), + // }) + // } + + // if (props.seedWords) { + // log.debug('rendering seed words') + // return h(HDCreateVaultComplete, {key: 'HDCreateVaultComplete'}) + // } + + // show initialize screen + // if (!isInitialized || forgottenPassword) { + // // show current view + // log.debug('rendering an initialize screen') + // // switch (props.currentView.name) { + + // // case 'restoreVault': + // // log.debug('rendering restore vault screen') + // // return h(HDRestoreVaultScreen, {key: 'HDRestoreVaultScreen'}) + + // // default: + // // log.debug('rendering menu screen') + // // return h(InitializeScreen, {key: 'menuScreenInit'}) + // // } + // } + + // // show unlock screen + // if (!props.isUnlocked) { + // return h(MainContainer, { + // currentViewName: props.currentView.name, + // isUnlocked: props.isUnlocked, + // }) + // } + + // show current view + switch (currentView.name) { + + case 'accountDetail': + log.debug('rendering main container') + return h(MainContainer, {key: 'account-detail'}) + + // case 'sendTransaction': + // log.debug('rendering send tx screen') + + // // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // // const SendComponentToRender = checkFeatureToggle('send-v2') + // // ? SendTransactionScreen2 + // // : SendTransactionScreen + + // return h(SendTransactionScreen2, {key: 'send-transaction'}) + + // case 'sendToken': + // log.debug('rendering send token screen') + + // // Going to leave this here until we are ready to delete SendTransactionScreen v1 + // // const SendTokenComponentToRender = checkFeatureToggle('send-v2') + // // ? SendTransactionScreen2 + // // : SendTokenScreen + + // return h(SendTransactionScreen2, {key: 'sendToken'}) + + case 'newKeychain': + log.debug('rendering new keychain screen') + return h(NewKeyChainScreen, {key: 'new-keychain'}) + + // case 'confTx': + // log.debug('rendering confirm tx screen') + // return h(Redirect, { + // to: { + // pathname: CONFIRM_TRANSACTION_ROUTE, + // }, + // }) + // return h(ConfirmTxScreen, {key: 'confirm-tx'}) + + // case 'add-token': + // log.debug('rendering add-token screen from unlock screen.') + // return h(AddTokenScreen, {key: 'add-token'}) + + // case 'config': + // log.debug('rendering config screen') + // return h(Settings, {key: 'config'}) + + // case 'import-menu': + // log.debug('rendering import screen') + // return h(Import, {key: 'import-menu'}) + + // case 'reveal-seed-conf': + // log.debug('rendering reveal seed confirmation screen') + // return h(RevealSeedConfirmation, {key: 'reveal-seed-conf'}) + + // case 'info': + // log.debug('rendering info screen') + // return h(Settings, {key: 'info', tab: 'info'}) + + case 'buyEth': + log.debug('rendering buy ether screen') + return h(BuyView, {key: 'buyEthView'}) + + case 'onboardingBuyEth': + log.debug('rendering onboarding buy ether screen') + return h(MascaraBuyEtherScreen, {key: 'buyEthView'}) + + case 'qr': + log.debug('rendering show qr screen') + return h('div', { + style: { + position: 'absolute', + height: '100%', + top: '0px', + left: '0px', + }, + }, [ + h('i.fa.fa-arrow-left.fa-lg.cursor-pointer.color-orange', { + onClick: () => this.props.dispatch(actions.backToAccountDetail(activeAddress)), + style: { + marginLeft: '10px', + marginTop: '50px', + }, + }), + h('div', { + style: { + position: 'absolute', + left: '44px', + width: '285px', + }, + }, [ + h(QrView, {key: 'qr'}), + ]), + ]) + + default: + log.debug('rendering default, account detail screen') + return h(MainContainer, {key: 'account-detail'}) + } + } +} + +Home.propTypes = { + currentCurrency: PropTypes.string, + isLoading: PropTypes.bool, + loadingMessage: PropTypes.string, + network: PropTypes.string, + provider: PropTypes.object, + frequentRpcList: PropTypes.array, + currentView: PropTypes.object, + sidebarOpen: PropTypes.bool, + isMascara: PropTypes.bool, + isOnboarding: PropTypes.bool, + isUnlocked: PropTypes.bool, + networkDropdownOpen: PropTypes.bool, + history: PropTypes.object, + dispatch: PropTypes.func, + selectedAddress: PropTypes.string, + noActiveNotices: PropTypes.bool, + lostAccounts: PropTypes.array, + isInitialized: PropTypes.bool, + forgottenPassword: PropTypes.bool, + activeAddress: PropTypes.string, + unapprovedTxs: PropTypes.object, + seedWords: PropTypes.string, + unapprovedMsgCount: PropTypes.number, + unapprovedPersonalMsgCount: PropTypes.number, + unapprovedTypedMessagesCount: PropTypes.number, + welcomeScreenSeen: PropTypes.bool, + isPopup: PropTypes.bool, + isMouseUser: PropTypes.bool, + t: PropTypes.func, +} + +function mapStateToProps (state) { + const { appState, metamask } = state + const { + networkDropdownOpen, + sidebarOpen, + isLoading, + loadingMessage, + } = appState + + const { + accounts, + address, + isInitialized, + noActiveNotices, + seedWords, + unapprovedTxs, + lastUnreadNotice, + lostAccounts, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, + } = metamask + const selected = address || Object.keys(accounts)[0] + + return { + // state from plugin + networkDropdownOpen, + sidebarOpen, + isLoading, + loadingMessage, + noActiveNotices, + isInitialized, + isUnlocked: state.metamask.isUnlocked, + selectedAddress: state.metamask.selectedAddress, + currentView: state.appState.currentView, + activeAddress: state.appState.activeAddress, + transForward: state.appState.transForward, + isMascara: state.metamask.isMascara, + isOnboarding: Boolean(!noActiveNotices || seedWords || !isInitialized), + isPopup: state.metamask.isPopup, + seedWords: state.metamask.seedWords, + unapprovedTxs, + unapprovedMsgs: state.metamask.unapprovedMsgs, + unapprovedMsgCount, + unapprovedPersonalMsgCount, + unapprovedTypedMessagesCount, + menuOpen: state.appState.menuOpen, + network: state.metamask.network, + provider: state.metamask.provider, + forgottenPassword: state.appState.forgottenPassword, + lastUnreadNotice, + lostAccounts, + frequentRpcList: state.metamask.frequentRpcList || [], + currentCurrency: state.metamask.currentCurrency, + isMouseUser: state.appState.isMouseUser, + isRevealingSeedWords: state.metamask.isRevealingSeedWords, + Qr: state.appState.Qr, + welcomeScreenSeen: state.metamask.welcomeScreenSeen, + + // state needed to get account dropdown temporarily rendering from app bar + selected, + } +} + +module.exports = compose( + withRouter, + connect(mapStateToProps) +)(Home) diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js index 749da9758..24ebf89e3 100644 --- a/ui/app/components/pages/keychains/restore-vault.js +++ b/ui/app/components/pages/keychains/restore-vault.js @@ -2,9 +2,9 @@ const { withRouter } = require('react-router-dom') const PropTypes = require('prop-types') const { compose } = require('recompose') const PersistentForm = require('../../../../lib/persistent-form') -const { connect } = require('react-redux') +const connect = require('../../../metamask-connect') const h = require('react-hyperscript') -const { createNewVaultAndRestore } = require('../../../actions') +const { createNewVaultAndRestore, unMarkPasswordForgotten } = require('../../../actions') const { DEFAULT_ROUTE } = require('../../../routes') class RestoreVaultPage extends PersistentForm { @@ -22,6 +22,11 @@ class RestoreVaultPage extends PersistentForm { } } + cancel () { + this.props.unMarkPasswordForgotten() + .then(this.props.history.goBack()) + } + createNewVaultAndRestore () { this.setState({ error: null }) @@ -51,7 +56,7 @@ class RestoreVaultPage extends PersistentForm { // submit this.props.createNewVaultAndRestore(password, seed) - .then(() => history.push(DEFAULT_ROUTE)) + .then(() => this.props.history.push(DEFAULT_ROUTE)) .catch(({ message }) => { this.setState({ error: message }) log.error(message) @@ -76,7 +81,7 @@ class RestoreVaultPage extends PersistentForm { padding: 6, }, }, [ - 'Restore Vault', + this.props.t('restoreVault'), ]), // wallet seed entry @@ -85,14 +90,14 @@ class RestoreVaultPage extends PersistentForm { dataset: { persistentFormId: 'wallet-seed', }, - placeholder: 'Enter your secret twelve word phrase here to restore your vault.', + placeholder: this.props.t('secretPhrase'), }), // password h('input.large-input.letter-spacey', { type: 'password', id: 'password-box', - placeholder: 'New Password (min 8 chars)', + placeholder: this.props.t('newPassword8Chars'), dataset: { persistentFormId: 'password', }, @@ -106,7 +111,7 @@ class RestoreVaultPage extends PersistentForm { h('input.large-input.letter-spacey', { type: 'password', id: 'password-box-confirm', - placeholder: 'Confirm Password', + placeholder: this.props.t('confirmPassword'), onKeyPress: this.createOnEnter.bind(this), dataset: { persistentFormId: 'password-confirmation', @@ -130,12 +135,14 @@ class RestoreVaultPage extends PersistentForm { }, [ // cancel - h('button.primary', { onClick: () => history.goBack() }, 'CANCEL'), + h('button.primary', { + onClick: () => this.cancel(), + }, this.props.t('cancel')), // submit h('button.primary', { onClick: this.createNewVaultAndRestore.bind(this), - }, 'OK'), + }, this.props.t('ok')), ]), ]) @@ -161,6 +168,7 @@ const mapDispatchToProps = dispatch => { createNewVaultAndRestore: (password, seed) => { return dispatch(createNewVaultAndRestore(password, seed)) }, + unMarkPasswordForgotten: () => dispatch(unMarkPasswordForgotten()), } } diff --git a/ui/app/components/pages/signature-request.js b/ui/app/components/pages/signature-request.js deleted file mode 100644 index e9271fce1..000000000 --- a/ui/app/components/pages/signature-request.js +++ /dev/null @@ -1,284 +0,0 @@ -const { Component } = require('react') -const h = require('react-hyperscript') -const PropTypes = require('prop-types') -const Identicon = require('../identicon') -const { connect } = require('react-redux') -const ethUtil = require('ethereumjs-util') -const classnames = require('classnames') - -const AccountDropdownMini = require('../dropdowns/account-dropdown-mini') - -const t = require('../../../i18n') -const { conversionUtil } = require('../../conversion-util') -const { DEFAULT_ROUTE } = require('../../routes') - -const { - getSelectedAccount, - getCurrentAccountWithSendEtherInfo, - getSelectedAddress, - accountsWithSendEtherInfoSelector, - conversionRateSelector, -} = require('../../selectors.js') - -class SignatureRequest extends Component { - constructor (props) { - super(props) - - this.state = { - selectedAccount: props.selectedAccount, - accountDropdownOpen: false, - } - } - - componentWillMount () { - const { - unapprovedMsgCount = 0, - unapprovedPersonalMsgCount = 0, - unapprovedTypedMessagesCount = 0, - } = this.props - - if (unapprovedMsgCount + unapprovedPersonalMsgCount + unapprovedTypedMessagesCount < 1) { - this.props.history.push(DEFAULT_ROUTE) - } - } - - renderHeader () { - return h('div.request-signature__header', [ - - h('div.request-signature__header-background'), - - h('div.request-signature__header__text', t('sigRequest')), - - h('div.request-signature__header__tip-container', [ - h('div.request-signature__header__tip'), - ]), - - ]) - } - - renderAccountDropdown () { - const { - selectedAccount, - accountDropdownOpen, - } = this.state - - const { accounts } = this.props - - return h('div.request-signature__account', [ - - h('div.request-signature__account-text', [t('account') + ':']), - - h(AccountDropdownMini, { - selectedAccount, - accounts, - onSelect: selectedAccount => this.setState({ selectedAccount }), - dropdownOpen: accountDropdownOpen, - openDropdown: () => this.setState({ accountDropdownOpen: true }), - closeDropdown: () => this.setState({ accountDropdownOpen: false }), - }), - - ]) - } - - renderBalance () { - const { balance, conversionRate } = this.props - - const balanceInEther = conversionUtil(balance, { - fromNumericBase: 'hex', - toNumericBase: 'dec', - fromDenomination: 'WEI', - numberOfDecimals: 6, - conversionRate, - }) - - return h('div.request-signature__balance', [ - - h('div.request-signature__balance-text', [t('balance')]), - - h('div.request-signature__balance-value', `${balanceInEther} ETH`), - - ]) - } - - renderAccountInfo () { - return h('div.request-signature__account-info', [ - - this.renderAccountDropdown(), - - this.renderRequestIcon(), - - this.renderBalance(), - - ]) - } - - renderRequestIcon () { - const { requesterAddress } = this.props - - return h('div.request-signature__request-icon', [ - h(Identicon, { - diameter: 40, - address: requesterAddress, - }), - ]) - } - - renderRequestInfo () { - return h('div.request-signature__request-info', [ - - h('div.request-signature__headline', [ - t('yourSigRequested'), - ]), - - ]) - } - - msgHexToText (hex) { - try { - const stripped = ethUtil.stripHexPrefix(hex) - const buff = Buffer.from(stripped, 'hex') - return buff.toString('utf8') - } catch (e) { - return hex - } - } - - renderBody () { - let rows - let notice = t('youSign') + ':' - - const { txData } = this.props - const { type, msgParams: { data } } = txData - - if (type === 'personal_sign') { - rows = [{ name: t('message'), value: this.msgHexToText(data) }] - } else if (type === 'eth_signTypedData') { - rows = data - } else if (type === 'eth_sign') { - rows = [{ name: t('message'), value: data }] - notice = t('signNotice') - } - - return h('div.request-signature__body', {}, [ - - this.renderAccountInfo(), - - this.renderRequestInfo(), - - h('div.request-signature__notice', { - className: classnames({ - 'request-signature__notice': type === 'personal_sign' || type === 'eth_signTypedData', - 'request-signature__warning': type === 'eth_sign', - }), - }, [notice]), - - h('div.request-signature__rows', [ - - ...rows.map(({ name, value }) => { - return h('div.request-signature__row', [ - h('div.request-signature__row-title', [`${name}:`]), - h('div.request-signature__row-value', value), - ]) - }), - - ]), - - ]) - } - - renderFooter () { - const { - txData = {}, - signPersonalMessage, - signTypedMessage, - cancelPersonalMessage, - cancelTypedMessage, - signMessage, - cancelMessage, - history, - } = this.props - - const { type } = txData - - let cancel = () => Promise.resolve() - let sign = () => Promise.resolve() - const { msgParams: params = {}, id } = txData - params.id = id - params.metamaskId = id - - switch (type) { - case 'personal_sign': - cancel = () => cancelPersonalMessage(params) - sign = () => signPersonalMessage(params) - break - case 'eth_signTypedData': - cancel = () => cancelTypedMessage(params) - sign = () => signTypedMessage(params) - break - case 'eth_sign': - cancel = () => cancelMessage(params) - sign = () => signMessage(params) - break - } - - return h('div.request-signature__footer', [ - h('button.btn-secondary--lg.request-signature__footer__cancel-button', { - onClick: () => { - cancel().then(() => history.push(DEFAULT_ROUTE)) - }, - }, t('cancel')), - h('button.btn-primary--lg', { - onClick: () => { - sign().then(() => history.push(DEFAULT_ROUTE)) - }, - }, t('sign')), - ]) - } - - render () { - return ( - h('div.request-signature__container', [ - - this.renderHeader(), - - this.renderBody(), - - this.renderFooter(), - - ]) - ) - } -} - -SignatureRequest.propTypes = { - txData: PropTypes.object, - signPersonalMessage: PropTypes.func, - cancelPersonalMessage: PropTypes.func, - signTypedMessage: PropTypes.func, - cancelTypedMessage: PropTypes.func, - signMessage: PropTypes.func, - cancelMessage: PropTypes.func, - requesterAddress: PropTypes.string, - accounts: PropTypes.array, - conversionRate: PropTypes.number, - balance: PropTypes.string, - selectedAccount: PropTypes.object, - history: PropTypes.object, - unapprovedMsgCount: PropTypes.number, - unapprovedPersonalMsgCount: PropTypes.number, - unapprovedTypedMessagesCount: PropTypes.number, -} - -const mapStateToProps = state => { - return { - balance: getSelectedAccount(state).balance, - selectedAccount: getCurrentAccountWithSendEtherInfo(state), - selectedAddress: getSelectedAddress(state), - requester: null, - requesterAddress: null, - accounts: accountsWithSendEtherInfoSelector(state), - conversionRate: conversionRateSelector(state), - } -} - -module.exports = connect(mapStateToProps)(SignatureRequest) diff --git a/ui/app/components/pages/unlock.js b/ui/app/components/pages/unlock.js index 3d7a9091c..ed4b9ded7 100644 --- a/ui/app/components/pages/unlock.js +++ b/ui/app/components/pages/unlock.js @@ -1,14 +1,22 @@ const { Component } = require('react') const PropTypes = require('prop-types') -const { connect } = require('react-redux') +const connect = require('../../metamask-connect') const h = require('react-hyperscript') const { withRouter } = require('react-router-dom') const { compose } = require('recompose') -const { tryUnlockMetamask, forgotPassword, markPasswordForgotten } = require('../../actions') +const { + tryUnlockMetamask, + forgotPassword, + markPasswordForgotten, + setNetworkEndpoints, + setFeatureFlag, +} = require('../../actions') +const environmentType = require('../../../../app/scripts/lib/environment-type') const getCaretCoordinates = require('textarea-caret') const EventEmitter = require('events').EventEmitter const Mascot = require('../mascot') -const { DEFAULT_ROUTE } = require('../../routes') +const { OLD_UI_NETWORK_TYPE } = require('../../../../app/scripts/config').enums +const { DEFAULT_ROUTE, RESTORE_VAULT_ROUTE } = require('../../routes') class UnlockScreen extends Component { constructor (props) { @@ -77,70 +85,76 @@ class UnlockScreen extends Component { render () { const { error } = this.state - const { markPasswordForgotten } = this.props - return ( - h('.unlock-page.main-container', [ - h('.flex-column', { + h('.unlock-screen', [ + + h(Mascot, { + animationEventEmitter: this.animationEventEmitter, + }), + + h('h1', { + style: { + fontSize: '1.4em', + textTransform: 'uppercase', + color: '#7F8082', + }, + }, this.props.t('appName')), + + h('input.large-input', { + type: 'password', + id: 'password-box', + placeholder: 'enter password', + style: { + background: 'white', + }, + onKeyPress: this.onKeyPress.bind(this), + onInput: this.inputChanged.bind(this), + }), + + h('.error', { + style: { + display: error ? 'block' : 'none', + padding: '0 20px', + textAlign: 'center', + }, + }, error), + + h('button.primary.cursor-pointer', { + onClick: this.onSubmit.bind(this), + style: { + margin: 10, + }, + }, this.props.t('login')), + + h('p.pointer', { + onClick: () => { + this.props.markPasswordForgotten() + this.props.history.push(RESTORE_VAULT_ROUTE) + + console.log('typeeee', environmentType()) + if (environmentType() === 'popup') { + global.platform.openExtensionInBrowser() + } + }, + style: { + fontSize: '0.8em', + color: 'rgb(247, 134, 28)', + textDecoration: 'underline', + }, + }, this.props.t('restoreFromSeed')), + + h('p.pointer', { + onClick: () => { + this.props.useOldInterface() + .then(() => this.props.setNetworkEndpoints(OLD_UI_NETWORK_TYPE)) + }, style: { - width: 'inherit', + fontSize: '0.8em', + color: '#aeaeae', + textDecoration: 'underline', + marginTop: '32px', }, - }, [ - h('.unlock-screen.flex-column.flex-center.flex-grow', [ - - h(Mascot, { - animationEventEmitter: this.animationEventEmitter, - }), - - h('h1', { - style: { - fontSize: '1.4em', - textTransform: 'uppercase', - color: '#7F8082', - }, - }, 'MetaMask'), - - h('input.large-input', { - type: 'password', - id: 'password-box', - placeholder: 'enter password', - style: { - background: 'white', - }, - onKeyPress: this.onKeyPress.bind(this), - onInput: this.inputChanged.bind(this), - }), - - h('.error', { - style: { - display: error ? 'block' : 'none', - padding: '0 20px', - textAlign: 'center', - }, - }, error), - - h('button.primary.cursor-pointer', { - onClick: this.onSubmit.bind(this), - style: { - margin: 10, - }, - }, 'Unlock'), - - h('.flex-row.flex-center.flex-grow', [ - h('p.pointer', { - onClick: () => { - markPasswordForgotten() - global.platform.openExtensionInBrowser() - }, - style: { - fontSize: '0.8em', - color: 'rgb(247, 134, 28)', - textDecoration: 'underline', - }, - }, 'Restore from seed phrase'), - ]), - ]), - ]), + }, this.props.t('classicInterface')), ]) ) } @@ -152,6 +166,9 @@ UnlockScreen.propTypes = { markPasswordForgotten: PropTypes.func, history: PropTypes.object, isUnlocked: PropTypes.bool, + t: PropTypes.func, + useOldInterface: PropTypes.func, + setNetworkEndpoints: PropTypes.func, } const mapStateToProps = state => { @@ -166,6 +183,8 @@ const mapDispatchToProps = dispatch => { forgotPassword: () => dispatch(forgotPassword()), tryUnlockMetamask: password => dispatch(tryUnlockMetamask(password)), markPasswordForgotten: () => dispatch(markPasswordForgotten()), + useOldInterface: () => dispatch(setFeatureFlag('betaUI', false, 'OLD_UI_NOTIFICATION_MODAL')), + setNetworkEndpoints: type => dispatch(setNetworkEndpoints(type)), } } diff --git a/ui/app/components/signature-request.js b/ui/app/components/signature-request.js index b76c1e60f..92feb70ba 100644 --- a/ui/app/components/signature-request.js +++ b/ui/app/components/signature-request.js @@ -5,6 +5,8 @@ const Identicon = require('./identicon') const connect = require('../metamask-connect') const ethUtil = require('ethereumjs-util') const classnames = require('classnames') +const { compose } = require('recompose') +const { withRouter } = require('react-router-dom') const AccountDropdownMini = require('./dropdowns/account-dropdown-mini') @@ -19,6 +21,8 @@ const { conversionRateSelector, } = require('../selectors.js') +const { DEFAULT_ROUTE } = require('../routes') + function mapStateToProps (state) { return { balance: getSelectedAccount(state).balance, @@ -37,7 +41,10 @@ function mapDispatchToProps (dispatch) { } } -module.exports = connect(mapStateToProps, mapDispatchToProps)(SignatureRequest) +module.exports = compose( + withRouter, + connect(mapStateToProps, mapDispatchToProps) +)(SignatureRequest) inherits(SignatureRequest, Component) function SignatureRequest (props) { @@ -223,10 +230,14 @@ SignatureRequest.prototype.renderFooter = function () { return h('div.request-signature__footer', [ h('button.btn-secondary--lg.request-signature__footer__cancel-button', { - onClick: cancel, + onClick: event => { + cancel(event).then(() => this.props.history.push(DEFAULT_ROUTE)) + }, }, this.props.t('cancel')), h('button.btn-primary--lg', { - onClick: sign, + onClick: event => { + sign(event).then(() => this.props.history.push(DEFAULT_ROUTE)) + }, }, this.props.t('sign')), ]) } diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 57ae89dc6..35ec6c7af 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -2,12 +2,13 @@ const inherits = require('util').inherits const Component = require('react').Component const h = require('react-hyperscript') const connect = require('./metamask-connect') -const { withRouter } = require('react-router-dom') +const { withRouter, Redirect } = require('react-router-dom') const { compose } = require('recompose') const actions = require('./actions') const txHelper = require('../lib/tx-helper') const PendingTx = require('./components/pending-tx') +const SignatureRequest = require('./components/signature-request') // const PendingMsg = require('./components/pending-msg') // const PendingPersonalMsg = require('./components/pending-personal-msg') // const PendingTypedMsg = require('./components/pending-typed-msg') @@ -55,6 +56,7 @@ function ConfirmTxScreen () { } ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) { + console.log('CONFTX COMPONENTDIDUPDATE') const { unapprovedTxs, network, @@ -67,6 +69,7 @@ ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) { const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network) if (prevTx.status === 'dropped' && unconfTxList.length === 0) { + console.log('CONFTX REDIRECTINGTODEFAULT') this.props.history.push(DEFAULT_ROUTE) } } @@ -87,6 +90,7 @@ ConfirmTxScreen.prototype.render = function () { } = props var unconfTxList = txHelper(unapprovedTxs, unapprovedMsgs, unapprovedPersonalMsgs, unapprovedTypedMessages, network) + console.log('UNCONF', unconfTxList, props.index, props) var txData = unconfTxList[props.index] || {} var txParams = txData.params || {} @@ -108,7 +112,13 @@ ConfirmTxScreen.prototype.render = function () { */ log.info(`rendering a combined ${unconfTxList.length} unconf msg & txs`) - if (unconfTxList.length === 0) return h(Loading) + if (unconfTxList.length === 0) { + return h(Redirect, { + to: { + pathname: DEFAULT_ROUTE, + }, + }) + } return currentTxView({ // Properties @@ -136,11 +146,27 @@ ConfirmTxScreen.prototype.render = function () { function currentTxView (opts) { log.info('rendering current tx view') const { txData } = opts - const { txParams } = txData + const { txParams, msgParams } = txData + console.log('TXPARAMS', txParams, msgParams) if (txParams) { log.debug('txParams detected, rendering pending tx') return h(PendingTx, opts) + } else if (msgParams) { + log.debug('msgParams detected, rendering pending msg') + + return h(SignatureRequest, opts) + + // if (type === 'eth_sign') { + // log.debug('rendering eth_sign message') + // return h(PendingMsg, opts) + // } else if (type === 'personal_sign') { + // log.debug('rendering personal_sign message') + // return h(PendingPersonalMsg, opts) + // } else if (type === 'eth_signTypedData') { + // log.debug('rendering eth_signTypedData message') + // return h(PendingTypedMsg, opts) + // } } return h(Loading) @@ -174,7 +200,7 @@ ConfirmTxScreen.prototype.signMessage = function (msgData, event) { var params = msgData.msgParams params.metamaskId = msgData.id this.stopPropagation(event) - this.props.dispatch(actions.signMsg(params)) + return this.props.dispatch(actions.signMsg(params)) } ConfirmTxScreen.prototype.stopPropagation = function (event) { @@ -188,7 +214,7 @@ ConfirmTxScreen.prototype.signPersonalMessage = function (msgData, event) { var params = msgData.msgParams params.metamaskId = msgData.id this.stopPropagation(event) - this.props.dispatch(actions.signPersonalMsg(params)) + return this.props.dispatch(actions.signPersonalMsg(params)) } ConfirmTxScreen.prototype.signTypedMessage = function (msgData, event) { @@ -196,25 +222,25 @@ ConfirmTxScreen.prototype.signTypedMessage = function (msgData, event) { var params = msgData.msgParams params.metamaskId = msgData.id this.stopPropagation(event) - this.props.dispatch(actions.signTypedMsg(params)) + return this.props.dispatch(actions.signTypedMsg(params)) } ConfirmTxScreen.prototype.cancelMessage = function (msgData, event) { log.info('canceling message') this.stopPropagation(event) - this.props.dispatch(actions.cancelMsg(msgData)) + return this.props.dispatch(actions.cancelMsg(msgData)) } ConfirmTxScreen.prototype.cancelPersonalMessage = function (msgData, event) { log.info('canceling personal message') this.stopPropagation(event) - this.props.dispatch(actions.cancelPersonalMsg(msgData)) + return this.props.dispatch(actions.cancelPersonalMsg(msgData)) } ConfirmTxScreen.prototype.cancelTypedMessage = function (msgData, event) { log.info('canceling typed message') this.stopPropagation(event) - this.props.dispatch(actions.cancelTypedMsg(msgData)) + return this.props.dispatch(actions.cancelTypedMsg(msgData)) } ConfirmTxScreen.prototype.goHome = function (event) { diff --git a/ui/app/routes.js b/ui/app/routes.js index aadf91cf5..d3b305b40 100644 --- a/ui/app/routes.js +++ b/ui/app/routes.js @@ -10,12 +10,13 @@ const NEW_ACCOUNT_ROUTE = '/new-account' const IMPORT_ACCOUNT_ROUTE = '/new-account/import' const SEND_ROUTE = '/send' const CONFIRM_TRANSACTION_ROUTE = '/confirm-transaction' +const SIGNATURE_REQUEST_ROUTE = '/confirm-transaction/signature-request' const NOTICE_ROUTE = '/notice' -const SIGNATURE_REQUEST_ROUTE = '/signature-request' const WELCOME_ROUTE = '/welcome' const INITIALIZE_ROUTE = '/initialize' const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/import-account' const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/import-with-seed-phrase' +const INITIALIZE_UNIQUE_IMAGE_ROUTE = '/initialize/unique-image' module.exports = { DEFAULT_ROUTE, @@ -36,4 +37,5 @@ module.exports = { INITIALIZE_ROUTE, INITIALIZE_IMPORT_ACCOUNT_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_UNIQUE_IMAGE_ROUTE, } -- cgit From 2fa554a6414d2231dcd6f2476866ea9c1c7b80ca Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 30 Mar 2018 17:37:24 -0700 Subject: Fix conf-tx render --- ui/app/app.js | 5 ++++- ui/app/components/tx-list.js | 5 ++++- yarn.lock | 47 +++++++++++++++++++++++++++++++++++++++----- 3 files changed, 50 insertions(+), 7 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index af2b70353..8a21220b1 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -4,7 +4,6 @@ const connect = require('react-redux').connect const { Route, Switch, Redirect, withRouter } = require('react-router-dom') const { compose } = require('recompose') const h = require('react-hyperscript') -const PropTypes = require('prop-types') const actions = require('./actions') const classnames = require('classnames') @@ -732,6 +731,10 @@ function mapDispatchToProps (dispatch, ownProps) { } } +App.contextTypes = { + t: PropTypes.func, +} + module.exports = compose( withRouter, connect(mapStateToProps, mapDispatchToProps) diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 0cef64ca6..70643aa36 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -120,7 +120,10 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa const isUnapproved = transactionStatus === 'unapproved' if (isUnapproved) { - opts.onClick = () => history.push(CONFIRM_TRANSACTION_ROUTE) + opts.onClick = () => { + this.props.showConfTxPage({ id: transactionId }) + history.push(CONFIRM_TRANSACTION_ROUTE) + } opts.transactionStatus = this.context.t('notStarted') } else if (transactionHash) { opts.onClick = () => this.view(transactionHash, transactionNetworkId) diff --git a/yarn.lock b/yarn.lock index ae9cf4946..0e8bd04c6 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2463,10 +2463,6 @@ cli-width@^2.0.0: version "2.2.0" resolved "https://registry.yarnpkg.com/cli-width/-/cli-width-2.2.0.tgz#ff19ede8a9a5e579324147b0c11f0fbcbabed639" -client-sw-ready-event@^3.3.0: - version "3.4.0" - resolved "https://registry.yarnpkg.com/client-sw-ready-event/-/client-sw-ready-event-3.4.0.tgz#ff486461769055e7748570f1aef102b8675b66d0" - cliui@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1" @@ -5236,6 +5232,10 @@ get-func-name@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/get-func-name/-/get-func-name-2.0.0.tgz#ead774abee72e20409433a066366023dd6887a41" +get-own-enumerable-property-symbols@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-2.0.1.tgz#5c4ad87f2834c4b9b4e84549dc1e0650fb38c24b" + get-stdin@^3.0.0: version "3.0.2" resolved "https://registry.yarnpkg.com/get-stdin/-/get-stdin-3.0.2.tgz#c1ced24b9039b38ded85bdf161e57713b6dd4abe" @@ -5510,6 +5510,17 @@ gulp-cli@^2.0.0: v8flags "^3.0.1" yargs "^7.1.0" +gulp-debug@^3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/gulp-debug/-/gulp-debug-3.2.0.tgz#45aba4439fa79fe0788f6a411ee0778f4492dfa5" + dependencies: + chalk "^2.3.0" + fancy-log "^1.3.2" + plur "^2.0.0" + stringify-object "^3.0.0" + through2 "^2.0.0" + tildify "^1.1.2" + gulp-eslint@^4.0.0: version "4.0.2" resolved "https://registry.yarnpkg.com/gulp-eslint/-/gulp-eslint-4.0.2.tgz#18a2a6768e4404cbf3e203239cb57474168fa606" @@ -6471,6 +6482,10 @@ is-number@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/is-number/-/is-number-4.0.0.tgz#0026e37f5454d73e356dfe6564699867c6a7f0ff" +is-obj@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f" + is-odd@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/is-odd/-/is-odd-1.0.0.tgz#3b8a932eb028b3775c39bb09e91767accdb69088" @@ -11066,6 +11081,14 @@ string_decoder@~0.10.x: version "0.10.31" resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94" +stringify-object@^3.0.0: + version "3.2.2" + resolved "https://registry.yarnpkg.com/stringify-object/-/stringify-object-3.2.2.tgz#9853052e5a88fb605a44cd27445aa257ad7ffbcd" + dependencies: + get-own-enumerable-property-symbols "^2.0.1" + is-obj "^1.0.1" + is-regexp "^1.0.0" + stringstream@~0.0.4, stringstream@~0.0.5: version "0.0.5" resolved "https://registry.yarnpkg.com/stringstream/-/stringstream-0.0.5.tgz#4e484cd4de5a0bbbee18e46307710a8a81621878" @@ -11284,7 +11307,15 @@ svg-tags@^1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764" -sw-stream@^2.0.0: +sw-controller@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/sw-controller/-/sw-controller-1.0.3.tgz#794b5e3e324cf2c515d12b3df57a56128e67dd1e" + dependencies: + babel-preset-es2015 "^6.22.0" + babel-runtime "^6.23.0" + babelify "^7.3.0" + +sw-stream@^2.0.2: version "2.0.2" resolved "https://registry.yarnpkg.com/sw-stream/-/sw-stream-2.0.2.tgz#68cd1ce959f3fe79b76f583f98c9172543880a0f" dependencies: @@ -11512,6 +11543,12 @@ thunkify@~2.1.1: version "2.1.2" resolved "https://registry.yarnpkg.com/thunkify/-/thunkify-2.1.2.tgz#faa0e9d230c51acc95ca13a361ac05ca7e04553d" +tildify@^1.1.2: + version "1.2.0" + resolved "https://registry.yarnpkg.com/tildify/-/tildify-1.2.0.tgz#dcec03f55dca9b7aa3e5b04f21817eb56e63588a" + dependencies: + os-homedir "^1.0.0" + time-stamp@^1.0.0: version "1.1.0" resolved "https://registry.yarnpkg.com/time-stamp/-/time-stamp-1.1.0.tgz#764a5a11af50561921b133f3b44e618687e0f5c3" -- cgit From 6277a4c46aa2fd94f0fff047aff346d7f255224d Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 2 Apr 2018 02:59:49 -0700 Subject: Refactor onboarding flow --- mascara/src/app/first-time/confirm-seed-screen.js | 129 ++++++----- .../src/app/first-time/create-password-screen.js | 254 ++++++++++++++------- .../app/first-time/import-seed-phrase-screen.js | 4 +- mascara/src/app/first-time/index.js | 54 +++-- mascara/src/app/first-time/notice-screen.js | 52 ++++- mascara/src/app/first-time/seed-screen.js | 20 +- mascara/src/app/first-time/unique-image-screen.js | 18 +- ui/app/actions.js | 5 +- ui/app/app.js | 24 +- ui/app/components/pages/add-token.js | 4 +- ui/app/components/pages/home.js | 22 +- ui/app/components/pages/keychains/restore-vault.js | 2 +- ui/app/components/pages/keychains/reveal-seed.js | 2 +- ui/app/routes.js | 8 + ui/app/send-v2.js | 6 +- ui/app/welcome-screen.js | 34 ++- 16 files changed, 403 insertions(+), 235 deletions(-) diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js index c9382689e..6eabd7544 100644 --- a/mascara/src/app/first-time/confirm-seed-screen.js +++ b/mascara/src/app/first-time/confirm-seed-screen.js @@ -1,14 +1,15 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' import classnames from 'classnames' import shuffle from 'lodash.shuffle' -import { compose, onlyUpdateForPropTypes } from 'recompose' +import { compose } from 'recompose' import Identicon from '../../../../ui/app/components/identicon' import { confirmSeedWords } from '../../../../ui/app/actions' import Breadcrumbs from './breadcrumbs' import LoadingScreen from './loading-screen' -import { DEFAULT_ROUTE } from '../../../../ui/app/routes' +import { INITIALIZE_ROUTE, DEFAULT_ROUTE } from '../../../../ui/app/routes' class ConfirmSeedScreen extends Component { static propTypes = { @@ -35,10 +36,18 @@ class ConfirmSeedScreen extends Component { componentWillMount () { const { seedWords, history } = this.props if (!seedWords) { - history.push(DEFAULT_ROUTE) + history.push(INITIALIZE_ROUTE) } } + handleClick () { + this.props.confirmSeedWords() + .then(() => { + console.log('FINISHED') + this.props.history.push(DEFAULT_ROUTE) + }) + } + render () { const { seedWords, confirmSeedWords, history } = this.props const { selectedSeeds, shuffledSeeds } = this.state @@ -50,66 +59,70 @@ class ConfirmSeedScreen extends Component { this.props.isLoading ? : ( -
- -
-
-
- Confirm your Secret Backup Phrase -
-
- Please select each phrase in order to make sure it is correct. -
-
- {selectedSeeds.map(([_, word], i) => ( +
+
+
+ +
+
+
+ Confirm your Secret Backup Phrase +
+
+ Please select each phrase in order to make sure it is correct. +
+
+ {selectedSeeds.map(([_, word], i) => ( + + ))} +
+
+ {shuffledSeeds.map((word, i) => { + const isSelected = selectedSeeds + .filter(([index, seed]) => seed === word && index === i) + .length + + return ( + + ) + })} +
- ))} -
-
- {shuffledSeeds.map((word, i) => { - const isSelected = selectedSeeds - .filter(([index, seed]) => seed === word && index === i) - .length - - return ( - - ) - })} +
- +
-
) } @@ -119,7 +132,7 @@ class ConfirmSeedScreen extends Component { } export default compose( - onlyUpdateForPropTypes, + withRouter, connect( ({ metamask: { selectedAddress, seedWords }, appState: { isLoading } }) => ({ seedWords, diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index c34391fa6..7b8971afe 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' -import { withRouter } from 'react-router-dom' +import { withRouter, Redirect } from 'react-router-dom' import { compose } from 'recompose' import { createNewVaultAndKeychain } from '../../../../ui/app/actions' import LoadingScreen from './loading-screen' @@ -11,8 +11,10 @@ import Mascot from '../../../../ui/app/components/mascot' import classnames from 'classnames' import { DEFAULT_ROUTE, + INITIALIZE_UNIQUE_IMAGE_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, - INITIALIZE_IMPORT_ACCOUNT_ROUTE, + // INITIALIZE_IMPORT_ACCOUNT_ROUTE, + INITIALIZE_NOTICE_ROUTE, } from '../../../../ui/app/routes' class CreatePasswordScreen extends Component { @@ -28,6 +30,7 @@ class CreatePasswordScreen extends Component { state = { password: '', confirmPassword: '', + isLoading: false, } constructor () { @@ -36,9 +39,11 @@ class CreatePasswordScreen extends Component { } componentWillMount () { - const { isInitialized, isUnlocked, history } = this.props - if (isInitialized || isUnlocked) { - history.push(DEFAULT_ROUTE) + const { isInitialized, isUnlocked, history, noActiveNotices } = this.props + + if (isInitialized) { + console.log('%c IM already initialized', 'background: #222; color: #bada55') + history.push(INITIALIZE_NOTICE_ROUTE) } } @@ -64,95 +69,188 @@ class CreatePasswordScreen extends Component { const { password } = this.state const { createAccount, history } = this.props + this.setState({ isLoading: true }) createAccount(password) - .then(() => history.push(DEFAULT_ROUTE)) + .then(() => { + // this.setState({ isLoading: false }) + history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) + }) + .catch(() => this.setState({ isLoading: false})) + } + + renderFields () { + const { isMascara, history } = this.props + const { isLoading } = this.state + + return ( +
+
+ {isMascara &&
+ +
+ MetaMask is a secure identity vault for Ethereum. +
+
+ It allows you to hold ether & tokens, and interact with decentralized applications. +
+
} +
+
+ Create Password +
+ this.setState({password: e.target.value})} + /> + this.setState({confirmPassword: e.target.value})} + /> + + { + e.preventDefault() + history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) + }} + > + Import with seed phrase + + { /* } + { + e.preventDefault() + history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE) + }} + > + Import an account + + { */ } + +
+
+
+ ) } render () { - const { isLoading, isMascara, history } = this.props - - return isLoading - ? - : ( -
-
- {isMascara &&
- -
- MetaMask is a secure identity vault for Ethereum. -
-
- It allows you to hold ether & tokens, and interact with decentralized applications. -
-
} -
-
- Create Password -
- this.setState({password: e.target.value})} - /> - this.setState({confirmPassword: e.target.value})} - /> - - { - e.preventDefault() - history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) - }} - > - Import with seed phrase - - { /* } - { - e.preventDefault() - history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE) - }} - > - Import an account - - { */ } - + const { isInitialized, isUnlocked, history, noActiveNotices, isMascara } = this.props + + // if (isInitialized) { + // console.log('%c IM already initialized', 'background: #222; color: #bada55') + // if (!noActiveNotices) { + // console.log('%c GOING TO NOTICES', 'background: #222; color: #bada55') + // // history.replace(INITIALIZE_NOTICE_ROUTE) + // return + // } else { + // console.log('%c GOING TO DEFAULT', 'background: #222; color: #bada55') + // // history.replace(DEFAULT_ROUTE) + // return + // } + // } + + return ( +
+
+ {isMascara &&
+ +
+ MetaMask is a secure identity vault for Ethereum. +
+
+ It allows you to hold ether & tokens, and interact with decentralized applications. +
+
} +
+
+ Create Password
+ this.setState({password: e.target.value})} + /> + this.setState({confirmPassword: e.target.value})} + /> + + { + e.preventDefault() + history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) + }} + > + Import with seed phrase + + { /* } + { + e.preventDefault() + history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE) + }} + > + Import an account + + { */ } +
- ) +
+ ) } } -const mapStateToProps = state => { - const { metamask: { isInitialized, isUnlocked, isMascara }, appState: { isLoading } } = state +const mapStateToProps = ({ metamask, appState }) => { + const { isInitialized, isUnlocked, isMascara, noActiveNotices } = metamask + const { isLoading } = appState return { isLoading, isInitialized, isUnlocked, isMascara, + noActiveNotices, } } diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js index 4eec37723..5c2b21b0a 100644 --- a/mascara/src/app/first-time/import-seed-phrase-screen.js +++ b/mascara/src/app/first-time/import-seed-phrase-screen.js @@ -8,7 +8,7 @@ import { displayWarning, unMarkPasswordForgotten, } from '../../../../ui/app/actions' -import { DEFAULT_ROUTE } from '../../../../ui/app/routes' +import { DEFAULT_ROUTE, INITIALIZE_NOTICE_ROUTE } from '../../../../ui/app/routes' class ImportSeedPhraseScreen extends Component { static propTypes = { @@ -71,7 +71,7 @@ class ImportSeedPhraseScreen extends Component { leaveImportSeedScreenState() createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase)) - .then(() => history.push(DEFAULT_ROUTE)) + .then(() => history.push(INITIALIZE_NOTICE_ROUTE)) } render () { diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js index ea56a2f6e..5f47145a3 100644 --- a/mascara/src/app/first-time/index.js +++ b/mascara/src/app/first-time/index.js @@ -9,6 +9,7 @@ import NoticeScreen from './notice-screen' import BackupPhraseScreen from './seed-screen' import ImportAccountScreen from './import-account-screen' import ImportSeedPhraseScreen from './import-seed-phrase-screen' +import ConfirmSeed from './confirm-seed-screen' import { onboardingBuyEthView, unMarkPasswordForgotten, @@ -19,8 +20,14 @@ import { WELCOME_ROUTE, INITIALIZE_ROUTE, INITIALIZE_IMPORT_ACCOUNT_ROUTE, + INITIALIZE_UNIQUE_IMAGE_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, + INITIALIZE_NOTICE_ROUTE, + INITIALIZE_BACKUP_PHRASE_ROUTE, + INITIALIZE_CONFIRM_SEED_ROUTE, + INITIALIZE_CREATE_PASSWORD_ROUTE, } from '../../../../ui/app/routes' +import WelcomeScreen from '../../../../ui/app/welcome-screen' class FirstTimeFlow extends Component { @@ -60,11 +67,17 @@ class FirstTimeFlow extends Component { } componentDidMount () { - const { isInitialized, isUnlocked, history } = this.props + const { isInitialized, isUnlocked, history, noActiveNotices } = this.props + + // if (isInitialized || isUnlocked) { + // history.push(DEFAULT_ROUTE) + // } + + // if (!noActiveNotices) { + // console.log('INITIALIZE ACTIVE NOTICES') + // history.push(INITIALIZE_NOTICE_ROUTE) + // } - if (isInitialized || isUnlocked) { - history.push(DEFAULT_ROUTE) - } } setScreenType (screenType) { @@ -161,21 +174,24 @@ class FirstTimeFlow extends Component { } render () { - return this.props.welcomeScreenSeen - ? ( -
- - - - - -
- ) - : + return ( +
+ + + + + + + + + + +
+ ) } } diff --git a/mascara/src/app/first-time/notice-screen.js b/mascara/src/app/first-time/notice-screen.js index a342f059c..6d45f4353 100644 --- a/mascara/src/app/first-time/notice-screen.js +++ b/mascara/src/app/first-time/notice-screen.js @@ -2,11 +2,17 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import Markdown from 'react-markdown' import { connect } from 'react-redux' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' import debounce from 'lodash.debounce' import { markNoticeRead } from '../../../../ui/app/actions' import Identicon from '../../../../ui/app/components/identicon' import Breadcrumbs from './breadcrumbs' -import { DEFAULT_ROUTE } from '../../../../ui/app/routes' +import { + INITIALIZE_ROUTE, + DEFAULT_ROUTE, + INITIALIZE_BACKUP_PHRASE_ROUTE, +} from '../../../../ui/app/routes' import LoadingScreen from './loading-screen' class NoticeScreen extends Component { @@ -25,6 +31,7 @@ class NoticeScreen extends Component { markNoticeRead: PropTypes.func, history: PropTypes.object, isLoading: PropTypes.bool, + noActiveNotices: PropTypes.bool, }; static defaultProps = { @@ -35,14 +42,27 @@ class NoticeScreen extends Component { atBottom: false, } - componentDidMount () { + componentWillMount () { + if (this.props.noActiveNotices) { + console.log('%c NOTICESCREEN NOACTIVENOTICES', 'background: #222; color: #bada55') + this.props.history.push(INITIALIZE_BACKUP_PHRASE_ROUTE) + } + this.onScroll() } acceptTerms = () => { const { markNoticeRead, lastUnreadNotice, history } = this.props markNoticeRead(lastUnreadNotice) - .then(() => history.push(DEFAULT_ROUTE)) + .then(hasActiveNotices => { + console.log('ACCEPT TERMS, NO ACTIVE NOTICES', hasActiveNotices, 'background: #222; color: #bada55') + if (!hasActiveNotices) { + history.push(INITIALIZE_BACKUP_PHRASE_ROUTE) + } else { + this.setState({ atBottom: false }) + this.onScroll() + } + }) } onScroll = debounce(() => { @@ -98,12 +118,24 @@ class NoticeScreen extends Component { } } -export default connect( - ({ metamask: { selectedAddress, lastUnreadNotice }, appState: { isLoading } }) => ({ - lastUnreadNotice, +const mapStateToProps = ({ metamask, appState }) => { + const { selectedAddress, lastUnreadNotice, noActiveNotices } = metamask + const { isLoading } = appState + + return { address: selectedAddress, - }), - dispatch => ({ - markNoticeRead: notice => dispatch(markNoticeRead(notice)), - }) + lastUnreadNotice, + noActiveNotices, + isLoading, + } +} + +export default compose( + withRouter, + connect( + mapStateToProps, + dispatch => ({ + markNoticeRead: notice => dispatch(markNoticeRead(notice)), + }) + ) )(NoticeScreen) diff --git a/mascara/src/app/first-time/seed-screen.js b/mascara/src/app/first-time/seed-screen.js index e88335b0c..1ff4f8ab3 100644 --- a/mascara/src/app/first-time/seed-screen.js +++ b/mascara/src/app/first-time/seed-screen.js @@ -2,11 +2,12 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import { connect } from 'react-redux' import classnames from 'classnames' -import { compose, onlyUpdateForPropTypes } from 'recompose' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' import Identicon from '../../../../ui/app/components/identicon' import Breadcrumbs from './breadcrumbs' import LoadingScreen from './loading-screen' -import { DEFAULT_ROUTE, CONFIRM_SEED_ROUTE } from '../../../../ui/app/routes' +import { DEFAULT_ROUTE, INITIALIZE_CONFIRM_SEED_ROUTE } from '../../../../ui/app/routes' const LockIcon = props => ( {this.renderSecretWordsContainer()} - -
Tips:
@@ -129,10 +122,7 @@ class BackupPhraseScreen extends Component {
@@ -37,8 +40,11 @@ class UniqueImageScreen extends Component { } } -export default connect( - ({ metamask: { selectedAddress } }) => ({ - address: selectedAddress, - }) +export default compose( + withRouter, + connect( + ({ metamask: { selectedAddress } }) => ({ + address: selectedAddress, + }) + ) )(UniqueImageScreen) diff --git a/ui/app/actions.js b/ui/app/actions.js index 4550237d5..08df31e1f 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1322,12 +1322,13 @@ function markNoticeRead (notice) { dispatch(actions.displayWarning(err)) return reject(err) } + if (notice) { dispatch(actions.showNotice(notice)) - resolve() + resolve(true) } else { dispatch(actions.clearNotices()) - resolve() + resolve(false) } }) }) diff --git a/ui/app/app.js b/ui/app/app.js index 8a21220b1..f3e9e3470 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -88,34 +88,18 @@ class App extends Component { return ( h(Switch, [ - h(Route, { - path: WELCOME_ROUTE, - exact, - component: WelcomeScreen, - }), - h(Route, { - path: INITIALIZE_ROUTE, - component: InitializeScreen, - }), + h(Route, { path: INITIALIZE_ROUTE, component: InitializeScreen }), h(Initialized, { path: REVEAL_SEED_ROUTE, exact, component: RevealSeedPage, mascaraComponent: MascaraSeedScreen, }), - h(Initialized, { - path: CONFIRM_SEED_ROUTE, - exact, - mascaraComponent: MascaraConfirmSeedScreen, - }), + // h(Initialized, { path: CONFIRM_SEED_ROUTE, exact, component: MascaraConfirmSeedScreen }), h(Initialized, { path: UNLOCK_ROUTE, exact, component: UnlockPage }), h(Initialized, { path: SETTINGS_ROUTE, component: Settings }), h(Initialized, { path: RESTORE_VAULT_ROUTE, exact, component: RestoreVaultPage }), - h(Initialized, { - path: NOTICE_ROUTE, - exact, - component: MascaraNoticeScreen, - }), + h(Initialized, { path: NOTICE_ROUTE, exact, component: NoticeScreen }), h(Authenticated, { path: CONFIRM_TRANSACTION_ROUTE, component: ConfirmTxScreen }), h(Authenticated, { path: SEND_ROUTE, exact, component: SendTransactionScreen2 }), h(Authenticated, { path: ADD_TOKEN_ROUTE, exact, component: AddTokenPage }), @@ -322,7 +306,7 @@ class App extends Component { ]), - isUnlocked && h('div.account-menu__icon', { onClick: this.context.toggleAccountMenu }, [ + isUnlocked && h('div.account-menu__icon', { onClick: this.props.toggleAccountMenu }, [ h(Identicon, { address: this.props.selectedAddress, diameter: 32, diff --git a/ui/app/components/pages/add-token.js b/ui/app/components/pages/add-token.js index a5b5ea57b..d387720e5 100644 --- a/ui/app/components/pages/add-token.js +++ b/ui/app/components/pages/add-token.js @@ -384,7 +384,7 @@ AddTokenScreen.prototype.render = function () { return h('div.add-token', [ h('div.add-token__header', [ h('div.add-token__header__cancel', { - onClick: () => history.goBack(), + onClick: () => history.push(DEFAULT_ROUTE), }, [ h('i.fa.fa-angle-left.fa-lg'), h('span', this.context.t('cancel')), @@ -417,7 +417,7 @@ AddTokenScreen.prototype.render = function () { !isShowingConfirmation && h('div.add-token__buttons', [ h('button.btn-secondary--lg.add-token__cancel-button', { - onClick: () => history.goBack(), + onClick: () => history.push(DEFAULT_ROUTE), }, this.context.t('cancel')), h('button.btn-primary--lg.add-token__confirm-button', { onClick: this.onNext, diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js index 4f8c00768..34cdb8a4d 100644 --- a/ui/app/components/pages/home.js +++ b/ui/app/components/pages/home.js @@ -35,11 +35,11 @@ class Home extends Component { unapprovedTypedMessagesCount = 0, } = this.props - console.log('IN HOME COMPONENDIMOUNT') + console.log('HOME MOUNTED') + // unapprovedTxs and unapproved messages if (Object.keys(unapprovedTxs).length || unapprovedTypedMessagesCount + unapprovedMsgCount + unapprovedPersonalMsgCount > 0) { - console.log('IN HOME SHOULD REDIRECT') this.props.history.push(CONFIRM_TRANSACTION_ROUTE) } } @@ -55,6 +55,15 @@ class Home extends Component { seedWords, } = this.props + // notices + if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { + return h(Redirect, { + to: { + pathname: NOTICE_ROUTE, + }, + }) + } + // seed words if (seedWords) { log.debug('rendering seed words') @@ -74,15 +83,6 @@ class Home extends Component { }) } - // notices - if (!noActiveNotices || (lostAccounts && lostAccounts.length > 0)) { - return h(Redirect, { - to: { - pathname: NOTICE_ROUTE, - }, - }) - } - // if (!props.noActiveNotices) { // log.debug('rendering notice screen for unread notices.') // return h(NoticeScreen, { diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js index 24ebf89e3..77ec32efe 100644 --- a/ui/app/components/pages/keychains/restore-vault.js +++ b/ui/app/components/pages/keychains/restore-vault.js @@ -24,7 +24,7 @@ class RestoreVaultPage extends PersistentForm { cancel () { this.props.unMarkPasswordForgotten() - .then(this.props.history.goBack()) + .then(this.props.history.push(DEFAULT_ROUTE)) } createNewVaultAndRestore () { diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js index 029eb7d8e..247f3c8e2 100644 --- a/ui/app/components/pages/keychains/reveal-seed.js +++ b/ui/app/components/pages/keychains/reveal-seed.js @@ -133,7 +133,7 @@ class RevealSeedPage extends Component { }, [ // cancel h('button.primary', { - onClick: () => history.goBack(), + onClick: () => history.push(DEFAULT_ROUTE), }, 'CANCEL'), // submit diff --git a/ui/app/routes.js b/ui/app/routes.js index d3b305b40..4b3f8f4d8 100644 --- a/ui/app/routes.js +++ b/ui/app/routes.js @@ -14,9 +14,13 @@ const SIGNATURE_REQUEST_ROUTE = '/confirm-transaction/signature-request' const NOTICE_ROUTE = '/notice' const WELCOME_ROUTE = '/welcome' const INITIALIZE_ROUTE = '/initialize' +const INITIALIZE_CREATE_PASSWORD_ROUTE = '/initialize/create-password' const INITIALIZE_IMPORT_ACCOUNT_ROUTE = '/initialize/import-account' const INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE = '/initialize/import-with-seed-phrase' const INITIALIZE_UNIQUE_IMAGE_ROUTE = '/initialize/unique-image' +const INITIALIZE_NOTICE_ROUTE = '/initialize/notice' +const INITIALIZE_BACKUP_PHRASE_ROUTE = '/initialize/backup-phrase' +const INITIALIZE_CONFIRM_SEED_ROUTE = '/initialize/confirm-phrase' module.exports = { DEFAULT_ROUTE, @@ -35,7 +39,11 @@ module.exports = { SIGNATURE_REQUEST_ROUTE, WELCOME_ROUTE, INITIALIZE_ROUTE, + INITIALIZE_CREATE_PASSWORD_ROUTE, INITIALIZE_IMPORT_ACCOUNT_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, INITIALIZE_UNIQUE_IMAGE_ROUTE, + INITIALIZE_NOTICE_ROUTE, + INITIALIZE_BACKUP_PHRASE_ROUTE, + INITIALIZE_CONFIRM_SEED_ROUTE, } diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index e483008c6..abbb97643 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -29,7 +29,7 @@ const { isTokenBalanceSufficient, } = require('./components/send/send-utils') const { isValidAddress } = require('./util') -const { CONFIRM_TRANSACTION_ROUTE } = require('./routes') +const { CONFIRM_TRANSACTION_ROUTE, DEFAULT_ROUTE } = require('./routes') SendTransactionScreen.contextTypes = { t: PropTypes.func, @@ -201,7 +201,7 @@ SendTransactionScreen.prototype.renderHeader = function () { h('div.page-container__header-close', { onClick: () => { clearSend() - history.goBack() + history.push(DEFAULT_ROUTE) }, }), @@ -521,7 +521,7 @@ SendTransactionScreen.prototype.renderFooter = function () { h('button.btn-secondary--lg.page-container__footer-button', { onClick: () => { clearSend() - history.goBack() + history.push(DEFAULT_ROUTE) }, }, this.context.t('cancel')), h('button.btn-primary--lg.page-container__footer-button', { diff --git a/ui/app/welcome-screen.js b/ui/app/welcome-screen.js index f32491b0d..99be179c6 100644 --- a/ui/app/welcome-screen.js +++ b/ui/app/welcome-screen.js @@ -3,9 +3,11 @@ import h from 'react-hyperscript' import { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' +import { withRouter } from 'react-router-dom' +import { compose } from 'recompose' import {closeWelcomeScreen} from './actions' import Mascot from './components/mascot' -import { INITIALIZE_ROUTE } from './routes' +import { INITIALIZE_CREATE_PASSWORD_ROUTE } from './routes' class WelcomeScreen extends Component { static propTypes = { @@ -18,9 +20,18 @@ class WelcomeScreen extends Component { this.animationEventEmitter = new EventEmitter() } + componentWillMount () { + const { history, welcomeScreenSeen } = this.props + + if (welcomeScreenSeen) { + console.log('SEENT', welcomeScreenSeen) + history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) + } + } + initiateAccountCreation = () => { this.props.closeWelcomeScreen() - this.props.history.push(INITIALIZE_ROUTE) + this.props.history.push(INITIALIZE_CREATE_PASSWORD_ROUTE) } render () { @@ -51,9 +62,18 @@ class WelcomeScreen extends Component { } } -export default connect( - null, - dispatch => ({ - closeWelcomeScreen: () => dispatch(closeWelcomeScreen()), - }) +const mapStateToProps = ({ metamask: { welcomeScreenSeen } }) => { + return { + welcomeScreenSeen, + } +} + +export default compose( + withRouter, + connect( + mapStateToProps, + dispatch => ({ + closeWelcomeScreen: () => dispatch(closeWelcomeScreen()), + }) + ) )(WelcomeScreen) -- cgit From 92f8157dfeffff8173f6abc896cad59ada9a48ef Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 2 Apr 2018 13:15:31 -0700 Subject: Add withRouter to I18nProvider component --- ui/app/i18n-provider.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/ui/app/i18n-provider.js b/ui/app/i18n-provider.js index fe6d62c67..4ef618018 100644 --- a/ui/app/i18n-provider.js +++ b/ui/app/i18n-provider.js @@ -1,6 +1,8 @@ const { Component } = require('react') const connect = require('react-redux').connect const PropTypes = require('prop-types') +const { withRouter } = require('react-router-dom') +const { compose } = require('recompose') const t = require('../i18n-helper').getMessage class I18nProvider extends Component { @@ -32,5 +34,8 @@ const mapStateToProps = state => { } } -module.exports = connect(mapStateToProps)(I18nProvider) +module.exports = compose( + withRouter, + connect(mapStateToProps) +)(I18nProvider) -- cgit From 516c1869b0f366a42282a66e14185ce630f883dd Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 2 Apr 2018 16:24:37 -0700 Subject: Fix lint errors --- mascara/src/app/first-time/confirm-seed-screen.js | 16 +- .../src/app/first-time/create-password-screen.js | 35 +--- .../src/app/first-time/import-account-screen.js | 1 - mascara/src/app/first-time/index.js | 141 +------------ mascara/src/app/first-time/notice-screen.js | 10 +- mascara/src/app/first-time/seed-screen.js | 1 + ui/app/app.js | 220 +-------------------- ui/app/components/pages/home.js | 2 - ui/app/components/pages/keychains/restore-vault.js | 1 - ui/app/components/pages/unlock.js | 1 - ui/app/conf-tx.js | 4 - ui/app/first-time/init-menu.js | 1 - ui/app/welcome-screen.js | 2 +- 13 files changed, 21 insertions(+), 414 deletions(-) diff --git a/mascara/src/app/first-time/confirm-seed-screen.js b/mascara/src/app/first-time/confirm-seed-screen.js index 6eabd7544..359e3d7fa 100644 --- a/mascara/src/app/first-time/confirm-seed-screen.js +++ b/mascara/src/app/first-time/confirm-seed-screen.js @@ -9,7 +9,7 @@ import Identicon from '../../../../ui/app/components/identicon' import { confirmSeedWords } from '../../../../ui/app/actions' import Breadcrumbs from './breadcrumbs' import LoadingScreen from './loading-screen' -import { INITIALIZE_ROUTE, DEFAULT_ROUTE } from '../../../../ui/app/routes' +import { DEFAULT_ROUTE } from '../../../../ui/app/routes' class ConfirmSeedScreen extends Component { static propTypes = { @@ -35,21 +35,21 @@ class ConfirmSeedScreen extends Component { componentWillMount () { const { seedWords, history } = this.props + if (!seedWords) { - history.push(INITIALIZE_ROUTE) + history.push(DEFAULT_ROUTE) } } handleClick () { - this.props.confirmSeedWords() - .then(() => { - console.log('FINISHED') - this.props.history.push(DEFAULT_ROUTE) - }) + const { confirmSeedWords, history } = this.props + + confirmSeedWords() + .then(() => history.push(DEFAULT_ROUTE)) } render () { - const { seedWords, confirmSeedWords, history } = this.props + const { seedWords } = this.props const { selectedSeeds, shuffledSeeds } = this.state const isValid = seedWords === selectedSeeds.map(([_, seed]) => seed).join(' ') diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 7b8971afe..6ec05e11d 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -1,19 +1,16 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' -import { withRouter, Redirect } from 'react-router-dom' +import { withRouter } from 'react-router-dom' import { compose } from 'recompose' import { createNewVaultAndKeychain } from '../../../../ui/app/actions' -import LoadingScreen from './loading-screen' import Breadcrumbs from './breadcrumbs' import EventEmitter from 'events' import Mascot from '../../../../ui/app/components/mascot' import classnames from 'classnames' import { - DEFAULT_ROUTE, INITIALIZE_UNIQUE_IMAGE_ROUTE, INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, - // INITIALIZE_IMPORT_ACCOUNT_ROUTE, INITIALIZE_NOTICE_ROUTE, } from '../../../../ui/app/routes' @@ -30,19 +27,17 @@ class CreatePasswordScreen extends Component { state = { password: '', confirmPassword: '', - isLoading: false, } - constructor () { - super() + constructor (props) { + super(props) this.animationEventEmitter = new EventEmitter() } componentWillMount () { - const { isInitialized, isUnlocked, history, noActiveNotices } = this.props + const { isInitialized, history } = this.props if (isInitialized) { - console.log('%c IM already initialized', 'background: #222; color: #bada55') history.push(INITIALIZE_NOTICE_ROUTE) } } @@ -71,16 +66,11 @@ class CreatePasswordScreen extends Component { this.setState({ isLoading: true }) createAccount(password) - .then(() => { - // this.setState({ isLoading: false }) - history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE) - }) - .catch(() => this.setState({ isLoading: false})) + .then(() => history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE)) } renderFields () { const { isMascara, history } = this.props - const { isLoading } = this.state return (
@@ -154,20 +144,7 @@ class CreatePasswordScreen extends Component { } render () { - const { isInitialized, isUnlocked, history, noActiveNotices, isMascara } = this.props - - // if (isInitialized) { - // console.log('%c IM already initialized', 'background: #222; color: #bada55') - // if (!noActiveNotices) { - // console.log('%c GOING TO NOTICES', 'background: #222; color: #bada55') - // // history.replace(INITIALIZE_NOTICE_ROUTE) - // return - // } else { - // console.log('%c GOING TO DEFAULT', 'background: #222; color: #bada55') - // // history.replace(DEFAULT_ROUTE) - // return - // } - // } + const { history, isMascara } = this.props return (
diff --git a/mascara/src/app/first-time/import-account-screen.js b/mascara/src/app/first-time/import-account-screen.js index fdcaa7199..ab0aca0f0 100644 --- a/mascara/src/app/first-time/import-account-screen.js +++ b/mascara/src/app/first-time/import-account-screen.js @@ -142,7 +142,6 @@ class ImportAccountScreen extends Component { render () { const { OPTIONS } = ImportAccountScreen const { selectedOption } = this.state - console.log('RENDER IMPORT') return this.props.isLoading ? diff --git a/mascara/src/app/first-time/index.js b/mascara/src/app/first-time/index.js index 5f47145a3..01e5d67a6 100644 --- a/mascara/src/app/first-time/index.js +++ b/mascara/src/app/first-time/index.js @@ -1,7 +1,7 @@ import React, { Component } from 'react' import PropTypes from 'prop-types' import {connect} from 'react-redux' -import { withRouter, Switch, Route, Redirect } from 'react-router-dom' +import { withRouter, Switch, Route } from 'react-router-dom' import { compose } from 'recompose' import CreatePasswordScreen from './create-password-screen' import UniqueImageScreen from './unique-image-screen' @@ -11,13 +11,6 @@ import ImportAccountScreen from './import-account-screen' import ImportSeedPhraseScreen from './import-seed-phrase-screen' import ConfirmSeed from './confirm-seed-screen' import { - onboardingBuyEthView, - unMarkPasswordForgotten, - showModal, -} from '../../../../ui/app/actions' -import { - DEFAULT_ROUTE, - WELCOME_ROUTE, INITIALIZE_ROUTE, INITIALIZE_IMPORT_ACCOUNT_ROUTE, INITIALIZE_UNIQUE_IMAGE_ROUTE, @@ -48,131 +41,6 @@ class FirstTimeFlow extends Component { noActiveNotices: false, }; - static SCREEN_TYPE = { - CREATE_PASSWORD: 'create_password', - IMPORT_ACCOUNT: 'import_account', - IMPORT_SEED_PHRASE: 'import_seed_phrase', - UNIQUE_IMAGE: 'unique_image', - NOTICE: 'notice', - BACK_UP_PHRASE: 'back_up_phrase', - CONFIRM_BACK_UP_PHRASE: 'confirm_back_up_phrase', - LOADING: 'loading', - }; - - constructor (props) { - super(props) - this.state = { - screenType: this.getScreenType(), - } - } - - componentDidMount () { - const { isInitialized, isUnlocked, history, noActiveNotices } = this.props - - // if (isInitialized || isUnlocked) { - // history.push(DEFAULT_ROUTE) - // } - - // if (!noActiveNotices) { - // console.log('INITIALIZE ACTIVE NOTICES') - // history.push(INITIALIZE_NOTICE_ROUTE) - // } - - } - - setScreenType (screenType) { - this.setState({ screenType }) - } - - getScreenType () { - const { - isInitialized, - seedWords, - noActiveNotices, - forgottenPassword, - } = this.props - const {SCREEN_TYPE} = FirstTimeFlow - - // return SCREEN_TYPE.NOTICE - - if (forgottenPassword) { - return SCREEN_TYPE.IMPORT_SEED_PHRASE - } - if (!isInitialized) { - return SCREEN_TYPE.CREATE_PASSWORD - } - - if (!noActiveNotices) { - return SCREEN_TYPE.NOTICE - } - - if (seedWords) { - return SCREEN_TYPE.BACK_UP_PHRASE - } - }; - - renderScreen () { - const {SCREEN_TYPE} = FirstTimeFlow - const { - openBuyEtherModal, - address, - restoreCreatePasswordScreen, - forgottenPassword, - leaveImportSeedScreenState, - } = this.props - - switch (this.state.screenType) { - case SCREEN_TYPE.CREATE_PASSWORD: - return ( - this.setScreenType(SCREEN_TYPE.UNIQUE_IMAGE)} - goToImportAccount={() => this.setScreenType(SCREEN_TYPE.IMPORT_ACCOUNT)} - goToImportWithSeedPhrase={() => this.setScreenType(SCREEN_TYPE.IMPORT_SEED_PHRASE)} - /> - ) - case SCREEN_TYPE.IMPORT_ACCOUNT: - return ( - this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD)} - next={() => this.setScreenType(SCREEN_TYPE.NOTICE)} - /> - ) - case SCREEN_TYPE.IMPORT_SEED_PHRASE: - return ( - { - leaveImportSeedScreenState() - this.setScreenType(SCREEN_TYPE.CREATE_PASSWORD) - }} - next={() => { - const newScreenType = forgottenPassword ? null : SCREEN_TYPE.NOTICE - this.setScreenType(newScreenType) - }} - /> - ) - case SCREEN_TYPE.UNIQUE_IMAGE: - return ( - this.setScreenType(SCREEN_TYPE.NOTICE)} - /> - ) - case SCREEN_TYPE.NOTICE: - return ( - this.setScreenType(SCREEN_TYPE.BACK_UP_PHRASE)} - /> - ) - case SCREEN_TYPE.BACK_UP_PHRASE: - return ( - openBuyEtherModal()} - /> - ) - default: - return