From b97ddcb3f2c64e4554246bcfcddac4345393049b Mon Sep 17 00:00:00 2001 From: Tangem Date: Tue, 13 Feb 2024 18:00:34 +0300 Subject: [PATCH] Updated on 2026-08-14 --- .../buttons/HorizontalActionChips.kt | 66 ++++--- .../ui/components/buttons/actions/Actions.kt | 2 - .../marketprice/MarketPriceBlock.kt | 78 +++++--- .../ui/components/transactions/Transaction.kt | 36 ++-- .../transactions/TxHistoryGroupTitle.kt | 28 +-- .../components/transactions/TxHistoryTitle.kt | 14 +- .../empty/EmptyTransactionBlock.kt | 11 +- .../core/ui/decorations/RoundedDecorations.kt | 4 +- .../com/tangem/core/ui/res/TangemDimens.kt | 1 + .../main/res/drawable/ic_empty_token_64.xml | 16 +- .../utils/CryptoCurrencyFormatExtensions.kt | 4 +- .../tokendetails/TokenDetailsPreviewData.kt | 172 +++++++++++++++++- .../tokendetails/ui/TokenDetailsScreen.kt | 41 +++-- .../ui/components/TokenDetailsBalanceBlock.kt | 30 +-- .../ui/components/TokenInfoBlock.kt | 13 +- .../common/component/TokenItem.kt | 6 +- .../organizetokens/OrganizeTokensScreen.kt | 4 +- 17 files changed, 379 insertions(+), 147 deletions(-) diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/buttons/HorizontalActionChips.kt b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/HorizontalActionChips.kt index 3a5bbafce5..a6c3ee8402 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/buttons/HorizontalActionChips.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/HorizontalActionChips.kt @@ -39,47 +39,57 @@ fun HorizontalActionChips( } } -@Preview +// region Preview +@Preview(widthDp = 360) @Composable private fun Preview_HorizontalActionChips_Light( - @PreviewParameter(ActionButtonConfigProvider::class) buttons: ImmutableList, + @PreviewParameter(ActionButtonConfigProvider::class) buttons: HorizontalActionChips, ) { TangemTheme(isDark = false) { - HorizontalActionChips(buttons = buttons) + HorizontalActionChips(buttons = buttons.buttons) } } -@Preview +@Preview(widthDp = 360) @Composable private fun Preview_HorizontalActionChips_Dark( - @PreviewParameter(ActionButtonConfigProvider::class) buttons: ImmutableList, + @PreviewParameter(ActionButtonConfigProvider::class) buttons: HorizontalActionChips, ) { TangemTheme(isDark = true) { - HorizontalActionChips(buttons = buttons) + HorizontalActionChips(buttons = buttons.buttons) } } -private class ActionButtonConfigProvider : CollectionPreviewParameterProvider( - collection = persistentListOf( - ActionButtonConfig( - text = TextReference.Str(value = "Buy"), - iconResId = R.drawable.ic_plus_24, - onClick = {}, - ), - ActionButtonConfig( - text = TextReference.Str(value = "Send"), - iconResId = R.drawable.ic_arrow_up_24, - onClick = {}, - ), - ActionButtonConfig( - text = TextReference.Str(value = "Receive"), - iconResId = R.drawable.ic_arrow_down_24, - onClick = {}, - ), - ActionButtonConfig( - text = TextReference.Str(value = "Exchange"), - iconResId = R.drawable.ic_exchange_vertical_24, - onClick = {}, +private class ActionButtonConfigProvider : CollectionPreviewParameterProvider( + collection = listOf( + HorizontalActionChips( + buttons = persistentListOf( + ActionButtonConfig( + text = TextReference.Str(value = "Buy"), + iconResId = R.drawable.ic_plus_24, + onClick = {}, + ), + ActionButtonConfig( + text = TextReference.Str(value = "Send"), + iconResId = R.drawable.ic_arrow_up_24, + onClick = {}, + ), + ActionButtonConfig( + text = TextReference.Str(value = "Receive"), + iconResId = R.drawable.ic_arrow_down_24, + onClick = {}, + ), + ActionButtonConfig( + text = TextReference.Str(value = "Exchange"), + iconResId = R.drawable.ic_exchange_vertical_24, + onClick = {}, + ), + ), ), ), -) \ No newline at end of file +) + +private data class HorizontalActionChips( + val buttons: ImmutableList, +) +// endregion Preview \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/buttons/actions/Actions.kt b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/actions/Actions.kt index 02cf8f05ba..9b56a22f57 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/buttons/actions/Actions.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/buttons/actions/Actions.kt @@ -11,7 +11,6 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue 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.style.TextOverflow @@ -87,7 +86,6 @@ private fun Button( Row( modifier = modifier .heightIn(min = TangemTheme.dimens.size36) - .clip(shape) .background(color = backgroundColor, shape = shape) .clickable(enabled = config.enabled, onClick = config.onClick) .padding(start = TangemTheme.dimens.spacing16, end = TangemTheme.dimens.spacing24) diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/marketprice/MarketPriceBlock.kt b/core/ui/src/main/java/com/tangem/core/ui/components/marketprice/MarketPriceBlock.kt index 3ff8fbb6fd..1626a42bce 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/marketprice/MarketPriceBlock.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/marketprice/MarketPriceBlock.kt @@ -3,7 +3,6 @@ package com.tangem.core.ui.components.marketprice import androidx.compose.animation.AnimatedContent import androidx.compose.foundation.background import androidx.compose.foundation.layout.* -import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material.Icon import androidx.compose.material.Text import androidx.compose.runtime.* @@ -35,39 +34,60 @@ import com.tangem.core.ui.utils.BigDecimalFormatter */ @Composable fun MarketPriceBlock(state: MarketPriceBlockState, modifier: Modifier = Modifier) { - var rootWidth by remember { mutableIntStateOf(value = 0) } - - Column( + Row( modifier = modifier .background( color = TangemTheme.colors.background.primary, - shape = RoundedCornerShape(TangemTheme.dimens.radius14), + shape = TangemTheme.shapes.roundedCornersXMedium, ) - .heightIn(min = TangemTheme.dimens.size70) .fillMaxWidth() - .padding(all = TangemTheme.dimens.spacing14) - .onSizeChanged { rootWidth = it.width }, - verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing6), - horizontalAlignment = Alignment.Start, + .heightIn(min = TangemTheme.dimens.size72) + .padding(all = TangemTheme.dimens.spacing12), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.SpaceBetween, ) { - Title(currencyName = state.currencySymbol) + var rootWidth by remember { mutableIntStateOf(value = 0) } - Content(state = state, rootWidth = rootWidth) + Column( + modifier = Modifier.onSizeChanged { rootWidth = it.width }, + verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing4), + horizontalAlignment = Alignment.Start, + ) { + Title(currencyName = state.currencySymbol) + Content(state = state, rootWidth = rootWidth) + } + + Icon( + modifier = Modifier.size(TangemTheme.dimens.size20), + painter = painterResource(id = R.drawable.ic_chevron_right_24), + tint = TangemTheme.colors.icon.informative, + contentDescription = null, + ) } } @Composable -private fun Title(currencyName: String) { - Text( - text = stringResource(id = R.string.wallet_marketplace_block_title, currencyName), - color = TangemTheme.colors.text.tertiary, - style = TangemTheme.typography.subtitle2, - ) +private fun Title(currencyName: String, modifier: Modifier = Modifier) { + Box( + modifier = modifier.heightIn(min = TangemTheme.dimens.size24), + contentAlignment = Alignment.CenterStart, + ) { + Text( + text = stringResource(id = R.string.wallet_marketplace_block_title, currencyName), + color = TangemTheme.colors.text.tertiary, + style = TangemTheme.typography.subtitle2, + ) + } } @Composable -private fun Content(state: MarketPriceBlockState, rootWidth: Int) { - AnimatedContent(targetState = state, label = "Update the content") { marketPriceBlockState -> +private fun Content(state: MarketPriceBlockState, rootWidth: Int, modifier: Modifier = Modifier) { + AnimatedContent( + modifier = modifier.heightIn(min = TangemTheme.dimens.size20), + targetState = state, + contentAlignment = Alignment.CenterStart, + label = "Update the content", + ) { marketPriceBlockState -> when (marketPriceBlockState) { is MarketPriceBlockState.Content, is MarketPriceBlockState.Error, @@ -97,6 +117,7 @@ private fun PriceContent(state: MarketPriceBlockState, priceWidthDp: Dp) { @Composable private fun PriceBlock(state: MarketPriceBlockState, priceWidthDp: Dp) { val priceModifier = Modifier.widthIn(max = priceWidthDp) + AnimatedContent(targetState = state, label = "Update the price block") { marketPriceBlockState -> if (marketPriceBlockState is MarketPriceBlockState.Content) { Row( @@ -127,12 +148,17 @@ private fun Price(price: String, modifier: Modifier = Modifier) { @Composable private fun PriceChangeInPercent(config: PriceChangeState.Content) { - AnimatedContent(targetState = config.type, label = "Update price change") { type -> + AnimatedContent( + targetState = config.type, + contentAlignment = Alignment.CenterStart, + label = "Update price change", + ) { type -> Row( verticalAlignment = Alignment.CenterVertically, - horizontalArrangement = Arrangement.spacedBy(space = TangemTheme.dimens.spacing4), + horizontalArrangement = Arrangement.spacedBy(space = TangemTheme.dimens.spacing2), ) { Icon( + modifier = Modifier.size(TangemTheme.dimens.size8), painter = painterResource( id = when (type) { PriceChangeType.UP -> R.drawable.ic_arrow_up_8 @@ -184,7 +210,8 @@ private fun QuoteTimeStatus() { ) } -@Preview +// region Preview +@Preview(showBackground = true, widthDp = 360) @Composable private fun Preview_MarketPriceBlock_Light( @PreviewParameter(WalletMarketPriceBlockStateProvider::class) @@ -195,7 +222,7 @@ private fun Preview_MarketPriceBlock_Light( } } -@Preview +@Preview(showBackground = true, widthDp = 360) @Composable private fun Preview_MarketPriceBlock_Dark( @PreviewParameter(WalletMarketPriceBlockStateProvider::class) @@ -227,4 +254,5 @@ private class WalletMarketPriceBlockStateProvider : CollectionPreviewParameterPr MarketPriceBlockState.Loading(currencySymbol = "BTC"), MarketPriceBlockState.Error(currencySymbol = "BTC"), ), -) \ No newline at end of file +) +// endregion Preview \ No newline at end of file diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/transactions/Transaction.kt b/core/ui/src/main/java/com/tangem/core/ui/components/transactions/Transaction.kt index 180acd8a31..271e85f311 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/transactions/Transaction.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/transactions/Transaction.kt @@ -53,12 +53,16 @@ fun Transaction(state: TransactionState, isBalanceHidden: Boolean, modifier: Mod Surface( modifier = modifier .background(TangemTheme.colors.background.primary) - .defaultMinSize(minHeight = TangemTheme.dimens.size56) .clickable( enabled = state is TransactionState.Content, onClick = (state as? TransactionState.Content)?.onClick ?: {}, ) - .padding(horizontal = TangemTheme.dimens.spacing12, vertical = TangemTheme.dimens.spacing10), + .fillMaxWidth() + .heightIn(min = TangemTheme.dimens.size56) + .padding( + vertical = TangemTheme.dimens.spacing8, + horizontal = TangemTheme.dimens.spacing12, + ), color = TangemTheme.colors.background.primary, ) { @Suppress("DestructuringDeclarationWithTooManyEntries") @@ -81,12 +85,13 @@ fun Transaction(state: TransactionState, isBalanceHidden: Boolean, modifier: Mod modifier = Modifier .padding( start = TangemTheme.dimens.spacing12, - end = TangemTheme.dimens.spacing6, + end = TangemTheme.dimens.spacing4, ) .constrainAs(titleItem) { + top.linkTo(parent.top) + bottom.linkTo(subtitleItem.top) start.linkTo(iconItem.end) end.linkTo(amountItem.start) - top.linkTo(iconItem.top) width = Dimension.fillToConstraints }, ) @@ -94,11 +99,14 @@ fun Transaction(state: TransactionState, isBalanceHidden: Boolean, modifier: Mod Subtitle( state = state, modifier = Modifier - .padding(top = TangemTheme.dimens.spacing6) - .padding(horizontal = TangemTheme.dimens.spacing12) + .padding( + start = TangemTheme.dimens.spacing12, + end = TangemTheme.dimens.spacing4, + ) .constrainAs(subtitleItem) { + top.linkTo(titleItem.bottom) + bottom.linkTo(parent.bottom) start.linkTo(iconItem.end) - top.linkTo(amountItem.bottom) end.linkTo(timestampItem.start) width = Dimension.fillToConstraints }, @@ -108,8 +116,9 @@ fun Transaction(state: TransactionState, isBalanceHidden: Boolean, modifier: Mod state = state, isBalanceHidden = isBalanceHidden, modifier = Modifier.constrainAs(amountItem) { + top.linkTo(parent.top) + bottom.linkTo(timestampItem.top) start.linkTo(titleItem.end) - top.linkTo(titleItem.top) end.linkTo(parent.end) width = Dimension.fillToConstraints }, @@ -117,12 +126,11 @@ fun Transaction(state: TransactionState, isBalanceHidden: Boolean, modifier: Mod Timestamp( state = state, - modifier = Modifier - .padding(top = TangemTheme.dimens.spacing6) - .constrainAs(timestampItem) { - top.linkTo(amountItem.bottom) - end.linkTo(parent.end) - }, + modifier = Modifier.constrainAs(timestampItem) { + top.linkTo(amountItem.bottom) + bottom.linkTo(parent.bottom) + end.linkTo(parent.end) + }, ) } } diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/transactions/TxHistoryGroupTitle.kt b/core/ui/src/main/java/com/tangem/core/ui/components/transactions/TxHistoryGroupTitle.kt index 4676fd5c49..b2b02d9e1a 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/transactions/TxHistoryGroupTitle.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/transactions/TxHistoryGroupTitle.kt @@ -1,12 +1,14 @@ package com.tangem.core.ui.components.transactions import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.padding import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.text.style.TextAlign import androidx.compose.ui.tooling.preview.Preview import com.tangem.core.ui.components.transactions.state.TxHistoryState.TxHistoryItemState import com.tangem.core.ui.res.TangemTheme @@ -20,19 +22,23 @@ import java.util.UUID */ @Composable internal fun TxHistoryGroupTitle(config: TxHistoryItemState.GroupTitle, modifier: Modifier = Modifier) { - Text( - text = config.title, + Box( modifier = modifier .background(TangemTheme.colors.background.primary) - .fillMaxWidth() .padding( - horizontal = TangemTheme.dimens.spacing16, - vertical = TangemTheme.dimens.spacing14, - ), - color = TangemTheme.colors.text.tertiary, - textAlign = TextAlign.Start, - style = TangemTheme.typography.body2, - ) + vertical = TangemTheme.dimens.spacing8, + horizontal = TangemTheme.dimens.spacing12, + ) + .fillMaxWidth() + .heightIn(min = TangemTheme.dimens.size24), + contentAlignment = Alignment.CenterStart, + ) { + Text( + text = config.title, + color = TangemTheme.colors.text.tertiary, + style = TangemTheme.typography.body2, + ) + } } @Preview diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/transactions/TxHistoryTitle.kt b/core/ui/src/main/java/com/tangem/core/ui/components/transactions/TxHistoryTitle.kt index 89a804b588..352c19d181 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/transactions/TxHistoryTitle.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/transactions/TxHistoryTitle.kt @@ -6,6 +6,7 @@ import androidx.compose.foundation.layout.* import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource @@ -24,9 +25,11 @@ internal fun TxHistoryTitle(onExploreClick: () -> Unit, modifier: Modifier = Mod Row( modifier = modifier .background(TangemTheme.colors.background.primary) - .fillMaxWidth() .padding(top = TangemTheme.dimens.spacing12) - .padding(horizontal = TangemTheme.dimens.spacing16), + .padding(horizontal = TangemTheme.dimens.spacing12) + .fillMaxWidth() + .heightIn(min = TangemTheme.dimens.size24), + verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween, ) { Text( @@ -37,13 +40,14 @@ internal fun TxHistoryTitle(onExploreClick: () -> Unit, modifier: Modifier = Mod Row( modifier = Modifier.clickable(onClick = onExploreClick), - horizontalArrangement = Arrangement.spacedBy(space = TangemTheme.dimens.spacing4), + verticalAlignment = Alignment.CenterVertically, + horizontalArrangement = Arrangement.spacedBy(space = TangemTheme.dimens.spacing2), ) { Icon( + modifier = Modifier.size(size = TangemTheme.dimens.size20), painter = painterResource(id = R.drawable.ic_compass_24), - contentDescription = null, - modifier = Modifier.size(size = TangemTheme.dimens.size18), tint = TangemTheme.colors.icon.informative, + contentDescription = null, ) Text( text = stringResource(id = R.string.common_explorer), diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/transactions/empty/EmptyTransactionBlock.kt b/core/ui/src/main/java/com/tangem/core/ui/components/transactions/empty/EmptyTransactionBlock.kt index 7f85f98d19..c2b7368924 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/transactions/empty/EmptyTransactionBlock.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/transactions/empty/EmptyTransactionBlock.kt @@ -1,8 +1,8 @@ package com.tangem.core.ui.components.transactions.empty -import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.* +import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -33,9 +33,10 @@ fun EmptyTransactionBlock(state: EmptyTransactionsBlockState, modifier: Modifier verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing24), horizontalAlignment = Alignment.CenterHorizontally, ) { - Image( + Icon( modifier = Modifier.size(TangemTheme.dimens.size64), painter = painterResource(id = state.iconRes), + tint = TangemTheme.colors.icon.inactive, contentDescription = null, ) @@ -44,7 +45,7 @@ fun EmptyTransactionBlock(state: EmptyTransactionsBlockState, modifier: Modifier textAlign = TextAlign.Center, text = state.text.resolveReference(), style = TangemTheme.typography.body2, - color = TangemTheme.colors.text.secondary, + color = TangemTheme.colors.text.tertiary, ) Buttons( @@ -84,8 +85,8 @@ private fun PairButtons(state: EmptyTransactionsBlockState.ButtonsState.PairButt } } -@Preview @Composable +@Preview(widthDp = 360, showBackground = true) private fun EmptyTransactionBlock_Light( @PreviewParameter(EmptyTransactionBlockStateProvider::class) state: EmptyTransactionsBlockState, ) { @@ -94,8 +95,8 @@ private fun EmptyTransactionBlock_Light( } } -@Preview @Composable +@Preview(widthDp = 360, showBackground = true) private fun EmptyTransactionBlock_Dark( @PreviewParameter(EmptyTransactionBlockStateProvider::class) state: EmptyTransactionsBlockState, ) { diff --git a/core/ui/src/main/java/com/tangem/core/ui/decorations/RoundedDecorations.kt b/core/ui/src/main/java/com/tangem/core/ui/decorations/RoundedDecorations.kt index 4a014cd824..78a23e7b11 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/decorations/RoundedDecorations.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/decorations/RoundedDecorations.kt @@ -19,7 +19,7 @@ fun Modifier.roundedShapeItemDecoration( modifier .then( if (addDefaultPadding) { - Modifier.padding(top = TangemTheme.dimens.spacing14) + Modifier.padding(top = TangemTheme.dimens.spacing12) } else { Modifier }, @@ -30,7 +30,7 @@ fun Modifier.roundedShapeItemDecoration( modifier .then( if (addDefaultPadding) { - Modifier.padding(top = TangemTheme.dimens.spacing14) + Modifier.padding(top = TangemTheme.dimens.spacing12) } else { Modifier }, diff --git a/core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt b/core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt index e68dfd96a0..13ec4eb908 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt @@ -68,6 +68,7 @@ data class TangemDimens internal constructor( val size50: Dp = 50.dp, val size52: Dp = 52.dp, val size56: Dp = 56.dp, + val size60: Dp = 60.dp, val size62: Dp = 62.dp, val size64: Dp = 64.dp, val size68: Dp = 68.dp, diff --git a/core/ui/src/main/res/drawable/ic_empty_token_64.xml b/core/ui/src/main/res/drawable/ic_empty_token_64.xml index 51821ac760..fa38ac65a5 100644 --- a/core/ui/src/main/res/drawable/ic_empty_token_64.xml +++ b/core/ui/src/main/res/drawable/ic_empty_token_64.xml @@ -3,22 +3,8 @@ android:height="64dp" android:viewportWidth="64" android:viewportHeight="64"> - - - - - diff --git a/core/utils/src/main/java/com/tangem/utils/CryptoCurrencyFormatExtensions.kt b/core/utils/src/main/java/com/tangem/utils/CryptoCurrencyFormatExtensions.kt index a1995e1712..a2533147f7 100644 --- a/core/utils/src/main/java/com/tangem/utils/CryptoCurrencyFormatExtensions.kt +++ b/core/utils/src/main/java/com/tangem/utils/CryptoCurrencyFormatExtensions.kt @@ -4,7 +4,7 @@ import java.math.BigDecimal import java.math.RoundingMode import java.text.DecimalFormat import java.text.NumberFormat -import java.util.* +import java.util.Locale // todo determine where to place this extensions fun BigDecimal.toFormattedString( @@ -38,7 +38,7 @@ fun BigDecimal.toFormattedCurrencyString( decimals = decimalsForRounding, roundingMode = roundingMode, ) - val formattedCurrency = currency?.let { " $it " } ?: "" + val formattedCurrency = currency?.let { " $it" } ?: "" return "$formattedAmount$formattedCurrency" } diff --git a/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/TokenDetailsPreviewData.kt b/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/TokenDetailsPreviewData.kt index 458e547586..77f27a4cac 100644 --- a/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/TokenDetailsPreviewData.kt +++ b/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/TokenDetailsPreviewData.kt @@ -1,10 +1,15 @@ package com.tangem.feature.tokendetails.presentation.tokendetails import androidx.compose.ui.graphics.Color +import androidx.paging.PagingData import com.tangem.core.ui.components.marketprice.MarketPriceBlockState +import com.tangem.core.ui.components.marketprice.PriceChangeState +import com.tangem.core.ui.components.marketprice.PriceChangeType +import com.tangem.core.ui.components.transactions.state.TransactionState import com.tangem.core.ui.components.transactions.state.TxHistoryState import com.tangem.core.ui.event.consumedEvent import com.tangem.core.ui.extensions.TextReference +import com.tangem.core.ui.extensions.stringReference import com.tangem.core.ui.res.TangemTheme import com.tangem.feature.tokendetails.presentation.tokendetails.state.* import com.tangem.feature.tokendetails.presentation.tokendetails.state.components.TokenDetailsActionButton @@ -76,8 +81,8 @@ internal object TokenDetailsPreviewData { val balanceLoading = TokenDetailsBalanceBlockState.Loading(actionButtons = actionButtons) val balanceContent = TokenDetailsBalanceBlockState.Content( actionButtons = actionButtons, - fiatBalance = "123,00$", - cryptoBalance = "866,96 USDT", + fiatBalance = "91,50$", + cryptoBalance = "966,96 XLM", ) val balanceError = TokenDetailsBalanceBlockState.Error(actionButtons = actionButtons) @@ -88,7 +93,131 @@ internal object TokenDetailsPreviewData { onRefresh = {}, ) - val tokenDetailsState = TokenDetailsState( + private val txHistoryItems = listOf( + TxHistoryState.TxHistoryItemState.Title(onExploreClick = {}), + TxHistoryState.TxHistoryItemState.GroupTitle( + title = "Today", + itemKey = "Today", + ), + TxHistoryState.TxHistoryItemState.Transaction( + state = TransactionState.Content( + txHash = "1", + amount = "-0.500913 XLM", + time = "8:41", + status = TransactionState.Content.Status.Confirmed, + direction = TransactionState.Content.Direction.OUTGOING, + onClick = {}, + iconRes = R.drawable.ic_arrow_up_24, + title = stringReference(value = "Sending"), + subtitle = stringReference(value = "to: 33BddS...ga2B"), + timestamp = 0, + ), + ), + TxHistoryState.TxHistoryItemState.Transaction( + state = TransactionState.Content( + txHash = "2", + amount = "+0.500913 XLM", + time = "8:41", + status = TransactionState.Content.Status.Confirmed, + direction = TransactionState.Content.Direction.INCOMING, + onClick = {}, + iconRes = R.drawable.ic_arrow_down_24, + title = stringReference(value = "Receiving"), + subtitle = stringReference(value = "from: 33BddS...ga2B"), + timestamp = 0, + ), + ), + TxHistoryState.TxHistoryItemState.Transaction( + state = TransactionState.Content( + txHash = "3", + amount = "+0.500913 XLM", + time = "8:41", + status = TransactionState.Content.Status.Confirmed, + direction = TransactionState.Content.Direction.INCOMING, + onClick = {}, + iconRes = R.drawable.ic_doc_24, + title = stringReference(value = "Approving"), + subtitle = stringReference(value = "from: 33BddS...ga2B"), + timestamp = 0, + ), + ), + TxHistoryState.TxHistoryItemState.Transaction( + state = TransactionState.Content( + txHash = "4", + amount = "+0.500913 XLM", + time = "8:41", + status = TransactionState.Content.Status.Confirmed, + direction = TransactionState.Content.Direction.INCOMING, + onClick = {}, + iconRes = R.drawable.ic_exchange_vertical_24, + title = stringReference(value = "Swapping"), + subtitle = stringReference(value = "contract: 33BddS...ga2B"), + timestamp = 0, + ), + ), + TxHistoryState.TxHistoryItemState.GroupTitle( + title = "Yesterday", + itemKey = "Yesterday", + ), + TxHistoryState.TxHistoryItemState.Transaction( + state = TransactionState.Content( + txHash = "5", + amount = "-0.500913 XLM", + time = "8:41", + status = TransactionState.Content.Status.Confirmed, + direction = TransactionState.Content.Direction.OUTGOING, + onClick = {}, + iconRes = R.drawable.ic_arrow_up_24, + title = stringReference(value = "Sending"), + subtitle = stringReference(value = "to: 33BddS...ga2B"), + timestamp = 0, + ), + ), + TxHistoryState.TxHistoryItemState.Transaction( + state = TransactionState.Content( + txHash = "6", + amount = "+0.500913 XLM", + time = "8:41", + status = TransactionState.Content.Status.Confirmed, + direction = TransactionState.Content.Direction.INCOMING, + onClick = {}, + iconRes = R.drawable.ic_arrow_down_24, + title = stringReference(value = "Receiving"), + subtitle = stringReference(value = "from: 33BddS...ga2B"), + timestamp = 0, + ), + ), + TxHistoryState.TxHistoryItemState.Transaction( + state = TransactionState.Content( + txHash = "7", + amount = "+0.500913 XLM", + time = "8:41", + status = TransactionState.Content.Status.Confirmed, + direction = TransactionState.Content.Direction.INCOMING, + onClick = {}, + iconRes = R.drawable.ic_doc_24, + title = stringReference(value = "Approving"), + subtitle = stringReference(value = "from: 33BddS...ga2B"), + timestamp = 0, + ), + ), + TxHistoryState.TxHistoryItemState.Transaction( + state = TransactionState.Content( + txHash = "8", + amount = "+0.500913 XLM", + time = "8:41", + status = TransactionState.Content.Status.Confirmed, + direction = TransactionState.Content.Direction.INCOMING, + onClick = {}, + iconRes = R.drawable.ic_exchange_vertical_24, + title = stringReference(value = "Swapping"), + subtitle = stringReference(value = "contract: 33BddS...ga2B"), + timestamp = 0, + ), + ), + ) + + val tokenDetailsState_1 = TokenDetailsState( topAppBarConfig = tokenDetailsTopAppBarConfig, tokenInfoBlockState = tokenInfoBlockState, tokenBalanceBlockState = balanceLoading, @@ -108,4 +237,41 @@ internal object TokenDetailsPreviewData { isMarketPriceAvailable = false, event = consumedEvent(), ) + + val tokenDetailsState_2 = TokenDetailsState( + topAppBarConfig = tokenDetailsTopAppBarConfig, + tokenInfoBlockState = tokenInfoBlockState.copy( + name = "Stellar", + ), + tokenBalanceBlockState = balanceContent, + marketPriceBlockState = MarketPriceBlockState.Content( + currencySymbol = "XLM", + price = "0.11$", + priceChangeConfig = PriceChangeState.Content( + valueInPercent = "5,16%", + type = PriceChangeType.UP, + ), + ), + notifications = persistentListOf(), + txHistoryState = TxHistoryState.NotSupported( + onExploreClick = {}, + pendingTransactions = persistentListOf(), + ), + dialogConfig = null, + pendingTxs = persistentListOf(), + swapTxs = persistentListOf(), + pullToRefreshConfig = pullToRefreshConfig, + bottomSheetConfig = null, + isBalanceHidden = false, + isMarketPriceAvailable = true, + event = consumedEvent(), + ) + + val tokenDetailsState_3 = tokenDetailsState_2.copy( + txHistoryState = TxHistoryState.Content( + contentItems = MutableStateFlow( + value = PagingData.from(txHistoryItems), + ), + ), + ) } \ No newline at end of file diff --git a/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/TokenDetailsScreen.kt b/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/TokenDetailsScreen.kt index 1f1ae20a89..070d2b0065 100644 --- a/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/TokenDetailsScreen.kt +++ b/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/TokenDetailsScreen.kt @@ -3,6 +3,7 @@ package com.tangem.feature.tokendetails.presentation.tokendetails.ui import androidx.activity.compose.BackHandler import androidx.compose.foundation.ExperimentalFoundationApi import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.LazyColumn @@ -20,6 +21,8 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter +import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider import androidx.paging.compose.collectAsLazyPagingItems import com.tangem.core.ui.components.bottomsheets.chooseaddress.ChooseAddressBottomSheet import com.tangem.core.ui.components.bottomsheets.chooseaddress.ChooseAddressBottomSheetConfig @@ -82,14 +85,12 @@ internal fun TokenDetailsScreen(state: TokenDetailsState) { .pullRefresh(pullRefreshState), ) { LazyColumn( - modifier = Modifier - .fillMaxSize(), + modifier = Modifier.fillMaxSize(), + contentPadding = PaddingValues(bottom = TangemTheme.dimens.spacing16), ) { item { TokenInfoBlock( - modifier = Modifier - .padding(top = TangemTheme.dimens.spacing4) - .padding(horizontal = horizontalPadding), + modifier = Modifier.padding(horizontal = horizontalPadding), state = state.tokenInfoBlockState, ) } @@ -181,18 +182,32 @@ internal fun TokenDetailsEventEffect(snackbarHostState: SnackbarHostState, event ) } -@Preview +// region Preview +@Preview(showBackground = true, widthDp = 360) @Composable -private fun Preview_TokenDetailsScreen_LightTheme() { - TangemTheme(isDark = false) { - TokenDetailsScreen(state = TokenDetailsPreviewData.tokenDetailsState) +private fun TokenDetailsScreenPreview_Light( + @PreviewParameter(TokenDetailsScreenParameterProvider::class) state: TokenDetailsState, +) { + TangemTheme { + TokenDetailsScreen(state) } } -@Preview +@Preview(showBackground = true, widthDp = 360) @Composable -private fun Preview_TokenDetailsScreen_DarkTheme() { +private fun TokenDetailsScreenPreview_Dark( + @PreviewParameter(TokenDetailsScreenParameterProvider::class) state: TokenDetailsState, +) { TangemTheme(isDark = true) { - TokenDetailsScreen(state = TokenDetailsPreviewData.tokenDetailsState) + TokenDetailsScreen(state) } -} \ No newline at end of file +} + +private class TokenDetailsScreenParameterProvider : CollectionPreviewParameterProvider( + collection = listOf( + TokenDetailsPreviewData.tokenDetailsState_1, + TokenDetailsPreviewData.tokenDetailsState_2, + TokenDetailsPreviewData.tokenDetailsState_3, + ), +) +// endregion Preview \ No newline at end of file diff --git a/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/components/TokenDetailsBalanceBlock.kt b/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/components/TokenDetailsBalanceBlock.kt index f9911ae521..e8fd329b15 100644 --- a/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/components/TokenDetailsBalanceBlock.kt +++ b/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/components/TokenDetailsBalanceBlock.kt @@ -4,6 +4,7 @@ import androidx.compose.foundation.layout.* import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.Preview @@ -32,18 +33,21 @@ internal fun TokenDetailsBalanceBlock( color = TangemTheme.colors.background.primary, ) { Column { - Text( + Box( modifier = Modifier - .padding( - top = TangemTheme.dimens.spacing12, - start = TangemTheme.dimens.spacing12, - end = TangemTheme.dimens.spacing12, - ), - text = stringResource(id = R.string.common_balance_title), - color = TangemTheme.colors.text.tertiary, - style = TangemTheme.typography.subtitle2, - maxLines = 1, - ) + .padding(top = TangemTheme.dimens.spacing12) + .padding(horizontal = TangemTheme.dimens.spacing12) + .fillMaxWidth() + .heightIn(min = TangemTheme.dimens.spacing24), + contentAlignment = Alignment.CenterStart, + ) { + Text( + text = stringResource(id = R.string.common_balance_title), + color = TangemTheme.colors.text.tertiary, + style = TangemTheme.typography.subtitle2, + maxLines = 1, + ) + } FiatBalance( state = state, isBalanceHidden = isBalanceHidden, @@ -124,7 +128,7 @@ private fun CryptoBalance( } } -@Preview +@Preview(widthDp = 328, heightDp = 152) @Composable private fun Preview_TokenDetailsBalanceBlock_LightTheme( @PreviewParameter(TokenDetailsBalanceBlockStateProvider::class) state: TokenDetailsBalanceBlockState, @@ -134,7 +138,7 @@ private fun Preview_TokenDetailsBalanceBlock_LightTheme( } } -@Preview +@Preview(widthDp = 328, heightDp = 152) @Composable private fun Preview_TokenDetailsBalanceBlock_DarkTheme( @PreviewParameter(TokenDetailsBalanceBlockStateProvider::class) state: TokenDetailsBalanceBlockState, diff --git a/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/components/TokenInfoBlock.kt b/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/components/TokenInfoBlock.kt index 8b48d54da4..3254286ed2 100644 --- a/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/components/TokenInfoBlock.kt +++ b/features/tokendetails/impl/src/main/kotlin/com/tangem/feature/tokendetails/presentation/tokendetails/ui/components/TokenInfoBlock.kt @@ -14,7 +14,6 @@ import androidx.compose.ui.graphics.ColorFilter import androidx.compose.ui.graphics.ColorMatrix import androidx.compose.ui.res.painterResource import androidx.compose.ui.res.stringResource -import androidx.compose.ui.text.font.FontWeight import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider @@ -29,9 +28,15 @@ private const val NORMAL_ALPHA = 1f @Composable internal fun TokenInfoBlock(state: TokenInfoBlockState, modifier: Modifier = Modifier) { - Row(modifier = modifier.fillMaxWidth()) { + Row( + modifier = modifier + .fillMaxWidth() + .heightIn(min = TangemTheme.dimens.size60), + ) { Column( - modifier = Modifier.weight(1F), + modifier = Modifier + .align(Alignment.CenterVertically) + .weight(1F), ) { Text( text = state.name, @@ -88,7 +93,7 @@ private fun NetworkInfoText(currency: TokenInfoBlockState.Currency) { ) Text( text = state.boldText, - style = TangemTheme.typography.caption2.copy(fontWeight = FontWeight.Medium), + style = TangemTheme.typography.caption1, color = TangemTheme.colors.text.primary1, ) } diff --git a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/TokenItem.kt b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/TokenItem.kt index 9c6177c05e..0b20c2a43a 100644 --- a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/TokenItem.kt +++ b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/TokenItem.kt @@ -126,7 +126,7 @@ private fun CustomContainer(state: TokenItemState, modifier: Modifier = Modifier Layout(content = content, modifier = modifier) { measurables, constraints -> val layoutWidth = constraints.maxWidth - val horizontalPadding = with(density) { dimens.size14.roundToPx() } + val horizontalPadding = with(density) { dimens.size12.roundToPx() } val verticalPadding = with(density) { dimens.size16.roundToPx() } val layoutWidthWithoutPaddings = layoutWidth - 2 * horizontalPadding @@ -137,7 +137,7 @@ private fun CustomContainer(state: TokenItemState, modifier: Modifier = Modifier /* * Title width take the whole REMAINING space. - * If FiatAmount took the whole free space, then Title will has min width. + * If FiatAmount took the whole free space, then Title will have min width. */ val title: Placeable @@ -149,7 +149,7 @@ private fun CustomContainer(state: TokenItemState, modifier: Modifier = Modifier /* * PriceChange width take the whole REMAINING space. - * If CryptoAmount took the whole free space, then PriceChange will has min width. + * If CryptoAmount took the whole free space, then PriceChange will have min width. */ val priceChange: Placeable? diff --git a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/organizetokens/OrganizeTokensScreen.kt b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/organizetokens/OrganizeTokensScreen.kt index 81cfb1f7a8..294fe204cd 100644 --- a/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/organizetokens/OrganizeTokensScreen.kt +++ b/features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/organizetokens/OrganizeTokensScreen.kt @@ -103,7 +103,7 @@ private fun TokenList( ) val listContentPadding = PaddingValues( - top = TangemTheme.dimens.spacing12, + top = TangemTheme.dimens.spacing4, bottom = TangemTheme.dimens.spacing92, start = TangemTheme.dimens.spacing16, end = TangemTheme.dimens.spacing16, @@ -245,7 +245,7 @@ private fun TopBar( Row( modifier = Modifier .fillMaxWidth() - .heightIn(min = TangemTheme.dimens.size56), + .padding(bottom = TangemTheme.dimens.spacing8), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing8), ) {