Release/2.14

package.json

@@ -54,7 +54,7 @@
     "@apollo/client": "^3.1.5",
     "@cowprotocol/app-data": "0.0.1-RC.5",
     "@cowprotocol/contracts": "1.3.1",
-    "@cowprotocol/cow-sdk": "1.0.0-RC.5",
+    "@cowprotocol/cow-sdk": "^1.0.0-RC.7",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-regular-svg-icons": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",
@@ -70,6 +70,7 @@
     "@sentry/react": "^6.18.1",
     "@sentry/tracing": "^6.18.1",
     "@types/react": "^16.9.19",
+    "@types/react-helmet": "^6.1.5",
     "@types/react-is": "^16.7.1",
     "@types/react-select": "3.0.21",
     "@types/resize-observer-browser": "^0.1.4",
@@ -102,7 +103,8 @@
     "react-cytoscapejs": "^1.2.1",
     "react-device-detect": "^1.15.0",
     "react-dom": "^16.12.0",
-    "react-ga": "^3.3.0",
+    "react-ga4": "^1.4.1",
+    "react-helmet": "^6.1.0",
     "react-hook-form": "6.9.2",
     "react-hot-loader": "^4.12.19",
     "react-inlinesvg": "^3.0.0",
@@ -111,6 +113,7 @@
     "react-toastify": "^5.5.0",
     "styled-components": "^5.0.0",
     "styled-theming": "^2.2.0",
+    "web-vitals": "^2.1.0",
     "web3": "1.2.9",
     "web3modal": "1.9.0"
   },

src/api/deposit/batchExchangeAddresses.ts

@@ -3,7 +3,7 @@ import { Network } from 'types'
 import { getGpV1ContractAddress } from 'utils/contract'
 
 const addressesByNetwork = {
-  [Network.RINKEBY]: getGpV1ContractAddress(Network.RINKEBY),
+  [4]: getGpV1ContractAddress(4),
   [Network.MAINNET]: getGpV1ContractAddress(Network.MAINNET),
   [Network.GNOSIS_CHAIN]: getGpV1ContractAddress(Network.GNOSIS_CHAIN),
 }

src/api/operator/operatorApi.ts

@@ -31,17 +31,18 @@ function explorerToApiEnv(explorerEnv?: Envs): ApiEnv {
   }
 }
 
