Merge pull request #3617 from cowprotocol/develop

Release: cowswap/1.55.0, explorer/2.27.0

.github/workflows/ci.yml

@@ -166,8 +166,8 @@ jobs:
         id: cypress-run
         uses: cypress-io/[email protected]
         with:
-          wait-on: http://localhost:3000
-          wait-on-timeout: 200
+          wait-on: http://[::1]:3000
+          wait-on-timeout: 600
           install: false
           working-directory: apps/cowswap-frontend-e2e
         env:

.github/workflows/deployment.yml

@@ -6,6 +6,15 @@ on:
     branches: [main, develop]
     tags: [v*]
   workflow_dispatch: # Manually trigger it via UI/CLI/API
+    inputs:
+      app:
+        description: App to deploy
+        required: true
+        type: choice
+        options:
+          - COWSWAP
+          - EXPLORER
+          - ALL
 
 jobs:
 
@@ -17,6 +26,7 @@ jobs:
     secrets: inherit
     with:
       env_name: dev
+      app: ALL
 
   vercel-pre-prod:
     # Deploys to Vercel staging and barn environments
@@ -29,6 +39,7 @@ jobs:
         env_name: [barn, staging] # deploys both in parallel
     with:
       env_name: ${{ matrix.env_name }}
+      app: ALL
 
   vercel-prod:
     # Deploys to Vercel prod environment
@@ -38,3 +49,4 @@ jobs:
     secrets: inherit
     with:
       env_name: prod
+      app: ${{ inputs.app }}

.github/workflows/vercel.yml

@@ -7,6 +7,10 @@ on:
         description: 'Environment to deploy to. Options are: dev, staging, barn and prod'
         required: true
         type: string
+      app:
+        description: 'Application to deploy. Options are: ALL, COWSWAP, EXPLORER'
+        required: true
+        type: string
 
 env:
   VERCEL_ORG_ID: ${{ secrets.VERCEL_ORG_ID }}
@@ -17,13 +21,17 @@ jobs:
     environment: ${{ inputs.env_name }} # Environment rules defined on GH UI
     concurrency: ${{ inputs.env_name }} # Only one run per env at a time
 
+    strategy:
+      matrix:
+        project_suffix: ${{ inputs.app == 'ALL' && fromJSON('["COWSWAP", "EXPLORER"]') || (inputs.app) }}
+
     steps:
       - name: Checkout code
         uses: actions/checkout@v3
 
       - name: Set VERCEL_PROJECT_ID env var
         # It's set in each env's config on https://github.com/cowprotocol/cowswap/settings/environments
-        run: echo "VERCEL_PROJECT_ID=${{ secrets.VERCEL_PROJECT_ID }}" >> $GITHUB_ENV
+        run: echo "VERCEL_PROJECT_ID=${{ secrets[format('VERCEL_PROJECT_ID_{0}', matrix.project_suffix)] }}" >> $GITHUB_ENV
 
       - name: Install Vercel CLI
         run: npm install --global vercel@latest
@@ -43,7 +51,14 @@ jobs:
           REACT_APP_NETWORK_URL_1=${{ secrets.REACT_APP_NETWORK_URL_1 }}
           REACT_APP_NETWORK_URL_100=${{ secrets.REACT_APP_NETWORK_URL_100 }}
           REACT_APP_NETWORK_URL_5=${{ secrets.REACT_APP_NETWORK_URL_5 }}
+          REACT_APP_NETWORK_URL_11155111=${{ secrets.REACT_APP_NETWORK_URL_11155111 }}
           REACT_APP_WC_PROJECT_ID=${{ secrets.REACT_APP_WC_PROJECT_ID }}
+          REACT_APP_IPFS_READ_URI=${{ secrets.REACT_APP_IPFS_READ_URI }}
+          REACT_APP_EXPLORER_SENTRY_DSN=${{ secrets.EXPLORER_SENTRY_DSN }}
+          REACT_APP_EXPLORER_GOOGLE_ANALYTICS_ID=${{ secrets.EXPLORER_GOOGLE_ANALYTICS_ID }}
+          REACT_APP_SUBGRAPH_URL_MAINNET=${{ secrets.REACT_APP_SUBGRAPH_URL_MAINNET }}
+          REACT_APP_SUBGRAPH_URL_GNOSIS_CHAIN=${{ secrets.REACT_APP_SUBGRAPH_URL_GNOSIS_CHAIN }}
+          REACT_APP_SUBGRAPH_URL_GOERLI=${{ secrets.REACT_APP_SUBGRAPH_URL_GOERLI }}
           vercel build -t ${{ secrets.VERCEL_TOKEN }} --prod
 
       - name: Get the version

