@0xsequence/marketplace-sdk 0.0.1

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

@@ -0,0 +1,52 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export {
+	closeButton,
+	dialogContent,
+	dialogOverlay,
+} from '../../styles/modal.css';
+
+export const collectiblesGrid = style({
+	display: 'grid',
+	gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))',
+});
+
+export const collectiblesGridItem = style({
+	width: '150px',
+	height: '150px',
+});
+
+globalStyle(
+	`${collectiblesGrid} > ${collectiblesGridItem}:nth-child(1):only-child`,
+	{
+		width: '312px',
+		height: '312px',
+	},
+);
+
+// horizontal centering for the 3rd item
+globalStyle(`${collectiblesGrid} > ${collectiblesGridItem}:nth-child(3)`, {
+	gridColumn: '1 / -1',
+	justifySelf: 'center',
+});
+
+globalStyle(
+	`${collectiblesGrid}:has(${collectiblesGridItem}:nth-child(4)) > ${collectiblesGridItem}`,
+	{
+		gridColumn: 'unset',
+	},
+);
+
+export const collectiblesGridImage = style({
+	width: '100%',
+	height: '100%',
+	objectFit: 'contain',
+});
+
+export const collectiblesGridImagePale = style([
+	collectiblesGridImage,
+	{
+		// opacity:1 is set to inline style of the @0xsequence/design-system Image component, so we need to use !important
+		opacity: '0.4 !important',
+	},
+]);

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

@@ -0,0 +1,58 @@
+import { observable } from '@legendapp/state';
+import type { ShowTransferModalArgs } from '.';
+import type { Hex } from 'viem';
+import type { Messages } from '../../../../types/messages';
+import type { CollectionType } from '@internal';
+
+export interface TransferModalState {
+	isOpen: boolean;
+	open: (args: ShowTransferModalArgs) => void;
+	close: () => void;
+	state: {
+		chainId: string;
+		collectionAddress: Hex;
+		collectionType?: CollectionType | undefined;
+		tokenId: string;
+		quantity: string;
+		receiverAddress: string;
+		messages?: Messages;
+	};
+	view: 'enterReceiverAddress' | 'followWalletInstructions' | undefined;
+	hash: Hex | undefined;
+}
+
+export const initialState: TransferModalState = {
+	isOpen: false,
+	open: ({
+		chainId,
+		collectionAddress,
+		tokenId,
+		messages,
+	}: ShowTransferModalArgs) => {
+		transferModal$.state.set({
+			...transferModal$.state.get(),
+			chainId,
+			collectionAddress,
+			tokenId,
+			messages,
+		});
+		transferModal$.isOpen.set(true);
+	},
+	close: () => {
+		transferModal$.isOpen.set(false);
+		transferModal$.state.set({
+			...initialState.state,
+		});
+	},
+	state: {
+		receiverAddress: '',
+		collectionAddress: '0x',
+		chainId: '',
+		tokenId: '',
+		quantity: '1',
+	},
+	view: 'enterReceiverAddress',
+	hash: undefined,
+};
+
+export const transferModal$ = observable(initialState);

package/src/react/ui/modals/TransferModal/_utils/getTransferTransactionTitleMessage.ts

@@ -0,0 +1,28 @@
+import type { ConfirmationStatus } from '../../_internal/components/transactionStatusModal/store';
+
+export const getTransferTransactionTitle = (params: ConfirmationStatus) => {
+	if (params.isConfirmed) {
+		return 'Transfer has processed';
+	}
+
+	if (params.isFailed) {
+		return 'Transfer has failed';
+	}
+
+	return 'Transfer is processing';
+};
+
+export const getTransferTransactionMessage = (
+	params: ConfirmationStatus,
+	collectibleName: string,
+) => {
+	if (params.isConfirmed) {
+		return `You just tranferred ${collectibleName}. It’s been confirmed on the blockchain!`;
+	}
+
+	if (params.isFailed) {
+		return `Transferring ${collectibleName} has failed. Please try again.`;
+	}
+
+	return `You just transferred ${collectibleName}. It should be confirmed on the blockchain shortly.`;
+};

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

