diff --git 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 new file mode 100644 index 0000000000..7b3994cef9 --- /dev/null +++ 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 \ No newline at end of file diff --git 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 index 3df8a72cf5..93ed940925 100644 --- 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) diff --git 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 new file mode 100644 index 0000000000..0767feb930 --- /dev/null +++ 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, + ) + } + } +} \ No newline at end of file diff --git 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 new file mode 100644 index 0000000000..9c22bc1ddb --- /dev/null +++ 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( + 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( + 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( + 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", + ), + ), +) \ No newline at end of file