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
@@ -48,19 +50,41 @@ const SkIconBtn: React.FC = ({
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) => {
+ if (isMobile) {
+ handleTooltipToggle()
+ }
+ if (onClick) {
+ onClick(event)
+ }
+ },
+ [isMobile, onClick, handleTooltipToggle]
+ )
+
const button = (
@@ -68,7 +92,13 @@ const SkIconBtn: React.FC = ({
if (tooltipTitle) {
return (
-
+
{button}
)
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
-
+