add review dialog

Author: 0xonramp

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

@@ -1,16 +1,13 @@
 import {
-  Modal,
-  ModalBody,
-  ModalCloseButton,
-  ModalContent,
-  ModalHeader,
-  ModalOverlay,
-} from '@chakra-ui/react'
-import clsx from 'clsx'
+  Dialog,
+  DialogBackdrop,
+  DialogPanel,
+  DialogTitle,
+} from '@headlessui/react'
 import { useAtom } from 'jotai'
 
 import { tradeMachineAtom } from '@/app/store/trade-machine'
-import { colors } from '@/lib/styles/colors'
+import { cn } from '@/lib/utils/tailwind'
 
 import { Review } from './components/review'
 import { SubmissionResult } from './components/submission-result'
@@ -33,35 +30,23 @@ export const TransactionReviewModal = (props: TransactionReviewModalProps) => {
   const modalTitle = tradeState.matches('review') ? 'Review Transaction' : ''
 
   return (
-    <Modal
-      onClose={onCloseModal}
-      isOpen={tradeState.context.isModalOpen}
-      isCentered
-    >
-      <ModalOverlay className='bg-ic-black bg-opacity-60 backdrop-blur' />
-      <ModalContent
-        borderRadius={24}
-        backgroundColor={isDarkMode ? '#18181b' : '#FCFFFF'}
-        className={clsx(
-          'mx-4 my-0 border border-zinc-700',
+    <Dialog onClose={onCloseModal} open={tradeState.context.isModalOpen}>
+      <DialogBackdrop className='fixed inset-0 bg-black/30' />
+      <DialogPanel
+        className={cn(
+          'bg-ic-white mx-4 my-0 rounded-3xl border border-zinc-700 dark:bg-[#18181b]',
           isDarkMode ? 'review' : '',
         )}
       >
         {modalTitle && (
-          <ModalHeader className={clsx(isDarkMode ? 'dark' : '')}>
+          <DialogTitle className={cn(isDarkMode ? 'dark' : '')}>
             <span className='text-ic-black dark:text-neutral-50'>
               {modalTitle}
             </span>
-          </ModalHeader>
+          </DialogTitle>
         )}
 
-        <ModalCloseButton
-          color={isDarkMode ? colors.ic.white : colors.ic.black}
-        />
-        <ModalBody
-          className={clsx(isDarkMode ? 'dark' : '')}
-          p='0 16px 16px 16px'
-        >
+        <div className={cn('px-4 pb-4', isDarkMode ? 'dark' : '')}>
           <SubmissionResult onClose={onCloseModal} />
 
           {tradeState.context.transactionReview &&
@@ -71,8 +56,8 @@ export const TransactionReviewModal = (props: TransactionReviewModalProps) => {
                 onSubmitWithSuccess={() => sendTradeEvent({ type: 'SUBMIT' })}
               />
             )}
-        </ModalBody>
-      </ModalContent>
-    </Modal>
+        </div>
+      </DialogPanel>
+    </Dialog>
   )
 }