feat(explorer): support Sepolia network

apps/explorer/src/api/tenderly/tenderlyApi.ts

@@ -1,5 +1,4 @@
 import { APP_NAME, NATIVE_TOKEN_ADDRESS_LOWERCASE, TENDERLY_API_URL } from 'const'
-import { Network } from 'types'
 import { fetchQuery } from 'api/baseApi'
 import {
   Account,
@@ -14,59 +13,56 @@ import {
 } from './types'
 import { abbreviateString } from 'utils'
 import { SPECIAL_ADDRESSES } from '../../explorer/const'
+import { mapSupportedNetworks, SupportedChainId } from '@cowprotocol/cow-sdk'
 
 export const ALIAS_TRADER_NAME = 'Trader'
 const COW_PROTOCOL_CONTRACT_NAME = 'GPv2Settlement'
-const API_BASE_URLs = _urlAvailableNetwork()
 
-function _urlAvailableNetwork(): Partial<Record<Network, string>> {
-  const urlNetwork = (_networkId: Network): string => `${TENDERLY_API_URL}/${_networkId}`
+const API_BASE_URLs: Record<SupportedChainId, string> = mapSupportedNetworks(
+  (_networkId: SupportedChainId): string => `${TENDERLY_API_URL}/${_networkId}`
+)
 
-  return {
-    [Network.MAINNET]: urlNetwork(Network.MAINNET),
-    [Network.GNOSIS_CHAIN]: urlNetwork(Network.GNOSIS_CHAIN),
-    [Network.GOERLI]: urlNetwork(Network.GOERLI),
-  }
-}
-
-function _getApiBaseUrl(networkId: Network): string {
+function _getApiBaseUrl(networkId: SupportedChainId): string {
   const baseUrl = API_BASE_URLs[networkId]
 
   if (!baseUrl) {
-    throw new Error('Unsupported Network. The tenderly API is not available in the Network ' + networkId)
+    throw new Error('Unsupported Network. The tenderly API is not available in the SupportedChainId ' + networkId)
   } else {
     return baseUrl
   }
 }
 
-function _get(networkId: Network, url: string): Promise<Response> {
+function _get(networkId: SupportedChainId, url: string): Promise<Response> {
   const baseUrl = _getApiBaseUrl(networkId)
   return fetch(baseUrl + url)
 }
 
-function _fetchTrace(networkId: Network, txHash: string): Promise<Trace> {
+function _fetchTrace(networkId: SupportedChainId, txHash: string): Promise<Trace> {
   const queryString = `/trace/${txHash}`
   console.log(`[tenderlyApi:fetchTrace] Fetching trace tx ${txHash} on network ${networkId}`)
 
   return fetchQuery<Trace>({ get: () => _get(networkId, queryString) }, queryString)
 }
 
-function _fetchTradesAccounts(networkId: Network, txHash: string): Promise<Contract[]> {
+function _fetchTradesAccounts(networkId: SupportedChainId, txHash: string): Promise<Contract[]> {
   const queryString = `/tx/${txHash}/contracts`
   console.log(`[tenderlyApi:fetchTradesAccounts] Fetching tx trades account on network ${networkId}`)
 
   return fetchQuery<Array<Contract>>({ get: () => _get(networkId, queryString) }, queryString)
 }
 
-export async function getTransactionTrace(networkId: Network, txHash: string): Promise<Trace> {
+export async function getTransactionTrace(networkId: SupportedChainId, txHash: string): Promise<Trace> {
   return _fetchTrace(networkId, txHash)
 }
 
-export async function getTransactionContracts(networkId: Network, txHash: string): Promise<Contract[]> {
+export async function getTransactionContracts(networkId: SupportedChainId, txHash: string): Promise<Contract[]> {
   return _fetchTradesAccounts(networkId, txHash)
 }
 
-export async function getTradesAndTransfers(networkId: Network, txHash: string): Promise<TxTradesAndTransfers> {
+export async function getTradesAndTransfers(
+  networkId: SupportedChainId,
+  txHash: string
+): Promise<TxTradesAndTransfers> {
   const trace = await _fetchTrace(networkId, txHash)
 
   return traceToTransfersAndTrades(trace)
@@ -129,7 +125,7 @@ export function traceToTransfersAndTrades(trace: Trace): TxTradesAndTransfers {
 }
 
 export async function getTradesAccount(
-  networkId: Network,
+  networkId: SupportedChainId,
   txHash: string,
   trades: Array<Trade>,
   transfers: Array<Transfer>

apps/explorer/src/api/web3/index.ts

@@ -1,10 +1,8 @@
 import Web3 from 'web3'
-import { getNetworkFromId } from '@gnosis.pm/dex-js'
 import { parseUserAgent } from 'detect-browser'
 
-import { Network } from 'types'
-
 import { ETH_NODE_URL, INFURA_ID } from 'const'
+import { SupportedChainId } from '@cowprotocol/cow-sdk'
 
 // TODO connect to mainnet if we need AUTOCONNECT at all
 export const getDefaultProvider = (): string | null => (process.env.NODE_ENV === 'test' ? null : ETH_NODE_URL)
@@ -44,14 +42,21 @@ export function createWeb3Api(provider?: string): Web3 {
   return web3
 }
 
-function infuraProvider(networkId: Network): string {
+const INFURA_NETWORK_NAME_MAP: Record<SupportedChainId, string> = {
+  [SupportedChainId.MAINNET]: 'Mainnet',
+  [SupportedChainId.GNOSIS_CHAIN]: 'xDai',
+  [SupportedChainId.GOERLI]: 'Goerli',
+  [SupportedChainId.SEPOLIA]: 'Sepolia',
+}
+
+function infuraProvider(networkId: SupportedChainId): string {
   // INFURA_ID relies on mesa `config` file logic.
   // We can be independent of that config by relying on the env var directly
   if (!INFURA_ID) {
     throw new Error(`INFURA_ID not set`)
   }
 
-  const network = getNetworkFromId(networkId).toLowerCase()
+  const network = INFURA_NETWORK_NAME_MAP[networkId]
 
   if (isWebsocketConnection()) {
     return `wss://${network}.infura.io/ws/v3/${INFURA_ID}`
@@ -84,23 +89,19 @@ function isWebsocketConnection(): boolean {
 }
 
 // For now only infura provider is available
-export function getProviderByNetwork(networkId: Network | null): string | undefined {
-  switch (networkId) {
-    case Network.MAINNET:
-    case Network.GOERLI:
-      return infuraProvider(networkId)
-    case Network.GNOSIS_CHAIN:
-      return 'https://rpc.gnosis.gateway.fm/'
-    default:
-      return undefined
+export function getProviderByNetwork(networkId: SupportedChainId): string | undefined {
+  if (networkId === SupportedChainId.GNOSIS_CHAIN) {
+    return 'https://rpc.gnosis.gateway.fm/'
   }
+
+  return infuraProvider(networkId)
 }
 
 // Approach 2: update the provider in a single web3 instance
 // Advantage is that regular APIs that require web3 instance should work without any changes
 // Also, there's no change to consumers currently importing from <app>/api module
 // Side effect is applied at reducer level (state/network/updater module)
-export function updateWeb3Provider(web3: Web3, networkId?: Network | null): void {
+export function updateWeb3Provider(web3: Web3, networkId?: SupportedChainId | null): void {
   if (!networkId) {
     return
   }

apps/explorer/src/components/NetworkSelector/NetworkSelector.styled.ts

@@ -4,7 +4,7 @@ import { COLOURS } from 'styles'
 import { media } from 'theme/styles/media'
 import { ArrowIconCSS } from 'components/icons/cssIcons'
 
-const { fadedGreyishWhiteOpacity, white, gnosisChainColor, goerliColor } = COLOURS
+const { fadedGreyishWhiteOpacity, white, gnosisChainColor, goerliColor, sepoliaColor } = COLOURS
 
 export const SelectorContainer = styled.div`
   display: flex;
@@ -59,6 +59,9 @@ export const Option = styled.div`
     &.görli {
       background: ${(): string => goerliColor};
     }
+    &.sepolia {
+      background: ${(): string => sepoliaColor};
+    }
     &.gnosischain {
       background: ${(): string => gnosisChainColor};
     }
@@ -90,8 +93,13 @@ export const NetworkLabel = styled.span`
   }
 
   &.gnosischain {
-    background: ${(): string => `rgba(7,121,91,1.00);`};
-    color: ${(): string => white};
+    background: rgba(7, 121, 91, 1);
+    color: white;
+  }
+
+  &.sepolia {
+    background: rgb(136, 51, 196);
+    color: white;
   }
 `
 

apps/explorer/src/components/NetworkSelector/index.tsx

@@ -5,42 +5,18 @@ import { faCheck } from '@fortawesome/free-solid-svg-icons'
 import { SelectorContainer, OptionsContainer, Option, NetworkLabel, StyledFAIcon } from './NetworkSelector.styled'
 import { replaceURL } from 'utils/url'
 import { NO_REDIRECT_HOME_ROUTES } from 'const'
-import { Network } from 'types'
 import { cleanNetworkName } from 'utils'
+import { NETWORK_OPTIONS } from '../../consts/network'
 
 type networkSelectorProps = {
   networkId: number
 }
 
-type NetworkOptions = {
-  id: Network
-  name: string
-  url: string
-}
-
-export const networkOptions: NetworkOptions[] = [
-  {
-    id: Network.MAINNET,
-    name: 'Ethereum',
-    url: '',
-  },
-  {
-    id: Network.GNOSIS_CHAIN,
-    name: 'Gnosis Chain',
-    url: 'gc',
-  },
-  {
-    id: Network.GOERLI,
-    name: 'Görli',
-    url: 'goerli',
-  },
-]
-
 export const NetworkSelector: React.FC<networkSelectorProps> = ({ networkId }) => {
   const selectContainer = useRef<HTMLInputElement>(null)
   const navigate = useNavigate()
   const location = useLocation()
-  const name = networkOptions.find((network) => network.id === networkId)?.name.toLowerCase()
+  const name = NETWORK_OPTIONS.find((network) => network.id === networkId)?.name.toLowerCase()
   const [open, setOpen] = useState(false)
 
   useEffect(() => {
@@ -77,7 +53,7 @@ export const NetworkSelector: React.FC<networkSelectorProps> = ({ networkId }) =
       <span className={`arrow ${open && 'open'}`} />
       {open && (
         <OptionsContainer width={selectContainer.current?.offsetWidth || 0}>
-          {networkOptions.map((network) => (
+          {NETWORK_OPTIONS.map((network) => (
             <Option onClick={(): void => redirectToNetwork(network.url, networkId)} key={network.id}>
               <div className={`dot ${cleanNetworkName(network.name)} `} />
               <div className={`name ${network.id === networkId && 'selected'}`}>{network.name}</div>

apps/explorer/src/components/RedirectToSearch.tsx

@@ -16,7 +16,7 @@ const RedirectToSearch: React.FC<RedirectToSearchParams> = ({ from, data }) => {
   const newPath =
     pathMatchArray && pathMatchArray.length > 0 ? `${prefixPath}/search${pathMatchArray[1]}` : `${prefixPath}${suffix}`
 
-  return <Navigate to={newPath} />
+  return <Navigate to={newPath} state={{ referrer: from, data }} />
 }
 
 export default RedirectToSearch

apps/explorer/src/components/layout/GenericLayout/Footer/index.tsx

@@ -1,7 +1,6 @@
 import React from 'react'
 import styled from 'styled-components'
 import { media } from 'theme/styles/media'
-import { getGpV2ContractAddress } from 'utils/contract'
 
 // Components
 import LogoWrapper, { LOGO_MAP } from 'components/common/LogoWrapper'
@@ -12,6 +11,7 @@ import { useNetworkId } from 'state/network'
 import { footerConfig } from '../Footer/config'
 import { Network } from 'types'
 import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
+import { COW_PROTOCOL_SETTLEMENT_CONTRACT_ADDRESS, COW_PROTOCOL_VAULT_RELAYER_ADDRESS } from '@cowprotocol/cow-sdk'
 
 const FooterStyled = styled.footer`
   display: flex;
@@ -120,8 +120,9 @@ export interface FooterType {
 export const Footer: React.FC<FooterType> = (props) => {
   const { isBeta = footerConfig.isBeta, url = footerConfig.url } = props
   const networkId = useNetworkId() || Network.MAINNET
-  const settlementContractAddress = getGpV2ContractAddress(networkId, 'GPv2Settlement')
-  const vaultRelayerContractAddress = getGpV2ContractAddress(networkId, 'GPv2VaultRelayer')
+  const settlementContractAddress = COW_PROTOCOL_SETTLEMENT_CONTRACT_ADDRESS[networkId]
+  const vaultRelayerContractAddress = COW_PROTOCOL_VAULT_RELAYER_ADDRESS[networkId]
+
   return (
     <FooterStyled>
       {isBeta && <BetaWrapper>This project is in beta. Use at your own risk.</BetaWrapper>}

apps/explorer/src/consts/network.ts

@@ -0,0 +1,29 @@
+import { ALL_SUPPORTED_CHAIN_IDS, SupportedChainId } from '@cowprotocol/cow-sdk'
+
+export type NetworkOptions = {
+  id: SupportedChainId
+  name: string
+  url: string
+}
+
+export const CHAIN_ID_TO_NAME: Record<SupportedChainId, string> = {
+  [SupportedChainId.MAINNET]: 'Ethereum',
+  [SupportedChainId.GNOSIS_CHAIN]: 'Gnosis Chain',
+  [SupportedChainId.GOERLI]: 'Görli',
+  [SupportedChainId.SEPOLIA]: 'Sepolia',
+}
+
+export const CHAIN_ID_TO_URL_PREFIX: Record<SupportedChainId, string> = {
+  [SupportedChainId.MAINNET]: '',
+  [SupportedChainId.GNOSIS_CHAIN]: 'gc',
+  [SupportedChainId.GOERLI]: 'goerli',
+  [SupportedChainId.SEPOLIA]: 'sepolia',
+}
+
+export const NETWORK_PREFIXES = Object.values(CHAIN_ID_TO_URL_PREFIX).filter(Boolean).join('|')
+
+export const NETWORK_OPTIONS: NetworkOptions[] = ALL_SUPPORTED_CHAIN_IDS.map((chainId) => ({
+  id: chainId,
+  name: CHAIN_ID_TO_NAME[chainId],
+  url: CHAIN_ID_TO_URL_PREFIX[chainId],
+}))

apps/explorer/src/consts/subgraphUrls.ts

@@ -0,0 +1,15 @@
+import { SUBGRAPH_PROD_CONFIG, SupportedChainId } from '@cowprotocol/cow-sdk'
+
+function getSubgraphUrl(chainId: SupportedChainId, suffix: string): string | null {
+  return process.env[`REACT_APP_SUBGRAPH_URL_${suffix}`] || SUBGRAPH_PROD_CONFIG[chainId] || null
+}
+
+/**
+ * When value is null, then Subgraph is not supported for the network
+ */
+export const SUBGRAPH_URLS: Record<SupportedChainId, string | null> = {
+  [SupportedChainId.MAINNET]: getSubgraphUrl(SupportedChainId.MAINNET, 'MAINNET'),
+  [SupportedChainId.GNOSIS_CHAIN]: getSubgraphUrl(SupportedChainId.GNOSIS_CHAIN, 'GNOSIS_CHAIN'),
+  [SupportedChainId.GOERLI]: getSubgraphUrl(SupportedChainId.GOERLI, 'GOERLI'),
+  [SupportedChainId.SEPOLIA]: getSubgraphUrl(SupportedChainId.SEPOLIA, 'SEPOLIA'),
+}

apps/explorer/src/cowSdk.ts

@@ -1,23 +1,9 @@
-import { OrderBookApi, SupportedChainId } from '@cowprotocol/cow-sdk'
-import { SubgraphApi } from '@cowprotocol/cow-sdk'
+import { OrderBookApi, SubgraphApi } from '@cowprotocol/cow-sdk'
 import { MetadataApi } from '@cowprotocol/app-data'
-import { SUBGRAPH_PROD_CONFIG } from '@cowprotocol/cow-sdk'
-
-function getSubgraphUrls(): Record<SupportedChainId, string> {
-  const [mainnetUrl, gcUrl, goerliUrl] = [
-    process.env.REACT_APP_SUBGRAPH_URL_MAINNET || undefined,
-    process.env.REACT_APP_SUBGRAPH_URL_GNOSIS_CHAIN || undefined,
-    process.env.REACT_APP_SUBGRAPH_URL_GOERLI || undefined,
-  ]
-
-  return {
-    ...SUBGRAPH_PROD_CONFIG,
-    ...(mainnetUrl ? { [SupportedChainId.MAINNET]: mainnetUrl } : undefined),
-    ...(gcUrl ? { [SupportedChainId.GNOSIS_CHAIN]: gcUrl } : undefined),
-    ...(goerliUrl ? { [SupportedChainId.GOERLI]: goerliUrl } : undefined),
-  }
-}
+import { SUBGRAPH_URLS } from './consts/subgraphUrls'
 
 export const orderBookSDK = new OrderBookApi({ env: 'prod' })
-export const subgraphApiSDK = new SubgraphApi({ baseUrls: getSubgraphUrls() })
+export const subgraphApiSDK = new SubgraphApi({
+  baseUrls: SUBGRAPH_URLS,
+})
 export const metadataApiSDK = new MetadataApi()