@0xsequence/checkout 0.0.0-20250314205219

package/src/contexts/SelectPaymentModal.ts

@@ -0,0 +1,50 @@
+import { Hex } from 'viem'
+
+import type { TransakConfig } from '../contexts/CheckoutModal'
+
+import { createGenericContext } from './genericContext'
+
+export type CreditCardProviders = 'sardine' | 'transak'
+
+export interface Collectible {
+  tokenId: string
+  quantity: string
+  decimals?: number
+  price?: string
+}
+
+export interface SupplementaryAnalyticsInfo {
+  [key: string]: string
+}
+
+export interface SelectPaymentSettings {
+  collectibles: Collectible[]
+  chain: number | string
+  currencyAddress: string | Hex
+  price: string
+  targetContractAddress: string | Hex
+  txData: Hex
+  collectionAddress: string | Hex
+  recipientAddress: string | Hex
+  approvedSpenderAddress?: string
+  transactionConfirmations?: number
+  onSuccess?: (txHash: string) => void
+  onError?: (error: Error) => void
+  onClose?: () => void
+  enableMainCurrencyPayment?: boolean
+  enableSwapPayments?: boolean
+  enableTransferFunds?: boolean
+  creditCardProviders?: string[]
+  copyrightText?: string
+  transakConfig?: TransakConfig
+  customProviderCallback?: (onSuccess: (txHash: string) => void, onError: (error: Error) => void, onClose: () => void) => void
+  supplementaryAnalyticsInfo?: SupplementaryAnalyticsInfo
+}
+
+type SelectPaymentModalContext = {
+  openSelectPaymentModal: (settings: SelectPaymentSettings) => void
+  closeSelectPaymentModal: () => void
+  selectPaymentSettings?: SelectPaymentSettings
+}
+
+export const [useSelectPaymentContext, SelectPaymentContextProvider] = createGenericContext<SelectPaymentModalContext>()

package/src/contexts/SwapModal.ts

@@ -0,0 +1,31 @@
+'use client'
+
+import { Hex } from 'viem'
+
+import { createGenericContext } from './genericContext'
+
+interface Transaction {
+  to: Hex
+  data?: Hex
+  value?: bigint
+}
+
+export interface SwapModalSettings {
+  chainId: number
+  currencyAddress: string
+  currencyAmount: string
+  title?: string
+  description?: string
+  disableMainCurrency?: boolean
+  postSwapTransactions?: Transaction[]
+  blockConfirmations?: number
+  onSuccess?: (txHash: string) => void
+}
+
+type SwapModalContext = {
+  openSwapModal: (settings: SwapModalSettings) => void
+  closeSwapModal: () => void
+  swapModalSettings?: SwapModalSettings
+}
+
+export const [useSwapModalContext, SwapModalContextProvider] = createGenericContext<SwapModalContext>()

package/src/contexts/TransactionStatusModal.ts

@@ -0,0 +1,29 @@
+import { createGenericContext } from './genericContext'
+
+interface Item {
+  tokenId: string
+  quantity: string
+  decimals?: number
+  price: string
+}
+
+export interface TransactionStatusSettings {
+  collectionAddress?: string
+  currencyAddress?: string
+  chainId: number
+  items?: Item[]
+  blockConfirmations?: number
+  onSuccess?: (txHash: string) => void
+  onError?: (error: Error) => void
+  onClose?: () => void
+  txHash: string
+}
+
+type TransactionStatusContext = {
+  openTransactionStatusModal: (settings: TransactionStatusSettings) => void
+  closeTransactionStatusModal: () => void
+  transactionStatusSettings?: TransactionStatusSettings
+}
+
+export const [useTransactionStatusContext, TransactionStatusModalContextProvider] =
+  createGenericContext<TransactionStatusContext>()

package/src/contexts/TransferFundsModal.ts

