Merge pull request #3941 from lbryio/fix-tipSlider
fix tip select slider messaging and behavior
This commit is contained in:
commit
33c64a9400
1 changed files with 13 additions and 9 deletions
|
@ -23,9 +23,9 @@ type Props = {
|
||||||
const SupportsLiquidate = (props: Props) => {
|
const SupportsLiquidate = (props: Props) => {
|
||||||
const { claim, abandonSupportForClaim, handleClose, abandonClaimError } = props;
|
const { claim, abandonSupportForClaim, handleClose, abandonClaimError } = props;
|
||||||
const [previewBalance, setPreviewBalance] = useState(undefined);
|
const [previewBalance, setPreviewBalance] = useState(undefined);
|
||||||
const [amount, setAmount] = useState(0);
|
const [amount, setAmount] = useState(-1);
|
||||||
const [error, setError] = useState(false);
|
const [error, setError] = useState(false);
|
||||||
const initialMessage = '';
|
const initialMessage = __('How much would you like to unlock?');
|
||||||
const [message, setMessage] = useState(initialMessage);
|
const [message, setMessage] = useState(initialMessage);
|
||||||
const keep =
|
const keep =
|
||||||
previewBalance && amount && Number(amount) < previewBalance
|
previewBalance && amount && Number(amount) < previewBalance
|
||||||
|
@ -54,9 +54,9 @@ const SupportsLiquidate = (props: Props) => {
|
||||||
if (a === undefined || isNaN(Number(a))) {
|
if (a === undefined || isNaN(Number(a))) {
|
||||||
setMessage(__('Amount must be a number'));
|
setMessage(__('Amount must be a number'));
|
||||||
setError(true);
|
setError(true);
|
||||||
setAmount('');
|
setAmount(0);
|
||||||
} else if (a === '') {
|
} else if (a === '') {
|
||||||
setAmount('');
|
setAmount(0);
|
||||||
setError(true);
|
setError(true);
|
||||||
setMessage(__('Amount cannot be blank'));
|
setMessage(__('Amount cannot be blank'));
|
||||||
} else if (Number(a) > Number(previewBalance)) {
|
} else if (Number(a) > Number(previewBalance)) {
|
||||||
|
@ -70,10 +70,14 @@ const SupportsLiquidate = (props: Props) => {
|
||||||
setMessage(__('Your content will do better with more staked on it'));
|
setMessage(__('Your content will do better with more staked on it'));
|
||||||
setAmount(a);
|
setAmount(a);
|
||||||
setError(false);
|
setError(false);
|
||||||
} else if (a === '0') {
|
} else if (Number(a) === 0) {
|
||||||
setMessage(__('Amount cannot be zero'));
|
setMessage(__('Amount cannot be zero'));
|
||||||
setAmount(a);
|
setAmount(0);
|
||||||
setError(true);
|
setError(true);
|
||||||
|
} else if (Number(a) <= Number(previewBalance) / 2) {
|
||||||
|
setMessage(__('A prudent choice'));
|
||||||
|
setAmount(Number(a));
|
||||||
|
setError(false);
|
||||||
} else {
|
} else {
|
||||||
setMessage(initialMessage);
|
setMessage(initialMessage);
|
||||||
setAmount(a);
|
setAmount(a);
|
||||||
|
@ -128,8 +132,8 @@ const SupportsLiquidate = (props: Props) => {
|
||||||
type={'range'}
|
type={'range'}
|
||||||
min={0}
|
min={0}
|
||||||
step={0.01}
|
step={0.01}
|
||||||
max={previewBalance} // times 100 to so we're more granular than whole numbers.
|
max={previewBalance}
|
||||||
value={Number(amount) || previewBalance / 4} // by default, set it to 25% of available
|
value={Number(amount) >= 0 ? amount : previewBalance / 4} // by default, set it to 25% of available
|
||||||
onChange={e => handleChange(e.target.value)}
|
onChange={e => handleChange(e.target.value)}
|
||||||
/>
|
/>
|
||||||
<label className="range__label">
|
<label className="range__label">
|
||||||
|
@ -139,7 +143,7 @@ const SupportsLiquidate = (props: Props) => {
|
||||||
</label>
|
</label>
|
||||||
<FormField
|
<FormField
|
||||||
type="text"
|
type="text"
|
||||||
value={amount || (previewBalance && previewBalance / 4)}
|
value={amount >= 0 ? amount || '' : previewBalance && previewBalance / 4}
|
||||||
helper={message}
|
helper={message}
|
||||||
onChange={e => handleChange(e.target.value)}
|
onChange={e => handleChange(e.target.value)}
|
||||||
/>
|
/>
|
||||||
|
|
Loading…
Reference in a new issue