Skip to content

Commit f7c5ef0

Browse files
aaronmgdraaronmgdr
authored
MOVING COUNTRIES: (#1229)
* wip * move colors * sort the dev screen menu alphabetically. for sanity * lint * move country hooks to sdk * added peer dep * add as dev dep * remove SelfMobileSdk component before someone thinks that it should be used * mock it like before
1 parent 9cc5d90 commit f7c5ef0

File tree

26 files changed

+535
-296
lines changed

26 files changed

+535
-296
lines changed

‎app/package.json‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -110,12 +110,10 @@
110110
"add": "^2.0.6",
111111
"asn1js": "^3.0.6",
112112
"country-emoji": "^1.5.6",
113-
"country-iso-3-to-2": "^1.1.1",
114113
"elliptic": "^6.6.1",
115114
"ethers": "^6.11.0",
116115
"expo-modules-core": "^2.2.1",
117116
"hash.js": "^1.1.7",
118-
"i18n-iso-countries": "^7.14.0",
119117
"js-sha1": "^0.7.0",
120118
"js-sha256": "^0.11.1",
121119
"js-sha512": "^0.9.0",

‎app/src/components/flag/RoundFlag.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,12 @@
22
// SPDX-License-Identifier: BUSL-1.1
33
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
44

5-
import getCountryISO2 from 'country-iso-3-to-2';
65
import React from 'react';
76
import { View } from 'react-native';
87
import * as CountryFlags from 'react-native-svg-circle-country-flags';
98

9+
import { alpha3ToAlpha2 } from '@selfxyz/common/constants/countries';
10+
1011
import { slate300 } from '@/utils/colors';
1112

1213
type CountryFlagComponent = React.ComponentType<{
@@ -41,7 +42,7 @@ const findFlagComponent = (formattedCode: string) => {
4142
const getCountryFlag = (countryCode: string): CountryFlagComponent | null => {
4243
try {
4344
const normalizedCountryCode = countryCode === 'D<<' ? 'DEU' : countryCode;
44-
const iso2 = getCountryISO2(normalizedCountryCode);
45+
const iso2 = alpha3ToAlpha2(normalizedCountryCode);
4546
if (!iso2) {
4647
return null;
4748
}

‎app/src/providers/selfClientProvider.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -213,6 +213,37 @@ export const SelfClientProvider = ({ children }: PropsWithChildren) => {
213213
}
214214
});
215215

216+
addListener(
217+
SdkEvents.DOCUMENT_COUNTRY_SELECTED,
218+
({ countryCode, documentTypes }) => {
219+
if (navigationRef.isReady()) {
220+
// @ts-expect-error
221+
navigationRef.navigate('IDPicker', { countryCode, documentTypes });
222+
}
223+
},
224+
);
225+
addListener(
226+
SdkEvents.DOCUMENT_TYPE_SELECTED,
227+
({ documentType, countryCode }) => {
228+
if (navigationRef.isReady()) {
229+
switch (documentType) {
230+
case 'p':
231+
navigationRef.navigate('DocumentOnboarding');
232+
break;
233+
case 'i':
234+
navigationRef.navigate('DocumentOnboarding');
235+
break;
236+
case 'a':
237+
navigationRef.navigate('AadhaarUpload', { countryCode } as never);
238+
break;
239+
default:
240+
navigationRef.navigate('ComingSoon', { countryCode } as never);
241+
break;
242+
}
243+
}
244+
},
245+
);
246+
216247
return map;
217248
}, []);
218249

‎app/src/screens/dev/CreateMockScreen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
44

55
import { flag } from 'country-emoji';
6-
import getCountryISO2 from 'country-iso-3-to-2';
76
import React, { useCallback, useState } from 'react';
87
import { TouchableOpacity, View } from 'react-native';
98
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -23,6 +22,7 @@ import { useNavigation } from '@react-navigation/native';
2322
import { ChevronDown, Minus, Plus, X } from '@tamagui/lucide-icons';
2423

2524
import { countryCodes } from '@selfxyz/common/constants';
25+
import { getCountryISO2 } from '@selfxyz/common/constants/countries';
2626
import {
2727
generateMockDocument,
2828
signatureAlgorithmToStrictSignatureAlgorithm,

‎app/src/screens/dev/CreateMockScreenDeepLink.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
44

55
import { flag } from 'country-emoji';
6-
import getCountryISO2 from 'country-iso-3-to-2';
76
import React, { useCallback, useEffect, useState } from 'react';
87
import { ActivityIndicator, View } from 'react-native';
98
import { useSafeAreaInsets } from 'react-native-safe-area-context';
109
import { ScrollView, Text, XStack, YStack } from 'tamagui';
1110
import { useNavigation } from '@react-navigation/native';
1211

1312
import { countryCodes } from '@selfxyz/common/constants';
13+
import { getCountryISO2 } from '@selfxyz/common/constants/countries';
1414
import type { IdDocInput } from '@selfxyz/common/utils';
1515
import { genMockIdDocAndInitDataParsing } from '@selfxyz/common/utils/passports';
1616
import { MockDataEvents } from '@selfxyz/mobile-sdk-alpha/constants/analytics';

‎app/src/screens/dev/DevSettingsScreen.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -212,7 +212,7 @@ const ScreenSelector = ({}) => {
212212
<Select.Group>
213213
{useMemo(
214214
() =>
215-
items.map((item, i) => {
215+
items.sort().map((item, i) => {
216216
return (
217217
<Select.Item index={i} key={item} value={item}>
218218
<Select.ItemText>{item}</Select.ItemText>

‎app/src/screens/document/CountryPickerScreen.tsx‎

Lines changed: 17 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -2,28 +2,23 @@
22
// SPDX-License-Identifier: BUSL-1.1
33
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
44

5-
import { alpha2ToAlpha3 } from 'i18n-iso-countries';
6-
import { memo, useCallback, useEffect, useMemo, useState } from 'react';
5+
import { memo, useCallback } from 'react';
76
import { FlatList, TouchableOpacity, View } from 'react-native';
87
import { Spinner, XStack, YStack } from 'tamagui';
9-
import { useNavigation } from '@react-navigation/native';
10-
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
118

129
import { commonNames } from '@selfxyz/common/constants/countries';
13-
import { SdkEvents, useSelfClient } from '@selfxyz/mobile-sdk-alpha';
10+
import {
11+
SdkEvents,
12+
useCountries,
13+
useSelfClient,
14+
} from '@selfxyz/mobile-sdk-alpha';
1415

1516
import { RoundFlag } from '@/components/flag/RoundFlag';
1617
import { DocumentFlowNavBar } from '@/components/NavBar/DocumentFlowNavBar';
1718
import { BodyText } from '@/components/typography/BodyText';
18-
import type { RootStackParamList } from '@/navigation';
1919
import { black, slate100, slate500 } from '@/utils/colors';
2020
import { advercase, dinot } from '@/utils/fonts';
2121
import { buttonTap } from '@/utils/haptic';
22-
import { getCountry } from '@/utils/locale';
23-
24-
interface CountryData {
25-
[countryCode: string]: string[];
26-
}
2722

2823
interface CountryListItem {
2924
key: string;
@@ -61,13 +56,11 @@ const CountryItem = memo<{
6156
CountryItem.displayName = 'CountryItem';
6257

6358
const CountryPickerScreen: React.FC = () => {
64-
const [countryData, setCountryData] = useState<CountryData>({});
65-
const [loading, setLoading] = useState(true);
66-
const [userCountryCode, setUserCountryCode] = useState<string | null>(null);
67-
const navigation =
68-
useNavigation<NativeStackNavigationProp<RootStackParamList>>();
6959
const selfClient = useSelfClient();
7060

61+
const { countryData, countryList, loading, userCountryCode, showSuggestion } =
62+
useCountries();
63+
7164
const onPressCountry = useCallback(
7265
(countryCode: string) => {
7366
buttonTap();
@@ -91,78 +84,16 @@ const CountryPickerScreen: React.FC = () => {
9184
countryName: countryName,
9285
documentTypes: documentTypes,
9386
});
94-
95-
navigation.navigate('IDPicker', {
96-
countryCode,
97-
documentTypes,
98-
} as never);
9987
} else {
100-
navigation.navigate('ComingSoon', { countryCode } as never);
88+
selfClient.emit(SdkEvents.PROVING_PASSPORT_NOT_SUPPORTED, {
89+
countryCode: countryCode,
90+
documentCategory: null,
91+
});
10192
}
10293
},
103-
[countryData, navigation, selfClient],
94+
[countryData, selfClient],
10495
);
10596

106-
useEffect(() => {
107-
const fetchCountryData = async () => {
108-
try {
109-
const response = await fetch('https://api.staging.self.xyz/id-picker');
110-
const result = await response.json();
111-
112-
if (result.status === 'success') {
113-
setCountryData(result.data);
114-
if (__DEV__) {
115-
console.log('Set country data:', result.data);
116-
}
117-
} else {
118-
console.error('API returned non-success status:', result.status);
119-
}
120-
} catch (error) {
121-
console.error('Error fetching country data:', error);
122-
} finally {
123-
setLoading(false);
124-
}
125-
};
126-
127-
fetchCountryData();
128-
}, []);
129-
130-
useEffect(() => {
131-
try {
132-
const countryCode2Letter = getCountry(); // Returns 2-letter code like "US"
133-
if (countryCode2Letter) {
134-
const countryCode3Letter = alpha2ToAlpha3(countryCode2Letter);
135-
if (
136-
countryCode3Letter &&
137-
commonNames[countryCode3Letter as keyof typeof commonNames]
138-
) {
139-
setUserCountryCode(countryCode3Letter);
140-
if (__DEV__) {
141-
console.log('Detected user country:', countryCode3Letter);
142-
}
143-
}
144-
}
145-
} catch (error) {
146-
console.error('Error detecting user country:', error);
147-
}
148-
}, []);
149-
150-
const countryList = useMemo(() => {
151-
const allCountries = Object.keys(countryData).map(countryCode => ({
152-
key: countryCode,
153-
countryCode,
154-
}));
155-
156-
// Exclude user country from main list since it's shown separately
157-
if (userCountryCode && countryData[userCountryCode]) {
158-
return allCountries.filter(c => c.countryCode !== userCountryCode);
159-
}
160-
161-
return allCountries;
162-
}, [countryData, userCountryCode]);
163-
164-
const showSuggestion = userCountryCode && countryData[userCountryCode];
165-
16697
const renderItem = useCallback(
16798
({ item }: { item: CountryListItem }) => (
16899
<CountryItem countryCode={item.countryCode} onSelect={onPressCountry} />
@@ -219,7 +150,9 @@ const CountryPickerScreen: React.FC = () => {
219150
SUGGESTION
220151
</BodyText>
221152
<CountryItem
222-
countryCode={userCountryCode}
153+
countryCode={
154+
userCountryCode as string /*safe due to showSuggestion*/
155+
}
223156
onSelect={onPressCountry}
224157
/>
225158
<BodyText

‎app/src/screens/document/IDPickerScreen.tsx‎

Lines changed: 1 addition & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,7 @@
55
import React from 'react';
66
import { View, XStack, YStack } from 'tamagui';
77
import type { RouteProp } from '@react-navigation/native';
8-
import { useNavigation, useRoute } from '@react-navigation/native';
9-
import type { NativeStackNavigationProp } from '@react-navigation/native-stack';
8+
import { useRoute } from '@react-navigation/native';
109

1110
import { SdkEvents, useSelfClient } from '@selfxyz/mobile-sdk-alpha';
1211

@@ -83,8 +82,6 @@ const IDPickerScreen: React.FC = () => {
8382
const { countryCode = '', documentTypes = [] } = route.params || {};
8483
const bottom = useSafeAreaInsets().bottom;
8584
const selfClient = useSelfClient();
86-
const navigation =
87-
useNavigation<NativeStackNavigationProp<RootStackParamList>>();
8885

8986
const onSelectDocumentType = (docType: string) => {
9087
buttonTap();
@@ -97,27 +94,6 @@ const IDPickerScreen: React.FC = () => {
9794
countryCode: countryCode,
9895
countryName: countryName,
9996
});
100-
switch (docType) {
101-
case 'p':
102-
navigation.navigate('DocumentOnboarding');
103-
break;
104-
case 'i':
105-
navigation.navigate('DocumentOnboarding');
106-
break;
107-
case 'a':
108-
navigation.navigate('AadhaarUpload', { countryCode } as never);
109-
break;
110-
default:
111-
navigation.navigate('ComingSoon', { countryCode } as never);
112-
break;
113-
}
114-
115-
// TODO: Navigate to the next screen based on document type
116-
if (__DEV__) {
117-
console.log(
118-
`Selected document type: ${docType} for country: ${countryCode}`,
119-
);
120-
}
12197
};
12298

12399
return (

‎app/src/utils/colors.ts‎

Lines changed: 1 addition & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -2,66 +2,4 @@
22
// SPDX-License-Identifier: BUSL-1.1
33
// NOTE: Converts to Apache-2.0 on 2029-06-11 per LICENSE.
44

5-
/// NEW
6-
export const amber50 = '#FFFBEB';
7-
export const amber500 = '#F2E3C8';
8-
export const black = '#000000';
9-
export const blue100 = '#DBEAFE';
10-
export const blue600 = '#2563EB';
11-
export const blue700 = '#1D4ED8';
12-
// OLD
13-
export const borderColor = '#343434';
14-
15-
export const charcoal = '#485469';
16-
17-
export const cyan300 = '#67E8F9';
18-
19-
export const emerald500 = '#10B981';
20-
21-
export const green500 = '#22C55E';
22-
23-
export const neutral400 = '#A3A3A3';
24-
25-
export const neutral700 = '#404040';
26-
27-
export const red500 = '#EF4444';
28-
29-
export const separatorColor = '#E0E0E0';
30-
31-
export const sky500 = '#0EA5E9';
32-
33-
export const slate100 = '#F8FAFC';
34-
35-
export const slate200 = '#E2E8F0';
36-
37-
export const slate300 = '#CBD5E1';
38-
39-
export const slate400 = '#94A3B8';
40-
41-
export const slate50 = '#F8FAFC';
42-
43-
export const slate500 = '#64748B';
44-
45-
export const slate600 = '#475569';
46-
47-
export const slate700 = '#334155';
48-
49-
export const slate800 = '#1E293B';
50-
51-
export const slate900 = '#0F172A';
52-
53-
export const teal300 = '#5EEAD4';
54-
55-
export const teal500 = '#5EEAD4';
56-
57-
export const textBlack = '#333333';
58-
59-
export const white = '#ffffff';
60-
61-
export const yellow500 = '#FDE047';
62-
63-
export const zinc400 = '#A1A1AA';
64-
65-
export const zinc500 = '#71717A';
66-
export const zinc800 = '#27272A';
67-
export const zinc900 = '#18181B';
5+
export * from '@selfxyz/mobile-sdk-alpha/constants/colors';

‎common/package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -672,7 +672,6 @@
672672
"axios": "^1.7.2",
673673
"buffer": "^6.0.3",
674674
"country-emoji": "^1.5.6",
675-
"country-iso-3-to-2": "^1.1.1",
676675
"elliptic": "^6.5.5",
677676
"ethers": "^6.14.4",
678677
"fs": "^0.0.1-security",

0 commit comments

Comments
 (0)