Swap execution sankey diagram

[grod220]

For any trading pair, we are able to query for the swap execution trace. It serves to display the pool routes that are expected for the specific swap.

Protos: https://buf.build/penumbra-zone/penumbra/docs/main:penumbra.core.component.dex.v1#penumbra.core.component.dex.v1.QueryService.SwapExecution

Add a "Show Execution" button to swap dialog that reveals a sankey diagram. Can also reference other defi apps like Sushi and Uniswap to see how they handle displaying expected routes.

Also, reference the pcli implementation for help: pcli q dex simulate-trade.

[hdevalence]

RPC example in Buf Studio: https://buf.build/studio/penumbra-zone/penumbra/main/penumbra.core.component.dex.v1.QueryService/SwapExecution?target=https%3A%2F%2Fgrpc.testnet.penumbra.zone&selectedProtocol=grpc-web&share=ZcsxCoAwDIVhXD1FyeygiIOO4gG8gUQatKBV2hSH0tF728yu733%2F8BaxVAp2MtvOMCjo%2BrZuoJKRHWpjtxmNy4%2B4PHpGJzAqwINH9DSRvU5JHybPS%2FAakvQZk9VCfzLcZMO5OoSUYSrTBw

~/c/p/penumbra3 ((v0.67.0)|✔) $ cargo run --release --bin pcli -- q dex swap-execution test_usd:penumbra --height 59301
    Finished release [optimized] target(s) in 0.32s
     Running `target/release/pcli q dex swap-execution 'test_usd:penumbra' --height 59301`
Scanning blocks from last sync height 59303 to latest height 59303
[0s] ██████████████████████████████████████████████████       0/0       0/s ETA: 0s
140000test_usd => 10363.576324penumbra via:
    Trace                                                                                     Subprice
    3704.83874test_usd =>                                                370.483874penumbra   10test_usd/1penumbra
    27434.03169test_usd =>                                               2743.403169penumbra  10test_usd/1penumbra
    15.551981466589444123test_usd =>     3.73246gn =>                    1.492984penumbra     10.416710069625290106test_usd/1penumbra
    129.26316776319901333test_usd =>     31.023031gn =>                  11.931935penumbra    10.83337847241030171test_usd/1penumbra
    129.587135779732415552test_usd =>    31.100783gn =>  31.023031gm =>  11.931935penumbra    10.860529811780940439test_usd/1penumbra
    126.842570177375739066test_usd =>    30.44209gn =>                   11.274848penumbra    11.250047023017582062test_usd/1penumbra
    127.16047150196459152test_usd =>     30.518386gn =>  30.44209gm =>   11.274848penumbra    11.278242642558426644test_usd/1penumbra
    81.134563060679419498test_usd =>     19.472214gn =>                  6.954362penumbra     11.66671551763906157test_usd/1penumbra
    26047.34766test_usd =>                                               2170.612305penumbra  12test_usd/1penumbra
    24058.679834test_usd =>                                              1718.477131penumbra  14test_usd/1penumbra
    22470.767472test_usd =>                                              1404.422967penumbra  16test_usd/1penumbra
    21163.721616test_usd =>                                              1175.762312penumbra  18test_usd/1penumbra
    14511.073098250459376911test_usd =>                                  725.553654penumbra   20.000000025153838419test_usd/1penumbra

[hdevalence]

Putting

 console.log(output);

into simulateSwapOutput shows the data we need to have in order to show the routes

[hdevalence]

I was recommended https://nivo.rocks/sankey/ as a library to use.

[grod220]

I think we need some more specific design direction on this one before we can begin.

So far, the clearest example I've seen of what we are trying to do this this:

It feels simple too. A sankey diagram of the equivalent would look like:

[hdevalence]

This should be a reusable component so that we can also add it to post-execution views — the Swap view when looking at my transaction should have a clickable button that will load the SwapExecution for that block from the RPC and display the actual (vs simulated) execution

[jessepinho]

From @turbocrime:

https://mermaid.js.org/syntax/sankey.html i like mermaid for graphing, it's like markdown for graphs github supports it in issues and there's simple rendering libs available