Updated on 2026-08-14

features/hot-wallet/impl/src/main/kotlin/com/tangem/features/hotwallet/addexistingwallet/start/ui/AddExistingWalletStartContent.kt

@@ -62,7 +62,7 @@ internal fun AddExistingWalletStartContent(state: AddExistingWalletStartUM, modi
             )
             OptionBlock(
                 modifier = Modifier
-                    .padding(top = 24.dp),
+                    .padding(top = 32.dp),
                 backgroundColor = TangemTheme.colors.background.secondary,
                 title = stringResourceSafe(R.string.wallet_import_seed_title),
                 description = stringResourceSafe(R.string.wallet_import_seed_description),
@@ -71,6 +71,8 @@ internal fun AddExistingWalletStartContent(state: AddExistingWalletStartUM, modi
                 enabled = true,
             )
             OptionBlock(
+                modifier = Modifier
+                    .padding(top = 8.dp),
                 backgroundColor = TangemTheme.colors.background.secondary,
                 title = stringResourceSafe(R.string.wallet_import_scan_title),
                 description = stringResourceSafe(R.string.wallet_import_scan_description),
@@ -99,6 +101,8 @@ internal fun AddExistingWalletStartContent(state: AddExistingWalletStartUM, modi
                 enabled = true,
             )
             OptionBlock(
+                modifier = Modifier
+                    .padding(top = 8.dp),
                 backgroundColor = TangemTheme.colors.background.secondary,
                 title = stringResourceSafe(R.string.wallet_import_google_drive_title),
                 description = stringResourceSafe(R.string.wallet_import_google_drive_description),

features/hot-wallet/impl/src/main/kotlin/com/tangem/features/hotwallet/common/ui/OptionBlock.kt

@@ -1,6 +1,5 @@
 package com.tangem.features.hotwallet.common.ui
 
-import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -8,8 +7,8 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
-import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.unit.dp
@@ -30,33 +29,11 @@ internal fun OptionBlock(
     backgroundColor: Color,
     modifier: Modifier = Modifier,
 ) {
-    val backgroundColor by animateColorAsState(
-        targetValue = if (enabled) {
-            backgroundColor
-        } else {
-            backgroundColor.copy(alpha = DISABLED_COLORS_ALPHA)
-        },
-    )
-    val titleColor by animateColorAsState(
-        targetValue = if (enabled) {
-            TangemTheme.colors.text.primary1
-        } else {
-            TangemTheme.colors.text.primary1.copy(alpha = DISABLED_COLORS_ALPHA)
-        },
-    )
-    val descriptionColor by animateColorAsState(
-        targetValue = if (enabled) {
-            TangemTheme.colors.text.tertiary
-        } else {
-            TangemTheme.colors.text.tertiary.copy(alpha = DISABLED_COLORS_ALPHA)
-        },
-    )
-
     Column(
         modifier = modifier
             .fillMaxWidth()
-            .padding(top = 8.dp)
             .clip(TangemTheme.shapes.roundedCornersXMedium)
+            .alpha(if (enabled) 1f else DISABLED_COLORS_ALPHA)
             .background(
                 color = backgroundColor,
                 shape = TangemTheme.shapes.roundedCornersXMedium,
@@ -73,7 +50,7 @@ internal fun OptionBlock(
                     .padding(end = 4.dp),
                 text = title,
                 style = TangemTheme.typography.subtitle1,
-                color = titleColor,
+                color = TangemTheme.colors.text.primary1,
             )
             badge?.invoke()
         }
@@ -82,7 +59,7 @@ internal fun OptionBlock(
                 .padding(top = 4.dp),
             text = description,
             style = TangemTheme.typography.body2,
-            color = descriptionColor,
+            color = TangemTheme.colors.text.tertiary,
         )
     }
 }

features/hot-wallet/impl/src/main/kotlin/com/tangem/features/hotwallet/walletbackup/entity/WalletBackupUM.kt

@@ -9,6 +9,7 @@ internal data class WalletBackupUM(
     val googleDriveStatus: BackupStatus,
     val onRecoveryPhraseClick: () -> Unit,
     val onGoogleDriveClick: () -> Unit,
+    val onHardwareWalletClick: () -> Unit,
     val backedUp: Boolean,
 )
 

features/hot-wallet/impl/src/main/kotlin/com/tangem/features/hotwallet/walletbackup/model/WalletBackupModel.kt

@@ -52,6 +52,7 @@ internal class WalletBackupModel @Inject constructor(
             googleDriveStatus = BackupStatus.ComingSoon,
             onRecoveryPhraseClick = ::onRecoveryPhraseClick,
             onGoogleDriveClick = { },
+            onHardwareWalletClick = ::onHardwareWalletClick,
             backedUp = false,
         ),
     )
@@ -122,4 +123,8 @@ internal class WalletBackupModel @Inject constructor(
             uiMessageSender.send(makeBackupAtFirstAlertBS)
         }
     }
+
+    private fun onHardwareWalletClick() {
+        router.push(AppRoute.UpgradeWallet(params.userWalletId))
+    }
 }

