diff --git a/examples/react/src/components/Connected.tsx b/examples/react/src/components/Connected.tsx
index 188ea4ff..887baa6a 100644
--- a/examples/react/src/components/Connected.tsx
+++ b/examples/react/src/components/Connected.tsx
@@ -7,7 +7,7 @@ import {
validateEthProof,
getModalPositionCss
} from '@0xsequence/kit'
-import { useCheckoutModal, useAddFundsModal } from '@0xsequence/kit-checkout'
+import { useCheckoutModal, useAddFundsModal, useSelectPaymentModal } from '@0xsequence/kit-checkout'
import { CardButton, Header } from '@0xsequence/kit-example-shared-components'
import { useOpenWalletModal } from '@0xsequence/kit-wallet'
import { allNetworks, ChainId } from '@0xsequence/network'
@@ -38,6 +38,7 @@ export const Connected = () => {
const { setOpenWalletModal } = useOpenWalletModal()
const { triggerCheckout } = useCheckoutModal()
const { triggerAddFunds } = useAddFundsModal()
+ const { openSelectPaymentModal } = useSelectPaymentModal()
const { data: walletClient } = useWalletClient()
const storage = useStorage()
@@ -242,6 +243,10 @@ export const Connected = () => {
setIsCheckoutInfoModalOpen(true)
}
+ const onClickSelectPayment = () => {
+ openSelectPaymentModal({})
+ }
+
const onCheckoutInfoConfirm = () => {
setIsCheckoutInfoModalOpen(false)
if (checkoutOrderId !== '' && checkoutTokenContractAddress !== '' && checkoutTokenId !== '') {
@@ -376,6 +381,12 @@ export const Connected = () => {
description="Set orderbook order id, token contract address and token id to test checkout (on Polygon)"
onClick={onClickCheckout}
/>
+
+
>
)}
diff --git a/packages/checkout/src/contexts/SelectPaymentModal.ts b/packages/checkout/src/contexts/SelectPaymentModal.ts
new file mode 100644
index 00000000..37b86c7e
--- /dev/null
+++ b/packages/checkout/src/contexts/SelectPaymentModal.ts
@@ -0,0 +1,13 @@
+import { createGenericContext } from './genericContext'
+
+export interface SelectPaymentSettings {
+ // TODO: add options for each option type....
+}
+
+type SelectPaymentModalContext = {
+ openSelectPaymentModal: (settings: SelectPaymentSettings) => void
+ closeSelectPaymentModal: () => void
+ selectPaymentSettings?: SelectPaymentSettings
+}
+
+export const [useSelectPaymentContext, SelectPaymentContextProvider] = createGenericContext()
diff --git a/packages/checkout/src/contexts/index.ts b/packages/checkout/src/contexts/index.ts
index 5a647be5..b1f888b7 100644
--- a/packages/checkout/src/contexts/index.ts
+++ b/packages/checkout/src/contexts/index.ts
@@ -1,3 +1,4 @@
export * from './AddFundsModal'
export * from './CheckoutModal'
export * from './Navigation'
+export * from './SelectPaymentModal'
\ No newline at end of file
diff --git a/packages/checkout/src/hooks/index.ts b/packages/checkout/src/hooks/index.ts
index 86aba645..d8fe8036 100644
--- a/packages/checkout/src/hooks/index.ts
+++ b/packages/checkout/src/hooks/index.ts
@@ -4,3 +4,4 @@ export * from './useNavigation'
export * from './useModalTheme'
export * from './useCheckoutWhitelistStatus'
export * from './useSardineClientToken'
+export * from './useSelectPaymentModal'
\ No newline at end of file
diff --git a/packages/checkout/src/hooks/useSelectPaymentModal.ts b/packages/checkout/src/hooks/useSelectPaymentModal.ts
new file mode 100644
index 00000000..4d5b5b64
--- /dev/null
+++ b/packages/checkout/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 }
+}
diff --git a/packages/checkout/src/index.ts b/packages/checkout/src/index.ts
index 3dc48ae2..eaa396b5 100644
--- a/packages/checkout/src/index.ts
+++ b/packages/checkout/src/index.ts
@@ -4,6 +4,7 @@ export { KitCheckoutProvider } from './shared/components/KitCheckoutProvider'
// Hooks
export { useCheckoutModal } from './hooks/useCheckoutModal'
export { useAddFundsModal } from './hooks/useAddFundsModal'
+export { useSelectPaymentModal } from './hooks/useSelectPaymentModal'
export { useCheckoutWhitelistStatus } from './hooks/useCheckoutWhitelistStatus'
export { type CheckoutSettings } from './contexts/CheckoutModal'
diff --git a/packages/checkout/src/shared/components/KitCheckoutProvider.tsx b/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
index afcf0fac..3d16ad1f 100644
--- a/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
+++ b/packages/checkout/src/shared/components/KitCheckoutProvider.tsx
@@ -13,10 +13,19 @@ import {
CheckoutModalContextProvider,
CheckoutSettings,
AddFundsContextProvider,
- AddFundsSettings
+ AddFundsSettings,
+ SelectPaymentContextProvider,
+ SelectPaymentSettings
} from '../../contexts'
import { NavigationHeader } from '../../shared/components/NavigationHeader'
-import { PendingTransaction, TransactionError, TransactionSuccess, CheckoutSelection, AddFundsContent } from '../../views'
+import {
+ PendingTransaction,
+ TransactionError,
+ TransactionSuccess,
+ CheckoutSelection,
+ AddFundsContent,
+ PaymentSelection,
+} from '../../views'
export type KitCheckoutProvider = {
children: React.ReactNode
@@ -36,7 +45,9 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
const { theme, position } = useTheme()
const [openCheckoutModal, setOpenCheckoutModal] = useState(false)
const [openAddFundsModal, setOpenAddFundsModal] = useState(false)
+ const [openPaymentSelectionModal, setOpenPaymentSelectionModal] = useState(false)
const [settings, setSettings] = useState()
+ const [selectPaymentSettings, setSelectPaymentSettings] = useState()
const [addFundsSettings, setAddFundsSettings] = useState()
const [history, setHistory] = useState([])
@@ -78,6 +89,15 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
setOpenAddFundsModal(false)
}
+ const openSelectPaymentModal = (settings: SelectPaymentSettings) => {
+ setSelectPaymentSettings(settings)
+ setOpenPaymentSelectionModal(true)
+ }
+
+ const closeSelectPaymentModal = () => {
+ setOpenPaymentSelectionModal(false)
+ }
+
const getCheckoutContent = () => {
const { location } = navigation
switch (location) {
@@ -127,75 +147,100 @@ export const KitCheckoutContent = ({ children }: KitCheckoutProvider) => {
}
useEffect(() => {
- if (openCheckoutModal || openAddFundsModal) {
+ if (openCheckoutModal || openAddFundsModal || openPaymentSelectionModal) {
setHistory([])
}
- }, [openCheckoutModal, openAddFundsModal])
+ }, [openCheckoutModal, openAddFundsModal, openPaymentSelectionModal])
return (
-
-
-
-
-
-
- {openCheckoutModal && (
- setOpenCheckoutModal(false)}
- >
-
- {getCheckoutHeader()}
- {getCheckoutContent()}
-
-
- )}
- {openAddFundsModal && (
- setOpenAddFundsModal(false)}
- >
-
- {getAddFundsHeader()}
- {getAddFundsContent()}
-
-
- )}
-
-
-
- {children}
-
-
-
+
+
+
+
+
+ {openCheckoutModal && (
+ setOpenCheckoutModal(false)}
+ >
+
+ {getCheckoutHeader()}
+ {getCheckoutContent()}
+
+
+ )}
+ {openAddFundsModal && (
+ setOpenAddFundsModal(false)}
+ >
+
+ {getAddFundsHeader()}
+ {getAddFundsContent()}
+
+
+ )}
+ {openPaymentSelectionModal && (
+ setOpenPaymentSelectionModal(false)}
+ >
+
+
+
+
+ )}
+
+
+
+ {children}
+
+
+
+
)
}
diff --git a/packages/checkout/src/views/PaymentSelection/index.tsx b/packages/checkout/src/views/PaymentSelection/index.tsx
new file mode 100644
index 00000000..b4d4dea7
--- /dev/null
+++ b/packages/checkout/src/views/PaymentSelection/index.tsx
@@ -0,0 +1,36 @@
+import { Box, Text } from '@0xsequence/design-system'
+import { NavigationHeader } from '../../shared/components/NavigationHeader'
+import { HEADER_HEIGHT } from '../../constants'
+
+export const PaymentSelection = () => {
+ return (
+ <>
+
+
+ >
+ )
+}
+
+export const PaymentSelectionHeader = () => {
+ return (
+
+ )
+}
+
+export const PaymentSelectionContent = () => {
+ return (
+
+ Payment Selection Content
+ Payment Selection Content
+ Payment Selection Content
+ Payment Selection Content
+
+ )
+}
\ No newline at end of file
diff --git a/packages/checkout/src/views/index.ts b/packages/checkout/src/views/index.ts
index e77ab8c6..d994cd21 100644
--- a/packages/checkout/src/views/index.ts
+++ b/packages/checkout/src/views/index.ts
@@ -3,3 +3,4 @@ export * from './TransactionSuccess'
export * from './TransactionError'
export * from './CheckoutSelection'
export * from './AddFunds'
+export * from './PaymentSelection'
\ No newline at end of file