diff --git a/apps/cowswap-frontend/src/modules/hooksStore/containers/HooksStoreWidget/index.tsx b/apps/cowswap-frontend/src/modules/hooksStore/containers/HooksStoreWidget/index.tsx
index a6e367146f..dce55edd8e 100644
--- a/apps/cowswap-frontend/src/modules/hooksStore/containers/HooksStoreWidget/index.tsx
+++ b/apps/cowswap-frontend/src/modules/hooksStore/containers/HooksStoreWidget/index.tsx
@@ -81,12 +81,20 @@ export function HooksStoreWidget() {
- setSelectedHookPosition('pre')} onEditHook={onPreHookEdit} />
+ setSelectedHookPosition('pre')}
+ onEditHook={onPreHookEdit}
+ hideTooltip={isHookSelectionOpen}
+ />
>
)
const BottomContent = shouldNotUseHooks ? null : (
- setSelectedHookPosition('post')} onEditHook={onPostHookEdit} />
+ setSelectedHookPosition('post')}
+ onEditHook={onPostHookEdit}
+ hideTooltip={isHookSelectionOpen}
+ />
)
return (
diff --git a/apps/cowswap-frontend/src/modules/hooksStore/containers/IframeDappContainer/index.tsx b/apps/cowswap-frontend/src/modules/hooksStore/containers/IframeDappContainer/index.tsx
index c463218c7b..ae103c6e1a 100644
--- a/apps/cowswap-frontend/src/modules/hooksStore/containers/IframeDappContainer/index.tsx
+++ b/apps/cowswap-frontend/src/modules/hooksStore/containers/IframeDappContainer/index.tsx
@@ -2,6 +2,7 @@ import { useLayoutEffect, useRef, useState } from 'react'
import { CoWHookDappEvents, hookDappIframeTransport } from '@cowprotocol/hook-dapp-lib'
import { EthereumProvider, IframeRpcProviderBridge } from '@cowprotocol/iframe-transport'
+import { ProductLogo, ProductVariant, UI } from '@cowprotocol/ui'
import { useWalletProvider } from '@cowprotocol/wallet-provider'
import styled from 'styled-components/macro'
@@ -11,6 +12,41 @@ import { HookDappContext as HookDappContextType, HookDappIframe } from '../../ty
const Iframe = styled.iframe`
border: 0;
min-height: 300px;
+ opacity: ${({ $isLoading }: { $isLoading: boolean }) => ($isLoading ? 0 : 1)};
+ transition: opacity 0.2s ease-in-out;
+`
+
+const LoadingWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ min-height: 200px;
+ gap: 16px;
+`
+
+const LoadingText = styled.div`
+ color: var(${UI.COLOR_TEXT_OPACITY_70});
+ font-size: 15px;
+`
+
+const StyledProductLogo = styled(ProductLogo)`
+ animation: pulse 1.5s ease-in-out infinite;
+
+ @keyframes pulse {
+ 0% {
+ opacity: 0;
+ transform: scale(0.95);
+ }
+ 50% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0;
+ transform: scale(0.95);
+ }
+ }
`
interface IframeDappContainerProps {
@@ -26,6 +62,7 @@ export function IframeDappContainer({ dapp, context }: IframeDappContainerProps)
const setBuyTokenRef = useRef(context.setBuyToken)
const [isIframeActive, setIsIframeActive] = useState(false)
+ const [isLoading, setIsLoading] = useState(true)
const walletProvider = useWalletProvider()
@@ -34,6 +71,10 @@ export function IframeDappContainer({ dapp, context }: IframeDappContainerProps)
setSellTokenRef.current = context.setSellToken
setBuyTokenRef.current = context.setBuyToken
+ const handleIframeLoad = () => {
+ setIsLoading(false)
+ }
+
useLayoutEffect(() => {
const iframeWindow = iframeRef.current?.contentWindow
@@ -85,5 +126,21 @@ export function IframeDappContainer({ dapp, context }: IframeDappContainerProps)
hookDappIframeTransport.postMessageToWindow(iframeWindow, CoWHookDappEvents.CONTEXT_UPDATE, iframeContext)
}, [context, isIframeActive])
- return
+ return (
+ <>
+ {isLoading && (
+
+
+ Loading hook...
+
+ )}
+
+ >
+ )
}
diff --git a/apps/cowswap-frontend/src/modules/hooksStore/containers/PostHookButton/index.tsx b/apps/cowswap-frontend/src/modules/hooksStore/containers/PostHookButton/index.tsx
index 520efa0e75..7998f90c5e 100644
--- a/apps/cowswap-frontend/src/modules/hooksStore/containers/PostHookButton/index.tsx
+++ b/apps/cowswap-frontend/src/modules/hooksStore/containers/PostHookButton/index.tsx
@@ -14,11 +14,12 @@ import * as styledEl from '../PreHookButton/styled'
export interface PostHookButtonProps {
onOpen(): void
onEditHook(uuid: string): void
+ hideTooltip?: boolean
}
const isPreHook = false
-export function PostHookButton({ onOpen, onEditHook }: PostHookButtonProps) {
+export function PostHookButton({ onOpen, onEditHook, hideTooltip }: PostHookButtonProps) {
const { account } = useWalletInfo()
const { postHooks } = useHooks()
const removeHook = useRemoveHook(isPreHook)
@@ -32,7 +33,7 @@ export function PostHookButton({ onOpen, onEditHook }: PostHookButtonProps) {
dapps={dapps}
account={account}
hooks={postHooks}
- isPreHook={false} // Indicate that these are post-hooks
+ isPreHook={false}
removeHook={removeHook}
editHook={onEditHook}
moveHook={moveHook}
@@ -40,8 +41,8 @@ export function PostHookButton({ onOpen, onEditHook }: PostHookButtonProps) {
)}
- Add Post-Hook Action
- {' '}
+ Add Post-Hook Action {!hideTooltip && }
+
>
)
diff --git a/apps/cowswap-frontend/src/modules/hooksStore/containers/PreHookButton/index.tsx b/apps/cowswap-frontend/src/modules/hooksStore/containers/PreHookButton/index.tsx
index c16379d861..baa2c56f21 100644
--- a/apps/cowswap-frontend/src/modules/hooksStore/containers/PreHookButton/index.tsx
+++ b/apps/cowswap-frontend/src/modules/hooksStore/containers/PreHookButton/index.tsx
@@ -15,11 +15,12 @@ import { HookTooltip } from '../../pure/HookTooltip'
export interface PreHookButtonProps {
onOpen(): void
onEditHook(uuid: string): void
+ hideTooltip?: boolean
}
const isPreHook = true
-export function PreHookButton({ onOpen, onEditHook }: PreHookButtonProps) {
+export function PreHookButton({ onOpen, onEditHook, hideTooltip }: PreHookButtonProps) {
const { account } = useWalletInfo()
const { preHooks } = useHooks()
const removeHook = useRemoveHook(isPreHook)
@@ -42,8 +43,8 @@ export function PreHookButton({ onOpen, onEditHook }: PreHookButtonProps) {
- Add Pre-Hook Action
- {' '}
+ Add Pre-Hook Action {!hideTooltip && }
+
>
)
diff --git a/apps/cowswap-frontend/src/modules/trade/pure/PriceUpdatedBanner/index.tsx b/apps/cowswap-frontend/src/modules/trade/pure/PriceUpdatedBanner/index.tsx
index 81448f4f5f..a3285bb3f2 100644
--- a/apps/cowswap-frontend/src/modules/trade/pure/PriceUpdatedBanner/index.tsx
+++ b/apps/cowswap-frontend/src/modules/trade/pure/PriceUpdatedBanner/index.tsx
@@ -4,7 +4,6 @@ import { InlineBanner } from '@cowprotocol/ui'
import { Trans } from '@lingui/macro'
import styled from 'styled-components/macro'
-
const Wrapper = styled.div`
display: flex;
align-items: center;
@@ -15,8 +14,11 @@ const Wrapper = styled.div`
`
const StyledBanner = styled(InlineBanner)`
+ width: 100%;
+
> span {
flex-flow: row nowrap;
+ width: 100%;
}
`