Updated on 2026-08-14

core/res/src/main/res/values-ru/strings.xml

@@ -47,6 +47,7 @@
     <string name="common_accept">Принять</string>
     <string name="common_add">Добавить</string>
     <string name="common_apply">Применить</string>
+    <string name="common_approval">Одобрение</string>
     <string name="common_attention">Внимание</string>
     <string name="common_balance">Баланс: %s</string>
     <string name="common_biometric_authentication">биометрическую аутентификацию</string>
@@ -74,7 +75,9 @@
     <string name="common_start">Начать</string>
     <string name="common_submit">Отправить</string>
     <string name="common_success">Успешно</string>
+    <string name="common_swap">Обмен</string>
     <string name="common_terms_and_conditions">условия участия</string>
+    <string name="common_transfer">Перевод</string>
     <string name="common_understand">Я понял</string>
     <string name="common_yes">Да</string>
     <string name="contract_address_copied_message">Адрес контракта скопирован!</string>
@@ -386,7 +389,6 @@
     <string name="swapping_permission_unlimited">Безлимитно</string>
     <string name="swapping_success_view_explorer_button_title">Открыть в обозревателе</string>
     <string name="swapping_success_view_title">В процессе</string>
-    <string name="swapping_swap">Обмен</string>
     <string name="swapping_swap_action">Обменять</string>
     <string name="swapping_swap_of_to">Обмен %s на</string>
     <string name="swapping_tangem_fee_disclaimer">Котировки включают дополнительную комиссию Tangem в размере %s. Это помогает нам предоставлять первоклассный продукт.</string>

core/res/src/main/res/values-zh-rTW/strings.xml

@@ -69,6 +69,7 @@
     <string name="common_start">開始</string>
     <string name="common_submit">提交</string>
     <string name="common_success">成功</string>
+    <string name="common_swap">交換</string>
     <string name="common_terms_and_conditions">條款和條件</string>
     <string name="common_understand">我了解</string>
     <string name="common_yes">是</string>
@@ -367,7 +368,6 @@
     <string name="swapping_permission_subheader">要繼續，您需要允許 1inch 智能合約使用您的 %s</string>
     <string name="swapping_success_view_explorer_button_title">在瀏覽器中查看</string>
     <string name="swapping_success_view_title">進行中</string>
-    <string name="swapping_swap">交換</string>
     <string name="swapping_swap_action">交易</string>
     <string name="swapping_swap_of_to">交易 %s 至</string>
     <string name="swapping_tangem_fee_disclaimer">此外，報價包括%s的 Tangem 費用。這有助於我們提供一流的產品</string>

core/res/src/main/res/values/strings.xml

@@ -45,6 +45,7 @@
     <string name="common_accept">Accept</string>
     <string name="common_add">Add</string>
     <string name="common_apply">Apply</string>
+    <string name="common_approval">Approval</string>
     <string name="common_attention">Attention</string>
     <string name="common_balance">Balance: %s</string>
     <string name="common_biometric_authentication">biometric authentication</string>
@@ -72,7 +73,9 @@
     <string name="common_start">Start</string>
     <string name="common_submit">Submit</string>
     <string name="common_success">Success</string>
+    <string name="common_swap">Swap</string>
     <string name="common_terms_and_conditions">terms and conditions</string>
+    <string name="common_transfer">Transfer</string>
     <string name="common_understand">I understand</string>
     <string name="common_yes">Yes</string>
     <string name="contract_address_copied_message">Contract address copied!</string>
@@ -382,7 +385,6 @@
     <string name="swapping_permission_unlimited">Unlimited</string>
     <string name="swapping_success_view_explorer_button_title">View in Explorer</string>
     <string name="swapping_success_view_title">In progress</string>
-    <string name="swapping_swap">Swap</string>
     <string name="swapping_swap_action">Swap</string>
     <string name="swapping_swap_of_to">Swap of %s to</string>
     <string name="swapping_tangem_fee_disclaimer">Quotes include an additional Tangem commission of %s. This helps us deliver a top-of-the-line product.</string>

core/ui/build.gradle.kts

