From 74049c19fce8ee77b1fa9933e26ac3569e3513f9 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 3 Apr 2018 13:52:01 -0700 Subject: Internationalize currency Fixes #3580 --- ui/app/components/balance-component.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index d591ab455..f6ca6dd26 100644 --- a/ui/app/components/balance-component.js +++ b/ui/app/components/balance-component.js @@ -4,6 +4,7 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const TokenBalance = require('./token-balance') const Identicon = require('./identicon') +const currencyFormatter = require('currency-formatter') const { formatBalance, generateBalanceObject } = require('../util') @@ -97,9 +98,13 @@ BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatS const shouldNotRenderFiat = fiatDisplayNumber === 'N/A' || Number(fiatDisplayNumber) === 0 if (shouldNotRenderFiat) return null + const display = currencyFormatter.format(Number(fiatDisplayNumber), { + code: fiatSuffix.toUpperCase() + }) + return h('div.fiat-amount', { style: {}, - }, `${fiatPrefix}${fiatDisplayNumber} ${fiatSuffix}`) + }, display) } BalanceComponent.prototype.getTokenBalance = function (formattedBalance, shorten) { -- cgit v1.2.3 From 99c22a0835e8f9351057374ff7cb027a5104236b Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Tue, 3 Apr 2018 14:00:04 -0700 Subject: Linted --- ui/app/components/balance-component.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index f6ca6dd26..22f5920a6 100644 --- a/ui/app/components/balance-component.js +++ b/ui/app/components/balance-component.js @@ -99,7 +99,7 @@ BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatS if (shouldNotRenderFiat) return null const display = currencyFormatter.format(Number(fiatDisplayNumber), { - code: fiatSuffix.toUpperCase() + code: fiatSuffix.toUpperCase(), }) return h('div.fiat-amount', { -- cgit v1.2.3 From 4011dac6f6826a7588e66e1a1e07b180e19755af Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 9 Apr 2018 13:41:40 -0230 Subject: Improve display of crypto currencies when selected as the 'Current Conversion' --- ui/app/components/balance-component.js | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index 22f5920a6..67e84bd5a 100644 --- a/ui/app/components/balance-component.js +++ b/ui/app/components/balance-component.js @@ -5,6 +5,7 @@ const inherits = require('util').inherits const TokenBalance = require('./token-balance') const Identicon = require('./identicon') const currencyFormatter = require('currency-formatter') +const currencies = require('currency-formatter/currencies'); const { formatBalance, generateBalanceObject } = require('../util') @@ -98,9 +99,13 @@ BalanceComponent.prototype.renderFiatAmount = function (fiatDisplayNumber, fiatS const shouldNotRenderFiat = fiatDisplayNumber === 'N/A' || Number(fiatDisplayNumber) === 0 if (shouldNotRenderFiat) return null - const display = currencyFormatter.format(Number(fiatDisplayNumber), { - code: fiatSuffix.toUpperCase(), - }) + const upperCaseFiatSuffix = fiatSuffix.toUpperCase() + + const display = currencies.find(currency => currency.code === upperCaseFiatSuffix) + ? currencyFormatter.format(Number(fiatDisplayNumber), { + code: upperCaseFiatSuffix, + }) + : `${fiatPrefix}${fiatDisplayNumber} ${upperCaseFiatSuffix}` return h('div.fiat-amount', { style: {}, @@ -122,5 +127,9 @@ BalanceComponent.prototype.getFiatDisplayNumber = function (formattedBalance, co const splitBalance = formattedBalance.split(' ') - return (Number(splitBalance[0]) * conversionRate).toFixed(2) + const convertedNumber = (Number(splitBalance[0]) * conversionRate) + const wholePart = Math.floor(convertedNumber) + const decimalPart = convertedNumber - wholePart + + return wholePart + Number(decimalPart.toPrecision(2)) } -- cgit v1.2.3 From 1382de2cda792800767e8a6fa068828282ca146e Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 9 Apr 2018 14:14:09 -0230 Subject: Internationalize converted value in currency-input.js --- ui/app/components/send/currency-display.js | 35 +++++++++++++++++++++--------- 1 file changed, 25 insertions(+), 10 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index 819fee0a0..c8df40a14 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -3,6 +3,8 @@ const h = require('react-hyperscript') const inherits = require('util').inherits const CurrencyInput = require('../currency-input') const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') +const currencyFormatter = require('currency-formatter') +const currencies = require('currency-formatter/currencies'); module.exports = CurrencyDisplay @@ -53,12 +55,32 @@ CurrencyDisplay.prototype.getValueToRender = function () { }) } +CurrencyDisplay.prototype.getConvertedValueToRender = function (nonFormattedValue) { + const { primaryCurrency, convertedCurrency, conversionRate } = this.props + + let convertedValue = conversionUtil(nonFormattedValue, { + fromNumericBase: 'dec', + fromCurrency: primaryCurrency, + toCurrency: convertedCurrency, + numberOfDecimals: 2, + conversionRate, + }) + convertedValue = Number(convertedValue).toFixed(2) + + const upperCaseCurrencyCode = convertedCurrency.toUpperCase() + + return currencies.find(currency => currency.code === upperCaseCurrencyCode) + ? currencyFormatter.format(Number(convertedValue), { + code: upperCaseCurrencyCode, + }) + : convertedValue +} + CurrencyDisplay.prototype.render = function () { const { className = 'currency-display', primaryBalanceClassName = 'currency-display__input', convertedBalanceClassName = 'currency-display__converted-value', - conversionRate, primaryCurrency, convertedCurrency, readOnly = false, @@ -68,14 +90,7 @@ CurrencyDisplay.prototype.render = function () { const valueToRender = this.getValueToRender() - let convertedValue = conversionUtil(valueToRender, { - fromNumericBase: 'dec', - fromCurrency: primaryCurrency, - toCurrency: convertedCurrency, - numberOfDecimals: 2, - conversionRate, - }) - convertedValue = Number(convertedValue).toFixed(2) + const convertedValueToRender = this.getConvertedValueToRender(valueToRender) return h('div', { className, @@ -108,7 +123,7 @@ CurrencyDisplay.prototype.render = function () { h('div', { className: convertedBalanceClassName, - }, `${convertedValue} ${convertedCurrency.toUpperCase()}`), + }, `${convertedValueToRender} ${convertedCurrency.toUpperCase()}`), ]) -- cgit v1.2.3 From 9dbb9d12ad31d53b8911db171cb7d6b3fcb477e2 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 9 Apr 2018 16:45:23 -0230 Subject: Internationalize converted value in confirm screens --- ui/app/components/pending-tx/confirm-send-ether.js | 19 +++++++++++++++++-- ui/app/components/pending-tx/confirm-send-token.js | 21 +++++++++++++++++++-- 2 files changed, 36 insertions(+), 4 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/pending-tx/confirm-send-ether.js b/ui/app/components/pending-tx/confirm-send-ether.js index d007e6661..2e4e0fbe5 100644 --- a/ui/app/components/pending-tx/confirm-send-ether.js +++ b/ui/app/components/pending-tx/confirm-send-ether.js @@ -21,6 +21,8 @@ const { const GasFeeDisplay = require('../send/gas-fee-display-v2') const SenderToRecipient = require('../sender-to-recipient') const NetworkDisplay = require('../network-display') +const currencyFormatter = require('currency-formatter') +const currencies = require('currency-formatter/currencies') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -269,6 +271,16 @@ ConfirmSendEther.prototype.getData = function () { } } +ConfirmSendEther.prototype.convertToRenderableCurrency = function (value, currencyCode) { + const upperCaseCurrencyCode = currencyCode.toUpperCase() + + return currencies.find(currency => currency.code === upperCaseCurrencyCode) + ? currencyFormatter.format(Number(value), { + code: upperCaseCurrencyCode, + }) + : value +} + ConfirmSendEther.prototype.render = function () { const { editTransaction, @@ -308,6 +320,9 @@ ConfirmSendEther.prototype.render = function () { ? 'Increase your gas fee to attempt to overwrite and speed up your transaction' : 'Please review your transaction.' + const convertedAmountInFiat = this.convertToRenderableCurrency(amountInFIAT, currentCurrency) + const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency) + // This is from the latest master // It handles some of the errors that we are not currently handling // Leaving as comments fo reference @@ -354,7 +369,7 @@ ConfirmSendEther.prototype.render = function () { // `You're sending to Recipient ...${toAddress.slice(toAddress.length - 4)}`, // ]), - h('h3.flex-center.confirm-screen-send-amount', [`${amountInFIAT}`]), + h('h3.flex-center.confirm-screen-send-amount', [`${convertedAmountInFiat}`]), 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}"` : '' ]), @@ -401,7 +416,7 @@ ConfirmSendEther.prototype.render = function () { ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${totalInFIAT} ${currentCurrency.toUpperCase()}`), + h('div.confirm-screen-row-info', `${convertedTotalInFiat} ${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 19e591fd6..65b9b9d07 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -25,6 +25,8 @@ const { calcTokenAmount, } = require('../../token-util') const classnames = require('classnames') +const currencyFormatter = require('currency-formatter') +const currencies = require('currency-formatter/currencies') const { MIN_GAS_PRICE_HEX } = require('../send/send-constants') @@ -310,10 +312,12 @@ ConfirmSendToken.prototype.renderHeroAmount = function () { const txParams = txMeta.txParams || {} const { memo = '' } = txParams + const convertedAmountInFiat = this.convertToRenderableCurrency(fiatAmount, currentCurrency) + 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', `${convertedAmountInFiat}`), 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}"` : '' ]), @@ -361,6 +365,9 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { const { fiat: fiatAmount, token: tokenAmount } = this.getAmount() const { fiat: fiatGas, token: tokenGas } = this.getGasFee() + const totalInFIAT = fiatAmount && fiatGas && addCurrencies(fiatAmount, fiatGas) + const convertedTotalInFiat = this.convertToRenderableCurrency(totalInFIAT, currentCurrency) + return fiatAmount && fiatGas ? ( h('section.flex-row.flex-center.confirm-screen-row.confirm-screen-total-box ', [ @@ -370,7 +377,7 @@ ConfirmSendToken.prototype.renderTotalPlusGas = function () { ]), h('div.confirm-screen-section-column', [ - h('div.confirm-screen-row-info', `${addCurrencies(fiatAmount, fiatGas)} ${currentCurrency}`), + h('div.confirm-screen-row-info', `${convertedTotalInFiat} ${currentCurrency}`), h('div.confirm-screen-row-detail', `${addCurrencies(tokenAmount, tokenGas || '0')} ${symbol}`), ]), ]) @@ -405,6 +412,16 @@ ConfirmSendToken.prototype.renderErrorMessage = function (message) { : null } +ConfirmSendToken.prototype.convertToRenderableCurrency = function (value, currencyCode) { + const upperCaseCurrencyCode = currencyCode.toUpperCase() + + return currencies.find(currency => currency.code === upperCaseCurrencyCode) + ? currencyFormatter.format(Number(value), { + code: upperCaseCurrencyCode, + }) + : value +} + ConfirmSendToken.prototype.render = function () { const { editTransaction } = this.props const txMeta = this.gatherTxMeta() -- cgit v1.2.3 From d8adc527f131d2eedaacea19b400db5a627d73a0 Mon Sep 17 00:00:00 2001 From: Dan Date: Mon, 9 Apr 2018 16:54:52 -0230 Subject: Lint fix. --- ui/app/components/balance-component.js | 2 +- ui/app/components/send/currency-display.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/balance-component.js b/ui/app/components/balance-component.js index 67e84bd5a..e31552f2d 100644 --- a/ui/app/components/balance-component.js +++ b/ui/app/components/balance-component.js @@ -5,7 +5,7 @@ const inherits = require('util').inherits const TokenBalance = require('./token-balance') const Identicon = require('./identicon') const currencyFormatter = require('currency-formatter') -const currencies = require('currency-formatter/currencies'); +const currencies = require('currency-formatter/currencies') const { formatBalance, generateBalanceObject } = require('../util') diff --git a/ui/app/components/send/currency-display.js b/ui/app/components/send/currency-display.js index c8df40a14..a7bd5d7ea 100644 --- a/ui/app/components/send/currency-display.js +++ b/ui/app/components/send/currency-display.js @@ -4,7 +4,7 @@ const inherits = require('util').inherits const CurrencyInput = require('../currency-input') const { conversionUtil, multiplyCurrencies } = require('../../conversion-util') const currencyFormatter = require('currency-formatter') -const currencies = require('currency-formatter/currencies'); +const currencies = require('currency-formatter/currencies') module.exports = CurrencyDisplay -- cgit v1.2.3 From 7129d7c0f3ce11839f8b8a576eb1e2c093fb96cc Mon Sep 17 00:00:00 2001 From: bitpshr Date: Thu, 12 Apr 2018 17:06:59 -0400 Subject: Require loglevel singleton in each module that uses it --- ui/app/actions.js | 1 + ui/app/app.js | 1 + ui/app/components/ens-input.js | 1 + ui/app/components/pages/home.js | 1 + ui/app/components/pages/keychains/restore-vault.js | 1 + ui/app/components/token-balance.js | 1 + ui/app/components/token-list.js | 1 + ui/app/conf-tx.js | 1 + ui/app/keychains/hd/restore-vault.js | 1 + ui/app/main-container.js | 1 + ui/app/reducers/app.js | 1 + 11 files changed, 11 insertions(+) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 0748a5bea..780edcaba 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -3,6 +3,7 @@ const getBuyEthUrl = require('../../app/scripts/lib/buy-eth-url') const { getTokenAddressFromTokenObject } = require('./util') const ethUtil = require('ethereumjs-util') const { fetchLocale } = require('../i18n-helper') +const log = require('loglevel') var actions = { _setBackgroundConnection: _setBackgroundConnection, diff --git a/ui/app/app.js b/ui/app/app.js index 75c3febb0..827b4e9ce 100644 --- a/ui/app/app.js +++ b/ui/app/app.js @@ -6,6 +6,7 @@ const { compose } = require('recompose') const h = require('react-hyperscript') const actions = require('./actions') const classnames = require('classnames') +const log = require('loglevel') // init const InitializeScreen = require('../../mascara/src/app/first-time').default diff --git a/ui/app/components/ens-input.js b/ui/app/components/ens-input.js index feb0a7037..aff4b6ef6 100644 --- a/ui/app/components/ens-input.js +++ b/ui/app/components/ens-input.js @@ -11,6 +11,7 @@ const ensRE = /.+\..+$/ const ZERO_ADDRESS = '0x0000000000000000000000000000000000000000' const connect = require('react-redux').connect const ToAutoComplete = require('./send/to-autocomplete') +const log = require('loglevel') EnsInput.contextTypes = { t: PropTypes.func, diff --git a/ui/app/components/pages/home.js b/ui/app/components/pages/home.js index 7857a2a99..90b8e1d37 100644 --- a/ui/app/components/pages/home.js +++ b/ui/app/components/pages/home.js @@ -5,6 +5,7 @@ const { Redirect, withRouter } = require('react-router-dom') const { compose } = require('recompose') const h = require('react-hyperscript') const actions = require('../../actions') +const log = require('loglevel') // init const NewKeyChainScreen = require('../../new-keychain') diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js index d57894e00..33575bfbb 100644 --- a/ui/app/components/pages/keychains/restore-vault.js +++ b/ui/app/components/pages/keychains/restore-vault.js @@ -6,6 +6,7 @@ const connect = require('../../../metamask-connect') const h = require('react-hyperscript') const { createNewVaultAndRestore, unMarkPasswordForgotten } = require('../../../actions') const { DEFAULT_ROUTE } = require('../../../routes') +const log = require('loglevel') class RestoreVaultPage extends PersistentForm { constructor (props) { diff --git a/ui/app/components/token-balance.js b/ui/app/components/token-balance.js index 2f71c0687..1900ccec7 100644 --- a/ui/app/components/token-balance.js +++ b/ui/app/components/token-balance.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const TokenTracker = require('eth-token-tracker') const connect = require('react-redux').connect const selectors = require('../selectors') +const log = require('loglevel') function mapStateToProps (state) { return { diff --git a/ui/app/components/token-list.js b/ui/app/components/token-list.js index 150a3762d..4189cf801 100644 --- a/ui/app/components/token-list.js +++ b/ui/app/components/token-list.js @@ -6,6 +6,7 @@ const TokenTracker = require('eth-token-tracker') const TokenCell = require('./token-cell.js') const connect = require('react-redux').connect const selectors = require('../selectors') +const log = require('loglevel') function mapStateToProps (state) { return { diff --git a/ui/app/conf-tx.js b/ui/app/conf-tx.js index fee7cd36f..b71538e31 100644 --- a/ui/app/conf-tx.js +++ b/ui/app/conf-tx.js @@ -6,6 +6,7 @@ const { withRouter } = require('react-router-dom') const { compose } = require('recompose') const actions = require('./actions') const txHelper = require('../lib/tx-helper') +const log = require('loglevel') const PendingTx = require('./components/pending-tx') const SignatureRequest = require('./components/signature-request') diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js index 38ad14adb..913d20505 100644 --- a/ui/app/keychains/hd/restore-vault.js +++ b/ui/app/keychains/hd/restore-vault.js @@ -4,6 +4,7 @@ const PersistentForm = require('../../../lib/persistent-form') const connect = require('react-redux').connect const h = require('react-hyperscript') const actions = require('../../actions') +const log = require('loglevel') RestoreVaultScreen.contextTypes = { t: PropTypes.func, diff --git a/ui/app/main-container.js b/ui/app/main-container.js index 6dd4ff151..c305687ea 100644 --- a/ui/app/main-container.js +++ b/ui/app/main-container.js @@ -4,6 +4,7 @@ const inherits = require('util').inherits const AccountAndTransactionDetails = require('./account-and-transaction-details') const Settings = require('./components/pages/settings') const UnlockScreen = require('./components/pages/unlock') +const log = require('loglevel') module.exports = MainContainer diff --git a/ui/app/reducers/app.js b/ui/app/reducers/app.js index 74a0f9299..2b39eb8db 100644 --- a/ui/app/reducers/app.js +++ b/ui/app/reducers/app.js @@ -1,6 +1,7 @@ const extend = require('xtend') const actions = require('../actions') const txHelper = require('../../lib/tx-helper') +const log = require('loglevel') module.exports = reduceApp -- cgit v1.2.3 From 34692acdf918f3e75eb61f768f3869bd76e4b3b9 Mon Sep 17 00:00:00 2001 From: Dan Finlay Date: Fri, 13 Apr 2018 16:14:23 -0700 Subject: Fix action for setting locale --- ui/app/reducers/metamask.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'ui/app') diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 6d0a5bb10..0493a1ff7 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -358,7 +358,7 @@ function reduceMetamask (state, action) { welcomeScreenSeen: true, }) - case action.SET_CURRENT_LOCALE: + case actions.SET_CURRENT_LOCALE: return extend(metamaskState, { currentLocale: action.value, }) -- cgit v1.2.3 From a350e80feea6747a5e10088ac6ec15171a590a65 Mon Sep 17 00:00:00 2001 From: bitpshr Date: Sun, 15 Apr 2018 23:37:42 -0400 Subject: Fetch token prices based on contract address --- ui/app/actions.js | 68 ++++++++++++++-------- ui/app/components/pending-tx/confirm-send-token.js | 8 +-- ui/app/components/send/send-v2-container.js | 2 +- ui/app/components/token-cell.js | 20 ++----- ui/app/components/tx-list-item.js | 18 +++--- ui/app/reducers/metamask.js | 23 +++++--- ui/app/selectors.js | 19 ++---- ui/app/send-v2.js | 8 +-- 8 files changed, 85 insertions(+), 81 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 0748a5bea..6453a2bc2 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -220,8 +220,10 @@ var actions = { coinBaseSubview: coinBaseSubview, SHAPESHIFT_SUBVIEW: 'SHAPESHIFT_SUBVIEW', shapeShiftSubview: shapeShiftSubview, - UPDATE_TOKEN_EXCHANGE_RATE: 'UPDATE_TOKEN_EXCHANGE_RATE', - updateTokenExchangeRate, + UPDATE_CONTRACT_EXCHANGE_RATES: 'UPDATE_CONTRACT_EXCHANGE_RATES', + UPDATE_CONTRACT_EXCHANGE_RATE: 'UPDATE_CONTRACT_EXCHANGE_RATE', + updateContractExchangeRates, + updateContractExchangeRate, PAIR_UPDATE: 'PAIR_UPDATE', pairUpdate: pairUpdate, coinShiftRquest: coinShiftRquest, @@ -1080,9 +1082,12 @@ function unlockMetamask (account) { } function updateMetamaskState (newState) { - return { - type: actions.UPDATE_METAMASK_STATE, - value: newState, + return async dispatch => { + await dispatch({ + type: actions.UPDATE_METAMASK_STATE, + value: newState, + }) + dispatch(updateContractExchangeRates()) } } @@ -1295,9 +1300,12 @@ function addTokens (tokens) { } function updateTokens (newTokens) { - return { - type: actions.UPDATE_TOKENS, - newTokens, + return async dispatch => { + await dispatch({ + type: actions.UPDATE_TOKENS, + newTokens, + }) + dispatch(updateContractExchangeRates()) } } @@ -1751,24 +1759,38 @@ function shapeShiftRequest (query, options, cb) { } } -function updateTokenExchangeRate (token = '') { - const pair = `${token.toLowerCase()}_eth` +async function fetchContractRate (address) { + try { + const response = await fetch(`https://exchanges.balanc3.net/prices?from=${address}&to=ETH&autoConversion=false&summaryOnly=true`) + const json = await response.json() + const rate = json && json.length ? json[0].averagePrice : 0 + return { address, rate } + } catch (error) { } +} - return dispatch => { - if (!token) { - return +function updateContractExchangeRates () { + return async (dispatch, getState) => { + const { metamask: { tokens = [] } } = getState() + const newExchangeRates = {} + + for (const i in tokens) { + const address = tokens[i].address + newExchangeRates[address] = (await fetchContractRate(address)).rate } - shapeShiftRequest('marketinfo', { pair }, marketinfo => { - if (!marketinfo.error) { - dispatch({ - type: actions.UPDATE_TOKEN_EXCHANGE_RATE, - payload: { - pair, - marketinfo, - }, - }) - } + dispatch({ + type: actions.UPDATE_CONTRACT_EXCHANGE_RATES, + payload: { newExchangeRates }, + }) + } +} + +function updateContractExchangeRate (address) { + return async dispatch => { + const { address, rate } = await fetchContractRate(address) + dispatch({ + type: actions.UPDATE_CONTRACT_EXCHANGE_RATE, + payload: { address, rate }, }) } } diff --git a/ui/app/components/pending-tx/confirm-send-token.js b/ui/app/components/pending-tx/confirm-send-token.js index 6942f9b51..37130a1cc 100644 --- a/ui/app/components/pending-tx/confirm-send-token.js +++ b/ui/app/components/pending-tx/confirm-send-token.js @@ -48,7 +48,7 @@ module.exports = compose( function mapStateToProps (state, ownProps) { - const { token: { symbol }, txData } = ownProps + const { token: { address }, txData } = ownProps const { txParams } = txData || {} const tokenData = txParams.data && abiDecoder.decodeMethod(txParams.data) @@ -59,7 +59,7 @@ function mapStateToProps (state, ownProps) { } = state.metamask const accounts = state.metamask.accounts const selectedAddress = getSelectedAddress(state) - const tokenExchangeRate = getTokenExchangeRate(state, symbol) + const tokenExchangeRate = getTokenExchangeRate(state, address) const { balance } = accounts[selectedAddress] return { conversionRate, @@ -75,12 +75,9 @@ function mapStateToProps (state, ownProps) { } function mapDispatchToProps (dispatch, ownProps) { - const { token: { symbol } } = ownProps - return { backToAccountDetail: address => dispatch(actions.backToAccountDetail(address)), cancelTransaction: ({ id }) => dispatch(actions.cancelTx({ id })), - updateTokenExchangeRate: () => dispatch(actions.updateTokenExchangeRate(symbol)), editTransaction: txMeta => { const { token: { address } } = ownProps const { txParams = {}, id } = txMeta @@ -203,7 +200,6 @@ ConfirmSendToken.prototype.componentWillMount = function () { .balanceOf(selectedAddress) .then(usersToken => { }) - this.props.updateTokenExchangeRate() this.updateComponentSendErrors({}) } diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index aca1a5a0a..75f16b382 100644 --- a/ui/app/components/send/send-v2-container.js +++ b/ui/app/components/send/send-v2-container.js @@ -66,7 +66,7 @@ function mapDispatchToProps (dispatch) { showCustomizeGasModal: () => dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })), estimateGas: params => dispatch(actions.estimateGas(params)), getGasPrice: () => dispatch(actions.getGasPrice()), - updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)), + updateContractExchangeRate: address => dispatch(actions.updateContractExchangeRate(address)), signTokenTx: (tokenAddress, toAddress, amount, txData) => ( dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData)) ), diff --git a/ui/app/components/token-cell.js b/ui/app/components/token-cell.js index 0332fde88..c84117d84 100644 --- a/ui/app/components/token-cell.js +++ b/ui/app/components/token-cell.js @@ -16,7 +16,7 @@ function mapStateToProps (state) { currentCurrency: state.metamask.currentCurrency, selectedTokenAddress: state.metamask.selectedTokenAddress, userAddress: selectors.getSelectedAddress(state), - tokenExchangeRates: state.metamask.tokenExchangeRates, + contractExchangeRates: state.metamask.contractExchangeRates, conversionRate: state.metamask.conversionRate, sidebarOpen: state.appState.sidebarOpen, } @@ -25,7 +25,6 @@ function mapStateToProps (state) { function mapDispatchToProps (dispatch) { return { setSelectedToken: address => dispatch(actions.setSelectedToken(address)), - updateTokenExchangeRate: token => dispatch(actions.updateTokenExchangeRate(token)), hideSidebar: () => dispatch(actions.hideSidebar()), } } @@ -41,15 +40,6 @@ function TokenCell () { } } -TokenCell.prototype.componentWillMount = function () { - const { - updateTokenExchangeRate, - symbol, - } = this.props - - updateTokenExchangeRate(symbol) -} - TokenCell.prototype.render = function () { const { tokenMenuOpen } = this.state const props = this.props @@ -60,7 +50,7 @@ TokenCell.prototype.render = function () { network, setSelectedToken, selectedTokenAddress, - tokenExchangeRates, + contractExchangeRates, conversionRate, hideSidebar, sidebarOpen, @@ -68,15 +58,13 @@ TokenCell.prototype.render = function () { // userAddress, } = props - const pair = `${symbol.toLowerCase()}_eth` - let currentTokenToFiatRate let currentTokenInFiat let formattedFiat = '' - if (tokenExchangeRates[pair]) { + if (contractExchangeRates[address]) { currentTokenToFiatRate = multiplyCurrencies( - tokenExchangeRates[pair].rate, + contractExchangeRates[address], conversionRate ) currentTokenInFiat = conversionUtil(string, { diff --git a/ui/app/components/tx-list-item.js b/ui/app/components/tx-list-item.js index 42c008798..403f83ab9 100644 --- a/ui/app/components/tx-list-item.js +++ b/ui/app/components/tx-list-item.js @@ -27,7 +27,7 @@ function mapStateToProps (state) { return { tokens: state.metamask.tokens, currentCurrency: getCurrentCurrency(state), - tokenExchangeRates: state.metamask.tokenExchangeRates, + contractExchangeRates: state.metamask.contractExchangeRates, selectedAddressTxList: state.metamask.selectedAddressTxList, } } @@ -142,31 +142,29 @@ TxListItem.prototype.getTokenInfo = async function () { ({ decimals, symbol } = await tokenInfoGetter(toAddress)) } - return { decimals, symbol } + return { decimals, symbol, address: toAddress } } TxListItem.prototype.getSendTokenTotal = async function () { const { txParams = {}, conversionRate, - tokenExchangeRates, + contractExchangeRates, currentCurrency, } = this.props const decodedData = txParams.data && abiDecoder.decodeMethod(txParams.data) const { params = [] } = decodedData || {} const { value } = params[1] || {} - const { decimals, symbol } = await this.getTokenInfo() + const { decimals, symbol, address } = await this.getTokenInfo() const total = calcTokenAmount(value, decimals) - const pair = symbol && `${symbol.toLowerCase()}_eth` - let tokenToFiatRate let totalInFiat - if (tokenExchangeRates[pair]) { + if (contractExchangeRates[address]) { tokenToFiatRate = multiplyCurrencies( - tokenExchangeRates[pair].rate, + contractExchangeRates[address], conversionRate ) @@ -220,7 +218,6 @@ TxListItem.prototype.resubmit = function () { TxListItem.prototype.render = function () { const { transactionStatus, - transactionAmount, onClick, transactionId, dateString, @@ -229,7 +226,6 @@ TxListItem.prototype.render = function () { txParams, } = this.props const { total, fiatTotal, isTokenTx } = this.state - const showFiatTotal = transactionAmount !== '0x0' && fiatTotal return h(`div${className || ''}`, { key: transactionId, @@ -288,7 +284,7 @@ TxListItem.prototype.render = function () { h('span.tx-list-value', total), - showFiatTotal && h('span.tx-list-fiat-value', fiatTotal), + fiatTotal && h('span.tx-list-fiat-value', fiatTotal), ]), ]), diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index 6d0a5bb10..d6b6de3b0 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -24,6 +24,7 @@ function reduceMetamask (state, action) { frequentRpcList: [], addressBook: [], selectedTokenAddress: null, + contractExchangeRates: {}, tokenExchangeRates: {}, tokens: [], send: { @@ -176,14 +177,22 @@ function reduceMetamask (state, action) { conversionDate: action.value.conversionDate, }) - case actions.UPDATE_TOKEN_EXCHANGE_RATE: - const { payload: { pair, marketinfo } } = action - return extend(metamaskState, { - tokenExchangeRates: { - ...metamaskState.tokenExchangeRates, - [pair]: marketinfo, + case actions.UPDATE_CONTRACT_EXCHANGE_RATES: + const { payload: { newExchangeRates } } = action + return { + ...metamaskState, + contractExchangeRates: newExchangeRates, + } + + case actions.UPDATE_CONTRACT_EXCHANGE_RATE: + const { payload: { address, rate } } = action + return { + ...metamaskState, + contractExchangeRates: { + ...metamaskState.contractExchangeRates, + [address]: rate, }, - }) + } case actions.UPDATE_TOKENS: return extend(metamaskState, { diff --git a/ui/app/selectors.js b/ui/app/selectors.js index 2bdc39004..60cc264da 100644 --- a/ui/app/selectors.js +++ b/ui/app/selectors.js @@ -62,22 +62,15 @@ function getSelectedToken (state) { } function getSelectedTokenExchangeRate (state) { - const tokenExchangeRates = state.metamask.tokenExchangeRates + const contractExchangeRates = state.metamask.contractExchangeRates const selectedToken = getSelectedToken(state) || {} - const { symbol = '' } = selectedToken - - const pair = `${symbol.toLowerCase()}_eth` - const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} - - return tokenExchangeRate + const { address } = selectedToken + return contractExchangeRates[address] || 0 } -function getTokenExchangeRate (state, tokenSymbol) { - const pair = `${tokenSymbol.toLowerCase()}_eth` - const tokenExchangeRates = state.metamask.tokenExchangeRates - const { rate: tokenExchangeRate = 0 } = tokenExchangeRates[pair] || {} - - return tokenExchangeRate +function getTokenExchangeRate (state, address) { + const contractExchangeRates = state.metamask.contractExchangeRates + return contractExchangeRates[address] || 0 } function conversionRateSelector (state) { diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index d0c28caa2..12cf55f62 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -89,14 +89,14 @@ SendTransactionScreen.prototype.updateSendTokenBalance = function (usersToken) { SendTransactionScreen.prototype.componentWillMount = function () { const { - updateTokenExchangeRate, + updateContractExchangeRate, selectedToken = {}, } = this.props - const { symbol } = selectedToken || {} + const { address } = selectedToken || {} - if (symbol) { - updateTokenExchangeRate(symbol) + if (address) { + updateContractExchangeRate(address) } this.updateGas() -- cgit v1.2.3 From d0447f90583275868bb72aa7ae8f670bf3668173 Mon Sep 17 00:00:00 2001 From: bitpshr Date: Mon, 16 Apr 2018 11:21:06 -0400 Subject: Maintain token prices using a background service --- ui/app/actions.js | 58 +++-------------------------- ui/app/components/send/send-v2-container.js | 1 - ui/app/reducers/metamask.js | 17 --------- ui/app/send-v2.js | 11 ------ 4 files changed, 6 insertions(+), 81 deletions(-) (limited to 'ui/app') diff --git a/ui/app/actions.js b/ui/app/actions.js index 6453a2bc2..46f34e149 100644 --- a/ui/app/actions.js +++ b/ui/app/actions.js @@ -220,10 +220,6 @@ var actions = { coinBaseSubview: coinBaseSubview, SHAPESHIFT_SUBVIEW: 'SHAPESHIFT_SUBVIEW', shapeShiftSubview: shapeShiftSubview, - UPDATE_CONTRACT_EXCHANGE_RATES: 'UPDATE_CONTRACT_EXCHANGE_RATES', - UPDATE_CONTRACT_EXCHANGE_RATE: 'UPDATE_CONTRACT_EXCHANGE_RATE', - updateContractExchangeRates, - updateContractExchangeRate, PAIR_UPDATE: 'PAIR_UPDATE', pairUpdate: pairUpdate, coinShiftRquest: coinShiftRquest, @@ -1082,12 +1078,9 @@ function unlockMetamask (account) { } function updateMetamaskState (newState) { - return async dispatch => { - await dispatch({ - type: actions.UPDATE_METAMASK_STATE, - value: newState, - }) - dispatch(updateContractExchangeRates()) + return { + type: actions.UPDATE_METAMASK_STATE, + value: newState, } } @@ -1300,12 +1293,9 @@ function addTokens (tokens) { } function updateTokens (newTokens) { - return async dispatch => { - await dispatch({ - type: actions.UPDATE_TOKENS, - newTokens, - }) - dispatch(updateContractExchangeRates()) + return { + type: actions.UPDATE_TOKENS, + newTokens, } } @@ -1759,42 +1749,6 @@ function shapeShiftRequest (query, options, cb) { } } -async function fetchContractRate (address) { - try { - const response = await fetch(`https://exchanges.balanc3.net/prices?from=${address}&to=ETH&autoConversion=false&summaryOnly=true`) - const json = await response.json() - const rate = json && json.length ? json[0].averagePrice : 0 - return { address, rate } - } catch (error) { } -} - -function updateContractExchangeRates () { - return async (dispatch, getState) => { - const { metamask: { tokens = [] } } = getState() - const newExchangeRates = {} - - for (const i in tokens) { - const address = tokens[i].address - newExchangeRates[address] = (await fetchContractRate(address)).rate - } - - dispatch({ - type: actions.UPDATE_CONTRACT_EXCHANGE_RATES, - payload: { newExchangeRates }, - }) - } -} - -function updateContractExchangeRate (address) { - return async dispatch => { - const { address, rate } = await fetchContractRate(address) - dispatch({ - type: actions.UPDATE_CONTRACT_EXCHANGE_RATE, - payload: { address, rate }, - }) - } -} - function setFeatureFlag (feature, activated, notificationType) { return (dispatch) => { dispatch(actions.showLoadingIndication()) diff --git a/ui/app/components/send/send-v2-container.js b/ui/app/components/send/send-v2-container.js index 75f16b382..adfc91240 100644 --- a/ui/app/components/send/send-v2-container.js +++ b/ui/app/components/send/send-v2-container.js @@ -66,7 +66,6 @@ function mapDispatchToProps (dispatch) { showCustomizeGasModal: () => dispatch(actions.showModal({ name: 'CUSTOMIZE_GAS' })), estimateGas: params => dispatch(actions.estimateGas(params)), getGasPrice: () => dispatch(actions.getGasPrice()), - updateContractExchangeRate: address => dispatch(actions.updateContractExchangeRate(address)), signTokenTx: (tokenAddress, toAddress, amount, txData) => ( dispatch(actions.signTokenTx(tokenAddress, toAddress, amount, txData)) ), diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index d6b6de3b0..1ed049be2 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -177,23 +177,6 @@ function reduceMetamask (state, action) { conversionDate: action.value.conversionDate, }) - case actions.UPDATE_CONTRACT_EXCHANGE_RATES: - const { payload: { newExchangeRates } } = action - return { - ...metamaskState, - contractExchangeRates: newExchangeRates, - } - - case actions.UPDATE_CONTRACT_EXCHANGE_RATE: - const { payload: { address, rate } } = action - return { - ...metamaskState, - contractExchangeRates: { - ...metamaskState.contractExchangeRates, - [address]: rate, - }, - } - case actions.UPDATE_TOKENS: return extend(metamaskState, { tokens: action.newTokens, diff --git a/ui/app/send-v2.js b/ui/app/send-v2.js index 12cf55f62..30d3d3152 100644 --- a/ui/app/send-v2.js +++ b/ui/app/send-v2.js @@ -88,17 +88,6 @@ SendTransactionScreen.prototype.updateSendTokenBalance = function (usersToken) { } SendTransactionScreen.prototype.componentWillMount = function () { - const { - updateContractExchangeRate, - selectedToken = {}, - } = this.props - - const { address } = selectedToken || {} - - if (address) { - updateContractExchangeRate(address) - } - this.updateGas() } -- cgit v1.2.3 From b0a105ce809b8b7e5e4431bd1ddecc523586cad0 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Mon, 16 Apr 2018 23:03:47 -0700 Subject: Fix confirmation popup not always opening --- ui/app/components/modals/modal.js | 11 ++++++----- ui/app/components/pages/unlock.js | 5 +++-- ui/app/first-time/init-menu.js | 5 +++-- ui/app/reducers/metamask.js | 5 +++-- ui/app/unlock.js | 5 +++-- 5 files changed, 18 insertions(+), 13 deletions(-) (limited to 'ui/app') diff --git a/ui/app/components/modals/modal.js b/ui/app/components/modals/modal.js index 9250cc77e..43dcd20ae 100644 --- a/ui/app/components/modals/modal.js +++ b/ui/app/components/modals/modal.js @@ -5,7 +5,8 @@ const connect = require('react-redux').connect const FadeModal = require('boron').FadeModal const actions = require('../../actions') const isMobileView = require('../../../lib/is-mobile-view') -const isPopupOrNotification = require('../../../../app/scripts/lib/is-popup-or-notification') +const { getEnvironmentType } = require('../../../../app/scripts/lib/util') +const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums') // Modal Components const BuyOptions = require('./buy-options-modal') @@ -162,7 +163,7 @@ const MODALS = { ], mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', }, laptopModalStyle: { width: '449px', @@ -179,7 +180,7 @@ const MODALS = { ], mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', }, laptopModalStyle: { width: '449px', @@ -196,7 +197,7 @@ const MODALS = { ], mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', }, laptopModalStyle: { width: '449px', @@ -208,7 +209,7 @@ const MODALS = { contents: h(ConfirmResetAccount), mobileModalStyle: { width: '95%', - top: isPopupOrNotification() === 'popup' ? '52vh' : '36.5vh', + top: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP ? '52vh' : '36.5vh', }, laptopModalStyle: { width: '473px', diff --git a/ui/app/components/pages/unlock.js b/ui/app/components/pages/unlock.js index b3320da21..567b72518 100644 --- a/ui/app/components/pages/unlock.js +++ b/ui/app/components/pages/unlock.js @@ -11,7 +11,8 @@ const { setNetworkEndpoints, setFeatureFlag, } = require('../../actions') -const environmentType = require('../../../../app/scripts/lib/environment-type') +const { ENVIRONMENT_TYPE_POPUP } = require('../../../../app/scripts/lib/enums') +const { getEnvironmentType } = require('../../../../app/scripts/lib/util') const getCaretCoordinates = require('textarea-caret') const EventEmitter = require('events').EventEmitter const Mascot = require('../mascot') @@ -131,7 +132,7 @@ class UnlockScreen extends Component { this.props.markPasswordForgotten() this.props.history.push(RESTORE_VAULT_ROUTE) - if (environmentType() === 'popup') { + if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { global.platform.openExtensionInBrowser() } }, diff --git a/ui/app/first-time/init-menu.js b/ui/app/first-time/init-menu.js index 692b01c8c..3df040922 100644 --- a/ui/app/first-time/init-menu.js +++ b/ui/app/first-time/init-menu.js @@ -8,7 +8,8 @@ const actions = require('../actions') const Tooltip = require('../components/tooltip') const getCaretCoordinates = require('textarea-caret') const { RESTORE_VAULT_ROUTE, DEFAULT_ROUTE } = require('../routes') -const environmentType = require('../../../app/scripts/lib/environment-type') +const { getEnvironmentType } = require('../../../app/scripts/lib/util') +const { ENVIRONMENT_TYPE_POPUP } = require('../../../app/scripts/lib/enums') const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums class InitializeMenuScreen extends Component { @@ -180,7 +181,7 @@ class InitializeMenuScreen extends Component { showRestoreVault () { this.props.markPasswordForgotten() - if (environmentType() === 'popup') { + if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { global.platform.openExtensionInBrowser() } diff --git a/ui/app/reducers/metamask.js b/ui/app/reducers/metamask.js index e65dc2d11..5f965fbe0 100644 --- a/ui/app/reducers/metamask.js +++ b/ui/app/reducers/metamask.js @@ -1,7 +1,8 @@ const extend = require('xtend') const actions = require('../actions') const MetamascaraPlatform = require('../../../app/scripts/platforms/window') -const environmentType = require('../../../app/scripts/lib/environment-type') +const { getEnvironmentType } = require('../../../app/scripts/lib/util') +const { ENVIRONMENT_TYPE_POPUP } = require('../../../app/scripts/lib/enums') const { OLD_UI_NETWORK_TYPE } = require('../../../app/scripts/config').enums module.exports = reduceMetamask @@ -15,7 +16,7 @@ function reduceMetamask (state, action) { isUnlocked: false, isAccountMenuOpen: false, isMascara: window.platform instanceof MetamascaraPlatform, - isPopup: environmentType() === 'popup', + isPopup: getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP, rpcTarget: 'https://rawtestrpc.metamask.io/', identities: {}, unapprovedTxs: {}, diff --git a/ui/app/unlock.js b/ui/app/unlock.js index 84d8b7e7c..1325656af 100644 --- a/ui/app/unlock.js +++ b/ui/app/unlock.js @@ -7,7 +7,8 @@ const actions = require('./actions') const getCaretCoordinates = require('textarea-caret') const EventEmitter = require('events').EventEmitter const { OLD_UI_NETWORK_TYPE } = require('../../app/scripts/config').enums -const environmentType = require('../../app/scripts/lib/environment-type') +const { getEnvironmentType } = require('../../app/scripts/lib/util') +const { ENVIRONMENT_TYPE_POPUP } = require('../../app/scripts/lib/enums') const Mascot = require('./components/mascot') @@ -77,7 +78,7 @@ UnlockScreen.prototype.render = function () { h('p.pointer', { onClick: () => { this.props.dispatch(actions.markPasswordForgotten()) - if (environmentType() === 'popup') { + if (getEnvironmentType(window.location.href) === ENVIRONMENT_TYPE_POPUP) { global.platform.openExtensionInBrowser() } }, -- cgit v1.2.3