Merge pull request #523 from cowprotocol/release/2.23

Release/2.23.0

package.json

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

src/api/tenderly/tenderlyApi.ts

@@ -13,6 +13,7 @@ import {
   TxTradesAndTransfers,
 } from './types'
 import { abbreviateString } from 'utils'
+import { SPECIAL_ADDRESSES } from 'apps/explorer/const'
 
 export const ALIAS_TRADER_NAME = 'Trader'
 const COW_PROTOCOL_CONTRACT_NAME = 'GPv2Settlement'
@@ -146,6 +147,7 @@ export function accountAddressesInvolved(
       if (transferAddresses.has(contract.address))
         result.set(contract.address, {
           alias: _contractName(contract.contract_name),
+          address: contract.address,
         })
     })
     trades.forEach((trade) => {
@@ -154,7 +156,8 @@ export function accountAddressesInvolved(
       // See https://github.com/cowprotocol/explorer/issues/491
       if (!result.has(trade.owner)) {
         result.set(trade.owner, {
-          alias: ALIAS_TRADER_NAME,
+          alias: getAliasFromAddress(trade.owner),
+          address: trade.owner,
         })
       }
     })
@@ -166,7 +169,8 @@ export function accountAddressesInvolved(
       .forEach((address) => {
         if (!result.get(address)) {
           result.set(address, {
-            alias: abbreviateString(address, 6, 4),
+            alias: getAliasFromAddress(address, true),
+            address,
           })
         }
       })
@@ -183,3 +187,11 @@ function _contractName(name: string): string {
 
   return name
 }
+
+export function getAliasFromAddress(address: string, isUnknown = false): string {
+  const lowerCaseAddress = address.toLowerCase()
+
+  if (SPECIAL_ADDRESSES[lowerCaseAddress]) return SPECIAL_ADDRESSES[lowerCaseAddress]
+
+  return isUnknown ? abbreviateString(address, 6, 4) : ALIAS_TRADER_NAME
+}

src/api/tenderly/types.ts

@@ -40,6 +40,8 @@ export interface Transfer {
 
 export interface Account {
   alias: string
+  address?: string
+  href?: string
 }
 
 export interface Contract {

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

@@ -35,6 +35,7 @@ export default class ElementsBuilder {
         label: !hideLabel ? node.entity.alias : '',
         type: node.type,
         parent: parent ? `${TypeNodeOnTx.NetworkNode}:${parent}` : undefined,
+        href: node.entity.href,
       },
     }
   }

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

@@ -90,14 +90,31 @@ export function useCytoscape(params: UseCytoscapeParams): UseCytoscapeReturn {
     })
     cy.on('mouseover', 'edge', (event): void => {
       event.target.addClass('hover')
+      document.getElementById('tx-graph')?.classList.add('hover')
     })
     cy.on('mouseout', 'edge', (event): void => {
       event.target.removeClass('hover')
+      document.getElementById('tx-graph')?.classList.remove('hover')
+    })
+    cy.on('mouseover', 'node', (event): void => {
+      if (event.target.data('href')) {
+        event.target.addClass('hover')
+        document.getElementById('tx-graph')?.classList.add('hover')
+      }
+    })
+    cy.on('mouseout', 'node', (event): void => {
+      event.target.removeClass('hover')
+      document.getElementById('tx-graph')?.classList.remove('hover')
+    })
+    cy.on('tap', 'node', (event): void => {
+      const href = event.target.data('href')
+      href && window.open(href, '_blank')
     })
     cy.nodes().noOverlap({ padding: 5 })
 
     return (): void => {
       cy.removeAllListeners()
+      document.getElementById('tx-graph')?.classList.remove('hover')
       removePopper(cyPopperRef)
     }
   }, [cytoscapeRef, elements.length])

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

@@ -103,7 +103,7 @@ export function TransactionBatchGraph(params: GraphBatchTxParams): JSX.Element {
   }
 
   return (
-    <>
+    <div id="tx-graph" style={{ flex: 1 }}>
       <WrapperCytoscape
         elements={elements}
         layout={layout}
@@ -139,6 +139,6 @@ export function TransactionBatchGraph(params: GraphBatchTxParams): JSX.Element {
           />
         </LayoutButton>
       </FloatingWrapper>
-    </>
+    </div>
   )
 }

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

@@ -2,6 +2,7 @@ import { Stylesheet } from 'cytoscape'
 import styled, { DefaultTheme, css } from 'styled-components'
 
 import TraderIcon from 'assets/img/Trader.svg'
+import SpecialIcon from 'assets/img/Trader-variant.svg'
 import CowProtocolIcon from 'assets/img/CoW-protocol.svg'
 import DexIcon from 'assets/img/Dex.svg'
 import { MEDIA } from 'const'
