@0xsequence/marketplace-sdk 0.4.8 → 0.5.0

package/src/react/_internal/api/marketplace.gen.ts

@@ -1,5 +1,5 @@
 /* eslint-disable */
-// marketplace-api  fde5cccee73a952c6b2c70e0fb424d7d3eb23f1c
+// marketplace-api  8d0cafb3a02c5db5bdd5d6b139a752349e301f0c
 // --
 // Code generated by webrpc-gen@v0.22.1 with typescript generator. DO NOT EDIT.
 //
@@ -7,7 +7,7 @@
 
 export const WebrpcHeader = "Webrpc"
 
-export const WebrpcHeaderValue = "webrpc@v0.22.1;gen-typescript@v0.16.2;marketplace-api@v0.0.0-fde5cccee73a952c6b2c70e0fb424d7d3eb23f1c"
+export const WebrpcHeaderValue = "webrpc@v0.22.1;gen-typescript@v0.16.2;marketplace-api@v0.0.0-8d0cafb3a02c5db5bdd5d6b139a752349e301f0c"
 
 // WebRPC description and code-gen version
 export const WebRPCVersion = "v1"
@@ -16,7 +16,7 @@ export const WebRPCVersion = "v1"
 export const WebRPCSchemaVersion = ""
 
 // Schema hash generated from your RIDL schema
