fix: fix price inputs on sltp for <1

src/constants/triggers.ts

@@ -0,0 +1,20 @@
+import { TriggerOrdersInputField } from '@/constants/abacus';
+
+export enum TriggerFields {
+  Limit = 'Limit',
+  All = 'All',
+}
+
+export const CLEARED_TRIGGER_LIMIT_INPUTS = {
+  [TriggerOrdersInputField.stopLossLimitPrice.rawValue]: '',
+  [TriggerOrdersInputField.takeProfitLimitPrice.rawValue]: '',
+};
+
+export const CLEARED_TRIGGER_ORDER_INPUTS = {
+  [TriggerOrdersInputField.stopLossPrice.rawValue]: '',
+  [TriggerOrdersInputField.stopLossPercentDiff.rawValue]: '',
+  [TriggerOrdersInputField.stopLossUsdcDiff.rawValue]: '',
+  [TriggerOrdersInputField.takeProfitPrice.rawValue]: '',
+  [TriggerOrdersInputField.takeProfitPercentDiff.rawValue]: '',
+  [TriggerOrdersInputField.takeProfitUsdcDiff.rawValue]: '',
+};

src/hooks/useTriggerOrdersFormInputs.ts

@@ -1,10 +1,11 @@
 import { useEffect, useState } from 'react';
 
-import { shallowEqual } from 'react-redux';
+import { shallowEqual, useDispatch } from 'react-redux';
 
 import { AbacusOrderType, SubaccountOrder, TriggerOrdersInputField } from '@/constants/abacus';
 
 import { useAppSelector } from '@/state/appTypes';
+import { setTriggerFormInputs } from '@/state/inputs';
 import { getTriggerOrdersInputErrors } from '@/state/inputsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
