@0xsequence/marketplace-sdk 0.3.0 → 0.3.1

package/src/react/hooks/useCancelOrder.tsx

@@ -0,0 +1,38 @@
+import {
+	type CancelInput,
+	TransactionType,
+} from '../_internal/transaction-machine/execute-transaction';
+import {
+	useTransactionMachine,
+	type UseTransactionMachineConfig,
+} from '../_internal/transaction-machine/useTransactionMachine';
+
+interface UseCancelOrderArgs extends Omit<UseTransactionMachineConfig, 'type'> {
+	onSuccess?: (hash: string) => void;
+	onError?: (error: Error) => void;
+	onTransactionSent?: (hash: string) => void;
+}
+
+export const useCancelOrder = ({
+	onSuccess,
+	onError,
+	onTransactionSent,
+	...config
+}: UseCancelOrderArgs) => {
+	const machine = useTransactionMachine(
+		{
+			...config,
+			type: TransactionType.CANCEL,
+		},
+		onSuccess,
+		onError,
+		onTransactionSent,
+	);
+
+	return {
+		cancel: (props: CancelInput) => machine?.start({ props }),
+		onError,
+		onSuccess,
+		onTransactionSent,
+	};
+};

package/src/react/hooks/useCheckoutOptions.tsx

@@ -9,15 +9,15 @@ import {
 	getMarketplaceClient,
 } from '../_internal';
 import { useConfig } from './useConfig';
