@0xsequence/marketplace-sdk 0.0.1 → 0.2.0

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

@@ -0,0 +1,114 @@
+import type { QueryKey } from '@tanstack/react-query';
+import type { Hex } from 'viem';
+import { ContractType } from '../../../../../../types';
+import { balanceQueries } from '../../../../../_internal';
+import { useCollectible, useTransferTokens } from '../../../../../hooks';
+import { useTransactionStatusModal } from '../../../_internal/components/transactionStatusModal';
+import { transferModal$ } from '../../_store';
+import {
+	getTransferTransactionMessage,
+	getTransferTransactionTitle,
+} from '../../_utils/getTransferTransactionTitleMessage';
+
+const useHandleTransfer = () => {
+	const {
+		receiverAddress,
+		collectionAddress,
+		tokenId,
+		quantity,
+		chainId,
+		collectionType,
+		successCallbacks,
+		errorCallbacks,
+	} = transferModal$.state.get();
+	const { transferTokensAsync } = useTransferTokens();
+	const { show: showTransactionStatusModal } = useTransactionStatusModal();
+	const { data: collectible } = useCollectible({
+		collectionAddress,
+		collectibleId: tokenId,
+		chainId,
+	});
+
+	async function transfer() {
+		if (
+			collectionType !== ContractType.ERC721 &&
+			collectionType !== ContractType.ERC1155
+		) {
+			throw new Error('Invalid contract type');
+		}
+
+		if (collectionType === 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',
+					callbacks: {
+						onSuccess: successCallbacks?.onTransferSuccess,
+						onUnknownError: errorCallbacks?.onTransferError,
+					},
+					queriesToInvalidate: balanceQueries.all as unknown as QueryKey[],
+				});
+			} catch (error) {
+				transferModal$.view.set('enterReceiverAddress');
+
+				errorCallbacks?.onTransferError?.(error);
+			}
+		}
+
+		if (collectionType === ContractType.ERC1155) {
+			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',
+					callbacks: {
+						onSuccess: successCallbacks?.onTransferSuccess,
+						onUnknownError: errorCallbacks?.onTransferError,
+					},
+				});
+			} catch (error) {
+				transferModal$.view.set('enterReceiverAddress');
+
+				errorCallbacks?.onTransferError?.(error);
+			}
+		}
+	}
+
+	return { transfer };
+};
+
+export default useHandleTransfer;

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

@@ -2,104 +2,8 @@ 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">

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

