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

2 files changed, 103 insertions, 3 deletions

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,