Add warnings if input quantity is not valid

taker-frontend/src/App.tsx

@@ -130,14 +130,6 @@ export const App = () => {
     const format = (val: any) => `$` + val;
     const parse = (val: any) => val.replace(/^\$/, "");
 
-    const balanceTooLow = walletInfo && walletInfo.balance < parse(margin);
-    const quantityTooHigh = order && order.max_quantity < parse(effectiveQuantity);
-    const quantityTooLow = order && order.min_quantity > parse(effectiveQuantity);
-    const quantityGreaterZero = parse(effectiveQuantity) > 0;
-
-    const canSubmit = order != null && !isCreatingNewOrderRequest && walletInfo != null && !balanceTooLow
-        && !quantityTooHigh && !quantityTooLow && quantityGreaterZero;
-
     return (
         <>
             <Nav walletInfo={walletInfo} />
@@ -172,7 +164,6 @@ export const App = () => {
                                     };
                                     calculateMargin(payload);
                                 }}
-                                canSubmit={canSubmit}
                                 onLongSubmit={makeNewOrderRequest}
                                 isSubmitting={isCreatingNewOrderRequest}
                             />

taker-frontend/src/components/Trade.tsx

@@ -1,5 +1,9 @@
 import { BoxProps } from "@chakra-ui/layout";
 import {
+    Alert,
+    AlertDescription,
+    AlertIcon,
+    AlertTitle,
     Box,
     Button,
     ButtonGroup,
@@ -56,12 +60,25 @@ interface TradeProps {
     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 (<Alert status="error">
+        <AlertIcon />
+        <AlertTitle mr={2}>{title}</AlertTitle>
+        <AlertDescription>{description}</AlertDescription>
+    </Alert>);
+}
+
 const Trade = (
     {
         minQuantity,
@@ -73,9 +90,9 @@ const Trade = (
         margin: marginAsNumber,
         leverage,
         liquidationPrice: liquidationPriceAsNumber,
-        canSubmit,
         onLongSubmit,
         orderId,
+        walletBalance,
     }: TradeProps,
 ) => {
     let outerCircleBg = useColorModeValue("gray.100", "gray.700");
@@ -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 = <AlertBox title={"Your balance is too low!"} description={"Pleas deposit more into you wallet."} />;
+    }
+    if (quantityTooHigh) {
+        alertBox = <AlertBox title={"Quantity too high!"} description={`Max available liquidity is ${maxQuantity}`} />;
+    }
+    if (quantityTooLow || !quantityGreaterZero) {
+        alertBox = <AlertBox title={"Quantity too low!"} description={`Min quantity is ${minQuantity}`} />;
+    }
+    if (!orderId) {
+        alertBox = <AlertBox
+            title={"No liquidity!"}
+            description={"The maker you are connected has not create any offers"}
+        />;
+    }
+
     return (
         <Center>
             <Grid
@@ -206,6 +251,7 @@ const Trade = (
                             </Modal>
                         </ButtonGroup>
                     </Center>
+                    {alertBox}
                 </GridItem>
             </Grid>
         </Center>