added iframes to examples

SmartTokenLabs · Mar 12, 2024 · 2d79b8c · 2d79b8c
1 parent c5f7d60
commit 2d79b8c
Showing 1 changed file with 37 additions and 20 deletions.
diff --git a/pages/advance/extra-features/opensea_animation_url.mdx b/pages/advance/extra-features/opensea_animation_url.mdx
@@ -85,38 +85,55 @@ For each token.json, edit it to add the animation_url property with the followin
 }
 ```
 
-#### Example usage
+### Examples
 
-Smart Cats Collection
+#### Smart Cats Collection
+
+TokenURI
 
 ```
 {
-	"image":"https://resources.smartlayer.network/smartcat/reources/images/5464593329ab831b4872365e1f1a2bbc.png",
-	"attributes":[
-		{"trait_type":"Collection","value":"SmartCats"},
-		{"trait_type":"TokenId","value":"2741836701"},
-		{"trait_type":"Background","value":"USA - Flag (Common)"},
-		{"trait_type":"Hat","value":"Vietnam - Wig (Common)"},
-		{"trait_type":"Outfit","value":"SL Grey Hoodie (Common)"},
-		{"trait_type":"Level","value":0}
+	"id": "430163386",
+	"image": "https://resources.smartlayer.network/smartcat/reources/images/5dd1e0c18c15a714c10b643e821aee74.png",
+	"attributes": [
+		{ "trait_type": "Collection", "value": "SmartCats" },
+		{ "trait_type": "Hat", "value": "Bear Blue (Rare)" },
 	],
-	"description":"SmartCat#2426-2741836701",
-	"name":"SmartCat#2426-2741836701",
-	"animation_url":"https://viewer.tokenscript.org/?viewType=opensea&chain=137&contract=0xd5ca946ac1c1f24eb26dae9e1a53ba6a02bd97fe&tokenId=2741836701"
+	"description": "SmartCat#2426-430163386",
+	"name": "SmartCat#2426-430163386",
+	"animation_url": "https://viewer.tokenscript.org/?viewType=opensea&chain=137&contract=0xd5ca946ac1c1f24eb26dae9e1a53ba6a02bd97fe&tokenId=430163386"
 }
 ```
 
-AutographNFT Collection
+Viewer
+
+<div style={{ width: "100%", display: "flex", justifyContent: "center", marginTop: "40px" }}>
+	<iframe height="600px" width="570px" src="https://viewer.tokenscript.org/?viewType=opensea&chain=137&contract=0xd5ca946ac1c1f24eb26dae9e1a53ba6a02bd97fe&tokenId=430163386" />
+</div>
+
+#### AutographNFT Collection
+
+TokenURI
+
 ```
-  "image":"https://alchemynft.io/1/remix/0xd093f5b810e486039ee6e4852533a04b8679a4d6a1fcc60a58cb81447a6f732d.svg",
-	"attributes":[
-    {"trait_type":"Autograph","value":"@GridsAndDots"},
+ {
+	"id": "27",
+  "image": "https://alchemynft.io/1/remix/0xd093f5b810e486039ee6e4852533a04b8679a4d6a1fcc60a58cb81447a6f732d.svg",
+	"attributes": [
+    { "trait_type": "Autograph", "value": "@GridsAndDots" },
 	],
-	"description":"https://open.spotify.com/artist/7ba827SJSUU4l3AORy4Doy",
-	"name":"Grids & Dots - Hazey Jane",
-	"animation_url":"https://viewer.tokenscript.org/?viewType=opensea&chain=1&contract=0x222222222291749de47895c0c0a9b17e4fca8268&tokenId=27"
+	"description": "https://open.spotify.com/artist/7ba827SJSUU4l3AORy4Doy",
+	"name": "Grids & Dots - Hazey Jane",
+	"animation_url": "https://viewer.tokenscript.org/?viewType=opensea&chain=1&contract=0x222222222291749de47895c0c0a9b17e4fca8268&tokenId=27"
+ }
 ```
 
+Viewer
+
+<div style={{ width: "100%", display: "flex", justifyContent: "center", marginTop: "40px" }}>
+	<iframe height="600px" width="570px" src="https://viewer.tokenscript.org/?viewType=opensea&chain=1&contract=0x222222222291749de47895c0c0a9b17e4fca8268&tokenId=27"/>
+</div>
+
 Note that the tokenId in the URL matches the token ID for this metadata.
 
 Once you have edited all the metadata files, you can upload/replace them in their original location.