diff --git a/core/ui/src/main/java/com/tangem/core/ui/components/notifications/Notification.kt b/core/ui/src/main/java/com/tangem/core/ui/components/notifications/Notification.kt index 4050ff267f..52acdaa25f 100644 --- a/core/ui/src/main/java/com/tangem/core/ui/components/notifications/Notification.kt +++ b/core/ui/src/main/java/com/tangem/core/ui/components/notifications/Notification.kt @@ -146,7 +146,7 @@ private fun MainContent( tint = iconTint, modifier = Modifier .size(size = iconSize) - .align(alignment = Alignment.CenterVertically), + .align(alignment = Alignment.Top), ) SpacerW(width = TangemTheme.dimens.spacing10) diff --git a/core/ui/src/main/res/drawable/ic_nft_placeholder_20.xml b/core/ui/src/main/res/drawable/ic_nft_placeholder_20.xml index 66b350b330..9b7c37157c 100644 --- a/core/ui/src/main/res/drawable/ic_nft_placeholder_20.xml +++ b/core/ui/src/main/res/drawable/ic_nft_placeholder_20.xml @@ -8,12 +8,17 @@ android:pathData="M4,0L16,0A4,4 0,0 1,20 4L20,16A4,4 0,0 1,16 20L4,20A4,4 0,0 1,0 16L0,4A4,4 0,0 1,4 0z"/> + android:fillColor="#EBEBEB"/> + android:pathData="M7.645,7.047C8.365,7.047 8.948,7.631 8.948,8.351C8.948,9.07 8.365,9.654 7.645,9.654C6.925,9.654 6.341,9.07 6.341,8.351C6.341,7.631 6.925,7.047 7.645,7.047Z" + android:strokeAlpha="0.3" + android:fillColor="#919191" + android:fillAlpha="0.3"/> + diff --git a/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/entity/chain/WcAddEthereumChainUM.kt b/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/entity/chain/WcAddEthereumChainUM.kt new file mode 100644 index 0000000000..53c2c9289d --- /dev/null +++ b/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/entity/chain/WcAddEthereumChainUM.kt @@ -0,0 +1,18 @@ +package com.tangem.features.walletconnect.transaction.entity.chain + +import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfigContent +import com.tangem.features.walletconnect.transaction.entity.common.WcTransactionAppInfoContentUM +import com.tangem.features.walletconnect.transaction.entity.common.WcTransactionRequestInfoUM + +internal data class WcAddEthereumChainUM( + val transaction: WcAddEthereumChainItemUM, + val transactionRequestInfo: WcTransactionRequestInfoUM, +) + +internal data class WcAddEthereumChainItemUM( + val onDismiss: () -> Unit, + val onSign: () -> Unit, + val appInfo: WcTransactionAppInfoContentUM, + val walletName: String, + 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/chain/WcAddEthereumChainModalBottomSheetContent.kt b/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/ui/chain/WcAddEthereumChainModalBottomSheetContent.kt new file mode 100644 index 0000000000..1bcae5ad7d --- /dev/null +++ b/features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/ui/chain/WcAddEthereumChainModalBottomSheetContent.kt @@ -0,0 +1,139 @@ +package com.tangem.features.walletconnect.transaction.ui.chain + +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.modal.TangemModalBottomSheet +import com.tangem.core.ui.components.bottomsheets.modal.TangemModalBottomSheetTitle +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.chain.WcAddEthereumChainItemUM +import com.tangem.features.walletconnect.transaction.entity.common.WcTransactionAppInfoContentUM +import com.tangem.features.walletconnect.transaction.ui.common.* + +@Composable +internal fun WcAddEthereumChainModalBottomSheetContent( + state: WcAddEthereumChainItemUM, + onClickTransactionRequest: () -> Unit, +) { + Column( + modifier = Modifier + .padding(horizontal = TangemTheme.dimens.spacing16), + ) { + Column( + modifier = Modifier + .clip(RoundedCornerShape(TangemTheme.dimens.radius14)) + .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(TangemTheme.dimens.spacing12), + ) + } + Column(modifier = Modifier.padding(top = TangemTheme.dimens.spacing16)) { + WcAddEthereumChainItems(state) + WcTransactionRequestButtons( + modifier = Modifier.padding(vertical = TangemTheme.dimens.spacing16), + onDismiss = state.onDismiss, + onClickActiveButton = state.onSign, + activeButtonText = resourceReference(R.string.common_sign), + isLoading = state.isLoading, + ) + } + } +} + +@Composable +private fun WcAddEthereumChainItems(state: WcAddEthereumChainItemUM) { + Column( + modifier = Modifier + .clip(RoundedCornerShape(TangemTheme.dimens.radius14)) + .background(color = TangemTheme.colors.background.action) + .fillMaxWidth() + .animateContentSize(), + ) { + DividerWithPadding(start = 0.dp, end = 0.dp) + WcWalletItem( + modifier = Modifier + .fillMaxWidth() + .padding(TangemTheme.dimens.spacing12), + walletName = state.walletName, + ) + DividerWithPadding(start = TangemTheme.dimens.spacing40, end = TangemTheme.dimens.spacing12) + } +} + +@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 WcAddEthereumChainBottomSheetPreview( + @PreviewParameter(WcAddEthereumChainStateProvider::class) state: WcAddEthereumChainItemUM, +) { + 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 = { + WcAddEthereumChainModalBottomSheetContent(state = state, onClickTransactionRequest = {}) + }, + ) + } +} + +private class WcAddEthereumChainStateProvider : CollectionPreviewParameterProvider( + listOf( + WcAddEthereumChainItemUM( + onDismiss = {}, + onSign = {}, + appInfo = WcTransactionAppInfoContentUM( + appName = "React App", + appIcon = "", + isVerified = true, + appSubtitle = "react-app.walletconnect.com", + ), + walletName = "Tangem 2.0", + ), + ), +) \ No newline at end of file