feat: add linea sepolia network and deprecate Linea Goerli network (#…

…8908)

## **Description**

- A new Linea Sepolia network will be released soon. This PR adds
support for the Linea Sepolia network in the MetaMask mobile app.
- Deprecate Linea Goerli network

## **Related issues**

Fixes:

## **Manual testing steps**

For Linea Sepolia:
1. Select Linea Sepolia network
2. Send a transaction
3. Check the transaction result in the explorer
4. Make sure the Linea Sepolia network is display in the network
settings page

For Linea Goerli deprecation:
1. Select Linea Goerli network
2. Check that Linea Goerli deprecation message is display at the bottom
of the screen


## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->

### **After**

https://github.com/MetaMask/metamask-mobile/assets/85494462/9e7c4298-fa47-44fb-9fce-a37b519c5936

## **Pre-merge author checklist**

- [X] I’ve followed [MetaMask Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [X] I've clearly explained what problem this PR is solving and how it
is solved.
- [ ] I've linked related issues
- [ ] I've included manual testing steps
- [X] I've included screenshots/recordings if applicable
- [ ] I’ve included tests if applicable
- [ ] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [ ] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.
- [X] I’ve properly set the pull request status:
  - [ ] In case it's not yet "ready for review", I've set it to "draft".
- [X] In case it's "ready for review", I've changed it from "draft" to
"non-draft".

## **Pre-merge reviewer checklist**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

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

@@ -366,11 +366,12 @@ class NetworkSettings extends PureComponent {
         chainId = networkInformation.chainId.toString();
         editable = false;
         rpcUrl = allNetworksblockExplorerUrl(networkTypeOrRpcUrl);
-        ticker =
-          networkInformation.chainId.toString() !==
-          NETWORKS_CHAIN_ID.LINEA_GOERLI
-            ? strings('unit.eth')
-            : 'LineaETH';
+        ticker = ![
+          NETWORKS_CHAIN_ID.LINEA_GOERLI,
+          NETWORKS_CHAIN_ID.LINEA_SEPOLIA,
+        ].includes(networkInformation.chainId.toString())
+          ? strings('unit.eth')
+          : 'LineaETH';
         // Override values if UI is updating custom mainnet RPC URL.
         if (isCustomMainnet) {
           nickname = DEFAULT_MAINNET_CUSTOM_NAME;

app/components/hooks/useBlockExplorer.test.ts

@@ -16,7 +16,7 @@ const mockInitialState = {
           type: LINEA_GOERLI,
           rpcTarget: 'https://mainnet.infura.io/v3/1234567890abcdef',
         },
-      } as NetworkController['state'],
+      } as unknown as NetworkController['state'],
     },
   },
 };

app/constants/network.js

@@ -5,6 +5,7 @@ export const HOMESTEAD = 'homestead';
 export const GOERLI = 'goerli';
 export const SEPOLIA = 'sepolia';
 export const LINEA_GOERLI = 'linea-goerli';
+export const LINEA_SEPOLIA = 'linea-sepolia';
 export const LINEA_MAINNET = 'linea-mainnet';
 export const RPC = NetworkType.rpc;
 export const NO_RPC_BLOCK_EXPLORER = 'NO_BLOCK_EXPLORER';
