Updated on 2026-08-14

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

@@ -504,6 +504,7 @@
   <string name="markets_tooltip_message">Pull this up or tap the search bar to add tokens directly from the market</string>
   <string name="markets_tooltip_title">Add tokens</string>
   <string name="nfc_error_unavailable">NFC is not available on your device</string>
+  <string name="nft_about_title">About NFT</string>
   <plurals name="nft_collections_count">
     <item quantity="one">%d item</item>
     <item quantity="other">%d items</item>
@@ -1251,13 +1252,26 @@
   <string name="wc_alert_verified_domain_title">Verified domain</string>
   <string name="wc_alert_wrong_card_description">Wrong card or ring selected in Tangem App</string>
   <string name="wc_alert_wrong_card_title">We\'ve got some kind of problem</string>
+  <string name="wc_common_connect">Connect</string>
+  <string name="wc_common_network">Network</string>
+  <string name="wc_common_networks">Networks</string>
+  <string name="wc_common_wallet">Wallet</string>
+  <string name="wc_connection_reqeust_can_view_balance">View your wallet balance and activity</string>
+  <string name="wc_connection_reqeust_cant_sign">Sign transactions without your notice</string>
+  <string name="wc_connection_reqeust_request_approval">Request approval for transactions</string>
+  <string name="wc_connection_reqeust_will_not">Will not be able to</string>
+  <string name="wc_connection_reqeust_would_like">Would like to</string>
+  <string name="wc_connection_request">Connection request</string>
   <string name="wc_connections">Connections</string>
   <string name="wc_disconnect_all">Disconnect all</string>
   <string name="wc_disconnect_all_alert_desc">Text about discnected all dApps</string>
   <string name="wc_disconnect_all_alert_title">Disconect All dApps</string>
+  <string name="wc_missing_required_network_description">Add the %s network to your profile for this wallet</string>
+  <string name="wc_missing_required_network_title">The wallet has no required networks</string>
   <string name="wc_new_connection">New connection</string>
   <string name="wc_no_sessions_desc">Connect your wallet to a different dApps</string>
   <string name="wc_no_sessions_title">No sessions</string>
+  <string name="wc_wallet_connect">Wallet connect</string>
   <string name="welcome_interrupted_backup_alert_discard">Discard</string>
   <string name="welcome_interrupted_backup_alert_message">You have an interrupted backup. Do you want to resume?</string>
   <string name="welcome_interrupted_backup_alert_resume">Yes, resume</string>

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

@@ -0,0 +1,16 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:autoMirrored="true"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+
+    <path
+        android:fillColor="#0099FF"
+        android:pathData="M14.488,8.842C14.965,9.743 15.236,10.77 15.236,11.861C15.236,15.425 12.347,18.313 8.783,18.313C5.22,18.313 2.331,15.425 2.331,11.861C2.331,8.297 5.22,5.408 8.783,5.408C9.397,5.408 9.99,5.494 10.552,5.654C10.266,5.87 9.994,6.106 9.737,6.363C9.557,6.543 9.386,6.732 9.225,6.928C9.079,6.915 8.932,6.908 8.783,6.908C6.048,6.908 3.831,9.126 3.831,11.861C3.831,14.596 6.048,16.813 8.783,16.813C11.519,16.813 13.736,14.596 13.736,11.861C13.736,11.024 13.528,10.235 13.161,9.543C13.542,9.203 13.998,8.963 14.488,8.842Z" />
+
+    <path
+        android:fillColor="#0099FF"
+        android:pathData="M9.531,14.88C9.054,13.979 8.783,12.951 8.783,11.861C8.783,8.297 11.672,5.408 15.236,5.408C18.799,5.408 21.688,8.297 21.688,11.861C21.688,15.425 18.799,18.313 15.236,18.313C14.622,18.313 14.029,18.228 13.467,18.068C13.753,17.852 14.025,17.615 14.282,17.359C14.462,17.178 14.633,16.99 14.794,16.794C14.94,16.807 15.087,16.813 15.236,16.813C17.971,16.813 20.188,14.596 20.188,11.861C20.188,9.126 17.971,6.908 15.236,6.908C12.501,6.908 10.283,9.126 10.283,11.861C10.283,12.698 10.491,13.487 10.858,14.178C10.477,14.519 10.021,14.758 9.531,14.88Z" />
+
+</vector>

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

