@0xsequence/marketplace-sdk 0.9.0 → 1.0.0

package/.storybook/ConnectionStatus.tsx

@@ -0,0 +1,289 @@
+'use client';
+
+import type React from 'react';
+import { useEffect, useState } from 'react';
+import { useAccount, useConnect, useDisconnect } from 'wagmi';
+import { useConnectorMetadata } from '../src/react/hooks/config/useConnectorMetadata';
+import { TEST_ACCOUNTS } from '../test/const';
+
+type ConnectorType = 'mock' | 'waas' | 'sequence' | 'auto';
+
+export const ConnectionStatus: React.FC = () => {
+	const {
+		connect,
+		connectors,
+		error: connectError,
+		isPending: isConnecting,
+	} = useConnect();
+	const { disconnect } = useDisconnect();
+	const {
+		isConnected: wagmiConnected,
+		address: walletAddress,
+		chainId: walletChainId,
+		isConnecting: isReconnecting,
+	} = useAccount();
+	const { isWaaS, walletKind } = useConnectorMetadata();
+	const [debugInfo, setDebugInfo] = useState<string>('');
+	const [preferredConnector, setPreferredConnector] =
+		useState<ConnectorType>('auto');
+	const [manuallyDisconnected, setManuallyDisconnected] =
+		useState<boolean>(false);
+
+	const walletLoading = isConnecting || isReconnecting;
+	const walletError = false; // wagmi handles errors differently
+
+	useEffect(() => {
+		const storedConnector = localStorage.getItem(
+			'storybook-connector',
+		) as ConnectorType;
+		const defaultConnector = storedConnector || 'auto';
+		setPreferredConnector(defaultConnector);
+	}, []);
+
+	useEffect(() => {
+		if (preferredConnector !== 'auto') {
+			localStorage.setItem('storybook-connector', preferredConnector);
+		}
+	}, [preferredConnector]);
+
+	useEffect(() => {
+		if (wagmiConnected) {
+			setManuallyDisconnected(false);
+		}
+	}, [wagmiConnected]);
+
+	useEffect(() => {
+		if (connectors.length > 0) {
+			const connectorInfo = connectors
+				.map((c) => `${c.name || 'unnamed'} (${c.id || 'no-id'})`)
+				.join(', ');
+			setDebugInfo(`Available: ${connectorInfo}`);
+		}
+
+		// Only try to connect if not connected and not connecting and not manually disconnected
+		if (
+			!wagmiConnected &&
+			!isConnecting &&
+			!manuallyDisconnected &&
+			connectors.length > 0
+		) {
+			let targetConnector: (typeof connectors)[0] | undefined;
+
+			if (preferredConnector === 'auto') {
+				targetConnector = connectors[0];
+			} else {
+				targetConnector = connectors.find((c) => c.id === preferredConnector);
+
+				// Fallback to any connector with the preferred type in name
+				if (!targetConnector) {
+					targetConnector = connectors.find(
+						(c) =>
+							c.name?.toLowerCase().includes(preferredConnector) ||
+							c.id?.toLowerCase().includes(preferredConnector),
+					);
+				}
+			}
+
+			// Final fallback to first available connector
+			if (!targetConnector && connectors.length > 0) {
+				targetConnector = connectors[0];
+			}
+
+			if (targetConnector) {
+				console.log(
+					`Auto-connecting to ${preferredConnector} connector:`,
+					targetConnector.name || 'unnamed',
+					targetConnector.id || 'no-id',
+				);
+				try {
+					connect({ connector: targetConnector });
+				} catch (error) {
+					console.error('Failed to connect to connector:', error);
+					setDebugInfo(
+						`Connection failed: ${error instanceof Error ? error.message : 'Unknown error'}`,
+					);
+				}
+			}
+		}
+	}, [
+		wagmiConnected,
+		isConnecting,
+		manuallyDisconnected,
+		connectors,
+		connect,
+		preferredConnector,
+	]);
+
+	const getConnectionStatus = () => {
+		if (isConnecting || walletLoading) {
+			return { status: 'Connecting to Anvil...', color: '#f59e0b' };
+		}
+
+		if (walletAddress && wagmiConnected) {
+			const accountIndex = TEST_ACCOUNTS.findIndex(
+				(acc) => acc.toLowerCase() === walletAddress.toLowerCase(),
+			);
+			const accountLabel =
+				accountIndex >= 0 ? `Account ${accountIndex}` : 'Custom';
+
+			return {
+				status: `${walletAddress.slice(0, 6)}...${walletAddress.slice(-4)} (${accountLabel})`,
+				color: '#10b981',
+			};
+		}
+
+		if (walletError || connectError) {
+			return {
+				status: `Error: ${connectError?.message || 'Connection failed'}`,
+				color: '#ef4444',
+			};
+		}
+
+		return { status: 'Disconnected from Anvil', color: '#ef4444' };
+	};
+
+	const { status, color } = getConnectionStatus();
+
+	const getWalletInfo = () => {
+		if (!wagmiConnected) return null;
+
+		const walletType = isWaaS ? 'WaaS' : 'External';
+		const kind = walletKind || 'Unknown';
+		return `${walletType} (${kind})`;
+	};
+
+	const getAnvilInfo = () => {
+		if (!walletChainId && !wagmiConnected) return null;
+
+		const displayChainId = walletChainId || 'Unknown';
+		return `Anvil Chain: ${displayChainId}`;
+	};
+
+	const handleConnectorChange = (newConnector: ConnectorType) => {
+		setPreferredConnector(newConnector);
+		setManuallyDisconnected(false);
+		if (wagmiConnected) {
+			disconnect();
+		}
+	};
+
+	const handleDisconnect = () => {
+		setManuallyDisconnected(true);
+		disconnect();
+	};
+
+	return (
+		<div
+			style={{
+				position: 'fixed',
+				top: '16px',
+				right: '16px',
+				zIndex: 9999,
+				backgroundColor: '#1f2937',
+				color: 'white',
+				padding: '8px 12px',
+				borderRadius: '8px',
+				fontSize: '12px',
+				fontFamily: 'monospace',
+				border: `2px solid ${color}`,
+				boxShadow: '0 4px 6px rgba(0, 0, 0, 0.1)',
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'flex-start',
+				gap: '4px',
+				maxWidth: '320px',
+			}}
+		>
+			<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+				<div
+					style={{
+						width: '8px',
+						height: '8px',
+						borderRadius: '50%',
+						backgroundColor: color,
+					}}
+				/>
+				<span>{status}</span>
+			</div>
+
+			<div
+				style={{
+					display: 'flex',
+					alignItems: 'center',
+					gap: '8px',
+					width: '100%',
+				}}
+			>
+				<span style={{ fontSize: '10px', color: '#9ca3af' }}>Connector:</span>
+				<select
+					value={preferredConnector}
+					onChange={(e) =>
+						handleConnectorChange(e.target.value as ConnectorType)
+					}
+					style={{
+						background: '#374151',
+						color: 'white',
+						border: '1px solid #4b5563',
+						borderRadius: '4px',
+						fontSize: '10px',
+						padding: '2px 4px',
+						flex: 1,
+					}}
+				>
+					<option value="auto">Auto</option>
+					<option value="mock">Mock</option>
+					<option value="waas">WaaS</option>
+					<option value="sequence">Sequence</option>
+				</select>
+			</div>
+
+			{wagmiConnected && (
+				<button
+					type="button"
+					onClick={handleDisconnect}
+					style={{
+						background: '#dc2626',
+						color: 'white',
+						border: 'none',
+						borderRadius: '4px',
+						fontSize: '10px',
+						padding: '4px 8px',
+						cursor: 'pointer',
+						width: '100%',
+						marginTop: '4px',
+					}}
+				>
+					Disconnect
+				</button>
+			)}
+
+			{getWalletInfo() && (
+				<div style={{ fontSize: '10px', color: '#9ca3af' }}>
+					Type: {getWalletInfo()}
+				</div>
+			)}
+
+			{getAnvilInfo() && (
+				<div style={{ fontSize: '10px', color: '#9ca3af' }}>
+					{getAnvilInfo()}
+				</div>
+			)}
+
+			{debugInfo && (
+				<div style={{ fontSize: '10px', color: '#9ca3af' }}>{debugInfo}</div>
+			)}
+
+			{(walletError || connectError) && (
+				<div
+					style={{
+						fontSize: '10px',
+						color: '#ef4444',
+						wordBreak: 'break-word',
+					}}
+				>
+					{connectError?.message || 'Wallet connection failed'}
+				</div>
+			)}
+		</div>
+	);
+};

