Implementation of the batch transanction view

[henrypalacios]

Summary

Closes #1058

Implement the visualization of a batch of transactions through a node graph.

Cytoscape has been used as interaction library due to its maturity and large community. But we had to apply styles in a way outside the project format.

To Test:

• Go to mainnet/tx/0xc2eb04b549d68c770062591e2561c5b1534ea665c6179d33a779c52376c9161d
• Go to mainnet/tx/0x51757dd21436d695824ceb13d21ec3c3ef5e5e5454a847951b1ea91e1c89b0b7

[github-actions]

• 🔭 Explorer: Explorer test app
• 🔒 Safe Swap App: Trade test app (add to your safe apps)
• 📈 Trade: Trade test app
• 📚 Storybook: Component stories

[alongoni]

We are working with @henrypalacios adding some tooltips to the arrows in order to have the amounts traded by the users (Traders). Also we need to wrap the address of the AMMs.

Also, we are exploring another layout called: "cose" and it's look like this:
Default view:

Expected view:

It' ll require some testing to achieve the result.

[alfetopito]

Funny edge case https://pr1061--gpui.review.gnosisdev.com/tx/0x51757dd21436d695824ceb13d21ec3c3ef5e5e5454a847951b1ea91e1c89b0b7

EDIT: well, turns out it was my network... took a long time to load and couldn't find the token symbols. After a refresh I can see the token names loaded

[alfetopito]

Well this is a giant mess https://pr1061--gpui.review.gnosisdev.com/tx/0x172bddae0015331f4b357905ff7995389597a38294a00b4b13e90c1d70884785/ 😅

For reviewers: open https://dune.xyz/queries/205786/384521, filter by barn and sort by num trades

[elena-zh]

@henrypalacios , I have verified the latest changes!
Network names, rounding, and increased token names LGTM!
Maybe another nitpick I could mention is that it would be better to fill in the whole screen with the diagram area

[anxolin]

As as a good to have feature, for future reiterations, do you think we can make the arrows reflect if they are a sell or buy orders?

Normally GREEN reflects a buy, RED a sell. We could use color either in the arrow or the user or somewhere we could tell which ones are what.

[alongoni]

@henrypalacios , I have verified the latest changes! Network names, rounding, and increased token names LGTM! Maybe another nitpick I could mention is that it would be better to fill in the whole screen with the diagram area

Hey @elena-zh thanks! Is your zoom at 100%? Maybe that could be the cause.
https://www.loom.com/share/4c376579ba204d17a32fd3f02d4de014

[elena-zh]

Hey @alongoni , I have fund the root cause of the issue: the diagram area is not auto-scalable. I mean, if I drag and drop a browser's tab with the diagram from a smaller screen to a bigger one, I will get this issue. See the video: https://watch.screencastify.com/v/u2oEJODe2166zN7faBdz

But it is a low-low priority issue, that is why I created a separate task for this #1084

[elena-zh]

As as a good to have feature, for future reiterations, do you think we can make the arrows reflect if they are a sell or buy orders?

Normally GREEN reflects a buy, RED a sell. We could use color either in the arrow or the user or somewhere we could tell which ones are what.

I have created a separate enhancement task for this #1085

[henrypalacios]

Hey @elena-zh, @ramirotw as I mentioned I submitted changes to mitigate issues #1074(pt. 1), #1084 in this first iteration.

So we will continue working on the corresponding issues on a next iteration.