Updated on 2026-08-14

app/src/main/java/com/tangem/tap/features/walletSelector/ui/components/WallectSelectorScreenContent.kt

@@ -1,11 +1,23 @@
 package com.tangem.tap.features.walletSelector.ui.components
 
-import androidx.compose.foundation.*
-import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.background
+import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.runtime.rememberUpdatedState
@@ -15,7 +27,11 @@ import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
-import com.tangem.core.ui.components.*
+import com.tangem.core.ui.components.PrimaryButton
+import com.tangem.core.ui.components.SecondaryButtonIconRight
+import com.tangem.core.ui.components.SpacerH16
+import com.tangem.core.ui.components.SpacerH24
+import com.tangem.core.ui.components.SpacerWMax
 import com.tangem.core.ui.components.atoms.Hand
 import com.tangem.core.ui.res.TangemTheme
 import com.tangem.tap.features.details.ui.cardsettings.resolveReference
@@ -35,31 +51,16 @@ internal fun WalletSelectorScreenContent(
     onEditSelectedWalletClick: () -> Unit,
     onDeleteSelectedWalletsClick: () -> Unit,
 ) {
-    val editingWalletsSize by rememberUpdatedState(newValue = state.editingWalletsIds.size)
-
     Column(modifier = modifier) {
-        Hand()
-        SpacerH12()
-        if (editingWalletsSize > 0) {
-            EditWalletsBar(
-                modifier = Modifier
-                    .padding(horizontal = TangemTheme.dimens.spacing16)
-                    .fillMaxWidth(),
-                editingWalletsSize = editingWalletsSize,
-                onClearSelectedClick = onClearSelectedClick,
-                onEditSelectedWalletClick = onEditSelectedWalletClick,
-                onDeleteSelectedWalletsClick = onDeleteSelectedWalletsClick,
-            )
-        } else {
-            Text(
-                modifier = Modifier.fillMaxWidth(),
-                text = stringResource(R.string.user_wallet_list_title),
-                style = TangemTheme.typography.subtitle1,
-                color = TangemTheme.colors.text.primary1,
-                textAlign = TextAlign.Center,
-            )
-        }
-        SpacerH12()
+        Header(
+            modifier = Modifier
+                .padding(horizontal = TangemTheme.dimens.spacing16)
+                .fillMaxWidth(),
+            editingWalletsIds = state.editingWalletsIds,
+            onClearSelectedClick = onClearSelectedClick,
+            onEditSelectedWalletClick = onEditSelectedWalletClick,
+            onDeleteSelectedWalletsClick = onDeleteSelectedWalletsClick,
+        )
         Column(
             modifier = Modifier
                 .verticalScroll(
@@ -76,28 +77,15 @@ internal fun WalletSelectorScreenContent(
                 onWalletLongClick = onWalletLongClick,
             )
             SpacerH24()
-            if (state.isLocked) {
-                PrimaryButton(
-                    modifier = Modifier
-                        .padding(horizontal = TangemTheme.dimens.spacing16)
-                        .fillMaxWidth(),
-                    text = stringResource(
-                        id = R.string.user_wallet_list_unlock_all,
-                        stringResource(id = R.string.common_biometrics),
-                    ),
-                    showProgress = state.showUnlockProgress,
-                    onClick = onUnlockClick,
-                )
-                SpacerH12()
-            }
-            SecondaryButtonIconRight(
+            Footer(
                 modifier = Modifier
                     .padding(horizontal = TangemTheme.dimens.spacing16)
                     .fillMaxWidth(),
-                text = stringResource(R.string.user_wallet_list_add_button),
-                showProgress = state.showAddCardProgress,
-                icon = painterResource(id = R.drawable.ic_tangem),
-                onClick = onAddCardClick,
+                isLocked = state.isLocked,
+                showUnlockProgress = state.showUnlockProgress,
+                showAddCardProgress = state.showAddCardProgress,
+                onUnlockClick = onUnlockClick,
+                onAddCardClick = onAddCardClick,
             )
             SpacerH16()
         }
@@ -105,62 +93,42 @@ internal fun WalletSelectorScreenContent(
 }
 
 @Composable
-private fun EditWalletsBar(
+private fun Header(
     modifier: Modifier = Modifier,
-    editingWalletsSize: Int,
+    editingWalletsIds: List<String>,
     onClearSelectedClick: () -> Unit,
     onEditSelectedWalletClick: () -> Unit,
     onDeleteSelectedWalletsClick: () -> Unit,
 ) {
-    val showEditAction = remember(editingWalletsSize) { editingWalletsSize in 1 until 2 }
-    Row(
-        modifier = modifier
-            .padding(vertical = TangemTheme.dimens.spacing8)
-            .fillMaxWidth(),
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        IconButton(
-            modifier = Modifier.size(TangemTheme.dimens.size32),
-            onClick = onClearSelectedClick,
+    val editingWalletsSize by rememberUpdatedState(newValue = editingWalletsIds.size)
+    val hasEditingWallets by remember {
+        derivedStateOf { editingWalletsSize > 0 }
+    }
+
+    Column(modifier = modifier) {
+        Hand()
+        Box(
+            modifier = Modifier
+                .fillMaxWidth()
+                .height(TangemTheme.dimens.size44),
+            contentAlignment = Alignment.Center,
         ) {
-            Icon(
-                modifier = Modifier.size(TangemTheme.dimens.size24),
-                painter = painterResource(id = R.drawable.ic_close),
-                tint = TangemTheme.colors.icon.primary1,
-                contentDescription = "Unselect wallets",
-            )
-        }
-        SpacerW16()
-        Text(
-            text = stringResource(id = R.string.user_wallet_list_editing_count, editingWalletsSize),
-            style = TangemTheme.typography.subtitle1,
-            color = TangemTheme.colors.text.primary1,
-        )
-        SpacerWMax()
-        if (showEditAction) {
-            IconButton(
-                modifier = Modifier.size(TangemTheme.dimens.size32),
-                onClick = onEditSelectedWalletClick,
-            ) {
-                Icon(
-                    modifier = Modifier.size(TangemTheme.dimens.size24),
-                    painter = painterResource(id = R.drawable.ic_pencil_outline_24),
-                    tint = TangemTheme.colors.icon.primary1,
-                    contentDescription = "Edit wallet name",
+            if (hasEditingWallets) {
+                EditWalletsBar(
+                    modifier = Modifier.fillMaxWidth(),
+                    editingWalletsSize = editingWalletsSize,
+                    onClearSelectedClick = onClearSelectedClick,
+                    onEditSelectedWalletClick = onEditSelectedWalletClick,
+                    onDeleteSelectedWalletsClick = onDeleteSelectedWalletsClick,
+                )
+            } else {
+                Text(
+                    text = stringResource(R.string.user_wallet_list_title),
+                    style = TangemTheme.typography.subtitle1,
+                    color = TangemTheme.colors.text.primary1,
+                    textAlign = TextAlign.Center,
                 )
             }
-            SpacerW8()
-        }
-        IconButton(
-            modifier = Modifier.size(TangemTheme.dimens.size32),
-            onClick = onDeleteSelectedWalletsClick,
-        ) {
-            Icon(
-                modifier = Modifier.size(TangemTheme.dimens.size24),
-                painter = painterResource(id = R.drawable.ic_trash),
-                tint = TangemTheme.colors.icon.warning,
-                contentDescription = "Delete selected wallets",
-            )
         }
     }
 }
@@ -208,6 +176,101 @@ private fun WalletsList(
     }
 }
 
+@Composable
+private fun Footer(
+    modifier: Modifier = Modifier,
+    isLocked: Boolean,
+    showUnlockProgress: Boolean,
+    showAddCardProgress: Boolean,
+    onUnlockClick: () -> Unit,
+    onAddCardClick: () -> Unit,
+) {
+    Column(
+        modifier = modifier,
+        verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing12),
+    ) {
+        if (isLocked) {
+            PrimaryButton(
+                modifier = Modifier.fillMaxWidth(),
+                text = stringResource(
+                    id = R.string.user_wallet_list_unlock_all,
+                    stringResource(id = R.string.common_biometrics),
+                ),
+                showProgress = showUnlockProgress,
+                onClick = onUnlockClick,
+            )
+        }
+        SecondaryButtonIconRight(
+            modifier = Modifier.fillMaxWidth(),
+            text = stringResource(R.string.user_wallet_list_add_button),
+            showProgress = showAddCardProgress,
+            icon = painterResource(id = R.drawable.ic_tangem),
+            onClick = onAddCardClick,
+        )
+    }
+}
+
+@Composable
+private fun EditWalletsBar(
+    modifier: Modifier = Modifier,
+    editingWalletsSize: Int,
+    onClearSelectedClick: () -> Unit,
+    onEditSelectedWalletClick: () -> Unit,
+    onDeleteSelectedWalletsClick: () -> Unit,
+) {
+    val showEditAction by remember(editingWalletsSize) {
+        derivedStateOf { editingWalletsSize in 1 until 2 }
+    }
+
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing12),
+    ) {
+        IconButton(
+            modifier = Modifier.size(TangemTheme.dimens.size32),
+            onClick = onClearSelectedClick,
+        ) {
+            Icon(
+                modifier = Modifier.size(TangemTheme.dimens.size24),
+                painter = painterResource(id = R.drawable.ic_close),
+                tint = TangemTheme.colors.icon.primary1,
+                contentDescription = "Unselect wallets",
+            )
+        }
+        Text(
+            text = stringResource(id = R.string.user_wallet_list_editing_count, editingWalletsSize),
+            style = TangemTheme.typography.subtitle1,
+            color = TangemTheme.colors.text.primary1,
+        )
+        SpacerWMax()
+        if (showEditAction) {
+            IconButton(
+                modifier = Modifier.size(TangemTheme.dimens.size32),
+                onClick = onEditSelectedWalletClick,
+            ) {
+                Icon(
+                    modifier = Modifier.size(TangemTheme.dimens.size24),
+                    painter = painterResource(id = R.drawable.ic_pencil_outline_24),
+                    tint = TangemTheme.colors.icon.primary1,
+                    contentDescription = "Change wallet name",
+                )
+            }
+        }
+        IconButton(
+            modifier = Modifier.size(TangemTheme.dimens.size32),
+            onClick = onDeleteSelectedWalletsClick,
+        ) {
+            Icon(
+                modifier = Modifier.size(TangemTheme.dimens.size24),
+                painter = painterResource(id = R.drawable.ic_trash),
+                tint = TangemTheme.colors.icon.warning,
+                contentDescription = "Delete selected wallets",
+            )
+        }
+    }
+}
+
 // region Preview
 @Composable
 private fun WalletSelectorScreenContentSample(

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

@@ -40,6 +40,7 @@ data class TangemDimens internal constructor(
     val size32: Dp = 32.dp,
     val size40: Dp = 40.dp,
     val size42: Dp = 42.dp,
+    val size44: Dp = 44.dp,
     val size48: Dp = 48.dp,
     val size56: Dp = 56.dp,
     val size62: Dp = 62.dp,