From 59015cccef72210f828b344aaedde9b8dd31be3b Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 18 Oct 2017 16:53:35 -0230 Subject: [PATCH 1/2] Min and default gas price, limit, total; comments out code for gas slider. --- .../customize-gas-modal/gas-modal-card.js | 18 +++++++-------- .../components/customize-gas-modal/index.js | 17 +++++++++----- ui/app/components/send/send-constants.js | 23 +++++++++++++++++++ ui/app/send-v2.js | 7 +++--- 4 files changed, 47 insertions(+), 18 deletions(-) create mode 100644 ui/app/components/send/send-constants.js diff --git a/ui/app/components/customize-gas-modal/gas-modal-card.js b/ui/app/components/customize-gas-modal/gas-modal-card.js index 8e739ee40..de181dc67 100644 --- a/ui/app/components/customize-gas-modal/gas-modal-card.js +++ b/ui/app/components/customize-gas-modal/gas-modal-card.js @@ -19,7 +19,7 @@ GasModalCard.prototype.render = function () { unitLabel, value, min, - max, + // max, step, title, copy @@ -34,20 +34,20 @@ GasModalCard.prototype.render = function () { h(InputNumber, { unitLabel, step, - max, + // max, min, placeholder: '0', value, onChange, }), - h(GasSlider, { - value, - step, - max, - min, - onChange, - }), + // h(GasSlider, { + // value, + // step, + // max, + // min, + // onChange, + // }), ]) diff --git a/ui/app/components/customize-gas-modal/index.js b/ui/app/components/customize-gas-modal/index.js index 0ba768893..744891c47 100644 --- a/ui/app/components/customize-gas-modal/index.js +++ b/ui/app/components/customize-gas-modal/index.js @@ -5,6 +5,11 @@ const connect = require('react-redux').connect const actions = require('../../actions') const GasModalCard = require('./gas-modal-card') +const { + MIN_GAS_PRICE, + MIN_GAS_LIMIT, +} = require('../send/send-constants') + const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') const { @@ -35,8 +40,8 @@ function CustomizeGasModal (props) { Component.call(this) this.state = { - gasPrice: props.gasPrice, - gasLimit: props.gasLimit, + gasPrice: props.gasPrice || MIN_GAS_PRICE, + gasLimit: props.gasLimit || MIN_GAS_LIMIT, } } @@ -115,8 +120,8 @@ CustomizeGasModal.prototype.render = function () { h(GasModalCard, { value: convertedGasPrice, - min: 0, - max: 1000, + min: MIN_GAS_PRICE, + // max: 1000, step: 1, onChange: value => this.convertAndSetGasPrice(value), title: 'Gas Price', @@ -125,8 +130,8 @@ CustomizeGasModal.prototype.render = function () { h(GasModalCard, { value: convertedGasLimit, - min: 20000, - max: 100000, + min: MIN_GAS_LIMIT, + // max: 100000, step: 1, onChange: value => this.convertAndSetGasLimit(value), title: 'Gas Limit', diff --git a/ui/app/components/send/send-constants.js b/ui/app/components/send/send-constants.js new file mode 100644 index 000000000..a819a8c28 --- /dev/null +++ b/ui/app/components/send/send-constants.js @@ -0,0 +1,23 @@ +const Identicon = require('../identicon') +const { multiplyCurrencies } = require('../../conversion-util') + +const MIN_GAS_PRICE_GWEI = '1' +const GWEI_FACTOR = '1e9' +const MIN_GAS_PRICE = multiplyCurrencies(GWEI_FACTOR, MIN_GAS_PRICE_GWEI, { + multiplicandBase: 16, + multiplierBase: 16, +}) +const MIN_GAS_LIMIT = (21000).toString(16) +const MIN_GAS_TOTAL = multiplyCurrencies(MIN_GAS_LIMIT, MIN_GAS_PRICE, { + toNumericBase: 'hex', + multiplicandBase: 16, + multiplierBase: 16, +}) + +module.exports = { + MIN_GAS_PRICE_GWEI, + GWEI_FACTOR, + MIN_GAS_PRICE, + MIN_GAS_LIMIT, + MIN_GAS_TOTAL, +} diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index c0a03690a..8915350a3 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -10,6 +10,8 @@ const CurrencyDisplay = require('./components/send/currency-display') const MemoTextArea = require('./components/send/memo-textarea') const GasFeeDisplay = require('./components/send/gas-fee-display-v2') +const { MIN_GAS_TOTAL } = require('./components/send/send-constants') + const { showModal } = require('./actions') const { @@ -135,9 +137,8 @@ SendTransactionScreen.prototype.renderHeader = function () { SendTransactionScreen.prototype.renderErrorMessage = function(errorType) { const { errors } = this.props - console.log(`! errors`, errors); const errorMessage = errors[errorType]; - console.log(`errorMessage`, errorMessage); + return errorMessage ? h('div.send-v2__error', [ errorMessage ] ) : null @@ -309,7 +310,7 @@ SendTransactionScreen.prototype.renderGasRow = function () { const { conversionRate, showCustomizeGasModal, - gasTotal, + gasTotal = MIN_GAS_TOTAL, } = this.props return h('div.send-v2__form-row', [ From 332c7441b656ec82ebfba863e3feb4dbf365d67b Mon Sep 17 00:00:00 2001 From: Dan Date: Wed, 18 Oct 2017 23:39:26 -0230 Subject: [PATCH 2/2] Get currency from state in account details, send and confirm screens. --- ui/app/app.js | 5 +- .../pending-tx/confirm-deploy-contract.js | 28 ++++++----- .../pending-tx/confirm-send-ether.js | 48 ++++++++++--------- .../pending-tx/confirm-send-token.js | 24 +++++----- ui/app/components/pending-tx/index.js | 3 -- ui/app/components/send/account-list-item.js | 9 ++-- ui/app/components/send/currency-display.js | 2 +- ui/app/components/send/gas-fee-display-v2.js | 4 +- ui/app/components/send/send-v2-container.js | 8 ++-- ui/app/components/tx-list-item.js | 10 ++-- ui/app/config.js | 1 + ui/app/conversion-util.js | 2 +- ui/app/selectors.js | 5 ++ ui/app/send-v2.js | 6 ++- 14 files changed, 89 insertions(+), 66 deletions(-) diff --git a/ui/app/app.js b/ui/app/app.js index 76cf1bae1..de6a06a58 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -76,6 +76,7 @@ function mapStateToProps (state) { lastUnreadNotice: state.metamask.lastUnreadNotice, lostAccounts: state.metamask.lostAccounts, frequentRpcList: state.metamask.frequentRpcList || [], + currentCurrency: state.metamask.currentCurrency, // state needed to get account dropdown temporarily rendering from app bar identities, @@ -96,7 +97,9 @@ function mapDispatchToProps (dispatch, ownProps) { } App.prototype.componentWillMount = function () { - this.props.setCurrentCurrencyToUSD() + if (!this.props.currentCurrency) { + this.props.setCurrentCurrencyToUSD() + } } App.prototype.render = function () { diff --git a/ui/app/components/pending-tx/confirm-deploy-contract.js b/ui/app/components/pending-tx/confirm-deploy-contract.js index ea4aa1dde..d19cec755 100644 --- a/ui/app/components/pending-tx/confirm-deploy-contract.js +++ b/ui/app/components/pending-tx/confirm-deploy-contract.js @@ -21,10 +21,12 @@ function mapStateToProps (state) { const { conversionRate, identities, + currentCurrency, } = state.metamask const accounts = state.metamask.accounts const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] return { + currentCurrency, conversionRate, identities, selectedAddress, @@ -124,15 +126,15 @@ ConfirmDeployContract.prototype.getData = function () { } ConfirmDeployContract.prototype.getAmount = function () { - const { conversionRate } = this.props + const { conversionRate, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - const USD = conversionUtil(txParams.value, { + const FIAT = conversionUtil(txParams.value, { fromNumericBase: 'hex', toNumericBase: 'dec', fromCurrency: 'ETH', - toCurrency: 'USD', + toCurrency: currentCurrency, numberOfDecimals: 2, fromDenomination: 'WEI', conversionRate, @@ -148,14 +150,14 @@ ConfirmDeployContract.prototype.getAmount = function () { }) return { - fiat: Number(USD), + fiat: Number(FIAT), token: Number(ETH), } } ConfirmDeployContract.prototype.getGasFee = function () { - const { conversionRate } = this.props + const { conversionRate, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -169,12 +171,12 @@ ConfirmDeployContract.prototype.getGasFee = function () { const txFeeBn = gasBn.mul(gasPriceBn) - const USD = conversionUtil(txFeeBn, { + const FIAT = conversionUtil(txFeeBn, { fromNumericBase: 'BN', toNumericBase: 'dec', fromDenomination: 'WEI', fromCurrency: 'ETH', - toCurrency: 'USD', + toCurrency: currentCurrency, numberOfDecimals: 2, conversionRate, }) @@ -189,7 +191,7 @@ ConfirmDeployContract.prototype.getGasFee = function () { }) return { - fiat: Number(USD), + fiat: Number(FIAT), eth: Number(ETH), } } @@ -200,7 +202,7 @@ ConfirmDeployContract.prototype.renderGasFee = function () { h('section.flex-row.flex-center.confirm-screen-row', [ h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `$${fiatGas} USD`), + h('div.confirm-screen-row-info', `${fiatGas} FIAT`), h( 'div.confirm-screen-row-detail', @@ -212,6 +214,7 @@ ConfirmDeployContract.prototype.renderGasFee = function () { } ConfirmDeployContract.prototype.renderHeroAmount = function () { + const { currentCurrency } = this.props const { fiat: fiatAmount } = this.getAmount() const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -219,8 +222,8 @@ ConfirmDeployContract.prototype.renderHeroAmount = function () { return ( h('div.confirm-send-token__hero-amount-wrapper', [ - h('h3.flex-center.confirm-screen-send-amount', `$${fiatAmount}`), - h('h3.flex-center.confirm-screen-send-amount-currency', 'USD'), + h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`), + h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency.toUpperCase()), h('div.flex-center.confirm-memo-wrapper', [ h('h3.confirm-screen-send-memo', memo), ]), @@ -229,6 +232,7 @@ ConfirmDeployContract.prototype.renderHeroAmount = function () { } ConfirmDeployContract.prototype.renderTotalPlusGas = function () { + const { currentCurrency } = this.props const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const { fiat: fiatGas, eth: ethGas } = this.getGasFee() @@ -240,7 +244,7 @@ ConfirmDeployContract.prototype.renderTotalPlusGas = function () { ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `$${fiatAmount + fiatGas} USD`), + h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency.toUpperCase()}`), h('div.confirm-screen-row-detail', `${tokenAmount + ethGas} ETH`), ]), ]) diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index 537a9a659..51c36ba42 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -20,6 +20,7 @@ function mapStateToProps (state) { const { conversionRate, identities, + currentCurrency, } = state.metamask const accounts = state.metamask.accounts const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0] @@ -27,6 +28,7 @@ function mapStateToProps (state) { conversionRate, identities, selectedAddress, + currentCurrency, } } @@ -45,15 +47,15 @@ function ConfirmSendEther () { } ConfirmSendEther.prototype.getAmount = function () { - const { conversionRate } = this.props + const { conversionRate, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - console.log(txParams) - const USD = conversionUtil(txParams.value, { + console.log(`conversionRate, currentCurrency`, conversionRate, currentCurrency); + const FIAT = conversionUtil(txParams.value, { fromNumericBase: 'hex', toNumericBase: 'dec', fromCurrency: 'ETH', - toCurrency: 'USD', + toCurrency: currentCurrency, numberOfDecimals: 2, fromDenomination: 'WEI', conversionRate, @@ -69,14 +71,14 @@ ConfirmSendEther.prototype.getAmount = function () { }) return { - USD, + FIAT, ETH, } } ConfirmSendEther.prototype.getGasFee = function () { - const { conversionRate } = this.props + const { conversionRate, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -96,12 +98,12 @@ ConfirmSendEther.prototype.getGasFee = function () { const txFeeBn = gasBn.mul(gasPriceBn) - const USD = conversionUtil(txFeeBn, { + const FIAT = conversionUtil(txFeeBn, { fromNumericBase: 'BN', toNumericBase: 'dec', fromDenomination: 'WEI', fromCurrency: 'ETH', - toCurrency: 'USD', + toCurrency: currentCurrency, numberOfDecimals: 2, conversionRate, }) @@ -116,7 +118,7 @@ ConfirmSendEther.prototype.getGasFee = function () { }) return { - USD, + FIAT, ETH, } } @@ -125,10 +127,10 @@ ConfirmSendEther.prototype.getData = function () { const { identities } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - const { USD: gasFeeInUSD, ETH: gasFeeInETH } = this.getGasFee() - const { USD: amountInUSD, ETH: amountInETH } = this.getAmount() + const { FIAT: gasFeeInFIAT, ETH: gasFeeInETH } = this.getGasFee() + const { FIAT: amountInFIAT, ETH: amountInETH } = this.getAmount() - const totalInUSD = addCurrencies(gasFeeInUSD, amountInUSD, { + const totalInFIAT = addCurrencies(gasFeeInFIAT, amountInFIAT, { toNumericBase: 'dec', numberOfDecimals: 2, }) @@ -147,17 +149,17 @@ ConfirmSendEther.prototype.getData = function () { name: identities[txParams.to] ? identities[txParams.to].name : 'New Recipient', }, memo: txParams.memo || '', - gasFeeInUSD, + gasFeeInFIAT, gasFeeInETH, - amountInUSD, + amountInFIAT, amountInETH, - totalInUSD, + totalInFIAT, totalInETH, } } ConfirmSendEther.prototype.render = function () { - const { backToAccountDetail, selectedAddress } = this.props + const { backToAccountDetail, selectedAddress, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -171,10 +173,10 @@ ConfirmSendEther.prototype.render = function () { name: toName, }, memo, - gasFeeInUSD, + gasFeeInFIAT, gasFeeInETH, - amountInUSD, - totalInUSD, + amountInFIAT, + totalInFIAT, totalInETH, } = this.getData() @@ -239,8 +241,8 @@ ConfirmSendEther.prototype.render = function () { // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, // ]), - h('h3.flex-center.confirm-screen-send-amount', [`$${amountInUSD}`]), - h('h3.flex-center.confirm-screen-send-amount-currency', [ 'USD' ]), + h('h3.flex-center.confirm-screen-send-amount', [`$${amountInFIAT}`]), + h('h3.flex-center.confirm-screen-send-amount-currency', [ currentCurrency.toUpperCase() ]), h('div.flex-center.confirm-memo-wrapper', [ h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), ]), @@ -265,7 +267,7 @@ ConfirmSendEther.prototype.render = function () { h('section.flex-row.flex-center.confirm-screen-row', [ h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `$${gasFeeInUSD} USD`), + h('div.confirm-screen-row-info', `${gasFeeInFIAT} ${currentCurrency.toUpperCase()}`), h('div.confirm-screen-row-detail', `${gasFeeInETH} ETH`), ]), @@ -279,7 +281,7 @@ ConfirmSendEther.prototype.render = function () { ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `$${totalInUSD} USD`), + h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`), h('div.confirm-screen-row-detail', `${totalInETH} ETH`), ]), ]), diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 92bba8f62..155242f56 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -81,7 +81,7 @@ ConfirmSendToken.prototype.getAmount = function () { } ConfirmSendToken.prototype.getGasFee = function () { - const { conversionRate, tokenExchangeRate, token } = this.props + const { conversionRate, tokenExchangeRate, token, currentCurrency } = this.props const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} const { decimals } = token @@ -96,12 +96,12 @@ ConfirmSendToken.prototype.getGasFee = function () { const txFeeBn = gasBn.mul(gasPriceBn) - const USD = conversionUtil(txFeeBn, { + const FIAT = conversionUtil(txFeeBn, { fromNumericBase: 'BN', toNumericBase: 'dec', fromDenomination: 'WEI', fromCurrency: 'ETH', - toCurrency: 'USD', + toCurrency: currentCurrency, numberOfDecimals: 2, conversionRate, }) @@ -116,7 +116,7 @@ ConfirmSendToken.prototype.getGasFee = function () { }) return { - fiat: +Number(USD).toFixed(2), + fiat: +Number(FIAT).toFixed(2), eth: ETH, token: tokenExchangeRate ? +(ETH * tokenExchangeRate).toFixed(decimals) @@ -145,7 +145,7 @@ ConfirmSendToken.prototype.getData = function () { } ConfirmSendToken.prototype.renderHeroAmount = function () { - const { token: { symbol } } = this.props + const { token: { symbol }, currentCurrency } = this.props const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} @@ -154,8 +154,8 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { return fiatAmount ? ( h('div.confirm-send-token__hero-amount-wrapper', [ - h('h3.flex-center.confirm-screen-send-amount', `$${fiatAmount}`), - h('h3.flex-center.confirm-screen-send-amount-currency', 'USD'), + h('h3.flex-center.confirm-screen-send-amount', `${fiatAmount}`), + h('h3.flex-center.confirm-screen-send-amount-currency', currentCurrency), h('div.flex-center.confirm-memo-wrapper', [ h('h3.confirm-screen-send-memo', [ memo ? `"${memo}"` : '' ]), ]), @@ -173,14 +173,14 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { } ConfirmSendToken.prototype.renderGasFee = function () { - const { token: { symbol } } = this.props + const { token: { symbol }, currentCurrency } = this.props const { fiat: fiatGas, token: tokenGas, eth: ethGas } = this.getGasFee() return ( h('section.flex-row.flex-center.confirm-screen-row', [ h('span.confirm-screen-label.confirm-screen-section-column', [ 'Gas Fee' ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `$${fiatGas} USD`), + h('div.confirm-screen-row-info', `${fiatGas} ${currentCurrency}`), h( 'div.confirm-screen-row-detail', @@ -192,7 +192,7 @@ ConfirmSendToken.prototype.renderGasFee = function () { } ConfirmSendToken.prototype.renderTotalPlusGas = function () { - const { token: { symbol } } = this.props + const { token: { symbol }, currentCurrency } = this.props const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const { fiat: fiatGas, token: tokenGas } = this.getGasFee() @@ -205,7 +205,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `$${fiatAmount + fiatGas} USD`), + h('div.confirm-screen-row-info', `${fiatAmount + fiatGas} ${currentCurrency}`), h('div.confirm-screen-row-detail', `${tokenAmount + tokenGas} ${symbol}`), ]), ]) @@ -219,7 +219,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { h('div.confirm-screen-section-column', [ h('div.confirm-screen-row-info', `${tokenAmount} ${symbol}`), - h('div.confirm-screen-row-detail', `+ ${fiatGas} USD Gas`), + h('div.confirm-screen-row-detail', `+ ${fiatGas} ${currentCurrency} Gas`), ]), ]) ) diff --git a/ui/app/components/pending-tx/index.js b/ui/app/components/pending-tx/index.js index 770fb1dfd..f4f6afb8f 100644 --- a/ui/app/components/pending-tx/index.js +++ b/ui/app/components/pending-tx/index.js @@ -36,7 +36,6 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { - setCurrentCurrencyToUSD: () => dispatch(actions.setCurrentCurrency('usd')), backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), } @@ -58,8 +57,6 @@ PendingTx.prototype.componentWillMount = async function () { const txMeta = this.gatherTxMeta() const txParams = txMeta.txParams || {} - this.props.setCurrentCurrencyToUSD() - if (!txParams.to) { return this.setState({ transactionType: TX_TYPES.DEPLOY_CONTRACT, diff --git a/ui/app/components/send/account-list-item.js b/ui/app/components/send/account-list-item.js index 64acde767..0938f4cad 100644 --- a/ui/app/components/send/account-list-item.js +++ b/ui/app/components/send/account-list-item.js @@ -4,7 +4,7 @@ const inherits = require('util').inherits const connect = require('react-redux').connect const Identicon = require('../identicon') const CurrencyDisplay = require('./currency-display') -const { conversionRateSelector } = require('../../selectors') +const { conversionRateSelector, getCurrentCurrency } = require('../../selectors') inherits(AccountListItem, Component) function AccountListItem () { @@ -13,7 +13,8 @@ function AccountListItem () { function mapStateToProps(state) { return { - conversionRate: conversionRateSelector(state) + conversionRate: conversionRateSelector(state), + currentCurrency: getCurrentCurrency(state), } } @@ -25,6 +26,7 @@ AccountListItem.prototype.render = function () { handleClick, icon = null, conversionRate, + currentCurrency, } = this.props const { name, address, balance } = account @@ -52,10 +54,9 @@ AccountListItem.prototype.render = function () { h(CurrencyDisplay, { primaryCurrency: 'ETH', - convertedCurrency: 'USD', + convertedCurrency: currentCurrency, value: balance, conversionRate, - convertedPrefix: '$', readOnly: true, className: 'account-list-item__account-balances', primaryBalanceClassName: 'account-list-item__account-primary-balance', diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index f7fbb2379..2c9a2d33b 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -118,7 +118,7 @@ CurrencyDisplay.prototype.render = function () { h('div', { className: convertedBalanceClassName, - }, `${convertedPrefix}${convertedValue} ${convertedCurrency}`), + }, `${convertedValue} ${convertedCurrency.toUpperCase()}`), ]) diff --git a/ui/app/components/send/gas-fee-display-v2.js b/ui/app/components/send/gas-fee-display-v2.js index 3b39312ec..0e23b63ac 100644 --- a/ui/app/components/send/gas-fee-display-v2.js +++ b/ui/app/components/send/gas-fee-display-v2.js @@ -15,6 +15,8 @@ GasFeeDisplay.prototype.render = function () { conversionRate, gasTotal, onClick, + primaryCurrency = 'ETH', + convertedCurrency, } = this.props return h('div.send-v2__gas-fee-display', [ @@ -22,7 +24,7 @@ GasFeeDisplay.prototype.render = function () { gasTotal ? h(CurrencyDisplay, { primaryCurrency: 'ETH', - convertedCurrency: 'USD', + convertedCurrency, value: gasTotal, conversionRate, convertedPrefix: '$', diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index ebe2b878b..c14865e9f 100644 --- a/ui/app/components/send/send-v2-container.js +++ b/ui/app/components/send/send-v2-container.js @@ -16,6 +16,7 @@ const { getGasLimit, getAddressBook, getSendFrom, + getCurrentCurrency, } = require('../../selectors') module.exports = connect(mapStateToProps, mapDispatchToProps)(SendEther) @@ -30,7 +31,7 @@ function mapStateToProps (state) { let data; let primaryCurrency; - let tokenToUSDRate; + let tokenToFiatRate; if (selectedToken) { data = Array.prototype.map.call( abi.rawEncode(['address', 'uint256'], [selectedAddress, '0x0']), @@ -39,7 +40,7 @@ function mapStateToProps (state) { primaryCurrency = selectedToken.symbol - tokenToUSDRate = multiplyCurrencies( + tokenToFiatRate = multiplyCurrencies( conversionRate, selectedTokenExchangeRate, { toNumericBase: 'dec' } @@ -54,8 +55,9 @@ function mapStateToProps (state) { conversionRate, selectedToken, primaryCurrency, + convertedCurrency: getCurrentCurrency(state), data, - amountConversionRate: selectedToken ? tokenToUSDRate : conversionRate, + amountConversionRate: selectedToken ? tokenToFiatRate : conversionRate, } } diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 8422c02b9..3bb9a2eda 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -11,11 +11,14 @@ const Identicon = require('./identicon') const { conversionUtil } = require('../conversion-util') +const { getCurrentCurrency } = require('../selectors') + module.exports = connect(mapStateToProps)(TxListItem) function mapStateToProps (state) { return { tokens: state.metamask.tokens, + currentCurrency: getCurrentCurrency(state), } } @@ -49,17 +52,18 @@ TxListItem.prototype.getSendEtherTotal = function () { transactionAmount, conversionRate, address, + currentCurrency, } = this.props if (!address) { return {} } - const totalInUSD = conversionUtil(transactionAmount, { + const totalInFiat = conversionUtil(transactionAmount, { fromNumericBase: 'hex', toNumericBase: 'dec', fromCurrency: 'ETH', - toCurrency: 'USD', + toCurrency: currentCurrency, fromDenomination: 'WEI', numberOfDecimals: 2, conversionRate, @@ -76,7 +80,7 @@ TxListItem.prototype.getSendEtherTotal = function () { return { total: `${totalInETH} ETH`, - fiatTotal: `$${totalInUSD} USD`, + fiatTotal: `${totalInFiat} ${currentCurrency.toUpperCase()}`, } } diff --git a/ui/app/config.js b/ui/app/config.js index 282a28301..8b4044882 100644 --- a/ui/app/config.js +++ b/ui/app/config.js @@ -170,6 +170,7 @@ function currentConversionInformation (metamaskState, state) { }, defaultValue: currentCurrency, }, infuraCurrencies.map((currency) => { + console.log(`currency`, currency); return h('option', {key: currency.quote.code, value: currency.quote.code}, `${currency.quote.code.toUpperCase()} - ${currency.quote.name}`) }) ), diff --git a/ui/app/conversion-util.js b/ui/app/conversion-util.js index e008ee1cb..50f903d9f 100644 --- a/ui/app/conversion-util.js +++ b/ui/app/conversion-util.js @@ -36,7 +36,7 @@ const BIG_NUMBER_GWEI_MULTIPLIER = new BigNumber('1000000000') // Individual Setters const convert = R.invoker(1, 'times') -const round = R.invoker(2, 'toFormat')(R.__, BigNumber.ROUND_DOWN) +const round = R.invoker(2, 'round')(R.__, BigNumber.ROUND_DOWN) const invertConversionRate = conversionRate => () => new BigNumber(1.0).div(conversionRate) // Setter Maps diff --git a/ui/app/selectors.js b/ui/app/selectors.js index 9d4e6eb67..1cfbc3975 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -14,6 +14,7 @@ const selectors = { getGasLimit, getAddressBook, getSendFrom, + getCurrentCurrency, } module.exports = selectors @@ -112,3 +113,7 @@ function getGasLimit (state) { function getSendFrom (state) { return state.metamask.send.from } + +function getCurrentCurrency (state) { + return state.metamask.currentCurrency +} diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 8915350a3..effa68b4b 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -277,6 +277,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () { const { selectedToken, primaryCurrency = 'ETH', + convertedCurrency, amountConversionRate, errors, } = this.props @@ -294,10 +295,9 @@ SendTransactionScreen.prototype.renderAmountRow = function () { h(CurrencyDisplay, { inError: Boolean(errors.amount), primaryCurrency, - convertedCurrency: 'USD', + convertedCurrency, value: amount, conversionRate: amountConversionRate, - convertedPrefix: '$', handleChange: this.handleAmountChange, validate: this.validateAmount, }), @@ -309,6 +309,7 @@ SendTransactionScreen.prototype.renderAmountRow = function () { SendTransactionScreen.prototype.renderGasRow = function () { const { conversionRate, + convertedCurrency, showCustomizeGasModal, gasTotal = MIN_GAS_TOTAL, } = this.props @@ -322,6 +323,7 @@ SendTransactionScreen.prototype.renderGasRow = function () { h(GasFeeDisplay, { gasTotal, conversionRate, + convertedCurrency, onClick: showCustomizeGasModal, }),