Merge branch 'develop' into release-drag-drop

.release-please-manifest.json

@@ -1,22 +1,22 @@
 {
-  "apps/cowswap-frontend": "1.81.2",
-  "apps/explorer": "2.33.1",
+  "apps/cowswap-frontend": "1.82.0",
+  "apps/explorer": "2.34.0",
   "libs/permit-utils": "0.3.1",
-  "libs/widget-lib": "0.14.0",
-  "libs/widget-react": "0.10.1",
+  "libs/widget-lib": "0.14.1",
+  "libs/widget-react": "0.10.2",
   "apps/widget-configurator": "1.6.0",
-  "libs/analytics": "1.6.0",
-  "libs/assets": "1.7.0",
+  "libs/analytics": "1.7.0",
+  "libs/assets": "1.8.0",
   "libs/common-const": "1.7.0",
   "libs/common-hooks": "1.3.0",
   "libs/common-utils": "1.7.1",
   "libs/core": "1.3.0",
   "libs/ens": "1.2.0",
-  "libs/events": "1.4.0",
+  "libs/events": "1.4.1",
   "libs/snackbars": "1.1.0",
   "libs/tokens": "1.8.1",
-  "libs/types": "1.1.0",
-  "libs/ui": "1.8.1",
+  "libs/types": "1.2.0",
+  "libs/ui": "1.9.0",
   "libs/wallet": "1.5.2",
   "apps/cow-fi": "1.13.0",
   "libs/wallet-provider": "1.0.0",

apps/cowswap-frontend/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [1.82.0](https://github.com/cowprotocol/cowswap/compare/cowswap-v1.81.2...cowswap-v1.82.0) (2024-09-17)
+
+
+### Features
+
+* change finished step layout ([#4880](https://github.com/cowprotocol/cowswap/issues/4880)) ([181acb1](https://github.com/cowprotocol/cowswap/commit/181acb11f55485d6c76cfadbae618a6ed10ea79c))
+* **hooks-store:** add order params and signer to hook dapp context ([#4878](https://github.com/cowprotocol/cowswap/issues/4878)) ([700da7e](https://github.com/cowprotocol/cowswap/commit/700da7e64c680072bf97ac240b04439a26ceaa0d))
+* **hooks-store:** new design & refactoring ([#4859](https://github.com/cowprotocol/cowswap/issues/4859)) ([1b989fa](https://github.com/cowprotocol/cowswap/commit/1b989fa037b276d507adfa0462129ab53fe2ac6d))
+* **smart-slippage:** add smartSlippage flag to appData quote metadata ([#4866](https://github.com/cowprotocol/cowswap/issues/4866)) ([e28364f](https://github.com/cowprotocol/cowswap/commit/e28364fee6c0c0d9b8c07b8bf5892b52e4c6e3dd))
+* **smart-slippage:** improve ux ([#4826](https://github.com/cowprotocol/cowswap/issues/4826)) ([ce3ba87](https://github.com/cowprotocol/cowswap/commit/ce3ba875c5f6ebce3032e89ec5b231f59a9a4fc1))
+
+
+### Bug Fixes
+
+* **hooks-store:** ignore permit data for sc wallets ([#4875](https://github.com/cowprotocol/cowswap/issues/4875)) ([3d0bc32](https://github.com/cowprotocol/cowswap/commit/3d0bc32ea4a2ffa9cb073e321e8382e4a9b6a2e4))
+* **widget:** widget tokens flickering ([#4883](https://github.com/cowprotocol/cowswap/issues/4883)) ([0f8f256](https://github.com/cowprotocol/cowswap/commit/0f8f256d3d0e717306be8def7d44aeb35811bb9e))
+
 ## [1.81.2](https://github.com/cowprotocol/cowswap/compare/cowswap-v1.81.1...cowswap-v1.81.2) (2024-09-05)
 
 

apps/cowswap-frontend/package.json

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

apps/cowswap-frontend/src/common/pure/OrderProgressBarV2/index.tsx

@@ -23,6 +23,7 @@ import { OrderKind, SupportedChainId } from '@cowprotocol/cow-sdk'
 import { TokenLogo } from '@cowprotocol/tokens'
 import { Command } from '@cowprotocol/types'
 import { ExternalLink, InfoTooltip, ProductLogo, ProductVariant, TokenAmount, UI } from '@cowprotocol/ui'
+import { Confetti } from '@cowprotocol/ui'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
 import { AnimatePresence, motion } from 'framer-motion'
@@ -326,6 +327,7 @@ export function OrderProgressBarV2(props: OrderProgressBarV2Props) {
     }
   }, [currentStep, getDuration])
 
+  // Ensure StepComponent will be a valid React component or null
   let StepComponent: React.ComponentType<OrderProgressBarV2Props> | null = null
 
   if (currentStep === 'cancellationFailed' || currentStep === 'finished') {
@@ -334,9 +336,10 @@ export function OrderProgressBarV2(props: OrderProgressBarV2Props) {
     StepComponent = STEP_NAME_TO_STEP_COMPONENT[currentStep as keyof typeof STEP_NAME_TO_STEP_COMPONENT] || null
   }
 
-  return (
+  // Always return a value from the function
+  return StepComponent ? (
     <>
-      {StepComponent && <StepComponent {...props} stepName={currentStep} />}
+      <StepComponent {...props} stepName={currentStep} />
       {debugMode && (
         <styledEl.DebugPanel>
           <select value={debugStep} onChange={(e) => setDebugStep(e.target.value as OrderProgressBarStepName)}>
@@ -349,7 +352,7 @@ export function OrderProgressBarV2(props: OrderProgressBarV2Props) {
         </styledEl.DebugPanel>
       )}
     </>
-  )
+  ) : null // Fallback return value if StepComponent is not found
 }
 
 function AnimatedTokens({
@@ -484,15 +487,6 @@ function RenderProgressTopSection({
           <styledEl.ProgressTopSection>
             <styledEl.ProgressImageWrapper bgColor={'#65D9FF'} padding={'10px'} gap={'10px'}>
               <styledEl.CowImage>
-                <styledEl.ShareButton
-                  onClick={() => {
-                    shareOnTwitter()
-                    trackShareClick()
-                  }}
-                >
-                  <SVG src={ICON_SOCIAL_X} />
-                  <span>Share this {shouldShowSurplus ? 'win' : 'tip'}!</span>
-                </styledEl.ShareButton>
                 <SVG src={randomImage} />
               </styledEl.CowImage>
               <styledEl.FinishedImageContent>
@@ -731,12 +725,13 @@ const SURPLUS_IMAGES = [
 function FinishedStep(props: OrderProgressBarV2Props) {
   const { stepName, solverCompetition: solvers, totalSolvers, order, surplusData, chainId, receiverEnsName } = props
   const [showAllSolvers, setShowAllSolvers] = useState(false)
-
-  const { surplusFiatValue, surplusAmount, showSurplus } = surplusData || {}
   const cancellationFailed = stepName === 'cancellationFailed'
 
+  const { surplusFiatValue, surplusAmount, showSurplus } = surplusData || {}
   const shouldShowSurplus = DEBUG_FORCE_SHOW_SURPLUS || showSurplus
 
+  const [showConfetti, setShowConfetti] = useState(stepName === 'finished' && shouldShowSurplus)
+
   const visibleSolvers = useMemo(() => {
     return showAllSolvers ? solvers : solvers?.slice(0, 3)
   }, [showAllSolvers, solvers])
@@ -756,27 +751,66 @@ function FinishedStep(props: OrderProgressBarV2Props) {
 
   const isDarkMode = useIsDarkMode()
 
-  // Early return if order is not set
+  const { randomBenefit } = useMemo(() => {
+    const benefits = CHAIN_SPECIFIC_BENEFITS[chainId]
+
+    return {
+      randomImage: SURPLUS_IMAGES[getRandomInt(0, SURPLUS_IMAGES.length - 1)],
+      randomBenefit: benefits[getRandomInt(0, benefits.length - 1)],
+    }
+  }, [chainId])
+
+  const shareOnTwitter = useCallback(() => {
+    const twitterUrl = shouldShowSurplus
+      ? getTwitterShareUrl(surplusData, order)
+      : getTwitterShareUrlForBenefit(randomBenefit)
+    window.open(twitterUrl, '_blank', 'noopener,noreferrer')
+  }, [shouldShowSurplus, surplusData, order, randomBenefit])
+
+  const trackShareClick = useCallback(() => {
+    cowAnalytics.sendEvent({
+      category: Category.PROGRESS_BAR,
+      action: 'Click Share Button',
+      label: shouldShowSurplus ? 'Surplus' : 'Benefit',
+    })
+  }, [shouldShowSurplus])
+
+  useEffect(() => {
+    let timer: ReturnType<typeof setTimeout> | undefined
+
+    if (stepName === 'finished' && shouldShowSurplus) {
+      setShowConfetti(true)
+      timer = setTimeout(() => setShowConfetti(false), 3000)
+    }
+
+    return () => {
+      if (timer) {
+        clearTimeout(timer)
+      }
+    }
+  }, [stepName, shouldShowSurplus])
+
+  // If order is not set, return null
   if (!order) {
     return null
   }
 
   return (
     <styledEl.FinishedStepContainer>
+      {showConfetti && <Confetti start={true} />}
       {cancellationFailed && (
         <styledEl.CancellationFailedBanner>
           <b>Cancellation failed:</b> The order was executed before it could be cancelled.
         </styledEl.CancellationFailedBanner>
       )}
-      <RenderProgressTopSection {...props} />
 
       <styledEl.ConclusionContent>
-        <styledEl.TransactionStatus flexFlow="column" margin={'0 auto 24px'}>
+        <styledEl.TransactionStatus margin={'0 auto 24px'}>
           <Lottie
             animationData={isDarkMode ? LOTTIE_GREEN_CHECKMARK_DARK : LOTTIE_GREEN_CHECKMARK}
             loop={false}
             autoplay
-            style={{ width: '56px', height: '56px' }}
+            style={{ width: '36px', height: '36px' }}
           />
           Transaction completed!
         </styledEl.TransactionStatus>
@@ -891,6 +925,17 @@ function FinishedStep(props: OrderProgressBarV2Props) {
           </styledEl.SolverRankings>
         )}
       </styledEl.ConclusionContent>
+
+      <RenderProgressTopSection {...props} />
+      <styledEl.ShareButton
+        onClick={() => {
+          shareOnTwitter()
+          trackShareClick()
+        }}
+      >
+        <SVG src={ICON_SOCIAL_X} />
+        <span>Share this {shouldShowSurplus ? 'win' : 'tip'}!</span>
+      </styledEl.ShareButton>
     </styledEl.FinishedStepContainer>
   )
 }

apps/cowswap-frontend/src/common/pure/OrderProgressBarV2/styled.ts

@@ -1,6 +1,6 @@
 import IMAGE_STAR_SHINE from '@cowprotocol/assets/cow-swap/star-shine.svg'
 import { SingleLetterLogoWrapper } from '@cowprotocol/tokens'
-import { Font, LinkStyledButton, Media, UI } from '@cowprotocol/ui'
+import { ButtonPrimary, Font, LinkStyledButton, Media, UI } from '@cowprotocol/ui'
 
 import styled, { css, keyframes } from 'styled-components/macro'
 
@@ -363,14 +363,11 @@ export const FinishedStepContainer = styled.div`
   display: flex;
   flex-flow: column wrap;
   align-items: center;
-  gap: 10px;
+  gap: 16px;
   padding: 0;
   width: 100%;
 
   ${Media.upToSmall()} {
-    flex-flow: column-reverse;
-    gap: 30px;
-
     ${ProgressImageWrapper} {
       height: auto;
       max-height: initial;
@@ -486,37 +483,8 @@ export const FinishedLogo = styled.div`
   }
 `
 
-export const ShareButton = styled.button`
-  background: var(${UI.COLOR_PRIMARY});
-  color: var(${UI.COLOR_BUTTON_TEXT});
-  border: none;
-  padding: 10px 20px;
-  border-radius: 20px;
-  cursor: pointer;
-  font-weight: 600;
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  font-size: 17px;
-  z-index: 2;
-  position: absolute;
-  left: 6px;
-  right: 0;
-  bottom: 6px;
-  width: calc(100% - 12px);
-  transition:
-    background 0.15s ease-in-out,
-    color 0.15s ease-in-out;
-
-  &:hover {
-    background: var(${UI.COLOR_BUTTON_TEXT});
-    color: var(${UI.COLOR_PRIMARY});
-  }
-
-  ${Media.upToSmall()} {
-    border: 1px solid var(${UI.COLOR_TEXT});
-    justify-content: center;
-  }
+export const ShareButton = styled(ButtonPrimary)`
+  gap: 10px;
 
   > svg {
     --size: 17px;
@@ -566,7 +534,7 @@ export const SolverRankings = styled.div`
   justify-content: center;
   align-items: center;
   width: 100%;
-  margin: 52px auto 0;
+  margin: 32px auto 0;
 
   > h3 {
     font-size: 17px;
@@ -795,7 +763,7 @@ export const CancellationFailedBanner = styled.div`
   background-color: var(${UI.COLOR_DANGER_BG});
   color: var(${UI.COLOR_DANGER_TEXT});
   padding: 10px;
-  margin-top: 10px;
+  margin: 0 auto;
   border-radius: 16px;
   text-align: center;
   font-size: 15px;

apps/cowswap-frontend/src/common/pure/TransactionSubmittedContent/index.tsx

@@ -14,7 +14,6 @@ import { EthFlowStepper } from 'modules/swap/containers/EthFlowStepper'
 import { NavigateToNewOrderCallback } from 'modules/swap/hooks/useNavigateToNewOrderCallback'
 import { WatchAssetInWallet } from 'modules/wallet/containers/WatchAssetInWallet'
 
-
 import * as styledEl from './styled'
 
 import { CancelButton } from '../CancelButton'
@@ -71,6 +70,10 @@ export function TransactionSubmittedContent({
   const showSafeSigningInfo = isPresignaturePending && activityDerivedState && !!activityDerivedState.gnosisSafeInfo
   const showProgressBar = !showSafeSigningInfo && !isPresignaturePending && activityDerivedState && isProgressBarSetup
   const cancellationFailed = stepName === 'cancellationFailed'
+  const isFinished =
+    activityDerivedState?.status === ActivityStatus.CONFIRMED ||
+    activityDerivedState?.status === ActivityStatus.EXPIRED ||
+    cancellationFailed
 
   return (
     <styledEl.Wrapper>
@@ -99,7 +102,7 @@ export function TransactionSubmittedContent({
         <>
           {!isProgressBarSetup && <styledEl.Title>{getTitleStatus(activityDerivedState)}</styledEl.Title>}
           {showSafeSigningInfo && <GnosisSafeTxDetails chainId={chainId} activityDerivedState={activityDerivedState} />}
-          <EthFlowStepper order={order} showProgressBar={!!showProgressBar && !cancellationFailed} />
+          {!isFinished && <EthFlowStepper order={order} showProgressBar={!!showProgressBar} />}
           {activityDerivedState && showProgressBar && isProgressBarSetup && (
             <OrderProgressBarV2
               {...orderProgressBarV2Props}
@@ -110,17 +113,27 @@ export function TransactionSubmittedContent({
           <styledEl.ButtonGroup>
             <WatchAssetInWallet shortLabel currency={currencyToAdd} onClick={trackWatchAssetClick} />
 
-            {(activityDerivedState?.status === (ActivityStatus.CONFIRMED || ActivityStatus.EXPIRED) ||
-              (activityDerivedState?.status === ActivityStatus.PENDING && !isProgressBarSetup)) && (
-                <styledEl.ButtonCustom
-                  onClick={() => {
-                    onDismiss()
-                    trackCloseClick()
-                  }}
-                >
-                  Close
-                </styledEl.ButtonCustom>
-              )}
+            {activityDerivedState?.status === ActivityStatus.PENDING && !isProgressBarSetup && (
+              <styledEl.ButtonCustom
+                onClick={() => {
+                  onDismiss()
+                  trackCloseClick()
+                }}
+              >
+                Close
+              </styledEl.ButtonCustom>
+            )}
+
+            {isFinished && (
+              <styledEl.ButtonSecondary
+                onClick={() => {
+                  onDismiss()
+                  trackCloseClick()
+                }}
+              >
+                Close
+              </styledEl.ButtonSecondary>
+            )}
           </styledEl.ButtonGroup>
         </>
       </styledEl.Section>