@0xsequence/marketplace-sdk 0.1.0 → 0.3.0

package/src/react/hooks/useListCollectibles.tsx

@@ -1,15 +1,14 @@
+import { infiniteQueryOptions, useInfiniteQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { Page, SdkConfig } from '../../types';
 import {
 	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';
+} from '../_internal';
 import { listCollectiblesArgsSchema } from '../_internal/api/zod-schema';
 import { useConfig } from './useConfig';
 
@@ -33,14 +32,14 @@ export type UseListCollectiblesReturn = Awaited<
 
 const fetchCollectibles = async (
 	args: UseListCollectiblesArgs,
-	page: Page,
 	marketplaceClient: Awaited<ReturnType<typeof getMarketplaceClient>>,
+	page: Page,
 ) => {
 	const parsedArgs = UseListCollectiblesArgsSchema.parse(args);
 	const arg = {
 		...parsedArgs,
 		contractAddress: parsedArgs.collectionAddress,
-		page,
+		page: page,
 	} satisfies ListCollectiblesArgs;
 
 	return marketplaceClient.listCollectibles(arg);
@@ -52,9 +51,9 @@ export const listCollectiblesOptions = (
 ) => {
 	const marketplaceClient = getMarketplaceClient(args.chainId, config);
 	return infiniteQueryOptions({
-		queryKey: [...collectableKeys.lists, args, marketplaceClient],
+		queryKey: [...collectableKeys.lists, args],
 		queryFn: ({ pageParam }) =>
-			fetchCollectibles(args, pageParam, marketplaceClient),
+			fetchCollectibles(args, marketplaceClient, pageParam),
 		initialPageParam: { page: 1, pageSize: 30 },
 		getNextPageParam: (lastPage) =>
 			lastPage.page?.more ? lastPage.page : undefined,

package/src/react/hooks/useListCollections.tsx

@@ -0,0 +1,88 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { MarketplaceConfig, SdkConfig } from '../../types';
+import {
+	QueryArgSchema,
+	collectionKeys,
+	getMetadataClient,
+} from '../_internal';
+import { useConfig } from './useConfig';
+import { useMarketplaceConfig } from './useMarketplaceConfig';
+
+const UseListCollectionsSchema = z.object({
+	query: QueryArgSchema.optional().default({}),
+});
+
+export type UseListCollectionsArgs = z.input<typeof UseListCollectionsSchema>;
+
+export type UseListCollectionsReturn = Awaited<
+	ReturnType<typeof fetchListCollections>
+>;
+
+type FetchListCollectionsArgs = {
+	marketplaceConfig: MarketplaceConfig;
+	query?: z.infer<typeof QueryArgSchema>;
+};
+
+const fetchListCollections = async (
+	{ marketplaceConfig }: FetchListCollectionsArgs,
+	config: SdkConfig,
+) => {
+	const metadataClient = getMetadataClient(config);
+
+	if (!marketplaceConfig?.collections?.length) {
+		return [];
+	}
+
+	// Group collections by chainId
+	const collectionsByChain = marketplaceConfig.collections.reduce<
+		Record<string, string[]>
+	>((acc, curr) => {
+		const { chainId, collectionAddress } = curr;
+		if (!acc[chainId]) {
+			acc[chainId] = [];
+		}
+		acc[chainId].push(collectionAddress);
+		return acc;
+	}, {});
+
+	// Fetch collections for each chain
+	const promises = Object.entries(collectionsByChain).map(
+		([chainId, addresses]) =>
+			metadataClient
+				.getContractInfoBatch({
+					chainID: chainId,
+					contractAddresses: addresses,
+				})
+				.then((resp) => Object.values(resp.contractInfoMap)),
+	);
+
+	const results = await Promise.all(promises);
+	return results.flat();
+};
+
+export const listCollectionsOptions = (
+	args: FetchListCollectionsArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...args.query,
+		queryKey: [...collectionKeys.list],
+		queryFn: () => fetchListCollections(args, config),
+	});
+};
+
+export const useListCollections = (args: UseListCollectionsArgs = {}) => {
+	const config = useConfig();
+	const { data: marketplaceConfig, isLoading: isLoadingConfig } =
+		useMarketplaceConfig();
+
+	return useQuery({
+		...listCollectionsOptions(
+			// biome-ignore lint/style/noNonNullAssertion: <explanation>
+			{ marketplaceConfig: marketplaceConfig!, query: args.query },
+			config,
+		),
+		enabled: !isLoadingConfig && !!marketplaceConfig,
+	});
+};

package/src/react/hooks/useListListingsForCollectible.tsx

@@ -0,0 +1,61 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
+import {
+	ChainIdSchema,
+	type ListListingsForCollectibleArgs,
+	collectableKeys,
+	getMarketplaceClient,
+} from '../_internal';
+import { listListingsForCollectibleArgsSchema } from '../_internal/api/zod-schema';
+import { useConfig } from './useConfig';
+
+const UseListListingsForCollectibleArgsSchema =
+	listListingsForCollectibleArgsSchema
+		.extend({
+			chainId: ChainIdSchema.pipe(z.coerce.string()),
+			collectionAddress: z.string(),
+			collectibleId: z.string(),
+		})
+		.omit({ contractAddress: true, tokenId: true });
+
+type UseListListingsForCollectibleArgs = z.infer<
+	typeof UseListListingsForCollectibleArgsSchema
+>;
+
+export type UseListListingsForCollectibleReturn = Awaited<
+	ReturnType<typeof fetchListListingsForCollectible>
+>;
+
+const fetchListListingsForCollectible = async (
+	config: SdkConfig,
+	args: UseListListingsForCollectibleArgs,
+) => {
+	const arg = {
+		contractAddress: args.collectionAddress,
+		tokenId: args.collectibleId,
+		filter: args.filter,
+		page: args.page,
+	} satisfies ListListingsForCollectibleArgs;
+
+	const marketplaceClient = getMarketplaceClient(args.chainId, config);
+	return marketplaceClient.listCollectibleListings(arg);
+};
+
+export const listListingsForCollectibleOptions = (
+	args: UseListListingsForCollectibleArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		queryKey: [...collectableKeys.offers, args, config],
+		queryFn: () => fetchListListingsForCollectible(config, args),
+	});
+};
+
+export const useListListingsForCollectible = (
+	args: UseListListingsForCollectibleArgs,
+) => {
+	const config = useConfig();
+
+	return useQuery(listListingsForCollectibleOptions(args, config));
+};

package/src/react/hooks/useListOffersForCollectible.tsx

@@ -1,19 +1,22 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
 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';
+} from '../_internal';
 import { listOffersForCollectibleArgsSchema } from '../_internal/api/zod-schema';
 import { useConfig } from './useConfig';
 
