@0xsequence/marketplace-sdk 0.3.3 → 0.3.5

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

@@ -12,6 +12,7 @@ import {
 import { observer } from '@legendapp/state/react';
 import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
 import type { TokenMetadata } from '../../../_internal';
+import type { ModalCallbacks } from '../_internal/types';
 import {
 	type SuccessfulPurchaseModalState,
 	successfulPurchaseModal$,
@@ -25,7 +26,6 @@ import {
 	dialogContent,
 	dialogOverlay,
 } from './styles.css';
-import type { ModalCallbacks } from '../_internal/types';
 
 export const useSuccessfulPurchaseModal = (callbacks?: ModalCallbacks) => {
 	return {

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/index.tsx

@@ -1,19 +1,21 @@
 import { Box, Button, Text, TextInput } from '@0xsequence/design-system';
+import { observable } from '@legendapp/state';
 import { isAddress } from 'viem';
 import { useAccount } from 'wagmi';
+import { useCollection, useListBalances } from '../../../../..';
+import { type CollectionType, ContractType } from '../../../../../_internal';
 import AlertMessage from '../../../_internal/components/alertMessage';
 import QuantityInput from '../../../_internal/components/quantityInput';
 import { transferModal$ } from '../../_store';
 import getMessage from '../../messages';
 import useHandleTransfer from './useHandleTransfer';
-import { useCollection, useListBalances } from '../../../../..';
-import { type CollectionType, ContractType } from '../../../../../_internal';
 
 const EnterWalletAddressView = () => {
 	const { address } = useAccount();
 	const { collectionAddress, tokenId, chainId, collectionType } =
 		transferModal$.state.get();
 	const $quantity = transferModal$.state.quantity;
+	const $invalidQuantity = observable(false);
 	const isWalletAddressValid = isAddress(
 		transferModal$.state.receiverAddress.get(),
 	);
@@ -71,9 +73,9 @@ const EnterWalletAddressView = () => {
 					<>
 						<QuantityInput
 							$quantity={$quantity}
-							chainId={chainId}
-							collectionAddress={collectionAddress}
-							collectibleId={tokenId}
+							$invalidQuantity={$invalidQuantity}
+							decimals={collection?.decimals || 0}
+							maxQuantity={balanceAmount}
 						/>
 
 						<Text
@@ -90,7 +92,9 @@ const EnterWalletAddressView = () => {
 
 			<Button
 				onClick={handleChangeView}
-				disabled={!isWalletAddressValid || insufficientBalance}
+				disabled={
+					!isWalletAddressValid || insufficientBalance || !$quantity.get()
+				}
 				title="Transfer"
 				label="Transfer"
 				variant="primary"

package/src/react/ui/modals/TransferModal/_views/enterWalletAddress/useHandleTransfer.tsx

@@ -1,6 +1,7 @@
 import type { QueryKey } from '@tanstack/react-query';
 import type { Hex } from 'viem';
 import { ContractType } from '../../../../../../types';
+import { InvalidContractTypeError } from '../../../../../../utils/_internal/error/transaction';
 import { balanceQueries } from '../../../../../_internal';
 import { useCollectible, useTransferTokens } from '../../../../../hooks';
 import { useTransactionStatusModal } from '../../../_internal/components/transactionStatusModal';
@@ -34,7 +35,7 @@ const useHandleTransfer = () => {
 			collectionType !== ContractType.ERC721 &&
 			collectionType !== ContractType.ERC1155
 		) {
-			throw new Error('Invalid contract type');
+			throw new InvalidContractTypeError(collectionType);
 		}
 
 		if (collectionType === ContractType.ERC721) {

package/src/react/ui/modals/TransferModal/_views/followWalletInstructions/index.tsx

@@ -1,7 +1,7 @@
+import { Box, Button, Text } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
 import AlertMessage from '../../../_internal/components/alertMessage';
 import getMessage from '../../messages';
-import { Box, Button, Text } from '@0xsequence/design-system';
 
 const FollowWalletInstructionsView = observer(() => {
 	return (

package/src/react/ui/modals/TransferModal/styles.css.ts

@@ -1,6 +1,6 @@
-import { dialogContent } from '../../styles/index';
 import { atoms } from '@0xsequence/design-system';
 import { style } from '@vanilla-extract/css';
+import { dialogContent } from '../../styles/index';
 
 export { closeButton, dialogOverlay } from '../../styles/modal.css';
 

package/src/react/ui/modals/_internal/components/actionModal/ErrorModal.tsx

@@ -1,7 +1,7 @@
 import { Box } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
-import type { ActionModalState } from './store';
 import { ActionModal } from './ActionModal';
+import type { ActionModalState } from './store';
 
 interface ErrorModalProps {
 	store: Observable<ActionModalState>;

package/src/react/ui/modals/_internal/components/actionModal/LoadingModal.tsx

@@ -1,7 +1,7 @@
 import { Box, Spinner } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
-import type { ActionModalState } from './store';
 import { ActionModal } from './ActionModal';
+import type { ActionModalState } from './store';
 
 interface LoadingModalProps {
 	store: Observable<ActionModalState>;

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

@@ -1,6 +1,6 @@
+import { Box, Text, WarningIcon } from '@0xsequence/design-system';
 import SvgInfoIcon from '../../../../icons/InfoIcon';
 import { alertMessageBox, alertMessageBoxVariants } from './styles.css';
-import { Box, Text, WarningIcon } from '@0xsequence/design-system';
 
 type AlertMessageProps = {
 	message: string;
@@ -10,7 +10,12 @@ type AlertMessageProps = {
 export default function AlertMessage({ message, type }: AlertMessageProps) {
 	return (
 		<Box className={`${alertMessageBox} ${alertMessageBoxVariants[type]}`}>
-			<Text color="white" fontSize="normal" fontWeight="medium" fontFamily="body">
+			<Text
+				color="white"
+				fontSize="normal"
+				fontWeight="medium"
+				fontFamily="body"
+			>
 				{message}
 			</Text>
 

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

@@ -4,8 +4,8 @@ import { Box, Text } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
 import { addDays, isSameDay } from 'date-fns';
-import CalendarPopover from '../calendarPopover';
 import { CustomSelect } from '../../../../components/_internals/custom-select/CustomSelect';
+import CalendarPopover from '../calendarPopover';
 
 export const PRESET_RANGES = {
 	TODAY: {

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

@@ -1,141 +1,76 @@
 import { Box, IconButton, NumericInput } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
-import type { Hex } from 'viem';
-import { useCollectible } from '../../../../../hooks';
 import SvgMinusIcon from '../../../../icons/MinusIcon';
 import SvgPlusIcon from '../../../../icons/PlusIcon';
 import { quantityInputWrapper } from './styles.css';
 
 type QuantityInputProps = {
 	$quantity: Observable<string>;
-	chainId: string;
-	collectionAddress: Hex;
-	collectibleId: string;
+	$invalidQuantity: Observable<boolean>;
+	decimals: number;
+	maxQuantity: string;
 };
 
 export default function QuantityInput({
 	$quantity,
-	chainId,
-	collectionAddress,
-	collectibleId,
+	$invalidQuantity,
+	decimals,
+	maxQuantity,
 }: QuantityInputProps) {
-	const { data: collectable, isLoading: collectableLoading } = useCollectible({
-		chainId,
-		collectionAddress,
-		collectibleId,
-	});
-
-	const quantityDecimals =
-		collectable && ((collectable.decimals || 0) as number | undefined);
-
 	function handleChangeQuantity(value: string) {
-		if (!isValidInput(value)) return;
-
 		const formattedValue = formatQuantity(value);
-		if (formattedValue !== null) {
-			$quantity.set(formattedValue);
-		}
+		$quantity.set(formattedValue);
+		validateQuantity(formattedValue);
 	}
 
-	function handleIncrement() {
-		if (!isValidInput()) return;
-
-		const newQuantity = incrementQuantity();
-		if (newQuantity !== null) {
-			$quantity.set(newQuantity);
+	function validateQuantity(value: string) {
+		if (!value || value.trim() === '' || isNaN(Number(value))) {
+			$invalidQuantity.set(true);
+			return;
 		}
-	}
-
-	function handleDecrement() {
-		if (!isValidInput()) return;
 
-		const newQuantity = decrementQuantity();
-		if (newQuantity !== null) {
-			$quantity.set(newQuantity);
-		}
-	}
-
-	function isValidInput(value?: string): boolean {
-		return (
-			collectable !== undefined &&
-			quantityDecimals !== undefined &&
-			(value === undefined || value !== '')
-		);
+		const numValue = Number(value);
+		$invalidQuantity.set(numValue <= 0 || numValue > Number(maxQuantity));
 	}
 
-	function formatQuantity(value: string): string | null {
-		if (quantityDecimals === 0 && value.includes('.')) {
-			return null;
+	function formatQuantity(value: string) {
+		if (!value || isNaN(Number(value))) {
+			return '0';
 		}
-
-		if (quantityDecimals && quantityDecimals > 0) {
-			const decimalIndex = value.indexOf('.');
-			if (
-				decimalIndex !== -1 &&
-				value.length - decimalIndex > quantityDecimals + 1
-			) {
-				return null;
-			}
+		if (Number(value) > Number(maxQuantity)) {
+			return maxQuantity;
 		}
-
 		return value;
 	}
 
-	const quantity = $quantity.get();
-
-	function incrementQuantity(): string | null {
-		if (!isValidInput()) return null;
-
-		if (!quantity) {
-			return quantityDecimals === 0
-				? '1'
-				: `1.${'0'.repeat(quantityDecimals!)}`;
-		}
-
-		const newValue =
-			quantityDecimals === 0
-				? (Number.parseInt(quantity) + 1).toString()
-				: (Number.parseFloat(quantity) + 1).toFixed(quantityDecimals);
-
-		return newValue;
-	}
-
-	function decrementQuantity(): string | null {
-		if (!quantity) {
-			return '1';
-		}
-
-		const newValue = Number.parseFloat(quantity) - 1;
-		if (newValue < 0) {
-			return null;
-		}
-
-		return quantityDecimals === 0
-			? newValue.toString()
-			: newValue.toFixed(quantityDecimals);
+	function handleIncrement() {
+		const currentValue = Number(quantity) || 0;
+		const maxValue = Number(maxQuantity);
+		const newValue = Math.min(currentValue + 1, maxValue);
+		handleChangeQuantity(newValue.toString());
+		return newValue.toString();
 	}
 
-	function getPlaceholder(decimals: number) {
-		if (decimals === 0) {
-			return '0';
-		} else {
-			return '0.' + '0'.repeat(decimals);
-		}
+	function handleDecrement() {
+		const minValue = decimals ? Number(`0.${'0'.repeat(decimals - 1)}1`) : 1;
+		const currentValue = Number(quantity) || 0;
+		const newValue = Math.max(currentValue - 1, minValue);
+		const stringValue = newValue.toString();
+		handleChangeQuantity(stringValue);
+		return stringValue;
 	}
 
-	if (collectableLoading) {
-		return null;
-	}
+	const quantity = $quantity.get();
+	const invalidQuantity = $invalidQuantity.get();
 
 	return (
 		<Box className={quantityInputWrapper}>
 			<NumericInput
 				name={'quantity'}
-				decimals={quantityDecimals || 0}
+				decimals={decimals || 0}
 				paddingLeft={'1'}
 				label={'Enter quantity'}
 				labelLocation="top"
-				placeholder={getPlaceholder(quantityDecimals || 0)}
 				controls={
 					<Box
 						display={'flex'}
@@ -144,7 +79,7 @@ export default function QuantityInput({
 						marginRight={'2'}
 					>
 						<IconButton
-							disabled={Number.parseFloat(quantity) === 0 || !quantity}
+							disabled={!quantity || Number(quantity) <= 0}
 							onClick={handleDecrement}
 							background={'buttonGlass'}
 							size="xs"
@@ -160,10 +95,15 @@ export default function QuantityInput({
 					</Box>
 				}
 				numeric={true}
-				value={$quantity.get()}
+				value={quantity}
 				onChange={(e) => handleChangeQuantity(e.target.value)}
 				width={'full'}
 			/>
+			{invalidQuantity && (
+				<Box color="negative" fontSize="small">
+					{invalidQuantity}
+				</Box>
+			)}
 		</Box>
 	);
 }

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

@@ -1,8 +1,8 @@
-import { dialogContent } from '../../../../styles/index';
 import { atoms } from '@0xsequence/design-system';
 import { style } from '@vanilla-extract/css';
 import { styleVariants } from '@vanilla-extract/css';
 import { globalStyle } from '@vanilla-extract/css';
+import { dialogContent } from '../../../../styles/index';
 
 export { closeButton, dialogOverlay } from '../../../../styles/modal.css';
 

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

@@ -1,6 +1,6 @@
 import { Box, Text } from '@0xsequence/design-system';
 import { formatDistanceToNow } from 'date-fns';
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 
 type TimeAgoProps = {
 	date: Date;

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

@@ -1,8 +1,8 @@
 import { Box, Image, Skeleton, Text } from '@0xsequence/design-system';
 import type { Hex } from 'viem';
 import { useCollectible } from '../../../../../hooks';
-import { tokenPreview } from './styles.css';
 import ChessTileImage from '../../../../images/chess-tile.png';
+import { tokenPreview } from './styles.css';
 
 type TokenPreviewProps = {
 	collectionName?: string;

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

@@ -1,8 +1,8 @@
-import { ChainId, networks } from '@0xsequence/network';
-import { truncateMiddle } from '../../../../../../utils';
-import SvgPositiveCircleIcon from '../../../../icons/PositiveCircleIcon';
 import { Box, Spinner, Text } from '@0xsequence/design-system';
+import { type ChainId, networks } from '@0xsequence/network';
 import type { Hex } from 'viem';
+import { truncateMiddle } from '../../../../../../utils';
+import SvgPositiveCircleIcon from '../../../../icons/PositiveCircleIcon';
 
 type TransactionFooterProps = {
 	transactionHash: Hex;

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

@@ -1,13 +1,13 @@
 import { Box, Image, NetworkImage, Text } from '@0xsequence/design-system';
+import type { TokenMetadata } from '@0xsequence/metadata';
 import { observer } from '@legendapp/state/react';
 import { type Hex, formatUnits } from 'viem';
 import type { Price } from '../../../../../../types';
 import { useCollection } from '../../../../../hooks';
+import ChessTileImage from '../../../../images/chess-tile.png';
 import TimeAgo from '../timeAgo';
 import { transactionStatusModal$ } from '../transactionStatusModal/store';
 import { useTransactionPreviewTitle } from './useTransactionPreviewTitle';
-import type { TokenMetadata } from '@0xsequence/metadata';
-import ChessTileImage from '../../../../images/chess-tile.png';
 
 type TransactionPreviewProps = {
 	price?: Price;

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

@@ -4,6 +4,7 @@ import {
 	Skeleton,
 	Text,
 } from '@0xsequence/design-system';
+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';
@@ -26,7 +27,6 @@ import {
 	dialogOverlay,
 	transactionStatusModalContent,
 } from './styles.css';
-import { ChainId } from '@0xsequence/network';
 
 export type ShowTransactionStatusModalArgs = {
 	hash: Hex;

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

@@ -1,6 +1,6 @@
 import { atoms } from '@0xsequence/design-system';
-import { dialogContent } from '../../../../styles/index';
 import { style } from '@vanilla-extract/css';
+import { dialogContent } from '../../../../styles/index';
 
 export { closeButton, dialogOverlay } from '../../../../styles/modal.css';
 

package/src/react/ui/modals/modal-provider.tsx

@@ -1,14 +1,14 @@
 import { observer } from '@legendapp/state/react';
-import SwitchChainModal from './_internal/components/switchChainModal';
-import TransactionStatusModal from './_internal/components/transactionStatusModal';
 import { AccountModal } from './Account';
+import { BuyModal } from './BuyModal';
 import { CreateListingModal } from './CreateListingModal';
 import { MakeOfferModal } from './MakeOfferModal';
 import { SellModal } from './SellModal';
 import SuccessfulPurchaseModal from './SuccessfulPurchaseModal';
 import { TransferModal } from './TransferModal';
+import SwitchChainModal from './_internal/components/switchChainModal';
+import TransactionStatusModal from './_internal/components/transactionStatusModal';
 import { _accountModalOpen$ } from './_internal/stores/accountModal';
-import { BuyModal } from './BuyModal';
 
 export const ModalProvider = observer(() => {
 	return (

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

@@ -0,0 +1,32 @@
+export type ErrorType<name extends string = 'Error'> = Error & { name: name };
+
+export type Compute<type> = { [key in keyof type]: type[key] } & unknown;
+
+type BaseErrorOptions = Compute<
+	{ details?: string | undefined } | { cause: BaseError | Error }
+>;
+
+export class BaseError extends Error {
+	details: string;
+	shortMessage: string;
+
+	name = 'MarketplaceSdkBaseError';
+
+	constructor(shortMessage: string, options: BaseErrorOptions = {}) {
+		super();
+
+		const details = 'details' in options ? options.details : '';
+		this.message = [
+			shortMessage || 'An error occurred.',
+			'',
+			...(details ? [`Details: ${details}`] : []),
+		].join('\n');
+
+		if ('cause' in options && options.cause) {
+			this.cause = options.cause;
+		}
+
+		this.details = details || '';
+		this.shortMessage = shortMessage;
+	}
+}

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

@@ -0,0 +1,13 @@
+import { BaseError } from './base';
+
+export type MarketplaceSdkProviderNotFoundErrorType =
+	MarketplaceSdkProviderNotFoundError & {
+		name: 'MarketplaceSDKProviderNotFoundError';
+	};
+
+export class MarketplaceSdkProviderNotFoundError extends BaseError {
+	override name = 'MarketplaceSDKProviderNotFoundError';
+	constructor() {
+		super('`useConfig` must be used within `MarketplaceSdkProvider`.');
+	}
+}