feat: add Orderbook page and Orderbook UI (#449)

* feat: add Orderbook page to app routes and Header

* feat: add Orderbook page layout

* feat: add orderbook navigation buttons

* feat: add rest of OrderbookHeader layout

* feat: add price Stat column

* feat: add volume Stat column

* feat: add price high/low Stat columns

* fix: align not defined tokens columns better

* feat: allow TokenPicker button to have a custom body

* feat: style token pair selection buttons

* feat: reduce default padding for cards on Orderbook page

* feat: update pool overview navigate "Trade" to orderbook

* refactor: abstract out fetching Transaction table data

* refactor: abstract out useTransactionTableData to its own file

* feat: add OrderbookFooter

* feat: show only current pair data for now

* feat: restrict Orderbook transactions to the user's orders

* feat: add table columns

* feat: add better placeholder names

* feat: add Apex Charts dependency

* feat: add price chart

* feat: ensure chart is not too tall to read easily

* refactor: rename Liquidity components

* feat: change Orderbook page main row to be height of its cards:

    - so that it may be the height of the liquidity list card

* feat: add Orderbook Liqduidity List card

* refactor: abstract out sorted tokenTick arrays

* refactor: abstract out OrderbookListRow component

* feat: add styling for tick reserve changes between blocks

* refactor: abstract out cell with amount difference styling

* feat: add styling for current price changes between blocks

* feat: style Orderbook List cell spacing

* feat: add page-card-border CSS var

* refactor: size OrderbookList spacings with standard padding sizes

* feat: add new TabsCard component

* feat: style OrderbookList tabs with TabsCard component

* feat: align column numbers correctly

* feat: make decimal places of columns consistent

* feat: display Orderbook list amount in USD equivalent value

* feat: simplify formatting to specific number of decimal places

* feat: round price to decimal places determined by the current price

* feat: allow get amount functions to have optional address matching

* feat: add OrderbookTradesList

* feat: improve spacing of Orderbook lists

* feat: allow Orderbook transaction list to show trade date if relevant

* feat: allow both lists to have the same first row padding

* feat: Add LimitOrderCard component with TabsCard

* feat: add specific LimitOrderCard styles

* feat: add LimitOrderType tab selection

* feat: add Buy/Sell button

* feat: add NumericInput row component

* feat: add NumericValue row component

* feat: improve spacing

* feat: add slider range UI

* feat: remove outline of output value

* feat: add Tooltips to LimitOrderCard

* feat: add Swap logic to LimitOrderCard

* feat: add router result (amount out) to LimitOrderCard

* feat: hook up percentage slider to user's wallet balance

* feat: add disabled stlye for range input component

* fix: range slider indicators are regularly spaced using flexbox

* feat: abstract out RangeListSliderInput component

* feat: set RangeListSliderInput value to be actual value:

    - and show indication for values then are in between step values

* feat: allow RangeListSliderInput to snap to list values

* feat: allow RangeListSliderInput to show any value and snap to list

* feat: allow RangeListSliderInput to show and snap to arbitrary values

* feat: add 10% to bank balance option

* feat: if bank max balance is a round number, display rounded value

* feat: space out form from tab better

* refactor: removed unneeded row classnames

* feat: move limit order total output to bottom non-input field

* feat: allow LimitOrder inputs to expand up to available width

    - from a small base

* feat: allow Drawer to act like a floating Dropdown

* feat: allow SelectInput to act like a floating Dropdown

* feat: connect LimitOrder options up to LimitOrderCard state

* feat: set default execution and timePeriod for LimitOrder forms

* feat: rename execution descriptions to be more understandable

* feat: hook up LimitOrder form values to LimitOrder request

* fix: allow LimitOrderCard to preserve order nav type between buy/sell

* feat: remove Stop Limit orders, they are not yet supported

* feat: add LimitOrder warning states

* feat: allow NumericInputRow to have a custom classname

* feat: hook up LimitOrder expiration time UI logic

* feat: add LimitOrder request error states

* fix: limit price needs to be converted to tick index for request

* fix: only immediate type orders can specify a maxAmountOut

* fix: in swap request validation some params may be undefined

* feat: allow decimal places in limit order fields

* feat: show available balances

* feat: show only the available balance for the buy mode

* feat: set tab index in separate context so buyMode change resets form

* feat: calculate correct token in/out in LimitOrder form

* feat: add course BuyMode LimitOrders using range of tokenIn

* fix: Swap page to use FILL_OR_KILL with validation fixes

* feat: remove temporary layout UI text

* feat: make TabCard tabs consistent in style

* feat: default limit order input fields to 0

* feat: hook up swap results to LimitOrder UI outputs

* fix: improved UI in empty token state

* fix: pass selected token in/out context to Orderbook UI components

* feat: add details to Orderbook Orders table

* feat: format Orderbook Orders table timestamps better

* feat: add price bucket resolving to Orderbook list

* feat: adjust number and size of orderbook list rows

* fix: add some incomplete fixes and todo notes

* feat: add previous value states for Orderbook list diff colors

package.json

@@ -34,12 +34,14 @@
     "@visx/scale": "^3.0.0",
     "@visx/shape": "^3.0.0",
     "@visx/tooltip": "^3.1.2",
+    "apexcharts": "^3.42.0",
     "bignumber.js": "^9.0.2",
     "buffer": "^6.0.3",
     "chain-registry": "^1.15.0",
     "invariant": "^2.2.4",
     "long": "^5.2.3",
     "react": "^18.2.0",
+    "react-apexcharts": "^1.4.1",
     "react-app-polyfill": "^3.0.0",
     "react-dom": "^18.2.0",
     "react-hot-toast": "^2.4.0",

src/components/Drawer/Drawer.scss

@@ -5,8 +5,13 @@
   overflow: hidden;
   transition: height animations.$short-duration;
 
+  &.expanded {
+    overflow: visible;
+  }
+
   .drawer-panel {
     position: absolute;
     width: 100%;
+    transition: height animations.$short-duration;
   }
 }

