@0xsequence/marketplace-sdk 0.4.2 → 0.4.4

package/src/react/_internal/transaction-machine/wallet.ts

@@ -4,15 +4,17 @@ import {
 	type Chain,
 	type Hex,
 	type TransactionReceipt,
-	TypedDataDomain,
+	type TypedDataDomain,
 	type WalletClient as ViemWalletClient,
 	custom,
+	erc20Abi,
+	erc721Abi,
 	hexToBigInt,
 	isHex,
 } from 'viem';
 import type { Connector } from 'wagmi';
 import type { SwitchChainErrorType } from 'wagmi/actions';
-import { getPublicRpcClient } from '../../../utils';
+import { ERC1155_ABI, getPublicRpcClient } from '../../../utils';
 import {
 	ChainSwitchError,
 	TransactionConfirmationError,
@@ -23,6 +25,10 @@ import {
 import { StepType, WalletKind } from '../api';
 import { createLogger } from './logger';
 import type { SignatureStep, TransactionStep } from './utils';
+import {
+	SEQUENCE_MARKET_V1_ADDRESS,
+	SEQUENCE_MARKET_V2_ADDRESS,
+} from '../../../consts';
 
 interface WalletClient extends Omit<ViemWalletClient, 'account'> {
 	account: Account;
@@ -44,6 +50,11 @@ export interface WalletInstance {
 		txHash: Hex,
 		chainId: number,
 	) => Promise<TransactionReceipt>;
+	hasTokenApproval: (args: {
+		tokenType: 'ERC20' | 'ERC721' | 'ERC1155';
+		contractAddress: Address;
+		spender: Address | 'sequenceMarketV1' | 'sequenceMarketV2';
+	}) => Promise<bigint | boolean>;
 }
 
 export const wallet = ({
@@ -57,7 +68,7 @@ export const wallet = ({
 }): WalletInstance => {
 	const logger = createLogger('Wallet');
 
-	return {
+	const walletInstance = {
 		transport: custom(wallet.transport),
 		isWaaS: connector.id.endsWith('waas'),
 		walletKind:
@@ -176,5 +187,51 @@ export const wallet = ({
 				throw new TransactionConfirmationError(txHash, error as Error);
 			}
 		},
+		hasTokenApproval: async ({
+			tokenType,
+			contractAddress,
+			spender,
+		}: {
+			tokenType: 'ERC20' | 'ERC721' | 'ERC1155';
+			contractAddress: Address;
+			spender: Address | 'sequenceMarketV1' | 'sequenceMarketV2';
+		}) => {
+			const publicClient = getPublicRpcClient(await wallet.getChainId());
+			const walletAddress = await walletInstance.address();
+			const spenderAddress =
+				spender === 'sequenceMarketV1'
+					? SEQUENCE_MARKET_V1_ADDRESS
+					: spender === 'sequenceMarketV2'
+						? SEQUENCE_MARKET_V2_ADDRESS
+						: spender;
+
+			switch (tokenType) {
+				case 'ERC20':
+					return await publicClient.readContract({
+						address: contractAddress as Hex,
+						abi: erc20Abi,
+						functionName: 'allowance',
+						args: [walletAddress, spenderAddress],
+					});
+				case 'ERC721':
+					return await publicClient.readContract({
+						address: contractAddress as Hex,
+						abi: erc721Abi,
+						functionName: 'isApprovedForAll',
+						args: [walletAddress, spenderAddress],
+					});
+				case 'ERC1155':
+					return await publicClient.readContract({
+						address: contractAddress as Hex,
+						abi: ERC1155_ABI,
+						functionName: 'isApprovedForAll',
+						args: [walletAddress, spenderAddress],
+					});
+				default:
+					throw new Error('Unsupported contract type for approval checking');
+			}
+		},
 	};
+
+	return walletInstance;
 };

package/src/react/_internal/types.ts

@@ -35,3 +35,14 @@ export const AddressSchema = z.string().transform((val, ctx) => {
 export type ChainId = z.infer<typeof ChainIdSchema>;
 
 export type CollectionType = ContractType.ERC1155 | ContractType.ERC721;
+
+type TransactionStep = {
+	exist: boolean;
+	isExecuting: boolean;
+	execute: () => Promise<void>;
+};
+
+export type TransactionSteps = {
+	approval: TransactionStep;
+	transaction: TransactionStep;
+};

package/src/react/hooks/useCancelOrder.tsx

@@ -1,45 +1,41 @@
-import type { Hex } from 'viem';
-import {
-	type CancelInput,
-	TransactionType,
-} from '../_internal/transaction-machine/execute-transaction';
-import {
-	type UseTransactionMachineConfig,
-	useTransactionMachine,
-} from '../_internal/transaction-machine/useTransactionMachine';
+import { useState } from 'react';
+import { useCancelTransactionSteps } from './useCancelTransactionSteps';
 
-interface UseCancelOrderArgs
-	extends Omit<UseTransactionMachineConfig, 'type' | 'orderbookKind'> {
-	onSuccess?: (hash: string) => void;
+interface UseCancelOrderArgs {
+	collectionAddress: string;
+	chainId: string;
+	onSuccess?: ({ hash, orderId }: { hash?: string; orderId?: string }) => void;
 	onError?: (error: Error) => void;
-	onTransactionSent?: (hash?: Hex) => void;
-	enabled: boolean;
 }
 
+export type TransactionStep = {
+	exist: boolean;
+	isExecuting: boolean;
+	execute: () => Promise<void>;
+};
+
 export const useCancelOrder = ({
+	collectionAddress,
+	chainId,
 	onSuccess,
 	onError,
-	onTransactionSent,
-	enabled,
-	...config
 }: UseCancelOrderArgs) => {
-	const machineConfig = {
-		...config,
-		type: TransactionType.CANCEL,
-	};
-	const { machine, isLoading } = useTransactionMachine({
-		config: machineConfig,
-		enabled,
+	const [steps, setSteps] = useState<TransactionStep>({
+		exist: false,
+		isExecuting: false,
+		execute: () => Promise.resolve(),
+	});
+
+	const { cancelOrder } = useCancelTransactionSteps({
+		collectionAddress,
+		chainId,
 		onSuccess,
 		onError,
-		onTransactionSent,
+		setSteps,
 	});
 
 	return {
-		cancel: (props: CancelInput) => machine?.start(props),
-		onError,
-		onSuccess,
-		onTransactionSent,
-		isLoading,
+		cancelOrder,
+		isExecuting: steps.isExecuting,
 	};
 };

package/src/react/hooks/useCancelTransactionSteps.tsx

@@ -0,0 +1,222 @@
+import {
+	ExecuteType,
+	getMarketplaceClient,
+	MarketplaceKind,
+	Step,
+	StepType,
+} from '../_internal';
+import { useWallet } from '../_internal/transaction-machine/useWallet';
+import { ModalCallbacks } from '../ui/modals/_internal/types';
+import { useConfig } from './useConfig';
+import { useGenerateCancelTransaction } from './useGenerateCancelTransaction';
+import { TransactionStep } from './useCancelOrder';
+import { SignatureStep } from '../_internal/transaction-machine/utils';
+import { useGetReceiptFromHash } from './useGetReceiptFromHash';
+import { Hex } from 'viem';
+import { useSwitchChainModal } from '../ui/modals/_internal/components/switchChainModal';
+import {
+	ChainSwitchUserRejectedError,
+	WalletInstanceNotFoundError,
+} from '../../utils/_internal/error/transaction';
+
+interface UseCancelTransactionStepsArgs {
+	collectionAddress: string;
+	chainId: string;
+	callbacks?: ModalCallbacks;
+	setSteps: React.Dispatch<React.SetStateAction<TransactionStep>>;
+	onSuccess?: ({ hash, orderId }: { hash?: string; orderId?: string }) => void;
+	onError?: (error: Error) => void;
+}
+
+export const useCancelTransactionSteps = ({
+	collectionAddress,
+	chainId,
+	callbacks,
+	setSteps,
+	onSuccess,
+	onError,
+}: UseCancelTransactionStepsArgs) => {
+	const { show: showSwitchChainModal } = useSwitchChainModal();
+	const { wallet, isLoading, isError } = useWallet();
+	const walletIsInitialized = wallet && !isLoading && !isError;
+	const sdkConfig = useConfig();
+	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+	const { waitForReceipt } = useGetReceiptFromHash();
+	const { generateCancelTransactionAsync } = useGenerateCancelTransaction({
+		chainId,
+	});
+
+	const getWalletChainId = async () => {
+		return await wallet!.getChainId();
+	};
+	const switchChain = async () => {
+		await wallet!.switchChain(Number(chainId));
+	};
+	const checkAndSwitchChain = async () => {
+		const walletChainId = await getWalletChainId();
+		const isWaaS = wallet?.isWaaS;
+		const chainIdMismatch = walletChainId !== Number(chainId);
+
+		return new Promise((resolve, reject) => {
+			if (chainIdMismatch) {
+				if (isWaaS) {
+					switchChain().then(resolve).catch(reject);
+				} else {
+					showSwitchChainModal({
+						chainIdToSwitchTo: chainId,
+						onSuccess: () => resolve({ chainId: chainId }),
+						onError: (error) => reject(error),
+						onClose: () => reject(new ChainSwitchUserRejectedError()),
+					});
+				}
+			} else {
+				resolve({ chainId: chainId });
+			}
+		});
+	};
+
+	const getCancelSteps = async ({
+		orderId,
+		marketplace,
+	}: {
+		orderId: string;
+		marketplace: MarketplaceKind;
+	}) => {
+		try {
+			const address = await wallet!.address();
+
+			const steps = await generateCancelTransactionAsync({
+				collectionAddress,
+				maker: address,
+				marketplace,
+				orderId,
+			});
+
+			return steps;
+		} catch (error) {
+			if (callbacks?.onError) {
+				callbacks.onError(error as Error);
+			} else {
+				console.debug('onError callback not provided:', error);
+			}
+			throw error;
+		}
+	};
+
+	const cancelOrder = async ({
+		orderId,
+		marketplace,
+	}: {
+		orderId: string;
+		marketplace: MarketplaceKind;
+	}) => {
+		if (!walletIsInitialized) {
+			throw new WalletInstanceNotFoundError();
+		}
+
+		try {
+			await checkAndSwitchChain();
+
+			setSteps((prev) => ({
+				...prev,
+				isExecuting: true,
+			}));
+
+			const cancelSteps = await getCancelSteps({
+				orderId,
+				marketplace,
+			});
+			const transactionStep = cancelSteps?.find(
+				(step) => step.id === StepType.cancel,
+			);
+			const signatureStep = cancelSteps?.find(
+				(step) => step.id === StepType.signEIP712,
+			);
+
+			console.debug('transactionStep', transactionStep);
+			console.debug('signatureStep', signatureStep);
+
+			if (!transactionStep && !signatureStep) {
+				throw new Error('No transaction or signature step found');
+			}
+
+			let hash: Hex | undefined, reservoirOrderId: string | undefined;
+
+			if (transactionStep && wallet) {
+				hash = await executeTransaction({ transactionStep });
+
+				if (hash) {
+					await waitForReceipt(hash);
+
+					if (onSuccess && typeof onSuccess === 'function') {
+						onSuccess({ hash });
+					}
+
+					setSteps((prev) => ({
+						...prev,
+						isExecuting: false,
+					}));
+				}
+			}
+
+			if (signatureStep) {
+				reservoirOrderId = await executeSignature({ signatureStep });
+
+				if (onSuccess && typeof onSuccess === 'function') {
+					onSuccess({ orderId: reservoirOrderId });
+				}
+
+				setSteps((prev) => ({
+					...prev,
+					isExecuting: false,
+				}));
+			}
+		} catch (error) {
+			setSteps((prev) => ({
+				...prev,
+				isExecuting: false,
+			}));
+
+			if (onError && typeof onError === 'function') {
+				onError(error as Error);
+			}
+
+			throw error;
+		}
+	};
+
+	const executeTransaction = async ({
+		transactionStep,
+	}: {
+		transactionStep: Step;
+	}): Promise<Hex | undefined> => {
+		const hash = await wallet!.handleSendTransactionStep(
+			Number(chainId),
+			transactionStep as any,
+		);
+
+		return hash;
+	};
+
+	const executeSignature = async ({
+		signatureStep,
+	}: {
+		signatureStep: Step;
+	}) => {
+		const signature = await wallet!.handleSignMessageStep(
+			signatureStep as SignatureStep,
+		);
+
+		const result = await marketplaceClient.execute({
+			signature: signature as string,
+			executeType: ExecuteType.order,
+			body: signatureStep.post?.body,
+		});
+
+		return result.orderId;
+	};
+
+	return {
+		cancelOrder,
+	};
+};

package/src/react/hooks/useGetReceiptFromHash.tsx

@@ -0,0 +1,32 @@
+import { Hex } from 'viem';
+import { usePublicClient } from 'wagmi';
+import { useCallback } from 'react';
+
+/**
+ * @returns a function to wait for a transaction receipt and the receipt
+ * @description This hook is used to wait for a transaction receipt and the receipt
+ * @example
+ * const { waitForReceipt } = useGetReceiptFromHash();
+ * const receipt = await waitForReceipt(transactionHash);
+ */
+export const useGetReceiptFromHash = () => {
+	const publicClient = usePublicClient();
+
+	const waitForReceipt = useCallback(
+		async (transactionHash: Hex) => {
+			if (!publicClient) {
+				throw new Error('Public client not found');
+			}
+
+			const receipt = await publicClient.waitForTransactionReceipt({
+				hash: transactionHash,
+			});
+			return receipt;
+		},
+		[publicClient],
+	);
+
+	return {
+		waitForReceipt,
+	};
+};

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

@@ -0,0 +1,97 @@
+import { use$ } from '@legendapp/state/react';
+import type { Hex } from 'viem';
+import { ContractType, TokenMetadata } from '../../../_internal';
+import { buyModal$ } from './store';
+import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
+import { CheckoutModal } from './modals/CheckoutModal';
+import { ERC1155QuantityModal } from './modals/Modal1155';
+import { useLoadData } from './hooks/useLoadData';
+import { useBuyCollectable } from './hooks/useBuyCollectable';
+import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
+
+export const BuyModal = () => {
+	const isOpen = use$(buyModal$.isOpen);
+
+	if (!isOpen) return null;
+
+	return <BuyModalContent />;
+};
+
+const BuyModalContent = () => {
+	const chainId = String(use$(buyModal$.state.order.chainId));
+	const collectionAddress = use$(
+		buyModal$.state.order.collectionContractAddress,
+	) as Hex;
+	const collectibleId = use$(buyModal$.state.order.tokenId);
+	const modalId = use$(buyModal$.state.modalId);
+	const callbacks = use$(buyModal$.callbacks);
+	const order = use$(buyModal$.state.order);
+	const isOpen = use$(buyModal$.isOpen);
+
+	const { collection, collectable, checkoutOptions, isLoading, isError } =
+		useLoadData({
+			chainId: Number(chainId),
+			collectionAddress,
+			collectibleId,
+			orderId: order.orderId,
+			marketplace: order.marketplace,
+		});
+
+	const {
+		buy,
+		isLoading: buyIsLoading,
+		isError: buyIsError,
+	} = useBuyCollectable({
+		chainId,
+		collectionAddress,
+		callbacks,
+		tokenId: collectibleId,
+		priceCurrencyAddress: order.priceCurrencyAddress,
+	});
+
+	if (
+		isLoading ||
+		!collection ||
+		!collectable ||
+		!checkoutOptions ||
+		buyIsLoading
+	) {
+		return (
+			<LoadingModal
+				isOpen={isOpen}
+				chainId={Number(chainId)}
+				onClose={buyModal$.close}
+				title="Loading Sequence Pay"
+			/>
+		);
+	}
+
+	if (buyIsError || isError) {
+		return (
+			<ErrorModal
+				isOpen={isOpen}
+				chainId={Number(chainId)}
+				onClose={buyModal$.close}
+				title="Error"
+			/>
+		);
+	}
+
+	return collection.type === ContractType.ERC721 ? (
+		<CheckoutModal
+			key={modalId}
+			buy={(input) => buy({ ...input, checkoutOptions })}
+			collectable={collectable as TokenMetadata}
+			order={order}
+		/>
+	) : (
+		<ERC1155QuantityModal
+			buy={(input) => buy({ ...input, checkoutOptions })}
+			collectable={collectable as TokenMetadata}
+			order={order}
+			chainId={chainId}
+			collectionAddress={collectionAddress}
+			collectibleId={collectibleId}
+		/>
+	);
+};

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

@@ -0,0 +1,109 @@
+import { useSelectPaymentModal } from '@0xsequence/kit-checkout';
+import type { Hash, Hex } from 'viem';
+import type { ModalCallbacks } from '../../_internal/types';
+import {
+	type CheckoutOptions,
+	getMarketplaceClient,
+	type MarketplaceKind,
+	WalletKind,
+} from '../../../../_internal';
+import { buyModal$ } from '../store';
+import { useFees } from './useFees';
+import { useConfig } from '../../../../hooks';
+import { useWallet } from '../../../../_internal/transaction-machine/useWallet';
+
+interface UseBuyCollectableProps {
+	chainId: string;
+	collectionAddress: string;
+	tokenId: string;
+	callbacks?: ModalCallbacks;
+	priceCurrencyAddress: string;
+}
+
+type BuyCollectableReturn =
+	| { status: 'loading'; buy: null; isLoading: true; isError: false }
+	| { status: 'error'; buy: null; isLoading: false; isError: true }
+	| {
+			status: 'ready';
+			isLoading: false;
+			isError: false;
+			buy: (input: {
+				orderId: string;
+				quantity: string;
+				collectableDecimals: number;
+				marketplace: MarketplaceKind;
+				checkoutOptions: CheckoutOptions;
+			}) => Promise<void>;
+	  };
+
+export const useBuyCollectable = ({
+	chainId,
+	collectionAddress,
+	tokenId,
+	callbacks,
+	priceCurrencyAddress,
+}: UseBuyCollectableProps): BuyCollectableReturn => {
+	const { openSelectPaymentModal } = useSelectPaymentModal();
+	const config = useConfig();
+	const marketplaceClient = getMarketplaceClient(Number(chainId), config);
+	const fees = useFees({ chainId: Number(chainId), collectionAddress });
+	const { wallet, isLoading, isError } = useWallet();
+
+	if (isLoading) {
+		return { status: 'loading', buy: null, isLoading, isError: false };
+	}
+
+	if (isError || !wallet) {
+		return { status: 'error', buy: null, isLoading, isError: true };
+	}
+
+	return {
+		status: 'ready',
+		isLoading,
+		isError,
+		buy: async (input) => {
+			const { steps } = await marketplaceClient.generateBuyTransaction({
+				collectionAddress,
+				buyer: await wallet.address(),
+				marketplace: input.marketplace,
+				ordersData: [
+					{
+						orderId: input.orderId,
+						quantity: input.quantity,
+					},
+				],
+				additionalFees: [fees],
+				walletType: WalletKind.unknown,
+			});
+
+			const step = steps[0];
+
+			openSelectPaymentModal({
+				chain: chainId,
+				collectibles: [
+					{
+						tokenId: tokenId,
+						quantity: input.quantity,
+						decimals: input.collectableDecimals,
+					},
+				],
+				currencyAddress: priceCurrencyAddress,
+				price: step.value,
+				targetContractAddress: step.to,
+				txData: step.data as Hex,
+				collectionAddress,
+				recipientAddress: await wallet.address(),
+				enableMainCurrencyPayment: true,
+				enableSwapPayments: !!input.checkoutOptions.swap,
+				creditCardProviders: input.checkoutOptions.nftCheckout || [],
+				onSuccess: (hash: string) =>
+					callbacks?.onSuccess?.({ hash: hash as Hash }),
+				onError: callbacks?.onError,
+				onClose: () => {
+					console.log('onClose');
+					buyModal$.close();
+				},
+			});
+		},
+	};
+};

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

@@ -0,0 +1,50 @@
+import type { Hex } from 'viem';
+import {
+	getMarketplaceClient,
+	type MarketplaceKind,
+} from '../../../../_internal';
+import { useConfig } from '../../../../hooks';
+import { useWallet } from '../../../../_internal/transaction-machine/useWallet';
+import { useFees } from './useFees';
+import { useQuery } from '@tanstack/react-query';
+
+export const useCheckoutOptions = (input: {
+	chainId: number;
+	collectionAddress: Hex;
+	orderId: string;
+	marketplace: MarketplaceKind;
+}) => {
+	const config = useConfig();
+	const { wallet } = useWallet();
+	const fees = useFees({
+		chainId: input.chainId,
+		collectionAddress: input.collectionAddress,
+	});
+
+	return useQuery({
+		queryKey: [
+			'checkoutOptions',
+			input.chainId,
+			input.collectionAddress,
+			input.orderId,
+			input.marketplace,
+		],
+		queryFn: async () => {
+			const marketplaceClient = getMarketplaceClient(input.chainId, config);
+			return marketplaceClient
+				.checkoutOptionsMarketplace({
+					wallet: await wallet!.address(),
+					orders: [
+						{
+							contractAddress: input.collectionAddress,
+							orderId: input.orderId,
+							marketplace: input.marketplace,
+						},
+					],
+					additionalFee: Number(fees.amount),
+				})
+				.then((res) => res.options);
+		},
+		enabled: !!wallet,
+	});
+};