Checkout updates

.changeset/pre.json

@@ -0,0 +1,12 @@
+{
+  "mode": "pre",
+  "tag": "beta",
+  "initialVersions": {
+    "@0xsequence/kit-example-react": "0.1.0",
+    "@0xsequence/kit-checkout": "2.1.0",
+    "@0xsequence/kit-connectors": "2.1.0",
+    "@0xsequence/kit": "2.1.0",
+    "@0xsequence/kit-wallet": "2.1.0"
+  },
+  "changesets": []
+}

.github/actions/install-dependencies/action.yml

@@ -32,5 +32,5 @@ runs:
 
     - name: Install dependencies
       shell: bash
-      run: pnpm install --frozen-lockfile
+      run: pnpm install
       if: ${{ steps.pnpm-cache.outputs.cache-hit != 'true' }}

examples/react-waas/package.json

@@ -10,11 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "0xsequence": "^1.9.19",
-    "@0xsequence/kit": "workspace:*",
-    "@tanstack/react-query": "^5.32.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "0xsequence": "^1.9.20",
+    "@0xsequence/kit": "workspace:*",
     "viem": "^2.9.26",
     "wagmi": "^2.5.20"
   },

examples/react/package.json

@@ -4,36 +4,40 @@
   "private": true,
   "homepage": "kit",
   "type": "module",
-  "scripts": {
-    "start": "vite",
-    "build": "vite build && touch ./dist/.nojekyll",
-    "serve": "vite preview"
-  },
   "dependencies": {
+    "0xsequence": "^1.9.20",
+    "@0xsequence/core": "^1.9.20",
+    "@0xsequence/network": "^1.9.20",
     "@0xsequence/design-system": "^1.4.7",
     "@0xsequence/kit": "workspace:*",
     "@0xsequence/kit-checkout": "workspace:*",
     "@0xsequence/kit-connectors": "workspace:*",
     "@0xsequence/kit-wallet": "workspace:*",
-    "@0xsequence/network": "^1.9.19",
     "@tanstack/react-query": "^5.32.0",
     "@vanilla-extract/css": "^1.14.2",
+    "ethers": "^5.7.2",
     "framer-motion": "^8.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "typescript": "^5.4.5",
+    "typescript": "^5.3.3",
     "viem": "^2.9.26",
+    "vite-plugin-node-polyfills": "^0.21.0",
     "wagmi": "^2.5.20"
   },
   "devDependencies": {
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
-    "@vanilla-extract/vite-plugin": "^4.0.7",
+    "@vanilla-extract/vite-plugin": "^4.0.4",
     "@vitejs/plugin-react": "^4.2.1",
-    "vite": "^5.2.10",
+    "vite": "^5.1.1",
     "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-svgr": "^4.2.0",
     "vite-tsconfig-paths": "^4.3.2"
+  },
+  "scripts": {
+    "start": "vite",
+    "build": "vite build && touch ./dist/.nojekyll",
+    "serve": "vite preview"
   }
 }

examples/react/src/components/Homepage.tsx

@@ -5,7 +5,8 @@ import {
   validateEthProof,
   useTheme as useKitTheme,
   useWaasFeeOptions,
-  getNetworkConfigAndClients
+  getNetworkConfigAndClients,
+  getModalPositionCss
 } from '@0xsequence/kit'
 import { useOpenWalletModal } from '@0xsequence/kit-wallet'
 import { useCheckoutModal } from '@0xsequence/kit-checkout'
@@ -36,9 +37,13 @@ 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'
@@ -319,8 +324,22 @@ export const Homepage = () => {
     setOpenConnectModal(true)
   }
 
+  const [isCheckoutInfoModalOpen, setIsCheckoutInfoModalOpen] = React.useState(false)
+
+  const [checkoutOrderId, setCheckoutOrderId] = React.useState('')
+  const [checkoutTokenContractAddress, setCheckoutTokenContractAddress] = React.useState('')
+  const [checkoutTokenId, setCheckoutTokenId] = React.useState('')
+
   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 = () => {
@@ -366,11 +385,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"
@@ -607,6 +626,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,5 @@
+import { CheckoutSettings } from '@0xsequence/kit-checkout'
+
 export const truncateAtMiddle = (text: string, truncateAt: number) => {
   let finalText = text
 
@@ -15,3 +17,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,
+  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

@@ -13,14 +13,14 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "0xsequence": "^1.9.19",
-    "@0xsequence/api": "^1.9.19",
-    "@0xsequence/indexer": "^1.9.19",
-    "@0xsequence/metadata": "^1.9.19",
-    "@0xsequence/network": "^1.9.19",
-    "@paperxyz/react-client-sdk": "^1.1.3",
+    "0xsequence": "^1.9.20",
+    "@0xsequence/api": "^1.9.20",
+    "@0xsequence/indexer": "^1.9.20",
+    "@0xsequence/metadata": "^1.9.20",
+    "@0xsequence/network": "^1.9.20",
     "@tanstack/react-query": "^5.32.0",
-    "react-copy-to-clipboard": "^5.1.0"
+    "react-copy-to-clipboard": "^5.1.0",
+    "@paperxyz/react-client-sdk": "^1.1.3"
   },
   "peerDependencies": {
     "@0xsequence/design-system": ">=1.4.7",