From b9b81b79743449a6cde02e16403bc61ac25219db Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Fri, 18 Mar 2022 09:53:17 -0300
Subject: [PATCH 01/31] Solve merge conflicts PR1057

---
 package.json                                  |   4 +
 .../TransactionsTableWidget/index.tsx         |  33 ++--
 .../elementsBuilder.tsx                       | 116 ++++++++++++++
 .../TransanctionBatchGraph/index.tsx          | 142 ++++++++++++++++++
 .../TransanctionBatchGraph/styled.ts          |  69 +++++++++
 .../TransanctionBatchGraph/types.ts           |  15 ++
 src/apps/explorer/const.ts                    |   3 +
 src/apps/explorer/layout/Header.tsx           |   3 +-
 src/apps/explorer/pages/UserDetails.tsx       |   8 +-
 src/apps/explorer/pages/styled.tsx            |  53 ++++++-
 src/assets/img/CoW.svg                        |  16 ++
 src/assets/img/Dex.svg                        |  10 ++
 src/assets/img/TraderMe.svg                   |   5 +
 src/assets/img/TraderOther.svg                |   5 +
 src/hooks/useTxBatchTrades.tsx                |   2 +-
 yarn.lock                                     |  52 +++++++
 16 files changed, 513 insertions(+), 23 deletions(-)
 create mode 100644 src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
 create mode 100644 src/apps/explorer/components/TransanctionBatchGraph/index.tsx
 create mode 100644 src/apps/explorer/components/TransanctionBatchGraph/styled.ts
 create mode 100644 src/apps/explorer/components/TransanctionBatchGraph/types.ts
 create mode 100644 src/assets/img/CoW.svg
 create mode 100644 src/assets/img/Dex.svg
 create mode 100644 src/assets/img/TraderMe.svg
 create mode 100644 src/assets/img/TraderOther.svg

diff --git a/package.json b/package.json
index f399676c7..f2c28d67e 100644
--- a/package.json
+++ b/package.json
@@ -75,6 +75,7 @@
     "bignumber.js": "^9.0.0",
     "bn.js": "^4.11.9",
     "combine-reducers": "^1.0.0",
+    "cytoscape": "^3.21.0",
     "date-fns": "^2.9.0",
     "detect-browser": "^5.1.0",
     "eth-json-rpc-middleware": "^4.4.1",
@@ -90,6 +91,7 @@
     "qrcode.react": "^1.0.0",
     "react": "^16.12.0",
     "react-copy-to-clipboard": "^5.0.2",
+    "react-cytoscapejs": "^1.2.1",
     "react-device-detect": "^1.15.0",
     "react-dom": "^16.12.0",
     "react-ga": "^3.3.0",
@@ -124,6 +126,7 @@
     "@truffle/hdwallet-provider": "^1.2.0",
     "@types/bn.js": "^4.11.6",
     "@types/combine-reducers": "^1.0.0",
+    "@types/cytoscape": "^3.19.4",
     "@types/enzyme": "^3.10.4",
     "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/hapi__joi": "^16.0.12",
@@ -131,6 +134,7 @@
     "@types/node": "^14.0.14",
     "@types/qrcode.react": "^1.0.0",
     "@types/react-copy-to-clipboard": "^4.3.0",
+    "@types/react-cytoscapejs": "^1.2.2",
     "@types/react-dom": "^16.9.5",
     "@types/react-router": "^5.1.4",
     "@types/react-router-dom": "^5.1.3",
diff --git a/src/apps/explorer/components/TransactionsTableWidget/index.tsx b/src/apps/explorer/components/TransactionsTableWidget/index.tsx
index bc79ba21c..65272c90c 100644
--- a/src/apps/explorer/components/TransactionsTableWidget/index.tsx
+++ b/src/apps/explorer/components/TransactionsTableWidget/index.tsx
@@ -1,19 +1,20 @@
 import React, { useState, useEffect } from 'react'
 
 import { BlockchainNetwork, TransactionsTableContext } from './context/TransactionsTableContext'
-import { useGetTxOrders } from 'hooks/useGetOrders'
+import { useGetTxOrders, useTxOrderExplorerLink } from 'hooks/useGetOrders'
 import RedirectToSearch from 'components/RedirectToSearch'
 import Spinner from 'components/common/Spinner'
 import { RedirectToNetwork, useNetworkId } from 'state/network'
 import { Order } from 'api/operator'
-import { useTxOrderExplorerLink } from 'hooks/useGetOrders'
 import { TransactionsTableWithData } from 'apps/explorer/components/TransactionsTableWidget/TransactionsTableWithData'
 import { TabItemInterface } from 'components/common/Tabs/Tabs'
 import ExplorerTabs from '../common/ExplorerTabs/ExplorerTab'
-import styled from 'styled-components'
-import { TitleAddress } from 'apps/explorer/pages/styled'
+import { TitleAddress, FlexContainer, StyledTabLoader, BVButton, Title } from 'apps/explorer/pages/styled'
 import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
 import { useTxBatchTrades } from 'hooks/useTxBatchTrades'
