@0xsequence/marketplace-sdk 0.0.1 → 0.2.0

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

@@ -1,146 +1,168 @@
-import { Box } from '@0xsequence/design-system';
-import { ContractType } from '@internal';
-import { Show, observer } from '@legendapp/state/react';
+import { Box } from "@0xsequence/design-system";
+import { Show, observer } from "@legendapp/state/react";
+import type { Hex } from "viem";
+import { useAccount } from "wagmi";
 import {
-	ActionModal,
-	type ActionModalProps,
-} from '../_internal/components/actionModal/ActionModal';
-import ExpirationDateSelect from '../_internal/components/expirationDateSelect';
-import FloorPriceText from '../_internal/components/floorPriceText';
-import PriceInput from '../_internal/components/priceInput';
-import QuantityInput from '../_internal/components/quantityInput';
-import TokenPreview from '../_internal/components/tokenPreview';
-import TransactionDetails from '../_internal/components/transactionDetails';
-import { createListingModal$, useHydrate } from './_store';
-import { useAccount } from 'wagmi';
-import { useSwitchChainModal } from '../_internal/components/switchChainModal';
-import type { Messages } from '../../../../types/messages';
+  ActionModal,
+  type ActionModalProps,
+} from "../_internal/components/actionModal/ActionModal";
+import ExpirationDateSelect from "../_internal/components/expirationDateSelect";
+import FloorPriceText from "../_internal/components/floorPriceText";
+import PriceInput from "../_internal/components/priceInput";
+import QuantityInput from "../_internal/components/quantityInput";
+import { useSwitchChainModal } from "../_internal/components/switchChainModal";
+import TokenPreview from "../_internal/components/tokenPreview";
+import TransactionDetails from "../_internal/components/transactionDetails";
+import { createListingModal$, useHydrate } from "./_store";
+import {
+  CreateListingErrorCallbacks,
+  CreateListingSuccessCallbacks,
+} from "../../../../types/callbacks";
+import { ContractType } from "../../../_internal";
 
 export type ShowCreateListingModalArgs = {
-	collectionAddress: string;
-	chainId: string;
-	collectibleId: string;
-	messages?: Messages;
+  collectionAddress: Hex;
+  chainId: string;
+  collectibleId: string;
 };
 
 export const useCreateListingModal = () => {
-	const { chainId: accountChainId } = useAccount();
-	const { show: showSwitchNetworkModal } = useSwitchChainModal();
-
-	const openModal = (args: ShowCreateListingModalArgs) => {
-		createListingModal$.open(args);
-	};
-
-	const handleShowModal = (args: ShowCreateListingModalArgs) => {
-		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: () => createListingModal$.close(),
-	};
+  const { chainId: accountChainId } = useAccount();
+  const { show: showSwitchNetworkModal } = useSwitchChainModal();
+  const { errorCallbacks, successCallbacks } = createListingModal$.state.get();
+
+  const openModal = (args: ShowCreateListingModalArgs) => {
+    createListingModal$.open(args);
+  };
+
+  const handleShowModal = (args: ShowCreateListingModalArgs) => {
+    const isSameChain = accountChainId === Number(args.chainId);
+
+    if (!isSameChain) {
+      showSwitchNetworkModal({
+        chainIdToSwitchTo: Number(args.chainId),
+        onSwitchChain: () => openModal(args),
+        callbacks: {
+          onSuccess: successCallbacks?.onSwitchChainSuccess,
+          onUnknownError: errorCallbacks?.onSwitchChainError,
+          onSwitchingNotSupported: errorCallbacks?.onSwitchingNotSupportedError,
+          onUserRejectedRequest:
+            errorCallbacks?.onUserRejectedSwitchingChainRequestError,
+        },
+      });
+      return;
+    }
+
+    openModal(args);
+  };
+
+  return {
+    show: handleShowModal,
+    close: () => createListingModal$.close(),
+    onError: (callbacks: CreateListingErrorCallbacks) => {
+      createListingModal$.state.set({
+        ...createListingModal$.state.get(),
+        errorCallbacks: callbacks,
+      });
+    },
+    onSuccess: (callbacks: CreateListingSuccessCallbacks) => {
+      createListingModal$.state.set({
+        ...createListingModal$.state.get(),
+        successCallbacks: callbacks,
+      });
+    },
+  };
 };
 
 export const CreateListingModal = () => {
-	return (
-		<Show if={createListingModal$.isOpen}>
-			<Modal />
-		</Show>
-	);
+  return (
+    <Show if={createListingModal$.isOpen}>
+      <Modal />
+    </Show>
+  );
 };
 
 const Modal = () => {
-	useHydrate();
-	return <ModalContent />;
+  useHydrate();
+  return <ModalContent />;
 };
 
 const ModalContent = observer(() => {
-	const {
-		chainId,
-		collectionAddress,
-		collectibleId,
-		collectionName,
-		collectionType,
-		listingPrice,
-	} = createListingModal$.state.get();
-
-	const { steps } = createListingModal$.get();
-
-	const ctas = [
-		{
-			label: 'Approve TOKEN',
-			onClick: steps.tokenApproval.execute,
-			hidden: !steps.tokenApproval.isNeeded(),
-			pending: steps.tokenApproval.pending,
-			variant: 'glass' as const,
-		},
-		{
-			label: 'List item for sale',
-			onClick: steps.createListing.execute,
-			pending: steps.createListing.pending,
-			disabled:
-				steps.tokenApproval.isNeeded() || listingPrice.amountRaw === '0',
-		},
-	] satisfies ActionModalProps['ctas'];
-
-	return (
-		<ActionModal
-			store={createListingModal$}
-			onClose={() => createListingModal$.close()}
-			title="List item for sale"
-			ctas={ctas}
-		>
-			<TokenPreview
-				collectionName={collectionName}
-				collectionAddress={collectionAddress}
-				collectibleId={collectibleId}
-				chainId={chainId}
-			/>
-
-			<Box display="flex" flexDirection="column" width="full" gap="1">
-				<PriceInput
-					chainId={chainId}
-					collectionAddress={collectionAddress}
-					$listingPrice={createListingModal$.state.listingPrice}
-				/>
-				{!!listingPrice && (
-					<FloorPriceText
-						tokenId={collectibleId}
-						chainId={chainId}
-						collectionAddress={collectionAddress}
-						price={listingPrice}
-					/>
-				)}
-			</Box>
-
-			{collectionType === ContractType.ERC1155 && (
-				<QuantityInput
-					chainId={chainId}
-					collectionAddress={collectionAddress}
-					collectibleId={collectibleId}
-					$quantity={createListingModal$.state.quantity}
-				/>
-			)}
-
-			<ExpirationDateSelect $date={createListingModal$.state.expiry} />
-
-			<TransactionDetails
-				collectibleId={collectibleId}
-				collectionAddress={collectionAddress}
-				chainId={chainId}
-				price={createListingModal$.state.listingPrice.get()}
-			/>
-		</ActionModal>
-	);
+  const {
+    chainId,
+    collectionAddress,
+    collectibleId,
+    collectionName,
+    collectionType,
+    listingPrice,
+  } = createListingModal$.state.get();
+
+  const { steps } = createListingModal$.get();
+
+  const ctas = [
+    {
+      label: "Approve TOKEN",
+      onClick: steps.tokenApproval.execute,
+      hidden: !steps.tokenApproval.isNeeded(),
+      pending: steps.tokenApproval.pending,
+      variant: "glass" as const,
+    },
+    {
+      label: "List item for sale",
+      onClick: steps.createListing.execute,
+      pending: steps.createListing.pending,
+      disabled:
+        steps.tokenApproval.isNeeded() || listingPrice.amountRaw === "0",
+    },
+  ] satisfies ActionModalProps["ctas"];
+
+  return (
+    <ActionModal
+      store={createListingModal$}
+      onClose={() => createListingModal$.close()}
+      title="List item for sale"
+      ctas={ctas}
+    >
+      <TokenPreview
+        collectionName={collectionName}
+        collectionAddress={collectionAddress}
+        collectibleId={collectibleId}
+        chainId={chainId}
+      />
+
+      <Box display="flex" flexDirection="column" width="full" gap="1">
+        <PriceInput
+          chainId={chainId}
+          collectionAddress={collectionAddress}
+          $listingPrice={createListingModal$.state.listingPrice}
+        />
+        {!!listingPrice && (
+          <FloorPriceText
+            tokenId={collectibleId}
+            chainId={chainId}
+            collectionAddress={collectionAddress}
+            price={listingPrice}
+          />
+        )}
+      </Box>
+
+      {collectionType === ContractType.ERC1155 && (
+        <QuantityInput
+          chainId={chainId}
+          collectionAddress={collectionAddress}
+          collectibleId={collectibleId}
+          $quantity={createListingModal$.state.quantity}
+        />
+      )}
+
+      <ExpirationDateSelect $date={createListingModal$.state.expiry} />
+
+      <TransactionDetails
+        collectibleId={collectibleId}
+        collectionAddress={collectionAddress}
+        chainId={chainId}
+        price={createListingModal$.state.listingPrice.get()}
+      />
+    </ActionModal>
+  );
 });

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

