fix(twap): display a warning when fbh was changed after twap order (#5202)

* fix(twap): display a warning when fbh was changed after twap order

* chore: add loading state

* chore: fix pendingOrders

* feat: style TWAP warning banner (#5204)

* feat: style TWAP warning banner

* feat: fix typo and change orientation of banner

* fix: persist pendingTxHash in atom

---------

Co-authored-by: fairlight <[email protected]>

Author: shoom3301

apps/cowswap-frontend/src/modules/ordersTable/containers/OrdersTableWidget/index.tsx

@@ -1,5 +1,5 @@
 import { useAtomValue, useSetAtom } from 'jotai'
-import { useCallback, useEffect, useMemo } from 'react'
+import { ReactNode, useCallback, useEffect, useMemo } from 'react'
 
 import { useTokensAllowances, useTokensBalances } from '@cowprotocol/balances-and-allowances'
 import { useIsSafeViaWc, useWalletDetails, useWalletInfo } from '@cowprotocol/wallet'
@@ -60,12 +60,14 @@ interface OrdersTableWidgetProps {
   displayOrdersOnlyForSafeApp: boolean
   orders: Order[]
   orderType: TabOrderTypes
+  children?: ReactNode
 }
 
 export function OrdersTableWidget({
   orders: allOrders,
   orderType,
   displayOrdersOnlyForSafeApp,
+  children,
 }: OrdersTableWidgetProps) {
   const { chainId, account } = useWalletInfo()
   const location = useLocation()
@@ -122,14 +124,14 @@ export function OrdersTableWidget({
     (orders: ParsedOrder[]) => {
       updateOrdersToCancel(orders)
     },
-    [updateOrdersToCancel]
+    [updateOrdersToCancel],
   )
 
   const toggleOrderForCancellation = useCallback(
     (order: ParsedOrder) => {
       updateOrdersToCancel(toggleOrderInCancellationList(ordersToCancel, order))
     },
-    [ordersToCancel, updateOrdersToCancel]
+    [ordersToCancel, updateOrdersToCancel],
   )
 
   const getShowCancellationModal = useCallback(
@@ -138,7 +140,7 @@ export function OrdersTableWidget({
 
       return rawOrder ? cancelOrder(rawOrder) : null
     },
-    [allOrders, cancelOrder]
+    [allOrders, cancelOrder],
   )
 
   const getAlternativeOrderModalContext = useGetAlternativeOrderModalContextCallback()
@@ -167,6 +169,7 @@ export function OrdersTableWidget({
     <>
       <PendingPermitUpdater orders={ordersToCheckPendingPermit} />
       <ContentWrapper>
+        {children}
         <OrdersTableContainer
           chainId={chainId}
           tabs={tabs}

apps/cowswap-frontend/src/modules/twap/containers/SetupFallbackHandlerWarning/index.tsx

@@ -0,0 +1,133 @@
+import { atom, useAtom } from 'jotai'
+import { useSetAtom } from 'jotai/index'
+import { useEffect } from 'react'
+
+import { usePrevious } from '@cowprotocol/common-hooks'
+import { ButtonPrimary, InlineBanner, Loader, BannerOrientation, UI } from '@cowprotocol/ui'
+import { useWalletInfo } from '@cowprotocol/wallet'
+
+import styled from 'styled-components/macro'
+
+import { useAllTransactions } from 'legacy/state/enhancedTransactions/hooks'
+
+import { useExtensibleFallbackContext } from '../../hooks/useExtensibleFallbackContext'
+import { useSetupFallbackHandler } from '../../hooks/useSetupFallbackHandler'
+import { verifyExtensibleFallback } from '../../services/verifyExtensibleFallback'
+import { updateFallbackHandlerVerificationAtom } from '../../state/fallbackHandlerVerificationAtom'
+
+const Banner = styled(InlineBanner)`
+  /* TODO: Make all these part of the InlineBanner props */
+  position: relative;
+  font-size: 15px;
+
+  > span {
+    gap: 20px;
+  }
+
+  > span > span {
+    gap: 20px;
+  }
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(${UI.COLOR_PAPER});
+    z-index: -1;
+    border-radius: inherit;
+  }
+
+  &::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: inherit;
+    z-index: -1;
+    border-radius: inherit;
+  }
+`
+
+const ActionButton = styled(ButtonPrimary)`
+  display: inline-block;
+  width: 100%;
+  font-size: 16px;
+  padding: 16px 24px;
+  min-height: auto;
+`
+
+const pendingTxHashAtom = atom<string | null>(null)
+
+export function SetupFallbackHandlerWarning() {
+  const [pendingTxHash, setPendingTxHash] = useAtom(pendingTxHashAtom)
+
+  const { account } = useWalletInfo()
+  const setupFallbackHandler = useSetupFallbackHandler()
+  const isTransactionPending = useIsTransactionPending(pendingTxHash)
+  const prevIsTransactionPending = usePrevious(isTransactionPending)
+  const txWasMined = prevIsTransactionPending === true && isTransactionPending === false
+
+  const updateFallbackHandlerVerification = useSetAtom(updateFallbackHandlerVerificationAtom)
+
+  const extensibleFallbackContext = useExtensibleFallbackContext()
+
+  const handleUpdateClick = async () => {
+    const txHash = await setupFallbackHandler()
+
+    if (txHash) {
+      setPendingTxHash(txHash)
+    }
+  }
+
+  useEffect(() => {
+    if (!txWasMined) return
+
+    setPendingTxHash(null)
+
+    if (!extensibleFallbackContext || !account) return
+
+    verifyExtensibleFallback(extensibleFallbackContext).then((result) => {
+      updateFallbackHandlerVerification({ [account]: result })
+    })
+  }, [txWasMined, account, extensibleFallbackContext, updateFallbackHandlerVerification, setPendingTxHash])
+
+  return (
+    <Banner
+      bannerType="danger"
+      backDropBlur
+      orientation={BannerOrientation.Vertical}
+      iconSize={46}
+      noWrapContent
+      padding="20px"
+    >
+      <span>
+        <p>
+          Your Safe fallback handler was changed after TWAP orders were placed. All open TWAP orders are not getting
+          created because of that. Please, update the fallback handler in order to make the orders work again.
+        </p>
+        <ActionButton disabled={isTransactionPending} onClick={handleUpdateClick}>
+          {isTransactionPending ? <Loader /> : 'Update fallback handler'}
+        </ActionButton>
+      </span>
+    </Banner>
+  )
+}
+
+function useIsTransactionPending(txHash: string | null): boolean {
+  const allTransactions = useAllTransactions()
+
+  if (!txHash) return false
+
+  return Object.keys(allTransactions).some((hash) => {
+    const tx = allTransactions[hash]
+
+    if (!tx || tx.receipt || tx.replacementType || tx.errorMessage) return false
+
+    return tx.hash === txHash
+  })
+}

apps/cowswap-frontend/src/modules/twap/hooks/useSetupFallbackHandler.ts

@@ -0,0 +1,26 @@
+import { useSafeAppsSdk } from '@cowprotocol/wallet'
+
+import { useExtensibleFallbackContext } from './useExtensibleFallbackContext'
+
+import { useTransactionAdder } from '../../../legacy/state/enhancedTransactions/hooks'
+import { extensibleFallbackSetupTxs } from '../services/extensibleFallbackSetupTxs'
+
+export function useSetupFallbackHandler() {
+  const safeAppsSdk = useSafeAppsSdk()
+  const extensibleFallbackContext = useExtensibleFallbackContext()
+  const addTransaction = useTransactionAdder()
+
+  return async () => {
+    if (!safeAppsSdk || !extensibleFallbackContext) return
+
+    const fallbackSetupTxs = await extensibleFallbackSetupTxs(extensibleFallbackContext)
+    const { safeTxHash } = await safeAppsSdk.txs.send({ txs: fallbackSetupTxs })
+
+    addTransaction({
+      hash: safeTxHash,
+      summary: 'Setup TWAP fallback handler',
+    })
+
+    return safeTxHash
+  }
+}

apps/cowswap-frontend/src/modules/twap/index.ts

@@ -10,5 +10,7 @@ export * from './hooks/useCancelTwapOrder'
 export * from './hooks/useMapTwapCurrencyInfo'
 export * from './hooks/useTwapFormState'
 export * from './hooks/useTwapSlippage'
+export { useIsFallbackHandlerRequired } from './hooks/useFallbackHandlerVerification'
+export { SetupFallbackHandlerWarning } from './containers/SetupFallbackHandlerWarning'
 export * from './updaters/index'
 export * from './types'

apps/cowswap-frontend/src/pages/AdvancedOrders/index.tsx

@@ -1,5 +1,7 @@
 import { useAtomValue } from 'jotai'
 
+import { PENDING_STATES } from 'legacy/state/orders/actions'
+
 import {
   advancedOrdersAtom,
   AdvancedOrdersWidget,
@@ -10,38 +12,40 @@ import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { OrdersTableWidget, TabOrderTypes } from 'modules/ordersTable'
 import * as styledEl from 'modules/trade/pure/TradePageLayout'
 import {
+  SetupFallbackHandlerWarning,
   TwapConfirmModal,
   TwapFormWidget,
   TwapUpdaters,
   useAllEmulatedOrders,
+  useIsFallbackHandlerRequired,
   useMapTwapCurrencyInfo,
   useTwapFormState,
   useTwapSlippage,
 } from 'modules/twap'
 import { TwapFormState } from 'modules/twap/pure/PrimaryActionButton/getTwapFormState'
 
-
 export default function AdvancedOrdersPage() {
   const { isUnlocked } = useAtomValue(advancedOrdersAtom)
 
   const allEmulatedOrders = useAllEmulatedOrders()
+  const isFallbackHandlerRequired = useIsFallbackHandlerRequired()
 
   const twapFormValidation = useTwapFormState()
   const twapSlippage = useTwapSlippage()
   const mapTwapCurrencyInfo = useMapTwapCurrencyInfo()
+  const { hideOrdersTable } = useInjectedWidgetParams()
 
   const disablePriceImpact = twapFormValidation === TwapFormState.SELL_AMOUNT_TOO_SMALL
-
   const advancedWidgetParams = { disablePriceImpact }
-
-  const { hideOrdersTable } = useInjectedWidgetParams()
+  const pendingOrders = allEmulatedOrders.filter((order) => PENDING_STATES.includes(order.status))
 
   return (
     <>
       <FillAdvancedOrdersDerivedStateUpdater slippage={twapSlippage} />
       <SetupAdvancedOrderAmountsFromUrlUpdater />
       <styledEl.PageWrapper isUnlocked={isUnlocked}>
         <styledEl.PrimaryWrapper>
+          {isFallbackHandlerRequired && pendingOrders.length > 0 && <SetupFallbackHandlerWarning />}
           <AdvancedOrdersWidget
             updaters={<TwapUpdaters />}
             confirmContent={<TwapConfirmModal />}