+import { faListUl, faProjectDiagram } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import TransactionBatchGraph from 'apps/explorer/components/TransanctionBatchGraph'
 
 interface Props {
   txHash: string
@@ -21,10 +22,6 @@ interface Props {
   transactions?: Order[]
 }
 
-const StyledTabLoader = styled.span`
-  padding-left: 4px;
-`
-
 const tabItems = (isLoadingOrders: boolean): TabItemInterface[] => {
   return [
     {
@@ -44,6 +41,7 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
   const { orders, isLoading: isTxLoading, errorTxPresentInNetworkId, error } = useGetTxOrders(txHash)
   const networkId = useNetworkId() || undefined
   const [redirectTo, setRedirectTo] = useState(false)
+  const [batchViewer, setBatchViewer] = useState(false)
   const txHashParams = { networkId, txHash }
   const isZeroOrders = !!(orders && orders.length === 0)
   const notGpv2ExplorerData = useTxOrderExplorerLink(txHash, isZeroOrders)
@@ -73,15 +71,22 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
     return <Spinner spin size="3x" />
   }
 
+  const batchViewerButtonName = batchViewer ? 'Show Transactions list' : 'Show Batch Viewer'
+  const batchViewerButtonIcon = batchViewer ? faListUl : faProjectDiagram
+
   return (
     <>
-      <h1>
-        Transaction details
+      <FlexContainer>
+        <Title>Transaction details</Title>
         <TitleAddress
           textToCopy={txHash}
           contentsToDisplay={<BlockExplorerLink type="tx" networkId={networkId} identifier={txHash} showLogo />}
         />
-      </h1>
+        <BVButton onClick={(): void => setBatchViewer(!batchViewer)}>
+          <FontAwesomeIcon icon={batchViewerButtonIcon} />
+          {batchViewerButtonName}
+        </BVButton>
+      </FlexContainer>
       <TransactionsTableContext.Provider
         value={{
           orders,
@@ -90,7 +95,11 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
           isTxLoading,
         }}
       >
-        <ExplorerTabs tabItems={tabItems(isTxLoading)} />
+        {batchViewer ? (
+          <TransactionBatchGraph txBatchData={txBatchTrades} networkId={networkId} />
+        ) : (
+          <ExplorerTabs tabItems={tabItems(isTxLoading)} />
+        )}
       </TransactionsTableContext.Provider>
     </>
   )
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx b/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
new file mode 100644
index 000000000..3dc2bcb29
--- /dev/null
+++ b/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
@@ -0,0 +1,116 @@
+import { ElementDefinition } from 'cytoscape'
+import { Node, TypeNodeOnTx } from './types'
+
+export default class ElementsBuilder {
+  _center: ElementDefinition | null = null
+  _nodes: ElementDefinition[] = []
+  _edges: ElementDefinition[] = []
+  _SIZE: number
+  _countTypes: Map<string, number>
+
+  constructor(heighSize?: number) {
+    this._SIZE = heighSize || 600
+    this._countTypes = new Map()
+  }
+
+  _increaseCounType = (_type: string): void => {
+    const count = this._countTypes.get(_type) || 0
+    this._countTypes.set(_type, count + 1)
+  }
+  _createNodeElement = (node: Node, parent?: string): ElementDefinition => {
+    this._increaseCounType(node.type)
+    return {
+      group: 'nodes',
+      data: {
+        id: `${node.type}:${node.id}`,
+        label: node.entity.alias,
+        type: node.type,
+        parent: parent ? `${TypeNodeOnTx.NetworkNode}:${parent}` : undefined,
+      },
+    }
+  }
+
+  center(node: Node, parent?: string): this {
+    this._center = this._createNodeElement(node, parent)
+    return this
+  }
+
+  node(node: Node, parent?: string): this {
+    this._nodes.push(this._createNodeElement(node, parent))
+    return this
+  }
+
+  edge(source: Pick<Node, 'type' | 'id'>, target: Pick<Node, 'type' | 'id'>, label: string): this {
+    this._edges.push({
+      group: 'edges',
+      data: {
+        id: `${source.type}:${source.id}->${target.type}:${target.id}`,
+        source: `${source.type}:${source.id}`,
+        target: `${target.type}:${target.id}`,
+        label,
+      },
+    })
+    return this
+  }
+
+  build(): ElementDefinition[] {
+    if (!this._center) {
+      throw new Error('Center node is required')
+    }
+
+    const thirdOfTotalRows = Math.max(...this._countTypes.values()) / 3
+    const center = {
+      ...this._center,
+      position: { x: 100, y: 0 },
+    }
+    center['data']['rowValue'] = Math.floor(thirdOfTotalRows)
+
+    const r = this._SIZE / 2 - 100
+
+    const nodes = this._nodes.map((node, index) => {
+      return {
+        ...node,
+        position: {
+          x: r * Math.cos((2 * Math.PI * index) / this._nodes.length),
+          y: r * Math.sin((2 * Math.PI * index) / this._nodes.length),
+        },
+      }
+    })
+
+    return [center, ...nodes, ...this._edges]
+  }
+
+  getById(id: string): ElementDefinition | undefined {
+    // split type:id and find by id
+    if (this._center) {
+      return [this._center, ...this._nodes].find((node) => node.data.id?.split(':')[1] === id)
+    }
+
+    return this._nodes.find((node) => node.data.id?.split(':')[1] === id)
+  }
+}
+
+const columnTypeMap = new Map<TypeNodeOnTx, number>([
+  [TypeNodeOnTx.Trader, 0],
+  [TypeNodeOnTx.CowProtocol, 1],
+  [TypeNodeOnTx.Dex, 2],
+])
+
+interface GridPosition {
+  x: number
+  y: number
+}
+export function getGridPosition(type: TypeNodeOnTx, index: number): undefined | GridPosition {
+  if (!columnTypeMap.has(type)) return
+
+  let col
+  const row = index
+  if (type === TypeNodeOnTx.Trader) {
+    col = 0
+  } else if (type === TypeNodeOnTx.CowProtocol) {
+    col = 1
+  } else {
+    col = 2
+  }
+  return { y: row, x: col }
+}
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
new file mode 100644
index 000000000..69a8b17bb
--- /dev/null
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -0,0 +1,142 @@
+import Cytoscape, { ElementDefinition, NodeSingular } from 'cytoscape'
+import React, { useState, useEffect, useRef, useCallback } from 'react'
+import CytoscapeComponent from 'react-cytoscapejs'
+import styled from 'styled-components'
+
+import Spinner from 'components/common/Spinner'
+import { GetTxBatchTradesResult as TxBatchData, Settlement as TxSettlement } from 'hooks/useTxBatchTrades'
+import { networkOptions } from 'components/NetworkSelector'
+import { Network } from 'types'
+import { Account, ALIAS_TRADER_NAME } from 'api/tenderly'
+import ElementsBuilder from 'apps/explorer/components/TransanctionBatchGraph/elementsBuilder'
+import { TypeNodeOnTx } from './types'
+import { APP_NAME } from 'const'
+import { HEIGHT_HEADER_FOOTER } from 'apps/explorer/const'
+import { STYLESHEET } from './styled'
+
+const HEIGHT_SIZE = window.innerHeight - HEIGHT_HEADER_FOOTER
+const PROTOCOL_NAME = APP_NAME
+const WrapperCytoscape = styled(CytoscapeComponent)`
+  background-color: ${({ theme }): string => theme.bg1};
+  font-weight: ${({ theme }): string => theme.fontMedium};
+  border: 0.1rem solid ${({ theme }): string => theme.borderPrimary};
+  border-radius: 0.4rem;
+`
+
+function getTypeNode(element: Account): TypeNodeOnTx {
+  let type = TypeNodeOnTx.Dex
+  if (element.alias === ALIAS_TRADER_NAME) {
+    type = TypeNodeOnTx.Trader
+  } else if (element.alias === PROTOCOL_NAME) {
+    type = TypeNodeOnTx.CowProtocol
+  }
+
+  return type
+}
+
+function getNetworkParentNode(account: Account, networkName: string): string | undefined {
+  return account.alias !== ALIAS_TRADER_NAME ? networkName : undefined
+}
+
+function getNodes(txSettlement: TxSettlement, networkId: Network): ElementDefinition[] {
+  if (!txSettlement.accounts) return []
+
+  const networkName = networkOptions.find((network) => network.id === networkId)?.name.toLowerCase()
+  const networkNode = { alias: networkName || '' }
+  const builder = new ElementsBuilder(HEIGHT_SIZE)
+  builder.node({ type: TypeNodeOnTx.NetworkNode, entity: networkNode, id: networkNode.alias })
+
+  for (const key in txSettlement.accounts) {
+    const account = txSettlement.accounts[key]
+    const parentNodeName = getNetworkParentNode(account, networkNode.alias)
+
+    if (getTypeNode(account) === TypeNodeOnTx.CowProtocol) {
+      builder.center({ type: TypeNodeOnTx.CowProtocol, entity: account, id: key }, parentNodeName)
+    } else {
+      builder.node(
+        {
+          id: key,
+          type: getTypeNode(account),
+          entity: account,
+        },
+        parentNodeName,
+      )
+    }
+  }
+
+  txSettlement.transfers.forEach((transfer) => {
+    const token = txSettlement.tokens[transfer.token] || { decimals: 1, symbol: 'UNKNOW' }
+
+    const source = builder.getById(transfer.from)
+    const target = builder.getById(transfer.to)
+    builder.edge(
+      { type: source?.data.type, id: transfer.from },
+      { type: target?.data.type, id: transfer.to },
+      `${token.symbol}`,
+    )
+  })
+
+  return builder.build()
+}
+
+interface GraphBatchTxParams {
+  txBatchData: TxBatchData
+  networkId: Network | undefined
+}
+
+function TransanctionBatchGraph({
+  txBatchData: { error, isLoading, txSettlement },
+  networkId,
+}: GraphBatchTxParams): JSX.Element {
+  const [elements, setElements] = useState<ElementDefinition[]>([])
+  const cytoscapeRef = useRef<Cytoscape.Core | null>(null)
+  const setCytoscape = useCallback(
+    (ref: Cytoscape.Core) => {
+      cytoscapeRef.current = ref
+    },
+    [cytoscapeRef],
+  )
+
+  useEffect(() => {
+    if (error || isLoading || !networkId) return
+
+    setElements(getNodes(txSettlement, networkId))
+  }, [error, isLoading, networkId, txSettlement])
+
+  if (isLoading) return <Spinner spin size="3x" />
+
+  const layout = {
+    name: 'grid',
+    position: function (node: NodeSingular): { row: undefined | number; col: number } {
+      let col
+      let row = undefined
+      if (node.data('type') === TypeNodeOnTx.Trader) {
+        col = 0
+      } else if (node.data('type') === TypeNodeOnTx.CowProtocol) {
+        col = 1
+        row = node.data('rowValue')
+      } else {
+        col = 2
+      }
+      return { row, col }
+    },
+    fit: true, // whether to fit the viewport to the graph
+    padding: 20, // padding used on fit
+    avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
+    avoidOverlapPadding: 10, // extra spacing around nodes when avoidOverlap: true
+    nodeDimensionsIncludeLabels: false,
+  }
+
+  return (
+    <WrapperCytoscape
+      elements={elements}
+      layout={layout}
+      style={{ width: '100%', height: HEIGHT_SIZE }}
+      stylesheet={STYLESHEET}
+      cy={setCytoscape}
+      wheelSensitivity={0.2}
+    />
+  )
+}
+
+export default TransanctionBatchGraph
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
new file mode 100644
index 000000000..41b40c252
--- /dev/null
+++ b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
@@ -0,0 +1,69 @@
+import { Stylesheet } from 'cytoscape'
+
+import TraderOtherIcon from 'assets/img/TraderOther.svg'
+import CowProtocolIcon from 'assets/img/CoW.svg'
+import DexIcon from 'assets/img/Dex.svg'
+
+export const STYLESHEET: Stylesheet[] = [
+  {
+    selector: 'node[label]',
+    style: {
+      label: 'data(label)',
+      color: '#cfcfcf',
+      height: 50,
+      width: 50,
+      'background-color': '#22232d',
+    },
+  },
+
+  {
+    selector: 'edge[label]',
+    style: {
+      label: 'data(label)',
+      width: 3,
+      'target-arrow-shape': 'triangle',
+      'curve-style': 'unbundled-bezier',
+      color: 'black',
+      'line-color': '#747a9e',
+      'line-opacity': 0.8,
+      'text-margin-y': 10,
+
+      'text-background-color': 'white',
+      'text-background-opacity': 1,
+      'text-background-padding': '2px',
+      'text-background-shape': 'roundrectangle',
+    },
+  },
+  {
+    selector: 'node[type="trader"]',
+    style: {
+      'background-image': `url(${TraderOtherIcon})`,
+      'text-valign': 'bottom',
+      'text-margin-y': 8,
+    },
+  },
+  {
+    selector: 'node[type="dex"]',
+    style: {
+      'background-image': `url(${DexIcon})`,
+      'text-max-width': '5rem',
+      'text-valign': 'bottom',
+      'text-margin-y': 8,
+    },
+  },
+  {
+    selector: 'node[type="cowProtocol"]',
+    style: {
+      'background-image': `url(${CowProtocolIcon})`,
+      'text-valign': 'bottom',
+      'text-margin-y': 8,
+    },
+  },
+  {
+    selector: 'node[type="networkNode"]',
+    style: {
+      'border-style': 'dashed',
+      'border-opacity': 0.8,
+    },
+  },
+]
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/types.ts b/src/apps/explorer/components/TransanctionBatchGraph/types.ts
new file mode 100644
index 000000000..bd1562806
--- /dev/null
+++ b/src/apps/explorer/components/TransanctionBatchGraph/types.ts
@@ -0,0 +1,15 @@
+import { Account } from 'api/tenderly'
+
+export enum TypeNodeOnTx {
+  NetworkNode = 'networkNode',
+  CowProtocol = 'cowProtocol',
+  Trader = 'trader',
+  Dex = 'dex',
+}
+
+export type NodeType<T extends string, E> = { type: T; entity: E; id: string }
+export type Node =
+  | NodeType<TypeNodeOnTx.NetworkNode, Account>
+  | NodeType<TypeNodeOnTx.CowProtocol, Account>
+  | NodeType<TypeNodeOnTx.Trader, Account>
+  | NodeType<TypeNodeOnTx.Dex, Account>
diff --git a/src/apps/explorer/const.ts b/src/apps/explorer/const.ts
index 68d78c918..606846fe3 100644
--- a/src/apps/explorer/const.ts
+++ b/src/apps/explorer/const.ts
@@ -23,3 +23,6 @@ export const DIMENSION_NAMES = {
 }
 
 export const NETWORK_ID_SEARCH_LIST = [Network.Mainnet, Network.xDAI, Network.Rinkeby]
+
+// Estimation heigh of the header + footer space
+export const HEIGHT_HEADER_FOOTER = 257
diff --git a/src/apps/explorer/layout/Header.tsx b/src/apps/explorer/layout/Header.tsx
index 269404e71..169c28c3a 100644
--- a/src/apps/explorer/layout/Header.tsx
+++ b/src/apps/explorer/layout/Header.tsx
@@ -10,6 +10,7 @@ import { FlexWrap } from 'apps/explorer/pages/styled'
 import { ExternalLink } from 'components/analytics/ExternalLink'
 import { useHistory } from 'react-router'
 import useOnClickOutside from 'hooks/useOnClickOutside'
+import { APP_NAME } from 'const'
 
 export const Header: React.FC = () => {
   const history = useHistory()
@@ -43,7 +44,7 @@ export const Header: React.FC = () => {
           </li>
           <li>
             <ExternalLink target={'_blank'} href={'https://cow.fi'}>
-              CoW Protocol
+              {APP_NAME}
             </ExternalLink>
           </li>
           <li>
diff --git a/src/apps/explorer/pages/UserDetails.tsx b/src/apps/explorer/pages/UserDetails.tsx
index bafccefcd..d2b55a71e 100644
--- a/src/apps/explorer/pages/UserDetails.tsx
+++ b/src/apps/explorer/pages/UserDetails.tsx
@@ -7,7 +7,7 @@ import { BlockExplorerLink } from 'components/common/BlockExplorerLink'
 import RedirectToSearch from 'components/RedirectToSearch'
 import { useResolveEns } from 'hooks/useResolveEns'
 import Spinner from 'components/common/Spinner'
-import { TitleAddress, Wrapper } from 'apps/explorer/pages/styled'
+import { TitleAddress, Wrapper, FlexContainerVar } from 'apps/explorer/pages/styled'
 
 const UserDetails: React.FC = () => {
   const { address } = useParams<{ address: string }>()
@@ -22,8 +22,8 @@ const UserDetails: React.FC = () => {
     <Wrapper>
       {addressAccount ? (
         <>
-          <h1>
-            User details
+          <FlexContainerVar>
+            <h1>User details</h1>
             <TitleAddress
               textToCopy={addressAccount.address}
               contentsToDisplay={
@@ -36,7 +36,7 @@ const UserDetails: React.FC = () => {
                 />
               }
             />
-          </h1>
+          </FlexContainerVar>
           <OrdersTableWidget ownerAddress={addressAccount.address} networkId={networkId} />
         </>
       ) : (
diff --git a/src/apps/explorer/pages/styled.tsx b/src/apps/explorer/pages/styled.tsx
index a859e17cc..5ac986d1b 100644
--- a/src/apps/explorer/pages/styled.tsx
+++ b/src/apps/explorer/pages/styled.tsx
@@ -20,21 +20,51 @@ export const Wrapper = styled.div`
 
   > h1 {
     display: flex;
-    padding: 2.4rem 0 2.35rem;
+    padding: 2.4rem 0;
     align-items: center;
     font-weight: ${({ theme }): string => theme.fontBold};
     margin: 0;
   }
 `
 
+export const StyledTabLoader = styled.span`
+  padding-left: 4px;
+`
+
+export const FlexContainer = styled.div`
+  display: flex;
+  align-items: center;
+  ${media.mobile} {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+`
+
+export const FlexContainerVar = styled.div`
+  display: flex;
+  flex-direction: row;
+  align-items: baseline;
+  margin: 2.4rem 0;
+
+  ${media.mobile} {
+    /* margin: 0 0 0 1.5rem; */
+    span:nth-child(1) {
+      margin: 0 0 0 1.5rem;
+    }
+  }
+`
+
 export const TitleAddress = styled(RowWithCopyButton)`
   font-size: ${({ theme }): string => theme.fontSizeDefault};
   font-weight: ${({ theme }): string => theme.fontNormal};
   margin: 0 0 0 1.5rem;
-  display: flex;
-  align-items: center;
-  ${media.tinyDown} {
+  ${media.mobile} {
     font-size: 1.2rem;
+    margin: 0 0 1.5rem 0;
+  }
+  a {
+    display: flex;
+    align-items: center;
   }
 `
 
@@ -52,6 +82,7 @@ export const StyledLink = styled(Link)`
   display: flex;
   align-items: center;
   justify-content: center;
+  flex: 0 1 auto;
   cursor: pointer;
   color: ${({ theme }): string => theme.white} !important;
 
@@ -62,10 +93,22 @@ export const StyledLink = styled(Link)`
 `
 
 export const Title = styled.h1`
-  margin: 3rem 0 2.95rem;
+  margin: 2.4rem 0;
   font-weight: ${({ theme }): string => theme.fontBold};
 `
 
+export const BVButton = styled.a`
+  color: ${({ theme }): string => theme.orange};
+  font-size: 1.3rem;
+  margin-left: auto;
+  svg {
+    margin: 0 0.75rem 0 0;
+  }
+  ${media.mobile} {
+    margin: -3rem 0 1.5rem auto;
+  }
+`
+
 export const ContentCard = styled.div`
   font-size: 1.6rem;
   border: 0.1rem solid ${({ theme }): string => theme.borderPrimary};
diff --git a/src/assets/img/CoW.svg b/src/assets/img/CoW.svg
new file mode 100644
index 000000000..1df19b7a7
--- /dev/null
+++ b/src/assets/img/CoW.svg
@@ -0,0 +1,16 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M50 25C50 38.8071 38.8071 50 25 50C11.1929 50 0 38.8071 0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25Z" fill="url(#paint0_linear_1933_2570)"/>
+<path d="M42.4086 21.2402L36.6266 20.2943L41.0412 18.4485L42.0383 14.4653L40.8732 12.3971L35.1789 10.733L38.0778 14.8865H38.0754L38.0926 14.9106L35.8322 15.4752L30.2504 11.6426L25.5135 12.2051L20.7765 11.6426L15.1937 15.4756L12.9339 14.911L12.9512 14.8868H12.9488L15.8477 10.7333L10.1534 12.3975L8.98831 14.4656L9.98533 18.4489L14.4003 20.2943L8.62008 21.2402L7.30073 24.7943L11.2657 26.7104L15.0118 25.3899L15.5502 29.3883L18.0118 35.125L19.2108 38.2379L25.0127 42.3105L25.5062 42.6552V42.6621L25.5097 42.6648L25.5148 42.661L25.52 42.6648L25.5235 42.6621V42.6552L26.017 42.3105L31.8175 38.2366L33.0164 35.1237L35.4781 29.387L36.0165 25.3885L39.7626 26.7091L43.7276 24.7929L42.4086 21.2402ZM10.5458 12.8897L14.421 11.7567L12.3183 14.77L9.75411 14.2967L10.5458 12.8897ZM9.69268 14.8768L11.95 15.2963L10.3625 17.5506L9.69268 14.8768ZM14.9587 24.7915L11.3005 26.08L8.0334 24.4996L9.0494 21.7603L14.9604 20.7952L14.9587 24.7915ZM14.9587 19.8969L10.6793 18.1083L12.5719 15.4197L14.9573 16.0153L14.9587 19.8969ZM25.5135 35.7279L24.0371 34.5153L22.1797 29.601H28.8472L26.9898 34.5167L25.5135 35.7279ZM22.0034 29.0171L20.5059 23.8895H30.521L29.0235 29.0175L22.0034 29.0171ZM20.3237 23.3066L19.7716 21.4573L25.5135 13.1723L31.2543 21.4577L30.7022 23.307L20.3237 23.3066ZM15.5423 19.2258V15.9433L20.9259 12.2465L25.0873 12.7411L25.1149 12.7446L25.1028 12.7563L19.2518 21.1523L15.5423 19.2258ZM18.5523 34.9051L16.1176 29.2305L15.574 25.2131L19.9507 24.0684L21.4733 29.2836L20.2412 31.8567L18.5809 34.9782L18.5523 34.9051ZM18.8584 35.6996L20.5915 32.4413L25.0593 36.1102L24.9095 36.2332L19.629 37.6978L18.8584 35.6996ZM25.5135 41.9513L20.1232 38.1652L25.5135 36.6696L30.9037 38.1652L25.5135 41.9513ZM31.3972 37.6978L26.1171 36.2325L25.9673 36.1095L30.435 32.4406L32.1682 35.699L31.3972 37.6978ZM34.908 29.2305L32.4733 34.9044L32.4446 34.9785L30.7843 31.8567L29.5523 29.2836L31.0749 24.0684L35.4515 25.2131L34.908 29.2305ZM35.4847 19.2258L31.7768 21.1523L25.9241 12.7563L25.9121 12.7446L25.9397 12.7411L30.101 12.2465L35.4847 15.9433V19.2258ZM40.6654 17.5496L39.0779 15.2953L41.3353 14.8775L40.6654 17.5496ZM36.6059 11.7588L40.4811 12.8918L41.2728 14.2967L38.7087 14.771L36.6059 11.7588ZM36.0682 16.0195L38.4536 15.4239L40.3462 18.1125L36.0669 19.9011L36.0682 16.0195ZM39.7264 26.0821L36.0682 24.7936V20.7952L41.9792 21.7603L42.9952 24.4996L39.7264 26.0821Z" fill="url(#paint1_linear_1933_2570)"/>
+<defs>
+<linearGradient id="paint0_linear_1933_2570" x1="1.14286" y1="32.5" x2="47.8516" y2="15.6738" gradientUnits="userSpaceOnUse">
+<stop stop-color="#36373D"/>
+<stop offset="0.359375" stop-color="#101015"/>
+<stop offset="1" stop-color="#0E0501"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1933_2570" x1="7.30073" y1="26.6998" x2="43.7262" y2="26.6998" gradientUnits="userSpaceOnUse">
+<stop offset="0.442708" stop-color="white"/>
+<stop offset="0.505208" stop-color="#8D9ACA"/>
+<stop offset="1" stop-color="#FF784A"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/src/assets/img/Dex.svg b/src/assets/img/Dex.svg
new file mode 100644
index 000000000..4b3f5d552
--- /dev/null
+++ b/src/assets/img/Dex.svg
@@ -0,0 +1,10 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25" cy="25" r="25" fill="#41C29B"/>
+<path d="M18.1047 30.4684H15.4863V23.082H18.1264C18.8693 23.082 19.5089 23.2299 20.0451 23.5256C20.5813 23.819 20.9936 24.241 21.2822 24.7916C21.5731 25.3422 21.7186 26.001 21.7186 26.768C21.7186 27.5374 21.5731 28.1986 21.2822 28.7516C20.9936 29.3047 20.5789 29.729 20.0379 30.0248C19.4993 30.3205 18.8549 30.4684 18.1047 30.4684ZM17.048 29.1303H18.0398C18.5015 29.1303 18.8898 29.0486 19.2048 28.8851C19.5221 28.7192 19.7602 28.4631 19.9189 28.1169C20.08 27.7682 20.1605 27.3186 20.1605 26.768C20.1605 26.2222 20.08 25.7762 19.9189 25.4299C19.7602 25.0837 19.5233 24.8288 19.2084 24.6653C18.8934 24.5018 18.5051 24.4201 18.0434 24.4201H17.048V29.1303Z" fill="black"/>
+<path d="M22.8754 30.4684V23.082H27.8525V24.3696H24.4371V26.1296H27.5965V27.4172H24.4371V29.1808H27.867V30.4684H22.8754Z" fill="black"/>
+<path d="M30.5584 23.082L32.0479 25.5995H32.1056L33.6024 23.082H35.366L33.1119 26.7752L35.4165 30.4684H33.6204L32.1056 27.9474H32.0479L30.5332 30.4684H28.7443L31.0561 26.7752L28.7876 23.082H30.5584Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1875 17.1875H12.5L12.5 18.75H17.1875V17.1875ZM12.5 15.625C11.6371 15.625 10.9375 16.3246 10.9375 17.1875V18.75C10.9375 19.6129 11.6371 20.3125 12.5 20.3125H17.1875C18.0504 20.3125 18.75 19.6129 18.75 18.75V17.1875C18.75 16.3246 18.0504 15.625 17.1875 15.625H12.5Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M27.3438 17.1875H22.6562L22.6562 18.75H27.3438V17.1875ZM22.6562 15.625C21.7933 15.625 21.0938 16.3246 21.0938 17.1875V18.75C21.0938 19.6129 21.7933 20.3125 22.6562 20.3125H27.3438C28.2067 20.3125 28.9062 19.6129 28.9062 18.75V17.1875C28.9062 16.3246 28.2067 15.625 27.3438 15.625H22.6562Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M37.5 17.1875H32.8125L32.8125 18.75H37.5V17.1875ZM32.8125 15.625C31.9496 15.625 31.25 16.3246 31.25 17.1875V18.75C31.25 19.6129 31.9496 20.3125 32.8125 20.3125H37.5C38.3629 20.3125 39.0625 19.6129 39.0625 18.75V17.1875C39.0625 16.3246 38.3629 15.625 37.5 15.625H32.8125Z" fill="black"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M40.625 20.3125H9.375V32.8125H40.625V20.3125ZM9.375 18.75C8.51206 18.75 7.8125 19.4496 7.8125 20.3125V32.8125C7.8125 33.6754 8.51206 34.375 9.375 34.375H40.625C41.4879 34.375 42.1875 33.6754 42.1875 32.8125V20.3125C42.1875 19.4496 41.4879 18.75 40.625 18.75H9.375Z" fill="black"/>
+</svg>
diff --git a/src/assets/img/TraderMe.svg b/src/assets/img/TraderMe.svg
new file mode 100644
index 000000000..b36a98759
--- /dev/null
+++ b/src/assets/img/TraderMe.svg
@@ -0,0 +1,5 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25" cy="25" r="25" fill="#D96D49"/>
+<path d="M25 24.7656C28.5156 24.7656 31.3281 21.9531 31.3281 18.4375C31.3281 14.9219 28.5156 12.1094 25 12.1094C21.4844 12.1094 18.6719 14.9219 18.6719 18.4375C18.6719 21.9531 21.4844 24.7656 25 24.7656ZM25 14.4531C27.2266 14.4531 28.9844 16.2109 28.9844 18.4375C28.9844 20.6641 27.2266 22.4219 25 22.4219C22.7734 22.4219 21.0156 20.6641 21.0156 18.4375C21.0156 16.2109 22.7734 14.4531 25 14.4531Z" fill="black"/>
+<path d="M27.5781 26.6406H22.4219C16.6797 26.6406 12.1094 31.3281 12.1094 36.9531C12.1094 37.6563 12.5781 38.125 13.2812 38.125C13.9844 38.125 14.4531 37.6563 14.4531 36.9531C14.4531 32.5 18.0859 28.9844 22.4219 28.9844H27.5781C32.0313 28.9844 35.5469 32.6172 35.5469 36.9531C35.5469 37.6563 36.0156 38.125 36.7188 38.125C37.4219 38.125 37.8906 37.6563 37.8906 36.9531C37.8906 31.3281 33.2031 26.6406 27.5781 26.6406Z" fill="black"/>
+</svg>
diff --git a/src/assets/img/TraderOther.svg b/src/assets/img/TraderOther.svg
new file mode 100644
index 000000000..4345ba7f1
--- /dev/null
+++ b/src/assets/img/TraderOther.svg
@@ -0,0 +1,5 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="25" cy="25" r="25" fill="#B7B7B7"/>
+<path d="M25 24.7656C28.5156 24.7656 31.3281 21.9531 31.3281 18.4375C31.3281 14.9219 28.5156 12.1094 25 12.1094C21.4844 12.1094 18.6719 14.9219 18.6719 18.4375C18.6719 21.9531 21.4844 24.7656 25 24.7656ZM25 14.4531C27.2266 14.4531 28.9844 16.2109 28.9844 18.4375C28.9844 20.6641 27.2266 22.4219 25 22.4219C22.7734 22.4219 21.0156 20.6641 21.0156 18.4375C21.0156 16.2109 22.7734 14.4531 25 14.4531Z" fill="black"/>
+<path d="M27.5781 26.6406H22.4219C16.6797 26.6406 12.1094 31.3281 12.1094 36.9531C12.1094 37.6563 12.5781 38.125 13.2812 38.125C13.9844 38.125 14.4531 37.6563 14.4531 36.9531C14.4531 32.5 18.0859 28.9844 22.4219 28.9844H27.5781C32.0313 28.9844 35.5469 32.6172 35.5469 36.9531C35.5469 37.6563 36.0156 38.125 36.7188 38.125C37.4219 38.125 37.8906 37.6563 37.8906 36.9531C37.8906 31.3281 33.2031 26.6406 27.5781 26.6406Z" fill="black"/>
+</svg>
diff --git a/src/hooks/useTxBatchTrades.tsx b/src/hooks/useTxBatchTrades.tsx
index 94e67b390..2569c4e45 100644
--- a/src/hooks/useTxBatchTrades.tsx
+++ b/src/hooks/useTxBatchTrades.tsx
@@ -21,7 +21,7 @@ export interface Settlement {
   trades: Array<Trade>
 }
 
-type GetTxBatchTradesResult = {
+export type GetTxBatchTradesResult = {
   txSettlement: Settlement
   error: string
   isLoading: boolean
diff --git a/yarn.lock b/yarn.lock
index fd52ed3e3..114cd770e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3800,6 +3800,11 @@
   resolved "https://registry.yarnpkg.com/@types/combine-reducers/-/combine-reducers-1.0.1.tgz#8fb474ac08c211349edf5cbfa58e9f6370bd326a"
   integrity sha512-T7bMnCsLZ0djOJhQf92w4slUTLfHQVKNtyXR8eO6pBy/QYNSzeuxaTYnjcVju+VKqaXV5zNbSnb0qKTIVpk+NA==
 
+"@types/cytoscape@*", "@types/cytoscape@^3.19.4":
+  version "3.19.4"
+  resolved "https://registry.yarnpkg.com/@types/cytoscape/-/cytoscape-3.19.4.tgz#f41214103b80ff3d7d8741bacc32265ed90e45b5"
+  integrity sha512-0IozTg1vdZrA3nuAK5o9Pa8nl2INUnTaXwcGwoiALDcsD8/TiVnp0Zi+R1IiPRG6edoy0Ya61/3osFLtfkhhmw==
+
 "@types/enzyme-adapter-react-16@^1.0.5":
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/@types/enzyme-adapter-react-16/-/enzyme-adapter-react-16-1.0.6.tgz#8aca7ae2fd6c7137d869b6616e696d21bb8b0cec"
@@ -4064,6 +4069,14 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-cytoscapejs@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@types/react-cytoscapejs/-/react-cytoscapejs-1.2.2.tgz#e2d27dc11b2bac61fd3e64efe2004ab65958344f"
+  integrity sha512-Z+CeQLw4XyQOrS/SdbcUCdYfWqYmaPS/WT+gNy33KYR09BtVzekx1jeNU5kNDvXCv8/8jGlhSrSk0uO7ocGuFg==
+  dependencies:
+    "@types/cytoscape" "*"
+    "@types/react" "*"
+
 "@types/react-dom@*", "@types/react-dom@>=16.9.0":
   version "17.0.9"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.9.tgz#441a981da9d7be117042e1a6fd3dac4b30f55add"
@@ -7442,6 +7455,17 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+cytoscape@^3.2.19, cytoscape@^3.21.0:
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.21.0.tgz#8a73f6f0f3a44f948e266ac7df9b2eff65e8bd3c"
+  integrity sha512-xPINMzQNGN4WIog93gYRScT4y/CyZMmqunnhU59/8LynhWwzepJtUydMfvIPuz5TmJ9rSCMdw6rmxhfbb1eofw==
+  dependencies:
+    heap "^0.2.6"
+    lodash.debounce "^4.0.8"
+    lodash.get "^4.4.2"
+    lodash.set "^4.3.2"
+    lodash.topath "^4.5.2"
+
 "d3-array@1 - 2", d3-array@^2.5.0:
   version "2.12.1"
   resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-2.12.1.tgz#e20b41aafcdffdf5d50928004ececf815a465e81"
@@ -10906,6 +10930,11 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+heap@^0.2.6:
+  version "0.2.7"
+  resolved "https://registry.yarnpkg.com/heap/-/heap-0.2.7.tgz#1e6adf711d3f27ce35a81fe3b7bd576c2260a8fc"
+  integrity sha512-2bsegYkkHO+h/9MGbn6KWcE45cHZgPANo5LXF7EvWdT0yT2EguSVO1nDgU5c8+ZOPwp2vMNa7YFsJhVcDR9Sdg==
+
 highlight.js@^10.1.1, highlight.js@^10.1.2, highlight.js@~10.7.0:
   version "10.7.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
@@ -13384,6 +13413,11 @@ lodash.flattendeep@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
   integrity sha1-+wMJF/hqMTTlvJvsDWngAT3f7bI=
 
+lodash.get@^4.4.2:
+  version "4.4.2"
+  resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+  integrity sha1-LRd/ZS+jHpObRDjVNBSZ36OCXpk=
+
 lodash.isarguments@^3.0.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/lodash.isarguments/-/lodash.isarguments-3.1.0.tgz#2f573d85c6a24289ff00663b491c1d338ff3458a"
@@ -13426,11 +13460,21 @@ lodash.merge@^4.6.2:
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
+lodash.set@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.set/-/lodash.set-4.3.2.tgz#d8757b1da807dde24816b0d6a84bea1a76230b23"
+  integrity sha1-2HV7HagH3eJIFrDWqEvqGnYjCyM=
+
 lodash.sortby@^4.7.0:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/lodash.sortby/-/lodash.sortby-4.7.0.tgz#edd14c824e2cc9c1e0b0a1b42bb5210516a42438"
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
+lodash.topath@^4.5.2:
+  version "4.5.2"
+  resolved "https://registry.yarnpkg.com/lodash.topath/-/lodash.topath-4.5.2.tgz#3616351f3bba61994a0931989660bd03254fd009"
+  integrity sha1-NhY1Hzu6YZlKCTGYlmC9AyVP0Ak=
+
 lodash.truncate@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/lodash.truncate/-/lodash.truncate-4.4.2.tgz#5a350da0b1113b837ecfffd5812cbe58d6eae193"
@@ -16257,6 +16301,14 @@ react-copy-to-clipboard@^5.0.2:
     copy-to-clipboard "^3"
     prop-types "^15.5.8"
 
+react-cytoscapejs@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/react-cytoscapejs/-/react-cytoscapejs-1.2.1.tgz#ccce46acabf4f0c41dce9070743854f92b0dc050"
+  integrity sha512-8exVCetpzyGCAKuRjXPWGjFCnb22boZ3SXUPpPB/+wQI8Q8BwkT1URN3A7J1Czvj1qAbShh5QQ514mBUp7i7kw==
+  dependencies:
+    cytoscape "^3.2.19"
+    prop-types "^15.6.2"
+
 react-dev-utils@^11.0.3, react-dev-utils@^11.0.4:
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-11.0.4.tgz#a7ccb60257a1ca2e0efe7a83e38e6700d17aa37a"

From 82e610743cf30029b7e6382ac44b9ca710a915e0 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Fri, 18 Mar 2022 09:56:49 -0300
Subject: [PATCH 02/31] Show Trader address

---
 .../components/TransanctionBatchGraph/index.tsx  | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 69a8b17bb..89da17728 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -13,6 +13,7 @@ import { TypeNodeOnTx } from './types'
 import { APP_NAME } from 'const'
 import { HEIGHT_HEADER_FOOTER } from 'apps/explorer/const'
 import { STYLESHEET } from './styled'
+import { abbreviateString } from 'utils'
 
 const HEIGHT_SIZE = window.innerHeight - HEIGHT_HEADER_FOOTER
 const PROTOCOL_NAME = APP_NAME
@@ -23,17 +24,24 @@ const WrapperCytoscape = styled(CytoscapeComponent)`
   border-radius: 0.4rem;
 `
 
-function getTypeNode(element: Account): TypeNodeOnTx {
+function getTypeNode(account: Account): TypeNodeOnTx {
   let type = TypeNodeOnTx.Dex
-  if (element.alias === ALIAS_TRADER_NAME) {
+  if (account.alias === ALIAS_TRADER_NAME) {
     type = TypeNodeOnTx.Trader
-  } else if (element.alias === PROTOCOL_NAME) {
+  } else if (account.alias === PROTOCOL_NAME) {
     type = TypeNodeOnTx.CowProtocol
   }
 
   return type
 }
 
+function showTraderAddress(account: Account, address: string): Account {
+  if (account.alias === ALIAS_TRADER_NAME) {
+    account.alias = abbreviateString(address, 4, 4)
+  }
+  return account
+}
+
 function getNetworkParentNode(account: Account, networkName: string): string | undefined {
   return account.alias !== ALIAS_TRADER_NAME ? networkName : undefined
 }
@@ -57,7 +65,7 @@ function getNodes(txSettlement: TxSettlement, networkId: Network): ElementDefini
         {
           id: key,
           type: getTypeNode(account),
-          entity: account,
+          entity: showTraderAddress(account, key),
         },
         parentNodeName,
       )

From d260f14015cbff82e654cf02ad6251076e04d411 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Fri, 18 Mar 2022 16:25:24 -0300
Subject: [PATCH 03/31] label styles

---
 src/apps/explorer/components/TransanctionBatchGraph/styled.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
index 41b40c252..e2ee0f8d2 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
+++ b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
@@ -26,12 +26,11 @@ export const STYLESHEET: Stylesheet[] = [
       color: 'black',
       'line-color': '#747a9e',
       'line-opacity': 0.8,
-      'text-margin-y': 10,
-
       'text-background-color': 'white',
       'text-background-opacity': 1,
       'text-background-padding': '2px',
       'text-background-shape': 'roundrectangle',
+      'font-size': '11px',
     },
   },
   {

From 01d0681421a75705eeeac67902ceb73a8783fadc Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Mon, 21 Mar 2022 12:35:10 -0300
Subject: [PATCH 04/31] Adding custom position layout

---
 .../TransactionsTableWidget/index.tsx         |  2 -
 .../elementsBuilder.tsx                       | 96 ++++++++++++++-----
 .../TransanctionBatchGraph/index.tsx          | 24 ++---
 3 files changed, 79 insertions(+), 43 deletions(-)

diff --git a/src/apps/explorer/components/TransactionsTableWidget/index.tsx b/src/apps/explorer/components/TransactionsTableWidget/index.tsx
index 65272c90c..edf1bcfc4 100644
--- a/src/apps/explorer/components/TransactionsTableWidget/index.tsx
+++ b/src/apps/explorer/components/TransactionsTableWidget/index.tsx
@@ -45,9 +45,7 @@ export const TransactionsTableWidget: React.FC<Props> = ({ txHash }) => {
   const txHashParams = { networkId, txHash }
   const isZeroOrders = !!(orders && orders.length === 0)
   const notGpv2ExplorerData = useTxOrderExplorerLink(txHash, isZeroOrders)
-  // TODO use on draw tx view
   const txBatchTrades = useTxBatchTrades(networkId, txHash, orders && orders.length)
-  console.log('txBatchTrades', txBatchTrades)
 
   // Avoid redirecting until another network is searched again
   useEffect(() => {
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx b/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
index 3dc2bcb29..cd63afa17 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
@@ -53,26 +53,33 @@ export default class ElementsBuilder {
     return this
   }
 
-  build(): ElementDefinition[] {
+  build(customLayoutNodes?: CustomLayoutNodes): ElementDefinition[] {
+    if (!customLayoutNodes) {
+      return this._buildCoseLayout()
+    } else {
+      const { center, nodes } = customLayoutNodes
+      return [center, ...nodes, ...this._edges]
+    }
+  }
+
+  _buildCoseLayout(): ElementDefinition[] {
     if (!this._center) {
       throw new Error('Center node is required')
     }
-
-    const thirdOfTotalRows = Math.max(...this._countTypes.values()) / 3
     const center = {
       ...this._center,
-      position: { x: 100, y: 0 },
+      position: { x: 0, y: 0 },
     }
-    center['data']['rowValue'] = Math.floor(thirdOfTotalRows)
+    const nTypes = this._countTypes.size
 
-    const r = this._SIZE / 2 - 100
+    const r = this._SIZE / nTypes - 100 // get radio
 
-    const nodes = this._nodes.map((node, index) => {
+    const nodes = this._nodes.map((node: ElementDefinition, index: number) => {
       return {
         ...node,
         position: {
-          x: r * Math.cos((2 * Math.PI * index) / this._nodes.length),
-          y: r * Math.sin((2 * Math.PI * index) / this._nodes.length),
+          x: r * Math.cos((nTypes * Math.PI * index) / this._nodes.length),
+          y: r * Math.sin((nTypes * Math.PI * index) / this._nodes.length),
         },
       }
     })
@@ -81,7 +88,7 @@ export default class ElementsBuilder {
   }
 
   getById(id: string): ElementDefinition | undefined {
-    // split type:id and find by id
+    // split <type>:<id> and find by <id>
     if (this._center) {
       return [this._center, ...this._nodes].find((node) => node.data.id?.split(':')[1] === id)
     }
@@ -90,27 +97,66 @@ export default class ElementsBuilder {
   }
 }
 
-const columnTypeMap = new Map<TypeNodeOnTx, number>([
-  [TypeNodeOnTx.Trader, 0],
-  [TypeNodeOnTx.CowProtocol, 1],
-  [TypeNodeOnTx.Dex, 2],
-])
-
-interface GridPosition {
-  x: number
-  y: number
+interface CustomLayoutNodes {
+  center: ElementDefinition
+  nodes: ElementDefinition[]
 }
-export function getGridPosition(type: TypeNodeOnTx, index: number): undefined | GridPosition {
-  if (!columnTypeMap.has(type)) return
 
+export function getGridPosition(type: TypeNodeOnTx): number {
   let col
-  const row = index
   if (type === TypeNodeOnTx.Trader) {
     col = 0
   } else if (type === TypeNodeOnTx.CowProtocol) {
-    col = 1
+    col = 4
   } else {
-    col = 2
+    col = 8
+  }
+  return col
+}
+
+export function buildGridLayout(
+  countTypes: Map<TypeNodeOnTx, number>,
+  center: ElementDefinition | null,
+  nodes: ElementDefinition[],
+): { center: ElementDefinition; nodes: ElementDefinition[] } {
+  if (!center) {
+    throw new Error('Center node is required')
+  }
+  const maxRows = Math.max(...countTypes.values())
+  const middleOfTotalRows = Math.floor(maxRows / 2)
+  const _center = {
+    ...center,
+    position: { y: middleOfTotalRows, x: getGridPosition(center.data.type) },
   }
-  return { y: row, x: col }
+
+  const traders = countTypes.get(TypeNodeOnTx.Trader) || 0
+  const dexes = countTypes.get(TypeNodeOnTx.Dex) || 0
+  let counterRows = { [TypeNodeOnTx.Trader]: 0, [TypeNodeOnTx.Dex]: 0 }
+  if (traders > dexes) {
+    const difference = (traders - dexes) / 2
+    counterRows[TypeNodeOnTx.Dex] = Math.floor(difference)
+  } else if (traders < dexes) {
+    const difference = (dexes - traders) / 2
+    counterRows[TypeNodeOnTx.Trader] = Math.floor(difference)
+  }
+
+  const _nodes = nodes.map((node) => {
+    const _node = {
+      ...node,
+      position: {
+        y: counterRows[node.data.type],
+        x: getGridPosition(node.data.type),
+      },
+    }
+
+    if (node.data.type === TypeNodeOnTx.Trader) {
+      counterRows = { ...counterRows, [TypeNodeOnTx.Trader]: counterRows[TypeNodeOnTx.Trader] + 1 }
+    } else if (node.data.type === TypeNodeOnTx.Dex) {
+      counterRows = { ...counterRows, [TypeNodeOnTx.Dex]: counterRows[TypeNodeOnTx.Dex] + 1 }
+    }
+
+    return _node
+  })
+
+  return { center: _center, nodes: _nodes }
 }
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 89da17728..1a91bc57b 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -8,7 +8,7 @@ import { GetTxBatchTradesResult as TxBatchData, Settlement as TxSettlement } fro
 import { networkOptions } from 'components/NetworkSelector'
 import { Network } from 'types'
 import { Account, ALIAS_TRADER_NAME } from 'api/tenderly'
-import ElementsBuilder from 'apps/explorer/components/TransanctionBatchGraph/elementsBuilder'
+import ElementsBuilder, { buildGridLayout } from 'apps/explorer/components/TransanctionBatchGraph/elementsBuilder'
 import { TypeNodeOnTx } from './types'
 import { APP_NAME } from 'const'
 import { HEIGHT_HEADER_FOOTER } from 'apps/explorer/const'
@@ -84,7 +84,9 @@ function getNodes(txSettlement: TxSettlement, networkId: Network): ElementDefini
     )
   })
 
-  return builder.build()
+  return builder.build(
+    buildGridLayout(builder._countTypes as Map<TypeNodeOnTx, number>, builder._center, builder._nodes),
+  )
 }
 
 interface GraphBatchTxParams {
@@ -115,23 +117,13 @@ function TransanctionBatchGraph({
 
   const layout = {
     name: 'grid',
-    position: function (node: NodeSingular): { row: undefined | number; col: number } {
-      let col
-      let row = undefined
-      if (node.data('type') === TypeNodeOnTx.Trader) {
-        col = 0
-      } else if (node.data('type') === TypeNodeOnTx.CowProtocol) {
-        col = 1
-        row = node.data('rowValue')
-      } else {
-        col = 2
-      }
-      return { row, col }
+    position: function (node: NodeSingular): { row: number; col: number } {
+      return { row: node.position('y'), col: node.position('x') }
     },
     fit: true, // whether to fit the viewport to the graph
-    padding: 20, // padding used on fit
+    padding: 10, // padding used on fit
     avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
-    avoidOverlapPadding: 10, // extra spacing around nodes when avoidOverlap: true
+    avoidOverlapPadding: 100, // extra spacing around nodes when avoidOverlap: true
     nodeDimensionsIncludeLabels: false,
   }
 

From 581327544114391b6a448375a583aea7fa2e2679 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Mon, 21 Mar 2022 15:00:19 -0300
Subject: [PATCH 05/31] Adapt grid by batch of rows

---
 .../elementsBuilder.tsx                       | 22 ++++++++++++-------
 1 file changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx b/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
index cd63afa17..7e3bce229 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
@@ -102,14 +102,19 @@ interface CustomLayoutNodes {
   nodes: ElementDefinition[]
 }
 
-export function getGridPosition(type: TypeNodeOnTx): number {
+export function getGridPosition(type: TypeNodeOnTx, traderRowsLength: number, dexRowsLenght: number): number {
   let col
+  const batchOf = 5
+  // Add a column for each batch of n
+  const leftPaddingCol = 1 + Math.round(traderRowsLength / batchOf)
+  const rightPaddingCol = leftPaddingCol + 1 + Math.round(dexRowsLenght / batchOf)
+
   if (type === TypeNodeOnTx.Trader) {
-    col = 0
+    col = 0 // first Column
   } else if (type === TypeNodeOnTx.CowProtocol) {
-    col = 4
+    col = leftPaddingCol
   } else {
-    col = 8
+    col = rightPaddingCol
   }
   return col
 }
@@ -122,15 +127,16 @@ export function buildGridLayout(
   if (!center) {
     throw new Error('Center node is required')
   }
+
   const maxRows = Math.max(...countTypes.values())
   const middleOfTotalRows = Math.floor(maxRows / 2)
+  const traders = countTypes.get(TypeNodeOnTx.Trader) || 0
+  const dexes = countTypes.get(TypeNodeOnTx.Dex) || 0
   const _center = {
     ...center,
-    position: { y: middleOfTotalRows, x: getGridPosition(center.data.type) },
+    position: { y: middleOfTotalRows, x: getGridPosition(center.data.type, traders, dexes) },
   }
 
-  const traders = countTypes.get(TypeNodeOnTx.Trader) || 0
-  const dexes = countTypes.get(TypeNodeOnTx.Dex) || 0
   let counterRows = { [TypeNodeOnTx.Trader]: 0, [TypeNodeOnTx.Dex]: 0 }
   if (traders > dexes) {
     const difference = (traders - dexes) / 2
@@ -145,7 +151,7 @@ export function buildGridLayout(
       ...node,
       position: {
         y: counterRows[node.data.type],
-        x: getGridPosition(node.data.type),
+        x: getGridPosition(node.data.type, traders, dexes),
       },
     }
 

From f19e086b5fbe60d6b23a1c6ecca1791fdfe563f8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Mon, 21 Mar 2022 20:25:11 -0300
Subject: [PATCH 06/31] add basic tooltip

---
 package.json                                  |  1 +
 .../TransanctionBatchGraph/index.tsx          | 26 +++++++++++++++++++
 src/env.d.ts                                  |  1 +
 yarn.lock                                     | 12 +++++++++
 4 files changed, 40 insertions(+)
 create mode 100644 src/env.d.ts

diff --git a/package.json b/package.json
index f2c28d67e..71cb941db 100644
--- a/package.json
+++ b/package.json
@@ -76,6 +76,7 @@
     "bn.js": "^4.11.9",
     "combine-reducers": "^1.0.0",
     "cytoscape": "^3.21.0",
+    "cytoscape-popper": "^2.0.0",
     "date-fns": "^2.9.0",
     "detect-browser": "^5.1.0",
     "eth-json-rpc-middleware": "^4.4.1",
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 1a91bc57b..d8bd0913f 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -1,4 +1,5 @@
 import Cytoscape, { ElementDefinition, NodeSingular } from 'cytoscape'
+import popper from 'cytoscape-popper'
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import CytoscapeComponent from 'react-cytoscapejs'
 import styled from 'styled-components'
@@ -15,6 +16,7 @@ import { HEIGHT_HEADER_FOOTER } from 'apps/explorer/const'
 import { STYLESHEET } from './styled'
 import { abbreviateString } from 'utils'
 
+Cytoscape.use(popper)
 const HEIGHT_SIZE = window.innerHeight - HEIGHT_HEADER_FOOTER
 const PROTOCOL_NAME = APP_NAME
 const WrapperCytoscape = styled(CytoscapeComponent)`
@@ -111,6 +113,30 @@ function TransanctionBatchGraph({
     if (error || isLoading || !networkId) return
 
     setElements(getNodes(txSettlement, networkId))
+    const cy = cytoscapeRef.current
+    if (cy) {
+      cy.on('click', 'node', (_event): void => {
+        const node = _event.target
+        const popper = node.popper({
+          content: () => {
+            const div = document.createElement('div')
+            div.innerHTML = 'Popper Node tooltip'
+            document.body.appendChild(div)
+            return div
+          },
+          popper: {
+            placement: 'top',
+          }, // my popper options here
+        })
+        const update = (): void => {
+          popper.update()
+        }
+
+        node.on('position', update)
+
+        cy.on('pan zoom resize', update)
+      })
+    }
   }, [error, isLoading, networkId, txSettlement])
 
   if (isLoading) return <Spinner spin size="3x" />
diff --git a/src/env.d.ts b/src/env.d.ts
new file mode 100644
index 000000000..6cc91a2c0
--- /dev/null
+++ b/src/env.d.ts
@@ -0,0 +1 @@
+declare module 'cytoscape-popper'
diff --git a/yarn.lock b/yarn.lock
index 114cd770e..ad8815150 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2696,6 +2696,11 @@
     schema-utils "^2.6.5"
     source-map "^0.7.3"
 
+"@popperjs/core@^2.0.0":
+  version "2.11.4"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.4.tgz#d8c7b8db9226d2d7664553a0741ad7d0397ee503"
+  integrity sha512-q/ytXxO5NKvyT37pmisQAItCFqA7FD/vNb8dgaJy3/630Fsc+Mz9/9f2SziBoIZ30TJooXyTwZmhi1zjXmObYg==
+
 "@popperjs/core@^2.0.6", "@popperjs/core@^2.5.4", "@popperjs/core@^2.6.0":
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7"
@@ -7455,6 +7460,13 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+cytoscape-popper@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/cytoscape-popper/-/cytoscape-popper-2.0.0.tgz#d93917695a9b8af3dbda1d8ee433618ac4d4e359"
+  integrity sha512-b7WSOn8qXHWtdIXFNmrgc8qkaOs16tMY0EwtRXlxzvn8X+al6TAFrUwZoYATkYSlotfd/36ZMoeKMEoUck6feA==
+  dependencies:
+    "@popperjs/core" "^2.0.0"
+
 cytoscape@^3.2.19, cytoscape@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/cytoscape/-/cytoscape-3.21.0.tgz#8a73f6f0f3a44f948e266ac7df9b2eff65e8bd3c"

From 12dfa6e131342db2759fb0ba5d1d0ae360f72e67 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Tue, 22 Mar 2022 00:05:36 -0300
Subject: [PATCH 07/31] Adding a tooltip

---
 .../TransanctionBatchGraph/index.tsx          | 89 ++++++++++++++-----
 1 file changed, 67 insertions(+), 22 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index d8bd0913f..86b0b4206 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -1,4 +1,4 @@
-import Cytoscape, { ElementDefinition, NodeSingular } from 'cytoscape'
+import Cytoscape, { ElementDefinition, NodeSingular, NodeDataDefinition, EdgeDataDefinition } from 'cytoscape'
 import popper from 'cytoscape-popper'
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import CytoscapeComponent from 'react-cytoscapejs'
@@ -113,31 +113,75 @@ function TransanctionBatchGraph({
     if (error || isLoading || !networkId) return
 
     setElements(getNodes(txSettlement, networkId))
+  }, [error, isLoading, networkId, txSettlement])
+
+  useEffect(() => {
     const cy = cytoscapeRef.current
-    if (cy) {
-      cy.on('click', 'node', (_event): void => {
-        const node = _event.target
-        const popper = node.popper({
-          content: () => {
-            const div = document.createElement('div')
-            div.innerHTML = 'Popper Node tooltip'
-            document.body.appendChild(div)
-            return div
-          },
-          popper: {
-            placement: 'top',
-          }, // my popper options here
-        })
-        const update = (): void => {
-          popper.update()
-        }
+    if (!cy) return
+
+    cy.on('mouseover', 'node, edge', (event): void => {
+      const target = event.target
+      const targetData: NodeDataDefinition | EdgeDataDefinition = target.data()
+      if (targetData.type === TypeNodeOnTx.NetworkNode) return
+
+      const tooltipId = `popper-target-${targetData.id}`
+      const existingTarget = document.getElementById(tooltipId)
+
+      if (existingTarget) {
+        existingTarget.remove()
+      }
+      const popperRef = target.popper({
+        content: () => {
+          const tooltip = document.createElement('span')
+          tooltip.id = tooltipId
+          tooltip.classList.add('target-popper')
+
+          const table = document.createElement('table')
+          tooltip.append(table)
+
+          // loop through target data
+          for (const prop in targetData) {
+            const targetValue = targetData[prop]
+            // no recursive or reduce support
+            if (typeof targetValue === 'object') continue
+
+            const tr = table.insertRow()
 
-        node.on('position', update)
+            const tdTitle = tr.insertCell()
+            const tdValue = tr.insertCell()
 
-        cy.on('pan zoom resize', update)
+            tdTitle.innerText = prop
+            tdValue.innerText = targetValue
+          }
+
+          document.body.appendChild(tooltip)
+
+          return tooltip
+        },
+        popper: {
+          placement: 'top-start',
+          removeOnDestroy: true,
+        },
       })
-    }
-  }, [error, isLoading, networkId, txSettlement])
+
+      const popperUpdate = (): (() => void) => popperRef.update()
+
+      target.on('position', () => popperUpdate)
+      target.cy().on('pan zoom resize', () => popperUpdate)
+      const newTarget = document.getElementById(tooltipId)
+      target
+        .on('mouseover', () => {
+          if (newTarget) {
+            newTarget.classList.add('active')
+          }
+        })
+        .on('mouseout', () => {
+          if (newTarget) {
+            newTarget.remove()
+          }
+        })
+    })
+  }, [cytoscapeRef])
 
   if (isLoading) return <Spinner spin size="3x" />
 
@@ -161,6 +205,7 @@ function TransanctionBatchGraph({
       stylesheet={STYLESHEET}
       cy={setCytoscape}
       wheelSensitivity={0.2}
+      className="tx-graph"
     />
   )
 }

From 8da94f037683d0aff92ff17f261acb19022e133b Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Tue, 22 Mar 2022 00:21:38 -0300
Subject: [PATCH 08/31] listed tap by mobile on tooltip

---
 .../explorer/components/TransanctionBatchGraph/index.tsx  | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 86b0b4206..eac474ad7 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -119,7 +119,7 @@ function TransanctionBatchGraph({
     const cy = cytoscapeRef.current
     if (!cy) return
 
-    cy.on('mouseover', 'node, edge', (event): void => {
+    cy.on('click tapstart', 'node, edge', (event): void => {
       const target = event.target
       const targetData: NodeDataDefinition | EdgeDataDefinition = target.data()
       if (targetData.type === TypeNodeOnTx.NetworkNode) return
@@ -170,12 +170,12 @@ function TransanctionBatchGraph({
       target.cy().on('pan zoom resize', () => popperUpdate)
       const newTarget = document.getElementById(tooltipId)
       target
-        .on('mouseover', () => {
+        .on('click tapstart', () => {
           if (newTarget) {
             newTarget.classList.add('active')
           }
         })
-        .on('mouseout', () => {
+        .on('mouseout tapend', () => {
           if (newTarget) {
             newTarget.remove()
           }
@@ -193,7 +193,7 @@ function TransanctionBatchGraph({
     fit: true, // whether to fit the viewport to the graph
     padding: 10, // padding used on fit
     avoidOverlap: true, // prevents node overlap, may overflow boundingBox if not enough space
-    avoidOverlapPadding: 100, // extra spacing around nodes when avoidOverlap: true
+    avoidOverlapPadding: 10, // extra spacing around nodes when avoidOverlap: true
     nodeDimensionsIncludeLabels: false,
   }
 

From 4b7a23d28d2a54fd6ad70773b5c189bfe4491dfd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 22 Mar 2022 14:35:22 -0300
Subject: [PATCH 09/31] add tooltip css

---
 .../TransanctionBatchGraph/batchviewer.css    | 29 +++++++++++++++++++
 .../TransanctionBatchGraph/index.tsx          |  1 +
 2 files changed, 30 insertions(+)
 create mode 100644 src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css b/src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css
new file mode 100644
index 000000000..0485a92bd
--- /dev/null
+++ b/src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css
@@ -0,0 +1,29 @@
+.target-popper {
+    max-width: 50rem;
+    padding: 1rem;
+    margin: 0 0 1rem 0;
+    text-align: left;
+    font-size: 1.2rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgb(25, 24, 29);
+    background: rgb(60, 62, 78);
+    line-height: 1.4rem; 
+    word-break: break-all;  
+}
+
+/* arrow tooltip
+.target-popper:after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 0rem;
+    border-width: 6px;
+    border-style: solid;
+    border-color: rgb(60, 62, 78) transparent transparent transparent;
+} */
+
+.target-popper tr > td:first-child {
+    font-weight: bold;
+    text-transform: uppercase;
+    width: 6rem;
+}
\ No newline at end of file
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index eac474ad7..9ffb61103 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -15,6 +15,7 @@ import { APP_NAME } from 'const'
 import { HEIGHT_HEADER_FOOTER } from 'apps/explorer/const'
 import { STYLESHEET } from './styled'
 import { abbreviateString } from 'utils'
+import './batchviewer.css'
 
 Cytoscape.use(popper)
 const HEIGHT_SIZE = window.innerHeight - HEIGHT_HEADER_FOOTER

From 09e1b6178c120110cf07e9ef7b05dca5c9af5227 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 22 Mar 2022 14:42:56 -0300
Subject: [PATCH 10/31] add eof space

---
 .../explorer/components/TransanctionBatchGraph/batchviewer.css  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css b/src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css
index 0485a92bd..911eab7b9 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css
+++ b/src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css
@@ -26,4 +26,4 @@
     font-weight: bold;
     text-transform: uppercase;
     width: 6rem;
-}
\ No newline at end of file
+}

From fa90634185beaf528c8c3004affe4219642368c1 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Wed, 23 Mar 2022 00:09:14 -0300
Subject: [PATCH 11/31] Adding amount of transfers

---
 .../elementsBuilder.tsx                       |  10 +-
 .../TransanctionBatchGraph/index.tsx          | 154 ++++++++++--------
 .../TransanctionBatchGraph/styled.ts          |   6 +
 .../TransanctionBatchGraph/types.ts           |   2 +
 4 files changed, 105 insertions(+), 67 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx b/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
index 7e3bce229..ef60f7d06 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
@@ -1,5 +1,5 @@
 import { ElementDefinition } from 'cytoscape'
-import { Node, TypeNodeOnTx } from './types'
+import { InfoTooltip, Node, TypeNodeOnTx } from './types'
 
 export default class ElementsBuilder {
   _center: ElementDefinition | null = null
@@ -40,7 +40,12 @@ export default class ElementsBuilder {
     return this
   }
 
-  edge(source: Pick<Node, 'type' | 'id'>, target: Pick<Node, 'type' | 'id'>, label: string): this {
+  edge(
+    source: Pick<Node, 'type' | 'id'>,
+    target: Pick<Node, 'type' | 'id'>,
+    label: string,
+    tooltip?: InfoTooltip,
+  ): this {
     this._edges.push({
       group: 'edges',
       data: {
@@ -48,6 +53,7 @@ export default class ElementsBuilder {
         source: `${source.type}:${source.id}`,
         target: `${target.type}:${target.id}`,
         label,
+        tooltip,
       },
     })
     return this
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 9ffb61103..6f36c0277 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -1,4 +1,10 @@
-import Cytoscape, { ElementDefinition, NodeSingular, NodeDataDefinition, EdgeDataDefinition } from 'cytoscape'
+import Cytoscape, {
+  ElementDefinition,
+  NodeSingular,
+  NodeDataDefinition,
+  EdgeDataDefinition,
+  EventObject,
+} from 'cytoscape'
 import popper from 'cytoscape-popper'
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import CytoscapeComponent from 'react-cytoscapejs'
@@ -16,6 +22,7 @@ import { HEIGHT_HEADER_FOOTER } from 'apps/explorer/const'
 import { STYLESHEET } from './styled'
 import { abbreviateString } from 'utils'
 import './batchviewer.css'
+import BigNumber from 'bignumber.js'
 
 Cytoscape.use(popper)
 const HEIGHT_SIZE = window.innerHeight - HEIGHT_HEADER_FOOTER
@@ -39,10 +46,9 @@ function getTypeNode(account: Account): TypeNodeOnTx {
 }
 
 function showTraderAddress(account: Account, address: string): Account {
-  if (account.alias === ALIAS_TRADER_NAME) {
-    account.alias = abbreviateString(address, 4, 4)
-  }
-  return account
+  const alias = account.alias === ALIAS_TRADER_NAME ? abbreviateString(address, 4, 4) : account.alias
+
+  return { ...account, alias }
 }
 
 function getNetworkParentNode(account: Account, networkName: string): string | undefined {
@@ -76,14 +82,19 @@ function getNodes(txSettlement: TxSettlement, networkId: Network): ElementDefini
   }
 
   txSettlement.transfers.forEach((transfer) => {
-    const token = txSettlement.tokens[transfer.token] || { decimals: 1, symbol: 'UNKNOW' }
+    const token = txSettlement.tokens[transfer.token]
+    const tokenSymbol = token?.symbol || 'UNKNOW'
+    const tokenAmount = token?.decimals
+      ? new BigNumber(transfer.value).div(new BigNumber(10).pow(token.decimals)).toFixed(2)
+      : '-'
 
     const source = builder.getById(transfer.from)
     const target = builder.getById(transfer.to)
     builder.edge(
       { type: source?.data.type, id: transfer.from },
       { type: target?.data.type, id: transfer.to },
-      `${token.symbol}`,
+      `${tokenSymbol}`,
+      { from: transfer.from, to: transfer.to, amount: `${tokenAmount} ${tokenSymbol}` },
     )
   })
 
@@ -92,6 +103,69 @@ function getNodes(txSettlement: TxSettlement, networkId: Network): ElementDefini
   )
 }
 
+function bindPopper(event: EventObject, targetData: Cytoscape.NodeDataDefinition | Cytoscape.EdgeDataDefinition): void {
+  const tooltipId = `popper-target-${targetData.id}`
+  const existingTarget = document.getElementById(tooltipId)
+
+  // Remove if already existing
+  if (existingTarget) {
+    existingTarget.remove()
+  }
+
+  const target = event.target
+  const popperRef = target.popper({
+    content: () => {
+      const tooltip = document.createElement('span')
+      tooltip.id = tooltipId
+      tooltip.classList.add('target-popper')
+
+      const table = document.createElement('table')
+      tooltip.append(table)
+
+      // loop through target data [tooltip]
+      for (const prop in targetData.tooltip) {
+        const targetValue = targetData.tooltip[prop]
+
+        // no recursive or reduce support
+        if (typeof targetValue === 'object') continue
+
+        const tr = table.insertRow()
+
+        const tdTitle = tr.insertCell()
+        const tdValue = tr.insertCell()
+
+        tdTitle.innerText = prop
+        tdValue.innerText = targetValue
+      }
+
+      document.body.appendChild(tooltip)
+
+      return tooltip
+    },
+    popper: {
+      placement: 'top-start',
+      removeOnDestroy: true,
+    },
+  })
+
+  const popperUpdate = (): (() => void) => popperRef.update()
+
+  target.on('position', () => popperUpdate)
+  target.cy().on('pan zoom resize', () => popperUpdate)
+  const newTarget = document.getElementById(tooltipId)
+  target
+    .on('click tapstart', () => {
+      if (newTarget) {
+        newTarget.classList.add('active')
+      }
+    })
+    .on('mouseout tapend', () => {
+      if (newTarget) {
+        newTarget.remove()
+      }
+    })
+}
+
 interface GraphBatchTxParams {
   txBatchData: TxBatchData
   networkId: Network | undefined
@@ -120,67 +194,17 @@ function TransanctionBatchGraph({
     const cy = cytoscapeRef.current
     if (!cy) return
 
-    cy.on('click tapstart', 'node, edge', (event): void => {
+    cy.on('click tapstart', 'edge', (event): void => {
       const target = event.target
       const targetData: NodeDataDefinition | EdgeDataDefinition = target.data()
-      if (targetData.type === TypeNodeOnTx.NetworkNode) return
-
-      const tooltipId = `popper-target-${targetData.id}`
-      const existingTarget = document.getElementById(tooltipId)
-
-      if (existingTarget) {
-        existingTarget.remove()
-      }
-      const popperRef = target.popper({
-        content: () => {
-          const tooltip = document.createElement('span')
-          tooltip.id = tooltipId
-          tooltip.classList.add('target-popper')
-
-          const table = document.createElement('table')
-          tooltip.append(table)
 
-          // loop through target data
-          for (const prop in targetData) {
-            const targetValue = targetData[prop]
-            // no recursive or reduce support
-            if (typeof targetValue === 'object') continue
-
-            const tr = table.insertRow()
-
-            const tdTitle = tr.insertCell()
-            const tdValue = tr.insertCell()
-
-            tdTitle.innerText = prop
-            tdValue.innerText = targetValue
-          }
-
-          document.body.appendChild(tooltip)
-
-          return tooltip
-        },
-        popper: {
-          placement: 'top-start',
-          removeOnDestroy: true,
-        },
-      })
-
-      const popperUpdate = (): (() => void) => popperRef.update()
-
-      target.on('position', () => popperUpdate)
-      target.cy().on('pan zoom resize', () => popperUpdate)
-      const newTarget = document.getElementById(tooltipId)
-      target
-        .on('click tapstart', () => {
-          if (newTarget) {
-            newTarget.classList.add('active')
-          }
-        })
-        .on('mouseout tapend', () => {
-          if (newTarget) {
-            newTarget.remove()
-          }
-        })
+      bindPopper(event, targetData)
+    })
+    cy.on('mouseover', 'edge', (event): void => {
+      event.target.addClass('hover')
+    })
+    cy.on('mouseout', 'edge', (event): void => {
+      event.target.removeClass('hover')
     })
   }, [cytoscapeRef])
 
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
index e2ee0f8d2..e90e2232e 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
+++ b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
@@ -33,6 +33,12 @@ export const STYLESHEET: Stylesheet[] = [
       'font-size': '11px',
     },
   },
+  {
+    selector: 'edge.hover',
+    style: {
+      width: 5,
+    },
+  },
   {
     selector: 'node[type="trader"]',
     style: {
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/types.ts b/src/apps/explorer/components/TransanctionBatchGraph/types.ts
index bd1562806..aab4c5e0c 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/types.ts
+++ b/src/apps/explorer/components/TransanctionBatchGraph/types.ts
@@ -7,6 +7,8 @@ export enum TypeNodeOnTx {
   Dex = 'dex',
 }
 
+export type InfoTooltip = Record<string, string>
+
 export type NodeType<T extends string, E> = { type: T; entity: E; id: string }
 export type Node =
   | NodeType<TypeNodeOnTx.NetworkNode, Account>

From ac3c703a5245f612b40d2df78d7450cab14938ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 23 Mar 2022 09:14:09 -0300
Subject: [PATCH 12/31] css test deploy

---
 .../explorer/components/TransanctionBatchGraph/batchviewer.css  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css b/src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css
index 911eab7b9..21acfcc01 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css
+++ b/src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css
@@ -5,7 +5,7 @@
     text-align: left;
     font-size: 1.2rem;
     border-radius: 0.5rem;
-    border: 1px solid rgb(25, 24, 29);
+    border: 1px solid rgb(45, 43, 51);
     background: rgb(60, 62, 78);
     line-height: 1.4rem; 
     word-break: break-all;  

From de1ea8803cfe6c6c1542b74fd65f3f726bb0f419 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Wed, 23 Mar 2022 09:14:45 -0300
Subject: [PATCH 13/31] bindPopper after data loading

---
 src/apps/explorer/components/TransanctionBatchGraph/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 6f36c0277..9aa59c31a 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -192,7 +192,7 @@ function TransanctionBatchGraph({
 
   useEffect(() => {
     const cy = cytoscapeRef.current
-    if (!cy) return
+    if (!cy || !elements.length) return
 
     cy.on('click tapstart', 'edge', (event): void => {
       const target = event.target
@@ -206,7 +206,7 @@ function TransanctionBatchGraph({
     cy.on('mouseout', 'edge', (event): void => {
       event.target.removeClass('hover')
     })
-  }, [cytoscapeRef])
+  }, [cytoscapeRef, elements.length])
 
   if (isLoading) return <Spinner spin size="3x" />
 

From 4eec1741b49882d2aa3db3394c99415768fab977 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Wed, 23 Mar 2022 09:35:01 -0300
Subject: [PATCH 14/31] Changing css file name

---
 src/api/tenderly/index.ts                                       | 2 +-
 .../{batchviewer.css => TransanctionBatchGraph.css}             | 0
 src/apps/explorer/components/TransanctionBatchGraph/index.tsx   | 2 +-
 3 files changed, 2 insertions(+), 2 deletions(-)
 rename src/apps/explorer/components/TransanctionBatchGraph/{batchviewer.css => TransanctionBatchGraph.css} (100%)

diff --git a/src/api/tenderly/index.ts b/src/api/tenderly/index.ts
index 1bb5ec28d..fc2851312 100644
--- a/src/api/tenderly/index.ts
+++ b/src/api/tenderly/index.ts
@@ -1,3 +1,3 @@
 export * from './tenderlyApi'
 
-export { PublicTrade as Trade, Transfer, Account } from './types'
+export type { PublicTrade as Trade, Transfer, Account } from './types'
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css b/src/apps/explorer/components/TransanctionBatchGraph/TransanctionBatchGraph.css
similarity index 100%
rename from src/apps/explorer/components/TransanctionBatchGraph/batchviewer.css
rename to src/apps/explorer/components/TransanctionBatchGraph/TransanctionBatchGraph.css
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 9aa59c31a..446cf6cd5 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -21,7 +21,7 @@ import { APP_NAME } from 'const'
 import { HEIGHT_HEADER_FOOTER } from 'apps/explorer/const'
 import { STYLESHEET } from './styled'
 import { abbreviateString } from 'utils'
-import './batchviewer.css'
+import 'apps/explorer/components/TransanctionBatchGraph/TransanctionBatchGraph.css'
 import BigNumber from 'bignumber.js'
 
 Cytoscape.use(popper)

From 29f3f1dbbfed5637f6871699f452c183e7d04965 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 23 Mar 2022 09:44:32 -0300
Subject: [PATCH 15/31] css arrow styles

---
 .../explorer/components/TransanctionBatchGraph/styled.ts     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
index e90e2232e..5f461400d 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
+++ b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
@@ -22,6 +22,7 @@ export const STYLESHEET: Stylesheet[] = [
       label: 'data(label)',
       width: 3,
       'target-arrow-shape': 'triangle',
+      'target-arrow-color': '#979dbf',
       'curve-style': 'unbundled-bezier',
       color: 'black',
       'line-color': '#747a9e',
@@ -36,7 +37,9 @@ export const STYLESHEET: Stylesheet[] = [
   {
     selector: 'edge.hover',
     style: {
-      width: 5,
+      width: 4,
+      'line-color': '#D96D49',
+      'target-arrow-color': '#D96D49',
     },
   },
   {

From 90ddc551c427e5025856d72d422336d887a7e559 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 23 Mar 2022 10:00:23 -0300
Subject: [PATCH 16/31] css globakl styles BV

---
 .../TransanctionBatchGraph/index.tsx          |  2 +-
 src/apps/explorer/styled.ts                   | 19 +++++++++++++++++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 446cf6cd5..3bce03ea1 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -21,7 +21,7 @@ import { APP_NAME } from 'const'
 import { HEIGHT_HEADER_FOOTER } from 'apps/explorer/const'
 import { STYLESHEET } from './styled'
 import { abbreviateString } from 'utils'
-import 'apps/explorer/components/TransanctionBatchGraph/TransanctionBatchGraph.css'
+// import 'apps/explorer/components/TransanctionBatchGraph/TransanctionBatchGraph.css'
 import BigNumber from 'bignumber.js'
 
 Cytoscape.use(popper)
diff --git a/src/apps/explorer/styled.ts b/src/apps/explorer/styled.ts
index 73d37f15d..152365979 100644
--- a/src/apps/explorer/styled.ts
+++ b/src/apps/explorer/styled.ts
@@ -12,6 +12,25 @@ export const GlobalStyle = createGlobalStyle`
     flex-direction: column;
     flex-grow: 1;
   }
+
+  /* Cystoscape - BatchViewer styles */
+  .target-popper {
+    max-width: 50rem;
+    padding: 1rem;
+    margin: 0 0 1rem 0;
+    text-align: left;
+    font-size: 1.2rem;
+    border-radius: 0.5rem;
+    border: 1px solid rgb(45, 43, 51);
+    background: rgb(60, 62, 78);
+    line-height: 1.4rem;
+    word-break: break-all;
+  }
+  .target-popper tr > td:first-child {
+    font-weight: bold;
+    text-transform: uppercase;
+    width: 6rem;
+}
 `
 
 export const MainWrapper = styled.div`

From 9410b4b4c46145f0d52b73061dcbd78976606c6f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 23 Mar 2022 10:12:31 -0300
Subject: [PATCH 17/31] clean styles BV

---
 .../TransanctionBatchGraph.css                | 29 -------------------
 .../TransanctionBatchGraph/index.tsx          |  1 -
 2 files changed, 30 deletions(-)
 delete mode 100644 src/apps/explorer/components/TransanctionBatchGraph/TransanctionBatchGraph.css

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/TransanctionBatchGraph.css b/src/apps/explorer/components/TransanctionBatchGraph/TransanctionBatchGraph.css
deleted file mode 100644
index 21acfcc01..000000000
--- a/src/apps/explorer/components/TransanctionBatchGraph/TransanctionBatchGraph.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.target-popper {
-    max-width: 50rem;
-    padding: 1rem;
-    margin: 0 0 1rem 0;
-    text-align: left;
-    font-size: 1.2rem;
-    border-radius: 0.5rem;
-    border: 1px solid rgb(45, 43, 51);
-    background: rgb(60, 62, 78);
-    line-height: 1.4rem; 
-    word-break: break-all;  
-}
-
-/* arrow tooltip
-.target-popper:after {
-    content: "";
-    position: absolute;
-    top: 100%;
-    left: 0rem;
-    border-width: 6px;
-    border-style: solid;
-    border-color: rgb(60, 62, 78) transparent transparent transparent;
-} */
-
-.target-popper tr > td:first-child {
-    font-weight: bold;
-    text-transform: uppercase;
-    width: 6rem;
-}
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 3bce03ea1..3981e67cd 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -21,7 +21,6 @@ import { APP_NAME } from 'const'
 import { HEIGHT_HEADER_FOOTER } from 'apps/explorer/const'
 import { STYLESHEET } from './styled'
 import { abbreviateString } from 'utils'
-// import 'apps/explorer/components/TransanctionBatchGraph/TransanctionBatchGraph.css'
 import BigNumber from 'bignumber.js'
 
 Cytoscape.use(popper)

From 10d363ff9734f17c99b46ff8c4f59d1b12a2d398 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Wed, 23 Mar 2022 11:25:35 -0300
Subject: [PATCH 18/31] bigger CoW protocol logo

---
 .../components/TransanctionBatchGraph/styled.ts |  2 ++
 src/assets/img/CoW.svg                          | 17 +----------------
 2 files changed, 3 insertions(+), 16 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
index 5f461400d..203a181e7 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
+++ b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
@@ -63,6 +63,8 @@ export const STYLESHEET: Stylesheet[] = [
     selector: 'node[type="cowProtocol"]',
     style: {
       'background-image': `url(${CowProtocolIcon})`,
+      height: '90',
+      width: '90',
       'text-valign': 'bottom',
       'text-margin-y': 8,
     },
diff --git a/src/assets/img/CoW.svg b/src/assets/img/CoW.svg
index 1df19b7a7..c7595228b 100644
--- a/src/assets/img/CoW.svg
+++ b/src/assets/img/CoW.svg
@@ -1,16 +1 @@
-<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M50 25C50 38.8071 38.8071 50 25 50C11.1929 50 0 38.8071 0 25C0 11.1929 11.1929 0 25 0C38.8071 0 50 11.1929 50 25Z" fill="url(#paint0_linear_1933_2570)"/>
-<path d="M42.4086 21.2402L36.6266 20.2943L41.0412 18.4485L42.0383 14.4653L40.8732 12.3971L35.1789 10.733L38.0778 14.8865H38.0754L38.0926 14.9106L35.8322 15.4752L30.2504 11.6426L25.5135 12.2051L20.7765 11.6426L15.1937 15.4756L12.9339 14.911L12.9512 14.8868H12.9488L15.8477 10.7333L10.1534 12.3975L8.98831 14.4656L9.98533 18.4489L14.4003 20.2943L8.62008 21.2402L7.30073 24.7943L11.2657 26.7104L15.0118 25.3899L15.5502 29.3883L18.0118 35.125L19.2108 38.2379L25.0127 42.3105L25.5062 42.6552V42.6621L25.5097 42.6648L25.5148 42.661L25.52 42.6648L25.5235 42.6621V42.6552L26.017 42.3105L31.8175 38.2366L33.0164 35.1237L35.4781 29.387L36.0165 25.3885L39.7626 26.7091L43.7276 24.7929L42.4086 21.2402ZM10.5458 12.8897L14.421 11.7567L12.3183 14.77L9.75411 14.2967L10.5458 12.8897ZM9.69268 14.8768L11.95 15.2963L10.3625 17.5506L9.69268 14.8768ZM14.9587 24.7915L11.3005 26.08L8.0334 24.4996L9.0494 21.7603L14.9604 20.7952L14.9587 24.7915ZM14.9587 19.8969L10.6793 18.1083L12.5719 15.4197L14.9573 16.0153L14.9587 19.8969ZM25.5135 35.7279L24.0371 34.5153L22.1797 29.601H28.8472L26.9898 34.5167L25.5135 35.7279ZM22.0034 29.0171L20.5059 23.8895H30.521L29.0235 29.0175L22.0034 29.0171ZM20.3237 23.3066L19.7716 21.4573L25.5135 13.1723L31.2543 21.4577L30.7022 23.307L20.3237 23.3066ZM15.5423 19.2258V15.9433L20.9259 12.2465L25.0873 12.7411L25.1149 12.7446L25.1028 12.7563L19.2518 21.1523L15.5423 19.2258ZM18.5523 34.9051L16.1176 29.2305L15.574 25.2131L19.9507 24.0684L21.4733 29.2836L20.2412 31.8567L18.5809 34.9782L18.5523 34.9051ZM18.8584 35.6996L20.5915 32.4413L25.0593 36.1102L24.9095 36.2332L19.629 37.6978L18.8584 35.6996ZM25.5135 41.9513L20.1232 38.1652L25.5135 36.6696L30.9037 38.1652L25.5135 41.9513ZM31.3972 37.6978L26.1171 36.2325L25.9673 36.1095L30.435 32.4406L32.1682 35.699L31.3972 37.6978ZM34.908 29.2305L32.4733 34.9044L32.4446 34.9785L30.7843 31.8567L29.5523 29.2836L31.0749 24.0684L35.4515 25.2131L34.908 29.2305ZM35.4847 19.2258L31.7768 21.1523L25.9241 12.7563L25.9121 12.7446L25.9397 12.7411L30.101 12.2465L35.4847 15.9433V19.2258ZM40.6654 17.5496L39.0779 15.2953L41.3353 14.8775L40.6654 17.5496ZM36.6059 11.7588L40.4811 12.8918L41.2728 14.2967L38.7087 14.771L36.6059 11.7588ZM36.0682 16.0195L38.4536 15.4239L40.3462 18.1125L36.0669 19.9011L36.0682 16.0195ZM39.7264 26.0821L36.0682 24.7936V20.7952L41.9792 21.7603L42.9952 24.4996L39.7264 26.0821Z" fill="url(#paint1_linear_1933_2570)"/>
-<defs>
-<linearGradient id="paint0_linear_1933_2570" x1="1.14286" y1="32.5" x2="47.8516" y2="15.6738" gradientUnits="userSpaceOnUse">
-<stop stop-color="#36373D"/>
-<stop offset="0.359375" stop-color="#101015"/>
-<stop offset="1" stop-color="#0E0501"/>
-</linearGradient>
-<linearGradient id="paint1_linear_1933_2570" x1="7.30073" y1="26.6998" x2="43.7262" y2="26.6998" gradientUnits="userSpaceOnUse">
-<stop offset="0.442708" stop-color="white"/>
-<stop offset="0.505208" stop-color="#8D9ACA"/>
-<stop offset="1" stop-color="#FF784A"/>
-</linearGradient>
-</defs>
-</svg>
+<svg width="75" height="75" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M75 37.5C75 58.21 58.21 75 37.5 75S0 58.21 0 37.5 16.79 0 37.5 0 75 16.79 75 37.5z" fill="url(#prefix__paint0_linear_1933_2570)"/><path d="M63.613 31.86l-8.673-1.419 6.622-2.768 1.495-5.975-1.747-3.102-8.542-2.497 4.349 6.23h-.004l.026.037-3.39.847-8.373-5.75-7.106.845-7.105-.844-8.374 5.75-3.39-.847.026-.037h-.004l4.349-6.23-8.542 2.496-1.748 3.102 1.496 5.975 6.622 2.768-8.67 1.42-1.979 5.33 5.948 2.875 5.619-1.981.807 5.997 3.693 8.605 1.798 4.67 8.703 6.109.74.517v.01l.006.004.007-.006.008.006.005-.004v-.01l.74-.517 8.701-6.111 1.798-4.67 3.693-8.605.808-5.997 5.619 1.98 5.947-2.874zM15.819 19.335l5.812-1.7-3.154 4.52-3.846-.71zm-1.28 2.98l3.386.63-2.381 3.38zm7.9 14.872L16.95 39.12l-4.9-2.37 1.523-4.11 8.867-1.447zm0-7.342l-6.42-2.683 2.839-4.032 3.578.893zm15.831 23.747l-2.214-1.819-2.786-7.372h10l-2.785 7.374zm-5.265-10.066l-2.246-7.692h15.023l-2.247 7.692zm-2.52-8.566l-.828-2.774 8.613-12.428 8.611 12.429-.828 2.773zm-7.172-6.121v-4.924l8.076-5.545 6.242.742.041.005-.018.017-8.776 12.594zm4.515 23.519l-3.652-8.512-.815-6.026 6.565-1.717 2.284 7.822-1.848 3.86-2.49 4.682zm.46 1.191l2.6-4.887 6.7 5.503-.224.185-7.92 2.197zm9.982 9.378l-8.085-5.68 8.085-2.243 8.086 2.244zm8.826-6.38l-7.92-2.198-.225-.185 6.702-5.503 2.6 4.887zm5.266-12.701l-3.652 8.51-.043.112-2.49-4.683-1.849-3.86 2.284-7.822 6.565 1.717zm.865-15.007l-5.562 2.89-8.779-12.595-.018-.017.042-.005 6.242-.742 8.075 5.545zm7.771-2.515l-2.381-3.381 3.386-.627zm-6.09-8.686l5.814 1.7 1.187 2.107-3.846.711zm-.806 6.391l3.578-.893 2.84 4.033-6.42 2.683zm5.488 15.094l-5.488-1.933v-5.997l8.867 1.447 1.524 4.11z" fill="url(#prefix__paint1_linear_1933_2570)"/><defs id="prefix__defs20"><linearGradient id="prefix__paint0_linear_1933_2570" x1="1.143" y1="32.5" x2="47.852" y2="15.674" gradientUnits="userSpaceOnUse" gradientTransform="scale(1.5)"><stop stop-color="#36373D" id="prefix__stop6"/><stop offset=".359" stop-color="#101015" id="prefix__stop8"/><stop offset="1" stop-color="#0E0501" id="prefix__stop10"/></linearGradient><linearGradient id="prefix__paint1_linear_1933_2570" x1="7.301" y1="26.7" x2="43.726" y2="26.7" gradientUnits="userSpaceOnUse" gradientTransform="scale(1.5)"><stop offset=".443" stop-color="#fff" id="prefix__stop13"/><stop offset=".505" stop-color="#8D9ACA" id="prefix__stop15"/><stop offset="1" stop-color="#FF784A" id="prefix__stop17"/></linearGradient></defs></svg>
\ No newline at end of file

From 8ac78440f1e5471536707367a1e5ff3904364171 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Wed, 23 Mar 2022 15:38:12 -0300
Subject: [PATCH 19/31] Remove all existing tooltips

---
 .../TransanctionBatchGraph/index.tsx          | 20 ++++++++-----------
 src/apps/explorer/const.ts                    |  2 ++
 2 files changed, 10 insertions(+), 12 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 3981e67cd..dca10158b 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -18,10 +18,9 @@ import { Account, ALIAS_TRADER_NAME } from 'api/tenderly'
 import ElementsBuilder, { buildGridLayout } from 'apps/explorer/components/TransanctionBatchGraph/elementsBuilder'
 import { TypeNodeOnTx } from './types'
 import { APP_NAME } from 'const'
-import { HEIGHT_HEADER_FOOTER } from 'apps/explorer/const'
+import { HEIGHT_HEADER_FOOTER, TOKEN_SYMBOL_UNKNOWN } from 'apps/explorer/const'
 import { STYLESHEET } from './styled'
-import { abbreviateString } from 'utils'
-import BigNumber from 'bignumber.js'
+import { abbreviateString, formatSmart } from 'utils'
 
 Cytoscape.use(popper)
 const HEIGHT_SIZE = window.innerHeight - HEIGHT_HEADER_FOOTER
@@ -82,10 +81,8 @@ function getNodes(txSettlement: TxSettlement, networkId: Network): ElementDefini
 
   txSettlement.transfers.forEach((transfer) => {
     const token = txSettlement.tokens[transfer.token]
-    const tokenSymbol = token?.symbol || 'UNKNOW'
-    const tokenAmount = token?.decimals
-      ? new BigNumber(transfer.value).div(new BigNumber(10).pow(token.decimals)).toFixed(2)
-      : '-'
+    const tokenSymbol = token?.symbol || TOKEN_SYMBOL_UNKNOWN
+    const tokenAmount = token?.decimals ? formatSmart(transfer.value, token.decimals) : '-'
 
     const source = builder.getById(transfer.from)
     const target = builder.getById(transfer.to)
@@ -104,19 +101,18 @@ function getNodes(txSettlement: TxSettlement, networkId: Network): ElementDefini
 
 function bindPopper(event: EventObject, targetData: Cytoscape.NodeDataDefinition | Cytoscape.EdgeDataDefinition): void {
   const tooltipId = `popper-target-${targetData.id}`
-  const existingTarget = document.getElementById(tooltipId)
+  const popperClassTarget = 'target-popper'
 
   // Remove if already existing
-  if (existingTarget) {
-    existingTarget.remove()
-  }
+  const existingTooltips: HTMLCollectionOf<Element> = document.getElementsByClassName(popperClassTarget)
+  Array.from(existingTooltips).forEach((ele: { remove: () => void }): void => ele && ele.remove())
 
   const target = event.target
   const popperRef = target.popper({
     content: () => {
       const tooltip = document.createElement('span')
       tooltip.id = tooltipId
-      tooltip.classList.add('target-popper')
+      tooltip.classList.add(popperClassTarget)
 
       const table = document.createElement('table')
       tooltip.append(table)
diff --git a/src/apps/explorer/const.ts b/src/apps/explorer/const.ts
index 606846fe3..f093c6c9c 100644
--- a/src/apps/explorer/const.ts
+++ b/src/apps/explorer/const.ts
@@ -26,3 +26,5 @@ export const NETWORK_ID_SEARCH_LIST = [Network.Mainnet, Network.xDAI, Network.Ri
 
 // Estimation heigh of the header + footer space
 export const HEIGHT_HEADER_FOOTER = 257
+
+export const TOKEN_SYMBOL_UNKNOWN = 'UNKNOWN'

From 1836ed4a87d809e58f24ffa17e9aed8b275e0765 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Wed, 23 Mar 2022 15:44:22 -0300
Subject: [PATCH 20/31] Add comment for guidance

---
 src/apps/explorer/components/TransanctionBatchGraph/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index dca10158b..186a190f3 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -99,6 +99,9 @@ function getNodes(txSettlement: TxSettlement, networkId: Network): ElementDefini
   )
 }
 
+/**
+ * This allow bind a tooltip (popper.js) around to a cytoscape elements (node, edge)
+ */
 function bindPopper(event: EventObject, targetData: Cytoscape.NodeDataDefinition | Cytoscape.EdgeDataDefinition): void {
   const tooltipId = `popper-target-${targetData.id}`
   const popperClassTarget = 'target-popper'

From aed00054ba250eee46d1145069fbdc7ab01f91e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Fri, 25 Mar 2022 12:51:38 -0300
Subject: [PATCH 21/31] add cow trader icon

---
 src/assets/img/TraderMe.svg    | 17 ++++++++++++++---
 src/assets/img/TraderOther.svg | 17 ++++++++++++++---
 2 files changed, 28 insertions(+), 6 deletions(-)

diff --git a/src/assets/img/TraderMe.svg b/src/assets/img/TraderMe.svg
index b36a98759..7cf20e1d6 100644
--- a/src/assets/img/TraderMe.svg
+++ b/src/assets/img/TraderMe.svg
@@ -1,5 +1,16 @@
 <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="25" cy="25" r="25" fill="#D96D49"/>
-<path d="M25 24.7656C28.5156 24.7656 31.3281 21.9531 31.3281 18.4375C31.3281 14.9219 28.5156 12.1094 25 12.1094C21.4844 12.1094 18.6719 14.9219 18.6719 18.4375C18.6719 21.9531 21.4844 24.7656 25 24.7656ZM25 14.4531C27.2266 14.4531 28.9844 16.2109 28.9844 18.4375C28.9844 20.6641 27.2266 22.4219 25 22.4219C22.7734 22.4219 21.0156 20.6641 21.0156 18.4375C21.0156 16.2109 22.7734 14.4531 25 14.4531Z" fill="black"/>
-<path d="M27.5781 26.6406H22.4219C16.6797 26.6406 12.1094 31.3281 12.1094 36.9531C12.1094 37.6563 12.5781 38.125 13.2812 38.125C13.9844 38.125 14.4531 37.6563 14.4531 36.9531C14.4531 32.5 18.0859 28.9844 22.4219 28.9844H27.5781C32.0313 28.9844 35.5469 32.6172 35.5469 36.9531C35.5469 37.6563 36.0156 38.125 36.7188 38.125C37.4219 38.125 37.8906 37.6563 37.8906 36.9531C37.8906 31.3281 33.2031 26.6406 27.5781 26.6406Z" fill="black"/>
+<circle cx="25" cy="25" r="25" fill="#FFD700"/>
+<path d="M25.4973 13.6185C26.4961 13.6828 27.4852 13.8542 28.4474 14.1297C28.9623 13.1576 29.3934 12.1433 29.736 11.098C29.8411 10.7928 30.0453 10.5316 30.3161 10.3561C30.5869 10.1805 30.9087 10.1006 31.2302 10.1292C31.5517 10.1578 31.8543 10.2932 32.0899 10.5138C32.3254 10.7345 32.4804 11.0276 32.5299 11.3465C32.6485 12.1156 32.6961 12.894 32.6719 13.6718C38.3981 12.4825 42.6617 11.4814 42.509 13.6505L42.4877 13.7286C41.2062 17.2538 38.6502 20.0725 35.4764 21.4641C35.1647 21.572 34.8993 21.7833 34.7242 22.063C34.5492 22.3426 34.4752 22.6737 34.5144 23.0013C34.5534 26.0791 34.5144 29.0754 34.5144 32.1213C31.5171 30.8193 28.2841 30.1474 25.0163 30.1474C21.7484 30.1474 18.5154 30.8193 15.5182 32.1213C15.5182 29.0754 15.4933 26.0862 15.5182 23.0013C15.5574 22.6737 15.4833 22.3426 15.3083 22.063C15.1333 21.7833 14.8679 21.572 14.5561 21.4641C11.3824 20.0725 8.82636 17.2538 7.5448 13.7286L7.5235 13.6505C7.37085 11.4814 11.6344 12.4825 17.3606 13.6718C17.3365 12.894 17.384 12.1156 17.5026 11.3465C17.5522 11.0276 17.7071 10.7345 17.9427 10.5138C18.1782 10.2932 18.4809 10.1578 18.8024 10.1292C19.1238 10.1006 19.4456 10.1805 19.7164 10.3561C19.9872 10.5316 20.1914 10.7928 20.2965 11.098C20.6392 12.1433 21.0703 13.1576 21.5852 14.1297C22.5474 13.8542 23.5364 13.6828 24.5352 13.6185H25.4973Z" fill="#193151"/>
+<path d="M25.1179 14.6691C26.4198 14.7213 27.7074 14.9604 28.9413 15.3791C29.6967 14.138 30.302 12.8117 30.7447 11.4279C30.7672 11.3446 30.8192 11.2724 30.8911 11.2247C30.963 11.1771 31.0497 11.1571 31.1352 11.1688C31.2246 11.1685 31.3109 11.202 31.3767 11.2625C31.4425 11.3231 31.4831 11.4062 31.4902 11.4954C31.6476 12.6392 31.6643 13.7981 31.5399 14.946C32.2215 14.843 32.3919 14.8182 33.2936 14.6158C39.0376 13.352 40.9191 13.3023 41.4338 13.5189C40.2339 16.6926 37.9158 19.2238 35.0438 20.4769C34.5412 20.6681 34.1141 21.017 33.8267 21.4715C33.5393 21.926 33.407 22.4614 33.4498 22.9975C33.4818 25.5535 33.4498 28.0563 33.4498 30.5697C28.0094 28.5485 22.024 28.5485 16.5836 30.5697C16.5836 28.0563 16.5659 25.5535 16.5836 22.9975C16.6264 22.4614 16.4942 21.926 16.2068 21.4715C15.9194 21.017 15.4923 20.6681 14.9897 20.4769C12.1283 19.2238 9.81017 16.6926 8.59961 13.5189C9.11436 13.3023 10.9959 13.352 16.7398 14.6158C17.6415 14.8182 17.8048 14.843 18.4935 14.946C18.3692 13.7981 18.3859 12.6392 18.5432 11.4954C18.5504 11.4062 18.5909 11.3231 18.6568 11.2625C18.7226 11.202 18.8088 11.1685 18.8982 11.1688C18.9837 11.1571 19.0705 11.1771 19.1423 11.2247C19.2142 11.2724 19.2662 11.3446 19.2887 11.4279C19.7314 12.8117 20.3368 14.138 21.0922 15.3791C22.326 14.9604 23.6136 14.7213 24.9155 14.6691H25.1179Z" fill="#BFD5EB"/>
+<path d="M20.2656 24.4641C19.7841 24.4585 19.3241 24.2635 18.9853 23.9214C18.6465 23.5792 18.456 23.1174 18.4551 22.6358C18.4615 22.4069 18.5132 22.1814 18.607 21.9725C18.7008 21.7635 18.835 21.5751 19.0018 21.4182C19.3412 21.094 19.7927 20.9134 20.262 20.9141C20.9822 20.9624 21.688 21.1391 22.3459 21.4359C23.0808 21.7554 23.6949 22.1992 23.6914 22.6891C23.6878 23.179 23.0737 23.6192 22.3388 23.9387C21.6832 24.2321 20.9818 24.4098 20.2656 24.4641V24.4641Z" fill="#FFD700"/>
+<path d="M20.2479 24.9468C19.639 24.9375 19.0582 24.6885 18.6316 24.2539C18.205 23.8193 17.9668 23.2341 17.9688 22.6251C17.9778 22.3312 18.0452 22.042 18.1671 21.7745C18.289 21.5069 18.4629 21.2663 18.6788 21.0666C19.1063 20.6564 19.6767 20.4285 20.2692 20.4312V20.4312C21.0541 20.48 21.8238 20.67 22.5412 20.9921C23.6062 21.4607 24.1813 22.0571 24.1813 22.689C24.1813 23.3209 23.6098 23.9138 22.5341 24.3824C21.8195 24.7023 21.0539 24.8933 20.2727 24.9468H20.2514H20.2479ZM20.2479 21.3968C19.9035 21.3966 19.5726 21.5303 19.3249 21.7695C19.2034 21.8818 19.1057 22.0172 19.0374 22.1678C18.9691 22.3183 18.9317 22.4811 18.9273 22.6464C18.9267 22.8199 18.9607 22.9918 19.0271 23.152C19.0935 23.3123 19.1911 23.4578 19.3142 23.5801C19.4363 23.7054 19.582 23.8053 19.7428 23.8742C19.9036 23.943 20.0765 23.9794 20.2514 23.9812V23.9812C20.9015 23.9258 21.5375 23.7614 22.133 23.4949C22.914 23.1399 23.198 22.8274 23.198 22.6854C23.198 22.5434 22.9175 22.2168 22.133 21.8796C21.5356 21.612 20.8968 21.4487 20.2443 21.3968H20.2479Z" fill="#193151"/>
+<path d="M11.6668 15.184L16.1043 16.2135C16.1518 16.2239 16.1948 16.2492 16.2268 16.2858C16.2589 16.3225 16.2783 16.3684 16.2823 16.4169C16.2863 16.4654 16.2746 16.5139 16.2489 16.5552C16.2233 16.5966 16.185 16.6286 16.1398 16.6466C15.2558 17.0016 13.6548 17.5341 12.8986 16.9661C11.8017 16.1496 11.4609 15.6952 11.3934 15.4467C11.3857 15.4096 11.3874 15.3711 11.3986 15.3349C11.4098 15.2987 11.43 15.2659 11.4573 15.2396C11.4847 15.2134 11.5182 15.1945 11.5549 15.1848C11.5915 15.175 11.63 15.1747 11.6668 15.184V15.184Z" fill="#193151"/>
+<path d="M29.7949 24.4641C30.277 24.4603 30.7381 24.266 31.0773 23.9234C31.4165 23.5808 31.6064 23.1179 31.6055 22.6358C31.599 22.4069 31.5474 22.1814 31.4535 21.9725C31.3597 21.7635 31.2256 21.5751 31.0587 21.4182C30.7193 21.094 30.2678 20.9134 29.7985 20.9141C29.0783 20.9624 28.3726 21.1391 27.7146 21.4359C26.9798 21.7554 26.3656 22.1992 26.3692 22.6891C26.3727 23.179 26.9869 23.6192 27.7217 23.9387C28.3773 24.2321 29.0787 24.4098 29.7949 24.4641Z" fill="#FFD700"/>
+<path d="M29.8143 24.9468C30.4232 24.9375 31.004 24.6885 31.4306 24.2539C31.8572 23.8193 32.0954 23.2341 32.0934 22.6251C32.0844 22.3312 32.017 22.042 31.8951 21.7745C31.7732 21.5069 31.5993 21.2663 31.3834 21.0666C30.9558 20.6564 30.3855 20.4285 29.793 20.4312V20.4312C29.0081 20.48 28.2384 20.67 27.521 20.9921C26.456 21.4607 25.8809 22.0571 25.8809 22.689C25.8809 23.3209 26.4524 23.9138 27.5281 24.3824C28.2427 24.7023 29.0083 24.8933 29.7894 24.9468H29.8107H29.8143ZM29.8143 21.3968C30.1587 21.3966 30.4896 21.5303 30.7373 21.7695C30.8587 21.8818 30.9565 22.0172 31.0248 22.1678C31.093 22.3183 31.1305 22.4811 31.1349 22.6464C31.1355 22.8199 31.1015 22.9918 31.0351 23.152C30.9687 23.3123 30.8711 23.4578 30.7479 23.5801C30.6259 23.7054 30.4802 23.8053 30.3194 23.8742C30.1585 23.943 29.9857 23.9794 29.8107 23.9812V23.9812C29.1607 23.9258 28.5247 23.7614 27.9292 23.4949C27.1482 23.1399 26.8642 22.8274 26.8642 22.6854C26.8642 22.5434 27.1447 22.2168 27.9292 21.8796C28.5266 21.612 29.1654 21.4487 29.8178 21.3968H29.8143Z" fill="#193151"/>
+<path d="M38.3937 15.184L33.9561 16.2135C33.9086 16.2239 33.8656 16.2492 33.8336 16.2858C33.8015 16.3225 33.7821 16.3684 33.7781 16.4169C33.7741 16.4654 33.7858 16.5139 33.8115 16.5552C33.8371 16.5966 33.8754 16.6286 33.9206 16.6466C34.8046 17.0016 36.4056 17.5341 37.1618 16.9661C38.2587 16.1496 38.5995 15.6952 38.667 15.4467C38.6747 15.4096 38.673 15.3711 38.6618 15.3349C38.6506 15.2987 38.6304 15.2659 38.603 15.2396C38.5757 15.2134 38.5422 15.1945 38.5055 15.1848C38.4689 15.175 38.4304 15.1747 38.3937 15.184V15.184Z" fill="#193151"/>
+<path d="M35.4906 32.8278C33.6695 30.861 31.2838 29.9877 28.7456 29.4694C27.5558 29.2072 26.339 29.0881 25.121 29.1144H24.947C23.729 29.0881 22.5122 29.2072 21.3225 29.4694C18.7806 29.9735 16.395 30.861 14.5774 32.8278C13.1041 34.4253 12.6888 36.4168 13.6224 38.0818C14.2241 39.2403 15.1204 40.2199 16.2211 40.9218C18.2899 42.1132 20.5898 42.848 22.9661 43.0767C23.6222 43.1549 24.2828 43.1893 24.9435 43.1796H25.1174C25.7781 43.1893 26.4387 43.1549 27.0948 43.0767C29.4712 42.848 31.771 42.1132 33.8399 40.9218C34.9405 40.2199 35.8368 39.2403 36.4385 38.0818C37.3792 36.4168 36.9639 34.4253 35.4906 32.8278Z" fill="#9AB6CC"/>
+<path d="M34.4838 32.6043C32.8472 31.1133 30.7066 30.4424 28.4239 30.0625C27.3354 29.8495 26.2279 29.7495 25.1188 29.7643H24.9591C23.8482 29.7444 22.7382 29.8395 21.6469 30.0483C19.3642 30.4282 17.2236 31.1133 15.587 32.5901C14.2628 33.7972 13.8936 35.3059 14.7279 36.5662C15.3026 37.479 16.1085 38.2237 17.0638 38.7246C18.9667 39.6389 21.0226 40.1926 23.1273 40.3576C23.7549 40.4189 24.3854 40.4449 25.0159 40.4357H25.062C25.6925 40.4449 26.3231 40.4189 26.9506 40.3576C29.0553 40.1926 31.1112 39.6389 33.0141 38.7246C33.9694 38.2237 34.7753 37.479 35.35 36.5662C36.1772 35.3024 35.808 33.7936 34.4838 32.6043Z" fill="#BFD5EB"/>
+<path d="M20.4117 36.8037C19.3786 37.3078 18.4166 36.8037 18.232 35.6606C18.0296 34.4358 19.6804 31.5248 20.0602 33.7258C20.4401 35.9268 22.1299 32.849 22.1405 34.2264C22.1128 34.7723 21.9373 35.3004 21.6328 35.7544C21.3283 36.2083 20.9063 36.571 20.4117 36.8037Z" fill="#193151"/>
+<path d="M35.916 32.4338C33.7469 30.0908 30.8465 29.2921 28.855 28.8838H28.8088C27.7666 28.6526 26.7026 28.5336 25.6351 28.5288V28.5288H24.4245C23.357 28.5336 22.293 28.6526 21.2508 28.8838H21.2046C19.2131 29.2779 16.3127 30.0766 14.1436 32.4338C12.468 34.2444 12.074 36.5199 13.107 38.3659C13.7537 39.6198 14.723 40.6786 15.9151 41.4332C17.8854 42.6189 20.1041 43.3289 22.8944 43.6661C23.5175 43.7422 24.1447 43.7801 24.7724 43.7797H25.2872C25.9149 43.7801 26.542 43.7422 27.1651 43.6661C29.9555 43.3289 32.1742 42.6189 34.1445 41.4332C35.3366 40.6786 36.3059 39.6198 36.9526 38.3659C37.9856 36.5093 37.5916 34.2444 35.916 32.4338ZM35.9373 37.7979C35.3872 38.8735 34.5615 39.7837 33.5445 40.4356C31.7198 41.5326 29.6395 42.2106 27.0231 42.5124C26.3906 42.5878 25.7537 42.621 25.1168 42.6118H24.9428C24.3059 42.621 23.669 42.5878 23.0365 42.5124C20.413 42.1929 18.3398 41.5326 16.515 40.4356C15.498 39.7837 14.6723 38.8735 14.1223 37.7979C13.3307 36.3779 13.6573 34.6739 14.9992 33.2255C16.4937 31.6067 18.4782 30.6233 21.4318 30.0305H21.4744C22.6334 29.7714 23.8193 29.6522 25.0067 29.6755H25.0529C26.2403 29.6522 27.4261 29.7714 28.5851 30.0305H28.6278C31.5814 30.6127 33.5658 31.596 35.0604 33.2255C36.4023 34.6739 36.7289 36.385 35.9373 37.7979V37.7979Z" fill="#193151"/>
+<path d="M29.6507 36.8037C30.6838 37.3078 31.6459 36.8037 31.8305 35.6606C32.0328 34.4358 30.3821 31.5248 30.0022 33.7258C29.6223 35.9268 27.9325 32.849 27.9219 34.2264C27.9496 34.7723 28.1251 35.3004 28.4296 35.7544C28.7341 36.2083 29.1562 36.571 29.6507 36.8037Z" fill="#193151"/>
 </svg>
diff --git a/src/assets/img/TraderOther.svg b/src/assets/img/TraderOther.svg
index 4345ba7f1..ac5b0f7e7 100644
--- a/src/assets/img/TraderOther.svg
+++ b/src/assets/img/TraderOther.svg
@@ -1,5 +1,16 @@
 <svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
-<circle cx="25" cy="25" r="25" fill="#B7B7B7"/>
-<path d="M25 24.7656C28.5156 24.7656 31.3281 21.9531 31.3281 18.4375C31.3281 14.9219 28.5156 12.1094 25 12.1094C21.4844 12.1094 18.6719 14.9219 18.6719 18.4375C18.6719 21.9531 21.4844 24.7656 25 24.7656ZM25 14.4531C27.2266 14.4531 28.9844 16.2109 28.9844 18.4375C28.9844 20.6641 27.2266 22.4219 25 22.4219C22.7734 22.4219 21.0156 20.6641 21.0156 18.4375C21.0156 16.2109 22.7734 14.4531 25 14.4531Z" fill="black"/>
-<path d="M27.5781 26.6406H22.4219C16.6797 26.6406 12.1094 31.3281 12.1094 36.9531C12.1094 37.6563 12.5781 38.125 13.2812 38.125C13.9844 38.125 14.4531 37.6563 14.4531 36.9531C14.4531 32.5 18.0859 28.9844 22.4219 28.9844H27.5781C32.0313 28.9844 35.5469 32.6172 35.5469 36.9531C35.5469 37.6563 36.0156 38.125 36.7188 38.125C37.4219 38.125 37.8906 37.6563 37.8906 36.9531C37.8906 31.3281 33.2031 26.6406 27.5781 26.6406Z" fill="black"/>
+<circle cx="25" cy="25" r="25" fill="#2B4266"/>
+<path d="M25.4973 13.6185C26.4961 13.6828 27.4852 13.8542 28.4474 14.1297C28.9623 13.1576 29.3934 12.1433 29.736 11.098C29.8411 10.7928 30.0453 10.5316 30.3161 10.3561C30.5869 10.1805 30.9087 10.1006 31.2302 10.1292C31.5517 10.1578 31.8543 10.2932 32.0899 10.5138C32.3254 10.7345 32.4804 11.0276 32.5299 11.3465C32.6485 12.1156 32.6961 12.894 32.6719 13.6718C38.3981 12.4825 42.6617 11.4814 42.509 13.6505L42.4877 13.7286C41.2062 17.2538 38.6502 20.0725 35.4764 21.4641C35.1647 21.572 34.8993 21.7833 34.7242 22.063C34.5492 22.3426 34.4752 22.6737 34.5144 23.0013C34.5534 26.0791 34.5144 29.0754 34.5144 32.1213C31.5171 30.8193 28.2841 30.1474 25.0163 30.1474C21.7484 30.1474 18.5154 30.8193 15.5182 32.1213C15.5182 29.0754 15.4933 26.0862 15.5182 23.0013C15.5574 22.6737 15.4833 22.3426 15.3083 22.063C15.1333 21.7833 14.8679 21.572 14.5561 21.4641C11.3824 20.0725 8.82636 17.2538 7.5448 13.7286L7.5235 13.6505C7.37085 11.4814 11.6344 12.4825 17.3606 13.6718C17.3365 12.894 17.384 12.1156 17.5026 11.3465C17.5522 11.0276 17.7071 10.7345 17.9427 10.5138C18.1782 10.2932 18.4809 10.1578 18.8024 10.1292C19.1238 10.1006 19.4456 10.1805 19.7164 10.3561C19.9872 10.5316 20.1914 10.7928 20.2965 11.098C20.6392 12.1433 21.0703 13.1576 21.5852 14.1297C22.5474 13.8542 23.5364 13.6828 24.5352 13.6185H25.4973Z" fill="#193151"/>
+<path d="M25.1179 14.6691C26.4198 14.7213 27.7074 14.9604 28.9413 15.3791C29.6967 14.138 30.302 12.8117 30.7447 11.4279C30.7672 11.3446 30.8192 11.2724 30.8911 11.2247C30.963 11.1771 31.0497 11.1571 31.1352 11.1688C31.2246 11.1685 31.3109 11.202 31.3767 11.2625C31.4425 11.3231 31.4831 11.4062 31.4902 11.4954C31.6476 12.6392 31.6643 13.7981 31.5399 14.946C32.2215 14.843 32.3919 14.8182 33.2936 14.6158C39.0376 13.352 40.9191 13.3023 41.4338 13.5189C40.2339 16.6926 37.9158 19.2238 35.0438 20.4769C34.5412 20.6681 34.1141 21.017 33.8267 21.4715C33.5393 21.926 33.407 22.4614 33.4498 22.9975C33.4818 25.5535 33.4498 28.0563 33.4498 30.5697C28.0094 28.5485 22.024 28.5485 16.5836 30.5697C16.5836 28.0563 16.5659 25.5535 16.5836 22.9975C16.6264 22.4614 16.4942 21.926 16.2068 21.4715C15.9194 21.017 15.4923 20.6681 14.9897 20.4769C12.1283 19.2238 9.81017 16.6926 8.59961 13.5189C9.11436 13.3023 10.9959 13.352 16.7398 14.6158C17.6415 14.8182 17.8048 14.843 18.4935 14.946C18.3692 13.7981 18.3859 12.6392 18.5432 11.4954C18.5504 11.4062 18.5909 11.3231 18.6568 11.2625C18.7226 11.202 18.8088 11.1685 18.8982 11.1688C18.9837 11.1571 19.0705 11.1771 19.1423 11.2247C19.2142 11.2724 19.2662 11.3446 19.2887 11.4279C19.7314 12.8117 20.3368 14.138 21.0922 15.3791C22.326 14.9604 23.6136 14.7213 24.9155 14.6691H25.1179Z" fill="#BFD5EB"/>
+<path d="M20.2656 24.4641C19.7841 24.4585 19.3241 24.2635 18.9853 23.9214C18.6465 23.5792 18.456 23.1174 18.4551 22.6358C18.4615 22.4069 18.5132 22.1814 18.607 21.9725C18.7008 21.7635 18.835 21.5751 19.0018 21.4182C19.3412 21.094 19.7927 20.9134 20.262 20.9141C20.9822 20.9624 21.688 21.1391 22.3459 21.4359C23.0808 21.7554 23.6949 22.1992 23.6914 22.6891C23.6878 23.179 23.0737 23.6192 22.3388 23.9387C21.6832 24.2321 20.9818 24.4098 20.2656 24.4641V24.4641Z" fill="#FFD700"/>
+<path d="M20.2479 24.9468C19.639 24.9375 19.0582 24.6885 18.6316 24.2539C18.205 23.8193 17.9668 23.2341 17.9688 22.6251C17.9778 22.3312 18.0452 22.042 18.1671 21.7745C18.289 21.5069 18.4629 21.2663 18.6788 21.0666C19.1063 20.6564 19.6767 20.4285 20.2692 20.4312V20.4312C21.0541 20.48 21.8238 20.67 22.5412 20.9921C23.6062 21.4607 24.1813 22.0571 24.1813 22.689C24.1813 23.3209 23.6098 23.9138 22.5341 24.3824C21.8195 24.7023 21.0539 24.8933 20.2727 24.9468H20.2514H20.2479ZM20.2479 21.3968C19.9035 21.3966 19.5726 21.5303 19.3249 21.7695C19.2034 21.8818 19.1057 22.0172 19.0374 22.1678C18.9691 22.3183 18.9317 22.4811 18.9273 22.6464C18.9267 22.8199 18.9607 22.9918 19.0271 23.152C19.0935 23.3123 19.1911 23.4578 19.3142 23.5801C19.4363 23.7054 19.582 23.8053 19.7428 23.8742C19.9036 23.943 20.0765 23.9794 20.2514 23.9812V23.9812C20.9015 23.9258 21.5375 23.7614 22.133 23.4949C22.914 23.1399 23.198 22.8274 23.198 22.6854C23.198 22.5434 22.9175 22.2168 22.133 21.8796C21.5356 21.612 20.8968 21.4487 20.2443 21.3968H20.2479Z" fill="#193151"/>
+<path d="M11.6668 15.184L16.1043 16.2135C16.1518 16.2239 16.1948 16.2492 16.2268 16.2858C16.2589 16.3225 16.2783 16.3684 16.2823 16.4169C16.2863 16.4654 16.2746 16.5139 16.2489 16.5552C16.2233 16.5966 16.185 16.6286 16.1398 16.6466C15.2558 17.0016 13.6548 17.5341 12.8986 16.9661C11.8017 16.1496 11.4609 15.6952 11.3934 15.4467C11.3857 15.4096 11.3874 15.3711 11.3986 15.3349C11.4098 15.2987 11.43 15.2659 11.4573 15.2396C11.4847 15.2134 11.5182 15.1945 11.5549 15.1848C11.5915 15.175 11.63 15.1747 11.6668 15.184V15.184Z" fill="#193151"/>
+<path d="M29.7949 24.4641C30.277 24.4603 30.7381 24.266 31.0773 23.9234C31.4165 23.5808 31.6064 23.1179 31.6055 22.6358C31.599 22.4069 31.5474 22.1814 31.4535 21.9725C31.3597 21.7635 31.2256 21.5751 31.0587 21.4182C30.7193 21.094 30.2678 20.9134 29.7985 20.9141C29.0783 20.9624 28.3726 21.1391 27.7146 21.4359C26.9798 21.7554 26.3656 22.1992 26.3692 22.6891C26.3727 23.179 26.9869 23.6192 27.7217 23.9387C28.3773 24.2321 29.0787 24.4098 29.7949 24.4641Z" fill="#FFD700"/>
+<path d="M29.8143 24.9468C30.4232 24.9375 31.004 24.6885 31.4306 24.2539C31.8572 23.8193 32.0954 23.2341 32.0934 22.6251C32.0844 22.3312 32.017 22.042 31.8951 21.7745C31.7732 21.5069 31.5993 21.2663 31.3834 21.0666C30.9558 20.6564 30.3855 20.4285 29.793 20.4312V20.4312C29.0081 20.48 28.2384 20.67 27.521 20.9921C26.456 21.4607 25.8809 22.0571 25.8809 22.689C25.8809 23.3209 26.4524 23.9138 27.5281 24.3824C28.2427 24.7023 29.0083 24.8933 29.7894 24.9468H29.8107H29.8143ZM29.8143 21.3968C30.1587 21.3966 30.4896 21.5303 30.7373 21.7695C30.8587 21.8818 30.9565 22.0172 31.0248 22.1678C31.093 22.3183 31.1305 22.4811 31.1349 22.6464C31.1355 22.8199 31.1015 22.9918 31.0351 23.152C30.9687 23.3123 30.8711 23.4578 30.7479 23.5801C30.6259 23.7054 30.4802 23.8053 30.3194 23.8742C30.1585 23.943 29.9857 23.9794 29.8107 23.9812V23.9812C29.1607 23.9258 28.5247 23.7614 27.9292 23.4949C27.1482 23.1399 26.8642 22.8274 26.8642 22.6854C26.8642 22.5434 27.1447 22.2168 27.9292 21.8796C28.5266 21.612 29.1654 21.4487 29.8178 21.3968H29.8143Z" fill="#193151"/>
+<path d="M38.3937 15.184L33.9561 16.2135C33.9086 16.2239 33.8656 16.2492 33.8336 16.2858C33.8015 16.3225 33.7821 16.3684 33.7781 16.4169C33.7741 16.4654 33.7858 16.5139 33.8115 16.5552C33.8371 16.5966 33.8754 16.6286 33.9206 16.6466C34.8046 17.0016 36.4056 17.5341 37.1618 16.9661C38.2587 16.1496 38.5995 15.6952 38.667 15.4467C38.6747 15.4096 38.673 15.3711 38.6618 15.3349C38.6506 15.2987 38.6304 15.2659 38.603 15.2396C38.5757 15.2134 38.5422 15.1945 38.5055 15.1848C38.4689 15.175 38.4304 15.1747 38.3937 15.184V15.184Z" fill="#193151"/>
+<path d="M35.4906 32.8278C33.6695 30.861 31.2838 29.9877 28.7456 29.4694C27.5558 29.2072 26.339 29.0881 25.121 29.1144H24.947C23.729 29.0881 22.5122 29.2072 21.3225 29.4694C18.7806 29.9735 16.395 30.861 14.5774 32.8278C13.1041 34.4253 12.6888 36.4168 13.6224 38.0818C14.2241 39.2403 15.1204 40.2199 16.2211 40.9218C18.2899 42.1132 20.5898 42.848 22.9661 43.0767C23.6222 43.1549 24.2828 43.1893 24.9435 43.1796H25.1174C25.7781 43.1893 26.4387 43.1549 27.0948 43.0767C29.4712 42.848 31.771 42.1132 33.8399 40.9218C34.9405 40.2199 35.8368 39.2403 36.4385 38.0818C37.3792 36.4168 36.9639 34.4253 35.4906 32.8278Z" fill="#9AB6CC"/>
+<path d="M34.4838 32.6043C32.8472 31.1133 30.7066 30.4424 28.4239 30.0625C27.3354 29.8495 26.2279 29.7495 25.1188 29.7643H24.9591C23.8482 29.7444 22.7382 29.8395 21.6469 30.0483C19.3642 30.4282 17.2236 31.1133 15.587 32.5901C14.2628 33.7972 13.8936 35.3059 14.7279 36.5662C15.3026 37.479 16.1085 38.2237 17.0638 38.7246C18.9667 39.6389 21.0226 40.1926 23.1273 40.3576C23.7549 40.4189 24.3854 40.4449 25.0159 40.4357H25.062C25.6925 40.4449 26.3231 40.4189 26.9506 40.3576C29.0553 40.1926 31.1112 39.6389 33.0141 38.7246C33.9694 38.2237 34.7753 37.479 35.35 36.5662C36.1772 35.3024 35.808 33.7936 34.4838 32.6043Z" fill="#BFD5EB"/>
+<path d="M20.4117 36.8037C19.3786 37.3078 18.4166 36.8037 18.232 35.6606C18.0296 34.4358 19.6804 31.5248 20.0602 33.7258C20.4401 35.9268 22.1299 32.849 22.1405 34.2264C22.1128 34.7723 21.9373 35.3004 21.6328 35.7544C21.3283 36.2083 20.9063 36.571 20.4117 36.8037Z" fill="#193151"/>
+<path d="M35.916 32.4338C33.7469 30.0908 30.8465 29.2921 28.855 28.8838H28.8088C27.7666 28.6526 26.7026 28.5336 25.6351 28.5288V28.5288H24.4245C23.357 28.5336 22.293 28.6526 21.2508 28.8838H21.2046C19.2131 29.2779 16.3127 30.0766 14.1436 32.4338C12.468 34.2444 12.074 36.5199 13.107 38.3659C13.7537 39.6198 14.723 40.6786 15.9151 41.4332C17.8854 42.6189 20.1041 43.3289 22.8944 43.6661C23.5175 43.7422 24.1447 43.7801 24.7724 43.7797H25.2872C25.9149 43.7801 26.542 43.7422 27.1651 43.6661C29.9555 43.3289 32.1742 42.6189 34.1445 41.4332C35.3366 40.6786 36.3059 39.6198 36.9526 38.3659C37.9856 36.5093 37.5916 34.2444 35.916 32.4338ZM35.9373 37.7979C35.3872 38.8735 34.5615 39.7837 33.5445 40.4356C31.7198 41.5326 29.6395 42.2106 27.0231 42.5124C26.3906 42.5878 25.7537 42.621 25.1168 42.6118H24.9428C24.3059 42.621 23.669 42.5878 23.0365 42.5124C20.413 42.1929 18.3398 41.5326 16.515 40.4356C15.498 39.7837 14.6723 38.8735 14.1223 37.7979C13.3307 36.3779 13.6573 34.6739 14.9992 33.2255C16.4937 31.6067 18.4782 30.6233 21.4318 30.0305H21.4744C22.6334 29.7714 23.8193 29.6522 25.0067 29.6755H25.0529C26.2403 29.6522 27.4261 29.7714 28.5851 30.0305H28.6278C31.5814 30.6127 33.5658 31.596 35.0604 33.2255C36.4023 34.6739 36.7289 36.385 35.9373 37.7979V37.7979Z" fill="#193151"/>
+<path d="M29.6507 36.8037C30.6838 37.3078 31.6459 36.8037 31.8305 35.6606C32.0328 34.4358 30.3821 31.5248 30.0022 33.7258C29.6223 35.9268 27.9325 32.849 27.9219 34.2264C27.9496 34.7723 28.1251 35.3004 28.4296 35.7544C28.7341 36.2083 29.1562 36.571 29.6507 36.8037Z" fill="#193151"/>
 </svg>

From 6e804d3de7d008bc66046504ceaf346551dbf30e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Fri, 25 Mar 2022 13:33:16 -0300
Subject: [PATCH 22/31] cow trader icon with rays

---
 src/assets/img/TraderOther.svg | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/src/assets/img/TraderOther.svg b/src/assets/img/TraderOther.svg
index ac5b0f7e7..fc96622b3 100644
--- a/src/assets/img/TraderOther.svg
+++ b/src/assets/img/TraderOther.svg
@@ -13,4 +13,11 @@
 <path d="M20.4117 36.8037C19.3786 37.3078 18.4166 36.8037 18.232 35.6606C18.0296 34.4358 19.6804 31.5248 20.0602 33.7258C20.4401 35.9268 22.1299 32.849 22.1405 34.2264C22.1128 34.7723 21.9373 35.3004 21.6328 35.7544C21.3283 36.2083 20.9063 36.571 20.4117 36.8037Z" fill="#193151"/>
 <path d="M35.916 32.4338C33.7469 30.0908 30.8465 29.2921 28.855 28.8838H28.8088C27.7666 28.6526 26.7026 28.5336 25.6351 28.5288V28.5288H24.4245C23.357 28.5336 22.293 28.6526 21.2508 28.8838H21.2046C19.2131 29.2779 16.3127 30.0766 14.1436 32.4338C12.468 34.2444 12.074 36.5199 13.107 38.3659C13.7537 39.6198 14.723 40.6786 15.9151 41.4332C17.8854 42.6189 20.1041 43.3289 22.8944 43.6661C23.5175 43.7422 24.1447 43.7801 24.7724 43.7797H25.2872C25.9149 43.7801 26.542 43.7422 27.1651 43.6661C29.9555 43.3289 32.1742 42.6189 34.1445 41.4332C35.3366 40.6786 36.3059 39.6198 36.9526 38.3659C37.9856 36.5093 37.5916 34.2444 35.916 32.4338ZM35.9373 37.7979C35.3872 38.8735 34.5615 39.7837 33.5445 40.4356C31.7198 41.5326 29.6395 42.2106 27.0231 42.5124C26.3906 42.5878 25.7537 42.621 25.1168 42.6118H24.9428C24.3059 42.621 23.669 42.5878 23.0365 42.5124C20.413 42.1929 18.3398 41.5326 16.515 40.4356C15.498 39.7837 14.6723 38.8735 14.1223 37.7979C13.3307 36.3779 13.6573 34.6739 14.9992 33.2255C16.4937 31.6067 18.4782 30.6233 21.4318 30.0305H21.4744C22.6334 29.7714 23.8193 29.6522 25.0067 29.6755H25.0529C26.2403 29.6522 27.4261 29.7714 28.5851 30.0305H28.6278C31.5814 30.6127 33.5658 31.596 35.0604 33.2255C36.4023 34.6739 36.7289 36.385 35.9373 37.7979V37.7979Z" fill="#193151"/>
 <path d="M29.6507 36.8037C30.6838 37.3078 31.6459 36.8037 31.8305 35.6606C32.0328 34.4358 30.3821 31.5248 30.0022 33.7258C29.6223 35.9268 27.9325 32.849 27.9219 34.2264C27.9496 34.7723 28.1251 35.3004 28.4296 35.7544C28.7341 36.2083 29.1562 36.571 29.6507 36.8037Z" fill="#193151"/>
+<mask id="mask0_1997_2596" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="50" height="50">
+<circle cx="25" cy="25" r="25" fill="#2B4266"/>
+</mask>
+<g mask="url(#mask0_1997_2596)">
+<path d="M46.5691 43.2544L27.4113 22.2357L30.3223 22.058L52.7672 39.2842C52.7672 39.2842 51.5147 40.9008 50.4225 41.7961C49.3628 42.6647 46.5691 43.2544 46.5691 43.2544Z" fill="#FFD700" fill-opacity="0.4"/>
+<path d="M26.5731 52.0468L19.4235 22.373L22.4519 23.4164L34.0609 50.5653C34.0609 50.5653 32.1484 51.7024 30.7328 52.1648C29.3595 52.6134 26.5731 52.0468 26.5731 52.0468Z" fill="#FFD700" fill-opacity="0.4"/>
+</g>
 </svg>

From 4774a232a280144c1e5dcd91164279ee983009a4 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Fri, 25 Mar 2022 17:27:13 -0300
Subject: [PATCH 23/31] start moving colors to variables

---
 .../TransanctionBatchGraph/index.tsx          |   5 +-
 .../TransanctionBatchGraph/styled.ts          | 133 +++++++++---------
 2 files changed, 71 insertions(+), 67 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 186a190f3..fcabc9582 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -8,7 +8,7 @@ import Cytoscape, {
 import popper from 'cytoscape-popper'
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import CytoscapeComponent from 'react-cytoscapejs'
-import styled from 'styled-components'
+import styled, { useTheme } from 'styled-components'
 
 import Spinner from 'components/common/Spinner'
 import { GetTxBatchTradesResult as TxBatchData, Settlement as TxSettlement } from 'hooks/useTxBatchTrades'
@@ -175,6 +175,7 @@ function TransanctionBatchGraph({
 }: GraphBatchTxParams): JSX.Element {
   const [elements, setElements] = useState<ElementDefinition[]>([])
   const cytoscapeRef = useRef<Cytoscape.Core | null>(null)
+  const theme = useTheme()
   const setCytoscape = useCallback(
     (ref: Cytoscape.Core) => {
       cytoscapeRef.current = ref
@@ -225,7 +226,7 @@ function TransanctionBatchGraph({
       elements={elements}
       layout={layout}
       style={{ width: '100%', height: HEIGHT_SIZE }}
-      stylesheet={STYLESHEET}
+      stylesheet={STYLESHEET(theme)}
       cy={setCytoscape}
       wheelSensitivity={0.2}
       className="tx-graph"
diff --git a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
index 203a181e7..89a55b337 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
+++ b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
@@ -1,79 +1,82 @@
 import { Stylesheet } from 'cytoscape'
+import { DefaultTheme } from 'styled-components'
 
 import TraderOtherIcon from 'assets/img/TraderOther.svg'
 import CowProtocolIcon from 'assets/img/CoW.svg'
 import DexIcon from 'assets/img/Dex.svg'
 
-export const STYLESHEET: Stylesheet[] = [
-  {
-    selector: 'node[label]',
-    style: {
-      label: 'data(label)',
-      color: '#cfcfcf',
-      height: 50,
-      width: 50,
-      'background-color': '#22232d',
+export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
+  return [
+    {
+      selector: 'node[label]',
+      style: {
+        label: 'data(label)',
+        color: '#cfcfcf',
+        height: 50,
+        width: 50,
+        'background-color': theme.bg2,
+      },
     },
-  },
 
-  {
-    selector: 'edge[label]',
-    style: {
-      label: 'data(label)',
-      width: 3,
-      'target-arrow-shape': 'triangle',
-      'target-arrow-color': '#979dbf',
-      'curve-style': 'unbundled-bezier',
-      color: 'black',
-      'line-color': '#747a9e',
-      'line-opacity': 0.8,
-      'text-background-color': 'white',
-      'text-background-opacity': 1,
-      'text-background-padding': '2px',
-      'text-background-shape': 'roundrectangle',
-      'font-size': '11px',
+    {
+      selector: 'edge[label]',
+      style: {
+        label: 'data(label)',
+        width: 3,
+        'target-arrow-shape': 'triangle',
+        'target-arrow-color': '#979dbf',
+        'curve-style': 'unbundled-bezier',
+        color: 'black',
+        'line-color': '#747a9e',
+        'line-opacity': 0.8,
+        'text-background-color': 'white',
+        'text-background-opacity': 1,
+        'text-background-padding': '2px',
+        'text-background-shape': 'roundrectangle',
+        'font-size': '11px',
+      },
     },
-  },
-  {
-    selector: 'edge.hover',
-    style: {
-      width: 4,
-      'line-color': '#D96D49',
-      'target-arrow-color': '#D96D49',
+    {
+      selector: 'edge.hover',
+      style: {
+        width: 4,
+        'line-color': '#D96D49',
+        'target-arrow-color': '#D96D49',
+      },
     },
-  },
-  {
-    selector: 'node[type="trader"]',
-    style: {
-      'background-image': `url(${TraderOtherIcon})`,
-      'text-valign': 'bottom',
-      'text-margin-y': 8,
+    {
+      selector: 'node[type="trader"]',
+      style: {
+        'background-image': `url(${TraderOtherIcon})`,
+        'text-valign': 'bottom',
+        'text-margin-y': 8,
+      },
     },
-  },
-  {
-    selector: 'node[type="dex"]',
-    style: {
-      'background-image': `url(${DexIcon})`,
-      'text-max-width': '5rem',
-      'text-valign': 'bottom',
-      'text-margin-y': 8,
+    {
+      selector: 'node[type="dex"]',
+      style: {
+        'background-image': `url(${DexIcon})`,
+        'text-max-width': '5rem',
+        'text-valign': 'bottom',
+        'text-margin-y': 8,
+      },
     },
-  },
-  {
-    selector: 'node[type="cowProtocol"]',
-    style: {
-      'background-image': `url(${CowProtocolIcon})`,
-      height: '90',
-      width: '90',
-      'text-valign': 'bottom',
-      'text-margin-y': 8,
+    {
+      selector: 'node[type="cowProtocol"]',
+      style: {
+        'background-image': `url(${CowProtocolIcon})`,
+        height: '90',
+        width: '90',
+        'text-valign': 'bottom',
+        'text-margin-y': 8,
+      },
     },
-  },
-  {
-    selector: 'node[type="networkNode"]',
-    style: {
-      'border-style': 'dashed',
-      'border-opacity': 0.8,
+    {
+      selector: 'node[type="networkNode"]',
+      style: {
+        'border-style': 'dashed',
+        'border-opacity': 0.8,
+      },
     },
-  },
-]
+  ]
+}

From 908767d1c0cae130318a2a3fa1c2bbe1f07bc218 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Fri, 25 Mar 2022 19:26:34 -0300
Subject: [PATCH 24/31] replace colors from theme

---
 .../TransanctionBatchGraph/styled.ts           | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
index 89a55b337..e6b9f59de 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
+++ b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
@@ -11,7 +11,7 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
       selector: 'node[label]',
       style: {
         label: 'data(label)',
-        color: '#cfcfcf',
+        color: theme.textSecondary1,
         height: 50,
         width: 50,
         'background-color': theme.bg2,
@@ -22,14 +22,14 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
       selector: 'edge[label]',
       style: {
         label: 'data(label)',
-        width: 3,
+        width: 2,
         'target-arrow-shape': 'triangle',
-        'target-arrow-color': '#979dbf',
+        'target-arrow-color': theme.grey,
         'curve-style': 'unbundled-bezier',
-        color: 'black',
-        'line-color': '#747a9e',
+        color: theme.black,
+        'line-color': theme.grey,
         'line-opacity': 0.8,
-        'text-background-color': 'white',
+        'text-background-color': theme.labelTextOpen,
         'text-background-opacity': 1,
         'text-background-padding': '2px',
         'text-background-shape': 'roundrectangle',
@@ -39,9 +39,9 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
     {
       selector: 'edge.hover',
       style: {
-        width: 4,
-        'line-color': '#D96D49',
-        'target-arrow-color': '#D96D49',
+        width: 3,
+        'line-color': theme.orange1,
+        'target-arrow-color': theme.orange1,
       },
     },
     {

From 75a77ce074d7b06914089b309b574b43a44f695d Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Tue, 29 Mar 2022 10:27:57 -0300
Subject: [PATCH 25/31] Uppercase NetworkName and HighPrecission decimals

---
 .../explorer/components/TransanctionBatchGraph/index.tsx | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index fcabc9582..8d5791811 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -9,6 +9,7 @@ import popper from 'cytoscape-popper'
 import React, { useState, useEffect, useRef, useCallback } from 'react'
 import CytoscapeComponent from 'react-cytoscapejs'
 import styled, { useTheme } from 'styled-components'
+import BigNumber from 'bignumber.js'
 
 import Spinner from 'components/common/Spinner'
 import { GetTxBatchTradesResult as TxBatchData, Settlement as TxSettlement } from 'hooks/useTxBatchTrades'
@@ -20,7 +21,7 @@ import { TypeNodeOnTx } from './types'
 import { APP_NAME } from 'const'
 import { HEIGHT_HEADER_FOOTER, TOKEN_SYMBOL_UNKNOWN } from 'apps/explorer/const'
 import { STYLESHEET } from './styled'
-import { abbreviateString, formatSmart } from 'utils'
+import { abbreviateString, FormatAmountPrecision, formattingAmountPrecision } from 'utils'
 
 Cytoscape.use(popper)
 const HEIGHT_SIZE = window.innerHeight - HEIGHT_HEADER_FOOTER
@@ -56,7 +57,7 @@ function getNetworkParentNode(account: Account, networkName: string): string | u
 function getNodes(txSettlement: TxSettlement, networkId: Network): ElementDefinition[] {
   if (!txSettlement.accounts) return []
 
-  const networkName = networkOptions.find((network) => network.id === networkId)?.name.toLowerCase()
+  const networkName = networkOptions.find((network) => network.id === networkId)?.name
   const networkNode = { alias: networkName || '' }
   const builder = new ElementsBuilder(HEIGHT_SIZE)
   builder.node({ type: TypeNodeOnTx.NetworkNode, entity: networkNode, id: networkNode.alias })
@@ -82,7 +83,9 @@ function getNodes(txSettlement: TxSettlement, networkId: Network): ElementDefini
   txSettlement.transfers.forEach((transfer) => {
     const token = txSettlement.tokens[transfer.token]
     const tokenSymbol = token?.symbol || TOKEN_SYMBOL_UNKNOWN
-    const tokenAmount = token?.decimals ? formatSmart(transfer.value, token.decimals) : '-'
+    const tokenAmount = token?.decimals
+      ? formattingAmountPrecision(new BigNumber(transfer.value), token, FormatAmountPrecision.highPrecision)
+      : '-'
 
     const source = builder.getById(transfer.from)
     const target = builder.getById(transfer.to)

From 08af504448aa8b5ed5a091cf3a5ed6cda6d4cb9a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 29 Mar 2022 11:20:56 -0300
Subject: [PATCH 26/31] increase token name size

---
 src/apps/explorer/components/TransanctionBatchGraph/styled.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
index e6b9f59de..e844e5087 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
+++ b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
@@ -31,9 +31,9 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
         'line-opacity': 0.8,
         'text-background-color': theme.labelTextOpen,
         'text-background-opacity': 1,
-        'text-background-padding': '2px',
+        'text-background-padding': '4px',
         'text-background-shape': 'roundrectangle',
-        'font-size': '11px',
+        'font-size': '16px',
       },
     },
     {

From 39e4c181bba63242e641584d26b82d8e69cbb599 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 29 Mar 2022 12:00:36 -0300
Subject: [PATCH 27/31] increase token name size

---
 .../explorer/components/TransanctionBatchGraph/styled.ts     | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
index e844e5087..dc3a5e28c 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
+++ b/src/apps/explorer/components/TransanctionBatchGraph/styled.ts
@@ -34,14 +34,17 @@ export function STYLESHEET(theme: DefaultTheme): Stylesheet[] {
         'text-background-padding': '4px',
         'text-background-shape': 'roundrectangle',
         'font-size': '16px',
+        'min-zoomed-font-size': 8,
       },
     },
     {
-      selector: 'edge.hover',
+      selector: 'edge[label].hover',
       style: {
         width: 3,
         'line-color': theme.orange1,
         'target-arrow-color': theme.orange1,
+        'text-background-color': theme.orange,
+        color: theme.white,
       },
     },
     {

From ff771bbb6a820a7619dd61f918a04cba7d07cfc7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Agust=C3=ADn=20Longoni?= <agustin.longoni@altoros.com>
Date: Tue, 29 Mar 2022 18:39:19 -0300
Subject: [PATCH 28/31] change tooltip events

---
 src/apps/explorer/components/TransanctionBatchGraph/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 8d5791811..08096bfa4 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -196,7 +196,7 @@ function TransanctionBatchGraph({
     const cy = cytoscapeRef.current
     if (!cy || !elements.length) return
 
-    cy.on('click tapstart', 'edge', (event): void => {
+    cy.on('mouseover touchstart', 'edge', (event): void => {
       const target = event.target
       const targetData: NodeDataDefinition | EdgeDataDefinition = target.data()
 

From 05fa37a9a94fed6bf08a38d13c037abce825bdad Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Wed, 30 Mar 2022 10:35:12 -0300
Subject: [PATCH 29/31] Testing build

---
 .../components/TransanctionBatchGraph/elementsBuilder.tsx     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx b/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
index ef60f7d06..371e427bc 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/elementsBuilder.tsx
@@ -125,6 +125,10 @@ export function getGridPosition(type: TypeNodeOnTx, traderRowsLength: number, de
   return col
 }
 
+/**
+ * Build a grid layout using the 'position' attribute
+ * using 'x' for the columns and 'y' for the rows.
+ */
 export function buildGridLayout(
   countTypes: Map<TypeNodeOnTx, number>,
   center: ElementDefinition | null,

From 3899285ea85779fe2f898526928aabe8668a4134 Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Thu, 31 Mar 2022 16:58:16 -0300
Subject: [PATCH 30/31] Limiting the max and min zoom view

---
 src/apps/explorer/components/TransanctionBatchGraph/index.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 08096bfa4..3fa3c7e5f 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -233,6 +233,9 @@ function TransanctionBatchGraph({
       cy={setCytoscape}
       wheelSensitivity={0.2}
       className="tx-graph"
+      maxZoom={3}
+      minZoom={0.1}
+      zoom={1}
     />
   )
 }

From fc9b41c2efc9e1bdcb3e5ebf787e482acc909d8d Mon Sep 17 00:00:00 2001
From: Henry Palacios <henrydpalacios@gmail.com>
Date: Thu, 31 Mar 2022 21:25:22 -0300
Subject: [PATCH 31/31] Resize graph view after press button: show transaction
 list

---
 .../components/TransanctionBatchGraph/index.tsx     | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
index 3fa3c7e5f..ec5c801af 100644
--- a/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
+++ b/src/apps/explorer/components/TransanctionBatchGraph/index.tsx
@@ -24,7 +24,6 @@ import { STYLESHEET } from './styled'
 import { abbreviateString, FormatAmountPrecision, formattingAmountPrecision } from 'utils'
 
 Cytoscape.use(popper)
-const HEIGHT_SIZE = window.innerHeight - HEIGHT_HEADER_FOOTER
 const PROTOCOL_NAME = APP_NAME
 const WrapperCytoscape = styled(CytoscapeComponent)`
   background-color: ${({ theme }): string => theme.bg1};
@@ -54,12 +53,12 @@ function getNetworkParentNode(account: Account, networkName: string): string | u
   return account.alias !== ALIAS_TRADER_NAME ? networkName : undefined
 }
 
-function getNodes(txSettlement: TxSettlement, networkId: Network): ElementDefinition[] {
+function getNodes(txSettlement: TxSettlement, networkId: Network, heightSize: number): ElementDefinition[] {
   if (!txSettlement.accounts) return []
 
   const networkName = networkOptions.find((network) => network.id === networkId)?.name
   const networkNode = { alias: networkName || '' }
-  const builder = new ElementsBuilder(HEIGHT_SIZE)
+  const builder = new ElementsBuilder(heightSize)
   builder.node({ type: TypeNodeOnTx.NetworkNode, entity: networkNode, id: networkNode.alias })
 
   for (const key in txSettlement.accounts) {
@@ -179,6 +178,7 @@ function TransanctionBatchGraph({
   const [elements, setElements] = useState<ElementDefinition[]>([])
   const cytoscapeRef = useRef<Cytoscape.Core | null>(null)
   const theme = useTheme()
+  const heightSize = window.innerHeight - HEIGHT_HEADER_FOOTER
   const setCytoscape = useCallback(
     (ref: Cytoscape.Core) => {
       cytoscapeRef.current = ref
@@ -187,10 +187,11 @@ function TransanctionBatchGraph({
   )
 
   useEffect(() => {
+    setElements([])
     if (error || isLoading || !networkId) return
 
-    setElements(getNodes(txSettlement, networkId))
-  }, [error, isLoading, networkId, txSettlement])
+    setElements(getNodes(txSettlement, networkId, heightSize))
+  }, [heightSize, error, isLoading, networkId, txSettlement])
 
   useEffect(() => {
     const cy = cytoscapeRef.current
@@ -228,7 +229,7 @@ function TransanctionBatchGraph({
     <WrapperCytoscape
       elements={elements}
       layout={layout}
-      style={{ width: '100%', height: HEIGHT_SIZE }}
+      style={{ width: '100%', height: heightSize }}
       stylesheet={STYLESHEET(theme)}
       cy={setCytoscape}
       wheelSensitivity={0.2}