fix(suite): enforce that the Security Check List icon is NOT just a s…

…tring (#16709)
trezor · Jan 30, 2025 · 5d28e7b · 5d28e7b
1 parent bc14291
commit 5d28e7b
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 8 deletions.
diff --git a/packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityCheck.tsx b/packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityCheck.tsx
@@ -27,6 +27,7 @@ import { selectSuiteFlags } from 'src/reducers/suite/suiteReducer';
 
 import { DeviceAuthenticity } from './DeviceAuthenticity';
 import { SecurityChecklist } from './SecurityChecklist';
+import { SecurityChecklistItem } from './types';
 
 const StyledCard = styled(CollapsibleOnboardingCard)`
     max-width: 840px;
@@ -90,15 +91,15 @@ const TooltipWrapper = styled.span`
 
 const firmwareInstalledChecklist = [
     {
-        icon: 'info',
+        icon: <Icon size={24} name="info" />,
         content: <Translation id="TR_ONBOARDING_DEVICE_CHECK_4" />,
     },
-] as const;
+] as const satisfies SecurityChecklistItem[];
 
 const getNoFirmwareChecklist = (isMobileLayout: boolean) =>
     [
         {
-            icon: 'verified',
+            icon: <Icon size={24} name="verified" />,
             content: (
                 <Translation
                     id="TR_ONBOARDING_DEVICE_CHECK_2"
@@ -118,7 +119,7 @@ const getNoFirmwareChecklist = (isMobileLayout: boolean) =>
             ),
         },
         {
-            icon: 'hologram',
+            icon: <Icon size={24} name="hologram" />,
             content: (
                 <Translation
                     id="TR_ONBOARDING_DEVICE_CHECK_1"
@@ -139,10 +140,10 @@ const getNoFirmwareChecklist = (isMobileLayout: boolean) =>
             ),
         },
         {
-            icon: 'package',
+            icon: <Icon size={24} name="package" />,
             content: <Translation id="TR_ONBOARDING_DEVICE_CHECK_3" />,
         },
-    ] as const;
+    ] as const satisfies SecurityChecklistItem[];
 
 type SecurityCheckContentProps = {
     goToDeviceAuthentication: () => void;

diff --git a/packages/suite/src/views/onboarding/steps/SecurityCheck/__tests__/types.test.tsx b/packages/suite/src/views/onboarding/steps/SecurityCheck/__tests__/types.test.tsx
@@ -0,0 +1,26 @@
+import { Icon } from '@trezor/components';
+
+import { SecurityChecklistItem } from '../types';
+
+describe('SecurityChecklistItem', () => {
+    describe('type tests', () => {
+        it("should not accept icon: 'string' as an icon prop", () => {
+            const x: SecurityChecklistItem = {
+                // @ts-expect-error: this should correctly throw a TS error - it cannot be a string
+                icon: 'string',
+                content: <div />,
+            };
+
+            expect(x).toBeTruthy();
+        });
+
+        it('should accept icon: ReactElement<<Icon />> as an icon prop', () => {
+            const x: SecurityChecklistItem = {
+                icon: <Icon name="hologram" />,
+                content: <div />,
+            };
+
+            expect(x).toBeTruthy();
+        });
+    });
+});
diff --git a/packages/suite/src/views/onboarding/steps/SecurityCheck/types.ts b/packages/suite/src/views/onboarding/steps/SecurityCheck/types.ts
@@ -1,7 +1,9 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
+
+import { Icon, IconProps } from '@trezor/components';
 
 export type SecurityChecklistItem = {
-    icon: ReactNode;
+    icon: ReactElement<IconProps, typeof Icon>;
     content: ReactNode;
     subtitle?: ReactNode;
 };