Allow denominations in CurrencyDisplay component

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,
   })
 }