@0xsequence/marketplace-sdk 0.7.0 → 0.8.1

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

@@ -1,18 +1,31 @@
 'use client';
 
+import { getNetwork } from '@0xsequence/connect';
+import { NetworkType } from '@0xsequence/network';
 import { Show, observer } 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 { ContractType } from '../../../_internal';
-import { useCollectible, useCollection, useCurrencies } from '../../../hooks';
+import { useWallet } from '../../../_internal/wallet/useWallet';
+import {
+	useCollectible,
+	useCollection,
+	useCurrencies,
+	useLowestListing,
+} from '../../../hooks';
+import { useBuyModal } from '../BuyModal';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 import ExpirationDateSelect from '../_internal/components/expirationDateSelect';
 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 TokenPreview from '../_internal/components/tokenPreview';
+import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
 import { useMakeOffer } from './hooks/useMakeOffer';
 import { makeOfferModal$ } from './store';
 
@@ -43,6 +56,20 @@ const Modal = observer(() => {
 		collectionAddress,
 		collectibleId,
 	});
+	const { wallet } = useWallet();
+	const isProcessing = makeOfferModal$.offerIsBeingProcessed.get();
+
+	const {
+		shouldHideActionButton: shouldHideOfferButton,
+		waasFeeOptionsShown,
+		getActionLabel,
+	} = useSelectWaasFeeOptions({
+		chainId,
+		isProcessing,
+		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+		selectedFeeOption:
+			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+	});
 
 	const {
 		data: collection,
@@ -85,6 +112,17 @@ const Modal = observer(() => {
 		steps$: steps$,
 	});
 
+	const buyModal = useBuyModal(callbacks);
+
+	const { data: lowestListing } = useLowestListing({
+		tokenId: collectibleId,
+		chainId,
+		collectionAddress,
+		filters: {
+			currencies: [offerPrice.currency.contractAddress],
+		},
+	});
+
 	if (collectableIsError || collectionIsError || currenciesIsError) {
 		return (
 			<ErrorModal
@@ -108,6 +146,29 @@ const Modal = observer(() => {
 		);
 	}
 
+	const handleMakeOffer = async () => {
+		makeOfferModal$.offerIsBeingProcessed.set(true);
+
+		try {
+			if (wallet?.isWaaS) {
+				selectWaasFeeOptions$.isVisible.set(true);
+			}
+
+			await makeOffer({
+				isTransactionExecuting: wallet?.isWaaS
+					? getNetwork(Number(chainId)).type !== NetworkType.TESTNET
+					: false,
+			});
+		} catch (error) {
+			console.error('Make offer failed:', error);
+		} finally {
+			makeOfferModal$.offerIsBeingProcessed.set(false);
+			steps$.transaction.isExecuting.set(false);
+		}
+	};
+
+	const offerCtaLabel = getActionLabel('Make offer');
+
 	const ctas = [
 		{
 			label: 'Approve TOKEN',
@@ -123,9 +184,11 @@ const Modal = observer(() => {
 				!offerPriceChanged,
 		},
 		{
-			label: 'Make offer',
-			onClick: () => makeOffer(),
-			pending: steps$.transaction.isExecuting.get(),
+			label: offerCtaLabel,
+			onClick: () => handleMakeOffer(),
+			pending:
+				steps$?.transaction.isExecuting.get() ||
+				makeOfferModal$.offerIsBeingProcessed.get(),
 			disabled:
 				steps$.approval.isExecuting.get() ||
 				steps$.approval.exist.get() ||
@@ -141,11 +204,16 @@ const Modal = observer(() => {
 			<ActionModal
 				isOpen={makeOfferModal$.isOpen.get()}
 				chainId={Number(chainId)}
-				onClose={() => makeOfferModal$.close()}
+				onClose={() => {
+					makeOfferModal$.close();
+					selectWaasFeeOptions$.hide();
+					steps$.transaction.isExecuting.set(false);
+				}}
 				title="Make an offer"
 				ctas={ctas}
 				modalLoading={modalLoading}
 				spinnerContainerClassname="h-[188px]"
+				hideCtas={shouldHideOfferButton}
 			>
 				<TokenPreview
 					collectionName={collection?.name}
@@ -164,6 +232,7 @@ const Modal = observer(() => {
 						enabled: true,
 						callback: (state) => setInsufficientBalance(state),
 					}}
+					disabled={shouldHideOfferButton}
 				/>
 
 				{collection?.type === ContractType.ERC1155 && (
@@ -172,6 +241,7 @@ const Modal = observer(() => {
 						$invalidQuantity={makeOfferModal$.invalidQuantity}
 						decimals={collectible?.decimals || 0}
 						maxQuantity={String(Number.MAX_SAFE_INTEGER)}
+						disabled={shouldHideOfferButton}
 					/>
 				)}
 
@@ -183,9 +253,36 @@ const Modal = observer(() => {
 							chainId={chainId}
 							collectionAddress={collectionAddress}
 							price={offerPrice}
+							onBuyNow={() => {
+								makeOfferModal$.close();
+
+								if (lowestListing?.order) {
+									buyModal.show({
+										chainId,
+										collectionAddress,
+										collectibleId,
+										orderId: lowestListing.order.orderId,
+										marketplace: lowestListing.order.marketplace,
+									});
+								}
+							}}
 						/>
 					)}
-				<ExpirationDateSelect $date={makeOfferModal$.expiry} />
+				<ExpirationDateSelect
+					$date={makeOfferModal$.expiry}
+					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

@@ -23,7 +23,7 @@ vi.mock('@0xsequence/kit', () => ({
 
 const defaultArgs = {
 	collectionAddress: zeroAddress,
-	chainId: '1',
+	chainId: 1,
 	collectibleId: '1',
 };
 

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

@@ -13,7 +13,7 @@ import { useWallet } from '../../../../_internal/wallet/useWallet';
 import { useConfig } from '../../../../hooks/useConfig';
 
 export interface UseGetTokenApprovalDataArgs {
-	chainId: string;
+	chainId: number;
 	tokenId: string;
 	collectionAddress: string;
 	currencyAddress: string;

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

@@ -12,7 +12,7 @@ import { useTransactionSteps } from './useTransactionSteps';
 
 interface UseMakeOfferArgs {
 	offerInput: OfferInput;
-	chainId: string;
+	chainId: number;
 	collectionAddress: string;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;

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

@@ -26,7 +26,7 @@ export type ExecutionState = 'approval' | 'offer' | null;
 
 interface UseTransactionStepsArgs {
 	offerInput: OfferInput;
-	chainId: string;
+	chainId: number;
 	collectionAddress: string;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;
@@ -111,11 +111,15 @@ export const useTransactionSteps = ({
 		}
 	};
 
-	const makeOffer = async () => {
+	const makeOffer = async ({
+		isTransactionExecuting,
+	}: {
+		isTransactionExecuting: boolean;
+	}) => {
 		if (!wallet) return;
 
 		try {
-			steps$.transaction.isExecuting.set(true);
+			steps$.transaction.isExecuting.set(isTransactionExecuting);
 			const steps = await getOfferSteps();
 			const transactionStep = steps?.find(
 				(step) => step.id === StepType.createOffer,
@@ -192,7 +196,7 @@ export const useTransactionSteps = ({
 						collectionAddress,
 						currencyAddress: offerInput.offer.currencyAddress,
 						currencySymbol: currency?.symbol || '',
-						chainId,
+						chainId: chainId.toString(),
 						txnHash: hash || '',
 					},
 					nums: {

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

@@ -15,11 +15,12 @@ type MakeOfferState = BaseModalState & {
 	invalidQuantity: boolean;
 	collectionType?: CollectionType;
 	steps: TransactionSteps;
+	offerIsBeingProcessed: boolean;
 };
 
 export type OpenMakeOfferModalArgs = {
 	collectionAddress: Hex;
-	chainId: string;
+	chainId: number;
 	collectibleId: string;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;
@@ -55,7 +56,7 @@ const steps = {
 const initialState: MakeOfferState = {
 	isOpen: false,
 	collectionAddress: '' as Hex,
-	chainId: '',
+	chainId: 0,
 	collectibleId: '',
 	orderbookKind: undefined,
 	callbacks: undefined,
@@ -66,6 +67,7 @@ const initialState: MakeOfferState = {
 	expiry: new Date(addDays(new Date(), 7).toJSON()),
 	collectionType: undefined,
 	steps: { ...steps },
+	offerIsBeingProcessed: false,
 };
 
 const actions: Actions = {
@@ -82,7 +84,7 @@ const actions: Actions = {
 		makeOfferModal$.set({ ...initialState, ...actions });
 		makeOfferModal$.steps.set({ ...steps });
 		makeOfferModal$.offerPrice.set({ ...offerPrice });
-		makeOfferModal$.steps.set({ ...steps });
+		makeOfferModal$.offerIsBeingProcessed.set(false);
 	},
 };
 

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

@@ -1,16 +1,25 @@
+'use client';
+
+import { getNetwork } from '@0xsequence/connect';
+import { NetworkType } from '@0xsequence/network';
 import { Show, observer } from '@legendapp/state/react';
 import { parseUnits } from 'viem';
 import type { Price } from '../../../../types';
+import type { FeeOption } from '../../../../types/waas-types';
 import type { MarketplaceKind } from '../../../_internal/api/marketplace.gen';
+import { useWallet } from '../../../_internal/wallet/useWallet';
 import { useCollection, useCurrency } from '../../../hooks';
 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 TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
 import TransactionHeader from '../_internal/components/transactionHeader';
+import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
 import { useSell } from './hooks/useSell';
 import { sellModal$ } from './store';
 
@@ -43,6 +52,20 @@ const Modal = observer(() => {
 		chainId,
 		currencyAddress: order?.priceCurrencyAddress ?? '',
 	});
+	const { wallet } = useWallet();
+	const feeOptionsVisible = selectWaasFeeOptions$.isVisible.get();
+	const network = getNetwork(Number(chainId));
+	const isTestnet = network.type === NetworkType.TESTNET;
+	const isProcessing = sellModal$.sellIsBeingProcessed.get();
+	const isWaaS = wallet?.isWaaS;
+	const { shouldHideActionButton: shouldHideSellButton } =
+		useSelectWaasFeeOptions({
+			chainId,
+			isProcessing,
+			feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+			selectedFeeOption:
+				selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+		});
 
 	const { isLoading, executeApproval, sell } = useSell({
 		collectionAddress,
@@ -82,6 +105,32 @@ const Modal = observer(() => {
 		);
 	}
 
+	const handleSell = async () => {
+		sellModal$.sellIsBeingProcessed.set(true);
+
+		try {
+			if (wallet?.isWaaS) {
+				selectWaasFeeOptions$.isVisible.set(true);
+			}
+
+			await sell({
+				isTransactionExecuting: wallet?.isWaaS ? !isTestnet : false,
+			});
+		} catch (error) {
+			console.error('Sell failed:', error);
+		} finally {
+			sellModal$.sellIsBeingProcessed.set(false);
+			steps$.transaction.isExecuting.set(false);
+		}
+	};
+
+	// if it's testnet, we don't need to show the fee options
+	const sellCtaLabel = isProcessing
+		? isWaaS && !isTestnet
+			? 'Loading fee options'
+			: 'Accept'
+		: 'Accept';
+
 	const ctas = [
 		{
 			label: 'Approve TOKEN',
@@ -92,9 +141,11 @@ const Modal = observer(() => {
 			disabled: isLoading || order?.quantityRemaining === '0',
 		},
 		{
-			label: 'Accept',
-			onClick: () => sell(),
-			pending: steps$.transaction.isExecuting.get(),
+			label: sellCtaLabel,
+			onClick: () => handleSell(),
+			pending:
+				steps$?.transaction.isExecuting.get() ||
+				sellModal$.sellIsBeingProcessed.get(),
 			disabled:
 				isLoading ||
 				steps$.approval.isExecuting.get() ||
@@ -103,15 +154,25 @@ const Modal = observer(() => {
 		},
 	] satisfies ActionModalProps['ctas'];
 
+	const showWaasFeeOptions =
+		wallet?.isWaaS &&
+		sellModal$.sellIsBeingProcessed.get() &&
+		feeOptionsVisible;
+
 	return (
 		<ActionModal
 			isOpen={sellModal$.isOpen.get()}
 			chainId={Number(chainId)}
-			onClose={sellModal$.close}
+			onClose={() => {
+				sellModal$.close();
+				selectWaasFeeOptions$.hide();
+				steps$.transaction.isExecuting.set(false);
+			}}
 			title="You have an offer"
 			ctas={ctas}
 			modalLoading={modalLoading}
 			spinnerContainerClassname="h-[104px]"
+			hideCtas={shouldHideSellButton}
 		>
 			<TransactionHeader
 				title="Offer received"
@@ -139,6 +200,17 @@ const Modal = observer(() => {
 				}
 				currencyImageUrl={currency?.imageUrl}
 			/>
+
+			{showWaasFeeOptions && (
+				<SelectWaasFeeOptions
+					chainId={Number(chainId)}
+					onCancel={() => {
+						sellModal$.sellIsBeingProcessed.set(false);
+						steps$.transaction.isExecuting.set(false);
+					}}
+					titleOnConfirm="Accepting offer..."
+				/>
+			)}
 		</ActionModal>
 	);
 });

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

@@ -23,7 +23,7 @@ const mockOrder = {
 
 const mockModalProps = {
 	collectionAddress: '0x123',
-	chainId: '1',
+	chainId: 1,
 	tokenId: '1',
 	order: mockOrder,
 } satisfies OpenSellModalArgs;

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

@@ -11,7 +11,7 @@ import { useConfig } from '../../../../hooks/useConfig';
 import { useFees } from '../../BuyModal/hooks/useFees';
 
 export interface UseGetTokenApprovalDataArgs {
-	chainId: string;
+	chainId: number;
 	collectionAddress: string;
 	marketplace: MarketplaceKind;
 	ordersData: Array<OrderData>;

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

@@ -16,7 +16,7 @@ export type SellOrder = {
 
 interface UseSellArgs {
 	collectibleId: string;
-	chainId: string;
+	chainId: number;
 	collectionAddress: string;
 	marketplace: MarketplaceKind;
 	ordersData: Array<SellOrder>;

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

@@ -31,7 +31,7 @@ export type ExecutionState = 'approval' | 'sell' | null;
 
 interface UseTransactionStepsArgs {
 	collectibleId: string;
-	chainId: string;
+	chainId: number;
 	collectionAddress: string;
 	marketplace: MarketplaceKind;
 	ordersData: Array<SellOrder>;
@@ -57,12 +57,12 @@ export const useTransactionSteps = ({
 	const analytics = useAnalytics();
 
 	const { amount, receiver } = useFees({
-		chainId: Number(chainId),
+		chainId,
 		collectionAddress: collectionAddress,
 	});
 
 	const { data: currencies } = useCurrencies({
-		chainId: Number(chainId),
+		chainId,
 	});
 	const { generateSellTransactionAsync, isPending: generatingSteps } =
 		useGenerateSellTransaction({
@@ -124,11 +124,15 @@ export const useTransactionSteps = ({
 		}
 	};
 
-	const sell = async () => {
+	const sell = async ({
+		isTransactionExecuting,
+	}: {
+		isTransactionExecuting: boolean;
+	}) => {
 		if (!wallet) return;
 
 		try {
-			steps$.transaction.isExecuting.set(true);
+			steps$.transaction.isExecuting.set(isTransactionExecuting);
 			const steps = await getSellSteps();
 			const transactionStep = steps?.find((step) => step.id === StepType.sell);
 			const signatureStep = steps?.find(
@@ -196,7 +200,7 @@ export const useTransactionSteps = ({
 						collectionAddress,
 						currencyAddress: ordersData[0].currencyAddress,
 						currencySymbol,
-						chainId,
+						chainId: chainId.toString(),
 						txnHash: hash || '',
 					},
 					nums: {
@@ -216,7 +220,9 @@ export const useTransactionSteps = ({
 
 	const executeTransaction = async ({
 		transactionStep,
-	}: { transactionStep: Step }) => {
+	}: {
+		transactionStep: Step;
+	}) => {
 		if (!wallet) return;
 
 		const hash = await wallet.handleSendTransactionStep(
@@ -229,7 +235,9 @@ export const useTransactionSteps = ({
 
 	const executeSignature = async ({
 		signatureStep,
-	}: { signatureStep: Step }) => {
+	}: {
+		signatureStep: Step;
+	}) => {
 		if (!wallet) return;
 
 		const signature = await wallet.handleSignMessageStep(

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

@@ -5,7 +5,7 @@ import type { BaseModalState, ModalCallbacks } from '../_internal/types';
 
 export type OpenSellModalArgs = {
 	collectionAddress: Hex;
-	chainId: string;
+	chainId: number;
 	tokenId: string;
 	order: Order;
 	callbacks?: ModalCallbacks;
@@ -15,6 +15,7 @@ type SellModalState = BaseModalState & {
 	tokenId: string;
 	order?: Order;
 	steps: TransactionSteps;
+	sellIsBeingProcessed: boolean;
 };
 
 type Actions = {
@@ -25,11 +26,11 @@ type Actions = {
 const initialState: SellModalState & Actions = {
 	isOpen: false,
 	collectionAddress: '' as Hex,
-	chainId: '',
+	chainId: 0,
 	tokenId: '',
 	order: undefined,
 	callbacks: undefined,
-
+	sellIsBeingProcessed: false,
 	open: (args) => {
 		sellModal$.collectionAddress.set(args.collectionAddress);
 		sellModal$.chainId.set(args.chainId);
@@ -42,6 +43,7 @@ const initialState: SellModalState & Actions = {
 	close: () => {
 		sellModal$.isOpen.set(false);
 		sellModal$.callbacks.set(undefined);
+		sellModal$.sellIsBeingProcessed.set(false);
 	},
 	steps: {
 		approval: {

package/src/react/ui/modals/TransferModal/_store.ts

@@ -4,20 +4,26 @@ import type { ShowTransferModalArgs } from '.';
 import type { CollectionType } from '../../../_internal';
 import type { ModalCallbacks } from '../_internal/types';
 
+export type TransferModalView =
+	| 'enterReceiverAddress'
+	| 'followWalletInstructions'
+	| undefined;
+
 export interface TransferModalState {
 	isOpen: boolean;
 	open: (args: ShowTransferModalArgs) => void;
 	close: () => void;
 	state: {
-		chainId: string;
+		chainId: number;
 		collectionAddress: Hex;
 		collectionType?: CollectionType | undefined;
 		collectibleId: string;
 		quantity: string;
 		receiverAddress: string;
 		callbacks?: ModalCallbacks;
+		transferIsBeingProcessed: boolean;
 	};
-	view: 'enterReceiverAddress' | 'followWalletInstructions' | undefined;
+	view: TransferModalView;
 	hash: Hex | undefined;
 }
 
@@ -40,18 +46,24 @@ export const initialState: TransferModalState = {
 	},
 	close: () => {
 		transferModal$.isOpen.set(false);
+
+		// TODO: this doesn't work as expected
 		transferModal$.state.set({
 			...initialState.state,
 		});
+
+		transferModal$.state.receiverAddress.set('');
+		transferModal$.state.transferIsBeingProcessed.set(false);
 		transferModal$.view.set('enterReceiverAddress');
 		transferModal$.hash.set(undefined);
 	},
 	state: {
 		receiverAddress: '',
 		collectionAddress: '0x',
-		chainId: '',
+		chainId: 0,
 		collectibleId: '',
 		quantity: '1',
+		transferIsBeingProcessed: false,
 	},
 	view: 'enterReceiverAddress',
 	hash: undefined,

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/_components/TokenQuantityInput.tsx

@@ -0,0 +1,58 @@
+import { cn } from '@0xsequence/design-system';
+import { Text } from '@0xsequence/design-system';
+import { observable } from '@legendapp/state';
+import { observer } from '@legendapp/state/react';
+import QuantityInput from '../../../../_internal/components/quantityInput';
+import { transferModal$ } from '../../../_store';
+
+const TokenQuantityInput = observer(
+	({
+		balanceAmount,
+		collection,
+		isProcessingWithWaaS,
+	}: {
+		balanceAmount?: bigint;
+		collection?: { decimals?: number };
+		isProcessingWithWaaS: boolean;
+	}) => {
+		const $quantity = transferModal$.state.quantity;
+		const $invalidQuantity = observable(false);
+
+		let insufficientBalance = true;
+		if (balanceAmount !== undefined && $quantity.get()) {
+			try {
+				const quantityBigInt = BigInt($quantity.get());
+				insufficientBalance = quantityBigInt > balanceAmount;
+			} catch (e) {
+				insufficientBalance = true;
+			}
+		}
+
+		return (
+			<div
+				className={cn(
+					'flex flex-col gap-3',
+					isProcessingWithWaaS && 'pointer-events-none opacity-50',
+				)}
+			>
+				<QuantityInput
+					$quantity={$quantity}
+					$invalidQuantity={$invalidQuantity}
+					decimals={collection?.decimals || 0}
+					maxQuantity={balanceAmount ? String(balanceAmount) : '0'}
+					className="[&>label>div>div]:h-13 [&>label>div>div]:rounded-xl [&>label>div>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1"
+				/>
+
+				<Text
+					className="font-body text-xs"
+					color={insufficientBalance ? 'negative' : 'text50'}
+					fontWeight="medium"
+				>
+					{`You have ${balanceAmount?.toString() || '0'} of this item`}
+				</Text>
+			</div>
+		);
+	},
+);
+
+export default TokenQuantityInput;