feat(suite-native): Mobile Trade: Token picker modal visual stub

trezor · Jan 31, 2025 · 8a82958 · 8a82958
1 parent 3e6b13f
commit 8a82958
Show file tree

Hide file tree

Showing 34 changed files with 1,078 additions and 232 deletions.
diff --git a/suite-common/icons/generateIconFont.ts b/suite-common/icons/generateIconFont.ts
@@ -93,6 +93,8 @@ const usedIcons = [
     'shieldWarning',
     'shuffle',
     'stack',
+    'star',
+    'starFilled',
     'swap',
     'trashSimple',
     'treeStructure',

diff --git a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json
@@ -20,84 +20,86 @@
     "treeStructure": 61715,
     "trashSimple": 61716,
     "swap": 61717,
-    "stack": 61718,
-    "shuffle": 61719,
-    "shieldWarning": 61720,
-    "shieldCheck": 61721,
-    "shareNetwork": 61722,
-    "question": 61723,
-    "qrCode": 61724,
-    "prohibit": 61725,
-    "plusCircle": 61726,
-    "plus": 61727,
-    "plugs": 61728,
-    "piggyBankFilled": 61729,
-    "piggyBank": 61730,
-    "pictureFrame": 61731,
-    "pencilSimpleLine": 61732,
-    "pencilSimple": 61733,
-    "pencil": 61734,
-    "password": 61735,
-    "palette": 61736,
-    "magnifyingGlass": 61737,
-    "lock": 61738,
-    "link": 61739,
-    "lightbulb": 61740,
-    "lifebuoy": 61741,
-    "info": 61742,
-    "image": 61743,
-    "houseFilled": 61744,
-    "house": 61745,
-    "handPalm": 61746,
-    "githubLogo": 61747,
-    "gearFilled": 61748,
-    "gear": 61749,
-    "flagCheckered": 61750,
-    "flag": 61751,
-    "fingerprintSimple": 61752,
-    "fingerprint": 61753,
-    "filePdf": 61754,
-    "facebookLogo": 61755,
-    "eyeSlash": 61756,
-    "eye": 61757,
-    "discoverFilled": 61758,
-    "discover": 61759,
-    "detective": 61760,
-    "database": 61761,
-    "cpu": 61762,
-    "copy": 61763,
-    "coins": 61764,
-    "coinVerticalCheck": 61765,
-    "code": 61766,
-    "clockClockwise": 61767,
-    "circleDashed": 61768,
-    "checks": 61769,
-    "checkCircleFilled": 61770,
-    "checkCircle": 61771,
-    "check": 61772,
-    "chatCircle": 61773,
-    "change": 61774,
-    "caretUpFilled": 61775,
-    "caretUpDown": 61776,
-    "caretUp": 61777,
-    "caretRight": 61778,
-    "caretLeft": 61779,
-    "caretDownFilled": 61780,
-    "caretDown": 61781,
-    "caretCircleRight": 61782,
-    "calendar": 61783,
-    "bugBeetle": 61784,
-    "bookmarkSimple": 61785,
-    "backspace": 61786,
-    "arrowsLeftRight": 61787,
-    "arrowsCounterClockwise": 61788,
-    "arrowUpRight": 61789,
-    "arrowUp": 61790,
-    "arrowURightDown": 61791,
-    "arrowSquareOut": 61792,
-    "arrowRight": 61793,
-    "arrowLineUpRight": 61794,
-    "arrowLineUp": 61795,
-    "arrowLineDown": 61796,
-    "arrowDown": 61797
+    "starFilled": 61718,
+    "star": 61719,
+    "stack": 61720,
+    "shuffle": 61721,
+    "shieldWarning": 61722,
+    "shieldCheck": 61723,
+    "shareNetwork": 61724,
+    "question": 61725,
+    "qrCode": 61726,
+    "prohibit": 61727,
+    "plusCircle": 61728,
+    "plus": 61729,
+    "plugs": 61730,
+    "piggyBankFilled": 61731,
+    "piggyBank": 61732,
+    "pictureFrame": 61733,
+    "pencilSimpleLine": 61734,
+    "pencilSimple": 61735,
+    "pencil": 61736,
+    "password": 61737,
+    "palette": 61738,
+    "magnifyingGlass": 61739,
+    "lock": 61740,
+    "link": 61741,
+    "lightbulb": 61742,
+    "lifebuoy": 61743,
+    "info": 61744,
+    "image": 61745,
+    "houseFilled": 61746,
+    "house": 61747,
+    "handPalm": 61748,
+    "githubLogo": 61749,
+    "gearFilled": 61750,
+    "gear": 61751,
+    "flagCheckered": 61752,
+    "flag": 61753,
+    "fingerprintSimple": 61754,
+    "fingerprint": 61755,
+    "filePdf": 61756,
+    "facebookLogo": 61757,
+    "eyeSlash": 61758,
+    "eye": 61759,
+    "discoverFilled": 61760,
+    "discover": 61761,
+    "detective": 61762,
+    "database": 61763,
+    "cpu": 61764,
+    "copy": 61765,
+    "coins": 61766,
+    "coinVerticalCheck": 61767,
+    "code": 61768,
+    "clockClockwise": 61769,
+    "circleDashed": 61770,
+    "checks": 61771,
+    "checkCircleFilled": 61772,
+    "checkCircle": 61773,
+    "check": 61774,
+    "chatCircle": 61775,
+    "change": 61776,
+    "caretUpFilled": 61777,
+    "caretUpDown": 61778,
+    "caretUp": 61779,
+    "caretRight": 61780,
+    "caretLeft": 61781,
+    "caretDownFilled": 61782,
+    "caretDown": 61783,
+    "caretCircleRight": 61784,
+    "calendar": 61785,
+    "bugBeetle": 61786,
+    "bookmarkSimple": 61787,
+    "backspace": 61788,
+    "arrowsLeftRight": 61789,
+    "arrowsCounterClockwise": 61790,
+    "arrowUpRight": 61791,
+    "arrowUp": 61792,
+    "arrowURightDown": 61793,
+    "arrowSquareOut": 61794,
+    "arrowRight": 61795,
+    "arrowLineUpRight": 61796,
+    "arrowLineUp": 61797,
+    "arrowLineDown": 61798,
+    "arrowDown": 61799
 }
