Updated on 2026-08-14

2024-07-01 14:29:01 +04:00 · 2024-07-01 14:29:01 +04:00 · 2be4782ce3
commit 2be4782ce3
parent 1fbf2debcd
5 changed files with 177 additions and 180 deletions
--- a/core/ui/src/main/java/com/tangem/core/ui/components/rows/BlockchainRow.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/rows/BlockchainRow.kt
@ -1,20 +1,22 @@
 package com.tangem.core.ui.components.rows

 import android.content.res.Configuration
+import androidx.annotation.DrawableRes
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.BoxScope
-import androidx.compose.foundation.layout.heightIn
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider
 import com.tangem.core.ui.R
 import com.tangem.core.ui.components.TangemSwitch
 import com.tangem.core.ui.components.rows.model.BlockchainRowUM
-import com.tangem.core.ui.extensions.stringReference
 import com.tangem.core.ui.res.TangemTheme
 import com.tangem.core.ui.res.TangemThemePreview

@ -32,24 +34,84 @@ fun BlockchainRow(model: BlockchainRowUM, action: @Composable BoxScope.() -> Uni
            ),
        icon = {
            RowIcon(
-                modifier = Modifier.size(TangemTheme.dimens.size22),
-                resId = model.icon.resId,
-                isColored = model.icon.isColored,
-                showAccentBadge = model.isAccented,
+                resId = model.iconResId,
+                isColored = model.isSelected,
+                showAccentBadge = model.isMainNetwork,
            )
        },
        text = {
-            RowTitleAndSubtitle(
-                title = model.name,
-                subtitle = model.type,
-                accentTitle = model.usePrimaryTextColor,
-                accentSubtitle = model.isAccented,
+            RowText(
+                mainText = model.name,
+                secondText = model.type,
+                accentMainText = model.isSelected,
+                accentSecondText = model.isMainNetwork,
            )
        },
        action = action,
    )
 }

+@Composable
+private fun RowIcon(
+    @DrawableRes resId: Int,
+    isColored: Boolean,
+    showAccentBadge: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    Box(
+        modifier = modifier.size(TangemTheme.dimens.size24),
+    ) {
+        if (isColored) {
+            Image(
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .size(TangemTheme.dimens.size22),
+                painter = painterResource(id = resId),
+                contentDescription = null,
+            )
+        } else {
+            Icon(
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .background(
+                        color = TangemTheme.colors.button.secondary,
+                        shape = CircleShape,
+                    )
+                    .size(TangemTheme.dimens.size22),
+                painter = painterResource(id = resId),
+                tint = TangemTheme.colors.icon.informative,
+                contentDescription = null,
+            )
+        }
+
+        if (showAccentBadge) {
+            Badge(modifier = Modifier.align(Alignment.TopEnd))
+        }
+    }
+}
+
+@Composable
+private fun Badge(modifier: Modifier = Modifier) {
+    Box(
+        modifier = modifier
+            .size(TangemTheme.dimens.size8)
+            .background(
+                color = TangemTheme.colors.background.primary,
+                shape = CircleShape,
+            ),
+        contentAlignment = Alignment.Center,
+    ) {
+        Box(
+            modifier = Modifier
+                .size(TangemTheme.dimens.size5)
+                .background(
+                    color = TangemTheme.colors.icon.accent,
+                    shape = CircleShape,
+                ),
+        )
+    }
+}
+
 // region Preview
