From 1471d0fa21cfd44a9a787a92b2c0798c10e714f6 Mon Sep 17 00:00:00 2001
From: bonomat <philipp@hoenisch.at>
Date: Thu, 18 Nov 2021 15:05:39 +1100
Subject: [PATCH 1/3] Disable to go-long button if

- balance < required margin
- entered quantity > max_quantity or < min_quantity
- entered quantity <= 0
---
 taker-frontend/src/App.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/taker-frontend/src/App.tsx b/taker-frontend/src/App.tsx
index 24ce792..fe643ad 100644
--- a/taker-frontend/src/App.tsx
+++ b/taker-frontend/src/App.tsx
@@ -130,6 +130,14 @@ 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} />
@@ -164,7 +172,7 @@ export const App = () => {
                                     };
                                     calculateMargin(payload);
                                 }}
-                                canSubmit={order != null && !isCreatingNewOrderRequest}
+                                canSubmit={canSubmit}
                                 onLongSubmit={makeNewOrderRequest}
                                 isSubmitting={isCreatingNewOrderRequest}
                             />

From ed14856da325157aa72b315585885881e642897e Mon Sep 17 00:00:00 2001
From: bonomat <philipp@hoenisch.at>
Date: Fri, 19 Nov 2021 14:21:23 +1100
Subject: [PATCH 2/3] Rename some vars

---
 taker-frontend/src/App.tsx              |  6 +++---
 taker-frontend/src/components/Trade.tsx | 16 ++++++++--------
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/taker-frontend/src/App.tsx b/taker-frontend/src/App.tsx
index fe643ad..3ec3bfb 100644
--- a/taker-frontend/src/App.tsx
+++ b/taker-frontend/src/App.tsx
@@ -149,10 +149,10 @@ export const App = () => {
                     <Route path="/">
                         <VStack divider={<StackDivider borderColor="gray.500" />} spacing={4}>
                             <Trade
-                                order_id={order?.id}
+                                orderId={order?.id}
                                 quantity={format(effectiveQuantity)}
-                                max_quantity={max_quantity || 0}
-                                min_quantity={min_quantity || 0}
+                                maxQuantity={max_quantity || 0}
+                                minQuantity={min_quantity || 0}
                                 referencePrice={referencePrice}
                                 askPrice={askPrice}
                                 margin={margin}
diff --git a/taker-frontend/src/components/Trade.tsx b/taker-frontend/src/components/Trade.tsx
index d95b08b..87ce77d 100644
--- a/taker-frontend/src/components/Trade.tsx
+++ b/taker-frontend/src/components/Trade.tsx
@@ -47,9 +47,9 @@ import { CfdOrderRequestPayload } from "./Types";
 const MotionBox = motion<BoxProps>(Box);
 
 interface TradeProps {
-    order_id?: string;
-    min_quantity: number;
-    max_quantity: number;
+    orderId?: string;
+    minQuantity: number;
+    maxQuantity: number;
     referencePrice?: number;
     askPrice?: number;
     margin?: string;
@@ -64,8 +64,8 @@ interface TradeProps {
 
 const Trade = (
     {
-        min_quantity,
-        max_quantity,
+        minQuantity,
+        maxQuantity,
         referencePrice: referencePriceAsNumber,
         askPrice: askPriceAsNumber,
         quantity,
@@ -75,7 +75,7 @@ const Trade = (
         liquidationPrice: liquidationPriceAsNumber,
         canSubmit,
         onLongSubmit,
-        order_id,
+        orderId,
     }: TradeProps,
 ) => {
     let outerCircleBg = useColorModeValue("gray.100", "gray.700");
@@ -93,7 +93,7 @@ const Trade = (
             const quantityAsNumber = quantity.replace("$", "");
 
             let payload: CfdOrderRequestPayload = {
-                order_id: order_id!,
+                order_id: orderId!,
                 quantity: Number.parseFloat(quantityAsNumber),
             };
             await onLongSubmit(payload);
@@ -138,7 +138,7 @@ const Trade = (
                     </Center>
                 </GridItem>
                 <GridItem colSpan={1}>
-                    <Quantity min={min_quantity} max={max_quantity} quantity={quantity} onChange={onQuantityChange} />
+                    <Quantity min={minQuantity} max={maxQuantity} quantity={quantity} onChange={onQuantityChange} />
                 </GridItem>
                 <GridItem colSpan={1}>
                     <Leverage leverage={leverage} />

From e2d174f2621b2623320c51476ee083ee5612af20 Mon Sep 17 00:00:00 2001
From: bonomat <philipp@hoenisch.at>
Date: Mon, 22 Nov 2021 09:59:44 +1100
Subject: [PATCH 3/3] Add warnings if input quantity is not valid

---
 taker-frontend/src/App.tsx              |  9 -----
 taker-frontend/src/components/Trade.tsx | 50 ++++++++++++++++++++++++-
 2 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/taker-frontend/src/App.tsx b/taker-frontend/src/App.tsx
index 3ec3bfb..8c24547 100644
--- a/taker-frontend/src/App.tsx
+++ b/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}
                             />
diff --git a/taker-frontend/src/components/Trade.tsx b/taker-frontend/src/components/Trade.tsx
index 87ce77d..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,
@@ -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>