Merge branch 'main' into STAKE-912-mobile-v-7-38-0-crash-when-clickin…

…g-on-staked-ethereum-in-asset-list

app/actions/transaction/index.js

@@ -157,3 +157,17 @@ export function setProposedNonce(proposedNonce) {
     proposedNonce,
   };
 }
+
+export function setMaxValueMode(maxValueMode) {
+  return {
+    type: 'SET_MAX_VALUE_MODE',
+    maxValueMode,
+  };
+}
+
+export function setTransactionValue(value) {
+  return {
+    type: 'SET_TRANSACTION_VALUE',
+    value,
+  };
+}

app/component-library/components/Navigation/TabBar/TabBar.constants.ts

@@ -2,7 +2,7 @@
 
 // Third party dependencies.
 import { IconName } from '../../Icons/Icon';
-
+import Device from '../../../../util/device';
 // Internal dependencies.
 import { IconByTabBarIconKey, TabBarIconKey } from './TabBar.types';
 
@@ -13,3 +13,5 @@ export const ICON_BY_TAB_BAR_ICON_KEY: IconByTabBarIconKey = {
   [TabBarIconKey.Activity]: IconName.Activity,
   [TabBarIconKey.Setting]: IconName.Setting,
 };
+
+export const TAB_BAR_HEIGHT = Device.isAndroid() ? 62 : 48;

app/component-library/components/Navigation/TabBar/TabBar.styles.ts

@@ -7,7 +7,7 @@ import Device from '../../../../util/device';
 
 // Internal dependencies.
 import { TabBarStyleSheetVars } from './TabBar.types';
-
+import { TAB_BAR_HEIGHT } from './TabBar.constants';
 /**
  * Style sheet function for TabBar component.
  *
@@ -39,7 +39,7 @@ const styleSheet = (params: { vars: TabBarStyleSheetVars; theme: Theme }) => {
     base: {
       flexDirection: 'row',
       alignItems: 'center',
-      height: Device.isAndroid() ? 62 : 48,
+      height: TAB_BAR_HEIGHT,
       paddingHorizontal: 16,
       marginBottom: bottomInset,
       backgroundColor: colors.background.default,

app/component-library/components/Toast/Toast.tsx

@@ -40,6 +40,7 @@ import {
 import styles from './Toast.styles';
 import { ToastSelectorsIDs } from '../../../../e2e/selectors/wallet/ToastModal.selectors';
 import { ButtonProps } from '../Buttons/Button/Button.types';
+import { TAB_BAR_HEIGHT } from '../Navigation/TabBar/TabBar.constants';
 
 const visibilityDuration = 2750;
 const animationDuration = 250;
@@ -53,7 +54,7 @@ const Toast = forwardRef((_, ref: React.ForwardedRef<ToastRef>) => {
   const { bottom: bottomNotchSpacing } = useSafeAreaInsets();
   const translateYProgress = useSharedValue(screenHeight);
   const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: translateYProgress.value }],
+    transform: [{ translateY: translateYProgress.value - TAB_BAR_HEIGHT }],
   }));
   const baseStyle: StyleProp<Animated.AnimateStyle<StyleProp<ViewStyle>>> =
     useMemo(

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -11,8 +11,9 @@ import AppConstants from '../../../core/AppConstants';
 import Engine from '../../../core/Engine';
 import {
   selectChainId,
-  selectTicker,
   selectNativeCurrencyByChainId,
+  selectSelectedNetworkClientId,
+  selectTicker,
 } from '../../../selectors/networkController';
 import {
   selectConversionRate,
@@ -58,7 +59,7 @@ import Routes from '../../../constants/navigation/Routes';
 import TokenDetails from './TokenDetails';
 import { RootState } from '../../../reducers';
 import useGoToBridge from '../Bridge/utils/useGoToBridge';
-import SwapsController, { swapsUtils } from '@metamask/swaps-controller';
+import { swapsUtils } from '@metamask/swaps-controller';
 import { MetaMetricsEvents } from '../../../core/Analytics';
 import {
   getDecimalChainId,
@@ -114,6 +115,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
     ? (asset.chainId as Hex)
     : selectedChainId;
   const ticker = isPortfolioViewEnabled() ? nativeCurrency : selectedTicker;
+  const selectedNetworkClientId = useSelector(selectSelectedNetworkClientId);
 
   let currentAddress: Hex;
 
@@ -136,12 +138,12 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   const dispatch = useDispatch();
 
   useEffect(() => {
-    const { SwapsController: SwapsControllerFromEngine } = Engine.context as {
-      SwapsController: SwapsController;
-    };
+    const { SwapsController } = Engine.context;
     const fetchTokenWithCache = async () => {
       try {
-        await SwapsControllerFromEngine.fetchTokenWithCache();
+        await SwapsController.fetchTokenWithCache({
+          networkClientId: selectedNetworkClientId,
+        });
         // TODO: Replace "any" with type
         // eslint-disable-next-line @typescript-eslint/no-explicit-any
       } catch (error: any) {
@@ -152,7 +154,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
       }
     };
     fetchTokenWithCache();
-  }, []);
+  }, [selectedNetworkClientId]);
 
   const onReceive = () => {
     navigation.navigate(Routes.QR_TAB_SWITCHER, {

app/components/UI/Navbar/index.js

@@ -63,6 +63,7 @@ import { toChecksumHexAddress } from '@metamask/controller-utils';
 ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
 import { isBtcAccount } from '../../../core/Multichain/utils';
 ///: END:ONLY_INCLUDE_IF
+import { withMetaMetrics } from '../Stake/utils/metaMetrics/withMetaMetrics';
 
 const trackEvent = (event, params = {}) => {
   MetaMetrics.getInstance().trackEvent(event);
@@ -1949,16 +1950,23 @@ export const getSettingsNavigationOptions = (title, themeColors) => {
  * @param {String} title - Navbar Title.
  * @param {NavigationProp<ParamListBase>} navigation Navigation object returned from useNavigation hook.
  * @param {ThemeColors} themeColors theme.colors returned from useStyles hook.
- * @param {{ backgroundColor?: string, hasCancelButton?: boolean, hasBackButton?: boolean }} [options] - Optional options for navbar.
+ * @param {{ backgroundColor?: string, hasCancelButton?: boolean, hasBackButton?: boolean }} [navBarOptions] - Optional navbar options.
+ * @param {{ cancelButtonEvent?: { event: IMetaMetricsEvent, properties: Record<string, string> }, backButtonEvent?: { event: IMetaMetricsEvent, properties: Record<string, string>} }} [metricsOptions] - Optional metrics options.
  * @returns Staking Navbar Component.
  */
