@0xsequence/marketplace-sdk 0.0.0-20250513233135

package/src/react/ui/modals/_internal/components/waasFeeOptionsSelect/WaasFeeOptionsSelect.tsx

@@ -0,0 +1,102 @@
+'use client';
+
+import { Image, Select, Text } from '@0xsequence/design-system';
+import type { Observable } from '@legendapp/state';
+import { observer } from '@legendapp/state/react';
+import { useEffect } from 'react';
+import { formatUnits, zeroAddress } from 'viem';
+import type { FeeOption } from '../../../../../../types/waas-types';
+import type { SelectItem } from '../../../../components/_internals/custom-select/CustomSelect';
+const WaasFeeOptionsSelect = observer(
+	({
+		options,
+		selectedFeeOption$,
+	}: {
+		options: FeeOption[];
+		selectedFeeOption$: Observable<FeeOption | undefined>;
+	}) => {
+		options = options.map((option) => ({
+			...option,
+			token: {
+				...option.token,
+				contractAddress: option.token.contractAddress || zeroAddress,
+			},
+		}));
+
+		const feeOptions = options.map((option) => {
+			const value = option.token.contractAddress ?? '';
+
+			return FeeOptionSelectItem({ value, option });
+		});
+
+		// biome-ignore lint/correctness/useExhaustiveDependencies: <explanation>
+		useEffect(() => {
+			if (options.length > 0 && !selectedFeeOption$.get())
+				selectedFeeOption$.set(options[0]);
+		}, [options]);
+
+		if (options.length === 0 || !selectedFeeOption$.get()?.token) return null;
+
+		return (
+			<Select
+				name="fee-option"
+				options={feeOptions.map((option) => ({
+					label: option.content,
+					value: option.value,
+				}))}
+				onValueChange={(value) => {
+					const selectedOption = options.find(
+						(option) => option.token.contractAddress === value,
+					);
+
+					selectedFeeOption$.set(selectedOption);
+				}}
+				defaultValue={options[0].token.contractAddress ?? undefined}
+			/>
+		);
+	},
+);
+
+function FeeOptionSelectItem({
+	value,
+	option,
+}: {
+	value: string;
+	option: FeeOption;
+}) {
+	return {
+		value,
+		content: (
+			<div className="flex items-center gap-2">
+				<Image
+					className="h-3 w-3"
+					src={option.token.logoURL}
+					alt={option.token.symbol}
+				/>
+
+				<div className="flex gap-1">
+					<Text className="font-body text-sm" color="text100">
+						Fee
+					</Text>
+					<Text
+						className="font-body text-sm"
+						color="text50"
+						fontWeight="semibold"
+					>
+						(in {option.token.symbol})
+					</Text>
+
+					<Text className="font-body text-sm" color="text100">
+						:
+					</Text>
+				</div>
+
+				<Text className="font-body text-sm">
+					{formatUnits(BigInt(option.value), option.token.decimals || 0)}
+				</Text>
+			</div>
+		),
+	} as SelectItem;
+}
+
+export default WaasFeeOptionsSelect;

package/src/react/ui/modals/_internal/hooks/useSelectWaasFeeOptions.ts

@@ -0,0 +1,53 @@
+import { getNetwork } from '@0xsequence/connect';
+import { NetworkType } from '@0xsequence/network';
+import type { FeeOption } from '../../../../../types/waas-types';
+import { useWallet } from '../../../../_internal/wallet/useWallet';
+
+interface UseSelectWaasFeeOptionsProps {
+	chainId: string | number;
+	isProcessing: boolean;
+	feeOptionsVisible: boolean;
+	selectedFeeOption: FeeOption;
+}
+
+export const useSelectWaasFeeOptions = ({
+	chainId,
+	isProcessing,
+	feeOptionsVisible,
+	selectedFeeOption,
+}: UseSelectWaasFeeOptionsProps) => {
+	const { wallet } = useWallet();
+	const network = chainId ? getNetwork(Number(chainId)) : undefined;
+	const isTestnet = network?.type === NetworkType.TESTNET;
+	const isWaaS = wallet?.isWaaS;
+	const isProcessingWithWaaS = isProcessing && isWaaS;
+
+	const shouldHideActionButton =
+		!isTestnet &&
+		isProcessingWithWaaS &&
+		feeOptionsVisible === true &&
+		!!selectedFeeOption;
+
+	const waasFeeOptionsShown =
+		wallet?.isWaaS && isProcessing && feeOptionsVisible;
+
+	const getActionLabel = (
+		defaultLabel: string,
+		loadingLabel = 'Loading fee options',
+	) => {
+		if (isProcessing) {
+			return isWaaS && !isTestnet ? loadingLabel : defaultLabel;
+		}
+		return defaultLabel;
+	};
+
+	return {
+		isWaaS,
+		isTestnet,
+		feeOptionsVisible,
+		shouldHideActionButton,
+		waasFeeOptionsShown,
+		isProcessingWithWaaS,
+		getActionLabel,
+	};
+};