@@ -1,27 +1,34 @@
 import { observable, when } from '@legendapp/state';
 import { useMount, useSelector } from '@legendapp/state/react';
-import { useCollection } from '@react-hooks/useCollection';
-import { useGenerateOfferTransaction } from '@react-hooks/useGenerateOfferTransaction';
+import type { QueryKey } from '@tanstack/react-query';
+import { addDays } from 'date-fns/addDays';
+import type { Hex } from 'viem';
+import { useAccount, useSendTransaction } from 'wagmi';
+import type { ShowMakeOfferModalArgs } from '.';
+import type { Price } from '../../../../types';
+import type {
+	MakeOfferErrorCallbacks,
+	MakeOfferSuccessCallbacks,
+} from '../../../../types/callbacks';
 import {
+	type CollectionType,
 	type Currency,
 	OrderbookKind,
-	type Price,
 	type Step,
 	StepType,
 	type WalletKind,
-} from '@types';
-import { addDays } from 'date-fns/addDays';
-import { parseUnits, type Hex } from 'viem';
-import { useAccount, useSendTransaction } from 'wagmi';
-import type { ShowMakeOfferModalArgs } from '.';
-import type { Messages } from '../../../../types/messages';
+	collectableKeys,
+} from '../../../_internal';
+import {
+	useCollectible,
+	useCollection,
+	useGenerateOfferTransaction,
+} from '../../../hooks';
 import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
 import {
 	getMakeOfferTransactionMessage,
 	getMakeOfferTransactionTitle,
 } from './_utils/getMakeOfferTransactionTitleMessage';
