Updated on 2026-08-14

common/ui/src/main/java/com/tangem/common/ui/account/AccountCryptoPortfolioItemStateConverter.kt

@@ -47,7 +47,7 @@ class AccountCryptoPortfolioItemStateConverter(
         )
         return TokenItemState.Content(
             id = account.accountId.toItemId(),
-            iconState = AccountIconItemStateConverter.convert(this),
+            iconState = AccountIconItemStateConverter().convert(this),
             titleState = TokenItemState.TitleState.Content(
                 text = accountName.toUM().value,
             ),
@@ -73,7 +73,7 @@ class AccountCryptoPortfolioItemStateConverter(
     private fun Account.CryptoPortfolio.mapToLoadingState(): TokenItemState.Content {
         return TokenItemState.Content(
             id = account.accountId.toItemId(),
-            iconState = AccountIconItemStateConverter.convert(account),
+            iconState = AccountIconItemStateConverter().convert(account),
             titleState = TokenItemState.TitleState.Content(
                 text = accountName.toUM().value,
             ),
@@ -95,7 +95,7 @@ class AccountCryptoPortfolioItemStateConverter(
     private fun Account.CryptoPortfolio.mapToUnreachableState(): TokenItemState.Unreachable {
         return TokenItemState.Unreachable(
             id = account.accountId.toItemId(),
-            iconState = AccountIconItemStateConverter.convert(account),
+            iconState = AccountIconItemStateConverter().convert(account),
             titleState = TokenItemState.TitleState.Content(
                 text = accountName.toUM().value,
             ),

common/ui/src/main/java/com/tangem/common/ui/account/AccountIconItemStateConverter.kt

@@ -1,11 +1,14 @@
 package com.tangem.common.ui.account
 
+import com.tangem.core.ui.components.account.AccountIconSize
 import com.tangem.core.ui.components.currency.icon.CurrencyIconState
 import com.tangem.domain.models.account.Account
 import com.tangem.domain.models.account.CryptoPortfolioIcon
 import com.tangem.utils.converter.Converter
 
-object AccountIconItemStateConverter : Converter<Account, CurrencyIconState.CryptoPortfolio> {
+class AccountIconItemStateConverter(
+    val size: AccountIconSize = AccountIconSize.Default,
+) : Converter<Account, CurrencyIconState.CryptoPortfolio> {
 
     override fun convert(value: Account): CurrencyIconState.CryptoPortfolio = when (value) {
         is Account.CryptoPortfolio -> when {
@@ -13,11 +16,13 @@ object AccountIconItemStateConverter : Converter<Account, CurrencyIconState.Cryp
                 char = value.accountName.toUM().value,
                 color = value.icon.color.getUiColor(),
                 isGrayscale = false,
+                size = size,
             )
             else -> CurrencyIconState.CryptoPortfolio.Icon(
                 resId = value.icon.value.getResId(),
                 color = value.icon.color.getUiColor(),
                 isGrayscale = false,
+                size = size,
             )
         }
         is Account.Payment -> TODO("[REDACTED_JIRA]")

common/ui/src/main/java/com/tangem/common/ui/notifications/Notifications.kt

@@ -1,17 +1,35 @@
 package com.tangem.common.ui.notifications
 
+import android.content.res.Configuration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListScope
 import androidx.compose.foundation.lazy.itemsIndexed
+import androidx.compose.foundation.pager.HorizontalPager
+import androidx.compose.foundation.pager.rememberPagerState
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.PreviewParameterProvider
 import androidx.compose.ui.unit.dp
 import com.tangem.core.ui.components.notifications.Notification
 import com.tangem.core.ui.components.notifications.NotificationConfig
+import com.tangem.core.ui.ds.TangemPagerIndicator
 import com.tangem.core.ui.ds.message.TangemMessage
+import com.tangem.core.ui.ds.message.TangemMessageEffect
 import com.tangem.core.ui.ds.message.TangemMessageUM
+import com.tangem.core.ui.extensions.stringReference
 import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreviewRedesign
 import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
 
 fun LazyListScope.notifications(
     notifications: ImmutableList<NotificationUM>,
@@ -110,4 +128,103 @@ fun LazyListScope.notifications(
             )
         },
     )
-}
+}
+
+/**
+ * Displays a list of notifications in a stacked manner using a HorizontalPager.
+ * If there are multiple notifications, a PagerIndicator is shown below the notifications.
+ *
+ * @param notifications     List of TangemMessageUM objects to be displayed.
+ * @param containerColor    Color to be used for the background of the notifications.
+ * @param modifier          Optional Modifier for the notifications.
+ */
+fun LazyListScope.stackedNotifications(
+    notifications: ImmutableList<TangemMessageUM>?,
+    containerColor: Color,
+    modifier: Modifier = Modifier,
+) {
+    item {
+        if (!notifications.isNullOrEmpty()) {
+            val notificationsPagerState = rememberPagerState(
+                pageCount = { notifications.size },
+            )
+
+            Column(
+                modifier = Modifier
+                    .fillMaxSize()
+                    .padding(top = TangemTheme.dimens2.x2),
+                horizontalAlignment = Alignment.CenterHorizontally,
+                verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens2.x2),
+            ) {
+                HorizontalPager(
+                    state = notificationsPagerState,
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .animateItem(null, null, null),
+                ) { page ->
+                    TangemMessage(
+                        messageUM = notifications[page],
+                        contentColor = containerColor,
+                        modifier = modifier,
+                    )
+                }
+                if (notifications.size > 1) {
+                    TangemPagerIndicator(
+                        pagerState = notificationsPagerState,
+                    )
+                }
+            }
+        }
+    }
+}
+
+// region Preview
+@Composable
+@Preview(showBackground = true, widthDp = 360)
+@Preview(showBackground = true, widthDp = 360, uiMode = Configuration.UI_MODE_NIGHT_YES)
+private fun StackedNotifications_Preview(
+    @PreviewParameter(StackedNotificationsPreviewProvider::class) params: ImmutableList<TangemMessageUM>,
+) {
+    TangemThemePreviewRedesign {
+        val contentColor = TangemTheme.colors2.surface.level1
+        LazyColumn(
+            modifier = Modifier
+                .background(contentColor)
+                .padding(16.dp),
+        ) {
+            stackedNotifications(
+                notifications = params,
+                containerColor = contentColor,
+            )
+        }
+    }
+}
+
+private class StackedNotificationsPreviewProvider : PreviewParameterProvider<ImmutableList<TangemMessageUM>> {
+    override val values: Sequence<ImmutableList<TangemMessageUM>>
+        get() = sequenceOf(
+            persistentListOf(
+                TangemMessageUM(
+                    id = "0",
+                    title = stringReference("First notification"),
+                    subtitle = stringReference("This is the first notification"),
+                    messageEffect = TangemMessageEffect.Magic,
+                ),
+            ),
+            persistentListOf(
+                TangemMessageUM(
+                    id = "0",
+                    title = stringReference("First notification"),
+                    subtitle = stringReference("This is the first notification"),
+                    messageEffect = TangemMessageEffect.Magic,
+                ),
+                TangemMessageUM(
+                    id = "1",
+                    title = stringReference("Second notification"),
+                    subtitle = stringReference("This is the second notification"),
+                    messageEffect = TangemMessageEffect.Card,
+                ),
+            ),
+        )
+}
+// endregion