-const UseListOffersForCollectibleArgsSchema =
-	listOffersForCollectibleArgsSchema.extend({
+const UseListOffersForCollectibleArgsSchema = listOffersForCollectibleArgsSchema
+	.extend({
 		chainId: ChainIdSchema.pipe(z.coerce.string()),
-	});
+		collectionAddress: z.string(),
+		collectibleId: z.string(),
+	})
+	.omit({ contractAddress: true, tokenId: true });
 
 type UseListOffersForCollectibleArgs = z.infer<
 	typeof UseListOffersForCollectibleArgsSchema
@@ -26,13 +29,12 @@ export type UseListOffersForCollectibleReturn = Awaited<
 const fetchListOffersForCollectible = async (
 	config: SdkConfig,
 	args: UseListOffersForCollectibleArgs,
-	page: Page,
 ) => {
 	const arg = {
-		contractAddress: args.contractAddress,
-		tokenId: args.tokenId,
+		contractAddress: args.collectionAddress,
+		tokenId: args.collectibleId,
 		filter: args.filter,
-		page,
+		page: args.page,
 	} satisfies ListOffersForCollectibleArgs;
 
 	const marketplaceClient = getMarketplaceClient(args.chainId, config);
@@ -43,13 +45,9 @@ export const listOffersForCollectibleOptions = (
 	args: UseListOffersForCollectibleArgs,
 	config: SdkConfig,
 ) => {
-	return infiniteQueryOptions({
+	return queryOptions({
 		queryKey: [...collectableKeys.offers, args, config],
-		queryFn: ({ pageParam }) =>
-			fetchListOffersForCollectible(config, args, pageParam),
-		initialPageParam: { page: 1, pageSize: 30 },
-		getNextPageParam: (lastPage) =>
-			lastPage.page?.more ? lastPage.page : undefined,
+		queryFn: () => fetchListOffersForCollectible(config, args),
 	});
 };
 
@@ -57,5 +55,6 @@ export const useListOffersForCollectible = (
 	args: UseListOffersForCollectibleArgs,
 ) => {
 	const config = useConfig();
-	return useInfiniteQuery(listOffersForCollectibleOptions(args, config));
+
+	return useQuery(listOffersForCollectibleOptions(args, config));
 };

package/src/react/hooks/useLowestListing.tsx

@@ -1,13 +1,13 @@
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../types';
 import {
 	AddressSchema,
 	ChainIdSchema,
 	QueryArgSchema,
 	collectableKeys,
 	getMarketplaceClient,
-} from '@internal';
-import { queryOptions, useQuery } from '@tanstack/react-query';
-import type { SdkConfig } from '@types';
-import { z } from 'zod';
+} from '../_internal';
 import { getCollectibleLowestListingArgsSchema } from '../_internal/api/zod-schema';
 import { useConfig } from './useConfig';
 

package/src/react/hooks/useRoyaltyPercentage.tsx

@@ -1,15 +1,15 @@
-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';
+import {
+	AddressSchema,
+	ChainIdSchema,
+	QueryArgSchema,
+	collectableKeys,
+} from '../_internal';
 
 const UseRoyaletyPercentageSchema = z.object({
 	chainId: ChainIdSchema.pipe(z.coerce.string()),

package/src/react/hooks/useTransferTokens.tsx

@@ -1,7 +1,7 @@
-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';
+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/components/_internals/action-button/ActionButton.tsx

@@ -0,0 +1,164 @@
+'use client';
+
+import { Button } from '@0xsequence/design-system';
+import { observer } from '@legendapp/state/react';
+import type { Hex } from 'viem';
+import { useAccount } from 'wagmi';
+import {
+	useBalanceOfCollectible,
+	useHighestOffer,
+	useLowestListing,
+} from '../../../../hooks';
+import { useCreateListingModal } from '../../../modals/CreateListingModal';
+import { useMakeOfferModal } from '../../../modals/MakeOfferModal';
+import { useSellModal } from '../../../modals/SellModal';
+import { useTransferModal } from '../../../modals/TransferModal';
+
+type ActionButtonProps = {
+	chainId: string;
+	collectionAddress: string;
+	tokenId: string;
+	isTransfer?: boolean;
+};
+
+export const ActionButton = observer(function AddToCartButton({
+	collectionAddress,
+	chainId,
+	tokenId,
+	isTransfer,
+}: ActionButtonProps) {
+	const { address: accountAddress } = useAccount();
+	//TODO: this should not call all of these endpoints on every card
+	const { data: balance, isLoading: balanceLoading } = useBalanceOfCollectible({
+		chainId,
+		collectionAddress,
+		collectableId: tokenId,
+		// biome-ignore lint/style/noNonNullAssertion: <explanation>
+		userAddress: accountAddress!,
+	});
+	const { data: highestOffer, isLoading: highestOfferLoading } =
+		useHighestOffer({
+			collectionAddress: collectionAddress as Hex,
+			chainId: String(chainId),
+			tokenId: tokenId,
+		});
+	const { data: lowestListing, isLoading: lowestListingLoading } =
+		useLowestListing({
+			collectionAddress: collectionAddress as Hex,
+			chainId: String(chainId),
+			tokenId: tokenId,
+		});
+	const collectibleOwned = balance?.balance ?? 0;
+
+	const { show: showCreateListingModal } = useCreateListingModal();
+	const { show: showMakeOfferModal } = useMakeOfferModal();
+	const { show: showSellModal } = useSellModal();
+	const { show: showTransferModal } = useTransferModal();
+
+	if (
+		balanceLoading ||
+		highestOfferLoading ||
+		lowestListingLoading ||
+		!accountAddress
+	) {
+		return null;
+	}
+
+	if (isTransfer && collectibleOwned) {
+		return (
+			<ActionButtonBody
+				label="Transfer"
+				onClick={() =>
+					showTransferModal({
+						collectionAddress: collectionAddress as Hex,
+						chainId: chainId,
+						tokenId: tokenId,
+					})
+				}
+			/>
+		);
+	}
+
+	if (!collectibleOwned) {
+		return (
+			<ActionButtonBody
+				label="Make an offer"
+				onClick={() =>
+					showMakeOfferModal({
+						collectionAddress: collectionAddress as Hex,
+						chainId: chainId,
+						collectibleId: tokenId,
+					})
+				}
+			/>
+		);
+	}
+
+	if (!collectibleOwned && lowestListing?.order) {
+		return (
+			<ActionButtonBody
+				label="Add to cart"
+				// eslint-disable-next-line @typescript-eslint/no-empty-function
+				onClick={() => {}}
+			/>
+		);
+	}
+
+	if (collectibleOwned && !lowestListing?.order) {
+		return (
+			<ActionButtonBody
+				label="Create listing"
+				onClick={() =>
+					showCreateListingModal({
+						collectionAddress: collectionAddress as Hex,
+						chainId: chainId,
+						collectibleId: tokenId,
+					})
+				}
+			/>
+		);
+	}
+
+	if (collectibleOwned && highestOffer?.order) {
+		return (
+			<ActionButtonBody
+				label="Sell"
+				onClick={() =>
+					showSellModal({
+						collectionAddress: collectionAddress as Hex,
+						chainId: chainId,
+						tokenId: tokenId,
+						// biome-ignore lint/style/noNonNullAssertion: <explanation>
+						order: highestOffer.order!,
+					})
+				}
+			/>
+		);
+	}
+
+	return null;
+});
+
+type ActionButtonBodyProps = {
+	label: string;
+	onClick: () => void;
+};
+
+function ActionButtonBody({ label, onClick }: ActionButtonBodyProps) {
+	return (
+		<Button
+			variant="primary"
+			label={label}
+			// eslint-disable-next-line @typescript-eslint/no-empty-function
+			onClick={(e) => {
+				e.preventDefault();
+				e.stopPropagation();
+				onClick();
+			}}
+			// leftIcon={leftIcon}
+			size="xs"
+			shape="square"
+			width="full"
+		/>
+	);
+}

package/src/react/ui/components/_internals/custom-network-image/CustomNetworkImage.tsx

@@ -0,0 +1,27 @@
+import type React from 'react';
+
+import {
+	Box,
+	NetworkImage as OriginalNetworkImage,
+} from '@0xsequence/design-system';
+import { customNetworkImageRoot, originalNetworkImage } from './styles.css';
+
+type CustomSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+interface CustomNetworkImageProps
+	extends Omit<React.ComponentProps<typeof OriginalNetworkImage>, 'size'> {
+	size: CustomSize;
+}
+
+const CustomNetworkImage: React.FC<CustomNetworkImageProps> = ({
+	size,
+	...props
+}) => {
+	return (
+		<Box className={customNetworkImageRoot({ size })}>
+			<OriginalNetworkImage {...props} className={originalNetworkImage} />
+		</Box>
+	);
+};
+
+export default CustomNetworkImage;

package/src/react/ui/components/_internals/custom-network-image/styles.css.ts

@@ -0,0 +1,51 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+
+export const customNetworkImageRoot = recipe({
+	base: {
+		display: 'block',
+	},
+	variants: {
+		size: {
+			xxs: {
+				width: '12px',
+				height: '12px',
+			},
+			xs: {
+				width: '14px',
+				height: '14px',
+			},
+			sm: {
+				width: '16px',
+				height: '16px',
+			},
+			md: {
+				width: '20px',
+				height: '20px',
+			},
+			lg: {
+				width: '24px',
+				height: '24px',
+			},
+			xl: {
+				width: '32px',
+				height: '32px',
+			},
+		},
+		borderRadius: {
+			circle: '50%',
+			lg: '12px',
+			md: '8px',
+			sm: '4px',
+		},
+	},
+	defaultVariants: {
+		size: 'md',
+		borderRadius: 'md',
+	},
+});
+
+export const originalNetworkImage = style({
+	width: '100% !important',
+	height: '100% !important',
+});

package/src/react/ui/components/_internals/pill/Pill.tsx

@@ -0,0 +1,20 @@
+import { Box, Text } from '@0xsequence/design-system';
+
+export default function Pill({ text }: { text: string }) {
+	return (
+		<Box
+			background="backgroundRaised"
+			display="flex"
+			alignItems="center"
+			justifyContent="center"
+			paddingY="1"
+			paddingX="2"
+			borderRadius="sm"
+			width="max"
+		>
+			<Text fontSize="small" fontWeight="medium" color="text80">
+				{text}
+			</Text>
+		</Box>
+	);
+}