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

27 files changed, 742 insertions, 76 deletions

diff --git a/ui/app/components/balance/balance.container.js b/ui/app/components/balance/balance.container.js
index b8c3a04cc..1cd6df5ce 100644
--- a/ui/app/components/balance/balance.container.js
+++ b/ui/app/components/balance/balance.container.js
@@ -6,9 +6,13 @@ import {
   conversionRateSelector,
   getCurrentCurrency,
   getMetaMaskAccounts,
+  getIsMainnet,
+  preferencesSelector,
 } from '../../selectors'
 
 const mapStateToProps = state => {
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
   const accounts = getMetaMaskAccounts(state)
   const network = state.metamask.network
   const selectedAddress = state.metamask.selectedAddress || Object.keys(accounts)[0]
@@ -21,6 +25,7 @@ const mapStateToProps = state => {
     conversionRate: conversionRateSelector(state),
     currentCurrency: getCurrentCurrency(state),
     assetImages: getAssetImages(state),
+    showFiat: (isMainnet || !!showFiatInTestnets),
   }
 }
 
diff --git a/ui/app/components/currency-input/currency-input.component.js b/ui/app/components/currency-input/currency-input.component.js
index 8fa3131ae..30e0e919b 100644
--- a/ui/app/components/currency-input/currency-input.component.js
+++ b/ui/app/components/currency-input/currency-input.component.js
@@ -11,6 +11,10 @@ import { ETH } from '../../constants/common'
  * gets converted into a decimal value depending on the currency (ETH or Fiat).
  */
 export default class CurrencyInput extends PureComponent {
+  static contextTypes = {
+    t: PropTypes.func,
+  }
+
   static propTypes = {
     conversionRate: PropTypes.number,
     currentCurrency: PropTypes.string,
@@ -18,6 +22,7 @@ export default class CurrencyInput extends PureComponent {
     onChange: PropTypes.func,
     onBlur: PropTypes.func,
     useFiat: PropTypes.bool,
+    hideFiat: PropTypes.bool,
     value: PropTypes.string,
     fiatSuffix: PropTypes.string,
     nativeSuffix: PropTypes.string,
@@ -61,8 +66,13 @@ export default class CurrencyInput extends PureComponent {
   }
 
   shouldUseFiat = () => {
-    const { useFiat } = this.props
+    const { useFiat, hideFiat } = this.props
     const { isSwapped } = this.state || {}
+
+    if (hideFiat) {
+      return false
+    }
+
     return isSwapped ? !useFiat : useFiat
   }
 
@@ -93,10 +103,18 @@ export default class CurrencyInput extends PureComponent {
   }
 
   renderConversionComponent () {
-    const { currentCurrency, nativeCurrency } = this.props
+    const { currentCurrency, nativeCurrency, hideFiat } = this.props
     const { hexValue } = this.state
     let currency, numberOfDecimals
 
+    if (hideFiat) {
+      return (
+        <div className="currency-input__conversion-component">
+          { this.context.t('noConversionRateAvailable') }
+        </div>
+      )
+    }
+
     if (this.shouldUseFiat()) {
       // Display ETH
       currency = nativeCurrency || ETH
diff --git a/ui/app/components/currency-input/currency-input.container.js b/ui/app/components/currency-input/currency-input.container.js
index 4c89d6c1d..428be4557 100644
--- a/ui/app/components/currency-input/currency-input.container.js
+++ b/ui/app/components/currency-input/currency-input.container.js
@@ -1,14 +1,18 @@
 import { connect } from 'react-redux'
 import CurrencyInput from './currency-input.component'
 import { ETH } from '../../constants/common'
+import {getIsMainnet, preferencesSelector} from '../../selectors'
 
 const mapStateToProps = state => {
   const { metamask: { nativeCurrency, currentCurrency, conversionRate } } = state
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
 
   return {
     nativeCurrency,
     currentCurrency,
     conversionRate,
+    hideFiat: (!isMainnet && !showFiatInTestnets),
   }
 }
 
diff --git a/ui/app/components/currency-input/tests/currency-input.component.test.js b/ui/app/components/currency-input/tests/currency-input.component.test.js
index e1ab29187..6d4612e3c 100644
--- a/ui/app/components/currency-input/tests/currency-input.component.test.js
+++ b/ui/app/components/currency-input/tests/currency-input.component.test.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import assert from 'assert'
 import { shallow, mount } from 'enzyme'
 import sinon from 'sinon'
@@ -111,6 +112,45 @@ describe('CurrencyInput Component', () => {
       assert.equal(wrapper.find('.unit-input__input').props().value, '1')
       assert.equal(wrapper.find('.currency-display-component').text(), '0.004328ETH')
     })
+
+    it('should render properly with a native value when hideFiat is true', () => {
+      const mockStore = {
+        metamask: {
+          nativeCurrency: 'ETH',
+          currentCurrency: 'usd',
+          conversionRate: 231.06,
+        },
+      }
+      const store = configureMockStore()(mockStore)
+
+      const wrapper = mount(
+        <Provider store={store}>
+          <CurrencyInput
+            value="f602f2234d0ea"
+            fiatSuffix="USD"
+            nativeSuffix="ETH"
+            useFiat
+            hideFiat={true}
+            nativeCurrency="ETH"
+            currentCurrency="usd"
+            conversionRate={231.06}
+          />
+        </Provider>,
+        {
+          context: { t: str => str + '_t' },
+          childContextTypes: { t: PropTypes.func },
+        }
+      )
+
+      assert.ok(wrapper)
+      const currencyInputInstance = wrapper.find(CurrencyInput).at(0).instance()
+      assert.equal(currencyInputInstance.state.decimalValue, 0.004328)
+      assert.equal(currencyInputInstance.state.hexValue, 'f602f2234d0ea')
+      assert.equal(wrapper.find('.unit-input__suffix').length, 1)
+      assert.equal(wrapper.find('.unit-input__suffix').text(), 'ETH')
+      assert.equal(wrapper.find('.unit-input__input').props().value, '0.004328')
+      assert.equal(wrapper.find('.currency-input__conversion-component').text(), 'noConversionRateAvailable_t')
+    })
   })
 
   describe('handling actions', () => {
diff --git a/ui/app/components/currency-input/tests/currency-input.container.test.js b/ui/app/components/currency-input/tests/currency-input.container.test.js
index 10f530eff..6109d29b6 100644
--- a/ui/app/components/currency-input/tests/currency-input.container.test.js
+++ b/ui/app/components/currency-input/tests/currency-input.container.test.js
@@ -15,47 +15,155 @@ proxyquire('../currency-input.container.js', {
 
 describe('CurrencyInput container', () => {
   describe('mapStateToProps()', () => {
-    it('should return the correct props', () => {
-      const mockState = {
-        metamask: {
+    const tests = [
+      // Test # 1
+      {
+        comment: 'should return correct props in mainnet',
+        mockState: {
+          metamask: {
+            conversionRate: 280.45,
+            currentCurrency: 'usd',
+            nativeCurrency: 'ETH',
+            preferences: {
+              showFiatInTestnets: false,
+            },
+            provider: {
+              type: 'mainnet',
+            },
+          },
+        },
+        expected: {
+          conversionRate: 280.45,
+          currentCurrency: 'usd',
+          nativeCurrency: 'ETH',
+          hideFiat: false,
+        },
+      },
+      // Test # 2
+      {
+        comment: 'should return correct props when not in mainnet and showFiatInTestnets is false',
+        mockState: {
+          metamask: {
+            conversionRate: 280.45,
+            currentCurrency: 'usd',
+            nativeCurrency: 'ETH',
+            preferences: {
+              showFiatInTestnets: false,
+            },
+            provider: {
+              type: 'rinkeby',
+            },
+          },
+        },
+        expected: {
           conversionRate: 280.45,
           currentCurrency: 'usd',
           nativeCurrency: 'ETH',
+          hideFiat: true,
         },
-      }
+      },
+      // Test # 3
+      {
+        comment: 'should return correct props when not in mainnet and showFiatInTestnets is true',
+        mockState: {
+          metamask: {
+            conversionRate: 280.45,
+            currentCurrency: 'usd',
+            nativeCurrency: 'ETH',
+            preferences: {
+              showFiatInTestnets: true,
+            },
+            provider: {
+              type: 'rinkeby',
+            },
+          },
+        },
+        expected: {
+          conversionRate: 280.45,
+          currentCurrency: 'usd',
+          nativeCurrency: 'ETH',
+          hideFiat: false,
+        },
+      },
+      // Test # 4
+      {
+        comment: 'should return correct props when in mainnet and showFiatInTestnets is true',
+        mockState: {
+          metamask: {
+            conversionRate: 280.45,
+            currentCurrency: 'usd',
+            nativeCurrency: 'ETH',
+            preferences: {
+              showFiatInTestnets: true,
+            },
+            provider: {
+              type: 'mainnet',
+            },
+          },
+        },
+        expected: {
+          conversionRate: 280.45,
+          currentCurrency: 'usd',
+          nativeCurrency: 'ETH',
+          hideFiat: false,
+        },
+      },
+    ]
 
-      assert.deepEqual(mapStateToProps(mockState), {
-        conversionRate: 280.45,
-        currentCurrency: 'usd',
-        nativeCurrency: 'ETH',
-      })
+    tests.forEach(({ mockState, expected, comment }) => {
+      it(comment, () => assert.deepEqual(mapStateToProps(mockState), expected))
     })
   })
 
   describe('mergeProps()', () => {
-    it('should return the correct props', () => {
-      const mockStateProps = {
-        conversionRate: 280.45,
-        currentCurrency: 'usd',
-        nativeCurrency: 'ETH',
-      }
-      const mockDispatchProps = {}
-
-      assert.deepEqual(mergeProps(mockStateProps, mockDispatchProps, { useFiat: true }), {
-        conversionRate: 280.45,
-        currentCurrency: 'usd',
-        nativeCurrency: 'ETH',
-        useFiat: true,
-        nativeSuffix: 'ETH',
-        fiatSuffix: 'USD',
-      })
+    const tests = [
+      // Test # 1
+      {
+        comment: 'should return the correct props',
+        mock: {
+          stateProps: {
+            conversionRate: 280.45,
+            currentCurrency: 'usd',
+            nativeCurrency: 'ETH',
+          },
+          dispatchProps: {},
+          ownProps: {},
+        },
+        expected: {
+          conversionRate: 280.45,
+          currentCurrency: 'usd',
+          nativeCurrency: 'ETH',
+          // useFiat: true,
+          nativeSuffix: 'ETH',
+          fiatSuffix: 'USD',
+        },
+      },
+      // Test # 1
+      {
+        comment: 'should return the correct props when useFiat is true',
+        mock: {
+          stateProps: {
+            conversionRate: 280.45,
+            currentCurrency: 'usd',
+            nativeCurrency: 'ETH',
+          },
+          dispatchProps: {},
+          ownProps: { useFiat: true },
+        },
+        expected: {
+          conversionRate: 280.45,
+          currentCurrency: 'usd',
+          nativeCurrency: 'ETH',
+          useFiat: true,
+          nativeSuffix: 'ETH',
+          fiatSuffix: 'USD',
+        },
+      },
+    ]
 
-      assert.deepEqual(mergeProps(mockStateProps, mockDispatchProps, {}), {
-        conversionRate: 280.45,
-        currentCurrency: 'usd',
-        nativeCurrency: 'ETH',
-        nativeSuffix: 'ETH',
-        fiatSuffix: 'USD',
+    tests.forEach(({ mock: { stateProps, dispatchProps, ownProps }, expected, comment }) => {
+      it(comment, () => {
+        assert.deepEqual(mergeProps(stateProps, dispatchProps, ownProps), expected)
       })
     })
   })
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
index 1671f95fa..6692fb363 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/gas-modal-page-container.container.js
@@ -63,6 +63,7 @@ import {
 } from '../../send/send.utils'
 import { addHexPrefix } from 'ethereumjs-util'
 import { getAdjacentGasPrices, extrapolateY } from '../gas-price-chart/gas-price-chart.utils'
+import {getIsMainnet, preferencesSelector} from '../../../selectors'
 
 const mapStateToProps = (state, ownProps) => {
   const { transaction = {} } = ownProps
@@ -91,6 +92,10 @@ const mapStateToProps = (state, ownProps) => {
   const estimatedTimes = getEstimatedGasTimes(state)
   const balance = getCurrentEthBalance(state)
 
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+  const showFiat = Boolean(isMainnet || showFiatInTestnets)
+
   const insufficientBalance = !isBalanceSufficient({
     amount: value,
     gasTotal,
@@ -124,7 +129,7 @@ const mapStateToProps = (state, ownProps) => {
     infoRowProps: {
       originalTotalFiat: addHexWEIsToRenderableFiat(value, gasTotal, currentCurrency, conversionRate),
       originalTotalEth: addHexWEIsToRenderableEth(value, gasTotal),
-      newTotalFiat,
+      newTotalFiat: showFiat ? newTotalFiat : '',
       newTotalEth: addHexWEIsToRenderableEth(value, customGasTotal),
       transactionFee: addHexWEIsToRenderableEth('0x0', customGasTotal),
       sendAmount: addHexWEIsToRenderableEth(value, '0x0'),
diff --git a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
index 077ec471d..fb6a01fff 100644
--- a/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
+++ b/ui/app/components/gas-customization/gas-modal-page-container/tests/gas-modal-page-container-container.test.js
@@ -71,6 +71,12 @@ describe('gas-modal-page-container container', () => {
           },
           currentCurrency: 'abc',
           conversionRate: 50,
+          preferences: {
+            showFiatInTestnets: false,
+          },
+          provider: {
+            type: 'mainnet',
+          },
         },
         gas: {
           basicEstimates: {
@@ -152,6 +158,63 @@ describe('gas-modal-page-container container', () => {
           }),
           expectedResult: Object.assign({}, baseExpectedResult, { isSpeedUp: true }),
         },
+        {
+          mockState: Object.assign({}, baseMockState, {
+            metamask: {
+              ...baseMockState.metamask,
+              preferences: {
+                ...baseMockState.metamask.preferences,
+                showFiatInTestnets: false,
+              },
+              provider: {
+                ...baseMockState.metamask.provider,
+                type: 'rinkeby',
+              },
+            },
+          }),
+          mockOwnProps: baseMockOwnProps,
+          expectedResult: {
+            ...baseExpectedResult,
+            infoRowProps: {
+              ...baseExpectedResult.infoRowProps,
+              newTotalFiat: '',
+            },
+          },
+        },
+        {
+          mockState: Object.assign({}, baseMockState, {
+            metamask: {
+              ...baseMockState.metamask,
+              preferences: {
+                ...baseMockState.metamask.preferences,
+                showFiatInTestnets: true,
+              },
+              provider: {
+                ...baseMockState.metamask.provider,
+                type: 'rinkeby',
+              },
+            },
+          }),
+          mockOwnProps: baseMockOwnProps,
+          expectedResult: baseExpectedResult,
+        },
+        {
+          mockState: Object.assign({}, baseMockState, {
+            metamask: {
+              ...baseMockState.metamask,
+              preferences: {
+                ...baseMockState.metamask.preferences,
+                showFiatInTestnets: true,
+              },
+              provider: {
+                ...baseMockState.metamask.provider,
+                type: 'mainnet',
+              },
+            },
+          }),
+          mockOwnProps: baseMockOwnProps,
+          expectedResult: baseExpectedResult,
+        },
       ]
 
       let result
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
index f3d17e105..3650dc869 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.component.js
@@ -86,6 +86,7 @@ export default class ConfirmTransactionBase extends Component {
     warning: PropTypes.string,
     advancedInlineGasShown: PropTypes.bool,
     insufficientBalance: PropTypes.bool,
+    hideFiatConversion: PropTypes.bool,
   }
 
   state = {
@@ -174,6 +175,7 @@ export default class ConfirmTransactionBase extends Component {
       customGas,
       insufficientBalance,
       updateGasAndCalculate,
+      hideFiatConversion,
     } = this.props
 
     if (hideDetails) {
@@ -190,6 +192,7 @@ export default class ConfirmTransactionBase extends Component {
               headerText="Edit"
               headerTextClassName="confirm-detail-row__header-text--edit"
               onHeaderClick={() => this.handleEditGas()}
+              secondaryText={hideFiatConversion ? this.context.t('noConversionRateAvailable') : ''}
             />
             {advancedInlineGasShown
               ? <AdvancedGasInputs
@@ -209,7 +212,7 @@ export default class ConfirmTransactionBase extends Component {
               label="Total"
               value={hexTransactionTotal}
               primaryText={primaryTotalTextOverride}
-              secondaryText={secondaryTotalTextOverride}
+              secondaryText={hideFiatConversion ? this.context.t('noConversionRateAvailable') : secondaryTotalTextOverride}
               headerText="Amount + Gas Fee"
               headerTextClassName="confirm-detail-row__header-text--total"
               primaryValueTextColor="#2f9ae0"
diff --git a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
index e11b35459..2a8033c8f 100644
--- a/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
+++ b/ui/app/components/pages/confirm-transaction-base/confirm-transaction-base.container.js
@@ -18,7 +18,7 @@ import { isBalanceSufficient, calcGasTotal } from '../../send/send.utils'
 import { conversionGreaterThan } from '../../../conversion-util'
 import { MIN_GAS_LIMIT_DEC } from '../../send/send.constants'
 import { checksumAddress, addressSlicer, valuesFor } from '../../../util'
-import { getMetaMaskAccounts, getAdvancedInlineGasShown } from '../../../selectors'
+import {getMetaMaskAccounts, getAdvancedInlineGasShown, preferencesSelector, getIsMainnet} from '../../../selectors'
 
 const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
   return {
@@ -29,6 +29,8 @@ const casedContractMap = Object.keys(contractMap).reduce((acc, base) => {
 
 const mapStateToProps = (state, props) => {
   const { toAddress: propsToAddress } = props
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
   const { confirmTransaction, metamask, gas } = state
   const {
     ethTransactionAmount,
@@ -135,6 +137,8 @@ const mapStateToProps = (state, props) => {
     },
     advancedInlineGasShown: getAdvancedInlineGasShown(state),
     insufficientBalance,
+    hideSubtitle: (!isMainnet && !showFiatInTestnets),
+    hideFiatConversion: (!isMainnet && !showFiatInTestnets),
   }
 }
 
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' })),
   }
 }
diff --git a/ui/app/components/send/account-list-item/account-list-item.component.js b/ui/app/components/send/account-list-item/account-list-item.component.js
index 665383e58..0420af46b 100644
--- a/ui/app/components/send/account-list-item/account-list-item.component.js
+++ b/ui/app/components/send/account-list-item/account-list-item.component.js
@@ -19,8 +19,13 @@ export default class AccountListItem extends Component {
     handleClick: PropTypes.func,
     icon: PropTypes.node,
     balanceIsCached: PropTypes.bool,
+    showFiat: PropTypes.bool,
   };
 
+  static defaultProps = {
+    showFiat: true,
+  }
+
   static contextTypes = {
     t: PropTypes.func,
   };
@@ -34,6 +39,7 @@ export default class AccountListItem extends Component {
       handleClick,
       icon = null,
       balanceIsCached,
+      showFiat,
     } = this.props
 
     const { name, address, balance } = account || {}
@@ -83,11 +89,15 @@ export default class AccountListItem extends Component {
                   balanceIsCached ? <span className="account-list-item__cached-star">*</span> : null
                 }
               </div>
-              <UserPreferencedCurrencyDisplay
-                type={SECONDARY}
-                value={balance}
-                hideTitle={true}
-              />
+              {
+                showFiat && (
+                  <UserPreferencedCurrencyDisplay
+                    type={SECONDARY}
+                    value={balance}
+                    hideTitle={true}
+                  />
+                )
+              }
             </div>
           </Tooltip>
         )
diff --git a/ui/app/components/send/account-list-item/account-list-item.container.js b/ui/app/components/send/account-list-item/account-list-item.container.js
index 03a60be67..c045ef14f 100644
--- a/ui/app/components/send/account-list-item/account-list-item.container.js
+++ b/ui/app/components/send/account-list-item/account-list-item.container.js
@@ -5,17 +5,23 @@ import {
     getNativeCurrency,
 } from '../send.selectors.js'
 import {
+  getIsMainnet,
   isBalanceCached,
+  preferencesSelector,
 } from '../../../selectors'
 import AccountListItem from './account-list-item.component'
 
 export default connect(mapStateToProps)(AccountListItem)
 
 function mapStateToProps (state) {
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+
   return {
     conversionRate: getConversionRate(state),
     currentCurrency: getCurrentCurrency(state),
     nativeCurrency: getNativeCurrency(state),
     balanceIsCached: isBalanceCached(state),
+    showFiat: (isMainnet || !!showFiatInTestnets),
   }
 }
diff --git a/ui/app/components/send/account-list-item/tests/account-list-item-component.test.js b/ui/app/components/send/account-list-item/tests/account-list-item-component.test.js
index f2ddb73c0..2bd2ce0c5 100644
--- a/ui/app/components/send/account-list-item/tests/account-list-item-component.test.js
+++ b/ui/app/components/send/account-list-item/tests/account-list-item-component.test.js
@@ -126,9 +126,23 @@ describe('AccountListItem Component', function () {
       )
     })
 
+    it('should only render one CurrencyDisplay if showFiat is false', () => {
+      wrapper.setProps({ showFiat: false, displayBalance: true })
+      assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 1)
+      assert.deepEqual(
+        wrapper.find(UserPreferencedCurrencyDisplay).at(0).props(),
+        {
+          type: 'PRIMARY',
+          value: 'mockBalance',
+          hideTitle: true,
+        }
+      )
+    })
+
     it('should not render a CurrencyDisplay if displayBalance is false', () => {
       wrapper.setProps({ displayBalance: false })
       assert.equal(wrapper.find(UserPreferencedCurrencyDisplay).length, 0)
     })
+
   })
 })
diff --git a/ui/app/components/send/account-list-item/tests/account-list-item-container.test.js b/ui/app/components/send/account-list-item/tests/account-list-item-container.test.js
index 8c22bc8f8..662880aa0 100644
--- a/ui/app/components/send/account-list-item/tests/account-list-item-container.test.js
+++ b/ui/app/components/send/account-list-item/tests/account-list-item-container.test.js
@@ -11,12 +11,16 @@ proxyquire('../account-list-item.container.js', {
     },
   },
   '../send.selectors.js': {
-    getConversionRate: (s) => `mockConversionRate:${s}`,
-    getCurrentCurrency: (s) => `mockCurrentCurrency:${s}`,
-    getNativeCurrency: (s) => `mockNativeCurrency:${s}`,
+    getConversionRate: () => `mockConversionRate`,
+    getCurrentCurrency: () => `mockCurrentCurrency`,
+    getNativeCurrency: () => `mockNativeCurrency`,
   },
   '../../../selectors.js': {
-    isBalanceCached: (s) => `mockBalanceIsCached:${s}`,
+    isBalanceCached: () => `mockBalanceIsCached`,
+    preferencesSelector: ({ showFiatInTestnets }) => ({
+      showFiatInTestnets,
+    }),
+    getIsMainnet: ({ isMainnet }) => isMainnet,
   },
 })
 
@@ -25,11 +29,42 @@ describe('account-list-item container', () => {
   describe('mapStateToProps()', () => {
 
     it('should map the correct properties to props', () => {
-      assert.deepEqual(mapStateToProps('mockState'), {
-        conversionRate: 'mockConversionRate:mockState',
-        currentCurrency: 'mockCurrentCurrency:mockState',
-        nativeCurrency: 'mockNativeCurrency:mockState',
-        balanceIsCached: 'mockBalanceIsCached:mockState',
+      assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: false }), {
+        conversionRate: 'mockConversionRate',
+        currentCurrency: 'mockCurrentCurrency',
+        nativeCurrency: 'mockNativeCurrency',
+        balanceIsCached: 'mockBalanceIsCached',
+        showFiat: true,
+      })
+    })
+
+    it('should map the correct properties to props when in mainnet and showFiatInTestnet is true', () => {
+      assert.deepEqual(mapStateToProps({ isMainnet: true, showFiatInTestnets: true }), {
+        conversionRate: 'mockConversionRate',
+        currentCurrency: 'mockCurrentCurrency',
+        nativeCurrency: 'mockNativeCurrency',
+        balanceIsCached: 'mockBalanceIsCached',
+        showFiat: true,
+      })
+    })
+
+    it('should map the correct properties to props when not in mainnet and showFiatInTestnet is true', () => {
+      assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: true }), {
+        conversionRate: 'mockConversionRate',
+        currentCurrency: 'mockCurrentCurrency',
+        nativeCurrency: 'mockNativeCurrency',
+        balanceIsCached: 'mockBalanceIsCached',
+        showFiat: true,
+      })
+    })
+
+    it('should map the correct properties to props when not in mainnet and showFiatInTestnet is false', () => {
+      assert.deepEqual(mapStateToProps({ isMainnet: false, showFiatInTestnets: false }), {
+        conversionRate: 'mockConversionRate',
+        currentCurrency: 'mockCurrentCurrency',
+        nativeCurrency: 'mockNativeCurrency',
+        balanceIsCached: 'mockBalanceIsCached',
+        showFiat: false,
       })
     })
 
diff --git a/ui/app/components/token-input/tests/token-input.component.test.js b/ui/app/components/token-input/tests/token-input.component.test.js
index 2dacb9bc4..881101880 100644
--- a/ui/app/components/token-input/tests/token-input.component.test.js
+++ b/ui/app/components/token-input/tests/token-input.component.test.js
@@ -159,6 +159,48 @@ describe('TokenInput Component', () => {
       assert.equal(wrapper.find('.unit-input__input').props().value, '1')
       assert.equal(wrapper.find('.currency-display-component').text(), '$462.12USD')
     })
+
+    it('should render properly with a token value for fiat, but hideConversion is true', () => {
+      const mockStore = {
+        metamask: {
+          currentCurrency: 'usd',
+          conversionRate: 231.06,
+        },
+      }
+      const store = configureMockStore()(mockStore)
+
+      const wrapper = mount(
+        <Provider store={store}>
+          <TokenInput
+            value="2710"
+            selectedToken={{
+              address: '0x1',
+              decimals: '4',
+              symbol: 'ABC',
+            }}
+            suffix="ABC"
+            selectedTokenExchangeRate={2}
+            showFiat
+            hideConversion
+          />
+        </Provider>,
+        {
+          context: { t },
+          childContextTypes: {
+            t: PropTypes.func,
+          },
+        },
+      )
+
+      assert.ok(wrapper)
+      const tokenInputInstance = wrapper.find(TokenInput).at(0).instance()
+      assert.equal(tokenInputInstance.state.decimalValue, 1)
+      assert.equal(tokenInputInstance.state.hexValue, '2710')
+      assert.equal(wrapper.find('.unit-input__suffix').length, 1)
+      assert.equal(wrapper.find('.unit-input__suffix').text(), 'ABC')
+      assert.equal(wrapper.find('.unit-input__input').props().value, '1')
+      assert.equal(wrapper.find('.currency-input__conversion-component').text(), 'translate noConversionRateAvailable')
+    })
   })
 
   describe('handling actions', () => {
diff --git a/ui/app/components/token-input/tests/token-input.container.test.js b/ui/app/components/token-input/tests/token-input.container.test.js
index d73bc9a94..2b1c102c8 100644
--- a/ui/app/components/token-input/tests/token-input.container.test.js
+++ b/ui/app/components/token-input/tests/token-input.container.test.js
@@ -29,6 +29,12 @@ describe('TokenInput container', () => {
           selectedTokenAddress: '0x1',
           contractExchangeRates: {},
           send: {},
+          preferences: {
+            showFiatInTestnets: false,
+          },
+          provider: {
+            type: 'mainnet',
+          },
         },
       }
 
@@ -40,6 +46,7 @@ describe('TokenInput container', () => {
           symbol: 'ABC',
         },
         selectedTokenExchangeRate: 0,
+        hideConversion: false,
       })
     })
 
@@ -59,6 +66,12 @@ describe('TokenInput container', () => {
           send: {
             token: { address: 'test' },
           },
+          preferences: {
+            showFiatInTestnets: false,
+          },
+          provider: {
+            type: 'mainnet',
+          },
         },
       }
 
@@ -68,6 +81,7 @@ describe('TokenInput container', () => {
           address: 'test',
         },
         selectedTokenExchangeRate: 0,
+        hideConversion: false,
       })
     })
 
@@ -87,6 +101,12 @@ describe('TokenInput container', () => {
             '0x1': 5,
           },
           send: {},
+          preferences: {
+            showFiatInTestnets: false,
+          },
+          provider: {
+            type: 'mainnet',
+          },
         },
       }
 
@@ -98,6 +118,112 @@ describe('TokenInput container', () => {
           symbol: 'ABC',
         },
         selectedTokenExchangeRate: 5,
+        hideConversion: false,
+      })
+    })
+
+    it('should return the correct props when not in mainnet and showFiatInTestnets is false', () => {
+      const mockState = {
+        metamask: {
+          currentCurrency: 'usd',
+          tokens: [
+            {
+              address: '0x1',
+              decimals: '4',
+              symbol: 'ABC',
+            },
+          ],
+          selectedTokenAddress: '0x1',
+          contractExchangeRates: {},
+          send: {},
+          preferences: {
+            showFiatInTestnets: false,
+          },
+          provider: {
+            type: 'rinkeby',
+          },
+        },
+      }
+
+      assert.deepEqual(mapStateToProps(mockState), {
+        currentCurrency: 'usd',
+        selectedToken: {
+          address: '0x1',
+          decimals: '4',
+          symbol: 'ABC',
+        },
+        selectedTokenExchangeRate: 0,
+        hideConversion: true,
+      })
+    })
+
+    it('should return the correct props when not in mainnet and showFiatInTestnets is true', () => {
+      const mockState = {
+        metamask: {
+          currentCurrency: 'usd',
+          tokens: [
+            {
+              address: '0x1',
+              decimals: '4',
+              symbol: 'ABC',
+            },
+          ],
+          selectedTokenAddress: '0x1',
+          contractExchangeRates: {},
+          send: {},
+          preferences: {
+            showFiatInTestnets: true,
+          },
+          provider: {
+            type: 'rinkeby',
+          },
+        },
+      }
+
+      assert.deepEqual(mapStateToProps(mockState), {
+        currentCurrency: 'usd',
+        selectedToken: {
+          address: '0x1',
+          decimals: '4',
+          symbol: 'ABC',
+        },
+        selectedTokenExchangeRate: 0,
+        hideConversion: false,
+      })
+    })
+
+    it('should return the correct props when in mainnet and showFiatInTestnets is true', () => {
+      const mockState = {
+        metamask: {
+          currentCurrency: 'usd',
+          tokens: [
+            {
+              address: '0x1',
+              decimals: '4',
+              symbol: 'ABC',
+            },
+          ],
+          selectedTokenAddress: '0x1',
+          contractExchangeRates: {},
+          send: {},
+          preferences: {
+            showFiatInTestnets: true,
+          },
+          provider: {
+            type: 'mainnet',
+          },
+        },
+      }
+
+      assert.deepEqual(mapStateToProps(mockState), {
+        currentCurrency: 'usd',
+        selectedToken: {
+          address: '0x1',
+          decimals: '4',
+          symbol: 'ABC',
+        },
+        selectedTokenExchangeRate: 0,
+        hideConversion: false,
       })
     })
   })
diff --git a/ui/app/components/token-input/token-input.component.js b/ui/app/components/token-input/token-input.component.js
index 10fa1151e..398b762ec 100644
--- a/ui/app/components/token-input/token-input.component.js
+++ b/ui/app/components/token-input/token-input.component.js
@@ -24,6 +24,7 @@ export default class TokenInput extends PureComponent {
     value: PropTypes.string,
     suffix: PropTypes.string,
     showFiat: PropTypes.bool,
+    hideConversion: PropTypes.bool,
     selectedToken: PropTypes.object,
     selectedTokenExchangeRate: PropTypes.number,
   }
@@ -81,10 +82,18 @@ export default class TokenInput extends PureComponent {
   }
 
   renderConversionComponent () {
-    const { selectedTokenExchangeRate, showFiat, currentCurrency } = this.props
+    const { selectedTokenExchangeRate, showFiat, currentCurrency, hideConversion } = this.props
     const { decimalValue } = this.state
     let currency, numberOfDecimals
 
+    if (hideConversion) {
+      return (
+        <div className="currency-input__conversion-component">
+          { this.context.t('noConversionRateAvailable') }
+        </div>
+      )
+    }
+
     if (showFiat) {
       // Display Fiat
       currency = currentCurrency
diff --git a/ui/app/components/token-input/token-input.container.js b/ui/app/components/token-input/token-input.container.js
index ec233b1b8..a00d200f7 100644
--- a/ui/app/components/token-input/token-input.container.js
+++ b/ui/app/components/token-input/token-input.container.js
@@ -1,14 +1,17 @@
 import { connect } from 'react-redux'
 import TokenInput from './token-input.component'
-import { getSelectedToken, getSelectedTokenExchangeRate } from '../../selectors'
+import {getIsMainnet, getSelectedToken, getSelectedTokenExchangeRate, preferencesSelector} from '../../selectors'
 
 const mapStateToProps = state => {
   const { metamask: { currentCurrency } } = state
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
 
   return {
     currentCurrency,
     selectedToken: getSelectedToken(state),
     selectedTokenExchangeRate: getSelectedTokenExchangeRate(state),
+    hideConversion: (!isMainnet && !showFiatInTestnets),
   }
 }
 
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
index 141e16e17..26f52317d 100644
--- a/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown.component.js
@@ -18,15 +18,17 @@ export default class TransactionBreakdown extends PureComponent {
     transaction: PropTypes.object,
     className: PropTypes.string,
     nativeCurrency: PropTypes.string.isRequired,
+    showFiat: PropTypes.bool,
   }
 
   static defaultProps = {
     transaction: {},
+    showFiat: true,
   }
 
   render () {
     const { t } = this.context
-    const { transaction, className, nativeCurrency } = this.props
+    const { transaction, className, nativeCurrency, showFiat } = this.props
     const { txParams: { gas, gasPrice, value } = {}, txReceipt: { gasUsed } = {} } = transaction
 
     const gasLimit = typeof gasUsed === 'string' ? gasUsed : gas
@@ -84,11 +86,15 @@ export default class TransactionBreakdown extends PureComponent {
               type={PRIMARY}
               value={totalInHex}
             />
-            <UserPreferencedCurrencyDisplay
-              className="transaction-breakdown__value"
-              type={SECONDARY}
-              value={totalInHex}
-            />
+            {
+              showFiat && (
+                <UserPreferencedCurrencyDisplay
+                  className="transaction-breakdown__value"
+                  type={SECONDARY}
+                  value={totalInHex}
+                />
+              )
+            }
           </div>
         </TransactionBreakdownRow>
       </div>
diff --git a/ui/app/components/transaction-breakdown/transaction-breakdown.container.js b/ui/app/components/transaction-breakdown/transaction-breakdown.container.js
index ed2708e03..919187b6f 100644
--- a/ui/app/components/transaction-breakdown/transaction-breakdown.container.js
+++ b/ui/app/components/transaction-breakdown/transaction-breakdown.container.js
@@ -1,10 +1,14 @@
 import { connect } from 'react-redux'
 import TransactionBreakdown from './transaction-breakdown.component'
-import { getNativeCurrency } from '../../selectors'
+import {getIsMainnet, getNativeCurrency, preferencesSelector} from '../../selectors'
 
 const mapStateToProps = (state) => {
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+
   return {
     nativeCurrency: getNativeCurrency(state),
+    showFiat: (isMainnet || !!showFiatInTestnets),
   }
 }
 
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.component.js b/ui/app/components/transaction-list-item/transaction-list-item.component.js
index ecd8b4cef..29d3a7b1f 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.component.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.component.js
@@ -24,6 +24,7 @@ export default class TransactionListItem extends PureComponent {
     showCancelModal: PropTypes.func,
     showCancel: PropTypes.bool,
     showRetry: PropTypes.bool,
+    showFiat: PropTypes.bool,
     token: PropTypes.object,
     tokenData: PropTypes.object,
     transaction: PropTypes.object,
@@ -33,6 +34,10 @@ export default class TransactionListItem extends PureComponent {
     fetchGasEstimates: PropTypes.func,
   }
 
+  static defaultProps = {
+    showFiat: true,
+  }
+
   state = {
     showTransactionDetails: false,
   }
@@ -115,9 +120,9 @@ export default class TransactionListItem extends PureComponent {
   }
 
   renderSecondaryCurrency () {
-    const { token, value } = this.props
+    const { token, value, showFiat } = this.props
 
-    return token
+    return token || !showFiat
       ? null
       : (
         <UserPreferencedCurrencyDisplay
diff --git a/ui/app/components/transaction-list-item/transaction-list-item.container.js b/ui/app/components/transaction-list-item/transaction-list-item.container.js
index 45777057c..93a82849e 100644
--- a/ui/app/components/transaction-list-item/transaction-list-item.container.js
+++ b/ui/app/components/transaction-list-item/transaction-list-item.container.js
@@ -14,11 +14,16 @@ import {
   setCustomGasPriceForRetry,
   setCustomGasLimit,
 } from '../../ducks/gas.duck'
+import {getIsMainnet, preferencesSelector} from '../../selectors'
 
 const mapStateToProps = state => {
   const { metamask: { knownMethodData } } = state
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
+
   return {
     knownMethodData,
+    showFiat: (isMainnet || !!showFiatInTestnets),
   }
 }
 
diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
index bd6b4bdb6..b16e04f4f 100644
--- a/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
+++ b/ui/app/components/transaction-view-balance/transaction-view-balance.component.js
@@ -22,10 +22,15 @@ export default class TransactionViewBalance extends PureComponent {
     balance: PropTypes.string,
     assetImage: PropTypes.string,
     balanceIsCached: PropTypes.bool,
+    showFiat: PropTypes.bool,
+  }
+
+  static defaultProps = {
+    showFiat: true,
   }
 
   renderBalance () {
-    const { selectedToken, balance, balanceIsCached } = this.props
+    const { selectedToken, balance, balanceIsCached, showFiat } = this.props
 
     return selectedToken
       ? (
@@ -53,16 +58,20 @@ export default class TransactionViewBalance extends PureComponent {
                     balanceIsCached ? <span className="transaction-view-balance__cached-star">*</span> : null
                   }
                 </div>
-                <UserPreferencedCurrencyDisplay
-                  className={classnames({
-                    'transaction-view-balance__cached-secondary-balance': balanceIsCached,
-                    'transaction-view-balance__secondary-balance': !balanceIsCached,
-                  })}
-                  value={balance}
-                  type={SECONDARY}
-                  ethNumberOfDecimals={4}
-                  hideTitle={true}
-                />
+                {
+                  showFiat && (
+                    <UserPreferencedCurrencyDisplay
+                      className={classnames({
+                        'transaction-view-balance__cached-secondary-balance': balanceIsCached,
+                        'transaction-view-balance__secondary-balance': !balanceIsCached,
+                      })}
+                      value={balance}
+                      type={SECONDARY}
+                      ethNumberOfDecimals={4}
+                      hideTitle={true}
+                    />
+                  )
+                }
             </div>
           </Tooltip>
       )
diff --git a/ui/app/components/transaction-view-balance/transaction-view-balance.container.js b/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
index 354db5ae1..df6d287eb 100644
--- a/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
+++ b/ui/app/components/transaction-view-balance/transaction-view-balance.container.js
@@ -9,10 +9,14 @@ import {
   getSelectedTokenAssetImage,
   getMetaMaskAccounts,
   isBalanceCached,
+  preferencesSelector,
+  getIsMainnet,
 } from '../../selectors'
 import { showModal } from '../../actions'
 
 const mapStateToProps = state => {
+  const { showFiatInTestnets } = preferencesSelector(state)
+  const isMainnet = getIsMainnet(state)
   const selectedAddress = getSelectedAddress(state)
   const { metamask: { network } } = state
   const accounts = getMetaMaskAccounts(state)
@@ -26,6 +30,7 @@ const mapStateToProps = state => {
     nativeCurrency: getNativeCurrency(state),
     assetImage: getSelectedTokenAssetImage(state),
     balanceIsCached: isBalanceCached(state),
+    showFiat: (isMainnet || !!showFiatInTestnets),
   }
 }
 
diff --git a/ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.container.test.js b/ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.container.test.js
index ba1c23d83..88d63baae 100644
--- a/ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.container.test.js
+++ b/ui/app/components/user-preferenced-currency-display/tests/user-preferenced-currency-display.container.test.js
@@ -21,6 +21,10 @@ describe('UserPreferencedCurrencyDisplay container', () => {
           nativeCurrency: 'ETH',
           preferences: {
             useNativeCurrencyAsPrimaryCurrency: true,
+            showFiatInTestnets: false,
+          },
+          provider: {
+            type: 'mainnet',
           },
         },
       }
@@ -28,6 +32,30 @@ describe('UserPreferencedCurrencyDisplay container', () => {
       assert.deepEqual(mapStateToProps(mockState), {
         nativeCurrency: 'ETH',
         useNativeCurrencyAsPrimaryCurrency: true,
+        isMainnet: true,
+        showFiatInTestnets: false,
+      })
+    })
+
+    it('should return the correct props when not in mainnet and showFiatInTestnets is true', () => {
+      const mockState = {
+        metamask: {
+          nativeCurrency: 'ETH',
+          preferences: {
+            useNativeCurrencyAsPrimaryCurrency: true,
+            showFiatInTestnets: true,
+          },
+          provider: {
+            type: 'rinkeby',
+          },
+        },
+      }
+
+      assert.deepEqual(mapStateToProps(mockState), {
+        nativeCurrency: 'ETH',
+        useNativeCurrencyAsPrimaryCurrency: true,
+        isMainnet: false,
+        showFiatInTestnets: true,
       })
     })
   })
@@ -41,6 +69,8 @@ describe('UserPreferencedCurrencyDisplay container', () => {
           stateProps: {
             useNativeCurrencyAsPrimaryCurrency: true,
             nativeCurrency: 'ETH',
+            isMainnet: true,
+            showFiatInTestnets: false,
           },
           ownProps: {
             type: 'PRIMARY',
@@ -56,6 +86,8 @@ describe('UserPreferencedCurrencyDisplay container', () => {
           stateProps: {
             useNativeCurrencyAsPrimaryCurrency: false,
             nativeCurrency: 'ETH',
+            isMainnet: true,
+            showFiatInTestnets: false,
           },
           ownProps: {
             type: 'PRIMARY',
@@ -71,6 +103,8 @@ describe('UserPreferencedCurrencyDisplay container', () => {
           stateProps: {
             useNativeCurrencyAsPrimaryCurrency: true,
             nativeCurrency: 'ETH',
+            isMainnet: true,
+            showFiatInTestnets: false,
           },
           ownProps: {
             type: 'SECONDARY',
@@ -88,6 +122,8 @@ describe('UserPreferencedCurrencyDisplay container', () => {
           stateProps: {
             useNativeCurrencyAsPrimaryCurrency: false,
             nativeCurrency: 'ETH',
+            isMainnet: true,
+            showFiatInTestnets: false,
           },
           ownProps: {
             type: 'SECONDARY',
@@ -103,6 +139,57 @@ describe('UserPreferencedCurrencyDisplay container', () => {
             prefix: 'b',
           },
         },
+        {
+          stateProps: {
+            useNativeCurrencyAsPrimaryCurrency: false,
+            nativeCurrency: 'ETH',
+            isMainnet: false,
+            showFiatInTestnets: false,
+          },
+          ownProps: {
+            type: 'PRIMARY',
+          },
+          result: {
+            currency: 'ETH',
+            nativeCurrency: 'ETH',
+            numberOfDecimals: 6,
+            prefix: undefined,
+          },
+        },
+        {
+          stateProps: {
+            useNativeCurrencyAsPrimaryCurrency: false,
+            nativeCurrency: 'ETH',
+            isMainnet: false,
+            showFiatInTestnets: true,
+          },
+          ownProps: {
+            type: 'PRIMARY',
+          },
+          result: {
+            currency: undefined,
+            nativeCurrency: 'ETH',
+            numberOfDecimals: 2,
+            prefix: undefined,
+          },
+        },
+        {
+          stateProps: {
+            useNativeCurrencyAsPrimaryCurrency: false,
+            nativeCurrency: 'ETH',
+            isMainnet: true,
+            showFiatInTestnets: true,
+          },
+          ownProps: {
+            type: 'PRIMARY',
+          },
+          result: {
+            currency: undefined,
+            nativeCurrency: 'ETH',
+            numberOfDecimals: 2,
+            prefix: undefined,
+          },
+        },
       ]
 
       tests.forEach(({ stateProps, ownProps, result }) => {
diff --git a/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.container.js b/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.container.js
index 7999301ad..3c5bd0f21 100644
--- a/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.container.js
+++ b/ui/app/components/user-preferenced-currency-display/user-preferenced-currency-display.container.js
@@ -1,19 +1,26 @@
 import { connect } from 'react-redux'
 import UserPreferencedCurrencyDisplay from './user-preferenced-currency-display.component'
-import { preferencesSelector } from '../../selectors'
+import { preferencesSelector, getIsMainnet } from '../../selectors'
 import { ETH, PRIMARY, SECONDARY } from '../../constants/common'
 
 const mapStateToProps = (state, ownProps) => {
-  const { useNativeCurrencyAsPrimaryCurrency } = preferencesSelector(state)
+  const {
+    useNativeCurrencyAsPrimaryCurrency,
+    showFiatInTestnets,
+  } = preferencesSelector(state)
+
+  const isMainnet = getIsMainnet(state)
 
   return {
     useNativeCurrencyAsPrimaryCurrency,
+    showFiatInTestnets,
+    isMainnet,
     nativeCurrency: state.metamask.nativeCurrency,
   }
 }
 
 const mergeProps = (stateProps, dispatchProps, ownProps) => {
-  const { useNativeCurrencyAsPrimaryCurrency, nativeCurrency, ...restStateProps } = stateProps
+  const { useNativeCurrencyAsPrimaryCurrency, showFiatInTestnets, isMainnet, nativeCurrency, ...restStateProps } = stateProps
   const {
     type,
     numberOfDecimals: propsNumberOfDecimals,
@@ -40,6 +47,12 @@ const mergeProps = (stateProps, dispatchProps, ownProps) => {
     prefix = propsPrefix || fiatPrefix
   }
 
+  if (!isMainnet && !showFiatInTestnets) {
+    currency = nativeCurrency || ETH
+    numberOfDecimals = propsNumberOfDecimals || ethNumberOfDecimals || 6
+    prefix = propsPrefix || ethPrefix
+  }
+
   return {
     ...restStateProps,
     ...dispatchProps,