> ## Documentation Index > Fetch the complete documentation index at: https://docs.getpara.com/llms.txt > Use this file to discover all available pages before exploring further. # Framework Support > Supported Features Across Para's Frameworks export const FeatureGrid = ({instanceId = `feature-grid-web`}) => { useEffect(() => { const initializeFeatureGrid = () => { const platforms = [{ id: "react-web", name: "React/Web" }, { id: "node-server", name: "Node/Server" }, { id: "rest-api", name: "REST API" }, { id: "react-native", name: "React Native" }, { id: "swift", name: "Swift" }, { id: "flutter", name: "Flutter" }, { id: "android", name: "Android
(Coming Soon!)" }]; const footnotes = [{ id: "1", text: "Flutter SDK currently supports MetaMask and Phantom Wallet Auth. Swift SDK currently supports MetaMask Wallet Auth." }, { id: "2", text: "While it's possible to launch the para-wrapped provider UIs with Native Mobile experiences, we have observed that onramp experiences are much smoother via direct integrations." }, { id: "3", text: "REST API uses API key authentication (X-API-Key header). Your backend handles user authentication independently." }]; const createStatus = (status, footnoteId = null) => { const base = { status }; if (footnoteId) { base.footnoteId = footnoteId; } return base; }; const featureSections = [{ id: "signing", title: "Signing", features: [{ id: "signing-evm", name: "EVM", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("supported"), "rest-api": createStatus("supported"), "react-native": createStatus("supported"), "swift": createStatus("supported"), "flutter": createStatus("supported"), "android": createStatus("not-supported") } }, { id: "signing-solana", name: "Solana", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("supported"), "rest-api": createStatus("supported"), "react-native": createStatus("supported"), "swift": createStatus("supported"), "flutter": createStatus("supported"), "android": createStatus("not-supported") } }, { id: "signing-cosmos", name: "Cosmos", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("supported"), "rest-api": createStatus("supported"), "react-native": createStatus("supported"), "swift": createStatus("supported"), "flutter": createStatus("supported"), "android": createStatus("not-supported") } }, { id: "signing-stellar", name: "Stellar", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("supported"), "rest-api": createStatus("supported"), "react-native": createStatus("supported"), "swift": createStatus("not-supported"), "flutter": createStatus("not-supported"), "android": createStatus("not-supported") } }, { id: "signing-server-side", name: "Server-Side", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("supported"), "rest-api": createStatus("supported"), "react-native": createStatus("supported"), "swift": createStatus("supported"), "flutter": createStatus("supported"), "android": createStatus("not-supported") } }] }, { id: "wallet-types", title: "Wallet Types", features: [{ id: "wallet-embedded", name: "Embedded", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("supported"), "rest-api": createStatus("supported"), "react-native": createStatus("supported"), "swift": createStatus("supported"), "flutter": createStatus("supported"), "android": createStatus("not-supported") } }, { id: "wallet-external", name: "External Wallets", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("not-supported"), "rest-api": createStatus("not-supported"), "react-native": createStatus("supported"), "swift": createStatus("footnote", "1"), "flutter": createStatus("footnote", "1"), "android": createStatus("not-supported") } }, { id: "wallet-pregen", name: "Pregen Wallets", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("supported"), "rest-api": createStatus("supported"), "react-native": createStatus("supported"), "swift": createStatus("supported"), "flutter": createStatus("supported"), "android": createStatus("not-supported") } }, { id: "wallet-smart-accounts", name: "Smart Accounts", subitems: [{ id: "wallet-smart-accounts-evm", name: "EVM", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("supported"), "rest-api": createStatus("not-supported"), "react-native": createStatus("supported"), "swift": createStatus("supported"), "flutter": createStatus("supported"), "android": createStatus("not-supported") } }, { id: "wallet-smart-accounts-solana", name: "Solana", platforms: { "react-web": createStatus("coming-soon"), "node-server": createStatus("coming-soon"), "rest-api": createStatus("not-supported"), "react-native": createStatus("coming-soon"), "swift": createStatus("coming-soon"), "flutter": createStatus("coming-soon"), "android": createStatus("not-supported") } }], platforms: { "react-web": null, "node-server": null, "rest-api": null, "react-native": null, "swift": null, "flutter": null, "android": null } }, { id: "wallet-gas-sponsorship", name: "Gas Sponsorship", subitems: [{ id: "wallet-gas-sponsorship-evm", name: "EVM", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("supported"), "rest-api": createStatus("not-supported"), "react-native": createStatus("supported"), "swift": createStatus("supported"), "flutter": createStatus("supported"), "android": createStatus("not-supported") } }, { id: "wallet-gas-sponsorship-solana", name: "Solana", platforms: { "react-web": createStatus("coming-soon"), "node-server": createStatus("coming-soon"), "rest-api": createStatus("not-supported"), "react-native": createStatus("coming-soon"), "swift": createStatus("coming-soon"), "flutter": createStatus("coming-soon"), "android": createStatus("not-supported") } }], platforms: { "react-web": null, "node-server": null, "rest-api": null, "react-native": null, "swift": null, "flutter": null, "android": null } }] }, { id: "authentication", title: "Authentication", features: [{ id: "auth-email-phone", name: "Email + Phone", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("not-supported"), "rest-api": createStatus("footnote", "3"), "react-native": createStatus("supported"), "swift": createStatus("supported"), "flutter": createStatus("supported"), "android": createStatus("not-supported") } }, { id: "auth-social", name: "Social Logins", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("not-supported"), "rest-api": createStatus("footnote", "3"), "react-native": createStatus("supported"), "swift": createStatus("supported"), "flutter": createStatus("supported"), "android": createStatus("not-supported") } }, { id: "auth-passkeys", name: "Passkeys", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("supported"), "rest-api": createStatus("footnote", "3"), "react-native": createStatus("not-supported"), "swift": createStatus("supported"), "flutter": createStatus("supported"), "android": createStatus("not-supported") } }, { id: "auth-password", name: "Password", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("coming-soon"), "rest-api": createStatus("footnote", "3"), "react-native": createStatus("not-supported"), "swift": createStatus("supported"), "flutter": createStatus("supported"), "android": createStatus("not-supported") } }] }, { id: "on-off-ramps", title: "On/Off Ramps", features: [{ id: "ramps-stripe", name: "Stripe", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("not-supported"), "rest-api": createStatus("not-supported"), "react-native": createStatus("footnote", "2"), "swift": createStatus("footnote", "2"), "flutter": createStatus("footnote", "2"), "android": createStatus("not-supported") } }, { id: "ramps-ramp", name: "Ramp", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("not-supported"), "rest-api": createStatus("not-supported"), "react-native": createStatus("footnote", "2"), "swift": createStatus("footnote", "2"), "flutter": createStatus("footnote", "2"), "android": createStatus("not-supported") } }, { id: "ramps-moonpay", name: "Moonpay", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("not-supported"), "rest-api": createStatus("not-supported"), "react-native": createStatus("footnote", "2"), "swift": createStatus("footnote", "2"), "flutter": createStatus("footnote", "2"), "android": createStatus("not-supported") } }] }, { id: "permissions", title: "Permissions", features: [{ id: "permissions-main", name: "Permissions", subitems: [{ id: "permissions-evm", name: "EVM", platforms: { "react-web": createStatus("supported"), "node-server": createStatus("supported"), "rest-api": createStatus("not-supported"), "react-native": createStatus("supported"), "swift": createStatus("coming-soon"), "flutter": createStatus("coming-soon"), "android": createStatus("not-supported") } }, { id: "permissions-solana", name: "Solana", platforms: { "react-web": createStatus("coming-soon"), "node-server": createStatus("coming-soon"), "rest-api": createStatus("not-supported"), "react-native": createStatus("coming-soon"), "swift": createStatus("coming-soon"), "flutter": createStatus("coming-soon"), "android": createStatus("not-supported") } }], platforms: { "react-web": null, "node-server": null, "rest-api": null, "react-native": null, "swift": null, "flutter": null, "android": null } }] }]; const icons = { check: ``, minus: ``, clock: ``, chevronRight: ``, chevronDown: `` }; const styles = ` .${instanceId}-container { --fg-background: #ffffff; --fg-foreground: #09090b; --fg-muted: #f4f4f5; --fg-muted-foreground: #71717a; --fg-accent: #f4f4f5; --fg-accent-foreground: #09090b; --fg-border: #e4e4e7; --fg-input: #e4e4e7; --fg-radius: 0.5rem; --fg-green-100: #dcfce7; --fg-green-600: #16a34a; --fg-amber-100: #fef3c7; --fg-amber-600: #d97706; --fg-blue-100: #dbeafe; --fg-blue-600: #2563eb; --fg-muted-hsl: 240, 4.8%, 95.9%; font-family: inherit; color: var(--fg-foreground); box-sizing: border-box; } .${instanceId}-container *, .${instanceId}-container *::before, .${instanceId}-container *::after { box-sizing: inherit; } .${instanceId}-container .feature-grid-container { max-width: 1100px; margin-left: auto; margin-right: auto; } .${instanceId}-container .feature-card-header { padding: 1.5rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--fg-border); } .${instanceId}-container .feature-card-title { font-size: 1.5rem; font-weight: 600; line-height: 2rem; letter-spacing: -0.025em; margin-bottom: 0.25rem; } .${instanceId}-container .feature-card-description { color: var(--fg-muted-foreground); font-size: 0.875rem; } .${instanceId}-container .legend { margin-bottom: 1rem; display: flex; flex-wrap: wrap; gap: 1.5rem; } .${instanceId}-container .legend-item { display: flex; align-items: center; gap: 0.5rem; } .${instanceId}-container .legend-icon { height: 1.5rem; width: 1.5rem; border-radius: 9999px; display: flex; align-items: center; justify-content: center; } .${instanceId}-container .legend-text { font-size: 0.875rem; color: var(--fg-foreground); } .${instanceId}-container .status-icon-base { height: 1.75rem; width: 1.75rem; border-radius: 9999px; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; } .${instanceId}-container .status-supported { background-color: var(--fg-green-100); color: var(--fg-green-600); } .${instanceId}-container .status-not-supported { background-color: var(--fg-muted); color: var(--fg-muted-foreground); } .${instanceId}-container .status-coming-soon { background-color: var(--fg-amber-100); color: var(--fg-amber-600); } .${instanceId}-container .status-footnote { background-color: var(--fg-blue-100); color: var(--fg-blue-600); cursor: help; } .${instanceId}-container .status-footnote span { font-size: 0.75rem; font-weight: 700; } .${instanceId}-container .section { margin-bottom: 1rem; } .${instanceId}-container .section:last-child { margin-bottom: 0; } .${instanceId}-container .section-title { font-size: 1.125rem; font-weight: 600; margin-bottom: 0.75rem; } .${instanceId}-container .separator { border: 0; border-top: 1px solid var(--fg-border); margin-top: 0.5rem; margin-bottom: 0.5rem; } .${instanceId}-container .table-container { overflow-x: auto; } .${instanceId}-container .feature-table { width: 100%; border-collapse: collapse; caption-side: bottom; font-size: 0.875rem; margin-bottom: 0.5rem; margin-top: 0.5rem; } .${instanceId}-container .feature-table th, .${instanceId}-container .feature-table td { padding: 0.75rem 0.5rem; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--fg-border); } .${instanceId}-container .feature-table tr:last-child td { border-bottom: none; } .${instanceId}-container .feature-table th { font-weight: 500; color: var(--fg-muted-foreground); text-transform: none; white-space: nowrap; } .${instanceId}-container .feature-table th.platform-head { width: 100px; text-align: center; white-space: normal; } .${instanceId}-container .feature-table th.feature-head { width: 250px; } .${instanceId}-container .feature-table tbody tr.expandable-row { cursor: pointer; } .${instanceId}-container .feature-table tbody tr.expandable-row:hover { background-color: hsla(var(--fg-muted-hsl, 240, 4.8%, 95.9%), 0.5); } .${instanceId}-container .feature-table tbody tr.subitem-row { background-color: hsla(var(--fg-muted-hsl, 240, 4.8%, 95.9%), 0.2); } .${instanceId}-container .feature-table td { color: var(--fg-foreground); } .${instanceId}-container .feature-table td.feature-cell { font-weight: 500; } .${instanceId}-container .feature-cell-content { display: flex; align-items: center; gap: 0.5rem; } .${instanceId}-container .subitem-cell-content { display: flex; align-items: center; gap: 0.5rem; padding-left: 1.5rem; } .${instanceId}-container .expand-icon { margin-right: 0.5rem; display: inline-flex; align-items: center; color: var(--fg-muted-foreground); flex-shrink: 0; } .${instanceId}-container .platform-cell { text-align: center; } .${instanceId}-container .feature-card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--fg-border); display: flex; flex-direction: column; align-items: flex-start; } .${instanceId}-container .request-feature-button { display: inline-block; background-color: var(--fg-background); color: var(--fg-foreground); border: 1px solid var(--fg-input); padding: 0.375rem 0.75rem; font-size: 0.875rem; border-radius: calc(var(--fg-radius) - 2px); font-weight: 500; cursor: pointer; margin-bottom: 1rem; transition: background-color 0.2s, color 0.2s; text-decoration: none; } .${instanceId}-container .request-feature-button:hover { background-color: var(--fg-accent); color: var(--fg-accent-foreground); } .${instanceId}-container .footnotes-container { width: 100%; } .${instanceId}-container .footnotes-title { font-size: 0.875rem; font-weight: 500; margin-bottom: 0.5rem; } .${instanceId}-container .footnotes-list { font-size: 0.75rem; color: var(--fg-muted-foreground); list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .${instanceId}-container .footnotes-list li span { font-weight: 700; margin-right: 0.25rem; } `; function createElement(tag, classNames = [], attributes = {}, children = []) { const element = document.createElement(tag); if (classNames.length > 0) { element.classList.add(...classNames); } for (const key in attributes) { element.setAttribute(key, attributes[key]); } children.forEach(child => { if (typeof child === 'string') { element.appendChild(document.createTextNode(child)); } else if (child instanceof Node) { element.appendChild(child); } }); return element; } function createIconElement(iconSvg) { if (typeof iconSvg !== 'string') return null; const template = document.createElement('template'); template.innerHTML = iconSvg.trim(); const svgElement = template.content.firstElementChild; if (svgElement) { svgElement.style.display = 'inline-block'; svgElement.style.verticalAlign = 'middle'; return svgElement; } return null; } function renderPlatformStatus(platformStatus) { const wrapper = createElement('div', ['platform-cell']); let statusElement = null; if (!platformStatus) { statusElement = createElement('div'); wrapper.appendChild(statusElement); return wrapper; } switch (platformStatus.status) { case "supported": statusElement = createElement('div', ['status-icon-base', 'status-supported']); statusElement.appendChild(createIconElement(icons.check)); break; case "not-supported": statusElement = createElement('div', ['status-icon-base', 'status-not-supported']); statusElement.appendChild(createIconElement(icons.minus)); break; case "coming-soon": statusElement = createElement('div', ['status-icon-base', 'status-coming-soon']); statusElement.appendChild(createIconElement(icons.clock)); break; case "footnote": { statusElement = createElement('div', ['status-icon-base', 'status-footnote']); const span = createElement('span', [], {}, [platformStatus.footnoteId || '?']); statusElement.appendChild(span); break; } default: statusElement = createElement('div'); } if (statusElement) { wrapper.appendChild(statusElement); } return wrapper; } function createFeatureRow(feature, isSubitem = false) { const uniqueFeatureId = `${instanceId}-${feature.id}`; const row = createElement('tr', isSubitem ? ['subitem-row'] : []); row.dataset.featureId = uniqueFeatureId; const hasSubitems = feature.subitems && feature.subitems.length > 0; if (hasSubitems) { row.classList.add('expandable-row'); } const featureCell = createElement('td', ['feature-cell']); const featureCellContent = createElement('div', isSubitem ? ['subitem-cell-content'] : ['feature-cell-content']); if (hasSubitems) { const expandIconWrapper = createElement('span', ['expand-icon']); const chevron = createIconElement(icons.chevronDown); if (chevron) expandIconWrapper.appendChild(chevron); featureCellContent.appendChild(expandIconWrapper); row.dataset.expanded = 'true'; row.dataset.subitemsTarget = `subitems-${uniqueFeatureId}`; } featureCellContent.appendChild(document.createTextNode(feature.name)); featureCell.appendChild(featureCellContent); row.appendChild(featureCell); platforms.forEach(platform => { const platformCell = createElement('td', ['platform-cell']); const status = feature.platforms ? feature.platforms[platform.id] : null; platformCell.appendChild(renderPlatformStatus(status)); row.appendChild(platformCell); }); return row; } function buildFeatureGrid() { const container = createElement('div', ['feature-grid-container']); const card = createElement('div', ['feature-card']); const cardContent = createElement('div', ['feature-card-content']); const legend = createElement('div', ['legend']); const legendItems = [{ status: 'supported', text: 'Supported', icon: icons.check, bg: '--fg-green-100', fg: '--fg-green-600' }, { status: 'not-supported', text: 'N/A', icon: icons.minus, bg: '--fg-muted', fg: '--fg-muted-foreground' }, { status: 'coming-soon', text: 'Coming Soon', icon: icons.clock, bg: '--fg-amber-100', fg: '--fg-amber-600' }, { status: 'footnote', text: 'See Footnote', icon: '1', bg: '--fg-blue-100', fg: '--fg-blue-600', isFootnote: true }]; legendItems.forEach(item => { const legendItem = createElement('div', ['legend-item']); const iconDiv = createElement('div', ['legend-icon']); iconDiv.style.backgroundColor = `var(${item.bg})`; iconDiv.style.color = `var(${item.fg})`; if (item.isFootnote) { const span = createElement('span', [], {}, [item.icon]); span.style.fontSize = '0.75rem'; span.style.fontWeight = '700'; iconDiv.appendChild(span); } else { const iconElement = createIconElement(item.icon); if (iconElement) iconDiv.appendChild(iconElement); } legendItem.appendChild(iconDiv); legendItem.appendChild(createElement('span', ['legend-text'], {}, [item.text])); legend.appendChild(legendItem); }); cardContent.appendChild(legend); featureSections.forEach(section => { const sectionDiv = createElement('div', ['section']); sectionDiv.appendChild(createElement('h2', ['section-title'], {}, [section.title])); sectionDiv.appendChild(createElement('hr', ['separator'])); const tableContainer = createElement('div', ['table-container']); const table = createElement('table', ['feature-table']); const thead = createElement('thead'); const headerRow = createElement('tr'); headerRow.appendChild(createElement('th', ['feature-head'], {}, ["Feature"])); platforms.forEach(platform => { const th = createElement('th', ['platform-head']); th.innerHTML = platform.name; headerRow.appendChild(th); }); thead.appendChild(headerRow); table.appendChild(thead); const tbody = createElement('tbody'); section.features.forEach(feature => { const featureRow = createFeatureRow(feature, false); tbody.appendChild(featureRow); if (feature.subitems && feature.subitems.length > 0) { const uniqueFeatureId = `${instanceId}-${feature.id}`; const subRows = feature.subitems.map(subitem => createFeatureRow(subitem, true)); subRows.forEach(subRow => { subRow.classList.add(`subitems-${uniqueFeatureId}`); tbody.appendChild(subRow); }); } }); table.appendChild(tbody); tableContainer.appendChild(table); sectionDiv.appendChild(tableContainer); cardContent.appendChild(sectionDiv); }); card.appendChild(cardContent); const cardFooter = createElement('div', ['feature-card-footer']); const mailtoLink = createElement('a', ['request-feature-button'], { href: "mailto:support@getpara.com?subject=[DEV SUPPORT]", target: "_blank", rel: "noopener noreferrer" }); mailtoLink.textContent = "Ask Us / Request a Feature"; cardFooter.appendChild(mailtoLink); const footnotesContainer = createElement('div', ['footnotes-container']); footnotesContainer.appendChild(createElement('h3', ['footnotes-title'], {}, ["Footnotes:"])); const footnotesList = createElement('ul', ['footnotes-list']); footnotes.forEach(note => { const listItem = createElement('li'); const boldPart = createElement('span', [], {}, [`${note.id}.`]); listItem.appendChild(boldPart); listItem.appendChild(document.createTextNode(` ${note.text}`)); footnotesList.appendChild(listItem); }); footnotesContainer.appendChild(footnotesList); cardFooter.appendChild(footnotesContainer); card.appendChild(cardFooter); container.appendChild(card); container.addEventListener('click', event => { const expandableRow = event.target.closest('.expandable-row'); if (expandableRow) { const targetClass = expandableRow.dataset.subitemsTarget; if (!targetClass) return; const isExpanded = expandableRow.dataset.expanded === 'true'; const subitemRows = container.querySelectorAll(`tr.${targetClass}`); const icon = expandableRow.querySelector('.expand-icon'); subitemRows.forEach(row => { row.style.display = isExpanded ? 'none' : ''; }); expandableRow.dataset.expanded = !isExpanded; if (icon) { icon.replaceChildren(); const newChevron = createIconElement(isExpanded ? icons.chevronRight : icons.chevronDown); if (newChevron) icon.appendChild(newChevron); } } }); return container; } if (!document.getElementById(`${instanceId}-styles`)) { const styleSheet = document.createElement("style"); styleSheet.type = "text/css"; styleSheet.id = `${instanceId}-styles`; styleSheet.textContent = styles; document.head.appendChild(styleSheet); } const wrapperElement = document.getElementById(instanceId); if (wrapperElement) { const featureGridElement = buildFeatureGrid(); wrapperElement.replaceChildren(featureGridElement); wrapperElement.classList.add(`${instanceId}-container`); } else { console.error(`FeatureGrid: Could not find wrapper element with ID ${instanceId}`); } }; initializeFeatureGrid(); return () => { const wrapper = document.getElementById(instanceId); if (wrapper) wrapper.replaceChildren(); const styleEl = document.getElementById(`${instanceId}-styles`); if (styleEl) styleEl.remove(); }; }, [instanceId]); return
; }; export const Link = ({href, label, newTab = false}) => { const [isHovered, setIsHovered] = useState(false); return setIsHovered(true)} onMouseLeave={() => setIsHovered(false)}> {label} ; }; This table outlines the current, quickly changing status of feature support across Para's SDKs. We release new frameworks, then iteratively add features based on customer needs. If you don't see a feature you're looking for here, - we may already be working on it!