Updated on 2026-08-14

core/ui/src/main/java/com/tangem/core/ui/extensions/CryptoCurrency.kt

@@ -26,8 +26,11 @@ val CryptoCurrency.networkIconResId: Int
  * @param fallbackColor The color to use as a fallback.
  * @return The extracted background color or the fallback color if extraction fails or if it is a test network token.
  */
-fun CryptoCurrency.Token.tryGetBackgroundForTokenIcon(fallbackColor: Color = TangemColorPalette.Black): Color {
-    if (network.isTestnet) return fallbackColor
+fun CryptoCurrency.Token.tryGetBackgroundForTokenIcon(
+    isGrayscale: Boolean,
+    fallbackColor: Color = TangemColorPalette.Black,
+): Color {
+    if (isGrayscale) return TangemColorPalette.Dark2
 
     return try {
         val colorHex = "#" + contractAddress.substring(range = COLOR_HEX_START_INDEX..COLOR_HEX_END_INDEX)

features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/token/icon/ContentIcon.kt

@@ -19,23 +19,31 @@ import com.tangem.feature.wallet.impl.R
 import com.tangem.feature.wallet.presentation.common.state.TokenItemState
 
 @Composable
-internal fun ContentIcon(icon: TokenItemState.IconState, colorFilter: ColorFilter?, modifier: Modifier = Modifier) {
+internal fun ContentIcon(
+    icon: TokenItemState.IconState,
+    alpha: Float,
+    colorFilter: ColorFilter?,
+    modifier: Modifier = Modifier,
+) {
     when (icon) {
         is TokenItemState.IconState.CoinIcon -> CoinIcon(
             modifier = modifier,
             url = icon.url,
             fallbackResId = icon.fallbackResId,
+            alpha = alpha,
             colorFilter = colorFilter,
         )
         is TokenItemState.IconState.TokenIcon -> TokenIcon(
             modifier = modifier,
             url = icon.url,
+            alpha = alpha,
             colorFilter = colorFilter,
             errorIcon = {
                 CustomTokenIcon(
                     modifier = modifier,
                     tint = icon.fallbackTint,
                     background = icon.fallbackBackground,
+                    alpha = alpha,
                 )
             },
         )
@@ -43,6 +51,7 @@ internal fun ContentIcon(icon: TokenItemState.IconState, colorFilter: ColorFilte
             modifier = modifier,
             tint = icon.tint,
             background = icon.background,
+            alpha = alpha,
         )
     }
 }
@@ -51,6 +60,7 @@ internal fun ContentIcon(icon: TokenItemState.IconState, colorFilter: ColorFilte
 private fun CoinIcon(
     url: String?,
     @DrawableRes fallbackResId: Int,
+    alpha: Float,
     colorFilter: ColorFilter?,
     modifier: Modifier = Modifier,
 ) {
@@ -62,10 +72,12 @@ private fun CoinIcon(
         errorIcon = {
             Image(
                 painter = painterResource(id = fallbackResId),
+                alpha = alpha,
                 colorFilter = colorFilter,
                 contentDescription = null,
             )
         },
+        alpha = alpha,
         colorFilter = colorFilter,
     )
 }
@@ -73,6 +85,7 @@ private fun CoinIcon(
 @Composable
 private fun TokenIcon(
     url: String?,
+    alpha: Float,
     colorFilter: ColorFilter?,
     errorIcon: @Composable () -> Unit,
     modifier: Modifier = Modifier,
@@ -84,17 +97,18 @@ private fun TokenIcon(
             modifier = modifier,
             iconData = url,
             errorIcon = errorIcon,
+            alpha = alpha,
             colorFilter = colorFilter,
         )
     }
 }
 
 @Composable
-private fun CustomTokenIcon(tint: Color, background: Color, modifier: Modifier = Modifier) {
+private fun CustomTokenIcon(tint: Color, background: Color, alpha: Float, modifier: Modifier = Modifier) {
     Box(
         modifier = modifier
             .background(
-                color = background,
+                color = background.copy(alpha = alpha),
                 shape = CircleShape,
             ),
         contentAlignment = Alignment.Center,
@@ -102,7 +116,7 @@ private fun CustomTokenIcon(tint: Color, background: Color, modifier: Modifier =
         Icon(
             modifier = Modifier.matchParentSize(),
             painter = painterResource(id = R.drawable.ic_custom_token_44),
-            tint = tint,
+            tint = tint.copy(alpha = alpha),
             contentDescription = null,
         )
     }
@@ -111,6 +125,7 @@ private fun CustomTokenIcon(tint: Color, background: Color, modifier: Modifier =
 @Composable
 private inline fun DefaultCurrencyIcon(
     iconData: Any,
+    alpha: Float,
     colorFilter: ColorFilter?,
     crossinline errorIcon: @Composable () -> Unit,
     modifier: Modifier = Modifier,
@@ -123,6 +138,7 @@ private inline fun DefaultCurrencyIcon(
             .build(),
         loading = { LoadingIcon() },
         error = { errorIcon() },
+        alpha = alpha,
         colorFilter = colorFilter,
         contentDescription = null,
     )

features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/token/icon/IconBadge.kt

@@ -14,7 +14,12 @@ import androidx.compose.ui.res.painterResource
 import com.tangem.core.ui.res.TangemTheme
 
 @Composable
-internal fun NetworkBadge(@DrawableRes iconResId: Int, colorFilter: ColorFilter?, modifier: Modifier = Modifier) {
+internal fun NetworkBadge(
+    @DrawableRes iconResId: Int,
+    alpha: Float,
+    colorFilter: ColorFilter?,
+    modifier: Modifier = Modifier,
+) {
     Box(
         modifier = modifier
             .size(TangemTheme.dimens.size18)
@@ -29,6 +34,7 @@ internal fun NetworkBadge(@DrawableRes iconResId: Int, colorFilter: ColorFilter?
                 .matchParentSize(),
             painter = painterResource(id = iconResId),
             colorFilter = colorFilter,
+            alpha = alpha,
             contentDescription = null,
         )
     }

features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/component/token/icon/TokenIcon.kt

@@ -17,6 +17,8 @@ import com.tangem.core.ui.res.TangemTheme
 import com.tangem.feature.wallet.presentation.common.state.TokenItemState
 
 private const val GRAY_SCALE_SATURATION = 0f
+private const val GRAY_SCALE_ALPHA = 0.4f
+private const val NORMAL_ALPHA = 1f
 
 @Composable
 internal fun TokenIcon(state: TokenItemState, modifier: Modifier = Modifier) {
@@ -58,19 +60,18 @@ private fun LockedIcon(modifier: Modifier = Modifier) {
 @Composable
 private fun BoxScope.ContentIconContainer(icon: TokenItemState.IconState, modifier: Modifier = Modifier) {
     val networkBadgeOffset = TangemTheme.dimens.spacing4
-    val colorFilter = remember(icon.isGrayscale) {
+    val (alpha, colorFilter) = remember(icon.isGrayscale) {
         if (icon.isGrayscale) {
-            ColorFilter.colorMatrix(
-                colorMatrix = ColorMatrix().apply { setToSaturation(GRAY_SCALE_SATURATION) },
-            )
+            GRAY_SCALE_ALPHA to GrayscaleColorFilter
         } else {
-            null
+            NORMAL_ALPHA to null
         }
     }
 
     ContentIcon(
         modifier = modifier,
         icon = icon,
+        alpha = alpha,
         colorFilter = colorFilter,
     )
 
@@ -80,6 +81,7 @@ private fun BoxScope.ContentIconContainer(icon: TokenItemState.IconState, modifi
                 .offset(x = networkBadgeOffset, y = -networkBadgeOffset)
                 .align(Alignment.TopEnd),
             iconResId = requireNotNull(icon.networkBadgeIconResId),
+            alpha = alpha,
             colorFilter = colorFilter,
         )
     }
@@ -92,4 +94,7 @@ private fun BoxScope.ContentIconContainer(icon: TokenItemState.IconState, modifi
 @Composable
 private inline fun BaseContainer(modifier: Modifier = Modifier, content: @Composable BoxScope.() -> Unit) {
     Box(modifier = modifier.size(size = TangemTheme.dimens.size40), content = content)
-}
+}
+
+private val GrayscaleColorFilter: ColorFilter
+    get() = ColorFilter.colorMatrix(ColorMatrix().apply { setToSaturation(GRAY_SCALE_SATURATION) })

features/wallet/impl/src/main/java/com/tangem/feature/wallet/presentation/common/utils/CryptoCurrencyToIconStateConverter.kt

@@ -30,7 +30,8 @@ internal class CryptoCurrencyToIconStateConverter : Converter<CryptoCurrencyStat
     }
 
     private fun getIconStateForToken(token: CryptoCurrency.Token, isErrorStatus: Boolean): TokenItemState.IconState {
-        val background = token.tryGetBackgroundForTokenIcon()
+        val isGrayscale = token.network.isTestnet || isErrorStatus
+        val background = token.tryGetBackgroundForTokenIcon(isGrayscale)
         val tint = getTintForTokenIcon(background)
 
         return if (token.isCustom) {
@@ -38,13 +39,13 @@ internal class CryptoCurrencyToIconStateConverter : Converter<CryptoCurrencyStat
                 tint = tint,
                 background = background,
                 networkBadgeIconResId = token.networkIconResId,
-                isGrayscale = token.network.isTestnet || isErrorStatus,
+                isGrayscale = isGrayscale,
             )
         } else {
             TokenItemState.IconState.TokenIcon(
                 url = token.iconUrl,
                 networkBadgeIconResId = token.networkIconResId,
-                isGrayscale = token.network.isTestnet || isErrorStatus,
+                isGrayscale = isGrayscale,
                 fallbackTint = tint,
                 fallbackBackground = background,
             )