diff options
Diffstat (limited to 'ui/app')
-rw-r--r-- | ui/app/components/account-panel.js | 2 | ||||
-rw-r--r-- | ui/app/components/pending-msg-details.js | 53 | ||||
-rw-r--r-- | ui/app/components/pending-msg.js | 37 | ||||
-rw-r--r-- | ui/app/components/pending-tx-details.js | 65 | ||||
-rw-r--r-- | ui/app/components/pending-tx.js | 69 | ||||
-rw-r--r-- | ui/app/conf-tx.js | 4 |
6 files changed, 142 insertions, 88 deletions
diff --git a/ui/app/components/account-panel.js b/ui/app/components/account-panel.js index b98a8cb45..c69557d62 100644 --- a/ui/app/components/account-panel.js +++ b/ui/app/components/account-panel.js @@ -46,7 +46,7 @@ AccountPanel.prototype.render = function () { h('.identicon-wrapper.flex-column.select-none', [ h(Identicon, { address: panelState.identiconKey, - imageify: !state.inlineIdenticons, + imageify: state.imageifyIdenticons, }), h('span.font-small', panelState.identiconLabel), ]), diff --git a/ui/app/components/pending-msg-details.js b/ui/app/components/pending-msg-details.js new file mode 100644 index 000000000..adcec596e --- /dev/null +++ b/ui/app/components/pending-msg-details.js @@ -0,0 +1,53 @@ +const Component = require('react').Component +const h = require('react-hyperscript') +const inherits = require('util').inherits + +const AccountPanel = require('./account-panel') +const readableDate = require('../util').readableDate + +module.exports = PendingMsgDetails + +inherits(PendingMsgDetails, Component) +function PendingMsgDetails () { + Component.call(this) +} + +PendingMsgDetails.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('div', { + key: msgData.id, + }, [ + + // account that will sign + h(AccountPanel, { + showFullAddress: true, + identity: identity, + account: account, + imageifyIdenticons: state.imageifyIdenticons, + }), + + // message 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), + ]), + ]), + + ]) + ) +} + diff --git a/ui/app/components/pending-msg.js b/ui/app/components/pending-msg.js index 7f3914d56..f4bde91dc 100644 --- a/ui/app/components/pending-msg.js +++ b/ui/app/components/pending-msg.js @@ -1,9 +1,7 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits - -const AccountPanel = require('./account-panel') -const readableDate = require('../util').readableDate +const PendingTxDetails = require('./pending-msg-details') module.exports = PendingMsg @@ -16,16 +14,13 @@ 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', { + + h('div', { key: msgData.id, }, [ + // header h('h3', { style: { fontWeight: 'bold', @@ -33,27 +28,10 @@ PendingMsg.prototype.render = function () { }, }, 'Sign Message'), - // 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)), - ]), + // message details + h(PendingTxDetails, state), - h('.flex-row.flex-space-between', [ - h('label.font-small', 'MESSAGE'), - h('span.font-small', msgParams.data), - ]), - ]), - - // send + cancel + // sign + cancel h('.flex-row.flex-space-around', [ h('button', { onClick: state.cancelMessage, @@ -63,6 +41,7 @@ PendingMsg.prototype.render = function () { }, 'Sign'), ]), ]) + ) } diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js new file mode 100644 index 000000000..2ba613f20 --- /dev/null +++ b/ui/app/components/pending-tx-details.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 + +module.exports = PendingTxDetails + +inherits(PendingTxDetails, Component) +function PendingTxDetails () { + Component.call(this) +} + +PendingTxDetails.prototype.render = function () { + var state = this.props + return this.renderGeneric(h, state) +} + +PendingTxDetails.prototype.renderGeneric = function (h, state) { + 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('div', [ + + // account that will sign + h(AccountPanel, { + showFullAddress: true, + identity: identity, + account: account, + imageifyIdenticons: state.imageifyIdenticons, + }), + + // 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)), + ]), + ]), + + ]) + + ) + +} diff --git a/ui/app/components/pending-tx.js b/ui/app/components/pending-tx.js index 484046827..197e0436c 100644 --- a/ui/app/components/pending-tx.js +++ b/ui/app/components/pending-tx.js @@ -1,11 +1,8 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits +const PendingTxDetails = require('./pending-tx-details') -const AccountPanel = require('./account-panel') -const addressSummary = require('../util').addressSummary -const readableDate = require('../util').readableDate -const formatBalance = require('../util').formatBalance module.exports = PendingTx @@ -16,23 +13,15 @@ function PendingTx () { PendingTx.prototype.render = function () { var state = this.props - return this.renderGeneric(h, state) -} - -PendingTx.prototype.renderGeneric = function (h, state) { 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', { + h('div', { key: txData.id, }, [ + // header h('h3', { style: { fontWeight: 'bold', @@ -40,53 +29,21 @@ PendingTx.prototype.renderGeneric = function (h, state) { }, }, 'Submit Transaction'), - // account that will sign - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - inlineIdenticons: state.inlineIdenticons, - }), - - // 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)), - ]), - ]), + // tx info + h(PendingTxDetails, state), // send + cancel - state.nonInteractive ? null : actionButtons(state), + h('.flex-row.flex-space-around', [ + h('button', { + onClick: state.cancelTransaction, + }, 'Cancel'), + h('button', { + onClick: state.sendTransaction, + }, 'Send'), + ]), ]) ) } - -function actionButtons(state){ - return ( - - h('.flex-row.flex-space-around', [ - h('button', { - onClick: state.cancelTransaction, - }, 'Cancel'), - h('button', { - onClick: state.sendTransaction, - }, 'Send'), - ]) - - ) -}
\ No newline at end of file diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index 5c80939b9..8455826b8 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -6,7 +6,7 @@ const connect = require('react-redux').connect const actions = require('./actions') const txHelper = require('../lib/tx-helper') -const ConfirmTx = require('./components/pending-tx') +const PendingTx = require('./components/pending-tx') const PendingMsg = require('./components/pending-msg') module.exports = connect(mapStateToProps)(ConfirmTxScreen) @@ -101,7 +101,7 @@ ConfirmTxScreen.prototype.render = function () { function currentTxView (opts) { if ('txParams' in opts.txData) { // This is a pending transaction - return h(ConfirmTx, opts) + return h(PendingTx, opts) } else if ('msgParams' in opts.txData) { // This is a pending message to sign return h(PendingMsg, opts) |