Merge pull request #1378 from bancorprotocol/issue-#1018

Use rounded number in input

e2e/tests/strategy/overlapping/create.ts

@@ -30,11 +30,14 @@ export const create = (testCase: CreateStrategyTestCase) => {
     await createForm.nextStep();
 
     const form = createForm.getOverlappingForm();
+    await form.max().focus();
     await form.max().fill(sell.max.toString());
+    await form.min().focus();
     await form.min().fill(buy.min.toString());
     await form.spread().fill(spread.toString());
     await expect(form.anchorRequired()).toBeVisible();
     await form.anchor('sell').click();
+    await form.budget().focus();
     await form.budget().fill(sell.budget.toString());
 
     const tokenApproval = new TokenApprovalDriver(page);

e2e/tests/strategy/overlapping/deposit.ts

@@ -23,6 +23,7 @@ export const deposit = (testCase: CreateStrategyTestCase) => {
     await edit.waitForPage('overlapping', 'deposit');
     const form = edit.getOverlappingForm();
     await form.anchor(input.anchor).click();
+    await form.budget().focus();
     await form.budget().fill(input.budget);
     await edit.submit('deposit');
 

e2e/tests/strategy/overlapping/duplicate.ts

@@ -32,6 +32,7 @@ export const duplicate = (testCase: CreateStrategyTestCase) => {
     const createForm = new CreateStrategyDriver(page, testCase);
     const overlappingForm = createForm.getOverlappingForm();
     await overlappingForm.anchor('sell').click();
+    await overlappingForm.budget().focus();
     await overlappingForm.budget().fill(sell.budget);
     await createForm.submit('duplicate');
 

e2e/tests/strategy/overlapping/edit.ts

@@ -22,13 +22,16 @@ export const editPrice = (testCase: CreateStrategyTestCase) => {
     const edit = new EditStrategyDriver(page, testCase);
     await edit.waitForPage('overlapping', 'editPrices');
     const form = edit.getOverlappingForm();
+    await form.min().focus();
     await form.min().fill(input.min);
+    await form.max().focus();
     await form.max().fill(input.max);
     await form.spread().fill(input.spread);
     await expect(form.anchorRequired()).toBeVisible();
     await form.anchor(input.anchor).click();
     await form.budgetSummary().click();
     if (input.action) await form.action(input.action).click();
+    await form.budget().focus();
     await form.budget().fill(input.budget);
     await edit.submit('editPrices');
 

e2e/tests/strategy/overlapping/undercut.ts

@@ -32,6 +32,7 @@ export const undercut = (testCase: CreateStrategyTestCase) => {
     const createForm = new CreateStrategyDriver(page, testCase);
     const overlappingForm = createForm.getOverlappingForm();
     await overlappingForm.anchor('sell').click();
+    await overlappingForm.budget().focus();
     await overlappingForm.budget().fill(sell.budget);
     await createForm.submit('undercut');
 

e2e/tests/strategy/overlapping/withdraw.ts

@@ -23,6 +23,7 @@ export const withdraw = (testCase: CreateStrategyTestCase) => {
     await edit.waitForPage('overlapping', 'withdraw');
     const form = edit.getOverlappingForm();
     await form.anchor(input.anchor).click();
+    await form.budget().focus();
     await form.budget().fill(input.budget);
     await edit.submit('withdraw');
 

e2e/utils/simulator/CreateSimulationDriver.ts

@@ -145,11 +145,15 @@ export class CreateSimulationDriver {
     const form = this.getFormSection(direction);
     await form.setting(setting).click();
     if (setting === 'limit') {
+      await form.price().focus();
       await form.price().fill(order.min);
     } else {
+      await form.min().focus();
       await form.min().fill(order.min);
+      await form.max().focus();
       await form.max().fill(order.max);
     }
+    await form.budget().focus();
     await form.budget().fill(order.budget);
     return form;
   }
@@ -167,9 +171,12 @@ export class CreateSimulationDriver {
     assertOverlappingTestCase(this.testCase);
     const { buy, sell, spread } = this.testCase.input;
     const form = this.getOverlappingForm();
+    await form.max().focus();
     await form.max().fill(sell.max.toString());
+    await form.min().focus();
     await form.min().fill(buy.min.toString());
     await form.spread().fill(spread.toString());
+    await form.budgetBase().focus();
     await form.budgetBase().fill(sell.budget.toString());
     return form;
   }

e2e/utils/strategy/CreateStrategyDriver.ts

@@ -77,11 +77,15 @@ export class CreateStrategyDriver {
     const form = this.getFormSection(direction);
     await form.setting(setting).click();
     if (setting === 'limit') {
+      await form.price().focus();
       await form.price().fill(order.min);
     } else {
+      await form.min().focus();
       await form.min().fill(order.min);
+      await form.max().focus();
       await form.max().fill(order.max);
     }
+    await form.budget().focus();
     await form.budget().fill(order.budget);
     return form;
   }

e2e/utils/strategy/EditStrategyDriver.ts

@@ -96,6 +96,7 @@ export class EditStrategyDriver {
 
   async fillBudget(direction: Direction, budget: string) {
     const form = this.getBudgetSection(direction);
+    await form.budget().focus();
     return form.budget().fill(budget);
   }
 
@@ -110,16 +111,19 @@ export class EditStrategyDriver {
     if (setting === 'limit') {
       if (type !== 'renew') {
         // wait for input to have a value before overriding
-        expect(form.price()).toHaveValue(/\S+/);
+        await expect(form.price()).toHaveValue(/\S+/);
       }
+      await form.price().focus();
       await form.price().fill(order.min);
     } else {
       if (type !== 'renew') {
         // wait for input to have a value before overriding
-        expect(form.min()).toHaveValue(/\S+/);
-        expect(form.max()).toHaveValue(/\S+/);
+        await expect(form.min()).toHaveValue(/\S+/);
+        await expect(form.max()).toHaveValue(/\S+/);
       }
+      await form.min().focus();
       await form.min().fill(order.min);
+      await form.max().focus();
       await form.max().fill(order.max);
     }
     return form;

src/components/strategies/common/InputBudget.tsx

@@ -1,6 +1,20 @@
-import { ChangeEvent, FC, FocusEvent, useId, useRef } from 'react';
+import {
+  ChangeEvent,
+  FC,
+  FocusEvent,
+  MouseEvent,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react';
 import { Token } from 'libs/tokens';
-import { formatNumber, prettifyNumber, sanitizeNumber } from 'utils/helpers';
+import {
+  formatNumber,
+  prettifyNumber,
+  roundSearchParam,
+  sanitizeNumber,
+} from 'utils/helpers';
 import { SafeDecimal } from 'libs/safedecimal';
 import { decimalNumberValidationRegex } from 'utils/inputsValidations';
 import { TokenLogo } from 'components/common/imager/Imager';
@@ -30,9 +44,6 @@ interface Props {
 }
 
 export const InputBudget: FC<Props> = (props) => {
-  const inputRef = useRef<HTMLInputElement>(null);
-  const inputId = useId();
-  const { user } = useWagmi();
   const {
     className,
     token,
@@ -47,24 +58,43 @@ export const InputBudget: FC<Props> = (props) => {
     title,
     titleTooltip,
   } = props;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const inputId = useId();
+  const { user } = useWagmi();
   const id = props.id ?? inputId;
+  const [localBudget, setLocalBudget] = useState(roundSearchParam(value));
   const { getFiatValue, selectedFiatCurrency: currentCurrency } =
     useFiatCurrency(token);
-  const fiatValue = getFiatValue(value ?? '0', true);
+  const fiatValue = getFiatValue(localBudget ?? '0', true);
 
-  const onBlur = (e: FocusEvent<HTMLInputElement>) => {
-    const formatted = formatNumber(e.target.value);
-    if (formatted !== e.target.value) props.onChange(formatted);
+  useEffect(() => {
+    if (document.activeElement !== document.getElementById(inputId)) {
+      setLocalBudget(roundSearchParam(value));
+    }
+  }, [inputId, value]);
+
+  const onFocus = (e: FocusEvent<HTMLInputElement>) => {
+    setLocalBudget(value);
+    e.target.select();
   };
 
   const onChange = (e: ChangeEvent<HTMLInputElement>) => {
-    const sanitized = sanitizeNumber(e.target.value, token.decimals);
-    props.onChange(sanitized);
+    const budget = sanitizeNumber(e.target.value, token.decimals);
+    setLocalBudget(budget);
+    props.onChange(budget);
+  };
+
+  const onBlur = (e: FocusEvent<HTMLInputElement>) => {
+    const budget = formatNumber(e.target.value);
+    setLocalBudget(roundSearchParam(budget));
+    props.onChange(budget);
   };
 
-  const setMax = () => {
+  const setMax = (e: MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
     if (!max || max === value) return;
     const maxBudget = new SafeDecimal(max).toFixed(token.decimals);
+    setLocalBudget(roundSearchParam(maxBudget));
     props.onChange(maxBudget);
   };
 
@@ -93,7 +123,7 @@ export const InputBudget: FC<Props> = (props) => {
             pattern={decimalNumberValidationRegex}
             inputMode="decimal"
             ref={inputRef}
-            value={value}
+            value={localBudget}
             size={1}
             placeholder={placeholder}
             className={`
@@ -102,7 +132,7 @@ export const InputBudget: FC<Props> = (props) => {
               ${disabled ? 'text-white/40' : ''}
               ${disabled ? 'cursor-not-allowed' : ''}
             `}
-            onFocus={(e) => e.target.select()}
+            onFocus={onFocus}
             onChange={onChange}
             onBlur={onBlur}
             disabled={disabled}

src/components/strategies/common/InputLimit.tsx

@@ -1,8 +1,13 @@
-import { ChangeEvent, FC, FocusEvent, useEffect, useId } from 'react';
+import { FC, FocusEvent, MouseEvent, useEffect, useId, useState } from 'react';
 import { carbonEvents } from 'services/events';
 import { useFiatCurrency } from 'hooks/useFiatCurrency';
 import { Token } from 'libs/tokens';
-import { cn, formatNumber, sanitizeNumber } from 'utils/helpers';
+import {
+  cn,
+  formatNumber,
+  roundSearchParam,
+  sanitizeNumber,
+} from 'utils/helpers';
 import { decimalNumberValidationRegex } from 'utils/inputsValidations';
 import { MarketPriceIndication } from 'components/strategies/marketPriceIndication';
 import { marketPricePercent } from 'components/strategies/marketPriceIndication/useMarketIndication';
@@ -35,6 +40,7 @@ export const InputLimit: FC<InputLimitProps> = ({
   ignoreMarketPriceWarning = false,
   required,
 }) => {
+  const [localPrice, setLocalPrice] = useState(roundSearchParam(price));
   const inputId = useId();
   const { marketPrice } = useMarketPrice({ base, quote });
   const marketPercent = marketPricePercent(price, marketPrice);
@@ -52,10 +58,6 @@ export const InputLimit: FC<InputLimitProps> = ({
   const displayWarnings = [...warnings, noMarketPrice].filter((v) => !!v);
   const showWarning = !displayError && !!displayWarnings?.length;
 
-  const changePrice = (e: ChangeEvent<HTMLInputElement>) => {
-    setPrice(sanitizeNumber(e.target.value));
-  };
-
   useEffect(() => {
     if (!price) return;
     if (displayError) {
@@ -66,9 +68,32 @@ export const InputLimit: FC<InputLimitProps> = ({
     }
   }, [displayError, buy, price]);
 
-  const formatPrice = (e: FocusEvent<HTMLInputElement>) => {
+  useEffect(() => {
+    if (document.activeElement !== document.getElementById(inputId)) {
+      setLocalPrice(roundSearchParam(price));
+    }
+  }, [inputId, price]);
+
+  const onFocus = (e: FocusEvent<HTMLInputElement>) => {
+    setLocalPrice(price);
+    e.target.select();
+  };
+
+  const onChange = (value: string) => {
+    const sanitized = sanitizeNumber(value);
+    setLocalPrice(sanitized);
+    setPrice(sanitized);
+  };
+
+  const onBlur = (e: FocusEvent<HTMLInputElement>) => {
     const formatted = formatNumber(e.target.value);
-    if (formatted !== e.target.value) setPrice(formatted);
+    setLocalPrice(roundSearchParam(formatted));
+    setPrice(formatted);
+  };
+
+  const setMarket = (e: MouseEvent<HTMLElement>) => {
+    e.stopPropagation();
+    onChange(marketPrice?.toString() ?? '');
   };
 
   return (
@@ -87,10 +112,10 @@ export const InputLimit: FC<InputLimitProps> = ({
             type="text"
             pattern={decimalNumberValidationRegex}
             inputMode="decimal"
-            value={price}
-            onChange={changePrice}
-            onFocus={(e) => e.target.select()}
-            onBlur={formatPrice}
+            value={localPrice}
+            onChange={(e) => onChange(e.target.value)}
+            onFocus={onFocus}
+            onBlur={onBlur}
             aria-label="Enter Price"
             placeholder="Enter Price"
             className={cn(
@@ -104,7 +129,7 @@ export const InputLimit: FC<InputLimitProps> = ({
             <button
               className="text-12 font-weight-500 text-primary hover:text-primary-light focus:text-primary-light active:text-primary"
               type="button"
-              onClick={() => setPrice(formatNumber(marketPrice.toString()))}
+              onClick={setMarket}
             >
               Use Market
             </button>