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