feat: add new default networks

ui/pages/onboarding-flow/welcome/welcome.js

@@ -5,6 +5,7 @@ import { useHistory } from 'react-router-dom';
 ///: BEGIN:ONLY_INCLUDE_IF(build-main,build-beta,build-flask)
 import { Carousel } from 'react-responsive-carousel';
 ///: END:ONLY_INCLUDE_IF
+import { CHAIN_IDS } from '@metamask/transaction-controller';
 import Mascot from '../../../components/ui/mascot';
 import Button from '../../../components/ui/button';
 import { Text } from '../../../components/component-library';
@@ -25,6 +26,8 @@ import {
 import {
   setFirstTimeFlowType,
   setTermsOfUseLastAgreed,
+  addNetwork,
+  updateNetworksList,
   ///: BEGIN:ONLY_INCLUDE_IF(build-mmi)
   setParticipateInMetaMetrics,
   ///: END:ONLY_INCLUDE_IF
@@ -42,6 +45,8 @@ import {
 } from '../../../helpers/constants/routes';
 import { getFirstTimeFlowType, getCurrentKeyring } from '../../../selectors';
 import { FirstTimeFlowType } from '../../../../shared/constants/onboarding';
+import { FEATURED_RPCS } from '../../../../shared/constants/network';
+import { getCompletedOnboarding } from '../../../ducks/metamask/metamask';
 
 export default function OnboardingWelcome() {
   const t = useI18nContext();
@@ -54,6 +59,8 @@ export default function OnboardingWelcome() {
   const [newAccountCreationInProgress, setNewAccountCreationInProgress] =
     useState(false);
 
+  const completedOnboarding = useSelector(getCompletedOnboarding);
+
   // Don't allow users to come back to this screen after they
   // have already imported or created a wallet
   useEffect(() => {
@@ -72,7 +79,62 @@ export default function OnboardingWelcome() {
     history,
     firstTimeFlowType,
     newAccountCreationInProgress,
+    dispatch,
   ]);
+
+  useEffect(() => {
+    const addNetworks = async () => {
+      if (!completedOnboarding) {
+        // List of chainIds to add (as hex strings)
+        const chainIdsToAdd = [
+          CHAIN_IDS.ARBITRUM,
+          CHAIN_IDS.BASE,
+          CHAIN_IDS.BSC,
+          CHAIN_IDS.OPTIMISM,
+          CHAIN_IDS.POLYGON,
+        ];
+
+        // Define the desired order based on `networkId`
+        const networkOrder = [
+          CHAIN_IDS.MAINNET,
+          CHAIN_IDS.ARBITRUM,
+          CHAIN_IDS.BASE,
+          CHAIN_IDS.BSC,
+          CHAIN_IDS.LINEA_MAINNET,
+          CHAIN_IDS.OPTIMISM,
+          CHAIN_IDS.POLYGON,
+        ];
+
+        // Filter the FEATURED_RPCS based on the chainIdsToAdd array
+        const selectedNetworks = FEATURED_RPCS.filter((network) =>
+          chainIdsToAdd.includes(network.chainId),
+        );
+
+        for (const network of selectedNetworks) {
+          await dispatch(
+            addNetwork({
+              chainId: network.chainId,
+              blockExplorerUrls: network.blockExplorerUrls,
+              defaultRpcEndpointIndex: network.defaultRpcEndpointIndex,
+              defaultBlockExplorerUrlIndex:
+                network.defaultBlockExplorerUrlIndex,
+              name: network.name,
+              nativeCurrency: network.nativeCurrency,
+              rpcEndpoints: network.rpcEndpoints,
+            }),
+          );
+          console.log(`Successfully added network: ${network.name}`);
+        }
+
+        await dispatch(updateNetworksList(networkOrder));
+      }
+    };
+
+    addNetworks().catch((error) => {
+      console.error('Error adding networks:', error);
+    });
+  }, [dispatch, completedOnboarding]);
+
   const trackEvent = useContext(MetaMetricsContext);
 
   const onCreateClick = async () => {

ui/pages/onboarding-flow/welcome/welcome.test.js

@@ -7,6 +7,8 @@ import { renderWithProvider } from '../../../../test/lib/render-helpers';
 import {
   setFirstTimeFlowType,
   setTermsOfUseLastAgreed,
+  addNetwork,
+  updateNetworksList,
 } from '../../../store/actions';
 import {
   ONBOARDING_METAMETRICS,
@@ -35,6 +37,8 @@ jest.mock('../../../store/actions.ts', () => ({
       return type;
     }),
   ),
+  addNetwork: jest.fn(),
+  updateNetworksList: jest.fn(),
 }));
 
 jest.mock('react-router-dom', () => ({
@@ -122,5 +126,52 @@ describe('Onboarding Welcome Component', () => {
         expect(mockHistoryPush).toHaveBeenCalledWith(ONBOARDING_METAMETRICS);
       });
     });
+
+    describe('useEffect for adding networks', () => {
+      it('should add networks when onboarding is incomplete', async () => {
+        // Render the component
+        renderWithProvider(<OnboardingWelcome />, mockStore);
+
+        await waitFor(() => {
+          // Verify addNetwork is called with Arbitrum (or other networks)
+          expect(addNetwork).toHaveBeenCalledWith({
+            chainId: '0xa4b1', // Arbitrum's chain ID
+            blockExplorerUrls: ['https://explorer.arbitrum.io'], // Arbitrum block explorer
+            defaultRpcEndpointIndex: 0,
+            defaultBlockExplorerUrlIndex: 0,
+            name: 'Arbitrum One',
+            nativeCurrency: 'ETH',
+            rpcEndpoints: [
+              {
+                url: 'https://arbitrum-mainnet.infura.io/v3/undefined',
+                type: 'custom',
+              },
+            ],
+          });
+        });
+      });
+
+      it('should not add networks when onboarding is completed', async () => {
+        const mockCompletedOnboardingState = {
+          ...mockState,
+          metamask: {
+            ...mockState.metamask,
+            completedOnboarding: true, // Simulate completed onboarding
+          },
+        };
+        const mockStore2 = configureMockStore([thunk])(
+          mockCompletedOnboardingState,
+        );
+
+        renderWithProvider(<OnboardingWelcome />, mockStore2);
+
+        // Wait to ensure the effect runs (or doesn't in this case)
+        await waitFor(() => {
+          // Expect that neither addNetwork nor updateNetworksList was called
+          expect(addNetwork).not.toHaveBeenCalled();
+          expect(updateNetworksList).not.toHaveBeenCalled();
+        });
+      });
+    });
   });
 });

ui/selectors/selectors.js

@@ -1822,6 +1822,10 @@ export function getSortedAnnouncementsToShow(state) {
  * @returns {{networkId: string}[]}
  */
 export function getOrderedNetworksList(state) {
+  console.log(
+    'state.metamask.orderedNetworkList ----',
+    state.metamask.orderedNetworkList,
+  );
   return state.metamask.orderedNetworkList;
 }