# Display a Certified NFT You can display a 2D NFT (Non-Fungible Token) that you own in your Decentraland scenes. The NFT's image and other data is taken from an API, based on the token's contract and id. Any NFTs that are supported on [OpenSea](https://opensea.io/) can also be displayed in an NFT picture frame in Decentraland. {% hint style="info" %} **💡 Tip**: In the [Scene Editor in Creator Hub](https://github.com/decentraland/docs/blob/main/creator/sdk7/scene-editor/get-started/about-editor.md), you can use an **NFT** [Smart Item](https://github.com/decentraland/docs/blob/main/creator/sdk7/scene-editor/interactivity/smart-items.md) for a no-code way to achieve this. {% endhint %} The picture frame is displayed adjusting to the dimensions of the NFT image. If the image's dimensions are 512 X 512 pixels, the frame keeps its original size. If the image has different dimensions, the frame will be resized and stretched to match these dimensions. {% hint style="info" %} **💡 Tip**: If you want to stretch or resize the image from what's generated by default, you can change the `scale` property in the entity's `Transform` component. {% endhint %} ## Add an NFT Add an `NftShape` component to an entity to display a 2D token in your 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', }) ``` The `NftShape` component must be instanced with a parameter that includes the following: * `urn` field. This field takes a string that should follow this structure: `urn:decentraland::::` This string includes: * The *network* where this token exists. See list of supported values below. * The *contract standard* that this token is based on, for example `erc721` * The *contract* of the token (for example, the CryptoKitties contract) * The *id* of the specific token to display For example: `urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536` The example above fetches an NFT with the contract address `0x06012c8cf97BEaD5deAe237070F9587f8E7A266d`, and the specific identifier `558536`. The corresponding asset can be found in OpenSea at . The following values are supported for *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" %} **📔 Note**: Images must weigh up to **6 MB**. If the image is larger, it won't be rendered in the scene. {% endhint %} ## Customize the frame By default, the image will have a purple background and have a frame with a pulsating emissive texture around it. You can set the following properties to better match the style of the NFT and the scene: * `color`: Determines the back side of the model, and also the background of the image in case the NFT image has transparency. * `style`: Selects a frame model from an enum of several predetermined options. Use a value from the enum `NftFrameType`, which contains a list of all available styles. ```ts const shapeComponent = new NftShape( urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97bead5deae237070f9587f8e7a266d:558536', { color: Color3.Green(), style: NftFrameType.NFT_GOLD_EDGES, } ) ``` ![](https://45449780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-e59260ef83a294f59a11a2427a6cb81f8a9a6e6e%2Fnft-frames.png?alt=media) Here's the full list of supported frame styles: * `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` Some frames use more materials than others. For example, the default frame adds 1 material for the NFT itself, 1 material for a background colored plane, and 2 materials for the frame (shared with other picture frames of the same style). If you need to reduce materials to [stay within scene limitations](https://github.com/decentraland/docs/blob/main/creator/sdk7/sdk7/optimizing/scene-limitations.md), pick a style that is simpler. For example "none" only uses only 1 material for the NFT itself. {% hint style="info" %} **💡 Tip**: Using Visual Studio Code (or another IDE), see the whole list by typing `NftFrameType.` and waiting for the smart suggestions display the list of options. Use `NftFrameType.NFT_NONE`to display the plain NFT as is, with no frame or background color. {% endhint %} ## Open an NFT UI Open a prebuilt UI that displays the name, owner, and description of an NFT. It also includes the NFT's current price and price of last sale if applicable, and a button that links to the NFT's page on OpenSea, where more information is available and it can be purchased. ![](https://45449780-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FoPnXBby9S6MrsW83Y9qZ%2Fuploads%2Fgit-blob-aa9f7b7fbcba689e0039abe1aed3936c64c44f98%2Fnft-ui.png?alt=media) Open this UI by calling the function `openNftDialog()`. This function requires an object as an argument that contains a single `urn` field. This field takes a string that should follow this structure: `urn:decentraland::::` For example: `urn:decentraland:ethereum:erc721:0x00...000:123` {% hint style="warning" %} **📔 Note**: The UI must be opened as a result of a button event, to prevent abusive spamming. The button event doesn't necessarily need to be on the same picture frame or on an `NftShape`. {% endhint %} To open this UI as a result of a click action, add the following: ```ts import { openNftDialog } from '~system/RestrictedActions' // Add pointer collider so it can be clicked MeshCollider.setBox(myEntity, ColliderLayer.CL_POINTER) // Add onPointerDown callback event. pointerEventsSystem.onPointerDown( { entity: myEntity, opts: { button: InputAction.IA_PRIMARY, hoverText: 'Click' }, }, function () { openNftDialog({ urn: 'urn:decentraland:ethereum:erc721:0x06012c8cf97BEaD5deAe237070F9587f8E7A266d:558536', }) } ) ```