> 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 Saiba como exibir em sua scene um NFT certificado que você possui Você pode exibir um NFT 2D (Non-Fungible Token) que você possui nas suas cenas do Decentraland. A imagem do NFT e outros dados são obtidos de uma API, com base no contrato e no id do token. Quaisquer NFTs com suporte no [OpenSea](https://opensea.io/) também podem ser exibidos em uma moldura de imagem de NFT no Decentraland. {% hint style="info" %} **💡 Dica**: No [Scene Editor no Creator Hub](/creator/content-creator-pt/scene-editor/primeiros-passos/about-editor.md), pode usar um **NFT** [Smart Item](/creator/content-creator-pt/scene-editor/interatividade/smart-items.md) para uma forma sem código de conseguir isto. {% 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 o 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 a partir do que é gerado por padrão, você pode alterar a `scale` propriedade no `Transform` component. {% endhint %} ## Adicionar um NFT Adiciona um `NftShape` componente a uma entity para exibir um token 2D na sua cena. ```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 componente deve ser instanciado com um parâmetro que inclua o seguinte: * `urn` campo. Este campo 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 *padrão de contrato* em que este token se baseia, por exemplo `erc721` * O *contrato* do token (por exemplo, o contrato CryptoKitties) * O *id* do token específico a ser exibido Por exemplo: `urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536` O exemplo acima busca um NFT com o endereço do contrato `0x06012c8cf97bead5deae237070f9587f8e7a266d`, e o identificador específico `558536`. O asset correspondente pode ser encontrado no OpenSea em [https://opensea.io/assets/0x06012c8cf97bead5deae237070f9587f8e7a266d/558536](https://opensea.io/assets/0x06012c8cf97BEaD5deAe237070F9587f8E7A266d/558536). Os seguintes valores são suportados 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" %} **📔 Observação**: As imagens devem ter até **6 MB**. Se a imagem for maior, ela não será renderizada na cena. {% endhint %} ## Personalize 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 cena: * `color`: Determina a parte traseira do modelo e também o fundo da imagem caso a imagem do NFT tenha transparência. * `estilo`: Seleciona um modelo 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\&token=84dd9575-6254-44b6-90f1-5da05c7bc973) 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 de fundo colorido e 2 materiais para a moldura (compartilhados com outras molduras do mesmo estilo). Se precisar reduzir os materiais para [permanecer dentro das limitações da cena](/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 que as sugestões inteligentes exibam a lista de opções. Use `NftFrameType.NFT_NONE`para exibir o NFT simples como está, sem moldura ou 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 mais informações estão disponíveis 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\&token=b761699f-e10c-4d56-bc59-183c2d45ce05) Abra esta UI chamando a função `openNftDialog()`. Esta função requer um objeto como argumento que contém um único `urn` campo. Este campo 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 do botão não precisa necessariamente estar na mesma moldura ou em uma `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 collider de ponteiro 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 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 by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` 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 what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. 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.