Updated on 2026-08-14
This commit is contained in:
parent
f714a0086f
commit
76a2b4d665
6 changed files with 495 additions and 3 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
),
|
||||
),
|
||||
)
|
||||
|
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
13
core/ui/src/main/res/drawable/ic_nft_empty_36.xml
Normal file
13
core/ui/src/main/res/drawable/ic_nft_empty_36.xml
Normal 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>
|
||||
15
core/ui/src/main/res/drawable/ic_nft_preview_more_16.xml
Normal file
15
core/ui/src/main/res/drawable/ic_nft_preview_more_16.xml
Normal 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>
|
||||
|
|
@ -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),
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue