diff --git a/taker-frontend/src/App.tsx b/taker-frontend/src/App.tsx index 24ce792..8c24547 100644 --- a/taker-frontend/src/App.tsx +++ b/taker-frontend/src/App.tsx @@ -141,10 +141,10 @@ export const App = () => { } spacing={4}> { }; calculateMargin(payload); }} - canSubmit={order != null && !isCreatingNewOrderRequest} onLongSubmit={makeNewOrderRequest} isSubmitting={isCreatingNewOrderRequest} /> diff --git a/taker-frontend/src/components/Trade.tsx b/taker-frontend/src/components/Trade.tsx index d95b08b..5e20454 100644 --- a/taker-frontend/src/components/Trade.tsx +++ b/taker-frontend/src/components/Trade.tsx @@ -1,5 +1,9 @@ import { BoxProps } from "@chakra-ui/layout"; import { + Alert, + AlertDescription, + AlertIcon, + AlertTitle, Box, Button, ButtonGroup, @@ -47,25 +51,38 @@ import { CfdOrderRequestPayload } from "./Types"; const MotionBox = motion(Box); interface TradeProps { - order_id?: string; - min_quantity: number; - max_quantity: number; + orderId?: string; + minQuantity: number; + maxQuantity: number; referencePrice?: number; askPrice?: number; margin?: string; leverage?: number; quantity: string; liquidationPrice?: number; - canSubmit: boolean; isSubmitting: boolean; onQuantityChange: any; + walletBalance?: number; onLongSubmit: (payload: CfdOrderRequestPayload) => void; } +interface AlertBoxProps { + title: string; + description: string; +} + +function AlertBox({ title, description }: AlertBoxProps) { + return ( + + {title} + {description} + ); +} + const Trade = ( { - min_quantity, - max_quantity, + minQuantity, + maxQuantity, referencePrice: referencePriceAsNumber, askPrice: askPriceAsNumber, quantity, @@ -73,9 +90,9 @@ const Trade = ( margin: marginAsNumber, leverage, liquidationPrice: liquidationPriceAsNumber, - canSubmit, onLongSubmit, - order_id, + orderId, + walletBalance, }: TradeProps, ) => { let outerCircleBg = useColorModeValue("gray.100", "gray.700"); @@ -93,7 +110,7 @@ const Trade = ( const quantityAsNumber = quantity.replace("$", ""); let payload: CfdOrderRequestPayload = { - order_id: order_id!, + order_id: orderId!, quantity: Number.parseFloat(quantityAsNumber), }; await onLongSubmit(payload); @@ -101,6 +118,34 @@ const Trade = ( }, }); + const parse = (val: any) => Number.parseInt(val.replace(/^\$/, "")); + + const balanceTooLow = walletBalance && walletBalance < parse(margin); + const quantityTooHigh = maxQuantity < parse(quantity); + const quantityTooLow = minQuantity > parse(quantity); + const quantityGreaterZero = parse(quantity) > 0; + + const canSubmit = orderId && !isSubmitting && !balanceTooLow + && !quantityTooHigh && !quantityTooLow && quantityGreaterZero; + + let alertBox; + + if (balanceTooLow) { + alertBox = ; + } + if (quantityTooHigh) { + alertBox = ; + } + if (quantityTooLow || !quantityGreaterZero) { + alertBox = ; + } + if (!orderId) { + alertBox = ; + } + return (
- + @@ -206,6 +251,7 @@ const Trade = (
+ {alertBox}