@0xsequence/marketplace-sdk 0.9.0 → 0.10.0

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

@@ -1,39 +1,47 @@
 'use client';
 
 import { Text } from '@0xsequence/design-system';
-import { observer } from '@legendapp/state/react';
 import { isAddress } from 'viem';
 import { useAccount } from 'wagmi';
 import type { FeeOption } from '../../../../../../types/waas-types';
 import { compareAddress } from '../../../../../../utils';
 import { useCollection, useListBalances } from '../../../../..';
-import { type CollectionType, ContractType } from '../../../../../_internal';
+import { ContractType } from '../../../../../_internal';
 import AlertMessage from '../../../_internal/components/alertMessage';
-import { selectWaasFeeOptions$ } from '../../../_internal/components/selectWaasFeeOptions/store';
+import {
+	selectWaasFeeOptionsStore,
+	useSelectWaasFeeOptionsStore,
+} from '../../../_internal/components/selectWaasFeeOptions/store';
 import { useSelectWaasFeeOptions } from '../../../_internal/hooks/useSelectWaasFeeOptions';
-import { transferModal$ } from '../../_store';
 import getMessage from '../../messages';
+import { transferModalStore, useModalState } from '../../store';
 import TokenQuantityInput from './_components/TokenQuantityInput';
 import TransferButton from './_components/TransferButton';
 import WalletAddressInput from './_components/WalletAddressInput';
 import useHandleTransfer from './useHandleTransfer';
 
