diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx index 136fa38dd..136545dd7 100644 --- a/examples/react/src/components/Connected.tsx +++ b/examples/react/src/components/Connected.tsx @@ -467,7 +467,8 @@ export const Connected = () => { const onClickAddFunds = () => { triggerAddFunds({ walletAddress: address || '', - provider: onRampProvider ? (onRampProvider as TransactionOnRampProvider) : TransactionOnRampProvider.transak + provider: onRampProvider ? (onRampProvider as TransactionOnRampProvider) : TransactionOnRampProvider.transak, + transakOnRampKind: 'default' }) } diff --git a/packages/checkout/src/contexts/AddFundsModal.ts b/packages/checkout/src/contexts/AddFundsModal.ts index 2e949957c..8eda9ea92 100644 --- a/packages/checkout/src/contexts/AddFundsModal.ts +++ b/packages/checkout/src/contexts/AddFundsModal.ts @@ -16,7 +16,9 @@ export interface AddFundsSettings { onOrderSuccessful?: (data: any) => void onOrderFailed?: (data: any) => void provider?: TransactionOnRampProvider + transakOnRampKind?: 'default' | 'windowed' cryptoAmount?: string + windowedOnRampMessage?: string } type AddFundsModalContext = { diff --git a/packages/checkout/src/views/AddFunds.tsx b/packages/checkout/src/views/AddFunds.tsx index fb8238ea1..c21876a55 100644 --- a/packages/checkout/src/views/AddFunds.tsx +++ b/packages/checkout/src/views/AddFunds.tsx @@ -1,4 +1,4 @@ -import { Spinner, Text } from '@0xsequence/design-system' +import { Button, Spinner, Text } from '@0xsequence/design-system' import { useEffect, useRef } from 'react' import { HEADER_HEIGHT } from '../constants/index.js' @@ -21,7 +21,8 @@ export const AddFundsContentTransak = () => { const { data: transakLinkData, isLoading: isLoadingTransakLink, - error: errorTransakLink + isError: isErrorTransakLink, + refetch: refetchTransakLink } = useTransakWidgetUrl({ referrerDomain: window.location.origin, walletAddress: addFundsSettings.walletAddress, @@ -33,6 +34,8 @@ export const AddFundsContentTransak = () => { cryptoCurrencyList: addFundsSettings?.cryptoCurrencyList }) const iframeRef = useRef(null) + const { transakOnRampKind = 'default' } = addFundsSettings + const isTransakOnRampKindWindowed = transakOnRampKind === 'windowed' useEffect(() => { const handleMessage = (message: MessageEvent) => { @@ -63,6 +66,12 @@ export const AddFundsContentTransak = () => { const link = transakLinkData?.url + useEffect(() => { + if (isTransakOnRampKindWindowed && !isLoadingTransakLink && link) { + window.open(link, '_blank', 'noopener') + } + }, [isTransakOnRampKindWindowed, isLoadingTransakLink, link]) + if (isLoadingTransakLink) { return (
@@ -71,7 +80,38 @@ export const AddFundsContentTransak = () => { ) } - if (errorTransakLink) { + if (isTransakOnRampKindWindowed) { + return ( +
+ {isErrorTransakLink ? ( +
+ The creation of the Transak link failed. + +
+ ) : ( +
+ {addFundsSettings?.windowedOnRampMessage || 'Funds will be added from another window.'} +
+ )} +
+ ) + } + + if (isErrorTransakLink) { return (
An error has occurred diff --git a/packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.tsx b/packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.tsx index c7e6e46a1..d0468db6b 100644 --- a/packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.tsx +++ b/packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.tsx @@ -561,6 +561,8 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P return network?.name?.toLowerCase() } + const useWindowedOnRamp = !onRampProvider || onRampProvider == TransactionOnRampProvider.unknown + skipOnCloseCallback() closeSelectPaymentModal() triggerAddFunds({ @@ -568,7 +570,9 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P provider: onRampProvider || TransactionOnRampProvider.transak, networks: getNetworks(), defaultCryptoCurrency: dataCurrencyInfo?.symbol || '', - onClose: selectPaymentSettings?.onClose + onClose: selectPaymentSettings?.onClose, + transakOnRampKind: useWindowedOnRamp ? 'windowed' : 'default', + windowedOnRampMessage: "Once you've added funds, you can close this window and try buying with crypto again." }) }