[pull] main from MetaMask:main

.github/CODEOWNERS

@@ -42,6 +42,7 @@ app/core/Engine/types.ts                                    @MetaMask/mobile-pla
 app/core/Engine/controllers/remote-feature-flag-controller/ @MetaMask/mobile-platform
 app/core/DeeplinkManager                                    @MetaMask/mobile-platform
 scripts/build.sh                                            @MetaMask/mobile-platform
+scripts/update-expo-channel.js                              @MetaMask/mobile-admins
 
 # Platform & Snaps Code Fencing File
 metro.transform.js @MetaMask/mobile-platform @MetaMask/core-platform

.js.env.example

@@ -44,6 +44,9 @@ export WALLET_CONNECT_PROJECT_ID=""
 # Default PORT for metro
 export WATCHER_PORT=8081
 
+# Expo Project ID for OTA updates
+export EXPO_PROJECT_ID=""
+
 # Environment: "production", "pre-release" or "dev"
 export METAMASK_ENVIRONMENT="dev"
 

app.config.js

@@ -1,3 +1,5 @@
+const { RUNTIME_VERSION, PROJECT_ID, UPDATE_URL } = require('./ota.config.js');
+
 module.exports = {
   name: 'MetaMask',
   displayName: 'MetaMask',
@@ -15,7 +17,9 @@ module.exports = {
             '../../node_modules/@notifee/react-native/android/libs',
           ],
         },
-        ios: {},
+        ios: {
+          jsEngine: 'hermes',
+        },
       },
     ],
     [
@@ -36,5 +40,28 @@ module.exports = {
   ios: {
     bundleIdentifier: 'io.metamask.MetaMask',
     usesAppleSignIn: true,
+    jsEngine: 'hermes',
+  },
+  expo: {
+    owner: 'metamask-test',
+    runtimeVersion: RUNTIME_VERSION,
+    updates: {
+      url: UPDATE_URL,
+      // Channel is set by requestHeaders, will be overridden with build script
+      requestHeaders: {
+        'expo-channel-name': 'preview',
+      },
+    },
+    extra: {
+      eas: {
+        projectId: PROJECT_ID,
+      },
+    },
+    android: {
+      package: 'io.metamask',
+    },
+    ios: {
+      bundleIdentifier: 'io.metamask.MetaMask',
+    },
   },
 };

app/__mocks__/expo-updates.ts

@@ -0,0 +1,34 @@
+// Mock for expo-updates module
+export const channel = 'test-channel';
+export const runtimeVersion = '1.0.0';
+export const isEmbeddedLaunch = true;
+export const isEnabled = true;
+
+export const checkForUpdateAsync = jest.fn();
+export const fetchUpdateAsync = jest.fn();
+export const reloadAsync = jest.fn();
+export const useUpdates = jest.fn();
+
+export const UpdateEventType = {
+  ERROR: 'error',
+  NO_UPDATE_AVAILABLE: 'noUpdateAvailable',
+  UPDATE_AVAILABLE: 'updateAvailable',
+};
+
+export const UpdateCheckResult = {
+  isAvailable: false,
+  manifest: null,
+};
+
+export default {
+  channel,
+  runtimeVersion,
+  isEmbeddedLaunch,
+  isEnabled,
+  checkForUpdateAsync,
+  fetchUpdateAsync,
+  reloadAsync,
+  useUpdates,
+  UpdateEventType,
+  UpdateCheckResult,
+};

app/components/UI/Navbar/index.js

@@ -2041,105 +2041,13 @@ export function getDepositNavbarOptions(
               navigation.dangerouslyGetParent()?.pop();
               onClose?.();
             }}
+            testID="deposit-close-navbar-button"
           />
         )
       : null,
   };
 }
 
