Merge pull request #289 from reservoirprotocol/pedro/relay-5849-preve…

…nt-trade-details-modal-from-closing-when-submitting-tx

Fix pointer down on dynamic elements causing swap modal to close

.changeset/chilled-lies-cry.md

@@ -0,0 +1,5 @@
+---
+'@reservoir0x/relay-kit-ui': patch
+---
+
+Fix swap modal closing when dynamic embedded wallet tx modal is prompted and clicked on

packages/ui/src/components/common/Modal.tsx

@@ -20,7 +20,12 @@ type ModalProps = {
 }
 
 export const Modal: FC<
-  ComponentPropsWithoutRef<typeof DialogRoot> & ModalProps
+  ComponentPropsWithoutRef<typeof DialogRoot> &
+    ModalProps &
+    Pick<
+      ComponentPropsWithoutRef<typeof AnimatedContent>,
+      'onPointerDownOutside'
+    >
 > = ({ trigger, css, showCloseButton = true, children, ...props }) => {
   return (
     <DialogRoot modal={true} {...props}>
@@ -48,6 +53,7 @@ export const Modal: FC<
                   padding: '4',
                   ...css
                 }}
+                onPointerDownOutside={props.onPointerDownOutside}
               >
                 {showCloseButton ? (
                   <DialogClose

packages/ui/src/components/common/TransactionModal/SwapModal.tsx

@@ -230,6 +230,18 @@ const InnerSwapModal: FC<InnerSwapModalProps> = ({
         maxWidth: '412px !important'
       }}
       showCloseButton={isReviewQuoteStep}
+      onPointerDownOutside={(e) => {
+        const dynamicModalElements = Array.from(
+          document.querySelectorAll('#dynamic-send-transaction')
+        )
+        const clickedInsideDynamicModal = dynamicModalElements.some((el) =>
+          e.target ? el.contains(e.target as Node) : false
+        )
+
+        if (clickedInsideDynamicModal && dynamicModalElements.length > 0) {
+          e.preventDefault()
+        }
+      }}
     >
       <Flex
         direction="column"