fix: moonpay modal height (#6439)

cypress/e2e/buy-crypto-modal.test.ts

+import { getTestSelector } from '../utils'
+
+describe('Buy Crypto Modal', () => {
+  it('should open and close', () => {
+    cy.visit('/')
+
+    // Open the fiat onramp modal
+    cy.get(getTestSelector('buy-fiat-button')).click()
+    cy.get(getTestSelector('fiat-onramp-modal')).should('be.visible')
+
+    // Click on a location that should be outside the modal, which should close it
+    cy.get('body').click(0, 100)
+    cy.get(getTestSelector('fiat-onramp-modal')).should('not.exist')
+  })
+
+  it('should open and close, mobile viewport', () => {
+    cy.viewport('iphone-6')
+    cy.visit('/')
+
+    // Open the fiat onramp modal
+    cy.get(getTestSelector('buy-fiat-button')).click()
+    cy.get(getTestSelector('fiat-onramp-modal')).should('be.visible')
+
+    // Click on a location that should be outside the modal, which should close it
+    cy.get('body').click(10, 10)
+    cy.get(getTestSelector('fiat-onramp-modal')).should('not.exist')
+  })
+})

src/components/FiatOnrampModal/index.tsx

@@ -19,7 +19,7 @@ const Wrapper = styled.div<{ isDarkMode: boolean }>`
   display: flex;
   flex-flow: column nowrap;
   margin: 0;
-  min-height: 720px;
+  flex: 1 1;
   min-width: 375px;
   position: relative;
   width: 100%;
@@ -125,7 +125,7 @@ export default function FiatOnrampModal() {
   }, [fetchSignedIframeUrl])
 
   return (
-    <Modal isOpen={fiatOnrampModalOpen} onDismiss={closeModal} maxHeight={720}>
+    <Modal isOpen={fiatOnrampModalOpen} onDismiss={closeModal} height={80 /* vh */}>
       <Wrapper data-testid="fiat-onramp-modal" isDarkMode={isDarkMode}>
         {error ? (
           <>

src/components/Modal/index.tsx

@@ -79,6 +79,7 @@ interface ModalProps {
   isOpen: boolean
   onDismiss?: () => void
   onSwipe?: () => void
+  height?: number // takes precedence over minHeight and maxHeight
   minHeight?: number | false
   maxHeight?: number
   maxWidth?: number
@@ -94,6 +95,7 @@ export default function Modal({
   minHeight = false,
   maxHeight = 90,
   maxWidth = 420,
+  height,
   initialFocusRef,
   children,
   onSwipe = onDismiss,
@@ -139,8 +141,8 @@ export default function Modal({
                     }
                   : {})}
                 aria-label="dialog"
-                $minHeight={minHeight}
-                $maxHeight={maxHeight}
+                $minHeight={height ?? minHeight}
+                $maxHeight={height ?? maxHeight}
                 $scrollOverlay={$scrollOverlay}
                 $hideBorder={hideBorder}
                 $maxWidth={maxWidth}

src/components/SearchModal/CurrencySearchModal.tsx

@@ -105,7 +105,7 @@ export default memo(function CurrencySearchModal({
       break
   }
   return (
-    <Modal isOpen={isOpen} onDismiss={onDismiss} maxHeight={modalHeight} minHeight={modalHeight}>
+    <Modal isOpen={isOpen} onDismiss={onDismiss} height={modalHeight}>
       {content}
     </Modal>
   )