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

trezor · Feb 5, 2025 · 7198238 · 7198238
1 parent 7de98c0
commit 7198238
Show file tree

Hide file tree

Showing 36 changed files with 1,325 additions and 258 deletions.
diff --git a/packages/theme/src/spacings.ts b/packages/theme/src/spacings.ts
@@ -43,7 +43,7 @@ export const spacingsPx = (Object.keys(spacings) as Array<Spacing>).reduce((resu
     return result;
 }, {} as SpacingPx);
 
-type NativeSpacingValue = 1 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 52 | 64;
+type NativeSpacingValue = 1 | 2 | 4 | 8 | 12 | 16 | 20 | 24 | 32 | 36 | 40 | 52 | 64;
 
 export const nativeSpacings = {
     sp1: 1,
@@ -55,6 +55,7 @@ export const nativeSpacings = {
     sp20: 20,
     sp24: 24,
     sp32: 32,
+    sp36: 36,
     sp40: 40,
     sp52: 52,
     sp64: 64,

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-common/suite-utils/src/hexToRgba.ts b/suite-common/suite-utils/src/hexToRgba.ts
@@ -4,8 +4,8 @@ export function hexToRgba(hex: string, alpha: number) {
     const b = parseInt(hex.slice(5, 7), 16);
 
     if (alpha > 0) {
-        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+        return `rgba(${r}, ${g}, ${b}, ${alpha})` as `rgba(${number}, ${number}, ${number}, ${number})`;
     }
 
-    return `rgb(${r}, ${g}, ${b})`;
+    return `rgb(${r}, ${g}, ${b})` as `rgb(${number}, ${number}, ${number})`;
 }
diff --git a/suite-native/app/app.config.ts b/suite-native/app/app.config.ts
@@ -168,7 +168,7 @@ export default ({ config }: ConfigContext): ExpoConfig => {
         slug: appSlugs[buildType],
         owner: appOwners[buildType],
         version: suiteNativeVersion,
-        runtimeVersion: '24',
+        runtimeVersion: '25',
         ...(buildType === 'production'
             ? {}
             : {

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>
+        );
+    },
+);