Allow denominations in CurrencyDisplay component

3 files changed, 55 insertions, 4 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 }) => {