Demo auto cancel

src/components/Synthetics/ConfirmationBox/ConfirmationBox.tsx

@@ -38,10 +38,10 @@ import { createWrapOrUnwrapTxn } from "domain/synthetics/orders/createWrapOrUnwr
 import { formatLeverage, formatLiquidationPrice, getTriggerNameByOrderType } from "domain/synthetics/positions";
 import {
   convertToTokenAmount,
+  convertToUsd,
   formatTokensRatio,
   getNeedTokenApprove,
   useTokensAllowanceData,
-  convertToUsd,
 } from "domain/synthetics/tokens";
 import { TriggerThresholdType, applySlippageToMinOut, applySlippageToPrice } from "domain/synthetics/trade";
 import { getIsEquivalentTokens, getSpread } from "domain/tokens";
@@ -55,13 +55,14 @@ import { useSettings } from "context/SettingsContext/SettingsContextProvider";
 import { useSubaccount, useSubaccountCancelOrdersDetailsMessage } from "context/SubaccountContext/SubaccountContext";
 import { useTokensData } from "context/SyntheticsStateContext/hooks/globalsHooks";
 import {
-  useSidecarOrders,
-  SidecarOrderEntryGroup,
-  SidecarSlTpOrderEntryValid,
-  SidecarLimitOrderEntryValid,
   SidecarLimitOrderEntry,
+  SidecarLimitOrderEntryValid,
+  SidecarOrderEntryGroup,
   SidecarSlTpOrderEntry,
+  SidecarSlTpOrderEntryValid,
+  useSidecarOrders,
 } from "domain/synthetics/sidecarOrders/useSidecarOrders";
+import { PERCENTAGE_DECEMALS } from "domain/synthetics/sidecarOrders/utils";
 import { useHighExecutionFeeConsent } from "domain/synthetics/trade/useHighExecutionFeeConsent";
 import { usePriceImpactWarningState } from "domain/synthetics/trade/usePriceImpactWarningState";
 import { helperToast } from "lib/helperToast";
@@ -86,19 +87,20 @@ import { AcceptablePriceImpactInputRow } from "../AcceptablePriceImpactInputRow/
 import { HighPriceImpactWarning } from "../HighPriceImpactWarning/HighPriceImpactWarning";
 import { NetworkFeeRow } from "../NetworkFeeRow/NetworkFeeRow";
 import { TradeFeesRow } from "../TradeFeesRow/TradeFeesRow";
+import { useTradeboxPoolWarnings } from "../TradeboxPoolWarnings/TradeboxPoolWarnings";
 import { SideOrderEntries } from "./SideOrderEntries";
-import { PERCENTAGE_DECEMALS } from "domain/synthetics/sidecarOrders/utils";
 import { AllowedSlippageRow } from "./rows/AllowedSlippageRow";
