move oracle price into its own component

reduce rerenders by moving oracle price updates to separate components

components/DayHighLow.tsx

@@ -1,18 +1,24 @@
+import useOraclePrice from '../hooks/useOraclePrice'
 import { formatUsdValue } from '../utils'
 import { MarketDataLoader } from './MarketDetails'
 
 interface DayHighLowProps {
   high: number
   low: number
-  latest: number
   isTableView?: boolean
 }
 
-const DayHighLow = ({ high, low, latest, isTableView }: DayHighLowProps) => {
+const DayHighLow = ({ high, low, isTableView }: DayHighLowProps) => {
+  const price = useOraclePrice()
   let rangePercent = 0
+  let latestPrice = 0
+
+  if (price) {
+    latestPrice = price?.toNumber()
+  }
 
   if (high) {
-    rangePercent = ((latest - low) * 100) / (high - low)
+    rangePercent = ((latestPrice - low) * 100) / (high - low)
   }
 
   return (

components/MarketDetails.tsx

@@ -15,11 +15,30 @@ import { useTranslation } from 'next-i18next'
 import SwitchMarketDropdown from './SwitchMarketDropdown'
 import Tooltip from './Tooltip'
 
+const OraclePrice = () => {
+  const oraclePrice = useOraclePrice()
+  const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
+
+  const decimals = useMemo(
+    () => getPrecisionDigits(selectedMarket?.tickSize),
+    [selectedMarket]
+  )
+
+  return (
+    <div className="text-th-fgd-1 md:text-xs">
+      {oraclePrice && selectedMarket
+        ? oraclePrice.toNumber().toLocaleString(undefined, {
+            minimumFractionDigits: decimals,
+            maximumFractionDigits: decimals,
+          })
+        : '--'}
+    </div>
+  )
+}
+
 const MarketDetails = () => {
   const { t } = useTranslation('common')
-  const oraclePrice = useOraclePrice()
   const marketConfig = useMangoStore((s) => s.selectedMarket.config)
-  const selectedMarket = useMangoStore((s) => s.selectedMarket.current)
   const baseSymbol = marketConfig.baseSymbol
   const selectedMarketName = marketConfig.name
   const isPerpMarket = marketConfig.kind === 'perp'
@@ -50,18 +69,7 @@ const MarketDetails = () => {
             <div className="tiny-text pb-0.5 text-th-fgd-3">
               {t('oracle-price')}
             </div>
-            <div className="text-th-fgd-1 md:text-xs">
-              {oraclePrice && selectedMarket
-                ? oraclePrice.toNumber().toLocaleString(undefined, {
-                    minimumFractionDigits: getPrecisionDigits(
-                      selectedMarket.tickSize
-                    ),
-                    maximumFractionDigits: getPrecisionDigits(
-                      selectedMarket.tickSize
-                    ),
-                  })
-                : '--'}
-            </div>
+            <OraclePrice />
           </div>
           {market ? (
             <>
@@ -125,11 +133,7 @@ const MarketDetails = () => {
                 <div className="tiny-text pb-0.5 text-left text-th-fgd-3 xl:text-center">
                   {t('daily-range')}
                 </div>
-                <DayHighLow
-                  high={market?.high24h}
-                  low={market?.low24h}
-                  latest={oraclePrice?.toNumber()}
-                />
+                <DayHighLow high={market?.high24h} low={market?.low24h} />
               </div>
             </>
           ) : (