@0xsequence/checkout 0.0.0-20250314205219

package/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx

@@ -0,0 +1,363 @@
+'use client'
+
+import { getModalPositionCss, ShadowRoot, useTheme } from '@0xsequence/connect'
+import { Modal } from '@0xsequence/design-system'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { AnimatePresence } from 'motion/react'
+import React, { useState, useEffect } from 'react'
+
+import {
+  History,
+  Navigation,
+  NavigationContextProvider,
+  CheckoutModalContextProvider,
+  CheckoutSettings,
+  AddFundsContextProvider,
+  AddFundsSettings,
+  SelectPaymentContextProvider,
+  SelectPaymentSettings,
+  TransferFundsContextProvider,
+  TransferFundsSettings,
+  TransactionStatusSettings,
+  TransactionStatusModalContextProvider,
+  SwapModalSettings,
+  SwapModalContextProvider
+} from '../../contexts'
+import {
+  PendingCreditCardTransaction,
+  TransactionError,
+  TransactionSuccess,
+  CheckoutSelection,
+  AddFundsContent,
+  PaymentSelection,
+  TransferToWallet,
+  TransactionStatus,
+  Swap
+} from '../../views'
+import { NavigationHeader } from '../NavigationHeader'
+
+export type SequenceCheckoutProvider = {
+  children: React.ReactNode
+}
+
+export const SequenceCheckoutProvider = (props: SequenceCheckoutProvider) => {
+  const queryClient = new QueryClient()
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      <SequenceCheckoutContent {...props} />
+    </QueryClientProvider>
+  )
+}
+
+export const SequenceCheckoutContent = ({ children }: SequenceCheckoutProvider) => {
+  const { theme, position } = useTheme()
+  const [openCheckoutModal, setOpenCheckoutModal] = useState<boolean>(false)
+  const [openAddFundsModal, setOpenAddFundsModal] = useState<boolean>(false)
+  const [openTransferFundsModal, setOpenTransferFundsModal] = useState<boolean>(false)
+  const [openPaymentSelectionModal, setOpenPaymentSelectionModal] = useState<boolean>(false)
+  const [openTransactionStatusModal, setOpenTransactionStatusModal] = useState<boolean>(false)
+  const [isOpenSwapModal, setIsOpenSwapModal] = useState<boolean>(false)
+  const [settings, setSettings] = useState<CheckoutSettings>()
+  const [selectPaymentSettings, setSelectPaymentSettings] = useState<SelectPaymentSettings>()
+  const [addFundsSettings, setAddFundsSettings] = useState<AddFundsSettings>()
+  const [transferFundsSettings, setTransferFundsSettings] = useState<TransferFundsSettings>()
+  const [transactionStatusSettings, setTransactionStatusSettings] = useState<TransactionStatusSettings>()
+  const [swapModalSettings, setSwapModalSettings] = useState<SwapModalSettings>()
+  const [history, setHistory] = useState<History>([])
+
+  const getDefaultLocation = (): Navigation => {
+    // skip the order summary for credit card checkout if no items provided
+    const orderSummaryItems = settings?.orderSummaryItems || []
+    const creditCardSettings = settings?.creditCardCheckout
+    if (orderSummaryItems.length === 0 && creditCardSettings) {
+      return {
+        location: 'transaction-pending',
+        params: {
+          creditCardCheckout: creditCardSettings
+        }
+      }
+    } else {
+      return {
+        location: 'select-method-checkout'
+      }
+    }
+  }
+
+  const navigation = history.length > 0 ? history[history.length - 1] : getDefaultLocation()
+
+  const triggerCheckout = (settings: CheckoutSettings) => {
+    setSettings(settings)
+    setOpenCheckoutModal(true)
+  }
+
+  const closeCheckout = () => {
+    setOpenCheckoutModal(false)
+  }
+
+  const triggerAddFunds = (settings: AddFundsSettings) => {
+    setAddFundsSettings(settings)
+    setOpenAddFundsModal(true)
+  }
+
+  const closeAddFunds = () => {
+    setOpenAddFundsModal(false)
+    if (addFundsSettings?.onClose) {
+      addFundsSettings.onClose()
+    }
+  }
+
+  const openTransferFunds = (settings: TransferFundsSettings) => {
+    setTransferFundsSettings(settings)
+    setOpenTransferFundsModal(true)
+  }
+
+  const closeTransferFunds = () => {
+    if (openTransferFundsModal) {
+      setOpenTransferFundsModal(false)
+      if (transferFundsSettings?.onClose) {
+        transferFundsSettings.onClose()
+      }
+    }
+  }
+
+  const openSelectPaymentModal = (settings: SelectPaymentSettings) => {
+    setSelectPaymentSettings(settings)
+    setOpenPaymentSelectionModal(true)
+  }
+
+  const closeSelectPaymentModal = () => {
+    setOpenPaymentSelectionModal(false)
+  }
+
+  const triggerTransactionStatusModal = (settings: TransactionStatusSettings) => {
+    setTransactionStatusSettings(settings)
+    setOpenTransactionStatusModal(true)
+  }
+
+  const closeTransactionStatusModal = () => {
+    setOpenTransactionStatusModal(false)
+  }
+  const openSwapModal = (settings: SwapModalSettings) => {
+    setSwapModalSettings(settings)
+    setIsOpenSwapModal(true)
+  }
+
+  const closeSwapModal = () => {
+    setIsOpenSwapModal(false)
+  }
+
+  const getCheckoutContent = () => {
+    const { location } = navigation
+    switch (location) {
+      case 'select-method-checkout':
+        return <CheckoutSelection />
+      case 'transaction-pending':
+        return <PendingCreditCardTransaction />
+      case 'transaction-success':
+        return <TransactionSuccess />
+      case 'transaction-error':
+        return <TransactionError />
+      case 'transaction-form':
+      default:
+        return <CheckoutSelection />
+    }
+  }
+
+  const getCheckoutHeader = () => {
+    const { location } = navigation
+    switch (location) {
+      case 'select-method-checkout':
+        return <NavigationHeader primaryText="Checkout" />
+      case 'transaction-success':
+      case 'transaction-error':
+      case 'transaction-pending':
+        return <NavigationHeader disableBack primaryText="Pay with credit or debit card" />
+      case 'transaction-form':
+      default:
+        return <NavigationHeader primaryText="Pay with credit or debit card" />
+    }
+  }
+
+  const getAddFundsHeader = () => {
+    const { location } = navigation
+    switch (location) {
+      default:
+        return <NavigationHeader primaryText="Add funds with credit card or debit card" />
+    }
+  }
+
+  const getAddFundsContent = () => {
+    const { location } = navigation
+    switch (location) {
+      default:
+        return <AddFundsContent />
+    }
+  }
+
+  useEffect(() => {
+    if (openCheckoutModal || openAddFundsModal || openPaymentSelectionModal) {
+      setHistory([])
+    }
+  }, [openCheckoutModal, openAddFundsModal, openPaymentSelectionModal])
+
+  return (
+    <SwapModalContextProvider
+      value={{
+        openSwapModal,
+        closeSwapModal,
+        swapModalSettings
+      }}
+    >
+      <TransactionStatusModalContextProvider
+        value={{
+          openTransactionStatusModal: triggerTransactionStatusModal,
+          closeTransactionStatusModal,
+          transactionStatusSettings
+        }}
+      >
+        <SelectPaymentContextProvider
+          value={{
+            openSelectPaymentModal,
+            closeSelectPaymentModal,
+            selectPaymentSettings
+          }}
+        >
+          <AddFundsContextProvider
+            value={{
+              triggerAddFunds,
+              closeAddFunds,
+              addFundsSettings
+            }}
+          >
+            <CheckoutModalContextProvider
+              value={{
+                triggerCheckout,
+                closeCheckout,
+                settings,
+                theme
+              }}
+            >
+              <TransferFundsContextProvider
+                value={{
+                  openTransferFundsModal: openTransferFunds,
+                  closeTransferFundsModal: closeTransferFunds,
+                  transferFundsSettings
+                }}
+              >
+                <NavigationContextProvider value={{ history, setHistory, defaultLocation: getDefaultLocation() }}>
+                  <ShadowRoot theme={theme}>
+                    <AnimatePresence>
+                      {openCheckoutModal && (
+                        <Modal
+                          contentProps={{
+                            style: {
+                              maxWidth: '400px',
+                              height: 'auto',
+                              ...getModalPositionCss(position)
+                            }
+                          }}
+                          scroll={false}
+                          onClose={() => setOpenCheckoutModal(false)}
+                        >
+                          <div id="sequence-kit-checkout-content">
+                            {getCheckoutHeader()}
+                            {getCheckoutContent()}
+                          </div>
+                        </Modal>
+                      )}
+                      {openAddFundsModal && (
+                        <Modal
+                          contentProps={{
+                            style: {
+                              maxWidth: '400px',
+                              height: 'auto',
+                              ...getModalPositionCss(position)
+                            }
+                          }}
+                          scroll={false}
+                          onClose={closeAddFunds}
+                        >
+                          <div id="sequence-kit-add-funds-content">
+                            {getAddFundsHeader()}
+                            {getAddFundsContent()}
+                          </div>
+                        </Modal>
+                      )}
+                      {openPaymentSelectionModal && (
+                        <Modal
+                          contentProps={{
+                            style: {
+                              maxWidth: '420px',
+                              ...getModalPositionCss(position),
+                              scrollbarColor: 'gray black',
+                              scrollbarWidth: 'thin'
+                            }
+                          }}
+                          onClose={() => setOpenPaymentSelectionModal(false)}
+                        >
+                          <div id="sequence-kit-payment-selection-content">
+                            <PaymentSelection />
+                          </div>
+                        </Modal>
+                      )}
+                      {openTransferFundsModal && (
+                        <Modal
+                          contentProps={{
+                            style: {
+                              height: 'auto',
+                              ...getModalPositionCss(position)
+                            }
+                          }}
+                          onClose={closeTransferFunds}
+                        >
+                          <div id="sequence-kit-transfer-funds-modal">
+                            <NavigationHeader primaryText="Receive" />
+                            <TransferToWallet />
+                          </div>
+                        </Modal>
+                      )}
+                      {openTransactionStatusModal && (
+                        <Modal
+                          contentProps={{
+                            style: {
+                              height: 'auto',
+                              ...getModalPositionCss(position)
+                            }
+                          }}
+                          onClose={closeTransactionStatusModal}
+                        >
+                          <div id="sequence-kit-transaction-status-modal">
+                            <TransactionStatus />
+                          </div>
+                        </Modal>
+                      )}
+                      {isOpenSwapModal && (
+                        <Modal
+                          contentProps={{
+                            style: {
+                              maxWidth: '450px',
+                              height: 'auto',
+                              ...getModalPositionCss(position)
+                            }
+                          }}
+                          onClose={closeSwapModal}
+                        >
+                          <div id="sequence-kit-swap-modal">
+                            <NavigationHeader primaryText={swapModalSettings?.title || 'Swap'} />
+                            <Swap />
+                          </div>
+                        </Modal>
+                      )}
+                    </AnimatePresence>
+                  </ShadowRoot>
+                  {children}
+                </NavigationContextProvider>
+              </TransferFundsContextProvider>
+            </CheckoutModalContextProvider>
+          </AddFundsContextProvider>
+        </SelectPaymentContextProvider>
+      </TransactionStatusModalContextProvider>
+    </SwapModalContextProvider>
+  )
+}

