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

Author: jvaclavik

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

@@ -1,13 +1,14 @@
 import { useArgs } from '@storybook/client-api';
 import { Meta, StoryObj } from '@storybook/react';
 
-import { SelectBar as SelectBarComponent, SelectBarProps } from './SelectBar';
+import { fillTypes, SelectBar as SelectBarComponent, SelectBarProps } from './SelectBar';
+import { IconName } from '../../Icon/Icon';
 
 const options = [
     { label: 'low', value: 'low' },
     { label: 'medium', value: 'medium' },
     { label: 'high', value: 'high' },
-    { label: 'custom', value: 'custom' },
+    { label: 'custom', value: 'custom', icon: 'clock' as IconName },
 ];
 
 const meta: Meta = {
@@ -18,6 +19,7 @@ const meta: Meta = {
         selectedOption: 'low',
         isDisabled: false,
         isFullWidth: undefined,
+        fillType: 'default',
     },
     argTypes: {
         label: {
@@ -50,6 +52,12 @@ const meta: Meta = {
                 type: 'boolean',
             },
         },
+        fillType: {
+            control: {
+                type: 'radio',
+            },
+            options: fillTypes,
+        },
     },
     component: SelectBarComponent,
 } as unknown as Meta;

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

@@ -22,10 +22,15 @@ 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]>;
 
+export const fillTypes = ['none', 'default'] as const;
+export type FillType = (typeof fillTypes)[number];
+
 const Wrapper = styled.div<TransientProps<AllowedFrameProps> & { $isFullWidth?: boolean }>`
     display: flex;
     align-items: center;
@@ -63,14 +68,16 @@ const Options = styled.div<{
     $optionsCount: number;
     $isFullWidth?: boolean;
     $elevation: Elevation;
+    $fillType: FillType;
 }>`
     position: relative;
     display: grid;
     grid-auto-columns: ${({ $optionsCount }) => `minmax(${getPuckWidth($optionsCount)}, 1fr)`};
     grid-auto-flow: column;
     gap: ${spacingsPx.xxs};
     padding: ${spacingsPx.xxs};
-    background: ${mapElevationToBackground};
+    background: ${({ $fillType, theme, $elevation }) =>
+        $fillType === 'default' ? mapElevationToBackground({ theme, $elevation }) : undefined};
     border-radius: ${borders.radii.full};
     width: ${({ $isFullWidth }) => ($isFullWidth ? '100%' : 'auto')};
 
@@ -156,6 +163,7 @@ type ValueTypes = number | string | boolean;
 type Option<V extends ValueTypes> = {
     label: ReactNode;
     value: V;
+    icon?: IconName;
 };
 
 export type SelectBarProps<V extends ValueTypes> = {
@@ -167,6 +175,7 @@ export type SelectBarProps<V extends ValueTypes> = {
     isFullWidth?: boolean;
     className?: string;
     'data-testid'?: string;
+    fillType?: FillType;
 } & AllowedFrameProps;
 
 // Generic type V is determined by selectedOption/options values
@@ -178,6 +187,7 @@ export const SelectBar = <V extends ValueTypes>({
     isDisabled = false,
     isFullWidth,
     className,
+    fillType = 'default',
     'data-testid': dataTest,
     ...rest
 }: SelectBarProps<V>) => {
@@ -247,6 +257,7 @@ export const SelectBar = <V extends ValueTypes>({
                 $optionsCount={options.length}
                 $isFullWidth={isFullWidth}
                 $elevation={elevation}
+                $fillType={fillType}
             >
                 <Puck
                     $optionsCount={options.length}
@@ -256,22 +267,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} />;
+};