@@ -0,0 +1,16 @@
+import { Hex } from 'viem'
+
+import { createGenericContext } from './genericContext'
+
+export interface TransferFundsSettings {
+  walletAddress: string | Hex
+  onClose?: () => void
+}
+
+type TransferFundsModalContext = {
+  openTransferFundsModal: (settings: TransferFundsSettings) => void
+  closeTransferFundsModal: () => void
+  transferFundsSettings?: TransferFundsSettings
+}
+
+export const [useTransferFundsModalContext, TransferFundsContextProvider] = createGenericContext<TransferFundsModalContext>()

package/src/contexts/genericContext.ts

@@ -0,0 +1,19 @@
+import { useContext, createContext } from 'react'
+
+// https://medium.com/@rivoltafilippo/typing-react-context-to-avoid-an-undefined-default-value-2c7c5a7d5947
+
+export const createGenericContext = <T>() => {
+  // Create a context with a generic parameter or undefined
+  const genericContext = createContext<T | undefined>(undefined)
+
+  // Check if the value provided to the context is defined or throw an error
+  const useGenericContext = () => {
+    const contextIsDefined = useContext(genericContext)
+    if (!contextIsDefined) {
+      throw new Error('useGenericContext must be used within a Provider')
+    }
+    return contextIsDefined
+  }
+
+  return [useGenericContext, genericContext.Provider] as const
+}

package/src/contexts/index.ts

@@ -0,0 +1,7 @@
+export * from './AddFundsModal'
+export * from './CheckoutModal'
+export * from './Navigation'
+export * from './SelectPaymentModal'
+export * from './TransferFundsModal'
+export * from './TransactionStatusModal'
+export * from './SwapModal'

package/src/hooks/index.ts

@@ -0,0 +1,13 @@
+export * from './useAddFundsModal'
+export * from './useCheckoutModal'
+export * from './useNavigation'
+export * from './useModalTheme'
+export * from './useCheckoutWhitelistStatus'
+export * from './useSardineClientToken'
+export * from './useSelectPaymentModal'
+export * from './useTransferFundsModal'
+export * from './useTransactionStatusModal'
+export * from './useSwapModal'
+export * from './useCheckoutOptionsSalesContract'
+export * from './useERC1155SaleContractCheckout'
+export * from './useSkipOnCloseCallback'

package/src/hooks/useAddFundsModal.ts

@@ -0,0 +1,7 @@
+import { useAddFundsModalContext } from '../contexts/AddFundsModal'
+
+export const useAddFundsModal = () => {
+  const { triggerAddFunds, closeAddFunds, addFundsSettings } = useAddFundsModalContext()
+
+  return { triggerAddFunds, closeAddFunds, addFundsSettings }
+}

package/src/hooks/useCheckoutModal.ts

@@ -0,0 +1,7 @@
+import { useCheckoutModalContext } from '../contexts/CheckoutModal'
+
+export const useCheckoutModal = () => {
+  const { triggerCheckout, closeCheckout, settings } = useCheckoutModalContext()
+
+  return { triggerCheckout, closeCheckout, settings }
+}

package/src/hooks/useCheckoutOptionsSalesContract.ts

@@ -0,0 +1,28 @@
+import { CheckoutOptionsSalesContractArgs } from '@0xsequence/marketplace'
+import { useQuery } from '@tanstack/react-query'
+
+import { useMarketplaceClient } from './useMarketplaceClient'
+
+export interface UseGenerateBuyTransactionOptions {
+  disabled?: boolean
+}
+
+export const useCheckoutOptionsSalesContract = (
+  chain: number | string,
+  args: CheckoutOptionsSalesContractArgs,
+  options?: UseGenerateBuyTransactionOptions
+) => {
+  const marketplaceClient = useMarketplaceClient({ chain })
+
+  return useQuery({
+    queryKey: ['useCheckoutOptionsSalesContract', args],
+    queryFn: async () => {
+      const res = await marketplaceClient.checkoutOptionsSalesContract(args)
+
+      return res
+    },
+    retry: false,
+    staleTime: 360 * 1000,
+    enabled: !options?.disabled && !!args.wallet
+  })
+}

package/src/hooks/useCheckoutWhitelistStatus.ts

