load orderbook for market

components/DepositModal.tsx

@@ -100,11 +100,11 @@ const DepositModal = ({ isOpen, onClose }) => {
         Number(inputAmount)
       )
         .then(async (_response: string) => {
-          await sleep(1000)
-          actions.fetchWalletBalances()
-          actions.fetchMarginAccounts()
           setSubmitting(false)
           onClose()
+          await sleep(750)
+          actions.fetchWalletBalances()
+          actions.fetchMarginAccounts()
         })
         .catch((err) => {
           setSubmitting(false)

hooks/useHydrateStore.tsx

@@ -1,6 +1,6 @@
 import { useEffect } from 'react'
 import { Market } from '@project-serum/serum'
-import { AccountInfo } from '@solana/web3.js'
+import { AccountInfo, PublicKey } from '@solana/web3.js'
 import useConnection from './useConnection'
 import useMangoStore from '../stores/useMangoStore'
 import useSerumStore from '../stores/useSerumStore'
@@ -12,14 +12,16 @@ const _SLOW_REFRESH_INTERVAL = 60 * SECONDS
 
 const mangoGroupMarketsSelector = (s) => s.selectedMangoGroup.markets
 const websocketConnectionSelector = (s) => s.connection.websocket
+const selectedMarketAddressSelector = (s) => s.selectedMarket.address
 
 const useHydrateStore = () => {
   const setMangoStore = useMangoStore((s) => s.set)
   const setSerumStore = useSerumStore((s) => s.set)
   const marketsForSelectedMangoGroup = useMangoStore(mangoGroupMarketsSelector)
   const websocketConnection = useMangoStore(websocketConnectionSelector)
+  const selectedMarketAddress = useMangoStore(selectedMarketAddressSelector)
   const actions = useMangoStore((s) => s.actions)
-  const { connection } = useConnection()
+  const { connection, dexProgramId } = useConnection()
   const { marketList } = useMarketList()
 
   useEffect(() => {
@@ -31,6 +33,35 @@ const useHydrateStore = () => {
     actions.fetchMangoGroup()
   }, 60 * SECONDS)
 
+  // load the selected market and orderbook
+  useEffect(() => {
+    Market.load(
+      connection,
+      new PublicKey(selectedMarketAddress),
+      {},
+      new PublicKey(dexProgramId)
+    )
+      .then(async (market) => {
+        const bidAccount = market['_decoded'].bids
+        const bidInfo = await connection.getAccountInfo(bidAccount)
+        const askAccount = market['_decoded'].asks
+        const askInfo = await connection.getAccountInfo(askAccount)
+
+        setMangoStore((state) => {
+          state.selectedMarket.current = market
+          state.accountInfos[askAccount.toString()] = askInfo
+          state.accountInfos[bidAccount.toString()] = bidInfo
+        })
+      })
+      .catch((e) => {
+        console.log({
+          message: 'Error loading market',
+          description: e.message,
+          type: 'error',
+        })
+      })
+  }, [selectedMarketAddress])
+
   // load all markets for mangoGroup
   useEffect(() => {
     Promise.all(

hooks/useWallet.tsx

@@ -9,6 +9,7 @@ import {
 } from '../utils/wallet-adapters'
 import { WalletAdapter } from '../@types/types'
 import useInterval from './useInterval'
+import { sleep } from '@blockworks-foundation/mango-client'
 
 const SECONDS = 1000
 const ASSET_URL =
@@ -105,6 +106,7 @@ export default function useWallet() {
           '...' +
           wallet.publicKey.toString().substr(-5),
       })
+      sleep(500)
       // wait for margin account before fetching trade history
       await actions.fetchMarginAccounts()
       actions.fetchWalletBalances()