diff --git a/packages/components/src/components/Card/Card.tsx b/packages/components/src/components/Card/Card.tsx index 98af69ff7091..45c197c29186 100644 --- a/packages/components/src/components/Card/Card.tsx +++ b/packages/components/src/components/Card/Card.tsx @@ -33,7 +33,9 @@ export const allowedCardFrameProps = [ 'minHeight', 'maxHeight', 'overflow', + 'position', 'flex', + 'zIndex', ] as const satisfies FramePropsKeys[]; type AllowedFrameProps = Pick; diff --git a/packages/components/src/components/Image/Image.stories.tsx b/packages/components/src/components/Image/Image.stories.tsx index 91b4d17fb68b..57a7b91bc903 100644 --- a/packages/components/src/components/Image/Image.stories.tsx +++ b/packages/components/src/components/Image/Image.stories.tsx @@ -12,7 +12,7 @@ export default meta; export const Image: StoryObj = { args: { - image: 'BACKUP', + image: 'TOUCH', imageSrc: undefined, ...getFramePropsStory(allowedImageFrameProps).args, }, diff --git a/packages/components/src/components/Image/images.ts b/packages/components/src/components/Image/images.ts index 98f0fc168c37..c7ca6fae5bfe 100644 --- a/packages/components/src/components/Image/images.ts +++ b/packages/components/src/components/Image/images.ts @@ -34,38 +34,8 @@ export const SVG_IMAGES = { export type PngImage = keyof typeof PNG_IMAGES; export const PNG_IMAGES = { - BACKUP: 'backup.png', - BACKUP_2x: 'backup@2x.png', - CHECK_SHIELD: 'check-shield.png', - CHECK_SHIELD_2x: 'check-shield@2x.png', - CLOCK: 'clock.png', - CLOCK_2x: 'clock@2x.png', - CLOUDY: 'cloudy.webp', - CLOUDY_2x: 'cloudy@2x.webp', - COINS: 'coins.webp', - COINS_2x: 'coins@2x.webp', CONFIRM_FW_INSTALLATION_SCREEN_T1B1: 'confirm-fw-installation-screen-t1b1.png', CONNECTOR: 'connector.webp', - CREATE_SHAMIR_GROUP: 'create-shamir-group.webp', - CREATE_SHAMIR_GROUP_2x: 'create-shamir-group@2x.webp', - ERROR: 'error.png', - ERROR_2x: 'error@2x.png', - EXTRA_INFO: 'extra-info.png', - EXTRA_INFO_2x: 'extra-info@2x.png', - FIRMWARE: 'firmware.png', - FIRMWARE_2x: 'firmware@2x.png', - FOLDER: 'folder.png', - FOLDER_2x: 'folder@2x.png', - KEY: 'key.png', - KEY_2x: 'key@2x.png', - PIN: 'pin.png', - PIN_2x: 'pin@2x.png', - PIN_LOCKED: 'pin-locked.png', - PIN_LOCKED_2x: 'pin-locked@2x.png', - RECOVERY: 'recovery.png', - RECOVERY_2x: 'recovery@2x.png', - SHAMIR_SHARES: 'shamir-shares.png', - SHAMIR_SHARES_2x: 'shamir-shares@2x.png', TEX: 'tex.webp', TOUCH: 'touch.webp', TRADING_DCA_INVITY_APP: 'trading-dca-invity-app.webp', @@ -117,8 +87,4 @@ export const PNG_IMAGES = { TREZOR_UNKNOWN_2x: 'trezor-unknown@2x.webp', TREZOR_UNKNOWN_LARGE: 'trezor-unknown.webp', TREZOR_UNKNOWN_LARGE_2x: 'trezor-unknown@2x.webp', - UNDERSTAND: 'understand.png', - UNDERSTAND_2x: 'understand@2x.png', - WALLET: 'wallet.png', - WALLET_2x: 'wallet@2x.png', } as const; diff --git a/packages/components/src/components/typography/Text/Text.tsx b/packages/components/src/components/typography/Text/Text.tsx index 3bb3ce86ec19..b83e8d0a96cd 100644 --- a/packages/components/src/components/typography/Text/Text.tsx +++ b/packages/components/src/components/typography/Text/Text.tsx @@ -33,6 +33,7 @@ export const allowedTextFrameProps = [ 'margin', 'maxWidth', 'minWidth', + 'width', 'flex', 'position', 'zIndex', diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 0265e4e95cd5..51c568f62d3a 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -98,6 +98,7 @@ export { List, type ListProps } from './components/List/List'; export { StoryColumn, StoryWrapper } from './support/Story'; export { type Margin, + type Padding, type FrameProps, type FramePropsKeys, pickAndPrepareFrameProps, diff --git a/packages/suite-data/files/images/png/backup.png b/packages/suite-data/files/images/png/backup.png deleted file mode 100644 index 69a11e1729a9..000000000000 Binary files a/packages/suite-data/files/images/png/backup.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/backup@2x.png b/packages/suite-data/files/images/png/backup@2x.png deleted file mode 100644 index ea265ec9a2c2..000000000000 Binary files a/packages/suite-data/files/images/png/backup@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/check-shield.png b/packages/suite-data/files/images/png/check-shield.png deleted file mode 100644 index 9fc64175b134..000000000000 Binary files a/packages/suite-data/files/images/png/check-shield.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/check-shield@2x.png b/packages/suite-data/files/images/png/check-shield@2x.png deleted file mode 100644 index dc1a95f0365b..000000000000 Binary files a/packages/suite-data/files/images/png/check-shield@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/clock.png b/packages/suite-data/files/images/png/clock.png deleted file mode 100644 index cfc038ce8def..000000000000 Binary files a/packages/suite-data/files/images/png/clock.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/clock@2x.png b/packages/suite-data/files/images/png/clock@2x.png deleted file mode 100644 index a5afb57a8fc0..000000000000 Binary files a/packages/suite-data/files/images/png/clock@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/cloudy.webp b/packages/suite-data/files/images/png/cloudy.webp deleted file mode 100644 index 6878193081e2..000000000000 Binary files a/packages/suite-data/files/images/png/cloudy.webp and /dev/null differ diff --git a/packages/suite-data/files/images/png/cloudy@2x.webp b/packages/suite-data/files/images/png/cloudy@2x.webp deleted file mode 100644 index c4cf90b23649..000000000000 Binary files a/packages/suite-data/files/images/png/cloudy@2x.webp and /dev/null differ diff --git a/packages/suite-data/files/images/png/coins.webp b/packages/suite-data/files/images/png/coins.webp deleted file mode 100644 index 63f94037342e..000000000000 Binary files a/packages/suite-data/files/images/png/coins.webp and /dev/null differ diff --git a/packages/suite-data/files/images/png/coins@2x.webp b/packages/suite-data/files/images/png/coins@2x.webp deleted file mode 100644 index c0642a3de54f..000000000000 Binary files a/packages/suite-data/files/images/png/coins@2x.webp and /dev/null differ diff --git a/packages/suite-data/files/images/png/create-shamir-group.webp b/packages/suite-data/files/images/png/create-shamir-group.webp deleted file mode 100644 index e33c2c03dc11..000000000000 Binary files a/packages/suite-data/files/images/png/create-shamir-group.webp and /dev/null differ diff --git a/packages/suite-data/files/images/png/create-shamir-group@2x.webp b/packages/suite-data/files/images/png/create-shamir-group@2x.webp deleted file mode 100644 index eb8052a23f94..000000000000 Binary files a/packages/suite-data/files/images/png/create-shamir-group@2x.webp and /dev/null differ diff --git a/packages/suite-data/files/images/png/error.png b/packages/suite-data/files/images/png/error.png deleted file mode 100644 index 45ab404cb2dc..000000000000 Binary files a/packages/suite-data/files/images/png/error.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/error@2x.png b/packages/suite-data/files/images/png/error@2x.png deleted file mode 100644 index f43b5803f177..000000000000 Binary files a/packages/suite-data/files/images/png/error@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/extra-info.png b/packages/suite-data/files/images/png/extra-info.png deleted file mode 100644 index e2aa689ba284..000000000000 Binary files a/packages/suite-data/files/images/png/extra-info.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/extra-info@2x.png b/packages/suite-data/files/images/png/extra-info@2x.png deleted file mode 100644 index 5ad3bf876444..000000000000 Binary files a/packages/suite-data/files/images/png/extra-info@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/firmware.png b/packages/suite-data/files/images/png/firmware.png deleted file mode 100644 index 54a9a8fd1716..000000000000 Binary files a/packages/suite-data/files/images/png/firmware.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/firmware@2x.png b/packages/suite-data/files/images/png/firmware@2x.png deleted file mode 100644 index 63501bb1142b..000000000000 Binary files a/packages/suite-data/files/images/png/firmware@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/folder.png b/packages/suite-data/files/images/png/folder.png deleted file mode 100644 index f169586a0e24..000000000000 Binary files a/packages/suite-data/files/images/png/folder.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/folder@2x.png b/packages/suite-data/files/images/png/folder@2x.png deleted file mode 100644 index 9e7b51509fad..000000000000 Binary files a/packages/suite-data/files/images/png/folder@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/key.png b/packages/suite-data/files/images/png/key.png deleted file mode 100644 index fd2eacf6511c..000000000000 Binary files a/packages/suite-data/files/images/png/key.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/key@2x.png b/packages/suite-data/files/images/png/key@2x.png deleted file mode 100644 index bd76aaa91960..000000000000 Binary files a/packages/suite-data/files/images/png/key@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/pin-locked.png b/packages/suite-data/files/images/png/pin-locked.png deleted file mode 100644 index f72703af37d9..000000000000 Binary files a/packages/suite-data/files/images/png/pin-locked.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/pin-locked@2x.png b/packages/suite-data/files/images/png/pin-locked@2x.png deleted file mode 100644 index ef8b5bb7d00e..000000000000 Binary files a/packages/suite-data/files/images/png/pin-locked@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/pin.png b/packages/suite-data/files/images/png/pin.png deleted file mode 100644 index 4787110953df..000000000000 Binary files a/packages/suite-data/files/images/png/pin.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/pin@2x.png b/packages/suite-data/files/images/png/pin@2x.png deleted file mode 100644 index 7cbe5c0adeca..000000000000 Binary files a/packages/suite-data/files/images/png/pin@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/recovery.png b/packages/suite-data/files/images/png/recovery.png deleted file mode 100644 index 07bafcaad626..000000000000 Binary files a/packages/suite-data/files/images/png/recovery.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/recovery@2x.png b/packages/suite-data/files/images/png/recovery@2x.png deleted file mode 100644 index 3427f04d78b8..000000000000 Binary files a/packages/suite-data/files/images/png/recovery@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/tor-enabling.png b/packages/suite-data/files/images/png/tor-enabling.png deleted file mode 100644 index bd31bcac87ab..000000000000 Binary files a/packages/suite-data/files/images/png/tor-enabling.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/tor-enabling@2x.png b/packages/suite-data/files/images/png/tor-enabling@2x.png deleted file mode 100644 index e3d9fe9612c1..000000000000 Binary files a/packages/suite-data/files/images/png/tor-enabling@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/understand.png b/packages/suite-data/files/images/png/understand.png deleted file mode 100644 index 4954517c6a99..000000000000 Binary files a/packages/suite-data/files/images/png/understand.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/understand@2x.png b/packages/suite-data/files/images/png/understand@2x.png deleted file mode 100644 index c10fc1c86164..000000000000 Binary files a/packages/suite-data/files/images/png/understand@2x.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/wallet.png b/packages/suite-data/files/images/png/wallet.png deleted file mode 100644 index 7802de836d4e..000000000000 Binary files a/packages/suite-data/files/images/png/wallet.png and /dev/null differ diff --git a/packages/suite-data/files/images/png/wallet@2x.png b/packages/suite-data/files/images/png/wallet@2x.png deleted file mode 100644 index d9237446eee7..000000000000 Binary files a/packages/suite-data/files/images/png/wallet@2x.png and /dev/null differ diff --git a/packages/suite/src/components/backup/BackupSeedCards.tsx b/packages/suite/src/components/backup/BackupSeedCards.tsx index d091a7f4ea22..e5e41730898a 100644 --- a/packages/suite/src/components/backup/BackupSeedCards.tsx +++ b/packages/suite/src/components/backup/BackupSeedCards.tsx @@ -1,49 +1,8 @@ -import styled from 'styled-components'; - -import { variables } from '@trezor/components'; +import { Column, Grid, Icon, Paragraph, RadioCard } from '@trezor/components'; import { ConfirmKey, toggleCheckboxByKey } from 'src/actions/backup/backupActions'; import { Translation } from 'src/components/suite/Translation'; -import { useDispatch, useSelector } from 'src/hooks/suite'; - -import { BackupSeedCard } from './BackupSeedCard'; - -const Wrapper = styled.div` - display: flex; - width: 100%; - flex-direction: column; -`; - -const Instructions = styled.div` - text-align: center; - margin: 16px 0 26px; - color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; - font-size: ${variables.FONT_SIZE.TINY}; -`; - -const Items = styled.div` - display: grid; - grid-template-columns: 1fr 1fr 1fr; - gap: 10px; - width: 100%; - - ${variables.SCREEN_QUERY.BELOW_TABLET} { - grid-template-columns: 1fr; - } -`; - -const StyledBackupSeedCard = styled(BackupSeedCard)` - width: 30%; - - ${variables.SCREEN_QUERY.BELOW_TABLET} { - width: 100%; - - & + & { - margin-top: 10px; - } - } -`; +import { useDispatch, useLayoutSize, useSelector } from 'src/hooks/suite'; const items = [ { @@ -65,29 +24,33 @@ const items = [ export const BackupSeedCards = () => { const backup = useSelector(state => state.backup); - const dispatch = useDispatch(); + const { isBelowTablet } = useLayoutSize(); const isChecked = (key: ConfirmKey) => backup.userConfirmed.includes(key); return ( - - + + - - + + {items.map(item => ( - dispatch(toggleCheckboxByKey(item.key))} - label={item.label} - icon={item.icon} - isChecked={isChecked(item.key)} - /> + dataTestId={`@backup/check-item/${item.key}`} + > + + + + {item.label} + + + ))} - - + + ); }; diff --git a/packages/suite/src/components/connection/thp/ThpPairingStart.tsx b/packages/suite/src/components/connection/thp/ThpPairingStart.tsx deleted file mode 100644 index c7e3a185bb77..000000000000 --- a/packages/suite/src/components/connection/thp/ThpPairingStart.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { useState } from 'react'; - -import { Button, Column, Text } from '@trezor/components'; -import { spacings } from '@trezor/theme'; - -import { Translation } from 'src/components/suite/Translation'; - -import { startThpSessionThunk } from '../../../actions/thp/startThpSessionThunk'; -import { useDispatch } from '../../../hooks/suite'; - -export const ThpPairingStart = () => { - const [isLoading, setIsLoading] = useState(false); - const dispatch = useDispatch(); - - const onClick = () => { - setIsLoading(true); - dispatch(startThpSessionThunk()); - }; - - return ( - - - - - - - - ); -}; diff --git a/packages/suite/src/components/firmware/Buttons/FirmwareButtonsRow.tsx b/packages/suite/src/components/firmware/Buttons/FirmwareButtonsRow.tsx deleted file mode 100644 index 668fcd74dd0d..000000000000 --- a/packages/suite/src/components/firmware/Buttons/FirmwareButtonsRow.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Row } from '@trezor/components'; -import { spacings } from '@trezor/theme'; - -import { FirmwareCloseButton } from './FirmwareCloseButton'; - -type FirmwareButtonsRowProps = { - children: React.ReactNode; - onClose?: () => void; - withCancelButton?: boolean; -}; - -export const FirmwareButtonsRow = ({ - children, - onClose, - withCancelButton, -}: FirmwareButtonsRowProps) => ( - - {children} - {withCancelButton && onClose && ( - - )} - -); diff --git a/packages/suite/src/components/firmware/Buttons/FirmwareCloseButton.tsx b/packages/suite/src/components/firmware/Buttons/FirmwareCloseButton.tsx deleted file mode 100644 index 277c86b82b72..000000000000 --- a/packages/suite/src/components/firmware/Buttons/FirmwareCloseButton.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import { Button, ButtonProps } from '@trezor/components'; - -import { Translation } from 'src/components/suite/Translation'; - -export const FirmwareCloseButton = (props: Omit) => ( - -); diff --git a/packages/suite/src/components/firmware/Buttons/FirmwareContinueButton.tsx b/packages/suite/src/components/firmware/Buttons/FirmwareContinueButton.tsx deleted file mode 100644 index ba8bae303bd8..000000000000 --- a/packages/suite/src/components/firmware/Buttons/FirmwareContinueButton.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; - -import styled from 'styled-components'; - -import { Button, ButtonProps } from '@trezor/components'; - -import { Translation } from 'src/components/suite/Translation'; - -// eslint-disable-next-line local-rules/no-override-ds-component -const StyledButton = styled(Button)` - min-width: 180px; -`; - -export const FirmwareContinueButton = (props: Omit) => ( - - - -); diff --git a/packages/suite/src/components/firmware/Buttons/FirmwareInstallButton.tsx b/packages/suite/src/components/firmware/Buttons/FirmwareInstallButton.tsx deleted file mode 100644 index 013bd54c8edc..000000000000 --- a/packages/suite/src/components/firmware/Buttons/FirmwareInstallButton.tsx +++ /dev/null @@ -1,38 +0,0 @@ -import { Button, ButtonProps, Tooltip } from '@trezor/components'; - -import { Translation } from 'src/components/suite/Translation'; -import { useTranslation } from 'src/hooks/suite'; - -const InstallButtonCommon = ( - props: Omit & { children?: React.ReactNode }, -) => ( - -); - -interface FirmwareInstallButtonProps extends Omit { - multipleDevicesConnected?: boolean; - children?: React.ReactNode; -} - -export const FirmwareInstallButton = (props: FirmwareInstallButtonProps) => { - const { translationString } = useTranslation(); - - const { multipleDevicesConnected, ...rest } = props; - - if (multipleDevicesConnected) { - return ( - {translationString('TR_INSTALL_FW_DISABLED_MULTIPLE_DEVICES')}} - > - - - ); - } - - return ; -}; diff --git a/packages/suite/src/components/firmware/Buttons/FirmwareRetryButton.tsx b/packages/suite/src/components/firmware/Buttons/FirmwareRetryButton.tsx deleted file mode 100644 index 65a16390cb38..000000000000 --- a/packages/suite/src/components/firmware/Buttons/FirmwareRetryButton.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; - -import { Button, ButtonProps } from '@trezor/components'; - -import { Translation } from 'src/components/suite/Translation'; - -export const FirmwareRetryButton = (props: Omit) => ( - -); diff --git a/packages/suite/src/components/firmware/FirmwareInitial.tsx b/packages/suite/src/components/firmware/FirmwareInitial.tsx index a0880273da91..0c80eb754aa5 100644 --- a/packages/suite/src/components/firmware/FirmwareInitial.tsx +++ b/packages/suite/src/components/firmware/FirmwareInitial.tsx @@ -5,38 +5,23 @@ import styled from 'styled-components'; import { ExtendedMessageDescriptor } from '@suite-common/intl-types'; import { AcquiredDevice } from '@suite-common/suite-types'; import { selectDevices } from '@suite-common/wallet-core'; -import { Column, Note, variables } from '@trezor/components'; +import { ButtonProps, Column, Note, Row, Tooltip, variables } from '@trezor/components'; import { FirmwareType } from '@trezor/connect'; import { DeviceModelInternal, isBitcoinOnlyDevice } from '@trezor/device-utils'; import { spacingsPx } from '@trezor/theme'; -import { - FirmwareInstallButton, - FirmwareOffer, - FirmwareWarningsList, -} from 'src/components/firmware'; -import { - OnboardingButtonSkip, - OnboardingStepBox, - SkipStepConfirmation, -} from 'src/components/onboarding'; +import { FirmwareOffer, FirmwareWarningsList } from 'src/components/firmware'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; +import { SkipStepConfirmation } from 'src/components/onboarding/SkipStepConfirmation'; import { Translation } from 'src/components/suite/Translation'; import { useDevice, useOnboarding, useSelector, useTranslation } from 'src/hooks/suite'; import { useFirmwareDesktopUpdate } from 'src/hooks/suite/useFirmwareDesktopUpdate'; import { selectIsDebugModeActive } from 'src/selectors/suite/suiteSelectors'; import { PrerequisitesGuide } from '../suite'; -import { FirmwareButtonsRow } from './Buttons/FirmwareButtonsRow'; import { FirmwareLowBatteryModal } from './FirmwareLowBatteryModal'; import { FirmwareSwitchWarning } from './FirmwareSwitchWarning'; -const Description = styled.div` - align-items: center; - display: flex; - flex-direction: column; - gap: 16px; -`; - const TextButton = styled.button` background: none; border: none; @@ -68,12 +53,31 @@ const EmphasizedText = styled.b` font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD}; `; -interface GetDescriptionProps { +const InstallButton = ({ isDisabled, onClick, variant, children }: ButtonProps) => ( + } + > + + {children} + + +); + +type GetDescriptionProps = { required: boolean; targetType: FirmwareType; shouldSwitchFirmwareType?: boolean; isBitcoinOnlyAvailable?: boolean; -} +}; const getDescription = ({ required, @@ -119,6 +123,7 @@ type FirmwareInitialProps = { onClose?: () => void; }; +// TODO: consolidate with FirmwareInitialStandalone export const FirmwareInitial = ({ shouldSwitchFirmwareType = false, onClose, @@ -188,25 +193,25 @@ export const FirmwareInitial = ({ /> ), description: ( - + - + ), body: ( - + ), innerActions: ( - - + installFirmware(FirmwareType.Universal)} - multipleDevicesConnected={multipleDevicesConnected} + isDisabled={multipleDevicesConnected} > , }} /> - - - + installFirmware(targetType)} - multipleDevicesConnected={multipleDevicesConnected} + isDisabled={multipleDevicesConnected} > , }} /> - - + + ), }; } else if (['none', 'unknown'].includes(device.firmware)) { @@ -252,16 +256,18 @@ export const FirmwareInitial = ({ /> ), body: ( - + ), innerActions: ( - installFirmware(targetType)} - multipleDevicesConnected={multipleDevicesConnected} - /> + isDisabled={multipleDevicesConnected} + > + + ), }; } else if (device.mode === 'bootloader') { @@ -320,7 +326,7 @@ export const FirmwareInitial = ({ /> ), body: ( - + {deviceWillBeWiped && ( @@ -345,20 +351,25 @@ export const FirmwareInitial = ({ ), innerActions: ( - - + shouldCheckSeed ? setStatus('check-seed') : installFirmware(targetType) } - multipleDevicesConnected={multipleDevicesConnected} + isDisabled={multipleDevicesConnected} > - - + + {deviceWillBeWiped && onClose && ( + + + + )} + ), outerActions: device.firmware === 'outdated' && !isFirmwareInstallationMandatory ? ( - { setShowSkipConfirmation(true); updateAnalytics({ firmware: 'skip' }); @@ -366,7 +377,7 @@ export const FirmwareInitial = ({ data-testid="@firmware/skip-button" > - + ) : undefined, }; } @@ -377,8 +388,8 @@ export const FirmwareInitial = ({ {showSkipConfirmation && ( setShowSkipConfirmation(false)} /> )} - {content.body} - + ); } diff --git a/packages/suite/src/components/firmware/FirmwareLowBatteryModal.tsx b/packages/suite/src/components/firmware/FirmwareLowBatteryModal.tsx index 356ec0c0fd3e..d2b86890de82 100644 --- a/packages/suite/src/components/firmware/FirmwareLowBatteryModal.tsx +++ b/packages/suite/src/components/firmware/FirmwareLowBatteryModal.tsx @@ -1,5 +1,5 @@ import { DEVICE_LOW_BATTERY_PERCENTAGE_THRESHOLD } from '@suite-common/wallet-core'; -import { Card, Column, Text } from '@trezor/components'; +import { Card, Column, Paragraph } from '@trezor/components'; import { Translation } from 'src/components/suite/Translation'; @@ -11,17 +11,17 @@ type FirmwareLowBatteryModalProps = { export const FirmwareLowBatteryModal = ({ onClose }: FirmwareLowBatteryModalProps) => ( - + - + - - + + - + diff --git a/packages/suite/src/components/firmware/index.tsx b/packages/suite/src/components/firmware/index.tsx index f75c3a10f664..9ecde2ae4cac 100644 --- a/packages/suite/src/components/firmware/index.tsx +++ b/packages/suite/src/components/firmware/index.tsx @@ -6,10 +6,6 @@ export { FirmwareInitialStandalone } from './FirmwareInitialStandalone'; export { Fingerprint } from './Fingerprint'; export { FirmwareProgressBar } from './FirmwareProgressBar'; export { SelectCustomFirmware } from './SelectCustomFirmware'; -export { FirmwareRetryButton } from './Buttons/FirmwareRetryButton'; -export { FirmwareCloseButton } from './Buttons/FirmwareCloseButton'; -export { FirmwareContinueButton } from './Buttons/FirmwareContinueButton'; -export { FirmwareInstallButton } from './Buttons/FirmwareInstallButton'; export { FirmwareInstallationProgressCheck } from './ProgressCheck/FirmwareInstallationProgressCheck'; export { RotatingPhrases } from './RotatingPhrases'; export { FirmwareWarningsList } from './FirmwareWarningsList'; diff --git a/packages/suite/src/components/onboarding/Buttons/OnboardingButtonBack.tsx b/packages/suite/src/components/onboarding/Buttons/OnboardingButtonBack.tsx deleted file mode 100644 index 964b64b4e75d..000000000000 --- a/packages/suite/src/components/onboarding/Buttons/OnboardingButtonBack.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Button, ButtonProps } from '@trezor/components'; - -import { Translation } from 'src/components/suite/Translation'; - -export const OnboardingButtonBack = (props: Omit) => ( - -); diff --git a/packages/suite/src/components/onboarding/Buttons/OnboardingButtonCta.tsx b/packages/suite/src/components/onboarding/Buttons/OnboardingButtonCta.tsx deleted file mode 100644 index e0889c411f58..000000000000 --- a/packages/suite/src/components/onboarding/Buttons/OnboardingButtonCta.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import styled from 'styled-components'; - -import { Button, ButtonProps } from '@trezor/components'; - -// eslint-disable-next-line local-rules/no-override-ds-component -const StyledButton = styled(Button)` - min-width: 180px; -`; - -export const OnboardingButtonCta = (props: ButtonProps) => ( - {props.children} -); diff --git a/packages/suite/src/components/onboarding/Buttons/OnboardingButtonSkip.tsx b/packages/suite/src/components/onboarding/Buttons/OnboardingButtonSkip.tsx deleted file mode 100644 index 55270c412feb..000000000000 --- a/packages/suite/src/components/onboarding/Buttons/OnboardingButtonSkip.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { HtmlHTMLAttributes } from 'react'; - -import { TextButton } from '@trezor/components'; - -export const OnboardingButtonSkip = (props: HtmlHTMLAttributes) => ( - - {props.children} - -); diff --git a/packages/suite/src/components/onboarding/CollapsibleOnboardingCard.tsx b/packages/suite/src/components/onboarding/CollapsibleOnboardingCard.tsx deleted file mode 100644 index 4c366a974a48..000000000000 --- a/packages/suite/src/components/onboarding/CollapsibleOnboardingCard.tsx +++ /dev/null @@ -1,273 +0,0 @@ -import { HTMLAttributes, ReactNode } from 'react'; - -import { motion } from 'framer-motion'; -import styled, { css } from 'styled-components'; - -import { - ElevationUp, - H2, - Icon, - Image, - ImageKey, - Text, - motionEasing, - useElevation, - variables, -} from '@trezor/components'; -import { Elevation, borders, mapElevationToBackground, spacings, zIndices } from '@trezor/theme'; - -const headerVariants = { - closed: { - opacity: 1, - }, - expanded: { - opacity: 0, - }, -}; - -const animationVariants = { - closed: { - opacity: 0, - height: 0, - }, - expanded: { - opacity: 1, - height: 'auto', - }, -}; - -type CardWrapperProps = { - $expandable?: boolean; - $expanded?: boolean; - $nested?: boolean; - $variant?: 'small' | 'large'; - $elevation: Elevation; - $withImage: boolean; -}; - -const CardWrapper = styled.div` - position: relative; - padding: ${({ $variant }) => ($variant === 'large' ? '40px 80px' : '20px 30px')}; - width: ${({ $variant }) => ($variant === 'large' ? '100%' : 'auto')}; - border-radius: ${borders.radii.md}; - background: ${mapElevationToBackground}; - z-index: ${zIndices.base}; - cursor: ${({ $expanded }) => !$expanded && 'pointer'}; - - ${({ $expandable, $variant }) => - !$expandable && - css` - ${variables.SCREEN_QUERY.BELOW_LAPTOP} { - padding-left: ${$variant === 'large' ? '40px' : '30px'}; - padding-right: ${$variant === 'large' ? '40px' : '30px'}; - padding-bottom: ${$variant === 'large' ? '40px' : '20px'}; - } - - ${variables.SCREEN_QUERY.MOBILE} { - padding-left: 20px; - padding-right: 20px; - } - `} - - ${({ $expanded, $expandable, theme }) => - $expandable && - !$expanded && - css` - background: ${theme.legacy.BG_GREY}; - box-shadow: rgb(0 0 0 / 0%) 0 2px 5px 0; - border-radius: 10px; - padding: 16px 26px; - `} - - ${({ $expanded, $expandable, theme, $variant }) => - $expandable && - $expanded && - css` - background: ${theme.legacy.BG_WHITE}; - border-radius: 16px; - padding: ${$variant === 'large' ? '40px' : '20px 30px'}; - `} - - ${({ $nested, theme }) => - $nested - ? css` - padding: 0; - ` - : css` - box-shadow: 0 2px 5px 0 ${theme.legacy.BOX_SHADOW_BLACK_20}; - `} - - ${({ $withImage }) => - $withImage && - css` - margin-top: 50px; - padding-top: 80px; - `} - - ${({ $variant: variant }) => - variant === 'small' && - css` - max-width: 550px; - `} -`; - -const CardWrapperInner = styled.div<{ $expandable: boolean }>` - overflow: ${({ $expandable }) => $expandable && 'hidden'}; -`; - -const CardImageWrapper = styled.div` - width: 100px; - height: 100px; - position: absolute; - margin-left: auto; - margin-right: auto; - top: -50px; - left: 0; - right: 0; -`; - -const ChildrenWrapper = styled.div` - display: flex; - flex-direction: column; - align-items: center; -`; - -const Description = styled.div<{ $hasChildren?: boolean }>` - padding: 0 60px 36px; - text-align: center; - - ${variables.SCREEN_QUERY.BELOW_TABLET} { - padding: 0 0 36px; - } -`; - -const CollapsibleCardInner = styled(motion.div)` - text-align: left; - display: flex; - align-items: center; - padding: 0 6px; -`; - -const HeadingExpandable = styled.div` - font-size: ${variables.FONT_SIZE.NORMAL}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; - flex: 1; -`; - -const Tag = styled.div` - color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY}; - text-transform: uppercase; - font-size: ${variables.FONT_SIZE.TINY}; - font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD}; - letter-spacing: 0.2px; -`; - -const IconWrapper = styled.div` - position: absolute; - top: 24px; - right: 24px; -`; - -export interface CollapsibleOnboardingCardProps extends HTMLAttributes { - image?: ImageKey; - variant?: 'small' | 'large'; - expandable?: boolean; - expanded?: boolean; - nested?: boolean; - onToggle?: () => void; - expandableIcon?: ReactNode; - heading?: ReactNode; - description?: ReactNode; - children?: ReactNode; - tag?: ReactNode; -} - -export const CollapsibleOnboardingCard = ({ - heading, - description, - image, - children, - variant = 'large', - expanded = true, - expandable = false, - expandableIcon, - nested, - tag, - onToggle = () => undefined, - ...rest -}: CollapsibleOnboardingCardProps) => { - const { elevation } = useElevation(); - - return ( - - - - - {expandable && ( - - {expandableIcon} - - {heading} - - {tag && {tag}} - - )} - - - {expandable && expanded && ( - - - - )} - - {heading && ( -

- {heading} -

- )} - - {description && ( - - {description} - - )} - - {image && ( - - - - )} - - {children} - - - - - - ); -}; diff --git a/packages/suite/src/components/onboarding/OnboardingCard/OnboardingCard.tsx b/packages/suite/src/components/onboarding/OnboardingCard/OnboardingCard.tsx new file mode 100644 index 000000000000..5a9de713b236 --- /dev/null +++ b/packages/suite/src/components/onboarding/OnboardingCard/OnboardingCard.tsx @@ -0,0 +1,130 @@ +import { ReactNode } from 'react'; +import { useIntl } from 'react-intl'; + +import { TrezorDevice } from '@suite-common/suite-types'; +import { + Box, + Card, + Column, + H2, + IconCircle, + IconName, + Modal, + Padding, + Paragraph, + Row, +} from '@trezor/components'; +import TrezorConnect from '@trezor/connect'; +import { getDeviceColorVariant } from '@trezor/device-utils'; +import { ConfirmOnDevice } from '@trezor/product-components'; +import { zIndices } from '@trezor/theme'; + +import { Translation } from 'src/components/suite/Translation'; +import messages from 'src/support/messages'; + +import { OnboardingCardButton } from './OnboardingCardButton'; +import { OnboardingCardSecondaryButton } from './OnboardingCardSecondaryButton'; + +export type OnboardingCardProps = { + heading?: ReactNode; + description?: ReactNode; + innerActions?: ReactNode; + outerActions?: ReactNode; + iconName?: IconName; + device?: TrezorDevice; + isConfirmedOnDevice?: boolean; + devicePrompt?: ReactNode; + isActionAbortable?: boolean; + children?: ReactNode; + padding?: Padding; + 'data-testid'?: string; +}; + +export const OnboardingCard = ({ + heading, + description, + iconName, + innerActions, + outerActions, + device, + isActionAbortable, + isConfirmedOnDevice = false, + devicePrompt, + children, + padding = { horizontal: 60, top: 48, bottom: 60 }, + 'data-testid': dataTestId, +}: OnboardingCardProps) => { + const intl = useIntl(); + const deviceModelInternal = device?.features?.internal_model; + const isBackDropVisible = !!deviceModelInternal && isConfirmedOnDevice; + + return ( + <> + {isBackDropVisible && } + + {isBackDropVisible && ( + + } + deviceModelInternal={deviceModelInternal} + deviceUnitColor={getDeviceColorVariant(device)} + onCancel={ + isActionAbortable + ? () => + TrezorConnect.cancel( + intl.formatMessage(messages.TR_CANCELLED), + ) + : undefined + } + /> + + )} + + + {(heading || description) && ( + + {heading &&

{heading}

} + {description && ( + + {description} + + )} + + )} + {children && {children}} + {innerActions && {innerActions}} + + + {iconName && ( + + + + )} + {outerActions && {outerActions}} + + + ); +}; + +OnboardingCard.Button = OnboardingCardButton; +OnboardingCard.SecondaryButton = OnboardingCardSecondaryButton; diff --git a/packages/suite/src/components/onboarding/OnboardingCard/OnboardingCardButton.tsx b/packages/suite/src/components/onboarding/OnboardingCard/OnboardingCardButton.tsx new file mode 100644 index 000000000000..887e320dd2c2 --- /dev/null +++ b/packages/suite/src/components/onboarding/OnboardingCard/OnboardingCardButton.tsx @@ -0,0 +1,3 @@ +import { Button, ButtonProps } from '@trezor/components'; + +export const OnboardingCardButton = (props: ButtonProps) => +); diff --git a/packages/suite/src/components/onboarding/OnboardingLayout.tsx b/packages/suite/src/components/onboarding/OnboardingLayout.tsx index 1906800d9350..79fae1bf5e6a 100644 --- a/packages/suite/src/components/onboarding/OnboardingLayout.tsx +++ b/packages/suite/src/components/onboarding/OnboardingLayout.tsx @@ -8,7 +8,7 @@ import { TREZOR_SUPPORT_URL } from '@trezor/urls'; import { MODAL } from 'src/actions/suite/constants'; import { GuideButton, GuideRouter } from 'src/components/guide'; -import { OnboardingProgressBar } from 'src/components/onboarding'; +import { OnboardingProgressBar } from 'src/components/onboarding/OnboardingProgressBar'; import { Translation } from 'src/components/suite/Translation'; import { SuiteBanners } from 'src/components/suite/banners'; import { ReduxModal } from 'src/components/suite/modals/ReduxModal/ReduxModal'; @@ -37,7 +37,7 @@ const OnboardingContent = ({ children }: OnboardingContentProps) => { const { onCancelHandler } = useOnboardingCancelButtonContext(); return ( - + diff --git a/packages/suite/src/components/onboarding/OnboardingOption.tsx b/packages/suite/src/components/onboarding/OnboardingOption.tsx index bcf1849532a7..1b199db4e098 100644 --- a/packages/suite/src/components/onboarding/OnboardingOption.tsx +++ b/packages/suite/src/components/onboarding/OnboardingOption.tsx @@ -1,6 +1,6 @@ import { HTMLAttributes, ReactNode } from 'react'; -import styled, { css } from 'styled-components'; +import styled from 'styled-components'; import { Icon, IconName, useElevation, variables } from '@trezor/components'; import { @@ -51,24 +51,6 @@ const IconWrapper = styled.div` margin-right: 24px; `; -export const OptionsWrapper = styled.div<{ $fullWidth?: boolean }>` - display: flex; - - @media all and (max-width: ${variables.SCREEN_SIZE.SM}) { - flex-direction: column; - } - - ${props => - props.$fullWidth !== false && - css` - width: 100%; - `} -`; - -export const OptionsDivider = styled.div` - flex: 0 0 24px; -`; - interface OnboardingOptionProps extends HTMLAttributes { heading: ReactNode; description?: ReactNode; diff --git a/packages/suite/src/components/onboarding/OnboardingStepBox.tsx b/packages/suite/src/components/onboarding/OnboardingStepBox.tsx deleted file mode 100644 index 9831853c9f90..000000000000 --- a/packages/suite/src/components/onboarding/OnboardingStepBox.tsx +++ /dev/null @@ -1,108 +0,0 @@ -import { ReactNode } from 'react'; -import { useIntl } from 'react-intl'; - -import styled from 'styled-components'; - -import { TrezorDevice } from '@suite-common/suite-types'; -import { Box, Column, Modal, Row } from '@trezor/components'; -import TrezorConnect from '@trezor/connect'; -import { ConfirmOnDevice } from '@trezor/product-components'; -import { zIndices } from '@trezor/theme'; - -import { Translation } from 'src/components/suite/Translation'; -import messages from 'src/support/messages'; - -import { - CollapsibleOnboardingCard, - CollapsibleOnboardingCardProps, -} from './CollapsibleOnboardingCard'; - -export type OnboardingStepBoxProps = CollapsibleOnboardingCardProps & { - innerActions?: ReactNode; - outerActions?: ReactNode; - device?: TrezorDevice; - disableConfirmWrapper?: boolean; - nested?: boolean; - devicePromptTitle?: ReactNode; - isActionAbortable?: boolean; -}; - -const StyledCollapsibleOnboardingCard = styled(CollapsibleOnboardingCard)<{ - $isBackDropVisible: boolean; -}>` - z-index: ${({ $isBackDropVisible }) => ($isBackDropVisible ? zIndices.modal : 0)}; -`; - -// Legacy duplicate of CollapsibleBox !! Should not be used elsewhere -export const OnboardingStepBox = ({ - heading, - description, - image, - innerActions, - outerActions, - device, - isActionAbortable, - disableConfirmWrapper, - nested, - devicePromptTitle, - children, - ...rest -}: OnboardingStepBoxProps) => { - const intl = useIntl(); - - const deviceModelInternal = device?.features?.internal_model; - - const isBackDropVisible = !!deviceModelInternal && !disableConfirmWrapper; - - return ( - <> - {isBackDropVisible && } - - - {!disableConfirmWrapper && deviceModelInternal && ( - - - } - deviceModelInternal={deviceModelInternal} - deviceUnitColor={device?.features?.unit_color} - onCancel={ - isActionAbortable - ? () => - TrezorConnect.cancel( - intl.formatMessage(messages.TR_CANCELLED), - ) - : undefined - } - /> - - )} - {(children || innerActions) && ( - <> - {children} - {innerActions && ( - - {innerActions} - - )} - - )} - - {outerActions && {outerActions}} - - - ); -}; diff --git a/packages/suite/src/components/onboarding/index.ts b/packages/suite/src/components/onboarding/index.ts deleted file mode 100644 index fdbc248f16c8..000000000000 --- a/packages/suite/src/components/onboarding/index.ts +++ /dev/null @@ -1,25 +0,0 @@ -import { OnboardingButtonBack } from './Buttons/OnboardingButtonBack'; -import { OnboardingButtonCta } from './Buttons/OnboardingButtonCta'; -import { OnboardingButtonSkip } from './Buttons/OnboardingButtonSkip'; -import { Hologram } from './Hologram'; -import { OnboardingLayout } from './OnboardingLayout'; -import { OnboardingOption, OptionsDivider, OptionsWrapper } from './OnboardingOption'; -import { OnboardingProgressBar } from './OnboardingProgressBar'; -import { OnboardingStepBox, type OnboardingStepBoxProps } from './OnboardingStepBox'; -import { SkipStepConfirmation } from './SkipStepConfirmation'; - -export { - OnboardingButtonCta, - OnboardingButtonBack, - OnboardingButtonSkip, - OnboardingOption, - OptionsWrapper, - OptionsDivider, - OnboardingLayout, - Hologram, - OnboardingStepBox, - SkipStepConfirmation, - OnboardingProgressBar, -}; - -export type { OnboardingStepBoxProps }; diff --git a/packages/suite/src/components/recovery/SelectRecoveryType.tsx b/packages/suite/src/components/recovery/SelectRecoveryType.tsx index bbbbec7103e9..c893ecb32519 100644 --- a/packages/suite/src/components/recovery/SelectRecoveryType.tsx +++ b/packages/suite/src/components/recovery/SelectRecoveryType.tsx @@ -1,26 +1,32 @@ -import { OnboardingOption, OptionsDivider, OptionsWrapper } from 'src/components/onboarding'; +import { Grid } from '@trezor/components'; + +import { OnboardingOption } from 'src/components/onboarding/OnboardingOption'; import { Translation } from 'src/components/suite/Translation'; +import { useLayoutSize } from 'src/hooks/suite/useLayoutSize'; -interface SelectRecoveryTypeProps { +type SelectRecoveryTypeProps = { onSelect: (type: 'standard' | 'advanced') => void; -} +}; + +export const SelectRecoveryType = ({ onSelect }: SelectRecoveryTypeProps) => { + const { isBelowTablet } = useLayoutSize(); -export const SelectRecoveryType = ({ onSelect }: SelectRecoveryTypeProps) => ( - - onSelect('standard')} - icon="recoverySeedFilled" - heading={} - description={} - data-testid="@recovery/select-type/standard" - /> - - onSelect('advanced')} - icon="trezorModelOneFilled" - heading={} - description={} - data-testid="@recovery/select-type/advanced" - /> - -); + return ( + + onSelect('standard')} + icon="recoverySeedFilled" + heading={} + description={} + data-testid="@recovery/select-type/standard" + /> + onSelect('advanced')} + icon="trezorModelOneFilled" + heading={} + description={} + data-testid="@recovery/select-type/advanced" + /> + + ); +}; diff --git a/packages/suite/src/components/recovery/SelectWordCount.tsx b/packages/suite/src/components/recovery/SelectWordCount.tsx index 3064f2c7d369..03823d58ca1d 100644 --- a/packages/suite/src/components/recovery/SelectWordCount.tsx +++ b/packages/suite/src/components/recovery/SelectWordCount.tsx @@ -1,41 +1,46 @@ import styled from 'styled-components'; -import { OnboardingOption, OptionsDivider, OptionsWrapper } from 'src/components/onboarding'; +import { Grid } from '@trezor/components'; + +import { OnboardingOption } from 'src/components/onboarding/OnboardingOption'; import { Translation } from 'src/components/suite/Translation'; +import { useLayoutSize } from 'src/hooks/suite/useLayoutSize'; import { WordCount } from 'src/types/recovery'; const StyledOption = styled(OnboardingOption)` justify-content: center; `; -interface SelectWordCountProps { +type SelectWordCountProps = { onSelect: (number: WordCount) => void; -} +}; + +export const SelectWordCount = ({ onSelect }: SelectWordCountProps) => { + const { isBelowTablet } = useLayoutSize(); -export const SelectWordCount = ({ onSelect }: SelectWordCountProps) => ( - - { - onSelect(12); - }} - heading={} - data-testid="@recovery/select-count/12" - /> - - { - onSelect(18); - }} - heading={} - data-testid="@recovery/select-count/18" - /> - - { - onSelect(24); - }} - heading={} - data-testid="@recovery/select-count/24" - /> - -); + return ( + + { + onSelect(12); + }} + heading={} + data-testid="@recovery/select-count/12" + /> + { + onSelect(18); + }} + heading={} + data-testid="@recovery/select-count/18" + /> + { + onSelect(24); + }} + heading={} + data-testid="@recovery/select-count/24" + /> + + ); +}; diff --git a/packages/suite/src/components/suite/DeviceAuthenticationExplainer.tsx b/packages/suite/src/components/suite/DeviceAuthenticationExplainer.tsx deleted file mode 100644 index b5675469aaa5..000000000000 --- a/packages/suite/src/components/suite/DeviceAuthenticationExplainer.tsx +++ /dev/null @@ -1,57 +0,0 @@ -import styled, { css } from 'styled-components'; - -import { TranslationKey } from '@suite-common/intl-types'; -import { Icon, IconName, variables } from '@trezor/components'; - -import { Translation } from 'src/components/suite/Translation'; - -const Item = styled.div` - display: flex; - align-items: center; - gap: 24px; - text-align: left; -`; - -const Items = styled.div<{ $isHorizontal: DeviceAuthenticationExplainerProps['horizontal'] }>` - display: grid; - gap: 40px; - color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY}; - font-size: ${variables.FONT_SIZE.NORMAL}; - font-weight: ${variables.FONT_WEIGHT.MEDIUM}; - - ${({ $isHorizontal }) => - $isHorizontal && - css` - @media only screen and (min-width: ${variables.SCREEN_SIZE.SM}) { - grid-template-columns: repeat(3, 1fr); - - ${Item} { - flex-direction: column; - text-align: center; - } - } - `} -`; - -const items: Array<{ icon: IconName; text: TranslationKey }> = [ - { icon: 'shieldCheck', text: 'TR_DEVICE_AUTHENTICITY_ITEM_1' }, - { icon: 'cpu', text: 'TR_DEVICE_AUTHENTICITY_ITEM_2' }, - { icon: 'listChecks', text: 'TR_DEVICE_AUTHENTICITY_ITEM_3' }, -] as const; - -interface DeviceAuthenticationExplainerProps { - horizontal?: boolean; -} - -export const DeviceAuthenticationExplainer = ({ - horizontal, -}: DeviceAuthenticationExplainerProps) => ( - - {items.map(({ icon, text }) => ( - - - - - ))} - -); diff --git a/packages/suite/src/components/suite/SecurityCheck/DeviceCompromised.tsx b/packages/suite/src/components/suite/SecurityCheck/DeviceCompromised.tsx index d452d46629fa..ac6a81fdd0a6 100644 --- a/packages/suite/src/components/suite/SecurityCheck/DeviceCompromised.tsx +++ b/packages/suite/src/components/suite/SecurityCheck/DeviceCompromised.tsx @@ -97,7 +97,7 @@ const DeviceCompromisedContent = () => { export const DeviceCompromised = () => ( - + diff --git a/packages/suite/src/components/suite/index.tsx b/packages/suite/src/components/suite/index.tsx index d17d8cf2f7e0..45632e79c245 100644 --- a/packages/suite/src/components/suite/index.tsx +++ b/packages/suite/src/components/suite/index.tsx @@ -44,7 +44,6 @@ import { TorLoader } from './TorLoader/TorLoader'; import { CountdownTimer } from './CountdownTimer'; import { QrCode } from './QrCode'; import { CoinBalance } from './CoinBalance'; -import { DeviceAuthenticationExplainer } from './DeviceAuthenticationExplainer'; import { Preloader } from './Preloader/Preloader'; import { TrafficLightDraggableWindowHeader } from './TrafficLightOffset'; import { PinMatrix } from './PinMatrix/PinMatrix'; @@ -96,7 +95,6 @@ export { CountdownTimer, QrCode, CoinBalance, - DeviceAuthenticationExplainer, Preloader, TrafficLightDraggableWindowHeader, PinMatrix, diff --git a/packages/suite/src/components/suite/modals/LowBatteryModal.tsx b/packages/suite/src/components/suite/modals/LowBatteryModal.tsx index e9e5595d786f..88b07afb638f 100644 --- a/packages/suite/src/components/suite/modals/LowBatteryModal.tsx +++ b/packages/suite/src/components/suite/modals/LowBatteryModal.tsx @@ -1,4 +1,4 @@ -import { Button, Column, H3, Modal, Text } from '@trezor/components'; +import { Modal } from '@trezor/components'; import { useDevice } from 'src/hooks/suite'; @@ -9,40 +9,30 @@ type LowBatteryModalProps = { onClose: () => void; }; -type LowBatteryModalHeadingProps = { - batteryLevel: number; -}; - -const LowBatteryModalHeading = ({ batteryLevel }: LowBatteryModalHeadingProps) => ( - -

- -

- - - - -); - export const LowBatteryModal = ({ onClose, children }: LowBatteryModalProps) => { const { device } = useDevice(); + if (!device) return null; - const bateryLevel = typeof device?.features?.soc === 'number' ? device?.features.soc : 0; + const batteryLevel = typeof device?.features?.soc === 'number' ? device?.features.soc : 0; return ( } + heading={} + description={ + + } onCancel={onClose} + variant="destructive" bottomContent={ - + } > {children} diff --git a/packages/suite/src/views/onboarding/UnexpectedState/DeviceDifferent.tsx b/packages/suite/src/views/onboarding/UnexpectedState/DeviceDifferent.tsx index 1008be3d462b..61799d0ce663 100644 --- a/packages/suite/src/views/onboarding/UnexpectedState/DeviceDifferent.tsx +++ b/packages/suite/src/views/onboarding/UnexpectedState/DeviceDifferent.tsx @@ -1,6 +1,4 @@ -import { Button } from '@trezor/components'; - -import { OnboardingStepBox } from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { Translation } from 'src/components/suite/Translation'; import { useOnboarding } from 'src/hooks/suite'; @@ -8,8 +6,7 @@ export const DeviceDifferent = () => { const { resetOnboarding, enableOnboardingReducer } = useOnboarding(); return ( - } description={ <> @@ -19,7 +16,7 @@ export const DeviceDifferent = () => { } innerActions={ - + } /> ); diff --git a/packages/suite/src/views/onboarding/UnexpectedState/ShowPinMatrix.tsx b/packages/suite/src/views/onboarding/UnexpectedState/ShowPinMatrix.tsx index 731eaa879d2f..a1a6a51aaae1 100644 --- a/packages/suite/src/views/onboarding/UnexpectedState/ShowPinMatrix.tsx +++ b/packages/suite/src/views/onboarding/UnexpectedState/ShowPinMatrix.tsx @@ -1,11 +1,10 @@ import { useState } from 'react'; import { selectSelectedDevice } from '@suite-common/wallet-core'; -import { Button, Column } from '@trezor/components'; +import { Column } from '@trezor/components'; import TrezorConnect, { UI } from '@trezor/connect'; -import { spacings } from '@trezor/theme'; -import { OnboardingStepBox } from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { PinMatrix } from 'src/components/suite'; import { Translation } from 'src/components/suite/Translation'; import { useOnboarding, useSelector } from 'src/hooks/suite'; @@ -24,18 +23,24 @@ export const ShowPinMatrix = () => { // (which could happen on Final step where we set device name and homescreen) if (device?.features && activeStepId !== 'set-pin' && showPinMatrix) { return ( - } device={device} + isConfirmedOnDevice isActionAbortable={false} + innerActions={ + + + + } > - + - - + ); } }; diff --git a/packages/suite/src/views/onboarding/UnexpectedState/index.tsx b/packages/suite/src/views/onboarding/UnexpectedState/index.tsx index 86e5ea683b15..44d8dc7c97e5 100644 --- a/packages/suite/src/views/onboarding/UnexpectedState/index.tsx +++ b/packages/suite/src/views/onboarding/UnexpectedState/index.tsx @@ -9,9 +9,9 @@ import { DeviceDifferent } from './DeviceDifferent'; import { ShowPinMatrix } from './ShowPinMatrix'; import { DeviceDisconnectedStep } from '../steps/DeviceDisconnectedStep'; -interface UnexpectedStateProps { +type UnexpectedStateProps = { children: JSX.Element; -} +}; /** * This component handles unexpected device states across various steps in the onboarding. diff --git a/packages/suite/src/views/onboarding/index.tsx b/packages/suite/src/views/onboarding/index.tsx index be2df0f01fa5..0cb454c44269 100644 --- a/packages/suite/src/views/onboarding/index.tsx +++ b/packages/suite/src/views/onboarding/index.tsx @@ -5,7 +5,7 @@ import { selectSelectedDevice } from '@suite-common/wallet-core'; import { exhaustive } from '@trezor/type-utils'; import { goto } from 'src/actions/suite/routerActions'; -import { OnboardingLayout } from 'src/components/onboarding'; +import { OnboardingLayout } from 'src/components/onboarding/OnboardingLayout'; import * as STEP from 'src/constants/onboarding/steps'; import { useDispatch, useOnboarding, useSelector } from 'src/hooks/suite'; import { UnexpectedState } from 'src/views/onboarding/UnexpectedState'; diff --git a/packages/suite/src/views/onboarding/steps/Backup.tsx b/packages/suite/src/views/onboarding/steps/Backup.tsx index 695a075a9353..b3a21c6acea4 100644 --- a/packages/suite/src/views/onboarding/steps/Backup.tsx +++ b/packages/suite/src/views/onboarding/steps/Backup.tsx @@ -1,22 +1,15 @@ import { useState } from 'react'; -import styled from 'styled-components'; - import { selectSelectedDevice } from '@suite-common/wallet-core'; -import { Image } from '@trezor/components'; +import { exhaustive } from '@trezor/type-utils'; import { backupDevice } from 'src/actions/backup/backupActions'; import { goToNextStep, updateAnalytics } from 'src/actions/onboarding/onboardingActions'; import * as onboardingActions from 'src/actions/onboarding/onboardingActions'; import { goto } from 'src/actions/suite/routerActions'; import { BackupSeedCards } from 'src/components/backup'; -import { - OnboardingButtonCta, - OnboardingButtonSkip, - OnboardingStepBox, - OptionsWrapper, - SkipStepConfirmation, -} from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; +import { SkipStepConfirmation } from 'src/components/onboarding/SkipStepConfirmation'; import { Translation } from 'src/components/suite/Translation'; import { SettingsAnchor } from 'src/constants/suite/anchors'; import { useDispatch, useSelector } from 'src/hooks/suite'; @@ -24,11 +17,6 @@ import { selectBackup, selectBackupStatus } from 'src/reducers/backup/backupRedu import { selectIsActionAbortable, selectIsDeviceLocked } from 'src/selectors/suite/suiteSelectors'; import { canContinue } from 'src/utils/backup'; -// eslint-disable-next-line local-rules/no-override-ds-component -const StyledImage = styled(Image)` - flex: 1; -`; - export const BackupStep = () => { const [showSkipConfirmation, setShowSkipConfirmation] = useState(false); const backup = useSelector(selectBackup); @@ -64,83 +52,89 @@ export const BackupStep = () => { dispatch(goto('settings-device', { anchor: SettingsAnchor.WipeDevice })); }; + const getContent = () => { + switch (backupStatus) { + case 'initial': + return ( + } + description={} + innerActions={ + + + + } + outerActions={ + + + + } + > + + + ); + case 'in-progress': + return ( + } + description={} + device={device} + isConfirmedOnDevice + isActionAbortable={isActionAbortable} + /> + ); + case 'finished': + return ( + } + description={} + innerActions={ + dispatch(goToNextStep())} + isDisabled={!canContinue(backup.userConfirmed)} + > + + + } + /> + ); + case 'error': + return ( + } + description={ + + } + innerActions={ + + + + } + /> + ); + default: + return exhaustive(backupStatus); + } + }; + return ( <> {showSkipConfirmation && ( setShowSkipConfirmation(false)} /> )} - {backupStatus === 'initial' && ( - } - description={} - innerActions={ - - - - } - outerActions={ - - - - } - > - - - - - )} - {backupStatus === 'in-progress' && ( - } - description={} - device={device} - isActionAbortable={isActionAbortable} - /> - )} - - {backupStatus === 'finished' && ( - } - description={} - innerActions={ - dispatch(goToNextStep())} - isDisabled={!canContinue(backup.userConfirmed)} - > - - - } - /> - )} - {backupStatus === 'error' && ( - } - description={ - - } - innerActions={ - - - - } - > - - - - - )} + {getContent()} ); }; diff --git a/packages/suite/src/views/onboarding/steps/BasicSettings/AdvancedSetup.tsx b/packages/suite/src/views/onboarding/steps/BasicSettings/AdvancedSetup.tsx deleted file mode 100644 index 210326ed7a67..000000000000 --- a/packages/suite/src/views/onboarding/steps/BasicSettings/AdvancedSetup.tsx +++ /dev/null @@ -1,99 +0,0 @@ -import { ReactNode, useState } from 'react'; - -import styled, { useTheme } from 'styled-components'; - -import { Icon } from '@trezor/components'; -import { isDesktop, isWeb } from '@trezor/env-utils'; - -import { CollapsibleOnboardingCard } from 'src/components/onboarding/CollapsibleOnboardingCard'; -import { Translation } from 'src/components/suite/Translation'; -import { useSelector } from 'src/hooks/suite'; -import { getIsTorEnabled } from 'src/utils/suite/tor'; - -import { TorSection } from './TorSection'; - -const AdvancedSetupWrapper = styled.div` - width: 100%; - text-align: center; -`; - -const Boxes = styled.div` - width: 100%; - display: flex; - flex-direction: column; - text-align: left; - margin-bottom: 36px; - - > * + * { - margin-top: 24px; - } -`; - -const Buttons = styled.div` - display: flex; - justify-content: center; - padding-bottom: 36px; -`; - -const IconWrapper = styled.div` - margin: 0 28px 0 0; -`; - -interface AdvancedSetupProps { - children: ReactNode; -} - -export const AdvancedSetup = ({ children }: AdvancedSetupProps) => { - const torStatus = useSelector(state => state.suite.torStatus); - const [torOpen, setTorOpen] = useState(false); - - const theme = useTheme(); - - const toggleTor = () => setTorOpen(!torOpen); - - const isTorEnabled = getIsTorEnabled(torStatus); - - return ( - - - {(isDesktop() || (isWeb() && isTorEnabled)) && ( - } - description={ - , - }} - /> - } - expandable - expanded={torOpen} - tag={} - expandableIcon={ - - {isTorEnabled ? ( - - ) : ( - - )} - - } - onToggle={toggleTor} - > - - - )} - - {children} - - ); -}; diff --git a/packages/suite/src/views/onboarding/steps/BasicSettings/BasicSettingsStepBox.tsx b/packages/suite/src/views/onboarding/steps/BasicSettings/BasicSettingsStepBox.tsx index 997f20dc7cc3..7ba959604afc 100644 --- a/packages/suite/src/views/onboarding/steps/BasicSettings/BasicSettingsStepBox.tsx +++ b/packages/suite/src/views/onboarding/steps/BasicSettings/BasicSettingsStepBox.tsx @@ -1,31 +1,28 @@ import { useEffect } from 'react'; -import styled from 'styled-components'; - import { changeCoinVisibility, selectEnabledNetworks } from '@suite-common/wallet-core'; -import { CollapsibleBox } from '@trezor/components'; -import { spacings } from '@trezor/theme'; +import { Badge, CollapsibleBox, Column, Row, Tooltip } from '@trezor/components'; +import { isDesktop, isWeb } from '@trezor/env-utils'; -import { OnboardingStepBox, OnboardingStepBoxProps } from 'src/components/onboarding'; -import { CoinGroup, TooltipSymbol } from 'src/components/suite'; +import { + OnboardingCard, + type OnboardingCardProps, +} from 'src/components/onboarding/OnboardingCard/OnboardingCard'; +import { CoinGroup } from 'src/components/suite'; import { Translation } from 'src/components/suite/Translation'; import { useNetworkSupport } from 'src/hooks/settings/useNetworkSupport'; import { useDispatch, useSelector } from 'src/hooks/suite'; +import { getIsTorEnabled } from 'src/utils/suite/tor'; -const Separator = styled.hr` - height: 1px; - width: 100%; - background: none; - border: 0; - border-top: 1px solid ${({ theme }) => theme.legacy.STROKE_GREY}; - margin-bottom: 30px; -`; +import { TorSection } from './TorSection'; -export const BasicSettingsStepBox = (props: OnboardingStepBoxProps) => { +export const BasicSettingsStepBox = (props: OnboardingCardProps) => { const { showUnsupportedCoins, supportedMainnets, unsupportedMainnets, supportedTestnets } = useNetworkSupport(); const enabledNetworks = useSelector(selectEnabledNetworks); + const torStatus = useSelector(state => state.suite.torStatus); const dispatch = useDispatch(); + const isTorEnabled = getIsTorEnabled(torStatus); // BTC should be enabled by default useEffect(() => { @@ -33,39 +30,53 @@ export const BasicSettingsStepBox = (props: OnboardingStepBoxProps) => { }, [dispatch]); return ( - - - - - - } - /> - - } - paddingType="large" - > - - - {showUnsupportedCoins && ( + + + - - } - /> - + } + hasIcon + > + + } - paddingType="large" > - + - )} - + {showUnsupportedCoins && ( + } + hasIcon + > + + + } + > + + + )} + {(isDesktop() || (isWeb() && isTorEnabled)) && ( + + + + + + + } + > + + + )} + + ); }; diff --git a/packages/suite/src/views/onboarding/steps/BasicSettings/TorSection.tsx b/packages/suite/src/views/onboarding/steps/BasicSettings/TorSection.tsx index 560d64054978..d3b29237afe9 100644 --- a/packages/suite/src/views/onboarding/steps/BasicSettings/TorSection.tsx +++ b/packages/suite/src/views/onboarding/steps/BasicSettings/TorSection.tsx @@ -1,6 +1,4 @@ -import styled from 'styled-components'; - -import { Switch, variables } from '@trezor/components'; +import { Paragraph, Row, Switch } from '@trezor/components'; import { toggleTor } from 'src/actions/suite/suiteActions'; import { Translation } from 'src/components/suite/Translation'; @@ -9,30 +7,9 @@ import { selectModalType } from 'src/reducers/suite/modalReducer'; import { TorStatus } from 'src/types/suite'; import { getIsTorEnabled, getIsTorLoading } from 'src/utils/suite/tor'; -const TorWrapper = styled.div` - width: 100%; - display: flex; - justify-content: space-between; - align-items: center; - padding-top: 16px; - margin-bottom: 12px; - border-top: 1px solid ${({ theme }) => theme.legacy.STROKE_GREY}; -`; - -const Label = styled.div` - font-weight: ${variables.FONT_WEIGHT.DEMI_BOLD}; - font-weight: 500; -`; - -const SwitchWrapper = styled.div` - display: flex; - align-items: center; - justify-content: flex-end; -`; - -interface TorSectionProps { +type TorSectionProps = { torStatus: TorStatus; -} +}; export const TorSection = ({ torStatus }: TorSectionProps) => { const modalType = useSelector(selectModalType); @@ -45,18 +22,16 @@ export const TorSection = ({ torStatus }: TorSectionProps) => { const handleChange = () => dispatch(toggleTor(!isTorEnabled, modalType)); return ( - - - - - - + + + + + + ); }; diff --git a/packages/suite/src/views/onboarding/steps/BasicSettings/index.tsx b/packages/suite/src/views/onboarding/steps/BasicSettings/index.tsx index 369e143429d1..fd367c72f8f6 100644 --- a/packages/suite/src/views/onboarding/steps/BasicSettings/index.tsx +++ b/packages/suite/src/views/onboarding/steps/BasicSettings/index.tsx @@ -1,17 +1,15 @@ import { selectEnabledNetworks } from '@suite-common/wallet-core'; -import { OnboardingButtonCta } from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { Translation } from 'src/components/suite/Translation'; import { useOnboarding, useSelector } from 'src/hooks/suite'; import { getIsTorLoading } from 'src/utils/suite/tor'; -import { AdvancedSetup } from './AdvancedSetup'; import { BasicSettingsStepBox } from './BasicSettingsStepBox'; const BasicSettings = () => { const enabledNetworks = useSelector(selectEnabledNetworks); const torStatus = useSelector(state => state.suite.torStatus); - const { goToNextStep } = useOnboarding(); const noNetworkEnabled = !enabledNetworks.length; @@ -21,19 +19,17 @@ const BasicSettings = () => { } description={} - outerActions={ - - { - goToNextStep(); - }} - isLoading={isTorLoading} - isDisabled={noNetworkEnabled} - > - - - + innerActions={ + { + goToNextStep(); + }} + isLoading={isTorLoading} + isDisabled={noNetworkEnabled} + > + + } /> ); diff --git a/packages/suite/src/views/onboarding/steps/CreateOrRecover.tsx b/packages/suite/src/views/onboarding/steps/CreateOrRecover.tsx index c769f7653539..b09de26b1772 100644 --- a/packages/suite/src/views/onboarding/steps/CreateOrRecover.tsx +++ b/packages/suite/src/views/onboarding/steps/CreateOrRecover.tsx @@ -1,22 +1,21 @@ -import { - OnboardingOption, - OnboardingStepBox, - OptionsDivider, - OptionsWrapper, -} from 'src/components/onboarding'; +import { Flex } from '@trezor/components'; + +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; +import { OnboardingOption } from 'src/components/onboarding/OnboardingOption'; import { Translation } from 'src/components/suite/Translation'; import * as STEP from 'src/constants/onboarding/steps'; -import { useOnboarding } from 'src/hooks/suite'; +import { useLayoutSize, useOnboarding } from 'src/hooks/suite'; const CreateOrRecoverStep = () => { const { goToNextStep, addPath, updateAnalytics } = useOnboarding(); + const { isBelowTablet } = useLayoutSize(); return ( - } > - + { }} heading={} /> - { addPath(STEP.PATH_RECOVERY); @@ -38,8 +36,8 @@ const CreateOrRecoverStep = () => { }} heading={} /> - - + + ); }; diff --git a/packages/suite/src/views/onboarding/steps/DeviceDisconnectedStep.tsx b/packages/suite/src/views/onboarding/steps/DeviceDisconnectedStep.tsx index ea3b4e8606f4..edd567e13a10 100644 --- a/packages/suite/src/views/onboarding/steps/DeviceDisconnectedStep.tsx +++ b/packages/suite/src/views/onboarding/steps/DeviceDisconnectedStep.tsx @@ -1,11 +1,11 @@ -import { OnboardingStepBox } from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { PrerequisitesGuide } from 'src/components/suite/PrerequisitesGuide/PrerequisitesGuide'; export const DeviceDisconnectedStep = () => ( - + - + ); diff --git a/packages/suite/src/views/onboarding/steps/DeviceTutorial.tsx b/packages/suite/src/views/onboarding/steps/DeviceTutorial.tsx index b0fc8af3e385..3c189f15c130 100644 --- a/packages/suite/src/views/onboarding/steps/DeviceTutorial.tsx +++ b/packages/suite/src/views/onboarding/steps/DeviceTutorial.tsx @@ -1,13 +1,14 @@ import { useEffect } from 'react'; import { useIntl } from 'react-intl'; +import { DEFAULT_FLAGSHIP_MODEL } from '@suite-common/suite-constants'; import { selectSelectedDevice } from '@suite-common/wallet-core'; -import { Button, Column } from '@trezor/components'; +import { IconName } from '@trezor/components'; import TrezorConnect from '@trezor/connect'; +import { mapTrezorModelToIcon } from '@trezor/product-components'; import { beginOnboardingTutorial } from 'src/actions/onboarding/onboardingActions'; -import { OnboardingStepBox } from 'src/components/onboarding'; -import { DeviceConfirmImage } from 'src/components/suite'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { Translation } from 'src/components/suite/Translation'; import { useDispatch, useSelector } from 'src/hooks/suite'; import { selectIsActionAbortable } from 'src/selectors/suite/suiteSelectors'; @@ -26,28 +27,26 @@ export const DeviceTutorial = () => { const handleSkipClick = () => TrezorConnect.cancel(intl.formatMessage(messages.TR_CANCELLED)); return ( - - - - - } + } description={} device={device} + iconName={ + `${mapTrezorModelToIcon[device?.features?.internal_model || DEFAULT_FLAGSHIP_MODEL]}Filled` as IconName + } innerActions={ isActionAbortable && ( - + ) } - devicePromptTitle={} + devicePrompt={} + isConfirmedOnDevice /> ); }; diff --git a/packages/suite/src/views/onboarding/steps/Final.tsx b/packages/suite/src/views/onboarding/steps/Final.tsx index cb6f8d46e573..d18e96657a9f 100644 --- a/packages/suite/src/views/onboarding/steps/Final.tsx +++ b/packages/suite/src/views/onboarding/steps/Final.tsx @@ -1,103 +1,40 @@ import { useEffect, useRef, useState } from 'react'; import { FormProvider } from 'react-hook-form'; -import useMeasure from 'react-use/lib/useMeasure'; -import styled, { css } from 'styled-components'; - import { startDiscoveryThunk } from '@suite-common/wallet-core'; -import { Button, Menu, Popover, PopoverRef, Tooltip, variables } from '@trezor/components'; +import { + Box, + Button, + Column, + Divider, + Flex, + H2, + Menu, + Popover, + PopoverRef, + Row, + Tooltip, +} from '@trezor/components'; import { hasBitcoinOnlyFirmware } from '@trezor/device-utils'; import { DeviceAnimation } from '@trezor/product-components'; import { EventType, analytics } from '@trezor/suite-analytics'; -import { spacingsPx, typography } from '@trezor/theme'; -import { OnboardingStepBox } from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { HomescreenGallery } from 'src/components/suite'; import { ChangeDeviceLabelForm } from 'src/components/suite/ChangeDeviceLabelForm'; import { Translation } from 'src/components/suite/Translation'; import { getHomescreens } from 'src/constants/suite/homescreens'; import { useDevice, useDispatch, useOnboarding, useSelector } from 'src/hooks/suite'; import { useChangeDeviceLabel } from 'src/hooks/suite/useChangeDeviceLabel'; +import { useLayoutSize } from 'src/hooks/suite/useLayoutSize'; import { selectIsActionAbortable } from 'src/selectors/suite/suiteSelectors'; import { isHomescreenSupportedOnDevice } from 'src/utils/suite/homescreen'; -const Content = styled.div` - flex-direction: column; - flex: 1; - display: flex; -`; - -const DeviceImageWrapper = styled.div` - display: flex; - justify-content: center; - align-items: center; - width: 400px; - height: 400px; - margin: 0 ${spacingsPx.lg} 0 -60px; - - @media (max-width: ${variables.SCREEN_SIZE.SM}) { - margin: 0; - width: 200px; - height: 320px; - } -`; - -const Heading = styled.div` - ${typography.titleLarge} - margin-bottom: ${spacingsPx.xxl}; - - @media screen and (max-width: ${variables.SCREEN_SIZE.MD}) { - ${typography.titleMedium} - } -`; - -const SetupActions = styled.div` - display: flex; - align-items: flex-start; - margin-bottom: ${spacingsPx.xxl}; - padding-bottom: ${spacingsPx.xxl}; - border-bottom: 1px solid ${({ theme }) => theme.legacy.STROKE_GREY}; - width: fit-content; - gap: ${spacingsPx.md}; - flex-flow: row wrap; -`; - -// eslint-disable-next-line local-rules/no-override-ds-component -const EnterSuiteButton = styled(Button)` - height: 64px; - min-width: 280px; - align-self: flex-start; - justify-content: space-between; - padding-left: ${spacingsPx.xl}; - padding-right: ${spacingsPx.xl}; -`; - -const Wrapper = styled.div<{ $shouldWrap?: boolean }>` - display: flex; - width: 100%; - align-items: center; - - ${({ $shouldWrap }) => - $shouldWrap && - css` - padding: 0; - margin: 0; - flex-direction: column; - - ${DeviceImageWrapper} { - margin: 0 0 ${spacingsPx.lg}; - } - - ${Heading} { - text-align: center; - } - `} -`; - export const FinalStep = () => { const { goToSuite } = useOnboarding(); const popoverRef = useRef(undefined); const dispatch = useDispatch(); + const { isBelowTablet } = useLayoutSize(); const { isLocked, device } = useDevice(); const isDeviceLocked = isLocked(); @@ -112,8 +49,6 @@ export const FinalStep = () => { const { form, handleSubmit } = useChangeDeviceLabel(); - const [wrapperRef, { width }] = useMeasure(); - useEffect(() => { const handleKeyDown = (event: KeyboardEvent) => { if (event.key === 'Escape') { @@ -162,26 +97,28 @@ export const FinalStep = () => { const hasGallery = getHomescreens(isBitcoinOnlyFirmware)[deviceModelInternal].length > 0; return ( - - - + + - - - + + +

- +

{!state && ( - + + + + ); }; diff --git a/packages/suite/src/views/onboarding/steps/FirmwareInstallation.tsx b/packages/suite/src/views/onboarding/steps/FirmwareInstallation.tsx index 3a05540b3420..49e4fe8260e6 100644 --- a/packages/suite/src/views/onboarding/steps/FirmwareInstallation.tsx +++ b/packages/suite/src/views/onboarding/steps/FirmwareInstallation.tsx @@ -1,7 +1,4 @@ -import styled from 'styled-components'; - -import { Button, Column } from '@trezor/components'; -import { spacingsPx } from '@trezor/theme'; +import { Column, Paragraph } from '@trezor/components'; import { FirmwareOffer, @@ -9,7 +6,7 @@ import { ReconnectDevicePrompt, RotatingPhrases, } from 'src/components/firmware'; -import { OnboardingStepBox } from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { WebUsbButton } from 'src/components/suite'; import { Translation } from 'src/components/suite/Translation'; import { useFirmwareDesktopUpdate } from 'src/hooks/suite/useFirmwareDesktopUpdate'; @@ -19,20 +16,12 @@ import { selectIsActionAbortable, } from 'src/selectors/suite/suiteSelectors'; -const SelectDevice = styled.div` - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - gap: ${spacingsPx.lg}; - color: ${({ theme }) => theme.legacy.TYPE_LIGHT_GREY}; -`; - -interface FirmwareInstallationProps { +type FirmwareInstallationProps = { install: () => void; onSuccess: () => void; -} +}; +// TODO: consolidate with FirmwareInstallationStandalone export const FirmwareInstallation = ({ install, onSuccess }: FirmwareInstallationProps) => { const { status, showReconnectPrompt, targetType, reconnectEvent } = useFirmwareDesktopUpdate(); const isActionAbortable = useSelector(selectIsActionAbortable); @@ -51,21 +40,19 @@ export const FirmwareInstallation = ({ install, onSuccess }: FirmwareInstallatio // a reboot in case of fresh device which is, from the start, in bootloader mode (thus first time paired as a bootloader device). // Suite won't detect such a restarted device, which will be now in normal mode, till it is paired again. return ( - - + + + + - + ); } if (status === 'done') { return ( - + ); } }; @@ -73,19 +60,18 @@ export const FirmwareInstallation = ({ install, onSuccess }: FirmwareInstallatio return ( <> {showReconnectPrompt && } - } - device={undefined} isActionAbortable={isActionAbortable} innerActions={getInnerActionComponent()} > - + - + ); }; diff --git a/packages/suite/src/views/onboarding/steps/FirmwareStep.tsx b/packages/suite/src/views/onboarding/steps/FirmwareStep.tsx index c1c2bcac666e..61270da75e89 100644 --- a/packages/suite/src/views/onboarding/steps/FirmwareStep.tsx +++ b/packages/suite/src/views/onboarding/steps/FirmwareStep.tsx @@ -9,12 +9,10 @@ import { exhaustive } from '@trezor/type-utils'; import { MODAL } from 'src/actions/suite/constants'; import { Fingerprint, - FirmwareContinueButton, FirmwareInitial, FirmwareInstallationProgressCheck, - FirmwareRetryButton, } from 'src/components/firmware'; -import { OnboardingButtonBack, OnboardingStepBox } from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { Translation } from 'src/components/suite/Translation'; import { useFirmwareInstallationProgressCheck, useOnboarding, useSelector } from 'src/hooks/suite'; import { useFirmwareDesktopUpdate } from 'src/hooks/suite/useFirmwareDesktopUpdate'; @@ -63,26 +61,35 @@ export const FirmwareStep = () => { if (showFingerprintCheck && device) { // Some old firmwares ask for verifying firmware fingerprint by dispatching ButtonRequest_FirmwareCheck return ( - } device={device} isActionAbortable={false} + isConfirmedOnDevice > - + ); } // edge case 1 - Installation failed if (status === 'error') { return ( - } description={} - innerActions={} - outerActions={ resetReducer()} />} + innerActions={ + + + + } + outerActions={ + resetReducer()}> + + + } /> ); } @@ -98,8 +105,8 @@ export const FirmwareStep = () => { const firmwareType = getSuiteFirmwareTypeString(device.firmwareType); return ( - } description={ { /> } innerActions={ - { goToNextStep(); updateAnalytics({ firmware: 'up-to-date' }); }} - /> + > + + } /> ); @@ -172,7 +182,7 @@ export const FirmwareStep = () => { case 'done': // This is shown only for NON-THP devices, THP device goes directly to the next step after successful THP pairing if (isProgressCheckDisplayed) { return ( - + diff --git a/packages/suite/src/views/onboarding/steps/Pin.tsx b/packages/suite/src/views/onboarding/steps/Pin.tsx index f5c0d5e533d3..b26caca160fb 100644 --- a/packages/suite/src/views/onboarding/steps/Pin.tsx +++ b/packages/suite/src/views/onboarding/steps/Pin.tsx @@ -6,12 +6,8 @@ import TrezorConnect, { UI } from '@trezor/connect'; import { spacings } from '@trezor/theme'; import { changePin } from 'src/actions/settings/deviceSettingsActions'; -import { - OnboardingButtonCta, - OnboardingButtonSkip, - OnboardingStepBox, - SkipStepConfirmation, -} from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; +import { SkipStepConfirmation } from 'src/components/onboarding/SkipStepConfirmation'; import { PinMatrix } from 'src/components/suite'; import { Translation } from 'src/components/suite/Translation'; import { useDispatch, useOnboarding, useSelector } from 'src/hooks/suite'; @@ -95,17 +91,17 @@ const SetPinStep = () => { // User entered 2 different PINs, show error and offer to try again // Used only on T1B1, T2T1 shows pins mismatch error on its display return ( - } data-testid="@pin-mismatch" innerActions={ - - + } /> ); @@ -121,8 +117,8 @@ const SetPinStep = () => { {showSkipConfirmation && ( setShowSkipConfirmation(false)} /> )} - {status === 'initial' && } @@ -133,28 +129,29 @@ const SetPinStep = () => { description={} innerActions={ // "Create a pin" button to start the process, continue button after the pin is set (as outerAction), no primary CTA during the setup procedure on T2T1 - !showConfirmationPrompt ? ( - - - ) : undefined + + ) } outerActions={ // show skip button only if we are not done yet with setting up the pin (state is other than success state) // and if confirmation prompt is not active (I guess there is no point showing back btn which can't be clicked because it is under the modal) - !showConfirmationPrompt ? ( - - - ) : undefined + + ) } - device={showConfirmationPrompt ? device : undefined} + device={device} + isConfirmedOnDevice={!!showConfirmationPrompt} isActionAbortable={status === 'initial' ? isActionAbortable : true} > {/* // device requested showing a pin matrix, show the matrix also on "repeat-pin" status until we get fail or success response from the device */} @@ -166,7 +163,7 @@ const SetPinStep = () => { )} - + ); }; diff --git a/packages/suite/src/views/onboarding/steps/Recovery/RecoveryStepBox.tsx b/packages/suite/src/views/onboarding/steps/Recovery/RecoveryStepBox.tsx index 594289d92073..db5f2766b75e 100644 --- a/packages/suite/src/views/onboarding/steps/Recovery/RecoveryStepBox.tsx +++ b/packages/suite/src/views/onboarding/steps/Recovery/RecoveryStepBox.tsx @@ -3,13 +3,13 @@ import { DeviceModelInternal } from '@trezor/device-utils'; import { goToPreviousStep } from 'src/actions/onboarding/onboardingActions'; import { setStatus } from 'src/actions/recovery/recoveryActions'; import { - OnboardingButtonBack, - OnboardingStepBox, - OnboardingStepBoxProps, -} from 'src/components/onboarding'; + OnboardingCard, + type OnboardingCardProps, +} from 'src/components/onboarding/OnboardingCard/OnboardingCard'; +import { Translation } from 'src/components/suite/Translation'; import { useDevice, useDispatch, useSelector } from 'src/hooks/suite'; -const RecoveryStepBox = (props: OnboardingStepBoxProps) => { +const RecoveryStepBox = (props: OnboardingCardProps) => { const recovery = useSelector(state => state.recovery); const dispatch = useDispatch(); @@ -49,14 +49,16 @@ const RecoveryStepBox = (props: OnboardingStepBoxProps) => { }; return ( - handleBack()} data-testid="@onboarding/recovery/back-button" - /> + > + + ) : undefined } {...props} diff --git a/packages/suite/src/views/onboarding/steps/Recovery/index.tsx b/packages/suite/src/views/onboarding/steps/Recovery/index.tsx index 4cdae65e45bb..19dfde451fb9 100644 --- a/packages/suite/src/views/onboarding/steps/Recovery/index.tsx +++ b/packages/suite/src/views/onboarding/steps/Recovery/index.tsx @@ -1,11 +1,9 @@ -import styled from 'styled-components'; - import { isDeviceWithButtons } from '@suite-common/suite-utils'; import { selectSelectedDevice } from '@suite-common/wallet-core'; import { DeviceModelInternal } from '@trezor/device-utils'; import { goToNextStep, updateAnalytics } from 'src/actions/onboarding/onboardingActions'; -import { OnboardingButtonCta } from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { SelectRecoveryType, SelectRecoveryWord, SelectWordCount } from 'src/components/recovery'; import { Translation } from 'src/components/suite/Translation'; import { useDispatch, useRecovery, useSelector } from 'src/hooks/suite'; @@ -14,13 +12,6 @@ import { pickByDeviceModel } from 'src/utils/device/modelUtils'; import RecoveryStepBox from './RecoveryStepBox'; -const InProgressRecoveryStepBox = styled(RecoveryStepBox)<{ - $deviceModelInternal: DeviceModelInternal; -}>` - ${({ $deviceModelInternal }) => - $deviceModelInternal === DeviceModelInternal.T1B1 ? 'min-height: 475px' : ''}; -`; - export const RecoveryStep = () => { const isActionAbortable = useSelector(selectIsActionAbortable); const device = useSelector(selectSelectedDevice); @@ -75,12 +66,12 @@ export const RecoveryStep = () => { /> } innerActions={ - - + } /> ); @@ -117,6 +108,7 @@ export const RecoveryStep = () => { })} device={device} isActionAbortable={isActionAbortable} + isConfirmedOnDevice /> ); } @@ -138,9 +130,8 @@ export const RecoveryStep = () => { }; return ( - } - $deviceModelInternal={deviceModelInternal} device={device} description={pickByDeviceModel(deviceModelInternal, { default: , @@ -149,9 +140,10 @@ export const RecoveryStep = () => { [DeviceModelInternal.T3B1]: , })} isActionAbortable + isConfirmedOnDevice > - - + {deviceModelInternal === DeviceModelInternal.T1B1 && } + ); } @@ -163,12 +155,12 @@ export const RecoveryStep = () => { } innerActions={ - - + } /> ); @@ -180,7 +172,7 @@ export const RecoveryStep = () => { heading={} description={} innerActions={ - { } > - + } /> ); diff --git a/packages/suite/src/views/onboarding/steps/ResetDevice.tsx b/packages/suite/src/views/onboarding/steps/ResetDevice.tsx index b4ffdbf7a98f..25cda5a42e37 100644 --- a/packages/suite/src/views/onboarding/steps/ResetDevice.tsx +++ b/packages/suite/src/views/onboarding/steps/ResetDevice.tsx @@ -1,14 +1,12 @@ import { useCallback, useEffect, useState } from 'react'; -import styled from 'styled-components'; - import { BackupType } from '@suite-common/suite-types'; import { selectDeviceDefaultBackupType, selectSelectedDevice } from '@suite-common/wallet-core'; -import { Button, Divider, Text, Tooltip } from '@trezor/components'; +import { Text } from '@trezor/components'; import { DeviceModelInternal } from '@trezor/device-utils'; import { resetDevice } from 'src/actions/settings/deviceSettingsActions'; -import { OnboardingButtonBack, OnboardingStepBox, OptionsWrapper } from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { Translation } from 'src/components/suite/Translation'; import * as STEP from 'src/constants/onboarding/steps'; import { useDevice, useDispatch, useOnboarding, useSelector } from 'src/hooks/suite'; @@ -16,18 +14,6 @@ import { selectIsActionAbortable } from 'src/selectors/suite/suiteSelectors'; import { SelectBackupType, isShamirBackupType } from './SelectBackupType/SelectBackupType'; -const SelectWrapper = styled.div` - width: 100%; - display: flex; - flex-direction: column; -`; - -const ButtonWrapper = styled.div` - display: flex; - flex-direction: row; - justify-content: center; -`; - const canChooseBackupType = (device: DeviceModelInternal) => device !== DeviceModelInternal.T1B1; export const ResetDeviceStep = () => { @@ -121,8 +107,8 @@ export const ResetDeviceStep = () => { }; return ( - } description={ canChoseBackupType ? ( @@ -137,59 +123,38 @@ export const ResetDeviceStep = () => { ) } - device={isWaitingForConfirmation ? device : undefined} + device={device} isActionAbortable={isActionAbortable} + isConfirmedOnDevice={isWaitingForConfirmation} + innerActions={ + !isWaitingOnDevice && ( + handleSubmit(backupType)} + data-testid="@onboarding/select-seed-type-confirm" + > + + + ) + } outerActions={ - isWaitingOnDevice && ( + !isWaitingOnDevice && ( // There is no point to show back button if user can't click it because confirmOnDevice bubble is active - goToPreviousStep()} /> + goToPreviousStep()}> + + ) } > - {!isWaitingOnDevice ? ( - - - {canChoseBackupType && ( - <> - - } - > - - updateAnalytics({ wasSelectTypeOpened: true }) - } - onSelect={setBackupType} - isDisabled={isDeviceLocked} - data-testid="@onboarding/select-seed-type-open-dialog" - /> - - - - )} - - - } - > - - - - - - ) : undefined} - + {!isWaitingOnDevice && canChoseBackupType && ( + updateAnalytics({ wasSelectTypeOpened: true })} + onSelect={setBackupType} + isDisabled={isDeviceLocked} + data-testid="@onboarding/select-seed-type-open-dialog" + /> + )} + ); }; diff --git a/packages/suite/src/views/onboarding/steps/Security.tsx b/packages/suite/src/views/onboarding/steps/Security.tsx index 2666eee1e00b..8a8451421758 100644 --- a/packages/suite/src/views/onboarding/steps/Security.tsx +++ b/packages/suite/src/views/onboarding/steps/Security.tsx @@ -1,11 +1,7 @@ import { useState } from 'react'; -import { - OnboardingButtonCta, - OnboardingButtonSkip, - OnboardingStepBox, - SkipStepConfirmation, -} from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; +import { SkipStepConfirmation } from 'src/components/onboarding/SkipStepConfirmation'; import { Translation } from 'src/components/suite/Translation'; import { useOnboarding } from 'src/hooks/suite'; @@ -18,22 +14,22 @@ const SecurityStep = () => { {showSkipConfirmation && ( setShowSkipConfirmation(false)} /> )} - } description={} innerActions={ - { goToNextStep(); }} > - + } outerActions={ - { setShowSkipConfirmation(true); @@ -41,7 +37,7 @@ const SecurityStep = () => { }} > - + } /> diff --git a/packages/suite/src/views/onboarding/steps/SecurityCheck/DeviceAuthenticity.tsx b/packages/suite/src/views/onboarding/steps/SecurityCheck/DeviceAuthenticity.tsx index 0096a8505b2f..55bdf777453d 100644 --- a/packages/suite/src/views/onboarding/steps/SecurityCheck/DeviceAuthenticity.tsx +++ b/packages/suite/src/views/onboarding/steps/SecurityCheck/DeviceAuthenticity.tsx @@ -1,30 +1,21 @@ import { useState } from 'react'; -import styled from 'styled-components'; - import { checkDeviceAuthenticityThunk } from '@suite-common/device-authenticity'; import { selectSelectedDevice, selectSelectedDeviceAuthenticity } from '@suite-common/wallet-core'; -import { variables } from '@trezor/components'; -import { spacingsPx } from '@trezor/theme'; +import { Card, Column, Grid, Icon, IconName, Paragraph } from '@trezor/components'; -import { OnboardingButtonCta, OnboardingStepBox } from 'src/components/onboarding'; -import { CollapsibleOnboardingCard } from 'src/components/onboarding/CollapsibleOnboardingCard'; -import { DeviceAuthenticationExplainer } from 'src/components/suite'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { SecurityCheckFail } from 'src/components/suite/SecurityCheck/SecurityCheckFail'; import { AuthenticateDeviceSupportButton } from 'src/components/suite/SecurityCheck/deviceCompromisedCtas'; -import { Translation } from 'src/components/suite/Translation'; -import { useDispatch, useSelector } from 'src/hooks/suite'; +import { Translation, TranslationKey } from 'src/components/suite/Translation'; +import { useDispatch, useLayoutSize, useSelector } from 'src/hooks/suite'; import { selectIsDebugModeActive } from 'src/selectors/suite/suiteSelectors'; -const StyledCard = styled(CollapsibleOnboardingCard)` - padding: ${spacingsPx.md}; -`; - -const StyledExplainer = styled(DeviceAuthenticationExplainer)` - @media only screen and (min-width: ${variables.SCREEN_SIZE.SM}) { - grid-template-columns: repeat(3, 1fr); - } -`; +const items: { icon: IconName; text: TranslationKey }[] = [ + { icon: 'shieldCheck', text: 'TR_DEVICE_AUTHENTICITY_ITEM_1' }, + { icon: 'cpu', text: 'TR_DEVICE_AUTHENTICITY_ITEM_2' }, + { icon: 'listChecks', text: 'TR_DEVICE_AUTHENTICITY_ITEM_3' }, +]; type DeviceAuthenticityProps = { goToNext: () => void; @@ -37,6 +28,7 @@ export const DeviceAuthenticity = ({ goToNext }: DeviceAuthenticityProps) => { const dispatch = useDispatch(); const [isLoading, setIsLoading] = useState(false); const [isSubmitted, setIsSubmitted] = useState(false); + const { isBelowTablet } = useLayoutSize(); if (!device) return null; @@ -96,7 +88,7 @@ export const DeviceAuthenticity = ({ goToNext }: DeviceAuthenticityProps) => { const buttonText = isCheckSuccessful ? 'TR_CONTINUE' : 'TR_START_CHECK'; return ( - { } > - + ); }; if (isCheckFailed) { return ( - + } text="TR_DEVICE_COMPROMISED_DEVICE_AUTHENTICITY_TEXT" /> - + ); } return ( - } description={getDescription()} innerActions={getInnerActions()} device={device} - disableConfirmWrapper={!isWaitingForConfirmation} + isConfirmedOnDevice={isWaitingForConfirmation} isActionAbortable > - {!isCheckSuccessful && } - + {!isCheckSuccessful && ( + + {items.map(({ icon, text }) => ( + + + + + + + ))} + + )} + ); }; diff --git a/packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityCheck.tsx b/packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityCheck.tsx index c8b53e2b39a0..3fa86655417d 100644 --- a/packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityCheck.tsx +++ b/packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityCheck.tsx @@ -14,6 +14,7 @@ import { Paragraph, Row, Text, + TextButton, Tooltip, } from '@trezor/components'; import { models } from '@trezor/device-utils'; @@ -27,7 +28,7 @@ import { import { goto } from 'src/actions/suite/routerActions'; import * as routerActions from 'src/actions/suite/routerActions'; -import { Hologram, OnboardingButtonSkip } from 'src/components/onboarding'; +import { Hologram } from 'src/components/onboarding/Hologram'; import { TrezorLink } from 'src/components/suite'; import { SecurityCheckFail } from 'src/components/suite/SecurityCheck/SecurityCheckFail'; import { SecurityCheckLayout } from 'src/components/suite/SecurityCheck/SecurityCheckLayout'; @@ -193,9 +194,9 @@ const SecurityCheckContent = ({ {device?.name} {humanizedModelColor && {humanizedModelColor}} - + - + diff --git a/packages/suite/src/views/onboarding/steps/ThpPairingFailedStep.tsx b/packages/suite/src/views/onboarding/steps/ThpPairingFailedStep.tsx index c1901b7dc0b4..28710b6a15a9 100644 --- a/packages/suite/src/views/onboarding/steps/ThpPairingFailedStep.tsx +++ b/packages/suite/src/views/onboarding/steps/ThpPairingFailedStep.tsx @@ -1,9 +1,8 @@ import { useState } from 'react'; -import { Button, Column, Text } from '@trezor/components'; -import { spacings } from '@trezor/theme'; +import { Column, Paragraph } from '@trezor/components'; -import { OnboardingStepBox } from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { Translation } from 'src/components/suite/Translation'; import { startThpSessionThunk } from '../../../actions/thp/startThpSessionThunk'; @@ -22,27 +21,22 @@ export const ThpPairingFailedStep = () => { }; return ( - } - description={ - - - + description={} + innerActions={ + + + } - device={undefined} > - - - - - - - - + + + + + - + ); }; diff --git a/packages/suite/src/views/onboarding/steps/ThpPairingStartStep.tsx b/packages/suite/src/views/onboarding/steps/ThpPairingStartStep.tsx index ead696e18959..257dcf19544d 100644 --- a/packages/suite/src/views/onboarding/steps/ThpPairingStartStep.tsx +++ b/packages/suite/src/views/onboarding/steps/ThpPairingStartStep.tsx @@ -1,14 +1,29 @@ -import { OnboardingStepBox } from 'src/components/onboarding'; +import { useState } from 'react'; + +import { startThpSessionThunk } from 'src/actions/thp/startThpSessionThunk'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { Translation } from 'src/components/suite/Translation'; +import { useDispatch } from 'src/hooks/suite'; + +export const ThpPairingStartStep = () => { + const [isLoading, setIsLoading] = useState(false); + const dispatch = useDispatch(); + + const onClick = () => { + setIsLoading(true); + dispatch(startThpSessionThunk()); + }; -import { ThpPairingStart } from '../../../components/connection/thp/ThpPairingStart'; - -export const ThpPairingStartStep = () => ( - } - device={undefined} - > - - -); + return ( + } + heading={} + innerActions={ + + + + } + /> + ); +}; diff --git a/packages/suite/src/views/onboarding/steps/ThpPairingStep.tsx b/packages/suite/src/views/onboarding/steps/ThpPairingStep.tsx index 86f75b1bf849..d385b65f1c5a 100644 --- a/packages/suite/src/views/onboarding/steps/ThpPairingStep.tsx +++ b/packages/suite/src/views/onboarding/steps/ThpPairingStep.tsx @@ -1,11 +1,10 @@ import { useCallback } from 'react'; import { useIntl } from 'react-intl'; -import { Button, Column, Text } from '@trezor/components'; +import { Column } from '@trezor/components'; import TrezorConnect from '@trezor/connect'; -import { spacings } from '@trezor/theme'; -import { OnboardingStepBox } from 'src/components/onboarding'; +import { OnboardingCard } from 'src/components/onboarding/OnboardingCard/OnboardingCard'; import { Translation } from 'src/components/suite/Translation'; import { ThpPairingCodeEntry } from '../../../components/connection/thp/ThpPairingCodeEntry'; @@ -20,22 +19,19 @@ export const ThpPairingStep = () => { ); return ( - } - description={ - - - + description={} + innerActions={ + + + } - device={undefined} > - + - - + ); }; diff --git a/packages/suite/src/views/start/SuiteStart.tsx b/packages/suite/src/views/start/SuiteStart.tsx index 1bde1b3aa8e6..e9fe8df6ac24 100644 --- a/packages/suite/src/views/start/SuiteStart.tsx +++ b/packages/suite/src/views/start/SuiteStart.tsx @@ -16,7 +16,7 @@ export const SuiteStart = () => ( * that we do not have the ModalProvider in layout, and therefore it is * handled in a custom way in the onboarding. * - * Go to `OnboardingStepBox` search for `ConfirmOnDevice`. + * Go to `OnboardingCard` search for `ConfirmOnDevice`. */ diff --git a/packages/suite/src/views/wallet/anonymize/components/CoinjoinConfirmation.tsx b/packages/suite/src/views/wallet/anonymize/components/CoinjoinConfirmation.tsx index 2da4f5a3d9ba..8079460292f1 100644 --- a/packages/suite/src/views/wallet/anonymize/components/CoinjoinConfirmation.tsx +++ b/packages/suite/src/views/wallet/anonymize/components/CoinjoinConfirmation.tsx @@ -74,17 +74,17 @@ const tiles: TileProps[] = [ { title: , description: , - image: 'CLOCK', + iconName: 'clock', }, { title: , description: , - image: 'FIRMWARE', + iconName: 'circuitry', }, { title: , description: , - image: 'PIN_LOCKED', + iconName: 'lockKey', }, ]; @@ -138,7 +138,7 @@ export const CoinjoinConfirmation = ({ account }: CoinjoinConfirmationProps) => {tiles.map(tile => ( - + ))} diff --git a/packages/suite/src/views/wallet/anonymize/components/Tile.tsx b/packages/suite/src/views/wallet/anonymize/components/Tile.tsx index 87dc0f196a23..26268d1941ed 100644 --- a/packages/suite/src/views/wallet/anonymize/components/Tile.tsx +++ b/packages/suite/src/views/wallet/anonymize/components/Tile.tsx @@ -2,7 +2,7 @@ import { ReactNode } from 'react'; import styled, { css } from 'styled-components'; -import { Card, Image, PngImage, variables } from '@trezor/components'; +import { Card, IconCircle, IconName, variables } from '@trezor/components'; const containerGridStyle = css` display: grid; @@ -32,8 +32,7 @@ const imageGridStyle = css` grid-row: 1/3; `; -// eslint-disable-next-line local-rules/no-override-ds-component -const StyledImage = styled(Image)` +const Image = styled.div` ${variables.SCREEN_QUERY.BELOW_LAPTOP} { ${imageGridStyle} } @@ -105,13 +104,15 @@ const Description = styled.p` export interface TileProps { description: ReactNode; - image: PngImage; + iconName: IconName; title: ReactNode; } -export const Tile = ({ description, image, title }: TileProps) => ( +export const Tile = ({ description, iconName, title }: TileProps) => ( - + + + {title} {description} diff --git a/packages/suite/src/views/wallet/transactions/CoinjoinExplanation/CoinjoinExplanation.tsx b/packages/suite/src/views/wallet/transactions/CoinjoinExplanation/CoinjoinExplanation.tsx index 31174618481b..3e649890044b 100644 --- a/packages/suite/src/views/wallet/transactions/CoinjoinExplanation/CoinjoinExplanation.tsx +++ b/packages/suite/src/views/wallet/transactions/CoinjoinExplanation/CoinjoinExplanation.tsx @@ -29,17 +29,17 @@ const Steps = styled.div` const STEPS: Array> = [ { - image: 'COINS', + iconName: 'coins', title: , description: , }, { - image: 'BACKUP', + iconName: 'trezorBackup', title: , description: , }, { - image: 'CLOUDY', + iconName: 'arrowsIn', title: , description: , }, @@ -54,7 +54,7 @@ export const CoinjoinExplanation = () => ( {STEPS.map((step, index) => ( - + ))} diff --git a/packages/suite/src/views/wallet/transactions/CoinjoinExplanation/CoinjoinProcessStep.tsx b/packages/suite/src/views/wallet/transactions/CoinjoinExplanation/CoinjoinProcessStep.tsx index 524ed9ec9d6c..d3dd4b38c331 100644 --- a/packages/suite/src/views/wallet/transactions/CoinjoinExplanation/CoinjoinProcessStep.tsx +++ b/packages/suite/src/views/wallet/transactions/CoinjoinExplanation/CoinjoinProcessStep.tsx @@ -2,12 +2,11 @@ import { ReactNode } from 'react'; import styled from 'styled-components'; -import { H3, Image, ImageKey, Paragraph, variables } from '@trezor/components'; +import { H3, IconCircle, IconName, Paragraph, variables } from '@trezor/components'; import { Translation } from 'src/components/suite/Translation'; -// eslint-disable-next-line local-rules/no-override-ds-component -const StyledImage = styled(Image)` +const Image = styled.div` margin: -8px; ${variables.SCREEN_QUERY.BELOW_LAPTOP} { @@ -95,19 +94,21 @@ const Container = styled.div` export interface CoinjoinProcessStepProps { number: number; - image: ImageKey; + iconName: IconName; title: ReactNode; description: ReactNode; } export const CoinjoinProcessStep = ({ number, - image, + iconName, title, description, }: CoinjoinProcessStepProps) => ( - + + +