@@ -0,0 +1,20 @@
+import { useProjectAccessKey } from '@0xsequence/connect'
+import { useQuery } from '@tanstack/react-query'
+
+import { checkSardineWhitelistStatus, CheckSardineWhitelistStatusArgs } from '../utils'
+
+export const useCheckoutWhitelistStatus = (args: CheckSardineWhitelistStatusArgs, disabled?: boolean) => {
+  const projectAccessKey = useProjectAccessKey()
+
+  return useQuery({
+    queryKey: ['useCheckoutWhitelistStatus', args],
+    queryFn: async () => {
+      const res = await checkSardineWhitelistStatus(args, projectAccessKey)
+
+      return res
+    },
+    retry: false,
+    staleTime: 1800 * 1000,
+    enabled: !disabled
+  })
+}

package/src/hooks/useERC1155SaleContractCheckout.ts

@@ -0,0 +1,260 @@
+import { CheckoutOptionsSalesContractArgs, TransactionSwapProvider } from '@0xsequence/marketplace'
+import { findSupportedNetwork } from '@0xsequence/network'
+import { Abi, Hex, encodeFunctionData, toHex, zeroAddress } from 'viem'
+import { useReadContract, useReadContracts } from 'wagmi'
+
+import { ERC_1155_SALE_CONTRACT } from '../constants/abi'
+import { SelectPaymentSettings } from '../contexts/SelectPaymentModal'
+
+import { useCheckoutOptionsSalesContract } from './useCheckoutOptionsSalesContract'
+import { useSelectPaymentModal } from './useSelectPaymentModal'
+
+interface UseERC1155SaleContractCheckoutReturn {
+  openCheckoutModal: () => void
+  closeCheckoutModal: () => void
+  selectPaymentSettings?: SelectPaymentSettings
+  isLoading: boolean
+  isError: boolean
+}
+
+type SaleContractSettings = Omit<
+  SelectPaymentSettings,
+  'txData' | 'collectibles' | 'price' | 'currencyAddress' | 'recipientAddress' | 'targetContractAddress'
+>
+
+export const getERC1155SaleContractConfig = ({
+  chain,
+  price,
+  currencyAddress = zeroAddress,
+  recipientAddress,
+  collectibles,
+  collectionAddress,
+  ...restProps
+}: Omit<SelectPaymentSettings, 'txData'>): SelectPaymentSettings => {
+  const purchaseTransactionData = encodeFunctionData({
+    abi: ERC_1155_SALE_CONTRACT,
+    functionName: 'mint',
+    // [to, tokenIds, amounts, data, expectedPaymentToken, maxTotal, proof]
+    args: [
+      recipientAddress,
+      collectibles.map(c => BigInt(c.tokenId)),
+      collectibles.map(c => BigInt(c.quantity)),
+      toHex(0),
+      currencyAddress,
+      price,
+      [toHex(0, { size: 32 })]
+    ]
+  })
+
+  return {
+    chain,
+    price,
+    currencyAddress,
+    recipientAddress,
+    collectibles,
+    collectionAddress,
+    txData: purchaseTransactionData,
+    ...restProps
+  }
+}
+
+export const useERC1155SaleContractCheckout = ({
+  chain,
+  contractAddress,
+  wallet,
+  collectionAddress,
+  items,
+  ...restArgs
+}: CheckoutOptionsSalesContractArgs & SaleContractSettings): UseERC1155SaleContractCheckoutReturn => {
+  const { openSelectPaymentModal, closeSelectPaymentModal, selectPaymentSettings } = useSelectPaymentModal()
+  const {
+    data: checkoutOptions,
+    isLoading: isLoadingCheckoutOptions,
+    isError: isErrorCheckoutOptions
+  } = useCheckoutOptionsSalesContract(chain, {
+    contractAddress,
+    wallet,
+    collectionAddress,
+    items
+  })
+  const network = findSupportedNetwork(chain)
+  const chainId = network?.chainId || 137
+
+  const {
+    data: saleConfigData,
+    isLoading: isLoadingSaleConfig,
+    isError: isErrorSaleConfig
+  } = useSaleContractConfig({ chainId, contractAddress, tokenIds: items.map(i => i.tokenId) })
+
+  const isLoading = isLoadingCheckoutOptions || isLoadingSaleConfig
+  const error = isErrorCheckoutOptions || isErrorSaleConfig
+
+  const openCheckoutModal = () => {
+    if (isLoading || error) {
+      console.error('Error loading checkout options or sale config', { isLoading, error })
+      return
+    }
+
+    openSelectPaymentModal(
+      getERC1155SaleContractConfig({
+        collectibles: items.map(item => ({
+          tokenId: item.tokenId,
+          quantity: item.quantity
+        })),
+        chain: chainId,
+        price: items
+          .reduce((acc, item) => {
+            const price = BigInt(saleConfigData?.saleConfigs.find(sale => sale.tokenId === item.tokenId)?.price || 0)
+
+            return acc + BigInt(item.quantity) * price
+          }, BigInt(0))
+          .toString(),
+        currencyAddress: saleConfigData?.currencyAddress || '',
+        recipientAddress: wallet,
+        collectionAddress,
+        targetContractAddress: contractAddress,
+        enableMainCurrencyPayment: true,
+        enableSwapPayments: checkoutOptions?.options?.swap?.includes(TransactionSwapProvider.zerox) || false,
+        creditCardProviders: checkoutOptions?.options.nftCheckout || [],
+        ...restArgs
+      })
+    )
+  }
+
+  return {
+    openCheckoutModal,
+    closeCheckoutModal: closeSelectPaymentModal,
+    selectPaymentSettings,
+    isLoading,
+    isError: error
+  }
+}
+
+interface UseSaleContractConfigArgs {
+  chainId: number
+  contractAddress: string
+  tokenIds: string[]
+}
+
+interface SaleConfig {
+  tokenId: string
+  price: string
+}
+
+interface UseSaleContractConfigData {
+  currencyAddress: string
+  saleConfigs: SaleConfig[]
+}
+
+interface UseSaleContractConfigReturn {
+  data?: UseSaleContractConfigData
+  isLoading: boolean
+  isError: boolean
+}
+
+export const useSaleContractConfig = ({
+  chainId,
+  contractAddress,
+  tokenIds
+}: UseSaleContractConfigArgs): UseSaleContractConfigReturn => {
+  const {
+    data: paymentTokenERC1155,
+    isLoading: isLoadingPaymentTokenERC1155,
+    isError: isErrorPaymentTokenERC1155
+  } = useReadContract({
+    chainId,
+    abi: ERC_1155_SALE_CONTRACT,
+    address: contractAddress as Hex,
+    functionName: 'paymentToken'
+  })
+
+  interface SaleDetailsERC1155 {
+    cost: bigint
+    startTime: bigint
+    endTime: bigint
+    supplyCap: bigint
+    merkleRoot: string
+  }
+
+  const {
+    data: globalSaleDetailsERC1155,
+    isLoading: isLoadingGlobalSaleDetailsERC1155,
+    isError: isErrorGlobalSaleDetailsERC1155
+  } = useReadContract({
+    chainId,
+    abi: ERC_1155_SALE_CONTRACT,
+    address: contractAddress as Hex,
+    functionName: 'globalSaleDetails'
+  })
+
+  const baseTokenSaleContract = {
+    chainId,
+    abi: ERC_1155_SALE_CONTRACT as Abi,
+    address: contractAddress as Hex,
+    functionName: 'tokenSaleDetails'
+  }
+
+  const tokenSaleContracts = tokenIds.map(tokenId => ({
+    ...baseTokenSaleContract,
+    args: [BigInt(tokenId)]
+  }))
+
+  const {
+    data: tokenSaleDetailsERC1155,
+    isLoading: isLoadingTokenSaleDetailsERC1155,
+    isError: isErrorTokenSaleDetailsERC1155
+  } = useReadContracts({
+    contracts: tokenSaleContracts
+  })
+
+  const isLoadingERC1155 = isLoadingPaymentTokenERC1155 || isLoadingGlobalSaleDetailsERC1155 || isLoadingTokenSaleDetailsERC1155
+  const isErrorERC1155 = isErrorPaymentTokenERC1155 || isErrorGlobalSaleDetailsERC1155 || isErrorTokenSaleDetailsERC1155
+
+  if (isLoadingERC1155 || isErrorERC1155) {
+    return {
+      data: undefined,
+      isLoading: isLoadingERC1155,
+      isError: isErrorERC1155
+    }
+  }
+
+  const getSaleConfigs = (): SaleConfig[] => {
+    let saleInfos: SaleConfig[] = []
+
+    if (isLoadingERC1155 || isErrorERC1155) {
+      return saleInfos
+    }
+
+    // In the sale contract, the global sale has priority over the token sale
+    // So we need to check if the global sale is set, and if it is, use that
+    // Otherwise, we use the token sale
+    const { cost: globalCost, startTime, endTime } = globalSaleDetailsERC1155 as SaleDetailsERC1155
+    const isGlobalSaleInvalid =
+      endTime === BigInt(0) ||
+      BigInt(Math.floor(Date.now() / 1000)) <= startTime ||
+      BigInt(Math.floor(Date.now() / 1000)) >= endTime
+    saleInfos = tokenIds.map((tokenId, index) => {
+      const tokenPrice = (tokenSaleDetailsERC1155?.[index].result as SaleDetailsERC1155)['cost'] || BigInt(0)
+      return {
+        tokenId,
+        price: (!isGlobalSaleInvalid ? globalCost : tokenPrice).toString()
+      }
+    })
+
+    return saleInfos
+  }
+
+  return {
+    data: {
+      currencyAddress: paymentTokenERC1155 as string,
+      saleConfigs: getSaleConfigs()
+    },
+    isLoading: isLoadingERC1155,
+    isError: isErrorERC1155
+  }
+}
+
+/**
+ * @deprecated use useERC1155SaleContractPaymentModal instead
+ */
+export const useERC1155SaleContractPaymentModal = useERC1155SaleContractCheckout

