fixed presets

Author: SamueleA

examples/react/src/components/Connected.tsx

@@ -42,7 +42,7 @@ const searchParams = new URLSearchParams(location.search)
 const isDebugMode = searchParams.has('debug')
 const checkoutProvider = searchParams.get('checkoutProvider')
 const onRampProvider = searchParams.get('onRampProvider')
-const checkoutPreset = searchParams.get('checkoutPreset') || 'forte-payment-erc1155-sale-native-token-testnet'
+const checkoutPreset = searchParams.get('checkoutPreset') || 'forte-transak-payment-erc1155-sale-native-token-testnet'
 
 // @ts-ignore
 const isDev = __SEQUENCE_WEB_SDK_IS_DEV__

packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx

@@ -7,7 +7,6 @@ import React, { useEffect, useMemo, useRef } from 'react'
 import { formatUnits, zeroAddress, type Hex } from 'viem'
 
 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, getCurrencyCode } from '../../utils/transak.js'
 
@@ -77,13 +76,10 @@ export const useCreditCardPayment = ({
 }: UseCreditCardPaymentArgs): UseCreditCardPaymentReturn => {
   const projectAccessKey = useProjectAccessKey()
   const { env } = useConfig()
-  const disableSardineClientTokenFetch =
-    isLoadingTokenMetadatas || isLoadingCurrencyInfo || isLoadingCollectionInfo || creditCardProvider !== 'sardine'
 
   const disableTransakWidgetUrlFetch =
     isLoadingTokenMetadatas || isLoadingCurrencyInfo || isLoadingCollectionInfo || creditCardProvider !== 'transak'
 
-  const { sardineCheckoutUrl: sardineProxyUrl } = useEnvironmentContext()
   const network = findSupportedNetwork(chain)
   const error = errorCollectionInfo || errorTokenMetadata || errorCurrencyInfo
   const isLoading = isLoadingCollectionInfo || isLoadingTokenMetadatas || isLoadingCurrencyInfo
@@ -93,33 +89,6 @@ export const useCreditCardPayment = ({
   const iframeRef = useRef<HTMLIFrameElement | null>(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
-  )
-
   // 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
@@ -234,43 +203,14 @@ export const useCreditCardPayment = ({
       },
       isLoading: isLoadingTransakLink
     }
-  ])
-
-  const transakNftData = encodeURIComponent(btoa(transakNftDataJson))
-
-  const estimatedGasLimit = '500000'
-
-  const partnerOrderId = `${recipientAddress}-${new Date().getTime()}`
-
-  // Note: the network name might not always line up with Transak. A conversion function might be necessary
-  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}`
+  }
 
   return {
     error: null,
     data: {
-      iframeId: TRANSAK_IFRAME_ID,
-      paymentUrl: transakLink,
-      CreditCardIframe: () => (
-        <div className="flex items-center justify-center" style={{ height: '770px' }}>
-          <iframe
-            id="transakIframe"
-            ref={iframeRef}
-            allow="camera;microphone;payment"
-            src={transakLink}
-            style={{
-              maxHeight: '650px',
-              height: '100%',
-              maxWidth: '380px',
-              width: '100%'
-            }}
-            referrerPolicy="strict-origin-when-cross-origin"
-          />
-        </div>
-      ),
-      EventListener: () => (
-        <TransakEventListener onSuccess={onSuccess} onError={onError} isLoading={isLoading} iframeRef={iframeRef} />
-      )
+      iframeId: '',
+      CreditCardIframe: () => null,
+      EventListener: () => null
     },
     isLoading: false
   }

packages/checkout/src/views/PaymentSelection/PayWithCreditCard/index.tsx

@@ -121,10 +121,8 @@ export const PayWithCreditCard = ({ settings, disableButtons, skipOnCloseCallbac
   const Options = () => {
     return (
       <div className="flex flex-col justify-center items-center gap-2 w-full">
-        {/* Only 1 option will be displayed, even if multiple providers are passed */}
         {creditCardProviders.slice(0, 1).map(creditCardProvider => {
           switch (creditCardProvider) {
-            case 'sardine':
             case 'transak':
             case 'forte':
             case 'custom':

packages/connect/src/styles.ts

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