feat(suite): images, logic, videos for TS5

packages/components/src/components/ConfirmOnDevice/ConfirmOnDevice.stories.tsx

@@ -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>
     </>

packages/components/src/components/ConfirmOnDevice/ConfirmOnDeviceContent.tsx

@@ -124,10 +124,14 @@ export const ConfirmOnDeviceContent = ({
     const hasSteps = steps && activeStep !== undefined;
     const theme = useTheme();
 
+    const isDeviceImageRotating =
+        deviceModelInternal &&
+        [DeviceModelInternal.T3T1, DeviceModelInternal.T2B1].includes(deviceModelInternal);
+
     return (
         <>
             <Left>
-                {deviceModelInternal === DeviceModelInternal.T2B1 && (
+                {isDeviceImageRotating && (
                     <DeviceAnimation
                         type="ROTATE"
                         height="34px"
@@ -136,7 +140,7 @@ export const ConfirmOnDeviceContent = ({
                         deviceUnitColor={deviceUnitColor}
                     />
                 )}
-                {deviceModelInternal && deviceModelInternal !== DeviceModelInternal.T2B1 && (
+                {deviceModelInternal && !isDeviceImageRotating && (
                     <StyledImage alt="Trezor" image={`TREZOR_${deviceModelInternal}`} />
                 )}
             </Left>

packages/components/src/components/Image/images.ts

@@ -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',
@@ -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',

packages/components/src/components/animations/DeviceAnimation.tsx

@@ -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'
@@ -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}>

packages/components/src/components/assets/Icon/icons.ts

@@ -126,6 +126,8 @@ export const ICONS = {
     STOP: require('../../../images/icons/stop.svg'),
     TREZOR_T1B1: require('../../../images/icons/trezor_t1b1.svg'),
     TREZOR_T2T1: require('../../../images/icons/trezor_t2t1.svg'),
+    // todo: proper icon
+    TREZOR_T3T1: require('../../../images/icons/trezor_t2t1.svg'),
     TREZOR_T2B1: require('../../../images/icons/trezor_t2b1.svg'),
     TABLE: require('../../../images/icons/table.svg'),
     TAG_MINIMAL: require('../../../images/icons/tag_minimal.svg'),

packages/suite/src/components/firmware/ReconnectDevicePrompt.tsx

@@ -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} />;

packages/suite/src/components/onboarding/ConnectDevicePromptManager/components/UnexpectedDeviceState.tsx

@@ -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',
                                 })}
                             />
                         ),

packages/suite/src/components/suite/HomescreenGallery.tsx

@@ -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

packages/suite/src/components/suite/PrerequisitesGuide/DeviceBootloader.tsx

@@ -33,6 +33,8 @@ export const DeviceBootloader = ({ device }: DeviceBootloaderProps) => {
                         default: 'TR_DEVICE_CONNECTED_BOOTLOADER_RECONNECT_IN_NORMAL_NO_BUTTON',
                         [DeviceModelInternal.T2T1]:
                             'TR_DEVICE_CONNECTED_BOOTLOADER_RECONNECT_IN_NORMAL_NO_TOUCH',
+                        [DeviceModelInternal.T3T1]:
+                            'TR_DEVICE_CONNECTED_BOOTLOADER_RECONNECT_IN_NORMAL_NO_TOUCH',
                     })}
                 />
             ),

packages/suite/src/components/suite/layouts/SuiteLayout/DeviceSelector/DeviceStatusWithLabel.tsx

@@ -64,10 +64,15 @@ export const DeviceStatusWithLabel = () => {
         return null;
     }
 
+    const hasRotatingDeviceAnimation = [
+        DeviceModelInternal.T2B1,
+        DeviceModelInternal.T3T1,
+    ].includes(selectedDeviceModelInternal);
+
     return (
         <>
             <DeviceWrapper $isLowerOpacity={deviceNeedsRefresh}>
-                {selectedDeviceModelInternal === DeviceModelInternal.T2B1 && (
+                {hasRotatingDeviceAnimation && (
                     <DeviceAnimation
                         type="ROTATE"
                         height="34px"
@@ -77,7 +82,7 @@ export const DeviceStatusWithLabel = () => {
                     />
                 )}
 
-                {selectedDeviceModelInternal !== DeviceModelInternal.T2B1 && (
+                {!hasRotatingDeviceAnimation && (
                     <StyledImage alt="Trezor" image={`TREZOR_${selectedDeviceModelInternal}`} />
                 )}
             </DeviceWrapper>

packages/suite/src/components/suite/modals/ReduxModal/UserContextModal/CoinmarketTermsModal.tsx

@@ -2,9 +2,9 @@ import { Button, Icon } from '@trezor/components';
 import { Modal, Translation } from 'src/components/suite';
 import styled from 'styled-components';
 import type { Deferred } from '@trezor/utils';
-import { DeviceModelInternal } from '@trezor/connect';
 import { cryptoToCoinSymbol } from 'src/utils/wallet/coinmarket/cryptoSymbolUtils';
 import { CryptoSymbol } from 'invity-api';
+import { useDevice } from 'src/hooks/suite';
 
 const ContentWrapper = styled.div`
     text-align: left;
@@ -84,6 +84,7 @@ export const CoinmarketTermsModal = ({
 }: CoinmarketTermsModalProps) => {
     const providerName = provider || 'unknown provider';
     const lowercaseType = type.toLowerCase();
+    const { device } = useDevice();
 
     return (
         <Modal
@@ -121,7 +122,7 @@ export const CoinmarketTermsModal = ({
             }
         >
             <Flex>
-                <SecurityStyledIcon size={24} icon={`TREZOR_${DeviceModelInternal.T2T1}`} />
+                <SecurityStyledIcon size={24} icon={`TREZOR_${device!.features!.internal_model}`} />
 
                 <ContentWrapper>
                     <TermsHeader>

packages/suite/src/config/onboarding/steps.ts

@@ -36,13 +36,13 @@ const steps: Step[] = [
     {
         id: STEP.ID_AUTHENTICATE_DEVICE_STEP,
         stepGroup: 0,
-        supportedModels: [DeviceModelInternal.T2B1],
+        supportedModels: [DeviceModelInternal.T2B1, DeviceModelInternal.T3T1],
         prerequisites: [...commonPrerequisites, 'device-recovery-mode', 'device-different'],
     },
     {
         id: STEP.ID_TUTORIAL_STEP,
         stepGroup: 0,
-        supportedModels: [DeviceModelInternal.T2B1],
+        supportedModels: [DeviceModelInternal.T2B1, DeviceModelInternal.T3T1],
         prerequisites: [...commonPrerequisites, 'device-recovery-mode', 'device-different'],
     },
     {