@0xsequence/marketplace-sdk 0.0.1 → 0.2.0

package/src/react/hooks/useGenerateOfferTransaction.tsx

@@ -1,10 +1,12 @@
+import { useMutation } from '@tanstack/react-query';
+import type { SdkConfig } from '../../types';
 import {
 	type ChainId,
+	type CreateReq,
 	type GenerateOfferTransactionArgs,
+	type Step,
 	getMarketplaceClient,
-} from '@internal';
-import { useMutation } from '@tanstack/react-query';
-import type { SdkConfig, Step } from '@types';
+} from '../_internal';
 import { useConfig } from './useConfig';
 
 export type UseGenerateOfferTransactionArgs = {
@@ -12,8 +14,6 @@ export type UseGenerateOfferTransactionArgs = {
 	onSuccess?: (data?: Step[]) => void;
 };
 
-import type { CreateReq } from '@types';
-
 type CreateReqWithDateExpiry = Omit<CreateReq, 'expiry'> & {
 	expiry: Date;
 };

package/src/react/hooks/useGenerateSellTransaction.tsx

@@ -1,27 +1,34 @@
+import { useMutation } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
 import {
 	type ChainId,
+	ChainIdSchema,
 	type GenerateSellTransactionArgs,
 	getMarketplaceClient,
-} from '@internal';
-import { useMutation } from '@tanstack/react-query';
-import type { SdkConfig } from '@types';
+} from '../_internal';
+import { stepSchema } from '../_internal/api/zod-schema';
 import { useConfig } from './useConfig';
 
-export type UseGenerateSellTransactionArgs = {
-	chainId: ChainId;
-	onSuccess?: () => void | Promise<void>;
-};
+const UserGeneratSellTransactionArgsSchema = z.object({
+	chainId: ChainIdSchema.pipe(z.coerce.string()),
+	onSuccess: z.function().args(stepSchema.array().optional()).optional(),
+});
+
+type UseGenerateSellTransactionArgs = z.infer<
+	typeof UserGeneratSellTransactionArgsSchema
+>;
 
 export const generateSellTransaction = async (
 	args: GenerateSellTransactionArgs,
 	config: SdkConfig,
 	chainId: ChainId,
 ) => {
-	console.log('generateSellTransaction');
-	console.log(args);
-	console.log(chainId);
-	const marketplaceClient = getMarketplaceClient(chainId, config);
-	return marketplaceClient.generateSellTransaction(args);
+	const parsedChainId = ChainIdSchema.pipe(z.coerce.string()).parse(chainId);
+	const marketplaceClient = getMarketplaceClient(parsedChainId, config);
+	return marketplaceClient
+		.generateSellTransaction(args)
+		.then((data) => data.steps);
 };
 
 export const useGenerateSellTransaction = (

package/src/react/hooks/useHighestOffer.tsx

@@ -1,31 +1,41 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
 import {
-	type GetCollectibleHighestOfferArgs,
-	type QueryArg,
+	AddressSchema,
+	ChainIdSchema,
+	QueryArgSchema,
 	collectableKeys,
 	getMarketplaceClient,
-} from '@internal';
-import { queryOptions, useQuery } from '@tanstack/react-query';
-import type { SdkConfig } from '@types';
+} from '../_internal';
+import { getCollectibleHighestOfferArgsSchema } from '../_internal/api/zod-schema';
 import { useConfig } from './useConfig';
 
-export type UseHighestOfferArgs = Omit<
-	GetCollectibleHighestOfferArgs,
-	'contractAddress'
-> & {
-	collectionAddress: string;
-	chainId: string;
-} & QueryArg;
+const UseHighestOfferArgsSchema = getCollectibleHighestOfferArgsSchema
+	.omit({
+		contractAddress: true,
+	})
+	.extend({
+		collectionAddress: AddressSchema,
+		chainId: ChainIdSchema.pipe(z.coerce.string()),
+		query: QueryArgSchema,
+	});
+
+export type UseHighestOfferArgs = z.infer<typeof UseHighestOfferArgsSchema>;
 
