@0xsequence/marketplace-sdk 0.0.0-20250513233135

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

@@ -0,0 +1,148 @@
+'use client';
+
+import {
+	Button,
+	ExternalLinkIcon,
+	Image,
+	Modal,
+	Text,
+} from '@0xsequence/design-system';
+import { observer, use$ } from '@legendapp/state/react';
+import type { TokenMetadata } from '../../../_internal';
+import type { ModalCallbacks } from '../_internal/types';
+import {
+	type SuccessfulPurchaseModalState,
+	successfulPurchaseModal$,
+} from './_store';
+
+export const useSuccessfulPurchaseModal = (callbacks?: ModalCallbacks) => {
+	return {
+		show: (args: SuccessfulPurchaseModalState['state']) =>
+			successfulPurchaseModal$.open({ ...args, defaultCallbacks: callbacks }),
+		close: () => successfulPurchaseModal$.close(),
+	};
+};
+
+const SuccessfulPurchaseModal = observer(() => {
+	const handleClose = () => {
+		successfulPurchaseModal$.close();
+	};
+	const isOpen = use$(successfulPurchaseModal$.isOpen);
+
+	if (!isOpen) return null;
+
+	return (
+		<Modal
+			isDismissible={true}
+			onClose={handleClose}
+			size="sm"
+			backdropColor="backgroundBackdrop"
+		>
+			<div className="flex w-full flex-col gap-4 p-6">
+				<Text
+					className="text-center text-large"
+					fontWeight="bold"
+					color="text100"
+				>
+					Successful purchase!
+				</Text>
+
+				<CollectiblesGrid
+					collectibles={successfulPurchaseModal$.state.get().collectibles}
+				/>
+
+				<div className="flex items-center gap-1">
+					<Text className="text-base" fontWeight="medium" color="text80">
+						You bought
+					</Text>
+
+					<Text className="text-base" fontWeight="medium" color="text100">
+						{successfulPurchaseModal$.state.get().collectibles.length}
+					</Text>
+
+					<Text className="text-base" fontWeight="medium" color="text80">
+						items for
+					</Text>
+
+					<Text className="text-base" fontWeight="medium" color="text100">
+						{successfulPurchaseModal$.state.get().totalPrice}
+					</Text>
+				</div>
+
+				<SuccessfulPurchaseActions />
+			</div>
+		</Modal>
+	);
+});
+
+function SuccessfulPurchaseActions() {
+	return (
+		<div className="flex flex-col gap-2">
+			{successfulPurchaseModal$.state.ctaOptions.get() && (
+				<Button
+					className="w-full"
+					shape="square"
+					leftIcon={
+						successfulPurchaseModal$.state.ctaOptions.ctaIcon.get() || undefined
+					}
+					label={successfulPurchaseModal$.state.ctaOptions.ctaLabel.get()}
+					onClick={
+						successfulPurchaseModal$.state.ctaOptions.ctaOnClick.get() ||
+						undefined
+					}
+				/>
+			)}
+			<a
+				href={successfulPurchaseModal$.state.explorerUrl.get()}
+				target="_blank"
+				rel="noopener noreferrer"
+				className="w-full"
+			>
+				<Button
+					shape="square"
+					leftIcon={ExternalLinkIcon}
+					label={`View on ${successfulPurchaseModal$.state.explorerName.get()}`}
+				/>
+			</a>
+		</div>
+	);
+}
+
+function CollectiblesGrid({ collectibles }: { collectibles: TokenMetadata[] }) {
+	const total = collectibles.length;
+	const shownCollectibles = total > 4 ? collectibles.slice(0, 4) : collectibles;
+
+	return (
+		<div className="grid grid-cols-[repeat(auto-fill,minmax(150px,1fr))] gap-2 [&:has(div:nth-child(4))>div]:col-[unset] [&>div:nth-child(1):only-child]:h-[312px] [&>div:nth-child(1):only-child]:w-[312px] [&>div:nth-child(3)]:col-[1/-1] [&>div:nth-child(3)]:justify-self-center">
+			{shownCollectibles.map((collectible) => {
+				const showPlus = total > 4 && collectibles.indexOf(collectible) === 3;
+
+				return (
+					<div
+						className="relative h-[150px] w-[150px]"
+						key={collectible.tokenId}
+					>
+						<Image
+							className={`aspect-square h-full w-full rounded-lg bg-background-secondary object-contain ${showPlus ? 'opacity-[0.4_!important]' : ''}`}
+							src={collectible.image}
+							alt={collectible.name}
+						/>
+						{showPlus && (
+							<div className="absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center bg-background-overlay backdrop-blur-md">
+								<Text
+									className="rounded-lg bg-background-secondary px-2 py-1.5 text-sm backdrop-blur-md"
+									fontWeight="medium"
+									color="text80"
+								>
+									{total} TOTAL
+								</Text>
+							</div>
+						)}
+					</div>
+				);
+			})}
+		</div>
+	);
+}
+
+export default SuccessfulPurchaseModal;

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

