cowprotocol / cowswap

🐮 CowSwap: First CoW Protocol UI
https://swap.cow.fi/
GNU General Public License v3.0
116 stars 85 forks source link

Solvers page #3721

Open alongoni opened 2 years ago

alongoni commented 2 years ago

Description Create a Solvers page.

Data from:

Inspiration: https://dune.com/cowprotocol/GPv2-Solver-Info

alongoni commented 2 years ago

Here is the draft design for the solvers page. Transaction detail + solver name / environment UI_Explorer Solver List-1 Solvers UI_Explorer Solver List Solver detail page: e.g Quasimodo on Prod (Some cards are empty, but any suggestions are welcome) UI_Explorer Solver detail-1 Solver detail page: e.g. Quasimodo on Barn UI_Explorer Solver detail

cc @alfetopito @anxolin @ramirotw

elena-zh commented 2 years ago

Hey @alongoni , great job! Some minor notes from my side, but I'm not stick to them:

  1. Maybe we can move a solver info here to make it more noticeable on a Transaction details page? move it

  2. Then, I'd swap Address and Environment columns in these pages as it seems to me that the address info has more value than an environment swap columns the same

Btw, I'd love to see these screens in a mobile/tablet views

Thanks!

alfetopito commented 2 years ago

Hey @alongoni , great job! Some minor notes from my side, but I'm not stick to them:

1. Maybe we can move a solver info here to make it more noticeable on a Transaction details page?
   ![move it](https://user-images.githubusercontent.com/70885163/177958873-6a6dc251-52d1-45c5-93a7-efd8b37b9689.jpg)

On the other hand, I like it where it is :)

2. Then, I'd swap Address and Environment columns in these pages as it seems to me that the address info has more value than an environment
   ![swap columns](https://user-images.githubusercontent.com/70885163/177959250-721912ad-7c8d-434d-8c2b-cb4f5e62ccc6.jpg)
   ![the same](https://user-images.githubusercontent.com/70885163/177959253-3209569f-436c-4f7c-964b-c6c9ce766c2f.jpg)

I'm not sure. The environment is an identifier and almost feels like fits better with the name. Don't have a strong opinion, though

For the solvers page https://user-images.githubusercontent.com/622217/177876121-7acc534a-944d-414f-bde3-85ac19474f47.png

What about having the content in tabs?

For the solver details page https://user-images.githubusercontent.com/622217/177876127-2ac5ac21-2c95-442b-9936-fe8761cd211d.png We can have a card for total batches, active since

ramirotw commented 2 years ago

Also for the solver details page the current active status. We talked with @GabrielCamba yesterday about handling correctly the isSolver flag in the User entity. Right now we are not tracking active->inactive events, as well as the timestamp where the solver became active

alongoni commented 2 years ago

Thanks for the feedback Elena and Leandro!. Design updated + a Figma prototype Tx BV-_ MOBILE UI_Explorer Solver tx List UI_Explorer Solver List UI_Explorer Solver List batch UI_Explorer Solver detail 2 UI_Explorer Solver detail 1

alfetopito commented 2 years ago

Thanks Agustin. I left comments directly on the figma file

alongoni commented 2 years ago

design updated: Figma prototype

anxolin commented 2 years ago

Sorry for a late review of this great proposal.

In general i like the direction. I'll try to mention some thoughts I have:

  1. It's not clear to me how to access the solver page from the HOME page. What do you think if we change our menu and make it closer to CowSwap one (with dropdown). Then we can provide links to Sovers, Tokens, Markets, etc..

  2. I'm not sure we want to show the Environment. I raised some concerns internally. We can update on that at a later point.

  3. I feel for your settlement representation you have some missing info. We should have the total ETH cost of the settlement, the USD value of it, and the total volume in USD of the settlement. I don't see all this info in theGraph but Gabri already implement it in one of his PRs, so I would assume this is live super soon.

  4. Same as last point, but as an aggregation per solver. What's their total volume, total trades. There's room for more info, so probably nice to add.

  5. [good to have] Probably nice to add a list of logos of tokens involved, this way u get an idea not only the volume, but also the tokens. This is better than having the number of tokens. I would show the number only if it's more than 5 tokens or so, adding "+8 tokens" just to not have to make a huge list of tokens

  6. [not now] Not now, for the future, it would be great to have the surplus too. We don't have this data yet

  7. In the batch settlement detail view for Quasimodo, why there's a solver address there? if we see one solver, all settlements will have the same address.

  8. The settlement list, i like it very much, but I don't think we need the address there. If someone wants the address they can enter into the details of the solver. This link just takes space and make it more difficult to find the relevant one that would take you to the details.

  9. nit: "Solver detail" --> "Solver details"

  10. Missing logo to check in Etherscan as u do in the TX view

BONUS, i add some query i used to check some info. Although, as mentioned, this is not last version, all the cost/volumes are missing

https://thegraph.com/hosted-service/subgraph/cowprotocol/cow

{
  settlements(first: 1) {
    id
    txHash
    solver {
      address     
    }
    trades {      
        sellAmountUsd
      buyAmountUsd
      sellToken {symbol, address}
      buyToken {symbol, address}
      buyAmountUsd
    }
  }
}
alongoni commented 2 years ago

Thanks for the feedback @anxolin I've created a prototype with the new menu design (which includes the Solvers page).

Menu on mobile: Mnue - mobile Mnue - mobile-1

cc @ramirotw @alfetopito

alongoni commented 1 year ago

Design updated: https://www.figma.com/proto/Y7pY6gGH2Wss6qhJwVcDJk/CoW-Explorer-(migrated)?node-id=2654%3A3193&viewport=-1678%2C-2102%2C0.15&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=1425%3A1821

cc @anxolin @alfetopito @ramirotw @matextrem

elena-zh commented 1 year ago

Hey @alongoni , great job! Some questions from my side:

  1. In the Solvers table we write the 2nd word from a lower-case latter. Maybe we could do the same for the Settlements tab?
  2. It would be great to add a sorting arrow at the table's header to show a sort order
  3. Total volume appeared to be different in Active solvers and in Settlements tabs. Which one should be correct? Screenshot_1

Thank you!!

elena-zh commented 7 months ago

I have transferred issue in order not to loose mockups/discussions/etc.