chore: Convert browser tab to typescript

android/app/build.gradle

@@ -179,7 +179,7 @@ android {
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionName "7.37.1"
-        versionCode 1520
+        versionCode 1534
         testBuildType System.getProperty('testBuildType', 'debug')
         missingDimensionStrategy 'react-native-camera', 'general'
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

app/actions/browser/index.js

@@ -36,10 +36,12 @@ export function addToHistory({ url, name }) {
 /**
  * Clears the entire browser history
  */
-export function clearHistory() {
+export function clearHistory(metricsEnabled, marketingEnabled) {
   return {
     type: 'CLEAR_BROWSER_HISTORY',
     id: Date.now(),
+    metricsEnabled,
+    marketingEnabled,
   };
 }
 

app/component-library/components/Avatars/Avatar/variants/AvatarFavicon/AvatarFavicon.tsx

@@ -12,7 +12,6 @@ import { ICONSIZE_BY_AVATARSIZE } from '../../Avatar.constants';
 import AvatarBase from '../../foundation/AvatarBase';
 
 // Internal dependencies.
-import { isNumber } from 'lodash';
 import { isFaviconSVG } from '../../../../../../util/favicon';
 import {
   AVATARFAVICON_IMAGE_TESTID,
@@ -28,9 +27,14 @@ const AvatarFavicon = ({
   style,
   ...props
 }: AvatarFaviconProps) => {
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const [error, setError] = useState<any>(undefined);
+  const isRequireSource = !!(imageSource && typeof imageSource === 'number');
+  const isRemoteSource = !!(
+    imageSource &&
+    typeof imageSource === 'object' &&
+    'uri' in imageSource
+  );
+  const isValidSource = isRequireSource || isRemoteSource;
+  const [error, setError] = useState<Error | undefined>(undefined);
   const [svgSource, setSvgSource] = useState<string>('');
   const { styles } = useStyles(stylesheet, { style });
 
@@ -40,9 +44,7 @@ const AvatarFavicon = ({
     [setError],
   );
 
-  // TODO: Replace "any" with type
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const onSvgError = useCallback((e: any) => setError(e), [setError]);
+  const onSvgError = useCallback((e: Error) => setError(e), [setError]);
 
   // TODO add the fallback with uppercase letter initial
   //  requires that the domain is passed in as a prop from the parent
@@ -53,30 +55,29 @@ const AvatarFavicon = ({
     />
   );
 
+  // Checks if image is SVG
   useEffect(() => {
+    if (!isRemoteSource) return;
+
     const checkSvgContentType = async (uri: string) => {
       try {
         const response = await fetch(uri, { method: 'HEAD' });
         const contentType = response.headers.get('Content-Type');
         return contentType?.includes('image/svg+xml');
-        // TODO: Replace "any" with type
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      } catch (err: any) {
+      } catch (_) {
         return false;
       }
     };
 
-    if (imageSource && !isNumber(imageSource) && 'uri' in imageSource) {
-      const svg = isFaviconSVG(imageSource);
-      if (svg) {
-        checkSvgContentType(svg).then((isSvg) => {
-          if (isSvg) {
-            setSvgSource(svg);
-          }
-        });
-      }
+    const svg = isFaviconSVG(imageSource);
+    if (svg) {
+      checkSvgContentType(svg).then((isSvg) => {
+        if (isSvg) {
+          setSvgSource(svg);
+        }
+      });
     }
-  }, [imageSource]);
+  }, [imageSource, isRemoteSource]);
 
   const renderSvg = () =>
     svgSource ? (
@@ -86,9 +87,7 @@ const AvatarFavicon = ({
         height="100%"
         uri={svgSource}
         style={styles.image}
-        // TODO: Replace "any" with type
-        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        onError={(e: any) => onSvgError(e)}
+        onError={(e: unknown) => onSvgError(e as Error)}
       />
     ) : null;
 
@@ -106,7 +105,7 @@ const AvatarFavicon = ({
 
   return (
     <AvatarBase size={size} style={styles.base} {...props}>
-      {error ? renderFallbackFavicon() : renderFavicon()}
+      {error || !isValidSource ? renderFallbackFavicon() : renderFavicon()}
     </AvatarBase>
   );
 };

app/components/Nav/Main/MainNavigator.js

@@ -60,7 +60,6 @@ import { colors as importedColors } from '../../../styles/common';
 import OrderDetails from '../../UI/Ramp/Views/OrderDetails';
 import SendTransaction from '../../UI/Ramp/Views/SendTransaction';
 import TabBar from '../../../component-library/components/Navigation/TabBar';
-import BrowserUrlModal from '../../Views/BrowserUrlModal';
 ///: BEGIN:ONLY_INCLUDE_IF(external-snaps)
 import { SnapsSettingsList } from '../../Views/Snaps/SnapsSettingsList';
 import { SnapSettings } from '../../Views/Snaps/SnapSettings';
@@ -212,11 +211,10 @@ const BrowserFlow = () => (
       cardStyle: { backgroundColor: importedColors.transparent },
     }}
   >
-    <Stack.Screen name={Routes.BROWSER.VIEW} component={Browser} />
     <Stack.Screen
-      name={Routes.BROWSER.URL_MODAL}
-      component={BrowserUrlModal}
-      options={{ animationEnabled: false, headerShown: false }}
+      name={Routes.BROWSER.VIEW}
+      component={Browser}
+      options={{ headerShown: false }}
     />
   </Stack.Navigator>
 );

app/components/UI/BrowserUrlBar/BrowserUrlBar.styles.ts

@@ -1,17 +1,60 @@
 import { StyleSheet } from 'react-native';
-
 import { Theme } from '../../../util/theme/models';
+import { fontStyles } from '../../../styles/common';
+import Device from '../../../util/device';
 
-const styleSheet = (params: { theme: Theme }) =>
+const styleSheet = ({
+  theme: { colors },
+  vars: { isUrlBarFocused },
+}: {
+  theme: Theme;
+  vars: { isUrlBarFocused: boolean };
+}) =>
   StyleSheet.create({
     main: {
       flexDirection: 'row',
       alignItems: 'center',
+      flex: 1,
+      borderRadius: 999,
+      marginHorizontal: 16,
+      backgroundColor: isUrlBarFocused
+        ? colors.background.alternative
+        : colors.background.default,
+    },
+    connectionIcon: {
+      marginRight: 8,
+    },
+    textInputWrapper: {
+      flex: 1,
+    },
+    textInput: {
+      flex: 1,
+      height: 44,
+      paddingVertical: 0,
+      margin: 0,
+      paddingLeft: isUrlBarFocused ? 16 : 0,
+      ...fontStyles.normal,
+      fontSize: Device.isAndroid() ? 16 : 14,
+      color: colors.text.default,
+    },
+    browserUrlBarWrapper: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    clearButton: {
+      marginRight: 8,
+      marginLeft: 4,
+    },
+    cancelButton: {
+      marginRight: 16,
+      justifyContent: 'center',
     },
-    text: {
-      marginLeft: 8,
-      color: params.theme.colors.text.alternative,
+    cancelButtonText: {
+      fontSize: 14,
+      color: colors.primary.default,
+      ...fontStyles.normal,
     },
+    rightButton: { height: 50, justifyContent: 'center' },
   });
 
 export default styleSheet;