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

packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx

@@ -247,6 +247,7 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP
       value={{
         marketplaceApiUrl: config?.env?.marketplaceApiUrl ?? 'https://marketplace-api.sequence.app',
         transakApiUrl: config?.env?.transakApiUrl ?? 'https://global.transak.com',
+        sequenceTransakApiUrl: 'https://api.sequence.app/rpc/API/TransakGetWidgetURL',
         transakApiKey: config?.env?.transakApiKey ?? '5911d9ec-46b5-48fa-a755-d59a715ff0cf',
         forteWidgetUrl: config?.env?.forteWidgetUrl ?? 'https://payments.prod.lemmax.com/forte-payments-widget.js'
       }}

packages/checkout/src/contexts/AddFundsModal.ts

@@ -16,6 +16,7 @@ export interface AddFundsSettings {
   onOrderSuccessful?: (data: any) => void
   onOrderFailed?: (data: any) => void
   provider?: TransactionOnRampProvider
+  transakOnRampKind?: 'default' | 'windowed'
   cryptoAmount?: string
 }
 

packages/checkout/src/contexts/Environment.ts

@@ -6,6 +6,7 @@ export interface EnvironmentOverrides {
   marketplaceApiUrl: string
   transakApiUrl: string
   transakApiKey: string
+  sequenceTransakApiUrl: string
   forteWidgetUrl: string
 }
 

packages/checkout/src/utils/transak.ts

@@ -36,6 +36,60 @@ export const getTransakLink = (
   return url.href
 }
 
+export const getTransakLinkFromSequenceApi = async (
+  addFundsSettings: AddFundsSettings,
+  transakApiUrl: string,
+  projectAccessKey: string
+) => {
+  const defaultNetworks =
+    'ethereum,mainnet,arbitrum,optimism,polygon,polygonzkevm,zksync,base,bnb,oasys,astar,avaxcchain,immutablezkevm'
+
+  interface Options {
+    [index: string]: string | boolean | undefined
+  }
+
+  const options: Options = {
+    referrerDomain: window.location.origin,
+    walletAddress: addFundsSettings.walletAddress,
+    fiatAmount: addFundsSettings?.fiatAmount,
+    fiatCurrency: addFundsSettings?.fiatCurrency,
+    disableWalletAddressForm: true,
+    defaultCryptoCurrency: addFundsSettings?.defaultCryptoCurrency,
+    networks: addFundsSettings?.networks || defaultNetworks
+  }
+
+  const url = new URL(transakApiUrl)
+
+  const data = {
+    params: {
+      referrerDomain: options.referrerDomain,
+      cryptoCurrencyCode: options.defaultCryptoCurrency,
+      fiatAmount: options?.fiatAmount,
+      fiatCurrency: options?.fiatCurrency,
+      network: options.networks ? (options.networks as string).split(',')[0].trim() : undefined,
+      disableWalletAddressForm: options.disableWalletAddressForm,
+      walletAddress: options.walletAddress
+    }
+  }
+
+  try {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+        'x-access-key': projectAccessKey
+      },
+      body: JSON.stringify(data)
+    })
+
+    const result = await response.json()
+
+    return result?.url
+  } catch (error) {
+    console.error('Error:', error)
+  }
+}
+
 interface CountriesResult {
   response: Country[]
 }

packages/checkout/src/views/AddFunds.tsx

@@ -1,12 +1,12 @@
-import { Spinner, Text } from '@0xsequence/design-system'
-import { useAPIClient } from '@0xsequence/hooks'
-import React, { useEffect, useRef } from 'react'
+import { useProjectAccessKey } from '@0xsequence/connect'
+import { Button, Spinner, Text } from '@0xsequence/design-system'
+import { useEffect, useRef, useState } from 'react'
 
 import { HEADER_HEIGHT } from '../constants/index.js'
 import type { AddFundsSettings } from '../contexts/AddFundsModal.js'
 import { useEnvironmentContext } from '../contexts/Environment.js'
 import { useAddFundsModal } from '../hooks/index.js'
