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/components/pending-msg.js | 65 ++++++++++++++++++++++++++++++++++++ ui/app/components/pending-tx.js | 71 ++++++++++++++++++++++++++++++++++++++++ ui/app/components/template.js | 19 +++++++++++ 3 files changed, 155 insertions(+) create mode 100644 ui/app/components/pending-msg.js create mode 100644 ui/app/components/pending-tx.js create mode 100644 ui/app/components/template.js (limited to 'ui/app/components') diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js new file mode 100644 index 000000000..cb6df2a3d --- /dev/null +++ b/ui/app/components/pending-msg.js @@ -0,0 +1,65 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +const AccountPanel = require('./account-panel') +const addressSummary = require('../util').addressSummary +const readableDate = require('../util').readableDate +const formatBalance = require('../util').formatBalance +const dataSize = require('../util').dataSize + +module.exports = PendingMsg + + +inherits(PendingMsg, Component) +function PendingMsg() { + Component.call(this) +} + +PendingMsg.prototype.render = function() { + var state = this.props + var msgData = state.txData + + var msgParams = msgData.msgParams || {} + var address = msgParams.from || state.selectedAddress + var identity = state.identities[address] || { address: address } + var account = state.accounts[address] || { address: address } + + return ( + h('.transaction', { + key: msgData.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', 'DATE'), + h('span.font-small', readableDate(msgData.time)), + ]), + + h('.flex-row.flex-space-between', [ + h('label.font-small', 'MESSAGE'), + h('span.font-small', msgParams.data), + ]), + ]), + + // send + cancel + h('.flex-row.flex-space-around', [ + h('button', { + onClick: state.cancelMessage, + }, 'Cancel'), + h('button', { + onClick: state.signMessage, + }, 'Sign'), + ]), + ]) + ) +} + diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js new file mode 100644 index 000000000..2519998a5 --- /dev/null +++ b/ui/app/components/pending-tx.js @@ -0,0 +1,71 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +const AccountPanel = require('./account-panel') +const addressSummary = require('../util').addressSummary +const readableDate = require('../util').readableDate +const formatBalance = require('../util').formatBalance +const dataSize = require('../util').dataSize + +module.exports = PendingTx + + +inherits(PendingTx, Component) +function PendingTx() { + Component.call(this) +} + +PendingTx.prototype.render = function() { + var state = this.props + var txData = state.txData + + 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 ( + h('.transaction', { + 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: state.cancelTransaction, + }, 'Cancel'), + h('button', { + onClick: state.sendTransaction, + }, 'Send'), + ]), + ]) + ) +} + diff --git a/ui/app/components/template.js b/ui/app/components/template.js new file mode 100644 index 000000000..9e4eca20f --- /dev/null +++ b/ui/app/components/template.js @@ -0,0 +1,19 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +module.exports = NewComponent + + +inherits(NewComponent, Component) +function NewComponent() { + Component.call(this) +} + +NewComponent.prototype.render = function() { + var state = this.props + + return ( + h('span', 'Placeholder component') + ) +} -- cgit