Updated on 2026-08-14

This commit is contained in:
Tangem 2025-03-08 02:05:18 +05:00
parent f714a0086f
commit 76a2b4d665
6 changed files with 495 additions and 3 deletions

View file

@ -495,6 +495,10 @@
<string name="markets_tooltip_message">Pull this up or tap the search bar to add tokens directly from the market</string>
<string name="markets_tooltip_title">Add tokens</string>
<string name="nfc_error_unavailable">NFC is not available on your device</string>
<string name="nft_wallet_title">NFT collections</string>
<string name="nft_wallet_receive_nft">Tap here to receive first NFT</string>
<string name="nft_wallet_count">%1$d NFTs in %2$d collection</string>
<string name="nft_wallet_unable_to_load">Unable to load the data</string>
<string name="onboarding_access_code_feature_1_description">Set up a single access code to protect all your devices.</string>
<string name="onboarding_access_code_feature_1_title">Protect</string>
<string name="onboarding_access_code_feature_2_description">Set an individual access code for each card or ring later.</string>

View file

@ -0,0 +1,433 @@
package com.tangem.core.ui.components.nft
import android.content.res.Configuration
import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Card
import androidx.compose.material3.CardDefaults
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.draw.clip
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 androidx.compose.ui.unit.dp
import androidx.compose.ui.zIndex
import coil.compose.SubcomposeAsyncImage
import com.tangem.core.ui.R
import com.tangem.core.ui.components.RectangleShimmer
import com.tangem.core.ui.components.TextShimmer
import com.tangem.core.ui.components.nft.state.WalletNFTItemUM
import com.tangem.core.ui.components.nft.state.WalletNFTItemUM.Content.CollectionPreview
import com.tangem.core.ui.components.text.applyBladeBrush
import com.tangem.core.ui.extensions.stringResourceSafe
import com.tangem.core.ui.res.TangemTheme
import com.tangem.core.ui.res.TangemThemePreview
import kotlinx.collections.immutable.ImmutableList
import kotlinx.collections.immutable.persistentListOf
@Composable
fun WalletNFTItem(state: WalletNFTItemUM, onClick: () -> Unit) {
when (state) {
is WalletNFTItemUM.Hidden -> {}
is WalletNFTItemUM.Empty -> WalletNFTItemEmpty(
onClick = onClick,
)
is WalletNFTItemUM.Failed -> WalletNFTItemFailed()
is WalletNFTItemUM.Loading -> WalletNFTItemLoading()
is WalletNFTItemUM.Content -> WalletNFTItemContent(
previews = state.previews,
collectionsCount = state.collectionsCount,
assetsCount = state.assetsCount,
isFlickering = state.isFlickering,
onClick = onClick,
)
}
}
@Composable
fun WalletNFTItemEmpty(onClick: () -> Unit) {
RowContentContainer(
icon = {
Image(
modifier = Modifier,
painter = painterResource(R.drawable.ic_nft_empty_36),
contentDescription = null,
)
},
text = {
Text(
text = stringResourceSafe(R.string.nft_wallet_title),
style = TangemTheme.typography.subtitle2,
color = TangemTheme.colors.text.primary1,
)
Text(
text = stringResourceSafe(R.string.nft_wallet_receive_nft),
style = TangemTheme.typography.caption2,
color = TangemTheme.colors.text.tertiary,
)
},
action = {
ChevronArrow()
},
onClick = onClick,
)
}
@Composable
fun WalletNFTItemContent(
onClick: () -> Unit,
previews: ImmutableList<CollectionPreview>,
collectionsCount: Int,
assetsCount: Int,
isFlickering: Boolean,
) {
RowContentContainer(
icon = {
CollectionsPreviews(previews)
},
text = {
Text(
text = stringResourceSafe(R.string.nft_wallet_title),
style = TangemTheme.typography.subtitle2.applyBladeBrush(
isEnabled = isFlickering,
textColor = TangemTheme.colors.text.primary1,
),
)
Text(
text = stringResourceSafe(
id = R.string.nft_wallet_count,
assetsCount,
collectionsCount,
),
style = TangemTheme.typography.caption2.applyBladeBrush(
isEnabled = isFlickering,
textColor = TangemTheme.colors.text.tertiary,
),
)
},
action = {
ChevronArrow()
},
onClick = onClick,
)
}
@Composable
fun WalletNFTItemFailed() {
RowContentContainer(
icon = {
CollectionsPreviewsPlaceholder()
},
text = {
Text(
text = stringResourceSafe(R.string.nft_wallet_title),
style = TangemTheme.typography.body2,
color = TangemTheme.colors.text.tertiary,
)
Text(
text = stringResourceSafe(R.string.nft_wallet_unable_to_load),
style = TangemTheme.typography.caption2,
color = TangemTheme.colors.text.tertiary,
)
},
)
}
@Composable
fun WalletNFTItemLoading() {
RowContentContainer(
icon = {
CollectionsPreviewsPlaceholder()
},
text = {
TextShimmer(
modifier = Modifier.width(TangemTheme.dimens.size110),
style = TangemTheme.typography.caption2,
textSizeHeight = true,
)
TextShimmer(
modifier = Modifier
.width(TangemTheme.dimens.size80)
.padding(top = TangemTheme.dimens.spacing4),
style = TangemTheme.typography.caption2,
textSizeHeight = true,
)
},
)
}
@Composable
private fun CollectionsPreviewsPlaceholder() {
RectangleShimmer(
modifier = Modifier
.size(TangemTheme.dimens.size36),
radius = TangemTheme.dimens.radius8,
)
}
@Composable
@Suppress("MagicNumber")
private fun BoxScope.CollectionsPreviews(urls: ImmutableList<CollectionPreview>) {
val modifiers = when (urls.size) {
1 -> previews1Modifiers()
2 -> previews2Modifiers()
3 -> previews3Modifiers()
else -> previews4Modifiers()
}
Box(
modifier = Modifier
.size(TangemTheme.dimens.size36),
) {
urls.take(modifiers.size).forEachIndexed { index, s ->
val modifier = modifiers[index]
when (s) {
is CollectionPreview.Image -> {
SubcomposeAsyncImage(
modifier = modifier,
model = s,
loading = {
RectangleShimmer(radius = 0.dp)
},
contentDescription = null,
)
}
is CollectionPreview.More -> {
Image(
modifier = modifier
.background(TangemTheme.colors.stroke.primary),
painter = painterResource(R.drawable.ic_nft_preview_more_16),
contentDescription = null,
)
}
}
}
}
}
@Composable
private fun BoxScope.previews1Modifiers(): List<Modifier> = listOf(
// single image
Modifier
.size(TangemTheme.dimens.size36)
.clip(RoundedCornerShape(TangemTheme.dimens.radius6)),
)
@Composable
private fun BoxScope.previews2Modifiers(): List<Modifier> = listOf(
Modifier
.size(TangemTheme.dimens.size22)
.padding(
top = TangemTheme.dimens.spacing1,
)
.clip(RoundedCornerShape(TangemTheme.dimens.radius6))
.align(Alignment.TopStart),
Modifier
.zIndex(1f)
.clip(RoundedCornerShape(TangemTheme.dimens.radius6))
.background(TangemTheme.colors.background.primary)
.padding(
top = TangemTheme.dimens.spacing2,
start = TangemTheme.dimens.spacing2,
)
.size(TangemTheme.dimens.size22)
.clip(RoundedCornerShape(TangemTheme.dimens.radius6))
.align(Alignment.BottomEnd),
)
@Composable
private fun BoxScope.previews3Modifiers(): List<Modifier> = listOf(
Modifier
.padding(
top = TangemTheme.dimens.spacing1,
bottom = TangemTheme.dimens.spacing1,
)
.size(TangemTheme.dimens.size16)
.clip(RoundedCornerShape(5.dp))
.align(Alignment.TopStart),
Modifier
.zIndex(1f)
.padding(
top = TangemTheme.dimens.radius4,
)
.clip(RoundedCornerShape(TangemTheme.dimens.radius6))
.background(TangemTheme.colors.background.primary)
.padding(
start = TangemTheme.dimens.spacing2,
top = TangemTheme.dimens.spacing2,
end = TangemTheme.dimens.spacing1,
bottom = TangemTheme.dimens.spacing2,
)
.size(TangemTheme.dimens.size18)
.clip(RoundedCornerShape(TangemTheme.dimens.radius6))
.align(Alignment.TopEnd),
Modifier
.padding(
start = TangemTheme.dimens.spacing6,
bottom = TangemTheme.dimens.spacing1,
)
.clip(RoundedCornerShape(TangemTheme.dimens.radius4))
.size(TangemTheme.dimens.size14)
.align(Alignment.BottomStart),
)
@Composable
private fun BoxScope.previews4Modifiers(): List<Modifier> = listOf(
Modifier
.clip(RoundedCornerShape(TangemTheme.dimens.radius4))
.size(TangemTheme.dimens.size16)
.align(Alignment.TopStart),
Modifier
.clip(RoundedCornerShape(TangemTheme.dimens.radius4))
.size(TangemTheme.dimens.size16)
.align(Alignment.TopEnd),
Modifier
.clip(RoundedCornerShape(TangemTheme.dimens.radius4))
.size(TangemTheme.dimens.size16)
.align(Alignment.BottomStart),
Modifier
.clip(RoundedCornerShape(TangemTheme.dimens.radius4))
.size(TangemTheme.dimens.size16)
.align(Alignment.BottomEnd),
)
@Composable
private fun ChevronArrow() {
Icon(
modifier = Modifier,
painter = painterResource(R.drawable.ic_chevron_right_24),
contentDescription = null,
tint = TangemTheme.colors.icon.informative,
)
}
@Composable
private fun RowContentContainer(
modifier: Modifier = Modifier,
onClick: () -> Unit = {},
icon: @Composable BoxScope.() -> Unit,
text: @Composable ColumnScope.() -> Unit,
action: @Composable BoxScope.() -> Unit = {},
) {
Card(
modifier = modifier.fillMaxWidth(),
shape = RoundedCornerShape(TangemTheme.dimens.radius16),
colors = CardDefaults.cardColors(
containerColor = TangemTheme.colors.background.primary,
contentColor = TangemTheme.colors.text.primary1,
disabledContainerColor = TangemTheme.colors.background.primary,
disabledContentColor = TangemTheme.colors.text.primary1,
),
onClick = onClick,
enabled = true,
) {
Row(
modifier = Modifier
.padding(
horizontal = TangemTheme.dimens.spacing12,
vertical = TangemTheme.dimens.spacing16,
),
verticalAlignment = Alignment.CenterVertically,
) {
Row(
modifier = modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
) {
Box(
contentAlignment = Alignment.Center,
content = icon,
)
Column(
modifier = Modifier
.padding(
horizontal = TangemTheme.dimens.spacing12,
)
.weight(1f),
horizontalAlignment = Alignment.Start,
content = text,
)
Box(
modifier = Modifier.heightIn(min = TangemTheme.dimens.size24),
contentAlignment = Alignment.CenterEnd,
content = action,
)
}
}
}
}
@Preview(widthDp = 360)
@Preview(widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
@Composable
private fun Preview_WalletNFTItem_InLight(@PreviewParameter(WalletNFTItemProvider::class) state: WalletNFTItemUM) {
TangemThemePreview {
WalletNFTItem(
state = state,
onClick = {},
)
}
}
private class WalletNFTItemProvider : CollectionPreviewParameterProvider<WalletNFTItemUM>(
collection = listOf(
WalletNFTItemUM.Empty,
WalletNFTItemUM.Loading,
WalletNFTItemUM.Failed,
WalletNFTItemUM.Content(
previews = persistentListOf(
CollectionPreview.Image("img1"),
),
assetsCount = 125,
collectionsCount = 11,
isFlickering = true,
),
WalletNFTItemUM.Content(
previews = persistentListOf(
CollectionPreview.Image("img1"),
CollectionPreview.Image("img2"),
),
assetsCount = 125,
collectionsCount = 11,
isFlickering = false,
),
WalletNFTItemUM.Content(
previews = persistentListOf(
CollectionPreview.Image("img1"),
CollectionPreview.Image("img2"),
CollectionPreview.Image("img3"),
),
assetsCount = 125,
collectionsCount = 11,
isFlickering = false,
),
WalletNFTItemUM.Content(
previews = persistentListOf(
CollectionPreview.Image("img1"),
CollectionPreview.Image("img2"),
CollectionPreview.Image("img3"),
CollectionPreview.Image("img4"),
),
assetsCount = 125,
collectionsCount = 11,
isFlickering = false,
),
WalletNFTItemUM.Content(
previews = persistentListOf(
CollectionPreview.Image("img1"),
CollectionPreview.Image("img2"),
CollectionPreview.Image("img3"),
CollectionPreview.More,
),
assetsCount = 125,
collectionsCount = 11,
isFlickering = true,
),
),
)

View file

@ -0,0 +1,29 @@
package com.tangem.core.ui.components.nft.state
import androidx.compose.runtime.Immutable
import kotlinx.collections.immutable.ImmutableList
@Immutable
sealed class WalletNFTItemUM {
data object Hidden : WalletNFTItemUM()
data object Loading : WalletNFTItemUM()
data object Empty : WalletNFTItemUM()
data object Failed : WalletNFTItemUM()
data class Content(
val previews: ImmutableList<CollectionPreview>,
val collectionsCount: Int,
val assetsCount: Int,
val isFlickering: Boolean,
) : WalletNFTItemUM() {
sealed class CollectionPreview {
data class Image(val url: String) : CollectionPreview()
data object More : CollectionPreview()
}
}
}

View file

@ -0,0 +1,13 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="36dp"
android:height="36dp"
android:viewportWidth="36"
android:viewportHeight="36">
<path
android:pathData="M14.091,12.158L13.034,8.211L12.905,12.295C12.865,13.528 12.023,14.591 10.83,14.911L6.883,15.968L10.967,16.097C12.201,16.136 13.264,16.979 13.583,18.171L14.64,22.118L14.769,18.034C14.809,16.8 15.651,15.737 16.844,15.418L20.791,14.361L16.707,14.232C15.473,14.193 14.41,13.35 14.091,12.158Z"
android:fillColor="#919191"/>
<path
android:pathData="M5.726,5.951C4.08,6.141 2.9,7.629 3.09,9.275L4.697,23.183C4.887,24.829 6.375,26.009 8.021,25.819L12.954,25.249L12.791,26.281C12.534,27.918 13.652,29.454 15.288,29.711L27.536,31.638C29.173,31.896 30.708,30.778 30.966,29.141L32.893,16.892C33.15,15.255 32.032,13.719 30.396,13.462L23.583,12.39L22.958,6.98C22.768,5.334 21.28,4.154 19.634,4.344L5.726,5.951ZM19.749,5.338L5.841,6.944C4.744,7.071 3.957,8.063 4.084,9.161L5.69,23.068C5.817,24.165 6.809,24.952 7.907,24.825L21.814,23.219C22.911,23.092 23.698,22.1 23.571,21.003L21.965,7.095C21.838,5.998 20.846,5.211 19.749,5.338ZM13.779,26.437L13.985,25.13L21.929,24.212C23.575,24.022 24.755,22.534 24.565,20.888L23.702,13.421L30.24,14.45C31.331,14.621 32.077,15.645 31.905,16.736L29.978,28.985C29.806,30.076 28.782,30.822 27.691,30.65L15.444,28.723C14.353,28.552 13.607,27.528 13.779,26.437Z"
android:fillColor="#919191"
android:fillType="evenOdd"/>
</vector>

View file

@ -0,0 +1,15 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="16dp"
android:height="16dp"
android:viewportWidth="16"
android:viewportHeight="16">
<path
android:pathData="M5.135,8.769C4.714,8.769 4.365,8.42 4.365,8C4.365,7.574 4.714,7.23 5.135,7.23C5.561,7.23 5.904,7.574 5.904,8C5.904,8.42 5.561,8.769 5.135,8.769Z"
android:fillColor="#656565"/>
<path
android:pathData="M8,8.769C7.579,8.769 7.23,8.42 7.23,8C7.23,7.574 7.579,7.23 8,7.23C8.426,7.23 8.769,7.574 8.769,8C8.769,8.42 8.426,8.769 8,8.769Z"
android:fillColor="#656565"/>
<path
android:pathData="M10.865,8.769C10.444,8.769 10.095,8.42 10.095,8C10.095,7.574 10.444,7.23 10.865,7.23C11.291,7.23 11.634,7.574 11.634,8C11.634,8.42 11.291,8.769 10.865,8.769Z"
android:fillColor="#656565"/>
</vector>

View file

@ -106,9 +106,7 @@ internal class WalletSettingsModel @Inject constructor(
renameWallet = { openRenameWalletDialog(userWallet, dialogNavigation) },
isNFTFeatureEnabled = isNFTFeatureEnabled,
isNFTEnabled = isNFTEnabled,
onCheckedNFTChange = { isChecked ->
onCheckedNFTChange(isChecked)
},
onCheckedNFTChange = ::onCheckedNFTChange,
forgetWallet = {
val message = DialogMessage(
message = resourceReference(R.string.user_wallet_list_delete_prompt),