Hackathon graph #534
Hackathon graph #534
Conversation
* chore: add getTransactionTrace and getTransactionContracts tenderly api fns * chore: add hook to fetch unfiltered tx data
* refactor: rename `traceToTransfersAndTrades` * chore: export all types from tenderly from index * feat: add getContractTrades * feat: add getNotesAndEdges
* refactor: a tiny bit of clean up on useTxBatchTrades * chore: update graph WIP Messy commit, lots to describe and update still * fix: edge colors now match user/amm interactions * chore: pass down transfers to Node objs * chore: use different node types for dex vs token nodes * chore: use a different icon for token nodes * chore: capture eth sell transfers * refactor: remove repeated variable * chore: add map of wrapped native token addresses * chore: add link to hyper nodes * chore: show address and link when token has no symbol * chore: actually, always show link for all nodes * chore: improve edge labels * chore: add tooltip to edges * chore: replace native token node with wrapped * ore: add node type hyper * chore: add dynamic stylesheet for token images * chore: add token images to graph * filter contract trades which only route tokens (#533) --------- Co-authored-by: Felix Henneke <[email protected]>
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
Pull Request Test Coverage Report for Build 5358427449
💛 - Coveralls |
* refactor: rename const to all caps * chore: wire up everything -- still WIP * chore: more a ton of refactorings, still not working * fix: enum comparison of same type was failing because one was a string the other a number * chore: update layout once visualization changes * fix: use proper type * chore: remove debug statements * refactor: remove unused hooks * refactor: move buildContractBasedSettlement to TransactionBatchGraph * refactor: move buildTokenBasedSettlement into settlementBuilder * refactor: move node builder fns into nodesBuilder file * refactor: move types to types file * refactor: move hooks to hooks file * chore: cache tenderly fetched data * refactor: rename contract->transfer token->trades
* added tooltip for nodes showing balance of token * show dangeling edges * merge transfers for hyper nodes * use order information to filter for non-user trades * clean up address comments - made isInternal in Transfer optional - better sign for 0 in tool tip - tooltip can be undefined. does still render stuff though.
|
Hey @alfetopito , that's great! Awesome! Then, as a proposal, if there is no a token icon, maybe we should use a funny cow icon instead of a grey circle (not for now, just for the future)? Also I noticed some overlapping between elements in the graph area |
Expected, as the number refers to changes to CoW protocol internal buffers usage
I tried to do that at first but it broke the images for the other tokens.
True, I'll try to fix it
This case is a won't fix, as it's just a matter of the default visualization not looking great for this graph and the view size. |
|
Hey @alfetopito , also noticed that it would be great to enhance a bit mobile views Also, impossible on a mobile view to see a token's balance as it opens a token's address on explorer on click |
Created cowprotocol/cowswap#3717 issue for this |
Thank you! @elena-zh one more thing I didn't have time to fix is the deep link to the new graph. |
|
Please post merge review |
Summary
Hackathon project introducing a new graph visualization: Trade based view
It's possible to toggle between current (transfer based) to the new (trade based)
Also introducing 2 new graph layouts: circle and concentric
Example of concentric layout for batch
0x992cbc5f40755ee858726662a28425dc3aa389c8b53a9b104049d4ae2249dc7fDetails
In the new view, transferred tokens (and some AMMs) are the nodes, trades (denoted in green) and transfers (denoted in red) are the edges.
Wrapping/unwrapping is abstracted away. Any native token interaction is replaced by the corresponding wrapped token.
Nodes
Like the previous visualization, click on nodes links to Etherscan.
Token nodes will display a tooltip with token balance on hover
Token images will be displayed when available (for now mostly for Mainnet)
Hyper nodes do not have a tooltip.
They are displayed for intermediate transfers on AMM interactions
Edges
Trade edges are colored green.
The label is the abbreviated order id.
The tooltip shows the full order id and the trade amounts
Transfer edges are colored red.
The label is either the name of the contract that performed the transfer or an abbreviation of its address when there's no name.
The tooltip shows the transfer amounts
Hypernode edges are a special case of transfer edges, where the tooltip will only have a single amount. Either bought or sold, depending on the transfer direction
Testing
Basically, verify different batches with both visualizations.
There was a lot of refactoring, but in essence the original graph should have the same behaviour as before.
Some use cases checked during development:
0xc444e3c90846adec2058296a6b4958c4e153361f5d3eda55b4f9c71efcb636970x48817a64fc831ed6f20b90ad634f79dc07052cd7158279a618eccbe039541c160x4033bb83a68605b863066acc744a9a971da27b237a83d2898fa39448916e0f860x3a4d9e2bfc30c201ff12e197080f5552d7fe9598944ae24fec455f87360936a40x34a01445b89389e7ec795fafcb0cc2a03042cd274246a0c91f06c9aa4747099c0x54450bc55a83276344a4e27b951a82d0d5e1927af0126aaac64b1417eb3698680x3e55e2219400b5c229463d0f02cd70c779d4b2a21017cb9d3ca997baa533d8ed0x992cbc5f40755ee858726662a28425dc3aa389c8b53a9b104049d4ae2249dc7f0x7fe80b725910de1c47e6ac0b4ba56049c84d753e63e45db09d56426ba18ec1e80x3dd00931be9dffae244218c119469cb5c5233e79f627c54c92785a959ce9b75e