@0xsequence/marketplace-sdk 0.0.0-20250513233135

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

@@ -0,0 +1,62 @@
+import type { Auth, Event as DatabeatEvent } from '@databeat/tracker';
+import { Databeat } from '@databeat/tracker';
+
+import { useConfig } from '../../hooks';
+import type {
+	EventType,
+	TrackCreateListing,
+	TrackCreateOffer,
+	TrackSellItems,
+	TrackTransactionFailed,
+} from './types';
+
+export type EventTypes = keyof typeof EventType;
+export type Event = DatabeatEvent<EventTypes>;
+
+export class DatabeatAnalytics extends Databeat<Extract<EventTypes, string>> {
+	trackSellItems(args: TrackSellItems) {
+		this.track({
+			event: 'SELL_ITEMS',
+			props: args.props,
+			nums: args.nums,
+		});
+	}
+
+	trackCreateListing(args: TrackCreateListing) {
+		this.track({
+			event: 'CREATE_LISTING',
+			props: args.props,
+			nums: args.nums,
+		});
+	}
+
+	trackCreateOffer(args: TrackCreateOffer) {
+		this.track({
+			event: 'CREATE_OFFER',
+			props: args.props,
+			nums: args.nums,
+		});
+	}
+
+	trackTransactionFailed(args: TrackTransactionFailed) {
+		this.track({
+			event: 'TRANSACTION_FAILED',
+			props: args,
+		});
+	}
+}
+
+export const useAnalytics = () => {
+	const config = useConfig();
+	const server = 'https://nodes.sequence.app';
+
+	const auth: Auth = {};
+	auth.headers = { 'X-Access-Key': config.projectAccessKey };
+
+	return new DatabeatAnalytics(server, auth, {
+		defaultEnabled: true,
+		initProps: () => {
+			return { origin: window.location.origin };
+		},
+	});
+};

package/src/react/_internal/databeat/types.ts

@@ -0,0 +1,71 @@
+import type { MarketplaceKind, OrderbookKind } from '../api';
+
+export enum EventType {
+	BUY_ITEMS = 0,
+	SELL_ITEMS = 1,
+	CREATE_LISTING = 2,
+	CREATE_OFFER = 3,
+	CANCEL_LISTING = 4,
+	CANCEL_OFFER = 5,
+	TRANSACTION_FAILED = 6,
+}
+
+interface PropsEvent {
+	[key: string]: string;
+}
+
+interface NumsEvent {
+	[key: string]: number;
+}
+
+interface Transaction extends PropsEvent {
+	chainId: string;
+	txnHash: string;
+}
+
+interface TradeItemsInfo extends PropsEvent {
+	marketplaceKind: MarketplaceKind;
+	userId: string;
+	collectionAddress: string;
+	currencyAddress: string;
+	currencySymbol: string;
+}
+
+interface TradeItemsValues extends NumsEvent {
+	currencyValueDecimal: number;
+	currencyValueRaw: number;
+}
+
+export interface TrackBuyItems {
+	props: TradeItemsInfo & Transaction;
+	nums: TradeItemsValues;
+}
+
+export interface TrackSellItems {
+	props: TradeItemsInfo & Transaction;
+	nums: TradeItemsValues;
+}
+
+interface ListOfferItemsInfo extends PropsEvent {
+	orderbookKind: OrderbookKind;
+	collectionAddress: string;
+	currencyAddress: string;
+	currencySymbol: string;
+}
+
+interface ListOfferItemsValues extends NumsEvent {
+	currencyValueDecimal: number;
+	currencyValueRaw: number;
+}
+
+export interface TrackCreateListing {
+	props: ListOfferItemsInfo & Transaction;
+	nums: ListOfferItemsValues;
+}
+
+export interface TrackCreateOffer {
+	props: ListOfferItemsInfo & Transaction;
+	nums: ListOfferItemsValues;
+}
+
+export interface TrackTransactionFailed extends Transaction, PropsEvent {}

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/logger.ts

