@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

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

@@ -1,29 +1,25 @@
 import type { Observable } from '@legendapp/state';
 import { type Address, formatUnits, type Hex } from 'viem';
+import { useAccount, usePublicClient } from 'wagmi';
 import { OrderbookKind, type Price } from '../../../../../types';
 import { getSequenceMarketplaceRequestId } from '../../../../../utils/getSequenceMarketRequestId';
 import {
 	balanceQueries,
 	collectableKeys,
-	ExecuteType,
-	getMarketplaceClient,
-	type Step,
 	StepType,
 	type TransactionSteps,
 } from '../../../../_internal';
 import { useAnalytics } from '../../../../_internal/databeat';
 import type { ListingInput } from '../../../../_internal/types';
 import { TransactionType } from '../../../../_internal/types';
-import type {
-	SignatureStep,
-	TransactionStep as WalletTransactionStep,
-} from '../../../../_internal/utils';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
 import {
 	useConfig,
+	useConnectorMetadata,
 	useGenerateListingTransaction,
 	useMarketCurrencies,
+	useProcessStep,
 } from '../../../../hooks';
+import { waitForTransactionReceipt } from '../../../../utils/waitForTransactionReceipt';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
 
@@ -46,7 +42,9 @@ export const useTransactionSteps = ({
 	closeMainModal,
 	steps$,
 }: UseTransactionStepsArgs) => {
-	const { wallet } = useWallet();
+	const { address } = useAccount();
+	const publicClient = usePublicClient();
+	const { walletKind } = useConnectorMetadata();
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
 	const { data: currencies } = useMarketCurrencies({
@@ -56,8 +54,8 @@ export const useTransactionSteps = ({
 		(currency) =>
 			currency.contractAddress === listingInput.listing.currencyAddress,
 	);
-	const marketplaceClient = getMarketplaceClient(sdkConfig);
 	const analytics = useAnalytics();
+	const { processStep } = useProcessStep();
 	const { generateListingTransactionAsync, isPending: generatingSteps } =
 		useGenerateListingTransaction({
 			chainId,
@@ -67,15 +65,13 @@ export const useTransactionSteps = ({
 		});
 
 	const getListingSteps = async () => {
-		if (!wallet) return;
+		if (!address) return;
 
 		try {
-			const address = await wallet.address();
-
 			const steps = await generateListingTransactionAsync({
 				collectionAddress,
 				owner: address,
-				walletType: wallet.walletKind,
+				walletType: walletKind,
 				contractType: listingInput.contractType,
 				orderbook: orderbookKind,
 				listing: {
@@ -95,7 +91,7 @@ export const useTransactionSteps = ({
 	};
 
 	const executeApproval = async () => {
-		if (!wallet) return;
+		if (!address) return;
 
 		try {
 			steps$.approval.isExecuting.set(true);
@@ -103,14 +99,21 @@ export const useTransactionSteps = ({
 				steps?.find((step) => step.id === StepType.tokenApproval),
 			);
 
-			const hash = await wallet.handleSendTransactionStep(
-				Number(chainId),
-				approvalStep as WalletTransactionStep,
-			);
+			if (!approvalStep) {
+				throw new Error('No approval step found');
+			}
 
-			await wallet.handleConfirmTransactionStep(hash, Number(chainId));
-			steps$.approval.isExecuting.set(false);
-			steps$.approval.exist.set(false);
+			const result = await processStep(approvalStep, chainId);
+
+			if (result.type === 'transaction') {
+				await waitForTransactionReceipt({
+					txHash: result.hash,
+					chainId,
+					sdkConfig,
+				});
+				steps$.approval.isExecuting.set(false);
+				steps$.approval.exist.set(false);
+			}
 		} catch (_error) {
 			steps$.approval.isExecuting.set(false);
 		}
@@ -121,34 +124,25 @@ export const useTransactionSteps = ({
 	}: {
 		isTransactionExecuting: boolean;
 	}) => {
-		if (!wallet) return;
+		if (!address) return;
 
 		try {
 			steps$.transaction.isExecuting.set(isTransactionExecuting);
 			const steps = await getListingSteps();
-			const transactionStep = steps?.find(
-				(step) => step.id === StepType.createListing,
-			);
-			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');
-			}
+			if (!steps) throw new Error('No steps found');
 
 			let hash: Hex | undefined;
 			let orderId: string | undefined;
 
-			if (transactionStep) {
-				hash = await executeTransaction({ transactionStep });
-			}
-
-			if (signatureStep) {
-				orderId = await executeSignature({ signatureStep });
+			if (steps) {
+				for (const step of steps) {
+					const result = await processStep(step, chainId);
+					if (result.type === 'transaction') {
+						hash = result.hash;
+					} else if (result.type === 'signature') {
+						orderId = result.orderId;
+					}
+				}
 			}
 
 			closeMainModal();
@@ -175,7 +169,11 @@ export const useTransactionSteps = ({
 			});
 
 			if (hash) {
-				await wallet.handleConfirmTransactionStep(hash, Number(chainId));
+				await waitForTransactionReceipt({
+					txHash: hash,
+					chainId,
+					sdkConfig,
+				});
 
 				steps$.transaction.isExecuting.set(false);
 				steps$.transaction.exist.set(false);
@@ -207,8 +205,8 @@ export const useTransactionSteps = ({
 				) {
 					requestId = await getSequenceMarketplaceRequestId(
 						hash,
-						wallet.publicClient,
-						await wallet.address(),
+						publicClient!,
+						address,
 					);
 				}
 
@@ -239,44 +237,6 @@ export const useTransactionSteps = ({
 		}
 	};
 
-	const executeTransaction = async ({
-		transactionStep,
-	}: {
-		transactionStep: Step;
-	}) => {
-		if (!wallet) return;
-
-		const hash = await wallet.handleSendTransactionStep(
-			Number(chainId),
-			transactionStep as WalletTransactionStep,
-		);
-
-		return hash;
-	};
-
-	const executeSignature = async ({
-		signatureStep,
-	}: {
-		signatureStep: Step;
-	}) => {
-		if (!wallet) return;
-
-		const signature = await wallet.handleSignMessageStep(
-			signatureStep as SignatureStep,
-		);
-
-		const result = await marketplaceClient.execute({
-			chainId: String(chainId),
-			signature: signature as string,
-			method: signatureStep.post?.method as string,
-			endpoint: signatureStep.post?.endpoint as string,
-			body: signatureStep.post?.body,
-			executeType: ExecuteType.order,
-		});
-
-		return result.orderId;
-	};
-
 	return {
 		generatingSteps,
 		executeApproval,

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

@@ -1,6 +1,6 @@
 import { observable } from '@legendapp/state';
 import { addDays } from 'date-fns/addDays';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import { type Currency, OrderbookKind } from '../../../../types';
 import type { CollectionType, TransactionSteps } from '../../../_internal';
 import type { BaseModalState, ModalCallbacks } from '../_internal/types';
@@ -22,7 +22,7 @@ type CreateListingState = BaseModalState & {
 };
 
 export type OpenCreateListingModalArgs = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	collectibleId: string;
 	orderbookKind?: OrderbookKind;
@@ -58,7 +58,7 @@ const steps = {
 
 const initialState: CreateListingState = {
 	isOpen: false,
-	collectionAddress: '' as Hex,
+	collectionAddress: '' as Address,
 	chainId: 0,
 	collectibleId: '',
 	orderbookKind: OrderbookKind.sequence_marketplace_v2,

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

@@ -1,20 +1,20 @@
 'use client';
 
-import { getNetwork } from '@0xsequence/connect';
 import { NetworkType } from '@0xsequence/network';
-import { observer, Show } from '@legendapp/state/react';
+import { observer, Show, use$ } from '@legendapp/state/react';
 import { useState } from 'react';
 import { parseUnits } from 'viem';
 import type { FeeOption } from '../../../../types/waas-types';
 import { dateToUnixTime } from '../../../../utils/date';
+import { getNetwork } from '../../../../utils/network';
 import { ContractType } from '../../../_internal';
-import { useWallet } from '../../../_internal/wallet/useWallet';
 import {
 	useCollectible,
 	useCollection,
 	useLowestListing,
 	useMarketCurrencies,
 } from '../../../hooks';
+import { useConnectorMetadata } from '../../../hooks/config/useConnectorMetadata';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 import ExpirationDateSelect from '../_internal/components/expirationDateSelect';
@@ -22,7 +22,10 @@ import FloorPriceText from '../_internal/components/floorPriceText';
 import PriceInput from '../_internal/components/priceInput';
 import QuantityInput from '../_internal/components/quantityInput';
 import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
-import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
+import {
+	selectWaasFeeOptionsStore,
+	useSelectWaasFeeOptionsStore,
+} from '../_internal/components/selectWaasFeeOptions/store';
 import TokenPreview from '../_internal/components/tokenPreview';
 import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
 import { useBuyModal } from '../BuyModal';
@@ -56,8 +59,10 @@ const Modal = observer(() => {
 		collectionAddress,
 		collectibleId,
 	});
-	const { wallet } = useWallet();
+	const { isWaaS } = useConnectorMetadata();
 	const isProcessing = makeOfferModal$.offerIsBeingProcessed.get();
+	const { isVisible: feeOptionsVisible, selectedFeeOption } =
+		useSelectWaasFeeOptionsStore();
 
 	const {
 		shouldHideActionButton: shouldHideOfferButton,
@@ -65,9 +70,8 @@ const Modal = observer(() => {
 		getActionLabel,
 	} = useSelectWaasFeeOptions({
 		isProcessing,
-		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
-		selectedFeeOption:
-			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+		feeOptionsVisible,
+		selectedFeeOption: selectedFeeOption as FeeOption,
 	});
 
 	const {
@@ -149,12 +153,12 @@ const Modal = observer(() => {
 		makeOfferModal$.offerIsBeingProcessed.set(true);
 
 		try {
-			if (wallet?.isWaaS) {
-				selectWaasFeeOptions$.isVisible.set(true);
+			if (isWaaS) {
+				selectWaasFeeOptionsStore.send({ type: 'show' });
 			}
 
 			await makeOffer({
-				isTransactionExecuting: wallet?.isWaaS
+				isTransactionExecuting: isWaaS
 					? getNetwork(Number(chainId)).type !== NetworkType.TESTNET
 					: false,
 			});
@@ -205,7 +209,7 @@ const Modal = observer(() => {
 				chainId={Number(chainId)}
 				onClose={() => {
 					makeOfferModal$.close();
-					selectWaasFeeOptions$.hide();
+					selectWaasFeeOptionsStore.send({ type: 'hide' });
 					steps$.transaction.isExecuting.set(false);
 				}}
 				title="Make an offer"
@@ -224,8 +228,14 @@ const Modal = observer(() => {
 				<PriceInput
 					chainId={chainId}
 					collectionAddress={collectionAddress}
-					$price={makeOfferModal$.offerPrice}
-					onPriceChange={() => makeOfferModal$.offerPriceChanged.set(true)}
+					price={offerPrice}
+					onPriceChange={(newPrice) => {
+						makeOfferModal$.offerPrice.set(newPrice);
+						makeOfferModal$.offerPriceChanged.set(true);
+					}}
+					onCurrencyChange={(newCurrency) => {
+						makeOfferModal$.offerPrice.currency.set(newCurrency);
+					}}
 					includeNativeCurrency={false}
 					checkBalance={{
 						enabled: true,
@@ -236,8 +246,14 @@ const Modal = observer(() => {
 
 				{collection?.type === ContractType.ERC1155 && (
 					<QuantityInput
-						$quantity={makeOfferModal$.quantity}
-						$invalidQuantity={makeOfferModal$.invalidQuantity}
+						quantity={use$(makeOfferModal$.quantity)}
+						invalidQuantity={use$(makeOfferModal$.invalidQuantity)}
+						onQuantityChange={(quantity) =>
+							makeOfferModal$.quantity.set(quantity)
+						}
+						onInvalidQuantityChange={(invalid) =>
+							makeOfferModal$.invalidQuantity.set(invalid)
+						}
 						decimals={collectible?.decimals || 0}
 						maxQuantity={String(Number.MAX_SAFE_INTEGER)}
 						disabled={shouldHideOfferButton}
@@ -268,7 +284,8 @@ const Modal = observer(() => {
 						/>
 					)}
 				<ExpirationDateSelect
-					$date={makeOfferModal$.expiry}
+					date={makeOfferModal$.expiry.get()}
+					onDateChange={(date) => makeOfferModal$.expiry.set(date)}
 					disabled={shouldHideOfferButton}
 				/>
 

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

@@ -1,13 +1,16 @@
 import { cleanup, render, renderHook, waitFor } from '@test';
 import { TEST_COLLECTIBLE } from '@test/const';
-import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { CurrencyStatus, WalletKind } from '../../../../_internal';
-import * as walletModule from '../../../../_internal/wallet/useWallet';
+import { CurrencyStatus, StepType } from '../../../../_internal';
 import { useMakeOfferModal } from '..';
+import { useGetTokenApprovalData } from '../hooks/useGetTokenApproval';
 import { MakeOfferModal } from '../Modal';
 import { makeOfferModal$ } from '../store';
 
+vi.mock('../hooks/useGetTokenApproval', () => ({
+	useGetTokenApprovalData: vi.fn(),
+}));
+
 const defaultArgs = {
 	collectionAddress: TEST_COLLECTIBLE.collectionAddress,
 	chainId: TEST_COLLECTIBLE.chainId,
@@ -31,28 +34,21 @@ const mockCurrency = {
 };
 
 describe('MakeOfferModal', () => {
-	const mockWallet = createMockWallet();
-
 	beforeEach(() => {
 		cleanup();
 		// Reset all mocks
 		vi.clearAllMocks();
 		vi.resetAllMocks();
 		vi.restoreAllMocks();
-	});
-
-	it('should show main button if there is no approval step', async () => {
-		// Mock sequence wallet
-		const sequenceWallet = {
-			...mockWallet,
-			walletKind: WalletKind.sequence,
-		};
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: sequenceWallet,
+		// Set default mock behavior
+		vi.mocked(useGetTokenApprovalData).mockReturnValue({
+			data: { step: null }, // No approval needed by default
 			isLoading: false,
-			isError: false,
+			isSuccess: true,
 		});
+	});
 
+	it('should show main button if there is no approval step', async () => {
 		// Render the modal
 		const { result } = renderHook(() => useMakeOfferModal());
 		result.current.show(defaultArgs);
@@ -71,14 +67,19 @@ describe('MakeOfferModal', () => {
 	});
 
 	it('(non-sequence wallets) should show approve token button if there is an approval step, disable main button', async () => {
-		const nonSequenceWallet = {
-			...mockWallet,
-			walletKind: 'unknown' as WalletKind,
-		};
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: nonSequenceWallet,
+		// Mock the hook to return approval needed
+		vi.mocked(useGetTokenApprovalData).mockReturnValue({
+			data: {
+				step: {
+					id: StepType.tokenApproval,
+					data: '0x',
+					to: '0x0000000000000000000000000000000000000000',
+					value: '0',
+					price: '0',
+				},
+			}, // Approval needed
 			isLoading: false,
-			isError: false,
+			isSuccess: true,
 		});
 
 		// Render the modal
@@ -98,52 +99,77 @@ describe('MakeOfferModal', () => {
 		});
 	});
 
-	it('should show/hide CTAs based on approval step existence in store', async () => {
-		// test case 1: approval.exist = true
-		makeOfferModal$.open(defaultArgs);
-		makeOfferModal$.offerPrice.set({
-			amountRaw: '1000000000000000000',
-			currency: mockCurrency,
+	describe('CTA visibility based on approval requirement', () => {
+		beforeEach(() => {
+			makeOfferModal$.close();
+			vi.clearAllMocks();
+			vi.mocked(useGetTokenApprovalData).mockReturnValue({
+				data: { step: null },
+				isLoading: false,
+				isSuccess: true,
+			});
 		});
-		makeOfferModal$.offerPriceChanged.set(true);
-		makeOfferModal$.steps.approval.exist.set(true);
-
-		const { getByText, unmount } = render(<MakeOfferModal />);
-
-		await waitFor(() => {
-			// Approve TOKEN button should be visible
-			const approveButton = getByText('Approve TOKEN');
-			expect(approveButton).toBeDefined();
 
-			// Make offer button should be disabled
-			const makeOfferButton = getByText('Make offer');
-			expect(makeOfferButton.closest('button')).toHaveAttribute('disabled');
-		});
-
-		unmount();
-		cleanup();
-
-		// test case 2: approval.exist = false
-		makeOfferModal$.open(defaultArgs);
-		makeOfferModal$.offerPrice.set({
-			amountRaw: '1000000000000000000',
-			currency: mockCurrency,
+		it('should show Approve TOKEN button when approval is required', async () => {
+			vi.mocked(useGetTokenApprovalData).mockReturnValue({
+				data: {
+					step: {
+						id: StepType.tokenApproval,
+						data: '0x',
+						to: '0x0000000000000000000000000000000000000000',
+						value: '0',
+						price: '0',
+					},
+				}, // Approval needed
+				isLoading: false,
+				isSuccess: true,
+			});
+
+			makeOfferModal$.open(defaultArgs);
+			makeOfferModal$.offerPrice.set({
+				amountRaw: '1000000000000000000',
+				currency: mockCurrency,
+			});
+			makeOfferModal$.offerPriceChanged.set(true);
+
+			const { getByText } = render(<MakeOfferModal />);
+
+			await waitFor(() => {
+				const approveButton = getByText('Approve TOKEN');
+				expect(approveButton).toBeDefined();
+
+				// Make offer button should be disabled when approval is required
+				const makeOfferButton = getByText('Make offer');
+				expect(makeOfferButton.closest('button')).toHaveAttribute('disabled');
+			});
 		});
-		makeOfferModal$.offerPriceChanged.set(true);
-		makeOfferModal$.steps.approval.exist.set(false);
 
-		const { queryByText, getByText: getByText2 } = render(<MakeOfferModal />);
-
-		await waitFor(() => {
-			// Approve TOKEN button should not exist or be hidden
+		it.skip('should hide Approve TOKEN button when approval is not required', async () => {
+			makeOfferModal$.close();
+			vi.mocked(useGetTokenApprovalData).mockReturnValue({
+				data: { step: null }, // No approval needed
+				isLoading: false,
+				isSuccess: true,
+			});
+
+			makeOfferModal$.open(defaultArgs);
+			makeOfferModal$.offerPrice.set({
+				amountRaw: '1000000000000000000',
+				currency: mockCurrency,
+			});
+			makeOfferModal$.offerPriceChanged.set(true);
+
+			const { queryByText, getByText } = render(<MakeOfferModal />);
+
+			await waitFor(() => {
+				expect(getByText('Make offer')).toBeInTheDocument();
+			});
 			const approveButton = queryByText('Approve TOKEN');
-			expect(approveButton).toBeNull();
+			expect(approveButton).not.toBeInTheDocument();
 
-			// Make offer button should be enabled
-			const makeOfferButton = getByText2('Make offer');
+			// Make offer button should be enabled when no approval needed
+			const makeOfferButton = getByText('Make offer');
 			expect(makeOfferButton.closest('button')).not.toHaveAttribute('disabled');
 		});
-
-		makeOfferModal$.close();
 	});
 });

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

@@ -1,4 +1,5 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
+import { useAccount } from 'wagmi';
 import { dateToUnixTime } from '../../../../../utils/date';
 import {
 	type ContractType,
@@ -9,8 +10,7 @@ import {
 	type QueryArg,
 	StepType,
 } from '../../../../_internal';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
-import { useConfig } from '../../../../hooks/useConfig';
+import { useConfig, useConnectorMetadata } from '../../../../hooks';
 
 export interface UseGetTokenApprovalDataArgs {
 	chainId: number;
@@ -28,7 +28,8 @@ export const useGetTokenApprovalData = (
 	params: UseGetTokenApprovalDataArgs,
 ) => {
 	const config = useConfig();
-	const { wallet } = useWallet();
+	const { address } = useAccount();
+	const { walletKind } = useConnectorMetadata();
 	const marketplaceClient = getMarketplaceClient(config);
 
 	const offer = {
@@ -39,7 +40,7 @@ export const useGetTokenApprovalData = (
 		expiry: String(Number(dateToUnixTime(new Date())) + ONE_DAY_IN_SECONDS),
 	} satisfies CreateReq;
 
-	const isEnabled = wallet && params.query?.enabled !== false;
+	const isEnabled = address && params.query?.enabled !== false;
 
 	const { data, isLoading, isSuccess } = useQuery({
 		queryKey: ['token-approval-data', params.currencyAddress],
@@ -48,8 +49,8 @@ export const useGetTokenApprovalData = (
 					const args = {
 						chainId: String(params.chainId),
 						collectionAddress: params.collectionAddress,
-						maker: await wallet.address(),
-						walletType: wallet.walletKind,
+						maker: address,
+						walletType: walletKind,
 						contractType: params.contractType,
 						orderbook: params.orderbook,
 						offer,
@@ -72,7 +73,8 @@ export const useGetTokenApprovalData = (
 					};
 				}
 			: skipToken,
-		enabled: !!wallet && !!params.collectionAddress && !!params.currencyAddress,
+		enabled:
+			!!address && !!params.collectionAddress && !!params.currencyAddress,
 	});
 
 	return {

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

@@ -56,8 +56,8 @@ export const useMakeOffer = ({
 		});
 
 	useEffect(() => {
-		if (tokenApproval?.step && !tokenApprovalIsLoading) {
-			steps$.approval.exist.set(true);
+		if (!tokenApprovalIsLoading) {
+			steps$.approval.exist.set(!!tokenApproval?.step);
 		}
 	}, [tokenApproval?.step, tokenApprovalIsLoading]);