Adding Sepolia as a default test network (#15787)

.storybook/test-data.js

@@ -70,6 +70,17 @@ const state = {
       ticker: 'ETH',
       viewOnly: true,
     },
+    {
+      blockExplorerUrl: 'https://sepolia.etherscan.io',
+      chainId: '0xaa36a7',
+      iconColor: 'var(--sepolia)',
+      isATestNetwork: true,
+      labelKey: 'sepolia',
+      providerType: 'sepolia',
+      rpcUrl: 'https://sepolia.infura.io/v3/',
+      ticker: 'ETH',
+      viewOnly: true,
+    },
     {
       blockExplorerUrl: '',
       chainId: '0x539',
@@ -1310,6 +1321,7 @@ const state = {
       rinkeby: null,
       kovan: null,
       goerli: null,
+      sepolia: null,
       mainnet: 10902989,
     },
     subjects: {

app/_locales/en/messages.json

@@ -723,6 +723,9 @@
   "connectingToRopsten": {
     "message": "Connecting to Ropsten test network"
   },
+  "connectingToSepolia": {
+    "message": "Connecting to Sepolia test network"
+  },
   "contactUs": {
     "message": "Contact us"
   },
@@ -3093,6 +3096,9 @@
     "message": "Warning: you are about to send to a token contract which could result in a loss of funds. $1",
     "description": "$1 is a clickable link with text defined by the 'learnMoreUpperCase' key. The link will open to a support article regarding the known contract address warning"
   },
+  "sepolia": {
+    "message": "Sepolia test network"
+  },
   "setAdvancedPrivacySettings": {
     "message": "Set advanced privacy settings"
   },

app/scripts/constants/contracts.js

@@ -8,6 +8,8 @@ export const SINGLE_CALL_BALANCES_ADDRESS_KOVAN =
   '0xb1d3fbb2f83aecd196f474c16ca5d9cffa0d0ffc';
 export const SINGLE_CALL_BALANCES_ADDRESS_GOERLI =
   '0x9788C4E93f9002a7ad8e72633b11E8d1ecd51f9b';
+// TODO(SEPOLIA) There is currently no balance call address for Sepolia
+export const SINGLE_CALL_BALANCES_ADDRESS_SEPOLIA = '';
 export const SINGLE_CALL_BALANCES_ADDRESS_BSC =
   '0x2352c63A83f9Fd126af8676146721Fa00924d7e4';
 export const SINGLE_CALL_BALANCES_ADDRESS_OPTIMISM =

app/scripts/controllers/incoming-transactions.js

@@ -54,6 +54,7 @@ const etherscanSupportedNetworks = [
   CHAIN_IDS.MAINNET,
   CHAIN_IDS.RINKEBY,
   CHAIN_IDS.ROPSTEN,
+  CHAIN_IDS.SEPOLIA,
 ];
 
 export default class IncomingTransactionsController {
@@ -82,6 +83,7 @@ export default class IncomingTransactionsController {
         [CHAIN_IDS.MAINNET]: null,
         [CHAIN_IDS.RINKEBY]: null,
         [CHAIN_IDS.ROPSTEN]: null,
+        [CHAIN_IDS.SEPOLIA]: null,
       },
       ...opts.initState,
     };

app/scripts/controllers/incoming-transactions.test.js

@@ -35,6 +35,7 @@ const PREPOPULATED_BLOCKS_BY_NETWORK = {
   [CHAIN_IDS.MAINNET]: 3,
   [CHAIN_IDS.RINKEBY]: 5,
   [CHAIN_IDS.ROPSTEN]: 4,
+  [CHAIN_IDS.SEPOLIA]: 6,
 };
 const EMPTY_BLOCKS_BY_NETWORK = {
   [CHAIN_IDS.GOERLI]: null,
@@ -42,6 +43,7 @@ const EMPTY_BLOCKS_BY_NETWORK = {
   [CHAIN_IDS.MAINNET]: null,
   [CHAIN_IDS.RINKEBY]: null,
   [CHAIN_IDS.ROPSTEN]: null,
+  [CHAIN_IDS.SEPOLIA]: null,
 };
 
 function getEmptyInitState() {
@@ -149,6 +151,7 @@ function nockEtherscanApiForAllChains(mockResponse) {
     CHAIN_IDS.MAINNET,
     CHAIN_IDS.RINKEBY,
     CHAIN_IDS.ROPSTEN,
+    CHAIN_IDS.SEPOLIA,
     'undefined',
   ]) {
     nock(

app/scripts/controllers/network/network-controller.test.js

@@ -177,6 +177,10 @@ describe('NetworkController', () => {
           input: 'goerli',
           expected: 'Goerli',
         },
+        {
+          input: 'sepolia',
+          expected: 'Sepolia',
+        },
       ];
 
       tests.forEach(({ input, expected }) =>

app/scripts/lib/account-tracker.js

@@ -22,6 +22,7 @@ import {
   SINGLE_CALL_BALANCES_ADDRESS_ROPSTEN,
   SINGLE_CALL_BALANCES_ADDRESS_KOVAN,
   SINGLE_CALL_BALANCES_ADDRESS_GOERLI,
+  SINGLE_CALL_BALANCES_ADDRESS_SEPOLIA,
   SINGLE_CALL_BALANCES_ADDRESS_BSC,
   SINGLE_CALL_BALANCES_ADDRESS_OPTIMISM,
   SINGLE_CALL_BALANCES_ADDRESS_POLYGON,
@@ -238,6 +239,13 @@ export default class AccountTracker {
         );
         break;
 
+      case CHAIN_IDS.SEPOLIA:
+        await this._updateAccountsViaBalanceChecker(
+          addresses,
+          SINGLE_CALL_BALANCES_ADDRESS_SEPOLIA,
+        );
+        break;
+
       case CHAIN_IDS.BSC:
         await this._updateAccountsViaBalanceChecker(
           addresses,

app/scripts/lib/buy-url.js

@@ -166,6 +166,8 @@ export default async function getBuyUrl({ chainId, address, service }) {
       return 'https://github.com/kovan-testnet/faucet';
     case 'goerli-faucet':
       return 'https://goerli-faucet.slock.it/';
+    case 'sepolia-faucet':
+      return 'https://faucet.sepolia.dev/';
     default:
       throw new Error(
         `Unknown cryptocurrency exchange or faucet: "${service}"`,
@@ -185,6 +187,8 @@ function getDefaultServiceForChain(chainId) {
       return 'kovan-faucet';
     case CHAIN_IDS.GOERLI:
       return 'goerli-faucet';
+    case CHAIN_IDS.SEPOLIA:
+      return 'sepolia-faucet';
     default:
       throw new Error(
         `No default cryptocurrency exchange or faucet for chainId: "${chainId}"`,

app/scripts/lib/ens-ipfs/resolver.js

@@ -79,6 +79,7 @@ function getRegistryForChainId(chainId) {
     case 3:
     case 4:
     case 5:
+    case 6:
       // Mainnet, Ropsten, Rinkeby, and Goerli, respectively, use the same address
       return '0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e';
     default:

development/states/navigate-txs.json

@@ -309,7 +309,8 @@
       "mainnet": "ok",
       "rinkeby": "ok",
       "ropsten": "ok",
-      "goerli": "ok"
+      "goerli": "ok",
+      "sepolia": "ok"
     }
   },
   "send": {

shared/constants/network.ts

@@ -167,6 +167,7 @@ export const NETWORK_TYPES = {
   RINKEBY: 'rinkeby',
   ROPSTEN: 'ropsten',
   RPC: 'rpc',
+  SEPOLIA: 'sepolia',
 } as const;
 
 /**
@@ -194,6 +195,7 @@ export const NETWORK_IDS = {
   GOERLI: '5',
   KOVAN: '42',
   LOCALHOST: '1337',
+  SEPOLIA: '6',
 } as const;
 
 /**
@@ -217,6 +219,7 @@ export const CHAIN_IDS = {
   ARBITRUM: '0xa4b1',
   HARMONY: '0x63564c40',
   PALM: '0x2a15c308d',
+  SEPOLIA: '0xaa36a7',
 } as const;
 
 /**
@@ -230,6 +233,7 @@ export const RINKEBY_DISPLAY_NAME = 'Rinkeby';
 export const KOVAN_DISPLAY_NAME = 'Kovan';
 export const MAINNET_DISPLAY_NAME = 'Ethereum Mainnet';
 export const GOERLI_DISPLAY_NAME = 'Goerli';
+export const SEPOLIA_DISPLAY_NAME = 'Sepolia';
 export const LOCALHOST_DISPLAY_NAME = 'Localhost 8545';
 export const BSC_DISPLAY_NAME = 'Binance Smart Chain';
 export const POLYGON_DISPLAY_NAME = 'Polygon';
@@ -263,6 +267,7 @@ export const MAINNET_RPC_URL = getRpcUrl({
   network: NETWORK_TYPES.MAINNET,
 });
 export const GOERLI_RPC_URL = getRpcUrl({ network: NETWORK_TYPES.GOERLI });
+export const SEPOLIA_RPC_URL = getRpcUrl({ network: NETWORK_TYPES.SEPOLIA });
 export const LOCALHOST_RPC_URL = 'http://localhost:8545';
 
 /**
@@ -305,6 +310,7 @@ export const INFURA_PROVIDER_TYPES = [
   NETWORK_TYPES.KOVAN,
   NETWORK_TYPES.MAINNET,
   NETWORK_TYPES.GOERLI,
+  NETWORK_TYPES.SEPOLIA,
 ];
 
 export const TEST_CHAINS = [
@@ -312,6 +318,7 @@ export const TEST_CHAINS = [
   CHAIN_IDS.RINKEBY,
   CHAIN_IDS.GOERLI,
   CHAIN_IDS.KOVAN,
+  CHAIN_IDS.SEPOLIA,
   CHAIN_IDS.LOCALHOST,
 ];
 
@@ -336,6 +343,9 @@ export const TEST_NETWORK_TICKER_MAP: {
   [NETWORK_TYPES.GOERLI]: `${typedCapitalize(NETWORK_TYPES.GOERLI)}${
     CURRENCY_SYMBOLS.ETH
   }`,
+  [NETWORK_TYPES.SEPOLIA]: `${typedCapitalize(NETWORK_TYPES.SEPOLIA)}${
+    CURRENCY_SYMBOLS.ETH
+  }`,
 };
 
 /**
@@ -362,6 +372,11 @@ export const BUILT_IN_NETWORKS = {
     chainId: CHAIN_IDS.GOERLI,
     ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.GOERLI],
   },
+  [NETWORK_TYPES.SEPOLIA]: {
+    networkId: NETWORK_IDS.SEPOLIA,
+    chainId: CHAIN_IDS.SEPOLIA,
+    ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.SEPOLIA],
+  },
   [NETWORK_TYPES.MAINNET]: {
     networkId: NETWORK_IDS.MAINNET,
     chainId: CHAIN_IDS.MAINNET,
@@ -378,12 +393,14 @@ export const NETWORK_TO_NAME_MAP = {
   [NETWORK_TYPES.KOVAN]: KOVAN_DISPLAY_NAME,
   [NETWORK_TYPES.MAINNET]: MAINNET_DISPLAY_NAME,
   [NETWORK_TYPES.GOERLI]: GOERLI_DISPLAY_NAME,
+  [NETWORK_TYPES.SEPOLIA]: SEPOLIA_DISPLAY_NAME,
   [NETWORK_TYPES.LOCALHOST]: LOCALHOST_DISPLAY_NAME,
 
   [NETWORK_IDS.ROPSTEN]: ROPSTEN_DISPLAY_NAME,
   [NETWORK_IDS.RINKEBY]: RINKEBY_DISPLAY_NAME,
   [NETWORK_IDS.KOVAN]: KOVAN_DISPLAY_NAME,
   [NETWORK_IDS.GOERLI]: GOERLI_DISPLAY_NAME,
+  [NETWORK_IDS.SEPOLIA]: SEPOLIA_DISPLAY_NAME,
   [NETWORK_IDS.MAINNET]: MAINNET_DISPLAY_NAME,
   [NETWORK_IDS.LOCALHOST]: LOCALHOST_DISPLAY_NAME,
 
@@ -391,13 +408,15 @@ export const NETWORK_TO_NAME_MAP = {
   [CHAIN_IDS.RINKEBY]: RINKEBY_DISPLAY_NAME,
   [CHAIN_IDS.KOVAN]: KOVAN_DISPLAY_NAME,
   [CHAIN_IDS.GOERLI]: GOERLI_DISPLAY_NAME,
+  [CHAIN_IDS.SEPOLIA]: SEPOLIA_DISPLAY_NAME,
   [CHAIN_IDS.MAINNET]: MAINNET_DISPLAY_NAME,
-  [CHAIN_IDS.GOERLI]: LOCALHOST_DISPLAY_NAME,
+  [CHAIN_IDS.LOCALHOST]: LOCALHOST_DISPLAY_NAME,
 } as const;
 
 export const CHAIN_ID_TO_TYPE_MAP = {
   [CHAIN_IDS.MAINNET]: NETWORK_TYPES.MAINNET,
   [CHAIN_IDS.GOERLI]: NETWORK_TYPES.GOERLI,
+  [CHAIN_IDS.SEPOLIA]: NETWORK_TYPES.SEPOLIA,
   [CHAIN_IDS.KOVAN]: NETWORK_TYPES.KOVAN,
   [CHAIN_IDS.LOCALHOST]: NETWORK_TYPES.LOCALHOST,
   [CHAIN_IDS.RINKEBY]: NETWORK_TYPES.RINKEBY,
@@ -409,6 +428,7 @@ export const CHAIN_ID_TO_RPC_URL_MAP = {
   [CHAIN_IDS.RINKEBY]: RINKEBY_RPC_URL,
   [CHAIN_IDS.KOVAN]: KOVAN_RPC_URL,
   [CHAIN_IDS.GOERLI]: GOERLI_RPC_URL,
+  [CHAIN_IDS.SEPOLIA]: SEPOLIA_RPC_URL,
   [CHAIN_IDS.MAINNET]: MAINNET_RPC_URL,
   [CHAIN_IDS.LOCALHOST]: LOCALHOST_RPC_URL,
 } as const;
@@ -429,12 +449,14 @@ export const NETWORK_ID_TO_ETHERS_NETWORK_NAME_MAP = {
   [NETWORK_IDS.ROPSTEN]: NETWORK_TYPES.ROPSTEN,
   [NETWORK_IDS.RINKEBY]: NETWORK_TYPES.RINKEBY,
   [NETWORK_IDS.GOERLI]: NETWORK_TYPES.GOERLI,
+  [NETWORK_IDS.SEPOLIA]: NETWORK_TYPES.SEPOLIA,
   [NETWORK_IDS.MAINNET]: NETWORK_NAMES.HOMESTEAD,
 } as const;
 
 export const CHAIN_ID_TO_NETWORK_ID_MAP = {
   [CHAIN_IDS.MAINNET]: NETWORK_IDS.MAINNET,
   [CHAIN_IDS.GOERLI]: NETWORK_IDS.GOERLI,
+  [CHAIN_IDS.SEPOLIA]: NETWORK_IDS.SEPOLIA,
   [CHAIN_IDS.KOVAN]: NETWORK_IDS.KOVAN,
   [CHAIN_IDS.LOCALHOST]: NETWORK_IDS.LOCALHOST,
   [CHAIN_IDS.RINKEBY]: NETWORK_IDS.RINKEBY,
@@ -530,6 +552,10 @@ export const BUYABLE_CHAINS_MAP: {
     nativeCurrency: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.GOERLI],
     network: BUYABLE_CHAIN_ETHEREUM_NETWORK_NAME,
   },
+  [CHAIN_IDS.SEPOLIA]: {
+    nativeCurrency: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.SEPOLIA],
+    network: BUYABLE_CHAIN_ETHEREUM_NETWORK_NAME,
+  },
   [CHAIN_IDS.KOVAN]: {
     nativeCurrency: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.KOVAN],
     network: BUYABLE_CHAIN_ETHEREUM_NETWORK_NAME,

test/e2e/fixtures/address-entry/state.json

@@ -35,6 +35,7 @@
         "goerli": null,
         "kovan": null,
         "mainnet": null,
+        "sepolia": null,
         "rinkeby": 5570536
       }
     },

test/e2e/fixtures/connected-state/state.json

@@ -24,6 +24,7 @@
         "goerli": null,
         "kovan": null,
         "mainnet": null,
+        "sepolia": null,
         "rinkeby": 5570536,
         "localhost": 98
       }

test/e2e/fixtures/custom-rpc/state.json

@@ -21,6 +21,7 @@
         "goerli": null,
         "kovan": null,
         "mainnet": null,
+        "sepolia": null,
         "rinkeby": 5570536
       }
     },

test/e2e/fixtures/eip-1559-v2-dapp/state.json

@@ -22,6 +22,7 @@
         "goerli": null,
         "kovan": null,
         "mainnet": null,
+        "sepolia": null,
         "rinkeby": 5570536
       }
     },

test/e2e/fixtures/eip-1559-v2/state.json

@@ -22,6 +22,7 @@
         "goerli": null,
         "kovan": null,
         "mainnet": null,
+        "sepolia": null,
         "rinkeby": 5570536
       }
     },

test/e2e/fixtures/imported-account/state.json

@@ -21,6 +21,7 @@
         "goerli": null,
         "kovan": null,
         "mainnet": null,
+        "sepolia": null,
         "rinkeby": 5570536
       }
     },

test/e2e/fixtures/localization/state.json

@@ -21,6 +21,7 @@
         "goerli": null,
         "kovan": null,
         "mainnet": null,
+        "sepolia": null,
         "rinkeby": 5570536
       }
     },

test/e2e/fixtures/metrics-enabled/state.json

@@ -24,6 +24,7 @@
         "goerli": null,
         "kovan": null,
         "mainnet": null,
+        "sepolia": null,
         "rinkeby": 5570536,
         "localhost": 98
       }

test/e2e/fixtures/navigate-transactions/state.json

@@ -21,6 +21,7 @@
         "goerli": null,
         "kovan": null,
         "mainnet": null,
+        "sepolia": null,
         "rinkeby": 5570536
       }
     },

test/e2e/fixtures/send-edit-v2/state.json

@@ -22,6 +22,7 @@
         "goerli": null,
         "kovan": null,
         "mainnet": null,
+        "sepolia": null,
         "rinkeby": 5570536
       }
     },

test/e2e/fixtures/send-edit/state.json

@@ -22,6 +22,7 @@
         "goerli": null,
         "kovan": null,
         "mainnet": null,
+        "sepolia": null,
         "rinkeby": 5570536
       }
     },

test/e2e/fixtures/special-settings/state.json

@@ -21,6 +21,7 @@
         "goerli": null,
         "kovan": null,
         "mainnet": null,
+        "sepolia": null,
         "rinkeby": 5570536
       }
     },

test/e2e/mock-e2e.js

@@ -4,6 +4,7 @@ const blacklistedHosts = [
   'mainnet.infura.io',
   'rinkeby.infura.io',
   'ropsten.infura.io',
+  'sepolia.infura.io',
 ];
 
 async function setupMocking(server, testSpecificMock) {

ui/components/app/collectible-details/collectible-details.js

@@ -100,6 +100,7 @@ export default function CollectibleDetails({ collectible }) {
       case CHAIN_IDS.KOVAN:
       case CHAIN_IDS.ROPSTEN:
       case CHAIN_IDS.RINKEBY:
+      case CHAIN_IDS.SEPOLIA:
         return `https://testnets.opensea.io/assets/${address}/${tokenId}`;
       default:
         return null;

ui/components/app/dropdowns/network-dropdown.js

@@ -225,6 +225,8 @@ class NetworkDropdown extends Component {
       name = this.context.t('rinkeby');
     } else if (providerName === 'goerli') {
       name = this.context.t('goerli');
+    } else if (providerName === 'sepolia') {
+      name = this.context.t('sepolia');
     } else if (providerName === 'localhost') {
       name = this.context.t('localhost');
     } else {
@@ -358,6 +360,7 @@ class NetworkDropdown extends Component {
               {this.renderNetworkEntry('kovan')}
               {this.renderNetworkEntry('rinkeby')}
               {this.renderNetworkEntry('goerli')}
+              {this.renderNetworkEntry('sepolia')}
               {this.renderCustomRpcList(
                 rpcListDetailForLocalHost,
                 this.props.provider,

ui/components/app/dropdowns/network-dropdown.test.js

@@ -102,6 +102,11 @@ describe('Network Dropdown', () => {
     });
 
     it('checks background color for sixth ColorIndicator', () => {
+      const sepoliaColorIndicator = screen.queryByTestId('color-icon-sepolia');
+      expect(sepoliaColorIndicator).toBeInTheDocument();
+    });
+
+    it('checks background color for seventh ColorIndicator', () => {
       const localhostColorIndicator = screen.queryByTestId(
         'color-icon-localhost',
       );
@@ -116,7 +121,7 @@ describe('Network Dropdown', () => {
     it('shows test networks in the dropdown', () => {
       const networkItems = screen.queryAllByTestId(/network-item/u);
 
-      expect(networkItems).toHaveLength(8);
+      expect(networkItems).toHaveLength(9);
     });
   });
 

ui/components/app/loading-network-screen/loading-network-screen.component.js

@@ -51,6 +51,8 @@ export default class LoadingNetworkScreen extends PureComponent {
       name = this.context.t('connectingToRinkeby');
     } else if (providerName === 'goerli') {
       name = this.context.t('connectingToGoerli');
+    } else if (providerName === 'sepolia') {
+      name = this.context.t('connectingToSepolia');
     } else {
       name = this.context.t('connectingTo', [providerId]);
     }

ui/components/component-library/avatar-network/avatar-network.stories.js

@@ -110,6 +110,13 @@ export const ColorBackgroundColorAndBorderColor = (args) => (
       networkName="G"
       color={COLORS.PRIMARY_INVERSE} // This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar
     />
+    <AvatarNetwork
+      {...args}
+      backgroundColor={COLORS.SEPOLIA}
+      borderColor={COLORS.SEPOLIA}
+      networkName="G"
+      color={COLORS.PRIMARY_INVERSE} // This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar
+    />
     <AvatarNetwork
       {...args}
       backgroundColor={COLORS.ROPSTEN}

ui/components/component-library/avatar-token/avatar-token.stories.js

@@ -110,6 +110,13 @@ export const ColorBackgroundColorAndBorderColor = (args) => (
       tokenName="G"
       color={COLORS.PRIMARY_INVERSE} // TODO: This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar
     />
+    <AvatarToken
+      {...args}
+      backgroundColor={COLORS.SEPOLIA}
+      borderColor={COLORS.SEPOLIA}
+      tokenName="G"
+      color={COLORS.PRIMARY_INVERSE} // TODO: This will have to be added to the BaseAvatar component as a prop so we can change the color of the text and to the base avatar
+    />
     <AvatarToken
       {...args}
       backgroundColor={COLORS.ROPSTEN}

ui/components/component-library/base-avatar/base-avatar.stories.js

@@ -157,6 +157,14 @@ export const ColorBackgroundColorAndBorderColor = (args) => (
     >
       G
     </BaseAvatar>
+    <BaseAvatar
+      {...args}
+      backgroundColor={COLORS.SEPOLIA}
+      borderColor={COLORS.SEPOLIA}
+      color={COLORS.PRIMARY_INVERSE} // TO DO: Update once test network colors have been added to design tokens
+    >
+      S
+    </BaseAvatar>
     <BaseAvatar
       {...args}
       backgroundColor={COLORS.ROPSTEN}

ui/css/design-system/colors.scss

@@ -41,6 +41,7 @@ $color-map: (
   'kovan': --kovan,
   'rinkeby': --rinkeby,
   'goerli': --goerli,
+  'sepolia': --sepolia,
   'localhost': --localhost,
   'transparent': --transparent,
   'flask-purple': --flask-purple,

ui/css/itcss/components/network.scss

@@ -33,6 +33,10 @@
     background-color: rgba(48, 153, 242, 0.7) !important;
   }
 
+  &.sepolia-test-network .menu-icon-circle div {
+    background-color: rgba(207, 181, 240, 0.7) !important;
+  }
+
   &.localhost-network .menu-icon-circle div {
     background-color: rgba(3, 135, 137, 0.7) !important;
   }

ui/css/utilities/colors.scss

@@ -6,6 +6,7 @@
   --kovan: #9064ff;
   --rinkeby: #f6c343;
   --goerli: #3099f2;
+  --sepolia: #cfb5f0;
   --localhost: #bbc0c5;
   --flask-purple: #8b45b6;
   --inherit: inherit;

ui/helpers/constants/design-system.js

@@ -50,6 +50,7 @@ export const COLORS = {
   KOVAN: 'kovan',
   RINKEBY: 'rinkeby',
   GOERLI: 'goerli',
+  SEPOLIA: 'sepolia',
   LOCALHOST: 'localhost',
   TRANSPARENT: 'transparent',
   INHERIT: 'inherit',
@@ -78,6 +79,7 @@ export const BACKGROUND_COLORS = pick(COLORS, [
   'KOVAN',
   'RINKEBY',
   'GOERLI',
+  'SEPOLIA',
   'TRANSPARENT',
   'LOCALHOST',
 ]);
@@ -105,6 +107,7 @@ export const BORDER_COLORS = pick(COLORS, [
   'KOVAN',
   'RINKEBY',
   'GOERLI',
+  'SEPOLIA',
   'TRANSPARENT',
   'LOCALHOST',
 ]);

ui/helpers/constants/settings.js

@@ -225,6 +225,13 @@ export const SETTINGS_CONSTANTS = [
     route: `${NETWORKS_ROUTE}#networks-goerli`,
     icon: 'fa fa-plug',
   },
+  {
+    tabMessage: (t) => t('networks'),
+    sectionMessage: (t) => t('sepolia'),
+    descriptionMessage: (t) => t('sepolia'),
+    route: `${NETWORKS_ROUTE}#networks-sepolia`,
+    icon: 'fa fa-plug',
+  },
   {
     tabMessage: (t) => t('networks'),
     sectionMessage: (t) => t('kovan'),

ui/helpers/utils/settings-search.test.js

@@ -105,6 +105,8 @@ const t = (key) => {
       return 'Rinkeby test network';
     case 'goerli':
       return 'Goerli test network';
+    case 'sepolia':
+      return 'Sepolia test network';
     case 'kovan':
       return 'Kovan test network';
     case 'localhost':
@@ -185,7 +187,7 @@ describe('Settings Search Utils', () => {
     });
 
     it('should get good network section number', () => {
-      expect(getNumberOfSettingsInSection(t, t('networks'))).toStrictEqual(6);
+      expect(getNumberOfSettingsInSection(t, t('networks'))).toStrictEqual(7);
     });
 
     it('should get good experimental section number', () => {

ui/helpers/utils/util.js

@@ -50,6 +50,7 @@ export function isDefaultMetaMaskChain(chainId) {
     chainId === CHAIN_IDS.RINKEBY ||
     chainId === CHAIN_IDS.KOVAN ||
     chainId === CHAIN_IDS.GOERLI ||
+    chainId === CHAIN_IDS.SEPOLIA ||
     chainId === CHAIN_IDS.LOCALHOST
   ) {
     return true;

ui/pages/routes/routes.component.js

@@ -460,6 +460,8 @@ export default class Routes extends Component {
         return this.context.t('connectingToRinkeby');
       case 'goerli':
         return this.context.t('connectingToGoerli');
+      case 'sepolia':
+        return this.context.t('connectingToSepolia');
       default:
         return this.context.t('connectingTo', [providerId]);
     }

ui/pages/settings/networks-tab/networks-list/networks-list.test.js

@@ -44,6 +44,7 @@ describe('NetworksList Component', () => {
     expect(queryByText('Ropsten test network')).toBeInTheDocument();
     expect(queryByText('Rinkeby test network')).toBeInTheDocument();
     expect(queryByText('Goerli test network')).toBeInTheDocument();
+    expect(queryByText('Sepolia test network')).toBeInTheDocument();
     expect(queryByText('Kovan test network')).toBeInTheDocument();
   });
 });

ui/pages/settings/networks-tab/networks-tab-content/networks-tab-content.test.js

@@ -55,6 +55,7 @@ describe('NetworksTabContent Component', () => {
     expect(queryByText('Ropsten test network')).toBeInTheDocument();
     expect(queryByText('Rinkeby test network')).toBeInTheDocument();
     expect(queryByText('Goerli test network')).toBeInTheDocument();
+    expect(queryByText('Sepolia test network')).toBeInTheDocument();
     expect(queryByText('Kovan test network')).toBeInTheDocument();
 
     expect(queryByText('Network name')).toBeInTheDocument();

ui/pages/settings/networks-tab/networks-tab.constants.js

@@ -55,6 +55,18 @@ const defaultNetworksData = [
     ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.GOERLI],
     blockExplorerUrl: 'https://goerli.etherscan.io',
   },
+  {
+    labelKey: NETWORK_TYPES.SEPOLIA,
+    iconColor: '#CFB5F0',
+    providerType: NETWORK_TYPES.SEPOLIA,
+    rpcUrl: getRpcUrl({
+      network: NETWORK_TYPES.SEPOLIA,
+      excludeProjectId: true,
+    }),
+    chainId: CHAIN_IDS.SEPOLIA,
+    ticker: TEST_NETWORK_TICKER_MAP[NETWORK_TYPES.SEPOLIA],
+    blockExplorerUrl: 'https://sepolia.etherscan.io',
+  },
   {
     labelKey: NETWORK_TYPES.KOVAN,
     iconColor: '#9064FF',

ui/pages/settings/networks-tab/networks-tab.test.js

@@ -35,6 +35,7 @@ describe('NetworksTab Component', () => {
     expect(queryByText('Ropsten test network')).toBeInTheDocument();
     expect(queryByText('Rinkeby test network')).toBeInTheDocument();
     expect(queryByText('Goerli test network')).toBeInTheDocument();
+    expect(queryByText('Sepolia test network')).toBeInTheDocument();
     expect(queryByText('Kovan test network')).toBeInTheDocument();
     expect(queryByText('Add network')).toBeInTheDocument();
   });