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

4 files changed, 55 insertions, 1 deletions

diff --git a/app/_locales/en/messages.json b/app/_locales/en/messages.json
index f54dfd013..690864ef1 100644
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@@ -361,6 +361,9 @@
   "enterPasswordContinue": {
     "message": "Enter password to continue"
   },
+  "eth": {
+    "message": "ETH"
+  },
   "etherscanView": {
     "message": "View account on Etherscan"
   },
@@ -380,7 +383,7 @@
     "message": "Failed"
   },
   "fiat": {
-    "message": "FIAT",
+    "message": "Fiat",
     "description": "Exchange type"
   },
   "fileImportFail": {
@@ -790,6 +793,12 @@
   "prev": {
     "message": "Prev"
   },
+  "primaryCurrencySetting": {
+    "message": "Primary Currency"
+  },
+  "primaryCurrencySettingDescription": {
+    "message": "Select ETH to prioritize displaying values in ETH. Select Fiat to prioritize displaying values in your selected currency."
+  },
   "privacyMsg": {
     "message": "Privacy Policy"
   },
diff --git a/app/images/eth.svg b/app/images/eth.svg
new file mode 100644
index 000000000..6375b790f
--- /dev/null
+++ b/app/images/eth.svg
@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 22.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 40 40" style="enable-background:new 0 0 40 40;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#38393A;}
+</style>
+<title>deposit-eth</title>
+<desc>Created with Sketch.</desc>
+<g id="deposit-eth" transform="translate(0.000000, 14.000000)">
+	<path id="Shape" class="st0" d="M19.9,16L7.5,8.7L19.9,26L32.3,8.7L19.9,16L19.9,16z M20.1-14L7.7,6.4l12.4,7.3l12.4-7.2L20.1-14z"
+		/>
+</g>
+</svg>
diff --git a/app/scripts/controllers/preferences.js b/app/scripts/controllers/preferences.js
index fd6a4866d..8eb2bce0c 100644
--- a/app/scripts/controllers/preferences.js
+++ b/app/scripts/controllers/preferences.js
@@ -38,6 +38,9 @@ class PreferencesController {
       lostIdentities: {},
       seedWords: null,
       forgottenPassword: false,
+      preferences: {
+        useETHAsPrimaryCurrency: true,
+      },
     }, opts.initState)
 
     this.diagnostics = opts.diagnostics
@@ -463,6 +466,33 @@ class PreferencesController {
   getFeatureFlags () {
     return this.store.getState().featureFlags
   }
+
+  /**
+   * Updates the `preferences` property, which is an object. These are user-controlled features
+   * found in the settings page.
+   * @param {string} preference The preference to enable or disable.
+   * @param {boolean} value Indicates whether or not the preference should be enabled or disabled.
+   * @returns {Promise<object>} Promises a new object; the updated preferences object.
+   */
+  setPreference (preference, value) {
+    const currentPreferences = this.getPreferences()
+    const updatedPreferences = {
+      ...currentPreferences,
+      [preference]: value,
+    }
+
+    this.store.updateState({ preferences: updatedPreferences })
+    return Promise.resolve(updatedPreferences)
+  }
+
+  /**
+   * A getter for the `preferences` property
+   * @returns {object} A key-boolean map of user-selected preferences.
+   */
+  getPreferences () {
+    return this.store.getState().preferences
+  }
+
   //
   // PRIVATE METHODS
   //
diff --git a/app/scripts/metamask-controller.js b/app/scripts/metamask-controller.js
index 493877345..ebf1749c6 100644
--- a/app/scripts/metamask-controller.js
+++ b/app/scripts/metamask-controller.js
@@ -387,6 +387,7 @@ module.exports = class MetamaskController extends EventEmitter {
       setCurrentAccountTab: nodeify(preferencesController.setCurrentAccountTab, preferencesController),
       setAccountLabel: nodeify(preferencesController.setAccountLabel, preferencesController),
       setFeatureFlag: nodeify(preferencesController.setFeatureFlag, preferencesController),
+      setPreference: nodeify(preferencesController.setPreference, preferencesController),
 
       // BlacklistController
       whitelistPhishingDomain: this.whitelistPhishingDomain.bind(this),