remove useTransactionStatusModal from modals

0xsequence · Dec 5, 2024 · d17ebe9 · d17ebe9
1 parent fcfcfa7
commit d17ebe9
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 183 deletions.
diff --git a/packages/sdk/src/react/ui/modals/CreateListingModal/index.tsx b/packages/sdk/src/react/ui/modals/CreateListingModal/index.tsx
@@ -1,13 +1,10 @@
 import { Box } from '@0xsequence/design-system';
 import { Show, observer } from '@legendapp/state/react';
-import type { QueryKey } from '@tanstack/react-query';
 import type { Hash, Hex } from 'viem';
 import {
 	type ContractType,
-	StepType,
-	collectableKeys,
 } from '../../../_internal';
-import { useCollectible, useCollection } from '../../../hooks';
+import { useCollection } from '../../../hooks';
 import { useCreateListing } from '../../../hooks/useCreateListing';
 import {
 	ActionModal,
@@ -21,13 +18,8 @@ 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 { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
 import type { ModalCallbacks } from '../_internal/types';
 import { createListingModal$ } from './_store';
-import {
-	getCreateListingTransactionMessage,
-	getCreateListingTransactionTitle,
-} from './_utils/getCreateListingTransactionTitleMessage';
 
 export type ShowCreateListingModalArgs = {
 	collectionAddress: Hex;
@@ -46,35 +38,16 @@ export const useCreateListingModal = (callbacks?: ModalCallbacks) => {
 };
 
 export const CreateListingModal = () => {
-	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	return (
 		<Show if={createListingModal$.isOpen}>
-			<Modal showTransactionStatusModal={showTransactionStatusModal} />
+			<Modal />
 		</Show>
 	);
 };
 
-type TransactionStatusModalReturn = ReturnType<
-	typeof useTransactionStatusModal
->;
-
-export const Modal = observer(
-	({
-		showTransactionStatusModal,
-	}: {
-		showTransactionStatusModal: TransactionStatusModalReturn['show'];
-	}) => {
+export const Modal = observer(() => {
 		const state = createListingModal$.get();
 		const { collectionAddress, chainId, listingPrice, collectibleId } = state;
-		const {
-			data: collectible,
-			isLoading: collectableIsLoading,
-			isError: collectableIsError,
-		} = useCollectible({
-			chainId,
-			collectionAddress,
-			collectibleId,
-		});
 		const {
 			data: collection,
 			isLoading: collectionIsLoading,
@@ -89,18 +62,6 @@ export const Modal = observer(
 			collectionAddress,
 			onTransactionSent: (hash) => {
 				if (!hash) return;
-				showTransactionStatusModal({
-					hash,
-					collectionAddress,
-					chainId,
-					price: createListingModal$.listingPrice.get(),
-					tokenId: collectibleId,
-					getTitle: getCreateListingTransactionTitle,
-					getMessage: (params) =>
-						getCreateListingTransactionMessage(params, collectible?.name || ''),
-					type: StepType.createListing,
-					queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
-				});
 				createListingModal$.close();
 			},
 			onError: (error) => {
@@ -123,7 +84,7 @@ export const Modal = observer(
 			}
 		};
 
-		if (collectableIsLoading || collectionIsLoading) {
+		if (collectionIsLoading) {
 			return (
 				<LoadingModal
 					store={createListingModal$}
@@ -133,7 +94,7 @@ export const Modal = observer(
 			);
 		}
 
-		if (collectableIsError || collectionIsError) {
+		if (collectionIsError) {
 			return (
 				<ErrorModal
 					store={createListingModal$}

diff --git a/packages/sdk/src/react/ui/modals/MakeOfferModal/index.tsx b/packages/sdk/src/react/ui/modals/MakeOfferModal/index.tsx
@@ -1,25 +1,19 @@
 import { Show, observer } from '@legendapp/state/react';
 import { useEffect, useState } from 'react';
 import type { Hex } from 'viem';
-import { collectableKeys, ContractType, StepType } from '../../../_internal';
-import { useCollectible, useCollection, useCurrencies } from '../../../hooks';
+import { ContractType } from '../../../_internal';
+import { useCollection, useCurrencies } from '../../../hooks';
 import { useMakeOffer } from '../../../hooks/useMakeOffer';
 import { ActionModal } 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 { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
 import { makeOfferModal$ } from './_store';
-import {
-	getMakeOfferTransactionMessage,
-	getMakeOfferTransactionTitle,
-} from './_utils/getMakeOfferTransactionTitleMessage';
 import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
 import { ErrorModal } from '../_internal/components/actionModal/ErrorModal';
 import type { ModalCallbacks } from '../_internal/types';
-import type { QueryKey } from '@tanstack/react-query';
 
 export type ShowMakeOfferModalArgs = {
 	collectionAddress: Hex;
@@ -34,38 +28,19 @@ export const useMakeOfferModal = (defaultCallbacks?: ModalCallbacks) => ({
 });
 
 export const MakeOfferModal = () => {
-	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	return (
 		<Show if={makeOfferModal$.isOpen}>
-			<ModalContent showTransactionStatusModal={showTransactionStatusModal} />
+			<ModalContent />
 		</Show>
 	);
 };
 
-type TransactionStatusModalReturn = ReturnType<
-	typeof useTransactionStatusModal
->;
-
 const ModalContent = observer(
-	({
-		showTransactionStatusModal,
-	}: {
-		showTransactionStatusModal: TransactionStatusModalReturn['show'];
-	}) => {
+	() => {
 		const state = makeOfferModal$.get();
 		const { collectionAddress, chainId, offerPrice, collectibleId } = state;
 		const [insufficientBalance, setInsufficientBalance] = useState(false);
 
-		const {
-			data: collectible,
-			isLoading: collectableIsLoading,
-			isError: collectableIsError,
-		} = useCollectible({
-			chainId,
-			collectionAddress,
-			collectibleId,
-		});
-
 		const {
 			data: collection,
 			isLoading: collectionIsLoading,
@@ -85,18 +60,7 @@ const ModalContent = observer(
 			collectionAddress,
 			onTransactionSent: (hash) => {
 				if (!hash) return;
-				showTransactionStatusModal({
-					hash,
-					price: makeOfferModal$.offerPrice.get(),
-					collectionAddress,
-					chainId,
-					tokenId: collectibleId,
-					getTitle: getMakeOfferTransactionTitle,
-					getMessage: (params) =>
-						getMakeOfferTransactionMessage(params, collectible?.name || ''),
-					type: StepType.createOffer,
-					queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
-				});
+
 				makeOfferModal$.close();
 			},
 			onSuccess: (hash) => {
@@ -136,7 +100,7 @@ const ModalContent = observer(
 			refreshSteps();
 		}, [currencyAddress]);
 
-		if (collectableIsLoading || collectionIsLoading || currenciesIsLoading) {
+		if (collectionIsLoading || currenciesIsLoading) {
 			return (
 				<LoadingModal
 					store={makeOfferModal$}
@@ -146,7 +110,7 @@ const ModalContent = observer(
 			);
 		}
 
-		if (collectableIsError || collectionIsError) {
+		if (collectionIsError) {
 			return (
 				<ErrorModal
 					store={makeOfferModal$}

diff --git a/packages/sdk/src/react/ui/modals/SellModal/index.tsx b/packages/sdk/src/react/ui/modals/SellModal/index.tsx
@@ -7,21 +7,12 @@ import TransactionHeader from '../_internal/components/transactionHeader';
 import { sellModal$ } from './_store';
 import { useCollection, useCurrencies } from '../../../hooks';
 import {
-	balanceQueries,
-	collectableKeys,
-	StepType,
 	type Order,
 } from '../../../_internal';
 import { useSell } from '../../../hooks/useSell';
 import { LoadingModal } from '../_internal/components/actionModal/LoadingModal';
 import { ErrorModal } from '..//_internal/components/actionModal/ErrorModal';
 import type { ModalCallbacks } from '..//_internal/types';
-import {
-	getSellTransactionMessage,
-	getSellTransactionTitle,
-} from './_utils/getSellTransactionTitleMessage';
-import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
-import type { QueryKey } from '@tanstack/react-query';
 
 export type ShowSellModalArgs = {
 	chainId: string;
@@ -37,56 +28,22 @@ export const useSellModal = (defaultCallbacks?: ModalCallbacks) => ({
 });
 
 export const SellModal = () => {
-	const { show: showTransactionStatusModal } = useTransactionStatusModal();
 	return (
 		<Show if={sellModal$.isOpen}>
-			<ModalContent showTransactionStatusModal={showTransactionStatusModal} />
+			<ModalContent />
 		</Show>
 	);
 };
 
-type TransactionStatusModalReturn = ReturnType<
-	typeof useTransactionStatusModal
->;
-
 const ModalContent = observer(
-	({
-		showTransactionStatusModal,
-	}: {
-		showTransactionStatusModal: TransactionStatusModalReturn['show'];
-	}) => {
+	() => {
 		const { tokenId, collectionAddress, chainId, order } = sellModal$.get();
-		const { data: collectible } = useCollection({
-			chainId,
-			collectionAddress,
-		});
-
 		const { sell } = useSell({
 			collectionAddress,
 			chainId,
 			onTransactionSent: (hash) => {
 				if (!hash) return;
-				showTransactionStatusModal({
-					hash: hash,
-					price: {
-						amountRaw: order!.priceAmount,
-						currency: currencies!.find(
-							(currency) =>
-								currency.contractAddress === order!.priceCurrencyAddress,
-						)!,
-					},
-					collectionAddress,
-					chainId,
-					tokenId,
-					getTitle: getSellTransactionTitle,
-					getMessage: (params) =>
-						getSellTransactionMessage(params, collectible?.name || ''),
-					type: StepType.sell,
-					queriesToInvalidate: [
-						...collectableKeys.all,
-						balanceQueries.all,
-					] as unknown as QueryKey[],
-				});
+
 				sellModal$.close();
 			},
 			onSuccess: (hash) => {

diff --git a/...ges/sdk/src/react/ui/modals/TransferModal/_views/enterWalletAddress/useHandleTransfer.tsx b/...ges/sdk/src/react/ui/modals/TransferModal/_views/enterWalletAddress/useHandleTransfer.tsx
@@ -1,14 +1,7 @@
-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 { useTransferTokens } from '../../../../../hooks';
 import { transferModal$ } from '../../_store';
-import {
-	getTransferTransactionMessage,
-	getTransferTransactionTitle,
-} from '../../_utils/getTransferTransactionTitleMessage';
 
 const useHandleTransfer = () => {
 	const {
@@ -18,16 +11,9 @@ const useHandleTransfer = () => {
 		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 (
@@ -39,7 +25,7 @@ const useHandleTransfer = () => {
 
 		if (collectionType === ContractType.ERC721) {
 			try {
-				const hash = await transferTokensAsync({
+				await transferTokensAsync({
 					receiverAddress: receiverAddress as Hex,
 					collectionAddress,
 					tokenId,
@@ -48,23 +34,6 @@ const useHandleTransfer = () => {
 				});
 
 				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');
 
@@ -74,7 +43,7 @@ const useHandleTransfer = () => {
 
 		if (collectionType === ContractType.ERC1155) {
 			try {
-				const hash = await transferTokensAsync({
+				await transferTokensAsync({
 					receiverAddress: receiverAddress as Hex,
 					collectionAddress,
 					tokenId,
@@ -84,22 +53,6 @@ const useHandleTransfer = () => {
 				});
 
 				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');