fix: disabled what's new modal (#10588)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

This PR disables the What's New modal in the mobile app. The change is
made to improve user experience by removing a potentially disruptive and
repetitive element.

1. Reason for the change:
   - The What's New modal was found to be disruptive to user experience.
   - It became repetitive for frequent users.
- Its functionality now overlaps with new features like the notification
system and opt-in prompts.

2. Improvement/solution:
   - Removed navigation logic to the What's New modal.
   - Added explanatory comments in the code for future reference.
- The modal is now disabled, allowing for a smoother user experience
while retaining the component for potential future use.

## **Related issues**

Fixes:
[#2614](MetaMask/MetaMask-planning#2614)

## **Manual testing steps**

1. Open the app as a new user.
2. Verify that the What's New modal does not appear.
3. Open the app as an existing user.
4. Verify that the What's New modal does not appear.
5. Navigate through the app to ensure no unexpected side effects from
this change.


## **Screenshots/Recordings**


| Before  | After  |
|:---:|:---:|

|![before](https://github.com/user-attachments/assets/966c5c23-25eb-48f4-b7f8-a7ac37fa4493)|![after](https://github.com/user-attachments/assets/c1b2e9c5-40e9-4180-af0f-cc1985a178b2)|

### **Before**

- See Screenshots/Recordings section

### **After**

- See Screenshots/Recordings section

## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [ ] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

app/components/Nav/App/index.js

@@ -27,7 +27,6 @@ import ManualBackupStep2 from '../../Views/ManualBackupStep2';
 import ManualBackupStep3 from '../../Views/ManualBackupStep3';
 import ImportFromSecretRecoveryPhrase from '../../Views/ImportFromSecretRecoveryPhrase';
 import DeleteWalletModal from '../../../components/UI/DeleteWalletModal';
-import WhatsNewModal from '../../UI/WhatsNewModal/WhatsNewModal';
 import Main from '../Main';
 import OptinMetrics from '../../UI/OptinMetrics';
 import MetaMaskAnimation from '../../UI/MetaMaskAnimation';
@@ -614,7 +613,6 @@ const App = ({ userLoggedIn }) => {
         name={Routes.MODAL.MODAL_MANDATORY}
         component={ModalMandatory}
       />
-      <Stack.Screen name={Routes.MODAL.WHATS_NEW} component={WhatsNewModal} />
       <Stack.Screen
         name={Routes.MODAL.SMART_TRANSACTIONS_OPT_IN}
         component={SmartTransactionsOptInModal}

app/components/UI/WhatsNewModal/WhatsNewModal.tsx

@@ -33,6 +33,16 @@ import { WhatsNewModalSelectorsIDs } from '../../../../e2e/selectors/Modals/What
 import { ScrollView } from 'react-native-gesture-handler';
 import { useNavigation } from '@react-navigation/native';
 
+// NOTE: This modal is currently disabled.
+// Reasons for disabling:
+// 1. It was found to be disruptive to user experience.
+// 2. It became repetitive for frequent users.
+// 3. Its functionality now overlaps with:
+//    - New notification system for product announcements
+//    - Opt-in prompts for new features
+// See issue: https://github.com/MetaMask/MetaMask-planning/issues/2614
+// TODO: Consider removing or refactoring this component if it remains unused.
+
 const modalMargin = 24;
 const modalPadding = 24;
 const screenWidth = Device.getDeviceWidth();

app/components/Views/Wallet/index.tsx

@@ -34,10 +34,7 @@ import { getTicker } from '../../../util/transactions';
 import OnboardingWizard from '../../UI/OnboardingWizard';
 import ErrorBoundary from '../ErrorBoundary';
 import { useTheme } from '../../../util/theme';
-import {
-  shouldShowSmartTransactionsOptInModal,
-  shouldShowWhatsNewModal,
-} from '../../../util/onboarding';
+import { shouldShowSmartTransactionsOptInModal } from '../../../util/onboarding';
 import Logger from '../../../util/Logger';
 import Routes from '../../../constants/navigation/Routes';
 import {
@@ -336,19 +333,6 @@ const Wallet = ({
       return;
     }
 
-    const checkWhatsNewModal = async () => {
-      try {
-        const shouldShowWhatsNew = await shouldShowWhatsNewModal();
-        if (shouldShowWhatsNew) {
-          navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
-            screen: Routes.MODAL.WHATS_NEW,
-          });
-        }
-      } catch (error) {
-        Logger.log(error, "Error while checking What's New modal!");
-      }
-    };
-
     // Show STX opt in modal before What's New modal
     // Fired on the first load of the wallet and also on network switch
     const checkSmartTransactionsOptInModal = async () => {
@@ -366,8 +350,6 @@ const Wallet = ({
           navigation.navigate(Routes.MODAL.ROOT_MODAL_FLOW, {
             screen: Routes.MODAL.SMART_TRANSACTIONS_OPT_IN,
           });
-        } else {
-          await checkWhatsNewModal();
         }
       } catch (error) {
         Logger.log(

e2e/specs/onboarding/onboarding-wizard-opt-in.spec.js

@@ -15,7 +15,6 @@ import LoginView from '../../pages/LoginView';
 import SkipAccountSecurityModal from '../../pages/modals/SkipAccountSecurityModal';
 import OnboardingWizardModal from '../../pages/modals/OnboardingWizardModal';
 import ProtectYourWalletModal from '../../pages/modals/ProtectYourWalletModal';
-import WhatsNewModal from '../../pages/modals/WhatsNewModal';
 import { acceptTermOfUse } from '../../viewHelper';
 import TabBarComponent from '../../pages/TabBarComponent';
 import CommonView from '../../pages/CommonView';
@@ -77,34 +76,16 @@ describe(
       }
     });
 
-    it('should tap on "Got it" Button in the whats new modal', async () => {
-      // dealing with flakiness on bitrise.
-      await TestHelpers.delay(2500);
-      try {
-        await Assertions.checkIfVisible(WhatsNewModal.container);
-        await WhatsNewModal.tapCloseButton();
-      } catch {
-        /* eslint-disable no-console */
-
-        console.log('The whats new modal is not visible');
-      }
-    });
     it('should dismiss the marketing consent bottom sheet', async () => {
       // dealing with flakiness on bitrise.
       await TestHelpers.delay(1000);
       try {
         await Assertions.checkIfVisible(ExperienceEnhancerModal.container);
         await ExperienceEnhancerModal.tapIagree();
-      } catch {
-        console.log('The marketing consent sheet is not visible');
-      }
-      try {
-        await Assertions.checkIfVisible(WhatsNewModal.container);
-        await WhatsNewModal.tapCloseButton();
       } catch {
         /* eslint-disable no-console */
 
-        console.log('The whats new modal is not visible');
+        console.log('The marketing consent sheet is not visible');
       }
     });
 

e2e/specs/quarantine/add-edit-custom-eth-mainnet.failing.js

@@ -19,8 +19,6 @@ import SettingsView from '../../pages/Settings/SettingsView';
 import NetworkListModal from '../../pages/modals/NetworkListModal';
 import OnboardingWizardModal from '../../pages/modals/OnboardingWizardModal';
 import ProtectYourWalletModal from '../../pages/modals/ProtectYourWalletModal';
-import WhatsNewModal from '../../pages/modals/WhatsNewModal';
-import TestHelpers from '../../helpers';
 import ExperienceEnhancerModal from '../../pages/modals/ExperienceEnhancerModal';
 
 const validAccount = Accounts.getValidAccount();
@@ -77,17 +75,6 @@ describe(Regression('Add custom default ETH Mainnet'), () => {
     );
   });
 
-  it('should tap to close the whats new modal if displayed', async () => {
-    // dealing with flakiness on bitrise.
-    await TestHelpers.delay(2500);
-    try {
-      await Assertions.checkIfVisible(WhatsNewModal.container);
-      await WhatsNewModal.tapCloseButton();
-    } catch {
-      //
-    }
-  });
-
   it('should navigate to Settings > Networks', async () => {
     await Assertions.checkIfVisible(ProtectYourWalletModal.collapseWalletModal);
     await ProtectYourWalletModal.tapRemindMeLaterButton();

e2e/specs/quarantine/contract-nickname.failing.js

@@ -16,7 +16,6 @@ import SettingsView from '../../pages/Settings/SettingsView';
 import NetworkListModal from '../../pages/modals/NetworkListModal';
 import OnboardingWizardModal from '../../pages/modals/OnboardingWizardModal';
 import NetworkEducationModal from '../../pages/modals/NetworkEducationModal';
-import WhatsNewModal from '../../pages/modals/WhatsNewModal';
 import SecurityAndPrivacy from '../../pages/Settings/SecurityAndPrivacy/SecurityAndPrivacyView';
 
 import TestHelpers from '../../helpers';
@@ -87,17 +86,6 @@ describe('Adding Contract Nickname', () => {
     }
   });
 
-  it('should tap on "Got it" Button in the whats new modal', async () => {
-    // dealing with flakiness on bitrise.
-    await TestHelpers.delay(2500);
-    try {
-      await Assertions.checkIfVisible(WhatsNewModal.container);
-      await WhatsNewModal.tapCloseButton();
-    } catch {
-      //
-    }
-  });
-
   it('should switch to SEPOLIA', async () => {
     await WalletView.tapNetworksButtonOnNavBar();
     await NetworkListModal.changeNetworkTo(

e2e/specs/wallet/start-exploring.spec.js

@@ -11,7 +11,6 @@ import EnableAutomaticSecurityChecksView from '../../pages/EnableAutomaticSecuri
 import Browser from '../../pages/Browser/BrowserView';
 import SkipAccountSecurityModal from '../../pages/modals/SkipAccountSecurityModal';
 import OnboardingWizardModal from '../../pages/modals/OnboardingWizardModal';
-import WhatsNewModal from '../../pages/modals/WhatsNewModal';
 import { acceptTermOfUse } from '../../viewHelper';
 import Assertions from '../../utils/Assertions';
 
@@ -115,12 +114,6 @@ describe(SmokeCore('Start Exploring'), () => {
     // Check that we are on the Browser page
     // dealing with flakiness on bitrise.
     await TestHelpers.delay(2500);
-    try {
-      await Assertions.checkIfVisible(WhatsNewModal.container);
-      await WhatsNewModal.tapCloseButton();
-    } catch {
-      //
-    }
     await Assertions.checkIfVisible(Browser.browserScreenID);
   });
 });

e2e/viewHelper.js

@@ -12,7 +12,6 @@ import OnboardingWizardModal from './pages/modals/OnboardingWizardModal';
 import ExperienceEnhancerModal from './pages/modals/ExperienceEnhancerModal';
 import SettingsView from './pages/Settings/SettingsView';
 import WalletView from './pages/wallet/WalletView';
-import WhatsNewModal from './pages/modals/WhatsNewModal';
 import Accounts from '../wdio/helpers/Accounts';
 import SkipAccountSecurityModal from './pages/modals/SkipAccountSecurityModal';
 import ProtectYourWalletModal from './pages/modals/ProtectYourWalletModal';
@@ -48,16 +47,6 @@ have to have all these workarounds in the tests
   */
   await TestHelpers.delay(1000);
 
-  try {
-    await Assertions.checkIfVisible(WhatsNewModal.container);
-    await WhatsNewModal.tapCloseButton();
-    await Assertions.checkIfNotVisible(WhatsNewModal.container);
-  } catch {
-    /* eslint-disable no-console */
-
-    console.log('The whats new modal is not visible');
-  }
-
   // Handle Onboarding wizard
   try {
     await Assertions.checkIfVisible(OnboardingWizardModal.stepOneContainer);
@@ -69,17 +58,6 @@ have to have all these workarounds in the tests
     console.log('The onboarding modal is not visible');
   }
 
-  // TODO: Define the correct order of onboarding modals to be displayed
-  try {
-    await Assertions.checkIfVisible(WhatsNewModal.container);
-    await WhatsNewModal.tapCloseButton();
-    await Assertions.checkIfNotVisible(WhatsNewModal.container);
-  } catch {
-    /* eslint-disable no-console */
-
-    console.log('The whats new modal is not visible');
-  }
-
   try {
     // Handle Marketing consent modal
 

wdio/features/Upgrading/MultipleAccounts.feature

@@ -32,7 +32,6 @@ Feature: Upgrade previous app build with current release while being connected t
     And the splash animation completes
     And I fill my password in the Login screen
     And I log into my wallet
-    And I close the Whats New modal
     And I use the back button on Android
     And I am on the wallet view
     Then I am on the "<AccountName>" account