Merge branch 'main' into duplicate-dapp-transaction-analytics

app/component-library/components/Icons/Icon/scripts/generate-assets.js → app/component-library/components/Icons/Icon/scripts/generate-assets.ts

@@ -1,15 +1,15 @@
 #!/usr/bin/env node
 /* eslint-disable import/no-commonjs, import/no-nodejs-modules, import/no-nodejs-modules, no-console */
-const fs = require('fs');
-const path = require('path');
+import fs from 'fs';
+import path from 'path';
 
 const ASSETS_FOLDER = 'assets';
 const GENERATED_ASSETS_FILE = 'Icon.assets.ts';
 const TYPES_FILE = 'Icon.types.ts';
 const ASSET_EXT = '.svg';
 const TYPES_CONTENT_TO_DETECT = '// DO NOT EDIT - Use generate-assets.js';
 
-const getIconNameInTitleCase = (fileName) =>
+const getIconNameInTitleCase = (fileName: string) =>
   path
     .basename(fileName, ASSET_EXT)
     .split('-')

app/components/Base/ListItem.js → app/components/Base/ListItem.tsx

@@ -1,11 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { StyleSheet, View } from 'react-native';
-import { fontStyles } from '../../styles/common';
+import {
+  StyleSheet,
+  View,
+  ViewProps,
+  TextProps,
+  StyleProp,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
 import Text from './Text';
 import { useTheme } from '../../util/theme';
+import { Theme } from '@metamask/design-tokens';
+import { fontStyles } from '../../styles/common';
 
-const createStyles = (colors) =>
+const createStyles = (colors: Theme['colors']) =>
   StyleSheet.create({
     wrapper: {
       padding: 15,
@@ -54,53 +62,81 @@ const createStyles = (colors) =>
     },
   });
 
-const ListItem = ({ style, ...props }) => {
+interface ListItemProps extends ViewProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+interface ListItemTextProps extends TextProps {
+  style?: StyleProp<TextStyle>;
+}
+
+type ListItemComponent = React.FC<ListItemProps> & {
+  Date: React.FC<ListItemTextProps>;
+  Content: React.FC<ListItemProps>;
+  Actions: React.FC<ListItemProps>;
+  Icon: React.FC<ListItemProps>;
+  Body: React.FC<ListItemProps>;
+  Title: React.FC<ListItemTextProps>;
+  Amounts: React.FC<ListItemProps>;
+  Amount: React.FC<ListItemTextProps>;
+  FiatAmount: React.FC<ListItemTextProps>;
+};
+
+const ListItem: ListItemComponent = ({ style, ...props }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   return <View style={[styles.wrapper, style]} {...props} />;
 };
 
-const ListItemDate = ({ style, ...props }) => {
+const ListItemDate: React.FC<ListItemTextProps> = ({ style, ...props }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   return <Text style={[styles.date, style]} {...props} />;
 };
-const ListItemContent = ({ style, ...props }) => {
+
+const ListItemContent: React.FC<ListItemProps> = ({ style, ...props }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   return <View style={[styles.content, style]} {...props} />;
 };
-const ListItemActions = ({ style, ...props }) => {
+
+const ListItemActions: React.FC<ListItemProps> = ({ style, ...props }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   return <View style={[styles.actions, style]} {...props} />;
 };
-const ListItemIcon = ({ style, ...props }) => {
+
+const ListItemIcon: React.FC<ListItemProps> = ({ style, ...props }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   return <View style={[styles.icon, style]} {...props} />;
 };
-const ListItemBody = ({ style, ...props }) => {
+
+const ListItemBody: React.FC<ListItemProps> = ({ style, ...props }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   return <View style={[styles.body, style]} {...props} />;
 };
-const ListItemTitle = ({ style, ...props }) => {
+
+const ListItemTitle: React.FC<ListItemTextProps> = ({ style, ...props }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   return <Text style={[styles.title, style]} {...props} />;
 };
-const ListItemAmounts = ({ style, ...props }) => {
+
+const ListItemAmounts: React.FC<ListItemProps> = ({ style, ...props }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   return <View style={[styles.amounts, style]} {...props} />;
 };
-const ListItemAmount = ({ style, ...props }) => {
+
+const ListItemAmount: React.FC<ListItemTextProps> = ({ style, ...props }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   return <Text style={[styles.amount, style]} {...props} />;
 };
-const ListItemFiatAmount = ({ style, ...props }) => {
+
+const ListItemFiatAmount: React.FC<ListItemTextProps> = ({ style, ...props }) => {
   const { colors } = useTheme();
   const styles = createStyles(colors);
   return <Text style={[styles.fiatAmount, style]} {...props} />;
@@ -117,39 +153,3 @@ ListItem.Amount = ListItemAmount;
 ListItem.FiatAmount = ListItemFiatAmount;
 
 export default ListItem;
-
-/**
- * Any other external style defined in props will be applied
- */
-const stylePropType = PropTypes.oneOfType([PropTypes.object, PropTypes.array]);
-
-ListItem.propTypes = {
-  style: stylePropType,
-};
-ListItemDate.propTypes = {
-  style: stylePropType,
-};
-ListItemContent.propTypes = {
-  style: stylePropType,
-};
-ListItemActions.propTypes = {
-  style: stylePropType,
-};
-ListItemIcon.propTypes = {
-  style: stylePropType,
-};
-ListItemBody.propTypes = {
-  style: stylePropType,
-};
-ListItemTitle.propTypes = {
-  style: stylePropType,
-};
-ListItemAmounts.propTypes = {
-  style: stylePropType,
-};
-ListItemAmount.propTypes = {
-  style: stylePropType,
-};
-ListItemFiatAmount.propTypes = {
-  style: stylePropType,
-};

app/components/Base/ModalHandler.js → app/components/Base/ModalHandler.tsx

@@ -1,6 +1,16 @@
+import { ReactNode } from 'react';
 import useModalHandler from './hooks/useModalHandler';
 
-function ModalHandler({ children }) {
+interface ModalHandlerProps {
+  children: ((props: {
+    isVisible: boolean;
+    toggleModal: () => void;
+    showModal: () => void;
+    hideModal: () => void;
+  }) => ReactNode);
+}
+
+function ModalHandler({ children }: ModalHandlerProps) {
   const [isVisible, toggleModal, showModal, hideModal] = useModalHandler(false);
 
   if (typeof children === 'function') {

app/components/Views/MediaPlayer/Loader.js → app/components/Views/MediaPlayer/Loader.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import {
   View,
   StyleSheet,
@@ -11,8 +10,9 @@ import FA5Icon from 'react-native-vector-icons/FontAwesome5';
 import AntIcon from 'react-native-vector-icons/AntDesign';
 import { strings } from '../../../../locales/i18n';
 import { useTheme } from '../../../util/theme';
+import { Theme } from '@metamask/design-tokens';
 
-const createStyles = (colors) =>
+const createStyles = (colors: Theme['colors']) =>
   StyleSheet.create({
     container: {
       flex: 1,
@@ -40,10 +40,22 @@ const createStyles = (colors) =>
     },
   });
 
-function Loader({ error, onClose }) {
+interface LoaderProps {
+  error?: boolean;
+  onClose?: () => void;
+  onError?: () => void;
+}
+
+function Loader({ error = false, onClose = () => null, onError = () => null }: LoaderProps) {
   const { colors } = useTheme();
   const styles = createStyles(colors);
 
+  React.useEffect(() => {
+    if (error) {
+      onError();
+    }
+  }, [error, onError]);
+
   return (
     <View style={styles.container}>
       <TouchableOpacity onPress={onClose} style={styles.closeButton}>
@@ -67,13 +79,4 @@ function Loader({ error, onClose }) {
   );
 }
 
-Loader.propTypes = {
-  error: PropTypes.bool,
-  onClose: PropTypes.func,
-};
-
-Loader.defaultProps = {
-  onError: () => null,
-};
-
 export default Loader;

app/util/jsonRpcRequest.js → app/util/jsonRpcRequest.ts

@@ -1,6 +1,7 @@
-import URL from 'url-parse';
+import ParsedURL from 'url-parse';
 // eslint-disable-next-line import/no-nodejs-modules
 import { Buffer } from 'buffer';
+import { JsonRpcParams } from '@metamask/utils';
 
 /**
  * Makes a JSON RPC request to the given URL, with the given RPC method and params.
@@ -11,14 +12,16 @@ import { Buffer } from 'buffer';
  * @returns {Promise<unknown|undefined>} Returns the result of the RPC method call,
  * or throws an error in case of failure.
  */
-export async function jsonRpcRequest(rpcUrl, rpcMethod, rpcParams = []) {
+export async function jsonRpcRequest(rpcUrl: string, rpcMethod: string, rpcParams: JsonRpcParams = []) {
   let fetchUrl = rpcUrl;
-  const headers = {
+  const headers: Record<string, string> = {
     'Content-Type': 'application/json',
   };
 
   // Convert basic auth URL component to Authorization header
-  const { origin, pathname, username, password, search } = new URL(rpcUrl);
+  const parsedUrl = new ParsedURL(rpcUrl);
+  // @ts-expect-error Property 'search' does not exist on type 'URLParse<string>'.
+  const { origin, pathname, username, password, search } = parsedUrl;
   // URLs containing username and password needs special processing
   if (username && password) {
     const encodedAuth = Buffer.from(`${username}:${password}`).toString(