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

Author: RichardIrala

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/utils/transak.ts

@@ -3,6 +3,91 @@ import { zeroAddress } from 'viem'
 
 export const TRANSAK_PROXY_ADDRESS = '0x4a598b7ec77b1562ad0df7dc64a162695ce4c78a'
 
+export const getTransakLink = (
+  addFundsSettings: AddFundsSettings,
+  { transakApiUrl, transakApiKey }: { transakApiUrl: string; transakApiKey: string }
+) => {
+  interface Options {
+    [index: string]: string | undefined
+  }
+
+  const url = new URL(transakApiUrl)
+  const apiKey = transakApiKey
+
+  const options: Options = {
+    apiKey: apiKey,
+    referrerDomain: window.location.origin,
+    walletAddress: addFundsSettings.walletAddress,
+    fiatAmount: addFundsSettings?.fiatAmount,
+    fiatCurrency: addFundsSettings?.fiatCurrency,
+    disableWalletAddressForm: 'true',
+    defaultFiatAmount: addFundsSettings?.defaultFiatAmount || '50',
+    defaultCryptoCurrency: addFundsSettings?.defaultCryptoCurrency || 'USDC',
+    cryptoCurrencyList: addFundsSettings?.cryptoCurrencyList,
+    networks: addFundsSettings?.networks
+  }
+
+  Object.keys(options).forEach(k => {
+    const option = options[k]
+    if (option) {
+      url.searchParams.append(k, option)
+    }
+  })
+
+  return url.href
+}
+
+export const getTransakLinkFromSequenceApi = async (
+  addFundsSettings: AddFundsSettings,
+  transakApiUrl: string,
+  projectAccessKey: string
+) => {
+  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
+  }
+
+  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,10 +1,20 @@
+<<<<<<< HEAD
 import { Spinner, Text } from '@0xsequence/design-system'
 import { useEffect, useRef } from 'react'
+=======
+import { useProjectAccessKey } from '@0xsequence/connect'
+import { Button, Spinner, Text } from '@0xsequence/design-system'
+import { useEffect, useRef, useState } from 'react'
+>>>>>>> 51730908 (feat(onramp): add optional Transak alternate flow with default and windowed modes)
 
 import { HEADER_HEIGHT } from '../constants/index.js'
 import type { AddFundsSettings } from '../contexts/AddFundsModal.js'
 import { useAddFundsModal } from '../hooks/index.js'
+<<<<<<< HEAD
 import { useTransakWidgetUrl } from '../hooks/useTransakWidgetUrl.js'
+=======
+import { getTransakLink, getTransakLinkFromSequenceApi } from '../utils/transak.js'
+>>>>>>> 51730908 (feat(onramp): add optional Transak alternate flow with default and windowed modes)
 
 const EventTypeOrderCreated = 'TRANSAK_ORDER_CREATED'
 const EventTypeOrderSuccessful = 'TRANSAK_ORDER_SUCCESSFUL'
@@ -17,6 +27,7 @@ export const AddFundsContent = () => {
 
 export const AddFundsContentTransak = () => {
   const { addFundsSettings = {} as AddFundsSettings } = useAddFundsModal()
+<<<<<<< HEAD
 
   const {
     data: transakLinkData,
@@ -32,7 +43,15 @@ export const AddFundsContentTransak = () => {
     defaultCryptoCurrency: addFundsSettings?.defaultCryptoCurrency || 'USDC',
     cryptoCurrencyList: addFundsSettings?.cryptoCurrencyList
   })
+=======
+  const { transakApiUrl, transakApiKey, sequenceTransakApiUrl } = useEnvironmentContext()
+>>>>>>> 51730908 (feat(onramp): add optional Transak alternate flow with default and windowed modes)
   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>) => {
@@ -79,6 +98,95 @@ export const AddFundsContentTransak = () => {
     )
   }
 
+  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

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