@0xsequence/marketplace-sdk 0.10.0 → 1.1.0

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

@@ -8,13 +8,13 @@ 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';
@@ -59,7 +59,7 @@ const Modal = observer(() => {
 		collectionAddress,
 		collectibleId,
 	});
-	const { wallet } = useWallet();
+	const { isWaaS } = useConnectorMetadata();
 	const isProcessing = makeOfferModal$.offerIsBeingProcessed.get();
 	const { isVisible: feeOptionsVisible, selectedFeeOption } =
 		useSelectWaasFeeOptionsStore();
@@ -153,12 +153,12 @@ const Modal = observer(() => {
 		makeOfferModal$.offerIsBeingProcessed.set(true);
 
 		try {
-			if (wallet?.isWaaS) {
+			if (isWaaS) {
 				selectWaasFeeOptionsStore.send({ type: 'show' });
 			}
 
 			await makeOffer({
-				isTransactionExecuting: wallet?.isWaaS
+				isTransactionExecuting: isWaaS
 					? getNetwork(Number(chainId)).type !== NetworkType.TESTNET
 					: false,
 			});
@@ -203,103 +203,101 @@ const Modal = observer(() => {
 	];
 
 	return (
-		<>
-			<ActionModal
-				isOpen={makeOfferModal$.isOpen.get()}
-				chainId={Number(chainId)}
-				onClose={() => {
-					makeOfferModal$.close();
-					selectWaasFeeOptionsStore.send({ type: 'hide' });
-					steps$.transaction.isExecuting.set(false);
+		<ActionModal
+			isOpen={makeOfferModal$.isOpen.get()}
+			chainId={Number(chainId)}
+			onClose={() => {
+				makeOfferModal$.close();
+				selectWaasFeeOptionsStore.send({ type: 'hide' });
+				steps$.transaction.isExecuting.set(false);
+			}}
+			title="Make an offer"
+			ctas={ctas}
+			modalLoading={modalLoading}
+			spinnerContainerClassname="h-[188px]"
+			hideCtas={shouldHideOfferButton}
+		>
+			<TokenPreview
+				collectionName={collection?.name}
+				collectionAddress={collectionAddress}
+				collectibleId={collectibleId}
+				chainId={chainId}
+			/>
+
+			<PriceInput
+				chainId={chainId}
+				collectionAddress={collectionAddress}
+				price={offerPrice}
+				onPriceChange={(newPrice) => {
+					makeOfferModal$.offerPrice.set(newPrice);
+					makeOfferModal$.offerPriceChanged.set(true);
 				}}
-				title="Make an offer"
-				ctas={ctas}
-				modalLoading={modalLoading}
-				spinnerContainerClassname="h-[188px]"
-				hideCtas={shouldHideOfferButton}
-			>
-				<TokenPreview
-					collectionName={collection?.name}
-					collectionAddress={collectionAddress}
-					collectibleId={collectibleId}
-					chainId={chainId}
-				/>
+				onCurrencyChange={(newCurrency) => {
+					makeOfferModal$.offerPrice.currency.set(newCurrency);
+				}}
+				includeNativeCurrency={false}
+				checkBalance={{
+					enabled: true,
+					callback: (state) => setInsufficientBalance(state),
+				}}
+				disabled={shouldHideOfferButton}
+			/>
 
-				<PriceInput
-					chainId={chainId}
-					collectionAddress={collectionAddress}
-					price={offerPrice}
-					onPriceChange={(newPrice) => {
-						makeOfferModal$.offerPrice.set(newPrice);
-						makeOfferModal$.offerPriceChanged.set(true);
-					}}
-					onCurrencyChange={(newCurrency) => {
-						makeOfferModal$.offerPrice.currency.set(newCurrency);
-					}}
-					includeNativeCurrency={false}
-					checkBalance={{
-						enabled: true,
-						callback: (state) => setInsufficientBalance(state),
-					}}
+			{collection?.type === ContractType.ERC1155 && (
+				<QuantityInput
+					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}
 				/>
+			)}
 
-				{collection?.type === ContractType.ERC1155 && (
-					<QuantityInput
-						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}
-					/>
-				)}
-
-				{offerPrice.amountRaw !== '0' &&
-					offerPriceChanged &&
-					!insufficientBalance && (
-						<FloorPriceText
-							tokenId={collectibleId}
-							chainId={chainId}
-							collectionAddress={collectionAddress}
-							price={offerPrice}
-							onBuyNow={() => {
-								makeOfferModal$.close();
+			{offerPrice.amountRaw !== '0' &&
+				offerPriceChanged &&
+				!insufficientBalance && (
+					<FloorPriceText
+						tokenId={collectibleId}
+						chainId={chainId}
+						collectionAddress={collectionAddress}
+						price={offerPrice}
+						onBuyNow={() => {
+							makeOfferModal$.close();
 
-								if (lowestListing) {
-									buyModal.show({
-										chainId,
-										collectionAddress,
-										collectibleId,
-										orderId: lowestListing.orderId,
-										marketplace: lowestListing.marketplace,
-									});
-								}
-							}}
-						/>
-					)}
-				<ExpirationDateSelect
-					date={makeOfferModal$.expiry.get()}
-					onDateChange={(date) => makeOfferModal$.expiry.set(date)}
-					disabled={shouldHideOfferButton}
-				/>
-
-				{waasFeeOptionsShown && (
-					<SelectWaasFeeOptions
-						chainId={Number(chainId)}
-						onCancel={() => {
-							makeOfferModal$.offerIsBeingProcessed.set(false);
-							steps$.transaction.isExecuting.set(false);
+							if (lowestListing) {
+								buyModal.show({
+									chainId,
+									collectionAddress,
+									collectibleId,
+									orderId: lowestListing.orderId,
+									marketplace: lowestListing.marketplace,
+								});
+							}
 						}}
-						titleOnConfirm="Processing offer..."
 					/>
 				)}
-			</ActionModal>
-		</>
+			<ExpirationDateSelect
+				date={makeOfferModal$.expiry.get()}
+				onDateChange={(date) => makeOfferModal$.expiry.set(date)}
+				disabled={shouldHideOfferButton}
+			/>
+
+			{waasFeeOptionsShown && (
+				<SelectWaasFeeOptions
+					chainId={Number(chainId)}
+					onCancel={() => {
+						makeOfferModal$.offerIsBeingProcessed.set(false);
+						steps$.transaction.isExecuting.set(false);
+					}}
+					titleOnConfirm="Processing offer..."
+				/>
+			)}
+		</ActionModal>
 	);
 });

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

@@ -2,6 +2,7 @@
 
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
+import type { Address } from 'viem';
 import { OrderbookKind } from '../../../../../types';
 import type { MarketCollection } from '../../../../../types/new-marketplace-types';
 import type { TransactionSteps } from '../../../../_internal';
@@ -14,7 +15,7 @@ import { useTransactionSteps } from './useTransactionSteps';
 interface UseMakeOfferArgs {
 	offerInput: OfferInput;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;
@@ -56,8 +57,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]);