@0xsequence/marketplace-sdk 1.2.0 → 2.0.0

package/.storybook/preview.tsx

@@ -3,9 +3,9 @@ import type { Preview } from '@storybook/react-vite';
 import { QueryClientProvider } from '@tanstack/react-query';
 
 import { WagmiProvider } from 'wagmi';
-import { MarketplaceProvider } from '../src/react/provider';
-import { ModalProvider } from '../src/react/ui/modals/modal-provider';
-import '../src/index.css';
+import { MarketplaceProvider } from '../src/react/providers';
+import { ModalProvider } from '../src/react/providers/modal-provider';
+import '../src/styles/index.css';
 import { initialize, mswLoader } from 'msw-storybook-addon';
 import {
 	createTestQueryClient,
@@ -18,7 +18,6 @@ import { ConnectionStatus } from './ConnectionStatus';
 
 const testQueryClient = createTestQueryClient();
 
-// Initialize MSW
 initialize({
 	onUnhandledRequest: ({ url, method }) => {
 		// Only warn about unhandled requests to our specific API paths
@@ -30,16 +29,14 @@ initialize({
 	},
 });
 
-// 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
+		return wagmiConfig;
 	}
 
 	const storedConnector = localStorage.getItem('storybook-connector');

package/CHANGELOG.md

@@ -1,11 +1,202 @@
 # @0xsequence/marketplace-sdk
 
+## 2.0.0
+
+### Major Release
+
+This release introduces first-class support for **Trails**, complete **headless mode** for all modals, and a modernized type system with **BigInt and viem compatibility**.
+
+---
+
+## Trails Integration - 1-Click Checkout
+
+[Trails](https://trails.build) is now the **default checkout mode**, enabling seamless 1-click purchases across any chain, with any token, from any wallet.
+
+
+```typescript
+<MarketplaceProvider config={{
+  projectAccessKey: 'your-key',
+  projectId: 'your-project-id',
+  // checkoutMode: 'trails' is the default
+}}>
+```
+
+| Checkout Mode                            | Description                                             |
+|------------------------------------------|---------------------------------------------------------|
+| `'trails'`                               | **Default** - 1-click checkout with cross-chain support |
+| `'crypto'`                               | Direct on-chain payment in the listing currency         |
+| `{ mode: 'sequence-checkout', options }` | Sequence Checkout with custom options                   |
+
+---
+
+## Complete Headless Mode
+
+All modal components now export their internal context hooks and types for fully custom UI implementations. See the [headless playground](https://github.com/0xsequence/marketplace-sdk/tree/master/playgrounds/headless) for a complete example.
+
+```typescript
+import {
+  // Context hooks (NEW)
+  useBuyModalContext,
+  useCreateListingModalContext,
+  useMakeOfferModalContext,
+  useSellModalContext,
+  useTransferModalContext,
+
+  // Context types (NEW)
+  type BuyModalContext,
+  type CreateListingModalContext,
+  type MakeOfferModalContext,
+  type SellModalContext,
+  type TransferModalContext,
+} from '@0xsequence/marketplace-sdk/react';
+```
+
+---
+
+## Modern Type System - BigInt & Viem Compatible
+
+All SDK types now use `bigint` primitives and are fully compatible with viem types:
+
+| Property                 | Before (v1.x)      | After (v2.0)   |
+|--------------------------|--------------------|----------------|
+| `tokenId`                | `string`           | `bigint`       |
+| `amount` / `priceAmount` | `string`           | `bigint`       |
+| `quantity`               | `string \| number` | `bigint`       |
+| `Address`                | `string`           | viem `Address` |
+| `Hex`                    | `string`           | viem `Hex`     |
+
+## Breaking Changes
+
+### Type Changes (Migration Required)
+
+- `tokenId`, `amount`, `quantity` now use `bigint` instead of `string`
+- Address types now use viem's `Address` type
+
+### Removed APIs
+
+| Removed                           | Notes                                      |
+|-----------------------------------|--------------------------------------------|
+| `useListCollectionActivities`     | Activities API removed                     |
+| `useListCollectibleActivities`    | Activities API removed                     |
+| `onSuccess` / `onError` callbacks | Use React query for network errors         |
+
+### Hook Changes
+
+| Hook          | Change                                                  |
+|---------------|---------------------------------------------------------|
+| Count hooks   | Return `number` directly instead of `{ count: number }` |
+
+---
+
+## New Features
+
+### New Hooks
+
+- `useERC721Owner` - Read ERC721 token owner address
+
+### New Utilities
+
+- `processProperties` / `processAttributes` - Normalize NFT metadata into standardized format
+
+---
+
+## Enhanced Error Handling
+
+Modal error handling has been significantly improved with better user feedback and recovery options:
+
+- **Modals** - Added extensive error handling with retry options
+- **Headless mode** - Added error boundaries and accessible error recovery patterns
+
+```typescript
+const ctx = useBuyModalContext();
+
+// New error handling properties
+if (ctx.error) {
+  return <ErrorDisplay error={ctx.error} onRetry={ctx.refetchAll} />;
+}
+```
+
+---
+
+## Callback Removal (Breaking Change)
+
+All modal hooks no longer accept `onSuccess` / `onError` callback parameters. Modals now handle errors internally with improved user feedback and recovery options.
+
+If you need to surface network errors to your application, use React Query's global error handling via `QueryCache` callbacks. See the [TanStack Query documentation](https://tanstack.com/query/latest/docs/framework/react/guides/query-options#global-callbacks) for details.
+
+The new context hooks (see [Complete Headless Mode](#complete-headless-mode)) provide full access to modal state for custom UI implementations.
+
+**Affected modals:**
+
+| Removed Callbacks From   | New Context Hook (v2.0)          |
+|--------------------------|----------------------------------|
+| `useBuyModal`            | `useBuyModalContext()`           |
+| `useCreateListingModal`  | `useCreateListingModalContext()` |
+| `useMakeOfferModal`      | `useMakeOfferModalContext()`     |
+| `useSellModal`           | `useSellModalContext()`          |
+| `useTransferModal`       | `useTransferModalContext()`      |
+
+
+**Before (v1.x):**
+
+```typescript
+const { openBuyModal } = useBuyModal({
+  onSuccess: (txHash) => console.log('Purchased!', txHash),
+  onError: (err) => console.error(err),
+});
+```
+
+**After (v2.0):**
+
+```typescript
+const { openBuyModal } = useBuyModal();
+const ctx = useBuyModalContext(); // NEW - provides full modal state access
+
+// Handle states in your UI
+if (ctx.isLoading) {
+  // Show loading state
+}
+if (ctx.error) {
+  // Show error state with ctx.refetchAll for retry
+}
+```
+
+---
+
+## Internal Improvements
+
+- Upgraded dependencies: wagmi, @tanstack/react-query, nuqs
+- Updated Trails SDK to v0.9.5
+- Added comprehensive test coverage for transaction hooks
+- Improved TypeScript type inference
+
+---
+## 1.2.1
+
+### Patch Changes
+
+
+## 1.2.1
+
+### ✨ Improvements
+
+- **MetaMask Connector Support**: Added native MetaMask connector support, can be enabled from Sequence Builder, useful for environments that do not support walletDiscovery (EIP-6963)
+- **Transfer Modal Prefetching**: `useTransferModal` now supports prefetching balances based on collectible details via the new `prefetch` option
+- **ERC1155 Shop Checkout Refactor**: Major refactor of the ERC1155 shop checkout flow to improve error handling and loading states
+
+
+### 🔧 Internal Improvements
+
+- Upgraded Sequence packages and workspace dependencies to latest versions
+- Disabled flanky filename hash generation in tsdown build config
+- Updated and expanded test coverage for ERC1155 sale payment
+
 ## 1.2.0
 
 ### Minor Changes
 
 - ## ✨ New Features & Improvements
-o
+
   - Integrated with web-sdk's 5.4 new Transak implementation to support updated Transak API requirements
   - Added `useCollectionActiveListingsCurrencies` and `useCollectionActiveOffersCurrencies` hooks for fetching active currencies used in offer/listings
   - Added `useGetPrimarySaleItem` hook and query for fetching individual primary sale items

package/compile-tailwind.js

@@ -31,7 +31,7 @@ export async function generateStyles(options = {}) {
 		const css = `/* Modified Tailwind CSS, to avoid issues with shadow DOM, see Marketplace SDK - compile-tailwind.js and postcss.config.mjs */
 ${result.css}`;
 
-		const tsContent = `export const styles = String.raw\`${css}\`;`;
+		const tsContent = `export const styles = String.raw\`${css}\`;\n`;
 
 		await fs.writeFile(outputTSPath, tsContent);
 

package/dist/BellIcon.js

@@ -0,0 +1,48 @@
+'use client'
+
+import { c as cn } from "./utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+
+//#region src/react/ui/icons/iconVariants.ts
+const iconVariants = cva("block shrink-0", {
+	variants: { size: {
+		xxs: "w-3 h-3",
+		xs: "w-4 h-4",
+		sm: "w-5 h-5",
+		md: "w-6 h-6",
+		lg: "w-7 h-7",
+		xl: "w-9 h-9"
+	} },
+	defaultVariants: { size: "md" }
+});
+
+//#endregion
+//#region src/react/ui/icons/BellIcon.tsx
+const Svg = (props) => /* @__PURE__ */ jsxs("svg", {
+	className: "h-17 w-17",
+	viewBox: "0 0 17 17",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	role: "img",
+	"aria-labelledby": "bell-title",
+	...props,
+	children: [/* @__PURE__ */ jsx("title", {
+		id: "bell-title",
+		children: "Notification Bell"
+	}), /* @__PURE__ */ jsx("path", {
+		fillRule: "evenodd",
+		clipRule: "evenodd",
+		d: "M12.3127 7.45705V9.74274C12.3127 10.3805 12.6293 10.6971 12.9647 11.0326L12.9652 11.033L12.9679 11.0358C13.3205 11.3893 13.6843 11.754 13.6843 12.4854C13.6843 12.5491 13.6335 12.5998 13.57 12.5998H3.51277C3.44959 12.5998 3.39844 12.5489 3.39844 12.4854C3.39844 11.7539 3.76242 11.389 4.11507 11.0354L4.11754 11.033C4.45305 10.6975 4.76984 10.3807 4.76984 9.74245V7.45676C4.76984 5.6932 5.98854 4.21248 7.62704 3.802V3.11399C7.62704 2.60926 8.03659 2.19971 8.54132 2.19971C9.04606 2.19971 9.45561 2.60926 9.45561 3.11399V3.802C11.094 4.21286 12.3127 5.69335 12.3127 7.45705ZM10.3698 13.1711C10.3698 14.1809 9.55099 14.9997 8.54121 14.9997C7.53128 14.9997 6.71272 14.181 6.71272 13.1711H10.3698ZM8.758 7.70501C9.30005 7.85574 9.6696 7.99832 9.86302 8.13224C10.1776 8.35015 10.3374 8.67657 10.338 9.106C10.338 9.7284 10.1359 10.1706 9.72956 10.4326C9.50571 10.5778 9.18295 10.6723 8.75846 10.7195V11.4005H8.42657V10.7195C7.74604 10.6746 7.28244 10.4349 7.04094 9.99812C6.90703 9.76157 6.83984 9.44246 6.83984 9.04019H7.46277C7.48004 9.35983 7.53041 9.59501 7.6135 9.74163C7.75837 10.0063 8.0303 10.1548 8.42664 10.1861V8.27703C7.9177 8.18078 7.54357 8.01963 7.30116 7.79532C7.0605 7.57102 6.93929 7.25914 6.93929 6.86234C6.93929 6.50686 7.06917 6.18768 7.32977 5.90212C7.58991 5.61657 7.95581 5.47132 8.42619 5.46675V5.00049H8.75808V5.45861C9.22343 5.4927 9.58119 5.62981 9.82863 5.87039C10.0787 6.11144 10.2086 6.43062 10.2204 6.82651H9.60569C9.5907 6.64899 9.54299 6.49507 9.4631 6.36884C9.31595 6.13183 9.08076 6.00697 8.758 5.99518V7.70501ZM7.80143 7.36315C7.95574 7.49478 8.16369 7.58608 8.42611 7.63691L8.42619 5.98886C8.11651 5.99936 7.89723 6.09424 7.76651 6.2681C7.63572 6.4447 7.57036 6.62815 7.57036 6.82019C7.57036 7.05081 7.64705 7.23289 7.80143 7.36315ZM8.75747 10.2033C9.15883 10.1847 9.43305 10.0394 9.58606 9.76522C9.66504 9.62408 9.70415 9.46285 9.70399 9.27948C9.70399 8.98624 9.59686 8.76376 9.38123 8.61121C9.2582 8.52219 9.05079 8.4391 8.75747 8.35921V10.2033Z",
+		fill: "white"
+	})]
+});
+const SvgBellIcon = ({ className, size = "md", ...props }) => /* @__PURE__ */ jsx(Svg, {
+	className: cn(iconVariants({ size: size || "md" }), className),
+	...props
+});
+var BellIcon_default = SvgBellIcon;
+
+//#endregion
+export { BellIcon_default as t };
+//# sourceMappingURL=BellIcon.js.map

package/dist/BellIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"BellIcon.js","names":[],"sources":["../src/react/ui/icons/iconVariants.ts","../src/react/ui/icons/BellIcon.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\n\nexport type IconSize =\n\t| 'xxs'\n\t| 'xs'\n\t| 'sm'\n\t| 'md'\n\t| 'lg'\n\t| 'xl'\n\t| null\n\t| undefined;\n\nexport const iconVariants = cva('block shrink-0', {\n\tvariants: {\n\t\tsize: {\n\t\t\txxs: 'w-3 h-3',\n\t\t\txs: 'w-4 h-4',\n\t\t\tsm: 'w-5 h-5',\n\t\t\tmd: 'w-6 h-6',\n\t\t\tlg: 'w-7 h-7',\n\t\t\txl: 'w-9 h-9',\n\t\t},\n\t},\n\tdefaultVariants: {\n\t\tsize: 'md',\n\t},\n});\n","'use client';\n\nimport type { IconProps } from '@0xsequence/design-system';\nimport type { SVGProps } from 'react';\nimport { cn } from '../../../utils';\nimport { type IconSize, iconVariants } from './iconVariants';\n\nconst Svg = (props: SVGProps<SVGSVGElement>) => (\n\t<svg\n\t\tclassName=\"h-17 w-17\"\n\t\tviewBox=\"0 0 17 17\"\n\t\tfill=\"none\"\n\t\txmlns=\"http://www.w3.org/2000/svg\"\n\t\trole=\"img\"\n\t\taria-labelledby=\"bell-title\"\n\t\t{...props}\n\t>\n\t\t<title id=\"bell-title\">Notification Bell</title>\n\t\t<path\n\t\t\tfillRule=\"evenodd\"\n\t\t\tclipRule=\"evenodd\"\n\t\t\td=\"M12.3127 7.45705V9.74274C12.3127 10.3805 12.6293 10.6971 12.9647 11.0326L12.9652 11.033L12.9679 11.0358C13.3205 11.3893 13.6843 11.754 13.6843 12.4854C13.6843 12.5491 13.6335 12.5998 13.57 12.5998H3.51277C3.44959 12.5998 3.39844 12.5489 3.39844 12.4854C3.39844 11.7539 3.76242 11.389 4.11507 11.0354L4.11754 11.033C4.45305 10.6975 4.76984 10.3807 4.76984 9.74245V7.45676C4.76984 5.6932 5.98854 4.21248 7.62704 3.802V3.11399C7.62704 2.60926 8.03659 2.19971 8.54132 2.19971C9.04606 2.19971 9.45561 2.60926 9.45561 3.11399V3.802C11.094 4.21286 12.3127 5.69335 12.3127 7.45705ZM10.3698 13.1711C10.3698 14.1809 9.55099 14.9997 8.54121 14.9997C7.53128 14.9997 6.71272 14.181 6.71272 13.1711H10.3698ZM8.758 7.70501C9.30005 7.85574 9.6696 7.99832 9.86302 8.13224C10.1776 8.35015 10.3374 8.67657 10.338 9.106C10.338 9.7284 10.1359 10.1706 9.72956 10.4326C9.50571 10.5778 9.18295 10.6723 8.75846 10.7195V11.4005H8.42657V10.7195C7.74604 10.6746 7.28244 10.4349 7.04094 9.99812C6.90703 9.76157 6.83984 9.44246 6.83984 9.04019H7.46277C7.48004 9.35983 7.53041 9.59501 7.6135 9.74163C7.75837 10.0063 8.0303 10.1548 8.42664 10.1861V8.27703C7.9177 8.18078 7.54357 8.01963 7.30116 7.79532C7.0605 7.57102 6.93929 7.25914 6.93929 6.86234C6.93929 6.50686 7.06917 6.18768 7.32977 5.90212C7.58991 5.61657 7.95581 5.47132 8.42619 5.46675V5.00049H8.75808V5.45861C9.22343 5.4927 9.58119 5.62981 9.82863 5.87039C10.0787 6.11144 10.2086 6.43062 10.2204 6.82651H9.60569C9.5907 6.64899 9.54299 6.49507 9.4631 6.36884C9.31595 6.13183 9.08076 6.00697 8.758 5.99518V7.70501ZM7.80143 7.36315C7.95574 7.49478 8.16369 7.58608 8.42611 7.63691L8.42619 5.98886C8.11651 5.99936 7.89723 6.09424 7.76651 6.2681C7.63572 6.4447 7.57036 6.62815 7.57036 6.82019C7.57036 7.05081 7.64705 7.23289 7.80143 7.36315ZM8.75747 10.2033C9.15883 10.1847 9.43305 10.0394 9.58606 9.76522C9.66504 9.62408 9.70415 9.46285 9.70399 9.27948C9.70399 8.98624 9.59686 8.76376 9.38123 8.61121C9.2582 8.52219 9.05079 8.4391 8.75747 8.35921V10.2033Z\"\n\t\t\tfill=\"white\"\n\t\t/>\n\t</svg>\n);\n\nconst SvgBellIcon = ({\n\tclassName,\n\tsize = 'md',\n\t...props\n}: Omit<IconProps, 'size'> & { size?: IconSize }) => (\n\t<Svg\n\t\tclassName={cn(\n\t\t\ticonVariants({\n\t\t\t\tsize: size || 'md',\n\t\t\t}),\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport default SvgBellIcon;\n"],"mappings":";;;;;AAYA,MAAa,eAAe,IAAI,kBAAkB;CACjD,UAAU,EACT,MAAM;EACL,KAAK;EACL,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,EACD;CACD,iBAAiB,EAChB,MAAM,MACN;CACD,CAAC;;;;ACnBF,MAAM,OAAO,UACZ,qBAAC;CACA,WAAU;CACV,SAAQ;CACR,MAAK;CACL,OAAM;CACN,MAAK;CACL,mBAAgB;CAChB,GAAI;YAEJ,oBAAC;EAAM,IAAG;YAAa;GAAyB,EAChD,oBAAC;EACA,UAAS;EACT,UAAS;EACT,GAAE;EACF,MAAK;GACJ;EACG;AAGP,MAAM,eAAe,EACpB,WACA,OAAO,MACP,GAAG,YAEH,oBAAC;CACA,WAAW,GACV,aAAa,EACZ,MAAM,QAAQ,MACd,CAAC,EACF,UACA;CACD,GAAI;EACH;AAGH,uBAAe"}