From cfcc337f8d86250704e5d329274c68e0943dc6d6 Mon Sep 17 00:00:00 2001
From: samuelea <batonenbois@gmail.com>
Date: Mon, 9 Sep 2024 18:00:22 -0400
Subject: [PATCH] fixed add funds modal, trigger modal

---
 packages/checkout/src/views/AddFunds.tsx            | 13 ++++++++++++-
 .../src/views/PaymentSelection/FiatOnRamp.tsx       | 13 ++++++++++++-
 .../src/views/PaymentSelection/TransferFunds.tsx    |  4 +++-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/checkout/src/views/AddFunds.tsx b/packages/checkout/src/views/AddFunds.tsx
index 434e4421..25440f8e 100644
--- a/packages/checkout/src/views/AddFunds.tsx
+++ b/packages/checkout/src/views/AddFunds.tsx
@@ -3,6 +3,7 @@ import React from 'react'
 
 import { useAddFundsModal } from '../hooks'
 import { getTransakLink } from '../utils/transak'
+import { HEADER_HEIGHT } from '../constants'
 
 export const AddFundsContent = () => {
   const { addFundsSettings } = useAddFundsModal()
@@ -14,7 +15,17 @@ export const AddFundsContent = () => {
   const link = getTransakLink(addFundsSettings)
 
   return (
-    <Box alignItems="center" width="full" paddingX="4" paddingBottom="4" height="full" style={{ height: '600px' }}>
+    <Box
+      alignItems="center"
+      width="full"
+      paddingX="4"
+      paddingBottom="4"
+      height="full"
+      style={{
+        height: '600px',
+        paddingTop: HEADER_HEIGHT 
+      }}
+    >
       <Box as="iframe" width="full" height="full" borderWidth="none" src={link} />
     </Box>
   )
diff --git a/packages/checkout/src/views/PaymentSelection/FiatOnRamp.tsx b/packages/checkout/src/views/PaymentSelection/FiatOnRamp.tsx
index b85f3895..96f3bcd9 100644
--- a/packages/checkout/src/views/PaymentSelection/FiatOnRamp.tsx
+++ b/packages/checkout/src/views/PaymentSelection/FiatOnRamp.tsx
@@ -1,5 +1,7 @@
 import { Box, Button, Card, Text, useMediaQuery } from '@0xsequence/design-system'
 import { getCardHeight } from '../../utils/sizing'
+import { useAddFundsModal, useSelectPaymentModal } from '../../hooks'
+import { useAccount } from 'wagmi'
 
 interface FiatOnRampProps {
   disableButtons: boolean
@@ -9,7 +11,16 @@ export const FiatOnRamp = ({
   disableButtons
 }: FiatOnRampProps) => {
   const isMobile = useMediaQuery('isMobile')
-  const onClickPurchase = () => {}
+  const { closeSelectPaymentModal } = useSelectPaymentModal()
+  const { triggerAddFunds } = useAddFundsModal()
+  const { address: userAddress } = useAccount()
+
+  const onClickPurchase = () => {
+    closeSelectPaymentModal()
+    triggerAddFunds({
+      walletAddress: userAddress || ''
+    })
+  }
 
   return (
     <Card
diff --git a/packages/checkout/src/views/PaymentSelection/TransferFunds.tsx b/packages/checkout/src/views/PaymentSelection/TransferFunds.tsx
index b02bd5a8..7a32e55a 100644
--- a/packages/checkout/src/views/PaymentSelection/TransferFunds.tsx
+++ b/packages/checkout/src/views/PaymentSelection/TransferFunds.tsx
@@ -2,7 +2,7 @@ import { Box,Button, Card, Text, useMediaQuery } from '@0xsequence/design-system
 import { useAccount } from 'wagmi'
 
 import { getCardHeight } from '../../utils/sizing'
-import { useTransferFundsModal } from '../../hooks'
+import { useTransferFundsModal, useSelectPaymentModal } from '../../hooks'
 
 interface TransferFundsProps {
   disableButtons: boolean
@@ -14,11 +14,13 @@ export const TransferFunds = ({
   const isMobile = useMediaQuery('isMobile')
   const { openTransferFundsModal } = useTransferFundsModal()
   const { address: userAddress } = useAccount()
+  const { closeSelectPaymentModal } = useSelectPaymentModal()
 
   const onClickTransfer = () => {
     if (!userAddress) {
       return
     }
+    closeSelectPaymentModal()
     openTransferFundsModal({
       walletAddress: userAddress
     })