Skip to content

Commit

Permalink
refactor(suite-native): create new module for device settings
Browse files Browse the repository at this point in the history
  • Loading branch information
yanascz committed Oct 18, 2024
1 parent 85465be commit 2cea609
Show file tree
Hide file tree
Showing 21 changed files with 186 additions and 74 deletions.
1 change: 1 addition & 0 deletions suite-native/app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,7 @@
"@suite-native/module-authorize-device": "workspace:*",
"@suite-native/module-connect-popup": "workspace:*",
"@suite-native/module-dev-utils": "workspace:*",
"@suite-native/module-device-settings": "workspace:*",
"@suite-native/module-home": "workspace:*",
"@suite-native/module-onboarding": "workspace:*",
"@suite-native/module-receive": "workspace:*",
Expand Down
3 changes: 2 additions & 1 deletion suite-native/app/src/navigation/RootStackNavigator.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useSelector } from 'react-redux';

import { createNativeStackNavigator } from '@react-navigation/native-stack';

import { useHandleDeviceConnection } from '@suite-native/device';
import {
AccountDetailScreen,
AccountSettingsScreen,
Expand All @@ -19,7 +20,7 @@ import { OnboardingStackNavigator } from '@suite-native/module-onboarding';
import { ReceiveModalScreen } from '@suite-native/receive';
import { AuthorizeDeviceStackNavigator } from '@suite-native/module-authorize-device';
import { AddCoinAccountStackNavigator } from '@suite-native/module-add-accounts';
import { DeviceInfoModalScreen, useHandleDeviceConnection } from '@suite-native/device';
import { DeviceInfoModalScreen } from '@suite-native/module-device-settings';
import { SendStackNavigator } from '@suite-native/module-send';
import { CoinEnablingInitScreen } from '@suite-native/coin-enabling';
import { ConnectPopupScreen, useConnectPopupNavigation } from '@suite-native/module-connect-popup';
Expand Down
1 change: 1 addition & 0 deletions suite-native/app/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@
{ "path": "../module-authorize-device" },
{ "path": "../module-connect-popup" },
{ "path": "../module-dev-utils" },
{ "path": "../module-device-settings" },
{ "path": "../module-home" },
{ "path": "../module-onboarding" },
{ "path": "../module-receive" },
Expand Down
3 changes: 0 additions & 3 deletions suite-native/device/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,7 @@
"@react-navigation/native": "6.1.18",
"@reduxjs/toolkit": "1.9.5",
"@sentry/react-native": "5.33.0",
"@suite-common/icons-deprecated": "workspace:*",
"@suite-common/redux-utils": "workspace:*",
"@suite-common/suite-utils": "workspace:*",
"@suite-common/wallet-core": "workspace:*",
"@suite-common/wallet-utils": "workspace:*",
"@suite-native/alerts": "workspace:*",
Expand All @@ -32,7 +30,6 @@
"@suite-native/navigation": "workspace:*",
"@suite-native/settings": "workspace:*",
"@trezor/connect": "workspace:*",
"@trezor/device-utils": "workspace:*",
"@trezor/styles": "workspace:*",
"lottie-react-native": "6.7.2",
"proxy-memoize": "2.0.2",
Expand Down
Binary file modified suite-native/device/src/assets/t1b1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified suite-native/device/src/assets/t2t1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified suite-native/device/src/assets/t3b1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified suite-native/device/src/assets/t3t1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
53 changes: 53 additions & 0 deletions suite-native/device/src/components/DeviceImage.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import { Image } from '@suite-native/atoms';
import { DeviceModelInternal } from '@trezor/connect';
import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';

const deviceImageMap: Record<DeviceModelInternal, string> = {
[DeviceModelInternal.T1B1]: require('../assets/t1b1.png'),
[DeviceModelInternal.T2T1]: require('../assets/t2t1.png'),
[DeviceModelInternal.T2B1]: require('../assets/t3b1.png'),
[DeviceModelInternal.T3B1]: require('../assets/t3b1.png'),
[DeviceModelInternal.T3T1]: require('../assets/t3t1.png'),
};

type DeviceImageSize = 'normal' | 'large';
type DeviceImageDimensions = {
width: number;
height: number;
};

const sizeToDimensionsMap = {
normal: {
width: 92,
height: 151,
},
large: {
width: 243,
height: 400,
},
} as const satisfies Record<DeviceImageSize, DeviceImageDimensions>;

const imageStyle = prepareNativeStyle<{ size: DeviceImageSize; maxHeight?: number }>(
(_, { size, maxHeight }) => ({
...sizeToDimensionsMap[size],
maxHeight,
contentFit: 'contain',
}),
);

export type DeviceImageProps = {
deviceModel: DeviceModelInternal;
size?: DeviceImageSize;
maxHeight?: number;
};

export const DeviceImage = ({ deviceModel, size = 'normal', maxHeight }: DeviceImageProps) => {
const { applyStyle } = useNativeStyles();

return (
<Image
source={deviceImageMap[deviceModel]}
style={applyStyle(imageStyle, { size, maxHeight })}
/>
);
};
2 changes: 1 addition & 1 deletion suite-native/device/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ export * from './middlewares/buttonRequestMiddleware';
export * from './hooks/useHandleDeviceConnection';
export * from './hooks/useDetectDeviceError';
export * from './hooks/useReportDeviceConnectToAnalytics';
export * from './screens/DeviceInfoModalScreen';
export * from './components/ConnectDeviceAnimation';
export * from './components/ConfirmOnTrezorImage';
export * from './components/DeviceImage';
export * from './utils';
export * from './selectors';
7 changes: 0 additions & 7 deletions suite-native/device/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -2,15 +2,9 @@
"extends": "../../tsconfig.base.json",
"compilerOptions": { "outDir": "libDev" },
"references": [
{
"path": "../../suite-common/icons-deprecated"
},
{
"path": "../../suite-common/redux-utils"
},
{
"path": "../../suite-common/suite-utils"
},
{
"path": "../../suite-common/wallet-core"
},
Expand All @@ -29,7 +23,6 @@
{ "path": "../navigation" },
{ "path": "../settings" },
{ "path": "../../packages/connect" },
{ "path": "../../packages/device-utils" },
{ "path": "../../packages/styles" }
],
"include": [".", "**/*.json"]
Expand Down
44 changes: 22 additions & 22 deletions suite-native/intl/src/en.ts
Original file line number Diff line number Diff line change
Expand Up @@ -357,6 +357,28 @@ export const en = {
},
confirmOnDeviceSheetTitle: 'Confirm on Trezor',
},
moduleDeviceSettings: {
title: 'Device info', // TODO: Change to "Device settings" once something may be changed
firmware: {
title: 'Firmware',
version: 'Version',
type: 'Type',
typeUniversal: 'Universal',
typeBitcoinOnly: 'Bitcoin-only',
upToDate: 'You’re all up to date',
newVersionAvailable: 'New version available ({version})',
},
updateHowTo: {
title: 'How to update firmware',
subtitle: 'Follow these steps:',
lines: {
1: '1. Connect Trezor to Desktop Suite',
2: '2. Navigate to Settings menu',
3: '3. Install new firmware',
},
button: 'Learn more @ Trezor.io',
},
},
moduleReceive: {
screenTitle: '{coinSymbol} Receive address',
accountNotFound: 'Account {accountKey} not found.',
Expand Down Expand Up @@ -767,28 +789,6 @@ export const en = {
upToDateFw: 'The firmware is up to date.',
outdatedFw: 'The firmware is outdated.',
goToAccessories: 'Get swag for your device @ Trezor Shop',
updateHowTo: {
title: 'How to update firmware',
subtitle: 'Follow these steps:',
lines: {
1: '1. Connect Trezor to Desktop Suite',
2: '2. Navigate to Settings menu',
3: '3. Install new firmware',
},
button: 'Learn more @ Trezor.io',
},
},
deviceSettings: {
title: 'Device info', // TODO: Change to "Device settings" once something may be changed
firmware: {
title: 'Firmware',
version: 'Version',
type: 'Type',
typeUniversal: 'Universal',
typeBitcoinOnly: 'Bitcoin-only',
upToDate: 'You’re all up to date',
newVersionAvailable: 'New version available ({version})',
},
},
qrCode: {
addressCopied: 'Address copied',
Expand Down
29 changes: 29 additions & 0 deletions suite-native/module-device-settings/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
{
"name": "@suite-native/module-device-settings",
"version": "1.0.0",
"private": true,
"license": "See LICENSE.md in repo root",
"sideEffects": false,
"main": "src/index",
"scripts": {
"depcheck": "yarn g:depcheck",
"lint:js": "yarn g:eslint '**/*.{ts,tsx,js}'",
"type-check": "yarn g:tsc --build"
},
"dependencies": {
"@mobily/ts-belt": "^3.13.1",
"@react-navigation/native": "6.1.18",
"@suite-common/icons-deprecated": "workspace:*",
"@suite-common/suite-utils": "workspace:*",
"@suite-common/wallet-core": "workspace:*",
"@suite-native/atoms": "workspace:*",
"@suite-native/device": "workspace:*",
"@suite-native/intl": "workspace:*",
"@suite-native/link": "workspace:*",
"@suite-native/navigation": "workspace:*",
"@trezor/device-utils": "workspace:*",
"@trezor/styles": "workspace:*",
"react": "18.2.0",
"react-redux": "8.0.7"
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ import { useSelector } from 'react-redux';

import { G } from '@mobily/ts-belt';

import { getFwUpdateVersion } from '@suite-common/suite-utils';
import { deviceModelToIconName } from '@suite-common/icons-deprecated';
import { getFwUpdateVersion } from '@suite-common/suite-utils';
import {
selectDevice,
selectDeviceModel,
Expand Down Expand Up @@ -50,8 +50,8 @@ export const DeviceFirmwareCard = () => {

const firmwareVersion = getFirmwareVersion(device);
const firmwareTypeTranslationId = hasBitcoinOnlyFirmware(device)
? 'deviceSettings.firmware.typeBitcoinOnly'
: 'deviceSettings.firmware.typeUniversal';
? 'moduleDeviceSettings.firmware.typeBitcoinOnly'
: 'moduleDeviceSettings.firmware.typeUniversal';

const firmwareUpdateProps = (() => {
if (G.isNotNullable(deviceReleaseInfo)) {
Expand All @@ -61,7 +61,7 @@ export const DeviceFirmwareCard = () => {
return {
title: (
<Translation
id="deviceSettings.firmware.newVersionAvailable"
id="moduleDeviceSettings.firmware.newVersionAvailable"
values={{ version: getFwUpdateVersion(device) }}
/>
),
Expand All @@ -70,7 +70,7 @@ export const DeviceFirmwareCard = () => {
}

return {
title: <Translation id="deviceSettings.firmware.upToDate" />,
title: <Translation id="moduleDeviceSettings.firmware.upToDate" />,
variant: 'success',
} as const;
}
Expand All @@ -81,16 +81,16 @@ export const DeviceFirmwareCard = () => {
return (
<DeviceSettingsCard
icon={deviceModelToIconName(deviceModel)}
title={<Translation id="deviceSettings.firmware.title" />}
title={<Translation id="moduleDeviceSettings.firmware.title" />}
alertBoxProps={firmwareUpdateProps}
>
<HStack marginTop="sp12" spacing="sp2">
<FirmwareInfo
label={<Translation id="deviceSettings.firmware.version" />}
label={<Translation id="moduleDeviceSettings.firmware.version" />}
value={firmwareVersion}
/>
<FirmwareInfo
label={<Translation id="deviceSettings.firmware.type" />}
label={<Translation id="moduleDeviceSettings.firmware.type" />}
value={<Translation id={firmwareTypeTranslationId} />}
/>
</HStack>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export const DeviceSettingsCard = ({
const { applyStyle } = useNativeStyles();

return (
<Card noPadding>
<Card borderColor="borderElevation1" noPadding>
<HStack margin="sp16" spacing="sp12">
<Box marginVertical="sp2">
<Icon name={icon} size="mediumLarge" />
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { ReactNode } from 'react';

import { BottomSheet, VStack, Box, Button, Text } from '@suite-native/atoms';
import { BottomSheet, Box, Button, Text, VStack } from '@suite-native/atoms';
import { Translation } from '@suite-native/intl';
import { useOpenLink } from '@suite-native/link';

Expand All @@ -27,17 +27,17 @@ export const HowToUpdateBottomSheet = ({
<VStack spacing="sp24">
<VStack paddingHorizontal="sp24">
<Text variant="callout">
<Translation id="deviceInfo.updateHowTo.subtitle" />
<Translation id="moduleDeviceSettings.updateHowTo.subtitle" />
</Text>
<Box>
<Text color="textSubdued">
<Translation id="deviceInfo.updateHowTo.lines.1" />
<Translation id="moduleDeviceSettings.updateHowTo.lines.1" />
</Text>
<Text color="textSubdued">
<Translation id="deviceInfo.updateHowTo.lines.2" />
<Translation id="moduleDeviceSettings.updateHowTo.lines.2" />
</Text>
<Text color="textSubdued">
<Translation id="deviceInfo.updateHowTo.lines.3" />
<Translation id="moduleDeviceSettings.updateHowTo.lines.3" />
</Text>
</Box>
</VStack>
Expand All @@ -46,7 +46,7 @@ export const HowToUpdateBottomSheet = ({
onPress={handleHelpClick}
viewRight="arrowUpRight"
>
<Translation id="deviceInfo.updateHowTo.button" />
<Translation id="moduleDeviceSettings.updateHowTo.button" />
</Button>
</VStack>
</BottomSheet>
Expand Down
1 change: 1 addition & 0 deletions suite-native/module-device-settings/src/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './screens/DeviceInfoModalScreen';
Loading

0 comments on commit 2cea609

Please sign in to comment.