Implement UI for SendEvmProcessing page

app/src/main/java/io/horizontalsystems/bankwallet/modules/send/evm/confirmation/SendEvmConfirmationFragment.kt

@@ -18,8 +18,8 @@ import androidx.navigation.NavController
 import io.horizontalsystems.bankwallet.R
 import io.horizontalsystems.bankwallet.core.AppLogger
 import io.horizontalsystems.bankwallet.core.BaseComposeFragment
-import io.horizontalsystems.bankwallet.core.setNavigationResultX
 import io.horizontalsystems.bankwallet.core.slideFromBottom
+import io.horizontalsystems.bankwallet.core.slideFromRight
 import io.horizontalsystems.bankwallet.core.stats.StatEvent
 import io.horizontalsystems.bankwallet.core.stats.StatPage
 import io.horizontalsystems.bankwallet.core.stats.stat
@@ -28,7 +28,6 @@ import io.horizontalsystems.bankwallet.modules.send.evm.SendEvmData
 import io.horizontalsystems.bankwallet.modules.send.evm.SendEvmModule
 import io.horizontalsystems.bankwallet.modules.sendevmtransaction.SendEvmTransactionView
 import io.horizontalsystems.bankwallet.ui.compose.components.ButtonPrimaryYellow
-import io.horizontalsystems.core.SnackbarDuration
 import io.horizontalsystems.core.helpers.HudHelper
 import io.horizontalsystems.ethereumkit.models.Address
 import io.horizontalsystems.ethereumkit.models.TransactionData
@@ -115,7 +114,7 @@ private fun SendEvmConfirmationScreen(
 
                     coroutineScope.launch {
                         buttonEnabled = false
-                        HudHelper.showInProcessMessage(view, R.string.Send_Sending, SnackbarDuration.INDEFINITE)
+//                        HudHelper.showInProcessMessage(view, R.string.Send_Sending, SnackbarDuration.INDEFINITE)
 
                         val result = try {
                             logger.info("sending tx")
@@ -133,8 +132,10 @@ private fun SendEvmConfirmationScreen(
                         }
 
                         buttonEnabled = true
-                        navController.setNavigationResultX(result)
-                        navController.popBackStack()
+                        navController.slideFromRight(R.id.sendEvmProcessingFragment)
+                        //todo refactor this part
+//                        navController.setNavigationResultX(result)
+//                        navController.popBackStack()
                     }
                 },
                 enabled = uiState.sendEnabled && buttonEnabled
@@ -151,3 +152,4 @@ private fun SendEvmConfirmationScreen(
         )
     }
 }
+

app/src/main/java/io/horizontalsystems/bankwallet/modules/send/evm/processing/SendEvmProcessingFragment.kt