package/src/components/SequenceCheckoutProvider/index.ts

@@ -0,0 +1 @@
+export * from './SequenceCheckoutProvider'

package/src/constants/abi.ts

@@ -0,0 +1,185 @@
+export const ERC_20_CONTRACT_ABI = [
+  {
+    type: 'function',
+    name: 'allowance',
+    inputs: [
+      { name: 'owner', type: 'address', internalType: 'address' },
+      { name: 'spender', type: 'address', internalType: 'address' }
+    ],
+    outputs: [{ name: '', type: 'uint256', internalType: 'uint256' }],
+    stateMutability: 'view'
+  },
+  {
+    type: 'function',
+    name: 'approve',
+    inputs: [
+      { name: 'spender', type: 'address', internalType: 'address' },
+      { name: 'amount', type: 'uint256', internalType: 'uint256' }
+    ],
+    outputs: [{ name: '', type: 'bool', internalType: 'bool' }],
+    stateMutability: 'nonpayable'
+  }
+]
+
+export const ERC_1155_SALE_CONTRACT = [
+  {
+    type: 'function',
+    name: 'globalSaleDetails',
+    inputs: [],
+    outputs: [
+      {
+        name: '',
+        type: 'tuple',
+        internalType: 'struct IERC1155SaleFunctions.SaleDetails',
+        components: [
+          {
+            name: 'cost',
+            type: 'uint256',
+            internalType: 'uint256'
+          },
+          {
+            name: 'supplyCap',
+            type: 'uint256',
+            internalType: 'uint256'
+          },
+          {
+            name: 'startTime',
+            type: 'uint64',
+            internalType: 'uint64'
+          },
+          {
+            name: 'endTime',
+            type: 'uint64',
+            internalType: 'uint64'
+          },
+          {
+            name: 'merkleRoot',
+            type: 'bytes32',
+            internalType: 'bytes32'
+          }
+        ]
+      }
+    ],
+    stateMutability: 'view'
+  },
+  {
+    type: 'function',
+    name: 'mint',
+    inputs: [
+      {
+        name: 'to',
+        type: 'address',
+        internalType: 'address'
+      },
+      {
+        name: 'tokenIds',
+        type: 'uint256[]',
+        internalType: 'uint256[]'
+      },
+      {
+        name: 'amounts',
+        type: 'uint256[]',
+        internalType: 'uint256[]'
+      },
+      {
+        name: 'data',
+        type: 'bytes',
+        internalType: 'bytes'
+      },
+      {
+        name: 'expectedPaymentToken',
+        type: 'address',
+        internalType: 'address'
+      },
+      {
+        name: 'maxTotal',
+        type: 'uint256',
+        internalType: 'uint256'
+      },
+      {
+        name: 'proof',
+        type: 'bytes32[]',
+        internalType: 'bytes32[]'
+      }
+    ],
+    outputs: [],
+    stateMutability: 'payable'
+  },
+  {
+    type: 'function',
+    name: 'paymentToken',
+    inputs: [],
+    outputs: [
+      {
+        name: '',
+        type: 'address',
+        internalType: 'address'
+      }
+    ],
+    stateMutability: 'view'
+  },
+  {
+    type: 'function',
+    name: 'renounceRole',
+    inputs: [
+      {
+        name: 'role',
+        type: 'bytes32',
+        internalType: 'bytes32'
+      },
+      {
+        name: 'account',
+        type: 'address',
+        internalType: 'address'
+      }
+    ],
+    outputs: [],
+    stateMutability: 'nonpayable'
+  },
+  {
+    type: 'function',
+    name: 'tokenSaleDetails',
+    inputs: [
+      {
+        name: 'tokenId',
+        type: 'uint256',
+        internalType: 'uint256'
+      }
+    ],
+    outputs: [
+      {
+        name: '',
+        type: 'tuple',
+        internalType: 'struct IERC1155SaleFunctions.SaleDetails',
+        components: [
+          {
+            name: 'cost',
+            type: 'uint256',
+            internalType: 'uint256'
+          },
+          {
+            name: 'supplyCap',
+            type: 'uint256',
+            internalType: 'uint256'
+          },
+          {
+            name: 'startTime',
+            type: 'uint64',
+            internalType: 'uint64'
+          },
+          {
+            name: 'endTime',
+            type: 'uint64',
+            internalType: 'uint64'
+          },
+          {
+            name: 'merkleRoot',
+            type: 'bytes32',
+            internalType: 'bytes32'
+          }
+        ]
+      }
+    ],
+    stateMutability: 'view'
+  }
+]

