@0xsequence/marketplace-sdk 0.0.1

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

@@ -0,0 +1,61 @@
+class CollectableKeys {
+	static all = ['collectable'] as const;
+	static details = [...CollectableKeys.all, 'details'] as const;
+	static lists = [...CollectableKeys.all, 'list'] as const;
+	static floorOrders = [...CollectableKeys.all, 'floorOrders'] as const;
+	static userBalances = [
+		...CollectableKeys.all,
+		...CollectableKeys.details,
+		'userBalances',
+	] as const;
+	static royaltyPercentage = [
+		...CollectableKeys.all,
+		'royaltyPercentage',
+	] as const;
+	static highestOffers = [
+		...CollectableKeys.all,
+		...CollectableKeys.details,
+		'highestOffers',
+	] as const;
+	static lowestListings = [
+		...CollectableKeys.all,
+		...CollectableKeys.details,
+		'lowestListings',
+	] as const;
+	static offers = [...CollectableKeys.all, 'offers'] as const;
+	static filter = [...CollectableKeys.all, 'filter'] as const;
+	static counts = [...CollectableKeys.all, 'counts'] as const;
+}
+
+class CollectionKeys {
+	static all = ['collections'] as const;
+	static list = [...CollectionKeys.all, 'list'] as const;
+	static detail = [...CollectionKeys.all, 'detail'] as const;
+}
+
+class BalanceQueries {
+	static all = ['balances'] as const;
+	static lists = [...BalanceQueries.all, 'tokenBalances'] as const;
+}
+
+class CheckoutKeys {
+	static all = ['checkouts'] as const;
+	static options = [...CheckoutKeys.all, 'options'] as const;
+	static cartItems = [...CheckoutKeys.all, 'cartItems'] as const;
+}
+
+class CurrencyKeys {
+	static all = ['currencies'] as const;
+	static lists = [...CurrencyKeys.all, 'list'] as const;
+}
+
+class ConfigKeys {
+	static all = ['configs'] as const;
+	static marketplace = [...ConfigKeys.all, 'marketplace'] as const;
+}
+export const collectableKeys = CollectableKeys;
+export const collectionKeys = CollectionKeys;
+export const balanceQueries = BalanceQueries;
+export const checkoutKeys = CheckoutKeys;
+export const currencyKeys = CurrencyKeys;
+export const configKeys = ConfigKeys;

package/src/react/_internal/api/services.ts

@@ -0,0 +1,101 @@
+import { SequenceIndexer } from '@0xsequence/indexer';
+import { SequenceMetadata } from '@0xsequence/metadata';
+import { networks, stringTemplate } from '@0xsequence/network';
+import type { Env, SdkConfig } from '../../../types/sdk-config';
+import { SequenceMarketplace } from './marketplace-api';
+
+const SERVICES = {
+	sequenceApi: 'https://api.sequence.app',
+	metadata: 'https://${prefix}metadata.sequence.app',
+	indexer: 'https://${prefix}${network}-indexer.sequence.app',
+	marketplaceApi: 'https://${prefix}marketplace-api.sequence.app/${network}',
+	imageProxy: 'https://imgproxy.sequence.xyz/',
+	builderMarketplaceApi:
+		'https://${prefix}api.sequence.build/marketplace/${projectId}',
+};
+
+type ChainNameOrId = string | number;
+
+const getNetwork = (nameOrId: ChainNameOrId) => {
+	for (const network of Object.values(networks)) {
+		if (
+			network.name === String(nameOrId).toLowerCase() ||
+			network.chainId === Number(nameOrId)
+		) {
+			return network;
+		}
+	}
+	throw new Error(`Unsopported chain; ${nameOrId}`);
+};
+
+export const imageProxy = stringTemplate(SERVICES.imageProxy, {});
+const metadataURL = (env: Env = 'production') => {
+	const prefix = getPrefix(env);
+	return stringTemplate(SERVICES.metadata, { prefix });
+};
+const indexerURL = (chain: ChainNameOrId, env: Env = 'production') => {
+	const prefix = getPrefix(env);
+	const network = getNetwork(chain).name;
+	return stringTemplate(SERVICES.indexer, { network: network, prefix });
+};
+const marketplaceApiURL = (chain: ChainNameOrId, env: Env = 'production') => {
+	const prefix = getPrefix(env);
+	const network = getNetwork(chain).name;
+	return stringTemplate(SERVICES.marketplaceApi, { network: network, prefix });
+};
+export const builderMarketplaceApi = (
+	projectId: string,
+	env: Env = 'production',
+) => {
+	const prefix = getPrefix(env);
+	return stringTemplate(SERVICES.builderMarketplaceApi, {
+		projectId,
+		prefix,
+	});
+};
+export const getMetadataClient = (config: SdkConfig) => {
+	const env = config._internal?.metadataEnv || 'production';
+	const projectAccessKey = getAccessKey({ env, config });
+	return new SequenceMetadata(metadataURL(env), projectAccessKey);
+};
+export const getIndexerClient = (chain: ChainNameOrId, config: SdkConfig) => {
+	const env = config._internal?.indexerEnv || 'production';
+	const projectAccessKey = getAccessKey({ env, config });
+	return new SequenceIndexer(indexerURL(chain, env), projectAccessKey);
+};
+export const getMarketplaceClient = (
+	chain: ChainNameOrId,
+	config: SdkConfig,
+) => {
+	const env = config._internal?.marketplaceEnv || 'production';
+	const projectAccessKey = getAccessKey({ env, config });
+	return new SequenceMarketplace(
+		marketplaceApiURL(chain, env),
+		projectAccessKey,
+	);
+};
+const getAccessKey = ({ env, config }: { env: Env; config: SdkConfig }) => {
+	switch (env) {
+		case 'development':
+			if (!config._internal?.devAccessKey)
+				throw new Error('devAccessKey is required for development env');
+			return config._internal?.devAccessKey;
+		case 'production':
+			return config.projectAccessKey;
+		case 'next':
+			if (!config._internal?.nextAccessKey)
+				throw new Error('nextAccessKey is required for next env');
+			return config._internal?.nextAccessKey;
+	}
+};
+
+const getPrefix = (env: Env) => {
+	switch (env) {
+		case 'development':
+			return 'dev-';
+		case 'production':
+			return '';
+		case 'next':
+			return 'next-';
+	}
+};

