chore(suite): fix aborted discovery process in wallet switcher

trezor · Nov 6, 2024 · 527a53b · 527a53b
1 parent 47555aa
commit 527a53b
Show file tree

Hide file tree

Showing 9 changed files with 213 additions and 223 deletions.
diff --git a/packages/components/src/components/Card/Card.stories.tsx b/packages/components/src/components/Card/Card.stories.tsx
@@ -11,10 +11,23 @@ export default meta;
 
 export const Card: StoryObj = {
     args: {
-        children: <p>Lorem ipsum</p>,
+        children: (
+            <p>
+                Quos delectus veritatis est doloribus dolor. Odit fugit omnis magni ipsam quia rem
+                aut. Et alias sint non. Consequuntur dignissimos veritatis debitis corporis esse.
+                Quaerat voluptatem unde aut. Iusto laborum omnis quis amet atque. Sint culpa
+                delectus non soluta temporibus saepe. Sequi saepe corrupti aliquam ut sit assumenda
+                aspernatur consequuntur. Ut est ullam iusto facilis voluptatibus. Sit est cum quos.
+                Quasi deleniti non fugit iste alias consequuntur. Ullam ad ut culpa est reiciendis
+                molestiae. Reiciendis ab veritatis a totam inventore nihil voluptatem occaecati.
+                Quisquam atque odit quia nam. Laboriosam rem et ut. Maxime qui voluptatem
+                voluptatem.
+            </p>
+        ),
         label: '',
         paddingType: 'normal',
         fillType: 'default',
+        isHiglighted: false,
         ...getFramePropsStory(allowedCardFrameProps).args,
     },
     argTypes: {
@@ -35,6 +48,11 @@ export const Card: StoryObj = {
                 type: 'radio',
             },
         },
+        isHiglighted: {
+            control: {
+                type: 'boolean',
+            },
+        },
         ...getFramePropsStory(allowedCardFrameProps).argTypes,
     },
 };
diff --git a/packages/components/src/components/Card/Card.tsx b/packages/components/src/components/Card/Card.tsx
@@ -1,5 +1,5 @@
 import { forwardRef, HTMLAttributes, ReactNode } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { borders, Elevation, spacingsPx } from '@trezor/theme';
 import { ElevationUp, useElevation } from '../ElevationContext/ElevationContext';
 import {
@@ -46,12 +46,14 @@ const CardContainer = styled.div<
         $paddingType: PaddingType;
         $fillType: FillType;
         $isClickable: boolean;
+        $isHiglighted: boolean;
         $hasLabel: boolean;
     } & TransientProps<AllowedFrameProps>
 >`
     width: 100%;
     display: flex;
     flex-direction: column;
+    position: relative;
     padding: ${mapPaddingTypeToPadding};
     border-radius: ${borders.radii.md};
     transition:
@@ -60,6 +62,23 @@ const CardContainer = styled.div<
         border-color 0.2s;
     cursor: ${({ $isClickable }) => ($isClickable ? 'pointer' : 'default')};
 
+    ${({ theme, $isHiglighted, $paddingType }) =>
+        $isHiglighted &&
+        css`
+            overflow: hidden;
+            padding-left: calc(${spacingsPx.xxs} + ${mapPaddingTypeToPadding({ $paddingType })});
+
+            &::before {
+                content: '';
+                position: absolute;
+                left: 0;
+                top: 0;
+                bottom: 0;
+                width: ${spacingsPx.xxs};
+                background: ${theme.backgroundSecondaryDefault};
+            }
+        `}
+
     ${mapFillTypeToCSS}
     ${withFrameProps}
 `;
@@ -73,6 +92,7 @@ type CommonCardProps = AccessibilityProps & {
     children?: ReactNode;
     className?: string;
     label?: ReactNode;
+    isHiglighted?: boolean;
     'data-testid'?: string;
 };
 
@@ -91,6 +111,7 @@ const CardComponent = forwardRef<HTMLDivElement, CardPropsWithTransientProps>(
             className,
             tabIndex,
             label,
+            isHiglighted = false,
             'data-testid': dataTest,
             ...rest
         },
@@ -105,6 +126,7 @@ const CardComponent = forwardRef<HTMLDivElement, CardPropsWithTransientProps>(
                 $paddingType={paddingType}
                 $fillType={fillType}
                 $isClickable={Boolean(onClick)}
+                $isHiglighted={isHiglighted}
                 $hasLabel={Boolean(label)}
                 onClick={onClick}
                 onMouseEnter={onMouseEnter}
@@ -133,6 +155,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
             tabIndex,
             children,
             'data-testid': dataTest,
+            isHiglighted,
             ...rest
         },
         ref,
@@ -147,6 +170,7 @@ export const Card = forwardRef<HTMLDivElement, CardProps>(
             fillType,
             children,
             label,
+            isHiglighted,
             'data-testid': dataTest,
         };
         const frameProps = pickAndPrepareFrameProps(rest, allowedCardFrameProps);

