{address && ( )} ); } `,__src__:"registry/default/example/add-to-snap-demo.tsx",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" AddToSnap "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/components/ui/add-to-snap"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" ConnectButton"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" RainbowKitProvider "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@rainbow-me/rainbowkit"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useAccount "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "wagmi"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@rainbow-me/rainbowkit/styles.css"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" AddToSnapDemo"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" address "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useAccount"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"RainbowKitProvider"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"div className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"mb-4"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ConnectButton showBalance"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={false}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"address "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"AddToSnap"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" chain"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"11155111"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"0x3490FFc64A4E65aBb749317f7860E722Ba65a2b5"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"473843023"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cssClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-[129px]"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})})]})})})}),` `,(0,n.jsxs)(l.h2,{id:"installation",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,n.jsxs)(d,{defaultValue:"cli",children:[(0,n.jsxs)(p,{children:[(0,n.jsx)(i,{value:"cli",children:"CLI"}),(0,n.jsx)(i,{value:"manual",children:"Manual"})]}),(0,n.jsx)(o,{value:"cli",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx @token-kit/cli@latest add add-to-snap `,__npmCommand__:`npx @token-kit/cli@latest add add-to-snap `,__yarnCommand__:`npx @token-kit/cli@latest add add-to-snap `,__pnpmCommand__:`pnpm dlx @token-kit/cli@latest add add-to-snap `,__bunCommand__:`bunx --bun @token-kit/cli@latest add add-to-snap `,children:(0,n.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"npx"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" @token-kit/cli@latest"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" add"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" add-to-snap"})]})})})})}),(0,n.jsx)(o,{value:"manual",children:(0,n.jsxs)(t,{children:[(0,n.jsx)(F,{children:"Copy and paste the following code into your project."}),(0,n.jsx)(r,{name:"add-to-snap",children:(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import React, { useState, useCallback, useEffect, useRef } from "react"; import { cn } from "@/lib/utils"; type ADDRESSTYPE = \`0x\${string}\`; type Token = { chain: string; contract: ADDRESSTYPE; tokenId?: string; }; const SpinIcon = ({ className }: { className?: string }) => ( ); const DEFAULT_CSS = "flex justify-center min-w-32 max-w-40 bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50 "; const TAPP_SNAP_ID = process.env.NEXT_PUBLIC_TAPP_SNAP_ID || "npm:@token-kit/tapp-snap"; const SNAP_METHOD = "import"; interface AddToSnapProps { chain: string; contract: ADDRESSTYPE; tokenId?: string; title?: string; cssClass?: string; onSuccess?: (result: unknown) => void; onError?: (error: Error) => void; } export function AddToSnap({ chain, contract, tokenId, title, cssClass, onSuccess, onError, }: AddToSnapProps) { const { isMetaMaskInstalled, isSnapInstalled } = useMetaMaskStatus(TAPP_SNAP_ID); const [metadata, setMetadata] = useState({} as Token); useEffect(() => { const fetchMetadata = async () => { if (isMetaMaskInstalled && isSnapInstalled) { setMetadata({ chain, contract, tokenId }); } }; fetchMetadata(); }, [ chain, contract, isMetaMaskInstalled, isSnapInstalled, setMetadata, tokenId, ]); const handleSnapInstalled = useCallback(async () => { if (chain && contract) { setMetadata({ chain, contract, tokenId }); } }, [chain, contract, tokenId]); return ( ); } export const useMetaMaskStatus = (snapId: string) => { const [isMetaMaskInstalled, setIsMetaMaskInstalled] = useState(false); const [isSnapInstalled, setIsSnapInstalled] = useState(false); const checkSnapInstallation = useCallback(async () => { try { const snaps = (await window.ethereum.request({ method: "wallet_getSnaps", })) as Record; return snaps && !!snaps[snapId]; } catch (error) { console.error("Error checking snap installation:", error); return false; } }, [snapId]); const refreshSnapStatus = useCallback(async () => { const snapInstalled = await checkSnapInstallation(); setIsSnapInstalled(snapInstalled); }, [checkSnapInstallation]); useEffect(() => { const checkMetaMaskStatus = async () => { const isInstalled = typeof window.ethereum !== "undefined" && window.ethereum.isMetaMask; setIsMetaMaskInstalled(isInstalled); await refreshSnapStatus(); }; checkMetaMaskStatus(); }, [snapId]); return { isMetaMaskInstalled, isSnapInstalled, refreshSnapStatus }; }; interface MetaMaskSnapButtonProps { snapId: string; snapMethod: string; snapParams: unknown; title?: string; cssClass?: string; onSnapInstalled?: () => Promise; onSuccess?: (result: unknown) => void; onError?: (error: Error) => void; } export const MetaMaskSnapButton: React.FC = ({ snapId, snapMethod, snapParams, title = "Add to Snap", cssClass = DEFAULT_CSS, onSnapInstalled, onSuccess, onError, }) => { const { isMetaMaskInstalled, isSnapInstalled, refreshSnapStatus } = useMetaMaskStatus(snapId); const [isLoading, setIsLoading] = useState(false); const snapParamsRef = useRef(snapParams); const installSnap = useCallback(async () => { try { await window.ethereum.request({ method: "wallet_requestSnaps", params: { [snapId]: {} }, }); return true; } catch (error) { console.error("Error installing snap:", error); onError?.( error instanceof Error ? error : new Error("Failed to install snap"), ); return false; } }, [snapId, onError]); const invokeSnap = useCallback(async () => { console.log(snapParamsRef.current); try { const result = await window.ethereum.request({ method: "wallet_invokeSnap", params: { snapId, request: { method: snapMethod, params: snapParamsRef.current }, }, }); onSuccess?.(result); } catch (error) { console.error("Error invoking snap:", error); onError?.( error instanceof Error ? error : new Error("Failed to invoke snap"), ); } }, [snapId, snapMethod, onSuccess, onError]); useEffect(() => { snapParamsRef.current = snapParams; }, [snapParams]); const handleClick = useCallback(async () => { setIsLoading(true); try { if (!isMetaMaskInstalled) { window.open("https://metamask.io/download/", "_blank"); } else { if (!isSnapInstalled) { const installed = await installSnap(); if (installed) { await refreshSnapStatus(); // \u5237\u65B0 Snap \u5B89\u88C5\u72B6\u6001 if (onSnapInstalled) { await onSnapInstalled(); await new Promise((resolve) => setTimeout(resolve, 500)); } } } await invokeSnap(); } } catch (error) { console.error("Error:", error); onError?.( error instanceof Error ? error : new Error("Unknown error occurred"), ); } finally { setIsLoading(false); } }, [ isMetaMaskInstalled, isSnapInstalled, invokeSnap, installSnap, refreshSnapStatus, onSnapInstalled, onError, ]); let buttonText = title; if (!isMetaMaskInstalled) { buttonText = "Install MetaMask"; } else if (isSnapInstalled) { buttonText = title; } return ( ); }; `,__src__:"registry/default/ui/add-to-snap.tsx",__style__:"default",children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useRef "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "react"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cn "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/lib/utils"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ADDRESSTYPE"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" `0x${"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}`"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"type"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Token"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" chain"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ADDRESSTYPE"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" SpinIcon"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"svg"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" xmlns"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"http://www.w3.org/2000/svg"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"none"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" viewBox"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"0 0 24 24"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"circle"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"opacity-25"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cx"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"12"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cy"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"12"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" r"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"10"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" stroke"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" strokeWidth"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"4"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"path"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"opacity-75"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" fill"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"currentColor"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" d"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" DEFAULT_CSS "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "flex justify-center min-w-32 max-w-40 bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50 "'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" TAPP_SNAP_ID "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" process"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"env"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"NEXT_PUBLIC_TAPP_SNAP_ID "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"||"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "npm:@token-kit/tapp-snap"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" SNAP_METHOD "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "import"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" AddToSnapProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" chain"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" ADDRESSTYPE"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cssClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onSuccess"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"result"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" unknown"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" void"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" void"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" function"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" AddToSnap"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" chain"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cssClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onSuccess"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}:"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" AddToSnapProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isMetaMaskInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isSnapInstalled "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useMetaMaskStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"TAPP_SNAP_ID"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"metadata"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setMetadata"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"Token"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">({}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Token"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" fetchMetadata"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" async"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isMetaMaskInstalled "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setMetadata"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" chain"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"});"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" fetchMetadata"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" chain"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isMetaMaskInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setMetadata"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ]);"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleSnapInstalled "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(async"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"chain "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setMetadata"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"({"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" chain"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"});"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"chain"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"MetaMaskSnapButton"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"TAPP_SNAP_ID"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapMethod"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"SNAP_METHOD"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapParams"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"metadata"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cssClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cssClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"handleSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onSuccess"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"onSuccess"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"onError"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" useMetaMaskStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snapId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isMetaMaskInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsMetaMaskInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(false);"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(false);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" checkSnapInstallation "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(async"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" try"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snaps "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" (await"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ethereum"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"request"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" method"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "wallet_getSnaps"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }))"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" as"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Record"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" unknown"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">;"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snaps "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"&&"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" !!"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snaps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snapId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"];"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" catch"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" console"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"Error checking snap installation:"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" false;"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snapId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" refreshSnapStatus "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(async"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapInstalled "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" await"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" checkSnapInstallation"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"checkSnapInstallation"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" checkMetaMaskStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" async"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isInstalled "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" typeof"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ethereum "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"!=="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "undefined"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" &&"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ethereum"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isMetaMask"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsMetaMaskInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" await"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" refreshSnapStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" };"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" checkMetaMaskStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snapId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isMetaMaskInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" refreshSnapStatus "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"};"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"};"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"interface"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" MetaMaskSnapButtonProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapMethod"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapParams"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" unknown"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cssClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" string"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Promise"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"void"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">;"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onSuccess"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"result"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" unknown"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" void"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?:"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" void"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" MetaMaskSnapButton"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" React"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"FC"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:"MetaMaskSnapButtonProps"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:">"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapMethod"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapParams"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Add to Snap"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cssClass "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" DEFAULT_CSS"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onSuccess"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"})"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isMetaMaskInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" refreshSnapStatus "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useMetaMaskStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snapId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isLoading"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsLoading"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useState"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(false);"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapParamsRef "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snapParams"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" installSnap "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(async"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" try"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" await"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ethereum"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"request"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" method"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "wallet_requestSnaps"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" params"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snapId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]:"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {}"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" });"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" true;"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" catch"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" console"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"Error installing snap:"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?.("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" error "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"instanceof"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" error "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"Failed to install snap"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" false;"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snapId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" invokeSnap "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(async"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" console"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"log"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snapParamsRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"current"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" try"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" result "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" await"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"ethereum"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"request"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" method"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "wallet_invokeSnap"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" params"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" request"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" method"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapMethod"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" params"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapParamsRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"current "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"},"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" });"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onSuccess"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?.("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"result"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" catch"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" console"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"Error invoking snap:"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?.("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" error "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"instanceof"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" error "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"Failed to invoke snap"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snapId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapMethod"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onSuccess"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useEffect"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapParamsRef"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"current "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" snapParams"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"snapParams"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"]);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" handleClick "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" useCallback"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(async"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ()"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsLoading"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(true);"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" try"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" (!"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isMetaMaskInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" window"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"open"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"https://metamask.io/download/"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "_blank"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" else"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" (!"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" const"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" installed "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" await"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" installSnap"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"installed"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" await"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" refreshSnapStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"();"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" //"}),(0,n.jsx)(l.span,{style:{color:"#FFF4"},children:" \u5237\u65B0 Snap \u5B89\u88C5\u72B6\u6001"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"onSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" await"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" await"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Promise"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"resolve"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" =>"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setTimeout"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"resolve"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" 500));"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" await"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" invokeSnap"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"();"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" catch"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" console"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"."}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"Error:"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:");"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?.("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" error "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"instanceof"}),(0,n.jsx)(l.span,{style:{color:"#FFF",fontWeight:"bold"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ?"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" error "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:":"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" new"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" Error"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"Unknown error occurred"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"),"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" finally"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" setIsLoading"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"(false);"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" },"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ["})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isMetaMaskInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" isSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" invokeSnap"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" installSnap"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" refreshSnapStatus"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onError"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ]);"})}),` `,(0,n.jsx)(l.span,{className:"line",children:" "}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" let"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" buttonText "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" (!"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isMetaMaskInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" buttonText "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "Install MetaMask"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" else"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" if"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isSnapInstalled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" buttonText "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" title"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" }"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" return"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"button"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" onClick"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"handleClick"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" disabled"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isLoading"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"cn"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"("}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"DEFAULT_CSS"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:","}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cssClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:")}"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" >"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" {"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"isLoading "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"?"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <>"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" <"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"SpinIcon className"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"h-5 w-5 animate-spin text-white"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" />"})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" :"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" ("})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" buttonText"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" )}"})}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" "})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:" );"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"};"})})]})})})}),(0,n.jsx)(F,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,n.jsxs)(l.h2,{id:"usage",children:[(0,n.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#usage",children:(0,n.jsx)(l.span,{className:"icon icon-link"})}),"Usage"]}),` `,(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import AddToSnap from "@/registry/default/ui/add-to-snap"; `,children:(0,n.jsx)(l.code,{"data-language":"tsx","data-theme":"default",children:(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"import"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" AddToSnap "}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"from"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:' "@/registry/default/ui/add-to-snap"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:";"})]})})})}),` `,(0,n.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,n.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:` /> `,children:(0,n.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"<"}),(0,n.jsx)(l.span,{style:{color:"#FFF"},children:"AddToSnap"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" chain"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"={"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"11155111"'}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"}"})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" contract"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"0x3490FFc64A4E65aBb749317f7860E722Ba65a2b5"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" tokenId"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"473843023"'})]}),` `,(0,n.jsxs)(l.span,{className:"line",children:[(0,n.jsx)(l.span,{style:{color:"#FFF"},children:" cssClass"}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"="}),(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:'"w-[129px]"'})]}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})}),` `,(0,n.jsx)(l.span,{className:"line",children:(0,n.jsx)(l.span,{style:{color:"#FFF8"},children:"/>"})})]})})})]})}function u(e={}){let{wrapper:l}=e.components||{};return l?(0,n.jsx)(l,{...e,children:(0,n.jsx)(N,{...e})}):N(e)}function c(e,l){throw new Error("Expected "+(l?"component":"object")+" `"+e+"` to be defined: you likely forgot to import, pass, or provide it.")}return _(P);})(); ;return Component;

Add to snap

Installation

Usage