From 38c7183080890d4c9daff85fafee1c012630d4d1 Mon Sep 17 00:00:00 2001 From: Tangem Date: Thu, 3 Apr 2025 03:34:02 +0500 Subject: [PATCH] Updated on 2026-08-14 --- .../nft/collections/ui/NFTCollectionAsset.kt | 27 +++++- .../features/nft/details/ui/NFTDetailsLogo.kt | 93 +++++++++++++++++++ 2 files changed, 115 insertions(+), 5 deletions(-) create mode 100644 features/nft/impl/src/main/kotlin/com/tangem/features/nft/details/ui/NFTDetailsLogo.kt diff --git a/features/nft/impl/src/main/kotlin/com/tangem/features/nft/collections/ui/NFTCollectionAsset.kt b/features/nft/impl/src/main/kotlin/com/tangem/features/nft/collections/ui/NFTCollectionAsset.kt index f1925ed862..dfb100463f 100644 --- a/features/nft/impl/src/main/kotlin/com/tangem/features/nft/collections/ui/NFTCollectionAsset.kt +++ b/features/nft/impl/src/main/kotlin/com/tangem/features/nft/collections/ui/NFTCollectionAsset.kt @@ -1,16 +1,20 @@ package com.tangem.features.nft.collections.ui import android.content.res.Configuration +import androidx.compose.foundation.Image import androidx.compose.foundation.background import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.aspectRatio +import androidx.compose.foundation.layout.size 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.layout.ContentScale import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.tooling.preview.PreviewParameter @@ -24,6 +28,7 @@ import com.tangem.core.ui.res.TangemTheme import com.tangem.core.ui.res.TangemThemePreview import com.tangem.features.nft.collections.entity.NFTCollectionAssetUM import com.tangem.features.nft.collections.entity.NFTSalePriceUM +import com.tangem.features.nft.impl.R @Composable internal fun NFTCollectionAsset(state: NFTCollectionAssetUM, modifier: Modifier = Modifier) { @@ -42,11 +47,7 @@ internal fun NFTCollectionAsset(state: NFTCollectionAssetUM, modifier: Modifier RectangleShimmer(radius = TangemTheme.dimens.radius16) }, error = { - Box( - modifier = Modifier - .clip(shape = TangemTheme.shapes.roundedCornersXMedium) - .background(TangemTheme.colors.field.primary), - ) + Placeholder() }, contentScale = ContentScale.Crop, contentDescription = null, @@ -66,6 +67,22 @@ internal fun NFTCollectionAsset(state: NFTCollectionAssetUM, modifier: Modifier } } +@Composable +private fun Placeholder(modifier: Modifier = Modifier) { + Box( + modifier = modifier + .clip(shape = TangemTheme.shapes.roundedCornersXMedium) + .background(TangemTheme.colors.field.focused), + contentAlignment = Alignment.Center, + ) { + Image( + modifier = Modifier.size(TangemTheme.dimens.size52), + painter = painterResource(R.drawable.ic_nft_placeholder_76), + contentDescription = null, + ) + } +} + @Preview(widthDp = 180, showBackground = true) @Preview(widthDp = 180, uiMode = Configuration.UI_MODE_NIGHT_YES) @Composable diff --git a/features/nft/impl/src/main/kotlin/com/tangem/features/nft/details/ui/NFTDetailsLogo.kt b/features/nft/impl/src/main/kotlin/com/tangem/features/nft/details/ui/NFTDetailsLogo.kt new file mode 100644 index 0000000000..6c49a7f86e --- /dev/null +++ b/features/nft/impl/src/main/kotlin/com/tangem/features/nft/details/ui/NFTDetailsLogo.kt @@ -0,0 +1,93 @@ +package com.tangem.features.nft.details.ui + +import android.content.res.Configuration +import androidx.compose.foundation.Image +import androidx.compose.foundation.background +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.aspectRatio +import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.size +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.layout.ContentScale +import androidx.compose.ui.platform.LocalContext +import androidx.compose.ui.res.painterResource +import androidx.compose.ui.tooling.preview.Preview +import androidx.compose.ui.tooling.preview.PreviewParameter +import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider +import coil.compose.SubcomposeAsyncImage +import coil.request.ImageRequest +import com.tangem.core.ui.components.RectangleShimmer +import com.tangem.core.ui.res.TangemTheme +import com.tangem.core.ui.res.TangemThemePreview +import com.tangem.features.nft.details.entity.NFTAssetUM +import com.tangem.features.nft.impl.R + +@Composable +internal fun NFTDetailsLogo(state: NFTAssetUM.Media?, modifier: Modifier = Modifier) { + if (state == null) { + Placeholder( + modifier = modifier + .fillMaxWidth(), + ) + } else { + SubcomposeAsyncImage( + modifier = modifier + .fillMaxWidth() + .clip(TangemTheme.shapes.roundedCornersXMedium), + model = ImageRequest.Builder(LocalContext.current) + .data(state.url) + .crossfade(true) + .build(), + loading = { + RectangleShimmer(radius = TangemTheme.dimens.radius16) + }, + error = { + Placeholder() + }, + contentScale = ContentScale.Crop, + contentDescription = null, + ) + } +} + +@Composable +private fun Placeholder(modifier: Modifier = Modifier) { + Box( + modifier = modifier + .clip(TangemTheme.shapes.roundedCornersXMedium) + .background(TangemTheme.colors.field.focused), + contentAlignment = Alignment.Center, + ) { + Image( + modifier = Modifier.size(TangemTheme.dimens.size120), + painter = painterResource(R.drawable.ic_nft_placeholder_76), + contentDescription = null, + ) + } +} + +@Preview(widthDp = 360) +@Preview(widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES) +@Composable +private fun Preview_NFTDetailsInfoBlock(@PreviewParameter(NFTAssetMediaProvider::class) state: NFTAssetUM.Media?) { + TangemThemePreview { + NFTDetailsLogo( + state = state, + modifier = Modifier + .aspectRatio(1f), + ) + } +} + +private class NFTAssetMediaProvider : CollectionPreviewParameterProvider( + collection = listOf( + null, + NFTAssetUM.Media( + mimetype = "image/jpeg", + url = "img1", + ), + ), +) \ No newline at end of file