feat(partial-approvals): partial approve v2

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

@@ -22,7 +22,16 @@ import { ExplorerDataType, getExplorerLink, getRandomInt, isSellOrder, shortenAd
 import { OrderKind, SupportedChainId } from '@cowprotocol/cow-sdk'
 import { TokenLogo } from '@cowprotocol/tokens'
 import { Command } from '@cowprotocol/types'
-import { Confetti, ExternalLink, InfoTooltip, ProductLogo, ProductVariant, TokenAmount, UI } from '@cowprotocol/ui'
+import {
+  Confetti,
+  ExternalLink,
+  InfoTooltip,
+  ProductLogo,
+  ProductVariant,
+  TokenAmount,
+  UI,
+  UnderlinedLinkStyledButton,
+} from '@cowprotocol/ui'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
 import { AnimatePresence, motion } from 'framer-motion'
@@ -1123,14 +1132,14 @@ function ExpiredStep(props: OrderProgressBarV2Props) {
           <h3>The good news</h3>
           <p>
             Unlike on other exchanges, you won't be charged for this! Feel free to{' '}
-            <styledEl.Button
+            <UnderlinedLinkStyledButton
               onClick={() => {
                 props.navigateToNewOrder?.()
                 trackNewOrderClick()
               }}
             >
               place a new order
-            </styledEl.Button>{' '}
+            </UnderlinedLinkStyledButton>{' '}
             without worry.
           </p>
         </styledEl.InfoCard>

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 { ButtonPrimary, Font, LinkStyledButton, Media, UI } from '@cowprotocol/ui'
+import { ButtonPrimary, Font, Media, UI } from '@cowprotocol/ui'
 
 import styled, { css, keyframes } from 'styled-components/macro'
 
@@ -66,6 +66,7 @@ export const StepsContainer = styled.div<{ $height: number; $minHeight?: string;
   padding: 0;
 
   // implement a gradient to hide the bottom of the steps container using white to opacity white using pseudo element
+
   &::after {
     content: ${({ bottomGradient }) => (bottomGradient ? '""' : 'none')};
     position: absolute;
@@ -143,15 +144,6 @@ export const CancelButton = styled(CancelButtonOriginal)`
   }
 `
 
-export const Button = styled(LinkStyledButton)`
-  font-size: 14px;
-  text-decoration: underline;
-
-  &:hover {
-    text-decoration: none;
-  }
-`
-
 export const ProgressImageWrapper = styled.div<{ bgColor?: string; padding?: string; height?: string; gap?: string }>`
   width: 100%;
   height: ${({ height }) => height || '246px'};

apps/cowswap-frontend/src/modules/swap/containers/SwapWidget/index.tsx

@@ -52,6 +52,7 @@ import {
 import { getQuoteTimeOffset } from 'modules/tradeQuote'
 import { useTradeSlippage } from 'modules/tradeSlippage'
 import { SettingsTab, TradeRateDetails, useHighFeeWarning } from 'modules/tradeWidgetAddons'
+import { useOpenSettingsTab } from 'modules/tradeWidgetAddons/state/settingsTabState'
 import { useTradeUsdAmounts } from 'modules/usdAmount'
 
 import { Routes } from 'common/constants/routes'
@@ -92,6 +93,7 @@ export function SwapWidget({ topContent, bottomContent }: SwapWidgetProps) {
   const deadlineState = useUserTransactionTTL()
   const partialApproveState = usePartialApprove()
   const isHookTradeType = useIsHooksTradeType()
+  const openSettings = useOpenSettingsTab()
 
   const isTradePriceUpdating = useTradePricesUpdate()
 
@@ -207,6 +209,8 @@ export function SwapWidget({ topContent, bottomContent }: SwapWidgetProps) {
   const showTwapSuggestionBanner = !enabledTradeTypes || enabledTradeTypes.includes(TradeType.ADVANCED)
   const isNativeSellInHooksStore = swapButtonContext.swapButtonState === SwapButtonState.SellNativeInHooks
 
+  const isApprovalNeeded = !isHookTradeType && swapButtonContext.needsApproval
+
   const swapWarningsTopProps: SwapWarningsTopProps = useMemo(
     () => ({
       chainId,
@@ -216,6 +220,8 @@ export function SwapWidget({ topContent, bottomContent }: SwapWidgetProps) {
       priceImpact: priceImpactParams.priceImpact,
       tradeUrlParams,
       isNativeSellInHooksStore,
+      isApprovalNeeded,
+      openSettings,
     }),
     [
       chainId,
@@ -225,6 +231,8 @@ export function SwapWidget({ topContent, bottomContent }: SwapWidgetProps) {
       priceImpactParams.priceImpact,
       tradeUrlParams,
       isNativeSellInHooksStore,
+      isApprovalNeeded,
+      openSettings,
     ],
   )
 

apps/cowswap-frontend/src/modules/swap/hooks/useSwapButtonContext.ts

@@ -33,7 +33,7 @@ import { useIsWrappedOut } from 'modules/trade/hooks/useIsWrappedInOrOut'
 import { useWrappedToken } from 'modules/trade/hooks/useWrappedToken'
 import { QuoteDeadlineParams } from 'modules/tradeQuote'
 
-import { useApproveState } from 'common/hooks/useApproveState'
+import { ApprovalState, useApproveState } from 'common/hooks/useApproveState'
 import { useSafeMemo } from 'common/hooks/useSafeMemo'
 
 import { useHandleSwapOrEthFlow } from './useHandleSwapOrEthFlow'
@@ -129,6 +129,10 @@ export function useSwapButtonContext(input: SwapButtonInput, actions: TradeWidge
     isHooksStore,
   })
 
+  const needsApproval =
+    (approvalState === ApprovalState.NOT_APPROVED || approvalState === ApprovalState.PENDING) &&
+    swapInputError === undefined
+
   return useSafeMemo(
     () => ({
       swapButtonState,
@@ -146,6 +150,7 @@ export function useSwapButtonContext(input: SwapButtonInput, actions: TradeWidge
       widgetStandaloneMode: standaloneMode,
       quoteDeadlineParams,
       isPartialApprove,
+      needsApproval,
     }),
     [
       swapButtonState,
@@ -163,6 +168,7 @@ export function useSwapButtonContext(input: SwapButtonInput, actions: TradeWidge
       standaloneMode,
       quoteDeadlineParams,
       isPartialApprove,
+      needsApproval,
     ],
   )
 }

apps/cowswap-frontend/src/modules/swap/pure/SwapButtons/index.cosmos.tsx

@@ -27,6 +27,7 @@ const swapButtonsContext: SwapButtonsContext = {
   toggleWalletModal: () => void 0,
   hasEnoughWrappedBalanceForSwap: true,
   isPartialApprove: false,
+  needsApproval: false,
   quoteDeadlineParams: {
     validFor: 0,
     quoteValidTo: 0,

apps/cowswap-frontend/src/modules/swap/pure/SwapButtons/index.tsx

@@ -41,6 +41,7 @@ export interface SwapButtonsContext {
   widgetStandaloneMode?: boolean
   quoteDeadlineParams: QuoteDeadlineParams
   isPartialApprove: boolean
+  needsApproval: boolean
 }
 
 const swapButtonStateMap: { [key in SwapButtonState]: (props: SwapButtonsContext) => JSX.Element } = {

apps/cowswap-frontend/src/modules/swap/pure/banners/PartialApprovalBanner.tsx

@@ -0,0 +1,41 @@
+import ICON_TOKENS from '@cowprotocol/assets/svg/tokens.svg'
+import { Command } from '@cowprotocol/types'
+import { BannerOrientation, ClosableBanner, InlineBanner, UnderlinedLinkStyledButton } from '@cowprotocol/ui'
+
+import styled from 'styled-components/macro'
+import * as timeago from 'timeago.js'
+
+const BANNER_STORAGE_KEY = 'partialPermitBannerKey:v0'
+
+const YEARS_SINCE_DEPLOYMENT = timeago.format(new Date('2021-06-08')).replace(/ ago/, '') // mainnet contract deployment date https://etherscan.io/tx/0xf49f90aa5a268c40001d1227b76bb4dd8247f18361fcad9fffd4a7a44f1320d3
+
+type PartialApprovalBannerProps = {
+  isApprovalNeeded?: boolean
+  openSettings: Command
+}
+
+export function PartialApprovalBanner({ isApprovalNeeded, openSettings }: PartialApprovalBannerProps) {
+  if (!isApprovalNeeded) {
+    return null
+  }
+
+  return ClosableBanner(BANNER_STORAGE_KEY, (onClose) => (
+    <InlineBanner
+      bannerType="success"
+      orientation={BannerOrientation.Horizontal}
+      customIcon={ICON_TOKENS}
+      iconSize={32}
+      onClose={onClose}
+    >
+      <p>
+        <b>NEW: </b>You can now choose to do only minimal approvals in the <Link onClick={openSettings}>settings</Link>.
+        When enabled, every order placed that needs approval will request only the minimum necessary to trade. When
+        disabled, you can enjoy the same trusted experience CoW Swap has provided for the past {YEARS_SINCE_DEPLOYMENT}.
+      </p>
+    </InlineBanner>
+  ))
+}
+
+const Link = styled(UnderlinedLinkStyledButton)`
+  padding: 0;
+`

apps/cowswap-frontend/src/modules/swap/pure/warnings.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 
 import { genericPropsChecker } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
+import { Command } from '@cowprotocol/types'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 
 import TradeGp from 'legacy/state/swap/TradeGp'
@@ -11,6 +12,7 @@ import { CompatibilityIssuesWarning } from 'modules/trade/pure/CompatibilityIssu
 import { TradeUrlParams } from 'modules/trade/types/TradeRawState'
 import { BundleTxWrapBanner, HighFeeWarning } from 'modules/tradeWidgetAddons'
 
+import { PartialApprovalBanner } from './banners/PartialApprovalBanner'
 import { TwapSuggestionBanner } from './banners/TwapSuggestionBanner'
 
 export interface SwapWarningsTopProps {
@@ -21,6 +23,8 @@ export interface SwapWarningsTopProps {
   priceImpact: Percent | undefined
   tradeUrlParams: TradeUrlParams
   isNativeSellInHooksStore: boolean
+  isApprovalNeeded: boolean
+  openSettings: Command
 }
 
 export interface SwapWarningsBottomProps {
@@ -39,6 +43,8 @@ export const SwapWarningsTop = React.memo(function (props: SwapWarningsTopProps)
     priceImpact,
     tradeUrlParams,
     isNativeSellInHooksStore,
+    isApprovalNeeded,
+    openSettings
   } = props
 
   return (
@@ -49,6 +55,7 @@ export const SwapWarningsTop = React.memo(function (props: SwapWarningsTopProps)
         <>
           <HighFeeWarning />
           <BundleTxWrapBanner />
+          <PartialApprovalBanner isApprovalNeeded={isApprovalNeeded} openSettings={openSettings} />
 
           {showTwapSuggestionBanner && (
             <TwapSuggestionBanner

apps/cowswap-frontend/src/modules/tradeWidgetAddons/containers/SettingsTab/index.tsx

@@ -125,12 +125,19 @@ export function SettingsTab({
                 <RowBetween>
                   <RowFixed>
                     <ThemedText.Black fontWeight={400} fontSize={14}>
-                      <Trans>Partial Approve</Trans>
+                      <Trans>Minimal Approvals</Trans>
                     </ThemedText.Black>
                     <HelpTooltip
                       text={
                         <Trans>
-                          Allows you to approve a token for a specific amount, rather than the maximum amount.
+                          By default, token approvals & permits are for an unlimited amount, which ensures you don't pay extra for subsequent trades.
+                          <br />
+                          <br />
+                          When this setting is enabled, approvals & permits will be for the minimum amount instead of unlimited.
+                          This incurs additional costs at every trade.
+                          <br />
+                          <br />
+                          Existing approvals must be revoked manually before you can re-approve.
                         </Trans>
                       }
                     />

apps/cowswap-frontend/src/modules/tradeWidgetAddons/pure/Row/RowSlippageContent/index.tsx

@@ -1,4 +1,3 @@
-import { useSetAtom } from 'jotai'
 
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { Command } from '@cowprotocol/types'
@@ -10,7 +9,7 @@ import styled from 'styled-components/macro'
 
 import { getNativeSlippageTooltip, getNonNativeSlippageTooltip } from 'common/utils/tradeSettingsTooltips'
 
-import { settingsTabStateAtom } from '../../../state/settingsTabState'
+import { useOpenSettingsTab } from '../../../state/settingsTabState'
 import { RowStyleProps, StyledInfoIcon, StyledRowBetween, TextWrapper, TransactionText } from '../styled'
 
 const DefaultSlippage = styled.span`
@@ -65,9 +64,7 @@ export function RowSlippageContent(props: RowSlippageContentProps) {
     isSmartSlippageLoading,
   } = props
 
-  const setSettingTabState = useSetAtom(settingsTabStateAtom)
-
-  const openSettings = () => setSettingTabState({ open: true })
+  const openSettings = useOpenSettingsTab()
 
   const tooltipContent =
     slippageTooltip ||

apps/cowswap-frontend/src/modules/tradeWidgetAddons/state/settingsTabState.ts

@@ -1,3 +1,9 @@
-import { atom } from 'jotai'
+import { atom, useSetAtom } from 'jotai'
 
 export const settingsTabStateAtom = atom({ open: false })
+
+export function useOpenSettingsTab() {
+  const setSettingTabState = useSetAtom(settingsTabStateAtom)
+
+  return () => setSettingTabState({ open: true })
+}

libs/ui/src/containers/InlineBanner/index.tsx

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react'
+import { ReactNode } from 'react'
 
 import { X } from 'react-feather'
 import SVG from 'react-inlinesvg'

libs/ui/src/pure/LinkStyledButton/index.tsx

@@ -23,3 +23,12 @@ export const LinkStyledButton = styled.button<{ disabled?: boolean; bg?: boolean
     text-decoration: none;
   }
 `
+
+export const UnderlinedLinkStyledButton = styled(LinkStyledButton)`
+  font-size: 14px;
+  text-decoration: underline;
+
+  &:hover {
+    text-decoration: none;
+  }
+`