Merge #222

222: Prevent zero-priced CFD offers r=klochowicz a=klochowicz

Simplify the UI code and disable the button for posting a new offer if there is
no price set.

Co-authored-by: Mariusz Klochowicz <mariusz@klochowicz.com>

frontend/src/MakerApp.tsx

@@ -1,4 +1,3 @@
-import { RepeatIcon } from "@chakra-ui/icons";
 import {
     Box,
     Button,
@@ -7,7 +6,7 @@ import {
     Grid,
     GridItem,
     HStack,
-    IconButton,
+    Switch,
     Tab,
     TabList,
     TabPanel,
@@ -17,7 +16,7 @@ import {
     useToast,
     VStack,
 } from "@chakra-ui/react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useAsync } from "react-async";
 import { useEventSource } from "react-sse-hooks";
 import { CfdTable } from "./components/cfdtables/CfdTable";
@@ -44,7 +43,13 @@ export default function App() {
     let [minQuantity, setMinQuantity] = useState<string>("10");
     let [maxQuantity, setMaxQuantity] = useState<string>("100");
     let [orderPrice, setOrderPrice] = useState<string>("0");
-    let [hasEnteredPrice, setHasEnteredPrice] = useState(false);
+    let [autoRefresh, setAutoRefresh] = useState(true);
+
+    useEffect(() => {
+        if (autoRefresh && priceInfo) {
+            setOrderPrice((priceInfo.ask * SPREAD).toFixed(2).toString());
+        }
+    }, [priceInfo, autoRefresh]);
 
     let { run: makeNewCfdSellOrder, isLoading: isCreatingNewCfdOrder } = useAsync({
         deferFn: async ([payload]: any[]) => {
@@ -110,19 +115,18 @@ export default function App() {
                             <CurrencyInputField
                                 onChange={(valueString: string) => {
                                     setOrderPrice(parse(valueString));
-                                    setHasEnteredPrice(true);
+                                    setAutoRefresh(false);
                                 }}
-                                value={priceToDisplay(hasEnteredPrice, orderPrice, priceInfo)}
+                                value={format(orderPrice)}
                             />
-                            <IconButton
+                            <HStack>
-                                aria-label="Reduce"
+                                <Switch
-                                icon={<RepeatIcon />}
+                                    id="auto-refresh"
-                                onClick={() => {
+                                    isChecked={autoRefresh}
-                                    if (priceInfo) {
+                                    onChange={() => setAutoRefresh(!autoRefresh)}
-                                        setOrderPrice((priceInfo.ask * SPREAD).toString());
-                                    }
-                                }}
                                 />
+                                <Text>Auto-refresh</Text>
+                            </HStack>
                         </HStack>
 
                         <Text>Leverage:</Text>
@@ -138,7 +142,7 @@ export default function App() {
 
                         <GridItem colSpan={2} textAlign="center">
                             <Button
-                                disabled={isCreatingNewCfdOrder}
+                                disabled={isCreatingNewCfdOrder || orderPrice === "0"}
                                 variant={"solid"}
                                 colorScheme={"blue"}
                                 onClick={() => {
@@ -194,18 +198,6 @@ export default function App() {
     );
 }
 
-function priceToDisplay(hasEnteredPrice: boolean, orderPrice: string, priceInfo: PriceInfo | null) {
-    if (!priceInfo) {
-        return format("0");
-    }
-
-    if (!hasEnteredPrice) {
-        return format((priceInfo.ask * SPREAD).toString());
-    }
-
-    return format(orderPrice);
-}
-
 function format(val: any) {
     return `$` + val;
 }