package/src/react/ui/modals/_internal/stores/accountModal.ts

@@ -0,0 +1,3 @@
+import { observable } from '@legendapp/state';
+
+export const _accountModalOpen$ = observable(false);

package/src/react/ui/modals/_internal/types.ts

@@ -0,0 +1,14 @@
+import type { Hash, Hex } from 'viem';
+
+export type ModalCallbacks = {
+	onSuccess?: ({ hash, orderId }: { hash?: Hash; orderId?: string }) => void;
+	onError?: (error: Error) => void;
+	onBuyAtFloorPrice?: () => void;
+};
+
+export type BaseModalState = {
+	isOpen: boolean;
+	chainId: number;
+	collectionAddress: Hex;
+	callbacks?: ModalCallbacks;
+};

package/src/react/ui/modals/modal-provider.tsx

@@ -0,0 +1,26 @@
+import { observer } from '@legendapp/state/react';
+import { BuyModal } from './BuyModal/Modal';
+import { CreateListingModal } from './CreateListingModal/Modal';
+import { MakeOfferModal } from './MakeOfferModal/Modal';
+import { SellModal } from './SellModal/Modal';
+import SuccessfulPurchaseModal from './SuccessfulPurchaseModal';
+import { TransferModal } from './TransferModal';
+import SwitchChainModal from './_internal/components/switchChainModal';
+import TransactionStatusModal from './_internal/components/transactionStatusModal';
+import { _accountModalOpen$ } from './_internal/stores/accountModal';
+
+export const ModalProvider = observer(() => {
+	return (
+		<>
+			<CreateListingModal />
+			<MakeOfferModal />
+			<TransferModal />
+			<SellModal />
+			<BuyModal />
+			<SuccessfulPurchaseModal />
+			{/* Helper modals */}
+			<SwitchChainModal />
+			<TransactionStatusModal />
+		</>
+	);
+});

package/src/types/api-types.ts

@@ -0,0 +1,47 @@
+export {
+	SortOrder,
+	PropertyType,
+	MarketplaceKind,
+	OrderbookKind,
+	SourceKind,
+	OrderSide,
+	OrderStatus,
+	ContractType,
+	CollectionStatus,
+	ProjectStatus,
+	CollectibleStatus,
+	WalletKind,
+	StepType,
+	TransactionCrypto,
+} from '../react/_internal';
+export type {
+	TokenMetadata,
+	Asset,
+	Page,
+	SortBy,
+	Filter,
+	Order,
+	PropertyFilter,
+	CollectiblesFilter,
+	FeeBreakdown,
+	CollectibleOrder,
+	OrderFilter,
+	Activity,
+	Collection,
+	CollectionConfig,
+	CollectionLastSynced,
+	Project,
+	Collectible,
+	Currency,
+	OrderData,
+	AdditionalFee,
+	Step,
+	PostRequest,
+	CreateReq,
+	GetOrdersInput,
+	Signature,
+	Domain,
+	CheckoutOptionsMarketplaceOrder,
+	CheckoutOptionsItem,
+	CheckoutOptions,
+} from '../react/_internal';

package/src/types/custom.d.ts

@@ -0,0 +1 @@
+declare module '*.png';

package/src/types/index.ts

@@ -0,0 +1,9 @@
+export * from './api-types';
+export * from './sdk-config';
+export * from './types';
+export type * from '../react/_internal/api/builder.gen';
+export type * from './../react/queries/marketplaceConfig';
+export {
+	MarketplaceWallet,
+	FilterCondition,
+} from '../react/_internal/api/builder.gen';

package/src/types/messages.ts

