@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

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

@@ -1,26 +1,26 @@
 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 { OfferInput } from '../../../../_internal/types';
 import { TransactionType } from '../../../../_internal/types';
-import type {
-	SignatureStep,
-	TransactionStep,
-} from '../../../../_internal/utils';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
-import { useConfig, useCurrency } from '../../../../hooks';
-import { useGenerateOfferTransaction } from '../../../../hooks/useGenerateOfferTransaction';
+
+import {
+	useConfig,
+	useConnectorMetadata,
+	useGenerateOfferTransaction,
+	useProcessStep,
+} from '../../../../hooks';
+import { useCurrency } from '../../../../hooks/data/market/useCurrency';
+import { waitForTransactionReceipt } from '../../../../utils/waitForTransactionReceipt';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
 export type ExecutionState = 'approval' | 'offer' | null;
@@ -44,11 +44,13 @@ export const useTransactionSteps = ({
 	closeMainModal,
 	steps$,
 }: UseTransactionStepsArgs) => {
-	const { wallet } = useWallet();
+	const { address } = useAccount();
+	const publicClient = usePublicClient({ chainId });
+	const { walletKind } = useConnectorMetadata();
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
 	const analytics = useAnalytics();
-	const marketplaceClient = getMarketplaceClient(sdkConfig);
+	const { processStep } = useProcessStep();
 	const { generateOfferTransactionAsync, isPending: generatingSteps } =
 		useGenerateOfferTransaction({
 			chainId,
@@ -62,15 +64,13 @@ export const useTransactionSteps = ({
 	});
 
 	const getOfferSteps = async () => {
-		if (!wallet) return;
+		if (!address) return;
 
 		try {
-			const address = await wallet.address();
-
 			const steps = await generateOfferTransactionAsync({
 				collectionAddress,
 				maker: address,
-				walletType: wallet.walletKind,
+				walletType: walletKind,
 				contractType: offerInput.contractType,
 				orderbook: orderbookKind,
 				offer: {
@@ -90,22 +90,27 @@ export const useTransactionSteps = ({
 	};
 
 	const executeApproval = async () => {
-		if (!wallet) return;
-
 		try {
 			steps$.approval.isExecuting.set(true);
 			const approvalStep = await getOfferSteps().then((steps) =>
 				steps?.find((step) => step.id === StepType.tokenApproval),
 			);
 
-			const hash = await wallet.handleSendTransactionStep(
-				Number(chainId),
-				approvalStep as TransactionStep,
-			);
+			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);
 		}
@@ -116,34 +121,24 @@ export const useTransactionSteps = ({
 	}: {
 		isTransactionExecuting: boolean;
 	}) => {
-		if (!wallet) return;
-
 		try {
 			steps$.transaction.isExecuting.set(isTransactionExecuting);
 			const steps = await getOfferSteps();
-			const transactionStep = steps?.find(
-				(step) => step.id === StepType.createOffer,
-			);
-			const signatureStep = steps?.find(
-				(step) => step.id === StepType.signEIP712,
-			);
-
-			console.debug('transactionStep', transactionStep);
-			console.debug('signatureStep', signatureStep);
 
-			if (!transactionStep && !signatureStep) {
+			if (!steps) {
 				throw new Error('No transaction or signature step 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;
+					}
+				}
 			}
 
 			closeMainModal();
@@ -170,7 +165,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);
@@ -193,13 +192,15 @@ export const useTransactionSteps = ({
 
 				if (
 					hash &&
+					publicClient &&
+					address &&
 					(orderbookKind === OrderbookKind.sequence_marketplace_v1 ||
 						orderbookKind === OrderbookKind.sequence_marketplace_v2)
 				) {
 					requestId = await getSequenceMarketplaceRequestId(
 						hash,
-						wallet.publicClient,
-						await wallet.address(),
+						publicClient,
+						address,
 					);
 				}
 
@@ -229,44 +230,6 @@ export const useTransactionSteps = ({
 		}
 	};
 
-	const executeTransaction = async ({
-		transactionStep,
-	}: {
-		transactionStep: Step;
-	}) => {
-		if (!wallet) return;
-
-		const hash = await wallet.handleSendTransactionStep(
-			Number(chainId),
-			transactionStep as TransactionStep,
-		);
-
-		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/MakeOfferModal/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, Price } from '../../../../types';
 import type { CollectionType, TransactionSteps } from '../../../_internal';
 import type { BaseModalState, ModalCallbacks } from '../_internal/types';
@@ -19,7 +19,7 @@ type MakeOfferState = BaseModalState & {
 };
 
 export type OpenMakeOfferModalArgs = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	collectibleId: string;
 	orderbookKind?: OrderbookKind;
@@ -55,7 +55,7 @@ const steps = {
 
 const initialState: MakeOfferState = {
 	isOpen: false,
-	collectionAddress: '' as Hex,
+	collectionAddress: '' as Address,
 	chainId: 0,
 	collectibleId: '',
 	orderbookKind: undefined,

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

@@ -1,21 +1,25 @@
 'use client';
 
-import { getNetwork } from '@0xsequence/connect';
 import { NetworkType } from '@0xsequence/network';
 import { observer, Show } from '@legendapp/state/react';
 import { type Address, parseUnits } from 'viem';
 import type { Price } from '../../../../types';
 import type { FeeOption } from '../../../../types/waas-types';
+import { getNetwork } from '../../../../utils/network';
 import type { MarketplaceKind } from '../../../_internal/api/marketplace.gen';
-import { useWallet } from '../../../_internal/wallet/useWallet';
-import { useCollection, useCurrency } from '../../../hooks';
+import { useCollection } from '../../../hooks';
+import { useConnectorMetadata } from '../../../hooks/config/useConnectorMetadata';
+import { useCurrency } from '../../../hooks/data/market/useCurrency';
 import {
 	ActionModal,
 	type ActionModalProps,
 } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 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 TransactionDetails from '../_internal/components/transactionDetails';
 import TransactionHeader from '../_internal/components/transactionHeader';
@@ -52,18 +56,17 @@ const Modal = observer(() => {
 		chainId,
 		currencyAddress: order?.priceCurrencyAddress as Address | undefined,
 	});
-	const { wallet } = useWallet();
-	const feeOptionsVisible = selectWaasFeeOptions$.isVisible.get();
+	const { isWaaS } = useConnectorMetadata();
+	const { isVisible: feeOptionsVisible, selectedFeeOption } =
+		useSelectWaasFeeOptionsStore();
 	const network = getNetwork(Number(chainId));
 	const isTestnet = network.type === NetworkType.TESTNET;
 	const isProcessing = sellModal$.sellIsBeingProcessed.get();
-	const isWaaS = wallet?.isWaaS;
 	const { shouldHideActionButton: shouldHideSellButton } =
 		useSelectWaasFeeOptions({
 			isProcessing,
-			feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
-			selectedFeeOption:
-				selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+			feeOptionsVisible,
+			selectedFeeOption: selectedFeeOption as FeeOption,
 		});
 
 	const { isLoading, executeApproval, sell } = useSell({
@@ -108,12 +111,12 @@ const Modal = observer(() => {
 		sellModal$.sellIsBeingProcessed.set(true);
 
 		try {
-			if (wallet?.isWaaS) {
-				selectWaasFeeOptions$.isVisible.set(true);
+			if (isWaaS) {
+				selectWaasFeeOptionsStore.send({ type: 'show' });
 			}
 
 			await sell({
-				isTransactionExecuting: wallet?.isWaaS ? !isTestnet : false,
+				isTransactionExecuting: isWaaS ? !isTestnet : false,
 			});
 		} catch (error) {
 			console.error('Sell failed:', error);
@@ -154,9 +157,7 @@ const Modal = observer(() => {
 	] satisfies ActionModalProps['ctas'];
 
 	const showWaasFeeOptions =
-		wallet?.isWaaS &&
-		sellModal$.sellIsBeingProcessed.get() &&
-		feeOptionsVisible;
+		isWaaS && sellModal$.sellIsBeingProcessed.get() && feeOptionsVisible;
 
 	return (
 		<ActionModal
@@ -164,7 +165,7 @@ const Modal = observer(() => {
 			chainId={Number(chainId)}
 			onClose={() => {
 				sellModal$.close();
-				selectWaasFeeOptions$.hide();
+				selectWaasFeeOptionsStore.send({ type: 'hide' });
 				steps$.transaction.isExecuting.set(false);
 			}}
 			title="You have an offer"

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

@@ -1,13 +1,12 @@
 import { cleanup, render, renderHook, screen, waitFor } from '@test';
 import { TEST_COLLECTIBLE } from '@test/const';
-import { createMockWallet } from '@test/mocks/wallet';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { StepType, WalletKind } from '../../../../_internal';
 import {
 	createMockStep,
 	mockOrder,
 } from '../../../../_internal/api/__mocks__/marketplace.msw';
-import * as walletModule from '../../../../_internal/wallet/useWallet';
+import * as hooksModule from '../../../../hooks';
 import { useSellModal } from '..';
 import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
 import { SellModal } from '../Modal';
@@ -20,8 +19,6 @@ const defaultArgs = {
 };
 
 describe('MakeOfferModal', () => {
-	const mockWallet = createMockWallet();
-
 	beforeEach(() => {
 		cleanup();
 		// Reset all mocks
@@ -31,25 +28,10 @@ describe('MakeOfferModal', () => {
 	});
 
 	it('should show main button if there is no approval step', async () => {
-		// Mock sequence wallet
-		const sequenceWallet = {
-			...mockWallet,
+		vi.spyOn(hooksModule, 'useConnectorMetadata').mockReturnValue({
+			isWaaS: false,
+			isSequence: true,
 			walletKind: WalletKind.sequence,
-		};
-		vi.spyOn(walletModule, 'useWallet').mockReturnValue({
-			wallet: sequenceWallet,
-			isLoading: false,
-			isError: false,
-		});
-		vi.spyOn(
-			useGetTokenApprovalDataModule,
-			'useGetTokenApprovalData',
-		).mockReturnValue({
-			data: {
-				step: null,
-			},
-			isLoading: false,
-			isSuccess: true,
 		});
 
 		// Render the modal
@@ -69,14 +51,10 @@ 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,
-			isLoading: false,
-			isError: false,
+		vi.spyOn(hooksModule, 'useConnectorMetadata').mockReturnValue({
+			isWaaS: false,
+			isSequence: false,
+			walletKind: WalletKind.unknown,
 		});
 		vi.spyOn(
 			useGetTokenApprovalDataModule,

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

@@ -1,4 +1,5 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
+import { useAccount } from 'wagmi';
 import {
 	type GenerateSellTransactionArgs,
 	getMarketplaceClient,
@@ -6,8 +7,7 @@ import {
 	type OrderData,
 	StepType,
 } from '../../../../_internal';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
-import { useConfig } from '../../../../hooks/useConfig';
+import { useConfig, useConnectorMetadata } from '../../../../hooks';
 import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee';
 
 export interface UseGetTokenApprovalDataArgs {
@@ -21,7 +21,8 @@ export const useGetTokenApprovalData = (
 	params: UseGetTokenApprovalDataArgs,
 ) => {
 	const config = useConfig();
-	const { wallet } = useWallet();
+	const { address } = useAccount();
+	const { walletKind } = useConnectorMetadata();
 	const marketplaceClient = getMarketplaceClient(config);
 	const { amount, receiver } = useMarketPlatformFee({
 		chainId: Number(params.chainId),
@@ -30,13 +31,12 @@ export const useGetTokenApprovalData = (
 
 	const { data, isLoading, isSuccess } = useQuery({
 		queryKey: ['token-approval-data', params.ordersData],
-		queryFn: wallet
+		queryFn: address
 			? async () => {
-					const address = await wallet.address();
 					const args = {
 						chainId: String(params.chainId),
 						collectionAddress: params.collectionAddress,
-						walletType: wallet.walletKind,
+						walletType: walletKind,
 						seller: address,
 						marketplace: params.marketplace,
 						ordersData: params.ordersData,
@@ -65,7 +65,7 @@ export const useGetTokenApprovalData = (
 					};
 				}
 			: skipToken,
-		enabled: !!wallet && !!params.collectionAddress,
+		enabled: !!address && !!params.collectionAddress,
 	});
 
 	return {

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

@@ -1,28 +1,24 @@
 import type { Observable } from '@legendapp/state';
 import type { Address, Hex } from 'viem';
 import { formatUnits } from 'viem';
+import { useAccount } from 'wagmi';
 import {
 	balanceQueries,
 	collectableKeys,
-	ExecuteType,
-	getMarketplaceClient,
 	type MarketplaceKind,
-	type Step,
 	StepType,
 	type TransactionSteps,
 } from '../../../../_internal';
 import { useAnalytics } from '../../../../_internal/databeat';
 import { TransactionType } from '../../../../_internal/types';
-import type {
-	SignatureStep,
-	TransactionStep,
-} from '../../../../_internal/utils';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
 import {
 	useConfig,
+	useConnectorMetadata,
 	useGenerateSellTransaction,
 	useMarketCurrencies,
+	useProcessStep,
 } from '../../../../hooks';
+import { waitForTransactionReceipt } from '../../../../utils/waitForTransactionReceipt';
 import { useTransactionStatusModal } from '../../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../../_internal/types';
 import { useMarketPlatformFee } from '../../BuyModal/hooks/useMarketPlatformFee';
@@ -50,11 +46,12 @@ export const useTransactionSteps = ({
 	closeMainModal,
 	steps$,
 }: UseTransactionStepsArgs) => {
-	const { wallet } = useWallet();
+	const { address } = useAccount();
+	const { walletKind } = useConnectorMetadata();
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const sdkConfig = useConfig();
-	const marketplaceClient = getMarketplaceClient(sdkConfig);
 	const analytics = useAnalytics();
+	const { processStep } = useProcessStep();
 
 	const { amount, receiver } = useMarketPlatformFee({
 		chainId,
@@ -73,14 +70,12 @@ export const useTransactionSteps = ({
 		});
 
 	const getSellSteps = async () => {
-		if (!wallet) return;
+		if (!address) return;
 
 		try {
-			const address = await wallet.address();
-
 			const steps = await generateSellTransactionAsync({
 				collectionAddress,
-				walletType: wallet.walletKind,
+				walletType: walletKind,
 				marketplace,
 				ordersData,
 				additionalFees: [
@@ -103,7 +98,7 @@ export const useTransactionSteps = ({
 	};
 
 	const executeApproval = async () => {
-		if (!wallet) return;
+		if (!address) return;
 
 		try {
 			steps$.approval.isExecuting.set(true);
@@ -111,14 +106,21 @@ export const useTransactionSteps = ({
 				steps?.find((step) => step.id === StepType.tokenApproval),
 			);
 
-			const hash = await wallet.handleSendTransactionStep(
-				Number(chainId),
-				approvalStep as TransactionStep,
-			);
+			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);
 		}
@@ -129,7 +131,7 @@ export const useTransactionSteps = ({
 	}: {
 		isTransactionExecuting: boolean;
 	}) => {
-		if (!wallet) return;
+		if (!address) return;
 
 		try {
 			steps$.transaction.isExecuting.set(isTransactionExecuting);
@@ -150,11 +152,17 @@ export const useTransactionSteps = ({
 			let orderId: string | undefined;
 
 			if (transactionStep) {
-				hash = await executeTransaction({ transactionStep });
+				const result = await processStep(transactionStep, chainId);
+				if (result.type === 'transaction') {
+					hash = result.hash;
+				}
 			}
 
 			if (signatureStep) {
-				orderId = await executeSignature({ signatureStep });
+				const result = await processStep(signatureStep, chainId);
+				if (result.type === 'signature') {
+					orderId = result.orderId;
+				}
 			}
 
 			closeMainModal();
@@ -171,7 +179,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);
 			}
@@ -197,7 +209,7 @@ export const useTransactionSteps = ({
 				analytics.trackSellItems({
 					props: {
 						marketplaceKind: marketplace,
-						userId: await wallet.address(),
+						userId: address,
 						collectionAddress,
 						currencyAddress: ordersData[0].currencyAddress,
 						currencySymbol,
@@ -222,44 +234,6 @@ export const useTransactionSteps = ({
 		}
 	};
 
-	const executeTransaction = async ({
-		transactionStep,
-	}: {
-		transactionStep: Step;
-	}) => {
-		if (!wallet) return;
-
-		const hash = await wallet.handleSendTransactionStep(
-			Number(chainId),
-			transactionStep as TransactionStep,
-		);
-
-		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/SellModal/store.ts

@@ -1,10 +1,10 @@
 import { observable } from '@legendapp/state';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import type { Order, TransactionSteps } from '../../../_internal';
 import type { BaseModalState, ModalCallbacks } from '../_internal/types';
 
 export type OpenSellModalArgs = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
 	tokenId: string;
 	order: Order;
@@ -25,7 +25,7 @@ type Actions = {
 
 const initialState: SellModalState & Actions = {
 	isOpen: false,
-	collectionAddress: '' as Hex,
+	collectionAddress: '' as Address,
 	chainId: 0,
 	tokenId: '',
 	order: undefined,