feat: ota update modal

app/components/Nav/App/App.test.tsx

@@ -31,7 +31,6 @@ import { KeyringTypes } from '@metamask/keyring-controller';
 import { AccountDetailsIds } from '../../../../e2e/selectors/MultichainAccounts/AccountDetails.selectors';
 import { AvatarAccountType } from '../../../component-library/components/Avatars/Avatar';
 import AUTHENTICATION_TYPE from '../../../constants/userProperties';
-import { useOTAUpdates } from '../../hooks/useOTAUpdates';
 
 const initialState: DeepPartial<RootState> = {
   user: {
@@ -83,16 +82,6 @@ jest.mock('../../hooks/useMetrics/useMetrics', () => ({
   }),
 }));
 
-jest.mock('../../hooks/useOTAUpdates', () => ({
-  useOTAUpdates: jest.fn().mockReturnValue({
-    isCheckingUpdates: false,
-  }),
-}));
-
-const mockUseOTAUpdates = useOTAUpdates as jest.MockedFunction<
-  typeof useOTAUpdates
->;
-
 jest.mock(
   '../../UI/FoxLoader',
   () =>
@@ -123,6 +112,10 @@ jest.mock('../../../core/OAuthService/OAuthLoginHandlers', () => ({
   createLoginHandler: jest.fn(),
 }));
 
+jest.mock('../../hooks/useOTAUpdates', () => ({
+  useOTAUpdates: jest.fn(),
+}));
+
 // Mock the navigation hook
 const mockNavigate = jest.fn();
 const mockReset = jest.fn();
@@ -269,9 +262,6 @@ describe('App', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
-    mockUseOTAUpdates.mockReturnValue({
-      isCheckingUpdates: false,
-    });
     mockNavigate.mockClear();
   });
 
@@ -284,20 +274,6 @@ describe('App', () => {
     jest.useRealTimers();
   });
 
