feat(arbitrum): add arbitrum_one

.github/workflows/vercel.yml

@@ -46,12 +46,14 @@ jobs:
           REACT_APP_INFURA_KEY=${{ secrets.REACT_APP_INFURA_KEY }}
           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_42161=${{ secrets.REACT_APP_NETWORK_URL_42161 }}
           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_ARBITRUM_ONE=${{ secrets.REACT_APP_SUBGRAPH_URL_ARBITRUM_ONE }}
           REACT_APP_SUBGRAPH_URL_GNOSIS_CHAIN=${{ secrets.REACT_APP_SUBGRAPH_URL_GNOSIS_CHAIN }}
           vercel build -t ${{ secrets.VERCEL_TOKEN }} --prod
 

README.md

@@ -165,6 +165,7 @@ Alternatively you can define the RPC URLs directly with the following environmen
 REACT_APP_NETWORK_URL_1: https://...
 REACT_APP_NETWORK_URL_11155111: https://...
 REACT_APP_NETWORK_URL_100: https://...
+REACT_APP_NETWORK_URL_42161: https://...
 ```
 
 Additionally, if you plan to run the integration tests locally you must define:

apps/cow-fi/services/cms/index.ts

@@ -181,7 +181,7 @@ export async function getArticleBySlug(slug: string): Promise<Article | null> {
  * @param slug Slug of the category
  *
  * @throws Error if slug is not found
- * @throws Error if multiple categorys are found with the same slug
+ * @throws Error if multiple categories are found with the same slug
  *
  * @returns Article with the given slug
  */

apps/cowswap-frontend/src/api/gasPrices/index.ts

@@ -3,7 +3,7 @@ import { SupportedChainId as ChainId } from '@cowprotocol/cow-sdk'
 
 import { fetchWithRateLimit } from 'common/utils/fetch'
 
-const fetchRateLimitted = fetchWithRateLimit({
+const fetchRateLimited = fetchWithRateLimit({
   rateLimit: {
     tokensPerInterval: 3,
     interval: 'second',
@@ -39,13 +39,7 @@ const priceMap: GasPrices = {
 
 class GasFeeApi {
   getUrl(chainId: ChainId): string {
-    const baseUrl = GAS_FEE_ENDPOINTS[chainId]
-
-    if (chainId !== ChainId.GNOSIS_CHAIN) {
-      return `${baseUrl}?chainId=${chainId}`
-    }
-
-    return baseUrl
+    return GAS_FEE_ENDPOINTS[chainId]
   }
 
   supportedChain(chainId: ChainId): boolean {
@@ -54,9 +48,9 @@ class GasFeeApi {
 
   getHeaders(chainId: ChainId): { headers?: Headers } {
     const headers: { [key: string]: any } = {}
-    const apiKey = GAS_API_KEYS[chainId] || ''
+    const apiKey = GAS_API_KEYS[chainId]
 
-    if (chainId !== ChainId.GNOSIS_CHAIN) {
+    if (apiKey) {
       headers.headers = new Headers({
         Authorization: apiKey,
       })
@@ -91,13 +85,8 @@ class GasFeeApi {
       slow: null,
     }
 
-    // Parse data for Gnosis chain (from Blockscout)
-    if (chainId === ChainId.GNOSIS_CHAIN) {
-      for (const key of Object.keys(priceMap)) {
-        output[key as keyof GasPrices] = this.toWei(json[key])
-      }
-    } else {
-      // Parse data for other chains (from Blocknative)
+    if (this.getUrl(chainId).match(/blocknative/)) {
+      // Parse data from Blocknative
       const prices = json?.blockPrices[0]?.estimatedPrices
 
       if (prices) {
@@ -106,6 +95,11 @@ class GasFeeApi {
           output[key as keyof GasPrices] = this.toWei(price)
         }
       }
+    } else {
+      // Parse data from Blockscout
+      for (const key of Object.keys(priceMap)) {
+        output[key as keyof GasPrices] = this.toWei(json[key])
+      }
     }
 
     return output
@@ -114,7 +108,7 @@ class GasFeeApi {
   async fetchData(chainId: ChainId) {
     const url = this.getUrl(chainId)
     const headers = this.getHeaders(chainId)
-    const response = await fetchRateLimitted(url, headers)
+    const response = await fetchRateLimited(url, headers)
 
     return response.json()
   }

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

@@ -1,6 +1,6 @@
 import { RAW_CODE_LINK } from '@cowprotocol/common-const'
 import { environmentName } from '@cowprotocol/common-utils'
-import { SupportedChainId } from '@cowprotocol/cow-sdk'
+import { SupportedChainId, mapSupportedNetworks } from '@cowprotocol/cow-sdk'
 
 import { GpPriceStrategy } from 'legacy/state/gas/atoms'
 
@@ -9,11 +9,7 @@ const STRATEGY_URL_BASE = RAW_CODE_LINK + '/configuration/config/'
 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.SEPOLIA]: STRATEGY_URL + '/strategy-11155111.json',
-}
+const STRATEGY_API_URL = mapSupportedNetworks((chainId: SupportedChainId) => `${STRATEGY_URL}/strategy-${chainId}.json`)
 
 export type PriceStrategy = {
   primary: GpPriceStrategy

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

@@ -4,10 +4,12 @@ import { SupportedChainId } from '@cowprotocol/cow-sdk'
 export function useVerifiedQuotesEnabled(chainId: SupportedChainId): boolean {
   const { verifyQuotesMainnet, verifyQuotesGnosis, verifyQuotesSepolia } = useFeatureFlags()
 
+  // TODO: remove completely
   const map: Record<SupportedChainId, boolean> = {
     [SupportedChainId.MAINNET]: !!verifyQuotesMainnet,
     [SupportedChainId.GNOSIS_CHAIN]: !!verifyQuotesGnosis,
     [SupportedChainId.SEPOLIA]: !!verifyQuotesSepolia,
+    [SupportedChainId.ARBITRUM_ONE]: false,
   }
 
   return map[chainId]

libs/common-hooks/src/useBlockNumber.tsx → apps/cowswap-frontend/src/common/hooks/useBlockNumber.tsx

@@ -1,8 +1,8 @@
 import { createContext, ReactNode, useCallback, useContext, useEffect, useMemo, useState } from 'react'
 
+import { useIsWindowVisible } from '@cowprotocol/common-hooks'
 import { useWalletChainId, useWalletProvider } from '@cowprotocol/wallet-provider'
 
-import { useIsWindowVisible } from './useIsWindowVisible'
 
 const MISSING_PROVIDER = Symbol()
 const BlockNumberContext = createContext<

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

@@ -84,5 +84,7 @@ export function useGP2SettlementContract(): GPv2Settlement | null {
 
 export function useVCowContract() {
   const { chainId } = useWalletInfo()
-  return useContract<VCow>(chainId ? V_COW_CONTRACT_ADDRESS[chainId] : undefined, vCowAbi, true)
+  const vCowAddress = V_COW_CONTRACT_ADDRESS[chainId] || undefined
+
+  return useContract<VCow>(vCowAddress, vCowAbi, true)
 }

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

@@ -1,14 +1,16 @@
 import { useMemo } from 'react'
 
-import { SupportedChainId } from '@cowprotocol/cow-sdk'
+import { useAvailableChains } from '@cowprotocol/common-hooks'
 import { useWalletChainId } from '@cowprotocol/wallet-provider'
 
+
 export function useIsProviderNetworkUnsupported(): boolean {
   const chainId = useWalletChainId()
+  const availableChains = useAvailableChains()
 
   return useMemo(() => {
     if (!chainId) return false
 
-    return !(chainId in SupportedChainId)
-  }, [chainId])
+    return availableChains.indexOf(chainId) === -1
+  }, [chainId, availableChains])
 }

apps/cowswap-frontend/src/common/hooks/useUnsupportedNetworksText.tsx

@@ -1,14 +1,18 @@
 import { getChainInfo } from '@cowprotocol/common-const'
-import { ALL_SUPPORTED_CHAIN_IDS } from '@cowprotocol/cow-sdk'
+import { useAvailableChains } from '@cowprotocol/common-hooks'
 
 import { Trans } from '@lingui/macro'
 
+
 export function useUnsupportedNetworksText(): JSX.Element {
+  const availableChains = useAvailableChains()
+
   return (
     <Trans>
       Please connect your wallet to one of our supported networks:
       <br />
-      {ALL_SUPPORTED_CHAIN_IDS.map((chainId) => getChainInfo(chainId)?.label)
+      {availableChains
+        .map((chainId) => getChainInfo(chainId)?.label)
         .filter(Boolean)
         .join(', ')}
     </Trans>

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

@@ -36,9 +36,11 @@ const Format = styled.strong`
 type ChainPrefixWarningProps = {
   chainPrefixWarning: string
   chainInfo: BaseChainInfo
+  isDarkMode: boolean
 }
