chore(js-ts): Convert app/components/UI/Fox/index.js to TypeScript (#…

…11556)

# PR Title
chore(js-ts): Convert app/components/UI/Fox/index.js to TypeScript

# Description
This PR converts the `app/components/UI/Fox/index.js` file to
TypeScript. The conversion involved renaming the file to `index.tsx`,
creating a `FoxProps` interface for the component props, and updating
the `forwardedRef` type for compatibility with `WebView`. Additionally,
the `Theme` import was adjusted to ensure correct usage of theme colors.

# Related Issues
- N/A

# Manual Testing Steps
1. Verify that the `Fox` component renders correctly in the application.
2. Ensure that the component's functionality remains unchanged after the
conversion.
3. Check for any TypeScript errors or warnings in the console.

# Checklist
- [x] Converted the file to TypeScript.
- [x] Created a `FoxProps` interface for component props.
- [x] Updated the `forwardedRef` type for compatibility with `WebView`.
- [x] Adjusted the `Theme` import for correct usage of theme colors.
- [x] Verified that the component renders correctly and functions as
expected.
- [x] Ensured no TypeScript errors or warnings are present.

[This Devin
run](https://preview.devin.ai/devin/99a5c8fdc33c4d4ca62c8e1cdecb7d09)
was requested by naveen.


If you have any feedback, you can leave comments in the PR and I'll
address them in the app!

---------

Co-authored-by: devin-ai-integration[bot] <158243242+devin-ai-integration[bot]@users.noreply.github.com>
Co-authored-by: Kylan Hurt <kylanhurt@users.noreply.github.com>

app/components/UI/Fox/index.js → app/components/UI/Fox/index.tsx

@@ -1,29 +1,36 @@
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { StyleSheet } from 'react-native';
-import { WebView } from '@metamask/react-native-webview';
+import { StyleProp, StyleSheet, ViewStyle } from 'react-native';
+import { WebView, WebViewProps } from '@metamask/react-native-webview';
 import { useTheme } from '../../../util/theme';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
   withTiming,
 } from 'react-native-reanimated';
+import { Theme } from '@metamask/design-tokens';
 
-const createStyles = (colors) =>
+const createStyles = (colors: Theme['colors']) =>
   StyleSheet.create({
     webView: {
       flex: 1,
       backgroundColor: colors.background.default,
     },
   });
 
+interface FoxProps extends Omit<WebViewProps, 'ref'> {
+  style?: StyleProp<ViewStyle>;
+  customStyle?: string;
+  customContent?: string;
+  forwardedRef?: React.Ref<WebView>;
+}
+
 function Fox({
   style,
   customStyle,
   customContent = '',
   forwardedRef,
   ...props
-}) {
+}: FoxProps) {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   const opacityControl = useSharedValue(0);
@@ -1543,16 +1550,10 @@ function Fox({
   );
 }
 
-Fox.propTypes = {
-  style: PropTypes.object,
-  customStyle: PropTypes.string,
-  customContent: PropTypes.string,
-  forwardedRef: PropTypes.any,
-};
+const FoxWithRef = forwardRef<WebView, Omit<FoxProps, 'forwardedRef'>>(
+  (props, ref) => <Fox {...props} forwardedRef={ref} />,
+);
 
-const FoxWithRef = forwardRef((props, ref) => (
-  <Fox {...props} forwardedRef={ref} />
-));
 FoxWithRef.displayName = 'FoxWithRef';
 
 export default FoxWithRef;