@0xsequence/marketplace-sdk 0.7.0 → 0.8.1

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

@@ -1,114 +1,142 @@
 'use client';
 
-import { Button, Text, TextInput } from '@0xsequence/design-system';
-import { observable } from '@legendapp/state';
+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 QuantityInput from '../../../_internal/components/quantityInput';
+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 = () => {
-	const { address } = useAccount();
+const EnterWalletAddressView = observer(() => {
+	const { address: connectedAddress } = useAccount();
 	const { collectionAddress, collectibleId, chainId, collectionType } =
 		transferModal$.state.get();
 	const $quantity = transferModal$.state.quantity;
-	const $invalidQuantity = observable(false);
-	const isWalletAddressValid = isAddress(
-		transferModal$.state.receiverAddress.get(),
-	);
+	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: Number(chainId),
+		chainId,
 		contractAddress: collectionAddress,
 		tokenId: collectibleId,
-		accountAddress: address,
-		query: { enabled: !!address },
+		accountAddress: connectedAddress,
+		query: { enabled: !!connectedAddress },
 	});
+
 	const balanceAmount = tokenBalance?.pages[0].balances[0].balance;
-	const insufficientBalance: boolean = balanceAmount
-		? $quantity.get() > balanceAmount
-		: true;
+
+	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();
 
-	function handleChangeWalletAddress(
-		event: React.ChangeEvent<HTMLInputElement>,
-	) {
-		transferModal$.state.receiverAddress.set(event.target.value);
-	}
+	const onTransferClick = async () => {
+		transferModal$.state.transferIsBeingProcessed.set(true);
 
-	function handleChangeView() {
-		transfer();
-		transferModal$.view.set('followWalletInstructions');
-	}
+		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"
 				/>
 
-				<div className="[&>label>div>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1">
-					<TextInput
-						label="Wallet address"
-						labelLocation="top"
-						autoFocus
-						value={transferModal$.state.receiverAddress.get()}
-						onChange={handleChangeWalletAddress}
-						name="walletAddress"
-						placeholder="Enter wallet address"
+				<WalletAddressInput />
+
+				{showQuantityInput && (
+					<TokenQuantityInput
+						balanceAmount={balanceAmount ? BigInt(balanceAmount) : undefined}
+						collection={collection}
+						isProcessingWithWaaS={isProcessingWithWaaS ?? false}
 					/>
-				</div>
-
-				{collectionType === ContractType.ERC1155 && balanceAmount && (
-					<>
-						<QuantityInput
-							$quantity={$quantity}
-							$invalidQuantity={$invalidQuantity}
-							decimals={collection?.decimals || 0}
-							maxQuantity={balanceAmount}
-							className="[&>label>div>div]:h-13 [&>label>div>div]:rounded-xl [&>label>div>span]:text-sm [&>label>div>span]:text-text-80 [&>label]:gap-1"
-						/>
-
-						<Text
-							className="font-body text-xs"
-							color={insufficientBalance ? 'negative' : 'text50'}
-							fontWeight="medium"
-						>
-							{`You have ${balanceAmount} of this item`}
-						</Text>
-					</>
 				)}
 			</div>
-			<Button
-				className="flex justify-self-end px-10"
-				onClick={handleChangeView}
-				disabled={
-					!isWalletAddressValid || insufficientBalance || !$quantity.get()
-				}
-				title="Transfer"
-				label="Transfer"
-				variant="primary"
-				shape="square"
-				size="sm"
-			/>
+
+			{!shouldHideTransferButton && (
+				<TransferButton
+					onClick={onTransferClick}
+					isDisabled={isTransferDisabled}
+					chainId={chainId}
+				/>
+			)}
 		</div>
 	);
-};
+});
 
 export default EnterWalletAddressView;

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

@@ -1,8 +1,10 @@
+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';
@@ -17,32 +19,36 @@ const useHandleTransfer = () => {
 		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,
+		};
 
-	const getHash = async () => {
 		if (collectionType === ContractType.ERC721) {
 			return await transferTokensAsync({
-				receiverAddress: receiverAddress as Hex,
-				collectionAddress,
-				tokenId: collectibleId,
-				chainId,
+				...baseParams,
 				contractType: ContractType.ERC721,
 			});
 		}
 
 		// For ERC1155
 		return await transferTokensAsync({
-			receiverAddress: receiverAddress as Hex,
-			collectionAddress,
-			tokenId: collectibleId,
-			chainId,
+			...baseParams,
 			contractType: ContractType.ERC1155,
 			quantity: String(quantity),
 		});
 	};
 
