Skip to content

Commit fd4d93c

Browse files
0xonramp0xonramp
committed
feat: chakra modal refactor
1 parent d03d264 commit fd4d93c

File tree

6 files changed

+88
-96
lines changed

6 files changed

+88
-96
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: 21 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,5 @@
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'
2+
93
import { Dispatch, SetStateAction } from 'react'
104

115
import { shortenAddress } from '@/lib/utils'
@@ -28,23 +22,24 @@ export const SelectSafeModal = ({
2822
onClose()
2923
}
3024
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>
25+
<Dialog onClose={onClose} open={isOpen} className='fixed inset-0 z-30'>
26+
<div className='fixed inset-0 flex w-screen items-center justify-center p-4'>
27+
<DialogBackdrop className='fixed inset-0 bg-black/30' />
28+
<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]'>
29+
<h4 className='px-6 py-4 text-xl font-semibold'>Select a Safe</h4>
30+
<div className='px-2 py-4'>
31+
{safes.map((safe) => (
32+
<div
33+
key={safe}
34+
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'
35+
onClick={() => handleSafeClick(safe)}
36+
>
37+
{shortenAddress(safe)}
38+
</div>
39+
))}
40+
</div>
41+
</DialogPanel>
42+
</div>
43+
</Dialog>
4944
)
5045
}

‎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: 55 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,3 @@
1-
import {
2-
Modal,
3-
ModalBody,
4-
ModalCloseButton,
5-
ModalContent,
6-
ModalHeader,
7-
ModalOverlay,
8-
} from '@chakra-ui/react'
91
import clsx from 'clsx'
102
import Image from 'next/image'
113
import { useMemo } from 'react'
@@ -16,6 +8,12 @@ import { useBalances } from '@/lib/hooks/use-balance'
168
import { useNetwork } from '@/lib/hooks/use-network'
179
import { formatAmountFromWei, isSameAddress } from '@/lib/utils'
1810
import { getAddressForToken } from '@/lib/utils/tokens'
11+
import {
12+
Dialog,
13+
DialogBackdrop,
14+
DialogPanel,
15+
DialogTitle,
16+
} from '@headlessui/react'
1917

2018
type SelectTokenModalProps = {
2119
address?: string
@@ -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='fixed inset-0 bg-black/30' />
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/trade-button/index.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export const TradeButton = ({
2424
<Tooltip>
2525
<TooltipTrigger
2626
className={clsx(
27-
'text-ic-white w-full rounded-3xl px-6 py-4 font-bold transition duration-300 ease-in-out',
27+
'text-ic-white w-full rounded-md px-6 py-4 font-bold transition duration-300 ease-in-out',
2828
disabled ? 'shadow-none' : 'shadow-[0.5px_1px_2px_0_rgba(0,0,0,0.3)]',
2929
disabled
3030
? 'bg-ic-gray-500 dark:bg-zinc-800 dark:text-neutral-400'

0 commit comments

Comments
 (0)