-export type UseHighestOfferReturn = ReturnType<typeof fetchHighestOffer>;
+export type UseHighestOfferReturn = Awaited<
+	ReturnType<typeof fetchHighestOffer>
+>;
 
 const fetchHighestOffer = async (
 	args: UseHighestOfferArgs,
 	config: SdkConfig,
 ) => {
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	const parsedArgs = UseHighestOfferArgsSchema.parse(args);
+	const marketplaceClient = getMarketplaceClient(parsedArgs.chainId, config);
 	return marketplaceClient.getCollectibleHighestOffer({
-		...args,
-		contractAddress: args.collectionAddress,
+		...parsedArgs,
+		contractAddress: parsedArgs.collectionAddress,
 	});
 };
 

package/src/react/hooks/useListBalances.tsx

@@ -1,56 +1,87 @@
-import type { MetadataOptions, Page } from '@0xsequence/indexer';
+import { type Page, SortOrder } from '@0xsequence/indexer';
+import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
 import {
-	type ChainId,
-	type QueryArg,
+	AddressSchema,
+	ChainIdSchema,
+	QueryArgSchema,
 	balanceQueries,
 	getIndexerClient,
-} from '@internal';
-import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
-import type { SdkConfig } from '@types';
+} from '../_internal';
 import { useConfig } from './useConfig';
 
