Updated on 2026-08-14

core/ui/src/main/java/com/tangem/core/ui/components/bottomsheets/modal/TangemModalBottomSheetTitle.kt

@@ -3,10 +3,7 @@ package com.tangem.core.ui.components.bottomsheets.modal
 import android.content.res.Configuration
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.height
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
@@ -20,6 +17,7 @@ import com.tangem.core.ui.components.buttons.small.TangemIconButton
 import com.tangem.core.ui.extensions.TextReference
 import com.tangem.core.ui.extensions.resolveReference
 import com.tangem.core.ui.extensions.resourceReference
+import com.tangem.core.ui.extensions.stringReference
 import com.tangem.core.ui.res.TangemTheme
 import com.tangem.core.ui.res.TangemThemePreview
 
@@ -30,6 +28,7 @@ import com.tangem.core.ui.res.TangemThemePreview
 fun TangemModalBottomSheetTitle(
     modifier: Modifier = Modifier,
     title: TextReference? = null,
+    subtitle: TextReference? = null,
     @DrawableRes startIconRes: Int? = null,
     onStartClick: (() -> Unit)? = null,
     @DrawableRes endIconRes: Int? = null,
@@ -49,13 +48,23 @@ fun TangemModalBottomSheetTitle(
                     .align(Alignment.CenterStart),
             )
         }