@@ -0,0 +1,66 @@
+export class TransactionLogger {
+	constructor(
+		private readonly context: string,
+		private readonly enabled: boolean = true,
+	) {}
+
+	private formatData(data: unknown): unknown {
+		if (data instanceof Error) {
+			return {
+				name: data.name,
+				message: data.message,
+				cause:
+					data.cause instanceof Error
+						? this.formatData(data.cause)
+						: data.cause,
+				stack: data.stack?.split('\n').slice(0, 3),
+			};
+		}
+
+		if (Array.isArray(data)) {
+			return data.map((item) => this.formatData(item));
+		}
+
+		if (typeof data === 'object' && data !== null) {
+			return Object.fromEntries(
+				Object.entries(data).map(([key, value]) => [
+					key,
+					this.formatData(value),
+				]),
+			);
+		}
+
+		return data;
+	}
+
+	private log(
+		level: 'debug' | 'error' | 'info',
+		message: string,
+		data?: unknown,
+	) {
+		if (!this.enabled) return;
+		console[level](
+			`[${this.context}] ${message}`,
+			data ? this.formatData(data) : '',
+		);
+	}
+
+	debug(message: string, data?: unknown) {
+		this.log('debug', message, data);
+	}
+
+	error(message: string, error: unknown) {
+		this.log('error', message, error);
+	}
+
+	info(message: string, data?: unknown) {
+		this.log('info', message, data);
+	}
+
+	state(from: string, to: string) {
+		this.info(`State transition: ${from} -> ${to}`);
+	}
+}
+
+export const createLogger = (context: string, enabled = true) =>
+	new TransactionLogger(context, enabled);

package/src/react/_internal/types.ts

@@ -0,0 +1,89 @@
+import type { Address } from 'viem';
+import type { Chain } from 'viem';
+import { z } from 'zod';
+import type { ContractType, CreateReq } from '../../types';
+import type { MarketplaceConfig, SdkConfig } from '../../types';
+import type { MarketplaceKind, OrderbookKind } from './api';
+
+export const QueryArgSchema = z
+	.object({
+		enabled: z.boolean().optional(),
+	})
+	.optional();
+
+export type QueryArg = z.infer<typeof QueryArgSchema>;
+
+export const CollectableIdSchema = z.string().or(z.number());
+
+export const AddressSchema = z.string().transform((val, ctx) => {
+	const regex = /^0x[a-fA-F0-9]{40}$/;
+
+	if (!regex.test(val)) {
+		ctx.addIssue({
+			code: z.ZodIssueCode.custom,
+			message: `Invalid Address ${val}`,
+		});
+	}
+
+	return val as Address;
+});
+
+export type CollectionType = ContractType.ERC1155 | ContractType.ERC721;
+
+type TransactionStep = {
+	exist: boolean;
+	isExecuting: boolean;
+	execute: () => Promise<void>;
+};
+
+export type TransactionSteps = {
+	approval: TransactionStep;
+	transaction: TransactionStep;
+};
+
+export enum TransactionType {
+	BUY = 'BUY',
+	SELL = 'SELL',
+	LISTING = 'LISTING',
+	OFFER = 'OFFER',
+	TRANSFER = 'TRANSFER',
+	CANCEL = 'CANCEL',
+}
+
+export interface TransactionConfig {
+	type: TransactionType;
+	chainId: number;
+	chains: readonly Chain[];
+	collectionAddress: string;
+	sdkConfig: SdkConfig;
+	marketplaceConfig: MarketplaceConfig;
+	orderbookKind?: OrderbookKind;
+}
+
+export interface BuyInput {
+	orderId: string;
+	collectableDecimals: number;
+	marketplace: MarketplaceKind;
+	quantity: string;
+}
+
+export interface SellInput {
+	orderId: string;
+	marketplace: MarketplaceKind;
+	quantity?: string;
+}
+
+export interface ListingInput {
+	contractType: ContractType;
+	listing: CreateReq;
+}
+
+export interface OfferInput {
+	contractType: ContractType;
+	offer: CreateReq;
+}
+
+export interface CancelInput {
+	orderId: string;
+	marketplace: MarketplaceKind;
+}

package/src/react/_internal/utils.ts

@@ -0,0 +1,53 @@
+import type { TypedData, TypedDataDomain } from 'viem';
+import type { Hex } from 'viem';
+import { type PostRequest, type Signature, type Step, StepType } from './api';
+
+export interface SignatureStep {
+	id: StepType.signEIP191 | StepType.signEIP712;
+	domain?: TypedDataDomain;
+	types?: TypedData;
+	primaryType?: string;
+	to: Hex; // TODO: This should not be here, its wrongly typed in webrpc
+	data: string;
+	value: string;
+	price: string;
+	signature?: Signature;
+	post: PostRequest;
+}
+
+export interface TransactionStep {
+	id:
+		| StepType.buy
+		| StepType.sell
+		| StepType.cancel
+		| StepType.createOffer
+		| StepType.createListing;
+	data: Hex;
+	to: Hex;
+	value: Hex;
+	price: Hex;
+	maxFeePerGas?: Hex;
+	maxPriorityFeePerGas?: Hex;
+	gas?: Hex;
+}
+export interface ApprovalStep {
+	id: StepType.tokenApproval;
+	data: string;
+	to: Hex;
+	value: string;
+	price: string;
+}
+
+export function isSignatureStep(step: Step): step is SignatureStep {
+	return step.id === StepType.signEIP191 || step.id === StepType.signEIP712;
+}
+
+export function isTransactionStep(step: Step): step is TransactionStep {
+	return [
+		StepType.buy,
+		StepType.sell,
+		StepType.cancel,
+		StepType.createOffer,
+		StepType.createListing,
+	].includes(step.id);
+}

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

