diff --git a/spark-frontend/src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpot.tsx b/spark-frontend/src/screens/TradeScreen/LeftBlock/CreateOrderSpot/CreateOrderSpot.tsx index 5653d1b0..adfba6c5 100644 --- 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 {} -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 = 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 = 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 ( @@ -97,8 +94,8 @@ const CreateOrderSpot: React.FC = observer(({ ...rest }) => {