@0xsequence/checkout 5.0.0-ecosystem-beta → 5.0.0

package/src/contexts/CheckoutModal.ts

@@ -1,65 +0,0 @@
-'use client'
-
-import { Theme } from '@0xsequence/design-system'
-
-import { createGenericContext } from './genericContext'
-import { SupplementaryAnalyticsInfo } from './SelectPaymentModal'
-
-interface CoinQuantity {
-  contractAddress: string
-  amountRequiredRaw: string
-}
-
-interface OrderSummaryItem {
-  chainId: number
-  contractAddress: string
-  quantityRaw: string
-  tokenId: string
-}
-
-export interface TransakConfig {
-  apiKey: string
-  contractId: string
-  callDataOverride?: string
-}
-
-export interface CreditCardCheckout {
-  chainId: number
-  contractAddress: string
-  recipientAddress: string
-  currencyQuantity: string
-  currencySymbol: string
-  currencyAddress: string
-  currencyDecimals: string
-  nftId: string
-  nftAddress: string
-  nftQuantity: string
-  nftDecimals?: string
-  calldata: string
-  provider?: 'sardine' | 'transak'
-  transakConfig?: TransakConfig
-  onSuccess?: (transactionHash: string, settings: CreditCardCheckout) => void
-  onError?: (error: Error, settings: CreditCardCheckout) => void
-  onClose?: () => void
-  approvedSpenderAddress?: string
-  supplementaryAnalyticsInfo?: SupplementaryAnalyticsInfo
-}
-
-export interface CheckoutSettings {
-  creditCardCheckout?: CreditCardCheckout
-  cryptoCheckout?: {
-    chainId: number
-    triggerTransaction: () => void
-    coinQuantity: CoinQuantity
-  }
-  orderSummaryItems?: OrderSummaryItem[]
-}
-
-type CheckoutModalContext = {
-  triggerCheckout: (settings: CheckoutSettings) => void
-  closeCheckout: () => void
-  settings?: CheckoutSettings
-  theme: Theme
-}
-
-export const [useCheckoutModalContext, CheckoutModalContextProvider] = createGenericContext<CheckoutModalContext>()

package/src/contexts/Navigation.ts

@@ -1,56 +0,0 @@
-'use client'
-import { CreditCardCheckout } from '../contexts'
-
-import { createGenericContext } from './genericContext'
-
-export interface SelectCheckoutNavigation {
-  location: 'select-method-checkout'
-}
-
-export interface TransactionFormNavigation {
-  location: 'transaction-form'
-}
-
-export interface TransactionSuccessParams {
-  transactionHash: string
-}
-
-export interface TransactionSuccessNavigation {
-  location: 'transaction-success'
-  params: TransactionSuccessParams
-}
-
-export interface TransactionErrorParams {
-  error: Error
-}
-
-export interface TransactionErrorNavigation {
-  location: 'transaction-error'
-  params: TransactionErrorParams
-}
-
-export interface TransactionPendingParams {
-  creditCardCheckout: CreditCardCheckout
-}
-
-export interface TransactionPendingNavigation {
-  location: 'transaction-pending'
-  params: TransactionPendingParams
-}
-
-export type Navigation =
-  | TransactionFormNavigation
-  | TransactionSuccessNavigation
-  | TransactionErrorNavigation
-  | TransactionPendingNavigation
-  | SelectCheckoutNavigation
-
-export type History = Navigation[]
-
-type NavigationContext = {
-  setHistory: (history: History) => void
-  history: History
-  defaultLocation: Navigation
-}
-
-export const [useNavigationContext, NavigationContextProvider] = createGenericContext<NavigationContext>()

package/src/contexts/SelectPaymentModal.ts

@@ -1,50 +0,0 @@
-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

@@ -1,31 +0,0 @@
-'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

@@ -1,29 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

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

package/src/hooks/useCheckoutModal.ts

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

package/src/hooks/useCheckoutOptionsSalesContract.ts

@@ -1,28 +0,0 @@
-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

@@ -1,20 +0,0 @@
-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

@@ -1,260 +0,0 @@
-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

@@ -1,49 +0,0 @@
-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

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