feat(twap): order defaults (#2685)

* refactor: upper case constants * feat: set default number of parts to 2 * fix: when input is empty or < min, set min * chore: run validation onBlur and allow anything to be input * chore: use 0 as placeholder instead of 0.0 * fix: remove limit of max 100 parts, but limits it to 100_000
cowprotocol · Jul 5, 2023 · fe875e1 · fe875e1
1 parent 10ab4c0
commit fe875e1
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 22 deletions.
diff --git a/src/modules/trade/pure/TradeNumberInput/index.tsx b/src/modules/trade/pure/TradeNumberInput/index.tsx
@@ -15,27 +15,27 @@ export interface TradeNumberInputProps extends TradeWidgetFieldProps {
 }
 
 export function TradeNumberInput(props: TradeNumberInputProps) {
-  const { value, suffix, onUserInput, placeholder, decimalsPlaces = 0, min, max = 0 } = props
+  const { value, suffix, onUserInput, placeholder = '0', decimalsPlaces = 0, min, max = 100_000 } = props
 
   const [displayedValue, setDisplayedValue] = useState(value === null ? '' : value.toString())
 
-  const onChange = useCallback(
+  const validateInput = useCallback(
     (newValue: string) => {
       const hasDot = newValue.includes('.')
       const [quotient, decimals] = (newValue || '').split('.')
       const filteredDecimals = decimalsPlaces && hasDot ? `.${decimals.slice(0, decimalsPlaces)}` : ''
       const adjustedValue = quotient + filteredDecimals
       const parsedValue = adjustedValue ? parseFloat(adjustedValue) : null
 
-      if (parsedValue && parsedValue > max) {
+      if (parsedValue && max !== 0 && parsedValue > max) {
         setDisplayedValue(max.toString())
         onUserInput(max)
         return
       }
 
-      if (parsedValue && min && parsedValue < min) {
-        setDisplayedValue(min?.toString() || '')
-        onUserInput(min || null)
+      if (min && (!parsedValue || parsedValue < min)) {
+        setDisplayedValue(min.toString())
+        onUserInput(min)
         return
       }
 
@@ -50,14 +50,19 @@ export function TradeNumberInput(props: TradeNumberInputProps) {
 
   // Initial setup of value
   useEffect(() => {
-    onChange(value ? value.toString() : '')
+    validateInput(value ? value.toString() : '')
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [])
 
   return (
     <TradeWidgetField {...props}>
       <>
-        <NumericalInput placeholder={placeholder} value={displayedValue} onUserInput={onChange} />
+        <NumericalInput
+          placeholder={placeholder}
+          value={displayedValue}
+          onBlur={(e) => validateInput(e.target.value)}
+          onUserInput={(value) => setDisplayedValue(value)}
+        />
         {suffix && <Suffix>{suffix}</Suffix>}
       </>
     </TradeWidgetField>

diff --git a/src/modules/twap/const.ts b/src/modules/twap/const.ts
@@ -11,14 +11,14 @@ export const DEFAULT_TWAP_SLIPPAGE = new Percent(10, 100) // 10%
 
 export type OrderDeadline = { label: string; value: number }
 
-export const defaultNumOfParts = 1
+export const DEFAULT_NUM_OF_PARTS = 2
 
-export const defaultOrderDeadline: OrderDeadline = { label: '1 Hour', value: ms`1 hour` }
+export const DEFAULT_ORDER_DEADLINE: OrderDeadline = { label: '1 Hour', value: ms`1 hour` }
 
-export const orderDeadlines: OrderDeadline[] = [
+export const ORDER_DEADLINES: OrderDeadline[] = [
   { label: '5 Minutes', value: ms`5m` },
   { label: '30 Minutes', value: ms`30m` },
-  defaultOrderDeadline,
+  DEFAULT_ORDER_DEADLINE,
   { label: '1 Day', value: ms`1d` },
   { label: '3 Days', value: ms`3d` },
   { label: '7 Days', value: ms`7d` },

diff --git a/src/modules/twap/containers/TwapFormWidget/index.tsx b/src/modules/twap/containers/TwapFormWidget/index.tsx
@@ -19,7 +19,7 @@ import { useRateInfoParams } from 'common/hooks/useRateInfoParams'
 import * as styledEl from './styled'
 import { AMOUNT_PARTS_LABELS, LABELS_TOOLTIPS } from './tooltips'
 
-import { DEFAULT_TWAP_SLIPPAGE, defaultNumOfParts, orderDeadlines } from '../../const'
+import { DEFAULT_NUM_OF_PARTS, DEFAULT_TWAP_SLIPPAGE, ORDER_DEADLINES } from '../../const'
 import { useIsFallbackHandlerRequired } from '../../hooks/useFallbackHandlerVerification'
 import { useTwapFormState } from '../../hooks/useTwapFormState'
 import { AmountParts } from '../../pure/AmountParts'
@@ -99,10 +99,9 @@ export function TwapFormWidget() {
         <TradeNumberInput
           value={numberOfPartsValue}
           onUserInput={(value: number | null) =>
-            updateSettingsState({ numberOfPartsValue: value || defaultNumOfParts })
+            updateSettingsState({ numberOfPartsValue: value || DEFAULT_NUM_OF_PARTS })
           }
-          min={defaultNumOfParts}
-          max={100}
+          min={DEFAULT_NUM_OF_PARTS}
           label={LABELS_TOOLTIPS.numberOfParts.label}
           tooltip={renderTooltip(LABELS_TOOLTIPS.numberOfParts.tooltip)}
         />
@@ -123,7 +122,7 @@ export function TwapFormWidget() {
       <styledEl.Row>
         <DeadlineSelector
           deadline={deadlineState}
-          items={orderDeadlines}
+          items={ORDER_DEADLINES}
           setDeadline={(value) => updateSettingsState(value)}
           label={LABELS_TOOLTIPS.totalDuration.label}
           tooltip={renderTooltip(LABELS_TOOLTIPS.totalDuration.tooltip, {

diff --git a/src/modules/twap/state/partsStateAtom.ts b/src/modules/twap/state/partsStateAtom.ts
@@ -5,7 +5,7 @@ import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { twapOrdersSettingsAtom } from './twapOrdersSettingsAtom'
 
 import { advancedOrdersDerivedStateAtom } from '../../advancedOrders'
-import { defaultNumOfParts } from '../const'
+import { DEFAULT_NUM_OF_PARTS } from '../const'
 
 export interface PartsState {
   numberOfPartsValue: number | null
@@ -20,7 +20,7 @@ export const partsStateAtom = atom<PartsState>((get) => {
   const { inputCurrencyAmount, outputCurrencyAmount, inputCurrencyFiatAmount, outputCurrencyFiatAmount } =
     get(advancedOrdersDerivedStateAtom)
 
-  const divider = numberOfPartsValue || defaultNumOfParts
+  const divider = numberOfPartsValue || DEFAULT_NUM_OF_PARTS
 
   return {
     numberOfPartsValue,

diff --git a/src/modules/twap/state/twapOrdersSettingsAtom.ts b/src/modules/twap/state/twapOrdersSettingsAtom.ts
@@ -5,7 +5,7 @@ import { Percent } from '@uniswap/sdk-core'
 
 import { Milliseconds } from 'types'
 
-import { DEFAULT_TWAP_SLIPPAGE, defaultNumOfParts, defaultOrderDeadline } from '../const'
+import { DEFAULT_NUM_OF_PARTS, DEFAULT_ORDER_DEADLINE, DEFAULT_TWAP_SLIPPAGE } from '../const'
 
 export interface TwapOrdersDeadline {
   readonly isCustomDeadline: boolean
@@ -31,9 +31,9 @@ export const defaultCustomDeadline: TwapOrdersDeadline['customDeadline'] = {
 export const defaultTwapOrdersSettings: TwapOrdersSettingsState = {
   // deadline
   isCustomDeadline: false,
-  deadline: defaultOrderDeadline.value,
+  deadline: DEFAULT_ORDER_DEADLINE.value,
   customDeadline: defaultCustomDeadline,
-  numberOfPartsValue: defaultNumOfParts,
+  numberOfPartsValue: DEFAULT_NUM_OF_PARTS,
   // null = auto
   slippageValue: null,
   isFallbackHandlerSetupAccepted: false,