diff --git a/src/modules/limitOrders/containers/TradeButtons/index.tsx b/src/modules/limitOrders/containers/TradeButtons/index.tsx index ac904483a5..3396890436 100644 --- a/src/modules/limitOrders/containers/TradeButtons/index.tsx +++ b/src/modules/limitOrders/containers/TradeButtons/index.tsx @@ -4,22 +4,18 @@ import React from 'react' import { Trans } from '@lingui/macro' import { PriceImpact } from 'legacy/hooks/usePriceImpact' -import { useToggleWalletModal } from 'legacy/state/application/hooks' import { useHandleOrderPlacement } from 'modules/limitOrders/hooks/useHandleOrderPlacement' -import { useLimitOrdersDerivedState } from 'modules/limitOrders/hooks/useLimitOrdersDerivedState' import { useLimitOrdersWarningsAccepted } from 'modules/limitOrders/hooks/useLimitOrdersWarningsAccepted' import { TradeFlowContext } from 'modules/limitOrders/services/types' import { limitOrdersSettingsAtom } from 'modules/limitOrders/state/limitOrdersSettingsAtom' -import { useTradeConfirmActions, useWrapNativeFlow } from 'modules/trade' +import { useTradeConfirmActions } from 'modules/trade' import { TradeFormButtons, useGetTradeFormValidation, + useTradeFormButtonContext, TradeFormBlankButton, - TradeFormButtonContext, } from 'modules/tradeFormValidation' -import { useTradeQuote } from 'modules/tradeQuote' -import { useWalletDetails } from 'modules/wallet' import { limitOrdersTradeButtonsMap } from './limitOrdersTradeButtonsMap' @@ -36,32 +32,16 @@ export function TradeButtons(props: TradeButtonsProps) { const settingsState = useAtomValue(limitOrdersSettingsAtom) const localFormValidation = useLimitOrdersFormState() const primaryFormValidation = useGetTradeFormValidation() - const tradeState = useLimitOrdersDerivedState() - const toggleWalletModal = useToggleWalletModal() - const quote = useTradeQuote() const warningsAccepted = useLimitOrdersWarningsAccepted(false) - const { isSupportedWallet } = useWalletDetails() const tradeConfirmActions = useTradeConfirmActions() - const wrapNativeFlow = useWrapNativeFlow() const handleTrade = useHandleOrderPlacement(tradeContext, priceImpact, settingsState, tradeConfirmActions) - + const confirmTrade = tradeConfirmActions.onOpen const isExpertMode = settingsState.expertMode - const tradeFormButtonContext: TradeFormButtonContext = { - defaultText: 'Limit order', - derivedState: tradeState, - doTrade: handleTrade, - quote, - isSupportedWallet, - wrapNativeFlow, - confirmTrade() { - tradeConfirmActions.onOpen() - }, - connectWallet() { - toggleWalletModal() - }, - } + const tradeFormButtonContext = useTradeFormButtonContext('Limit order', { doTrade: handleTrade, confirmTrade }) + + if (!tradeFormButtonContext) return null // Display local form validation errors only when there are no primary errors if (!primaryFormValidation && localFormValidation) { diff --git a/src/modules/tradeFormValidation/hooks/useTradeFormButtonContext.ts b/src/modules/tradeFormValidation/hooks/useTradeFormButtonContext.ts new file mode 100644 index 0000000000..f39622e706 --- /dev/null +++ b/src/modules/tradeFormValidation/hooks/useTradeFormButtonContext.ts @@ -0,0 +1,42 @@ +import { useMemo } from 'react' + +import { useToggleWalletModal } from 'legacy/state/application/hooks' + +import { useWrapNativeFlow } from 'modules/trade' +import { useDerivedTradeState } from 'modules/trade/hooks/useDerivedTradeState' +import { useTradeQuote } from 'modules/tradeQuote' +import { useWalletDetails } from 'modules/wallet' + +import { TradeFormButtonContext } from '../types' + +interface TradeFormCallbacks { + doTrade(): void + confirmTrade(): void +} + +export function useTradeFormButtonContext( + defaultText: string, + callbacks: TradeFormCallbacks +): TradeFormButtonContext | null { + const { state: derivedState } = useDerivedTradeState() + const wrapNativeFlow = useWrapNativeFlow() + const { isSupportedWallet } = useWalletDetails() + const quote = useTradeQuote() + const toggleWalletModal = useToggleWalletModal() + + return useMemo(() => { + if (!derivedState) return null + + return { + defaultText, + derivedState, + quote, + isSupportedWallet, + ...callbacks, + wrapNativeFlow, + connectWallet() { + toggleWalletModal() + }, + } + }, [defaultText, derivedState, quote, isSupportedWallet, callbacks, wrapNativeFlow, toggleWalletModal]) +} diff --git a/src/modules/tradeFormValidation/index.ts b/src/modules/tradeFormValidation/index.ts index ecf9e5dbf6..c76df4d32a 100644 --- a/src/modules/tradeFormValidation/index.ts +++ b/src/modules/tradeFormValidation/index.ts @@ -1,5 +1,6 @@ export * from './updaters/TradeFormValidationUpdater' export * from './hooks/useGetTradeFormValidation' +export * from './hooks/useTradeFormButtonContext' export * from './pure/TradeFormButtons' export * from './pure/TradeFormBlankButton' export * from './types' diff --git a/src/modules/twap/containers/ActionButtons/index.tsx b/src/modules/twap/containers/ActionButtons/index.tsx new file mode 100644 index 0000000000..eedc179172 --- /dev/null +++ b/src/modules/twap/containers/ActionButtons/index.tsx @@ -0,0 +1,43 @@ +import React from 'react' + +import { useTradeConfirmActions } from 'modules/trade' +import { TradeFormButtons, useGetTradeFormValidation } from 'modules/tradeFormValidation' +import { useTradeFormButtonContext } from 'modules/tradeFormValidation' + +import { useSetupFallbackHandler } from '../../hooks/useSetupFallbackHandler' +import { useTwapFormState } from '../../hooks/useTwapFormState' +import { PrimaryActionButton } from '../../pure/PrimaryActionButton' + +export function ActionButtons() { + const setFallbackHandler = useSetupFallbackHandler() + const tradeConfirmActions = useTradeConfirmActions() + const localFormValidation = useTwapFormState() + const primaryFormValidation = useGetTradeFormValidation() + + const primaryActionContext = { + setFallbackHandler, + openConfirmModal: tradeConfirmActions.onOpen, + } + + const confirmTrade = tradeConfirmActions.onOpen + + const tradeFormButtonContext = useTradeFormButtonContext('TWAP order', { doTrade: confirmTrade, confirmTrade }) + + if (!tradeFormButtonContext) return null + + if (!primaryFormValidation && localFormValidation) { + return + } + + return ( + + ) +} diff --git a/src/modules/twap/containers/TwapFormWidget/index.tsx b/src/modules/twap/containers/TwapFormWidget/index.tsx index 0376473097..e7d3837013 100644 --- a/src/modules/twap/containers/TwapFormWidget/index.tsx +++ b/src/modules/twap/containers/TwapFormWidget/index.tsx @@ -7,7 +7,6 @@ import { useAdvancedOrdersRawState, useUpdateAdvancedOrdersRawState, } from 'modules/advancedOrders' -import { useTradeConfirmActions } from 'modules/trade' import { useIsWrapOrUnwrap } from 'modules/trade/hooks/useIsWrapOrUnwrap' import { TradeNumberInput } from 'modules/trade/pure/TradeNumberInput' import { TradeTextBox } from 'modules/trade/pure/TradeTextBox' @@ -18,15 +17,13 @@ import { useRateInfoParams } from 'common/hooks/useRateInfoParams' import * as styledEl from './styled' import { DEFAULT_TWAP_SLIPPAGE, orderDeadlines, defaultNumOfParts } from '../../const' -import { useSetupFallbackHandler } from '../../hooks/useSetupFallbackHandler' -import { useTwapFormState } from '../../hooks/useTwapFormState' import { AmountParts } from '../../pure/AmountParts' import { DeadlineSelector } from '../../pure/DeadlineSelector' -import { PrimaryActionButton } from '../../pure/PrimaryActionButton' import { partsStateAtom } from '../../state/partsStateAtom' import { twapTimeIntervalAtom } from '../../state/twapOrderAtom' import { twapOrdersSettingsAtom, updateTwapOrdersSettingsAtom } from '../../state/twapOrdersSettingsAtom' import { deadlinePartsDisplay } from '../../utils/deadlinePartsDisplay' +import { ActionButtons } from '../ActionButtons' import { TwapConfirmModal } from '../TwapConfirmModal' export function TwapFormWidget() { @@ -42,17 +39,8 @@ export function TwapFormWidget() { const updateSettingsState = useUpdateAtom(updateTwapOrdersSettingsAtom) const isWrapOrUnwrap = useIsWrapOrUnwrap() - const setFallbackHandler = useSetupFallbackHandler() - const tradeConfirmActions = useTradeConfirmActions() - const formState = useTwapFormState() - const rateInfoParams = useRateInfoParams(inputCurrencyAmount, outputCurrencyAmount) - const primaryActionContext = { - setFallbackHandler, - openConfirmModal: tradeConfirmActions.onOpen, - } - const deadlineState = { deadline, customDeadline, @@ -112,7 +100,7 @@ export function TwapFormWidget() { - + ) } diff --git a/src/modules/twap/hooks/useTwapFormState.ts b/src/modules/twap/hooks/useTwapFormState.ts index 0fd0de07bd..32c7b2e0d3 100644 --- a/src/modules/twap/hooks/useTwapFormState.ts +++ b/src/modules/twap/hooks/useTwapFormState.ts @@ -10,7 +10,7 @@ import { getTwapFormState, TwapFormState } from '../pure/PrimaryActionButton/get import { verifyExtensibleFallback } from '../services/verifyExtensibleFallback' import { twapOrderAtom } from '../state/twapOrderAtom' -export function useTwapFormState(): TwapFormState { +export function useTwapFormState(): TwapFormState | null { const isSafeApp = useIsSafeApp() const extensibleFallbackContext = useExtensibleFallbackContext() diff --git a/src/modules/twap/pure/PrimaryActionButton/getTwapFormState.tsx b/src/modules/twap/pure/PrimaryActionButton/getTwapFormState.tsx index b218392c70..0e598b2546 100644 --- a/src/modules/twap/pure/PrimaryActionButton/getTwapFormState.tsx +++ b/src/modules/twap/pure/PrimaryActionButton/getTwapFormState.tsx @@ -7,27 +7,26 @@ export interface TwapFormStateParams { twapOrder: TWAPOrder | null } -// TODO: compose with common TradeFormState export enum TwapFormState { - LOADING, + LOADING_SAFE_INFO, NOT_SAFE, ORDER_NOT_SPECIFIED, // TODO: reveal details NEED_FALLBACK_HANDLER, CAN_CREATE_ORDER, } -export function getTwapFormState(props: TwapFormStateParams): TwapFormState { +export function getTwapFormState(props: TwapFormStateParams): TwapFormState | null { const { isSafeApp, verification, twapOrder } = props if (!isSafeApp) return TwapFormState.NOT_SAFE - if (verification === null) return TwapFormState.LOADING + if (verification === null) return TwapFormState.LOADING_SAFE_INFO if (!twapOrder) return TwapFormState.ORDER_NOT_SPECIFIED - if (verification === ExtensibleFallbackVerification.HAS_DOMAIN_VERIFIER) { - return TwapFormState.CAN_CREATE_ORDER + if (verification !== ExtensibleFallbackVerification.HAS_DOMAIN_VERIFIER) { + return TwapFormState.NEED_FALLBACK_HANDLER } - return TwapFormState.NEED_FALLBACK_HANDLER + return null } diff --git a/src/modules/twap/pure/PrimaryActionButton/index.tsx b/src/modules/twap/pure/PrimaryActionButton/index.tsx index aaa03e4d88..d82a740e12 100644 --- a/src/modules/twap/pure/PrimaryActionButton/index.tsx +++ b/src/modules/twap/pure/PrimaryActionButton/index.tsx @@ -13,7 +13,7 @@ export interface PrimaryActionButtonContext { // TODO: extend with common trade widget states // TODO: set correct buttons text const buttonsMap: Record JSX.Element> = { - [TwapFormState.LOADING]: () => ( + [TwapFormState.LOADING_SAFE_INFO]: () => ( Loading... diff --git a/src/pages/AdvancedOrders/index.tsx b/src/pages/AdvancedOrders/index.tsx index f41721a83a..f948e744fa 100644 --- a/src/pages/AdvancedOrders/index.tsx +++ b/src/pages/AdvancedOrders/index.tsx @@ -1,10 +1,14 @@ import { AdvancedOrdersWidget } from 'modules/advancedOrders' import { OrdersTableWidget } from 'modules/ordersTable' import * as styledEl from 'modules/trade/pure/TradePageLayout' +import { TradeFormValidationUpdater } from 'modules/tradeFormValidation' export default function AdvancedOrdersPage() { return ( <> + {/*TODO: add isExpertMode value*/} + + {/*TODO: add isUnlocked value*/}