From 7d0b862a931bb8b845d3cdbc516feec5d705b80e Mon Sep 17 00:00:00 2001
From: samuelea <batonenbois@gmail.com>
Date: Thu, 12 Dec 2024 12:42:03 -0500
Subject: [PATCH] added missing network field to Transak

---
 examples/react/src/components/Connected.tsx    | 11 +++++++++--
 .../src/views/PendingCreditCardTransaction.tsx | 18 ++++++++++++------
 2 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx
index 89903ae3..e68a5ab0 100644
--- a/examples/react/src/components/Connected.tsx
+++ b/examples/react/src/components/Connected.tsx
@@ -351,8 +351,15 @@ export const Connected = () => {
       recipientAddress: address,
       currencyAddress,
       collectionAddress,
-      creditCardProviders: ['sardine'],
-      isDev: true,
+      creditCardProviders: ['transak'],
+      transakConfig: {
+        // contractId for native sale contract: '0xf0056139095224f4eec53c578ab4de1e227b9597'
+        // contractId: '674eb55a3d739107bbd18ecb',
+        // contractId for ERC20 sale contract: '0xe65b75eb7c58ffc0bf0e671d64d0e1c6cd0d3e5b'
+        contractId: '674eb5613d739107bbd18ed2',
+        apiKey: '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
+      },
+      isDev: false,
       copyrightText: 'ⓒ2024 Sequence',
       onSuccess: (txnHash: string) => {
         console.log('success!', txnHash)
diff --git a/packages/checkout/src/views/PendingCreditCardTransaction.tsx b/packages/checkout/src/views/PendingCreditCardTransaction.tsx
index 2f24412c..2ee8a198 100644
--- a/packages/checkout/src/views/PendingCreditCardTransaction.tsx
+++ b/packages/checkout/src/views/PendingCreditCardTransaction.tsx
@@ -1,8 +1,9 @@
 import { Box, Spinner, Text } from '@0xsequence/design-system'
 import { useProjectAccessKey, useContractInfo, useTokenMetadata } from '@0xsequence/kit'
+import { findSupportedNetwork } from '@0xsequence/network'
 import pako from 'pako'
-import React, { useEffect } from 'react'
-import { formatUnits, parseUnits } from 'viem'
+import { useEffect } from 'react'
+import { formatUnits } from 'viem'
 
 import { fetchSardineOrderStatus } from '../api'
 import { TransactionPendingNavigation } from '../contexts'
@@ -20,7 +21,7 @@ export const PendingCreditCardTransaction = () => {
 
   switch (provider) {
     case 'transak':
-      return <PendingCreditCardTransactionSardine />
+      return <PendingCreditCardTransactionTransak />
     case 'sardine':
     default:
       return <PendingCreditCardTransactionSardine />
@@ -50,6 +51,8 @@ export const PendingCreditCardTransactionTransak = () => {
     isError: isErrorCollectionInfo
   } = useContractInfo(creditCardCheckout.chainId, creditCardCheckout.nftAddress)
 
+  const network = findSupportedNetwork(creditCardCheckout.chainId)
+
   const tokenMetadata = tokensMetadata ? tokensMetadata[0] : undefined
 
   const transakConfig = settings?.creditCardCheckout?.transakConfig
@@ -81,10 +84,13 @@ export const PendingCreditCardTransactionTransak = () => {
 
   const partnerOrderId = `${creditCardCheckout.recipientAddress}-${new Date().getTime()}`
 
-  const transakLink = `${baseUrl}?apiKey=${transakConfig?.apiKey}&isNFT=true&calldata=${transakCallData}&contractId=${transakConfig?.contractId}&cryptoCurrencyCode=${creditCardCheckout.currencySymbol}&estimatedGasLimit=${estimatedGasLimit}&nftData=${transakNftData}&walletAddress=${creditCardCheckout.recipientAddress}&disableWalletAddressForm=true&partnerOrderId=${partnerOrderId}`
+  // Note: the network name might not always line up with Transak. A conversion function might be necessary
+  const networkName = network?.name.toLowerCase()
+
+  const transakLink = `${baseUrl}?apiKey=${transakConfig?.apiKey}&isNFT=true&calldata=${transakCallData}&contractId=${transakConfig?.contractId}&cryptoCurrencyCode=${creditCardCheckout.currencySymbol}&estimatedGasLimit=${estimatedGasLimit}&nftData=${transakNftData}&walletAddress=${creditCardCheckout.recipientAddress}&disableWalletAddressForm=true&partnerOrderId=${partnerOrderId}&network=${networkName}`
 
-  const isLoading = isLoadingTokenMetadata
-  const isError = isErrorTokenMetadata
+  const isLoading = isLoadingTokenMetadata || isLoadingCollectionInfo
+  const isError = isErrorTokenMetadata || isErrorCollectionInfo
 
   useEffect(() => {
     const transakIframeElement = document.getElementById('transakIframe') as HTMLIFrameElement