Fill in details for LP position page

[hdevalence]

The MVP code is now up, with a skeleton of the LP position page: https://dex-explorer.testnet-preview.penumbra.zone/lp/plpid1zh5ngkkhcnlzugaeztk74umu7r7ytq9ghurz6v25n6m7mzyzvruqa3fdve

Brainstorming an initial list of changes to fill in data:

Position Status Box

• [x] Styling for the position ID: this should be in a monospace font, with a copy button. Could be good to have a dedicated component for rendering position IDs that takes the proto and handles formatting internally.
• [x] Reuse the web frontend's ValueViewComponent to display token amounts if possible. This is blocked on being able to use those components from external applications, which might have some complexity
• [x] Use the Prax wallet registry to get Metadata by asset ID: https://github.com/prax-wallet/registry
• [x] Use no more than 6 significant figures for the price (e.g., 2.19450 instead of 2.194503208363691)

Timeline

The visual design language for the timeline is that the left-aligned boxes are actions by the user who controls the position, and the right-aligned boxes are actions by the DEX engine interacting with the position (currently this is just filling against it)

General thought on the "timeline"-ness: can we put explicit time markers on the side of the current content? Maybe putting block heights on one side and date time on the other, in a greyed out font that blends with the background?

User Actions

• [x] Position opening, corresponding to EventPositionOpen. This should show:
  • [x] The transaction hash that opened the position (with copy button). Later this could link out to another explorer but just being able to copy the tx hash is good for now.
  • [x] The initial reserves for the position
  • [x] The block height and time when the position was opened. As noted above this could maybe be beside / out the box.
• [ ] Position closing, corresponding to EventPositionClose. This should show:
  • [x] The transaction hash that closed the position (with copy button)
  • [x] The block height and time when the position was closed. As above this could be outside the box.
• [x] Position withdrawal, corresponding to EventPositionWithdraw. This should show:
  • [x] The transaction hash that closed the position (with copy button)
  • [x] Show the sequence number of the withdrawal -- in the state model, it's now possible to withdraw multiple times, if some future change to the protocol created a facility for adding more tokens to the reserves after the initial withdrawal. Currently this isn't done in the protocol or in the client software but multiple sequential withdrawals are possible and should be able to be rendered.
  • [x] Show the reserves withdrawn from the position
  • [x] The block height and time when the position was closed. As above this could be outside the box.

DEX Actions

There may be many, many executions connected to a particular position. It would be good to have some way to optionally collapse these, maybe using some heuristics.

One concrete suggestion: if there are more than 2*N executions, show only the first N and last N trades, with a vertical ellipsis in between (maybe also with a count of how many items are elided). Clicking on the ellipsis shows all of the intervening executions. The user can restore the collapsed view by refreshing the page. Then, set N = 1, so we only show the first and last trades, but have code where we could easily change to show more or less if we change our mind.

• [ ] Position execution, corresponding to EventPositionExecution. This should show:
  • [ ] The trade (A of X for B of Y) using reserves information in the event https://buf.build/penumbra-zone/penumbra/docs/main:penumbra.core.component.dex.v1#penumbra.core.component.dex.v1.EventPositionExecution
  • [x] The height and time when the execution happened. Note that a position can be executed against multiple times per block.
  • [ ] The context the execution happened in (swap X => Y in the context of a route W => Z), also available in the event

[philipjames44]

Additional TODO for tracking:

• [ ] It appears some LP views may show duplicate data items, investigate and resolve. Ex. https://dex-explorer.testnet.penumbra.zone/lp/plpid10yv7qrnrqjx3u9rdmrex8rcy2tavx5eaz480xh3dazjdtxxmcvjsj6rjwm

[hdevalence]

The EventPositionExecution events now include the previous reserves state (allowing complete trade display) as well as a context field with the end-to-end pair (allowing display of something like "while routing C -> D")