package/src/react/_internal/consts.ts

@@ -0,0 +1 @@
+export const DEFAULT_NETWORK = 137;

package/src/react/_internal/get-provider.ts

@@ -0,0 +1,6 @@
+export const PROVIDER_ID = 'sdk-provider';
+
+export function getProviderEl() {
+	if (!globalThis.document) return null;
+	return document.getElementById(PROVIDER_ID);
+}

package/src/react/_internal/index.ts

@@ -0,0 +1,5 @@
+export * from './consts';
+export * from './get-provider';
+export * from './types';
+export * from './api';
+export * from './wagmi';

package/src/react/_internal/types.ts

@@ -0,0 +1,13 @@
+import type { ChainId as NetworkChainId } from '@0xsequence/network';
+import type { ContractType } from '@types';
+
+export type QueryArg = {
+	query?: {
+		enabled?: boolean;
+		//TODO: Add more fields
+	};
+};
+
+export type ChainId = string | number | NetworkChainId;
+
+export type CollectionType = ContractType.ERC1155 | ContractType.ERC721;

package/src/react/_internal/wagmi/create-config.ts

@@ -0,0 +1,62 @@
+import { getDefaultChains } from '@0xsequence/kit';
+import { allNetworks, findNetworkConfig } from '@0xsequence/network';
+import type { MarketplaceConfig, SdkConfig } from '@types';
+import type { Chain, Transport } from 'viem';
+import { http, cookieStorage, createConfig, createStorage } from 'wagmi';
+import { getWaasConnectors } from './embedded';
+import { getUniversalConnectors } from './universal';
+
+export const createWagmiConfig = (
+	marketplaceConfig: MarketplaceConfig,
+	sdkConfig: SdkConfig,
+	ssr?: boolean,
+) => {
+	const chains = getChainConfigs(marketplaceConfig);
+	const transports = getTransportConfigs(chains);
+
+	const walletType = sdkConfig.wallet?.embedded?.waasConfigKey
+		? 'waas'
+		: 'universal';
+
+	const connectors =
+		walletType === 'universal'
+			? getUniversalConnectors(marketplaceConfig, sdkConfig)
+			: getWaasConnectors(marketplaceConfig, sdkConfig);
+
+	// The old config did not support disabling EIP-6963 wallets
+	const includeEIP6963Wallets =
+		marketplaceConfig.walletOptionsNew?.includeEIP6963Wallets ?? true;
+
+	return createConfig({
+		connectors,
+		chains,
+		ssr,
+		multiInjectedProviderDiscovery: includeEIP6963Wallets,
+		storage: ssr
+			? createStorage({
+					storage: cookieStorage,
+				})
+			: undefined,
+		transports,
+	});
+};
+
+function getChainConfigs(marketConfig: MarketplaceConfig): [Chain, ...Chain[]] {
+	const supportedChainIds = new Set(
+		marketConfig.collections.map((c) => c.chainId),
+	);
+	return getDefaultChains([...supportedChainIds]);
+}
+
+function getTransportConfigs(
+	chains: [Chain, ...Chain[]],
+): Record<number, Transport> {
+	return chains.reduce(
+		(acc, chain) => {
+			const network = findNetworkConfig(allNetworks, chain.id);
+			if (network) acc[chain.id] = http(network.rpcUrl);
+			return acc;
+		},
+		{} as Record<number, Transport>,
+	);
+}

