UI: Various improvements and fixes (#142)

* - My Trades UI (#132), Trading UI Dialogs (#131)

* - Create offer FAB button in Offer list screen (#114)

* - showSnackBar() in BasePresenter. Tested in androidNode, androidClient. Having some other resource loading issue with iOS, not able to test.

* - Copy, Paste, Scan QR (Tested in android)

* - Code refactor: CloseIcon

* Removed QR Code Scanner for this PR

* Fix: Missing Icon imports

* Offer card layout - Experimenting

* - file refactorings: Removed duplicate OfferListPresenter in 'offers'; moved all files from 'offers' to 'offer' and from 'trades' to 'trade'

* - [fix] Create Offer nav issue

* - Remove Take offer nav stack, when Take offer flow is confirmed and TradeFlow nav happens; Snackbar warnings in PaymentMethod screen, when payment method is not selected

* - removed qr related code; removed dead code; Snackbar color - Dark text over white BG

* Take offer UI Improvements
 - 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

* - Fixed compile time issues

* [Fix] Back navigation

* - added potential implementation for ios BackHAndler commented for now as explained in the TODO

---------

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

shared/presentation/src/androidMain/kotlin/network/bisq/mobile/presentation/ui/components/BackHandler.android.kt

@@ -0,0 +1,11 @@
+package network.bisq.mobile.presentation.ui.components
+
+import androidx.activity.compose.BackHandler as AndroidBackHandler
+import androidx.compose.runtime.Composable
+
+@Composable
+actual fun BackHandler(onBackPressed: () -> Unit) {
+    AndroidBackHandler {
+        onBackPressed()
+    }
+}

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

@@ -9,6 +9,10 @@ data class CommonStrings(
 
     val common_offers: String,
     val common_search: String,
+    val common_buy: String,
+    val common_sell: String,
+    val common_yes: String,
+    val common_no: String,
 
     val offers_list_buy_from: String,
     val offers_list_sell_to: String,

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

@@ -9,6 +9,10 @@ val EnCommonStrings = CommonStrings(
 
     common_offers = "Offers",
     common_search = "Search",
+    common_buy = "Buy",
+    common_sell = "Sell",
+    common_yes = "Yes",
+    common_no = "No",
 
     offers_list_buy_from = "Buy from",
     offers_list_sell_to = "Sell to",

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

@@ -10,6 +10,10 @@ val FrCommonStrings = CommonStrings(
 
     common_offers = "[FR] offers",
     common_search = "[FR] Search",
+    common_buy = "[FR] Buy",
+    common_sell = "[FR] Sell",
+    common_yes = "[FR] Yes",
+    common_no = "[FR] No",
 
     offers_list_buy_from = "[FR] Buy from",
     offers_list_sell_to = "[FR] Sell to",

shared/presentation/src/commonMain/kotlin/network/bisq/mobile/presentation/BasePresenter.kt

@@ -1,15 +1,19 @@
 package network.bisq.mobile.presentation
 
+import androidx.compose.material3.SnackbarHostState
 import androidx.annotation.CallSuper
 import androidx.navigation.NavHostController
 import kotlinx.coroutines.*
 import kotlinx.coroutines.flow.*
+import kotlinx.coroutines.flow.SharingStarted
+import kotlinx.coroutines.flow.StateFlow
+import kotlinx.coroutines.flow.map
+import kotlinx.coroutines.flow.stateIn
 import network.bisq.mobile.domain.data.BackgroundDispatcher
 import network.bisq.mobile.domain.data.model.BaseModel
 import network.bisq.mobile.i18n.AppStrings
 import network.bisq.mobile.domain.utils.Logging
 
-
 /**
  * Presenter methods accesible by all views. Views should extend this interface when defining the behaviour expected for their presenter.
  */
@@ -29,6 +33,9 @@ interface ViewPresenter {
      */
     fun getRootTabNavController(): NavHostController
 
+    fun getSnackState(): SnackbarHostState
+    fun showSnackbar(message: String, isError: Boolean = true)
+
     /**
      * Navigate back in the stack
      */
@@ -71,6 +78,17 @@ abstract class BasePresenter(private val rootPresenter: MainPresenter?): ViewPre
     // Presenter is interactive by default
     private val _isInteractive = MutableStateFlow(true)
     override val isInteractive: StateFlow<Boolean> = _isInteractive
+    val snackbarHostState: SnackbarHostState = SnackbarHostState()
+
+    override fun getSnackState(): SnackbarHostState {
+        return snackbarHostState
+    }
+
+    override fun showSnackbar(message: String, isError: Boolean) {
+        uiScope.launch {
+            snackbarHostState.showSnackbar(message, withDismissAction = true)
+        }
+    }
 
     /**
      * @throws IllegalStateException if this presenter has no root

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

@@ -1,21 +1,23 @@
 package network.bisq.mobile.presentation.di
 
 import network.bisq.mobile.client.ClientMainPresenter
-import network.bisq.mobile.domain.UrlLauncher
 import network.bisq.mobile.presentation.MainPresenter
 import network.bisq.mobile.presentation.ui.AppPresenter
 import network.bisq.mobile.presentation.ui.components.molecules.ITopBarPresenter
 import network.bisq.mobile.presentation.ui.components.molecules.TopBarPresenter
 import network.bisq.mobile.presentation.ui.uicases.GettingStartedPresenter
 import network.bisq.mobile.presentation.ui.uicases.offer.MarketListPresenter
-import network.bisq.mobile.presentation.ui.uicases.offer.OffersListPresenter
 import network.bisq.mobile.presentation.ui.uicases.offer.create_offer.CreateOfferAmountPresenter
 import network.bisq.mobile.presentation.ui.uicases.offer.create_offer.CreateOfferDirectionPresenter
 import network.bisq.mobile.presentation.ui.uicases.offer.create_offer.CreateOfferMarketPresenter
 import network.bisq.mobile.presentation.ui.uicases.offer.create_offer.CreateOfferPaymentMethodPresenter
 import network.bisq.mobile.presentation.ui.uicases.offer.create_offer.CreateOfferPresenter
 import network.bisq.mobile.presentation.ui.uicases.offer.create_offer.CreateOfferPricePresenter
 import network.bisq.mobile.presentation.ui.uicases.offer.create_offer.CreateOfferReviewPresenter
+import network.bisq.mobile.presentation.ui.uicases.ITabContainerPresenter
+import network.bisq.mobile.presentation.ui.uicases.TabContainerPresenter
+import network.bisq.mobile.presentation.ui.uicases.offer.IOffersListPresenter
+import network.bisq.mobile.presentation.ui.uicases.offer.OffersListPresenter
 import network.bisq.mobile.presentation.ui.uicases.settings.IPaymentAccountSettingsPresenter
 import network.bisq.mobile.presentation.ui.uicases.settings.ISettingsPresenter
 import network.bisq.mobile.presentation.ui.uicases.settings.IUserProfileSettingsPresenter
@@ -32,10 +34,10 @@ import network.bisq.mobile.presentation.ui.uicases.trade.take_offer.TakeOfferAmo
 import network.bisq.mobile.presentation.ui.uicases.trade.take_offer.TakeOfferPaymentMethodPresenter
 import network.bisq.mobile.presentation.ui.uicases.trade.take_offer.TakeOfferPresenter
 import network.bisq.mobile.presentation.ui.uicases.trade.take_offer.TakeOfferReviewPresenter
-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 network.bisq.mobile.presentation.ui.uicases.trade.IMyTrades
+import network.bisq.mobile.presentation.ui.uicases.trade.ITradeFlowPresenter
+import network.bisq.mobile.presentation.ui.uicases.trade.MyTradesPresenter
+import network.bisq.mobile.presentation.ui.uicases.trade.TradeFlowPresenter
 import org.koin.dsl.bind
 import org.koin.dsl.module
 
@@ -54,9 +56,8 @@ val presentationModule = module {
         )
     }
 
-//    single { TabContainerPresenter(get()) } bind ITabContainerPresenter::class
-
     single { OnBoardingPresenter(get(), get(), get()) } bind IOnboardingPresenter::class
+    single { TabContainerPresenter(get()) } bind ITabContainerPresenter::class
 
     single<SettingsPresenter> { SettingsPresenter(get(), get()) } bind ISettingsPresenter::class
 
@@ -81,12 +82,13 @@ val presentationModule = module {
 
     single<MarketListPresenter> { MarketListPresenter(get(), get()) }
 
-    single<OffersListPresenter> { OffersListPresenter(get(), get(), get()) }
+    single { OffersListPresenter(get(), get(), get(), get()) } bind IOffersListPresenter::class
 
     single {
         MyTradesPresenter(
             get(),
-            myTradesRepository = get()
+            get(),
+            get(),
         )
     } bind IMyTrades::class
 

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

@@ -0,0 +1,6 @@
+package network.bisq.mobile.presentation.ui.components
+
+import androidx.compose.runtime.Composable
+
+@Composable
+expect fun BackHandler(onBackPressed: () -> Unit)

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

@@ -15,6 +15,7 @@ import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import network.bisq.mobile.presentation.ui.components.atoms.layout.BisqGap
 import network.bisq.mobile.presentation.ui.theme.BisqTheme
+import network.bisq.mobile.presentation.ui.theme.BisqUIConstants
 
 enum class BisqButtonType {
     Default,
@@ -31,10 +32,13 @@ enum class BisqButtonType {
 @Composable
 fun BisqButton(
     text: String? = "Button",
-    onClick: () -> Unit,
+    onClick: (() -> Unit)? = null,
     color: Color = BisqTheme.colors.light1,
     backgroundColor: Color = BisqTheme.colors.primary,
-    padding: PaddingValues = PaddingValues(horizontal = 48.dp, vertical = 4.dp),
+    padding: PaddingValues = PaddingValues(
+        horizontal = BisqUIConstants.ScreenPadding4X,
+        vertical = BisqUIConstants.ScreenPaddingHalf
+    ),
     iconOnly: (@Composable () -> Unit)? = null,
     leftIcon: (@Composable () -> Unit)? = null,
     rightIcon: (@Composable () -> Unit)? = null,
@@ -64,7 +68,7 @@ fun BisqButton(
     val finalContentColor = color
 
     Button(
-        onClick = { onClick() },
+        onClick = { onClick?.invoke() },
         contentPadding = if (iconOnly != null) PaddingValues(horizontal = 0.dp, vertical = 0.dp) else padding,
         colors = ButtonColors(
             containerColor = finalBackgroundColor,

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

@@ -0,0 +1,19 @@
+package network.bisq.mobile.presentation.ui.components.atoms
+
+import androidx.compose.material3.IconButton
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.platform.LocalClipboardManager
+import androidx.compose.ui.text.buildAnnotatedString
+import network.bisq.mobile.presentation.ui.components.atoms.icons.CopyIcon
+
+@Composable
+fun CopyIconButton(value: String) {
+    val clipboardManager = LocalClipboardManager.current
+    IconButton(
+        onClick = {
+            clipboardManager.setText(buildAnnotatedString { append(value) })
+        }
+    ) {
+        CopyIcon()
+    }
+}

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

@@ -13,6 +13,7 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.BasicTextField
 import androidx.compose.foundation.text.KeyboardOptions
+import androidx.compose.material3.IconButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
@@ -26,12 +27,15 @@ import androidx.compose.ui.focus.onFocusChanged
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.SolidColor
+import androidx.compose.ui.platform.LocalClipboardManager
 import androidx.compose.ui.platform.LocalFocusManager
 import androidx.compose.ui.text.TextStyle
+import androidx.compose.ui.text.buildAnnotatedString
 import androidx.compose.ui.text.input.ImeAction
 import androidx.compose.ui.text.style.TextDecoration
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
+import network.bisq.mobile.presentation.ui.components.atoms.icons.CopyIcon
 import network.bisq.mobile.presentation.ui.components.atoms.icons.SearchIcon
 import network.bisq.mobile.presentation.ui.theme.BisqTheme
 
@@ -50,6 +54,7 @@ fun BisqTextField(
     isTextArea: Boolean = false,
     paddingValues: PaddingValues = PaddingValues(all = 12.dp),
     disabled: Boolean = false,
+    showCopy: Boolean = false,
     modifier: Modifier = Modifier,
 ) {
     var isFocused by remember { mutableStateOf(false) }
@@ -134,6 +139,11 @@ fun BisqTextField(
                             innerTextField()
                         }
 
+
+                        if (showCopy) {
+                            CopyIconButton(value)
+                        }
+
                         if (rightSuffix != null) {
                             Box(modifier = Modifier.width(50.dp)) {
                                 rightSuffix()

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

@@ -2,17 +2,23 @@ package network.bisq.mobile.presentation.ui.components.atoms.icons
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Close
+import androidx.compose.material3.Icon
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.unit.dp
+import bisqapps.shared.presentation.generated.resources.*
 import bisqapps.shared.presentation.generated.resources.Res
 import bisqapps.shared.presentation.generated.resources.exchange_h_arrow
 import bisqapps.shared.presentation.generated.resources.exchange_v_arrow
 import bisqapps.shared.presentation.generated.resources.icon_arrow_down
 import bisqapps.shared.presentation.generated.resources.icon_bell
 import bisqapps.shared.presentation.generated.resources.icon_chat_outlined
 import bisqapps.shared.presentation.generated.resources.icon_copy
+import bisqapps.shared.presentation.generated.resources.icon_gallery
 import bisqapps.shared.presentation.generated.resources.icon_info
 import bisqapps.shared.presentation.generated.resources.icon_language_grey
 import bisqapps.shared.presentation.generated.resources.icon_qr
@@ -29,6 +35,21 @@ import org.jetbrains.compose.resources.painterResource
 
 expect fun rememberPlatformImagePainter(platformImage: PlatformImage): Painter
 
+@Composable
+fun CloseIcon(modifier: Modifier = Modifier.size(24.dp)) {
+    Icon(
+        Icons.Filled.Close,
+        "close",
+        modifier = modifier,
+        tint = Color.White
+    )
+}
+
+@Composable
+fun AddIcon(modifier: Modifier = Modifier.size(16.dp)) {
+    Image(painterResource(Res.drawable.icon_add_filled_green), "Add icon", modifier = modifier)
+}
+
 @Composable
 fun ArrowDownIcon(modifier: Modifier = Modifier.size(12.dp)) {
     Image(painterResource(Res.drawable.icon_arrow_down), "Down arrow icon", modifier = modifier)
@@ -50,7 +71,12 @@ fun CopyIcon(modifier: Modifier = Modifier) {
 }
 
 @Composable
-fun LanguageIcon(modifier: Modifier = Modifier.size(12.dp)) {
+fun FlashLightIcon(modifier: Modifier = Modifier.size(24.dp)) {
+    Image(painterResource(Res.drawable.icon_flash_light), "Flash light icon", modifier = modifier)
+}
+
+@Composable
+fun LanguageIcon(modifier: Modifier = Modifier.size(16.dp)) {
     Image(painterResource(Res.drawable.icon_language_grey), "Language icon", modifier = modifier)
 }
 
@@ -59,6 +85,11 @@ fun InfoIcon(modifier: Modifier = Modifier.size(16.dp)) {
     Image(painterResource(Res.drawable.icon_info), "Info icon", modifier = modifier)
 }
 
+@Composable
+fun GalleryIcon(modifier: Modifier = Modifier.size(24.dp)) {
+    Image(painterResource(Res.drawable.icon_gallery), "Gallery icon", modifier = modifier)
+}
+
 @Composable
 fun SwapHArrowIcon(modifier: Modifier = Modifier.size(16.dp)) {
     Image(painterResource(Res.drawable.exchange_h_arrow), "Swap horizontal icon", modifier = modifier)
@@ -119,4 +150,9 @@ fun UserIcon(platformImage: PlatformImage?, modifier: Modifier = Modifier) {
         val painter = rememberPlatformImagePainter(platformImage)
         Image(painter = painter, contentDescription = "User icon", modifier = modifier)
     }
-}
+}
+
+//@Composable
+//fun WarningIcon(modifier: Modifier = Modifier.size(36.dp)) {
+//    Image(painterResource(Res.drawable.icon_warning), "Warning icon", modifier = modifier)
+//}