transak nft checkout (#199)

* transak nft checkout

* transak integration

* regenerate lockfile

* added missing network field to Transak

* completed condition

* transak proxy insertion into calldata

examples/react/src/components/Connected.tsx

@@ -325,16 +325,18 @@ export const Connected = () => {
     }
 
     // NATIVE token sale
-    // const currencyAddress = ethers.ZeroAddress
-    // const salesContractAddress = '0xf0056139095224f4eec53c578ab4de1e227b9597'
-    // const collectionAddress = '0x92473261f2c26f2264429c451f70b0192f858795'
-    // const price = '200000000000000'
+    const currencyAddress = ethers.ZeroAddress
+    const salesContractAddress = '0xf0056139095224f4eec53c578ab4de1e227b9597'
+    const collectionAddress = '0x92473261f2c26f2264429c451f70b0192f858795'
+    const price = '200000000000000'
+    const contractId = '674eb55a3d739107bbd18ecb'
 
     // // ERC-20 contract
-    const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'
-    const salesContractAddress = '0xe65b75eb7c58ffc0bf0e671d64d0e1c6cd0d3e5b'
-    const collectionAddress = '0xdeb398f41ccd290ee5114df7e498cf04fac916cb'
-    const price = '20000'
+    // const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'
+    // const salesContractAddress = '0xe65b75eb7c58ffc0bf0e671d64d0e1c6cd0d3e5b'
+    // const collectionAddress = '0xdeb398f41ccd290ee5114df7e498cf04fac916cb'
+    // const price = '20000'
+    // const contractId = '674eb5613d739107bbd18ed2'
 
     const chainId = 137
 
@@ -351,8 +353,12 @@ export const Connected = () => {
       recipientAddress: address,
       currencyAddress,
       collectionAddress,
-      creditCardProviders: ['sardine'],
-      isDev: true,
+      creditCardProviders: ['transak'],
+      transakConfig: {
+        contractId,
+        apiKey: '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
+      },
+      isDev: false,
       copyrightText: 'ⓒ2024 Sequence',
       onSuccess: (txnHash: string) => {
         console.log('success!', txnHash)

packages/checkout/package.json

@@ -31,6 +31,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "pako": "^2.1.0",
     "qrcode.react": "^4.0.1",
     "react-copy-to-clipboard": "^5.1.0",
     "timeago-react": "^3.0.6"
@@ -55,6 +56,7 @@
   "devDependencies": {
     "@0xsequence/design-system": "^1.7.8",
     "@0xsequence/kit": "workspace:*",
+    "@types/pako": "^2.0.3",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "ethers": "^6.13.0",
     "framer-motion": "^8.5.2",

packages/checkout/src/contexts/CheckoutModal.ts

@@ -16,6 +16,12 @@ interface OrderSummaryItem {
   tokenId: string
 }
 
+export interface TransakConfig {
+  apiKey: string
+  contractId: string
+  callDataOverride?: string
+}
+
 export interface CreditCardCheckout {
   chainId: number
   contractAddress: string
@@ -29,6 +35,8 @@ export interface CreditCardCheckout {
   nftQuantity: string
   nftDecimals?: string
   calldata: string
+  provider?: 'sardine' | 'transak'
+  transakConfig?: TransakConfig
   onSuccess?: (transactionHash: string, settings: CreditCardCheckout) => void
   onError?: (error: Error, settings: CreditCardCheckout) => void
   isDev?: boolean

packages/checkout/src/contexts/SelectPaymentModal.ts

@@ -1,6 +1,7 @@
 import { Hex } from 'viem'
 
 import { createGenericContext } from './genericContext'
+import type { TransakConfig } from '../contexts/CheckoutModal'
 
 export type CreditCardProviders = 'sardine' | 'transak'
 
@@ -30,6 +31,7 @@ export interface SelectPaymentSettings {
   enableTransferFunds?: boolean
   creditCardProviders?: string[]
   copyrightText?: string
+  transakConfig?: TransakConfig
 }
 
 type SelectPaymentModalContext = {

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/utils/transak.ts

@@ -1,6 +1,7 @@
 import { AddFundsSettings } from '../contexts'
 
 export const TRANSAK_API_KEY = '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
+export const TRANSAK_PROXY_ADDRESS = '0x4a598b7ec77b1562ad0df7dc64a162695ce4c78a'
 
 export const getTransakLink = (addFundsSettings: AddFundsSettings) => {
   const defaultNetworks = 'ethereum,mainnet,arbitrum,optimism,polygon,polygonzkevm,zksync,base,bnb,oasys,astar,avaxcchain,immutablezkevm'

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 {
@@ -39,7 +39,8 @@ export const PayWithCreditCard = ({ settings, disableButtons }: PayWithCreditCar
     isDev = false,
     onSuccess = () => {},
     onError = () => {},
-    creditCardProviders = []
+    creditCardProviders = [],
+    transakConfig
   } = settings
 
   const { address: userAddress } = useAccount()
@@ -61,14 +62,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,7 +96,9 @@ export const PayWithCreditCard = ({ settings, disableButtons }: PayWithCreditCar
         nftQuantity: collectible.quantity,
         nftDecimals: collectible.decimals === undefined ? undefined : String(collectible.decimals),
         isDev,
+        provider: selectedPaymentProvider,
         calldata: txData,
+        transakConfig,
         approvedSpenderAddress: approvedSpenderAddress || targetContractAddress
       }
     }
@@ -106,40 +110,51 @@ export const PayWithCreditCard = ({ settings, disableButtons }: PayWithCreditCar
   const Options = () => {
     return (
       <Box flexDirection="column" justifyContent="center" alignItems="center" gap="2" width="full">
-        {creditCardProviders.map(creditCardProvider => {
-          switch (creditCardProvider) {
-            case 'sardine':
-              return (
-                <Card
-                  key="sardine"
-                  justifyContent="space-between"
-                  alignItems="center"
-                  padding="4"
-                  onClick={() => {
-                    setSelectedPaymentProvider('sardine')
-                  }}
-                  opacity={{
-                    hover: '80',
-                    base: '100'
-                  }}
-                  cursor="pointer"
-                  disabled={disableButtons}
-                >
-                  <Box flexDirection="row" gap="3" alignItems="center">
-                    <PaymentsIcon color="white" />
-                    <Text color="text100" variant="normal" fontWeight="bold">
-                      Pay with credit or debit card
-                    </Text>
-                  </Box>
-                  <Box style={{ transform: 'rotate(-45deg)' }}>
-                    <ArrowRightIcon color="white" />
-                  </Box>
-                </Card>
-              )
-            default:
-              return null
-          }
-        })}
+        {/* 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':
+                return (
+                  <Card
+                    key="sardine"
+                    justifyContent="space-between"
+                    alignItems="center"
+                    padding="4"
+                    onClick={() => {
+                      setSelectedPaymentProvider(creditCardProvider)
+                    }}
+                    opacity={{
+                      hover: '80',
+                      base: '100'
+                    }}
+                    cursor="pointer"
+                    disabled={disableButtons}
+                  >
+                    <Box flexDirection="row" gap="3" alignItems="center">
+                      <PaymentsIcon color="white" />
+                      <Text color="text100" variant="normal" fontWeight="bold">
+                        Pay with credit or debit card
+                      </Text>
+                    </Box>
+                    <Box style={{ transform: 'rotate(-45deg)' }}>
+                      <ArrowRightIcon color="white" />
+                    </Box>
+                  </Card>
+                )
+              default:
+                return null
+            }
+          })}
       </Box>
     )
   }