forte payment (#405)

* added fetchForteAccessToken and createPaymentIntent endpoint

* add usePaymentIntent flow

* forte config

* openSea testnet

* forte integration opensea

* payment status checking

* pass selleraddress to payment intent

* widget data

* changed test input for opensea tx

* fixed widget data

* return null from the widget loader

* response.ok check

* fix for forte widget implementation

* Forte payment controller (WIP)

* initialize fortepayment from the controller

* forte orderHash

* different types for different payment configs

* added magic eden payment intent

* linter fixes

* mint configs for forte

* updated forte info for mints

* calldata fix

* added config for custom evm call

* forte contract address

* forte settings

* payment modal presets

* orderbook transaction data

* config update

* removal of magic eden for forte

* structure call data for forte paymetns

* orderbook integration

* fixed onSuccess params

* fixed forte flow not starting

* added approvedspender field

* styles

* added settings for checkout

* fixes related to approvedSpender address

* fixes to configuration

* fixed body to work with sequence api

* integration with sequence backend for forte

* clean up

* prevent onSuccess callback from being called multiple times

* improve error messages

* custom_evm_call fixes

* added seller as targetContracts for mints

* used seller from forteconfig

* fixed the apiUrl

* pass project access key to forte endpoints

* updated dev access key

* updated project access key for dev environmnet

* fix linter errors

* removed dedicated seaport forteconfig option

* wait for FortePaymentsWidgetLoaded even before opening the modal

* checkout in demo defaults to forte

Author: SamueleA

examples/react/src/components/Connected.tsx

@@ -4,9 +4,9 @@ import {
   useCheckoutModal,
   useERC1155SaleContractCheckout,
   useSelectPaymentModal,
-  useSwapModal
+  useSwapModal,
+  type SwapModalSettings
 } from '@0xsequence/checkout'
-import type { SwapModalSettings } from '@0xsequence/checkout'
 import {
   getModalPositionCss,
   signEthAuthProof,
@@ -23,16 +23,15 @@ import { useOpenWalletModal } from '@0xsequence/wallet-widget'
 import { CardButton, Header, WalletListItem } from 'example-shared-components'
 import { AnimatePresence } from 'motion/react'
 import React, { useEffect, type ComponentProps } from 'react'
-import { encodeFunctionData, formatUnits, parseAbi, toHex, zeroAddress } from 'viem'
+import { encodeFunctionData, formatUnits, parseAbi } from 'viem'
 import { createSiweMessage, generateSiweNonce } from 'viem/siwe'
 import { useAccount, useChainId, usePublicClient, useSendTransaction, useWalletClient, useWriteContract } from 'wagmi'
 
 import { sponsoredContractAddresses } from '../config'
 import { messageToSign } from '../constants'
-import { ERC_1155_SALE_CONTRACT } from '../constants/erc1155-sale-contract'
-// import { ERC_721_SALE_CONTRACT } from '../constants/erc721-sale-contract'
 import { abi } from '../constants/nft-abi'
 import { delay, getCheckoutSettings, getOrderbookCalldata } from '../utils'
+import { checkoutPresets } from '../utils/checkout'
 
 import { CustomCheckout } from './CustomCheckout'
 import { Select } from './Select'
@@ -42,6 +41,7 @@ const searchParams = new URLSearchParams(location.search)
 const isDebugMode = searchParams.has('debug')
 const checkoutProvider = searchParams.get('checkoutProvider')
 const onRampProvider = searchParams.get('onRampProvider')
+const checkoutPreset = searchParams.get('checkoutPreset') || 'forte-payment-erc1155-sale-native-token-testnet'
 
 export const Connected = () => {
   const [isOpenCustomCheckout, setIsOpenCustomCheckout] = React.useState(false)
@@ -413,78 +413,16 @@ export const Connected = () => {
       return
     }
 
-    // NATIVE token sale
-    const currencyAddress = 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 = '200000'
-    // const contractId = '674eb5613d739107bbd18ed2'
-
-    const collectibles = [
-      {
-        tokenId: '1',
-        quantity: '1'
-      }
-    ]
-
-    const purchaseTransactionData = encodeFunctionData({
-      abi: ERC_1155_SALE_CONTRACT,
-      functionName: 'mint',
-      // [to, tokenIds, amounts, data, expectedPaymentToken, maxTotal, proof]
-      args: [
-        address,
-        collectibles.map(c => BigInt(c.tokenId)),
-        collectibles.map(c => BigInt(c.quantity)),
-        toHex(0),
-        currencyAddress,
-        price,
-        [toHex(0, { size: 32 })]
-      ]
-    })
-
-    // ERC-721 contract
-    // const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'
-    // const salesContractAddress = '0xa0284905d29cbeb19f4be486f9091fac215b7a6a'
-    // const collectionAddress = '0xd705db0a96075b98758c4bdafe8161d8566a68f8'
-    // const price = '1'
-    // const contractId = '674eb5613d739107bbd18ed2'
-
-    // const chainId = 137
-
-    // const collectibles = [
-    //   {
-    //     quantity: '1'
-    //   }
-    // ]
-
-    // const purchaseTransactionData = encodeFunctionData({
-    //   abi: ERC_721_SALE_CONTRACT,
-    //   functionName: 'mint',
-    //   // [to, amount, expectedPaymentToken, maxTotal, proof]
-    //   args: [address, BigInt(1), currencyAddress, price, [toHex(0, { size: 32 })]]
-    // })
+    const creditCardProvider = checkoutProvider || 'forte'
 
     openSelectPaymentModal({
-      collectibles,
-      chain: chainId,
-      price,
-      targetContractAddress: salesContractAddress,
       recipientAddress: address,
-      currencyAddress,
-      collectionAddress,
-      creditCardProviders: [checkoutProvider || 'transak'],
+      creditCardProviders: [creditCardProvider],
       onRampProvider: onRampProvider ? (onRampProvider as TransactionOnRampProvider) : TransactionOnRampProvider.transak,
       transakConfig: {
-        contractId
+        contractId: '674eb5613d739107bbd18ed2'
       },
-      onSuccess: (txnHash: string) => {
+      onSuccess: (txnHash?: string) => {
         console.log('success!', txnHash)
       },
       onError: (error: Error) => {
@@ -493,7 +431,7 @@ export const Connected = () => {
       onClose: () => {
         console.log('modal closed!')
       },
-      txData: purchaseTransactionData
+      ...checkoutPresets[checkoutPreset as keyof typeof checkoutPresets](address || '')
     })
   }
 

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

@@ -59,7 +59,7 @@ export const CustomCheckout = () => {
       contractId,
       apiKey: '5911d9ec-46b5-48fa-a755-d59a715ff0cf'
     },
-    onSuccess: (txnHash: string) => {
+    onSuccess: (txnHash?: string) => {
       console.log('success!', txnHash)
     },
     onError: (error: Error) => {

examples/react/src/config.ts

@@ -15,7 +15,7 @@ const walletType: WalletType = searchParams.get('type') === 'universal' ? 'unive
 const isDebugMode = searchParams.has('debug')
 // @ts-ignore
 const isDev = __SEQUENCE_WEB_SDK_IS_DEV__
-const projectAccessKey = isDev ? 'AQAAAAAAAAK2JvvZhWqZ51riasWBftkrVXE' : 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI'
+const projectAccessKey = isDev ? 'AQAAAAAAAAbRfXdDS5e-ZD2pNeMcCtNnij4' : 'AQAAAAAAAEGvyZiWA9FMslYeG_yayXaHnSI'
 const walletConnectProjectId = 'c65a6cb1aa83c4e24500130f23a437d8'
 
 export const sponsoredContractAddresses: Record<number, `0x${string}`> = {
@@ -184,7 +184,8 @@ export const checkoutConfig: SequenceCheckoutConfig = {
         sardineCheckoutUrl: 'https://sardine-checkout-sandbox.sequence.info',
         sardineOnRampUrl: 'https://crypto.sandbox.sardine.ai/',
         transakApiUrl: 'https://global-stg.transak.com',
-        transakApiKey: 'c20f2a0e-fe6a-4133-8fa7-77e9f84edf98'
+        transakApiKey: 'c20f2a0e-fe6a-4133-8fa7-77e9f84edf98',
+        forteWidgetUrl: 'https://payments.sandbox.lemmax.com/forte-payments-widget.js'
       }
     : undefined
 }