@@ -9,8 +9,10 @@ dependencies {
     implementation(deps.androidx.fragment.ktx)
 
     /** Compose */
+    implementation(deps.compose.constraintLayout)
     implementation(deps.compose.foundation)
     implementation(deps.compose.material)
+    implementation(deps.compose.material3)
     implementation(deps.compose.ui.tooling)
 
     /** Other libraries */

core/ui/src/main/java/com/tangem/core/ui/components/transactions/Transaction.kt

@@ -0,0 +1,342 @@
+package com.tangem.core.ui.components.transactions
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Surface
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.tooling.preview.PreviewParameter
+import androidx.compose.ui.tooling.preview.datasource.CollectionPreviewParameterProvider
+import androidx.constraintlayout.compose.ConstraintLayout
+import androidx.constraintlayout.compose.Dimension
+import com.tangem.core.ui.R
+import com.tangem.core.ui.components.CircleShimmer
+import com.tangem.core.ui.components.RectangleShimmer
+import com.tangem.core.ui.res.TangemTheme
+
+/**
+ * Transaction component
+ *
+ * @param state state
+ *
+ * @see <a href = "https://www.figma.com/file/RU7AIgwHtGdMfy83T5UOoR/iOS?type=design&node-id=446-438&t=71jPDxMMk4e0
+ * a025-4">Figma Component</a>
+ *
+[REDACTED_AUTHOR]
+ */
+@Composable
+fun Transaction(state: TransactionState) {
+    Surface(
+        modifier = Modifier
+            .background(TangemTheme.colors.background.primary)
+            .defaultMinSize(minHeight = TangemTheme.dimens.size56)
+            .padding(horizontal = TangemTheme.dimens.spacing12, vertical = TangemTheme.dimens.spacing10),
+        color = TangemTheme.colors.background.primary,
+    ) {
+        @Suppress("DestructuringDeclarationWithTooManyEntries")
+        ConstraintLayout(modifier = Modifier.fillMaxWidth()) {
+            val (iconItem, titleItem, subtitleItem, amountItem, timestampItem) = createRefs()
+
+            Icon(
+                state = state,
+                modifier = Modifier
+                    .size(TangemTheme.dimens.size40)
+                    .constrainAs(iconItem) {
+                        start.linkTo(parent.start)
+                        centerVerticallyTo(parent)
+                    },
+            )
+
+            Title(
+                state = state,
+                modifier = Modifier
+                    .padding(horizontal = TangemTheme.dimens.spacing12)
+                    .constrainAs(titleItem) {
+                        start.linkTo(iconItem.end)
+                        top.linkTo(iconItem.top)
+                    },
+            )
+
+            Subtitle(
+                state = state,
+                modifier = Modifier
+                    .padding(top = TangemTheme.dimens.spacing6)
+                    .padding(horizontal = TangemTheme.dimens.spacing12)
+                    .constrainAs(subtitleItem) {
+                        start.linkTo(iconItem.end)
+                        top.linkTo(amountItem.bottom)
+                        end.linkTo(timestampItem.start)
+                        width = Dimension.fillToConstraints
+                    },
+            )
+
+            Amount(
+                state = state,
+                modifier = Modifier.constrainAs(amountItem) {
+                    start.linkTo(titleItem.end)
+                    top.linkTo(titleItem.top)
+                    end.linkTo(parent.end)
+                    width = Dimension.fillToConstraints
+                },
+            )
+
+            Timestamp(
+                state = state,
+                modifier = Modifier
+                    .padding(top = TangemTheme.dimens.spacing6)
+                    .constrainAs(timestampItem) {
+                        top.linkTo(amountItem.bottom)
+                        end.linkTo(parent.end)
+                    },
+            )
+        }
+    }
+}
+
+@Composable
+private fun Icon(state: TransactionState, modifier: Modifier = Modifier) {
+    when (state) {
+        is TransactionState.Content -> {
+            Box(
+                modifier = modifier
+                    .size(TangemTheme.dimens.size40)
+                    .background(
+                        color = when (state) {
+                            is TransactionState.ProcessedTransactionContent -> {
+                                TangemTheme.colors.icon.attention.copy(alpha = 0.1f)
+                            }
+                            is TransactionState.CompletedTransactionContent -> {
+                                TangemTheme.colors.background.secondary
+                            }
+                        },
+                        shape = CircleShape,
+                    ),
+            ) {
+                Icon(
+                    painter = painterResource(
+                        id = when (state) {
+                            is TransactionState.Sending,
+                            is TransactionState.Send,
+                            -> R.drawable.ic_arrow_up_24
+
+                            is TransactionState.Receiving,
+                            is TransactionState.Receive,
+                            -> R.drawable.ic_arrow_down_24
+
+                            is TransactionState.Approving,
+                            is TransactionState.Approved,
+                            -> R.drawable.ic_doc_24
+
+                            is TransactionState.Swapping,
+                            is TransactionState.Swapped,
+                            -> R.drawable.ic_exchange_vertical_24
+                        },
+                    ),
+                    contentDescription = null,
+                    modifier = Modifier
+                        .size(TangemTheme.dimens.size20)
+                        .align(Alignment.Center),
+                    tint = when (state) {
+                        is TransactionState.ProcessedTransactionContent -> TangemTheme.colors.icon.attention
+                        is TransactionState.CompletedTransactionContent -> TangemTheme.colors.icon.informative
+                    },
+                )
+            }
+        }
+        is TransactionState.Loading -> {
+            CircleShimmer(modifier = modifier.size(TangemTheme.dimens.size40))
+        }
+    }
+}
+
+@Composable
+private fun Title(state: TransactionState, modifier: Modifier = Modifier) {
+    when (state) {
+        is TransactionState.ProcessedTransactionContent -> {
+            Row(modifier = modifier, horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing6)) {
+                Text(
+                    text = stringResource(
+                        id = when (state) {
+                            is TransactionState.Sending -> R.string.common_transfer
+                            is TransactionState.Receiving -> R.string.common_transfer
+                            is TransactionState.Approving -> R.string.common_approval
+                            is TransactionState.Swapping -> R.string.common_swap
+                        },
+                    ),
+                    color = TangemTheme.colors.text.primary1,
+                    style = TangemTheme.typography.subtitle2,
+                )
+
+                Image(
+                    modifier = Modifier.align(Alignment.CenterVertically),
+                    painter = painterResource(id = R.drawable.img_loader_15),
+                    contentDescription = null,
+                )
+            }
+        }
+        is TransactionState.CompletedTransactionContent -> {
+            Text(
+                text = stringResource(
+                    id = when (state) {
+                        is TransactionState.Send -> R.string.common_transfer
+                        is TransactionState.Receive -> R.string.common_transfer
+                        is TransactionState.Approved -> R.string.common_approval
+                        is TransactionState.Swapped -> R.string.common_swap
+                    },
+                ),
+                modifier = modifier,
+                color = TangemTheme.colors.text.primary1,
+                style = TangemTheme.typography.subtitle2,
+            )
+        }
+        is TransactionState.Loading -> {
+            RectangleShimmer(
+                modifier = modifier.size(width = TangemTheme.dimens.size70, height = TangemTheme.dimens.size12),
+            )
+        }
+    }
+}
+
+@Composable
+private fun Subtitle(state: TransactionState, modifier: Modifier = Modifier) {
+    when (state) {
+        is TransactionState.Content -> {
+            Text(
+                text = when (state) {
+                    is TransactionState.Sending -> "to: ${state.address}"
+                    is TransactionState.Send -> "to: ${state.address}"
+                    is TransactionState.Receiving -> "from: ${state.address}"
+                    is TransactionState.Receive -> "from: ${state.address}"
+                    is TransactionState.Approving -> "from: ${state.address}"
+                    is TransactionState.Approved -> "from: ${state.address}"
+                    is TransactionState.Swapping -> "contract: ${state.address}"
+                    is TransactionState.Swapped -> "contract ${state.address}"
+                },
+                modifier = modifier,
+                textAlign = TextAlign.Start,
+                color = TangemTheme.colors.text.tertiary,
+                style = TangemTheme.typography.caption,
+            )
+        }
+        is TransactionState.Loading -> {
+            RectangleShimmer(
+                modifier = modifier.size(width = TangemTheme.dimens.size52, height = TangemTheme.dimens.size12),
+            )
+        }
+    }
+}
+
+@Composable
+private fun Amount(state: TransactionState, modifier: Modifier = Modifier) {
+    when (state) {
+        is TransactionState.Content -> {
+            Text(
+                text = state.amount,
+                modifier = modifier,
+                textAlign = TextAlign.End,
+                color = TangemTheme.colors.text.primary1,
+                style = TangemTheme.typography.body2,
+            )
+        }
+        is TransactionState.Loading -> {
+            RectangleShimmer(
+                modifier = modifier.size(width = TangemTheme.dimens.size40, height = TangemTheme.dimens.size12),
+            )
+        }
+    }
+}
+
+@Composable
+private fun Timestamp(state: TransactionState, modifier: Modifier = Modifier) {
+    when (state) {
+        is TransactionState.Content -> {
+            Text(
+                text = state.timestamp,
+                modifier = modifier,
+                textAlign = TextAlign.End,
+                color = TangemTheme.colors.text.tertiary,
+                style = TangemTheme.typography.caption,
+            )
+        }
+        is TransactionState.Loading -> {
+            RectangleShimmer(
+                modifier = modifier.size(width = TangemTheme.dimens.size40, height = TangemTheme.dimens.size12),
+            )
+        }
+    }
+}
+
+@Preview
+@Composable
+private fun Preview_TransactionItem_LightTheme(
+    @PreviewParameter(TransactionItemStateProvider::class) state: TransactionState,
+) {
+    TangemTheme(isDark = false) {
+        Transaction(state)
+    }
+}
+
+@Preview
+@Composable
+private fun Preview_TransactionItem_DarkTheme(
+    @PreviewParameter(TransactionItemStateProvider::class) state: TransactionState,
+) {
+    TangemTheme(isDark = true) {
+        Transaction(state)
+    }
+}
+
+private class TransactionItemStateProvider : CollectionPreviewParameterProvider<TransactionState>(
+    collection = listOf(
+        TransactionState.Sending(
+            address = "33BddS...ga2B",
+            amount = "-0.500913 BTC",
+            timestamp = "8:41",
+        ),
+        TransactionState.Receiving(
+            address = "33BddS...ga2B",
+            amount = "+0.500913 BTC",
+            timestamp = "8:41",
+        ),
+        TransactionState.Approving(
+            address = "33BddS...ga2B",
+            amount = "+0.500913 BTC",
+            timestamp = "8:41",
+        ),
+        TransactionState.Swapping(
+            address = "33BddS...ga2B",
+            amount = "+0.500913 BTC",
+            timestamp = "8:41",
+        ),
+        TransactionState.Send(
+            address = "33BddS...ga2B",
+            amount = "-0.500913 BTC",
+            timestamp = "8:41",
+        ),
+        TransactionState.Receive(
+            address = "33BddS...ga2B",
+            amount = "+0.500913 BTC",
+            timestamp = "8:41",
+        ),
+        TransactionState.Approved(
+            address = "33BddS...ga2B",
+            amount = "+0.500913 BTC",
+            timestamp = "8:41",
+        ),
+        TransactionState.Swapped(
+            address = "33BddS...ga2B",
+            amount = "+0.500913 BTC",
+            timestamp = "8:41",
+        ),
+        TransactionState.Loading,
+    ),
+)

