MOVING COUNTRIES:

app/package.json

@@ -110,12 +110,10 @@
     "add": "^2.0.6",
     "asn1js": "^3.0.6",
     "country-emoji": "^1.5.6",
-    "country-iso-3-to-2": "^1.1.1",
     "elliptic": "^6.6.1",
     "ethers": "^6.11.0",
     "expo-modules-core": "^2.2.1",
     "hash.js": "^1.1.7",
-    "i18n-iso-countries": "^7.14.0",
     "js-sha1": "^0.7.0",
     "js-sha256": "^0.11.1",
     "js-sha512": "^0.9.0",

app/src/components/flag/RoundFlag.tsx

@@ -2,11 +2,12 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import getCountryISO2 from 'country-iso-3-to-2';
 import React from 'react';
 import { View } from 'react-native';
 import * as CountryFlags from 'react-native-svg-circle-country-flags';
 
+import { alpha3ToAlpha2 } from '@selfxyz/common/constants/countries';
+
 import { slate300 } from '@/utils/colors';
 
 type CountryFlagComponent = React.ComponentType<{
@@ -41,7 +42,7 @@ const findFlagComponent = (formattedCode: string) => {
 const getCountryFlag = (countryCode: string): CountryFlagComponent | null => {
   try {
     const normalizedCountryCode = countryCode === 'D<<' ? 'DEU' : countryCode;
-    const iso2 = getCountryISO2(normalizedCountryCode);
+    const iso2 = alpha3ToAlpha2(normalizedCountryCode);
     if (!iso2) {
       return null;
     }

app/src/providers/selfClientProvider.tsx

@@ -139,7 +139,7 @@
           navigationRef.navigate('ComingSoon', {
             countryCode,
             documentCategory,
           } as any);
         }
       },
     );
@@ -213,6 +213,37 @@
       }
     });
 
+    addListener(
+      SdkEvents.DOCUMENT_COUNTRY_SELECTED,
+      ({ countryCode, documentTypes }) => {
+        if (navigationRef.isReady()) {
+          // @ts-expect-error
+          navigationRef.navigate('IDPicker', { countryCode, documentTypes });
+        }
+      },
+    );
+    addListener(
+      SdkEvents.DOCUMENT_TYPE_SELECTED,
+      ({ documentType, countryCode }) => {
+        if (navigationRef.isReady()) {
+          switch (documentType) {
+            case 'p':
+              navigationRef.navigate('DocumentOnboarding');
+              break;
+            case 'i':
+              navigationRef.navigate('DocumentOnboarding');
+              break;
+            case 'a':
+              navigationRef.navigate('AadhaarUpload', { countryCode } as never);
+              break;
+            default:
+              navigationRef.navigate('ComingSoon', { countryCode } as never);
+              break;
+          }
+        }
+      },
+    );
+
     return map;
   }, []);
 

app/src/screens/dev/CreateMockScreen.tsx

@@ -3,7 +3,6 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import { flag } from 'country-emoji';
-import getCountryISO2 from 'country-iso-3-to-2';
 import React, { useCallback, useState } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -23,6 +22,7 @@ import { useNavigation } from '@react-navigation/native';
 import { ChevronDown, Minus, Plus, X } from '@tamagui/lucide-icons';
 
 import { countryCodes } from '@selfxyz/common/constants';
