Merge branch 'main' into feat/1653-first-feature-flag-poc

MetaMask · Oct 3, 2024 · 70c9251 · 70c9251
2 parents 53a8770 + aef9a93
commit 70c9251
Show file tree

Hide file tree

Showing 33 changed files with 744 additions and 506 deletions.
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -92,3 +92,12 @@ app/components/Views/DetectedTokens @MetaMask/metamask-assets
 app/components/Views/NFTAutoDetectionModal @MetaMask/metamask-assets
 app/components/Views/NftDetails @MetaMask/metamask-assets
 app/reducers/collectibles @MetaMask/metamask-assets
+
+# UX Team
+app/components                       @MetaMask/wallet-ux
+app/reducers/experimentalSettings    @MetaMask/wallet-ux
+app/reducers/modals                  @MetaMask/wallet-ux
+app/reducers/navigation              @MetaMask/wallet-ux
+app/reducers/onboarding              @MetaMask/wallet-ux
+app/reducers/privacy                 @MetaMask/wallet-ux
+app/reducers/settings                @MetaMask/wallet-ux
diff --git a/...nts/Icons/Icon/scripts/generate-assets.js → ...nts/Icons/Icon/scripts/generate-assets.ts b/...nts/Icons/Icon/scripts/generate-assets.js → ...nts/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('-')

diff --git a/app/components/Base/ListItem.js → app/components/Base/ListItem.tsx b/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,
-};
diff --git a/app/components/Base/ModalHandler.js → app/components/Base/ModalHandler.tsx b/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') {

diff --git a/app/components/UI/AccountRightButton/index.tsx b/app/components/UI/AccountRightButton/index.tsx
@@ -29,6 +29,7 @@ import { MetaMetricsEvents } from '../../../core/Analytics';
 import { AccountOverviewSelectorsIDs } from '../../../../e2e/selectors/AccountOverview.selectors';
 import { useMetrics } from '../../../components/hooks/useMetrics';
 import { useNetworkInfo } from '../../../selectors/selectedNetworkController';
+import UrlParser from 'url-parse';
 
 const styles = StyleSheet.create({
   leftButton: {
@@ -138,7 +139,7 @@ const AccountRightButton = ({
   const currentUrl = route.params?.url;
   let hostname;
   if (currentUrl) {
-    hostname = new URL(currentUrl).hostname;
+    hostname = new UrlParser(currentUrl)?.hostname;
   }
 
   const { networkName, networkImageSource } = useNetworkInfo(hostname);

diff --git a/app/components/UI/GenericButton/index.ios.js → ...components/UI/GenericButton/index.ios.tsx b/app/components/UI/GenericButton/index.ios.js → ...components/UI/GenericButton/index.ios.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-import { ViewPropTypes, TouchableOpacity } from 'react-native';
+import { TouchableOpacity, ViewStyle, GestureResponderEvent } from 'react-native';
 
 /**
  * @deprecated The `<GenericButton>` component has been deprecated in favor of the new `<Button>` component from the component-library.
@@ -10,31 +9,32 @@ import { ViewPropTypes, TouchableOpacity } from 'react-native';
  * If you would like to help with the replacement of the old `Button` component, please submit a pull request against this GitHub issue:
  * {@link https://github.com/MetaMask/metamask-mobile/issues/8107}
  */
-const GenericButton = (props) => (
-  <TouchableOpacity
-    onPress={props.onPress}
-    style={props.style}
-    delayPressIn={50}
-  >
-    {props.children}
-  </TouchableOpacity>
-);
 
-GenericButton.propTypes = {
+interface GenericButtonProps {
   /**
    * Children components of the GenericButton
    * it can be a text node, an image, or an icon
    * or an Array with a combination of them
    */
-  children: PropTypes.any,
+  children?: React.ReactNode;
   /**
    * Styles to be applied to the GenericButton
    */
-  style: ViewPropTypes.style,
+  style?: ViewStyle;
   /**
    * Function to be called on press
    */
-  onPress: PropTypes.func,
-};
+  onPress?: (event: GestureResponderEvent) => void;
+}
+
+const GenericButton: React.FC<GenericButtonProps> = (props) => (
+  <TouchableOpacity
+    onPress={props.onPress}
+    style={props.style}
+    delayPressIn={50}
+  >
+    {props.children}
+  </TouchableOpacity>
+);
 
 export default GenericButton;
diff --git a/app/components/Views/MediaPlayer/Loader.js → app/components/Views/MediaPlayer/Loader.tsx b/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;
diff --git a/app/components/Views/SDK/SDKSessionModal/SDKSessionModal.tsx b/app/components/Views/SDK/SDKSessionModal/SDKSessionModal.tsx
@@ -111,12 +111,6 @@ const SDKSessionModal = ({ route }: SDKSEssionMoodalProps) => {
     [accounts, permittedAccountsAddresses],
   );
 
-  DevLogger.log(`permittedAccountsAddresses`, permittedAccountsAddresses);
-  DevLogger.log(
-    `permittedAccounts state`,
-    JSON.stringify(permittedAccountsList, null, 2),
-  );
-
   useEffect(() => {
     if (channelId) {
       const origin = channelId;

diff --git a/app/components/Views/SDK/SDKSessionsManager/SDKSessionItem.tsx b/app/components/Views/SDK/SDKSessionsManager/SDKSessionItem.tsx
@@ -70,9 +70,6 @@ export const SDKSessionItem = ({
     string[]
   >([]);
 
-  DevLogger.log(
-    `Rendering SDKSessionItem connected=${connection.connected} ${connection.id}`,
-  );
   useEffect(() => {
     let _sessionName = connection.id;
 

diff --git a/app/core/BackgroundBridge/BackgroundBridge.js b/app/core/BackgroundBridge/BackgroundBridge.js
@@ -272,7 +272,7 @@ export class BackgroundBridge extends EventEmitter {
     try {
       let approvedAccounts = [];
       DevLogger.log(
-        `notifySelectedAddressChanged: ${selectedAddress} wc=${this.isWalletConnect} url=${this.url}`,
+        `notifySelectedAddressChanged: ${selectedAddress} channelId=${this.channelId} wc=${this.isWalletConnect} url=${this.url}`,
       );
       if (this.isWalletConnect) {
         approvedAccounts = await getPermittedAccounts(this.url);
@@ -294,15 +294,21 @@ export class BackgroundBridge extends EventEmitter {
             (addr) => addr.toLowerCase() !== selectedAddress.toLowerCase(),
           ),
         ];
+
+        DevLogger.log(
+          `notifySelectedAddressChanged url: ${this.url} hostname: ${this.hostname}: ${selectedAddress}`,
+          approvedAccounts,
+        );
+        this.sendNotification({
+          method: NOTIFICATION_NAMES.accountsChanged,
+          params: approvedAccounts,
+        });
+      } else {
+        DevLogger.log(
+          `notifySelectedAddressChanged: selectedAddress ${selectedAddress} not found in approvedAccounts`,
+          approvedAccounts,
+        );
       }
-      DevLogger.log(
-        `notifySelectedAddressChanged url: ${this.url} hostname: ${this.hostname}: ${selectedAddress}`,
-        approvedAccounts,
-      );
-      this.sendNotification({
-        method: NOTIFICATION_NAMES.accountsChanged,
-        params: approvedAccounts,
-      });
     } catch (err) {
       console.error(`notifySelectedAddressChanged: ${err}`);
     }