core/ui/src/main/java/com/tangem/core/ui/components/transactions/TransactionState.kt

@@ -0,0 +1,155 @@
+package com.tangem.core.ui.components.transactions
+
+/**
+ * Transaction component state
+ *
+[REDACTED_AUTHOR]
+ */
+sealed interface TransactionState {
+
+    /**
+     * Content state
+     *
+     * @property address   address
+     * @property amount    amount
+     * @property timestamp timestamp
+     */
+    sealed class Content(
+        open val address: String,
+        open val amount: String,
+        open val timestamp: String,
+    ) : TransactionState
+
+    /**
+     * Content state for processed transaction
+     *
+     * @property address   address
+     * @property amount    amount
+     * @property timestamp timestamp
+     */
+    sealed class ProcessedTransactionContent(
+        override val address: String,
+        override val amount: String,
+        override val timestamp: String,
+    ) : Content(address, amount, timestamp)
+
+    /**
+     * Content state for completed transaction
+     *
+     * @property address   address
+     * @property amount    amount
+     * @property timestamp timestamp
+     */
+    sealed class CompletedTransactionContent(
+        override val address: String,
+        override val amount: String,
+        override val timestamp: String,
+    ) : Content(address, amount, timestamp)
+
+    /**
+     * Processed sending transaction state
+     *
+     * @property address   address
+     * @property amount    amount
+     * @property timestamp timestamp
+     */
+    data class Sending(
+        override val address: String,
+        override val amount: String,
+        override val timestamp: String,
+    ) : ProcessedTransactionContent(address, amount, timestamp)
+
+    /**
+     * Processed receiving transaction state
+     *
+     * @property address   address
+     * @property amount    amount
+     * @property timestamp timestamp
+     */
+    data class Receiving(
+        override val address: String,
+        override val amount: String,
+        override val timestamp: String,
+    ) : ProcessedTransactionContent(address, amount, timestamp)
+
+    /**
+     * Processed approving transaction state
+     *
+     * @property address   address
+     * @property amount    amount
+     * @property timestamp timestamp
+     */
+    data class Approving(
+        override val address: String,
+        override val amount: String,
+        override val timestamp: String,
+    ) : ProcessedTransactionContent(address, amount, timestamp)
+
+    /**
+     * Processed swapping transaction state
+     *
+     * @property address   address
+     * @property amount    amount
+     * @property timestamp timestamp
+     */
+    data class Swapping(
+        override val address: String,
+        override val amount: String,
+        override val timestamp: String,
+    ) : ProcessedTransactionContent(address, amount, timestamp)
+
+    /**
+     * Completed sending transaction state
+     *
+     * @property address   address
+     * @property amount    amount
+     * @property timestamp timestamp
+     */
+    data class Send(
+        override val address: String,
+        override val amount: String,
+        override val timestamp: String,
+    ) : CompletedTransactionContent(address, amount, timestamp)
+
+    /**
+     * Completed receiving transaction state
+     *
+     * @property address   address
+     * @property amount    amount
+     * @property timestamp timestamp
+     */
+    data class Receive(
+        override val address: String,
+        override val amount: String,
+        override val timestamp: String,
+    ) : CompletedTransactionContent(address, amount, timestamp)
+
+    /**
+     * Completed approving transaction state
+     *
+     * @property address   address
+     * @property amount    amount
+     * @property timestamp timestamp
+     */
+    data class Approved(
+        override val address: String,
+        override val amount: String,
+        override val timestamp: String,
+    ) : CompletedTransactionContent(address, amount, timestamp)
+
+    /**
+     * Completed swapping transaction state
+     *
+     * @property address   address
+     * @property amount    amount
+     * @property timestamp timestamp
+     */
+    data class Swapped(
+        override val address: String,
+        override val amount: String,
+        override val timestamp: String,
+    ) : CompletedTransactionContent(address, amount, timestamp)
+
+    /** Loading state */
+    object Loading : TransactionState
+}