+import { getCountryISO2 } from '@selfxyz/common/constants/countries';
 import {
   generateMockDocument,
   signatureAlgorithmToStrictSignatureAlgorithm,

app/src/screens/dev/CreateMockScreenDeepLink.tsx

@@ -3,14 +3,14 @@
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
 import { flag } from 'country-emoji';
-import getCountryISO2 from 'country-iso-3-to-2';
 import React, { useCallback, useEffect, useState } from 'react';
 import { ActivityIndicator, View } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { ScrollView, Text, XStack, YStack } from 'tamagui';
 import { useNavigation } from '@react-navigation/native';
 
 import { countryCodes } from '@selfxyz/common/constants';
+import { getCountryISO2 } from '@selfxyz/common/constants/countries';
 import type { IdDocInput } from '@selfxyz/common/utils';
 import { genMockIdDocAndInitDataParsing } from '@selfxyz/common/utils/passports';
 import { MockDataEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';

app/src/screens/dev/DevSettingsScreen.tsx

@@ -212,7 +212,7 @@ const ScreenSelector = ({}) => {
           <Select.Group>
             {useMemo(
               () =>
-                items.map((item, i) => {
+                items.sort().map((item, i) => {
                   return (
                     <Select.Item index={i} key={item} value={item}>
                       <Select.ItemText>{item}</Select.ItemText>

app/src/screens/document/CountryPickerScreen.tsx

@@ -2,28 +2,23 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-import { alpha2ToAlpha3 } from 'i18n-iso-countries';
-import { memo, useCallback, useEffect, useMemo, useState } from 'react';
+import { memo, useCallback } from 'react';
 import { FlatList, TouchableOpacity, View } from 'react-native';
 import { Spinner, XStack, YStack } from 'tamagui';
-import { useNavigation } from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
 
 import { commonNames } from '@selfxyz/common/constants/countries';
-import { SdkEvents, useSelfClient } from '@selfxyz/mobile-sdk-alpha';
+import {
+  SdkEvents,
+  useCountries,
+  useSelfClient,
+} from '@selfxyz/mobile-sdk-alpha';
 
 import { RoundFlag } from '@/components/flag/RoundFlag';
 import { DocumentFlowNavBar } from '@/components/NavBar/DocumentFlowNavBar';
 import { BodyText } from '@/components/typography/BodyText';
-import type { RootStackParamList } from '@/navigation';
 import { black, slate100, slate500 } from '@/utils/colors';
 import { advercase, dinot } from '@/utils/fonts';
 import { buttonTap } from '@/utils/haptic';
-import { getCountry } from '@/utils/locale';
-
-interface CountryData {
-  [countryCode: string]: string[];
-}
 
 interface CountryListItem {
   key: string;
@@ -61,13 +56,11 @@ const CountryItem = memo<{
 CountryItem.displayName = 'CountryItem';
 
 const CountryPickerScreen: React.FC = () => {
-  const [countryData, setCountryData] = useState<CountryData>({});
-  const [loading, setLoading] = useState(true);
-  const [userCountryCode, setUserCountryCode] = useState<string | null>(null);
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
   const selfClient = useSelfClient();
 
+  const { countryData, countryList, loading, userCountryCode, showSuggestion } =
+    useCountries();
+
   const onPressCountry = useCallback(
     (countryCode: string) => {
       buttonTap();
@@ -91,78 +84,16 @@ const CountryPickerScreen: React.FC = () => {
           countryName: countryName,
           documentTypes: documentTypes,
         });
-
-        navigation.navigate('IDPicker', {
-          countryCode,
-          documentTypes,
-        } as never);
       } else {
-        navigation.navigate('ComingSoon', { countryCode } as never);
+        selfClient.emit(SdkEvents.PROVING_PASSPORT_NOT_SUPPORTED, {
+          countryCode: countryCode,
+          documentCategory: null,
+        });
       }
     },
-    [countryData, navigation, selfClient],
+    [countryData, selfClient],
   );
 
-  useEffect(() => {
-    const fetchCountryData = async () => {
-      try {
-        const response = await fetch('https://api.staging.self.xyz/id-picker');
-        const result = await response.json();
-
-        if (result.status === 'success') {
-          setCountryData(result.data);
-          if (__DEV__) {
-            console.log('Set country data:', result.data);
-          }
-        } else {
-          console.error('API returned non-success status:', result.status);
-        }
-      } catch (error) {
-        console.error('Error fetching country data:', error);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchCountryData();
-  }, []);
-
-  useEffect(() => {
-    try {
-      const countryCode2Letter = getCountry(); // Returns 2-letter code like "US"
-      if (countryCode2Letter) {
-        const countryCode3Letter = alpha2ToAlpha3(countryCode2Letter);
-        if (
-          countryCode3Letter &&
-          commonNames[countryCode3Letter as keyof typeof commonNames]
-        ) {
-          setUserCountryCode(countryCode3Letter);
-          if (__DEV__) {
-            console.log('Detected user country:', countryCode3Letter);
-          }
-        }
-      }
-    } catch (error) {
-      console.error('Error detecting user country:', error);
-    }
-  }, []);
-
-  const countryList = useMemo(() => {
-    const allCountries = Object.keys(countryData).map(countryCode => ({
-      key: countryCode,
-      countryCode,
-    }));
-
-    // Exclude user country from main list since it's shown separately
-    if (userCountryCode && countryData[userCountryCode]) {
-      return allCountries.filter(c => c.countryCode !== userCountryCode);
-    }
-
-    return allCountries;
-  }, [countryData, userCountryCode]);
-
-  const showSuggestion = userCountryCode && countryData[userCountryCode];
-
   const renderItem = useCallback(
     ({ item }: { item: CountryListItem }) => (
       <CountryItem countryCode={item.countryCode} onSelect={onPressCountry} />
@@ -219,7 +150,9 @@ const CountryPickerScreen: React.FC = () => {
                   SUGGESTION
                 </BodyText>
                 <CountryItem
-                  countryCode={userCountryCode}
+                  countryCode={
+                    userCountryCode as string /*safe due to showSuggestion*/
+                  }
                   onSelect={onPressCountry}
                 />
                 <BodyText

app/src/screens/document/IDPickerScreen.tsx

@@ -5,8 +5,7 @@
 import React from 'react';
 import { View, XStack, YStack } from 'tamagui';
 import type { RouteProp } from '@react-navigation/native';
-import { useNavigation, useRoute } from '@react-navigation/native';
-import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
+import { useRoute } from '@react-navigation/native';
 
 import { SdkEvents, useSelfClient } from '@selfxyz/mobile-sdk-alpha';
 
@@ -83,8 +82,6 @@ const IDPickerScreen: React.FC = () => {
   const { countryCode = '', documentTypes = [] } = route.params || {};
   const bottom = useSafeAreaInsets().bottom;
   const selfClient = useSelfClient();
-  const navigation =
-    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
 
   const onSelectDocumentType = (docType: string) => {
     buttonTap();
@@ -97,27 +94,6 @@ const IDPickerScreen: React.FC = () => {
       countryCode: countryCode,
       countryName: countryName,
     });
-    switch (docType) {
-      case 'p':
-        navigation.navigate('DocumentOnboarding');
-        break;
-      case 'i':
-        navigation.navigate('DocumentOnboarding');
-        break;
-      case 'a':
-        navigation.navigate('AadhaarUpload', { countryCode } as never);
-        break;
-      default:
-        navigation.navigate('ComingSoon', { countryCode } as never);
-        break;
-    }
-
-    // TODO: Navigate to the next screen based on document type
-    if (__DEV__) {
-      console.log(
-        `Selected document type: ${docType} for country: ${countryCode}`,
-      );
-    }
   };
 
   return (

app/src/utils/colors.ts

@@ -2,66 +2,4 @@
 // SPDX-License-Identifier: BUSL-1.1
 // NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
 
-/// NEW
-export const amber50 = '#FFFBEB';
-export const amber500 = '#F2E3C8';
-export const black = '#000000';
-export const blue100 = '#DBEAFE';
-export const blue600 = '#2563EB';
-export const blue700 = '#1D4ED8';
-// OLD
-export const borderColor = '#343434';
-
-export const charcoal = '#485469';
-
-export const cyan300 = '#67E8F9';
-
-export const emerald500 = '#10B981';
-
-export const green500 = '#22C55E';
-
-export const neutral400 = '#A3A3A3';
-
-export const neutral700 = '#404040';
-
-export const red500 = '#EF4444';
-
-export const separatorColor = '#E0E0E0';
-
-export const sky500 = '#0EA5E9';
-
-export const slate100 = '#F8FAFC';
-
-export const slate200 = '#E2E8F0';
-
-export const slate300 = '#CBD5E1';
-
-export const slate400 = '#94A3B8';
-
-export const slate50 = '#F8FAFC';
-
-export const slate500 = '#64748B';
-
-export const slate600 = '#475569';
-
-export const slate700 = '#334155';
-
-export const slate800 = '#1E293B';
-
-export const slate900 = '#0F172A';
-
-export const teal300 = '#5EEAD4';
-
-export const teal500 = '#5EEAD4';
-
-export const textBlack = '#333333';
-
-export const white = '#ffffff';
-
-export const yellow500 = '#FDE047';
-
-export const zinc400 = '#A1A1AA';
-
-export const zinc500 = '#71717A';
-export const zinc800 = '#27272A';
-export const zinc900 = '#18181B';
+export * from '@selfxyz/mobile-sdk-alpha/constants/colors';

common/package.json

@@ -672,7 +672,6 @@
     "axios": "^1.7.2",
     "buffer": "^6.0.3",
     "country-emoji": "^1.5.6",
-    "country-iso-3-to-2": "^1.1.1",
     "elliptic": "^6.5.5",
     "ethers": "^6.14.4",
     "fs": "^0.0.1-security",