Merge pull request #2299 from oasisprotocol/mz/uil-tooltip-2

Replace MUI Tooltip with Oasis UI Library component

Author: buberdds

.changelog/2299.internal.md

@@ -0,0 +1 @@
+Replace MUI Tooltip with Oasis UI Library component

playwright/tests/getPreciseNumberFormat.spec.ts

@@ -52,8 +52,8 @@ async function setup(page: Page, balance: string, decimals: number) {
 
   // Trigger tooltips to find all precise numbers
   await page.evaluate(() => {
-    document.querySelectorAll('[aria-label]').forEach(el => {
-      el.dispatchEvent(new MouseEvent('mouseover', { view: window, bubbles: true, cancelable: true }))
+    document.querySelectorAll('[data-slot="tooltip-trigger"]').forEach(el => {
+      el.dispatchEvent(new MouseEvent('focusin', { view: window, bubbles: true, cancelable: true }))
     })
   })
 }
@@ -62,7 +62,7 @@ test.describe('getPreciseNumberFormat', () => {
   test('small number should be precise and formatted', async ({ page }) => {
     await setup(page, '111222333444555', 9)
     // Expect precisely formatted small number even when browser doesn't support precise formatting for large numbers
-    await expect(page.getByText('111,222.333444555', { exact: true })).toBeVisible()
+    await expect(page.getByText('111,222.333444555', { exact: true }).first()).toBeVisible()
   })
 
   test('large number should be precise and formatted or fallback to precise unformatted number in browsers without support', async ({
@@ -72,8 +72,9 @@ test.describe('getPreciseNumberFormat', () => {
     await expect(
       page
         .getByText('111,222,333,444,555,666,777,888,999.111222333444555666', { exact: true })
+        .first()
         // Expect precise fallback when browser doesn't support precise formatting
-        .or(page.getByText('111222333444555666777888999.111222333444555666', { exact: true })),
+        .or(page.getByText('111222333444555666777888999.111222333444555666', { exact: true }).first()),
     ).toBeVisible()
   })
 
@@ -82,7 +83,7 @@ test.describe('getPreciseNumberFormat', () => {
   }) => {
     await setup(page, '111222333444555666777888999111222333444555666', 36)
     await expect(
-      page.getByText('111222333.444555666777888999111222333444555666', { exact: true }),
+      page.getByText('111222333.444555666777888999111222333444555666', { exact: true }).first(),
     ).toBeVisible()
   })
 })

src/app/components/RoundedBalance/index.tsx

@@ -1,8 +1,7 @@
 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 { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { SearchScope } from '../../../types/searchScope'
 import { TokenLink } from '../Tokens/TokenLink'
 import { PlaceholderLabel } from '../../utils/PlaceholderLabel'
@@ -53,13 +52,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}
@@ -96,13 +89,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}

src/app/components/TableCellAge/index.tsx

@@ -1,8 +1,7 @@
 import { FC } from 'react'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { formatDistanceToNow } from '../../utils/dateFormatter'
 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'
@@ -31,15 +30,15 @@ export const TableCellAge: FC<{ sinceTimestamp: string }> = ({ sinceTimestamp })
     addSuffix: true,
   })
   const title = (
-    <span>
-      {defaultFormatted}
+    <>
+      <div className="font-medium">{defaultFormatted}</div>
       <div className="font-normal">{distanceWithSuffix}</div>
-    </span>
+    </>
   )
   const content = ageHeaderType === TableAgeType.DateTime ? tableFormatted : distance
 
   return (
-    <Tooltip title={title} enterDelay={tooltipDelay} placement={'top'}>
+    <Tooltip title={title}>
       <div>{content}</div>
     </Tooltip>
   )

src/app/components/Tokens/TokenLinkWithIcon.tsx

@@ -4,7 +4,7 @@ import { SearchScope } from '../../../types/searchScope'
 import { TokenLink } from './TokenLink'
 import { useAccountMetadata } from '../../hooks/useAccountMetadata'
 import { InitialsAvatar } from '../AccountAvatar/InitialsAvatar'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { Trans, useTranslation } from 'react-i18next'
 
 export const TokenLinkWithIcon: FC<{
@@ -18,9 +18,6 @@ export const TokenLinkWithIcon: FC<{
   return (
     <div className="flex items-center gap-2">
       <Tooltip
-        placement="top"
-        arrow
-        slotProps={{ tooltip: { sx: { fontWeight: 'normal' } } }}
         title={
           metadata?.origin && (
             <Trans

src/app/pages/RoflAppDetailsPage/GridRow.tsx

@@ -1,6 +1,6 @@
 import { FC, ReactNode } from 'react'
 import { useTranslation } from 'react-i18next'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import InfoIcon from '@mui/icons-material/Info'
 import { COLORS } from '../../../styles/theme/colors'
 
@@ -18,7 +18,7 @@ export const GridRow: FC<GridRowProps> = ({ label, children, tooltip }) => {
       <div className="col-span-1 border-b border-gray-100 p-2 md:p-4 flex gap-1">
         {label}:
         {tooltip && (
-          <Tooltip title={tooltip} placement="top">
+          <Tooltip title={tooltip}>
             <InfoIcon htmlColor={COLORS.brandDark} fontSize="small" />
           </Tooltip>
         )}