@0xsequence/marketplace-sdk 0.4.2 → 0.4.4

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

@@ -0,0 +1,65 @@
+import { Observable } from '@legendapp/state';
+import { ModalCallbacks } from '../../_internal/types';
+import { useGetTokenApprovalData } from './useGetTokenApproval';
+import { useTransactionSteps } from './useTransactionSteps';
+import { useEffect } from 'react';
+import {
+	MarketplaceKind,
+	OrderData,
+	TransactionSteps,
+} from '../../../../_internal';
+
+interface UseSellArgs {
+	collectibleId: string;
+	chainId: string;
+	collectionAddress: string;
+	marketplace: MarketplaceKind;
+	ordersData: Array<OrderData>;
+	callbacks?: ModalCallbacks;
+	closeMainModal: () => void;
+	steps$: Observable<TransactionSteps>;
+}
+
+export const useSell = ({
+	collectibleId,
+	chainId,
+	collectionAddress,
+	marketplace,
+	ordersData,
+	callbacks,
+	closeMainModal,
+	steps$,
+}: UseSellArgs) => {
+	const { data: tokenApproval, isLoading: tokenApprovalIsLoading } =
+		useGetTokenApprovalData({
+			chainId,
+			collectionAddress,
+			ordersData,
+			marketplace,
+		});
+
+	useEffect(() => {
+		if (tokenApproval?.step && !tokenApprovalIsLoading) {
+			steps$.approval.exist.set(true);
+		}
+	}, [tokenApproval?.step, tokenApprovalIsLoading]);
+
+	const { generatingSteps, executeApproval, sell } = useTransactionSteps({
+		collectibleId,
+		chainId,
+		collectionAddress,
+		marketplace,
+		ordersData,
+		callbacks,
+		closeMainModal,
+		steps$,
+	});
+
+	return {
+		isLoading: generatingSteps,
+		executeApproval,
+		sell,
+		tokenApprovalStepExists: tokenApproval?.step !== null,
+		tokenApprovalIsLoading,
+	};
+};

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

