fix: resolved conflicts merging main into develop

CHANGELOG.md

@@ -1,5 +1,27 @@
 # Changelog
 
+## [1.50.1](https://github.com/cowprotocol/cowswap/compare/v1.50.0...v1.50.1) (2023-11-27)
+
+
+### Bug Fixes
+
+* adds NEW! tag to MORE menu item ([#3448](https://github.com/cowprotocol/cowswap/issues/3448)) ([f6a4358](https://github.com/cowprotocol/cowswap/commit/f6a435847bd872f4e9464ee2eaffced8ea17b755))
+
+## [1.50.0](https://github.com/cowprotocol/cowswap/compare/v1.49.6...v1.50.0) (2023-11-24)
+
+
+### Features
+
+* refactor snippets ([#3409](https://github.com/cowprotocol/cowswap/issues/3409)) ([1b703ea](https://github.com/cowprotocol/cowswap/commit/1b703ea2aa1735a19be9b90d403b9e952e9a4310))
+* widget skeleton ([#3393](https://github.com/cowprotocol/cowswap/issues/3393)) ([af1add9](https://github.com/cowprotocol/cowswap/commit/af1add99627abf7787e6957724fdec67c4cebf9a))
+* **widget:** embed icons ([#3389](https://github.com/cowprotocol/cowswap/issues/3389)) ([c07a25f](https://github.com/cowprotocol/cowswap/commit/c07a25f5ba1b9bbbdf90ba5d0406d03d4dda9043))
+
+
+### Bug Fixes
+
+* do not send permit to quote when enough allowance ([#3433](https://github.com/cowprotocol/cowswap/issues/3433)) ([58b6ade](https://github.com/cowprotocol/cowswap/commit/58b6ade450537d7bb304947697e7b3e47b34408e))
+* **widget-configurator:** set default trade pair USDC/COW ([#3420](https://github.com/cowprotocol/cowswap/issues/3420)) ([86743fe](https://github.com/cowprotocol/cowswap/commit/86743fe2d51b851d1830fe9b14e7e4b640a36114))
+
 ## [1.49.6](https://github.com/cowprotocol/cowswap/compare/v1.49.5...v1.49.6) (2023-11-16)
 
 

apps/cowswap-frontend/src/legacy/components/Header/styled.tsx

@@ -336,6 +336,12 @@ export const HeaderLinks = styled(HeaderLinksMod)<{ isMobileMenuOpen: boolean }>
         height: 10px;
       }
     `};
+
+    ${({ theme }) => theme.mediaWidth.upToSmall`
+      > button > svg {
+        order: 3;
+      }
+    `};
   }
 
   ${MenuContent} {

apps/cowswap-frontend/src/legacy/components/MenuDropdown/index.tsx

@@ -7,14 +7,17 @@ import SVG from 'react-inlinesvg'
 
 import { useMediaQuery, LargeAndUp } from 'legacy/hooks/useMediaQuery'
 
+import { MenuBadge } from 'modules/mainMenu/pure/MenuTree/styled'
+
 import { MenuFlyout, Content } from './styled'
 
 interface MenuProps {
   title: string
+  badge?: string
   children: React.ReactNode
 }
 
-export function Menu({ title, children }: MenuProps) {
+export function Menu({ title, badge, children }: MenuProps) {
   const isLargeAndUp = useMediaQuery(LargeAndUp)
   const node = useRef<HTMLOListElement>()
   const [showMenu, setShowMenu] = useState(false)
@@ -29,6 +32,7 @@ export function Menu({ title, children }: MenuProps) {
     <MenuFlyout ref={node as any}>
       <button onClick={handleOnClick} className={showMenu ? 'expanded' : ''}>
         {title} <SVG src={IMAGE_CARRET_DOWN} description="dropdown icon" className={showMenu ? 'expanded' : ''} />
+        {badge && <MenuBadge>{badge}</MenuBadge>}
       </button>
       {showMenu && <Content onClick={handleOnClick}>{children}</Content>}
     </MenuFlyout>

apps/cowswap-frontend/src/modules/appData/updater/AppDataHooksUpdater.ts

@@ -1,25 +1,67 @@
-import { useEffect, useRef } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
+
+import { PermitHookData } from '@cowprotocol/permit-utils'
 
 import { useAccountAgnosticPermitHookData } from 'modules/permit'
+import { useDerivedSwapInfo } from 'modules/swap/hooks/useSwapState'
 
+import { useLimitHasEnoughAllowance } from '../../limitOrders/hooks/useTradeFlowContext'
+import { useSwapEnoughAllowance } from '../../swap/hooks/useSwapFlowContext'
 import { useUpdateAppDataHooks } from '../hooks'
 import { buildAppDataHooks } from '../utils/buildAppDataHooks'
 
+// const count = 0
+
+function usePermitDataIfNotAllowance(): PermitHookData | undefined {
+  const permitHookData = useAccountAgnosticPermitHookData() || {}
+
+  // Remove permitData if the user has enough allowance for the current trade
+  const swapHasEnoughAllowance = useSwapEnoughAllowance()
+  const limitHasEnoughAllowance = useLimitHasEnoughAllowance()
+  const shouldUsePermit = swapHasEnoughAllowance === false || limitHasEnoughAllowance === false
+
+  const { target, callData, gasLimit }: Partial<PermitHookData> = permitHookData || {}
+
+  return useMemo(() => {
+    if (!target || !callData || !gasLimit) {
+      return undefined
+    }
+
+    return shouldUsePermit ? { target, callData, gasLimit } : undefined
+  }, [shouldUsePermit, target, callData, gasLimit])
+}
+
 export function AppDataHooksUpdater(): null {
+  const { v2Trade } = useDerivedSwapInfo()
   const updateAppDataHooks = useUpdateAppDataHooks()
-  const permitHookData = useAccountAgnosticPermitHookData()
-
-  // To avoid dumb re-renders
-  const ref = useRef(permitHookData)
-  ref.current = permitHookData
-  const stableRef = JSON.stringify(permitHookData)
+  const permitData = usePermitDataIfNotAllowance()
+  const permitDataPrev = useRef<PermitHookData | undefined>(undefined)
+  const hasTradeInfo = !!v2Trade
 
   useEffect(() => {
-    if (stableRef) {
-      const hooks = buildAppDataHooks(ref.current ? [ref.current] : undefined)
+    if (
+      !hasTradeInfo || // If there's no trade info, wait until we have one to update the hooks (i.e. missing quote)
+      JSON.stringify(permitDataPrev.current) === JSON.stringify(permitData) // Or if the permit data has not changed
+    ) {
+      return undefined
+    }
+
+    const hooks = buildAppDataHooks({
+      preInteractionHooks: permitData ? [permitData] : undefined,
+    })
+
+    if (hooks) {
+      // Update the hooks
+      console.log('[AppDataHooksUpdater]: Set hooks', hooks)
       updateAppDataHooks(hooks)
+      permitDataPrev.current = permitData
+    } else {
+      // There was a hook data, but not any more. The hook needs to be removed
+      console.log('[AppDataHooksUpdater] Clear hooks')
+      updateAppDataHooks(undefined)
+      permitDataPrev.current = undefined
     }
-  }, [stableRef, updateAppDataHooks])
+  }, [updateAppDataHooks, permitData, hasTradeInfo])
 
   return null
 }

apps/cowswap-frontend/src/modules/appData/utils/buildAppDataHooks.ts

@@ -1,9 +1,12 @@
 import { AppDataHooks, PostHooks, PreHooks } from '../types'
 
-export function buildAppDataHooks(
-  preInteractionHooks?: PreHooks,
+export function buildAppDataHooks({
+  preInteractionHooks,
+  postInteractionHooks,
+}: {
+  preInteractionHooks?: PreHooks
   postInteractionHooks?: PostHooks
-): AppDataHooks | undefined {
+}): AppDataHooks | undefined {
   if (!preInteractionHooks && !postInteractionHooks) {
     return undefined
   }

apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.cosmos.tsx

@@ -1,10 +1,12 @@
+import { BadgeType } from '@cowprotocol/ui'
+
 import { Widget } from 'modules/application/pure/Widget'
 
-import { TradeWidgetLinks, BadgeType } from '.';
+import { TradeWidgetLinks } from '.'
 
 type BadgeInfo = {
-  text: string;
-  type: BadgeType;
+  text: string
+  type: BadgeType
 }
 
 const BADGES: BadgeInfo[] = [
@@ -13,24 +15,21 @@ const BADGES: BadgeInfo[] = [
   { text: 'ALPHA', type: 'alert' },
   { text: 'NEW!', type: 'alert2' },
   { text: 'RELEASE', type: 'information' },
-];
+]
 
 type Fixtures = {
-  [key: string]: React.FunctionComponent;
-};
+  [key: string]: React.FunctionComponent
+}
 
 const BadgeFixtures = BADGES.reduce<Fixtures>((fixtures, badge) => {
   const Fixture = () => (
     <Widget>
-      <TradeWidgetLinks
-        highlightedBadgeText={badge.text}
-        highlightedBadgeType={badge.type}
-      />
+      <TradeWidgetLinks highlightedBadgeText={badge.text} highlightedBadgeType={badge.type} />
     </Widget>
-  );
+  )
 
-  fixtures[`Badge - ${badge.text} (${badge.type})`] = Fixture;
-  return fixtures;
-}, {});
+  fixtures[`Badge - ${badge.text} (${badge.type})`] = Fixture
+  return fixtures
+}, {})
 
-export default BadgeFixtures;
+export default BadgeFixtures

apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/index.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react'
 
+import { BadgeType } from '@cowprotocol/ui'
 import type { TradeType } from '@cowprotocol/widget-lib'
 
 import { Trans } from '@lingui/macro'
@@ -26,17 +27,10 @@ interface MenuItemConfig {
   badgeType?: BadgeType
 }
 
-export type BadgeType = 'information' | 'success' | 'alert' | 'alert2' | 'default'
-
 const MENU_ITEMS: MenuItemConfig[] = [
   { route: Routes.SWAP, label: 'Swap' },
   { route: Routes.LIMIT_ORDER, label: 'Limit' },
-  {
-    route: Routes.ADVANCED_ORDERS,
-    label: 'TWAP',
-    badgeText: 'NEW!',
-    badgeType: 'alert2',
-  },
+  { route: Routes.ADVANCED_ORDERS, label: 'TWAP' },
 ]
 
 const TRADE_TYPE_TO_ROUTE: Record<TradeType, string> = {

apps/cowswap-frontend/src/modules/application/containers/TradeWidgetLinks/styled.ts

@@ -1,10 +1,10 @@
+import { BadgeType } from '@cowprotocol/ui'
+
 import { NavLink } from 'react-router-dom'
 import styled, { css } from 'styled-components/macro'
 
 import { UI } from 'common/constants/theme'
 
-import { BadgeType } from '.'
-
 const badgeBackgrounds: Record<BadgeType, string> = {
   information: `var(${UI.COLOR_INFORMATION_BG})`,
   alert: `var(${UI.COLOR_ALERT_BG})`,

apps/cowswap-frontend/src/modules/limitOrders/hooks/useTradeFlowContext.ts

@@ -22,6 +22,19 @@ import { useTradeQuote } from 'modules/tradeQuote'
 
 import { useLimitOrdersDerivedState } from './useLimitOrdersDerivedState'
 
+export function useLimitHasEnoughAllowance(): boolean | undefined {
+  const state = useLimitOrdersDerivedState()
+  const { chainId, account } = useWalletInfo()
+
+  const checkAllowanceAddress = GP_VAULT_RELAYER[chainId]
+  const { enoughAllowance } = useEnoughBalanceAndAllowance({
+    account,
+    amount: state.slippageAdjustedSellAmount || undefined,
+    checkAllowanceAddress,
+  })
+  return enoughAllowance
+}
+
 export function useTradeFlowContext(): TradeFlowContext | null {
   const { provider } = useWeb3React()
   const { chainId, account } = useWalletInfo()

apps/cowswap-frontend/src/modules/limitOrders/services/tradeFlow/index.ts

@@ -1,7 +1,9 @@
 import { OrderClass } from '@cowprotocol/cow-sdk'
-import { isSupportedPermitInfo } from '@cowprotocol/permit-utils'
+import { PERMIT_SIGNER, isSupportedPermitInfo } from '@cowprotocol/permit-utils'
 import { Percent } from '@uniswap/sdk-core'
 
+import * as Sentry from '@sentry/browser'
+
 import { PriceImpact } from 'legacy/hooks/usePriceImpact'
 import { partialOrderUpdate } from 'legacy/state/orders/utils'
 import { signAndPostOrder } from 'legacy/utils/trade'
@@ -68,6 +70,14 @@ export async function tradeFlow(
       generatePermitHook,
     })
 
+    if (postOrderParams.appData.fullAppData.includes(PERMIT_SIGNER.address)) {
+      // report this to sentry if we ever use the default signer in the permit
+      Sentry.captureException('User signed the permit using PERMIT_SIGNER instead of their account', {
+        tags: { errorType: 'permitWithDefaultSigner' },
+        contexts: { params: { account } },
+      })
+    }
+
     logTradeFlow('LIMIT ORDER FLOW', 'STEP 3: send transaction')
     tradeFlowAnalytics.trade(swapFlowAnalyticsContext)
 

apps/cowswap-frontend/src/modules/mainMenu/constants/mainMenu.tsx

@@ -98,6 +98,7 @@ export const MAIN_MENU: MenuTreeItem[] = [
   {
     kind: MenuItemKind.DROP_DOWN,
     title: 'More',
+    badge: 'New!',
     items: [
       {
         sectionTitle: 'Overview',

apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/index.tsx

@@ -127,10 +127,10 @@ interface DropdownProps {
 }
 
 const DropDown = ({ item, context }: DropdownProps) => {
-  const { title, items } = item
+  const { title, items, badge } = item
 
   return (
-    <MenuDropdown title={title}>
+    <MenuDropdown title={title} badge={badge}>
       {items?.map((item, index) => {
         const { sectionTitle, links } = item
         return (

apps/cowswap-frontend/src/modules/mainMenu/pure/MenuTree/styled.ts

@@ -5,8 +5,8 @@ import { UI } from 'common/constants/theme'
 export const MenuBadge = styled.div`
   display: flex;
   align-items: center;
-  padding: 0 5px;
-  margin-left: 5px;
+  padding: 3px 5px;
+  margin: 0 0 0 5px;
   background: var(${UI.COLOR_ALERT2_BG});
   color: var(${UI.COLOR_ALERT2_TEXT});
   border: 0;

apps/cowswap-frontend/src/modules/mainMenu/types.ts

@@ -76,6 +76,7 @@ export interface DropDownItem {
   kind: MenuItemKind.DROP_DOWN
   title: string
   items: DropDownSubItem[]
+  badge?: string
 }
 
 export type MenuTreeItem = InternalLink | ExternalLink | DropDownItem | ParametrizedLink | CustomItem