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

1 files changed, 8 insertions, 7 deletions

diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
index 5a2b4a481..77bedcad7 100644
--- a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
@@ -4,8 +4,9 @@ import classnames from 'classnames'
 import TransactionBreakdownRow from './transaction-breakdown-row'
 import Card from '../card'
 import CurrencyDisplay from '../currency-display'
+import UserPreferencedCurrencyDisplay from '../user-preferenced-currency-display'
 import HexToDecimal from '../hex-to-decimal'
-import { ETH, GWEI } from '../../constants/common'
+import { ETH, GWEI, PRIMARY, SECONDARY } from '../../constants/common'
 import { getHexGasTotal } from '../../helpers/confirm-transaction/util'
 import { sumHexes } from '../../helpers/transactions.util'
 
@@ -40,9 +41,9 @@ export default class TransactionBreakdown extends PureComponent {
           className="transaction-breakdown__card"
         >
           <TransactionBreakdownRow title={t('amount')}>
-            <CurrencyDisplay
+            <UserPreferencedCurrencyDisplay
               className="transaction-breakdown__value"
-              currency={ETH}
+              type={PRIMARY}
               value={value}
             />
           </TransactionBreakdownRow>
@@ -79,14 +80,14 @@ export default class TransactionBreakdown extends PureComponent {
           </TransactionBreakdownRow>
           <TransactionBreakdownRow title={t('total')}>
             <div>
-              <CurrencyDisplay
+              <UserPreferencedCurrencyDisplay
                 className="transaction-breakdown__value transaction-breakdown__value--eth-total"
-                currency={ETH}
+                type={PRIMARY}
                 value={totalInHex}
-                numberOfDecimals={6}
               />
-              <CurrencyDisplay
+              <UserPreferencedCurrencyDisplay
                 className="transaction-breakdown__value"
+                type={SECONDARY}
                 value={totalInHex}
               />
             </div>