@@ -0,0 +1,18 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="18dp"
+    android:height="24dp"
+    android:autoMirrored="true"
+    android:viewportWidth="18"
+    android:viewportHeight="24">
+
+    <path
+        android:fillColor="#919191"
+        android:fillType="evenOdd"
+        android:pathData="M4.47,13.597C4.763,13.304 5.237,13.304 5.53,13.597L9,17.067L12.47,13.597C12.763,13.304 13.237,13.304 13.53,13.597C13.823,13.89 13.823,14.365 13.53,14.658L9.53,18.658C9.237,18.951 8.763,18.951 8.47,18.658L4.47,14.658C4.177,14.365 4.177,13.89 4.47,13.597Z" />
+
+    <path
+        android:fillColor="#919191"
+        android:fillType="evenOdd"
+        android:pathData="M4.47,10.404C4.763,10.697 5.237,10.697 5.53,10.404L9,6.935L12.47,10.404C12.763,10.697 13.237,10.697 13.53,10.404C13.823,10.111 13.823,9.637 13.53,9.344L9.53,5.344C9.237,5.051 8.763,5.051 8.47,5.344L4.47,9.344C4.177,9.637 4.177,10.111 4.47,10.404Z" />
+
+</vector>

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

@@ -0,0 +1,17 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:autoMirrored="true"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+
+    <path
+        android:fillColor="#0099FF"
+        android:pathData="M6.877,8.742C6.431,8.742 6.07,9.103 6.07,9.549C6.07,9.994 6.431,10.355 6.877,10.355H10.64C11.086,10.355 11.447,9.994 11.447,9.549C11.447,9.103 11.086,8.742 10.64,8.742H6.877Z" />
+
+    <path
+        android:fillColor="#0099FF"
+        android:fillType="evenOdd"
+        android:pathData="M6.277,4.684C4.206,4.684 2.527,6.363 2.527,8.434V15.566C2.527,17.637 4.206,19.316 6.277,19.316H17.722C19.793,19.316 21.472,17.637 21.472,15.566V8.434C21.472,6.363 19.793,4.684 17.722,4.684H6.277ZM4.027,8.434C4.027,7.191 5.035,6.184 6.277,6.184H17.722C18.965,6.184 19.972,7.191 19.972,8.434V15.566C19.972,16.809 18.965,17.816 17.722,17.816H6.277C5.035,17.816 4.027,16.809 4.027,15.566V8.434Z" />
+
+</vector>

features/walletconnect/impl/build.gradle.kts

@@ -21,6 +21,7 @@ dependencies {
     implementation(projects.core.decompose)
     implementation(projects.core.ui)
     implementation(projects.common.routing)
+    implementation(projects.common.ui)
 
     /** Domain models */
     implementation(projects.domain.qrScanning.models)

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/connections/components/WcAppInfoComponent.kt

@@ -0,0 +1,31 @@
+package com.tangem.features.walletconnect.connections.components
+
+import androidx.compose.runtime.Composable
+import com.tangem.core.decompose.context.AppComponentContext
+import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfig
+import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfigContent
+import com.tangem.core.ui.decompose.ComposableBottomSheetComponent
+import com.tangem.features.walletconnect.connections.ui.WcAppInfoModalBottomSheet
+
+internal class WcAppInfoComponent(
+    private val appComponentContext: AppComponentContext,
+    private val params: Params,
+) : AppComponentContext by appComponentContext, ComposableBottomSheetComponent {
+
+    override fun dismiss() {
+        params.onDismiss()
+    }
+
+    @Composable
+    override fun BottomSheet() {
+        WcAppInfoModalBottomSheet(
+            config = TangemBottomSheetConfig(
+                isShown = true,
+                onDismissRequest = ::dismiss,
+                content = TangemBottomSheetConfigContent.Empty, // todo(wc) will be fixed in next PR's
+            ),
+        )
+    }
+
+    data class Params(val onDismiss: () -> Unit)
+}

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/connections/entity/WcAppInfoUM.kt

@@ -0,0 +1,25 @@
+package com.tangem.features.walletconnect.connections.entity
+
+import androidx.compose.runtime.Immutable
+import com.tangem.common.ui.notifications.NotificationUM
+import com.tangem.core.ui.components.bottomsheets.TangemBottomSheetConfigContent
+import kotlinx.collections.immutable.ImmutableList
+
+@Immutable
+internal data class WcAppInfoUM(
+    val appName: String,
+    val appIcon: String,
+    val isVerified: Boolean,
+    val appSubtitle: String,
+    val notificationUM: NotificationUM?,
+    val walletName: String,
+    val networksInfo: WcNetworksInfo,
+    val onDismiss: () -> Unit,
+    val onConnect: () -> Unit,
+) : TangemBottomSheetConfigContent
+
+@Immutable
+internal sealed class WcNetworksInfo {
+    data class MissingRequiredNetworkInfo(val network: String) : WcNetworksInfo()
+    data class ContainsAllRequiredNetworks(val icons: ImmutableList<Int>) : WcNetworksInfo()
+}

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/connections/ui/InternalComponents.kt

@@ -0,0 +1,69 @@
+package com.tangem.features.walletconnect.connections.ui
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.unit.dp
+import coil.compose.AsyncImage
+import com.tangem.core.ui.res.TangemTheme
+import com.tangem.features.walletconnect.impl.R
+
+@Composable
+internal fun WcAppInfoItem(
+    iconUrl: String,
+    title: String,
+    subtitle: String,
+    isVerified: Boolean,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier.padding(TangemTheme.dimens.spacing12),
+        horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing16),
+    ) {
+        AsyncImage(
+            modifier = Modifier
+                .size(TangemTheme.dimens.size48)
+                .clip(RoundedCornerShape(TangemTheme.dimens.radius8))
+                .background(Color.Black),
+            model = iconUrl,
+            contentDescription = title,
+        )
+        Column(
+            modifier = Modifier.fillMaxWidth(),
+            verticalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing4),
+        ) {
+            Row(
+                horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing4),
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Text(
+                    modifier = Modifier.weight(1f, fill = false),
+                    text = title,
+                    color = TangemTheme.colors.text.primary1,
+                    style = TangemTheme.typography.h3,
+                )
+                if (isVerified) {
+                    Icon(
+                        modifier = Modifier.size(20.dp),
+                        painter = painterResource(R.drawable.img_approvale2_20),
+                        contentDescription = null,
+                        tint = Color.Unspecified,
+                    )
+                }
+            }
+            Text(
+                text = subtitle,
+                color = TangemTheme.colors.text.tertiary,
+                style = TangemTheme.typography.body2,
+            )
+        }
+    }
+}

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/connections/ui/WcAppInfoContent.kt

