From 2dd7bd6bd0d026da339c1e55d52270674be13f3d Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 25 Apr 2016 12:20:33 -0700 Subject: Make account detail view the primary view - When unlocking, the first account is now selected by default and displayed as the main view. - There is now a "CHANGE ACCT" button on the detail view to show the accounts list. - Clicking an account from the accounts list now navigates to the detail view and selects that account. - Config/Info screen "back" buttons now fire a new action, `GO_HOME`, which is configured to navigate to the accountDetail view, putting that logic in one place. - When locking and unlocking again, the first account is always displayed, eventually we should persist the selection. --- ui/app/account-detail.js | 56 ++++++++++++++++++++------------------ ui/app/actions.js | 25 ++++++++++------- ui/app/components/account-panel.js | 2 +- ui/app/config.js | 2 +- ui/app/info.js | 2 +- ui/app/loading.js | 2 -- ui/app/reducers/app.js | 27 ++++++++++++++++-- 7 files changed, 72 insertions(+), 44 deletions(-) (limited to 'ui/app') diff --git a/ui/app/account-detail.js b/ui/app/account-detail.js index 025644efe..57f932a2b 100644 --- a/ui/app/account-detail.js +++ b/ui/app/account-detail.js @@ -10,12 +10,11 @@ const transactionList = require('./components/transaction-list') module.exports = connect(mapStateToProps)(AccountDetailScreen) function mapStateToProps(state) { - var accountDetail = state.appState.accountDetail return { identities: state.metamask.identities, accounts: state.metamask.accounts, address: state.appState.currentView.context, - accountDetail: accountDetail, + accountDetail: state.appState.accountDetail, transactions: state.metamask.transactions, networkVersion: state.networkVersion, } @@ -26,7 +25,6 @@ function AccountDetailScreen() { Component.call(this) } - AccountDetailScreen.prototype.render = function() { var state = this.props var identity = state.identities[state.address] @@ -40,9 +38,6 @@ AccountDetailScreen.prototype.render = function() { // subtitle and nav h('.section-title.flex-row.flex-center', [ - h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { - onClick: this.navigateToAccounts.bind(this), - }), h('h2.page-subtitle', 'Account Detail'), ]), @@ -51,28 +46,35 @@ AccountDetailScreen.prototype.render = function() { showFullAddress: true, identity: identity, account: account, + }, []), + + h('div', { + style: { + display: 'flex', + } }, [ - h('.flex-row.flex-space-around', [ - // h('button', 'GET ETH'), DISABLED UNTIL WORKING - - h('button', { - onClick: () => { - copyToClipboard(identity.address) - }, - }, 'COPY ADDR'), - - h('button', { - onClick: () => { - this.props.dispatch(actions.showSendPage()) - }, - }, 'SEND'), - - h('button', { - onClick: () => { - this.requestAccountExport(identity.address) - }, - }, 'EXPORT'), - ]), + + h('button', { + onClick: this.navigateToAccounts.bind(this), + }, 'CHANGE ACCT'), + + h('button', { + onClick: () => { + copyToClipboard(identity.address) + }, + }, 'COPY ADDR'), + + h('button', { + onClick: () => { + this.props.dispatch(actions.showSendPage()) + }, + }, 'SEND'), + + h('button', { + onClick: () => { + this.requestAccountExport(identity.address) + }, + }, 'EXPORT'), ]), transactionList(transactions diff --git a/ui/app/actions.js b/ui/app/actions.js index 339c28be3..e2d81883f 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1,4 +1,6 @@ var actions = { + GO_HOME: 'GO_HOME', + goHome: goHome, // remote state UPDATE_METAMASK_STATE: 'UPDATE_METAMASK_STATE', updateMetamaskState: updateMetamaskState, @@ -87,24 +89,29 @@ var actions = { module.exports = actions - var _accountManager = null function _setAccountManager(accountManager){ _accountManager = accountManager } +function goHome() { + return { + type: this.GO_HOME, + } +} + // async actions function tryUnlockMetamask(password) { return (dispatch) => { dispatch(this.unlockInProgress()) - _accountManager.submitPassword(password, (err) => { + _accountManager.submitPassword(password, (err, accounts) => { dispatch(this.hideLoadingIndication()) if (err) { dispatch(this.unlockFailed()) } else { dispatch(this.unlockMetamask()) - dispatch(this.setSelectedAddress()) + dispatch(this.showAccountDetail(accounts[0].address)) } }) } @@ -123,7 +130,7 @@ function recoverFromSeed(password, seed) { return (dispatch) => { // dispatch(this.createNewVaultInProgress()) dispatch(this.showLoadingIndication()) - _accountManager.recoverFromSeed(password, seed, (err, result) => { + _accountManager.recoverFromSeed(password, seed, (err, accounts) => { if (err) { dispatch(this.hideLoadingIndication()) var message = err.message @@ -131,11 +138,9 @@ function recoverFromSeed(password, seed) { } dispatch(this.unlockMetamask()) - dispatch(this.setSelectedAddress()) - dispatch(this.updateMetamaskState(result)) + dispatch(this.showAccountDetail(accounts[0].address)) dispatch(this.hideLoadingIndication()) - dispatch(this.showAccountsPage()) - }) + }) } } @@ -297,10 +302,10 @@ function clearSeedWordCache() { function confirmSeedWords() { return (dispatch) => { dispatch(this.showLoadingIndication()) - _accountManager.clearSeedWordCache((err) => { + _accountManager.clearSeedWordCache((err, accounts) => { dispatch(this.clearSeedWordCache()) console.log('Seed word cache cleared.') - dispatch(this.setSelectedAddress()) + dispatch(this.showAccountDetail(accounts[0].address)) }) } } diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js index 4e433b87d..9de29cd91 100644 --- a/ui/app/components/account-panel.js +++ b/ui/app/components/account-panel.js @@ -25,7 +25,7 @@ AccountPanel.prototype.render = function() { style: { flex: '1 0 auto', }, - onClick: state.onSelect && state.onSelect.bind(null, identity.address), + onClick: state.onShowDetail && state.onShowDetail.bind(null, identity.address), }, [ // account identicon diff --git a/ui/app/config.js b/ui/app/config.js index f4eecf7f8..ded065bf8 100644 --- a/ui/app/config.js +++ b/ui/app/config.js @@ -31,7 +31,7 @@ ConfigScreen.prototype.render = function() { h('.section-title.flex-row.flex-center', [ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { onClick: (event) => { - state.dispatch(actions.showAccountsPage()) + state.dispatch(actions.goHome()) } }), h('h2.page-subtitle', 'Configuration'), diff --git a/ui/app/info.js b/ui/app/info.js index ae8c6efc5..f6311b4cb 100644 --- a/ui/app/info.js +++ b/ui/app/info.js @@ -26,7 +26,7 @@ InfoScreen.prototype.render = function() { h('.section-title.flex-row.flex-center', [ h('i.fa.fa-arrow-left.fa-lg.cursor-pointer', { onClick: (event) => { - state.dispatch(actions.showAccountsPage()) + state.dispatch(actions.goHome()) } }), h('h2.page-subtitle', 'Info'), diff --git a/ui/app/loading.js b/ui/app/loading.js index 47b758cb6..9288256de 100644 --- a/ui/app/loading.js +++ b/ui/app/loading.js @@ -19,7 +19,6 @@ function LoadingIndicator() { } LoadingIndicator.prototype.render = function() { - console.dir(this.props) var isLoading = this.props.isLoading return ( @@ -44,7 +43,6 @@ LoadingIndicator.prototype.render = function() { src: 'images/loading.svg', }), ]) : null, - ]) ) } diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 582583185..d3d5ad638 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -1,14 +1,18 @@ const extend = require('xtend') const actions = require('../actions') +const valuesFor = require('../util').valuesFor module.exports = reduceApp function reduceApp(state, action) { // clone and defaults + var accounts = valuesFor(state.metamask.accounts) + var account = accounts.length ? valuesFor(state.metamask.accounts)[0].address : null var defaultView = { - name: 'accounts', + name: 'accountDetail', detailView: null, + context: account, } // confirm seed words @@ -56,6 +60,7 @@ function reduceApp(state, action) { return extend(appState, { currentView: { name: 'config', + context: appState.currentView.context, }, transForward: true, }) @@ -64,6 +69,7 @@ function reduceApp(state, action) { return extend(appState, { currentView: { name: 'info', + context: appState.currentView.context, }, transForward: true, }) @@ -120,11 +126,28 @@ function reduceApp(state, action) { activeAddress: action.value, }) + case actions.GO_HOME: + return extend(appState, { + currentView: { + name: 'accountDetail', + context: appState.currentView.context, + }, + accountDetail: { + accountExport: 'none', + privateKey: '', + }, + transForward: false, + }) + + case actions.SHOW_ACCOUNT_DETAIL: + var account = action.value || valuesFor(state.metamask.accounts)[0].address + return extend(appState, { + isLoading: account ? false : true, currentView: { name: 'accountDetail', - context: action.value, + context: account, }, accountDetail: { accountExport: 'none', -- cgit v1.2.3 From 44c68eb23c8fe510438fa44c26a5acd99bbe19e8 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 25 Apr 2016 13:41:06 -0700 Subject: Fix test --- ui/app/reducers/app.js | 2 -- 1 file changed, 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index d3d5ad638..46bc3c36d 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -141,8 +141,6 @@ function reduceApp(state, action) { case actions.SHOW_ACCOUNT_DETAIL: - var account = action.value || valuesFor(state.metamask.accounts)[0].address - return extend(appState, { isLoading: account ? false : true, currentView: { -- cgit v1.2.3 From 4c46cbc99cbed0de560b3c2ba8fe502c1c5343a8 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 25 Apr 2016 13:49:46 -0700 Subject: Fixed some loading bugs --- ui/app/reducers/app.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) (limited to 'ui/app') diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 46bc3c36d..131b434e9 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -139,13 +139,11 @@ function reduceApp(state, action) { transForward: false, }) - case actions.SHOW_ACCOUNT_DETAIL: return extend(appState, { - isLoading: account ? false : true, currentView: { name: 'accountDetail', - context: account, + context: action.value || account, }, accountDetail: { accountExport: 'none', -- cgit v1.2.3 From 1025eb3b4f90c2b909fe9d238cebba878c8ce2db Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 25 Apr 2016 14:14:34 -0700 Subject: Persist selected account When selecting an account, we now persist the selection to the `configManager`, so the selection can be restored when re-unlocking Metamask. Also found the bug where `rawtestrpc` was still being used as a default, and fixed it! --- ui/app/actions.js | 18 +++++++++++------- ui/app/components/account-panel.js | 6 ++---- ui/app/reducers/app.js | 4 +--- 3 files changed, 14 insertions(+), 14 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index e2d81883f..a2106ea85 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -105,13 +105,13 @@ function goHome() { function tryUnlockMetamask(password) { return (dispatch) => { dispatch(this.unlockInProgress()) - _accountManager.submitPassword(password, (err, accounts) => { + _accountManager.submitPassword(password, (err, selectedAccount) => { dispatch(this.hideLoadingIndication()) if (err) { dispatch(this.unlockFailed()) } else { dispatch(this.unlockMetamask()) - dispatch(this.showAccountDetail(accounts[0].address)) + dispatch(this.showAccountDetail(selectedAccount)) } }) } @@ -130,7 +130,7 @@ function recoverFromSeed(password, seed) { return (dispatch) => { // dispatch(this.createNewVaultInProgress()) dispatch(this.showLoadingIndication()) - _accountManager.recoverFromSeed(password, seed, (err, accounts) => { + _accountManager.recoverFromSeed(password, seed, (err, selectedAccount) => { if (err) { dispatch(this.hideLoadingIndication()) var message = err.message @@ -138,7 +138,7 @@ function recoverFromSeed(password, seed) { } dispatch(this.unlockMetamask()) - dispatch(this.showAccountDetail(accounts[0].address)) + dispatch(this.showAccountDetail(selectedAccount)) dispatch(this.hideLoadingIndication()) }) } @@ -281,9 +281,13 @@ function lockMetamask() { } function showAccountDetail(address) { - return { - type: this.SHOW_ACCOUNT_DETAIL, - value: address, + return (dispatch) => { + _accountManager.setSelectedAddress(address) + + dispatch({ + type: this.SHOW_ACCOUNT_DETAIL, + value: address, + }) } } diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js index 9de29cd91..9fda2ebfc 100644 --- a/ui/app/components/account-panel.js +++ b/ui/app/components/account-panel.js @@ -25,7 +25,7 @@ AccountPanel.prototype.render = function() { style: { flex: '1 0 auto', }, - onClick: state.onShowDetail && state.onShowDetail.bind(null, identity.address), + onClick: (event) => state.onShowDetail(identity.address, event), }, [ // account identicon @@ -53,9 +53,7 @@ AccountPanel.prototype.render = function() { // navigate to account detail !state.onShowDetail ? null : - h('.arrow-right.cursor-pointer', { - onClick: state.onShowDetail && state.onShowDetail.bind(null, identity.address), - }, [ + h('.arrow-right.cursor-pointer', [ h('i.fa.fa-chevron-right.fa-lg'), ]), ]) diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 131b434e9..f522e6042 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -7,12 +7,10 @@ module.exports = reduceApp function reduceApp(state, action) { // clone and defaults - var accounts = valuesFor(state.metamask.accounts) - var account = accounts.length ? valuesFor(state.metamask.accounts)[0].address : null var defaultView = { name: 'accountDetail', detailView: null, - context: account, + context: state.metamask.selectedAccount, } // confirm seed words -- cgit v1.2.3