fix: correct limit order

compolabs · Feb 20, 2024 · 94293ce · 94293ce
1 parent 6dc76f8
commit 94293ce
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 20 deletions.
diff --git a/spark-frontend/src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpot.tsx b/spark-frontend/src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpot.tsx
@@ -1,4 +1,4 @@
-import React, { ComponentProps, useEffect, useState } from "react";
+import React, { ComponentProps, useEffect } from "react";
 import styled from "@emotion/styled";
 import { Accordion } from "@szhsin/react-accordion";
 import { observer } from "mobx-react";
@@ -14,21 +14,16 @@ import TokenInput from "@components/TokenInput";
 import { ReactComponent as InfoIcon } from "@src/assets/icons/info.svg";
 import Button, { ButtonGroup } from "@src/components/Button";
 import { useMedia } from "@src/hooks/useMedia";
-import { ORDER_MODE, useCreateOrderSpotVM } from "@src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpotVM";
+import {
+  ORDER_MODE,
+  ORDER_TYPE,
+  useCreateOrderSpotVM,
+} from "@src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpotVM";
 import BN from "@src/utils/BN";
 import { useStores } from "@stores";
 
 interface IProps extends ComponentProps<any> {}
 
-enum ORDER_TYPE {
-  Market,
-  Limit,
-  StopMarket,
-  StopLimit,
-  TakeProfit,
-  TakeProfitLimit,
-}
-
 const ORDER_OPTIONS = [
   { title: "Market", key: ORDER_TYPE.Market },
   { title: "Limit", key: ORDER_TYPE.Limit },
@@ -47,10 +42,8 @@ const CreateOrderSpot: React.FC<IProps> = observer(({ ...rest }) => {
 
   const isButtonDisabled = vm.loading || !vm.canProceed;
 
-  const [orderType, setOrderType] = useState(ORDER_OPTIONS[0].key);
-
   useEffect(() => {
-    if (orderType === ORDER_TYPE.Market) {
+    if (vm.orderType === ORDER_TYPE.Market) {
       vm.setInputPrice(market?.price ?? BN.ZERO);
     }
   });
@@ -73,13 +66,17 @@ const CreateOrderSpot: React.FC<IProps> = observer(({ ...rest }) => {
     vm.setInputTotal(value, true);
   };
 
+  const handleSetOrderType = (type: ORDER_TYPE) => {
+    vm.setOrderType(type);
+  };
+
   const handleSetPrice = (amount: BN) => {
-    if (orderType === ORDER_TYPE.Market) return;
+    if (vm.orderType === ORDER_TYPE.Market) return;
 
-    vm.setInputPrice(amount);
+    vm.setInputPrice(amount, true);
   };
 
-  const isInputPriceDisabled = orderType !== ORDER_TYPE.Limit;
+  const isInputPriceDisabled = vm.orderType !== ORDER_TYPE.Limit;
 
   return (
     <Root {...rest}>
@@ -97,8 +94,8 @@ const CreateOrderSpot: React.FC<IProps> = observer(({ ...rest }) => {
           <Select
             label="Order type"
             options={ORDER_OPTIONS}
-            selected={orderType}
-            onSelect={(option) => setOrderType(option.key)}
+            selected={vm.orderType}
+            onSelect={({ key }) => handleSetOrderType(key)}
           />
           <SizedBox height={2} />
           <Row alignItems="center">

diff --git a/spark-frontend/src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpotVM.tsx b/spark-frontend/src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpotVM.tsx
@@ -27,11 +27,22 @@ export enum ORDER_MODE {
   SELL,
 }
 
+export enum ORDER_TYPE {
+  Market,
+  Limit,
+  StopMarket,
+  StopLimit,
+  TakeProfit,
+  TakeProfitLimit,
+}
+
 class CreateOrderSpotVM {
   loading = false;
 
   mode: ORDER_MODE = ORDER_MODE.BUY;
 
+  orderType: ORDER_TYPE = ORDER_TYPE.Market;
+
   inputPrice: BN = BN.ZERO;
   inputAmount: BN = BN.ZERO;
   inputPercent: BN = BN.ZERO;
@@ -45,7 +56,11 @@ class CreateOrderSpotVM {
 
     reaction(
       () => tradeStore.market?.price,
-      (price) => this.setInputPrice(price ?? BN.ZERO),
+      (price) => {
+        if (this.orderType === ORDER_TYPE.Market) {
+          this.setInputPrice(price ?? BN.ZERO);
+        }
+      },
     );
   }
 
@@ -193,5 +208,7 @@ class CreateOrderSpotVM {
     this.setLoading(false);
   };
 
+  setOrderType = (type: ORDER_TYPE) => (this.orderType = type);
+
   private setLoading = (l: boolean) => (this.loading = l);
 }