Merge branch 'main' into fix/perps/refresh-colors

Author: abretonc7s

app/components/Nav/App/App.tsx

@@ -72,6 +72,7 @@ import FundActionMenu from '../../UI/FundActionMenu';
 import NetworkSelector from '../../../components/Views/NetworkSelector';
 import ReturnToAppNotification from '../../Views/ReturnToAppNotification';
 import EditAccountName from '../../Views/EditAccountName/EditAccountName';
+import CardNotification from '../../Views/CardNotification';
 import LegacyEditMultichainAccountName from '../../Views/MultichainAccounts/sheets/EditAccountName';
 import { EditMultichainAccountName } from '../../Views/MultichainAccounts/sheets/EditMultichainAccountName';
 import { PPOMView } from '../../../lib/ppom/PPOMView';
@@ -573,6 +574,10 @@ const RootModalFlow = (props: RootModalFlowProps) => (
       component={ReturnToAppNotification}
       initialParams={{ ...props.route.params }}
     />
+    <Stack.Screen
+      name={Routes.CARD.NOTIFICATION}
+      component={CardNotification}
+    />
   </Stack.Navigator>
 );
 

app/components/UI/AssetOverview/AssetOverview.tsx

@@ -97,6 +97,7 @@ import { isNonEvmChainId } from '../../../core/Multichain/utils';
 import { selectTronResourcesBySelectedAccountGroup } from '../../../selectors/assets/assets-list';
 import { createStakedTrxAsset } from './utils/createStakedTrxAsset';
 ///: END:ONLY_INCLUDE_IF
+import { getDetectedGeolocation } from '../../../reducers/fiatOrders';
 
 interface AssetOverviewProps {
   asset: TokenI;
@@ -146,6 +147,8 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
   const tokenResult = useSelector((state: RootState) =>
     selectTokenDisplayData(state, asset.chainId as Hex, asset.address as Hex),
   );
+
+  const rampGeodetectedRegion = useSelector(getDetectedGeolocation);
   ///: BEGIN:ONLY_INCLUDE_IF(keyring-snaps)
   const multichainAssetsRates = useSelector(selectMultichainAssetsRates);
 
@@ -346,6 +349,7 @@ const AssetOverview: React.FC<AssetOverviewProps> = ({
           text: 'Buy',
           location: 'TokenDetails',
           chain_id_destination: getDecimalChainId(chainId),
+          region: rampGeodetectedRegion,
         })
         .build(),
     );

app/components/UI/BalanceEmptyState/BalanceEmptyState.tsx

@@ -24,6 +24,7 @@ import { trace, TraceName } from '../../../util/trace';
 import { createBuyNavigationDetails } from '../Ramp/Aggregator/routes/utils';
 import { BalanceEmptyStateProps } from './BalanceEmptyState.types';
 import bankTransferImage from '../../../images/bank-transfer.png';
