@0xsequence/marketplace-sdk 0.3.2 → 0.3.4

package/src/react/hooks/useMakeOffer.tsx

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

package/src/react/hooks/useRoyaltyPercentage.tsx

@@ -2,6 +2,7 @@ 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';
 import { getPublicRpcClient } from '../../utils/get-public-rpc-client';
 import {
 	AddressSchema,
@@ -9,7 +10,6 @@ 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

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

package/src/react/hooks/useTransferTokens.tsx

@@ -1,6 +1,7 @@
 import { type Abi, type Address, type Hex, erc721Abi } from 'viem';
 import { useAccount, useWriteContract } from 'wagmi';
 import { ERC1155_ABI } from '../../utils';
+import { NoWalletConnectedError } from '../../utils/_internal/error/transaction';
 import type { ChainId, ContractType } from '../_internal';
 
 interface BaseTransferParams {
@@ -64,7 +65,7 @@ export const useTransferTokens = () => {
 
 	const transferTokensAsync = async (params: TransferTokensParams) => {
 		if (!accountAddress) {
-			throw new Error('No wallet connected');
+			throw new NoWalletConnectedError();
 		}
 
 		const config = prepareTransferConfig(params, accountAddress);

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

@@ -3,6 +3,7 @@
 import { Button } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
 import type { Hex } from 'viem';
+import { InvalidStepError } from '../../../../../utils/_internal/error/transaction';
 import type { Order } from '../../../../_internal';
 import { useBuyModal } from '../../../modals/BuyModal';
 import { useCreateListingModal } from '../../../modals/CreateListingModal';
@@ -46,7 +47,7 @@ export const ActionButton = observer(
 
 		if (action === CollectibleCardAction.BUY) {
 			if (!lowestListing)
-				throw new Error('lowestListing is required for BUY action');
+				throw new InvalidStepError('BUY', 'lowestListing is required');
 
 			return (
 				<ActionButtonBody
@@ -65,7 +66,7 @@ export const ActionButton = observer(
 
 		if (action === CollectibleCardAction.SELL) {
 			if (!highestOffer)
-				throw new Error('highestOffer is required for SELL action');
+				throw new InvalidStepError('SELL', 'highestOffer is required');
 
 			return (
 				<ActionButtonBody

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

@@ -1,6 +1,6 @@
-import React from 'react';
-import * as Select from '@radix-ui/react-select';
 import { CheckmarkIcon, ChevronDownIcon } from '@0xsequence/design-system';
+import * as Select from '@radix-ui/react-select';
+import React from 'react';
 import { content, item, itemIndicator, trigger } from './styles.css';
 
 interface CustomSelectProps {
@@ -46,9 +46,9 @@ export const CustomSelect: React.FC<CustomSelectProps> = ({
 			<Select.Portal>
 				<Select.Content className={content}>
 					<Select.Viewport>
-						{items.map((item) => (
+						{items.map((item, index) => (
 							<CustomSelectItem
-								key={item.value}
+								key={index}
 								value={item.value}
 								disabled={item.disabled}
 							>

package/src/react/ui/components/collectible-card/CollectibleCard.tsx

@@ -59,7 +59,7 @@ type CollectibleCardProps = {
 	collectionAddress: Hex;
 	collectionType?: ContractType;
 	lowestListing: CollectibleOrder | undefined;
-	onCollectibleClick?: () => void;
+	onCollectibleClick?: (tokenId: string) => void;
 	onOfferClick?: ({ order }: { order?: Order }) => void;
 	balance?: string;
 	cardLoading?: boolean;
@@ -123,7 +123,7 @@ export function CollectibleCard({
 				height="full"
 				zIndex="10"
 				overflow="hidden"
-				onClick={onCollectibleClick}
+				onClick={() => onCollectibleClick?.(collectibleId)}
 				border="none"
 				cursor="pointer"
 				padding="0"

package/src/react/ui/components/collectible-card/Footer.tsx

@@ -51,6 +51,7 @@ export const Footer = ({
 				alignItems="center"
 				justifyContent="space-between"
 				position="relative"
+				width="full"
 			>
 				<Text
 					color="text100"
@@ -64,8 +65,12 @@ export const Footer = ({
 
 				{highestOffer && onOfferClick && (
 					<IconButton
+						size="xs"
 						variant="primary"
 						className={offerBellButton}
+						position="absolute"
+						right="0"
+						top="0"
 						onClick={(e) => {
 							e.stopPropagation();
 							onOfferClick?.();
@@ -94,35 +99,34 @@ export const Footer = ({
 				</Box>
 			)}
 
-			{!!balance && type !== ContractType.ERC721 && (
-				<Text
-					background="backgroundSecondary"
-					color="text80"
-					fontSize="small"
-					textAlign="left"
-					fontFamily="body"
-					paddingX="2"
-					paddingY="1"
-					borderRadius="sm"
-				>
-					Owned: {balance}
-				</Text>
-			)}
-
-			{type === ContractType.ERC721 && (
-				<Text
-					background="backgroundSecondary"
-					color="text80"
-					fontSize="small"
-					textAlign="left"
-					fontFamily="body"
-					paddingX="2"
-					paddingY="1"
-					borderRadius="sm"
-				>
-					ERC-721
-				</Text>
-			)}
+			<TokenTypeBalancePill balance={balance} type={type as ContractType} />
 		</Box>
 	);
 };
+
+const TokenTypeBalancePill = ({
+	balance,
+	type,
+}: { balance?: string; type: ContractType }) => {
+	const displayText =
+		type === ContractType.ERC1155
+			? !!balance
+				? `Owned: ${balance}`
+				: 'ERC-1155'
+			: 'ERC-721';
+
+	return (
+		<Text
+			background="backgroundSecondary"
+			color="text80"
+			fontSize="small"
+			textAlign="left"
+			fontFamily="body"
+			paddingX="2"
+			paddingY="1"
+			borderRadius="sm"
+		>
+			{displayText}
+		</Text>
+	);
+};

package/src/react/ui/icons/ArrowUp.tsx

@@ -1,5 +1,5 @@
-import { iconVariants } from './styles.css';
 import { Box, type IconProps } from '@0xsequence/design-system';
+import { iconVariants } from './styles.css';
 
 const Svg = () => (
 	<svg

package/src/react/ui/modals/BuyModal/_store.ts

@@ -1,6 +1,6 @@
 import { observable } from '@legendapp/state';
-import type { Order } from '../../../_internal';
 import type { ShowBuyModalArgs } from '.';
+import type { Order } from '../../../_internal';
 import type { ModalCallbacks } from '../_internal/types';
 
 export interface BuyModalState {
@@ -15,6 +15,8 @@ export interface BuyModalState {
 	state: {
 		order: Order;
 		quantity: string;
+		modalId: number;
+		invalidQuantity: boolean;
 	};
 	callbacks?: ModalCallbacks;
 }
@@ -30,22 +32,22 @@ export const initialState: BuyModalState = {
 		defaultCallbacks?: ModalCallbacks;
 	}) => {
 		buyModal$.state.set({
-			...buyModal$.state.get(),
+			quantity: args.order.quantityAvailableFormatted,
 			order: args.order,
+			modalId: buyModal$.state.modalId.get() + 1,
+			invalidQuantity: false,
 		});
 		buyModal$.callbacks.set(callbacks || defaultCallbacks);
 		buyModal$.isOpen.set(true);
 	},
 	close: () => {
 		buyModal$.isOpen.set(false);
-		buyModal$.callbacks.set(undefined);
-		buyModal$.state.set({
-			...initialState.state,
-		});
 	},
 	state: {
 		order: undefined as unknown as Order,
 		quantity: '1',
+		modalId: 0,
+		invalidQuantity: false,
 	},
 	callbacks: undefined,
 };

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

@@ -1,13 +1,15 @@
+import type { TokenMetadata } from '@0xsequence/indexer';
+import { Show, observer, useSelector } from '@legendapp/state/react';
+import { useEffect } from 'react';
 import type { Hex } from 'viem';
-import { buyModal$ } from './_store';
 import { ContractType, type Order } from '../../../_internal';
-import { observer, useSelector } from '@legendapp/state/react';
+import type { BuyInput } from '../../../_internal/transaction-machine/execute-transaction';
 import { useCollectible, useCollection } from '../../../hooks';
-import { ActionModal } from '../_internal/components/actionModal';
-import { useEffect } from 'react';
-import QuantityInput from '..//_internal/components/quantityInput';
 import { useBuyCollectable } from '../../../hooks/useBuyCollectable';
+import QuantityInput from '..//_internal/components/quantityInput';
+import { ActionModal } from '../_internal/components/actionModal';
 import type { ModalCallbacks } from '../_internal/types';
+import { buyModal$ } from './_store';
 
 export type ShowBuyModalArgs = {
 	chainId: string;
@@ -24,62 +26,33 @@ export const useBuyModal = (callbacks?: ModalCallbacks) => {
 	};
 };
 
-export const BuyModal = () => {
-	const isOpen = useSelector(buyModal$.isOpen);
-	const { data: collection } = useCollection({
-		chainId: buyModal$.state.order.chainId.get(),
-		collectionAddress: buyModal$.state.order.collectionContractAddress.get(),
-	});
-
-	if (!isOpen || !collection) return null;
-
-	return collection.type === ContractType.ERC721 ? (
-		<CheckoutModal />
-	) : (
-		<ERC1155QuantityModal />
-	);
-};
-
-const CheckoutModal = observer(() => {
-	const order = buyModal$.state.order.get();
-	const chainId = String(order.chainId);
-	const collectionAddress = order.collectionContractAddress as Hex;
-	const collectibleId = order.tokenId;
+export const BuyModal = () => (
+	<Show if={buyModal$.isOpen}>
+		<BuyModalContent />
+	</Show>
+);
 
-	const { buy } = useBuyCollectable({
-		chainId,
-		collectionAddress,
-	});
+export const BuyModalContent = () => {
+	const chainId = String(useSelector(buyModal$.state.order.chainId));
+	const collectionAddress = useSelector(
+		buyModal$.state.order.collectionContractAddress,
+	) as Hex;
+	const collectibleId = useSelector(buyModal$.state.order.tokenId);
+	const modalId = useSelector(buyModal$.state.modalId);
 
-	const { data: collectable } = useCollectible({
+	const { data: collection } = useCollection({
 		chainId,
 		collectionAddress,
-		collectibleId,
 	});
 
-	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
-	useEffect(() => {
-		if (!collectable) return;
-		buy({
-			orderId: order.orderId,
-			collectableDecimals: collectable.decimals || 0,
-			quantity: '1',
-			marketplace: order.marketplace,
-		});
-	}, [order, collectable]);
-
-	return <></>;
-});
-
-const ERC1155QuantityModal = observer(() => {
-	const order = buyModal$.state.order.get();
-	const chainId = String(order.chainId);
-	const collectionAddress = order.collectionContractAddress as Hex;
-	const collectibleId = order.tokenId;
-
-	const { buy } = useBuyCollectable({
+	const { buy, isLoading } = useBuyCollectable({
 		chainId,
 		collectionAddress,
+		onError: buyModal$.callbacks.get()?.onError,
+		onSuccess: (hash) => {
+			buyModal$.callbacks.get()?.onSuccess?.(hash);
+			buyModal$.close();
+		},
 	});
 
 	const { data: collectable } = useCollectible({
@@ -88,32 +61,98 @@ const ERC1155QuantityModal = observer(() => {
 		collectibleId,
 	});
 
-	if (!order || !collectable) return null;
-
-	return (
-		<ActionModal
-			store={buyModal$}
-			onClose={() => buyModal$.close()}
-			title="Select Quantity"
-			ctas={[
-				{
-					label: 'Select Quantity',
-					onClick: () =>
-						buy({
-							quantity: buyModal$.state.quantity.get(),
-							orderId: order.orderId,
-							collectableDecimals: collectable.decimals || 0,
-							marketplace: order.marketplace,
-						}),
-				},
-			]}
-		>
-			<QuantityInput
-				chainId={chainId}
-				collectionAddress={collectionAddress}
-				collectibleId={collectibleId}
-				$quantity={buyModal$.state.quantity}
-			/>
-		</ActionModal>
+	if (modalId == 0 || !collection || !collectable || !buy) return null;
+
+	return collection.type === ContractType.ERC721 ? (
+		<CheckoutModal
+			key={modalId}
+			buy={buy}
+			collectable={collectable}
+			order={buyModal$.state.order.get()}
+			isLoading={isLoading}
+		/>
+	) : (
+		<ERC1155QuantityModal
+			buy={buy}
+			collectable={collectable}
+			order={buyModal$.state.order.get()}
+			chainId={chainId}
+			collectionAddress={collectionAddress}
+			collectibleId={collectibleId}
+			isLoading={isLoading}
+		/>
 	);
-});
+};
+
+interface CheckoutModalProps {
+	buy: (props: BuyInput) => void;
+	collectable: TokenMetadata;
+	order: Order;
+	isLoading?: boolean;
+}
+
+function CheckoutModal({
+	buy,
+	collectable,
+	order,
+	isLoading,
+}: CheckoutModalProps) {
+	useEffect(() => {
+		const executeBuy = () => {
+			if (isLoading) return;
+			buy({
+				orderId: order.orderId,
+				collectableDecimals: collectable.decimals || 0,
+				quantity: '1',
+				marketplace: order.marketplace,
+			});
+		};
+
+		executeBuy();
+	}, [isLoading]);
+
+	return null;
+}
+
+interface ERC1155QuantityModalProps extends CheckoutModalProps {
+	chainId: string;
+	collectionAddress: Hex;
+	collectibleId: string;
+}
+
+const ERC1155QuantityModal = observer(
+	({ buy, collectable, order }: ERC1155QuantityModalProps) => {
+		buyModal$.state.quantity.set(
+			Math.max(Number(order.quantityRemaining), 1).toString(),
+		);
+
+		return (
+			<ActionModal
+				store={buyModal$}
+				onClose={() => buyModal$.close()}
+				title="Select Quantity"
+				ctas={[
+					{
+						label: 'Select Quantity',
+						onClick: () => {
+							buy({
+								quantity: buyModal$.state.quantity.get(),
+								orderId: order.orderId,
+								collectableDecimals: collectable.decimals || 0,
+								marketplace: order.marketplace,
+							});
+							buyModal$.close();
+						},
+					},
+				]}
+			>
+				<QuantityInput
+					$quantity={buyModal$.state.quantity}
+					$invalidQuantity={buyModal$.state.invalidQuantity}
+					decimals={order.quantityDecimals}
+					maxQuantity={order.quantityRemaining}
+				/>
+			</ActionModal>
+		);
+	},
+);

package/src/react/ui/modals/CreateListingModal/_store.ts

@@ -16,6 +16,7 @@ const initialState = {
 		currency: {} as Currency,
 	},
 	quantity: '1',
+	invalidQuantity: false,
 	expiry: new Date(addDays(new Date(), 7).toJSON()),
 	callbacks: undefined as ModalCallbacks | undefined,