Merge pull request #565 from cowprotocol/release/2.25

Release/2.25

getWebpackConfig.js

@@ -158,9 +158,6 @@ function getWebpackConfig({ apps = [], config = {}, envVars = {}, defineVars = {
   assert(templatePath, '"templatePath" missing in config')
   assert(logoPath, '"logoPath" missing in config')
 
-  // Log the apps
-  console.log('apps', apps)
-
   // Generate one entry point per app
   const entryPoints = apps.reduce((acc, app) => {
     const { name } = app

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/explorer",
-  "version": "2.24.0",
+  "version": "2.25.0",
   "description": "",
   "main": "src/index.js",
   "sideEffects": false,
@@ -46,9 +46,9 @@
   "author": "",
   "dependencies": {
     "@apollo/client": "^3.1.5",
-    "@cowprotocol/app-data": "v0.1.0",
+    "@cowprotocol/app-data": "^1.0.2",
     "@cowprotocol/contracts": "1.3.1",
-    "@cowprotocol/cow-sdk": "^2.0.6",
+    "@cowprotocol/cow-sdk": "^2.2.1",
     "@fortawesome/fontawesome-svg-core": "^6.1.2",
     "@fortawesome/free-regular-svg-icons": "^6.1.2",
     "@fortawesome/free-solid-svg-icons": "^6.1.2",

src/api/operator/types.ts

@@ -18,7 +18,7 @@ export type RawOrder = EnrichedOrder
  */
 export type Order = Pick<
   RawOrder,
-  'owner' | 'uid' | 'appData' | 'kind' | 'partiallyFillable' | 'signature' | 'class'
+  'owner' | 'uid' | 'appData' | 'kind' | 'partiallyFillable' | 'signature' | 'class' | 'fullAppData'
 > & {
   receiver: string
   txHash?: string

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

@@ -1,22 +1,22 @@
-import React, { useState, useEffect, useCallback } from 'react'
+import React, { useCallback, useEffect, useState } from 'react'
 import { faListUl, faProjectDiagram } from '@fortawesome/free-solid-svg-icons'
-import { useHistory } from 'react-router-dom'
 
-import { useQuery } from 'hooks/useQuery'
+import { useQuery, useUpdateQueryString } from 'hooks/useQuery'
 import { BlockchainNetwork, TransactionsTableContext } from './context/TransactionsTableContext'
 import { useGetTxOrders, useTxOrderExplorerLink } from 'hooks/useGetOrders'
 import RedirectToSearch from 'components/RedirectToSearch'
 import { RedirectToNetwork, useNetworkId } from 'state/network'
 import { Order } from 'api/operator'
 import { TransactionsTableWithData } from 'apps/explorer/components/TransactionsTableWidget/TransactionsTableWithData'
-import { TabItemInterface, TabIcon } from 'components/common/Tabs/Tabs'
+import { TabIcon, TabItemInterface } from 'components/common/Tabs/Tabs'
 import ExplorerTabs from '../common/ExplorerTabs/ExplorerTabs'
-import { TitleAddress, FlexContainer, Title } from 'apps/explorer/pages/styled'
+import { FlexContainer, Title, TitleAddress } from 'apps/explorer/pages/styled'
 import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
 import { ConnectionStatus } from 'components/ConnectionStatus'
 import { Notification } from 'components/Notification'
 import { TransactionBatchGraph } from 'apps/explorer/components/TransanctionBatchGraph'
 import CowLoading from 'components/common/CowLoading'
+import { TAB_QUERY_PARAM_KEY } from 'apps/explorer/const'
 
 interface Props {
   txHash: string
@@ -33,7 +33,7 @@ const DEFAULT_TAB = TabView[1]
 
 function useQueryViewParams(): { tab: string } {
   const query = useQuery()
-  return { tab: query.get('tab')?.toUpperCase() || DEFAULT_TAB } // if URL param empty will be used DEFAULT
+  return { tab: query.get(TAB_QUERY_PARAM_KEY)?.toUpperCase() || DEFAULT_TAB } // if URL param empty will be used DEFAULT
 }
 
 const tabItems = (orders: Order[] | undefined, networkId: BlockchainNetwork, txHash: string): TabItemInterface[] => {
@@ -61,7 +61,7 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
   const isZeroOrders = !!(orders && orders.length === 0)
   const notGpv2ExplorerData = useTxOrderExplorerLink(txHash, isZeroOrders)
 
-  const history = useHistory()
+  const updateQueryString = useUpdateQueryString()
 
   // Avoid redirecting until another network is searched again
   useEffect(() => {
@@ -81,9 +81,10 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
     setTabViewSelected(TabView[newTabViewName])
   }, [])
 
-  useEffect(() => {
-    history.replace({ search: `?tab=${TabView[tabViewSelected].toLowerCase()}` })
-  }, [history, tabViewSelected])
+  useEffect(
+    () => updateQueryString(TAB_QUERY_PARAM_KEY, TabView[tabViewSelected].toLowerCase()),
+    [tabViewSelected, updateQueryString],
+  )
 
   if (errorTxPresentInNetworkId && networkId != errorTxPresentInNetworkId) {
     return <RedirectToNetwork networkId={errorTxPresentInNetworkId} />

src/apps/explorer/components/TransanctionBatchGraph/hooks.ts

@@ -18,8 +18,7 @@ import {
   PopperInstance,
   ViewType,
 } from 'apps/explorer/components/TransanctionBatchGraph/types'
-import { useQuery } from 'hooks/useQuery'
-import { useHistory } from 'react-router-dom'
+import { useQuery, useUpdateQueryString } from 'hooks/useQuery'
 import { Order } from 'api/operator'
 import { useTransactionData } from 'hooks/useTransactionData'
 import {
@@ -205,18 +204,9 @@ function useQueryViewParams(): { visualization: string } {
 }
 
 function useUpdateVisQuery(): (vis: string) => void {
-  const query = useQuery()
-  const history = useHistory()
-
-  // TODO: this is causing one extra re-render as the query is being updated when history is updated
-  // TODO: make it not depend on query
-  return useCallback(
-    (vis: string) => {
-      query.set(VISUALIZATION_PARAM_NAME, vis)
-      history.replace({ search: query.toString() })
-    },
-    [history, query],
-  )
+  const updateQueryString = useUpdateQueryString()
+
+  return useCallback((vis: string) => updateQueryString(VISUALIZATION_PARAM_NAME, vis), [updateQueryString])
 }
 
 export function useTxBatchData(

src/apps/explorer/const.ts

@@ -53,3 +53,5 @@ export const SPECIAL_ADDRESSES = {
   '0xa03be496e67ec29bc62f01a428683d7f9c204930': 'Solver Rewards Safe',
   '0xca771eda0c70aa7d053ab1b25004559b918fe662': 'CoW DAO',
 }
+
+export const TAB_QUERY_PARAM_KEY = 'tab'