-import { useTradeboxPoolWarnings } from "../TradeboxPoolWarnings/TradeboxPoolWarnings";
 
 import { selectGasLimits, selectGasPrice } from "context/SyntheticsStateContext/selectors/globalSelectors";
 import { makeSelectOrdersByPositionKey } from "context/SyntheticsStateContext/selectors/orderSelectors";
 import {
+  selectTradeboxAutoCancel,
   selectTradeboxAvailableMarketsOptions,
   selectTradeboxCollateralToken,
   selectTradeboxDecreasePositionAmounts,
   selectTradeboxDefaultTriggerAcceptablePriceImpactBps,
   selectTradeboxExecutionFee,
+  selectTradeboxExecutionPrice,
   selectTradeboxFees,
   selectTradeboxFixedTriggerOrderType,
   selectTradeboxFixedTriggerThresholdType,
@@ -109,8 +111,10 @@ import {
   selectTradeboxLiquidity,
   selectTradeboxMarkPrice,
   selectTradeboxMarketInfo,
+  selectTradeboxMaxLiquidityPath,
   selectTradeboxNextPositionValues,
   selectTradeboxSelectedPosition,
+  selectTradeboxSelectedPositionKey,
   selectTradeboxSelectedTriggerAcceptablePriceImpactBps,
   selectTradeboxSetKeepLeverage,
   selectTradeboxSetSelectedAcceptablePriceImpactBps,
@@ -119,16 +123,14 @@ import {
   selectTradeboxTradeFlags,
   selectTradeboxTradeRatios,
   selectTradeboxTriggerPrice,
-  selectTradeboxSelectedPositionKey,
-  selectTradeboxMaxLiquidityPath,
-  selectTradeboxExecutionPrice,
 } from "context/SyntheticsStateContext/selectors/tradeboxSelectors";
 import { useSelector } from "context/SyntheticsStateContext/utils";
-import "./ConfirmationBox.scss";
-import { bigMath } from "lib/bigmath";
 import { estimateOrderOraclePriceCount } from "domain/synthetics/fees/utils/estimateOraclePriceCount";
+import { bigMath } from "lib/bigmath";
 import { ExecutionPriceRow } from "../ExecutionPriceRow";
 
+import "./ConfirmationBox.scss";
+
 export type Props = {
   isVisible: boolean;
   error: string | undefined;
@@ -169,6 +171,7 @@ export function ConfirmationBox(p: Props) {
   const fixedTriggerThresholdType = useSelector(selectTradeboxFixedTriggerThresholdType);
   const fixedTriggerOrderType = useSelector(selectTradeboxFixedTriggerOrderType);
   const { longLiquidity, shortLiquidity } = useSelector(selectTradeboxLiquidity);
+  const { autoCancel, setAutoCancel } = useSelector(selectTradeboxAutoCancel);
 
   const { element: highExecutionFeeAcknowledgement, isHighFeeConsentError } = useHighExecutionFeeConsent(
     executionFee?.feeUsd
@@ -620,6 +623,7 @@ export function ConfirmationBox(p: Props) {
       receiveTokenAddress: collateralToken.address,
       isLong,
       indexToken: marketInfo.indexToken,
+      autoCancel: false,
     };
 
     return createIncreaseOrderTxn({
@@ -649,6 +653,7 @@ export function ConfirmationBox(p: Props) {
         setPendingTxns: p.setPendingTxns,
         setPendingOrder,
         setPendingPosition,
+        autoCancel: isLimit ? autoCancel : false,
       },
       createDecreaseOrderParams: createSltpEntries.map((entry) => {
         return {
@@ -737,6 +742,7 @@ export function ConfirmationBox(p: Props) {
         skipSimulation: true,
         indexToken: marketInfo.indexToken,
         tokensData,
+        autoCancel,
       },
       {
         setPendingTxns,
@@ -1251,6 +1257,11 @@ export function ConfirmationBox(p: Props) {
             />
           )}
           {isLimit && increaseAmounts && renderAcceptablePriceImpactInput()}
+          {(isLimit || isTrigger) && (
+            <ToggleSwitch isChecked={autoCancel} setIsChecked={setAutoCancel} textClassName="text-14 text-gray-300">
+              <Trans>Auto Cancel</Trans>
+            </ToggleSwitch>
+          )}
         </ExchangeInfo.Group>
 
         <ExchangeInfo.Group>
@@ -1542,6 +1553,13 @@ export function ConfirmationBox(p: Props) {
         {decreaseAmounts && decreaseAmounts.triggerOrderType !== OrderType.StopLossDecrease && (
           <ExchangeInfo.Group>{renderAcceptablePriceImpactInput()}</ExchangeInfo.Group>
         )}
+        {(isLimit || isTrigger) && (
+          <ExchangeInfo.Group>
+            <ToggleSwitch isChecked={autoCancel} setIsChecked={setAutoCancel} textClassName="text-14 text-gray-300">
+              <Trans>Auto Cancel</Trans>
+            </ToggleSwitch>
+          </ExchangeInfo.Group>
+        )}
 
         <ExchangeInfo.Group>
           <ExchangeInfoRow

src/components/Synthetics/OrderEditor/OrderEditor.tsx

@@ -54,6 +54,7 @@ import Modal from "components/Modal/Modal";
 import { AcceptablePriceImpactInputRow } from "components/Synthetics/AcceptablePriceImpactInputRow/AcceptablePriceImpactInputRow";
 
 import ExternalLink from "components/ExternalLink/ExternalLink";
+import ToggleSwitch from "components/ToggleSwitch/ToggleSwitch";
 import { useMarketInfo } from "context/SyntheticsStateContext/hooks/marketHooks";
 import {
   useOrderEditorSizeInputValueState,
@@ -63,9 +64,11 @@ import {
 import {
   selectOrderEditorAcceptablePrice,
   selectOrderEditorAcceptablePriceImpactBps,
+  selectOrderEditorAutoCancel,
   selectOrderEditorDecreaseAmounts,
   selectOrderEditorExecutionFee,
   selectOrderEditorExistingPosition,
+  selectOrderEditorFindSwapPath,
   selectOrderEditorFromToken,
   selectOrderEditorIncreaseAmounts,
   selectOrderEditorInitialAcceptablePriceImpactBps,
@@ -78,19 +81,18 @@ import {
   selectOrderEditorPriceImpactFeeBps,
   selectOrderEditorSetAcceptablePriceImpactBps,
   selectOrderEditorSizeDeltaUsd,
-  selectOrderEditorFindSwapPath,
   selectOrderEditorToToken,
   selectOrderEditorTradeFlags,
   selectOrderEditorTriggerPrice,
   selectOrderEditorTriggerRatio,
 } from "context/SyntheticsStateContext/selectors/orderEditorSelectors";
 import { useSelector } from "context/SyntheticsStateContext/utils";
 import { getIsMaxLeverageExceeded } from "domain/synthetics/trade/utils/validation";
+import { bigMath } from "lib/bigmath";
 import { numericBinarySearch } from "lib/binarySearch";
 import { helperToast } from "lib/helperToast";
 import { useKey } from "react-use";
 import "./OrderEditor.scss";
-import { bigMath } from "lib/bigmath";
 
 type Props = {
   order: OrderInfo;
@@ -118,6 +120,7 @@ export function OrderEditor(p: Props) {
   const isRatioInverted = useSelector(selectOrderEditorIsRatioInverted);
   const triggerRatio = useSelector(selectOrderEditorTriggerRatio);
   const minOutputAmount = useSelector(selectOrderEditorMinOutputAmount);
+  const { autoCancel, setAutoCancel } = useSelector(selectOrderEditorAutoCancel);
 
   const market = useMarketInfo(p.order.marketAddress);
   const indexToken = getTokenData(tokensData, market?.indexTokenAddress);
@@ -222,7 +225,8 @@ export function OrderEditor(p: Props) {
     if (
       sizeDeltaUsd === positionOrder.sizeDeltaUsd &&
       triggerPrice === positionOrder.triggerPrice! &&
-      acceptablePrice === positionOrder.acceptablePrice
+      acceptablePrice === positionOrder.acceptablePrice &&
+      autoCancel === positionOrder.autoCancel
     ) {
       return t`Enter new amount or price`;
     }
@@ -247,7 +251,8 @@ export function OrderEditor(p: Props) {
       if (
         sizeDeltaUsd === (p.order.sizeDeltaUsd ?? 0n) &&
         triggerPrice === (positionOrder.triggerPrice ?? 0n) &&
-        acceptablePrice === positionOrder.acceptablePrice
+        acceptablePrice === positionOrder.acceptablePrice &&
+        autoCancel === positionOrder.autoCancel
       ) {
         return t`Enter a new size or price`;
       }
@@ -439,6 +444,7 @@ export function OrderEditor(p: Props) {
       executionFee: additionalExecutionFee?.feeTokenAmount,
       indexToken: indexToken,
       setPendingTxns: p.setPendingTxns,
+      autoCancel,
     });
 
     if (subaccount) {
@@ -484,6 +490,7 @@ export function OrderEditor(p: Props) {
         setTriggerPriceInputValue(
           formatAmount(positionOrder.triggerPrice ?? 0n, USD_DECIMALS, indexPriceDecimals || 2)
         );
+        setAutoCancel(positionOrder.autoCancel);
       }
 
       setIsInited(true);
@@ -493,6 +500,7 @@ export function OrderEditor(p: Props) {
       indexPriceDecimals,
       isInited,
       p.order,
+      setAutoCancel,
       setSizeInputValue,
       setTriggerPriceInputValue,
       setTriggerRatioInputValue,
@@ -617,6 +625,15 @@ export function OrderEditor(p: Props) {
                   </>
                 )}
 
+                <ToggleSwitch
+                  isChecked={autoCancel}
+                  setIsChecked={setAutoCancel}
+                  className="!mb-5"
+                  textClassName="text-14 text-gray-300"
+                >
+                  <Trans>Auto Cancel</Trans>
+                </ToggleSwitch>
+
                 <ExchangeInfoRow
                   label={t`Acceptable Price`}
                   value={formatAcceptablePrice(acceptablePrice, { displayDecimals: indexPriceDecimals })}

src/components/Synthetics/PositionEditor/PositionEditor.tsx

@@ -459,6 +459,7 @@ export function PositionEditor(p: Props) {
           indexToken: position.indexToken,
           tokensData,
           skipSimulation: shouldDisableValidationForTesting,
+          autoCancel: false,
           setPendingTxns,
           setPendingOrder,
           setPendingPosition,
@@ -496,6 +497,7 @@ export function PositionEditor(p: Props) {
           indexToken: position.indexToken,
           tokensData,
           skipSimulation: shouldDisableValidationForTesting,
+          autoCancel: false,
         },
         {
           setPendingTxns,

src/components/Synthetics/PositionSeller/PositionSeller.tsx

@@ -344,6 +344,8 @@ export function PositionSeller(p: Props) {
         indexToken: position.indexToken,
         tokensData,
         skipSimulation: orderOption === OrderOption.Trigger || shouldDisableValidationForTesting,
+        // TODO: in reality this could be true for limit+trigger orders, but we have not yet made a button in position seller for that
+        autoCancel: false,
       },
       {
         setPendingOrder,

src/components/Synthetics/SettleAccruedFundingFeeModal/SettleAccruedFundingFeeModal.tsx

@@ -143,6 +143,7 @@ export function SettleAccruedFundingFeeModal({ allowedSlippage, isVisible, onClo
           indexToken: position.indexToken,
           tokensData,
           skipSimulation: true,
+          autoCancel: false,
         };
       }),
       {

src/components/Synthetics/TradeBox/TradeBox.tsx

@@ -221,7 +221,8 @@ export function TradeBox(p: Props) {
     fromTokenAddress,
     marketInfo,
     toTokenAddress,
-    avaialbleTradeModes: availalbleTradeModes,
+    availableTradeModes,
+    setAutoCancel,
   } = useSelector(selectTradeboxState);
 
   const fromToken = getByKey(tokensData, fromTokenAddress);
@@ -732,8 +733,10 @@ export function TradeBox(p: Props) {
     setDefaultTriggerAcceptablePriceImpactBps(undefined);
     setFixedTriggerOrderType(undefined);
     setFixedTriggerThresholdType(undefined);
+    setAutoCancel(false);
     setStage("trade");
   }, [
+    setAutoCancel,
     setDefaultTriggerAcceptablePriceImpactBps,
     setFixedTriggerOrderType,
     setFixedTriggerThresholdType,
@@ -1358,7 +1361,7 @@ export function TradeBox(p: Props) {
           />
 
           <Tab
-            options={availalbleTradeModes}
+            options={availableTradeModes}
             optionLabels={localizedTradeModeLabels}
             className="SwapBox-asset-options-tabs"
             type="inline"

src/context/SyntheticsStateContext/selectors/orderEditorSelectors.ts

@@ -485,3 +485,10 @@ export const selectOrderEditorMaxAllowedLeverage = createSelector((q) => {
   const minCollateralFactor = q((s) => selectMarketsInfoData(s)?.[order.marketAddress]?.minCollateralFactor);
   return getMaxAllowedLeverageByMinCollateralFactor(minCollateralFactor);
 });
+
+export const selectOrderEditorAutoCancel = createSelector((q) => {
+  return {
+    autoCancel: q((state) => state.orderEditor.autoCancel),
+    setAutoCancel: q((state) => state.orderEditor.setAutoCancel),
+  };
+});

src/context/SyntheticsStateContext/selectors/tradeboxSelectors/index.ts

@@ -72,7 +72,7 @@ export const selectTradeboxMarketInfo = (s: SyntheticsState) => s.tradebox.marke
 export const selectTradeboxCollateralTokenAddress = (s: SyntheticsState) =>
   selectOnlyOnTradeboxPage(s, s.tradebox.collateralAddress);
 export const selectTradeboxCollateralToken = (s: SyntheticsState) => s.tradebox.collateralToken;
-export const selectTradeboxAvailableTradeModes = (s: SyntheticsState) => s.tradebox.avaialbleTradeModes;
+export const selectTradeboxAvailableTradeModes = (s: SyntheticsState) => s.tradebox.availableTradeModes;
 export const selectTradeboxAvailableTokensOptions = (s: SyntheticsState) => s.tradebox.availableTokensOptions;
 export const selectTradeboxFromTokenInputValue = (s: SyntheticsState) => s.tradebox.fromTokenInputValue;
 export const selectTradeboxToTokenInputValue = (s: SyntheticsState) => s.tradebox.toTokenInputValue;
@@ -815,3 +815,10 @@ export const selectTradeboxMarketsSortMap = createSelector((q) => {
     return acc;
   }, {});
 });
+
+export const selectTradeboxAutoCancel = createSelector((q) => {
+  return {
+    autoCancel: q((state) => state.tradebox.autoCancel),
+    setAutoCancel: q((state) => state.tradebox.setAutoCancel),
+  };
+});

src/domain/synthetics/orders/createDecreaseOrderTxn.ts

@@ -39,6 +39,7 @@ export type DecreaseOrderParams = {
   referralCode?: string;
   indexToken: Token;
   tokensData: TokensData;
+  autoCancel: boolean;
 };
 
 export type DecreaseOrderCallbacks = {
@@ -204,7 +205,7 @@ export function createDecreaseEncodedPayload({
         decreasePositionSwapType: p.decreasePositionSwapType,
         isLong: p.isLong,
         shouldUnwrapNativeToken: isNativeReceive,
-        autoCancel: false,
+        autoCancel: p.autoCancel,
         referralCode: p.referralCode || ethers.ZeroHash,
       };
 

src/domain/synthetics/orders/createIncreaseOrderTxn.ts

@@ -41,6 +41,7 @@ type IncreaseOrderParams = {
   referralCode: string | undefined;
   indexToken: TokenData;
   tokensData: TokensData;
+  autoCancel: boolean;
   setPendingTxns: (txns: any) => void;
   setPendingOrder: SetPendingOrder;
   setPendingPosition: SetPendingPosition;
@@ -191,6 +192,7 @@ export async function createIncreaseOrderTxn({
             acceptablePrice,
             triggerPrice,
             minOutputAmount,
+            autoCancel: false,
           }),
         ];
       },
@@ -328,7 +330,7 @@ function createOrderParams({
     decreasePositionSwapType: DecreasePositionSwapType.NoSwap,
     isLong: p.isLong,
     shouldUnwrapNativeToken: isNativePayment,
-    autoCancel: false,
+    autoCancel: p.autoCancel,
     referralCode: p.referralCode || ethers.ZeroHash,
   };
 }