Support sepolia network

app/components/Nav/Main/index.js

@@ -11,7 +11,6 @@ import {
   AppState,
   StyleSheet,
   View,
-  Linking,
   PushNotificationIOS, // eslint-disable-line react-native/split-platform-components
 } from 'react-native';
 import NetInfo from '@react-native-community/netinfo';
@@ -54,9 +53,6 @@ import { useTheme } from '../../../util/theme';
 import RootRPCMethodsUI from './RootRPCMethodsUI';
 import usePrevious from '../../hooks/usePrevious';
 import { colors as importedColors } from '../../../styles/common';
-import WarningAlert from '../../../components/UI/WarningAlert';
-import { KOVAN, RINKEBY, ROPSTEN } from '../../../constants/network';
-import { MM_DEPRECATED_NETWORKS } from '../../../constants/urls';
 import {
   getNetworkImageSource,
   getNetworkNameFromProvider,
@@ -93,7 +89,6 @@ const Main = (props) => {
   const [forceReload, setForceReload] = useState(false);
   const [showRemindLaterModal, setShowRemindLaterModal] = useState(false);
   const [skipCheckbox, setSkipCheckbox] = useState(false);
-  const [showDeprecatedAlert, setShowDeprecatedAlert] = useState(true);
   const { colors } = useTheme();
   const styles = createStyles(colors);
 
@@ -332,29 +327,6 @@ const Main = (props) => {
     termsOfUse();
   }, [termsOfUse]);
 
-  const openDeprecatedNetworksArticle = () => {
-    Linking.openURL(MM_DEPRECATED_NETWORKS);
-  };
-
-  const renderDeprecatedNetworkAlert = (network, backUpSeedphraseVisible) => {
-    const { wizardStep } = props;
-    const { type } = network.providerConfig;
-    if (
-      (type === ROPSTEN || type === RINKEBY || type === KOVAN) &&
-      showDeprecatedAlert &&
-      !wizardStep
-    ) {
-      return (
-        <WarningAlert
-          text={strings('networks.deprecated_network_msg')}
-          dismissAlert={() => setShowDeprecatedAlert(false)}
-          onPressLearnMore={openDeprecatedNetworksArticle}
-          precedentAlert={backUpSeedphraseVisible}
-        />
-      );
-    }
-  };
-
   return (
     <React.Fragment>
       <View style={styles.flex}>
@@ -372,10 +344,7 @@ const Main = (props) => {
           onDismiss={toggleRemindLater}
           navigation={props.navigation}
         />
-        {renderDeprecatedNetworkAlert(
-          props.network,
-          props.backUpSeedphraseVisible,
-        )}
+
         <SkipAccountSecurityModal
           modalVisible={showRemindLaterModal}
           onCancel={skipAccountModalSecureNow}
@@ -438,27 +407,12 @@ Main.propTypes = {
    * Object that represents the current route info like params passed to it
    */
   route: PropTypes.object,
-  /**
-   * Object representing the selected network
-   */
-  network: PropTypes.object,
-  /**
-   * redux flag that indicates if the alert should be shown
-   */
-  backUpSeedphraseVisible: PropTypes.bool,
-  /**
-   * Onboarding wizard step.
-   */
-  wizardStep: PropTypes.number,
 };
 
 const mapStateToProps = (state) => ({
   lockTime: state.settings.lockTime,
   thirdPartyApiMode: state.privacy.thirdPartyApiMode,
   providerType: selectProviderType(state),
-  network: state.engine.backgroundState.NetworkController,
-  backUpSeedphraseVisible: state.user.backUpSeedphraseVisible,
-  wizardStep: state.wizard.step,
 });
 
 const mapDispatchToProps = (dispatch) => ({

app/components/UI/AccountApproval/__snapshots__/index.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`AccountApproval should render correctly 1`] = `
     }
   }
   dispatch={[Function]}
-  networkType="ropsten"
+  networkType="sepolia"
   selectedAddress="0xe7E125654064EEa56229f273dA586F10DF96B0a1"
   tokensLength={0}
 />

app/components/UI/AccountApproval/index.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import AccountApproval from './';
 import { shallow } from 'enzyme';
 import configureMockStore from 'redux-mock-store';
-import { ROPSTEN } from '../../../constants/network';
+import { SEPOLIA } from '../../../constants/network';
 import { Provider } from 'react-redux';
 
 const mockStore = configureMockStore();
@@ -14,7 +14,7 @@ const initialState = {
       },
       NetworkController: {
         providerConfig: {
-          type: ROPSTEN,
+          type: SEPOLIA,
         },
       },
       TokensController: {

app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.test.tsx

@@ -63,9 +63,9 @@ const initialState = {
       },
       NetworkController: {
         providerConfig: {
-          chainId: '0x1',
-          type: 'ropsten',
-          nickname: 'Ropsten',
+          chainId: '0xaa36a7',
+          type: 'sepolia',
+          nickname: 'Sepolia',
         },
         provider: {
           ticker: 'eth',

app/components/UI/ApproveTransactionHeader/__snapshots__/ApproveTransactionHeader.test.tsx.snap

@@ -292,7 +292,7 @@ exports[`ApproveTransactionHeader should render correctly 1`] = `
                   resizeMode="contain"
                   source={
                     Object {
-                      "testUri": "../../../app/images/ropsten-logo-dark.png",
+                      "testUri": "../../../app/images/sepolia-logo-dark.png",
                     }
                   }
                   style={
@@ -321,7 +321,7 @@ exports[`ApproveTransactionHeader should render correctly 1`] = `
               }
             }
           >
-            Ropsten
+            Sepolia
           </Text>
           <Text
             style={

app/components/UI/SignatureRequest/__snapshots__/index.test.tsx.snap

@@ -9,6 +9,6 @@ exports[`SignatureRequest should render correctly 1`] = `
     }
   }
   dispatch={[Function]}
-  networkType="ropsten"
+  networkType="sepolia"
 />
 `;

app/components/UI/SignatureRequest/index.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import SignatureRequest from './';
 import configureMockStore from 'redux-mock-store';
-import { ROPSTEN } from '../../../constants/network';
+import { SEPOLIA } from '../../../constants/network';
 import { Provider } from 'react-redux';
 
 const mockStore = configureMockStore();
@@ -18,7 +18,7 @@ const initialState = {
       },
       NetworkController: {
         providerConfig: {
-          type: ROPSTEN,
+          type: SEPOLIA,
         },
       },
     },

app/components/UI/Tokens/index.tsx

@@ -25,7 +25,12 @@ import NetworkMainAssetLogo from '../NetworkMainAssetLogo';
 import { isZero } from '../../../util/lodash';
 import { useTheme } from '../../../util/theme';
 import NotificationManager from '../../../core/NotificationManager';
-import { getDecimalChainId, isMainnetByChainId } from '../../../util/networks';
+import {
+  getDecimalChainId,
+  getTestNetImageByChainId,
+  isMainnetByChainId,
+  isTestNet,
+} from '../../../util/networks';
 import generateTestId from '../../../../wdio/utils/generateTestId';
 import {
   IMPORT_TOKEN_BUTTON_ID,
@@ -220,7 +225,13 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
 
     const isMainnet = isMainnetByChainId(chainId);
 
-    const NetworkBadgeSource = isMainnet ? images.ETHEREUM : images[ticker];
+    const NetworkBadgeSource = () => {
+      if (isTestNet(chainId)) return getTestNetImageByChainId(chainId);
+
+      if (isMainnet) return images.ETHEREUM;
+
+      return images[ticker];
+    };
 
     const badgeName = (isMainnet ? providerType : ticker) || '';
 
@@ -236,7 +247,7 @@ const Tokens: React.FC<TokensI> = ({ tokens }) => {
           badgeProps={{
             variant: BadgeVariant.Network,
             name: badgeName,
-            imageSource: NetworkBadgeSource,
+            imageSource: NetworkBadgeSource(),
           }}
         >
           {asset.isETH ? (

app/components/UI/TransactionHeader/__snapshots__/index.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`TransactionHeader should render correctly 1`] = `
     }
   }
   dispatch={[Function]}
-  networkType="ropsten"
-  nickname="Ropsten"
+  networkType="sepolia"
+  nickname="Sepolia"
 />
 `;

app/components/UI/TransactionHeader/index.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import TransactionHeader from './';
 import configureMockStore from 'redux-mock-store';
-import { ROPSTEN } from '../../../constants/network';
+import { SEPOLIA } from '../../../constants/network';
 import { Provider } from 'react-redux';
 
 const mockStore = configureMockStore();
@@ -11,8 +11,8 @@ const initialState = {
     backgroundState: {
       NetworkController: {
         providerConfig: {
-          type: ROPSTEN,
-          nickname: 'Ropsten',
+          type: SEPOLIA,
+          nickname: 'Sepolia',
         },
       },
     },

app/components/UI/UrlAutocomplete/__snapshots__/index.test.tsx.snap

@@ -2,6 +2,6 @@
 
 exports[`UrlAutocomplete should render correctly 1`] = `
 <Connect(UrlAutocomplete)
-  network="ropsten"
+  network="sepolia"
 />
 `;

app/components/UI/UrlAutocomplete/index.test.tsx

@@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
 import UrlAutocomplete from './';
 import { Provider } from 'react-redux';
 import configureMockStore from 'redux-mock-store';
-import { ROPSTEN } from '../../../constants/network';
+import { SEPOLIA } from '../../../constants/network';
 
 const mockStore = configureMockStore();
 const store = mockStore({});
@@ -12,7 +12,7 @@ describe('UrlAutocomplete', () => {
   it('should render correctly', () => {
     const wrapper = shallow(
       <Provider store={store}>
-        <UrlAutocomplete network={ROPSTEN} />
+        <UrlAutocomplete network={SEPOLIA} />
       </Provider>,
     );
     expect(wrapper).toMatchSnapshot();

app/components/UI/WatchAssetRequest/index.test.tsx

@@ -4,7 +4,7 @@ import WatchAssetRequest from './';
 import configureMockStore from 'redux-mock-store';
 import { BN } from 'ethereumjs-util';
 import { Provider } from 'react-redux';
-import { ROPSTEN } from '../../../constants/network';
+import { SEPOLIA } from '../../../constants/network';
 
 const mockStore = configureMockStore();
 const initialState = {
@@ -18,7 +18,7 @@ const initialState = {
       },
       NetworkController: {
         providerConfig: {
-          type: ROPSTEN,
+          type: SEPOLIA,
         },
       },
     },

app/components/Views/Approval/__snapshots__/index.test.tsx.snap

@@ -12,7 +12,7 @@ exports[`Approval should render correctly 1`] = `
       },
     }
   }
