From 3badc5870b263763601d9336c13102b93ad47d83 Mon Sep 17 00:00:00 2001
From: futantan <luckytantanfu@gmail.com>
Date: Mon, 18 Dec 2023 11:32:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=F0=9F=8E=B8=20trigger=20ci?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/_meta.json                       |   1 +
 pages/integrate-wallet.mdx             | 150 +++++++++++++++++++++++++
 pages/tokenscript/_meta.json           |   3 +-
 pages/tokenscript/integrate-wallet.mdx |   1 -
 4 files changed, 152 insertions(+), 3 deletions(-)
 create mode 100644 pages/integrate-wallet.mdx
 delete mode 100644 pages/tokenscript/integrate-wallet.mdx

diff --git a/pages/_meta.json b/pages/_meta.json
index d358701..5aab6d8 100644
--- a/pages/_meta.json
+++ b/pages/_meta.json
@@ -2,6 +2,7 @@
   "index": "Introduction",
   "store": "Smart Token Store",
   "tokenscript": "TokenScript",
+  "integrate-wallet": "Integrate to wallets",
   "storeWebsite": {
     "title": "Store ↗",
     "type": "page",
diff --git a/pages/integrate-wallet.mdx b/pages/integrate-wallet.mdx
new file mode 100644
index 0000000..544af11
--- /dev/null
+++ b/pages/integrate-wallet.mdx
@@ -0,0 +1,150 @@
+# Integrate to wallets
+
+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/).
+
+We will use NextJS and wagmi as an example, but the idea is the same for any other tech stack.
+
+## Step 1: Add support for EIP-5169
+
+Check if the NFT contract implements EIP-5169, if yes, then you can use the first value of `scriptURI` to load TokenScript Viewer iframe.
+
+```jsx copy filename="app/[chainId]/[contract]/[tokenId]/page.tsx"
+export default function AppPageContent({
+  params,
+}: {
+  params: {
+    chainId: string
+    contract: string
+    tokenId: string
+  }
+}) {
+  const chainId = parseInt(params.chainId, 10)
+  const { address } = useAccount()
+
+  // read contract to get scriptURI content, need to check if it's a valid tokenscript url
+  const { scriptURI } = useGetTokenScriptURI(params.contract, chainId)
+  const iframeRef = useRef<HTMLIFrameElement>(null)
+
+  const dAppUrl = addQueriesToUrl(`${env.NEXT_PUBLIC_TOKENSCRIPT_VIEW_URL}`, {
+    chainId: params.chainId,
+    contract: params.contract,
+    tokenId: params.tokenId,
+    viewType: "sts-token",
+    chain: chainId.toString(),
+    tokenscriptUrl: encodeURIComponent(scriptURI),
+  })
+
+  useIframePostMessage(iframeRef, dAppUrl)
+
+  return (
+    <iframe
+      key={`${chainId}-${params.contract}-${params.tokenId}-${address}`}
+      ref={iframeRef}
+      src={dAppUrl}
+    />
+  )
+}
+
+function addQueriesToUrl(
+  url: string,
+  params: { [key: string]: string }
+): string {
+  const result = new URL(url)
+  Object.entries(params).forEach(([key, value]) => {
+    result.searchParams.append(key, value)
+  })
+  return result.toString()
+}
+```
+
+## Step 2: implement TokenScript RPC requirements
+
+```jsx copy
+import { RefObject, useEffect } from "react"
+import { useWalletClient } from "wagmi"
+
+export const useIframePostMessage = (
+  iframeRef: RefObject<HTMLIFrameElement>,
+  targetOrigin: string
+) => {
+  const { data: walletClient } = useWalletClient()
+
+  useEffect(() => {
+    function sendResponse(
+      messageData: MessageEvent["data"],
+      response: any,
+      error?: any
+    ) {
+      const data = messageData
+
+      if (response) {
+        data.result = response
+      } else {
+        data.error = error
+      }
+
+      iframeRef.current?.contentWindow?.postMessage(data, targetOrigin)
+    }
+
+    const handleMessage = async (event: MessageEvent) => {
+      if (!walletClient) {
+        return
+      }
+
+      try {
+        switch (event.data.method) {
+          case "eth_accounts":
+          case "eth_requestAccounts": {
+            const data = await walletClient.request({
+              method: event.data.method,
+            })
+            sendResponse(event.data, data)
+            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 data = await walletClient.request({
+              method: event.data.method,
+              params: event.data.params,
+            })
+            sendResponse(event.data, data)
+            break
+          }
+
+          default:
+            sendResponse(event.data, null, {
+              code: -1,
+              message:
+                "RPC Method " + event.data.method + " is not implemented",
+            })
+            break
+        }
+      } catch (e: any) {
+        const innerError = e.walk()
+
+        if (innerError) e = innerError
+
+        sendResponse(event.data, null, {
+          code: e.data?.code ?? e.code,
+          message: e.message + (e.data?.message ? " " + e.data?.message : ""),
+        })
+      }
+    }
+
+    window.addEventListener("message", handleMessage)
+
+    return () => window.removeEventListener("message", handleMessage)
+  }, [iframeRef, targetOrigin, walletClient])
+}
+```
+
+That's it, you can now ready with TokenScript and EIP-5169.
diff --git a/pages/tokenscript/_meta.json b/pages/tokenscript/_meta.json
index 8053bec..48c734a 100644
--- a/pages/tokenscript/_meta.json
+++ b/pages/tokenscript/_meta.json
@@ -1,5 +1,4 @@
 {
   "tokenscript-cli": "TokenScript CLI",
-  "extra-features": "Extra Features",
-  "integrate-wallet": "Integrate to wallets"
+  "extra-features": "Extra Features"
 }
diff --git a/pages/tokenscript/integrate-wallet.mdx b/pages/tokenscript/integrate-wallet.mdx
deleted file mode 100644
index e0fa26a..0000000
--- a/pages/tokenscript/integrate-wallet.mdx
+++ /dev/null
@@ -1 +0,0 @@
-# Integrate to wallets