-	async function transfer() {
+	const transfer = async (): Promise<void> => {
 		if (
 			collectionType !== ContractType.ERC721 &&
 			collectionType !== ContractType.ERC1155
@@ -50,13 +56,16 @@ const useHandleTransfer = () => {
 			throw new InvalidContractTypeError(collectionType);
 		}
 
+		if (wallet?.isWaaS && pendingFeeOptionConfirmation) {
+			return;
+		}
+
 		try {
 			const hash = await getHash();
-
 			transferModal$.close();
 
 			showTransactionStatusModal({
-				hash: hash,
+				hash,
 				collectionAddress,
 				chainId,
 				collectibleId,
@@ -69,10 +78,9 @@ const useHandleTransfer = () => {
 			});
 		} catch (error) {
 			transferModal$.view.set('enterReceiverAddress');
-
 			callbacks?.onError?.(error as Error);
 		}
-	}
+	};
 
 	return { transfer };
 };

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

@@ -2,99 +2,133 @@
 
 import { Modal } from '@0xsequence/design-system';
 import { observer } from '@legendapp/state/react';
-import type { Hex } from 'viem';
-import { useAccount } from 'wagmi';
+import type { Address } from 'viem';
+import { useAccount, useSwitchChain } from 'wagmi';
+import type { FeeOption } from '../../../../types/waas-types';
+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 { 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';
 
 export type ShowTransferModalArgs = {
-	collectionAddress: Hex;
+	collectionAddress: Address;
 	collectibleId: string;
-	chainId: string;
+	chainId: number;
 	callbacks?: ModalCallbacks;
 };
 
 export const useTransferModal = () => {
 	const { chainId: accountChainId } = useAccount();
 	const { show: showSwitchNetworkModal } = useSwitchChainModal();
+	const { wallet } = useWallet();
+	const { switchChain } = useSwitchChain();
 
 	const openModal = (args: ShowTransferModalArgs) => {
 		transferModal$.open(args);
 	};
 
 	const handleShowModal = (args: ShowTransferModalArgs) => {
-		const isSameChain = accountChainId === Number(args.chainId);
+		const targetChainId = Number(args.chainId);
+		const isSameChain = accountChainId === targetChainId;
 
 		if (!isSameChain) {
-			showSwitchNetworkModal({
-				chainIdToSwitchTo: Number(args.chainId),
-				onSuccess: () => openModal(args),
-			});
+			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,
+		});
+	};
+
 	return {
 		show: handleShowModal,
-		close: () => transferModal$.close(),
-		onError: (callbacks: ModalCallbacks) => {
-			transferModal$.state.set({
-				...transferModal$.state.get(),
-				callbacks,
-			});
-		},
-		onSuccess: (callbacks: ModalCallbacks) => {
-			transferModal$.state.set({
-				...transferModal$.state.get(),
-				callbacks,
-			});
-		},
+		close: transferModal$.close,
+		onError: updateCallbacks,
+		onSuccess: updateCallbacks,
 	};
 };
 
+const TransactionModalView = observer(() => {
+	const { view } = transferModal$.get();
+
+	switch (view) {
+		case 'enterReceiverAddress':
+			return <EnterWalletAddressView />;
+		case 'followWalletInstructions':
+			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 { waasFeeOptionsShown } = useSelectWaasFeeOptions({
+		chainId: chainId,
+		isProcessing: isTransferBeingProcessed,
+		feeOptionsVisible: selectWaasFeeOptions$.isVisible.get(),
+		selectedFeeOption:
+			selectWaasFeeOptions$.selectedFeeOption.get() as FeeOption,
+	});
 
 	if (!isOpen) return null;
 
 	return (
 		<Modal
 			isDismissible={true}
-			onClose={transferModal$.close}
+			onClose={() => {
+				transferModal$.close();
+				selectWaasFeeOptions$.hide();
+			}}
 			size="sm"
 			overlayProps={MODAL_OVERLAY_PROPS}
 			contentProps={{
 				style: {
 					height: 'auto',
+					overflow: 'auto',
 				},
 			}}
 		>
 			<div className="flex w-full flex-col p-7">
 				<TransactionModalView />
 			</div>
+
+			{waasFeeOptionsShown && (
+				<SelectWaasFeeOptions
+					chainId={Number(chainId)}
+					onCancel={() => {
+						transferModal$.state.transferIsBeingProcessed.set(false);
+					}}
+					titleOnConfirm="Processing transfer..."
+					className="p-7 pt-0"
+				/>
+			)}
 		</Modal>
 	);
 });
 
-const TransactionModalView = observer(() => {
-	const { view } = transferModal$.get();
-
-	switch (view) {
-		case 'enterReceiverAddress':
-			return <EnterWalletAddressView />;
-
-		case 'followWalletInstructions':
-			return <FollowWalletInstructionsView />;
-
-		default:
-			return null;
-	}
-});
-
 export { TransferModal };