"use strict"; const {jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", p: "p", pre: "pre", span: "span", strong: "strong", ..._provideComponents(), ...props.components }, {CodeBlock, Heading, Tab, Tabs, View, Warning} = _components; if (!CodeBlock) _missingMdxReference("CodeBlock", true); if (!Heading) _missingMdxReference("Heading", true); if (!Tab) _missingMdxReference("Tab", true); if (!Tabs) _missingMdxReference("Tabs", true); if (!View) _missingMdxReference("View", true); if (!Warning) _missingMdxReference("Warning", true); return _jsxs(View, { title: "React", icon: "react", children: [_jsxs(_components.p, { children: ["Once a user has connected their wallet to your app, and the wallet is available in either of the ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "useWallets" }) }), " arrays, you can also prompt them to ", _jsx(_components.strong, { children: "login" }), " with that wallet or ", _jsx(_components.strong, { children: "link" }), " that wallet to their existing account, instead of prompting the entire ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "login" }) }), " or ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "linkWallet" }) }), " flow."] }), _jsxs(_components.p, { children: ["To do so, find the ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "ConnectedWallet" }) }), " or ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "ConnectedStandardSolanaWallet" }) }), " object from Privy, and call the object’s ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "loginOrLink" }) }), " method for EVM wallets and use the ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "useLoginWithSiws" }) }), " or ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "useLinkWithSiws" }) }), " hooks for the Solana wallets:"] }), _jsxs(Tabs, { children: [_jsx(Tab, { title: "EVM", id: "evm", children: _jsx(CodeBlock, { filename: "", numberOfLines: "5", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "5", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useWallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/react-auth'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "..." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "wallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useWallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "..." }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "wallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "[" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "loginOrLink" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n"] }) }) }) }), _jsx(Tab, { title: "Solana", id: "solana", children: _jsx(CodeBlock, { filename: "", numberOfLines: "11", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "11", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "base64" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@scure/base'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useLoginWithSiws" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/react-auth'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useWallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/react-auth/solana'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "wallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useWallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "generateSiwsMessage" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "loginWithSiws" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useLoginWithSiws" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " message" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " generateSiwsMessage" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "({" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "address:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " wallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "[" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "address" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "});" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " encodedMessage" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " new" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " TextEncoder" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "()." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "encode" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "message" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "signature" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " wallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "[" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "signMessage" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "({" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "message:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " encodedMessage" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "});" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " loginWithSiws" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "({" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "message" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "signature:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " base64" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "encode" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "signature" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")});" })] }), "\n"] }) }) }) })] }), _jsxs(_components.p, { children: ["When called, ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "loginOrLink" }) }), " will directly request a ", _jsx(_components.a, { href: "https://docs.login.xyz/general-information/siwe-overview/eip-4361", children: "SIWE" }), " signature from the user’s connected wallet to authenticate the wallet."] }), _jsxs(_components.p, { children: ["If the user was not ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "authenticated" }) }), " when the method was called, the user will become ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "authenticated" }) }), " after signing the message."] }), _jsxs(_components.p, { children: ["If the user was already ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "authenticated" }) }), " when the method was called, the user will remain ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "authenticated" }) }), " after signing the message, and the connected wallet will become one of the user’s ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "linkedAccounts" }) }), " in their ", _jsx(_components.strong, { children: _jsx(_components.code, { children: "user" }) }), " object."] }), _jsx(_components.p, { children: "You might use the methods above to “split up” the connect and sign steps of external wallet login, like so:" }), _jsxs(Tabs, { children: [_jsx(Tab, { title: "EVM", id: "evm-2", children: _jsx(CodeBlock, { filename: "", numberOfLines: "21", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "21", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useConnectWallet" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useWallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/react-auth'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " WalletButton" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#D4D4D4" }, children: "() " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "connectWallet" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useConnectWallet" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "wallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useWallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "// Prompt user to connect a wallet with Privy modal" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "/* Button to connect wallet */" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "button" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "connectWallet" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Connect wallet" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "/* Button to login with or link the most recently connected wallet */" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "button" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " disabled" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "!" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "wallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "[" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "() " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " { " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "wallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "[" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "loginOrLink" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "() }" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Login with wallet" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ");" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n"] }) }) }) }), _jsx(Tab, { title: "Solana", id: "solana-2", children: _jsx(CodeBlock, { filename: "", numberOfLines: "30", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "30", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "base64" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@scure/base'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useConnectWallet" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useLoginWithSiws" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/react-auth'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useWallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/react-auth/solana'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " WalletButton" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#D4D4D4" }, children: "() " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "connectWallet" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useConnectWallet" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "wallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useWallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "generateSiwsMessage" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "loginWithSiws" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useLoginWithSiws" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "()" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: " // Prompt user to connect a wallet with Privy modal" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "/* Button to connect wallet */" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "button" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "connectWallet" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Connect wallet" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " " })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "/* Button to login with the most recently connected wallet */" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#569CD6" }, children: "button" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " disabled" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "!" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "wallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "[" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " onClick" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{async" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " () " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "=>" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " message" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " generateSiwsMessage" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "({" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "address:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " wallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "[" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "address" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "})" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: " encodedMessage" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: " =" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " new" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " TextEncoder" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "()." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "encode" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "message" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " const" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#4FC1FF" }, children: "signature" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " wallets" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "[" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#B5CEA8" }, children: "0" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "]." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "signMessage" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "({" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "message:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " encodedMessage" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "})" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " await" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " loginWithSiws" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "({" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "message" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ", " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "signature:" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: " base64" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "." }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: "encode" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "(" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "signature" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ")})" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " }" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " >" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " Login with wallet" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " );" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n"] }) }) }) })] }), _jsx(Heading, { level: "3", id: "sign-in-with-ledger", children: "Sign in with Ledger" }), _jsx(Heading, { level: "4", id: "evm", children: "EVM" }), _jsx(_components.p, { children: "For EVM chains, Ledger is supported automatically when connecting through another wallet like MetaMask or Phantom. No additional configuration is required." }), _jsx(Heading, { level: "4", id: "solana", children: "Solana" }), _jsxs(_components.p, { children: ["Ledger Solana hardware wallets only support transaction signatures, not the message signatures required\nfor Sign-In With Solana (SIWS) authentication. In order to authenticate with a Solana Ledger wallet,\nyou must mount the ", _jsx(_components.code, { children: "useSolanaLedgerPlugin" }), " hook ", _jsx(_components.strong, { children: "inside" }), " your ", _jsx(_components.code, { children: "PrivyProvider" }), "."] }), _jsx(Warning, { children: _jsxs(_components.p, { children: [_jsx(_components.strong, { children: "Critical:" }), " The ", _jsx(_components.code, { children: "useSolanaLedgerPlugin" }), " hook ", _jsx(_components.strong, { children: "must be placed inside" }), " a component that is\nwrapped by ", _jsx(_components.code, { children: "PrivyProvider" }), ". If the hook is placed alongside or outside the ", _jsx(_components.code, { children: "PrivyProvider" }), ", it\nwill not function correctly."] }) }), _jsx(CodeBlock, { filename: "", numberOfLines: "17", language: "tsx", children: _jsx(_components.pre, { className: "shiki shiki-themes github-light-default dark-plus", style: { backgroundColor: "#ffffff", "--shiki-dark-bg": "#0B0C0E", color: "#1f2328", "--shiki-dark": "#D4D4D4" }, language: "tsx", children: _jsxs(_components.code, { language: "tsx", numberOfLines: "17", children: [_jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "PrivyProvider" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/react-auth'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "import" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " {" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#9CDCFE" }, children: "useSolanaLedgerPlugin" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "} " }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "from" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: " '@privy-io/react-auth/solana'" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " SolanaLedgerSetup" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "() {" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: " // This hook MUST be called inside a component wrapped by PrivyProvider" }) }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " useSolanaLedgerPlugin" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "();" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#569CD6" }, children: " null" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: ";" })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n", _jsx(_components.span, { className: "line" }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: "export" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " default" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " function" }), _jsx(_components.span, { style: { color: "#8250DF", "--shiki-dark": "#DCDCAA" }, children: " App" }), _jsx(_components.span, { style: { color: "#953800", "--shiki-dark": "#D4D4D4" }, children: "() " }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#C586C0" }, children: " return" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " (" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "PrivyProvider" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " appId" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#0A3069", "--shiki-dark": "#CE9178" }, children: "\"your-app-id\"" }), _jsx(_components.span, { style: { color: "#0550AE", "--shiki-dark": "#9CDCFE" }, children: " config" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "=" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "{" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "{" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#D4D4D4" }, children: "..." }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: ">" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " <" }), _jsx(_components.span, { style: { color: "#116329", "--shiki-dark": "#4EC9B0" }, children: "SolanaLedgerSetup" }), _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " />" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: " {" }), _jsx(_components.span, { style: { color: "#6E7781", "--shiki-dark": "#6A9955" }, children: "/* Your app components */" }), _jsx(_components.span, { style: { color: "#CF222E", "--shiki-dark": "#569CD6" }, children: "}" })] }), "\n", _jsxs(_components.span, { className: "line", children: [_jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#808080" }, children: " " })] }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: " );" }) }), "\n", _jsx(_components.span, { className: "line", children: _jsx(_components.span, { style: { color: "#1F2328", "--shiki-dark": "#D4D4D4" }, children: "}" }) }), "\n"] }) }) }), _jsx(_components.p, { children: "Then, when you attempt to login with a Phantom Solana wallet, you will be prompted to indicate whether you are signing with a Ledger wallet,\nwhich will initiate a separate SIWS flow wherein which a no-op transaction will be signed and used for verification." })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }

External wallets

Setup

Usage

Ethereum

Solana

Documentation Index