From 7f7420541de86fbd95dd42bdccc49ee8d332c1d2 Mon Sep 17 00:00:00 2001 From: samuelea Date: Mon, 27 Oct 2025 15:03:51 -0400 Subject: [PATCH] sardine removal --- examples/react/src/config.ts | 2 - packages/checkout/README.md | 2 +- packages/checkout/src/api/data.ts | 236 +----------------- .../SequenceCheckoutProvider.tsx | 2 - .../checkout/src/contexts/CheckoutModal.ts | 2 +- packages/checkout/src/contexts/Environment.ts | 2 - .../src/contexts/SelectPaymentModal.ts | 7 +- packages/checkout/src/hooks/index.ts | 4 - .../useCheckoutUI/useCreditCardPayment.tsx | 223 ++++------------- .../src/hooks/useCheckoutWhitelistStatus.ts | 21 -- .../src/hooks/useSardineClientToken.ts | 18 -- .../src/hooks/useSardineOnRampLink.ts | 18 -- .../src/hooks/useSelectPaymentModal.ts | 2 +- packages/checkout/src/index.ts | 1 - packages/checkout/src/utils/sardine.ts | 58 ----- packages/checkout/src/views/AddFunds.tsx | 96 +------ .../PayWithCreditCard/index.tsx | 8 +- .../providers/SardineLogo.tsx | 11 - .../PayWithCrypto/index.tsx | 2 +- .../src/views/CheckoutSelection/index.tsx | 23 +- .../PayWithCreditCard/index.tsx | 9 +- .../views/PendingCreditCardTransaction.tsx | 188 +------------- packages/connect/src/styles.ts | 4 +- 23 files changed, 74 insertions(+), 865 deletions(-) delete mode 100644 packages/checkout/src/hooks/useCheckoutWhitelistStatus.ts delete mode 100644 packages/checkout/src/hooks/useSardineClientToken.ts delete mode 100644 packages/checkout/src/hooks/useSardineOnRampLink.ts delete mode 100644 packages/checkout/src/utils/sardine.ts delete mode 100644 packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/providers/SardineLogo.tsx diff --git a/examples/react/src/config.ts b/examples/react/src/config.ts index 6db4a8ea0..2f284acae 100644 --- a/examples/react/src/config.ts +++ b/examples/react/src/config.ts @@ -183,8 +183,6 @@ export const getErc1155SaleContractConfig = (walletAddress: string) => ({ export const checkoutConfig: SequenceCheckoutConfig = { env: isDev ? { - sardineCheckoutUrl: 'https://sardine-checkout-sandbox.sequence.info', - sardineOnRampUrl: 'https://crypto.sandbox.sardine.ai/', transakApiUrl: 'https://global-stg.transak.com', transakApiKey: 'c20f2a0e-fe6a-4133-8fa7-77e9f84edf98', forteWidgetUrl: 'https://payments.sandbox.lemmax.com/forte-payments-widget.js' diff --git a/packages/checkout/README.md b/packages/checkout/README.md index 6c78c2373..6bea538bf 100644 --- a/packages/checkout/README.md +++ b/packages/checkout/README.md @@ -100,7 +100,7 @@ const MyComponent = () => { recipientAddress: address, currencyAddress, collectionAddress, - creditCardProviders: ['sardine'], + creditCardProviders: ['transak'], copyrightText: 'ⓒ2024 Sequence', onSuccess: (txnHash?: string) => { console.log('success!', txnHash) diff --git a/packages/checkout/src/api/data.ts b/packages/checkout/src/api/data.ts index 9240655d7..3cd9ce5cd 100644 --- a/packages/checkout/src/api/data.ts +++ b/packages/checkout/src/api/data.ts @@ -1,239 +1,7 @@ -import type { SequenceAPIClient } from '@0xsequence/api' -import type { TokenMetadata } from '@0xsequence/metadata' -import { ChainId as Chains, findSupportedNetwork, networks, type ChainId } from '@0xsequence/network' +import { ChainId as Chains, findSupportedNetwork } from '@0xsequence/network' import { zeroAddress } from 'viem' -import { type CreditCardCheckout, type ForteConfig, type StructuredCalldata } from '../contexts/index.js' - -export interface FetchSardineClientTokenReturn { - token: string - orderId: string -} - -export interface MethodArguments { - [key: string]: any -} - -export interface FetchSardineClientTokenArgs { - order: CreditCardCheckout - projectAccessKey: string - apiClientUrl: string - tokenMetadata?: TokenMetadata -} - -export const fetchSardineClientToken = async ({ - order, - projectAccessKey, - tokenMetadata, - apiClientUrl -}: FetchSardineClientTokenArgs): Promise => { - // Test credentials: https://docs.sardine.ai/docs/integrate-payments/nft-checkout-testing-credentials - const url = `${apiClientUrl}/rpc/API/SardineGetNFTCheckoutToken` - - const res = await fetch(url, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'X-Access-Key': projectAccessKey - }, - body: JSON.stringify({ - params: { - name: tokenMetadata?.name || 'Unknown', - imageUrl: tokenMetadata?.image || 'https://sequence.market/images/placeholder.png', - network: networks[order.chainId as ChainId].name, - recipientAddress: order.recipientAddress, - contractAddress: order.contractAddress, - platform: 'calldata_execution', - blockchainNftId: order.nftId, - quantity: Number(order.nftQuantity), - decimals: Number(order?.nftDecimals || 0), - tokenAmount: order.currencyQuantity, - tokenAddress: order.currencyAddress, - tokenSymbol: order.currencySymbol, - tokenDecimals: Number(order.currencyDecimals), - callData: order.calldata, - ...(order?.approvedSpenderAddress ? { approvedSpenderAddress: order.approvedSpenderAddress } : {}) - } - }) - }) - - const { - resp: { orderId, token } - } = await res.json() - - return { - token, - orderId - } -} - -export const fetchSardineOrderStatus = async (orderId: string, projectAccessKey: string, apiClientBaseUrl: string) => { - // Test credentials: https://docs.sardine.ai/docs/integrate-payments/nft-checkout-testing-credentials - const url = `${apiClientBaseUrl}/rpc/API/SardineGetNFTCheckoutOrderStatus` - const response = await fetch(url, { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - 'X-Access-Key': `${projectAccessKey}` - }, - body: JSON.stringify({ - orderId - }) - }) - - const json = await response.json() - console.log('json:', json) - return json -} - -export interface Country { - code: string -} - -export const fetchSupportedCountryCodes = async (): Promise => { - // Can also be fetches from sardine api - const supportedCountries = [ - 'AL', - 'AO', - 'AT', - 'BB', - 'BE', - 'BZ', - 'BJ', - 'BO', - 'BR', - 'BG', - 'KH', - 'KY', - 'CL', - 'CO', - 'KM', - 'CR', - 'HR', - 'CY', - 'CZ', - 'DK', - 'DM', - 'DO', - 'EC', - 'EG', - 'SV', - 'GQ', - 'EE', - 'FO', - 'FI', - 'FR', - 'GF', - 'DE', - 'GR', - 'GN', - 'GW', - 'GY', - 'HT', - 'HN', - 'HU', - 'IS', - 'ID', - 'IE', - 'IL', - 'IT', - 'JM', - 'JP', - 'KG', - 'LA', - 'LV', - 'LI', - 'LT', - 'LU', - 'MG', - 'MY', - 'MV', - 'MT', - 'MR', - 'MX', - 'MN', - 'MZ', - 'NL', - 'NO', - 'OM', - 'PA', - 'PY', - 'PE', - 'PH', - 'PL', - 'PT', - 'RO', - 'KN', - 'MF', - 'SA', - 'SC', - 'SG', - 'SK', - 'SI', - 'KR', - 'ES', - 'LK', - 'SE', - 'CH', - 'TZ', - 'TH', - 'TT', - 'TR', - 'AE', - 'GB', - 'UY', - 'UZ', - 'VU', - 'VN' - ] - - return supportedCountries.map(countryCode => ({ code: countryCode })) -} - -export interface SardineLinkOnRampArgs { - sardineOnRampUrl: string - apiClient: SequenceAPIClient - walletAddress: string - currencyCode?: string - fundingAmount?: string - network?: string -} - -export const fetchSardineOnRampLink = async ({ - sardineOnRampUrl, - apiClient, - walletAddress, - currencyCode, - fundingAmount, - network -}: SardineLinkOnRampArgs) => { - const response = await apiClient.sardineGetClientToken() - - interface SardineOptions { - client_token: string - address: string - fiat_amount?: string - asset_type?: string - network?: string - } - - const options: SardineOptions = { - client_token: response.token, - address: walletAddress, - fiat_amount: fundingAmount, - asset_type: currencyCode, - network - } - - const url = new URL(sardineOnRampUrl) - Object.keys(options).forEach(k => { - if (options[k as keyof SardineOptions] !== undefined) { - url.searchParams.append(k, options[k as keyof SardineOptions] as string) - } - }) - - return url.href -} +import { type ForteConfig, type StructuredCalldata } from '../contexts/index.js' export interface FetchForteAccessTokenReturn { accessToken: string diff --git a/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx b/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx index 10d4c008f..8092c3a4c 100644 --- a/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx +++ b/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx @@ -244,8 +244,6 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP void diff --git a/packages/checkout/src/contexts/Environment.ts b/packages/checkout/src/contexts/Environment.ts index 94cf353af..2b5d3a205 100644 --- a/packages/checkout/src/contexts/Environment.ts +++ b/packages/checkout/src/contexts/Environment.ts @@ -6,8 +6,6 @@ export interface EnvironmentOverrides { marketplaceApiUrl: string transakApiUrl: string transakApiKey: string - sardineCheckoutUrl: string - sardineOnRampUrl: string forteWidgetUrl: string } diff --git a/packages/checkout/src/contexts/SelectPaymentModal.ts b/packages/checkout/src/contexts/SelectPaymentModal.ts index 95815488b..0243b6763 100644 --- a/packages/checkout/src/contexts/SelectPaymentModal.ts +++ b/packages/checkout/src/contexts/SelectPaymentModal.ts @@ -6,7 +6,7 @@ import type { ForteConfig, TransakConfig } from '../contexts/CheckoutModal.js' import { createGenericContext } from './genericContext.js' -export type CreditCardProviders = 'sardine' | 'transak' | 'forte' +export type CreditCardProviders = 'transak' | 'forte' export interface Collectible { tokenId?: string @@ -19,10 +19,6 @@ export interface SupplementaryAnalyticsInfo { [key: string]: string } -export interface SardineConfig { - approvedSpenderAddress?: string -} - export interface ActionButtons { label: string action: () => void @@ -45,7 +41,6 @@ export interface SelectPaymentSettings { onRampProvider?: TransactionOnRampProvider creditCardProviders?: string[] transakConfig?: TransakConfig - sardineConfig?: SardineConfig forteConfig?: ForteConfig customProviderCallback?: (onSuccess: (txHash: string) => void, onError: (error: Error) => void, onClose: () => void) => void supplementaryAnalyticsInfo?: SupplementaryAnalyticsInfo diff --git a/packages/checkout/src/hooks/index.ts b/packages/checkout/src/hooks/index.ts index 64778dda4..4ca6765fd 100644 --- a/packages/checkout/src/hooks/index.ts +++ b/packages/checkout/src/hooks/index.ts @@ -2,8 +2,6 @@ export * from './useAddFundsModal.js' export * from './useCheckoutModal.js' export * from './useNavigation.js' export * from './useModalTheme.js' -export * from './useCheckoutWhitelistStatus.js' -export * from './useSardineClientToken.js' export * from './useSelectPaymentModal.js' export * from './useTransferFundsModal.js' export * from './useTransactionStatusModal.js' @@ -11,6 +9,4 @@ export * from './useSwapModal.js' export * from './useCheckoutOptionsSalesContract.js' export * from './useERC1155SaleContractCheckout.js' export * from './useSkipOnCloseCallback.js' -export * from './useSardineOnRampLink.js' export * from './useFortePaymentIntent.js' -export * from './useAddFundsModal.js' diff --git a/packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx b/packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx index be07bc0e7..d43180dbe 100644 --- a/packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx +++ b/packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx @@ -7,16 +7,13 @@ import pako from 'pako' import React, { useEffect, useRef } from 'react' import { formatUnits, zeroAddress, type Hex } from 'viem' -import { fetchSardineOrderStatus } from '../../api/data.js' import type { TransakConfig } from '../../contexts/CheckoutModal.js' import { useEnvironmentContext } from '../../contexts/Environment.js' import type { Collectible, CreditCardProviders } from '../../contexts/SelectPaymentModal.js' import { TRANSAK_PROXY_ADDRESS } from '../../utils/transak.js' -import { useSardineClientToken } from '../useSardineClientToken.js' const POLLING_TIME = 10 * 1000 const TRANSAK_IFRAME_ID = 'credit-card-payment-transak-iframe' -const SARDINE_IFRAME_ID = 'credit-card-payment-sardine-iframe' export interface UseCreditCardPaymentArgs { chain: string | number @@ -78,11 +75,7 @@ export const useCreditCardPayment = ({ isLoadingCurrencyInfo, errorCurrencyInfo }: UseCreditCardPaymentArgs): UseCreditCardPaymentReturn => { - const projectAccessKey = useProjectAccessKey() - const { env } = useConfig() - const disableSardineClientTokenFetch = - isLoadingTokenMetadatas || isLoadingCurrencyInfo || isLoadingCollectionInfo || creditCardProvider !== 'sardine' - const { transakApiUrl, sardineCheckoutUrl: sardineProxyUrl, transakApiKey: transakGlobalApiKey } = useEnvironmentContext() + const { transakApiUrl, transakApiKey: transakGlobalApiKey } = useEnvironmentContext() const network = findSupportedNetwork(chain) const error = errorCollectionInfo || errorTokenMetadata || errorCurrencyInfo const isLoading = isLoadingCollectionInfo || isLoadingTokenMetadatas || isLoadingCurrencyInfo @@ -92,33 +85,6 @@ export const useCreditCardPayment = ({ const iframeRef = useRef(null) const tokenMetadata = tokenMetadatas?.[0] - const { - data: dataClientToken, - isLoading: isLoadingClientToken, - error: errorClientToken - } = useSardineClientToken( - { - order: { - chainId: network?.chainId || 137, - contractAddress: targetContractAddress, - recipientAddress, - currencyQuantity: totalPriceRaw, - currencySymbol: currencyInfo?.symbol || 'POL', - currencyDecimals: String(currencyDecimals || 18), - currencyAddress, - nftId: collectible.tokenId ?? '', - nftAddress: collectionAddress, - nftQuantity: collectible.quantity, - nftDecimals: String(dataCollectionInfo?.decimals || 18), - calldata: txData - }, - projectAccessKey: projectAccessKey, - apiClientUrl: env.apiUrl, - tokenMetadata: tokenMetadata - }, - disableSardineClientTokenFetch - ) - const missingCreditCardProvider = !creditCardProvider const missingTransakConfig = !transakConfig && creditCardProvider === 'transak' const transakApiKey = transakConfig?.apiKey || transakGlobalApiKey @@ -147,107 +113,70 @@ export const useCreditCardPayment = ({ } } - if (creditCardProvider === 'transak') { - // Transak requires the recipient address to be the proxy address - // so we need to replace the recipient address with the proxy address in the calldata - // this is a weird hack so that credit card integrations are as simple as possible and should work 99% of the time - // If an issue arises, the user can override the calldata in the transak settings - - const calldataWithProxy = - transakConfig?.callDataOverride ?? - txData.replace(recipientAddress.toLowerCase().substring(2), TRANSAK_PROXY_ADDRESS.toLowerCase().substring(2)) - - const pakoData = Array.from(pako.deflate(calldataWithProxy)) - - const transakCallData = encodeURIComponent(btoa(String.fromCharCode.apply(null, pakoData))) - - const price = Number(formatUnits(BigInt(totalPriceRaw), Number(currencyDecimals || 18))) - - const transakNftDataJson = JSON.stringify([ - { - imageURL: tokenMetadata?.image || '', - nftName: tokenMetadata?.name || 'collectible', - collectionAddress: collectionAddress, - tokenID: [collectible.tokenId], - price: [price], - quantity: Number(collectible.quantity), - nftType: dataCollectionInfo?.type || 'ERC721' - } - ]) + // Transak requires the recipient address to be the proxy address + // so we need to replace the recipient address with the proxy address in the calldata + // this is a weird hack so that credit card integrations are as simple as possible and should work 99% of the time + // If an issue arises, the user can override the calldata in the transak settings - const transakNftData = encodeURIComponent(btoa(transakNftDataJson)) + const calldataWithProxy = + transakConfig?.callDataOverride ?? + txData.replace(recipientAddress.toLowerCase().substring(2), TRANSAK_PROXY_ADDRESS.toLowerCase().substring(2)) - const estimatedGasLimit = '500000' + const pakoData = Array.from(pako.deflate(calldataWithProxy)) - const partnerOrderId = `${recipientAddress}-${new Date().getTime()}` + const transakCallData = encodeURIComponent(btoa(String.fromCharCode.apply(null, pakoData))) - // Note: the network name might not always line up with Transak. A conversion function might be necessary - const network = findSupportedNetwork(chain) - const networkName = network?.name.toLowerCase() - const transakLink = `${transakApiUrl}?apiKey=${transakApiKey}&isNFT=true&calldata=${transakCallData}&contractId=${transakConfig?.contractId}&cryptoCurrencyCode=${currencySymbol}&estimatedGasLimit=${estimatedGasLimit}&nftData=${transakNftData}&walletAddress=${recipientAddress}&disableWalletAddressForm=true&partnerOrderId=${partnerOrderId}&network=${networkName}` + const price = Number(formatUnits(BigInt(totalPriceRaw), Number(currencyDecimals || 18))) - return { - error: null, - data: { - iframeId: TRANSAK_IFRAME_ID, - paymentUrl: transakLink, - CreditCardIframe: () => ( -
-