Skip to content

Commit

Permalink
Take offer UI Improvements
Browse files Browse the repository at this point in the history 
 - AmountScreen - Amount selector - Placed vertically center;
 - PaymentMethodScreen - Make use of PaymentMethodCard as done in Createoffer flow;
 - ReviewScreen - BisqUIConstants;

Misc UI Improvements
 - CreateOfferPaymentMethodScreen - Adjust spacing;
 - BisqAmount select - Comment on usage
  • Loading branch information
@nostrbuddha @rodvar
nostrbuddha authored and rodvar committed Jan 6, 2025
1 parent dcff1f5 commit 4cbab23
Show file tree
Hide file tree
Showing 6 changed files with 87 additions and 119 deletions.
8 changes: 7 additions & 1 deletion ...monMain/kotlin/network/bisq/mobile/presentation/ui/components/molecules/AmountSelector.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,13 @@ import network.bisq.mobile.presentation.ui.components.atoms.BisqSlider
import network.bisq.mobile.presentation.ui.components.atoms.BisqText
import network.bisq.mobile.presentation.ui.components.atoms.BtcSatsText
import network.bisq.mobile.presentation.ui.theme.BisqTheme
import network.bisq.mobile.presentation.ui.theme.BisqUIConstants

// ToDiscuss:
// buddha: Ideally this component should deal only with Fiat values (as Double) and have one valueChange() event
// so `initialSliderPosition` will become `defaultValue`,
// which will be some value between `formattedMinAmount` and `formattedMaxAmount`
// onSliderValueChange() / onTextValueChange() will become onValueChange(value: Double) -> Unit
@Composable
fun BisqAmountSelector(
fiatCurrencyCode: String,
Expand Down Expand Up @@ -48,7 +54,7 @@ fun BisqAmountSelector(

Column(
modifier = Modifier.fillMaxWidth(),
verticalArrangement = Arrangement.spacedBy(16.dp),
verticalArrangement = Arrangement.spacedBy(BisqUIConstants.ScreenPadding),
horizontalAlignment = Alignment.CenterHorizontally
) {

Expand Down
2 changes: 1 addition & 1 deletion .../bisq/mobile/presentation/ui/uicases/offer/create_offer/CreateOfferPaymentMethodScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ fun CreateOfferPaymentMethodSelectorScreen() {
color = BisqTheme.colors.light1
)

BisqGap.V1()
BisqGap.V2()

PaymentMethodCard(
title = presenter.quoteSideHeadline,
Expand Down
33 changes: 18 additions & 15 deletions ...lin/network/bisq/mobile/presentation/ui/uicases/trade/take_offer/TakeOfferAmountScreen.kt
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
package network.bisq.mobile.presentation.ui.uicases.trade.take_offer

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
Expand All @@ -25,7 +24,8 @@ fun TakeOfferTradeAmountScreen() {
stepIndex = 1,
stepsLength = 3,
prevOnClick = { presenter.onBack() },
nextOnClick = { presenter.onNext() }
nextOnClick = { presenter.onNext() },
useStaticScaffold = true
) {
BisqText.h3Regular(
text = strings.bisqEasy_takeOffer_amount_headline_buyer,
Expand All @@ -41,17 +41,20 @@ fun TakeOfferTradeAmountScreen() {
color = BisqTheme.colors.grey2
)

Spacer(modifier = Modifier.height(128.dp))

BisqAmountSelector(
presenter.quoteCurrencyCode,
presenter.formattedMinAmountWithCode,
presenter.formattedMaxAmountWithCode,
presenter.sliderPosition,
presenter.formattedQuoteAmount,
presenter.formattedBaseAmount,
{ sliderValue -> presenter.onSliderValueChanged(sliderValue) },
{ textInput -> presenter.onTextValueChanged(textInput) }
)
Column(
modifier = Modifier.fillMaxHeight(),
verticalArrangement = Arrangement.Center,
) {
BisqAmountSelector(
presenter.quoteCurrencyCode,
presenter.formattedMinAmountWithCode,
presenter.formattedMaxAmountWithCode,
presenter.sliderPosition,
presenter.formattedQuoteAmount,
presenter.formattedBaseAmount,
{ sliderValue -> presenter.onSliderValueChanged(sliderValue) },
{ textInput -> presenter.onTextValueChanged(textInput) }
)
}
}
}
29 changes: 29 additions & 0 deletions ...k/bisq/mobile/presentation/ui/uicases/trade/take_offer/TakeOfferPaymentMethodPresenter.kt
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
package network.bisq.mobile.presentation.ui.uicases.trade.take_offer

import kotlinx.coroutines.flow.MutableStateFlow
import network.bisq.mobile.presentation.BasePresenter
import network.bisq.mobile.presentation.MainPresenter
import network.bisq.mobile.presentation.ui.navigation.Routes
Expand All @@ -15,6 +16,7 @@ class TakeOfferPaymentMethodPresenter(
lateinit var baseSidePaymentMethods: List<String>
var quoteSidePaymentMethod: String? = null
var baseSidePaymentMethod: String? = null
var quoteCurrencyCode: String = "USD"

private lateinit var takeOfferModel: TakeOfferPresenter.TakeOfferModel

Expand All @@ -32,6 +34,8 @@ class TakeOfferPaymentMethodPresenter(
if (offerListItem.baseSidePaymentMethods.size == 1) {
baseSidePaymentMethod = offerListItem.baseSidePaymentMethods[0]
}

quoteCurrencyCode = takeOfferModel.priceQuote.market.quoteCurrencyCode
}

fun onQuoteSidePaymentMethodSelected(paymentMethod: String) {
Expand Down Expand Up @@ -72,4 +76,29 @@ class TakeOfferPaymentMethodPresenter(
}

private fun isValid() = quoteSidePaymentMethod != null && baseSidePaymentMethod != null

fun getPaymentMethodAsSet(paymentMethod: String?): MutableStateFlow<Set<String>> {
return if (paymentMethod == null)
MutableStateFlow(emptySet())
else {
MutableStateFlow(setOf(paymentMethod))
}
}

fun getQuoteSidePaymentMethodsImagePaths(): List<String> {
return quoteSidePaymentMethods.map { payment ->
getPaymentMethodImagePath(payment, "fiat")
}
}

fun getBaseSidePaymentMethodsImagePaths(): List<String> {
return baseSidePaymentMethods.map { payment ->
getPaymentMethodImagePath(payment, "bitcoin")
}
}

private fun getPaymentMethodImagePath(paymentMethod: String, directory: String): String {
val fileName = paymentMethod.lowercase().replace("-", "_")
return "drawable/payment/$directory/$fileName.png"
}
}
132 changes: 31 additions & 101 deletions ...work/bisq/mobile/presentation/ui/uicases/trade/take_offer/TakeOfferPaymentMethodScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,15 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import cafe.adriel.lyricist.LocalStrings
import kotlinx.coroutines.flow.MutableStateFlow
import network.bisq.mobile.i18n.toDisplayString
import network.bisq.mobile.presentation.ui.components.atoms.BisqText
import network.bisq.mobile.presentation.ui.components.atoms.DynamicImage
import network.bisq.mobile.presentation.ui.components.atoms.PaymentTypeCard
import network.bisq.mobile.presentation.ui.components.atoms.layout.BisqGap
import network.bisq.mobile.presentation.ui.components.layout.MultiScreenWizardScaffold
import network.bisq.mobile.presentation.ui.components.molecules.BisqPaymentToggle
import network.bisq.mobile.presentation.ui.components.organisms.PaymentMethodCard
import network.bisq.mobile.presentation.ui.helpers.RememberPresenterLifecycle
import network.bisq.mobile.presentation.ui.theme.BisqTheme
import network.bisq.mobile.presentation.ui.theme.BisqUIConstants
Expand All @@ -32,19 +36,18 @@ import org.koin.compose.koinInject
@Composable
fun TakeOfferPaymentMethodScreen() {
val strings = LocalStrings.current.bisqEasy
val paymentMethodStrings = LocalStrings.current.paymentMethod
val presenter: TakeOfferPaymentMethodPresenter = koinInject()

val baseSidePaymentMethod = remember { mutableStateOf(presenter.baseSidePaymentMethod) }
val quoteSidePaymentMethod = remember { mutableStateOf(presenter.quoteSidePaymentMethod) }
val quoteCurrencyCode = remember { mutableStateOf(presenter.quoteCurrencyCode) }

RememberPresenterLifecycle(presenter, {
baseSidePaymentMethod.value = presenter.baseSidePaymentMethod
quoteSidePaymentMethod.value = presenter.quoteSidePaymentMethod
quoteCurrencyCode.value = presenter.quoteCurrencyCode
})

var customMethodCounter = 1

MultiScreenWizardScaffold(
strings.bisqEasy_takeOffer_progress_method,
stepIndex = 2,
Expand All @@ -60,112 +63,39 @@ fun TakeOfferPaymentMethodScreen() {
)

if (presenter.hasMultipleQuoteSidePaymentMethods) {

BisqGap.V2()
BisqGap.V2()
Column(
modifier = Modifier.padding(horizontal = 16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
BisqText.largeLight(
text = strings.bisqEasy_takeOffer_paymentMethods_subtitle_fiat_buyer("USD"),
color = BisqTheme.colors.grey2
)
BisqGap.V2()
Column(
modifier = Modifier.fillMaxWidth().padding(horizontal = 38.dp),
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.spacedBy(BisqUIConstants.ScreenPadding)
) {

presenter.quoteSidePaymentMethods.forEach { paymentMethod ->
// TODO: Make this to Toggle buttons. Can get paymentMethod as some Enum?
PaymentMethodCard(
title = strings.bisqEasy_takeOffer_paymentMethods_subtitle_fiat_buyer(quoteCurrencyCode.value),
imagePaths = presenter.getQuoteSidePaymentMethodsImagePaths(),
availablePaymentMethods = presenter.quoteSidePaymentMethods,
i18n = LocalStrings.current.paymentMethod,
selectedPaymentMethods = presenter.getPaymentMethodAsSet(quoteSidePaymentMethod.value),
onToggle = { paymentMethod ->
quoteSidePaymentMethod.value = paymentMethod
presenter.onQuoteSidePaymentMethodSelected(paymentMethod)
},
)

val isSelected = paymentMethod == quoteSidePaymentMethod.value
val backgroundColor by animateColorAsState(
targetValue = if (isSelected) BisqTheme.colors.primary else BisqTheme.colors.dark5
)
Row(
modifier = Modifier
.fillMaxWidth()
.clip(shape = RoundedCornerShape(6.dp))
.background(color = backgroundColor)
.clickable {
quoteSidePaymentMethod.value = paymentMethod
presenter.onQuoteSidePaymentMethodSelected(paymentMethod)
}
.padding(start = 18.dp)
.padding(vertical = 10.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(10.dp)
)
{
DynamicImage(
path = "drawable/payment/fiat/${
paymentMethod
.lowercase()
.replace("-", "_")
}.png",
fallbackPath = "drawable/payment/fiat/custom_payment_${customMethodCounter++}.png",
modifier = Modifier.size(15.dp),
)
BisqText.baseRegular(text = paymentMethodStrings.toDisplayString(paymentMethod))
}
}
}
}
}

if (presenter.hasMultipleBaseSidePaymentMethods) {

BisqGap.V2()
BisqGap.V2()
Column(
modifier = Modifier.padding(horizontal = 16.dp),
horizontalAlignment = Alignment.CenterHorizontally,
) {
BisqText.largeLight(
text = strings.bisqEasy_takeOffer_paymentMethods_subtitle_bitcoin_seller,
color = BisqTheme.colors.grey2
)
BisqGap.V1()
Column(
modifier = Modifier.fillMaxWidth().padding(horizontal = 38.dp),
horizontalAlignment = Alignment.Start,
verticalArrangement = Arrangement.spacedBy(BisqUIConstants.ScreenPadding)
) {
presenter.baseSidePaymentMethods.forEach { paymentMethod ->
// TODO: Make this to Toggle buttons. Can get paymentMethod as some Enum?
val isSelected = paymentMethod == baseSidePaymentMethod.value
val backgroundColor by animateColorAsState(
targetValue = if (isSelected) BisqTheme.colors.primary else BisqTheme.colors.dark5
)
Row(
modifier = Modifier
.fillMaxWidth()
.clip(shape = RoundedCornerShape(6.dp))
.background(color = backgroundColor)
.clickable {
baseSidePaymentMethod.value = paymentMethod
presenter.onBaseSidePaymentMethodSelected(paymentMethod)
}
.padding(horizontal = 10.dp)
.padding(vertical = 10.dp),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(10.dp)
) {
DynamicImage(
"drawable/payment/bitcoin/${
paymentMethod
.lowercase()
.replace("-", "_")
}.png",
modifier = Modifier.size(15.dp)
)

BisqText.baseRegular(text = paymentMethodStrings.toDisplayString(paymentMethod))
}
}
}
}
PaymentMethodCard(
title = strings.bisqEasy_takeOffer_paymentMethods_subtitle_bitcoin_seller,
imagePaths = presenter.getBaseSidePaymentMethodsImagePaths(),
availablePaymentMethods = presenter.baseSidePaymentMethods,
i18n = LocalStrings.current.paymentMethod,
selectedPaymentMethods = presenter.getPaymentMethodAsSet(baseSidePaymentMethod.value),
onToggle = { paymentMethod ->
baseSidePaymentMethod.value = paymentMethod
presenter.onBaseSidePaymentMethodSelected(paymentMethod)
},
)

}
}
}
2 changes: 1 addition & 1 deletion ...lin/network/bisq/mobile/presentation/ui/uicases/trade/take_offer/TakeOfferReviewScreen.kt
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ fun TakeOfferReviewTradeScreen() {
}

BisqHDivider()
Column(verticalArrangement = Arrangement.spacedBy(24.dp)) {
Column(verticalArrangement = Arrangement.spacedBy(BisqUIConstants.ScreenPadding2X)) {
InfoBox(
label = strings.bisqEasy_tradeWizard_review_priceDescription_taker,
valueComposable = {
Expand Down

0 comments on commit 4cbab23

Please sign in to comment.