From a9d8f57319511480d94120b712dcd0fa3dd78a20 Mon Sep 17 00:00:00 2001 From: samuelea Date: Tue, 17 Dec 2024 17:20:48 -0500 Subject: [PATCH 1/3] onClose callback --- examples/react/src/components/Connected.tsx | 3 +++ .../checkout/src/contexts/CheckoutModal.ts | 1 + .../src/contexts/SelectPaymentModal.ts | 1 + .../src/contexts/TransactionStatusModal.ts | 1 + packages/checkout/src/hooks/index.ts | 3 ++- .../src/hooks/useSkipOnCloseCallback.ts | 25 +++++++++++++++++++ .../PayWithCreditCard/index.tsx | 8 ++++-- .../src/views/PaymentSelection/index.tsx | 19 +++++++++++--- .../views/PendingCreditCardTransaction.tsx | 22 +++++++++++++--- .../src/views/TransactionStatus/index.tsx | 9 ++++++- 10 files changed, 81 insertions(+), 11 deletions(-) create mode 100644 packages/checkout/src/hooks/useSkipOnCloseCallback.ts diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx index 22c030a3..897719aa 100644 --- a/examples/react/src/components/Connected.tsx +++ b/examples/react/src/components/Connected.tsx @@ -365,6 +365,9 @@ export const Connected = () => { }, onError: (error: Error) => { console.error(error) + }, + onClose: () => { + console.log('modal closed!') } }) } diff --git a/packages/checkout/src/contexts/CheckoutModal.ts b/packages/checkout/src/contexts/CheckoutModal.ts index 5d2e359c..98490201 100644 --- a/packages/checkout/src/contexts/CheckoutModal.ts +++ b/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 } diff --git a/packages/checkout/src/contexts/SelectPaymentModal.ts b/packages/checkout/src/contexts/SelectPaymentModal.ts index 1a857699..c738ccf7 100644 --- a/packages/checkout/src/contexts/SelectPaymentModal.ts +++ b/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 diff --git a/packages/checkout/src/contexts/TransactionStatusModal.ts b/packages/checkout/src/contexts/TransactionStatusModal.ts index 18cbca16..a5820b57 100644 --- a/packages/checkout/src/contexts/TransactionStatusModal.ts +++ b/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 } diff --git a/packages/checkout/src/hooks/index.ts b/packages/checkout/src/hooks/index.ts index 7cb76639..4f1fbf71 100644 --- a/packages/checkout/src/hooks/index.ts +++ b/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' \ No newline at end of file +export * from './useERC1155SaleContractCheckout' +export * from './useSkipOnCloseCallback' \ No newline at end of file diff --git a/packages/checkout/src/hooks/useSkipOnCloseCallback.ts b/packages/checkout/src/hooks/useSkipOnCloseCallback.ts new file mode 100644 index 00000000..70638f48 --- /dev/null +++ b/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 + } +} \ No newline at end of file diff --git a/packages/checkout/src/views/PaymentSelection/PayWithCreditCard/index.tsx b/packages/checkout/src/views/PaymentSelection/PayWithCreditCard/index.tsx index 2e8e2080..ff31f6f0 100644 --- a/packages/checkout/src/views/PaymentSelection/PayWithCreditCard/index.tsx +++ b/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) } diff --git a/packages/checkout/src/views/PaymentSelection/index.tsx b/packages/checkout/src/views/PaymentSelection/index.tsx index 1bdd9524..ff53b6b8 100644 --- a/packages/checkout/src/views/PaymentSelection/index.tsx +++ b/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, @@ -304,6 +308,8 @@ export const PaymentSelectionContent = () => { closeSelectPaymentModal() + skipOnCloseCallback() + openTransactionStatusModal({ chainId, currencyAddress, @@ -318,7 +324,8 @@ export const PaymentSelectionContent = () => { onSuccess: () => { clearCachedBalances() onSuccess(txHash) - } + }, + onClose }) } catch (e) { console.error('Failed to purchase...', e) @@ -372,7 +379,11 @@ export const PaymentSelectionContent = () => { {creditCardProviders?.length > 0 && ( <> - + )} {enableTransferFunds && ( diff --git a/packages/checkout/src/views/PendingCreditCardTransaction.tsx b/packages/checkout/src/views/PendingCreditCardTransaction.tsx index d6ffb2ae..85b6202a 100644 --- a/packages/checkout/src/views/PendingCreditCardTransaction.tsx +++ b/packages/checkout/src/views/PendingCreditCardTransaction.tsx @@ -7,7 +7,13 @@ 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 @@ -103,6 +109,9 @@ export const PendingCreditCardTransactionTransak = () => { const isLoading = isLoadingTokenMetadata || isLoadingCollectionInfo const isError = isErrorTokenMetadata || isErrorCollectionInfo + const { onClose = () => {} } = creditCardCheckout + const { skipOnCloseCallback } = useSkipOnCloseCallback(onClose) + useEffect(() => { const transakIframeElement = document.getElementById('transakIframe') as HTMLIFrameElement const transakIframe = transakIframeElement.contentWindow @@ -114,6 +123,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 +142,8 @@ export const PendingCreditCardTransactionTransak = () => { if (creditCardCheckout.onSuccess) { creditCardCheckout.onSuccess(txHash, creditCardCheckout) } - } + }, + onClose }) return } @@ -249,6 +260,9 @@ export const PendingCreditCardTransactionSardine = () => { ? `https://sardine-checkout-sandbox.sequence.info?api_url=https://sardine-api-sandbox.sequence.info&client_token=${authToken}&show_features=true` : `https://sardine-checkout.sequence.info?api_url=https://sardine-api.sequence.info&client_token=${authToken}&show_features=true` + const { onClose = () => {} } = creditCardCheckout + const { skipOnCloseCallback } = useSkipOnCloseCallback(onClose) + const pollForOrderStatus = async () => { try { if (!data) { @@ -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 }) return } diff --git a/packages/checkout/src/views/TransactionStatus/index.tsx b/packages/checkout/src/views/TransactionStatus/index.tsx index f8761477..8aa00560 100644 --- a/packages/checkout/src/views/TransactionStatus/index.tsx +++ b/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 || '', From fca41093ceadbbdcc670c4bb7a642d1d0c7be18c Mon Sep 17 00:00:00 2001 From: samuelea Date: Tue, 17 Dec 2024 17:25:48 -0500 Subject: [PATCH 2/3] moved onClose callback at the top level of the pending credit card component --- .../views/PendingCreditCardTransaction.tsx | 26 +++++++++---------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/checkout/src/views/PendingCreditCardTransaction.tsx b/packages/checkout/src/views/PendingCreditCardTransaction.tsx index 85b6202a..7e392a83 100644 --- a/packages/checkout/src/views/PendingCreditCardTransaction.tsx +++ b/packages/checkout/src/views/PendingCreditCardTransaction.tsx @@ -17,24 +17,30 @@ import { 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 + return case 'sardine': default: - return + return } } -export const PendingCreditCardTransactionTransak = () => { +export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: PendingCreditTransactionProps) => { const { openTransactionStatusModal } = useTransactionStatusModal() const nav = useNavigation() const { settings, closeCheckout } = useCheckoutModal() @@ -109,9 +115,6 @@ export const PendingCreditCardTransactionTransak = () => { const isLoading = isLoadingTokenMetadata || isLoadingCollectionInfo const isError = isErrorTokenMetadata || isErrorCollectionInfo - const { onClose = () => {} } = creditCardCheckout - const { skipOnCloseCallback } = useSkipOnCloseCallback(onClose) - useEffect(() => { const transakIframeElement = document.getElementById('transakIframe') as HTMLIFrameElement const transakIframe = transakIframeElement.contentWindow @@ -143,7 +146,7 @@ export const PendingCreditCardTransactionTransak = () => { creditCardCheckout.onSuccess(txHash, creditCardCheckout) } }, - onClose + onClose: creditCardCheckout?.onClose }) return } @@ -222,7 +225,7 @@ export const PendingCreditCardTransactionTransak = () => { ) } -export const PendingCreditCardTransactionSardine = () => { +export const PendingCreditCardTransactionSardine = ({ skipOnCloseCallback }: PendingCreditTransactionProps) => { const { openTransactionStatusModal } = useTransactionStatusModal() const nav = useNavigation() const { settings, closeCheckout } = useCheckoutModal() @@ -260,9 +263,6 @@ export const PendingCreditCardTransactionSardine = () => { ? `https://sardine-checkout-sandbox.sequence.info?api_url=https://sardine-api-sandbox.sequence.info&client_token=${authToken}&show_features=true` : `https://sardine-checkout.sequence.info?api_url=https://sardine-api.sequence.info&client_token=${authToken}&show_features=true` - const { onClose = () => {} } = creditCardCheckout - const { skipOnCloseCallback } = useSkipOnCloseCallback(onClose) - const pollForOrderStatus = async () => { try { if (!data) { @@ -304,7 +304,7 @@ export const PendingCreditCardTransactionSardine = () => { creditCardCheckout.onSuccess(transactionHash, creditCardCheckout) } }, - onClose + onClose: creditCardCheckout?.onClose }) return } From 619ec16b6f0e13311055281a90bfee3efb5822fe Mon Sep 17 00:00:00 2001 From: samuelea Date: Wed, 18 Dec 2024 16:45:11 -0500 Subject: [PATCH 3/3] missing onClose callback --- packages/checkout/src/views/PaymentSelection/index.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/checkout/src/views/PaymentSelection/index.tsx b/packages/checkout/src/views/PaymentSelection/index.tsx index ff53b6b8..79f9eb24 100644 --- a/packages/checkout/src/views/PaymentSelection/index.tsx +++ b/packages/checkout/src/views/PaymentSelection/index.tsx @@ -217,7 +217,8 @@ export const PaymentSelectionContent = () => { onSuccess: () => { clearCachedBalances() onSuccess(txHash) - } + }, + onClose }) } catch (e) { console.error('Failed to purchase...', e)