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

@@ -713,6 +713,9 @@
   "connectingToRopsten": {
     "message": "Connecting to Ropsten test network"
   },
+  "connectingToSepolia": {
+    "message": "Connecting to Sepolia test network"
+  },
   "contactUs": {
     "message": "Contact us"
   },
@@ -3064,6 +3067,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

@@ -17,6 +17,7 @@ import {
   MAINNET_CHAIN_ID,
   RINKEBY_CHAIN_ID,
   ROPSTEN_CHAIN_ID,
+  SEPOLIA_CHAIN_ID,
 } from '../../../shared/constants/network';
 
 const fetchWithTimeout = getFetchWithTimeout();
@@ -58,6 +59,7 @@ const etherscanSupportedNetworks = [
   MAINNET_CHAIN_ID,
   RINKEBY_CHAIN_ID,
   ROPSTEN_CHAIN_ID,
+  SEPOLIA_CHAIN_ID,
 ];
 
 export default class IncomingTransactionsController {
@@ -86,6 +88,7 @@ export default class IncomingTransactionsController {
         [MAINNET_CHAIN_ID]: null,
         [RINKEBY_CHAIN_ID]: null,
         [ROPSTEN_CHAIN_ID]: null,
+        [SEPOLIA_CHAIN_ID]: null,
       },
       ...opts.initState,
     };

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

@@ -12,6 +12,7 @@ import {
   MAINNET_CHAIN_ID,
   RINKEBY_CHAIN_ID,
   ROPSTEN_CHAIN_ID,
+  SEPOLIA_CHAIN_ID,
   ROPSTEN_NETWORK_ID,
   ROPSTEN,
 } from '../../../shared/constants/network';