.release-please-manifest.json

@@ -0,0 +1,7 @@
+{
+  "apps/cowswap-frontend": "1.54.2",
+  "apps/explorer": "2.26.0",
+  "libs/permit-utils": "0.0.2",
+  "libs/widget-lib": "0.2.1",
+  "libs/widget-react": "0.2.3"
+}

README.md

@@ -47,6 +47,23 @@ yarn build
 yarn test
 ```
 
+# 🔎 Explorer
+
+Start the Explorer on http://localhost:4200
+
+[Read more about the Explorer](apps/explorer/README.md)
+
+### Start
+```bash
+yarn start:explorer
+```
+
+### Build
+```bash
+yarn build:explorer
+```
+
+
 # 🖼️ Widget Configurator
 
 Start the Widget Configurator on http://127.0.0.1:4200/widget-configurator
@@ -133,6 +150,7 @@ Alternatively you can define the RPC URLs directly with the following environmen
 ```ini
 REACT_APP_NETWORK_URL_1: https://...
 REACT_APP_NETWORK_URL_5: https://...
+REACT_APP_NETWORK_URL_11155111: https://...
 REACT_APP_NETWORK_URL_100: https://...
 ```
 

apps/cowswap-frontend/.env

@@ -8,6 +8,7 @@
 # RPC Nodes
 # REACT_APP_NETWORK_URL_1=http://your-rpc-url
 # REACT_APP_NETWORK_URL_5=https://goerli.infura.io/v3/2af29cd5ac554ae3b8d991afe1ba4b7d
+# REACT_APP_NETWORK_URL_11155111=https://rpc2.sepolia.org
 # REACT_APP_NETWORK_URL_100=https://rpc.gnosischain.com
 
 # INFURA KEY
@@ -49,7 +50,7 @@
 #######################################
 # The app will attach some metadata to all orders.
 #
-# This metadata will be sent to the smart contract as a hexadecimal value in an order field called `AppData`. 
+# This metadata will be sent to the smart contract as a hexadecimal value in an order field called `AppData`.
 # This value comes from hashing the content of a metadata JSON containing some information about the trade (using `keccak256` on the `UTF-8` bytes).
 # The format of the JSON follows the format defined in https://github.com/cowprotocol/app-data
 #
@@ -136,4 +137,4 @@ REACT_APP_MOCK=true
 # REACT_APP_DOMAIN_REGEX_ENS="(:?^cowswap\.eth|ipfs)"
 
 # Path regex (to detect environment)
-# REACT_APP_PATH_REGEX_ENS="/ipfs"
+# REACT_APP_PATH_REGEX_ENS="/ipfs"

apps/cowswap-frontend/package.json

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

apps/cowswap-frontend/src/api/gnosisProtocol/priceApi.ts

@@ -6,19 +6,16 @@ import { GpPriceStrategy } from 'legacy/state/gas/atoms'
 
 const API_NAME = 'CoW Protocol'
 const STRATEGY_URL_BASE = RAW_CODE_LINK + '/configuration/config/'
-
-function getPriceStrategyUrl(): Record<SupportedChainId, string> {
-  const environment = environmentName !== 'production' ? 'barn' : environmentName
-  const url = STRATEGY_URL_BASE + environment + '/strategies'
-  return {
-    [SupportedChainId.MAINNET]: url + '/strategy-1.json',
-    [SupportedChainId.GNOSIS_CHAIN]: url + '/strategy-100.json',
-    [SupportedChainId.GOERLI]: url + '/strategy-5.json',
-  }
+const ENV_BASE = environmentName !== 'production' ? 'barn' : environmentName
+const STRATEGY_URL = STRATEGY_URL_BASE + ENV_BASE + '/strategies'
+
+const STRATEGY_API_URL: Record<SupportedChainId, string> = {
+  [SupportedChainId.MAINNET]: STRATEGY_URL + '/strategy-1.json',
+  [SupportedChainId.GNOSIS_CHAIN]: STRATEGY_URL + '/strategy-100.json',
+  [SupportedChainId.GOERLI]: STRATEGY_URL + '/strategy-5.json',
+  [SupportedChainId.SEPOLIA]: STRATEGY_URL + '/strategy-11155111.json',
 }
 
-const STRATEGY_API_URL = getPriceStrategyUrl()
-
 export type PriceStrategy = {
   primary: GpPriceStrategy
   secondary: GpPriceStrategy

apps/cowswap-frontend/src/common/constants/common.ts

@@ -1,5 +1,9 @@
 import { Percent } from '@uniswap/sdk-core'
 
+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

apps/cowswap-frontend/src/common/hooks/featureFlags/useVerifiedQuotesEnabled.ts

@@ -3,16 +3,14 @@ import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { useFeatureFlags } from './useFeatureFlags'
 
 export function useVerifiedQuotesEnabled(chainId: SupportedChainId): boolean {
-  const { verifyQuotesMainnet, verifyQuotesGoerli, verifyQuotesGnosis } = useFeatureFlags()
+  const { verifyQuotesMainnet, verifyQuotesGoerli, verifyQuotesGnosis, verifyQuotesSepolia } = useFeatureFlags()
 
-  switch (chainId) {
-    case SupportedChainId.MAINNET:
-      return !!verifyQuotesMainnet
-    case SupportedChainId.GNOSIS_CHAIN:
-      return !!verifyQuotesGnosis
-    case SupportedChainId.GOERLI:
-      return !!verifyQuotesGoerli
-    default:
-      return false
+  const map: Record<SupportedChainId, boolean> = {
+    [SupportedChainId.MAINNET]: !!verifyQuotesMainnet,
+    [SupportedChainId.GNOSIS_CHAIN]: !!verifyQuotesGnosis,
+    [SupportedChainId.GOERLI]: !!verifyQuotesGoerli,
+    [SupportedChainId.SEPOLIA]: !!verifyQuotesSepolia,
   }
+
+  return map[chainId]
 }

apps/cowswap-frontend/src/common/hooks/useCategorizeRecentActivity.ts

@@ -1,11 +1,10 @@
 import { useMemo } from 'react'
 
-import { OrderClass } from '@cowprotocol/cow-sdk'
-
 import { useRecentActivity } from 'legacy/hooks/useRecentActivity'
-import { OrderStatus, PENDING_STATES } from 'legacy/state/orders/actions'
+import { Order, OrderStatus, PENDING_STATES } from 'legacy/state/orders/actions'
 
 import { getIsFinalizedOrder } from 'utils/orderUtils/getIsFinalizedOrder'
+import { getUiOrderType, UiOrderType } from 'utils/orderUtils/getUiOrderType'
 
 export const isPending = ({ status }: { status: OrderStatus }) => PENDING_STATES.includes(status)
 
@@ -19,7 +18,7 @@ export function useCategorizeRecentActivity() {
       allRecentActivity.reduce<[string[], string[]]>(
         (acc, activity) => {
           // Only display regular on-chain transactions (wrap, approval, etc) OR MARKET orders
-          if (!activity.class || activity.class === OrderClass.MARKET) {
+          if (!activity.class || getUiOrderType(activity as Order) === UiOrderType.SWAP) {
             if (isPending(activity)) {
               acc[0].push(activity.id)
             } else if (getIsFinalizedOrder(activity)) {

apps/cowswap-frontend/src/common/hooks/useIsProviderNetworkUnsupported.ts

@@ -1,8 +1,21 @@
+import { useMemo } from 'react'
+
 import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { useWeb3React } from '@web3-react/core'
 
+import { useFeatureFlags } from './featureFlags/useFeatureFlags'
+
 export function useIsProviderNetworkUnsupported(): boolean {
   const { chainId } = useWeb3React()
+  const { isSepoliaEnabled } = useFeatureFlags()
+
+  return useMemo(() => {
+    if (!chainId) return false
+
+    if (chainId === SupportedChainId.SEPOLIA) {
+      return !isSepoliaEnabled
+    }
 
-  return !!chainId && !(chainId in SupportedChainId)
+    return !(chainId in SupportedChainId)
+  }, [chainId, isSepoliaEnabled])
 }

apps/cowswap-frontend/src/common/pure/InlineBanner/banners.tsx

@@ -1,8 +1,11 @@
 import { TokenAmount } from '@cowprotocol/ui'
 import { Currency, CurrencyAmount, Percent } from '@uniswap/sdk-core'
 
+import styled from 'styled-components/macro'
 import { Nullish } from 'types'
 
+import { LinkStyledButton } from 'legacy/theme'
+
 import { ButtonSecondary } from '../ButtonSecondary'
 import { CowSwapSafeAppLink } from '../CowSwapSafeAppLink'
 
@@ -121,3 +124,35 @@ export function CustomRecipientWarningBanner({
     </InlineBanner>
   )
 }
+
+export type SellNativeWarningBannerProps = {
+  sellWrapped: () => void
+  wrapNative: () => void
+  nativeSymbol: string | undefined
+  wrappedNativeSymbol: string | undefined
+}
+
+const Button = styled(LinkStyledButton)`
+  text-decoration: underline;
+`
+
+export function SellNativeWarningBanner({
+  sellWrapped,
+  wrapNative,
+  nativeSymbol = 'native',
+  wrappedNativeSymbol = 'wrapped native',
+}: SellNativeWarningBannerProps) {
+  return (
+    <InlineBanner bannerType="alert" iconSize={32}>
+      <strong>Cannot sell {nativeSymbol}</strong>
+      <p>Selling {nativeSymbol} is only supported on SWAP orders.</p>
+      <p>
+        <Button onClick={sellWrapped}>Switch to {wrappedNativeSymbol}</Button>or
+        <Button onClick={wrapNative}>
+          Wrap {nativeSymbol} to {wrappedNativeSymbol}
+        </Button>
+        first.
+      </p>
+    </InlineBanner>
+  )
+}

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

@@ -1,25 +1,28 @@
 import { getChainInfo } from '@cowprotocol/common-const'
 import { getExplorerBaseUrl } from '@cowprotocol/common-utils'
-import { SupportedChainId } from '@cowprotocol/cow-sdk'
-import { ALL_SUPPORTED_CHAIN_IDS } from '@cowprotocol/cow-sdk'
+import { ALL_SUPPORTED_CHAIN_IDS, SupportedChainId } from '@cowprotocol/cow-sdk'
 import { ExternalLink } from '@cowprotocol/ui'
 
 import { Trans } from '@lingui/macro'
 
 import * as styledEl from './styled'
 
 export interface NetworksListProps {
+  isSepoliaEnabled: boolean
   currentChainId: SupportedChainId | null
-
   onSelectChain(targetChainId: SupportedChainId): void
 }
 
 export function NetworksList(props: NetworksListProps) {
-  const { currentChainId, onSelectChain } = props
+  const { currentChainId, onSelectChain, isSepoliaEnabled } = props
+
+  const networksToDisplay = isSepoliaEnabled
+    ? ALL_SUPPORTED_CHAIN_IDS
+    : ALL_SUPPORTED_CHAIN_IDS.filter((chainId) => chainId !== SupportedChainId.SEPOLIA)
 
   return (
     <>
-      {ALL_SUPPORTED_CHAIN_IDS.map((targetChainId: SupportedChainId) => {
+      {networksToDisplay.map((targetChainId: SupportedChainId) => {
         const info = getChainInfo(targetChainId)
         const { label, logoUrl, bridge, explorer, explorerTitle, helpCenterUrl } = info
 

apps/cowswap-frontend/src/common/services/getQuoteCurrency/index.ts

@@ -1,4 +1,4 @@
-import { DAI, USDC_MAINNET, USDT } from '@cowprotocol/common-const'
+import { DAI, USDC_MAINNET, USDC_SEPOLIA, USDT } from '@cowprotocol/common-const'
 import { NATIVE_CURRENCY_BUY_ADDRESS } from '@cowprotocol/common-const'
 import { DAI_GOERLI, USDT_GOERLI, USDC_GOERLI } from '@cowprotocol/common-const'
 import { USDC_GNOSIS_CHAIN, USDT_GNOSIS_CHAIN, WXDAI } from '@cowprotocol/common-const'
@@ -9,13 +9,14 @@ import { Currency, CurrencyAmount } from '@uniswap/sdk-core'
 import { Nullish } from 'types'
 
 // TODO: Find a solution for using API: https://www.coingecko.com/en/categories/stablecoins
-const STABLE_COINS: { [key in SupportedChainId]: string[] } = {
+const STABLE_COINS: Record<SupportedChainId, string[]> = {
   [SupportedChainId.MAINNET]: [USDC_MAINNET, USDT, DAI].map((token) => token.address.toLowerCase()),
   [SupportedChainId.GNOSIS_CHAIN]: [USDC_GNOSIS_CHAIN, USDT_GNOSIS_CHAIN, WXDAI]
     .map((token) => token.address.toLowerCase())
     // XDAI and WXDAI are stable-coins
     .concat(NATIVE_CURRENCY_BUY_ADDRESS),
   [SupportedChainId.GOERLI]: [USDC_GOERLI, USDT_GOERLI, DAI_GOERLI].map((token) => token.address.toLowerCase()),
+  [SupportedChainId.SEPOLIA]: [USDC_SEPOLIA].map((token) => token.address.toLowerCase()),
 }
 
 /**