From 6cee76b3e797dd302c1bf97d7799567a366b2004 Mon Sep 17 00:00:00 2001 From: Dan Date: Thu, 8 Mar 2018 16:12:25 -0330 Subject: Add html and css for responsive retry button. --- ui/app/components/tx-list-item.js | 9 +++++ ui/app/css/itcss/components/transaction-list.scss | 47 +++++++++++++++++++++++ ui/app/css/itcss/settings/variables.scss | 1 + 3 files changed, 57 insertions(+) (limited to 'ui') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 1a13070c8..574d10e14 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -240,6 +240,15 @@ TxListItem.prototype.render = function () { ]), ]), + + h('div.tx-list-item-retry-container', [ + + h('span.tx-list-item-retry-copy', 'Taking too long?'), + + h('span.tx-list-item-retry-link', 'Increase the gas on your transaction'), + + ]), + ]), // holding on icon from design ]) } diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index c3df493df..4545897e3 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -126,6 +126,53 @@ } } +.tx-list-item-retry-container { + background: #d1edff; + width: 100%; + border-radius: 4px; + font-size: 0.8em; + display: flex; + justify-content: center; + margin-left: 44px; + width: calc(100% - 44px); + + @media screen and (min-width: 576px) and (max-width: 679px) { + flex-flow: column; + align-items: center; + } + + @media screen and (min-width: 380px) and (max-width: 575px) { + flex-flow: row; + } + + @media screen and (max-width: 379px) { + flex-flow: column; + align-items: center; + } +} + +.tx-list-item-retry-copy { + font-family: Roboto; +} + +.tx-list-item-retry-link { + text-decoration: underline; + margin-left: 6px; + cursor: pointer; + + @media screen and (min-width: 576px) and (max-width: 679px) { + margin-left: 0px; + } + + @media screen and (min-width: 380px) and (max-width: 575px) { + margin-left: 6px; + } + + @media screen and (max-width: 379px) { + margin-left: 0px; + } +} + .tx-list-date { color: $dusty-gray; font-size: 12px; diff --git a/ui/app/css/itcss/settings/variables.scss b/ui/app/css/itcss/settings/variables.scss index 4c0972527..1b5f1a491 100644 --- a/ui/app/css/itcss/settings/variables.scss +++ b/ui/app/css/itcss/settings/variables.scss @@ -46,6 +46,7 @@ $manatee: #93949d; $spindle: #c7ddec; $mid-gray: #5b5d67; $cape-cod: #38393a; +$onahau: #d1edff; /* Z-Indicies -- cgit v1.2.3 From 5433d2fe3a3f48948449258b03ae431fe81b8cf2 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 9 Mar 2018 00:19:26 -0330 Subject: Retry transaction logic added to tx-list-item, confirm-send-ether, customize-gas-modal, and dependents. --- ui/app/actions.js | 4 +- ui/app/components/customize-gas-modal/index.js | 18 ++++++++- ui/app/components/pending-tx/confirm-send-ether.js | 20 ++++++++- ui/app/components/tx-list-item.js | 47 ++++++++++++++++++---- ui/app/components/tx-list.js | 13 +++--- ui/app/conversion-util.js | 13 ++++++ ui/app/reducers/metamask.js | 4 ++ ui/app/selectors.js | 5 +++ ui/app/send-v2.js | 5 +++ 9 files changed, 113 insertions(+), 16 deletions(-) (limited to 'ui') diff --git a/ui/app/actions.js b/ui/app/actions.js index 4f902a6a2..3e050c38c 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1228,8 +1228,10 @@ function retryTransaction (txId) { if (err) { return dispatch(actions.displayWarning(err.message)) } + const { selectedAddressTxList } = newState + const { id: newTxId } = selectedAddressTxList[selectedAddressTxList.length - 1] dispatch(actions.updateMetamaskState(newState)) - dispatch(actions.viewPendingTx(txId)) + dispatch(actions.viewPendingTx(newTxId)) }) } } diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 826d2cd4b..34a93d6c6 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -21,12 +21,14 @@ const { conversionUtil, multiplyCurrencies, conversionGreaterThan, + conversionMax, subtractCurrencies, } = require('../../conversion-util') const { getGasPrice, getGasLimit, + getForceGasMin, conversionRateSelector, getSendAmount, getSelectedToken, @@ -44,6 +46,7 @@ function mapStateToProps (state) { return { gasPrice: getGasPrice(state), gasLimit: getGasLimit(state), + forceGasMin: getForceGasMin(state), conversionRate, amount: getSendAmount(state), maxModeOn: getSendMaxModeState(state), @@ -217,7 +220,7 @@ CustomizeGasModal.prototype.convertAndSetGasPrice = function (newGasPrice) { } CustomizeGasModal.prototype.render = function () { - const { hideModal } = this.props + const { hideModal, forceGasMin } = this.props const { gasPrice, gasLimit, gasTotal, error, priceSigZeros, priceSigDec } = this.state let convertedGasPrice = conversionUtil(gasPrice, { @@ -229,6 +232,17 @@ CustomizeGasModal.prototype.render = function () { convertedGasPrice += convertedGasPrice.match(/[.]/) ? priceSigZeros : `${priceSigDec}${priceSigZeros}` + if (forceGasMin) { + const convertedMinPrice = conversionUtil(forceGasMin, { + fromNumericBase: 'hex', + toNumericBase: 'dec', + }) + convertedGasPrice = conversionMax( + { value: convertedMinPrice, fromNumericBase: 'dec' }, + { value: convertedGasPrice, fromNumericBase: 'dec' } + ) + } + const convertedGasLimit = conversionUtil(gasLimit, { fromNumericBase: 'hex', toNumericBase: 'dec', @@ -251,7 +265,7 @@ CustomizeGasModal.prototype.render = function () { h(GasModalCard, { value: convertedGasPrice, - min: MIN_GAS_PRICE_GWEI, + min: forceGasMin || MIN_GAS_PRICE_GWEI, // max: 1000, step: multiplyCurrencies(MIN_GAS_PRICE_GWEI, 10), onChange: value => this.convertAndSetGasPrice(value), diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 3f8d9c28f..a6e00d922 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -36,13 +36,29 @@ function mapDispatchToProps (dispatch) { return { clearSend: () => dispatch(actions.clearSend()), editTransaction: txMeta => { - const { id, txParams } = txMeta + const { id, txParams, lastGasPrice } = txMeta const { gas: gasLimit, gasPrice, to, value: amount, } = txParams + + let forceGasMin + let nonce + if (lastGasPrice) { + const stripped = ethUtil.stripHexPrefix(lastGasPrice) + forceGasMin = ethUtil.addHexPrefix(addCurrencies(stripped, MIN_GAS_PRICE_HEX, { + aBase: 16, + bBase: 16, + toNumericBase: 'hex', + fromDenomination: 'WEI', + toDenomination: 'GWEI', + })) + + nonce = txParams.nonce + } + dispatch(actions.updateSend({ gasLimit, gasPrice, @@ -51,6 +67,8 @@ function mapDispatchToProps (dispatch) { amount, errors: { to: null, amount: null }, editingTransactionId: id, + forceGasMin, + nonce, })) dispatch(actions.showSendPage()) }, diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 574d10e14..123f723be 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -9,18 +9,26 @@ abiDecoder.addABI(abi) const Identicon = require('./identicon') const contractMap = require('eth-contract-metadata') +const actions = require('../actions') const { conversionUtil, multiplyCurrencies } = require('../conversion-util') const { calcTokenAmount } = require('../token-util') const { getCurrentCurrency } = require('../selectors') -module.exports = connect(mapStateToProps)(TxListItem) +module.exports = connect(mapStateToProps, mapDispatchToProps)(TxListItem) function mapStateToProps (state) { return { tokens: state.metamask.tokens, currentCurrency: getCurrentCurrency(state), tokenExchangeRates: state.metamask.tokenExchangeRates, + selectedAddressTxList: state.metamask.selectedAddressTxList, + } +} + +function mapDispatchToProps (dispatch) { + return { + retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)), } } @@ -167,12 +175,32 @@ TxListItem.prototype.getSendTokenTotal = async function () { } } +TxListItem.prototype.showRetryButton = function () { + const { + transactionStatus, + transactionTime, + selectedAddressTxList, + transactionId, + txParams, + } = this.props + const currentNonce = txParams.nonce + const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) + const isLastWithNonce = currentNonceTxs[currentNonceTxs.length - 1].id === transactionId + + return transactionStatus === 'submitted' && isLastWithNonce && Date.now() - transactionTime > 5000 +} + +TxListItem.prototype.resubmit = function () { + const { transactionId } = this.props + this.props.retryTransaction(transactionId) +} + TxListItem.prototype.render = function () { const { transactionStatus, transactionAmount, onClick, - transActionId, + transactionId, dateString, address, className, @@ -181,8 +209,8 @@ TxListItem.prototype.render = function () { const showFiatTotal = transactionAmount !== '0x0' && fiatTotal return h(`div${className || ''}`, { - key: transActionId, - onClick: () => onClick && onClick(transActionId), + key: transactionId, + onClick: () => onClick && onClick(transactionId), }, [ h(`div.flex-column.tx-list-item-wrapper`, {}, [ @@ -241,12 +269,17 @@ TxListItem.prototype.render = function () { ]), ]), - h('div.tx-list-item-retry-container', [ + this.showRetryButton() && h('div.tx-list-item-retry-container', [ h('span.tx-list-item-retry-copy', 'Taking too long?'), - h('span.tx-list-item-retry-link', 'Increase the gas on your transaction'), - + h('span.tx-list-item-retry-link', { + onClick: (event) => { + event.stopPropagation() + this.resubmit() + }, + }, 'Increase the gas on your transaction'), + ]), ]), // holding on icon from design diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 1729e6a6f..30f816d58 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -74,9 +74,10 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa address: transaction.txParams.to, transactionStatus: transaction.status, transactionAmount: transaction.txParams.value, - transActionId: transaction.id, + transactionId: transaction.id, transactionHash: transaction.hash, transactionNetworkId: transaction.metamaskNetworkId, + transactionTime: transaction.time, } const { @@ -84,29 +85,31 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionStatus, transactionAmount, dateString, - transActionId, + transactionId, transactionHash, transactionNetworkId, + transactionTime, } = props const { showConfTxPage } = this.props const opts = { - key: transActionId || transactionHash, + key: transactionId || transactionHash, txParams: transaction.txParams, transactionStatus, - transActionId, + transactionId, dateString, address, transactionAmount, transactionHash, conversionRate, tokenInfoGetter: this.tokenInfoGetter, + transactionTime, } const isUnapproved = transactionStatus === 'unapproved' if (isUnapproved) { - opts.onClick = () => showConfTxPage({id: transActionId}) + opts.onClick = () => showConfTxPage({id: transactionId}) opts.transactionStatus = 'Not Started' } else if (transactionHash) { opts.onClick = () => this.view(transactionHash, transactionNetworkId) diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js index ee42ebea1..d484ed16d 100644 --- a/ui/app/conversion-util.js +++ b/ui/app/conversion-util.js @@ -187,6 +187,18 @@ const conversionGreaterThan = ( return firstValue.gt(secondValue) } +const conversionMax = ( + { ...firstProps }, + { ...secondProps }, +) => { + const firstIsGreater = conversionGreaterThan( + { ...firstProps }, + { ...secondProps } + ) + + return firstIsGreater ? firstProps.value : secondProps.value +} + const conversionGTE = ( { ...firstProps }, { ...secondProps }, @@ -216,6 +228,7 @@ module.exports = { conversionGreaterThan, conversionGTE, conversionLTE, + conversionMax, toNegative, subtractCurrencies, } diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index cddcd0c1f..999939b89 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -38,6 +38,8 @@ function reduceMetamask (state, action) { errors: {}, maxModeOn: false, editingTransactionId: null, + forceGasMin: null, + nonce: null, }, coinOptions: {}, useBlockie: false, @@ -298,6 +300,8 @@ function reduceMetamask (state, action) { memo: '', errors: {}, editingTransactionId: null, + forceGasMin: null, + nonce: null, }, }) diff --git a/ui/app/selectors.js b/ui/app/selectors.js index 5d2635775..d37c26f7e 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -18,6 +18,7 @@ const selectors = { getCurrentAccountWithSendEtherInfo, getGasPrice, getGasLimit, + getForceGasMin, getAddressBook, getSendFrom, getCurrentCurrency, @@ -130,6 +131,10 @@ function getGasLimit (state) { return state.metamask.send.gasLimit } +function getForceGasMin (state) { + return state.metamask.send.forceGasMin +} + function getSendFrom (state) { return state.metamask.send.from } diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 1d67150e3..edb6bc41d 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -543,6 +543,7 @@ SendTransactionScreen.prototype.getEditedTx = function () { selectedToken, editingTransactionId, unapprovedTxs, + nonce, } = this.props const editingTx = { @@ -554,6 +555,10 @@ SendTransactionScreen.prototype.getEditedTx = function () { }, } + if (nonce) { + editingTx.txParams.nonce = ethUtil.addHexPrefix(nonce) + } + if (selectedToken) { const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call( ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]), -- cgit v1.2.3 From 2d6b378bf8f8f0b23ef54b48118b61fb6c7deee1 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 9 Mar 2018 02:03:36 -0330 Subject: Adds inline opening of gas customization to confirm-send-ether screen. --- ui/app/components/pending-tx/confirm-send-ether.js | 48 ++++++++++++++++++---- ui/app/components/send/gas-fee-display-v2.js | 4 +- ui/app/css/itcss/components/send.scss | 21 ++++++++++ 3 files changed, 63 insertions(+), 10 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index a6e00d922..422b1c6c1 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -9,6 +9,7 @@ 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 GasFeeDisplay = require('../send/gas-fee-display-v2') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -73,6 +74,18 @@ function mapDispatchToProps (dispatch) { dispatch(actions.showSendPage()) }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), + showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => { + const { id, txParams } = txMeta + const { gas: txGasLimit, gasPrice: txGasPrice } = txParams + + dispatch(actions.updateSend({ + gasLimit: sendGasLimit || txGasLimit, + gasPrice: sendGasPrice || txGasPrice, + editingTransactionId: id, + gasTotal: sendGasTotal, + })) + dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) + }, } } @@ -157,6 +170,7 @@ ConfirmSendEther.prototype.getGasFee = function () { return { FIAT, ETH, + gasFeeInHex: txFeeBn.toString(16), } } @@ -164,7 +178,7 @@ ConfirmSendEther.prototype.getData = function () { const { identities } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH } = this.getGasFee() + const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH, gasFeeInHex } = this.getGasFee() const { FIAT: amountInFIAT, ETH: amountInETH } = this.getAmount() const totalInFIAT = addCurrencies(gasFeeInFIAT, amountInFIAT, { @@ -192,11 +206,20 @@ ConfirmSendEther.prototype.getData = function () { amountInETH, totalInFIAT, totalInETH, + gasFeeInHex, } } ConfirmSendEther.prototype.render = function () { - const { editTransaction, currentCurrency, clearSend } = this.props + const { + editTransaction, + currentCurrency, + clearSend, + conversionRate, + currentCurrency: convertedCurrency, + showCustomizeGasModal, + send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice }, + } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -212,11 +235,17 @@ ConfirmSendEther.prototype.render = function () { memo, gasFeeInFIAT, gasFeeInETH, + gasFeeInHex, amountInFIAT, totalInFIAT, totalInETH, } = this.getData() + const title = txMeta.lastGasPrice ? 'Overwrite Transaction' : 'Confirm' + const subtitle = txMeta.lastGasPrice + ? 'Increase your gas fee to attempt to overwrite and speed up your transaction' + : 'Please review your transaction.' + // This is from the latest master // It handles some of the errors that we are not currently handling // Leaving as comments fo reference @@ -235,11 +264,11 @@ ConfirmSendEther.prototype.render = function () { // Main Send token Card h('div.page-container', [ h('div.page-container__header', [ - h('button.confirm-screen-back-button', { + !txMeta.lastGasPrice && h('button.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), }, 'Edit'), - h('div.page-container__title', 'Confirm'), - h('div.page-container__subtitle', `Please review your transaction.`), + h('div.page-container__title', title), + h('div.page-container__subtitle', subtitle), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.confirm-screen-account-wrapper', [ @@ -302,9 +331,12 @@ 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', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`), - - h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`), + h(GasFeeDisplay, { + gasTotal: gasTotal || gasFeeInHex, + conversionRate, + convertedCurrency, + onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal), + }), ]), ]), diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js index 0c4c3f7a9..da1bdd05e 100644 --- a/ui/app/components/send/gas-fee-display-v2.js +++ b/ui/app/components/send/gas-fee-display-v2.js @@ -32,11 +32,11 @@ GasFeeDisplay.prototype.render = function () { }) : h('div.currency-display', 'Loading...'), - h('button.send-v2__sliders-icon-container', { + h('button.sliders-icon-container', { onClick, disabled: !gasTotal, }, [ - h('i.fa.fa-sliders.send-v2__sliders-icon'), + h('i.fa.fa-sliders.sliders-icon'), ]), ]) diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index bb17e53cd..1a058b305 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -660,6 +660,7 @@ &__gas-fee-display { width: 100%; + position: relative; } &__sliders-icon-container { @@ -885,3 +886,23 @@ } } } + +.sliders-icon-container { + display: flex; + align-items: center; + justify-content: center; + height: 24px; + width: 24px; + border: 1px solid $curious-blue; + border-radius: 4px; + background-color: $white; + position: absolute; + right: 15px; + top: 14px; + cursor: pointer; + font-size: 1em; +} + +.sliders-icon { + color: $curious-blue; +} \ No newline at end of file -- cgit v1.2.3 From c1ff927fa0e129a828d3345b21723300d5e73ef1 Mon Sep 17 00:00:00 2001 From: Dan Date: Fri, 9 Mar 2018 10:00:37 -0330 Subject: Lint fixes. --- ui/app/actions.js | 2 +- ui/app/components/pending-tx/confirm-send-ether.js | 2 -- 2 files changed, 1 insertion(+), 3 deletions(-) (limited to 'ui') diff --git a/ui/app/actions.js b/ui/app/actions.js index 200946753..d6f509590 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -1271,7 +1271,7 @@ function retryTransaction (txId) { return dispatch(actions.displayWarning(err.message)) } const { selectedAddressTxList } = newState - const { id: newTxId } = selectedAddressTxList[selectedAddressTxList.length - 1] + const { id: newTxId } = selectedAddressTxList[selectedAddressTxList.length - 1] dispatch(actions.updateMetamaskState(newState)) dispatch(actions.viewPendingTx(newTxId)) }) diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 422b1c6c1..ec61d66b4 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -233,8 +233,6 @@ ConfirmSendEther.prototype.render = function () { name: toName, }, memo, - gasFeeInFIAT, - gasFeeInETH, gasFeeInHex, amountInFIAT, totalInFIAT, -- cgit v1.2.3 From f805a2eb735ea2ae93e91df0d35c6856987fa734 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 02:31:35 -0230 Subject: Fix gas calculation and nonce / forceGasMin state setting errors; retry button shows on correct tx. --- ui/app/components/customize-gas-modal/index.js | 6 +-- ui/app/components/pending-tx/confirm-send-ether.js | 52 +++++++++++++--------- ui/app/components/tx-list-item.js | 6 ++- 3 files changed, 39 insertions(+), 25 deletions(-) (limited to 'ui') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 34a93d6c6..2bac57253 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -117,9 +117,9 @@ CustomizeGasModal.prototype.save = function (gasPrice, gasLimit, gasTotal) { updateSendAmount(maxAmount) } - updateGasPrice(gasPrice) - updateGasLimit(gasLimit) - updateGasTotal(gasTotal) + updateGasPrice(ethUtil.addHexPrefix(gasPrice)) + updateGasLimit(ethUtil.addHexPrefix(gasLimit)) + updateGasTotal(ethUtil.addHexPrefix(gasTotal)) hideModal() } diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index ec61d66b4..b1e3a0374 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -8,7 +8,11 @@ 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 { + conversionUtil, + addCurrencies, + multiplyCurrencies +} = require('../../conversion-util') const GasFeeDisplay = require('../send/gas-fee-display-v2') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -37,7 +41,7 @@ function mapDispatchToProps (dispatch) { return { clearSend: () => dispatch(actions.clearSend()), editTransaction: txMeta => { - const { id, txParams, lastGasPrice } = txMeta + const { id, txParams } = txMeta const { gas: gasLimit, gasPrice, @@ -45,21 +49,6 @@ function mapDispatchToProps (dispatch) { value: amount, } = txParams - let forceGasMin - let nonce - if (lastGasPrice) { - const stripped = ethUtil.stripHexPrefix(lastGasPrice) - forceGasMin = ethUtil.addHexPrefix(addCurrencies(stripped, MIN_GAS_PRICE_HEX, { - aBase: 16, - bBase: 16, - toNumericBase: 'hex', - fromDenomination: 'WEI', - toDenomination: 'GWEI', - })) - - nonce = txParams.nonce - } - dispatch(actions.updateSend({ gasLimit, gasPrice, @@ -68,21 +57,36 @@ function mapDispatchToProps (dispatch) { amount, errors: { to: null, amount: null }, editingTransactionId: id, - forceGasMin, - nonce, })) dispatch(actions.showSendPage()) }, cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => { - const { id, txParams } = txMeta + const { id, txParams, lastGasPrice } = txMeta const { gas: txGasLimit, gasPrice: txGasPrice } = txParams + let forceGasMin + let nonce + if (lastGasPrice) { + const stripped = ethUtil.stripHexPrefix(lastGasPrice) + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, { + multiplicandBase: 16, + multiplierBase: 10, + toNumericBase: 'hex', + fromDenomination: 'WEI', + toDenomination: 'GWEI', + })) + + nonce = txParams.nonce + } + dispatch(actions.updateSend({ gasLimit: sendGasLimit || txGasLimit, gasPrice: sendGasPrice || txGasPrice, editingTransactionId: id, gasTotal: sendGasTotal, + forceGasMin, + nonce, })) dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) }, @@ -493,6 +497,14 @@ ConfirmSendEther.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) + if (txData.lastGasPrice) { + const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send + const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams + + txData.txParams.gasPrice = sendGasPrice || txGasPrice + txData.txParams.gas = sendGasLimit || txGasLimit + } + // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData } diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 123f723be..f7d53709f 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -185,9 +185,11 @@ TxListItem.prototype.showRetryButton = function () { } = this.props const currentNonce = txParams.nonce const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) - const isLastWithNonce = currentNonceTxs[currentNonceTxs.length - 1].id === transactionId + const currentStatusNonceTx = currentNonceTxs.filter(tx => + tx.status !== 'rejected' && tx.status !== 'failed') + const isLastPassingWithNonce = currentStatusNonceTx[currentStatusNonceTx.length - 1].id === transactionId - return transactionStatus === 'submitted' && isLastWithNonce && Date.now() - transactionTime > 5000 + return transactionStatus === 'submitted' && isLastPassingWithNonce && Date.now() - transactionTime > 30000 } TxListItem.prototype.resubmit = function () { -- cgit v1.2.3 From e6d1ce56e7b792957f7b5c3249ecf013752b87ed Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 03:11:45 -0230 Subject: Improve phrasing of copy. --- ui/app/components/pending-tx/confirm-send-ether.js | 2 +- ui/app/components/tx-list-item.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index b1e3a0374..8788a77f8 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -243,7 +243,7 @@ ConfirmSendEther.prototype.render = function () { totalInETH, } = this.getData() - const title = txMeta.lastGasPrice ? 'Overwrite Transaction' : 'Confirm' + const title = txMeta.lastGasPrice ? 'Reprice Transaction' : 'Confirm' const subtitle = txMeta.lastGasPrice ? 'Increase your gas fee to attempt to overwrite and speed up your transaction' : 'Please review your transaction.' diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index f7d53709f..62426252f 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -280,7 +280,7 @@ TxListItem.prototype.render = function () { event.stopPropagation() this.resubmit() }, - }, 'Increase the gas on your transaction'), + }, 'Increase the gas price on your transaction'), ]), -- cgit v1.2.3 From 179066fe6ba3eca002454981c5ef56df7bb142ab Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 03:26:37 -0230 Subject: Set txMeta.time to reflect time of tx approval. --- ui/app/components/pending-tx/confirm-send-ether.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 8788a77f8..899c2617c 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -457,7 +457,7 @@ ConfirmSendEther.prototype.render = function () { ConfirmSendEther.prototype.onSubmit = function (event) { event.preventDefault() - const txMeta = this.gatherTxMeta() + const txMeta = this.gatherTxMeta({ time: (new Date()).getTime() }) const valid = this.checkValidity() this.setState({ valid, submitting: true }) @@ -492,7 +492,7 @@ ConfirmSendEther.prototype.getFormEl = function () { } // After a customizable state value has been updated, -ConfirmSendEther.prototype.gatherTxMeta = function () { +ConfirmSendEther.prototype.gatherTxMeta = function (opts) { const props = this.props const state = this.state const txData = clone(state.txData) || clone(props.txData) @@ -506,7 +506,7 @@ ConfirmSendEther.prototype.gatherTxMeta = function () { } // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) - return txData + return Object.assign(txData, opts) } ConfirmSendEther.prototype.verifyGasParams = function () { -- cgit v1.2.3 From d6e4d2e80d05f64bb543e524c6288b8b7c33e4c1 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 21:09:04 -0230 Subject: Use new submittedTime field to correctly show retry button in old and new ui. --- ui/app/components/pending-tx/confirm-send-ether.js | 2 +- ui/app/components/tx-list-item.js | 10 +++++----- ui/app/components/tx-list.js | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 899c2617c..8fe58482b 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -11,7 +11,7 @@ const hexToBn = require('../../../../app/scripts/lib/hex-to-bn') const { conversionUtil, addCurrencies, - multiplyCurrencies + multiplyCurrencies, } = require('../../conversion-util') const GasFeeDisplay = require('../send/gas-fee-display-v2') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 62426252f..941fcb69c 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -178,18 +178,18 @@ TxListItem.prototype.getSendTokenTotal = async function () { TxListItem.prototype.showRetryButton = function () { const { transactionStatus, - transactionTime, + transactionSubmittedTime, selectedAddressTxList, transactionId, txParams, } = this.props const currentNonce = txParams.nonce const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) - const currentStatusNonceTx = currentNonceTxs.filter(tx => - tx.status !== 'rejected' && tx.status !== 'failed') - const isLastPassingWithNonce = currentStatusNonceTx[currentStatusNonceTx.length - 1].id === transactionId + const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => transactionStatus === 'submitted') + const isLastSubmittedTxWithCurrentNonce = + currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1].id === transactionId - return transactionStatus === 'submitted' && isLastPassingWithNonce && Date.now() - transactionTime > 30000 + return isLastSubmittedTxWithCurrentNonce && Date.now() - transactionSubmittedTime > 30000 } TxListItem.prototype.resubmit = function () { diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 30f816d58..add70a266 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -77,7 +77,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionId: transaction.id, transactionHash: transaction.hash, transactionNetworkId: transaction.metamaskNetworkId, - transactionTime: transaction.time, + transactionSubmittedTime: transaction.transactionSubmittedTime, } const { @@ -88,7 +88,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionId, transactionHash, transactionNetworkId, - transactionTime, + transactionSubmittedTime, } = props const { showConfTxPage } = this.props @@ -103,7 +103,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionHash, conversionRate, tokenInfoGetter: this.tokenInfoGetter, - transactionTime, + transactionSubmittedTime, } const isUnapproved = transactionStatus === 'unapproved' -- cgit v1.2.3 From e293b6349c522171db26c57e718c5213aa6d5cb3 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 21:11:50 -0230 Subject: Styling for dropped. --- ui/app/components/tx-list-item.js | 1 + ui/app/css/itcss/components/transaction-list.scss | 4 ++++ 2 files changed, 5 insertions(+) (limited to 'ui') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 941fcb69c..d2fc57b13 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -253,6 +253,7 @@ TxListItem.prototype.render = function () { className: classnames('tx-list-status', { 'tx-list-status--rejected': transactionStatus === 'rejected', 'tx-list-status--failed': transactionStatus === 'failed', + 'tx-list-status--dropped': transactionStatus === 'dropped', }), }, transactionStatus, diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index 4545897e3..df7d80e2e 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -236,6 +236,10 @@ .tx-list-status--failed { color: $monzo; } + + .tx-list-status--dropped { + opacity: 0.5; + } } .tx-list-item { -- cgit v1.2.3 From 8c7988978f05fa57bba892efb42ae0036ce25771 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 21:32:22 -0230 Subject: Undefined check in showRetryButton --- ui/app/components/tx-list-item.js | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'ui') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index d2fc57b13..453f7e95c 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -186,10 +186,11 @@ TxListItem.prototype.showRetryButton = function () { const currentNonce = txParams.nonce const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => transactionStatus === 'submitted') - const isLastSubmittedTxWithCurrentNonce = - currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1].id === transactionId + const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1] + const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce + && lastSubmittedTxWithCurrentNonce.id === transactionId - return isLastSubmittedTxWithCurrentNonce && Date.now() - transactionSubmittedTime > 30000 + return currentTxIsLatestWithNonce && Date.now() - submittedTime > 30000 } TxListItem.prototype.resubmit = function () { -- cgit v1.2.3 From 46ded45b8186c0b338f6cff811cd89c48ef1a5ab Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 21:38:08 -0230 Subject: Use correct var name in new-ui showRetryButton --- ui/app/components/tx-list-item.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 453f7e95c..ebf5db19f 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -190,7 +190,7 @@ TxListItem.prototype.showRetryButton = function () { const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce && lastSubmittedTxWithCurrentNonce.id === transactionId - return currentTxIsLatestWithNonce && Date.now() - submittedTime > 30000 + return currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000 } TxListItem.prototype.resubmit = function () { -- cgit v1.2.3 From c52253bb0eb8ab1c7c7e9c0e7002d5ada42d53d6 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 21:57:23 -0230 Subject: Use correct name for submittedTime field in tx-list.js --- ui/app/components/tx-list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index add70a266..782de0266 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -77,7 +77,7 @@ TxList.prototype.renderTransactionListItem = function (transaction, conversionRa transactionId: transaction.id, transactionHash: transaction.hash, transactionNetworkId: transaction.metamaskNetworkId, - transactionSubmittedTime: transaction.transactionSubmittedTime, + transactionSubmittedTime: transaction.submittedTime, } const { -- cgit v1.2.3 From 0d33aed20e3f3eea68e7d0cb41fbfb0d80415000 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 23:29:47 -0230 Subject: Fix tx-list-item submitted check. --- ui/app/components/tx-list-item.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index ebf5db19f..b7f7c5ab4 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -185,7 +185,7 @@ TxListItem.prototype.showRetryButton = function () { } = this.props const currentNonce = txParams.nonce const currentNonceTxs = selectedAddressTxList.filter(tx => tx.txParams.nonce === currentNonce) - const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => transactionStatus === 'submitted') + const currentNonceSubmittedTxs = currentNonceTxs.filter(tx => tx.status === 'submitted') const lastSubmittedTxWithCurrentNonce = currentNonceSubmittedTxs[currentNonceSubmittedTxs.length - 1] const currentTxIsLatestWithNonce = lastSubmittedTxWithCurrentNonce && lastSubmittedTxWithCurrentNonce.id === transactionId -- cgit v1.2.3 From e94a14ef8aee8a80a4d21ed8cb1d5b680296eb0b Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 23:44:05 -0230 Subject: Make token confirmations compatible. --- ui/app/components/pending-tx/confirm-send-token.js | 85 +++++++++++++++++++--- ui/app/components/tx-list-item.js | 17 ++++- 2 files changed, 88 insertions(+), 14 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index e4b0c186a..4ce6a7bc3 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -8,6 +8,7 @@ abiDecoder.addABI(tokenAbi) const actions = require('../../actions') const clone = require('clone') const Identicon = require('../identicon') +const GasFeeDisplay = require('../send/gas-fee-display-v2.js') const ethUtil = require('ethereumjs-util') const BN = ethUtil.BN const { @@ -88,6 +89,42 @@ function mapDispatchToProps (dispatch, ownProps) { })) dispatch(actions.showSendTokenPage()) }, + showCustomizeGasModal: (txMeta, sendGasLimit, sendGasPrice, sendGasTotal) => { + const { id, txParams, lastGasPrice } = txMeta + const { gas: txGasLimit, gasPrice: txGasPrice } = txParams + const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) + const { params = [] } = tokenData + const { value: to } = params[0] || {} + const { value: tokenAmountInDec } = params[1] || {} + const tokenAmountInHex = conversionUtil(tokenAmountInDec, { + fromNumericBase: 'dec', + toNumericBase: 'hex', + }) + + let forceGasMin + let nonce + if (lastGasPrice) { + const stripped = ethUtil.stripHexPrefix(lastGasPrice) + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, { + multiplicandBase: 16, + multiplierBase: 10, + toNumericBase: 'hex', + fromDenomination: 'WEI', + toDenomination: 'GWEI', + })) + } + + dispatch(actions.updateSend({ + gasLimit: sendGasLimit || txGasLimit, + gasPrice: sendGasPrice || txGasPrice, + editingTransactionId: id, + gasTotal: sendGasTotal, + to, + amount: tokenAmountInHex, + forceGasMin, + })) + dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) + }, } } @@ -187,6 +224,7 @@ ConfirmSendToken.prototype.getGasFee = function () { token: tokenExchangeRate ? tokenGas : null, + gasFeeInHex: gasTotal.toString(16), } } @@ -239,19 +277,31 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { } ConfirmSendToken.prototype.renderGasFee = function () { - const { token: { symbol }, currentCurrency } = this.props - const { fiat: fiatGas, token: tokenGas, eth: ethGas } = this.getGasFee() + const { + token: { symbol }, + currentCurrency: convertedCurrency, + conversionRate, + send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice }, + showCustomizeGasModal, + } = this.props + const txMeta = this.gatherTxMeta() + const { + fiat: fiatGas, + token: tokenGas, + eth: ethGas, + gasFeeInHex + } = 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} ${currentCurrency}`), - - h( - 'div.confirm-screen-row-detail', - tokenGas ? `${tokenGas} ${symbol}` : `${ethGas} ETH` - ), + h(GasFeeDisplay, { + gasTotal: gasTotal || gasFeeInHex, + conversionRate, + convertedCurrency, + onClick: () => showCustomizeGasModal(txMeta, sendGasLimit, sendGasPrice, gasTotal), + }), ]), ]) ) @@ -307,16 +357,21 @@ ConfirmSendToken.prototype.render = function () { this.inputs = [] + const title = txMeta.lastGasPrice ? 'Reprice Transaction' : 'Confirm' + const subtitle = txMeta.lastGasPrice + ? 'Increase your gas fee to attempt to overwrite and speed up your transaction' + : 'Please review your transaction.' + return ( h('div.confirm-screen-container.confirm-send-token', [ // Main Send token Card h('div.page-container', [ h('div.page-container__header', [ - h('button.confirm-screen-back-button', { + !txMeta.lastGasPrice && h('button.confirm-screen-back-button', { onClick: () => editTransaction(txMeta), }, 'Edit'), - h('div.page-container__title', 'Confirm'), - h('div.page-container__subtitle', `Please review your transaction.`), + h('div.page-container__title', title), + h('div.page-container__subtitle', subtitle), ]), h('div.flex-row.flex-center.confirm-screen-identicons', [ h('div.confirm-screen-account-wrapper', [ @@ -438,6 +493,14 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) + if (txData.lastGasPrice) { + const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send + const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams + + txData.txParams.gasPrice = sendGasPrice || txGasPrice + txData.txParams.gas = sendGasLimit || txGasLimit + } + // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData } diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index b7f7c5ab4..0b826e909 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -28,6 +28,7 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { + setSelectedToken: tokenAddress => dispatch(actions.setSelectedToken(tokenAddress)), retryTransaction: transactionId => dispatch(actions.retryTransaction(transactionId)), } } @@ -39,6 +40,7 @@ function TxListItem () { this.state = { total: null, fiatTotal: null, + isTokenTx: null, } } @@ -47,12 +49,13 @@ TxListItem.prototype.componentDidMount = async function () { const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) const { name: txDataName } = decodedData || {} + const isTokenTx = txDataName === 'transfer' - const { total, fiatTotal } = txDataName === 'transfer' + const { total, fiatTotal } = isTokenTx ? await this.getSendTokenTotal() : this.getSendEtherTotal() - this.setState({ total, fiatTotal }) + this.setState({ total, fiatTotal, isTokenTx }) } TxListItem.prototype.getAddressText = function () { @@ -193,6 +196,10 @@ TxListItem.prototype.showRetryButton = function () { return currentTxIsLatestWithNonce && Date.now() - transactionSubmittedTime > 30000 } +TxListItem.prototype.setSelectedToken = function (tokenAddress) { + this.props.setSelectedToken(tokenAddress) +} + TxListItem.prototype.resubmit = function () { const { transactionId } = this.props this.props.retryTransaction(transactionId) @@ -207,8 +214,9 @@ TxListItem.prototype.render = function () { dateString, address, className, + txParams, } = this.props - const { total, fiatTotal } = this.state + const { total, fiatTotal, isTokenTx } = this.state const showFiatTotal = transactionAmount !== '0x0' && fiatTotal return h(`div${className || ''}`, { @@ -280,6 +288,9 @@ TxListItem.prototype.render = function () { h('span.tx-list-item-retry-link', { onClick: (event) => { event.stopPropagation() + if (isTokenTx) { + this.setSelectedToken(txParams.to) + } this.resubmit() }, }, 'Increase the gas price on your transaction'), -- cgit v1.2.3 From c37684d7bde00adcb4b2e43db16be91978e2ef12 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 23:49:10 -0230 Subject: Remove unnecessary addition of nonce to state. --- ui/app/components/pending-tx/confirm-send-ether.js | 3 --- ui/app/reducers/metamask.js | 2 -- ui/app/send-v2.js | 5 ----- 3 files changed, 10 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 8fe58482b..f3f7e86c5 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -76,8 +76,6 @@ function mapDispatchToProps (dispatch) { fromDenomination: 'WEI', toDenomination: 'GWEI', })) - - nonce = txParams.nonce } dispatch(actions.updateSend({ @@ -86,7 +84,6 @@ function mapDispatchToProps (dispatch) { editingTransactionId: id, gasTotal: sendGasTotal, forceGasMin, - nonce, })) dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })) }, diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index b27e7140a..2c93172cc 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -39,7 +39,6 @@ function reduceMetamask (state, action) { maxModeOn: false, editingTransactionId: null, forceGasMin: null, - nonce: null, }, coinOptions: {}, useBlockie: false, @@ -299,7 +298,6 @@ function reduceMetamask (state, action) { errors: {}, editingTransactionId: null, forceGasMin: null, - nonce: null, }, }) diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 697dfc517..fc1df1f51 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -548,7 +548,6 @@ SendTransactionScreen.prototype.getEditedTx = function () { selectedToken, editingTransactionId, unapprovedTxs, - nonce, } = this.props const editingTx = { @@ -560,10 +559,6 @@ SendTransactionScreen.prototype.getEditedTx = function () { }, } - if (nonce) { - editingTx.txParams.nonce = ethUtil.addHexPrefix(nonce) - } - if (selectedToken) { const data = TOKEN_TRANSFER_FUNCTION_SIGNATURE + Array.prototype.map.call( ethAbi.rawEncode(['address', 'uint256'], [to, ethUtil.addHexPrefix(amount)]), -- cgit v1.2.3 From cc267d6c818c83b0384b569733d05efef384ac3e Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 13 Mar 2018 23:56:45 -0230 Subject: Fix more lint errors. --- ui/app/components/pending-tx/confirm-send-ether.js | 1 - ui/app/components/pending-tx/confirm-send-token.js | 9 +-------- ui/app/components/tx-list-item.js | 3 +-- 3 files changed, 2 insertions(+), 11 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index f3f7e86c5..4666e047d 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -66,7 +66,6 @@ function mapDispatchToProps (dispatch) { const { gas: txGasLimit, gasPrice: txGasPrice } = txParams let forceGasMin - let nonce if (lastGasPrice) { const stripped = ethUtil.stripHexPrefix(lastGasPrice) forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, { diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 4ce6a7bc3..476c1d259 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -102,7 +102,6 @@ function mapDispatchToProps (dispatch, ownProps) { }) let forceGasMin - let nonce if (lastGasPrice) { const stripped = ethUtil.stripHexPrefix(lastGasPrice) forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, { @@ -278,19 +277,13 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { ConfirmSendToken.prototype.renderGasFee = function () { const { - token: { symbol }, currentCurrency: convertedCurrency, conversionRate, send: { gasTotal, gasLimit: sendGasLimit, gasPrice: sendGasPrice }, showCustomizeGasModal, } = this.props const txMeta = this.gatherTxMeta() - const { - fiat: fiatGas, - token: tokenGas, - eth: ethGas, - gasFeeInHex - } = this.getGasFee() + const { gasFeeInHex } = this.getGasFee() return ( h('section.flex-row.flex-center.confirm-screen-row', [ diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 0b826e909..4c2b77af9 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -55,7 +55,7 @@ TxListItem.prototype.componentDidMount = async function () { ? await this.getSendTokenTotal() : this.getSendEtherTotal() - this.setState({ total, fiatTotal, isTokenTx }) + this.setState({ total, fiatTotal, isTokenTx }) } TxListItem.prototype.getAddressText = function () { @@ -180,7 +180,6 @@ TxListItem.prototype.getSendTokenTotal = async function () { TxListItem.prototype.showRetryButton = function () { const { - transactionStatus, transactionSubmittedTime, selectedAddressTxList, transactionId, -- cgit v1.2.3 From fb838da7340d460650750cb8ea5fa3fb6fe319de Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 14 Mar 2018 17:07:09 -0230 Subject: Revert 'Set txMeta.time to reflect time of tx approval.' --- ui/app/components/pending-tx/confirm-send-ether.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 6624a378d..9b9a4e4ea 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -454,7 +454,7 @@ ConfirmSendEther.prototype.render = function () { ConfirmSendEther.prototype.onSubmit = function (event) { event.preventDefault() - const txMeta = this.gatherTxMeta({ time: (new Date()).getTime() }) + const txMeta = this.gatherTxMeta() const valid = this.checkValidity() this.setState({ valid, submitting: true }) @@ -489,7 +489,7 @@ ConfirmSendEther.prototype.getFormEl = function () { } // After a customizable state value has been updated, -ConfirmSendEther.prototype.gatherTxMeta = function (opts) { +ConfirmSendEther.prototype.gatherTxMeta = function () { const props = this.props const state = this.state const txData = clone(state.txData) || clone(props.txData) @@ -503,7 +503,7 @@ ConfirmSendEther.prototype.gatherTxMeta = function (opts) { } // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) - return Object.assign(txData, opts) + return txData } ConfirmSendEther.prototype.verifyGasParams = function () { -- cgit v1.2.3 From a4c6a5e92e09b70db2e9ab92a8123176de127910 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 14 Mar 2018 17:10:59 -0230 Subject: Ensure changes from customize gas modal opened from confirm screen are captured for non-tx transactions. --- ui/app/components/pending-tx/confirm-send-ether.js | 10 ++++------ ui/app/components/pending-tx/confirm-send-token.js | 10 ++++------ 2 files changed, 8 insertions(+), 12 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 9b9a4e4ea..928149ccd 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -494,13 +494,11 @@ ConfirmSendEther.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) - if (txData.lastGasPrice) { - const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send - const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams + const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send + const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams - txData.txParams.gasPrice = sendGasPrice || txGasPrice - txData.txParams.gas = sendGasLimit || txGasLimit - } + txData.txParams.gasPrice = sendGasPrice || txGasPrice + txData.txParams.gas = sendGasLimit || txGasLimit // 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 ac773b1d2..fe323ffd3 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -487,13 +487,11 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { const state = this.state const txData = clone(state.txData) || clone(props.txData) - if (txData.lastGasPrice) { - const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send - const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams + const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send + const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams - txData.txParams.gasPrice = sendGasPrice || txGasPrice - txData.txParams.gas = sendGasLimit || txGasLimit - } + txData.txParams.gasPrice = sendGasPrice || txGasPrice + txData.txParams.gas = sendGasLimit || txGasLimit // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) return txData -- cgit v1.2.3 From 66422cd083e86582b44d19664e6c6fc95bdb8ce5 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 14 Mar 2018 18:50:18 -0230 Subject: Force gas min has correct precision and is set when editing gas if max. --- ui/app/components/customize-gas-modal/index.js | 7 ++++++- ui/app/components/pending-tx/confirm-send-ether.js | 4 +--- ui/app/components/pending-tx/confirm-send-token.js | 4 +--- 3 files changed, 8 insertions(+), 7 deletions(-) (limited to 'ui') diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 291447bb4..d8384c19d 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -233,6 +233,7 @@ CustomizeGasModal.prototype.render = function () { convertedGasPrice += convertedGasPrice.match(/[.]/) ? priceSigZeros : `${priceSigDec}${priceSigZeros}` + let newGasPrice = gasPrice if (forceGasMin) { const convertedMinPrice = conversionUtil(forceGasMin, { fromNumericBase: 'hex', @@ -242,6 +243,10 @@ CustomizeGasModal.prototype.render = function () { { value: convertedMinPrice, fromNumericBase: 'dec' }, { value: convertedGasPrice, fromNumericBase: 'dec' } ) + newGasPrice = conversionMax( + { value: gasPrice, fromNumericBase: 'hex' }, + { value: forceGasMin, fromNumericBase: 'hex' } + ) } const convertedGasLimit = conversionUtil(gasLimit, { @@ -302,7 +307,7 @@ CustomizeGasModal.prototype.render = function () { }, [t('cancel')]), h(`div.send-v2__customize-gas__save${error ? '__error' : ''}.allcaps`, { - onClick: () => !error && this.save(gasPrice, gasLimit, gasTotal), + onClick: () => !error && this.save(newGasPrice, gasLimit, gasTotal), }, [t('save')]), ]), diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 928149ccd..dca39f0a5 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -68,13 +68,11 @@ function mapDispatchToProps (dispatch) { let forceGasMin if (lastGasPrice) { - const stripped = ethUtil.stripHexPrefix(lastGasPrice) - forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, { + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { multiplicandBase: 16, multiplierBase: 10, toNumericBase: 'hex', fromDenomination: 'WEI', - toDenomination: 'GWEI', })) } diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index fe323ffd3..6035dd801 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -104,13 +104,11 @@ function mapDispatchToProps (dispatch, ownProps) { let forceGasMin if (lastGasPrice) { - const stripped = ethUtil.stripHexPrefix(lastGasPrice) - forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(stripped, 1.1, { + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { multiplicandBase: 16, multiplierBase: 10, toNumericBase: 'hex', fromDenomination: 'WEI', - toDenomination: 'GWEI', })) } -- cgit v1.2.3 From b0122be3c960b68620c5769ca969db60e4a45351 Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 14 Mar 2018 19:03:14 -0230 Subject: Set retry gasPrice to forceGasMin on confirm screen in cases where gas is not edited. --- ui/app/components/pending-tx/confirm-send-ether.js | 19 +++++++++++++++++-- ui/app/components/pending-tx/confirm-send-token.js | 19 +++++++++++++++++-- 2 files changed, 34 insertions(+), 4 deletions(-) (limited to 'ui') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index dca39f0a5..a4763eab7 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -493,9 +493,24 @@ ConfirmSendEther.prototype.gatherTxMeta = function () { const txData = clone(state.txData) || clone(props.txData) const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send - const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams + const { + lastGasPrice, + txParams: { + gasPrice: txGasPrice, + gas: txGasLimit, + }, + } = txData + + let forceGasMin + if (lastGasPrice) { + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { + multiplicandBase: 16, + multiplierBase: 10, + toNumericBase: 'hex', + })) + } - txData.txParams.gasPrice = sendGasPrice || txGasPrice + txData.txParams.gasPrice = sendGasPrice || forceGasMin || txGasPrice txData.txParams.gas = sendGasLimit || txGasLimit // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 6035dd801..f1142b142 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -486,9 +486,24 @@ ConfirmSendToken.prototype.gatherTxMeta = function () { const txData = clone(state.txData) || clone(props.txData) const { gasPrice: sendGasPrice, gas: sendGasLimit } = props.send - const { gasPrice: txGasPrice, gas: txGasLimit } = txData.txParams + const { + lastGasPrice, + txParams: { + gasPrice: txGasPrice, + gas: txGasLimit, + }, + } = txData + + let forceGasMin + if (lastGasPrice) { + forceGasMin = ethUtil.addHexPrefix(multiplyCurrencies(lastGasPrice, 1.1, { + multiplicandBase: 16, + multiplierBase: 10, + toNumericBase: 'hex', + })) + } - txData.txParams.gasPrice = sendGasPrice || txGasPrice + txData.txParams.gasPrice = sendGasPrice || forceGasMin || txGasPrice txData.txParams.gas = sendGasLimit || txGasLimit // log.debug(`UI has defaulted to tx meta ${JSON.stringify(txData)}`) -- cgit v1.2.3 From e504bc6215967bfa0408d1eac862beed3f4f3a46 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 19 Mar 2018 11:28:02 -0700 Subject: Add connecting indication templates --- ui/app/app.js | 33 +++++++++++++++++++++++++++------ 1 file changed, 27 insertions(+), 6 deletions(-) (limited to 'ui') diff --git a/ui/app/app.js b/ui/app/app.js index 954299a6a..6d9296131 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -132,7 +132,7 @@ App.prototype.render = function () { } = props const isLoadingNetwork = network === 'loading' && props.currentView.name !== 'config' const loadMessage = loadingMessage || isLoadingNetwork ? - `Connecting to ${this.getNetworkName()}` : null + this.getConnectingLabel() : null log.debug('Main ui render function') return ( @@ -550,6 +550,27 @@ App.prototype.toggleMetamaskActive = function () { } } +App.prototype.getConnectingLabel = function () { + const { provider } = this.props + const providerName = provider.type + + let name + + if (providerName === 'mainnet') { + name = t('connectingToMainnet') + } else if (providerName === 'ropsten') { + name = t('connectingToRopsten') + } else if (providerName === 'kovan') { + name = t('connectingToRopsten') + } else if (providerName === 'rinkeby') { + name = t('connectingToRinkeby') + } else { + name = t('connectingToUnknown') + } + + return name +} + App.prototype.getNetworkName = function () { const { provider } = this.props const providerName = provider.type @@ -557,15 +578,15 @@ App.prototype.getNetworkName = function () { let name if (providerName === 'mainnet') { - name = 'Main Ethereum Network' + name = t('mainnet') } else if (providerName === 'ropsten') { - name = 'Ropsten Test Network' + name = t('ropsten') } else if (providerName === 'kovan') { - name = 'Kovan Test Network' + name = t('kovan') } else if (providerName === 'rinkeby') { - name = 'Rinkeby Test Network' + name = t('rinkeby') } else { - name = 'Unknown Private Network' + name = t('unknownNetwork') } return name -- cgit v1.2.3 From 17371bb7ecaf5fba3773cd2a0e8f8784d2c4bd49 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 19 Mar 2018 11:30:45 -0700 Subject: Add login templates --- ui/app/unlock.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'ui') diff --git a/ui/app/unlock.js b/ui/app/unlock.js index ac97d04d0..322808619 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -67,7 +67,7 @@ UnlockScreen.prototype.render = function () { style: { margin: 10, }, - }, 'Log In'), + }, t('login')), h('p.pointer', { onClick: () => { @@ -81,7 +81,7 @@ UnlockScreen.prototype.render = function () { color: 'rgb(247, 134, 28)', textDecoration: 'underline', }, - }, 'Restore from seed phrase'), + }, t('restoreFromSeed')), h('p.pointer', { onClick: () => { @@ -94,7 +94,7 @@ UnlockScreen.prototype.render = function () { textDecoration: 'underline', marginTop: '32px', }, - }, 'Use classic interface'), + }, t('classicInterface')), ]) ) } -- cgit v1.2.3 From 2e7d4db2dec000d31ad967400d25b46aabf70e29 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 19 Mar 2018 11:43:22 -0700 Subject: Add recover and backup tempaltes --- ui/app/keychains/hd/recover-seed/confirmation.js | 7 +++-- ui/app/keychains/hd/restore-vault.js | 35 ++++++++++++++---------- 2 files changed, 24 insertions(+), 18 deletions(-) (limited to 'ui') diff --git a/ui/app/keychains/hd/recover-seed/confirmation.js b/ui/app/keychains/hd/recover-seed/confirmation.js index 4335186a5..bc5339549 100644 --- a/ui/app/keychains/hd/recover-seed/confirmation.js +++ b/ui/app/keychains/hd/recover-seed/confirmation.js @@ -4,6 +4,7 @@ const Component = require('react').Component const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('../../../actions') +const t = require('../../../../i18n') module.exports = connect(mapStateToProps)(RevealSeedConfirmation) @@ -49,13 +50,13 @@ RevealSeedConfirmation.prototype.render = function () { }, }, [ - h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'), + h('h4', t('revealSeedWordsWarning')), // confirmation h('input.large-input.letter-spacey', { type: 'password', id: 'password-box', - placeholder: 'Enter your password to confirm', + placeholder: t('enterPasswordConfirm'), onKeyPress: this.checkConfirmation.bind(this), style: { width: 260, @@ -91,7 +92,7 @@ RevealSeedConfirmation.prototype.render = function () { ), props.inProgress && ( - h('span.in-progress-notification', 'Generating Seed...') + h('span.in-progress-notification', t('generatingSeed')) ), ]), ]) diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js index cb4088f61..5e4e004cf 100644 --- a/ui/app/keychains/hd/restore-vault.js +++ b/ui/app/keychains/hd/restore-vault.js @@ -2,6 +2,7 @@ const inherits = require('util').inherits const PersistentForm = require('../../../lib/persistent-form') const connect = require('react-redux').connect const h = require('react-hyperscript') +const t = require('../../../i18n') const actions = require('../../actions') module.exports = connect(mapStateToProps)(RestoreVaultScreen) @@ -36,23 +37,23 @@ RestoreVaultScreen.prototype.render = function () { padding: 6, }, }, [ - 'Restore Vault', + t('restoreVault'), ]), // wallet seed entry - h('h3', 'Wallet Seed'), + h('h3', t('walletSeed')), h('textarea.twelve-word-phrase.letter-spacey', { dataset: { persistentFormId: 'wallet-seed', }, - placeholder: 'Enter your secret twelve word phrase here to restore your vault.', + placeholder: t('secretPhrase'), }), // password h('input.large-input.letter-spacey', { type: 'password', id: 'password-box', - placeholder: 'New Password (min 8 chars)', + placeholder: t('newPassword8Chars'), dataset: { persistentFormId: 'password', }, @@ -66,7 +67,7 @@ RestoreVaultScreen.prototype.render = function () { h('input.large-input.letter-spacey', { type: 'password', id: 'password-box-confirm', - placeholder: 'Confirm Password', + placeholder: t('confirmPassword'), onKeyPress: this.createOnEnter.bind(this), dataset: { persistentFormId: 'password-confirmation', @@ -93,16 +94,20 @@ RestoreVaultScreen.prototype.render = function () { // cancel h('button.primary', { onClick: this.showInitializeMenu.bind(this), - }, 'CANCEL'), + style: { + textTransform: 'uppercase', + }, + }, t('cancel')), // submit h('button.primary', { onClick: this.createNewVaultAndRestore.bind(this), - }, 'OK'), - + style: { + textTransform: 'uppercase', + }, + }, t('ok')), ]), ]) - ) } @@ -131,13 +136,13 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { var passwordConfirmBox = document.getElementById('password-box-confirm') var passwordConfirm = passwordConfirmBox.value if (password.length < 8) { - this.warning = 'Password not long enough' + this.warning = t('passwordNotLongEnough') this.props.dispatch(actions.displayWarning(this.warning)) return } if (password !== passwordConfirm) { - this.warning = 'Passwords don\'t match' + this.warning = t('passwordsDontMatch') this.props.dispatch(actions.displayWarning(this.warning)) return } @@ -147,18 +152,18 @@ RestoreVaultScreen.prototype.createNewVaultAndRestore = function () { // true if the string has more than a space between words. if (seed.split(' ').length > 1) { - this.warning = 'there can only be a space between words' + this.warning = t('spaceBetween') this.props.dispatch(actions.displayWarning(this.warning)) return } // true if seed contains a character that is not between a-z or a space if (!seed.match(/^[a-z ]+$/)) { - this.warning = 'seed words only have lowercase characters' - this.props.dispatch(actions.displayWarning(this.warning)) + this.warning = t('loweCaseWords') + this.props.dispatch(actions.displayWarning(this.warning)) return } if (seed.split(' ').length !== 12) { - this.warning = 'seed phrases are 12 words long' + this.warning = t('seedPhraseReq') this.props.dispatch(actions.displayWarning(this.warning)) return } -- cgit v1.2.3 From 293ca6c9a630b939c97e4939e0416a57d8bad79c Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 19 Mar 2018 12:02:34 -0700 Subject: Add template for settings and info --- ui/app/settings.js | 48 +++++++++++++++++++++++++----------------------- 1 file changed, 25 insertions(+), 23 deletions(-) (limited to 'ui') diff --git a/ui/app/settings.js b/ui/app/settings.js index 466f739d5..60d68bfed 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -10,6 +10,7 @@ const TabBar = require('./components/tab-bar') const SimpleDropdown = require('./components/dropdowns/simple-dropdown') const ToggleButton = require('react-toggle-button') const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums +const t = require('../i18n') const getInfuraCurrencyOptions = () => { const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { @@ -44,8 +45,8 @@ class Settings extends Component { return h('div.settings__tabs', [ h(TabBar, { tabs: [ - { content: 'Settings', key: 'settings' }, - { content: 'Info', key: 'info' }, + { content: t('settings'), key: 'settings' }, + { content: t('info'), key: 'info' }, ], defaultTab: activeTab, tabSelected: key => this.setState({ activeTab: key }), @@ -84,7 +85,7 @@ class Settings extends Component { h('div.settings__content-item', [ h('div.settings__content-item-col', [ h(SimpleDropdown, { - placeholder: 'Select Currency', + placeholder: t('selectCurrency'), options: getInfuraCurrencyOptions(), selectedOption: currentCurrency, onSelect: newCurrency => setCurrentCurrency(newCurrency), @@ -101,31 +102,31 @@ class Settings extends Component { switch (provider.type) { case 'mainnet': - title = 'Current Network' - value = 'Main Ethereum Network' + title = t('currentNetwork') + value = t('mainnet') color = '#038789' break case 'ropsten': - title = 'Current Network' - value = 'Ropsten Test Network' + title = t('currentNetwork') + value = t('ropsten') color = '#e91550' break case 'kovan': - title = 'Current Network' - value = 'Kovan Test Network' + title = t('currentNetwork') + value = t('kovan') color = '#690496' break case 'rinkeby': - title = 'Current Network' - value = 'Rinkeby Test Network' + title = t('currentNetwork') + value = t('rinkeby') color = '#ebb33f' break default: - title = 'Current RPC' + title = t('currentRpc') value = provider.rpcTarget } @@ -146,12 +147,12 @@ class Settings extends Component { return ( h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', 'New RPC URL'), + h('span', t('newRPC')), ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('input.settings__input', { - placeholder: 'New RPC URL', + placeholder: t('newRPC'), onChange: event => this.setState({ newRpc: event.target.value }), onKeyPress: event => { if (event.key === 'Enter') { @@ -164,7 +165,7 @@ class Settings extends Component { event.preventDefault() this.validateRpc(this.state.newRpc) }, - }, 'Save'), + }, t('save')), ]), ]), ]) @@ -180,9 +181,9 @@ class Settings extends Component { const appendedRpc = `http://${newRpc}` if (validUrl.isWebUri(appendedRpc)) { - displayWarning('URIs require the appropriate HTTP/HTTPS prefix.') + displayWarning(t('uriErrorMsg')) } else { - displayWarning('Invalid RPC URI') + displayWarning(t('invalidRPC')) } } } @@ -194,7 +195,7 @@ class Settings extends Component { h('div', 'State Logs'), h( 'div.settings__content-description', - 'State logs contain your public account addresses and sent transactions.' + t('stateLogsDescription') ), ]), h('div.settings__content-item', [ @@ -203,13 +204,13 @@ class Settings extends Component { onClick (event) { window.logStateString((err, result) => { if (err) { - this.state.dispatch(actions.displayWarning('Error in retrieving state logs.')) + this.state.dispatch(actions.displayWarning(t('stateLogError'))) } else { exportAsFile('MetaMask State Logs.json', result) } }) }, - }, 'Download State Logs'), + }, t('downloadStateLogs')), ]), ]), ]) @@ -229,7 +230,7 @@ class Settings extends Component { event.preventDefault() revealSeedConfirmation() }, - }, 'Reveal Seed Words'), + }, t('revealSeedWords')), ]), ]), ]) @@ -249,7 +250,7 @@ class Settings extends Component { event.preventDefault() setFeatureFlagToBeta() }, - }, 'Use old UI'), + }, t('useOldUI')), ]), ]), ]) @@ -268,7 +269,7 @@ class Settings extends Component { event.preventDefault() showResetAccountConfirmationModal() }, - }, 'Reset Account'), + }, t('resetAccount')), ]), ]), ]) @@ -445,3 +446,4 @@ const mapDispatchToProps = dispatch => { } module.exports = connect(mapStateToProps, mapDispatchToProps)(Settings) + -- cgit v1.2.3 From f5b0d56b9d0b0ae0d4076ff296fdea87316fd32c Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Mon, 19 Mar 2018 12:37:10 -0700 Subject: Add send screen template --- ui/app/send-v2.js | 30 +++++++++++++++--------------- 1 file changed, 15 insertions(+), 15 deletions(-) (limited to 'ui') diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index fc1df1f51..dbfa6025d 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -1,6 +1,7 @@ const { inherits } = require('util') const PersistentForm = require('../lib/persistent-form') const h = require('react-hyperscript') +const t = require('../i18n') const ethAbi = require('ethereumjs-abi') const ethUtil = require('ethereumjs-util') @@ -180,13 +181,12 @@ SendTransactionScreen.prototype.componentDidUpdate = function (prevProps) { SendTransactionScreen.prototype.renderHeader = function () { const { selectedToken, clearSend, goHome } = this.props - const tokenText = selectedToken ? 'tokens' : 'ETH' return h('div.page-container__header', [ - h('div.page-container__title', selectedToken ? 'Send Tokens' : 'Send ETH'), + h('div.page-container__title', selectedToken ? t('sendTokens') : t('sendETH')), - h('div.page-container__subtitle', `Only send ${tokenText} to an Ethereum address.`), + h('div.page-container__subtitle', t('onlySendToEtherAddress')), h('div.page-container__header-close', { onClick: () => { @@ -257,11 +257,11 @@ SendTransactionScreen.prototype.handleToChange = function (to) { let toError = null if (!to) { - toError = 'Required' + toError = t('required') } else if (!isValidAddress(to)) { - toError = 'Recipient address is invalid' + toError = t('invalidAddressRecipient') } else if (to === from) { - toError = 'From and To address cannot be the same' + toError = t('fromToSame') } updateSendTo(to) @@ -277,9 +277,9 @@ SendTransactionScreen.prototype.renderToRow = function () { h('div.send-v2__form-label', [ - 'To:', + t('to'), - this.renderErrorMessage('to'), + this.renderErrorMessage(t('to')), ]), @@ -377,11 +377,11 @@ SendTransactionScreen.prototype.validateAmount = function (value) { ) if (conversionRate && !sufficientBalance) { - amountError = 'Insufficient funds.' + amountError = t('insufficientFunds') } else if (verifyTokenBalance && !sufficientTokens) { - amountError = 'Insufficient tokens.' + amountError = t('insufficientTokens') } else if (amountLessThanZero) { - amountError = 'Can not send negative amounts of ETH.' + amountError = t('negativeETH') } updateSendErrors({ amount: amountError }) @@ -411,7 +411,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () { setMaxModeTo(true) this.setAmountToMax() }, - }, [ !maxModeOn ? 'Max' : '' ]), + }, [ !maxModeOn ? t('max') : '' ]), ]), h('div.send-v2__form-field', [ @@ -439,7 +439,7 @@ SendTransactionScreen.prototype.renderGasRow = function () { return h('div.send-v2__form-row', [ - h('div.send-v2__form-label', 'Gas fee:'), + h('div.send-v2__form-label', h('gasFee')), h('div.send-v2__form-field', [ @@ -507,11 +507,11 @@ SendTransactionScreen.prototype.renderFooter = function () { clearSend() goHome() }, - }, 'Cancel'), + }, t('cancel')), h('button.btn-clear.page-container__footer-button', { disabled: !noErrors || !gasTotal || missingTokenBalance, onClick: event => this.onSubmit(event), - }, 'Next'), + }, t('next')), ]) } -- cgit v1.2.3 From faa4ffe1636ce9f7cc68bffe1eb7b1e685a2d000 Mon Sep 17 00:00:00 2001 From: frankiebee Date: Mon, 19 Mar 2018 14:32:58 -0700 Subject: new-ui - dont exclude `txParams.data` when editing and updating txParams --- ui/app/send-v2.js | 2 ++ 1 file changed, 2 insertions(+) (limited to 'ui') diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index fc1df1f51..491c4dda3 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -571,9 +571,11 @@ SendTransactionScreen.prototype.getEditedTx = function () { data, }) } else { + const data = unapprovedTxs[editingTransactionId].txParams.data Object.assign(editingTx.txParams, { value: ethUtil.addHexPrefix(amount), to: ethUtil.addHexPrefix(to), + data, }) } -- cgit v1.2.3 From 5cdaf270f798218bddc72bde05d8ab77267cfb94 Mon Sep 17 00:00:00 2001 From: Dan J Miller Date: Tue, 20 Mar 2018 06:47:45 -0230 Subject: Don't block user from setting gas if estimating gas returns errors. (#3627) --- ui/app/components/send/gas-fee-display-v2.js | 7 +++++-- ui/app/components/send/send-v2-container.js | 1 + ui/app/css/itcss/components/send.scss | 6 ++++++ ui/app/send-v2.js | 7 +++++++ 4 files changed, 19 insertions(+), 2 deletions(-) (limited to 'ui') diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js index 0c6f76303..9aaa31b1e 100644 --- a/ui/app/components/send/gas-fee-display-v2.js +++ b/ui/app/components/send/gas-fee-display-v2.js @@ -18,6 +18,7 @@ GasFeeDisplay.prototype.render = function () { onClick, primaryCurrency = 'ETH', convertedCurrency, + gasLoadingError, } = this.props return h('div.send-v2__gas-fee-display', [ @@ -31,11 +32,13 @@ GasFeeDisplay.prototype.render = function () { convertedPrefix: '$', readOnly: true, }) - : h('div.currency-display', t('loading')), + : gasLoadingError + ? h('div..currency-display.currency-display--message', 'Set with the gas price customizer.') + : h('div.currency-display', t('loading')), h('button.send-v2__sliders-icon-container', { onClick, - disabled: !gasTotal, + disabled: !gasTotal && !gasLoadingError, }, [ h('i.fa.fa-sliders.send-v2__sliders-icon'), ]), diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index 1106902b7..d1319b6dc 100644 --- a/ui/app/components/send/send-v2-container.js +++ b/ui/app/components/send/send-v2-container.js @@ -48,6 +48,7 @@ function mapStateToProps (state) { primaryCurrency, convertedCurrency: getCurrentCurrency(state), data, + selectedAddress, amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate, tokenContract: getSelectedTokenContract(state), unapprovedTxs: state.metamask.unapprovedTxs, diff --git a/ui/app/css/itcss/components/send.scss b/ui/app/css/itcss/components/send.scss index bb17e53cd..89739171d 100644 --- a/ui/app/css/itcss/components/send.scss +++ b/ui/app/css/itcss/components/send.scss @@ -660,6 +660,12 @@ &__gas-fee-display { width: 100%; + + .currency-display--message { + padding: 8px 38px 8px 10px; + display: flex; + align-items: center; + } } &__sliders-icon-container { diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index fc1df1f51..5ac59fc29 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -42,6 +42,7 @@ function SendTransactionScreen () { to: null, amount: null, }, + gasLoadingError: false, } this.handleToChange = this.handleToChange.bind(this) @@ -128,6 +129,10 @@ SendTransactionScreen.prototype.updateGas = function () { .then(([gasPrice, gas]) => { const newGasTotal = this.getGasTotal(gas, gasPrice) updateGasTotal(newGasTotal) + this.setState({ gasLoadingError: false }) + }) + .catch(err => { + this.setState({ gasLoadingError: true }) }) } else { const newGasTotal = this.getGasTotal(gasLimit, gasPrice) @@ -436,6 +441,7 @@ SendTransactionScreen.prototype.renderGasRow = function () { showCustomizeGasModal, gasTotal, } = this.props + const { gasLoadingError } = this.state return h('div.send-v2__form-row', [ @@ -448,6 +454,7 @@ SendTransactionScreen.prototype.renderGasRow = function () { conversionRate, convertedCurrency, onClick: showCustomizeGasModal, + gasLoadingError, }), ]), -- cgit v1.2.3 From 85a612b34de27c3f4dcaa070e39cf88d21541652 Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 20 Mar 2018 02:34:12 -0700 Subject: I18n add-token.js --- ui/app/add-token.js | 43 ++++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 21 deletions(-) (limited to 'ui') diff --git a/ui/app/add-token.js b/ui/app/add-token.js index b8878b772..b3a5bdc20 100644 --- a/ui/app/add-token.js +++ b/ui/app/add-token.js @@ -26,6 +26,7 @@ const fuse = new Fuse(contractList, { const actions = require('./actions') const ethUtil = require('ethereumjs-util') const { tokenInfoGetter } = require('./token-util') +const t = require('../i18n') const emptyAddr = '0x0000000000000000000000000000000000000000' @@ -139,28 +140,28 @@ AddTokenScreen.prototype.validate = function () { if (customAddress) { const validAddress = ethUtil.isValidAddress(customAddress) if (!validAddress) { - errors.customAddress = 'Address is invalid. ' + errors.customAddress = t('invalidAddress') } const validDecimals = customDecimals !== null && customDecimals >= 0 && customDecimals < 36 if (!validDecimals) { - errors.customDecimals = 'Decimals must be at least 0, and not over 36.' + errors.customDecimals = t('decimalsMustZerotoTen') } const symbolLen = customSymbol.trim().length const validSymbol = symbolLen > 0 && symbolLen < 10 if (!validSymbol) { - errors.customSymbol = 'Symbol must be between 0 and 10 characters.' + errors.customSymbol = t('symbolBetweenZeroTen') } const ownAddress = identitiesList.includes(standardAddress) if (ownAddress) { - errors.customAddress = 'Personal address detected. Input the token contract address.' + errors.customAddress = t('personalAddressDetected') } const tokenAlreadyAdded = this.checkExistingAddresses(customAddress) if (tokenAlreadyAdded) { - errors.customAddress = 'Token has already been added.' + errors.customAddress = t('tokenAlreadyAdded') } } else if ( Object.entries(selectedTokens) @@ -168,7 +169,7 @@ AddTokenScreen.prototype.validate = function () { isEmpty && !isSelected ), true) ) { - errors.tokenSelector = 'Must select at least 1 token.' + errors.tokenSelector = t('mustSelectOne') } return { @@ -198,7 +199,7 @@ AddTokenScreen.prototype.renderCustomForm = function () { 'add-token__add-custom-field--error': errors.customAddress, }), }, [ - h('div.add-token__add-custom-label', 'Token Address'), + h('div.add-token__add-custom-label', t('tokenAddress')), h('input.add-token__add-custom-input', { type: 'text', onChange: this.tokenAddressDidChange, @@ -211,7 +212,7 @@ AddTokenScreen.prototype.renderCustomForm = function () { 'add-token__add-custom-field--error': errors.customSymbol, }), }, [ - h('div.add-token__add-custom-label', 'Token Symbol'), + h('div.add-token__add-custom-label', t('tokenSymbol')), h('input.add-token__add-custom-input', { type: 'text', onChange: this.tokenSymbolDidChange, @@ -225,7 +226,7 @@ AddTokenScreen.prototype.renderCustomForm = function () { 'add-token__add-custom-field--error': errors.customDecimals, }), }, [ - h('div.add-token__add-custom-label', 'Decimals of Precision'), + h('div.add-token__add-custom-label', t('decimal')), h('input.add-token__add-custom-input', { type: 'number', onChange: this.tokenDecimalsDidChange, @@ -299,11 +300,11 @@ AddTokenScreen.prototype.renderConfirmation = function () { h('div.add-token', [ h('div.add-token__wrapper', [ h('div.add-token__title-container.add-token__confirmation-title', [ - h('div.add-token__title', 'Add Token'), - h('div.add-token__description', 'Would you like to add these tokens?'), + h('div.add-token__title', t('addToken')), + h('div.add-token__description', t('likeToAddTokens')), ]), h('div.add-token__content-container.add-token__confirmation-content', [ - h('div.add-token__description.add-token__confirmation-description', 'Your balances'), + h('div.add-token__description.add-token__confirmation-description', t('balances')), h('div.add-token__confirmation-token-list', Object.entries(tokens) .map(([ address, token ]) => ( @@ -322,10 +323,10 @@ AddTokenScreen.prototype.renderConfirmation = function () { h('div.add-token__buttons', [ h('button.btn-cancel.add-token__button', { onClick: () => this.setState({ isShowingConfirmation: false }), - }, 'Back'), + }, t('back')), h('button.btn-clear.add-token__button', { onClick: () => addTokens(tokens).then(goHome), - }, 'Add Tokens'), + }, t('addTokens')), ]), ]) ) @@ -341,15 +342,15 @@ AddTokenScreen.prototype.render = function () { h('div.add-token', [ h('div.add-token__wrapper', [ h('div.add-token__title-container', [ - h('div.add-token__title', 'Add Token'), - h('div.add-token__description', 'Keep track of the tokens you’ve bought with your MetaMask account. If you bought tokens using a different account, those tokens will not appear here.'), - h('div.add-token__description', 'Search for tokens or select from our list of popular tokens.'), + h('div.add-token__title', t('addToken')), + h('div.add-token__description', t('tokenWarning1')), + h('div.add-token__description', t('tokenSelection')), ]), h('div.add-token__content-container', [ h('div.add-token__input-container', [ h('input.add-token__input', { type: 'text', - placeholder: 'Search', + placeholder: t('search'), onChange: e => this.setState({ searchQuery: e.target.value }), }), h('div.add-token__search-input-error-message', errors.tokenSelector), @@ -363,7 +364,7 @@ AddTokenScreen.prototype.render = function () { h('div.add-token__add-custom', { onClick: () => this.setState({ isCollapsed: !isCollapsed }), }, [ - 'Add custom token', + t('addCustomToken'), h(`i.fa.fa-angle-${isCollapsed ? 'down' : 'up'}`), ]), this.renderCustomForm(), @@ -372,10 +373,10 @@ AddTokenScreen.prototype.render = function () { h('div.add-token__buttons', [ h('button.btn-cancel.add-token__button', { onClick: goHome, - }, 'Cancel'), + }, t('cancel')), h('button.btn-clear.add-token__button', { onClick: this.onNext, - }, 'Next'), + }, t('next')), ]), ]) ) -- cgit v1.2.3 From 4af1003b0efa8329718f5a95826976a54194d49b Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Tue, 20 Mar 2018 04:32:20 -0700 Subject: Fix Account Names being cropped (#3626) --- ui/app/css/itcss/components/account-menu.scss | 3 --- ui/app/css/itcss/components/network.scss | 3 ++- ui/app/css/itcss/components/newui-sections.scss | 1 - ui/app/css/itcss/components/transaction-list.scss | 4 +++- ui/app/css/itcss/generic/index.scss | 2 +- ui/app/css/itcss/generic/reset.scss | 4 ---- 6 files changed, 6 insertions(+), 11 deletions(-) (limited to 'ui') diff --git a/ui/app/css/itcss/components/account-menu.scss b/ui/app/css/itcss/components/account-menu.scss index 4752741aa..c4037d862 100644 --- a/ui/app/css/itcss/components/account-menu.scss +++ b/ui/app/css/itcss/components/account-menu.scss @@ -87,7 +87,6 @@ flex: 1 0 auto; display: flex; flex-flow: column nowrap; - padding-top: 4px; } &__check-mark { @@ -115,13 +114,11 @@ color: $white; font-size: 18px; font-weight: 300; - line-height: 16px; } &__balance { color: $dusty-gray; font-size: 14px; - line-height: 19px; } &__action { diff --git a/ui/app/css/itcss/components/network.scss b/ui/app/css/itcss/components/network.scss index c32d1de5e..374cb71b6 100644 --- a/ui/app/css/itcss/components/network.scss +++ b/ui/app/css/itcss/components/network.scss @@ -10,8 +10,9 @@ .network-component.pointer { border: 2px solid $silver; border-radius: 82px; - padding: 3px; + padding: 7px 3px; flex: 0 0 auto; + display: flex; &.ethereum-network .menu-icon-circle div { background-color: rgba(3, 135, 137, .7) !important; diff --git a/ui/app/css/itcss/components/newui-sections.scss b/ui/app/css/itcss/components/newui-sections.scss index 5cdda5e6c..777a82318 100644 --- a/ui/app/css/itcss/components/newui-sections.scss +++ b/ui/app/css/itcss/components/newui-sections.scss @@ -265,7 +265,6 @@ $wallet-view-bg: $alabaster; .account-name { font-size: 24px; font-weight: 300; - line-height: 20px; color: $black; margin-top: 8px; margin-bottom: .9rem; diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index c3df493df..2c28a2a27 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -97,7 +97,7 @@ .tx-list-content-wrapper { align-items: stretch; - margin-bottom: 4px; + margin: 4px 0; flex: 1 0 auto; width: 100%; display: flex; @@ -136,6 +136,7 @@ align-self: center; flex: 0 0 auto; margin-right: 16px; + display: flex; } .tx-list-account-and-status-wrapper { @@ -192,6 +193,7 @@ } .tx-list-item { + height: 80px; border-top: 1px solid rgb(231, 231, 231); flex: 0 0 auto; display: flex; diff --git a/ui/app/css/itcss/generic/index.scss b/ui/app/css/itcss/generic/index.scss index 1fbd9896f..1e226b93e 100644 --- a/ui/app/css/itcss/generic/index.scss +++ b/ui/app/css/itcss/generic/index.scss @@ -13,7 +13,6 @@ body { font-family: Roboto, Arial; color: #4d4d4d; font-weight: 300; - line-height: 1.4em; background: #f7f7f7; width: 100%; height: 100%; @@ -103,6 +102,7 @@ input.large-input { &::after { content: '\00D7'; font-size: 40px; + line-height: 20px; } } diff --git a/ui/app/css/itcss/generic/reset.scss b/ui/app/css/itcss/generic/reset.scss index e054d533e..a417a0453 100644 --- a/ui/app/css/itcss/generic/reset.scss +++ b/ui/app/css/itcss/generic/reset.scss @@ -112,10 +112,6 @@ section { display: block; } -body { - line-height: 1; -} - ol, ul { list-style: none; -- cgit v1.2.3 From 36b371283cc91b479a9a0e34ace108461576140a Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 20 Mar 2018 12:41:03 -0230 Subject: Improve responsiveness of gas price row on confirm screen. --- ui/app/css/itcss/components/confirm.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) (limited to 'ui') diff --git a/ui/app/css/itcss/components/confirm.scss b/ui/app/css/itcss/components/confirm.scss index 1977b49ae..abe138f54 100644 --- a/ui/app/css/itcss/components/confirm.scss +++ b/ui/app/css/itcss/components/confirm.scss @@ -242,6 +242,22 @@ section .confirm-screen-account-number, } } +@media screen and (max-width: 379px) { + .confirm-screen-row { + span.confirm-screen-section-column { + flex: 0.4; + } + + div.confirm-screen-section-column { + flex: 0.6; + } + + .currency-display__input { + font-size: 14px; + } + } +} + .confirm-screen-row-detail { font-size: 12px; line-height: 16px; -- cgit v1.2.3 From 49e3ada382e061216ce4306ab17145b94e08ed62 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 20 Mar 2018 13:28:59 -0230 Subject: Fix styling regression from master merge. --- ui/app/css/itcss/components/transaction-list.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/css/itcss/components/transaction-list.scss b/ui/app/css/itcss/components/transaction-list.scss index c13f24953..d03faf486 100644 --- a/ui/app/css/itcss/components/transaction-list.scss +++ b/ui/app/css/itcss/components/transaction-list.scss @@ -170,6 +170,7 @@ @media screen and (max-width: 379px) { margin-left: 0px; + text-align: center; } } @@ -244,7 +245,6 @@ } .tx-list-item { - height: 80px; border-top: 1px solid rgb(231, 231, 231); flex: 0 0 auto; display: flex; -- cgit v1.2.3 From cffaf44714830904526c05bd4acf7a88c6e3cabe Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 20 Mar 2018 09:49:12 -0700 Subject: i18n Import flow --- ui/app/accounts/import/index.js | 6 +++--- ui/app/accounts/import/json.js | 4 ++-- 2 files changed, 5 insertions(+), 5 deletions(-) (limited to 'ui') diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index c1b190e3d..fc9031a65 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/accounts/import/index.js @@ -37,7 +37,7 @@ AccountImportSubview.prototype.render = function () { h('div.new-account-import-form', [ h('.new-account-import-disclaimer', [ - h('span', 'Imported accounts will not be associated with your originally created MetaMask account seedphrase. Learn more about imported accounts '), + h('span', t('importAccountMsg')), h('span', { style: { cursor: 'pointer', @@ -48,12 +48,12 @@ AccountImportSubview.prototype.render = function () { url: 'https://metamask.helpscoutdocs.com/article/17-what-are-loose-accounts', }) }, - }, 'here'), + }, t('here')), ]), h('div.new-account-import-form__select-section', [ - h('div.new-account-import-form__select-label', 'Select Type'), + h('div.new-account-import-form__select-label', t('selectType')), h(Select, { className: 'new-account-import-form__select', diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js index 1b5e485d7..fa25168f1 100644 --- a/ui/app/accounts/import/json.js +++ b/ui/app/accounts/import/json.js @@ -84,7 +84,7 @@ class JsonImportSubview extends Component { const state = this.state if (!state) { - const message = 'You must select a valid file to import.' + const message = t('validFileImport') return this.props.displayWarning(message) } @@ -102,7 +102,7 @@ class JsonImportSubview extends Component { const message = t('needImportPassword') return this.props.displayWarning(message) } - + this.props.importNewJsonAccount([ fileContents, password ]) } } -- cgit v1.2.3 From 7a8e0802455b8819dac12d73a4a8e245d6907dc0 Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 20 Mar 2018 10:29:22 -0700 Subject: Started on Tx list i18n --- ui/app/components/tx-list.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/components/tx-list.js b/ui/app/components/tx-list.js index 34dc837ae..b6538347c 100644 --- a/ui/app/components/tx-list.js +++ b/ui/app/components/tx-list.js @@ -40,7 +40,7 @@ TxList.prototype.render = function () { return h('div.flex-column', [ h('div.flex-row.tx-list-header-wrapper', [ h('div.flex-row.tx-list-header', [ - h('div', 'transactions'), + h('div', t('transactions')), ]), ]), h('div.flex-column.tx-list-container', {}, [ -- cgit v1.2.3 From 4fc68ca20833e5f6c70b8a532d79ac60e65f4704 Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 20 Mar 2018 10:56:35 -0700 Subject: Add i18n in settings/info --- ui/app/settings.js | 28 ++++++++++++++-------------- 1 file changed, 14 insertions(+), 14 deletions(-) (limited to 'ui') diff --git a/ui/app/settings.js b/ui/app/settings.js index 60d68bfed..105cbb40b 100644 --- a/ui/app/settings.js +++ b/ui/app/settings.js @@ -59,7 +59,7 @@ class Settings extends Component { return h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', 'Use Blockies Identicon'), + h('span', t('blockiesIdenticon')), ]), h('div.settings__content-item', [ h('div.settings__content-item-col', [ @@ -79,7 +79,7 @@ class Settings extends Component { return h('div.settings__content-row', [ h('div.settings__content-item', [ - h('span', 'Current Conversion'), + h('span', t('currentConversion')), h('span.settings__content-description', `Updated ${Date(conversionDate)}`), ]), h('div.settings__content-item', [ @@ -192,7 +192,7 @@ class Settings extends Component { return ( h('div.settings__content-row', [ h('div.settings__content-item', [ - h('div', 'State Logs'), + h('div', t('stateLogs')), h( 'div.settings__content-description', t('stateLogsDescription') @@ -222,7 +222,7 @@ class Settings extends Component { return ( h('div.settings__content-row', [ - h('div.settings__content-item', 'Reveal Seed Words'), + h('div.settings__content-item', t('revealSeedWords')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('button.settings__clear-button.settings__clear-button--red', { @@ -242,7 +242,7 @@ class Settings extends Component { return ( h('div.settings__content-row', [ - h('div.settings__content-item', 'Use old UI'), + h('div.settings__content-item', t('useOldUI')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('button.settings__clear-button.settings__clear-button--orange', { @@ -261,7 +261,7 @@ class Settings extends Component { const { showResetAccountConfirmationModal } = this.props return h('div.settings__content-row', [ - h('div.settings__content-item', 'Reset Account'), + h('div.settings__content-item', t('resetAccount')), h('div.settings__content-item', [ h('div.settings__content-item-col', [ h('button.settings__clear-button.settings__clear-button--orange', { @@ -304,13 +304,13 @@ class Settings extends Component { renderInfoLinks () { return ( h('div.settings__content-item.settings__content-item--without-height', [ - h('div.settings__info-link-header', 'Links'), + h('div.settings__info-link-header', t('links')), h('div.settings__info-link-item', [ h('a', { href: 'https://metamask.io/privacy.html', target: '_blank', }, [ - h('span.settings__info-link', 'Privacy Policy'), + h('span.settings__info-link', t('privacyMsg')), ]), ]), h('div.settings__info-link-item', [ @@ -318,7 +318,7 @@ class Settings extends Component { href: 'https://metamask.io/terms.html', target: '_blank', }, [ - h('span.settings__info-link', 'Terms of Use'), + h('span.settings__info-link', t('terms')), ]), ]), h('div.settings__info-link-item', [ @@ -326,7 +326,7 @@ class Settings extends Component { href: 'https://metamask.io/attributions.html', target: '_blank', }, [ - h('span.settings__info-link', 'Attributions'), + h('span.settings__info-link', t('attributions')), ]), ]), h('hr.settings__info-separator'), @@ -335,7 +335,7 @@ class Settings extends Component { href: 'https://support.metamask.io', target: '_blank', }, [ - h('span.settings__info-link', 'Visit our Support Center'), + h('span.settings__info-link', t('supportCenter')), ]), ]), h('div.settings__info-link-item', [ @@ -343,7 +343,7 @@ class Settings extends Component { href: 'https://metamask.io/', target: '_blank', }, [ - h('span.settings__info-link', 'Visit our web site'), + h('span.settings__info-link', t('visitWebSite')), ]), ]), h('div.settings__info-link-item', [ @@ -351,7 +351,7 @@ class Settings extends Component { target: '_blank', href: 'mailto:help@metamask.io?subject=Feedback', }, [ - h('span.settings__info-link', 'Email us!'), + h('span.settings__info-link', t('emailUs')), ]), ]), ]) @@ -373,7 +373,7 @@ class Settings extends Component { h('div.settings__info-item', [ h( 'div.settings__info-about', - 'MetaMask is designed and built in California.' + t('builtInCalifornia') ), ]), ]), -- cgit v1.2.3 From 3830f49ac57f3bf506298e6c8afac11fb8a942b4 Mon Sep 17 00:00:00 2001 From: Dan Date: Tue, 20 Mar 2018 15:28:48 -0230 Subject: Take user home if an unapproved tx is dropped while they are viewing. --- ui/app/conf-tx.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) (limited to 'ui') diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index b4ffc48b7..1070436c3 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -40,6 +40,7 @@ function mapStateToProps (state) { currentCurrency: state.metamask.currentCurrency, blockGasLimit: state.metamask.currentBlockGasLimit, computedBalances: state.metamask.computedBalances, + selectedAddressTxList: state.metamask.selectedAddressTxList, } } @@ -48,6 +49,23 @@ function ConfirmTxScreen () { Component.call(this) } +ConfirmTxScreen.prototype.componentDidUpdate = function (prevProps) { + const { + unapprovedTxs, + network, + selectedAddressTxList, + } = this.props + const { index: prevIndex, unapprovedTxs: prevUnapprovedTxs } = prevProps + const prevUnconfTxList = txHelper(prevUnapprovedTxs, {}, {}, {}, network) + const prevTxData = prevUnconfTxList[prevIndex] || {} + const prevTx = selectedAddressTxList.find(({ id }) => id === prevTxData.id) || {} + const unconfTxList = txHelper(unapprovedTxs, {}, {}, {}, network) + + if (prevTx.status === 'dropped' && unconfTxList.length === 0) { + this.goHome({}) + } +} + ConfirmTxScreen.prototype.render = function () { const props = this.props const { -- cgit v1.2.3 From dd19a934475cfa8cc31495b351b69a7d8d1f8d5e Mon Sep 17 00:00:00 2001 From: Thomas Date: Tue, 20 Mar 2018 12:06:59 -0700 Subject: Add i18n to tx status --- ui/app/components/tx-list-item.js | 27 ++++++++++++++++++++++++++- 1 file changed, 26 insertions(+), 1 deletion(-) (limited to 'ui') diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 5ff1820a6..d104eda88 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -265,7 +265,7 @@ TxListItem.prototype.render = function () { 'tx-list-status--dropped': transactionStatus === 'dropped', }), }, - transactionStatus, + this.txStatusIndicator(), ), ]), ]), @@ -300,3 +300,28 @@ TxListItem.prototype.render = function () { ]), // holding on icon from design ]) } + +TxListItem.prototype.txStatusIndicator = function () { + const { transactionStatus } = this.props + + let name + + if (transactionStatus === 'unapproved') { + name = t('unapproved') + } else if (transactionStatus === 'rejected') { + name = t('rejected') + } else if (transactionStatus === 'approved') { + name = t('approved') + } else if (transactionStatus === 'signed') { + name = t('signed') + } else if (transactionStatus === 'submitted') { + name = t('submitted') + } else if (transactionStatus === 'confirmed') { + name = t('confirmed') + } else if (transactionStatus === 'failed') { + name = t('failed') + } else if (transactionStatus === 'dropped') { + name = t('dropped') + } + return name +} -- cgit v1.2.3