store openOrders in zustand

components/CloseAccountModal.tsx

@@ -23,7 +23,6 @@ import {
   ZERO_I80F48,
 } from '@blockworks-foundation/mango-client'
 import usePerpPositions from '../hooks/usePerpPositions'
-import { useOpenOrders } from '../hooks/useOpenOrders'
 import { formatUsdValue } from '../utils'
 
 interface CloseAccountModalProps {
@@ -48,7 +47,7 @@ const CloseAccountModal: FunctionComponent<CloseAccountModalProps> = ({
   const actions = useMangoStore((s) => s.actions)
   const connection = useMangoStore((s) => s.connection.current)
   const client = useMangoStore((s) => s.connection.client)
-  const openOrders = useOpenOrders()
+  const openOrders = useMangoStore((s) => s.selectedMangoAccount.openOrders)
   const setMangoStore = useMangoStore((s) => s.set)
 
   const fetchTotalAccountSOL = useCallback(async () => {

components/OpenOrdersTable.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react'
 import { PencilIcon, TrashIcon, XIcon } from '@heroicons/react/outline'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
-import { useOpenOrders } from '../hooks/useOpenOrders'
 import Button, { IconButton } from './Button'
 import Loading from './Loading'
 import useMangoStore from '../stores/useMangoStore'
@@ -139,14 +138,14 @@ const DesktopTable = ({
                       {!order.perpTrigger ? (
                         <Button
                           onClick={() => showEditOrderForm(index, order)}
-                          className="text-xs pt-0 pb-0 h-8 pl-3 pr-3"
+                          className="text-xs -my-1 pt-0 pb-0 h-8 pl-3 pr-3"
                         >
                           {t('edit')}
                         </Button>
                       ) : null}
                       <Button
                         onClick={() => handleCancelOrder(order, market.account)}
-                        className="text-xs pt-0 pb-0 h-8 pl-3 pr-3"
+                        className="text-xs -my-1 pt-0 pb-0 h-8 pl-3 pr-3"
                       >
                         {cancelledOrderId + '' === order.orderId + '' ? (
                           <Loading />
@@ -332,7 +331,7 @@ const MobileTable = ({
 const OpenOrdersTable = () => {
   const { t } = useTranslation('common')
   const { asPath } = useRouter()
-  const openOrders = useOpenOrders()
+  const openOrders = useMangoStore((s) => s.selectedMangoAccount.openOrders)
   const [cancelId, setCancelId] = useState(null)
   const [modifyId, setModifyId] = useState(null)
   const [editOrderIndex, setEditOrderIndex] = useState(null)

components/Orderbook.tsx

@@ -1,5 +1,6 @@
 import React, { useRef, useEffect, useState } from 'react'
 import Big from 'big.js'
+import { isEqual as isArrayEqual } from 'lodash'
 import useInterval from '../hooks/useInterval'
 import usePrevious from '../hooks/usePrevious'
 import { isEqual, getDecimalCount, usdFormatter } from '../utils/'
@@ -14,7 +15,6 @@ import { ElementTitle } from './styles'
 import useMangoStore from '../stores/useMangoStore'
 import Tooltip from './Tooltip'
 import GroupSize from './GroupSize'
-import { useOpenOrders } from '../hooks/useOpenOrders'
 import { useViewport } from '../hooks/useViewport'
 import { breakpoints } from './TradePageGrid'
 import {
@@ -124,10 +124,7 @@ export default function Orderbook({ depth = 8 }) {
   const orderbook = useMangoStore(orderbookSelector)
   const market = useMangoStore(marketSelector)
   const markPrice = useMarkPrice()
-  const openOrders = useOpenOrders()
-  const openOrderPrices = openOrders?.length
-    ? openOrders.map(({ order }) => order.price)
-    : []
+
   const { width } = useViewport()
   const isMobile = width ? width < breakpoints.sm : false
 
@@ -135,6 +132,7 @@ export default function Orderbook({ depth = 8 }) {
   const lastOrderbookData = useRef(null)
   const previousDepth = usePrevious(depth)
 
+  const [openOrderPrices, setOpenOrderPrices] = useState([])
   const [orderbookData, setOrderbookData] = useState(null)
   const [defaultLayout, setDefaultLayout] = useState(true)
   const [displayCumulativeSize, setDisplayCumulativeSize] = useState(false)
@@ -157,6 +155,17 @@ export default function Orderbook({ depth = 8 }) {
       previousDepth !== depth ||
       previousGrouping !== grouping
     ) {
+      // check if user has open orders so we can highlight them on orderbook
+      const openOrders =
+        useMangoStore.getState().selectedMangoAccount.openOrders
+      const newOpenOrderPrices = openOrders?.length
+        ? openOrders.map(({ order }) => order.price)
+        : []
+      if (!isArrayEqual(newOpenOrderPrices, openOrderPrices)) {
+        setOpenOrderPrices(newOpenOrderPrices)
+      }
+
+      // updated orderbook data
       const bids = groupBy(orderbook?.bids, market, grouping, true) || []
       const asks = groupBy(orderbook?.asks, market, grouping, false) || []
 

components/TradingView/index.tsx

@@ -10,7 +10,6 @@ import { CHART_DATA_FEED } from '../../utils/chartDataConnector'
 import useMangoStore from '../../stores/useMangoStore'
 import { useViewport } from '../../hooks/useViewport'
 import { breakpoints } from '../TradePageGrid'
-import { useOpenOrders } from '../../hooks/useOpenOrders'
 import { Order, Market } from '@project-serum/serum/lib/market'
 import { PerpOrder, PerpMarket } from '@blockworks-foundation/mango-client'
 import { notify } from '../../utils/notifications'
@@ -48,7 +47,7 @@ const TVChartContainer = () => {
   const isMobile = width ? width < breakpoints.sm : false
 
   const selectedMarketName = selectedMarketConfig.name
-  const openOrders = useOpenOrders()
+  const openOrders = useMangoStore((s) => s.selectedMangoAccount.openOrders)
   const actions = useMangoStore((s) => s.actions)
   const connected = useMangoStore((s) => s.wallet.connected)
   const mangoAccount = useMangoStore((s) => s.selectedMangoAccount.current)
@@ -332,8 +331,6 @@ const TVChartContainer = () => {
   }
 
   function getLine(order, market) {
-    console.log('order price', order.price)
-
     return tvWidgetRef.current
       .chart()
       .createOrderLine({ disableUndo: false })

components/UserInfo.tsx

@@ -1,12 +1,10 @@
 import { useEffect, useState } from 'react'
 import useMangoStore from '../stores/useMangoStore'
-import { useOpenOrders } from '../hooks/useOpenOrders'
 import usePerpPositions from '../hooks/usePerpPositions'
 import OpenOrdersTable from './OpenOrdersTable'
 import BalancesTable from './BalancesTable'
 import PositionsTable from './PerpPositionsTable'
 import TradeHistoryTable from './TradeHistoryTable'
-// import FeeDiscountsTable from './FeeDiscountsTable'
 import ManualRefresh from './ManualRefresh'
 import Tabs from './Tabs'
 import FeeDiscountsTable from './FeeDiscountsTable'
@@ -22,7 +20,9 @@ const TABS = [
 ]
 
 const UserInfoTabs = ({ activeTab, setActiveTab }) => {
-  const openOrders = useOpenOrders()
+  const totalOpenOrders = useMangoStore(
+    (s) => s.selectedMangoAccount.totalOpenOrders
+  )
   const { openPositions } = usePerpPositions()
   const { mangoAccount } = useMangoAccount()
 
@@ -36,9 +36,9 @@ const UserInfoTabs = ({ activeTab, setActiveTab }) => {
         activeTab={activeTab}
         onChange={handleTabChange}
         showCount={
-          openOrders && openPositions
+          totalOpenOrders > 0 && openPositions
             ? [
-                { tabName: 'Orders', count: openOrders.length },
+                { tabName: 'Orders', count: totalOpenOrders },
                 { tabName: 'Positions', count: openPositions.length },
               ]
             : null

hooks/useOpenOrders.tsx

@@ -1,3 +1,4 @@
+import { useEffect, useMemo } from 'react'
 import {
   PerpOrder,
   BookSide,
@@ -113,22 +114,34 @@ export function useOpenOrders() {
   const mangoGroup = useMangoStore(mangoGroupSelector)
   const groupConfig = useMangoStore(mangoGroupConfigSelector)
   const accountInfos = useMangoStore(accountInfosSelector)
+  const setMangoStore = useMangoStore((s) => s.set)
 
-  if (!mangoGroup || !mangoAccount || !accountInfos) return null
+  const openOrders = useMemo(() => {
+    if (!mangoGroup || !mangoAccount || !accountInfos) return []
 
-  const openOrders = Object.entries(markets).map(([address, market]) => {
-    const marketConfig = getMarketByPublicKey(groupConfig, address)
-    if (market instanceof Market) {
-      return parseSpotOrders(market, marketConfig, mangoAccount, accountInfos)
-    } else if (market instanceof PerpMarket) {
-      return parsePerpOpenOrders(
-        market,
-        marketConfig,
-        mangoAccount,
-        accountInfos
-      )
+    const openOrders = Object.entries(markets).map(([address, market]) => {
+      const marketConfig = getMarketByPublicKey(groupConfig, address)
+      if (market instanceof Market) {
+        return parseSpotOrders(market, marketConfig, mangoAccount, accountInfos)
+      } else if (market instanceof PerpMarket) {
+        return parsePerpOpenOrders(
+          market,
+          marketConfig,
+          mangoAccount,
+          accountInfos
+        )
+      }
+    })
+
+    return openOrders.flat()
+  }, [markets, accountInfos, mangoAccount])
+
+  useEffect(() => {
+    if (mangoGroup && mangoAccount) {
+      setMangoStore((state) => {
+        state.selectedMangoAccount.openOrders = openOrders
+        state.selectedMangoAccount.totalOpenOrders = openOrders.length
+      })
     }
   })
-
-  return openOrders.flat()
 }

pages/_app.tsx

@@ -16,10 +16,12 @@ import BottomBar from '../components/mobile/BottomBar'
 import { appWithTranslation } from 'next-i18next'
 import ErrorBoundary from '../components/ErrorBoundary'
 import GlobalNotification from '../components/GlobalNotification'
+import { useOpenOrders } from '../hooks/useOpenOrders'
 
 const MangoStoreUpdater = () => {
   useHydrateStore()
   useWallet()
+  useOpenOrders()
 
   return null
 }

stores/useMangoStore.tsx

@@ -165,6 +165,8 @@ interface MangoStore extends State {
     initialLoad: boolean
     lastUpdatedAt: string
     lastSlot: number
+    openOrders: any[]
+    totalOpenOrders: number
   }
   tradeForm: {
     side: 'buy' | 'sell'
@@ -270,6 +272,8 @@ const useMangoStore = create<MangoStore>((set, get) => {
       initialLoad: true,
       lastUpdatedAt: '0',
       lastSlot: 0,
+      openOrders: [],
+      totalOpenOrders: 0,
     },
     tradeForm: {
       side: 'buy',