Main page: Revamped wallet comparison table

[polymutex]

The current wallet comparison table is powered by MUI's Data Grid component, which is very versatile but that we may eventually exceed the capabilities of.

As I see it, Walletbeat's main wallet comparison table can already do the following and these features should be preserved:

• Show basic wallet information: wallet name, icon, platforms
• Support wallet platform selection (mobile/desktop/web, perhaps there may be more in the future)
• Have interactive pie-chart-type ratings for all attribute groups that make sense; note that the pie charts may be different across wallets because some will be exempt from some attributes.
• Support having an "expanded view" for each row, which still fits enough data on mobile phone screens for at least two wallets and provides a useful wallet comparison view

Things the wallet table does not yet do but ought to:

• Support filtering wallets by criteria, such as by profile and platform (example: "I only want to see payments-focused wallets that run on mobile")
• Have room for a per-wallet "letter grade" rating that summarizes all the ratings it has
• Partial rendering (don't render the entire table, only what's in view and some rows before/after).
• If the wallet data takes a while to load, make it possible to show some feedback that data is loading in the table.
• Better appearance and readability on phone-sized screens. Ideally without horizontal scrolling somehow, but if there is horizontal scrolling, the wallet title should remain visible instead of scrolling away from view.

I'm not sure what the ultimate table looks like, so we probably need some mockups before moving on to implementation here.

[nuconomy]

+1 for filter

[polymutex]

Here's an idea.

Currently the table has columns for each attribute group: Security, Privacy, Self-sovereignty, Transparency, Ecosystem. Notice that there are five of these, this will become relevant later.

One thing that L2BEAT does really well is the idea of "stages" for decentralization. It's a cool concept because it conveys a sense of direction for the ecosystem, and a sense of progress for individual L2s. It's also very easy to communicate, as this tweet puts very succinctly: "Rollups, please proceed to Stage 2".

I think it would be great to have a similar system for Walletbeat, but unfortunately there's just too many orthogonal attributes to really synthesize all of them as a whole. My initial idea was to have per-attribute-group levels, i.e. a security level, a privacy level, etc. And then perhaps those can be aggregated into a letter grade from A to F or similar. But that still feels difficult to communicate compared to the simplicity of stages.

I've been browsing L2BEAT and another similar site I've recently found out about: DeFiScan. They both use a simple pie chart and they both have exactly 5 pie chart slices. Then it hit me: wait, we also have exactly 5 things, it's just that we call them "attribute groups".

Refocusing the pie chart on attribute groups rather than attributes solves all of the following problems at once:

• "Stages" become obvious: Get more green slices to progress.
• Ease of communication
• Ease of aggregation of ratings
• Mobile phone view becomes totally feasible, because there's just one pie chart per wallet row

The only complexity this adds is a per-attribute-group aggregation function (taking as input the per-attribute scores and aggregating that into a per-attribute-group overall rating), but that seems like a much easier problem to solve. Then the stage can be based off the 5 per-attribute-group ratings, also very easy to solve.

And once we frame the data this way, I think this also answers the question of how the wallet comparison table can be rendered in a more compact and elegant way. If you'll excuse my laziness to learn how to Figma and accept crappy scribblings, here what it could look like.

• Instead of one column per attribute group, the table headers now become: Wallet, Stage, Ratings, and Details. That's it.

• Initially, the table looks something like this: The wallet name part is mostly unchanged, but right after it comes the Stage in a "badge" style (again similar to L2BEAT and DeFiScan). Then comes the pie chart, which looks like the L2BEAT/DeFiScan charts (and lo, it's exactly 5 pie slices too! What a coincidence.)

• When hovering over one of the pie chart slices, the hover effect applies similar to today, the label over the pie chart updates to show the name of the attribute group ("Privacy" here), and the mouse cursor changes to the same as it would when hovering a link to show that the chart is clickable.

• When a pie chart slice is clicked, the following happens.

  • The non-clicked slices shrink in size and radii, fade out a bit, and move to the leftmost 240 degrees of the chart. However they remain clickable.
  • The clicked slice grows in angle to 120 degrees, grows in radius, and moves to the rightmost 120 degrees of the chart.
  • The text on the right of the pie chart is changed to be about the attribute group.
  • The fill color of the clicked pie slice fades in saturation.
  • New inner pie slices appear, similar to what it looks like if you slice an orange fruit. Each such "inner slice" corresponds to an attribute within the attribute group.

• The inner pie slices have hover effect, but do not change the text above the pie chart, nor the text on the right of the pie chart.

• When clicked, the inner pie slice grows in radius within the outer slice it is in, while the non-clicked inner pie slices shrink in radius (and maybe fade out a bit). The label above the pie chart is updated to reflect the title of the attribute, and the contents on the right is updated to be about the attribute specifically.

• Clicking anywhere in the "blank" area around the pie chart resets its state to initial.

Notice that this also probably removes the need for having an "expanded" view at all. Each row probably needs to be a bit taller to accommodate the larger pie chart than it does today, but it doesn't need to grow when clicked. Alternatively, the pie chart itself could grow in size with the row whenever an attribute group is clicked.

[PatrickAlphaC]

Nice. I was actually just thinking about how the pie charts don't really convey what is important. Like if a wallet has everything, but keeps getting hacked every other week, it's probably not a good project. That would be a really important factor to keep in mind when choosing a wallet.