@@ -45,40 +46,45 @@ const FloatingButton = css`
   }
 `
 export const ResetButton = styled.button`
-  ${FloatingButton}
-  min-width: 6.586rem;
-  transition: all 0.2s ease-in-out;
+  ${FloatingButton} {
+    min-width: 6.586rem;
+    transition: all 0.2s ease-in-out;
+  }
 `
 export const LayoutButton = styled.span`
-  ${FloatingButton}
-  display: flex;
-  color: ${({ theme }): string => theme.textPrimary1};
-  font-size: ${({ theme }): string => theme.fontSizeDefault};
-  font-weight: normal;
-  white-space: nowrap;
-  align-items: center;
-  padding: 0 0.6rem 0 0.6rem;
+  ${FloatingButton} {
+    display: flex;
+    color: ${({ theme }): string => theme.textPrimary1};
+    font-size: ${({ theme }): string => theme.fontSizeDefault};
+    font-weight: normal;
+    white-space: nowrap;
+    align-items: center;
+    padding: 0 0.6rem 0 0.6rem;
+  }
 `
 
 export const DropdownWrapper = styled(Dropdown)`
   &.dropdown-container {
-    ${ArrowIconCSS}
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    & div:first-child {
+    ${ArrowIconCSS} {
       width: 100%;
       height: 100%;
       display: flex;
       align-items: center;
-      gap: 0.6rem;
-      @media ${MEDIA.mediumDown} {
-        justify-content: center;
+
+      & div:first-child {
+        width: 100%;
+        height: 100%;
+        display: flex;
+        align-items: center;
+        gap: 0.6rem;
+        @media ${MEDIA.mediumDown} {
+          justify-content: center;
+        }
+      }
+
+      > .dropdown-options {
+        min-width: 7rem;
       }
-    }
-    > .dropdown-options {
-      min-width: 7rem;
     }
   }
 `
@@ -95,7 +101,29 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
         'background-color': theme.bg2,
       },
     },
-
+    {
+      selector: 'node[label].hover',
+      style: {
+        color: theme.orange,
+      },
+    },
+    {
+      selector: 'node',
+      style: {
+        'border-style': 'solid',
+        'border-width': 3,
+        'border-opacity': 0,
+      },
+    },
+    {
+      selector: 'node.hover',
+      style: {
+        'border-color': theme.orange,
+        'border-style': 'solid',
+        'border-width': 3,
+        'border-opacity': 0.75,
+      },
+    },
     {
       selector: 'edge[label]',
       style: {
@@ -113,6 +141,7 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
         'text-background-shape': 'roundrectangle',
         'font-size': '16px',
         'min-zoomed-font-size': 8,
+        'text-rotation': 'autorotate',
       },
     },
     {
@@ -121,7 +150,6 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
         'curve-style': 'bezier',
         'font-size': '15px',
         'text-background-padding': '3px',
-        'control-point-step-size': 75,
       },
     },
     {
@@ -156,6 +184,14 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
         'text-margin-y': 8,
       },
     },
