From 7d41a7dd31c9097db337e699af4b8c45bb7405cc Mon Sep 17 00:00:00 2001
From: Ben Allen <108441023+benalleng@users.noreply.github.com>
Date: Mon, 19 Dec 2022 12:36:04 -0500
Subject: [PATCH] change input type=number in send and recieve amount (#242)

* change input type to number

* styled to remove up and down arrow

* create min amount

* move styling in css

* add zero and negative error catches

* typos

* linter

* add mutiny toaster

* remove import

* replace typeof after operand

* remove comment

* remove comment

* typeof amount typo

* return input to empty string

* reset setAmount for non-numbers

* I guess zero-amount invoices area thing

* I guess zero-amount invoices area thing

* I guess zero-amount invoices area thing

* cover all edge cases better

* remove now unused styling

* allow users to input commas for tracking larger numbers better

* remove min for text type

* remove unused classes
---
 frontend/src/routes/Receive.tsx    | 33 ++++++++++++++++++++----------
 frontend/src/routes/SendAmount.tsx | 14 +++++++++----
 2 files changed, 32 insertions(+), 15 deletions(-)

diff --git a/frontend/src/routes/Receive.tsx b/frontend/src/routes/Receive.tsx
index 1ad06073f..54170e008 100644
--- a/frontend/src/routes/Receive.tsx
+++ b/frontend/src/routes/Receive.tsx
@@ -7,20 +7,30 @@ import { inputStyle } from "../styles";
 import { objectToSearchParams } from "@util/dumb";
 import { ReceiveParams } from "../routes/ReceiveQR";
 import { useQueryClient } from "@tanstack/react-query";
+import toast from "react-hot-toast";
+import ActionButton from "@components/ActionButton";
+import MutinyToaster from "@components/MutinyToaster";
 
 function Receive() {
     let navigate = useNavigate();
 
-    const [amount, setAmount] = useState("")
+    const [receiveAmount, setAmount] = useState("")
     const [description, setDescription] = useState("")
     const queryClient = useQueryClient()
 
-    function handleContinue() {
-        navigate("/")
-        const params = objectToSearchParams<ReceiveParams>({ amount, description })
-        // Important! Otherwise we might see a stale bip21 code
-        queryClient.invalidateQueries({ queryKey: ['bip21'] })
-        navigate(`/receive/qr?${params}`)
+    async function handleContinue() {
+        const amount = receiveAmount.replace(/,/g, "")
+        if (amount.match(/\D/)) {
+            setAmount('')
+            toast("That doesn't look right")
+            return
+        }
+        if (amount.length === 0 || amount.match(/^\d+$/)) {
+            const params = objectToSearchParams<ReceiveParams>({ amount, description })
+            // Important! Otherwise we might see a stale bip21 code
+            queryClient.invalidateQueries({ queryKey: ['bip21'] })
+            navigate(`/receive/qr?${params}`)
+        }
     }
 
     return (
@@ -33,13 +43,14 @@ function Receive() {
                 <div />
                 <p className="text-2xl font-light">Want some sats?</p>
                 <div className="flex flex-col gap-4">
-                    <input onChange={(e) => setAmount(e.target.value)} className={`w-full ${inputStyle({ accent: "blue" })}`} type="text" placeholder='How much? (optional)' />
+                    <input onChange={e => setAmount(e.target.value)} value={receiveAmount} className={`w-full ${inputStyle({ accent: "blue" })}`} type="text" inputMode="numeric" placeholder='How much? (optional)' />
                     <input onChange={(e) => setDescription(e.target.value)} className={`w-full ${inputStyle({ accent: "blue" })}`} type="text" placeholder='What for? (optional)' />
                 </div>
-                <div className='flex justify-start gap-2'>
-                    <button onClick={handleContinue}>Continue</button>
-                </div>
+                <ActionButton onClick={() => handleContinue()}>
+                    Continue
+                </ActionButton>
             </ScreenMain>
+            <MutinyToaster />
         </>
     );
 }
diff --git a/frontend/src/routes/SendAmount.tsx b/frontend/src/routes/SendAmount.tsx
index 01e1b5bfb..4b18f11b4 100644
--- a/frontend/src/routes/SendAmount.tsx
+++ b/frontend/src/routes/SendAmount.tsx
@@ -15,15 +15,21 @@ export default function SendAmount() {
   const [searchParams] = useSearchParams();
   const destination = searchParams.get("destination")
 
-  const [amount, setAmount] = useState("")
+  const [receiveAmount, setAmount] = useState("")
 
   function handleContinue() {
-    if (!amount || typeof parseInt(amount) !== "number") {
+    const amount = receiveAmount.replace(/,/g, "")
+    if (!amount || amount.match(/\D/)) {
+      setAmount('')
       toast("That doesn't look right")
       return
+    } else if (parseInt(amount) <= 0) {
+      setAmount('')
+      toast("You can't send nothing")
+      return
     }
 
-    if (destination && amount) {
+    if (destination && amount.match(/^[\d.]+$/)) {
       navigate(`/send/confirm?destination=${destination}&amount=${amount}`)
     }
   }
@@ -37,7 +43,7 @@ export default function SendAmount() {
         <div />
         <div className="flex flex-col gap-4">
           <p className="text-2xl font-light">How much would you like to send?</p>
-          <input onChange={e => setAmount(e.target.value)} className={`w-full ${inputStyle({ accent: "green" })}`} type="text" placeholder='sats' />
+          <input onChange={e => setAmount(e.target.value)} value={receiveAmount} className={`w-full ${inputStyle({ accent: "green" })}`} type="text" inputMode="numeric" placeholder='sats' />
         </div>
         <ActionButton onClick={handleContinue}>
           Continue