Disable swaps based on chainId, instead of network id (#10155)

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

@@ -23,7 +23,7 @@ import {
   isBalanceCached,
   getSelectedAccount,
   getShouldShowFiat,
-  getCurrentNetworkId,
+  getCurrentChainId,
   getCurrentKeyring,
 } from '../../../selectors/selectors'
 import SwapIcon from '../../ui/icon/swap-icon.component'
@@ -34,7 +34,7 @@ import {
   setSwapsFromToken,
 } from '../../../ducks/swaps/swaps'
 import IconButton from '../../ui/icon-button'
-import { MAINNET_NETWORK_ID } from '../../../../../app/scripts/controllers/network/enums'
+import { MAINNET_CHAIN_ID } from '../../../../../app/scripts/controllers/network/enums'
 import WalletOverview from './wallet-overview'
 
 const EthOverview = ({ className }) => {
@@ -61,7 +61,7 @@ const EthOverview = ({ className }) => {
   const showFiat = useSelector(getShouldShowFiat)
   const selectedAccount = useSelector(getSelectedAccount)
   const { balance } = selectedAccount
-  const networkId = useSelector(getCurrentNetworkId)
+  const chainId = useSelector(getCurrentChainId)
   const enteredSwapsEvent = useNewMetricEvent({
     event: 'Swaps Opened',
     properties: { source: 'Main View', active_currency: 'ETH' },
@@ -134,10 +134,10 @@ const EthOverview = ({ className }) => {
           {swapsEnabled ? (
             <IconButton
               className="eth-overview__button"
-              disabled={networkId !== MAINNET_NETWORK_ID}
+              disabled={chainId !== MAINNET_CHAIN_ID}
               Icon={SwapIcon}
               onClick={() => {
-                if (networkId === MAINNET_NETWORK_ID) {
+                if (chainId === MAINNET_CHAIN_ID) {
                   enteredSwapsEvent()
                   dispatch(setSwapsFromToken(swapsEthToken))
                   if (usingHardwareWallet) {
@@ -152,7 +152,7 @@ const EthOverview = ({ className }) => {
                 <Tooltip
                   title={t('onlyAvailableOnMainnet')}
                   position="bottom"
-                  disabled={networkId === '1'}
+                  disabled={chainId === MAINNET_CHAIN_ID}
                 >
                   {contents}
                 </Tooltip>

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

@@ -25,9 +25,9 @@ import {
 import {
   getAssetImages,
   getCurrentKeyring,
-  getCurrentNetworkId,
+  getCurrentChainId,
 } from '../../../selectors/selectors'
-import { MAINNET_NETWORK_ID } from '../../../../../app/scripts/controllers/network/enums'
+import { MAINNET_CHAIN_ID } from '../../../../../app/scripts/controllers/network/enums'
 
 import SwapIcon from '../../ui/icon/swap-icon.component'
 import SendIcon from '../../ui/icon/overview-send-icon.component'
@@ -58,7 +58,7 @@ const TokenOverview = ({ className, token }) => {
     balanceToRender,
     token.symbol,
   )
-  const networkId = useSelector(getCurrentNetworkId)
+  const chainId = useSelector(getCurrentChainId)
   const enteredSwapsEvent = useNewMetricEvent({
     event: 'Swaps Opened',
     properties: { source: 'Token View', active_currency: token.symbol },
@@ -100,10 +100,10 @@ const TokenOverview = ({ className, token }) => {
           {swapsEnabled ? (
             <IconButton
               className="token-overview__button"
-              disabled={networkId !== MAINNET_NETWORK_ID}
+              disabled={chainId !== MAINNET_CHAIN_ID}
               Icon={SwapIcon}
               onClick={() => {
-                if (networkId === MAINNET_NETWORK_ID) {
+                if (chainId === MAINNET_CHAIN_ID) {
                   enteredSwapsEvent()
                   dispatch(
                     setSwapsFromToken({
@@ -125,7 +125,7 @@ const TokenOverview = ({ className, token }) => {
                 <Tooltip
                   title={t('onlyAvailableOnMainnet')}
                   position="bottom"
-                  disabled={networkId === '1'}
+                  disabled={chainId === MAINNET_CHAIN_ID}
                 >
                   {contents}
                 </Tooltip>

ui/app/pages/swaps/index.js

@@ -12,6 +12,7 @@ import { I18nContext } from '../../contexts/i18n'
 import {
   getSelectedAccount,
   getCurrentNetworkId,
+  getCurrentChainId,
 } from '../../selectors/selectors'
 import {
   getFromToken,
@@ -47,6 +48,7 @@ import {
   SWAP_FAILED_ERROR,
   OFFLINE_FOR_MAINTENANCE,
 } from '../../helpers/constants/swaps'
+import { MAINNET_CHAIN_ID } from '../../../../app/scripts/controllers/network/enums'
 
 import {
   resetBackgroundSwapsState,
@@ -245,6 +247,11 @@ export default function Swap() {
     return () => window.removeEventListener('beforeunload', fn)
   }, [dispatch, isLoadingQuotesRoute])
 
+  const chainId = useSelector(getCurrentChainId)
+  if (chainId !== MAINNET_CHAIN_ID) {
+    return <Redirect to={{ pathname: DEFAULT_ROUTE }} />
+  }
+
   return (
     <div className="swaps">
       <div className="swaps__container">