Replace MUI Tooltip with Oasis UI Library component

.changelog/2024.internal.md

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

src/app/components/AccountSizeBadge/index.tsx

@@ -1,5 +1,5 @@
 import { useTranslation } from 'react-i18next'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { FC } from 'react'
 
 type AccountSizeBadgeProps = {
@@ -10,7 +10,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 })}>
       <div className="flex justify-center items-center w-9 h-9 rounded-full text-xs text-white font-semibold bg-primary">
         {size}
       </div>

src/app/components/Balance/FiatMoneyAmount.tsx

@@ -3,16 +3,13 @@ import { useTranslation } from 'react-i18next'
 import { FC } from 'react'
 import { CoinGeckoReferral } from '../CoinGeckoReferral'
 import { FiatValueInfo } from './hooks'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
 
 export const FiatMoneyWarning: FC<{ unknownTickers: string[] }> = ({ unknownTickers }) => {
   const { t } = useTranslation()
   return (
-    <Tooltip
-      title={t('account.failedToLookUpTickers', { tickers: unknownTickers.join(', ') })}
-      placement="top"
-    >
+    <Tooltip title={t('account.failedToLookUpTickers', { tickers: unknownTickers.join(', ') })}>
       <WarningIcon />
     </Tooltip>
   )
@@ -27,6 +24,7 @@ export const FiatMoneyAmount: FC<FiatValueInfo> = ({
 }) => {
   const { t } = useTranslation()
   const hasFailed = !!unknownTickers.length
+
   return (
     <div className="flex items-center justify-between gap-1 flex-1">
       <span>

src/app/components/BlockNavigationButtons/index.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { Link as RouterLink, useSearchParams } from 'react-router-dom'
 import { useTranslation } from 'react-i18next'
 import { PaginationNext, PaginationPrevious } from '@oasisprotocol/ui-library/src/components/pagination'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { ConsensusScope, RuntimeScope, SearchScope } from '../../../types/searchScope'
 import { useConsensusFreshness, useRuntimeFreshness } from '../OfflineBanner/hook'
 import { RouteUtils } from '../../utils/route-utils'
@@ -13,7 +13,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')}>
       <div className="ml-4">
         <PaginationPrevious
           linkComponent={RouterLink}
@@ -36,7 +36,7 @@ const NextBlockButton: FC<{ disabled: boolean; scope: SearchScope; currentRound:
   const { t } = useTranslation()
   const [searchParams] = useSearchParams()
   return (
-    <Tooltip title={disabled ? t('blocks.viewingLatest') : t('blocks.viewNext')} placement="top">
+    <Tooltip title={disabled ? t('blocks.viewingLatest') : t('blocks.viewNext')}>
       <div>
         <PaginationNext
           linkComponent={RouterLink}

src/app/components/BlockStats/index.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
 
 const Square = ({ success, size = 32 }: { success?: boolean; size?: number }) => {
@@ -43,9 +43,12 @@ export const BlockStats = <T extends { [key: string]: any }>({
       <div className="flex flex-wrap gap-2">
         {data.map(item => {
           const title = tooltipFormatter ? tooltipFormatter(item[dataKey].toString()) : item[dataKey]
+
           return (
-            <Tooltip key={item[dataKey]} title={title} placement="top">
-              <Square success={item[statusKey]} />
+            <Tooltip key={item[dataKey]} title={title}>
+              <div>
+                <Square success={item[statusKey]} />
+              </div>
             </Tooltip>
           )
         })}

src/app/components/CopyToClipboard/index.tsx

@@ -1,6 +1,6 @@
 import { FC, useCallback, useEffect, useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import { COLORS } from '../../../styles/theme/colors'
 import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
@@ -39,7 +39,7 @@ export const CopyToClipboard: FC<CopyToClipboardProps> = ({ className, value })
   }, [])
 
   return (
-    <Tooltip arrow onOpen={hideTooltip} open={isCopied} placement="right" title={t('clipboard.success')}>
+    <Tooltip onOpenChange={hideTooltip} open={isCopied} side="right" title={t('clipboard.success')}>
       <button
         onClick={handleCopyToClipboard}
         aria-label={ariaLabel}

src/app/components/CurrentFiatValue/index.tsx

@@ -1,7 +1,7 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FiatMoneyWarning } from '../Balance/FiatMoneyAmount'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { CoinGeckoReferral } from '../CoinGeckoReferral'
 import HelpIcon from '@mui/icons-material/Help'
 import { TokenPriceInfo } from '../../../coin-gecko/api'

src/app/components/LayerPicker/LayerMenu.tsx

@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import Typography from '@mui/material/Typography'
 import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { COLORS } from '../../../styles/theme/colors'
 import { Layer } from '../../../oasis-nexus/api'
 import { getLayerLabels } from '../../utils/content'
@@ -34,7 +34,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}>

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 { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 
 type LayerStatusProps = {
   isOutOfDate?: boolean

src/app/components/NetworkProposalsList/index.tsx

@@ -1,6 +1,6 @@
 import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { Table, TableCellAlign, TableColProps } from '../../components/Table'
 import { Proposal } from '../../../oasis-nexus/api'
 import { TablePaginationProps } from '../Table/TablePagination'
@@ -65,7 +65,7 @@ export const NetworkProposalsList: FC<NetworkProposalsListProps> = ({
       {
         align: TableCellAlign.Right,
         content: (
-          <Tooltip title={t('networkProposal.createTooltip')} placement={'top'}>
+          <Tooltip title={t('networkProposal.createTooltip')}>
             <div>{proposal.created_at}</div>
           </Tooltip>
         ),
@@ -74,7 +74,7 @@ export const NetworkProposalsList: FC<NetworkProposalsListProps> = ({
       {
         align: TableCellAlign.Right,
         content: (
-          <Tooltip title={t('networkProposal.closeTooltip')} placement={'top'}>
+          <Tooltip title={t('networkProposal.closeTooltip')}>
             <div>{proposal.closes_at}</div>
           </Tooltip>
         ),

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 { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { PlaceholderLabel } from '../../utils/PlaceholderLabel'
 import { fromBaseUnits } from '../../utils/number-utils'
 import { RoflAppLink } from '../Rofl/RoflAppLink'
@@ -185,13 +184,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),
@@ -219,13 +212,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}`}

src/app/components/StatusIcon/index.tsx

@@ -6,7 +6,7 @@ import { COLORS } from '../../../styles/theme/colors'
 import HelpIcon from '@mui/icons-material/Help'
 import LockIcon from '@mui/icons-material/Lock'
 import { TxError } from '../../../oasis-nexus/api'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { useTxErrorMessage } from '../../hooks/useTxErrorMessage'
 import { TFunction } from 'i18next'
 import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
@@ -148,11 +148,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]}>
         <StatusBadge status={status} withText={withText}>
           {statusIcon[status]}
         </StatusBadge>

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 { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { Typography } from '@oasisprotocol/ui-library/src/components/typography'
 import { styled } from '@mui/material/styles'
-import { tooltipDelay } from '../../../styles/theme'
 
 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 className="text-primary font-semibold">{label}</Typography>
       </StyledButton>

src/app/components/TableLayoutButton/index.tsx

@@ -2,7 +2,7 @@ import { FC } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Button } from '@oasisprotocol/ui-library/src/components/ui/button'
 import PivotTableChartIcon from '@mui/icons-material/PivotTableChart'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 
 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 side="left" title={t('tableLayoutButton.changeView')}>
       <Button
         variant="ghost"
         size="icon"

src/app/components/TransactionEncryptionStatus/index.tsx

@@ -4,8 +4,7 @@ import LockIcon from '@mui/icons-material/Lock'
 import NoEncryptionGmailerrorredIcon from '@mui/icons-material/NoEncryptionGmailerrorred'
 import { COLORS } from '../../../styles/theme/colors'
 import { RuntimeTransactionEncryptionEnvelope } from '../../../oasis-nexus/api'
-import Tooltip from '@mui/material/Tooltip'
-import { tooltipDelay } from '../../../styles/theme'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 
 type TransactionEncryptionStatusProps = {
   envelope?: RuntimeTransactionEncryptionEnvelope
@@ -15,13 +14,7 @@ type TransactionEncryptionStatusProps = {
 export const TransactionEncrypted = () => {
   const { t } = useTranslation()
   return (
-    <Tooltip
-      arrow
-      placement="top"
-      title={t('transaction.tooltips.txEncrypted')}
-      enterDelay={tooltipDelay}
-      enterNextDelay={tooltipDelay}
-    >
+    <Tooltip title={t('transaction.tooltips.txEncrypted')}>
       <LockIcon htmlColor={COLORS.eucalyptus} />
     </Tooltip>
   )
@@ -30,13 +23,7 @@ export const TransactionEncrypted = () => {
 export const TransactionNotEncrypted = () => {
   const { t } = useTranslation()
   return (
-    <Tooltip
-      arrow
-      placement="top"
-      title={<Trans t={t} i18nKey="transaction.tooltips.txNotEncrypted" />}
-      enterDelay={tooltipDelay}
-      enterNextDelay={tooltipDelay}
-    >
+    <Tooltip title={<Trans t={t} i18nKey="transaction.tooltips.txNotEncrypted" />}>
       <NoEncryptionGmailerrorredIcon htmlColor={COLORS.grayMedium2} />
     </Tooltip>
   )

src/app/components/Transactions/TransactionDetailsElements.tsx

@@ -1,10 +1,9 @@
 import { FC, PropsWithChildren } from 'react'
 import { useTranslation } from 'react-i18next'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import Typography from '@mui/material/Typography'
 import { SearchScope } from '../../../types/searchScope'
 import { COLORS } from '../../../styles/theme/colors'
-import { tooltipDelay } from '../../../styles/theme'
 import { RoundedBalance } from '../../components/RoundedBalance'
 import { trimLongString } from '../../utils/trimLongString'
 import { useScreenSize } from '../../hooks/useScreensize'
@@ -102,7 +101,7 @@ export const LabelValue: FC<LabelValueProps> = ({ label, trimMobile, value }) =>
     <div className="inline-flex">
       <Label>{label || t('common.amount')}</Label>
       {trimEnabled ? (
-        <Tooltip arrow placement="top" title={value} enterDelay={tooltipDelay} enterNextDelay={tooltipDelay}>
+        <Tooltip title={value}>
           <span>{trimLongString(value, 2, 18)}</span>
         </Tooltip>
       ) : (

src/app/pages/NFTInstanceDashboardPage/InstanceImageCard.tsx

@@ -5,7 +5,7 @@ import { Card, CardContent } from '@oasisprotocol/ui-library/src/components/card
 import ContrastIcon from '@mui/icons-material/Contrast'
 import Link from '@mui/material/Link'
 import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
-import Tooltip from '@mui/material/Tooltip'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import OpenInFullIcon from '@mui/icons-material/OpenInFull'
 import { styled } from '@mui/material/styles'
 import { EvmNft } from 'oasis-nexus/api'

src/app/pages/ParatimeDashboardPage/Nodes.tsx

@@ -6,8 +6,7 @@ import InfoIcon from '@mui/icons-material/Info'
 import { SnapshotCard } from '../../components/Snapshots/SnapshotCard'
 import { COLORS } from '../../../styles/theme/colors'
 import { useGetRuntimeStatus } from '../../../oasis-nexus/api'
-import Tooltip from '@mui/material/Tooltip'
-import { tooltipDelay } from '../../../styles/theme'
+import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
 import { RuntimeScope } from '../../../types/searchScope'
 
 export const Nodes: FC<{ scope: RuntimeScope }> = ({ scope }) => {
@@ -17,13 +16,7 @@ export const Nodes: FC<{ scope: RuntimeScope }> = ({ scope }) => {
   const title = (
     <div className="flex justify-between items-center w-full">
       {t('nodes.title')}
-      <Tooltip
-        arrow
-        placement="top"
-        title={t('nodes.tooltip')}
-        enterDelay={tooltipDelay}
-        enterNextDelay={tooltipDelay}
-      >
+      <Tooltip title={t('nodes.tooltip')}>
         <InfoIcon htmlColor={COLORS.brandDark} />
       </Tooltip>
     </div>

src/app/pages/ProposalDetailsPage/index.tsx

@@ -1,6 +1,6 @@
 import { FC } 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 CancelIcon from '@mui/icons-material/Cancel'
 import { useConsensusScope } from '../../hooks/useScopeParam'
@@ -143,7 +143,7 @@ export const ProposalDetailView: FC<{
 
       <dt>{t('networkProposal.create')}</dt>
       <dd>
-        <Tooltip title={t('networkProposal.createTooltip')} placement={'top'}>
+        <Tooltip title={t('networkProposal.createTooltip')}>
           <div className="flex gap-1 items-center">
             {proposal.created_at}
             <InfoIcon htmlColor={COLORS.brandDark} />
@@ -153,7 +153,7 @@ export const ProposalDetailView: FC<{
 
       <dt>{t('networkProposal.close')}</dt>
       <dd>
-        <Tooltip title={t('networkProposal.closeTooltip')} placement={'top'}>
+        <Tooltip title={t('networkProposal.closeTooltip')}>
           <div className="flex gap-1 items-center">
             {proposal.closes_at}
             <InfoIcon htmlColor={COLORS.brandDark} />