Merge branch 'main' into marketing-consent-tracking-bug

MetaMask · Jan 16, 2025 · 1bb2e93 · 1bb2e93
2 parents 6954b0c + 1f2c1a2
commit 1bb2e93
Show file tree

Hide file tree

Showing 267 changed files with 4,085 additions and 2,193 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -77,7 +77,12 @@ module.exports = {
       files: [
         'app/components/UI/Name/**/*.{js,ts,tsx}',
         'app/components/UI/SimulationDetails/**/*.{js,ts,tsx}',
-        'app/components/hooks/DisplayName/**/*.{js,ts,tsx}'
+        'app/components/hooks/DisplayName/**/*.{js,ts,tsx}',
+        'app/components/Views/confirmations/components/Confirm/DataTree/**/*.{js,ts,tsx}',
+        'app/components/Views/confirmations/components/Confirm/Info/**/*.{js,ts,tsx}',
+        'app/components/Views/confirmations/components/PersonalSign/**/*.{js,ts,tsx}',
+        'app/components/Views/confirmations/components/SignatureRequest/**/*.{js,ts,tsx}',
+        'app/components/Views/confirmations/components/TypedSign/**/*.{js,ts,tsx}',
       ],
       rules: {
         'no-restricted-syntax': [
@@ -92,7 +97,7 @@ module.exports = {
               'selectProviderType',
               'selectRpcUrl',
               'selectSelectedNetworkClientId',
-              'selectTicker'
+              'selectTicker',
             ]
               .map((method) => `(${method})`)
               .join('|')}/]`,

diff --git a/app/__mocks__/pngMock.js b/app/__mocks__/pngMock.js
@@ -1 +1,3 @@
-export default { uri: 'MockImage' };
+// When required, assets in React Native returns a number
+// eslint-disable-next-line import/no-commonjs
+module.exports = 1;
diff --git a/app/component-library/components-temp/Buttons/ButtonPill/ButtonPill.styles.ts b/app/component-library/components-temp/Buttons/ButtonPill/ButtonPill.styles.ts
@@ -0,0 +1,49 @@
+// Third party dependencies.
+import { StyleSheet } from 'react-native';
+
+// External dependencies.
+import { Theme } from '../../../../util/theme/models';
+
+/**
+ * Style sheet input parameters.
+ */
+export interface ButtonPillStyleSheetVars {
+  isDisabled: boolean;
+  isPressed: boolean;
+}
+
+/**
+ * Style sheet function for ButtonPill component
+ *
+ * @param params Style sheet params
+ * @param params.theme Theme object
+ * @param params.vars Arbitrary inputs this style sheet depends on
+ * @returns StyleSheet object
+ */
+const styleSheet = (params: {
+  theme: Theme;
+  vars: ButtonPillStyleSheetVars;
+}) => {
+  const {
+    theme: { colors },
+    vars: { isDisabled, isPressed }
+  } = params;
+
+  return StyleSheet.create({
+    base: {
+      backgroundColor: colors.background.alternative,
+      color: colors.text.default,
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 99,
+      opacity: isDisabled ? 0.5 : 1,
+      ...(isPressed && {
+        backgroundColor: colors.background.alternativePressed,
+      }),
+    },
+  });
+};
+
+export default styleSheet;
diff --git a/app/component-library/components-temp/Buttons/ButtonPill/ButtonPill.test.tsx b/app/component-library/components-temp/Buttons/ButtonPill/ButtonPill.test.tsx
@@ -0,0 +1,15 @@
+// Third party dependencies.
+import React from 'react';
+import { render } from '@testing-library/react-native';
+
+// Internal dependencies.
+import ButtonPill from './ButtonPill';
+
+describe('ButtonPill', () => {
+  it('should render correctly', () => {
+    const { toJSON } = render(
+      <ButtonPill onPress={jest.fn} />,
+    );
+    expect(toJSON()).toMatchSnapshot();
+  });
+});
diff --git a/app/component-library/components-temp/Buttons/ButtonPill/ButtonPill.tsx b/app/component-library/components-temp/Buttons/ButtonPill/ButtonPill.tsx
@@ -0,0 +1,69 @@
+// Third party dependencies.
+import React, { useCallback, useState } from 'react';
+import { GestureResponderEvent, TouchableOpacity, TouchableOpacityProps } from 'react-native';
+
+// External dependencies.
+import { useStyles } from '../../../hooks';
+
+// Internal dependencies.
+import stylesheet from './ButtonPill.styles';
+
+/**
+ * ButtonPill component props.
+ */
+export interface ButtonPillProps extends TouchableOpacityProps {
+  /**
+   * Optional param to disable the button.
+   */
+  isDisabled?: boolean;
+}
+
+const ButtonPill = ({
+  onPress,
+  onPressIn,
+  onPressOut,
+  style,
+  isDisabled = false,
+  children,
+  ...props
+}: ButtonPillProps) => {
+  const [isPressed, setIsPressed] = useState(false);
+  const { styles } = useStyles(stylesheet, {
+    style,
+    isPressed,
+    isDisabled,
+  });
+
+  const triggerOnPressedIn = useCallback(
+    (e: GestureResponderEvent) => {
+      setIsPressed(true);
+      onPressIn?.(e);
+    },
+    [setIsPressed, onPressIn],
+  );
+
+  const triggerOnPressedOut = useCallback(
+    (e: GestureResponderEvent) => {
+      setIsPressed(false);
+      onPressOut?.(e);
+    },
+    [setIsPressed, onPressOut],
+  );
+
+  return (
+    <TouchableOpacity
+      style={styles.base}
+      onPress={!isDisabled ? onPress : undefined}
+      onPressIn={!isDisabled ? triggerOnPressedIn : undefined}
+      onPressOut={!isDisabled ? triggerOnPressedOut : undefined}
+      accessible
+      activeOpacity={1}
+      disabled={isDisabled}
+      {...props}
+    >
+      {children}
+    </TouchableOpacity>
+  );
+};
+
+export default ButtonPill;
diff --git a/...mponent-library/components-temp/Buttons/ButtonPill/__snapshots__/ButtonPill.test.tsx.snap b/...mponent-library/components-temp/Buttons/ButtonPill/__snapshots__/ButtonPill.test.tsx.snap
@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ButtonPill should render correctly 1`] = `
+<TouchableOpacity
+  accessible={true}
+  activeOpacity={1}
+  disabled={false}
+  onPress={[Function]}
+  onPressIn={[Function]}
+  onPressOut={[Function]}
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "#f2f4f6",
+      "borderRadius": 99,
+      "color": "#141618",
+      "justifyContent": "center",
+      "opacity": 1,
+      "paddingHorizontal": 8,
+      "paddingVertical": 4,
+    }
+  }
+/>
+`;
diff --git a/app/component-library/components-temp/Buttons/ButtonPill/index.ts b/app/component-library/components-temp/Buttons/ButtonPill/index.ts
@@ -0,0 +1 @@
+export { default } from './ButtonPill';
diff --git a/app/component-library/components/Badges/Badge/__snapshots__/Badge.test.tsx.snap b/app/component-library/components/Badges/Badge/__snapshots__/Badge.test.tsx.snap
@@ -2,13 +2,7 @@
 
 exports[`Badge should render badge network given the badge network variant 1`] = `
 <BadgeNetwork
-  imageSource={
-    {
-      "default": {
-        "uri": "MockImage",
-      },
-    }
-  }
+  imageSource={1}
   isScaled={true}
   name="Ethereum"
   testID="badge-badgenetwork"

diff --git a/...ry/components/Badges/Badge/variants/BadgeNetwork/__snapshots__/BadgeNetwork.test.tsx.snap b/...ry/components/Badges/Badge/variants/BadgeNetwork/__snapshots__/BadgeNetwork.test.tsx.snap
@@ -46,13 +46,7 @@ exports[`BadgeNetwork should render BadgeNetwork 1`] = `
     <Image
       onError={[Function]}
       resizeMode="contain"