@Preview(showBackground = true, widthDp = 360)
@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
@ -74,25 +136,25 @@ private fun Preview_BlockchainRow(@PreviewParameter(BlockchainRowParameterProvid
 private class BlockchainRowParameterProvider : CollectionPreviewParameterProvider<BlockchainRowUM>(
    collection = listOf(
        BlockchainRowUM(
-            name = stringReference("BNB BEACON CHAIN"),
-            type = stringReference("BEP20"),
-            icon = BlockchainRowUM.Icon(R.drawable.ic_bsc_16, isColored = false),
-            isAccented = true,
-            usePrimaryTextColor = false,
+            name = "BNB BEACON CHAIN",
+            type = "BEP20",
+            iconResId = R.drawable.img_bsc_22,
+            isMainNetwork = true,
+            isSelected = true,
        ),
        BlockchainRowUM(
-            name = stringReference("1234567890111213141516171819"),
-            type = stringReference("BEP20"),
-            icon = BlockchainRowUM.Icon(R.drawable.ic_bsc_16, isColored = false),
-            isAccented = false,
-            usePrimaryTextColor = true,
+            name = "1234567890111213141516171819",
+            type = "BEP20",
+            iconResId = R.drawable.ic_bsc_16,
+            isMainNetwork = true,
+            isSelected = false,
        ),
        BlockchainRowUM(
-            name = stringReference("BNB BEACON CHAIN"),
-            type = stringReference("1234567890111213141516171819"),
-            icon = BlockchainRowUM.Icon(R.drawable.img_bsc_22, isColored = true),
-            isAccented = false,
-            usePrimaryTextColor = false,
+            name = "BNB BEACON CHAIN",
+            type = "1234567890111213141516171819",
+            iconResId = R.drawable.ic_bsc_16,
+            isMainNetwork = false,
+            isSelected = false,
        ),
    ),
 )
--- a/core/ui/src/main/java/com/tangem/core/ui/components/rows/ChainRow.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/rows/ChainRow.kt
@ -2,10 +2,7 @@ package com.tangem.core.ui.components.rows

 import android.content.res.Configuration
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.BoxScope
-import androidx.compose.foundation.layout.heightIn
-import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.*
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable
@ -15,8 +12,10 @@ import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider
 import com.tangem.core.ui.R
+import com.tangem.core.ui.components.currency.icon.CurrencyIcon
+import com.tangem.core.ui.components.currency.icon.CurrencyIconState
 import com.tangem.core.ui.components.rows.model.ChainRowUM
-import com.tangem.core.ui.extensions.stringReference
+import com.tangem.core.ui.extensions.resourceReference
 import com.tangem.core.ui.res.TangemTheme
 import com.tangem.core.ui.res.TangemThemePreview

@ -32,20 +31,24 @@ fun ChainRow(model: ChainRowUM, modifier: Modifier = Modifier, action: @Composab
                vertical = TangemTheme.dimens.spacing12,
                horizontal = TangemTheme.dimens.spacing14,
            ),
+        horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing12),
        icon = {
-            RowIcon(
-                modifier = Modifier.size(TangemTheme.dimens.size36),
-                resId = model.icon.resId,
-                isColored = model.icon.isColored,
-                showAccentBadge = false,
+            CurrencyIcon(
+                state = model.icon,
+                shouldDisplayNetwork = true,
            )
        },
        text = {
-            RowTitleAndSubtitle(
-                title = model.name,
-                subtitle = model.type,
-                accentTitle = true,
-                accentSubtitle = false,
+            RowText(
+                mainText = model.name,
+                secondText = model.type,
+                subtitle = if (model.showCustom) {
+                    resourceReference(R.string.common_custom)
+                } else {
+                    null
+                },
+                accentMainText = true,
+                accentSecondText = false,
            )
        },
        action = action,
@ -81,36 +84,28 @@ private fun Preview_ChainRow(@PreviewParameter(ChainRowParameterProvider::class)
 private class ChainRowParameterProvider : CollectionPreviewParameterProvider<ChainRowUM>(
    collection = listOf(
        ChainRowUM(
-            name = stringReference("Cardano"),
-            type = stringReference("ADA"),
-            icon = ChainRowUM.Icon(
-                resId = R.drawable.img_cardano_22,
-                isColored = true,
-            ),
+            name = "Cardano",
+            type = "ADA",
+            icon = CurrencyIconState.Locked,
+            showCustom = true,
        ),
        ChainRowUM(
-            name = stringReference("Binance"),
-            type = stringReference("BNB"),
-            icon = ChainRowUM.Icon(
-                resId = R.drawable.ic_bsc_16,
-                isColored = false,
-            ),
+            name = "Binance",
+            type = "BNB",
+            icon = CurrencyIconState.Locked,
+            showCustom = false,
        ),
        ChainRowUM(
-            name = stringReference("123456789010111213141516"),
-            type = stringReference("BNB"),
-            icon = ChainRowUM.Icon(
-                resId = R.drawable.ic_bsc_16,
-                isColored = false,
-            ),
+            name = "123456789010111213141516",
+            type = "BNB",
+            icon = CurrencyIconState.Locked,
+            showCustom = true,
        ),
        ChainRowUM(
-            name = stringReference("123456789010111213141516"),
-            type = stringReference("123456789010111213141516"),
-            icon = ChainRowUM.Icon(
-                resId = R.drawable.ic_bsc_16,
-                isColored = false,
-            ),
+            name = "123456789010111213141516",
+            type = "123456789010111213141516",
+            icon = CurrencyIconState.Locked,
+            showCustom = false,
        ),
    ),
 )
--- a/core/ui/src/main/java/com/tangem/core/ui/components/rows/RowComponents.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/rows/RowComponents.kt
@ -1,18 +1,13 @@
 package com.tangem.core.ui.components.rows

-import androidx.annotation.DrawableRes
-import androidx.compose.foundation.Image
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.style.TextOverflow
 import com.tangem.core.ui.extensions.TextReference
+import com.tangem.core.ui.extensions.isNullOrEmpty
 import com.tangem.core.ui.extensions.resolveReference
 import com.tangem.core.ui.res.TangemTheme

@ -22,11 +17,12 @@ internal inline fun RowContentContainer(
    text: @Composable BoxScope.() -> Unit,
    action: @Composable BoxScope.() -> Unit,
    modifier: Modifier = Modifier,
+    horizontalArrangement: Arrangement.Horizontal = Arrangement.spacedBy(TangemTheme.dimens.spacing8),
 ) {
    Row(
        modifier = modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing8, Alignment.Start),
+        horizontalArrangement = horizontalArrangement,
    ) {
        Box(
            contentAlignment = Alignment.Center,
@ -41,7 +37,7 @@ internal inline fun RowContentContainer(
        )
        Box(
            modifier = Modifier
-                .requiredWidthIn(max = TangemTheme.dimens.size48)
+                .requiredWidthIn(max = TangemTheme.dimens.size80)
                .heightIn(min = TangemTheme.dimens.size24),
            contentAlignment = Alignment.CenterEnd,
            content = action,
@ -50,90 +46,50 @@ internal inline fun RowContentContainer(
 }

@Composable
-internal fun RowTitleAndSubtitle(
-    title: TextReference,
-    subtitle: TextReference,
-    accentTitle: Boolean,
-    accentSubtitle: Boolean,
+internal fun RowText(
+    mainText: String,
+    secondText: String,
+    accentMainText: Boolean,
+    accentSecondText: Boolean,
    modifier: Modifier = Modifier,
+    subtitle: TextReference? = null,
 ) {
-    Row(
+    Column(
        modifier = modifier,
-        verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing4),
+        horizontalAlignment = Alignment.Start,
+        verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing2),
    ) {
-        Text(
-            modifier = Modifier.weight(weight = 10f, fill = false),
-            text = title.resolveReference(),
-            style = TangemTheme.typography.subtitle2,
-            color = if (accentTitle) TangemTheme.colors.text.primary1 else TangemTheme.colors.text.secondary,
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
-        )
-
-        Text(
-            modifier = Modifier.weight(weight = 4f, fill = false),
-            text = subtitle.resolveReference(),
-            style = TangemTheme.typography.body2,
-            color = if (accentSubtitle) TangemTheme.colors.text.accent else TangemTheme.colors.text.secondary,
-            maxLines = 1,
-            overflow = TextOverflow.Ellipsis,
-        )
-    }
-}
-
-@Composable
-internal fun RowIcon(
-    @DrawableRes resId: Int,
-    isColored: Boolean,
-    showAccentBadge: Boolean,
-    modifier: Modifier = Modifier,
-) {
-    Box(modifier = modifier) {
-        if (isColored) {
-            Image(
-                modifier = Modifier.matchParentSize(),
-                painter = painterResource(id = resId),
-                contentDescription = null,
+        Row(
+            verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing4),
+        ) {
+            Text(
+                modifier = Modifier.weight(weight = 10f, fill = false),
+                text = mainText,
+                style = TangemTheme.typography.subtitle2,
+                color = if (accentMainText) TangemTheme.colors.text.primary1 else TangemTheme.colors.text.secondary,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
            )
-        } else {
-            Icon(
-                modifier = Modifier
-                    .background(
-                        color = TangemTheme.colors.button.secondary,
-                        shape = CircleShape,
-                    )
-                    .matchParentSize(),
-                painter = painterResource(id = resId),
-                tint = TangemTheme.colors.icon.informative,
-                contentDescription = null,
+
+            Text(
+                modifier = Modifier.weight(weight = 4f, fill = false),
+                text = secondText,
+                style = TangemTheme.typography.body2,
+                color = if (accentSecondText) TangemTheme.colors.text.accent else TangemTheme.colors.text.secondary,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
            )
        }

-        if (showAccentBadge) {
-            Badge(modifier = Modifier.align(Alignment.TopEnd))
+        if (!subtitle.isNullOrEmpty()) {
+            Text(
+                text = subtitle.resolveReference(),
+                style = TangemTheme.typography.caption2,
+                color = TangemTheme.colors.text.tertiary,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
        }
    }
-}
-
-@Composable
-private fun Badge(modifier: Modifier = Modifier) {
-    Box(
-        modifier = modifier
-            .size(TangemTheme.dimens.size6)
-            .background(
-                color = TangemTheme.colors.background.primary,
-                shape = CircleShape,
-            ),
-    ) {
-        Box(
-            modifier = Modifier
-                .padding(all = TangemTheme.dimens.spacing1)
-                .matchParentSize()
-                .background(
-                    color = TangemTheme.colors.icon.accent,
-                    shape = CircleShape,
-                ),
-        )
-    }
 }
--- a/core/ui/src/main/java/com/tangem/core/ui/components/rows/model/BlockchainRowUM.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/rows/model/BlockchainRowUM.kt
@ -1,21 +1,12 @@
 package com.tangem.core.ui.components.rows.model

-import androidx.annotation.DrawableRes
 import androidx.compose.runtime.Immutable
-import com.tangem.core.ui.extensions.TextReference

@Immutable
 data class BlockchainRowUM(
-    val name: TextReference,
-    val type: TextReference,
-    val icon: Icon,
-    val isAccented: Boolean,
-    val usePrimaryTextColor: Boolean,
-) {
-
-    @Immutable
-    data class Icon(
-        @DrawableRes val resId: Int,
-        val isColored: Boolean,
-    )
-}
+    val name: String,
+    val type: String,
+    val iconResId: Int,
+    val isMainNetwork: Boolean,
+    val isSelected: Boolean,
+)
--- a/core/ui/src/main/java/com/tangem/core/ui/components/rows/model/ChainRowUM.kt
+++ b/core/ui/src/main/java/com/tangem/core/ui/components/rows/model/ChainRowUM.kt
@ -1,19 +1,12 @@
 package com.tangem.core.ui.components.rows.model

-import androidx.annotation.DrawableRes
 import androidx.compose.runtime.Immutable
-import com.tangem.core.ui.extensions.TextReference
+import com.tangem.core.ui.components.currency.icon.CurrencyIconState

@Immutable
 data class ChainRowUM(
-    val name: TextReference,
-    val type: TextReference,
-    val icon: Icon,
-) {
-
-    @Immutable
-    data class Icon(
-        @DrawableRes val resId: Int,
-        val isColored: Boolean,
-    )
-}
+    val name: String,
+    val type: String,
+    val icon: CurrencyIconState,
+    val showCustom: Boolean,
+)