@@ -0,0 +1,192 @@
+import { polygon } from 'viem/chains';
+import { beforeEach, describe, expect, it } from 'vitest';
+import { type Config, cookieStorage } from 'wagmi';
+import {
+	type MarketplaceConfig,
+	MarketplaceWallet,
+	OrderbookKind,
+	type SdkConfig,
+} from '../../../../types';
+import { createWagmiConfig } from '../create-config';
+
+describe('createWagmiConfig', () => {
+	let baseMarketplaceConfig: MarketplaceConfig;
+	let baseSdkConfig: SdkConfig;
+
+	beforeEach(() => {
+		baseMarketplaceConfig = {
+			projectId: 1,
+			cssString: '',
+			manifestUrl: '',
+			publisherId: 'test-publisher',
+			title: 'Test Marketplace',
+			shortDescription: 'Test Description',
+			socials: {
+				twitter: '',
+				discord: '',
+				website: '',
+				tiktok: '',
+				instagram: '',
+				youtube: '',
+			},
+			faviconUrl: 'https://test.com/favicon.ico',
+			landingBannerUrl: 'https://test.com/banner.jpg',
+			walletOptions: {
+				walletType: MarketplaceWallet.UNIVERSAL,
+				oidcIssuers: {},
+				connectors: [],
+				includeEIP6963Wallets: false,
+			},
+			collections: [
+				{
+					address: '0x1234567890123456789012345678901234567890',
+					chainId: polygon.id,
+					currencyOptions: [],
+					destinationMarketplace: OrderbookKind.sequence_marketplace_v2,
+					filterSettings: {
+						filterOrder: [],
+						exclusions: [],
+					},
+					exchanges: [],
+					bannerUrl: '',
+					feePercentage: 0,
+				},
+			],
+			landingPageLayout: 'default',
+			logoUrl: '',
+			bannerUrl: '',
+			fontUrl: '',
+			ogImage: '',
+		};
+
+		baseSdkConfig = {
+			projectAccessKey: 'test-access-key',
+			projectId: '1',
+		};
+	});
+
+	describe('successful cases', () => {
+		it('should create config with empty collections', () => {
+			const configWithEmptyCollections = createWagmiConfig(
+				{
+					...baseMarketplaceConfig,
+					collections: [],
+				},
+				baseSdkConfig,
+			);
+			expect(configWithEmptyCollections.chains).toBeDefined();
+			expect(Array.isArray(configWithEmptyCollections.chains)).toBe(true);
+			expect(configWithEmptyCollections.chains).toHaveLength(1);
+			// Default chain is polygon if no collections are specified
+			expect(configWithEmptyCollections.chains[0].id).toBe(polygon.id);
+		});
+
+		it('should create config with universal wallet setup', () => {
+			const marketplaceConfig: MarketplaceConfig = {
+				...baseMarketplaceConfig,
+				walletOptions: {
+					connectors: ['walletconnect', 'coinbase'],
+					includeEIP6963Wallets: true,
+					walletType: MarketplaceWallet.UNIVERSAL,
+					oidcIssuers: {},
+				},
+			};
+
+			const sdkConfig: SdkConfig = {
+				...baseSdkConfig,
+				walletConnectProjectId: 'test-wc-project-id',
+			};
+
+			const config = createWagmiConfig(marketplaceConfig, sdkConfig);
+			expect(config.connectors).toBeDefined();
+			expect(config.chains).toHaveLength(1);
+		});
+
+		it('should create config with embedded wallet setup', () => {
+			// Valid waas tenant key format - base64 encoded JSON string containing the actual key
+			const waasTenantKey = btoa(
+				JSON.stringify({
+					key: 'valid-waas-tenant-key',
+					projectId: 'test-project-id',
+				}),
+			);
+
+			const marketplaceConfig: MarketplaceConfig = {
+				...baseMarketplaceConfig,
+				walletOptions: {
+					connectors: ['walletconnect'],
+					includeEIP6963Wallets: false,
+					walletType: MarketplaceWallet.EMBEDDED,
+					oidcIssuers: {},
+					waas: {
+						tenantKey: waasTenantKey,
+						emailEnabled: false,
+						providers: [],
+					},
+				},
+			};
+
+			const sdkConfig: SdkConfig = {
+				...baseSdkConfig,
+				walletConnectProjectId: 'test-wc-project-id',
+			};
+
+			const config = createWagmiConfig(marketplaceConfig, sdkConfig);
+			expect(config.connectors).toBeDefined();
+			expect(config.chains).toHaveLength(1);
+		});
+
+		it('should respect EIP6963 wallet inclusion setting', () => {
+			const marketplaceConfig: MarketplaceConfig = {
+				...baseMarketplaceConfig,
+				walletOptions: {
+					connectors: ['walletconnect'],
+					includeEIP6963Wallets: false,
+					walletType: MarketplaceWallet.UNIVERSAL,
+					oidcIssuers: {},
+				},
+			};
+
+			const config = createWagmiConfig(marketplaceConfig, baseSdkConfig);
+			expect(config.connectors).toBeDefined();
+			expect(config.chains).toHaveLength(1);
+		});
+
+		it('should create SSR compatible config when ssr flag is true', async () => {
+			const config = createWagmiConfig(
+				baseMarketplaceConfig,
+				baseSdkConfig,
+				true,
+			) as Config;
+
+			expect(config.storage).toBeInstanceOf(cookieStorage.constructor);
+
+			const testKey = 'wagmi.test';
+			const testValue = { data: 'test-value' };
+
+			config.storage?.setItem(testKey, JSON.stringify(testValue));
+
+			const storedValue = await config.storage?.getItem(testKey);
+			expect(storedValue).toBeDefined();
+			expect(JSON.parse(storedValue as string)).toEqual(testValue);
+		});
+	});
+
+	describe('failure cases', () => {
+		it('should still create config when walletConnectProjectId is missing', () => {
+			const marketplaceConfig: MarketplaceConfig = {
+				...baseMarketplaceConfig,
+				walletOptions: {
+					connectors: ['walletconnect'],
+					includeEIP6963Wallets: true,
+					walletType: MarketplaceWallet.UNIVERSAL,
+					oidcIssuers: {},
+				},
+			};
+
+			const config = createWagmiConfig(marketplaceConfig, baseSdkConfig);
+			expect(config.connectors).toBeDefined();
+			expect(config.chains).toHaveLength(1);
+		});
+	});
+});

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

