Updated on 2026-08-14

features/markets/impl/src/main/kotlin/com/tangem/features/markets/details/impl/ui/components/SecurityScoreBlock.kt

@@ -1,16 +1,16 @@
 package com.tangem.features.markets.details.impl.ui.components
 
 import android.content.res.Configuration
+import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.*
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.tooling.preview.Preview
-import com.tangem.core.ui.components.RectangleShimmer
 import com.tangem.core.ui.components.TextShimmer
-import com.tangem.core.ui.components.block.information.InformationBlock
 import com.tangem.core.ui.components.text.TooltipText
 import com.tangem.core.ui.extensions.resolveReference
 import com.tangem.core.ui.extensions.resourceReference
@@ -23,86 +23,85 @@ import com.tangem.features.markets.impl.R
 
 @Composable
 internal fun SecurityScoreBlock(state: SecurityScoreUM, modifier: Modifier = Modifier) {
-    InformationBlock(
-        modifier = modifier,
-        title = {
-            Column(
-                modifier = Modifier.padding(bottom = TangemTheme.dimens.spacing6),
-                verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing4),
-            ) {
-                TooltipText(
-                    text = resourceReference(R.string.markets_token_details_security_score),
-                    onInfoClick = state.onInfoClick,
-                    textStyle = TangemTheme.typography.subtitle2,
-                )
-
-                Text(
-                    text = state.description.resolveReference(),
-                    style = TangemTheme.typography.body2,
-                    color = TangemTheme.colors.text.tertiary,
-                    maxLines = 1,
-                    overflow = TextOverflow.Ellipsis,
-                )
-            }
-        },
-        action = {
-            ScoreStarsBlock(
-                modifier = Modifier.padding(bottom = TangemTheme.dimens.spacing6),
-                score = state.score,
-                scoreTextStyle = TangemTheme.typography.body1,
-                horizontalSpacing = TangemTheme.dimens.spacing8,
+    Row(
+        modifier = modifier
+            .clip(TangemTheme.shapes.roundedCornersXMedium)
+            .background(TangemTheme.colors.background.action)
+            .fillMaxWidth()
+            .heightIn(max = TangemTheme.dimens.size72)
+            .padding(all = TangemTheme.dimens.spacing12),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Column(
+            modifier = Modifier
+                .weight(1F)
+                .fillMaxHeight(),
+            verticalArrangement = Arrangement.SpaceBetween,
+        ) {
+            TooltipText(
+                text = resourceReference(R.string.markets_token_details_security_score),
+                onInfoClick = state.onInfoClick,
+                textStyle = TangemTheme.typography.subtitle2,
             )
-        },
-    )
+
+            Text(
+                text = state.description.resolveReference(),
+                style = TangemTheme.typography.body2,
+                color = TangemTheme.colors.text.tertiary,
+                maxLines = 1,
+                overflow = TextOverflow.Ellipsis,
+            )
+        }
+        ScoreStarsBlock(
+            score = state.score,
+            scoreTextStyle = TangemTheme.typography.body1,
+            horizontalSpacing = TangemTheme.dimens.spacing8,
+        )
+    }
 }
 
 @Composable
