From 722564383d2cef77f39fd08c044cce43faaa4488 Mon Sep 17 00:00:00 2001
From: vinnyhoward <vincenguyenhoward@gmail.com>
Date: Thu, 17 Oct 2024 16:49:23 -0600
Subject: [PATCH 1/4] feat: extend picker network component functionality

---
 .../PickerNetwork/PickerNetwork.stories.tsx   | 10 +++--
 .../PickerNetwork/PickerNetwork.styles.ts     |  5 ++-
 .../PickerNetwork/PickerNetwork.test.tsx      | 34 +++++++++++++++-
 .../Pickers/PickerNetwork/PickerNetwork.tsx   | 35 +++++++++-------
 .../PickerNetwork/PickerNetwork.types.ts      |  4 ++
 .../Pickers/PickerNetwork/README.md           | 40 +++++++++++++------
 6 files changed, 95 insertions(+), 33 deletions(-)

diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx
index 2ff8a42fd2f..a3ade2544ae 100644
--- a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx
+++ b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.stories.tsx
@@ -1,5 +1,5 @@
 /* eslint-disable react/display-name */
-import React from 'react';
+import React, { ComponentProps } from 'react';
 
 // Internal dependencies.
 import { default as PickerNetworkComponent } from './PickerNetwork';
@@ -13,14 +13,16 @@ const PickerNetworkMeta = {
       control: { type: 'text' },
       defaultValue: SAMPLE_PICKERNETWORK_PROPS.label,
     },
