From a87f9120e956e564510e46c8fa703a7b464029ab Mon Sep 17 00:00:00 2001
From: Dmytro <dmitry.tkk@gmail.com>
Date: Wed, 25 Sep 2024 12:40:44 +0100
Subject: [PATCH] Add handler for tooltips on mobile, update Chains description

---
 src/components/SkIconBth.tsx | 40 +++++++++++++++++++++++++++++++-----
 src/pages/Chains.tsx         |  2 +-
 2 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/src/components/SkIconBth.tsx b/src/components/SkIconBth.tsx
index c506add..8d6429b 100644
--- a/src/components/SkIconBth.tsx
+++ b/src/components/SkIconBth.tsx
@@ -21,10 +21,12 @@
  * @copyright SKALE Labs 2024-Present
  */
 
-import React from 'react'
+import React, { useState, useCallback } from 'react'
 import IconButton, { IconButtonProps } from '@mui/material/IconButton'
 import Tooltip, { TooltipProps } from '@mui/material/Tooltip'
 import { SvgIconProps } from '@mui/material/SvgIcon'
+import { useTheme } from '@mui/material/styles'
+import useMediaQuery from '@mui/material/useMediaQuery'
 import { cls, styles, cmn } from '@skalenetwork/metaport'
 
 type IconType = React.ComponentType<SvgIconProps>
@@ -48,19 +50,41 @@ const SkIconBtn: React.FC<SkIconBtnProps> = ({
   primary = true,
   ...props
 }) => {
+  const [tooltipOpen, setTooltipOpen] = useState(false)
+  const theme = useTheme()
+  const isMobile = useMediaQuery(theme.breakpoints.down('sm'))
+
+  const handleTooltipToggle = useCallback(() => {
+    if (isMobile) {
+      setTooltipOpen((prevOpen) => !prevOpen)
+    }
+  }, [isMobile])
+
+  const handleClick = useCallback(
+    (event: React.MouseEvent<HTMLButtonElement>) => {
+      if (isMobile) {
+        handleTooltipToggle()
+      }
+      if (onClick) {
+        onClick(event)
+      }
+    },
+    [isMobile, onClick, handleTooltipToggle]
+  )
+
   const button = (
     <IconButton
-      onClick={onClick}
+      onClick={handleClick}
       className={cls(styles.paperGrey, 'sk-icon-btn', `sk-icon-btn-${size}`, className)}
       size={size}
       {...props}
     >
       <Icon
         className={cls(
+          iconClassName,
           [cmn.pPrim, primary],
           [cmn.pSec, !primary],
-          'sk-icon-btn-img',
-          iconClassName
+          'sk-icon-btn-img'
         )}
       />
     </IconButton>
@@ -68,7 +92,13 @@ const SkIconBtn: React.FC<SkIconBtnProps> = ({
 
   if (tooltipTitle) {
     return (
-      <Tooltip title={tooltipTitle} {...tooltipProps} arrow>
+      <Tooltip
+        title={tooltipTitle}
+        {...tooltipProps}
+        open={isMobile ? tooltipOpen : undefined}
+        onClose={handleTooltipToggle}
+        onOpen={handleTooltipToggle}
+      >
         {button}
       </Tooltip>
     )
diff --git a/src/pages/Chains.tsx b/src/pages/Chains.tsx
index d12a6cd..0a32382 100644
--- a/src/pages/Chains.tsx
+++ b/src/pages/Chains.tsx
@@ -100,7 +100,7 @@ export default function Chains(props: {
               Connect, get block explorer links and endpoints
             </p>
           </div>
-          <SkPageInfoIcon meta_tag={META_TAGS.onramp} />
+          <SkPageInfoIcon meta_tag={META_TAGS.chains} />
         </div>
         <ChainsSection
           name="SKALE Hubs"