@0xsequence/marketplace-sdk 0.9.0 → 1.0.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 { useConnectorMetadata } from '../../../../../hooks/config/useConnectorMetadata';
 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 { isWaaS } = useConnectorMetadata();
 	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,
@@ -56,13 +61,15 @@ const useHandleTransfer = () => {
 			throw new InvalidContractTypeError(collectionType);
 		}
 
-		if (wallet?.isWaaS && pendingFeeOptionConfirmation) {
+		if (isWaaS && pendingFeeOptionConfirmation) {
 			return;
 		}
 
 		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,97 +1,77 @@
 '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 { useWallet } from '../../../_internal/wallet/useWallet';
+import type { CollectionType } from '../../../_internal';
+import { useConnectorMetadata, useEnsureCorrectChain } from '../../../hooks';
 import { MODAL_OVERLAY_PROPS } from '../_internal/components/consts';
 import SelectWaasFeeOptions from '../_internal/components/selectWaasFeeOptions';
-import { selectWaasFeeOptions$ } from '../_internal/components/selectWaasFeeOptions/store';
-import { useSwitchChainModal } from '../_internal/components/switchChainModal';
+import {
+	selectWaasFeeOptionsStore,
+	useSelectWaasFeeOptionsStore,
+} from '../_internal/components/selectWaasFeeOptions/store';
 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;
 };
 
 export const useTransferModal = () => {
-	const { chainId: accountChainId } = useAccount();
-	const { show: showSwitchNetworkModal } = useSwitchChainModal();
-	const { wallet } = useWallet();
-	const { switchChain } = useSwitchChain();
+	const { ensureCorrectChain } = useEnsureCorrectChain();
 
 	const openModal = (args: ShowTransferModalArgs) => {
-		transferModal$.open(args);
+		transferModalStore.send({ type: 'open', ...args });
 	};
 
 	const handleShowModal = (args: ShowTransferModalArgs) => {
 		const targetChainId = Number(args.chainId);
-		const isSameChain = accountChainId === targetChainId;
 
-		if (!isSameChain) {
-			if (wallet?.isWaaS) {
-				switchChain({ chainId: targetChainId });
-
-				openModal(args);
-			} else {
-				showSwitchNetworkModal({
-					chainIdToSwitchTo: targetChainId,
-					onSuccess: () => openModal(args),
-				});
-			}
-			return;
-		}
-
-		openModal(args);
-	};
-
-	const updateCallbacks = (callbacks: ModalCallbacks) => {
-		transferModal$.state.set({
-			...transferModal$.state.get(),
-			callbacks,
+		ensureCorrectChain(targetChainId, {
+			onSuccess: () => openModal(args),
 		});
 	};
 
 	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();
+	const { isWaaS } = useConnectorMetadata();
 
 	switch (view) {
 		case 'enterReceiverAddress':
 			return <EnterWalletAddressView />;
 		case 'followWalletInstructions':
+			if (isWaaS) {
+				return <EnterWalletAddressView />;
+			}
 			return <FollowWalletInstructionsView />;
 		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 +80,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 +98,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 +111,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,
+}));