feat(hooks-store): add loading logo for hook-dapp (#5112)

* feat: add loading logo for hook * feat: hide tooltip when hook modal open * feat: format quote update banner
cowprotocol · Nov 21, 2024 · 4b7267f · 4b7267f
1 parent 4858b7c
commit 4b7267f
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 11 deletions.
diff --git 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() {
           </a>
         </p>
       </DismissableInlineBanner>
-      <PreHookButton onOpen={() => setSelectedHookPosition('pre')} onEditHook={onPreHookEdit} />
+      <PreHookButton
+        onOpen={() => setSelectedHookPosition('pre')}
+        onEditHook={onPreHookEdit}
+        hideTooltip={isHookSelectionOpen}
+      />
     </>
   )
 
   const BottomContent = shouldNotUseHooks ? null : (
-    <PostHookButton onOpen={() => setSelectedHookPosition('post')} onEditHook={onPostHookEdit} />
+    <PostHookButton
+      onOpen={() => 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
@@ -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<boolean>(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 <Iframe ref={iframeRef} src={dapp.url} allow="clipboard-read; clipboard-write" />
+  return (
+    <>
+      {isLoading && (
+        <LoadingWrapper>
+          <StyledProductLogo variant={ProductVariant.CowSwap} logoIconOnly height={56} />
+          <LoadingText>Loading hook...</LoadingText>
+        </LoadingWrapper>
+      )}
+      <Iframe
+        ref={iframeRef}
+        src={dapp.url}
+        allow="clipboard-read; clipboard-write"
+        onLoad={handleIframeLoad}
+        $isLoading={isLoading}
+      />
+    </>
+  )
 }
diff --git 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,16 +33,16 @@ 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}
         />
       )}
       <styledEl.Wrapper>
         <styledEl.AddHookButton onClick={onOpen}>
-          <SVG src={PLUS_ICON} /> Add Post-Hook Action <HookTooltip isPreHook={false} />
-        </styledEl.AddHookButton>{' '}
+          <SVG src={PLUS_ICON} /> Add Post-Hook Action {!hideTooltip && <HookTooltip isPreHook={false} />}
+        </styledEl.AddHookButton>
       </styledEl.Wrapper>
     </>
   )

diff --git 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) {
 
       <styledEl.Wrapper>
         <styledEl.AddHookButton onClick={onOpen}>
-          <SVG src={PLUS_ICON} /> Add Pre-Hook Action <HookTooltip isPreHook />
-        </styledEl.AddHookButton>{' '}
+          <SVG src={PLUS_ICON} /> Add Pre-Hook Action {!hideTooltip && <HookTooltip isPreHook />}
+        </styledEl.AddHookButton>
       </styledEl.Wrapper>
     </>
   )

diff --git 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%;
   }
 `