Show/Hide Fiat on Testnets based on User Preference (#6153)

2 files changed, 38 insertions, 1 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 661cbd1dc..01621c354 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
@@ -63,6 +63,8 @@ export default class SettingsTab extends PureComponent {
     setAdvancedInlineGasFeatureFlag: PropTypes.func,
     advancedInlineGas: PropTypes.bool,
     mobileSync: PropTypes.bool,
+    showFiatInTestnets: PropTypes.bool,
+    setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired,
   }
 
   state = {
@@ -529,6 +531,35 @@ export default class SettingsTab extends PureComponent {
     )
   }
 
+  renderShowConversionInTestnets () {
+    const { t } = this.context
+    const {
+      showFiatInTestnets,
+      setShowFiatConversionOnTestnetsPreference,
+    } = this.props
+
+    return (
+      <div className="settings-page__content-row">
+        <div className="settings-page__content-item">
+          <span>{ t('showFiatConversionInTestnets') }</span>
+          <div className="settings-page__content-description">
+            { t('showFiatConversionInTestnetsDescription') }
+          </div>
+        </div>
+        <div className="settings-page__content-item">
+          <div className="settings-page__content-item-col">
+            <ToggleButton
+              value={showFiatInTestnets}
+              onToggle={value => setShowFiatConversionOnTestnetsPreference(!value)}
+              activeLabel=""
+              inactiveLabel=""
+            />
+          </div>
+        </div>
+      </div>
+    )
+  }
+
   renderPrivacyOptIn () {
     const { t } = this.context
     const { privacyMode, setPrivacyMode } = this.props
@@ -563,6 +594,7 @@ export default class SettingsTab extends PureComponent {
         { warning && <div className="settings-tab__error">{ warning }</div> }
         { this.renderCurrentConversion() }
         { this.renderUsePrimaryCurrencyOptions() }
+        { this.renderShowConversionInTestnets() }
         { 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 72458ba33..5cb9a9aae 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
@@ -12,6 +12,7 @@ import {
   setFeatureFlag,
   showModal,
   setUseNativeCurrencyAsPrimaryCurrencyPreference,
+  setShowFiatConversionOnTestnetsPreference,
 } from '../../../../actions'
 import { preferencesSelector } from '../../../../selectors'
 
@@ -31,7 +32,7 @@ const mapStateToProps = state => {
     provider = {},
     currentLocale,
   } = metamask
-  const { useNativeCurrencyAsPrimaryCurrency } = preferencesSelector(state)
+  const { useNativeCurrencyAsPrimaryCurrency, showFiatInTestnets } = preferencesSelector(state)
 
   return {
     warning,
@@ -46,6 +47,7 @@ const mapStateToProps = state => {
     provider,
     useNativeCurrencyAsPrimaryCurrency,
     mobileSync,
+    showFiatInTestnets,
   }
 }
 
@@ -64,6 +66,9 @@ const mapDispatchToProps = dispatch => {
     setUseNativeCurrencyAsPrimaryCurrencyPreference: value => {
       return dispatch(setUseNativeCurrencyAsPrimaryCurrencyPreference(value))
     },
+    setShowFiatConversionOnTestnetsPreference: value => {
+      return dispatch(setShowFiatConversionOnTestnetsPreference(value))
+    },
     showClearApprovalModal: () => dispatch(showModal({ name: 'CLEAR_APPROVED_ORIGINS' })),
   }
 }