feat(batch-graph): add link to etherscan to nodes (#507)

* feat: add address and href fields to Account * refactor: move getExplorerUrl to src/utils * feat: add address to Account instances * feat:add href to account instances * feat: add href to node data * feat: change node label color on hover * feat: open node href on click * feat: reduce edge distance and make label auto rotate * fix: account.address is optional and can be undefined * feat: add node border on hover * fix: 🐛 add cursor pointer to graph (#509) * fix: 🐛 add cursor pointer to graph * fix: 🐛 rerender issue * fix: 🐛 missing hover states * fix: add invisible border to all nodes to avoid flickering on hover --------- Co-authored-by: Tukan van der Borgh <[email protected]>
cowprotocol · Jun 5, 2023 · 9b2b2b8 · 9b2b2b8
1 parent bbccc41
commit 9b2b2b8
Show file tree

Hide file tree

Showing 10 changed files with 94 additions and 37 deletions.
diff --git a/src/api/tenderly/tenderlyApi.ts b/src/api/tenderly/tenderlyApi.ts
@@ -146,6 +146,7 @@ export function accountAddressesInvolved(
       if (transferAddresses.has(contract.address))
         result.set(contract.address, {
           alias: _contractName(contract.contract_name),
+          address: contract.address,
         })
     })
     trades.forEach((trade) => {
@@ -155,6 +156,7 @@ export function accountAddressesInvolved(
       if (!result.has(trade.owner)) {
         result.set(trade.owner, {
           alias: ALIAS_TRADER_NAME,
+          address: trade.owner,
         })
       }
     })
@@ -167,6 +169,7 @@ export function accountAddressesInvolved(
         if (!result.get(address)) {
           result.set(address, {
             alias: abbreviateString(address, 6, 4),
+            address,
           })
         }
       })

diff --git a/src/api/tenderly/types.ts b/src/api/tenderly/types.ts
@@ -40,6 +40,8 @@ export interface Transfer {
 
 export interface Account {
   alias: string
+  address?: string
+  href?: string
 }
 
 export interface Contract {

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx b/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,
       },
     }
   }

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/hooks.ts b/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])

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/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>
   )
 }
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
@@ -95,7 +95,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 +135,7 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
         'text-background-shape': 'roundrectangle',
         'font-size': '16px',
         'min-zoomed-font-size': 8,
+        'text-rotation': 'autorotate',
       },
     },
     {
@@ -121,7 +144,6 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
         'curve-style': 'bezier',
         'font-size': '15px',
         'text-background-padding': '3px',
-        'control-point-step-size': 75,
       },
     },
     {
@@ -180,6 +202,7 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
       style: {
         'border-style': 'dashed',
         'border-opacity': 0.8,
+        'border-width': 1,
         opacity: 0.8,
       },
     },

diff --git a/src/apps/explorer/styled.ts b/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;

diff --git a/src/components/common/BlockExplorerLink/BlockExplorerLink.tsx b/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
  *

diff --git a/src/hooks/useTxBatchTrades.tsx b/src/hooks/useTxBatchTrades.tsx
@@ -7,6 +7,7 @@ import { SingleErc20State } from 'state/erc20'
 import { Order } from 'api/operator'
 import BigNumber from 'bignumber.js'
 import { usePrevious } from './usePrevious'
+import { getExplorerUrl } from 'utils/getExplorerUrl'
 
 interface TxBatchTrades {
   trades: Trade[]
@@ -104,13 +105,17 @@ export function useTxBatchTrades(
         if (!(order.receiver in _accounts)) {
           accountsWithReceiver[order.receiver] = {
             alias: ALIAS_TRADER_NAME,
+            address: order.receiver,
           }
         }
         accountsWithReceiver[order.receiver] = {
           ...accountsWithReceiver[order.receiver],
           owner: order.owner,
         }
       })
+      Object.values(accountsWithReceiver).forEach((account) => {
+        if (account.address) account.href = getExplorerUrl(network, 'address', account.address)
+      })
 
       setErc20Addresses(transfersWithKind.map((transfer: Transfer): string => transfer.token))
       setTxBatchTrades({ trades, transfers: transfersWithKind })

diff --git a/src/utils/getExplorerUrl.ts b/src/utils/getExplorerUrl.ts
@@ -0,0 +1,34 @@
+import { Network } from 'types'
+
+export type BlockExplorerLinkType = 'tx' | 'address' | 'contract' | 'token' | 'event'
+
+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)}`
+}
+
+export 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)
+}