Remove MobileTooltipProvider

src/app/pages/HomePage/ParaTimeSelector/Graph/index.tsx

@@ -6,7 +6,6 @@ import { useConstant } from '../../../../hooks/useConstant'
 import { RouteUtils } from '../../../../utils/route-utils'
 import { useGetBoundingClientRect } from '../../../../hooks/useGetBoundingClientRect'
 import useMediaQuery from '@mui/material/useMediaQuery'
-import { useMobileTooltip } from '../../providers/MobileTooltipProvider'
 import { Layer } from '../../../../../config'
 import { GraphTooltip } from '../../GraphTooltip'
 
@@ -20,6 +19,7 @@ interface GraphProps extends GraphBaseProps {
   // TODO: Consider moving this to a state management solution
   selectedLayer?: Layer
   setSelectedLayer: (value: Layer) => void
+  setActiveMobileGraphTooltip: (layer: Layer | null) => void
 }
 
 interface GraphSvgProps extends GraphBaseProps {
@@ -64,7 +64,14 @@ const GraphStyled = styled('svg', {
 }))
 
 const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
-  { disabled = false, transparent = false, selectedLayer, setSelectedLayer, scale },
+  {
+    disabled = false,
+    transparent = false,
+    selectedLayer,
+    setSelectedLayer,
+    scale,
+    setActiveMobileGraphTooltip,
+  },
   ref,
 ) => {
   const { t } = useTranslation()
@@ -77,7 +84,6 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
   const emeraldRef = useRef<SVGGElement>(null)
   const sapphireRef = useRef<SVGGElement>(null)
   const cipherRef = useRef<SVGGElement>(null)
-  const { setActiveMobileGraphTooltip } = useMobileTooltip()
 
   const [showEmeraldTooltip, setShowEmeraldTooltip] = useState(false)
 

src/app/pages/HomePage/ParaTimeSelector/index.tsx

@@ -16,6 +16,7 @@ import { GraphUtils } from './Graph/graph-utils'
 import useResizeObserver from 'use-resize-observer'
 import HelpScreen from './HelpScreen'
 import { Layer } from '../../../../config'
+import { GraphTooltipMobile } from '../GraphTooltip/GraphTooltipMobile'
 
 interface ParaTimeSelectorBaseProps {
   disabled: boolean
@@ -114,6 +115,7 @@ const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({ disabled, step, setSte
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const { t } = useTranslation()
   const exploreBtnTextTranslated = t('home.exploreBtnText')
+  const [activeMobileGraphTooltip, setActiveMobileGraphTooltip] = useState<Layer | null>(null)
 
   const [selectedLayer, setSelectedLayer] = useState<Layer>()
   const [scale, setScale] = useState<number>(1)
@@ -167,6 +169,7 @@ const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({ disabled, step, setSte
                   selectedLayer={selectedLayer}
                   setSelectedLayer={setSelectedLayer}
                   scale={scale}
+                  setActiveMobileGraphTooltip={setActiveMobileGraphTooltip}
                 />
               </QuickPinchZoomInner>
             </QuickPinchZoom>
@@ -199,6 +202,14 @@ const ParaTimeSelectorCmp: FC<ParaTimeSelectorProps> = ({ disabled, step, setSte
           )}
         </ParaTimeSelectorGlobe>
       </ParaTimeSelectorGlow>
+      {activeMobileGraphTooltip && (
+        <GraphTooltipMobile
+          layer={activeMobileGraphTooltip}
+          onClose={() => {
+            setActiveMobileGraphTooltip(null)
+          }}
+        ></GraphTooltipMobile>
+      )}
     </>
   )
 }

src/app/pages/HomePage/index.tsx

@@ -14,8 +14,6 @@ import IconButton from '@mui/material/IconButton'
 import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined'
 import { useTranslation } from 'react-i18next'
 import { ParaTimeSelectorStep } from './ParaTimeSelector/types'
-import { MobileTooltipProvider, useMobileTooltip } from './providers/MobileTooltipProvider'
-import { GraphTooltipMobile } from './GraphTooltip/GraphTooltipMobile'
 
 export const zIndexHomePage = {
   paraTimeSelector: 1,
@@ -97,16 +95,12 @@ const FooterStyled = styled(Box)(({ theme }) => ({
   },
 }))
 
-const HomePageCmp: FC = () => {
+export const HomePage: FC = () => {
   const theme = useTheme()
   const { t } = useTranslation()
   const infoAriaLabel = t('home.helpScreen.infoIconAria')
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
   const apiStatusQuery = useGetStatus()
-  const {
-    state: { activeMobileGraphTooltip },
-    setActiveMobileGraphTooltip,
-  } = useMobileTooltip()
   const isApiOffline = apiStatusQuery.isFetched && !apiStatusQuery.isSuccess
 
   const [searchHasFocus, setSearchHasFocus] = useState(false)
@@ -154,20 +148,6 @@ const HomePageCmp: FC = () => {
           {!isMobile && <Footer />}
         </FooterStyled>
       </HomepageLayout>
-      {activeMobileGraphTooltip && (
-        <GraphTooltipMobile
-          layer={activeMobileGraphTooltip}
-          onClose={() => {
-            setActiveMobileGraphTooltip(null)
-          }}
-        ></GraphTooltipMobile>
-      )}
     </>
   )
 }
-
-export const HomePage: FC = () => (
-  <MobileTooltipProvider>
-    <HomePageCmp />
-  </MobileTooltipProvider>
-)