added fetchForteAccessToken and createPaymentIntent endpoint

Author: SamueleA

examples/react/src/components/Connected.tsx

@@ -395,7 +395,7 @@ export const Connected = () => {
       recipientAddress: address,
       currencyAddress,
       collectionAddress,
-      creditCardProviders: [checkoutProvider || 'transak'],
+      creditCardProviders: ['forte', 'sardine', 'transak'],
       onRampProvider: onRampProvider ? (onRampProvider as TransactionOnRampProvider) : TransactionOnRampProvider.transak,
       transakConfig: {
         contractId,

packages/checkout/src/api/data.ts

@@ -1,6 +1,6 @@
 import { SequenceAPIClient } from '@0xsequence/api'
 import { TokenMetadata } from '@0xsequence/metadata'
-import { ChainId, networks } from '@0xsequence/network'
+import { ChainId, networks, findSupportedNetwork } from '@0xsequence/network'
 
 import { CreditCardCheckout } from '../contexts'
 
@@ -233,3 +233,137 @@ export const fetchSardineOnRampLink = async ({
 
   return url.href
 }
+
+export interface FetchForteAccessTokenReturn {
+  accessToken: string
+  expiresIn: number
+  tokenType: string
+}
+
+//TODO: remove once part of the sequence api
+const FORTE_URL = 'https://staging-api.pti-dev.cloud'
+
+export const fetchForteAccessToken = async (): Promise<FetchForteAccessTokenReturn> => {
+  const clientId = '5tpnj5869vs3jpgtpif2ci8v08'
+  const clientSecret = 'jpkbg3e2ho9rbd0959qe5l6ke238d4bca2nptstfga2i9hant5e'
+
+  const url = `${FORTE_URL}/auth/v1/oauth2/token`
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json'
+    },
+    body: JSON.stringify({
+      client_id: clientId,
+      client_secret: clientSecret
+    })
+  })
+
+  const { data } = await res.json()
+
+  return {
+    accessToken: data.access_token,
+    expiresIn: data.expires_in,
+    tokenType: data.token_type
+  }
+}
+
+export interface CreateFortePaymentIntentArgs {
+  accessToken: string
+  tokenType: string
+  nonce: string
+  nftQuantity: string
+  recipientAddress: string
+  chainId: string
+  signature: string
+  tokenAddress: string
+  protocolAddress: string
+  nftName: string
+  imageUrl: string
+  tokenId: string
+}
+
+export interface CreateFortePaymentIntentReturn {
+  errorCode: string | null
+  flow: string
+  notes: string[]
+  paymentIntentId: string
+  widgetData: string
+}
+
+export const createFortePaymentIntent = async (args: CreateFortePaymentIntentArgs): Promise<CreateFortePaymentIntentReturn> => {
+  const {
+    accessToken,
+    tokenType,
+    recipientAddress,
+    chainId,
+    signature,
+    protocolAddress,
+    nftName,
+    nftQuantity,
+    imageUrl,
+    tokenId,
+    nonce
+  } = args
+  const network = findSupportedNetwork(chainId)
+
+  if (!network) {
+    throw new Error('Invalid chainId')
+  }
+
+  const url = `${FORTE_URL}/payments/v2/intent`
+  const forteBlockchainName = network.name.toLowerCase().replace('-', '_')
+  const idempotencyKey = `${recipientAddress}-${tokenId}-${protocolAddress}-${nftName}-${new Date().getTime()}`
+
+  const res = await fetch(url, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/json',
+      Authorization: `${tokenType} ${accessToken}`
+    },
+    body: JSON.stringify({
+      blockchain: forteBlockchainName,
+      currency: 'USD',
+      idempotency_key: idempotencyKey,
+      transaction_type: 'BUY_NFT_MINT',
+      buyer: {
+        id: recipientAddress,
+        wallet: {
+          address: recipientAddress,
+          blockchain: forteBlockchainName
+        }
+      },
+      items: [
+        {
+          name: nftName,
+          quantity: nftQuantity,
+          price: {
+            amount: nftQuantity,
+            image_url: imageUrl,
+            title: nftName,
+            mint_data: {
+              nonce,
+              signature: signature,
+              token_ids: [tokenId],
+              protocol_address: protocolAddress,
+              protocol: 'protocol-mint'
+            }
+          }
+        }
+      ]
+    })
+  })
+
+  const {
+    data: { error_code, flow, notes, payment_intent_id, widget_data }
+  } = await res.json()
+
+  return {
+    errorCode: error_code,
+    flow,
+    notes,
+    paymentIntentId: payment_intent_id,
+    widgetData: widget_data
+  }
+}

packages/checkout/src/contexts/CheckoutModal.ts

@@ -23,6 +23,8 @@ export interface TransakConfig {
   callDataOverride?: string
 }
 
