Merge branch 'develop' of https://github.com/cowprotocol/cowswap into…

… widget-and-fee # Conflicts: # apps/cowswap-frontend/src/modules/swap/helpers/getSwapButtonState.ts # apps/cowswap-frontend/src/modules/swap/hooks/useFlowContext.ts # apps/cowswap-frontend/src/modules/swap/pure/Row/RowFeeContent/index.cosmos.tsx # apps/cowswap-frontend/src/modules/swap/pure/TradeRates/index.cosmos.tsx # apps/cowswap-frontend/src/modules/swap/pure/TradeSummary/index.cosmos.tsx
xyzseer · Mar 5, 2024 · dad885e · dad885e
2 parents 036f5d7 + 2f737ba
commit dad885e
Show file tree

Hide file tree

Showing 125 changed files with 1,143 additions and 412 deletions.
diff --git a/.release-please-manifest.json b/.release-please-manifest.json
@@ -1,5 +1,5 @@
 {
-  "apps/cowswap-frontend": "1.60.0",
+  "apps/cowswap-frontend": "1.61.1",
   "apps/explorer": "2.28.0",
   "libs/permit-utils": "0.1.2",
   "libs/widget-lib": "0.5.0",

diff --git a/apps/cowswap-frontend/CHANGELOG.md b/apps/cowswap-frontend/CHANGELOG.md
@@ -1,5 +1,28 @@
 # Changelog
 
+## [1.61.1](https://github.com/cowprotocol/cowswap/compare/cowswap-v1.61.0...cowswap-v1.61.1) (2024-03-04)
+
+
+### Bug Fixes
+
+* **eth-flow:** prevent orders with expired quotes ([#3965](https://github.com/cowprotocol/cowswap/issues/3965)) ([f965020](https://github.com/cowprotocol/cowswap/commit/f965020cec5e0901138130e050939cc912ca4fd8))
+
+## [1.61.0](https://github.com/cowprotocol/cowswap/compare/cowswap-v1.60.0...cowswap-v1.61.0) (2024-02-29)
+
+
+### Features
+
+* **appzi:** new appzi survey for limit orders ([#3918](https://github.com/cowprotocol/cowswap/issues/3918)) ([99e004a](https://github.com/cowprotocol/cowswap/commit/99e004ad410aefacfd2090423ef2e480ed48302e))
+* **settings:** remove expert mode ([#3905](https://github.com/cowprotocol/cowswap/issues/3905)) ([4f98075](https://github.com/cowprotocol/cowswap/commit/4f98075dbcacdbf49e9f43fb2a0936411d6a7365))
+
+
+### Bug Fixes
+
+* always open hash links in new tab ([#3888](https://github.com/cowprotocol/cowswap/issues/3888)) ([0275de9](https://github.com/cowprotocol/cowswap/commit/0275de9f3ec04f697878b0507a5b09c8842aa7ba))
+* increase quote refresh interval for Swap and TWAP ([#3935](https://github.com/cowprotocol/cowswap/issues/3935)) ([55b5e22](https://github.com/cowprotocol/cowswap/commit/55b5e22b8ad0edba5e8c114fcd11f8caa39b5ab4))
+* **limit-orders:** price updated warning should not be displayed ([#3925](https://github.com/cowprotocol/cowswap/issues/3925)) ([7a5b64d](https://github.com/cowprotocol/cowswap/commit/7a5b64d9c0c0d7e44aa15502735c843d43bc1fc7))
+* **twap:** allow creating orders with 100% slippage ([#3897](https://github.com/cowprotocol/cowswap/issues/3897)) ([05a604d](https://github.com/cowprotocol/cowswap/commit/05a604d0fd92f0ca0295b1ccef0cf4c7725ab24c))
+
 ## [1.60.0](https://github.com/cowprotocol/cowswap/compare/cowswap-v1.59.2...cowswap-v1.60.0) (2024-02-22)
 
 

diff --git a/apps/cowswap-frontend/package.json b/apps/cowswap-frontend/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/cowswap",
-  "version": "1.60.0",
+  "version": "1.61.1",
   "description": "CoW Swap",
   "main": "index.js",
   "author": "",

diff --git a/apps/cowswap-frontend/src/common/constants/common.ts b/apps/cowswap-frontend/src/common/constants/common.ts
@@ -5,8 +5,6 @@ import ms from 'ms.macro'
 
 export const HIGH_FEE_WARNING_PERCENTAGE = new Percent(1, 10)
 
-export const SAFE_COW_APP_LINK = 'https://app.safe.global/share/safe-app?appUrl=https%3A%2F%2Fswap.cow.fi&chain=eth'
-
 export const MAX_ORDER_DEADLINE = ms`182d` + ms`12h` // 6 months, matching backend's https://github.com/cowprotocol/infrastructure/blob/901ed8e2fe3ea57956585f107bdd7539c2e7d3d1/services/Pulumi.yaml#L15
 
 // Use a 150K gas as a fallback if there's issue calculating the gas estimation (fixes some issues with some nodes failing to calculate gas costs for SC wallets)

diff --git a/apps/cowswap-frontend/src/common/containers/TradeApprove/useTradeApproveCallback.ts b/apps/cowswap-frontend/src/common/containers/TradeApprove/useTradeApproveCallback.ts
@@ -45,14 +45,15 @@ export function useTradeApproveCallback(amountToApprove?: CurrencyAmount<Currenc
         .catch((error) => {
           console.error('Error setting the allowance for token', error)
 
-          if (!isRejectRequestProviderError(error)) {
+          if (isRejectRequestProviderError(error)) {
+            updateTradeApproveState({ error: 'User rejected approval transaction' })
+          } else {
             const errorCode = error?.code && typeof error.code === 'number' ? error.code : null
 
             approvalAnalytics('Error', symbol, errorCode)
+            updateTradeApproveState({ error: typeof error === 'string' ? error : error.message || error.toString() })
           }
 
-          updateTradeApproveState({ error: typeof error === 'string' ? error : error.message || error.toString() })
-
           throw error
         })
     },

diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/index.tsx b/apps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/index.tsx
@@ -7,24 +7,29 @@ import * as styledEl from './styled'
 
 export interface CurrencyArrowSeparatorProps {
   isLoading: boolean
+  disabled?: boolean
   withRecipient: boolean
   hasSeparatorLine?: boolean
   isCollapsed?: boolean
   onSwitchTokens(): void
-  border?: boolean
 }
 
 export function CurrencyArrowSeparator(props: CurrencyArrowSeparatorProps) {
-  const { isLoading, onSwitchTokens, withRecipient, isCollapsed = true, hasSeparatorLine } = props
+  const { isLoading, onSwitchTokens, withRecipient, isCollapsed = true, hasSeparatorLine, disabled = false } = props
   const isInjectedWidgetMode = isInjectedWidget()
 
   return (
-    <styledEl.Box withRecipient={withRecipient} isCollapsed={isCollapsed} hasSeparatorLine={hasSeparatorLine}>
+    <styledEl.Box
+      withRecipient={withRecipient}
+      isCollapsed={isCollapsed}
+      hasSeparatorLine={hasSeparatorLine}
+      disabled={disabled}
+    >
       <styledEl.LoadingWrapper isLoading={isLoading}>
         {!isInjectedWidgetMode && isLoading ? (
           <styledEl.CowImg src={loadingCowWebp} alt="loading" />
         ) : (
-          <styledEl.ArrowDownIcon onClick={onSwitchTokens} />
+          <styledEl.ArrowDownIcon onClick={disabled ? undefined : onSwitchTokens} disabled={disabled} />
         )}
       </styledEl.LoadingWrapper>
     </styledEl.Box>

diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/styled.tsx b/apps/cowswap-frontend/src/common/pure/CurrencyArrowSeparator/styled.tsx
@@ -5,10 +5,15 @@ import styled, { css } from 'styled-components/macro'
 
 import { loadingAnimationMixin } from './style-mixins'
 
-export const Box = styled.div<{ withRecipient: boolean; isCollapsed: boolean; hasSeparatorLine?: boolean }>`
+export const Box = styled.div<{
+  withRecipient: boolean
+  isCollapsed: boolean
+  hasSeparatorLine?: boolean
+  disabled: boolean
+}>`
   display: ${({ withRecipient }) => (withRecipient ? 'inline-flex' : 'block')};
   margin: ${({ withRecipient, isCollapsed }) => (withRecipient ? '0' : isCollapsed ? '-13px auto' : '2px auto')};
-  cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? 'inherit' : 'pointer')};
   color: inherit;
   position: relative;
   z-index: 2;
@@ -58,15 +63,15 @@ export const LoadingWrapper = styled.div<{ isLoading: boolean }>`
   ${({ isLoading }) => isLoading && loadingAnimationMixin}
 `
 
-export const ArrowDownIcon = styled(ArrowDown)`
+export const ArrowDownIcon = styled(ArrowDown)<{ disabled: boolean }>`
   display: block;
   margin: auto;
   stroke: currentColor;
   stroke-width: 3px;
   padding: 0;
   height: 100%;
   width: 20px;
-  cursor: pointer;
+  cursor: ${({ disabled }) => (disabled ? 'inherit' : 'pointer')};
   color: inherit;
 `
 

diff --git a/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx b/apps/cowswap-frontend/src/common/pure/CurrencyInputPanel/CurrencyInputPanel.tsx
@@ -4,8 +4,7 @@ import { setMaxSellTokensAnalytics } from '@cowprotocol/analytics'
 import { NATIVE_CURRENCIES } from '@cowprotocol/common-const'
 import { formatInputAmount, getIsNativeToken } from '@cowprotocol/common-utils'
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
-import { TokenAmount } from '@cowprotocol/ui'
-import { MouseoverTooltip } from '@cowprotocol/ui'
+import { MouseoverTooltip, TokenAmount } from '@cowprotocol/ui'
 import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 
 import { Trans } from '@lingui/macro'
@@ -34,6 +33,7 @@ export interface CurrencyInputPanelProps extends Partial<BuiltItProps> {
   isChainIdUnsupported: boolean
   disabled?: boolean
   inputDisabled?: boolean
+  tokenSelectorDisabled?: boolean
   inputTooltip?: string
   showSetMax?: boolean
   maxBalance?: CurrencyAmount<Currency> | undefined
@@ -58,6 +58,7 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
     showSetMax = false,
     maxBalance,
     inputDisabled = false,
+    tokenSelectorDisabled = false,
     inputTooltip,
     onUserInput,
     allowsOffchainSigning,
@@ -153,6 +154,7 @@ export function CurrencyInputPanel(props: CurrencyInputPanelProps) {
               }
               currency={disabled ? undefined : currency || undefined}
               loading={areCurrenciesLoading || disabled}
+              readonlyMode={tokenSelectorDisabled}
             />
           </div>
           <div>

diff --git a/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx b/apps/cowswap-frontend/src/common/pure/CurrencySelectButton/styled.tsx
@@ -36,6 +36,7 @@ export const CurrencySelectWrapper = styled.button<{ isLoading: boolean; $stubbe
   pointer-events: ${({ readonlyMode }) => (readonlyMode ? 'none' : '')};
   border-radius: var(${UI.BORDER_RADIUS_NORMAL});
   padding: 6px;
+  ${({ readonlyMode }) => (readonlyMode ? 'padding-right: 10px;' : '')}
   transition: background var(${UI.ANIMATION_DURATION}) ease-in-out, color var(${UI.ANIMATION_DURATION}) ease-in-out;
   max-width: 190px;
 

diff --git a/apps/cowswap-frontend/src/common/pure/NewModal/index.tsx b/apps/cowswap-frontend/src/common/pure/NewModal/index.tsx
@@ -18,13 +18,18 @@ const ModalInner = styled.div`
   position: relative;
 `
 
-const Wrapper = styled.div<{ maxWidth?: number | string; minHeight?: number | string }>`
+const Wrapper = styled.div<{
+  maxWidth?: number | string
+  minHeight?: number | string
+  modalMode?: boolean
+}>`
   display: flex;
   width: 100%;
   height: 100%;
   margin: auto;
   overflow-y: auto;
-  background: var(${UI.COLOR_PAPER});
+  background: ${({ modalMode }) => (modalMode ? `var(${UI.COLOR_PAPER_DARKER})` : `var(${UI.COLOR_PAPER})`)};
+  border: ${({ modalMode }) => (modalMode ? `1px solid var(${UI.COLOR_PAPER})` : 'none')};
   border-radius: var(${UI.BORDER_RADIUS_NORMAL});
   box-shadow: var(${UI.BOX_SHADOW});
 
@@ -49,11 +54,12 @@ const Wrapper = styled.div<{ maxWidth?: number | string; minHeight?: number | st
 
 const Heading = styled.h2`
   display: flex;
+  flex-flow: row wrap;
   justify-content: space-between;
   width: 100%;
   height: auto;
   margin: 0;
-  padding: 18px 40px;
+  padding: 16px 20px 3px;
   font-size: var(${UI.FONT_SIZE_MEDIUM});
 
   ${({ theme }) => theme.mediaWidth.upToSmall`
@@ -63,13 +69,10 @@ const Heading = styled.h2`
 `
 
 const IconX = styled.div`
-  position: absolute;
-  top: 16px;
-  right: 10px;
   cursor: pointer;
   opacity: 0.7;
   transition: opacity var(${UI.ANIMATION_DURATION}) ease-in-out;
-  margin: 0 0 0 auto;
+  margin: 0;
 
   > svg {
     width: var(${UI.ICON_SIZE_NORMAL});
@@ -88,23 +91,27 @@ const BackButtonStyled = styled(BackButton)`
   left: 10px;
 `
 
-const NewModalContent = styled.div<{ paddingTop?: number }>`
+const NewModalContent = styled.div<{ padding?: string }>`
   display: flex;
   align-items: center;
   justify-content: center;
   flex-flow: column wrap;
   flex: 1;
   width: 100%;
   height: 100%;
-  padding: 0 var(${UI.PADDING_NORMAL}) var(${UI.PADDING_NORMAL});
+  padding: ${({ padding }) => padding || `0 var(${UI.PADDING_NORMAL}) var(${UI.PADDING_NORMAL})`};
+
+  &.modalMode {
+    padding: 10px;
+  }
 
   h1,
   h2,
   h3 {
     width: 100%;
-    font-size: var(${UI.FONT_SIZE_LARGER});
+    font-size: var(${UI.FONT_SIZE_MEDIUM});
     font-weight: var(${UI.FONT_WEIGHT_BOLD});
-    text-align: center;
+    text-align: left;
     line-height: 1.4;
     margin: 0 auto;
   }
@@ -159,17 +166,21 @@ export function NewModal({ maxWidth = 450, minHeight = 350, modalMode, title, ch
   const onDismissCallback = useCallback(() => onDismiss?.(), [onDismiss])
 
   return (
-    <Wrapper maxWidth={maxWidth} minHeight={minHeight}>
+    <Wrapper maxWidth={maxWidth} minHeight={minHeight} modalMode={modalMode}>
       <ModalInner>
         {!modalMode && <BackButtonStyled onClick={onDismissCallback} />}
-        {title && <Heading>{title}</Heading>}
-        {modalMode && (
-          <IconX onClick={onDismissCallback}>
-            <SVG src={CLOSE_ICON} />
-          </IconX>
+        {title && (
+          <Heading>
+            {title}{' '}
+            {modalMode && (
+              <IconX onClick={onDismissCallback}>
+                <SVG src={CLOSE_ICON} />
+              </IconX>
+            )}
+          </Heading>
         )}
 
-        <NewModalContent>{children}</NewModalContent>
+        <NewModalContent className={modalMode ? 'modalMode' : ''}>{children}</NewModalContent>
       </ModalInner>
     </Wrapper>
   )

diff --git a/apps/cowswap-frontend/src/legacy/state/price/hooks.ts b/apps/cowswap-frontend/src/legacy/state/price/hooks.ts
@@ -5,15 +5,15 @@ import { SupportedChainId as ChainId } from '@cowprotocol/cow-sdk'
 import { useDispatch, useSelector } from 'react-redux'
 
 import {
-  updateQuote,
-  UpdateQuoteParams,
   ClearQuoteParams,
   getNewQuote,
   GetQuoteParams,
   refreshQuote,
-  SetQuoteErrorParams,
-  setQuoteError,
   RefreshQuoteParams,
+  setQuoteError,
+  SetQuoteErrorParams,
+  updateQuote,
+  UpdateQuoteParams,
 } from './actions'
 import { QuoteInformationObject, QuotesMap } from './reducer'
 

diff --git a/apps/cowswap-frontend/src/legacy/state/swap/TradeGp.ts b/apps/cowswap-frontend/src/legacy/state/swap/TradeGp.ts
@@ -14,7 +14,7 @@ interface FeeInformation {
   amount: string
 }
 
-export type FeeForTrade = { feeAsCurrency: CurrencyAmount<Currency> } & Pick<FeeInformation, 'amount'>
+export type FeeForTrade = { feeAsCurrency: CurrencyAmount<Currency> } & FeeInformation
 
 type TradeExecutionPrice = CanonicalMarketParams<CurrencyAmount<Currency> | undefined> & { price?: PriceInformation }
 

diff --git a/apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx b/apps/cowswap-frontend/src/modules/account/containers/Transaction/ActivityDetails.tsx
@@ -6,7 +6,15 @@ import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { useENS } from '@cowprotocol/ens'
 import { TokenLogo, useTokenBySymbolOrAddress } from '@cowprotocol/tokens'
 import { UiOrderType } from '@cowprotocol/types'
-import { ExternalLink, TokenAmount, UI } from '@cowprotocol/ui'
+import {
+  ExternalLink,
+  TokenAmount,
+  UI,
+  Icon,
+  IconType,
+  BannerOrientation,
+  CustomRecipientWarningBanner,
+} from '@cowprotocol/ui'
 import { CurrencyAmount } from '@uniswap/sdk-core'
 
 import { OrderProgressBar } from 'legacy/components/OrderProgressBar'
@@ -19,8 +27,6 @@ import { EthFlowStepper } from 'modules/swap/containers/EthFlowStepper'
 import { useCancelOrder } from 'common/hooks/useCancelOrder'
 import { isPending } from 'common/hooks/useCategorizeRecentActivity'
 import { useGetSurplusData } from 'common/hooks/useGetSurplusFiatValue'
-import { Icon, IconType } from 'common/pure/Icon'
-import { BannerOrientation, CustomRecipientWarningBanner } from 'common/pure/InlineBanner/banners'
 import { RateInfo, RateInfoParams } from 'common/pure/RateInfo'
 import { SafeWalletLink } from 'common/pure/SafeWalletLink'
 import {

diff --git a/apps/cowswap-frontend/src/modules/application/containers/App/Updaters.tsx b/apps/cowswap-frontend/src/modules/application/containers/App/Updaters.tsx
@@ -10,6 +10,7 @@ import { EthFlowDeadlineUpdater, EthFlowSlippageUpdater } from 'modules/swap/sta
 import { useOnTokenListAddingError } from 'modules/tokensList'
 import { UsdPricesUpdater } from 'modules/usdAmount'
 
+import { useFeatureFlags } from 'common/hooks/featureFlags/useFeatureFlags'
 import { TotalSurplusUpdater } from 'common/state/totalSurplusState'
 import { ApplicationUpdater } from 'common/updaters/ApplicationUpdater'
 import { CancelReplaceTxUpdater } from 'common/updaters/CancelReplaceTxUpdater'
@@ -34,6 +35,7 @@ export function Updaters() {
   const { chainId, account } = useWalletInfo()
   const { tokenLists, appCode } = useInjectedWidgetParams()
   const onTokenListAddingError = useOnTokenListAddingError()
+  const { isGeoBlockEnabled } = useFeatureFlags()
 
   return (
     <>
@@ -62,7 +64,7 @@ export function Updaters() {
       <CowEventsUpdater />
       <TotalSurplusUpdater />
       <UsdPricesUpdater />
-      <TokensListsUpdater chainId={chainId} />
+      <TokensListsUpdater chainId={chainId} isGeoBlockEnabled={isGeoBlockEnabled} />
       <WidgetTokensListsUpdater
         tokenLists={tokenLists}
         appCode={appCode}

diff --git a/apps/cowswap-frontend/src/modules/application/containers/App/index.tsx b/apps/cowswap-frontend/src/modules/application/containers/App/index.tsx
@@ -1,6 +1,5 @@
 import { CHRISTMAS_THEME_ENABLED } from '@cowprotocol/common-const'
 import { isInjectedWidget } from '@cowprotocol/common-utils'
-import { OnlyUniswapListAvailableBanner } from '@cowprotocol/tokens'
 
 import ErrorBoundary from 'legacy/components/ErrorBoundary'
 import Footer from 'legacy/components/Footer'
@@ -32,7 +31,6 @@ export function App() {
 
       <styledEl.AppWrapper>
         <URLWarning />
-        <OnlyUniswapListAvailableBanner />
 
         <OrdersPanel />