@@ -0,0 +1,447 @@
+package com.tangem.features.walletconnect.connections.ui
+
+import android.content.res.Configuration
+import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.material3.Icon
+import androidx.compose.material3.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.layout.ContentScale
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.text.style.TextAlign
+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.common.ui.notifications.NotificationUM
+import com.tangem.core.ui.components.PrimaryButton
+import com.tangem.core.ui.components.SecondaryButton
+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.notifications.Notification
+import com.tangem.core.ui.components.notifications.NotificationConfig
+import com.tangem.core.ui.extensions.resourceReference
+import com.tangem.core.ui.extensions.stringResourceSafe
+import com.tangem.core.ui.extensions.wrappedList
+import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview
+import com.tangem.features.walletconnect.connections.entity.WcAppInfoUM
+import com.tangem.features.walletconnect.connections.entity.WcNetworksInfo
+import com.tangem.features.walletconnect.impl.R
+import kotlinx.collections.immutable.ImmutableList
+import kotlinx.collections.immutable.persistentListOf
+
+@Composable
+internal fun WcAppInfoModalBottomSheet(config: TangemBottomSheetConfig) {
+    TangemModalBottomSheet<WcAppInfoUM>(
+        config = config,
+        containerColor = TangemTheme.colors.background.tertiary,
+        title = { state ->
+            TangemModalBottomSheetTitle(
+                title = resourceReference(R.string.wc_wallet_connect),
+                endIconRes = R.drawable.ic_close_24,
+                onEndClick = state.onDismiss,
+            )
+        },
+        content = { state -> WcAppInfoModalBottomSheetContent(state) },
+    )
+}
+
+@Composable
+private fun WcAppInfoModalBottomSheetContent(state: WcAppInfoUM) {
+    Column(modifier = Modifier.padding(horizontal = TangemTheme.dimens.spacing16)) {
+        val blocksModifier = Modifier
+            .clip(RoundedCornerShape(TangemTheme.dimens.radius14))
+            .background(color = TangemTheme.colors.background.action)
+            .fillMaxWidth()
+        WcAppInfoFirstBlock(modifier = blocksModifier, state = state)
+        state.notificationUM?.config?.let { config ->
+            Notification(
+                modifier = Modifier.padding(top = TangemTheme.dimens.spacing14),
+                config = config,
+                iconTint = TangemTheme.colors.icon.attention,
+            )
+        }
+        WcAppInfoSecondBlock(
+            modifier = Modifier
+                .padding(top = TangemTheme.dimens.spacing14)
+                .then(blocksModifier),
+            state = state,
+        )
+        WcAppInfoButtons(
+            modifier = Modifier.padding(vertical = TangemTheme.dimens.spacing16),
+            onDismiss = state.onDismiss,
+            onConnect = state.onConnect,
+        )
+    }
+}
+
+@Composable
+private fun WcAppInfoFirstBlock(state: WcAppInfoUM, modifier: Modifier = Modifier) {
+    var connectionRequestExpanded by remember { mutableStateOf(false) }
+    Column(modifier = modifier.animateContentSize()) {
+        WcAppInfoItem(
+            iconUrl = state.appIcon,
+            title = state.appName,
+            subtitle = state.appSubtitle,
+            isVerified = state.isVerified,
+        )
+        HorizontalDivider(thickness = 1.dp, color = TangemTheme.colors.stroke.primary)
+        ConnectionRequestBlock(
+            modifier = Modifier
+                .fillMaxWidth()
+                .clickable { connectionRequestExpanded = !connectionRequestExpanded }
+                .padding(TangemTheme.dimens.spacing12),
+            expanded = connectionRequestExpanded,
+        )
+        if (connectionRequestExpanded) {
+            ConnectionRequestDescription(
+                modifier = Modifier
+                    .padding(horizontal = TangemTheme.dimens.spacing12)
+                    .padding(top = 8.dp, bottom = 12.dp),
+            )
+        }
+    }
+}
+
+@Composable
+private fun ConnectionRequestBlock(expanded: Boolean, modifier: Modifier = Modifier) {
+    Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {
+        Icon(
+            modifier = Modifier.size(24.dp),
+            painter = painterResource(R.drawable.ic_connect_new_24),
+            contentDescription = null,
+            tint = TangemTheme.colors.icon.accent,
+        )
+        Text(
+            modifier = Modifier
+                .padding(start = TangemTheme.dimens.spacing4)
+                .weight(1f),
+            text = stringResourceSafe(R.string.wc_connection_request),
+            style = TangemTheme.typography.body1,
+            color = TangemTheme.colors.text.primary1,
+        )
+        Icon(
+            modifier = Modifier
+                .padding(start = TangemTheme.dimens.spacing12)
+                .size(width = 18.dp, height = 24.dp),
+            painter = painterResource(if (expanded) R.drawable.ic_chevron_up_24 else R.drawable.ic_chevron_24),
+            contentDescription = null,
+            tint = TangemTheme.colors.icon.informative,
+        )
+    }
+}
+
+@Composable
+private fun ConnectionRequestDescription(modifier: Modifier = Modifier) {
+    Column(modifier = modifier) {
+        Text(
+            text = stringResourceSafe(R.string.wc_connection_reqeust_would_like),
+            style = TangemTheme.typography.caption1,
+            color = TangemTheme.colors.text.tertiary,
+        )
+        ConnectionRequestDescriptionRow(
+            iconPainter = painterResource(R.drawable.ic_check_24),
+            tint = TangemTheme.colors.icon.accent,
+            text = stringResourceSafe(R.string.wc_connection_reqeust_can_view_balance),
+        )
+        ConnectionRequestDescriptionRow(
+            iconPainter = painterResource(R.drawable.ic_check_24),
+            tint = TangemTheme.colors.icon.accent,
+            text = stringResourceSafe(R.string.wc_connection_reqeust_request_approval),
+        )
+        HorizontalDivider(
+            modifier = Modifier.padding(top = TangemTheme.dimens.spacing12),
+            thickness = 0.5.dp,
+            color = TangemTheme.colors.stroke.primary,
+        )
+        Text(
+            modifier = Modifier.padding(top = 12.dp),
+            text = stringResourceSafe(R.string.wc_connection_reqeust_will_not),
+            style = TangemTheme.typography.caption1,
+            color = TangemTheme.colors.text.tertiary,
+        )
+        ConnectionRequestDescriptionRow(
+            iconPainter = painterResource(R.drawable.ic_close_24),
+            tint = TangemTheme.colors.icon.warning,
+            text = stringResourceSafe(R.string.wc_connection_reqeust_cant_sign),
+        )
+    }
+}
+
+@Composable
+private fun ConnectionRequestDescriptionRow(
+    iconPainter: Painter,
+    tint: Color,
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    Row(
+        modifier = modifier
+            .fillMaxWidth()
+            .padding(top = TangemTheme.dimens.spacing8),
+        verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing12),
+    ) {
+        Icon(
+            modifier = Modifier.size(TangemTheme.dimens.size24),
+            painter = iconPainter,
+            contentDescription = null,
+            tint = tint,
+        )
+        Text(
+            modifier = Modifier.fillMaxWidth(),
+            text = text,
+            style = TangemTheme.typography.caption2,
+            color = TangemTheme.colors.text.primary1,
+        )
+    }
+}
+
+@Composable
+private fun WcAppInfoSecondBlock(state: WcAppInfoUM, modifier: Modifier = Modifier) {
+    Column(modifier = modifier) {
+        val itemsModifier = Modifier
+            .fillMaxWidth()
+            .padding(TangemTheme.dimens.spacing12)
+        WalletRowItem(modifier = itemsModifier, walletName = state.walletName)
+        HorizontalDivider(thickness = 1.dp, color = TangemTheme.colors.stroke.primary)
+        SelectNetworksBlock(
+            networksInfo = state.networksInfo,
+            modifier = itemsModifier,
+        )
+        when (state.networksInfo) {
+            is WcNetworksInfo.ContainsAllRequiredNetworks -> Unit
+            is WcNetworksInfo.MissingRequiredNetworkInfo -> {
+                HorizontalDivider(thickness = 1.dp, color = TangemTheme.colors.stroke.primary)
+                Notification(
+                    config = NotificationConfig(
+                        iconResId = R.drawable.ic_alert_circle_24,
+                        title = resourceReference(R.string.wc_missing_required_network_title),
+                        subtitle = resourceReference(
+                            R.string.wc_missing_required_network_description,
+                            wrappedList(state.networksInfo.network),
+                        ),
+                    ),
+                    iconTint = TangemTheme.colors.icon.attention,
+                    containerColor = TangemTheme.colors.background.action,
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun WalletRowItem(walletName: String, modifier: Modifier = Modifier) {
+    Row(modifier = modifier, verticalAlignment = Alignment.CenterVertically) {
+        Icon(
+            modifier = Modifier.size(24.dp),
+            painter = painterResource(R.drawable.ic_wallet_new_24),
+            contentDescription = null,
+            tint = TangemTheme.colors.icon.accent,
+        )
+        Text(
+            modifier = Modifier
+                .padding(start = TangemTheme.dimens.spacing4)
+                .weight(1f),
+            text = stringResourceSafe(R.string.manage_tokens_network_selector_wallet),
+            style = TangemTheme.typography.body1,
+            color = TangemTheme.colors.text.primary1,
+        )
+        Text(
+            modifier = Modifier
+                .padding(start = TangemTheme.dimens.spacing16)
+                .weight(1f),
+            text = walletName,
+            textAlign = TextAlign.End,
+            style = TangemTheme.typography.body1,
+            color = TangemTheme.colors.text.tertiary,
+        )
+        Icon(
+            modifier = Modifier
+                .padding(start = TangemTheme.dimens.spacing12)
+                .size(width = 18.dp, height = 24.dp),
+            painter = painterResource(R.drawable.ic_select_18_24),
+            contentDescription = null,
+            tint = TangemTheme.colors.icon.informative,
+        )
+    }
+}
+
+@Composable
+private fun SelectNetworksBlock(networksInfo: WcNetworksInfo, modifier: Modifier = Modifier) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Icon(
+            modifier = Modifier.size(24.dp),
+            painter = painterResource(R.drawable.ic_network_new_24),
+            contentDescription = null,
+            tint = TangemTheme.colors.icon.accent,
+        )
+        Text(
+            modifier = Modifier
+                .padding(start = TangemTheme.dimens.spacing4)
+                .weight(1f),
+            text = stringResourceSafe(R.string.wc_common_networks),
+            style = TangemTheme.typography.body1,
+            color = TangemTheme.colors.text.primary1,
+        )
+        when (networksInfo) {
+            is WcNetworksInfo.ContainsAllRequiredNetworks -> NetworkIcons(icons = networksInfo.icons)
+            is WcNetworksInfo.MissingRequiredNetworkInfo -> Unit
+        }
+        Icon(
+            modifier = Modifier.size(width = 18.dp, height = 24.dp),
+            painter = painterResource(
+                id = when (networksInfo) {
+                    is WcNetworksInfo.ContainsAllRequiredNetworks -> R.drawable.ic_select_18_24
+                    is WcNetworksInfo.MissingRequiredNetworkInfo -> R.drawable.ic_chevron_right_24
+                },
+            ),
+            contentDescription = null,
+            tint = TangemTheme.colors.icon.informative,
+        )
+    }
+}
+
+@Suppress("MagicNumber")
+@Composable
+private fun NetworkIcons(icons: ImmutableList<Int>, modifier: Modifier = Modifier) {
+    val (iconsToShow, remainingCount) = remember(icons) {
+        when {
+            icons.size <= 4 -> icons to 0
+            else -> icons.take(3) to icons.size - 3
+        }
+    }
+    Box(modifier = modifier.wrapContentWidth()) {
+        iconsToShow.forEachIndexed { index, iconRes ->
+            Image(
+                painter = painterResource(id = iconRes),
+                contentDescription = null,
+                contentScale = ContentScale.Crop,
+                modifier = Modifier
+                    .padding(start = TangemTheme.dimens.spacing16.times(index))
+                    .border(
+                        width = 2.dp,
+                        color = TangemTheme.colors.background.action,
+                        shape = CircleShape,
+                    )
+                    .padding(2.dp)
+                    .clip(CircleShape)
+                    .size(20.dp),
+            )
+        }
+        if (remainingCount > 0) {
+            Box(
+                modifier = modifier
+                    .padding(start = 48.dp)
+                    .border(
+                        width = 2.dp,
+                        color = TangemTheme.colors.background.action,
+                        shape = CircleShape,
+                    )
+                    .padding(2.dp)
+                    .background(color = TangemTheme.colors.background.action)
+                    .size(20.dp)
+                    .clip(CircleShape)
+                    .background(color = TangemTheme.colors.icon.primary1.copy(alpha = 0.1F)),
+            ) {
+                Text(
+                    modifier = Modifier.align(Alignment.Center),
+                    text = "+$remainingCount",
+                    style = TangemTheme.typography.overline,
+                    color = TangemTheme.colors.text.secondary,
+                )
+            }
+        }
+    }
+}
+
+@Composable
+private fun WcAppInfoButtons(onDismiss: () -> Unit, onConnect: () -> Unit, modifier: Modifier = Modifier) {
+    Row(modifier = modifier, horizontalArrangement = Arrangement.spacedBy(TangemTheme.dimens.spacing8)) {
+        SecondaryButton(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(1f),
+            text = stringResourceSafe(R.string.common_cancel),
+            onClick = onDismiss,
+        )
+        PrimaryButton(
+            modifier = Modifier
+                .fillMaxWidth()
+                .weight(1f),
+            text = stringResourceSafe(R.string.wc_common_connect),
+            onClick = onConnect,
+        )
+    }
+}
+
+@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 WcAppInfoBottomSheetPreview(@PreviewParameter(WcAppInfoStateProvider::class) state: WcAppInfoUM) {
+    TangemThemePreview {
+        WcAppInfoModalBottomSheet(
+            config = TangemBottomSheetConfig(
+                isShown = true,
+                onDismissRequest = {},
+                content = state,
+            ),
+        )
+    }
+}
+
+private class WcAppInfoStateProvider : CollectionPreviewParameterProvider<WcAppInfoUM>(
+    collection = listOf(
+        WcAppInfoUM(
+            appName = "React App",
+            appIcon = "",
+            isVerified = true,
+            appSubtitle = "react-app.walletconnect.com",
+            notificationUM = null,
+            walletName = "Tangem 2.0",
+            networksInfo = WcNetworksInfo.ContainsAllRequiredNetworks(
+                icons = persistentListOf(
+                    R.drawable.img_optimism_22,
+                    R.drawable.img_bsc_22,
+                    R.drawable.img_avalanche_22,
+                    R.drawable.img_solana_22,
+                    R.drawable.img_avalanche_22,
+                ),
+            ),
+            onDismiss = {},
+            onConnect = {},
+        ),
+        WcAppInfoUM(
+            appName = "React App",
+            appIcon = "",
+            isVerified = false,
+            appSubtitle = "react-app.walletconnect.com",
+            notificationUM = NotificationUM.Info(
+                title = resourceReference(R.string.wc_alert_audit_unknown_domain),
+                subtitle = resourceReference(R.string.wc_alert_domain_issues_description),
+            ),
+            walletName = "Tangem 2.0",
+            networksInfo = WcNetworksInfo.MissingRequiredNetworkInfo(network = "Solana"),
+            onDismiss = {},
+            onConnect = {},
+        ),
+    ),
+)