-private fun SecurityScorePlaceHolder(modifier: Modifier = Modifier) {
-    InformationBlock(
-        modifier = modifier,
-        title = {
-            Column(
-                modifier = Modifier.padding(bottom = TangemTheme.dimens.spacing6),
-                verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing4),
-            ) {
-                TextShimmer(
-                    modifier = Modifier.fillMaxWidth(),
-                    style = TangemTheme.typography.subtitle2,
-                    textSizeHeight = true,
-                )
-                TextShimmer(
-                    modifier = Modifier.fillMaxWidth(),
-                    style = TangemTheme.typography.body2,
-                    textSizeHeight = true,
-                )
-            }
-        },
-        action = {
-            Box(
-                modifier = Modifier.padding(
-                    start = TangemTheme.dimens.spacing24,
-                    bottom = TangemTheme.dimens.spacing6,
-                ),
-                contentAlignment = Alignment.CenterEnd,
-            ) {
-                TextShimmer(
-                    modifier = Modifier.fillMaxWidth(),
-                    style = TangemTheme.typography.body2,
-                    textSizeHeight = true,
-                )
-                RectangleShimmer(
-                    modifier = Modifier
-                        .height(TangemTheme.dimens.size16)
-                        .fillMaxWidth(),
-                    radius = TangemTheme.dimens.radius3,
-                )
-            }
-        },
-    )
+internal fun SecurityScoreBlockPlaceholder(modifier: Modifier = Modifier) {
+    Row(
+        modifier = modifier
+            .clip(TangemTheme.shapes.roundedCornersXMedium)
+            .background(TangemTheme.colors.background.primary)
+            .fillMaxWidth()
+            .heightIn(max = TangemTheme.dimens.size72)
+            .padding(all = TangemTheme.dimens.spacing12),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.SpaceBetween,
+    ) {
+        Column(
+            modifier = Modifier
+                .fillMaxWidth(fraction = 0.4f)
+                .padding(vertical = TangemTheme.dimens.spacing2)
+                .fillMaxHeight(),
+            verticalArrangement = Arrangement.SpaceBetween,
+        ) {
+            TextShimmer(
+                modifier = Modifier.fillMaxWidth(),
+                style = TangemTheme.typography.subtitle2,
+                textSizeHeight = true,
+            )
+            TextShimmer(
+                modifier = Modifier.fillMaxWidth(),
+                style = TangemTheme.typography.body2,
+                textSizeHeight = true,
+            )
+        }
+
+        TextShimmer(
+            modifier = Modifier.fillMaxWidth(fraction = 0.5f),
+            style = TangemTheme.typography.body2,
+            textSizeHeight = true,
+        )
+    }
 }
 
-@Preview
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(widthDp = 328, showBackground = true)
+@Preview(widthDp = 328, showBackground = true, locale = "ru")
+@Preview(widthDp = 328, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
 private fun ContentPreview() {
     TangemThemePreview {
@@ -116,14 +115,14 @@ private fun ContentPreview() {
     }
 }
 
-@Preview
-@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Preview(widthDp = 328, showBackground = true)
+@Preview(widthDp = 328, showBackground = true, uiMode = Configuration.UI_MODE_NIGHT_YES)
 @Composable
 private fun PreviewPlaceholder() {
     TangemThemePreview {
         PreviewShimmerContainer(
             shimmerContent = {
-                SecurityScorePlaceHolder(
+                SecurityScoreBlockPlaceholder(
                     modifier = Modifier.fillMaxWidth(),
                 )
             },

features/markets/impl/src/main/kotlin/com/tangem/features/markets/details/impl/ui/components/SecurityScoreBottomSheet.kt

@@ -7,8 +7,8 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material.Icon
-import androidx.compose.material.Text
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
 import androidx.compose.material3.ripple
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.remember
@@ -41,7 +41,6 @@ internal fun SecurityScoreBottomSheet(config: TangemBottomSheetConfig) {
 
     TangemBottomSheet<SecurityScoreBottomSheetContent>(
         config = config,
-        containerColor = TangemTheme.colors.background.secondary,
         addBottomInsets = false,
         title = { TangemBottomSheetTitle(title = it.title) },
         content = { content ->

features/markets/impl/src/main/kotlin/com/tangem/features/markets/details/impl/ui/components/TokenMarketDetailsBody.kt

@@ -116,7 +116,10 @@ internal fun LazyListScope.infoBlocksList(state: MarketsTokenDetailsUM.Informati
     }
 
     item(key = "listedOn") {
-        ListedOnBlock(state = state.listedOn, modifier = Modifier.blockPaddings())
+        ListedOnBlock(
+            state = state.listedOn,
+            modifier = Modifier.blockPaddings(),
+        )
     }
 
     if (state.links != null) {
@@ -134,10 +137,9 @@ private fun LazyListScope.loadingInfoBlocks() {
         InsightsBlockPlaceholder(modifier = Modifier.blockPaddings())
     }
 
-    // TODO second markets iteration
-    // item("securityScore-loading") {
-    //     SecurityScorePlaceHolder(modifier = Modifier.blockPaddings())
-    // }
+    item("securityScore-loading") {
+        SecurityScoreBlockPlaceholder(modifier = Modifier.blockPaddings())
+    }
 
     item("metrics-loading") {
         MetricsBlockPlaceholder(modifier = Modifier.blockPaddings())