From 83cda2b82e082a5a9b2ee35a9b6d55be43b0d788 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 21 Sep 2017 22:25:16 -0700 Subject: Refactor Confirmation Tx to render different screen --- ui/app/components/pending-tx/confirm-send-ether.js | 446 +++++++++++++++++++++ ui/app/components/pending-tx/index.js | 103 +++++ 2 files changed, 549 insertions(+) create mode 100644 ui/app/components/pending-tx/confirm-send-ether.js create mode 100644 ui/app/components/pending-tx/index.js (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js new file mode 100644 index 000000000..29c6d349c --- /dev/null +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -0,0 +1,446 @@ +const Component = require('react').Component +const { connect } = require('react-redux') +const h = require('react-hyperscript') +const inherits = require('util').inherits +const actions = require('../../actions') +const clone = require('clone') +const Identicon = require('../identicon') +const ethUtil = require('ethereumjs-util') +const BN = ethUtil.BN +const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') +const { conversionUtil, addCurrencies } = require('../../conversion-util') + +const MIN_GAS_PRICE_GWEI_BN = new BN(1) +const GWEI_FACTOR = new BN(1e9) +const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR) + +module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther) + +function mapStateToProps (state) { + const { + conversionRate, + identities, + } = state.metamask + const accounts = state.metamask.accounts + const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] + return { + conversionRate, + identities, + selectedAddress, + } +} + +function mapDispatchToProps (dispatch) { + return { + setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('USD')), + backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), + cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), + } +} + +inherits(ConfirmSendEther, Component) +function ConfirmSendEther () { + Component.call(this) + this.state = {} + this.onSubmit = this.onSubmit.bind(this) +} + +ConfirmSendEther.prototype.getAmount = function () { + const { conversionRate } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + const USD = conversionUtil(txParams.value, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromCurrency: 'ETH', + toCurrency: 'USD', + numberOfDecimals: 2, + fromDenomination: 'WEI', + conversionRate, + }) + const ETH = conversionUtil(txParams.value, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromCurrency: 'ETH', + toCurrency: 'ETH', + fromDenomination: 'WEI', + conversionRate, + numberOfDecimals: 6, + }) + + return { + USD, + ETH, + } + +} + +ConfirmSendEther.prototype.getGasFee = function () { + const { conversionRate } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + // Gas + const gas = txParams.gas + const gasBn = hexToBn(gas) + + // From latest master +// const gasLimit = new BN(parseInt(blockGasLimit)) +// const safeGasLimitBN = this.bnMultiplyByFraction(gasLimit, 19, 20) +// const saferGasLimitBN = this.bnMultiplyByFraction(gasLimit, 18, 20) +// const safeGasLimit = safeGasLimitBN.toString(10) + + // Gas Price + const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16) + const gasPriceBn = hexToBn(gasPrice) + + const txFeeBn = gasBn.mul(gasPriceBn) + + const USD = conversionUtil(txFeeBn, { + fromNumericBase: 'BN', + toNumericBase: 'dec', + fromDenomination: 'WEI', + fromCurrency: 'ETH', + toCurrency: 'USD', + numberOfDecimals: 2, + conversionRate, + }) + const ETH = conversionUtil(txFeeBn, { + fromNumericBase: 'BN', + toNumericBase: 'dec', + fromDenomination: 'WEI', + fromCurrency: 'ETH', + toCurrency: 'ETH', + numberOfDecimals: 6, + conversionRate, + }) + + return { + USD, + ETH, + } +} + +ConfirmSendEther.prototype.getData = function () { + const { identities } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + const { USD: gasFeeInUSD, ETH: gasFeeInETH } = this.getGasFee() + const { USD: amountInUSD, ETH: amountInETH } = this.getAmount() + + const totalInUSD = addCurrencies(gasFeeInUSD, amountInUSD, { + toNumericBase: 'dec', + numberOfDecimals: 2, + }) + const totalInETH = addCurrencies(gasFeeInETH, amountInETH, { + toNumericBase: 'dec', + numberOfDecimals: 6, + }) + + return { + from: { + address: txParams.from, + name: identities[txParams.from].name, + }, + to: { + address: txParams.to, + name: identities[txParams.to] ? identities[txParams.to].name : 'New Recipient', + }, + memo: txParams.memo || '', + gasFeeInUSD, + gasFeeInETH, + amountInUSD, + amountInETH, + totalInUSD, + totalInETH, + } +} + +ConfirmSendEther.prototype.render = function () { + const { backToAccountDetail, selectedAddress } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + const { + from: { + address: fromAddress, + name: fromName, + }, + to: { + address: toAddress, + name: toName, + }, + memo, + gasFeeInUSD, + gasFeeInETH, + amountInUSD, + totalInUSD, + totalInETH, + } = this.getData() + + // This is from the latest master + // It handles some of the errors that we are not currently handling + // Leaving as comments fo reference + + // const balanceBn = hexToBn(balance) + // const insufficientBalance = balanceBn.lt(maxCost) + // const buyDisabled = insufficientBalance || !this.state.valid || !isValidAddress || this.state.submitting + // const showRejectAll = props.unconfTxListLength > 1 +// const dangerousGasLimit = gasBn.gte(saferGasLimitBN) +// const gasLimitSpecified = txMeta.gasLimitSpecified + + this.inputs = [] + + return ( + h('div.flex-column.flex-grow.confirm-screen-container', { + style: { minWidth: '355px' }, + }, [ + // Main Send token Card + h('div.confirm-screen-wrapper.flex-column.flex-grow', [ + h('h3.flex-center.confirm-screen-header', [ + h('button.confirm-screen-back-button', { + onClick: () => backToAccountDetail(selectedAddress), + }, 'BACK'), + h('div.confirm-screen-title', 'Confirm Transaction'), + ]), + h('div.flex-row.flex-center.confirm-screen-identicons', [ + h('div.confirm-screen-account-wrapper', [ + h( + Identicon, + { + address: fromAddress, + diameter: 100, + }, + ), + h('span.confirm-screen-account-name', fromName), + h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), + ]), + h('i.fa.fa-arrow-right.fa-lg'), + h('div.confirm-screen-account-wrapper', [ + h( + Identicon, + { + address: txParams.to, + diameter: 100, + }, + ), + h('span.confirm-screen-account-name', toName), + h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), + ]), + ]), + + h('h3.flex-center.confirm-screen-sending-to-message', { + style: { + textAlign: 'center', + fontSize: '16px', + }, + }, [ + `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, + ]), + + h('h3.flex-center.confirm-screen-send-amount', [`$${amountInUSD}`]), + h('h3.flex-center.confirm-screen-send-amount-currency', [ 'USD' ]), + h('div.flex-center.confirm-memo-wrapper', [ + h('h3.confirm-screen-send-memo', [ memo ]), + ]), + + h('div.confirm-screen-rows', [ + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', fromName), + h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + ]), + ]), + + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', toName), + h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), + ]), + ]), + + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `$${gasFeeInUSD} USD`), + + h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`), + ]), + ]), + + + h('section.flex-row.flex-center.confirm-screen-total-box ', [ + h('div.confirm-screen-section-column', [ + h('span.confirm-screen-label', [ 'Total ' ]), + h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]), + ]), + + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `$${totalInUSD} USD`), + h('div.confirm-screen-row-detail', `${totalInETH} ETH`), + ]), + ]), + ]), + +// These are latest errors handling from master +// Leaving as comments as reference when we start implementing error handling +// h('style', ` +// .conf-buttons button { +// margin-left: 10px; +// text-transform: uppercase; +// } +// `), + +// txMeta.simulationFails ? +// h('.error', { +// style: { +// marginLeft: 50, +// fontSize: '0.9em', +// }, +// }, 'Transaction Error. Exception thrown in contract code.') +// : null, + +// !isValidAddress ? +// h('.error', { +// style: { +// marginLeft: 50, +// fontSize: '0.9em', +// }, +// }, 'Recipient address is invalid. Sending this transaction will result in a loss of ETH.') +// : null, + +// insufficientBalance ? +// h('span.error', { +// style: { +// marginLeft: 50, +// fontSize: '0.9em', +// }, +// }, 'Insufficient balance for transaction') +// : null, + +// // send + cancel +// h('.flex-row.flex-space-around.conf-buttons', { +// style: { +// display: 'flex', +// justifyContent: 'flex-end', +// margin: '14px 25px', +// }, +// }, [ +// h('button', { +// onClick: (event) => { +// this.resetGasFields() +// event.preventDefault() +// }, +// }, 'Reset'), + +// // Accept Button or Buy Button +// insufficientBalance ? h('button.btn-green', { onClick: props.buyEth }, 'Buy Ether') : +// h('input.confirm.btn-green', { +// type: 'submit', +// value: 'SUBMIT', +// style: { marginLeft: '10px' }, +// disabled: buyDisabled, +// }), + +// h('button.cancel.btn-red', { +// onClick: props.cancelTransaction, +// }, 'Reject'), +// ]), +// showRejectAll ? h('.flex-row.flex-space-around.conf-buttons', { +// style: { +// display: 'flex', +// justifyContent: 'flex-end', +// margin: '14px 25px', +// }, +// }, [ +// h('button.cancel.btn-red', { +// onClick: props.cancelAllTransactions, +// }, 'Reject All'), +// ]) : null, +// ]), +// ]) +// ) +// } + ]), + + h('form#pending-tx-form.flex-column.flex-center', { + onSubmit: this.onSubmit, + }, [ + + // Accept Button + h('button.confirm-screen-confirm-button', ['CONFIRM']), + + // Cancel Button + h('div.cancel.btn-light.confirm-screen-cancel-button', { + onClick: (event) => this.cancel(event, txMeta), + }, 'CANCEL'), + ]), + ]) + ) +} + +ConfirmSendEther.prototype.onSubmit = function (event) { + event.preventDefault() + const txMeta = this.gatherTxMeta() + const valid = this.checkValidity() + this.setState({ valid, submitting: true }) + + if (valid && this.verifyGasParams()) { + this.props.sendTransaction(txMeta, event) + } else { + this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) + this.setState({ submitting: false }) + } +} + +ConfirmSendEther.prototype.cancel = function (event, txMeta) { + event.preventDefault() + this.props.cancelTransaction(txMeta) +} + +ConfirmSendEther.prototype.checkValidity = function () { + const form = this.getFormEl() + const valid = form.checkValidity() + return valid +} + +ConfirmSendEther.prototype.getFormEl = function () { + const form = document.querySelector('form#pending-tx-form') + // Stub out form for unit tests: + if (!form) { + return { checkValidity () { return true } } + } + return form +} + +// After a customizable state value has been updated, +ConfirmSendEther.prototype.gatherTxMeta = function () { + const props = this.props + const state = this.state + const txData = clone(state.txData) || clone(props.txData) + + // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) + return txData +} + +ConfirmSendEther.prototype.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) + ) +} + +ConfirmSendEther.prototype._notZeroOrEmptyString = function (obj) { + return obj !== '' && obj !== '0x0' +} + +ConfirmSendEther.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { + const numBN = new BN(numerator) + const denomBN = new BN(denominator) + return targetBN.mul(numBN).div(denomBN) +} diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js new file mode 100644 index 000000000..3797b5642 --- /dev/null +++ b/ui/app/components/pending-tx/index.js @@ -0,0 +1,103 @@ +const Component = require('react').Component +const { connect } = require('react-redux') +const h = require('react-hyperscript') +const clone = require('clone') +const abi = require('human-standard-token-abi') +const abiDecoder = require('abi-decoder') +abiDecoder.addABI(abi) +const inherits = require('util').inherits +const actions = require('../../actions') +const util = require('../../util') +const ConfirmSendEther = require('./confirm-send-ether') + +const TX_TYPES = { + DEPLOY_CONTRACT: 'deploy_contract', + SEND_ETHER: 'send_ether', + SEND_TOKEN: 'send_token', +} + +module.exports = connect(mapStateToProps, mapDispatchToProps)(PendingTx) + +function mapStateToProps (state) { + const { + conversionRate, + identities, + } = state.metamask + const accounts = state.metamask.accounts + const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] + return { + conversionRate, + identities, + selectedAddress, + } +} + +function mapDispatchToProps (dispatch) { + return { + setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('USD')), + backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), + cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), + } +} + +inherits(PendingTx, Component) +function PendingTx () { + Component.call(this) + this.state = { + isFetching: true, + transactionType: '', + } +} + +PendingTx.prototype.componentWillMount = function () { + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + this.props.setCurrentCurrencyToUSD() + + if (txParams.to) { + const token = util.getContractAtAddress(txParams.to) + token + .symbol() + .then(result => { + const symbol = result[0] || null + this.setState({ + transactionType: symbol ? TX_TYPES.SEND_TOKEN : TX_TYPES.SEND_ETHER, + isFetching: false, + }) + }) + .catch(() => this.setState({ + transactionType: TX_TYPES.SEND_ETHER, + isFetching: false, + })) + } else { + this.setState({ + transactionType: TX_TYPES.DEPLOY_CONTRACT, + isFetching: false, + }) + } +} + +PendingTx.prototype.gatherTxMeta = function () { + const props = this.props + const state = this.state + const txData = clone(state.txData) || clone(props.txData) + + return txData +} + +PendingTx.prototype.render = function () { + const { isFetching, transactionType } = this.state + + if (isFetching) { + return h('noscript') + } + + + switch (transactionType) { + case TX_TYPES.SEND_ETHER: + return h(ConfirmSendEther, { txData: this.gatherTxMeta() }) + default: + return h('noscript') + } +} -- cgit v1.2.3 From e1077836ce916e2bd788451e3f365324024a1c0c Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Fri, 22 Sep 2017 14:34:56 -0700 Subject: Add Confirm Send token screen --- ui/app/components/pending-tx/confirm-send-ether.js | 2 +- ui/app/components/pending-tx/confirm-send-token.js | 394 +++++++++++++++++++++ ui/app/components/pending-tx/index.js | 73 +++- 3 files changed, 451 insertions(+), 18 deletions(-) create mode 100644 ui/app/components/pending-tx/confirm-send-token.js (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 29c6d349c..b03ec0552 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -49,7 +49,7 @@ ConfirmSendEther.prototype.getAmount = function () { const { conversionRate } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - + console.log(txParams) const USD = conversionUtil(txParams.value, { fromNumericBase: 'hex', toNumericBase: 'dec', diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js new file mode 100644 index 000000000..384ac92cc --- /dev/null +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -0,0 +1,394 @@ +const Component = require('react').Component +const { connect } = require('react-redux') +const h = require('react-hyperscript') +const inherits = require('util').inherits +const abi = require('human-standard-token-abi') +const abiDecoder = require('abi-decoder') +abiDecoder.addABI(abi) +const actions = require('../../actions') +const clone = require('clone') +const Identicon = require('../identicon') +const ethUtil = require('ethereumjs-util') +const BN = ethUtil.BN +const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') +const { conversionUtil } = require('../../conversion-util') + +const MIN_GAS_PRICE_GWEI_BN = new BN(1) +const GWEI_FACTOR = new BN(1e9) +const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR) + +module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken) + +function mapStateToProps (state, ownProps) { + const { token: { symbol }, txData } = ownProps + const { txParams } = txData || {} + const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) + const { + conversionRate, + identities, + } = state.metamask + const accounts = state.metamask.accounts + const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] + const tokenExchangeRates = state.metamask.tokenExchangeRates + const pair = `${symbol.toLowerCase()}_eth` + const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} + + return { + conversionRate, + identities, + selectedAddress, + tokenExchangeRate, + tokenData: tokenData || {}, + } +} + +function mapDispatchToProps (dispatch, ownProps) { + const { token: { symbol } } = ownProps + + return { + backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), + cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), + updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)), + } +} + +inherits(ConfirmSendToken, Component) +function ConfirmSendToken () { + Component.call(this) + this.state = {} + this.onSubmit = this.onSubmit.bind(this) +} + +ConfirmSendToken.prototype.componentWillMount = function () { + this.props.updateTokenExchangeRate() +} + +ConfirmSendToken.prototype.getAmount = function () { + const { conversionRate, tokenExchangeRate, token, tokenData } = this.props + const { params = [] } = tokenData + const { value } = params[1] || {} + const { decimals } = token + const multiplier = Math.pow(10, Number(decimals || 0)) + const sendTokenAmount = Number(value / multiplier) + + return { + fiat: tokenExchangeRate + ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2) + : null, + token: +sendTokenAmount.toFixed(decimals), + } + +} + +ConfirmSendToken.prototype.getGasFee = function () { + const { conversionRate, tokenExchangeRate, token } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + const { decimals } = token + + // Gas + const gas = txParams.gas + const gasBn = hexToBn(gas) + + // Gas Price + const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16) + const gasPriceBn = hexToBn(gasPrice) + const txFeeBn = gasBn.mul(gasPriceBn) + + + const USD = conversionUtil(txFeeBn, { + fromNumericBase: 'BN', + toNumericBase: 'dec', + fromDenomination: 'WEI', + fromCurrency: 'ETH', + toCurrency: 'USD', + numberOfDecimals: 2, + conversionRate, + }) + const ETH = conversionUtil(txFeeBn, { + fromNumericBase: 'BN', + toNumericBase: 'dec', + fromDenomination: 'WEI', + fromCurrency: 'ETH', + toCurrency: 'ETH', + numberOfDecimals: 6, + conversionRate, + }) + + return { + fiat: +Number(USD).toFixed(2), + eth: ETH, + token: tokenExchangeRate + ? +(ETH * tokenExchangeRate).toFixed(decimals) + : null, + } +} + +ConfirmSendToken.prototype.getData = function () { + const { identities } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + return { + from: { + address: txParams.from, + name: identities[txParams.from].name, + }, + to: { + address: txParams.to, + name: identities[txParams.to] ? identities[txParams.to].name : 'New Recipient', + }, + memo: txParams.memo || '', + } +} + +ConfirmSendToken.prototype.renderHeroAmount = function () { + const { token: { symbol } } = this.props + const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + const { memo = '' } = txParams + + return fiatAmount + ? ( + h('div.confirm-send-token__hero-amount-wrapper', [ + h('h3.flex-center.confirm-screen-send-amount', `$${fiatAmount}`), + h('h3.flex-center.confirm-screen-send-amount-currency', 'USD'), + h('div.flex-center.confirm-memo-wrapper', [ + h('h3.confirm-screen-send-memo', memo), + ]), + ]) + ) + : ( + h('div.confirm-send-token__hero-amount-wrapper', [ + h('h3.flex-center.confirm-screen-send-amount', tokenAmount), + h('h3.flex-center.confirm-screen-send-amount-currency', symbol), + h('div.flex-center.confirm-memo-wrapper', [ + h('h3.confirm-screen-send-memo', memo), + ]), + ]) + ) +} + +ConfirmSendToken.prototype.renderGasFee = function () { + const { token: { symbol } } = this.props + const { fiat: fiatGas, token: tokenGas, eth: ethGas } = this.getGasFee() + + return ( + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `$${fiatGas} USD`), + + h( + 'div.confirm-screen-row-detail', + tokenGas ? `${tokenGas} ${symbol}` : `${ethGas} ETH` + ), + ]), + ]) + ) +} + +ConfirmSendToken.prototype.renderTotalPlusGas = function () { + const { token: { symbol } } = this.props + const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() + const { fiat: fiatGas, token: tokenGas } = this.getGasFee() + + return fiatAmount && fiatGas + ? ( + h('section.flex-row.flex-center.confirm-screen-total-box ', [ + h('div.confirm-screen-section-column', [ + h('span.confirm-screen-label', [ 'Total ' ]), + h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]), + ]), + + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `$${fiatAmount + fiatGas} USD`), + h('div.confirm-screen-row-detail', `${tokenAmount + tokenGas} ${symbol}`), + ]), + ]) + ) + : ( + h('section.flex-row.flex-center.confirm-screen-total-box ', [ + h('div.confirm-screen-section-column', [ + h('span.confirm-screen-label', [ 'Total ' ]), + h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]), + ]), + + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`), + h('div.confirm-screen-row-detail', `+ ${fiatGas} USD Gas`), + ]), + ]) + ) +} + +ConfirmSendToken.prototype.render = function () { + const { backToAccountDetail, selectedAddress } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + const { + from: { + address: fromAddress, + name: fromName, + }, + to: { + address: toAddress, + name: toName, + }, + } = this.getData() + + this.inputs = [] + + return ( + h('div.flex-column.flex-grow.confirm-screen-container', { + style: { minWidth: '355px' }, + }, [ + // Main Send token Card + h('div.confirm-screen-wrapper.flex-column.flex-grow', [ + h('h3.flex-center.confirm-screen-header', [ + h('button.confirm-screen-back-button', { + onClick: () => backToAccountDetail(selectedAddress), + }, 'BACK'), + h('div.confirm-screen-title', 'Confirm Transaction'), + ]), + h('div.flex-row.flex-center.confirm-screen-identicons', [ + h('div.confirm-screen-account-wrapper', [ + h( + Identicon, + { + address: fromAddress, + diameter: 100, + }, + ), + h('span.confirm-screen-account-name', fromName), + h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), + ]), + h('i.fa.fa-arrow-right.fa-lg'), + h('div.confirm-screen-account-wrapper', [ + h( + Identicon, + { + address: txParams.to, + diameter: 100, + }, + ), + h('span.confirm-screen-account-name', toName), + h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), + ]), + ]), + + h('h3.flex-center.confirm-screen-sending-to-message', { + style: { + textAlign: 'center', + fontSize: '16px', + }, + }, [ + `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, + ]), + + this.renderHeroAmount(), + + h('div.confirm-screen-rows', [ + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', fromName), + h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + ]), + ]), + + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', toName), + h('div.confirm-screen-row-detail', `...${toAddress.slice(toAddress.length - 4)}`), + ]), + ]), + + this.renderGasFee(), + + this.renderTotalPlusGas(), + + ]), + ]), + + h('form#pending-tx-form.flex-column.flex-center', { + onSubmit: this.onSubmit, + }, [ + + // Accept Button + h('button.confirm-screen-confirm-button', ['CONFIRM']), + + // Cancel Button + h('div.cancel.btn-light.confirm-screen-cancel-button', { + onClick: (event) => this.cancel(event, txMeta), + }, 'CANCEL'), + ]), + ]) + ) +} + +ConfirmSendToken.prototype.onSubmit = function (event) { + event.preventDefault() + const txMeta = this.gatherTxMeta() + const valid = this.checkValidity() + this.setState({ valid, submitting: true }) + + if (valid && this.verifyGasParams()) { + this.props.sendTransaction(txMeta, event) + } else { + this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) + this.setState({ submitting: false }) + } +} + +ConfirmSendToken.prototype.cancel = function (event, txMeta) { + event.preventDefault() + this.props.cancelTransaction(txMeta) +} + +ConfirmSendToken.prototype.checkValidity = function () { + const form = this.getFormEl() + const valid = form.checkValidity() + return valid +} + +ConfirmSendToken.prototype.getFormEl = function () { + const form = document.querySelector('form#pending-tx-form') + // Stub out form for unit tests: + if (!form) { + return { checkValidity () { return true } } + } + return form +} + +// After a customizable state value has been updated, +ConfirmSendToken.prototype.gatherTxMeta = function () { + const props = this.props + const state = this.state + const txData = clone(state.txData) || clone(props.txData) + + // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) + return txData +} + +ConfirmSendToken.prototype.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) + ) +} + +ConfirmSendToken.prototype._notZeroOrEmptyString = function (obj) { + return obj !== '' && obj !== '0x0' +} + +ConfirmSendToken.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { + const numBN = new BN(numerator) + const denomBN = new BN(denominator) + return targetBN.mul(numBN).div(denomBN) +} diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index 3797b5642..915319958 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -9,6 +9,7 @@ const inherits = require('util').inherits const actions = require('../../actions') const util = require('../../util') const ConfirmSendEther = require('./confirm-send-ether') +const ConfirmSendToken = require('./confirm-send-token') const TX_TYPES = { DEPLOY_CONTRACT: 'deploy_contract', @@ -46,33 +47,51 @@ function PendingTx () { this.state = { isFetching: true, transactionType: '', + tokenAddress: '', + tokenSymbol: '', + tokenDecimals: '', } } -PendingTx.prototype.componentWillMount = function () { +PendingTx.prototype.componentWillMount = async function () { const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} this.props.setCurrentCurrencyToUSD() - if (txParams.to) { + if (!txParams.to) { + return this.setState({ + transactionType: TX_TYPES.DEPLOY_CONTRACT, + isFetching: false, + }) + } + + try { const token = util.getContractAtAddress(txParams.to) - token - .symbol() - .then(result => { - const symbol = result[0] || null + const results = await Promise.all([ + token.symbol(), + token.decimals(), + ]) + + const [ symbol, decimals ] = results + + if (symbol[0] && decimals[0]) { this.setState({ - transactionType: symbol ? TX_TYPES.SEND_TOKEN : TX_TYPES.SEND_ETHER, + transactionType: TX_TYPES.SEND_TOKEN, + tokenAddress: txParams.to, + tokenSymbol: symbol[0], + tokenDecimals: decimals[0], isFetching: false, }) - }) - .catch(() => this.setState({ - transactionType: TX_TYPES.SEND_ETHER, - isFetching: false, - })) - } else { + } else { + this.setState({ + transactionType: TX_TYPES.SEND_ETHER, + isFetching: false, + }) + } + } catch (e) { this.setState({ - transactionType: TX_TYPES.DEPLOY_CONTRACT, + transactionType: TX_TYPES.SEND_ETHER, isFetching: false, }) } @@ -87,16 +106,36 @@ PendingTx.prototype.gatherTxMeta = function () { } PendingTx.prototype.render = function () { - const { isFetching, transactionType } = this.state + const { + isFetching, + transactionType, + tokenAddress, + tokenSymbol, + tokenDecimals, + } = this.state + + const { sendTransaction } = this.props if (isFetching) { return h('noscript') } - switch (transactionType) { case TX_TYPES.SEND_ETHER: - return h(ConfirmSendEther, { txData: this.gatherTxMeta() }) + return h(ConfirmSendEther, { + txData: this.gatherTxMeta(), + sendTransaction, + }) + case TX_TYPES.SEND_TOKEN: + return h(ConfirmSendToken, { + txData: this.gatherTxMeta(), + sendTransaction, + token: { + address: tokenAddress, + symbol: tokenSymbol, + decimals: tokenDecimals, + }, + }) default: return h('noscript') } -- cgit v1.2.3 From c77029ea90560b4210f9204e99314d30f9b59989 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 26 Sep 2017 19:21:04 -0700 Subject: Implement Confirm Deploy Contract screen --- .../pending-tx/confirm-deploy-contract.js | 344 +++++++++++++++++++++ ui/app/components/pending-tx/index.js | 6 + 2 files changed, 350 insertions(+) create mode 100644 ui/app/components/pending-tx/confirm-deploy-contract.js (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js new file mode 100644 index 000000000..89a0389d7 --- /dev/null +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -0,0 +1,344 @@ +const Component = require('react').Component +const { connect } = require('react-redux') +const h = require('react-hyperscript') +const inherits = require('util').inherits +const actions = require('../../actions') +const clone = require('clone') +const Identicon = require('../identicon') +const ethUtil = require('ethereumjs-util') +const BN = ethUtil.BN +const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') +const { conversionUtil } = require('../../conversion-util') + +const MIN_GAS_PRICE_GWEI_BN = new BN(1) +const GWEI_FACTOR = new BN(1e9) +const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR) + + +module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract) + +function mapStateToProps (state) { + const { + conversionRate, + identities, + } = state.metamask + const accounts = state.metamask.accounts + const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] + return { + conversionRate, + identities, + selectedAddress, + } +} + +function mapDispatchToProps (dispatch) { + return { + setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('USD')), + backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), + cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), + } +} + + +inherits(ConfirmDeployContract, Component) +function ConfirmDeployContract () { + Component.call(this) + this.state = {} + this.onSubmit = this.onSubmit.bind(this) +} + +ConfirmDeployContract.prototype.onSubmit = function (event) { + event.preventDefault() + const txMeta = this.gatherTxMeta() + const valid = this.checkValidity() + this.setState({ valid, submitting: true }) + + if (valid && this.verifyGasParams()) { + this.props.sendTransaction(txMeta, event) + } else { + this.props.dispatch(actions.displayWarning('Invalid Gas Parameters')) + this.setState({ submitting: false }) + } +} + +ConfirmDeployContract.prototype.cancel = function (event, txMeta) { + event.preventDefault() + this.props.cancelTransaction(txMeta) +} + +ConfirmDeployContract.prototype.checkValidity = function () { + const form = this.getFormEl() + const valid = form.checkValidity() + return valid +} + +ConfirmDeployContract.prototype.getFormEl = function () { + const form = document.querySelector('form#pending-tx-form') + // Stub out form for unit tests: + if (!form) { + return { checkValidity () { return true } } + } + return form +} + +// After a customizable state value has been updated, +ConfirmDeployContract.prototype.gatherTxMeta = function () { + const props = this.props + const state = this.state + const txData = clone(state.txData) || clone(props.txData) + + // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) + return txData +} + +ConfirmDeployContract.prototype.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) + ) +} + +ConfirmDeployContract.prototype._notZeroOrEmptyString = function (obj) { + return obj !== '' && obj !== '0x0' +} + +ConfirmDeployContract.prototype.bnMultiplyByFraction = function (targetBN, numerator, denominator) { + const numBN = new BN(numerator) + const denomBN = new BN(denominator) + return targetBN.mul(numBN).div(denomBN) +} + +ConfirmDeployContract.prototype.getData = function () { + const { identities } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + return { + from: { + address: txParams.from, + name: identities[txParams.from].name, + }, + memo: txParams.memo || '', + } +} + +ConfirmDeployContract.prototype.getAmount = function () { + const { conversionRate } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + const USD = conversionUtil(txParams.value, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromCurrency: 'ETH', + toCurrency: 'USD', + numberOfDecimals: 2, + fromDenomination: 'WEI', + conversionRate, + }) + const ETH = conversionUtil(txParams.value, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + fromCurrency: 'ETH', + toCurrency: 'ETH', + fromDenomination: 'WEI', + conversionRate, + numberOfDecimals: 6, + }) + + return { + fiat: Number(USD), + token: Number(ETH), + } + +} + +ConfirmDeployContract.prototype.getGasFee = function () { + const { conversionRate } = this.props + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + + // Gas + const gas = txParams.gas + const gasBn = hexToBn(gas) + + // Gas Price + const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16) + const gasPriceBn = hexToBn(gasPrice) + + const txFeeBn = gasBn.mul(gasPriceBn) + + const USD = conversionUtil(txFeeBn, { + fromNumericBase: 'BN', + toNumericBase: 'dec', + fromDenomination: 'WEI', + fromCurrency: 'ETH', + toCurrency: 'USD', + numberOfDecimals: 2, + conversionRate, + }) + const ETH = conversionUtil(txFeeBn, { + fromNumericBase: 'BN', + toNumericBase: 'dec', + fromDenomination: 'WEI', + fromCurrency: 'ETH', + toCurrency: 'ETH', + numberOfDecimals: 6, + conversionRate, + }) + + return { + fiat: Number(USD), + eth: Number(ETH), + } +} +ConfirmDeployContract.prototype.renderGasFee = function () { + const { fiat: fiatGas, eth: ethGas } = this.getGasFee() + + return ( + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `$${fiatGas} USD`), + + h( + 'div.confirm-screen-row-detail', + `${ethGas} ETH` + ), + ]), + ]) + ) +} + +ConfirmDeployContract.prototype.renderHeroAmount = function () { + const { fiat: fiatAmount } = this.getAmount() + const txMeta = this.gatherTxMeta() + const txParams = txMeta.txParams || {} + const { memo = '' } = txParams + + return ( + h('div.confirm-send-token__hero-amount-wrapper', [ + h('h3.flex-center.confirm-screen-send-amount', `$${fiatAmount}`), + h('h3.flex-center.confirm-screen-send-amount-currency', 'USD'), + h('div.flex-center.confirm-memo-wrapper', [ + h('h3.confirm-screen-send-memo', memo), + ]), + ]) + ) +} + +ConfirmDeployContract.prototype.renderTotalPlusGas = function () { + const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() + const { fiat: fiatGas, eth: ethGas } = this.getGasFee() + + return ( + h('section.flex-row.flex-center.confirm-screen-total-box ', [ + h('div.confirm-screen-section-column', [ + h('span.confirm-screen-label', [ 'Total ' ]), + h('div.confirm-screen-total-box__subtitle', [ 'Amount + Gas' ]), + ]), + + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', `$${fiatAmount + fiatGas} USD`), + h('div.confirm-screen-row-detail', `${tokenAmount + ethGas} ETH`), + ]), + ]) + ) +} + +ConfirmDeployContract.prototype.render = function () { + const { backToAccountDetail, selectedAddress } = this.props + const txMeta = this.gatherTxMeta() + + const { + from: { + address: fromAddress, + name: fromName, + }, + } = this.getData() + + this.inputs = [] + + return ( + h('div.flex-column.flex-grow.confirm-screen-container', { + style: { minWidth: '355px' }, + }, [ + // Main Send token Card + h('div.confirm-screen-wrapper.flex-column.flex-grow', [ + h('h3.flex-center.confirm-screen-header', [ + h('button.confirm-screen-back-button', { + onClick: () => backToAccountDetail(selectedAddress), + }, 'BACK'), + h('div.confirm-screen-title', 'Confirm Transaction'), + ]), + h('div.flex-row.flex-center.confirm-screen-identicons', [ + h('div.confirm-screen-account-wrapper', [ + h( + Identicon, + { + address: fromAddress, + diameter: 100, + }, + ), + h('span.confirm-screen-account-name', fromName), + h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), + ]), + h('i.fa.fa-arrow-right.fa-lg'), + h('div.confirm-screen-account-wrapper', [ + h('i.fa.fa-file-text-o'), + h('span.confirm-screen-account-name', 'New Contract'), + h('span.confirm-screen-account-number', ' '), + ]), + ]), + + h('h3.flex-center.confirm-screen-sending-to-message', { + style: { + textAlign: 'center', + fontSize: '16px', + }, + }, [ + `You're deploying a new contract.`, + ]), + + this.renderHeroAmount(), + + h('div.confirm-screen-rows', [ + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ 'From' ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', fromName), + h('div.confirm-screen-row-detail', `...${fromAddress.slice(fromAddress.length - 4)}`), + ]), + ]), + + h('section.flex-row.flex-center.confirm-screen-row', [ + h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]), + h('div.confirm-screen-section-column', [ + h('div.confirm-screen-row-info', 'New Contract'), + ]), + ]), + + this.renderGasFee(), + + this.renderTotalPlusGas(), + + ]), + ]), + + h('form#pending-tx-form.flex-column.flex-center', { + onSubmit: this.onSubmit, + }, [ + + // Accept Button + h('button.confirm-screen-confirm-button', ['CONFIRM']), + + // Cancel Button + h('div.cancel.btn-light.confirm-screen-cancel-button', { + onClick: (event) => this.cancel(event, txMeta), + }, 'CANCEL'), + ]), + ]) + ) +} diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index 915319958..b7dd50ff1 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -10,6 +10,7 @@ const actions = require('../../actions') const util = require('../../util') const ConfirmSendEther = require('./confirm-send-ether') const ConfirmSendToken = require('./confirm-send-token') +const ConfirmDeployContract = require('./confirm-deploy-contract') const TX_TYPES = { DEPLOY_CONTRACT: 'deploy_contract', @@ -136,6 +137,11 @@ PendingTx.prototype.render = function () { decimals: tokenDecimals, }, }) + case TX_TYPES.DEPLOY_CONTRACT: + return h(ConfirmDeployContract, { + txData: this.gatherTxMeta(), + sendTransaction, + }) default: return h('noscript') } -- cgit v1.2.3 From 06292107d756f0b25805f819cd276e4b6303ccb0 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Thu, 28 Sep 2017 16:13:53 -0700 Subject: Always set currency to USD on app mount --- ui/app/components/pending-tx/confirm-deploy-contract.js | 1 - ui/app/components/pending-tx/confirm-send-ether.js | 1 - ui/app/components/pending-tx/index.js | 2 +- 3 files changed, 1 insertion(+), 3 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index 89a0389d7..386e14afe 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -33,7 +33,6 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('USD')), backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), } diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index b03ec0552..330a55cce 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -32,7 +32,6 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('USD')), backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), } diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index b7dd50ff1..770fb1dfd 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -36,7 +36,7 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('USD')), + setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), } -- cgit v1.2.3 From 119c2b24238b84d5a9e3beabe572da42f8e2ffcb Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 10 Oct 2017 14:16:57 -0700 Subject: Confirm eth v2 --- ui/app/components/pending-tx/confirm-send-ether.js | 38 +++++++++++----------- 1 file changed, 19 insertions(+), 19 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 330a55cce..537a9a659 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -192,7 +192,7 @@ ConfirmSendEther.prototype.render = function () { this.inputs = [] return ( - h('div.flex-column.flex-grow.confirm-screen-container', { + h('div.confirm-screen-container', { style: { minWidth: '355px' }, }, [ // Main Send token Card @@ -202,6 +202,7 @@ ConfirmSendEther.prototype.render = function () { onClick: () => backToAccountDetail(selectedAddress), }, 'BACK'), h('div.confirm-screen-title', 'Confirm Transaction'), + h('div.confirm-screen-header-tip'), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.confirm-screen-account-wrapper', [ @@ -209,11 +210,11 @@ ConfirmSendEther.prototype.render = function () { Identicon, { address: fromAddress, - diameter: 100, + diameter: 60, }, ), h('span.confirm-screen-account-name', fromName), - h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), + // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), ]), h('i.fa.fa-arrow-right.fa-lg'), h('div.confirm-screen-account-wrapper', [ @@ -221,27 +222,27 @@ ConfirmSendEther.prototype.render = function () { Identicon, { address: txParams.to, - diameter: 100, + diameter: 60, }, ), h('span.confirm-screen-account-name', toName), - h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), + // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), ]), ]), - h('h3.flex-center.confirm-screen-sending-to-message', { - style: { - textAlign: 'center', - fontSize: '16px', - }, - }, [ - `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, - ]), + // h('h3.flex-center.confirm-screen-sending-to-message', { + // style: { + // textAlign: 'center', + // fontSize: '16px', + // }, + // }, [ + // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, + // ]), h('h3.flex-center.confirm-screen-send-amount', [`$${amountInUSD}`]), h('h3.flex-center.confirm-screen-send-amount-currency', [ 'USD' ]), h('div.flex-center.confirm-memo-wrapper', [ - h('h3.confirm-screen-send-memo', [ memo ]), + h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), ]), h('div.confirm-screen-rows', [ @@ -365,17 +366,16 @@ ConfirmSendEther.prototype.render = function () { // } ]), - h('form#pending-tx-form.flex-column.flex-center', { + h('form#pending-tx-form', { onSubmit: this.onSubmit, }, [ - - // Accept Button - h('button.confirm-screen-confirm-button', ['CONFIRM']), - // Cancel Button h('div.cancel.btn-light.confirm-screen-cancel-button', { onClick: (event) => this.cancel(event, txMeta), }, 'CANCEL'), + + // Accept Button + h('button.confirm-screen-confirm-button', ['CONFIRM']), ]), ]) ) -- cgit v1.2.3 From c221f5ce79a1e24df4672e16bda8e85c434e11ba Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 10 Oct 2017 14:30:20 -0700 Subject: Confirm Token and Confirm Contract v2 --- .../pending-tx/confirm-deploy-contract.js | 33 ++++++++--------- ui/app/components/pending-tx/confirm-send-token.js | 42 +++++++++++----------- 2 files changed, 39 insertions(+), 36 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index 386e14afe..ea4aa1dde 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -270,7 +270,8 @@ ConfirmDeployContract.prototype.render = function () { h('button.confirm-screen-back-button', { onClick: () => backToAccountDetail(selectedAddress), }, 'BACK'), - h('div.confirm-screen-title', 'Confirm Transaction'), + h('div.confirm-screen-title', 'Confirm Contract'), + h('div.confirm-screen-header-tip'), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.confirm-screen-account-wrapper', [ @@ -278,11 +279,11 @@ ConfirmDeployContract.prototype.render = function () { Identicon, { address: fromAddress, - diameter: 100, + diameter: 60, }, ), h('span.confirm-screen-account-name', fromName), - h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), + // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), ]), h('i.fa.fa-arrow-right.fa-lg'), h('div.confirm-screen-account-wrapper', [ @@ -292,14 +293,14 @@ ConfirmDeployContract.prototype.render = function () { ]), ]), - h('h3.flex-center.confirm-screen-sending-to-message', { - style: { - textAlign: 'center', - fontSize: '16px', - }, - }, [ - `You're deploying a new contract.`, - ]), + // h('h3.flex-center.confirm-screen-sending-to-message', { + // style: { + // textAlign: 'center', + // fontSize: '16px', + // }, + // }, [ + // `You're deploying a new contract.`, + // ]), this.renderHeroAmount(), @@ -326,17 +327,17 @@ ConfirmDeployContract.prototype.render = function () { ]), ]), - h('form#pending-tx-form.flex-column.flex-center', { + h('form#pending-tx-form', { onSubmit: this.onSubmit, }, [ - - // Accept Button - h('button.confirm-screen-confirm-button', ['CONFIRM']), - // Cancel Button h('div.cancel.btn-light.confirm-screen-cancel-button', { onClick: (event) => this.cancel(event, txMeta), }, 'CANCEL'), + + // Accept Button + h('button.confirm-screen-confirm-button', ['CONFIRM']), + ]), ]) ) diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 384ac92cc..d6ff5a5af 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -155,7 +155,7 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { h('h3.flex-center.confirm-screen-send-amount', `$${fiatAmount}`), h('h3.flex-center.confirm-screen-send-amount-currency', 'USD'), h('div.flex-center.confirm-memo-wrapper', [ - h('h3.confirm-screen-send-memo', memo), + h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), ]), ]) ) @@ -164,7 +164,7 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { h('h3.flex-center.confirm-screen-send-amount', tokenAmount), h('h3.flex-center.confirm-screen-send-amount-currency', symbol), h('div.flex-center.confirm-memo-wrapper', [ - h('h3.confirm-screen-send-memo', memo), + h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), ]), ]) ) @@ -242,7 +242,7 @@ ConfirmSendToken.prototype.render = function () { this.inputs = [] return ( - h('div.flex-column.flex-grow.confirm-screen-container', { + h('div.confirm-screen-container', { style: { minWidth: '355px' }, }, [ // Main Send token Card @@ -252,6 +252,7 @@ ConfirmSendToken.prototype.render = function () { onClick: () => backToAccountDetail(selectedAddress), }, 'BACK'), h('div.confirm-screen-title', 'Confirm Transaction'), + h('div.confirm-screen-header-tip'), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.confirm-screen-account-wrapper', [ @@ -259,11 +260,11 @@ ConfirmSendToken.prototype.render = function () { Identicon, { address: fromAddress, - diameter: 100, + diameter: 60, }, ), h('span.confirm-screen-account-name', fromName), - h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), + // h('span.confirm-screen-account-number', fromAddress.slice(fromAddress.length - 4)), ]), h('i.fa.fa-arrow-right.fa-lg'), h('div.confirm-screen-account-wrapper', [ @@ -271,22 +272,22 @@ ConfirmSendToken.prototype.render = function () { Identicon, { address: txParams.to, - diameter: 100, + diameter: 60, }, ), h('span.confirm-screen-account-name', toName), - h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), + // h('span.confirm-screen-account-number', toAddress.slice(toAddress.length - 4)), ]), ]), - h('h3.flex-center.confirm-screen-sending-to-message', { - style: { - textAlign: 'center', - fontSize: '16px', - }, - }, [ - `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, - ]), + // h('h3.flex-center.confirm-screen-sending-to-message', { + // style: { + // textAlign: 'center', + // fontSize: '16px', + // }, + // }, [ + // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, + // ]), this.renderHeroAmount(), @@ -314,18 +315,19 @@ ConfirmSendToken.prototype.render = function () { ]), ]), - h('form#pending-tx-form.flex-column.flex-center', { + h('form#pending-tx-form', { onSubmit: this.onSubmit, }, [ - - // Accept Button - h('button.confirm-screen-confirm-button', ['CONFIRM']), - // Cancel Button h('div.cancel.btn-light.confirm-screen-cancel-button', { onClick: (event) => this.cancel(event, txMeta), }, 'CANCEL'), + + // Accept Button + h('button.confirm-screen-confirm-button', ['CONFIRM']), ]), + + ]) ) } -- cgit v1.2.3 From d4343fe7e57de1652d1401f70bf4c0c823d53820 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Tue, 10 Oct 2017 14:36:13 -0700 Subject: Fix recipient on send token --- ui/app/components/pending-tx/confirm-send-token.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index d6ff5a5af..92bba8f62 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -125,7 +125,9 @@ ConfirmSendToken.prototype.getGasFee = function () { } ConfirmSendToken.prototype.getData = function () { - const { identities } = this.props + const { identities, tokenData } = this.props + const { params = [] } = tokenData + const { value } = params[0] || {} const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -136,7 +138,7 @@ ConfirmSendToken.prototype.getData = function () { }, to: { address: txParams.to, - name: identities[txParams.to] ? identities[txParams.to].name : 'New Recipient', + name: identities[value] ? identities[value].name : 'New Recipient', }, memo: txParams.memo || '', } -- cgit v1.2.3 From 332c7441b656ec82ebfba863e3feb4dbf365d67b Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 18 Oct 2017 23:39:26 -0230 Subject: Get currency from state in account details, send and confirm screens. --- .../pending-tx/confirm-deploy-contract.js | 28 +++++++------ ui/app/components/pending-tx/confirm-send-ether.js | 48 +++++++++++----------- ui/app/components/pending-tx/confirm-send-token.js | 24 +++++------ ui/app/components/pending-tx/index.js | 3 -- 4 files changed, 53 insertions(+), 50 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index ea4aa1dde..d19cec755 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -21,10 +21,12 @@ function mapStateToProps (state) { const { conversionRate, identities, + currentCurrency, } = state.metamask const accounts = state.metamask.accounts const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] return { + currentCurrency, conversionRate, identities, selectedAddress, @@ -124,15 +126,15 @@ ConfirmDeployContract.prototype.getData = function () { } ConfirmDeployContract.prototype.getAmount = function () { - const { conversionRate } = this.props + const { conversionRate, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - const USD = conversionUtil(txParams.value, { + const FIAT = conversionUtil(txParams.value, { fromNumericBase: 'hex', toNumericBase: 'dec', fromCurrency: 'ETH', - toCurrency: 'USD', + toCurrency: currentCurrency, numberOfDecimals: 2, fromDenomination: 'WEI', conversionRate, @@ -148,14 +150,14 @@ ConfirmDeployContract.prototype.getAmount = function () { }) return { - fiat: Number(USD), + fiat: Number(FIAT), token: Number(ETH), } } ConfirmDeployContract.prototype.getGasFee = function () { - const { conversionRate } = this.props + const { conversionRate, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -169,12 +171,12 @@ ConfirmDeployContract.prototype.getGasFee = function () { const txFeeBn = gasBn.mul(gasPriceBn) - const USD = conversionUtil(txFeeBn, { + const FIAT = conversionUtil(txFeeBn, { fromNumericBase: 'BN', toNumericBase: 'dec', fromDenomination: 'WEI', fromCurrency: 'ETH', - toCurrency: 'USD', + toCurrency: currentCurrency, numberOfDecimals: 2, conversionRate, }) @@ -189,7 +191,7 @@ ConfirmDeployContract.prototype.getGasFee = function () { }) return { - fiat: Number(USD), + fiat: Number(FIAT), eth: Number(ETH), } } @@ -200,7 +202,7 @@ ConfirmDeployContract.prototype.renderGasFee = function () { h('section.flex-row.flex-center.confirm-screen-row', [ h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `$${fiatGas} USD`), + h('div.confirm-screen-row-info', `${fiatGas} FIAT`), h( 'div.confirm-screen-row-detail', @@ -212,6 +214,7 @@ ConfirmDeployContract.prototype.renderGasFee = function () { } ConfirmDeployContract.prototype.renderHeroAmount = function () { + const { currentCurrency } = this.props const { fiat: fiatAmount } = this.getAmount() const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -219,8 +222,8 @@ ConfirmDeployContract.prototype.renderHeroAmount = function () { return ( h('div.confirm-send-token__hero-amount-wrapper', [ - h('h3.flex-center.confirm-screen-send-amount', `$${fiatAmount}`), - h('h3.flex-center.confirm-screen-send-amount-currency', 'USD'), + h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`), + h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency.toUpperCase()), h('div.flex-center.confirm-memo-wrapper', [ h('h3.confirm-screen-send-memo', memo), ]), @@ -229,6 +232,7 @@ ConfirmDeployContract.prototype.renderHeroAmount = function () { } ConfirmDeployContract.prototype.renderTotalPlusGas = function () { + const { currentCurrency } = this.props const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const { fiat: fiatGas, eth: ethGas } = this.getGasFee() @@ -240,7 +244,7 @@ ConfirmDeployContract.prototype.renderTotalPlusGas = function () { ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `$${fiatAmount + fiatGas} USD`), + h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency.toUpperCase()}`), h('div.confirm-screen-row-detail', `${tokenAmount + ethGas} ETH`), ]), ]) diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 537a9a659..51c36ba42 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -20,6 +20,7 @@ function mapStateToProps (state) { const { conversionRate, identities, + currentCurrency, } = state.metamask const accounts = state.metamask.accounts const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] @@ -27,6 +28,7 @@ function mapStateToProps (state) { conversionRate, identities, selectedAddress, + currentCurrency, } } @@ -45,15 +47,15 @@ function ConfirmSendEther () { } ConfirmSendEther.prototype.getAmount = function () { - const { conversionRate } = this.props + const { conversionRate, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - console.log(txParams) - const USD = conversionUtil(txParams.value, { + console.log(`conversionRate, currentCurrency`, conversionRate, currentCurrency); + const FIAT = conversionUtil(txParams.value, { fromNumericBase: 'hex', toNumericBase: 'dec', fromCurrency: 'ETH', - toCurrency: 'USD', + toCurrency: currentCurrency, numberOfDecimals: 2, fromDenomination: 'WEI', conversionRate, @@ -69,14 +71,14 @@ ConfirmSendEther.prototype.getAmount = function () { }) return { - USD, + FIAT, ETH, } } ConfirmSendEther.prototype.getGasFee = function () { - const { conversionRate } = this.props + const { conversionRate, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -96,12 +98,12 @@ ConfirmSendEther.prototype.getGasFee = function () { const txFeeBn = gasBn.mul(gasPriceBn) - const USD = conversionUtil(txFeeBn, { + const FIAT = conversionUtil(txFeeBn, { fromNumericBase: 'BN', toNumericBase: 'dec', fromDenomination: 'WEI', fromCurrency: 'ETH', - toCurrency: 'USD', + toCurrency: currentCurrency, numberOfDecimals: 2, conversionRate, }) @@ -116,7 +118,7 @@ ConfirmSendEther.prototype.getGasFee = function () { }) return { - USD, + FIAT, ETH, } } @@ -125,10 +127,10 @@ ConfirmSendEther.prototype.getData = function () { const { identities } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - const { USD: gasFeeInUSD, ETH: gasFeeInETH } = this.getGasFee() - const { USD: amountInUSD, ETH: amountInETH } = this.getAmount() + const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH } = this.getGasFee() + const { FIAT: amountInFIAT, ETH: amountInETH } = this.getAmount() - const totalInUSD = addCurrencies(gasFeeInUSD, amountInUSD, { + const totalInFIAT = addCurrencies(gasFeeInFIAT, amountInFIAT, { toNumericBase: 'dec', numberOfDecimals: 2, }) @@ -147,17 +149,17 @@ ConfirmSendEther.prototype.getData = function () { name: identities[txParams.to] ? identities[txParams.to].name : 'New Recipient', }, memo: txParams.memo || '', - gasFeeInUSD, + gasFeeInFIAT, gasFeeInETH, - amountInUSD, + amountInFIAT, amountInETH, - totalInUSD, + totalInFIAT, totalInETH, } } ConfirmSendEther.prototype.render = function () { - const { backToAccountDetail, selectedAddress } = this.props + const { backToAccountDetail, selectedAddress, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -171,10 +173,10 @@ ConfirmSendEther.prototype.render = function () { name: toName, }, memo, - gasFeeInUSD, + gasFeeInFIAT, gasFeeInETH, - amountInUSD, - totalInUSD, + amountInFIAT, + totalInFIAT, totalInETH, } = this.getData() @@ -239,8 +241,8 @@ ConfirmSendEther.prototype.render = function () { // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, // ]), - h('h3.flex-center.confirm-screen-send-amount', [`$${amountInUSD}`]), - h('h3.flex-center.confirm-screen-send-amount-currency', [ 'USD' ]), + h('h3.flex-center.confirm-screen-send-amount', [`$${amountInFIAT}`]), + h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]), h('div.flex-center.confirm-memo-wrapper', [ h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), ]), @@ -265,7 +267,7 @@ ConfirmSendEther.prototype.render = function () { h('section.flex-row.flex-center.confirm-screen-row', [ h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `$${gasFeeInUSD} USD`), + h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`), h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`), ]), @@ -279,7 +281,7 @@ ConfirmSendEther.prototype.render = function () { ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `$${totalInUSD} USD`), + h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`), h('div.confirm-screen-row-detail', `${totalInETH} ETH`), ]), ]), diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 92bba8f62..155242f56 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -81,7 +81,7 @@ ConfirmSendToken.prototype.getAmount = function () { } ConfirmSendToken.prototype.getGasFee = function () { - const { conversionRate, tokenExchangeRate, token } = this.props + const { conversionRate, tokenExchangeRate, token, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} const { decimals } = token @@ -96,12 +96,12 @@ ConfirmSendToken.prototype.getGasFee = function () { const txFeeBn = gasBn.mul(gasPriceBn) - const USD = conversionUtil(txFeeBn, { + const FIAT = conversionUtil(txFeeBn, { fromNumericBase: 'BN', toNumericBase: 'dec', fromDenomination: 'WEI', fromCurrency: 'ETH', - toCurrency: 'USD', + toCurrency: currentCurrency, numberOfDecimals: 2, conversionRate, }) @@ -116,7 +116,7 @@ ConfirmSendToken.prototype.getGasFee = function () { }) return { - fiat: +Number(USD).toFixed(2), + fiat: +Number(FIAT).toFixed(2), eth: ETH, token: tokenExchangeRate ? +(ETH * tokenExchangeRate).toFixed(decimals) @@ -145,7 +145,7 @@ ConfirmSendToken.prototype.getData = function () { } ConfirmSendToken.prototype.renderHeroAmount = function () { - const { token: { symbol } } = this.props + const { token: { symbol }, currentCurrency } = this.props const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -154,8 +154,8 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { return fiatAmount ? ( h('div.confirm-send-token__hero-amount-wrapper', [ - h('h3.flex-center.confirm-screen-send-amount', `$${fiatAmount}`), - h('h3.flex-center.confirm-screen-send-amount-currency', 'USD'), + h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`), + h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency), h('div.flex-center.confirm-memo-wrapper', [ h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), ]), @@ -173,14 +173,14 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { } ConfirmSendToken.prototype.renderGasFee = function () { - const { token: { symbol } } = this.props + const { token: { symbol }, currentCurrency } = this.props const { fiat: fiatGas, token: tokenGas, eth: ethGas } = this.getGasFee() return ( h('section.flex-row.flex-center.confirm-screen-row', [ h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `$${fiatGas} USD`), + h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`), h( 'div.confirm-screen-row-detail', @@ -192,7 +192,7 @@ ConfirmSendToken.prototype.renderGasFee = function () { } ConfirmSendToken.prototype.renderTotalPlusGas = function () { - const { token: { symbol } } = this.props + const { token: { symbol }, currentCurrency } = this.props const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const { fiat: fiatGas, token: tokenGas } = this.getGasFee() @@ -205,7 +205,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `$${fiatAmount + fiatGas} USD`), + h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency}`), h('div.confirm-screen-row-detail', `${tokenAmount + tokenGas} ${symbol}`), ]), ]) @@ -219,7 +219,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`), - h('div.confirm-screen-row-detail', `+ ${fiatGas} USD Gas`), + h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} Gas`), ]), ]) ) diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index 770fb1dfd..f4f6afb8f 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -36,7 +36,6 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), } @@ -58,8 +57,6 @@ PendingTx.prototype.componentWillMount = async function () { const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - this.props.setCurrentCurrencyToUSD() - if (!txParams.to) { return this.setState({ transactionType: TX_TYPES.DEPLOY_CONTRACT, -- cgit v1.2.3 From 89af385a352daf66ad1a6fb3bba75676fd3b9e7f Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 18 Oct 2017 15:38:53 -0230 Subject: Fix handling of arithmetic on token gas in confirm-send-token. --- ui/app/components/pending-tx/confirm-send-token.js | 49 +++++++++++++++------- 1 file changed, 33 insertions(+), 16 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 92bba8f62..de716a26a 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -11,12 +11,22 @@ const Identicon = require('../identicon') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') -const { conversionUtil } = require('../../conversion-util') +const { + conversionUtil, + multiplyCurrencies, + addCurrencies, +} = require('../../conversion-util') const MIN_GAS_PRICE_GWEI_BN = new BN(1) const GWEI_FACTOR = new BN(1e9) const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR) +const { + getSelectedTokenExchangeRate, + getTokenExchangeRate, + getSelectedAddress, +} = require('../../selectors') + module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken) function mapStateToProps (state, ownProps) { @@ -28,10 +38,8 @@ function mapStateToProps (state, ownProps) { identities, } = state.metamask const accounts = state.metamask.accounts - const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] - const tokenExchangeRates = state.metamask.tokenExchangeRates - const pair = `${symbol.toLowerCase()}_eth` - const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} + const selectedAddress = getSelectedAddress(state) + const tokenExchangeRate = getTokenExchangeRate(state, symbol) return { conversionRate, @@ -86,17 +94,14 @@ ConfirmSendToken.prototype.getGasFee = function () { const txParams = txMeta.txParams || {} const { decimals } = token - // Gas const gas = txParams.gas - const gasBn = hexToBn(gas) - - // Gas Price const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16) - const gasPriceBn = hexToBn(gasPrice) - const txFeeBn = gasBn.mul(gasPriceBn) - + const gasTotal = multiplyCurrencies(gas, gasPrice, { + multiplicandBase: 16, + multiplierBase: 16, + }) - const USD = conversionUtil(txFeeBn, { + const USD = conversionUtil(gasTotal, { fromNumericBase: 'BN', toNumericBase: 'dec', fromDenomination: 'WEI', @@ -105,7 +110,7 @@ ConfirmSendToken.prototype.getGasFee = function () { numberOfDecimals: 2, conversionRate, }) - const ETH = conversionUtil(txFeeBn, { + const ETH = conversionUtil(gasTotal, { fromNumericBase: 'BN', toNumericBase: 'dec', fromDenomination: 'WEI', @@ -114,12 +119,22 @@ ConfirmSendToken.prototype.getGasFee = function () { numberOfDecimals: 6, conversionRate, }) + const tokenGas = multiplyCurrencies(gas, gasPrice, { + toNumericBase: 'dec', + multiplicandBase: 16, + multiplierBase: 16, + toCurrency: 'BAT', + conversionRate: tokenExchangeRate, + invertConversionRate: true, + fromDenomination: 'WEI', + numberOfDecimals: decimals || 4, + }) return { fiat: +Number(USD).toFixed(2), eth: ETH, token: tokenExchangeRate - ? +(ETH * tokenExchangeRate).toFixed(decimals) + ? tokenGas : null, } } @@ -196,6 +211,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const { fiat: fiatGas, token: tokenGas } = this.getGasFee() + const tokenTotal = addCurrencies(tokenAmount, tokenGas || '0') + return fiatAmount && fiatGas ? ( h('section.flex-row.flex-center.confirm-screen-total-box ', [ @@ -206,7 +223,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `$${fiatAmount + fiatGas} USD`), - h('div.confirm-screen-row-detail', `${tokenAmount + tokenGas} ${symbol}`), + h('div.confirm-screen-row-detail', `${tokenTotal} ${symbol}`), ]), ]) ) -- cgit v1.2.3 From 7362fb8dfc5b8d9f3ae9a3399f9448ea5720cd43 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 18 Oct 2017 15:56:13 -0230 Subject: Identicon in send token show who you are sending to, not the token's identicon. --- ui/app/components/pending-tx/confirm-send-token.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index de716a26a..356da36c3 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -145,14 +145,14 @@ ConfirmSendToken.prototype.getData = function () { const { value } = params[0] || {} const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - + return { from: { address: txParams.from, name: identities[txParams.from].name, }, to: { - address: txParams.to, + address: value, name: identities[value] ? identities[value].name : 'New Recipient', }, memo: txParams.memo || '', @@ -290,7 +290,7 @@ ConfirmSendToken.prototype.render = function () { h( Identicon, { - address: txParams.to, + address: toAddress, diameter: 60, }, ), -- cgit v1.2.3 From 80025e278b6c02f87bcfce3b8d5443722f4f9e52 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 20 Oct 2017 18:13:55 -0230 Subject: Fixes regression in confirm-send-token --- ui/app/components/pending-tx/confirm-send-token.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 42b676954..6fb4ddf70 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -36,6 +36,7 @@ function mapStateToProps (state, ownProps) { const { conversionRate, identities, + currentCurrency, } = state.metamask const accounts = state.metamask.accounts const selectedAddress = getSelectedAddress(state) @@ -47,6 +48,7 @@ function mapStateToProps (state, ownProps) { selectedAddress, tokenExchangeRate, tokenData: tokenData || {}, + currentCurrency: currentCurrency.toUpperCase(), } } @@ -101,7 +103,7 @@ ConfirmSendToken.prototype.getGasFee = function () { multiplierBase: 16, }) - const FIAT = conversionUtil(txFeeBn, { + const FIAT = conversionUtil(gasTotal, { fromNumericBase: 'BN', toNumericBase: 'dec', fromDenomination: 'WEI', @@ -223,7 +225,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency}`), - h('div.confirm-screen-row-detail', `${tokenAmount + tokenGas} ${symbol}`), + h('div.confirm-screen-row-detail', `${tokenTotal} ${symbol}`), ]), ]) ) -- cgit v1.2.3 From 5eb3cf43bfab3728dde151bc84439993b1a93184 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Fri, 20 Oct 2017 16:18:25 -0700 Subject: Add resiliency to confirm-send-token --- ui/app/components/pending-tx/confirm-send-token.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 6fb4ddf70..a4c3d16e3 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -85,7 +85,9 @@ ConfirmSendToken.prototype.getAmount = function () { fiat: tokenExchangeRate ? +(sendTokenAmount * tokenExchangeRate * conversionRate).toFixed(2) : null, - token: +sendTokenAmount.toFixed(decimals), + token: typeof value === 'undefined' + ? 'Unknown' + : +sendTokenAmount.toFixed(decimals), } } @@ -213,8 +215,6 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const { fiat: fiatGas, token: tokenGas } = this.getGasFee() - const tokenTotal = addCurrencies(tokenAmount, tokenGas || '0') - return fiatAmount && fiatGas ? ( h('section.flex-row.flex-center.confirm-screen-total-box ', [ @@ -225,7 +225,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency}`), - h('div.confirm-screen-row-detail', `${tokenTotal} ${symbol}`), + h('div.confirm-screen-row-detail', `${addCurrencies(tokenAmount, tokenGas || '0')} ${symbol}`), ]), ]) ) @@ -321,7 +321,7 @@ ConfirmSendToken.prototype.render = function () { ]), ]), - h('section.flex-row.flex-center.confirm-screen-row', [ + toAddress && h('section.flex-row.flex-center.confirm-screen-row', [ h('span.confirm-screen-label.confirm-screen-section-column', [ 'To' ]), h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', toName), -- cgit v1.2.3 From 8f3b762461ada222f82089e686a61183dd167428 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Fri, 20 Oct 2017 18:26:18 -0700 Subject: Fix Conversions bugs; Fiat value bugs --- ui/app/components/pending-tx/confirm-deploy-contract.js | 4 +++- ui/app/components/pending-tx/confirm-send-ether.js | 2 +- 2 files changed, 4 insertions(+), 2 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index d19cec755..a0ba94045 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -195,14 +195,16 @@ ConfirmDeployContract.prototype.getGasFee = function () { eth: Number(ETH), } } + ConfirmDeployContract.prototype.renderGasFee = function () { + const { currentCurrency } = this.props const { fiat: fiatGas, eth: ethGas } = this.getGasFee() return ( h('section.flex-row.flex-center.confirm-screen-row', [ h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${fiatGas} FIAT`), + h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency.toUpperCase()}`), h( 'div.confirm-screen-row-detail', diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 51c36ba42..7162c7122 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -241,7 +241,7 @@ ConfirmSendEther.prototype.render = function () { // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, // ]), - h('h3.flex-center.confirm-screen-send-amount', [`$${amountInFIAT}`]), + h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]), h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]), h('div.flex-center.confirm-memo-wrapper', [ h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), -- cgit v1.2.3 From b3dad510b7119c6bd89afb0059d95a6684402538 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 20 Oct 2017 23:27:59 -0230 Subject: Improve precision in send and confirm. --- ui/app/components/pending-tx/confirm-send-token.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index a4c3d16e3..cc4c5f5f4 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -224,7 +224,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency}`), + h('div.confirm-screen-row-info', `${addCurrencies(fiatAmount, fiatGas)} ${currentCurrency}`), h('div.confirm-screen-row-detail', `${addCurrencies(tokenAmount, tokenGas || '0')} ${symbol}`), ]), ]) -- cgit v1.2.3 From e737a9565a6b78639b74511d026339c1b54bca1a Mon Sep 17 00:00:00 2001 From: Dan Date: Sun, 22 Oct 2017 17:44:03 -0230 Subject: Improve customize gas modal error handling --- ui/app/components/pending-tx/confirm-send-ether.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 7162c7122..64da630f6 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -50,7 +50,7 @@ ConfirmSendEther.prototype.getAmount = function () { const { conversionRate, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - console.log(`conversionRate, currentCurrency`, conversionRate, currentCurrency); + const FIAT = conversionUtil(txParams.value, { fromNumericBase: 'hex', toNumericBase: 'dec', -- cgit v1.2.3 From 7c10cda8a4f8423a95f4c64024b07572d76dc266 Mon Sep 17 00:00:00 2001 From: Chi Kei Chan Date: Wed, 25 Oct 2017 00:24:26 -0700 Subject: Fix alignment on right arrow of confirm tx screens --- ui/app/components/pending-tx/confirm-send-ether.js | 2 +- ui/app/components/pending-tx/confirm-send-token.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 64da630f6..2f178f179 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -194,7 +194,7 @@ ConfirmSendEther.prototype.render = function () { this.inputs = [] return ( - h('div.confirm-screen-container', { + h('div.confirm-screen-container.confirm-send-ether', { style: { minWidth: '355px' }, }, [ // Main Send token Card diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index cc4c5f5f4..abb7a0770 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -263,7 +263,7 @@ ConfirmSendToken.prototype.render = function () { this.inputs = [] return ( - h('div.confirm-screen-container', { + h('div.confirm-screen-container.confirm-send-token', { style: { minWidth: '355px' }, }, [ // Main Send token Card -- cgit v1.2.3 From 220da24f9ab4a57a10bc1fc3e249c511a98ecb46 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 26 Oct 2017 13:36:34 -0230 Subject: Change min gas price to 0.1 GWEI --- ui/app/components/pending-tx/confirm-deploy-contract.js | 6 ++---- ui/app/components/pending-tx/confirm-send-ether.js | 6 ++---- ui/app/components/pending-tx/confirm-send-token.js | 6 ++---- 3 files changed, 6 insertions(+), 12 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index a0ba94045..ae6c6ef7b 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -10,9 +10,7 @@ const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const { conversionUtil } = require('../../conversion-util') -const MIN_GAS_PRICE_GWEI_BN = new BN(1) -const GWEI_FACTOR = new BN(1e9) -const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR) +const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmDeployContract) @@ -166,7 +164,7 @@ ConfirmDeployContract.prototype.getGasFee = function () { const gasBn = hexToBn(gas) // Gas Price - const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16) + const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX const gasPriceBn = hexToBn(gasPrice) const txFeeBn = gasBn.mul(gasPriceBn) diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 2f178f179..d12bc499b 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -10,9 +10,7 @@ const BN = ethUtil.BN const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const { conversionUtil, addCurrencies } = require('../../conversion-util') -const MIN_GAS_PRICE_GWEI_BN = new BN(1) -const GWEI_FACTOR = new BN(1e9) -const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR) +const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendEther) @@ -93,7 +91,7 @@ ConfirmSendEther.prototype.getGasFee = function () { // const safeGasLimit = safeGasLimitBN.toString(10) // Gas Price - const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16) + const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX const gasPriceBn = hexToBn(gasPrice) const txFeeBn = gasBn.mul(gasPriceBn) diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index abb7a0770..19826f47c 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -17,9 +17,7 @@ const { addCurrencies, } = require('../../conversion-util') -const MIN_GAS_PRICE_GWEI_BN = new BN(1) -const GWEI_FACTOR = new BN(1e9) -const MIN_GAS_PRICE_BN = MIN_GAS_PRICE_GWEI_BN.mul(GWEI_FACTOR) +const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') const { getSelectedTokenExchangeRate, @@ -99,7 +97,7 @@ ConfirmSendToken.prototype.getGasFee = function () { const { decimals } = token const gas = txParams.gas - const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_BN.toString(16) + const gasPrice = txParams.gasPrice || MIN_GAS_PRICE_HEX const gasTotal = multiplyCurrencies(gas, gasPrice, { multiplicandBase: 16, multiplierBase: 16, -- cgit v1.2.3 From 5a94775b3fa22517a71232ebe229ee83e9debcf1 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 00:00:33 -0230 Subject: Lint fixes for NewUI-flat. --- ui/app/components/pending-tx/confirm-send-token.js | 4 ---- 1 file changed, 4 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 19826f47c..4a57553d7 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -10,7 +10,6 @@ const clone = require('clone') const Identicon = require('../identicon') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN -const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const { conversionUtil, multiplyCurrencies, @@ -20,7 +19,6 @@ const { const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') const { - getSelectedTokenExchangeRate, getTokenExchangeRate, getSelectedAddress, } = require('../../selectors') @@ -36,7 +34,6 @@ function mapStateToProps (state, ownProps) { identities, currentCurrency, } = state.metamask - const accounts = state.metamask.accounts const selectedAddress = getSelectedAddress(state) const tokenExchangeRate = getTokenExchangeRate(state, symbol) @@ -245,7 +242,6 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ConfirmSendToken.prototype.render = function () { const { backToAccountDetail, selectedAddress } = this.props const txMeta = this.gatherTxMeta() - const txParams = txMeta.txParams || {} const { from: { -- cgit v1.2.3 From 56e9f98bd05de8ae26f653d15eec4304f0c72155 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 2 Nov 2017 09:45:59 -0230 Subject: More lint fixes --- ui/app/components/pending-tx/confirm-send-token.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 4a57553d7..3b8ae7f7f 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -144,7 +144,7 @@ ConfirmSendToken.prototype.getData = function () { const { value } = params[0] || {} const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - + return { from: { address: txParams.from, -- cgit v1.2.3 From 67bdfe87e31e695f8c4beab1659a3a4b764ccf24 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 30 Oct 2017 15:18:50 -0230 Subject: Token balance in send state; validating sufficient tokens, validation updates on 'from' switching. --- ui/app/components/pending-tx/confirm-send-token.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 3b8ae7f7f..f14da38ef 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -15,6 +15,9 @@ const { multiplyCurrencies, addCurrencies, } = require('../../conversion-util') +const { + calcTokenAmount, +} = require('../../token-util') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -73,8 +76,7 @@ ConfirmSendToken.prototype.getAmount = function () { const { params = [] } = tokenData const { value } = params[1] || {} const { decimals } = token - const multiplier = Math.pow(10, Number(decimals || 0)) - const sendTokenAmount = Number(value / multiplier) + const sendTokenAmount = calcTokenAmount(value, decimals) return { fiat: tokenExchangeRate -- cgit v1.2.3 From 34ca7290c593d6fb27faa98a660c8c0bca7e1457 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 8 Nov 2017 13:14:48 -0330 Subject: Allow editing of send ether. --- ui/app/components/pending-tx/confirm-send-ether.js | 54 +++++++++++++++++++--- 1 file changed, 48 insertions(+), 6 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index d12bc499b..8b5801aec 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -19,6 +19,7 @@ function mapStateToProps (state) { conversionRate, identities, currentCurrency, + send, } = state.metamask const accounts = state.metamask.accounts const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] @@ -27,12 +28,30 @@ function mapStateToProps (state) { identities, selectedAddress, currentCurrency, + send, } } function mapDispatchToProps (dispatch) { return { - backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), + clearSend: () => dispatch(actions.clearSend()), + editTransaction: txMeta => { + const { id, txParams } = txMeta + const { + gas: gasLimit, + gasPrice, + from, + to, + value: amount + } = txParams + dispatch(actions.editTx(id)) + dispatch(actions.updateGasLimit(gasLimit)), + dispatch(actions.updateGasPrice(gasPrice)), + dispatch(actions.updateSendTo(to)), + dispatch(actions.updateSendAmount(amount)), + dispatch(actions.updateSendErrors({ to: null, amount: null })), + dispatch(actions.showSendPage()) + }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), } } @@ -157,7 +176,7 @@ ConfirmSendEther.prototype.getData = function () { } ConfirmSendEther.prototype.render = function () { - const { backToAccountDetail, selectedAddress, currentCurrency } = this.props + const { editTransaction, selectedAddress, currentCurrency, clearSend } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -199,8 +218,8 @@ ConfirmSendEther.prototype.render = function () { h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ h('button.confirm-screen-back-button', { - onClick: () => backToAccountDetail(selectedAddress), - }, 'BACK'), + onClick: () => editTransaction(txMeta), + }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), h('div.confirm-screen-header-tip'), ]), @@ -371,7 +390,10 @@ ConfirmSendEther.prototype.render = function () { }, [ // Cancel Button h('div.cancel.btn-light.confirm-screen-cancel-button', { - onClick: (event) => this.cancel(event, txMeta), + onClick: (event) => { + clearSend() + this.cancel(event, txMeta) + }, }, 'CANCEL'), // Accept Button @@ -419,7 +441,27 @@ ConfirmSendEther.prototype.getFormEl = function () { ConfirmSendEther.prototype.gatherTxMeta = function () { const props = this.props const state = this.state - const txData = clone(state.txData) || clone(props.txData) + let txData = clone(state.txData) || clone(props.txData) + + if (props.send.editingTransactionId) { + const { + send: { + memo, + amount: value, + gasLimit: gas, + gasPrice, + } + } = props + const { txParams: { from, to } } = txData + txData.txParams = { + from: ethUtil.addHexPrefix(from), + to: ethUtil.addHexPrefix(to), + memo: memo && ethUtil.addHexPrefix(memo), + value: ethUtil.addHexPrefix(value), + gas: ethUtil.addHexPrefix(gas), + gasPrice: ethUtil.addHexPrefix(gasPrice), + } + } // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData -- cgit v1.2.3 From 0a91671ff69957596abbcffb7d20c89f144d7a69 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 8 Nov 2017 15:48:27 -0330 Subject: Fix lint errors. --- ui/app/components/pending-tx/confirm-send-ether.js | 19 +++++++++---------- 1 file changed, 9 insertions(+), 10 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 8b5801aec..b4d955b80 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -40,16 +40,15 @@ function mapDispatchToProps (dispatch) { const { gas: gasLimit, gasPrice, - from, to, - value: amount + value: amount, } = txParams dispatch(actions.editTx(id)) - dispatch(actions.updateGasLimit(gasLimit)), - dispatch(actions.updateGasPrice(gasPrice)), - dispatch(actions.updateSendTo(to)), - dispatch(actions.updateSendAmount(amount)), - dispatch(actions.updateSendErrors({ to: null, amount: null })), + dispatch(actions.updateGasLimit(gasLimit)) + dispatch(actions.updateGasPrice(gasPrice)) + dispatch(actions.updateSendTo(to)) + dispatch(actions.updateSendAmount(amount)) + dispatch(actions.updateSendErrors({ to: null, amount: null })) dispatch(actions.showSendPage()) }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), @@ -176,7 +175,7 @@ ConfirmSendEther.prototype.getData = function () { } ConfirmSendEther.prototype.render = function () { - const { editTransaction, selectedAddress, currentCurrency, clearSend } = this.props + const { editTransaction, currentCurrency, clearSend } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -441,7 +440,7 @@ ConfirmSendEther.prototype.getFormEl = function () { ConfirmSendEther.prototype.gatherTxMeta = function () { const props = this.props const state = this.state - let txData = clone(state.txData) || clone(props.txData) + const txData = clone(state.txData) || clone(props.txData) if (props.send.editingTransactionId) { const { @@ -450,7 +449,7 @@ ConfirmSendEther.prototype.gatherTxMeta = function () { amount: value, gasLimit: gas, gasPrice, - } + }, } = props const { txParams: { from, to } } = txData txData.txParams = { -- cgit v1.2.3 From 4671f28476165fec43785ae23352c1e9a0776abc Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 9 Nov 2017 11:44:32 -0330 Subject: Allow editing of token transactions. --- ui/app/components/pending-tx/confirm-send-token.js | 95 ++++++++++++++++++++-- 1 file changed, 87 insertions(+), 8 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index f14da38ef..aab45f2a4 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -2,9 +2,10 @@ const Component = require('react').Component const { connect } = require('react-redux') const h = require('react-hyperscript') const inherits = require('util').inherits -const abi = require('human-standard-token-abi') +const ethAbi = require('ethereumjs-abi') +const tokenAbi = require('human-standard-token-abi') const abiDecoder = require('abi-decoder') -abiDecoder.addABI(abi) +abiDecoder.addABI(tokenAbi) const actions = require('../../actions') const clone = require('clone') const Identicon = require('../identicon') @@ -24,6 +25,7 @@ const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') const { getTokenExchangeRate, getSelectedAddress, + getSelectedTokenContract, } = require('../../selectors') module.exports = connect(mapStateToProps, mapDispatchToProps)(ConfirmSendToken) @@ -32,6 +34,7 @@ function mapStateToProps (state, ownProps) { const { token: { symbol }, txData } = ownProps const { txParams } = txData || {} const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) + const { conversionRate, identities, @@ -47,6 +50,8 @@ function mapStateToProps (state, ownProps) { tokenExchangeRate, tokenData: tokenData || {}, currentCurrency: currentCurrency.toUpperCase(), + send: state.metamask.send, + tokenContract: getSelectedTokenContract(state), } } @@ -57,6 +62,30 @@ function mapDispatchToProps (dispatch, ownProps) { backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)), + editTransaction: txMeta => { + const { token: { address } } = ownProps + const { txParams, id } = txMeta + const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) + const { params = [] } = tokenData + const { value } = params[1] || {} + const amount = conversionUtil(value, { + fromNumericBase: 'dec', + toNumericBase: 'hex', + }) + const { + gas: gasLimit, + gasPrice, + to, + } = txParams + dispatch(actions.editTx(id)) + dispatch(actions.updateGasLimit(gasLimit)) + dispatch(actions.updateGasPrice(gasPrice)) + dispatch(actions.updateSendTo(to)) + dispatch(actions.updateSendAmount(amount)) + dispatch(actions.updateSendErrors({ to: null, amount: null })) + dispatch(actions.setSelectedToken(address)) + dispatch(actions.showSendTokenPage()) + }, } } @@ -68,14 +97,33 @@ function ConfirmSendToken () { } ConfirmSendToken.prototype.componentWillMount = function () { + const { tokenContract, selectedAddress } = this.props + tokenContract && tokenContract + .balanceOf(selectedAddress) + .then(usersToken => { + }) this.props.updateTokenExchangeRate() } ConfirmSendToken.prototype.getAmount = function () { - const { conversionRate, tokenExchangeRate, token, tokenData } = this.props + const { + conversionRate, + tokenExchangeRate, + token, + tokenData, + send: { amount, editingTransactionId }, + } = this.props const { params = [] } = tokenData - const { value } = params[1] || {} + let { value } = params[1] || {} const { decimals } = token + + if (editingTransactionId) { + value = conversionUtil(amount, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + }) + } + const sendTokenAmount = calcTokenAmount(value, decimals) return { @@ -242,9 +290,8 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { } ConfirmSendToken.prototype.render = function () { - const { backToAccountDetail, selectedAddress } = this.props + const { editTransaction } = this.props const txMeta = this.gatherTxMeta() - const { from: { address: fromAddress, @@ -266,8 +313,8 @@ ConfirmSendToken.prototype.render = function () { h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ h('button.confirm-screen-back-button', { - onClick: () => backToAccountDetail(selectedAddress), - }, 'BACK'), + onClick: () => editTransaction(txMeta), + }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), h('div.confirm-screen-header-tip'), ]), @@ -389,6 +436,38 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) + if (props.send.editingTransactionId) { + const { + send: { + memo, + amount, + gasLimit: gas, + gasPrice, + }, + } = props + + const { txParams: { from, to } } = txData + + const tokenParams = { + from: ethUtil.addHexPrefix(from), + value: '0', + gas: ethUtil.addHexPrefix(gas), + gasPrice: ethUtil.addHexPrefix(gasPrice), + } + + const data = '0xa9059cbb' + Array.prototype.map.call( + ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]), + x => ('00' + x.toString(16)).slice(-2) + ).join('') + + txData.txParams = { + ...tokenParams, + to: ethUtil.addHexPrefix(to), + memo: memo && ethUtil.addHexPrefix(memo), + data, + } + } + // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData } -- cgit v1.2.3 From 9e3f921ba928a948c04b4156daa0a3f752ee2dde Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 10 Nov 2017 00:19:16 -0330 Subject: Create single action for updating all of send in redux state. --- ui/app/components/pending-tx/confirm-send-ether.js | 15 +++++++++------ ui/app/components/pending-tx/confirm-send-token.js | 15 +++++++++------ 2 files changed, 18 insertions(+), 12 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index b4d955b80..1264da153 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -43,12 +43,15 @@ function mapDispatchToProps (dispatch) { to, value: amount, } = txParams - dispatch(actions.editTx(id)) - dispatch(actions.updateGasLimit(gasLimit)) - dispatch(actions.updateGasPrice(gasPrice)) - dispatch(actions.updateSendTo(to)) - dispatch(actions.updateSendAmount(amount)) - dispatch(actions.updateSendErrors({ to: null, amount: null })) + dispatch(actions.updateSend({ + gasLimit, + gasPrice, + gasTotal: null, + to, + amount, + errors: { to: null, amount: null }, + editingTransactionId: id, + })) dispatch(actions.showSendPage()) }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index aab45f2a4..cc2df8299 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -77,13 +77,16 @@ function mapDispatchToProps (dispatch, ownProps) { gasPrice, to, } = txParams - dispatch(actions.editTx(id)) - dispatch(actions.updateGasLimit(gasLimit)) - dispatch(actions.updateGasPrice(gasPrice)) - dispatch(actions.updateSendTo(to)) - dispatch(actions.updateSendAmount(amount)) - dispatch(actions.updateSendErrors({ to: null, amount: null })) dispatch(actions.setSelectedToken(address)) + dispatch(actions.updateSend({ + gasLimit, + gasPrice, + gasTotal: null, + to, + amount, + errors: { to: null, amount: null }, + editingTransactionId: id, + })) dispatch(actions.showSendTokenPage()) }, } -- cgit v1.2.3 From 339eb7d1a687f141e822c745c568063783d44f15 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Wed, 13 Dec 2017 02:54:41 -0330 Subject: Fix edit to field bug. (#2738) --- ui/app/components/pending-tx/confirm-send-token.js | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index cc2df8299..727cd260b 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -67,15 +67,15 @@ function mapDispatchToProps (dispatch, ownProps) { const { txParams, id } = txMeta const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) const { params = [] } = tokenData - const { value } = params[1] || {} - const amount = conversionUtil(value, { + const { value: to } = params[0] || {} + const { value: tokenAmountInDec } = params[1] || {} + const tokenAmountInHex = conversionUtil(tokenAmountInDec, { fromNumericBase: 'dec', toNumericBase: 'hex', }) const { gas: gasLimit, gasPrice, - to, } = txParams dispatch(actions.setSelectedToken(address)) dispatch(actions.updateSend({ @@ -83,7 +83,7 @@ function mapDispatchToProps (dispatch, ownProps) { gasPrice, gasTotal: null, to, - amount, + amount: tokenAmountInHex, errors: { to: null, amount: null }, editingTransactionId: id, })) @@ -446,10 +446,11 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { amount, gasLimit: gas, gasPrice, + to, }, } = props - const { txParams: { from, to } } = txData + const { txParams: { from, to: tokenAddress } } = txData const tokenParams = { from: ethUtil.addHexPrefix(from), @@ -465,7 +466,7 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { txData.txParams = { ...tokenParams, - to: ethUtil.addHexPrefix(to), + to: ethUtil.addHexPrefix(tokenAddress), memo: memo && ethUtil.addHexPrefix(memo), data, } -- cgit v1.2.3 From 1f1fc2c49ecbb5c6a0a1d925d5c02cf48f795b2f Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 19 Dec 2017 11:16:11 -0330 Subject: Canceled, edited transactions show edited amount. --- ui/app/components/pending-tx/confirm-send-ether.js | 9 ++++++++- ui/app/components/pending-tx/confirm-send-token.js | 9 ++++++++- 2 files changed, 16 insertions(+), 2 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 1264da153..01195502e 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -55,6 +55,7 @@ function mapDispatchToProps (dispatch) { dispatch(actions.showSendPage()) }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), + updateAndCancelTx: txMeta => dispatch(actions.updateAndCancelTx(txMeta)), } } @@ -421,7 +422,13 @@ ConfirmSendEther.prototype.onSubmit = function (event) { ConfirmSendEther.prototype.cancel = function (event, txMeta) { event.preventDefault() - this.props.cancelTransaction(txMeta) + const { send, updateAndCancelTx, cancelTransaction } = this.props + + if (send.editingTransactionId) { + updateAndCancelTx(txMeta) + } else { + cancelTransaction(txMeta) + } } ConfirmSendEther.prototype.checkValidity = function () { diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 727cd260b..e6ce3f6e6 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -89,6 +89,7 @@ function mapDispatchToProps (dispatch, ownProps) { })) dispatch(actions.showSendTokenPage()) }, + updateAndCancelTx: txMeta => dispatch(actions.updateAndCancelTx(txMeta)), } } @@ -415,7 +416,13 @@ ConfirmSendToken.prototype.onSubmit = function (event) { ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() - this.props.cancelTransaction(txMeta) + const { send, updateAndCancelTx, cancelTransaction } = this.props + + if (send.editingTransactionId) { + updateAndCancelTx(txMeta) + } else { + cancelTransaction(txMeta) + } } ConfirmSendToken.prototype.checkValidity = function () { -- cgit v1.2.3 From bf4043c59bb67ea93599207d91cb7a4f4426e75f Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Dec 2017 13:47:16 -0330 Subject: Adds updateTransaction to background and used it to update after editing in send-v2. --- ui/app/components/pending-tx/confirm-send-ether.js | 29 ++------------- ui/app/components/pending-tx/confirm-send-token.js | 42 ++-------------------- 2 files changed, 4 insertions(+), 67 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 01195502e..566224864 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -55,7 +55,6 @@ function mapDispatchToProps (dispatch) { dispatch(actions.showSendPage()) }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), - updateAndCancelTx: txMeta => dispatch(actions.updateAndCancelTx(txMeta)), } } @@ -422,13 +421,9 @@ ConfirmSendEther.prototype.onSubmit = function (event) { ConfirmSendEther.prototype.cancel = function (event, txMeta) { event.preventDefault() - const { send, updateAndCancelTx, cancelTransaction } = this.props + const { cancelTransaction } = this.props - if (send.editingTransactionId) { - updateAndCancelTx(txMeta) - } else { - cancelTransaction(txMeta) - } + cancelTransaction(txMeta) } ConfirmSendEther.prototype.checkValidity = function () { @@ -452,26 +447,6 @@ ConfirmSendEther.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) - if (props.send.editingTransactionId) { - const { - send: { - memo, - amount: value, - gasLimit: gas, - gasPrice, - }, - } = props - const { txParams: { from, to } } = txData - txData.txParams = { - from: ethUtil.addHexPrefix(from), - to: ethUtil.addHexPrefix(to), - memo: memo && ethUtil.addHexPrefix(memo), - value: ethUtil.addHexPrefix(value), - gas: ethUtil.addHexPrefix(gas), - gasPrice: ethUtil.addHexPrefix(gasPrice), - } - } - // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData } diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index e6ce3f6e6..a07835911 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -89,7 +89,6 @@ function mapDispatchToProps (dispatch, ownProps) { })) dispatch(actions.showSendTokenPage()) }, - updateAndCancelTx: txMeta => dispatch(actions.updateAndCancelTx(txMeta)), } } @@ -416,13 +415,9 @@ ConfirmSendToken.prototype.onSubmit = function (event) { ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() - const { send, updateAndCancelTx, cancelTransaction } = this.props + const { send, cancelTransaction } = this.props - if (send.editingTransactionId) { - updateAndCancelTx(txMeta) - } else { - cancelTransaction(txMeta) - } + cancelTransaction(txMeta) } ConfirmSendToken.prototype.checkValidity = function () { @@ -446,39 +441,6 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) - if (props.send.editingTransactionId) { - const { - send: { - memo, - amount, - gasLimit: gas, - gasPrice, - to, - }, - } = props - - const { txParams: { from, to: tokenAddress } } = txData - - const tokenParams = { - from: ethUtil.addHexPrefix(from), - value: '0', - gas: ethUtil.addHexPrefix(gas), - gasPrice: ethUtil.addHexPrefix(gasPrice), - } - - const data = '0xa9059cbb' + Array.prototype.map.call( - ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]), - x => ('00' + x.toString(16)).slice(-2) - ).join('') - - txData.txParams = { - ...tokenParams, - to: ethUtil.addHexPrefix(tokenAddress), - memo: memo && ethUtil.addHexPrefix(memo), - data, - } - } - // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData } -- cgit v1.2.3 From 5fe3c5aae6756f225edd0f8646ac0a23c264a81c Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 20 Dec 2017 15:05:41 -0330 Subject: Lint fixes. --- ui/app/components/pending-tx/confirm-send-token.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index a07835911..aa4f29fb0 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -2,7 +2,6 @@ const Component = require('react').Component const { connect } = require('react-redux') const h = require('react-hyperscript') const inherits = require('util').inherits -const ethAbi = require('ethereumjs-abi') const tokenAbi = require('human-standard-token-abi') const abiDecoder = require('abi-decoder') abiDecoder.addABI(tokenAbi) @@ -415,7 +414,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) { ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() - const { send, cancelTransaction } = this.props + const { cancelTransaction } = this.props cancelTransaction(txMeta) } -- cgit v1.2.3 From 376e1365727a97344d70d627ae27e8e70830a17a Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Thu, 11 Jan 2018 16:30:07 -0800 Subject: Update styling for buttons, font weights --- ui/app/components/pending-tx/confirm-send-ether.js | 4 ++-- ui/app/components/pending-tx/confirm-send-token.js | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) (limited to 'ui/app/components/pending-tx') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 566224864..652300c94 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -219,7 +219,7 @@ ConfirmSendEther.prototype.render = function () { // Main Send token Card h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ - h('button.confirm-screen-back-button', { + h('button.btn-clear.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), @@ -422,7 +422,7 @@ ConfirmSendEther.prototype.onSubmit = function (event) { ConfirmSendEther.prototype.cancel = function (event, txMeta) { event.preventDefault() const { cancelTransaction } = this.props - + cancelTransaction(txMeta) } diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index aa4f29fb0..ad489c3e9 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -314,7 +314,7 @@ ConfirmSendToken.prototype.render = function () { // Main Send token Card h('div.confirm-screen-wrapper.flex-column.flex-grow', [ h('h3.flex-center.confirm-screen-header', [ - h('button.confirm-screen-back-button', { + h('button.btn-clear.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), }, 'EDIT'), h('div.confirm-screen-title', 'Confirm Transaction'), @@ -415,7 +415,7 @@ ConfirmSendToken.prototype.onSubmit = function (event) { ConfirmSendToken.prototype.cancel = function (event, txMeta) { event.preventDefault() const { cancelTransaction } = this.props - + cancelTransaction(txMeta) } -- cgit v1.2.3