core/ui/src/main/java/com/tangem/core/ui/res/TangemDimens.kt

@@ -56,9 +56,11 @@ data class TangemDimens internal constructor(
     val size46: Dp = 46.dp,
     val size48: Dp = 48.dp,
     val size50: Dp = 50.dp,
+    val size52: Dp = 52.dp,
     val size56: Dp = 56.dp,
     val size62: Dp = 62.dp,
     val size68: Dp = 68.dp,
+    val size70: Dp = 70.dp,
     val size72: Dp = 72.dp,
     val size80: Dp = 80.dp,
     val size84: Dp = 84.dp,

core/ui/src/main/res/drawable/ic_doc_24.xml

@@ -0,0 +1,9 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <path
+      android:pathData="M6,2C5.47,2 4.961,2.211 4.586,2.586C4.211,2.961 4,3.47 4,4V20C4,20.53 4.211,21.039 4.586,21.414C4.961,21.789 5.47,22 6,22H18C18.53,22 19.039,21.789 19.414,21.414C19.789,21.039 20,20.53 20,20V8L14,2H6ZM6,4H13V9H18V20H6V4ZM8,12V14H16V12H8ZM8,16V18H13V16H8Z"
+      android:fillColor="#000000" />
+</vector>

features/swap/presentation/src/main/java/com/tangem/feature/swap/ui/SwapScreenContent.kt

@@ -54,7 +54,7 @@ internal fun SwapScreenContent(state: SwapStateHolder, onPermissionWarningClick:
 
         Column {
             AppBarWithBackButton(
-                text = stringResource(R.string.swapping_swap),
+                text = stringResource(R.string.common_swap),
                 onBackClick = state.onBackClicked,
                 iconRes = R.drawable.ic_close_24,
             )
@@ -348,7 +348,7 @@ private fun MainButton(state: SwapStateHolder, onPermissionWarningClick: () -> U
         else -> {
             PrimaryButtonIconEnd(
                 modifier = Modifier.fillMaxWidth(),
-                text = stringResource(id = R.string.swapping_swap),
+                text = stringResource(id = R.string.common_swap),
                 iconResId = R.drawable.ic_tangem_24,
                 enabled = state.swapButton.enabled,
                 showProgress = state.swapButton.loading,
@@ -384,7 +384,7 @@ private val receiveCard = SwapCardData(
     coinId = "",
 )
 
-val stateSelectable = SelectableItemsState<TxFee>(
+val stateSelectable = SelectableItemsState(
     selectedItem = Item(
         0,
         TextReference.Str("Balance"),

features/swap/presentation/src/main/java/com/tangem/feature/swap/ui/SwapSuccessScreen.kt

@@ -39,7 +39,7 @@ fun SwapSuccessScreen(state: SwapSuccessStateHolder, onBack: () -> Unit) {
             },
             topBar = {
                 AppBarWithBackButton(
-                    text = stringResource(R.string.swapping_swap),
+                    text = stringResource(R.string.common_swap),
                     onBackClick = onBack,
                     iconRes = R.drawable.ic_close_24,
                 )