feat(onramp): add optional Transak alternate flow with default and windowed modes

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'
     })
   }
 

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 = {

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<HTMLIFrameElement | null>(null)
+  const { transakOnRampKind = 'default' } = addFundsSettings
+  const isTransakOnRampKindWindowed = transakOnRampKind === 'windowed'
 
   useEffect(() => {
     const handleMessage = (message: MessageEvent<any>) => {
@@ -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 (
       <div className="flex items-center justify-center w-full px-4 pb-4 h-[200px]">
@@ -71,7 +80,38 @@ export const AddFundsContentTransak = () => {
     )
   }
 
-  if (errorTransakLink) {
+  if (isTransakOnRampKindWindowed) {
+    return (
+      <div
+        className="flex items-center justify-center w-full px-4 pb-4 h-full"
+        style={{
+          height: '600px',
+          paddingTop: HEADER_HEIGHT
+        }}
+      >
+        {isErrorTransakLink ? (
+          <div className="flex flex-col gap-2 items-center">
+            <Text color="text100">The creation of the Transak link failed.</Text>
+            <Button
+              className="w-fit"
+              onClick={() => {
+                // @ts-ignore-next-line
+                refetchTransakLink()
+              }}
+            >
+              Try Again
+            </Button>
+          </div>
+        ) : (
+          <div className="flex gap-2 items-center text-center">
+            <Text color="text100">{addFundsSettings?.windowedOnRampMessage || 'Funds will be added from another window.'}</Text>
+          </div>
+        )}
+      </div>
+    )
+  }
+
+  if (isErrorTransakLink) {
     return (
       <div className="flex items-center justify-center w-full px-4 pb-4 h-[200px]">
         <Text color="text100">An error has occurred</Text>

packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.tsx

@@ -561,14 +561,18 @@ export const PayWithCryptoTab = ({ skipOnCloseCallback, isSwitchingChainRef }: P
       return network?.name?.toLowerCase()
     }
 
+    const useWindowedOnRamp = !onRampProvider || onRampProvider == TransactionOnRampProvider.unknown
+
     skipOnCloseCallback()
     closeSelectPaymentModal()
     triggerAddFunds({
       walletAddress: userAddress || '',
       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."
     })
   }