Skip to content

Commit

Permalink
Implement UI for SendEvmProcessing page
Browse files Browse the repository at this point in the history
  • Loading branch information
rafaelekol committed Jan 20, 2025
1 parent 233a9ed commit 132070c
Show file tree
Hide file tree
Showing 7 changed files with 296 additions and 7 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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")
Expand All @@ -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
Expand All @@ -151,3 +152,4 @@ private fun SendEvmConfirmationScreen(
)
}
}

Original file line number Diff line number Diff line change
@@ -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,
)
}
}
Original file line number Diff line number Diff line change
@@ -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
)
Original file line number Diff line number Diff line change
Expand Up @@ -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))
}
}

Expand All @@ -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))
}
}

Expand Down
10 changes: 10 additions & 0 deletions app/src/main/res/drawable/ic_checkmark_48.xml
Original file line number Diff line number Diff line change
@@ -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>
3 changes: 3 additions & 0 deletions app/src/main/res/navigation/main_graph.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand Down
2 changes: 2 additions & 0 deletions app/src/main/res/values/strings.xml
Original file line number Diff line number Diff line change
Expand Up @@ -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>

Expand Down

0 comments on commit 132070c

Please sign in to comment.