From def2be4a10cd446657f82cc12ca00c77f6132045 Mon Sep 17 00:00:00 2001
From: Aryeh Harris <harryttd@gmail.com>
Date: Fri, 29 Sep 2023 14:34:29 -0400
Subject: [PATCH 1/4] Auto select all text in input on focus

---
 src/components/Faucet/FaucetRequestButton.tsx  | 1 +
 src/components/Faucet/FaucetToInputRequest.tsx | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/components/Faucet/FaucetRequestButton.tsx b/src/components/Faucet/FaucetRequestButton.tsx
index c1310ae..32f1e21 100644
--- a/src/components/Faucet/FaucetRequestButton.tsx
+++ b/src/components/Faucet/FaucetRequestButton.tsx
@@ -258,6 +258,7 @@ export default function FaucetRequestButton({
               value={amount}
               disabled={disabled}
               onChange={updateAmount}
+              onFocus={e => e.target.select()}
             />
           </Col>
 
diff --git a/src/components/Faucet/FaucetToInputRequest.tsx b/src/components/Faucet/FaucetToInputRequest.tsx
index 00b0706..3b28b0c 100644
--- a/src/components/Faucet/FaucetToInputRequest.tsx
+++ b/src/components/Faucet/FaucetToInputRequest.tsx
@@ -37,9 +37,10 @@ export default function FaucetToInputRequest({
           type="text"
           placeholder="tz1..."
           id={inputId}
-          onChange={handleInput}
           className={inputClass}
           disabled={status.isLoading}
+          onChange={handleInput}
+          onFocus={(e) => e.target.select()}
         />
         <Form.Control.Feedback type="invalid" className="position-absolute">
           Invalid address

From 866f4a947506ca5dcd584f0a3c82e14793cbae1f Mon Sep 17 00:00:00 2001
From: Aryeh Harris <harryttd@gmail.com>
Date: Fri, 29 Sep 2023 14:55:05 -0400
Subject: [PATCH 2/4] Expand slider to take up full row

---
 src/components/Faucet/FaucetRequestButton.tsx | 46 +++++++++----------
 1 file changed, 22 insertions(+), 24 deletions(-)

diff --git a/src/components/Faucet/FaucetRequestButton.tsx b/src/components/Faucet/FaucetRequestButton.tsx
index 32f1e21..6ae3f27 100644
--- a/src/components/Faucet/FaucetRequestButton.tsx
+++ b/src/components/Faucet/FaucetRequestButton.tsx
@@ -226,31 +226,29 @@ export default function FaucetRequestButton({
       />
 
       <Form.Group controlId="tezosRange" className="mt-4">
-        <Row className="d-flex align-items-end">
-          <Col md={8}>
-            <Form.Label>Select Tez Amount</Form.Label>
-            <Row>
-              <Col xs="auto" className="pe-0">
-                <Form.Label className="fw-bold">{minTez}</Form.Label>
-              </Col>
-
-              <Col>
-                <Form.Range
-                  min={minTez}
-                  max={maxTez}
-                  value={amount}
-                  disabled={disabled}
-                  onChange={updateAmount}
-                />
-              </Col>
+        <Form.Label>Select Tez Amount</Form.Label>
+        <Row className="mb-2">
+          <Col xs="auto" className="pe-0">
+            <Form.Label className="fw-bold">{minTez}</Form.Label>
+          </Col>
 
-              <Col xs="auto" className="ps-0">
-                <Form.Label className="fw-bold">{maxTez}</Form.Label>
-              </Col>
-            </Row>
+          <Col>
+            <Form.Range
+              min={minTez}
+              max={maxTez}
+              value={amount}
+              disabled={disabled}
+              onChange={updateAmount}
+            />
           </Col>
 
-          <Col xs={6} md={4}>
+          <Col xs="auto" className="ps-0">
+            <Form.Label className="fw-bold">{maxTez}</Form.Label>
+          </Col>
+        </Row>
+
+        <Row className="d-flex align-items-end gy-3">
+          <Col xs={12} sm={6}>
             <Form.Control
               type="number"
               min={minTez}
@@ -258,11 +256,11 @@ export default function FaucetRequestButton({
               value={amount}
               disabled={disabled}
               onChange={updateAmount}
-              onFocus={e => e.target.select()}
+              onFocus={(e) => e.target.select()}
             />
           </Col>
 
-          <Col xs={6}>
+          <Col xs={12} sm={6} className="d-flex justify-content-sm-end">
             <Button variant="primary" disabled={disabled} onClick={getTez}>
               <DropletFill />
               &nbsp;

From d11dba857bb1a99be2e2553075bad7beba109f2d Mon Sep 17 00:00:00 2001
From: Aryeh Harris <harryttd@gmail.com>
Date: Fri, 29 Sep 2023 15:04:17 -0400
Subject: [PATCH 3/4] Format large numbers to have commas

---
 src/components/Faucet/FaucetRequestButton.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/Faucet/FaucetRequestButton.tsx b/src/components/Faucet/FaucetRequestButton.tsx
index 6ae3f27..f4b991b 100644
--- a/src/components/Faucet/FaucetRequestButton.tsx
+++ b/src/components/Faucet/FaucetRequestButton.tsx
@@ -28,6 +28,7 @@ export default function FaucetRequestButton({
   status: StatusContext
 }) {
   const [amount, setAmount] = useState<number>(minTez)
+  const formattedAmount = amount.toLocaleString()
   const [isLocalLoading, setLocalLoading] = useState<boolean>(false)
   const recaptchaRef: RefObject<ReCAPTCHA> = useRef(null)
 
@@ -229,7 +230,7 @@ export default function FaucetRequestButton({
         <Form.Label>Select Tez Amount</Form.Label>
         <Row className="mb-2">
           <Col xs="auto" className="pe-0">
-            <Form.Label className="fw-bold">{minTez}</Form.Label>
+            <Form.Label className="fw-bold">{minTez.toLocaleString()}</Form.Label>
           </Col>
 
           <Col>
@@ -243,7 +244,7 @@ export default function FaucetRequestButton({
           </Col>
 
           <Col xs="auto" className="ps-0">
-            <Form.Label className="fw-bold">{maxTez}</Form.Label>
+            <Form.Label className="fw-bold">{maxTez.toLocaleString()}</Form.Label>
           </Col>
         </Row>
 
@@ -264,7 +265,9 @@ export default function FaucetRequestButton({
             <Button variant="primary" disabled={disabled} onClick={getTez}>
               <DropletFill />
               &nbsp;
-              {isLocalLoading ? `Requested ${amount} ꜩ` : `Request ${amount} ꜩ`}
+              {isLocalLoading
+                ? `Requested ${formattedAmount} ꜩ`
+                : `Request ${formattedAmount} ꜩ`}
               &nbsp;{" "}
               {isLocalLoading ? (
                 <Spinner

From e5a58550f15e137ccf79bbbf93d68ec86a5d65ec Mon Sep 17 00:00:00 2001
From: Aryeh Harris <harryttd@gmail.com>
Date: Fri, 29 Sep 2023 18:23:13 -0400
Subject: [PATCH 4/4] Use steps for  the range slider

---
 src/components/Faucet/FaucetRequestButton.tsx | 34 +++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/src/components/Faucet/FaucetRequestButton.tsx b/src/components/Faucet/FaucetRequestButton.tsx
index f4b991b..604e496 100644
--- a/src/components/Faucet/FaucetRequestButton.tsx
+++ b/src/components/Faucet/FaucetRequestButton.tsx
@@ -217,6 +217,29 @@ export default function FaucetRequestButton({
     return {}
   }
 
+  const computeStep = () => {
+    const magnitude = Math.floor(Math.log10(maxTez))
+
+    switch (magnitude) {
+      case 1:
+      case 2:
+        return 1
+      case 3:
+        return 10
+      case 4:
+        return 100
+      case 5:
+        return 1_000
+      case 6:
+        return 10_000
+      default:
+        return 100_000
+    }
+  }
+
+  const currentStep = computeStep()
+  const adjustedMin = Math.ceil(minTez / currentStep) * currentStep
+
   return (
     <>
       <ReCAPTCHA
@@ -230,13 +253,16 @@ export default function FaucetRequestButton({
         <Form.Label>Select Tez Amount</Form.Label>
         <Row className="mb-2">
           <Col xs="auto" className="pe-0">
-            <Form.Label className="fw-bold">{minTez.toLocaleString()}</Form.Label>
+            <Form.Label className="fw-bold">
+              {minTez.toLocaleString()}
+            </Form.Label>
           </Col>
 
           <Col>
             <Form.Range
-              min={minTez}
+              min={adjustedMin}
               max={maxTez}
+              step={currentStep}
               value={amount}
               disabled={disabled}
               onChange={updateAmount}
@@ -244,7 +270,9 @@ export default function FaucetRequestButton({
           </Col>
 
           <Col xs="auto" className="ps-0">
-            <Form.Label className="fw-bold">{maxTez.toLocaleString()}</Form.Label>
+            <Form.Label className="fw-bold">
+              {maxTez.toLocaleString()}
+            </Form.Label>
           </Col>
         </Row>