From 702b7568820d7a695f191df6bf44c76b37fdc7d8 Mon Sep 17 00:00:00 2001 From: Alexander Tseung Date: Fri, 31 Aug 2018 12:14:06 -0700 Subject: Allow denominations in CurrencyDisplay component --- .../currency-display/currency-display.component.js | 7 +++- .../currency-display/currency-display.container.js | 8 ++-- .../tests/currency-display.container.test.js | 44 ++++++++++++++++++++++ ui/app/constants/common.js | 2 + ui/app/helpers/confirm-transaction/util.js | 2 + ui/app/helpers/conversions.util.js | 38 +++++++++++++------ 6 files changed, 85 insertions(+), 16 deletions(-) diff --git a/ui/app/components/currency-display/currency-display.component.js b/ui/app/components/currency-display/currency-display.component.js index 389791b42..e4eb58a2a 100644 --- a/ui/app/components/currency-display/currency-display.component.js +++ b/ui/app/components/currency-display/currency-display.component.js @@ -1,13 +1,18 @@ import React, { PureComponent } from 'react' import PropTypes from 'prop-types' -import { ETH } from '../../constants/common' +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 () { diff --git a/ui/app/components/currency-display/currency-display.container.js b/ui/app/components/currency-display/currency-display.container.js index b8a738c65..6644a1099 100644 --- a/ui/app/components/currency-display/currency-display.container.js +++ b/ui/app/components/currency-display/currency-display.container.js @@ -3,13 +3,15 @@ import CurrencyDisplay from './currency-display.component' import { getValueFromWeiHex, formatCurrency } from '../../helpers/confirm-transaction/util' const mapStateToProps = (state, ownProps) => { - const { value, numberOfDecimals = 2, currency } = 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 }) + const convertedValue = getValueFromWeiHex({ + value, toCurrency, conversionRate, numberOfDecimals, toDenomination: denomination, + }) const formattedValue = formatCurrency(convertedValue, toCurrency) - const displayValue = `${formattedValue} ${toCurrency.toUpperCase()}` + const displayValue = hideLabel ? formattedValue : `${formattedValue} ${toCurrency.toUpperCase()}` return { displayValue, 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 474ce5378..5265bbb04 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 @@ -51,6 +51,50 @@ describe('CurrencyDisplay container', () => { 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 }) => { diff --git a/ui/app/constants/common.js b/ui/app/constants/common.js index 28731ce33..a20f6cc02 100644 --- a/ui/app/constants/common.js +++ b/ui/app/constants/common.js @@ -1 +1,3 @@ export const ETH = 'ETH' +export const GWEI = 'GWEI' +export const WEI = 'WEI' diff --git a/ui/app/helpers/confirm-transaction/util.js b/ui/app/helpers/confirm-transaction/util.js index d1a4994e4..bcac22500 100644 --- a/ui/app/helpers/confirm-transaction/util.js +++ b/ui/app/helpers/confirm-transaction/util.js @@ -58,6 +58,7 @@ export function getValueFromWeiHex ({ toCurrency, conversionRate, numberOfDecimals, + toDenomination, }) { return conversionUtil(value, { fromNumericBase: 'hex', @@ -66,6 +67,7 @@ export function getValueFromWeiHex ({ toCurrency, numberOfDecimals, fromDenomination: 'WEI', + toDenomination, conversionRate, }) } diff --git a/ui/app/helpers/conversions.util.js b/ui/app/helpers/conversions.util.js index 1dec216fa..74802c86b 100644 --- a/ui/app/helpers/conversions.util.js +++ b/ui/app/helpers/conversions.util.js @@ -1,4 +1,5 @@ import { conversionUtil } from '../conversion-util' +import { ETH, GWEI, WEI } from '../constants/common' export function hexToDecimal (hexValue) { return conversionUtil(hexValue, { @@ -7,16 +8,27 @@ export function hexToDecimal (hexValue) { }) } -export function getEthFromWeiHex ({ - value, - conversionRate, -}) { - return getValueFromWeiHex({ - value, - conversionRate, - toCurrency: 'ETH', - numberOfDecimals: 6, - }) +export function getEthConversionFromWeiHex ({ value, conversionRate, numberOfDecimals = 6 }) { + const denominations = [ETH, GWEI] + + let nonZeroDenomination + + for (let i = 0; i < denominations.length; i++) { + const convertedValue = getValueFromWeiHex({ + value, + conversionRate, + toCurrency: ETH, + numberOfDecimals, + toDenomination: denominations[i], + }) + + if (convertedValue !== '0' || i === denominations.length - 1) { + nonZeroDenomination = `${convertedValue} ${denominations[i]}` + break + } + } + + return nonZeroDenomination } export function getValueFromWeiHex ({ @@ -24,14 +36,16 @@ export function getValueFromWeiHex ({ toCurrency, conversionRate, numberOfDecimals, + toDenomination, }) { return conversionUtil(value, { fromNumericBase: 'hex', toNumericBase: 'dec', - fromCurrency: 'ETH', + fromCurrency: ETH, toCurrency, numberOfDecimals, - fromDenomination: 'WEI', + fromDenomination: WEI, + toDenomination, conversionRate, }) } -- cgit