+    hideNetworkName: {
+      control: { type: 'boolean' },
+      defaultValue: false,
+    },
   },
 };
 export default PickerNetworkMeta;
 
 export const PickerNetwork = {
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  render: (args: any) => (
+  render: (args: ComponentProps<typeof PickerNetworkComponent>) => (
     <PickerNetworkComponent
       {...args}
       imageSource={SAMPLE_PICKERNETWORK_PROPS.imageSource}
diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts
index b113c5b09ff..9391990e890 100644
--- a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts
+++ b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts
@@ -28,7 +28,7 @@ const styleSheet = (params: {
       {
         height: 32,
         borderRadius: 16,
-        paddingHorizontal: 8,
+        paddingHorizontal: 12,
         flexDirection: 'row',
         alignItems: 'center',
         backgroundColor: colors.background.alternative,
@@ -40,6 +40,9 @@ const styleSheet = (params: {
       marginHorizontal: 8,
       flexShrink: 1,
     },
+    networkIconContainer: {
+      marginRight: 8,
+    },
   });
 };
 
diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx
index 7e8495ef70b..948721d6ac4 100644
--- a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx
+++ b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.test.tsx
@@ -1,9 +1,12 @@
 // Third party dependencies.
 import React from 'react';
+import { fireEvent, render } from '@testing-library/react-native';
+
+// External dependencies.
+import { WalletViewSelectorsIDs } from '../../../../../e2e/selectors/wallet/WalletView.selectors';
 
 // Internal dependencies.
 import PickerNetwork from './PickerNetwork';
-import { render } from '@testing-library/react-native';
 import {
   PICKERNETWORK_ARROW_TESTID,
   SAMPLE_PICKERNETWORK_PROPS,
@@ -27,4 +30,33 @@ describe('PickerNetwork', () => {
 
     expect(queryByTestId(PICKERNETWORK_ARROW_TESTID)).toBeNull();
   });
+
+  it('hides network name and shows icon when hideNetworkName is true', () => {
+    const { queryByTestId } = render(
+      <PickerNetwork
+        label={SAMPLE_PICKERNETWORK_PROPS.label}
+        imageSource={SAMPLE_PICKERNETWORK_PROPS.imageSource}
+        hideNetworkName
+      />,
+    );
+
+    expect(
+      queryByTestId(WalletViewSelectorsIDs.NAVBAR_NETWORK_TEXT),
+    ).toBeNull();
+  });
+
+  it('calls onPress when pressed', () => {
+    const onPress = jest.fn();
+    const { getByTestId } = render(
+      <PickerNetwork
+        label={SAMPLE_PICKERNETWORK_PROPS.label}
+        imageSource={SAMPLE_PICKERNETWORK_PROPS.imageSource}
+        onPress={onPress}
+      />,
+    );
+
+    fireEvent.press(getByTestId(PICKERNETWORK_ARROW_TESTID));
+
+    expect(onPress).toHaveBeenCalled();
+  });
 });
diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.tsx b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.tsx
index 9c4dd1f150a..1b4642ba967 100644
--- a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.tsx
+++ b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.tsx
@@ -2,7 +2,7 @@
 
 // Third party dependencies.
 import React from 'react';
-import { TouchableOpacity } from 'react-native';
+import { TouchableOpacity, View } from 'react-native';
 
 // External dependencies.
 import Avatar, { AvatarSize, AvatarVariant } from '../../Avatars/Avatar';
@@ -21,26 +21,31 @@ const PickerNetwork = ({
   style,
   label,
   imageSource,
+  hideNetworkName,
   ...props
 }: PickerNetworkProps) => {
   const { styles } = useStyles(stylesheet, { style });
 
   return (
     <TouchableOpacity style={styles.base} onPress={onPress} {...props}>
-      <Avatar
-        variant={AvatarVariant.Network}
-        size={AvatarSize.Xs}
-        name={label}
-        imageSource={imageSource}
-      />
-      <Text
-        style={styles.label}
-        numberOfLines={1}
-        variant={TextVariant.BodyMD}
-        testID={WalletViewSelectorsIDs.NAVBAR_NETWORK_TEXT}
-      >
-        {label}
-      </Text>
+      <View style={hideNetworkName ? styles.networkIconContainer : null}>
+        <Avatar
+          variant={AvatarVariant.Network}
+          size={AvatarSize.Xs}
+          name={label}
+          imageSource={imageSource}
+        />
+      </View>
+      {hideNetworkName ? null : (
+        <Text
+          style={styles.label}
+          numberOfLines={1}
+          variant={TextVariant.BodyMD}
+          testID={WalletViewSelectorsIDs.NAVBAR_NETWORK_TEXT}
+        >
+          {label}
+        </Text>
+      )}
       {onPress && (
         <Icon
           size={IconSize.Xs}
diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.types.ts b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.types.ts
index 4ebf84369b1..5089e3c0363 100644
--- a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.types.ts
+++ b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.types.ts
@@ -17,6 +17,10 @@ export interface PickerNetworkProps extends TouchableOpacityProps {
    * Callback to trigger when picker is pressed.
    */
   onPress?: () => void;
+  /**
+   * Whether to hide the network name.
+   */
+  hideNetworkName?: boolean;
 }
 
 export type PickerNetworkStyleSheetVars = Pick<PickerNetworkProps, 'style'>;
diff --git a/app/component-library/components/Pickers/PickerNetwork/README.md b/app/component-library/components/Pickers/PickerNetwork/README.md
index f7e1dccc1f6..63cafd3a338 100644
--- a/app/component-library/components/Pickers/PickerNetwork/README.md
+++ b/app/component-library/components/Pickers/PickerNetwork/README.md
@@ -6,13 +6,13 @@ PickerNetwork is a component that renders an avatar based on the user selected n
 
 This component extends `TouchableOpacityProps` from React Native's [TouchableOpacity](https://reactnative.dev/docs/touchableopacity) component.
 
-### `imageSource`
+### `onPress`
 
-Optional network image from either a local or remote source.
+Callback to trigger when pressed.
 
-| <span style="color:gray;font-size:14px">TYPE</span>                   | <span style="color:gray;font-size:14px">REQUIRED</span> |
-| :-------------------------------------------------------------------- | :------------------------------------------------------ |
-| [ImageSourcePropType](https://reactnative.dev/docs/image#imagesource) | Yes                                                     |
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| function                                            | No                                                      |
 
 ### `label`
 
@@ -22,21 +22,37 @@ Network label to display.
 | :-------------------------------------------------- | :------------------------------------------------------ |
 | string                                              | Yes                                                     |
 
-### `onPress`
+### `imageSource`
+
+The source for the network avatar image.
 
-Callback to trigger when picker is pressed.
+| <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
+| :-------------------------------------------------- | :------------------------------------------------------ |
+| ImageSourcePropType                                 | No                                                      |
+
+### `hideNetworkName`
+
+Whether to hide the network name text.
 
 | <span style="color:gray;font-size:14px">TYPE</span> | <span style="color:gray;font-size:14px">REQUIRED</span> |
 | :-------------------------------------------------- | :------------------------------------------------------ |
-| function                                            | Yes                                                     |
+| boolean                                             | No                                                      |
+
+## Usage
 
 ```javascript
-// Replace import with relative path.
 import PickerNetwork from 'app/component-library/components/Pickers/PickerNetwork';
 
 <PickerNetwork
-  onPress={ONPRESS_CALLBACK}
-  label={NETWORK_LABEL}
-  image={{ uri: NETWORK_IMAGE_URL }}
+  onPress={() => console.log('Network picker pressed')}
+  label="Ethereum"
+  imageSource={require('./ethereum-logo.png')}
 />;
 ```
+
+## Notes
+
+- The component uses an `Avatar` component to display the network icon.
+- If `onPress` is provided, a dropdown arrow icon will be displayed.
+- The network name can be hidden using the `hideNetworkName` prop.
+- The component uses custom styles defined in `PickerNetwork.styles.ts`.
\ No newline at end of file

From e2f4191aaa58f7a83ea2525f42e726d3e904a926 Mon Sep 17 00:00:00 2001
From: vinnyhoward <vincenguyenhoward@gmail.com>
Date: Thu, 17 Oct 2024 16:59:33 -0600
Subject: [PATCH 2/4] test: update snaps

---
 .../__snapshots__/PickerNetwork.test.tsx.snap | 48 +++++++++--------
 .../__snapshots__/ManageNetworks.test.js.snap | 50 ++++++++++--------
 .../__snapshots__/index.test.tsx.snap         | 50 ++++++++++--------
 .../NetworkVerificationInfo.test.tsx.snap     | 52 ++++++++++---------
 .../NetworkSwitcher.test.tsx.snap             | 50 ++++++++++--------
 .../AccountPermissions.test.tsx.snap          | 52 ++++++++++---------
 .../__snapshots__/index.test.tsx.snap         | 50 ++++++++++--------
 .../Wallet/__snapshots__/index.test.tsx.snap  | 52 ++++++++++---------
 8 files changed, 218 insertions(+), 186 deletions(-)

diff --git a/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap b/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap
index c9c4f7fe797..b2206f063dc 100644
--- a/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap
+++ b/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap
@@ -11,39 +11,43 @@ exports[`PickerNetwork renders correctly 1`] = `
       "borderRadius": 16,
       "flexDirection": "row",
       "height": 32,
-      "paddingHorizontal": 8,
+      "paddingHorizontal": 12,
     }
   }
 >
   <View
-    style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "borderRadius": 8,
-        "height": 16,
-        "justifyContent": "center",
-        "overflow": "hidden",
-        "width": 16,
-      }
-    }
+    style={null}
   >
-    <Image
-      onError={[Function]}
-      resizeMode="contain"
-      source={
-        {
-          "uri": "https://assets.coingecko.com/coins/images/279/small/ethereum.png?1595348880",
-        }
-      }
+    <View
       style={
         {
+          "alignItems": "center",
+          "backgroundColor": "#ffffff",
+          "borderRadius": 8,
           "height": 16,
+          "justifyContent": "center",
+          "overflow": "hidden",
           "width": 16,
         }
       }
-      testID="network-avatar-image"
-    />
+    >
+      <Image
+        onError={[Function]}
+        resizeMode="contain"
+        source={
+          {
+            "uri": "https://assets.coingecko.com/coins/images/279/small/ethereum.png?1595348880",
+          }
+        }
+        style={
+          {
+            "height": 16,
+            "width": 16,
+          }
+        }
+        testID="network-avatar-image"
+      />
+    </View>
   </View>
   <Text
     accessibilityRole="text"
diff --git a/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap b/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap
index d86999527a3..18a8407f581 100644
--- a/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap
+++ b/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap
@@ -78,40 +78,44 @@ exports[`ManageNetworks should render correctly 1`] = `
         "flexDirection": "row",
         "height": 32,
         "marginVertical": 16,
-        "paddingHorizontal": 8,
+        "paddingHorizontal": 12,
       }
     }
     testID="accounts-connected-network-picker"
   >
     <View
-      style={
-        {
-          "alignItems": "center",
-          "backgroundColor": "#f2f4f6",
-          "borderRadius": 8,
-          "borderWidth": 1,
-          "height": 16,
-          "justifyContent": "center",
-          "overflow": "hidden",
-          "width": 16,
-        }
-      }
+      style={null}
     >
-      <Text
-        accessibilityRole="text"
+      <View
         style={
           {
-            "color": "#141618",
-            "fontFamily": "EuclidCircularB-Regular",
-            "fontSize": 10,
-            "fontWeight": "400",
-            "letterSpacing": 0,
-            "lineHeight": undefined,
+            "alignItems": "center",
+            "backgroundColor": "#f2f4f6",
+            "borderRadius": 8,
+            "borderWidth": 1,
+            "height": 16,
+            "justifyContent": "center",
+            "overflow": "hidden",
+            "width": 16,
           }
         }
       >
-        E
-      </Text>
+        <Text
+          accessibilityRole="text"
+          style={
+            {
+              "color": "#141618",
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 10,
+              "fontWeight": "400",
+              "letterSpacing": 0,
+              "lineHeight": undefined,
+            }
+          }
+        >
+          E
+        </Text>
+      </View>
     </View>
     <Text
       accessibilityRole="text"
diff --git a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
index 5352aa68899..a81aa4d2dbb 100644
--- a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
+++ b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
@@ -225,39 +225,43 @@ exports[`NetworkDetails renders correctly 1`] = `
                       "flexDirection": "row",
                       "height": 32,
                       "marginBottom": 16,
-                      "paddingHorizontal": 8,
+                      "paddingHorizontal": 12,
                     }
                   }
                 >
                   <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "backgroundColor": "#f2f4f6",
-                        "borderRadius": 8,
-                        "borderWidth": 1,
-                        "height": 16,
-                        "justifyContent": "center",
-                        "overflow": "hidden",
-                        "width": 16,
-                      }
-                    }
+                    style={null}
                   >
-                    <Text
-                      accessibilityRole="text"
+                    <View
                       style={
                         {
-                          "color": "#141618",
-                          "fontFamily": "EuclidCircularB-Regular",
-                          "fontSize": 10,
-                          "fontWeight": "400",
-                          "letterSpacing": 0,
-                          "lineHeight": undefined,
+                          "alignItems": "center",
+                          "backgroundColor": "#f2f4f6",
+                          "borderRadius": 8,
+                          "borderWidth": 1,
+                          "height": 16,
+                          "justifyContent": "center",
+                          "overflow": "hidden",
+                          "width": 16,
                         }
                       }
                     >
-                      T
-                    </Text>
+                      <Text
+                        accessibilityRole="text"
+                        style={
+                          {
+                            "color": "#141618",
+                            "fontFamily": "EuclidCircularB-Regular",
+                            "fontSize": 10,
+                            "fontWeight": "400",
+                            "letterSpacing": 0,
+                            "lineHeight": undefined,
+                          }
+                        }
+                      >
+                        T
+                      </Text>
+                    </View>
                   </View>
                   <Text
                     accessibilityRole="text"
diff --git a/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap b/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
index 6126b24708f..1837a37182c 100644
--- a/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
+++ b/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
@@ -86,41 +86,45 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
             "flexDirection": "row",
             "height": 32,
             "marginBottom": 16,
-            "paddingHorizontal": 8,
+            "paddingHorizontal": 12,
           }
         }
       >
         <View
-          style={
-            {
-              "alignItems": "center",
-              "backgroundColor": "#ffffff",
-              "borderRadius": 8,
-              "height": 16,
-              "justifyContent": "center",
-              "overflow": "hidden",
-              "width": 16,
-            }
-          }
+          style={null}
         >
-          <Image
-            onError={[Function]}
-            resizeMode="contain"
-            source={
-              {
-                "default": {
-                  "uri": "MockImage",
-                },
-              }
-            }
+          <View
             style={
               {
+                "alignItems": "center",
+                "backgroundColor": "#ffffff",
+                "borderRadius": 8,
                 "height": 16,
+                "justifyContent": "center",
+                "overflow": "hidden",
                 "width": 16,
               }
             }
-            testID="network-avatar-image"
-          />
+          >
+            <Image
+              onError={[Function]}
+              resizeMode="contain"
+              source={
+                {
+                  "default": {
+                    "uri": "MockImage",
+                  },
+                }
+              }
+              style={
+                {
+                  "height": 16,
+                  "width": 16,
+                }
+              }
+              testID="network-avatar-image"
+            />
+          </View>
         </View>
         <Text
           accessibilityRole="text"
diff --git a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap
index da5eb51bb0e..e8d0e7ee141 100644
--- a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap
+++ b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap
@@ -1057,39 +1057,43 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing
                                                       "flexDirection": "row",
                                                       "height": 32,
                                                       "marginBottom": 16,
-                                                      "paddingHorizontal": 8,
+                                                      "paddingHorizontal": 12,
                                                     }
                                                   }
                                                 >
                                                   <View
-                                                    style={
-                                                      {
-                                                        "alignItems": "center",
-                                                        "backgroundColor": "#f2f4f6",
-                                                        "borderRadius": 8,
-                                                        "borderWidth": 1,
-                                                        "height": 16,
-                                                        "justifyContent": "center",
-                                                        "overflow": "hidden",
-                                                        "width": 16,
-                                                      }
-                                                    }
+                                                    style={null}
                                                   >
-                                                    <Text
-                                                      accessibilityRole="text"
+                                                    <View
                                                       style={
                                                         {
-                                                          "color": "#141618",
-                                                          "fontFamily": "EuclidCircularB-Regular",
-                                                          "fontSize": 10,
-                                                          "fontWeight": "400",
-                                                          "letterSpacing": 0,
-                                                          "lineHeight": undefined,
+                                                          "alignItems": "center",
+                                                          "backgroundColor": "#f2f4f6",
+                                                          "borderRadius": 8,
+                                                          "borderWidth": 1,
+                                                          "height": 16,
+                                                          "justifyContent": "center",
+                                                          "overflow": "hidden",
+                                                          "width": 16,
                                                         }
                                                       }
                                                     >
-                                                      C
-                                                    </Text>
+                                                      <Text
+                                                        accessibilityRole="text"
+                                                        style={
+                                                          {
+                                                            "color": "#141618",
+                                                            "fontFamily": "EuclidCircularB-Regular",
+                                                            "fontSize": 10,
+                                                            "fontWeight": "400",
+                                                            "letterSpacing": 0,
+                                                            "lineHeight": undefined,
+                                                          }
+                                                        }
+                                                      >
+                                                        C
+                                                      </Text>
+                                                    </View>
                                                   </View>
                                                   <Text
                                                     accessibilityRole="text"
diff --git a/app/components/Views/AccountPermissions/__snapshots__/AccountPermissions.test.tsx.snap b/app/components/Views/AccountPermissions/__snapshots__/AccountPermissions.test.tsx.snap
index dab5865d619..80247dcfa1f 100644
--- a/app/components/Views/AccountPermissions/__snapshots__/AccountPermissions.test.tsx.snap
+++ b/app/components/Views/AccountPermissions/__snapshots__/AccountPermissions.test.tsx.snap
@@ -272,42 +272,46 @@ exports[`AccountPermissions renders correctly 1`] = `
               "flexDirection": "row",
               "height": 32,
               "marginVertical": 16,
-              "paddingHorizontal": 8,
+              "paddingHorizontal": 12,
             }
           }
           testID="accounts-connected-network-picker"
         >
           <View
-            style={
-              {
-                "alignItems": "center",
-                "backgroundColor": "#ffffff",
-                "borderRadius": 8,
-                "height": 16,
-                "justifyContent": "center",
-                "overflow": "hidden",
-                "width": 16,
-              }
-            }
+            style={null}
           >
-            <Image
-              onError={[Function]}
-              resizeMode="contain"
-              source={
-                {
-                  "default": {
-                    "uri": "MockImage",
-                  },
-                }
-              }
+            <View
               style={
                 {
+                  "alignItems": "center",
+                  "backgroundColor": "#ffffff",
+                  "borderRadius": 8,
                   "height": 16,
+                  "justifyContent": "center",
+                  "overflow": "hidden",
                   "width": 16,
                 }
               }
-              testID="network-avatar-image"
-            />
+            >
+              <Image
+                onError={[Function]}
+                resizeMode="contain"
+                source={
+                  {
+                    "default": {
+                      "uri": "MockImage",
+                    },
+                  }
+                }
+                style={
+                  {
+                    "height": 16,
+                    "width": 16,
+                  }
+                }
+                testID="network-avatar-image"
+              />
+            </View>
           </View>
           <Text
             accessibilityRole="text"
diff --git a/app/components/Views/OnboardingSuccess/OnboardingGeneralSettings/__snapshots__/index.test.tsx.snap b/app/components/Views/OnboardingSuccess/OnboardingGeneralSettings/__snapshots__/index.test.tsx.snap
index eba5f4280cd..377cb79b39e 100644
--- a/app/components/Views/OnboardingSuccess/OnboardingGeneralSettings/__snapshots__/index.test.tsx.snap
+++ b/app/components/Views/OnboardingSuccess/OnboardingGeneralSettings/__snapshots__/index.test.tsx.snap
@@ -176,40 +176,44 @@ exports[`OnboardingGeneralSettings should render correctly 1`] = `
             "flexDirection": "row",
             "height": 32,
             "marginVertical": 16,
-            "paddingHorizontal": 8,
+            "paddingHorizontal": 12,
           }
         }
         testID="accounts-connected-network-picker"
       >
         <View
-          style={
-            {
-              "alignItems": "center",
-              "backgroundColor": "#f2f4f6",
-              "borderRadius": 8,
-              "borderWidth": 1,
-              "height": 16,
-              "justifyContent": "center",
-              "overflow": "hidden",
-              "width": 16,
-            }
-          }
+          style={null}
         >
-          <Text
-            accessibilityRole="text"
+          <View
             style={
               {
-                "color": "#141618",
-                "fontFamily": "EuclidCircularB-Regular",
-                "fontSize": 10,
-                "fontWeight": "400",
-                "letterSpacing": 0,
-                "lineHeight": undefined,
+                "alignItems": "center",
+                "backgroundColor": "#f2f4f6",
+                "borderRadius": 8,
+                "borderWidth": 1,
+                "height": 16,
+                "justifyContent": "center",
+                "overflow": "hidden",
+                "width": 16,
               }
             }
           >
-            E
-          </Text>
+            <Text
+              accessibilityRole="text"
+              style={
+                {
+                  "color": "#141618",
+                  "fontFamily": "EuclidCircularB-Regular",
+                  "fontSize": 10,
+                  "fontWeight": "400",
+                  "letterSpacing": 0,
+                  "lineHeight": undefined,
+                }
+              }
+            >
+              E
+            </Text>
+          </View>
         </View>
         <Text
           accessibilityRole="text"
diff --git a/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap b/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap
index 3ec9cf2c174..b513ec1874e 100644
--- a/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap
+++ b/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap
@@ -164,42 +164,46 @@ exports[`Wallet should render correctly 1`] = `
                       "borderRadius": 16,
                       "flexDirection": "row",
                       "height": 32,
-                      "paddingHorizontal": 8,
+                      "paddingHorizontal": 12,
                     }
                   }
                   testID="open-networks-button"
                 >
                   <View
-                    style={
-                      {
-                        "alignItems": "center",
-                        "backgroundColor": "#ffffff",
-                        "borderRadius": 8,
-                        "height": 16,
-                        "justifyContent": "center",
-                        "overflow": "hidden",
-                        "width": 16,
-                      }
-                    }
+                    style={null}
                   >
-                    <Image
-                      onError={[Function]}
-                      resizeMode="contain"
-                      source={
-                        {
-                          "default": {
-                            "uri": "MockImage",
-                          },
-                        }
-                      }
+                    <View
                       style={
                         {
+                          "alignItems": "center",
+                          "backgroundColor": "#ffffff",
+                          "borderRadius": 8,
                           "height": 16,
+                          "justifyContent": "center",
+                          "overflow": "hidden",
                           "width": 16,
                         }
                       }
-                      testID="network-avatar-image"
-                    />
+                    >
+                      <Image
+                        onError={[Function]}
+                        resizeMode="contain"
+                        source={
+                          {
+                            "default": {
+                              "uri": "MockImage",
+                            },
+                          }
+                        }
+                        style={
+                          {
+                            "height": 16,
+                            "width": 16,
+                          }
+                        }
+                        testID="network-avatar-image"
+                      />
+                    </View>
                   </View>
                   <Text
                     accessibilityRole="text"

From 2a2e8fbe6e2da1b9bda291ec68045e2ef46d94ae Mon Sep 17 00:00:00 2001
From: vinnyhoward <vincenguyenhoward@gmail.com>
Date: Tue, 22 Oct 2024 12:58:38 -0600
Subject: [PATCH 3/4] fix: reverted a style and updated tests

---
 .../components/Pickers/PickerNetwork/PickerNetwork.styles.ts    | 2 +-
 .../PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts
index 9391990e890..2bfadb28dbe 100644
--- a/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts
+++ b/app/component-library/components/Pickers/PickerNetwork/PickerNetwork.styles.ts
@@ -28,7 +28,7 @@ const styleSheet = (params: {
       {
         height: 32,
         borderRadius: 16,
-        paddingHorizontal: 12,
+        paddingHorizontal: 8,
         flexDirection: 'row',
         alignItems: 'center',
         backgroundColor: colors.background.alternative,
diff --git a/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap b/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap
index b2206f063dc..f59fab74933 100644
--- a/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap
+++ b/app/component-library/components/Pickers/PickerNetwork/__snapshots__/PickerNetwork.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`PickerNetwork renders correctly 1`] = `
       "borderRadius": 16,
       "flexDirection": "row",
       "height": 32,
-      "paddingHorizontal": 12,
+      "paddingHorizontal": 8,
     }
   }
 >

From 4dee8a81186bb7314702fc6ba1d953ca3a64dc9f Mon Sep 17 00:00:00 2001
From: vinnyhoward <vincenguyenhoward@gmail.com>
Date: Tue, 22 Oct 2024 13:14:00 -0600
Subject: [PATCH 4/4] fix: update snaps

---
 .../UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap | 2 +-
 .../UI/NetworkModal/__snapshots__/index.test.tsx.snap           | 2 +-
 .../__snapshots__/NetworkVerificationInfo.test.tsx.snap         | 2 +-
 .../NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap | 2 +-
 .../__snapshots__/AccountPermissions.test.tsx.snap              | 2 +-
 .../OnboardingGeneralSettings/__snapshots__/index.test.tsx.snap | 2 +-
 app/components/Views/Wallet/__snapshots__/index.test.tsx.snap   | 2 +-
 7 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap b/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap
index 18a8407f581..4d89a952349 100644
--- a/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap
+++ b/app/components/UI/ManageNetworks/__snapshots__/ManageNetworks.test.js.snap
@@ -78,7 +78,7 @@ exports[`ManageNetworks should render correctly 1`] = `
         "flexDirection": "row",
         "height": 32,
         "marginVertical": 16,
-        "paddingHorizontal": 12,
+        "paddingHorizontal": 8,
       }
     }
     testID="accounts-connected-network-picker"
diff --git a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
index a81aa4d2dbb..8099909473b 100644
--- a/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
+++ b/app/components/UI/NetworkModal/__snapshots__/index.test.tsx.snap
@@ -225,7 +225,7 @@ exports[`NetworkDetails renders correctly 1`] = `
                       "flexDirection": "row",
                       "height": 32,
                       "marginBottom": 16,
-                      "paddingHorizontal": 12,
+                      "paddingHorizontal": 8,
                     }
                   }
                 >
diff --git a/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap b/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
index 1837a37182c..bbcf6abbafd 100644
--- a/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
+++ b/app/components/UI/NetworkVerificationInfo/__snapshots__/NetworkVerificationInfo.test.tsx.snap
@@ -86,7 +86,7 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
             "flexDirection": "row",
             "height": 32,
             "marginBottom": 16,
-            "paddingHorizontal": 12,
+            "paddingHorizontal": 8,
           }
         }
       >
diff --git a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap
index e8d0e7ee141..bdf21b1ce92 100644
--- a/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap
+++ b/app/components/UI/Ramp/Views/NetworkSwitcher/__snapshots__/NetworkSwitcher.test.tsx.snap
@@ -1057,7 +1057,7 @@ exports[`NetworkSwitcher View renders and dismisses network modal when pressing
                                                       "flexDirection": "row",
                                                       "height": 32,
                                                       "marginBottom": 16,
-                                                      "paddingHorizontal": 12,
+                                                      "paddingHorizontal": 8,
                                                     }
                                                   }
                                                 >