@@ -28,6 +29,7 @@ export const NETWORKS_CHAIN_ID = {
   HARMONY: toHex('1666600000'),
   SEPOLIA: toHex('11155111'),
   LINEA_GOERLI: toHex('59140'),
+  LINEA_SEPOLIA: toHex('59141'),
   GOERLI: toHex('5'),
   LINEA_MAINNET: toHex('59144'),
   ZKSYNC_ERA: toHex('324'),
@@ -40,6 +42,7 @@ export const DEPRECATED_NETWORKS = [
   NETWORKS_CHAIN_ID.GOERLI,
   NETWORKS_CHAIN_ID.ARBITRUM_GOERLI,
   NETWORKS_CHAIN_ID.OPTIMISM_GOERLI,
+  NETWORKS_CHAIN_ID.LINEA_GOERLI,
 ];
 export const CHAINLIST_CURRENCY_SYMBOLS_MAP = {
   MAINNET: 'ETH',
@@ -54,6 +57,7 @@ export const CHAINLIST_CURRENCY_SYMBOLS_MAP = {
   HARMONY: 'ONE',
   SEPOLIA: 'SepoliaETH',
   LINEA_GOERLI: 'LineaETH',
+  LINEA_SEPOLIA: 'LineaETH',
   GOERLI: 'GoerliETH',
   LINEA_MAINNET: 'ETH',
   ZKSYNC_ERA: 'ETH',
@@ -72,6 +76,8 @@ export const CURRENCY_SYMBOL_BY_CHAIN_ID = {
   [NETWORKS_CHAIN_ID.HARMONY]: CHAINLIST_CURRENCY_SYMBOLS_MAP.HARMONY,
   [NETWORKS_CHAIN_ID.SEPOLIA]: CHAINLIST_CURRENCY_SYMBOLS_MAP.SEPOLIA,
   [NETWORKS_CHAIN_ID.LINEA_GOERLI]: CHAINLIST_CURRENCY_SYMBOLS_MAP.LINEA_GOERLI,
+  [NETWORKS_CHAIN_ID.LINEA_SEPOLIA]:
+    CHAINLIST_CURRENCY_SYMBOLS_MAP.LINEA_SEPOLIA,
   [NETWORKS_CHAIN_ID.GOERLI]: CHAINLIST_CURRENCY_SYMBOLS_MAP.GOERLI,
   [NETWORKS_CHAIN_ID.LINEA_MAINNET]:
     CHAINLIST_CURRENCY_SYMBOLS_MAP.LINEA_MAINNET,

app/constants/urls.ts

@@ -36,6 +36,7 @@ export const KEYSTONE_SUPPORT_VIDEO = 'https://keyst.one/mmmvideo';
 export const CHAINLIST_URL = 'https://chainlist.wtf';
 export const MM_ETHERSCAN_URL = 'https://etherscamdb.info/domain/meta-mask.com';
 export const LINEA_GOERLI_BLOCK_EXPLORER = 'https://goerli.lineascan.build';
+export const LINEA_SEPOLIA_BLOCK_EXPLORER = 'https://sepolia.lineascan.build';
 export const LINEA_MAINNET_BLOCK_EXPLORER = 'https://lineascan.build';
 
 // Phishing

app/images/image-icons.js

@@ -7,7 +7,7 @@ import FTM from './fantom.png';
 import ETHEREUM from './eth-logo-new.png';
 import BNB from './binance.png';
 import AVAX from './avalanche.png';
-import LINEA_GOERLI from './linea-testnet-logo.png';
+import LINEA_TESTNET from './linea-testnet-logo.png';
 import SEPOLIA from './sepolia-logo-dark.png';
 import LINEA_MAINNET from './linea-mainnet-logo.png';
 
@@ -21,7 +21,8 @@ export default {
   BNB,
   AETH,
   AVAX,
-  'LINEA-GOERLI': LINEA_GOERLI,
+  'LINEA-GOERLI': LINEA_TESTNET,
+  'LINEA-SEPOLIA': LINEA_TESTNET,
   SEPOLIA,
   'LINEA-MAINNET': LINEA_MAINNET,
 };

app/store/migrations/025.test.js

@@ -22,6 +22,7 @@ describe('Migration #25', () => {
               '0xfa2': true,
               '0xaa36a7': true,
               '0xe704': true,
+              '0xe705': true,
               '0xe708': true,
               '0x504': true,
               '0x507': true,
@@ -54,6 +55,7 @@ describe('Migration #25', () => {
               '0xfa2': false,
               '0xaa36a7': false,
               '0xe704': false,
+              '0xe705': false,
               '0xe708': false,
               '0x504': false,
               '0x507': false,

app/util/etherscan.js

@@ -1,8 +1,14 @@
 import {
   LINEA_GOERLI_BLOCK_EXPLORER,
   LINEA_MAINNET_BLOCK_EXPLORER,
+  LINEA_SEPOLIA_BLOCK_EXPLORER,
 } from '../constants/urls';
-import { LINEA_GOERLI, LINEA_MAINNET, MAINNET } from '../constants/network';
+import {
+  LINEA_GOERLI,
+  LINEA_MAINNET,
+  LINEA_SEPOLIA,
+  MAINNET,
+} from '../constants/network';
 
 /**
  * Gets the etherscan link for an address in a specific network
@@ -40,6 +46,7 @@ export function getEtherscanTransactionUrl(networkType, tx_hash) {
  */
 export function getEtherscanBaseUrl(networkType) {
   if (networkType === LINEA_GOERLI) return LINEA_GOERLI_BLOCK_EXPLORER;
+  if (networkType === LINEA_SEPOLIA) return LINEA_SEPOLIA_BLOCK_EXPLORER;
   if (networkType === LINEA_MAINNET) return LINEA_MAINNET_BLOCK_EXPLORER;
   const subdomain =
     networkType.toLowerCase() === MAINNET

app/util/networks/index.js

@@ -11,6 +11,7 @@ import {
   RPC,
   LINEA_GOERLI,
   LINEA_MAINNET,
+  LINEA_SEPOLIA,
 } from '../../../app/constants/network';
 import { NetworkSwitchErrorType } from '../../../app/constants/error';
 import { ChainId, NetworkType, toHex } from '@metamask/controller-utils';
@@ -26,7 +27,7 @@ export { handleNetworkSwitch };
 /* eslint-disable */
 const ethLogo = require('../../images/eth-logo-new.png');
 const sepoliaLogo = require('../../images/sepolia-logo-dark.png');
-const lineaGoerliLogo = require('../../images/linea-testnet-logo.png');
+const lineaTestnetLogo = require('../../images/linea-testnet-logo.png');
 const lineaMainnetLogo = require('../../images/linea-mainnet-logo.png');
 
 /* eslint-enable */
@@ -82,7 +83,16 @@ const NetworkList = {
     chainId: toHex('59140'),
     color: '#61dfff',
     networkType: 'linea-goerli',
-    imageSource: lineaGoerliLogo,
+    imageSource: lineaTestnetLogo,
+  },
+  [LINEA_SEPOLIA]: {
+    name: 'Linea Sepolia Test Network',
+    shortName: 'Linea Sepolia',
+    networkId: 59141,
+    chainId: toHex('59141'),
+    color: '#61dfff',
+    networkType: 'linea-sepolia',
+    imageSource: lineaTestnetLogo,
   },
   [RPC]: {
     name: 'Private Network',
@@ -159,7 +169,11 @@ export const isMultiLayerFeeNetwork = (chainId) =>
  * @returns - Image of test network or undefined.
  */
 export const getTestNetImage = (networkType) => {
-  if (networkType === SEPOLIA || networkType === LINEA_GOERLI) {
+  if (
+    networkType === SEPOLIA ||
+    networkType === LINEA_GOERLI ||
+    networkType === LINEA_SEPOLIA
+  ) {
     return networksWithImages?.[networkType.toUpperCase()];
   }
 };
@@ -171,6 +185,9 @@ export const getTestNetImageByChainId = (chainId) => {
   if (NETWORKS_CHAIN_ID.LINEA_GOERLI === chainId) {
     return networksWithImages?.['LINEA-GOERLI'];
   }
+  if (NETWORKS_CHAIN_ID.LINEA_SEPOLIA === chainId) {
+    return networksWithImages?.['LINEA-SEPOLIA'];
+  }
 };
 
 /**
@@ -179,6 +196,7 @@ export const getTestNetImageByChainId = (chainId) => {
 const TESTNET_CHAIN_IDS = [
   ChainId[NetworkType.sepolia],
   ChainId[NetworkType['linea-goerli']],
+  ChainId[NetworkType['linea-sepolia']],
 ];
 
 /**
@@ -187,6 +205,7 @@ const TESTNET_CHAIN_IDS = [
 export const TESTNET_FAUCETS = {
   [ChainId[NetworkType.sepolia]]: SEPOLIA_FAUCET,
   [ChainId[NetworkType['linea-goerli']]]: LINEA_FAUCET,
+  [ChainId[NetworkType['linea-sepolia']]]: LINEA_FAUCET,
 };
 
 export const isTestNetworkWithFaucet = (chainId) =>

app/util/networks/index.test.ts

@@ -16,6 +16,7 @@ import {
   SEPOLIA,
   LINEA_GOERLI,
   LINEA_MAINNET,
+  LINEA_SEPOLIA,
 } from '../../../app/constants/network';
 import { NetworkSwitchErrorType } from '../../../app/constants/error';
 import { getNonceLock } from '../../util/transaction-controller';
@@ -53,6 +54,7 @@ describe('network-utils', () => {
       expect(allNetworks.includes(MAINNET)).toEqual(true);
       expect(allNetworks.includes(SEPOLIA)).toEqual(true);
       expect(allNetworks.includes(LINEA_GOERLI)).toEqual(true);
+      expect(allNetworks.includes(LINEA_SEPOLIA)).toEqual(true);
       expect(allNetworks.includes(LINEA_MAINNET)).toEqual(true);
     });
     it('should exclude rpc', () => {
@@ -70,7 +72,11 @@ describe('network-utils', () => {
   });
 
   describe('isTestNet', () => {
-    const testnets = [NetworkType.sepolia, NetworkType['linea-goerli']];
+    const testnets = [
+      NetworkType.sepolia,
+      NetworkType['linea-goerli'],
+      NetworkType['linea-sepolia'],
+    ];
 
     for (const networkType of testnets) {
       it(`should return true if the given chain ID is for '${networkType}'`, () => {
@@ -212,6 +218,18 @@ describe('network-utils', () => {
       expect(title).toBe(`goerli.lineascan.build`);
     });
 
+    it('should return custom block explorer address url when network type === "linea-sepolia"', () => {
+      const { url, title } = getBlockExplorerAddressUrl(
+        LINEA_SEPOLIA,
+        mockEthereumAddress,
+      );
+
+      expect(url).toBe(
+        `https://sepolia.lineascan.build/address/${mockEthereumAddress}`,
+      );
+      expect(title).toBe(`sepolia.lineascan.build`);
+    });
+
     it('should return custom block explorer address url when network type === "linea-mainnet"', () => {
       const { url, title } = getBlockExplorerAddressUrl(
         LINEA_MAINNET,
@@ -271,6 +289,18 @@ describe('network-utils', () => {
       expect(title).toBe(`goerli.lineascan.build`);
     });
 
+    it('should return custom block explorer tx url when network type === "linea-sepolia"', () => {
+      const { url, title } = getBlockExplorerTxUrl(
+        LINEA_SEPOLIA,
+        mockTransactionHash,
+      );
+
+      expect(url).toBe(
+        `https://sepolia.lineascan.build/tx/${mockTransactionHash}`,
+      );
+      expect(title).toBe(`sepolia.lineascan.build`);
+    });
+
     it('should return custom block explorer tx url when network type === "linea-mainnet"', () => {
       const { url, title } = getBlockExplorerTxUrl(
         LINEA_MAINNET,

app/util/test/initial-background-state.json

@@ -112,6 +112,7 @@
       "0xfa2": true,
       "0xaa36a7": true,
       "0xe704": true,
+      "0xe705": true,
       "0xe708": true,
       "0x504": true,
       "0x507": true,