feat(suite-native): Mobile Trade: trade options overview visual stub

suite-native/intl/src/en.ts

@@ -1245,6 +1245,15 @@ export const en = {
             description: 'We currently support staking as view-only in Trezor Suite Lite.',
         },
     },
+    moduleTrading: {
+        tradingScreen: {
+            receiveAccount: 'Receive account',
+            paymentMethod: 'Payment method',
+            countryOfResidence: 'Country of residence',
+            provider: 'Provider',
+            continueButton: 'Continue',
+        },
+    },
 };
 
 export type Translations = typeof en;

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

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react';
+import { Pressable } from 'react-native';
+
+import { Box, HStack, Text } from '@suite-native/atoms';
+import { Icon } from '@suite-native/icons';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+
+export type TradeOverviewOptionProps = {
+    title: string;
+    children: ReactNode;
+    onPress: () => void;
+    noBottomBorder?: boolean;
+};
+
+const pressableStyle = prepareNativeStyle<{ noBottomBorder: boolean }>(
+    ({ borders, colors }, { noBottomBorder }) => ({
+        extend: [
+            {
+                condition: !noBottomBorder,
+                style: {
+                    borderBottomWidth: borders.widths.small,
+                    borderBottomColor: colors.backgroundSurfaceElevation0,
+                },
+            },
+        ],
+    }),
+);
+
+export const TradingOverviewRow = ({
+    title,
+    children,
+    onPress,
+    noBottomBorder = false,
+}: TradeOverviewOptionProps) => {
+    const { applyStyle } = useNativeStyles();
+
+    return (
+        <Pressable
+            onPress={onPress}
+            accessible={true}
+            accessibilityLabel={title}
+            accessibilityRole="button"
+            style={applyStyle(pressableStyle, { noBottomBorder })}
+        >
+            <HStack paddingHorizontal="sp20" justifyContent="space-between">
+                <Box paddingVertical="sp20">
+                    <Text color="textDefault" variant="body">
+                        {title}
+                    </Text>
+                </Box>
+                <HStack flex={1} justifyContent="flex-end" alignItems="center">
+                    {children}
+                    <Icon name="caretDown" size="medium" color="textSubdued" />
+                </HStack>
+            </HStack>
+        </Pressable>
+    );
+};

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

@@ -0,0 +1,13 @@
+import { Box } from '@suite-native/atoms';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+
+const dividerStyle = prepareNativeStyle(({ borders, colors }) => ({
+    height: borders.widths.small,
+    backgroundColor: colors.backgroundSurfaceElevation0,
+}));
+
+export const TradingRowDivider = () => {
+    const { applyStyle } = useNativeStyles();
+
+    return <Box style={applyStyle(dividerStyle)} />;
+};

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

@@ -0,0 +1,30 @@
+import { Text } from '@suite-native/atoms';
+import { fireEvent, render } from '@suite-native/test-utils';
+
+import { TradingOverviewRow } from '../TradingOverviewRow';
+
+describe('TradingOverviewRow', () => {
+    it('should use title as left text as well as a11yLabel', () => {
+        const { getByText, getByLabelText } = render(
+            <TradingOverviewRow title="Title" onPress={jest.fn()}>
+                <Text>Child</Text>
+            </TradingOverviewRow>,
+        );
+
+        expect(getByText('Title')).toBeDefined();
+        expect(getByLabelText('Title')).toBeDefined();
+    });
+
+    it('should call onPress callback when clicked', () => {
+        const onPress = jest.fn();
+        const { getByText } = render(
+            <TradingOverviewRow title="Title" onPress={onPress}>
+                <Text>Child</Text>
+            </TradingOverviewRow>,
+        );
+
+        fireEvent.press(getByText('Title'));
+
+        expect(onPress).toHaveBeenCalledWith();
+    });
+});

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

@@ -1,13 +1,81 @@
 import React from 'react';
 
-import { Card, Text } from '@suite-native/atoms';
+import { Box, Button, Card, Text, VStack } from '@suite-native/atoms';
 import { DeviceManagerScreenHeader } from '@suite-native/device-manager';
+import { Translation, useTranslate } from '@suite-native/intl';
 import { Screen } from '@suite-native/navigation';
 
-export const TradingScreen = () => (
-    <Screen header={<DeviceManagerScreenHeader />}>
-        <Card>
-            <Text>Trading placeholder</Text>
-        </Card>
-    </Screen>
-);
+import { TradingOverviewRow } from '../components/general/TradingOverviewRow';
+import { TradingRowDivider } from '../components/general/TradingRowDivider';
+
+const notImplementedCallback = () => {
+    // eslint-disable-next-line no-console
+    console.log('Not implemented');
+};
+
+export const TradingScreen = () => {
+    const { translate } = useTranslate();
+
+    return (
+        <Screen header={<DeviceManagerScreenHeader />}>
+            <VStack spacing="sp16">
+                <Card noPadding>
+                    <Box padding="sp20">
+                        <Text>Trading placeholder</Text>
+                    </Box>
+                    <TradingRowDivider />
+                    <TradingOverviewRow
+                        title={translate('moduleTrading.tradingScreen.receiveAccount')}
+                        onPress={notImplementedCallback}
+                        noBottomBorder
+                    >
+                        <VStack spacing={0} paddingLeft="sp20">
+                            <Text color="textSubdued" variant="body" textAlign="right">
+                                Bitcoin Vault
+                            </Text>
+                            <Text
+                                color="textSubdued"
+                                variant="hint"
+                                ellipsizeMode="tail"
+                                numberOfLines={1}
+                            >
+                                3QJmV3qfvL9SuYo34YihAf3sRCW3qSinyC
+                            </Text>
+                        </VStack>
+                    </TradingOverviewRow>
+                </Card>
+                <Card noPadding>
+                    <TradingOverviewRow
+                        title={translate('moduleTrading.tradingScreen.paymentMethod')}
+                        onPress={notImplementedCallback}
+                    >
+                        <Text color="textSubdued" variant="body">
+                            Credit card
+                        </Text>
+                    </TradingOverviewRow>
+                    <TradingOverviewRow
+                        title={translate('moduleTrading.tradingScreen.countryOfResidence')}
+                        onPress={notImplementedCallback}
+                    >
+                        <Text color="textSubdued" variant="body">
+                            Czech Republic
+                        </Text>
+                    </TradingOverviewRow>
+                    <TradingOverviewRow
+                        title={translate('moduleTrading.tradingScreen.provider')}
+                        onPress={notImplementedCallback}
+                    >
+                        <Text color="textSubdued" variant="body">
+                            Anycoin
+                        </Text>
+                    </TradingOverviewRow>
+                    <Box padding="sp20">
+                        <Button onPress={notImplementedCallback}>
+                            <Translation id="moduleTrading.tradingScreen.continueButton" />
+                        </Button>
+                    </Box>
+                </Card>
+            </VStack>
+        </Screen>
+    );
+};