Limit quantity to increments of 100

Bitmex only allows buy/sell orders in increments of 100 USD. In order to
simplify the hedging calculation for the maker we keep quantity the same
as Bitmex.

taker-frontend/src/components/Trade.test.tsx

@@ -0,0 +1,9 @@
+import { isEvenlyDivisible } from "./Trade";
+
+it("1200 is evenly divisible by 100.0", () => {
+    expect(isEvenlyDivisible(1200, 100.0)).toBe(true);
+});
+
+it("233.3 is not evenly divisible by 100.0", () => {
+    expect(isEvenlyDivisible(233.3, 100.0)).toBe(false);
+});

taker-frontend/src/components/Trade.tsx

@@ -112,9 +112,11 @@ export default function Trade({
     const quantityTooHigh = maxQuantity < parse(quantity);
     const quantityTooLow = minQuantity > parse(quantity);
     const quantityGreaterZero = parse(quantity) > 0;
+    const quantityIncrement = 100;
+    const quantityIsEvenlyDivisibleByIncrement = isEvenlyDivisible(parse(quantity), quantityIncrement);
 
     const canSubmit = orderId && !isLongSubmitting && !balanceTooLow
-        && !quantityTooHigh && !quantityTooLow && quantityGreaterZero;
+        && !quantityTooHigh && !quantityTooLow && quantityGreaterZero && quantityIsEvenlyDivisibleByIncrement;
 
     let alertBox;
 
@@ -130,6 +132,12 @@ export default function Trade({
                 description={"Please deposit more into you wallet."}
             />;
         }
+        if (!quantityIsEvenlyDivisibleByIncrement) {
+            alertBox = <AlertBox
+                title={`Quantity is not in increments of ${quantityIncrement}!`}
+                description={`Increment is ${quantityIncrement}`}
+            />;
+        }
         if (quantityTooHigh) {
             alertBox = <AlertBox
                 title={"Quantity too high!"}
@@ -184,7 +192,13 @@ export default function Trade({
                     </Center>
                 </GridItem>
                 <GridItem colSpan={1}>
-                    <Quantity min={minQuantity} max={maxQuantity} quantity={quantity} onChange={onQuantityChange} />
+                    <Quantity
+                        min={minQuantity}
+                        max={maxQuantity}
+                        quantity={quantity}
+                        onChange={onQuantityChange}
+                        quantityIncrement={quantityIncrement}
+                    />
                 </GridItem>
                 <GridItem colSpan={1}>
                     <Leverage leverage={leverage} />
@@ -276,10 +290,11 @@ interface QuantityProps {
     min: number;
     max: number;
     quantity: string;
+    quantityIncrement: number;
     onChange: any;
 }
 
-function Quantity({ min, max, onChange, quantity }: QuantityProps) {
+function Quantity({ min, max, onChange, quantity, quantityIncrement }: QuantityProps) {
     return (
         <FormControl id="quantity">
             <FormLabel>Quantity</FormLabel>
@@ -289,6 +304,7 @@ function Quantity({ min, max, onChange, quantity }: QuantityProps) {
                     min={min}
                     max={max}
                     default={min}
+                    step={quantityIncrement}
                     onChange={onChange}
                     value={quantity}
                 >
@@ -345,3 +361,7 @@ function Margin({ margin }: MarginProps) {
         </VStack>
     );
 }
+
+export function isEvenlyDivisible(numerator: number, divisor: number): boolean {
+    return (numerator % divisor === 0.0);
+}