balancer / frontend-v3

Official UI application for the Balancer protocol.
https://balancer.fi
MIT License
7 stars 10 forks source link

Spike swap route visualization #1038

Open garethfuller opened 1 week ago

garethfuller commented 1 week ago

Use sankey diagrams from echarts to represent swap routes.

uiuxxx commented 1 week ago

This spike is to explore the concept of using Sankey diagrams for the swap route visualization.

We currently use e-charts, and they have a Sankey chart type:

https://echarts.apache.org/examples/en/index.html#chart-type-sankey

Designs:

For the most part, we should try to use the Sankey diagram out of the box, especially the shape of the curves.

I have provided some examples (in box like shapes for now). Ideally, this will utilize the e-chart Sankey chart curves out of the box in Production.

Image

More examples can be found here:

https://www.figma.com/design/stjMSRgYKmzmau9InfKbCh/V3-new-styles?node-id=7114-4986&t=poO1o8pW4Wx4KzGA-1