@@ -23,6 +24,7 @@ export const useTriggerOrdersFormInputs = ({
   stopLossOrder?: SubaccountOrder;
   takeProfitOrder?: SubaccountOrder;
 }) => {
+  const dispatch = useDispatch();
   const inputErrors = useAppSelector(getTriggerOrdersInputErrors, shallowEqual);
 
   const [differingOrderSizes, setDifferingOrderSizes] = useState(false);
@@ -44,26 +46,40 @@ export const useTriggerOrdersFormInputs = ({
         {
           field: TriggerOrdersInputField.stopLossOrderId,
           value: stopLossOrder.id,
+          hasFormInput: false,
         },
         {
           field: TriggerOrdersInputField.stopLossOrderSize,
           value: stopLossOrder.size,
+          hasFormInput: false,
+        },
+        {
+          field: TriggerOrdersInputField.stopLossOrderType,
+          value: stopLossOrder.type.rawValue,
+          hasFormInput: false,
         },
         {
           field: TriggerOrdersInputField.stopLossPrice,
-          value: MustBigNumber(stopLossOrder.triggerPrice).toString(),
+          value: stopLossOrder.triggerPrice,
+          hasFormInput: true,
         },
         isLimitOrderType(stopLossOrder.type) && {
           field: TriggerOrdersInputField.stopLossLimitPrice,
-          value: MustBigNumber(stopLossOrder.price).toString(),
-        },
-        {
-          field: TriggerOrdersInputField.stopLossOrderType,
-          value: stopLossOrder.type.rawValue,
+          value: stopLossOrder.price,
+          hasFormInput: true,
         },
       ]
         .filter(isTruthy)
-        .map(({ field, value }) => abacusStateManager.setTriggerOrdersValue({ field, value }));
+        .forEach(({ field, value, hasFormInput }) => {
+          abacusStateManager.setTriggerOrdersValue({ field, value });
+          if (hasFormInput) {
+            dispatch(
+              setTriggerFormInputs({
+                [field.rawValue]: value?.toString(),
+              })
+            );
+          }
+        });
     } else {
       abacusStateManager.setTriggerOrdersValue({
         field: TriggerOrdersInputField.stopLossOrderType,
@@ -72,30 +88,45 @@ export const useTriggerOrdersFormInputs = ({
     }
 
     if (takeProfitOrder) {
+      // Initialize trigger order data on mount
       [
         {
           field: TriggerOrdersInputField.takeProfitOrderId,
           value: takeProfitOrder.id,
+          hasFormInput: false,
         },
         {
           field: TriggerOrdersInputField.takeProfitOrderSize,
           value: takeProfitOrder.size,
+          hasFormInput: false,
+        },
+        {
+          field: TriggerOrdersInputField.takeProfitOrderType,
+          value: takeProfitOrder.type.rawValue,
+          hasFormInput: false,
         },
         {
           field: TriggerOrdersInputField.takeProfitPrice,
-          value: MustBigNumber(takeProfitOrder.triggerPrice).toString(),
+          value: takeProfitOrder.triggerPrice,
+          hasFormInput: true,
         },
         isLimitOrderType(takeProfitOrder.type) && {
           field: TriggerOrdersInputField.takeProfitLimitPrice,
-          value: MustBigNumber(takeProfitOrder.price).toString(),
-        },
-        {
-          field: TriggerOrdersInputField.takeProfitOrderType,
-          value: takeProfitOrder.type.rawValue,
+          value: takeProfitOrder.price,
+          hasFormInput: true,
         },
       ]
         .filter(isTruthy)
-        .map(({ field, value }) => abacusStateManager.setTriggerOrdersValue({ field, value }));
+        .forEach(({ field, value, hasFormInput }) => {
+          abacusStateManager.setTriggerOrdersValue({ field, value });
+          if (hasFormInput) {
+            dispatch(
+              setTriggerFormInputs({
+                [field.rawValue]: value?.toString(),
+              })
+            );
+          }
+        });
     } else {
       abacusStateManager.setTriggerOrdersValue({
         field: TriggerOrdersInputField.takeProfitOrderType,

src/lib/abacus/index.ts

@@ -42,9 +42,14 @@ import { Hdkey } from '@/constants/account';
 import { DEFAULT_MARKETID } from '@/constants/markets';
 import { CURRENT_ABACUS_DEPLOYMENT, type DydxNetwork } from '@/constants/networks';
 import { CLEARED_SIZE_INPUTS, CLEARED_TRADE_INPUTS } from '@/constants/trade';
+import {
+  CLEARED_TRIGGER_LIMIT_INPUTS,
+  CLEARED_TRIGGER_ORDER_INPUTS,
+  TriggerFields,
+} from '@/constants/triggers';
 
 import { type RootStore } from '@/state/_store';
-import { setTradeFormInputs } from '@/state/inputs';
+import { setTradeFormInputs, setTriggerFormInputs } from '@/state/inputs';
 import { getInputTradeOptions, getTransferInputs } from '@/state/inputsSelectors';
 
 import { LocaleSeparators } from '../numbers';
@@ -197,28 +202,46 @@ class AbacusStateManager {
     this.setTransferValue({ value: null, field: TransferInputField.MEMO });
   };
 
-  clearTriggerOrdersInputValues = () => {
-    this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.size });
-
-    this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.stopLossOrderId });
-    this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.stopLossPrice });
-    this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.stopLossLimitPrice });
-    this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.stopLossPercentDiff });
-    this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.stopLossUsdcDiff });
-    this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.stopLossOrderType });
+  clearTriggerOrdersInputValues = ({ field }: { field: TriggerFields }) => {
+    if (field === TriggerFields.Limit || field === TriggerFields.All) {
+      this.setTriggerOrdersValue({
+        value: null,
+        field: TriggerOrdersInputField.stopLossLimitPrice,
+      });
+      this.setTriggerOrdersValue({
+        value: null,
+        field: TriggerOrdersInputField.takeProfitLimitPrice,
+      });
+      this.store?.dispatch(setTriggerFormInputs(CLEARED_TRIGGER_LIMIT_INPUTS));
+    }
 
-    this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.takeProfitOrderId });
-    this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.takeProfitPrice });
-    this.setTriggerOrdersValue({
-      value: null,
-      field: TriggerOrdersInputField.takeProfitLimitPrice,
-    });
-    this.setTriggerOrdersValue({
-      value: null,
-      field: TriggerOrdersInputField.takeProfitPercentDiff,
-    });
-    this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.takeProfitUsdcDiff });
-    this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.takeProfitOrderType });
+    if (field === TriggerFields.All) {
+      this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.size });
+      this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.stopLossPrice });
+      this.setTriggerOrdersValue({
+        value: null,
+        field: TriggerOrdersInputField.stopLossPercentDiff,
+      });
+      this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.stopLossUsdcDiff });
+      this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.takeProfitPrice });
+      this.setTriggerOrdersValue({
+        value: null,
+        field: TriggerOrdersInputField.takeProfitPercentDiff,
+      });
+      this.setTriggerOrdersValue({
+        value: null,
+        field: TriggerOrdersInputField.takeProfitUsdcDiff,
+      });
+      this.store?.dispatch(setTriggerFormInputs(CLEARED_TRIGGER_ORDER_INPUTS));
+
+      this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.stopLossOrderId });
+      this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.stopLossOrderType });
+      this.setTriggerOrdersValue({ value: null, field: TriggerOrdersInputField.takeProfitOrderId });
+      this.setTriggerOrdersValue({
+        value: null,
+        field: TriggerOrdersInputField.takeProfitOrderType,
+      });
+    }
   };
 
   clearAdjustIsolatedMarginInputValues = () => {
@@ -238,7 +261,7 @@ class AbacusStateManager {
       field: TransferInputField.type,
       value: null,
     });