+import { getDetectedGeolocation } from '../../../reducers/fiatOrders';
 
 /**
  * BalanceEmptyState smart component displays an empty state for wallet balance
@@ -37,6 +38,7 @@ const BalanceEmptyState: React.FC<BalanceEmptyStateProps> = ({
   const chainId = useSelector(selectChainId);
   const navigation = useNavigation();
   const { trackEvent, createEventBuilder } = useMetrics();
+  const rampGeodetectedRegion = useSelector(getDetectedGeolocation);
 
   const handleAction = () => {
     navigation.navigate(...createBuyNavigationDetails());
@@ -52,6 +54,7 @@ const BalanceEmptyState: React.FC<BalanceEmptyStateProps> = ({
           location: 'BalanceEmptyState',
           chain_id_destination: getDecimalChainId(chainId),
           ramp_type: 'BUY',
+          region: rampGeodetectedRegion,
         })
         .build(),
     );

app/components/UI/Card/components/AddFundsBottomSheet/AddFundsBottomSheet.tsx

@@ -1,4 +1,5 @@
 import React, { useCallback } from 'react';
+import { useSelector } from 'react-redux';
 import { NavigationProp, ParamListBase } from '@react-navigation/native';
 import BottomSheet, {
   BottomSheetRef,
@@ -32,6 +33,7 @@ import { strings } from '../../../../../../locales/i18n';
 import { CardHomeSelectors } from '../../../../../../e2e/selectors/Card/CardHome.selectors';
 import { createDepositNavigationDetails } from '../../../Ramp/Deposit/routes/utils';
 import { safeFormatChainIdToHex } from '../../util/safeFormatChainIdToHex';
+import { getDetectedGeolocation } from '../../../../../reducers/fiatOrders';
 
 export interface AddFundsBottomSheetProps {
   setOpenAddFundsBottomSheet: (open: boolean) => void;
@@ -53,6 +55,7 @@ const AddFundsBottomSheet: React.FC<AddFundsBottomSheetProps> = ({
     priorityToken,
   });
   const { trackEvent, createEventBuilder } = useMetrics();
+  const rampGeodetectedRegion = useSelector(getDetectedGeolocation);
 
   const closeBottomSheetAndNavigate = useCallback(
     (navigateFunc: () => void) => {
@@ -85,6 +88,7 @@ const AddFundsBottomSheet: React.FC<AddFundsBottomSheetProps> = ({
           location: 'CardHome',
           chain_id_destination: getDecimalChainId(priorityToken?.caipChainId),
           ramp_type: 'DEPOSIT',
+          region: rampGeodetectedRegion,
         })
         .build(),
     );
@@ -93,6 +97,7 @@ const AddFundsBottomSheet: React.FC<AddFundsBottomSheetProps> = ({
       name: TraceName.LoadDepositExperience,
     });
   }, [
+    rampGeodetectedRegion,
     closeBottomSheetAndNavigate,
     navigate,
     trackEvent,

app/components/UI/Card/components/Onboarding/OnboardingStep.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen } from '@testing-library/react-native';
+import { render } from '@testing-library/react-native';
 import { Text, View, TouchableOpacity, Image } from 'react-native';
 import OnboardingStep from './OnboardingStep';
 
@@ -61,25 +61,6 @@ jest.mock('@metamask/design-system-react-native', () => {
   };
 });
 
-// Mock react-native-safe-area-context
-jest.mock('react-native-safe-area-context', () => ({
-  SafeAreaView: ({
-    children,
-    ...props
-  }: {
-    children: React.ReactNode;
-    [key: string]: unknown;
-  }) => {
-    const ReactActual = jest.requireActual('react');
-    const { View } = jest.requireActual('react-native');
-    return ReactActual.createElement(
-      View,
-      { testID: 'safe-area-view', ...props },
-      children,
-    );
-  },
-}));
-
 // Mock the FOX logo image
 jest.mock('../../../../../images/branding/fox.png', () => 'fox-logo');
 
@@ -96,12 +77,6 @@ describe('OnboardingStep Component', () => {
   });
 
   describe('Component Rendering', () => {
-    it('renders without crashing with required props', () => {
-      render(<OnboardingStep {...defaultProps} />);
-
-      expect(screen.getByTestId('safe-area-view')).toBeDefined();
-    });
-
     it('renders with all required props provided', () => {
       const { getByText } = render(<OnboardingStep {...defaultProps} />);
 
@@ -284,22 +259,12 @@ describe('OnboardingStep Component', () => {
   });
 
   describe('Layout Structure', () => {
-    it('renders with proper container structure', () => {
-      const { getByTestId } = render(<OnboardingStep {...defaultProps} />);
-
-      // Verify SafeAreaView is rendered with correct props
-      const safeAreaView = getByTestId('safe-area-view');
-      expect(safeAreaView).toBeDefined();
-      expect(safeAreaView.props.edges).toEqual(['bottom']);
-    });
-
     it('maintains proper component hierarchy', () => {
       const { getByText, getByTestId } = render(
         <OnboardingStep {...defaultProps} />,
       );
 
       // Verify all main elements are present in the component tree
-      expect(getByTestId('safe-area-view')).toBeDefined();
       expect(getByText('Test Title')).toBeDefined();
       expect(getByText('Test Description')).toBeDefined();
       expect(getByTestId('test-form-fields')).toBeDefined();

app/components/UI/Card/components/Onboarding/OnboardingStep.tsx

@@ -1,14 +1,9 @@
 import React from 'react';
-import {
-  KeyboardAvoidingView,
-  Platform,
-  ScrollView,
-  Image,
-} from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
+import { Image } from 'react-native';
 import { useTailwind } from '@metamask/design-system-twrnc-preset';
 import { Box, Text, TextVariant } from '@metamask/design-system-react-native';
 import MM_CARD_MOCKUP from '../../../../../images/mm-card-mockup.png';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
 interface OnboardingStepProps {
   title: string;
@@ -26,57 +21,50 @@ const OnboardingStep = ({
   const tw = useTailwind();
 
   return (
-    <KeyboardAvoidingView
-      style={tw.style('flex-1')}
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
+    <KeyboardAwareScrollView
+      contentContainerStyle={tw.style('flex-grow p-4')}
+      showsVerticalScrollIndicator={false}
+      alwaysBounceVertical={false}
     >
-      <SafeAreaView style={tw.style('flex-1')} edges={['bottom']}>
-        <ScrollView
-          contentContainerStyle={tw.style('flex-grow px-4 pt-6 pb-6')}
-          showsVerticalScrollIndicator={false}
-          alwaysBounceVertical={false}
-        >
-          <Box twClassName="flex-1 items-stretch gap-4">
-            {/* Card Mockup Image */}
-            <Box twClassName="items-center">
-              <Image
-                source={MM_CARD_MOCKUP}
-                style={tw.style('w-full h-52')}
-                resizeMode="contain"
-              />
-            </Box>
-            <Box twClassName="gap-2">
-              {/* Title */}
-              <Text
-                variant={TextVariant.HeadingMd}
-                testID="onboarding-step-title"
-                twClassName="text-center text-default"
-              >
-                {title}
-              </Text>
+      <Box twClassName="flex-1 items-stretch gap-4 mb-6">
+        {/* Card Mockup Image */}
+        <Box twClassName="items-center">
+          <Image
+            source={MM_CARD_MOCKUP}
+            style={tw.style('w-full h-52')}
+            resizeMode="contain"
+          />
+        </Box>
+        <Box twClassName="gap-2">
+          {/* Title */}
+          <Text
+            variant={TextVariant.HeadingMd}
+            testID="onboarding-step-title"
+            twClassName="text-center text-default"
+          >
+            {title}
+          </Text>
 
