connect perp market to websocket for orderbook

components/MangoAccountSelect.tsx

@@ -1,4 +1,4 @@
-import { MerpsAccount as MangoAccount } from '@blockworks-foundation/mango-client'
+import { MangoAccount } from '@blockworks-foundation/mango-client'
 import { useEffect, useState } from 'react'
 import useMangoStore from '../stores/useMangoStore'
 import Select from './Select'

components/Orderbook.tsx

@@ -95,8 +95,8 @@ const getCumulativeOrderbookSide = (
 export default function Orderbook({ depth = 8 }) {
   const groupConfig = useMangoStore((s) => s.selectedMangoGroup.config)
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
+  const orderbook = useMangoStore((s) => s.selectedMarket.orderBook)
   const markPrice = useMarkPrice()
-  const orderbook = useOrderbook()
 
   const currentOrderbookData = useRef(null)
   const lastOrderbookData = useRef(null)

components/TradeForm.tsx

@@ -219,7 +219,7 @@ export default function TradeForm() {
         mangoClient.placeSpotOrder(
           mangoGroup,
           mangoAccount,
-          mangoGroup.merpsCache,
+          mangoGroup.mangoCache,
           market,
           wallet,
           side,
@@ -231,7 +231,7 @@ export default function TradeForm() {
         mangoClient.placePerpOrder(
           mangoGroup,
           mangoAccount,
-          mangoGroup.merpsCache,
+          mangoGroup.mangoCache,
           market,
           wallet,
           side,

hooks/useHydrateStore.tsx

@@ -5,7 +5,7 @@ import useMangoStore, {
   WEBSOCKET_CONNECTION,
 } from '../stores/useMangoStore'
 import useInterval from './useInterval'
-import { Market } from '@project-serum/serum'
+import useOrderbook from './useOrderbook'
 
 const SECONDS = 1000
 const _SLOW_REFRESH_INTERVAL = 5 * SECONDS
@@ -16,6 +16,7 @@ const useHydrateStore = () => {
   const markets = useMangoStore((s) => s.selectedMangoGroup.markets)
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
   const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
+  useOrderbook()
 
   useEffect(() => {
     actions.fetchMangoGroup()
@@ -35,10 +36,10 @@ const useHydrateStore = () => {
   useEffect(() => {
     let previousBidInfo: AccountInfo<Buffer> | null = null
     let previousAskInfo: AccountInfo<Buffer> | null = null
-    if (!selectedMarket || marketConfig.kind !== 'spot') return
+    if (!marketConfig) return
 
     const bidSubscriptionId = WEBSOCKET_CONNECTION.onAccountChange(
-      selectedMarket['_decoded'].bids,
+      marketConfig.bidsKey,
       (info) => {
         console.log('bid websocket')
         if (
@@ -48,14 +49,14 @@ const useHydrateStore = () => {
         ) {
           previousBidInfo = info
           setMangoStore((state) => {
-            const pkString = selectedMarket['_decoded'].bids.toString()
-            state.accountInfos[pkString] = previousBidInfo
+            state.accountInfos[marketConfig.bidsKey.toString()] =
+              previousBidInfo
           })
         }
       }
     )
     const askSubscriptionId = WEBSOCKET_CONNECTION.onAccountChange(
-      selectedMarket['_decoded'].asks,
+      marketConfig.asksKey,
       (info) => {
         console.log('ask websocket')
         if (
@@ -65,8 +66,8 @@ const useHydrateStore = () => {
         ) {
           previousAskInfo = info
           setMangoStore((state) => {
-            const pkString = selectedMarket['_decoded'].asks.toString()
-            state.accountInfos[pkString] = previousAskInfo
+            state.accountInfos[marketConfig.asksKey.toString()] =
+              previousAskInfo
           })
         }
       }
@@ -91,7 +92,7 @@ const useHydrateStore = () => {
           DEFAULT_CONNECTION,
           10000
         )
-        console.log('loadedFills', loadedFills)
+        // console.log('loadedFills', loadedFills)
 
         // setMangoStore((state) => {
         //   state.selectedMarket.fills = loadedFills

hooks/useMarkPrice.tsx

@@ -1,6 +1,5 @@
 import { useEffect } from 'react'
 import useMangoStore from '../stores/useMangoStore'
-import useOrderbook from './useOrderbook'
 
 export function useTrades() {
   const trades = useMangoStore((state) => state.selectedMarket.fills)
@@ -19,8 +18,8 @@ export function useTrades() {
 export default function useMarkPrice() {
   const setMangoStore = useMangoStore((s) => s.set)
   const markPrice = useMangoStore((s) => s.selectedMarket.markPrice)
+  const orderbook = useMangoStore((s) => s.selectedMarket.orderBook)
 
-  const orderbook = useOrderbook()
   const trades = useTrades()
 
   useEffect(() => {

hooks/useOpenOrders.tsx

@@ -5,7 +5,7 @@ import {
   getMarketByPublicKey,
   MarketConfig,
   PerpMarket,
-  MerpsAccount as MangoAccount,
+  MangoAccount,
 } from '@blockworks-foundation/mango-client'
 import { Market, Orderbook } from '@project-serum/serum'
 import { Order } from '@project-serum/serum/lib/market'

hooks/useOrderbook.tsx

@@ -26,14 +26,20 @@ function decodeBook(market, accInfo: AccountInfo<Buffer>): number[][] {
         market,
         BookSideLayout.decode(accInfo.data)
       )
-      return book.getL2(depth).map(([price, size]) => [price, size])
+      console.log('book', book)
+      const x = book.getL2(depth).map(([price, size]) => [price, size])
+      console.log('getL2', x)
+
+      return x
     }
   } else {
     return []
   }
 }
 
-export default function useOrderbook(): Orderbook {
+export default function useOrderbook() {
+  console.log('useOrderbook')
+
   const setMangoStore = useMangoStore((s) => s.set)
   const market = useMangoStore((state) => state.selectedMarket.current)
   const marketConfig = useMangoStore((state) => state.selectedMarket.config)
@@ -44,14 +50,13 @@ export default function useOrderbook(): Orderbook {
     (state) => state.accountInfos[marketConfig.bidsKey.toString()]
   )
 
-  const bids = useMemo(() => decodeBook(market, bidInfo), [bidInfo, market])
-  const asks = useMemo(() => decodeBook(market, askInfo), [askInfo, market])
-
   useEffect(() => {
+    const bids = decodeBook(market, bidInfo)
+    const asks = decodeBook(market, askInfo)
+    console.log('bids asks', bids, asks)
+
     setMangoStore((state) => {
       state.selectedMarket.orderBook = { bids, asks }
     })
-  }, [bids, asks, setMangoStore])
-
-  return { bids, asks }
+  }, [market, bidInfo, askInfo, setMangoStore])
 }

utils/mango.tsx

@@ -16,11 +16,11 @@ export async function deposit({
 
   let newMangoAccount
   if (!mangoAccount) {
-    const mangoAccountPk = await mangoClient.initMerpsAccount(
+    const mangoAccountPk = await mangoClient.initMangoAccount(
       mangoGroup,
       wallet
     )
-    newMangoAccount = await mangoClient.getMerpsAccount(
+    newMangoAccount = await mangoClient.getMangoAccount(
       mangoAccountPk,
       mangoGroup.dexProgramId
     )