updated nft data

Author: SamueleA

packages/checkout/src/api/data.ts

@@ -500,13 +500,23 @@ export const fetchFortePaymentStatus = async (
   }
 }
 
+export interface TransakNFTData {
+  imageURL: string
+  nftName: string
+  collectionAddress: string
+  tokenID: string[]
+  price: number[]
+  quantity: number
+  nftType: string
+}
+
 export interface TransakWidgetUrlArgs {
   isNFT?: boolean
   calldata?: string
   targetContractAddress?: string
   cryptoCurrencyCode?: string
   estimatedGasLimit?: number
-  nftData?: string
+  nftData?: TransakNFTData[]
   walletAddress: string
   disableWalletAddressForm?: boolean
   partnerOrderId?: string

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

@@ -3,7 +3,6 @@ import { compareAddress } from '@0xsequence/connect'
 import { useConfig } from '@0xsequence/hooks'
 import type { ContractInfo, TokenMetadata } from '@0xsequence/metadata'
 import { findSupportedNetwork } from '@0xsequence/network'
-import pako from 'pako'
 import React, { useEffect, useMemo, useRef } from 'react'
 import { formatUnits, zeroAddress, type Hex } from 'viem'
 
@@ -133,25 +132,19 @@ export const useCreditCardPayment = ({
     transakConfig?.callDataOverride ??
     txData.replace(recipientAddress.toLowerCase().substring(2), TRANSAK_PROXY_ADDRESS.toLowerCase().substring(2))
 
-  const pakoData = Array.from(pako.deflate(calldataWithProxy))
-
-  const transakCallData = btoa(String.fromCharCode.apply(null, pakoData))
-
   const price = Number(formatUnits(BigInt(totalPriceRaw), Number(currencyDecimals || 18)))
 
-  const transakNftDataJson = JSON.stringify([
+  const transakNftData = [
     {
       imageURL: tokenMetadata?.image || '',
       nftName: tokenMetadata?.name || 'collectible',
       collectionAddress: collectionAddress,
-      tokenID: [collectible.tokenId],
+      tokenID: [collectible.tokenId || ''],
       price: [price],
       quantity: Number(collectible.quantity),
       nftType: dataCollectionInfo?.type || 'ERC721'
     }
-  ])
-
-  const transakNftData = btoa(transakNftDataJson)
+  ]
 
   const estimatedGasLimit = 500000
 
@@ -169,7 +162,7 @@ export const useCreditCardPayment = ({
   } = useTransakWidgetUrl(
     {
       isNFT: true,
-      calldata: transakCallData,
+      calldata: calldataWithProxy,
       targetContractAddress,
       cryptoCurrencyCode: getCurrencyCode({
         chainId: network?.chainId || 137,

packages/checkout/src/views/PendingCreditCardTransaction.tsx

@@ -2,7 +2,6 @@ import { useAnalyticsContext, useProjectAccessKey } from '@0xsequence/connect'
 import { Spinner, Text } from '@0xsequence/design-system'
 import { useConfig, useGetContractInfo, useGetTokenMetadata } from '@0xsequence/hooks'
 import { findSupportedNetwork } from '@0xsequence/network'
-import pako from 'pako'
 import { useEffect, useMemo, useRef } from 'react'
 import { formatUnits } from 'viem'
 
@@ -96,13 +95,9 @@ export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: Pen
       TRANSAK_PROXY_ADDRESS.toLowerCase().substring(2)
     )
 
-  const pakoData = Array.from(pako.deflate(calldataWithProxy))
-
-  const transakCallData = btoa(String.fromCharCode.apply(null, pakoData))
-
   const price = Number(formatUnits(BigInt(creditCardCheckout.currencyQuantity), Number(creditCardCheckout.currencyDecimals)))
 
-  const transakNftDataJson = JSON.stringify([
+  const transakNftData = [
     {
       imageURL: tokenMetadata?.image || '',
       nftName: tokenMetadata?.name || 'collectible',
@@ -112,9 +107,7 @@ export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: Pen
       quantity: Number(creditCardCheckout.nftQuantity),
       nftType: collectionInfo?.type || 'ERC721'
     }
-  ])
-
-  const transakNftData = btoa(transakNftDataJson)
+  ]
 
   const estimatedGasLimit = 500000
 
@@ -134,7 +127,7 @@ export const PendingCreditCardTransactionTransak = ({ skipOnCloseCallback }: Pen
   } = useTransakWidgetUrl(
     {
       isNFT: true,
-      calldata: transakCallData,
+      calldata: calldataWithProxy,
       targetContractAddress: creditCardCheckout.contractAddress,
       cryptoCurrencyCode: getCurrencyCode({
         chainId: creditCardCheckout.chainId,