diff --git a/pages/styles.css b/pages/styles.css index 870409f..c39029c 100644 --- a/pages/styles.css +++ b/pages/styles.css @@ -9,3 +9,29 @@ .dark .dark-logo { display: none; } + +.row { + display: flex; + flex-wrap: wrap; + margin: 0 -16px; +} +.col-50 { + width: 50%; + padding: 0 16px; +} +@media screen and (max-width: 768px) { + .col-50 { + width: 100%; + } +} +.text-center { + text-align: center; +} + +.mt-20 { + margin-top: 20px; +} + +.mb-20 { + margin-bottom: 20px; +} \ No newline at end of file diff --git a/pages/tokenscript/_meta.json b/pages/tokenscript/_meta.json index 48c734a..6a30056 100644 --- a/pages/tokenscript/_meta.json +++ b/pages/tokenscript/_meta.json @@ -1,4 +1,5 @@ { "tokenscript-cli": "TokenScript CLI", - "extra-features": "Extra Features" + "extra-features": "Extra Features", + "wallets": "Wallets" } diff --git a/pages/tokenscript/extra-features/opensea_animation_url.mdx b/pages/tokenscript/extra-features/opensea_animation_url.mdx index 419677d..8327173 100644 --- a/pages/tokenscript/extra-features/opensea_animation_url.mdx +++ b/pages/tokenscript/extra-features/opensea_animation_url.mdx @@ -1 +1,104 @@ -- [] TODO: @Miccy +--- +description: Add Animation URL to the NFT metadata +--- + +# Animation URL + +OpenSea offers a MetaData solution to enrich NFTs with an additional dimension of media content. This new capability is enabled through `animation_url` a Token URI Metadata field that supports various types of media including; video, audio, HTML (SVG, WebGL and TokenScript). + +Example TokenURI JSON utilising the `animation_url` field + +```json +{ + "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} + ], + "description":"SmartCat#2426-2741836701", + "name":"SmartCat#2426-2741836701", + "animation_url":"https://viewer.tokenscript.org/?viewType=opensea&chain=137&contract=0xd5ca946ac1c1f24eb26dae9e1a53ba6a02bd97fe&tokenId=2741836701" +} +``` + +Once defined a market place that utilises animation_url will be able to enrich NFTs with the newly found content(s). + +Using TokenScript, users can interact with NFTs. In this example (screen shots below) the end user can click on the top left hand image to reveal more information about the token and collection. + +TokenScript screenshot 1 + +
+
+ TokenScript screenshot 1 + {/* Content for column 1 */} +
+
+ TokenScript screenshot 1 + {/* Content for column 2 */} +
+
+ +

Based on the type of Media, the image viewer can be designed to handle it accordingly.

+ +TokenScript screenshot 1 + +

(Stickman Toys NFT enriched with audio - player is added to token view)

+ +## Supporting animation_url + +To support `animation_url` functionality is required to safely read and identify the MetaData and MIME type from a TokenURI’s `animation_url` which can be used to render the content into a web view. HTML content is displayed using a sandboxed iframe. + +Following Opensea’s standard an `animation_url` solution should support the following file types: + +GLTF, GLB, WEBM, MP4, M4V, OGV, and OGG are supported, along with the audio-only extensions MP3, WAV, and OGA. HTML pages, allowing you to build rich experiences and interactive NFTs using JavaScript canvas, WebGL, and more. Scripts and relative paths within the HTML page are now supported. However, access to browser extensions is not supported. + +The maximum file size for media supported is 100MB. + +Pseudo code implementation example: + +```javascript +// Example NFT token metadata derived from RPC / Web3 API source +const nftMetadata = { + name: "Example NFT", + image: "https://example.com/web3-cats/1/example.png", + animation_url: "https://example.com/web3-cats/1/example.mp4", // Example animation URL +}; + +// Function to render media based on MIME type +function renderMedia(animationUrl) { + // Fetch the MIME type of the animation URL (example function) + const mimeType = getMimeType(animationUrl); + + // Render HTML based on MIME type + switch (mimeType) { + case 'video/mp4': + return ``; + case 'audio/mpeg': + return ``; + case 'text/html': + return ``; + default: + return; + } +} + +// Render the media based on metadata +if (nftMetadata.animation_url) { + const animationUrlMedia = renderMedia(nftMetadata.animation_url); + console.log(animationUrlMedia); +} else { + console.log("No animation URL provided - render NFT image only"); +} +``` + +## Example UI (with animation_url) + +TokenScript screenshot 1 + +## Resources + +[https://docs.opensea.io/docs/metadata-standards](https://docs.opensea.io/docs/metadata-standards) \ No newline at end of file diff --git a/pages/tokenscript/wallets/_meta.json b/pages/tokenscript/wallets/_meta.json new file mode 100644 index 0000000..b84a2bd --- /dev/null +++ b/pages/tokenscript/wallets/_meta.json @@ -0,0 +1,3 @@ +{ + "viewer-integration": "Integrate with TokenScript viewer" +} \ No newline at end of file diff --git a/pages/tokenscript/wallets/viewer-integration.mdx b/pages/tokenscript/wallets/viewer-integration.mdx new file mode 100644 index 0000000..c79c090 --- /dev/null +++ b/pages/tokenscript/wallets/viewer-integration.mdx @@ -0,0 +1,123 @@ +--- +description: Add TokenScript support to your own wallet using TokenScript viewer +--- + +# Integrate using TokenScript viewer + +The easiest way to integrate TokenScript into your wallet is using the TokenScript viewer integration solution. +Integrating in this way allows you to stay up to date with new TokenScript features without deploying new versions of your wallet. + +## Prerequisites + +This method currently requires that your wallet is a JavaScript/TypeScript application. +This includes web app frameworks like Ionic or Electron. +We are still working on a native integration that will allow native Android & iOS to embed TokenScript viewer in a similar way. +If you are interested in the native integration please reach out to us to voice your support. + +## The NFT details view + +TokenScript viewer provides a custom view that displays an NFT details screen and the actions for the corresponding TokenScript. +Here is an example: https://viewer.tokenscript.org/?viewType=sts-token&chain=137&contract=0xD5cA946AC1c1F24Eb26dae9e1A53ba6a02bd97Fe&tokenId=3803829543 + +If you require a different UI, please reach out to us. We would be happy to create a design which better reflects your wallets current UI. + +## Step 1: Open the viewer in an iframe + +Within your application, extend or replace your NFT details screen with an iframe that loads the following URL: +`https://viewer.tokenscript.org/?viewType=sts-token&chain=${CHAIN}&contract=${CONTRACT}&tokenId=${TOKEN_ID}` +(Note: you must replace the CHAIN, CONTRACT & TOKEN_ID with the dynamic values corresponding to the token selected in the wallet) + +## Step 2: Implement the postMessage listener for RPC + +The iframe will proxy any RPC requests through postMessage to the parent window where your wallet app runs. +To implement message & transaction signing, you must listen and process these requests. +This is different for each wallet, so we can only provide guidance and a simple example to help you along. + +Here is a self-contained example using MetaMask RPC provider & ethers.js: +``` + + + + + + + +
+ +
+ + + +``` + +As you can see, the code required is minimal. It simply forwards the request to your own RPC provider and returns the result back to the iframe. + +## Troubleshooting + +To test transactions you'll need a SmartToken and testnet support. STL can provide you with test tokens on Sepolia & Mumbai networks. +We will soon have a faucet on the Smart Token Store that will allow you to self-mint a SmartToken. + +You can email sayhi@smarttokenlabs.com for any questions or support. \ No newline at end of file