-    this.clearTriggerOrdersInputValues();
+    this.clearTriggerOrdersInputValues({ field: TriggerFields.All });
     this.clearAdjustIsolatedMarginInputValues();
     this.clearTradeInputValues({ shouldResetSize: true });
   };

src/state/inputs.ts

@@ -1,21 +1,23 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
 import assign from 'lodash/assign';
 
-import type {
-  AdjustIsolatedMarginInputs,
-  ClosePositionInputs,
-  InputError,
-  Inputs,
-  Nullable,
-  TradeInputs,
-  TransferInputs,
-  TriggerOrdersInputs,
+import {
+  type AdjustIsolatedMarginInputs,
+  type ClosePositionInputs,
+  type InputError,
+  type Inputs,
+  type Nullable,
+  type TradeInputs,
+  type TransferInputs,
+  type TriggerOrdersInputs,
 } from '@/constants/abacus';
 import { CLEARED_SIZE_INPUTS, CLEARED_TRADE_INPUTS } from '@/constants/trade';
+import { CLEARED_TRIGGER_LIMIT_INPUTS, CLEARED_TRIGGER_ORDER_INPUTS } from '@/constants/triggers';
 
 import { safeAssign } from '@/lib/objectHelpers';
 
 type TradeFormInputs = typeof CLEARED_TRADE_INPUTS & typeof CLEARED_SIZE_INPUTS;
+type TriggerFormInputs = typeof CLEARED_TRIGGER_ORDER_INPUTS & typeof CLEARED_TRIGGER_LIMIT_INPUTS;
 
 export interface InputsState {
   current?: Nullable<string>;
@@ -24,6 +26,7 @@ export interface InputsState {
   tradeInputs?: Nullable<TradeInputs>;
   adjustIsolatedMarginInputs?: Nullable<AdjustIsolatedMarginInputs>;
   closePositionInputs?: Nullable<ClosePositionInputs>;
+  triggerFormInputs: TriggerFormInputs;
   triggerOrdersInputs?: Nullable<TriggerOrdersInputs>;
   transferInputs?: Nullable<TransferInputs>;
 }
@@ -37,6 +40,11 @@ const initialState: InputsState = {
   },
   tradeInputs: undefined,
   transferInputs: undefined,
+  triggerFormInputs: {
+    ...CLEARED_TRIGGER_ORDER_INPUTS,
+    ...CLEARED_TRIGGER_LIMIT_INPUTS,
+  },
+  triggerOrdersInputs: undefined,
 };
 
 export const inputsSlice = createSlice({
@@ -71,7 +79,10 @@ export const inputsSlice = createSlice({
     setTradeFormInputs: (state, action: PayloadAction<Partial<TradeFormInputs>>) => {
       state.tradeFormInputs = assign({}, state.tradeFormInputs, action.payload);
     },
+    setTriggerFormInputs: (state, action: PayloadAction<Partial<TriggerFormInputs>>) => {
+      state.triggerFormInputs = assign({}, state.triggerFormInputs, action.payload);
+    },
   },
 });
 
-export const { setInputs, setTradeFormInputs } = inputsSlice.actions;
+export const { setInputs, setTradeFormInputs, setTriggerFormInputs } = inputsSlice.actions;

src/state/inputsSelectors.ts

@@ -99,6 +99,12 @@ export const getTriggerOrdersInputErrors = (state: RootState) => {
  */
 export const getTriggerOrdersInputs = (state: RootState) => state.inputs.triggerOrdersInputs;
 
+/**
+ * @param state
+ * @returns Trigger Form Input states for display. Abacus inputs should track these values.
+ */
+export const getTriggerFormInputs = (state: RootState) => state.inputs.triggerFormInputs;
+
 /**
  * @returns AdjustIsolatedMarginInputs
  */