-        if (title != null) {
-            Text(
-                text = title.resolveReference(),
-                style = TangemTheme.typography.subtitle1,
-                color = TangemTheme.colors.text.primary1,
-                modifier = Modifier.align(Alignment.Center),
-            )
+        Column(modifier = Modifier.align(Alignment.Center)) {
+            if (title != null) {
+                Text(
+                    text = title.resolveReference(),
+                    style = TangemTheme.typography.subtitle1,
+                    color = TangemTheme.colors.text.primary1,
+                    modifier = Modifier.align(Alignment.CenterHorizontally),
+                )
+            }
+            if (subtitle != null) {
+                Text(
+                    text = subtitle.resolveReference(),
+                    style = TangemTheme.typography.caption1,
+                    color = TangemTheme.colors.text.tertiary,
+                    modifier = Modifier.align(Alignment.CenterHorizontally),
+                )
+            }
         }
         if (endIconRes != null && onEndClick != null) {
             TangemIconButton(
@@ -79,6 +88,7 @@ private fun Preview_TangemModalBottomSheetTitle(
     TangemThemePreview {
         TangemModalBottomSheetTitle(
             title = params.title,
+            subtitle = params.subtitle,
             startIconRes = params.startIconRes,
             onStartClick = params.onStartClick,
             endIconRes = params.endIconRes,
@@ -90,6 +100,7 @@ private fun Preview_TangemModalBottomSheetTitle(
 
 private data class TangemModalBottomSheetTitleData(
     val title: TextReference?,
+    val subtitle: TextReference?,
     val startIconRes: Int?,
     val onStartClick: (() -> Unit)?,
     val endIconRes: Int?,
@@ -104,6 +115,7 @@ private class TangemModalBottomSheetTitleProvider : PreviewParameterProvider<Tan
             onStartClick = {},
             endIconRes = null,
             onEndClick = null,
+            subtitle = null,
         ),
         TangemModalBottomSheetTitleData(
             title = resourceReference(R.string.wallet_title),
@@ -111,6 +123,7 @@ private class TangemModalBottomSheetTitleProvider : PreviewParameterProvider<Tan
             onStartClick = null,
             endIconRes = R.drawable.ic_close_24,
             onEndClick = {},
+            subtitle = null,
         ),
         TangemModalBottomSheetTitleData(
             title = resourceReference(R.string.wallet_title),
@@ -118,6 +131,23 @@ private class TangemModalBottomSheetTitleProvider : PreviewParameterProvider<Tan
             onStartClick = {},
             endIconRes = R.drawable.ic_close_24,
             onEndClick = {},
+            subtitle = null,
+        ),
+        TangemModalBottomSheetTitleData(
+            title = resourceReference(R.string.wallet_title),
+            subtitle = stringReference("Today • 2:37 PM"),
+            startIconRes = R.drawable.ic_back_24,
+            onStartClick = {},
+            endIconRes = R.drawable.ic_close_24,
+            onEndClick = {},
+        ),
+        TangemModalBottomSheetTitleData(
+            title = null,
+            subtitle = stringReference("Today • 2:37 PM"),
+            startIconRes = R.drawable.ic_back_24,
+            onStartClick = {},
+            endIconRes = R.drawable.ic_close_24,
+            onEndClick = {},
         ),
         TangemModalBottomSheetTitleData(
             title = null,
@@ -125,6 +155,7 @@ private class TangemModalBottomSheetTitleProvider : PreviewParameterProvider<Tan
             onStartClick = {},
             endIconRes = R.drawable.ic_close_24,
             onEndClick = {},
+            subtitle = null,
         ),
     )
 }

core/ui/src/main/java/com/tangem/core/ui/components/fields/PinTextField.kt

@@ -107,7 +107,7 @@ private fun CellDecoration(
             Box(
                 modifier = Modifier
                     .background(
-                        color = TangemTheme.colors.background.tertiary,
+                        color = TangemTheme.colors.field.primary,
                         shape = RoundedCornerShape(8.dp),
                     ),
                 contentAlignment = Alignment.Center,

core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowEnter.kt

@@ -5,26 +5,32 @@ import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.KeyboardOptions
 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
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.text.input.VisualTransformation
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.tooling.preview.PreviewParameter
 import androidx.compose.ui.tooling.preview.PreviewParameterProvider
+import androidx.compose.ui.unit.dp
 import com.tangem.core.ui.R
-import com.tangem.core.ui.components.inputrow.inner.DividerContainer
 import com.tangem.core.ui.components.fields.SimpleTextField
+import com.tangem.core.ui.components.inputrow.inner.DividerContainer
+import com.tangem.core.ui.components.tooltip.TangemTooltip
 import com.tangem.core.ui.extensions.TextReference
 import com.tangem.core.ui.extensions.resolveReference
-import com.tangem.core.ui.res.TangemThemePreview
+import com.tangem.core.ui.extensions.stringReference
 import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview
 
 /**
  * [InputRowEnter](https://www.figma.com/file/14ISV23YB1yVW1uNVwqrKv/Android?type=design&node-id=2100-799&mode=design&t=IQ5lBJEkFGU4WSvi-4)
@@ -51,6 +57,7 @@ fun InputRowEnter(
     onValueChange: (String) -> Unit,
     modifier: Modifier = Modifier,
     placeholder: TextReference? = null,
+    description: TextReference? = null,
     titleColor: Color = TangemTheme.colors.text.secondary,
     textColor: Color = TangemTheme.colors.text.primary1,
     isSingleLine: Boolean = false,
@@ -71,11 +78,32 @@ fun InputRowEnter(
                 .padding(TangemTheme.dimens.spacing12),
         ) {
             Column(modifier = Modifier.weight(1f)) {
-                Text(
-                    text = title.resolveReference(),
-                    style = TangemTheme.typography.subtitle2,
-                    color = titleColor,
-                )
+                Row(
+                    verticalAlignment = Alignment.CenterVertically,
+                    horizontalArrangement = Arrangement.spacedBy(2.dp),
+                ) {
+                    Text(
+                        text = title.resolveReference(),
+                        style = TangemTheme.typography.subtitle2,
+                        color = titleColor,
+                    )
+                    if (description != null) {
+                        TangemTooltip(
+                            modifier = Modifier
+                                .size(16.dp)
+                                .clip(CircleShape),
+                            text = description.resolveReference(),
+                            content = { contentModifier ->
+                                Icon(
+                                    modifier = contentModifier.size(16.dp),
+                                    painter = painterResource(R.drawable.ic_token_info_24),
+                                    tint = TangemTheme.colors.icon.informative,
+                                    contentDescription = null,
+                                )
+                            },
+                        )
+                    }
+                }
                 SimpleTextField(
                     value = text,
                     onValueChange = onValueChange,
@@ -121,6 +149,7 @@ private fun InputRowEnterPreview(
             text = data.text,
             iconRes = data.iconRes,
             showDivider = data.showDivider,
+            description = stringReference(""),
             onValueChange = {},
             modifier = Modifier.background(TangemTheme.colors.background.action),
         )

core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowEnterInfoAmount.kt

@@ -1,6 +1,7 @@
 package com.tangem.core.ui.components.inputrow
 
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.text.KeyboardActions
 import androidx.compose.foundation.text.KeyboardOptions
 import androidx.compose.material3.Icon
@@ -8,6 +9,7 @@ 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.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
@@ -15,6 +17,7 @@ import com.tangem.core.ui.R
 import com.tangem.core.ui.components.fields.AmountTextField
 import com.tangem.core.ui.components.fields.visualtransformations.AmountVisualTransformation
 import com.tangem.core.ui.components.inputrow.inner.DividerContainer
+import com.tangem.core.ui.components.tooltip.TangemTooltip
 import com.tangem.core.ui.extensions.TextReference
 import com.tangem.core.ui.extensions.resolveReference
 import com.tangem.core.ui.res.TangemTheme
@@ -118,6 +121,7 @@ fun InputRowEnterInfoAmountV2(
     modifier: Modifier = Modifier,
     symbol: String? = null,
     info: TextReference? = null,
+    description: TextReference? = null,
     titleColor: Color = TangemTheme.colors.text.secondary,
     textColor: Color = TangemTheme.colors.text.primary1,
     infoColor: Color = TangemTheme.colors.text.tertiary,
@@ -133,7 +137,9 @@ fun InputRowEnterInfoAmountV2(
         paddingValues = PaddingValues(horizontal = 12.dp),
     ) {
         Column(
-            modifier = Modifier.fillMaxWidth().padding(16.dp),
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(16.dp),
         ) {
             Row(verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(2.dp)) {
                 Text(
@@ -141,12 +147,22 @@ fun InputRowEnterInfoAmountV2(
                     style = TangemTheme.typography.subtitle2,
                     color = titleColor,
                 )
-                Icon(
-                    modifier = Modifier.size(16.dp),
-                    painter = painterResource(R.drawable.ic_token_info_24),
-                    tint = TangemTheme.colors.icon.informative,
-                    contentDescription = null,
-                )
+                if (description != null) {
+                    TangemTooltip(
+                        modifier = Modifier
+                            .size(16.dp)
+                            .clip(CircleShape),
+                        text = description.resolveReference(),
+                        content = { contentModifier ->
+                            Icon(
+                                modifier = contentModifier.size(16.dp),
+                                painter = painterResource(R.drawable.ic_token_info_24),
+                                tint = TangemTheme.colors.icon.informative,
+                                contentDescription = null,
+                            )
+                        },
+                    )
+                }
             }
             Row {
                 AmountTextField(

core/ui/src/main/java/com/tangem/core/ui/components/tooltip/TangemTooltip.kt

@@ -0,0 +1,86 @@
+package com.tangem.core.ui.components.tooltip
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material3.*
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.rememberCoroutineScope
+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.unit.DpSize
+import androidx.compose.ui.unit.dp
+import com.tangem.core.ui.R
+import com.tangem.core.ui.extensions.clickableSingle
+import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview
+import kotlinx.coroutines.launch
+
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TangemTooltip(text: String, content: @Composable (Modifier) -> Unit, modifier: Modifier = Modifier) {
+    val tooltipState = rememberTooltipState(isPersistent = true)
+    val coroutineScope = rememberCoroutineScope()
+    TooltipBox(
+        positionProvider = TooltipDefaults.rememberPlainTooltipPositionProvider(spacingBetweenTooltipAndAnchor = 8.dp),
+        state = tooltipState,
+        modifier = modifier,
+        tooltip = {
+            PlainTooltip(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(horizontal = 12.dp),
+                caretSize = DpSize(width = 14.dp, height = 8.dp),
+                contentColor = TangemTheme.colors.text.primary2,
+                containerColor = TangemTheme.colors.icon.secondary,
+                content = {
+                    Text(
+                        modifier = Modifier.background(TangemTheme.colors.icon.secondary),
+                        text = text,
+                        style = TangemTheme.typography.body2,
+                        color = TangemTheme.colors.text.primary2,
+                    )
+                },
+            )
+        },
+        content = {
+            content(
+                Modifier.clickableSingle(
+                    onClick = { coroutineScope.launch { tooltipState.show() } },
+                ),
+            )
+        },
+    )
+}
+
+@Preview
+@Composable
+private fun TangemTooltip_Preview() {
+    TangemThemePreview {
+        Box(
+            modifier = Modifier
+                .size(500.dp)
+                .background(TangemTheme.colors.background.secondary),
+            contentAlignment = Alignment.Center,
+        ) {
+            TangemTooltip(
+                modifier = Modifier
+                    .background(TangemTheme.colors.background.secondary)
+                    .size(64.dp),
+                text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed venenatis.",
+                content = { contentModifier ->
+                    Icon(
+                        modifier = contentModifier.size(64.dp),
+                        painter = painterResource(R.drawable.ic_token_info_24),
+                        tint = TangemTheme.colors.icon.informative,
+                        contentDescription = null,
+                    )
+                },
+            )
+        }
+    }
+}