Skip to content

Commit c877853

Browse files
buberddsbuberdds
authored
Merge pull request #2024 from oasisprotocol/mz/uil-tooltip
Replace MUI Tooltip with Oasis UI Library component
2 parents 1825855 + 1dbff26 commit c877853

22 files changed

Lines changed: 50 additions & 87 deletions

File tree

‎.changelog/2024.internal.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
Replace MUI Tooltip with Oasis UI Library component

‎src/app/components/AccountSizeBadge/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { useTranslation } from 'react-i18next'
2-
import Tooltip from '@mui/material/Tooltip'
2+
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
33
import { FC } from 'react'
44

55
type AccountSizeBadgeProps = {
@@ -10,7 +10,7 @@ export const AccountSizeBadge: FC<AccountSizeBadgeProps> = ({ size }) => {
1010
const { t } = useTranslation()
1111

1212
return (
13-
<Tooltip arrow placement="top" title={t('account.sizeTooltip', { size })}>
13+
<Tooltip title={t('account.sizeTooltip', { size })}>
1414
<div className="flex justify-center items-center w-9 h-9 rounded-full text-xs text-white font-semibold bg-primary">
1515
{size}
1616
</div>

‎src/app/components/Balance/FiatMoneyAmount.tsx‎

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,13 @@ import { useTranslation } from 'react-i18next'
33
import { FC } from 'react'
44
import { CoinGeckoReferral } from '../CoinGeckoReferral'
55
import { FiatValueInfo } from './hooks'
6-
import Tooltip from '@mui/material/Tooltip'
6+
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
77
import { Skeleton } from '@oasisprotocol/ui-library/src/components/ui/skeleton'
88

99
export const FiatMoneyWarning: FC<{ unknownTickers: string[] }> = ({ unknownTickers }) => {
1010
const { t } = useTranslation()
1111
return (
12-
<Tooltip
13-
title={t('account.failedToLookUpTickers', { tickers: unknownTickers.join(', ') })}
14-
placement="top"
15-
>
12+
<Tooltip title={t('account.failedToLookUpTickers', { tickers: unknownTickers.join(', ') })}>
1613
<WarningIcon />
1714
</Tooltip>
1815
)
@@ -27,6 +24,7 @@ export const FiatMoneyAmount: FC<FiatValueInfo> = ({
2724
}) => {
2825
const { t } = useTranslation()
2926
const hasFailed = !!unknownTickers.length
27+
3028
return (
3129
<div className="flex items-center justify-between gap-1 flex-1">
3230
<span>

‎src/app/components/BlockNavigationButtons/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FC } from 'react'
22
import { Link as RouterLink, useSearchParams } from 'react-router-dom'
33
import { useTranslation } from 'react-i18next'
44
import { PaginationNext, PaginationPrevious } from '@oasisprotocol/ui-library/src/components/pagination'
5-
import Tooltip from '@mui/material/Tooltip'
5+
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
66
import { ConsensusScope, RuntimeScope, SearchScope } from '../../../types/searchScope'
77
import { useConsensusFreshness, useRuntimeFreshness } from '../OfflineBanner/hook'
88
import { RouteUtils } from '../../utils/route-utils'
@@ -13,7 +13,7 @@ const PrevBlockButton: FC<{ scope: SearchScope; currentRound: number }> = ({ sco
1313
const [searchParams] = useSearchParams()
1414
const disabled = currentRound === 0
1515
return (
16-
<Tooltip title={disabled ? t('blocks.viewingFirst') : t('blocks.viewPrevious')} placement="top">
16+
<Tooltip title={disabled ? t('blocks.viewingFirst') : t('blocks.viewPrevious')}>
1717
<div className="ml-4">
1818
<PaginationPrevious
1919
linkComponent={RouterLink}
@@ -36,7 +36,7 @@ const NextBlockButton: FC<{ disabled: boolean; scope: SearchScope; currentRound:
3636
const { t } = useTranslation()
3737
const [searchParams] = useSearchParams()
3838
return (
39-
<Tooltip title={disabled ? t('blocks.viewingLatest') : t('blocks.viewNext')} placement="top">
39+
<Tooltip title={disabled ? t('blocks.viewingLatest') : t('blocks.viewNext')}>
4040
<div>
4141
<PaginationNext
4242
linkComponent={RouterLink}

‎src/app/components/BlockStats/index.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { ReactNode } from 'react'
2-
import Tooltip from '@mui/material/Tooltip'
2+
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
33
import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
44

55
const Square = ({ success, size = 32 }: { success?: boolean; size?: number }) => {
@@ -43,9 +43,12 @@ export const BlockStats = <T extends { [key: string]: any }>({
4343
<div className="flex flex-wrap gap-2">
4444
{data.map(item => {
4545
const title = tooltipFormatter ? tooltipFormatter(item[dataKey].toString()) : item[dataKey]
46+
4647
return (
47-
<Tooltip key={item[dataKey]} title={title} placement="top">
48-
<Square success={item[statusKey]} />
48+
<Tooltip key={item[dataKey]} title={title}>
49+
<div>
50+
<Square success={item[statusKey]} />
51+
</div>
4952
</Tooltip>
5053
)
5154
})}

‎src/app/components/CopyToClipboard/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FC, useCallback, useEffect, useRef, useState } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import Tooltip from '@mui/material/Tooltip'
3+
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
44
import ContentCopyIcon from '@mui/icons-material/ContentCopy'
55
import { COLORS } from '../../../styles/theme/colors'
66
import { cn } from '@oasisprotocol/ui-library/src/lib/utils'
@@ -39,7 +39,7 @@ export const CopyToClipboard: FC<CopyToClipboardProps> = ({ className, value })
3939
}, [])
4040

4141
return (
42-
<Tooltip arrow onOpen={hideTooltip} open={isCopied} placement="right" title={t('clipboard.success')}>
42+
<Tooltip onOpenChange={hideTooltip} open={isCopied} side="right" title={t('clipboard.success')}>
4343
<button
4444
onClick={handleCopyToClipboard}
4545
aria-label={ariaLabel}

‎src/app/components/CurrentFiatValue/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import { FiatMoneyWarning } from '../Balance/FiatMoneyAmount'
4-
import Tooltip from '@mui/material/Tooltip'
4+
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
55
import { CoinGeckoReferral } from '../CoinGeckoReferral'
66
import HelpIcon from '@mui/icons-material/Help'
77
import { TokenPriceInfo } from '../../../coin-gecko/api'

‎src/app/components/LayerPicker/LayerMenu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FC, PropsWithChildren, useState } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import Typography from '@mui/material/Typography'
44
import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight'
5-
import Tooltip from '@mui/material/Tooltip'
5+
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
66
import { COLORS } from '../../../styles/theme/colors'
77
import { Layer } from '../../../oasis-nexus/api'
88
import { getLayerLabels } from '../../utils/content'
@@ -34,7 +34,7 @@ export const DisabledLayerMenuItem: FC<BaseLayerMenuItemProps> = ({ divider, tar
3434
const labels = getLayerLabels(t)
3535

3636
return (
37-
<Tooltip arrow placement="top" title={t('layerPicker.comingSoonTitle')}>
37+
<Tooltip title={t('layerPicker.comingSoonTitle')}>
3838
{/* Div is needed because we need an element with enabled pointer-events to make Tooltip work */}
3939
<div>
4040
<MenuItem disabled divider={divider}>

‎src/app/components/LayerStatus/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
33
import CheckCircleIcon from '@mui/icons-material/CheckCircle'
44
import ErrorIcon from '@mui/icons-material/Error'
5-
import Tooltip from '@mui/material/Tooltip'
5+
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
66

77
type LayerStatusProps = {
88
isOutOfDate?: boolean

‎src/app/components/NetworkProposalsList/index.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { FC } from 'react'
22
import { useTranslation } from 'react-i18next'
3-
import Tooltip from '@mui/material/Tooltip'
3+
import { Tooltip } from '@oasisprotocol/ui-library/src/components/tooltip'
44
import { Table, TableCellAlign, TableColProps } from '../../components/Table'
55
import { Proposal } from '../../../oasis-nexus/api'
66
import { TablePaginationProps } from '../Table/TablePagination'
@@ -65,7 +65,7 @@ export const NetworkProposalsList: FC<NetworkProposalsListProps> = ({
6565
{
6666
align: TableCellAlign.Right,
6767
content: (
68-
<Tooltip title={t('networkProposal.createTooltip')} placement={'top'}>
68+
<Tooltip title={t('networkProposal.createTooltip')}>
6969
<div>{proposal.created_at}</div>
7070
</Tooltip>
7171
),
@@ -74,7 +74,7 @@ export const NetworkProposalsList: FC<NetworkProposalsListProps> = ({
7474
{
7575
align: TableCellAlign.Right,
7676
content: (
77-
<Tooltip title={t('networkProposal.closeTooltip')} placement={'top'}>
77+
<Tooltip title={t('networkProposal.closeTooltip')}>
7878
<div>{proposal.closes_at}</div>
7979
</Tooltip>
8080
),

0 commit comments

Comments
 (0)