Adds toggle for primary currency (#5421)

* Add UnitInput component

* Add CurrencyInput component

* Add UserPreferencedCurrencyInput component

* Add UserPreferencedCurrencyDisplay component

* Add updatePreferences action

* Add styles for CurrencyInput, CurrencyDisplay, and UnitInput

* Update SettingsTab page with Primary Currency toggle

* Refactor currency displays and inputs to use UserPreferenced displays and inputs

* Add TokenInput component

* Add UserPreferencedTokenInput component

* Use TokenInput in the send screen

* Fix unit tests

* Fix e2e and integration tests

* Remove send/CurrencyDisplay component

* Replace diamond unicode character with Eth logo. Fix typos

2 files changed, 46 insertions, 60 deletions

diff --git a/ui/app/ducks/confirm-transaction.duck.js b/ui/app/ducks/confirm-transaction.duck.js
index 30c32f2bf..2ceafbe08 100644
--- a/ui/app/ducks/confirm-transaction.duck.js
+++ b/ui/app/ducks/confirm-transaction.duck.js
@@ -14,7 +14,13 @@ import {
   hexGreaterThan,
 } from '../helpers/confirm-transaction/util'
 
-import { getTokenData, getMethodData, isSmartContractAddress } from '../helpers/transactions.util'
+import {
+  getTokenData,
+  getMethodData,
+  isSmartContractAddress,
+  sumHexes,
+} from '../helpers/transactions.util'
+
 import { getSymbolAndDecimals } from '../token-util'
 import { conversionUtil } from '../conversion-util'
 
@@ -31,7 +37,6 @@ const CLEAR_CONFIRM_TRANSACTION = createActionType('CLEAR_CONFIRM_TRANSACTION')
 const UPDATE_TRANSACTION_AMOUNTS = createActionType('UPDATE_TRANSACTION_AMOUNTS')
 const UPDATE_TRANSACTION_FEES = createActionType('UPDATE_TRANSACTION_FEES')
 const UPDATE_TRANSACTION_TOTALS = createActionType('UPDATE_TRANSACTION_TOTALS')
-const UPDATE_HEX_GAS_TOTAL = createActionType('UPDATE_HEX_GAS_TOTAL')
 const UPDATE_TOKEN_PROPS = createActionType('UPDATE_TOKEN_PROPS')
 const UPDATE_NONCE = createActionType('UPDATE_NONCE')
 const UPDATE_TO_SMART_CONTRACT = createActionType('UPDATE_TO_SMART_CONTRACT')
@@ -53,7 +58,9 @@ const initState = {
   ethTransactionAmount: '',
   ethTransactionFee: '',
   ethTransactionTotal: '',
-  hexGasTotal: '',
+  hexTransactionAmount: '',
+  hexTransactionFee: '',
+  hexTransactionTotal: '',
   nonce: '',
   toSmartContract: false,
   fetchingData: false,
@@ -99,30 +106,28 @@ export default function reducer ({ confirmTransaction: confirmState = initState
         methodData: {},
       }
     case UPDATE_TRANSACTION_AMOUNTS:
-      const { fiatTransactionAmount, ethTransactionAmount } = action.payload
+      const { fiatTransactionAmount, ethTransactionAmount, hexTransactionAmount } = action.payload
       return {
         ...confirmState,
         fiatTransactionAmount: fiatTransactionAmount || confirmState.fiatTransactionAmount,
         ethTransactionAmount: ethTransactionAmount || confirmState.ethTransactionAmount,
+        hexTransactionAmount: hexTransactionAmount || confirmState.hexTransactionAmount,
       }
     case UPDATE_TRANSACTION_FEES:
-      const { fiatTransactionFee, ethTransactionFee } = action.payload
+      const { fiatTransactionFee, ethTransactionFee, hexTransactionFee } = action.payload
       return {
         ...confirmState,
         fiatTransactionFee: fiatTransactionFee || confirmState.fiatTransactionFee,
         ethTransactionFee: ethTransactionFee || confirmState.ethTransactionFee,
+        hexTransactionFee: hexTransactionFee || confirmState.hexTransactionFee,
       }
     case UPDATE_TRANSACTION_TOTALS:
-      const { fiatTransactionTotal, ethTransactionTotal } = action.payload
+      const { fiatTransactionTotal, ethTransactionTotal, hexTransactionTotal } = action.payload
       return {
         ...confirmState,
         fiatTransactionTotal: fiatTransactionTotal || confirmState.fiatTransactionTotal,
         ethTransactionTotal: ethTransactionTotal || confirmState.ethTransactionTotal,
-      }
-    case UPDATE_HEX_GAS_TOTAL:
-      return {
-        ...confirmState,
-        hexGasTotal: action.payload,
+        hexTransactionTotal: hexTransactionTotal || confirmState.hexTransactionTotal,
       }
     case UPDATE_TOKEN_PROPS:
       const { tokenSymbol = '', tokenDecimals = '' } = action.payload
@@ -222,13 +227,6 @@ export function updateTransactionTotals (totals) {
   }
 }
 
-export function updateHexGasTotal (hexGasTotal) {
-  return {
-    type: UPDATE_HEX_GAS_TOTAL,
-    payload: hexGasTotal,
-  }
-}
-
 export function updateTokenProps (tokenProps) {
   return {
     type: UPDATE_TOKEN_PROPS,
@@ -297,7 +295,7 @@ export function updateTxDataAndCalculate (txData) {
 
     dispatch(updateTxData(txData))
 
-    const { txParams: { value, gas: gasLimit = '0x0', gasPrice = '0x0' } = {} } = txData
+    const { txParams: { value = '0x0', gas: gasLimit = '0x0', gasPrice = '0x0' } = {} } = txData
 
     const fiatTransactionAmount = getValueFromWeiHex({
       value, toCurrency: currentCurrency, conversionRate, numberOfDecimals: 2,
@@ -306,31 +304,39 @@ export function updateTxDataAndCalculate (txData) {
       value, toCurrency: 'ETH', conversionRate, numberOfDecimals: 6,
     })
 
-    dispatch(updateTransactionAmounts({ fiatTransactionAmount, ethTransactionAmount }))
+    dispatch(updateTransactionAmounts({
+      fiatTransactionAmount,
+      ethTransactionAmount,
+      hexTransactionAmount: value,
+    }))
 
-    const hexGasTotal = getHexGasTotal({ gasLimit, gasPrice })
-
-    dispatch(updateHexGasTotal(hexGasTotal))
+    const hexTransactionFee = getHexGasTotal({ gasLimit, gasPrice })
 
     const fiatTransactionFee = getTransactionFee({
-      value: hexGasTotal,
+      value: hexTransactionFee,
       toCurrency: currentCurrency,
       numberOfDecimals: 2,
       conversionRate,
     })
     const ethTransactionFee = getTransactionFee({
-      value: hexGasTotal,
+      value: hexTransactionFee,
       toCurrency: 'ETH',
       numberOfDecimals: 6,
       conversionRate,
     })
 
-    dispatch(updateTransactionFees({ fiatTransactionFee, ethTransactionFee }))
+    dispatch(updateTransactionFees({ fiatTransactionFee, ethTransactionFee, hexTransactionFee }))
 
     const fiatTransactionTotal = addFiat(fiatTransactionFee, fiatTransactionAmount)
     const ethTransactionTotal = addEth(ethTransactionFee, ethTransactionAmount)
-
-    dispatch(updateTransactionTotals({ fiatTransactionTotal, ethTransactionTotal }))
+    console.log('HIHIH', value, hexTransactionFee)
+    const hexTransactionTotal = sumHexes(value, hexTransactionFee)
+
+    dispatch(updateTransactionTotals({
+      fiatTransactionTotal,
+      ethTransactionTotal,
+      hexTransactionTotal,
+    }))
   }
 }
 
diff --git a/ui/app/ducks/tests/confirm-transaction.duck.test.js b/ui/app/ducks/tests/confirm-transaction.duck.test.js
index 1bab0add0..eceacd0bd 100644
--- a/ui/app/ducks/tests/confirm-transaction.duck.test.js
+++ b/ui/app/ducks/tests/confirm-transaction.duck.test.js
@@ -19,7 +19,9 @@ const initialState = {
   ethTransactionAmount: '',
   ethTransactionFee: '',
   ethTransactionTotal: '',
-  hexGasTotal: '',
+  hexTransactionAmount: '',
+  hexTransactionFee: '',
+  hexTransactionTotal: '',
   nonce: '',
   toSmartContract: false,
   fetchingData: false,
@@ -34,7 +36,6 @@ const CLEAR_METHOD_DATA = 'metamask/confirm-transaction/CLEAR_METHOD_DATA'
 const UPDATE_TRANSACTION_AMOUNTS = 'metamask/confirm-transaction/UPDATE_TRANSACTION_AMOUNTS'
 const UPDATE_TRANSACTION_FEES = 'metamask/confirm-transaction/UPDATE_TRANSACTION_FEES'
 const UPDATE_TRANSACTION_TOTALS = 'metamask/confirm-transaction/UPDATE_TRANSACTION_TOTALS'
-const UPDATE_HEX_GAS_TOTAL = 'metamask/confirm-transaction/UPDATE_HEX_GAS_TOTAL'
 const UPDATE_TOKEN_PROPS = 'metamask/confirm-transaction/UPDATE_TOKEN_PROPS'
 const UPDATE_NONCE = 'metamask/confirm-transaction/UPDATE_NONCE'
 const UPDATE_TO_SMART_CONTRACT = 'metamask/confirm-transaction/UPDATE_TO_SMART_CONTRACT'
@@ -65,7 +66,9 @@ describe('Confirm Transaction Duck', () => {
         ethTransactionAmount: '1',
         ethTransactionFee: '0.000021',
         ethTransactionTotal: '469.27',
-        hexGasTotal: '0x1319718a5000',
+        hexTransactionAmount: '',
+        hexTransactionFee: '0x1319718a5000',
+        hexTransactionTotal: '',
         nonce: '0x0',
         toSmartContract: false,
         fetchingData: false,
@@ -186,12 +189,14 @@ describe('Confirm Transaction Duck', () => {
           payload: {
             fiatTransactionAmount: '123.45',
             ethTransactionAmount: '.5',
+            hexTransactionAmount: '0x1',
           },
         }),
         {
           ...mockState.confirmTransaction,
           fiatTransactionAmount: '123.45',
           ethTransactionAmount: '.5',
+          hexTransactionAmount: '0x1',
         }
       )
     })
@@ -203,12 +208,14 @@ describe('Confirm Transaction Duck', () => {
           payload: {
             fiatTransactionFee: '123.45',
             ethTransactionFee: '.5',
+            hexTransactionFee: '0x1',
           },
         }),
         {
           ...mockState.confirmTransaction,
           fiatTransactionFee: '123.45',
           ethTransactionFee: '.5',
+          hexTransactionFee: '0x1',
         }
       )
     })
@@ -220,25 +227,14 @@ describe('Confirm Transaction Duck', () => {
           payload: {
             fiatTransactionTotal: '123.45',
             ethTransactionTotal: '.5',
+            hexTransactionTotal: '0x1',
           },
         }),
         {
           ...mockState.confirmTransaction,
           fiatTransactionTotal: '123.45',
           ethTransactionTotal: '.5',
-        }
-      )
-    })
-
-    it('should update hexGasTotal when receiving an UPDATE_HEX_GAS_TOTAL action', () => {
-      assert.deepEqual(
-        ConfirmTransactionReducer(mockState, {
-          type: UPDATE_HEX_GAS_TOTAL,
-          payload: '0x0',
-        }),
-        {
-          ...mockState.confirmTransaction,
-          hexGasTotal: '0x0',
+          hexTransactionTotal: '0x1',
         }
       )
     })