package/.storybook/main.ts

@@ -0,0 +1,82 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+import tailwindcssPostcss from '@tailwindcss/postcss';
+import path from 'path';
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+	addons: [
+		'@storybook/addon-docs',
+		'@storybook/addon-vitest',
+		'msw-storybook-addon',
+	],
+	framework: {
+		name: '@storybook/react-vite',
+		options: {},
+	},
+	staticDirs: ['../public'],
+	typescript: {
+		reactDocgen: 'react-docgen-typescript',
+		reactDocgenTypescriptOptions: {
+			shouldExtractLiteralValuesFromEnum: true,
+			shouldRemoveUndefinedFromOptional: true,
+			propFilter: (prop) => {
+				// Exclude props from generated files
+				if (prop.parent?.fileName.includes('.gen.ts')) {
+					return false;
+				}
+				// Exclude props from node_modules except for specific packages
+				if (prop.parent?.fileName.includes('node_modules')) {
+					return false;
+				}
+				return true;
+			},
+		},
+	},
+	async viteFinal(config) {
+		// Configure PostCSS for Tailwind CSS v4
+		config.css = config.css || {};
+		config.css.postcss = {
+			plugins: [tailwindcssPostcss()],
+		};
+
+		// Set unique cache directory to prevent conflicts
+		config.cacheDir = path.join(
+			__dirname,
+			'../node_modules/.vite-storybook-sdk',
+		);
+
+		// Configure path aliases to match tsconfig.json
+		config.resolve = config.resolve || {};
+		config.resolve.alias = {
+			...config.resolve.alias,
+			'@test': path.resolve(__dirname, '../test'),
+		};
+
+		// Exclude generated files from react-docgen processing
+		if (config.plugins) {
+			for (const plugin of config.plugins) {
+				if (
+					plugin &&
+					typeof plugin === 'object' &&
+					'name' in plugin &&
+					plugin.name === 'storybook:react-docgen-plugin'
+				) {
+					const originalTransform = plugin.transform;
+					if (typeof originalTransform === 'function') {
+						plugin.transform = async function (code: string, id: string) {
+							// Skip generated files
+							if (id.includes('.gen.ts') || id.includes('_internal/api/')) {
+								return;
+							}
+							return originalTransform.call(this, code, id);
+						};
+					}
+					break;
+				}
+			}
+		}
+
+		return config;
+	},
+};
+export default config;

