onClose callback

examples/react/src/components/Connected.tsx

@@ -365,6 +365,9 @@ export const Connected = () => {
       },
       onError: (error: Error) => {
         console.error(error)
+      },
+      onClose: () => {
+        console.log('modal closed!')
       }
     })
   }

packages/checkout/src/contexts/CheckoutModal.ts

@@ -39,6 +39,7 @@ export interface CreditCardCheckout {
   transakConfig?: TransakConfig
   onSuccess?: (transactionHash: string, settings: CreditCardCheckout) => void
   onError?: (error: Error, settings: CreditCardCheckout) => void
+  onClose?: () => void
   isDev?: boolean
   approvedSpenderAddress?: string
 }

packages/checkout/src/contexts/SelectPaymentModal.ts

@@ -26,6 +26,7 @@ export interface SelectPaymentSettings {
   transactionConfirmations?: number
   onSuccess?: (txHash: string) => void
   onError?: (error: Error) => void
+  onClose?: () => void
   enableMainCurrencyPayment?: boolean
   enableSwapPayments?: boolean
   enableTransferFunds?: boolean

packages/checkout/src/contexts/TransactionStatusModal.ts

@@ -17,6 +17,7 @@ export interface TransactionStatusSettings {
   blockConfirmations?: number
   onSuccess?: (txHash: string) => void
   onError?: (error: Error) => void
+  onClose?: () => void
   txHash: string
 }
 

packages/checkout/src/hooks/index.ts

@@ -10,4 +10,5 @@ export * from './useTransferFundsModal'
 export * from './useTransactionStatusModal'
 export * from './useSwapModal'
 export * from './useCheckoutOptionsSalesContract'
-export * from './useERC1155SaleContractCheckout'
+export * from './useERC1155SaleContractCheckout'
+export * from './useSkipOnCloseCallback'

packages/checkout/src/hooks/useSkipOnCloseCallback.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef, MutableRefObject } from 'react'
+
+interface UseSkipOnCloseCallbackReturn {
+  skipOnCloseCallback: () => void
+}
+
+export const useSkipOnCloseCallback = (onClose: () => void): UseSkipOnCloseCallbackReturn => {
+  const skipOnCloseCallbackFlag = useRef(false)
+
+  const skipOnCloseCallback = () => {
+    skipOnCloseCallbackFlag.current = true
+  }
+
+  useEffect(() => {
+    return () => {
+      if (!skipOnCloseCallbackFlag.current) {
+        onClose()
+      }
+    }
+  }, [])
+
+  return {
+    skipOnCloseCallback
+  }
+}

packages/checkout/src/views/PaymentSelection/PayWithCreditCard/index.tsx

@@ -17,16 +17,17 @@ import { useAccount } from 'wagmi'
 
 import { SelectPaymentSettings } from '../../../contexts'
 import { CheckoutSettings } from '../../../contexts/CheckoutModal'
-import { useClearCachedBalances, useCheckoutModal, useSelectPaymentModal, useTransactionStatusModal } from '../../../hooks'
+import { useClearCachedBalances, useCheckoutModal, useSelectPaymentModal } from '../../../hooks'
 
 interface PayWithCreditCardProps {
   settings: SelectPaymentSettings
   disableButtons: boolean
+  skipOnCloseCallback: () => void
 }
 
 type PaymentProviderOptions = 'sardine' | 'transak'
 