@@ -0,0 +1,102 @@
+import { useCollection } from '@react-hooks/useCollection';
+import AlertMessage from '../../../_internal/components/alertMessage';
+import QuantityInput from '../../../_internal/components/quantityInput';
+import { transferModal$ } from '../../_store';
+import getMessage from '../../messages';
+import { Box, Button, Text, TextInput } from '@0xsequence/design-system';
+import { isAddress } from 'viem';
+import { type CollectionType, ContractType } from '@internal';
+import { useTokenBalances } from '@react-hooks/useListBalances';
+import { useAccount } from 'wagmi';
+
+const EnterWalletAddressView = () => {
+	const { address } = useAccount();
+	const { collectionAddress, chainId, tokenId, collectionType } =
+		transferModal$.state.get();
+	const $quantity = transferModal$.state.quantity;
+	const isWalletAddressValid = isAddress(
+		transferModal$.state.receiverAddress.get(),
+	);
+	const { data: tokenBalance } = useTokenBalances({
+		chainId,
+		contractAddress: collectionAddress,
+		tokenId,
+		accountAddress: address,
+	});
+	const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
+	const { data: collection } = useCollection({
+		collectionAddress,
+		chainId,
+	});
+	transferModal$.state.collectionType.set(
+		collection?.type as CollectionType | undefined,
+	);
+	const insufficientBalance: boolean = $quantity.get() > balanceAmount!;
+
+	function handleChangeWalletAddress(
+		event: React.ChangeEvent<HTMLInputElement>,
+	) {
+		transferModal$.state.receiverAddress.set(event.target.value);
+	}
+
+	function handleChangeView() {
+		transferModal$.view.set('followWalletInstructions');
+	}
+
+	return (
+		<Box display="grid" gap="6" flexGrow="1">
+			<Text color="white" fontSize="large" fontWeight="bold">
+				Transfer your item
+			</Text>
+
+			<Box display="flex" flexDirection="column" gap="3">
+				<AlertMessage
+					message={getMessage('enterReceiverAddress')}
+					type="warning"
+				/>
+
+				<TextInput
+					label="Wallet address"
+					labelLocation="top"
+					value={transferModal$.state.receiverAddress.get()}
+					onChange={handleChangeWalletAddress}
+					name="walletAddress"
+					placeholder="Enter wallet address of recipient"
+				/>
+
+				{collectionType === ContractType.ERC1155 && balanceAmount && (
+					<>
+						<QuantityInput
+							$quantity={$quantity}
+							chainId={chainId}
+							collectionAddress={collectionAddress}
+							collectibleId={tokenId}
+						/>
+
+						<Text
+							color={insufficientBalance ? 'negative' : 'text50'}
+							fontSize="small"
+							fontWeight="medium"
+						>
+							{`You have ${balanceAmount} of this item`}
+						</Text>
+					</>
+				)}
+			</Box>
+
+			<Button
+				onClick={handleChangeView}
+				disabled={!isWalletAddressValid || insufficientBalance}
+				title="Transfer"
+				label="Transfer"
+				variant="primary"
+				shape="square"
+				size="sm"
+				justifySelf="flex-end"
+				paddingX="10"
+			/>
+		</Box>
+	);
+};
+
+export default EnterWalletAddressView;

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

