Add MEV diagrams to the diagrams page

[nloureiro]

The content is hard to understand, and by adding diagrams to this page will help understand

https://ethereum.org/en/developers/docs/mev/

[sogobanwo]

@nloureiro i would love to work on this

[nloureiro]

@nloureiro i would love to work on this

Awesome. Any ideas for the diagram?

[sogobanwo]

Yes, I am looking to add 2 diagrams.
i. one that shows what MEV is after the definition
ii. another that visualizes the example of arbitrage (how flashloan of 1000ETH was collected on AAVE and used to get 1045ETH.)

[sogobanwo]

Hi @nloureiro this is the proposed diagram I intend to upload on the page to explain the order of transactions due to gas fees by validators in order to get the max value from a block.

[sogobanwo]

Hi @nloureiro i just made a PR input this image in the article.
Kindly review & merge while i come up with the next image.
Thanks

[nloureiro]

ok, thank you! That is a great starting point.
I wanted to have more eyes on this base diagram to be sure that we ar not forgetting anything.
@wackerow @corwintines can you help here?

@sogobanwo Another thing, how are your Figma skills? Are you okay with doing the diagrams using your style guide?
https://www.figma.com/file/Hj8Hnc6TYBs8GDxfdcCtqW/Diagrams-and-schematics?type=design&node-id=122%3A27&mode=design&t=QMcbsYJvpmuUYojp-1

If not, it's okay; no worries. We can have another contributor just to do the final design; you are already helping a lot.

[sogobanwo]

Hi @nloureiro i'm not too good with figma but with the style guide i should be able to draw the diagram with figma.

[aslikaya]

Hi! Yes @sogobanwo the specific example with a diagram would be nice to see too. For just the MEV part, I am not sure if ordering according to gas fees explains it correctly, MEV is pretty complex.

The part that was confusing to me was many actors involved in the process of mev-boost (users, searchers, builders, relays, validators) and each responsible for different things. I checked a few other resources, and see some diagrams about it from Flashbots website. Here they are:

I did one too, but I kind of combined the first two and some readings I guess. They got densed. I used google drawings, I don't have design experience.

The relationship between relay, mev-boost and validator could be another diagram

[wackerow]

Thank you @sogobanwo and @aslikaya, appreciate these contributions... I do tend to agree that the first drawing seems to overly simplify MEV. Simply ordering txs by highest fee is pretty standard, and I suppose could be a form of MEV, but as the other diagrams demonstrate, MEV can get quick complex.

Seeing as these changes are targeting the dev docs, I would probably lean towards the more complex explanations, though maybe there's room for both. At a glance these all look pretty decent but will have to come back to look through them in more depth.

[nloureiro]

Hi @nloureiro i'm not too good with figma but with the style guide i should be able to draw the diagram with figma.

ok. no worries if you don't it on Figma, we can open an issue for someone else to do it. All good

[nloureiro]

@aslikaya @wackerow, would something like this make sense? maybe too many images to this page

I'm trying to understand how to push this forward.

did on this Figma to be easy to have an overview of the page, please add comments there if it is easy
https://www.figma.com/file/ZEhZXwNPF6t5MrVKBpvyYt/MEV-diagrams?type=design&node-id=0%3A1&mode=design&t=DTJtEuo9Wg3ug0bL-1

[aslikaya]