-export function getStakingNavbar(title, navigation, themeColors, options) {
-  const { hasBackButton = true, hasCancelButton = true } = options ?? {};
+export function getStakingNavbar(
+  title,
+  navigation,
+  themeColors,
+  navBarOptions,
+  metricsOptions,
+) {
+  const { hasBackButton = true, hasCancelButton = true } = navBarOptions ?? {};
 
   const innerStyles = StyleSheet.create({
     headerStyle: {
       backgroundColor:
-        options?.backgroundColor ?? themeColors.background.default,
+        navBarOptions?.backgroundColor ?? themeColors.background.default,
       shadowOffset: null,
     },
     headerLeft: {
@@ -1978,6 +1986,28 @@ export function getStakingNavbar(title, navigation, themeColors, options) {
     navigation.goBack();
   }
 
+  function handleBackPress() {
+    if (metricsOptions?.backButtonEvent) {
+      withMetaMetrics(navigationPop, {
+        event: metricsOptions.backButtonEvent.event,
+        properties: metricsOptions.backButtonEvent.properties,
+      });
+    } else {
+      navigationPop();
+    }
+  }
+
+  function handleCancelPress() {
+    if (metricsOptions?.cancelButtonEvent) {
+      withMetaMetrics(navigationPop, {
+        event: metricsOptions.cancelButtonEvent.event,
+        properties: metricsOptions.cancelButtonEvent.properties,
+      });
+    } else {
+      navigationPop();
+    }
+  }
+
   return {
     headerTitle: () => (
       <View style={innerStyles.headerTitle}>
@@ -1990,7 +2020,7 @@ export function getStakingNavbar(title, navigation, themeColors, options) {
         <ButtonIcon
           size={ButtonIconSizes.Lg}
           iconName={IconName.ArrowLeft}
-          onPress={navigationPop}
+          onPress={handleBackPress}
           style={innerStyles.headerLeft}
         />
       ) : (
@@ -1999,7 +2029,7 @@ export function getStakingNavbar(title, navigation, themeColors, options) {
     headerRight: () =>
       hasCancelButton ? (
         <TouchableOpacity
-          onPress={() => navigation.dangerouslyGetParent()?.pop()}
+          onPress={handleCancelPress}
           style={styles.closeButton}
         >
           <Text style={innerStyles.headerButtonText}>

app/components/UI/Stake/Views/StakeConfirmationView/StakeConfirmationView.tsx

@@ -13,6 +13,8 @@ import { strings } from '../../../../../../locales/i18n';
 import { FooterButtonGroupActions } from '../../components/StakingConfirmation/ConfirmationFooter/FooterButtonGroup/FooterButtonGroup.types';
 import UnstakingTimeCard from '../../components/StakingConfirmation/UnstakeTimeCard/UnstakeTimeCard';
 import { ScrollView } from 'react-native-gesture-handler';
+import { MetaMetricsEvents } from '../../../../hooks/useMetrics';
+import { EVENT_LOCATIONS, EVENT_PROVIDERS } from '../../constants/events';
 
 const MOCK_STAKING_CONTRACT_NAME = 'MM Pooled Staking';
 
@@ -23,10 +25,24 @@ const StakeConfirmationView = ({ route }: StakeConfirmationViewProps) => {
 
   useEffect(() => {
     navigation.setOptions(
-      getStakingNavbar(strings('stake.stake'), navigation, theme.colors, {
-        backgroundColor: theme.colors.background.alternative,
-        hasCancelButton: false,
-      }),
+      getStakingNavbar(
+        strings('stake.stake'),
+        navigation,
+        theme.colors,
+        {
+          backgroundColor: theme.colors.background.alternative,
+          hasCancelButton: false,
+        },
+        {
+          backButtonEvent: {
+            event: MetaMetricsEvents.STAKE_CONFIRMATION_BACK_CLICKED,
+            properties: {
+              selected_provider: EVENT_PROVIDERS.CONSENSYS,
+              location: EVENT_LOCATIONS.STAKE_CONFIRMATION_VIEW,
+            },
+          },
+        },
+      ),
     );
   }, [navigation, theme.colors]);
 

app/components/UI/Stake/Views/StakeInputView/StakeInputView.test.tsx

@@ -246,6 +246,8 @@ describe('StakeInputView', () => {
           annualRewardRate: '2.5%',
           annualRewardsETH: '0.00938 ETH',
           annualRewardsFiat: '18.75 USD',
+          estimatedGasFee: '0.25',
+          estimatedGasFeePercentage: '66%',
         },
       });
     });

app/components/UI/Stake/Views/StakeInputView/StakeInputView.tsx

@@ -20,6 +20,8 @@ import useStakingInputHandlers from '../../hooks/useStakingInput';
 import InputDisplay from '../../components/InputDisplay';
 import { MetaMetricsEvents, useMetrics } from '../../../../hooks/useMetrics';
 import { withMetaMetrics } from '../../utils/metaMetrics/withMetaMetrics';
+import { formatEther } from 'ethers/lib/utils';
+import { EVENT_PROVIDERS, EVENT_LOCATIONS } from '../../constants/events';
 
 const StakeInputView = () => {
   const title = strings('stake.stake_eth');
@@ -49,6 +51,8 @@ const StakeInputView = () => {
     handleMax,
     balanceValue,
     isHighGasCostImpact,
+    getDepositTxGasPercentage,
+    estimatedGasFeeWei,
     isLoadingStakingGasFee,
   } = useStakingInputHandlers();
 
@@ -60,6 +64,21 @@ const StakeInputView = () => {
 
   const handleStakePress = useCallback(() => {
     if (isHighGasCostImpact()) {
+      trackEvent(
+        createEventBuilder(
+          MetaMetricsEvents.STAKE_GAS_COST_IMPACT_WARNING_TRIGGERED,
+        )
+          .addProperties({
+            selected_provider: EVENT_PROVIDERS.CONSENSYS,
+            location: EVENT_LOCATIONS.STAKE_INPUT_VIEW,
+            tokens_to_stake_native_value: amountEth,
+            tokens_to_stake_usd_value: fiatAmount,
+            estimated_gas_fee: formatEther(estimatedGasFeeWei.toString()),
+            estimated_gas_percentage_of_deposit: `${getDepositTxGasPercentage()}%`,
+          })
+          .build(),
+      );
+
       navigation.navigate('StakeModals', {
         screen: Routes.STAKING.MODALS.GAS_IMPACT,
         params: {
@@ -68,6 +87,8 @@ const StakeInputView = () => {
           annualRewardsETH,
           annualRewardsFiat,
           annualRewardRate,
+          estimatedGasFee: formatEther(estimatedGasFeeWei.toString()),
+          estimatedGasFeePercentage: `${getDepositTxGasPercentage()}%`,
         },
       });
       return;
@@ -86,7 +107,7 @@ const StakeInputView = () => {
     trackEvent(
       createEventBuilder(MetaMetricsEvents.REVIEW_STAKE_BUTTON_CLICKED)
         .addProperties({
-          selected_provider: 'consensys',
+          selected_provider: EVENT_PROVIDERS.CONSENSYS,
           tokens_to_stake_native_value: amountEth,
           tokens_to_stake_usd_value: fiatAmount,
         })
@@ -103,6 +124,8 @@ const StakeInputView = () => {
     trackEvent,
     createEventBuilder,
     amountEth,
+    estimatedGasFeeWei,
+    getDepositTxGasPercentage,
   ]);
 
   const handleMaxButtonPress = () => {
@@ -124,9 +147,23 @@ const StakeInputView = () => {
 
   useEffect(() => {
     navigation.setOptions(
-      getStakingNavbar(title, navigation, theme.colors, {
-        hasBackButton: false,
-      }),
+      getStakingNavbar(
+        title,
+        navigation,
+        theme.colors,
+        {
+          hasBackButton: false,
+        },
+        {
+          cancelButtonEvent: {
+            event: MetaMetricsEvents.STAKE_CANCEL_CLICKED,
+            properties: {
+              selected_provider: EVENT_PROVIDERS.CONSENSYS,
+              location: EVENT_LOCATIONS.STAKE_INPUT_VIEW,
+            },
+          },
+        },
+      ),
     );
   }, [navigation, theme.colors, title]);
 
@@ -148,9 +185,9 @@ const StakeInputView = () => {
         handleCurrencySwitch={withMetaMetrics(handleCurrencySwitch, {
           event: MetaMetricsEvents.STAKE_INPUT_CURRENCY_SWITCH_CLICKED,
           properties: {
-            selected_provider: 'consensys',
+            selected_provider: EVENT_PROVIDERS.CONSENSYS,
             text: 'Currency Switch Trigger',
-            location: 'Stake Input View',
+            location: EVENT_LOCATIONS.STAKE_INPUT_VIEW,
             // We want to track the currency switching to. Not the current currency.
             currency_type: isEth ? 'fiat' : 'native',
           },
@@ -163,9 +200,9 @@ const StakeInputView = () => {
           onIconPress={withMetaMetrics(navigateToLearnMoreModal, {
             event: MetaMetricsEvents.TOOLTIP_OPENED,
             properties: {
-              selected_provider: 'consensys',
+              selected_provider: EVENT_PROVIDERS.CONSENSYS,
               text: 'Tooltip Opened',
-              location: 'Stake Input View',
+              location: EVENT_LOCATIONS.STAKE_INPUT_VIEW,
               tooltip_name: 'MetaMask Pool Estimated Rewards',
             },
           })}
@@ -178,7 +215,7 @@ const StakeInputView = () => {
           withMetaMetrics(handleQuickAmountPress, {
             event: MetaMetricsEvents.STAKE_INPUT_QUICK_AMOUNT_CLICKED,
             properties: {
-              location: 'StakeInputView',
+              location: EVENT_LOCATIONS.STAKE_INPUT_VIEW,
               amount: value,
               // onMaxPress is called instead when it's defined and the max is clicked.
               is_max: false,
@@ -189,7 +226,7 @@ const StakeInputView = () => {
         onMaxPress={withMetaMetrics(handleMaxButtonPress, {
           event: MetaMetricsEvents.STAKE_INPUT_QUICK_AMOUNT_CLICKED,
           properties: {
-            location: 'StakeInputView',
+            location: EVENT_LOCATIONS.STAKE_INPUT_VIEW,
             is_max: true,
             mode: isEth ? 'native' : 'fiat',
           },