chore: refactor header for tokens

app/component-library/components/BottomSheets/BottomSheetHeader/__snapshots__/BottomSheetHeader.test.tsx.snap

@@ -3,12 +3,14 @@
 exports[`BottomSheetHeader should render snapshot correctly 1`] = `
 <View
   style={
-    {
-      "alignItems": "center",
-      "backgroundColor": "#ffffff",
-      "flexDirection": "row",
-      "padding": 16,
-    }
+    [
+      {
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+        "padding": 16,
+      },
+      false,
+    ]
   }
   testID="header"
 >

app/component-library/components/HeaderBase/HeaderBase.styles.ts

@@ -31,7 +31,6 @@ const styleSheet = (params: {
       {
         backgroundColor: theme.colors.background.default,
         flexDirection: 'row',
-        alignItems: 'center',
       } as ViewStyle,
       style,
     ) as ViewStyle,

app/component-library/components/HeaderBase/HeaderBase.tsx

@@ -3,6 +3,7 @@
 // Third party dependencies.
 import React from 'react';
 import { View } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 // External dependencies.
 import { useComponentSize, useStyles } from '../../hooks';
@@ -22,19 +23,25 @@ const HeaderBase: React.FC<HeaderBaseProps> = ({
   children,
   startAccessory,
   endAccessory,
+  includesTopInset = false,
 }) => {
   const { size: startAccessorySize, onLayout: startAccessoryOnLayout } =
     useComponentSize();
   const { size: endAccessorySize, onLayout: endAccessoryOnLayout } =
     useComponentSize();
+  const insets = useSafeAreaInsets();
+
   const { styles } = useStyles(styleSheet, {
     style,
     startAccessorySize,
     endAccessorySize,
   });
 
   return (
-    <View style={styles.base} testID={HEADERBASE_TEST_ID}>
+    <View
+      style={[styles.base, includesTopInset && { marginTop: insets.top }]}
+      testID={HEADERBASE_TEST_ID}
+    >
       <View style={styles.accessoryWrapper}>
         <View onLayout={startAccessoryOnLayout}>{startAccessory}</View>
       </View>

app/component-library/components/HeaderBase/HeaderBase.types.ts

@@ -17,6 +17,12 @@ export interface HeaderBaseProps extends ViewProps {
    * Optional prop to include content to be displayed after the title.
    */
   endAccessory?: React.ReactNode;
+  /**
+   * Optional prop to include the top inset to make sure the header is visible
+   * below device's knob
+   * @default: false
+   */
+  includesTopInset?: boolean;
 }
 
 /**

app/component-library/components/HeaderBase/__snapshots__/HeaderBase.test.tsx.snap

@@ -3,11 +3,13 @@
 exports[`HeaderBase should render snapshot correctly 1`] = `
 <View
   style={
-    {
-      "alignItems": "center",
-      "backgroundColor": "#ffffff",
-      "flexDirection": "row",
-    }
+    [
+      {
+        "backgroundColor": "#ffffff",
+        "flexDirection": "row",
+      },
+      false,
+    ]
   }
   testID="header"
 >

app/components/UI/Navbar/index.js

@@ -53,6 +53,7 @@ import Icon, {
 } from '../../../component-library/components/Icons/Icon';
 import { AddContactViewSelectorsIDs } from '../../../../e2e/selectors/Settings/Contacts/AddContactView.selectors';
 import { ImportTokenViewSelectorsIDs } from '../../../../e2e/selectors/wallet/ImportTokenView.selectors';
+import HeaderBase from '../../../component-library/components/HeaderBase';
 
 const trackEvent = (event, params = {}) => {
   MetaMetrics.getInstance().trackEvent(event, params);
@@ -134,6 +135,12 @@ const styles = StyleSheet.create({
     top: 2,
     right: 10,
   },
+  headerLeftButton: {
+    marginHorizontal: 16,
+  },
+  headerRightButton: {
+    marginHorizontal: 16,
+  },
 });
 
 const metamask_name = require('../../../images/metamask-name.png'); // eslint-disable-line
