@0xsequence/marketplace-sdk 0.3.5 → 0.3.7

package/dist/react/index.js

@@ -8,10 +8,10 @@ import {
   useSellModal,
   useSuccessfulPurchaseModal,
   useTransferModal
-} from "../chunk-URTXTVOU.js";
-import "../chunk-Q57TEA3Z.js";
+} from "../chunk-3LGNSRBR.js";
+import "../chunk-NMCGA2TB.js";
 import "../chunk-FFCNYF3S.js";
-import "../chunk-RZSZNVEH.js";
+import "../chunk-L6GSYPCR.js";
 import "../chunk-O642NH7U.js";
 import {
   MarketplaceProvider,
@@ -74,16 +74,16 @@ import {
   useMarketplaceConfig,
   useRoyaltyPercentage,
   useTransferTokens
-} from "../chunk-6LQST3KZ.js";
+} from "../chunk-QGELCUYG.js";
 import "../chunk-Y7YO5TLE.js";
 import "../chunk-7NJETFMF.js";
 import "../chunk-SBVLWSRZ.js";
 import "../chunk-NJ2GXOPW.js";
+import "../chunk-MJ4YU7RW.js";
 import "../chunk-OUZ42I6B.js";
 import "../chunk-MCI3KOSQ.js";
-import "../chunk-3OHM45R3.js";
 import "../chunk-WFE6OCYF.js";
-import "../chunk-MJ4YU7RW.js";
+import "../chunk-3OHM45R3.js";
 import "../chunk-Q2BVDQ3G.js";
 import {
   getQueryClient

package/dist/react/ui/components/index.js

@@ -1,21 +1,21 @@
 "use client"
 import {
   CollectibleCard
-} from "../../../chunk-URTXTVOU.js";
-import "../../../chunk-Q57TEA3Z.js";
+} from "../../../chunk-3LGNSRBR.js";
+import "../../../chunk-NMCGA2TB.js";
 import "../../../chunk-FFCNYF3S.js";
-import "../../../chunk-RZSZNVEH.js";
+import "../../../chunk-L6GSYPCR.js";
 import "../../../chunk-O642NH7U.js";
-import "../../../chunk-6LQST3KZ.js";
+import "../../../chunk-QGELCUYG.js";
 import "../../../chunk-Y7YO5TLE.js";
 import "../../../chunk-7NJETFMF.js";
 import "../../../chunk-SBVLWSRZ.js";
 import "../../../chunk-NJ2GXOPW.js";
+import "../../../chunk-MJ4YU7RW.js";
 import "../../../chunk-OUZ42I6B.js";
 import "../../../chunk-MCI3KOSQ.js";
-import "../../../chunk-3OHM45R3.js";
 import "../../../chunk-WFE6OCYF.js";
-import "../../../chunk-MJ4YU7RW.js";
+import "../../../chunk-3OHM45R3.js";
 import "../../../chunk-Q2BVDQ3G.js";
 import "../../../chunk-D3HRXVYJ.js";
 import "../../../chunk-3CXEYH2I.js";

package/dist/react/ui/index.d.ts

@@ -10,24 +10,6 @@ import 'zod';
 
 declare const ModalProvider: () => react_jsx_runtime.JSX.Element;
 
