# Exibir um NFT certificado Você pode exibir um NFT 2D (Non-Fungible Token) que você possui nas suas cenas do Decentraland. A imagem e outros dados do NFT são obtidos de uma API, com base no contract e no id do token. Qualquer NFT compatível com [OpenSea](https://opensea.io/) também pode ser exibido em uma moldura de imagem NFT no Decentraland. {% hint style="info" %} **💡 Dica**: No [Scene Editor no Creator Hub](/creator/content-creator-pt/scene-editor/comecar/about-editor.md), você pode usar um **NFT** [Smart Item](/creator/content-creator-pt/scene-editor/interatividade/smart-items.md) para uma forma sem código de conseguir isso. {% endhint %} A moldura da imagem é exibida ajustando-se às dimensões da imagem do NFT. Se as dimensões da imagem forem 512 X 512 pixels, a moldura mantém o seu tamanho original. Se a imagem tiver dimensões diferentes, a moldura será redimensionada e esticada para corresponder a essas dimensões. {% hint style="info" %} **💡 Dica**: Se quiser esticar ou redimensionar a imagem em relação ao que é gerado por padrão, você pode alterar a `escala` propriedade na `Transform` componente. {% endhint %} ## Adicionar um NFT Adicione um `NftShape` component a uma entity para exibir um token 2D na sua scene. ```ts const nft = engine.addEntity() Transform.create(nft, { position: Vector3.create(8, 1, 8), }) NftShape.create(nft, { urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536', }) ``` O `NftShape` o component deve ser instanciado com um parâmetro que inclua o seguinte: * `urn` field. Este field recebe uma string que deve seguir esta estrutura: `urn:decentraland::::` Esta string inclui: * O *network* onde este token existe. Veja a lista de valores compatíveis abaixo. * O *contract standard* com base no qual este token foi criado, por exemplo `erc721` * O *contract* do token (por exemplo, o contract dos CryptoKitties) * O *id* do token específico a exibir Por exemplo: `urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536` O exemplo acima obtém um NFT com o contract address `0x06012c8cf97BEaD5deAe237070F9587f8E7A266d`, e o identificador específico `558536`. O asset correspondente pode ser encontrado na OpenSea em . Os seguintes valores são compatíveis com *network*: * `ethereum`: Ethereum Mainnet * `matic`: Polygon Matic * `klaytn`: Klaytn * `bsc`: BNB Chain * `arbitrum`: Arbitrum * `arbitrum_nova`: Arbitrum Nova * `avalanche`: Avalanche * `optimism`: Optimism * `solana`: Solana * `base`: Base * `blast`: Blast * `zora`: Zora {% hint style="warning" %} **📔 Nota**: As images devem pesar até **6 MB**. Se a imagem for maior, ela não será renderizada na scene. {% endhint %} ## Personalizar a moldura Por padrão, a imagem terá um fundo roxo e uma moldura com uma textura emissiva pulsante ao redor. Você pode definir as seguintes propriedades para combinar melhor com o estilo do NFT e da scene: * `color`: Determina a parte traseira do model, e também o fundo da imagem caso a imagem do NFT tenha transparência. * `style`: Seleciona um model de moldura a partir de um enum de várias opções predefinidas. Use um valor do enum `NftFrameType`, que contém uma lista de todos os styles disponíveis. ```ts const shapeComponent = new NftShape( urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536', { color: Color3.Green(), style: NftFrameType.NFT_GOLD_EDGES, } ) ``` ![](/files/5a3c725504a2ed81d2ae5fa42c027138b249c091) Aqui está a lista completa de estilos de moldura compatíveis: * `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` Algumas molduras usam mais materials do que outras. Por exemplo, a moldura padrão adiciona 1 material para o próprio NFT, 1 material para um plano de fundo colorido e 2 materials para a moldura (compartilhados com outras picture frames do mesmo style). Se precisar reduzir os materials para [ficar dentro das limitações da scene](/creator/content-creator-pt/scenes-sdk7/otimizacao/scene-limitations.md), escolha um style mais simples. Por exemplo, "none" usa apenas 1 material para o próprio NFT. {% hint style="info" %} **💡 Dica**: Usando o Visual Studio Code (ou outro IDE), veja a lista completa digitando `NftFrameType.` e aguardando as smart suggestions exibirem a lista de opções. Use `NftFrameType.NFT_NONE`para exibir o NFT simples como está, sem moldura nem cor de fundo. {% endhint %} ## Abrir uma UI de NFT Abra uma UI predefinida que exibe o nome, o owner e a description de um NFT. Ela também inclui o preço atual do NFT e o preço da última venda, se aplicável, e um botão que liga para a página do NFT na OpenSea, onde há mais informações e ele pode ser comprado. ![](/files/6b9c91e6c47847015ee5bbce35045b368c9714c5) Abra esta UI chamando a função `openNftDialog()`. Esta função requer um objeto como argumento que contenha uma única `urn` field. Este field recebe uma string que deve seguir esta estrutura: `urn:decentraland::::` Por exemplo: `urn:decentraland:ethereum:erc721:0x00...000:123` {% hint style="warning" %} **📔 Nota**: A UI deve ser aberta como resultado de um evento de botão, para evitar spam abusivo. O evento de botão não precisa necessariamente estar na mesma picture frame ou em um `NftShape`. {% endhint %} Para abrir esta UI como resultado de uma ação de clique, adicione o seguinte: ```ts import { openNftDialog } from '~system/RestrictedActions' // Adicione um pointer collider para que possa ser clicado MeshCollider.setBox(myEntity, ColliderLayer.CL_POINTER) // Adicione o evento de callback onPointerDown. pointerEventsSystem.onPointerDown( { entity: myEntity, opts: { button: InputAction.IA_PRIMARY, hoverText: 'Click' }, }, function () { openNftDialog({ urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536', }) } ) ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/media/display-a-certified-nft.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.