Skip to content

Commit af88c27

Browse files
0xonramp0xonramp
authored
Merge pull request #1885 from IndexCoop/feat/chakra-modal-refactor
feat: chakra modal refactor
2 parents 19c49ca + 583d0a0 commit af88c27

File tree

6 files changed

+124
-139
lines changed

6 files changed

+124
-139
lines changed

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

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Modal, ModalBody, ModalContent, ModalOverlay } from '@chakra-ui/react'
1+
import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
22

33
import { PrtWidget } from '@/app/prt-staking/components/prt-section/prt-widget'
44
import { usePrtStakingContext } from '@/app/prt-staking/provider'
@@ -14,17 +14,18 @@ export function PrtPopup({ isOpen, onClose }: Props) {
1414
if (!token) return
1515

1616
return (
17-
<Modal onClose={onClose} isOpen={isOpen} isCentered>
18-
<ModalOverlay className='bg-ic-black bg-opacity-60 backdrop-blur' />
19-
<ModalContent className='h-[500px] max-w-4xl bg-transparent shadow-none'>
20-
<ModalBody className='m-0 bg-transparent p-0'>
17+
<Dialog open={isOpen} onClose={onClose} className='relative z-20'>
18+
<DialogBackdrop className='fixed inset-0 bg-black/30' />
19+
20+
<div className='fixed inset-0 flex w-screen items-center justify-center p-4'>
21+
<DialogPanel className='h-[500px] max-w-4xl bg-transparent shadow-none'>
2122
<div className='flex h-full'>
2223
<div className='align-center max-h-4xl mx-auto my-auto flex max-w-4xl flex-row items-start gap-3'>
2324
<PrtWidget token={token} onClose={onClose} />
2425
</div>
2526
</div>
26-
</ModalBody>
27-
</ModalContent>
28-
</Modal>
27+
</DialogPanel>
28+
</div>
29+
</Dialog>
2930
)
3031
}