@@ -0,0 +1,43 @@
+type ApproveTokenMessageCallbacks = {
+	onSuccess?: () => void;
+	onUnknownError?: (error: Error | unknown) => void;
+};
+
+export type SwitchChainMessageCallbacks = {
+	onSuccess?: () => void;
+	onSwitchingNotSupported?: () => void;
+	onUserRejectedRequest?: () => void;
+	onUnknownError?: (error: Error | unknown) => void;
+};
+
+type MakeOfferMessageCallbacks = {
+	onSuccess?: () => void;
+	onUnknownError?: (error: Error | unknown) => void;
+};
+
+type CreateListingMessageCallbacks = {
+	onSuccess?: () => void;
+	onUnknownError?: (error: Error | unknown) => void;
+};
+
+type SellCollectibleMessageCallbacks = {
+	onSuccess?: () => void;
+	onUnknownError?: (error: Error | unknown) => void;
+};
+
+type TransferCollectiblesMessageCallbacks = {
+	onSuccess?: () => void;
+	onUnknownError?: (error: Error | unknown) => void;
+};
+
+export type Messages =
+	| {
+			approveToken?: ApproveTokenMessageCallbacks;
+			switchChain?: SwitchChainMessageCallbacks;
+
+			createListing?: CreateListingMessageCallbacks;
+			makeOffer?: MakeOfferMessageCallbacks;
+			sellCollectible?: SellCollectibleMessageCallbacks;
+			transferCollectibles?: TransferCollectiblesMessageCallbacks;
+	  }
+	| undefined;

package/src/types/sdk-config.ts

@@ -0,0 +1,20 @@
+import type { MarketplaceSettings } from '../react/_internal/api/builder.gen';
+
+export type Env = 'development' | 'next' | 'production';
+
+export type SdkConfig = {
+	projectAccessKey: string;
+	projectId: string;
+	walletConnectProjectId?: string;
+	_internal?: {
+		prefetchedMarketplaceSettings?: MarketplaceSettings;
+		devAccessKey?: string;
+		nextAccessKey?: string;
+		builderEnv?: Env;
+		marketplaceEnv?: Env;
+		nodeGatewayEnv?: Env;
+		metadataEnv?: Env;
+		indexerEnv?: Env;
+		sequenceWalletEnv?: Env;
+	};
+};

package/src/types/types.ts

@@ -0,0 +1,21 @@
+import type { Currency } from './api-types';
+
+export type Price = {
+	amountRaw: string;
+	currency: Currency;
+};
+
+export type MarketplaceType = 'market' | 'shop';
+
+export enum CollectibleCardAction {
+	BUY = 'Buy',
+	SELL = 'Sell',
+	LIST = 'Create listing',
+	OFFER = 'Make an offer',
+	TRANSFER = 'Transfer',
+}
+
+// export type Order = Omit<APIOrder, 'priceAmount' | 'priceAmountNet'> & {
+// 	priceAmount: bigint;
+// 	priceAmountNet: bigint;
+// };

package/src/types/waas-types.ts

@@ -0,0 +1,38 @@
+// TODO: Get these from the @0xsequence/connect package
+
+// Copied from @0xsequence/connect
+export type FeeOption = {
+	gasLimit: number;
+	to: string;
+	token: {
+		chainId: number;
+		contractAddress: string | null;
+		decimals: number;
+		logoURL: string;
+		name: string;
+		symbol: string;
+		tokenID: string | null;
+		type: string;
+	};
+	value: string;
+};
+
+export type FeeOptionExtended = FeeOption & {
+	/** Raw balance string */
+	balance: string;
+	/** Formatted balance with proper decimals */
+	balanceFormatted: string;
+	/** Indicates if the wallet has enough balance to pay the fee */
+	hasEnoughBalanceForFee: boolean;
+};
+/**
+ * Fee option confirmation data structure
+ */
+export type WaasFeeOptionConfirmation = {
+	/** Unique identifier for the fee confirmation */
+	id: string;
+	/** Available fee options with balance information */
+	options: FeeOptionExtended[] | FeeOption[];
+	/** Chain ID where the transaction will be executed */
+	chainId: number;
+};

package/src/utils/__tests__/address.test.ts

