Trade flow screen UI 1/2

bisqapps/shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/uicases/offers/TakeOfferReviewTradeScreen.kt

@@ -0,0 +1,173 @@
+package network.bisq.mobile.presentation.ui.uicases.offers
+
+import androidx.compose.foundation.layout.*
+import androidx.compose.material3.HorizontalDivider
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.navigation.NavHostController
+import network.bisq.mobile.presentation.ui.components.atoms.BisqButton
+import network.bisq.mobile.presentation.ui.components.atoms.BisqText
+import network.bisq.mobile.presentation.ui.navigation.Routes
+import network.bisq.mobile.presentation.ui.theme.BisqTheme
+import org.koin.compose.koinInject
+import org.koin.core.qualifier.named
+
+@Composable
+fun TakeOfferReviewTradeScreen() {
+    val navController: NavHostController = koinInject(named("RootNavController"))
+    TakeOfferScaffold {
+        Column(modifier = Modifier.padding(horizontal = 32.dp, vertical = 24.dp)) {
+            BisqText.h3Regular(
+                text = "Review trade",
+                color = BisqTheme.colors.light1
+            )
+            Spacer(modifier = Modifier.height(32.dp))
+            Column(
+                verticalArrangement = Arrangement.spacedBy(32.dp)
+            ) {
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.SpaceBetween
+                ) {
+                    Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
+                        BisqText.largeRegular(
+                            text = "I WANT TO",
+                            color = BisqTheme.colors.grey2
+                        )
+                        BisqText.h5Regular(
+                            text = "BUY Bitcoin"
+                        )
+                    }
+                    Column(
+                        verticalArrangement = Arrangement.spacedBy(12.dp),
+                        horizontalAlignment = Alignment.End
+                    ) {
+                        BisqText.largeRegular(
+                            text = "FIAT PAYMENT METHOD",
+                            color = BisqTheme.colors.grey2
+                        )
+                        BisqText.h5Regular(
+                            text = "Strike"
+                        )
+                    }
+                }
+
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.SpaceBetween
+                ) {
+                    Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
+                        BisqText.largeRegular(
+                            text = "AMOUNT TO PAY",
+                            color = BisqTheme.colors.grey2
+                        )
+                        BisqText.h5Regular(
+                            text = "900.00"
+                        )
+                    }
+                    Column(
+                        verticalArrangement = Arrangement.spacedBy(12.dp),
+                        horizontalAlignment = Alignment.End
+                    ) {
+                        BisqText.largeRegular(
+                            text = "AMOUNT TO RECEIVE",
+                            color = BisqTheme.colors.grey2
+                        )
+                        BisqText.h5Regular(
+                            text = "0.00918367 btc"
+                        )
+                    }
+                }
+            }
+            HorizontalDivider(
+                thickness = 1.dp,
+                modifier = Modifier.padding(vertical = 28.dp),
+                color = Color(0XFF2B2B2B)
+            )
+            Column(
+                verticalArrangement = Arrangement.spacedBy(32.dp)
+            ) {
+                Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
+                    BisqText.largeRegular(
+                        text = "Trade price",
+                        color = BisqTheme.colors.grey2
+                    )
+                    Column(verticalArrangement = Arrangement.spacedBy(4.dp)) {
+                        Row(
+                            verticalAlignment = Alignment.Bottom,
+                            horizontalArrangement = Arrangement.spacedBy(4.dp)
+                        ) {
+                            BisqText.h5Regular(
+                                text = "98,000.68"
+                            )
+                            BisqText.baseRegular(
+                                text = "BTC/USD",
+                                color = BisqTheme.colors.grey2
+                            )
+                        }
+                        BisqText.smallRegular(
+                            text = "Float price 1.00% above market price of 60,000 BTC/USD",
+                            color = BisqTheme.colors.grey4
+                        )
+                    }
+                }
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.SpaceBetween
+                ) {
+                    Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
+                        BisqText.largeRegular(
+                            text = "Bitcoin settlement method",
+                            color = BisqTheme.colors.grey2
+                        )
+                        BisqText.h5Regular(
+                            text = "Lightning"
+                        )
+                    }
+                    Column(
+                        verticalArrangement = Arrangement.spacedBy(12.dp),
+                        horizontalAlignment = Alignment.End
+                    ) {
+                        BisqText.largeRegular(
+                            text = "Fiat payment",
+                            color = BisqTheme.colors.grey2
+                        )
+                        BisqText.h5Regular(
+                            text = "Strike"
+                        )
+                    }
+                }
+                Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
+                    BisqText.largeRegular(
+                        text = "Fees",
+                        color = BisqTheme.colors.grey2
+                    )
+                    BisqText.h5Regular(
+                        text = "No trade fees in Bisq Easy  :-)"
+                    )
+                }
+            }
+        }
+        Row(
+            horizontalArrangement = Arrangement.SpaceBetween,
+            modifier = Modifier.fillMaxWidth().padding(horizontal = 32.dp)
+        ) {
+            BisqButton(
+                text = "Back",
+                backgroundColor = BisqTheme.colors.dark5,
+                onClick = { },
+                padding = PaddingValues(horizontal = 64.dp, vertical = 4.dp)
+            )
+            BisqButton(
+                text = "Next",
+                onClick = {
+                    navController.navigate(Routes.TradeFlow.name)
+                },
+                padding = PaddingValues(horizontal = 64.dp, vertical = 4.dp)
+            )
+        }
+    }
+}

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