@@ -0,0 +1,72 @@
+import { observable } from '@legendapp/state';
+import type { Hex } from 'viem';
+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: number;
+		collectionAddress: Hex;
+		collectionType?: CollectionType | undefined;
+		collectibleId: string;
+		quantity: string;
+		receiverAddress: string;
+		callbacks?: ModalCallbacks;
+		transferIsBeingProcessed: boolean;
+	};
+	view: TransferModalView;
+	hash: Hex | undefined;
+}
+
+export const initialState: TransferModalState = {
+	isOpen: false,
+	open: ({
+		chainId,
+		collectionAddress,
+		collectibleId,
+		callbacks,
+	}: ShowTransferModalArgs) => {
+		transferModal$.state.set({
+			...transferModal$.state.get(),
+			chainId,
+			collectionAddress,
+			collectibleId,
+			callbacks,
+		});
+		transferModal$.isOpen.set(true);
+	},
+	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: 0,
+		collectibleId: '',
+		quantity: '1',
+		transferIsBeingProcessed: false,
+	},
+	view: 'enterReceiverAddress',
+	hash: undefined,
+};
+
+export const transferModal$ = observable(initialState);

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>div>input]:text-sm [&>label>div>div>div]:h-13 [&>label>div>div>div]:rounded-xl [&>label>div>div>span]:text-sm [&>label>div>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;

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

@@ -0,0 +1,56 @@
+'use client';
+
+import { getNetwork } from '@0xsequence/connect';
+import { Button, Spinner } from '@0xsequence/design-system';
+import { NetworkType } from '@0xsequence/network';
+import { observer } from '@legendapp/state/react';
+import { useWallet } from '../../../../../../_internal/wallet/useWallet';
+import { transferModal$ } from '../../../_store';
+
+const TransferButton = observer(
+	({
+		onClick,
+		isDisabled,
+		chainId,
+	}: {
+		onClick: () => Promise<void>;
+		isDisabled: boolean | undefined;
+		chainId: number;
+	}) => {
+		const { wallet } = useWallet();
+		const network = getNetwork(chainId);
+		const isWaaS = wallet?.isWaaS;
+		const isTestnet = network.type === NetworkType.TESTNET;
+		const isProcessing = transferModal$.state.transferIsBeingProcessed.get();
+		const label = isProcessing ? (
+			isWaaS && !isTestnet ? (
+				<div className="flex items-center justify-center gap-2">
+					<Spinner size="sm" className="text-white" />
+					<span>Loading fee options</span>
+				</div>
+			) : (
+				<div className="flex items-center justify-center gap-2">
+					<Spinner size="sm" className="text-white" />
+					<span>Transferring</span>
+				</div>
+			)
+		) : (
+			'Transfer'
+		);
+
+		return (
+			<Button
+				className="flex justify-self-end px-10"
+				onClick={onClick}
+				disabled={!!isDisabled}
+				title="Transfer"
+				label={label}
+				variant="primary"
+				shape="square"
+				size="sm"
+			/>
+		);
+	},
+);
+
+export default TransferButton;

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

@@ -0,0 +1,50 @@
+'use client';
+
+import { TextInput } from '@0xsequence/design-system';
+import { observer } from '@legendapp/state/react';
+import { isAddress } from 'viem';
+import { useAccount } from 'wagmi';
+import { transferModal$ } from '../../../_store';
+
+const MAX_WALLET_ADDRESS_LENGTH = 42;
+
+const WalletAddressInput = observer(() => {
+	const { address: connectedAddress } = useAccount();
+	const receiverAddress = transferModal$.state.receiverAddress.get();
+	const isWalletAddressValid = isAddress(receiverAddress);
+	const isProcessing = transferModal$.state.transferIsBeingProcessed.get();
+
+	const isSelfTransfer =
+		isWalletAddressValid &&
+		connectedAddress &&
+		receiverAddress.toLowerCase() === connectedAddress.toLowerCase();
+
+	const handleChangeWalletAddress = (
+		event: React.ChangeEvent<HTMLInputElement>,
+	) => {
+		transferModal$.state.receiverAddress.set(event.target.value);
+	};
+
+	return (
+		<div className="[&>label>div>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1">
+			<TextInput
+				label="Wallet address"
+				labelLocation="top"
+				autoFocus
+				value={receiverAddress}
+				maxLength={MAX_WALLET_ADDRESS_LENGTH}
+				onChange={handleChangeWalletAddress}
+				name="walletAddress"
+				placeholder="Enter wallet address"
+				disabled={isProcessing}
+			/>
+			{isSelfTransfer && (
+				<div className="mt-1 text-negative text-sm">
+					You cannot transfer to your own address
+				</div>
+			)}
+		</div>
+	);
+});
+
+export default WalletAddressInput;

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

@@ -0,0 +1,142 @@
+'use client';
+
+import { Text } from '@0xsequence/design-system';
+import { observer } from '@legendapp/state/react';
+import { isAddress } from 'viem';
+import { useAccount } from 'wagmi';
+import { useCollection, useListBalances } from '../../../../..';
+import type { FeeOption } from '../../../../../../types/waas-types';
+import { compareAddress } from '../../../../../../utils';
+import { type CollectionType, ContractType } from '../../../../../_internal';
+import AlertMessage from '../../../_internal/components/alertMessage';
+import { selectWaasFeeOptions$ } from '../../../_internal/components/selectWaasFeeOptions/store';
+import { useSelectWaasFeeOptions } from '../../../_internal/hooks/useSelectWaasFeeOptions';
+import { transferModal$ } from '../../_store';
+import getMessage from '../../messages';
+import TokenQuantityInput from './_components/TokenQuantityInput';
+import TransferButton from './_components/TransferButton';
+import WalletAddressInput from './_components/WalletAddressInput';
+import useHandleTransfer from './useHandleTransfer';
+
+const EnterWalletAddressView = observer(() => {
+	const { address: connectedAddress } = useAccount();
+	const { collectionAddress, collectibleId, chainId, collectionType } =
+		transferModal$.state.get();
+	const $quantity = transferModal$.state.quantity;
+	const receiverAddress = transferModal$.state.receiverAddress.get();
+	const isWalletAddressValid = isAddress(receiverAddress);
+	const {
+		isWaaS,
+		isProcessingWithWaaS,
+		shouldHideActionButton: shouldHideTransferButton,
+	} = useSelectWaasFeeOptions({
+		chainId,
+		isProcessing: transferModal$.state.transferIsBeingProcessed.get(),
+		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+		selectedFeeOption:
+			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+	});
+
+	const isSelfTransfer =
+		isWalletAddressValid &&
+		connectedAddress &&
+		compareAddress(receiverAddress, connectedAddress);
+
+	const { data: tokenBalance } = useListBalances({
+		chainId,
+		contractAddress: collectionAddress,
+		tokenId: collectibleId,
+		accountAddress: connectedAddress,
+		query: { enabled: !!connectedAddress },
+	});
+
+	const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
+
+	let insufficientBalance = true;
+	if (balanceAmount !== undefined && $quantity.get()) {
+		try {
+			const quantityBigInt = BigInt($quantity.get());
+			insufficientBalance = quantityBigInt > BigInt(balanceAmount);
+		} catch (e) {
+			insufficientBalance = true;
+		}
+	}
+
+	const { data: collection } = useCollection({
+		collectionAddress,
+		chainId,
+	});
+
+	transferModal$.state.collectionType.set(
+		collection?.type as CollectionType | undefined,
+	);
+
+	const { transfer } = useHandleTransfer();
+
+	const onTransferClick = async () => {
+		transferModal$.state.transferIsBeingProcessed.set(true);
+
+		try {
+			if (!isWaaS) {
+				transferModal$.view.set('followWalletInstructions');
+			} else {
+				selectWaasFeeOptions$.isVisible.set(true);
+			}
+
+			await transfer();
+		} catch (error) {
+			console.error('Transfer failed:', error);
+		} finally {
+			if (transferModal$.view.get() === 'enterReceiverAddress') {
+				transferModal$.state.transferIsBeingProcessed.set(false);
+			}
+		}
+	};
+
+	const isErc1155 = collectionType === ContractType.ERC1155;
+	const showQuantityInput = isErc1155 && !!balanceAmount;
+	const isProcessing = !!transferModal$.state.transferIsBeingProcessed.get();
+
+	const isTransferDisabled =
+		isProcessing ||
+		!isWalletAddressValid ||
+		insufficientBalance ||
+		!$quantity.get() ||
+		Number($quantity.get()) === 0 ||
+		isSelfTransfer;
+
+	return (
+		<div className="grid grow gap-6">
+			<Text className="font-body text-xl" color="white" fontWeight="bold">
+				Transfer your item
+			</Text>
+
+			<div className="flex flex-col gap-3">
+				<AlertMessage
+					message={getMessage('enterReceiverAddress')}
+					type="warning"
+				/>
+
+				<WalletAddressInput />
+
+				{showQuantityInput && (
+					<TokenQuantityInput
+						balanceAmount={balanceAmount ? BigInt(balanceAmount) : undefined}
+						collection={collection}
+						isProcessingWithWaaS={isProcessingWithWaaS ?? false}
+					/>
+				)}
+			</div>
+
+			{!shouldHideTransferButton && (
+				<TransferButton
+					onClick={onTransferClick}
+					isDisabled={isTransferDisabled}
+					chainId={chainId}
+				/>
+			)}
+		</div>
+	);
+});
+
+export default EnterWalletAddressView;

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

@@ -0,0 +1,88 @@
+import { useWaasFeeOptions } from '@0xsequence/connect';
+import type { Hex } from 'viem';
+import { ContractType } from '../../../../../../types';
+import { InvalidContractTypeError } from '../../../../../../utils/_internal/error/transaction';
+import { balanceQueries, collectableKeys } from '../../../../../_internal';
+import { TransactionType } from '../../../../../_internal/types';
+import { useWallet } from '../../../../../_internal/wallet/useWallet';
+import { useTransferTokens } from '../../../../../hooks';
+import { useTransactionStatusModal } from '../../../_internal/components/transactionStatusModal';
+import { transferModal$ } from '../../_store';
+
+const useHandleTransfer = () => {
+	const {
+		receiverAddress,
+		collectionAddress,
+		collectibleId,
+		quantity,
+		chainId,
+		collectionType,
+		callbacks,
+	} = transferModal$.state.get();
+
+	const { transferTokensAsync } = useTransferTokens();
+	const { show: showTransactionStatusModal } = useTransactionStatusModal();
+	const { wallet } = useWallet();
+	const [pendingFeeOptionConfirmation] = useWaasFeeOptions();
+
+	const getHash = async (): Promise<Hex> => {
+		const baseParams = {
+			receiverAddress: receiverAddress as Hex,
+			collectionAddress,
+			tokenId: collectibleId,
+			chainId,
+		};
+
+		if (collectionType === ContractType.ERC721) {
+			return await transferTokensAsync({
+				...baseParams,
+				contractType: ContractType.ERC721,
+			});
+		}
+
+		// For ERC1155
+		return await transferTokensAsync({
+			...baseParams,
+			contractType: ContractType.ERC1155,
+			quantity: String(quantity),
+		});
+	};
+
+	const transfer = async (): Promise<void> => {
+		if (
+			collectionType !== ContractType.ERC721 &&
+			collectionType !== ContractType.ERC1155
+		) {
+			throw new InvalidContractTypeError(collectionType);
+		}
+
+		if (wallet?.isWaaS && pendingFeeOptionConfirmation) {
+			return;
+		}
+
+		try {
+			const hash = await getHash();
+			transferModal$.close();
+
+			showTransactionStatusModal({
+				hash,
+				collectionAddress,
+				chainId,
+				collectibleId,
+				type: TransactionType.TRANSFER,
+				queriesToInvalidate: [
+					balanceQueries.all,
+					balanceQueries.collectionBalanceDetails,
+					collectableKeys.userBalances,
+				],
+			});
+		} catch (error) {
+			transferModal$.view.set('enterReceiverAddress');
+			callbacks?.onError?.(error as Error);
+		}
+	};
+
+	return { transfer };
+};
+
+export default useHandleTransfer;

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

@@ -0,0 +1,31 @@
+import { Button, Text } from '@0xsequence/design-system';
+import { observer } from '@legendapp/state/react';
+import AlertMessage from '../../../_internal/components/alertMessage';
+import getMessage from '../../messages';
+
+const FollowWalletInstructionsView = observer(() => {
+	return (
+		<div className="grid grow gap-6">
+			<Text className="font-body text-xl" color="white" fontWeight="bold">
+				Transfer your item
+			</Text>
+			<div className="flex flex-col gap-3">
+				<AlertMessage
+					message={getMessage('followWalletInstructions')}
+					type="info"
+				/>
+			</div>
+			<Button
+				className="flex justify-self-end px-10"
+				disabled={true}
+				title="Transfer"
+				label="Transfer"
+				variant="primary"
+				shape="square"
+				size="sm"
+			/>
+		</div>
+	);
+});
+
+export default FollowWalletInstructionsView;