@@ -0,0 +1,130 @@
+import { observer } from '@legendapp/state/react';
+import AlertMessage from '../../../_internal/components/alertMessage';
+import getMessage from '../../messages';
+import { Box, Button, Text } from '@0xsequence/design-system';
+import { ContractType } from '@internal';
+import { transferModal$ } from '../../_store';
+import { useCollection } from '@react-hooks/useCollection';
+import { useTransferTokens } from '@react-hooks/useTransferTokens';
+import type { Hex } from 'viem';
+import { useTransactionStatusModal } from '../../../_internal/components/transactionStatusModal';
+import {
+	getTransferTransactionMessage,
+	getTransferTransactionTitle,
+} from '../../_utils/getTransferTransactionTitleMessage';
+import { useCollectible } from '@react-hooks/useCollectible';
+import { useEffect } from 'react';
+
+const FollowWalletInstructionsView = observer(() => {
+	const {
+		receiverAddress,
+		collectionAddress,
+		tokenId,
+		quantity,
+		chainId,
+		messages,
+	} = transferModal$.state.get();
+	const { transferTokensAsync, hash } = useTransferTokens();
+	const { show: showTransactionStatusModal } = useTransactionStatusModal();
+	const { data: collection, isSuccess: collectionSuccess } = useCollection({
+		collectionAddress,
+		chainId,
+	});
+	const { data: collectible, isSuccess: collectibleSuccess } = useCollectible({
+		collectionAddress,
+		collectibleId: tokenId,
+		chainId,
+	});
+
+	useEffect(() => {
+		if (!hash && collectionSuccess) {
+			transfer();
+		}
+	}, [collectionSuccess, collectibleSuccess, hash]);
+
+	async function transfer() {
+		if (collection!.type === ContractType.ERC721) {
+			try {
+				const hash = await transferTokensAsync({
+					receiverAddress: receiverAddress as Hex,
+					collectionAddress,
+					tokenId,
+					chainId,
+					contractType: ContractType.ERC721,
+				});
+
+				transferModal$.close();
+
+				showTransactionStatusModal({
+					hash: hash,
+					collectionAddress,
+					chainId,
+					tokenId,
+					price: undefined,
+					getTitle: getTransferTransactionTitle,
+					getMessage: (params) =>
+						getTransferTransactionMessage(params, collectible!.name),
+					type: 'transfer',
+				});
+			} catch (error) {
+				messages?.transferCollectibles?.onUnknownError &&
+					messages.transferCollectibles.onUnknownError(error);
+			}
+		}
+
+		try {
+			const hash = await transferTokensAsync({
+				receiverAddress: receiverAddress as Hex,
+				collectionAddress,
+				tokenId,
+				chainId,
+				contractType: ContractType.ERC1155,
+				quantity: String(quantity),
+			});
+
+			transferModal$.close();
+
+			showTransactionStatusModal({
+				hash: hash,
+				collectionAddress,
+				chainId,
+				tokenId,
+				price: undefined,
+				getTitle: getTransferTransactionTitle,
+				getMessage: (params) =>
+					getTransferTransactionMessage(params, collectible!.name),
+				type: 'transfer',
+			});
+		} catch (error) {
+			messages?.transferCollectibles?.onUnknownError &&
+				messages.transferCollectibles.onUnknownError(error);
+		}
+	}
+	return (
+		<Box display="grid" gap="6" flexGrow="1">
+			<Text color="white" fontSize="large" fontWeight="bold">
+				Transfer your item
+			</Text>
+
+			<Box display="flex" flexDirection="column" gap="3">
+				<AlertMessage
+					message={getMessage('followWalletInstructions')}
+					type="info"
+				/>
+			</Box>
+
+			<Button
+				disabled={true}
+				title="Transfer"
+				label="Transfer"
+				variant="primary"
+				shape="square"
+				size="sm"
+				justifySelf="flex-end"
+				paddingX="10"
+			/>
+		</Box>
+	);
+});
+
+export default FollowWalletInstructionsView;

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