@@ -39,6 +40,7 @@ const PREPOPULATED_BLOCKS_BY_NETWORK = {
   [MAINNET_CHAIN_ID]: 3,
   [RINKEBY_CHAIN_ID]: 5,
   [ROPSTEN_CHAIN_ID]: 4,
+  [SEPOLIA_CHAIN_ID]: 6,
 };
 const EMPTY_BLOCKS_BY_NETWORK = {
   [GOERLI_CHAIN_ID]: null,
@@ -46,6 +48,7 @@ const EMPTY_BLOCKS_BY_NETWORK = {
   [MAINNET_CHAIN_ID]: null,
   [RINKEBY_CHAIN_ID]: null,
   [ROPSTEN_CHAIN_ID]: null,
+  [SEPOLIA_CHAIN_ID]: null,
 };
 
 function getEmptyInitState() {
@@ -153,6 +156,7 @@ function nockEtherscanApiForAllChains(mockResponse) {
     MAINNET_CHAIN_ID,
     RINKEBY_CHAIN_ID,
     ROPSTEN_CHAIN_ID,
+    SEPOLIA_CHAIN_ID,
     '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

@@ -18,6 +18,7 @@ import {
   MAINNET_CHAIN_ID,
   RINKEBY_CHAIN_ID,
   ROPSTEN_CHAIN_ID,
+  SEPOLIA_CHAIN_ID,
   KOVAN_CHAIN_ID,
   GOERLI_CHAIN_ID,
   BSC_CHAIN_ID,
@@ -34,6 +35,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,
@@ -251,6 +253,13 @@ export default class AccountTracker {
         );
         break;
 
+      case SEPOLIA_CHAIN_ID:
+        await this._updateAccountsViaBalanceChecker(
+          addresses,
+          SINGLE_CALL_BALANCES_ADDRESS_SEPOLIA,
+        );
+        break;
+
       case BSC_CHAIN_ID:
         await this._updateAccountsViaBalanceChecker(
           addresses,

app/scripts/lib/buy-url.js

@@ -7,6 +7,7 @@ import {
   MAINNET_CHAIN_ID,
   RINKEBY_CHAIN_ID,
   ROPSTEN_CHAIN_ID,
+  SEPOLIA_CHAIN_ID,
   BUYABLE_CHAINS_MAP,
 } from '../../../shared/constants/network';
 import getFetchWithTimeout from '../../../shared/modules/fetch-with-timeout';
@@ -170,6 +171,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}"`,
@@ -189,6 +192,8 @@ function getDefaultServiceForChain(chainId) {
       return 'kovan-faucet';
     case GOERLI_CHAIN_ID:
       return 'goerli-faucet';
+    case SEPOLIA_CHAIN_ID:
+      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.js

@@ -8,12 +8,14 @@ export const GOERLI = 'goerli';
 export const LOCALHOST = 'localhost';
 export const NETWORK_TYPE_RPC = 'rpc';
 export const HOMESTEAD = 'homestead';
+export const SEPOLIA = 'sepolia';
 
 export const MAINNET_NETWORK_ID = '1';
 export const ROPSTEN_NETWORK_ID = '3';
 export const RINKEBY_NETWORK_ID = '4';
 export const GOERLI_NETWORK_ID = '5';
 export const KOVAN_NETWORK_ID = '42';
+export const SEPOLIA_NETWORK_ID = '6';
 export const LOCALHOST_NETWORK_ID = '1337';
 
 export const MAINNET_CHAIN_ID = '0x1';
@@ -21,6 +23,7 @@ export const ROPSTEN_CHAIN_ID = '0x3';
 export const RINKEBY_CHAIN_ID = '0x4';
 export const GOERLI_CHAIN_ID = '0x5';
 export const KOVAN_CHAIN_ID = '0x2a';
+export const SEPOLIA_CHAIN_ID = '0xaa36a7';
 export const LOCALHOST_CHAIN_ID = '0x539';
 export const BSC_CHAIN_ID = '0x38';
 export const OPTIMISM_CHAIN_ID = '0xa';
@@ -44,6 +47,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';
@@ -65,6 +69,7 @@ export const RINKEBY_RPC_URL = getRpcUrl({ network: RINKEBY });
 export const KOVAN_RPC_URL = getRpcUrl({ network: KOVAN });
 export const MAINNET_RPC_URL = getRpcUrl({ network: MAINNET });
 export const GOERLI_RPC_URL = getRpcUrl({ network: GOERLI });
+export const SEPOLIA_RPC_URL = getRpcUrl({ network: SEPOLIA });
 export const LOCALHOST_RPC_URL = 'http://localhost:8545';
 
 export const ETH_SYMBOL = 'ETH';
@@ -98,6 +103,7 @@ export const TEST_CHAINS = [
   GOERLI_CHAIN_ID,
   KOVAN_CHAIN_ID,
   LOCALHOST_CHAIN_ID,
+  SEPOLIA_CHAIN_ID,
 ];
 
 export const TEST_NETWORK_TICKER_MAP = {
@@ -105,6 +111,7 @@ export const TEST_NETWORK_TICKER_MAP = {
   [RINKEBY]: `${capitalize(RINKEBY)}${ETH_SYMBOL}`,
   [KOVAN]: `${capitalize(KOVAN)}${ETH_SYMBOL}`,
   [GOERLI]: `${capitalize(GOERLI)}${ETH_SYMBOL}`,
+  [SEPOLIA]: `${capitalize(SEPOLIA)}${ETH_SYMBOL}`,
 };
 
 /**
@@ -131,6 +138,11 @@ export const NETWORK_TYPE_TO_ID_MAP = {
     chainId: GOERLI_CHAIN_ID,
     ticker: TEST_NETWORK_TICKER_MAP[GOERLI],
   },
+  [SEPOLIA]: {
+    networkId: SEPOLIA_NETWORK_ID,
+    chainId: SEPOLIA_CHAIN_ID,
+    ticker: TEST_NETWORK_TICKER_MAP[SEPOLIA],
+  },
   [MAINNET]: {
     networkId: MAINNET_NETWORK_ID,
     chainId: MAINNET_CHAIN_ID,
@@ -147,12 +159,14 @@ export const NETWORK_TO_NAME_MAP = {
   [KOVAN]: KOVAN_DISPLAY_NAME,
   [MAINNET]: MAINNET_DISPLAY_NAME,
   [GOERLI]: GOERLI_DISPLAY_NAME,
+  [SEPOLIA]: SEPOLIA_DISPLAY_NAME,
   [LOCALHOST]: LOCALHOST_DISPLAY_NAME,
 
   [ROPSTEN_NETWORK_ID]: ROPSTEN_DISPLAY_NAME,
   [RINKEBY_NETWORK_ID]: RINKEBY_DISPLAY_NAME,
   [KOVAN_NETWORK_ID]: KOVAN_DISPLAY_NAME,
   [GOERLI_NETWORK_ID]: GOERLI_DISPLAY_NAME,
+  [SEPOLIA_NETWORK_ID]: SEPOLIA_DISPLAY_NAME,
   [MAINNET_NETWORK_ID]: MAINNET_DISPLAY_NAME,
   [LOCALHOST_NETWORK_ID]: LOCALHOST_DISPLAY_NAME,
 
@@ -160,6 +174,7 @@ export const NETWORK_TO_NAME_MAP = {
   [RINKEBY_CHAIN_ID]: RINKEBY_DISPLAY_NAME,
   [KOVAN_CHAIN_ID]: KOVAN_DISPLAY_NAME,
   [GOERLI_CHAIN_ID]: GOERLI_DISPLAY_NAME,
+  [SEPOLIA_CHAIN_ID]: SEPOLIA_DISPLAY_NAME,
   [MAINNET_CHAIN_ID]: MAINNET_DISPLAY_NAME,
   [LOCALHOST_CHAIN_ID]: LOCALHOST_DISPLAY_NAME,
 };
@@ -176,6 +191,7 @@ export const CHAIN_ID_TO_RPC_URL_MAP = {
   [RINKEBY_CHAIN_ID]: RINKEBY_RPC_URL,
   [KOVAN_CHAIN_ID]: KOVAN_RPC_URL,
   [GOERLI_CHAIN_ID]: GOERLI_RPC_URL,
+  [SEPOLIA_CHAIN_ID]: SEPOLIA_RPC_URL,
   [MAINNET_CHAIN_ID]: MAINNET_RPC_URL,
   [LOCALHOST_CHAIN_ID]: LOCALHOST_RPC_URL,
 };
@@ -197,6 +213,7 @@ export const NETWORK_ID_TO_ETHERS_NETWORK_NAME_MAP = {
   [ROPSTEN_NETWORK_ID]: ROPSTEN,
   [RINKEBY_NETWORK_ID]: RINKEBY,
   [GOERLI_NETWORK_ID]: GOERLI,
+  [SEPOLIA_NETWORK_ID]: SEPOLIA,
   [MAINNET_NETWORK_ID]: HOMESTEAD,
 };
 
@@ -286,6 +303,10 @@ export const BUYABLE_CHAINS_MAP = {
     nativeCurrency: TEST_NETWORK_TICKER_MAP[GOERLI],
     network: BUYABLE_CHAIN_ETHEREUM_NETWORK_NAME,
   },
+  [SEPOLIA_CHAIN_ID]: {
+    nativeCurrency: TEST_NETWORK_TICKER_MAP[SEPOLIA],
+    network: BUYABLE_CHAIN_ETHEREUM_NETWORK_NAME,
+  },
   [KOVAN_CHAIN_ID]: {
     nativeCurrency: TEST_NETWORK_TICKER_MAP[KOVAN],
     network: BUYABLE_CHAIN_ETHEREUM_NETWORK_NAME,

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

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

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

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

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

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

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

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

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

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

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

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

test/e2e/fixtures/localization/state.json

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

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

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

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

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

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

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

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

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

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

@@ -20,6 +20,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

@@ -40,6 +40,7 @@ import {
   POLYGON_CHAIN_ID,
   RINKEBY_CHAIN_ID,
   ROPSTEN_CHAIN_ID,
+  SEPOLIA_CHAIN_ID,
 } from '../../../../shared/constants/network';
 import { getEnvironmentType } from '../../../../app/scripts/lib/util';
 import { ENVIRONMENT_TYPE_POPUP } from '../../../../shared/constants/app';
@@ -107,6 +108,7 @@ export default function CollectibleDetails({ collectible }) {
       case KOVAN_CHAIN_ID:
       case ROPSTEN_CHAIN_ID:
       case RINKEBY_CHAIN_ID:
+      case SEPOLIA_CHAIN_ID:
         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

@@ -109,6 +109,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

@@ -13,6 +13,7 @@ import {
   MAINNET_CHAIN_ID,
   RINKEBY_CHAIN_ID,
   ROPSTEN_CHAIN_ID,
+  SEPOLIA_CHAIN_ID,
 } from '../../../shared/constants/network';
 import { toChecksumHexAddress } from '../../../shared/modules/hexstring-utils';
 import {
@@ -57,6 +58,7 @@ export function isDefaultMetaMaskChain(chainId) {
     chainId === RINKEBY_CHAIN_ID ||
     chainId === KOVAN_CHAIN_ID ||
     chainId === GOERLI_CHAIN_ID ||
+    chainId === SEPOLIA_CHAIN_ID ||
     chainId === LOCALHOST_CHAIN_ID
   ) {
     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

@@ -9,6 +9,8 @@ import {
   RINKEBY_CHAIN_ID,
   ROPSTEN,
   ROPSTEN_CHAIN_ID,
+  SEPOLIA,
+  SEPOLIA_CHAIN_ID,
   getRpcUrl,
   ETH_SYMBOL,
   TEST_NETWORK_TICKER_MAP,
@@ -51,6 +53,18 @@ const defaultNetworksData = [
     ticker: TEST_NETWORK_TICKER_MAP[GOERLI],
     blockExplorerUrl: 'https://goerli.etherscan.io',
   },
+  {
+    labelKey: SEPOLIA,
+    iconColor: '#CFB5F0',
+    providerType: SEPOLIA,
+    rpcUrl: getRpcUrl({
+      network: SEPOLIA,
+      excludeProjectId: true,
+    }),
+    chainId: SEPOLIA_CHAIN_ID,
+    ticker: TEST_NETWORK_TICKER_MAP[SEPOLIA],
+    blockExplorerUrl: 'https://sepolia.etherscan.io',
+  },
   {
     labelKey: 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();
   });