aboutsummaryrefslogtreecommitdiffstats
path: root/ui/app/components/pending-tx-details.js
diff options
context:
space:
mode:
Diffstat (limited to 'ui/app/components/pending-tx-details.js')
-rw-r--r--ui/app/components/pending-tx-details.js344
1 files changed, 0 insertions, 344 deletions
diff --git a/ui/app/components/pending-tx-details.js b/ui/app/components/pending-tx-details.js
deleted file mode 100644
index e92ce575f..000000000
--- a/ui/app/components/pending-tx-details.js
+++ /dev/null
@@ -1,344 +0,0 @@
-const Component = require('react').Component
-const h = require('react-hyperscript')
-const inherits = require('util').inherits
-const extend = require('xtend')
-const ethUtil = require('ethereumjs-util')
-const BN = ethUtil.BN
-
-const MiniAccountPanel = require('./mini-account-panel')
-const EthBalance = require('./eth-balance')
-const util = require('../util')
-const addressSummary = util.addressSummary
-const nameForAddress = require('../../lib/contract-namer')
-const HexInput = require('./hex-as-decimal-input')
-
-module.exports = PendingTxDetails
-
-inherits(PendingTxDetails, Component)
-function PendingTxDetails () {
- Component.call(this)
-}
-
-const PTXP = PendingTxDetails.prototype
-
-PTXP.render = function () {
- var props = this.props
- var state = this.state || {}
- var txData = state.txMeta || props.txData
-
- var txParams = txData.txParams || {}
- var address = txParams.from || props.selectedAddress
- var identity = props.identities[address] || { address: address }
- var account = props.accounts[address]
- var balance = account ? account.balance : '0x0'
-
- const gas = (state.gas === undefined) ? txParams.gas : state.gas
- const gasPrice = (state.gasPrice === undefined) ? txData.gasPrice : state.gasPrice
-
- var txFee = state.txFee || txData.txFee || ''
- var maxCost = state.maxCost || txData.maxCost || ''
- var dataLength = txParams.data ? (txParams.data.length - 2) / 2 : 0
- var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
-
- log.debug(`rendering gas: ${gas}, gasPrice: ${gasPrice}, txFee: ${txFee}, maxCost: ${maxCost}`)
-
- return (
- h('div', [
-
- h('.flex-row.flex-center', {
- style: {
- maxWidth: '100%',
- },
- }, [
-
- h(MiniAccountPanel, {
- imageSeed: address,
- imageifyIdenticons: imageify,
- 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(EthBalance, {
- value: balance,
- inline: true,
- labelColor: '#F7861C',
- }),
- ]),
-
- ]),
-
- forwardCarrat(),
-
- this.miniAccountPanelForRecipient(),
- ]),
-
- 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('.table-box', [
-
- // Ether Value
- // Currently not customizable, but easily modified
- // in the way that gas and gasLimit currently are.
- h('.row', [
- h('.cell.label', 'Amount'),
- h(EthBalance, { value: txParams.value }),
- ]),
-
- // Gas Limit (customizable)
- h('.cell.row', [
- h('.cell.label', 'Gas Limit'),
- h('.cell.value', {
- }, [
- h(HexInput, {
- value: gas,
- suffix: 'UNITS',
- style: {
- position: 'relative',
- top: '5px',
- },
- onChange: (newHex) => {
- log.info(`Gas limit changed to ${newHex}`)
- this.setState({ gas: newHex })
- },
- }),
- ]),
- ]),
-
- // Gas Price (customizable)
- h('.cell.row', [
- h('.cell.label', 'Gas Price'),
- h('.cell.value', {
- }, [
- h(HexInput, {
- value: gasPrice,
- suffix: 'WEI',
- style: {
- position: 'relative',
- top: '5px',
- },
- onChange: (newHex) => {
- log.info(`Gas price changed to: ${newHex}`)
- this.setState({ gasPrice: newHex })
- },
- }),
- ]),
- ]),
-
- // Max Transaction Fee (calculated)
- h('.cell.row', [
- h('.cell.label', 'Max Transaction Fee'),
- h(EthBalance, { value: txFee.toString(16) }),
- ]),
-
- 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(EthBalance, {
- value: maxCost.toString(16),
- inline: true,
- labelColor: 'black',
- fontSize: '16px',
- }),
- ]),
- ]),
-
- // Data size row:
- 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
-
- ])
- )
-}
-
-PTXP.miniAccountPanelForRecipient = function () {
- var props = this.props
- var txData = props.txData
- var txParams = txData.txParams || {}
- var isContractDeploy = !('to' in txParams)
- var imageify = props.imageifyIdenticons === undefined ? true : props.imageifyIdenticons
-
- // If it's not a contract deploy, send to the account
- if (!isContractDeploy) {
- return h(MiniAccountPanel, {
- imageSeed: txParams.to,
- imageifyIdenticons: imageify,
- 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: imageify,
- picOrder: 'left',
- }, [
-
- h('span.font-small', {
- style: {
- fontFamily: 'Montserrat Bold, Montserrat, sans-serif',
- },
- }, 'New Contract'),
-
- ])
- }
-}
-
-PTXP.componentDidUpdate = function (prevProps, previousState) {
- log.debug(`pending-tx-details componentDidUpdate`)
- const state = this.state || {}
- const prevState = previousState || {}
- const { gas, gasPrice } = state
-
- // Only if gas or gasPrice changed:
- if (!prevState ||
- (gas !== prevState.gas ||
- gasPrice !== prevState.gasPrice)) {
- log.debug(`recalculating gas since prev state change: ${JSON.stringify({ prevState, state })}`)
- this.calculateGas()
- }
-}
-
-PTXP.calculateGas = function () {
- const txMeta = this.gatherParams()
- log.debug(`pending-tx-details calculating gas for ${JSON.stringify(txMeta)}`)
-
- var txParams = txMeta.txParams
- var gasCost = new BN(ethUtil.stripHexPrefix(txParams.gas || txMeta.estimatedGas), 16)
- var gasPrice = new BN(ethUtil.stripHexPrefix(txParams.gasPrice || '0x4a817c800'), 16)
- var txFee = gasCost.mul(gasPrice)
- var txValue = new BN(ethUtil.stripHexPrefix(txParams.value || '0x0'), 16)
- var maxCost = txValue.add(txFee)
-
- const txFeeHex = '0x' + txFee.toString('hex')
- const maxCostHex = '0x' + maxCost.toString('hex')
- const gasPriceHex = '0x' + gasPrice.toString('hex')
-
- txMeta.txFee = txFeeHex
- txMeta.maxCost = maxCostHex
- txMeta.txParams.gasPrice = gasPriceHex
-
- this.setState({
- txFee: '0x' + txFee.toString('hex'),
- maxCost: '0x' + maxCost.toString('hex'),
- })
-
- if (this.props.onTxChange) {
- this.props.onTxChange(txMeta)
- }
-}
-
-PTXP.resetGasFields = function () {
- log.debug(`pending-tx-details#resetGasFields`)
- const txData = this.props.txData
- this.setState({
- gas: txData.txParams.gas,
- gasPrice: txData.gasPrice,
- })
-}
-
-// After a customizable state value has been updated,
-PTXP.gatherParams = function () {
- log.debug(`pending-tx-details#gatherParams`)
- const props = this.props
- const state = this.state || {}
- const txData = state.txData || props.txData
- const txParams = txData.txParams
- const gas = state.gas || txParams.gas
- const gasPrice = state.gasPrice || txParams.gasPrice
- const resultTx = extend(txParams, {
- gas,
- gasPrice,
- })
- const resultTxMeta = extend(txData, {
- txParams: resultTx,
- })
- log.debug(`UI has computed tx params ${JSON.stringify(resultTx)}`)
- return resultTxMeta
-}
-
-PTXP.verifyGasParams = function () {
- // We call this in case the gas has not been modified at all
- if (!this.state) { return true }
- return this._notZeroOrEmptyString(this.state.gas) && this._notZeroOrEmptyString(this.state.gasPrice)
-}
-
-PTXP._notZeroOrEmptyString = function (obj) {
- return obj !== '' && obj !== '0x0'
-}
-
-function forwardCarrat () {
- return (
-
- h('img', {
- src: 'images/forward-carrat.svg',
- style: {
- padding: '5px 6px 0px 10px',
- height: '37px',
- },
- })
-
- )
-}
generated by cgit v1.2.3 (git 2.25.1) at 2025-01-04 15:04:40 +0800