Updated on 2026-08-14

common/ui/src/main/java/com/tangem/common/ui/userwallet/UserWalletItem.kt

@@ -7,7 +7,7 @@ import androidx.compose.foundation.layout.*
 import androidx.compose.material3.CardColors
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
-import androidx.compose.runtime.Composable
+import androidx.compose.runtime.*
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -61,7 +61,7 @@ fun UserWalletItem(
             verticalAlignment = Alignment.CenterVertically,
             horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing12),
         ) {
-            CardImage(imageUrl = state.imageUrl)
+            CardImage(state.imageState)
             NameAndInfo(
                 modifier = Modifier.weight(1f),
                 name = state.name,
@@ -147,39 +147,49 @@ private fun NameAndInfo(
 }
 
 @Composable
-private fun CardImage(imageUrl: String, modifier: Modifier = Modifier) {
+private fun CardImage(imageState: UserWalletItemUM.ImageState, modifier: Modifier = Modifier) {
     val imageModifier = modifier
         .width(TangemTheme.dimens.size24)
         .height(TangemTheme.dimens.size36)
         .clip(TangemTheme.shapes.roundedCornersSmall)
 
-    SubcomposeAsyncImage(
-        modifier = imageModifier,
-        model = ImageRequest.Builder(LocalContext.current)
-            .transformations(RotationTransformation(angle = 90f))
-            .size(
-                width = with(LocalDensity.current) { TangemTheme.dimens.size36.roundToPx() },
-                height = with(LocalDensity.current) { TangemTheme.dimens.size24.roundToPx() },
-            )
-            .data(imageUrl)
-            .crossfade(enable = true)
-            .allowHardware(enable = false)
-            .build(),
-        loading = {
+    when (imageState) {
+        is UserWalletItemUM.ImageState.Loading -> {
             RectangleShimmer(
                 modifier = imageModifier,
                 radius = TangemTheme.dimens.size2,
             )
-        },
-        error = {
-            Image(
+        }
+        is UserWalletItemUM.ImageState.Image -> {
+            SubcomposeAsyncImage(
                 modifier = imageModifier,
-                imageVector = ImageVector.vectorResource(R.drawable.img_card_wallet_2_gray_22_36),
+                model = ImageRequest.Builder(LocalContext.current)
+                    .transformations(RotationTransformation(angle = 90f))
+                    .size(
+                        width = with(LocalDensity.current) { TangemTheme.dimens.size36.roundToPx() },
+                        height = with(LocalDensity.current) { TangemTheme.dimens.size24.roundToPx() },
+                    )
+                    .data(imageState.artwork.verifiedArtwork?.toByteArray() ?: imageState.artwork.defaultUrl)
+                    .crossfade(enable = true)
+                    .allowHardware(enable = false)
+                    .build(),
+                loading = {
+                    RectangleShimmer(
+                        modifier = imageModifier,
+                        radius = TangemTheme.dimens.size2,
+                    )
+                },
+                error = {
+                    Image(
+                        modifier = imageModifier,
+                        imageVector = ImageVector.vectorResource(R.drawable.img_card_wallet_2_gray_22_36),
+                        contentDescription = null,
+                    )
+                },
                 contentDescription = null,
             )
-        },
-        contentDescription = null,
-    )
+        }
+    }
 }
 
 @Composable
@@ -215,7 +225,6 @@ private class UserWalletItemUMPreviewProvider : PreviewParameterProvider<UserWal
                 name = stringReference("My Wallet"),
                 information = getInformation(cardCount = 1),
                 balance = UserWalletItemUM.Balance.Locked,
-                imageUrl = "",
                 isEnabled = true,
                 onClick = {},
             ),
@@ -224,7 +233,6 @@ private class UserWalletItemUMPreviewProvider : PreviewParameterProvider<UserWal
                 name = stringReference("Old wallet"),
                 information = getInformation(cardCount = 2),
                 balance = UserWalletItemUM.Balance.Hidden,
-                imageUrl = "",
                 isEnabled = true,
                 onClick = {},
                 endIcon = UserWalletItemUM.EndIcon.Arrow,
@@ -234,7 +242,6 @@ private class UserWalletItemUMPreviewProvider : PreviewParameterProvider<UserWal
                 name = stringReference("Multi Card"),
                 information = getInformation(cardCount = 3),
                 balance = UserWalletItemUM.Balance.Failed,
-                imageUrl = "",
                 isEnabled = false,
                 endIcon = UserWalletItemUM.EndIcon.Checkmark,
                 onClick = {},
@@ -244,7 +251,6 @@ private class UserWalletItemUMPreviewProvider : PreviewParameterProvider<UserWal
                 name = stringReference("Multi Card"),
                 information = getInformation(cardCount = 3),
                 balance = UserWalletItemUM.Balance.Loading,
-                imageUrl = "",
                 isEnabled = false,
                 endIcon = UserWalletItemUM.EndIcon.Checkmark,
                 onClick = {},
@@ -257,7 +263,6 @@ private class UserWalletItemUMPreviewProvider : PreviewParameterProvider<UserWal
                     value = "1.2345 BTC",
                     isFlickering = false,
                 ),
-                imageUrl = "",
                 isEnabled = false,
                 endIcon = UserWalletItemUM.EndIcon.Checkmark,
                 onClick = {},
@@ -270,7 +275,6 @@ private class UserWalletItemUMPreviewProvider : PreviewParameterProvider<UserWal
                     value = "1.2345 BTC",
                     isFlickering = true,
                 ),
-                imageUrl = "",
                 isEnabled = false,
                 endIcon = UserWalletItemUM.EndIcon.Checkmark,
                 onClick = {},

common/ui/src/main/java/com/tangem/common/ui/userwallet/converter/UserWalletItemUMConverter.kt

@@ -2,6 +2,7 @@ package com.tangem.common.ui.userwallet.converter
 
 import com.tangem.common.ui.R
 import com.tangem.common.ui.userwallet.state.UserWalletItemUM
+import com.tangem.core.ui.components.artwork.ArtworkUM
 import com.tangem.core.ui.extensions.TextReference
 import com.tangem.core.ui.extensions.stringReference
 import com.tangem.core.ui.extensions.wrappedList
@@ -9,6 +10,7 @@ import com.tangem.core.ui.format.bigdecimal.fiat
 import com.tangem.core.ui.format.bigdecimal.format
 import com.tangem.domain.appcurrency.model.AppCurrency
 import com.tangem.domain.common.util.getCardsCount
+import com.tangem.domain.models.ArtworkModel
 import com.tangem.domain.models.StatusSource
 import com.tangem.domain.tokens.model.TotalFiatBalance
 import com.tangem.domain.wallets.models.UserWallet
@@ -31,6 +33,7 @@ class UserWalletItemUMConverter(
     private val balance: TotalFiatBalance? = null,
     private val isBalanceHidden: Boolean = false,
     private val endIcon: UserWalletItemUM.EndIcon = UserWalletItemUM.EndIcon.None,
+    private val artwork: ArtworkModel? = null,
 ) : Converter<UserWallet, UserWalletItemUM> {
 
     override fun convert(value: UserWallet): UserWalletItemUM {
@@ -40,10 +43,12 @@ class UserWalletItemUMConverter(
                 name = stringReference(name),
                 information = getInfo(userWallet = this),
                 balance = getBalanceInfo(userWallet = this),
-                imageUrl = artworkUrl,
                 isEnabled = !isLocked,
                 endIcon = endIcon,
                 onClick = { onClick(value.walletId) },
+                imageState = artwork?.let {
+                    UserWalletItemUM.ImageState.Image(ArtworkUM(it.verifiedArtwork, it.defaultUrl))
+                } ?: UserWalletItemUM.ImageState.Loading,
             )
         }
     }

common/ui/src/main/java/com/tangem/common/ui/userwallet/state/UserWalletItemUM.kt

@@ -1,5 +1,6 @@
 package com.tangem.common.ui.userwallet.state
 
+import com.tangem.core.ui.components.artwork.ArtworkUM
 import com.tangem.core.ui.extensions.TextReference
 import com.tangem.domain.wallets.models.UserWalletId
 import javax.annotation.concurrent.Immutable
@@ -10,7 +11,7 @@ data class UserWalletItemUM(
     val name: TextReference,
     val information: TextReference,
     val balance: Balance,
-    val imageUrl: String,
+    val imageState: ImageState = ImageState.Loading,
     val isEnabled: Boolean,
     val endIcon: EndIcon = EndIcon.None,
     val onClick: () -> Unit,
@@ -36,4 +37,14 @@ data class UserWalletItemUM(
             val isFlickering: Boolean,
         ) : Balance()
     }
+
+    @Immutable
+    sealed class ImageState {
+
+        data object Loading : ImageState()
+
+        data class Image(
+            val artwork: ArtworkUM,
+        ) : ImageState()
+    }
 }