package/src/hooks/useMarketplaceClient.ts

@@ -0,0 +1,49 @@
+import { DEBUG, useProjectAccessKey } from '@0xsequence/connect'
+import { MarketplaceIndexer } from '@0xsequence/marketplace'
+import { networks, stringTemplate } from '@0xsequence/network'
+import { useMemo } from 'react'
+
+export interface UseMarketplaceClientArgs {
+  chain: ChainNameOrId
+}
+
+export const useMarketplaceClient = ({ chain }: UseMarketplaceClientArgs) => {
+  const projectAccessKey = useProjectAccessKey()
+
+  const marketplaceClient = useMemo(() => {
+    const env = DEBUG ? 'development' : 'production'
+    const clientUrl = marketplaceApiURL(chain, env)
+    return new MarketplaceIndexer(clientUrl, projectAccessKey)
+  }, [projectAccessKey])
+
+  return marketplaceClient
+}
+
+type ChainNameOrId = string | number
+
+const getNetwork = (nameOrId: ChainNameOrId) => {
+  for (const network of Object.values(networks)) {
+    if (network.name === String(nameOrId).toLowerCase() || network.chainId === Number(nameOrId)) {
+      return network
+    }
+  }
+  throw new Error(`Unsopported chain; ${nameOrId}`)
+}
+
+export type Env = 'development' | 'production'
+
+const getPrefix = (env: Env) => {
+  switch (env) {
+    case 'development':
+      return 'dev-'
+    case 'production':
+      return ''
+  }
+}
+
+const marketplaceApiURL = (chain: ChainNameOrId, env: Env = 'production') => {
+  const prefix = getPrefix(env)
+  const network = getNetwork(chain).name
+  const apiBaseUrl = 'https://${prefix}marketplace-api.sequence.app/${network}'
+  return stringTemplate(apiBaseUrl, { network: network, prefix })
+}