Btw these two resources helped me understand mevboost:
1- Talk by Alex Stokes (then I realized a more recent, longer version exist: https://youtu.be/-xY1EEzcp0s)
2- Architectural overview on block proposal

[nloureiro]

Btw these two resources helped me understand mevboost: 1- Talk by Alex Stokes (then I realized a more recent, longer version exist: https://youtu.be/-xY1EEzcp0s) 2- Architectural overview on block proposal

I only have a high level of knowledge of MEV; I feel a bit out when discussing this level of detail.
Let's try to get a proposal out and then get more eyes on it to validate it.

thank you for your help!

[aslikaya]

As I mentioned, here is another diagram to explain the relationship between validator-mevboost-relays-builders in more detail

this page helped: Architectural overview on block proposal

I skipped the validator registration part here and focused on the more complicated part: when a validator is selected to propose a block

[LauraSinisterra]

Hi @nloureiro, would love to help designing the diagrams on Figma.

[nloureiro]

Hi @nloureiro, would love to help designing the diagrams on Figma.

Hi. Great!

At this point I'm working with @aslikaya and @wackerow on the main one

you can follow here https://www.figma.com/design/ZEhZXwNPF6t5MrVKBpvyYt/MEV-diagrams?node-id=254%3A594&t=vrIuMBRfrrt8W9Zh-1
this is where we are... almost ready for the data to finish the design

But I was wondering if we should have a simpler one at the top of the page based on @sogobanwo's proposal.

@aslikaya what do you think? Do we need a simplified version on the top of the page? (if yes, for sure... @LauraSinisterra, you can help... Thank you for reaching out)

[aslikaya]

I think it could be nice to show other parts of the process like searchers and public-private mempools without going into much detail, like an overview. The one we are working on now is pretty detailed. Maybe under MEV Extraction - where searchers are mentioned, yet mev-boost, builders and relays are not mentioned there, only towards the bottom of the page

[nloureiro]

Hi @nloureiro ! Happy to help polishing the diagram design, I'm already working on a version using the current figma file.

hey, awesome. I can´t let you edit this Figma file, but can you duplicate and edit on your side?

https://www.figma.com/design/ZEhZXwNPF6t5MrVKBpvyYt/MEV-diagrams?node-id=287-32&t=KMwokFIM7RS888KO-1

I've also created this guides to help follow the style. not a hard set of rules, we can bend them a little bit but I think we souls follow a similar style.
https://www.figma.com/design/Hj8Hnc6TYBs8GDxfdcCtqW/Diagrams-and-schematics?node-id=603-3&t=v1gWYEzpe4vcJ5Zn-1

Thank you for reaching out!

[LauraSinisterra]

Perfect! Thanks, I'll make sure to follow the style.

[nloureiro]

Perfect! Thanks, I'll make sure to follow the style.

Let me know if you have any questions. Thank you!

[corwintines]

Thanks @LauraSinisterra! Assigned this to you for now while you work on the diagram :)

[LauraSinisterra]

Hey @nloureiro @corwintines ! Here's a first draft for the diagram. I'm using some shapes/color/spacing from the diagrams and schematics Figma file, and took some liberties with the circle shapes and the end of the arrows.

Let me know what you think, happy to make any adjustments in size/color/anything else.

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[nloureiro]

Hey @nloureiro @corwintines ! Here's a first draft for the diagram. I'm using some shapes/color/spacing from the diagrams and schematics Figma file, and took some liberties with the circle shapes and the end of the arrows.

Let me know what you think, happy to make any adjustments in size/color/anything else.

Oh, I missed this! I'm so... sorry @LauraSinisterra

Look awesome! Thank you so much

Can you export a transparent version to test it on the browser? We use the same image on light and dark themes, and that's the biggest challenge with these diagrams, which is why I usually use stronger colors. The visual impact is kinda the same on both themes. But I want to try as is now.

[LauraSinisterra]

Sure! I tried it with a light and a dark background (images attached) and I'm sending you the PNG with transparency.
Happy to make any changes to improve contrast, let me know what you think. @nloureiro

[nloureiro]

@LauraSinisterra Thank you!

This brings me back to our discussion of using the same PNG to have a similar visual impact on both themes.

You've made some improvents on the arrows and ither details that I realt like and makes me wonder if we should change this to be the new diagram system 😅

this is what I have onde last year

(https://www.figma.com/design/Hj8Hnc6TYBs8GDxfdcCtqW/Diagrams-and-schematics?node-id=603-3&t=iDdC6cZnN9v91oYx-1)

Meanwhile, we have a few comments on Figma about the content. Would you like to check them out?
https://www.figma.com/design/ZEhZXwNPF6t5MrVKBpvyYt?node-id=395-40#906251495

[LauraSinisterra]

Glad you like it! Happy to contribute to the new diagram system if you decide you want it. @nloureiro

Just checked the comments, here's the updated version.

[nloureiro]

Glad you like it! Happy to contribute to the new diagram system if you decide you want it. @nloureiro

Just checked the comments, here's the updated version.

Thank you! Great work!

It has been added to Figma for a quick review. Then, we can move on to the code phase and open a PR with it.
https://www.figma.com/design/ZEhZXwNPF6t5MrVKBpvyYt/MEV-diagrams?node-id=426-41&t=9LvQSQU9YUviL8Pz-1

[github-actions]

This issue is stale because it has been open 30 days with no activity.

[wackerow]

Thanks for the help @LauraSinisterra! Going to close this issue out now that the new diagram has been merged.

As our theming has been updated there will certainly be more that needs to be done in the future to update and iterate on our diagrams if you have any interest! Let us know and can be in touch, cc: @nloureiro

[LauraSinisterra]

Great! Yes, I'm interested in continue collaborating on this, in particular would love to work on the diagram systems or any other diagram iterations. Let me know! @nloureiro @wackerow

[nloureiro]

Great! Yes, I'm interested in continue collaborating on this, in particular would love to work on the diagram systems or any other diagram iterations. Let me know! @nloureiro @wackerow

Oh, that would be great!!!

Do you think we can improve the diagrams that we have now? Or create new ones?

[LauraSinisterra]

We can improve on the existing diagrams but if there is a new theme maybe this is a good opportunity to create a new diagram system.

[nloureiro]

We can improve on the existing diagrams but if there is a new theme maybe this is a good opportunity to create a new diagram system.

I agree that we should update the diagram system.
Would you be up to it? It's quite a lot of work.

[LauraSinisterra]

Yes, it is a lot of work. I'm up for it as long as there isn't a set deadline, I can work bit by bit.

[nloureiro]

Yes, it is a lot of work. I'm up for it as long as there isn't a set deadline, I can work bit by bit.

for sure, I think we can work with that and I can help too.
how do see us moving forward?

[LauraSinisterra]

It would be great to have a closer collaboration for this, what are you thinking?

[nloureiro]

It would be great to have a closer collaboration for this, what are you thinking?

I will open a new issue on github to track the task and create a new Figma file that we can both edit.

Form there, I will let you lead the file at your own pace. How does it sound?

[LauraSinisterra]

Sure! Sounds great.

[nloureiro]

Sure! Sounds great.

Let's go!!!
#14154

let me know on the issue if this makes sense or you have any other ideas