[Explorer] Batch viewer design

[alfetopito]

We want to add a "batch view".

• Tokens traded
• Volumes
• Graph linking the tokens
• CoWs between orders
• AMMs used
• Gas cost

Example of a batch with several traders https://etherscan.io/tx/0x1eced7428aebc4cd59af3b170bcc960b5fa6aee1459c924eb5f1abe528097eb7

Another example that uses univ2, sushiswap, univ3(via 1inch) https://etherscan.io/tx/0x71cf245169557a344c4aea6aa08801e95892d08c4ede5fc09fd59d578b524ee4

E.g. from from GPv1

E.g. from Anxo: Two graph representations of a settlement.

• One grouping by address.
• One grouping by token

Ideally, we would need to know if an AMM is involved. We will need to check how is best to get this information. this way, we can show the “path” of execution to the users too. This is an unrefinated, and undiscussed idea of the two settlement representations:

Document for explore libs: https://docs.google.com/document/d/1cCfvKVCkuyGtpuf1QjKBeNo4Z9cLESDlP3HX2jcdo0g/edit?usp=sharing

[alongoni]

Hey @alfetopito I've made this draft (WIP):

I was thinking if we are going to use some library to made this kind of graphs. I found this chord diagram that maybe we can use. Are there any restrictions in GP Explorer to use this kind of libraries? (E.g. amCharts, d3js )

[anxolin]

Cool! we have a similar problem defined that we used in the past for hiring. In case it helps. The data format might also be useful to prototype something in the storybook.

https://hackmd.io/FiPTLVCQSBavsUB4v3EFBA

I think ideally we would try to research on nice libraries that would simplify our development, in case that would drive also the design. So @alongoni, im happy u were looking into what's out there.

I think that by reviewing this, we will see some inspiring graphs that could help us represent things about the protocol We could open a document for ideas, and pointing to libraries. This way we can have it in mind in order to do nice things in the future. Also, it makes sense to choose a library that we can use for several things.

Regarding Chord diagram it looks like a great alternative if that has some configuration so we add some token logos and more complex tooltips.

For the AMM, it should be percentages I believe. 80% uniswap 20% sushiswap

Gas costs needs to be in USD too, also you have missing the volumes in USD

[alfetopito]

The lib suggestion worth taking a look I mentioned during our meeting today is https://echarts.apache.org/examples/en/index.html#chart-type-graph It's the one Nenad (new team member) used on https://github.com/nenadV91/price-settlements-app when solving the problem Anxo talked about

[alongoni]

I made this document to start thinking about what library we can use. Feel free to add new ones.

https://docs.google.com/document/d/1cCfvKVCkuyGtpuf1QjKBeNo4Z9cLESDlP3HX2jcdo0g/edit?usp=sharing

[anxolin]

Nice call opening a document. Should we make a table with PRO/CONs and maybe some kind of indicator of how lightweight are they?

[anxolin]

Since I almost lost the model with the proposal I did for the settlement:

Also adding some early ideas that need to be cleaned up and polished:

The main idea is to be able to show how CowSwap enables coincidence of wants and interacts with AMMs in order to satisfy the settlement:

The token models is simpler to implement, and doesn't require to add AMMs. Also, one of the proposals, tries to show the settlement without showing the Cow as an intermediate, however this approach will make us to have to decide who is swaping with who, and there's no unique solutions to this. So user's interactions won't look the same even if they execute identical orders in the same batch.

[anxolin]

Other directions, to make the graph simpler, would be as suggested by Alex, to not try to represent all at once.

We could show some general things about the settlement

• Volume
• Number of users
• Separate CoW and AMMs

These ideas are close to this:

[alongoni]

What should we do with this task? Can we set a low, medium, or high priority?

[anxolin]

Low now, Leandro will share prios soon. Claiming UI, Rebranding and SDK. Important after those