feat(suite): add model color name to the device name in onboarding - security check

Author: vojtatranta

packages/suite/src/views/onboarding/steps/SecurityCheck/SecurityCheck.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 import styled, { useTheme } from 'styled-components';
 
@@ -14,6 +14,7 @@ import {
     TREZOR_URL,
 } from '@trezor/urls';
 import { SUPPORTS_DEVICE_AUTHENTICITY_CHECK } from '@suite-common/suite-constants';
+import { models } from '@trezor/connect/src/data/models';
 
 import { goto } from 'src/actions/suite/routerActions';
 import { useDispatch, useLayoutSize, useOnboarding, useSelector } from 'src/hooks/suite';
@@ -208,6 +209,14 @@ const SecurityCheckContent = ({
         }
     }, [initialized, isRecoveryInProgress, updateAnalytics]);
 
+    const humanizedModelColor = useMemo(
+        () =>
+            device?.features?.internal_model && device?.features?.unit_color
+                ? models[device?.features?.internal_model]?.colors?.[device?.features?.unit_color]
+                : null,
+        [device],
+    );
+
     return isFailed ? (
         <SecurityCheckFail
             goBack={toggleView}
@@ -222,7 +231,11 @@ const SecurityCheckContent = ({
                     <Text variant="tertiary">
                         <Translation id="TR_YOU_HAVE_CONNECTED" />
                     </Text>
-                    <DeviceName>{device?.name}</DeviceName>
+                    <DeviceName>
+                        {device?.name}
+                        {humanizedModelColor && <Text> {humanizedModelColor}</Text>}
+                    </DeviceName>
+
                     <OnboardingButtonSkip onClick={toggleView}>
                         <Translation id="TR_CONNECTED_DIFFERENT_DEVICE" />
                     </OnboardingButtonSkip>