1 files changed, 53 insertions, 0 deletions
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 9da624f56..a9e2a723e 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() }