[solver-competition] Explorer: Show solver competition page

[anxolin]

As a user of the explorer,
I want to see the current state on the solving competition,
So I:

• Can understand better how the solvers compete to find the best solutions
• Can I can see if the solution has been already proposed, and if the transaction is being mined
• Can see the latest batches

I might be interested in showing some general stats on surplus

TBD:

• Mockups
• How can we explain the objective function, so is, well... objective?
• Can we link this to the rules of the game?
• Should we have a banner advertising on how to become a solver?

Additional details

Related to backend API proposal cowprotocol/services#187

[alongoni]

The following is a first draft to represent some data related to solver competitions:

1. "Solver competition" tab added on Transaction Details page
   

2. "Current auction" added on Solvers page.
   

cc @alfetopito @ramirotw

[elena-zh]

Hey @alongoni , great job!

I'm not sure about this, but I'd like to add some my proposals to the mock-ups.

1. I think, that the tab name should be in plural - Current auctions
   
2. Then, I think, it would be great to add a card/easy navigation to this page from the Home page, WDYT?
   
3. I also think it would be great to add a menu dropdown to the Solvers page to open Solvers table tabs directly
   
4. Maybe we should move 'Objective' to the left and display it under the Solutions table name?
   
5. Current auctions: maybe we should add an order status in each line (opened/filled)? And for the filled orders show a TX link with easy navigation to Solver competitions page? In order to accomodate all these additional columns to the table area we could reduce Date column, as an example. WDYT?

Again, I do not have a strong opinion on the items I listed. Let wait till the team reviews it.

Thanks!

[alfetopito]

Adding here what I mentioned during our sync call:

For a given settlement:

1. Take into account that there might be several orders matched. That means, many prices as well as many orders to display which wouldn't fit the regular design
2. Display also in the overview (abbreviated) call data with a copy button and link to tenderly simulation (if possible)
3. Make every solution row expandable, with the pertinent info: orders, prices, call data like in the overview
4. Link somehow in the object helper/somewhere else to the object function docs
5. Add units where it's reasonable: Fees (ETH), Cost (I assume ETH), Gas (I assume GWEI)

For Current auction:

1. Agustin/Ramiro proposed a toggle OR play/pause button to make page auto-update
2. Add to the type column a label: SWAP | LIMIT | LIQUITIY - not closed on this, feel free to experiment

[alongoni]

Design updated:

For a given settlement:


@alfetopito Can you give us more context regarding this comment :

Take into account that there might be several orders matched. That means, many prices as well as many orders to display which wouldn't fit the regular design

For Current auction (two variants to control the running updates):

[alongoni]

@alfetopito Maybe this design could work better when we have many orders:

[alongoni]

Design file: https://www.figma.com/file/Y7pY6gGH2Wss6qhJwVcDJk/CoW-Explorer-(migrated)?node-id=2905%3A4493

[elena-zh]

Closing for now: can be reopened when re-prioritized.