@@ -0,0 +1,224 @@
+import {
+	ExecuteType,
+	getMarketplaceClient,
+	MarketplaceKind,
+	OrderData,
+	Step,
+	StepType,
+	TransactionSteps,
+} from '../../../../_internal';
+import { ModalCallbacks } from '../../_internal/types';
+import { TransactionType } from '../../../../_internal/transaction-machine/execute-transaction';
+import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
+import { Address } from 'viem';
+import { Observable } from '@legendapp/state';
+import { useWallet } from '../../../../_internal/transaction-machine/useWallet';
+import { SignatureStep } from '../../../../_internal/transaction-machine/utils';
+import { useGetReceiptFromHash } from '../../../../hooks/useGetReceiptFromHash';
+import { useConfig, useGenerateSellTransaction } from '../../../../hooks';
+import { useFees } from '../../BuyModal/hooks/useFees';
+
+export type ExecutionState = 'approval' | 'sell' | null;
+
+interface UseTransactionStepsArgs {
+	collectibleId: string;
+	chainId: string;
+	collectionAddress: string;
+	marketplace: MarketplaceKind;
+	ordersData: Array<OrderData>;
+	callbacks?: ModalCallbacks;
+	closeMainModal: () => void;
+	steps$: Observable<TransactionSteps>;
+}
+
+export const useTransactionSteps = ({
+	collectibleId,
+	chainId,
+	collectionAddress,
+	marketplace,
+	ordersData,
+	callbacks,
+	closeMainModal,
+	steps$,
+}: UseTransactionStepsArgs) => {
+	const { wallet } = useWallet();
+	const { show: showTransactionStatusModal } = useTransactionStatusModal();
+	const sdkConfig = useConfig();
+	const marketplaceClient = getMarketplaceClient(chainId, sdkConfig);
+	const { waitForReceipt } = useGetReceiptFromHash();
+	const { amount, receiver } = useFees({
+		chainId: Number(chainId),
+		collectionAddress: collectionAddress,
+	});
+	const { generateSellTransactionAsync, isPending: generatingSteps } =
+		useGenerateSellTransaction({
+			chainId,
+			onSuccess: (steps) => {
+				if (!steps) return;
+			},
+		});
+
+	const getSellSteps = async () => {
+		if (!wallet) return;
+
+		try {
+			const address = await wallet.address();
+
+			const steps = await generateSellTransactionAsync({
+				collectionAddress,
+				walletType: wallet.walletKind,
+				marketplace,
+				ordersData,
+				additionalFees: [
+					{
+						amount,
+						receiver,
+					},
+				],
+				seller: address,
+			});
+
+			return steps;
+		} catch (error) {
+			if (callbacks?.onError) {
+				callbacks.onError(error as Error);
+			} else {
+				console.debug('onError callback not provided:', error);
+			}
+			throw error;
+		}
+	};
+
+	const executeApproval = async () => {
+		if (!wallet) return;
+
+		try {
+			steps$.approval.isExecuting.set(true);
+			const approvalStep = await getSellSteps().then((steps) =>
+				steps?.find((step) => step.id === StepType.tokenApproval),
+			);
+
+			const hash = await wallet.handleSendTransactionStep(
+				Number(chainId),
+				approvalStep as any,
+			);
+
+			const receipt = await waitForReceipt(hash);
+
+			if (receipt) {
+				steps$.approval.isExecuting.set(false);
+				steps$.approval.exist.set(false);
+			}
+		} catch (error) {
+			steps$.approval.isExecuting.set(false);
+			throw error;
+		}
+	};
+
+	const sell = async () => {
+		if (!wallet) return;
+
+		try {
+			steps$.transaction.isExecuting.set(true);
+			const steps = await getSellSteps();
+			const transactionStep = steps?.find((step) => step.id === StepType.sell);
+			const signatureStep = steps?.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, orderId: string | undefined;
+
+			if (transactionStep) {
+				hash = await executeTransaction({ transactionStep });
+			}
+
+			if (signatureStep) {
+				orderId = await executeSignature({ signatureStep });
+			}
+
+			closeMainModal();
+
+			showTransactionStatusModal({
+				type: TransactionType.SELL,
+				collectionAddress: collectionAddress as Address,
+				chainId,
+				collectibleId,
+				hash,
+				orderId,
+				callbacks,
+			});
+
+			if (hash) {
+				await waitForReceipt(hash);
+				steps$.transaction.isExecuting.set(false);
+				steps$.transaction.exist.set(false);
+				if (callbacks?.onSuccess && typeof callbacks.onSuccess === 'function') {
+					callbacks.onSuccess({ hash });
+				}
+			}
+
+			if (orderId) {
+				// no need to wait for receipt, because the order is already created
+
+				steps$.transaction.isExecuting.set(false);
+				steps$.transaction.exist.set(false);
+
+				if (callbacks?.onSuccess && typeof callbacks.onSuccess === 'function') {
+					callbacks.onSuccess({ orderId });
+				}
+			}
+		} catch (error) {
+			steps$.transaction.isExecuting.set(false);
+			steps$.transaction.exist.set(false);
+			if (callbacks?.onError && typeof callbacks.onError === 'function') {
+				callbacks.onError(error as Error);
+			}
+
+			throw error;
+		}
+	};
+
+	const executeTransaction = async ({
+		transactionStep,
+	}: { transactionStep: Step }) => {
+		if (!wallet) return;
+
+		const hash = await wallet.handleSendTransactionStep(
+			Number(chainId),
+			transactionStep as any,
+		);
+
+		return hash;
+	};
+
+	const executeSignature = async ({
+		signatureStep,
+	}: { signatureStep: Step }) => {
+		if (!wallet) return;
+
+		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 {
+		generatingSteps,
+		executeApproval,
+		sell,
+	};
+};

package/src/react/ui/modals/SellModal/store.ts

@@ -1,6 +1,6 @@
 import { observable } from '@legendapp/state';
 import type { Hex } from 'viem';
-import type { Order } from '../../../_internal';
+import type { Order, TransactionSteps } from '../../../_internal';
 import type { BaseModalState, ModalCallbacks } from '../_internal/types';
 
 export type OpenSellModalArgs = {
@@ -14,6 +14,7 @@ export type OpenSellModalArgs = {
 type SellModalState = BaseModalState & {
 	tokenId: string;
 	order?: Order;
+	steps: TransactionSteps;
 };
 
 type Actions = {
@@ -42,6 +43,18 @@ const initialState: SellModalState & Actions = {
 		sellModal$.isOpen.set(false);
 		sellModal$.callbacks.set(undefined);
 	},
+	steps: {
+		approval: {
+			exist: false,
+			isExecuting: false,
+			execute: () => Promise.resolve(),
+		},
+		transaction: {
+			exist: false,
+			isExecuting: false,
+			execute: () => Promise.resolve(),
+		},
+	},
 };
 
 export const sellModal$ = observable(initialState);

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

@@ -21,6 +21,8 @@ import {
 	dialogOverlay,
 } from './styles.css';
 import WaasFeeOptionsBox from '../waasFeeOptionsBox';
+import { useSwitchChainModal } from '../switchChainModal';
+import { useWallet } from '../../../../../_internal/transaction-machine/useWallet';
 
 export interface ActionModalProps {
 	isOpen: boolean;
@@ -41,6 +43,25 @@ export interface ActionModalProps {
 export const ActionModal = observer(
 	({ isOpen, onClose, title, children, ctas, chainId }: ActionModalProps) => {
 		const [isSelectingFees, setIsSelectingFees] = useState(false);
+		const { show: showSwitchChainModal } = useSwitchChainModal();
+		const { wallet } = useWallet();
+
+		const checkChain = async ({ onSuccess }: { onSuccess: () => void }) => {
+			const walletChainId = await wallet?.getChainId();
+			const chainMismatch = walletChainId !== Number(chainId);
+			if (chainMismatch) {
+				showSwitchChainModal({
+					chainIdToSwitchTo: Number(chainId),
+					onSuccess,
+				});
+			} else {
+				onSuccess();
+			}
+		};
+
+		if (wallet?.isWaaS) {
+			wallet.switchChain(Number(chainId));
+		}
 
 		return (
 			<Root open={isOpen && !!chainId}>
@@ -76,7 +97,11 @@ export const ActionModal = observer(
 												key={cta.label}
 												className={ctaStyle}
 												onClick={async () => {
-													await cta.onClick();
+													await checkChain({
+														onSuccess: () => {
+															cta.onClick();
+														},
+													});
 												}}
 												variant={cta.variant || 'primary'}
 												pending={cta.pending}

package/src/react/ui/modals/_internal/components/currencyImage/index.tsx

@@ -4,15 +4,13 @@ import { useState } from 'react';
 import type { Address } from 'viem';
 import type { Price } from '../../../../../../types';
 
-function CurrencyImage({
-	$listingPrice,
-}: { $listingPrice: Observable<Price | undefined> }) {
+function CurrencyImage({ price$ }: { price$: Observable<Price | undefined> }) {
 	const [imageLoadErrorCurrencyAddresses, setImageLoadErrorCurrencyAddresses] =
 		useState<Address[] | null>(null);
 
 	if (
 		imageLoadErrorCurrencyAddresses?.includes(
-			$listingPrice.currency.contractAddress.get() as Address,
+			price$.currency.contractAddress.get() as Address,
 		)
 	) {
 		return (
@@ -27,19 +25,19 @@ function CurrencyImage({
 
 	return (
 		<TokenImage
-			src={$listingPrice.currency.imageUrl.get()}
+			src={price$.currency.imageUrl.get()}
 			onError={() => {
-				const listingPrice = $listingPrice?.get();
-				if (listingPrice) {
+				const price = price$?.get();
+				if (price) {
 					setImageLoadErrorCurrencyAddresses((prev) => {
 						if (!prev)
-							return [listingPrice.currency.contractAddress as Address];
+							return [price$.currency.contractAddress.get() as Address];
 						if (
-							!prev.includes(listingPrice.currency.contractAddress as Address)
+							!prev.includes(price$.currency.contractAddress.get() as Address)
 						) {
 							return [
 								...prev,
-								listingPrice.currency.contractAddress as Address,
+								price$.currency.contractAddress.get() as Address,
 							];
 						}
 						return prev;

package/src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx

@@ -15,11 +15,13 @@ type CurrencyOptionsSelectProps = {
 	collectionAddress: Hex;
 	chainId: ChainId;
 	selectedCurrency$: Observable<Currency | null | undefined>;
+	secondCurrencyAsDefault?: boolean;
 };
 
 const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 	chainId,
 	collectionAddress,
+	secondCurrencyAsDefault,
 	selectedCurrency$,
 }: CurrencyOptionsSelectProps) {
 	const currency = selectedCurrency$.get() as Currency;
@@ -37,7 +39,13 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 			currencies.length > 0 &&
 			!selectedCurrency$.get()?.contractAddress
 		) {
-			selectedCurrency$.set(currencies[0]);
+			// We dont support native currency listings for any marketplace other than Sequence Marketplace v2
+			// So we need to set the set another currency as the default
+			if (secondCurrencyAsDefault) {
+				selectedCurrency$.set(currencies[1]);
+			} else {
+				selectedCurrency$.set(currencies[0]);
+			}
 		}
 	}, [currencies]);
 

package/src/react/ui/modals/_internal/components/priceInput/hooks/useBalanceCheck.ts

@@ -0,0 +1,67 @@
+import { type Observable } from '@legendapp/state';
+import { useState, useEffect } from 'react';
+import type { Hex } from 'viem';
+import type { Price } from '../../../../../../../types';
+import { useCurrencyBalance } from '../../../../../../hooks/useCurrencyBalance';
+
+type UseBalanceCheckProps = {
+	checkBalance?: {
+		enabled: boolean;
+		callback: (state: boolean) => void;
+	};
+	price$: Observable<Price | undefined>;
+	currencyAddress: Hex;
+	chainId: number;
+	userAddress: Hex;
+	currencyDecimals: number;
+};
+
+export const useBalanceCheck = ({
+	checkBalance,
+	price$,
+	currencyAddress,
+	chainId,
+	userAddress,
+	currencyDecimals,
+}: UseBalanceCheckProps) => {
+	const [balanceError, setBalanceError] = useState('');
+
+	const { data: balance, isSuccess: isBalanceSuccess } = useCurrencyBalance({
+		currencyAddress,
+		chainId,
+		userAddress,
+	});
+
+	useEffect(() => {
+		if (!checkBalance?.enabled) {
+			setBalanceError('');
+			return;
+		}
+
+		const priceAmountRaw = price$.amountRaw.get() || '0';
+		const hasInsufficientBalance =
+			isBalanceSuccess &&
+			priceAmountRaw &&
+			currencyDecimals &&
+			BigInt(priceAmountRaw) > (balance?.value || 0n);
+
+		if (hasInsufficientBalance) {
+			setBalanceError('Insufficient balance');
+			checkBalance.callback(true);
+		} else {
+			setBalanceError('');
+			checkBalance.callback(false);
+		}
+	}, [
+		price$.amountRaw.get(),
+		currencyAddress,
+		balance?.value,
+		isBalanceSuccess,
+		checkBalance,
+		currencyDecimals,
+	]);
+
+	return {
+		balanceError,
+	};
+};

package/src/react/ui/modals/_internal/components/priceInput/hooks/usePriceInput.ts

@@ -0,0 +1,54 @@
+import { type Observable } from '@legendapp/state';
+import { useState, useEffect } from 'react';
+import { parseUnits } from 'viem';
+import type { Price } from '../../../../../../../types';
+
+type UsePriceInputProps = {
+	price$: Observable<Price | undefined>;
+	currencyDecimals: number;
+	onPriceChange?: () => void;
+};
+
+export const usePriceInput = ({
+	price$,
+	currencyDecimals,
+	onPriceChange,
+}: UsePriceInputProps) => {
+	const [value, setValue] = useState('');
+
+	// Update price amount when currency changes to trigger balance check
+	useEffect(() => {
+		const currentAmount = value.replace(/,/g, '');
+		if (currentAmount) {
+			try {
+				const parsedAmount = parseUnits(
+					currentAmount,
+					Number(currencyDecimals),
+				);
+				price$.amountRaw.set(parsedAmount.toString());
+			} catch {
+				price$.amountRaw.set('0');
+			}
+		}
+	}, [currencyDecimals, value, price$]);
+
+	const handlePriceChange = (newValue: string) => {
+		setValue(newValue);  
+		
+              try {
+			const parsedAmount = parseUnits(newValue, Number(currencyDecimals));
+			price$.amountRaw.set(parsedAmount.toString());
+
+			if (onPriceChange && parsedAmount !== 0n) {
+				onPriceChange();
+			}
+		} catch {
+			price$.amountRaw.set('0');
+		}
+	};
+
+	return {
+		value,
+		handlePriceChange,
+	};
+};