> ## Documentation Index > Fetch the complete documentation index at: https://docs.rhinestone.dev/llms.txt > Use this file to discover all available pages before exploring further. # Create a session > Grant scoped authority to an app-held session key, persist it, and execute without another wallet prompt. export const CSS = ".rhinestone-1auth-demo .grant-demo {\n display: flex;\n flex-direction: column;\n gap: 1rem;\n}\n.rhinestone-1auth-demo .grant-demo-header, .rhinestone-1auth-demo .grant-demo-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n}\n.rhinestone-1auth-demo .grant-demo-eyebrow {\n margin: 0 0 0.25rem;\n font-size: 0.75rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.06em;\n color: light-dark(#71717a, #a1a1aa);\n}\n.rhinestone-1auth-demo .grant-demo-title {\n margin: 0;\n font-size: 1.05rem;\n font-weight: 600;\n color: light-dark(#18181b, #fafafa);\n}\n.rhinestone-1auth-demo .grant-demo-pill {\n flex-shrink: 0;\n border-radius: 999px;\n padding: 0.25rem 0.625rem;\n font-size: 0.75rem;\n font-weight: 600;\n}\n.rhinestone-1auth-demo .grant-demo-pill-neutral {\n background: light-dark(#e4e4e7, #27272a);\n color: light-dark(#3f3f46, #d4d4d8);\n}\n.rhinestone-1auth-demo .grant-demo-pill-success {\n background: light-dark(#dcfce7, #14532d);\n color: light-dark(#166534, #bbf7d0);\n}\n.rhinestone-1auth-demo .grant-demo-pill-error {\n background: light-dark(#fee2e2, #450a0a);\n color: light-dark(#b91c1c, #fecaca);\n}\n.rhinestone-1auth-demo .grant-demo-scope {\n display: grid;\n grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr));\n gap: 0.5rem;\n}\n.rhinestone-1auth-demo .grant-demo-scope > div {\n min-width: 0;\n border: 1px solid light-dark(#e4e4e7, #3f3f46);\n border-radius: 0.5rem;\n padding: 0.625rem;\n background: light-dark(#fafafa, #18181b);\n}\n.rhinestone-1auth-demo .grant-demo-scope span, .rhinestone-1auth-demo .grant-demo-label, .rhinestone-1auth-demo .grant-demo-result-grid dt {\n display: block;\n margin: 0 0 0.25rem;\n font-size: 0.72rem;\n font-weight: 600;\n text-transform: uppercase;\n letter-spacing: 0.05em;\n color: light-dark(#71717a, #a1a1aa);\n}\n.rhinestone-1auth-demo .grant-demo-scope strong, .rhinestone-1auth-demo .grant-demo-result-grid dd {\n display: block;\n margin: 0;\n overflow-wrap: anywhere;\n font-size: 0.875rem;\n color: light-dark(#18181b, #fafafa);\n}\n.rhinestone-1auth-demo .grant-demo-mono {\n margin: 0;\n font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, monospace;\n font-size: 0.875rem;\n color: light-dark(#18181b, #fafafa);\n}\n.rhinestone-1auth-demo .grant-demo-secondary {\n white-space: nowrap;\n}\n.rhinestone-1auth-demo .grant-demo-primary {\n width: fit-content;\n}\n.rhinestone-1auth-demo .grant-demo-footnote {\n margin: 0;\n max-width: 62ch;\n font-size: 0.8rem;\n line-height: 1.45;\n color: light-dark(#71717a, #a1a1aa);\n}\n.rhinestone-1auth-demo .grant-demo-result {\n margin-top: 0;\n}\n.rhinestone-1auth-demo .grant-demo-result-grid {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n gap: 0.75rem;\n margin: 0;\n}\n.rhinestone-1auth-demo .grant-demo-mint-panel {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 1rem;\n border: 1px solid light-dark(#bbf7d0, #166534);\n border-radius: 0.5rem;\n padding: 1rem;\n background: light-dark(#f0fdf4, #052e16);\n}\n.rhinestone-1auth-demo .grant-demo-mint-title {\n margin: 0 0 0.25rem;\n font-size: 0.95rem;\n font-weight: 600;\n color: light-dark(#14532d, #dcfce7);\n}\n.rhinestone-1auth-demo .grant-demo-mint-copy {\n margin: 0;\n max-width: 48ch;\n font-size: 0.8rem;\n line-height: 1.45;\n color: light-dark(#166534, #bbf7d0);\n}\n.rhinestone-1auth-demo .grant-demo-tx-link {\n color: light-dark(#2563eb, #93c5fd);\n font-weight: 600;\n text-decoration: none;\n}\n.rhinestone-1auth-demo .grant-demo-tx-link:hover {\n text-decoration: underline;\n}\n@media (max-width: 640px) {\n.rhinestone-1auth-demo .grant-demo-header, .rhinestone-1auth-demo .grant-demo-row, .rhinestone-1auth-demo .grant-demo-mint-panel {\n align-items: stretch;\n flex-direction: column;\n }\n.rhinestone-1auth-demo .grant-demo-scope, .rhinestone-1auth-demo .grant-demo-result-grid {\n grid-template-columns: 1fr;\n }\n.rhinestone-1auth-demo .grant-demo-primary, .rhinestone-1auth-demo .grant-demo-secondary {\n width: 100%;\n }\n}\n.rhinestone-1auth-demo .oa-demo {\n margin: 1.5rem 0;\n border: 1px solid #202127;\n border-radius: 16px;\n background: #0b0c0e;\n overflow: hidden;\n}\n.rhinestone-1auth-demo .oa-demo-head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 0.75rem;\n min-height: 39px;\n padding: 0.625rem 1rem;\n border-bottom: 1px solid #191a1e;\n}\n.rhinestone-1auth-demo .oa-demo-title {\n font-size: 0.8125rem;\n font-weight: 500;\n letter-spacing: -0.01em;\n color: #e4e4e9;\n}\n.rhinestone-1auth-demo .oa-demo-status {\n display: flex;\n align-items: center;\n gap: 0.4375rem;\n flex: 0 0 auto;\n font-size: 0.75rem;\n color: #5e5e68;\n}\n.rhinestone-1auth-demo .oa-demo-dot {\n width: 6px;\n height: 6px;\n border-radius: 999px;\n background: #3f3f48;\n}\n.rhinestone-1auth-demo .oa-demo-dot[data-state=\"on\"] {\n background: #22c55e;\n box-shadow: 0 0 8px rgba(34, 197, 94, 0.5);\n}\n.rhinestone-1auth-demo .oa-demo-body {\n display: flex;\n flex-direction: column;\n gap: 0.75rem;\n padding: 1rem;\n}\n.rhinestone-1auth-demo .demo-container {\n display: contents;\n}\n.rhinestone-1auth-demo .oa-demo-body > * > [style] {\n margin: 0 !important;\n}\n.rhinestone-1auth-demo .oa-demo-body > * > div[style]:not([class]) {\n padding: 0 !important;\n}\n.rhinestone-1auth-demo .oa-demo-body [style] {\n text-align: left !important;\n}\n.rhinestone-1auth-demo .oa-demo-body [style*=\"justify-content: center\"] {\n justify-content: flex-start !important;\n}\n.rhinestone-1auth-demo .demo-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: 0.375rem;\n height: 2.25rem;\n padding: 0 0.875rem;\n border: none;\n border-radius: 10px;\n background: #4f41ef;\n color: #ffffff;\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n transition:\n background 0.15s ease,\n opacity 0.15s ease;\n}\n.rhinestone-1auth-demo .demo-button:hover:not(:disabled) {\n background: #6355f5;\n}\n.rhinestone-1auth-demo .demo-button:disabled {\n opacity: 0.6;\n cursor: default;\n}\n.rhinestone-1auth-demo .demo-button-secondary {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n height: 2.25rem;\n padding: 0 0.875rem;\n border: 1px solid #2e2e36;\n border-radius: 10px;\n background: transparent;\n color: #c8c8d0;\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n transition:\n border-color 0.15s ease,\n color 0.15s ease;\n}\n.rhinestone-1auth-demo .demo-button-secondary:hover:not(:disabled) {\n border-color: #45454f;\n color: #f2f2f5;\n}\n.rhinestone-1auth-demo .oa-demo-body > * > .demo-button, .rhinestone-1auth-demo .oa-demo-body > * > .demo-button-secondary {\n align-self: flex-start;\n}\n.rhinestone-1auth-demo .oa-demo-body input[type=\"checkbox\"] {\n accent-color: #4f41ef;\n}\n.rhinestone-1auth-demo .demo-result {\n padding: 0.75rem 0.875rem;\n border-radius: 10px;\n background: #14151a;\n}\n.rhinestone-1auth-demo .demo-result-label {\n font-size: 0.6875rem;\n font-weight: 500;\n letter-spacing: 0.08em;\n text-transform: uppercase;\n color: #6e6e78;\n}\n.rhinestone-1auth-demo .demo-result-value {\n margin-top: 0.1875rem;\n font-family: paperMono, ui-monospace, SFMono-Regular, Menlo, monospace;\n font-size: 0.8125rem;\n line-height: 1.5;\n color: #e4e4e9;\n overflow-wrap: anywhere;\n}\n.rhinestone-1auth-demo .demo-result-success .demo-result-label {\n color: #4ade80;\n}\n.rhinestone-1auth-demo .demo-result-error .demo-result-label {\n color: #f87171;\n}\n.rhinestone-1auth-demo .demo-result-error .demo-result-value {\n color: #fca5a5;\n}\n.rhinestone-1auth-demo .demo-error {\n margin: 0;\n font-size: 0.8125rem;\n color: #f87171;\n overflow-wrap: anywhere;\n}\n.rhinestone-1auth-demo .oa-demo-skeleton {\n display: block;\n width: 7rem;\n height: 2.25rem;\n border-radius: 10px;\n background: #16171c;\n animation: rhinestone-1auth-demo-pulse 1.6s ease-in-out infinite;\n}\n@keyframes rhinestone-1auth-demo-pulse {\n 50% {\n opacity: 0.45;\n }\n}"; export const SOURCE_COMMIT = "e06ebe8add704e95f679eaddc38fd7ea88cb3de8"; export const SDK_VERSION = "0.10.1"; export const VIEM_VERSION = "2.55.0"; export const STORAGE_KEY = "rhinestone-docs-1auth-account"; export const PROD_BACKENDS = { auth: "https://passkey.1auth.app", sponsorship: "https://docs.1auth.app/api/sponsorship" }; export const DEV_BACKENDS = { auth: "https://passkey.passkey-test.app", sponsorship: "https://docs.passkey-test.app/api/sponsorship" }; export const PROD_DOCS_HOST = "docs.rhinestone.dev"; export const backends = () => { const host = typeof window === "undefined" ? "" : window.location.hostname; return host === PROD_DOCS_HOST ? PROD_BACKENDS : DEV_BACKENDS; }; export const BACKEND_NOTE = "Only the production docs host talks to the production Rhinestone deployment. " + "Every other host — a Mintlify preview, a tunnel, localhost — uses dev, so " + "an unrecognised preview pattern fails towards dev rather than creating " + "passkey state against production."; export const CDN = spec => "https://esm.sh/" + spec + (spec.startsWith("@rhinestone/1auth@") ? "?deps=viem@" + VIEM_VERSION + "&external=react" : ""); export const shareReact = () => { if (window.__OA_SHARED_REACT__) return; if (typeof HTMLScriptElement.supports !== "function" || !HTMLScriptElement.supports("importmap")) { throw new Error("This demo requires a browser with import-map support."); } window.__OA_REACT__ = React; const reserved = ["default", "import", "export", "class", "function", "const", "let", "var", "new", "delete", "typeof", "void", "in", "of", "do", "if", "else", "for", "while", "switch", "case", "break", "continue", "return", "this", "super", "throw", "try", "catch", "finally", "yield", "await", "enum", "null", "true", "false", "with", "debugger", "instanceof", "extends", "static"]; const names = Object.keys(React).filter(name => (/^[A-Za-z_$][A-Za-z0-9_$]*$/).test(name) && !reserved.includes(name)); const source = ["const R = globalThis.__OA_REACT__; export default R;", ...names.map(name => "export const " + name + " = R." + name + ";")].join(" "); const jsx = ["const R = globalThis.__OA_REACT__; export const Fragment = R.Fragment;", "export const jsx = (type, props, key) => R.createElement(type, key == null ? props : { ...props, key });", "export const jsxs = jsx; export const jsxDEV = jsx;"].join(" "); const dataUrl = value => "data:text/javascript," + encodeURIComponent(value); const script = document.createElement("script"); script.type = "importmap"; script.textContent = JSON.stringify({ imports: { react: dataUrl(source), "react/jsx-runtime": dataUrl(jsx), "react/jsx-dev-runtime": dataUrl(jsx) } }); document.head.appendChild(script); window.__OA_SHARED_REACT__ = true; }; export const MODULE_SPECS = { sdk: () => CDN("@rhinestone/1auth@" + SDK_VERSION), sdkHeadless: () => CDN("@rhinestone/1auth@" + SDK_VERSION + "/headless"), viem: () => CDN("viem@" + VIEM_VERSION), viemChains: () => CDN("viem@" + VIEM_VERSION + "/chains"), viemAccounts: () => CDN("viem@" + VIEM_VERSION + "/accounts") }; export const importModule = url => new Promise((resolve, reject) => { const key = "__oa_" + Math.random().toString(36).slice(2); window[key] = { resolve, reject }; const script = document.createElement("script"); script.type = "module"; script.textContent = "import(" + JSON.stringify(url) + ").then(m => window[" + JSON.stringify(key) + "].resolve(m))" + ".catch(e => window[" + JSON.stringify(key) + "].reject(new Error(String(e))));"; script.onerror = () => reject(new Error("failed to load " + url)); document.head.appendChild(script); script.remove(); }); export const importModuleWithRetry = async url => { try { return await importModule(url); } catch (first) { await new Promise(r => setTimeout(r, 500)); return importModule(url); } }; export const loadDeps = async () => { shareReact(); const specs = Object.entries(MODULE_SPECS).map(([name, spec]) => [name, spec()]); const cacheKey = "__OA_DEPS__" + specs.map(([, url]) => url).join("|"); if (window[cacheKey]) return window[cacheKey]; const loaded = await Promise.all(specs.map(([, url]) => importModuleWithRetry(url))); const deps = { React }; specs.forEach(([name], i) => { deps[name] = loaded[i]; }); deps.motion = motionShim(); window[cacheKey] = deps; return deps; }; export const unreachable = call => "Sponsorship " + call + " never reached " + backends().sponsorship + ". The browser hides why: a rejected origin, a failed preflight and a network" + " error all look identical here. The failing request is in the console."; export const sponsorship = { accessToken: async () => { let res; try { res = await fetch(backends().sponsorship + "/access-token", { method: "GET", credentials: "include" }); } catch (e) { throw new Error(unreachable("access token")); } if (!res.ok) throw new Error("Sponsorship access token failed (" + res.status + ")"); return (await res.json()).token; }, getExtensionToken: async intentOp => { let res; try { res = await fetch(backends().sponsorship + "/extension-token", { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ intentOp }) }); } catch (e) { throw new Error(unreachable("extension token")); } if (!res.ok) throw new Error("Sponsorship extension token failed (" + res.status + ")"); return (await res.json()).token; } }; export const motionShim = () => { const passthrough = Tag => React.forwardRef((props, ref) => { const rest = Object.fromEntries(Object.entries(props).filter(([k]) => !["initial", "animate", "exit", "transition", "variants", "whileHover", "whileTap", "layout", "layoutId"].includes(k))); return React.createElement(Tag, { ...rest, ref }); }); const cache = {}; return { motion: new Proxy({}, { get: (_, tag) => { if (!cache[tag]) cache[tag] = passthrough(tag); return cache[tag]; } }), AnimatePresence: ({children}) => React.createElement(React.Fragment, null, children), useReducedMotion: () => true }; }; export const AuthContext = React.createContext(null); export const useAuthContext = () => React.useContext(AuthContext); export const buildModules = deps => { const mods = {}; mods.authctx = (() => { const DOCS_APP_ORIGIN_STORAGE_KEY = STORAGE_KEY; const useAuth = () => useAuthContext(); return { DOCS_APP_ORIGIN_STORAGE_KEY, useAuth, clearDocsSession: () => {} }; })(); mods.constants = (() => { const DOCS_APP_ORIGIN_CLIENT_ID = "docs-app-origin"; function docsAppOriginWebAuthn() { if (typeof window === "undefined" || window.location.protocol !== "https:") { return { mode: "app_origin" }; } return { mode: "app_origin", rpId: window.location.hostname }; } const DOCS_EXPERIMENTAL_CLEAR_SIGNING = true; const APP_ORIGIN_DEMO_CAPABILITIES = { payButton: true, eip1193Transactions: true, sendCalls: true, batchCalls: true, messageSigning: true, typedDataSigning: true, batchIntents: true, smartSessions: true, walletConnection: true, recovery: true }; const DOCS_DIALOG_THEME = { mode: "dark", accent: "#ffffff", backdrop: { color: "#52525c", opacity: 0.5, blur: 12 } }; const MOCK_USD_ADDRESS = "0x2f6fdE5E2AeAB6335d8f978B4d8B2a9c1129AcFb"; const RECIPIENT_ADDRESS = "0x180b791BD181DF1773E4e33cb0374b258936d186"; const MOCK_RWA_ADDRESS = "0x5948C7E284174f6Df0f2505fb3CBFbd685154323"; const MOCK_SWAP_ADDRESS = "0xf2DFDC35d46e62F6D026afa36Cc6e941174B67f1"; const MOCK_NFT_V2_ADDRESS = "0x99CCb273351Cf13713F7Bf5A0716d7C2a3DD4712"; const MOCK_NFT_LUIGI_ID = 1n; const NVDA_ICON_SVG = ``; const NVDA_ICON_DATA_URL = `data:image/svg+xml;utf8,${encodeURIComponent(NVDA_ICON_SVG)}`; const LUIGI_ICON_SVG = ``; const LUIGI_ICON_DATA_URL = `data:image/svg+xml;utf8,${encodeURIComponent(LUIGI_ICON_SVG)}`; const MUSD_ICON_SVG = ``; const MUSD_ICON_DATA_URL = `data:image/svg+xml;utf8,${encodeURIComponent(MUSD_ICON_SVG)}`; const USDC_BASE_ADDRESS = "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913"; const USDC_BASE_SEPOLIA_ADDRESS = "0x036CbD53842c5426634e7929541eC2318f3dCF7e"; const USDC_ARB_SEPOLIA_ADDRESS = "0x75faf114eafb1BDbe2F0316DF893fd58CE46AA4d"; const BASE_SEPOLIA_CHAIN_ID = 84532; const ARB_SEPOLIA_CHAIN_ID = 421614; const erc20Abi = [{ name: "transfer", type: "function", stateMutability: "nonpayable", inputs: [{ name: "to", type: "address" }, { name: "amount", type: "uint256" }], outputs: [{ name: "", type: "bool" }] }, { name: "approve", type: "function", stateMutability: "nonpayable", inputs: [{ name: "spender", type: "address" }, { name: "amount", type: "uint256" }], outputs: [{ name: "", type: "bool" }] }, { name: "mint", type: "function", stateMutability: "nonpayable", inputs: [{ name: "to", type: "address" }, { name: "amount", type: "uint256" }], outputs: [] }, { name: "balanceOf", type: "function", inputs: [{ name: "account", type: "address" }], outputs: [{ name: "", type: "uint256" }], stateMutability: "view" }]; const mockSwapAbi = [{ name: "swap", type: "function", stateMutability: "nonpayable", inputs: [{ name: "usdcIn", type: "uint256" }, { name: "minRwaOut", type: "uint256" }, { name: "recipient", type: "address" }], outputs: [{ name: "rwaOut", type: "uint256" }] }, { name: "quote", type: "function", stateMutability: "view", inputs: [{ name: "usdcIn", type: "uint256" }], outputs: [{ name: "rwaOut", type: "uint256" }] }, { name: "getPrice", type: "function", stateMutability: "view", inputs: [], outputs: [{ name: "price", type: "uint256" }] }, { name: "pricePerShare", type: "function", stateMutability: "view", inputs: [], outputs: [{ name: "", type: "uint256" }] }, { name: "jitterRange", type: "function", stateMutability: "view", inputs: [], outputs: [{ name: "", type: "uint256" }] }]; const mockNftV2Abi = [{ name: "buy", type: "function", stateMutability: "nonpayable", inputs: [{ name: "id", type: "uint256" }, { name: "amount", type: "uint256" }, { name: "recipient", type: "address" }], outputs: [{ name: "totalPrice", type: "uint256" }] }, { name: "priceOf", type: "function", stateMutability: "view", inputs: [{ name: "id", type: "uint256" }], outputs: [{ name: "", type: "uint256" }] }]; return { docsAppOriginWebAuthn, DOCS_APP_ORIGIN_CLIENT_ID, DOCS_EXPERIMENTAL_CLEAR_SIGNING, APP_ORIGIN_DEMO_CAPABILITIES, DOCS_DIALOG_THEME, MOCK_USD_ADDRESS, RECIPIENT_ADDRESS, MOCK_RWA_ADDRESS, MOCK_SWAP_ADDRESS, MOCK_NFT_V2_ADDRESS, MOCK_NFT_LUIGI_ID, NVDA_ICON_DATA_URL, LUIGI_ICON_DATA_URL, MUSD_ICON_DATA_URL, USDC_BASE_ADDRESS, USDC_BASE_SEPOLIA_ADDRESS, USDC_ARB_SEPOLIA_ADDRESS, BASE_SEPOLIA_CHAIN_ID, ARB_SEPOLIA_CHAIN_ID, erc20Abi, mockSwapAbi, mockNftV2Abi }; })(); mods.waitForHeadlessIntent = (() => { const DEFAULT_POLL_ATTEMPTS = 8; const DEFAULT_POLL_INTERVAL_MS = 2500; const SUCCESS_STATUSES = { preconfirmed: true, filled: true, completed: true }; async function waitForHeadlessIntent(client, submitted, polling = {}) { if (submitted.transactionHash) return submitted; const attempts = polling.attempts ?? DEFAULT_POLL_ATTEMPTS; const intervalMs = polling.intervalMs ?? DEFAULT_POLL_INTERVAL_MS; let latestStatus = submitted.status; let latestHash; for (let attempt = 0; !latestHash && attempt < attempts; attempt += 1) { const {promise, resolve} = Promise.withResolvers(); setTimeout(resolve, intervalMs); await promise; const statusResult = await client.getIntentStatus(submitted.intentId); latestStatus = statusResult.status; latestHash = statusResult.transactionHash; if (SUCCESS_STATUSES[latestStatus.toLowerCase()]) break; } if (!latestHash && !SUCCESS_STATUSES[latestStatus.toLowerCase()]) { throw new Error(latestStatus.toLowerCase() === "failed" ? "Headless intent failed before completion" : `Headless intent did not complete after ${attempts} status checks`); } return { ...submitted, status: latestStatus, transactionHash: latestHash }; } return { waitForHeadlessIntent }; })(); mods.grantPermissionScope = (() => { const {createCrossChainPermission, definePermissions} = deps.sdk; const {parseUnits} = deps.viem; const {arbitrumSepolia, baseSepolia} = deps.viemChains; const {ARB_SEPOLIA_CHAIN_ID, BASE_SEPOLIA_CHAIN_ID, MOCK_SWAP_ADDRESS, MOCK_USD_ADDRESS, USDC_ARB_SEPOLIA_ADDRESS, erc20Abi, mockSwapAbi} = mods.constants; const GRANT_PERMISSION_CHAIN_ID = BASE_SEPOLIA_CHAIN_ID; const GRANT_PERMISSION_MINT_AMOUNT = parseUnits("0.1", 6); const GRANT_PERMISSION_USAGE_LIMIT = 25; function buildGrantPermissionScope(accountAddress, nowSeconds = Math.floor(Date.now() / 1e3)) { const validUntil = nowSeconds + 24 * 60 * 60; const validUntilDate = new Date(validUntil * 1e3); const validAfterDate = new Date(nowSeconds * 1e3); const permissions = definePermissions({ address: MOCK_USD_ADDRESS, name: "mUSD", abi: erc20Abi, functions: { mint: { maxUses: BigInt(GRANT_PERMISSION_USAGE_LIMIT), validUntil: validUntilDate, validAfter: validAfterDate, params: { to: { condition: "equal", value: accountAddress }, amount: { condition: "equal", value: GRANT_PERMISSION_MINT_AMOUNT } } } } }); return { ...permissions, validUntil, validAfter: nowSeconds, maxUses: GRANT_PERMISSION_USAGE_LIMIT }; } const NVDANON_GRANT_CHAIN_ID = ARB_SEPOLIA_CHAIN_ID; const NVDANON_SOURCE_CHAIN_ID = BASE_SEPOLIA_CHAIN_ID; const NVDANON_USDC_PER_BUY = parseUnits("0.1", 6); const NVDANON_USAGE_LIMIT = 25; const NVDANON_TIME_LIMIT_MINUTES = 60; function buildNvdanonGrantScope(accountAddress, nowSeconds = Math.floor(Date.now() / 1e3), config = {}) { const timeLimitMinutes = config.timeLimitMinutes ?? NVDANON_TIME_LIMIT_MINUTES; const usageLimit = config.usageLimit ?? NVDANON_USAGE_LIMIT; const usdcPerBuy = config.usdcPerBuy ?? NVDANON_USDC_PER_BUY; const validUntil = nowSeconds + timeLimitMinutes * 60; const validUntilDate = new Date(validUntil * 1e3); const validAfterDate = new Date(nowSeconds * 1e3); const maxUses = BigInt(usageLimit); const usdcAddress = USDC_ARB_SEPOLIA_ADDRESS; const approve = definePermissions({ address: usdcAddress, name: "USDC", abi: erc20Abi, functions: { approve: { maxUses, validUntil: validUntilDate, validAfter: validAfterDate, params: { spender: { condition: "equal", value: MOCK_SWAP_ADDRESS }, amount: { condition: "equal", value: usdcPerBuy } } } } }); const swap = definePermissions({ address: MOCK_SWAP_ADDRESS, name: "RWASwap", abi: mockSwapAbi, functions: { swap: { maxUses, validUntil: validUntilDate, validAfter: validAfterDate, params: { usdcIn: { condition: "equal", value: usdcPerBuy }, recipient: { condition: "equal", value: accountAddress } } } } }); const bridge = createCrossChainPermission({ from: { chain: baseSepolia, token: MOCK_USD_ADDRESS, maxAmount: usdcPerBuy }, to: { chain: arbitrumSepolia, token: usdcAddress, recipient: accountAddress }, validUntil: BigInt(validUntil), validAfter: BigInt(nowSeconds), settlementLayers: ["ACROSS"] }); return { permissions: [...approve.permissions, ...swap.permissions], crossChainPermits: [bridge], contracts: [...approve.contracts, ...swap.contracts], validUntil, validAfter: nowSeconds, maxUses: usageLimit, usdcAddress }; } function shortHex(value, prefix = 6, suffix = 4) { if (!value) return ""; if (value.length <= prefix + suffix + 3) return value; return `${value.slice(0, prefix)}...${value.slice(-suffix)}`; } function baseSepoliaTxUrl(hash) { if (!hash || !(/^0x[0-9a-fA-F]{64}$/).test(hash)) return null; return `https://sepolia.basescan.org/tx/${hash}`; } function arbSepoliaTxUrl(hash) { if (!hash || !(/^0x[0-9a-fA-F]{64}$/).test(hash)) return null; return `https://sepolia.arbiscan.io/tx/${hash}`; } function asAddress(value) { return value?.startsWith("0x") && value.length === 42 ? value : void 0; } return { buildGrantPermissionScope, buildNvdanonGrantScope, shortHex, baseSepoliaTxUrl, arbSepoliaTxUrl, asAddress, GRANT_PERMISSION_CHAIN_ID, GRANT_PERMISSION_MINT_AMOUNT, GRANT_PERMISSION_USAGE_LIMIT, NVDANON_GRANT_CHAIN_ID, NVDANON_SOURCE_CHAIN_ID, NVDANON_USDC_PER_BUY, NVDANON_USAGE_LIMIT, NVDANON_TIME_LIMIT_MINUTES }; })(); mods.grantPermissionDemo = (() => { const {useCallback, useEffect, useMemo, useRef, useState} = deps.React; const {encodeFunctionData, formatUnits} = deps.viem; const {generatePrivateKey, privateKeyToAccount} = deps.viemAccounts; const {buildSmartSessionHeadlessSignatures, OneAuthHeadlessClient} = deps.sdkHeadless; const {waitForHeadlessIntent} = mods.waitForHeadlessIntent; const {DOCS_APP_ORIGIN_STORAGE_KEY, useAuth} = mods.authctx; const {MOCK_SWAP_ADDRESS, MOCK_USD_ADDRESS, USDC_ARB_SEPOLIA_ADDRESS, erc20Abi, mockSwapAbi} = mods.constants; const {GRANT_PERMISSION_CHAIN_ID, GRANT_PERMISSION_MINT_AMOUNT, GRANT_PERMISSION_USAGE_LIMIT, NVDANON_GRANT_CHAIN_ID, NVDANON_SOURCE_CHAIN_ID, NVDANON_USDC_PER_BUY, asAddress, baseSepoliaTxUrl, buildGrantPermissionScope, buildNvdanonGrantScope, shortHex} = mods.grantPermissionScope; const GRANT_PERMISSION_STORAGE_KEY = { "mockusd-mint": "1auth:docs:grant-permission-demo:v2", "nvdanon-swap": "1auth:docs:grant-permission-demo:nvdanon:v2" }; function readStoredAccountAddress() { if (typeof window === "undefined") return void 0; try { const saved = localStorage.getItem(DOCS_APP_ORIGIN_STORAGE_KEY); if (!saved) return void 0; const parsed = JSON.parse(saved); return asAddress(parsed.address ?? parsed.accountAddress); } catch { return void 0; } } function stringifyGrantStorage(value) { return JSON.stringify(value, (_key, entry) => typeof entry === "bigint" ? entry.toString() : entry); } function readStoredGrantDemo(storageKey, activeAccountAddress) { if (typeof window === "undefined") return null; try { const saved = sessionStorage.getItem(storageKey); if (!saved) return null; const parsed = JSON.parse(saved); const sessionKeyAddress = asAddress(parsed.sessionKeyAddress); const accountAddress = asAddress(parsed.accountAddress); const sessionPrivateKey = parsed.sessionPrivateKey; if (!sessionKeyAddress || !sessionPrivateKey?.startsWith("0x")) { sessionStorage.removeItem(storageKey); return null; } if (activeAccountAddress && accountAddress && accountAddress.toLowerCase() !== activeAccountAddress.toLowerCase()) { return null; } return { accountAddress, sessionPrivateKey, sessionKeyAddress, result: parsed.result, mintResult: parsed.mintResult, usdcPerBuy: parsed.usdcPerBuy != null ? BigInt(parsed.usdcPerBuy) : void 0, savedAt: parsed.savedAt ?? Date.now() }; } catch { sessionStorage.removeItem(storageKey); return null; } } function writeStoredGrantDemo(storageKey, value) { if (typeof window === "undefined") return; sessionStorage.setItem(storageKey, stringifyGrantStorage(value)); } function clearStoredGrantDemo(storageKey) { if (typeof window === "undefined") return; sessionStorage.removeItem(storageKey); } function isCanceledGrant(result) { const text = `${result.error?.code ?? ""} ${result.error?.message ?? ""}`.toLowerCase(); return text.includes("cancel") || text.includes("reject") || text.includes("dismiss"); } function hasGrantChainCoverage(result, targetChainIds) { const handle = result?.sessionKeyHandle; if (!result?.success || !handle) return false; const chainIds = new Set(handle.chainIds ?? [handle.chainId]); return targetChainIds.every(chainId => { if (!chainIds.has(chainId)) return false; return targetChainIds.length === 1 || !!handle.permissionIdsByChain?.[chainId]; }); } function isStoredGrantCompatible(stored, targetChainIds) { return !stored.result?.success || hasGrantChainCoverage(stored.result, targetChainIds); } function buildMockUsdPrepareOptions(accountAddress) { return { targetChain: GRANT_PERMISSION_CHAIN_ID, calls: [{ to: MOCK_USD_ADDRESS, data: encodeFunctionData({ abi: erc20Abi, functionName: "mint", args: [accountAddress, GRANT_PERMISSION_MINT_AMOUNT] }), label: "Mint mUSD", sublabel: "0.1 mUSD to your account" }] }; } function buildNvdanonPrepareOptions(accountAddress, usdcPerBuy = NVDANON_USDC_PER_BUY) { const usdcAddress = USDC_ARB_SEPOLIA_ADDRESS; const usdcLabel = `${formatUnits(usdcPerBuy, 6)} USDC`; return { targetChain: NVDANON_GRANT_CHAIN_ID, calls: [{ to: usdcAddress, data: encodeFunctionData({ abi: erc20Abi, functionName: "approve", args: [MOCK_SWAP_ADDRESS, usdcPerBuy] }), label: "Approve USDC", sublabel: `${usdcLabel} to RWASwap` }, { to: MOCK_SWAP_ADDRESS, data: encodeFunctionData({ abi: mockSwapAbi, functionName: "swap", args: [usdcPerBuy, 0n, accountAddress] }), label: "Buy NVDAnon", sublabel: `${usdcLabel} \u2192 NVDAnon` }], tokenRequests: [{ token: usdcAddress, amount: usdcPerBuy }], sourceAssets: [MOCK_USD_ADDRESS], sourceChainId: NVDANON_SOURCE_CHAIN_ID }; } function useGrantPermissionFlow(options = {}) { const variant = options.variant ?? "mockusd-mint"; const enabled = options.enabled ?? true; const storageKey = GRANT_PERMISSION_STORAGE_KEY[variant]; const {client, login, isAuthenticated, address, sponsorship} = useAuth(); const sessionPrivateKeyRef = useRef(null); const grantUsdcPerBuyRef = useRef(NVDANON_USDC_PER_BUY); const [sessionKeyAddress, setSessionKeyAddress] = useState(null); const [status, setStatus] = useState("idle"); const [result, setResult] = useState(null); const [mintStatus, setMintStatus] = useState("idle"); const [mintResult, setMintResult] = useState(null); const [error, setError] = useState(null); const [mintError, setMintError] = useState(null); const targetChainIds = useMemo(() => variant === "nvdanon-swap" ? [NVDANON_GRANT_CHAIN_ID] : [GRANT_PERMISSION_CHAIN_ID], [variant]); const sourceChainIds = useMemo(() => variant === "nvdanon-swap" ? [NVDANON_SOURCE_CHAIN_ID] : [], [variant]); const requiredSessionChainIds = useMemo(() => Array.from(new Set([...targetChainIds, ...sourceChainIds])), [sourceChainIds, targetChainIds]); const generateSessionKey = useCallback(() => { const privateKey = generatePrivateKey(); const account = privateKeyToAccount(privateKey); const activeAccountAddress = asAddress(address) ?? readStoredAccountAddress(); sessionPrivateKeyRef.current = privateKey; setSessionKeyAddress(account.address); setResult(null); setError(null); setMintResult(null); setMintError(null); setMintStatus("idle"); setStatus("ready"); writeStoredGrantDemo(storageKey, { accountAddress: activeAccountAddress, sessionPrivateKey: privateKey, sessionKeyAddress: account.address, savedAt: Date.now() }); return account.address; }, [address, storageKey]); const reset = useCallback(() => { clearStoredGrantDemo(storageKey); generateSessionKey(); }, [generateSessionKey, storageKey]); const resetMint = useCallback(() => { setMintStatus("idle"); setMintResult(null); setMintError(null); }, []); const grantPermission = useCallback(async config => { setStatus("granting"); setError(null); setResult(null); setMintResult(null); setMintError(null); setMintStatus("idle"); try { let activeAccountAddress = asAddress(address); if (!activeAccountAddress) { activeAccountAddress = await login() ?? void 0; } if (!activeAccountAddress) { throw new Error("Sign in before granting a session permission."); } const activeSessionKey = sessionKeyAddress ?? generateSessionKey(); grantUsdcPerBuyRef.current = config?.usdcPerBuy ?? NVDANON_USDC_PER_BUY; const permissions = variant === "nvdanon-swap" ? buildNvdanonGrantScope(activeAccountAddress, void 0, config) : buildGrantPermissionScope(activeAccountAddress); const grantResult = await client.grantPermissions({ accountAddress: activeAccountAddress, targetChains: targetChainIds, sourceChains: sourceChainIds, sessionKeyAddress: activeSessionKey, ...permissions }); setResult(grantResult); if (grantResult.success) { writeStoredGrantDemo(storageKey, { accountAddress: activeAccountAddress, sessionPrivateKey: sessionPrivateKeyRef.current, sessionKeyAddress: activeSessionKey, result: grantResult, usdcPerBuy: grantUsdcPerBuyRef.current, savedAt: Date.now() }); setStatus("granted"); return; } if (isCanceledGrant(grantResult)) { setStatus("canceled"); return; } setStatus("error"); setError(grantResult.error?.message ?? "Permission grant failed"); } catch (err) { setStatus("error"); setError(err instanceof Error ? err.message : "Permission grant failed"); } }, [address, client, generateSessionKey, login, sessionKeyAddress, sourceChainIds, storageKey, targetChainIds, variant]); const mintWithoutSignature = useCallback(async () => { const grantHandle = result?.sessionKeyHandle; const privateKey = sessionPrivateKeyRef.current; const activeAccountAddress = asAddress(address) ?? readStoredAccountAddress(); if (!result?.success || !grantHandle || !privateKey || !activeAccountAddress || !hasGrantChainCoverage(result, requiredSessionChainIds)) { setMintStatus("error"); setMintError(variant === "nvdanon-swap" ? "Grant the NVDAnon buy permission before swapping headlessly." : "Grant the mUSD mint permission before minting headlessly."); return; } setMintStatus("minting"); setMintError(null); setMintResult(null); try { const headlessClient = new OneAuthHeadlessClient({ providerUrl: client.getProviderUrl(), clientId: client.getClientId(), webauthn: client.getWebAuthnMode() === "app_origin" ? { mode: "app_origin", ...client.getWebAuthnRpId() ? { rpId: client.getWebAuthnRpId() } : {} } : { mode: "experimental_cross_origin" }, sponsorship }); const prepareOptions = variant === "nvdanon-swap" ? buildNvdanonPrepareOptions(activeAccountAddress, grantUsdcPerBuyRef.current) : buildMockUsdPrepareOptions(activeAccountAddress); const prepared = await headlessClient.prepareIntent({ accountAddress: activeAccountAddress, sessionKeyHandle: grantHandle, ...prepareOptions }); const signatures = await buildSmartSessionHeadlessSignatures({ privateKey, accountAddress: prepared.accountAddress, sessionKeyHandle: grantHandle, prepared }); const submitted = await headlessClient.submitIntent({ intentOp: prepared.intentOp, digestResult: prepared.digestResult, binding: prepared.binding, accountAddress: prepared.accountAddress, targetChain: prepared.targetChain, calls: prepared.calls, expiresAt: prepared.expiresAt, sponsorshipMode: prepared.sponsorshipMode ?? "self-funded", ...signatures }); const completed = await waitForHeadlessIntent(headlessClient, submitted); setMintResult(completed); writeStoredGrantDemo(storageKey, { accountAddress: activeAccountAddress, sessionPrivateKey: privateKey, sessionKeyAddress: grantHandle.sessionKeyAddress, result, mintResult: completed, usdcPerBuy: grantUsdcPerBuyRef.current, savedAt: Date.now() }); setMintStatus("minted"); } catch (err) { setMintStatus("error"); setMintError(err instanceof Error ? err.message : variant === "nvdanon-swap" ? "Headless NVDAnon buy failed" : "Headless mint failed"); } }, [address, client, requiredSessionChainIds, result, sponsorship, storageKey, variant]); useEffect(() => { if (!enabled) return; if (sessionKeyAddress) return; const activeAccountAddress = asAddress(address) ?? readStoredAccountAddress(); const stored = readStoredGrantDemo(storageKey, activeAccountAddress); if (stored && isStoredGrantCompatible(stored, requiredSessionChainIds)) { sessionPrivateKeyRef.current = stored.sessionPrivateKey; if (stored.usdcPerBuy != null) grantUsdcPerBuyRef.current = stored.usdcPerBuy; setSessionKeyAddress(stored.sessionKeyAddress); setResult(stored.result ?? null); setMintResult(stored.mintResult ?? null); setMintStatus(stored.mintResult ? "minted" : "idle"); setStatus(stored.result?.success ? "granted" : "ready"); return; } if (stored) { clearStoredGrantDemo(storageKey); } generateSessionKey(); }, [address, enabled, generateSessionKey, requiredSessionChainIds, sessionKeyAddress, storageKey]); useEffect(() => { const activeAccountAddress = asAddress(address); if (!activeAccountAddress) return; const stored = readStoredGrantDemo(storageKey); if (stored?.accountAddress && stored.accountAddress.toLowerCase() !== activeAccountAddress.toLowerCase()) { clearStoredGrantDemo(storageKey); sessionPrivateKeyRef.current = null; setSessionKeyAddress(null); setResult(null); setMintResult(null); setMintStatus("idle"); setError(null); setMintError(null); setStatus("idle"); } }, [address, storageKey]); return { isAuthenticated, sessionKeyAddress, status, result, mintStatus, mintResult, error, mintError, generateSessionKey, grantPermission, mintWithoutSignature, resetMint, reset }; } function GrantPermissionDemo() { const flow = useGrantPermissionFlow(); const isBusy = flow.status === "granting"; const mintTxUrl = baseSepoliaTxUrl(flow.mintResult?.transactionHash); const statusTone = flow.status === "granted" ? "success" : flow.status === "error" || flow.status === "canceled" ? "error" : "neutral"; return React.createElement("div", { className: "demo-container grant-demo" }, React.createElement("div", { className: "grant-demo-header" }, React.createElement("div", null, React.createElement("p", { className: "grant-demo-eyebrow" }, "SmartSession permission"), React.createElement("h3", { className: "grant-demo-title" }, "Grant scoped mUSD minting")), React.createElement("span", { className: `grant-demo-pill grant-demo-pill-${statusTone}` }, flow.status === "granting" ? "Granting" : flow.status === "granted" ? "Granted" : flow.status === "canceled" ? "Canceled" : flow.status === "error" ? "Needs attention" : "Ready")), React.createElement("div", { className: "grant-demo-scope", "aria-label": "Permission scope" }, React.createElement("div", null, React.createElement("span", null, "Contract"), React.createElement("strong", null, "mUSD")), React.createElement("div", null, React.createElement("span", null, "Action"), React.createElement("strong", null, "mint")), React.createElement("div", null, React.createElement("span", null, "Amount"), React.createElement("strong", null, "0.1 mUSD")), React.createElement("div", null, React.createElement("span", null, "Recipient"), React.createElement("strong", null, "Account")), React.createElement("div", null, React.createElement("span", null, "Uses"), React.createElement("strong", null, GRANT_PERMISSION_USAGE_LIMIT))), React.createElement("div", { className: "grant-demo-row" }, React.createElement("div", null, React.createElement("p", { className: "grant-demo-label" }, "Session key"), React.createElement("p", { className: "grant-demo-mono" }, flow.sessionKeyAddress ? shortHex(flow.sessionKeyAddress, 8, 6) : "Generating...")), React.createElement("button", { type: "button", className: "demo-button-secondary grant-demo-secondary", onClick: flow.generateSessionKey, disabled: isBusy }, "New key")), React.createElement("button", { type: "button", className: "demo-button grant-demo-primary", onClick: () => flow.grantPermission(), disabled: isBusy || !flow.sessionKeyAddress }, isBusy ? "Opening permission review..." : flow.isAuthenticated ? "Grant permission" : "Sign in to grant permission"), React.createElement("p", { className: "grant-demo-footnote" }, "This demo sends only the public session-key address to Rhinestone. The private key is stored in this tab's sessionStorage so the guide can survive a reload."), flow.result?.success && React.createElement("div", { className: "demo-result demo-result-success grant-demo-result" }, React.createElement("p", { className: "demo-result-label" }, "Grant result"), React.createElement("dl", { className: "grant-demo-result-grid" }, React.createElement("div", null, React.createElement("dt", null, "Grant ID"), React.createElement("dd", null, flow.result.grantId ?? "Created")), React.createElement("div", null, React.createElement("dt", null, "Permission ID"), React.createElement("dd", null, shortHex(flow.result.permissionId ?? flow.result.sessionKeyHandle?.permissionId, 10, 8))), React.createElement("div", null, React.createElement("dt", null, "Chain"), React.createElement("dd", null, GRANT_PERMISSION_CHAIN_ID)), React.createElement("div", null, React.createElement("dt", null, "Status"), React.createElement("dd", null, (flow.result.status ?? flow.result.chainResults?.[0]?.status) ?? "enabled")), (flow.result.transactionHash || flow.result.chainResults?.[0]?.transactionHash) && React.createElement("div", null, React.createElement("dt", null, "Transaction"), React.createElement("dd", null, shortHex(flow.result.transactionHash ?? flow.result.chainResults?.[0]?.transactionHash, 10, 8))))), flow.result?.success && React.createElement("div", { className: "grant-demo-mint-panel" }, React.createElement("div", null, React.createElement("p", { className: "grant-demo-mint-title" }, "Mint with session key"), React.createElement("p", { className: "grant-demo-mint-copy" }, "No new user signature. The SmartSession permission enforces 0.1 mUSD to this account.")), React.createElement("button", { type: "button", className: "demo-button grant-demo-primary", onClick: flow.mintWithoutSignature, disabled: flow.mintStatus === "minting" }, flow.mintStatus === "minting" ? "Minting..." : "Mint 0.1 mUSD")), flow.mintResult && React.createElement("div", { className: "demo-result demo-result-success grant-demo-result" }, React.createElement("p", { className: "demo-result-label" }, "Headless mint"), React.createElement("dl", { className: "grant-demo-result-grid" }, React.createElement("div", null, React.createElement("dt", null, "Intent"), React.createElement("dd", null, shortHex(flow.mintResult.intentId, 10, 8))), React.createElement("div", null, React.createElement("dt", null, "Status"), React.createElement("dd", null, flow.mintResult.status)), flow.mintResult.transactionHash ? React.createElement("div", null, React.createElement("dt", null, "Transaction"), React.createElement("dd", null, mintTxUrl ? React.createElement("a", { className: "grant-demo-tx-link", href: mintTxUrl, target: "_blank", rel: "noreferrer" }, shortHex(flow.mintResult.transactionHash, 10, 8)) : shortHex(flow.mintResult.transactionHash, 10, 8))) : React.createElement("div", null, React.createElement("dt", null, "Transaction"), React.createElement("dd", null, "Confirmed; explorer hash pending")))), (flow.error || flow.status === "canceled") && React.createElement("div", { className: "demo-result demo-result-error grant-demo-result" }, React.createElement("p", { className: "demo-result-label" }, flow.status === "canceled" ? "Canceled" : "Error"), React.createElement("p", { className: "demo-result-value" }, flow.status === "canceled" ? "Permission grant was canceled before completion." : flow.error)), flow.mintError && React.createElement("div", { className: "demo-result demo-result-error grant-demo-result" }, React.createElement("p", { className: "demo-result-label" }, "Headless mint failed"), React.createElement("p", { className: "demo-result-value" }, flow.mintError))); } return { useGrantPermissionFlow, GrantPermissionDemo }; })(); return mods; }; export const ADDRESS_RE = /^0x[0-9a-fA-F]{40}$/; export const readStoredAddressFromJsonEnvelope = () => { try { const raw = window.localStorage.getItem(STORAGE_KEY); if (!raw) return null; const parsed = JSON.parse(raw); const address = parsed && typeof parsed === "object" ? parsed.address : null; return typeof address === "string" && ADDRESS_RE.test(address) ? address : null; } catch { return null; } }; export const writeStoredAddressAsJsonEnvelope = address => { window.localStorage.setItem(STORAGE_KEY, JSON.stringify({ address })); }; export const useOneAuth = deps => { const [address, setAddress] = React.useState(null); const [client, setClient] = React.useState(null); const mounted = React.useRef(false); const sessionGeneration = React.useRef(0); React.useEffect(() => { if (!deps) return; mounted.current = true; const restoreGeneration = ++sessionGeneration.current; const {OneAuthClient} = deps.sdk; const nextClient = new OneAuthClient({ providerUrl: backends().auth, clientId: "docs-app-origin", webauthn: { mode: "app_origin", rpId: window.location.hostname }, theme: { mode: "dark", accent: "#ffffff", backdrop: { color: "#52525c", opacity: 0.5, blur: 12 } }, experimental_clear_signing: true, recovery: { fallback: { type: "verified-identity" } }, testnets: true, prewarm: true, sponsorship, onDisconnect: () => { if (!mounted.current) return; sessionGeneration.current += 1; window.localStorage.removeItem(STORAGE_KEY); setAddress(null); } }); setClient(nextClient); const stored = readStoredAddressFromJsonEnvelope(); if (stored) { nextClient.getSession().then(result => { if (!mounted.current || sessionGeneration.current !== restoreGeneration) return; const account = result.success ? result.session.accountAddress : null; if (account && ADDRESS_RE.test(account)) { writeStoredAddressAsJsonEnvelope(account); setAddress(account); } else { window.localStorage.removeItem(STORAGE_KEY); setAddress(null); } }).catch(() => { if (!mounted.current || sessionGeneration.current !== restoreGeneration) return; window.localStorage.removeItem(STORAGE_KEY); setAddress(null); }); } return () => { mounted.current = false; sessionGeneration.current += 1; }; }, [deps]); const login = React.useCallback(async () => { if (!client) return null; const generation = ++sessionGeneration.current; const result = await client.authenticate({ oauthEnabled: false }); if (!result.success) { if (result.error?.code === "USER_CANCELLED") return null; throw new Error(result.error?.message ?? "Authentication failed"); } const account = result.session.accountAddress; if (!ADDRESS_RE.test(account)) throw new Error("Authentication returned an invalid account address"); if (!mounted.current || sessionGeneration.current !== generation) return null; writeStoredAddressAsJsonEnvelope(account); setAddress(account); return account; }, [client]); const logout = React.useCallback(() => { sessionGeneration.current += 1; window.localStorage.removeItem(STORAGE_KEY); if (mounted.current) setAddress(null); if (client?.disconnect) client.disconnect(); }, [client]); return React.useMemo(() => ({ address, isAuthenticated: !!address, client, sponsorship, login, logout }), [address, client, login, logout]); }; export const Frame = ({children, connected}) =>
Grant a scoped session {connected ? "Signed in" : "Not connected"}
{children}
; export const GrantPermissionDemo = () => { const [deps, setDeps] = React.useState(null); const [loadError, setLoadError] = React.useState(""); const [connecting, setConnecting] = React.useState(false); React.useEffect(() => { let cancelled = false; loadDeps().then(d => !cancelled && setDeps(d)).catch(e => !cancelled && setLoadError(String(e.message ?? e))); return () => { cancelled = true; }; }, []); const mods = React.useMemo(() => deps ? buildModules(deps) : null, [deps]); const auth = useOneAuth(deps); return