@@ -0,0 +1,65 @@
+import { describe, expect, test } from 'vitest';
+import { compareAddress, truncateEnd, truncateMiddle } from '../address';
+
+describe('address utils', () => {
+	describe('truncateMiddle', () => {
+		test('should truncate address with default parameters', () => {
+			const address = '0x1234567890123456789012345678901234567890';
+			const result = truncateMiddle(address);
+			expect(result).toBe('0x12345678901234567890…890');
+		});
+
+		test('should return full address if minPrefix + minSuffix >= 40', () => {
+			const address = '0x1234567890123456789012345678901234567890';
+			const result = truncateMiddle(address, 35, 6);
+			expect(result).toBe(address);
+		});
+
+		test('should truncate with custom prefix and suffix lengths', () => {
+			const address = '0x1234567890123456789012345678901234567890';
+			const result = truncateMiddle(address, 10, 5);
+			expect(result).toBe('0x1234567890…67890');
+		});
+	});
+
+	describe('truncateEnd', () => {
+		test('should return empty string for undefined input', () => {
+			expect(truncateEnd(undefined, 10)).toBe('');
+		});
+
+		test('should not truncate text shorter than truncateAt', () => {
+			const text = 'Short';
+			expect(truncateEnd(text, 10)).toBe('Short');
+		});
+
+		test('should truncate text longer than truncateAt', () => {
+			const text = 'This is a very long text';
+			expect(truncateEnd(text, 10)).toBe('This is a ...');
+		});
+
+		test('should truncate text equal to truncateAt', () => {
+			const text = '1234567890';
+			expect(truncateEnd(text, 10)).toBe('1234567890...');
+		});
+	});
+
+	describe('compareAddress', () => {
+		test('should return true for matching addresses with different cases', () => {
+			expect(compareAddress('0x1234567890abcdef', '0x1234567890ABCDEF')).toBe(
+				true,
+			);
+		});
+
+		test('should return false for different addresses', () => {
+			expect(compareAddress('0x1234567890abcdef', '0x1234567890abcdef1')).toBe(
+				false,
+			);
+		});
+
+		test('should handle undefined or empty inputs', () => {
+			expect(compareAddress()).toBe(true);
+			expect(compareAddress('', '')).toBe(true);
+			expect(compareAddress('0x123', '')).toBe(false);
+		});
+	});
+});

package/src/utils/__tests__/date.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, test } from 'vitest';
+import { dateToUnixTime } from '../date';
+
+describe('date utils', () => {
+	describe('dateToUnixTime', () => {
+		test('should convert date to unix timestamp string', () => {
+			const date = new Date('2024-01-01T00:00:00Z');
+			const result = dateToUnixTime(date);
+			expect(result).toBe('1704067200');
+		});
+
+		test('should handle current date', () => {
+			const now = new Date();
+			const result = dateToUnixTime(now);
+			const expectedTimestamp = Math.floor(now.getTime() / 1000).toString();
+			expect(result).toBe(expectedTimestamp);
+		});
+
+		test('should handle dates with milliseconds', () => {
+			const date = new Date('2024-01-01T00:00:00.999Z');
+			const result = dateToUnixTime(date);
+			expect(result).toBe('1704067200');
+		});
+
+		test('should handle dates before unix epoch', () => {
+			const date = new Date('1969-12-31T23:59:59Z');
+			const result = dateToUnixTime(date);
+			expect(result).toBe('-1');
+		});
+	});
+});

package/src/utils/__tests__/getMarketplaceDetails.test.ts

