removed transakConfig object

Author: SamueleA

examples/react/src/components/Connected.tsx

@@ -422,9 +422,6 @@ export const Connected = () => {
       recipientAddress: address,
       creditCardProviders: [creditCardProvider],
       onRampProvider: onRampProvider ? (onRampProvider as TransactionOnRampProvider) : TransactionOnRampProvider.transak,
-      transakConfig: {
-        contractId: isDev ? '68cd557b1f0d7a10940611a6' : '674eb5613d739107bbd18ed2'
-      },
       onSuccess: (txnHash?: string) => {
         console.log('success!', txnHash)
       },

examples/react/src/components/CustomCheckout/index.tsx

@@ -55,9 +55,6 @@ export const CustomCheckout = () => {
     currencyAddress,
     collectionAddress,
     creditCardProvider: 'transak' as CreditCardProviders,
-    transakConfig: {
-      contractId
-    },
     onSuccess: (txnHash?: string) => {
       console.log('success!', txnHash)
     },

examples/react/src/utils/checkout.ts

@@ -178,7 +178,7 @@ export const checkoutPresets: Record<string, (recipientAddress: string) => Check
       }
     }
   },
-  'forte-payment-erc1155-sale-native-token-testnet': (recipientAddress: string) => {
+  'forte-transak-payment-erc1155-sale-native-token-testnet': (recipientAddress: string) => {
     const collectibles = [
       {
         tokenId: '1',

packages/checkout/README.md

@@ -274,9 +274,6 @@ const CustomCheckoutUI = () => {
     currencyAddress,
     collectionAddress,
     creditCardProvider: 'transak' as CreditCardProviders,
-    transakConfig: {
-      contractId,
-    },
     onSuccess: (txnHash?: string) => {
       console.log('success!', txnHash)
     },

packages/checkout/src/api/data.ts

@@ -503,7 +503,7 @@ export const fetchFortePaymentStatus = async (
 export interface TransakWidgetUrlArgs {
   isNFT?: boolean
   calldata?: string
-  contractId?: string
+  targetContractAddress?: string
   cryptoCurrencyCode?: string
   estimatedGasLimit?: number
   nftData?: string

packages/checkout/src/contexts/CheckoutModal.ts

@@ -19,7 +19,6 @@ interface OrderSummaryItem {
 }
 
 export interface TransakConfig {
-  contractId: string
   callDataOverride?: string
 }
 

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

@@ -85,11 +85,7 @@ export const useCreditCardPayment = ({
     isLoadingTokenMetadatas || isLoadingCurrencyInfo || isLoadingCollectionInfo || creditCardProvider !== 'sardine'
 
   const disableTransakWidgetUrlFetch =
-    isLoadingTokenMetadatas ||
-    isLoadingCurrencyInfo ||
-    isLoadingCollectionInfo ||
-    creditCardProvider !== 'transak' ||
-    !transakConfig
+    isLoadingTokenMetadatas || isLoadingCurrencyInfo || isLoadingCollectionInfo || creditCardProvider !== 'transak'
 
   const { sardineCheckoutUrl: sardineProxyUrl } = useEnvironmentContext()
   const network = findSupportedNetwork(chain)
@@ -174,7 +170,7 @@ export const useCreditCardPayment = ({
     {
       isNFT: true,
       calldata: transakCallData,
-      contractId: transakConfig?.contractId,
+      targetContractAddress,
       cryptoCurrencyCode: currencySymbol,
       estimatedGasLimit,
       nftData: transakNftData,
@@ -188,9 +184,8 @@ export const useCreditCardPayment = ({
   )
 
   const missingCreditCardProvider = !creditCardProvider
-  const missingTransakConfig = !transakConfig && creditCardProvider === 'transak'
 
-  if (missingCreditCardProvider || missingTransakConfig) {
+  if (missingCreditCardProvider) {
     return {
       error: new Error('Missing credit card provider or transak config'),
       data: {

packages/checkout/src/hooks/useSelectPaymentModal.ts

@@ -80,9 +80,6 @@ type UseSelectPaymentModalReturnType = {
  *       currencyAddress,
  *       collectionAddress,
  *       creditCardProviders: ['sardine', 'transak'],
- *       transakConfig: {
- *         contractId: 'your-contract-id',
- *       },
  *       copyrightText: 'ⓒ2024 Your Company',
  *       onSuccess: (txnHash: string) => {
  *         console.log('success!', txnHash)

packages/checkout/src/views/Checkout/PaymentMethodSelect/index.tsx

@@ -36,13 +36,6 @@ export const PaymentSelectionContent = () => {
 
   const isFree = Number(price) == 0
 
-  const validCreditCardProviders = creditCardProviders.filter(provider => {
-    if (provider === 'transak') {
-      return !!selectPaymentSettings?.transakConfig
-    }
-    return true
-  })
-
   const [selectedTab, setSelectedTab] = useState<Tab>('crypto')
   const { clearCachedBalances } = useClearCachedBalances()
 
@@ -52,7 +45,7 @@ export const PaymentSelectionContent = () => {
 
   const isTokenIdUnknown = collectibles.some(collectible => !collectible.tokenId)
 
-  const showCreditCardPayment = validCreditCardProviders.length > 0 && !isTokenIdUnknown && !isFree
+  const showCreditCardPayment = creditCardProviders.length > 0 && !isTokenIdUnknown && !isFree
 
   const tabs: { label: string; value: Tab }[] = [
     { label: 'Crypto', value: 'crypto' as Tab },

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

@@ -124,45 +124,36 @@ export const PayWithCreditCard = ({ settings, disableButtons, skipOnCloseCallbac
     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)
-          .filter(provider => {
-            // cannot display transak checkout if the settings aren't provided
-            if (provider === 'transak' && !settings.transakConfig) {
-              return false
-            }
-            return true
-          })
-          .map(creditCardProvider => {
-            switch (creditCardProvider) {
-              case 'sardine':
-              case 'transak':
-              case 'forte':
-              case 'custom':
-                return (
-                  <Card
-                    className="flex justify-between items-center p-4 cursor-pointer"
-                    key="sardine"
-                    onClick={() => {
-                      setSelectedPaymentProvider(creditCardProvider)
-                    }}
-                    disabled={disableButtons}
-                  >
-                    <div className="flex flex-row gap-3 items-center">
-                      <PaymentsIcon className="text-white" />
-                      <Text color="primary" variant="normal" fontWeight="bold">
-                        Pay with credit or debit card
-                      </Text>
-                    </div>
-                    <div style={{ transform: 'rotate(-45deg)' }}>
-                      <ArrowRightIcon className="text-white" />
-                    </div>
-                  </Card>
-                )
-              default:
-                return null
-            }
-          })}
+        {creditCardProviders.slice(0, 1).map(creditCardProvider => {
+          switch (creditCardProvider) {
+            case 'sardine':
+            case 'transak':
+            case 'forte':
+            case 'custom':
+              return (
+                <Card
+                  className="flex justify-between items-center p-4 cursor-pointer"
+                  key="sardine"
+                  onClick={() => {
+                    setSelectedPaymentProvider(creditCardProvider)
+                  }}
+                  disabled={disableButtons}
+                >
+                  <div className="flex flex-row gap-3 items-center">
+                    <PaymentsIcon className="text-white" />
+                    <Text color="primary" variant="normal" fontWeight="bold">
+                      Pay with credit or debit card
+                    </Text>
+                  </div>
+                  <div style={{ transform: 'rotate(-45deg)' }}>
+                    <ArrowRightIcon className="text-white" />
+                  </div>
+                </Card>
+              )
+            default:
+              return null
+          }
+        })}
       </div>
     )
   }