feat(suite): soften FW hash check for other-error

trezor · Oct 31, 2024 · 946be5d · 946be5d
1 parent bef8f3c
commit 946be5d
Show file tree

Hide file tree

Showing 6 changed files with 74 additions and 27 deletions.
diff --git a/packages/suite/src/components/suite/SecurityCheck/DeviceCompromised.tsx b/packages/suite/src/components/suite/SecurityCheck/DeviceCompromised.tsx
@@ -11,7 +11,8 @@ import {
     selectFirmwareHashCheckError,
     selectFirmwareRevisionCheckError,
 } from 'src/reducers/suite/suiteReducer';
-import { SecurityCheckFail } from 'src/components/suite/SecurityCheck/SecurityCheckFail';
+import { SecurityCheckFail, SecurityCheckFailProps } from './SecurityCheckFail';
+import { softFailureChecklistItems } from './checklistItems';
 
 const reportCheckFail = (checkType: 'revision' | 'hash', contextData: any) => {
     withSentryScope(scope => {
@@ -48,12 +49,22 @@ export const DeviceCompromised = () => {
         if (hashCheckError) reportCheckFail('hash', { ...commonData, hashCheckError });
     }, [revisionCheckError, hashCheckError, revision, vendor, version]);
 
+    const isSoftFailure = revisionCheckError === null && hashCheckError === 'other-error';
+    const softFailureSecurityCheckFailProps: Partial<SecurityCheckFailProps> = isSoftFailure
+        ? {
+              heading: 'TR_DEVICE_MAYBE_COMPROMISED_HEADING',
+              text: 'TR_DEVICE_MAYBE_COMPROMISED_TEXT',
+              checklistItems: softFailureChecklistItems,
+          }
+        : {};
+
     return (
         <WelcomeLayout>
             <Card data-testid="@device-compromised">
                 <SecurityCheckFail
                     goBack={goToSuite}
                     supportUrl={TREZOR_SUPPORT_FW_REVISION_CHECK_FAILED_URL}
+                    {...softFailureSecurityCheckFailProps}
                 />
             </Card>
         </WelcomeLayout>

diff --git a/packages/suite/src/components/suite/SecurityCheck/SecurityCheckFail.tsx b/packages/suite/src/components/suite/SecurityCheck/SecurityCheckFail.tsx
@@ -6,8 +6,10 @@ import { spacings, spacingsPx } from '@trezor/theme';
 import { Url } from '@trezor/urls';
 
 import { Translation } from 'src/components/suite';
-import { SecurityChecklist } from '../../../views/onboarding/steps/SecurityCheck/SecurityChecklist';
+import { SecurityChecklist } from 'src/views/onboarding/steps/SecurityCheck/SecurityChecklist';
+import { SecurityChecklistItem } from 'src/views/onboarding/steps/SecurityCheck/types';
 import { SecurityCheckLayout } from './SecurityCheckLayout';
+import { hardFailureChecklistItems } from './checklistItems';
 
 const TopSection = styled.div`
     margin-top: ${spacingsPx.xs};
@@ -19,33 +21,20 @@ const Flex = styled.div`
     flex: 1;
 `;
 
-const checklistItems = [
-    {
-        icon: 'plugs',
-        content: <Translation id="TR_DISCONNECT_DEVICE" />,
-    },
-    {
-        icon: 'hand',
-        content: <Translation id="TR_AVOID_USING_DEVICE" />,
-    },
-    {
-        icon: 'chat',
-        content: <Translation id="TR_USE_CHAT" values={{ b: chunks => <b>{chunks}</b> }} />,
-    },
-] as const;
-
-interface SecurityCheckFailProps {
+export type SecurityCheckFailProps = {
     goBack?: () => void;
     heading?: TranslationKey;
     text?: TranslationKey;
     supportUrl: Url;
-}
+    checklistItems?: SecurityChecklistItem[];
+};
 
 export const SecurityCheckFail = ({
     goBack,
     heading = 'TR_DEVICE_COMPROMISED_HEADING',
     text = 'TR_DEVICE_COMPROMISED_TEXT',
     supportUrl,
+    checklistItems = hardFailureChecklistItems,
 }: SecurityCheckFailProps) => {
     const chatUrl = `${supportUrl}#open-chat`;
 

diff --git a/packages/suite/src/components/suite/SecurityCheck/checklistItems.tsx b/packages/suite/src/components/suite/SecurityCheck/checklistItems.tsx
@@ -0,0 +1,32 @@
+import { Translation } from '../Translation';
+import { SecurityChecklistItem } from 'src/views/onboarding/steps/SecurityCheck/types';
+
+export const hardFailureChecklistItems: SecurityChecklistItem[] = [
+    {
+        icon: 'plugs',
+        content: <Translation id="TR_DISCONNECT_DEVICE" />,
+    },
+    {
+        icon: 'hand',
+        content: <Translation id="TR_AVOID_USING_DEVICE" />,
+    },
+    {
+        icon: 'chat',
+        content: <Translation id="TR_USE_CHAT" values={{ b: chunks => <b>{chunks}</b> }} />,
+    },
+];
+
+export const softFailureChecklistItems: SecurityChecklistItem[] = [
+    {
+        icon: 'plugs',
+        content: <Translation id="TR_RECONNECT_YOUR_DEVICE" />,
+    },
+    {
+        icon: 'eye',
+        content: <Translation id="TR_SEE_IF_ISSUE_PERSISTS" />,
+    },
+    {
+        icon: 'chat',
+        content: <Translation id="TR_USE_CHAT" values={{ b: chunks => <b>{chunks}</b> }} />,
+    },
+];
diff --git a/packages/suite/src/support/messages.ts b/packages/suite/src/support/messages.ts
@@ -6873,6 +6873,15 @@ export default defineMessages({
         defaultMessage:
             'We want to be sure that your device is in tip-top shape before you start using it. Reach out to Trezor Support to find out what to do next.',
     },
+    TR_DEVICE_MAYBE_COMPROMISED_HEADING: {
+        id: 'TR_DEVICE_MAYBE_COMPROMISED_HEADING',
+        defaultMessage: 'Device verification unsuccessful',
+    },
+    TR_DEVICE_MAYBE_COMPROMISED_TEXT: {
+        id: 'TR_DEVICE_MAYBE_COMPROMISED_TEXT',
+        defaultMessage:
+            "Reconnect your device to retry verification. If the issue persists, contact Trezor Support to figure out what's going on with your device and what to do next.",
+    },
     TR_DISCONNECT_DEVICE: {
         id: 'TR_DISCONNECT_DEVICE',
         defaultMessage: 'Disconnect your device from your laptop or computer.',
@@ -6885,6 +6894,10 @@ export default defineMessages({
         id: 'TR_USE_CHAT',
         defaultMessage: 'Click below and use the <b>Chat</b> option on the next page.',
     },
+    TR_SEE_IF_ISSUE_PERSISTS: {
+        id: 'TR_SEE_IF_ISSUE_PERSISTS',
+        defaultMessage: 'See if issue persist.',
+    },
     TR_CONTACT_TREZOR_SUPPORT: {
         id: 'TR_CONTACT_TREZOR_SUPPORT',
         defaultMessage: 'Contact Trezor Support',

diff --git a/packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityChecklist.tsx b/packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityChecklist.tsx
@@ -1,16 +1,11 @@
-import { ReactNode } from 'react';
 import { useTheme } from 'styled-components';
 
-import { Column, Icon, IconName, Row, Text } from '@trezor/components';
+import { Column, Icon, Row, Text } from '@trezor/components';
 import { spacings } from '@trezor/theme';
-
-type Item = {
-    icon: IconName;
-    content: ReactNode;
-};
+import { SecurityChecklistItem } from './types';
 
 type SecurityChecklistProps = {
-    items: readonly Item[];
+    items: readonly SecurityChecklistItem[];
 };
 
 export const SecurityChecklist = ({ items }: SecurityChecklistProps) => {

diff --git a/packages/suite/src/views/onboarding/steps/SecurityCheck/types.ts b/packages/suite/src/views/onboarding/steps/SecurityCheck/types.ts
@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+import { IconName } from '@trezor/components';
+
+export type SecurityChecklistItem = {
+    icon: IconName;
+    content: ReactNode;
+};