Merge branch 'main' into test-fix-the-unit-tests-that-were-breaking-t…

…he-build-with-ff-on
MetaMask · Nov 27, 2024 · 7813b25 · 7813b25
2 parents 6f87244 + eabb61a
commit 7813b25
Show file tree

Hide file tree

Showing 31 changed files with 736 additions and 298 deletions.
diff --git a/app/components/UI/EditGasFee1559/__snapshots__/index.test.tsx.snap b/app/components/UI/EditGasFee1559/__snapshots__/index.test.tsx.snap
@@ -135,7 +135,40 @@ exports[`EditGasFee1559 should render correctly 1`] = `
             <View>
               <HorizontalSelector
                 onPress={[Function]}
-                options={[Function]}
+                options={
+                  [
+                    {
+                      "label": <Text
+                        bold={true}
+                        primary={false}
+                      >
+                        Low
+                      </Text>,
+                      "name": "low",
+                      "topLabel": false,
+                    },
+                    {
+                      "label": <Text
+                        bold={true}
+                        primary={false}
+                      >
+                        Market
+                      </Text>,
+                      "name": "medium",
+                      "topLabel": false,
+                    },
+                    {
+                      "label": <Text
+                        bold={true}
+                        primary={false}
+                      >
+                        Aggressive
+                      </Text>,
+                      "name": "high",
+                      "topLabel": false,
+                    },
+                  ]
+                }
               />
             </View>
             <View

diff --git a/app/components/UI/EditGasFee1559/index.js b/app/components/UI/EditGasFee1559/index.js
@@ -398,7 +398,7 @@ const EditGasFee1559 = ({
           <HorizontalSelector
             selected={selectedOption}
             onPress={selectOption}
-            options={renderOptions}
+            options={renderOptions()}
           />
         </View>
         <View style={styles.advancedOptionsContainer}>

diff --git a/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx b/app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx
@@ -38,7 +38,7 @@ const StakeInputView = () => {
     handleCurrencySwitch,
     currencyToggleValue,
     percentageOptions,
-    handleAmountPress,
+    handleQuickAmountPress,
     handleKeypadChange,
     calculateEstimatedAnnualRewards,
     estimatedAnnualRewards,
@@ -174,8 +174,26 @@ const StakeInputView = () => {
       </View>
       <QuickAmounts
         amounts={percentageOptions}
-        onAmountPress={handleAmountPress}
-        onMaxPress={handleMaxButtonPress}
+        onAmountPress={({ value }: { value: number }) =>
+          withMetaMetrics(handleQuickAmountPress, {
+            event: MetaMetricsEvents.STAKE_INPUT_QUICK_AMOUNT_CLICKED,
+            properties: {
+              location: 'StakeInputView',
+              amount: value,
+              // onMaxPress is called instead when it's defined and the max is clicked.
+              is_max: false,
+              mode: isEth ? 'native' : 'fiat',
+            },
+          })({ value })
+        }
+        onMaxPress={withMetaMetrics(handleMaxButtonPress, {
+          event: MetaMetricsEvents.STAKE_INPUT_QUICK_AMOUNT_CLICKED,
+          properties: {
+            location: 'StakeInputView',
+            is_max: true,
+            mode: isEth ? 'native' : 'fiat',
+          },
+        })}
       />
       <Keypad
         value={isEth ? amountEth : fiatAmount}

diff --git a/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx b/app/components/UI/Stake/Views/UnstakeInputView/UnstakeInputView.tsx
@@ -25,6 +25,7 @@ const UnstakeInputView = () => {
   const title = strings('stake.unstake_eth');
   const navigation = useNavigation();
   const { styles, theme } = useStyles(styleSheet, {});
+
   const { trackEvent, createEventBuilder } = useMetrics();
 
   const {
@@ -38,7 +39,7 @@ const UnstakeInputView = () => {
     handleCurrencySwitch,
     currencyToggleValue,
     percentageOptions,
-    handleAmountPress,
+    handleQuickAmountPress,
     handleKeypadChange,
     stakedBalanceValue,
   } = useUnstakingInputHandlers();
@@ -111,7 +112,17 @@ const UnstakeInputView = () => {
       <UnstakeInputViewBanner style={styles.unstakeBanner} />
       <QuickAmounts
         amounts={percentageOptions}
-        onAmountPress={handleAmountPress}
+        onAmountPress={({ value }: { value: number }) =>
+          withMetaMetrics(handleQuickAmountPress, {
+            event: MetaMetricsEvents.UNSTAKE_INPUT_QUICK_AMOUNT_CLICKED,
+            properties: {
+              location: 'UnstakeInputView',
+              amount: value,
+              is_max: value === 1,
+              mode: isEth ? 'native' : 'fiat',
+            },
+          })({ value })
+        }
       />
       <Keypad
         value={isEth ? amountEth : fiatAmount}

diff --git a/app/components/UI/Stake/components/StakingBalance/StakingBanners/ClaimBanner/ClaimBanner.tsx b/app/components/UI/Stake/components/StakingBalance/StakingBanners/ClaimBanner/ClaimBanner.tsx
@@ -19,16 +19,19 @@ import { useSelector } from 'react-redux';
 import { selectSelectedInternalAccount } from '../../../../../../../selectors/accountsController';
 import usePooledStakes from '../../../../hooks/usePooledStakes';
 import Engine from '../../../../../../../core/Engine';
-import { MetaMetricsEvents, useMetrics } from '../../../../../../hooks/useMetrics';
+import {
+  MetaMetricsEvents,
+  useMetrics,
+} from '../../../../../../hooks/useMetrics';
 
 type StakeBannerProps = Pick<BannerProps, 'style'> & {
   claimableAmount: string;
 };
 
 const ClaimBanner = ({ claimableAmount, style }: StakeBannerProps) => {
   const { styles } = useStyles(styleSheet, {});
-
   const { trackEvent, createEventBuilder } = useMetrics();
+
   const [isSubmittingClaimTransaction, setIsSubmittingClaimTransaction] =
     useState(false);
 
@@ -44,10 +47,10 @@ const ClaimBanner = ({ claimableAmount, style }: StakeBannerProps) => {
 
       trackEvent(
         createEventBuilder(MetaMetricsEvents.STAKE_CLAIM_BUTTON_CLICKED)
-        .addProperties({
-          location: 'Token Details'
-        })
-        .build()
+          .addProperties({
+            location: 'Token Details',
+          })
+          .build(),
       );
 
       setIsSubmittingClaimTransaction(true);

diff --git a/app/components/UI/Stake/components/StakingBalance/StakingButtons/StakingButtons.tsx b/app/components/UI/Stake/components/StakingBalance/StakingButtons/StakingButtons.tsx
@@ -33,27 +33,27 @@ const StakingButtons = ({
     });
     trackEvent(
       createEventBuilder(MetaMetricsEvents.STAKE_WITHDRAW_BUTTON_CLICKED)
-      .addProperties({
-        location: 'Token Details',
-        text: 'Unstake',
-        token_symbol: 'ETH',
-        chain_id: chainId,
-      })
-      .build()
+        .addProperties({
+          location: 'Token Details',
+          text: 'Unstake',
+          token_symbol: 'ETH',
+          chain_id: chainId,
+        })
+        .build(),
     );
   };
 
   const onStakePress = () => {
     navigate('StakeScreens', { screen: Routes.STAKING.STAKE });
     trackEvent(
       createEventBuilder(MetaMetricsEvents.STAKE_BUTTON_CLICKED)
-      .addProperties({
-        location: 'Token Details',
-        text: 'Stake',
-        token_symbol: 'ETH',
-        chain_id: chainId,
-      })
-      .build()
+        .addProperties({
+          location: 'Token Details',
+          text: 'Stake',
+          token_symbol: 'ETH',
+          chain_id: chainId,
+        })
+        .build(),
     );
   };
 

diff --git a/app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx b/app/components/UI/Stake/components/StakingBalance/StakingCta/StakingCta.tsx
@@ -12,17 +12,16 @@ import Button, {
 import { strings } from '../../../../../../../locales/i18n';
 import { useNavigation } from '@react-navigation/native';
 import Routes from '../../../../../../constants/navigation/Routes';
-import { useMetrics, MetaMetricsEvents } from '../../../../../hooks/useMetrics';
+import { MetaMetricsEvents, useMetrics } from '../../../../../hooks/useMetrics';
 
 interface StakingCtaProps extends Pick<ViewProps, 'style'> {
   estimatedRewardRate: string;
 }
 
 const StakingCta = ({ estimatedRewardRate, style }: StakingCtaProps) => {
   const { styles } = useStyles(styleSheet, {});
-  const { trackEvent, createEventBuilder } = useMetrics();
-
   const { navigate } = useNavigation();
+  const { trackEvent, createEventBuilder } = useMetrics();
 
   const navigateToLearnMoreModal = () => {
     navigate('StakeModals', {

diff --git a/app/components/UI/Stake/components/StakingEarnings/StakingEarnings.test.tsx b/app/components/UI/Stake/components/StakingEarnings/StakingEarnings.test.tsx
@@ -19,16 +19,6 @@ jest.mock('@react-navigation/native', () => {
   };
 });
 
-jest.mock('../../hooks/useStakingEligibility', () => ({
-  __esModule: true,
-  default: () => ({
-    isEligible: true,
-    loading: false,
-    error: null,
-    refreshPooledStakingEligibility: jest.fn(),
-  }),
-}));
-
 jest.mock('../../hooks/useStakingEarnings', () => ({
   __esModule: true,
   default: () => ({
@@ -38,6 +28,7 @@ jest.mock('../../hooks/useStakingEarnings', () => ({
     estimatedAnnualEarningsETH: '2.5 ETH',
     estimatedAnnualEarningsFiat: '$5000',
     isLoadingEarningsData: false,
+    hasStakedPositions: true,
   }),
 }));
 

diff --git a/app/components/UI/Stake/components/StakingEarnings/index.tsx b/app/components/UI/Stake/components/StakingEarnings/index.tsx
@@ -19,7 +19,6 @@ import { isPooledStakingFeatureEnabled } from '../../../Stake/constants';
 import useStakingChain from '../../hooks/useStakingChain';
 import { StakeSDKProvider } from '../../sdk/stakeSdkProvider';
 import useStakingEarnings from '../../hooks/useStakingEarnings';
-import usePooledStakes from '../../hooks/usePooledStakes';
 import SkeletonPlaceholder from 'react-native-skeleton-placeholder';
 import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics';
 import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
@@ -30,15 +29,14 @@ const StakingEarningsContent = () => {
 
   const { openTooltipModal } = useTooltipModal();
 
-  const { hasStakedPositions } = usePooledStakes();
-
   const {
     annualRewardRate,
     lifetimeRewardsETH,
     lifetimeRewardsFiat,
     estimatedAnnualEarningsETH,
     estimatedAnnualEarningsFiat,
     isLoadingEarningsData,
+    hasStakedPositions,
   } = useStakingEarnings();
 
   const onDisplayAnnualRateTooltip = () =>

diff --git a/app/components/UI/Stake/hooks/useInputHandler.ts b/app/components/UI/Stake/hooks/useInputHandler.ts
@@ -13,7 +13,6 @@ import {
   fromWei,
 } from '../../../../util/number';
 import { strings } from '../../../../../locales/i18n';
-import { useMetrics, MetaMetricsEvents } from '../../../hooks/useMetrics';
 
 interface InputHandlerParams {
   balance: BN;
@@ -28,8 +27,6 @@ const useInputHandler = ({ balance }: InputHandlerParams) => {
   const currentCurrency = useSelector(selectCurrentCurrency);
   const conversionRate = useSelector(selectConversionRate) || 1;
 
-  const { trackEvent, createEventBuilder } = useMetrics();
-
   const isNonZeroAmount = useMemo(() => amountWei.gt(new BN(0)), [amountWei]);
 
   const isOverMaximum = useMemo(
@@ -97,7 +94,7 @@ const useInputHandler = ({ balance }: InputHandlerParams) => {
     { value: 1, label: strings('stake.max') },
   ];
 
-  const handleAmountPress = useCallback(
+  const handleQuickAmountPress = useCallback(
     ({ value }: { value: number }) => {
       const percentage = value * 100;
       const amountPercentage = balance.mul(new BN(percentage)).div(new BN(100));
@@ -117,18 +114,8 @@ const useInputHandler = ({ balance }: InputHandlerParams) => {
         2,
       ).toString();
       setFiatAmount(newFiatAmount);
-      trackEvent(
-        createEventBuilder(MetaMetricsEvents.STAKE_INPUT_AMOUNT_CLICKED)
-          .addProperties({
-            location: 'Stake',
-            amount: value,
-            is_max: value === 1,
-            mode: isEth ? 'native' : 'fiat',
-          })
-          .build(),
-      );
     },
-    [balance, conversionRate, createEventBuilder, isEth, trackEvent],
+    [balance, conversionRate],
   );
 
   const handleMaxInput = useCallback(
@@ -149,18 +136,8 @@ const useInputHandler = ({ balance }: InputHandlerParams) => {
         2,
       ).toString();
       setFiatAmount(fiatValue);
-      trackEvent(
-        createEventBuilder(MetaMetricsEvents.STAKE_INPUT_AMOUNT_CLICKED)
-          .addProperties({
-            location: 'Stake',
-            amount: ethValue,
-            is_max: true,
-            mode: isEth ? 'native' : 'fiat',
-          })
-          .build(),
-      );
     },
-    [conversionRate, createEventBuilder, isEth, trackEvent],
+    [conversionRate],
   );
 
   const currencyToggleValue = isEth
@@ -180,7 +157,7 @@ const useInputHandler = ({ balance }: InputHandlerParams) => {
     handleKeypadChange,
     handleCurrencySwitch,
     percentageOptions,
-    handleAmountPress,
+    handleQuickAmountPress,
     currentCurrency,
     conversionRate,
     handleMaxInput,