Feat/update swap api hooks

examples/components/package.json

@@ -4,8 +4,8 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@radix-ui/react-popover": "^1.0.7",
-    "typescript": "^5.8.2"
+    "@radix-ui/react-popover": "^1.1.11",
+    "typescript": "^5.8.3"
   },
   "peerDependencies": {
     "@0xsequence/design-system": "2.1.6",

examples/next/package.json

@@ -10,30 +10,30 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@0xsequence/design-system": "2.1.6",
-    "@0xsequence/network": ">= 2.3.7",
     "@0xsequence/checkout": "workspace:*",
     "@0xsequence/connect": "workspace:*",
+    "@0xsequence/design-system": "2.1.6",
     "@0xsequence/hooks": "workspace:*",
+    "@0xsequence/network": "^2.3.10",
+    "@0xsequence/waas": "^2.3.10",
     "@0xsequence/wallet-widget": "workspace:*",
-    "@0xsequence/waas": ">= 2.3.7",
-    "@tailwindcss/postcss": "^4.0.6",
-    "@tanstack/react-query": "^5.62.0",
+    "@tailwindcss/postcss": "^4.1.4",
+    "@tanstack/react-query": "^5.74.11",
     "example-shared-components": "workspace:*",
     "next": "14.2.3",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "tailwindcss": "^4.0.6",
-    "viem": "^2.28.0",
-    "wagmi": "^2.15.0"
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwindcss": "^4.1.4",
+    "viem": "^2.28.1",
+    "wagmi": "^2.15.1"
   },
   "devDependencies": {
-    "@types/node": "^20.12.12",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "eslint": "^8",
+    "@types/node": "^20.17.32",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
+    "eslint": "^8.57.1",
     "eslint-config-next": "14.2.3",
-    "postcss": "^8.5.1",
-    "typescript": "^5.8.2"
+    "postcss": "^8.5.3",
+    "typescript": "^5.8.3"
   }
 }

examples/react/package.json

@@ -14,35 +14,35 @@
     "@0xsequence/checkout": "workspace:*",
     "@0xsequence/connect": "workspace:*",
     "@0xsequence/design-system": "2.1.6",
-    "@0xsequence/network": ">= 2.3.7",
-    "@0xsequence/wallet-widget": "workspace:*",
-    "@0xsequence/immutable-connector": "workspace:*",
     "@0xsequence/hooks": "workspace:*",
-    "@0xsequence/waas": ">= 2.3.7",
-    "@imtbl/config": "^2.1.2",
-    "@imtbl/sdk": "^2.1.2",
-    "@tanstack/react-query": "^5.62.0",
+    "@0xsequence/immutable-connector": "workspace:*",
+    "@0xsequence/network": "^2.3.10",
+    "@0xsequence/waas": "^2.3.10",
+    "@0xsequence/wallet-widget": "workspace:*",
+    "@imtbl/config": "^2.2.0",
+    "@imtbl/sdk": "^2.2.0",
+    "@tanstack/react-query": "^5.74.11",
     "clsx": "^2.1.1",
     "example-shared-components": "workspace:*",
-    "motion": "^12.3.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-router-dom": "^7.3.0",
-    "tailwindcss": "^4.0.6",
-    "typescript": "^5.8.2",
-    "viem": "^2.28.0",
-    "wagmi": "^2.15.0"
+    "motion": "^12.9.2",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router-dom": "^7.5.3",
+    "tailwindcss": "^4.1.4",
+    "typescript": "^5.8.3",
+    "viem": "^2.28.1",
+    "wagmi": "^2.15.1"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.0.6",
-    "@types/node": "^20.12.12",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "@vitejs/plugin-react": "^4.3.0",
+    "@tailwindcss/postcss": "^4.1.4",
+    "@types/node": "^20.17.32",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
+    "@vitejs/plugin-react": "^4.4.1",
     "postcss": "^8.5.3",