package/.storybook/preview.tsx

@@ -0,0 +1,106 @@
+import { SequenceConnectProvider } from '@0xsequence/connect';
+import type { Preview } from '@storybook/react-vite';
+import { QueryClientProvider } from '@tanstack/react-query';
+
+import React from 'react';
+import { WagmiProvider } from 'wagmi';
+import { MarketplaceProvider } from '../src/react/provider';
+import { ModalProvider } from '../src/react/ui/modals/modal-provider';
+import '../src/index.css';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+import {
+	createTestQueryClient,
+	sequenceConnectConfig,
+	wagmiConfig,
+	wagmiConfigEmbedded,
+	wagmiConfigSequence,
+} from '../test/test-utils';
+import { ConnectionStatus } from './ConnectionStatus';
+
+const testQueryClient = createTestQueryClient();
+
+// Initialize MSW
+initialize({
+	onUnhandledRequest: ({ url, method }) => {
+		// Only warn about unhandled requests to our specific API paths
+		const pathname = new URL(url).pathname;
+		if (pathname.startsWith('/rpc/')) {
+			console.warn(`Unhandled ${method} request to ${url}.`);
+		}
+		// Bypass all other requests (fonts, static assets, etc.)
+	},
+});
+
+// Mock marketplace SDK config for Storybook
+const mockSdkConfig = {
+	projectAccessKey: 'storybook-test-key',
+	projectId: '1',
+};
+
+// Get wagmi config based on localStorage
+const getWagmiConfig = () => {
+	if (typeof window === 'undefined') {
+		return wagmiConfig; // Default for SSR
+	}
+
+	const storedConnector = localStorage.getItem('storybook-connector');
+	const connectorType = storedConnector || 'auto';
+
+	switch (connectorType) {
+		case 'waas':
+			console.log('Using WaaS connector configuration');
+			return wagmiConfigEmbedded;
+		case 'sequence':
+			console.log('Using Sequence connector configuration');
+			return wagmiConfigSequence;
+		default:
+			console.log('Using standard mock connector configuration');
+			return wagmiConfig;
+	}
+};
+
+const preview: Preview = {
+	parameters: {
+		backgrounds: {
+			options: {
+				dark: { name: 'Dark', value: '#333' },
+				light: { name: 'Light', value: '#F7F9F2' },
+			},
+		},
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+	initialGlobals: {
+		backgrounds: { value: 'dark' },
+	},
+	loaders: [mswLoader],
+	decorators: [
+		(Story) => {
+			const currentWagmiConfig = getWagmiConfig();
+
+			return (
+				<WagmiProvider config={currentWagmiConfig}>
+					<QueryClientProvider client={testQueryClient}>
+						<SequenceConnectProvider
+							config={sequenceConnectConfig.connectConfig}
+						>
+							<MarketplaceProvider config={mockSdkConfig}>
+								<ConnectionStatus />
+								<div style={{ padding: '1rem', minHeight: '100vh' }}>
+									<Story />
+								</div>
+								<ModalProvider />
+							</MarketplaceProvider>
+						</SequenceConnectProvider>
+					</QueryClientProvider>
+				</WagmiProvider>
+			);
+		},
+	],
+};
+
+export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,6 @@
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([projectAnnotations]);

package/CHANGELOG.md

@@ -1,5 +1,128 @@
 # @0xsequence/marketplace-sdk
 
+## 1.0.0
+
+🎉 **Production Release** - Sequence Marketplace SDK 1.0! 🎉
+
+#### Complete Marketplace Solution
+- **Primary Sales (Shop)**: Full support for Sequence sales contracts (ERC721 v0 and ERC1155 v0 and v1)
+- **Secondary Sales (Market)**: Comprehensive listing and offer management
+
+### 🚀 New features
+- Support for Sequence sales contracts (ERC721 v0 and ERC1155 v0 and v1)
+- **New `useProcessStep` hook**: For transaction marketplace api transaction step handling
+- **New buy checkout flow UI**: New checkout flow for buying collectibles, from @0xsequence/checkout
+- Custom wallet class replaced with wagmi hooks and new hooks for wallet operations (useEnsureCorrectChain,  useConnectorMetadata, useProcessStep), see breaking changes below
+- All fetching hooks now have a separated query function that can be used with other data fetching libraries or SSR/SSG frameworks
+- All fetching hooks only fetch data when all required parameters are provided
+- Modal style isolation with shadow DOM, preventing global styles from leaking into the document body
+- useSearchTokenMetadata now have an option to only return token metadata for minted tokens `onlyMinted: true`
+- MarketplaceConfig is by now by default never invalidated, allow fetching only serverside
+
+- **UI/UX Improvements**:
+  - Added optional action buttons to buy flow success modal
+  - Fixed ERC1155 quantity modal decimal precision handling
+  - Fixed collectible card image opacity issues
+  - Improved media display with object-contain for collectible cards
+
+### ⚠️ Breaking Changes
+By default, the SDK now uses shadow DOM for all modals. To disable this, you can set the `useShadowDOM` flag to `false` in the `SdkConfig`. Other components (media, collectible card etc) are rendered to the document body and requires Tailwind.
+`useShopCollectibleSaleData` hook has been removed. Instead, use `useErc721SaleDetails` and `useErc1155SaleDetails` hooks leveraging marketplace-api
+- **Wallet**: Complete removal of custom wallet client in favor of wagmi hooks
+  - Replace `wallet.address` with `useAccount()` hook from wagmi
+  - Replace `wallet.isWaaS` with `useConnectorMetadata().isWaaS`
+  - Replace `wallet.kind` with `useConnectorMetadata().walletKind`
+  - Replace `wallet.switchChain` with `useEnsureCorrectChain` hook
+  - Replace `wallet.signTransactionStep` and `wallet.transferStep` with `useProcessStep` hook
+
+
+### 🐛 Bug Fixes
+- Fixed ERC1155 quantity modal decimal handling with proper min/max calculations
+- Fixed pagination issues with minted ERC721 sale tokens
+- Resolved potential state management race conditions in action modals
+- Fixed decimal handling in quantity inputs
+- Fixed collectible card image opacity issues
+- Fixed ERC721 sale contract quantity tracking for V1 contracts
+- Fixed negative remaining supply display in shop cards
+- Improved error handling when quantity values are 0
+- Fixed token approval reset when transaction steps don't exist
+- Auto fee selection for embedded wallets bug fix, now only applies for cancelling orders
+
+
+### 🔧 Internal Improvements
+
+#### Code Organization
+- Reorganized hooks into logical subdirectories (data, transactions, ui, config)
+- Removed duplicate hooks and consolidated functionality
+- Increased test coverage
+- Some internal hooks have been renamed for consistency
+
+
+## 0.10.0
+
+### New Features
+
+**Alternative Wallet integration Support**
+- Added support for using any wallet connection library (e.g., Privy, Rainbowkit, Dynamic Labs etc.) instead of Sequence Connect
+- You can now provide a custom `openConnectModal` function to the `MarketplaceProvider` to integrate with your preferred wallet connection flow.
+
+
+Example with any wallet provider:
+```tsx
+import { MarketplaceProvider } from '@0xsequence/marketplace-sdk/react';
+import { useConnectModal } from '@my-wallet-provider/connect-modal';
+
+function App() {
+  const { openConnectModal } = useConnectModal();
+  
+  return (
+    <MarketplaceProvider 
+      config={sdkConfig} 
+      openConnectModal={openConnectModal}
+    >
+      {/* Your marketplace app */}
+    </MarketplaceProvider>
+  );
+}
+```
+
+See the [Alternative Wallet Integration Playground](https://github.com/0xsequence/marketplace-sdk/tree/master/playgrounds/alternative-wallets) for a complete example with Dynamic Labs 
+
+**Enhanced Media Component**
+- Added `shouldListenForLoad` prop for controlling asset load event handling
+- Introduced `mediaClassName` prop for controlling the inner media element
+- Improved asset loading behavior with conditional handling
+
+**Shop & Market Improvements**
+- Added `ShopActions` component for handling collectible purchase interactions
+- Enhanced `CollectibleDetails` to conditionally display information based on marketplace type
+- Improved ERC1155 sale item handling - buy button now hidden when out of stock
+- Added support for unlimited supply display in shop components
+
+### API Updates
+
+**New Hooks & Queries**
+- `useGetCountOfPrimarySaleItems` - Now uses `useQuery` instead of `useInfiniteQuery`
+- Added `contractAddress` parameter to `TokenBalancesParams` for more precise balance queries
+
+**Analytics & Tracking**
+- Enhanced buy modal tracking to track cart abandonment
+
+### Developer Experience
+
+**Testing & Documentation**
+- Expanded test coverage for critical components
+- Added JSDoc documentation improvements
+
+**Build & Configuration**
+- Fixed SSR issues with React Day Picker in React-Router V7
+
+### Bug Fixes
+
+- Fixed ERC1155 quantity modal to use `maxUint256` for infinity value
+- Resolved React state update issues in various components
+- Fixed missing contract type errors
+
 ## 0.9.0
 
 ### Patch Changes
@@ -7,47 +130,51 @@
 **⚠️ Breaking Changes **
 
 **Hook Parameter Type Updates**
+
 - Updated hook parameter types for consistency:
-  - `useCollection`: `UseCollectionArgs` → `UseCollectionParams`  
+  - `useCollection`: `UseCollectionArgs` → `UseCollectionParams`
   - `useHighestOffer`: `UseHighestOfferArgs` → `UseHighestOfferParams`
   - `useLowestListing`: `UseLowestListingArgs` → `UseLowestListingParams`
   - `useFloorOrder`: `UseFloorOrderArgs` → `UseFloorOrderParams`
 
 **Count Hook Return Types**
+
 - All count hooks now consistently return `number` instead of `{ count: number }`
 - Affected hooks: `useCountListingsForCollectible`, `useCountOffersForCollectible`, `useCountOfCollectables`
 - Migration: Replace `data?.count` with `data` directly
 
-
 **Shop Integration & Primary Sales Enhancements**
+
 - Enhanced shop integration with improved primary sales support
 - Added `useCountOfPrimarySaleItems` hook for returning the total number of primary sale items
 - Added `useGetTokenRanges` hook for fetching token ID ranges from indexer
 - Improved 721 and 1155 sale controls with better quantity tracking
 
 **Hook System Overhaul**
+
 - Migrated 20+ hooks to new consistent fetching pattern
-- Exported all fetching function in a separate file, allowing them to be used with other loaders and during prerendering (SSR) 
+- Exported all fetching function in a separate file, allowing them to be used with other loaders and during prerendering (SSR)
 - Added comprehensive JSDoc documentation with usage examples
 - Enhanced TypeScript types and parameter validation across all hooks
 - Improved error handling and query optimization
 - Added support for most react query options https://tanstack.com/query/latest/docs/framework/react/reference/useQuery
 
-**API & Configuration Updates**  
+**API & Configuration Updates**
+
 - Support for granular service environment configurations with manual URL overrides
 
 **UI/UX Enhancements**
+
 - Fixed Safari detection in Media component for better SSR compatibility
-- Improved loading states across all components  
+- Improved loading states across all components
 - Enhanced collectible card rendering for both minted and unminted items
 
-
 **Misc**
+
 - Fixed grayed-out media display in collectible cards
 - Upgraded all dependencies to latest versions
 - Extensive code cleanup: removed unused exports, comments, and TODOs
 
-
 ### Patch Changes
 
 ## 0.8.12
@@ -365,4 +492,4 @@ SSR config do not require passing query client anymore, and leverages an interna
 
 ### Minor Changes
 
-- Buy flow cleanup, various fixes
+- Buy flow cleanup, various fixes