fixed add funds modal, trigger modal

0xsequence · Sep 9, 2024 · cfcc337 · cfcc337
1 parent 7473a71
commit cfcc337
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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
     })