View AMM orders in the depth chart

[JonRay15]

Story

As a user I want to see the AMM depth on the depth chart So that I can see how this is augmenting the normal order book depth

Acceptance Criteria

• [ ] AMM depth is represented in the depth chart
• [ ] This can be an approximate depth defined using the AMM LP defitions only, not from the depth API as this will only provide the info over a tight range for performance reasons (see additional details)

Tasks

• [ ] UX (if needed)
• [ ] Design (if needed)
• [ ] Team and stakeholder review
• [ ] Specs reviewed and created or adjusted
• [ ] Implementation
• [ ] Testing (unit and/or e2e)
• [ ] Code review
• [ ] QA review

Sketch

Additional details / background info

Details to approxiate the AMM depth

Lets assume there are 3 AMM commitments on amarket

1. 100 USDT with a lower bound at $900 and upper bound $1100
2. 200 USDT with a lower bound at $700 and upper bound £1500
3. 500 USDT with a lower boudn at $800 and upper bound $1000

Rather than assume a curve which is accurate, we will just approximate each of these as a rectangle with a width denoted by the lower / upper and the height designated by the siize of the commitment.

If we simply plot these on top of each other we would have:

Or if we took the total at each level and represented as a bar chart rather than as 3 seperate bars we would have:

This is how I suggest we approximate AMM depth on the chart.

So we could show this as another coloured overlay on the main depth chart.... just as an outline if that is less likely to clash with the existing red / green depth.