package/src/react/_internal/wagmi/embedded.ts

@@ -0,0 +1,87 @@
+import {
+	type Wallet,
+	appleWaas,
+	coinbaseWallet,
+	emailWaas,
+	getKitConnectWallets,
+	googleWaas,
+	walletConnect,
+} from '@0xsequence/kit';
+import type { MarketplaceConfig, SdkConfig } from '@types';
+import type { CreateConnectorFn } from 'wagmi';
+import { DEFAULT_NETWORK } from '../consts';
+
+export function getWaasConnectors(
+	marketplaceConfig: MarketplaceConfig,
+	sdkConfig: SdkConfig,
+): CreateConnectorFn[] {
+	const { projectAccessKey } = sdkConfig;
+
+	const waasConfigKey = sdkConfig.wallet?.embedded?.waasConfigKey;
+
+	if (!waasConfigKey)
+		throw new Error('waasConfigKey is required for embedded wallet');
+
+	const walletConnectProjectId = sdkConfig.wallet?.walletConnectProjectId;
+	const { googleClientId, appleClientId, appleRedirectURI } =
+		sdkConfig.wallet?.embedded || {};
+
+	const { title: appName } = marketplaceConfig;
+
+	// Normalizing the wallet options, TODO: remove this after the marketplaceConfig is updated
+	const walletOptions = marketplaceConfig.walletOptionsNew || {
+		connectors: ['coinbase', 'walletconnect'],
+	};
+
+	const wallets: Wallet[] = [
+		emailWaas({
+			projectAccessKey,
+			waasConfigKey,
+			network: DEFAULT_NETWORK,
+		}),
+	];
+
+	if (walletOptions.connectors.includes('coinbase')) {
+		wallets.push(
+			coinbaseWallet({
+				appName,
+			}),
+		);
+	}
+
+	if (
+		walletConnectProjectId &&
+		walletOptions.connectors.includes('walletconnect')
+	) {
+		wallets.push(
+			walletConnect({
+				projectId: walletConnectProjectId,
+			}),
+		);
+	}
+
+	if (googleClientId) {
+		wallets.push(
+			googleWaas({
+				projectAccessKey,
+				googleClientId,
+				waasConfigKey,
+				network: DEFAULT_NETWORK,
+			}),
+		);
+	}
+
+	if (appleClientId) {
+		wallets.push(
+			appleWaas({
+				projectAccessKey,
+				appleClientId,
+				appleRedirectURI,
+				waasConfigKey,
+				network: DEFAULT_NETWORK,
+			}),
+		);
+	}
+
+	return getKitConnectWallets(projectAccessKey, wallets);
+}

package/src/react/_internal/wagmi/index.ts

@@ -0,0 +1,3 @@
+export * from './create-config';
+export * from './embedded';
+export * from './universal';

package/src/react/_internal/wagmi/universal.ts

