Skip to content

Commit 47d7aa5

Browse files
0xonramp0xonramp
authored
Merge pull request #1795 from IndexCoop/chore/refactor-tooltip-usage
chore: refactor tooltip usage
2 parents 7d13309 + 7ee705d commit 47d7aa5

File tree

5 files changed

+88
-112
lines changed

5 files changed

+88
-112
lines changed

‎src/app/presales/components/pre-sale-token-card/index.tsx‎

Lines changed: 27 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,9 @@
1-
import { Tooltip } from '@chakra-ui/react'
21
import clsx from 'clsx'
32
import Image from 'next/image'
43
import { useMemo } from 'react'
54

65
import { usePresaleData } from '@/app/presales/providers/presale-provider'
7-
import { colors } from '@/lib/styles/colors'
6+
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/tooltip'
87

98
import { presaleButtonLabels } from '../../constants'
109
import { PreSaleStatus, PreSaleToken } from '../../types'
@@ -85,40 +84,34 @@ export function PreSaleTokenCard({ token, onClick }: Props) {
8584
<p className='text-ic-gray-400 mb-6 text-xs font-medium md:min-h-8 lg:min-h-0'>
8685
Components from {token.componentsFrom.join(', ')}
8786
</p>
88-
<Tooltip
89-
className='bg-ic-white'
90-
borderRadius='6px'
91-
fontSize={'11px'}
92-
fontWeight={500}
93-
label='This shows the total number of PRTs distributed between presale participants. Individual rewards will be shown in the deposit widget.'
94-
p='12px 16px'
95-
placement='bottom-start'
96-
textColor={colors.ic.gray[600]}
97-
>
98-
<div className='bg-ic-gray-50 border-ic-gray-300 text-ic-gray-500 w-full rounded-xl border px-3 py-5 text-xs font-medium'>
99-
<div className='flex'>
100-
<div
101-
className={clsx('flex-1', isStatusClosed && 'text-ic-gray-400')}
102-
>
103-
Total PRT Rewards
104-
</div>
105-
<div
106-
className={
107-
isStatusClosed ? 'text-ic-gray-500' : 'text-ic-gray-800'
108-
}
87+
<Tooltip placement='bottom-start'>
88+
<TooltipTrigger className='bg-ic-gray-50 border-ic-gray-300 text-ic-gray-500 flex w-full rounded-xl border px-3 py-5 text-xs font-medium'>
89+
<div
90+
className={clsx(
91+
'flex flex-1',
92+
isStatusClosed && 'text-ic-gray-400',
93+
)}
94+
>
95+
Total PRT Rewards
96+
</div>
97+
<div
98+
className={isStatusClosed ? 'text-ic-gray-500' : 'text-ic-gray-800'}
99+
>
100+
<span
101+
className={clsx(
102+
'font-bold',
103+
isStatusClosed ? 'text-ic-gray-500' : 'text-ic-gray-950',
104+
)}
109105
>
110-
<span
111-
className={clsx(
112-
'font-bold',
113-
isStatusClosed ? 'text-ic-gray-500' : 'text-ic-gray-950',
114-
)}
115-
>
116-
{token.prtRewards}
117-
</span>{' '}
118-
PRTs
119-
</div>
106+
{token.prtRewards}
107+
</span>{' '}
108+
PRTs
120109
</div>
121-
</div>
110+
</TooltipTrigger>
111+
<TooltipContent className='bg-ic-white text-ic-gray-600 max-w-xs rounded-md border-[0.5px] border-gray-300 px-1.5 py-3 text-left text-[11px] font-medium'>
112+
This shows the total number of PRTs distributed between presale
113+
participants. Individual rewards will be shown in the deposit widget.
114+
</TooltipContent>
122115
</Tooltip>
123116
<div className='text-ic-gray-600 w-full px-3 py-5 text-xs font-medium'>
124117
<div className='mb-2 flex'>

‎src/app/prt-staking/components/prt-section/prt-card.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export function PrtCard({ onClick }: Props) {
6565
return (
6666
<div className='border-ic-gray-100 bg-ic-white min-w-80 flex-1 flex-col rounded-3xl border px-4 py-5'>
6767
<div className='mb-4 flex font-bold tracking-wider'>
68-
<div className='flex flex-1 items-center'>
68+
<div className='text-ic-black flex flex-1 items-center'>
6969
<div className='my-auto mr-2 overflow-hidden rounded-full'>
7070
<Image
7171
src={token.rewardTokenData.logoURI}

‎src/components/swap/components/trade-details/index.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,13 @@ import Image from 'next/image'
1212
import { useState } from 'react'
1313

1414
import { StyledSkeleton } from '@/components/skeleton'
15+
import { Tag } from '@/components/swap/components/trade-details/tag'
1516
import { QuoteType } from '@/lib/hooks/use-best-quote/types'
1617
import { colors, useColorStyles } from '@/lib/styles/colors'
18+
import { cn } from '@/lib/utils/tailwind'
1719

1820
import { TradeInfoItem } from '../../types'
1921

20-
import { Tag } from './tag'
2122
import { FlashMintTag } from './tag-flashmint'
2223
import { TradeInfoItemsContainer } from './trade-info'
2324
import { TradePrice } from './trade-price'
@@ -105,7 +106,7 @@ export const TradeDetails = (props: TradeDetailsProps) => {
105106
)}
106107
</Box>
107108
</Flex>
108-
<Flex opacity={isExpanded ? 0 : 1} gap={4}>
109+
<div className={cn('flex gap-4', isExpanded && 'hidden')}>
109110
{!isLoading &&
110111
props.selectedQuoteType === QuoteType.index && (
111112
<Tag label={'LI.FI'} />
@@ -115,7 +116,7 @@ export const TradeDetails = (props: TradeDetailsProps) => {
115116
<FlashMintTag />
116117
)}
117118
{isLoading && <StyledSkeleton width={70} />}
118-
</Flex>
119+
</div>
119120
</>
120121
</Flex>
121122
<AccordionIcon />

‎src/components/swap/components/trade-details/tag-flashmint.tsx‎

Lines changed: 10 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,14 @@
1-
import { Text, Tooltip } from '@chakra-ui/react'
2-
3-
import { colors } from '@/lib/styles/colors'
1+
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/tooltip'
42

53
export const FlashMintTag = () => (
6-
<Tooltip
7-
className='bg-ic-white'
8-
borderRadius='6px'
9-
fontSize={'11px'}
10-
fontWeight={500}
11-
hasArrow
12-
label={
13-
'Flash Mint enables users to indirectly buy components of an Index token and then mint a new unit, providing significant cost savings and deep liquidity for large cryptocurrency trades.'
14-
}
15-
p='12px 16px'
16-
placement='right-end'
17-
textColor={colors.ic.gray[600]}
18-
>
19-
<Text fontSize='12px' fontWeight={600} textColor={colors.ic.gray[600]}>
20-
Flash Mint
21-
</Text>
4+
<Tooltip placement='bottom-end'>
5+
<TooltipTrigger className='text-ic-gray-500 flex w-full px-3 py-1 text-xs font-medium'>
6+
<p className='text-ic-gray-600 text-xs font-semibold'>Flash Mint</p>
7+
</TooltipTrigger>
8+
<TooltipContent className='bg-ic-white text-ic-gray-600 max-w-xs rounded-md border-[0.5px] border-gray-300 px-4 py-3 text-left text-[11px] font-medium'>
9+
Flash Mint enables users to indirectly buy components of an Index token
10+
and then mint a new unit, providing significant cost savings and deep
11+
liquidity for large cryptocurrency trades.
12+
</TooltipContent>
2213
</Tooltip>
2314
)

‎src/components/swap/components/trade-details/trade-info.tsx‎

Lines changed: 46 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import { Box, Flex, Link, Text, Tooltip } from '@chakra-ui/react'
2-
31
import { StyledSkeleton } from '@/components/skeleton'
4-
import { colors } from '@/lib/styles/colors'
2+
import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/tooltip'
53
import { shortenAddress } from '@/lib/utils'
4+
import { cn } from '@/lib/utils/tailwind'
65

76
import { TradeInfoItem } from '../../types'
87

@@ -11,57 +10,49 @@ type TradeInfoItemRowProps = {
1110
isLoading: boolean
1211
}
1312

14-
const TradeInfoItemRow = (props: TradeInfoItemRowProps) => {
15-
const { isLoading, item } = props
13+
const TradeInfoItemRow = ({ isLoading, item }: TradeInfoItemRowProps) => {
1614
const { title, values, tooltip, isLink } = item
17-
const cursor = tooltip && tooltip.length > 0 ? 'pointer' : 'default'
1815
return (
19-
<Tooltip
20-
// need to set bg color here, as otherwise the arrow won't display correctly
21-
bgColor={colors.ic.white}
22-
className='bg-ic-white text-ic-gray-600 rounded-md px-4 py-3 text-[11px] font-medium'
23-
hasArrow
24-
label={tooltip}
25-
placement='right-end'
26-
>
27-
<Flex cursor={cursor} direction='row' justifyContent={'space-between'}>
28-
<Flex align='center'>
29-
<Text
30-
fontSize='12px'
31-
fontWeight='500'
32-
textColor={colors.ic.gray[400]}
33-
>
34-
{title}
35-
</Text>
36-
</Flex>
37-
{isLoading && <StyledSkeleton width={60} />}
38-
{!isLoading && isLink === true && (
39-
<Link isExternal href={values[1]}>
40-
<Text
41-
fontSize='12px'
42-
fontWeight='700'
43-
textColor={colors.ic.gray[600]}
44-
>
45-
{shortenAddress(values[0])}
46-
</Text>
47-
</Link>
48-
)}
49-
{!isLoading && (isLink === undefined || isLink === false) && (
50-
<Flex>
51-
{values.map((value, index) => (
52-
<Flex key={index} flexDir={'row'}>
53-
<Text
54-
fontSize='12px'
55-
fontWeight='700'
56-
textColor={colors.ic.gray[600]}
57-
>
58-
{value}
59-
</Text>
60-
</Flex>
61-
))}
62-
</Flex>
16+
<Tooltip placement='bottom'>
17+
<TooltipTrigger
18+
className={cn(
19+
'text-ic-gray-600 flex w-full justify-between text-[11px] font-medium',
20+
tooltip && tooltip.length > 0 ? 'cursor-pointer' : 'cursor-default',
6321
)}
64-
</Flex>
22+
>
23+
<div className='flex w-full'>
24+
<div className='flex flex-1 items-center'>
25+
<p className='text-ic-gray-400 text-xs font-medium'>{title}</p>
26+
</div>
27+
{isLoading && <StyledSkeleton width={60} />}
28+
{!isLoading && isLink === true && (
29+
<a target='_blank' href={values[1]}>
30+
<p className='text-ic-gray-600 text-xs font-bold'>
31+
{shortenAddress(values[0])}
32+
</p>
33+
</a>
34+
)}
35+
{!isLoading && (isLink === undefined || isLink === false) && (
36+
<div className='flex'>
37+
{values.map((value, index) => (
38+
<div className='flex' key={index}>
39+
<p className='text-ic-gray-600 text-xs font-bold'>{value}</p>
40+
</div>
41+
))}
42+
</div>
43+
)}
44+
</div>
45+
</TooltipTrigger>
46+
{tooltip && (
47+
<TooltipContent
48+
className={cn(
49+
'bg-ic-white text-ic-gray-600 flex justify-between rounded-md px-4 py-3 text-[11px] font-medium',
50+
tooltip && tooltip.length > 0 ? 'cursor-pointer' : 'cursor-default',
51+
)}
52+
>
53+
{tooltip}
54+
</TooltipContent>
55+
)}
6556
</Tooltip>
6657
)
6758
}
@@ -76,12 +67,12 @@ export const TradeInfoItemsContainer = ({
7667
items,
7768
}: TradeInfoItemsContainerProps) => {
7869
return (
79-
<Flex direction='column'>
70+
<div className='flex flex-col'>
8071
{items.map((item, index) => (
81-
<Box key={index} mb={'0'} paddingTop={index === 0 ? '0' : '16px'}>
72+
<div key={index} className={cn('mb-0', index !== 0 && 'pt-4')}>
8273
<TradeInfoItemRow item={item} isLoading={isLoading} />
83-
</Box>
74+
</div>
8475
))}
85-
</Flex>
76+
</div>
8677
)
8778
}

0 commit comments

Comments
 (0)