diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowEnterInfoAmount.kt b/core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowEnterInfoAmount.kt index 5878b03d62..5880ca113c 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowEnterInfoAmount.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/inputrow/InputRowEnterInfoAmount.kt @@ -3,8 +3,7 @@ package com.tangem.core.ui.components.inputrow import androidx.compose.foundation.layout.* import androidx.compose.foundation.text.KeyboardActions import androidx.compose.foundation.text.KeyboardOptions -import androidx.compose.material3.Icon -import androidx.compose.material3.Text +import androidx.compose.material3.* import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -15,6 +14,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 +118,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 +134,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 +144,20 @@ 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), + 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( diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/tooltip/TangemTooltip.kt b/core/ui/src/main/java/com/tangem/core/ui/components/tooltip/TangemTooltip.kt new file mode 100644 index 0000000000..65936ee076 --- /dev/null +++ b/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, + ) + }, + ) + } + } +} \ No newline at end of file diff --git a/features/send-v2/impl/src/main/java/com/tangem/features/send/v2/feeselector/ui/FeeSelectorModalBottomSheet.kt b/features/send-v2/impl/src/main/java/com/tangem/features/send/v2/feeselector/ui/FeeSelectorModalBottomSheet.kt index ccde03a163..84bd570f54 100644 --- a/features/send-v2/impl/src/main/java/com/tangem/features/send/v2/feeselector/ui/FeeSelectorModalBottomSheet.kt +++ b/features/send-v2/impl/src/main/java/com/tangem/features/send/v2/feeselector/ui/FeeSelectorModalBottomSheet.kt @@ -338,6 +338,7 @@ private fun ExpandedCustomFeeItems( title = field.title, titleColor = TangemTheme.colors.text.tertiary, info = field.label, + description = field.footer, keyboardOptions = field.keyboardOptions, keyboardActions = field.keyboardActions, onValueChange = { onValueChange(index, it) }, @@ -351,6 +352,7 @@ private fun ExpandedCustomFeeItems( title = field.title, titleColor = TangemTheme.colors.text.tertiary, symbol = field.symbol, + description = field.footer, onValueChange = { onValueChange(index, it) }, keyboardOptions = field.keyboardOptions, keyboardActions = field.keyboardActions,