@@ -20,7 +20,9 @@ import network.bisq.mobile.presentation.ui.uicases.startup.OnBoardingPresenter
 import network.bisq.mobile.presentation.ui.uicases.startup.SplashPresenter
 import network.bisq.mobile.presentation.ui.uicases.startup.TrustedNodeSetupPresenter
 import network.bisq.mobile.presentation.ui.uicases.trades.IMyTrades
+import network.bisq.mobile.presentation.ui.uicases.trades.ITradeFlowPresenter
 import network.bisq.mobile.presentation.ui.uicases.trades.MyTradesPresenter
+import network.bisq.mobile.presentation.ui.uicases.trades.TradeFlowPresenter
 import org.koin.core.qualifier.named
 import org.koin.dsl.bind
 import org.koin.dsl.module
@@ -83,4 +85,6 @@ val presentationModule = module {
             myTradesRepository = get()
         )
     } bind IMyTrades::class
+
+    single{ TradeFlowPresenter(get(), get()) } bind ITradeFlowPresenter::class
 }

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

@@ -1,5 +1,6 @@
 package network.bisq.mobile.presentation.ui.components.atoms
 
+import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.layout.*
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Button
@@ -30,6 +31,7 @@ fun BisqButton(
     modifier: Modifier = Modifier,
     cornerRadius: Dp = 8.dp,
     disabled: Boolean = false,
+    border: BorderStroke? = null
 ) {
 
     Button(
@@ -42,6 +44,7 @@ fun BisqButton(
             disabledContentColor = color),
         shape = RoundedCornerShape(cornerRadius),
         enabled = !disabled,
+        border = border
     ) {
         if (iconOnly == null && text == null) {
             BisqText.baseMedium("Error: Pass either text or icon")

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

@@ -0,0 +1,39 @@
+package network.bisq.mobile.presentation.ui.components.atoms
+
+import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.size
+import androidx.compose.foundation.layout.width
+import androidx.compose.material3.CircularProgressIndicator
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.unit.dp
+import network.bisq.mobile.presentation.ui.theme.BisqTheme
+import org.jetbrains.compose.resources.DrawableResource
+import org.jetbrains.compose.resources.painterResource
+
+@Composable
+fun CircularLoadingImage(
+    image: DrawableResource,
+    isLoading: Boolean
+) {
+    Box(
+        contentAlignment = Alignment.Center
+    ) {
+        Image(
+            painterResource(image), "",
+            modifier = Modifier.height(36.dp).width(30.dp)
+        )
+        if (isLoading) {
+            CircularProgressIndicator(
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .size(60.dp),
+                color = BisqTheme.colors.primaryDisabled,
+                strokeWidth = 2.dp
+            )
+        }
+    }
+}

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

@@ -24,5 +24,10 @@ fun SvgImage(
 }
 
 object SvgImageNames {
+    const val BACK_BUTTON = "svg_back_button.svg"
+    const val STAR = "svg_star.svg"
     const val INFO = "svg_info.svg"
+    const val EXCHANGE_VERTICAL_ARROW = "svg_exchange_v_arrow.svg"
+    const val EXCHANGE_HORIZONTAL_ARROW = "svg_exchange_h_arrow.svg"
+    const val UP_ARROW = "svg_up_arrow.svg"
 }

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

@@ -26,7 +26,7 @@ fun BisqTextField(
     label: String,
     value: String,
     onValueChanged: (String) -> Unit,
-    placeholder: String?,
+    placeholder: String? = null,
     labelRightSuffix: (@Composable () -> Unit)? = null,
     modifier: Modifier = Modifier,
     ) {

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

@@ -28,6 +28,16 @@ fun CopyIcon(modifier: Modifier = Modifier) {
     Image(painterResource(Res.drawable.icon_copy), "Copy icon", modifier = modifier)
 }
 
+@Composable
+fun SwapHArrowIcon(modifier: Modifier = Modifier.size(16.dp)) {
+    Image(painterResource(Res.drawable.exchange_h_arrow), "Swap horizontal icon", modifier = modifier)
+}
+
+@Composable
+fun SwapVArrowIcon(modifier: Modifier = Modifier.size(16.dp)) {
+    Image(painterResource(Res.drawable.exchange_v_arrow), "Swap vertical icon", modifier = modifier)
+}
+
 @Composable
 fun QuestionIcon(modifier: Modifier = Modifier) {
     Image(painterResource(Res.drawable.icon_question_mark), "Question icon", modifier = modifier)
@@ -54,6 +64,11 @@ fun StarFillIcon(modifier: Modifier = Modifier.size(16.dp)) {
     Image(painterResource(Res.drawable.icon_star), "Filled star icon", modifier = modifier)
 }
 
+@Composable
+fun UpIcon(modifier: Modifier = Modifier.size(30.dp)) {
+    Image(painterResource(Res.drawable.up_arrow), "Up icon", modifier = modifier)
+}
+
 @Composable
 fun UserIcon(platformImage: PlatformImage?, modifier: Modifier = Modifier) {
     if (platformImage == null) {

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/ui/components/molecules/info/InfoBox.kt

@@ -1,4 +1,4 @@
-package network.bisq.mobile.presentation.ui.components.atoms.text
+package network.bisq.mobile.presentation.ui.components.molecules.info
 
 import androidx.compose.foundation.layout.*
 import androidx.compose.runtime.Composable
@@ -13,13 +13,19 @@ enum class InfoBoxValueType {
     TitleSmall,
 }
 
+enum class InfoBoxStyle {
+    Style1, // Label on top, value below
+    Style2  // Value on top, label below
+}
+
 @Composable
 fun InfoBox(
     label: String,
     value: String? = null,
     valueComposable: (@Composable () -> Unit)? = null,
     rightAlign: Boolean = false,
     valueType: InfoBoxValueType = InfoBoxValueType.BoldValue,
+    style: InfoBoxStyle = InfoBoxStyle.Style1,
 ) {
 
     val valueWidget: @Composable () -> Unit = if (value != null) {
@@ -40,11 +46,34 @@ fun InfoBox(
         }
     }
 
+    when (style) {
+        InfoBoxStyle.Style1 -> {
+            Column(
+                horizontalAlignment = if (rightAlign) Alignment.End else Alignment.Start,
+                verticalArrangement = Arrangement.spacedBy(2.dp)
+            ) {
+                BisqText.baseRegular(text = label, color = BisqTheme.colors.grey2)
+                valueWidget()
+            }
+        }
+        InfoBoxStyle.Style2 -> {
+            Column(
+                horizontalAlignment = if (rightAlign) Alignment.End else Alignment.Start,
+                verticalArrangement = Arrangement.spacedBy(2.dp)
+            ) {
+                valueWidget()
+                BisqText.baseRegular(text = label, color = BisqTheme.colors.grey2)
+            }
+        }
+    }
+
+    /*
     Column(
         horizontalAlignment = if (rightAlign) Alignment.End else Alignment.Start,
         verticalArrangement = Arrangement.spacedBy(2.dp)
     ) {
         BisqText.baseRegular(text = label, color = BisqTheme.colors.grey2)
         valueWidget()
     }
+    */
 }