@@ -5,21 +5,24 @@ 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';
+import {
+	TransferErrorCallbacks,
+	TransferSuccessCallbacks,
+} from '../../../../types/callbacks';
 
 export type ShowTransferModalArgs = {
 	collectionAddress: Hex;
 	tokenId: string;
 	chainId: string;
-	messages?: Messages;
 };
 
 export const useTransferModal = () => {
 	const { chainId: accountChainId } = useAccount();
 	const { show: showSwitchNetworkModal } = useSwitchChainModal();
+	const { errorCallbacks, successCallbacks } = transferModal$.state.get();
 
 	const openModal = (args: ShowTransferModalArgs) => {
 		transferModal$.open(args);
@@ -32,7 +35,13 @@ export const useTransferModal = () => {
 			showSwitchNetworkModal({
 				chainIdToSwitchTo: Number(args.chainId),
 				onSwitchChain: () => openModal(args),
-				messages: args.messages?.switchChain,
+				callbacks: {
+					onSuccess: successCallbacks?.onSwitchChainSuccess,
+					onUnknownError: errorCallbacks?.onSwitchChainError,
+					onSwitchingNotSupported: errorCallbacks?.onSwitchingNotSupportedError,
+					onUserRejectedRequest:
+						errorCallbacks?.onUserRejectedSwitchingChainRequestError,
+				},
 			});
 			return;
 		}
@@ -43,6 +52,18 @@ export const useTransferModal = () => {
 	return {
 		show: handleShowModal,
 		close: () => transferModal$.close(),
+		onError: (callbacks: TransferErrorCallbacks) => {
+			transferModal$.state.set({
+				...transferModal$.state.get(),
+				errorCallbacks: callbacks,
+			});
+		},
+		onSuccess: (callbacks: TransferSuccessCallbacks) => {
+			transferModal$.state.set({
+				...transferModal$.state.get(),
+				successCallbacks: callbacks,
+			});
+		},
 	};
 };
 

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

@@ -10,10 +10,10 @@ import {
 	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 { getProviderEl } from '../../../../../_internal';
 import type { ActionModalState } from './store';
 import {
 	closeButton,

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

@@ -1,10 +1,10 @@
 import { Box, Select, Skeleton } from '@0xsequence/design-system';
-import type { ChainId } from '@internal';
 import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
-import { useCurrencies } from '@react-hooks/useCurrencies';
-import type { Currency } from '@types';
 import { useEffect, useState } from 'react';
+import type { Hex } from 'viem';
+import type { ChainId, Currency } from '../../../../../_internal';
+import { useCurrencies } from '../../../../../hooks';
 import { currencySelect } from './styles.css';
 
 // TODO: this should be exported from design system
@@ -14,7 +14,7 @@ type SelectOption = {
 };
 
 type CurrencyOptionsSelectProps = {
-	collectionAddress: string;
+	collectionAddress: Hex;
 	chainId: ChainId;
 	$selectedCurrency: Observable<Currency | null | undefined>;
 };

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

@@ -1,7 +1,8 @@
 import { Text } from '@0xsequence/design-system';
-import type { Price } from '@types';
+import type { Hex } from 'viem';
+import type { Price } from '../../../../../../types';
 import { calculatePriceDifferencePercentage } from '../../../../../../utils';
-import { useLowestListing } from '@react-hooks/useLowestListing';
+import { useLowestListing } from '../../../../../hooks';
 
 export default function FloorPriceText({
 	chainId,
@@ -10,7 +11,7 @@ export default function FloorPriceText({
 	price,
 }: {
 	chainId: string;
-	collectionAddress: string;
+	collectionAddress: Hex;
 	tokenId: string;
 	price: Price;
 }) {

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

@@ -1,40 +1,76 @@
 import { Box, NumericInput, TokenImage } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
 import { observer } from '@legendapp/state/react';
-import type { Price } from '@types';
 import { useState } from 'react';
+import { type Hex, erc20Abi, formatUnits, parseUnits } from 'viem';
+import { useAccount, useReadContract } from 'wagmi';
+import type { Price } from '../../../../../../types';
 import CurrencyOptionsSelect from '../currencyOptionsSelect';
-import { priceInputWrapper } from './styles.css';
-import { parseUnits } from 'viem';
+import { priceInputCurrencyImage, priceInputWrapper } from './styles.css';
 
 type PriceInputProps = {
-	collectionAddress: string;
+	collectionAddress: Hex;
 	chainId: string;
 	$listingPrice: Observable<Price | undefined>;
-	error?: string;
+	checkBalance?: {
+		enabled: boolean;
+		callback: (state: boolean) => void;
+	};
 };
 
 const PriceInput = observer(function PriceInput({
 	chainId,
 	collectionAddress,
 	$listingPrice,
-	error,
+	checkBalance,
 }: PriceInputProps) {
-	const [inputPrice, setInputPrice] = useState('');
+	const [balanceError, setBalanceError] = useState('');
+	const { address: accountAddress } = useAccount();
+	const { data: balance, isSuccess: isBalanceSuccess } = useReadContract({
+		address: $listingPrice.currency.contractAddress.get() as Hex,
+		abi: erc20Abi,
+		functionName: 'balanceOf',
+		args: [accountAddress as Hex],
+		query: {
+			enabled: checkBalance?.enabled,
+		},
+	});
+	const listingPriceAmountRaw = $listingPrice.amountRaw.get();
+	const currencyDecimals = $listingPrice.currency.decimals.get();
+
+	const checkInsufficientBalance = (priceAmountRaw: string) => {
+		const hasInsufficientBalance =
+			isBalanceSuccess &&
+			priceAmountRaw &&
+			currencyDecimals &&
+			BigInt(priceAmountRaw) > (balance || 0);
+
+		if (!checkBalance) return;
+
+		if (hasInsufficientBalance) {
+			setBalanceError('Insufficient balance');
+			checkBalance.callback(true);
+		} else {
+			setBalanceError('');
+			checkBalance.callback(false);
+		}
+	};
+
 	const changeListingPrice = (value: string) => {
-		setInputPrice(value);
 		const parsedAmount = parseUnits(
 			value,
 			Number($listingPrice.currency.decimals.get()),
 		);
+
 		$listingPrice.amountRaw.set(parsedAmount.toString());
+		checkBalance && checkInsufficientBalance(parsedAmount.toString());
 	};
 
 	return (
 		<Box className={priceInputWrapper} position="relative">
 			<Box
+				className={priceInputCurrencyImage}
 				position="absolute"
-				bottom="3"
 				left="2"
 				display="flex"
 				alignItems="center"
@@ -56,13 +92,20 @@ const PriceInput = observer(function PriceInput({
 					/>
 				}
 				numeric={true}
-				value={inputPrice}
+				value={
+					listingPriceAmountRaw
+						? formatUnits(
+								BigInt(listingPriceAmountRaw),
+								Number(currencyDecimals),
+							)
+						: ''
+				}
 				onChange={(event) => changeListingPrice(event.target.value)}
 				width="full"
 			/>
-			{error && (
+			{balanceError && (
 				<Box color="negative" fontSize="small">
-					{error}
+					{balanceError}
 				</Box>
 			)}
 		</Box>

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

@@ -6,6 +6,10 @@ export const priceInputWrapper = style({
 	width: '100%',
 });
 
+export const priceInputCurrencyImage = style({
+	top: 29,
+});
+
 globalStyle(`${priceInputWrapper} > label`, {
 	gap: 2,
 });

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

@@ -1,6 +1,7 @@
 import { Box, IconButton, NumericInput } from '@0xsequence/design-system';
 import type { Observable } from '@legendapp/state';
-import { useCollectible } from '@react-hooks/useCollectible';
+import type { Hex } from 'viem';
+import { useCollectible } from '../../../../../hooks';
 import SvgMinusIcon from '../../../../icons/MinusIcon';
 import SvgPlusIcon from '../../../../icons/PlusIcon';
 import { quantityInputWrapper } from './styles.css';
@@ -8,7 +9,7 @@ import { quantityInputWrapper } from './styles.css';
 type QuantityInputProps = {
 	$quantity: Observable<string>;
 	chainId: string;
-	collectionAddress: string;
+	collectionAddress: Hex;
 	collectibleId: string;
 };
 

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

@@ -21,12 +21,12 @@ import { getPresentableChainName } from '../../../../../../utils/network';
 
 import { UserRejectedRequestError } from 'viem';
 import { SwitchChainNotSupportedError } from 'wagmi';
-import type { SwitchChainMessageCallbacks } from '../../../../../../types/messages';
+import type { SwitchChainCallbacks } from '../../../../../../types/callbacks';
 
 export type ShowSwitchChainModalArgs = {
 	chainIdToSwitchTo: number;
 	onSwitchChain: () => void;
-	messages?: SwitchChainMessageCallbacks;
+	callbacks?: SwitchChainCallbacks;
 };
 
 export const useSwitchChainModal = () => {
@@ -47,8 +47,8 @@ const SwitchChainModal = observer(() => {
 		onUserRejectedRequest,
 		onUnknownError,
 		onSuccess,
-	}: Partial<SwitchChainMessageCallbacks> =
-		switchChainModal$.state.messages.get() || {};
+	}: Partial<SwitchChainCallbacks> =
+		switchChainModal$.state.callbacks.get() || {};
 
 	async function handleSwitchChain() {
 		isSwitching$.set(true);

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

@@ -1,6 +1,6 @@
 import { observable } from '@legendapp/state';
 import type { ShowSwitchChainModalArgs } from '.';
-import type { SwitchChainMessageCallbacks } from '../../../../../../types/messages';
+import type { SwitchChainCallbacks } from '../../../../../../types/callbacks';
 
 export interface SwitchChainModalState {
 	isOpen: boolean;
@@ -10,18 +10,18 @@ export interface SwitchChainModalState {
 		chainIdToSwitchTo?: number;
 		onSwitchChain?: () => void;
 		isSwitching: boolean;
-		messages?: SwitchChainMessageCallbacks;
+		callbacks?: SwitchChainCallbacks;
 	};
 }
 
 export const initialState: SwitchChainModalState = {
 	isOpen: false,
-	open: ({ chainIdToSwitchTo, onSwitchChain, messages }) => {
+	open: ({ chainIdToSwitchTo, onSwitchChain, callbacks }) => {
 		switchChainModal$.state.set({
 			...switchChainModal$.state.get(),
 			chainIdToSwitchTo,
 			onSwitchChain,
-			messages,
+			callbacks,
 		});
 		switchChainModal$.isOpen.set(true);
 	},

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

@@ -1,10 +1,11 @@
 import { Box, Image, Skeleton, Text } from '@0xsequence/design-system';
-import { useCollectible } from '@react-hooks/useCollectible';
+import type { Hex } from 'viem';
+import { useCollectible } from '../../../../../hooks';
 import { tokenPreview } from './styles.css';
 
 type TokenPreviewProps = {
 	collectionName?: string;
-	collectionAddress: string;
+	collectionAddress: Hex;
 	collectibleId: string;
 	chainId: string;
 };

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

@@ -1,12 +1,14 @@
 import { Box, NetworkImage, Skeleton, Text } from '@0xsequence/design-system';
-import { useMarketplaceConfig } from '@react-hooks/useMarketplaceConfig';
-import { useRoyaltyPercentage } from '@react-hooks/useRoyaltyPercentage';
-import type { Price } from '@types';
-import { formatUnits } from 'viem';
+import { type Hex, formatUnits } from 'viem';
+import type { Price } from '../../../../../../types';
+import {
+	useMarketplaceConfig,
+	useRoyaltyPercentage,
+} from '../../../../../hooks';
 
 type TransactionDetailsProps = {
 	collectibleId: string;
-	collectionAddress: string;
+	collectionAddress: Hex;
 	chainId: string;
 	price?: Price;
 };

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

@@ -1,16 +1,16 @@
 import { Box, Image, NetworkImage, Text } from '@0xsequence/design-system';
-import type { TokenMetadata } from '@internal';
-import { useCollection } from '@react-hooks/useCollection';
+import { observer } from '@legendapp/state/react';
+import { type Hex, formatUnits } from 'viem';
+import type { Price } from '../../../../../../types';
+import type { TokenMetadata } from '../../../../../_internal';
+import { useCollection } from '../../../../../hooks';
 import TimeAgo from '../timeAgo';
 import { transactionStatusModal$ } from '../transactionStatusModal/store';
-import { observer } from '@legendapp/state/react';
 import { useTransactionPreviewTitle } from './useTransactionPreviewTitle';
-import type { Price } from '@types';
-import { formatUnits } from 'viem';
 
 type TransactionPreviewProps = {
 	price?: Price;
-	collectionAddress: string;
+	collectionAddress: Hex;
 	chainId: string;
 	collectible: TokenMetadata;
 	isConfirming: boolean;