diff --git a/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx b/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx index 10d4c008f..510953f94 100644 --- a/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx +++ b/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' }} diff --git a/packages/checkout/src/contexts/Environment.ts b/packages/checkout/src/contexts/Environment.ts index 94cf353af..8525e23c2 100644 --- a/packages/checkout/src/contexts/Environment.ts +++ b/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 diff --git a/packages/checkout/src/utils/transak.ts b/packages/checkout/src/utils/transak.ts index 83522da8c..f67d6b589 100644 --- a/packages/checkout/src/utils/transak.ts +++ b/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 { diff --git a/packages/checkout/src/views/AddFunds.tsx b/packages/checkout/src/views/AddFunds.tsx index 89cfb4599..afc6416f4 100644 --- a/packages/checkout/src/views/AddFunds.tsx +++ b/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(null) + const projectAccessKey = useProjectAccessKey() + const [isLoading, setIsLoading] = useState(false) + const [creationLinkFailed, setCreationLinkFailed] = useState(false) useEffect(() => { const handleMessage = (message: MessageEvent) => { @@ -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 ( +
+ +
+ ) + } return (
-