@@ -0,0 +1,83 @@
+import { getDefaultChains } from '@0xsequence/connect';
+import { allNetworks, findNetworkConfig } from '@0xsequence/network';
+import type { Chain, Transport } from 'viem';
+import { http, cookieStorage, createConfig, createStorage } from 'wagmi';
+import type { Env, SdkConfig } from '../../../types';
+import type { MarketplaceConfig } from '../../queries/marketplaceConfig';
+import { DEFAULT_NETWORK } from '../consts';
+import { getConnectors } from './get-connectors';
+
+export const createWagmiConfig = (
+	marketplaceConfig: MarketplaceConfig,
+	sdkConfig: SdkConfig,
+	ssr?: boolean,
+) => {
+	const chains = getChainConfigs(marketplaceConfig);
+	const nodeGatewayEnv = sdkConfig._internal?.nodeGatewayEnv ?? 'production';
+	const transports = getTransportConfigs(
+		chains,
+		sdkConfig.projectAccessKey,
+		nodeGatewayEnv,
+	);
+
+	const walletType = marketplaceConfig.walletOptions.walletType;
+
+	const connectors = getConnectors({
+		marketplaceConfig,
+		sdkConfig,
+		walletType,
+	});
+
+	const multiInjectedProviderDiscovery =
+		marketplaceConfig.walletOptions.includeEIP6963Wallets;
+
+	return createConfig({
+		connectors,
+		chains,
+		ssr,
+		multiInjectedProviderDiscovery,
+		storage: ssr
+			? createStorage({
+					storage: cookieStorage,
+				})
+			: undefined,
+		transports,
+	});
+};
+
+function getChainConfigs(marketConfig: MarketplaceConfig): [Chain, ...Chain[]] {
+	const supportedChainIds = new Set(
+		marketConfig.collections.map((c) => c.chainId),
+	);
+
+	if (supportedChainIds.size === 0) {
+		supportedChainIds.add(DEFAULT_NETWORK);
+	}
+
+	const chains = getDefaultChains([...supportedChainIds]);
+
+	return chains;
+}
+
+function getTransportConfigs(
+	chains: [Chain, ...Chain[]],
+	projectAccessKey: string,
+	nodeGatewayEnv: Env,
+): Record<number, Transport> {
+	return chains.reduce(
+		(acc, chain) => {
+			const network = findNetworkConfig(allNetworks, chain.id);
+			if (network) {
+				let rpcUrl = network.rpcUrl;
+				if (nodeGatewayEnv === 'development') {
+					rpcUrl = rpcUrl.replace('nodes.', 'dev-nodes.');
+				}
+				if (!network.rpcUrl.endsWith(projectAccessKey))
+					rpcUrl = `${rpcUrl}/${projectAccessKey}`;
+				acc[chain.id] = http(rpcUrl);
+			}
+			return acc;
+		},
+		{} as Record<number, Transport>,
+	);
+}