From fe875e188c27e062e75d988a19a8c5557c73cbe1 Mon Sep 17 00:00:00 2001 From: Leandro Date: Wed, 5 Jul 2023 09:03:29 -0700 Subject: [PATCH] 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 --- .../trade/pure/TradeNumberInput/index.tsx | 21 ++++++++++++------- src/modules/twap/const.ts | 8 +++---- .../twap/containers/TwapFormWidget/index.tsx | 9 ++++---- src/modules/twap/state/partsStateAtom.ts | 4 ++-- .../twap/state/twapOrdersSettingsAtom.ts | 6 +++--- 5 files changed, 26 insertions(+), 22 deletions(-) diff --git a/src/modules/trade/pure/TradeNumberInput/index.tsx b/src/modules/trade/pure/TradeNumberInput/index.tsx index 820f89606f..4f7bc2751f 100644 --- a/src/modules/trade/pure/TradeNumberInput/index.tsx +++ b/src/modules/trade/pure/TradeNumberInput/index.tsx @@ -15,11 +15,11 @@ 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('.') @@ -27,15 +27,15 @@ export function TradeNumberInput(props: TradeNumberInputProps) { 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 ( <> - + validateInput(e.target.value)} + onUserInput={(value) => setDisplayedValue(value)} + /> {suffix && {suffix}} diff --git a/src/modules/twap/const.ts b/src/modules/twap/const.ts index 539b1cba69..84470221c1 100644 --- 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 index 9e1286c8c3..9f4f45be24 100644 --- 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() { - 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() { 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 index aa31c57e91..3610c133e3 100644 --- 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((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 index 1b0088a55f..c3f002368d 100644 --- 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,