Disable graph tooltips on mobile

oasisprotocol · Feb 21, 2023 · 06ebf20 · 06ebf20
1 parent 5a7cef3
commit 06ebf20
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 30 deletions.
diff --git a/src/app/pages/HomePage/GraphTooltip/CipherTooltip.tsx b/src/app/pages/HomePage/GraphTooltip/CipherTooltip.tsx
@@ -12,9 +12,17 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime'
 import { COLORS } from '../../../../styles/theme/colors'
 import Typography from '@mui/material/Typography'
 import { useTranslation } from 'react-i18next'
+import useMediaQuery from '@mui/material/useMediaQuery'
+import { useTheme } from '@mui/material/styles'
 
 export const CipherTooltip: FC<GraphTooltipExtendedProps> = ({ children, offsetWidth, offsetHeight }) => {
   const { t } = useTranslation()
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
+  if (isMobile) {
+    return children
+  }
 
   return (
     <GraphTooltip

diff --git a/src/app/pages/HomePage/GraphTooltip/ConsensusTooltip.tsx b/src/app/pages/HomePage/GraphTooltip/ConsensusTooltip.tsx
@@ -13,9 +13,17 @@ import Typography from '@mui/material/Typography'
 import { useTranslation } from 'react-i18next'
 import AdjustIcon from '@mui/icons-material/Adjust'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
 
 export const ConsensusTooltip: FC<GraphTooltipExtendedProps> = ({ children, offsetWidth, offsetHeight }) => {
   const { t } = useTranslation()
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
+  if (isMobile) {
+    return children
+  }
 
   return (
     <GraphTooltip

diff --git a/src/app/pages/HomePage/GraphTooltip/EmeraldTooltip.tsx b/src/app/pages/HomePage/GraphTooltip/EmeraldTooltip.tsx
@@ -13,6 +13,8 @@ import Typography from '@mui/material/Typography'
 import { useTranslation } from 'react-i18next'
 import AdjustIcon from '@mui/icons-material/Adjust'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
 
 export const EmeraldTooltip: FC<GraphTooltipExtendedProps> = ({
   children,
@@ -24,6 +26,12 @@ export const EmeraldTooltip: FC<GraphTooltipExtendedProps> = ({
   onClick,
 }) => {
   const { t } = useTranslation()
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
+  if (isMobile) {
+    return children
+  }
 
   return (
     <GraphTooltip

diff --git a/src/app/pages/HomePage/GraphTooltip/SapphireTooltip.tsx b/src/app/pages/HomePage/GraphTooltip/SapphireTooltip.tsx
@@ -12,9 +12,17 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime'
 import { COLORS } from '../../../../styles/theme/colors'
 import Typography from '@mui/material/Typography'
 import { useTranslation } from 'react-i18next'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
 
 export const SapphireTooltip: FC<GraphTooltipExtendedProps> = ({ children, offsetWidth, offsetHeight }) => {
   const { t } = useTranslation()
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
+  if (isMobile) {
+    return children
+  }
 
   return (
     <GraphTooltip

diff --git a/src/app/pages/HomePage/GraphTooltip/index.tsx b/src/app/pages/HomePage/GraphTooltip/index.tsx
@@ -54,12 +54,7 @@ export const GraphTooltipDescriptionText = styled(Box)(() => ({
   alignItems: 'center',
 }))
 
-export interface GraphTooltipExtendedProps {
-  children: TooltipProps['children']
-  open?: TooltipProps['open']
-  onOpen?: TooltipProps['onOpen']
-  onClose?: TooltipProps['onClose']
-  onClick?: TooltipProps['onClick']
+export interface GraphTooltipExtendedProps extends Omit<TooltipProps, 'title'> {
   offsetWidth?: number
   offsetHeight?: number
 }
@@ -93,35 +88,14 @@ const GraphTooltipWrapper = styled(
   },
 }))
 
-interface GraphTooltipProps {
-  title: TooltipProps['title']
-  children: TooltipProps['children']
-  open?: TooltipProps['open']
-  onOpen?: TooltipProps['onOpen']
-  onClose?: TooltipProps['onClose']
+interface GraphTooltipProps extends TooltipProps {
   offsetWidth?: number
   offsetHeight?: number
 }
 
-export const GraphTooltip: FC<GraphTooltipProps> = ({
-  title,
-  children,
-  offsetWidth,
-  offsetHeight,
-  open,
-  onOpen,
-  onClose,
-}) => {
+export const GraphTooltip: FC<GraphTooltipProps> = ({ children, ...restProps }) => {
   return (
-    <GraphTooltipWrapper
-      placement="right-start"
-      offsetWidth={offsetWidth}
-      offsetHeight={offsetHeight}
-      title={title}
-      open={open}
-      onOpen={onOpen}
-      onClose={onClose}
-    >
+    <GraphTooltipWrapper {...restProps} placement="right-start">
       {children}
     </GraphTooltipWrapper>
   )