[3] feat(twap): add generic trade form validation to TWAP

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) {

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])
+}

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'

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 <PrimaryActionButton state={localFormValidation} context={primaryActionContext} />
+  }
+
+  return (
+    <TradeFormButtons
+      doTradeText="Place TWAP order"
+      confirmText="Review TWAP order"
+      validation={primaryFormValidation}
+      context={tradeFormButtonContext}
+      // TODO: bind isExpertMode to settings
+      isExpertMode={false}
+      isDisabled={false}
+    />
+  )
+}

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() {
         </TradeTextBox>
       </styledEl.DeadlineRow>
 
-      <PrimaryActionButton state={formState} context={primaryActionContext} />
+      <ActionButtons />
     </>
   )
 }

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()
 

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
 }

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<TwapFormState, (context: PrimaryActionButtonContext) => JSX.Element> = {
-  [TwapFormState.LOADING]: () => (
+  [TwapFormState.LOADING_SAFE_INFO]: () => (
     <ButtonPrimary disabled={true} buttonSize={ButtonSize.BIG}>
       Loading...
     </ButtonPrimary>

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*/}
+      <TradeFormValidationUpdater isExpertMode={false} />
+
       {/*TODO: add isUnlocked value*/}
       <styledEl.PageWrapper isUnlocked={true}>
         <styledEl.PrimaryWrapper>