src/components/Drawer/Drawer.tsx

@@ -5,28 +5,46 @@ export default function Drawer({
   expanded = false,
   className,
   containerClassName,
+  floating = false,
   children,
 }: {
   expanded: boolean;
   className?: string;
   containerClassName?: string;
+  floating?: boolean;
   children: React.ReactNode;
 }) {
   const contentRef = useRef<HTMLDivElement>(null);
+  const dynamicHeight =
+    expanded && contentRef.current ? contentRef.current.offsetHeight : 0;
 
   return (
     <div
-      className={['drawer', containerClassName].filter(Boolean).join(' ')}
-      style={{
-        height:
-          expanded && contentRef.current ? contentRef.current.offsetHeight : 0,
-      }}
+      className={[
+        'drawer',
+        containerClassName,
+        expanded && 'expanded',
+        floating && 'floating',
+      ]
+        .filter(Boolean)
+        .join(' ')}
+      style={
+        !floating
+          ? {
+              height: dynamicHeight,
+            }
+          : undefined
+      }
     >
       <div
-        ref={contentRef}
         className={['drawer-panel', className].filter(Boolean).join(' ')}
+        style={{
+          height: dynamicHeight,
+        }}
       >
-        {children}
+        <div className="drawer-content" ref={contentRef}>
+          {children}
+        </div>
       </div>
     </div>
   );

src/components/Header/Header.tsx

@@ -16,6 +16,7 @@ const keplrLogoURI =
 const pageLinkMap = {
   '/swap': 'Swap',
   '/pools': 'Pools',
+  '/orderbook': 'Orderbook',
   '/portfolio': 'Portfolio',
   '/bridge': 'Bridge',
 };

src/components/Liquidity/index.ts

@@ -0,0 +1 @@
+export * from './LiquiditySelector';