feat(suite-native): Introduce module-trading

suite-common/icons/generateIconFont.ts

@@ -18,6 +18,7 @@ const usedIcons = [
     'arrowLineUpRight',
     'arrowRight',
     'arrowsCounterClockwise',
+    'arrowsLeftRight',
     'arrowSquareOut',
     'arrowUp',
     'arrowUpRight',

suite-common/icons/iconFontsMobile/TrezorSuiteIcons.json

@@ -89,14 +89,15 @@
     "bugBeetle": 61784,
     "bookmarkSimple": 61785,
     "backspace": 61786,
-    "arrowsCounterClockwise": 61787,
-    "arrowUpRight": 61788,
-    "arrowUp": 61789,
-    "arrowURightDown": 61790,
-    "arrowSquareOut": 61791,
-    "arrowRight": 61792,
-    "arrowLineUpRight": 61793,
-    "arrowLineUp": 61794,
-    "arrowLineDown": 61795,
-    "arrowDown": 61796
+    "arrowsLeftRight": 61787,
+    "arrowsCounterClockwise": 61788,
+    "arrowUpRight": 61789,
+    "arrowUp": 61790,
+    "arrowURightDown": 61791,
+    "arrowSquareOut": 61792,
+    "arrowRight": 61793,
+    "arrowLineUpRight": 61794,
+    "arrowLineUp": 61795,
+    "arrowLineDown": 61796,
+    "arrowDown": 61797
 }

suite-native/app/package.json

@@ -69,6 +69,7 @@
         "@suite-native/module-send": "workspace:*",
         "@suite-native/module-settings": "workspace:*",
         "@suite-native/module-staking-management": "workspace:*",
+        "@suite-native/module-trading": "workspace:*",
         "@suite-native/navigation": "workspace:*",
         "@suite-native/notifications": "workspace:*",
         "@suite-native/receive": "workspace:*",

suite-native/app/src/navigation/AppTabNavigator.tsx

