Refactor mobile graph components

oasisprotocol · Feb 22, 2023 · 4e042e0 · 4e042e0
1 parent 54a7564
commit 4e042e0
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 37 deletions.
diff --git a/src/app/pages/HomePage/GraphTooltip/CipherGraphTooltip.tsx b/src/app/pages/HomePage/GraphTooltip/CipherGraphTooltip.tsx
@@ -54,7 +54,6 @@ export const CipherGraphTooltip: FC<GraphTooltipExtendedProps> = ({
   offsetWidth,
   offsetHeight,
 }) => {
-  const { t } = useTranslation()
   const theme = useTheme()
   const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
 

diff --git a/src/app/pages/HomePage/GraphTooltip/GraphTooltipMobile.tsx b/src/app/pages/HomePage/GraphTooltip/GraphTooltipMobile.tsx
@@ -1,9 +1,32 @@
 import { FC, PropsWithChildren } from 'react'
-import { MobileBackdrop, MobileGraphTooltip } from './index'
 import Fade from '@mui/material/Fade'
 import CloseIcon from '@mui/icons-material/Close'
 import { COLORS } from '../../../../styles/theme/colors'
 import { useTranslation } from 'react-i18next'
+import { styled } from '@mui/material/styles'
+import Box from '@mui/material/Box'
+
+export const MobileBackdrop = styled(Box)(() => ({
+  position: 'fixed',
+  inset: 0,
+  backgroundColor: COLORS.black,
+  opacity: 0.3,
+  zIndex: 4,
+}))
+
+export const MobileGraphTooltip = styled(Box)(() => ({
+  position: 'fixed',
+  bottom: 0,
+  left: 0,
+  right: 0,
+  height: 120,
+  zIndex: 4,
+  '> svg': {
+    position: 'fixed',
+    right: 10,
+    bottom: 125,
+  },
+}))
 
 export interface GraphTooltipMobileProps {
   onClose: () => void

diff --git a/src/app/pages/HomePage/GraphTooltip/index.tsx b/src/app/pages/HomePage/GraphTooltip/index.tsx
@@ -9,28 +9,6 @@ export interface GraphTooltipStyledProps {
   disabled?: boolean
 }
 
-export const MobileBackdrop = styled(Box)(() => ({
-  position: 'fixed',
-  inset: 0,
-  backgroundColor: COLORS.black,
-  opacity: 0.3,
-  zIndex: 4,
-}))
-
-export const MobileGraphTooltip = styled(Box)(() => ({
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  right: 0,
-  height: 120,
-  zIndex: 4,
-  '> svg': {
-    position: 'fixed',
-    right: 10,
-    bottom: 125,
-  },
-}))
-
 export const GraphTooltipStyled = styled(Box, {
   shouldForwardProp: (prop: PropertyKey) =>
     !(['isMobile', 'disabled'] as (keyof GraphTooltipStyledProps)[]).includes(
@@ -60,7 +38,7 @@ export const GraphTooltipIcon = styled(Box, {
   flex: '0 0 120px',
   height: '100%',
   borderRight: `2px solid ${COLORS.aqua}`,
-  backgroundColor: COLORS.brandExtraDark,
+  backgroundColor: COLORS.brandExtraDark + (isMobile ? '80' : ''),
   borderRadius: isMobile ? '12px 0 0 12px' : '0 0 0 0',
 }))
 
@@ -80,7 +58,7 @@ export const GraphTooltipText = styled(Box, {
   justifyContent: 'space-between',
   flex: '0 1 100%',
   padding: theme.spacing(4),
-  backgroundColor: disabled ? COLORS.shadowBlue : COLORS.brandExtraDark,
+  backgroundColor: (disabled ? COLORS.shadowBlue : COLORS.brandExtraDark) + (isMobile ? '80' : ''),
   borderRadius: isMobile ? '0 12px 0 0' : '0 12px 12px 0',
 }))
 

diff --git a/src/app/pages/HomePage/ParaTimeSelector/Graph/index.tsx b/src/app/pages/HomePage/ParaTimeSelector/Graph/index.tsx
@@ -84,7 +84,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
   const emeraldRef = useRef<SVGGElement>(null)
   const sapphireRef = useRef<SVGGElement>(null)
   const cipherRef = useRef<SVGGElement>(null)
-  const { setShowTooltip } = useMobileTooltip()
+  const { setShowMobileTooltip } = useMobileTooltip()
 
   const [showEmeraldTooltip, setShowEmeraldTooltip] = useState(false)
 
@@ -105,7 +105,10 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
 
   useEffect(() => {
     setShowEmeraldTooltip(false)
-    setShowTooltip(ParaTime.Sapphire, false)
+    setShowMobileTooltip(GraphEndpoint.Consensus, false)
+    setShowMobileTooltip(GraphEndpoint.Emerald, false)
+    setShowMobileTooltip(GraphEndpoint.Cipher, false)
+    setShowMobileTooltip(GraphEndpoint.Sapphire, false)
   }, [isMobile])
 
   const isGraphEndpointDisabled = (graphEndpoint: GraphEndpoint) => {
@@ -126,7 +129,7 @@ const GraphCmp: ForwardRefRenderFunction<SVGSVGElement, GraphProps> = (
       isMobile &&
       (disabledMap[graphEndpoint] || (!disabledMap[graphEndpoint] && selectedGraphEndpoint === graphEndpoint))
     ) {
-      setShowTooltip(graphEndpoint, true)
+      setShowMobileTooltip(graphEndpoint, true)
 
       return
     }

diff --git a/src/app/pages/HomePage/index.tsx b/src/app/pages/HomePage/index.tsx
@@ -102,7 +102,7 @@ const HomePageCmp: FC = () => {
   const apiStatusQuery = useGetStatus()
   const {
     state: { showMobileTooltip },
-    setShowTooltip,
+    setShowMobileTooltip,
   } = useMobileTooltip()
   const isApiOffline = apiStatusQuery.isFetched && !apiStatusQuery.isSuccess
 
@@ -152,16 +152,16 @@ const HomePageCmp: FC = () => {
         </FooterStyled>
       </HomepageLayout>
       {showMobileTooltip.consensus && (
-        <ConsensusGraphMobileTooltip onClose={() => setShowTooltip(GraphEndpoint.Consensus, false)} />
+        <ConsensusGraphMobileTooltip onClose={() => setShowMobileTooltip(GraphEndpoint.Consensus, false)} />
       )}
       {showMobileTooltip.emerald && (
-        <EmeraldGraphMobileTooltip onClose={() => setShowTooltip(GraphEndpoint.Emerald, false)} />
+        <EmeraldGraphMobileTooltip onClose={() => setShowMobileTooltip(GraphEndpoint.Emerald, false)} />
       )}
       {showMobileTooltip.sapphire && (
-        <SapphireGraphMobileTooltip onClose={() => setShowTooltip(GraphEndpoint.Sapphire, false)} />
+        <SapphireGraphMobileTooltip onClose={() => setShowMobileTooltip(GraphEndpoint.Sapphire, false)} />
       )}
       {showMobileTooltip.cipher && (
-        <CipherGraphMobileTooltip onClose={() => setShowTooltip(GraphEndpoint.Cipher, false)} />
+        <CipherGraphMobileTooltip onClose={() => setShowMobileTooltip(GraphEndpoint.Cipher, false)} />
       )}
     </>
   )

diff --git a/src/app/pages/HomePage/providers/MobileTooltipProvider.tsx b/src/app/pages/HomePage/providers/MobileTooltipProvider.tsx
@@ -7,7 +7,7 @@ interface MobileTooltipProviderState {
 
 interface MobileTooltipProviderContext {
   readonly state: MobileTooltipProviderState
-  setShowTooltip: (graphEndpoint: GraphEndpoint, show: boolean) => void
+  setShowMobileTooltip: (graphEndpoint: GraphEndpoint, show: boolean) => void
 }
 
 const mobileTooltipProviderInitialState: MobileTooltipProviderState = {
@@ -28,7 +28,7 @@ export const MobileTooltipProvider: FC<PropsWithChildren> = ({ children }) => {
     ...mobileTooltipProviderInitialState,
   })
 
-  const setShowTooltip = (graphEndpoint: GraphEndpoint, show: boolean) => {
+  const setShowMobileTooltip = (graphEndpoint: GraphEndpoint, show: boolean) => {
     setState(prevState => ({
       ...prevState,
       showMobileTooltip: {
@@ -40,7 +40,7 @@ export const MobileTooltipProvider: FC<PropsWithChildren> = ({ children }) => {
 
   const providerState: MobileTooltipProviderContext = {
     state,
-    setShowTooltip,
+    setShowMobileTooltip,
   }
 
   return <MobileTooltipContext.Provider value={providerState}>{children}</MobileTooltipContext.Provider>