fixup! feat(suite): Implementation of the update icons in QuickAction…

…s bar
trezor · Sep 6, 2024 · 80d4082 · 80d4082
1 parent 441999e
commit 80d4082
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 25 deletions.
diff --git a/packages/product-components/src/index.ts b/packages/product-components/src/index.ts
@@ -1,2 +1,3 @@
 export { PassphraseTypeCard } from './components/PassphraseTypeCard/PassphraseTypeCard';
 export { ConfirmOnDevice } from './components/ConfirmOnDevice/ConfirmOnDevice';
+export { mapTrezorModelToIcon } from './utils/mapTrezorModelToIcon';
diff --git a/packages/product-components/src/utils/mapTrezorModelToIcon.ts b/packages/product-components/src/utils/mapTrezorModelToIcon.ts
@@ -0,0 +1,10 @@
+import { IconName } from '@trezor/components';
+import { DeviceModelInternal } from '@trezor/connect';
+
+export const mapTrezorModelToIcon: Record<DeviceModelInternal, IconName> = {
+    [DeviceModelInternal.T1B1]: 'trezorModelOneFilled',
+    [DeviceModelInternal.T2T1]: 'trezorModelTFilled',
+    [DeviceModelInternal.T2B1]: 'trezorSafe3Filled',
+    [DeviceModelInternal.T3B1]: 'trezorSafe3Filled',
+    [DeviceModelInternal.T3T1]: 'trezorSafe5Filled',
+};
diff --git a/...ages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/QuickActions.tsx b/...ages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/QuickActions.tsx
@@ -5,7 +5,7 @@ import { Tor } from './Tor';
 import { CustomBackend } from './CustomBackend';
 import { DebugAndExperimental } from './DebugAndExperimental';
 import { HideBalances } from './HideBalances';
-import { Update } from './Update/Update';
+import { UpdateStatusActionBarIcon } from './Update/UpdateStatusActionBarIcon';
 
 const ActionsContainer = styled.div`
     display: flex;
@@ -22,7 +22,7 @@ const ActionsContainer = styled.div`
 
 export const QuickActions = () => (
     <ActionsContainer>
-        <Update />
+        <UpdateStatusActionBarIcon />
         <DebugAndExperimental />
         <CustomBackend />
         <Tor />

diff --git a/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/Tor.tsx b/packages/suite/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/Tor.tsx
@@ -48,7 +48,7 @@ export const Tor = () => {
                         size: iconSizes.extraSmall,
                     }}
                 >
-                    <Icon name="tor" size={iconSizes.medium} variant="tertiary" />
+                    <Icon name="torBrowser" size={iconSizes.medium} variant="tertiary" />
                 </ComponentWithSubIcon>
             </QuickActionButton>
         )