+export interface ForteConfig {}
+
 export interface CreditCardCheckout {
   chainId: number
   contractAddress: string
@@ -36,8 +38,9 @@ export interface CreditCardCheckout {
   nftQuantity: string
   nftDecimals?: string
   calldata: string
-  provider?: 'sardine' | 'transak'
+  provider?: 'sardine' | 'transak' | 'forte'
   transakConfig?: TransakConfig
+  forteConfig?: ForteConfig
   onSuccess?: (transactionHash: string, settings: CreditCardCheckout) => void
   onError?: (error: Error, settings: CreditCardCheckout) => void
   onClose?: () => void

packages/checkout/src/contexts/SelectPaymentModal.ts

@@ -5,7 +5,7 @@ import type { TransakConfig } from '../contexts/CheckoutModal'
 
 import { createGenericContext } from './genericContext'
 
-export type CreditCardProviders = 'sardine' | 'transak'
+export type CreditCardProviders = 'sardine' | 'transak' | 'forte'
 
 export interface Collectible {
   tokenId: string

packages/checkout/src/hooks/index.ts

@@ -12,3 +12,4 @@ export * from './useCheckoutOptionsSalesContract'
 export * from './useERC1155SaleContractCheckout'
 export * from './useSkipOnCloseCallback'
 export * from './useSardineOnRampLink'
+export * from './useForteAccessToken'

packages/checkout/src/hooks/useForteAccessToken.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { fetchForteAccessToken } from '../api/data'
+
+export const useForteAccessToken = () => {
+  return useQuery({
+    queryKey: ['useForteAccessToken'],
+    queryFn: async () => {
+      const res = await fetchForteAccessToken()
+
+      return res
+    },
+    retry: false,
+    staleTime: 60 * 1000,
+    refetchOnWindowFocus: false
+  })
+}

packages/checkout/src/hooks/useFortePaymentIntent.ts

@@ -0,0 +1,17 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { createFortePaymentIntent, CreateFortePaymentIntentArgs } from '../api/data'
+
+export const useFortePaymentIntent = (args: CreateFortePaymentIntentArgs) => {
+  return useQuery({
+    queryKey: ['useFortePaymentIntent', args],
+    queryFn: async () => {
+      const res = await createFortePaymentIntent(args)
+
+      return res
+    },
+    retry: false,
+    staleTime: 60 * 1000,
+    refetchOnWindowFocus: false
+  })
+}

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

@@ -14,7 +14,7 @@ interface PayWithCreditCardProps {
   skipOnCloseCallback: () => void
 }
 
-type BasePaymentProviderOptions = 'sardine' | 'transak'
+type BasePaymentProviderOptions = 'sardine' | 'transak' | 'forte'
 type CustomPaymentProviderOptions = 'custom'
 type PaymentProviderOptions = BasePaymentProviderOptions | CustomPaymentProviderOptions
 
@@ -64,6 +64,7 @@ export const PayWithCreditCard = ({ settings, disableButtons, skipOnCloseCallbac
         return
       case 'sardine':
       case 'transak':
+      case 'forte':
         onPurchase()
         return
       default:
@@ -134,6 +135,7 @@ export const PayWithCreditCard = ({ settings, disableButtons, skipOnCloseCallbac
             switch (creditCardProvider) {
               case 'sardine':
               case 'transak':
+              case 'forte':
               case 'custom':
                 return (
                   <Card

packages/checkout/src/views/PendingCreditCardTransaction.tsx

@@ -14,7 +14,8 @@ import {
   useCheckoutModal,
   useSardineClientToken,
   useTransactionStatusModal,
-  useSkipOnCloseCallback
+  useSkipOnCloseCallback,
+  useForteAccessToken
 } from '../hooks'
 import { TRANSAK_PROXY_ADDRESS } from '../utils/transak'
 
@@ -35,6 +36,8 @@ export const PendingCreditCardTransaction = () => {
   const { skipOnCloseCallback } = useSkipOnCloseCallback(onClose)
 
   switch (provider) {
+    case 'forte':
+      return <PendingCreditCardTransactionForte skipOnCloseCallback={skipOnCloseCallback} />
     case 'transak':
       return <PendingCreditCardTransactionTransak skipOnCloseCallback={skipOnCloseCallback} />
     case 'sardine':
@@ -431,3 +434,30 @@ export const PendingCreditCardTransactionSardine = ({ skipOnCloseCallback }: Pen
     </div>
   )
 }
+
+export const PendingCreditCardTransactionForte = ({ skipOnCloseCallback }: PendingCreditTransactionProps) => {
+  const { data: accessTokenData, isLoading: isLoadingAccessToken, isError: isErrorAccessToken } = useForteAccessToken()
+
+  if (isLoadingAccessToken) {
+    return (
+      <div className="flex items-center justify-center" style={{ height: '770px' }}>
+        <Spinner size="lg" />
+      </div>
+    )
+  }
+
+  if (isErrorAccessToken) {
+    return (
+      <div className="flex items-center justify-center" style={{ height: '770px' }}>
+        <Text color="primary">An error has occurred</Text>
+      </div>
+    )
+  }
+
+  return (
+    <div className="flex items-center justify-center" style={{ height: '770px' }}>
+      <Text color="primary">Forte</Text>
+      <Text color="primary">{accessTokenData?.accessToken}</Text>
+    </div>
+  )
+}