Hide Equivalent Values on Testnet (#763)

* Hide eqv values when not on testnet

* use isTestnet and variabalize rateExistsOrAll

common/components/BalanceSidebar/EquivalentValues.tsx

@@ -5,6 +5,7 @@ import { State } from 'reducers/rates';
 import { rateSymbols, TFetchCCRates } from 'actions/rates';
 import { TokenBalance } from 'selectors/wallet';
 import { Balance } from 'libs/wallet';
+import { NetworkConfig } from 'config/data';
 import { ETH_DECIMAL, convertTokenBase } from 'libs/units';
 import Spinner from 'components/ui/Spinner';
 import UnitDisplay from 'components/ui/UnitDisplay';
@@ -18,6 +19,7 @@ interface Props {
   rates: State['rates'];
   ratesError?: State['ratesError'];
   fetchCCRates: TFetchCCRates;
+  network: NetworkConfig;
 }
 
 interface CmpState {
@@ -50,16 +52,18 @@ export default class EquivalentValues extends React.Component<Props, CmpState> {
   }
 
   public render() {
-    const { balance, tokenBalances, rates, ratesError } = this.props;
+    const { balance, tokenBalances, rates, ratesError, network } = this.props;
     const { currency } = this.state;
 
     // There are a bunch of reasons why the incorrect balances might be rendered
     // while we have incomplete data that's being fetched.
     const isFetching =
       !balance || balance.isPending || !tokenBalances || Object.keys(rates).length === 0;
+    // Currency exists in rates or the all option is selected
+    const rateExistsOrAll = rates[currency] || currency === ALL_OPTION;
 
     let valuesEl;
-    if (!isFetching && (rates[currency] || currency === ALL_OPTION)) {
+    if (!isFetching && rateExistsOrAll && !network.isTestnet) {
       const values = this.getEquivalentValues(currency);
       valuesEl = rateSymbols.map(key => {
         if (!values[key] || key === currency) {
@@ -80,6 +84,14 @@ export default class EquivalentValues extends React.Component<Props, CmpState> {
           </li>
         );
       });
+    } else if (network.isTestnet) {
+      valuesEl = (
+        <div className="text-center">
+          <h5 style={{ color: 'red' }}>
+            On test network, equivalent values will not be displayed.
+          </h5>
+        </div>
+      );
     } else if (ratesError) {
       valuesEl = <h5>{ratesError}</h5>;
     } else if (tokenBalances && tokenBalances.length === 0) {

common/components/BalanceSidebar/index.tsx

@@ -53,6 +53,7 @@ export class BalanceSidebar extends React.Component<Props, {}> {
         name: 'Equivalent Values',
         content: (
           <EquivalentValues
+            network={network}
             balance={balance}
             tokenBalances={tokenBalances}
             rates={rates}