-    "vite": "^5.2.11",
+    "vite": "^5.4.19",
     "vite-plugin-node-polyfills": "^0.21.0",
-    "vite-plugin-svgr": "^4.2.0",
+    "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^4.3.2"
   }
 }

examples/react/src/components/Connected.tsx

@@ -320,17 +320,17 @@ export const Connected = () => {
 
   const onClickSwap = () => {
     const chainId = 137
-    const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'
-    const currencyAmount = '20000'
+    const toTokenAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'
+    const toTokenAmount = '200000'
     const data = encodeFunctionData({ abi: parseAbi(['function demo()']), functionName: 'demo', args: [] })
 
     const swapModalSettings: SwapModalSettings = {
       onSuccess: () => {
         console.log('swap successful!')
       },
       chainId,
-      currencyAddress,
-      currencyAmount,
+      toTokenAddress,
+      toTokenAmount,
       postSwapTransactions: [
         {
           to: '0x37470dac8a0255141745906c972e414b1409b470',
@@ -360,7 +360,7 @@ export const Connected = () => {
     const currencyAddress = '0x3c499c542cEF5E3811e1192ce70d8cC03d5c3359'
     const salesContractAddress = '0xe65b75eb7c58ffc0bf0e671d64d0e1c6cd0d3e5b'
     const collectionAddress = '0xdeb398f41ccd290ee5114df7e498cf04fac916cb'
-    const price = '20000'
+    const price = '200000'
     const contractId = '674eb5613d739107bbd18ed2'
 
     const chainId = 137
@@ -392,6 +392,7 @@ export const Connected = () => {
       chain: chainId,
       price,
       targetContractAddress: salesContractAddress,
+      enableMainCurrencyPayment: true,
       recipientAddress: address,
       currencyAddress,
       collectionAddress,

examples/react/src/components/CustomCheckout/index.tsx

@@ -159,13 +159,13 @@ export const CustomCheckout = () => {
       <div className="flex flex-col gap-2">
         {cryptoPayment.cryptoOptions.data.map(option => (
           <CryptoOption
-            key={option.currencyAddress}
-            currencyName={option.currencyName}
+            key={option.address}
+            currencyName={option.name}
             chainId={option.chainId}
             symbol={option.symbol}
             price={option.totalPriceDisplay}
             onClick={() => {
-              cryptoPayment.purchaseAction.setSelectedCurrencyAddress(option.currencyAddress)
+              cryptoPayment.purchaseAction.setSelectedCurrencyAddress(option.address)
             }}
             isSelected={option.isSelected}
             showInsufficientFundsWarning={option.isInsufficientFunds}

package.json

@@ -35,26 +35,26 @@
   "devDependencies": {
     "@0xsequence/connect": "workspace:*",
     "@arethetypeswrong/cli": "^0.17.4",
-    "@changesets/changelog-github": "^0.5.0",
-    "@changesets/cli": "^2.25.2",
-    "@eslint/js": "^9.22.0",
-    "@types/node": "^20.12.12",
-    "@types/react": "^19.0.10",
-    "@types/react-dom": "^19.0.4",
-    "eslint": "^9.22.0",
-    "eslint-plugin-import": "^2.29.1",
+    "@changesets/changelog-github": "^0.5.1",
+    "@changesets/cli": "^2.29.2",
+    "@eslint/js": "^9.25.1",
+    "@types/node": "^20.17.32",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.3",
+    "eslint": "^9.25.1",
+    "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react-hooks": "^5.2.0",
-    "ethers": "^6.13.0",
+    "ethers": "^6.13.7",
     "husky": "^9.1.7",
-    "prettier": "^3.2.5",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "rimraf": "^5.0.7",
+    "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "rimraf": "^5.0.10",
     "turbo": "2.0.1",
-    "typescript": "^5.8.2",
-    "typescript-eslint": "^8.26.1",
-    "viem": "^2.28.0",
-    "wagmi": "^2.15.0"
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.31.1",
+    "viem": "^2.28.1",
+    "wagmi": "^2.15.1"
   },
   "resolutions": {},
   "packageManager": "[email protected]"

packages/checkout/package.json

@@ -31,21 +31,21 @@
   },
   "dependencies": {
     "@0xsequence/design-system": "2.1.6",
-    "@0xsequence/marketplace": "^2.1.3",
     "@0xsequence/hooks": "workspace:*",
+    "@0xsequence/marketplace": "^2.3.10",
+    "motion": "^12.9.2",
     "pako": "^2.1.0",
-    "qrcode.react": "^4.0.1",
+    "qrcode.react": "^4.2.0",
     "react-copy-to-clipboard": "^5.1.0",
-    "timeago-react": "^3.0.6",
-    "motion": "^12.3.1"
+    "timeago-react": "^3.0.7"
   },
   "peerDependencies": {
     "0xsequence": ">= 2.3.7",
-    "@0xsequence/api": ">=2.3.7",
+    "@0xsequence/api": "2.3.11",
+    "@0xsequence/connect": "workspace:*",
     "@0xsequence/indexer": ">= 2.3.7",
     "@0xsequence/metadata": ">= 2.3.7",
     "@0xsequence/network": ">= 2.3.7",
-    "@0xsequence/connect": "workspace:*",
     "@0xsequence/waas": ">= 2.3.7",
     "@tanstack/react-query": ">= 5",
     "ethers": ">= 6.13.0",
@@ -56,14 +56,14 @@
   },
   "devDependencies": {
     "@0xsequence/connect": "workspace:*",
-    "@tanstack/react-query": "^5.62.0",
+    "@tanstack/react-query": "^5.74.11",
     "@types/pako": "^2.0.3",
     "@types/react-copy-to-clipboard": "^5.0.7",
-    "ethers": "^6.13.0",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "viem": "^2.28.0",
-    "vite": "^5.2.11",
-    "wagmi": "^2.15.0"
+    "ethers": "^6.13.7",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "viem": "^2.28.1",
+    "vite": "^5.4.19",
+    "wagmi": "^2.15.1"
   }
 }

packages/checkout/src/contexts/SelectPaymentModal.ts

@@ -47,6 +47,7 @@ export interface SelectPaymentSettings {
   customProviderCallback?: (onSuccess: (txHash: string) => void, onError: (error: Error) => void, onClose: () => void) => void
   supplementaryAnalyticsInfo?: SupplementaryAnalyticsInfo
   skipNativeBalanceCheck?: boolean
+  slippageBps?: number
   nativeTokenAddress?: string
 }
 

packages/checkout/src/contexts/SwapModal.ts

@@ -12,8 +12,9 @@ interface Transaction {
 
 export interface SwapModalSettings {
   chainId: number
-  currencyAddress: string
-  currencyAmount: string
+  toTokenAddress: string
+  toTokenAmount: string
+  slippageBps?: number
   title?: string
   description?: string
   disableMainCurrency?: boolean

packages/checkout/src/hooks/useCheckoutUI/index.tsx

@@ -19,6 +19,7 @@ interface UseCheckoutUIArgs {
   targetContractAddress: string
   txData: Hex
   transactionConfirmations?: number
+  slippageBps?: number
   creditCardProvider?: CreditCardProviders
   transakConfig?: TransakConfig
   onSuccess?: (txHash: string) => void
@@ -43,6 +44,7 @@ export const useCheckoutUI = ({
   transactionConfirmations,
   creditCardProvider,
   transakConfig,
+  slippageBps,
   onSuccess,
   onError
 }: UseCheckoutUIArgs): UseCheckoutUIReturn => {
@@ -138,7 +140,8 @@ export const useCheckoutUI = ({
     isLoadingTokenMetadatas,
     errorTokenMetadata,
     isLoadingCurrencyInfo,
-    errorCurrencyInfo
+    errorCurrencyInfo,
+    slippageBps
   })
 
   return {