@0xsequence/marketplace-sdk 0.3.11 → 0.4.0

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

@@ -25,7 +25,7 @@ export const useTransactionMachine = (
 	config: UseTransactionMachineConfig,
 	onSuccess?: (hash: Hash) => void,
 	onError?: (error: TransactionError) => void,
-	onTransactionSent?: (hash: Hash) => void,
+	onTransactionSent?: (hash?: Hash, orderId?: string) => void,
 ) => {
 	const { data: walletClient, isLoading: walletClientIsLoading } =
 		useWalletClient();

package/src/react/hooks/useBuyCollectable.tsx

@@ -1,4 +1,4 @@
-import type { Hash } from 'viem';
+import type { Hash, Hex } from 'viem';
 import type { TransactionErrorTypes } from '../../utils/_internal/error/transaction';
 import {
 	type BuyInput,
@@ -15,7 +15,7 @@ interface UseBuyOrderArgs
 	extends Omit<UseTransactionMachineConfig, 'type' | 'orderbookKind'> {
 	onSuccess?: (hash: Hash) => void;
 	onError?: (error: UseBuyOrderError) => void;
-	onTransactionSent?: (hash: string) => void;
+	onTransactionSent?: (hash?: Hex) => void;
 }
 
 export const useBuyCollectable = ({

package/src/react/hooks/useCancelOrder.tsx

@@ -1,3 +1,4 @@
+import { Hex } from 'viem';
 import {
 	type CancelInput,
 	TransactionType,
@@ -11,7 +12,7 @@ interface UseCancelOrderArgs
 	extends Omit<UseTransactionMachineConfig, 'type' | 'orderbookKind'> {
 	onSuccess?: (hash: string) => void;
 	onError?: (error: Error) => void;
-	onTransactionSent?: (hash: string) => void;
+	onTransactionSent?: (hash?: Hex) => void;
 }
 
 export const useCancelOrder = ({

package/src/react/hooks/useCreateListing.tsx

@@ -15,7 +15,7 @@ interface UseCreateListingArgs
 	extends Omit<UseTransactionMachineConfig, 'type'> {
 	onSuccess?: (hash: Hash) => void;
 	onError?: (error: TransactionError) => void;
-	onTransactionSent?: (hash: Hash) => void;
+	onTransactionSent?: (hash?: Hash, orderId?: string) => void;
 }
 
 export const useCreateListing = ({

package/src/react/hooks/useCurrencies.tsx

@@ -40,7 +40,6 @@ const fetchCurrencies = async (chainId: ChainId, config: SdkConfig) => {
 };
 
 const selectCurrencies = (data: Currency[], args: UseCurrenciesArgs) => {
-	console.debug('[selectCurrencies]: Select Currencies Input:', { data, args });
 	const argsParsed = UseCurrenciesArgsSchema.parse(args);
 	// if collectionAddress is passed, filter currencies based on collection currency options
 	if (argsParsed.currencyOptions) {

package/src/react/hooks/useMakeOffer.tsx

@@ -14,7 +14,7 @@ import {
 interface UseMakeOfferArgs extends Omit<UseTransactionMachineConfig, 'type'> {
 	onSuccess?: (hash: Hash) => void;
 	onError?: (error: TransactionError) => void;
-	onTransactionSent?: (hash: Hash) => void;
+	onTransactionSent?: (hash?: Hash, orderId?: string) => void;
 }
 
 export const useMakeOffer = ({

package/src/react/hooks/useSell.tsx

@@ -14,7 +14,7 @@ interface UseSellArgs
 	extends Omit<UseTransactionMachineConfig, 'type' | 'orderbookKind'> {
 	onSuccess?: (hash: Hash) => void;
 	onError?: (error: Error) => void;
-	onTransactionSent?: (hash: Hash) => void;
+	onTransactionSent?: (hash?: Hash) => void;
 }
 
 export const useSell = ({

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

@@ -107,10 +107,12 @@ export const Modal = observer(
 			orderbookKind,
 			chainId,
 			collectionAddress,
-			onTransactionSent: (hash) => {
-				if (!hash) return;
+			onTransactionSent: (hash, orderId) => {
+				if (!hash && !orderId) return;
+
 				showTransactionStatusModal({
 					hash,
+					orderId,
 					collectionAddress,
 					chainId,
 					price: createListingModal$.listingPrice.get(),

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

@@ -93,10 +93,12 @@ const ModalContent = observer(
 			chainId,
 			collectionAddress,
 			orderbookKind,
-			onTransactionSent: (hash) => {
-				if (!hash) return;
+			onTransactionSent: (hash, orderId) => {
+				if (!hash && !orderId) return;
+
 				showTransactionStatusModal({
 					hash,
+					orderId,
 					price: makeOfferModal$.offerPrice.get(),
 					collectionAddress,
 					chainId,

package/src/react/ui/modals/_internal/components/currencyOptionsSelect/index.tsx

@@ -39,16 +39,10 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 			currencies.length > 0 &&
 			!selectedCurrency$.get()?.contractAddress
 		) {
-			console.debug('Setting default currency', currencies[0]);
 			selectedCurrency$.set(currencies[0]);
 		}
 	}, [currencies]);
 
-	console.debug('CurrencyOptionsSelect', {
-		currencies,
-		currenciesLoading,
-		currency,
-	});
 	if (!currencies || currenciesLoading || !currency.symbol) {
 		return <Skeleton borderRadius="lg" width="20" height="7" marginRight="3" />;
 	}

package/src/react/ui/modals/_internal/components/transaction-footer/index.tsx

@@ -5,7 +5,8 @@ import { Box, Spinner, Text } from '@0xsequence/design-system';
 import type { Hex } from 'viem';
 
 type TransactionFooterProps = {
-	transactionHash: Hex;
+	transactionHash: Hex | undefined;
+	orderId?: string;
 	isConfirming: boolean;
 	isConfirmed: boolean;
 	isFailed: boolean;
@@ -15,6 +16,7 @@ type TransactionFooterProps = {
 
 export default function TransactionFooter({
 	transactionHash,
+	orderId,
 	isConfirming,
 	isConfirmed,
 	isFailed,
@@ -22,12 +24,12 @@ export default function TransactionFooter({
 	chainId,
 }: TransactionFooterProps) {
 	const icon =
-		(isConfirming && <Spinner size="md" />) ||
-		(isConfirmed && <SvgPositiveCircleIcon size="md" />);
+		((isConfirmed || orderId) && <SvgPositiveCircleIcon size="md" />) ||
+		(isConfirming && <Spinner size="md" />);
 
 	const title =
+		((isConfirmed || orderId) && 'Transaction complete') ||
 		(isConfirming && 'Processing transaction') ||
-		(isConfirmed && 'Transaction complete') ||
 		(isFailed && 'Transaction failed') ||
 		(isTimeout && 'Transaction took longer than expected');
 
@@ -64,7 +66,7 @@ export default function TransactionFooter({
 					fontWeight="medium"
 					fontFamily="body"
 				>
-					{truncateMiddle(transactionHash, 4, 4)}
+					{transactionHash && truncateMiddle(transactionHash, 4, 4)}
 				</Text>
 			</Box>
 		</Box>

package/src/react/ui/modals/_internal/components/transactionPreview/index.tsx

@@ -16,6 +16,7 @@ import type { TokenMetadata } from '@0xsequence/metadata';
 import ChessTileImage from '../../../../images/chess-tile.png';
 
 type TransactionPreviewProps = {
+	orderId?: string;
 	price?: Price;
 	collectionAddress: Hex;
 	chainId: string;
@@ -30,6 +31,7 @@ type TransactionPreviewProps = {
 
 const TransactionPreview = observer(
 	({
+		orderId,
 		price,
 		collectionAddress,
 		chainId,
@@ -43,6 +45,7 @@ const TransactionPreview = observer(
 	}: TransactionPreviewProps) => {
 		const { type } = transactionStatusModal$.state.get();
 		const title = useTransactionPreviewTitle(
+			orderId,
 			{ isConfirmed, isConfirming, isFailed, isTimeout },
 			type,
 		);

package/src/react/ui/modals/_internal/components/transactionPreview/useTransactionPreviewTitle.tsx

@@ -1,22 +1,20 @@
-import { useMemo } from 'react';
 import type { ConfirmationStatus } from '../transactionStatusModal/store';
 import { TRANSACTION_TITLES } from './consts';
 import { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
 
 export function useTransactionPreviewTitle(
+	orderId: string | undefined,
 	status: ConfirmationStatus,
 	type?: TransactionType | undefined,
 ): string {
-	return useMemo(() => {
-		if (!type) return '';
+	if (!type) return '';
 
-		const { isConfirming, isConfirmed, isFailed } = status;
-		const titles = TRANSACTION_TITLES[type];
+	const { isConfirming, isConfirmed, isFailed } = status;
+	const titles = TRANSACTION_TITLES[type];
 
-		if (isConfirming) return titles.confirming;
-		if (isConfirmed) return titles.confirmed;
-		if (isFailed) return titles.failed;
+	if (isConfirmed || orderId) return titles.confirmed;
+	if (isConfirming) return titles.confirming;
+	if (isFailed) return titles.failed;
 
-		return '';
-	}, [status, type]);
+	return '';
 }

package/src/react/ui/modals/_internal/components/transactionStatusModal/index.tsx

@@ -29,7 +29,8 @@ import { getTransactionStatusModalTitle } from './util/getTitle';
 import { getTransactionStatusModalMessage } from './util/getMessage';
 
 export type ShowTransactionStatusModalArgs = {
-	hash: Hex;
+	hash?: Hex;
+	orderId?: string;
 	price?: Price;
 	collectionAddress: Hex;
 	chainId: string;
@@ -56,6 +57,7 @@ const TransactionStatusModal = observer(() => {
 	const {
 		type,
 		hash,
+		orderId,
 		price,
 		collectionAddress,
 		chainId,
@@ -69,16 +71,19 @@ const TransactionStatusModal = observer(() => {
 		chainId,
 		collectibleId,
 	});
-	const [transactionStatus, setTransactionStatus] =
-		useState<TransactionStatus>('PENDING');
+	const [transactionStatus, setTransactionStatus] = useState<TransactionStatus>(
+		orderId ? 'SUCCESS' : 'PENDING',
+	);
 	const title = getTransactionStatusModalTitle({
 		transactionStatus,
 		transactionType: type!,
+		orderId,
 	});
 	const message = getTransactionStatusModalMessage({
 		transactionStatus,
 		transactionType: type!,
 		collectibleName: collectible?.name || '',
+		orderId,
 	});
 	const { onError, onSuccess }: ModalCallbacks = callbacks || {};
 	const queryClient = getQueryClient();
@@ -146,6 +151,7 @@ const TransactionStatusModal = observer(() => {
 					)}
 
 					<TransactionPreview
+						orderId={orderId}
 						price={price}
 						collectionAddress={collectionAddress}
 						chainId={chainId}
@@ -159,7 +165,8 @@ const TransactionStatusModal = observer(() => {
 					/>
 
 					<TransactionFooter
-						transactionHash={hash!}
+						transactionHash={hash}
+						orderId={orderId}
 						isConfirming={transactionStatus === 'PENDING'}
 						isConfirmed={transactionStatus === 'SUCCESS'}
 						isFailed={transactionStatus === 'FAILED'}

package/src/react/ui/modals/_internal/components/transactionStatusModal/store.ts

@@ -21,6 +21,7 @@ export interface TransactionStatusModalState {
 	close: () => void;
 	state: {
 		hash: Hex | undefined;
+		orderId: string | undefined;
 		status: TransactionStatus;
 		type: TransactionType | undefined;
 		price: Price | undefined;
@@ -38,6 +39,7 @@ export const initialState: TransactionStatusModalState = {
 	isOpen: false,
 	open: ({
 		hash,
+		orderId,
 		price,
 		collectionAddress,
 		chainId,
@@ -51,6 +53,7 @@ export const initialState: TransactionStatusModalState = {
 		transactionStatusModal$.state.set({
 			...transactionStatusModal$.state.get(),
 			hash,
+			orderId,
 			price,
 			collectionAddress,
 			chainId,
@@ -71,6 +74,7 @@ export const initialState: TransactionStatusModalState = {
 	},
 	state: {
 		hash: undefined,
+		orderId: undefined,
 		status: 'PENDING',
 		price: undefined,
 		collectionAddress: '' as Hex,

package/src/react/ui/modals/_internal/components/transactionStatusModal/util/getMessage.ts

@@ -6,14 +6,20 @@ export function getTransactionStatusModalMessage({
 	transactionStatus,
 	transactionType,
 	collectibleName,
+	orderId,
 }: {
 	transactionStatus: TransactionStatus;
 	transactionType: TransactionType;
 	collectibleName: string;
+	orderId?: string;
 }): string {
 	// without this, the text will be "Your cancellation CollectibleXXX has failed." which sounds weird
 	const hideCollectibleName = transactionType === 'CANCEL';
 
+	if (orderId) {
+		return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ''}. It's been confirmed on the blockchain!`;
+	}
+
 	switch (transactionStatus) {
 		case 'PENDING':
 			return `You just ${getFormattedType(transactionType, true)}${!hideCollectibleName ? ` ${collectibleName}` : ''}. It should be confirmed on the blockchain shortly.`;

package/src/react/ui/modals/_internal/components/transactionStatusModal/util/getTitle.ts

@@ -5,10 +5,16 @@ import { getFormattedType } from './getFormattedType';
 export function getTransactionStatusModalTitle({
 	transactionStatus,
 	transactionType,
+	orderId,
 }: {
 	transactionStatus: TransactionStatus;
 	transactionType: TransactionType;
+	orderId?: string;
 }): string {
+	if (orderId) {
+		return `Your ${getFormattedType(transactionType)} has processed`;
+	}
+
 	switch (transactionStatus) {
 		case 'PENDING':
 			return `Your ${getFormattedType(transactionType)} is processing`;

package/src/utils/_internal/error/transaction.ts

@@ -84,6 +84,16 @@ export class InsufficientFundsError extends TransactionError {
 	}
 }
 
+export class SignatureExecutionError extends TransactionError {
+	override name = 'SignatureExecutionError';
+	constructor(signature: string, cause?: Error) {
+		super(`Failed  to execute signature: ${signature}`, {
+			details: cause?.message || 'The execution of the signature failed.',
+			cause,
+		});
+	}
+}
+
 export class StepExecutionError extends TransactionError {
 	override name = 'StepExecutionError';
 	constructor(stepId: string, cause?: Error) {