@@ -0,0 +1,134 @@
+import { describe, expect, test } from 'vitest';
+import {
+	MagicEdenLogo,
+	OpenSeaLogo,
+	SequenceLogo,
+} from '../../react/ui/components/marketplace-logos';
+import { MarketplaceKind } from '../../types';
+import { getMarketplaceDetails } from '../getMarketplaceDetails';
+
+describe('getMarketplaceDetails', () => {
+	describe('detection by marketplace kind', () => {
+		test('should detect Sequence marketplace v1', () => {
+			const result = getMarketplaceDetails({
+				originName: 'any',
+				kind: MarketplaceKind.sequence_marketplace_v1,
+			});
+			expect(result).toBeDefined();
+			expect(result?.logo).toBe(SequenceLogo);
+			expect(result?.displayName).toBe('Sequence');
+		});
+
+		test('should detect Sequence marketplace v2', () => {
+			const result = getMarketplaceDetails({
+				originName: 'any',
+				kind: MarketplaceKind.sequence_marketplace_v2,
+			});
+			expect(result).toBeDefined();
+			expect(result?.logo).toBe(SequenceLogo);
+			expect(result?.displayName).toBe('Sequence');
+		});
+
+		test('should detect OpenSea by kind', () => {
+			const result = getMarketplaceDetails({
+				originName: 'any',
+				kind: MarketplaceKind.opensea,
+			});
+			expect(result).toBeDefined();
+			expect(result?.logo).toBe(OpenSeaLogo);
+			expect(result?.displayName).toBe('OpenSea');
+		});
+	});
+
+	describe('detection by marketplace name', () => {
+		test('should detect OpenSea by name', () => {
+			const result = getMarketplaceDetails({
+				originName: 'opensea',
+				kind: MarketplaceKind.unknown,
+			});
+			expect(result).toBeDefined();
+			expect(result?.logo).toBe(OpenSeaLogo);
+			expect(result?.displayName).toBe('OpenSea');
+		});
+
+		test('should detect Magic Eden by name', () => {
+			const result = getMarketplaceDetails({
+				originName: 'magiceden',
+				kind: MarketplaceKind.unknown,
+			});
+			expect(result).toBeDefined();
+			expect(result?.logo).toBe(MagicEdenLogo);
+			expect(result?.displayName).toBe('Magic Eden');
+		});
+
+		test('should be case insensitive', () => {
+			const result = getMarketplaceDetails({
+				originName: 'OPENSEA',
+				kind: MarketplaceKind.unknown,
+			});
+			expect(result).toBeDefined();
+			expect(result?.logo).toBe(OpenSeaLogo);
+			expect(result?.displayName).toBe('OpenSea');
+		});
+
+		test('should handle spaces in name', () => {
+			const result = getMarketplaceDetails({
+				originName: 'magic eden',
+				kind: MarketplaceKind.unknown,
+			});
+			expect(result).toBeDefined();
+			expect(result?.logo).toBe(MagicEdenLogo);
+			expect(result?.displayName).toBe('Magic Eden');
+		});
+	});
+
+	describe('detection by URL', () => {
+		test('should detect marketplace from URL', () => {
+			const result = getMarketplaceDetails({
+				originName: 'https://opensea.io/assets/123',
+				kind: MarketplaceKind.unknown,
+			});
+			expect(result).toBeDefined();
+			expect(result?.logo).toBe(OpenSeaLogo);
+			expect(result?.displayName).toBe('OpenSea');
+		});
+
+		test('should handle www subdomain', () => {
+			const result = getMarketplaceDetails({
+				originName: 'https://www.opensea.io',
+				kind: MarketplaceKind.unknown,
+			});
+			expect(result).toBeDefined();
+			expect(result?.logo).toBe(OpenSeaLogo);
+			expect(result?.displayName).toBe('OpenSea');
+		});
+
+		test('should handle invalid URLs gracefully', () => {
+			const result = getMarketplaceDetails({
+				originName: 'not-a-url',
+				kind: MarketplaceKind.unknown,
+			});
+			expect(result).toBeUndefined();
+		});
+	});
+
+	describe('fallback behavior', () => {
+		test('should return undefined for unknown marketplace', () => {
+			const result = getMarketplaceDetails({
+				originName: 'unknown-marketplace',
+				kind: MarketplaceKind.unknown,
+			});
+			expect(result).toBeUndefined();
+		});
+
+		test('should prioritize kind over name for Sequence marketplaces', () => {
+			const result = getMarketplaceDetails({
+				originName: 'opensea',
+				kind: MarketplaceKind.sequence_marketplace_v1,
+			});
+			expect(result).toBeDefined();
+			expect(result?.logo).toBe(SequenceLogo);
+			expect(result?.displayName).toBe('Sequence');
+		});
+	});
+});

package/src/utils/__tests__/price.test.ts

@@ -0,0 +1,42 @@
+import { describe, expect, test } from 'vitest';
+import { calculatePriceDifferencePercentage } from '../price';
+
+describe('price utils', () => {
+	describe('calculatePriceDifferencePercentage', () => {
+		test('should calculate positive price difference percentage', () => {
+			const result = calculatePriceDifferencePercentage({
+				inputPriceRaw: BigInt(110000000), // 1.1
+				basePriceRaw: BigInt(100000000), // 1.0
+				decimals: 8,
+			});
+			expect(result).toBe('10.00');
+		});
+
+		test('should calculate negative price difference percentage', () => {
+			const result = calculatePriceDifferencePercentage({
+				inputPriceRaw: BigInt(90000000), // 0.9
+				basePriceRaw: BigInt(100000000), // 1.0
+				decimals: 8,
+			});
+			expect(result).toBe('-10.00');
+		});
+
+		test('should handle zero price difference', () => {
+			const result = calculatePriceDifferencePercentage({
+				inputPriceRaw: BigInt(100000000), // 1.0
+				basePriceRaw: BigInt(100000000), // 1.0
+				decimals: 8,
+			});
+			expect(result).toBe('0.00');
+		});
+
+		test('should handle different decimal places', () => {
+			const result = calculatePriceDifferencePercentage({
+				inputPriceRaw: BigInt(1200), // 1.2
+				basePriceRaw: BigInt(1000), // 1.0
+				decimals: 3,
+			});
+			expect(result).toBe('20.00');
+		});
+	});
+});