@0xsequence/marketplace-sdk 0.3.11 → 0.4.1

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

@@ -4,32 +4,33 @@ import {
 	Skeleton,
 	Text,
 } from '@0xsequence/design-system';
+import { TRANSACTION_CONFIRMATIONS_DEFAULT } from '@0xsequence/kit';
+import type { ChainId } from '@0xsequence/network';
 import { observer } from '@legendapp/state/react';
 import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
-import { type QueryKey } from '@tanstack/react-query';
+import type { QueryKey } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
-import { WaitForTransactionReceiptTimeoutError, type Hex } from 'viem';
+import { type Hex, WaitForTransactionReceiptTimeoutError } from 'viem';
 import type { Price } from '../../../../../../types';
+import { getPublicRpcClient } from '../../../../../../utils';
 import { getQueryClient } from '../../../../../_internal';
+import type { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
 import { useCollectible } from '../../../../../hooks';
+import type { ModalCallbacks } from '../../types';
 import TransactionFooter from '../transaction-footer';
 import TransactionPreview from '../transactionPreview';
-import { TransactionStatus, transactionStatusModal$ } from './store';
+import { type TransactionStatus, transactionStatusModal$ } from './store';
 import {
 	closeButton,
 	dialogOverlay,
 	transactionStatusModalContent,
 } from './styles.css';
-import { ChainId } from '@0xsequence/network';
-import { getPublicRpcClient } from '../../../../../../utils';
-import { TRANSACTION_CONFIRMATIONS_DEFAULT } from '@0xsequence/kit';
-import { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
-import { ModalCallbacks } from '../../types';
-import { getTransactionStatusModalTitle } from './util/getTitle';
 import { getTransactionStatusModalMessage } from './util/getMessage';
+import { getTransactionStatusModalTitle } from './util/getTitle';
 
 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,26 +71,11 @@ const TransactionStatusModal = observer(() => {
 		chainId,
 		collectibleId,
 	});
-	const [transactionStatus, setTransactionStatus] =
-		useState<TransactionStatus>('PENDING');
-	const title = getTransactionStatusModalTitle({
-		transactionStatus,
-		transactionType: type!,
-	});
-	const message = getTransactionStatusModalMessage({
-		transactionStatus,
-		transactionType: type!,
-		collectibleName: collectible?.name || '',
-	});
-	const { onError, onSuccess }: ModalCallbacks = callbacks || {};
-	const queryClient = getQueryClient();
-	const publicClient = chainId ? getPublicRpcClient(chainId) : null;
-	const waitForTransactionReceiptPromise =
-		publicClient?.waitForTransactionReceipt({
-			confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
-			hash: hash!,
-		});
+	const [transactionStatus, setTransactionStatus] = useState<TransactionStatus>(
+		orderId ? 'SUCCESS' : 'PENDING',
+	);
 
+	// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
 	useEffect(() => {
 		if (!transactionStatusModal$.isOpen.get()) return;
 
@@ -98,9 +85,20 @@ const TransactionStatusModal = observer(() => {
 				if (receipt.status === 'success') {
 					console.log('receipt', receipt);
 					setTransactionStatus('SUCCESS');
+					if (callbacks?.onSuccess) {
+						callbacks.onSuccess(hash || '0x');
+					} else {
+						console.debug('onSuccess callback not provided:', hash);
+					}
 				}
 			})
 			.catch((error) => {
+				if (callbacks?.onError) {
+					callbacks.onError(error);
+				} else {
+					console.debug('onError callback not provided:', error);
+				}
+
 				if (error instanceof WaitForTransactionReceiptTimeoutError) {
 					setTransactionStatus('TIMEOUT');
 					return;
@@ -116,7 +114,36 @@ const TransactionStatusModal = observer(() => {
 		return () => {
 			setTransactionStatus('PENDING');
 		};
-	}, [onSuccess, onError, transactionStatusModal$.isOpen.get()]);
+	}, [
+		callbacks?.onSuccess,
+		callbacks?.onError,
+		transactionStatusModal$.isOpen.get(),
+	]);
+
+	if (!type) {
+		return null;
+	}
+
+	const title = getTransactionStatusModalTitle({
+		transactionStatus,
+		transactionType: type,
+		orderId,
+	});
+
+	const message = getTransactionStatusModalMessage({
+		transactionStatus,
+		transactionType: type,
+		collectibleName: collectible?.name || '',
+		orderId,
+	});
+
+	const queryClient = getQueryClient();
+	const publicClient = chainId ? getPublicRpcClient(chainId) : null;
+	const waitForTransactionReceiptPromise =
+		publicClient?.waitForTransactionReceipt({
+			confirmations: confirmations || TRANSACTION_CONFIRMATIONS_DEFAULT,
+			hash: hash || '0x',
+		});
 
 	return (
 		<Root open={transactionStatusModal$.isOpen.get()}>
@@ -146,6 +173,7 @@ const TransactionStatusModal = observer(() => {
 					)}
 
 					<TransactionPreview
+						orderId={orderId}
 						price={price}
 						collectionAddress={collectionAddress}
 						chainId={chainId}
@@ -159,7 +187,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

@@ -3,8 +3,8 @@ import type { QueryKey } from '@tanstack/react-query';
 import type { Hex } from 'viem';
 import type { ShowTransactionStatusModalArgs } from '.';
 import type { Price } from '../../../../../../types';
-import { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
-import { ModalCallbacks } from '../../types';
+import type { TransactionType } from '../../../../../_internal/transaction-machine/execute-transaction';
+import type { ModalCallbacks } from '../../types';
 
 export type ConfirmationStatus = {
 	isConfirming: boolean;
@@ -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/getFormattedType.ts

@@ -2,7 +2,7 @@ import { TransactionType } from '../../../../../../_internal/transaction-machine
 
 export function getFormattedType(
 	transactionType: TransactionType,
-	verb: boolean = false,
+	verb = false,
 ): string {
 	switch (transactionType) {
 		case TransactionType.TRANSFER:

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

@@ -1,19 +1,25 @@
-import { TransactionType } from '../../../../../../_internal/transaction-machine/execute-transaction';
-import { TransactionStatus } from '../store';
+import type { TransactionType } from '../../../../../../_internal/transaction-machine/execute-transaction';
+import type { TransactionStatus } from '../store';
 import { getFormattedType } from './getFormattedType';
 
 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

@@ -1,14 +1,23 @@
-import { TransactionType } from '../../../../../../_internal/transaction-machine/execute-transaction';
-import { TransactionStatus } from '../store';
+import type { TransactionType } from '../../../../../../_internal/transaction-machine/execute-transaction';
+import type { TransactionStatus } from '../store';
 import { getFormattedType } from './getFormattedType';
 
 export function getTransactionStatusModalTitle({
 	transactionStatus,
 	transactionType,
+	orderId,
 }: {
 	transactionStatus: TransactionStatus;
-	transactionType: TransactionType;
+	transactionType: TransactionType | undefined;
+	orderId?: string;
 }): string {
+	if (transactionType === undefined) {
+		return '';
+	}
+	if (orderId) {
+		return `Your ${getFormattedType(transactionType)} has processed`;
+	}
+
 	switch (transactionStatus) {
 		case 'PENDING':
 			return `Your ${getFormattedType(transactionType)} is processing`;

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

@@ -0,0 +1,146 @@
+import {
+	Box,
+	Button,
+	Skeleton,
+	Text,
+	WarningIcon,
+} from '@0xsequence/design-system';
+import { useWaasFeeOptions } from '@0xsequence/kit';
+import { observer } from '@legendapp/state/react';
+import { useEffect } from 'react';
+import { type Hex, zeroAddress } from 'viem';
+import { useAccount } from 'wagmi';
+import { useCurrencyBalance } from '../../../../../hooks/useCurrencyBalance';
+import WaasFeeOptionsSelect, {
+	type FeeOption,
+} from '../waasFeeOptionsSelect/WaasFeeOptionsSelect';
+import { waasFeeOptionsModal$ } from './store';
+import { feeOptionsWrapper } from './styles.css';
+
+type WaasFeeOptionsBoxProps = {
+	onFeeOptionsLoaded: () => void;
+	onFeeOptionConfirmed: () => void;
+	chainId: number;
+};
+
+const WaasFeeOptionsBox = observer(
+	({
+		onFeeOptionsLoaded,
+		onFeeOptionConfirmed,
+		chainId,
+	}: WaasFeeOptionsBoxProps) => {
+		const { address: userAddress } = useAccount();
+		const selectedFeeOption$ = waasFeeOptionsModal$.selectedFeeOption;
+		const [pendingFeeOptionConfirmation, confirmPendingFeeOption] =
+			useWaasFeeOptions();
+		const { data: currencyBalance, isLoading: currencyBalanceLoading } =
+			useCurrencyBalance({
+				chainId,
+				currencyAddress: (selectedFeeOption$.token.contractAddress.get() ||
+					zeroAddress) as Hex,
+				userAddress: userAddress as Hex,
+			});
+
+		// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+		useEffect(() => {
+			if (pendingFeeOptionConfirmation) {
+				onFeeOptionsLoaded();
+			}
+		}, [pendingFeeOptionConfirmation]);
+
+		const selectedFeeOption = selectedFeeOption$.get();
+		const insufficientBalance = (() => {
+			if (!selectedFeeOption?.value || !selectedFeeOption.token.decimals) {
+				return false;
+			}
+
+			if (!currencyBalance?.value && currencyBalance?.value !== 0n) {
+				return true;
+			}
+
+			try {
+				const feeValue = BigInt(selectedFeeOption.value);
+				return currencyBalance.value === 0n || currencyBalance.value < feeValue;
+			} catch {
+				return true;
+			}
+		})();
+
+		const handleConfirmFeeOption = () => {
+			if (!selectedFeeOption?.token || !pendingFeeOptionConfirmation?.id)
+				return;
+
+			confirmPendingFeeOption(
+				pendingFeeOptionConfirmation?.id,
+				selectedFeeOption.token.contractAddress || zeroAddress,
+			);
+
+			onFeeOptionConfirmed();
+		};
+
+		if (!pendingFeeOptionConfirmation) return null;
+
+		return (
+			<Box className={feeOptionsWrapper}>
+				<Text
+					fontSize="medium"
+					fontFamily="body"
+					fontWeight="bold"
+					marginBottom="2"
+				>
+					Select a fee option
+				</Text>
+
+				<WaasFeeOptionsSelect
+					options={(pendingFeeOptionConfirmation?.options as FeeOption[]) || []}
+					selectedFeeOption$={selectedFeeOption$}
+				/>
+
+				<Box
+					display="flex"
+					alignItems="center"
+					justifyContent="space-between"
+					width="full"
+				>
+					{currencyBalanceLoading ? (
+						<Skeleton style={{ height: 15 }} borderRadius="md" width="1/3" />
+					) : (
+						<Box display="flex" alignItems="center" gap="2">
+							{insufficientBalance && (
+								<WarningIcon color="negative" size="xs" />
+							)}
+							<Text
+								fontSize="small"
+								fontWeight="semibold"
+								fontFamily="body"
+								color={insufficientBalance ? 'negative' : 'text100'}
+							>
+								You have {currencyBalance?.formatted || '0'}{' '}
+								{selectedFeeOption?.token.symbol}
+							</Text>
+						</Box>
+					)}
+
+					<Button
+						disabled={
+							!selectedFeeOption?.token ||
+							insufficientBalance ||
+							currencyBalanceLoading
+						}
+						pending={currencyBalanceLoading}
+						onClick={handleConfirmFeeOption}
+						label={
+							<Box display="flex" alignItems="center" gap="2">
+								Confirm
+							</Box>
+						}
+						variant={insufficientBalance ? 'danger' : 'primary'}
+						size="xs"
+					/>
+				</Box>
+			</Box>
+		);
+	},
+);
+
+export default WaasFeeOptionsBox;

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

@@ -0,0 +1,12 @@
+import { observable } from '@legendapp/state';
+import type { FeeOption } from '../waasFeeOptionsSelect/WaasFeeOptionsSelect';
+
+type WaasFeeOptionsModalState = {
+	selectedFeeOption: FeeOption | undefined;
+};
+
+const initialState = {
+	selectedFeeOption: undefined,
+} as WaasFeeOptionsModalState;
+
+export const waasFeeOptionsModal$ = observable(initialState);

package/src/react/ui/modals/_internal/components/waasFeeOptionsBox/styles.css.ts

@@ -0,0 +1,53 @@
+import { atoms } from '@0xsequence/design-system';
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export const feeOptionsWrapper = style([
+	atoms({
+		position: 'absolute',
+		background: 'buttonEmphasis',
+		backdropFilter: 'blur',
+		width: 'full',
+		left: '0',
+		borderRadius: 'lg',
+		display: 'flex',
+		flexDirection: 'column',
+		gap: '2',
+		padding: '4',
+	}),
+	{
+		bottom: '-140px',
+	},
+]);
+
+export const dialogOverlay = style([
+	atoms({
+		background: 'backgroundBackdrop',
+		position: 'fixed',
+		inset: '0',
+		zIndex: '50',
+	}),
+]);
+
+export const dialogContent = style([
+	atoms({
+		display: 'flex',
+		background: 'backgroundPrimary',
+		borderRadius: 'lg',
+		position: 'fixed',
+		zIndex: '50',
+	}),
+	{
+		top: '50%',
+		left: '50%',
+		transform: 'translate(-50%, -50%)',
+		padding: '24px',
+	},
+]);
+
+export const cta = style({
+	borderRadius: '12px !important',
+});
+
+globalStyle(`${cta} > div`, {
+	justifyContent: 'center !important',
+});

package/src/react/ui/modals/_internal/components/waasFeeOptionsSelect/WaasFeeOptionsSelect.tsx

@@ -0,0 +1,117 @@
+import { Box, Image, Text } from '@0xsequence/design-system';
+import type { Observable } from '@legendapp/state';
+import { observer } from '@legendapp/state/react';
+import { useEffect } from 'react';
+import { formatUnits } from 'viem';
+import {
+	CustomSelect,
+	type SelectItem,
+} from '../../../../components/_internals/custom-select/CustomSelect';
+
+export type FeeOption = {
+	gasLimit: number;
+	to: string;
+	token: {
+		chainId: number;
+		contractAddress: string | null;
+		decimals: number;
+		logoURL: string;
+		name: string;
+		symbol: string;
+		tokenID: string | null;
+		type: string;
+	};
+	value: string;
+};
+
+const WaasFeeOptionsSelect = observer(
+	({
+		options,
+		selectedFeeOption$,
+	}: {
+		options: FeeOption[];
+		selectedFeeOption$: Observable<FeeOption | undefined>;
+	}) => {
+		const feeOptions = options
+			.filter((option) => option.token.contractAddress !== null)
+			.map((option) => {
+				const value = option.token.contractAddress ?? '';
+				return FeeOptionSelectItem({ value, option });
+			});
+
+		// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+		useEffect(() => {
+			if (options.length > 0 && !selectedFeeOption$.get())
+				selectedFeeOption$.set(options[0]);
+		}, [options]);
+
+		if (options.length === 0 || !selectedFeeOption$.get()?.token) return null;
+
+		return (
+			<CustomSelect
+				items={feeOptions}
+				onValueChange={(value) => {
+					const selectedOption = options.find(
+						(option) => option.token.contractAddress === value,
+					);
+
+					selectedFeeOption$.set(selectedOption);
+				}}
+				defaultValue={
+					selectedFeeOption$.get()?.token.contractAddress
+						? FeeOptionSelectItem({
+								value: selectedFeeOption$.get()?.token.contractAddress ?? '',
+								option: selectedFeeOption$.get() ?? options[0],
+							})
+						: undefined
+				}
+			/>
+		);
+	},
+);
+
+function FeeOptionSelectItem({
+	value,
+	option,
+}: {
+	value: string;
+	option: FeeOption;
+}) {
+	return {
+		value,
+		content: (
+			<Box display="flex" alignItems="center" gap="2">
+				<Image
+					src={option.token.logoURL}
+					alt={option.token.symbol}
+					width="3"
+					height="3"
+				/>
+
+				<Box display="flex" gap="1">
+					<Text color="text100" fontSize="small" fontFamily="body">
+						Fee
+					</Text>
+					<Text
+						color="text50"
+						fontSize="small"
+						fontFamily="body"
+						fontWeight="semibold"
+					>
+						(in {option.token.symbol})
+					</Text>
+
+					<Text color="text100" fontSize="small" fontFamily="body">
+						:
+					</Text>
+				</Box>
+
+				<Text fontSize="small" fontFamily="body">
+					{formatUnits(BigInt(option.value), option.token.decimals || 0)}
+				</Text>
+			</Box>
+		),
+	} as SelectItem;
+}
+
+export default WaasFeeOptionsSelect;

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

@@ -1,4 +1,4 @@
-import { Address } from 'viem';
+import type { Address } from 'viem';
 import { BaseError } from './base';
 
 export type TransactionErrorType<name extends string = 'TransactionError'> =
@@ -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) {
@@ -253,7 +263,7 @@ export class InvalidCurrencyOptionsError extends TransactionError {
 export class ProjectNotFoundError extends TransactionError {
 	override name = 'ProjectNotFoundError';
 	constructor(projectId: string, url: string) {
-		super(`Project not found`, {
+		super('Project not found', {
 			details: `Project id: ${projectId} not found at ${url}`,
 		});
 	}

package/src/utils/price.ts

@@ -11,11 +11,10 @@ export const calculatePriceDifferencePercentage = ({
 	basePriceRaw,
 	decimals,
 }: CalculatePriceDifferencePercentageArgs) => {
-	const difference = Number(
-		formatUnits(inputPriceRaw - basePriceRaw, decimals),
-	);
+	const inputPrice = Number(formatUnits(inputPriceRaw, decimals));
 	const basePrice = Number(formatUnits(basePriceRaw, decimals));
+	const difference = inputPrice - basePrice;
 	const percentageDifference = (difference / basePrice) * 100;
 
-	return Math.abs(percentageDifference).toFixed(2);
+	return percentageDifference.toFixed(2);
 };

package/tsconfig.json

@@ -1,24 +1,4 @@
 {
-	"compilerOptions": {
-		"target": "ESNext",
-		"useDefineForClassFields": true,
-		"lib": ["dom", "dom.iterable", "esnext"],
-
-		"module": "ESNext",
-		"skipLibCheck": true,
-
-		"moduleResolution": "bundler",
-		"resolvePackageJsonImports": true,
-		"allowImportingTsExtensions": true,
-		"isolatedModules": true,
-		"moduleDetection": "force",
-		"noEmit": true,
-		"jsx": "react-jsx",
-
-		"strict": true,
-		"noUnusedLocals": true,
-		"noUnusedParameters": true,
-		"noFallthroughCasesInSwitch": true
-	},
+	"extends": "../../tsconfig.json",
 	"include": ["src", "tsup.config.ts"]
 }