fix: fix add network form when addMode is true (#12833)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**
fix the add network form when addMode is true

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

## **Related issues**

Fixes: #12836

## **Manual testing steps**

1. Go to settings
2. Go to networks
3. Go to add networks then custom networls

## **Screenshots/Recordings**

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

### **Before**
<img width="500" alt="Screenshot 2025-01-02 at 23 40 52"
src="https://github.com/user-attachments/assets/83b0d9de-6c5b-48cf-959a-53ce40a46541"
/>

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

### **After**

<img width="415" alt="Screenshot 2025-01-02 at 23 41 43"
src="https://github.com/user-attachments/assets/bbe697ed-f31a-428e-b06e-fe3b0b7ed86f"
/>


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


## **Pre-merge author checklist**

- [ ] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [ ] I've completed the PR template to the best of my ability
- [ ] 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.

## **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

@@ -541,7 +541,7 @@ export class NetworkSettings extends PureComponent {
         editable = false;
         blockExplorerUrl =
           networkConfigurations?.[chainId]?.blockExplorerUrls[
-          networkConfigurations?.[chainId]?.defaultBlockExplorerUrlIndex
+            networkConfigurations?.[chainId]?.defaultBlockExplorerUrlIndex
           ];
         rpcUrl =
           networkConfigurations?.[chainId]?.rpcEndpoints[
@@ -563,13 +563,13 @@ export class NetworkSettings extends PureComponent {
           ({ rpcEndpoints, defaultRpcEndpointIndex }) =>
             rpcEndpoints[defaultRpcEndpointIndex].url === networkTypeOrRpcUrl ||
             rpcEndpoints[defaultRpcEndpointIndex].networkClientId ===
-            networkTypeOrRpcUrl,
+              networkTypeOrRpcUrl,
         );
         nickname = networkConfiguration?.name;
         chainId = networkConfiguration?.chainId;
         blockExplorerUrl =
           networkConfiguration?.blockExplorerUrls[
-          networkConfiguration?.defaultBlockExplorerUrlIndex
+            networkConfiguration?.defaultBlockExplorerUrlIndex
           ];
         ticker = networkConfiguration?.nativeCurrency;
         editable = true;
@@ -854,8 +854,8 @@ export class NetworkSettings extends PureComponent {
         networkConfig,
         existingNetwork.chainId === chainId
           ? {
-            replacementSelectedRpcEndpointIndex: indexRpc,
-          }
+              replacementSelectedRpcEndpointIndex: indexRpc,
+            }
           : undefined,
       );
     } else {
@@ -867,8 +867,8 @@ export class NetworkSettings extends PureComponent {
     isCustomMainnet
       ? navigation.navigate('OptinMetrics')
       : shouldNetworkSwitchPopToWallet
-        ? navigation.navigate('WalletView')
-        : navigation.goBack();
+      ? navigation.navigate('WalletView')
+      : navigation.goBack();
   };
 
   /**
@@ -1534,7 +1534,7 @@ export class NetworkSettings extends PureComponent {
 
     const { networkClientId } =
       networkConfigurations?.rpcEndpoints?.[
-      networkConfigurations.defaultRpcEndpointIndex
+        networkConfigurations.defaultRpcEndpointIndex
       ] ?? {};
 
     NetworkController.setActiveNetwork(networkClientId);
@@ -1950,15 +1950,15 @@ export class NetworkSettings extends PureComponent {
                   // Conditionally include secondaryText only if rpcName exists
                   {...(rpcName
                     ? {
-                      secondaryText:
-                        hideKeyFromUrl(rpcUrl) ??
-                        hideKeyFromUrl(
-                          networkConfigurations?.[chainId]?.rpcEndpoints?.[
-                            networkConfigurations?.[chainId]
-                              ?.defaultRpcEndpointIndex
-                          ]?.url,
-                        ),
-                    }
+                        secondaryText:
+                          hideKeyFromUrl(rpcUrl) ??
+                          hideKeyFromUrl(
+                            networkConfigurations?.[chainId]?.rpcEndpoints?.[
+                              networkConfigurations?.[chainId]
+                                ?.defaultRpcEndpointIndex
+                            ]?.url,
+                          ),
+                      }
                     : {})}
                   isSelected={false}
                   withAvatar={false}
@@ -1993,17 +1993,17 @@ export class NetworkSettings extends PureComponent {
 
             {!isNetworkUiRedesignEnabled()
               ? warningRpcUrl && (
-                <View
-                  style={
-                    isNetworkUiRedesignEnabled()
-                      ? styles.newWarningContainer
-                      : styles.warningContainer
-                  }
-                  testID={NetworksViewSelectorsIDs.RPC_WARNING_BANNER}
-                >
-                  <Text style={styles.warningText}>{warningRpcUrl}</Text>
-                </View>
-              )
+                  <View
+                    style={
+                      isNetworkUiRedesignEnabled()
+                        ? styles.newWarningContainer
+                        : styles.warningContainer
+                    }
+                    testID={NetworksViewSelectorsIDs.RPC_WARNING_BANNER}
+                  >
+                    <Text style={styles.warningText}>{warningRpcUrl}</Text>
+                  </View>
+                )
               : null}
 
             <Text style={styles.label}>
@@ -2268,10 +2268,12 @@ export class NetworkSettings extends PureComponent {
         ) : null}
 
         {isNetworkUiRedesignEnabled() &&
-          showMultiBlockExplorerAddModal.isVisible ? (
+        showMultiBlockExplorerAddModal.isVisible ? (
           <ReusableModal
             style={
-              blockExplorerUrls.length > 0 ? styles.sheet : styles.sheetSmall
+              blockExplorerUrls.length > 0 || addMode
+                ? styles.sheet
+                : styles.sheetSmall
             }
             onDismiss={this.closeBlockExplorerModal}
             shouldGoBack={false}
@@ -2338,7 +2340,9 @@ export class NetworkSettings extends PureComponent {
 
         {isNetworkUiRedesignEnabled() && showMultiRpcAddModal.isVisible ? (
           <ReusableModal
-            style={rpcUrls.length > 0 ? styles.sheet : styles.sheetSmall}
+            style={
+              rpcUrls.length > 0 || addMode ? styles.sheet : styles.sheetSmall
+            }
             onDismiss={this.closeRpcModal}
             shouldGoBack={false}
           >
@@ -2478,7 +2482,7 @@ export class NetworkSettings extends PureComponent {
       >
         <View style={styles.informationWrapper}>
           {(isNetworkUiRedesignEnabled() && !shouldShowPopularNetworks) ||
-            networkTypeOrRpcUrl ? (
+          networkTypeOrRpcUrl ? (
             this.customNetwork()
           ) : (
             <ScrollableTabView

app/components/Views/Settings/NetworksSettings/NetworkSettings/index.test.tsx

@@ -815,6 +815,18 @@ describe('NetworkSettings', () => {
       expect(wrapper.state('rpcUrls')[0].name).toBe('New RPC');
     });
 
+    it('adds add RPC URL through modal and update state when addMode is true', async () => {
+      wrapper.setState({ addMode: true });
+
+      const instance = wrapper.instance();
+
+      await instance.onRpcItemAdd('https://new-rpc-url.com', 'New RPC');
+
+      expect(wrapper.state('rpcUrls').length).toBe(1);
+      expect(wrapper.state('rpcUrls')[0].url).toBe('https://new-rpc-url.com');
+      expect(wrapper.state('rpcUrls')[0].name).toBe('New RPC');
+    });
+
     it('should correctly add Block Explorer URL through modal and update state', async () => {
       const instance = wrapper.instance();
 
@@ -828,6 +840,21 @@ describe('NetworkSettings', () => {
       );
     });
 
+    it('adds correctly add Block Explorer URL through modal and update state when addMode is true', async () => {
+      wrapper.setState({ addMode: true });
+
+      const instance = wrapper.instance();
+
+      // Open Block Explorer form modal and add a new URL
+      instance.openAddBlockExplorerForm();
+      await instance.onBlockExplorerItemAdd('https://new-blockexplorer.com');
+
+      expect(wrapper.state('blockExplorerUrls').length).toBe(1);
+      expect(wrapper.state('blockExplorerUrls')[0]).toBe(
+        'https://new-blockexplorer.com',
+      );
+    });
+
     it('should not add an empty Block Explorer URL and should return early', async () => {
       const instance = wrapper.instance();