Merge #716

716: Improve margin calc and quantity input r=da-kami a=thomaseizinger

Quantity input change now looks like this:

![image](https://user-images.githubusercontent.com/5486389/143510846-77af9b9f-761d-4e29-9e3e-df4e90fdd741.png)

Fixes #688.

Co-authored-by: Thomas Eizinger <thomas@eizinger.io>

taker-frontend/src/App.tsx

@@ -11,7 +11,7 @@ import {
     VStack,
 } from "@chakra-ui/react";
 import * as React from "react";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 import { Route, Routes } from "react-router-dom";
 import { useEventSource } from "react-sse-hooks";
 import useWebSocket from "react-use-websocket";
@@ -33,6 +33,7 @@ import {
     StateGroupKey,
     WalletInfo,
 } from "./types";
+import useDebouncedEffect from "./useDebouncedEffect";
 import useLatestEvent from "./useLatestEvent";
 import usePostRequest from "./usePostRequest";
 
@@ -66,7 +67,7 @@ export const App = () => {
     const connectedToMaker = connectedToMakerOrUndefined ? connectedToMakerOrUndefined! : false;
 
     let [quantity, setQuantity] = useState("0");
-    let [margin, setMargin] = useState("0");
+    let [margin, setMargin] = useState(0);
     let [userHasEdited, setUserHasEdited] = useState(false);
 
     const { price: askPrice, min_quantity, max_quantity, leverage, liquidation_price: liquidationPrice } = order || {};
@@ -76,12 +77,13 @@ export const App = () => {
     let [calculateMargin] = usePostRequest<MarginRequestPayload, MarginResponse>(
         "/api/calculate/margin",
         (response) => {
-            setMargin(response.margin.toString());
+            setMargin(response.margin);
         },
     );
     let [makeNewOrderRequest, isCreatingNewOrderRequest] = usePostRequest<CfdOrderRequestPayload>("/api/cfd/order");
 
-    useEffect(() => {
+    useDebouncedEffect(
+        () => {
             if (!order) {
                 return;
             }
@@ -91,15 +93,12 @@ export const App = () => {
                 price: order.price,
                 quantity,
             };
-        calculateMargin(payload);
-    }, // Eslint demands us to include `calculateMargin` in the list of dependencies.
-     // We don't want that as we will end up in an endless loop. It is safe to ignore `calculateMargin` because
-    // nothing in `calculateMargin` depends on outside values, i.e. is guaranteed to be stable.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [margin, effectiveQuantity, order]);
 
-    const format = (val: any) => `$` + val;
-    const parse = (val: any) => val.replace(/^\$/, "");
+            calculateMargin(payload);
+        },
+        [margin, effectiveQuantity, order],
+        500,
+    );
 
     return (
         <>
@@ -117,7 +116,7 @@ export const App = () => {
                                 <Trade
                                     connectedToMaker={connectedToMaker}
                                     orderId={order?.id}
-                                    quantity={format(effectiveQuantity)}
+                                    quantity={effectiveQuantity}
                                     maxQuantity={max_quantity || 0}
                                     minQuantity={min_quantity || 0}
                                     referencePrice={referencePrice}
@@ -127,17 +126,7 @@ export const App = () => {
                                     liquidationPrice={liquidationPrice}
                                     onQuantityChange={(valueString: string) => {
                                         setUserHasEdited(true);
-                                        setQuantity(parse(valueString));
-                                        if (!order) {
-                                            return;
-                                        }
-                                        let quantity = valueString ? Number.parseFloat(valueString) : 0;
-                                        let payload: MarginRequestPayload = {
-                                            leverage: order.leverage,
-                                            price: order.price,
-                                            quantity,
-                                        };
-                                        calculateMargin(payload);
+                                        setQuantity(valueString);
                                     }}
                                     onLongSubmit={makeNewOrderRequest}
                                     isLongSubmitting={isCreatingNewOrderRequest}

taker-frontend/src/components/Trade.tsx

@@ -15,6 +15,8 @@ import {
     Grid,
     GridItem,
     HStack,
+    InputGroup,
+    InputLeftAddon,
     Modal,
     ModalBody,
     ModalCloseButton,
@@ -56,7 +58,7 @@ interface TradeProps {
     maxQuantity: number;
     referencePrice?: number;
     askPrice?: number;
-    margin?: string;
+    margin: number;
     leverage?: number;
     quantity: string;
     liquidationPrice?: number;
@@ -79,8 +81,7 @@ function AlertBox({ title, description }: AlertBoxProps) {
     </Alert>);
 }
 
-const Trade = (
-    {
+export default function Trade({
     connectedToMaker,
     minQuantity,
     maxQuantity,
@@ -88,28 +89,26 @@ const Trade = (
     askPrice: askPriceAsNumber,
     quantity,
     onQuantityChange,
-        margin: marginAsNumber,
+    margin,
     leverage,
     liquidationPrice: liquidationPriceAsNumber,
     onLongSubmit,
     isLongSubmitting,
     orderId,
     walletBalance,
-    }: TradeProps,
-) => {
+}: TradeProps) {
     let outerCircleBg = useColorModeValue("gray.100", "gray.700");
     let innerCircleBg = useColorModeValue("gray.200", "gray.600");
 
     const referencePrice = `$${referencePriceAsNumber?.toLocaleString() || "0.0"}`;
     const askPrice = `$${askPriceAsNumber?.toLocaleString() || "0.0"}`;
     const liquidationPrice = `$${liquidationPriceAsNumber?.toLocaleString() || "0.0"}`;
-    const margin = `₿${marginAsNumber?.toLocaleString() || "0.0"}`;
 
     const { isOpen, onOpen, onClose } = useDisclosure();
 
     const parse = (val: any) => Number.parseInt(val.replace(/^\$/, ""));
 
-    const balanceTooLow = walletBalance && walletBalance < parse(margin);
+    const balanceTooLow = walletBalance && walletBalance < margin;
     const quantityTooHigh = maxQuantity < parse(quantity);
     const quantityTooLow = minQuantity > parse(quantity);
     const quantityGreaterZero = parse(quantity) > 0;
@@ -223,12 +222,12 @@ const Trade = (
                                     <ModalBody>
                                         <Table variant="striped" colorScheme="gray" size="sm">
                                             <TableCaption>
-                                                By submitting, {margin} will be locked on-chain in a contract.
+                                                By submitting, ₿{margin} will be locked on-chain in a contract.
                                             </TableCaption>
                                             <Tbody>
                                                 <Tr>
                                                     <Td><Text as={"b"}>Margin</Text></Td>
-                                                    <Td>{margin}</Td>
+                                                    <Td>₿{margin}</Td>
                                                 </Tr>
                                                 <Tr>
                                                     <Td><Text as={"b"}>Leverage</Text></Td>
@@ -271,8 +270,7 @@ const Trade = (
             </Grid>
         </Center>
     );
-};
-export default Trade;
+}
 
 interface QuantityProps {
     min: number;
@@ -285,6 +283,8 @@ function Quantity({ min, max, onChange, quantity }: QuantityProps) {
     return (
         <FormControl id="quantity">
             <FormLabel>Quantity</FormLabel>
+            <InputGroup>
+                <InputLeftAddon>$</InputLeftAddon>
                 <NumberInput
                     min={min}
                     max={max}
@@ -298,6 +298,7 @@ function Quantity({ min, max, onChange, quantity }: QuantityProps) {
                         <NumberDecrementStepper />
                     </NumberInputStepper>
                 </NumberInput>
+            </InputGroup>
             <FormHelperText>How much do you want to buy or sell?</FormHelperText>
         </FormControl>
     );
@@ -330,7 +331,7 @@ function Leverage({ leverage }: LeverageProps) {
 }
 
 interface MarginProps {
-    margin?: string;
+    margin: number;
 }
 
 function Margin({ margin }: MarginProps) {
@@ -338,7 +339,7 @@ function Margin({ margin }: MarginProps) {
         <VStack>
             <HStack>
                 <Text as={"b"}>Required margin:</Text>
-                <Text>{margin}</Text>
+                <Text>₿{margin}</Text>
             </HStack>
             <Text fontSize={"sm"} color={"darkgrey"}>The collateral you will need to provide</Text>
         </VStack>

taker-frontend/src/useDebouncedEffect.ts

@@ -0,0 +1,11 @@
+import { useEffect } from "react";
+
+// Copied from: https://stackoverflow.com/a/61127960/2489334
+export default function useDebouncedEffect(effect: () => void, deps: any[] | undefined, delay: number) {
+    return useEffect(() => {
+        const handler = setTimeout(() => effect(), delay);
+
+        return () => clearTimeout(handler);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [...deps || [], delay]);
+}