Migrate Tooltip component to Oasis UI Library

buberdds · buberdds · commit b2f719cc1947 · 2025-06-09T13:51:46.000+02:00
diff --git a/src/app/components/AccountSizeBadge/index.tsx b/src/app/components/AccountSizeBadge/index.tsx
@@ -1,6 +1,6 @@
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
-import Tooltip from '@mui/material/Tooltip'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 import { styled } from '@mui/material/styles'
 import { FC } from 'react'
 import { COLORS } from 'styles/theme/colors'
@@ -30,7 +30,7 @@ export const AccountSizeBadge: FC<AccountSizeBadgeProps> = ({ size }) => {
   const { t } = useTranslation()
 
   return (
-    <Tooltip arrow placement="top" title={t('account.sizeTooltip', { size })}>
+    <Tooltip title={t('account.sizeTooltip', { size })}>
       <StyledBox>{size}</StyledBox>
     </Tooltip>
   )
diff --git a/src/app/components/Balance/FiatMoneyAmount.tsx b/src/app/components/Balance/FiatMoneyAmount.tsx
@@ -1,11 +1,11 @@
 import { styled } from '@mui/material/styles'
 import WarningIcon from '@mui/icons-material/WarningAmber'
 import Box from '@mui/material/Box'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 import { useTranslation } from 'react-i18next'
 import { FC } from 'react'
 import { CoinGeckoReferral } from '../CoinGeckoReferral'
 import { FiatValueInfo } from './hooks'
-import Tooltip from '@mui/material/Tooltip'
 import Skeleton from '@mui/material/Skeleton'
 
 export const FiatMoneyAmountBox = styled(Box)(() => ({
@@ -36,10 +36,7 @@ export const FiatMoneyAmount: FC<FiatValueInfo> = ({
           },
         })}
         {!!unknownTickers.length && (
-          <Tooltip
-            title={t('account.failedToLookUpTickers', { tickers: unknownTickers.join(', ') })}
-            placement="top"
-          >
+          <Tooltip title={t('account.failedToLookUpTickers', { tickers: unknownTickers.join(', ') })}>
             <WarningIcon />
           </Tooltip>
         )}
diff --git a/src/app/components/BlockNavigationButtons/index.tsx b/src/app/components/BlockNavigationButtons/index.tsx
@@ -3,7 +3,7 @@ import { Link as RouterLink, useSearchParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import PaginationItem from '@mui/material/PaginationItem'
 import Box from '@mui/material/Box'
-import Tooltip from '@mui/material/Tooltip'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 import { ConsensusScope, RuntimeScope, SearchScope } from '../../../types/searchScope'
 import { COLORS } from '../../../styles/theme/colors'
 import { useConsensusFreshness, useRuntimeFreshness } from '../OfflineBanner/hook'
@@ -15,7 +15,7 @@ const PrevBlockButton: FC<{ scope: SearchScope; currentRound: number }> = ({ sco
   const [searchParams] = useSearchParams()
   const disabled = currentRound === 0
   return (
-    <Tooltip title={disabled ? t('blocks.viewingFirst') : t('blocks.viewPrevious')} placement="top">
+    <Tooltip title={disabled ? t('blocks.viewingFirst') : t('blocks.viewPrevious')}>
       <Box>
         <PaginationItem
           component={RouterLink}
diff --git a/src/app/components/BlockStats/index.tsx b/src/app/components/BlockStats/index.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react'
 import Box from '@mui/material/Box'
-import Tooltip from '@mui/material/Tooltip'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 import { styled } from '@mui/material/styles'
 import { COLORS } from '../../../styles/theme/colors'
 
@@ -43,7 +43,7 @@ export const BlockStats = <T extends { [key: string]: any }>({
         {data.map(item => {
           const title = tooltipFormatter ? tooltipFormatter(item[dataKey].toString()) : item[dataKey]
           return (
-            <Tooltip key={item[dataKey]} title={title} placement="top">
+            <Tooltip key={item[dataKey]} title={title}>
               <StyledSquare success={item[statusKey]} />
             </Tooltip>
           )
diff --git a/src/app/components/ConsensusTransactionMethod/index.tsx b/src/app/components/ConsensusTransactionMethod/index.tsx
@@ -14,8 +14,7 @@ import MiscellaneousServicesIcon from '@mui/icons-material/MiscellaneousServices
 import PersonIcon from '@mui/icons-material/Person'
 import PriceChangeIcon from '@mui/icons-material/PriceChange'
 import QuestionMarkIcon from '@mui/icons-material/QuestionMark'
-import Tooltip from '@mui/material/Tooltip'
-import { tooltipDelay } from '../../../styles/theme'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 import { ConsensusTxMethod, GetConsensusTransactionsParams } from '../../../oasis-nexus/api'
 import { COLORS } from '../../../styles/theme/colors'
 import { SelectOptionBase } from '../Select'
@@ -155,16 +154,7 @@ const MethodIconWithTruncatedLabel: FC<MethodIconProps> = props => {
   }, [applyTruncate, elementRef, props.label, props.size])
 
   return (
-    <Tooltip
-      arrow
-      placement="top"
-      title={props.label}
-      enterDelay={tooltipDelay}
-      enterNextDelay={tooltipDelay}
-      disableFocusListener={!truncate}
-      disableHoverListener={!truncate}
-      disableTouchListener={!truncate}
-    >
+    <Tooltip title={props.label}>
       <Box>
         <MethodIconContent {...props} elementRef={elementRef} truncate={truncate} />
       </Box>
diff --git a/src/app/components/CopyToClipboard/index.tsx b/src/app/components/CopyToClipboard/index.tsx
@@ -1,11 +1,11 @@
 import { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Tooltip from '@mui/material/Tooltip'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import { COLORS } from '../../../styles/theme/colors'
 import ButtonBase from '@mui/material/ButtonBase'
 import { styled } from '@mui/material/styles'
 import Button from '@mui/material/Button'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 
 const clipboardTooltipDuration = 2000
 
@@ -82,7 +82,7 @@ export const CopyToClipboard: FC<CopyToClipboardProps> = ({ label, floating, isF
   }, [])
 
   return (
-    <Tooltip arrow onOpen={hideTooltip} open={isCopied} placement="right" title={t('clipboard.success')}>
+    <Tooltip onOpenChange={hideTooltip} open={isCopied} side="right" title={t('clipboard.success')}>
       {label ? (
         <Button variant="outlined" color="secondary" onClick={handleCopyToClipboard} aria-label={ariaLabel}>
           {label}
diff --git a/src/app/components/CurrentFiatValue/index.tsx b/src/app/components/CurrentFiatValue/index.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FiatMoneyAmountBox } from '../../components/Balance/FiatMoneyAmount'
 import Box from '@mui/material/Box'
-import Tooltip from '@mui/material/Tooltip'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 import { CoinGeckoReferral } from '../../components/CoinGeckoReferral'
 import HelpIcon from '@mui/icons-material/Help'
 import { TokenPriceInfo } from '../../../coin-gecko/api'
diff --git a/src/app/components/LayerPicker/LayerMenu.tsx b/src/app/components/LayerPicker/LayerMenu.tsx
@@ -5,7 +5,7 @@ import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
 import MenuList from '@mui/material/MenuList'
 import MenuItem from '@mui/material/MenuItem'
 import ListItemText from '@mui/material/ListItemText'
-import Tooltip from '@mui/material/Tooltip'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 import { COLORS } from '../../../styles/theme/colors'
 import { Layer } from '../../../oasis-nexus/api'
 import { getLayerLabels } from '../../utils/content'
@@ -36,7 +36,7 @@ export const DisabledLayerMenuItem: FC<BaseLayerMenuItemProps> = ({ divider, tar
   const labels = getLayerLabels(t)
 
   return (
-    <Tooltip arrow placement="top" title={t('layerPicker.comingSoonTitle')}>
+    <Tooltip title={t('layerPicker.comingSoonTitle')}>
       {/* Div is needed because we need an element with enabled pointer-events to make Tooltip work */}
       <div>
         <MenuItem disabled divider={divider}>
diff --git a/src/app/components/LayerStatus/index.tsx b/src/app/components/LayerStatus/index.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import CheckCircleIcon from '@mui/icons-material/CheckCircle'
 import ErrorIcon from '@mui/icons-material/Error'
-import Tooltip from '@mui/material/Tooltip'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 
 type LayerStatusProps = {
   isOutOfDate?: boolean
diff --git a/src/app/components/NetworkProposalsList/index.tsx b/src/app/components/NetworkProposalsList/index.tsx
@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import Box from '@mui/material/Box'
-import Tooltip from '@mui/material/Tooltip'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { Proposal } from '../../../oasis-nexus/api'
 import { TablePaginationProps } from '../Table/TablePagination'
@@ -66,7 +66,7 @@ export const NetworkProposalsList: FC<NetworkProposalsListProps> = ({
       {
         align: TableCellAlign.Right,
         content: (
-          <Tooltip title={t('networkProposal.createTooltip')} placement={'top'}>
+          <Tooltip title={t('networkProposal.createTooltip')}>
             <Box>{proposal.created_at}</Box>
           </Tooltip>
         ),
@@ -75,7 +75,7 @@ export const NetworkProposalsList: FC<NetworkProposalsListProps> = ({
       {
         align: TableCellAlign.Right,
         content: (
-          <Tooltip title={t('networkProposal.closeTooltip')} placement={'top'}>
+          <Tooltip title={t('networkProposal.closeTooltip')}>
             <Box>{proposal.closes_at}</Box>
           </Tooltip>
         ),
diff --git a/src/app/components/RoundedBalance/index.tsx b/src/app/components/RoundedBalance/index.tsx
@@ -1,12 +1,11 @@
 import { FC } from 'react'
 import { Trans, useTranslation } from 'react-i18next'
 import BigNumber from 'bignumber.js'
-import Tooltip from '@mui/material/Tooltip'
-import { tooltipDelay } from '../../../styles/theme'
 import { SearchScope } from '../../../types/searchScope'
 import { TokenLink } from '../Tokens/TokenLink'
 import { PlaceholderLabel } from '../../utils/PlaceholderLabel'
 import { getPreciseNumberFormat } from '../../../locales/getPreciseNumberFormat'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 
 type RoundedBalanceProps = {
   compactAllNumbers?: boolean
@@ -52,13 +51,7 @@ export const RoundedBalance: FC<RoundedBalanceProps> = ({
 
   if (compactAllNumbers || (number.isGreaterThan(100_000) && compactLargeNumbers)) {
     return (
-      <Tooltip
-        arrow
-        placement="top"
-        title={t('common.valueInToken', preciseValueFormat)}
-        enterDelay={tooltipDelay}
-        enterNextDelay={tooltipDelay}
-      >
+      <Tooltip title={t('common.valueInToken', preciseValueFormat)}>
         <span>
           <Trans
             t={t}
@@ -95,13 +88,7 @@ export const RoundedBalance: FC<RoundedBalanceProps> = ({
 
   return (
     <span>
-      <Tooltip
-        arrow
-        placement="top"
-        title={t('common.valueInToken', preciseValueFormat)}
-        enterDelay={tooltipDelay}
-        enterNextDelay={tooltipDelay}
-      >
+      <Tooltip title={t('common.valueInToken', preciseValueFormat)}>
         <span>
           <Trans
             t={t}
diff --git a/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx b/src/app/components/RuntimeEvents/RuntimeEventDetails.tsx
@@ -32,8 +32,7 @@ import DeveloperBoard from '@mui/icons-material/DeveloperBoard'
 import DeveloperBoardOffIcon from '@mui/icons-material/DeveloperBoardOff'
 import { MethodIcon } from '../ConsensusTransactionMethod'
 import { TransactionLink } from '../Transactions/TransactionLink'
-import Tooltip from '@mui/material/Tooltip'
-import { tooltipDelay } from '../../../styles/theme'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 import { PlaceholderLabel } from '../../utils/PlaceholderLabel'
 import { fromBaseUnits } from '../../utils/number-utils'
 
@@ -183,13 +182,7 @@ const EvmEventParamData: FC<{
     case 'uint256': {
       if (param.evm_token?.type === 'ERC20') {
         return (
-          <Tooltip
-            arrow
-            placement="top"
-            title={t('common.valueLong', getPreciseNumberFormat(param.value_raw as string))}
-            enterDelay={tooltipDelay}
-            enterNextDelay={tooltipDelay}
-          >
+          <Tooltip title={t('common.valueLong', getPreciseNumberFormat(param.value_raw as string))}>
             <span>
               {t('common.valueInToken', {
                 ...getPreciseNumberFormat(param.value as string),
@@ -217,13 +210,7 @@ const EvmEventParamData: FC<{
       if (!maybeParsedBaseUnits.startsWith('0.0000')) {
         // Don't parse suspiciously low values.
         return (
-          <Tooltip
-            arrow
-            placement="top"
-            title={t('common.valueLong', getPreciseNumberFormat(param.value as string))}
-            enterDelay={tooltipDelay}
-            enterNextDelay={tooltipDelay}
-          >
+          <Tooltip title={t('common.valueLong', getPreciseNumberFormat(param.value as string))}>
             <span>
               {t('common.valueLong', getPreciseNumberFormat(maybeParsedBaseUnits))}
               {`e${commonEvmContractDecimals}`}
diff --git a/src/app/components/StatusIcon/index.tsx b/src/app/components/StatusIcon/index.tsx
@@ -6,8 +6,8 @@ import CancelIcon from '@mui/icons-material/Cancel'
 import { styled } from '@mui/material/styles'
 import { COLORS } from '../../../styles/theme/colors'
 import HelpIcon from '@mui/icons-material/Help'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 import { TxError } from '../../../oasis-nexus/api'
-import Tooltip from '@mui/material/Tooltip'
 import { useTxErrorMessage } from '../../hooks/useTxErrorMessage'
 import { TFunction } from 'i18next'
 
@@ -142,11 +142,7 @@ export const StatusIcon: FC<StatusIconProps> = ({ success, error, withText, meth
     )
   } else {
     return (
-      <Tooltip
-        arrow
-        placement="top"
-        title={errorMessage ? `${statusLabel[status]}: ${errorMessage}` : statusLabel[status]}
-      >
+      <Tooltip title={errorMessage ? `${statusLabel[status]}: ${errorMessage}` : statusLabel[status]}>
         <StyledBox status={status} withText={withText}>
           {statusIcon[status]}
         </StyledBox>
diff --git a/src/app/components/TableCellAge/index.tsx b/src/app/components/TableCellAge/index.tsx
@@ -1,9 +1,8 @@
 import { FC } from 'react'
-import Tooltip from '@mui/material/Tooltip'
 import { formatDistanceToNow } from '../../utils/dateFormatter'
 import Box from '@mui/material/Box'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 import { useFormattedTimestamp } from '../../hooks/useFormattedTimestamp'
-import { tooltipDelay } from '../../../styles/theme'
 import { formatDistanceStrict } from 'date-fns/formatDistanceStrict'
 import { useLocalSettings } from '../../hooks/useLocalSettings'
 import { TableAgeType } from '../../../types/table-age-type'
@@ -40,7 +39,7 @@ export const TableCellAge: FC<{ sinceTimestamp: string }> = ({ sinceTimestamp })
   const content = ageHeaderType === TableAgeType.DateTime ? tableFormatted : distance
 
   return (
-    <Tooltip title={title} enterDelay={tooltipDelay} placement={'top'}>
+    <Tooltip title={title}>
       <Box>{content}</Box>
     </Tooltip>
   )
diff --git a/src/app/components/TableHeaderToggle/index.tsx b/src/app/components/TableHeaderToggle/index.tsx
@@ -1,9 +1,8 @@
 import { FC } from 'react'
 import Button from '@mui/material/Button'
-import Tooltip from '@mui/material/Tooltip'
 import Typography from '@mui/material/Typography'
 import { styled } from '@mui/material/styles'
-import { tooltipDelay } from '../../../styles/theme'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 
 const StyledButton = styled(Button)(() => ({
   padding: '0px',
@@ -19,7 +18,7 @@ type TableHeaderToggleProps = {
 
 export const TableHeaderToggle: FC<TableHeaderToggleProps> = ({ label, onClick, tooltipTitle }) => {
   return (
-    <Tooltip title={tooltipTitle} enterDelay={tooltipDelay} leaveDelay={0} placement="top">
+    <Tooltip title={tooltipTitle}>
       <StyledButton variant="text" onClick={onClick}>
         <Typography
           sx={{
diff --git a/src/app/components/TableLayoutButton/index.tsx b/src/app/components/TableLayoutButton/index.tsx
@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import IconButton from '@mui/material/IconButton'
 import PivotTableChartIcon from '@mui/icons-material/PivotTableChart'
-import Tooltip from '@mui/material/Tooltip'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 
 export enum TableLayout {
   Horizontal = 'horizontal',
@@ -18,7 +18,7 @@ export const TableLayoutButton: FC<TableLayoutButtonProps> = ({ tableView, setTa
   const { t } = useTranslation()
 
   return (
-    <Tooltip arrow placement="right" title={t('tableLayoutButton.changeView')}>
+    <Tooltip title={t('tableLayoutButton.changeView')}>
       <IconButton
         color="primary"
         onClick={() => {
diff --git a/src/app/components/Tooltip/MaybeWithTooltip.tsx b/src/app/components/Tooltip/MaybeWithTooltip.tsx
@@ -1,7 +1,7 @@
 import { FC, ReactNode } from 'react'
-import Tooltip from '@mui/material/Tooltip'
 import Box from '@mui/material/Box'
 import { SxProps } from '@mui/material/styles'
+import { TooltipWrapper as Tooltip } from '@oasisprotocol/ui-library/src/components/ui/tooltipWrapper'
 import { useScreenSize } from '../../hooks/useScreensize'
 
 type MaybeWithTooltipProps = {
@@ -30,7 +30,6 @@ export const MaybeWithTooltip: FC<MaybeWithTooltipProps> = ({ title, children, s
   const { isMobile } = useScreenSize()
   return (
     <Tooltip
-      placement="top"
       title={
         <Box
           sx={{
@@ -45,9 +44,6 @@ export const MaybeWithTooltip: FC<MaybeWithTooltipProps> = ({ title, children, s
           {title}
         </Box>
       }
-      disableFocusListener={!title}
-      disableHoverListener={!title}
-      disableTouchListener={!title}
     >
       <Box
         component="span"
diff --git a/src/app/components/TransactionEncryptionStatus/index.tsx b/src/app/components/TransactionEncryptionStatus/index.tsx
diff --git a/src/app/components/Transactions/TransactionDetailsElements.tsx b/src/app/components/Transactions/TransactionDetailsElements.tsx
diff --git a/src/app/pages/NFTInstanceDashboardPage/InstanceImageCard.tsx b/src/app/pages/NFTInstanceDashboardPage/InstanceImageCard.tsx
diff --git a/src/app/pages/ParatimeDashboardPage/Nodes.tsx b/src/app/pages/ParatimeDashboardPage/Nodes.tsx
diff --git a/src/app/pages/ProposalDetailsPage/index.tsx b/src/app/pages/ProposalDetailsPage/index.tsx
diff --git a/src/app/pages/RoflAppDetailsPage/GridRow.tsx b/src/app/pages/RoflAppDetailsPage/GridRow.tsx
diff --git a/src/app/pages/RoflAppDetailsPage/index.tsx b/src/app/pages/RoflAppDetailsPage/index.tsx
diff --git a/src/styles/theme/index.ts b/src/styles/theme/index.ts