package/src/constants/index.ts

@@ -0,0 +1,4 @@
+export const HEADER_HEIGHT = '54px'
+export const CARD_HEIGHT = '130px'
+export const CARD_HEIGHT_MOBILE = '180px'
+export const NFT_CHECKOUT_SOURCE = 'sequence-kit/checkout/nft-checkout'

package/src/contexts/AddFundsModal.ts

@@ -0,0 +1,25 @@
+import { Hex } from 'viem'
+
+import { createGenericContext } from './genericContext'
+
+export interface AddFundsSettings {
+  walletAddress: string | Hex
+  fiatAmount?: string
+  fiatCurrency?: string
+  defaultFiatAmount?: string
+  defaultCryptoCurrency?: string
+  cryptoCurrencyList?: string
+  networks?: string
+  onClose?: () => void
+  onOrderCreated?: (data: any) => void
+  onOrderSuccessful?: (data: any) => void
+  onOrderFailed?: (data: any) => void
+}
+
+type AddFundsModalContext = {
+  triggerAddFunds: (settings: AddFundsSettings) => void
+  closeAddFunds: () => void
+  addFundsSettings?: AddFundsSettings
+}
+
+export const [useAddFundsModalContext, AddFundsContextProvider] = createGenericContext<AddFundsModalContext>()

package/src/contexts/CheckoutModal.ts

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

@@ -0,0 +1,56 @@
+'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>()