feat: Add TS viewer wallet integration guide

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;
+}

pages/tokenscript/_meta.json

@@ -1,4 +1,5 @@
 {
   "tokenscript-cli": "TokenScript CLI",
-  "extra-features": "Extra Features"
+  "extra-features": "Extra Features",
+  "wallets": "Wallets"
 }

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.
+
+<img class="mt-20" src="https://resources.smartlayer.network/images/launchpad-docs/ts_screen_1.jpg" alt="TokenScript screenshot 1" />
+
+<div className="row">
+  <div className="col-50 mt-20">
+    <img src="https://resources.smartlayer.network/images/launchpad-docs/ts_screen_2.jpg" alt="TokenScript screenshot 1" />
+    {/* Content for column 1 */}
+  </div>
+  <div className="col-50 mt-20">
+    <img src="https://resources.smartlayer.network/images/launchpad-docs/ts_screen_3.jpg" alt="TokenScript screenshot 1" />
+    {/* Content for column 2 */}
+  </div>
+</div>
+
+<p class="text-center mt-20 mb-20">Based on the type of Media, the image viewer can be designed to handle it accordingly.</p>
+
+<img src="https://resources.smartlayer.network/images/launchpad-docs/ts_screen_4.jpg" alt="TokenScript screenshot 1" />
+
+<p class="text-center mt-20 mb-20">(Stickman Toys NFT enriched with audio - player is added to token view)</p>
+
+## 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 `<video src="${animationUrl}" controls autoplay loop></video>`;
+        case 'audio/mpeg':
+            return `<audio src="${animationUrl}" controls autoplay></audio>`;
+        case 'text/html':
+            return `<iframe sandbox="true" src="${animationUrl}"></iframe>`;
+        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)
+
+<img class="mt-20" src="https://resources.smartlayer.network/images/launchpad-docs/ts_screen_5.jpg" alt="TokenScript screenshot 1" />
+
+## Resources
+
+[https://docs.opensea.io/docs/metadata-standards](https://docs.opensea.io/docs/metadata-standards)

pages/tokenscript/wallets/_meta.json

@@ -0,0 +1,3 @@
+{
+    "viewer-integration": "Integrate with TokenScript viewer"
+}

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:
+```
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8"/>
+		<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/5.7.2/ethers.umd.min.js" integrity="sha512-FDcVY+g7vc5CXANbrTSg1K5qLyriCsGDYCE02Li1tXEYdNQPvLPHNE+rT2Mjei8N7fZbe0WLhw27j2SrGRpdMg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
+	</head>
+	<body style="margin: 0;">
+		<div style="max-width: 600px; width: 100%; margin: 0 auto; position: relative; height: 100dvh;">
+			<iframe id="frame" src="https://viewer.tokenscript.org/?viewType=sts-token&chain=137&contract=0xD5cA946AC1c1F24Eb26dae9e1A53ba6a02bd97Fe&tokenId=3803829543"style="border: 0; width: 100%; height: 100%;"></iframe>
+		</div>
+		<script>
+			const BASE_URL = "https://viewer.tokenscript.org";
+
+			// Metamask provider
+			const provider = new ethers.providers.Web3Provider(window.ethereum);
+			const iframe = document.getElementById("frame");
+
+			window.addEventListener("message", async (message) => {
+				if (message.origin !== BASE_URL)
+					return;
+
+				if (message.data.jsonrpc !== "2.0")
+					return;
+
+				console.log("[IFRAME_RPC] request received: ", message);
+
+				try {
+					switch (message.data.method) {
+						case "eth_accounts":
+						case "eth_requestAccounts":
+							await window.ethereum.enable();
+							const accounts = await provider.listAccounts();
+							sendResponse(message.data, accounts);
+							break;
+						case "eth_chainId":
+						case "net_version":
+						case "eth_blockNumber":
+						case "eth_estimateGas":
+						case "eth_sendTransaction":
+						case "eth_getTransactionByHash":
+						case "eth_getTransactionReceipt":
+						case "eth_getTransactionCount":
+						case "personal_sign":
+						case "eth_signTypedData":
+						case "wallet_switchEthereumChain":
+							const result = await provider.send(message.data.method, message.data.params);
+							sendResponse(message.data, result);
+							break;
+
+						default:
+							sendResponse(message.data, null, {code: -1, message: "RPC Method " + message.data.method + " is not implemented"});
+					}
+				} catch (e){
+					console.error(e);
+					sendResponse(message.data, null, {
+						code: e.code,
+						message: e.message
+					});
+				}
+			});
+
+			function sendResponse(messageData, response, error){
+
+				const data = messageData;
+
+				if (response){
+					data.result = response;
+				} else {
+					data.error = error;
+				}
+
+				iframe.contentWindow.postMessage(data, BASE_URL);
+			}
+		</script>
+	</body>
+</html>
+```
+
+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 [email protected] for any questions or support.