Updated on 2026-08-14

app/src/main/java/com/tangem/tap/common/extensions/compose/Color.kt

@@ -0,0 +1,16 @@
+package com.tangem.tap.common.extensions.compose
+
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.toArgb
+import androidx.core.graphics.alpha
+import androidx.core.graphics.blue
+import androidx.core.graphics.green
+import androidx.core.graphics.red
+
+/**
+[REDACTED_AUTHOR]
+ */
+fun Color.argb(): Int {
+    val argb = this.toArgb()
+    return android.graphics.Color.argb(argb.alpha, argb.red, argb.green, argb.blue)
+}

app/src/main/java/com/tangem/tap/features/home/compose/StoriesGeneralContent.kt

@@ -1,5 +1,11 @@
 package com.tangem.tap.features.home.compose
 
+import android.content.Context
+import android.graphics.Typeface
+import android.util.TypedValue
+import android.view.View
+import android.view.ViewGroup
+import android.widget.TextView
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.*
 import androidx.compose.material.Text
@@ -14,6 +20,9 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import androidx.compose.ui.viewinterop.AndroidView
+import com.tangem.tangem_sdk_new.extensions.dpToPx
+import com.tangem.tap.common.extensions.compose.argb
 import com.tangem.wallet.R
 
 @Composable
@@ -22,8 +31,9 @@ fun StoriesGeneralContent(
     subtitleText: String,
     imageSource: Int?,
     isDarkBackground: Boolean,
+    subtitleTextId: Int? = null,
     imageComposable: (() -> Unit)? = null,
-    ) {
+) {
     Column(
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.Center,
@@ -45,15 +55,7 @@ fun StoriesGeneralContent(
 
         Spacer(modifier = Modifier.size(16.dp))
 
-        Text(
-            text = subtitleText,
-            fontSize = 20.sp,
-            fontWeight = FontWeight.Normal,
-            modifier = Modifier
-                .padding(start = 40.dp, end = 40.dp),
-            color = Color(0xFFA6AAAD),
-            textAlign = TextAlign.Center
-        )
+        SubtitleText(subtitleText, subtitleTextId)
 
         Spacer(modifier = Modifier.size(25.dp))
 
@@ -61,7 +63,7 @@ fun StoriesGeneralContent(
             Image(
                 painter = painterResource(id = imageSource),
                 contentDescription = null,
-                contentScale = if(isDarkBackground) ContentScale.Inside else ContentScale.FillWidth,
+                contentScale = if (isDarkBackground) ContentScale.Inside else ContentScale.FillWidth,
                 modifier = Modifier.fillMaxWidth()
             )
         }
@@ -69,6 +71,34 @@ fun StoriesGeneralContent(
     }
 }
 
+@Composable
+fun SubtitleText(subtitleText: String, subtitleTextId: Int?) {
+    val color = Color(0xFFA6AAAD)
+
+    if (subtitleTextId == null) {
+        Text(
+            text = subtitleText,
+            fontSize = 20.sp,
+            fontWeight = FontWeight.Normal,
+            modifier = Modifier.padding(start = 40.dp, end = 40.dp),
+            color = color,
+            textAlign = TextAlign.Center
+        )
+    } else {
+        HtmlText(subtitleTextId) { context ->
+            val padding = context.dpToPx(40f).toInt()
+            TextView(context).apply {
+                layoutParams = ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT)
+                setPadding(padding, 0, padding, 0)
+                textAlignment = View.TEXT_ALIGNMENT_CENTER
+                typeface = Typeface.DEFAULT
+                setTextSize(TypedValue.COMPLEX_UNIT_SP, 20f)
+                setTextColor(color.argb())
+            }
+        }
+    }
+}
+
 @Composable
 fun StoriesRevolutionaryWallet() {
     StoriesGeneralContent(
@@ -85,6 +115,7 @@ fun StoriesUltraSecureBackup() {
         titleText = stringResource(id = R.string.story_backup_title),
         subtitleText = stringResource(id = R.string.story_backup_description),
         imageSource = R.drawable.floating_cards,
+        subtitleTextId = R.string.story_backup_description,
         isDarkBackground = false
     )
 }
@@ -117,4 +148,13 @@ fun StoriesWalletForEveryone() {
         imageSource = R.drawable.wallet_for_everyone,
         isDarkBackground = true
     )
+}
+
+@Composable
+fun HtmlText(
+    stringResId: Int,
+    modifier: Modifier = Modifier,
+    factory: (Context) -> TextView
+) {
+    AndroidView(factory, modifier) { it.text = it.context.getText(stringResId) }
 }