From e6c4d63ccdaf93d8b74965d39661e80d774504d8 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 3 May 2016 14:32:22 -0700 Subject: Add UI for Signing Messages Calls to `eth.sign` are now transiently persisted in memory, and displayed in a chronological stack with pending transactions (which are still persisted to disk). This allows the user a method to sign/cancel transactions even if they miss the Chrome notification. Improved a lot of the view routing, to avoid cases where routes would show an empty account view, or transition to the accounts list when it shouldn't. Broke the transaction approval view into a couple components so messages and transactions could have their own templates. --- ui/app/conf-tx.js | 111 ++++++++++++++++++++++++++++-------------------------- 1 file changed, 58 insertions(+), 53 deletions(-) (limited to 'ui/app/conf-tx.js') diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 983070013..28f2db39c 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -7,10 +7,10 @@ const copyToClipboard = require('copy-to-clipboard') const actions = require('./actions') const AccountPanel = require('./components/account-panel') const valuesFor = require('./util').valuesFor -const addressSummary = require('./util').addressSummary -const readableDate = require('./util').readableDate -const formatBalance = require('./util').formatBalance -const dataSize = require('./util').dataSize +const txHelper = require('../lib/tx-helper') + +const ConfirmTx = require('./components/pending-tx') +const PendingMsg = require('./components/pending-msg') module.exports = connect(mapStateToProps)(ConfirmTxScreen) @@ -20,7 +20,9 @@ function mapStateToProps(state) { accounts: state.metamask.accounts, selectedAddress: state.metamask.selectedAddress, unconfTxs: state.metamask.unconfTxs, + unconfMsgs: state.metamask.unconfMsgs, index: state.appState.currentView.context, + warning: state.appState.warning, } } @@ -32,12 +34,11 @@ function ConfirmTxScreen() { ConfirmTxScreen.prototype.render = function() { var state = this.props - var unconfTxList = valuesFor(state.unconfTxs).sort(tx => tx.time) + + var unconfTxs = state.unconfTxs + var unconfMsgs = state.unconfMsgs + var unconfTxList = txHelper(unconfTxs, unconfMsgs) var txData = unconfTxList[state.index] || {} - var txParams = txData.txParams || {} - var address = txParams.from || state.selectedAddress - var identity = state.identities[address] || { address: address } - var account = state.accounts[address] || { address: address } return ( @@ -46,7 +47,7 @@ ConfirmTxScreen.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), + onClick: this.goHome.bind(this), }), h('h2.page-subtitle', 'Confirm Transaction'), ]), @@ -72,58 +73,44 @@ ConfirmTxScreen.prototype.render = function() { }), ]), + warningIfExists(state.warning), + h(ReactCSSTransitionGroup, { transitionName: "main", transitionEnterTimeout: 300, transitionLeaveTimeout: 300, }, [ - h('.transaction', { + currentTxView({ + // Properties + txData: txData, key: txData.id, - }, [ - - // account that will sign - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - }), - - // tx data - h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ - - h('.flex-row.flex-space-between', [ - h('label.font-small', 'TO ADDRESS'), - h('span.font-small', addressSummary(txParams.to)), - ]), - - h('.flex-row.flex-space-between', [ - h('label.font-small', 'DATE'), - h('span.font-small', readableDate(txData.time)), - ]), - - h('.flex-row.flex-space-between', [ - h('label.font-small', 'AMOUNT'), - h('span.font-small', formatBalance(txParams.value)), - ]), - - ]), - - // send + cancel - h('.flex-row.flex-space-around', [ - h('button', { - onClick: this.cancelTransaction.bind(this, txData), - }, 'Cancel'), - h('button', { - onClick: this.sendTransaction.bind(this, txData), - }, 'Send'), - ]), - ]), + selectedAddress: state.selectedAddress, + accounts: state.accounts, + identities: state.identities, + // Actions + sendTransaction: this.sendTransaction.bind(this, txData), + cancelTransaction: this.cancelTransaction.bind(this, txData), + signMessage: this.signMessage.bind(this, txData), + cancelMessage: this.cancelMessage.bind(this, txData), + }), + ]), - ]) // No comma or semicolon can go here + ]) ) } +function currentTxView (opts) { + + if ('txParams' in opts.txData) { + // This is a pending transaction + return h(ConfirmTx, opts) + } else if ('msgParams' in opts.txData) { + // This is a pending message to sign + return h(PendingMsg, opts) + } +} + ConfirmTxScreen.prototype.sendTransaction = function(txData, event){ event.stopPropagation() this.props.dispatch(actions.sendTx(txData)) @@ -134,7 +121,25 @@ ConfirmTxScreen.prototype.cancelTransaction = function(txData, event){ this.props.dispatch(actions.cancelTx(txData)) } -ConfirmTxScreen.prototype.navigateToAccounts = function(event){ +ConfirmTxScreen.prototype.signMessage = function(msgData, event){ + var params = msgData.msgParams + params.metamaskId = msgData.id event.stopPropagation() - this.props.dispatch(actions.showAccountsPage()) + this.props.dispatch(actions.signMsg(params)) +} + +ConfirmTxScreen.prototype.cancelMessage = function(msgData, event){ + event.stopPropagation() + this.props.dispatch(actions.cancelMsg(msgData)) +} + +ConfirmTxScreen.prototype.goHome = function(event){ + event.stopPropagation() + this.props.dispatch(actions.goHome()) +} + +function warningIfExists(warning) { + if (warning) { + return h('span.error', { style: { margin: 'auto' } }, warning) + } } -- cgit v1.2.3