chore(suite): use SubTabs component for coinmarket navigation

packages/suite/src/views/wallet/coinmarket/common/CoinmarketFeaturedOffers/CoinmarketFeaturedOffers.tsx

@@ -1,3 +1,5 @@
+import { Column } from '@trezor/components';
+
 import { getBestRatedQuote } from 'src/utils/wallet/coinmarket/coinmarketUtils';
 import { WalletSubpageHeading } from 'src/components/wallet';
 import { useCoinmarketFormContext } from 'src/hooks/wallet/coinmarket/form/useCoinmarketCommonForm';
@@ -17,7 +19,7 @@ export const CoinmarketFeaturedOffers = () => {
     const bestRatedQuote = getBestRatedQuote(quotes, type);
 
     return (
-        <>
+        <Column>
             <WalletSubpageHeading title="TR_COINMARKET_FEATURED_OFFERS_HEADING" />
             {featuredQuotes.map(quote => (
                 <CoinmarketFeaturedOffersItem
@@ -27,6 +29,6 @@ export const CoinmarketFeaturedOffers = () => {
                     isBestRate={bestRatedQuote?.orderId === quote?.orderId}
                 />
             ))}
-        </>
+        </Column>
     );
 };

packages/suite/src/views/wallet/coinmarket/common/CoinmarketFooter/CoinmarketFooter.tsx

@@ -5,15 +5,14 @@ import styled, { css } from 'styled-components';
 import { Icon, Link, Image, Row } from '@trezor/components';
 import { useOnClickOutside } from '@trezor/react-utils';
 import { DATA_TOS_INVITY_URL, INVITY_URL } from '@trezor/urls';
-import { borders, spacings, spacingsPx, typography, zIndices } from '@trezor/theme';
+import { borders, spacingsPx, typography, zIndices } from '@trezor/theme';
 
 import { Translation } from 'src/components/suite';
 import { CoinmarketFooterLogoWrapper } from 'src/views/wallet/coinmarket';
 import { CoinmarketProvidedByInvity } from 'src/views/wallet/coinmarket/common/CoinmarketFooter/CoinmarketProvidedByInvity';
 
 const Wrapper = styled.div`
     margin-top: ${spacingsPx.xxxl};
-    padding: ${spacings.zero} ${spacingsPx.lg};
 `;
 
 const WrapperBorder = styled.div`

packages/suite/src/views/wallet/coinmarket/common/CoinmarketForm/CoinmarketFormLayout.tsx

@@ -13,7 +13,7 @@ const CoinmarketFormLayoutWrapper = styled.form`
 `;
 
 export const CoinmarketFormLayout = () => (
-    <>
+    <Column gap={spacings.xxxxl}>
         <CoinmarketFormLayoutWrapper>
             <Card>
                 <Column gap={spacings.lg}>
@@ -25,5 +25,5 @@ export const CoinmarketFormLayout = () => (
             </Card>
         </CoinmarketFormLayoutWrapper>
         <CoinmarketFeaturedOffers />
-    </>
+    </Column>
 );

packages/suite/src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayout.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react';
 import { spacings } from '@trezor/theme';
 import { Column } from '@trezor/components';
 
-import { CoinmarketLayoutNavigation } from 'src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayoutNavigation/CoinmarketLayoutNavigation';
+import { CoinmarketLayoutNavigation } from 'src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayoutNavigation';
 import { useSelector } from 'src/hooks/suite';
 import { selectRouteName } from 'src/reducers/suite/routerReducer';
 
@@ -14,7 +14,9 @@ export const CoinmarketLayout = ({ children }: CoinmarketLayoutProps) => {
 
     return (
         <Column gap={spacings.xl}>
-            {!routeName?.includes(`wallet-coinmarket-exchange`) && <CoinmarketLayoutNavigation />}
+            {!routeName?.includes(`wallet-coinmarket-exchange`) && (
+                <CoinmarketLayoutNavigation route={routeName} />
+            )}
             {children}
         </Column>
     );

packages/suite/src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayoutHeader.tsx

@@ -1,46 +1,59 @@
 import { PropsWithChildren, useMemo } from 'react';
-import { useHistory } from 'react-router-dom';
 
-import { IconButton, Row, Box } from '@trezor/components';
+import { IconButton, Row, Box, Button } from '@trezor/components';
 import { spacings } from '@trezor/theme';
+import { Route } from '@suite-common/suite-types';
 
 import { PageHeader } from 'src/components/suite/layouts/SuiteLayout';
 import { BasicName } from 'src/components/suite/layouts/SuiteLayout/PageHeader/PageNames/BasicName';
-import { useLayout, useSelector, useTranslation } from 'src/hooks/suite';
+import { useLayout, useSelector, useTranslation, useDispatch } from 'src/hooks/suite';
 import { selectRouteName } from 'src/reducers/suite/routerReducer';
-import { CoinmarketLayoutNavigationItem } from 'src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayoutNavigation/CoinmarketLayoutNavigationItem';
-import { TranslationKey } from 'src/components/suite/Translation';
+import { TranslationKey, Translation } from 'src/components/suite/Translation';
+import { goto } from 'src/actions/suite/routerActions';
 
 interface CoinmarketLayoutHeaderProps extends PropsWithChildren {}
 
+const getBackRoute = (route: Route['name'] | undefined): Route['name'] => {
+    const routePrefix = 'wallet-coinmarket-';
+    const match = route?.match(new RegExp(`^${routePrefix}(exchange|buy|sell)-`));
+
+    return match ? (`${routePrefix}${match[1]}` as Route['name']) : 'wallet-index';
+};
+
 type CoinmarketPageHeaderProps = {
     fallbackTitle: TranslationKey;
-    currentRouteName?: string;
-    goBack: () => void;
 };
 
-const CoinmarketPageHeader = ({
-    fallbackTitle,
-    currentRouteName,
-    goBack,
-}: CoinmarketPageHeaderProps) => {
+const CoinmarketPageHeader = ({ fallbackTitle }: CoinmarketPageHeaderProps) => {
+    const dispatch = useDispatch();
+    const currentRouteName = useSelector(selectRouteName);
+
+    const goToRoute = (route: Route['name']) => () => {
+        dispatch(goto(route, { preserveParams: true }));
+    };
+
     return (
         <PageHeader>
             <Row width="100%" gap={spacings.md}>
                 <IconButton
                     icon="caretLeft"
                     variant="tertiary"
                     size="medium"
-                    onClick={goBack}
+                    onClick={goToRoute(getBackRoute(currentRouteName))}
                     data-testid="@account-subpage/back"
                 />
                 <BasicName nameId={fallbackTitle} />
                 {currentRouteName !== 'wallet-coinmarket-transactions' && (
                     <Box margin={{ left: 'auto' }}>
-                        <CoinmarketLayoutNavigationItem
-                            route="wallet-coinmarket-transactions"
-                            title="TR_COINMARKET_LAST_TRANSACTIONS"
-                        />
+                        <Button
+                            size="small"
+                            variant="tertiary"
+                            margin={{ left: 'auto' }}
+                            onClick={goToRoute('wallet-coinmarket-transactions')}
+                            data-testid="@coinmarket/menu/wallet-coinmarket-transactions"
+                        >
+                            <Translation id="TR_COINMARKET_LAST_TRANSACTIONS" />
+                        </Button>
                     </Box>
                 )}
             </Row>
@@ -49,9 +62,7 @@ const CoinmarketPageHeader = ({
 };
 
 export const CoinmarketLayoutHeader = ({ children }: CoinmarketLayoutHeaderProps) => {
-    const currentRouteName = useSelector(selectRouteName);
     const { activeSection } = useSelector(state => state.wallet.coinmarket);
-    const { goBack } = useHistory();
     const { translationString } = useTranslation();
     const fallbackTitle = useMemo(
         () => (activeSection === 'exchange' ? 'TR_COINMARKET_SWAP' : 'TR_COINMARKET_BUY_AND_SELL'),
@@ -61,14 +72,7 @@ export const CoinmarketLayoutHeader = ({ children }: CoinmarketLayoutHeaderProps
     const translatedTitle = translationString(fallbackTitle);
     const pageTitle = `Trezor Suite | ${translatedTitle}`;
 
-    useLayout(
-        pageTitle,
-        <CoinmarketPageHeader
-            fallbackTitle={fallbackTitle}
-            currentRouteName={currentRouteName}
-            goBack={goBack}
-        />,
-    );
+    useLayout(pageTitle, <CoinmarketPageHeader fallbackTitle={fallbackTitle} />);
 
     if (!children) return null;
 

packages/suite/src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayoutNavigation.tsx

@@ -0,0 +1,58 @@
+import { IconName, SubTabs } from '@trezor/components';
+import { Route } from '@suite-common/suite-types';
+
+import { useDispatch } from 'src/hooks/suite';
+import { Translation, TranslationKey } from 'src/components/suite/Translation';
+import { goto } from 'src/actions/suite/routerActions';
+
+type CoinmarketLayoutNavigationProps = {
+    route?: Route['name'];
+};
+
+type NavigationItem = {
+    id: Route['name'];
+    icon: IconName;
+    translationId: TranslationKey;
+};
+
+const navigationItems: NavigationItem[] = [
+    {
+        id: 'wallet-coinmarket-buy',
+        icon: 'plus',
+        translationId: 'TR_NAV_BUY',
+    },
+    {
+        id: 'wallet-coinmarket-sell',
+        icon: 'minus',
+        translationId: 'TR_NAV_SELL',
+    },
+    {
+        id: 'wallet-coinmarket-dca',
+        icon: 'clock',
+        translationId: 'TR_NAV_DCA',
+    },
+];
+
+export const CoinmarketLayoutNavigation = ({ route }: CoinmarketLayoutNavigationProps) => {
+    const dispatch = useDispatch();
+
+    const goToRoute = (route: Route['name']) => () => {
+        dispatch(goto(route, { preserveParams: true }));
+    };
+
+    return (
+        <SubTabs activeItemId={route} size="large">
+            {navigationItems.map(item => (
+                <SubTabs.Item
+                    key={item.id}
+                    data-testid={`@coinmarket/menu/${item.id}`}
+                    id={item.id}
+                    iconName={item.icon}
+                    onClick={goToRoute(item.id)}
+                >
+                    <Translation id={item.translationId} />
+                </SubTabs.Item>
+            ))}
+        </SubTabs>
+    );
+};