@@ -0,0 +1,82 @@
+import {
+	type SequenceOptions,
+	type Wallet,
+	apple,
+	coinbaseWallet,
+	email,
+	facebook,
+	getKitConnectWallets,
+	google,
+	sequence,
+	twitch,
+	walletConnect,
+} from '@0xsequence/kit';
+import type { MarketplaceConfig, SdkConfig } from '@types';
+import type { CreateConnectorFn } from 'wagmi';
+import { DEFAULT_NETWORK } from '../consts';
+
+const defaultNetwork = DEFAULT_NETWORK;
+
+export function getUniversalConnectors(
+	marketplaceConfig: MarketplaceConfig,
+	config: SdkConfig,
+): CreateConnectorFn[] {
+	const { projectAccessKey } = config;
+	const sequenceWalletOptions = {
+		defaultNetwork,
+		connect: {
+			projectAccessKey,
+			app: marketplaceConfig.title,
+			settings: {
+				bannerUrl: marketplaceConfig.ogImage,
+			},
+		},
+	};
+	const wallets = getWalletConfigs(
+		marketplaceConfig,
+		sequenceWalletOptions,
+		config.wallet?.walletConnectProjectId,
+	);
+	const socialWallets = getSocialWalletConfigs(sequenceWalletOptions);
+	return getKitConnectWallets(projectAccessKey, [...socialWallets, ...wallets]);
+}
+
+function getWalletConfigs(
+	marketplaceConfig: MarketplaceConfig,
+	sequenceWalletOptions: SequenceOptions,
+	walletConnectProjectId?: string,
+): Wallet[] {
+	const wallets: Wallet[] = [];
+
+	// Normalizing the wallet options, TODO: remove this after the marketplaceConfig is updated
+	const walletOptions = marketplaceConfig.walletOptionsNew || {
+		connectors: ['coinbase', 'walletconnect'],
+	};
+
+	wallets.push(sequence(sequenceWalletOptions));
+
+	if (walletOptions.connectors.includes('coinbase')) {
+		wallets.push(coinbaseWallet({ appName: marketplaceConfig.title }));
+	}
+
+	if (
+		walletConnectProjectId &&
+		walletOptions.connectors.includes('walletconnect')
+	) {
+		wallets.push(walletConnect({ projectId: walletConnectProjectId }));
+	}
+
+	return wallets;
+}
+
+function getSocialWalletConfigs(
+	sequenceWalletOptions: SequenceOptions,
+): Wallet[] {
+	return [
+		email(sequenceWalletOptions),
+		facebook(sequenceWalletOptions),
+		google(sequenceWalletOptions),
+		apple(sequenceWalletOptions),
+		twitch(sequenceWalletOptions),
+	] as const;
+}

package/src/react/hooks/index.ts

@@ -0,0 +1,17 @@
+export * from './useBalanceOfCollectible';
+export * from './useCollectible';
+export * from './useCollection';
+export * from './useConfig';
+export * from './useCurrencies';
+export * from './useFilters';
+export * from './useFloorOrder';
+export * from './useHighestOffer';
+export * from './useListBalances';
+export * from './useListCollectibles';
+export * from './useListOffersForCollectible';
+export * from './useLowestListing';
+export * from './useMarketplaceConfig';
+export * from './useRoyaltyPercentage';
+export * from './useGenerateListingTransaction';
+export * from './useGenerateOfferTransaction';
+export * from './useTransferTokens';

package/src/react/hooks/options/marketplaceConfigOptions.ts

@@ -0,0 +1,62 @@
+import { builderMarketplaceApi, configKeys } from '@internal';
+import { queryOptions } from '@tanstack/react-query';
+import type { Env, MarketplaceConfig, SdkConfig } from '@types';
+
+const fetchBuilderConfig = async (projectId: string, env: Env) => {
+	const url = `${builderMarketplaceApi(projectId, env)}`;
+	const response = await fetch(`${url}/config.json`);
+
+	const json = await response.json();
+	if (!response.ok) {
+		console.error('Failed to fetch marketplace config:', response.status, json);
+		//@ts-ignore
+		switch (json.code) {
+			case 3000: // Throws 3000 if the project is not found
+				throw new Error(`Project id: ${projectId} not found, ${url}`);
+			default:
+				//@ts-ignore
+				throw new Error(`Failed to fetch marketplace config: ${json.msg}`);
+		}
+	}
+	return json as MarketplaceConfig;
+};
+
+const fetchStyles = async (projectId: string, env: Env) => {
+	const response = await fetch(
+		`${builderMarketplaceApi(projectId, env)}/styles.css`,
+	);
+	const styles = await response.text();
+	// React sanitizes this string, so we need to remove all quotes, they are not needed anyway
+	return styles.replaceAll(/['"]/g, '');
+};
+
+const fetchMarketplaceConfig = async (
+	env: Env,
+	projectId: string,
+): Promise<MarketplaceConfig> => {
+	const [marketplaceConfig, cssString] = await Promise.all([
+		fetchBuilderConfig(projectId, env),
+		fetchStyles(projectId, env),
+	]);
+
+	return {
+		...marketplaceConfig,
+		cssString,
+		manifestUrl: `${builderMarketplaceApi(projectId, env)}/manifest.json`,
+	};
+};
+
+export const marketplaceConfigOptions = (
+	config: Pick<SdkConfig, 'projectId'> | SdkConfig,
+) => {
+	let env: Env = 'production';
+	if ('_internal' in config && config._internal !== undefined) {
+		env = config._internal.builderEnv ?? env;
+	}
+
+	const projectId = config.projectId;
+	return queryOptions({
+		queryKey: [...configKeys.marketplace, env, projectId],
+		queryFn: () => fetchMarketplaceConfig(env, projectId),
+	});
+};

package/src/react/hooks/useBalanceOfCollectible.tsx

@@ -0,0 +1,51 @@
+import {
+	type ChainId,
+	type QueryArg,
+	collectableKeys,
+	getIndexerClient,
+} from '@internal';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { SdkConfig } from '@types';
+import { useConfig } from './useConfig';
+
+export type UseBalanceOfCollectibleArgs = {
+	collectionAddress: string;
+	userAddress: string;
+	tokenId: string;
+	chainId: ChainId;
+} & QueryArg;
+
+const fetchBalanceOfCollectible = async (
+	args: UseBalanceOfCollectibleArgs,
+	config: SdkConfig,
+) => {
+	const indexerClient = getIndexerClient(args.chainId, config);
+	return indexerClient
+		.getTokenBalances({
+			accountAddress: args.userAddress,
+			contractAddress: args.collectionAddress,
+			tokenID: args.tokenId,
+			includeMetadata: false,
+			metadataOptions: {
+				verifiedOnly: true,
+				includeContracts: [args.collectionAddress],
+			},
+		})
+		.then((res) => res.balances[0] || null);
+};
+
+export const balanceOfCollectibleOptions = (
+	args: UseBalanceOfCollectibleArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...args.query,
+		queryKey: [...collectableKeys.userBalances, args, config],
+		queryFn: () => fetchBalanceOfCollectible(args, config),
+	});
+};
+
+export const useBalanceOfCollectible = (args: UseBalanceOfCollectibleArgs) => {
+	const config = useConfig();
+	return useQuery(balanceOfCollectibleOptions(args, config));
+};

