@0xsequence/marketplace-sdk 0.10.0 → 1.1.0

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

@@ -1,7 +1,7 @@
 import { createStore } from '@xstate/store';
 import { useSelector } from '@xstate/store/react';
 import type { Address, Hash } from 'viem';
-import type { MarketplaceType } from '../../../../types';
+import type { CardType } from '../../../../types';
 import type {
 	CheckoutOptionsItem,
 	MarketplaceKind,
@@ -9,6 +9,7 @@ import type {
 } from '../../../_internal';
 import type { useAnalytics } from '../../../_internal/databeat';
 import { flattenAnalyticsArgs } from '../../../_internal/databeat/utils';
+import type { ActionButton } from '../_internal/types';
 
 export type CheckoutOptionsSalesContractProps = {
 	chainId: number;
@@ -34,13 +35,14 @@ export type BuyModalBaseProps = {
 	collectionAddress: Address;
 	skipNativeBalanceCheck?: boolean;
 	nativeTokenAddress?: Address;
-	marketplaceType?: MarketplaceType;
+	cardType?: CardType;
 	customCreditCardProviderCallback?: PaymentModalProps['customCreditCardProviderCallback'];
+	successActionButtons?: ActionButton[];
 };
 
 // Shop type modal props
 export type ShopBuyModalProps = BuyModalBaseProps & {
-	marketplaceType: 'shop';
+	cardType: 'shop';
 	salesContractAddress: Address;
 	items: Array<Partial<CheckoutOptionsItem> & { tokenId?: string }>;
 	quantityDecimals: number;
@@ -54,7 +56,7 @@ export type ShopBuyModalProps = BuyModalBaseProps & {
 
 // Marketplace type modal props
 export type MarketplaceBuyModalProps = BuyModalBaseProps & {
-	marketplaceType?: 'market';
+	cardType?: 'market';
 	collectibleId: string;
 	marketplace: MarketplaceKind;
 	orderId: string;
@@ -64,14 +66,14 @@ export type BuyModalProps = ShopBuyModalProps | MarketplaceBuyModalProps;
 
 // Type guard functions
 export function isShopProps(props: BuyModalProps): props is ShopBuyModalProps {
-	return props.marketplaceType === 'shop';
+	return props.cardType === 'shop';
 }
 
 export function isMarketProps(
 	props: BuyModalProps,
 ): props is MarketplaceBuyModalProps {
 	// Default to MARKET type for backward compatibility
-	return !props.marketplaceType || props.marketplaceType === 'market';
+	return !props.cardType || props.cardType === 'market';
 }
 
 export type onSuccessCallback = ({

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

@@ -1,18 +1,19 @@
 'use client';
 
 import { observer, Show, use$ } from '@legendapp/state/react';
+import * as dnum from 'dnum';
 import { parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../../../types/waas-types';
 import { dateToUnixTime } from '../../../../utils/date';
 import type { ContractType } from '../../../_internal';
-import { useWallet } from '../../../_internal/wallet/useWallet';
 import {
 	useBalanceOfCollectible,
 	useCollectible,
 	useCollection,
 	useMarketCurrencies,
 } from '../../../hooks';
+import { useConnectorMetadata } from '../../../hooks/config/useConnectorMetadata';
 import {
 	ActionModal,
 	type ActionModalProps,
@@ -49,7 +50,7 @@ const Modal = observer(() => {
 		listingIsBeingProcessed,
 	} = state;
 	const steps$ = createListingModal$.steps;
-	const { wallet } = useWallet();
+	const { isWaaS } = useConnectorMetadata();
 	const { isVisible: feeOptionsVisible, selectedFeeOption } =
 		useSelectWaasFeeOptionsStore();
 
@@ -100,6 +101,11 @@ const Modal = observer(() => {
 		collectableId: collectibleId,
 		userAddress: address ?? undefined,
 	});
+	const balanceWithDecimals = balance?.balance
+		? dnum.toNumber(
+				dnum.from([BigInt(balance.balance), collectible?.decimals || 0]),
+			)
+		: 0;
 
 	const { isLoading, executeApproval, createListing, tokenApprovalIsLoading } =
 		useCreateListing({
@@ -151,12 +157,12 @@ const Modal = observer(() => {
 		createListingModal$.listingIsBeingProcessed.set(true);
 
 		try {
-			if (wallet?.isWaaS) {
+			if (isWaaS) {
 				selectWaasFeeOptionsStore.send({ type: 'show' });
 			}
 
 			await createListing({
-				isTransactionExecuting: !!wallet?.isWaaS,
+				isTransactionExecuting: !!isWaaS,
 			});
 		} catch (error) {
 			console.error('Create listing failed:', error);
@@ -253,7 +259,7 @@ const Modal = observer(() => {
 						createListingModal$.invalidQuantity.set(invalid)
 					}
 					decimals={collectible?.decimals || 0}
-					maxQuantity={balance?.balance}
+					maxQuantity={balanceWithDecimals.toString()}
 					disabled={shouldHideListButton}
 				/>
 			)}

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

@@ -1,10 +1,10 @@
 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 { StepType } from '../../../../_internal';
 import { createMockStep } from '../../../../_internal/api/__mocks__/marketplace.msw';
-import * as walletModule from '../../../../_internal/wallet/useWallet';
+
 import { useCreateListingModal } from '..';
 import * as useGetTokenApprovalDataModule from '../hooks/useGetTokenApproval';
 import { CreateListingModal } from '../Modal';
@@ -16,8 +16,6 @@ const defaultArgs = {
 };
 
 describe('MakeOfferModal', () => {
-	const mockWallet = createMockWallet();
-
 	beforeEach(() => {
 		cleanup();
 		// Reset all mocks
@@ -27,16 +25,6 @@ describe('MakeOfferModal', () => {
 	});
 
 	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,
-			isLoading: false,
-			isError: false,
-		});
 		vi.spyOn(
 			useGetTokenApprovalDataModule,
 			'useGetTokenApprovalData',
@@ -67,15 +55,6 @@ 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(
 			useGetTokenApprovalDataModule,
 			'useGetTokenApprovalData',

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

@@ -2,6 +2,7 @@
 
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
+import type { Address } from 'viem';
 import type { MarketCollection } from '../../../../../types/new-marketplace-types';
 import { compareAddress } from '../../../../../utils';
 import {
@@ -23,7 +24,7 @@ export interface ListingInput {
 interface UseCreateListingArgs {
 	listingInput: ListingInput;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;

package/src/react/ui/modals/CreateListingModal/hooks/useGetTokenApproval.ts

@@ -1,7 +1,7 @@
 import { skipToken, useQuery } from '@tanstack/react-query';
 import { useAccount } from 'wagmi';
 import { dateToUnixTime } from '../../../../../utils/date';
-import { useConfig } from '../../../..';
+import { useConfig, useConnectorMetadata } from '../../../..';
 import {
 	type ContractType,
 	type CreateReq,
@@ -11,7 +11,6 @@ import {
 	type QueryArg,
 	StepType,
 } from '../../../../_internal';
-import { useWallet } from '../../../../_internal/wallet/useWallet';
 
 export interface UseGetTokenApprovalDataArgs {
 	chainId: number;
@@ -29,7 +28,7 @@ export const useGetTokenApprovalData = (
 	params: UseGetTokenApprovalDataArgs,
 ) => {
 	const config = useConfig();
-	const { wallet } = useWallet();
+	const { walletKind } = useConnectorMetadata();
 	const { address } = useAccount();
 	const marketplaceClient = getMarketplaceClient(config);
 
@@ -42,10 +41,7 @@ export const useGetTokenApprovalData = (
 	} satisfies CreateReq;
 
 	const isEnabled =
-		wallet &&
-		address &&
-		(params.query?.enabled ?? true) &&
-		!!params.currencyAddress;
+		address && (params.query?.enabled ?? true) && !!params.currencyAddress;
 
 	const { data, isLoading, isSuccess } = useQuery({
 		queryKey: ['token-approval-data', params, address],
@@ -54,8 +50,8 @@ export const useGetTokenApprovalData = (
 					const args = {
 						chainId: String(params.chainId),
 						collectionAddress: params.collectionAddress,
-						owner: await wallet.address(),
-						walletType: wallet.walletKind,
+						owner: address,
+						walletType: walletKind,
 						contractType: params.contractType,
 						orderbook: params.orderbook,
 						listing,

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

@@ -1,36 +1,32 @@
 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';
 
 interface UseTransactionStepsArgs {
 	listingInput: ListingInput;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	orderbookKind: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;
@@ -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,