-const EnterWalletAddressView = observer(() => {
+const EnterWalletAddressView = () => {
 	const { address: connectedAddress } = useAccount();
-	const { collectionAddress, collectibleId, chainId, collectionType } =
-		transferModal$.state.get();
-	const $quantity = transferModal$.state.quantity;
-	const receiverAddress = transferModal$.state.receiverAddress.get();
+	const {
+		collectionAddress,
+		collectibleId,
+		chainId,
+		quantity,
+		receiverAddress,
+		transferIsProcessing,
+	} = useModalState();
+
 	const isWalletAddressValid = isAddress(receiverAddress);
+	const { isVisible: feeOptionsVisible, selectedFeeOption } =
+		useSelectWaasFeeOptionsStore();
 	const {
 		isWaaS,
 		isProcessingWithWaaS,
 		shouldHideActionButton: shouldHideTransferButton,
 	} = useSelectWaasFeeOptions({
-		isProcessing: transferModal$.state.transferIsBeingProcessed.get(),
-		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
-		selectedFeeOption:
-			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+		isProcessing: transferIsProcessing,
+		feeOptionsVisible,
+		selectedFeeOption: selectedFeeOption as FeeOption,
 	});
 
 	const isSelfTransfer =
@@ -52,9 +60,9 @@ const EnterWalletAddressView = observer(() => {
 	const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
 
 	let insufficientBalance = true;
-	if (balanceAmount !== undefined && $quantity.get()) {
+	if (balanceAmount !== undefined && quantity) {
 		try {
-			const quantityBigInt = BigInt($quantity.get());
+			const quantityBigInt = BigInt(quantity);
 			insufficientBalance = quantityBigInt > BigInt(balanceAmount);
 		} catch (_e) {
 			insufficientBalance = true;
@@ -66,42 +74,31 @@ const EnterWalletAddressView = observer(() => {
 		chainId,
 	});
 
-	transferModal$.state.collectionType.set(
-		collection?.type as CollectionType | undefined,
-	);
-
 	const { transfer } = useHandleTransfer();
 
 	const onTransferClick = async () => {
-		transferModal$.state.transferIsBeingProcessed.set(true);
+		transferModalStore.send({ type: 'startTransfer' });
 
 		try {
-			if (!isWaaS) {
-				transferModal$.view.set('followWalletInstructions');
-			} else {
-				selectWaasFeeOptions$.isVisible.set(true);
+			if (isWaaS) {
+				selectWaasFeeOptionsStore.send({ type: 'show' });
 			}
 
 			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 isErc1155 = collection?.type === ContractType.ERC1155;
 	const showQuantityInput = isErc1155 && !!balanceAmount;
-	const isProcessing = !!transferModal$.state.transferIsBeingProcessed.get();
 
 	const isTransferDisabled =
-		isProcessing ||
+		transferIsProcessing ||
 		!isWalletAddressValid ||
 		insufficientBalance ||
-		!$quantity.get() ||
-		Number($quantity.get()) === 0 ||
+		!quantity ||
+		Number(quantity) === 0 ||
 		isSelfTransfer;
 
 	return (
@@ -131,11 +128,10 @@ const EnterWalletAddressView = observer(() => {
 				<TransferButton
 					onClick={onTransferClick}
 					isDisabled={isTransferDisabled}
-					chainId={chainId}
 				/>
 			)}
 		</div>
 	);
-});
+};
 
 export default EnterWalletAddressView;

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

@@ -1,13 +1,13 @@
 import { useWaasFeeOptions } from '@0xsequence/connect';
-import type { Hex } from 'viem';
+import type { Address, 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 { useCollection, useTransferTokens } from '../../../../../hooks';
 import { useTransactionStatusModal } from '../../../_internal/components/transactionStatusModal';
-import { transferModal$ } from '../../_store';
+import { transferModalStore, useModalState } from '../../store';
 
 const useHandleTransfer = () => {
 	const {
@@ -16,18 +16,23 @@ const useHandleTransfer = () => {
 		collectibleId,
 		quantity,
 		chainId,
-		collectionType,
-		callbacks,
-	} = transferModal$.state.get();
+	} = useModalState();
 
 	const { transferTokensAsync } = useTransferTokens();
 	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	const { wallet } = useWallet();
 	const [pendingFeeOptionConfirmation] = useWaasFeeOptions();
 
+	const { data: collection } = useCollection({
+		collectionAddress,
+		chainId,
+	});
+
+	const collectionType = collection?.type;
+
 	const getHash = async (): Promise<Hex> => {
 		const baseParams = {
-			receiverAddress: receiverAddress as Hex,
+			receiverAddress: receiverAddress as Address,
 			collectionAddress,
 			tokenId: collectibleId,
 			chainId,
@@ -62,7 +67,9 @@ const useHandleTransfer = () => {
 
 		try {
 			const hash = await getHash();
-			transferModal$.close();
+
+			transferModalStore.send({ type: 'completeTransfer', hash });
+			transferModalStore.send({ type: 'close' });
 
 			showTransactionStatusModal({
 				hash,
@@ -77,8 +84,10 @@ const useHandleTransfer = () => {
 				],
 			});
 		} catch (error) {
-			transferModal$.view.set('enterReceiverAddress');
-			callbacks?.onError?.(error as Error);
+			transferModalStore.send({
+				type: 'failTransfer',
+				error: error as Error,
+			});
 		}
 	};
 

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

@@ -1,25 +1,29 @@
 'use client';
 
 import { Modal } from '@0xsequence/design-system';
-import { observer } from '@legendapp/state/react';
 import type { Address } from 'viem';
 import { useAccount, useSwitchChain } from 'wagmi';
 import type { FeeOption } from '../../../../types/waas-types';
+import type { CollectionType } from '../../../_internal';
 import { useWallet } from '../../../_internal/wallet/useWallet';
 import { MODAL_OVERLAY_PROPS } from '../_internal/components/consts';
 import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
-import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
+import {
+	selectWaasFeeOptionsStore,
+	useSelectWaasFeeOptionsStore,
+} from '../_internal/components/selectWaasFeeOptions/store';
 import { useSwitchChainModal } from '../_internal/components/switchChainModal';
 import { useSelectWaasFeeOptions } from '../_internal/hooks/useSelectWaasFeeOptions';
 import type { ModalCallbacks } from '../_internal/types';
-import { transferModal$ } from './_store';
 import EnterWalletAddressView from './_views/enterWalletAddress';
 import FollowWalletInstructionsView from './_views/followWalletInstructions';
+import { transferModalStore, useIsOpen, useModalState, useView } from './store';
 
 export type ShowTransferModalArgs = {
 	collectionAddress: Address;
 	collectibleId: string;
 	chainId: number;
+	collectionType?: CollectionType;
 	callbacks?: ModalCallbacks;
 };
 
@@ -30,7 +34,7 @@ export const useTransferModal = () => {
 	const { switchChain } = useSwitchChain();
 
 	const openModal = (args: ShowTransferModalArgs) => {
-		transferModal$.open(args);
+		transferModalStore.send({ type: 'open', ...args });
 	};
 
 	const handleShowModal = (args: ShowTransferModalArgs) => {
@@ -54,23 +58,14 @@ export const useTransferModal = () => {
 		openModal(args);
 	};
 
-	const updateCallbacks = (callbacks: ModalCallbacks) => {
-		transferModal$.state.set({
-			...transferModal$.state.get(),
-			callbacks,
-		});
-	};
-
 	return {
 		show: handleShowModal,
-		close: transferModal$.close,
-		onError: updateCallbacks,
-		onSuccess: updateCallbacks,
+		close: () => transferModalStore.send({ type: 'close' }),
 	};
 };
 
-const TransactionModalView = observer(() => {
-	const { view } = transferModal$.get();
+const TransactionModalView = () => {
+	const view = useView();
 
 	switch (view) {
 		case 'enterReceiverAddress':
@@ -80,18 +75,17 @@ const TransactionModalView = observer(() => {
 		default:
 			return null;
 	}
-});
+};
 
-const TransferModal = observer(() => {
-	const isOpen = transferModal$.isOpen.get();
-	const chainId = transferModal$.state.chainId.get();
-	const isTransferBeingProcessed =
-		transferModal$.state.transferIsBeingProcessed.get();
+const TransferModal = () => {
+	const isOpen = useIsOpen();
+	const modalState = useModalState();
+	const { isVisible: feeOptionsVisible, selectedFeeOption } =
+		useSelectWaasFeeOptionsStore();
 	const { waasFeeOptionsShown } = useSelectWaasFeeOptions({
-		isProcessing: isTransferBeingProcessed,
-		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
-		selectedFeeOption:
-			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+		isProcessing: modalState.transferIsProcessing,
+		feeOptionsVisible,
+		selectedFeeOption: selectedFeeOption as FeeOption,
 	});
 
 	if (!isOpen) return null;
@@ -100,8 +94,8 @@ const TransferModal = observer(() => {
 		<Modal
 			isDismissible={true}
 			onClose={() => {
-				transferModal$.close();
-				selectWaasFeeOptions$.hide();
+				transferModalStore.send({ type: 'close' });
+				selectWaasFeeOptionsStore.send({ type: 'hide' });
 			}}
 			size="sm"
 			overlayProps={MODAL_OVERLAY_PROPS}
@@ -118,9 +112,12 @@ const TransferModal = observer(() => {
 
 			{waasFeeOptionsShown && (
 				<SelectWaasFeeOptions
-					chainId={Number(chainId)}
+					chainId={Number(modalState.chainId)}
 					onCancel={() => {
-						transferModal$.state.transferIsBeingProcessed.set(false);
+						transferModalStore.send({
+							type: 'failTransfer',
+							error: new Error('Transfer cancelled'),
+						});
 					}}
 					titleOnConfirm="Processing transfer..."
 					className="p-7 pt-0"
@@ -128,6 +125,6 @@ const TransferModal = observer(() => {
 			)}
 		</Modal>
 	);
-});
+};
 
 export { TransferModal };

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

@@ -1,4 +1,4 @@
-import type { TransferModalState } from './_store';
+import type { TransferModalState } from './store';
 
 type MessageKey = NonNullable<TransferModalState['view']>;
 

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

@@ -0,0 +1,122 @@
+import { createStore } from '@xstate/store';
+import { useSelector } from '@xstate/store/react';
+import type { Hex } from 'viem';
+import type { ShowTransferModalArgs } from '.';
+
+export type TransferModalView =
+	| 'enterReceiverAddress'
+	| 'followWalletInstructions';
+
+export interface TransferModalState {
+	isOpen: boolean;
+	chainId: number;
+	collectionAddress: Hex;
+	collectibleId: string;
+	quantity: string;
+	receiverAddress: string;
+	transferIsProcessing: boolean;
+	view: TransferModalView;
+	hash: Hex | undefined;
+	onSuccess: ((data: { hash: Hex }) => void) | undefined;
+	onError: ((error: Error) => void) | undefined;
+}
+
+const initialContext: TransferModalState = {
+	isOpen: false,
+	chainId: 0,
+	collectionAddress: '0x' as Hex,
+	collectibleId: '',
+	quantity: '1',
+	receiverAddress: '',
+	transferIsProcessing: false,
+	view: 'enterReceiverAddress',
+	hash: undefined,
+	onSuccess: undefined,
+	onError: undefined,
+};
+
+export const transferModalStore = createStore({
+	context: initialContext,
+	on: {
+		open: (_context, event: ShowTransferModalArgs) => ({
+			...initialContext,
+			isOpen: true,
+			chainId: event.chainId,
+			collectionAddress: event.collectionAddress,
+			collectibleId: event.collectibleId,
+			view: 'enterReceiverAddress' as const,
+			onSuccess: event.callbacks?.onSuccess,
+			onError: event.callbacks?.onError,
+		}),
+
+		updateTransferDetails: (
+			context,
+			event: {
+				receiverAddress?: string;
+				quantity?: string;
+			},
+		) => ({
+			...context,
+			...(event.receiverAddress !== undefined && {
+				receiverAddress: event.receiverAddress,
+			}),
+			...(event.quantity !== undefined && { quantity: event.quantity }),
+		}),
+
+		startTransfer: (context) => ({
+			...context,
+			transferIsProcessing: true,
+			view: 'followWalletInstructions' as const,
+		}),
+
+		completeTransfer: (context, event: { hash: Hex }) => {
+			if (context.onSuccess) {
+				context.onSuccess({ hash: event.hash });
+			}
+
+			return {
+				...context,
+				hash: event.hash,
+				transferIsProcessing: false,
+			};
+		},
+
+		failTransfer: (context, event: { error: Error }) => {
+			if (context.onError) {
+				context.onError(event.error);
+			}
+
+			return {
+				...context,
+				transferIsProcessing: false,
+				view: 'enterReceiverAddress' as const,
+			};
+		},
+
+		close: () => initialContext,
+	},
+});
+
+// Selector hooks
+export const useIsOpen = () =>
+	useSelector(transferModalStore, (state) => state.context.isOpen);
+
+export const useModalState = () =>
+	useSelector(transferModalStore, (state) => state.context);
+
+export const useView = () =>
+	useSelector(transferModalStore, (state) => state.context.view);
+
+export const useHash = () =>
+	useSelector(transferModalStore, (state) => state.context.hash);
+
+export const transferDetailsSelector = transferModalStore.select((state) => ({
+	receiverAddress: state.receiverAddress,
+	quantity: state.quantity,
+}));
+
+export const transferConfigSelector = transferModalStore.select((state) => ({
+	chainId: state.chainId,
+	collectionAddress: state.collectionAddress,
+	collectibleId: state.collectibleId,
+}));

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

@@ -1,7 +1,6 @@
 'use client';
 
 import { DayPicker, type PropsSingle } from 'react-day-picker';
-import 'react-day-picker/style.css';
 
 export type CalendarProps = React.PropsWithChildren<PropsSingle> & {
 	selectedDate?: Date;

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

@@ -1,18 +1,21 @@
 'use client';
 
 import { TokenImage } from '@0xsequence/design-system';
-import type { Observable } from '@legendapp/state';
 import { useState } from 'react';
 import type { Address } from 'viem';
 import type { Price } from '../../../../../../types';
 
-function CurrencyImage({ price$ }: { price$: Observable<Price | undefined> }) {
+function CurrencyImage({ price }: { price: Price | undefined }) {
 	const [imageLoadErrorCurrencyAddresses, setImageLoadErrorCurrencyAddresses] =
 		useState<Address[] | null>(null);
 
+	if (!price?.currency) {
+		return <div className="h-3 w-3 rounded-full bg-background-secondary" />;
+	}
+
 	if (
 		imageLoadErrorCurrencyAddresses?.includes(
-			price$.currency.contractAddress.get() as Address,
+			price.currency.contractAddress as Address,
 		)
 	) {
 		return <div className="h-3 w-3 rounded-full bg-background-secondary" />;
@@ -20,20 +23,13 @@ function CurrencyImage({ price$ }: { price$: Observable<Price | undefined> }) {
 
 	return (
 		<TokenImage
-			src={price$.currency.imageUrl.get()}
+			src={price.currency.imageUrl}
 			onError={() => {
-				const price = price$?.get();
 				if (price) {
 					setImageLoadErrorCurrencyAddresses((prev) => {
-						if (!prev)
-							return [price$.currency.contractAddress.get() as Address];
-						if (
-							!prev.includes(price$.currency.contractAddress.get() as Address)
-						) {
-							return [
-								...prev,
-								price$.currency.contractAddress.get() as Address,
-							];
+						if (!prev) return [price.currency.contractAddress as Address];
+						if (!prev.includes(price.currency.contractAddress as Address)) {
+							return [...prev, price.currency.contractAddress as Address];
 						}
 						return prev;
 					});

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

@@ -1,4 +1,3 @@
-import { observable } from '@legendapp/state';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { render } from '@test';
 import { TEST_CURRENCIES, TEST_CURRENCY } from '@test/const';
@@ -9,10 +8,13 @@ import type { Currency } from '../../../../../../_internal';
 import * as hooks from '../../../../../../hooks';
 import CurrencyOptionsSelect from '..';
 
+const mockOnCurrencyChange = vi.fn();
+
 const defaultProps = {
 	collectionAddress: zeroAddress,
 	chainId: 1,
-	selectedCurrency$: observable<Currency | null | undefined>(TEST_CURRENCY),
+	selectedCurrency: TEST_CURRENCY,
+	onCurrencyChange: mockOnCurrencyChange,
 	secondCurrencyAsDefault: false,
 	includeNativeCurrency: false,
 };
@@ -20,6 +22,7 @@ const defaultProps = {
 describe('CurrencyOptionsSelect', () => {
 	beforeEach(() => {
 		vi.restoreAllMocks();
+		mockOnCurrencyChange.mockClear();
 	});
 
 	it('should render loading skeleton when currencies are loading', () => {

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

@@ -1,10 +1,8 @@
 'use client';
 
 import { Skeleton } from '@0xsequence/design-system';
-import type { Observable } from '@legendapp/state';
-import { observer } from '@legendapp/state/react';
 import { useEffect } from 'react';
-import type { Hex } from 'viem';
+import type { Address } from 'viem';
 import type { Currency } from '../../../../../_internal';
 import { useMarketCurrencies } from '../../../../../hooks';
 import {
@@ -13,21 +11,22 @@ import {
 } from '../../../../components/_internals/custom-select/CustomSelect';
 
 type CurrencyOptionsSelectProps = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	chainId: number;
-	selectedCurrency$: Observable<Currency | null | undefined>;
+	selectedCurrency?: Currency | null;
+	onCurrencyChange: (currency: Currency) => void;
 	secondCurrencyAsDefault?: boolean;
 	includeNativeCurrency?: boolean;
 };
 
-const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
+function CurrencyOptionsSelect({
 	chainId,
 	collectionAddress,
 	secondCurrencyAsDefault,
-	selectedCurrency$,
+	selectedCurrency,
+	onCurrencyChange,
 	includeNativeCurrency,
 }: CurrencyOptionsSelectProps) {
-	const currency = selectedCurrency$.get();
 	const { data: currencies, isLoading: currenciesLoading } =
 		useMarketCurrencies({
 			chainId,
@@ -40,19 +39,24 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 		if (
 			currencies &&
 			currencies.length > 0 &&
-			!selectedCurrency$.get()?.contractAddress
+			!selectedCurrency?.contractAddress
 		) {
 			// We dont support native currency listings for any marketplace other than Sequence Marketplace v2
 			// So we need to set the set another currency as the default
 			if (secondCurrencyAsDefault) {
-				selectedCurrency$.set(currencies[1]);
+				onCurrencyChange(currencies[1]);
 			} else {
-				selectedCurrency$.set(currencies[0]);
+				onCurrencyChange(currencies[0]);
 			}
 		}
-	}, [currencies]);
+	}, [
+		currencies,
+		selectedCurrency?.contractAddress,
+		secondCurrencyAsDefault,
+		onCurrencyChange,
+	]);
 
-	if (!currencies || currenciesLoading || !currency?.symbol) {
+	if (!currencies || currenciesLoading || !selectedCurrency?.symbol) {
 		return <Skeleton className="mr-3 h-7 w-20 rounded-2xl" />;
 	}
 
@@ -69,7 +73,9 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 		const selectedCurrency = currencies.find(
 			(currency) => currency.contractAddress === value,
 		);
-		selectedCurrency$.set(selectedCurrency);
+		if (selectedCurrency) {
+			onCurrencyChange(selectedCurrency);
+		}
 	};
 
 	return (
@@ -77,12 +83,12 @@ const CurrencyOptionsSelect = observer(function CurrencyOptionsSelect({
 			items={options}
 			onValueChange={onChange}
 			defaultValue={{
-				value: currency.contractAddress,
-				content: currency.symbol,
+				value: selectedCurrency.contractAddress,
+				content: selectedCurrency.symbol,
 			}}
 			testId="currency-select"
 		/>
 	);
-});
+}
 
 export default CurrencyOptionsSelect;