-              {/* Description */}
-              <Text
-                variant={TextVariant.BodyMd}
-                testID="onboarding-step-description"
-                twClassName="text-center"
-              >
-                {description}
-              </Text>
-            </Box>
-            {/* Form */}
-            <Box testID="onboarding-step-form" twClassName="gap-4 flex-1">
-              {formFields}
-            </Box>
+          {/* Description */}
+          <Text
+            variant={TextVariant.BodyMd}
+            testID="onboarding-step-description"
+            twClassName="text-center"
+          >
+            {description}
+          </Text>
+        </Box>
+        {/* Form */}
+        <Box testID="onboarding-step-form" twClassName="gap-4 flex-1">
+          {formFields}
+        </Box>
 
-            {/* Actions */}
-            <Box testID="onboarding-step-actions" twClassName="mt-2">
-              {actions}
-            </Box>
-          </Box>
-        </ScrollView>
-      </SafeAreaView>
-    </KeyboardAvoidingView>
+        {/* Actions */}
+        <Box testID="onboarding-step-actions" twClassName="mt-2">
+          {actions}
+        </Box>
+      </Box>
+    </KeyboardAwareScrollView>
   );
 };
 

app/components/UI/Card/components/Onboarding/PhysicalAddress.tsx

@@ -633,7 +633,6 @@ const PhysicalAddress = () => {
                   {strings(
                     'card.card_onboarding.physical_address.privacy_policy_1',
                   )}
-
                   <Text
                     variant={TextVariant.BodyMd}
                     twClassName="text-primary-default underline"
@@ -642,10 +641,6 @@ const PhysicalAddress = () => {
                       'card.card_onboarding.physical_address.privacy_policy_2',
                     )}
                   </Text>
-
-                  {strings(
-                    'card.card_onboarding.physical_address.privacy_policy_3',
-                  )}
                 </Text>
               </TouchableOpacity>
             }

app/components/UI/Card/components/Onboarding/SetPhoneNumber.tsx

@@ -39,26 +39,14 @@ const SetPhoneNumber = () => {
     if (!registrationSettings?.countries) {
       return [];
     }
-
-    const uniqueCallingCodes = new Map();
-
-    registrationSettings.countries
+    return [...registrationSettings.countries]
+      .sort((a, b) => a.name.localeCompare(b.name))
       .filter((country) => country.canSignUp)
-      .forEach((country) => {
-        const callingCode = country.callingCode;
-        if (!uniqueCallingCodes.has(callingCode)) {
-          uniqueCallingCodes.set(callingCode, {
-            key: country.iso3166alpha2,
-            value: callingCode,
-            label: `+${callingCode}`,
-          });
-        }
-      });
-
-    // Convert Map values to array and sort
-    return Array.from(uniqueCallingCodes.values()).sort((a, b) =>
-      a.value.localeCompare(b.value),
-    );
+      .map((country) => ({
+        key: country.iso3166alpha2,
+        value: country.callingCode,
+        label: `+${country.callingCode} ${country.name}`,
+      }));
   }, [registrationSettings]);
 
   const initialSelectedCountryAreaCode = useMemo(() => {

app/components/UI/CollectibleModal/CollectibleModal.tsx

@@ -72,7 +72,7 @@ const CollectibleModal = () => {
 
   useEffect(() => {
     trackEvent(
-      createEventBuilder(MetaMetricsEvents.COLLECTIBLE_DETAILS_OPENED)
+      createEventBuilder(MetaMetricsEvents.NFT_DETAILS_OPENED)
         .addProperties({ chain_id: getDecimalChainId(chainId) })
         .build(),
     );