Updated on 2026-08-14

2025-02-10 11:01:12 +05:00 · 2025-02-10 11:01:12 +05:00 · 53e29be3c2
commit 53e29be3c2
parent 93bf42f4a0
4 changed files with 52 additions and 12 deletions
--- a/core/ui/src/main/java/com/tangem/core/ui/components/buttons/HorizontalActionChips.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/HorizontalActionChips.kt
@ -4,20 +4,23 @@ import android.content.res.Configuration
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider
+import androidx.compose.ui.unit.dp
 import com.tangem.core.ui.R
 import com.tangem.core.ui.components.buttons.actions.ActionButton
 import com.tangem.core.ui.components.buttons.actions.ActionButtonConfig
 import com.tangem.core.ui.extensions.TextReference
-import com.tangem.core.ui.res.TangemThemePreview
 import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview
 import kotlinx.collections.immutable.ImmutableList
 import kotlinx.collections.immutable.persistentListOf

@ -25,6 +28,7 @@ import kotlinx.collections.immutable.persistentListOf
 fun HorizontalActionChips(
    buttons: ImmutableList<ActionButtonConfig>,
    modifier: Modifier = Modifier,
+    containerColor: Color = TangemTheme.colors.background.secondary,
    contentPadding: PaddingValues = PaddingValues(TangemTheme.dimens.spacing0),
 ) {
    LazyRow(
@ -36,7 +40,7 @@ fun HorizontalActionChips(
        // do not use key cause when change items order, list is scrolled
        items(
            items = buttons,
-            itemContent = { ActionButton(config = it) },
+            itemContent = { ActionButton(config = it, containerColor = containerColor) },
        )
    }
 }
@ -46,22 +50,31 @@ fun HorizontalActionChips(
@Preview(widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
 private fun Preview_HorizontalActionChips(
-    @PreviewParameter(ActionButtonConfigProvider::class) buttons: HorizontalActionChips,
+    @PreviewParameter(ActionButtonConfigProvider::class) buttons: HorizontalActionChipsData,
 ) {
    TangemThemePreview {
-        HorizontalActionChips(buttons = buttons.buttons)
+        HorizontalActionChips(
+            buttons = buttons.buttons,
+            modifier = Modifier.padding(4.dp),
+        )
    }
 }

-private class ActionButtonConfigProvider : CollectionPreviewParameterProvider<HorizontalActionChips>(
+private class ActionButtonConfigProvider : CollectionPreviewParameterProvider<HorizontalActionChipsData>(
    collection = listOf(
-        HorizontalActionChips(
+        HorizontalActionChipsData(
            buttons = persistentListOf(
                ActionButtonConfig(
                    text = TextReference.Str(value = "Buy"),
                    iconResId = R.drawable.ic_plus_24,
                    onClick = {},
                ),
+                ActionButtonConfig(
+                    text = TextReference.Str(value = "Exchange"),
+                    iconResId = R.drawable.ic_exchange_vertical_24,
+                    onClick = {},
+                    showBadge = true,
+                ),
                ActionButtonConfig(
                    text = TextReference.Str(value = "Send"),
                    iconResId = R.drawable.ic_arrow_up_24,
@ -72,17 +85,12 @@ private class ActionButtonConfigProvider : CollectionPreviewParameterProvider<Ho
                    iconResId = R.drawable.ic_arrow_down_24,
                    onClick = {},
                ),
-                ActionButtonConfig(
-                    text = TextReference.Str(value = "Exchange"),
-                    iconResId = R.drawable.ic_exchange_vertical_24,
-                    onClick = {},
-                ),
            ),
        ),
    ),
 )

-private data class HorizontalActionChips(
+private data class HorizontalActionChipsData(
    val buttons: ImmutableList<ActionButtonConfig>,
 )
 // endregion Preview
--- a/core/ui/src/main/java/com/tangem/core/ui/components/buttons/actions/ActionButtonConfig.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/actions/ActionButtonConfig.kt
@ -13,6 +13,8 @@ import com.tangem.core.ui.extensions.TextReference
 * @property enabled   enabled
 * @property dimContent determines whether the button content will be dimmed. This property will be ignored if [enabled]
 * is `false`.
+ * @property isInProgress indicates progress state of button
+ * @property showBadge display dot in upper right corner
 *
 [REDACTED_AUTHOR]
 */
@ -24,4 +26,5 @@ data class ActionButtonConfig(
    val enabled: Boolean = true,
    val dimContent: Boolean = false,
    val isInProgress: Boolean = false,
+    val showBadge: Boolean = false,
 )
--- a/core/ui/src/main/java/com/tangem/core/ui/components/buttons/actions/Actions.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/actions/Actions.kt
@ -17,7 +17,10 @@ import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
+import androidx.compose.ui.draw.drawWithContent
+import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.drawscope.DrawScope
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
@ -29,6 +32,7 @@ import androidx.compose.ui.unit.dp
 import com.tangem.core.ui.R
 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
 import com.tangem.core.ui.res.TangemThemePreview

@ -81,6 +85,7 @@ fun ActionButton(
    config: ActionButtonConfig,
    modifier: Modifier = Modifier,
    color: Color = TangemTheme.colors.button.secondary,
+    containerColor: Color = TangemTheme.colors.background.secondary,
 ) {
    ActionBaseButton(
        config = config,
@ -97,6 +102,7 @@ fun ActionButton(
        },
        modifier = modifier,
        color = color,
+        containerColor = containerColor,
    )
 }

@ -108,6 +114,7 @@ fun ActionBaseButton(
    content: @Composable (modifier: Modifier) -> Unit,
    modifier: Modifier = Modifier,
    color: Color = TangemTheme.colors.button.secondary,
+    containerColor: Color = TangemTheme.colors.background.secondary,
 ) {
    val context = LocalContext.current
    val backgroundColor by animateColorAsState(
@ -119,6 +126,12 @@ fun ActionBaseButton(
        modifier = modifier
            .heightIn(min = 36.dp)
            .widthIn(min = 100.dp)
+            .drawWithContent {
+                drawContent()
+                if (config.showBadge) {
+                    drawBadge(containerColor = containerColor)
+                }
+            }
            .clip(shape)
            .combinedClickable(
                enabled = config.enabled,
@ -212,6 +225,20 @@ fun getTextColor(config: ActionButtonConfig): Color {
    }
 }

+private fun DrawScope.drawBadge(containerColor: Color) {
+    val width = size.width
+    drawCircle(
+        color = containerColor,
+        center = Offset(x = width - 2.dp.toPx(), y = 2.dp.toPx()),
+        radius = 5.dp.toPx(),
+    )
+    drawCircle(
+        color = TangemColorPalette.Azure,
+        center = Offset(x = width - 2.dp.toPx(), y = 2.dp.toPx()),
+        radius = 3.dp.toPx(),
+    )
+}
+
@Preview(group = "RoundedActionButton", showBackground = true)
@Preview(group = "RoundedActionButton", showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
@ -237,6 +264,7 @@ private class ActionStateProvider : CollectionPreviewParameterProvider<ActionBut
            iconResId = R.drawable.ic_arrow_up_24,
            enabled = true,
            onClick = {},
+            showBadge = true,
        ),
        ActionButtonConfig(
            text = TextReference.Str(value = "Dimmed"),
--- a/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/components/TokenDetailsBalanceBlock.kt
+++ b/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/components/TokenDetailsBalanceBlock.kt
@ -94,6 +94,7 @@ internal fun TokenDetailsBalanceBlock(
                        end.linkTo(anchor = parent.end)
                        bottom.linkTo(anchor = parent.bottom, margin = spacing12)
                    },
+                containerColor = TangemTheme.colors.background.primary,
                contentPadding = PaddingValues(horizontal = TangemTheme.dimens.spacing12),
            )
        }