# Mostrar un NFT certificado Puedes mostrar un NFT 2D (Non-Fungible Token) que posees en tus escenas de Decentraland. La imagen del NFT y otros datos se obtienen de una API, basada en el contrato y el id del token. Cualquier NFT que sea compatible en [OpenSea](https://opensea.io/) también puede mostrarse en un marco de imagen NFT en Decentraland. {% hint style="info" %} **💡 Tip**: En el [Scene Editor in Creator Hub](https://github.com/decentraland/docs/blob/main/creator/sdk7/scene-editor/get-started/about-editor.md), puedes usar un **NFT** [Smart Item](https://github.com/decentraland/docs/blob/main/creator/sdk7/scene-editor/interactivity/smart-items.md) para una forma sin código de lograr esto. {% endhint %} El marco de imagen se muestra ajustándose a las dimensiones de la imagen del NFT. Si las dimensiones de la imagen son 512 X 512 píxeles, el marco mantiene su tamaño original. Si la imagen tiene dimensiones diferentes, el marco se redimensionará y estirará para coincidir con esas dimensiones. {% hint style="info" %} **💡 Tip**: Si quieres estirar o redimensionar la imagen respecto a lo que se genera por defecto, puedes cambiar la `scale` propiedad en el `Transform` component. {% endhint %} ## Agregar un NFT Agrega un `NftShape` componente a una entidad para mostrar un token 2D en tu escena. ```ts const nft = engine.addEntity() Transform.create(nft, { position: Vector3.create(8, 1, 8), }) NftShape.create(nft, { urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536', }) ``` El `NftShape` el componente debe instanciarse con un parámetro que incluya lo siguiente: * `urn` campo. Este campo toma una cadena que debe seguir esta estructura: `urn:decentraland::::` Esta cadena incluye: * El *network* donde existe este token. Ver la lista de valores compatibles abajo. * El *contract standard* en la que se basa este token, por ejemplo `erc721` * El *contract* del contrato del token (por ejemplo, el contrato de CryptoKitties) * El *id* del identificador específico del token a mostrar Por ejemplo: `urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536` El ejemplo anterior obtiene un NFT con la dirección de contrato `0x06012c8cf97BEaD5deAe237070F9587f8E7A266d`, y el identificador específico `558536`. El activo correspondiente se puede encontrar en OpenSea en . Los siguientes valores son compatibles para *network*: * `ethereum`: Ethereum Mainnet * `matic`: Polygon Matic * `klaytn`: Klaytn * `bsc`: BNB Chain * `arbitrum`: Arbitrum * `arbitrum_nova`: Arbitrum Nova * `avalanche`: Avalanche * `optimism`: Optimism * `solana`: Solana * `atributo base`: Base * `blast`: Blast * `zora`: Zora {% hint style="warning" %} **📔 Nota**: Las imágenes deben pesar hasta **6 MB**. Si la imagen es más grande, no se renderizará en la escena. {% endhint %} ## Personalizar el marco Por defecto, la imagen tendrá un fondo morado y un marco con una textura emisiva pulsante alrededor. Puedes establecer las siguientes propiedades para que coincidan mejor con el estilo del NFT y de la escena: * `color`: Determina el reverso del modelo, y también el fondo de la imagen en caso de que la imagen del NFT tenga transparencia. * `style`: Selecciona un modelo de marco de un enum con varias opciones predeterminadas. Usa un valor del enum `NftFrameType`, que contiene una lista de todos los estilos disponibles. ```ts const shapeComponent = new NftShape( urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536', { color: Color3.Green(), style: NftFrameType.NFT_GOLD_EDGES, } ) ``` ![](https://1216664193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e59260ef83a294f59a11a2427a6cb81f8a9a6e6e%2Fnft-frames.png?alt=media) Aquí está la lista completa de estilos de marco compatibles: * `NFT_CLASSIC` * `NFT_BAROQUE_ORNAMENT` * `NFT_DIAMOND_ORNAMENT` * `NFT_MINIMAL_WIDE` * `NFT_MINIMAL_GREY` * `NFT_BLOCKY` * `NFT_GOLD_EDGES` * `NFT_GOLD_CARVED` * `NFT_GOLD_WIDE` * `NFT_GOLD_ROUNDED` * `NFT_METAL_MEDIUM` * `NFT_METAL_WIDE` * `NFT_METAL_SLIM` * `NFT_METAL_ROUNDED` * `NFT_PINS` * `NFT_MINIMAL_BLACK` * `NFT_MINIMAL_WHITE` * `NFT_TAPE` * `NFT_WOOD_SLIM` * `NFT_WOOD_WIDE` * `NFT_WOOD_TWIGS` * `NFT_CANVAS` * `NFT_NONE` Algunos marcos usan más materiales que otros. Por ejemplo, el marco por defecto añade 1 material para el propio NFT, 1 material para un plano de fondo coloreado, y 2 materiales para el marco (compartidos con otros marcos de imagen del mismo estilo). Si necesitas reducir materiales para [mantenerte dentro de las limitaciones de la escena](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/optimizing/scene-limitations.md), elige un estilo más simple. Por ejemplo "none" usa solo 1 material para el propio NFT. {% hint style="info" %} **💡 Tip**: Usando Visual Studio Code (u otro IDE), ve la lista completa escribiendo `NftFrameType.` y esperando a que las sugerencias inteligentes muestren la lista de opciones. Usa `NftFrameType.NFT_NONE`para mostrar el NFT tal cual, sin marco ni color de fondo. {% endhint %} ## Abrir una UI de NFT Abre una UI preconstruida que muestra el nombre, propietario y descripción de un NFT. También incluye el precio actual del NFT y el precio de la última venta si corresponde, y un botón que enlaza a la página del NFT en OpenSea, donde hay más información y puede comprarse. ![](https://1216664193-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-aa9f7b7fbcba689e0039abe1aed3936c64c44f98%2Fnft-ui.png?alt=media) Abre esta UI llamando a la función `openNftDialog()`. Esta función requiere un objeto como argumento que contenga un único `urn` campo. Este campo toma una cadena que debe seguir esta estructura: `urn:decentraland::::` Por ejemplo: `urn:decentraland:ethereum:erc721:0x00...000:123` {% hint style="warning" %} **📔 Nota**: La UI debe abrirse como resultado de un evento de botón, para prevenir el spam abusivo. El evento de botón no necesita estar necesariamente en el mismo marco de imagen o en un `NftShape`. {% endhint %} Para abrir esta UI como resultado de una acción de clic, añade lo siguiente: ```ts import { openNftDialog } from '~system/RestrictedActions' // Añadir collider de puntero para que pueda hacerse clic MeshCollider.setBox(myEntity, ColliderLayer.CL_POINTER) // Añadir evento callback onPointerDown. pointerEventsSystem.onPointerDown( { entity: myEntity, opts: { button: InputAction.IA_PRIMARY, hoverText: 'Click' }, }, function () { openNftDialog({ urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536', }) } ) ```