-export type UseTokenBalancesArgs = {
-	chainId: ChainId;
-	accountAddress?: string;
-	contractAddress?: string;
-	tokenId?: string;
-	includeMetadata?: boolean;
-	metadataOptions?: MetadataOptions;
-	includeCollectionTokens?: boolean;
-	page?: Page;
-} & QueryArg;
-
-export type UseFetchTokenBalancesReturn = ReturnType<typeof fetchTokenBalances>;
-
-const fetchTokenBalances = async (
-	args: UseTokenBalancesArgs,
+export const metadataOptionsSchema = z.object({
+	verifiedOnly: z.boolean().optional(),
+	unverifiedOnly: z.boolean().optional(),
+	includeContracts: z.array(z.string()).optional(),
+});
+
+const sortOrderSchema = z.nativeEnum(SortOrder);
+
+const sortBySchema = z.object({
+	column: z.string(),
+	order: sortOrderSchema,
+});
+
+const pageSchema = z.object({
+	page: z.number().optional(),
+	column: z.string().optional(),
+	before: z.any().optional(),
+	after: z.any().optional(),
+	sort: z.array(sortBySchema).optional(),
+	pageSize: z.number().optional(),
+	more: z.boolean().optional(),
+});
+
+const useListBalancesArgsSchema = z.object({
+	chainId: ChainIdSchema.pipe(z.coerce.number()),
+	accountAddress: AddressSchema.optional(),
+	contractAddress: AddressSchema.optional(),
+	tokenId: z.string().optional(),
+	includeMetadata: z.boolean().optional(),
+	metadataOptions: metadataOptionsSchema.optional(),
+	includeCollectionTokens: z.boolean().optional(),
+	page: pageSchema.optional(),
+	query: QueryArgSchema,
+});
+
+export type UseFetchTokenBalancesReturn = Awaited<
+	ReturnType<typeof fetchBalances>
+>;
+
+export type UseListBalancesArgs = z.input<typeof useListBalancesArgsSchema>;
+
+const fetchBalances = async (
+	args: UseListBalancesArgs,
 	page: Page,
 	config: SdkConfig,
 ) => {
-	const indexerClient = getIndexerClient(args.chainId, config);
+	const parsedArgs = useListBalancesArgsSchema.parse(args);
+	const indexerClient = getIndexerClient(parsedArgs.chainId, config);
 
 	return indexerClient.getTokenBalances({
-		...args,
-		tokenID: args.tokenId,
+		...parsedArgs,
+		tokenID: parsedArgs.tokenId,
 		page: page,
 	});
 };
 
-export const tokenBalancesOptions = (
-	args: UseTokenBalancesArgs,
+export const listBalancesOptions = (
+	args: UseListBalancesArgs,
 	config: SdkConfig,
 ) => {
 	return infiniteQueryOptions({
 		...args.query,
 		queryKey: [...balanceQueries.lists, args, config],
 		queryFn: ({ pageParam }: { pageParam: Page }) =>
-			fetchTokenBalances(args, pageParam, config),
+			fetchBalances(args, pageParam, config),
 		initialPageParam: { page: 1, pageSize: 30 } as Page,
 		getNextPageParam: (lastPage) => lastPage.page.after,
 	});
 };
 
-export const useTokenBalances = (args: UseTokenBalancesArgs) => {
+export const useListBalances = (args: UseListBalancesArgs) => {
 	const config = useConfig();
-	return useInfiniteQuery(tokenBalancesOptions(args, config));
+	return useInfiniteQuery(listBalancesOptions(args, config));
 };

package/src/react/hooks/useListCollectibles.tsx

@@ -1,32 +1,45 @@
+import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
 import {
-	type ChainId,
+	AddressSchema,
+	ChainIdSchema,
 	type ListCollectiblesArgs,
 	type Page,
+	QueryArgSchema,
 	collectableKeys,
 	getMarketplaceClient,
-} from '@internal';
-import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
-import type { SdkConfig } from '@types';
+} from '../_internal';
+import { listCollectiblesArgsSchema } from '../_internal/api/zod-schema';
 import { useConfig } from './useConfig';
 
-export type UseListCollectiblesArgs = Omit<
-	ListCollectiblesArgs,
-	'contractAddress'
-> & {
-	collectionAddress: string;
-	chainId: ChainId;
-};
+const UseListCollectiblesArgsSchema = listCollectiblesArgsSchema
+	.omit({
+		contractAddress: true,
+	})
+	.extend({
+		collectionAddress: AddressSchema,
+		chainId: ChainIdSchema.pipe(z.coerce.string()),
+		query: QueryArgSchema,
+	});
+
+export type UseListCollectiblesArgs = z.infer<
+	typeof UseListCollectiblesArgsSchema
+>;
 
-export type UseListCollectiblesReturn = ReturnType<typeof fetchCollectibles>;
+export type UseListCollectiblesReturn = Awaited<
+	ReturnType<typeof fetchCollectibles>
+>;
 
 const fetchCollectibles = async (
 	args: UseListCollectiblesArgs,
 	page: Page,
-	marketplaceClient: ReturnType<typeof getMarketplaceClient>,
+	marketplaceClient: Awaited<ReturnType<typeof getMarketplaceClient>>,
 ) => {
+	const parsedArgs = UseListCollectiblesArgsSchema.parse(args);
 	const arg = {
-		...args,
-		contractAddress: args.collectionAddress,
+		...parsedArgs,
+		contractAddress: parsedArgs.collectionAddress,
 		page,
 	} satisfies ListCollectiblesArgs;
 

package/src/react/hooks/useListOffersForCollectible.tsx

@@ -1,18 +1,27 @@
+import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
 import {
+	ChainIdSchema,
 	type ListOffersForCollectibleArgs,
+	type Page,
 	collectableKeys,
 	getMarketplaceClient,
-} from '@internal';
-import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
-import type { Page, SdkConfig } from '@types';
+} from '../_internal';
+import { listOffersForCollectibleArgsSchema } from '../_internal/api/zod-schema';
 import { useConfig } from './useConfig';
 
-export type UseListOffersForCollectibleArgs = ListOffersForCollectibleArgs & {
-	chainId: string;
-};
+const UseListOffersForCollectibleArgsSchema =
+	listOffersForCollectibleArgsSchema.extend({
+		chainId: ChainIdSchema.pipe(z.coerce.string()),
+	});
+
+type UseListOffersForCollectibleArgs = z.infer<
+	typeof UseListOffersForCollectibleArgsSchema
+>;
 
-export type UseListOffersForCollectible = ReturnType<
-	typeof fetchListOffersForCollectible
+export type UseListOffersForCollectibleReturn = Awaited<
+	ReturnType<typeof fetchListOffersForCollectible>
 >;
 
 const fetchListOffersForCollectible = async (

package/src/react/hooks/useLowestListing.tsx

@@ -1,32 +1,41 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
 import {
-	type ChainId,
-	type GetCollectibleLowestListingArgs,
-	type QueryArg,
+	AddressSchema,
+	ChainIdSchema,
+	QueryArgSchema,
 	collectableKeys,
 	getMarketplaceClient,
-} from '@internal';
-import { queryOptions, useQuery } from '@tanstack/react-query';
-import type { SdkConfig } from '@types';
+} from '../_internal';
+import { getCollectibleLowestListingArgsSchema } from '../_internal/api/zod-schema';
 import { useConfig } from './useConfig';
 
-export type UseLowestListingArgs = Omit<
-	GetCollectibleLowestListingArgs,
-	'contractAddress'
-> & {
-	collectionAddress: string;
-	chainId: ChainId;
-} & QueryArg;
+const UseLowestListingSchema = getCollectibleLowestListingArgsSchema
+	.omit({
+		contractAddress: true,
+	})
+	.extend({
+		collectionAddress: AddressSchema,
+		chainId: ChainIdSchema.pipe(z.coerce.string()),
+		query: QueryArgSchema,
+	});
+
+export type UseLowestListingArgs = z.infer<typeof UseLowestListingSchema>;
 
-export type UseLowestListingReturn = ReturnType<typeof fetchLowestListing>;
+export type UseLowestListingReturn = Awaited<
+	ReturnType<typeof fetchLowestListing>
+>;
 
 const fetchLowestListing = async (
 	args: UseLowestListingArgs,
 	config: SdkConfig,
 ) => {
-	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	const parsedArgs = UseLowestListingSchema.parse(args);
+	const marketplaceClient = getMarketplaceClient(parsedArgs.chainId, config);
 	return marketplaceClient.getCollectibleLowestListing({
-		...args,
-		contractAddress: args.collectionAddress,
+		...parsedArgs,
+		contractAddress: parsedArgs.collectionAddress,
 	});
 };
 

package/src/react/hooks/useRoyaltyPercentage.tsx

@@ -1,21 +1,31 @@
-import { type ChainId, type QueryArg, collectableKeys } from '@internal';
 import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { Hex } from 'viem';
 import { getContract } from 'viem';
+import { z } from 'zod';
 import { EIP2981_ABI } from '../../utils/abi/abi/standard/EIP2981';
 import { getPublicRpcClient } from '../../utils/get-public-rpc-client';
+import {
+	AddressSchema,
+	ChainIdSchema,
+	QueryArgSchema,
+	collectableKeys,
+} from '../_internal';
 
-type UseRoyaletyPercentageArgs = {
-	chainId: ChainId;
-	collectionAddress: string;
-	collectibleId: string;
-} & QueryArg;
+const UseRoyaletyPercentageSchema = z.object({
+	chainId: ChainIdSchema.pipe(z.coerce.string()),
+	collectionAddress: AddressSchema,
+	collectibleId: z.string(),
+	query: QueryArgSchema,
+});
+
+type UseRoyaletyPercentageArgs = z.infer<typeof UseRoyaletyPercentageSchema>;
 
 const fetchRoyaletyPercentage = async (args: UseRoyaletyPercentageArgs) => {
-	const publicClient = getPublicRpcClient(args.chainId);
+	const parsedArgs = UseRoyaletyPercentageSchema.parse(args);
+	const publicClient = getPublicRpcClient(parsedArgs.chainId);
 
 	const contract = getContract({
-		address: args.collectionAddress as Hex,
+		address: parsedArgs.collectionAddress as Hex,
 		abi: EIP2981_ABI,
 		client: publicClient,
 	});

package/src/react/hooks/useTransferTokens.tsx

@@ -1,7 +1,7 @@
-import type { ContractType, ChainId } from '@internal';
-import { ERC1155_ABI } from '../../utils';
-import { type Abi, erc721Abi, type Address, type Hex } from 'viem';
+import { type Abi, type Address, type Hex, erc721Abi } from 'viem';
 import { useAccount, useWriteContract } from 'wagmi';
+import { ERC1155_ABI } from '../../utils';
+import type { ChainId, ContractType } from '../_internal';
 
 interface BaseTransferParams {
 	chainId: ChainId;

package/src/react/provider.tsx

@@ -2,7 +2,7 @@
 
 import { createContext } from 'react';
 import '@0xsequence/design-system/styles.css';
-import type { SdkConfig } from '@types';
+import type { SdkConfig } from '../types';
 import { PROVIDER_ID } from './_internal/get-provider';
 
 export const MarketplaceSdkContext = createContext({} as SdkConfig);

package/src/react/ssr/create-ssr-client.ts

@@ -2,7 +2,7 @@ import { type State, cookieToInitialState } from 'wagmi';
 import type { SdkConfig } from '../../types/sdk-config';
 import { getQueryClient } from '../_internal/api/get-query-client';
 import { createWagmiConfig } from '../_internal/wagmi/create-config';
-import { marketplaceConfigOptions } from '../hooks/options/marketplaceConfigOptions.ts';
+import { marketplaceConfigOptions } from '../hooks/options/marketplaceConfigOptions';
 
 type InitSSRClientArgs = {
 	cookie: string;

package/src/react/ui/modals/CreateListingModal/_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 { useGenerateListingTransaction } from '@react-hooks/useGenerateListingTransaction';
+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 { ShowCreateListingModalArgs } from '.';
+import type { Price } from '../../../../types';
+import type {
+	CreateListingErrorCallbacks,
+	CreateListingSuccessCallbacks,
+} 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 { ShowCreateListingModalArgs } from '.';
-import type { Messages } from '../../../../types/messages';
+	collectableKeys,
+} from '../../../_internal';
+import {
+	useCollectible,
+	useCollection,
+	useGenerateListingTransaction,
+} from '../../../hooks';
 import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
 import {
 	getCreateListingTransactionMessage,
 	getCreateListingTransactionTitle,
 } from './_utils/getCreateListingTransactionTitleMessage';
-import { useCollectible } from '@react-hooks/useCollectible';
-import type { CollectionType } from '@internal';
 
 export interface CreateListingModalState {
 	isOpen: boolean;
@@ -32,11 +39,12 @@ export interface CreateListingModalState {
 		collectionType: CollectionType | undefined;
 		listingPrice: Price;
 		quantity: string;
-		collectionAddress: string;
+		collectionAddress: Hex;
 		chainId: string;
 		collectibleId: string;
 		expiry: Date;
-		messages?: Messages;
+		errorCallbacks?: CreateListingErrorCallbacks;
+		successCallbacks?: CreateListingSuccessCallbacks;
 	};
 	steps: {
 		isLoading: () => boolean;
@@ -62,14 +70,12 @@ export const initialState: CreateListingModalState = {
 		collectionAddress,
 		chainId,
 		collectibleId,
-		messages,
 	}: ShowCreateListingModalArgs) => {
 		createListingModal$.state.set({
 			...createListingModal$.state.get(),
 			collectionAddress,
 			chainId,
 			collectibleId,
-			messages,
 		});
 		createListingModal$.isOpen.set(true);
 	},
@@ -85,7 +91,7 @@ export const initialState: CreateListingModalState = {
 		quantity: '1',
 		expiry: new Date(addDays(new Date(), 7).toJSON()),
 		collectionType: undefined,
-		collectionAddress: '',
+		collectionAddress: '' as Hex,
 		chainId: '',
 		collectibleId: '',
 	},
@@ -165,11 +171,10 @@ export const useHydrate = () => {
 
 const useTokenApprovalHandler = (chainId: string) => {
 	const { sendTransactionAsync, isPending, isSuccess } = useSendTransaction();
-	const {
-		onUnknownError,
-		onSuccess,
-	}: { onUnknownError?: Function; onSuccess?: Function } =
-		createListingModal$.state.get().messages?.approveToken || {};
+	const onError =
+		createListingModal$.state.get().errorCallbacks?.onApproveTokenError;
+	const onSuccess: (() => void) | undefined =
+		createListingModal$.state.get().successCallbacks?.onApproveTokenSuccess;
 
 	createListingModal$.steps.tokenApproval.set({
 		isNeeded: () => !!createListingModal$.steps.tokenApproval.getStep(),
@@ -180,13 +185,13 @@ const useTokenApprovalHandler = (chainId: string) => {
 		pending:
 			createListingModal$.steps._currentStep.get() === 'tokenApproval' &&
 			isPending,
-		execute: () => {
+		execute: async () => {
 			const step = createListingModal$.steps.tokenApproval.getStep();
 			if (!step) return;
 			createListingModal$.steps._currentStep.set('tokenApproval');
 
 			try {
-				sendTransactionAsync({
+				await sendTransactionAsync({
 					to: step.to as Hex,
 					chainId: Number(chainId),
 					data: step.data as Hex,
@@ -195,7 +200,7 @@ const useTokenApprovalHandler = (chainId: string) => {
 
 				onSuccess && onSuccess();
 			} catch (error) {
-				onUnknownError && onUnknownError(error);
+				onError && onError(error);
 			}
 		},
 	});
@@ -209,23 +214,18 @@ const useTokenApprovalHandler = (chainId: string) => {
 };
 
 const useCreateListingHandler = (chainId: string) => {
-	const { collectibleId, collectionAddress } = createListingModal$.state.get();
+	const { collectibleId, collectionAddress, errorCallbacks, successCallbacks } =
+		createListingModal$.state.get();
 	const { connector, address } = useAccount();
 	const {
 		generateListingTransactionAsync,
 		isPending: generateListingTransactionPending,
-		error: generateListingTransactionError,
 	} = useGenerateListingTransaction({ chainId });
 	const { data: collectible } = useCollectible({
 		chainId,
 		collectionAddress,
 		collectibleId,
 	});
-	const {
-		onUnknownError,
-		onSuccess,
-	}: { onUnknownError?: Function; onSuccess?: Function } =
-		createListingModal$.state.get().messages?.sellCollectible || {};
 
 	const { sendTransactionAsync, isPending: sendTransactionPending } =
 		useSendTransaction();
@@ -268,6 +268,8 @@ const useCreateListingHandler = (chainId: string) => {
 
 					createListingModal$.steps._currentStep.set(null);
 
+					createListingModal$.close();
+
 					showTransactionStatusModal({
 						hash: hash!,
 						price: createListingModal$.state.listingPrice.get(),
@@ -281,21 +283,18 @@ const useCreateListingHandler = (chainId: string) => {
 								collectible?.name || '',
 							),
 						type: 'transfer',
+						callbacks: {
+							onSuccess: successCallbacks?.onCreateListingSuccess,
+							onUnknownError: errorCallbacks?.onCreateListingError,
+						},
+						queriesToInvalidate: collectableKeys.all as unknown as QueryKey[],
 					});
-
-					createListingModal$.close();
-
-					onSuccess && onSuccess();
 				})
 				.catch((error) => {
-					onUnknownError && onUnknownError(error);
+					errorCallbacks?.onCreateListingError?.(error);
 				});
 		},
 	});
-
-	if (generateListingTransactionError) {
-		onUnknownError && onUnknownError(generateListingTransactionError);
-	}
 };
 
 const useShowTransactionStatusModal = () => {