-      source={
-        {
-          "default": {
-            "uri": "MockImage",
-          },
-        }
-      }
+      source={1}
       style={
         {
           "height": 32,

diff --git a/...component-library/components/Badges/BadgeWrapper/__snapshots__/BadgeWrapper.test.tsx.snap b/...component-library/components/Badges/BadgeWrapper/__snapshots__/BadgeWrapper.test.tsx.snap
@@ -53,13 +53,7 @@ exports[`BadgeWrapper should render BadgeWrapper correctly 1`] = `
     }
   >
     <Badge
-      imageSource={
-        {
-          "default": {
-            "uri": "MockImage",
-          },
-        }
-      }
+      imageSource={1}
       isScaled={true}
       name="Ethereum"
       variant="network"

diff --git a/...ibrary/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap b/...ibrary/components/Banners/Banner/variants/BannerTip/__snapshots__/BannerTip.test.tsx.snap
@@ -31,11 +31,7 @@ exports[`BannerTip should render default settings correctly 1`] = `
     >
       <Image
         resizeMode="contain"
-        source={
-          {
-            "uri": "MockImage",
-          }
-        }
+        source={1}
         style={
           {
             "height": 55,

diff --git a/app/components/Base/StatusText.js b/app/components/Base/StatusText.js
@@ -17,7 +17,7 @@ const styles = StyleSheet.create({
 
 export const ConfirmedText = (props) => (
   <Text
-    testID={CommonSelectorsIDs.STATUS_CONFIRMED}
+    testID={CommonSelectorsIDs.TRANSACTION_STATUS}
     bold
     green
     style={styles.status}
@@ -38,6 +38,7 @@ export const FailedText = (props) => {
   const { colors } = useTheme();
   return (
     <Text
+      testID={CommonSelectorsIDs.TRANSACTION_STATUS}
       bold
       style={[styles.status, { color: colors.error.default }]}
       {...props}

diff --git a/app/components/UI/AccountFromToInfoCard/__snapshots__/AccountFromToInfoCard.test.tsx.snap b/app/components/UI/AccountFromToInfoCard/__snapshots__/AccountFromToInfoCard.test.tsx.snap
@@ -288,13 +288,7 @@ exports[`AccountFromToInfoCard should match snapshot 1`] = `
                   <Image
                     onError={[Function]}
                     resizeMode="contain"
-                    source={
-                      {
-                        "default": {
-                          "uri": "MockImage",
-                        },
-                      }
-                    }
+                    source={1}
                     style={
                       {
                         "height": 32,

diff --git a/app/components/UI/AccountRightButton/__snapshots__/index.test.tsx.snap b/app/components/UI/AccountRightButton/__snapshots__/index.test.tsx.snap
@@ -543,13 +543,7 @@ exports[`AccountRightButton should render correctly 1`] = `
                               <Image
                                 onError={[Function]}
                                 resizeMode="contain"
-                                source={
-                                  {
-                                    "default": {
-                                      "uri": "MockImage",
-                                    },
-                                  }
-                                }
+                                source={1}
                                 style={
                                   {
                                     "height": 32,

diff --git a/app/components/UI/AssetOverview/AssetOverview.tsx b/app/components/UI/AssetOverview/AssetOverview.tsx
@@ -386,7 +386,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
     }
   } else {
     mainBalance = `${balance} ${asset.isETH ? asset.ticker : asset.symbol}`;
-    secondaryBalance = exchangeRate ? asset.balanceFiat : '';
+    secondaryBalance = asset.balanceFiat || '';
   }
 
   let currentPrice = 0;

diff --git a/app/components/UI/AssetOverview/Balance/Balance.tsx b/app/components/UI/AssetOverview/Balance/Balance.tsx
@@ -29,7 +29,6 @@ import Text, {
 } from '../../../../component-library/components/Texts/Text';
 import { TokenI } from '../../Tokens/types';
 import { useNavigation } from '@react-navigation/native';
-import { isPooledStakingFeatureEnabled } from '../../Stake/constants';
 import StakingBalance from '../../Stake/components/StakingBalance/StakingBalance';
 import {
   PopularList,
@@ -167,9 +166,7 @@ const Balance = ({ asset, mainBalance, secondaryBalance }: BalanceProps) => {
           {asset.name || asset.symbol}
         </Text>
       </AssetElement>
-      {isPooledStakingFeatureEnabled() && asset?.isETH && (
-        <StakingBalance asset={asset} />
-      )}
+      {asset?.isETH && <StakingBalance asset={asset} />}
     </View>
   );
 };

diff --git a/app/components/UI/AssetOverview/Balance/__snapshots__/index.test.tsx.snap b/app/components/UI/AssetOverview/Balance/__snapshots__/index.test.tsx.snap
@@ -146,11 +146,7 @@ exports[`Balance should render correctly with a fiat balance 1`] = `
             <Image
               onError={[Function]}
               resizeMode="contain"
-              source={
-                {
-                  "uri": "MockImage",
-                }
-              }
+              source={1}
               style={
                 {
                   "height": 32,
@@ -376,11 +372,7 @@ exports[`Balance should render correctly without a fiat balance 1`] = `
             <Image
               onError={[Function]}
               resizeMode="contain"
-              source={
-                {
-                  "uri": "MockImage",
-                }
-              }
+              source={1}
               style={
                 {
                   "height": 32,