@@ -1265,66 +1272,40 @@ export function getNetworkNavbarOptions(
   title,
   translate,
   navigation,
-  themeColors,
   onRightPress = undefined,
   disableNetwork = false,
-  contentOffset = 0,
 ) {
-  const innerStyles = StyleSheet.create({
-    headerStyle: {
-      backgroundColor: themeColors.background.default,
-      shadowColor: importedColors.transparent,
-      elevation: 0,
-    },
-    headerShadow: {
-      elevation: 2,
-      shadowColor: themeColors.background.primary,
-      shadowOpacity: contentOffset < 20 ? contentOffset / 100 : 0.2,
-      shadowOffset: { height: 4, width: 0 },
-      shadowRadius: 8,
-    },
-    headerIcon: {
-      color: themeColors.primary.default,
-    },
-  });
   return {
-    headerTitle: () => (
-      <NavbarTitle
-        disableNetwork={disableNetwork}
-        title={title}
-        translate={translate}
-      />
-    ),
-    headerLeft: () => (
-      // eslint-disable-next-line react/jsx-no-bind
-      <TouchableOpacity
-        onPress={() => navigation.pop()}
-        style={styles.backButton}
-        testID={ImportTokenViewSelectorsIDs.BACK_BUTTON}
+    header: () => (
+      <HeaderBase
+        includesTopInset
+        startAccessory={
+          <ButtonIcon
+            style={styles.headerLeftButton}
+            onPress={() => navigation.pop()}
+            testID={ImportTokenViewSelectorsIDs.BACK_BUTTON}
+            size={ButtonIconSizes.Lg}
+            iconName={IconName.ArrowLeft}
+            iconColor={IconColor.Default}
+          />
+        }
+        endAccessory={
+          <ButtonIcon
+            style={styles.headerRightButton}
+            onPress={onRightPress}
+            size={ButtonIconSizes.Lg}
+            iconName={IconName.MoreVertical}
+            iconColor={IconColor.Default}
+          />
+        }
       >
-        <IonicIcon
-          name={'ios-close'}
-          size={38}
-          style={innerStyles.headerIcon}
+        <NavbarTitle
+          disableNetwork={disableNetwork}
+          title={title}
+          translate={translate}
         />
-      </TouchableOpacity>
+      </HeaderBase>
     ),
-    headerRight: onRightPress
-      ? () => (
-          <TouchableOpacity style={styles.backButton} onPress={onRightPress}>
-            <MaterialCommunityIcon
-              name={'dots-horizontal'}
-              size={28}
-              style={innerStyles.headerIcon}
-            />
-          </TouchableOpacity>
-          // eslint-disable-next-line no-mixed-spaces-and-tabs
-        )
-      : () => <View />,
-    headerStyle: [
-      innerStyles.headerStyle,
-      contentOffset && innerStyles.headerShadow,
-    ],
   };
 }
 

app/components/UI/NavbarTitle/index.js

@@ -15,45 +15,18 @@ import { selectProviderConfig } from '../../../selectors/networkController';
 import { withMetricsAwareness } from '../../../components/hooks/useMetrics';
 import Text, {
   TextVariant,
+  TextColor,
 } from '../../../component-library/components/Texts/Text';
 
 const createStyles = (colors) =>
   StyleSheet.create({
     wrapper: {
       justifyContent: 'center',
       alignItems: 'center',
-      flex: 1,
     },
     network: {
       flexDirection: 'row',
     },
-    networkName: {
-      fontSize: 11,
-      color: colors.text.alternative,
-      ...fontStyles.normal,
-    },
-    networkIcon: {
-      width: 5,
-      height: 5,
-      borderRadius: 100,
-      marginRight: 5,
-      marginTop: Device.isIos() ? 4 : 5,
-    },
-    title: {
-      fontSize: scale(14),
-      ...fontStyles.normal,
-      color: colors.text.default,
-    },
-    children: {
-      ...fontStyles.normal,
-      color: colors.text.default,
-      fontWeight: 'bold',
-    },
-    otherNetworkIcon: {
-      backgroundColor: importedColors.transparent,
-      borderColor: colors.border.default,
-      borderWidth: 1,
-    },
   });
 
 /**
@@ -151,26 +124,22 @@ class NavbarTitle extends PureComponent {
         activeOpacity={this.props.disableNetwork ? 1 : 0.2}
       >
         {title ? (
-          <Text numberOfLines={1} style={styles.title}>
+          <Text numberOfLines={1} variant={TextVariant.BodyMDBold}>
             {realTitle}
           </Text>
         ) : null}
         {typeof children === 'string' ? (
-          <Text variant={TextVariant.HeadingMD} style={styles.children}>
-            {strings(children)}
-          </Text>
+          <Text variant={TextVariant.BodyMDBold}>{strings(children)}</Text>
         ) : (
           children
         )}
         {showSelectedNetwork ? (
           <View style={styles.network}>
-            <View
-              style={[
-                styles.networkIcon,
-                color ? { backgroundColor: color } : styles.otherNetworkIcon,
-              ]}
-            />
-            <Text numberOfLines={1} style={styles.networkName}>
+            <Text
+              numberOfLines={1}
+              variant={TextVariant.BodySM}
+              color={TextColor.Alternative}
+            >
               {name}
             </Text>
           </View>

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

@@ -145,12 +145,14 @@ exports[`NetworkDetails renders correctly 1`] = `
           >
             <View
               style={
-                {
-                  "alignItems": "center",
-                  "backgroundColor": "#ffffff",
-                  "flexDirection": "row",
-                  "padding": 16,
-                }
+                [
+                  {
+                    "backgroundColor": "#ffffff",
+                    "flexDirection": "row",
+                    "padding": 16,
+                  },
+                  false,
+                ]
               }
               testID="header"
             >

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

@@ -1,9 +1,9 @@
 import React from 'react';
 import NetworkVerificationInfo from './NetworkVerificationInfo';
-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';
+import renderWithSafeAreaProvider from '../../../util/test/renderWithProvider';
 
 const mockNetworkInfo = {
   chainName: 'Test Chain',
@@ -32,7 +32,7 @@ describe('NetworkVerificationInfo', () => {
   });
   it('renders correctly', () => {
     (useSelector as jest.Mock).mockReturnValue(true);
-    const { toJSON } = render(
+    const { toJSON } = renderWithSafeAreaProvider(
       <NetworkVerificationInfo
         customNetworkInformation={mockNetworkInfo}
         onReject={() => undefined}
@@ -44,7 +44,7 @@ describe('NetworkVerificationInfo', () => {
   });
   it('renders one alert', () => {
     (useSelector as jest.Mock).mockReturnValue(true);
-    const { getByText } = render(
+    const { getByText } = renderWithSafeAreaProvider(
       <NetworkVerificationInfo
         customNetworkInformation={mockNetworkInfo}
         onReject={() => undefined}
@@ -58,7 +58,7 @@ describe('NetworkVerificationInfo', () => {
 
   it('should render the banner', () => {
     (useSelector as jest.Mock).mockReturnValue(false);
-    const { getByText } = render(
+    const { getByText } = renderWithSafeAreaProvider(
       <NetworkVerificationInfo
         customNetworkInformation={mockNetworkInfo}
         onReject={() => undefined}
@@ -72,7 +72,7 @@ describe('NetworkVerificationInfo', () => {
 
   it('should not render alert', () => {
     (useSelector as jest.Mock).mockReturnValue(false);
-    const { getByText } = render(
+    const { getByText } = renderWithSafeAreaProvider(
       <NetworkVerificationInfo
         customNetworkInformation={mockNetworkInfo}
         onReject={() => undefined}
@@ -87,7 +87,7 @@ describe('NetworkVerificationInfo', () => {
 
   it('should render chainId on decimal', () => {
     (useSelector as jest.Mock).mockReturnValue(true);
-    const { getByText } = render(
+    const { getByText } = renderWithSafeAreaProvider(
       <NetworkVerificationInfo
         customNetworkInformation={mockNetworkInfo}
         onReject={() => undefined}

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

@@ -6,12 +6,14 @@ exports[`NetworkVerificationInfo renders correctly 1`] = `
 >
   <View
     style={
-      {
-        "alignItems": "center",
-        "backgroundColor": "#ffffff",
-        "flexDirection": "row",
-        "padding": 16,
-      }
+      [
+        {
+          "backgroundColor": "#ffffff",
+          "flexDirection": "row",
+          "padding": 16,
+        },
+        false,
+      ]
     }
     testID="header"
   >