Openbook V2

components/MangoProvider.tsx

@@ -184,15 +184,17 @@ const HydrateStore = () => {
 
         // don't fetch serum3OpenOrders if the slot is old
         if (context.slot > mangoStore.getState().mangoAccount.lastSlot) {
-          if (newMangoAccount.serum3Active().length > 0) {
-            await newMangoAccount.reloadSerum3OpenOrders(client)
-            // check again that the slot is still the most recent after the reloading open orders
-            if (context.slot > mangoStore.getState().mangoAccount.lastSlot) {
-              set((s) => {
-                s.mangoAccount.current = newMangoAccount
-                s.mangoAccount.lastSlot = context.slot
-              })
-            }
+          try {
+            await newMangoAccount.reloadAllOpenOrders(client)
+          } catch (e) {
+            console.error('error reloading open orders', e)
+          }
+          // check again that the slot is still the most recent after the reloading open orders
+          if (context.slot > mangoStore.getState().mangoAccount.lastSlot) {
+            set((s) => {
+              s.mangoAccount.current = newMangoAccount
+              s.mangoAccount.lastSlot = context.slot
+            })
           }
           actions.fetchOpenOrders()
         }
@@ -236,7 +238,7 @@ const ReadOnlyMangoAccount = () => {
         if (!readOnlyMangoAccount.group.equals(group.publicKey)) {
           throw 'Mango account not from current group'
         }
-        await readOnlyMangoAccount.reloadSerum3OpenOrders(client)
+        await readOnlyMangoAccount.reloadAllOpenOrders(client)
         set((state) => {
           state.mangoAccount.current = readOnlyMangoAccount
           state.mangoAccount.initialLoad = false

components/SideNav.tsx

@@ -153,6 +153,16 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
     return themeData.sideImagePath
   }, [mangoNfts, theme, themeData])
 
+  const healthRatio = useMemo(() => {
+    try {
+      if (!mangoAccount || !group) return 0
+      return mangoAccount.getHealthRatioUi(group, HealthType.maint)
+    } catch (e) {
+      console.error('error getting health ratio for account', e)
+      return 0
+    }
+  }, [mangoAccount])
+
   return (
     <>
       <div
@@ -315,7 +325,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
                   collapsed={false}
                   icon={<PerpIcon className="h-4 w-4" />}
                   title={t('perp')}
-                  pagePath="/trade?name=SOL-PERP"
+                  pagePath="/trade?name=BTC-PERP"
                   hideIconBg
                 />
                 <MenuItem
@@ -438,11 +448,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
               collapsed={collapsed}
               icon={
                 <HealthHeart
-                  health={
-                    group && mangoAccount
-                      ? mangoAccount.getHealthRatioUi(group, HealthType.maint)
-                      : 0
-                  }
+                  health={group && mangoAccount ? healthRatio : 0}
                   size={32}
                 />
               }

components/explore/RecentGainersLosers.tsx

@@ -2,7 +2,7 @@ import Change from '@components/shared/Change'
 import FormatNumericValue from '@components/shared/FormatNumericValue'
 import TokenLogo from '@components/shared/TokenLogo'
 import useListedMarketsWithMarketData, {
-  SerumMarketWithMarketData,
+  SpotMarketWithMarketData,
 } from 'hooks/useListedMarketsWithMarketData'
 import useMangoGroup from 'hooks/useMangoGroup'
 import { useRouter } from 'next/router'
@@ -29,7 +29,7 @@ dayjs.extend(relativeTime)
 
 export type BankWithMarketData = {
   bank: Bank
-  market: SerumMarketWithMarketData | undefined
+  market: SpotMarketWithMarketData | undefined
 }
 
 const CALLOUT_TILES_WRAPPER_CLASSES =
@@ -41,16 +41,16 @@ const RecentGainersLosers = () => {
   const { group } = useMangoGroup()
   const { banks } = useBanks()
   const {
-    serumMarketsWithData,
+    spotMarketsWithData,
     perpMarketsWithData,
     isLoading: loadingSerumMarkets,
   } = useListedMarketsWithMarketData()
   const groupLoaded = mangoStore((s) => s.groupLoaded)
 
   const banksWithMarketData = useMemo(() => {
-    if (!banks.length || !group || !serumMarketsWithData.length) return []
+    if (!banks.length || !group || !spotMarketsWithData.length) return []
     const banksWithMarketData = []
-    const usdcQuoteMarkets = serumMarketsWithData.filter(
+    const usdcQuoteMarkets = spotMarketsWithData.filter(
       (market) => market.quoteTokenIndex === 0,
     )
     for (const bank of banks) {
@@ -64,7 +64,7 @@ const RecentGainersLosers = () => {
       }
     }
     return banksWithMarketData
-  }, [banks, group, serumMarketsWithData])
+  }, [banks, group, spotMarketsWithData])
 
   const newlyListedMintInfo = useMemo(() => {
     if (!group) return []

components/explore/Spot.tsx

@@ -1,5 +1,5 @@
 import useListedMarketsWithMarketData, {
-  SerumMarketWithMarketData,
+  SpotMarketWithMarketData,
 } from 'hooks/useListedMarketsWithMarketData'
 import useMangoGroup from 'hooks/useMangoGroup'
 import { ChangeEvent, useMemo, useState } from 'react'
@@ -24,7 +24,7 @@ import { TOKEN_WATCHLIST_KEY } from 'utils/constants'
 
 export type BankWithMarketData = {
   bank: Bank
-  market: SerumMarketWithMarketData | undefined
+  market: SpotMarketWithMarketData | undefined
 }
 
 const generateSearchTerm = (item: BankWithMarketData, searchValue: string) => {
@@ -99,16 +99,16 @@ const Spot = () => {
   const { group } = useMangoGroup()
   const { banks } = useBanks()
   const { isDesktop } = useViewport()
-  const { serumMarketsWithData, isLoading: loadingMarketsData } =
+  const { spotMarketsWithData, isLoading: loadingMarketsData } =
     useListedMarketsWithMarketData()
   const [sortByKey, setSortByKey] = useState<AllowedKeys>('quote_volume_24h')
   const [search, setSearch] = useState('')
   const [showTableView, setShowTableView] = useState(true)
 
   const banksWithMarketData = useMemo(() => {
-    if (!banks.length || !group || !serumMarketsWithData.length) return []
+    if (!banks.length || !group || !spotMarketsWithData.length) return []
     const banksWithMarketData = []
-    const usdcQuoteMarkets = serumMarketsWithData.filter(
+    const usdcQuoteMarkets = spotMarketsWithData.filter(
       (market) => market.quoteTokenIndex === 0,
     )
     for (const bank of banks) {
@@ -122,7 +122,7 @@ const Spot = () => {
       }
     }
     return banksWithMarketData
-  }, [banks, group, serumMarketsWithData])
+  }, [banks, group, spotMarketsWithData])
 
   const sortedTokensToShow = useMemo(() => {
     if (!banksWithMarketData.length) return []

components/explore/SpotTable.tsx

@@ -28,7 +28,7 @@ import { useRouter } from 'next/router'
 import Decimal from 'decimal.js'
 import BankAmountWithValue from '@components/shared/BankAmountWithValue'
 import { BankWithMarketData } from './Spot'
-import { SerumMarketWithMarketData } from 'hooks/useListedMarketsWithMarketData'
+import { SpotMarketWithMarketData } from 'hooks/useListedMarketsWithMarketData'
 import Tooltip from '@components/shared/Tooltip'
 import TableTokenName from '@components/shared/TableTokenName'
 import { LinkButton } from '@components/shared/Button'
@@ -47,7 +47,7 @@ type TableData = {
   change: number
   depositRate: number
   tokenName: string
-  market: SerumMarketWithMarketData | undefined
+  market: SpotMarketWithMarketData | undefined
   price: number
   priceHistory: {
     price: number

components/governance/GovernancePageWrapper.tsx

@@ -20,20 +20,26 @@ const GovernancePageWrapper = ({
   const resetVoter = GovernanceStore((s) => s.resetVoter)
   const realm = GovernanceStore((s) => s.realm)
   const connection = mangoStore((s) => s.connection)
+  const isMainnet =
+    !connection.rpcEndpoint.includes('devnet') &&
+    !connection.rpcEndpoint.includes('testnet')
 
   useEffect(() => {
+    if (!isMainnet) return
     if (connection.rpcEndpoint) {
       initConnection(connection)
     }
   }, [connection.rpcEndpoint])
 
   useEffect(() => {
+    if (!isMainnet) return
     if (connectionContext?.endpoint && realm === null) {
       initRealm(connectionContext)
     }
   }, [connectionContext?.endpoint, realm === null])
 
   useEffect(() => {
+    if (!isMainnet) return
     if (
       publicKey?.toBase58() &&
       connectionContext?.endpoint &&

components/modals/CloseAccountModal.tsx

@@ -16,6 +16,7 @@ import useUnsettledPerpPositions from 'hooks/useUnsettledPerpPositions'
 import { getMultipleAccounts } from '@project-serum/anchor/dist/cjs/utils/rpc'
 import { formatCurrencyValue } from 'utils/numbers'
 import TopBarStore from '@store/topBarStore'
+import { OpenOrders } from '@project-serum/serum'
 
 const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
   const { t } = useTranslation(['close-account'])
@@ -84,9 +85,14 @@ const CloseAccountModal = ({ isOpen, onClose }: ModalProps) => {
     if (!mangoAccount?.current) {
       return
     }
+    // TODO: add openbook v2 support
+    // difficult bc. we are not directly storing the addresses
+    // but only parsed account data
     const accountKeys = [
       mangoAccount.current!.publicKey,
-      ...mangoAccount.openOrderAccounts.map((x) => x.address),
+      ...mangoAccount.openOrderAccounts
+        .filter((oo) => oo instanceof OpenOrders)
+        .map((x) => (x as OpenOrders).address),
     ]
     const accounts = await getMultipleAccounts(connection, accountKeys)
     const lamports =

components/modals/DashboardSuggestedValuesModal.tsx

@@ -16,7 +16,7 @@ import {
   toUiDecimals,
 } from '@blockworks-foundation/mango-v4'
 import { AccountMeta, Transaction } from '@solana/web3.js'
-import { BN } from '@project-serum/anchor'
+import { BN } from '@coral-xyz/anchor'
 import {
   MANGO_DAO_WALLET,
   MANGO_DAO_WALLET_GOVERNANCE,

components/modals/MangoAccountsListModal.tsx

@@ -121,10 +121,13 @@ const MangoAccountsListModal = ({
                     toUiDecimalsForQuote(Number(acc.getEquity(group!))),
                     2,
                   )
-                  const maintHealth = acc.getHealthRatioUi(
-                    group!,
-                    HealthType.maint,
-                  )
+                  let maintHealth
+                  try {
+                    maintHealth = acc.getHealthRatioUi(group!, HealthType.maint)
+                  } catch (e) {
+                    console.error('error getting maint health for account', e)
+                    maintHealth = 0
+                  }
                   return (
                     <div
                       className="flex h-16 w-full items-center text-th-fgd-1"

components/modals/ModifyTvOrderModal.tsx

@@ -13,12 +13,12 @@ import {
   Serum3SelfTradeBehavior,
   Serum3Side,
 } from '@blockworks-foundation/mango-v4'
-import mangoStore from '@store/mangoStore'
+import mangoStore, { OpenbookOrder } from '@store/mangoStore'
 import { PublicKey } from '@solana/web3.js'
 import { notify } from 'utils/notifications'
 import { isMangoError } from 'types'
 import Button, { LinkButton } from '@components/shared/Button'
-import { findSerum3MarketPkInOpenOrders } from '@components/trade/OpenOrders'
+import { findSpotMarketPkInOpenOrders } from '@components/trade/OpenOrders'
 import useSelectedMarket from 'hooks/useSelectedMarket'
 import {
   floorToDecimal,
@@ -36,7 +36,7 @@ import SideBadge from '@components/shared/SideBadge'
 import { ArrowRightIcon } from '@heroicons/react/20/solid'
 
 interface ModifyModalProps {
-  order: Order | PerpOrder
+  order: Order | PerpOrder | OpenbookOrder
   price: string
 }
 
@@ -74,7 +74,7 @@ const ModifyTvOrderModal = ({
   }, [serumOrPerpMarket])
 
   const modifyOrder = useCallback(
-    async (o: PerpOrder | Order) => {
+    async (o: PerpOrder | Order | OpenbookOrder) => {
       const client = mangoStore.getState().client
       const group = mangoStore.getState().group
       const mangoAccount = mangoStore.getState().mangoAccount.current
@@ -102,8 +102,14 @@ const ModifyTvOrderModal = ({
             undefined,
           )
         } else {
-          const marketPk = findSerum3MarketPkInOpenOrders(o)
+          const marketPk = findSpotMarketPkInOpenOrders(o)
           if (!marketPk) return
+
+          if (o instanceof OpenbookOrder) {
+            console.error('not implemented!')
+            return
+          }
+
           const market = group.getSerum3MarketByExternalMarket(
             new PublicKey(marketPk),
           )
@@ -140,7 +146,7 @@ const ModifyTvOrderModal = ({
       }
     },
     [
-      findSerum3MarketPkInOpenOrders,
+      findSpotMarketPkInOpenOrders,
       modifiedOrderPrice,
       modifiedOrderSize,
       tickDecimals,

components/modals/SpotMarketDetailsModal.tsx

@@ -2,7 +2,7 @@ import { ModalProps } from '../../types/modal'
 import Modal from '../shared/Modal'
 import { useTranslation } from 'next-i18next'
 import useSelectedMarket from 'hooks/useSelectedMarket'
-import { Serum3Market } from '@blockworks-foundation/mango-v4'
+import { OpenbookV2Market, Serum3Market } from '@blockworks-foundation/mango-v4'
 import Button from '@components/shared/Button'
 import { ExclamationTriangleIcon } from '@heroicons/react/20/solid'
 import { useMemo } from 'react'
@@ -11,7 +11,7 @@ import OracleProvider from '@components/shared/OracleProvider'
 import mangoStore from '@store/mangoStore'
 
 interface SpotMarketDetailsModalProps {
-  market: Serum3Market | undefined
+  market: Serum3Market | OpenbookV2Market | undefined
 }
 
 type ModalCombinedProps = SpotMarketDetailsModalProps & ModalProps

components/nftMarket/AssetBidsModal.tsx

@@ -16,6 +16,7 @@ import NftMarketButton from './NftMarketButton'
 import Loading from '@components/shared/Loading'
 import { useState } from 'react'
 import { notify } from 'utils/notifications'
+import { BN } from '@coral-xyz/anchor'
 
 const AssetBidsModal = ({
   isOpen,
@@ -79,7 +80,10 @@ const AssetBidsModal = ({
                     )}
                   </p>
                   <span className="font-display text-th-fgd-2">
-                    {toUiDecimals(x.price.basisPoints, MANGO_MINT_DECIMALS)}{' '}
+                    {toUiDecimals(
+                      new BN(x.price.basisPoints.toString()),
+                      MANGO_MINT_DECIMALS,
+                    )}{' '}
                     MNGO
                   </span>
                 </div>

components/nftMarket/MyBidsModal.tsx

@@ -17,6 +17,7 @@ import { useState } from 'react'
 import Loading from '@components/shared/Loading'
 import EmptyState from './EmptyState'
 import { notify } from 'utils/notifications'
+import { BN } from '@coral-xyz/anchor'
 
 const MyBidsModal = ({ isOpen, onClose }: ModalProps) => {
   const { publicKey } = useWallet()
@@ -81,8 +82,11 @@ const MyBidsModal = ({ isOpen, onClose }: ModalProps) => {
                     <p className="text-xs">
                       {x.asset?.json?.collection?.family || 'Unknown'}
                     </p>
+                    {toUiDecimals(
+                      new BN(x.price.basisPoints.toString()),
+                      MANGO_MINT_DECIMALS,
+                    )}{' '}
                     <span className="font-display text-th-fgd-2">
-                      {toUiDecimals(x.price.basisPoints, MANGO_MINT_DECIMALS)}{' '}
                       <span className="font-body">MNGO</span>
                     </span>
                   </div>