Sardine checkout integration

examples/react/src/components/Homepage.tsx

@@ -5,7 +5,8 @@ import {
   validateEthProof,
   useTheme as useKitTheme,
   useWaasFeeOptions,
-  useIndexerClient
+  useIndexerClient,
+  getModalPositionCss
 } from '@0xsequence/kit'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 import { useCheckoutModal } from '@0xsequence/kit-checkout'
@@ -36,9 +37,12 @@ import {
   Switch,
   Select,
   IconButton,
-  CheckmarkIcon
+  CheckmarkIcon,
+  Modal,
+  TextInput
 } from '@0xsequence/design-system'
 import { allNetworks } from '@0xsequence/network'
+import { AnimatePresence } from 'framer-motion'
 import { Footer } from './Footer'
 import { messageToSign } from '../constants'
 import { delay, formatAddress, getCheckoutSettings } from '../utils'
@@ -63,6 +67,12 @@ export const Homepage = () => {
   const { data: walletClient } = useWalletClient()
   const { switchChain } = useSwitchChain()
 
+  const [isCheckoutInfoModalOpen, setIsCheckoutInfoModalOpen] = React.useState(false)
+
+  const [checkoutOrderId, setCheckoutOrderId] = React.useState('')
+  const [checkoutTokenContractAddress, setCheckoutTokenContractAddress] = React.useState('')
+  const [checkoutTokenId, setCheckoutTokenId] = React.useState('')
+
   const connections = useConnections()
 
   const isWaasConnection = connections.find(c => c.connector.id.includes('waas')) !== undefined
@@ -324,7 +334,23 @@ export const Homepage = () => {
   }
 
   const onClickCheckout = () => {
-    triggerCheckout(getCheckoutSettings(address))
+    setIsCheckoutInfoModalOpen(true)
+  }
+
+  const onCheckoutInfoConfirm = () => {
+    setIsCheckoutInfoModalOpen(false)
+    if (checkoutOrderId !== '' && checkoutTokenContractAddress !== '' && checkoutTokenId !== '') {
+      const checkoutSettings = getCheckoutSettings(
+        checkoutOrderId,
+        address || '',
+        checkoutTokenContractAddress,
+        checkoutTokenId,
+        137,
+        1,
+        true
+      )
+      triggerCheckout(checkoutSettings)
+    }
   }
 
   const SwitchThemeButton = () => {
@@ -370,11 +396,11 @@ export const Homepage = () => {
                 description="Connect a Sequence wallet to view, swap, send, and receive collections"
                 onClick={() => setOpenWalletModal(true)}
               />
-              {/* <ClickableCard
-                title="Checkout"
-                description="Checkout screen before placing a purchase on coins or collections"
+              <ClickableCard
+                title="Sardine Checkout"
+                description="Set orderbook order id, token contract address and token id to test checkout (on Polygon)"
                 onClick={onClickCheckout}
-              /> */}
+              />
               <ClickableCard
                 title="Send transaction"
                 description="Send a transaction with your wallet"
@@ -615,6 +641,69 @@ export const Homepage = () => {
       </Box>
 
       {!isMobile && <Footer />}
+
+      <AnimatePresence>
+        {isCheckoutInfoModalOpen && (
+          <Modal
+            contentProps={{
+              style: {
+                maxWidth: '400px',
+                height: 'auto',
+                ...getModalPositionCss('center')
+              }
+            }}
+            scroll={false}
+            backdropColor="backgroundBackdrop"
+            onClose={() => setIsCheckoutInfoModalOpen(false)}
+          >
+            <Box id="sequence-kit-checkout-info-modal">
+              <Box paddingTop="16" paddingBottom="8" paddingX="6" gap="2" flexDirection="column">
+                <Text variant="medium" color="text50">
+                  Order ID
+                </Text>
+                <TextInput
+                  autoFocus
+                  name="orderId"
+                  value={checkoutOrderId}
+                  onChange={ev => setCheckoutOrderId(ev.target.value)}
+                  placeholder="Order Id"
+                  data-1p-ignore
+                />
+                <Text variant="medium" color="text50">
+                  Token Contract Address
+                </Text>
+                <TextInput
+                  autoFocus
+                  name="tokenContractAddress"
+                  value={checkoutTokenContractAddress}
+                  onChange={ev => setCheckoutTokenContractAddress(ev.target.value)}
+                  placeholder="Token Contract Address"
+                  data-1p-ignore
+                />
+                <Text variant="medium" color="text50">
+                  Token ID
+                </Text>
+                <TextInput
+                  autoFocus
+                  name="tokenId"
+                  value={checkoutTokenId}
+                  onChange={ev => setCheckoutTokenId(ev.target.value)}
+                  placeholder="Token Id"
+                  data-1p-ignore
+                />
+
+                <Button
+                  marginTop="4"
+                  onClick={() => {
+                    onCheckoutInfoConfirm()
+                  }}
+                  label="Trigger checkout"
+                />
+              </Box>
+            </Box>
+          </Modal>
+        )}
+      </AnimatePresence>
     </Box>
   )
 }

examples/react/src/utils/helpers.ts

@@ -1,3 +1,6 @@
+import { Address } from 'viem'
+import { CheckoutSettings } from '@0xsequence/kit-checkout'
+
 export const truncateAtMiddle = (text: string, truncateAt: number) => {
   let finalText = text
 
@@ -15,3 +18,36 @@ export const formatAddress = (text: string) => {
 export const delay = (ms: number) => {
   return new Promise(resolve => setTimeout(resolve, ms))
 }
+
+export const getCheckoutSettings = (
+  blockchainNftId: string,
+  recipientAddress: string | Address,
+  tokenContractAddress: string,
+  tokenId: string,
+  chainId: number,
+  quantity: number,
+  isDev?: boolean
+) => {
+  const checkoutSettings: CheckoutSettings = {
+    sardineCheckout: {
+      chainId,
+      defaultPaymentMethodType: 'us_debit',
+      platform: 'horizon',
+      contractAddress: '0xB537a160472183f2150d42EB1c3DD6684A55f74c',
+      blockchainNftId: blockchainNftId,
+      recipientAddress: recipientAddress,
+      quantity,
+      isDev
+    },
+    orderSummaryItems: [
+      {
+        chainId,
+        contractAddress: tokenContractAddress,
+        tokenId,
+        quantityRaw: String(quantity)
+      }
+    ]
+  }
+
+  return checkoutSettings
+}

examples/react/src/utils/index.ts

@@ -1,2 +1 @@
-export * from './settings'
 export * from './helpers'

packages/checkout/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@0xsequence/kit-checkout",
-  "version": "2.4.0",
+  "version": "2.4.1",
   "description": "Checkout UI for Sequence Kit",
   "repository": "https://github.com/0xsequence/kit/tree/master/packages/checkout",
   "main": "dist/0xsequence-kit-checkout.cjs.js",