chore: release - Merge pull request #542 from cowprotocol/release/2.24.0

Release/2.24.0

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cowprotocol/explorer",
-  "version": "2.23.0",
+  "version": "2.24.0",
   "description": "",
   "main": "src/index.js",
   "sideEffects": false,

src/api/tenderly/index.ts

@@ -1,3 +1,4 @@
 export * from './tenderlyApi'
 
 export type { PublicTrade as Trade, Transfer, Account } from './types'
+export * from './types'

src/api/tenderly/tenderlyApi.ts

@@ -1,16 +1,16 @@
-import { TENDERLY_API_URL, ETH_NULL_ADDRESS, APP_NAME } from 'const'
+import { APP_NAME, NATIVE_TOKEN_ADDRESS_LOWERCASE, TENDERLY_API_URL } from 'const'
 import { Network } from 'types'
 import { fetchQuery } from 'api/baseApi'
 import {
   Account,
   Contract,
-  Trace,
-  PublicTrade as Trade,
-  Transfer,
-  TypeOfTrace,
   IndexTradeInput,
   IndexTransferInput,
+  PublicTrade as Trade,
+  Trace,
+  Transfer,
   TxTradesAndTransfers,
+  TypeOfTrace,
 } from './types'
 import { abbreviateString } from 'utils'
 import { SPECIAL_ADDRESSES } from 'apps/explorer/const'
@@ -58,13 +58,21 @@ function _fetchTradesAccounts(networkId: Network, txHash: string): Promise<Contr
   return fetchQuery<Array<Contract>>({ get: () => _get(networkId, queryString) }, queryString)
 }
 
+export async function getTransactionTrace(networkId: Network, txHash: string): Promise<Trace> {
+  return _fetchTrace(networkId, txHash)
+}
+
+export async function getTransactionContracts(networkId: Network, txHash: string): Promise<Contract[]> {
+  return _fetchTradesAccounts(networkId, txHash)
+}
+
 export async function getTradesAndTransfers(networkId: Network, txHash: string): Promise<TxTradesAndTransfers> {
   const trace = await _fetchTrace(networkId, txHash)
 
-  return traceToTransfersTrades(trace)
+  return traceToTransfersAndTrades(trace)
 }
 