@@ -1,10 +1,14 @@
+import { useSelector } from 'react-redux';
+
 import { BottomTabBarProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 
 import { HomeStackNavigator } from '@suite-native/module-home';
 import { AccountsStackNavigator } from '@suite-native/module-accounts-management';
 import { SettingsScreen } from '@suite-native/module-settings';
 import { AppTabsParamList, AppTabsRoutes, TabBar } from '@suite-native/navigation';
 import { useHandleDeviceRequestsPassphrase } from '@suite-native/device-authorization';
+import { createSelectIsFeatureFlagEnabled, FeatureFlag } from '@suite-native/feature-flags';
+import { TradingStackNavigator } from '@suite-native/module-trading';
 
 import { rootTabsOptions } from './routes';
 
@@ -13,6 +17,10 @@ const Tab = createBottomTabNavigator<AppTabsParamList>();
 export const AppTabNavigator = () => {
     useHandleDeviceRequestsPassphrase();
 
+    const isTradingEnabled = useSelector(
+        createSelectIsFeatureFlagEnabled(FeatureFlag.IsTradingEnabled),
+    );
+
     return (
         <Tab.Navigator
             initialRouteName={AppTabsRoutes.HomeStack}
@@ -26,6 +34,9 @@ export const AppTabNavigator = () => {
         >
             <Tab.Screen name={AppTabsRoutes.HomeStack} component={HomeStackNavigator} />
             <Tab.Screen name={AppTabsRoutes.AccountsStack} component={AccountsStackNavigator} />
+            {isTradingEnabled && (
+                <Tab.Screen name={AppTabsRoutes.TradeStack} component={TradingStackNavigator} />
+            )}
             <Tab.Screen name={AppTabsRoutes.Settings} component={SettingsScreen} />
         </Tab.Navigator>
     );

suite-native/app/src/navigation/__tests__/AppTabNavigator.comp.test.tsx

@@ -1,14 +1,46 @@
-import { renderWithStore, waitFor } from '@suite-native/test-utils';
+import { renderWithStore, waitFor, PreloadedState, fireEvent } from '@suite-native/test-utils';
+import { FeatureFlag, featureFlagsInitialState } from '@suite-native/feature-flags';
 
 import { AppTabNavigator } from '../AppTabNavigator';
 
 describe('AppTabNavigator', () => {
+    const renderTabs = async (preloadedState?: PreloadedState) => {
+        const result = renderWithStore(<AppTabNavigator />, { preloadedState });
+        await waitFor(() => expect(result.getByText('Home')).toBeDefined());
+
+        return result;
+    };
+
     it('should render 3 buttons', async () => {
-        const { getByText } = renderWithStore(<AppTabNavigator />);
-        await waitFor(() => expect(getByText('Home')).toBeDefined());
+        const { getByText } = await renderTabs();
 
         expect(getByText('Home')).toBeDefined();
         expect(getByText('My assets')).toBeDefined();
         expect(getByText('Settings')).toBeDefined();
     });
+
+    it('should not render Trade tab when IsTradingEnabled is false', async () => {
+        const { queryByText } = await renderTabs({
+            featureFlags: {
+                ...featureFlagsInitialState,
+                [FeatureFlag.IsTradingEnabled]: false,
+            },
+        });
+
+        expect(queryByText('Trade')).toBe(null);
+    });
+
+    it('should render Trade tab when IsTradingEnabled is true', async () => {
+        const { getByText } = await renderTabs({
+            featureFlags: {
+                ...featureFlagsInitialState,
+                [FeatureFlag.IsTradingEnabled]: true,
+            },
+        });
+
+        const tradeTab = getByText('Trade');
+        fireEvent.press(tradeTab);
+
+        expect(getByText('Trading placeholder')).toBeDefined();
+    });
 });

suite-native/app/src/navigation/routes.ts

@@ -19,6 +19,13 @@ const accountsStack = enhanceTabOption({
     },
 });
 
+const tradeStack = enhanceTabOption({
+    routeName: AppTabsRoutes.TradeStack,
+    iconName: 'arrowsLeftRight',
+    focusedIconName: 'arrowsLeftRight',
+    label: 'Trade',
+});
+
 const settings = enhanceTabOption({
     routeName: AppTabsRoutes.Settings,
     iconName: 'gear',
@@ -29,5 +36,6 @@ const settings = enhanceTabOption({
 export const rootTabsOptions = {
     ...homeStack,
     ...accountsStack,
+    ...tradeStack,
     ...settings,
 };

suite-native/app/tsconfig.json

@@ -60,6 +60,7 @@
         {
             "path": "../module-staking-management"
         },
+        { "path": "../module-trading" },
         { "path": "../navigation" },
         { "path": "../notifications" },
         { "path": "../receive" },

suite-native/module-trading/package.json

@@ -0,0 +1,21 @@
+{
+    "name": "@suite-native/module-trading",
+    "version": "1.0.0",
+    "private": true,
+    "license": "See LICENSE.md in repo root",
+    "sideEffects": false,
+    "main": "src/index",
+    "scripts": {
+        "depcheck": "yarn g:depcheck",
+        "type-check": "yarn g:tsc --build",
+        "test:unit": "yarn g:jest -c ../../jest.config.native.js"
+    },
+    "dependencies": {
+        "@react-navigation/native-stack": "6.11.0",
+        "@reduxjs/toolkit": "1.9.5",
+        "@suite-native/navigation": "workspace:*",
+        "@suite-native/test-utils": "workspace:*",
+        "react": "18.2.0",
+        "react-native": "0.76.1"
+    }
+}

suite-native/module-trading/redux.d.ts

@@ -0,0 +1,7 @@
+import { AsyncThunkAction } from '@reduxjs/toolkit';
+
+declare module 'redux' {
+    export interface Dispatch {
+        <TThunk extends AsyncThunkAction<any, any, any>>(thunk: TThunk): ReturnType<TThunk>;
+    }
+}

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

@@ -0,0 +1 @@
+export * from './navigation/TradingStackNavigator';

suite-native/module-trading/src/navigation/TradingStackNavigator.tsx

@@ -0,0 +1,24 @@
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+
+import {
+    stackNavigationOptionsConfig,
+    TradingStackParamList,
+    TradingStackRoutes,
+} from '@suite-native/navigation';
+
+import { TradingScreen } from '../screens/TradingScreen';
+
+const TradingStack = createNativeStackNavigator<TradingStackParamList>();
+
+export const TradingStackNavigator = () => (
+    <TradingStack.Navigator
+        initialRouteName={TradingStackRoutes.Trading}
+        screenOptions={stackNavigationOptionsConfig}
+    >
+        <TradingStack.Screen
+            options={{ title: TradingStackRoutes.Trading }}
+            name={TradingStackRoutes.Trading}
+            component={TradingScreen}
+        />
+    </TradingStack.Navigator>
+);

suite-native/module-trading/src/navigation/__tests__/TradingStackNavigator.comp.test.tsx

@@ -0,0 +1,10 @@
+import { renderWithStore, waitFor } from '@suite-native/test-utils';
+
+import { TradingStackNavigator } from '../TradingStackNavigator';
+
+describe('TradingStackNavigator', () => {
+    it('should render', async () => {
+        const { getByText } = renderWithStore(<TradingStackNavigator />);
+        await waitFor(() => expect(getByText('Trading placeholder')).toBeDefined());
+    });
+});

suite-native/module-trading/src/screens/TradingScreen.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import { Screen } from '@suite-native/navigation';
+import { Card, Text } from '@suite-native/atoms';
+import { DeviceManagerScreenHeader } from '@suite-native/device-manager';
+
+export const TradingScreen = () => (
+    <Screen header={<DeviceManagerScreenHeader />}>
+        <Card>
+            <Text>Trading placeholder</Text>
+        </Card>
+    </Screen>
+);

suite-native/module-trading/tsconfig.json

@@ -0,0 +1,9 @@
+{
+    "extends": "../../tsconfig.base.json",
+    "compilerOptions": { "outDir": "libDev" },
+    "references": [
+        { "path": "../navigation" },
+        { "path": "../test-utils" }
+    ],
+    "include": [".", "**/*.json"]
+}

suite-native/navigation/src/navigators.ts

@@ -28,6 +28,7 @@ import {
     RootStackRoutes,
     SendStackRoutes,
     SettingsStackRoutes,
+    TradingStackRoutes,
 } from './routes';
 import { NavigateParameters } from './types';
 
@@ -102,6 +103,7 @@ export type SendStackParamList = {
 export type AppTabsParamList = {
     [AppTabsRoutes.HomeStack]: NavigatorScreenParams<HomeStackParamList>;
     [AppTabsRoutes.AccountsStack]: NavigatorScreenParams<AccountsStackParamList>;
+    [AppTabsRoutes.TradeStack]: NavigatorScreenParams<TradingStackParamList>;
     [AppTabsRoutes.Settings]: undefined;
 };
 
@@ -222,3 +224,7 @@ export type RootStackParamList = {
     };
     [RootStackRoutes.SettingsScreenStack]: NavigatorScreenParams<SettingsStackParamList>;
 };
+
+export type TradingStackParamList = {
+    [TradingStackRoutes.Trading]: undefined;
+};

suite-native/navigation/src/routes.ts

@@ -21,6 +21,7 @@ export enum RootStackRoutes {
 export enum AppTabsRoutes {
     HomeStack = 'HomeStack',
     AccountsStack = 'AccountsStack',
+    TradeStack = 'TradeStack',
     Settings = 'Settings',
 }
 
@@ -124,3 +125,7 @@ export enum SettingsStackRoutes {
     SettingsFAQ = 'SettingsFAQ',
     SettingsCoinEnabling = 'SettingsCoinEnabling',
 }
+
+export enum TradingStackRoutes {
+    Trading = 'Trading',
+}

suite-native/state/src/index.ts

@@ -1,2 +1,3 @@
 export * from './StoreProvider';
 export * from './appSlice';
+export * from './store';

yarn.lock

@@ -9996,6 +9996,7 @@ __metadata:
     "@suite-native/module-send": "workspace:*"
     "@suite-native/module-settings": "workspace:*"
     "@suite-native/module-staking-management": "workspace:*"
+    "@suite-native/module-trading": "workspace:*"
     "@suite-native/navigation": "workspace:*"
     "@suite-native/notifications": "workspace:*"
     "@suite-native/receive": "workspace:*"
@@ -10950,17 +10951,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@suite-native/module-trading@workspace:suite-native/module-trading":
+"@suite-native/module-trading@workspace:*, @suite-native/module-trading@workspace:suite-native/module-trading":
   version: 0.0.0-use.local
   resolution: "@suite-native/module-trading@workspace:suite-native/module-trading"
   dependencies:
     "@react-navigation/native-stack": "npm:6.11.0"
     "@reduxjs/toolkit": "npm:1.9.5"
     "@suite-native/navigation": "workspace:*"
-    "@trezor/styles": "workspace:*"
+    "@suite-native/test-utils": "workspace:*"
     react: "npm:18.2.0"
     react-native: "npm:0.76.1"
-    react-native-reanimated: "npm:^3.16.7"
   languageName: unknown
   linkType: soft