+    {
+      selector: 'node[type="special"]',
+      style: {
+        'background-image': `url(${SpecialIcon})`,
+        'text-valign': 'bottom',
+        'text-margin-y': 8,
+      },
+    },
     {
       selector: 'node[type="dex"]',
       style: {
@@ -180,6 +216,7 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
       style: {
         'border-style': 'dashed',
         'border-opacity': 0.8,
+        'border-width': 1,
         opacity: 0.8,
       },
     },

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

@@ -5,6 +5,7 @@ export enum TypeNodeOnTx {
   CowProtocol = 'cowProtocol',
   Trader = 'trader',
   Dex = 'dex',
+  Special = 'special',
 }
 
 export enum TypeEdgeOnTx {
@@ -21,3 +22,4 @@ export type Node =
   | NodeType<TypeNodeOnTx.CowProtocol, Account>
   | NodeType<TypeNodeOnTx.Trader, Account>
   | NodeType<TypeNodeOnTx.Dex, Account>
+  | NodeType<TypeNodeOnTx.Special, Account>

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

@@ -9,9 +9,10 @@ import { Settlement as TxSettlement } from 'hooks/useTxBatchTrades'
 import { Network } from 'types'
 import { networkOptions } from 'components/NetworkSelector'
 import ElementsBuilder, { buildGridLayout } from 'apps/explorer/components/TransanctionBatchGraph/elementsBuilder'
-import { TOKEN_SYMBOL_UNKNOWN } from 'apps/explorer/const'
+import { SPECIAL_ADDRESSES, TOKEN_SYMBOL_UNKNOWN } from 'apps/explorer/const'
 import BigNumber from 'bignumber.js'
 import { APP_NAME } from 'const'
+import { getExplorerUrl } from 'utils/getExplorerUrl'
 
 const PROTOCOL_NAME = APP_NAME
 const INTERNAL_NODE_NAME = `${APP_NAME} Buffer`
@@ -105,7 +106,9 @@ export const removePopper = (popperInstance: React.MutableRefObject<PopperInstan
   popperInstance.current?.destroy()
 
 function getTypeNode(account: Account & { owner?: string }): TypeNodeOnTx {
-  if (account.alias === ALIAS_TRADER_NAME || account.owner) {
+  if (account.address && SPECIAL_ADDRESSES[account.address]) {
+    return TypeNodeOnTx.Special
+  } else if (account.alias === ALIAS_TRADER_NAME || account.owner) {
     return TypeNodeOnTx.Trader
   } else if (account.alias === PROTOCOL_NAME) {
     return TypeNodeOnTx.CowProtocol
@@ -210,9 +213,13 @@ export function getNodes(
       // Set flag to prevent creating more
       internalNodeCreated = true
 
-      const account = { alias: fromId }
+      const account = { alias: fromId, href: getExplorerUrl(networkId, 'address', transfer.from) }
       builder.node(
-        { type: TypeNodeOnTx.Trader, entity: account, id: fromId },
+        {
+          type: TypeNodeOnTx.Special,
+          entity: account,
+          id: fromId,
+        },
         // Put it inside the parent node
         getInternalParentNode(groupNodes, transfer),
       )

src/apps/explorer/const.ts

@@ -48,3 +48,8 @@ export const COWWIKI_LINK = 'https://en.wikipedia.org/wiki/Coincidence_of_wants'
 export const GNOSIS_FORUM_ROADTODECENT_LINK = 'https://forum.gnosis.io/t/gpv2-road-to-decentralization/1245'
 
 export const APP_TITLE = 'CoW Protocol Explorer'
+
+export const SPECIAL_ADDRESSES = {
+  '0xa03be496e67ec29bc62f01a428683d7f9c204930': 'Solver Rewards Safe',
+  '0xca771eda0c70aa7d053ab1b25004559b918fe662': 'CoW DAO',
+}

src/apps/explorer/styled.ts

@@ -30,6 +30,10 @@ export const GlobalStyle = createGlobalStyle`
     ${ScrollBarStyle}
   }
 
+  .hover {
+    cursor: pointer;
+  }
+
   /* Cystoscape - BatchViewer styles */
   .target-popper {
     max-width: 50rem;

src/components/common/BlockExplorerLink/BlockExplorerLink.tsx

@@ -5,8 +5,7 @@ import { ExternalLink } from 'components/analytics/ExternalLink'
 import LogoWrapper, { LOGO_MAP } from 'components/common/LogoWrapper'
 
 import { abbreviateString } from 'utils'
-
-type BlockExplorerLinkType = 'tx' | 'address' | 'contract' | 'token' | 'event'
+import { BlockExplorerLinkType, getExplorerUrl } from 'utils/getExplorerUrl'
 
 export interface Props {
   /**
@@ -40,37 +39,6 @@ export interface Props {
   showLogo?: boolean
 }
 
-function getEtherscanUrlPrefix(networkId: Network): string {
-  return !networkId || networkId === Network.MAINNET || networkId === Network.GNOSIS_CHAIN
-    ? ''
-    : (Network[networkId] || '').toLowerCase() + '.'
-}
-
-function getEtherscanUrlSuffix(type: BlockExplorerLinkType, identifier: string): string {
-  switch (type) {
-    case 'tx':
-      return `tx/${identifier}`
-    case 'event':
-      return `tx/${identifier}#eventlog`
-    case 'address':
-      return `address/${identifier}`
-    case 'contract':
-      return `address/${identifier}#code`
-    case 'token':
-      return `token/${identifier}`
-  }
-}
-
-function getEtherscanUrl(host: string, networkId: number, type: BlockExplorerLinkType, identifier: string): string {
-  return `https://${getEtherscanUrlPrefix(networkId)}${host}/${getEtherscanUrlSuffix(type, identifier)}`
-}
-
-function getExplorerUrl(networkId: number, type: BlockExplorerLinkType, identifier: string): string {
-  return networkId === Network.GNOSIS_CHAIN
-    ? getEtherscanUrl('gnosisscan.io', networkId, type, identifier)
-    : getEtherscanUrl('etherscan.io', networkId, type, identifier)
-}
-
 /**
  * Dumb BlockExplorerLink, a pure UI component
  *