From ec712b33aece2d5683aac7d76938f76392263f35 Mon Sep 17 00:00:00 2001
From: Thomas Eizinger <thomas@eizinger.io>
Date: Fri, 26 Nov 2021 11:38:45 +1100
Subject: [PATCH] Replace formatting of quantity with input addon

---
 taker-frontend/src/App.tsx              |  7 ++----
 taker-frontend/src/components/Trade.tsx | 31 ++++++++++++++-----------
 2 files changed, 20 insertions(+), 18 deletions(-)

diff --git a/taker-frontend/src/App.tsx b/taker-frontend/src/App.tsx
index aae240e..db1803c 100644
--- a/taker-frontend/src/App.tsx
+++ b/taker-frontend/src/App.tsx
@@ -100,9 +100,6 @@ export const App = () => {
         500,
     );
 
-    const format = (val: any) => `$` + val;
-    const parse = (val: any) => val.replace(/^\$/, "");
-
     return (
         <>
             <Nav walletInfo={walletInfo} connectedToMaker={connectedToMaker} />
@@ -119,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}
@@ -129,7 +126,7 @@ export const App = () => {
                                     liquidationPrice={liquidationPrice}
                                     onQuantityChange={(valueString: string) => {
                                         setUserHasEdited(true);
-                                        setQuantity(parse(valueString));
+                                        setQuantity(valueString);
                                     }}
                                     onLongSubmit={makeNewOrderRequest}
                                     isLongSubmitting={isCreatingNewOrderRequest}
diff --git a/taker-frontend/src/components/Trade.tsx b/taker-frontend/src/components/Trade.tsx
index e16a6c5..186393e 100644
--- a/taker-frontend/src/components/Trade.tsx
+++ b/taker-frontend/src/components/Trade.tsx
@@ -15,6 +15,8 @@ import {
     Grid,
     GridItem,
     HStack,
+    InputGroup,
+    InputLeftAddon,
     Modal,
     ModalBody,
     ModalCloseButton,
@@ -281,19 +283,22 @@ function Quantity({ min, max, onChange, quantity }: QuantityProps) {
     return (
         <FormControl id="quantity">
             <FormLabel>Quantity</FormLabel>
-            <NumberInput
-                min={min}
-                max={max}
-                default={min}
-                onChange={onChange}
-                value={quantity}
-            >
-                <NumberInputField />
-                <NumberInputStepper>
-                    <NumberIncrementStepper />
-                    <NumberDecrementStepper />
-                </NumberInputStepper>
-            </NumberInput>
+            <InputGroup>
+                <InputLeftAddon>$</InputLeftAddon>
+                <NumberInput
+                    min={min}
+                    max={max}
+                    default={min}
+                    onChange={onChange}
+                    value={quantity}
+                >
+                    <NumberInputField />
+                    <NumberInputStepper>
+                        <NumberIncrementStepper />
+                        <NumberDecrementStepper />
+                    </NumberInputStepper>
+                </NumberInput>
+            </InputGroup>
             <FormHelperText>How much do you want to buy or sell?</FormHelperText>
         </FormControl>
     );