Updated on 2026-08-14

features/swap/impl/src/main/java/com/tangem/feature/swap/ui/ChooseProviderBottomSheet.kt

@@ -3,8 +3,10 @@ package com.tangem.feature.swap.ui
 import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -16,10 +18,13 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.tangem.common.ui.notifications.NotificationUM
-import com.tangem.core.ui.components.bottomsheets.sheet.TangemBottomSheet
+import com.tangem.core.ui.components.SpacerH
 import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig
+import com.tangem.core.ui.components.bottomsheets.modal.TangemModalBottomSheet
+import com.tangem.core.ui.components.bottomsheets.modal.TangemModalBottomSheetTitle
 import com.tangem.core.ui.components.notifications.Notification
 import com.tangem.core.ui.extensions.resourceReference
+import com.tangem.core.ui.extensions.selectedBorder
 import com.tangem.core.ui.extensions.stringReference
 import com.tangem.core.ui.extensions.stringResourceSafe
 import com.tangem.core.ui.res.TangemTheme
@@ -32,13 +37,20 @@ import kotlinx.collections.immutable.persistentListOf
 
 @Composable
 fun ChooseProviderBottomSheet(config: TangemBottomSheetConfig) {
-    TangemBottomSheet(
+    TangemModalBottomSheet<ChooseProviderBottomSheetConfig>(
         config = config,
         containerColor = TangemTheme.colors.background.tertiary,
-        titleText = resourceReference(R.string.express_choose_providers_title),
-    ) { content: ChooseProviderBottomSheetConfig ->
-        ChooseProviderBottomSheetContent(content = content)
-    }
+        title = {
+            TangemModalBottomSheetTitle(
+                title = resourceReference(R.string.express_choose_providers_title),
+                endIconRes = R.drawable.ic_close_24,
+                onEndClick = config.onDismissRequest,
+            )
+        },
+        content = { content ->
+            ChooseProviderBottomSheetContent(content = content)
+        },
+    )
 }
 
 @Suppress("LongMethod")
@@ -50,10 +62,7 @@ private fun ChooseProviderBottomSheetContent(content: ChooseProviderBottomSheetC
             style = TangemTheme.typography.caption2,
             color = TangemTheme.colors.text.secondary,
             modifier = Modifier
-                .padding(
-                    top = 10.dp,
-                    bottom = 16.dp,
-                )
+                .padding(bottom = 14.dp)
                 .padding(horizontal = TangemTheme.dimens.spacing56),
             textAlign = TextAlign.Center,
         )
@@ -76,31 +85,30 @@ private fun ChooseProviderBottomSheetContent(content: ChooseProviderBottomSheetC
                     start = 16.dp,
                     end = 16.dp,
                     bottom = 14.dp,
-                )
-                .background(
-                    color = TangemTheme.colors.background.action,
-                    shape = TangemTheme.shapes.roundedCornersXMedium,
-                )
-                .clip(shape = TangemTheme.shapes.roundedCornersXMedium),
+                ),
+            verticalArrangement = Arrangement.spacedBy(6.dp),
         ) {
             content.providers.forEach { provider ->
                 val isSelected = provider.id == content.selectedProviderId
                 ProviderItem(
                     state = provider,
-                    isSelected = isSelected,
+                    isSelected = false,
                     modifier = Modifier
+                        .selectedBorder(isSelected = isSelected)
+                        .clip(RoundedCornerShape(TangemTheme.dimens.radius14))
+                        .background(color = TangemTheme.colors.background.action)
                         .clickable(
                             enabled = provider.onProviderClick != null,
                             onClick = { provider.onProviderClick?.invoke(provider.id) },
                         )
                         .padding(
-                            top = TangemTheme.dimens.spacing12,
-                            bottom = TangemTheme.dimens.spacing12,
-                            end = TangemTheme.dimens.spacing12,
+                            vertical = 16.dp,
+                            horizontal = 2.dp,
                         ),
                 )
             }
         }
+        SpacerH(6.dp)
         Icon(
             painterResource(id = R.drawable.ic_lightning_16),
             contentDescription = null,
@@ -111,7 +119,7 @@ private fun ChooseProviderBottomSheetContent(content: ChooseProviderBottomSheetC
             style = TangemTheme.typography.caption2,
             color = TangemTheme.colors.icon.informative,
             modifier = Modifier
-                .padding(top = TangemTheme.dimens.spacing6, bottom = TangemTheme.dimens.spacing16)
+                .padding(top = 4.dp, bottom = 32.dp)
                 .padding(horizontal = TangemTheme.dimens.spacing56),
             textAlign = TextAlign.Center,
         )

features/swap/impl/src/main/java/com/tangem/feature/swap/ui/ProviderItem.kt

@@ -5,6 +5,7 @@ import androidx.compose.animation.AnimatedContent
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.material3.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
@@ -99,7 +100,7 @@ private fun ProviderContentState(
     isSelected: Boolean = false,
 ) {
     Box(modifier = modifier.fillMaxWidth()) {
-        Row {
+        Row(verticalAlignment = Alignment.CenterVertically) {
             SubcomposeAsyncImage(
                 modifier = Modifier
                     .padding(start = TangemTheme.dimens.spacing12)
@@ -120,8 +121,10 @@ private fun ProviderContentState(
 
             Column(
                 modifier = Modifier
+                    .heightIn(min = TangemTheme.dimens.size40)
                     .padding(start = TangemTheme.dimens.spacing12)
                     .testTag(SwapTokenScreenTestTags.PROVIDERS_BLOCK),
+                verticalArrangement = Arrangement.SpaceBetween,
             ) {
                 Row {
                     if (state.namePrefix == ProviderState.PrefixType.PROVIDED_BY) {
@@ -158,7 +161,6 @@ private fun ProviderContentState(
                 }
                 Row(
                     modifier = Modifier.padding(
-                        top = TangemTheme.dimens.spacing6,
                         end = TangemTheme.dimens.spacing56,
                     ),
                 ) {
@@ -205,7 +207,7 @@ private fun ProviderUnavailableState(
     modifier: Modifier = Modifier,
 ) {
     Box(modifier = modifier.fillMaxWidth()) {
-        Row {
+        Row(verticalAlignment = Alignment.CenterVertically) {
             val (alpha, colorFilter) = GRAY_SCALE_ALPHA to GrayscaleColorFilter
             SubcomposeAsyncImage(
                 modifier = Modifier
@@ -228,7 +230,10 @@ private fun ProviderUnavailableState(
             )
 
             Column(
-                modifier = Modifier.padding(start = TangemTheme.dimens.spacing12),
+                modifier = Modifier
+                    .heightIn(min = TangemTheme.dimens.size40)
+                    .padding(start = TangemTheme.dimens.spacing12),
+                verticalArrangement = Arrangement.SpaceBetween,
             ) {
                 Row {
                     AnimatedContent(targetState = state.name, label = "") { name ->
@@ -247,12 +252,16 @@ private fun ProviderUnavailableState(
                         )
                     }
                 }
-                AnimatedContent(targetState = state.alertText, label = "") { alertText ->
+                AnimatedContent(
+                    targetState = state.alertText,
+                    contentAlignment = Alignment.BottomStart,
+                    label = "",
+                ) { alertText ->
                     Text(
                         text = alertText.resolveReference(),
                         style = TangemTheme.typography.body2,
                         color = TangemTheme.colors.text.tertiary,
-                        modifier = Modifier.padding(top = TangemTheme.dimens.spacing6),
+                        modifier = Modifier,
                     )
                 }
             }