-export const PayWithCreditCard = ({ settings, disableButtons }: PayWithCreditCardProps) => {
+export const PayWithCreditCard = ({ settings, disableButtons, skipOnCloseCallback }: PayWithCreditCardProps) => {
   const {
     chain,
     currencyAddress,
@@ -39,6 +40,7 @@ export const PayWithCreditCard = ({ settings, disableButtons }: PayWithCreditCar
     isDev = false,
     onSuccess = () => {},
     onError = () => {},
+    onClose = () => {},
     creditCardProviders = [],
     transakConfig
   } = settings
@@ -84,6 +86,7 @@ export const PayWithCreditCard = ({ settings, disableButtons }: PayWithCreditCar
           onSuccess(txHash)
         },
         onError,
+        onClose,
         chainId,
         recipientAddress: userAddress,
         contractAddress: targetContractAddress,
@@ -103,6 +106,7 @@ export const PayWithCreditCard = ({ settings, disableButtons }: PayWithCreditCar
       }
     }
 
+    skipOnCloseCallback()
     closeSelectPaymentModal()
     triggerCheckout(checkoutSettings)
   }

packages/checkout/src/views/PaymentSelection/index.tsx

@@ -24,7 +24,7 @@ import { usePublicClient, useWalletClient, useReadContract, useAccount } from 'w
 import { HEADER_HEIGHT } from '../../constants'
 import { NavigationHeader } from '../../shared/components/NavigationHeader'
 import { ERC_20_CONTRACT_ABI } from '../../constants/abi'
-import { useClearCachedBalances, useSelectPaymentModal, useTransactionStatusModal } from '../../hooks'
+import { useClearCachedBalances, useSelectPaymentModal, useTransactionStatusModal, useSkipOnCloseCallback } from '../../hooks'
 
 export const PaymentSelection = () => {
   return (
@@ -63,7 +63,8 @@ export const PaymentSelectionContent = () => {
     creditCardProviders = [],
     transactionConfirmations = TRANSACTION_CONFIRMATIONS_DEFAULT,
     onSuccess = () => {},
-    onError = () => {}
+    onError = () => {},
+    onClose = () => {}
   } = selectPaymentSettings
 
   const isNativeToken = compareAddress(currencyAddress, zeroAddress)
@@ -78,6 +79,7 @@ export const PaymentSelectionContent = () => {
   })
   const { clearCachedBalances } = useClearCachedBalances()
   const { closeSelectPaymentModal } = useSelectPaymentModal()
+  const { skipOnCloseCallback } = useSkipOnCloseCallback(onClose)
 
   const { data: allowanceData, isLoading: allowanceIsLoading } = useReadContract({
     abi: ERC_20_CONTRACT_ABI,
@@ -199,6 +201,8 @@ export const PaymentSelectionContent = () => {
 
       closeSelectPaymentModal()
 
+      skipOnCloseCallback()
+
       openTransactionStatusModal({
         chainId,
         currencyAddress,
@@ -213,7 +217,8 @@ export const PaymentSelectionContent = () => {
         onSuccess: () => {
           clearCachedBalances()
           onSuccess(txHash)
-        }
+        },
+        onClose
       })
     } catch (e) {
       console.error('Failed to purchase...', e)
@@ -304,6 +309,8 @@ export const PaymentSelectionContent = () => {
 
       closeSelectPaymentModal()
 
+      skipOnCloseCallback()
+
       openTransactionStatusModal({
         chainId,
         currencyAddress,
@@ -318,7 +325,8 @@ export const PaymentSelectionContent = () => {
         onSuccess: () => {
           clearCachedBalances()
           onSuccess(txHash)
-        }
+        },
+        onClose
       })
     } catch (e) {
       console.error('Failed to purchase...', e)
@@ -372,7 +380,11 @@ export const PaymentSelectionContent = () => {
         {creditCardProviders?.length > 0 && (
           <>
             <Divider width="full" marginY="3" />
-            <PayWithCreditCard settings={selectPaymentSettings} disableButtons={disableButtons} />
+            <PayWithCreditCard
+              settings={selectPaymentSettings}
+              disableButtons={disableButtons}
+              skipOnCloseCallback={skipOnCloseCallback}
+            />
           </>
         )}
         {enableTransferFunds && (

packages/checkout/src/views/PendingCreditCardTransaction.tsx

@@ -7,28 +7,40 @@ import { formatUnits } from 'viem'
 
 import { fetchSardineOrderStatus } from '../api'
 import { TransactionPendingNavigation } from '../contexts'
-import { useNavigation, useCheckoutModal, useSardineClientToken, useTransactionStatusModal } from '../hooks'
+import {
+  useNavigation,
+  useCheckoutModal,
+  useSardineClientToken,
+  useTransactionStatusModal,
+  useSkipOnCloseCallback
+} from '../hooks'
 import { TRANSAK_PROXY_ADDRESS } from '../utils/transak'
 const POLLING_TIME = 10 * 1000
 
+interface PendingCreditTransactionProps {
+  skipOnCloseCallback: () => void
+}
+
 export const PendingCreditCardTransaction = () => {
   const nav = useNavigation()
   const {
     params: {
-      creditCardCheckout: { provider }
+      creditCardCheckout: { provider, onClose = () => {} }
     }
   } = nav.navigation as TransactionPendingNavigation
 
+  const { skipOnCloseCallback } = useSkipOnCloseCallback(onClose)
+
   switch (provider) {
     case 'transak':
-      return <PendingCreditCardTransactionTransak />
+      return <PendingCreditCardTransactionTransak skipOnCloseCallback={skipOnCloseCallback} />
     case 'sardine':
     default:
-      return <PendingCreditCardTransactionSardine />
+      return <PendingCreditCardTransactionSardine skipOnCloseCallback={skipOnCloseCallback} />
   }
 }
 
-export const PendingCreditCardTransactionTransak = () => {
+export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: PendingCreditTransactionProps) => {
   const { openTransactionStatusModal } = useTransactionStatusModal()
   const nav = useNavigation()
   const { settings, closeCheckout } = useCheckoutModal()
@@ -114,6 +126,7 @@ export const PendingCreditCardTransactionTransak = () => {
         console.log('Order Data: ', message?.data?.data)
         const txHash = message?.data?.data?.transactionHash || ''
 
+        skipOnCloseCallback()
         closeCheckout()
         openTransactionStatusModal({
           chainId: creditCardCheckout.chainId,
@@ -132,7 +145,8 @@ export const PendingCreditCardTransactionTransak = () => {
             if (creditCardCheckout.onSuccess) {
               creditCardCheckout.onSuccess(txHash, creditCardCheckout)
             }
-          }
+          },
+          onClose: creditCardCheckout?.onClose
         })
         return
       }
@@ -211,7 +225,7 @@ export const PendingCreditCardTransactionTransak = () => {
   )
 }
 
-export const PendingCreditCardTransactionSardine = () => {
+export const PendingCreditCardTransactionSardine = ({ skipOnCloseCallback }: PendingCreditTransactionProps) => {
   const { openTransactionStatusModal } = useTransactionStatusModal()
   const nav = useNavigation()
   const { settings, closeCheckout } = useCheckoutModal()
@@ -270,6 +284,7 @@ export const PendingCreditCardTransactionSardine = () => {
         return
       }
       if (status === 'Complete') {
+        skipOnCloseCallback()
         closeCheckout()
         openTransactionStatusModal({
           chainId: creditCardCheckout.chainId,
@@ -288,7 +303,8 @@ export const PendingCreditCardTransactionSardine = () => {
             if (creditCardCheckout.onSuccess) {
               creditCardCheckout.onSuccess(transactionHash, creditCardCheckout)
             }
-          }
+          },
+          onClose: creditCardCheckout?.onClose
         })
         return
       }

packages/checkout/src/views/TransactionStatus/index.tsx

@@ -79,7 +79,8 @@ export const TransactionStatus = () => {
     currencyAddress,
     blockConfirmations = TRANSACTION_CONFIRMATIONS_DEFAULT,
     onSuccess,
-    onError
+    onError,
+    onClose = () => {}
   } = transactionStatusSettings!
   const networkConfig = findSupportedNetwork(chainId)
   const blockExplorerUrl = `${networkConfig?.blockExplorer?.rootUrl}/tx/${txHash}`
@@ -119,6 +120,12 @@ export const TransactionStatus = () => {
     }
   }, [status, publicClient, txHash])
 
+  useEffect(() => {
+    return () => {
+      onClose()
+    }
+  }, [])
+
   const { data: dataCollectionInfo, isLoading: isLoadingCollectionInfo } = useContractInfo(
     chainId,
     collectionAddress || '',