+import { useAccount } from 'wagmi';
+import type { Hex } from 'viem';
 
 const UseCheckoutOptionsSchema = z.object({
 	chainId: ChainIdSchema.pipe(z.coerce.string()),
-	walletAddress: AddressSchema,
 	orders: z.array(
 		z.object({
 			collectionAddress: AddressSchema,
 			orderId: z.string(),
-			quantity: z.number(),
 			marketplace: z.nativeEnum(MarketplaceKind),
 		}),
 	),
@@ -31,7 +31,7 @@ export type UseCheckoutOptionsReturn = Awaited<
 >;
 
 const fetchCheckoutOptions = async (
-	args: UseCheckoutOptionsArgs,
+	args: UseCheckoutOptionsArgs & { walletAddress: Hex },
 	config: SdkConfig,
 ) => {
 	const marketplaceClient = getMarketplaceClient(args.chainId, config);
@@ -41,14 +41,13 @@ const fetchCheckoutOptions = async (
 			contractAddress: order.collectionAddress,
 			orderId: order.orderId,
 			marketplace: order.marketplace,
-			quantity: order.quantity,
 		})),
 		additionalFee: 0, //TODO: add additional fee
 	});
 };
 
 export const checkoutOptionsOptions = (
-	args: UseCheckoutOptionsArgs,
+	args: UseCheckoutOptionsArgs & { walletAddress: Hex },
 	config: SdkConfig,
 ) => {
 	return queryOptions({
@@ -58,6 +57,10 @@ export const checkoutOptionsOptions = (
 };
 
 export const useCheckoutOptions = (args: UseCheckoutOptionsArgs) => {
+	const { address } = useAccount();
 	const config = useConfig();
-	return useQuery(checkoutOptionsOptions(args, config));
+	return useQuery(
+		// biome-ignore lint/style/noNonNullAssertion: <explanation>
+		checkoutOptionsOptions({ walletAddress: address!, ...args }, config),
+	);
 };

package/src/react/hooks/useCreateListing.tsx

@@ -0,0 +1,65 @@
+import { useState, useCallback } from 'react';
+import type { Hash } from 'viem';
+import {
+	type ListingInput,
+	TransactionType,
+	type TransactionSteps,
+} from '../_internal/transaction-machine/execute-transaction';
+import {
+	useTransactionMachine,
+	type UseTransactionMachineConfig,
+} from '../_internal/transaction-machine/useTransactionMachine';
+
+interface UseCreateListingArgs
+	extends Omit<UseTransactionMachineConfig, 'type'> {
+	onSuccess?: (hash: Hash) => void;
+	onError?: (error: Error) => void;
+	onTransactionSent?: (hash: Hash) => void;
+}
+
+export const useCreateListing = ({
+	onSuccess,
+	onError,
+	onTransactionSent,
+	...config
+}: UseCreateListingArgs) => {
+	const [isLoading, setIsLoading] = useState(false);
+	const [steps, setSteps] = useState<TransactionSteps | null>(null);
+
+	const machine = useTransactionMachine(
+		{
+			...config,
+			type: TransactionType.LISTING,
+		},
+		onSuccess,
+		onError,
+		onTransactionSent,
+	);
+
+	const loadSteps = useCallback(
+		async (props: ListingInput) => {
+			if (!machine) return;
+			setIsLoading(true);
+			try {
+				const generatedSteps = await machine.getTransactionSteps(props);
+				setSteps(generatedSteps);
+			} catch (error) {
+				onError?.(error as Error);
+			} finally {
+				setIsLoading(false);
+			}
+		},
+		[machine, onError],
+	);
+
+	return {
+		createListing: (props: ListingInput) => machine?.start({ props }),
+		getListingSteps: (props: ListingInput) => ({
+			isLoading,
+			steps,
+			refreshSteps: () => loadSteps(props),
+		}),
+		onError,
+		onSuccess,
+	};
+};

package/src/react/hooks/useGenerateBuyTransaction.tsx

@@ -0,0 +1,71 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
+import {
+	AddressSchema,
+	ChainIdSchema,
+	getMarketplaceClient,
+	MarketplaceKind,
+	QueryArgSchema,
+	WalletKind,
+} from '../_internal';
+import { useConfig } from './useConfig';
+import { useAccount } from 'wagmi';
+import type { Hex } from 'viem';
+
+export const UseGenerateBuyTransactionArgsSchema = z.object({
+	chainId: ChainIdSchema.pipe(z.coerce.string()),
+	collectionAddress: AddressSchema,
+	marketplace: z.nativeEnum(MarketplaceKind),
+	ordersData: z.array(
+		z.object({
+			orderId: z.string(),
+			quantity: z.string(),
+			marketplace: z.string(),
+		}),
+	),
+	walletType: z.nativeEnum(WalletKind).optional(),
+	query: QueryArgSchema,
+});
+
+type UseGenerateBuyTransactionArgs = z.infer<
+	typeof UseGenerateBuyTransactionArgsSchema
+>;
+
+export const fetchGenerateBuyTransaction = async (
+	args: UseGenerateBuyTransactionArgs & { buyer: Hex },
+	config: SdkConfig,
+) => {
+	const parsedArgs = UseGenerateBuyTransactionArgsSchema.parse(args);
+	const marketplaceClient = getMarketplaceClient(parsedArgs.chainId, config);
+
+	return marketplaceClient
+		.generateBuyTransaction({
+			...parsedArgs,
+			buyer: args.buyer,
+			additionalFees: [], // TODO: Add additional fees
+		})
+		.then((data) => data.steps);
+};
+
+export const generateBuyTransactionOptions = (
+	args: UseGenerateBuyTransactionArgs & { buyer: Hex },
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		queryKey: ['generateBuyTransaction', args],
+		queryFn: () => fetchGenerateBuyTransaction(args, config),
+		...args.query,
+	});
+};
+
+export const useGenerateBuyTransaction = (
+	args: UseGenerateBuyTransactionArgs,
+) => {
+	const { address } = useAccount();
+	const config = useConfig();
+	return useQuery(
+		// biome-ignore lint/style/noNonNullAssertion: <explanation>
+		generateBuyTransactionOptions({ buyer: address!, ...args }, config),
+	);
+};

package/src/react/hooks/useListListingsForCollectible.tsx

@@ -47,7 +47,7 @@ export const listListingsForCollectibleOptions = (
 	config: SdkConfig,
 ) => {
 	return queryOptions({
-		queryKey: [...collectableKeys.offers, args, config],
+		queryKey: [...collectableKeys.listings, args, config],
 		queryFn: () => fetchListListingsForCollectible(config, args),
 	});
 };

package/src/react/hooks/useMakeOffer.tsx

@@ -0,0 +1,62 @@
+import { useState, useCallback } from 'react';
+import type { Hash } from 'viem';
+import {
+	type OfferInput,
+	TransactionType,
+	type TransactionSteps,
+} from '../_internal/transaction-machine/execute-transaction';
+import {
+	useTransactionMachine,
+	type UseTransactionMachineConfig,
+} from '../_internal/transaction-machine/useTransactionMachine';
+
+interface UseMakeOfferArgs extends Omit<UseTransactionMachineConfig, 'type'> {
+	onSuccess?: (hash: Hash) => void;
+	onError?: (error: Error) => void;
+	onTransactionSent?: (hash: Hash) => void;
+}
+
+export const useMakeOffer = ({
+	onSuccess,
+	onError,
+	onTransactionSent,
+	...config
+}: UseMakeOfferArgs) => {
+	const [isLoading, setIsLoading] = useState(false);
+	const [steps, setSteps] = useState<TransactionSteps | null>(null);
+
+	const machine = useTransactionMachine(
+		{
+			...config,
+			type: TransactionType.OFFER,
+		},
+		onSuccess,
+		onError,
+		onTransactionSent,
+	);
+
+	const loadSteps = useCallback(
+		async (props: OfferInput) => {
+			if (!machine) return;
+			setIsLoading(true);
+			try {
+				const generatedSteps = await machine.getTransactionSteps(props);
+				setSteps(generatedSteps);
+			} catch (error) {
+				onError?.(error as Error);
+			} finally {
+				setIsLoading(false);
+			}
+		},
+		[machine, onError],
+	);
+
+	return {
+		makeOffer: (props: OfferInput) => machine?.start({ props }),
+		getMakeOfferSteps: (props: OfferInput) => ({
+			isLoading,
+			steps,
+			refreshSteps: () => loadSteps(props),
+		}),
+	};
+};

package/src/react/hooks/useRoyaltyPercentage.tsx

@@ -2,7 +2,6 @@ import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { Hex } from 'viem';
 import { getContract } from 'viem';
 import { z } from 'zod';
-import { EIP2981_ABI } from '../../utils/abi/abi/standard/EIP2981';
 import { getPublicRpcClient } from '../../utils/get-public-rpc-client';
 import {
 	AddressSchema,
@@ -10,6 +9,7 @@ import {
 	QueryArgSchema,
 	collectableKeys,
 } from '../_internal';
+import { EIP2981_ABI } from '../../utils';
 
 const UseRoyaletyPercentageSchema = z.object({
 	chainId: ChainIdSchema.pipe(z.coerce.string()),

package/src/react/hooks/useSell.tsx

@@ -0,0 +1,62 @@
+import { useState, useCallback } from 'react';
+import type { Hash } from 'viem';
+import {
+	type SellInput,
+	TransactionType,
+	type TransactionSteps,
+} from '../_internal/transaction-machine/execute-transaction';
+import {
+	useTransactionMachine,
+	type UseTransactionMachineConfig,
+} from '../_internal/transaction-machine/useTransactionMachine';
+
+interface UseSellArgs extends Omit<UseTransactionMachineConfig, 'type'> {
+	onSuccess?: (hash: Hash) => void;
+	onError?: (error: Error) => void;
+	onTransactionSent?: (hash: Hash) => void;
+}
+
+export const useSell = ({
+	onSuccess,
+	onError,
+	onTransactionSent,
+	...config
+}: UseSellArgs) => {
+	const [isLoading, setIsLoading] = useState(false);
+	const [steps, setSteps] = useState<TransactionSteps | null>(null);
+
+	const machine = useTransactionMachine(
+		{
+			...config,
+			type: TransactionType.SELL,
+		},
+		onSuccess,
+		onError,
+		onTransactionSent,
+	);
+
+	const loadSteps = useCallback(
+		async (props: SellInput) => {
+			if (!machine) return;
+			setIsLoading(true);
+			try {
+				const generatedSteps = await machine.getTransactionSteps(props);
+				setSteps(generatedSteps);
+			} catch (error) {
+				onError?.(error as Error);
+			} finally {
+				setIsLoading(false);
+			}
+		},
+		[machine, onError],
+	);
+
+	return {
+		sell: (props: SellInput) => machine?.start({ props }),
+		getSellSteps: (props: SellInput) => ({
+			isLoading,
+			steps,
+			refreshSteps: () => loadSteps(props),
+		}),
+	};
+};

package/src/react/ui/components/_internals/action-button/ActionButton.tsx

@@ -3,141 +3,133 @@
 import { Button } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
 import type { Hex } from 'viem';
-import { useAccount } from 'wagmi';
-import {
-	useBalanceOfCollectible,
-	useHighestOffer,
-	useLowestListing,
-} from '../../../../hooks';
+import type { Order } from '../../../../_internal';
+import { useBuyModal } from '../../../modals/BuyModal';
 import { useCreateListingModal } from '../../../modals/CreateListingModal';
 import { useMakeOfferModal } from '../../../modals/MakeOfferModal';
 import { useSellModal } from '../../../modals/SellModal';
 import { useTransferModal } from '../../../modals/TransferModal';
 
+export enum CollectibleCardAction {
+	BUY = 'Buy',
+	SELL = 'Sell',
+	LIST = 'Create listing',
+	OFFER = 'Make an offer',
+	TRANSFER = 'Transfer',
+}
+
 type ActionButtonProps = {
 	chainId: string;
-	collectionAddress: string;
+	collectionAddress: Hex;
 	tokenId: string;
 	isTransfer?: boolean;
+	action: CollectibleCardAction;
+	isOwned: boolean;
+	highestOffer?: Order;
+	lowestListing?: Order;
 };
 
-export const ActionButton = observer(function AddToCartButton({
-	collectionAddress,
-	chainId,
-	tokenId,
-	isTransfer,
-}: ActionButtonProps) {
-	const { address: accountAddress } = useAccount();
-	//TODO: this should not call all of these endpoints on every card
-	const { data: balance, isLoading: balanceLoading } = useBalanceOfCollectible({
-		chainId,
+export const ActionButton = observer(
+	({
 		collectionAddress,
-		collectableId: tokenId,
-		// biome-ignore lint/style/noNonNullAssertion: <explanation>
-		userAddress: accountAddress!,
-	});
-	const { data: highestOffer, isLoading: highestOfferLoading } =
-		useHighestOffer({
-			collectionAddress: collectionAddress as Hex,
-			chainId: String(chainId),
-			tokenId: tokenId,
-		});
-	const { data: lowestListing, isLoading: lowestListingLoading } =
-		useLowestListing({
-			collectionAddress: collectionAddress as Hex,
-			chainId: String(chainId),
-			tokenId: tokenId,
-		});
-	const collectibleOwned = balance?.balance ?? 0;
+		chainId,
+		tokenId,
+		action,
+		highestOffer,
+		lowestListing,
+	}: ActionButtonProps) => {
+		const { show: showCreateListingModal } = useCreateListingModal();
+		const { show: showMakeOfferModal } = useMakeOfferModal();
+		const { show: showSellModal } = useSellModal();
+		const { show: showTransferModal } = useTransferModal();
+		const { show: showBuyModal } = useBuyModal();
 
-	const { show: showCreateListingModal } = useCreateListingModal();
-	const { show: showMakeOfferModal } = useMakeOfferModal();
-	const { show: showSellModal } = useSellModal();
-	const { show: showTransferModal } = useTransferModal();
+		if (action === CollectibleCardAction.BUY) {
+			if (!lowestListing)
+				throw new Error('lowestListing is required for BUY action');
 
-	if (
-		balanceLoading ||
-		highestOfferLoading ||
-		lowestListingLoading ||
-		!accountAddress
-	) {
-		return null;
-	}
+			return (
+				<ActionButtonBody
+					label="Buy"
+					onClick={() =>
+						showBuyModal({
+							collectionAddress,
+							chainId: chainId,
+							tokenId: tokenId,
+							order: lowestListing,
+						})
+					}
+				/>
+			);
+		}
 
-	if (isTransfer && collectibleOwned) {
-		return (
-			<ActionButtonBody
-				label="Transfer"
-				onClick={() =>
-					showTransferModal({
-						collectionAddress: collectionAddress as Hex,
-						chainId: chainId,
-						tokenId: tokenId,
-					})
-				}
-			/>
-		);
-	}
+		if (action === CollectibleCardAction.SELL) {
+			if (!highestOffer)
+				throw new Error('highestOffer is required for SELL action');
 
-	if (!collectibleOwned) {
-		return (
-			<ActionButtonBody
-				label="Make an offer"
-				onClick={() =>
-					showMakeOfferModal({
-						collectionAddress: collectionAddress as Hex,
-						chainId: chainId,
-						collectibleId: tokenId,
-					})
-				}
-			/>
-		);
-	}
+			return (
+				<ActionButtonBody
+					label="Sell"
+					onClick={() =>
+						showSellModal({
+							collectionAddress,
+							chainId: chainId,
+							tokenId: tokenId,
+							order: highestOffer,
+						})
+					}
+				/>
+			);
+		}
 
-	if (!collectibleOwned && lowestListing?.order) {
-		return (
-			<ActionButtonBody
-				label="Add to cart"
-				// eslint-disable-next-line @typescript-eslint/no-empty-function
-				onClick={() => {}}
-			/>
-		);
-	}
+		if (action === CollectibleCardAction.LIST) {
+			return (
+				<ActionButtonBody
+					label="Create listing"
+					onClick={() =>
+						showCreateListingModal({
+							collectionAddress: collectionAddress as Hex,
+							chainId: chainId,
+							collectibleId: tokenId,
+						})
+					}
+				/>
+			);
+		}
 
-	if (collectibleOwned && !lowestListing?.order) {
-		return (
-			<ActionButtonBody
-				label="Create listing"
-				onClick={() =>
-					showCreateListingModal({
-						collectionAddress: collectionAddress as Hex,
-						chainId: chainId,
-						collectibleId: tokenId,
-					})
-				}
-			/>
-		);
-	}
+		if (action === CollectibleCardAction.OFFER) {
+			return (
+				<ActionButtonBody
+					label="Make an offer"
+					onClick={() =>
+						showMakeOfferModal({
+							collectionAddress: collectionAddress as Hex,
+							chainId: chainId,
+							collectibleId: tokenId,
+						})
+					}
+				/>
+			);
+		}
 
-	if (collectibleOwned && highestOffer?.order) {
-		return (
-			<ActionButtonBody
-				label="Sell"
-				onClick={() =>
-					showSellModal({
-						collectionAddress: collectionAddress as Hex,
-						chainId: chainId,
-						tokenId: tokenId,
-						// biome-ignore lint/style/noNonNullAssertion: <explanation>
-						order: highestOffer.order!,
-					})
-				}
-			/>
-		);
-	}
+		if (action === CollectibleCardAction.TRANSFER) {
+			return (
+				<ActionButtonBody
+					label="Transfer"
+					onClick={() =>
+						showTransferModal({
+							collectionAddress: collectionAddress as Hex,
+							chainId: chainId,
+							tokenId,
+						})
+					}
+				/>
+			);
+		}
 
-	return null;
-});
+		return null;
+	},
+);
 
 type ActionButtonBodyProps = {
 	label: string;

package/src/react/ui/components/_internals/custom-select/CustomSelect.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import * as Select from '@radix-ui/react-select';
+import { CheckmarkIcon, ChevronDownIcon } from '@0xsequence/design-system';
+import { content, item, itemIndicator, trigger } from './styles.css';
+
+interface CustomSelectProps {
+	items: Array<{
+		value: string;
+		label: string;
+		disabled?: boolean;
+	}>;
+	placeholder?: string;
+	onValueChange?: (value: string) => void;
+	defaultValue?: string;
+}
+
+const CustomSelectItem = React.forwardRef<
+	HTMLDivElement,
+	Select.SelectItemProps
+>(({ children, ...props }, forwardedRef) => {
+	return (
+		<Select.Item className={item} {...props} ref={forwardedRef}>
+			<Select.ItemText>{children}</Select.ItemText>
+			<Select.ItemIndicator className={itemIndicator}>
+				<CheckmarkIcon size="xs" />
+			</Select.ItemIndicator>
+		</Select.Item>
+	);
+});
+
+export const CustomSelect: React.FC<CustomSelectProps> = ({
+	items,
+	placeholder = 'Select an item...',
+	onValueChange,
+	defaultValue,
+}) => {
+	return (
+		<Select.Root onValueChange={onValueChange} defaultValue={defaultValue}>
+			<Select.Trigger className={trigger}>
+				<Select.Value placeholder={placeholder} />
+				<Select.Icon>
+					<ChevronDownIcon size="xs" />
+				</Select.Icon>
+			</Select.Trigger>
+
+			<Select.Portal>
+				<Select.Content className={content}>
+					<Select.Viewport>
+						{items.map((item) => (
+							<CustomSelectItem
+								key={item.value}
+								value={item.value}
+								disabled={item.disabled}
+							>
+								{item.label}
+							</CustomSelectItem>
+						))}
+					</Select.Viewport>
+				</Select.Content>
+			</Select.Portal>
+		</Select.Root>
+	);
+};