{address && ( )} ); } `,__src__:"registry/default/example/tapp-card-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" TappCard "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/tapp-card"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ConnectButton"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" RainbowKitProvider "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@rainbow-me/rainbowkit"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useAccount "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "wagmi"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@rainbow-me/rainbowkit/styles.css"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TappCardDemo"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" address "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useAccount"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"RainbowKitProvider"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"mb-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"ConnectButton showBalance"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={false}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"address "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"TappCard"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" chainId"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={11155111}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"0x3490FFc64A4E65aBb749317f7860E722Ba65a2b5"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"473843023"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cssClass"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-[800px] border"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(d,{defaultValue:"cli",children:[(0,e.jsxs)(p,{children:[(0,e.jsx)(i,{value:"cli",children:"CLI"}),(0,e.jsx)(i,{value:"manual",children:"Manual"})]}),(0,e.jsx)(o,{value:"cli",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @token-kit/cli@latest add tapp-card `,__npmCommand__:`npx @token-kit/cli@latest add tapp-card `,__yarnCommand__:`npx @token-kit/cli@latest add tapp-card `,__pnpmCommand__:`pnpm dlx @token-kit/cli@latest add tapp-card `,__bunCommand__:`bunx --bun @token-kit/cli@latest add tapp-card `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"npx"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" @token-kit/cli@latest"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" add"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" tapp-card"})]})})})})}),(0,e.jsx)(o,{value:"manual",children:(0,e.jsxs)(t,{children:[(0,e.jsx)(F,{children:"Copy and paste the following code into your project."}),(0,e.jsx)(r,{name:"tapp-card",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React, { useRef, useState, RefObject, useEffect } from "react"; import { useWalletClient } from "wagmi"; import { Card, CardContent, CardHeader } from "@/components/ui/card"; import { Skeleton } from "@/components/ui/skeleton"; import { cn } from "@/components/lib/utils"; export function TappCardSkeleton(props: { className?: string }) { return (

{[...Array(3)].map((_, index) => (

))}

); } interface TappCardProps { chainId: number; contract: \`0x\${string}\`; tokenId: string; cssClass?: string; } export function TappCard({ chainId, contract, tokenId, cssClass, }: TappCardProps) { const url = \`https://viewer-staging.tokenscript.org/?viewType=sts-token&chain=\${chainId}&contract=\${contract}&tokenId=\${tokenId}\`; const iframeRef = useRef(null); const [isLoaded, setIsLoaded] = useState(false); useIframePostMessage(iframeRef, url); const handleIframeLoad = () => { setIsLoaded(true); }; return ( <> {!isLoaded && } ); } export const useIframePostMessage = ( iframeRef: RefObject, targetOrigin: string, ) => { const { data: walletClient } = useWalletClient(); useEffect(() => { function sendResponse( messageData: MessageEvent["data"], response: unknown, error?: unknown, ) { const data = messageData; if (error) { data.error = error; } else { data.result = response; } iframeRef.current?.contentWindow?.postMessage(data, "*"); } const handleMessage = async (event: MessageEvent) => { if (!walletClient) { return; } if (!event.data.method) { 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_getCode": 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_call": case "eth_signTypedData": case "eth_signTypedData_v4": case "eth_getBlockByNumber": 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: unknown) { const error = e as CustomError; sendResponse(event.data, null, { code: error.data?.code ?? error.code, message: error.message + (error.data?.message ? " " + error.data?.message : ""), }); } }; window.addEventListener("message", handleMessage); return () => window.removeEventListener("message", handleMessage); }, [iframeRef, targetOrigin, walletClient]); }; interface CustomError extends Error { data?: { code?: number; message?: string }; code?: number; } `,__src__:"registry/default/ui/tapp-card.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" RefObject"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useWalletClient "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "wagmi"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Card"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" CardContent"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" CardHeader "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/card"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" Skeleton "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/skeleton"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TappCardSkeleton"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"props"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" string "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"})"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Card className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-[350px] overflow-hidden"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" props"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")}>"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"CardHeader className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"p-0"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Skeleton className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-full h-[200px]"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"CardContent className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"p-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Skeleton className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-8 w-3/4 mb-2"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Skeleton className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-4 w-full mb-4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"grid grid-cols-2 gap-x-4 gap-y-2"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {[..."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Array"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(3)]."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"map"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"_"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" index"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"div key"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"index"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"flex flex-col"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Skeleton className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-4 w-20 mb-1"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"Skeleton className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-5 w-28"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ))}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TappCardProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" chainId"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" number"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `0x${"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cssClass"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TappCard"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" chainId"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cssClass"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}:"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" TappCardProps"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" url "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" `https://viewer-staging.tokenscript.org/?viewType=sts-token&chain=${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"chainId"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}&contract=${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"contract"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}&tokenId=${"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"tokenId"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}`"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" iframeRef "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLIFrameElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">(null);"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"isLoaded"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setIsLoaded"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(false);"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useIframePostMessage"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"iframeRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" url"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleIframeLoad"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" setIsLoaded"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(true);"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <>"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {!"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"isLoaded "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"TappCardSkeleton "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"iframe"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" ref"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"iframeRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" src"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"url"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "mx-auto h-[650px] max-w-[500px] w-full iframe-placeholder"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" cssClass"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" onLoad"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"handleIframeLoad"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" "})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" useIframePostMessage"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" iframeRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" RefObject"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"HTMLIFrameElement"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:">,"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" targetOrigin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" walletClient "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useWalletClient"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" sendResponse"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" messageData"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" MessageEvent"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"data"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"],"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" response"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" unknown"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" error"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" unknown"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" data "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" messageData"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"error"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"error "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" error"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" else"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"result "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" response"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" iframeRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"contentWindow"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"postMessage"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "*"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" handleMessage"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" async"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" MessageEvent"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" (!"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"walletClient"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" (!"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"method"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" try"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" switch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"method"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_accounts"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_requestAccounts"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" data "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" await"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" walletClient"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"request"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" method"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" event"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"method"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" });"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" sendResponse"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" break;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_getCode"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_chainId"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "net_version"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_blockNumber"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_estimateGas"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_sendTransaction"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_getTransactionByHash"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_getTransactionReceipt"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_getTransactionCount"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "personal_sign"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_call"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_signTypedData"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_signTypedData_v4"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "eth_getBlockByNumber"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" case"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "wallet_switchEthereumChain"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" data "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" await"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" walletClient"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"request"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" method"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" event"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"method"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" params"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" event"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"params"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" });"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" sendResponse"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" break;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" default:"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" sendResponse"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" null,"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" code"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" -1,"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" message"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "RPC Method "'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" +"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" event"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"method "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"+"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' " is not implemented"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" break;"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" catch"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"e"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" unknown"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" error "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" e "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"as"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" CustomError"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" sendResponse"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"event"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" null,"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" code"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" error"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"code "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"??"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" error"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"code"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" message"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" error"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"message "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"+"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"error"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"message "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' " "'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" +"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" error"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"message "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' ""'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" });"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"addEventListener"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" handleMessage"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"removeEventListener"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"message"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" handleMessage"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"iframeRef"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" targetOrigin"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" walletClient"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"]);"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"interface"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" CustomError"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" extends"}),(0,e.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Error"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" data"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" code"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" number"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" message"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" string "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"};"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" code"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" number"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),(0,e.jsx)(F,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"usage",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import TappCard from "@/registry/default/ui/tapp-card"; `,children:(0,e.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" TappCard "}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/registry/default/ui/tapp-card"'}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]})})})}),` `,(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#FFF"},children:"TappCard"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" chainId"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"={11155111}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"0x3490FFc64A4E65aBb749317f7860E722Ba65a2b5"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId"}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:'"473843023"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})})]})})})]})}function u(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,{...n,children:(0,e.jsx)(N,{...n})}):N(n)}function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(R);})(); ;return Component;

Tapp Card

Installation

Usage