Updated on 2026-08-14

This commit is contained in:
Tangem 2025-04-03 03:34:02 +05:00
parent 29625f6be7
commit 38c7183080
2 changed files with 115 additions and 5 deletions

View file

@ -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

View file

@ -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<NFTAssetUM.Media?>(
collection = listOf(
null,
NFTAssetUM.Media(
mimetype = "image/jpeg",
url = "img1",
),
),
)