Merge branch 'feat/twap-fbh-warning' into feat/twap-fbh-warning-styled

.release-please-manifest.json

@@ -1,5 +1,5 @@
 {
-  "apps/cowswap-frontend": "1.93.1",
+  "apps/cowswap-frontend": "1.93.2",
   "apps/explorer": "2.38.0",
   "libs/permit-utils": "0.5.0",
   "libs/widget-lib": "0.18.0",

apps/cowswap-frontend/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [1.93.2](https://github.com/cowprotocol/cowswap/compare/cowswap-v1.93.1...cowswap-v1.93.2) (2024-12-13)
+
+
+### Bug Fixes
+
+* **twap:** cache fb handler verification for 10min ([#5200](https://github.com/cowprotocol/cowswap/issues/5200)) ([c09f073](https://github.com/cowprotocol/cowswap/commit/c09f07338868654a89ba570987a8bc9bec59141c))
+
 ## [1.93.1](https://github.com/cowprotocol/cowswap/compare/cowswap-v1.93.0...cowswap-v1.93.1) (2024-12-12)
 
 

apps/cowswap-frontend/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/cowswap",
-  "version": "1.93.1",
+  "version": "1.93.2",
   "description": "CoW Swap",
   "main": "index.js",
   "author": "",

apps/cowswap-frontend/src/modules/twap/services/verifyExtensibleFallback.ts

@@ -25,12 +25,14 @@ export async function verifyExtensibleFallback(
   try {
     const domainVerifier = await signatureVerifierContract.callStatic.domainVerifiers(safeAddress, domainSeparator)
 
+    console.log('FALLBACK HANDLER CHECKED, domainVerifier: ', domainVerifier)
     if (domainVerifier.toLowerCase() === composableCowContractAddress.toLowerCase()) {
       return ExtensibleFallbackVerification.HAS_DOMAIN_VERIFIER
     }
 
     return ExtensibleFallbackVerification.HAS_EXTENSIBLE_FALLBACK
-  } catch {
+  } catch (e) {
+    console.log('FALLBACK HANDLER CHECKED, error: ', e)
     return ExtensibleFallbackVerification.HAS_NOTHING
   }
 }

apps/cowswap-frontend/src/modules/twap/updaters/FallbackHandlerVerificationUpdater.tsx

@@ -3,33 +3,41 @@ import { useEffect } from 'react'
 
 import { useWalletInfo } from '@cowprotocol/wallet'
 
+import ms from 'ms.macro'
 import { useAsyncMemo } from 'use-async-memo'
 
 import { useExtensibleFallbackContext } from '../hooks/useExtensibleFallbackContext'
 import { useFallbackHandlerVerification } from '../hooks/useFallbackHandlerVerification'
 import { ExtensibleFallbackVerification, verifyExtensibleFallback } from '../services/verifyExtensibleFallback'
 import { updateFallbackHandlerVerificationAtom } from '../state/fallbackHandlerVerificationAtom'
 
+const FB_CACHE_TIME = ms`10m`
+const FB_UPDATE_TIME_KEY = 'fallbackHandlerUpdateTime'
+
 export function FallbackHandlerVerificationUpdater() {
   const { account } = useWalletInfo()
   const update = useSetAtom(updateFallbackHandlerVerificationAtom)
   const verification = useFallbackHandlerVerification()
   const isFallbackHandlerRequired = verification !== ExtensibleFallbackVerification.HAS_DOMAIN_VERIFIER
 
+  const fallbackHandlerUpdateTime = localStorage.getItem(FB_UPDATE_TIME_KEY)
+  const isCacheOutdated = !fallbackHandlerUpdateTime || Date.now() - +fallbackHandlerUpdateTime > FB_CACHE_TIME
+
   const extensibleFallbackContext = useExtensibleFallbackContext()
   const fallbackHandlerVerification = useAsyncMemo(
     () =>
-      extensibleFallbackContext && isFallbackHandlerRequired
+      extensibleFallbackContext && (isFallbackHandlerRequired || isCacheOutdated)
         ? verifyExtensibleFallback(extensibleFallbackContext)
         : null,
-    [isFallbackHandlerRequired, extensibleFallbackContext],
-    null
+    [isFallbackHandlerRequired, isCacheOutdated, extensibleFallbackContext],
+    null,
   )
 
   useEffect(() => {
     if (!account || fallbackHandlerVerification === null) return
 
     update({ [account]: fallbackHandlerVerification })
+    localStorage.setItem(FB_UPDATE_TIME_KEY, Date.now().toString())
   }, [fallbackHandlerVerification, update, account])
 
   return null

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,
@@ -31,20 +33,19 @@ export default function AdvancedOrdersPage() {
   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 && allEmulatedOrders.length > 0 && <SetupFallbackHandlerWarning />}
+          {isFallbackHandlerRequired && pendingOrders.length > 0 && <SetupFallbackHandlerWarning />}
           <AdvancedOrdersWidget
             updaters={<TwapUpdaters />}
             confirmContent={<TwapConfirmModal />}