@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

package/src/react/ui/modals/BuyModal/components/ERC1155QuantityModal.tsx

@@ -1,22 +1,27 @@
 'use client';
 
 import { Text, TokenImage } from '@0xsequence/design-system';
-import { use$, useObservable } from '@legendapp/state/react';
+import { useState } from 'react';
 import type { Address } from 'viem';
+import { maxUint256, parseUnits } from 'viem';
 import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../consts';
 import type { MarketplaceType } from '../../../../../types';
 import { formatPriceWithFee } from '../../../../../utils/price';
 import type { Order } from '../../../../_internal';
-import { useCurrency, useMarketplaceConfig } from '../../../../hooks';
+import { useMarketplaceConfig } from '../../../../hooks';
+import { useCurrency } from '../../../../hooks/data/market/useCurrency';
 import { ActionModal } from '../../_internal/components/actionModal';
 import QuantityInput from '../../_internal/components/quantityInput';
 import { buyModalStore, useIsOpen } from '../store';
 
+const INFINITY_STRING = maxUint256.toString();
+
 type ERC1155QuantityModalProps = {
 	order?: Order;
 	marketplaceType: MarketplaceType;
 	quantityDecimals: number;
 	quantityRemaining: string;
+	unlimitedSupply?: boolean;
 	salePrice?: {
 		amount: string;
 		currencyAddress: Address;
@@ -28,16 +33,35 @@ export const ERC1155QuantityModal = ({
 	order,
 	quantityDecimals,
 	quantityRemaining,
+	unlimitedSupply,
 	salePrice,
 	chainId,
 	marketplaceType,
 }: ERC1155QuantityModalProps) => {
 	const isOpen = useIsOpen();
 
-	const localQuantity$ = useObservable('1');
-	const localQuantity = use$(localQuantity$);
-	const invalidQuantity$ = useObservable(false);
-	const invalidQuantity = use$(invalidQuantity$);
+	const minQuantity =
+		quantityDecimals > 0 ? `0.${'1'.padStart(quantityDecimals, '0')}` : '1';
+	const [localQuantity, setLocalQuantity] = useState(minQuantity);
+	const [invalidQuantity, setInvalidQuantity] = useState(false);
+
+	const maxQuantity = unlimitedSupply
+		? INFINITY_STRING
+		: quantityDecimals > 0
+			? (Number(quantityRemaining) / 10 ** quantityDecimals).toString()
+			: quantityRemaining;
+
+	const handleBuyNow = () => {
+		// Convert the quantity to account for decimals
+		const quantityWithDecimals = parseUnits(
+			localQuantity,
+			quantityDecimals,
+		).toString();
+		buyModalStore.send({
+			type: 'setQuantity',
+			quantity: Number(quantityWithDecimals),
+		});
+	};
 
 	return (
 		<ActionModal
@@ -49,22 +73,19 @@ export const ERC1155QuantityModal = ({
 			ctas={[
 				{
 					label: 'Buy now',
-					onClick: () => {
-						buyModalStore.send({
-							type: 'setQuantity',
-							quantity: Number(localQuantity),
-						});
-					},
+					onClick: handleBuyNow,
 					disabled: invalidQuantity,
 				},
 			]}
 		>
 			<div className="flex w-full flex-col gap-4">
 				<QuantityInput
-					$quantity={localQuantity$}
-					$invalidQuantity={invalidQuantity$}
+					quantity={localQuantity}
+					invalidQuantity={invalidQuantity}
+					onQuantityChange={setLocalQuantity}
+					onInvalidQuantityChange={setInvalidQuantity}
 					decimals={quantityDecimals}
-					maxQuantity={quantityRemaining}
+					maxQuantity={maxQuantity}
 				/>
 
 				<TotalPrice
@@ -73,6 +94,7 @@ export const ERC1155QuantityModal = ({
 					salePrice={salePrice}
 					chainId={chainId}
 					marketplaceType={marketplaceType}
+					quantityDecimals={quantityDecimals}
 				/>
 			</div>
 		</ActionModal>
@@ -88,6 +110,7 @@ type TotalPriceProps = {
 	};
 	chainId: number;
 	marketplaceType: MarketplaceType;
+	quantityDecimals: number;
 };
 
 const TotalPrice = ({
@@ -96,6 +119,7 @@ const TotalPrice = ({
 	salePrice,
 	chainId,
 	marketplaceType,
+	quantityDecimals,
 }: TotalPriceProps) => {
 	const isShop = marketplaceType === 'shop';
 	const isMarket = marketplaceType === 'market';
@@ -110,7 +134,8 @@ const TotalPrice = ({
 	let error: null | string = null;
 	let formattedPrice = '0';
 
-	const quantity = BigInt(quantityStr);
+	// Convert quantity to proper decimal format for multiplication
+	const quantityForCalculation = parseUnits(quantityStr, quantityDecimals);
 
 	if (isMarket && currency && order) {
 		try {
@@ -123,8 +148,8 @@ const TotalPrice = ({
 			);
 			const marketplaceFeePercentage =
 				marketCollection?.feePercentage ?? DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
-			const quantity = BigInt(quantityStr);
-			const totalPriceRaw = BigInt(order ? order.priceAmount : '0') * quantity;
+			const totalPriceRaw =
+				BigInt(order ? order.priceAmount : '0') * quantityForCalculation;
 
 			formattedPrice = formatPriceWithFee(
 				totalPriceRaw,
@@ -138,7 +163,7 @@ const TotalPrice = ({
 	}
 
 	if (isShop && salePrice && currency) {
-		const totalPriceRaw = BigInt(salePrice.amount) * quantity;
+		const totalPriceRaw = BigInt(salePrice.amount) * quantityForCalculation;
 		formattedPrice = formatPriceWithFee(
 			totalPriceRaw,
 			currency.decimals,

package/src/react/ui/modals/BuyModal/components/ERC1155ShopModal.tsx

@@ -37,6 +37,8 @@ export const ERC1155ShopModal = ({
 		isShop && modalProps.quantityRemaining
 			? modalProps.quantityRemaining.toString()
 			: '0';
+	const unlimitedSupply =
+		isShop && modalProps.unlimitedSupply ? modalProps.unlimitedSupply : false;
 
 	if (!quantity) {
 		return (
@@ -49,6 +51,7 @@ export const ERC1155ShopModal = ({
 				marketplaceType="shop"
 				quantityDecimals={quantityDecimals}
 				quantityRemaining={quantityRemaining}
+				unlimitedSupply={unlimitedSupply}
 				chainId={chainId}
 			/>
 		);

package/src/react/ui/modals/BuyModal/components/ERC721BuyModal.tsx

@@ -6,8 +6,8 @@ import {
 } from '@0xsequence/checkout';
 import type { ContractInfo, TokenMetadata } from '@0xsequence/metadata';
 import { useEffect } from 'react';
+import type { Address } from 'viem';
 import type { CheckoutOptions, Order } from '../../../../_internal';
-import type { WalletInstance } from '../../../../_internal/wallet/wallet';
 import { usePaymentModalParams } from '../hooks/usePaymentModalParams';
 import { buyModalStore, usePaymentModalState, useQuantity } from '../store';
 
@@ -15,7 +15,7 @@ interface ERC721BuyModalProps {
 	collection: ContractInfo;
 	collectable: TokenMetadata;
 	order: Order;
-	wallet: WalletInstance | null | undefined;
+	address: Address | undefined;
 	checkoutOptions: CheckoutOptions | undefined;
 	chainId: number;
 }
@@ -23,7 +23,7 @@ interface ERC721BuyModalProps {
 export const ERC721BuyModal = ({
 	collectable,
 	order,
-	wallet,
+	address,
 	checkoutOptions,
 }: ERC721BuyModalProps) => {
 	const quantity = useQuantity();
@@ -40,7 +40,7 @@ export const ERC721BuyModal = ({
 		isLoading: isPaymentModalParamsLoading,
 		isError: isPaymentModalParamsError,
 	} = usePaymentModalParams({
-		wallet,
+		address,
 		quantity: quantity ?? undefined,
 		marketplace: order?.marketplace,
 		collectable,

package/src/react/ui/modals/BuyModal/hooks/__tests__/useCheckoutOptions.test.tsx

@@ -2,22 +2,23 @@ import { renderHook, server, waitFor } from '@test';
 import { HttpResponse, http } from 'msw';
 import { zeroAddress } from 'viem';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { createMockWallet } from '../../../../../../../test/mocks/wallet';
 import { MarketplaceKind } from '../../../../../_internal';
 import { mockMarketplaceEndpoint } from '../../../../../_internal/api/__mocks__/marketplace.msw';
 import { TransactionCrypto } from '../../../../../_internal/api/marketplace.gen';
-import { useWallet } from '../../../../../_internal/wallet/useWallet';
 import { useCheckoutOptions } from '../useCheckoutOptions';
 import { useMarketPlatformFee } from '../useMarketPlatformFee';
 
 // Mock dependencies
-vi.mock('../../../../../_internal/wallet/useWallet');
-vi.mock('../useMarketPlatformFee');
-
-// Create mock wallet instance
-const mockWallet = createMockWallet({
-	address: vi.fn().mockResolvedValue(zeroAddress),
+vi.mock('wagmi', async () => {
+	const actual = await vi.importActual('wagmi');
+	return {
+		...actual,
+		useAccount: vi.fn(() => ({
+			address: zeroAddress,
+		})),
+	};
 });
+vi.mock('../useMarketPlatformFee');
 
 describe('useCheckoutOptions', () => {
 	const defaultInput = {
@@ -30,13 +31,6 @@ describe('useCheckoutOptions', () => {
 	beforeEach(() => {
 		vi.clearAllMocks();
 
-		// Set up default wallet mock
-		vi.mocked(useWallet).mockReturnValue({
-			wallet: mockWallet,
-			isLoading: false,
-			isError: false,
-		});
-
 		// Set up default fees mock
 		vi.mocked(useMarketPlatformFee).mockReturnValue({
 			amount: '100000000000000000',
@@ -105,23 +99,17 @@ describe('useCheckoutOptions', () => {
 		expect(result.current.data).toBeUndefined();
 	});
 
-	it('should handle wallet address resolution failure', async () => {
-		const mockWalletWithFailure = createMockWallet({
-			address: vi.fn().mockRejectedValue(new Error('Failed to get address')),
-		});
-
-		vi.mocked(useWallet).mockReturnValue({
-			wallet: mockWalletWithFailure,
-			isLoading: false,
-			isError: false,
-		});
+	it('should not fetch when wallet is not connected', async () => {
+		const { useAccount } = vi.mocked(await import('wagmi'));
+		useAccount.mockReturnValue({
+			address: undefined,
+		} as any);
 
 		const { result } = renderHook(() => useCheckoutOptions(defaultInput));
 
-		await waitFor(() => {
-			expect(result.current.isError).toBe(true);
-		});
-
-		expect(result.current.error).toBeDefined();
+		// Should not be loading or have data when no wallet is connected
+		expect(result.current.isLoading).toBe(false);
+		expect(result.current.data).toBeUndefined();
+		expect(result.current.isError).toBe(false);
 	});
 });

package/src/react/ui/modals/BuyModal/hooks/__tests__/useERC1155Checkout.test.tsx

@@ -32,6 +32,20 @@ vi.mock('../../store', () => ({
 	useQuantity: vi.fn(() => 2),
 	useOnSuccess: vi.fn(() => vi.fn()),
 	useOnError: vi.fn(() => vi.fn()),
+	useBuyAnalyticsId: vi.fn(() => '123'),
+	useBuyModalProps: vi.fn(() => ({
+		chainId: 1,
+		collectionAddress: '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd',
+		marketplaceType: 'shop',
+		salesContractAddress: '0x1234567890123456789012345678901234567890',
+		items: [],
+		quantityDecimals: 0,
+		quantityRemaining: 100,
+		salePrice: {
+			amount: '1000000000000000000',
+			currencyAddress: '0x0000000000000000000000000000000000000000',
+		},
+	})),
 	buyModalStore: {
 		send: vi.fn(),
 	},
@@ -87,36 +101,38 @@ describe('useERC1155Checkout', () => {
 		expect(
 			mockUseERC1155SaleContractCheckout.mock.calls,
 		).toMatchInlineSnapshot(`
-      [
         [
-          {
-            "chain": 1,
-            "checkoutOptions": {
-              "crypto": "all",
-              "nftCheckout": [],
-              "onRamp": [],
-              "swap": [],
-            },
-            "collectionAddress": "0x123",
-            "contractAddress": "0x456",
-            "customProviderCallback": undefined,
-            "items": [
-              {
-                "quantity": "2",
-                "tokenId": "1",
+          [
+            {
+              "chain": 1,
+              "checkoutOptions": {
+                "crypto": "all",
+                "nftCheckout": [],
+                "onRamp": [],
+                "swap": [],
+              },
+              "collectionAddress": "0x123",
+              "contractAddress": "0x456",
+              "customProviderCallback": undefined,
+              "items": [
+                {
+                  "quantity": "2",
+                  "tokenId": "1",
+                },
+              ],
+              "onClose": [Function],
+              "onError": [Function],
+              "onSuccess": [Function],
+              "successActionButtons": undefined,
+              "supplementaryAnalyticsInfo": {
+                "marketplaceType": "shop",
+                "saleAnalyticsId": "123",
               },
-            ],
-            "onClose": [Function],
-            "onError": [Function],
-            "onSuccess": [Function],
-            "supplementaryAnalyticsInfo": {
-              "type": "mint_shop",
+              "wallet": "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
             },
-            "wallet": "0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266",
-          },
-        ],
-      ]
-    `);
+          ],
+        ]
+      `);
 
 		expect(result.current.isEnabled).toBe(true);
 	});

package/src/react/ui/modals/BuyModal/hooks/__tests__/useERC721SalePaymentParams.test.tsx

@@ -21,6 +21,19 @@ vi.mock('wagmi', async () => {
 vi.mock('../../store', () => ({
 	useOnSuccess: vi.fn(() => vi.fn()),
 	useOnError: vi.fn(() => vi.fn()),
+	useBuyModalProps: vi.fn(() => ({
+		chainId: 1,
+		collectionAddress: '0xabcdefabcdefabcdefabcdefabcdefabcdefabcd',
+		marketplaceType: 'shop',
+		salesContractAddress: '0x1234567890123456789012345678901234567890',
+		items: [],
+		quantityDecimals: 0,
+		quantityRemaining: 100,
+		salePrice: {
+			amount: '1000000000000000000',
+			currencyAddress: '0x0000000000000000000000000000000000000000',
+		},
+	})),
 }));
 
 const mockSalesContractAddress = '0x1234567890123456789012345678901234567890';
@@ -63,8 +76,6 @@ describe('getERC721SalePaymentParams', () => {
 			targetContractAddress: mockSalesContractAddress,
 			collectionAddress: mockCollectionAddress,
 			recipientAddress: '0xf39Fd6e51aad88F6F4ce6aB8827279cffFb92266',
-			enableMainCurrencyPayment: true,
-			enableSwapPayments: true,
 			creditCardProviders: [],
 		});
 

package/src/react/ui/modals/BuyModal/hooks/useCheckoutOptions.ts

@@ -1,16 +1,16 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
+import { useAccount } from 'wagmi';
 import {
 	getMarketplaceClient,
 	type MarketplaceKind,
 } from '../../../../_internal';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useConfig } from '../../../../hooks';
 import { useMarketPlatformFee } from './useMarketPlatformFee';
 
 export type CheckoutOptionsParams = {
 	chainId: number;
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	orderId: string;
 	marketplace: MarketplaceKind;
 };
@@ -19,7 +19,7 @@ export const useCheckoutOptions = (
 	input: CheckoutOptionsParams | typeof skipToken,
 ) => {
 	const config = useConfig();
-	const { wallet } = useWallet();
+	const { address } = useAccount();
 
 	// If input is skipToken, we don't want to calculate fees
 	const fees = useMarketPlatformFee(
@@ -43,13 +43,13 @@ export const useCheckoutOptions = (
 					]
 				: ['checkoutOptions', 'skip'],
 		queryFn:
-			wallet && input !== skipToken
+			address && input !== skipToken
 				? async () => {
 						const marketplaceClient = getMarketplaceClient(config);
 						const response = await marketplaceClient.checkoutOptionsMarketplace(
 							{
 								chainId: String(input.chainId),
-								wallet: await wallet.address(),
+								wallet: address,
 								orders: [
 									{
 										contractAddress: input.collectionAddress,
@@ -81,6 +81,6 @@ export const useCheckoutOptions = (
 						};
 					}
 				: skipToken,
-		enabled: !!wallet && input !== skipToken,
+		enabled: !!address && input !== skipToken,
 	});
 };

package/src/react/ui/modals/BuyModal/hooks/useERC1155Checkout.ts

@@ -6,7 +6,14 @@ import type {
 	CheckoutOptionsItem,
 } from '../../../../_internal';
 import { getQueryClient } from '../../../../_internal';
-import { buyModalStore, useOnError, useOnSuccess, useQuantity } from '../store';
+import {
+	buyModalStore,
+	useBuyAnalyticsId,
+	useBuyModalProps,
+	useOnError,
+	useOnSuccess,
+	useQuantity,
+} from '../store';
 
 interface UseERC1155CheckoutParams {
 	chainId: number;
@@ -35,6 +42,9 @@ export const useERC1155Checkout = ({
 	const quantity = useQuantity();
 	const onSuccess = useOnSuccess();
 	const onError = useOnError();
+	const saleAnalyticsId = useBuyAnalyticsId();
+
+	const buyModalProps = useBuyModalProps();
 
 	const checkout = useERC1155SaleContractCheckout({
 		chain: chainId,
@@ -57,13 +67,17 @@ export const useERC1155Checkout = ({
 		},
 		onClose: () => {
 			const queryClient = getQueryClient();
-			queryClient.invalidateQueries();
+			queryClient.invalidateQueries({
+				predicate: (query) => !query.meta?.persistent,
+			});
 			buyModalStore.send({ type: 'close' });
 		},
 		customProviderCallback,
 		supplementaryAnalyticsInfo: {
-			type: 'mint_shop',
+			marketplaceType: 'shop',
+			saleAnalyticsId,
 		},
+		successActionButtons: buyModalProps.successActionButtons,
 	});
 
 	return {

package/src/react/ui/modals/BuyModal/hooks/useERC721SalePaymentParams.ts

@@ -9,10 +9,15 @@ import {
 } from 'viem';
 import { useAccount } from 'wagmi';
 import { BuyModalErrorFactory } from '../../../../../types/buyModalErrors';
-import { ERC721_SALE_ABI } from '../../../../../utils/abi/primary-sale/sequence-721-sales-contract';
+import { ERC721_SALE_ABI_V0 } from '../../../../../utils/abi';
 import { getQueryClient } from '../../../../_internal';
-import type { ModalCallbacks } from '../../_internal/types';
-import { buyModalStore, useOnError, useOnSuccess } from '../store';
+import type { ActionButton, ModalCallbacks } from '../../_internal/types';
+import {
+	buyModalStore,
+	useBuyModalProps,
+	useOnError,
+	useOnSuccess,
+} from '../store';
 
 interface ERC721MintArgs {
 	to: Address;
@@ -34,7 +39,8 @@ const encodeERC721MintData = ({
 	const totalPrice = price * amount;
 
 	return encodeFunctionData({
-		abi: ERC721_SALE_ABI,
+		// We get away with using V0 ABI because the mint functions are identical on V0 and V1
+		abi: ERC721_SALE_ABI_V0,
 		functionName: 'mint',
 		args: [to, amount, paymentToken, totalPrice, proof],
 	});
@@ -53,6 +59,7 @@ interface GetERC721SalePaymentParams {
 	nativeTokenAddress: string | undefined;
 	checkoutProvider?: string;
 	quantity: number;
+	successActionButtons?: ActionButton[];
 }
 
 export const getERC721SalePaymentParams = async ({
@@ -68,6 +75,7 @@ export const getERC721SalePaymentParams = async ({
 	nativeTokenAddress,
 	checkoutProvider,
 	quantity,
+	successActionButtons,
 }: GetERC721SalePaymentParams) => {
 	try {
 		const purchaseTransactionData = encodeERC721MintData({
@@ -98,8 +106,6 @@ export const getERC721SalePaymentParams = async ({
 			txData: purchaseTransactionData,
 			collectionAddress,
 			recipientAddress: address,
-			enableMainCurrencyPayment: true,
-			enableSwapPayments: true,
 			creditCardProviders,
 			onSuccess: (hash: string) => {
 				callbacks?.onSuccess?.({ hash: hash as Hash });
@@ -107,12 +113,14 @@ export const getERC721SalePaymentParams = async ({
 			onError: callbacks?.onError,
 			onClose: () => {
 				const queryClient = getQueryClient();
-				queryClient.invalidateQueries();
+				queryClient.invalidateQueries({
+					predicate: (query) => !query.meta?.persistent,
+				});
 				buyModalStore.send({ type: 'close' });
 			},
 			skipNativeBalanceCheck,
 			supplementaryAnalyticsInfo: {
-				type: 'mint_shop',
+				marketplaceType: 'shop',
 			},
 			nativeTokenAddress,
 			...(customCreditCardProviderCallback && {
@@ -121,6 +129,7 @@ export const getERC721SalePaymentParams = async ({
 					buyModalStore.send({ type: 'close' });
 				},
 			}),
+			successActionButtons,
 		} satisfies SelectPaymentSettings;
 	} catch (error) {
 		// Convert to structured error for better debugging
@@ -160,6 +169,7 @@ export const useERC721SalePaymentParams = (
 	const { address } = useAccount();
 	const onSuccess = useOnSuccess();
 	const onError = useOnError();
+	const buyModalProps = useBuyModalProps();
 
 	const queryEnabled =
 		enabled &&
@@ -190,6 +200,7 @@ export const useERC721SalePaymentParams = (
 
 						checkoutProvider,
 						quantity,
+						successActionButtons: buyModalProps.successActionButtons,
 					})
 			: skipToken,
 	});

package/src/react/ui/modals/BuyModal/hooks/useLoadData.ts

@@ -1,5 +1,5 @@
 import { skipToken } from '@tanstack/react-query';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
+import { useAccount } from 'wagmi';
 import {
 	useCheckoutOptionsSalesContract,
 	useCollectible,
@@ -17,11 +17,8 @@ export const useLoadData = () => {
 	const isShop = isShopProps(props);
 	const collectibleId = isMarket ? props.collectibleId : undefined;
 
-	const {
-		wallet,
-		isLoading: walletLoading,
-		isError: walletError,
-	} = useWallet();
+	const { address, isConnecting, isReconnecting } = useAccount();
+	const walletIsLoading = isConnecting || isReconnecting;
 
 	const {
 		data: collection,
@@ -105,16 +102,15 @@ export const useLoadData = () => {
 		currency,
 		order: marketplaceCheckoutOptions?.order,
 		checkoutOptions: marketplaceCheckoutOptions,
-		wallet,
+		address,
 		shopData,
 		isLoading:
 			collectionLoading ||
 			collectableLoading ||
 			(isMarket && marketplaceCheckoutOptionsLoading) ||
 			(isShop && (currencyLoading || salesContractCheckoutOptionsLoading)) ||
-			walletLoading,
+			walletIsLoading,
 		isError:
-			walletError ||
 			collectionError ||
 			collectableError ||
 			currencyError ||