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
MutinyWallet · Dec 19, 2022 · 7d41a7d · 7d41a7d
1 parent 6e0109e
commit 7d41a7d
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 15 deletions.
diff --git 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
@@ -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