feat(suite-native): add real countries data to trading

Author: vytick

suite-native/module-trading/src/components/buy/CountryOfResidencePicker.tsx

@@ -1,5 +1,4 @@
 import { HStack, Text } from '@suite-native/atoms';
-import { Icon } from '@suite-native/icons';
 import { useTranslate } from '@suite-native/intl';
 
 import { useTradeSheetControls } from '../../hooks/useTradeSheetControls';
@@ -21,9 +20,8 @@ export const CountryOfResidencePicker = () => {
             >
                 {selectedValue ? (
                     <HStack>
-                        <Icon name={selectedValue.flag} size="medium" />
                         <Text color="textSubdued" variant="body">
-                            {selectedValue.name}
+                            {selectedValue.value}
                         </Text>
                     </HStack>
                 ) : (
@@ -36,7 +34,7 @@ export const CountryOfResidencePicker = () => {
                 isVisible={isSheetVisible}
                 onClose={hideSheet}
                 onCountrySelect={setSelectedValue}
-                selectedCountryId={selectedValue?.id}
+                selectedCountryId={selectedValue?.value}
             />
         </>
     );

suite-native/module-trading/src/components/general/CountrySheet/CountryListItem.tsx

@@ -2,13 +2,11 @@ import { ReactNode } from 'react';
 import { Pressable } from 'react-native';
 
 import { Card, HStack, Radio, Text } from '@suite-native/atoms';
-import { Icon, IconName } from '@suite-native/icons';
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 export type CountryListItemProps = {
-    flag: IconName;
-    id: string;
-    name: ReactNode;
+    value: string;
+    label: ReactNode;
     isSelected: boolean;
     onPress: () => void;
 };
@@ -19,20 +17,19 @@ const wrapperStyle = prepareNativeStyle(({ spacings }) => ({
     marginVertical: spacings.sp4,
 }));
 
-export const CountryListItem = ({ flag, name, onPress, id, isSelected }: CountryListItemProps) => {
+export const CountryListItem = ({ label, onPress, value, isSelected }: CountryListItemProps) => {
     const { applyStyle } = useNativeStyles();
 
     return (
         <Pressable onPress={onPress} style={applyStyle(wrapperStyle)}>
             <Card>
                 <HStack alignItems="center" justifyContent="space-between">
                     <HStack>
-                        <Icon name={flag} size="medium" />
                         <Text variant="body" color="textDefault">
-                            {name}
+                            {label}
                         </Text>
                     </HStack>
-                    <Radio value={id} onPress={onPress} isChecked={isSelected} />
+                    <Radio value={value} onPress={onPress} isChecked={isSelected} />
                 </HStack>
             </Card>
         </Pressable>

suite-native/module-trading/src/components/general/CountrySheet/CountrySheet.tsx

@@ -1,3 +1,4 @@
+import { regional } from '@suite-common/trading';
 import { BottomSheetFlashList } from '@suite-native/atoms';
 import { Translation } from '@suite-native/intl';
 
@@ -13,21 +14,7 @@ export type CountrySheetProps = {
     selectedCountryId?: string;
 };
 
-const mockCountries: Country[] = [
-    { id: 'us', name: 'United States', flag: 'flag' },
-    { id: 'cz', name: 'Czech Republic', flag: 'flagCheckered' },
-    { id: 'sk', name: 'Slovakia', flag: 'flag' },
-    { id: 'de', name: 'Germany', flag: 'flagCheckered' },
-    { id: 'fr', name: 'France', flag: 'flag' },
-    { id: 'es', name: 'Spain', flag: 'flagCheckered' },
-    { id: 'it', name: 'Italy', flag: 'flag' },
-    { id: 'pl', name: 'Poland', flag: 'flagCheckered' },
-    { id: 'hu', name: 'Hungary', flag: 'flag' },
-    { id: 'at', name: 'Austria', flag: 'flagCheckered' },
-    { id: 'ch', name: 'Switzerland', flag: 'flag' },
-];
-
-const keyExtractor = (item: Country) => item.id;
+const keyExtractor = (item: Country) => item.value;
 const getEstimatedListHeight = (itemsCount: number) => itemsCount * COUNTRY_LIST_ITEM_HEIGHT;
 
 export const CountrySheet = ({
@@ -41,8 +28,6 @@ export const CountrySheet = ({
         onClose();
     };
 
-    const data: Country[] = mockCountries;
-
     return (
         <BottomSheetFlashList<Country>
             isVisible={isVisible}
@@ -58,11 +43,11 @@ export const CountrySheet = ({
                 <CountryListItem
                     {...item}
                     onPress={() => onCountrySelectCallback(item)}
-                    isSelected={item.id === selectedCountryId}
+                    isSelected={item.value === selectedCountryId}
                 />
             )}
-            data={data}
-            estimatedListHeight={getEstimatedListHeight(data.length)}
+            data={regional.countriesOptions}
+            estimatedListHeight={getEstimatedListHeight(regional.countriesOptions.length)}
             estimatedItemSize={COUNTRY_LIST_ITEM_HEIGHT}
             keyExtractor={keyExtractor}
         />

suite-native/module-trading/src/components/general/CountrySheet/__tests__/CountryListItem.comp.test.tsx

@@ -6,27 +6,26 @@ describe('CountryListItem', () => {
     const renderCountryListItem = (props: Partial<CountryListItemProps>) =>
         render(
             <CountryListItem
-                flag="flag"
-                id="US"
+                value="US"
                 isSelected={false}
-                name="United States"
+                label="🇺🇸 United States of America"
                 onPress={jest.fn()}
                 {...props}
             />,
         );
 
     it('should render given name', () => {
-        const { getByText } = renderCountryListItem({ name: 'United States' });
+        const { getByText } = renderCountryListItem({ label: '🇺🇸 United States of America' });
 
-        expect(getByText('United States')).toBeDefined();
+        expect(getByText('🇺🇸 United States of America')).toBeDefined();
     });
 
     it('should call onPress callback on item press', () => {
         const onPress = jest.fn();
         const { getByText } = renderCountryListItem({ onPress });
 
         act(() => {
-            fireEvent.press(getByText('United States'));
+            fireEvent.press(getByText('🇺🇸 United States of America'));
         });
 
         expect(onPress).toHaveBeenCalledTimes(1);

suite-native/module-trading/src/types.ts

@@ -1,6 +1,5 @@
 import { NetworkSymbol } from '@suite-common/wallet-config';
 import { Account, TokenAddress } from '@suite-common/wallet-types';
-import { IconName } from '@suite-native/icons';
 import { Address } from '@trezor/blockchain-link-types';
 
 // NOTE: in production code we probably want to use `TokenInfoBranded` or something similar instead
@@ -10,11 +9,7 @@ export type TradeableAsset = {
     name?: string;
 };
 
-export type Country = {
-    id: string;
-    name: string;
-    flag: IconName;
-};
+export type Country = { label: string; value: string };
 
 export type ReceiveAccount = {
     account: Account;