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*/}