> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/media/display-a-certified-nft.md). # Exibir um NFT Certificado Aprenda como exibir um NFT certificado que você possui na sua scene Você pode exibir um NFT 2D (Token Não Fungível) que você possui nas suas scenes do Decentraland. A imagem do NFT e outros dados são obtidos de uma API, com base no contract e no id do token. Quaisquer NFTs com suporte em [OpenSea](https://opensea.io/) também podem ser exibidos em uma moldura de NFT no Decentraland. {% hint style="info" %} **💡 Dica**: No [Scene Editor no Creator Hub](/creator/content-creator-pt/scene-editor/comece/about-editor.md), você pode usar um **NFT** [Smart Item](/creator/content-creator-pt/scene-editor/interatividade/smart-items.md) como uma forma sem código de conseguir isso. {% endhint %} A moldura é 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 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 gerada por padrão, você pode alterar a `escala` propriedade da entity `Transform` component. {% 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 suportados abaixo. * O *contract standard* em que este token se baseia, por exemplo `erc721` * O *contract* do token (por exemplo, o contract do 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 endereço do contract `0x06012c8cf97BEaD5deAe237070F9587f8E7A266d`, e o identificador específico `558536`. O asset correspondente pode ser encontrado no OpenSea em . Os seguintes valores têm suporte 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 * `base`: Base * `blast`: Blast * `zora`: Zora {% hint style="warning" %} **📔 Observação**: As images devem ter no máximo **6 MB**. Se a image 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 properties para combinar melhor com o estilo do NFT e da scene: * `color`: Determina a parte de trás do model e também o background da image caso a image do NFT tenha transparência. * `style`: Seleciona um model de moldura a partir de um enum com várias opções predefinidas. Use um valor do enum `NftFrameType`, que contém uma lista de todos os estilos disponíveis. ```ts NftShape.create(nftEntity, { urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536', color: Color3.Green(), style: NftFrameType.NFT_GOLD_EDGES, }) ``` ![](https://2402076176-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e59260ef83a294f59a11a2427a6cb81f8a9a6e6e%2Fnft-frames.png?alt=media) Aqui está a lista completa de estilos de moldura suportados: * `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 materiais do que outras. Por exemplo, a moldura padrão adiciona 1 material para o próprio NFT, 1 material para um plano colorido de fundo e 2 materiais para a moldura (compartilhados com outras molduras do mesmo estilo). Se você precisar reduzir os materiais para [manter-se dentro dos limites da scene](/creator/content-creator-pt/scenes-sdk7/otimizacao/scene-limitations.md), escolha um estilo 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 pré-construída que exibe o nome, o proprietário e a descrição 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 leva à página do NFT no OpenSea, onde há mais informações e ele pode ser comprado. ![](https://2402076176-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-aa9f7b7fbcba689e0039abe1aed3936c64c44f98%2Fnft-ui.png?alt=media) Abra esta UI chamando a função `openNftDialog()`. Esta função requer um objeto como argumento que contenha um único `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" %} **📔 Observação**: 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 click, adicione o seguinte: ```ts import { openNftDialog } from '~system/RestrictedActions' // Adicione um collider de pointer 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: 'Clique' }, }, function () { openNftDialog({ urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536', }) } ) ``` --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## 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, and the optional `goal` query parameter: ``` GET https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/media/display-a-certified-nft.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. 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.