@@ -0,0 +1,92 @@
+import { transferModal$ } from './_store';
+import { closeButton, dialogOverlay, transferModalContent } from './styles.css';
+import { CloseIcon, IconButton } from '@0xsequence/design-system';
+import { observer, Show } from '@legendapp/state/react';
+import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
+import { useAccount } from 'wagmi';
+import { useSwitchChainModal } from '../_internal/components/switchChainModal';
+import type { Messages } from '../../../../types/messages';
+import type { Hex } from 'viem';
+import EnterWalletAddressView from './_views/enterWalletAddress';
+import FollowWalletInstructionsView from './_views/followWalletInstructions';
+
+export type ShowTransferModalArgs = {
+	collectionAddress: Hex;
+	tokenId: string;
+	chainId: string;
+	messages?: Messages;
+};
+
+export const useTransferModal = () => {
+	const { chainId: accountChainId } = useAccount();
+	const { show: showSwitchNetworkModal } = useSwitchChainModal();
+
+	const openModal = (args: ShowTransferModalArgs) => {
+		transferModal$.open(args);
+	};
+
+	const handleShowModal = (args: ShowTransferModalArgs) => {
+		const isSameChain = accountChainId === Number(args.chainId);
+
+		if (!isSameChain) {
+			showSwitchNetworkModal({
+				chainIdToSwitchTo: Number(args.chainId),
+				onSwitchChain: () => openModal(args),
+				messages: args.messages?.switchChain,
+			});
+			return;
+		}
+
+		openModal(args);
+	};
+
+	return {
+		show: handleShowModal,
+		close: () => transferModal$.close(),
+	};
+};
+
+export const TransferModal = () => {
+	return (
+		<Show if={transferModal$.isOpen}>
+			<Modal />
+		</Show>
+	);
+};
+
+const Modal = () => {
+	return <ModalContent />;
+};
+
+const ModalContent = observer(() => {
+	return (
+		<Root open={true}>
+			<Portal>
+				<Overlay className={dialogOverlay} />
+
+				<Content className={transferModalContent}>
+					<TransactionModalView />
+
+					<Close onClick={transferModal$.close} className={closeButton} asChild>
+						<IconButton size="xs" aria-label="Close modal" icon={CloseIcon} />
+					</Close>
+				</Content>
+			</Portal>
+		</Root>
+	);
+});
+
+const TransactionModalView = observer(() => {
+	const { view } = transferModal$.get();
+
+	switch (view) {
+		case 'enterReceiverAddress':
+			return <EnterWalletAddressView />;
+
+		case 'followWalletInstructions':
+			return <FollowWalletInstructionsView />;
+
+		default:
+			return null;
+	}
+});

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

@@ -0,0 +1,14 @@
+import type { TransferModalState } from './_store';
+
+type MessageKey = NonNullable<TransferModalState['view']>;
+
+const baseMessages: Record<MessageKey, string> = {
+	enterReceiverAddress:
+		"Items sent to the wrong wallet address can't be recovered!",
+	followWalletInstructions:
+		"Follow your wallet's instructions to submit a transaction to transfer your assets.",
+};
+
+export default function getMessage(key: MessageKey): string {
+	return baseMessages[key];
+}

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

@@ -0,0 +1,20 @@
+import { dialogContent } from '../../styles/index';
+import { atoms } from '@0xsequence/design-system';
+import { style } from '@vanilla-extract/css';
+
+export { closeButton, dialogOverlay } from '../../styles/modal.css';
+
+export const transferModalContent = style([
+	dialogContent.wide,
+	atoms({
+		padding: '7',
+	}),
+	{
+		width: '540px',
+		'@media': {
+			'screen and (max-width: 540px)': {
+				width: '100%',
+			},
+		},
+	},
+]);

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

