diff options
Diffstat (limited to 'ui/app/components/currency-display')
5 files changed, 185 insertions, 0 deletions
diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js new file mode 100644 index 000000000..e4eb58a2a --- /dev/null +++ b/ui/app/components/currency-display/currency-display.component.js @@ -0,0 +1,31 @@ +import React, { PureComponent } from 'react' +import PropTypes from 'prop-types' +import { ETH, GWEI } from '../../constants/common' + +export default class CurrencyDisplay extends PureComponent { + static propTypes = { + className: PropTypes.string, + displayValue: PropTypes.string, + prefix: PropTypes.string, + // Used in container + currency: PropTypes.oneOf([ETH]), + denomination: PropTypes.oneOf([GWEI]), + value: PropTypes.string, + numberOfDecimals: PropTypes.oneOfType([PropTypes.string, PropTypes.number]), + hideLabel: PropTypes.bool, + } + + render () { + const { className, displayValue, prefix } = this.props + const text = `${prefix || ''}${displayValue}` + + return ( + <div + className={className} + title={text} + > + { text } + </div> + ) + } +} diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js new file mode 100644 index 000000000..6644a1099 --- /dev/null +++ b/ui/app/components/currency-display/currency-display.container.js @@ -0,0 +1,21 @@ +import { connect } from 'react-redux' +import CurrencyDisplay from './currency-display.component' +import { getValueFromWeiHex, formatCurrency } from '../../helpers/confirm-transaction/util' + +const mapStateToProps = (state, ownProps) => { + const { value, numberOfDecimals = 2, currency, denomination, hideLabel } = ownProps + const { metamask: { currentCurrency, conversionRate } } = state + + const toCurrency = currency || currentCurrency + const convertedValue = getValueFromWeiHex({ + value, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination, + }) + const formattedValue = formatCurrency(convertedValue, toCurrency) + const displayValue = hideLabel ? formattedValue : `${formattedValue} ${toCurrency.toUpperCase()}` + + return { + displayValue, + } +} + +export default connect(mapStateToProps)(CurrencyDisplay) diff --git a/ui/app/components/currency-display/index.js b/ui/app/components/currency-display/index.js new file mode 100644 index 000000000..38f08765f --- /dev/null +++ b/ui/app/components/currency-display/index.js @@ -0,0 +1 @@ +export { default } from './currency-display.container' diff --git a/ui/app/components/currency-display/tests/currency-display.component.test.js b/ui/app/components/currency-display/tests/currency-display.component.test.js new file mode 100644 index 000000000..d9ef052f1 --- /dev/null +++ b/ui/app/components/currency-display/tests/currency-display.component.test.js @@ -0,0 +1,27 @@ +import React from 'react' +import assert from 'assert' +import { shallow } from 'enzyme' +import CurrencyDisplay from '../currency-display.component' + +describe('CurrencyDisplay Component', () => { + it('should render text with a className', () => { + const wrapper = shallow(<CurrencyDisplay + displayValue="$123.45" + className="currency-display" + />) + + assert.ok(wrapper.hasClass('currency-display')) + assert.equal(wrapper.text(), '$123.45') + }) + + it('should render text with a prefix', () => { + const wrapper = shallow(<CurrencyDisplay + displayValue="$123.45" + className="currency-display" + prefix="-" + />) + + assert.ok(wrapper.hasClass('currency-display')) + assert.equal(wrapper.text(), '-$123.45') + }) +}) 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 new file mode 100644 index 000000000..5265bbb04 --- /dev/null +++ b/ui/app/components/currency-display/tests/currency-display.container.test.js @@ -0,0 +1,105 @@ +import assert from 'assert' +import proxyquire from 'proxyquire' + +let mapStateToProps + +proxyquire('../currency-display.container.js', { + 'react-redux': { + connect: ms => { + mapStateToProps = ms + return () => ({}) + }, + }, +}) + +describe('CurrencyDisplay container', () => { + describe('mapStateToProps()', () => { + it('should return the correct props', () => { + const mockState = { + metamask: { + conversionRate: 280.45, + currentCurrency: 'usd', + }, + } + + const tests = [ + { + props: { + value: '0x2386f26fc10000', + numberOfDecimals: 2, + currency: 'usd', + }, + result: { + displayValue: '$2.80 USD', + }, + }, + { + props: { + value: '0x2386f26fc10000', + }, + result: { + displayValue: '$2.80 USD', + }, + }, + { + props: { + value: '0x1193461d01595930', + currency: 'ETH', + numberOfDecimals: 3, + }, + result: { + displayValue: '1.266 ETH', + }, + }, + { + props: { + value: '0x1193461d01595930', + currency: 'ETH', + numberOfDecimals: 3, + hideLabel: true, + }, + result: { + displayValue: '1.266', + }, + }, + { + props: { + value: '0x3b9aca00', + currency: 'ETH', + denomination: 'GWEI', + hideLabel: true, + }, + result: { + displayValue: '1', + }, + }, + { + props: { + value: '0x3b9aca00', + currency: 'ETH', + denomination: 'WEI', + hideLabel: true, + }, + result: { + displayValue: '1000000000', + }, + }, + { + props: { + value: '0x3b9aca00', + currency: 'ETH', + numberOfDecimals: 100, + hideLabel: true, + }, + result: { + displayValue: '1e-9', + }, + }, + ] + + tests.forEach(({ props, result }) => { + assert.deepEqual(mapStateToProps(mockState, props), result) + }) + }) + }) +}) |