@@ -435,19 +431,6 @@ describe('Confirm Transaction Duck', () => {
       )
     })
 
-    it('should create an action to update hexGasTotal', () => {
-      const hexGasTotal = '0x0'
-      const expectedAction = {
-        type: UPDATE_HEX_GAS_TOTAL,
-        payload: hexGasTotal,
-      }
-
-      assert.deepEqual(
-        actions.updateHexGasTotal(hexGasTotal),
-        expectedAction
-      )
-    })
-
     it('should create an action to update tokenProps', () => {
       const tokenProps = {
         tokenDecimals: '1',
@@ -568,7 +551,6 @@ describe('Confirm Transaction Duck', () => {
       const expectedActions = [
         'metamask/confirm-transaction/UPDATE_TX_DATA',
         'metamask/confirm-transaction/UPDATE_TRANSACTION_AMOUNTS',
-        'metamask/confirm-transaction/UPDATE_HEX_GAS_TOTAL',
         'metamask/confirm-transaction/UPDATE_TRANSACTION_FEES',
         'metamask/confirm-transaction/UPDATE_TRANSACTION_TOTALS',
       ]
@@ -637,7 +619,6 @@ describe('Confirm Transaction Duck', () => {
       const expectedActions = [
         'metamask/confirm-transaction/UPDATE_TX_DATA',
         'metamask/confirm-transaction/UPDATE_TRANSACTION_AMOUNTS',
-        'metamask/confirm-transaction/UPDATE_HEX_GAS_TOTAL',
         'metamask/confirm-transaction/UPDATE_TRANSACTION_FEES',
         'metamask/confirm-transaction/UPDATE_TRANSACTION_TOTALS',
       ]
@@ -687,7 +668,6 @@ describe('Confirm Transaction Duck', () => {
       const expectedActions = [
         'metamask/confirm-transaction/UPDATE_TX_DATA',
         'metamask/confirm-transaction/UPDATE_TRANSACTION_AMOUNTS',
-        'metamask/confirm-transaction/UPDATE_HEX_GAS_TOTAL',
         'metamask/confirm-transaction/UPDATE_TRANSACTION_FEES',
         'metamask/confirm-transaction/UPDATE_TRANSACTION_TOTALS',
       ]