-  networkType="ropsten"
+  networkType="sepolia"
   resetTransaction={[Function]}
   selectedAddress="0x0"
   showCustomNonce={false}

app/components/Views/Approval/index.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import Approval from './';
 import configureMockStore from 'redux-mock-store';
 import { shallow } from 'enzyme';
-import { ROPSTEN } from '../../../constants/network';
+import { SEPOLIA } from '../../../constants/network';
 import { Provider } from 'react-redux';
 
 const mockStore = configureMockStore();
@@ -30,7 +30,7 @@ const initialState = {
       },
       NetworkController: {
         providerConfig: {
-          type: ROPSTEN,
+          type: SEPOLIA,
         },
       },
       PreferencesController: {

app/components/Views/Login/index.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { shallow } from 'enzyme';
 import Login from './';
 import configureMockStore from 'redux-mock-store';
-import { ROPSTEN } from '../../../constants/network';
+import { SEPOLIA } from '../../../constants/network';
 import { Provider } from 'react-redux';
 
 const mockStore = configureMockStore();
@@ -14,7 +14,7 @@ const initialState = {
       },
       NetworkController: {
         providerConfig: {
-          type: ROPSTEN,
+          type: SEPOLIA,
         },
       },
       TokensController: {

app/components/Views/Settings/NetworksSettings/NetworkSettings/index.js

@@ -208,7 +208,8 @@ const createStyles = (colors) =>
   });
 
 const allNetworks = getAllNetworks();
