@0xsequence/marketplace-sdk 0.8.1 → 0.8.3

package/src/react/hooks/__tests__/useGenerateListingTransaction.test.tsx

@@ -50,8 +50,12 @@ describe('useGenerateListingTransaction', () => {
 			  [
 			    {
 			      "data": "0x...",
-			      "executeType": "order",
 			      "id": "tokenApproval",
+			      "post": {
+			        "body": {},
+			        "endpoint": "/api/order",
+			        "method": "POST",
+			      },
 			      "price": "0",
 			      "to": "0x1234567890123456789012345678901234567890",
 			      "value": "0",
@@ -91,8 +95,12 @@ describe('useGenerateListingTransaction', () => {
 			  [
 			    {
 			      "data": "0x...",
-			      "executeType": "order",
 			      "id": "tokenApproval",
+			      "post": {
+			        "body": {},
+			        "endpoint": "/api/order",
+			        "method": "POST",
+			      },
 			      "price": "0",
 			      "to": "0x1234567890123456789012345678901234567890",
 			      "value": "0",

package/src/react/hooks/__tests__/useGenerateOfferTransaction.test.tsx

@@ -49,8 +49,12 @@ describe('useGenerateOfferTransaction', () => {
 			  [
 			    {
 			      "data": "0x...",
-			      "executeType": "order",
 			      "id": "tokenApproval",
+			      "post": {
+			        "body": {},
+			        "endpoint": "/api/order",
+			        "method": "POST",
+			      },
 			      "price": "0",
 			      "to": "0x1234567890123456789012345678901234567890",
 			      "value": "0",
@@ -89,8 +93,12 @@ describe('useGenerateOfferTransaction', () => {
 			  [
 			    {
 			      "data": "0x...",
-			      "executeType": "order",
 			      "id": "tokenApproval",
+			      "post": {
+			        "body": {},
+			        "endpoint": "/api/order",
+			        "method": "POST",
+			      },
 			      "price": "0",
 			      "to": "0x1234567890123456789012345678901234567890",
 			      "value": "0",

package/src/react/hooks/__tests__/useGenerateSellTransaction.test.tsx

@@ -52,8 +52,12 @@ describe('useGenerateSellTransaction', () => {
 			  [
 			    {
 			      "data": "0x...",
-			      "executeType": "order",
 			      "id": "tokenApproval",
+			      "post": {
+			        "body": {},
+			        "endpoint": "/api/order",
+			        "method": "POST",
+			      },
 			      "price": "0",
 			      "to": "0x1234567890123456789012345678901234567890",
 			      "value": "0",

package/src/react/hooks/__tests__/useHighestOffer.test.tsx

@@ -4,17 +4,16 @@ import { zeroAddress } from 'viem';
 import { describe, expect, it } from 'vitest';
 import {
 	mockMarketplaceEndpoint,
-	mockOrderBigInt,
+	mockOrder,
 } from '../../_internal/api/__mocks__/marketplace.msw';
-import type { UseHighestOfferArgs } from '../useHighestOffer';
+import type { UseHighestOfferArgs } from '../../queries/highestOffer';
 import { useHighestOffer } from '../useHighestOffer';
 
 describe('useHighestOffer', () => {
 	const defaultArgs: UseHighestOfferArgs = {
-		chainId: 1,
+		chainId: mockOrder.chainId,
 		collectionAddress: zeroAddress,
-		tokenId: '1',
-		query: {},
+		tokenId: mockOrder.tokenId ?? '1',
 	};
 
 	it('should fetch highest offer data successfully', async () => {
@@ -30,7 +29,7 @@ describe('useHighestOffer', () => {
 		});
 
 		// Verify the data matches our mock with BigInt values
-		expect(result.current.data).toEqual(mockOrderBigInt);
+		expect(result.current.data).toEqual(mockOrder);
 		expect(result.current.error).toBeNull();
 	});
 
@@ -78,8 +77,8 @@ describe('useHighestOffer', () => {
 			expect(result.current.data).toBeDefined();
 		});
 
-		// Verify that the query was refetched with new args using BigInt values
-		expect(result.current.data).toEqual(mockOrderBigInt);
+		// Verify that the query was refetched with new args using string values
+		expect(result.current.data).toEqual(mockOrder);
 		expect(result.current.isSuccess).toBe(true);
 	});
 

package/src/react/hooks/__tests__/useLowestListing.test.tsx

@@ -14,7 +14,6 @@ describe('useLowestListing', () => {
 		chainId: 1,
 		collectionAddress: zeroAddress as `0x${string}`,
 		tokenId: '1',
-		query: {},
 	};
 
 	it('should fetch lowest listing data successfully', async () => {
@@ -31,7 +30,7 @@ describe('useLowestListing', () => {
 
 		// Verify the data matches our mock
 		expect(result.current.data).toBeDefined();
-		expect(result.current.data?.order).toEqual(mockOrder);
+		expect(result.current.data).toEqual(mockOrder);
 		expect(result.current.error).toBeNull();
 	});
 
@@ -82,7 +81,7 @@ describe('useLowestListing', () => {
 		});
 
 		// Verify that the query was refetched with new args
-		expect(result.current.data?.order).toEqual(mockOrder);
+		expect(result.current.data).toEqual(mockOrder);
 		expect(result.current.isSuccess).toBe(true);
 	});
 
@@ -103,7 +102,7 @@ describe('useLowestListing', () => {
 			expect(result.current.isLoading).toBe(false);
 		});
 
-		expect(result.current.data?.order).toEqual(mockOrder);
+		expect(result.current.data).toEqual(mockOrder);
 		expect(result.current.isSuccess).toBe(true);
 	});
 
@@ -123,7 +122,7 @@ describe('useLowestListing', () => {
 			expect(result.current.isLoading).toBe(false);
 		});
 
-		expect(result.current.data?.order).toEqual(mockOrder);
+		expect(result.current.data).toEqual(mockOrder);
 		expect(result.current.isSuccess).toBe(true);
 	});
 

package/src/react/hooks/useCancelTransactionSteps.tsx

@@ -4,7 +4,6 @@ import {
 	WalletInstanceNotFoundError,
 } from '../../utils/_internal/error/transaction';
 import {
-	ExecuteType,
 	type MarketplaceKind,
 	type Step,
 	StepType,
@@ -218,7 +217,8 @@ export const useCancelTransactionSteps = ({
 
 		const result = await marketplaceClient.execute({
 			signature: signature as string,
-			executeType: ExecuteType.order,
+			method: signatureStep.post?.method as string,
+			endpoint: signatureStep.post?.endpoint as string,
 			body: signatureStep.post?.body,
 		});
 

package/src/react/hooks/useHighestOffer.tsx

@@ -1,45 +1,7 @@
 import { useQuery } from '@tanstack/react-query';
-import { highestOfferOptions } from '../queries/highestOffer';
+import { type UseHighestOfferArgs, highestOfferOptions } from '../queries';
 import { useConfig } from './useConfig';
 
-/**
- * Type for the highest offer hook parameters
- * @property {string} collectionAddress - The contract address of the collection
- * @property {string} tokenId - The ID of the specific token
- * @property {string} chainId - The chain ID where the collection exists
- * @property {object} [query] - Optional query configuration parameters
- */
-export type UseHighestOfferArgs = {
-	collectionAddress: string;
-	tokenId: string;
-	chainId: number;
-	query?: {
-		enabled?: boolean;
-		staleTime?: number;
-		gcTime?: number;
-		refetchInterval?: number;
-	};
-};
-
-/**
- * Hook to fetch the highest offer for a specific collectible
- *
- * @param args - The arguments for fetching the highest offer
- * @returns Query result containing the highest offer data
- *
- * @example
- * ```tsx
- * const { data, isLoading, error } = useHighestOffer({
- *   collectionAddress: '0x123...',
- *   tokenId: '1',
- *   chainId: 1,
- *   query: {
- *     enabled: true,
- *     refetchInterval: 10000,
- *   }
- * });
- * ```
- */
 export function useHighestOffer(args: UseHighestOfferArgs) {
 	const config = useConfig();
 	return useQuery(highestOfferOptions(args, config));

package/src/react/hooks/useLowestListing.tsx

@@ -1,55 +1,8 @@
-import { queryOptions, useQuery } from '@tanstack/react-query';
-import { z } from 'zod';
-import type { SdkConfig } from '../../types';
-import {
-	AddressSchema,
-	QueryArgSchema,
-	collectableKeys,
-	getMarketplaceClient,
-} from '../_internal';
-import { getCollectibleLowestListingArgsSchema } from '../_internal/api/zod-schema';
+import { useQuery } from '@tanstack/react-query';
+import { type UseLowestListingArgs, lowestListingOptions } from '../queries';
 import { useConfig } from './useConfig';
 
-const UseLowestListingSchema = getCollectibleLowestListingArgsSchema
-	.omit({
-		contractAddress: true,
-	})
-	.extend({
-		collectionAddress: AddressSchema,
-		chainId: z.number(),
-		query: QueryArgSchema,
-	});
-
-export type UseLowestListingArgs = z.infer<typeof UseLowestListingSchema>;
-
-export type UseLowestListingReturn = Awaited<
-	ReturnType<typeof fetchLowestListing>
->;
-
-const fetchLowestListing = async (
-	args: UseLowestListingArgs,
-	config: SdkConfig,
-) => {
-	const parsedArgs = UseLowestListingSchema.parse(args);
-	const marketplaceClient = getMarketplaceClient(parsedArgs.chainId, config);
-	return marketplaceClient.getCollectibleLowestListing({
-		...parsedArgs,
-		contractAddress: parsedArgs.collectionAddress,
-	});
-};
-
-export const lowestListingOptions = (
-	args: UseLowestListingArgs,
-	config: SdkConfig,
-) => {
-	return queryOptions({
-		...args.query,
-		queryKey: [...collectableKeys.lowestListings, args, config],
-		queryFn: () => fetchLowestListing(args, config),
-	});
-};
-
-export const useLowestListing = (args: UseLowestListingArgs) => {
+export function useLowestListing(args: UseLowestListingArgs) {
 	const config = useConfig();
 	return useQuery(lowestListingOptions(args, config));
-};
+}

package/src/react/queries/highestOffer.ts

@@ -1,27 +1,21 @@
 import { queryOptions } from '@tanstack/react-query';
-import type { UseQueryParameters } from 'wagmi/query';
-import type { Order as APIOrder, SdkConfig } from '../../types';
-import { collectableKeys, getMarketplaceClient } from '../_internal';
+import type { Address } from 'viem';
+import type { SdkConfig } from '../../types';
+import {
+	type GetCollectibleHighestOfferArgs,
+	collectableKeys,
+	getMarketplaceClient,
+} from '../_internal';
 
-export type UseHighestOfferArgs = {
-	collectionAddress: string;
-	tokenId: string;
+export interface UseHighestOfferArgs
+	extends Omit<GetCollectibleHighestOfferArgs, 'contractAddress'> {
+	collectionAddress: Address;
 	chainId: number;
-	query?: UseQueryParameters;
-};
-
-export type Order = Omit<APIOrder, 'priceAmount' | 'priceAmountNet'> & {
-	priceAmount: bigint;
-	priceAmountNet: bigint;
-};
+	query?: {
+		enabled?: boolean;
+	};
+}
 
-/**
- * Fetches the highest offer for a specific collectible
- *
- * @param args - Arguments for the API call
- * @param config - SDK configuration
- * @returns The highest offer data
- */
 export async function fetchHighestOffer(
 	args: UseHighestOfferArgs,
 	config: SdkConfig,
@@ -30,19 +24,19 @@ export async function fetchHighestOffer(
 
 	const data = await marketplaceClient.getCollectibleHighestOffer({
 		contractAddress: args.collectionAddress,
-		tokenId: args.tokenId,
+		...args,
 	});
 
-	let order: Order | undefined;
-	if (data.order) {
-		order = {
-			...data.order,
-			priceAmount: BigInt(data.order.priceAmount),
-			priceAmountNet: BigInt(data.order.priceAmountNet),
-		};
-	}
+	// let order: Order | undefined;
+	// if (data.order) {
+	// 	order = {
+	// 		...data.order,
+	// 		priceAmount: BigInt(data.order.priceAmount),
+	// 		priceAmountNet: BigInt(data.order.priceAmountNet),
+	// 	};
+	// }
 
-	return order ?? null;
+	return data.order ?? null;
 }
 
 /**
@@ -57,6 +51,7 @@ export function highestOfferOptions(
 	config: SdkConfig,
 ) {
 	return queryOptions({
+		enabled: args.query?.enabled ?? true,
 		queryKey: [...collectableKeys.highestOffers, args],
 		queryFn: () => fetchHighestOffer(args, config),
 	});

package/src/react/queries/index.ts

@@ -3,3 +3,4 @@ export * from './getTokenSupplies';
 export * from './listCollectibles';
 export * from './highestOffer';
 export * from './listBalances';
+export * from './lowestListing';

package/src/react/queries/lowestListing.ts

@@ -0,0 +1,52 @@
+import { queryOptions } from '@tanstack/react-query';
+import type { Address } from 'viem';
+import type { SdkConfig } from '../../types';
+import {
+	type GetCollectibleLowestListingArgs,
+	type GetCollectibleLowestListingReturn,
+	collectableKeys,
+	getMarketplaceClient,
+} from '../_internal';
+
+export interface UseLowestListingArgs
+	extends Omit<GetCollectibleLowestListingArgs, 'contractAddress'> {
+	collectionAddress: Address;
+	chainId: number;
+	query?: {
+		enabled?: boolean;
+	};
+}
+
+export async function fetchLowestListing(
+	args: UseLowestListingArgs,
+	config: SdkConfig,
+): Promise<GetCollectibleLowestListingReturn['order'] | null> {
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+
+	const data = await marketplaceClient.getCollectibleLowestListing({
+		contractAddress: args.collectionAddress,
+		...args,
+	});
+
+	// let order: Order | undefined;
+	// if (data.order) {
+	// 	order = {
+	// 		...data.order,
+	// 		priceAmount: BigInt(data.order.priceAmount),
+	// 		priceAmountNet: BigInt(data.order.priceAmountNet),
+	// 	};
+	// }
+
+	return data.order || null;
+}
+
+export function lowestListingOptions(
+	args: UseLowestListingArgs,
+	config: SdkConfig,
+) {
+	return queryOptions({
+		enabled: args.query?.enabled ?? true,
+		queryKey: [...collectableKeys.lowestListings, args],
+		queryFn: () => fetchLowestListing(args, config),
+	});
+}

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

@@ -1,11 +1,11 @@
 'use client';
 
 import { use$, useObservable } from '@legendapp/state/react';
-import * as dn from 'dnum';
 
 import { Text, TokenImage } from '@0xsequence/design-system';
 import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../consts';
 import { compareAddress } from '../../../../utils/address';
+import { formatPriceWithFee } from '../../../../utils/price';
 import type { Order } from '../../../_internal';
 import { useCurrency, useMarketplaceConfig } from '../../../hooks';
 import { ActionModal } from '../_internal/components/actionModal';
@@ -70,21 +70,18 @@ const TotalPrice = ({
 
 	if (currency) {
 		try {
-			const price = dn.from(order.priceAmount, currency.decimals);
-
-			const totalPriceWithoutFees = dn.multiply(quantityStr, price);
 			const marketplaceFeePercentage =
 				marketplaceConfig?.collections.find((collection) =>
 					compareAddress(collection.address, order.collectionContractAddress),
 				)?.feePercentage || DEFAULT_MARKETPLACE_FEE_PERCENTAGE;
+			const quantity = BigInt(quantityStr);
+			const totalPriceRaw = BigInt(order.priceAmount) * quantity;
 
-			const feeMultiplier = dn.from(
-				1 + marketplaceFeePercentage / 100,
+			formattedPrice = formatPriceWithFee(
+				totalPriceRaw,
 				currency.decimals,
+				marketplaceFeePercentage,
 			);
-			const totalPrice = dn.multiply(totalPriceWithoutFees, feeMultiplier);
-
-			formattedPrice = dn.format(totalPrice, { trailingZeros: false });
 		} catch (e) {
 			console.error('Error formatting price', e);
 			error = 'Unable to calculate total price';

package/src/react/ui/modals/BuyModal/Modal.tsx

@@ -1,7 +1,10 @@
 'use client';
 
-import { useSelectPaymentModal } from '@0xsequence/checkout';
-import { useEffect } from 'react';
+import {
+	type SelectPaymentSettings,
+	useSelectPaymentModal,
+} from '@0xsequence/checkout';
+import { useEffect, useRef } from 'react';
 import { ContractType } from '../../../_internal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
@@ -27,11 +30,10 @@ export const BuyModal = () => {
 };
 
 const BuyModalContent = () => {
-	const { chainId, skipNativeBalanceCheck } = useBuyModalProps();
+	const { chainId } = useBuyModalProps();
 
 	const onError = useOnError();
 
-	const { openSelectPaymentModal } = useSelectPaymentModal();
 	const quantity = useQuantity();
 
 	const {
@@ -98,9 +100,25 @@ const BuyModalContent = () => {
 	}
 
 	if (paymentModalParams) {
-		openSelectPaymentModal({
-			...paymentModalParams,
-			skipNativeBalanceCheck,
-		});
+		return <PaymentModalOpener paymentModalParams={paymentModalParams} />;
 	}
 };
+
+const PaymentModalOpener = ({
+	paymentModalParams,
+}: {
+	paymentModalParams: SelectPaymentSettings;
+}) => {
+	const { openSelectPaymentModal } = useSelectPaymentModal();
+	const hasOpenedRef = useRef(false);
+
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+	useEffect(() => {
+		if (!hasOpenedRef.current) {
+			hasOpenedRef.current = true;
+			openSelectPaymentModal(paymentModalParams);
+		}
+	}, []);
+
+	return null;
+};

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

@@ -57,6 +57,7 @@ export const getBuyCollectableParams = async ({
 	collectable,
 	checkoutOptions,
 	fee,
+	skipNativeBalanceCheck,
 }: GetBuyCollectableParams) => {
 	const marketplaceClient = getMarketplaceClient(chainId, config);
 	const { steps } = await marketplaceClient.generateBuyTransaction({
@@ -119,6 +120,7 @@ export const getBuyCollectableParams = async ({
 			queryClient.invalidateQueries();
 			buyModalStore.send({ type: 'close' });
 		},
+		skipNativeBalanceCheck,
 		...(customCreditCardProviderCallback && {
 			customProviderCallback: () => {
 				customCreditCardProviderCallback(buyStep);
@@ -147,6 +149,7 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 		quantity,
 	} = args;
 
+	const buyModalProps = useBuyModalProps();
 	const {
 		chainId,
 		collectionAddress,
@@ -154,7 +157,8 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 		orderId,
 		customCreditCardProviderCallback,
 		skipNativeBalanceCheck,
-	} = useBuyModalProps();
+	} = buyModalProps;
+
 	const config = useConfig();
 	const fee = useFees({
 		chainId,
@@ -172,7 +176,7 @@ export const usePaymentModalParams = (args: usePaymentModalParams) => {
 		!!quantity;
 
 	return useQuery({
-		queryKey: ['buyCollectableParams', args, quantity, fee],
+		queryKey: ['buyCollectableParams', buyModalProps, args, fee],
 		queryFn: enabled
 			? () =>
 					getBuyCollectableParams({

package/src/react/ui/modals/CreateListingModal/hooks/useTransactionSteps.tsx

@@ -2,7 +2,6 @@ import type { Observable } from '@legendapp/state';
 import { type Address, type Hex, formatUnits } from 'viem';
 import type { OrderbookKind, Price } from '../../../../../types';
 import {
-	ExecuteType,
 	type Step,
 	StepType,
 	type TransactionSteps,
@@ -249,7 +248,8 @@ export const useTransactionSteps = ({
 
 		const result = await marketplaceClient.execute({
 			signature: signature as string,
-			executeType: ExecuteType.order,
+			method: signatureStep.post?.method as string,
+			endpoint: signatureStep.post?.endpoint as string,
 			body: signatureStep.post?.body,
 		});
 

package/src/react/ui/modals/MakeOfferModal/Modal.tsx

@@ -118,7 +118,7 @@ const Modal = observer(() => {
 		tokenId: collectibleId,
 		chainId,
 		collectionAddress,
-		filters: {
+		filter: {
 			currencies: [offerPrice.currency.contractAddress],
 		},
 	});
@@ -256,13 +256,13 @@ const Modal = observer(() => {
 							onBuyNow={() => {
 								makeOfferModal$.close();
 
-								if (lowestListing?.order) {
+								if (lowestListing) {
 									buyModal.show({
 										chainId,
 										collectionAddress,
 										collectibleId,
-										orderId: lowestListing.order.orderId,
-										marketplace: lowestListing.order.marketplace,
+										orderId: lowestListing.orderId,
+										marketplace: lowestListing.marketplace,
 									});
 								}
 							}}

package/src/react/ui/modals/MakeOfferModal/hooks/useTransactionSteps.tsx

@@ -2,7 +2,6 @@ import type { Observable } from '@legendapp/state';
 import { type Address, type Hex, formatUnits } from 'viem';
 import { OrderbookKind, type Price } from '../../../../../types';
 import {
-	ExecuteType,
 	type Step,
 	StepType,
 	type TransactionSteps,
@@ -242,7 +241,8 @@ export const useTransactionSteps = ({
 
 		const result = await marketplaceClient.execute({
 			signature: signature as string,
-			executeType: ExecuteType.order,
+			method: signatureStep.post?.method as string,
+			endpoint: signatureStep.post?.endpoint as string,
 			body: signatureStep.post?.body,
 		});
 

package/src/react/ui/modals/SellModal/hooks/useTransactionSteps.tsx

@@ -2,7 +2,6 @@ import type { Observable } from '@legendapp/state';
 import { formatUnits } from 'viem';
 import type { Address, Hex } from 'viem';
 import {
-	ExecuteType,
 	type MarketplaceKind,
 	type Step,
 	StepType,
@@ -246,7 +245,8 @@ export const useTransactionSteps = ({
 
 		const result = await marketplaceClient.execute({
 			signature: signature as string,
-			executeType: ExecuteType.order,
+			method: signatureStep.post?.method as string,
+			endpoint: signatureStep.post?.endpoint as string,
 			body: signatureStep.post?.body,
 		});
 

package/src/react/ui/modals/_internal/components/actionModal/ActionModal.tsx

@@ -77,11 +77,7 @@ export const ActionModal = observer(
 				disableAnimation={disableAnimation}
 			>
 				<div className="relative flex grow flex-col items-center gap-4 p-6">
-					<Text
-						className="w-full text-center font-body text-large"
-						fontWeight="bold"
-						color="text100"
-					>
+					<Text className="w-full text-center font-body font-bold text-large text-text-100">
 						{title}
 					</Text>