diff options
Diffstat (limited to 'ui/app/components/currency-display')
4 files changed, 52 insertions, 12 deletions
diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js index 5f5717be3..2d7413b57 100644 --- a/ui/app/components/currency-display/currency-display.component.js +++ b/ui/app/components/currency-display/currency-display.component.js @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' -import { ETH, GWEI } from '../../constants/common' +import { GWEI } from '../../constants/common' export default class CurrencyDisplay extends PureComponent { static propTypes = { @@ -10,8 +10,9 @@ export default class CurrencyDisplay extends PureComponent { prefix: PropTypes.string, prefixComponent: PropTypes.node, style: PropTypes.object, + suffix: PropTypes.string, // Used in container - currency: PropTypes.oneOf([ETH]), + currency: PropTypes.string, denomination: PropTypes.oneOf([GWEI]), value: PropTypes.string, numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), @@ -19,17 +20,25 @@ export default class CurrencyDisplay extends PureComponent { } render () { - const { className, displayValue, prefix, prefixComponent, style } = this.props + const { className, displayValue, prefix, prefixComponent, style, suffix } = this.props const text = `${prefix || ''}${displayValue}` + const title = `${text} ${suffix}` return ( <div className={classnames('currency-display-component', className)} style={style} - title={text} + title={title} > { prefixComponent} <span className="currency-display-component__text">{ text }</span> + { + suffix && ( + <span className="currency-display-component__suffix"> + { suffix } + </span> + ) + } </div> ) } diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js index b387229b5..6ddf07172 100644 --- a/ui/app/components/currency-display/currency-display.container.js +++ b/ui/app/components/currency-display/currency-display.container.js @@ -3,16 +3,17 @@ import CurrencyDisplay from './currency-display.component' import { getValueFromWeiHex, formatCurrency } from '../../helpers/confirm-transaction/util' const mapStateToProps = state => { - const { metamask: { currentCurrency, conversionRate } } = state + const { metamask: { nativeCurrency, currentCurrency, conversionRate } } = state return { currentCurrency, conversionRate, + nativeCurrency, } } const mergeProps = (stateProps, dispatchProps, ownProps) => { - const { currentCurrency, conversionRate, ...restStateProps } = stateProps + const { nativeCurrency, currentCurrency, conversionRate, ...restStateProps } = stateProps const { value, numberOfDecimals = 2, @@ -24,16 +25,17 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => { const toCurrency = currency || currentCurrency const convertedValue = getValueFromWeiHex({ - value, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination, + value, fromCurrency: nativeCurrency, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination, }) - const formattedValue = formatCurrency(convertedValue, toCurrency) - const displayValue = hideLabel ? formattedValue : `${formattedValue} ${toCurrency.toUpperCase()}` + const displayValue = formatCurrency(convertedValue, toCurrency) + const suffix = hideLabel ? undefined : toCurrency.toUpperCase() return { ...restStateProps, ...dispatchProps, ...restOwnProps, displayValue, + suffix, } } diff --git a/ui/app/components/currency-display/index.scss b/ui/app/components/currency-display/index.scss index 8c0196102..313c932b8 100644 --- a/ui/app/components/currency-display/index.scss +++ b/ui/app/components/currency-display/index.scss @@ -7,4 +7,8 @@ overflow: hidden; text-overflow: ellipsis; } + + &__suffix { + padding-left: 4px; + } } diff --git a/ui/app/components/currency-display/tests/currency-display.container.test.js b/ui/app/components/currency-display/tests/currency-display.container.test.js index b9f98c543..0c886af50 100644 --- a/ui/app/components/currency-display/tests/currency-display.container.test.js +++ b/ui/app/components/currency-display/tests/currency-display.container.test.js @@ -20,12 +20,14 @@ describe('CurrencyDisplay container', () => { metamask: { conversionRate: 280.45, currentCurrency: 'usd', + nativeCurrency: 'ETH', }, } assert.deepEqual(mapStateToProps(mockState), { conversionRate: 280.45, currentCurrency: 'usd', + nativeCurrency: 'ETH', }) }) }) @@ -35,6 +37,7 @@ describe('CurrencyDisplay container', () => { const mockStateProps = { conversionRate: 280.45, currentCurrency: 'usd', + nativeCurrency: 'ETH', } const tests = [ @@ -43,71 +46,93 @@ describe('CurrencyDisplay container', () => { value: '0x2386f26fc10000', numberOfDecimals: 2, currency: 'usd', + nativeCurrency: 'ETH', }, result: { - displayValue: '$2.80 USD', + displayValue: '$2.80', + suffix: 'USD', + nativeCurrency: 'ETH', }, }, { props: { value: '0x2386f26fc10000', + currency: 'usd', + nativeCurrency: 'ETH', }, result: { - displayValue: '$2.80 USD', + displayValue: '$2.80', + suffix: 'USD', + nativeCurrency: 'ETH', }, }, { props: { value: '0x1193461d01595930', currency: 'ETH', + nativeCurrency: 'ETH', numberOfDecimals: 3, }, result: { - displayValue: '1.266 ETH', + displayValue: '1.266', + suffix: 'ETH', + nativeCurrency: 'ETH', }, }, { props: { value: '0x1193461d01595930', currency: 'ETH', + nativeCurrency: 'ETH', numberOfDecimals: 3, hideLabel: true, }, result: { + nativeCurrency: 'ETH', displayValue: '1.266', + suffix: undefined, }, }, { props: { value: '0x3b9aca00', currency: 'ETH', + nativeCurrency: 'ETH', denomination: 'GWEI', hideLabel: true, }, result: { + nativeCurrency: 'ETH', displayValue: '1', + suffix: undefined, }, }, { props: { value: '0x3b9aca00', currency: 'ETH', + nativeCurrency: 'ETH', denomination: 'WEI', hideLabel: true, }, result: { + nativeCurrency: 'ETH', displayValue: '1000000000', + suffix: undefined, }, }, { props: { value: '0x3b9aca00', currency: 'ETH', + nativeCurrency: 'ETH', numberOfDecimals: 100, hideLabel: true, }, result: { + nativeCurrency: 'ETH', displayValue: '1e-9', + suffix: undefined, }, }, ] |