features/hot-wallet/impl/src/main/kotlin/com/tangem/features/hotwallet/walletbackup/ui/WalletBackupContent.kt

@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.systemBarsPadding
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.tooling.preview.Preview
@@ -25,6 +26,7 @@ import com.tangem.core.ui.R
 import com.tangem.core.ui.components.label.Label
 import com.tangem.core.ui.components.label.entity.LabelStyle
 import com.tangem.core.ui.components.label.entity.LabelUM
+import com.tangem.core.ui.components.rows.NetworkTitle
 import com.tangem.core.ui.extensions.resourceReference
 
 @OptIn(ExperimentalMaterial3Api::class)
@@ -47,7 +49,8 @@ internal fun WalletBackupContent(state: WalletBackupUM, modifier: Modifier = Mod
                 .padding(horizontal = 16.dp),
         ) {
             OptionBlock(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .padding(top = 8.dp),
                 title = stringResourceSafe(R.string.hw_backup_seed_title),
                 description = stringResourceSafe(R.string.hw_backup_seed_description),
                 badge = {
@@ -59,7 +62,8 @@ internal fun WalletBackupContent(state: WalletBackupUM, modifier: Modifier = Mod
             )
 
             OptionBlock(
-                modifier = Modifier.fillMaxWidth(),
+                modifier = Modifier
+                    .padding(top = 8.dp),
                 title = stringResourceSafe(R.string.hw_backup_google_drive_title),
                 description = stringResourceSafe(R.string.hw_backup_google_drive_description),
                 badge = {
@@ -69,6 +73,26 @@ internal fun WalletBackupContent(state: WalletBackupUM, modifier: Modifier = Mod
                 enabled = state.googleDriveStatus != BackupStatus.ComingSoon,
                 backgroundColor = TangemTheme.colors.background.primary,
             )
+
+            NetworkTitle(
+                title = {
+                    Text(
+                        modifier = Modifier,
+                        text = stringResourceSafe(R.string.express_provider_recommended),
+                        style = TangemTheme.typography.subtitle2,
+                        color = TangemTheme.colors.text.tertiary,
+                    )
+                },
+            )
+            OptionBlock(
+                modifier = Modifier.fillMaxWidth(),
+                title = stringResourceSafe(R.string.hw_backup_hardware_title),
+                description = stringResourceSafe(R.string.hw_backup_hardware_description),
+                badge = null,
+                onClick = state.onHardwareWalletClick,
+                enabled = true,
+                backgroundColor = TangemTheme.colors.background.primary,
+            )
         }
     }
 }
@@ -97,6 +121,7 @@ private class WalletBackupUMProvider : CollectionPreviewParameterProvider<Wallet
             onBackClick = {},
             onRecoveryPhraseClick = {},
             onGoogleDriveClick = {},
+            onHardwareWalletClick = {},
             backedUp = false,
         ),
         WalletBackupUM(
@@ -112,6 +137,7 @@ private class WalletBackupUMProvider : CollectionPreviewParameterProvider<Wallet
             onBackClick = {},
             onRecoveryPhraseClick = {},
             onGoogleDriveClick = {},
+            onHardwareWalletClick = {},
             backedUp = false,
         ),
         WalletBackupUM(
@@ -127,6 +153,7 @@ private class WalletBackupUMProvider : CollectionPreviewParameterProvider<Wallet
             onBackClick = {},
             onRecoveryPhraseClick = {},
             onGoogleDriveClick = {},
+            onHardwareWalletClick = {},
             backedUp = false,
         ),
     ),

features/wallet-settings/impl/src/main/kotlin/com/tangem/feature/walletsettings/model/WalletSettingsModel.kt

@@ -369,7 +369,7 @@ internal class WalletSettingsModel @Inject constructor(
     }
 
     private fun onUpgradeWalletClick() {
-        // TODO [REDACTED_TASK_KEY]
+        router.push(AppRoute.UpgradeWallet(params.userWalletId))
     }
 
     private fun onDismissUpgradeWalletClick() {