-import { getTransakLink } from '../utils/transak.js'
+import { getTransakLink, getTransakLinkFromSequenceApi } from '../utils/transak.js'
 
 const EventTypeOrderCreated = 'TRANSAK_ORDER_CREATED'
 const EventTypeOrderSuccessful = 'TRANSAK_ORDER_SUCCESSFUL'
@@ -19,8 +19,13 @@ export const AddFundsContent = () => {
 
 export const AddFundsContentTransak = () => {
   const { addFundsSettings = {} as AddFundsSettings } = useAddFundsModal()
-  const { transakApiUrl, transakApiKey } = useEnvironmentContext()
+  const { transakApiUrl, transakApiKey, sequenceTransakApiUrl } = useEnvironmentContext()
   const iframeRef = useRef<HTMLIFrameElement | null>(null)
+  const projectAccessKey = useProjectAccessKey()
+  const [isLoading, setIsLoading] = useState(false)
+  const [creationLinkFailed, setCreationLinkFailed] = useState(false)
+  const { transakOnRampKind = 'default' } = addFundsSettings
+  const isTransakOnRampKindWindowed = transakOnRampKind === 'windowed'
 
   useEffect(() => {
     const handleMessage = (message: MessageEvent<any>) => {
@@ -54,6 +59,95 @@ export const AddFundsContentTransak = () => {
     transakApiKey
   })
 
+  async function handleTransakLink({
+    addFundsSettings,
+    sequenceTransakApiUrl,
+    projectAccessKey,
+    setCreationLinkFailed,
+    setIsLoading
+  }: {
+    addFundsSettings: AddFundsSettings
+    sequenceTransakApiUrl: string
+    projectAccessKey: string
+    setCreationLinkFailed: (value: boolean) => void
+    setIsLoading: (value: boolean) => void
+  }) {
+    try {
+      setCreationLinkFailed(false)
+      setIsLoading(true)
+      const link = await getTransakLinkFromSequenceApi(addFundsSettings, sequenceTransakApiUrl, projectAccessKey)
+
+      if (link) {
+        window.open(link, '_blank')
+      } else {
+        setCreationLinkFailed(true)
+      }
+      setIsLoading(false)
+    } catch (error) {
+      console.error(`The creation of the Transak link has failed. Error: `, error)
+      setCreationLinkFailed(true)
+      setIsLoading(false)
+    }
+  }
+
+  useEffect(() => {
+    if (!isTransakOnRampKindWindowed) {
+      return
+    }
+
+    handleTransakLink({ addFundsSettings, sequenceTransakApiUrl, projectAccessKey, setIsLoading, setCreationLinkFailed })
+  }, [])
+
+  if (isLoading) {
+    return (
+      <div
+        className="flex items-center justify-center w-full px-4 pb-4 h-full"
+        style={{
+          height: '600px',
+          paddingTop: HEADER_HEIGHT
+        }}
+      >
+        <Spinner size="lg" />
+      </div>
+    )
+  }
+
+  if (isTransakOnRampKindWindowed) {
+    return (
+      <div
+        className="flex items-center justify-center w-full px-4 pb-4 h-full"
+        style={{
+          height: '600px',
+          paddingTop: HEADER_HEIGHT
+        }}
+      >
+        {creationLinkFailed ? (
+          <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={() => {
+                handleTransakLink({
+                  addFundsSettings,
+                  sequenceTransakApiUrl,
+                  projectAccessKey,
+                  setIsLoading,
+                  setCreationLinkFailed
+                })
+              }}
+            >
+              Try Again
+            </Button>
+          </div>
+        ) : (
+          <div className="flex gap-2 items-center text-center">
+            <Text color="text100">Once you've added funds, you can close this window and try buying with crypto again.</Text>
+          </div>
+        )}
+      </div>
+    )
+  }
+
   return (
     <div
       className="flex items-center w-full px-4 pb-4 h-full"

packages/connect/src/styles.ts

@@ -2513,4 +2513,6 @@ export const styles = String.raw`
       --tw-gradient-to-position: 100%;
     }
   }
-}`
+}
+
+`