package/src/react/hooks/useCollectible.tsx

@@ -0,0 +1,47 @@
+import {
+	type ChainId,
+	type QueryArg,
+	collectableKeys,
+	getMetadataClient,
+} from '@internal';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { SdkConfig } from '@types';
+import { useConfig } from './useConfig';
+
+export type UseCollectibleArgs = {
+	chainId: ChainId;
+	collectionAddress: string;
+	collectibleId: string;
+} & QueryArg;
+
+export type UseCollectibleReturn = ReturnType<typeof fetchCollectible>;
+
+const fetchCollectible = async (
+	args: UseCollectibleArgs,
+	config: SdkConfig,
+) => {
+	const metadataClient = getMetadataClient(config);
+	return metadataClient
+		.getTokenMetadata({
+			chainID: String(args.chainId),
+			contractAddress: args.collectionAddress,
+			tokenIDs: [args.collectibleId],
+		})
+		.then((resp) => resp.tokenMetadata[0]);
+};
+
+export const collectibleOptions = (
+	args: UseCollectibleArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...args.query,
+		queryKey: [...collectableKeys.details, args, config],
+		queryFn: () => fetchCollectible(args, config),
+	});
+};
+
+export const useCollectible = (args: UseCollectibleArgs) => {
+	const config = useConfig();
+	return useQuery(collectibleOptions(args, config));
+};

package/src/react/hooks/useCollection.tsx

@@ -0,0 +1,42 @@
+import {
+	type ChainId,
+	type QueryArg,
+	collectionKeys,
+	getMetadataClient,
+} from '@internal';
+import { queryOptions, useQuery } from '@tanstack/react-query';
+import type { SdkConfig } from '@types';
+import { useConfig } from './useConfig';
+
+export type UseCollectionArgs = {
+	chainId: ChainId;
+	collectionAddress: string;
+} & QueryArg;
+
+export type UseCollectionReturn = ReturnType<typeof fetchCollection>;
+
+const fetchCollection = async (args: UseCollectionArgs, config: SdkConfig) => {
+	const metadataClient = getMetadataClient(config);
+	return metadataClient
+		.getContractInfo({
+			chainID: String(args.chainId),
+			contractAddress: args.collectionAddress,
+		})
+		.then((resp) => resp.contractInfo);
+};
+
+export const collectionOptions = (
+	args: UseCollectionArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...args.query,
+		queryKey: [...collectionKeys.detail, args, config],
+		queryFn: () => fetchCollection(args, config),
+	});
+};
+
+export const useCollection = (args: UseCollectionArgs) => {
+	const config = useConfig();
+	return useQuery(collectionOptions(args, config));
+};