@0xsequence/marketplace-sdk 1.0.0 → 1.1.0

package/src/react/ui/components/marketplace-collectible-card/variants/ShopCard.tsx

@@ -1,11 +1,11 @@
 'use client';
 
-import { CollectibleCardAction } from '../../../../../types';
+import { type CardType, CollectibleCardAction } from '../../../../../types';
 import { ContractType } from '../../../../_internal';
 import { useCurrency } from '../../../../hooks/data/market/useCurrency';
 import { ActionButtonWrapper } from '../components/ActionButtonWrapper';
 import { BaseCard } from '../components/BaseCard';
-import { Footer } from '../Footer';
+import { Footer } from '../components/footer';
 import type { ShopCollectibleCardProps } from '../types';
 
 export function ShopCard({
@@ -15,7 +15,7 @@ export function ShopCard({
 	collectionType,
 	assetSrcPrefixUrl,
 	cardLoading,
-	marketplaceType,
+	cardType,
 	salesContractAddress,
 	tokenMetadata,
 	salePrice,
@@ -35,8 +35,6 @@ export function ShopCard({
 		},
 	});
 
-	const isLoading = cardLoading || saleCurrencyLoading;
-
 	if (!tokenMetadata || !salePrice) {
 		console.error('Token metadata or sale price is undefined', {
 			tokenMetadata,
@@ -53,8 +51,9 @@ export function ShopCard({
 
 	const action = CollectibleCardAction.BUY;
 
-	const mediaClassName =
-		quantityRemaining === '0' || quantityRemaining === undefined
+	const mediaClassName = unlimitedSupply
+		? 'opacity-100'
+		: quantityRemaining === '0' || quantityRemaining === undefined
 			? 'opacity-50'
 			: 'opacity-100';
 
@@ -65,23 +64,27 @@ export function ShopCard({
 			collectionAddress={collectionAddress}
 			collectionType={collectionType}
 			assetSrcPrefixUrl={assetSrcPrefixUrl}
-			cardLoading={cardLoading}
-			marketplaceType={marketplaceType}
-			isLoading={isLoading}
+			cardLoading={cardLoading || saleCurrencyLoading}
+			cardType={cardType}
 			name={tokenMetadata.name || ''}
 			image={tokenMetadata.image}
 			video={tokenMetadata.video}
 			animationUrl={tokenMetadata.animation_url}
 			mediaClassName={mediaClassName}
+			contractType={collectionType as ContractType}
+			isShop={true}
 		>
 			<Footer
+				chainId={chainId}
+				collectionAddress={collectionAddress}
+				collectibleId={collectibleId}
 				name={tokenMetadata.name || ''}
 				type={collectionType}
 				decimals={tokenMetadata.decimals}
 				quantityInitial={quantityInitial}
 				quantityRemaining={quantityRemaining}
 				unlimitedSupply={unlimitedSupply}
-				marketplaceType={marketplaceType}
+				cardType={cardType as CardType}
 				salePriceAmount={salePrice?.amount}
 				salePriceCurrency={saleCurrency}
 			/>
@@ -93,7 +96,7 @@ export function ShopCard({
 				tokenId={collectibleId}
 				action={action}
 				owned={false}
-				marketplaceType={marketplaceType}
+				cardType={cardType as CardType}
 				salesContractAddress={salesContractAddress}
 				salePrice={salePrice}
 				quantityDecimals={quantityDecimals}

package/src/react/ui/modals/BuyModal/__tests__/BuyModalRouter.test.tsx

@@ -199,7 +199,7 @@ describe('BuyModalRouter', () => {
 					collectibleId: '1',
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
-					marketplaceType: 'market',
+					cardType: 'market',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -235,7 +235,7 @@ describe('BuyModalRouter', () => {
 					collectibleId: '1',
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
-					marketplaceType: 'market',
+					cardType: 'market',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -289,7 +289,7 @@ describe('BuyModalRouter', () => {
 
 			render(<BuyModalRouter />);
 
-			expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+			expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		});
 	});
 
@@ -309,7 +309,7 @@ describe('BuyModalRouter', () => {
 						amount: '1000000000000000000',
 						currencyAddress: '0x0' as `0x${string}`,
 					},
-					marketplaceType: 'shop',
+					cardType: 'shop',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -350,7 +350,7 @@ describe('BuyModalRouter', () => {
 						amount: '1000000000000000000',
 						currencyAddress: '0x0' as `0x${string}`,
 					},
-					marketplaceType: 'shop',
+					cardType: 'shop',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -390,7 +390,7 @@ describe('BuyModalRouter', () => {
 						amount: '1000000000000000000',
 						currencyAddress: '0x0' as `0x${string}`,
 					},
-					marketplaceType: 'shop',
+					cardType: 'shop',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -410,7 +410,7 @@ describe('BuyModalRouter', () => {
 
 			render(<BuyModalRouter />);
 
-			expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+			expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		});
 	});
 
@@ -474,7 +474,7 @@ describe('BuyModalRouter', () => {
 
 			render(<BuyModalRouter />);
 
-			expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+			expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		});
 
 		it('should show error modal for unsupported configuration', () => {
@@ -491,7 +491,7 @@ describe('BuyModalRouter', () => {
 						amount: '1000000000000000000',
 						currencyAddress: '0x0' as `0x${string}`,
 					},
-					marketplaceType: 'shop',
+					cardType: 'shop',
 				},
 				analyticsFn: mockAnalyticsFn,
 			});
@@ -528,7 +528,7 @@ describe('BuyModalRouter', () => {
 					collectibleId: '1',
 					marketplace: MarketplaceKind.sequence_marketplace_v2,
 					orderId: '1',
-					// marketplaceType not specified - should default to MARKET
+					// cardType not specified - should default to MARKET
 				},
 				analyticsFn: mockAnalyticsFn,
 			});

package/src/react/ui/modals/BuyModal/__tests__/ERC1155ShopModal.test.tsx

@@ -80,7 +80,7 @@ describe('ERC1155ShopModal', () => {
 					amount: mockShopData.salePrice.amount,
 					currencyAddress: mockShopData.salePrice.currencyAddress as Address,
 				},
-				marketplaceType: 'shop',
+				cardType: 'shop',
 			},
 			analyticsFn: mockAnalyticsFn,
 		});
@@ -168,7 +168,7 @@ describe('ERC1155ShopModal', () => {
 			/>,
 		);
 
-		expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+		expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		expect(mockOpenCheckoutModal).not.toHaveBeenCalled();
 	});
 
@@ -388,7 +388,7 @@ describe('ERC1155ShopModal', () => {
 			/>,
 		);
 
-		expect(screen.getByText('Loading Sequence Pay')).toBeInTheDocument();
+		expect(screen.getByText('Loading payment options')).toBeInTheDocument();
 		expect(mockUseERC1155Checkout).toHaveBeenCalledWith(
 			expect.objectContaining({
 				chainId: 137,

package/src/react/ui/modals/BuyModal/__tests__/Modal.test.tsx.bak

@@ -25,7 +25,7 @@
 //   it("should not render when isOpen is false", () => {
 //     render(<BuyModal />);
 
-//     expect(screen.queryByText("Loading Sequence Pay")).not.toBeInTheDocument();
+//     expect(screen.queryByText("Loading payment options")).not.toBeInTheDocument();
 //     expect(screen.queryByText("Checkout")).not.toBeInTheDocument();
 //     expect(screen.queryByText("Select Quantity")).not.toBeInTheDocument();
 //   });
@@ -81,7 +81,7 @@
 //     });
 //     render(<BuyModal />);
 //     // First should show loading
-//     expect(screen.getByText("Loading Sequence Pay")).toBeInTheDocument();
+//     expect(screen.getByText("Loading payment options")).toBeInTheDocument();
 //     // Then should show quantity modal for ERC1155
 //     await waitFor(
 //       () => {
@@ -107,6 +107,6 @@
 //     render(<BuyModal />);
 
 //     // Should show loading modal
-//     expect(screen.getByText("Loading Sequence Pay")).toBeInTheDocument();
+//     expect(screen.getByText("Loading payment options")).toBeInTheDocument();
 //   });
 // });

package/src/react/ui/modals/BuyModal/__tests__/Modal1155.test.tsx

@@ -60,7 +60,7 @@ describe('ERC1155QuantityModal', () => {
 				collectionAddress: '0x123' as `0x${string}`,
 				collectibleId: '1',
 				marketplace: MarketplaceKind.sequence_marketplace_v2,
-				marketplaceType: 'market',
+				cardType: 'market',
 			},
 			analyticsFn,
 		});
@@ -75,7 +75,7 @@ describe('ERC1155QuantityModal', () => {
 		render(
 			<ERC1155QuantityModal
 				order={testOrder}
-				marketplaceType={'market'}
+				cardType={'market'}
 				chainId={1}
 				quantityDecimals={0}
 				quantityRemaining="10"
@@ -119,7 +119,7 @@ describe('ERC1155QuantityModal', () => {
 		render(
 			<ERC1155QuantityModal
 				order={testOrder}
-				marketplaceType={'market'}
+				cardType={'market'}
 				chainId={1}
 				quantityDecimals={0}
 				quantityRemaining="10"
@@ -162,7 +162,7 @@ describe('ERC1155QuantityModal', () => {
 		render(
 			<ERC1155QuantityModal
 				order={testOrder}
-				marketplaceType={'market'}
+				cardType={'market'}
 				chainId={1}
 				quantityDecimals={0}
 				quantityRemaining="10"
@@ -210,7 +210,7 @@ describe('ERC1155QuantityModal', () => {
 		render(
 			<ERC1155QuantityModal
 				order={testOrder}
-				marketplaceType={'market'}
+				cardType={'market'}
 				chainId={1}
 				quantityDecimals={0}
 				quantityRemaining="10"
@@ -239,7 +239,7 @@ describe('ERC1155QuantityModal', () => {
 	//     render(
 	//       <ERC1155QuantityModal
 	//         order={testOrder}
-	//         marketplaceType={'market'}
+	//         cardType={'market'}
 	//         chainId={1}
 	//       />
 	//     );

package/src/react/ui/modals/BuyModal/__tests__/store.test.ts

@@ -26,7 +26,7 @@ describe('BuyModal Store', () => {
 			collectionAddress: '0x123' as `0x${string}`,
 			collectibleId: '1',
 			marketplace: MarketplaceKind.sequence_marketplace_v2,
-			marketplaceType: 'market',
+			cardType: 'market',
 		};
 
 		buyModalStore.send({
@@ -49,7 +49,7 @@ describe('BuyModal Store', () => {
 			collectionAddress: '0x123' as `0x${string}`,
 			collectibleId: '1',
 			marketplace: MarketplaceKind.sequence_marketplace_v2,
-			marketplaceType: 'market',
+			cardType: 'market',
 		};
 
 		buyModalStore.send({
@@ -76,7 +76,7 @@ describe('BuyModal Store', () => {
 			collectionAddress: '0x123' as `0x${string}`,
 			collectibleId: '1',
 			marketplace: MarketplaceKind.sequence_marketplace_v2,
-			marketplaceType: 'market',
+			cardType: 'market',
 		};
 
 		buyModalStore.send({

package/src/react/ui/modals/BuyModal/components/BuyModalRouter.tsx

@@ -48,7 +48,7 @@ export const BuyModalRouter = () => {
 				isOpen={true}
 				chainId={chainId}
 				onClose={() => buyModalStore.send({ type: 'close' })}
-				title="Loading Sequence Pay"
+				title="Loading payment options"
 			/>
 		);
 	}
@@ -61,7 +61,7 @@ export const BuyModalRouter = () => {
 						isOpen={true}
 						chainId={chainId}
 						onClose={() => buyModalStore.send({ type: 'close' })}
-						title="Loading Sequence Pay"
+						title="Loading payment options"
 					/>
 				);
 			}
@@ -80,7 +80,7 @@ export const BuyModalRouter = () => {
 						isOpen={true}
 						chainId={chainId}
 						onClose={() => buyModalStore.send({ type: 'close' })}
-						title="Loading Sequence Pay"
+						title="Loading payment options"
 					/>
 				);
 			}
@@ -100,7 +100,7 @@ export const BuyModalRouter = () => {
 						isOpen={true}
 						chainId={chainId}
 						onClose={() => buyModalStore.send({ type: 'close' })}
-						title="Loading Sequence Pay"
+						title="Loading payment options"
 					/>
 				);
 			}
@@ -122,7 +122,7 @@ export const BuyModalRouter = () => {
 						isOpen={true}
 						chainId={chainId}
 						onClose={() => buyModalStore.send({ type: 'close' })}
-						title="Loading Sequence Pay"
+						title="Loading payment options"
 					/>
 				);
 			}

package/src/react/ui/modals/BuyModal/components/ERC1155BuyModal.tsx

@@ -36,7 +36,7 @@ export const ERC1155BuyModal = ({
 }: ERC1155BuyModalProps) => {
 	const quantity = useQuantity();
 	const modalProps = useBuyModalProps();
-	const marketplaceType = modalProps.marketplaceType || 'market';
+	const cardType = modalProps.cardType || 'market';
 	const isShop = isShopProps(modalProps);
 	const quantityDecimals = isShop
 		? modalProps.quantityDecimals
@@ -49,7 +49,7 @@ export const ERC1155BuyModal = ({
 		return (
 			<ERC1155QuantityModal
 				order={order}
-				marketplaceType={marketplaceType}
+				cardType={cardType}
 				quantityDecimals={quantityDecimals}
 				quantityRemaining={quantityRemaining}
 				chainId={chainId}

package/src/react/ui/modals/BuyModal/components/ERC1155QuantityModal.tsx

@@ -5,7 +5,7 @@ import { useState } from 'react';
 import type { Address } from 'viem';
 import { maxUint256, parseUnits } from 'viem';
 import { DEFAULT_MARKETPLACE_FEE_PERCENTAGE } from '../../../../../consts';
-import type { MarketplaceType } from '../../../../../types';
+import type { CardType } from '../../../../../types';
 import { formatPriceWithFee } from '../../../../../utils/price';
 import type { Order } from '../../../../_internal';
 import { useMarketplaceConfig } from '../../../../hooks';
@@ -18,7 +18,7 @@ const INFINITY_STRING = maxUint256.toString();
 
 type ERC1155QuantityModalProps = {
 	order?: Order;
-	marketplaceType: MarketplaceType;
+	cardType: CardType;
 	quantityDecimals: number;
 	quantityRemaining: string;
 	unlimitedSupply?: boolean;
@@ -36,7 +36,7 @@ export const ERC1155QuantityModal = ({
 	unlimitedSupply,
 	salePrice,
 	chainId,
-	marketplaceType,
+	cardType,
 }: ERC1155QuantityModalProps) => {
 	const isOpen = useIsOpen();
 
@@ -93,7 +93,7 @@ export const ERC1155QuantityModal = ({
 					quantityStr={localQuantity}
 					salePrice={salePrice}
 					chainId={chainId}
-					marketplaceType={marketplaceType}
+					cardType={cardType}
 					quantityDecimals={quantityDecimals}
 				/>
 			</div>
@@ -109,7 +109,7 @@ type TotalPriceProps = {
 		currencyAddress: Address;
 	};
 	chainId: number;
-	marketplaceType: MarketplaceType;
+	cardType: CardType;
 	quantityDecimals: number;
 };
 
@@ -118,11 +118,11 @@ const TotalPrice = ({
 	quantityStr,
 	salePrice,
 	chainId,
-	marketplaceType,
+	cardType,
 	quantityDecimals,
 }: TotalPriceProps) => {
-	const isShop = marketplaceType === 'shop';
-	const isMarket = marketplaceType === 'market';
+	const isShop = cardType === 'shop';
+	const isMarket = cardType === 'market';
 	const { data: marketplaceConfig } = useMarketplaceConfig();
 	const { data: currency, isLoading: isCurrencyLoading } = useCurrency({
 		chainId,

package/src/react/ui/modals/BuyModal/components/ERC1155ShopModal.tsx

@@ -48,7 +48,7 @@ export const ERC1155ShopModal = ({
 					currencyAddress:
 						(shopData.salePrice?.currencyAddress as Address) ?? zeroAddress,
 				}}
-				marketplaceType="shop"
+				cardType="shop"
 				quantityDecimals={quantityDecimals}
 				quantityRemaining={quantityRemaining}
 				unlimitedSupply={unlimitedSupply}
@@ -115,7 +115,7 @@ const ERC1155SaleContractCheckoutModalOpener = ({
 				isOpen={true}
 				chainId={chainId}
 				onClose={() => buyModalStore.send({ type: 'close' })}
-				title="Loading Sequence Pay"
+				title="Loading payment options"
 			/>
 		);
 	}

package/src/react/ui/modals/BuyModal/hooks/useERC1155Checkout.ts

@@ -5,7 +5,11 @@ import type {
 	CheckoutOptions,
 	CheckoutOptionsItem,
 } from '../../../../_internal';
-import { getQueryClient } from '../../../../_internal';
+import {
+	balanceQueries,
+	collectableKeys,
+	getQueryClient,
+} from '../../../../_internal';
 import {
 	buyModalStore,
 	useBuyAnalyticsId,
@@ -68,7 +72,14 @@ export const useERC1155Checkout = ({
 		onClose: () => {
 			const queryClient = getQueryClient();
 			queryClient.invalidateQueries({
-				predicate: (query) => !query.meta?.persistent,
+				queryKey: balanceQueries.inventory,
+			});
+			queryClient.invalidateQueries({
+				queryKey: [...collectableKeys.userBalances],
+				refetchType: 'inactive',
+			});
+			queryClient.invalidateQueries({
+				queryKey: collectableKeys.listPrimarySaleItems,
 			});
 			buyModalStore.send({ type: 'close' });
 		},

package/src/react/ui/modals/BuyModal/store.ts

@@ -1,7 +1,7 @@
 import { createStore } from '@xstate/store';
 import { useSelector } from '@xstate/store/react';
 import type { Address, Hash } from 'viem';
-import type { MarketplaceType } from '../../../../types';
+import type { CardType } from '../../../../types';
 import type {
 	CheckoutOptionsItem,
 	MarketplaceKind,
@@ -35,14 +35,14 @@ export type BuyModalBaseProps = {
 	collectionAddress: Address;
 	skipNativeBalanceCheck?: boolean;
 	nativeTokenAddress?: Address;
-	marketplaceType?: MarketplaceType;
+	cardType?: CardType;
 	customCreditCardProviderCallback?: PaymentModalProps['customCreditCardProviderCallback'];
 	successActionButtons?: ActionButton[];
 };
 
 // Shop type modal props
 export type ShopBuyModalProps = BuyModalBaseProps & {
-	marketplaceType: 'shop';
+	cardType: 'shop';
 	salesContractAddress: Address;
 	items: Array<Partial<CheckoutOptionsItem> & { tokenId?: string }>;
 	quantityDecimals: number;
@@ -56,7 +56,7 @@ export type ShopBuyModalProps = BuyModalBaseProps & {
 
 // Marketplace type modal props
 export type MarketplaceBuyModalProps = BuyModalBaseProps & {
-	marketplaceType?: 'market';
+	cardType?: 'market';
 	collectibleId: string;
 	marketplace: MarketplaceKind;
 	orderId: string;
@@ -66,14 +66,14 @@ export type BuyModalProps = ShopBuyModalProps | MarketplaceBuyModalProps;
 
 // Type guard functions
 export function isShopProps(props: BuyModalProps): props is ShopBuyModalProps {
-	return props.marketplaceType === 'shop';
+	return props.cardType === 'shop';
 }
 
 export function isMarketProps(
 	props: BuyModalProps,
 ): props is MarketplaceBuyModalProps {
 	// Default to MARKET type for backward compatibility
-	return !props.marketplaceType || props.marketplaceType === 'market';
+	return !props.cardType || props.cardType === 'market';
 }
 
 export type onSuccessCallback = ({

package/src/react/ui/modals/CreateListingModal/hooks/useCreateListing.tsx

@@ -2,6 +2,7 @@
 
 import type { Observable } from '@legendapp/state';
 import { useEffect } from 'react';
+import type { Address } from 'viem';
 import type { MarketCollection } from '../../../../../types/new-marketplace-types';
 import { compareAddress } from '../../../../../utils';
 import {
@@ -23,7 +24,7 @@ export interface ListingInput {
 interface UseCreateListingArgs {
 	listingInput: ListingInput;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	orderbookKind?: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;

package/src/react/ui/modals/CreateListingModal/hooks/useTransactionSteps.tsx

@@ -26,7 +26,7 @@ import type { ModalCallbacks } from '../../_internal/types';
 interface UseTransactionStepsArgs {
 	listingInput: ListingInput;
 	chainId: number;
-	collectionAddress: string;
+	collectionAddress: Address;
 	orderbookKind: OrderbookKind;
 	callbacks?: ModalCallbacks;
 	closeMainModal: () => void;