‎src/app/prt-staking/components/prt-section/safe-sign-button.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export function SafeSignButton() {
3535
return (
3636
<>
3737
<button
38-
className='text-ic-white bg-ic-blue-600 h-14 w-full rounded-[10px] font-bold shadow-[0.5px_1px_2px_0_rgba(0,0,0,0.3)]'
38+
className='text-ic-white bg-ic-blue-600 h-14 w-full rounded-md font-bold shadow-[0.5px_1px_2px_0_rgba(0,0,0,0.3)]'
3939
onClick={onClick}
4040
>
4141
{safeAddress ? 'Sign SafeMessage' : 'Select Safe'}

‎src/app/prt-staking/components/prt-section/select-safe-modal.tsx‎

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
import {
2-
Modal,
3-
ModalBody,
4-
ModalCloseButton,
5-
ModalContent,
6-
ModalHeader,
7-
ModalOverlay,
8-
} from '@chakra-ui/react'
1+
import { Dialog, DialogBackdrop, DialogPanel } from '@headlessui/react'
92
import { Dispatch, SetStateAction } from 'react'
103

114
import { shortenAddress } from '@/lib/utils'
@@ -28,23 +21,24 @@ export const SelectSafeModal = ({
2821
onClose()
2922
}
3023
return (
31-
<Modal onClose={onClose} isOpen={isOpen} isCentered scrollBehavior='inside'>
32-
<ModalOverlay className='bg-ic-black bg-opacity-60 backdrop-blur' />
33-
<ModalContent className='border-ic-gray-100 dark:border-ic-gray-950 bg-ic-white text-ic-black dark:text-ic-white mx-0 my-4 max-h-[50%] rounded-xl border-2 p-0 dark:bg-[#1C2C2E]'>
34-
<ModalHeader>Select a Safe</ModalHeader>
35-
<ModalCloseButton />
36-
<ModalBody className='px-0 py-4'>
37-
{safes.map((safe) => (
38-
<div
39-
key={safe}
40-
className='text-ic-black dark:text-ic-white h-15 hover:bg-ic-gray-100 dark:hover:bg-ic-gray-900 my-1 flex cursor-pointer items-center justify-between px-4 py-2 text-sm font-medium'
41-
onClick={() => handleSafeClick(safe)}
42-
>
43-
{shortenAddress(safe)}
44-
</div>
45-
))}
46-
</ModalBody>
47-
</ModalContent>
48-
</Modal>
24+
<Dialog onClose={onClose} open={isOpen} className='fixed inset-0 z-30'>
25+
<div className='fixed inset-0 flex w-screen items-center justify-center p-4'>
26+
<DialogBackdrop className='fixed inset-0 bg-black/30' />
27+
<DialogPanel className='border-ic-gray-100 bg-ic-white text-ic-black z-50 mx-0 my-4 max-h-[50%] min-w-72 max-w-4xl rounded-xl border-2 p-0 dark:bg-[#1C2C2E]'>
28+
<h4 className='px-6 py-4 text-xl font-semibold'>Select a Safe</h4>
29+
<div className='px-2 py-4'>
30+
{safes.map((safe) => (
31+
<div
32+
key={safe}
33+
className='text-ic-black dark:text-ic-white h-15 hover:bg-ic-gray-100 dark:hover:bg-ic-gray-900 my-1 flex cursor-pointer items-center justify-between px-4 py-2 text-sm font-medium'
34+
onClick={() => handleSafeClick(safe)}
35+
>
36+
{shortenAddress(safe)}
37+
</div>
38+
))}
39+
</div>
40+
</DialogPanel>
41+
</div>
42+
</Dialog>
4943
)
5044
}

‎src/app/prt-staking/components/prt-section/widget-header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ export function WidgetHeader({ tokenData, onClose }: Props) {
2020
width={28}
2121
/>
2222
</div>
23-
<div className='flex-1 self-center'>{`${tokenData.symbol} PRTs`}</div>
23+
<div className='text-ic-black flex-1 self-center'>{`${tokenData.symbol} PRTs`}</div>
2424
<button type='button' onClick={onClose}>
2525
<XMarkIcon className='text-ic-gray-600 size-4' aria-hidden='true' />
2626
</button>

‎src/components/swap/components/select-token-modal.tsx‎

Lines changed: 54 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
import {
2-
Modal,
3-
ModalBody,
4-
ModalCloseButton,
5-
ModalContent,
6-
ModalHeader,
7-
ModalOverlay,
8-
} from '@chakra-ui/react'
2+
Dialog,
3+
DialogBackdrop,
4+
DialogPanel,
5+
DialogTitle,
6+
} from '@headlessui/react'
97
import clsx from 'clsx'
108
import Image from 'next/image'
119
import { useMemo } from 'react'
@@ -41,58 +39,56 @@ export const SelectTokenModal = (props: SelectTokenModalProps) => {
4139

4240
const { balances } = useBalances(props.address, tokenAddresses)
4341
return (
44-
<Modal onClose={onClose} isOpen={isOpen} isCentered scrollBehavior='inside'>
45-
<ModalOverlay className='bg-ic-black bg-opacity-60 backdrop-blur' />
46-
<ModalContent
47-
style={{
48-
backgroundColor: isDarkMode ? '#18181b' : '#FCFFFF',
49-
}}
50-
className={clsx(
51-
'border-ic-gray-100 dark:border-ic-gray-950 bg-ic-white text-ic-black dark:text-ic-white mx-0 my-4 max-h-[50%] rounded-xl border-2 p-0 dark:bg-[#18181b]',
52-
isDarkMode ? 'dark' : '',
53-
)}
54-
>
55-
<ModalHeader className='text-ic-black dark:text-ic-white'>
56-
Select a token
57-
</ModalHeader>
58-
<ModalCloseButton className='text-ic-black dark:text-ic-white' />
59-
<ModalBody className='px-0 py-4'>
60-
{showBalances && (
61-
<div className='flex w-full justify-end pr-4'>
62-
<span className='text-ic-black dark:text-ic-white text-sm font-medium'>
63-
Quantity Owned
64-
</span>
65-
</div>
42+
<Dialog onClose={onClose} open={isOpen} className='relative z-50'>
43+
<DialogBackdrop className='bg-ic-black fixed inset-0 bg-opacity-60 backdrop-blur' />
44+
<div className='fixed inset-0 flex w-screen items-center justify-center p-4'>
45+
<DialogPanel
46+
className={clsx(
47+
'border-ic-gray-100 dark:border-ic-gray-950 bg-ic-white text-ic-black dark:text-ic-white mx-0 my-4 w-full max-w-sm rounded-xl border-2 p-0 dark:bg-[#18181b]',
48+
isDarkMode ? 'dark' : '',
6649
)}
67-
{tokens.length > 0 &&
68-
tokens.map((token) => {
69-
const tokenBalance = balances.find((bal) =>
70-
isSameAddress(
71-
bal.token,
72-
getAddressForToken(token.symbol, chainId) ?? '',
73-
),
74-
)
75-
const balanceDisplay = formatAmountFromWei(
76-
tokenBalance?.value ?? BigInt(0),
77-
token.decimals,
78-
3,
79-
)
80-
return (
81-
<TokenItem
82-
balance={showBalances ? balanceDisplay : ''}
83-
key={token.symbol}
84-
extraTitle={undefined}
85-
item={token}
86-
showNetwork={props.showNetworks}
87-
onClick={() =>
88-
onSelectedToken(token.symbol, token.chainId ?? 1)
89-
}
90-
/>
91-
)
92-
})}
93-
</ModalBody>
94-
</ModalContent>
95-
</Modal>
50+
>
51+
<DialogTitle className='text-ic-black dark:text-ic-white px-6 py-4 text-xl font-semibold'>
52+
Select a token
53+
</DialogTitle>
54+
<div className='px-0 py-4'>
55+
{showBalances && (
56+
<div className='flex w-full justify-end pr-4'>
57+
<span className='text-ic-black dark:text-ic-white text-sm font-medium'>
58+
Quantity Owned
59+
</span>
60+
</div>
61+
)}
62+
{tokens.length > 0 &&
63+
tokens.map((token) => {
64+
const tokenBalance = balances.find((bal) =>
65+
isSameAddress(
66+
bal.token,
67+
getAddressForToken(token.symbol, chainId) ?? '',
68+
),
69+
)
70+
const balanceDisplay = formatAmountFromWei(
71+
tokenBalance?.value ?? BigInt(0),
72+
token.decimals,
73+
3,
74+
)
75+
return (
76+
<TokenItem
77+
balance={showBalances ? balanceDisplay : ''}
78+
key={token.symbol}
79+
extraTitle={undefined}
80+
item={token}
81+
showNetwork={props.showNetworks}
82+
onClick={() =>
83+
onSelectedToken(token.symbol, token.chainId ?? 1)
84+
}
85+
/>
86+
)
87+
})}
88+
</div>
89+
</DialogPanel>
90+
</div>
91+
</Dialog>
9692
)
9793
}
9894

‎src/components/swap/components/transaction-review/index.tsx‎

Lines changed: 39 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import {
2-
Modal,
3-
ModalBody,
4-
ModalCloseButton,
5-
ModalContent,
6-
ModalHeader,
7-
ModalOverlay,
8-
} from '@chakra-ui/react'
9-
import clsx from 'clsx'
2+
Dialog,
3+
DialogBackdrop,
4+
DialogPanel,
5+
DialogTitle,
6+
} from '@headlessui/react'
107
import { useAtom } from 'jotai'
118

129
import { tradeMachineAtom } from '@/app/store/trade-machine'
13-
import { colors } from '@/lib/styles/colors'
10+
import { cn } from '@/lib/utils/tailwind'
1411

1512
import { Review } from './components/review'
1613
import { SubmissionResult } from './components/submission-result'
@@ -33,46 +30,43 @@ export const TransactionReviewModal = (props: TransactionReviewModalProps) => {
3330
const modalTitle = tradeState.matches('review') ? 'Review Transaction' : ''
3431

3532
return (
36-
<Modal
33+
<Dialog
3734
onClose={onCloseModal}
38-
isOpen={tradeState.context.isModalOpen}
39-
isCentered
35+
open={tradeState.context.isModalOpen}
36+
className='relative z-50'
4037
>
41-
<ModalOverlay className='bg-ic-black bg-opacity-60 backdrop-blur' />
42-
<ModalContent
43-
borderRadius={24}
44-
backgroundColor={isDarkMode ? '#18181b' : '#FCFFFF'}
45-
className={clsx(
46-
'mx-4 my-0 border border-zinc-700',
47-
isDarkMode ? 'review' : '',
48-
)}
49-
>
50-
{modalTitle && (
51-
<ModalHeader className={clsx(isDarkMode ? 'dark' : '')}>
52-
<span className='text-ic-black dark:text-neutral-50'>
38+
<DialogBackdrop className='bg-ic-black fixed inset-0 bg-opacity-60 backdrop-blur' />
39+
<div className='fixed inset-0 flex w-screen items-center justify-center p-4'>
40+
<DialogPanel
41+
className={cn(
42+
'bg-ic-white mx-4 my-0 w-full max-w-md rounded-3xl border border-zinc-700 dark:bg-[#18181b]',
43+
isDarkMode ? 'review' : '',
44+
)}
45+
>
46+
{modalTitle && (
47+
<DialogTitle
48+
className={cn(
49+
'text-ic-black px-6 py-4 text-xl font-semibold dark:text-neutral-50',
50+
isDarkMode ? 'dark' : '',
51+
)}
52+
>
5353
{modalTitle}
54-
</span>
55-
</ModalHeader>
56-
)}
54+
</DialogTitle>
55+
)}
5756

58-
<ModalCloseButton
59-
color={isDarkMode ? colors.ic.white : colors.ic.black}
60-
/>
61-
<ModalBody
62-
className={clsx(isDarkMode ? 'dark' : '')}
63-
p='0 16px 16px 16px'
64-
>
65-
<SubmissionResult onClose={onCloseModal} />
57+
<div className={cn('px-4 pb-4', isDarkMode ? 'dark' : '')}>
58+
<SubmissionResult onClose={onCloseModal} />
6659

67-
{tradeState.context.transactionReview &&
68-
tradeState.matches('review') && (
69-
<Review
70-
transactionReview={tradeState.context.transactionReview}
71-
onSubmitWithSuccess={() => sendTradeEvent({ type: 'SUBMIT' })}
72-
/>
73-
)}
74-
</ModalBody>
75-
</ModalContent>
76-
</Modal>
60+
{tradeState.context.transactionReview &&
61+
tradeState.matches('review') && (
62+
<Review
63+
transactionReview={tradeState.context.transactionReview}
64+
onSubmitWithSuccess={() => sendTradeEvent({ type: 'SUBMIT' })}
65+
/>
66+
)}
67+
</div>
68+
</DialogPanel>
69+
</div>
70+
</Dialog>
7771
)
7872
}

0 commit comments

Comments
 (0)