diff --git a/app/components/Views/AccountPermissions/__snapshots__/AccountPermissions.test.tsx.snap b/app/components/Views/AccountPermissions/__snapshots__/AccountPermissions.test.tsx.snap
index 80247dcfa1f..226158d5611 100644
--- a/app/components/Views/AccountPermissions/__snapshots__/AccountPermissions.test.tsx.snap
+++ b/app/components/Views/AccountPermissions/__snapshots__/AccountPermissions.test.tsx.snap
@@ -272,7 +272,7 @@ exports[`AccountPermissions renders correctly 1`] = `
               "flexDirection": "row",
               "height": 32,
               "marginVertical": 16,
-              "paddingHorizontal": 12,
+              "paddingHorizontal": 8,
             }
           }
           testID="accounts-connected-network-picker"
diff --git a/app/components/Views/OnboardingSuccess/OnboardingGeneralSettings/__snapshots__/index.test.tsx.snap b/app/components/Views/OnboardingSuccess/OnboardingGeneralSettings/__snapshots__/index.test.tsx.snap
index 377cb79b39e..04b33ca2b84 100644
--- a/app/components/Views/OnboardingSuccess/OnboardingGeneralSettings/__snapshots__/index.test.tsx.snap
+++ b/app/components/Views/OnboardingSuccess/OnboardingGeneralSettings/__snapshots__/index.test.tsx.snap
@@ -176,7 +176,7 @@ exports[`OnboardingGeneralSettings should render correctly 1`] = `
             "flexDirection": "row",
             "height": 32,
             "marginVertical": 16,
-            "paddingHorizontal": 12,
+            "paddingHorizontal": 8,
           }
         }
         testID="accounts-connected-network-picker"
diff --git a/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap b/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap
index 18a2edf4478..7c171da064c 100644
--- a/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap
+++ b/app/components/Views/Wallet/__snapshots__/index.test.tsx.snap
@@ -164,7 +164,7 @@ exports[`Wallet should render correctly 1`] = `
                       "borderRadius": 16,
                       "flexDirection": "row",
                       "height": 32,
-                      "paddingHorizontal": 12,
+                      "paddingHorizontal": 8,
                     }
                   }
                   testID="open-networks-button"