-export const WebRPCSchemaHash = "fde5cccee73a952c6b2c70e0fb424d7d3eb23f1c"
+export const WebRPCSchemaHash = "8d0cafb3a02c5db5bdd5d6b139a752349e301f0c"
 
 type WebrpcGenVersions = {
   webrpcGenVersion: string;
@@ -126,9 +126,7 @@ export enum MarketplaceKind {
   x2y2 = 'x2y2',
   alienswap = 'alienswap',
   payment_processor = 'payment_processor',
-  mintify = 'mintify',
-  element_erc721 = 'element_erc721',
-  element_erc1155 = 'element_erc1155'
+  mintify = 'mintify'
 }
 
 export enum OrderbookKind {
@@ -181,6 +179,8 @@ export enum CollectionPriority {
 export enum CollectionStatus {
   unknown = 'unknown',
   created = 'created',
+  syncing_contract_metadata = 'syncing_contract_metadata',
+  synced_contract_metadata = 'synced_contract_metadata',
   syncing_metadata = 'syncing_metadata',
   synced_metadata = 'synced_metadata',
   syncing_tokens = 'syncing_tokens',
@@ -188,7 +188,8 @@ export enum CollectionStatus {
   syncing_orders = 'syncing_orders',
   active = 'active',
   failed = 'failed',
-  inactive = 'inactive'
+  inactive = 'inactive',
+  incompatible_type = 'incompatible_type'
 }
 
 export enum ProjectStatus {
@@ -203,6 +204,14 @@ export enum CollectibleStatus {
   inactive = 'inactive'
 }
 
+export enum CurrencyStatus {
+  unknown = 'unknown',
+  created = 'created',
+  syncing_metadata = 'syncing_metadata',
+  active = 'active',
+  failed = 'failed'
+}
+
 export enum WalletKind {
   unknown = 'unknown',
   sequence = 'sequence'
@@ -312,6 +321,7 @@ export interface Order {
   priceCurrencyAddress: string
   priceDecimals: number
   priceUSD: number
+  priceUSDFormatted: string
   quantityInitial: string
   quantityInitialFormatted: string
   quantityRemaining: string
@@ -340,6 +350,8 @@ export interface FeeBreakdown {
 export interface CollectibleOrder {
   metadata: TokenMetadata
   order?: Order
+  listing?: Order
+  offer?: Order
 }
 
 export interface OrderFilter {
@@ -397,6 +409,7 @@ export interface Collectible {
 export interface Currency {
   chainId: number
   contractAddress: string
+  status: CurrencyStatus
   name: string
   symbol: string
   decimals: number
@@ -594,6 +607,7 @@ export interface DeleteCurrencyReturn {
 
 export interface Marketplace {
   listCurrencies(headers?: object, signal?: AbortSignal): Promise<ListCurrenciesReturn>
+  getCollectionDetail(args: GetCollectionDetailArgs, headers?: object, signal?: AbortSignal): Promise<GetCollectionDetailReturn>
   getCollectible(args: GetCollectibleArgs, headers?: object, signal?: AbortSignal): Promise<GetCollectibleReturn>
   getLowestPriceOfferForCollectible(args: GetLowestPriceOfferForCollectibleArgs, headers?: object, signal?: AbortSignal): Promise<GetLowestPriceOfferForCollectibleReturn>
   getHighestPriceOfferForCollectible(args: GetHighestPriceOfferForCollectibleArgs, headers?: object, signal?: AbortSignal): Promise<GetHighestPriceOfferForCollectibleReturn>
@@ -636,6 +650,13 @@ export interface ListCurrenciesArgs {
 export interface ListCurrenciesReturn {
   currencies: Array<Currency>  
 }
+export interface GetCollectionDetailArgs {
+  contractAddress: string
+}
+
+export interface GetCollectionDetailReturn {
+  collection: Collection  
+}
 export interface GetCollectibleArgs {
   contractAddress: string
   tokenId: string
@@ -684,6 +705,7 @@ export interface ListListingsForCollectibleArgs {
   contractAddress: string
   tokenId: string
   filter?: OrderFilter
+  skipRealtimeSync?: boolean
   page?: Page
 }
 
@@ -695,6 +717,7 @@ export interface ListOffersForCollectibleArgs {
   contractAddress: string
   tokenId: string
   filter?: OrderFilter
+  skipRealtimeSync?: boolean
   page?: Page
 }
 
@@ -1151,6 +1174,20 @@ export class Marketplace implements Marketplace {
     })
   }
   
+  getCollectionDetail = (args: GetCollectionDetailArgs, headers?: object, signal?: AbortSignal): Promise<GetCollectionDetailReturn> => {
+    return this.fetch(
+      this.url('GetCollectionDetail'),
+      createHTTPRequest(args, headers, signal)).then((res) => {
+      return buildResponse(res).then(_data => {
+        return {
+          collection: <Collection>(_data.collection),
+        }
+      })
+    }, (error) => {
+      throw WebrpcRequestFailedError.new({ cause: `fetch(): ${error.message || ''}` })
+    })
+  }
+  
   getCollectible = (args: GetCollectibleArgs, headers?: object, signal?: AbortSignal): Promise<GetCollectibleReturn> => {
     return this.fetch(
       this.url('GetCollectible'),
@@ -2084,3 +2121,4 @@ export const webrpcErrorByCode: { [code: number]: any } = {
 }
 
 export type Fetch = (input: RequestInfo, init?: RequestInit) => Promise<Response>
+

package/src/react/_internal/api/query-keys.ts

@@ -50,6 +50,10 @@ class CollectionKeys {
 class BalanceQueries {
 	static all = ['balances'] as const;
 	static lists = [...BalanceQueries.all, 'tokenBalances'] as const;
+	static collectionBalanceDetails = [
+		...BalanceQueries.all,
+		'collectionBalanceDetails',
+	] as const;
 }
 
 // biome-ignore lint/complexity/noStaticOnlyClass:

package/src/react/_internal/wallet/useWallet.ts

@@ -1,58 +1,42 @@
-import { useAccount, useSwitchChain, useWalletClient } from 'wagmi';
+import { useAccount, useChainId, useSwitchChain, useWalletClient } from 'wagmi';
+import { useQuery } from '@tanstack/react-query';
 import { wallet, type WalletInstance } from './wallet';
+import { useConfig } from '../../hooks';
 
-type UseWalletReturn =
-	| {
-			status: 'loading';
-			wallet: null;
-			isLoading: true;
-			isError: false;
-	  }
-	| {
-			status: 'error';
-			wallet: null;
-			isLoading: false;
-			isError: true;
-	  }
-	| {
-			status: 'success';
-			wallet: WalletInstance;
-			isLoading: false;
-			isError: false;
-	  };
+type UseWalletReturn = {
+	wallet: WalletInstance | null | undefined;
+	isLoading: boolean;
+	isError: boolean;
+};
 
 export const useWallet = (): UseWalletReturn => {
 	const { chains } = useSwitchChain();
-	const { data: walletClient, isLoading: walletClientIsLoading } =
+	const { data: walletClient, isLoading: wagmiWalletIsLoading } =
 		useWalletClient();
 	const { connector, isConnected, isConnecting } = useAccount();
+	const sdkConfig = useConfig();
+	const chainId = useChainId();
 
-	if (walletClientIsLoading || isConnecting) {
-		return {
-			status: 'loading',
-			wallet: null,
-			isLoading: true,
-			isError: false,
-		};
-	}
-
-	if (!walletClient || !connector || !isConnected) {
-		return {
-			status: 'error',
-			wallet: null,
-			isLoading: false,
-			isError: true,
-		};
-	}
+	const { data, isLoading, isError } = useQuery({
+		queryKey: ['wallet', chainId, connector?.uid],
+		queryFn: () => {
+			if (!walletClient || !connector || !isConnected) {
+				return null;
+			}
+			return wallet({
+				wallet: walletClient,
+				chains,
+				connector,
+				sdkConfig,
+			});
+		},
+		staleTime: Number.POSITIVE_INFINITY,
+		enabled: Boolean(walletClient && connector && isConnected),
+	});
 
 	return {
-		status: 'success',
-		wallet: wallet({
-			wallet: walletClient,
-			chains,
-			connector,
-		}),
-		isLoading: false,
-		isError: false,
+		wallet: data,
+		isLoading: isLoading || isConnecting || wagmiWalletIsLoading,
+		isError,
 	};
 };

package/src/react/_internal/wallet/wallet.ts

@@ -3,9 +3,10 @@ import {
 	type Address,
 	type Chain,
 	type Hex,
-	type TransactionReceipt,
+	TransactionReceiptNotFoundError,
 	type TypedDataDomain,
 	type WalletClient as ViemWalletClient,
+	WaitForTransactionReceiptTimeoutError,
 	custom,
 	erc20Abi,
 	erc721Abi,
@@ -22,13 +23,15 @@ import {
 	TransactionSignatureError,
 	UserRejectedRequestError,
 } from '../../../utils/_internal/error/transaction';
-import { StepType, WalletKind } from '../api';
+import { getIndexerClient, StepType, WalletKind } from '../api';
 import { createLogger } from '../logger';
 import type { SignatureStep, TransactionStep } from '../utils';
 import {
 	SEQUENCE_MARKET_V1_ADDRESS,
 	SEQUENCE_MARKET_V2_ADDRESS,
 } from '../../../consts';
+import type { SdkConfig } from '../../../types';
+import type { TransactionReceipt } from '@0xsequence/indexer';
 
 interface WalletClient extends Omit<ViemWalletClient, 'account'> {
 	account: Account;
@@ -61,10 +64,12 @@ export const wallet = ({
 	wallet,
 	chains,
 	connector,
+	sdkConfig,
 }: {
 	wallet: WalletClient;
 	chains: readonly [Chain, ...Chain[]];
 	connector: Connector;
+	sdkConfig: SdkConfig;
 }): WalletInstance => {
 	const logger = createLogger('Wallet');
 
@@ -174,11 +179,11 @@ export const wallet = ({
 		},
 		handleConfirmTransactionStep: async (txHash: Hex, chainId: number) => {
 			logger.debug('Confirming transaction', { txHash, chainId });
-
 			try {
-				const publicClient = getPublicRpcClient(chainId);
-				const receipt = await publicClient.waitForTransactionReceipt({
-					hash: txHash as Address,
+				const receipt = await awaitTransactionReceipt({
+					txHash,
+					chainId,
+					sdkConfig,
 				});
 				logger.info('Transaction confirmed', { txHash, receipt });
 				return receipt;
@@ -235,3 +240,44 @@ export const wallet = ({
 
 	return walletInstance;
 };
+
+const ONE_MIN = 60 * 1000;
+const THREE_MIN = 3 * ONE_MIN;
+
+const awaitTransactionReceipt = async ({
+	txHash,
+	chainId,
+	sdkConfig,
+	timeout = THREE_MIN,
+}: {
+	txHash: Hex;
+	chainId: number;
+	sdkConfig: SdkConfig;
+	timeout?: number;
+}) => {
+	const indexer = getIndexerClient(chainId, sdkConfig);
+	return Promise.race([
+		new Promise<TransactionReceipt>((resolve, reject) => {
+			indexer.subscribeReceipts(
+				{
+					filter: {
+						txnHash: txHash,
+					},
+				},
+				{
+					onMessage: ({ receipt }) => {
+						resolve(receipt);
+					},
+					onError: () => {
+						reject(TransactionReceiptNotFoundError);
+					},
+				},
+			);
+		}),
+		new Promise<TransactionReceipt>((_, reject) => {
+			setTimeout(() => {
+				reject(WaitForTransactionReceiptTimeoutError);
+			}, timeout);
+		}),
+	]);
+};

package/src/react/hooks/index.ts

@@ -1,7 +1,9 @@
+export * from './useAutoSelectFeeOption';
 export * from './useBalanceOfCollectible';
 export * from './useCountOfCollectables';
 export * from './useCollectible';
 export * from './useCollection';
+export * from './useCollectionBalanceDetails';
 export * from './useConfig';
 export * from './useCurrencies';
 export * from './useCurrencyOptions';
@@ -29,3 +31,5 @@ export * from './useCheckoutOptions';
 export * from './useListCollections';
 export * from './useGenerateBuyTransaction';
 export * from './useCancelOrder';
+export * from './useCollectionDetails';
+export * from './useCollectionDetailsPolling';

package/src/react/hooks/options/__mocks__/marketplaceConfig.msw.ts

@@ -1,5 +1,6 @@
 import { http, HttpResponse } from 'msw';
 import { WalletOptions, type MarketplaceConfig } from '../../../../types';
+import { mockCurrencies } from '../../../_internal/api/__mocks__/marketplace.msw';
 
 // Mock data
 export const mockConfig: MarketplaceConfig = {
@@ -12,7 +13,15 @@ export const mockConfig: MarketplaceConfig = {
 	logoUrl: 'https://example.com/logo.png',
 	titleTemplate: '%s | Test Marketplace',
 	walletOptions: [WalletOptions.Sequence],
-	collections: [],
+	collections: [
+		{
+			collectionAddress: '0x1234567890123456789012345678901234567890',
+			chainId: 1,
+			marketplaceFeePercentage: 2.5,
+			marketplaceType: 'orderbook',
+			currencyOptions: mockCurrencies.map((c) => c.contractAddress),
+		},
+	],
 	landingPageLayout: 'default',
 	cssString: '',
 	manifestUrl: '',

package/src/react/hooks/useAutoSelectFeeOption.tsx

@@ -0,0 +1,104 @@
+import type { Address } from 'viem';
+import { useAccount, useConfig } from 'wagmi';
+import type { FeeOption } from '../ui/modals/_internal/components/waasFeeOptionsSelect/WaasFeeOptionsSelect';
+import { getBalance } from 'wagmi/actions';
+import { useCallback } from 'react';
+
+type Error =
+	| 'User not connected'
+	| 'No options provided'
+	| 'Insufficient balance for any fee option'
+	| 'Failed to check balances';
+
+type UseAutoSelectFeeOptionArgs = {
+	pendingFeeOptionConfirmation: {
+		id: string;
+		options: FeeOption[] | undefined;
+		chainId: number;
+	};
+};
+
+type AutoSelectFeeOptionResult = Promise<{
+	selectedOption: FeeOption | null;
+	error: Error | null;
+	isLoading: boolean;
+}>;
+
+/**
+ * Automatically selects the first fee option that user has enough balance for
+ * @param pendingFeeOptionConfirmation
+ * @returns The selected fee option, an error message if any, and a loading flag
+ */
+export function useAutoSelectFeeOption({
+	pendingFeeOptionConfirmation,
+}: UseAutoSelectFeeOptionArgs): AutoSelectFeeOptionResult {
+	const { address: userAddress } = useAccount();
+	const config = useConfig();
+
+	const findAffordableOption = useCallback(async () => {
+		if (!userAddress) {
+			return {
+				selectedOption: null,
+				error: 'User not connected' as Error,
+				isLoading: false,
+			};
+		}
+
+		if (!pendingFeeOptionConfirmation.options) {
+			return {
+				selectedOption: null,
+				error: 'No options provided' as Error,
+				isLoading: false,
+			};
+		}
+
+		try {
+			// Try each option until we find an affordable one
+			for (const option of pendingFeeOptionConfirmation.options) {
+				if (!option.token.contractAddress) continue;
+
+				try {
+					const balance = await getBalance(config, {
+						address: userAddress as Address,
+						token: option.token.contractAddress as Address,
+						chainId: pendingFeeOptionConfirmation.chainId,
+					});
+
+					const optionValue = BigInt(option.value);
+					if (balance.value >= optionValue) {
+						return {
+							selectedOption: option,
+							error: null,
+							isLoading: false,
+						};
+					}
+				} catch (error) {
+					console.error(
+						'Error fetching balance for currency:',
+						option.token.contractAddress,
+						error,
+					);
+				}
+			}
+
+			return {
+				selectedOption: null,
+				error: 'Insufficient balance for any fee option' as Error,
+				isLoading: false,
+			};
+		} catch (error) {
+			return {
+				selectedOption: null,
+				error: 'Failed to check balances' as Error,
+				isLoading: false,
+			};
+		}
+	}, [
+		pendingFeeOptionConfirmation.options,
+		pendingFeeOptionConfirmation.chainId,
+		userAddress,
+		config,
+	]);
+
+	return findAffordableOption();
+}

package/src/react/hooks/useCancelOrder.tsx

@@ -1,6 +1,8 @@
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import { useCancelTransactionSteps } from './useCancelTransactionSteps';
 import type { MarketplaceKind } from '../../types';
+import { useWaasFeeOptions } from '@0xsequence/kit';
+import { useAutoSelectFeeOption } from './useAutoSelectFeeOption';
 
 interface UseCancelOrderArgs {
 	collectionAddress: string;
@@ -29,6 +31,60 @@ export const useCancelOrder = ({
 	const [cancellingOrderId, setCancellingOrderId] = useState<string | null>(
 		null,
 	);
+	const [pendingFeeOptionConfirmation, confirmPendingFeeOption] =
+		useWaasFeeOptions();
+	const autoSelectFeeOptionResult = useAutoSelectFeeOption({
+		pendingFeeOptionConfirmation: pendingFeeOptionConfirmation
+			? {
+					id: pendingFeeOptionConfirmation.id,
+					options: pendingFeeOptionConfirmation.options?.map((opt) => ({
+						...opt,
+						token: {
+							...opt.token,
+							contractAddress: opt.token.contractAddress || null,
+							decimals: opt.token.decimals || 0,
+							tokenID: opt.token.tokenID || null,
+						},
+					})),
+					chainId: Number(chainId),
+				}
+			: {
+					id: '',
+					options: undefined,
+					chainId: Number(chainId),
+				},
+	});
+
+	useEffect(() => {
+		const handleFeeOptionSelection = async () => {
+			if (!pendingFeeOptionConfirmation) return;
+
+			const { selectedOption, error } = await autoSelectFeeOptionResult;
+
+			if (error) {
+				console.error('Error selecting fee option:', error);
+				onError?.(new Error(`Failed to select fee option: ${error}`));
+				return;
+			}
+
+			if (
+				selectedOption?.token.contractAddress &&
+				pendingFeeOptionConfirmation.id
+			) {
+				confirmPendingFeeOption(
+					pendingFeeOptionConfirmation.id,
+					selectedOption.token.contractAddress,
+				);
+			}
+		};
+
+		handleFeeOptionSelection();
+	}, [
+		pendingFeeOptionConfirmation,
+		autoSelectFeeOptionResult,
+		confirmPendingFeeOption,
+		onError,
+	]);
 
 	const { cancelOrder: cancelOrderBase } = useCancelTransactionSteps({
 		collectionAddress,

package/src/react/hooks/useCollectionBalanceDetails.tsx

@@ -0,0 +1,87 @@
+import { z } from 'zod';
+import {
+	AddressSchema,
+	ChainIdSchema,
+	QueryArgSchema,
+	balanceQueries,
+	getIndexerClient,
+} from '../_internal';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { useConfig } from './useConfig';
+import type { GetTokenBalancesDetailsReturn } from '@0xsequence/indexer';
+import type { SdkConfig } from '../../types';
+
+const filterSchema = z.object({
+	accountAddresses: z.array(AddressSchema),
+	contractWhitelist: z.array(AddressSchema).optional(),
+	omitNativeBalances: z.boolean(),
+});
+
+const useCollectionBalanceDetailsArgsSchema = z.object({
+	chainId: ChainIdSchema.pipe(z.coerce.number()),
+	filter: filterSchema,
+	query: QueryArgSchema.optional(),
+});
+
+export type CollectionBalanceFilter = z.infer<typeof filterSchema>;
+export type UseCollectionBalanceDetailsArgs = z.input<
+	typeof useCollectionBalanceDetailsArgsSchema
+>;
+
+const fetchCollectionBalanceDetails = async (
+	args: UseCollectionBalanceDetailsArgs,
+	indexerClient: Awaited<ReturnType<typeof getIndexerClient>>,
+) => {
+	const promises = args.filter.accountAddresses.map((accountAddress) =>
+		indexerClient.getTokenBalancesDetails({
+			filter: {
+				accountAddresses: [accountAddress],
+				contractWhitelist: args.filter.contractWhitelist,
+				omitNativeBalances: args.filter.omitNativeBalances,
+			},
+		}),
+	);
+
+	const responses = await Promise.all(promises);
+	const mergedResponse = responses.reduce<GetTokenBalancesDetailsReturn>(
+		(acc, curr) => {
+			if (!curr) return acc;
+			return {
+				page: curr.page,
+				nativeBalances: [
+					...(acc.nativeBalances || []),
+					...(curr.nativeBalances || []),
+				],
+				balances: [...(acc.balances || []), ...(curr.balances || [])],
+			};
+		},
+		{ page: {}, nativeBalances: [], balances: [] },
+	);
+
+	if (!mergedResponse) {
+		throw new Error('Failed to fetch collection balance details');
+	}
+
+	return mergedResponse;
+};
+
+export const collectionBalanceDetailsOptions = (
+	args: UseCollectionBalanceDetailsArgs,
+	config: SdkConfig,
+) => {
+	const parsedArgs = useCollectionBalanceDetailsArgsSchema.parse(args);
+	const indexerClient = getIndexerClient(parsedArgs.chainId, config);
+
+	return queryOptions({
+		queryKey: [...balanceQueries.collectionBalanceDetails, args, config],
+		queryFn: () => fetchCollectionBalanceDetails(parsedArgs, indexerClient),
+		...args.query,
+	});
+};
+
+export const useCollectionBalanceDetails = (
+	args: UseCollectionBalanceDetailsArgs,
+) => {
+	const config = useConfig();
+	return useQuery(collectionBalanceDetailsOptions(args, config));
+};

package/src/react/hooks/useCollectionDetails.tsx

@@ -0,0 +1,35 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { SdkConfig } from '../../types';
+import { getMarketplaceClient } from '../_internal';
+import { useConfig } from './useConfig';
+
+type UseCollectionDetails = {
+	collectionAddress: string;
+	chainId: number;
+};
+
+const fetchCollectionDetails = async (
+	args: { collectionAddress: string },
+	marketplaceClient: Awaited<ReturnType<typeof getMarketplaceClient>>,
+) => {
+	const { collection } = await marketplaceClient.getCollectionDetail({
+		contractAddress: args.collectionAddress,
+	});
+	return collection;
+};
+
+export const collectionDetailsOptions = (
+	args: UseCollectionDetails,
+	config: SdkConfig,
+) => {
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	return queryOptions({
+		queryKey: ['collectionDetails', args],
+		queryFn: () => fetchCollectionDetails(args, marketplaceClient),
+	});
+};
+
+export const useCollectionDetails = (args: UseCollectionDetails) => {
+	const config = useConfig();
+	return useQuery(collectionDetailsOptions(args, config));
+};