@0xsequence/marketplace-sdk 0.0.1 → 0.1.0

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 {
-	type ChainId,
-	type QueryArg,
+	AddressSchema,
+	ChainIdSchema,
+	QueryArgSchema,
 	balanceQueries,
 	getIndexerClient,
 } from '@internal';
 import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
 import type { SdkConfig } from '@types';
+import { z } from 'zod';
 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 {
-	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';
+import { z } from 'zod';
+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,26 @@
 import {
+	ChainIdSchema,
 	type ListOffersForCollectibleArgs,
 	collectableKeys,
 	getMarketplaceClient,
 } from '@internal';
 import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
 import type { Page, SdkConfig } from '@types';
+import { z } from 'zod';
+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 {
-	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';
+import { z } from 'zod';
+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 {
+	AddressSchema,
+	ChainIdSchema,
+	QueryArgSchema,
+	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';
 
-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 { ChainId, ContractType } from '@internal';
+import { type Abi, type Address, type Hex, erc721Abi } from 'viem';
 import { useAccount, useWriteContract } from 'wagmi';
+import { ERC1155_ABI } from '../../utils';
 
 interface BaseTransferParams {
 	chainId: ChainId;

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

@@ -1,5 +1,7 @@
+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 { useGenerateListingTransaction } from '@react-hooks/useGenerateListingTransaction';
 import {
@@ -20,8 +22,6 @@ import {
 	getCreateListingTransactionMessage,
 	getCreateListingTransactionTitle,
 } from './_utils/getCreateListingTransactionTitleMessage';
-import { useCollectible } from '@react-hooks/useCollectible';
-import type { CollectionType } from '@internal';
 
 export interface CreateListingModalState {
 	isOpen: boolean;
@@ -32,7 +32,7 @@ export interface CreateListingModalState {
 		collectionType: CollectionType | undefined;
 		listingPrice: Price;
 		quantity: string;
-		collectionAddress: string;
+		collectionAddress: Hex;
 		chainId: string;
 		collectibleId: string;
 		expiry: Date;
@@ -85,7 +85,7 @@ export const initialState: CreateListingModalState = {
 		quantity: '1',
 		expiry: new Date(addDays(new Date(), 7).toJSON()),
 		collectionType: undefined,
-		collectionAddress: '',
+		collectionAddress: '' as Hex,
 		chainId: '',
 		collectibleId: '',
 	},
@@ -225,7 +225,7 @@ const useCreateListingHandler = (chainId: string) => {
 		onUnknownError,
 		onSuccess,
 	}: { onUnknownError?: Function; onSuccess?: Function } =
-		createListingModal$.state.get().messages?.sellCollectible || {};
+		createListingModal$.state.get().messages?.createListing || {};
 
 	const { sendTransactionAsync, isPending: sendTransactionPending } =
 		useSendTransaction();

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

@@ -1,6 +1,9 @@
 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 {
 	ActionModal,
 	type ActionModalProps,
@@ -9,15 +12,13 @@ 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 { useAccount } from 'wagmi';
-import { useSwitchChainModal } from '../_internal/components/switchChainModal';
-import type { Messages } from '../../../../types/messages';
 
 export type ShowCreateListingModalArgs = {
-	collectionAddress: string;
+	collectionAddress: Hex;
 	chainId: string;
 	collectibleId: string;
 	messages?: Messages;

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

@@ -1,5 +1,7 @@
+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 {
@@ -11,7 +13,7 @@ import {
 	type WalletKind,
 } from '@types';
 import { addDays } from 'date-fns/addDays';
-import { parseUnits, type Hex } from 'viem';
+import { type Hex } from 'viem';
 import { useAccount, useSendTransaction } from 'wagmi';
 import type { ShowMakeOfferModalArgs } from '.';
 import type { Messages } from '../../../../types/messages';
@@ -20,8 +22,6 @@ import {
 	getMakeOfferTransactionMessage,
 	getMakeOfferTransactionTitle,
 } from './_utils/getMakeOfferTransactionTitleMessage';
-import { useCollectible } from '@react-hooks/useCollectible';
-import type { CollectionType } from '@internal';
 
 export interface MakeOfferModalState {
 	isOpen: boolean;
@@ -32,7 +32,7 @@ export interface MakeOfferModalState {
 		collectionType: CollectionType | undefined;
 		offerPrice: Price;
 		quantity: string;
-		collectionAddress: string;
+		collectionAddress: Hex;
 		chainId: string;
 		collectibleId: string;
 		expiry: Date;
@@ -85,7 +85,7 @@ export const initialState: MakeOfferModalState = {
 		quantity: '1',
 		expiry: new Date(addDays(new Date(), 7).toJSON()),
 		collectionType: undefined,
-		collectionAddress: '',
+		collectionAddress: '' as Hex,
 		chainId: '',
 		collectibleId: '',
 	},
@@ -248,10 +248,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) => {

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

@@ -1,7 +1,9 @@
 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 { Messages } from '../../../../types/messages';
 import {
 	ActionModal,
 	type ActionModalProps,
@@ -10,13 +12,12 @@ 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;
@@ -65,6 +66,7 @@ const Modal = () => {
 };
 
 const ModalContent = observer(() => {
+	const [insufficientBalance, setInsufficientBalance] = useState(false);
 	const {
 		chainId,
 		collectionAddress,
@@ -76,24 +78,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 +90,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 +117,10 @@ const ModalContent = observer(() => {
 				chainId={chainId}
 				collectionAddress={collectionAddress}
 				$listingPrice={makeOfferModal$.state.offerPrice}
-				error={balanceError}
+				checkBalance={{
+					enabled: true,
+					callback: (state) => setInsufficientBalance(state),
+				}}
 			/>
 
 			{collectionType === ContractType.ERC1155 && (

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

@@ -1,15 +1,3 @@
-import { observable, when } from '@legendapp/state';
-import {
-	MarketplaceKind,
-	StepType,
-	type Order,
-	type Step,
-	type WalletKind,
-} from '@types';
-import { useMount, useSelector } from '@legendapp/state/react';
-import { useGenerateSellTransaction } from '@react-hooks/useGenerateSellTransaction';
-import { useAccount, useSendTransaction } from 'wagmi';
-import type { Hex } from 'viem';
 import type { ShowSellModalArgs } from '.';
 import type { Messages } from '../../../../types/messages';
 import { useTransactionStatusModal } from '../_internal/components/transactionStatusModal';
@@ -17,15 +5,27 @@ import {
 	getSellTransactionMessage,
 	getSellTransactionTitle,
 } from './_utils/getSellTransactionTitleMessage';
+import { observable, when } from '@legendapp/state';
+import { useMount, useSelector } from '@legendapp/state/react';
 import { useCollectible } from '@react-hooks/useCollectible';
 import { useCurrencies } from '@react-hooks/useCurrencies';
+import { useGenerateSellTransaction } from '@react-hooks/useGenerateSellTransaction';
+import {
+	MarketplaceKind,
+	StepType,
+	type Order,
+	type Step,
+	type WalletKind,
+} from '@types';
+import type { Hex } from 'viem';
+import { useAccount, useSendTransaction } from 'wagmi';
 
 export interface SellModalState {
 	isOpen: boolean;
 	open: (args: ShowSellModalArgs) => void;
 	close: () => void;
 	state: {
-		collectionAddress: string;
+		collectionAddress: Hex;
 		chainId: string;
 		tokenId: string;
 		order: Order | undefined;
@@ -75,7 +75,7 @@ export const initialState: SellModalState = {
 		});
 	},
 	state: {
-		collectionAddress: '',
+		collectionAddress: '' as Hex,
 		chainId: '',
 		tokenId: '',
 		order: undefined,
@@ -124,7 +124,7 @@ export const useHydrate = () => {
 				],
 				additionalFees: [],
 			});
-			sellModal$.steps.stepsData.set(sellTransactionData.steps);
+			sellModal$.steps.stepsData.set(sellTransactionData);
 		};
 
 		when(() => !!order && !!connector, setSteps);
@@ -204,6 +204,7 @@ const useSellHandler = (chainId: string) => {
 			execute: () => {
 				sellModal$.steps._currentStep.set('sell');
 				const { collectionAddress, order } = sellModal$.state.get();
+
 				generateSellTransactionAsync({
 					collectionAddress: collectionAddress,
 					seller: address as string,
@@ -214,15 +215,17 @@ const useSellHandler = (chainId: string) => {
 							quantity: '1',
 						},
 					],
-					additionalFees: [
-						{
-							amount: String(order!.feeBps),
-							receiver: order!.feeBreakdown[0].recipientAddress,
-						},
-					],
+					additionalFees: order?.feeBreakdown
+						? [
+								{
+									amount: String(order!.feeBps),
+									receiver: order!.feeBreakdown?.[0]?.recipientAddress,
+								},
+							]
+						: [],
 				})
 					.then(async (response) => {
-						const step = response.steps.find((s) => s.id === StepType.sell);
+						const step = response.find((s) => s.id === StepType.sell);
 						if (!step) throw new Error('No steps found');
 						try {
 							const hash = await sendTransactionAsync({
@@ -257,7 +260,9 @@ const useSellHandler = (chainId: string) => {
 							sellModal$.close();
 
 							onSuccess && onSuccess();
-						} catch (error) {}
+						} catch (error) {
+							onUnknownError && onUnknownError(error);
+						}
 					})
 					.catch((error) => {
 						onUnknownError && onUnknownError(error);

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

@@ -1,22 +1,23 @@
+import { Show, observer } from '@legendapp/state/react';
+import { useCollection } from '@react-hooks/useCollection';
+import { useCurrencies } from '@react-hooks/useCurrencies';
+import type { Order, Price } from '@types';
+import type { Hex } from 'viem';
+import { useAccount } from 'wagmi';
+import type { Messages } from '../../../../types/messages';
 import {
 	ActionModal,
 	type ActionModalProps,
 } from '../_internal/components/actionModal/ActionModal';
-import { sellModal$, useHydrate } from './_store';
-import { observer, Show } from '@legendapp/state/react';
-import { useCollection } from '@react-hooks/useCollection';
-import type { Order, Price } from '@types';
-import TransactionHeader from '../_internal/components/transactionHeader';
+import { useSwitchChainModal } from '../_internal/components/switchChainModal';
 import TokenPreview from '../_internal/components/tokenPreview';
 import TransactionDetails from '../_internal/components/transactionDetails';
-import { useCurrencies } from '@react-hooks/useCurrencies';
-import { useAccount } from 'wagmi';
-import { useSwitchChainModal } from '../_internal/components/switchChainModal';
-import type { Messages } from '../../../../types/messages';
+import TransactionHeader from '../_internal/components/transactionHeader';
+import { sellModal$, useHydrate } from './_store';
 
 export type ShowSellModalArgs = {
 	chainId: string;
-	collectionAddress: string;
+	collectionAddress: Hex;
 	tokenId: string;
 	order: Order;
 	collectibleName: string | undefined;