From d589d87186fb4189068535870aeecfb56c00891b Mon Sep 17 00:00:00 2001 From: Michael Wallace Date: Tue, 4 Jun 2024 13:58:55 +1000 Subject: [PATCH] feat: Improve application integration guide --- pages/advance/_meta.json | 2 +- pages/advance/integrate-wallet.mdx | 110 +++++++++++++++++++++++++++-- 2 files changed, 107 insertions(+), 5 deletions(-) diff --git a/pages/advance/_meta.json b/pages/advance/_meta.json index 65ec33a..3bbe269 100644 --- a/pages/advance/_meta.json +++ b/pages/advance/_meta.json @@ -4,6 +4,6 @@ "display": "hidden" }, "tokenscript-syntax": { "title": "TokenScript Syntax", "display": "hidden" }, - "integrate-wallet": "Integrate to wallets", + "integrate-wallet": "Integrate wallets & webpages", "extra-features": "Extra Features" } diff --git a/pages/advance/integrate-wallet.mdx b/pages/advance/integrate-wallet.mdx index 6dd047a..60317eb 100644 --- a/pages/advance/integrate-wallet.mdx +++ b/pages/advance/integrate-wallet.mdx @@ -1,6 +1,10 @@ -# Integrate to wallets +# Integrate into applications + +The easiest way to integrate TokenScript into your application is using the TokenScript viewer. +Integrating in this way allows you to stay up to date with new TokenScript features without deploying new versions of your wallet. In this integration guide, we will guide you how to support [TokenScript](https://www.tokenscript.org/) and [EIP-5169](https://eips.ethereum.org/EIPS/eip-5169) as a wallet provider like [JoyId](https://x.com/joy_protocol/status/1728309508605423766?s=20) and [Alphawallet](https://alphawallet.com/). +You can also embed TokenScript viewer into any webpage, such as NFT marketplaces & portfolio apps. ## Checking for TokenScripts @@ -28,16 +32,26 @@ async function getScriptUri(chain: string, contractAddr: string) { } ``` -## Integrate into a web application wallet +## Integrate into a web application wallet or other webpage Web integration uses an iframe to embed a token details screen with TokenScript support. -We will use NextJS and wagmi as an example, but the idea is the same for any other tech stack. +We will use a NextJS/wagmi and ethers.js example, but the idea is the same for any other tech stack. + +## The token 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 iFrame Check if the NFT contract implements TokenScript using the API above, if yes, -then you can use the first value of `scriptURI` to load TokenScript Viewer iframe. +then you can use the first value of `scriptURI` or `offchain` to load TokenScript Viewer iframe. + +`offchain` are scripts linked using the launchpad API which is an alternative for contract that do not implement the scriptURI (ERC-5169) standard. +With Next.js/wagmi: ```jsx copy filename="app/[chainId]/[contract]/[tokenId]/page.tsx" export default function AppPageContent({ params, @@ -87,8 +101,14 @@ function addQueriesToUrl( } ``` +Note: For ERC-20 tokens, simply omit the tokenId parameter. + ### Step 2: implement TokenScript RPC requirements +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. + +With Next.js/wagmi: ```jsx copy import { RefObject, useEffect } from "react" import { useWalletClient } from "wagmi" @@ -177,6 +197,88 @@ export const useIframePostMessage = ( } ``` +With 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. + ## Integrate into a native wallet application The process of native integration is similar to web application integration,