UI: Create offer flow (#108)

* Persistance logic

 - if Settings.firstLaunch is true. Onboarding screen will be shown.
 - On viewing all slides in Onboarding screen, Settings.firstLanuch is persisted to false

 - Multi screen wizard transitions. Replaced slide with fadeIn/Out

 - Multi screen wizard Topbar.Progressbar fixed

 - Rounded btc display to 8 decimals (KMP logic. Platform specific implementation

* Create Offer - 2 screens and various minor updates;

 - BispGap

 - Button - Custom text component

 - CurrencyProfileCard - Selectable

 - Multiscreen wizard - Can make use of both Scroll and Static Scaffolds now. Whichever screen needs to use LazyColumn, can now maje use of static

 - Btc - sats display (partial)

* - Create offer UI 2/3

* - GettingStarted Interface

* - delete unnecessary appleMain dir

---------

Co-authored-by: Rodrigo Varela <[email protected]>

androidNode/src/androidMain/kotlin/network/bisq/mobile/android/node/di/AndroidNodeModule.kt

@@ -43,5 +43,5 @@ val androidNodeModule = module {
     // and binding the same obj to 2 different abstractions
     single<MainPresenter> { NodeMainPresenter(get(), get(), get(),  get(), get(), get()) } bind AppPresenter::class
 
-    single<IOnboardingPresenter> { OnBoardingNodePresenter(get()) } bind IOnboardingPresenter::class
+    single<IOnboardingPresenter> { OnBoardingNodePresenter(get(), get()) } bind IOnboardingPresenter::class
 }

androidNode/src/androidMain/kotlin/network/bisq/mobile/android/node/presentation/OnBoardingNodePresenter.kt

@@ -1,11 +1,12 @@
 package network.bisq.mobile.android.node.presentation
 
+import network.bisq.mobile.domain.data.repository.SettingsRepository
 import network.bisq.mobile.presentation.MainPresenter
 import network.bisq.mobile.presentation.ui.uicases.startup.IOnboardingPresenter
 import network.bisq.mobile.presentation.ui.uicases.startup.OnBoardingPresenter
 
 class OnBoardingNodePresenter(
-    mainPresenter: MainPresenter
-) : OnBoardingPresenter(mainPresenter), IOnboardingPresenter {
+    mainPresenter: MainPresenter, settingsRepository: SettingsRepository
+) : OnBoardingPresenter(mainPresenter, settingsRepository), IOnboardingPresenter {
     override val indexesToShow = listOf(1, 2)
 }

shared/domain/src/commonMain/kotlin/network/bisq/mobile/domain/data/model/Settings.kt

@@ -6,4 +6,6 @@ import kotlinx.serialization.Serializable
 open class Settings : BaseModel() {
     open var bisqApiUrl: String = ""
     open var isConnected: Boolean = false
+
+    open var firstLaunch: Boolean = true
 }

shared/presentation/src/androidMain/kotlin/network/bisq/mobile/presentation/ui/helpers/NumberFormatter.android.kt

@@ -0,0 +1,8 @@
+package network.bisq.mobile.presentation.ui.helpers
+
+import java.text.DecimalFormat
+
+actual val numberFormatter: NumberFormatter = object : NumberFormatter {
+    private val formatter = DecimalFormat("#.########")
+    override fun satsFormat(value: Double): String = formatter.format(value)
+}

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/i18n/BisqEasyTradeWizardStrings.kt

@@ -29,7 +29,7 @@ data class BisqEasyTradeWizardStrings(
     val bisqEasy_price_percentage_title: String,
     val bisqEasy_price_percentage_inputBoxText: String,
     val bisqEasy_price_tradePrice_title: String,
-    val bisqEasy_price_tradePrice_inputBoxText: String,
+    val bisqEasy_price_tradePrice_inputBoxText: (String) -> String,
     val bisqEasy_price_feedback_sentence: String,
     val bisqEasy_price_feedback_sentence_veryLow: String,
     val bisqEasy_price_feedback_sentence_low: String,
@@ -85,8 +85,8 @@ data class BisqEasyTradeWizardStrings(
     val bisqEasy_tradeWizard_amount_buyer_numSellers_many: String,
     val bisqEasy_tradeWizard_amount_numOffers_0: String,
     val bisqEasy_tradeWizard_amount_numOffers_1: String,
-    val bisqEasy_tradeWizard_amount_numOffers_many: String,
-    val bisqEasy_tradeWizard_amount_buyer_limitInfo: String,
+    val bisqEasy_tradeWizard_amount_numOffers_many: (String) -> String,
+    val bisqEasy_tradeWizard_amount_buyer_limitInfo:  (String, String) -> String,
     val bisqEasy_tradeWizard_amount_buyer_limitInfo_overlay_info: String,
     val bisqEasy_tradeWizard_amount_buyer_limitInfo_wizard_info_leadLine: String,
     val bisqEasy_tradeWizard_amount_buyer_limitInfo_wizard_info: String,
@@ -171,4 +171,14 @@ data class BisqEasyTradeWizardStrings(
     val bisqEasy_tradeWizard_review_chatMessage_peerMessageTitle_sell: String,
     val bisqEasy_tradeWizard_review_chatMessage_peerMessageTitle_buy: String,
     val bisqEasy_tradeWizard_review_chatMessage_myMessageTitle: String,
+
+    // Mobile app specific
+    val bisqEasy_tradeWizard_buy_description: String,
+    val bisqEasy_tradeWizard_sell_description: String,
+    val bisqEasy_tradeWizard_trade_amount: String,
+    val bisqEasy_tradeWizard_fixed_amount: String,
+    val bisqEasy_tradeWizard_range_amount: String,
+    val bisqEasy_tradeWizard_trade_price_percentage: String,
+    val bisqEasy_tradeWizard_trade_price_fixed: String,
+
 )

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/i18n/BisqEasyTradeWizardStringsEn.kt

@@ -30,7 +30,7 @@ val EnBisqEasyTradeWizardStrings = BisqEasyTradeWizardStrings(
     bisqEasy_price_percentage_title = "Percentage price",
     bisqEasy_price_percentage_inputBoxText = "Market price percentage between -10% and 50%",
     bisqEasy_price_tradePrice_title = "Fixed price",
-    bisqEasy_price_tradePrice_inputBoxText = "Trade price in {0}",
+    bisqEasy_price_tradePrice_inputBoxText = { currency -> "Trade price in $currency" },
     bisqEasy_price_feedback_sentence = "Your offer has {0} chances to be taken at this price.",
     bisqEasy_price_feedback_sentence_veryLow = "very low",
     bisqEasy_price_feedback_sentence_low = "low",
@@ -86,8 +86,8 @@ val EnBisqEasyTradeWizardStrings = BisqEasyTradeWizardStrings(
     bisqEasy_tradeWizard_amount_buyer_numSellers_many = "are {0} sellers",
     bisqEasy_tradeWizard_amount_numOffers_0 = "is no offer",
     bisqEasy_tradeWizard_amount_numOffers_1 = "is one offer",
-    bisqEasy_tradeWizard_amount_numOffers_many = "are {0} offers",
-    bisqEasy_tradeWizard_amount_buyer_limitInfo = "There {0} in the network with sufficient reputation to take an offer of {1}.",
+    bisqEasy_tradeWizard_amount_numOffers_many = { count -> "are $count offers" },
+    bisqEasy_tradeWizard_amount_buyer_limitInfo = { sellers, currency -> "There $sellers in the network with sufficient reputation to take an offer of $currency." },
     bisqEasy_tradeWizard_amount_buyer_limitInfo_overlay_info = "A seller who wants to take your offer of {0}, must have a reputation score of at least {1}.\n By reducing the maximum trade amount, you make your offer accessible to more sellers.",
     bisqEasy_tradeWizard_amount_buyer_limitInfo_wizard_info_leadLine = "There {0} matching the chosen trade amount.",
     bisqEasy_tradeWizard_amount_buyer_limitInfo_wizard_info = "For offers up to {0}, reputation requirements are relaxed.",
@@ -172,4 +172,14 @@ val EnBisqEasyTradeWizardStrings = BisqEasyTradeWizardStrings(
     bisqEasy_tradeWizard_review_chatMessage_peerMessageTitle_sell = "Sell Bitcoin to",
     bisqEasy_tradeWizard_review_chatMessage_peerMessageTitle_buy = "Buy Bitcoin from",
     bisqEasy_tradeWizard_review_chatMessage_myMessageTitle = "My Offer to {0} Bitcoin",
+
+    bisqEasy_tradeWizard_buy_description = "The easiest way to get your first Bitcoin",
+    bisqEasy_tradeWizard_sell_description = "Experienced Bisq users with reputation can act as seller",
+
+    bisqEasy_tradeWizard_trade_amount = "Trade amount",
+    bisqEasy_tradeWizard_fixed_amount = "Fixed amount",
+    bisqEasy_tradeWizard_range_amount = "Range amount",
+
+    bisqEasy_tradeWizard_trade_price_percentage = "Percentage",
+    bisqEasy_tradeWizard_trade_price_fixed = "Fixed",
 )

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/i18n/BisqEasyTradeWizardStringsFr.kt

@@ -27,7 +27,7 @@ val FrBisqEasyTradeWizardStrings = BisqEasyTradeWizardStrings(
     bisqEasy_price_percentage_title = "[FR] Percentage price",
     bisqEasy_price_percentage_inputBoxText = "[FR] Market price percentage between -10% and 50%",
     bisqEasy_price_tradePrice_title = "[FR] Fixed price",
-    bisqEasy_price_tradePrice_inputBoxText = "[FR] Trade price in {0}",
+    bisqEasy_price_tradePrice_inputBoxText = { currency -> "[FR] Trade price in $currency" },
     bisqEasy_price_feedback_sentence = "[FR] Your offer has {0} chances to be taken at this price.",
     bisqEasy_price_feedback_sentence_veryLow = "[FR] very low",
     bisqEasy_price_feedback_sentence_low = "[FR] low",
@@ -83,8 +83,8 @@ val FrBisqEasyTradeWizardStrings = BisqEasyTradeWizardStrings(
     bisqEasy_tradeWizard_amount_buyer_numSellers_many = "[FR] are {0} sellers",
     bisqEasy_tradeWizard_amount_numOffers_0 = "[FR] is no offer",
     bisqEasy_tradeWizard_amount_numOffers_1 = "[FR] is one offer",
-    bisqEasy_tradeWizard_amount_numOffers_many = "[FR] are {0} offers",
-    bisqEasy_tradeWizard_amount_buyer_limitInfo = "[FR] There {0} in the network with sufficient reputation to take an offer of {1}.",
+    bisqEasy_tradeWizard_amount_numOffers_many = { count -> "[FR] are $count offers" },
+    bisqEasy_tradeWizard_amount_buyer_limitInfo = { sellers, currency -> "[FR] There $sellers in the network with sufficient reputation to take an offer of $currency."},
     bisqEasy_tradeWizard_amount_buyer_limitInfo_overlay_info = "[FR] A seller who wants to take your offer of {0}, must have a reputation score of at least {1}.\n By reducing the maximum trade amount, you make your offer accessible to more sellers.",
     bisqEasy_tradeWizard_amount_buyer_limitInfo_wizard_info_leadLine = "[FR] There {0} matching the chosen trade amount.",
     bisqEasy_tradeWizard_amount_buyer_limitInfo_wizard_info = "[FR] For offers up to {0}, reputation requirements are relaxed.",
@@ -169,4 +169,14 @@ val FrBisqEasyTradeWizardStrings = BisqEasyTradeWizardStrings(
     bisqEasy_tradeWizard_review_chatMessage_peerMessageTitle_sell = "[FR] Sell Bitcoin to",
     bisqEasy_tradeWizard_review_chatMessage_peerMessageTitle_buy = "[FR] Buy Bitcoin from",
     bisqEasy_tradeWizard_review_chatMessage_myMessageTitle = "[FR] My Offer to {0} Bitcoin",
+
+    bisqEasy_tradeWizard_buy_description = "[FR] The easiest way to get your first Bitcoin",
+    bisqEasy_tradeWizard_sell_description = "[FR] Experienced Bisq users with reputation can act as seller",
+
+    bisqEasy_tradeWizard_trade_amount= "[FR] Trade amount",
+    bisqEasy_tradeWizard_fixed_amount= "[FR] Fixed amount",
+    bisqEasy_tradeWizard_range_amount= "[FR] Range amount",
+
+    bisqEasy_tradeWizard_trade_price_percentage = "[FR] Percentage",
+    bisqEasy_tradeWizard_trade_price_fixed = "[FR] Fixed",
 )

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/i18n/CommonStrings.kt

@@ -13,4 +13,5 @@ data class CommonStrings(
     val offers_list_sell_to: String,
 
     val take_offer: String,
+    val currency: String,
 )

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/i18n/CommonStringsEn.kt

@@ -16,5 +16,6 @@ val EnCommonStrings = CommonStrings(
     offers_list_sell_to = "Sell to",
 
     take_offer = "Take offer",
+    currency = "Currency",
 
 )

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/i18n/CommonStringsFr.kt

@@ -16,5 +16,6 @@ val FrCommonStrings = CommonStrings(
     offers_list_buy_from = "[FR] Buy from",
     offers_list_sell_to = "[FR] Sell to",
 
-    take_offer = "[FR] Take offer"
+    take_offer = "[FR] Take offer",
+    currency = "[FR] Currency"
 )

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/di/PresentationModule.kt

@@ -17,6 +17,9 @@ import network.bisq.mobile.presentation.ui.uicases.offers.takeOffer.ITakeOfferTr
 import network.bisq.mobile.presentation.ui.uicases.offers.takeOffer.PaymentMethodPresenter
 import network.bisq.mobile.presentation.ui.uicases.offers.takeOffer.ReviewTradePresenter
 import network.bisq.mobile.presentation.ui.uicases.offers.takeOffer.TradeAmountPresenter
+import network.bisq.mobile.presentation.ui.uicases.offers.createOffer.CreateOfferPresenter
+import network.bisq.mobile.presentation.ui.uicases.offers.createOffer.ICreateOfferPresenter
+import network.bisq.mobile.presentation.ui.uicases.offers.takeOffer.*
 import network.bisq.mobile.presentation.ui.uicases.startup.CreateProfilePresenter
 import network.bisq.mobile.presentation.ui.uicases.startup.IOnboardingPresenter
 import network.bisq.mobile.presentation.ui.uicases.startup.ITrustedNodeSetupPresenter
@@ -43,11 +46,12 @@ val presentationModule = module {
         SplashPresenter(
             get(),
             get(),
-            get()
+            get(),
+            get(),
         )
     }
 
-    single { OnBoardingPresenter(get()) } bind IOnboardingPresenter::class
+    single { OnBoardingPresenter(get(), get()) } bind IOnboardingPresenter::class
 
     single<GettingStartedPresenter> {
         GettingStartedPresenter(
@@ -91,4 +95,6 @@ val presentationModule = module {
     } bind IMyTrades::class
 
     single{ TradeFlowPresenter(get(), get()) } bind ITradeFlowPresenter::class
+
+    single{ CreateOfferPresenter(get(), get()) } bind ICreateOfferPresenter::class
 }

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/CurrencyProfileCard.kt

@@ -1,5 +1,6 @@
 package network.bisq.mobile.presentation.ui.components
 
+import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Arrangement
@@ -16,7 +17,11 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.drawBehind
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.geometry.Offset
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.platform.LocalDensity
 import network.bisq.mobile.domain.data.model.MarketListItem
 import network.bisq.mobile.presentation.ui.components.atoms.BisqText
 import network.bisq.mobile.presentation.ui.components.atoms.DynamicImage
@@ -25,17 +30,41 @@ import network.bisq.mobile.presentation.ui.theme.BisqTheme
 @Composable
 fun CurrencyProfileCard(
     item: MarketListItem,
+    isSelected: Boolean = false,
     onClick: () -> Unit
 ) {
     val interactionSource = remember { MutableInteractionSource() }
     val numOffers = item.numOffers.collectAsState().value
+    val highLightColor = BisqTheme.colors.primary
+
+    val backgroundColor = if (isSelected) {
+        BisqTheme.colors.secondary
+    } else {
+        BisqTheme.colors.backgroundColor
+    }
 
     Row(
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceBetween,
         modifier = Modifier
             .fillMaxWidth()
-            .padding(vertical = 4.dp)
+            .background(backgroundColor)
+            .then(
+                if (isSelected) {
+                    Modifier.drawBehind {
+                        drawLine(
+                            color = highLightColor,
+                            start = Offset(0f, size.height),
+                            end = Offset(0f, 0f),
+                            strokeWidth = 2.dp.toPx()
+                        )
+                    }
+                } else {
+                    Modifier.background(Color.Transparent)
+                }
+            )
+            .padding(horizontal = 4.dp, vertical = (16/LocalDensity.current.density).dp)
+            // .padding(vertical = 4.dp)
             .clickable(
                 interactionSource = interactionSource,
                 indication = null,
@@ -44,6 +73,7 @@ fun CurrencyProfileCard(
     ) {
         Row(
             verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(10.dp)
         ) {
             // If the image is not available we get an exception here and we cannot use try/catch
             // Is DynamicImage needed? If so we can pass it as

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/atoms/Button.kt

@@ -28,6 +28,7 @@ fun BisqButton(
     iconOnly: (@Composable () -> Unit)? = null,
     leftIcon: (@Composable () -> Unit)? = null,
     rightIcon: (@Composable () -> Unit)? = null,
+    textComponent: (@Composable () -> Unit)? = null,
     modifier: Modifier = Modifier,
     cornerRadius: Dp = 8.dp,
     disabled: Boolean = false,
@@ -44,10 +45,11 @@ fun BisqButton(
             disabledContentColor = color),
         shape = RoundedCornerShape(cornerRadius),
         enabled = !disabled,
-        border = border
+        border = border,
+        modifier = modifier
     ) {
-        if (iconOnly == null && text == null) {
-            BisqText.baseMedium("Error: Pass either text or icon")
+        if (iconOnly == null && text == null && textComponent == null) {
+            BisqText.baseMedium("Error: Pass either text or customText or icon")
         }
 
         if (iconOnly != null) {
@@ -56,10 +58,14 @@ fun BisqButton(
             Row {
                 if(leftIcon != null) leftIcon()
                 if(leftIcon != null) Spacer(modifier = Modifier.width(10.dp))
-                BisqText.baseMedium(
-                    text = text,
-                    color = BisqTheme.colors.light1,
-                    )
+                if (textComponent != null) {
+                    textComponent()
+                } else {
+                    BisqText.baseMedium(
+                        text = text,
+                        color = BisqTheme.colors.light1,
+                        )
+                }
                 if(rightIcon != null) Spacer(modifier = Modifier.width(10.dp))
                 if(rightIcon != null) rightIcon()
             }

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/atoms/Gap.kt

@@ -0,0 +1,38 @@
+package network.bisq.mobile.presentation.ui.components.atoms
+
+import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.width
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import network.bisq.mobile.presentation.ui.theme.BisqUIConstants
+
+object BisqGap {
+
+    @Composable()
+    fun V1() {
+        Spacer(modifier = Modifier.height(BisqUIConstants.ScreenPadding))
+    }
+
+    @Composable()
+    fun V2() {
+        Spacer(modifier = Modifier.height(BisqUIConstants.ScreenPadding2X))
+    }
+
+    @Composable()
+    fun V3() {
+        Spacer(modifier = Modifier.height(BisqUIConstants.ScreenPadding3X))
+    }
+
+    @Composable()
+    fun V4() {
+        Spacer(modifier = Modifier.height(BisqUIConstants.ScreenPadding4X))
+    }
+
+    @Composable()
+    fun H1() {
+        Spacer(modifier = Modifier.width(BisqUIConstants.ScreenPadding))
+    }
+
+}
+