MOB-442 Support error states for TP/SL inputs

v4/feature/market/src/main/java/exchange/dydx/trading/feature/market/marketinfo/components/position/DydxMarketPositionButtonsView.kt

@@ -37,7 +37,7 @@ import exchange.dydx.trading.common.component.DydxComponent
 import exchange.dydx.trading.common.compose.collectAsStateWithLifecycle
 import exchange.dydx.trading.common.theme.DydxThemedPreviewSurface
 import exchange.dydx.trading.common.theme.MockLocalizer
-import exchange.dydx.trading.feature.shared.scarfolds.InputFieldScarfold
+import exchange.dydx.trading.feature.shared.scaffolds.InputFieldScaffold
 import exchange.dydx.utilities.utils.toDp
 
 @Preview
@@ -195,7 +195,7 @@ object DydxMarketPositionButtonsView : DydxComponent {
         localizer: LocalizerProtocol,
         action: () -> Unit = {}
     ) {
-        InputFieldScarfold(
+        InputFieldScaffold(
             modifier = modifier,
         ) {
             Column(

v4/feature/receipt/src/main/java/exchange/dydx/trading/feature/receipt/validation/DydxValidationView.kt

@@ -34,6 +34,7 @@ import exchange.dydx.platformui.designSystem.theme.themeColor
 import exchange.dydx.platformui.designSystem.theme.themeFont
 import exchange.dydx.trading.common.component.DydxComponent
 import exchange.dydx.trading.common.compose.collectAsStateWithLifecycle
+import exchange.dydx.trading.common.navigation.DydxAnimation
 import exchange.dydx.trading.common.theme.DydxThemedPreviewSurface
 import exchange.dydx.trading.common.theme.MockLocalizer
 import exchange.dydx.utilities.utils.toDp
@@ -66,13 +67,15 @@ object DydxValidationView : DydxComponent {
     data class ViewState(
         val localizer: LocalizerProtocol,
         val state: State = State.None,
+        val title: String? = null,
         val message: String? = null,
         val link: Link? = null,
     ) {
         companion object {
             val preview = ViewState(
                 localizer = MockLocalizer(),
                 state = State.Warning,
+                title = "This is a warning",
                 message = "This is an error message",
                 link = Link.preview,
             )
@@ -93,12 +96,13 @@ object DydxValidationView : DydxComponent {
             return
         }
 
-        when (state.state) {
-            State.Error, State.Warning -> {
-                ContentInBox(modifier, state)
-            }
-            State.None -> {
-            }
+        DydxAnimation.AnimateExpandInOut(
+            visible = when (state.state) {
+                State.Error, State.Warning -> true
+                State.None -> false
+            },
+        ) {
+            ContentInBox(modifier, state)
         }
     }
 
@@ -141,6 +145,15 @@ object DydxValidationView : DydxComponent {
                     .padding(horizontal = 16.dp, vertical = 8.dp),
                 verticalArrangement = Arrangement.spacedBy(8.dp),
             ) {
+                if (viewState.title != null) {
+                    Text(
+                        modifier = Modifier,
+                        text = viewState.title,
+                        style = TextStyle.dydxDefault
+                            .themeColor(ThemeColor.SemanticColor.text_primary)
+                            .themeFont(fontSize = ThemeFont.FontSize.small),
+                    )
+                }
                 if (viewState.message != null) {
                     Text(
                         modifier = Modifier,

v4/feature/receipt/src/main/java/exchange/dydx/trading/feature/receipt/validation/DydxValidationViewModel.kt

@@ -46,6 +46,12 @@ class DydxValidationViewModel @Inject constructor(
                 transferError?.isNotEmpty() == true -> DydxValidationView.State.Error
                 else -> DydxValidationView.State.None
             },
+            title = when {
+                firstBlockingError != null -> firstBlockingError.resources.title?.localizedString(localizer)
+                firstWarning != null -> firstWarning.resources.title?.localizedString(localizer)
+                transferError?.isNotEmpty() == true -> null
+                else -> null
+            },
             message = when {
                 firstBlockingError != null -> firstBlockingError.resources.text?.localizedString(localizer)
                 firstWarning != null -> firstWarning.resources.text?.localizedString(localizer)

v4/feature/shared/src/main/java/exchange/dydx/trading/feature/shared/scarfolds/InputFieldScarfold.kt → v4/feature/shared/src/main/java/exchange/dydx/trading/feature/shared/scaffolds/InputFieldScaffold.kt

@@ -1,29 +1,32 @@
-package exchange.dydx.trading.feature.shared.scarfolds
+package exchange.dydx.trading.feature.shared.scaffolds
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.border
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.unit.dp
+import exchange.dydx.platformui.components.inputs.PlatformInputAlertState
 import exchange.dydx.platformui.designSystem.theme.ThemeColor
 import exchange.dydx.platformui.designSystem.theme.color
 
 @Composable
-fun InputFieldScarfold(
+fun InputFieldScaffold(
     modifier: Modifier = Modifier,
+    alertState: PlatformInputAlertState = PlatformInputAlertState.None,
     content: @Composable () -> Unit,
 ) {
     val shape = RoundedCornerShape(8.dp)
     Box(
         modifier = modifier
-            .background(color = ThemeColor.SemanticColor.layer_4.color, shape = shape)
-            .clip(shape)
+            .background(
+                color = ThemeColor.SemanticColor.layer_4.color,
+                shape = shape,
+            )
             .border(
                 width = 1.dp,
-                color = ThemeColor.SemanticColor.layer_6.color,
+                color = alertState.borderColor.color,
                 shape = shape,
             ),
     ) {

v4/feature/shared/src/main/java/exchange/dydx/trading/feature/shared/views/LabeledTextInput.kt

@@ -14,6 +14,7 @@ import androidx.compose.ui.text.input.KeyboardType
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import exchange.dydx.abacus.protocols.LocalizerProtocol
+import exchange.dydx.platformui.components.inputs.PlatformInputAlertState
 import exchange.dydx.platformui.components.inputs.PlatformTextInput
 import exchange.dydx.platformui.designSystem.theme.ThemeColor
 import exchange.dydx.platformui.designSystem.theme.ThemeFont
@@ -40,6 +41,7 @@ object LabeledTextInput {
         val value: String? = null,
         val placeholder: String? = null,
         val onValueChanged: (String) -> Unit = {},
+        val alertState: PlatformInputAlertState = PlatformInputAlertState.None,
     ) {
         companion object {
             val preview = ViewState(
@@ -90,6 +92,7 @@ object LabeledTextInput {
                 }
             },
             value = state.value,
+            alertState = state.alertState,
             placeHolder = state.placeholder,
             onValueChange = state.onValueChanged,
             keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Number),

v4/feature/trade/build.gradle

@@ -110,4 +110,6 @@ dependencies {
     androidTestImplementation "androidx.compose.ui:ui-test-junit4:$composeVersion"
 
     implementation("tz.co.asoft:kollections-interoperable:$kollectionsVersion")
+
+    implementation("io.github.hoc081098:FlowExt:$flowExtVersion")
 }

v4/feature/trade/src/main/java/exchange/dydx/trading/feature/trade/ModelExt.kt

@@ -0,0 +1,12 @@
+package exchange.dydx.trading.feature.trade
+
+import exchange.dydx.abacus.output.input.ErrorType
+import exchange.dydx.abacus.output.input.ValidationError
+import exchange.dydx.platformui.components.inputs.PlatformInputAlertState
+
+val ValidationError.alertState: PlatformInputAlertState
+    get() = when (type) {
+        ErrorType.error -> PlatformInputAlertState.Error
+        ErrorType.warning -> PlatformInputAlertState.Warning
+        else -> PlatformInputAlertState.None
+    }

v4/feature/trade/src/main/java/exchange/dydx/trading/feature/trade/closeposition/components/DydxClosePositionInputSizeView.kt

@@ -2,7 +2,6 @@ package exchange.dydx.trading.feature.trade.closeposition.components
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -13,7 +12,7 @@ import exchange.dydx.trading.common.component.DydxComponent
 import exchange.dydx.trading.common.compose.collectAsStateWithLifecycle
 import exchange.dydx.trading.common.theme.DydxThemedPreviewSurface
 import exchange.dydx.trading.common.theme.MockLocalizer
-import exchange.dydx.trading.feature.shared.scarfolds.InputFieldScarfold
+import exchange.dydx.trading.feature.shared.scaffolds.InputFieldScaffold
 import exchange.dydx.trading.feature.shared.views.LabeledTextInput
 
 @Preview
@@ -59,7 +58,7 @@ object DydxClosePositionInputSizeView : DydxComponent {
             return
         }
 
-        InputFieldScarfold(modifier) {
+        InputFieldScaffold(modifier) {
             Column {
                 Row(
                     verticalAlignment = Alignment.CenterVertically,
@@ -68,7 +67,7 @@ object DydxClosePositionInputSizeView : DydxComponent {
                         modifier = Modifier.weight(1f),
                         state = LabeledTextInput.ViewState(
                             localizer = state.localizer,
-                            label = state?.localizer?.localize("APP.GENERAL.AMOUNT"),
+                            label = state.localizer?.localize("APP.GENERAL.AMOUNT"),
                             token = state.token,
                             value = state.size,
                             placeholder = state.placeholder ?: "",

v4/feature/trade/src/main/java/exchange/dydx/trading/feature/trade/tradeinput/components/inputfields/execution/DydxTradeInputExecutionView.kt

@@ -9,7 +9,7 @@ import exchange.dydx.trading.common.component.DydxComponent
 import exchange.dydx.trading.common.compose.collectAsStateWithLifecycle
 import exchange.dydx.trading.common.theme.DydxThemedPreviewSurface
 import exchange.dydx.trading.common.theme.MockLocalizer
-import exchange.dydx.trading.feature.shared.scarfolds.InputFieldScarfold
+import exchange.dydx.trading.feature.shared.scaffolds.InputFieldScaffold
 import exchange.dydx.trading.feature.shared.views.LabeledSelectionInput
 
 @Preview
@@ -47,7 +47,7 @@ object DydxTradeInputExecutionView : DydxComponent {
             return
         }
 
-        InputFieldScarfold(modifier) {
+        InputFieldScaffold(modifier) {
             LabeledSelectionInput.Content(
                 modifier = Modifier,
                 state = state.labeledSelectionInput,

v4/feature/trade/src/main/java/exchange/dydx/trading/feature/trade/tradeinput/components/inputfields/goodtil/DydxTradeInputGoodTilView.kt

@@ -27,7 +27,7 @@ import exchange.dydx.trading.common.component.DydxComponent
 import exchange.dydx.trading.common.compose.collectAsStateWithLifecycle
 import exchange.dydx.trading.common.theme.DydxThemedPreviewSurface
 import exchange.dydx.trading.common.theme.MockLocalizer
-import exchange.dydx.trading.feature.shared.scarfolds.InputFieldScarfold
+import exchange.dydx.trading.feature.shared.scaffolds.InputFieldScaffold
 import exchange.dydx.trading.feature.shared.views.LabeledSelectionInput
 import exchange.dydx.trading.feature.shared.views.LabeledTextInput
 
@@ -72,7 +72,7 @@ object DydxTradeInputGoodTilView : DydxComponent {
             mutableStateOf(false)
         }
 
-        InputFieldScarfold(modifier) {
+        InputFieldScaffold(modifier) {
             Row(
                 verticalAlignment = Alignment.CenterVertically,
 

v4/feature/trade/src/main/java/exchange/dydx/trading/feature/trade/tradeinput/components/inputfields/leverage/DydxTradeInputLeverageView.kt

@@ -38,7 +38,7 @@ import exchange.dydx.trading.common.compose.collectAsStateWithLifecycle
 import exchange.dydx.trading.common.formatter.DydxFormatter
 import exchange.dydx.trading.common.theme.DydxThemedPreviewSurface
 import exchange.dydx.trading.common.theme.MockLocalizer
-import exchange.dydx.trading.feature.shared.scarfolds.InputFieldScarfold
+import exchange.dydx.trading.feature.shared.scaffolds.InputFieldScaffold
 import exchange.dydx.trading.feature.shared.views.GradientSlider
 import exchange.dydx.trading.feature.shared.views.SideTextView
 import exchange.dydx.utilities.utils.rounded
@@ -94,7 +94,7 @@ object DydxTradeInputLeverageView : DydxComponent {
             return
         }
 
-        InputFieldScarfold(modifier) {
+        InputFieldScaffold(modifier) {
             Column(
                 modifier = modifier
                     .padding(ThemeShapes.InputPaddingValues)

v4/feature/trade/src/main/java/exchange/dydx/trading/feature/trade/tradeinput/components/inputfields/limitprice/DydxTradeInputLimitPriceView.kt

@@ -9,7 +9,7 @@ import exchange.dydx.trading.common.component.DydxComponent
 import exchange.dydx.trading.common.compose.collectAsStateWithLifecycle
 import exchange.dydx.trading.common.theme.DydxThemedPreviewSurface
 import exchange.dydx.trading.common.theme.MockLocalizer
-import exchange.dydx.trading.feature.shared.scarfolds.InputFieldScarfold
+import exchange.dydx.trading.feature.shared.scaffolds.InputFieldScaffold
 import exchange.dydx.trading.feature.shared.views.LabeledTextInput
 
 @Preview
@@ -50,7 +50,7 @@ object DydxTradeInputLimitPriceView : DydxComponent {
             return
         }
 
-        InputFieldScarfold(modifier) {
+        InputFieldScaffold(modifier) {
             LabeledTextInput.Content(
                 modifier = Modifier,
                 state = state.labeledTextInput,

v4/feature/trade/src/main/java/exchange/dydx/trading/feature/trade/tradeinput/components/inputfields/size/DydxTradeInputSizeView.kt

@@ -32,7 +32,7 @@ import exchange.dydx.trading.common.compose.collectAsStateWithLifecycle
 import exchange.dydx.trading.common.theme.DydxThemedPreviewSurface
 import exchange.dydx.trading.common.theme.MockLocalizer
 import exchange.dydx.trading.feature.shared.R
-import exchange.dydx.trading.feature.shared.scarfolds.InputFieldScarfold
+import exchange.dydx.trading.feature.shared.scaffolds.InputFieldScaffold
 import exchange.dydx.trading.feature.shared.views.LabeledTextInput
 import exchange.dydx.trading.feature.shared.views.TokenTextView
 
@@ -83,7 +83,7 @@ object DydxTradeInputSizeView : DydxComponent {
         val showingUsdc = remember { mutableStateOf(state.showingUsdc) }
         val focusManager = LocalFocusManager.current
 
-        InputFieldScarfold(modifier) {
+        InputFieldScaffold(modifier) {
             Column {
                 Row(
                     verticalAlignment = Alignment.CenterVertically,

v4/feature/trade/src/main/java/exchange/dydx/trading/feature/trade/tradeinput/components/inputfields/timeinforce/DydxTradeInputTimeInForceView.kt

@@ -9,7 +9,7 @@ import exchange.dydx.trading.common.component.DydxComponent
 import exchange.dydx.trading.common.compose.collectAsStateWithLifecycle
 import exchange.dydx.trading.common.theme.DydxThemedPreviewSurface
 import exchange.dydx.trading.common.theme.MockLocalizer
-import exchange.dydx.trading.feature.shared.scarfolds.InputFieldScarfold
+import exchange.dydx.trading.feature.shared.scaffolds.InputFieldScaffold
 import exchange.dydx.trading.feature.shared.views.LabeledSelectionInput
 
 @Preview
@@ -50,7 +50,7 @@ object DydxTradeInputTimeInForceView : DydxComponent {
             return
         }
 
-        InputFieldScarfold(modifier) {
+        InputFieldScaffold(modifier) {
             LabeledSelectionInput.Content(
                 modifier = Modifier,
                 state = state.labeledSelectionInput,

v4/feature/trade/src/main/java/exchange/dydx/trading/feature/trade/tradeinput/components/inputfields/triggerprice/DydxTradeInputTriggerPriceView.kt

@@ -9,7 +9,7 @@ import exchange.dydx.trading.common.component.DydxComponent
 import exchange.dydx.trading.common.compose.collectAsStateWithLifecycle
 import exchange.dydx.trading.common.theme.DydxThemedPreviewSurface
 import exchange.dydx.trading.common.theme.MockLocalizer
-import exchange.dydx.trading.feature.shared.scarfolds.InputFieldScarfold
+import exchange.dydx.trading.feature.shared.scaffolds.InputFieldScaffold
 import exchange.dydx.trading.feature.shared.views.LabeledTextInput
 
 @Preview
@@ -50,7 +50,7 @@ object DydxTradeInputTriggerPriceView : DydxComponent {
             return
         }
 
-        InputFieldScarfold(modifier) {
+        InputFieldScaffold(modifier) {
             LabeledTextInput.Content(
                 modifier = Modifier,
                 state = state.labeledTextInput,