-type OnApproveTokenError = (error: Error | unknown) => void;
-type BaseErrorCallbacks = {
-    onApproveTokenError?: OnApproveTokenError;
-    onSwitchingNotSupportedError?: () => void;
-    onUserRejectedSwitchingChainRequestError?: () => void;
-    onSwitchChainError?: (error: Error | unknown) => void;
-};
-type BaseSuccessCallbacks = {
-    onApproveTokenSuccess?: () => void;
-    onSwitchChainSuccess?: () => void;
-};
-type TransferErrorCallbacks = BaseErrorCallbacks & {
-    onTransferError?: (error: Error | unknown) => void;
-};
-type TransferSuccessCallbacks = BaseSuccessCallbacks & {
-    onTransferSuccess?: () => void;
-};
-
 type ModalCallbacks = {
     onSuccess?: (hash: Hash) => void;
     onError?: (error: Error) => void;
@@ -83,14 +65,15 @@ declare const useSuccessfulPurchaseModal: (callbacks?: ModalCallbacks) => {
 
 type ShowTransferModalArgs = {
     collectionAddress: Hex;
-    tokenId: string;
+    collectibleId: string;
     chainId: string;
+    callbacks?: ModalCallbacks;
 };
 declare const useTransferModal: () => {
     show: (args: ShowTransferModalArgs) => void;
     close: () => void;
-    onError: (callbacks: TransferErrorCallbacks) => void;
-    onSuccess: (callbacks: TransferSuccessCallbacks) => void;
+    onError: (callbacks: ModalCallbacks) => void;
+    onSuccess: (callbacks: ModalCallbacks) => void;
 };
 
 type ShowSellModalArgs = {

package/dist/react/ui/index.js

@@ -8,21 +8,21 @@ import {
   useSellModal,
   useSuccessfulPurchaseModal,
   useTransferModal
-} from "../../chunk-URTXTVOU.js";
-import "../../chunk-Q57TEA3Z.js";
+} from "../../chunk-3LGNSRBR.js";
+import "../../chunk-NMCGA2TB.js";
 import "../../chunk-FFCNYF3S.js";
-import "../../chunk-RZSZNVEH.js";
+import "../../chunk-L6GSYPCR.js";
 import "../../chunk-O642NH7U.js";
-import "../../chunk-6LQST3KZ.js";
+import "../../chunk-QGELCUYG.js";
 import "../../chunk-Y7YO5TLE.js";
 import "../../chunk-7NJETFMF.js";
 import "../../chunk-SBVLWSRZ.js";
 import "../../chunk-NJ2GXOPW.js";
+import "../../chunk-MJ4YU7RW.js";
 import "../../chunk-OUZ42I6B.js";
 import "../../chunk-MCI3KOSQ.js";
-import "../../chunk-3OHM45R3.js";
 import "../../chunk-WFE6OCYF.js";
-import "../../chunk-MJ4YU7RW.js";
+import "../../chunk-3OHM45R3.js";
 import "../../chunk-Q2BVDQ3G.js";
 import "../../chunk-D3HRXVYJ.js";
 import "../../chunk-3CXEYH2I.js";

package/dist/react/ui/modals/_internal/components/actionModal/index.d.ts

@@ -19,7 +19,7 @@ interface ActionModalProps {
     children: react__default.ReactNode;
     ctas: {
         label: string;
-        onClick: () => void;
+        onClick: (() => Promise<void>) | (() => void);
         pending?: boolean;
         disabled?: boolean;
         hidden?: boolean;

package/dist/react/ui/modals/_internal/components/actionModal/index.js

@@ -4,7 +4,7 @@ import {
   closeModal,
   createActionModalStore,
   openModal
-} from "../../../../../../chunk-Q57TEA3Z.js";
+} from "../../../../../../chunk-NMCGA2TB.js";
 import {
   closeButton,
   cta,

package/dist/react/ui/styles/index.d.ts

@@ -1,5 +1,5 @@
 declare const dialogOverlay: string;
-declare const dialogContent: Record<"narrow" | "wide", string>;
+declare const dialogContent: Record<"wide" | "narrow", string>;
 declare const closeButton: string;
 
 export { closeButton, dialogContent, dialogOverlay };

package/dist/styles/index.d.ts

@@ -43,7 +43,7 @@ declare const alertMessageBox: string;
 declare const alertMessageBoxVariants: Record<"info" | "warning", string>;
 
 declare const switchChainModalContent: string;
-declare const switchChainCta: Record<"default" | "pending", string>;
+declare const switchChainCta: Record<"pending" | "default", string>;
 
 declare const collectiblesGrid: string;
 declare const collectiblesGridItem: string;

package/dist/styles/index.js

@@ -18,7 +18,7 @@ import {
   quantityInputWrapper,
   tokenPreview,
   transferModalContent
-} from "../chunk-RZSZNVEH.js";
+} from "../chunk-L6GSYPCR.js";
 import {
   cta
 } from "../chunk-O642NH7U.js";

package/dist/utils/abi/index.js

@@ -1,15 +1,15 @@
 "use client"
 import "../../chunk-MCI3KOSQ.js";
-import {
-  EIP2981_ABI,
-  SequenceMarketplaceV1_ABI,
-  SequenceMarketplaceV2_ABI
-} from "../../chunk-3OHM45R3.js";
 import {
   ERC1155_ABI,
   ERC20_ABI,
   ERC721_ABI
 } from "../../chunk-WFE6OCYF.js";
+import {
+  EIP2981_ABI,
+  SequenceMarketplaceV1_ABI,
+  SequenceMarketplaceV2_ABI
+} from "../../chunk-3OHM45R3.js";
 export {
   EIP2981_ABI,
   ERC1155_ABI,

package/dist/utils/index.js

@@ -8,16 +8,16 @@ import {
   truncateMiddle
 } from "../chunk-OUZ42I6B.js";
 import "../chunk-MCI3KOSQ.js";
-import {
-  EIP2981_ABI,
-  SequenceMarketplaceV1_ABI,
-  SequenceMarketplaceV2_ABI
-} from "../chunk-3OHM45R3.js";
 import {
   ERC1155_ABI,
   ERC20_ABI,
   ERC721_ABI
 } from "../chunk-WFE6OCYF.js";
+import {
+  EIP2981_ABI,
+  SequenceMarketplaceV1_ABI,
+  SequenceMarketplaceV2_ABI
+} from "../chunk-3OHM45R3.js";
 import "../chunk-T2AMWIKD.js";
 export {
   EIP2981_ABI,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@0xsequence/marketplace-sdk",
   "private": false,
-  "version": "0.3.5",
+  "version": "0.3.7",
   "type": "module",
   "exports": {
     ".": {

package/src/react/_internal/transaction-machine/execute-transaction.ts

@@ -67,6 +67,7 @@ export enum TransactionType {
 	SELL = 'SELL',
 	LISTING = 'LISTING',
 	OFFER = 'OFFER',
+	TRANSFER = 'TRANSFER',
 	CANCEL = 'CANCEL',
 }
 
@@ -78,6 +79,7 @@ export interface TransactionConfig {
 	collectionAddress: string;
 	sdkConfig: SdkConfig;
 	marketplaceConfig: MarketplaceConfig;
+	isWaaS: boolean;
 }
 
 interface StateConfig {
@@ -360,7 +362,10 @@ export class TransactionMachine {
 
 			await this.transition(TransactionState.SWITCH_CHAIN);
 			try {
-				await this.switchChainFn(this.config.config.chainId);
+				if (!this.config.config.isWaaS) {
+					await this.switchChainFn(this.config.config.chainId);
+				}
+				
 				await this.walletClient.switchChain({
 					id: Number(this.config.config.chainId),
 				});
@@ -413,6 +418,8 @@ export class TransactionMachine {
 
 	private async executeTransaction(step: Step): Promise<Hash> {
 		try {
+			await this.switchChain();
+
 			const transactionData = {
 				account: this.getAccount(),
 				chain: this.getChainForTransaction(),
@@ -438,6 +445,8 @@ export class TransactionMachine {
 			throw new MissingPostStepError();
 		}
 
+		await this.switchChain();
+
 		let signature: Hex;
 		if (!step.signature) {
 			throw new MissingSignatureDataError();
@@ -594,8 +603,6 @@ export class TransactionMachine {
 				throw new MissingStepDataError();
 			}
 
-			await this.switchChain();
-
 			if (step.id === StepType.buy) {
 				await this.executeBuyStep({ step, props: props as BuyInput });
 				return;

package/src/react/_internal/transaction-machine/useTransactionMachine.ts

@@ -18,7 +18,7 @@ import {
 
 export type UseTransactionMachineConfig = Omit<
 	TransactionConfig,
-	'sdkConfig' | 'marketplaceConfig' | 'walletKind' | 'chains'
+	'sdkConfig' | 'marketplaceConfig' | 'walletKind' | 'chains' | 'isWaaS'
 >;
 
 export const useTransactionMachine = (
@@ -41,7 +41,12 @@ export const useTransactionMachine = (
 
 	const { connector, isConnected } = useAccount();
 	const walletKind =
-		connector?.id === 'sequence' ? WalletKind.sequence : WalletKind.unknown;
+		connector?.id === 'sequence' 
+			? WalletKind.sequence 
+				: WalletKind.unknown;
+
+	// TODO: remove this once we have a better way to check if the wallet is a WAAS wallet
+	const isWaaS = connector?.id.endsWith('waas') || false;
 
 	if (!isConnected) {
 		// No wallet connected, TODO: add some sort of state for this
@@ -74,19 +79,27 @@ export const useTransactionMachine = (
 
 	const machine = new TransactionMachine(
 		{
-			config: { sdkConfig, marketplaceConfig, walletKind, chains, ...config },
+			config: { 
+				sdkConfig, 
+				marketplaceConfig, 
+				walletKind,
+				chains, 
+				...config,
+				isWaaS
+			},
 			onSuccess,
 			onTransactionSent,
 		},
 		walletClient,
 		getPublicRpcClient(config.chainId),
 		openSelectPaymentModal,
-		async (chainId) =>
+		async () =>
 			new Promise((resolve, reject) => {
 				showSwitchChainModal({
-					chainIdToSwitchTo: Number(chainId),
+					chainIdToSwitchTo: Number(config.chainId),
 					onSuccess: resolve,
 					onError: reject,
+					onClose: reject,
 				});
 			}),
 	);

package/src/react/ui/components/_internals/action-button/ActionButton.tsx

@@ -121,7 +121,7 @@ export const ActionButton = observer(
 						showTransferModal({
 							collectionAddress: collectionAddress as Hex,
 							chainId: chainId,
-							tokenId,
+							collectibleId: tokenId,
 						})
 					}
 				/>

package/src/react/ui/components/_internals/custom-select/CustomSelect.tsx

@@ -9,7 +9,7 @@ interface CustomSelectProps {
 		label: string;
 		disabled?: boolean;
 	}>;
-	placeholder?: string;
+	value: string;
 	onValueChange?: (value: string) => void;
 	defaultValue?: string;
 }
@@ -30,14 +30,14 @@ const CustomSelectItem = React.forwardRef<
 
 export const CustomSelect: React.FC<CustomSelectProps> = ({
 	items,
-	placeholder = 'Select an item...',
+	value,
 	onValueChange,
 	defaultValue,
 }) => {
 	return (
 		<Select.Root onValueChange={onValueChange} defaultValue={defaultValue}>
-			<Select.Trigger className={trigger}>
-				<Select.Value placeholder={placeholder} />
+			<Select.Trigger className={trigger} value={value}>
+				<Select.Value />
 				<Select.Icon>
 					<ChevronDownIcon size="xs" />
 				</Select.Icon>

package/src/react/ui/modals/BuyModal/index.tsx

@@ -1,4 +1,5 @@
 import type { TokenMetadata } from '@0xsequence/indexer';
+import { Box, Text, TokenImage } from '@0xsequence/design-system';
 import { Show, observer, useSelector } from '@legendapp/state/react';
 import { useEffect } from 'react';
 import type { Hex } from 'viem';
@@ -10,6 +11,8 @@ import QuantityInput from '..//_internal/components/quantityInput';
 import { ActionModal } from '../_internal/components/actionModal';
 import type { ModalCallbacks } from '../_internal/types';
 import { buyModal$ } from './_store';
+import { formatUnits, parseUnits } from 'viem';
+import { useCurrencies } from '../../../hooks';
 
 export type ShowBuyModalArgs = {
 	chainId: string;
@@ -103,7 +106,7 @@ function CheckoutModal({
 			buy({
 				orderId: order.orderId,
 				collectableDecimals: collectable.decimals || 0,
-				quantity: '1',
+				quantity: parseUnits('1', collectable.decimals || 0).toString(),
 				marketplace: order.marketplace,
 			});
 		};
@@ -123,9 +126,22 @@ interface ERC1155QuantityModalProps extends CheckoutModalProps {
 const ERC1155QuantityModal = observer(
 	({ buy, collectable, order }: ERC1155QuantityModalProps) => {
 		buyModal$.state.quantity.set(
-			Math.max(Number(order.quantityRemaining), 1).toString(),
+			Math.min(Number(order.quantityRemaining), 1).toString(),
 		);
 
+		const { data: currencies } = useCurrencies({
+			chainId: order.chainId,
+			collectionAddress: order.collectionContractAddress,
+		});
+
+		const currency = currencies?.find(
+			(currency) => currency.contractAddress === order.priceCurrencyAddress,
+		);
+
+		const quantity = Number(buyModal$.state.quantity.get());
+		const pricePerToken = order.priceAmount;
+		const totalPrice = (BigInt(quantity) * BigInt(pricePerToken)).toString();
+
 		return (
 			<ActionModal
 				store={buyModal$}
@@ -133,10 +149,13 @@ const ERC1155QuantityModal = observer(
 				title="Select Quantity"
 				ctas={[
 					{
-						label: 'Select Quantity',
+						label: 'Buy now',
 						onClick: () => {
 							buy({
-								quantity: buyModal$.state.quantity.get(),
+								quantity: parseUnits(
+									buyModal$.state.quantity.get(),
+									collectable.decimals || 0,
+								).toString(),
 								orderId: order.orderId,
 								collectableDecimals: collectable.decimals || 0,
 								marketplace: order.marketplace,
@@ -146,12 +165,25 @@ const ERC1155QuantityModal = observer(
 					},
 				]}
 			>
-				<QuantityInput
-					$quantity={buyModal$.state.quantity}
-					$invalidQuantity={buyModal$.state.invalidQuantity}
-					decimals={order.quantityDecimals}
-					maxQuantity={order.quantityRemaining}
-				/>
+				<Box display="flex" flexDirection="column" gap="4">
+					<QuantityInput
+						$quantity={buyModal$.state.quantity}
+						$invalidQuantity={buyModal$.state.invalidQuantity}
+						decimals={order.quantityDecimals}
+						maxQuantity={order.quantityRemaining}
+					/>
+					<Box display="flex" justifyContent="space-between">
+						<Text color="text50" fontSize="small">
+							Total Price
+						</Text>
+						<Box display="flex" alignItems="center" gap="2">
+							<TokenImage src={currency?.imageUrl} size="xs" />
+							<Text color="text100" fontSize="small" fontWeight="bold">
+								{formatUnits(BigInt(totalPrice), currency?.decimals || 0)}
+							</Text>
+						</Box>
+					</Box>
+				</Box>
 			</ActionModal>
 		);
 	},

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

@@ -2,12 +2,9 @@ import { Box } from '@0xsequence/design-system';
 import { Show, observer } from '@legendapp/state/react';
 import type { QueryKey } from '@tanstack/react-query';
 import type { Hash, Hex } from 'viem';
+import { parseUnits } from 'viem';
 import { useAccount } from 'wagmi';
-import {
-	type ContractType,
-	StepType,
-	collectableKeys,
-} from '../../../_internal';
+import { type ContractType, collectableKeys } from '../../../_internal';
 import {
 	useBalanceOfCollectible,
 	useCollectible,
@@ -29,10 +26,7 @@ import TransactionDetails from '../_internal/components/transactionDetails';
 import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../_internal/types';
 import { createListingModal$ } from './_store';
-import {
-	getCreateListingTransactionMessage,
-	getCreateListingTransactionTitle,
-} from './_utils/getCreateListingTransactionTitleMessage';
+import { TransactionType } from '../../../_internal/transaction-machine/execute-transaction';
 
 export type ShowCreateListingModalArgs = {
 	collectionAddress: Hex;
@@ -108,11 +102,8 @@ export const Modal = observer(
 					collectionAddress,
 					chainId,
 					price: createListingModal$.listingPrice.get(),
-					tokenId: collectibleId,
-					getTitle: getCreateListingTransactionTitle,
-					getMessage: (params) =>
-						getCreateListingTransactionMessage(params, collectible?.name || ''),
-					type: StepType.createListing,
+					collectibleId,
+					type: TransactionType.LISTING,
 					queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
 				});
 				createListingModal$.close();
@@ -161,11 +152,13 @@ export const Modal = observer(
 			Math.floor(date.getTime() / 1000).toString();
 
 		const { isLoading, steps, refreshSteps } = getListingSteps({
-			// biome-ignore lint/style/noNonNullAssertion: <explanation>
 			contractType: collection!.type as ContractType,
 			listing: {
 				tokenId: collectibleId,
-				quantity: createListingModal$.quantity.get(),
+				quantity: parseUnits(
+					createListingModal$.quantity.get(),
+					collectible?.decimals || 0,
+				).toString(),
 				expiry: dateToUnixTime(createListingModal$.expiry.get()),
 				currencyAddress: listingPrice.currency.contractAddress,
 				pricePerToken: listingPrice.amountRaw,

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

@@ -27,7 +27,7 @@ const initialState: MakeOfferModalState & {
 	collectibleId: '',
 	callbacks: undefined,
 	offerPrice: {
-		amountRaw: '0',
+		amountRaw: '1',
 		currency: {} as Currency,
 	},
 	quantity: '1',

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

@@ -1,8 +1,8 @@
 import { Show, observer } from '@legendapp/state/react';
 import type { QueryKey } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
-import type { Hex } from 'viem';
-import { ContractType, StepType, collectableKeys } from '../../../_internal';
+import { parseUnits, type Hex } from 'viem';
+import { ContractType, collectableKeys } from '../../../_internal';
 import { useCollectible, useCollection, useCurrencies } from '../../../hooks';
 import { useMakeOffer } from '../../../hooks/useMakeOffer';
 import { ActionModal } from '../_internal/components/actionModal/ActionModal';
@@ -16,10 +16,7 @@ import TokenPreview from '../_internal/components/tokenPreview';
 import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../_internal/types';
 import { makeOfferModal$ } from './_store';
-import {
-	getMakeOfferTransactionMessage,
-	getMakeOfferTransactionTitle,
-} from './_utils/getMakeOfferTransactionTitleMessage';
+import { TransactionType } from '../../../_internal/transaction-machine/execute-transaction';
 
 export type ShowMakeOfferModalArgs = {
 	collectionAddress: Hex;
@@ -90,11 +87,8 @@ const ModalContent = observer(
 					price: makeOfferModal$.offerPrice.get(),
 					collectionAddress,
 					chainId,
-					tokenId: collectibleId,
-					getTitle: getMakeOfferTransactionTitle,
-					getMessage: (params) =>
-						getMakeOfferTransactionMessage(params, collectible?.name || ''),
-					type: StepType.createOffer,
+					collectibleId,
+					type: TransactionType.OFFER,
 					queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
 				});
 				makeOfferModal$.close();
@@ -124,7 +118,10 @@ const ModalContent = observer(
 			contractType: collection!.type as ContractType,
 			offer: {
 				tokenId: collectibleId,
-				quantity: makeOfferModal$.quantity.get(),
+				quantity: parseUnits(
+					makeOfferModal$.quantity.get(),
+					collectible?.decimals || 0,
+				).toString(),
 				expiry: dateToUnixTime(makeOfferModal$.expiry.get()),
 				currencyAddress,
 				pricePerToken: offerPrice.amountRaw,

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

@@ -1,9 +1,9 @@
 import { Show, observer } from '@legendapp/state/react';
 import type { QueryKey } from '@tanstack/react-query';
 import type { Hex } from 'viem';
+import { parseUnits } from 'viem';
 import {
 	type Order,
-	StepType,
 	balanceQueries,
 	collectableKeys,
 } from '../../../_internal';
@@ -18,10 +18,7 @@ import TransactionDetails from '../_internal/components/transactionDetails';
 import TransactionHeader from '../_internal/components/transactionHeader';
 import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
 import { sellModal$ } from './_store';
-import {
-	getSellTransactionMessage,
-	getSellTransactionTitle,
-} from './_utils/getSellTransactionTitleMessage';
+import { TransactionType } from '../../../_internal/transaction-machine/execute-transaction';
 
 export type ShowSellModalArgs = {
 	chainId: string;
@@ -77,11 +74,8 @@ const ModalContent = observer(
 					},
 					collectionAddress,
 					chainId,
-					tokenId,
-					getTitle: getSellTransactionTitle,
-					getMessage: (params) =>
-						getSellTransactionMessage(params, collectible?.name || ''),
-					type: StepType.sell,
+					collectibleId: tokenId,
+					type: TransactionType.SELL,
 					queriesToInvalidate: [
 						...collectableKeys.all,
 						balanceQueries.all,
@@ -155,6 +149,12 @@ const ModalContent = observer(
 							sell({
 								orderId: order?.orderId,
 								marketplace: order?.marketplace,
+								quantity: order?.quantityRemaining
+									? parseUnits(
+											order.quantityRemaining,
+											collectible?.decimals || 0,
+										).toString()
+									: '1',
 							}),
 					},
 				]}