@@ -0,0 +1,258 @@
+package io.horizontalsystems.bankwallet.modules.send.evm.processing
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Divider
+import androidx.compose.material.Icon
+import androidx.compose.material.Scaffold
+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 androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavController
+import io.horizontalsystems.bankwallet.R
+import io.horizontalsystems.bankwallet.core.BaseComposeFragment
+import io.horizontalsystems.bankwallet.modules.evmfee.ButtonsGroupWithShade
+import io.horizontalsystems.bankwallet.ui.compose.ComposeAppTheme
+import io.horizontalsystems.bankwallet.ui.compose.TranslatableString
+import io.horizontalsystems.bankwallet.ui.compose.components.AppBar
+import io.horizontalsystems.bankwallet.ui.compose.components.ButtonPrimaryYellow
+import io.horizontalsystems.bankwallet.ui.compose.components.HSCircularProgressIndicator
+import io.horizontalsystems.bankwallet.ui.compose.components.HsImage
+import io.horizontalsystems.bankwallet.ui.compose.components.InfoText
+import io.horizontalsystems.bankwallet.ui.compose.components.MenuItem
+import io.horizontalsystems.bankwallet.ui.compose.components.PremiumHeader
+import io.horizontalsystems.bankwallet.ui.compose.components.TransactionInfoCancelCell
+import io.horizontalsystems.bankwallet.ui.compose.components.TransactionInfoSpeedUpCell
+import io.horizontalsystems.bankwallet.ui.compose.components.VSpacer
+import io.horizontalsystems.bankwallet.ui.compose.components.body_leah
+import io.horizontalsystems.bankwallet.ui.compose.components.body_lucian
+import io.horizontalsystems.bankwallet.ui.compose.components.cell.SectionPremiumUniversalLawrence
+import io.horizontalsystems.bankwallet.ui.compose.components.headline1_leah
+import io.horizontalsystems.bankwallet.ui.compose.components.subhead2_grey
+import io.horizontalsystems.marketkit.models.BlockchainType
+
+class SendEvmProcessingFragment : BaseComposeFragment() {
+
+    @Composable
+    override fun GetContent(navController: NavController) {
+        SendEvmProcessingScreen(navController)
+    }
+
+}
+
+@Composable
+private fun SendEvmProcessingScreen(
+    navController: NavController
+) {
+    Scaffold(
+        backgroundColor = ComposeAppTheme.colors.tyler,
+        topBar = {
+            AppBar(
+                menuItems = listOf(
+                    MenuItem(
+                        title = TranslatableString.ResString(R.string.Button_Close),
+                        icon = R.drawable.ic_close,
+                        onClick = {
+                            navController.popBackStack()
+                        }
+                    )
+                )
+            )
+        },
+    ) { innerPaddings ->
+        Column(
+            modifier = Modifier.padding(innerPaddings)
+        ) {
+            Column(
+                modifier = Modifier
+                    .weight(1f)
+                    .verticalScroll(rememberScrollState()),
+            ) {
+                VSpacer(12.dp)
+                Box(
+                    modifier = Modifier
+                        .size(100.dp)
+                        .align(Alignment.CenterHorizontally)
+                        .background(
+                            color = ComposeAppTheme.colors.raina,
+                            shape = CircleShape
+                        ),
+                    contentAlignment = Alignment.Center
+                ) {
+                    Icon(
+                        modifier = Modifier.size(48.dp),
+                        painter = painterResource(R.drawable.ic_checkmark_48),
+                        contentDescription = "checkmark",
+                        tint = ComposeAppTheme.colors.remus
+                    )
+                }
+                VSpacer(32.dp)
+                headline1_leah(
+                    stringResource(R.string.Send_Processing),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 48.dp),
+                    textAlign = TextAlign.Center
+                )
+                VSpacer(12.dp)
+                subhead2_grey(
+                    text = stringResource(R.string.Send_Processing_Description),
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 48.dp),
+                    textAlign = TextAlign.Center
+                )
+                VSpacer(32.dp)
+                TransactionDataView(
+                    title = "Ethereum",
+                    subtitle = "to 0x7a9f...77aa",
+                    coinIconUrl = "eth.png",
+                    coinIconPlaceholder = R.drawable.logo_ethereum_24,
+                    coinAmount = "0.0001 ETH",
+                    fiatAmount = "$0.0001",
+                    progress = 0.5f,
+                )
+
+                if (true) {
+                    VSpacer(height = 24.dp)
+                    PremiumHeader()
+                    SectionPremiumUniversalLawrence {
+                        TransactionInfoSpeedUpCell(
+                            transactionHash = "txhash",
+                            blockchainType = BlockchainType.fromUid("ethereum"),
+                            navController = navController
+                        )
+                        Divider(
+                            thickness = 1.dp,
+                            color = ComposeAppTheme.colors.steel10,
+                        )
+                        TransactionInfoCancelCell(
+                            transactionHash = "txhash",
+                            blockchainType = BlockchainType.fromUid("ethereum"),
+                            navController = navController
+                        )
+                    }
+                    InfoText(
+                        text = stringResource(R.string.TransactionInfo_SpeedUpDescription),
+                    )
+                }
+            }
+            ButtonsGroupWithShade {
+                ButtonPrimaryYellow(
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .padding(horizontal = 24.dp),
+                    title = stringResource(R.string.Button_Done),
+                    onClick = {
+
+                    },
+                )
+            }
+        }
+    }
+}
+
+@Composable
+fun TransactionDataView(
+    title: String,
+    subtitle: String,
+    coinIconUrl: String,
+    coinIconPlaceholder: Int,
+    coinAmount: String,
+    fiatAmount: String? = null,
+    progress: Float? = null,
+) {
+    Row(
+        modifier = Modifier
+            .fillMaxWidth()
+            .padding(horizontal = 16.dp)
+            .clip(RoundedCornerShape(12.dp))
+            .border(1.dp, ComposeAppTheme.colors.steel20, RoundedCornerShape(12.dp))
+            .background(ComposeAppTheme.colors.tyler)
+            .padding(vertical = 12.dp),
+        verticalAlignment = Alignment.CenterVertically,
+    ) {
+        Box(
+            modifier = Modifier
+                .padding(horizontal = 8.dp)
+                .size(44.dp),
+            contentAlignment = Alignment.Center
+        ) {
+            progress?.let { progress ->
+                HSCircularProgressIndicator(progress)
+            }
+            HsImage(
+                url = coinIconUrl,
+                placeholder = coinIconPlaceholder,
+                modifier = Modifier
+                    .size(32.dp)
+                    .clip(CircleShape)
+            )
+        }
+        Column {
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(end = 16.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                body_leah(
+                    text = title,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.weight(1f)
+                )
+                body_lucian(coinAmount)
+            }
+            VSpacer(3.dp)
+            Row(
+                modifier = Modifier
+                    .fillMaxWidth()
+                    .padding(end = 16.dp),
+                verticalAlignment = Alignment.CenterVertically
+            ) {
+                subhead2_grey(
+                    text = subtitle,
+                    maxLines = 1,
+                    overflow = TextOverflow.Ellipsis,
+                    modifier = Modifier.weight(1f)
+                )
+                fiatAmount?.let {
+                    subhead2_grey(it)
+                }
+            }
+        }
+    }
+}
+
+@Preview
+@Composable
+fun PreviewTransactionDataView() {
+    ComposeAppTheme {
+        TransactionDataView(
+            title = "Ethereum",
+            subtitle = "to 0x7a9f...77aa",
+            coinIconUrl = "eth.png",
+            coinAmount = "0.0001 ETH",
+            fiatAmount = "$0.0001",
+            coinIconPlaceholder = R.drawable.logo_ethereum_24,
+        )
+    }
+}