diff --git a/packages/components/src/components/Card/utils.tsx b/packages/components/src/components/Card/utils.tsx
@@ -3,6 +3,7 @@ import {
     Elevation,
     mapElevationToBackground,
     mapElevationToBorder,
+    SpacingPxValues,
 } from '@trezor/theme';
 import { css, DefaultTheme, RuleSet } from 'styled-components';
 import { PaddingType, FillType } from './types';
@@ -19,8 +20,8 @@ type FillTypeMapArgs = {
     theme: DefaultTheme;
 };
 
-export const mapPaddingTypeToLabelPadding = ({ $paddingType }: PaddingMapArgs): number | string => {
-    const paddingMap: Record<PaddingType, number | string> = {
+export const mapPaddingTypeToLabelPadding = ({ $paddingType }: PaddingMapArgs): string => {
+    const paddingMap: Record<PaddingType, string> = {
         none: `${spacingsPx.xxs} 0`,
         small: `${spacingsPx.xxs} ${spacingsPx.sm}`,
         normal: `${spacingsPx.xs} ${spacingsPx.lg}`,
@@ -30,9 +31,9 @@ export const mapPaddingTypeToLabelPadding = ({ $paddingType }: PaddingMapArgs):
     return paddingMap[$paddingType];
 };
 
-export const mapPaddingTypeToPadding = ({ $paddingType }: PaddingMapArgs): number | string => {
-    const paddingMap: Record<PaddingType, number | string> = {
-        none: 0,
+export const mapPaddingTypeToPadding = ({ $paddingType }: PaddingMapArgs): SpacingPxValues => {
+    const paddingMap: Record<PaddingType, SpacingPxValues> = {
+        none: '0px',
         small: spacingsPx.sm,
         normal: spacingsPx.lg,
         large: spacingsPx.xl,

diff --git a/packages/components/src/components/Divider/Divider.tsx b/packages/components/src/components/Divider/Divider.tsx
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { Color, Elevation, mapElevationToBorder, spacings } from '@trezor/theme';
 import { useElevation } from '../ElevationContext/ElevationContext';
 import {
@@ -8,13 +8,16 @@ import {
     withFrameProps,
 } from '../../utils/frameProps';
 import { TransientProps } from '../../utils/transientProps';
-import { allowedHeadingFrameProps } from '../typography/Heading/Heading';
 
-export const allowedDividerFrameProps = ['margin'] as const satisfies FramePropsKeys[];
+export const allowedDividerFrameProps = [
+    'margin',
+    'width',
+    'overflow',
+] as const satisfies FramePropsKeys[];
 type AllowedFrameProps = Pick<FrameProps, (typeof allowedDividerFrameProps)[number]>;
 type DividerOrientation = 'horizontal' | 'vertical';
 
-type DividerProps = AllowedFrameProps & {
+export type DividerProps = AllowedFrameProps & {
     orientation?: DividerOrientation;
     strokeWidth?: number;
     color?: Color;
@@ -30,15 +33,16 @@ const Line = styled.div<
 >`
     ${({ $orientation, $strokeWidth }) =>
         $orientation === 'vertical'
-            ? `
-                height: 100%;
-                width: ${$strokeWidth}px;
-                min-width: ${$strokeWidth}px;`
-            : `
-                width: 100%;
-                height: ${$strokeWidth}px;
-                min-height: ${$strokeWidth}px;
-    `}
+            ? css`
+                  height: 100%;
+                  width: ${$strokeWidth}px;
+                  min-width: ${$strokeWidth}px;
+              `
+            : css`
+                  width: 100%;
+                  height: ${$strokeWidth}px;
+                  min-height: ${$strokeWidth}px;
+              `}
 
     background: ${({ theme, $elevation, $color }) =>
         $color ? theme[$color] : mapElevationToBorder({ theme, $elevation })};
@@ -56,7 +60,7 @@ export const Divider = ({
 
     const frameProps = pickAndPrepareFrameProps(
         { ...rest, margin: rest.margin ?? { top: spacings.md, bottom: spacings.md } },
-        allowedHeadingFrameProps,
+        allowedDividerFrameProps,
     );
 
     return (

diff --git a/packages/components/src/utils/frameProps.tsx b/packages/components/src/utils/frameProps.tsx
@@ -1,14 +1,14 @@
 import { css } from 'styled-components';
 import { makePropsTransient, TransientProps } from './transientProps';
-import { SpacingValues } from '@trezor/theme';
+import { SpacingValues, SpacingPxValues } from '@trezor/theme';
 
 type Margin = {
-    top?: SpacingValues | 'auto';
-    bottom?: SpacingValues | 'auto';
-    left?: SpacingValues | 'auto';
-    right?: SpacingValues | 'auto';
-    horizontal?: SpacingValues | 'auto';
-    vertical?: SpacingValues | 'auto';
+    top?: SpacingValues | SpacingPxValues | 'auto';
+    bottom?: SpacingValues | SpacingPxValues | 'auto';
+    left?: SpacingValues | SpacingPxValues | 'auto';
+    right?: SpacingValues | SpacingPxValues | 'auto';
+    horizontal?: SpacingValues | SpacingPxValues | 'auto';
+    vertical?: SpacingValues | SpacingPxValues | 'auto';
 };
 const overflows = [
     'auto',

diff --git a/packages/suite/src/views/suite/SwitchDevice/DeviceItem/EjectButton.tsx b/packages/suite/src/views/suite/SwitchDevice/DeviceItem/EjectButton.tsx
@@ -1,19 +1,9 @@
-import styled, { useTheme } from 'styled-components';
+import { useTheme } from 'styled-components';
 
-import { Tooltip, Icon, useElevation } from '@trezor/components';
+import { Tooltip, Icon } from '@trezor/components';
 import { Translation } from 'src/components/suite';
-import { Elevation, borders, mapElevationToBackground, spacingsPx } from '@trezor/theme';
 import { ContentType } from '../types';
 
-const EjectContainer = styled.div<{ $elevation: Elevation }>`
-    position: absolute;
-    right: ${spacingsPx.xs};
-    top: ${spacingsPx.xs};
-    background-color: ${mapElevationToBackground};
-    border-radius: ${borders.radii.full};
-    padding: ${spacingsPx.xxs};
-`;
-
 interface EjectButtonProps {
     setContentType: (contentType: ContentType) => void;
     'data-testid'?: string;
@@ -27,20 +17,16 @@ export const EjectButton = ({ setContentType, 'data-testid': dataTest }: EjectBu
         e.stopPropagation();
     };
 
-    const { elevation } = useElevation();
-
     return (
-        <EjectContainer $elevation={elevation}>
-            <Tooltip cursor="pointer" content={<Translation id="TR_EJECT_HEADING" />}>
-                <Icon
-                    data-testid={`${dataTest}/eject-button`}
-                    name="eject"
-                    size={22}
-                    color={theme.legacy.TYPE_LIGHT_GREY}
-                    hoverColor={theme.legacy.TYPE_DARK_GREY}
-                    onClick={onEjectClick}
-                />
-            </Tooltip>
-        </EjectContainer>
+        <Tooltip cursor="pointer" content={<Translation id="TR_EJECT_HEADING" />}>
+            <Icon
+                data-testid={`${dataTest}/eject-button`}
+                name="eject"
+                size={22}
+                variant="tertiary"
+                hoverColor={theme.textDefault}
+                onClick={onEjectClick}
+            />
+        </Tooltip>
     );
 };
diff --git a/packages/suite/src/views/suite/SwitchDevice/DeviceItem/EjectConfirmation.tsx b/packages/suite/src/views/suite/SwitchDevice/DeviceItem/EjectConfirmation.tsx
@@ -1,28 +1,18 @@
 import styled from 'styled-components';
 import { useDispatch, useSelector } from 'src/hooks/suite';
-import { H3, Button, Text } from '@trezor/components';
+import { H4, Button, Paragraph, Row } from '@trezor/components';
 import { Translation } from 'src/components/suite';
 import { deviceActions } from '@suite-common/wallet-core';
 import { analytics, EventType } from '@trezor/suite-analytics';
 import { AcquiredDevice } from '@suite-common/suite-types';
 import { MouseEventHandler, ReactNode } from 'react';
-import { spacings, spacingsPx } from '@trezor/theme';
+import { spacings } from '@trezor/theme';
 import { selectSuiteSettings } from '../../../../reducers/suite/suiteReducer';
 
 const Container = styled.div`
-    margin: 0 ${spacingsPx.xxs};
     cursor: auto;
 `;
 
-const Description = styled.div`
-    margin: ${spacingsPx.xs} 0 ${spacingsPx.md} 0;
-`;
-
-const Buttons = styled.div`
-    display: flex;
-    gap: ${spacingsPx.xxs};
-`;
-
 type EjectConfirmationProps = {
     onCancel: MouseEventHandler<HTMLButtonElement> | undefined;
     onClick: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
@@ -57,32 +47,32 @@ const EjectConfirmationContainer = ({
 
     return (
         <Container onClick={onClick}>
-            <H3>{title}</H3>
-            <Description>
-                <Text variant="tertiary">{description}</Text>
-            </Description>
-            <Buttons>
+            <H4>{title}</H4>
+            <Paragraph variant="tertiary" typographyStyle="hint" margin={{ top: spacings.xxs }}>
+                {description}
+            </Paragraph>
+            <Row gap={spacings.xs} margin={{ top: spacings.md }}>
                 <Button
                     size="small"
                     icon="eject"
                     iconSize={spacings.lg}
                     onClick={handleEject}
                     variant="primary"
-                    isFullWidth
                     data-testid="@switch-device/eject"
+                    isFullWidth
                 >
                     {primaryButtonLabel}
                 </Button>
                 <Button
                     size="small"
                     onClick={onCancel}
                     variant="tertiary"
-                    isFullWidth
                     data-testid="@switch-device/cancelEject"
+                    isFullWidth
                 >
                     <Translation id="TR_SWITCH_DEVICE_EJECT_CONFIRMATION_CANCEL_BUTTON" />
                 </Button>
-            </Buttons>
+            </Row>
         </Container>
     );
 };