feat: allow postOnly orderSubmission in stop orders for spot markets

vegaprotocol · Apr 30, 2024 · a1d0cd8 · a1d0cd8
1 parent 3ac4416
commit a1d0cd8
Show file tree

Hide file tree

Showing 3 changed files with 113 additions and 18 deletions.
diff --git a/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx b/libs/deal-ticket/src/components/deal-ticket/deal-ticket-stop-order.tsx
@@ -26,6 +26,7 @@ import {
   Pill,
   Intent,
   Notification,
+  ExternalLink,
 } from '@vegaprotocol/ui-toolkit';
 import {
   getAsset,
@@ -61,13 +62,22 @@ import { useT } from '../../use-t';
 import { determinePriceStep, determineSizeStep } from '@vegaprotocol/utils';
 import { useOpenVolume } from '@vegaprotocol/positions';
 import { useNetworkParamQuery } from '@vegaprotocol/network-parameters';
+import { DocsLinks } from '@vegaprotocol/environment';
+import { isNonPersistentOrder } from '../../utils/time-in-force-persistence';
 
 export interface StopOrderProps {
   market: Market;
   marketPrice?: string | null;
   submit: (order: StopOrdersSubmission) => void;
 }
 
+const typeLimitOptions = Object.entries(Schema.OrderTimeInForce);
+const typeMarketOptions = typeLimitOptions.filter(
+  ([_, timeInForce]) =>
+    timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_FOK ||
+    timeInForce === Schema.OrderTimeInForce.TIME_IN_FORCE_IOC
+);
+
 const trailingPercentOffsetStep = '0.1';
 
 const getDefaultValues = (
@@ -494,14 +504,27 @@ export const NoOpenVolumeWarning = ({
   );
 };
 
+const TimeInForceOption = ({ value }: { value: Schema.OrderTimeInForce }) => {
+  const t = useT();
+  return <option value={value}>{t(value)}</option>;
+};
+
 const TimeInForce = ({
   control,
   oco,
+  orderType,
+  isSpotMarket,
 }: {
   control: Control<StopOrderFormValues>;
   oco?: boolean;
+  orderType: Schema.OrderType;
+  isSpotMarket: boolean;
 }) => {
   const t = useT();
+  const options =
+    orderType === Schema.OrderType.TYPE_LIMIT && isSpotMarket
+      ? typeLimitOptions
+      : typeMarketOptions;
   return (
     <Controller
       name={oco ? 'ocoTimeInForce' : 'timeInForce'}
@@ -518,18 +541,9 @@ const TimeInForce = ({
                 hasError={!!fieldState.error}
                 {...field}
               >
-                <option
-                  key={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
-                  value={Schema.OrderTimeInForce.TIME_IN_FORCE_IOC}
-                >
-                  {t(Schema.OrderTimeInForce.TIME_IN_FORCE_IOC)}
-                </option>
-                <option
-                  key={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
-                  value={Schema.OrderTimeInForce.TIME_IN_FORCE_FOK}
-                >
-                  {t(Schema.OrderTimeInForce.TIME_IN_FORCE_FOK)}
-                </option>
+                {options.map(([key, value]) => (
+                  <TimeInForceOption key={key} value={value} />
+                ))}
               </Select>
             </FormGroup>
             {fieldState.error && (
@@ -544,14 +558,14 @@ const TimeInForce = ({
   );
 };
 
-const ReduceOnly = ({ checked = true }) => {
+const ReduceOnly = () => {
   const t = useT();
   return (
     <Tooltip description={<span>{t(REDUCE_ONLY_TOOLTIP)}</span>}>
       <div>
         <Checkbox
           name="reduce-only"
-          checked={checked}
+          checked={true}
           disabled={true}
           label={t('Reduce only')}
         />
@@ -560,6 +574,55 @@ const ReduceOnly = ({ checked = true }) => {
   );
 };
 
+const PostOnly = ({
+  control,
+  oco,
+  disabled,
+}: {
+  control: Control<StopOrderFormValues>;
+  oco?: boolean;
+  disabled?: boolean;
+}) => {
+  const t = useT();
+  const name = oco ? 'ocoPostOnly' : 'postOnly';
+  return (
+    <Controller
+      name={name}
+      control={control}
+      render={({ field }) => (
+        <Tooltip
+          description={
+            <>
+              <span>
+                {disabled
+                  ? t(
+                      '"Post only" can not be used on "Fill or Kill" or "Immediate or Cancel" orders.'
+                    )
+                  : t(
+                      '"Post only" will ensure the order is not filled immediately but is placed on the order book as a passive order. When the order is processed it is either stopped (if it would not be filled immediately), or placed in the order book as a passive order until the price taker matches with it.'
+                    )}
+              </span>{' '}
+              <ExternalLink href={DocsLinks?.POST_REDUCE_ONLY}>
+                {t('Find out more')}
+              </ExternalLink>
+            </>
+          }
+        >
+          <div>
+            <Checkbox
+              name={name}
+              checked={!disabled && field.value}
+              disabled={disabled}
+              onCheckedChange={field.onChange}
+              label={t('Post only')}
+            />
+          </div>
+        </Tooltip>
+      )}
+    />
+  );
+};
+
 const NotionalAndFees = ({
   market,
   marketPrice,
@@ -1017,10 +1080,23 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
         triggerType={triggerType}
         type={type}
       />
-      <TimeInForce control={control} />
+      <TimeInForce
+        control={control}
+        orderType={type}
+        isSpotMarket={isSpotMarket}
+      />
 
       <div className="flex justify-end gap-2 pb-3">
-        <ReduceOnly checked={!isSpotMarket} />
+        {isSpotMarket ? (
+          type === Schema.OrderType.TYPE_LIMIT && (
+            <PostOnly
+              control={control}
+              disabled={isNonPersistentOrder(timeInForce)}
+            />
+          )
+        ) : (
+          <ReduceOnly />
+        )}
       </div>
 
       <hr className="border-vega-clight-500 dark:border-vega-cdark-500 mb-4" />
@@ -1119,10 +1195,25 @@ export const StopOrder = ({ market, marketPrice, submit }: StopOrderProps) => {
             triggerType={ocoTriggerType}
             type={ocoType}
           />
-          <TimeInForce control={control} oco />
+          <TimeInForce
+            control={control}
+            oco
+            orderType={ocoType}
+            isSpotMarket={isSpotMarket}
+          />
           {
             <div className="mb-2 flex justify-end gap-2">
-              <ReduceOnly checked={!isSpotMarket} />
+              {isSpotMarket ? (
+                ocoType === Schema.OrderType.TYPE_LIMIT && (
+                  <PostOnly
+                    control={control}
+                    oco
+                    disabled={isNonPersistentOrder(ocoTimeInForce)}
+                  />
+                )
+              ) : (
+                <ReduceOnly />
+              )}
             </div>
           }
         </>

diff --git a/libs/deal-ticket/src/utils/map-form-values-to-submission.ts b/libs/deal-ticket/src/utils/map-form-values-to-submission.ts
@@ -101,6 +101,7 @@ export const mapFormValuesToStopOrdersSubmission = (
         timeInForce: data.timeInForce,
         price: data.price,
         reduceOnly: !isSpotMarket,
+        postOnly: isSpotMarket ? !!data.postOnly : false,
       },
       marketId,
       decimalPlaces,
@@ -126,6 +127,7 @@ export const mapFormValuesToStopOrdersSubmission = (
           timeInForce: data.ocoTimeInForce,
           price: data.ocoPrice,
           reduceOnly: !isSpotMarket,
+          postOnly: isSpotMarket ? !!data.ocoPostOnly : false,
         },
         marketId,
         decimalPlaces,

diff --git a/libs/react-helpers/src/hooks/use-form-values.ts b/libs/react-helpers/src/hooks/use-form-values.ts
@@ -24,6 +24,7 @@ export interface StopOrderFormValues {
   size: string;
   timeInForce: OrderTimeInForce;
   price?: string;
+  postOnly?: boolean;
 
   expire: boolean;
   expiryStrategy?: Schema.StopOrderExpiryStrategy;
@@ -39,6 +40,7 @@ export interface StopOrderFormValues {
   ocoSize: string;
   ocoTimeInForce: OrderTimeInForce;
   ocoPrice?: string;
+  ocoPostOnly?: boolean;
 }
 
 export type OrderFormValues = {