style: Update NetworkVerificationInfo styles and tests (MetaMask#22644)

<!--
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**
This PR fixes styling on the dapp add new network screen.
<!--
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?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry: Fixed a bug causing improper styling on the dapp add
new network screen.

## **Related issues**

Fixes: https://consensyssoftware.atlassian.net/browse/TMCU-17

## **Manual testing steps**

```gherkin
Feature: Add new network from dapp

  Scenario: user adds new network from dapp
    Given user goes to the dapp (ie. chainlist.org)

    When user clicks Add network button 
    Then the screen has proper styling
```

## **Screenshots/Recordings**

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

### **Before**
<img width="377" height="761" alt="Screenshot 2025-11-13 at 15 10 07"
src="https://github.com/user-attachments/assets/aa32531f-83f6-4abf-82d3-ccbdb2ae44d1"
/>

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

### **After**
<img width="399" height="833" alt="Screenshot 2025-11-14 at 10 11 16"
src="https://github.com/user-attachments/assets/4d61c060-1728-4ad6-8cbe-6f127bf87cd2"
/>

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

## **Pre-merge author checklist**

- [x] 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).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] 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.

<!-- CURSOR_SUMMARY -->
---

> [!NOTE]
> Inline network details in NetworkVerificationInfo, simplify
styles/layout, and update tests/snapshots accordingly.
> 
> - **UI (NetworkVerificationInfo)**:
> - Remove `Accordion`; always render details inline: `Chain ID`,
`Display name`, and `Block explorer URL`.
> - Simplify layout: add `flex: 1` to `accountCardWrapper`, set
`contentContainerStyle` with `paddingBottom: 24`, and remove
`onLayout`/max-height logic.
> - Keep RPC URL row with optional "Review" tag; show URL with
`hideKeyFromUrl`.
> - **Styles**:
> - Update `NetworkVerificationInfo.styles.ts`: add `flex: 1` to
`accountCardWrapper`; define `nestedScrollContent` with bottom padding.
> - **Tests/Snapshots**:
> - Update snapshots in `NetworkVerificationInfo` and `NetworkModal` to
reflect inline details and style changes.
> - Remove accordion interaction in tests; adjust test name to "renders
chainId as a decimal" and expectations.
> - **Cleanup**:
> - Remove unused state/imports related to accordion and layout
measurement.
> 
> <sup>Written by [Cursor
Bugbot](https://cursor.com/dashboard?tab=bugbot) for commit
e6b74c0. This will update automatically
on new commits. Configure
[here](https://cursor.com/dashboard?tab=bugbot).</sup>
<!-- /CURSOR_SUMMARY -->

Author: PatrykLucka

app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap

@@ -297,23 +297,25 @@ exports[`NetworkDetails renders correctly 1`] = `
                   </Text>
                   <RCTScrollView
                     collapsable={false}
+                    contentContainerStyle={
+                      {
+                        "paddingBottom": 24,
+                      }
+                    }
                     handlerTag={1}
                     handlerType="NativeViewGestureHandler"
                     nestedScrollEnabled={true}
                     onGestureHandlerEvent={[Function]}
                     onGestureHandlerStateChange={[Function]}
-                    onLayout={[Function]}
                     style={
-                      [
-                        {
-                          "borderColor": "#b7bbc8",
-                          "borderRadius": 10,
-                          "borderWidth": 1,
-                          "marginVertical": 16,
-                          "padding": 16,
-                        },
-                        undefined,
-                      ]
+                      {
+                        "borderColor": "#b7bbc8",
+                        "borderRadius": 10,
+                        "borderWidth": 1,
+                        "flex": 1,
+                        "marginVertical": 16,
+                        "padding": 16,
+                      }
                     }
                   >
                     <View>
@@ -385,67 +387,92 @@ exports[`NetworkDetails renders correctly 1`] = `
                       >
                         https://localhost:8545
                       </Text>
-                      <TouchableOpacity
-                        activeOpacity={0.5}
-                        onPress={[Function]}
+                      <Text
+                        accessibilityRole="text"
                         style={
                           {
-                            "alignItems": "center",
-                            "flexDirection": "row",
-                            "height": 24,
-                            "justifyContent": "center",
+                            "color": "#121314",
+                            "fontFamily": "Geist Medium",
+                            "fontSize": 16,
+                            "letterSpacing": 0,
+                            "lineHeight": 24,
                           }
                         }
-                        testID="accordionheader"
                       >
-                        <Text
-                          accessibilityRole="text"
-                          style={
-                            {
-                              "color": "#4459ff",
-                              "fontFamily": "Geist Regular",
-                              "fontSize": 16,
-                              "letterSpacing": 0,
-                              "lineHeight": 24,
-                            }
+                        Chain ID
+                      </Text>
+                      <Text
+                        accessibilityRole="text"
+                        style={
+                          {
+                            "color": "#121314",
+                            "fontFamily": "Geist Regular",
+                            "fontSize": 16,
+                            "letterSpacing": 0,
+                            "lineHeight": 24,
+                            "marginBottom": 8,
                           }
-                          testID="accordionheader-title"
-                        >
-                          View details
-                        </Text>
-                        <View
-                          style={
-                            [
-                              {
-                                "marginLeft": 4,
-                              },
-                              {
-                                "transform": [
-                                  {
-                                    "rotate": "0deg",
-                                  },
-                                ],
-                              },
-                            ]
+                        }
+                      >
+                        1
+                      </Text>
+                      <Text
+                        accessibilityRole="text"
+                        style={
+                          {
+                            "color": "#121314",
+                            "fontFamily": "Geist Medium",
+                            "fontSize": 16,
+                            "letterSpacing": 0,
+                            "lineHeight": 24,
                           }
-                          testID="accordionheader-arrow-icon-animation"
-                        >
-                          <SvgMock
-                            color="#4459ff"
-                            fill="currentColor"
-                            height={16}
-                            name="ArrowDown"
-                            style={
-                              {
-                                "height": 16,
-                                "width": 16,
-                              }
-                            }
-                            testID="accordionheader-arrow-icon"
-                            width={16}
-                          />
-                        </View>
-                      </TouchableOpacity>
+                        }
+                      >
+                        Display name
+                      </Text>
+                      <Text
+                        accessibilityRole="text"
+                        style={
+                          {
+                            "color": "#121314",
+                            "fontFamily": "Geist Regular",
+                            "fontSize": 16,
+                            "letterSpacing": 0,
+                            "lineHeight": 24,
+                            "marginBottom": 8,
+                          }
+                        }
+                      >
+                        Test Network
+                      </Text>
+                      <Text
+                        accessibilityRole="text"
+                        style={
+                          {
+                            "color": "#121314",
+                            "fontFamily": "Geist Medium",
+                            "fontSize": 16,
+                            "letterSpacing": 0,
+                            "lineHeight": 24,
+                          }
+                        }
+                      >
+                        Block explorer URL
+                      </Text>
+                      <Text
+                        accessibilityRole="text"
+                        style={
+                          {
+                            "color": "#121314",
+                            "fontFamily": "Geist Regular",
+                            "fontSize": 16,
+                            "letterSpacing": 0,
+                            "lineHeight": 24,
+                          }
+                        }
+                      >
+                        https://test.com
+                      </Text>
                     </View>
                   </RCTScrollView>
                 </View>

app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.styles.ts

@@ -16,6 +16,7 @@ const styleSheet = (params: { theme: Theme }) => {
       paddingHorizontal: 16,
     },
     accountCardWrapper: {
+      flex: 1,
       borderWidth: 1,
       borderColor: colors.border.default,
       borderRadius: 10,

app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import NetworkVerificationInfo from './NetworkVerificationInfo';
-import { render, fireEvent } from '@testing-library/react-native';
+import { render } from '@testing-library/react-native';
 import { BannerAlertSeverity } from '../../../component-library/components/Banners/Banner';
 import { strings } from '../../../../locales/i18n';
 import { useSelector } from 'react-redux';
@@ -128,8 +128,9 @@ describe('NetworkVerificationInfo', () => {
     ).toThrow('Unable to find an element with text');
   });
 
-  it('should render chainId as a decimal', () => {
+  it('renders chainId as a decimal', () => {
     (useSelector as jest.Mock).mockReturnValue(true);
+
     const { getByText } = render(
       <NetworkVerificationInfo
         customNetworkInformation={mockNetworkInfo}
@@ -138,12 +139,6 @@ describe('NetworkVerificationInfo', () => {
       />,
     );
 
-    // Accordion content is hidden by default, so we need to expand it
-    const accordionButton = getByText(
-      strings('spend_limit_edition.view_details'),
-    );
-    fireEvent.press(accordionButton);
-
     expect(getByText('10')).toBeTruthy();
   });
 

app/components/UI/NetworkVerificationInfo/NetworkVerificationInfo.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable react/prop-types */
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo } from 'react';
 import { View, Linking, TouchableOpacity } from 'react-native';
 import { strings } from '../../../../locales/i18n';
 import { CommonSelectorsIDs } from '../../../../e2e/selectors/Common.selectors';
@@ -10,7 +10,6 @@ import Text, {
 import TagColored from '../../../component-library/components-temp/TagColored/TagColored';
 import { TagColor } from '../../../component-library/components-temp/TagColored/TagColored.types';
 import PickerNetwork from '../../../component-library/components/Pickers/PickerNetwork';
-import Accordion from '../../../component-library/components/Accordions/Accordion';
 import Icon, {
   IconName,
   IconSize,
@@ -66,10 +65,6 @@ const NetworkVerificationInfo = ({
   isCustomNetwork?: boolean;
   isNetworkRpcUpdate?: boolean;
 }) => {
-  const [networkInfoMaxHeight, setNetworkInfoMaxHeight] = useState<
-    number | null
-  >(null);
-  const [networkDetailsExpanded, setNetworkDetailsExpanded] = useState(false);
   const { styles } = useStyles(styleSheet, {});
   const safeChainsListValidationEnabled = useSelector(
     selectUseSafeChainsListValidation,
@@ -203,36 +198,20 @@ const NetworkVerificationInfo = ({
   const renderNetworkInfo = () => (
     <ScrollView
       nestedScrollEnabled
-      style={[
-        styles.accountCardWrapper,
-        networkInfoMaxHeight ? { maxHeight: networkInfoMaxHeight } : undefined,
-      ]}
-      onLayout={(event) => {
-        if (!networkInfoMaxHeight) {
-          setNetworkInfoMaxHeight(event.nativeEvent.layout.height);
-        }
-      }}
-      contentContainerStyle={
-        networkDetailsExpanded ? styles.nestedScrollContent : undefined
-      }
+      style={styles.accountCardWrapper}
+      contentContainerStyle={styles.nestedScrollContent}
     >
       {renderCurrencySymbol()}
       {renderNetworkRpcUrlLabel()}
       <Text style={styles.textSection}>
         {hideKeyFromUrl(customNetworkInformation.rpcUrl)}
       </Text>
-
-      <Accordion
-        title={strings('spend_limit_edition.view_details')}
-        onPress={() => setNetworkDetailsExpanded(!networkDetailsExpanded)}
-      >
-        {renderChainId()}
-        {renderNetworkDisplayName()}
-        <Text variant={TextVariant.BodyMDMedium}>
-          {strings('add_custom_network.block_explorer_url')}
-        </Text>
-        <Text>{customNetworkInformation.blockExplorerUrl}</Text>
-      </Accordion>
+      {renderChainId()}
+      {renderNetworkDisplayName()}
+      <Text variant={TextVariant.BodyMDMedium}>
+        {strings('add_custom_network.block_explorer_url')}
+      </Text>
+      <Text>{customNetworkInformation.blockExplorerUrl}</Text>
     </ScrollView>
   );