chore(orderbook): update orderbook to not be scrollable

[moo-onthelawn]

try #2 which is 100x simpler than my last thing I was trying cuz I think my brain was non functional the first round

Goal: To make the orderbook not scrollable (fixed height-ish) while still maintaining the reponsiveness of the screen sizing:

We still want the orderbook to grow when the height of the screen grows
We still want the whole page to fit on any (reasonably sized) screen without scrolling
We want the orderbook to be just large enough to show x rows, centered such that the price row is in the middle

Solution:

1. Calculate the approximate size of the div of the canvas orderbook
2. Calculate the number of rows we can render in this div
3. Recalculate when browser or div resizes (latter happens without browser resizing if we just zoom in/out) using resizeObserver

EDIT: used resizeObserver and things work way better now

Unrelated polish included in this PR

• Fix orderbook on TradeForm mobile view (changes here)

before	after

resizingWindow.mov

zoomInAndOut.mov

Things I did not do in this PR

• Add a 50x resolution (we currently have 0.1, 1, 10, 100) - happy to do so in follow up if we get feedback but didn't seem super necessary rn

---

Views

• forms/TradeForm
  • Changes to make orderbook look better on mobile view
• views/CanvasOrderbook
  • Rename maxRowsPerSide to rowsPerSide

Components

• VerticalPanel
  • Bulk of the logic
  • Adds a ref to the canvasOrderbook tab and use resizeObserver off of that to calculate the number of rows we can render without scrolling

Constants/Types

• constants/orderbook.ts
  • Add approximate pixel height of orderbook header for calculations on how many rows we can render

Hooks

• hooks/useDrawOrderbook

  • Not really any changes, just wrapped everything in useCallback and fixed up the useEffect dependencies
  • Updated windowResize listener to resizeObserver

• hooks/useCalculateOrderbookData

  • Rename maxRowsPerSide to rowsPerSide

---

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
v4-staging	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 27, 2024 0:44am
v4-testnet	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jul 27, 2024 0:44am

[linear]

CT-997 Condense orderbook view to not be scrollable

[tyleroooo]

one last thing - do we support IE? Looks like even latest internet explorer doesn't support this.

[moo-onthelawn]

checked in slack

tl;dr: nope (because you can't even connect a wallet on IE).
longer answer: stats show that none of our users use IE. Checked ResizeObserver on caniuse and seems like we should be safe outside of IE and OperaMini (the latter I think is fine since it's supported in Opera)

[tyleroooo]

Code looks good but please check with @jaredvu who was generally opposed to merging this last week iirc.