-import { useCollectible } from '@react-hooks/useCollectible';
-import type { CollectionType } from '@internal';
 
 export interface MakeOfferModalState {
 	isOpen: boolean;
@@ -32,11 +39,12 @@ export interface MakeOfferModalState {
 		collectionType: CollectionType | undefined;
 		offerPrice: Price;
 		quantity: string;
-		collectionAddress: string;
+		collectionAddress: Hex;
 		chainId: string;
 		collectibleId: string;
 		expiry: Date;
-		messages?: Messages;
+		errorCallbacks?: MakeOfferErrorCallbacks;
+		successCallbacks?: MakeOfferSuccessCallbacks;
 	};
 	steps: {
 		isLoading: () => boolean;
@@ -62,14 +70,12 @@ export const initialState: MakeOfferModalState = {
 		collectionAddress,
 		chainId,
 		collectibleId,
-		messages,
 	}: ShowMakeOfferModalArgs) => {
 		makeOfferModal$.state.set({
 			...makeOfferModal$.state.get(),
 			collectionAddress,
 			chainId,
 			collectibleId,
-			messages,
 		});
 		makeOfferModal$.isOpen.set(true);
 	},
@@ -85,7 +91,7 @@ export const initialState: MakeOfferModalState = {
 		quantity: '1',
 		expiry: new Date(addDays(new Date(), 7).toJSON()),
 		collectionType: undefined,
-		collectionAddress: '',
+		collectionAddress: '' as Hex,
 		chainId: '',
 		collectibleId: '',
 	},
@@ -164,11 +170,10 @@ export const useHydrate = () => {
 
 const useTokenApprovalHandler = (chainId: string) => {
 	const { sendTransactionAsync, isPending, isSuccess } = useSendTransaction();
-	const {
-		onUnknownError,
-		onSuccess,
-	}: { onUnknownError?: Function; onSuccess?: Function } =
-		makeOfferModal$.state.get().messages?.approveToken || {};
+	const onError =
+		makeOfferModal$.state.get().errorCallbacks?.onApproveTokenError;
+	const onSuccess: (() => void) | undefined =
+		makeOfferModal$.state.get().successCallbacks?.onApproveTokenSuccess;
 
 	makeOfferModal$.steps.tokenApproval.set({
 		isNeeded: () => !!makeOfferModal$.steps.tokenApproval.getStep(),
@@ -192,7 +197,7 @@ const useTokenApprovalHandler = (chainId: string) => {
 
 				onSuccess && onSuccess();
 			} catch (error) {
-				onUnknownError && onUnknownError(error);
+				onError && onError(error);
 			}
 		},
 	});
@@ -206,12 +211,12 @@ const useTokenApprovalHandler = (chainId: string) => {
 };
 
 const useCreateOfferHandler = (chainId: string) => {
-	const { collectibleId, collectionAddress } = makeOfferModal$.state.get();
+	const { collectibleId, collectionAddress, errorCallbacks, successCallbacks } =
+		makeOfferModal$.state.get();
 	const { connector, address } = useAccount();
 	const {
 		generateOfferTransactionAsync,
 		isPending: generateOfferTransactionPending,
-		error: generateOfferTransactionError,
 	} = useGenerateOfferTransaction({ chainId });
 	const { data: collectible } = useCollectible({
 		chainId,
@@ -219,12 +224,6 @@ const useCreateOfferHandler = (chainId: string) => {
 		collectibleId,
 	});
 
-	const {
-		onUnknownError,
-		onSuccess,
-	}: { onUnknownError?: Function; onSuccess?: Function } =
-		makeOfferModal$.state.get().messages?.sellCollectible || {};
-
 	const { sendTransactionAsync, isPending: sendTransactionPending } =
 		useSendTransaction();
 
@@ -248,10 +247,7 @@ const useCreateOfferHandler = (chainId: string) => {
 					expiry: makeOfferModal$.state.expiry.get(),
 					currencyAddress:
 						makeOfferModal$.state.offerPrice.currency.contractAddress.get(),
-					pricePerToken: parseUnits(
-						makeOfferModal$.state.offerPrice.amountRaw.get(),
-						makeOfferModal$.state.offerPrice.currency.decimals.get(),
-					).toString(),
+					pricePerToken: makeOfferModal$.state.offerPrice.amountRaw.get(),
 				},
 			})
 				.then(async (steps) => {
@@ -268,6 +264,8 @@ const useCreateOfferHandler = (chainId: string) => {
 
 					makeOfferModal$.steps._currentStep.set(null);
 
+					makeOfferModal$.close();
+
 					showTransactionStatusModal({
 						hash: hash!,
 						price: makeOfferModal$.state.offerPrice.get(),
@@ -278,19 +276,16 @@ const useCreateOfferHandler = (chainId: string) => {
 						getMessage: (params) =>
 							getMakeOfferTransactionMessage(params, collectible?.name || ''),
 						type: StepType.createOffer,
+						callbacks: {
+							onSuccess: successCallbacks?.onMakeOfferSuccess,
+							onUnknownError: errorCallbacks?.onMakeOfferError,
+						},
+						queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
 					});
-
-					makeOfferModal$.close();
-
-					onSuccess && onSuccess();
 				})
 				.catch((error) => {
-					onUnknownError && onUnknownError(error);
+					errorCallbacks?.onMakeOfferError?.(error);
 				});
 		},
 	});
-
-	if (generateOfferTransactionError) {
-		onUnknownError && onUnknownError(generateOfferTransactionError);
-	}
 };

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

