chore: Convert browser tab to typescript (#12740)

## **Description**

Refactor of browser tab to typescript 

Please visit this issue that includes a bigger description:
MetaMask/mobile-planning#2087


## **Related issues**

Fixes:

## **Manual testing steps**

1. Go to this page...
2.
3.

## **Screenshots/Recordings**

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

### **Before**

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

### **After**

<!-- [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.

---------

Co-authored-by: Cal-L <cleun007@gmail.com>
Co-authored-by: João Loureiro <175489935+joaoloureirop@users.noreply.github.com>
Co-authored-by: Cal Leung <cal.leung@consensys.net>
Co-authored-by: metamaskbot <metamaskbot@users.noreply.github.com>

Author: 4 people

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;