diff --git a/suite-common/message-system/src/messageSystemSelectors.ts b/suite-common/message-system/src/messageSystemSelectors.ts index 49e52594e5d..1f6787c6f1d 100644 --- a/suite-common/message-system/src/messageSystemSelectors.ts +++ b/suite-common/message-system/src/messageSystemSelectors.ts @@ -4,7 +4,7 @@ import { Message, Category } from '@suite-common/suite-types'; import { ContextDomain, FeatureDomain, MessageSystemRootState } from './messageSystemTypes'; // Create app-specific selectors with correct types -const createMemoizedSelector = createWeakMapSelector.withTypes(); +export const createMemoizedSelector = createWeakMapSelector.withTypes(); // Basic selectors don't need memoization export const selectMessageSystemConfig = (state: MessageSystemRootState) => diff --git a/suite-native/app/src/App.tsx b/suite-native/app/src/App.tsx index f73abde5ba0..645fdeeb4c5 100644 --- a/suite-native/app/src/App.tsx +++ b/suite-native/app/src/App.tsx @@ -10,7 +10,7 @@ import { BottomSheetModalProvider } from '@gorhom/bottom-sheet'; import { selectIsAppReady, selectIsConnectInitialized, StoreProvider } from '@suite-native/state'; import { FormatterProvider } from '@suite-common/formatters'; import { NavigationContainerWithAnalytics } from '@suite-native/navigation'; -import { FeatureMessageScreen, MessageSystemBannerRenderer } from '@suite-native/message-system'; +import { KillswitchMessageScreen, MessageSystemBannerRenderer } from '@suite-native/message-system'; import { configureNetInfo, OfflineBanner } from '@suite-native/connection-status'; import { IntlProvider } from '@suite-native/intl'; import { isDebugEnv } from '@suite-native/config'; @@ -71,7 +71,7 @@ const AppComponent = () => { {/* NOTE: Rendered as last item so that it covers the whole app screen */} - + ); }; diff --git a/suite-native/message-system/src/components/FeatureMessageScreen.tsx b/suite-native/message-system/src/components/KillswitchMessageScreen.tsx similarity index 78% rename from suite-native/message-system/src/components/FeatureMessageScreen.tsx rename to suite-native/message-system/src/components/KillswitchMessageScreen.tsx index bcb0b23a7ef..239c2d9a168 100644 --- a/suite-native/message-system/src/components/FeatureMessageScreen.tsx +++ b/suite-native/message-system/src/components/KillswitchMessageScreen.tsx @@ -6,10 +6,12 @@ import { IconName } from '@suite-native/icons'; import { Box, Button, PictogramTitleHeader, PictogramVariant, VStack } from '@suite-native/atoms'; import { prepareNativeStyle, useNativeStyles } from '@trezor/styles'; import { Variant } from '@suite-common/suite-types'; -import { messageSystemActions, selectActiveFeatureMessages } from '@suite-common/message-system'; +import { messageSystemActions } from '@suite-common/message-system'; import { Translation } from '@suite-native/intl'; import { useOpenLink } from '@suite-native/link'; +import { selectActiveKillswitchMessages } from '../selectors'; + const screenStyle = prepareNativeStyle(utils => ({ flexGrow: 1, justifyContent: 'center', @@ -46,16 +48,15 @@ const iconVariantMap = { critical: 'warning', } as const satisfies Record; -export const FeatureMessageScreen = () => { +export const KillswitchMessageScreen = () => { const dispatch = useDispatch(); const openLink = useOpenLink(); - const activeFeatureMessages = useSelector(selectActiveFeatureMessages); - const firstFeatureMessage = A.head(activeFeatureMessages); + const killswitch = A.head(useSelector(selectActiveKillswitchMessages)); const { applyStyle } = useNativeStyles(); - if (!firstFeatureMessage) return null; + if (!killswitch) return null; const { id: messageId, @@ -63,14 +64,9 @@ export const FeatureMessageScreen = () => { headline, content, cta, - dismissible: isDismissable, + dismissible: isDismissible, category, - feature, - } = firstFeatureMessage; - - const isKillswitch = A.isNotEmpty( - feature?.filter(item => item.domain === 'killswitch' && item.flag) ?? [], - ); + } = killswitch; // TODO: We use only English locale in suite-native so far. When the localization to other // languages is implemented, the language selection logic has to be added here. @@ -91,7 +87,7 @@ export const FeatureMessageScreen = () => { const isCtaVisible = ctaLabel && ctaLink; const handleDismiss = () => { - if (!isDismissable) return; + if (!isDismissible) return; const categories = G.isArray(category) ? category : [category]; categories.forEach(item => { @@ -104,20 +100,15 @@ export const FeatureMessageScreen = () => { }); }; - const defaultTitle = isKillswitch ? ( - - ) : undefined; - const defaultContent = isKillswitch ? ( - - ) : undefined; - return ( } variant={variantMap[variant]} - subtitle={messageContent ?? defaultContent} + subtitle={ + messageContent ?? + } icon={iconVariantMap[variant]} titleVariant="titleMedium" /> @@ -129,7 +120,7 @@ export const FeatureMessageScreen = () => { {ctaLabel} )} - {isDismissable && ( + {isDismissible && ( diff --git a/suite-native/message-system/src/index.ts b/suite-native/message-system/src/index.ts index 8f51d40abfe..0f9d1a2c732 100644 --- a/suite-native/message-system/src/index.ts +++ b/suite-native/message-system/src/index.ts @@ -1,3 +1,3 @@ export * from './messageSystemMiddleware'; export * from './components/MessageSystemBannerRenderer'; -export * from './components/FeatureMessageScreen'; +export * from './components/KillswitchMessageScreen'; diff --git a/suite-native/message-system/src/selectors.ts b/suite-native/message-system/src/selectors.ts new file mode 100644 index 00000000000..708494d3de8 --- /dev/null +++ b/suite-native/message-system/src/selectors.ts @@ -0,0 +1,9 @@ +import { createMemoizedSelector, selectActiveFeatureMessages } from '@suite-common/message-system'; + +export const selectActiveKillswitchMessages = createMemoizedSelector( + [selectActiveFeatureMessages], + messages => + messages.filter( + m => m.feature?.filter(item => item.domain === 'killswitch' && item.flag) ?? false, + ), +);