Updated on 2026-08-14

core/ui/src/main/java/com/tangem/core/ui/components/notifications/Notification.kt

@@ -19,6 +19,8 @@ import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider
 import com.tangem.core.ui.R
 import com.tangem.core.ui.components.SpacerH2
+import com.tangem.core.ui.extensions.TextReference
+import com.tangem.core.ui.extensions.resolveReference
 import com.tangem.core.ui.res.TangemColorPalette
 import com.tangem.core.ui.res.TangemTheme
 
@@ -43,10 +45,10 @@ fun Notification(state: NotificationState, modifier: Modifier = Modifier) {
             )
             .clickable(
                 enabled = when (state) {
-                    is NotificationState.Simple -> false
-                    is NotificationState.Action -> true
+                    is NotificationState.Clickable -> true
+                    is NotificationState.Simple, is NotificationState.Closable -> false
                 },
-                onClick = if (state is NotificationState.Action) {
+                onClick = if (state is NotificationState.Clickable) {
                     state.onClick
                 } else {
                     {}
@@ -67,12 +69,23 @@ fun Notification(state: NotificationState, modifier: Modifier = Modifier) {
             )
 
             NotificationInfoBlock(
-                title = state.title,
-                subtitle = state.subtitle,
+                title = state.title.resolveReference(),
+                subtitle = state.subtitle?.resolveReference(),
                 modifier = Modifier.align(alignment = Alignment.CenterStart),
             )
 
-            if (state is NotificationState.Action) {
+            if (state is NotificationState.Closable) {
+                Icon(
+                    modifier = Modifier
+                        .size(size = TangemTheme.dimens.size20)
+                        .align(alignment = Alignment.TopEnd),
+                    painter = painterResource(id = R.drawable.ic_close_24),
+                    contentDescription = null,
+                    tint = TangemTheme.colors.icon.informative,
+                )
+            }
+
+            if (state is NotificationState.Clickable) {
                 Icon(
                     modifier = Modifier
                         .size(size = TangemTheme.dimens.size20)
@@ -149,30 +162,50 @@ private fun Preview_WarningNotification_Dark(
 private class NotificationStateProvider : CollectionPreviewParameterProvider<NotificationState>(
     collection = listOf(
         NotificationState.Simple(
-            title = "Your wallet hasn’t been backed up",
-            subtitle = "Lorem ipsum dolor sit amet, consectetur " +
-                "adipiscing elit, sed do eiusmod tempor incididunt ut labore et...",
+            title = TextReference.Str(value = "Your wallet hasn’t been backed up"),
+            subtitle = TextReference.Str(
+                value = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt " +
+                    "ut labore et...",
+            ),
             iconResId = R.drawable.img_attention_20,
         ),
         NotificationState.Simple(
-            title = "Your wallet hasn’t been backed up",
+            title = TextReference.Str("Your wallet hasn’t been backed up"),
             subtitle = null,
             iconResId = R.drawable.ic_alert_circle_24,
             tint = TangemColorPalette.Amaranth,
         ),
-        NotificationState.Action(
-            title = "Your wallet hasn’t been backed up",
-            subtitle = "Lorem ipsum dolor sit amet, consectetur " +
-                "adipiscing elit, sed do eiusmod tempor incididunt ut labore et...",
+        NotificationState.Clickable(
+            title = TextReference.Str(value = "Your wallet hasn’t been backed up"),
+            subtitle = TextReference.Str(
+                value = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt " +
+                    "ut labore et...",
+            ),
             iconResId = R.drawable.img_attention_20,
             onClick = {},
         ),
-        NotificationState.Action(
-            title = "Your wallet hasn’t been backed up",
+        NotificationState.Clickable(
+            title = TextReference.Str(value = "Your wallet hasn’t been backed up"),
             subtitle = null,
             iconResId = R.drawable.ic_alert_circle_24,
             tint = TangemColorPalette.Amaranth,
             onClick = {},
         ),
+        NotificationState.Closable(
+            title = TextReference.Str(value = "Your wallet hasn’t been backed up"),
+            subtitle = TextReference.Str(
+                value = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt " +
+                    "ut labore et...",
+            ),
+            iconResId = R.drawable.img_attention_20,
+            onCloseClick = {},
+        ),
+        NotificationState.Closable(
+            title = TextReference.Str(value = "Your wallet hasn’t been backed up"),
+            subtitle = null,
+            iconResId = R.drawable.ic_alert_circle_24,
+            tint = TangemColorPalette.Amaranth,
+            onCloseClick = {},
+        ),
     ),
 )

core/ui/src/main/java/com/tangem/core/ui/components/notifications/NotificationState.kt

@@ -2,6 +2,7 @@ package com.tangem.core.ui.components.notifications
 
 import androidx.annotation.DrawableRes
 import androidx.compose.ui.graphics.Color
+import com.tangem.core.ui.extensions.TextReference
 
 /**
  * Notification component state
@@ -14,8 +15,8 @@ import androidx.compose.ui.graphics.Color
 [REDACTED_AUTHOR]
  */
 sealed class NotificationState(
-    open val title: String,
-    open val subtitle: String? = null,
+    open val title: TextReference,
+    open val subtitle: TextReference? = null,
     @DrawableRes open val iconResId: Int,
     open val tint: Color? = null,
 ) {
@@ -29,8 +30,8 @@ sealed class NotificationState(
      * @property tint      icon tint
      */
     data class Simple(
-        override val title: String,
-        override val subtitle: String? = null,
+        override val title: TextReference,
+        override val subtitle: TextReference? = null,
         @DrawableRes override val iconResId: Int,
         override val tint: Color? = null,
     ) : NotificationState(title, subtitle, iconResId, tint)
@@ -42,13 +43,30 @@ sealed class NotificationState(
      * @property subtitle  subtitle
      * @property iconResId icon resource id
      * @property tint      icon tint
-     * @param onClick      lambda be invoked when notification component is clicked
+     * @property onClick   lambda be invoked when notification component is clicked
      */
-    data class Action(
-        override val title: String,
-        override val subtitle: String? = null,
+    data class Clickable(
+        override val title: TextReference,
+        override val subtitle: TextReference? = null,
         @DrawableRes override val iconResId: Int,
         override val tint: Color? = null,
         val onClick: () -> Unit,
     ) : NotificationState(title, subtitle, iconResId, tint)
+
+    /**
+     * Closable notification state
+     *
+     * @property title        title
+     * @property subtitle     subtitle
+     * @property iconResId    icon resource id
+     * @property tint         icon tint
+     * @property onCloseClick lambda be invoked when close button is clicked
+     */
+    data class Closable(
+        override val title: TextReference,
+        override val subtitle: TextReference? = null,
+        @DrawableRes override val iconResId: Int,
+        override val tint: Color? = null,
+        val onCloseClick: (() -> Unit)? = null,
+    ) : NotificationState(title, subtitle, iconResId, tint)
 }

core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt

@@ -102,6 +102,7 @@ data class TangemDimens internal constructor(
     val spacing34: Dp = 34.dp,
     val spacing36: Dp = 34.dp,
     val spacing38: Dp = 38.dp,
+    val spacing40: Dp = 40.dp,
     val spacing44: Dp = 44.dp,
     val spacing50: Dp = 50.dp,
     val spacing52: Dp = 52.dp,