@0xsequence/marketplace-sdk 0.1.0 → 0.2.0

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

@@ -1,147 +1,168 @@
-import { Box } from '@0xsequence/design-system';
-import { ContractType } from '@internal';
-import { Show, observer } from '@legendapp/state/react';
-import type { Hex } from 'viem';
-import { useAccount } from 'wagmi';
-import type { Messages } from '../../../../types/messages';
+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 { useSwitchChainModal } from '../_internal/components/switchChainModal';
-import TokenPreview from '../_internal/components/tokenPreview';
-import TransactionDetails from '../_internal/components/transactionDetails';
-import { createListingModal$, useHydrate } from './_store';
+  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: Hex;
-	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,22 +1,29 @@
-import type { CollectionType } from '@internal';
 import { observable, when } from '@legendapp/state';
 import { useMount, useSelector } from '@legendapp/state/react';
-import { useCollectible } from '@react-hooks/useCollectible';
-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 { 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,
@@ -36,7 +43,8 @@ export interface MakeOfferModalState {
 		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);
 	},
@@ -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();
 
@@ -265,6 +264,8 @@ const useCreateOfferHandler = (chainId: string) => {
 
 					makeOfferModal$.steps._currentStep.set(null);
 
+					makeOfferModal$.close();
+
 					showTransactionStatusModal({
 						hash: hash!,
 						price: makeOfferModal$.state.offerPrice.get(),
@@ -275,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,9 +1,12 @@
-import { ContractType } from '@internal';
 import { Show, observer } from '@legendapp/state/react';
 import { useState } from 'react';
 import type { Hex } from 'viem';
 import { useAccount } from 'wagmi';
-import type { Messages } from '../../../../types/messages';
+import type {
+	MakeOfferErrorCallbacks,
+	MakeOfferSuccessCallbacks,
+} from '../../../../types/callbacks';
+import { ContractType } from '../../../_internal';
 import {
 	ActionModal,
 	type ActionModalProps,
@@ -20,12 +23,12 @@ export type ShowMakeOfferModalArgs = {
 	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);
@@ -38,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;
 		}
@@ -49,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,
+			});
+		},
 	};
 };