Updated on 2026-08-14

2025-05-27 19:10:50 +04:00 · 2025-05-27 19:10:50 +04:00 · 0782cfbd51
commit 0782cfbd51
parent 654b2ff948
4 changed files with 265 additions and 34 deletions
--- a/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/entity/send/WcSendTransactionUM.kt
+++ b/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/entity/send/WcSendTransactionUM.kt
@ -0,0 +1,24 @@
+package com.tangem.features.walletconnect.transaction.entity.send
+
+import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfigContent
+import com.tangem.features.walletconnect.transaction.entity.blockaid.WcEstimatedWalletChangesUM
+import com.tangem.features.walletconnect.transaction.entity.common.WcNetworkInfoUM
+import com.tangem.features.walletconnect.transaction.entity.common.WcTransactionAppInfoContentUM
+import com.tangem.features.walletconnect.transaction.entity.common.WcTransactionRequestInfoUM
+
+internal data class WcSendTransactionUM(
+    val transaction: WcSendTransactionItemUM,
+    val transactionRequestInfo: WcTransactionRequestInfoUM,
+)
+
+internal data class WcSendTransactionItemUM(
+    val onDismiss: () -> Unit,
+    val onSend: () -> Unit,
+    val appInfo: WcTransactionAppInfoContentUM,
+    val estimatedWalletChanges: WcEstimatedWalletChangesUM,
+    val walletName: String,
+    val networkInfo: WcNetworkInfoUM,
+    val networkFee: String? = null,
+    val address: String? = null,
+    val isLoading: Boolean = false,
+) : TangemBottomSheetConfigContent
--- a/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/ui/approve/WcApproveTransactionModalBottomSheet.kt
+++ b/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/ui/approve/WcApproveTransactionModalBottomSheet.kt
@ -66,7 +66,11 @@ internal fun WcApproveTransactionModalBottomSheetContent(
                WcSpendAllowanceItem(state.spendAllowance)
                Spacer(Modifier.height(TangemTheme.dimens.spacing16))
            }
-            WcApproveTransactionItems(state)
+            WcSendTransactionItems(
+                walletName = state.walletName,
+                networkInfo = state.networkInfo,
+                networkFee = state.networkFee,
+            )
            WcTransactionRequestButtons(
                modifier = Modifier.padding(vertical = TangemTheme.dimens.spacing16),
                onDismiss = state.onDismiss,
@ -78,39 +82,6 @@ internal fun WcApproveTransactionModalBottomSheetContent(
    }
 }

