Updated on 2026-08-14

common/ui-markets/src/main/kotlin/com/tangem/common/ui/markets/MarketListItemV2.kt

@@ -3,7 +3,6 @@ package com.tangem.common.ui.markets
 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.Button
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
@@ -34,10 +33,12 @@ import com.tangem.core.ui.components.RectangleShimmer
 import com.tangem.core.ui.components.SpacerW4
 import com.tangem.core.ui.components.marketprice.PriceChangeInPercent
 import com.tangem.core.ui.components.marketprice.PriceChangeType
+import com.tangem.core.ui.ds.badge.*
 import com.tangem.core.ui.ds.image.TangemIcon
 import com.tangem.core.ui.ds.image.TangemIconUM
 import com.tangem.core.ui.ds.row.TangemRowContainer
 import com.tangem.core.ui.ds.row.TangemRowLayoutId
+import com.tangem.core.ui.extensions.TextReference
 import com.tangem.core.ui.res.LocalIsInDarkTheme
 import com.tangem.core.ui.res.LocalWindowSize
 import com.tangem.core.ui.res.TangemTheme
@@ -95,7 +96,7 @@ fun MarketListItemContentV2(model: MarketsListItemUM, modifier: Modifier = Modif
                     .padding(end = TangemTheme.dimens2.x2, start = TangemTheme.dimens2.x3),
                 ratingPosition = model.ratingPosition,
                 marketCap = model.marketCap,
-                // stakingRate = model.stakingRate, TODO in [REDACTED_TASK_KEY]
+                stakingRate = model.stakingRate,
             )
 
             PriceChangeInPercent(
@@ -146,7 +147,7 @@ private fun TokenTitle(name: String, currencySymbol: String, modifier: Modifier
 private fun TokenSubtitle(
     ratingPosition: String?,
     marketCap: String?,
-    // stakingRate: TextReference?, TODO in [REDACTED_TASK_KEY]
+    stakingRate: TextReference?,
     modifier: Modifier = Modifier,
 ) {
     val ratingColor = mapRatingToColor(ratingPosition)
@@ -154,7 +155,7 @@ private fun TokenSubtitle(
     Row(
         modifier = modifier,
         verticalAlignment = Alignment.CenterVertically,
-        horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens2.x2),
+        horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens2.x1),
     ) {
         TokenRatingPlace(
             ratingPosition = ratingPosition,
@@ -167,6 +168,9 @@ private fun TokenSubtitle(
                 text = marketCap,
             )
         }
+        if (stakingRate != null) {
+            StakingRate(stakingRate = stakingRate)
+        }
     }
 }
 
@@ -214,6 +218,18 @@ private fun RowScope.TokenMarketCapText(text: String, ratingColor: Color, modifi
     )
 }
 
+@Composable
+private fun RowScope.StakingRate(stakingRate: TextReference, modifier: Modifier = Modifier) {
+    TangemBadge(
+        modifier = modifier.alignByBaseline(),
+        text = stakingRate,
+        shape = TangemBadgeShape.Rounded,
+        size = TangemBadgeSize.X4,
+        type = TangemBadgeType.Tinted,
+        color = TangemBadgeColor.Gray,
+    )
+}
+
 @Composable
 private fun Chart(chartType: MarketChartLook.Type, chartRawData: MarketChartRawData?, modifier: Modifier = Modifier) {
     Box(

common/ui-markets/src/main/kotlin/com/tangem/common/ui/markets/MarketsListItemPlaceholder.kt

@@ -4,23 +4,29 @@ import android.content.res.Configuration
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.tangem.core.ui.components.CircleShimmer
-import com.tangem.core.ui.components.RectangleShimmer
-import com.tangem.core.ui.components.SpacerH
-import com.tangem.core.ui.components.SpacerW12
-import com.tangem.core.ui.res.LocalWindowSize
-import com.tangem.core.ui.res.TangemTheme
-import com.tangem.core.ui.res.TangemThemePreview
+import com.tangem.core.ui.components.*
+import com.tangem.core.ui.res.*
 import com.tangem.core.ui.windowsize.WindowSizeType
 
+@Composable
+fun MarketsListItemPlaceholder() {
+    if (LocalRedesignEnabled.current) {
+        MarketsListItemPlaceholderV2()
+    } else {
+        MarketsListItemPlaceholderV1()
+    }
+}
+
 @Suppress("LongMethod")
 @Composable
-fun MarketsListItemPlaceholder() {
+private fun MarketsListItemPlaceholderV1() {
     val density = LocalDensity.current
     val windowSize = LocalWindowSize.current
     val sp12 = with(density) { 12.sp.toDp() }
@@ -84,11 +90,71 @@ fun MarketsListItemPlaceholder() {
     }
 }
 
+@Suppress("LongMethod")
+@Composable
+private fun MarketsListItemPlaceholderV2() {
+    val windowSize = LocalWindowSize.current
+    Row(
+        modifier = Modifier.padding(
+            horizontal = 12.dp,
+            vertical = 14.dp,
+        ),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        CircleShimmer(modifier = Modifier.size(40.dp))
+
+        SpacerW(4.dp)
+
+        Column(
+            modifier = Modifier.weight(1f),
+            verticalArrangement = Arrangement.spacedBy(4.dp),
+            horizontalAlignment = Alignment.Start,
+        ) {
+            RectangleShimmer(
+                modifier = Modifier
+                    .width(96.dp)
+                    .height(20.dp),
+                radius = TangemTheme.dimens2.x25,
+            )
+
+            RectangleShimmer(
+                modifier = Modifier
+                    .width(46.dp)
+                    .height(16.dp),
+                radius = TangemTheme.dimens2.x25,
+            )
+        }
+
+        if (windowSize.widthAtLeast(WindowSizeType.Small)) {
+            SpacerW(10.dp)
+
+            Column(
+                verticalArrangement = Arrangement.spacedBy(4.dp),
+                horizontalAlignment = Alignment.End,
+            ) {
+                RectangleShimmer(
+                    modifier = Modifier
+                        .width(56.dp)
+                        .height(20.dp),
+                    radius = TangemTheme.dimens2.x25,
+                )
+
+                RectangleShimmer(
+                    modifier = Modifier
+                        .width(46.dp)
+                        .height(16.dp),
+                    radius = TangemTheme.dimens2.x25,
+                )
+            }
+        }
+    }
+}
+
 @Preview(showBackground = true, widthDp = 360, name = "normal")
 @Preview(showBackground = true, widthDp = 360, name = "normal night", uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Preview(showBackground = true, widthDp = 320, name = "small width")
 @Composable
-private fun Preview() {
+private fun PreviewV1() {
     TangemThemePreview {
         Column(Modifier.background(TangemTheme.colors.background.tertiary)) {
             repeat(20) {
@@ -96,4 +162,20 @@ private fun Preview() {
             }
         }
     }
+}
+
+@Preview(showBackground = true, widthDp = 360, name = "normal")
+@Preview(showBackground = true, widthDp = 360, name = "normal night", uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(showBackground = true, widthDp = 320, name = "small width")
+@Composable
+private fun PreviewV2() {
+    TangemThemePreviewRedesign {
+        CompositionLocalProvider(LocalRedesignEnabled provides true) {
+            Column(Modifier.background(TangemTheme.colors2.surface.level3)) {
+                repeat(20) {
+                    MarketsListItemPlaceholder()
+                }
+            }
+        }
+    }
 }