@0xsequence/marketplace-sdk 1.2.1 → 2.0.1

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,5 +1,184 @@
 # @0xsequence/marketplace-sdk
 
+## 2.0.1
+
+### Patch Changes
+
+ **Fix multi-chain collection lookup**: Collections deployed on multiple chains could resolve to the wrong configuration (currencies, fees, filters, orderbook). Lookups now match on both address and chain ID.
+ **Fix OpenSea minimum offer price validation**: The `useConvertPriceToUSD` hook was always disabled, so the $0.01 USD minimum for OpenSea offers was never enforced. Validation now runs correctly in the MakeOfferModal.
+ **Improve buy modal reliability**: The `generateBuyTransaction` call now polls until data is available, preventing the modal from hanging on slow responses. Added a progressive loading indicator.
+
+## 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

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

@@ -1,10 +1,13 @@
-import { c as cn } from "./utils.js";
+'use client'
+
+import { l 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",
@@ -34,12 +37,12 @@ const Svg = (props) => /* @__PURE__ */ jsxs("svg", {
 		fill: "white"
 	})]
 });
-const SvgBellIcon = ({ className, size = "sm", ...props }) => /* @__PURE__ */ jsx(Svg, {
-	className: cn(iconVariants({ size }), className),
+const SvgBellIcon = ({ className, size = "md", ...props }) => /* @__PURE__ */ jsx(Svg, {
+	className: cn(iconVariants({ size: size || "md" }), className),
 	...props
 });
 var BellIcon_default = SvgBellIcon;
 
 //#endregion
-export { iconVariants as n, BellIcon_default as t };
+export { BellIcon_default as t };
 //# sourceMappingURL=BellIcon.js.map

package/dist/BellIcon.js.map

@@ -1 +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 const iconVariants = cva('block shrink-0', {\n\tvariants: {\n\t\tsize: {\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 { 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 = ({ className, size = 'sm', ...props }: IconProps) => (\n\t<Svg\n\t\tclassName={cn(\n\t\t\ticonVariants({\n\t\t\t\tsize,\n\t\t\t}),\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\n\nexport default SvgBellIcon;\n"],"mappings":";;;;;AAEA,MAAa,eAAe,IAAI,kBAAkB;CACjD,UAAU,EACT,MAAM;EACL,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,EACD;CACD,iBAAiB,EAChB,MAAM,MACN;CACD,CAAC;;;;ACRF,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,EAAE,WAAW,OAAO,MAAM,GAAG,YACjD,oBAAC;CACA,WAAW,GACV,aAAa,EACZ,MACA,CAAC,EACF,UACA;CACD,GAAI;EACH;AAGH,uBAAe"}
+{"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"}