diff --git a/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf b/suite-common/icons/iconFontsMobile/TrezorSuiteIcons.ttf
diff --git a/suite-native/atoms/src/Button/Button.tsx b/suite-native/atoms/src/Button/Button.tsx
@@ -33,7 +33,7 @@ export type ButtonColorScheme =
     | 'blueBold'
     | 'blueElevation0'
     | 'blueElevation1'
-    | 'invisible';
+    | 'backgroundSurfaceElevation0';
 
 export type ButtonProps = Omit<PressableProps, 'style' | 'onPressIn' | 'onPressOut'> & {
     children: ReactNode;
@@ -182,7 +182,7 @@ export const buttonSchemeToColorsMap = {
         iconColor: 'iconAlertBlue',
         disabledColors: baseDisabledScheme,
     },
-    invisible: {
+    backgroundSurfaceElevation0: {
         backgroundColor: 'backgroundSurfaceElevation0',
         onPressColor: 'backgroundTertiaryPressedOnElevation0',
         textColor: 'textSubdued',

diff --git a/suite-native/atoms/src/Input/SearchInput.tsx b/suite-native/atoms/src/Input/SearchInput.tsx
@@ -1,4 +1,4 @@
-import { useRef, useState } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import { Pressable, TextInput, TouchableOpacity } from 'react-native';
 
 import { Icon } from '@suite-native/icons';
@@ -7,12 +7,15 @@ import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 import { Box } from '../Box';
 import { SurfaceElevation } from '../types';
 
-type InputProps = {
+export type SearchInputProps = {
     onChange: (value: string) => void;
     placeholder?: string;
     isDisabled?: boolean;
     maxLength?: number;
     elevation?: SurfaceElevation;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    value?: string;
 };
 
 const inputStyle = prepareNativeStyle(utils => ({
@@ -27,6 +30,7 @@ type InputStyleProps = {
     isFocused: boolean;
     elevation: SurfaceElevation;
 };
+
 const inputWrapperStyle = prepareNativeStyle<InputStyleProps>(
     (utils, { isFocused, elevation }) => ({
         flexDirection: 'row',
@@ -57,53 +61,73 @@ const inputWrapperStyle = prepareNativeStyle<InputStyleProps>(
     }),
 );
 
-export const SearchInput = ({
-    onChange,
-    placeholder,
-    maxLength,
-    isDisabled = false,
-    elevation = '0',
-}: InputProps) => {
-    const { applyStyle, utils } = useNativeStyles();
-    const [isFocused, setIsFocused] = useState<boolean>(false);
-    const [isClearButtonVisible, setIsClearButtonVisible] = useState<boolean>(false);
-    const searchInputRef = useRef<TextInput | null>(null);
-    const handleClear = () => {
-        setIsClearButtonVisible(false);
-        searchInputRef.current?.clear();
-        onChange('');
-    };
+const noOp = () => {};
 
-    const handleInputFocus = () => {
-        searchInputRef?.current?.focus();
-    };
+export const SearchInput = forwardRef<TextInput, SearchInputProps>(
+    (
+        {
+            onChange,
+            placeholder,
+            maxLength,
+            isDisabled = false,
+            elevation = '0',
+            onFocus = noOp,
+            onBlur = noOp,
+            value,
+        },
+        ref,
+    ) => {
+        const { applyStyle, utils } = useNativeStyles();
+        const [isFocused, setIsFocused] = useState<boolean>(false);
+        const [isClearButtonVisible, setIsClearButtonVisible] = useState<boolean>(false);
+        const searchInputRef = useRef<TextInput>(null);
 
-    const handleOnChangeText = (value: string) => {
-        setIsClearButtonVisible(!!value.length);
-        onChange(value);
-    };
+        useImperativeHandle(ref, () => searchInputRef.current!, [searchInputRef]);
 
-    return (
-        <Pressable onPress={handleInputFocus}>
-            <Box style={applyStyle(inputWrapperStyle, { isFocused, elevation })}>
-                <Icon name="magnifyingGlass" color="iconSubdued" size="large" />
-                <TextInput
-                    ref={searchInputRef}
-                    onChangeText={handleOnChangeText}
-                    placeholder={placeholder}
-                    placeholderTextColor={utils.colors.textSubdued}
-                    editable={!isDisabled}
-                    onFocus={() => setIsFocused(true)}
-                    onBlur={() => setIsFocused(false)}
-                    style={applyStyle(inputStyle)}
-                    maxLength={maxLength}
-                />
-                {isClearButtonVisible && (
-                    <TouchableOpacity onPress={handleClear}>
-                        <Icon name="xCircle" size="large" color="iconSubdued" />
-                    </TouchableOpacity>
-                )}
-            </Box>
-        </Pressable>
-    );
-};
+        const handleClear = () => {
+            setIsClearButtonVisible(false);
+            searchInputRef.current?.clear();
+            onChange('');
+        };
+
+        const handleInputFocus = () => {
+            searchInputRef.current?.focus();
+        };
+
+        const handleOnChangeText = (inputValue: string) => {
+            setIsClearButtonVisible(!!inputValue.length);
+            onChange(inputValue);
+        };
+
+        return (
+            <Pressable onPress={handleInputFocus}>
+                <Box style={applyStyle(inputWrapperStyle, { isFocused, elevation })}>
+                    <Icon name="magnifyingGlass" color="iconSubdued" size="large" />
+                    <TextInput
+                        ref={searchInputRef}
+                        onChangeText={handleOnChangeText}
+                        placeholder={placeholder}
+                        placeholderTextColor={utils.colors.textSubdued}
+                        editable={!isDisabled}
+                        onFocus={() => {
+                            setIsFocused(true);
+                            onFocus();
+                        }}
+                        onBlur={() => {
+                            setIsFocused(false);
+                            onBlur();
+                        }}
+                        style={applyStyle(inputStyle)}
+                        maxLength={maxLength}
+                        value={value}
+                    />
+                    {isClearButtonVisible && (
+                        <TouchableOpacity onPress={handleClear}>
+                            <Icon name="xCircle" size="large" color="iconSubdued" />
+                        </TouchableOpacity>
+                    )}
+                </Box>
+            </Pressable>
+        );
+    },
+);
diff --git a/suite-native/intl/src/en.ts b/suite-native/intl/src/en.ts
@@ -1230,6 +1230,19 @@ export const en = {
             description: 'We currently support staking as view-only in Trezor Suite Lite.',
         },
     },
+    moduleTrading: {
+        selectCoin: {
+            buttonTitle: 'Select coin',
+        },
+        tradeableAssetsSheet: {
+            title: 'Coins',
+            favouritesTitle: 'Favourites',
+            allTitle: 'All coins',
+            favouritesAdd: 'Add to favourites',
+            favouritesRemove: 'Remove from favourites',
+        },
+        defaultSearchLabel: 'Search',
+    },
 };
 
 export type Translations = typeof en;
diff --git a/suite-native/module-trading/jest.config.js b/suite-native/module-trading/jest.config.js
@@ -0,0 +1,5 @@
+const { ...baseConfig } = require('../../jest.config.native');
+
+module.exports = {
+    ...baseConfig,
+};
diff --git a/suite-native/module-trading/package.json b/suite-native/module-trading/package.json
@@ -8,14 +8,16 @@
     "scripts": {
         "depcheck": "yarn g:depcheck",
         "type-check": "yarn g:tsc --build",
-        "test:unit": "yarn g:jest -c ../../jest.config.native.js"
+        "test:unit": "yarn g:jest"
     },
     "dependencies": {
         "@react-navigation/native-stack": "6.11.0",
         "@reduxjs/toolkit": "1.9.5",
         "@suite-native/navigation": "workspace:*",
         "@suite-native/test-utils": "workspace:*",
+        "expo-linear-gradient": "^14.0.1",
         "react": "18.2.0",
-        "react-native": "0.76.1"
+        "react-native": "0.76.1",
+        "react-native-reanimated": "3.16.7"
     }
 }