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

trezor · Dec 5, 2024 · 5badd87 · 5badd87
1 parent aff5a1c
commit 5badd87
Show file tree

Hide file tree

Showing 4 changed files with 111 additions and 81 deletions.
diff --git a/packages/components/src/components/form/SelectBar/SelectBar.stories.tsx b/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 = {

diff --git a/packages/components/src/components/form/SelectBar/SelectBar.tsx b/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>
     );

diff --git a/...nmarket/common/CoinmarketLayout/CoinmarketLayoutNavigation/CoinmarketLayoutNavigation.tsx b/...nmarket/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} />;
+};
diff --git a/packages/suite/src/views/wallet/tokens/TokensNavigation.tsx b/packages/suite/src/views/wallet/tokens/TokensNavigation.tsx
@@ -61,50 +61,50 @@ export const TokensNavigation = ({
 
     return (
         <Row alignItems="center" justifyContent="space-between" margin={{ bottom: spacings.md }}>
-            <Row alignItems="center" gap={spacings.xxs}>
-                <NavigationItem
-                    nameId="TR_NAV_TOKENS"
-                    isActive={routeName === 'wallet-tokens'}
-                    icon="tokens"
-                    goToRoute="wallet-tokens"
-                    preserveParams
-                    iconSize="mediumLarge"
-                    itemsCount={tokens.shownWithBalance.length || undefined}
-                    isRounded
-                    typographyStyle="hint"
-                />
-                <NavigationItem
-                    nameId="TR_HIDDEN"
-                    isActive={routeName === 'wallet-tokens-hidden'}
-                    icon="hide"
-                    goToRoute="wallet-tokens-hidden"
-                    preserveParams
-                    iconSize="mediumLarge"
-                    itemsCount={tokens.hiddenWithBalance.length || undefined}
-                    isRounded
-                    typographyStyle="hint"
-                />
-            </Row>
-            <Row>
-                <SearchAction
-                    tooltipText="TR_TOKENS_SEARCH_TOOLTIP"
-                    placeholder="TR_SEARCH_TOKENS"
-                    isExpanded={isExpanded}
-                    searchQuery={searchQuery}
-                    setExpanded={setExpanded}
-                    setSearch={setSearchQuery}
-                    onSearch={setSearchQuery}
-                    data-testid="@wallet/accounts/search-icon"
-                />
-                {showAddToken && (
-                    <IconButton
-                        icon="plus"
-                        size="small"
-                        variant="tertiary"
-                        onClick={handleAddToken}
-                    />
-                )}
-            </Row>
+            {/*<Row alignItems="center" gap={spacings.xxs}>*/}
+            {/*    <NavigationItem*/}
+            {/*        nameId="TR_NAV_TOKENS"*/}
+            {/*        isActive={routeName === 'wallet-tokens'}*/}
+            {/*        icon="tokens"*/}
+            {/*        goToRoute="wallet-tokens"*/}
+            {/*        preserveParams*/}
+            {/*        iconSize="mediumLarge"*/}
+            {/*        itemsCount={tokens.shownWithBalance.length || undefined}*/}
+            {/*        isRounded*/}
+            {/*        typographyStyle="hint"*/}
+            {/*    />*/}
+            {/*    <NavigationItem*/}
+            {/*        nameId="TR_HIDDEN"*/}
+            {/*        isActive={routeName === 'wallet-tokens-hidden'}*/}
+            {/*        icon="hide"*/}
+            {/*        goToRoute="wallet-tokens-hidden"*/}
+            {/*        preserveParams*/}
+            {/*        iconSize="mediumLarge"*/}
+            {/*        itemsCount={tokens.hiddenWithBalance.length || undefined}*/}
+            {/*        isRounded*/}
+            {/*        typographyStyle="hint"*/}
+            {/*    />*/}
+            {/*</Row>*/}
+            {/*<Row>*/}
+            {/*    <SearchAction*/}
+            {/*        tooltipText="TR_TOKENS_SEARCH_TOOLTIP"*/}
+            {/*        placeholder="TR_SEARCH_TOKENS"*/}
+            {/*        isExpanded={isExpanded}*/}
+            {/*        searchQuery={searchQuery}*/}
+            {/*        setExpanded={setExpanded}*/}
+            {/*        setSearch={setSearchQuery}*/}
+            {/*        onSearch={setSearchQuery}*/}
+            {/*        data-testid="@wallet/accounts/search-icon"*/}
+            {/*    />*/}
+            {/*    {showAddToken && (*/}
+            {/*        <IconButton*/}
+            {/*            icon="plus"*/}
+            {/*            size="small"*/}
+            {/*            variant="tertiary"*/}
+            {/*            onClick={handleAddToken}*/}
+            {/*        />*/}
+            {/*    )}*/}
+            {/*</Row>*/}
         </Row>
     );
 };