Merge pull request #48 from dmccartney/daniel-slider-override

feat: permit manual input instead of slider
dmccartney · Jul 24, 2024 · 4806633 · 4806633
2 parents f21256b + d653d48
commit 4806633
Showing 1 changed file with 87 additions and 12 deletions.
diff --git a/web/src/components/ClaimSlider.js b/web/src/components/ClaimSlider.js
@@ -1,6 +1,14 @@
 import { ethers } from "ethers";
-import { FormHelperText, Slider, Stack, Typography } from "@mui/material";
+import {
+  FormHelperText,
+  InputAdornment,
+  Slider,
+  Stack,
+  TextField,
+  Typography,
+} from "@mui/material";
 import CurrencyValue from "./CurrencyValue";
+import { useEffect, useRef, useState } from "react";
 
 export default function ClaimSlider({
   sx,
@@ -12,19 +20,26 @@ export default function ClaimSlider({
 }) {
   let stakeAmountRplF = Number(ethers.utils.formatUnits(stakeAmountRpl));
   let maxStakeAmountRplF = Number(ethers.utils.formatUnits(totalRpl));
+  let [isTextEditing, setIsTextEditing] = useState(false);
+  let textInputRef = useRef();
+  let [textInput, setTextInput] = useState(String(stakeAmountRplF));
+  useEffect(() => {
+    setTextInput(String(stakeAmountRplF));
+  }, [stakeAmountRplF]);
   return (
     <Stack sx={sx} direction="column" justifyContent="space-between">
       <Slider
         value={stakeAmountRplF}
         color="rpl"
         valueLabelDisplay="off"
-        onChange={(e) =>
+        onChange={(e) => {
+          setIsTextEditing(false);
           onSetStakeAmountRpl(
             e.target.value >= maxStakeAmountRplF
               ? totalRpl
               : ethers.utils.parseUnits(String(e.target.value))
-          )
-        }
+          );
+        }}
         slotProps={{
           root: {
             style: {
@@ -36,16 +51,76 @@ export default function ClaimSlider({
         max={maxStakeAmountRplF}
         {...sliderProps}
       />
-      <Stack direction="row" alignItems="baseline" spacing={1}>
+      <Stack
+        direction="row"
+        alignItems="baseline"
+        spacing={isTextEditing ? 0.5 : 1}
+      >
         <FormHelperText sx={{ m: 0 }}>{caption}</FormHelperText>
-        <Typography variant="default">
-          <CurrencyValue
-            placeholder="0"
-            value={stakeAmountRpl}
-            size="xsmall"
-            currency="rpl"
+        {!isTextEditing ? (
+          <Typography
+            variant="default"
+            onClick={() => {
+              setIsTextEditing(true);
+              setTimeout(() => textInputRef.current?.select(), 50);
+            }}
+          >
+            <CurrencyValue
+              placeholder="0"
+              value={stakeAmountRpl}
+              size="xsmall"
+              currency="rpl"
+            />
+          </Typography>
+        ) : (
+          <TextField
+            inputRef={textInputRef}
+            color={"rpl"}
+            InputProps={{
+              sx: {
+                height: "1.125rem",
+                fontSize: "0.75rem",
+                p: 0,
+                pr: 1,
+              },
+              inputProps: {
+                size: 7,
+                style: {
+                  padding: "0 0 0 4px",
+                  borderRight: "1px solid #606060",
+                },
+              },
+              endAdornment: (
+                <InputAdornment position="end">
+                  <Typography
+                    color={(theme) => theme.palette.rpl.main}
+                    variant={"caption"}
+                  >
+                    RPL
+                  </Typography>
+                </InputAdornment>
+              ),
+            }}
+            size="small"
+            placeholder="0.0"
+            onChange={(e) => {
+              let text = e.target.value;
+              try {
+                let n = ethers.utils.parseUnits(String(text));
+                if (n.gte(totalRpl)) {
+                  n = totalRpl;
+                  text = String(maxStakeAmountRplF);
+                }
+                setTextInput(text);
+                onSetStakeAmountRpl(n);
+              } catch (ignore) {
+                // failure to parse may be fine (e.g. still typing a decimal point)
+                setTextInput(text);
+              }
+            }}
+            value={textInput}
           />
-        </Typography>
+        )}
       </Stack>
     </Stack>
   );