-@Composable
-private fun WcApproveTransactionItems(state: WcApproveTransactionItemUM) {
-    Column(
-        modifier = Modifier
-            .clip(RoundedCornerShape(TangemTheme.dimens.radius14))
-            .background(color = TangemTheme.colors.background.action)
-            .fillMaxWidth()
-            .animateContentSize(),
-    ) {
-        val itemsModifier = Modifier
-            .fillMaxWidth()
-            .padding(TangemTheme.dimens.spacing12)
-
-        DividerWithPadding(start = 0.dp, end = 0.dp)
-        WcWalletItem(
-            modifier = itemsModifier,
-            walletName = state.walletName,
-        )
-        DividerWithPadding(start = TangemTheme.dimens.spacing40, end = TangemTheme.dimens.spacing12)
-        WcNetworkItem(
-            modifier = itemsModifier,
-            networkInfo = state.networkInfo,
-        )
-        if (!state.networkFee.isNullOrEmpty()) {
-            DividerWithPadding(start = TangemTheme.dimens.spacing40, end = TangemTheme.dimens.spacing12)
-            WcNetworkFeeItem(
-                modifier = itemsModifier,
-                networkFeeText = state.networkFee,
-            )
-        }
-    }
-}
-
@Composable
@Preview(showBackground = true, device = Devices.PIXEL_7_PRO)
@Preview(showBackground = true, device = Devices.PIXEL_7_PRO, uiMode = Configuration.UI_MODE_NIGHT_YES)
--- a/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/ui/common/WcSendTransactionItems.kt
+++ b/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/ui/common/WcSendTransactionItems.kt
@ -0,0 +1,61 @@
+package com.tangem.features.walletconnect.transaction.ui.common
+
+import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import com.tangem.core.ui.components.divider.DividerWithPadding
+import com.tangem.core.ui.res.TangemTheme
+import com.tangem.features.walletconnect.transaction.entity.common.WcNetworkInfoUM
+
+@Composable
+internal fun WcSendTransactionItems(
+    walletName: String,
+    networkInfo: WcNetworkInfoUM,
+    modifier: Modifier = Modifier,
+    networkFee: String? = null,
+    address: String? = null,
+) {
+    Column(
+        modifier = modifier
+            .clip(RoundedCornerShape(TangemTheme.dimens.radius14))
+            .background(color = TangemTheme.colors.background.action)
+            .fillMaxWidth()
+            .animateContentSize(),
+    ) {
+        val itemsModifier = Modifier
+            .fillMaxWidth()
+            .padding(TangemTheme.dimens.spacing12)
+
+        DividerWithPadding(start = 0.dp, end = 0.dp)
+        WcWalletItem(
+            modifier = itemsModifier,
+            walletName = walletName,
+        )
+        DividerWithPadding(start = TangemTheme.dimens.spacing40, end = TangemTheme.dimens.spacing12)
+        WcNetworkItem(
+            modifier = itemsModifier,
+            networkInfo = networkInfo,
+        )
+        if (!address.isNullOrEmpty()) {
+            DividerWithPadding(start = 40.dp, end = 12.dp)
+            WcAddressItem(
+                modifier = itemsModifier,
+                addressText = address,
+            )
+        }
+        if (!networkFee.isNullOrEmpty()) {
+            DividerWithPadding(start = TangemTheme.dimens.spacing40, end = TangemTheme.dimens.spacing12)
+            WcNetworkFeeItem(
+                modifier = itemsModifier,
+                networkFeeText = networkFee,
+            )
+        }
+    }
+}
--- a/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/ui/send/WcSendTransactionModalBottomSheet.kt
+++ b/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/ui/send/WcSendTransactionModalBottomSheet.kt
@ -0,0 +1,175 @@
+package com.tangem.features.walletconnect.transaction.ui.send
+
+import android.content.res.Configuration
+import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.tooling.preview.Devices
+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 com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig
+import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfigContent
+import com.tangem.core.ui.components.bottomsheets.modal.TangemModalBottomSheet
+import com.tangem.core.ui.components.bottomsheets.modal.TangemModalBottomSheetTitle
+import com.tangem.core.ui.components.bottomsheets.modal.TangemModalBottomSheetWithFooter
+import com.tangem.core.ui.components.divider.DividerWithPadding
+import com.tangem.core.ui.extensions.resourceReference
+import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview
+import com.tangem.features.walletconnect.connections.ui.WcAppInfoItem
+import com.tangem.features.walletconnect.impl.R
+import com.tangem.features.walletconnect.transaction.entity.blockaid.WcEstimatedWalletChangeUM
+import com.tangem.features.walletconnect.transaction.entity.blockaid.WcEstimatedWalletChangesUM
+import com.tangem.features.walletconnect.transaction.entity.common.WcNetworkInfoUM
+import com.tangem.features.walletconnect.transaction.entity.common.WcTransactionAppInfoContentUM
+import com.tangem.features.walletconnect.transaction.entity.send.WcSendTransactionItemUM
+import com.tangem.features.walletconnect.transaction.ui.blockaid.WcEstimatedWalletChangesItem
+import com.tangem.features.walletconnect.transaction.ui.common.WcSendTransactionItems
+import com.tangem.features.walletconnect.transaction.ui.common.WcSmallTitleItem
+import com.tangem.features.walletconnect.transaction.ui.common.WcTransactionRequestButtons
+import com.tangem.features.walletconnect.transaction.ui.common.WcTransactionRequestItem
+import kotlinx.collections.immutable.persistentListOf
+
+@Composable
+internal fun WcSendTransactionModalBottomSheet(
+    state: WcSendTransactionItemUM,
+    onClickTransactionRequest: () -> Unit,
+    onDismiss: () -> Unit,
+) {
+    TangemModalBottomSheetWithFooter<TangemBottomSheetConfigContent.Empty>(
+        config = TangemBottomSheetConfig(
+            isShown = true,
+            onDismissRequest = onDismiss,
+            content = TangemBottomSheetConfigContent.Empty,
+        ),
+        containerColor = TangemTheme.colors.background.tertiary,
+        title = { config ->
+            TangemModalBottomSheetTitle(
+                title = resourceReference(R.string.wc_wallet_connect),
+                endIconRes = R.drawable.ic_close_24,
+                onEndClick = onDismiss,
+            )
+        },
+        content = {
+            Column(
+                modifier = Modifier
+                    .padding(horizontal = 16.dp),
+            ) {
+                Column(
+                    modifier = Modifier
+                        .clip(RoundedCornerShape(14.dp))
+                        .background(color = TangemTheme.colors.background.action)
+                        .fillMaxWidth()
+                        .animateContentSize(),
+                ) {
+                    WcSmallTitleItem(R.string.wc_request_from)
+                    WcAppInfoItem(
+                        iconUrl = state.appInfo.appIcon,
+                        title = state.appInfo.appName,
+                        subtitle = state.appInfo.appSubtitle,
+                        isVerified = state.appInfo.isVerified,
+                    )
+                    DividerWithPadding(start = 0.dp, end = 0.dp)
+                    WcTransactionRequestItem(
+                        iconRes = R.drawable.ic_doc_new_24,
+                        modifier = Modifier
+                            .fillMaxWidth()
+                            .clickable { onClickTransactionRequest() }
+                            .padding(12.dp),
+                    )
+                }
+                Column(modifier = Modifier.padding(top = 16.dp)) {
+                    WcEstimatedWalletChangesItem(state.estimatedWalletChanges)
+                    Spacer(Modifier.height(16.dp))
+                    WcSendTransactionItems(
+                        walletName = state.walletName,
+                        networkInfo = state.networkInfo,
+                        networkFee = state.networkFee,
+                        address = state.address,
+                    )
+                }
+            }
+        },
+        footer = {
+            WcTransactionRequestButtons(
+                modifier = Modifier.padding(horizontal = 16.dp, vertical = 16.dp),
+                onDismiss = state.onDismiss,
+                onClickActiveButton = state.onSend,
+                activeButtonText = resourceReference(R.string.common_send),
+                isLoading = state.isLoading,
+            )
+        },
+    )
+}
+
+@Composable
+@Preview(showBackground = true, device = Devices.PIXEL_7_PRO)
+@Preview(showBackground = true, device = Devices.PIXEL_7_PRO, uiMode = Configuration.UI_MODE_NIGHT_YES)
+private fun WcSendTransactionBottomSheetPreview(
+    @PreviewParameter(WcSendTransactionStateProvider::class) state: WcSendTransactionItemUM,
+) {
+    TangemThemePreview {
+        TangemModalBottomSheet<WcSendTransactionItemUM>(
+            config = TangemBottomSheetConfig(
+                isShown = true,
+                onDismissRequest = {},
+                content = state,
+            ),
+            containerColor = TangemTheme.colors.background.tertiary,
+            title = {
+                TangemModalBottomSheetTitle(
+                    title = resourceReference(R.string.wallet_connect_title),
+                    endIconRes = R.drawable.ic_close_24,
+                    onEndClick = {},
+                    startIconRes = null,
+                    onStartClick = {},
+                )
+            },
+            content = {
+                WcSendTransactionModalBottomSheet(state = state, onClickTransactionRequest = {}, onDismiss = {})
+            },
+        )
+    }
+}
+
+private class WcSendTransactionStateProvider : CollectionPreviewParameterProvider<WcSendTransactionItemUM>(
+    listOf(
+        WcSendTransactionItemUM(
+            onDismiss = {},
+            onSend = {},
+            appInfo = WcTransactionAppInfoContentUM(
+                appName = "React App",
+                appIcon = "",
+                isVerified = true,
+                appSubtitle = "react-app.walletconnect.com",
+            ),
+            estimatedWalletChanges = WcEstimatedWalletChangesUM(
+                items = persistentListOf(
+                    WcEstimatedWalletChangeUM(
+                        iconRes = R.drawable.ic_send_new_24,
+                        title = resourceReference(R.string.common_send),
+                        description = "- 42 USDT",
+                        tokenIconUrl = "https://tangem.com",
+                    ),
+                    WcEstimatedWalletChangeUM(
+                        iconRes = R.drawable.ic_receive_new_24,
+                        title = resourceReference(R.string.common_receive),
+                        description = "+ 1,131.46 MATIC",
+                        tokenIconUrl = "https://tangem.com",
+                    ),
+                ),
+            ),
+            walletName = "Tangem 2.0",
+            networkInfo = WcNetworkInfoUM(name = "Ethereum", iconRes = R.drawable.img_eth_22),
+            networkFee = "~ 0.22 $",
+            address = "0x345FF...34FA",
+        ),
+    ),
+)