Updated on 2026-08-14

features/send-v2/api/src/main/java/com/tangem/features/send/v2/api/FeeSelectorBlockComponent.kt

@@ -0,0 +1,9 @@
+package com.tangem.features.send.v2.api
+
+import com.tangem.core.decompose.factory.ComponentFactory
+import com.tangem.core.ui.decompose.ComposableContentComponent
+
+interface FeeSelectorBlockComponent : ComposableContentComponent {
+
+    interface Factory : ComponentFactory<Unit, FeeSelectorBlockComponent>
+}

features/send-v2/impl/src/main/java/com/tangem/features/send/v2/feeselector/DefaultFeeSelectorBlockComponent.kt

@@ -0,0 +1,92 @@
+package com.tangem.features.send.v2.feeselector
+
+import android.content.res.Configuration
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.*
+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.res.painterResource
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import com.tangem.core.decompose.context.AppComponentContext
+import com.tangem.core.ui.extensions.stringResourceSafe
+import com.tangem.core.ui.res.TangemTheme
+import com.tangem.core.ui.res.TangemThemePreview
+import com.tangem.features.send.v2.api.FeeSelectorBlockComponent
+import com.tangem.features.send.v2.impl.R
+import dagger.assisted.Assisted
+import dagger.assisted.AssistedFactory
+import dagger.assisted.AssistedInject
+
+@Suppress("UnusedPrivateMember")
+internal class DefaultFeeSelectorBlockComponent @AssistedInject constructor(
+    @Assisted appComponentContext: AppComponentContext,
+    @Assisted params: Unit,
+) : FeeSelectorBlockComponent, AppComponentContext by appComponentContext {
+
+    @Composable
+    override fun Content(modifier: Modifier) {
+        FeeSelectorBlockContent(modifier = modifier)
+    }
+
+    @AssistedFactory
+    interface Factory : FeeSelectorBlockComponent.Factory {
+        override fun create(context: AppComponentContext, params: Unit): DefaultFeeSelectorBlockComponent
+    }
+}
+
+@Composable
+private fun FeeSelectorBlockContent(modifier: Modifier = Modifier) {
+    Row(
+        modifier = modifier
+            .background(TangemTheme.colors.background.action)
+            .padding(12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Icon(
+            modifier = Modifier.size(24.dp),
+            painter = painterResource(R.drawable.ic_fee_new_24),
+            contentDescription = null,
+            tint = TangemTheme.colors.icon.accent,
+        )
+        Text(
+            modifier = Modifier.padding(start = TangemTheme.dimens.spacing4),
+            text = stringResourceSafe(R.string.common_network_fee_title),
+            style = TangemTheme.typography.body1,
+            color = TangemTheme.colors.text.primary1,
+        )
+        Icon(
+            modifier = Modifier
+                .padding(start = TangemTheme.dimens.spacing6)
+                .size(TangemTheme.dimens.size16),
+            painter = painterResource(id = R.drawable.ic_token_info_24),
+            contentDescription = null,
+            tint = TangemTheme.colors.icon.informative,
+        )
+        Spacer(modifier = Modifier.weight(1f))
+        Text(
+            text = "~ 0.25 \$",
+            style = TangemTheme.typography.body1,
+            color = TangemTheme.colors.text.tertiary,
+        )
+        Icon(
+            modifier = Modifier.size(width = 18.dp, height = 24.dp),
+            painter = painterResource(id = R.drawable.ic_select_18_24),
+            contentDescription = null,
+            tint = TangemTheme.colors.icon.informative,
+        )
+    }
+}
+
+@Preview(showBackground = true, device = Devices.PIXEL_7_PRO)
+@Preview(showBackground = true, device = Devices.PIXEL_7_PRO, uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun FeeSelectorBlockContent_Preview() {
+    TangemThemePreview {
+        FeeSelectorBlockContent(modifier = Modifier.fillMaxWidth())
+    }
+}

features/send-v2/impl/src/main/java/com/tangem/features/send/v2/feeselector/di/FeeSelectorFeatureModule.kt

@@ -1,6 +1,8 @@
 package com.tangem.features.send.v2.feeselector.di
 
+import com.tangem.features.send.v2.api.FeeSelectorBlockComponent
 import com.tangem.features.send.v2.api.FeeSelectorComponent
+import com.tangem.features.send.v2.feeselector.DefaultFeeSelectorBlockComponent
 import com.tangem.features.send.v2.feeselector.DefaultFeeSelectorComponent
 import dagger.Binds
 import dagger.Module
@@ -15,4 +17,8 @@ internal interface FeeSelectorFeatureModule {
     @Binds
     @Singleton
     fun bindComponentFactory(factory: DefaultFeeSelectorComponent.Factory): FeeSelectorComponent.Factory
+
+    @Binds
+    @Singleton
+    fun bindBlockComponentFactory(factory: DefaultFeeSelectorBlockComponent.Factory): FeeSelectorBlockComponent.Factory
 }

features/walletconnect/impl/build.gradle.kts

@@ -14,6 +14,7 @@ android {
 dependencies {
     implementation(projects.features.wallet.api)
     implementation(projects.features.walletconnect.api)
+    implementation(projects.features.sendV2.api)
 
     /** Core */
     implementation(projects.core.configToggles)

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/connections/routing/DefaultWcRoutingComponent.kt

@@ -14,6 +14,7 @@ import com.tangem.core.decompose.context.AppComponentContext
 import com.tangem.core.decompose.context.childByContext
 import com.tangem.core.decompose.model.getOrCreateModel
 import com.tangem.core.ui.decompose.ComposableContentComponent
+import com.tangem.features.send.v2.api.FeeSelectorBlockComponent
 import com.tangem.features.walletconnect.components.WcRoutingComponent
 import com.tangem.features.walletconnect.connections.components.AlertsComponent
 import com.tangem.features.walletconnect.connections.components.WcPairComponent
@@ -29,6 +30,7 @@ import dagger.assisted.AssistedInject
 internal class DefaultWcRoutingComponent @AssistedInject constructor(
     @Assisted private val appComponentContext: AppComponentContext,
     @Assisted params: Unit,
+    private val feeSelectorBlockComponentFactory: FeeSelectorBlockComponent.Factory,
 ) : AppComponentContext by appComponentContext, WcRoutingComponent {
 
     private val model: WcRoutingModel = getOrCreateModel()
@@ -62,14 +64,17 @@ internal class DefaultWcRoutingComponent @AssistedInject constructor(
             is WcInnerRoute.SignMessage -> WcSignTransactionContainerComponent(
                 appComponentContext = childContext,
                 params = WcTransactionModelParams(config.rawRequest),
+                feeSelectorBlockComponentFactory = feeSelectorBlockComponentFactory,
             )
             is WcInnerRoute.AddNetwork -> WcAddNetworkContainerComponent(
                 appComponentContext = childContext,
                 params = WcTransactionModelParams(config.rawRequest),
+                feeSelectorBlockComponentFactory = feeSelectorBlockComponentFactory,
             )
             is WcInnerRoute.Send -> WcSendTransactionContainerComponent(
                 appComponentContext = childContext,
                 params = WcTransactionModelParams(config.rawRequest),
+                feeSelectorBlockComponentFactory = feeSelectorBlockComponentFactory,
             )
             is WcInnerRoute.Pair -> WcPairComponent(
                 appComponentContext = childContext,

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/components/PreviewFeeSelectorBlockComponent.kt

@@ -0,0 +1,63 @@
+package com.tangem.features.walletconnect.transaction.components
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+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.res.painterResource
+import androidx.compose.ui.unit.dp
+import com.tangem.core.ui.extensions.stringResourceSafe
+import com.tangem.core.ui.res.TangemTheme
+import com.tangem.features.send.v2.api.FeeSelectorBlockComponent
+import com.tangem.features.walletconnect.impl.R
+
+internal class PreviewFeeSelectorBlockComponent : FeeSelectorBlockComponent {
+    @Composable
+    override fun Content(modifier: Modifier) {
+        Row(
+            modifier = modifier
+                .background(TangemTheme.colors.background.action)
+                .padding(12.dp),
+            verticalAlignment = Alignment.CenterVertically,
+        ) {
+            Icon(
+                modifier = Modifier.size(24.dp),
+                painter = painterResource(R.drawable.ic_fee_new_24),
+                contentDescription = null,
+                tint = TangemTheme.colors.icon.accent,
+            )
+            Text(
+                modifier = Modifier.padding(start = TangemTheme.dimens.spacing4),
+                text = stringResourceSafe(R.string.common_network_fee_title),
+                style = TangemTheme.typography.body1,
+                color = TangemTheme.colors.text.primary1,
+            )
+            Icon(
+                modifier = Modifier
+                    .padding(start = TangemTheme.dimens.spacing6)
+                    .size(TangemTheme.dimens.size16),
+                painter = painterResource(id = R.drawable.ic_token_info_24),
+                contentDescription = null,
+                tint = TangemTheme.colors.icon.informative,
+            )
+            Spacer(modifier = Modifier.weight(1f))
+            Text(
+                text = "~ 0.25 \$",
+                style = TangemTheme.typography.body1,
+                color = TangemTheme.colors.text.tertiary,
+            )
+            Icon(
+                modifier = Modifier.size(width = 18.dp, height = 24.dp),
+                painter = painterResource(id = R.drawable.ic_select_18_24),
+                contentDescription = null,
+                tint = TangemTheme.colors.icon.informative,
+            )
+        }
+    }
+}

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/components/chain/WcAddNetworkContainerComponent.kt

@@ -5,6 +5,7 @@ import com.tangem.core.decompose.context.AppComponentContext
 import com.tangem.core.decompose.context.childByContext
 import com.tangem.core.decompose.model.getOrCreateModel
 import com.tangem.core.ui.decompose.ComposableBottomSheetComponent
+import com.tangem.features.send.v2.api.FeeSelectorBlockComponent
 import com.tangem.features.walletconnect.transaction.components.common.WcCommonTransactionComponentDelegate
 import com.tangem.features.walletconnect.transaction.components.common.WcTransactionModelParams
 import com.tangem.features.walletconnect.transaction.components.common.getWcCommonScreen
@@ -14,7 +15,8 @@ import com.tangem.features.walletconnect.transaction.routes.WcTransactionRoutes
 internal class WcAddNetworkContainerComponent(
     appComponentContext: AppComponentContext,
     params: WcTransactionModelParams,
-) : WcCommonTransactionComponentDelegate(appComponentContext) {
+    feeSelectorBlockComponentFactory: FeeSelectorBlockComponent.Factory,
+) : WcCommonTransactionComponentDelegate(appComponentContext, feeSelectorBlockComponentFactory) {
 
     private val model: WcAddNetworkModel = getOrCreateModel(params = params)
 

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/components/common/WcCommonTransactionComponentDelegate.kt

@@ -15,10 +15,12 @@ import com.tangem.core.decompose.context.AppComponentContext
 import com.tangem.core.decompose.navigation.inner.InnerRouter
 import com.tangem.core.ui.decompose.ComposableBottomSheetComponent
 import com.tangem.core.ui.decompose.ComposableContentComponent
+import com.tangem.features.send.v2.api.FeeSelectorBlockComponent
 import com.tangem.features.walletconnect.transaction.routes.WcTransactionRoutes
 
 internal abstract class WcCommonTransactionComponentDelegate(
     private val appComponentContext: AppComponentContext,
+    private val feeSelectorBlockComponentFactory: FeeSelectorBlockComponent.Factory,
 ) : AppComponentContext by appComponentContext, ComposableContentComponent {
 
     private var stackNavigation: StackNavigation<WcTransactionRoutes>? = null
@@ -29,6 +31,10 @@ internal abstract class WcCommonTransactionComponentDelegate(
             InnerRouter<WcTransactionRoutes>(stackNavigation = it, popCallback = { onChildBack() })
         }
     }
+    protected val feeSelectorBlockComponent = feeSelectorBlockComponentFactory.create(
+        context = appComponentContext,
+        params = Unit,
+    )
 
     protected fun init(
         navigation: StackNavigation<WcTransactionRoutes>,

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/components/send/WcSendTransactionComponent.kt

@@ -5,12 +5,14 @@ import androidx.compose.runtime.getValue
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.tangem.core.decompose.context.AppComponentContext
 import com.tangem.core.ui.decompose.ComposableBottomSheetComponent
+import com.tangem.features.send.v2.api.FeeSelectorBlockComponent
 import com.tangem.features.walletconnect.transaction.model.WcSendTransactionModel
 import com.tangem.features.walletconnect.transaction.ui.send.WcSendTransactionModalBottomSheet
 
 internal class WcSendTransactionComponent(
     private val appComponentContext: AppComponentContext,
     private val model: WcSendTransactionModel,
+    private val feeSelectorBlockComponent: FeeSelectorBlockComponent,
 ) : AppComponentContext by appComponentContext, ComposableBottomSheetComponent {
 
     override fun dismiss() {
@@ -24,6 +26,7 @@ internal class WcSendTransactionComponent(
         if (content != null) {
             WcSendTransactionModalBottomSheet(
                 state = content!!.transaction,
+                feeSelectorBlockComponent = feeSelectorBlockComponent,
                 onClickTransactionRequest = model::showTransactionRequest,
                 onBack = router::pop,
                 onDismiss = ::dismiss,

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/components/send/WcSendTransactionContainerComponent.kt

@@ -5,6 +5,7 @@ import com.tangem.core.decompose.context.AppComponentContext
 import com.tangem.core.decompose.context.childByContext
 import com.tangem.core.decompose.model.getOrCreateModel
 import com.tangem.core.ui.decompose.ComposableBottomSheetComponent
+import com.tangem.features.send.v2.api.FeeSelectorBlockComponent
 import com.tangem.features.walletconnect.transaction.components.common.WcCommonTransactionComponentDelegate
 import com.tangem.features.walletconnect.transaction.components.common.WcTransactionModelParams
 import com.tangem.features.walletconnect.transaction.components.common.getWcCommonScreen
@@ -14,7 +15,8 @@ import com.tangem.features.walletconnect.transaction.routes.WcTransactionRoutes
 internal class WcSendTransactionContainerComponent(
     appComponentContext: AppComponentContext,
     params: WcTransactionModelParams,
-) : WcCommonTransactionComponentDelegate(appComponentContext) {
+    feeSelectorBlockComponentFactory: FeeSelectorBlockComponent.Factory,
+) : WcCommonTransactionComponentDelegate(appComponentContext, feeSelectorBlockComponentFactory) {
 
     private val model: WcSendTransactionModel = getOrCreateModel(params = params)
 
@@ -40,6 +42,10 @@ internal class WcSendTransactionContainerComponent(
     }
 
     private fun createTransactionComponent(appComponentContext: AppComponentContext): WcSendTransactionComponent {
-        return WcSendTransactionComponent(appComponentContext = appComponentContext, model = model)
+        return WcSendTransactionComponent(
+            appComponentContext = appComponentContext,
+            model = model,
+            feeSelectorBlockComponent = feeSelectorBlockComponent,
+        )
     }
 }

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/components/sign/WcSignTransactionComponent.kt

@@ -5,12 +5,14 @@ import androidx.compose.runtime.getValue
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import com.tangem.core.decompose.context.AppComponentContext
 import com.tangem.core.ui.decompose.ComposableBottomSheetComponent
+import com.tangem.features.send.v2.api.FeeSelectorBlockComponent
 import com.tangem.features.walletconnect.transaction.model.WcSignTransactionModel
 import com.tangem.features.walletconnect.transaction.ui.sign.WcSignTransactionModalBottomSheetContent
 
 internal class WcSignTransactionComponent(
     private val appComponentContext: AppComponentContext,
     private val model: WcSignTransactionModel,
+    private val feeSelectorBlockComponent: FeeSelectorBlockComponent,
 ) : AppComponentContext by appComponentContext, ComposableBottomSheetComponent {
 
     override fun dismiss() {
@@ -24,6 +26,7 @@ internal class WcSignTransactionComponent(
         if (content != null) {
             WcSignTransactionModalBottomSheetContent(
                 state = content!!.transaction,
+                feeSelectorBlockComponent = feeSelectorBlockComponent,
                 onClickTransactionRequest = model::showTransactionRequest,
                 onBack = router::pop,
                 onDismiss = ::dismiss,

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/components/sign/WcSignTransactionContainerComponent.kt

@@ -5,6 +5,7 @@ import com.tangem.core.decompose.context.AppComponentContext
 import com.tangem.core.decompose.context.childByContext
 import com.tangem.core.decompose.model.getOrCreateModel
 import com.tangem.core.ui.decompose.ComposableBottomSheetComponent
+import com.tangem.features.send.v2.api.FeeSelectorBlockComponent
 import com.tangem.features.walletconnect.transaction.components.common.WcCommonTransactionComponentDelegate
 import com.tangem.features.walletconnect.transaction.components.common.WcTransactionModelParams
 import com.tangem.features.walletconnect.transaction.components.common.getWcCommonScreen
@@ -14,7 +15,8 @@ import com.tangem.features.walletconnect.transaction.routes.WcTransactionRoutes
 internal class WcSignTransactionContainerComponent(
     appComponentContext: AppComponentContext,
     params: WcTransactionModelParams,
-) : WcCommonTransactionComponentDelegate(appComponentContext) {
+    feeSelectorBlockComponentFactory: FeeSelectorBlockComponent.Factory,
+) : WcCommonTransactionComponentDelegate(appComponentContext, feeSelectorBlockComponentFactory) {
 
     private val model: WcSignTransactionModel = getOrCreateModel(params = params)
 
@@ -40,6 +42,10 @@ internal class WcSignTransactionContainerComponent(
     }
 
     private fun createTransactionComponent(appComponentContext: AppComponentContext): WcSignTransactionComponent {
-        return WcSignTransactionComponent(appComponentContext = appComponentContext, model = model)
+        return WcSignTransactionComponent(
+            appComponentContext = appComponentContext,
+            model = model,
+            feeSelectorBlockComponent = feeSelectorBlockComponent,
+        )
     }
 }

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/ui/common/WcNetworkFeeItem.kt

@@ -1,73 +0,0 @@
-package com.tangem.features.walletconnect.transaction.ui.common
-
-import androidx.compose.animation.AnimatedContent
-import androidx.compose.foundation.layout.*
-import androidx.compose.foundation.shape.CircleShape
-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.res.painterResource
-import com.tangem.core.ui.extensions.stringResourceSafe
-import com.tangem.core.ui.res.TangemTheme
-import com.tangem.features.walletconnect.impl.R
-
-@Composable
-internal fun WcNetworkFeeItem(networkFeeText: String, modifier: Modifier = Modifier) {
-    Row(
-        modifier = modifier,
-        verticalAlignment = Alignment.CenterVertically,
-    ) {
-        Icon(
-            modifier = Modifier.size(TangemTheme.dimens.size24),
-            painter = painterResource(R.drawable.ic_fee_new_24),
-            contentDescription = null,
-            tint = TangemTheme.colors.icon.accent,
-        )
-
-        Text(
-            modifier = Modifier.padding(start = TangemTheme.dimens.spacing8),
-            text = stringResourceSafe(R.string.common_network_fee_title),
-            style = TangemTheme.typography.body1,
-            color = TangemTheme.colors.text.primary1,
-        )
-
-        Icon(
-            modifier = Modifier
-                .padding(start = TangemTheme.dimens.spacing6)
-                .size(TangemTheme.dimens.size16),
-            painter = painterResource(id = R.drawable.ic_information_24),
-            tint = TangemTheme.colors.icon.informative,
-            contentDescription = null,
-        )
-
-        Spacer(modifier = Modifier.weight(1f))
-
-        Row(
-            verticalAlignment = Alignment.CenterVertically,
-            horizontalArrangement = Arrangement.End,
-        ) {
-            AnimatedContent(
-                targetState = networkFeeText,
-                label = "Animate Network fee text",
-            ) { fee ->
-                Text(
-                    text = fee,
-                    style = TangemTheme.typography.body1,
-                    color = TangemTheme.colors.text.tertiary,
-                )
-            }
-            Spacer(modifier = Modifier.width(TangemTheme.dimens.spacing6))
-            Icon(
-                modifier = Modifier
-                    .clip(CircleShape)
-                    .size(width = TangemTheme.dimens.size18, height = TangemTheme.dimens.size24),
-                painter = painterResource(id = R.drawable.ic_select_18_24),
-                tint = TangemTheme.colors.icon.informative,
-                contentDescription = null,
-            )
-        }
-    }
-}

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/ui/common/WcSendTransactionItems.kt

@@ -12,14 +12,15 @@ 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.send.v2.api.FeeSelectorBlockComponent
 import com.tangem.features.walletconnect.transaction.entity.common.WcNetworkInfoUM
 
 @Composable
 internal fun WcSendTransactionItems(
     walletName: String,
     networkInfo: WcNetworkInfoUM,
+    feeSelectorBlockComponent: FeeSelectorBlockComponent,
     modifier: Modifier = Modifier,
-    networkFee: String? = null,
     address: String? = null,
 ) {
     Column(
@@ -50,12 +51,7 @@ internal fun WcSendTransactionItems(
                 addressText = address,
             )
         }
-        if (!networkFee.isNullOrEmpty()) {
-            DividerWithPadding(start = TangemTheme.dimens.spacing40, end = TangemTheme.dimens.spacing12)
-            WcNetworkFeeItem(
-                modifier = itemsModifier,
-                networkFeeText = networkFee,
-            )
-        }
+        DividerWithPadding(start = 40.dp, end = 12.dp)
+        feeSelectorBlockComponent.Content(Modifier)
     }
 }

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/ui/send/WcSendTransactionModalBottomSheet.kt

@@ -24,9 +24,11 @@ import com.tangem.core.ui.extensions.TextReference
 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.send.v2.api.FeeSelectorBlockComponent
 import com.tangem.features.walletconnect.connections.entity.VerifiedDAppState
 import com.tangem.features.walletconnect.connections.ui.WcAppInfoItem
 import com.tangem.features.walletconnect.impl.R
+import com.tangem.features.walletconnect.transaction.components.PreviewFeeSelectorBlockComponent
 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.blockaid.WcSendReceiveTransactionCheckResultsUM
@@ -40,9 +42,11 @@ import com.tangem.features.walletconnect.transaction.ui.common.WcTransactionRequ
 import com.tangem.features.walletconnect.transaction.ui.common.WcTransactionRequestItem
 import kotlinx.collections.immutable.persistentListOf
 
+@Suppress("LongParameterList")
 @Composable
 internal fun WcSendTransactionModalBottomSheet(
     state: WcSendTransactionItemUM,
+    feeSelectorBlockComponent: FeeSelectorBlockComponent,
     onClickTransactionRequest: () -> Unit,
     onBack: () -> Unit,
     onDismiss: () -> Unit,
@@ -99,7 +103,7 @@ internal fun WcSendTransactionModalBottomSheet(
                     WcSendTransactionItems(
                         walletName = state.walletName,
                         networkInfo = state.networkInfo,
-                        networkFee = state.networkFee,
+                        feeSelectorBlockComponent = feeSelectorBlockComponent,
                         address = state.address,
                     )
                 }
@@ -141,7 +145,14 @@ private fun WcSendTransactionBottomSheetPreview(
                 )
             },
             content = {
-                WcSendTransactionModalBottomSheet(state, {}, {}, {}, {})
+                WcSendTransactionModalBottomSheet(
+                    state = state,
+                    feeSelectorBlockComponent = PreviewFeeSelectorBlockComponent(),
+                    onClickTransactionRequest = {},
+                    onBack = {},
+                    onDismiss = {},
+                    onClickAllowToSpend = {},
+                )
             },
         )
     }

features/walletconnect/impl/src/main/kotlin/com/tangem/features/walletconnect/transaction/ui/sign/WcSignTransactionModalBottomSheetContent.kt

@@ -25,9 +25,11 @@ 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.send.v2.api.FeeSelectorBlockComponent
 import com.tangem.features.walletconnect.connections.entity.VerifiedDAppState
 import com.tangem.features.walletconnect.connections.ui.WcAppInfoItem
 import com.tangem.features.walletconnect.impl.R
+import com.tangem.features.walletconnect.transaction.components.PreviewFeeSelectorBlockComponent
 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.sign.WcSignTransactionItemUM
@@ -36,6 +38,7 @@ import com.tangem.features.walletconnect.transaction.ui.common.*
 @Composable
 internal fun WcSignTransactionModalBottomSheetContent(
     state: WcSignTransactionItemUM,
+    feeSelectorBlockComponent: FeeSelectorBlockComponent,
     onClickTransactionRequest: () -> Unit,
     onBack: () -> Unit,
     onDismiss: () -> Unit,
@@ -84,7 +87,7 @@ internal fun WcSignTransactionModalBottomSheetContent(
                     )
                 }
                 Column(modifier = Modifier.padding(top = 16.dp)) {
-                    WcSignTransactionItems(state)
+                    WcSignTransactionItems(state, feeSelectorBlockComponent)
                 }
             }
         },
@@ -101,9 +104,13 @@ internal fun WcSignTransactionModalBottomSheetContent(
 }
 
 @Composable
-private fun WcSignTransactionItems(state: WcSignTransactionItemUM) {
+private fun WcSignTransactionItems(
+    state: WcSignTransactionItemUM,
+    feeSelectorBlockComponent: FeeSelectorBlockComponent,
+    modifier: Modifier = Modifier,
+) {
     Column(
-        modifier = Modifier
+        modifier = modifier
             .clip(RoundedCornerShape(14.dp))
             .background(color = TangemTheme.colors.background.action)
             .fillMaxWidth()
@@ -130,6 +137,8 @@ private fun WcSignTransactionItems(state: WcSignTransactionItemUM) {
                 addressText = state.addressText,
             )
         }
+        DividerWithPadding(start = 40.dp, end = 12.dp)
+        feeSelectorBlockComponent.Content(modifier = Modifier)
     }
 }
 
@@ -157,7 +166,13 @@ private fun WcSignTransactionBottomSheetPreview(
                 )
             },
             content = {
-                WcSignTransactionModalBottomSheetContent(state, {}, {}, {})
+                WcSignTransactionModalBottomSheetContent(
+                    state = state,
+                    feeSelectorBlockComponent = PreviewFeeSelectorBlockComponent(),
+                    onClickTransactionRequest = {},
+                    onBack = {},
+                    onDismiss = {},
+                )
             },
         )
     }