diff --git a/...ut/Sidebar/QuickActions/Update/Update.tsx → ...ions/Update/UpdateStatusActionBarIcon.tsx b/...ut/Sidebar/QuickActions/Update/Update.tsx → ...ions/Update/UpdateStatusActionBarIcon.tsx
@@ -7,7 +7,6 @@ import { borders, Color, CSSColor } from '@trezor/theme';
 import { useUpdateStatus } from './useUpdateStatus';
 import { UpdateTooltip } from './UpdateTooltip';
 import {
-    mapTrezorModelToIcon,
     mapUpdateStatusToIcon,
     mapUpdateStatusToVariant,
     UpdateStatus,
@@ -17,6 +16,7 @@ import { isDesktop } from '@trezor/env-utils';
 import { useDispatch } from 'react-redux';
 import { goto } from 'src/actions/suite/routerActions';
 import { SettingsAnchor } from '../../../../../../../constants/suite/anchors';
+import { mapTrezorModelToIcon } from '@trezor/product-components';
 
 type MapArgs = {
     $variant: UpdateVariant;
@@ -74,12 +74,12 @@ const Relative = styled.div<{ $size: IconSize }>`
     height: ${({ $size }) => getIconSize($size)}px;
 `;
 
-type UsbCableFroTrezorIcon = {
+type UsbCableForTrezorIcon = {
     $variant: UpdateVariant;
     $size: IconSize;
 };
 
-const UsbCableFroTrezorIcon = styled.div<UsbCableFroTrezorIcon>`
+const UsbCableForTrezorIcon = styled.div<UsbCableForTrezorIcon>`
     border-left: 2px solid ${({ $variant, theme }) => mapVariantToIconColor({ $variant, theme })};
     height: 5px;
     position: absolute;
@@ -108,7 +108,7 @@ const DeviceUpdateIcon = ({ iconSize, updateStatus, variant }: DeviceUpdateIconP
                     size={iconSizes.medium}
                     variant={variant}
                 />
-                <UsbCableFroTrezorIcon $variant={variant} $size={iconSize} />
+                <UsbCableForTrezorIcon $variant={variant} $size={iconSize} />
             </Relative>
         </Highlighted>
     );
@@ -136,7 +136,7 @@ const SuiteUpdateIcon = ({ iconSize, updateStatus, variant }: SuiteUpdateIconPro
     );
 };
 
-export const Update = () => {
+export const UpdateStatusActionBarIcon = () => {
     const theme = useTheme();
 
     const { updateStatus, updateStatusDevice, updateStatusSuite } = useUpdateStatus();
@@ -153,7 +153,7 @@ export const Update = () => {
         return null;
     }
 
-    const handleOnclick = () => {
+    const handleOnClick = () => {
         if (updateStatusSuite === 'update-available') {
             dispatch(goto('settings-index', { anchor: SettingsAnchor.VersionWithUpdate }));
         } else if (updateStatusDevice === 'update-available') {
@@ -169,7 +169,7 @@ export const Update = () => {
                     updateStatusSuite={updateStatusSuite}
                 />
             }
-            onClick={handleOnclick}
+            onClick={handleOnClick}
         >
             <ComponentWithSubIcon
                 variant={variant}

diff --git a/...te/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/Update/UpdateTooltip.tsx b/...te/src/components/suite/layouts/SuiteLayout/Sidebar/QuickActions/Update/UpdateTooltip.tsx
@@ -3,7 +3,6 @@ import { useDevice, useSelector } from '../../../../../../../hooks/suite';
 import { Column, Row, Icon, iconSizes, Text, getColorForIconVariant } from '@trezor/components';
 import { ReactNode } from 'react';
 import {
-    mapTrezorModelToIcon,
     mapUpdateStatusToVariant,
     UpdateStatus,
     UpdateVariant,
@@ -14,6 +13,7 @@ import { borders, spacings, spacingsPx } from '@trezor/theme';
 import { TranslationKey } from '@suite-common/intl-types';
 import { getFirmwareVersion } from '@trezor/device-utils';
 import { isDesktop } from '@trezor/env-utils';
+import { mapTrezorModelToIcon } from '@trezor/product-components';
 
 type IconCircleWrapperProps = {
     $variant: UpdateVariant;
@@ -36,19 +36,19 @@ const IconCircleWrapper = styled.div<IconCircleWrapperProps>`
 
 type UpdateRowProps = {
     children: ReactNode;
-    leftIcon: ReactNode;
+    leftItem: ReactNode;
     updateStatus: UpdateStatus;
     header: ReactNode;
 };
 
-const UpdateRow = ({ leftIcon, updateStatus, children, header }: UpdateRowProps) => {
+const UpdateRow = ({ leftItem, updateStatus, children, header }: UpdateRowProps) => {
     const theme = useTheme();
 
     const variant = mapUpdateStatusToVariant[updateStatus];
 
     return (
         <Row gap={spacings.xs}>
-            {leftIcon}
+            {leftItem}
             <Column alignItems="start">
                 <Text>{header}</Text>
                 <Row gap={spacings.xxs}>
@@ -101,7 +101,7 @@ const DeviceRow = ({ updateStatus }: DeviceRowProps) => {
 
     return (
         <UpdateRow
-            leftIcon={
+            leftItem={
                 <Icon
                     name={mapTrezorModelToIcon[device.features.internal_model]}
                     size={iconSizes.large}
@@ -135,7 +135,7 @@ const SuiteRow = ({ updateStatus }: SuiteRowProps) => {
 
     return (
         <UpdateRow
-            leftIcon={
+            leftItem={
                 <SuiteIconRectangle>
                     <Icon name="trezor" size={iconSizes.medium} color={theme.iconDefaultInverted} />
                 </SuiteIconRectangle>

diff --git a/...omponents/suite/layouts/SuiteLayout/Sidebar/QuickActions/Update/updateQuickActionTypes.ts b/...omponents/suite/layouts/SuiteLayout/Sidebar/QuickActions/Update/updateQuickActionTypes.ts
@@ -1,6 +1,5 @@
 import { IconName } from '@trezor/components';
 import { UIVariant } from '@trezor/components/src/config/types';
-import { DeviceModelInternal } from '@trezor/connect';
 import { Color, CSSColor } from '@trezor/theme';
 import { DefaultTheme } from 'styled-components';
 
@@ -37,11 +36,3 @@ export const mapVariantToIconBackground = ({ $variant, theme }: MapArgs): CSSCol
 
     return theme[colorMap[$variant]];
 };
-
-export const mapTrezorModelToIcon: Record<DeviceModelInternal, IconName> = {
-    [DeviceModelInternal.T1B1]: 'trezorModelOneFilled',
-    [DeviceModelInternal.T2T1]: 'trezorModelTFilled',
-    [DeviceModelInternal.T2B1]: 'trezorSafe3Filled',
-    [DeviceModelInternal.T3B1]: 'trezorSafe3Filled',
-    [DeviceModelInternal.T3T1]: 'trezorSafe5Filled',
-};