Transak improvement srsq

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

@@ -247,6 +247,7 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP
         sardineCheckoutUrl: config?.env?.sardineCheckoutUrl ?? 'https://sardine-checkout.sequence.info',
         sardineOnRampUrl: config?.env?.sardineOnRampUrl ?? 'https://crypto.sardine.ai/',
         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/Environment.ts

@@ -5,6 +5,7 @@ import { createGenericContext } from './genericContext.js'
 export interface EnvironmentOverrides {
   marketplaceApiUrl: string
   transakApiUrl: string
+  sequenceTransakApiUrl: string
   transakApiKey: string
   sardineCheckoutUrl: string
   sardineOnRampUrl: string

packages/checkout/src/utils/transak.ts

@@ -2,41 +2,54 @@ import type { AddFundsSettings } from '../contexts/AddFundsModal.js'
 
 export const TRANSAK_PROXY_ADDRESS = '0x4a598b7ec77b1562ad0df7dc64a162695ce4c78a'
 
-export const getTransakLink = (
-  addFundsSettings: AddFundsSettings,
-  { transakApiUrl, transakApiKey }: { transakApiUrl: string; transakApiKey: string }
-) => {
+export const getTransakLink = 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 | undefined
+    [index: string]: string | boolean | 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,
+    disableWalletAddressForm: true,
+    defaultCryptoCurrency: addFundsSettings?.defaultCryptoCurrency,
     networks: addFundsSettings?.networks || defaultNetworks
   }
 
-  Object.keys(options).forEach(k => {
-    const option = options[k]
-    if (option) {
-      url.searchParams.append(k, option)
+  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)
+    })
 
-  return url.href
+    const result = await response.json()
+
+    return result?.url
+  } catch (error) {
+    console.error('Error:', error)
+  }
 }
 
 interface CountriesResult {

packages/checkout/src/views/AddFunds.tsx

@@ -1,6 +1,7 @@
-import { Spinner, Text } from '@0xsequence/design-system'
+import { useProjectAccessKey } from '@0xsequence/connect'
+import { Button, Spinner, Text } from '@0xsequence/design-system'
 import { useAPIClient } from '@0xsequence/hooks'
-import React, { useEffect, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
 
 import { HEADER_HEIGHT } from '../constants/index.js'
 import type { AddFundsSettings } from '../contexts/AddFundsModal.js'
@@ -109,8 +110,11 @@ export const AddFundsContentSardine = () => {
 
 export const AddFundsContentTransak = () => {
   const { addFundsSettings = {} as AddFundsSettings } = useAddFundsModal()
-  const { transakApiUrl, transakApiKey } = useEnvironmentContext()
+  const { sequenceTransakApiUrl } = useEnvironmentContext()
   const iframeRef = useRef<HTMLIFrameElement | null>(null)
+  const projectAccessKey = useProjectAccessKey()
+  const [isLoading, setIsLoading] = useState(false)
+  const [creationLinkFailed, setCreationLinkFailed] = useState(false)
 
   useEffect(() => {
     const handleMessage = (message: MessageEvent<any>) => {
@@ -139,26 +143,86 @@ export const AddFundsContentTransak = () => {
     }
   }, [])
 
-  const link = getTransakLink(addFundsSettings, {
-    transakApiUrl,
-    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 getTransakLink(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(() => {
+    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>
+    )
+  }
 
   return (
     <div
-      className="flex items-center w-full px-4 pb-4 h-full"
+      className="flex items-center justify-center w-full px-4 pb-4 h-full"
       style={{
         height: '600px',
         paddingTop: HEADER_HEIGHT
       }}
     >
-      <iframe
-        ref={iframeRef}
-        className="w-full h-full border-0"
-        src={link}
-        allow="camera;microphone;payment"
-        referrerPolicy="strict-origin-when-cross-origin"
-      />
+      {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>
   )
 }