package/src/hooks/useModalTheme.ts

@@ -0,0 +1,7 @@
+import { useCheckoutModalContext } from '../contexts/CheckoutModal'
+
+export const useModalTheme = () => {
+  const { theme } = useCheckoutModalContext()
+
+  return theme
+}

package/src/hooks/useNavigation.ts

@@ -0,0 +1,33 @@
+import { useNavigationContext, Navigation, History } from '../contexts/Navigation'
+
+interface UseNavigation {
+  setNavigation: (navigation: Navigation) => void
+  setHistory: (history: History) => void
+  history: History
+  goBack: () => void
+  navigation: Navigation
+}
+
+export const useNavigation = (): UseNavigation => {
+  const { setHistory, history, defaultLocation } = useNavigationContext()
+
+  const setNavigation = (navigation: Navigation) => {
+    // Scroll to top of page when navigating to a new page
+    const childElement = document.getElementById('sequence-kit-wallet-content')
+    const parentElement = childElement?.parentElement
+    parentElement?.scrollTo(0, 0)
+
+    const newHistory = [...history, navigation]
+    setHistory(newHistory)
+  }
+
+  const goBack = () => {
+    const newHistory = [...history]
+    newHistory.pop()
+    setHistory(newHistory)
+  }
+
+  const navigation = history.length > 0 ? history[history.length - 1] : defaultLocation
+
+  return { setNavigation, history, setHistory, goBack, navigation }
+}

