Merge branch 'feat/hooks-iframe-app-9' of https://github.com/cowproto…

…col/cowswap into feat/hooks-iframe-styling1

# Conflicts:
#	apps/cowswap-frontend/src/modules/hooksStore/pure/AddExternalHookForm/index.tsx

apps/cowswap-frontend/src/modules/hooksStore/hooks/useSetRecipientOverride.ts

@@ -1,16 +1,18 @@
-import { useEffect } from 'react'
+import { useLayoutEffect } from 'react'
 
 import { useSwapActionHandlers } from 'modules/swap/hooks/useSwapState'
+import { useIsHooksTradeType } from 'modules/trade'
 
 import { usePostHooksRecipientOverride } from './usePostHooksRecipientOverride'
 
 export function useSetRecipientOverride() {
   const { onChangeRecipient } = useSwapActionHandlers()
   const hookRecipientOverride = usePostHooksRecipientOverride()
+  const isHooksTradeType = useIsHooksTradeType()
 
-  useEffect(() => {
-    if (!hookRecipientOverride) return
+  useLayoutEffect(() => {
+    if (!hookRecipientOverride || !isHooksTradeType) return
 
     onChangeRecipient(hookRecipientOverride)
-  }, [hookRecipientOverride])
+  }, [hookRecipientOverride, isHooksTradeType])
 }

apps/cowswap-frontend/src/modules/hooksStore/pure/AddExternalHookForm/index.tsx

@@ -86,7 +86,7 @@ export function AddExternalHookForm({
             type="text"
             placeholder="Enter a hook dapp URL"
             value={input}
-            onChange={(e) => setInput(e.target.value)}
+            onChange={(e) => setInput(e.target.value?.trim())}
           />
 
           {/* Validation and Error Messages */}

apps/cowswap-frontend/src/modules/trade/hooks/useResetRecipient.ts

@@ -9,12 +9,14 @@ import { useTradeStateFromUrl } from './setupTradeState/useTradeStateFromUrl'
 import { useDerivedTradeState } from './useDerivedTradeState'
 
 import { useIsAlternativeOrderModalVisible } from '../state/alternativeOrder'
+import { useIsHooksTradeType } from './useIsHooksTradeType'
 
 export function useResetRecipient(onChangeRecipient: (recipient: string | null) => void): null {
   const isAlternativeOrderModalVisible = useIsAlternativeOrderModalVisible()
   const tradeState = useDerivedTradeState()
   const tradeStateFromUrl = useTradeStateFromUrl()
   const postHooksRecipientOverride = usePostHooksRecipientOverride()
+  const isHooksTradeType = useIsHooksTradeType()
   const hasTradeState = !!tradeStateFromUrl
   const { chainId } = useWalletInfo()
 
@@ -45,10 +47,12 @@ export function useResetRecipient(onChangeRecipient: (recipient: string | null)
    * Remove recipient override when its source hook was deleted
    */
   useEffect(() => {
-    if (!postHooksRecipientOverride && recipient === prevPostHooksRecipientOverride) {
+    const recipientOverrideWasRemoved = !postHooksRecipientOverride && recipient === prevPostHooksRecipientOverride
+
+    if (recipientOverrideWasRemoved || !isHooksTradeType) {
       onChangeRecipient(null)
     }
-  }, [recipient, postHooksRecipientOverride, prevPostHooksRecipientOverride, onChangeRecipient])
+  }, [recipient, isHooksTradeType, postHooksRecipientOverride, prevPostHooksRecipientOverride, onChangeRecipient])
 
   return null
 }