From 70213b997cfe8e322a25b708e0a8700a53f94555 Mon Sep 17 00:00:00 2001 From: samuelea Date: Fri, 5 Dec 2025 18:57:01 -0500 Subject: [PATCH 1/8] checkout cleanup(wip) --- examples/react/src/components/Connected.tsx | 11 +- .../SequenceCheckoutProvider.tsx | 341 ++------ .../checkout/src/contexts/AddFundsModal.ts | 33 - .../src/contexts/SelectPaymentModal.ts | 62 -- packages/checkout/src/contexts/SwapModal.ts | 36 - .../src/contexts/TransferFundsModal.ts | 1 + packages/checkout/src/hooks/index.ts | 6 +- .../checkout/src/hooks/useAddFundsModal.ts | 59 -- .../hooks/useCheckoutOptionsSalesContract.ts | 28 - .../src/hooks/useCheckoutUI/index.tsx | 157 ---- .../useCheckoutUI/useCreditCardPayment.tsx | 250 ------ .../hooks/useCheckoutUI/useCryptoPayment.tsx | 418 --------- .../hooks/useCheckoutUI/useOrderSummary.tsx | 125 --- .../hooks/useERC1155SaleContractCheckout.ts | 384 --------- .../src/hooks/useTransferFundsModal.ts | 1 + packages/checkout/src/index.ts | 12 +- packages/checkout/src/views/AddFunds.tsx | 139 --- .../OrderSummary/Price.tsx | 66 -- .../OrderSummary/index.tsx | 126 --- .../PaymentProviderOption.tsx | 38 - .../PayWithCreditCard/index.tsx | 136 --- .../PayWithCrypto/index.tsx | 811 ------------------ .../PayWithCrypto/useInitialBalanceCheck.tsx | 148 ---- .../Checkout/PaymentMethodSelect/index.tsx | 110 --- .../views/Checkout/TokenSelection/index.tsx | 220 ----- .../checkout/src/views/Checkout/index.tsx | 2 - .../component/OrderSummaryItem.tsx | 82 -- .../src/views/CheckoutSelection/index.tsx | 204 ----- .../PayWithCreditCard/index.tsx | 168 ---- packages/checkout/src/views/Swap/index.tsx | 404 --------- .../src/views/TransferToWallet/QRCode.tsx | 1 + .../src/views/TransferToWallet/index.tsx | 1 + packages/checkout/src/views/index.ts | 6 +- packages/connect/src/styles.ts | 49 +- 34 files changed, 94 insertions(+), 4541 deletions(-) delete mode 100644 packages/checkout/src/contexts/AddFundsModal.ts delete mode 100644 packages/checkout/src/contexts/SelectPaymentModal.ts delete mode 100644 packages/checkout/src/contexts/SwapModal.ts delete mode 100644 packages/checkout/src/hooks/useAddFundsModal.ts delete mode 100644 packages/checkout/src/hooks/useCheckoutOptionsSalesContract.ts delete mode 100644 packages/checkout/src/hooks/useCheckoutUI/index.tsx delete mode 100644 packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx delete mode 100644 packages/checkout/src/hooks/useCheckoutUI/useCryptoPayment.tsx delete mode 100644 packages/checkout/src/hooks/useCheckoutUI/useOrderSummary.tsx delete mode 100644 packages/checkout/src/hooks/useERC1155SaleContractCheckout.ts delete mode 100644 packages/checkout/src/views/AddFunds.tsx delete mode 100644 packages/checkout/src/views/Checkout/PaymentMethodSelect/OrderSummary/Price.tsx delete mode 100644 packages/checkout/src/views/Checkout/PaymentMethodSelect/OrderSummary/index.tsx delete mode 100644 packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/PaymentProviderOption.tsx delete mode 100644 packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCreditCard/index.tsx delete mode 100644 packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/index.tsx delete mode 100644 packages/checkout/src/views/Checkout/PaymentMethodSelect/PayWithCrypto/useInitialBalanceCheck.tsx delete mode 100644 packages/checkout/src/views/Checkout/PaymentMethodSelect/index.tsx delete mode 100644 packages/checkout/src/views/Checkout/TokenSelection/index.tsx delete mode 100644 packages/checkout/src/views/Checkout/index.tsx delete mode 100644 packages/checkout/src/views/CheckoutSelection/component/OrderSummaryItem.tsx delete mode 100644 packages/checkout/src/views/CheckoutSelection/index.tsx delete mode 100644 packages/checkout/src/views/PaymentSelection/PayWithCreditCard/index.tsx delete mode 100644 packages/checkout/src/views/Swap/index.tsx diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx index 136545dd7..2f32afcc6 100644 --- a/examples/react/src/components/Connected.tsx +++ b/examples/react/src/components/Connected.tsx @@ -1,13 +1,4 @@ -import { - TransactionOnRampProvider, - useAddFundsModal, - useCheckoutModal, - useERC1155SaleContractCheckout, - useSelectPaymentModal, - useSwapModal, - useTransactionStatusModal, - type SwapModalSettings -} from '@0xsequence/checkout' +import { useCheckoutModal, useSelectPaymentModal, useSwapModal, useTransactionStatusModal } from '@0xsequence/checkout' import { getModalPositionCss, signEthAuthProof, diff --git a/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx b/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx index fad8f80f8..42d8be97a 100644 --- a/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx +++ b/packages/checkout/src/components/SequenceCheckoutProvider/SequenceCheckoutProvider.tsx @@ -6,40 +6,22 @@ import { AnimatePresence } from 'motion/react' import { useEffect, useState, type ReactNode } from 'react' import { - AddFundsContextProvider, CheckoutModalContextProvider, EnvironmentContextProvider, NavigationCheckoutContextProvider, NavigationContextProvider, - SelectPaymentContextProvider, - SwapModalContextProvider, TransactionStatusModalContextProvider, TransferFundsContextProvider, - type AddFundsSettings, type CheckoutSettings, type EnvironmentOverrides, type History, type HistoryCheckout, type Navigation, type NavigationCheckout, - type SelectPaymentSettings, - type SwapModalSettings, type TransactionStatusSettings, type TransferFundsSettings } from '../../contexts/index.js' -import { - AddFundsContent, - CheckoutSelection, - PaymentSelectionContent, - PaymentSelectionHeader, - PendingCreditCardTransaction, - Swap, - TokenSelectionContent, - TransactionError, - TransactionStatus, - TransactionSuccess, - TransferToWallet -} from '../../views/index.js' +import { PendingCreditCardTransaction, TransactionError, TransactionStatus, TransactionSuccess, TransferToWallet } from '../../views/index.js' import { NavigationHeader } from '../NavigationHeader.js' import { ForteController } from './ForteController.js' @@ -64,17 +46,11 @@ const getDefaultLocationCheckout = (): NavigationCheckout => { export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutProviderProps) => { const { theme, position } = useTheme() const [openCheckoutModal, setOpenCheckoutModal] = useState(false) - const [openAddFundsModal, setOpenAddFundsModal] = useState(false) const [openTransferFundsModal, setOpenTransferFundsModal] = useState(false) - const [openPaymentSelectionModal, setOpenPaymentSelectionModal] = useState(false) const [openTransactionStatusModal, setOpenTransactionStatusModal] = useState(false) - const [isOpenSwapModal, setIsOpenSwapModal] = useState(false) const [settings, setSettings] = useState() - const [selectPaymentSettings, setSelectPaymentSettings] = useState() - const [addFundsSettings, setAddFundsSettings] = useState() const [transferFundsSettings, setTransferFundsSettings] = useState() const [transactionStatusSettings, setTransactionStatusSettings] = useState() - const [swapModalSettings, setSwapModalSettings] = useState() const [history, setHistory] = useState([]) const [checkoutHistory, setCheckoutHistory] = useState([getDefaultLocationCheckout()]) const { customCSS } = useConnectConfigContext() @@ -100,9 +76,6 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP // TODO: remove this navigation logic and all associated code, including components, once flows are migrated to updated checkout ui const navigation = history.length > 0 ? history[history.length - 1] : getDefaultLocation() - const checkoutNavigation = - checkoutHistory.length > 0 ? checkoutHistory[checkoutHistory.length - 1] : getDefaultLocationCheckout() - const triggerCheckout = (settings: CheckoutSettings) => { setSettings(settings) setOpenCheckoutModal(true) @@ -112,16 +85,13 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP setOpenCheckoutModal(false) } - const triggerAddFunds = (settings: AddFundsSettings) => { - setAddFundsSettings(settings) - setOpenAddFundsModal(true) + const triggerTransactionStatusModal = (settings: TransactionStatusSettings) => { + setTransactionStatusSettings(settings) + setOpenTransactionStatusModal(true) } - const closeAddFunds = () => { - setOpenAddFundsModal(false) - if (addFundsSettings?.onClose) { - addFundsSettings.onClose() - } + const closeTransactionStatusModal = () => { + setOpenTransactionStatusModal(false) } const openTransferFunds = (settings: TransferFundsSettings) => { @@ -138,46 +108,16 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP } } - 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 - case 'transaction-pending': - return case 'transaction-success': return case 'transaction-error': return - case 'transaction-form': + case 'transaction-pending': default: - return + return } } @@ -204,43 +144,11 @@ export const SequenceCheckoutProvider = ({ children, config }: SequenceCheckoutP } } - const getAddFundsContent = () => { - const { location } = navigation - switch (location) { - default: - return - } - } - - const getCheckoutFlowHeader = () => { - const { location } = checkoutNavigation - switch (location) { - default: - return - } - } - - const getCheckoutFlowContent = () => { - const { location } = checkoutNavigation - switch (location) { - case 'token-selection': - return - default: - return - } - } - useEffect(() => { - if (openCheckoutModal || openAddFundsModal || openPaymentSelectionModal) { + if (openCheckoutModal) { setHistory([]) } - }, [openCheckoutModal, openAddFundsModal, openPaymentSelectionModal]) - - useEffect(() => { - if (openPaymentSelectionModal) { - setCheckoutHistory([getDefaultLocationCheckout()]) - } - }, [openPaymentSelectionModal]) + }, [openCheckoutModal]) return ( - - - - + - - - - + + {openCheckoutModal && ( + setOpenCheckoutModal(false)} + > +
+ {getCheckoutHeader()} + {getCheckoutContent()} +
+ + )} + {openTransferFundsModal && ( + +
+ + +
+ + )} + {openTransactionStatusModal && ( + - - - {openCheckoutModal && ( - setOpenCheckoutModal(false)} - > -
- {getCheckoutHeader()} - {getCheckoutContent()} -
- - )} - {openAddFundsModal && ( - -
- {getAddFundsHeader()} - {getAddFundsContent()} -
- - )} - {openPaymentSelectionModal && ( - setOpenPaymentSelectionModal(false)} - > -
- {getCheckoutFlowHeader()} - {getCheckoutFlowContent()} -
- - )} - {openTransferFundsModal && ( - -
- - -
- - )} - {openTransactionStatusModal && ( - -
- -
- - )} - {isOpenSwapModal && ( - -
- - -
- - )} - - - {children} - - - - - - - - +
+ +
+ + )} + + + {children} + + + + + ) diff --git a/packages/checkout/src/contexts/AddFundsModal.ts b/packages/checkout/src/contexts/AddFundsModal.ts deleted file mode 100644 index 8eda9ea92..000000000 --- a/packages/checkout/src/contexts/AddFundsModal.ts +++ /dev/null @@ -1,33 +0,0 @@ -import { TransactionOnRampProvider } from '@0xsequence/marketplace' -import type { Hex } from 'viem' - -import { createGenericContext } from './genericContext.js' - -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 - provider?: TransactionOnRampProvider - transakOnRampKind?: 'default' | 'windowed' - cryptoAmount?: string - windowedOnRampMessage?: string -} - -type AddFundsModalContext = { - isAddFundsModalOpen: boolean - triggerAddFunds: (settings: AddFundsSettings) => void - closeAddFunds: () => void - addFundsSettings?: AddFundsSettings -} - -const [useAddFundsModalContext, AddFundsContextProvider] = createGenericContext() - -export { AddFundsContextProvider, useAddFundsModalContext } diff --git a/packages/checkout/src/contexts/SelectPaymentModal.ts b/packages/checkout/src/contexts/SelectPaymentModal.ts deleted file mode 100644 index 0243b6763..000000000 --- a/packages/checkout/src/contexts/SelectPaymentModal.ts +++ /dev/null @@ -1,62 +0,0 @@ -import { type SequenceIndexer, type TransactionReceipt } from '@0xsequence/indexer' -import { TransactionOnRampProvider } from '@0xsequence/marketplace' -import type { Hex } from 'viem' - -import type { ForteConfig, TransakConfig } from '../contexts/CheckoutModal.js' - -import { createGenericContext } from './genericContext.js' - -export type CreditCardProviders = 'transak' | 'forte' - -export interface Collectible { - tokenId?: string - quantity: string - decimals?: number - price?: string -} - -export interface SupplementaryAnalyticsInfo { - [key: string]: string -} - -export interface ActionButtons { - label: string - action: () => void -} - -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 - onRampProvider?: TransactionOnRampProvider - creditCardProviders?: string[] - transakConfig?: TransakConfig - forteConfig?: ForteConfig - customProviderCallback?: (onSuccess: (txHash: string) => void, onError: (error: Error) => void, onClose: () => void) => void - supplementaryAnalyticsInfo?: SupplementaryAnalyticsInfo - skipNativeBalanceCheck?: boolean - slippageBps?: number - nativeTokenAddress?: string - successActionButtons?: ActionButtons[] - onSuccessChecker?: (receipt: TransactionReceipt, indexerClient?: SequenceIndexer) => Promise -} - -type SelectPaymentModalContext = { - openSelectPaymentModal: (settings: SelectPaymentSettings) => void - closeSelectPaymentModal: () => void - selectPaymentSettings?: SelectPaymentSettings -} - -const [useSelectPaymentContext, SelectPaymentContextProvider] = createGenericContext() - -export { SelectPaymentContextProvider, useSelectPaymentContext } diff --git a/packages/checkout/src/contexts/SwapModal.ts b/packages/checkout/src/contexts/SwapModal.ts deleted file mode 100644 index b9f2c9fd6..000000000 --- a/packages/checkout/src/contexts/SwapModal.ts +++ /dev/null @@ -1,36 +0,0 @@ -'use client' - -import type { Hex } from 'viem' - -import { createGenericContext } from './genericContext.js' - -interface Transaction { - to: Hex - data?: Hex - value?: bigint -} - -export interface SwapModalSettings { - chainId: number - toTokenAddress: string - toTokenAmount: string - slippageBps?: number - title?: string - description?: string - disableMainCurrency?: boolean - postSwapTransactions?: Transaction[] - blockConfirmations?: number - customSwapErrorMessage?: string - onSuccess?: (txHash: string) => void -} - -type SwapModalContext = { - isSwapModalOpen: boolean - openSwapModal: (settings: SwapModalSettings) => void - closeSwapModal: () => void - swapModalSettings?: SwapModalSettings -} - -const [useSwapModalContext, SwapModalContextProvider] = createGenericContext() - -export { SwapModalContextProvider, useSwapModalContext } diff --git a/packages/checkout/src/contexts/TransferFundsModal.ts b/packages/checkout/src/contexts/TransferFundsModal.ts index 57317d8aa..447daee25 100644 --- a/packages/checkout/src/contexts/TransferFundsModal.ts +++ b/packages/checkout/src/contexts/TransferFundsModal.ts @@ -16,3 +16,4 @@ type TransferFundsModalContext = { const [useTransferFundsModalContext, TransferFundsContextProvider] = createGenericContext() export { TransferFundsContextProvider, useTransferFundsModalContext } + diff --git a/packages/checkout/src/hooks/index.ts b/packages/checkout/src/hooks/index.ts index d75718c55..59d8b2f97 100644 --- a/packages/checkout/src/hooks/index.ts +++ b/packages/checkout/src/hooks/index.ts @@ -1,14 +1,10 @@ -export * from './useAddFundsModal.js' export * from './useCheckoutModal.js' export * from './useNavigation.js' export * from './useModalTheme.js' export * from './useSelectPaymentModal.js' -export * from './useTransferFundsModal.js' export * from './useTransactionStatusModal.js' export * from './useSwapModal.js' -export * from './useCheckoutOptionsSalesContract.js' -export * from './useERC1155SaleContractCheckout.js' +export * from './useTransferFundsModal.js' export * from './useSkipOnCloseCallback.js' export * from './useFortePaymentIntent.js' -export * from './useAddFundsModal.js' export * from './useTransactionCounter.js' diff --git a/packages/checkout/src/hooks/useAddFundsModal.ts b/packages/checkout/src/hooks/useAddFundsModal.ts deleted file mode 100644 index 07ae4721f..000000000 --- a/packages/checkout/src/hooks/useAddFundsModal.ts +++ /dev/null @@ -1,59 +0,0 @@ -import { useAddFundsModalContext, type AddFundsSettings } from '../contexts/AddFundsModal.js' - -/** - * Return type for the useAddFundsModal hook. - * - * @property Function to open the On-ramp modal `triggerAddFunds` - * @property Function to close the On-ramp modal `closeAddFunds` - * @property Current settings for the On-ramp modal `addFundsSettings` - */ -type UseAddFundsModalReturnType = { - isAddFundsModalOpen: boolean - triggerAddFunds: (settings: AddFundsSettings) => void - closeAddFunds: () => void - addFundsSettings: AddFundsSettings | undefined -} - -/** - * Hook to manage the On-ramp modal that allows users to buy cryptocurrency with a credit/debit card. - * - * This hook provides methods to open and close the modal, and access its current settings. - * The modal integration is powered by Transak, allowing users to purchase crypto directly within - * your application. - * - * Go to {@link https://docs.sequence.xyz/sdk/web/checkout-sdk/hooks/useAddFundsModal} for more detailed documentation. - * - * @returns An object containing functions and settings for the On-ramp modal {@link UseAddFundsModalReturnType} - * - * @example - * ```tsx - * import { useAddFundsModal } from '@0xsequence/checkout' - * - * const YourComponent = () => { - * const { triggerAddFunds } = useAddFundsModal() - * const walletAddress = '0x123...' // User's wallet address - * - * const handleAddFunds = () => { - * triggerAddFunds({ - * walletAddress, - * defaultFiatAmount: '50', - * defaultCryptoCurrency: 'USDC', - * onOrderSuccessful: (data) => { - * console.log('Order successful!', data) - * } - * }) - * } - * - * return ( - * - * ) - * } - * ``` - */ -export const useAddFundsModal = (): UseAddFundsModalReturnType => { - const { isAddFundsModalOpen, triggerAddFunds, closeAddFunds, addFundsSettings } = useAddFundsModalContext() - - return { isAddFundsModalOpen, triggerAddFunds, closeAddFunds, addFundsSettings } -} diff --git a/packages/checkout/src/hooks/useCheckoutOptionsSalesContract.ts b/packages/checkout/src/hooks/useCheckoutOptionsSalesContract.ts deleted file mode 100644 index 36c106f39..000000000 --- a/packages/checkout/src/hooks/useCheckoutOptionsSalesContract.ts +++ /dev/null @@ -1,28 +0,0 @@ -import type { CheckoutOptionsSalesContractArgs } from '@0xsequence/marketplace' -import { useQuery } from '@tanstack/react-query' - -import { useMarketplaceClient } from './useMarketplaceClient.js' - -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 - }) -} diff --git a/packages/checkout/src/hooks/useCheckoutUI/index.tsx b/packages/checkout/src/hooks/useCheckoutUI/index.tsx deleted file mode 100644 index 33bc0ae72..000000000 --- a/packages/checkout/src/hooks/useCheckoutUI/index.tsx +++ /dev/null @@ -1,157 +0,0 @@ -import { useGetContractInfo, useGetTokenMetadata } from '@0xsequence/hooks' -import { findSupportedNetwork } from '@0xsequence/network' -import type { Hex } from 'viem' - -import type { TransakConfig } from '../../contexts/CheckoutModal.js' -import type { Collectible, CreditCardProviders } from '../../contexts/SelectPaymentModal.js' - -import { useCreditCardPayment, type UseCreditCardPaymentReturn } from './useCreditCardPayment.js' -import { useCryptoPayment, type UseCryptoPaymentReturn } from './useCryptoPayment.js' -import { useOrderSummary, type UseOrderSummaryReturn } from './useOrderSummary.js' - -interface UseCheckoutUIArgs { - chain: string | number - currencyAddress: string - totalPriceRaw: string - collectible: Collectible - collectionAddress: string - recipientAddress: string - targetContractAddress: string - txData: Hex - transactionConfirmations?: number - slippageBps?: number - creditCardProvider?: CreditCardProviders - transakConfig?: TransakConfig - onSuccess?: (txHash: string) => void - onError?: (error: Error) => void -} - -interface UseCheckoutUIReturn { - orderSummary: UseOrderSummaryReturn - creditCardPayment: UseCreditCardPaymentReturn - cryptoPayment: UseCryptoPaymentReturn -} - -export const useCheckoutUI = ({ - chain, - currencyAddress, - totalPriceRaw, - collectible, - collectionAddress, - recipientAddress, - targetContractAddress, - txData, - transactionConfirmations, - creditCardProvider, - transakConfig, - slippageBps, - onSuccess, - onError -}: UseCheckoutUIArgs): UseCheckoutUIReturn => { - const network = findSupportedNetwork(chain) - const chainId = network?.chainId || 137 - - const { - data: tokenMetadatas, - isLoading: isLoadingTokenMetadatas, - error: errorTokenMetadata - } = useGetTokenMetadata( - { - chainID: String(chainId), - contractAddress: collectionAddress, - tokenIDs: [collectible.tokenId ?? ''] - }, - { - disabled: !collectible.tokenId - } - ) - - const { - data: dataCollectionInfo, - isLoading: isLoadingCollectionInfo, - error: errorCollectionInfo - } = useGetContractInfo({ - chainID: String(chainId), - contractAddress: collectionAddress - }) - - const { - data: currencyInfo, - isLoading: isLoadingCurrencyInfo, - error: errorCurrencyInfo - } = useGetContractInfo({ - chainID: String(chainId), - contractAddress: currencyAddress - }) - - const orderSummary = useOrderSummary({ - chain, - currencyAddress, - totalPriceRaw, - collectible, - collectionAddress, - currencyInfo, - tokenMetadatas, - dataCollectionInfo, - isLoadingCollectionInfo, - errorCollectionInfo, - isLoadingCurrencyInfo, - isLoadingTokenMetadatas, - errorTokenMetadata, - errorCurrencyInfo - }) - - const creditCardPayment = useCreditCardPayment({ - chain, - currencyAddress, - totalPriceRaw, - collectible, - collectionAddress, - recipientAddress, - targetContractAddress, - txData, - creditCardProvider, - transakConfig, - onSuccess, - onError, - currencyInfo, - tokenMetadatas, - dataCollectionInfo, - isLoadingCollectionInfo, - errorCollectionInfo, - isLoadingTokenMetadatas, - errorTokenMetadata, - isLoadingCurrencyInfo, - errorCurrencyInfo - }) - - const cryptoPayment = useCryptoPayment({ - chain, - currencyAddress, - totalPriceRaw, - collectible, - collectionAddress, - recipientAddress, - targetContractAddress, - txData, - transactionConfirmations, - onSuccess, - onError, - currencyInfo, - tokenMetadatas, - dataCollectionInfo, - isLoadingCollectionInfo, - errorCollectionInfo, - isLoadingTokenMetadatas, - errorTokenMetadata, - isLoadingCurrencyInfo, - errorCurrencyInfo, - slippageBps - }) - - return { - orderSummary, - creditCardPayment, - cryptoPayment - } -} diff --git a/packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx b/packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx deleted file mode 100644 index eacb68f62..000000000 --- a/packages/checkout/src/hooks/useCheckoutUI/useCreditCardPayment.tsx +++ /dev/null @@ -1,250 +0,0 @@ -import { compareAddress } from '@0xsequence/connect' -import type { ContractInfo, TokenMetadata } from '@0xsequence/metadata' -import { findSupportedNetwork } from '@0xsequence/network' -import React, { useEffect, useMemo, useRef } from 'react' -import { formatUnits, zeroAddress, type Hex } from 'viem' - -import type { TransakConfig } from '../../contexts/CheckoutModal.js' -import type { Collectible, CreditCardProviders } from '../../contexts/SelectPaymentModal.js' -import { getCurrencyCode, getTransakProxyAddress } from '../../utils/transak.js' -import { useTransakWidgetUrl } from '../useTransakWidgetUrl.js' -const TRANSAK_IFRAME_ID = 'credit-card-payment-transak-iframe' - -export interface UseCreditCardPaymentArgs { - chain: string | number - currencyAddress: string - totalPriceRaw: string - collectible: Collectible - collectionAddress: string - recipientAddress: string - targetContractAddress: string - txData: Hex - creditCardProvider?: CreditCardProviders - transakConfig?: TransakConfig - onSuccess?: (txHash: string) => void - onError?: (error: Error) => void - currencyInfo: ContractInfo | undefined - tokenMetadatas: TokenMetadata[] | undefined - dataCollectionInfo: ContractInfo | undefined - isLoadingCollectionInfo: boolean - errorCollectionInfo: Error | null - isLoadingTokenMetadatas: boolean - errorTokenMetadata: Error | null - isLoadingCurrencyInfo: boolean - errorCurrencyInfo: Error | null -} - -interface UseCreditCardPaymentData { - iframeId: string - paymentUrl?: string - CreditCardIframe: React.ComponentType - EventListener: React.ComponentType -} - -export interface UseCreditCardPaymentReturn { - error: Error | null - data: UseCreditCardPaymentData - isLoading: boolean -} - -export const useCreditCardPayment = ({ - chain, - currencyAddress, - totalPriceRaw, - collectible, - collectionAddress, - recipientAddress, - targetContractAddress, - txData, - creditCardProvider, - transakConfig, - onSuccess, - onError, - currencyInfo, - tokenMetadatas, - dataCollectionInfo, - isLoadingCollectionInfo, - errorCollectionInfo, - isLoadingTokenMetadatas, - errorTokenMetadata, - isLoadingCurrencyInfo, - errorCurrencyInfo -}: UseCreditCardPaymentArgs): UseCreditCardPaymentReturn => { - const disableTransakWidgetUrlFetch = - isLoadingTokenMetadatas || isLoadingCurrencyInfo || isLoadingCollectionInfo || creditCardProvider !== 'transak' - - const network = findSupportedNetwork(chain) - const error = errorCollectionInfo || errorTokenMetadata || errorCurrencyInfo - const isLoading = isLoadingCollectionInfo || isLoadingTokenMetadatas || isLoadingCurrencyInfo - const isNativeCurrency = compareAddress(currencyAddress, zeroAddress) - const currencySymbol = isNativeCurrency ? network?.nativeToken.symbol : currencyInfo?.symbol || 'POL' - const currencyDecimals = isNativeCurrency ? network?.nativeToken.decimals : currencyInfo?.decimals || 18 - const iframeRef = useRef(null) - const tokenMetadata = tokenMetadatas?.[0] - - // Transak requires the recipient address to be the proxy address - // so we need to replace the recipient address with the proxy address in the calldata - // this is a weird hack so that credit card integrations are as simple as possible and should work 99% of the time - // If an issue arises, the user can override the calldata in the transak settings - - const transakProxyAddress = getTransakProxyAddress(network?.chainId || 137) || '' - const calldataWithProxy = - transakConfig?.callDataOverride ?? - txData.replace(recipientAddress.toLowerCase().substring(2), transakProxyAddress.substring(2)) - - const price = Number(formatUnits(BigInt(totalPriceRaw), Number(currencyDecimals || 18))) - - const transakNftData = [ - { - imageURL: tokenMetadata?.image || '', - nftName: tokenMetadata?.name || 'collectible', - collectionAddress: collectionAddress, - tokenIDs: [collectible.tokenId || ''], - prices: [price], - quantity: Number(collectible.quantity), - nftType: dataCollectionInfo?.type || 'ERC721' - } - ] - - const estimatedGasLimit = 500000 - - const partnerOrderId = useMemo(() => { - return `${recipientAddress}-${new Date().getTime()}` - }, [recipientAddress]) - - // Note: the network name might not always line up with Transak. A conversion function might be necessary - const networkName = network?.name.toLowerCase() - - const { - data: transakLinkData, - isLoading: isLoadingTransakLink, - error: errorTransakLink - } = useTransakWidgetUrl( - { - isNFT: true, - calldata: calldataWithProxy, - targetContractAddress, - cryptoCurrencyCode: getCurrencyCode({ - chainId: network?.chainId || 137, - currencyAddress, - defaultCurrencyCode: currencySymbol || 'ETH' - }), - estimatedGasLimit, - nftData: transakNftData, - walletAddress: recipientAddress, - disableWalletAddressForm: true, - partnerOrderId, - network: networkName, - referrerDomain: window.location.origin - }, - disableTransakWidgetUrlFetch - ) - - const missingCreditCardProvider = !creditCardProvider - - if (missingCreditCardProvider) { - return { - error: new Error('Missing credit card provider or transak config'), - data: { - iframeId: '', - CreditCardIframe: () => null, - EventListener: () => null - }, - isLoading: false - } - } - - if (error || isLoading) { - return { - error, - data: { - iframeId: '', - CreditCardIframe: () => null, - EventListener: () => null - }, - isLoading - } - } - - if (creditCardProvider === 'transak') { - const transakLink = transakLinkData?.url - - return { - error: errorTransakLink, - data: { - iframeId: TRANSAK_IFRAME_ID, - paymentUrl: transakLink, - CreditCardIframe: () => ( -
-