-export function getFiatOnRampAggNavbar(
-  navigation,
-  { title = '', showBack = true, showCancel = true, showNetwork = false } = {},
-  themeColors,
-  onCancel,
-) {
-  const innerStyles = StyleSheet.create({
-    headerButtonText: {
-      color: themeColors.primary.default,
-      fontSize: scale(11),
-      ...fontStyles.normal,
-    },
-    headerStyle: {
-      backgroundColor: themeColors.background.default,
-      shadowColor: importedColors.transparent,
-      elevation: 0,
-    },
-    headerTitleStyle: {
-      fontSize: 18,
-      ...fontStyles.normal,
-      color: themeColors.text.default,
-      ...(!showBack && { textAlign: 'center' }),
-    },
-  });
-
-  const leftActionText = strings('navigation.back');
-
-  const leftAction = () => navigation.pop();
-
-  const navigationCancelText = strings('navigation.cancel');
-
-  const disableNetwork = !showNetwork;
-  const showSelectedNetwork = showNetwork;
-
-  return {
-    headerTitle: () => (
-      <NavbarTitle
-        title={title}
-        disableNetwork={disableNetwork}
-        showSelectedNetwork={showSelectedNetwork}
-        translate={false}
-      />
-    ),
-    headerLeft: () => {
-      if (!showBack) return <View />;
-
-      return Device.isAndroid() ? (
-        <TouchableOpacity
-          onPress={leftAction}
-          style={styles.backButton}
-          accessibilityRole="button"
-          accessible
-        >
-          <IonicIcon
-            name={'arrow-back'}
-            size={24}
-            style={innerStyles.headerIcon}
-          />
-        </TouchableOpacity>
-      ) : (
-        <TouchableOpacity
-          onPress={leftAction}
-          style={styles.closeButton}
-          accessibilityRole="button"
-          accessible
-        >
-          <Text style={innerStyles.headerButtonText}>{leftActionText}</Text>
-        </TouchableOpacity>
-      );
-    },
-    headerRight: () => {
-      if (!showCancel) return <View />;
-      return (
-        <TouchableOpacity
-          onPress={() => {
-            navigation.dangerouslyGetParent()?.pop();
-            onCancel?.();
-          }}
-          style={styles.closeButton}
-          accessibilityRole="button"
-          accessible
-        >
-          <Text style={innerStyles.headerButtonText}>
-            {navigationCancelText}
-          </Text>
-        </TouchableOpacity>
-      );
-    },
-    headerStyle: innerStyles.headerStyle,
-    headerTitleStyle: innerStyles.headerTitleStyle,
-  };
-}
-
 export const getEditAccountNameNavBarOptions = (goBack, themeColors) => {
   const innerStyles = StyleSheet.create({
     headerStyle: {

app/components/UI/Ramp/Aggregator/Views/BuildQuote/BuildQuote.test.tsx

@@ -430,9 +430,9 @@ describe('BuildQuote View', () => {
 
   it('navigates and tracks event on cancel button press', async () => {
     render(BuildQuote);
-    fireEvent.press(screen.getByRole('button', { name: 'Cancel' }));
+    fireEvent.press(screen.getByTestId('deposit-close-navbar-button'));
     expect(mockPop).toHaveBeenCalled();
-    expect(mockTrackEvent).toBeCalledWith('ONRAMP_CANCELED', {
+    expect(mockTrackEvent).toHaveBeenCalledWith('ONRAMP_CANCELED', {
       chain_id_destination: '1',
       location: 'Amount to Buy Screen',
     });
@@ -444,9 +444,9 @@ describe('BuildQuote View', () => {
     mockUseRampSDKValues.isSell = true;
     mockUseRampSDKValues.rampType = RampType.SELL;
     render(BuildQuote);
-    fireEvent.press(screen.getByRole('button', { name: 'Cancel' }));
+    fireEvent.press(screen.getByTestId('deposit-close-navbar-button'));
     expect(mockPop).toHaveBeenCalled();
-    expect(mockTrackEvent).toBeCalledWith('OFFRAMP_CANCELED', {
+    expect(mockTrackEvent).toHaveBeenCalledWith('OFFRAMP_CANCELED', {
       chain_id_source: '1',
       location: 'Amount to Sell Screen',
     });

app/components/UI/Ramp/Aggregator/Views/BuildQuote/BuildQuote.tsx

@@ -52,7 +52,7 @@ import BadgeWrapper, {
 import BadgeNetwork from '../../../../../../component-library/components/Badges/Badge/variants/BadgeNetwork';
 
 import { NATIVE_ADDRESS } from '../../../../../../constants/on-ramp';
-import { getFiatOnRampAggNavbar } from '../../../../Navbar';
+import { getDepositNavbarOptions } from '../../../../Navbar';
 import { strings } from '../../../../../../../locales/i18n';
 import {
   createNavigationDetails,
@@ -115,10 +115,8 @@ export const createBuildQuoteNavDetails =
 const BuildQuote = () => {
   const navigation = useNavigation();
   const params = useParams<BuildQuoteParams>();
-  const {
-    styles,
-    theme: { colors, themeAppearance },
-  } = useStyles(styleSheet, {});
+  const { styles, theme } = useStyles(styleSheet, {});
+  const { colors, themeAppearance } = theme;
   const trackEvent = useAnalytics();
   const [amountFocused, setAmountFocused] = useState(false);
   const [amount, setAmount] = useState('0');
@@ -448,20 +446,19 @@ const BuildQuote = () => {
 
   useEffect(() => {
     navigation.setOptions(
-      getFiatOnRampAggNavbar(
+      getDepositNavbarOptions(
         navigation,
         {
           title: isBuy
             ? strings('fiat_on_ramp_aggregator.amount_to_buy')
             : strings('fiat_on_ramp_aggregator.amount_to_sell'),
           showBack: params.showBack,
-          showNetwork: false,
         },
-        colors,
+        theme,
         handleCancelPress,
       ),
     );
-  }, [navigation, colors, handleCancelPress, params.showBack, isBuy]);
+  }, [navigation, theme, handleCancelPress, params.showBack, isBuy]);
 
   /**
    * * Keypad style, handlers and effects