-export default function ChainPrefixWarning({ chainPrefixWarning, chainInfo }: ChainPrefixWarningProps) {
-  const { label, addressPrefix, logoUrl, color } = chainInfo
+export default function ChainPrefixWarning({ chainPrefixWarning, chainInfo, isDarkMode }: ChainPrefixWarningProps) {
+  const { label, addressPrefix, logo, color } = chainInfo
+  const logoUrl = isDarkMode ? logo.dark : logo.light
   return (
     <Wrapper>
       <p>

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

@@ -1,6 +1,6 @@
 import { getChainInfo } from '@cowprotocol/common-const'
 import { getExplorerBaseUrl } from '@cowprotocol/common-utils'
-import { ALL_SUPPORTED_CHAIN_IDS, SupportedChainId } from '@cowprotocol/cow-sdk'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
 import { ExternalLink } from '@cowprotocol/ui'
 
 import { Trans } from '@lingui/macro'
@@ -9,19 +9,22 @@ import * as styledEl from './styled'
 
 export interface NetworksListProps {
   currentChainId: SupportedChainId | null
+  isDarkMode: boolean
+  availableChains: SupportedChainId[]
   onSelectChain(targetChainId: SupportedChainId): void
 }
 
 export function NetworksList(props: NetworksListProps) {
-  const { currentChainId, onSelectChain } = props
+  const { currentChainId, isDarkMode, availableChains, onSelectChain } = props
 
   return (
     <>
-      {ALL_SUPPORTED_CHAIN_IDS.map((targetChainId: SupportedChainId) => {
+      {availableChains.map((targetChainId: SupportedChainId) => {
         const info = getChainInfo(targetChainId)
-        const { label, logoUrl, bridge, explorer, explorerTitle, helpCenterUrl } = info
+        const { label, logo, bridge, explorer, explorerTitle, helpCenterUrl } = info
 
         const isActive = targetChainId === currentChainId
+        const logoUrl = getLogo(isDarkMode, isActive, logo.dark, logo.light)
 
         const rowContent = (
           <styledEl.FlyoutRow key={targetChainId} onClick={() => onSelectChain(targetChainId)} active={isActive}>
@@ -69,3 +72,11 @@ export function NetworksList(props: NetworksListProps) {
     </>
   )
 }
+
+function getLogo(isDarkMode: boolean, isActive: boolean, darkLogo: string, lightLogo: string): string {
+  if (isDarkMode || isActive) {
+    return darkLogo
+  }
+
+  return lightLogo
+}

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

@@ -1,10 +1,13 @@
 import {
   DAI,
+  DAI_ARBITRUM_ONE,
   NATIVE_CURRENCY_ADDRESS,
+  USDC_ARBITRUM_ONE,
   USDC_GNOSIS_CHAIN,
   USDC_MAINNET,
   USDC_SEPOLIA,
   USDT,
+  USDT_ARBITRUM_ONE,
   USDT_GNOSIS_CHAIN,
   WXDAI,
 } from '@cowprotocol/common-const'
@@ -21,6 +24,9 @@ const STABLE_COINS: Record<SupportedChainId, string[]> = {
     .map((token) => token.address.toLowerCase())
     // XDAI and WXDAI are stable-coins
     .concat(NATIVE_CURRENCY_ADDRESS),
+  [SupportedChainId.ARBITRUM_ONE]: [USDT_ARBITRUM_ONE, USDC_ARBITRUM_ONE, DAI_ARBITRUM_ONE].map((token) =>
+    token.address.toLowerCase()
+  ),
   [SupportedChainId.SEPOLIA]: [USDC_SEPOLIA].map((token) => token.address.toLowerCase()),
 }
 

apps/cowswap-frontend/src/common/updaters/GasUpdater.tsx

@@ -2,7 +2,6 @@ import { useSetAtom } from 'jotai/index'
 import { useCallback, useEffect } from 'react'
 
 import { GAS_PRICE_UPDATE_THRESHOLD } from '@cowprotocol/common-const'
-import { useBlockNumber } from '@cowprotocol/common-hooks'
 import { gasPriceAtom } from '@cowprotocol/core'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
@@ -14,6 +13,8 @@ import { useGasPrices } from 'legacy/state/gas/hooks'
 
 import { gasFeeApi } from 'api/gasPrices'
 
+import { useBlockNumber } from '../hooks/useBlockNumber'
+
 function needsGasUpdate(now: number, lastUpdated: number, threshold: number) {
   return now - lastUpdated > threshold
 }

apps/cowswap-frontend/src/cosmos.decorator.tsx

@@ -1,26 +1,26 @@
 import '@reach/dialog/styles.css'
 import './polyfills'
 
-import React, { StrictMode, useCallback, useContext, ReactNode, useEffect } from 'react'
+import React, { ReactNode, StrictMode, useCallback, useContext, useEffect } from 'react'
 
 import IMAGE_MOON from '@cowprotocol/assets/cow-swap/moon.svg'
 import IMAGE_SUN from '@cowprotocol/assets/cow-swap/sun.svg'
-import { BlockNumberProvider } from '@cowprotocol/common-hooks'
-import { WalletUpdater, injectedWalletConnection } from '@cowprotocol/wallet'
+import { injectedWalletConnection, WalletUpdater } from '@cowprotocol/wallet'
 import { Web3ReactProvider } from '@web3-react/core'
 
 import { LanguageProvider } from 'i18n'
 import SVG from 'react-inlinesvg'
 import { Provider } from 'react-redux'
 import { HashRouter } from 'react-router-dom'
 import { Flex } from 'rebass'
-import styled from 'styled-components/macro'
-import { ThemeContext } from 'styled-components/macro'
+import styled, { ThemeContext } from 'styled-components/macro'
 
 import { cowSwapStore } from 'legacy/state'
 import { useDarkModeManager } from 'legacy/state/user/hooks'
 import ThemeProvider, { FixedGlobalStyle, ThemedGlobalStyle } from 'legacy/theme'
 
+import { BlockNumberProvider } from './common/hooks/useBlockNumber'
+
 const DarkModeToggleButton = styled.button`
   display: flex;
   align-items: center;

apps/cowswap-frontend/src/cow-react/index.tsx

@@ -4,11 +4,9 @@ import 'inter-ui'
 import '@cowprotocol/analytics'
 import './sentry'
 import { Provider as AtomProvider } from 'jotai'
-import { useEffect, StrictMode, ReactNode } from 'react'
+import { ReactNode, StrictMode, useEffect } from 'react'
 
-import { BlockNumberProvider } from '@cowprotocol/common-hooks'
-import { isInjectedWidget } from '@cowprotocol/common-utils'
-import { nodeRemoveChildFix } from '@cowprotocol/common-utils'
+import { isInjectedWidget, nodeRemoveChildFix } from '@cowprotocol/common-utils'
 import { jotaiStore } from '@cowprotocol/core'
 import { SnackbarsWidget } from '@cowprotocol/snackbars'
 import { Web3Provider } from '@cowprotocol/wallet'
@@ -35,6 +33,7 @@ import { useInjectedWidgetParams } from 'modules/injectedWidget'
 import { FeatureGuard } from 'common/containers/FeatureGuard'
 
 import { WalletUnsupportedNetworkBanner } from '../common/containers/WalletUnsupportedNetworkBanner'
+import { BlockNumberProvider } from '../common/hooks/useBlockNumber'
 
 // Node removeChild hackaround
 // based on: https://github.com/facebook/react/issues/11538#issuecomment-417504600

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

@@ -62,6 +62,7 @@ const ETH_AMM_LOGOS = [SushiImage, OneInchImage, ParaSwapImage, UniswapImage, Cu
 const LogosPerNetwork: Record<SupportedChainId, Array<Image>> = {
   [SupportedChainId.MAINNET]: ETH_AMM_LOGOS,
   [SupportedChainId.SEPOLIA]: ETH_AMM_LOGOS,
+  [SupportedChainId.ARBITRUM_ONE]: ETH_AMM_LOGOS, // TODO: review actual AMMs on arbitrum
   [SupportedChainId.GNOSIS_CHAIN]: [
     SushiImage,
     BaoSwapImage,

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

@@ -7,15 +7,14 @@ import {
   parsePrefixedAddress,
 } from '@cowprotocol/common-utils'
 import { useENS } from '@cowprotocol/ens'
-import { RowBetween } from '@cowprotocol/ui'
-import { ExternalLink } from '@cowprotocol/ui'
-import { UI } from '@cowprotocol/ui'
+import { ExternalLink, RowBetween, UI } from '@cowprotocol/ui'
 import { useWalletInfo } from '@cowprotocol/wallet'
 
 import { t, Trans } from '@lingui/macro'
 import styled from 'styled-components/macro'
 
 import { AutoColumn } from 'legacy/components/Column'
+import { useIsDarkMode } from 'legacy/state/user/hooks'
 
 import ChainPrefixWarning from 'common/pure/ChainPrefixWarning'
 import { autofocus } from 'common/utils/autofocus'
@@ -104,6 +103,7 @@ export function AddressInputPanel({
   const chainInfo = getChainInfo(chainId)
   const { address, loading, name } = useENS(value)
   const [chainPrefixWarning, setChainPrefixWarning] = useState('')
+  const isDarkMode = useIsDarkMode()
 
   const handleInput = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
@@ -139,7 +139,7 @@ export function AddressInputPanel({
 
   return (
     <InputPanel id={id}>
-      {chainPrefixWarning && <ChainPrefixWarning chainPrefixWarning={chainPrefixWarning} chainInfo={chainInfo} />}
+      {chainPrefixWarning && <ChainPrefixWarning chainPrefixWarning={chainPrefixWarning} chainInfo={chainInfo} isDarkMode={isDarkMode} />}
       <ContainerRow error={error}>
         <InputContainer>
           <AutoColumn gap="md">