transak nft checkout

packages/checkout/src/contexts/CheckoutModal.ts

@@ -29,6 +29,7 @@ export interface CreditCardCheckout {
   nftQuantity: string
   nftDecimals?: string
   calldata: string
+  provider?: 'sardine' | 'transak'
   onSuccess?: (transactionHash: string, settings: CreditCardCheckout) => void
   onError?: (error: Error, settings: CreditCardCheckout) => void
   isDev?: boolean

packages/checkout/src/shared/components/KitCheckoutProvider.tsx

@@ -25,7 +25,7 @@ import {
 } from '../../contexts'
 import { NavigationHeader } from '../../shared/components/NavigationHeader'
 import {
-  PendingTransaction,
+  PendingCreditCardTransaction,
   TransactionError,
   TransactionSuccess,
   CheckoutSelection,
@@ -153,7 +153,7 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
       case 'select-method-checkout':
         return <CheckoutSelection />
       case 'transaction-pending':
-        return <PendingTransaction />
+        return <PendingCreditCardTransaction />
       case 'transaction-success':
         return <TransactionSuccess />
       case 'transaction-error':

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

@@ -24,7 +24,7 @@ interface PayWithCreditCardProps {
   disableButtons: boolean
 }
 
-type PaymentProviderOptions = 'sardine'
+type PaymentProviderOptions = 'sardine' | 'transak'
 
 export const PayWithCreditCard = ({ settings, disableButtons }: PayWithCreditCardProps) => {
   const {
@@ -61,14 +61,15 @@ export const PayWithCreditCard = ({ settings, disableButtons }: PayWithCreditCar
   const payWithSelectedProvider = () => {
     switch (selectedPaymentProvider) {
       case 'sardine':
-        onPurchaseSardine()
+      case 'transak':
+        onPurchase()
         return
       default:
         return
     }
   }
 
-  const onPurchaseSardine = () => {
+  const onPurchase = () => {
     if (!userAddress || !currencyInfoData) {
       return
     }
@@ -94,6 +95,7 @@ export const PayWithCreditCard = ({ settings, disableButtons }: PayWithCreditCar
         nftQuantity: collectible.quantity,
         nftDecimals: collectible.decimals === undefined ? undefined : String(collectible.decimals),
         isDev,
+        provider: selectedPaymentProvider,
         calldata: txData,
         approvedSpenderAddress: approvedSpenderAddress || targetContractAddress
       }
@@ -106,17 +108,19 @@ export const PayWithCreditCard = ({ settings, disableButtons }: PayWithCreditCar
   const Options = () => {
     return (
       <Box flexDirection="column" justifyContent="center" alignItems="center" gap="2" width="full">
-        {creditCardProviders.map(creditCardProvider => {
+        {/* Only 1 option will be displayed, even if multiple providers are passed */}
+        {creditCardProviders.slice(0, 1).map(creditCardProvider => {
           switch (creditCardProvider) {
             case 'sardine':
+            case 'transak':
               return (
                 <Card
                   key="sardine"
                   justifyContent="space-between"
                   alignItems="center"
                   padding="4"
                   onClick={() => {
-                    setSelectedPaymentProvider('sardine')
+                    setSelectedPaymentProvider(creditCardProvider)
                   }}
                   opacity={{
                     hover: '80',

packages/checkout/src/views/PendingTransaction.tsx → packages/checkout/src/views/PendingCreditCardTransaction.tsx

@@ -8,7 +8,28 @@ import { useNavigation, useCheckoutModal, useSardineClientToken, useTransactionS
 
 const POLLING_TIME = 10 * 1000
 
-export const PendingTransaction = () => {
+export const PendingCreditCardTransaction = () => {
+  const nav = useNavigation()
+  const {
+    params: {
+      creditCardCheckout: { provider }
+    }
+  } = nav.navigation as TransactionPendingNavigation
+
+  switch (provider) {
+    case 'transak':
+      return <PendingCreditCardTransactionSardine />
+    case 'sardine':
+    default:
+      return <PendingCreditCardTransactionSardine />
+  }
+}
+
+export const PendingCreditCardTransactionTransak = () => {
+  return null
+}
+
+export const PendingCreditCardTransactionSardine = () => {
   const { openTransactionStatusModal } = useTransactionStatusModal()
   const nav = useNavigation()
   const { settings, closeCheckout } = useCheckoutModal()

packages/checkout/src/views/index.ts

@@ -1,4 +1,4 @@
-export * from './PendingTransaction'
+export * from './PendingCreditCardTransaction'
 export * from './TransactionSuccess'
 export * from './TransactionError'
 export * from './CheckoutSelection'