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

3 files changed, 78 insertions, 0 deletions

diff --git a/ui/app/components/pages/settings/settings-tab/index.scss b/ui/app/components/pages/settings/settings-tab/index.scss
index 76a0cec6..3bf840c8 100644
--- a/ui/app/components/pages/settings/settings-tab/index.scss
+++ b/ui/app/components/pages/settings/settings-tab/index.scss
@@ -48,4 +48,22 @@
       border-color: $ecstasy;
     }
   }
+
+  &__radio-buttons {
+    display: flex;
+    align-items: center;
+  }
+
+  &__radio-button {
+    display: flex;
+    align-items: center;
+
+    &:not(:last-child) {
+      margin-right: 16px;
+    }
+  }
+
+  &__radio-label {
+    padding-left: 4px;
+  }
 }
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
index 9da624f5..a9e2a723 100644
--- a/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.component.js
@@ -55,6 +55,8 @@ export default class SettingsTab extends PureComponent {
     sendHexData: PropTypes.bool,
     currentCurrency: PropTypes.string,
     conversionDate: PropTypes.number,
+    useETHAsPrimaryCurrency: PropTypes.bool,
+    setUseETHAsPrimaryCurrencyPreference: PropTypes.func,
   }
 
   state = {
@@ -339,6 +341,56 @@ export default class SettingsTab extends PureComponent {
     )
   }
 
+  renderUseEthAsPrimaryCurrency () {
+    const { t } = this.context
+    const { useETHAsPrimaryCurrency, setUseETHAsPrimaryCurrencyPreference } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('primaryCurrencySetting') }</span>
+          <div className="settings-page__content-description">
+            { t('primaryCurrencySettingDescription') }
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <div className="settings-tab__radio-buttons">
+              <div className="settings-tab__radio-button">
+                <input
+                  type="radio"
+                  id="eth-primary-currency"
+                  onChange={() => setUseETHAsPrimaryCurrencyPreference(true)}
+                  checked={Boolean(useETHAsPrimaryCurrency)}
+                />
+                <label
+                  htmlFor="eth-primary-currency"
+                  className="settings-tab__radio-label"
+                >
+                  { t('eth') }
+                </label>
+              </div>
+              <div className="settings-tab__radio-button">
+                <input
+                  type="radio"
+                  id="fiat-primary-currency"
+                  onChange={() => setUseETHAsPrimaryCurrencyPreference(false)}
+                  checked={!useETHAsPrimaryCurrency}
+                />
+                <label
+                  htmlFor="fiat-primary-currency"
+                  className="settings-tab__radio-label"
+                >
+                  { t('fiat') }
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   render () {
     const { warning, isMascara } = this.props
 
@@ -346,6 +398,7 @@ export default class SettingsTab extends PureComponent {
       <div className="settings-page__content">
         { warning && <div className="settings-tab__error">{ warning }</div> }
         { this.renderCurrentConversion() }
+        { this.renderUseEthAsPrimaryCurrency() }
         { this.renderCurrentLocale() }
         { this.renderNewRpcUrl() }
         { this.renderStateLogs() }
diff --git a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
index 665b56f5..de30f309 100644
--- a/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
+++ b/ui/app/components/pages/settings/settings-tab/settings-tab.container.js
@@ -11,7 +11,9 @@ import {
   updateCurrentLocale,
   setFeatureFlag,
   showModal,
+  setUseETHAsPrimaryCurrencyPreference,
 } from '../../../../actions'
+import { preferencesSelector } from '../../../../selectors'
 
 const mapStateToProps = state => {
   const { appState: { warning }, metamask } = state
@@ -24,6 +26,7 @@ const mapStateToProps = state => {
     isMascara,
     currentLocale,
   } = metamask
+  const { useETHAsPrimaryCurrency } = preferencesSelector(state)
 
   return {
     warning,
@@ -34,6 +37,7 @@ const mapStateToProps = state => {
     useBlockie,
     sendHexData,
     provider,
+    useETHAsPrimaryCurrency,
   }
 }
 
@@ -50,6 +54,9 @@ const mapDispatchToProps = dispatch => {
     },
     setHexDataFeatureFlag: shouldShow => dispatch(setFeatureFlag('sendHexData', shouldShow)),
     showResetAccountConfirmationModal: () => dispatch(showModal({ name: 'CONFIRM_RESET_ACCOUNT' })),
+    setUseETHAsPrimaryCurrencyPreference: value => {
+      return dispatch(setUseETHAsPrimaryCurrencyPreference(value))
+    },
   }
 }