> ## 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. # Send a transaction > Execute target-chain calls with funds sourced from one or more chains. export const CSS = ".rhinestone-1auth-demo .demo-mint-banner {\n background-color: light-dark(#fef3c7, #422006);\n border-color: light-dark(#fde68a, #713f12);\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-preview {\n display: contents;\n}\n.rhinestone-1auth-demo .demo-preview-header {\n display: none;\n}\n.rhinestone-1auth-demo .demo-preview-content {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: 0.75rem;\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-preview-content > div[style]:not([class]) {\n padding: 0.75rem 0.875rem !important;\n border-radius: 10px !important;\n background: #14151a !important;\n color: #8a8a94 !important;\n font-size: 0.8125rem !important;\n}\n.rhinestone-1auth-demo .demo-button, .rhinestone-1auth-demo .demo-preview-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), .rhinestone-1auth-demo .demo-preview-button:hover:not(:disabled) {\n background: #6355f5;\n}\n.rhinestone-1auth-demo .demo-button:disabled, .rhinestone-1auth-demo .demo-preview-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), viem: () => CDN("viem@" + VIEM_VERSION) }; 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.mintBanner = (() => { const {useState, useCallback, useMemo, useEffect} = deps.React; const {createOneAuthProvider} = deps.sdk; const {encodeFunctionData, parseUnits} = deps.viem; const {DOCS_APP_ORIGIN_STORAGE_KEY, useAuth} = mods.authctx; const {MOCK_USD_ADDRESS, BASE_SEPOLIA_CHAIN_ID, erc20Abi} = mods.constants; const BASE_SEPOLIA_RPC = "https://sepolia.base.org"; const callsOutcome = function callsOutcome2(result) { const intentStatus = String(result?.intentStatus ?? "").toLowerCase(); if (intentStatus === "completed") return "success"; if (intentStatus === "failed" || intentStatus === "expired") return "failed"; if (!result || String(result.status).toUpperCase() !== "CONFIRMED") { return "pending"; } const receipts = Array.isArray(result.receipts) ? result.receipts : []; if (receipts.length === 0) return "pending"; const statuses = receipts.map(receipt => String(receipt?.status ?? "").toLowerCase()); if (statuses.includes("0x0")) return "failed"; return statuses.every(status => status === "0x1") ? "success" : "pending"; }; const isIntentLookupFailure = function isIntentLookupFailure2(result) { const code = String(result?.error?.code ?? "").toUpperCase(); return code === "STATUS_FAILED" || code === "NETWORK_ERROR"; }; const readCallsStatus = async function readCallsStatus2(provider, client, id) { const result = await provider.request({ method: "wallet_getCallsStatus", params: [id] }); const receipts = Array.isArray(result?.receipts) ? result.receipts : null; if (String(result?.status).toUpperCase() !== "CONFIRMED" || !receipts || receipts.length > 0) { return result; } const intent = await client.getIntentStatus(id); if (isIntentLookupFailure(intent)) { throw new Error(intent.error?.message ?? "Status check failed"); } return { ...result, intentStatus: intent?.status, transactionHash: result?.transactionHash ?? intent?.transactionHash }; }; function getStoredUser() { try { const saved = localStorage.getItem(DOCS_APP_ORIGIN_STORAGE_KEY); if (saved) return JSON.parse(saved); } catch {} return {}; } function resolveAddress() { const stored = getStoredUser(); return stored.address ?? null; } async function checkOnChainBalance(address) { const data = encodeFunctionData({ abi: erc20Abi, functionName: "balanceOf", args: [address] }); const res = await fetch(BASE_SEPOLIA_RPC, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ jsonrpc: "2.0", method: "eth_call", params: [{ to: MOCK_USD_ADDRESS, data }, "latest"], id: 1 }) }); const json = await res.json(); return json.result ? BigInt(json.result) : 0n; } function MintBanner() { const {client, isAuthenticated} = useAuth(); const [state, setState] = useState("idle"); const [error, setError] = useState(null); const [callsId, setCallsId] = useState(null); const requiredBalance = useMemo(() => parseUnits("1", 6), []); const provider = useMemo(() => createOneAuthProvider({ client, chainId: BASE_SEPOLIA_CHAIN_ID, storageKey: DOCS_APP_ORIGIN_STORAGE_KEY, waitForHash: false }), [client]); const checkBalance = useCallback(async () => { setState("checking"); try { const address = resolveAddress(); if (!address) { setState("insufficient"); return; } const balance = await checkOnChainBalance(address); setState(balance >= requiredBalance ? "sufficient" : "insufficient"); } catch { setState("insufficient"); } }, [requiredBalance]); useEffect(() => { if (!isAuthenticated || !client) { setState("idle"); return; } checkBalance(); }, [isAuthenticated, client, checkBalance]); const handleMint = useCallback(async () => { setState("minting"); setError(null); let submittedId = null; try { const accounts = await provider.request({ method: "eth_requestAccounts" }); const address = accounts[0]; const mintData = encodeFunctionData({ abi: erc20Abi, functionName: "mint", args: [address, parseUnits("1", 6)] }); const mockUsdIcon = "https://s3.rhinestone.dev/tokens/musd.svg"; const id = await provider.request({ method: "wallet_sendCalls", params: [{ chainId: BASE_SEPOLIA_CHAIN_ID, sourceChainId: BASE_SEPOLIA_CHAIN_ID, calls: [{ to: MOCK_USD_ADDRESS, data: mintData, label: "Mint", sublabel: "1 mUSD", icon: mockUsdIcon }] }] }); submittedId = id; setCallsId(id); const latest = await readCallsStatus(provider, client, id); const outcome = callsOutcome(latest); if (outcome === "success") { setState("success"); } else if (outcome === "failed") { setError("Mint transaction failed onchain"); setState("insufficient"); } else { setState("pending"); } } catch (err) { setError(err instanceof Error ? err.message : "Mint failed"); setState(submittedId ? "pending" : "insufficient"); } }, [provider, client]); const handleCheckMint = useCallback(async () => { if (!callsId) return; setError(null); try { const latest = await readCallsStatus(provider, client, callsId); const outcome = callsOutcome(latest); if (outcome === "success") setState("success"); else if (outcome === "failed") { setError("Mint transaction failed onchain"); setState("insufficient"); } else setState("pending"); } catch (err) { setError(err instanceof Error ? err.message : "Status check failed"); } }, [provider, client, callsId]); if (state === "idle" || state === "checking") return null; return React.createElement("div", { className: "demo-result demo-mint-banner", style: { marginTop: 0, marginBottom: "0.75rem" } }, state === "insufficient" && React.createElement(React.Fragment, null, React.createElement("p", { className: "demo-result-label" }, "No mUSD Balance"), React.createElement("p", { className: "demo-result-value", style: { fontSize: "0.8rem" } }, "This demo requires mUSD on Base Sepolia. Mint some to get started."), React.createElement("button", { onClick: handleMint, className: "demo-button", style: { marginTop: "0.5rem" } }, "Mint 1 mUSD")), state === "minting" && React.createElement("p", { className: "demo-result-value", style: { fontSize: "0.8rem" } }, "Minting mUSD..."), state === "pending" && React.createElement(React.Fragment, null, React.createElement("p", { className: "demo-result-label" }, "Mint submitted"), React.createElement("p", { className: "demo-result-value", style: { fontSize: "0.75rem" } }, callsId), React.createElement("button", { onClick: handleCheckMint, className: "demo-button", style: { marginTop: "0.5rem" } }, "Check status")), state === "success" && React.createElement(React.Fragment, null, React.createElement("p", { className: "demo-result-value", style: { fontSize: "0.8rem", color: "#22c55e" } }, "1 mUSD mint confirmed."), React.createElement("button", { onClick: checkBalance, className: "demo-button-secondary", style: { marginTop: "0.5rem" } }, "Refresh balance")), state === "sufficient" && React.createElement(React.Fragment, null, React.createElement("p", { className: "demo-result-value", style: { fontSize: "0.8rem" } }, "Funding available (last checked)."), React.createElement("button", { onClick: checkBalance, className: "demo-button-secondary", style: { marginTop: "0.5rem" } }, "Refresh balance")), error && React.createElement("p", { style: { fontSize: "0.75rem", color: "#ef4444", marginTop: "0.25rem" } }, error)); } return { MintBanner }; })(); mods.batchQueueDemo = (() => { const {useCallback, useEffect, useState} = deps.React; const {BatchQueueProvider, useBatchQueue, BatchQueueWidget} = deps.sdk; const {useAuth} = mods.authctx; const {encodeFunctionData, parseUnits} = deps.viem; const {MOCK_USD_ADDRESS, BASE_SEPOLIA_CHAIN_ID, erc20Abi} = mods.constants; const {MintBanner} = mods.mintBanner; function BatchQueueDemoInner({address, pendingAdd, onAuthenticateForAdd, onPendingAddConsumed}) { const {client} = useAuth(); const {queue, addToBatch, clearBatch, signAll, isSigning} = useBatchQueue(); const [message, setMessage] = useState(null); const [submittedResults, setSubmittedResults] = useState(null); const [isChecking, setIsChecking] = useState(false); const intentOutcome = function intentOutcome2(result) { const code = String(result?.error?.code ?? "").toUpperCase(); if (result?.intentId && (code === "STATUS_TIMEOUT" || code === "HASH_TIMEOUT")) { return "pending"; } const status = String(result?.status ?? "").toLowerCase(); if (status === "completed") return "success"; if (status === "failed" || status === "expired") return "failed"; return "pending"; }; const isIntentLookupFailure = function isIntentLookupFailure2(result) { const code = String(result?.error?.code ?? "").toUpperCase(); return code === "STATUS_FAILED" || code === "NETWORK_ERROR"; }; const addCallForAddress = useCallback(addr => { const data = encodeFunctionData({ abi: erc20Abi, functionName: "mint", args: [addr, parseUnits("0.00001", 6)] }); const result = addToBatch({ to: MOCK_USD_ADDRESS, data, label: "Mint 0.00001 mUSD", sublabel: "To your account on Base Sepolia" }, BASE_SEPOLIA_CHAIN_ID); setMessage(result.success ? null : result.error || "Failed to add"); }, [addToBatch]); useEffect(() => { if (!pendingAdd || !address) return; addCallForAddress(address); onPendingAddConsumed(); }, [addCallForAddress, address, onPendingAddConsumed, pendingAdd]); const handleAddCall = async () => { if (isSigning || submittedResults) return; if (!address) { try { const authenticated = await onAuthenticateForAdd(); if (!authenticated) setMessage("Authentication cancelled"); } catch (err) { setMessage(err instanceof Error ? err.message : "Authentication failed"); } return; } addCallForAddress(address); }; const handleSignAll = async () => { if (isSigning || submittedResults) { setMessage("Clear the submitted queue before starting another batch"); return; } if (!address) { setMessage("Authentication required"); return; } setMessage(null); try { const result = await signAll({ accountAddress: address }); if (result.results.length > 0) { setSubmittedResults(result.results); setMessage(`${result.results.length} result${result.results.length === 1 ? "" : "s"} returned`); } else if (["CANCELLED", "USER_CANCELLED", "USER_REJECTED"].includes(result.errorCode ?? "")) { setMessage("Signing cancelled"); } else { setMessage(result.error || "Signing failed before submission"); } } catch (err) { setMessage(err instanceof Error ? err.message : "Signing cancelled"); } }; const handleCheckStatuses = async () => { if (!submittedResults || isChecking) return; setIsChecking(true); try { const checked = await Promise.all(submittedResults.map(async result => { if (!result.intentId) return result; try { const latest = await client.getIntentStatus(result.intentId); if (isIntentLookupFailure(latest)) return { ...result, error: latest.error }; return { ...result, status: latest.status ?? result.status, transactionHash: latest.transactionHash ?? result.transactionHash, error: latest.error }; } catch (err) { return { ...result, error: { message: err instanceof Error ? err.message : "Status check failed" } }; } })); setSubmittedResults(current => current ? checked : null); } finally { setIsChecking(false); } }; const handleClear = () => { if (isChecking) return; clearBatch(); setSubmittedResults(null); setMessage(null); }; return React.createElement("div", { className: "demo-preview", "data-testid": "batch-queue-demo" }, React.createElement("div", { className: "demo-preview-header" }, "Queue transactions"), React.createElement(MintBanner, null), React.createElement("div", { className: "demo-preview-content", style: { flexDirection: "column", alignItems: "stretch", gap: "0.75rem" } }, !address && React.createElement("div", { style: { padding: "0.5rem", backgroundColor: "#fef3c7", borderRadius: "0.375rem", textAlign: "center", fontSize: "0.875rem", color: "#92400e" } }, "Connect your wallet to authorize multi-intent signing"), React.createElement("div", { style: { display: "flex", gap: "0.75rem", justifyContent: "center" } }, React.createElement("button", { onClick: handleAddCall, disabled: isSigning || Boolean(submittedResults), className: "demo-preview-button", "data-testid": "batch-queue-add" }, "Add transaction"), React.createElement("button", { onClick: handleClear, disabled: isSigning || isChecking || queue.length === 0 && !submittedResults, className: "demo-preview-button", "data-testid": "batch-queue-clear", style: { opacity: isSigning || isChecking || queue.length === 0 && !submittedResults ? 0.5 : 1 } }, "Clear")), React.createElement("div", { "data-testid": "batch-queue-count", style: { textAlign: "center", fontSize: "0.75rem", color: "#71717a" } }, queue.length === 0 ? "Click 'Add transaction' to queue intents" : `${queue.length} intent${queue.length !== 1 ? "s" : ""} queued`), message && React.createElement("div", { "data-testid": "batch-queue-result", style: { textAlign: "center", fontSize: "0.75rem", color: "#71717a" } }, message), submittedResults && React.createElement("button", { onClick: handleCheckStatuses, disabled: isChecking, className: "demo-button-secondary" }, isChecking ? "Checking..." : "Check statuses"), submittedResults?.map(result => { const outcome = intentOutcome(result); return React.createElement("div", { key: result.index, className: `demo-result ${outcome === "success" ? "demo-result-success" : outcome === "failed" ? "demo-result-error" : ""}` }, React.createElement("p", { className: "demo-result-label" }, "Transaction ", result.index + 1, ": ", result.intentId ? result.status ?? "submitted" : "not submitted"), result.intentId && React.createElement("p", { className: "demo-result-value" }, result.intentId), result.transactionHash && React.createElement("p", { className: "demo-result-value" }, result.transactionHash), result.error?.message && React.createElement("p", { className: "demo-result-value" }, result.error.message)); })), !submittedResults && !isSigning && React.createElement("div", null, React.createElement(BatchQueueWidget, { onSignAll: handleSignAll })), React.createElement("div", { style: { padding: "0 1rem 1rem", fontSize: "0.75rem", color: "#71717a", textAlign: "center" } }, "One ceremony authorizes separate transactions. They are not atomic and each has its own outcome.")); } function BatchQueueDemo() { const {client, address, login} = useAuth(); const [effectiveAddress, setEffectiveAddress] = useState(address); const [pendingAdd, setPendingAdd] = useState(false); useEffect(() => { setEffectiveAddress(address); }, [address]); const authenticateForAdd = useCallback(async () => { const authenticatedAddress = await login(); if (!authenticatedAddress) return false; setEffectiveAddress(authenticatedAddress); setPendingAdd(true); return true; }, [login]); return React.createElement(BatchQueueProvider, { key: effectiveAddress ?? "anonymous", client, accountAddress: effectiveAddress ?? void 0 }, React.createElement(BatchQueueDemoInner, { address: effectiveAddress, pendingAdd, onAuthenticateForAdd: authenticateForAdd, onPendingAddConsumed: () => setPendingAdd(false) })); } return { BatchQueueDemo }; })(); 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}) =>
Queue non-atomic transactions {connected ? "Signed in" : "Not connected"}
{children}
; export const GuideDemo = () => { 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