diff --git a/suite-native/atoms/src/Card/CompactCardWithIconLayout.tsx b/suite-native/atoms/src/Card/CompactCardWithIconLayout.tsx index 0c2f9f9da4..d9ab4deea6 100644 --- a/suite-native/atoms/src/Card/CompactCardWithIconLayout.tsx +++ b/suite-native/atoms/src/Card/CompactCardWithIconLayout.tsx @@ -1,8 +1,6 @@ import { ReactNode } from 'react'; import { Pressable, PressableProps } from 'react-native'; -import { useSelector } from 'react-redux'; -import { selectHasRunningDiscovery } from '@suite-common/wallet-core'; import { Icon, IconName } from '@suite-native/icons'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Color } from '@trezor/theme'; @@ -17,10 +15,11 @@ import { Text } from '../Text'; const ICON_WRAPPER_SIZE = 48; type CardVariant = 'normal' | 'danger'; -type CompactCardWithIconLayoutProps = Omit & { +export type CompactCardWithIconLayoutProps = Omit & { icon: IconName; title: ReactNode; subtitle: ReactNode; + isDisabled?: boolean; alertBoxProps?: Omit; onPress?: () => void; variant?: CardVariant; @@ -68,14 +67,14 @@ export const CompactCardWithIconLayout = ({ subtitle, alertBoxProps, onPress, + isDisabled = false, variant = 'normal', ...pressableProps }: CompactCardWithIconLayoutProps) => { const { applyStyle } = useNativeStyles(); - const isDiscoveryRunning = useSelector(selectHasRunningDiscovery); return ( - + @@ -91,7 +90,7 @@ export const CompactCardWithIconLayout = ({ {subtitle} - {isDiscoveryRunning ? ( + {isDisabled ? ( ) : ( diff --git a/suite-native/module-device-settings/src/components/DeviceAuthenticityCard.tsx b/suite-native/module-device-settings/src/components/DeviceAuthenticityCard.tsx index 836946d811..44588536b0 100644 --- a/suite-native/module-device-settings/src/components/DeviceAuthenticityCard.tsx +++ b/suite-native/module-device-settings/src/components/DeviceAuthenticityCard.tsx @@ -1,6 +1,5 @@ import { useNavigation } from '@react-navigation/native'; -import { CompactCardWithIconLayout } from '@suite-native/atoms'; import { Translation } from '@suite-native/intl'; import { DeviceAuthenticityStackParamList, @@ -10,6 +9,8 @@ import { StackToStackCompositeNavigationProps, } from '@suite-native/navigation'; +import { DeviceSettingsItemCard } from './DeviceSettingsItemCard'; + type NavigationProp = StackToStackCompositeNavigationProps< DeviceAuthenticityStackParamList, DeviceAuthenticityStackRoutes, @@ -24,7 +25,7 @@ export const DeviceAuthenticityCard = () => { }; return ( - } diff --git a/suite-native/module-device-settings/src/components/DeviceFirmwareCard.tsx b/suite-native/module-device-settings/src/components/DeviceFirmwareCard.tsx index f15b96780e..cbe809b8ce 100644 --- a/suite-native/module-device-settings/src/components/DeviceFirmwareCard.tsx +++ b/suite-native/module-device-settings/src/components/DeviceFirmwareCard.tsx @@ -10,7 +10,7 @@ import { selectIsDeviceBackedUp, selectSelectedDevice, } from '@suite-common/wallet-core'; -import { CompactCardWithIconLayout, InlineAlertBoxProps } from '@suite-native/atoms'; +import { InlineAlertBoxProps } from '@suite-native/atoms'; import { useIsFirmwareUpdateFeatureEnabled } from '@suite-native/firmware'; import { Translation } from '@suite-native/intl'; import { @@ -20,6 +20,8 @@ import { } from '@suite-native/navigation'; import { getFirmwareVersion } from '@trezor/device-utils'; +import { DeviceSettingsItemCard } from './DeviceSettingsItemCard'; + type NavigationProp = StackNavigationProps< DeviceSettingsStackParamList, DeviceSettingsStackRoutes.ConfirmFirmwareUpdate @@ -71,7 +73,7 @@ export const DeviceFirmwareCard = () => { })(); return ( - } alertBoxProps={firmwareUpdateProps} diff --git a/suite-native/module-device-settings/src/components/DevicePinProtectionCard.tsx b/suite-native/module-device-settings/src/components/DevicePinProtectionCard.tsx index 2230a98425..fdc7b8a2d2 100644 --- a/suite-native/module-device-settings/src/components/DevicePinProtectionCard.tsx +++ b/suite-native/module-device-settings/src/components/DevicePinProtectionCard.tsx @@ -7,7 +7,7 @@ import { selectIsDeviceProtectedByPin, selectSelectedDevice, } from '@suite-common/wallet-core'; -import { CompactCardWithIconLayout, InlineAlertBoxProps } from '@suite-native/atoms'; +import { InlineAlertBoxProps } from '@suite-native/atoms'; import { Translation } from '@suite-native/intl'; import { DeviceSettingsStackParamList, @@ -15,6 +15,8 @@ import { StackNavigationProps, } from '@suite-native/navigation'; +import { DeviceSettingsItemCard } from './DeviceSettingsItemCard'; + type NavigationProp = StackNavigationProps< DeviceSettingsStackParamList, DeviceSettingsStackRoutes.DeviceSettings @@ -58,7 +60,7 @@ export const DevicePinProtectionCard = () => { }; return ( - } subtitle={ diff --git a/suite-native/module-device-settings/src/components/DeviceSettingsItemCard.tsx b/suite-native/module-device-settings/src/components/DeviceSettingsItemCard.tsx new file mode 100644 index 0000000000..13645a692a --- /dev/null +++ b/suite-native/module-device-settings/src/components/DeviceSettingsItemCard.tsx @@ -0,0 +1,25 @@ +import { useSelector } from 'react-redux'; + +import { selectHasRunningDiscovery } from '@suite-common/wallet-core'; +import { CompactCardWithIconLayout, CompactCardWithIconLayoutProps } from '@suite-native/atoms'; + +export const DeviceSettingsItemCard = ({ + icon, + title, + onPress, + testID, + subtitle, +}: CompactCardWithIconLayoutProps) => { + const hasRunningDiscovery = useSelector(selectHasRunningDiscovery); + + return ( + + ); +}; diff --git a/suite-native/module-device-settings/src/components/WipeDeviceCard.tsx b/suite-native/module-device-settings/src/components/WipeDeviceCard.tsx index 365bd8794b..1958314462 100644 --- a/suite-native/module-device-settings/src/components/WipeDeviceCard.tsx +++ b/suite-native/module-device-settings/src/components/WipeDeviceCard.tsx @@ -1,6 +1,5 @@ import { useNavigation } from '@react-navigation/native'; -import { CompactCardWithIconLayout } from '@suite-native/atoms'; import { Translation } from '@suite-native/intl'; import { DeviceSettingsStackParamList, @@ -9,6 +8,8 @@ import { WipeDeviceStackRoutes, } from '@suite-native/navigation'; +import { DeviceSettingsItemCard } from './DeviceSettingsItemCard'; + type NavigationProp = StackNavigationProps< DeviceSettingsStackParamList, DeviceSettingsStackRoutes.DeviceSettings @@ -24,7 +25,7 @@ export const WipeDeviceCard = () => { }; return ( - } icon="warningOctagon" subtitle={}