@0xsequence/marketplace-sdk 0.5.7 → 0.6.0

package/src/react/hooks/__tests__/useListCollectionActivities.test.tsx

@@ -1,3 +1,4 @@
+import { renderHook, server, waitFor } from '@test';
 import { http, HttpResponse } from 'msw';
 import { zeroAddress } from 'viem';
 import { describe, expect, it } from 'vitest';
@@ -5,12 +6,10 @@ import {
 	mockActivity,
 	mockMarketplaceEndpoint,
 } from '../../_internal/api/__mocks__/marketplace.msw';
-import { SortOrder } from '../../_internal/api/marketplace.gen';
 import type { ListCollectionActivitiesArgs } from '../../_internal/api/marketplace.gen';
-import { renderHook, waitFor } from '../../_internal/test-utils';
-import { server } from '../../_internal/test/setup';
-import { useListCollectionActivities } from '../useListCollectionActivities';
+import { SortOrder } from '../../_internal/api/marketplace.gen';
 import type { UseListCollectionActivitiesArgs } from '../useListCollectionActivities';
+import { useListCollectionActivities } from '../useListCollectionActivities';
 
 describe('useListCollectionActivities', () => {
 	const defaultArgs: UseListCollectionActivitiesArgs = {

package/src/react/hooks/__tests__/useListCollections.test.tsx

@@ -1,10 +1,9 @@
 import { ResourceStatus } from '@0xsequence/metadata';
+import { renderHook, server, waitFor } from '@test';
 import { http, HttpResponse } from 'msw';
 import { describe, expect, it } from 'vitest';
 import { MarketplaceType, OrderbookKind } from '../../../types';
 import { mockContractInfo } from '../../_internal/api/__mocks__/metadata.msw';
-import { renderHook, waitFor } from '../../_internal/test-utils';
-import { server } from '../../_internal/test/setup';
 import {
 	createConfigHandler,
 	mockConfig,

package/src/react/hooks/__tests__/useListListingsForCollectible.test.tsx

@@ -1,14 +1,13 @@
-import { describe, expect, it } from 'vitest';
-import { useListListingsForCollectible } from '../useListListingsForCollectible';
-import { renderHook, waitFor } from '../../_internal/test-utils';
-import { zeroAddress } from 'viem';
-import { MarketplaceKind } from '../../_internal/api/marketplace.gen';
+import { renderHook, server, waitFor } from '@test';
 import { http, HttpResponse } from 'msw';
+import { zeroAddress } from 'viem';
+import { describe, expect, it } from 'vitest';
 import {
-	mockOrder,
 	mockMarketplaceEndpoint,
+	mockOrder,
 } from '../../_internal/api/__mocks__/marketplace.msw';
-import { server } from '../../_internal/test/setup';
+import { MarketplaceKind } from '../../_internal/api/marketplace.gen';
+import { useListListingsForCollectible } from '../useListListingsForCollectible';
 
 describe('useListListingsForCollectible', () => {
 	const defaultArgs = {

package/src/react/hooks/__tests__/useListOffersForCollectible.test.tsx

@@ -1,14 +1,13 @@
-import { describe, expect, it } from 'vitest';
-import { useListOffersForCollectible } from '../useListOffersForCollectible';
-import { renderHook, waitFor } from '../../_internal/test-utils';
-import { zeroAddress } from 'viem';
-import { MarketplaceKind } from '../../_internal/api/marketplace.gen';
+import { renderHook, server, waitFor } from '@test';
 import { http, HttpResponse } from 'msw';
+import { zeroAddress } from 'viem';
+import { describe, expect, it } from 'vitest';
 import {
-	mockOrder,
 	mockMarketplaceEndpoint,
+	mockOrder,
 } from '../../_internal/api/__mocks__/marketplace.msw';
-import { server } from '../../_internal/test/setup';
+import { MarketplaceKind } from '../../_internal/api/marketplace.gen';
+import { useListOffersForCollectible } from '../useListOffersForCollectible';
 
 describe('useListOffersForCollectible', () => {
 	const defaultArgs = {

package/src/react/hooks/__tests__/useLowestListing.test.tsx

@@ -1,14 +1,13 @@
-import { describe, expect, it } from 'vitest';
-import { useLowestListing } from '../useLowestListing';
-import { renderHook, waitFor } from '../../_internal/test-utils';
-import { zeroAddress } from 'viem';
-import { MarketplaceKind } from '../../_internal/api/marketplace.gen';
+import { renderHook, server, waitFor } from '@test';
 import { http, HttpResponse } from 'msw';
+import { zeroAddress } from 'viem';
+import { describe, expect, it } from 'vitest';
 import {
-	mockOrder,
 	mockMarketplaceEndpoint,
+	mockOrder,
 } from '../../_internal/api/__mocks__/marketplace.msw';
-import { server } from '../../_internal/test/setup';
+import { MarketplaceKind } from '../../_internal/api/marketplace.gen';
+import { useLowestListing } from '../useLowestListing';
 
 describe('useLowestListing', () => {
 	const defaultArgs = {

package/src/react/hooks/__tests__/useMarketplaceConfig.test.tsx

@@ -1,6 +1,5 @@
+import { renderHook, server, waitFor } from '@test';
 import { describe, expect, it } from 'vitest';
-import { renderHook, waitFor } from '../../_internal/test-utils';
-import { server } from '../../_internal/test/setup';
 import {
 	createConfigHandler,
 	createErrorHandler,

package/src/react/hooks/__tests__/useRoyaltyPercentage.test.tsx

@@ -1,5 +1,5 @@
+import { renderHook, waitFor } from '@test';
 import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { renderHook, waitFor } from '../../_internal/test-utils';
 import { useRoyaltyPercentage } from '../useRoyaltyPercentage';
 
 describe('useRoyaltyPercentage', () => {

package/src/react/hooks/options/__tests__/marketplaceConfigOptions.test.tsx

@@ -1,14 +1,13 @@
-import { describe, it, expect } from 'vitest';
-import { marketplaceConfigOptions } from '../marketplaceConfigOptions';
-import { renderHook, waitFor } from '../../../_internal/test-utils';
 import type { QueryFunctionContext } from '@tanstack/react-query';
+import { renderHook, server, waitFor } from '@test';
+import { describe, expect, it } from 'vitest';
 import {
 	createErrorHandler,
 	createStylesErrorHandler,
 	mockConfig,
 	mockStyles,
 } from '../__mocks__/marketplaceConfig.msw';
-import { server } from '../../../_internal/test/setup';
+import { marketplaceConfigOptions } from '../marketplaceConfigOptions';
 
 type MarketplaceConfigQueryKey = ['configs', 'marketplace', string, string];
 type MarketplaceConfigContext = QueryFunctionContext<MarketplaceConfigQueryKey>;

package/src/react/hooks/options/collectionOptions.ts

@@ -0,0 +1,42 @@
+import { queryOptions } from '@tanstack/react-query';
+import { z } from 'zod';
+import type { SdkConfig } from '../../../types';
+import {
+	AddressSchema,
+	ChainIdSchema,
+	QueryArgSchema,
+	collectionKeys,
+	getMetadataClient,
+} from '../../_internal';
+import type { UseCollectionArgs } from '../useCollection';
+
+export const UseCollectionSchema = z.object({
+	chainId: ChainIdSchema.pipe(z.coerce.string()),
+	collectionAddress: AddressSchema,
+	query: QueryArgSchema,
+});
+
+export const fetchCollection = async (
+	args: UseCollectionArgs,
+	config: SdkConfig,
+) => {
+	const parsedArgs = UseCollectionSchema.parse(args);
+	const metadataClient = getMetadataClient(config);
+	return metadataClient
+		.getContractInfo({
+			chainID: parsedArgs.chainId,
+			contractAddress: parsedArgs.collectionAddress,
+		})
+		.then((resp) => resp.contractInfo);
+};
+
+export const collectionOptions = (
+	args: UseCollectionArgs,
+	config: SdkConfig,
+) => {
+	return queryOptions({
+		...args.query,
+		queryKey: [...collectionKeys.detail, args, config],
+		queryFn: () => fetchCollection(args, config),
+	});
+};

package/src/react/hooks/options/index.ts

@@ -0,0 +1,2 @@
+export { fetchCollection, collectionOptions } from './collectionOptions';
+export * from './marketplaceConfigOptions';

package/src/react/hooks/useCancelOrder.tsx

@@ -1,8 +1,8 @@
-import { useState, useEffect } from 'react';
-import { useCancelTransactionSteps } from './useCancelTransactionSteps';
-import type { MarketplaceKind } from '../../types';
 import { useWaasFeeOptions } from '@0xsequence/kit';
+import { useEffect, useState } from 'react';
+import type { MarketplaceKind } from '../../types';
 import { useAutoSelectFeeOption } from './useAutoSelectFeeOption';
+import { useCancelTransactionSteps } from './useCancelTransactionSteps';
 
 interface UseCancelOrderArgs {
 	collectionAddress: string;

package/src/react/hooks/useCancelTransactionSteps.tsx

@@ -1,26 +1,26 @@
+import type { Hex } from 'viem';
+import {
+	ChainSwitchUserRejectedError,
+	WalletInstanceNotFoundError,
+} from '../../utils/_internal/error/transaction';
 import {
 	ExecuteType,
-	getMarketplaceClient,
-	getQueryClient,
 	type MarketplaceKind,
 	type Step,
 	StepType,
+	getMarketplaceClient,
+	getQueryClient,
 } from '../_internal';
-import { useWallet } from '../_internal/wallet/useWallet';
-import type { ModalCallbacks } from '../ui/modals/_internal/types';
-import { useConfig } from './useConfig';
-import { useGenerateCancelTransaction } from './useGenerateCancelTransaction';
 import type {
 	SignatureStep,
 	TransactionStep as walletTransactionStep,
 } from '../_internal/utils';
-import type { Hex } from 'viem';
+import { useWallet } from '../_internal/wallet/useWallet';
 import { useSwitchChainModal } from '../ui/modals/_internal/components/switchChainModal';
-import {
-	ChainSwitchUserRejectedError,
-	WalletInstanceNotFoundError,
-} from '../../utils/_internal/error/transaction';
+import type { ModalCallbacks } from '../ui/modals/_internal/types';
 import type { TransactionStep } from './useCancelOrder';
+import { useConfig } from './useConfig';
+import { useGenerateCancelTransaction } from './useGenerateCancelTransaction';
 
 interface UseCancelTransactionStepsArgs {
 	collectionAddress: string;

package/src/react/hooks/useCollection.tsx

@@ -1,47 +1,16 @@
-import { queryOptions, useQuery } from '@tanstack/react-query';
-import { z } from 'zod';
-import type { SdkConfig } from '../../types';
+import { useQuery } from '@tanstack/react-query';
+import type { z } from 'zod';
 import {
-	AddressSchema,
-	ChainIdSchema,
-	QueryArgSchema,
-	collectionKeys,
-	getMetadataClient,
-} from '../_internal';
+	type UseCollectionSchema,
+	collectionOptions,
+	type fetchCollection,
+} from './options/collectionOptions';
 import { useConfig } from './useConfig';
 
-const UseCollectionSchema = z.object({
-	chainId: ChainIdSchema.pipe(z.coerce.string()),
-	collectionAddress: AddressSchema,
-	query: QueryArgSchema,
-});
-
 export type UseCollectionArgs = z.input<typeof UseCollectionSchema>;
 
 export type UseCollectionReturn = Awaited<ReturnType<typeof fetchCollection>>;
 
-const fetchCollection = async (args: UseCollectionArgs, config: SdkConfig) => {
-	const parsedArgs = UseCollectionSchema.parse(args);
-	const metadataClient = getMetadataClient(config);
-	return metadataClient
-		.getContractInfo({
-			chainID: parsedArgs.chainId,
-			contractAddress: parsedArgs.collectionAddress,
-		})
-		.then((resp) => resp.contractInfo);
-};
-
-export const collectionOptions = (
-	args: UseCollectionArgs,
-	config: SdkConfig,
-) => {
-	return queryOptions({
-		...args.query,
-		queryKey: [...collectionKeys.detail, args, config],
-		queryFn: () => fetchCollection(args, config),
-	});
-};
-
 export const useCollection = (args: UseCollectionArgs) => {
 	const config = useConfig();
 	return useQuery(collectionOptions(args, config));

package/src/react/hooks/useCollectionBalanceDetails.tsx

@@ -1,4 +1,7 @@
+import type { GetTokenBalancesDetailsReturn } from '@0xsequence/indexer';
+import { queryOptions, useQuery } from '@tanstack/react-query';
 import { z } from 'zod';
+import type { SdkConfig } from '../../types';
 import {
 	AddressSchema,
 	ChainIdSchema,
@@ -6,10 +9,7 @@ import {
 	balanceQueries,
 	getIndexerClient,
 } from '../_internal';
-import { queryOptions, useQuery } from '@tanstack/react-query';
 import { useConfig } from './useConfig';
-import type { GetTokenBalancesDetailsReturn } from '@0xsequence/indexer';
-import type { SdkConfig } from '../../types';
 
 const filterSchema = z.object({
 	accountAddresses: z.array(AddressSchema),

package/src/react/hooks/useCollectionDetailsPolling.tsx

@@ -1,8 +1,8 @@
 import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { SdkConfig } from '../../types';
 import { CollectionStatus } from '../_internal/api/marketplace.gen';
-import { useConfig } from './useConfig';
 import { collectionDetailsOptions } from './useCollectionDetails';
+import { useConfig } from './useConfig';
 
 type UseCollectionDetailsPolling = {
 	collectionAddress: string;

package/src/react/hooks/useCurrencies.tsx

@@ -5,10 +5,10 @@ import type { SdkConfig } from '../../types';
 import {
 	AddressSchema,
 	ChainIdSchema,
+	QueryArgSchema,
 	currencyKeys,
 	getMarketplaceClient,
 	getQueryClient,
-	QueryArgSchema,
 } from '../_internal';
 import { useConfig } from './useConfig';
 import { marketplaceConfigOptions } from './useMarketplaceConfig';

package/src/react/hooks/useGenerateListingTransaction.tsx

@@ -7,6 +7,7 @@ export type UseGenerateListingTransactionArgs = {
 };
 
 import type { SdkConfig } from '../../types';
+import { dateToUnixTime } from '../../utils/date';
 import {
 	type ChainId,
 	type CreateReq,
@@ -14,7 +15,6 @@ import {
 	type Step,
 	getMarketplaceClient,
 } from '../_internal';
-import { dateToUnixTime } from '../../utils/date';
 
 export type CreateReqWithDateExpiry = Omit<CreateReq, 'expiry'> & {
 	expiry: Date;

package/src/react/hooks/useGenerateOfferTransaction.tsx

@@ -1,5 +1,6 @@
 import { useMutation } from '@tanstack/react-query';
 import type { SdkConfig } from '../../types';
+import { dateToUnixTime } from '../../utils/date';
 import {
 	type ChainId,
 	type CreateReq,
@@ -8,7 +9,6 @@ import {
 	getMarketplaceClient,
 } from '../_internal';
 import { useConfig } from './useConfig';
-import { dateToUnixTime } from '../../utils/date';
 
 export type UseGenerateOfferTransactionArgs = {
 	chainId: ChainId;

package/src/react/hooks/useGetReceiptFromHash.tsx

@@ -1,6 +1,6 @@
+import { useCallback } from 'react';
 import type { Hex } from 'viem';
 import { usePublicClient } from 'wagmi';
-import { useCallback } from 'react';
 
 /**
  * @returns a function to wait for a transaction receipt and the receipt

package/src/react/hooks/useListCollectibleActivities.tsx

@@ -2,11 +2,11 @@ import { queryOptions, useQuery } from '@tanstack/react-query';
 import type { z } from 'zod';
 import type { SdkConfig } from '../../types';
 import { collectableKeys, getMarketplaceClient } from '../_internal';
-import { useConfig } from './useConfig';
 import type {
 	getListCollectibleActivitiesArgsSchema,
 	getListCollectibleActivitiesReturnSchema,
 } from '../_internal/api/zod-schema';
+import { useConfig } from './useConfig';
 
 export type UseListCollectibleActivitiesArgs = z.infer<
 	typeof getListCollectibleActivitiesArgsSchema

package/src/react/hooks/useListCollectionActivities.tsx

@@ -3,11 +3,11 @@ import type { z } from 'zod';
 import type { SdkConfig } from '../../types';
 import { getMarketplaceClient } from '../_internal';
 import { collectionKeys } from '../_internal/api';
-import { useConfig } from './useConfig';
 import type {
 	getListCollectionActivitiesArgsSchema,
 	getListCollectionActivitiesReturnSchema,
 } from '../_internal/api/zod-schema';
+import { useConfig } from './useConfig';
 
 export type UseListCollectionActivitiesArgs = z.infer<
 	typeof getListCollectionActivitiesArgsSchema

package/src/react/index.ts

@@ -1,5 +1,6 @@
 export * from './provider';
 export * from './hooks';
+export * from './hooks/options';
 export * from './_internal/api/get-query-client';
 export * from './_internal/wagmi/create-config';
 export * from './ui/index';

package/src/react/provider.tsx

@@ -4,9 +4,9 @@ import { QueryClientProvider } from '@tanstack/react-query';
 import { createContext } from 'react';
 import '@0xsequence/design-system/styles.css';
 import type { SdkConfig } from '../types';
-import { PROVIDER_ID } from './_internal/get-provider';
-import { getQueryClient } from './_internal/api/get-query-client';
 import { InvalidProjectAccessKeyError } from '../utils/_internal/error/config';
+import { getQueryClient } from './_internal/api/get-query-client';
+import { PROVIDER_ID } from './_internal/get-provider';
 
 export const MarketplaceSdkContext = createContext({} as SdkConfig);
 

package/src/react/ssr/__tests__/create-ssr-client.test.ts

@@ -1,20 +1,9 @@
 import { QueryClient } from '@tanstack/react-query';
-import { setupServer } from 'msw/node';
-import {
-	afterAll,
-	beforeAll,
-	beforeEach,
-	describe,
-	expect,
-	it,
-	vi,
-} from 'vitest';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import type { SdkConfig } from '../../../types';
 import { mockConfig } from '../../hooks/options/__mocks__/marketplaceConfig.msw';
 import { createSSRClient } from '../create-ssr-client';
 
-const server = setupServer();
-
 vi.mock('wagmi', () => ({
 	cookieToInitialState: vi.fn().mockReturnValue({
 		data: { account: { address: '0x123' } },
@@ -25,16 +14,6 @@ describe('createSSRClient', () => {
 	let queryClient: QueryClient;
 	let config: SdkConfig;
 
-	beforeAll(() => {
-		// Start MSW server once before all tests
-		server.listen({ onUnhandledRequest: 'error' });
-	});
-
-	afterAll(() => {
-		// Clean up after all tests are done
-		server.close();
-	});
-
 	beforeEach(() => {
 		// Reset QueryClient
 		queryClient = new QueryClient({

package/src/react/ssr/create-ssr-client.ts

@@ -1,8 +1,8 @@
+import type { QueryClient } from '@tanstack/react-query';
 import { type State, cookieToInitialState } from 'wagmi';
 import type { SdkConfig } from '../../types/sdk-config';
 import { createWagmiConfig } from '../_internal/wagmi/create-config';
 import { marketplaceConfigOptions } from '../hooks/options/marketplaceConfigOptions';
-import type { QueryClient } from '@tanstack/react-query';
 
 type InitSSRClientArgs = {
 	cookie: string;

package/src/react/ui/components/_internals/action-button/ActionButton.tsx

@@ -3,10 +3,10 @@
 import { observer } from '@legendapp/state/react';
 import type { Hex } from 'viem';
 import type { Order, OrderbookKind } from '../../../../_internal';
-import type { CollectibleCardAction } from './types';
-import { useActionButtonLogic } from './hooks/useActionButtonLogic';
-import { OwnerActions } from './components/OwnerActions';
 import { NonOwnerActions } from './components/NonOwnerActions';
+import { OwnerActions } from './components/OwnerActions';
+import { useActionButtonLogic } from './hooks/useActionButtonLogic';
+import type { CollectibleCardAction } from './types';
 
 type ActionButtonProps = {
 	chainId: string;

package/src/react/ui/components/_internals/action-button/components/ActionButtonBody.tsx

@@ -1,9 +1,9 @@
 import { Button } from '@0xsequence/design-system';
-import { useAccount } from 'wagmi';
 import { useOpenConnectModal } from '@0xsequence/kit';
-import type { CollectibleCardAction } from '../types';
+import { useAccount } from 'wagmi';
 import { setPendingAction } from '../store';
 import { actionButton } from '../styles.css';
+import type { CollectibleCardAction } from '../types';
 
 type ActionButtonBodyProps = {
 	label: 'Buy now' | 'Sell' | 'Make an offer' | 'Create listing' | 'Transfer';

package/src/react/ui/components/_internals/action-button/components/NonOwnerActions.tsx

@@ -1,11 +1,11 @@
 import type { Hex } from 'viem';
+import { InvalidStepError } from '../../../../../../utils/_internal/error/transaction';
 import type { Order, OrderbookKind } from '../../../../../_internal';
-import { CollectibleCardAction } from '../types';
-import { ActionButtonBody } from './ActionButtonBody';
+import SvgCartIcon from '../../../../icons/CartIcon';
 import { useBuyModal } from '../../../../modals/BuyModal';
 import { useMakeOfferModal } from '../../../../modals/MakeOfferModal';
-import { InvalidStepError } from '../../../../../../utils/_internal/error/transaction';
-import SvgCartIcon from '../../../../icons/CartIcon';
+import { CollectibleCardAction } from '../types';
+import { ActionButtonBody } from './ActionButtonBody';
 
 type NonOwnerActionsProps = {
 	action: CollectibleCardAction;

package/src/react/ui/components/_internals/action-button/components/OwnerActions.tsx

@@ -1,10 +1,10 @@
 import type { Hex } from 'viem';
 import type { Order, OrderbookKind } from '../../../../../_internal';
-import { CollectibleCardAction } from '../types';
-import { ActionButtonBody } from './ActionButtonBody';
 import { useCreateListingModal } from '../../../../modals/CreateListingModal';
 import { useSellModal } from '../../../../modals/SellModal';
 import { useTransferModal } from '../../../../modals/TransferModal';
+import { CollectibleCardAction } from '../types';
+import { ActionButtonBody } from './ActionButtonBody';
 
 type OwnerActionsProps = {
 	action: CollectibleCardAction;

package/src/react/ui/components/_internals/action-button/hooks/useActionButtonLogic.ts

@@ -1,11 +1,11 @@
 import { useEffect } from 'react';
 import { useAccount } from 'wagmi';
-import { CollectibleCardAction } from '../types';
 import {
 	actionButtonStore,
 	clearPendingAction,
 	executePendingActionIfExists,
 } from '../store';
+import { CollectibleCardAction } from '../types';
 
 type UseActionButtonLogicProps = {
 	tokenId: string;

package/src/react/ui/components/_internals/custom-select/__tests__/CustomSelect.test.tsx

@@ -1,11 +1,6 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { cleanup, fireEvent, render, screen } from '@test';
+import { beforeEach, describe, expect, it, vi } from 'vitest';
 import { CustomSelect, type SelectItem } from '../CustomSelect';
-import {
-	cleanup,
-	render,
-	screen,
-	fireEvent,
-} from '../../../../../_internal/test-utils';
 
 describe('CustomSelect', () => {
 	const mockItems: SelectItem[] = [

package/src/react/ui/components/collectible-card/CollectibleCard.tsx

@@ -10,8 +10,8 @@ import type {
 	OrderbookKind,
 } from '../../../_internal';
 import { useCurrency } from '../../../hooks';
-import SvgDiamondEyeIcon from '../../icons/DiamondEye';
 import ChessTileImage from '../../images/chess-tile.png';
+import SvgDiamondEyeIcon from '../../images/marketplaces/LooksRare';
 import { ActionButton } from '../_internals/action-button/ActionButton';
 import { CollectibleCardAction } from '../_internals/action-button/types';
 import { Footer } from './Footer';
@@ -60,6 +60,7 @@ type CollectibleCardProps = {
 	lowestListing: CollectibleOrder | undefined;
 	onCollectibleClick?: (tokenId: string) => void;
 	onOfferClick?: ({ order }: { order?: Order }) => void;
+	imageSrcPrefixUrl?: string;
 	balance?: string;
 	cardLoading?: boolean;
 	/**
@@ -93,6 +94,7 @@ export function CollectibleCard({
 	balance,
 	cardLoading,
 	onCannotPerformAction,
+	imageSrcPrefixUrl,
 }: CollectibleCardProps) {
 	const collectibleMetadata = lowestListing?.metadata;
 	const highestOffer = lowestListing?.offer;
@@ -123,6 +125,7 @@ export function CollectibleCard({
 	const name = collectibleMetadata?.name;
 	const image = collectibleMetadata?.image;
 	const externalUrl = collectibleMetadata?.external_url;
+	const proxiedImage = `${imageSrcPrefixUrl}/${image}`;
 
 	return (
 		<Box
@@ -183,7 +186,11 @@ export function CollectibleCard({
 							/>
 						)}
 						<img
-							src={imageLoadingError ? ChessTileImage : image || ChessTileImage}
+							src={
+								imageLoadingError
+									? ChessTileImage
+									: (imageSrcPrefixUrl ? proxiedImage : image) || ChessTileImage
+							}
 							alt={name}
 							className={
 								imageLoading

package/src/react/ui/components/collectible-card/Footer.tsx

@@ -8,7 +8,7 @@ import {
 } from '@0xsequence/design-system';
 import { formatUnits } from 'viem';
 import { ContractType, type Currency, type Order } from '../../../_internal';
-import SvgBellIcon from '../../icons/Bell';
+import SvgBellIcon from '../../icons/BellIcon';
 import { footer, footerPriceChevron, offerBellButton } from './styles.css';
 
 const OVERFLOW_PRICE = 100000000;

package/src/react/ui/components/marketplace-logos/marketplace-logos.tsx

@@ -1,5 +1,5 @@
-import { type ComponentProps, lazy, Suspense } from 'react';
 import { Image } from '@0xsequence/design-system';
+import { type ComponentProps, Suspense, lazy } from 'react';
 
 /* @__PURE__ */
 const createMarketplaceLogo = (

package/src/react/ui/icons/index.ts

@@ -1,7 +1,4 @@
+export * from './BellIcon';
 export * from './CalendarIcon';
-export * from './InventoryIcon';
-export * from './MinusIcon';
-export * from './PlusIcon';
-export * from './ArrowUp';
+export * from './CartIcon';
 export * from './InfoIcon';
-export * from './PositiveCircleIcon';

package/src/react/ui/{icons/DiamondEye.tsx → images/marketplaces/LooksRare.tsx}

@@ -1,5 +1,5 @@
 import { Box, type IconProps } from '@0xsequence/design-system';
-import { iconVariants } from './styles.css';
+import { iconVariants } from '../../icons/styles.css';
 
 const Svg = () => (
 	<svg