add useOraclePrice hook and show in market header

components/MarketHeader.tsx

@@ -1,14 +1,14 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import useMangoStore from '../stores/useMangoStore'
-import useMarkPrice from '../hooks/useMarkPrice'
 import usePrevious from '../hooks/usePrevious'
 import useInterval from '../hooks/useInterval'
 import ChartApi from '../utils/chartDataConnector'
 import UiLock from './UiLock'
 import ManualRefresh from './ManualRefresh'
+import useOraclePrice from '../hooks/useOraclePrice'
 
 const MarketHeader = () => {
-  const markPrice = useMarkPrice()
+  const oraclePrice = useOraclePrice()
   const selectedMarketName = useMangoStore((s) => s.selectedMarket.name)
   const previousMarketName: string = usePrevious(selectedMarketName)
   const marginAccount = useMangoStore((s) => s.selectedMarginAccount.current)
@@ -91,9 +91,9 @@ const MarketHeader = () => {
         </div>
         <div className="flex items-center">
           <div className="pr-4 sm:pr-0 sm:w-24">
-            <div className="text-th-fgd-4 text-xs">Mark price</div>
+            <div className="text-th-fgd-4 text-xs">Oracle price</div>
             <div className="font-semibold mt-0.5">
-              {markPrice ? markPrice.toFixed(2) : '--'}
+              {oraclePrice ? oraclePrice.toFixed(2) : '--'}
             </div>
           </div>
           <div className="pr-4 sm:pr-0 sm:w-24">

hooks/useMarketList.tsx

@@ -37,11 +37,17 @@ const useMarketList = () => {
     [symbolsForMangoGroup]
   )
 
+  const getMarketIndex = useCallback(
+    (address) => Object.entries(spotMarkets).findIndex((x) => x[1] === address),
+    [symbolsForMangoGroup]
+  )
+
   return {
     programId,
     marketList,
     spotMarkets,
     symbols: symbolsForMangoGroup,
+    getMarketIndex,
     getTokenIndex,
   }
 }

hooks/useOraclePrice.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react'
+import useMangoStore from '../stores/useMangoStore'
+import useConnection from './useConnection'
+import useMarket from './useMarket'
+import useMarketList from './useMarketList'
+
+export default function useOraclePrice() {
+  const selectedMangoGroup = useMangoStore((s) => s.selectedMangoGroup.current)
+  const { connection } = useConnection()
+  const { marketAddress } = useMarket()
+  const { getMarketIndex } = useMarketList()
+  const [oraclePrice, setOraclePrice] = useState(null)
+
+  useEffect(() => {
+    if (selectedMangoGroup) {
+      const marketIndex = getMarketIndex(marketAddress)
+      selectedMangoGroup.getPrices(connection).then((prices) => {
+        const oraclePriceForMarket = prices[marketIndex]
+        setOraclePrice(oraclePriceForMarket)
+        console.log('yoooo', marketAddress, marketIndex, oraclePriceForMarket)
+      })
+    }
+  }, [selectedMangoGroup, marketAddress])
+  console.log('oracle prices', oraclePrice)
+
+  return oraclePrice
+}

stores/useMangoStore.tsx

@@ -32,7 +32,8 @@ export const ENDPOINTS: EndpointInfo[] = [
 
 type ClusterType = 'mainnet-beta' | 'devnet'
 
-const CLUSTER = (process.env.NEXT_PUBLIC_CLUSTER as ClusterType) || 'devnet'
+const CLUSTER =
+  (process.env.NEXT_PUBLIC_CLUSTER as ClusterType) || 'mainnet-beta'
 const ENDPOINT = ENDPOINTS.find((e) => e.name === CLUSTER)
 const DEFAULT_CONNECTION = new Connection(ENDPOINT.url, 'recent')
 const WEBSOCKET_CONNECTION = new Connection(ENDPOINT.websocket, 'recent')