fix(suite): Fix buy/sell/dca buttons

Author: jvaclavik

packages/components/src/components/form/SelectBar/SelectBar.stories.tsx

@@ -7,7 +7,7 @@ const options = [
     { label: 'low', value: 'low' },
     { label: 'medium', value: 'medium' },
     { label: 'high', value: 'high' },
-    { label: 'custom', value: 'custom' },
+    { label: 'custom', value: 'custom', icon: 'clock' },
 ];
 
 const meta: Meta = {

packages/components/src/components/form/SelectBar/SelectBar.tsx

@@ -22,6 +22,8 @@ import {
     withFrameProps,
 } from '../../../utils/frameProps';
 import { TransientProps } from '../../../utils/transientProps';
+import { Icon, IconName } from '../../Icon/Icon';
+import { Row } from '../../Flex/Flex';
 
 export const allowedSelectBarFrameProps = ['margin', 'width'] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedSelectBarFrameProps)[number]>;
@@ -156,6 +158,7 @@ type ValueTypes = number | string | boolean;
 type Option<V extends ValueTypes> = {
     label: ReactNode;
     value: V;
+    icon?: IconName;
 };
 
 export type SelectBarProps<V extends ValueTypes> = {
@@ -256,22 +259,38 @@ export const SelectBar = <V extends ValueTypes>({
                     onKeyDown={handleKeyboardNav}
                 />
 
-                {options.map(option => (
-                    <Option
-                        key={String(option.value)}
-                        onClick={handleOptionClick(option)}
-                        $isDisabled={!!isDisabled}
-                        $isSelected={
-                            selectedOptionIn !== undefined
-                                ? selectedOptionIn === option.value
-                                : false
-                        }
-                        data-testid={`select-bar/${String(option.value)}`}
-                    >
+                {options.map(option => {
+                    const content = option.icon ? (
+                        <Row gap={spacings.xs}>
+                            <Icon
+                                name={option.icon}
+                                size="medium"
+                                variant={selectedOptionIn === option.value ? 'primary' : undefined}
+                            />
+                            <span>{option.label}</span>
+                        </Row>
+                    ) : (
                         <span>{option.label}</span>
-                        <WidthMock>{option.label}</WidthMock>
-                    </Option>
-                ))}
+                    );
+
+                    return (
+                        <Option
+                            key={String(option.value)}
+                            onClick={handleOptionClick(option)}
+                            $isDisabled={!!isDisabled}
+                            $isSelected={
+                                selectedOptionIn !== undefined
+                                    ? selectedOptionIn === option.value
+                                    : false
+                            }
+                            data-testid={`select-bar/${String(option.value)}`}
+                        >
+                            {content}
+
+                            <WidthMock>{content}</WidthMock>
+                        </Option>
+                    );
+                })}
             </Options>
         </Wrapper>
     );

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

@@ -1,23 +1,34 @@
-import { Row } from '@trezor/components';
+import { IconName, SelectBar } from '@trezor/components';
+import { Route } from '@suite-common/suite-types';
 
-import { CoinmarketLayoutNavigationItem } from 'src/views/wallet/coinmarket/common/CoinmarketLayout/CoinmarketLayoutNavigation/CoinmarketLayoutNavigationItem';
+import { Translation } from '../../../../../../components/suite';
+import { goto } from '../../../../../../actions/suite/routerActions';
+import { useDispatch, useSelector } from '../../../../../../hooks/suite';
 
-export const CoinmarketLayoutNavigation = () => (
-    <Row>
-        <CoinmarketLayoutNavigationItem
-            route="wallet-coinmarket-buy"
-            title="TR_NAV_BUY"
-            icon="plus"
-        />
-        <CoinmarketLayoutNavigationItem
-            route="wallet-coinmarket-sell"
-            title="TR_NAV_SELL"
-            icon="minus"
-        />
-        <CoinmarketLayoutNavigationItem
-            route="wallet-coinmarket-dca"
-            title="TR_NAV_DCA"
-            icon="clock"
-        />
-    </Row>
-);
+const options = [
+    {
+        label: <Translation id="TR_NAV_BUY" />,
+        value: 'wallet-coinmarket-buy' as Route['name'],
+        icon: 'plus' as IconName,
+    },
+    {
+        label: <Translation id="TR_NAV_SELL" />,
+        value: 'wallet-coinmarket-sell' as Route['name'],
+        icon: 'minus' as IconName,
+    },
+    {
+        label: <Translation id="TR_NAV_DCA" />,
+        value: 'wallet-coinmarket-dca' as Route['name'],
+        icon: 'clock' as IconName,
+    },
+];
+
+export const CoinmarketLayoutNavigation = () => {
+    const dispatch = useDispatch();
+    const routeName = useSelector(state => state.router.route?.name);
+    const onChange = (newRoute: Route['name']) => {
+        dispatch(goto(newRoute));
+    };
+
+    return <SelectBar selectedOption={routeName} options={options} onChange={onChange} />;
+};