app/src/main/java/io/horizontalsystems/bankwallet/modules/send/evm/processing/SendEvmProcessingViewModel.kt

@@ -0,0 +1,14 @@
+package io.horizontalsystems.bankwallet.modules.send.evm.processing
+
+import io.horizontalsystems.bankwallet.core.ViewModelUiState
+
+class SendEvmProcessingViewModel: ViewModelUiState<SendEvmProcessingUiState>() {
+
+    override fun createState(): SendEvmProcessingUiState {
+            TODO("Not yet implemented")
+    }
+}
+
+data class SendEvmProcessingUiState(
+    val processing: Boolean
+)

app/src/main/java/io/horizontalsystems/bankwallet/ui/compose/components/TransactionInfoCells.kt

@@ -426,7 +426,7 @@ fun TransactionInfoSpeedUpCell(
             tint = ComposeAppTheme.colors.jacob
         )
         Spacer(Modifier.width(16.dp))
-        body_jacob(text = stringResource(R.string.TransactionInfo_SpeedUp))
+        body_leah(text = stringResource(R.string.TransactionInfo_SpeedUp))
     }
 }
 
@@ -453,7 +453,7 @@ fun TransactionInfoCancelCell(
             tint = ComposeAppTheme.colors.redL
         )
         Spacer(Modifier.width(16.dp))
-        body_lucian(text = stringResource(R.string.TransactionInfoOptions_Cancel_Button))
+        body_leah(text = stringResource(R.string.TransactionInfoOptions_Cancel_Button))
     }
 }
 

app/src/main/res/drawable/ic_checkmark_48.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="48dp"
+    android:height="48dp"
+    android:viewportWidth="48"
+    android:viewportHeight="48">
+  <path
+      android:pathData="M41.414,10.586C42.195,11.367 42.195,12.633 41.414,13.414L19.414,35.414C18.633,36.195 17.367,36.195 16.586,35.414L6.586,25.414C5.805,24.633 5.805,23.367 6.586,22.586C7.367,21.805 8.633,21.805 9.414,22.586L18,31.172L38.586,10.586C39.367,9.805 40.633,9.805 41.414,10.586Z"
+      android:fillColor="#808085"
+      android:fillType="evenOdd"/>
+</vector>

app/src/main/res/navigation/main_graph.xml

@@ -13,6 +13,9 @@
     <fragment
         android:id="@+id/sendEvmConfirmationFragment"
         android:name="io.horizontalsystems.bankwallet.modules.send.evm.confirmation.SendEvmConfirmationFragment"/>
+    <fragment
+        android:id="@+id/sendEvmProcessingFragment"
+        android:name="io.horizontalsystems.bankwallet.modules.send.evm.processing.SendEvmProcessingFragment"/>
     <fragment
         android:id="@+id/sendEvmSettingsFragment"
         android:name="io.horizontalsystems.bankwallet.modules.send.evm.settings.SendEvmSettingsFragment" />

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

@@ -436,6 +436,8 @@
     <string name="Send_Confirmation_HintMemo" translatable="false">Memo</string>
     <string name="Send_Confirmation_Send_Button">Send</string>
     <string name="Send_Confirmation_Action">Action</string>
+    <string name="Send_Processing">Processing!</string>
+    <string name="Send_Processing_Description">Transaction sent successfully. Check its status for details.</string>
 
     <string name="Send_Success">\u2713 Sent</string>