+// TODO: should come from the SDK by now, find out where this is used
 function getOperatorUrl(): Partial<Record<Network, string>> {
   if (isProd || isStaging) {
     return {
       [Network.MAINNET]: process.env.OPERATOR_URL_PROD_MAINNET,
-      [Network.RINKEBY]: process.env.OPERATOR_URL_PROD_RINKEBY,
+      [Network.GOERLI]: process.env.OPERATOR_URL_PROD_GOERLI,
       [Network.GNOSIS_CHAIN]: process.env.OPERATOR_URL_PROD_XDAI,
     }
   } else {
     return {
       [Network.MAINNET]: process.env.OPERATOR_URL_STAGING_MAINNET,
-      [Network.RINKEBY]: process.env.OPERATOR_URL_STAGING_RINKEBY,
+      [Network.GOERLI]: process.env.OPERATOR_URL_STAGING_GOERLI,
       [Network.GNOSIS_CHAIN]: process.env.OPERATOR_URL_STAGING_XDAI,
     }
   }

src/api/operator/types.ts

@@ -2,26 +2,14 @@ import BigNumber from 'bignumber.js'
 
 import { TokenErc20 } from '@gnosis.pm/dex-js'
 
+import { OrderKind } from '@cowprotocol/contracts'
 import { OrderMetaData, TradeMetaData } from '@cowprotocol/cow-sdk'
 
 import { Network } from 'types'
 
 export type OrderID = string
 export type TxHash = string
 
-export interface OrderPostError {
-  errorType: 'MissingOrderData' | 'InvalidSignature' | 'DuplicateOrder' | 'InsufficientFunds'
-  description: string
-}
-
-export interface FeeInformation {
-  expirationDate: string
-  minimalFee: string
-  feeRatio: number
-}
-
-export type OrderKind = 'sell' | 'buy'
-
 export type OrderStatus = 'open' | 'filled' | 'cancelled' | 'cancelling' | 'expired' | 'signing'
 export type RawOrderStatusFromAPI = 'presignaturePending' | 'open' | 'fullfilled' | 'cancelled' | 'expired'
 

src/api/tenderly/tenderlyApi.ts

@@ -23,7 +23,6 @@ function _urlAvailableNetwork(): Partial<Record<Network, string>> {
 
   return {
     [Network.MAINNET]: urlNetwork(Network.MAINNET),
-    [Network.RINKEBY]: urlNetwork(Network.RINKEBY),
     [Network.GNOSIS_CHAIN]: urlNetwork(Network.GNOSIS_CHAIN),
     [Network.GOERLI]: urlNetwork(Network.GOERLI),
   }

src/api/tokenList/index.ts

@@ -6,7 +6,7 @@ import TokenListApiMock from './TokenListApiMock'
 import { tokenList } from '../../../test/data'
 
 export function createTokenListApi(): TokenList {
-  const networkIds = [Network.MAINNET, Network.RINKEBY, Network.GNOSIS_CHAIN]
+  const networkIds = [Network.MAINNET, Network.GOERLI, Network.GNOSIS_CHAIN]
 
   let tokenListApi: TokenList
   if (process.env.MOCK_TOKEN_LIST === 'true') {

src/api/wallet/WalletApiMock.ts

@@ -4,7 +4,7 @@ import assert from 'assert'
 import { toWei } from '@gnosis.pm/dex-js'
 
 import { logDebug, wait } from 'utils'
-import { USER_1, USER_2 } from '../../../test/data'
+import { USER_1 } from '../../../test/data'
 import { WalletApi, WalletInfo, ProviderInfo } from './WalletApi'
 
 type OnChangeWalletInfo = (walletInfo: WalletInfo) => void
@@ -29,7 +29,7 @@ export class WalletApiMock implements WalletApi {
   public constructor() {
     this._connected = process.env.AUTOCONNECT === 'true'
     this._user = USER_1
-    this._networkId = Network.RINKEBY
+    this._networkId = Network.GOERLI
     this._balance = toWei(new BN(2.75), 'ether')
     this._listeners = []
   }
@@ -107,16 +107,6 @@ export class WalletApiMock implements WalletApi {
   /* ****************      Test functions      **************** */
   // Functions created just for simulate some cases
 
-  public changeUser(): void {
-    this._user = this._user === USER_1 ? USER_2 : USER_1
-    this._notifyListeners()
-  }
-
-  public changeNetwork(): void {
-    this._networkId = this._networkId === Network.RINKEBY ? Network.MAINNET : Network.RINKEBY
-    this._notifyListeners()
-  }
-
   public async getWalletInfo(): Promise<WalletInfo> {
     return {
       isConnected: this._connected,

src/api/web3/index.ts

@@ -87,7 +87,6 @@ function isWebsocketConnection(): boolean {
 export function getProviderByNetwork(networkId: Network | null): string | undefined {
   switch (networkId) {
     case Network.MAINNET:
-    case Network.RINKEBY:
     case Network.GOERLI:
       return infuraProvider(networkId)
     case Network.GNOSIS_CHAIN:

src/api/weth/WethApi.ts

@@ -1,7 +1,7 @@
 import Web3 from 'web3'
 
 import { Network, WithTxOptionalParams, Receipt } from 'types'
-import { WETH_ADDRESS_MAINNET, WETH_ADDRESS_RINKEBY, WXDAI_ADDRESS_XDAI } from 'const'
+import { WETH_ADDRESS_GOERLI, WETH_ADDRESS_MAINNET, WXDAI_ADDRESS_XDAI } from 'const'
 import { wethAbi } from '@gnosis.pm/dex-js'
 import { logDebug } from 'utils'
 
@@ -29,8 +29,8 @@ function getWethAddressByNetwork(networkId: number): string {
   switch (networkId) {
     case Network.MAINNET:
       return WETH_ADDRESS_MAINNET
-    case Network.RINKEBY:
-      return WETH_ADDRESS_RINKEBY
+    case Network.GOERLI:
+      return WETH_ADDRESS_GOERLI
     case Network.GNOSIS_CHAIN:
       // Is not wxDAI is not WETH, but it has the same approve/withdraw methods
       // it's just convenient to not rename the API and keep calling it WethApi although it wraps also xDAI

src/apps/explorer/ExplorerApp.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { BrowserRouter, HashRouter, Route, Switch, useRouteMatch, Redirect } from 'react-router-dom'
+import { BrowserRouter, HashRouter, Route, Switch, useRouteMatch, Redirect, useLocation } from 'react-router-dom'
 import { hot } from 'react-hot-loader/root'
 
 import { withGlobalContext } from 'hooks/useGlobalState'
@@ -11,10 +11,7 @@ import { GenericLayout } from 'components/layout'
 import { Header } from './layout/Header'
 
 import { NetworkUpdater, RedirectMainnet, RedirectXdai } from 'state/network'
-import { initAnalytics } from 'api/analytics'
-import RouteAnalytics from 'components/analytics/RouteAnalytics'
-import NetworkAnalytics from 'components/analytics/NetworkAnalytics'
-import { DIMENSION_NAMES } from './const'
+import { useAnalyticsReporter } from 'components/analytics'
 import * as Sentry from '@sentry/react'
 import { Integrations } from '@sentry/tracing'
 import { environmentName } from 'utils/env'
@@ -38,13 +35,6 @@ if (SENTRY_DSN) {
   })
 }
 
-// Init analytics
-const GOOGLE_ANALYTICS_ID: string | undefined = process.env.GOOGLE_ANALYTICS_ID
-initAnalytics({
-  trackingCode: GOOGLE_ANALYTICS_ID,
-  dimensionNames: DIMENSION_NAMES,
-})
-
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const Router: typeof BrowserRouter & typeof HashRouter = (window as any).IS_IPFS ? HashRouter : BrowserRouter
 
@@ -111,24 +101,17 @@ function StateUpdaters(): JSX.Element {
   return <NetworkUpdater />
 }
 
-const Analytics = (): JSX.Element => (
-  <>
-    <Route component={RouteAnalytics} />
-    <Route component={NetworkAnalytics} />
-  </>
-)
-
 /** App content */
 const AppContent = (): JSX.Element => {
+  const location = useLocation()
   const { path } = useRouteMatch()
-
   const pathPrefix = path == '/' ? '' : path
 
+  useAnalyticsReporter(location, 'Explorer')
+
   return (
     <GenericLayout header={<Header />}>
       <React.Suspense fallback={null}>
-        <Analytics />
-
         <Switch>
           <Route path={pathPrefix + '/'} exact component={Home} />
           <Route
@@ -164,7 +147,7 @@ export const ExplorerApp: React.FC = () => {
           <Switch>
             <Route path="/mainnet" component={RedirectMainnet} />
             <Route path="/xdai" component={RedirectXdai} />
-            <Route path={['/gc', '/rinkeby', '/goerli', '/']} component={AppContent} />
+            <Route path={['/gc', '/goerli', '/']} component={AppContent} />
           </Switch>
         </Router>
         {process.env.NODE_ENV === 'development' && <Console />}

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

@@ -101,7 +101,7 @@ export const TokensTableWidget: React.FC<Props> = () => {
     handleNextPage,
     handlePreviousPage,
   } = useTable({ initialState: { pageOffset: 0, pageSize: RESULTS_PER_PAGE } })
-  const { tokens, isLoading, error } = useGetTokens(networkId, tableState)
+  const { tokens, isLoading, error } = useGetTokens(networkId)
   const filteredTokens = useFlexSearch(query, tokens, ['name', 'symbol', 'address'])
   const resultsLength = query.length ? filteredTokens.length : tokens.length
 
@@ -121,6 +121,7 @@ export const TokensTableWidget: React.FC<Props> = () => {
 
   const filterData = (): Token[] => {
     const data = query ? (filteredTokens as Token[]) : tokens
+
     return data
       .map((token) => ({
         ...token,