From ae40999700bd376d5a08197e3f72f20b8aa3f38d Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Mon, 5 Sep 2022 17:11:32 -0500
Subject: [PATCH] mobile bet slider

---
 web/components/amount-input.tsx             | 35 +++++++++++++++------
 web/components/answers/answer-bet-panel.tsx |  2 ++
 web/components/bet-panel.tsx                |  4 +++
 3 files changed, 31 insertions(+), 10 deletions(-)

diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index 971a5496..f1eedc88 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -84,6 +84,7 @@ export function BuyAmountInput(props: {
   setError: (error: string | undefined) => void
   minimumAmount?: number
   disabled?: boolean
+  showSliderOnMobile?: boolean
   className?: string
   inputClassName?: string
   // Needed to focus the amount input
@@ -94,6 +95,7 @@ export function BuyAmountInput(props: {
     onChange,
     error,
     setError,
+    showSliderOnMobile: showSlider,
     disabled,
     className,
     inputClassName,
@@ -121,15 +123,28 @@ export function BuyAmountInput(props: {
   }
 
   return (
-    <AmountInput
-      amount={amount}
-      onChange={onAmountChange}
-      label={ENV_CONFIG.moneyMoniker}
-      error={error}
-      disabled={disabled}
-      className={className}
-      inputClassName={inputClassName}
-      inputRef={inputRef}
-    />
+    <>
+      <AmountInput
+        amount={amount}
+        onChange={onAmountChange}
+        label={ENV_CONFIG.moneyMoniker}
+        error={error}
+        disabled={disabled}
+        className={className}
+        inputClassName={inputClassName}
+        inputRef={inputRef}
+      />
+      {showSlider && (
+        <input
+          type="range"
+          min="0"
+          max="250"
+          value={amount ?? 0}
+          onChange={(e) => onAmountChange(parseInt(e.target.value))}
+          className="xl:hidden"
+          step="25"
+        />
+      )}
+    </>
   )
 }
diff --git a/web/components/answers/answer-bet-panel.tsx b/web/components/answers/answer-bet-panel.tsx
index 8a29148e..ace06b6c 100644
--- a/web/components/answers/answer-bet-panel.tsx
+++ b/web/components/answers/answer-bet-panel.tsx
@@ -136,6 +136,7 @@ export function AnswerBetPanel(props: {
         Amount
         <span>Balance: {formatMoney(user?.balance ?? 0)}</span>
       </Row>
+
       <BuyAmountInput
         inputClassName="w-full max-w-none"
         amount={betAmount}
@@ -144,6 +145,7 @@ export function AnswerBetPanel(props: {
         setError={setError}
         disabled={isSubmitting}
         inputRef={inputRef}
+        showSliderOnMobile
       />
 
       {(betAmount ?? 0) > 10 &&
diff --git a/web/components/bet-panel.tsx b/web/components/bet-panel.tsx
index ab3d8958..c48e92a9 100644
--- a/web/components/bet-panel.tsx
+++ b/web/components/bet-panel.tsx
@@ -313,6 +313,7 @@ function BuyPanel(props: {
           Balance: {formatMoney(user?.balance ?? 0)}
         </span>
       </Row>
+
       <BuyAmountInput
         inputClassName="w-full max-w-none"
         amount={betAmount}
@@ -321,6 +322,7 @@ function BuyPanel(props: {
         setError={setError}
         disabled={isSubmitting}
         inputRef={inputRef}
+        showSliderOnMobile
       />
 
       {warning}
@@ -609,6 +611,7 @@ function LimitOrderPanel(props: {
           Balance: {formatMoney(user?.balance ?? 0)}
         </span>
       </Row>
+
       <BuyAmountInput
         inputClassName="w-full max-w-none"
         amount={betAmount}
@@ -616,6 +619,7 @@ function LimitOrderPanel(props: {
         error={error}
         setError={setError}
         disabled={isSubmitting}
+        showSliderOnMobile
       />
 
       <Col className="mt-3 w-full gap-3">