+ );
+}
+```
+
+## Notas
+El componente `MarketplaceCollectibleCard` está diseñado para manejar varios escenarios de marketplace con:
+- Diseño responsivo
+- Estados de carga
+- Formateo de precios
+- Seguimiento de suministro
+- Manejo de acciones
+- Funciones específicas para el propietario
+- Gestión de ofertas
+
+Al usar con tokens ERC-1155, tenga en cuenta que:
+- El balance se muestra como formato "Propiedad: X"
+- La información de suministro se muestra para ítems de tienda
+- Se soporta el seguimiento de cantidades
+
+### Mejores prácticas
+
+1. **Obtención de Datos**
+ - Use el hook de datos adecuado según su contexto (market/shop) y tipo de contrato (ERC721/ERC1155)
+ - Habilite la obtención condicional usando la prop `enabled` cuando sea necesario
+ - Gestione los estados de carga apropiadamente
+
+2. **Manejo de Eventos**
+ - Implemente manejadores de clic tanto para la tarjeta como para acciones específicas (comprar, ofertar)
+ - Use el callback `onCannotPerformAction` para manejar acciones no autorizadas
+
+3. **Visualización**
+ - Envuelva las tarjetas en botones para hacerlas clickeables
+ - Use el className adecuado para el diseño y espaciado
+ - Considere implementar scroll infinito o paginación para colecciones grandes
\ No newline at end of file
diff --git a/es/sdk/marketplace-sdk/components/Media.mdx b/es/sdk/marketplace-sdk/components/Media.mdx
new file mode 100644
index 00000000..874937bb
--- /dev/null
+++ b/es/sdk/marketplace-sdk/components/Media.mdx
@@ -0,0 +1,162 @@
+---
+title: Media
+description: Componente para mostrar varios tipos de assets coleccionables
+sidebarTitle: Media
+---
+
+## Importar
+
+```tsx
+import { Media } from "@0xsequence/marketplace-sdk/react";
+```
+
+## Uso
+
+### Examples
+
+
+
+ Ejemplo básico de uso del componente Media para mostrar una imagen:
+
+ ```tsx
+ import { Media } from "@0xsequence/marketplace-sdk/react";
+
+ export default function BasicExample() {
+ return (
+
+ );
+ }
+ ```
+
+
+
+ Ejemplo mostrando cómo manejar múltiples assets con fallback:
+
+ ```tsx
+ import { Media } from "@0xsequence/marketplace-sdk/react";
+
+ export default function MultipleAssetsExample() {
+ return (
+
+ );
+ }
+ ```
+
+
+
+ Ejemplo con un componente de fallback personalizado:
+
+ ```tsx
+ import { Media } from "@0xsequence/marketplace-sdk/react";
+
+ export default function CustomFallbackExample() {
+ const CustomFallback = () => (
+
+
Asset not available
+
+ );
+
+ return (
+ }
+ />
+ );
+ }
+ ```
+
+
+
+## Parámetros
+El componente acepta las siguientes props:
+
+```tsx
+interface MediaProps {
+ name?: string;
+ assets: (string | undefined)[];
+ assetSrcPrefixUrl?: string;
+ className?: string;
+ containerClassName?: string;
+ mediaClassname?: string;
+ isLoading?: boolean;
+ fallbackContent?: React.ReactNode;
+ shouldListenForLoad?: boolean;
+}
+```
+
+| Parámetro | Type | Description | |
+| --------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------- |
+| `name` | `string` | Nombre opcional para el coleccionable, usado como texto alternativo para imágenes | |
+| `assets` | \`(string | undefined)\[]\` | Arreglo de URLs de assets para intentar cargar. El componente intentará cargar cada asset en orden hasta que uno se cargue correctamente |
+| `assetSrcPrefixUrl` | `string` | Prefijo de URL opcional para anteponer a las URLs de los assets | |
+| `className` | `string` | Nombre de clase CSS opcional para el contenedor del componente | |
+| `containerClassName` | `string` | Nombre de clase CSS opcional para el contenedor externo | |
+| `mediaClassname` | `string` | Nombre de clase CSS opcional para el elemento media | |
+| `isLoading` | `boolean` | Indicador opcional para mostrar el estado de carga | |
+| `fallbackContent` | `React.ReactNode` | Contenido personalizado opcional para mostrar cuando no se pueden cargar assets | |
+| `shouldListenForLoad` | `boolean` | Indicador opcional para habilitar/deshabilitar los listeners de eventos de carga (por defecto es true) | |
+
+## Tipos de Media Soportados
+El componente Media detecta y gestiona automáticamente diferentes tipos de contenido:
+- **Imágenes**: Renderiza archivos de imagen estándar (PNG, JPG, GIF, etc.)
+- **Videos**: Soporta archivos de video con autoplay, loop y controles
+- **Modelos 3D**: Renderiza modelos 3D usando el componente ModelViewer
+- **HTML**: Muestra contenido HTML en un iframe aislado
+
+## Características
+
+### Detección Automática de Tipo de Contenido
+El componente detecta automáticamente el tipo de contenido del asset y renderiza el elemento apropiado:
+
+```tsx
+
+```
+
+### Cadena de Fallback
+Si un asset falla al cargar, el componente:
+1. Intenta el siguiente asset en el arreglo de assets
+2. Si todos los assets fallan, muestra el contenido de fallback personalizado
+3. Si no se proporciona contenido de fallback, muestra el patrón de tablero de ajedrez por defecto
+
+### Estados de Carga
+El componente incluye estados de carga integrados:
+
+```tsx
+
+```
+
+## Notas
+El componente `Media` está diseñado para manejar varios tipos de assets coleccionables con:
+- Detección automática de tipo de contenido
+- Manejo de fallback
+- Estados de carga
+- Ajustes de compatibilidad con Safari
+
+Al usar con contenido de video, tenga en cuenta que:
+- Los videos se reproducen automáticamente por defecto
+- Los videos están silenciados por defecto para compatibilidad con autoplay
\ No newline at end of file
diff --git a/images/marketplace/collectible_card_with_offer.png b/images/marketplace/collectible_card_with_offer.png
new file mode 100644
index 00000000..1eda0022
Binary files /dev/null and b/images/marketplace/collectible_card_with_offer.png differ
diff --git a/ja/sdk/marketplace-sdk/components/CollectibleCard.mdx b/ja/sdk/marketplace-sdk/components/CollectibleCard.mdx
new file mode 100644
index 00000000..ca66f608
--- /dev/null
+++ b/ja/sdk/marketplace-sdk/components/CollectibleCard.mdx
@@ -0,0 +1,432 @@
+---
+title: CollectibleCard
+description: マーケットプレイスやショップでコレクティブルを表示するための多用途なカードコンポーネントです。
+sidebarTitle: CollectibleCard
+---
+
+## インポート
+
+```tsx
+import { CollectibleCard } from "@0xsequence/marketplace-sdk/react";
+```
+
+## 使い方
+
+### データフック
+SDK には、CollectibleCard コンポーネント用のデータ取得・整形専用フックが用意されています。
+
+#### マーケットカード
+
+```tsx
+import { useListMarketCardData } from "@0xsequence/marketplace-sdk/react";
+
+const {
+ collectibleCards,
+ isLoading,
+ hasNextPage,
+ isFetchingNextPage,
+ fetchNextPage,
+} = useListMarketCardData({
+ orderbookKind,
+ collectionType,
+ filterOptions,
+ searchText,
+ showListedOnly,
+ collectionAddress,
+ chainId,
+});
+```
+
+#### ショップカード
+ショップカードには、コントラクトタイプに応じて2種類のフックがあります。
+
+```tsx
+// For ERC721 tokens
+import { useList721ShopCardData } from "@0xsequence/marketplace-sdk/react";
+
+const { collectibleCards, isLoading } = useList721ShopCardData({
+ primarySaleItemsWithMetadata,
+ chainId,
+ contractAddress,
+ salesContractAddress,
+ enabled: contractType === ContractType.ERC721,
+});
+
+// For ERC1155 tokens
+import { useList1155ShopCardData } from "@0xsequence/marketplace-sdk/react";
+
+const { collectibleCards, isLoading } = useList1155ShopCardData({
+ chainId,
+ contractAddress,
+ salesContractAddress,
+ enabled: contractType === ContractType.ERC1155,
+ primarySaleItemsWithMetadata,
+});
+```
+
+これらのフックは以下を処理します：
+- データの取得と整形
+- ローディング状態の管理
+- ページネーション（マーケットカード用）
+- タイプごとのデータ要件
+- フィルターや検索との連携
+
+### 使用例
+
+
+
+ マーケットプレイスで CollectibleCard コンポーネントを使う例：
+
+ ```tsx
+ import { CollectibleCard } from "@0xsequence/marketplace-sdk/react";
+
+ export default function MarketExample() {
+ return (
+ {
+ console.log(`Clicked collectible ${tokenId}`);
+ }}
+ />
+ );
+ }
+ ```
+
+
+
+ ショップで CollectibleCard を利用する例：
+
+ ```tsx
+ import { CollectibleCard } from "@0xsequence/marketplace-sdk/react";
+
+ export default function ShopExample() {
+ return (
+
+ );
+ }
+ ```
+
+
+
+ オファー機能を持つ例：
+
+
+ 
+
+
+ ```tsx
+ import { CollectibleCard } from "@0xsequence/marketplace-sdk/react";
+
+ export default function OffersExample() {
+ return (
+ {
+ console.log('Offer clicked', order);
+ e.preventDefault();
+ }}
+ onCannotPerformAction={(action) => {
+ console.log(`Cannot perform action: ${action}`);
+ }}
+ />
+ );
+ }
+ ```
+
+
+
+## パラメータ
+コンポーネントはマーケットプレイスタイプに応じて異なるプロパティを受け取ります。
+
+### 基本プロパティ
+これらのプロパティはすべてのカードタイプで共通です：
+
+```tsx
+interface MarketplaceCardBaseProps {
+ collectibleId: string;
+ chainId: number;
+ collectionAddress: Address;
+ collectionType?: ContractType;
+ assetSrcPrefixUrl?: string;
+ cardLoading?: boolean;
+ marketplaceType?: MarketplaceType;
+ isTradable?: boolean;
+}
+```
+
+| パラメータ | 型 | 説明 |
+| ------------------- | ----------------- | --------------------------------------- |
+| `collectibleId` | `string` | コレクティブルの一意な識別子 |
+| `chainId` | `number` | ブロックチェーンネットワークID |
+| `collectionAddress` | `Address` | コレクションのスマートコントラクトアドレス |
+| `collectionType` | `ContractType` | オプション。コントラクトタイプ（ERC721 または ERC1155） |
+| `assetSrcPrefixUrl` | `string` | オプション。アセットソース用のURLプレフィックス |
+| `cardLoading` | `boolean` | オプション。ローディング状態を表示するフラグ |
+| `marketplaceType` | `MarketplaceType` | オプション。マーケットプレイスタイプ（'market' または 'shop'） |
+| `isTradable` | `boolean` | オプション。このアイテムが取引可能かどうかを示すフラグ |
+
+### ショップカード用プロパティ
+ショップカード（`marketplaceType="shop"`）用の追加プロパティ：
+
+```tsx
+interface ShopCardSpecificProps {
+ salesContractAddress: Address;
+ tokenMetadata: TokenMetadata;
+ salePrice?: {
+ amount: string;
+ currencyAddress: Address;
+ };
+ saleStartsAt?: string;
+ saleEndsAt?: string;
+ quantityDecimals?: number;
+ quantityInitial?: string;
+ quantityRemaining?: string;
+ unlimitedSupply?: boolean;
+}
+```
+
+| パラメータ | 型 | 説明 |
+| ---------------------- | --------------- | ---------------------- |
+| `salesContractAddress` | `Address` | 販売コントラクトのアドレス |
+| `tokenMetadata` | `TokenMetadata` | トークンのメタデータ（名前、説明、画像など） |
+| `salePrice` | `object` | オプション。金額や通貨を含む価格情報 |
+| `saleStartsAt` | `string` | オプション。販売開始のタイムスタンプ |
+| `saleEndsAt` | `string` | オプション。販売終了のタイムスタンプ |
+| `quantityDecimals` | `number` | オプション。数量の小数点以下の桁数 |
+| `quantityInitial` | `string` | オプション。初期供給量 |
+| `quantityRemaining` | `string` | オプション。残り供給量 |
+| `unlimitedSupply` | `boolean` | オプション。供給が無制限かどうか |
+
+### マーケットカード用プロパティ
+マーケットカード（`marketplaceType="market"`）用の追加プロパティ：
+
+```tsx
+interface MarketCardSpecificProps {
+ orderbookKind?: OrderbookKind;
+ collectible?: CollectibleOrder;
+ onCollectibleClick?: (tokenId: string) => void;
+ onOfferClick?: (params: {
+ order?: Order;
+ e: React.MouseEvent;
+ }) => void;
+ balance?: string;
+ balanceIsLoading: boolean;
+ onCannotPerformAction?: (action: CollectibleCardAction) => void;
+ prioritizeOwnerActions?: boolean;
+}
+```
+
+| パラメータ | 型 | 説明 |
+| ------------------------ | ------------------ | -------------------------- |
+| `orderbookKind` | `OrderbookKind` | オプション。オーダーブックの種類 |
+| `collectible` | `CollectibleOrder` | オプション。コレクティブルの注文情報 |
+| `onCollectibleClick` | `function` | オプション。コレクティブルクリック時のハンドラー |
+| `onOfferClick` | `function` | オプション。オファークリック時のハンドラー |
+| `balance` | `string` | オプション。このコレクティブルのユーザー保有数 |
+| `balanceIsLoading` | `boolean` | 現在バランスを読み込み中かどうか |
+| `onCannotPerformAction` | `function` | オプション。権限がない操作時のハンドラー |
+| `prioritizeOwnerActions` | `boolean` | オプション。UI上でオーナーの操作を優先するかどうか |
+
+## 特徴
+
+### カードバリエーション
+コンポーネントは主に2つのバリエーションをサポートします：
+1. **マーケットカード**：マーケットプレイスでコレクティブルを表示する際に使用し、以下を含みます：
+ - 現在の出品価格
+ - 最高オファーの表示
+ - 保有・所有情報
+ - 購入・オファーアクション
+
+2. **ショップカード**：一次販売用で、以下を含みます：
+ - 販売価格
+ - 供給情報
+ - 販売状況
+ - 購入アクション
+
+### 自動タイプ判定
+コンポーネントは異なるトークン規格を自動で処理します：
+- ERC-721（非代替性トークン）
+- ERC-1155（半代替性トークン）
+
+### ローディング状態
+組み込みのローディング状態が用意されています。
+
+```tsx
+
+```
+
+### 価格フォーマット
+コンポーネントには高度な価格フォーマット機能が含まれています：
+- 通貨記号の表示
+- オーバーフロー／アンダーフローの指標
+- さまざまなトークン小数点への対応
+- 価格がゼロの場合の「無料」表示
+
+## 統合例
+
+### マーケットコンテンツへの統合
+CollectibleCard をマーケットプレイスで統合する完全な例：
+
+```tsx
+import {
+ CollectibleCard,
+ useListMarketCardData,
+} from "@0xsequence/marketplace-sdk/react";
+
+export function MarketContent({
+ collectionAddress,
+ chainId,
+ onCollectibleClick,
+}) {
+ const {
+ collectibleCards,
+ isLoading,
+ hasNextPage,
+ isFetchingNextPage,
+ fetchNextPage,
+ } = useListMarketCardData({
+ orderbookKind,
+ collectionType,
+ filterOptions,
+ searchText,
+ showListedOnly,
+ collectionAddress,
+ chainId,
+ });
+
+ return (
+
+ );
+}
+```
+
+## Notes
+
+The `MarketplaceCollectibleCard` component is designed to handle various marketplace scenarios with:
+
+- Responsive layout
+- Loading states
+- Price formatting
+- Supply tracking
+- Action handling
+- Owner-specific features
+- Offer management
+
+When using with ERC-1155 tokens, note that:
+
+- Balance is displayed as "Owned: X" format
+- Supply information is shown for shop items
+- Quantity tracking is supported
+
+### Best Practices
+
+1. **Data Fetching**
+
+ - Use the appropriate data hook based on your context (market/shop) and contract type (ERC721/ERC1155)
+ - Enable conditional fetching using the `enabled` prop when necessary
+ - Handle loading states appropriately
+
+2. **Event Handling**
+
+ - Implement click handlers for both the card and specific actions (buy, offer)
+ - Use the `onCannotPerformAction` callback to handle unauthorized actions
+
+3. **Display**
+ - Wrap cards in buttons for clickable behavior
+ - Use appropriate className for layout and spacing
+ - Consider implementing infinite scroll or pagination for large collections
diff --git a/sdk/marketplace-sdk/components/Media.mdx b/sdk/marketplace-sdk/components/Media.mdx
new file mode 100644
index 00000000..5ba03a1b
--- /dev/null
+++ b/sdk/marketplace-sdk/components/Media.mdx
@@ -0,0 +1,173 @@
+---
+title: "Media"
+description: "Component for displaying various types of collectible assets"
+sidebarTitle: "Media"
+---
+
+## Import
+
+```tsx
+import { Media } from "@0xsequence/marketplace-sdk/react";
+```
+
+## Usage
+
+### Examples
+
+
+
+ Basic example of using the Media component to display an image:
+
+ ```tsx
+ import { Media } from "@0xsequence/marketplace-sdk/react";
+
+ export default function BasicExample() {
+ return (
+
+ );
+ }
+ ```
+
+
+
+ Example showing how to handle multiple assets with fallback:
+
+ ```tsx
+ import { Media } from "@0xsequence/marketplace-sdk/react";
+
+ export default function MultipleAssetsExample() {
+ return (
+
+ );
+ }
+ ```
+
+
+
+ Example with a custom fallback component:
+
+ ```tsx
+ import { Media } from "@0xsequence/marketplace-sdk/react";
+
+ export default function CustomFallbackExample() {
+ const CustomFallback = () => (
+
+
Asset not available
+
+ );
+
+ return (
+ }
+ />
+ );
+ }
+ ```
+
+
+
+
+## Parameters
+
+The component accepts the following props:
+
+```tsx
+interface MediaProps {
+ name?: string;
+ assets: (string | undefined)[];
+ assetSrcPrefixUrl?: string;
+ className?: string;
+ containerClassName?: string;
+ mediaClassname?: string;
+ isLoading?: boolean;
+ fallbackContent?: React.ReactNode;
+ shouldListenForLoad?: boolean;
+}
+```
+
+| Parameter | Type | Description |
+| --------------------- | ------------------------- | ------------------------------------------------------------------------------------------------------------- |
+| `name` | `string` | Optional name for the collectible, used as alt text for images |
+| `assets` | `(string \| undefined)[]` | Array of asset URLs to try loading. The component will attempt to load each asset in order until one succeeds |
+| `assetSrcPrefixUrl` | `string` | Optional URL prefix to prepend to asset URLs |
+| `className` | `string` | Optional CSS class name for the component container |
+| `containerClassName` | `string` | Optional CSS class name for the outer container |
+| `mediaClassname` | `string` | Optional CSS class name for the media element itself |
+| `isLoading` | `boolean` | Optional flag to show loading state |
+| `fallbackContent` | `React.ReactNode` | Optional custom content to display when no assets can be loaded |
+| `shouldListenForLoad` | `boolean` | Optional flag to enable/disable load event listeners (defaults to true) |
+
+## Supported Media Types
+
+The Media component automatically detects and handles different types of content:
+
+- **Images**: Renders standard image files (PNG, JPG, GIF, etc.)
+- **Videos**: Supports video files with autoplay, loop, and controls
+- **3D Models**: Renders 3D models using ModelViewer component
+- **HTML**: Displays HTML content in a sandboxed iframe
+
+## Features
+
+### Automatic Content Type Detection
+
+The component automatically detects the content type of the asset and renders the appropriate element:
+
+```tsx
+
+```
+
+### Fallback Chain
+
+If an asset fails to load, the component will:
+
+1. Try the next asset in the assets array
+2. If all assets fail, display the custom fallback content
+3. If no fallback content is provided, show the default chess tile pattern
+
+### Loading States
+
+The component includes built-in loading states:
+
+```tsx
+
+```
+
+## Notes
+
+The `Media` component is designed to handle various types of collectible assets with built-in:
+
+- Automatic content type detection
+- Fallback handling
+- Loading states
+- Safari compatibility adjustments
+
+When using with video content, note that:
+
+- Videos autoplay by default
+- Videos are muted by default for autoplay compatibility