Skip to content

Commit

Permalink
feat(suite): images, logic, videos for T3T1
Browse files Browse the repository at this point in the history
  • Loading branch information
tomasklim committed Apr 18, 2024
1 parent 539658d commit e238451
Show file tree
Hide file tree
Showing 61 changed files with 297 additions and 112 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -82,18 +82,18 @@ export const ConfirmOnDevice: StoryFn = () => (
steps={5}
activeStep={3}
onCancel={() => {}}
deviceModelInternal={DeviceModelInternal.T2T1}
deviceModelInternal={DeviceModelInternal.T2B1}
deviceUnitColor={5}
/>
</StoryColumn>
<StoryColumn minWidth={300}>
<ConfirmOnDeviceComponent
successText="Confirmed"
title="Confirm on T2T1"
title="Confirm on T3T1"
steps={5}
activeStep={5}
onCancel={() => {}}
deviceModelInternal={DeviceModelInternal.T2T1}
deviceModelInternal={DeviceModelInternal.T3T1}
/>
</StoryColumn>
</>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import { ReactNode } from 'react';
import styled, { css, useTheme } from 'styled-components';
import { Image } from '../Image/Image';
import { Icon } from '../assets/Icon/Icon';
import { DeviceModelInternal } from '@trezor/connect';
import {
Expand All @@ -10,8 +9,8 @@ import {
spacingsPx,
typography,
} from '@trezor/theme';
import { DeviceAnimation } from '../animations/DeviceAnimation';
import { useElevation } from '../ElevationContext/ElevationContext';
import { RotateDeviceImage } from './RotateDeviceImage';

const Column = styled.div`
display: flex;
Expand Down Expand Up @@ -85,7 +84,7 @@ const Step = styled.div<{ $isActive: boolean }>`
`}
`;

const StyledImage = styled(Image)`
const StyledRotateDeviceImage = styled(RotateDeviceImage)`
height: 34px;
`;

Expand Down Expand Up @@ -127,18 +126,12 @@ export const ConfirmOnDeviceContent = ({
return (
<>
<Left>
{deviceModelInternal === DeviceModelInternal.T2B1 && (
<DeviceAnimation
type="ROTATE"
height="34px"
width="34px"
deviceModelInternal={deviceModelInternal}
deviceUnitColor={deviceUnitColor}
/>
)}
{deviceModelInternal && deviceModelInternal !== DeviceModelInternal.T2B1 && (
<StyledImage alt="Trezor" image={`TREZOR_${deviceModelInternal}`} />
)}
<StyledRotateDeviceImage
deviceModel={deviceModelInternal}
deviceColor={deviceUnitColor}
animationHeight="34px"
animationWidth="34px"
/>
</Left>

<Middle>
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
import React from 'react';
import { DeviceAnimation } from '../animations/DeviceAnimation';
import { DeviceModelInternal } from '@trezor/connect';
import { Image } from '../Image/Image';

interface DeviceImageProps {
deviceModel?: DeviceModelInternal;
deviceColor?: number;
className?: string;
animationHeight?: string;
animationWidth?: string;
}

export const RotateDeviceImage = ({
deviceModel,
deviceColor,
className,
animationHeight,
animationWidth,
}: DeviceImageProps) => {
if (!deviceModel) {
return null;
}

const isDeviceImageRotating =
deviceModel && [DeviceModelInternal.T3T1, DeviceModelInternal.T2B1].includes(deviceModel);

return (
<>
{isDeviceImageRotating ? (
<DeviceAnimation
className={className}
type="ROTATE"
deviceModelInternal={deviceModel}
deviceUnitColor={deviceColor}
height={animationHeight}
width={animationWidth}
/>
) : (
<Image alt="Trezor" image={`TREZOR_${deviceModel}`} className={className} />
)}
</>
);
};
9 changes: 9 additions & 0 deletions packages/components/src/components/Image/images.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ export const SVG_IMAGES = {
DEVICE_CONFIRM_TREZOR_T1B1: 'device-confirm-trezor-t1b1.svg',
DEVICE_CONFIRM_TREZOR_T2T1: 'device-confirm-trezor-t2t1.svg',
DEVICE_CONFIRM_TREZOR_T2B1: 'device-confirm-trezor-t2b1.svg',
DEVICE_CONFIRM_TREZOR_T3T1: 'device-confirm-trezor-t3t1.svg',
SPINNER: 'spinner.svg',
SPINNER_GREY: 'spinner-grey.svg',
SPINNER_LIGHT_GREY: 'spinner-light-grey.svg',
Expand Down Expand Up @@ -78,24 +79,32 @@ export const PNG_IMAGES = {
DONT_DISCONNECT_TREZOR_T1B1_2x: '[email protected]',
DONT_DISCONNECT_TREZOR_T2B1: 'dont-disconnect-trezor-t2b1.png',
DONT_DISCONNECT_TREZOR_T2B1_2x: '[email protected]',
DONT_DISCONNECT_TREZOR_T3T1: 'dont-disconnect-trezor-t3t1.png',
DONT_DISCONNECT_TREZOR_T3T1_2x: '[email protected]',
TREZOR_T1B1: 'trezor-t1b1.png',
TREZOR_T1B1_2x: '[email protected]',
TREZOR_T2T1: 'trezor-t2t1.png',
TREZOR_T2T1_2x: '[email protected]',
TREZOR_T2B1: 'trezor-t2b1.png',
TREZOR_T2B1_2x: '[email protected]',
TREZOR_T3T1: 'trezor-t3t1.png',
TREZOR_T3T1_2x: '[email protected]',
TREZOR_T1B1_LARGE: 'trezor-t1b1-large.png',
TREZOR_T1B1_LARGE_2x: '[email protected]',
TREZOR_T2T1_LARGE: 'trezor-t2t1-large.png',
TREZOR_T2T1_LARGE_2x: '[email protected]',
TREZOR_T2B1_LARGE: 'trezor-t2b1-large.png',
TREZOR_T2B1_LARGE_2x: '[email protected]',
TREZOR_T3T1_LARGE: 'trezor-t3t1-large.png',
TREZOR_T3T1_LARGE_2x: '[email protected]',
TREZOR_T1B1_GHOST: 'trezor-t1b1-ghost.png',
TREZOR_T1B1_GHOST_2x: '[email protected]',
TREZOR_T2T1_GHOST: 'trezor-t2t1-ghost.png',
TREZOR_T2T1_GHOST_2x: '[email protected]',
TREZOR_T2B1_GHOST: 'trezor-t2b1-ghost.png',
TREZOR_T2B1_GHOST_2x: '[email protected]',
TREZOR_T3T1_GHOST: 'trezor-t3t1-ghost.png',
TREZOR_T3T1_GHOST_2x: '[email protected]',
TREZOR_SAFE_PROMO_PRODUCTS: 'trezor-safe-promo-products.png',
TREZOR_SAFE_PROMO_PRODUCTS_2x: '[email protected]',
TREZOR_SAFE_PROMO_LOGO: 'trezor-safe-promo-logo.png',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const StyledVideo = styled.video`
`;

export type AnimationDeviceType =
| 'BOOTLOADER'
| 'BOOTLOADER' // No longer available for T3T1
| 'BOOTLOADER_TWO_BUTTONS' // Only available for T1B1 with old FW
| 'NORMAL' // Only available for T1B1
| 'SUCCESS'
Expand Down Expand Up @@ -47,8 +47,12 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
) => {
const { THEME } = useTheme();

// T2B1 animations are transparent
const theme = deviceModelInternal === DeviceModelInternal.T2B1 ? '' : `_${THEME}`;
// T2B1, T3B1 animations are transparent
const theme = [DeviceModelInternal.T2B1, DeviceModelInternal.T3T1].includes(
deviceModelInternal,
)
? ''
: `_${THEME}`;

return (
<AnimationWrapper height={height} width={width} shape={shape} {...props}>
Expand Down Expand Up @@ -117,7 +121,7 @@ export const DeviceAnimation = forwardRef<HTMLVideoElement, DeviceAnimationProps
>
<source
src={resolveStaticPath(
`videos/device/trezor_${DeviceModelInternal.T2B1.toLowerCase()}_rotate_color_${
`videos/device/trezor_${deviceModelInternal.toLowerCase()}_rotate_color_${
// if device unit color is not set, use first color available
deviceUnitColor ?? 1
}.webm`,
Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/assets/Icon/icons.ts
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,7 @@ export const ICONS = {
TREZOR_T1B1: require('../../../images/icons/trezor_t1b1.svg'),
TREZOR_T2T1: require('../../../images/icons/trezor_t2t1.svg'),
TREZOR_T2B1: require('../../../images/icons/trezor_t2b1.svg'),
TREZOR_T3T1: require('../../../images/icons/trezor_t3t1.svg'),
TABLE: require('../../../images/icons/table.svg'),
TAG_MINIMAL: require('../../../images/icons/tag_minimal.svg'),
TAG: require('../../../images/icons/tag.svg'),
Expand Down
5 changes: 5 additions & 0 deletions packages/components/src/images/icons/trezor_t3t1.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/components/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ export * from './components/buttons/TooltipButton/TooltipButton';
export * from './components/Card/Card';
export * from './components/CollapsibleBox/CollapsibleBox';
export * from './components/ConfirmOnDevice/ConfirmOnDevice';
export * from './components/ConfirmOnDevice/RotateDeviceImage';
export * from './components/DataAnalytics';
export * from './components/Divider/Divider';
export * from './components/Dropdown/Dropdown';
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.

Large diffs are not rendered by default.

Original file line number Diff line number Diff line change
Expand Up @@ -169,14 +169,16 @@ const ReconnectLabel = ({
? 'TR_SWITCH_TO_BOOTLOADER_HOLD_BOTH_BUTTONS'
: 'TR_SWITCH_TO_BOOTLOADER_HOLD_LEFT_BUTTON',
[DeviceModelInternal.T2T1]: 'TR_SWITCH_TO_BOOTLOADER_SWIPE_YOUR_FINGERS',
[DeviceModelInternal.T3T1]: 'TR_SWITCH_TO_BOOTLOADER_SWIPE_YOUR_FINGERS',
} as const);

return <Translation id={switchToBootloaderModeMessage} />;
}

const switchToNormalModeMessage = pickByDeviceModel(deviceModelInternal, {
default: 'FIRMWARE_CONNECT_IN_NORMAL_MODEL_NO_BUTTON',
[DeviceModelInternal.T2B1]: 'FIRMWARE_CONNECT_IN_NORMAL_MODEL_NO_TOUCH',
[DeviceModelInternal.T2T1]: 'FIRMWARE_CONNECT_IN_NORMAL_MODEL_NO_TOUCH',
[DeviceModelInternal.T3T1]: 'FIRMWARE_CONNECT_IN_NORMAL_MODEL_NO_TOUCH',
} as const);

return <Translation id={switchToNormalModeMessage} />;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,8 @@ export const UnexpectedDeviceState = ({
default: 'FIRMWARE_CONNECT_IN_NORMAL_MODEL_NO_BUTTON',
[DeviceModelInternal.T2T1]:
'FIRMWARE_CONNECT_IN_NORMAL_MODEL_NO_TOUCH',
[DeviceModelInternal.T3T1]:
'FIRMWARE_CONNECT_IN_NORMAL_MODEL_NO_TOUCH',
})}
/>
),
Expand Down
2 changes: 1 addition & 1 deletion packages/suite/src/components/suite/HomescreenGallery.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export const HomescreenGallery = ({ onConfirm }: HomescreenGalleryProps) => {
))}
</BackgroundGalleryWrapper>
)}
{deviceModelInternal === DeviceModelInternal.T2T1 && (
{[DeviceModelInternal.T2T1, DeviceModelInternal.T3T1].includes(deviceModelInternal) && (
<BackgroundGalleryWrapper>
{homescreens[deviceModelInternal].map(image => (
<BackgroundImageColor240x240
Expand Down
Loading

0 comments on commit e238451

Please sign in to comment.