@@ -0,0 +1,94 @@
+'use client';
+
+import type React from 'react';
+import type { ComponentProps } from 'react';
+
+import {
+	Box,
+	Button,
+	CloseIcon,
+	IconButton,
+	Text,
+} from '@0xsequence/design-system';
+import { getProviderEl } from '@internal';
+import type { Observable } from '@legendapp/state';
+import { observer } from '@legendapp/state/react';
+import { Close, Content, Overlay, Portal, Root } from '@radix-ui/react-dialog';
+import type { ActionModalState } from './store';
+import {
+	closeButton,
+	cta as ctaStyle,
+	dialogContent,
+	dialogOverlay,
+} from './styles.css';
+
+export interface ActionModalProps {
+	store: Observable<ActionModalState>;
+	onClose: () => void;
+	title: string;
+	children: React.ReactNode;
+	ctas: {
+		label: string;
+		onClick: () => void;
+		pending?: boolean;
+		disabled?: boolean;
+		hidden?: boolean;
+		variant?: ComponentProps<typeof Button>['variant'];
+	}[];
+}
+
+export const ActionModal = observer(
+	({ store, onClose, title, children, ctas }: ActionModalProps) => {
+		return (
+			<Root open={store.isOpen.get()}>
+				<Portal container={getProviderEl()}>
+					<Overlay className={dialogOverlay} />
+					<Content className={dialogContent.narrow}>
+						<Box
+							display="flex"
+							flexGrow={'1'}
+							alignItems="center"
+							flexDirection="column"
+							gap="4"
+							position={'relative'}
+						>
+							<Text
+								fontSize="medium"
+								fontWeight="bold"
+								textAlign="center"
+								width="full"
+								color="text100"
+							>
+								{title}
+							</Text>
+
+							{children}
+
+							<Box width="full" display="flex" flexDirection="column" gap="2">
+								{ctas.map(
+									(cta) =>
+										!cta.hidden && (
+											<Button
+												key={cta.label}
+												className={ctaStyle}
+												onClick={cta.onClick}
+												variant={cta.variant || 'primary'}
+												pending={cta.pending}
+												disabled={cta.disabled}
+												size="lg"
+												width="full"
+												label={cta.label}
+											/>
+										),
+								)}
+							</Box>
+						</Box>
+						<Close className={closeButton} asChild onClick={onClose}>
+							<IconButton size="xs" aria-label="Close modal" icon={CloseIcon} />
+						</Close>
+					</Content>
+				</Portal>
+			</Root>
+		);
+	},
+);

package/src/react/ui/modals/_internal/components/actionModal/index.ts

@@ -0,0 +1,3 @@
+export * from './ActionModal';
+export * from './store';
+export * from './styles.css';

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

@@ -0,0 +1,19 @@
+import { type Observable, observable } from '@legendapp/state';
+
+export interface ActionModalState {
+	isOpen: boolean;
+}
+
+export function createActionModalStore() {
+	return observable<ActionModalState>({
+		isOpen: false,
+	});
+}
+
+export function openModal(store: Observable<ActionModalState>) {
+	store.isOpen.set(true);
+}
+
+export function closeModal(store: Observable<ActionModalState>) {
+	store.isOpen.set(false);
+}

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

@@ -0,0 +1,15 @@
+import { globalStyle, style } from '@vanilla-extract/css';
+
+export {
+	closeButton,
+	dialogContent,
+	dialogOverlay,
+} from '../../../../styles/modal.css';
+
+export const cta = style({
+	borderRadius: '12px !important',
+});
+
+globalStyle(`${cta} > div`, {
+	justifyContent: 'center !important',
+});

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

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

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

@@ -0,0 +1,22 @@
+import { atoms } from '@0xsequence/design-system';
+import { style, styleVariants } from '@vanilla-extract/css';
+
+export const alertMessageBox = style([
+	atoms({
+		display: 'flex',
+		alignItems: 'center',
+		justifyContent: 'space-between',
+		gap: '3',
+		padding: '4',
+		borderRadius: 'md',
+	}),
+]);
+
+export const alertMessageBoxVariants = styleVariants({
+	warning: {
+		background: 'hsla(39, 71%, 40%, 0.3)',
+	},
+	info: {
+		background: 'hsla(247, 100%, 75%, 0.3)',
+	},
+});