package/src/hooks/useSardineClientToken.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query'
+
+import { FetchSardineClientTokenArgs, fetchSardineClientToken } from '../api/data'
+
+export const useSardineClientToken = (args: FetchSardineClientTokenArgs, disabled?: boolean) => {
+  return useQuery({
+    queryKey: ['useSardineClientToken', args],
+    queryFn: async () => {
+      const res = await fetchSardineClientToken(args)
+
+      return res
+    },
+    retry: false,
+    staleTime: 0,
+    enabled: !disabled,
+    refetchOnWindowFocus: false
+  })
+}

package/src/hooks/useSelectPaymentModal.ts

@@ -0,0 +1,7 @@
+import { useSelectPaymentContext } from '../contexts/SelectPaymentModal'
+
+export const useSelectPaymentModal = () => {
+  const { openSelectPaymentModal, closeSelectPaymentModal, selectPaymentSettings } = useSelectPaymentContext()
+
+  return { openSelectPaymentModal, closeSelectPaymentModal, selectPaymentSettings }
+}

package/src/hooks/useSkipOnCloseCallback.ts

@@ -0,0 +1,25 @@
+import { useEffect, useRef } from 'react'
+
+interface UseSkipOnCloseCallbackReturn {
+  skipOnCloseCallback: () => void
+}
+
+export const useSkipOnCloseCallback = (onClose: () => void): UseSkipOnCloseCallbackReturn => {
+  const skipOnCloseCallbackFlag = useRef(false)
+
+  const skipOnCloseCallback = () => {
+    skipOnCloseCallbackFlag.current = true
+  }
+
+  useEffect(() => {
+    return () => {
+      if (!skipOnCloseCallbackFlag.current) {
+        onClose()
+      }
+    }
+  }, [])
+
+  return {
+    skipOnCloseCallback
+  }
+}

package/src/hooks/useSwapModal.ts

@@ -0,0 +1,7 @@
+import { useSwapModalContext } from '../contexts/SwapModal'
+
+export const useSwapModal = () => {
+  const { openSwapModal, closeSwapModal, swapModalSettings } = useSwapModalContext()
+
+  return { openSwapModal, closeSwapModal, swapModalSettings }
+}

package/src/hooks/useTransactionStatusModal.ts

@@ -0,0 +1,7 @@
+import { useTransactionStatusContext } from '../contexts/TransactionStatusModal'
+
+export const useTransactionStatusModal = () => {
+  const { openTransactionStatusModal, closeTransactionStatusModal, transactionStatusSettings } = useTransactionStatusContext()
+
+  return { openTransactionStatusModal, closeTransactionStatusModal, transactionStatusSettings }
+}

package/src/hooks/useTransferFundsModal.ts

@@ -0,0 +1,7 @@
+import { useTransferFundsModalContext } from '../contexts/TransferFundsModal'
+
+export const useTransferFundsModal = () => {
+  const { openTransferFundsModal, closeTransferFundsModal, transferFundsSettings } = useTransferFundsModalContext()
+
+  return { openTransferFundsModal, closeTransferFundsModal, transferFundsSettings }
+}