From f47fda45bfc27a8b0e55e8454e761fea6a6bbbce Mon Sep 17 00:00:00 2001
From: moo-onthelawn <70078372+moo-onthelawn@users.noreply.github.com>
Date: Tue, 13 Feb 2024 13:49:24 -0500
Subject: [PATCH] CT-428 Update browser tab title to be mid market price (#294)

* calculation

* make new selectors
---
 src/hooks/usePageTitlePriceUpdates.ts | 18 ++++++++++++------
 src/state/perpetualsSelectors.ts      |  6 ++++++
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/hooks/usePageTitlePriceUpdates.ts b/src/hooks/usePageTitlePriceUpdates.ts
index 3093974..98013d8 100644
--- a/src/hooks/usePageTitlePriceUpdates.ts
+++ b/src/hooks/usePageTitlePriceUpdates.ts
@@ -4,8 +4,11 @@ import { useSelector } from 'react-redux';
 import { DEFAULT_DOCUMENT_TITLE } from '@/constants/routes';
 
 import { getSelectedLocale } from '@/state/localizationSelectors';
-import { getCurrentMarketData, getCurrentMarketId } from '@/state/perpetualsSelectors';
-import type { RootState } from '@/state/_store';
+import {
+  getCurrentMarketId,
+  getCurrentMarketMidMarketPrice,
+  getCurrentMarketOraclePrice,
+} from '@/state/perpetualsSelectors';
 
 import { useBreakpoints } from './useBreakpoints';
 
@@ -13,11 +16,14 @@ export const usePageTitlePriceUpdates = () => {
   const selectedLocale = useSelector(getSelectedLocale);
   const { isNotTablet } = useBreakpoints();
   const id = useSelector(getCurrentMarketId);
-  const oraclePrice = useSelector((state: RootState) => getCurrentMarketData(state)?.oraclePrice);
+  const oraclePrice = useSelector(getCurrentMarketOraclePrice);
+  const orderbookMidMarketPrice = useSelector(getCurrentMarketMidMarketPrice);
+
+  const price = orderbookMidMarketPrice ?? oraclePrice;
 
   useEffect(() => {
-    if (id && oraclePrice && isNotTablet) {
-      const priceString = oraclePrice.toLocaleString(selectedLocale);
+    if (id && price && isNotTablet) {
+      const priceString = price.toLocaleString(selectedLocale);
       document.title = `$${priceString} ${id} · ${DEFAULT_DOCUMENT_TITLE}`;
     } else {
       document.title = DEFAULT_DOCUMENT_TITLE;
@@ -26,5 +32,5 @@ export const usePageTitlePriceUpdates = () => {
     return () => {
       document.title = DEFAULT_DOCUMENT_TITLE;
     };
-  }, [oraclePrice]);
+  }, [price]);
 };
diff --git a/src/state/perpetualsSelectors.ts b/src/state/perpetualsSelectors.ts
index 0c02a6b..f83fe78 100644
--- a/src/state/perpetualsSelectors.ts
+++ b/src/state/perpetualsSelectors.ts
@@ -107,6 +107,12 @@ export const getCurrentMarketHistoricalFundings = createSelector(
     currentMarketId ? historicalFundings?.[currentMarketId] ?? [] : []
 );
 
+/**
+ * @returns oracle price of the market the user is currently viewing
+ */
+export const getCurrentMarketOraclePrice = (state: RootState) =>
+  getCurrentMarketData(state)?.oraclePrice;
+
 /**
  * @returns Mid market price for the market the user is currently viewing
  */