diff options
Diffstat (limited to 'ui/app/components/pending-tx-details.js')
| -rw-r--r-- | ui/app/components/pending-tx-details.js | 223 |
1 files changed, 191 insertions, 32 deletions
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js index 2ba613f20..b2c16e772 100644 --- a/ui/app/components/pending-tx-details.js +++ b/ui/app/components/pending-tx-details.js @@ -2,10 +2,17 @@ const Component = require('react').Component const h = require('react-hyperscript') const inherits = require('util').inherits -const AccountPanel = require('./account-panel') +const MiniAccountPanel = require('./mini-account-panel') +const EtherBalance = require('./eth-balance') const addressSummary = require('../util').addressSummary -const readableDate = require('../util').readableDate const formatBalance = require('../util').formatBalance +const nameForAddress = require('../../lib/contract-namer') +const ethUtil = require('ethereumjs-util') +const BN = ethUtil.BN + +const baseGasFee = new BN('21000', 10) +const gasCost = new BN('4a817c800', 16) +const baseFeeHex = baseGasFee.mul(gasCost).toString(16) module.exports = PendingTxDetails @@ -14,52 +21,204 @@ function PendingTxDetails () { Component.call(this) } -PendingTxDetails.prototype.render = function () { - var state = this.props - return this.renderGeneric(h, state) -} +const PTXP = PendingTxDetails.prototype -PendingTxDetails.prototype.renderGeneric = function (h, state) { - var txData = state.txData +PTXP.render = function () { + var props = this.props + var txData = props.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 } + var address = txParams.from || props.selectedAddress + var identity = props.identities[address] || { address: address } + var balance = props.accounts[address].balance - return ( + var gasCost = ethUtil.stripHexPrefix(txParams.gas || baseFeeHex) + var txValue = ethUtil.stripHexPrefix(txParams.value || '0x0') + var maxCost = ((new BN(txValue, 16)).add(new BN(gasCost, 16))).toString(16) + var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0 + return ( h('div', [ - // account that will sign - h(AccountPanel, { - showFullAddress: true, - identity: identity, - account: account, - imageifyIdenticons: state.imageifyIdenticons, - }), + h('.flex-row.flex-center', { + style: { + maxWidth: '100%', + }, + }, [ + + h(MiniAccountPanel, { + imageSeed: address, + imageifyIdenticons: props.imageifyIdenticons, + picOrder: 'right', + }, [ + h('span.font-small', { + style: { + fontFamily: 'Montserrat Bold, Montserrat, sans-serif', + }, + }, identity.name), + h('span.font-small', { + style: { + fontFamily: 'Montserrat Light, Montserrat, sans-serif', + }, + }, addressSummary(address, 6, 4, false)), + + h('span.font-small', { + style: { + fontFamily: 'Montserrat Light, Montserrat, sans-serif', + }, + }, h(EtherBalance, { + value: balance, + inline: true, + })), + + ]), + + h('img', { + src: 'images/forward-carrat.svg', + style: { + padding: '5px 6px 0px 10px', + height: '37px', + }, + }), + + this.miniAccountPanelForRecipient(), + ]), - // tx data - h('.tx-data.flex-column.flex-justify-center.flex-grow.select-none', [ + h('style', ` + .table-box { + margin: 7px 0px 0px 0px; + width: 100%; + } + .table-box .row { + margin: 0px; + background: rgb(236,236,236); + display: flex; + justify-content: space-between; + font-family: Montserrat Light, sans-serif; + font-size: 13px; + padding: 5px 25px; + } + .table-box .row .value { + font-family: Montserrat Regular; + } + `), - h('.flex-row.flex-space-between', [ - h('label.font-small', 'TO ADDRESS'), - h('span.font-small', addressSummary(txParams.to)), + h('.table-box', [ + + h('.row', [ + h('.cell.label', 'Amount'), + h('.cell.value', formatBalance(txParams.value)), ]), - h('.flex-row.flex-space-between', [ - h('label.font-small', 'DATE'), - h('span.font-small', readableDate(txData.time)), + h('.cell.row', [ + h('.cell.label', 'Max Transaction Fee'), + h('.cell.value', formatBalance(gasCost)), ]), - h('.flex-row.flex-space-between', [ - h('label.font-small', 'AMOUNT'), - h('span.font-small', formatBalance(txParams.value)), + h('.cell.row', { + style: { + fontFamily: 'Montserrat Regular', + background: 'white', + padding: '10px 25px', + }, + }, [ + h('.cell.label', 'Max Total'), + h('.cell.value', { + style: { + display: 'flex', + alignItems: 'center', + }, + }, [ + h(EtherBalance, { + value: maxCost, + inline: true, + labelColor: 'black', + fontSize: '16px', + }), + ]), ]), - ]), + + h('.cell.row', { + style: { + background: '#f7f7f7', + paddingBottom: '0px', + }, + }, [ + h('.cell.label'), + h('.cell.value', { + style: { + fontFamily: 'Montserrat Light', + fontSize: '11px', + }, + }, `Data included: ${dataLength} bytes`), + ]), + ]), // End of Table + + this.warnIfNeeded(), ]) - ) +} + +PTXP.miniAccountPanelForRecipient = function () { + var props = this.props + var txData = props.txData + var txParams = txData.txParams || {} + var isContractDeploy = !('to' in txParams) + + // If it's not a contract deploy, send to the account + if (!isContractDeploy) { + return h(MiniAccountPanel, { + imageSeed: txParams.to, + imageifyIdenticons: props.imageifyIdenticons, + picOrder: 'left', + }, [ + h('span.font-small', { + style: { + fontFamily: 'Montserrat Bold, Montserrat, sans-serif', + }, + }, nameForAddress(txParams.to, props.identities)), + h('span.font-small', { + style: { + fontFamily: 'Montserrat Light, Montserrat, sans-serif', + }, + }, addressSummary(txParams.to, 6, 4, false)), + ]) + + } else { + return h(MiniAccountPanel, { + imageifyIdenticons: props.imageifyIdenticons, + picOrder: 'left', + }, [ + + h('span.font-small', { + style: { + fontFamily: 'Montserrat Bold, Montserrat, sans-serif', + }, + }, 'New Contract'), + + ]) + } +} + +// Should analyze if there is a DELEGATECALL opcode +// in the recipient contract, and show a warning if so. +PTXP.warnIfNeeded = function () { + const containsDelegateCall = !!this.props.txData.containsDelegateCall + + if (!containsDelegateCall) { + return null + } + return h('span.error', { + style: { + fontFamily: 'Montserrat Light', + fontSize: '13px', + display: 'flex', + justifyContent: 'center', + }, + }, [ + h('i.fa.fa-lg.fa-info-circle', { style: { margin: '5px' } }), + h('span', ' Your identity may be used in other contracts!'), + ]) } |