Updated on 2026-08-14

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

@@ -6,8 +6,12 @@ import androidx.compose.animation.core.snap
 import androidx.compose.animation.core.tween
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.lazy.LazyColumn
+import androidx.compose.foundation.lazy.LazyListState
+import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.derivedStateOf
+import androidx.compose.runtime.getValue
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -38,10 +42,6 @@ import com.tangem.core.ui.res.TangemTheme
 import com.tangem.core.ui.res.TangemThemePreview
 import com.tangem.domain.markets.PriceChangeInterval
 import com.tangem.features.markets.details.impl.ui.components.*
-import com.tangem.features.markets.details.impl.ui.components.ExchangesBottomSheet
-import com.tangem.features.markets.details.impl.ui.components.InfoBottomSheet
-import com.tangem.features.markets.details.impl.ui.components.MarketTokenDetailsChart
-import com.tangem.features.markets.details.impl.ui.components.tokenMarketDetailsBody
 import com.tangem.features.markets.details.impl.ui.state.ExchangesBottomSheetContent
 import com.tangem.features.markets.details.impl.ui.state.InfoBottomSheetContent
 import com.tangem.features.markets.details.impl.ui.state.MarketsTokenDetailsUM
@@ -93,6 +93,7 @@ private fun Content(
 ) {
     val density = LocalDensity.current
     val bottomBarHeight = with(density) { WindowInsets.systemBars.getBottom(this).toDp() }
+    val lazyListState = rememberLazyListState()
 
     Column(
         modifier = modifier
@@ -100,25 +101,25 @@ private fun Content(
             .let { if (addTopBarStatusBarInsets) it.statusBarsPadding() else it }
             .fillMaxSize(),
     ) {
-        TangemTopAppBar(
+        TopBar(
-            modifier = Modifier
+            modifier = Modifier.onGloballyPositioned {
-                .onGloballyPositioned {
+                if (it.size.height > 0) {
-                    if (it.size.height > 0) {
+                    with(density) {
-                        with(density) {
+                        onHeaderSizeChange(it.size.height.toDp())
-                            onHeaderSizeChange(it.size.height.toDp())
-                        }
                     }
-                },
+                }
-            title = state.tokenName,
+            },
-            startButton = TopAppBarButtonUM.Back(
+            lazyListState = lazyListState,
-                onBackClicked = onBackClick,
+            tokenName = state.tokenName,
-                enabled = backButtonEnabled,
+            tokenPrice = state.priceText,
-            ),
+            isBackButtonEnabled = backButtonEnabled,
+            onBackClick = onBackClick,
         )
 
         SpacerH4()
 
         LazyColumn(
+            state = lazyListState,
             contentPadding = PaddingValues(bottom = bottomBarHeight),
         ) {
             item("header") {
@@ -158,6 +159,32 @@ private fun Content(
     }
 }
 
+@Composable
+private fun TopBar(
+    lazyListState: LazyListState,
+    tokenName: String,
+    tokenPrice: String,
+    isBackButtonEnabled: Boolean,
+    onBackClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val showPriceSubtitle by remember {
+        derivedStateOf {
+            lazyListState.firstVisibleItemIndex > 1
+        }
+    }
+
+    TangemTopAppBar(
+        modifier = modifier,
+        title = tokenName,
+        subtitle = if (showPriceSubtitle) tokenPrice else null,
+        startButton = TopAppBarButtonUM.Back(
+            onBackClicked = onBackClick,
+            enabled = isBackButtonEnabled,
+        ),
+    )
+}
+
 @Composable
 private fun Header(state: MarketsTokenDetailsUM, modifier: Modifier = Modifier) {
     Row(