diff --git a/web/src/components/ClaimSlider.js b/web/src/components/ClaimSlider.js index 5d5411a..c171d52 100644 --- 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 ( + 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} /> - + {caption} - - { + setIsTextEditing(true); + setTimeout(() => textInputRef.current?.select(), 50); + }} + > + + + ) : ( + + theme.palette.rpl.main} + variant={"caption"} + > + RPL + + + ), + }} + 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} /> - + )} );