[pull] main from MetaMask:main

.eslintrc.js

@@ -128,6 +128,12 @@ module.exports = {
         '@metamask/design-tokens/color-no-hex': 'error',
       },
     },
+    {
+      files: ['app/components/UI/Predict/**/*.{js,jsx,ts,tsx}'],
+      rules: {
+        '@metamask/design-tokens/color-no-hex': 'error',
+      },
+    },
     {
       files: [
         'app/components/UI/Name/**/*.{js,ts,tsx}',

.github/CODEOWNERS

@@ -110,7 +110,6 @@ app/core/SnapKeyring                                        @MetaMask/accounts-e
 
 # Co-owned by accounts and mobile-core-ux
 app/components/Views/AccountSelector                        @MetaMask/accounts-engineers @MetaMask/mobile-core-ux
-app/components/UI/EvmAccountSelectorList                    @MetaMask/accounts-engineers @MetaMask/mobile-core-ux
 
 # Multichain Accounts
 **/multichain-accounts/**                                   @MetaMask/accounts-engineers

android/app/build.gradle

@@ -187,7 +187,7 @@ android {
         applicationId "io.metamask"
         minSdkVersion rootProject.ext.minSdkVersion
         targetSdkVersion rootProject.ext.targetSdkVersion
-        versionName "7.69.0"
+        versionName "7.70.0"
         versionCode 3607
         testBuildType System.getProperty('testBuildType', 'debug')
         testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"

app/component-library/components-temp/ActionListItem/ActionListItem.tsx

@@ -20,6 +20,11 @@ import { useTailwind } from '@metamask/design-system-twrnc-preset';
 // Internal dependencies
 import { ActionListItemProps } from './ActionListItem.types';
 
+/**
+ * @deprecated Please update your code to use `ActionListItem` from `@metamask/design-system-react-native`.
+ * The API may have changed - compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/ActionListItem/README.md}
+ */
 const ActionListItem: React.FC<ActionListItemProps> = ({
   label,
   description,

app/component-library/components-temp/Buttons/ButtonHero/ButtonHero.tsx

@@ -56,6 +56,11 @@ const ButtonHeroInner = ({
  * The useTailwind hook needs to be called inside the ThemeProvider context to get the locked theme.
  * By splitting into two components, we ensure the hook gets the correct theme context for all color calculations.
  */
+/**
+ * @deprecated Please update your code to use `ButtonHero` from `@metamask/design-system-react-native`.
+ * The API may have changed - compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/ButtonHero/README.md}
+ */
 const ButtonHero = (props: ButtonBaseProps) => (
   <ThemeProvider theme={Theme.Light}>
     <ButtonHeroInner {...props} />

app/component-library/components-temp/Buttons/ButtonSemantic/ButtonSemantic.tsx

@@ -9,6 +9,11 @@ import {
   ButtonSemanticSeverity,
 } from './ButtonSemantic.types';
 
+/**
+ * @deprecated Please update your code to use `ButtonSemantic` from `@metamask/design-system-react-native`.
+ * The API may have changed - compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/ButtonSemantic/README.md}
+ */
 const ButtonSemantic: React.FC<ButtonSemanticProps> = ({
   severity,
   size = ButtonSize.Lg,

app/component-library/components/BottomSheets/BottomSheetHeader/BottomSheetHeader.tsx

@@ -19,6 +19,11 @@ import {
   BottomSheetHeaderVariant,
 } from './BottomSheetHeader.types';
 
+/**
+ * @deprecated Please update your code to use `BottomSheetHeader` from `@metamask/design-system-react-native`.
+ * The API may have changed - compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/BottomSheetHeader/README.md}
+ */
 const BottomSheetHeader: React.FC<BottomSheetHeaderProps> = ({
   style,
   children,

app/component-library/components/Buttons/Button/foundation/ButtonBase/ButtonBase.tsx

@@ -20,6 +20,11 @@ import {
   DEFAULT_BUTTONBASE_LABEL_TEXTVARIANT,
 } from './ButtonBase.constants';
 
+/**
+ * @deprecated Please update your code to use `ButtonBase` from `@metamask/design-system-react-native`.
+ * The API may have changed - compare props before migrating.
+ * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/ButtonBase/README.md}
+ */
 const ButtonBase = ({
   label,
   labelColor = DEFAULT_BUTTONBASE_LABEL_COLOR,

app/component-library/components/Form/TextField/TextField.tsx

@@ -27,6 +27,7 @@ import {
  * @deprecated Please update your code to use `TextField` from `@metamask/design-system-react-native`.
  * The API may have changed — compare props before migrating.
  * @see {@link https://github.com/MetaMask/metamask-design-system/blob/main/packages/design-system-react-native/src/components/TextField/README.md}
+ * @since @metamask/design-system-react-native@0.9.0
  */
 const TextField = React.forwardRef<TextInput | null, TextFieldProps>(
   (

app/components/Nav/Main/MainNavigator.js

@@ -117,7 +117,6 @@ import { useAccountMenuEnabled } from '../../../selectors/featureFlagController/
 import PerpsPositionTransactionView from '../../UI/Perps/Views/PerpsTransactionsView/PerpsPositionTransactionView';
 import PerpsOrderTransactionView from '../../UI/Perps/Views/PerpsTransactionsView/PerpsOrderTransactionView';
 import PerpsFundingTransactionView from '../../UI/Perps/Views/PerpsTransactionsView/PerpsFundingTransactionView';
-import TurnOnBackupAndSync from '../../Views/Identity/TurnOnBackupAndSync/TurnOnBackupAndSync';
 import DeFiProtocolPositionDetails from '../../UI/DeFiPositions/DeFiProtocolPositionDetails';
 import UnmountOnBlur from '../../Views/UnmountOnBlur';
 ///: BEGIN:ONLY_INCLUDE_IF(sample-feature)
@@ -1207,11 +1206,6 @@ const MainNavigator = () => {
         component={NotificationsOptInStack}
         options={NotificationsOptInStack.navigationOptions}
       />
-      <Stack.Screen
-        name={Routes.IDENTITY.TURN_ON_BACKUP_AND_SYNC}
-        component={TurnOnBackupAndSync}
-        options={TurnOnBackupAndSync.navigationOptions}
-      />
       <Stack.Screen
         name="DeFiProtocolPositionDetails"
         component={DeFiProtocolPositionDetails}

app/components/Nav/Main/__snapshots__/MainNavigator.test.tsx.snap

@@ -358,10 +358,6 @@ exports[`MainNavigator Tab Bar Visibility hides tab bar when browser is active 1
     component={[Function]}
     name="OptInStack"
   />
-  <Screen
-    component={[Function]}
-    name="TurnOnBackupAndSync"
-  />
   <Screen
     component={[Function]}
     name="DeFiProtocolPositionDetails"
@@ -756,10 +752,6 @@ exports[`MainNavigator Tab Bar Visibility shows tab bar when not in browser 1`]
     component={[Function]}
     name="OptInStack"
   />
-  <Screen
-    component={[Function]}
-    name="TurnOnBackupAndSync"
-  />
   <Screen
     component={[Function]}
     name="DeFiProtocolPositionDetails"
@@ -1154,10 +1146,6 @@ exports[`MainNavigator matches rendered snapshot 1`] = `
     component={[Function]}
     name="OptInStack"
   />
-  <Screen
-    component={[Function]}
-    name="TurnOnBackupAndSync"
-  />
   <Screen
     component={[Function]}
     name="DeFiProtocolPositionDetails"

app/components/UI/Earn/Views/MusdQuickConvertView/MusdQuickConvertView.test.tsx

@@ -12,6 +12,7 @@ import { selectMusdQuickConvertEnabledFlag } from '../../selectors/featureFlags'
 import {
   createTokenChainKey,
   selectHasInFlightMusdConversion,
+  selectHasUnapprovedMusdConversion,
   selectMusdConversionStatuses,
 } from '../../selectors/musdConversionStatus';
 import { MUSD_CONVERSION_APY } from '../../constants/musd';
@@ -42,6 +43,7 @@ jest.mock('../../selectors/featureFlags', () => ({
 jest.mock('../../selectors/musdConversionStatus', () => ({
   ...jest.requireActual('../../selectors/musdConversionStatus'),
   selectHasInFlightMusdConversion: jest.fn(),
+  selectHasUnapprovedMusdConversion: jest.fn(),
   selectMusdConversionStatuses: jest.fn(),
 }));
 const mockGetStakingNavbar = jest.fn<object, unknown[]>(() => ({}));
@@ -90,6 +92,10 @@ const mockUseMusdConversion = useMusdConversion as jest.MockedFunction<
 const mockUseMusdBalance = useMusdBalance as jest.MockedFunction<
   typeof useMusdBalance
 >;
+const mockSelectHasUnapprovedMusdConversion =
+  selectHasUnapprovedMusdConversion as jest.MockedFunction<
+    typeof selectHasUnapprovedMusdConversion
+  >;
 const mockSelectHasInFlightMusdConversion =
   selectHasInFlightMusdConversion as jest.MockedFunction<
     typeof selectHasInFlightMusdConversion
@@ -171,6 +177,7 @@ describe('MusdQuickConvertView', () => {
       fiatBalanceAggregatedFormatted: '$0.00',
     });
     mockSelectHasInFlightMusdConversion.mockReturnValue(false);
+    mockSelectHasUnapprovedMusdConversion.mockReturnValue(false);
     mockSelectMusdConversionStatuses.mockReturnValue({});
   });
 
@@ -461,8 +468,8 @@ describe('MusdQuickConvertView', () => {
     });
   });
 
-  describe('in-flight conversion', () => {
-    it('does not call initiateMaxConversion or initiateCustomConversion when Max or Edit is pressed and hasInFlightMusdConversion is true', async () => {
+  describe('unapproved conversion', () => {
+    it('does not call initiateMaxConversion or initiateCustomConversion when Max or Edit is pressed and hasUnapprovedMusdConversion is true', async () => {
       const token = createMockToken();
       mockUseMusdConversionTokens.mockReturnValue({
         tokens: [token],
@@ -471,7 +478,7 @@ describe('MusdQuickConvertView', () => {
         isMusdSupportedOnChain: jest.fn(),
         hasConvertibleTokensByChainId: jest.fn(),
       });
-      mockSelectHasInFlightMusdConversion.mockReturnValue(true);
+      mockSelectHasUnapprovedMusdConversion.mockReturnValue(true);
 
       const { getAllByTestId } = renderWithProvider(<MusdQuickConvertView />, {
         state: initialRootState,

app/components/UI/Earn/Views/MusdQuickConvertView/components/MusdBalanceCard/MusdBalanceCard.test.tsx

@@ -54,15 +54,15 @@ describe('MusdBalanceCard', () => {
       expect(getByText(MUSD_TOKEN.symbol)).toBeOnTheScreen();
     });
 
-    it('displays percentage boost text from localization', () => {
+    it('displays percentage bonus text from localization', () => {
       const { getByText } = renderWithProvider(
         <MusdBalanceCard chainId={CHAIN_IDS.MAINNET} balance="$100.00" />,
         {
           state: initialRootState,
         },
       );
 
-      expect(getByText('3% boost')).toBeOnTheScreen();
+      expect(getByText('3% bonus')).toBeOnTheScreen();
     });
   });
 });

app/components/UI/Earn/Views/MusdQuickConvertView/components/MusdBalanceCard/MusdBalanceCard.tsx

@@ -71,7 +71,7 @@ const MusdBalanceCard = ({ chainId, balance }: MusdBalanceCardProps) => {
 
       <View style={styles.right}>
         <Text variant={TextVariant.BodyMDMedium} color={TextColor.Success}>
-          {strings('earn.musd_conversion.percentage_boost', {
+          {strings('earn.musd_conversion.percentage_bonus', {
             percentage: MUSD_CONVERSION_APY,
           })}
         </Text>

app/components/UI/Earn/Views/MusdQuickConvertView/index.tsx

@@ -18,6 +18,7 @@ import { selectMusdQuickConvertEnabledFlag } from '../../selectors/featureFlags'
 import {
   createTokenChainKey,
   selectHasInFlightMusdConversion,
+  selectHasUnapprovedMusdConversion,
   selectMusdConversionStatuses,
 } from '../../selectors/musdConversionStatus';
 import ConvertTokenRow from '../../components/Musd/ConvertTokenRow';
@@ -81,6 +82,9 @@ const MusdQuickConvertView = () => {
   // Get convertible tokens
   const { tokens: conversionTokens } = useMusdConversionTokens();
 
+  const hasUnapprovedMusdConversion = useSelector(
+    selectHasUnapprovedMusdConversion,
+  );
   const hasInFlightMusdConversion = useSelector(
     selectHasInFlightMusdConversion,
   );
@@ -200,7 +204,9 @@ const MusdQuickConvertView = () => {
           token={item}
           onMaxPress={handleMaxPress}
           onEditPress={handleEditPress}
-          areActionsDisabled={hasInFlightMusdConversion}
+          areActionsDisabled={
+            hasUnapprovedMusdConversion || hasInFlightMusdConversion
+          }
           isConversionPending={Boolean(txStatusInfo?.isPending)}
         />
       );
@@ -210,6 +216,7 @@ const MusdQuickConvertView = () => {
       handleEditPress,
       handleMaxPress,
       hasInFlightMusdConversion,
+      hasUnapprovedMusdConversion,
     ],
   );
 

app/components/UI/Earn/components/EarnTransactionMonitor.test.tsx

@@ -2,13 +2,18 @@ import React from 'react';
 import { render } from '@testing-library/react-native';
 import EarnTransactionMonitor from './EarnTransactionMonitor';
 import { useMusdConversionStatus } from '../hooks/useMusdConversionStatus';
+import { useMusdConversionStaleApprovalCleanup } from '../hooks/useMusdConversionStaleApprovalCleanup';
 import { useMerklClaimStatus } from '../hooks/useMerklClaimStatus';
 
 jest.mock('../hooks/useMusdConversionStatus');
+jest.mock('../hooks/useMusdConversionStaleApprovalCleanup');
 jest.mock('../hooks/useMerklClaimStatus');
 
 describe('EarnTransactionMonitor', () => {
   const mockUseMusdConversionStatus = jest.mocked(useMusdConversionStatus);
+  const mockUseMusdConversionStaleApprovalCleanup = jest.mocked(
+    useMusdConversionStaleApprovalCleanup,
+  );
   const mockUseMerklClaimStatus = jest.mocked(useMerklClaimStatus);
 
   beforeEach(() => {
@@ -31,6 +36,12 @@ describe('EarnTransactionMonitor', () => {
     expect(mockUseMusdConversionStatus).toHaveBeenCalledTimes(1);
   });
 
+  it('calls useMusdConversionStaleApprovalCleanup hook', () => {
+    render(<EarnTransactionMonitor />);
+
+    expect(mockUseMusdConversionStaleApprovalCleanup).toHaveBeenCalledTimes(1);
+  });
+
   it('calls useMerklClaimStatus hook', () => {
     render(<EarnTransactionMonitor />);
 

app/components/UI/Earn/components/EarnTransactionMonitor.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useMusdConversionStatus } from '../hooks/useMusdConversionStatus';
+import { useMusdConversionStaleApprovalCleanup } from '../hooks/useMusdConversionStaleApprovalCleanup';
 import { useMerklClaimStatus } from '../hooks/useMerklClaimStatus';
 
 /**
@@ -9,6 +10,12 @@ import { useMerklClaimStatus } from '../hooks/useMerklClaimStatus';
  * allowing them to remain active even when navigating away from Earn screens.
  */
 const EarnTransactionMonitor: React.FC = () => {
+  /**
+   * Reject stale mUSD pending approvals on app foreground.
+   * For example, resuming via notification or deeplink can bypass
+   * the normal confirmation rejection path.
+   */
+  useMusdConversionStaleApprovalCleanup();
   // Enable mUSD conversion status monitoring and toasts
   useMusdConversionStatus();
   // Enable Merkl bonus claim status monitoring and toasts

app/components/UI/Earn/components/Musd/MusdConversionAssetOverviewCta/MusdConversionAssetOverviewCta.test.tsx

@@ -435,7 +435,7 @@ describe('MusdConversionAssetOverviewCta', () => {
       });
 
       // Assert
-      const expectedCtaText = strings('earn.musd_conversion.boost_title', {
+      const expectedCtaText = strings('earn.musd_conversion.bonus_title', {
         percentage: MUSD_CONVERSION_APY,
       });
 
@@ -484,7 +484,7 @@ describe('MusdConversionAssetOverviewCta', () => {
       });
 
       // Assert
-      const expectedCtaText = strings('earn.musd_conversion.boost_title', {
+      const expectedCtaText = strings('earn.musd_conversion.bonus_title', {
         percentage: MUSD_CONVERSION_APY,
       });
 
@@ -534,7 +534,7 @@ describe('MusdConversionAssetOverviewCta', () => {
       });
 
       // Assert
-      const expectedCtaText = strings('earn.musd_conversion.boost_title', {
+      const expectedCtaText = strings('earn.musd_conversion.bonus_title', {
         percentage: MUSD_CONVERSION_APY,
       });
 

app/components/UI/Earn/components/Musd/MusdConversionAssetOverviewCta/MusdConversionAssetOverviewCta.view.test.tsx

@@ -474,7 +474,7 @@ describeForPlatforms('MusdConversionAssetOverviewCta', () => {
     ).toBeOnTheScreen();
   });
 
-  it('renders CTA with correct boost title text', () => {
+  it('renders CTA with correct bonus title text', () => {
     // Arrange
     const state = initialStateWallet()
       .withMinimalMultichainAssets()
@@ -507,7 +507,7 @@ describeForPlatforms('MusdConversionAssetOverviewCta', () => {
     ).toBeOnTheScreen();
   });
 
-  it('renders CTA with correct boost description text', () => {
+  it('renders CTA with correct bonus description text', () => {
     // Arrange
     const state = initialStateWallet()
       .withMinimalMultichainAssets()

app/components/UI/Earn/components/Musd/MusdConversionAssetOverviewCta/index.tsx

@@ -53,7 +53,7 @@ const MusdConversionAssetOverviewCta = ({
   const submitCtaPressedEvent = () => {
     const { EVENT_LOCATIONS, MUSD_CTA_TYPES } = MUSD_EVENTS_CONSTANTS;
 
-    const ctaText = strings('earn.musd_conversion.boost_title', {
+    const ctaText = strings('earn.musd_conversion.bonus_title', {
       percentage: MUSD_CONVERSION_APY,
     });
 
@@ -116,12 +116,12 @@ const MusdConversionAssetOverviewCta = ({
       {/* Text content in the center */}
       <View style={styles.textContainer}>
         <Text variant={TextVariant.BodySMMedium} style={styles.title}>
-          {strings('earn.musd_conversion.boost_title', {
+          {strings('earn.musd_conversion.bonus_title', {
             percentage: MUSD_CONVERSION_APY,
           })}
         </Text>
         <Text variant={TextVariant.BodySMMedium} color={TextColor.Alternative}>
-          {strings('earn.musd_conversion.boost_description', {
+          {strings('earn.musd_conversion.bonus_description', {
             percentage: MUSD_CONVERSION_APY,
           })}
         </Text>

app/components/UI/Earn/hooks/useEarnToasts.tsx

@@ -150,7 +150,7 @@ const useEarnToasts = (): {
             <Icon
               name={IconName.CircleX}
               color={theme.colors.error.default}
-              size={IconSize.Xl}
+              size={IconSize.Lg}
             />
           </View>
         ),