-  it('renders FoxLoader when OTA update check runs', () => {
-    mockUseOTAUpdates.mockReturnValue({
-      isCheckingUpdates: true,
-    });
-
-    const { getByTestId } = renderScreen(
-      App,
-      { name: 'App' },
-      { state: initialState },
-    );
-
-    expect(getByTestId(MOCK_FOX_LOADER_ID)).toBeTruthy();
-  });
-
   it('configures MetaMetrics instance and identifies user on startup', async () => {
     renderScreen(App, { name: 'App' }, { state: initialState });
     await waitFor(() => {

app/components/Nav/App/App.tsx

@@ -56,6 +56,7 @@
 import SelectHardwareWallet from '../../Views/ConnectHardware/SelectHardware';
 import { AUTHENTICATION_APP_TRIGGERED_AUTH_NO_CREDENTIALS } from '../../../constants/error';
 import { UpdateNeeded } from '../../../components/UI/UpdateNeeded';
+import { OTAUpdatesModal } from '../../UI/OTAUpdatesModal';
 import NetworkSettings from '../../Views/Settings/NetworksSettings/NetworkSettings';
 import ModalMandatory from '../../../component-library/components/Modals/ModalMandatory';
 import { RestoreWallet } from '../../Views/RestoreWallet';
@@ -149,7 +150,6 @@
 import useInterval from '../../hooks/useInterval';
 import { Duration } from '@metamask/utils';
 import { selectSeedlessOnboardingLoginFlow } from '../../../selectors/seedlessOnboardingController';
-import { useOTAUpdates } from '../../hooks/useOTAUpdates';
 import { SmartAccountUpdateModal } from '../../Views/confirmations/components/smart-account-update-modal';
 import { PayWithModal } from '../../Views/confirmations/components/modals/pay-with-modal/pay-with-modal';
 import { useMetrics } from '../../hooks/useMetrics';
@@ -161,6 +161,7 @@
 import { trackVaultCorruption } from '../../../util/analytics/vaultCorruptionTracking';
 import SocialLoginIosUser from '../../Views/SocialLoginIosUser';
 import AUTHENTICATION_TYPE from '../../../constants/userProperties';
+import { useOTAUpdates } from '../../hooks/useOTAUpdates';
 
 const clearStackNavigatorOptions = {
   headerShown: false,
@@ -516,6 +517,10 @@
     <Stack.Screen name={'AssetOptions'} component={AssetOptions} />
     <Stack.Screen name={'NftOptions'} component={NftOptions} />
     <Stack.Screen name={Routes.MODAL.UPDATE_NEEDED} component={UpdateNeeded} />
+    <Stack.Screen
+      name={Routes.MODAL.OTA_UPDATES_MODAL}
+      component={OTAUpdatesModal}
+    />
     {
       <Stack.Screen
         name={Routes.SHEET.SELECT_SRP}
@@ -1088,7 +1093,7 @@
   );
 };
 
-const AppContent: React.FC = () => {
+const App: React.FC = () => {
   const navigation = useNavigation();
   const routes = useNavigationState((state) => state.routes);
   const { toastRef } = useContext(ToastContext);
@@ -1098,6 +1103,8 @@
     selectSeedlessOnboardingLoginFlow,
   );
 
+  useOTAUpdates();
+
   if (isFirstRender.current) {
     trace({
       name: TraceName.NavInit,
@@ -1268,7 +1275,7 @@
       Logger.error(error, 'Error starting app');
     });
     // existingUser is not present in the dependency array because it is not needed to re-run the effect when it changes and it will cause a bug.
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
   return (
@@ -1280,14 +1287,4 @@
   );
 };
 
-const App: React.FC = () => {
-  const { isCheckingUpdates } = useOTAUpdates();
-
-  if (isCheckingUpdates) {
-    return <FoxLoader />;
-  }
-
-  return <AppContent />;
-};
-
 export default App;

app/components/UI/OTAUpdatesModal/OTAUpdatesModal.test.tsx

@@ -0,0 +1,161 @@
+import React from 'react';
+import { render, fireEvent, waitFor } from '@testing-library/react-native';
+import { Platform } from 'react-native';
+import { reloadAsync } from 'expo-updates';
+import OTAUpdatesModal from './OTAUpdatesModal';
+import Logger from '../../../util/Logger';
+import { MetaMetricsEvents } from '../../../core/Analytics';
+
+jest.mock(
+  '../../../component-library/components/BottomSheets/BottomSheet',
+  () => {
+    const { View } = jest.requireActual('react-native');
+    const { forwardRef, useImperativeHandle } = jest.requireActual('react');
+
+    const MockBottomSheet = forwardRef(
+      (props: { children: React.ReactNode }, ref: React.Ref<unknown>) => {
+        useImperativeHandle(ref, () => ({
+          onOpenBottomSheet: jest.fn(),
+          onCloseBottomSheet: jest.fn((callback?: () => void) => {
+            if (callback) callback();
+          }),
+        }));
+
+        return (
+          <View testID="bottom-sheet" {...props}>
+            {props.children}
+          </View>
+        );
+      },
+    );
+
+    return {
+      __esModule: true,
+      default: MockBottomSheet,
+    };
+  },
+);
+
+jest.mock('expo-updates', () => ({
+  reloadAsync: jest.fn(),
+}));
+
+jest.mock('../../../util/metrics', () => ({
+  __esModule: true,
+  default: jest.fn().mockReturnValue({}),
+}));
+
+jest.mock('../../../util/Logger', () => ({
+  log: jest.fn(),
+  error: jest.fn(),
+}));
+
+jest.mock(
+  '../../../component-library/components/HeaderBase',
+  () =>
+    function HeaderBaseMock({ children }: { children: React.ReactNode }) {
+      // eslint-disable-next-line react/jsx-no-useless-fragment
+      return <>{children}</>;
+    },
+);
+
+const mockReloadAsync = reloadAsync as jest.MockedFunction<typeof reloadAsync>;
+const mockLoggerError = Logger.error as jest.MockedFunction<
+  typeof Logger.error
+>;
+
+interface MockEventBuilder {
+  addProperties: jest.Mock;
+  build: jest.Mock;
+}
+
+const mockCreateEventBuilder = jest.fn((event: string): MockEventBuilder => {
+  const builder: MockEventBuilder = {
+    addProperties: jest.fn(),
+    build: jest.fn(),
+  };
+
+  builder.addProperties.mockReturnValue(builder);
+  builder.build.mockReturnValue({ event });
+
+  return builder;
+});
+
+const mockTrackEvent = jest.fn();
+
+jest.mock('../../hooks/useMetrics', () => ({
+  useMetrics: () => ({
+    trackEvent: mockTrackEvent,
+    createEventBuilder: mockCreateEventBuilder,
+  }),
+}));
+
+describe('OTAUpdatesModal', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    (Platform as unknown as { OS: string }).OS = 'ios';
+  });
+
+  it('tracks view event on mount', () => {
+    render(<OTAUpdatesModal />);
+
+    expect(mockTrackEvent).toHaveBeenCalledWith(
+      expect.objectContaining({
+        event: MetaMetricsEvents.OTA_UPDATES_MODAL_VIEWED,
+      }),
+    );
+  });
+
+  it('tracks primary action when primary button is pressed', async () => {
+    const { getByText } = render(<OTAUpdatesModal />);
+
+    fireEvent.press(getByText('Reload'));
+
+    await waitFor(() => {
+      expect(mockTrackEvent).toHaveBeenCalledWith(
+        expect.objectContaining({
+          event: MetaMetricsEvents.OTA_UPDATES_MODAL_PRIMARY_ACTION_CLICKED,
+        }),
+      );
+    });
+  });
+
+  it('reloads app when reload button is pressed on iOS', async () => {
+    const { getByText } = render(<OTAUpdatesModal />);
+
+    fireEvent.press(getByText('Reload'));
+
+    await waitFor(() => {
+      expect(mockReloadAsync).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  it('does not reload app when reload button is pressed on Android', async () => {
+    (Platform as unknown as { OS: string }).OS = 'android';
+
+    const { getByText } = render(<OTAUpdatesModal />);
+
+    fireEvent.press(getByText('Got it'));
+
+    await waitFor(() => {
+      expect(mockReloadAsync).not.toHaveBeenCalled();
+    });
+  });
+
+  it('logs error when reloadAsync throws', async () => {
+    const reloadError = new Error('Reload failed');
+
+    mockReloadAsync.mockRejectedValueOnce(reloadError);
+
+    const { getByText } = render(<OTAUpdatesModal />);
+
+    fireEvent.press(getByText('Reload'));
+
+    await waitFor(() => {
+      expect(mockLoggerError).toHaveBeenCalledWith(
+        reloadError,
+        'OTA Updates: Error reloading app after modal reload pressed',
+      );
+    });
+  });
+});