@@ -1,7 +1,12 @@
-import { ContractType } from '@internal';
 import { Show, observer } from '@legendapp/state/react';
-import { type Hex, erc20Abi, parseUnits } from 'viem';
-import { useAccount, useReadContract } from 'wagmi';
+import { useState } from 'react';
+import type { Hex } from 'viem';
+import { useAccount } from 'wagmi';
+import type {
+	MakeOfferErrorCallbacks,
+	MakeOfferSuccessCallbacks,
+} from '../../../../types/callbacks';
+import { ContractType } from '../../../_internal';
 import {
 	ActionModal,
 	type ActionModalProps,
@@ -10,21 +15,20 @@ import ExpirationDateSelect from '../_internal/components/expirationDateSelect';
 import FloorPriceText from '../_internal/components/floorPriceText';
 import PriceInput from '../_internal/components/priceInput';
 import QuantityInput from '../_internal/components/quantityInput';
+import { useSwitchChainModal } from '../_internal/components/switchChainModal';
 import TokenPreview from '../_internal/components/tokenPreview';
 import { makeOfferModal$, useHydrate } from './_store';
-import { useSwitchChainModal } from '../_internal/components/switchChainModal';
-import type { Messages } from '../../../../types/messages';
 
 export type ShowMakeOfferModalArgs = {
-	collectionAddress: string;
+	collectionAddress: Hex;
 	chainId: string;
 	collectibleId: string;
-	messages?: Messages;
 };
 
 export const useMakeOfferModal = () => {
 	const { chainId: accountChainId } = useAccount();
 	const { show: showSwitchNetworkModal } = useSwitchChainModal();
+	const { errorCallbacks, successCallbacks } = makeOfferModal$.state.get();
 
 	const openModal = (args: ShowMakeOfferModalArgs) => {
 		makeOfferModal$.open(args);
@@ -37,7 +41,13 @@ export const useMakeOfferModal = () => {
 			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;
 		}
@@ -48,6 +58,18 @@ export const useMakeOfferModal = () => {
 	return {
 		show: handleShowModal,
 		close: () => makeOfferModal$.close(),
+		onError: (callbacks: MakeOfferErrorCallbacks) => {
+			makeOfferModal$.state.set({
+				...makeOfferModal$.state.get(),
+				errorCallbacks: callbacks,
+			});
+		},
+		onSuccess: (callbacks: MakeOfferSuccessCallbacks) => {
+			makeOfferModal$.state.set({
+				...makeOfferModal$.state.get(),
+				successCallbacks: callbacks,
+			});
+		},
 	};
 };
 
@@ -65,6 +87,7 @@ const Modal = () => {
 };
 
 const ModalContent = observer(() => {
+	const [insufficientBalance, setInsufficientBalance] = useState(false);
 	const {
 		chainId,
 		collectionAddress,
@@ -76,24 +99,6 @@ const ModalContent = observer(() => {
 
 	const { steps } = makeOfferModal$.get();
 
-	const { address: accountAddress } = useAccount();
-	const { data: balance, isSuccess: isBalanceSuccess } = useReadContract({
-		address:
-			makeOfferModal$.state.offerPrice.currency.contractAddress.get() as Hex,
-		abi: erc20Abi,
-		functionName: 'balanceOf',
-		args: [accountAddress as Hex],
-	});
-
-	let balanceError = '';
-	if (
-		isBalanceSuccess &&
-		parseUnits(offerPrice.amountRaw, offerPrice.currency.decimals) >
-			(balance || 0)
-	) {
-		balanceError = 'Insufficient balance';
-	}
-
 	const ctas = [
 		{
 			label: 'Approve TOKEN',
@@ -106,7 +111,10 @@ const ModalContent = observer(() => {
 			label: 'Make offer',
 			onClick: steps.createOffer.execute,
 			pending: steps.createOffer.pending,
-			disabled: steps.tokenApproval.isNeeded() || offerPrice.amountRaw === '0',
+			disabled:
+				steps.tokenApproval.isNeeded() ||
+				offerPrice.amountRaw === '0' ||
+				insufficientBalance,
 		},
 	] satisfies ActionModalProps['ctas'];
 
@@ -130,7 +138,10 @@ const ModalContent = observer(() => {
 				chainId={chainId}
 				collectionAddress={collectionAddress}
 				$listingPrice={makeOfferModal$.state.offerPrice}
-				error={balanceError}
+				checkBalance={{
+					enabled: true,
+					callback: (state) => setInsufficientBalance(state),
+				}}
 			/>
 
 			{collectionType === ContractType.ERC1155 && (