-const allNetworksblockExplorerUrl = `https://api.infura.io/v1/jsonrpc/`;
+const allNetworksblockExplorerUrl = (networkName) =>
+  `https://${networkName}.infura.io/v3/`;
 /**
  * Main view for app configurations
  */
@@ -319,7 +320,7 @@ class NetworkSettings extends PureComponent {
         nickname = networkInformation.name;
         chainId = networkInformation.chainId.toString();
         editable = false;
-        rpcUrl = allNetworksblockExplorerUrl + network;
+        rpcUrl = allNetworksblockExplorerUrl(network);
         ticker = strings('unit.eth');
         // Override values if UI is updating custom mainnet RPC URL.
         if (isCustomMainnet) {

app/components/Views/Settings/NetworksSettings/index.js

@@ -208,7 +208,7 @@ class NetworksSettings extends PureComponent {
 
   onActionSheetPress = (index) => (index === 0 ? this.removeNetwork() : null);
 
-  networkElement(name, image, i, network, isCustomRPC) {
+  networkElement(name, image, i, network, isCustomRPC, color) {
     const colors = this.context.colors || mockTheme.colors;
     const styles = createStyles(colors);
     return (
@@ -242,7 +242,7 @@ class NetworksSettings extends PureComponent {
                     />
                   ) : (
                     <View
-                      style={[styles.networkIcon, { backgroundColor: image }]}
+                      style={[styles.networkIcon, { backgroundColor: color }]}
                     >
                       <Text style={styles.text}>{name[0]}</Text>
                     </View>
@@ -266,8 +266,8 @@ class NetworksSettings extends PureComponent {
 
   renderOtherNetworks() {
     return this.getOtherNetworks().map((network, i) => {
-      const { color, name } = Networks[network];
-      return this.networkElement(name, color, i, network, false);
+      const { name, imageSource, color } = Networks[network];
+      return this.networkElement(name, imageSource, i, network, false, color);
     });
   }