-export function traceToTransfersTrades(trace: Trace): TxTradesAndTransfers {
+export function traceToTransfersAndTrades(trace: Trace): TxTradesAndTransfers {
   const transfers: Array<Transfer> = []
   const trades: Array<Trade> = []
 
@@ -90,15 +98,24 @@ export function traceToTransfersTrades(trace: Trace): TxTradesAndTransfers {
           feeAmount: log.inputs[IndexTradeInput.feeAmount].value,
           orderUid: log.inputs[IndexTradeInput.orderUid].value,
         }
-        if (trade.buyToken === ETH_NULL_ADDRESS) {
+        if (trade.buyToken === NATIVE_TOKEN_ADDRESS_LOWERCASE) {
           //ETH transfers are not captured by ERC20 events, so we need to manually add them to the Transfer list
           transfers.push({
-            token: ETH_NULL_ADDRESS,
+            token: NATIVE_TOKEN_ADDRESS_LOWERCASE,
             from: log.raw.address,
             to: trade.owner,
             value: trade.buyAmount,
             isInternal: log.raw.address === trade.owner,
           })
+        } else if (trade.sellToken === NATIVE_TOKEN_ADDRESS_LOWERCASE) {
+          //ETH transfers are not captured by ERC20 events, so we need to manually add them to the Transfer list
+          transfers.push({
+            token: NATIVE_TOKEN_ADDRESS_LOWERCASE,
+            from: trade.owner,
+            to: log.raw.address,
+            value: trade.sellAmount,
+            isInternal: log.raw.address === trade.owner,
+          })
         }
         trades.push(trade)
       }

src/api/tenderly/types.ts

@@ -35,7 +35,7 @@ export interface Transfer {
   to: string
   value: string
   token: string
-  isInternal: boolean
+  isInternal?: boolean
 }
 
 export interface Account {

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

@@ -15,7 +15,6 @@ import { TitleAddress, FlexContainer, Title } from 'apps/explorer/pages/styled'
 import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
 import { ConnectionStatus } from 'components/ConnectionStatus'
 import { Notification } from 'components/Notification'
-import { useTxBatchTrades, GetTxBatchTradesResult } from 'hooks/useTxBatchTrades'
 import { TransactionBatchGraph } from 'apps/explorer/components/TransanctionBatchGraph'
 import CowLoading from 'components/common/CowLoading'
 
@@ -37,7 +36,7 @@ function useQueryViewParams(): { tab: string } {
   return { tab: query.get('tab')?.toUpperCase() || DEFAULT_TAB } // if URL param empty will be used DEFAULT
 }
 
-const tabItems = (txBatchTrades: GetTxBatchTradesResult, networkId: BlockchainNetwork): TabItemInterface[] => {
+const tabItems = (orders: Order[] | undefined, networkId: BlockchainNetwork, txHash: string): TabItemInterface[] => {
   return [
     {
       id: TabView.ORDERS,
@@ -47,7 +46,7 @@ const tabItems = (txBatchTrades: GetTxBatchTradesResult, networkId: BlockchainNe
     {
       id: TabView.GRAPH,
       tab: <TabIcon title="Graph" iconFontName={faProjectDiagram} />,
-      content: <TransactionBatchGraph txBatchData={txBatchTrades} networkId={networkId} />,
+      content: <TransactionBatchGraph orders={orders} networkId={networkId} txHash={txHash} />,
     },
   ]
 }
@@ -61,7 +60,7 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
   const txHashParams = { networkId, txHash }
   const isZeroOrders = !!(orders && orders.length === 0)
   const notGpv2ExplorerData = useTxOrderExplorerLink(txHash, isZeroOrders)
-  const txBatchTrades = useTxBatchTrades(networkId, txHash, orders)
+
   const history = useHistory()
 
   // Avoid redirecting until another network is searched again
@@ -117,7 +116,7 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
         }}
       >
         <ExplorerTabs
-          tabItems={tabItems(txBatchTrades, networkId)}
+          tabItems={tabItems(orders, networkId, txHash)}
           selectedTab={tabViewSelected}
           updateSelectedTab={(key: number): void => onChangeTab(key)}
         />

src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx

@@ -26,15 +26,17 @@ export default class ElementsBuilder {
     this._countEdgeDirection.set(idDirection, count + 1)
   }
 
-  _createNodeElement = (node: Node, parent?: string, hideLabel?: boolean): ElementDefinition => {
+  _createNodeElement = (node: Node, parent?: string, hideLabel?: boolean, tooltip?: InfoTooltip): ElementDefinition => {
     this._increaseCountNodeType(node.type)
     return {
       group: 'nodes',
       data: {
+        address: node.id,
         id: `${node.type}:${node.id}`,
         label: !hideLabel ? node.entity.alias : '',
         type: node.type,
         parent: parent ? `${TypeNodeOnTx.NetworkNode}:${parent}` : undefined,
+        tooltip,
         href: node.entity.href,
       },
     }
@@ -45,9 +47,9 @@ export default class ElementsBuilder {
     return this
   }
 
-  node(node: Node, parent?: string): this {
+  node(node: Node, parent?: string, tooltip?: InfoTooltip): this {
     const GROUP_NODE_NAME = 'group'
-    this._nodes.push(this._createNodeElement(node, parent, node.id.includes(GROUP_NODE_NAME)))
+    this._nodes.push(this._createNodeElement(node, parent, node.id.includes(GROUP_NODE_NAME), tooltip))
     return this
   }
 
@@ -139,6 +141,10 @@ export function buildGridLayout(
     throw new Error('Center node is required')
   }
 
+  if (countTypes.get(TypeNodeOnTx.Token)) {
+    return { center, nodes }
+  }
+
   const maxRows = Math.max(...countTypes.values())
   const middleOfTotalRows = Math.floor(maxRows / 2)
   const traders = countTypes.get(TypeNodeOnTx.Trader) || 0