Disable BUY button from home screen when not on main network (#10453)

shared/constants/network.js

@@ -31,6 +31,13 @@ export const GOERLI_DISPLAY_NAME = 'Goerli';
 
 export const INFURA_PROVIDER_TYPES = [ROPSTEN, RINKEBY, KOVAN, MAINNET, GOERLI];
 
+export const TEST_CHAINS = [
+  ROPSTEN_CHAIN_ID,
+  RINKEBY_CHAIN_ID,
+  GOERLI_CHAIN_ID,
+  KOVAN_CHAIN_ID,
+];
+
 export const NETWORK_TYPE_TO_ID_MAP = {
   [ROPSTEN]: { networkId: ROPSTEN_NETWORK_ID, chainId: ROPSTEN_CHAIN_ID },
   [RINKEBY]: { networkId: RINKEBY_NETWORK_ID, chainId: RINKEBY_CHAIN_ID },

ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.component.js

@@ -11,6 +11,8 @@ export default class DepositEtherModal extends Component {
 
   static propTypes = {
     network: PropTypes.string.isRequired,
+    isTestnet: PropTypes.bool.isRequired,
+    isMainnet: PropTypes.bool.isRequired,
     toWyre: PropTypes.func.isRequired,
     address: PropTypes.string.isRequired,
     toFaucet: PropTypes.func.isRequired,
@@ -86,9 +88,14 @@ export default class DepositEtherModal extends Component {
   }
 
   render() {
-    const { network, toWyre, address, toFaucet } = this.props;
-
-    const isTestNetwork = ['3', '4', '5', '42'].find((n) => n === network);
+    const {
+      network,
+      toWyre,
+      address,
+      toFaucet,
+      isTestnet,
+      isMainnet,
+    } = this.props;
     const networkName = getNetworkDisplayName(network);
 
     return (
@@ -133,7 +140,7 @@ export default class DepositEtherModal extends Component {
                 });
                 toWyre(address);
               },
-              hide: isTestNetwork,
+              hide: !isMainnet,
             })}
             {this.renderRow({
               logo: (
@@ -158,7 +165,7 @@ export default class DepositEtherModal extends Component {
               text: this.faucetRowText(networkName),
               buttonLabel: this.context.t('getEther'),
               onButtonClick: () => toFaucet(network),
-              hide: !isTestNetwork,
+              hide: !isTestnet,
             })}
           </div>
         </div>

ui/app/components/app/modals/deposit-ether-modal/deposit-ether-modal.container.js

@@ -5,11 +5,14 @@ import {
   showModal,
   hideWarning,
 } from '../../../../store/actions';
+import { getIsTestnet, getIsMainnet } from '../../../../selectors/selectors';
 import DepositEtherModal from './deposit-ether-modal.component';
 
 function mapStateToProps(state) {
   return {
     network: state.metamask.network,
+    isTestnet: getIsTestnet(state),
+    isMainnet: getIsMainnet(state),
     address: state.metamask.selectedAddress,
   };
 }

ui/app/components/app/wallet-overview/eth-overview.js

@@ -23,7 +23,8 @@ import {
   isBalanceCached,
   getSelectedAccount,
   getShouldShowFiat,
-  getCurrentChainId,
+  getIsMainnet,
+  getIsTestnet,
   getCurrentKeyring,
 } from '../../../selectors/selectors';
 import SwapIcon from '../../ui/icon/swap-icon.component';
@@ -34,7 +35,6 @@ import {
   setSwapsFromToken,
 } from '../../../ducks/swaps/swaps';
 import IconButton from '../../ui/icon-button';
-import { MAINNET_CHAIN_ID } from '../../../../../shared/constants/network';
 import WalletOverview from './wallet-overview';
 
 const EthOverview = ({ className }) => {
@@ -61,7 +61,8 @@ const EthOverview = ({ className }) => {
   const showFiat = useSelector(getShouldShowFiat);
   const selectedAccount = useSelector(getSelectedAccount);
   const { balance } = selectedAccount;
-  const chainId = useSelector(getCurrentChainId);
+  const isMainnetChain = useSelector(getIsMainnet);
+  const isTestnetChain = useSelector(getIsTestnet);
   const enteredSwapsEvent = useNewMetricEvent({
     event: 'Swaps Opened',
     properties: { source: 'Main View', active_currency: 'ETH' },
@@ -115,6 +116,7 @@ const EthOverview = ({ className }) => {
           <IconButton
             className="eth-overview__button"
             Icon={BuyIcon}
+            disabled={!(isMainnetChain || isTestnetChain)}
             label={t('buy')}
             onClick={() => {
               depositEvent();
@@ -134,10 +136,10 @@ const EthOverview = ({ className }) => {
           {swapsEnabled ? (
             <IconButton
               className="eth-overview__button"
-              disabled={chainId !== MAINNET_CHAIN_ID}
+              disabled={!isMainnetChain}
               Icon={SwapIcon}
               onClick={() => {
-                if (chainId === MAINNET_CHAIN_ID) {
+                if (isMainnetChain) {
                   enteredSwapsEvent();
                   dispatch(setSwapsFromToken(swapsEthToken));
                   if (usingHardwareWallet) {
@@ -152,7 +154,7 @@ const EthOverview = ({ className }) => {
                 <Tooltip
                   title={t('onlyAvailableOnMainnet')}
                   position="bottom"
-                  disabled={chainId === MAINNET_CHAIN_ID}
+                  disabled={isMainnetChain}
                 >
                   {contents}
                 </Tooltip>

ui/app/selectors/selectors.js

@@ -1,7 +1,11 @@
 import { stripHexPrefix } from 'ethereumjs-util';
 import { createSelector } from 'reselect';
 import { addHexPrefix } from '../../../app/scripts/lib/util';
-import { MAINNET, NETWORK_TYPE_RPC } from '../../../shared/constants/network';
+import {
+  MAINNET,
+  TEST_CHAINS,
+  NETWORK_TYPE_RPC,
+} from '../../../shared/constants/network';
 import {
   shortenAddress,
   checksumAddress,
@@ -284,6 +288,11 @@ export function getIsMainnet(state) {
   return networkType === MAINNET;
 }
 
+export function getIsTestnet(state) {
+  const chainId = getCurrentChainId(state);
+  return TEST_CHAINS.includes(chainId);
+}
+
 export function getPreferences({ metamask }) {
   return metamask.preferences;
 }