@cedros/data-react 0.1.0 → 0.1.1

package/CHANGELOG.md

@@ -2,6 +2,64 @@
 
 ## Unreleased
 
+### Added
+- `TipWidget` self-configuration: fetches tipping config from `GET {dataServerUrl}/site/config/tipping` when no `recipient` prop is provided.
+- `TipWidget` wallet auto-detection: connects to browser Solana wallets (Phantom, Solflare) automatically.
+- `SOL_CURRENCY` and `USDC_CURRENCY` constants now include `mint` addresses for use with `@cedros/trade-react`.
+- `@cedros/trade-react` added as optional peer dependency for tipping payment flow.
+- `BlogSearchInput` — CMD+K keyboard shortcut with debounced client-side search.
+- `FilterDimensionChips` — generic dimension-based tag filtering for blog index.
+- `BookmarkButton` — per-post bookmark toggle.
+- `ContentPaywall` — metered/locked/preview paywall for blog posts.
+- `BlogIndexTemplate` props: `filterDimensions`, `activeFilters`, `onFilterChange`, `onSearch`, `bookmarkedSlugs`, `onBookmarkToggle`.
+- `BlogPostTemplate` props: `isBookmarked`, `onBookmarkToggle`, `slug`, `paywall`.
+- `BlogPaywallConfig` type for paywall configuration including metered free reads.
+
+### Changed
+- `TipWidget` now delegates payment to `TradeApiClient` from `@cedros/trade-react` (build → sign → execute) instead of building Solana transactions directly.
+- `TipWidgetProps.recipient` is now optional (enables self-configuration mode).
+- `BlogTippingConfig` replaced `payClient: TipPayClient` with `dataServerUrl`, `senderAddress`, and `signTransaction` props.
+- `SOL_CURRENCY.mint` changed from `undefined` to `"So11111111111111111111111111111111111111112"`.
+
+### Removed
+- `SolanaMicropayments` component and `createSolanaTipClient`/`detectSolanaWallet` helpers — replaced by `TipWidget` + `@cedros/trade-react`.
+- `ensureRecipientAta` helper — ATA creation is now handled by the trade-react build endpoint (`createsAta: true`).
+- `solanaAtaSetup.ts` and `solanaMicropayments.tsx` files.
+- `TipPayClient` and `TipParams` types — no longer needed.
+- `@solana/web3.js` and `@solana/spl-token` removed from package dependencies.
+- "Ensure Recipient ATA" button removed from admin TippingSection.
+
+### Migration Notes
+
+**Tipping (breaking):**
+- Before:
+  ```tsx
+  import { SolanaMicropayments } from "@cedros/data-react/site-templates";
+  <SolanaMicropayments recipient="..." rpcEndpoint="..." />
+  ```
+  Or with BlogPostTemplate:
+  ```tsx
+  tipping={{ enabled: true, recipient: "...", currencies: [...], payClient: createSolanaTipClient() }}
+  ```
+- After:
+  ```tsx
+  import { TipWidget } from "@cedros/data-react/site-templates";
+  <TipWidget recipient="..." />
+  // or self-configuring:
+  <TipWidget dataServerUrl="https://..." />
+  ```
+  With BlogPostTemplate:
+  ```tsx
+  tipping={{ enabled: true, dataServerUrl: "https://..." }}
+  // or manual:
+  tipping={{ enabled: true, recipient: "...", currencies: [...] }}
+  ```
+  Requires `npm install @cedros/trade-react` for tipping to work at runtime.
+
+---
+
+### Previously shipped (included for completeness)
+
 ### Added
 - `MarkdownContent` renderer based on `react-markdown` + `remark-gfm` + `rehype-slug`.
 - `bodyMarkdown` support in:

package/README.md

@@ -40,7 +40,10 @@ Packaging smoke:
   - admin components/primitives
 - `@cedros/data-react/site-templates`
   - site shell/layout components
-  - page templates
+  - page templates (blog, docs, home, contact, legal, not-found, dashboard)
+  - blog features: `BlogSearchInput`, `FilterDimensionChips`, `BookmarkButton`
+  - `TipWidget`, `SOL_CURRENCY`, `USDC_CURRENCY`
+  - `ContentPaywall`
   - routing/content helpers
 - `@cedros/data-react/admin/styles.css`
 - `@cedros/data-react/site-templates/styles.css`
@@ -127,8 +130,18 @@ Core page templates:
 - `DashboardOverviewTemplate`
 
 Blog templates:
-- `BlogIndexTemplate`
-- `BlogPostTemplate`
+- `BlogIndexTemplate` — supports search, category/tag filters, bookmarks, and generic filter dimensions
+- `BlogPostTemplate` — supports tipping, paywall, and bookmarks
+
+Blog interactive features:
+- `BlogSearchInput` — CMD+K keyboard shortcut, debounced client-side search
+- `FilterDimensionChips` — generic dimension-based tag filtering (replaces category/tag dropdowns)
+- `BookmarkButton` — per-post bookmark toggle (state managed by consumer)
+- `ContentPaywall` — metered/locked/preview paywall with purchase flow via `PaywallPayClient`
+
+Tipping:
+- `TipWidget` — self-configuring tip widget with currency selection, preset amounts, and send flow
+- `SOL_CURRENCY`, `USDC_CURRENCY` — predefined currency constants
 
 Docs templates:
 - `DocsIndexTemplate`
@@ -144,8 +157,88 @@ Content rendering and helpers:
 - `prepareBlogIndex`
 - `prepareDocsIndex`
 - `collectFilterValues`
+- `collectDimensionValues`
+- `matchesFilterDimensions`
 - `buildContentListHref`
 
+## Tipping (TipWidget)
+
+`TipWidget` delegates payment to `@cedros/trade-react` and supports two modes:
+
+**Self-configuring** — fetches config from your cedros-data server:
+```tsx
+<TipWidget dataServerUrl="https://your-data-server.com" />
+```
+
+**Manual** — provide recipient directly (skips config fetch):
+```tsx
+<TipWidget recipient="SomeWalletAddress" currencies={[SOL_CURRENCY]} />
+```
+
+**With per-post recipient override:**
+```tsx
+<TipWidget recipient={post.tipRecipient} />
+```
+
+The widget auto-detects browser wallets (Phantom, Solflare) for signing. To use a custom signer:
+```tsx
+<TipWidget
+  recipient="..."
+  senderAddress={walletAddress}
+  signTransaction={async (base64Tx) => signedBase64Tx}
+/>
+```
+
+### Optional peer dependency
+
+Tipping requires `@cedros/trade-react` at runtime:
+```bash
+npm install @cedros/trade-react
+```
+
+Browser wallet auto-signing also requires `@solana/web3.js` for transaction deserialization. If not installed, provide a `signTransaction` prop instead.
+
+### BlogPostTemplate tipping integration
+
+```tsx
+<BlogPostTemplate
+  tipping={{
+    enabled: true,
+    dataServerUrl: "https://your-data-server.com",
+    // OR provide recipient directly:
+    // recipient: "WalletAddress",
+    // currencies: [SOL_CURRENCY, USDC_CURRENCY],
+    // presets: { SOL: [0.01, 0.05, 0.1], USDC: [1, 5, 10] },
+  }}
+  {...otherProps}
+/>
+```
+
+## Paywall (ContentPaywall)
+
+`BlogPostTemplate` supports metered/locked/preview paywalls:
+
+```tsx
+<BlogPostTemplate
+  paywall={{
+    mode: "preview",          // "free" | "preview" | "locked"
+    previewParagraphs: 3,
+    price: { amount: 5, currency: "USDC", label: "$5" },
+    unlocked: false,
+    payClient: myPaywallClient,
+    remainingFreeReads: 2,    // optional metering
+  }}
+  {...otherProps}
+/>
+```
+
+Modes:
+- `free` — full content, no paywall
+- `preview` — shows first N paragraphs + purchase prompt
+- `locked` — no content shown, purchase prompt only
+
+When `remainingFreeReads > 0`, metered users see full content with a remaining-reads banner.
+
 ## Markdown and HTML behavior
 
 Docs/blog templates default to `bodyMarkdown`.

package/dist/admin/sections/TippingSection.js

@@ -101,37 +101,12 @@ export default function TippingSection({ pluginContext }) {
         }
         await save(normalizePayload(parsed));
     }, [rawEditor, save]);
-    const handleEnsureAta = useCallback(async () => {
-        const splCurrencies = config.currencies.filter((c) => c.mint && c.enabled);
-        if (!config.recipient || splCurrencies.length === 0)
-            return;
-        setLoading(true);
-        setStatus("");
-        setTone("neutral");
-        try {
-            const { ensureRecipientAta } = await import("../../site-templates/solanaAtaSetup.js");
-            const results = [];
-            for (const cur of splCurrencies) {
-                const ata = await ensureRecipientAta(config.recipient, cur.mint);
-                results.push(`${cur.symbol}: ${ata}`);
-            }
-            setStatus(`ATAs ready: ${results.join(", ")}`);
-            setTone("success");
-        }
-        catch (error) {
-            setStatus(`ATA creation failed: ${error.message}`);
-            setTone("error");
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [config.recipient, config.currencies]);
     return (_jsxs("div", { className: "cedros-data", children: [_jsxs("header", { className: "cedros-data__header", children: [_jsxs("div", { children: [_jsx("h2", { className: "cedros-data__title", children: "Tipping" }), _jsx("p", { className: "cedros-data__subtitle", children: "Configure tipping widget for your site." }), !canWrite && (_jsx("p", { className: "cedros-data__subtitle", children: "Read-only mode. Missing `data:settings:write` permission." }))] }), _jsxs("div", { className: "cedros-data-actions", children: [_jsx(AdminButton, { variant: "secondary", onClick: () => void load(), disabled: loading, children: "Refresh" }), _jsx(AdminButton, { variant: "primary", onClick: () => void saveForm(), disabled: loading || !canWrite, title: !canWrite ? "Requires data:settings:write" : undefined, children: "Save Form" }), _jsx(AdminButton, { variant: "secondary", onClick: () => void applyRaw(), disabled: loading || !canWrite, title: !canWrite ? "Requires data:settings:write" : undefined, children: "Save JSON" })] })] }), _jsxs("div", { className: "cedros-data-grid cedros-data-grid--two", children: [_jsxs(Card, { title: "Tipping Settings", subtitle: "Basic tipping configuration.", children: [_jsxs("label", { className: "cedros-data-checkbox-row", children: [_jsx("input", { type: "checkbox", checked: config.enabled, onChange: (e) => setConfig((prev) => ({ ...prev, enabled: e.target.checked })), disabled: !canWrite }), "Enabled"] }), _jsx(TextInput, { label: "Recipient", value: config.recipient, onChange: (e) => setConfig((prev) => ({ ...prev, recipient: e.target.value })), placeholder: "Wallet address or identifier", disabled: !canWrite }), _jsx(TextInput, { label: "Label", value: config.label, onChange: (e) => setConfig((prev) => ({ ...prev, label: e.target.value })), placeholder: "Leave a tip", disabled: !canWrite }), _jsx(TextInput, { label: "Description", value: config.description, onChange: (e) => setConfig((prev) => ({ ...prev, description: e.target.value })), placeholder: "Optional description", disabled: !canWrite }), _jsxs("label", { className: "cedros-data-checkbox-row", children: [_jsx("input", { type: "checkbox", checked: config.allowPerPostRecipient, onChange: (e) => setConfig((prev) => ({ ...prev, allowPerPostRecipient: e.target.checked })), disabled: !canWrite }), "Allow per-post recipient"] }), _jsx("p", { className: "cedros-data__subtitle", style: { margin: 0 }, children: "When enabled, individual blog posts can override the site-wide tip recipient." }), _jsx("h4", { style: { margin: "1rem 0 0.5rem" }, children: "Currencies" }), config.currencies.map((cur) => (_jsxs("label", { className: "cedros-data-checkbox-row", children: [_jsx("input", { type: "checkbox", checked: cur.enabled, disabled: !canWrite || cur.symbol === "SOL", onChange: (e) => {
                                             setConfig((prev) => ({
                                                 ...prev,
                                                 currencies: prev.currencies.map((c) => c.symbol === cur.symbol ? { ...c, enabled: e.target.checked } : c),
                                             }));
-                                        } }), cur.symbol, cur.symbol === "SOL" ? " (always enabled)" : ""] }, cur.symbol))), config.currencies.some((c) => c.mint && c.enabled) && (_jsx(AdminButton, { variant: "secondary", disabled: !config.recipient || loading, onClick: () => void handleEnsureAta(), title: !config.recipient ? "Set recipient address first" : undefined, children: "Ensure Recipient ATA" }))] }), _jsx(Card, { title: "Tipping JSON", subtitle: "Advanced editor for currencies, presets, and more.", children: _jsx(JsonEditor, { label: "site_settings/tipping", value: rawEditor, onChange: (e) => setRawEditor(e.target.value), disabled: !canWrite }) })] }), status && _jsx(StatusNotice, { tone: tone, message: status })] }));
+                                        } }), cur.symbol, cur.symbol === "SOL" ? " (always enabled)" : ""] }, cur.symbol)))] }), _jsx(Card, { title: "Tipping JSON", subtitle: "Advanced editor for currencies, presets, and more.", children: _jsx(JsonEditor, { label: "site_settings/tipping", value: rawEditor, onChange: (e) => setRawEditor(e.target.value), disabled: !canWrite }) })] }), status && _jsx(StatusNotice, { tone: tone, message: status })] }));
 }
 function normalizePayload(value) {
     if (!value || typeof value !== "object" || Array.isArray(value)) {

package/dist/site-templates/BlogTemplates.d.ts

@@ -1,6 +1,6 @@
 import type { SiteNavigationItem } from "./SiteLayout.js";
 import { type BlogIndexEntry, type FilterDimension, type FilterDimensionValues } from "./contentIndex.js";
-import { type TipCurrency, type TipPayClient } from "./tipControls.js";
+import { type TipCurrency } from "./tipControls.js";
 import { type PaywallPrice, type PaywallPayClient } from "./paywallControls.js";
 export interface BlogPostSummary extends BlogIndexEntry {
     author?: string;
@@ -39,14 +39,18 @@ export interface BlogTippingConfig {
     enabled: boolean;
     label?: string;
     description?: string;
-    recipient: string;
-    currencies: TipCurrency[];
+    recipient?: string;
+    currencies?: TipCurrency[];
     presets?: Record<string, number[]>;
-    payClient: TipPayClient;
+    dataServerUrl?: string;
     /** When true, `recipientOverride` takes precedence over `recipient`. */
     allowPerPostRecipient?: boolean;
     /** Per-post tip recipient (used when `allowPerPostRecipient` is true). */
     recipientOverride?: string;
+    /** Sender wallet address (auto-detected if omitted). */
+    senderAddress?: string;
+    /** Signs a base64 serialized transaction, returns signed base64. */
+    signTransaction?: (serializedTx: string) => Promise<string>;
 }
 export interface BlogPaywallConfig {
     mode: "free" | "preview" | "locked";

package/dist/site-templates/BlogTemplates.js

@@ -30,9 +30,9 @@ export function BlogPostTemplate({ siteTitle, navigation, title, bodyMarkdown, b
                         bodyMarkdown,
                         bodyHtml,
                         allowUnsafeHtmlFallback
-                    })] }), tipping?.enabled && (_jsx("section", { className: "cedros-site__card", children: _jsx(TipWidget, { recipient: tipping.allowPerPostRecipient && tipping.recipientOverride
+                    })] }), tipping?.enabled && (_jsx("section", { className: "cedros-site__card", children: _jsx(TipWidget, { dataServerUrl: tipping.dataServerUrl, recipient: tipping.allowPerPostRecipient && tipping.recipientOverride
                         ? tipping.recipientOverride
-                        : tipping.recipient, currencies: tipping.currencies, presets: tipping.presets, payClient: tipping.payClient, label: tipping.label, description: tipping.description }) })), relatedPosts.length > 0 && (_jsxs("section", { className: "cedros-site__card", children: [_jsx("h2", { style: { margin: 0, fontSize: "1.02rem" }, children: "Related posts" }), _jsx("div", { className: "cedros-site__content-grid", style: { marginTop: "0.75rem" }, children: relatedPosts.map((post) => (_jsxs("article", { className: "cedros-site__entry-card", children: [_jsx("h3", { className: "cedros-site__entry-title", style: { marginTop: 0 }, children: _jsx("a", { href: `${basePath}/${post.slug}`, children: post.title }) }), post.excerpt && _jsx("p", { className: "cedros-site__subtitle", children: post.excerpt })] }, post.slug))) })] }))] }));
+                        : tipping.recipient, currencies: tipping.currencies, presets: tipping.presets, label: tipping.label, description: tipping.description, senderAddress: tipping.senderAddress, signTransaction: tipping.signTransaction }) })), relatedPosts.length > 0 && (_jsxs("section", { className: "cedros-site__card", children: [_jsx("h2", { style: { margin: 0, fontSize: "1.02rem" }, children: "Related posts" }), _jsx("div", { className: "cedros-site__content-grid", style: { marginTop: "0.75rem" }, children: relatedPosts.map((post) => (_jsxs("article", { className: "cedros-site__entry-card", children: [_jsx("h3", { className: "cedros-site__entry-title", style: { marginTop: 0 }, children: _jsx("a", { href: `${basePath}/${post.slug}`, children: post.title }) }), post.excerpt && _jsx("p", { className: "cedros-site__subtitle", children: post.excerpt })] }, post.slug))) })] }))] }));
 }
 function BlogIndexControls({ basePath, query, category, tag, sort, categories, tags }) {
     return (_jsxs("form", { method: "get", action: basePath, className: "cedros-site__controls cedros-site__card", children: [_jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Search" }), _jsx("input", { type: "search", name: "q", defaultValue: query, placeholder: "Search blog posts" })] }), _jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Category" }), _jsxs("select", { name: "category", defaultValue: category, children: [_jsx("option", { value: "", children: "All" }), categories.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] })] }), _jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Tag" }), _jsxs("select", { name: "tag", defaultValue: tag, children: [_jsx("option", { value: "", children: "All" }), tags.map((entry) => (_jsx("option", { value: entry, children: entry }, entry)))] })] }), _jsxs("label", { className: "cedros-site__control", children: [_jsx("span", { children: "Sort" }), _jsxs("select", { name: "sort", defaultValue: sort, children: [_jsx("option", { value: "newest", children: "Newest" }), _jsx("option", { value: "oldest", children: "Oldest" }), _jsx("option", { value: "title-asc", children: "Title A-Z" }), _jsx("option", { value: "title-desc", children: "Title Z-A" })] })] }), _jsxs("div", { className: "cedros-site__control-actions", children: [_jsx("button", { className: "cedros-site__nav-link", type: "submit", children: "Apply" }), _jsx("a", { className: "cedros-site__nav-link", href: basePath, children: "Clear" })] })] }));

package/dist/site-templates/index.d.ts

@@ -15,14 +15,12 @@ export { Breadcrumbs, ContentPagination, type PaginationProps } from "./contentU
 export { HomePageTemplate, type HomePageTemplateProps, type HomeFeature } from "./HomePageTemplate.js";
 export { DocsIndexTemplate, DocArticleTemplate, type DocsIndexTemplateProps, type DocArticleTemplateProps, type DocsIndexItem } from "./DocsTemplates.js";
 export { BlogIndexTemplate, BlogPostTemplate, type BlogIndexTemplateProps, type BlogPostTemplateProps, type BlogPostSummary, type BlogTippingConfig, type BlogPaywallConfig } from "./BlogTemplates.js";
-export { TipWidget } from "./tipControls.js";
-export type { TipWidgetProps, TipCurrency, TipParams, TipPayClient } from "./tipControls.js";
+export { TipWidget, SOL_CURRENCY, USDC_CURRENCY } from "./tipControls.js";
+export type { TipWidgetProps, TipCurrency } from "./tipControls.js";
 export { ContentPaywall } from "./paywallControls.js";
 export type { ContentPaywallProps, PaywallPrice, PaywallPayClient } from "./paywallControls.js";
 export { BlogSearchInput, FilterDimensionChips, BookmarkButton } from "./blogControls.js";
 export type { BlogSearchInputProps, FilterDimensionChipsProps, BookmarkButtonProps } from "./blogControls.js";
-export { SolanaMicropayments, createSolanaTipClient, detectSolanaWallet, SOL_CURRENCY, USDC_CURRENCY, type SolanaMicropaymentsProps, } from "./solanaMicropayments.js";
-export { ensureRecipientAta } from "./solanaAtaSetup.js";
 export { LegalPageTemplate, type LegalPageTemplateProps } from "./LegalPageTemplate.js";
 export { ContactPageTemplate, type ContactPageTemplateProps, type ContactDetail } from "./ContactPageTemplate.js";
 export { NotFoundTemplate, type NotFoundTemplateProps } from "./NotFoundTemplate.js";

package/dist/site-templates/index.js

@@ -15,11 +15,9 @@ export { Breadcrumbs, ContentPagination } from "./contentUi.js";
 export { HomePageTemplate } from "./HomePageTemplate.js";
 export { DocsIndexTemplate, DocArticleTemplate } from "./DocsTemplates.js";
 export { BlogIndexTemplate, BlogPostTemplate } from "./BlogTemplates.js";
-export { TipWidget } from "./tipControls.js";
+export { TipWidget, SOL_CURRENCY, USDC_CURRENCY } from "./tipControls.js";
 export { ContentPaywall } from "./paywallControls.js";
 export { BlogSearchInput, FilterDimensionChips, BookmarkButton } from "./blogControls.js";
-export { SolanaMicropayments, createSolanaTipClient, detectSolanaWallet, SOL_CURRENCY, USDC_CURRENCY, } from "./solanaMicropayments.js";
-export { ensureRecipientAta } from "./solanaAtaSetup.js";
 export { LegalPageTemplate } from "./LegalPageTemplate.js";
 export { ContactPageTemplate } from "./ContactPageTemplate.js";
 export { NotFoundTemplate } from "./NotFoundTemplate.js";

package/dist/site-templates/tipControls.d.ts

@@ -4,21 +4,38 @@ export interface TipCurrency {
     logo: string;
     mint?: string;
 }
-export interface TipParams {
-    currency: TipCurrency;
-    amount: number;
-    recipient: string;
-}
-/** Provided by @cedros/pay-react (or any compatible implementation). */
-export interface TipPayClient {
-    sendTip(params: TipParams): Promise<void>;
-}
 export interface TipWidgetProps {
-    recipient: string;
-    currencies: TipCurrency[];
+    /** cedros-data server URL for config fetch; defaults to "" (relative). */
+    dataServerUrl?: string;
+    /** Tip recipient address. When provided, config fetch is skipped (manual mode). */
+    recipient?: string;
+    currencies?: TipCurrency[];
     presets?: Record<string, number[]>;
-    payClient: TipPayClient;
     label?: string;
     description?: string;
+    /** Sender wallet address. Auto-detected from window.solana if omitted. */
+    senderAddress?: string;
+    /** Signs a base64 serialized transaction, returns signed base64. Uses browser wallet if omitted. */
+    signTransaction?: (serializedTx: string) => Promise<string>;
+}
+export declare const SOL_CURRENCY: TipCurrency;
+export declare const USDC_CURRENCY: TipCurrency;
+interface SolanaWallet {
+    isConnected: boolean;
+    publicKey: {
+        toString(): string;
+    } | null;
+    connect(): Promise<{
+        publicKey: {
+            toString(): string;
+        };
+    }>;
+    signTransaction(tx: unknown): Promise<unknown>;
+}
+declare global {
+    interface Window {
+        solana?: SolanaWallet;
+    }
 }
-export declare function TipWidget({ recipient, currencies, presets, payClient, label, description }: TipWidgetProps): React.JSX.Element;
+export declare function TipWidget({ dataServerUrl, recipient: recipientProp, currencies: currenciesProp, presets: presetsProp, label: labelProp, description: descriptionProp, senderAddress: senderProp, signTransaction: signProp, }: TipWidgetProps): React.JSX.Element;
+export {};

package/dist/site-templates/tipControls.js

@@ -1,7 +1,107 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useState } from "react";
-export function TipWidget({ recipient, currencies, presets, payClient, label = "Leave a tip", description }) {
+import { useCallback, useEffect, useState } from "react";
+// ---------------------------------------------------------------------------
+// Currency constants
+// ---------------------------------------------------------------------------
+export const SOL_CURRENCY = {
+    symbol: "SOL",
+    decimals: 9,
+    logo: "",
+    mint: "So11111111111111111111111111111111111111112",
+};
+export const USDC_CURRENCY = {
+    symbol: "USDC",
+    decimals: 6,
+    logo: "",
+    mint: "EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v",
+};
+function getWalletAddress() {
+    if (typeof window === "undefined")
+        return null;
+    return window.solana?.publicKey?.toString() ?? null;
+}
+async function connectAndGetAddress() {
+    const w = typeof window !== "undefined" ? window.solana : undefined;
+    if (!w)
+        throw new Error("No Solana wallet detected. Please install Phantom or another wallet.");
+    if (!w.isConnected) {
+        const { publicKey } = await w.connect();
+        return publicKey.toString();
+    }
+    if (!w.publicKey)
+        throw new Error("Wallet connected but no public key available.");
+    return w.publicKey.toString();
+}
+/** Signs base64 tx via browser wallet. Requires @solana/web3.js at runtime. */
+async function signWithBrowserWallet(serializedTx) {
+    const wallet = window.solana;
+    if (!wallet)
+        throw new Error("No Solana wallet detected");
+    if (!wallet.isConnected)
+        await wallet.connect();
+    let Transaction;
+    try {
+        ({ Transaction } = await import("@solana/web3.js"));
+    }
+    catch {
+        throw new Error("Browser wallet signing requires @solana/web3.js. " +
+            "Install it or provide a signTransaction prop.");
+    }
+    const txBytes = Uint8Array.from(atob(serializedTx), (c) => c.charCodeAt(0));
+    const tx = Transaction.from(txBytes);
+    const signed = (await wallet.signTransaction(tx));
+    const signedBytes = signed.serialize();
+    return btoa(String.fromCharCode(...signedBytes));
+}
+function useTipConfig(dataServerUrl, skip) {
+    const [config, setConfig] = useState(null);
+    const [loading, setLoading] = useState(!skip);
+    const [error, setError] = useState(null);
+    useEffect(() => {
+        if (skip)
+            return;
+        let cancelled = false;
+        (async () => {
+            try {
+                const res = await fetch(`${dataServerUrl}/site/config/tipping`);
+                if (!res.ok)
+                    throw new Error(`Tipping config: ${res.status}`);
+                const data = (await res.json());
+                if (!cancelled) {
+                    setConfig(data);
+                    setLoading(false);
+                }
+            }
+            catch (err) {
+                if (!cancelled) {
+                    setError(err instanceof Error ? err.message : String(err));
+                    setLoading(false);
+                }
+            }
+        })();
+        return () => { cancelled = true; };
+    }, [dataServerUrl, skip]);
+    return { config, loading, error };
+}
+export function TipWidget({ dataServerUrl = "", recipient: recipientProp, currencies: currenciesProp, presets: presetsProp, label: labelProp, description: descriptionProp, senderAddress: senderProp, signTransaction: signProp, }) {
+    const manualMode = !!recipientProp;
+    const { config, loading: configLoading } = useTipConfig(dataServerUrl, manualMode);
+    const recipient = recipientProp ?? config?.recipient ?? "";
+    const currencies = currenciesProp ?? config?.currencies ?? [SOL_CURRENCY];
+    const presets = presetsProp ?? config?.presets;
+    const label = labelProp ?? config?.label ?? "Leave a tip";
+    const description = descriptionProp ?? config?.description;
+    const [walletAddress, setWalletAddress] = useState(senderProp ?? null);
+    useEffect(() => {
+        if (senderProp) {
+            setWalletAddress(senderProp);
+            return;
+        }
+        const detected = getWalletAddress();
+        if (detected)
+            setWalletAddress(detected);
+    }, [senderProp]);
     const [selectedIndex, setSelectedIndex] = useState(0);
     const [amount, setAmount] = useState("");
     const [status, setStatus] = useState("idle");
@@ -9,7 +109,7 @@ export function TipWidget({ recipient, currencies, presets, payClient, label = "
     const selectedCurrency = currencies[selectedIndex] ?? currencies[0];
     const currentPresets = selectedCurrency ? presets?.[selectedCurrency.symbol] : undefined;
     const handleSubmit = useCallback(async () => {
-        if (!selectedCurrency)
+        if (!selectedCurrency || !recipient)
             return;
         const numericAmount = parseFloat(amount);
         if (!numericAmount || numericAmount <= 0)
@@ -17,27 +117,41 @@ export function TipWidget({ recipient, currencies, presets, payClient, label = "
         setStatus("loading");
         setErrorMessage("");
         try {
-            await payClient.sendTip({ currency: selectedCurrency, amount: numericAmount, recipient });
+            let sender = walletAddress;
+            if (!sender) {
+                sender = await connectAndGetAddress();
+                setWalletAddress(sender);
+            }
+            const mint = selectedCurrency.mint ?? SOL_CURRENCY.mint;
+            const rawAmount = String(Math.round(numericAmount * 10 ** selectedCurrency.decimals));
+            let TradeApiClient;
+            try {
+                ({ TradeApiClient } = await import("@cedros/trade-react"));
+            }
+            catch {
+                throw new Error("TipWidget requires @cedros/trade-react. Install it as a dependency.");
+            }
+            const client = new TradeApiClient(dataServerUrl);
+            const buildResult = await client.buildTransfer({ sender, recipient, mint, amount: rawAmount });
+            const sign = signProp ?? signWithBrowserWallet;
+            const signedTx = await sign(buildResult.transaction);
+            const result = await client.executeTransfer(signedTx);
+            if (result.status === "failed")
+                throw new Error("Transaction failed on-chain");
             setStatus("success");
             setAmount("");
         }
         catch (err) {
-            const error = err instanceof Error ? err : new Error(String(err));
             setStatus("error");
-            setErrorMessage(error.message);
+            setErrorMessage(err instanceof Error ? err.message : String(err));
         }
-    }, [selectedCurrency, amount, payClient, recipient]);
-    if (!selectedCurrency)
+    }, [selectedCurrency, amount, recipient, walletAddress, signProp, dataServerUrl]);
+    // Early returns: loading, disabled, or no recipient
+    if (!manualMode && configLoading)
+        return _jsx("div", { className: "cedros-site__tip-widget" });
+    if (!manualMode && config && !config.enabled)
+        return _jsx("div", { className: "cedros-site__tip-widget" });
+    if (!recipient || !selectedCurrency)
         return _jsx("div", { className: "cedros-site__tip-widget" });
-    return (_jsxs("div", { className: "cedros-site__tip-widget", children: [_jsx("h3", { className: "cedros-site__tip-title", children: label }), description && _jsx("p", { className: "cedros-site__tip-description", children: description }), currencies.length > 1 && (_jsx("select", { className: "cedros-site__tip-currency", value: selectedIndex, onChange: (e) => {
-                    setSelectedIndex(Number(e.target.value));
-                    setAmount("");
-                    setStatus("idle");
-                }, children: currencies.map((c, i) => (_jsx("option", { value: i, children: c.symbol }, c.symbol))) })), currentPresets && currentPresets.length > 0 && (_jsx("div", { className: "cedros-site__tip-presets", children: currentPresets.map((presetAmount) => (_jsxs("button", { type: "button", className: "cedros-site__pill", onClick: () => {
-                        setAmount(String(presetAmount));
-                        setStatus("idle");
-                    }, children: [presetAmount, " ", selectedCurrency.symbol] }, presetAmount))) })), _jsx("div", { className: "cedros-site__tip-amount", children: _jsx("input", { type: "number", min: "0", step: "any", placeholder: `Amount in ${selectedCurrency.symbol}`, value: amount, onChange: (e) => {
-                        setAmount(e.target.value);
-                        setStatus("idle");
-                    } }) }), _jsx("button", { type: "button", className: "cedros-site__tip-submit", disabled: status === "loading" || !amount || parseFloat(amount) <= 0, onClick: () => void handleSubmit(), children: status === "loading" ? "Sending..." : "Send Tip" }), status === "success" && (_jsx("p", { className: "cedros-site__tip-status cedros-site__tip-status--success", children: "Tip sent successfully!" })), status === "error" && (_jsx("p", { className: "cedros-site__tip-status cedros-site__tip-status--error", children: errorMessage || "Failed to send tip." }))] }));
+    return (_jsxs("div", { className: "cedros-site__tip-widget", children: [_jsx("h3", { className: "cedros-site__tip-title", children: label }), description && _jsx("p", { className: "cedros-site__tip-description", children: description }), currencies.length > 1 && (_jsx("select", { className: "cedros-site__tip-currency", value: selectedIndex, onChange: (e) => { setSelectedIndex(Number(e.target.value)); setAmount(""); setStatus("idle"); }, children: currencies.map((c, i) => (_jsx("option", { value: i, children: c.symbol }, c.symbol))) })), currentPresets && currentPresets.length > 0 && (_jsx("div", { className: "cedros-site__tip-presets", children: currentPresets.map((presetAmount) => (_jsxs("button", { type: "button", className: "cedros-site__pill", onClick: () => { setAmount(String(presetAmount)); setStatus("idle"); }, children: [presetAmount, " ", selectedCurrency.symbol] }, presetAmount))) })), _jsx("div", { className: "cedros-site__tip-amount", children: _jsx("input", { type: "number", min: "0", step: "any", placeholder: `Amount in ${selectedCurrency.symbol}`, value: amount, onChange: (e) => { setAmount(e.target.value); setStatus("idle"); } }) }), _jsx("button", { type: "button", className: "cedros-site__tip-submit", disabled: status === "loading" || !amount || parseFloat(amount) <= 0, onClick: () => void handleSubmit(), children: status === "loading" ? "Sending..." : "Send Tip" }), status === "success" && (_jsx("p", { className: "cedros-site__tip-status cedros-site__tip-status--success", children: "Tip sent successfully!" })), status === "error" && (_jsx("p", { className: "cedros-site__tip-status cedros-site__tip-status--error", children: errorMessage || "Failed to send tip." }))] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cedros/data-react",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "React components, page templates, and Next.js integration for cedros-data",
   "type": "module",
   "main": "./dist/react/index.js",
@@ -40,11 +40,15 @@
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0"
+    "react-dom": "^18.0.0 || ^19.0.0",
+    "@cedros/trade-react": "^0.1.0"
+  },
+  "peerDependenciesMeta": {
+    "@cedros/trade-react": {
+      "optional": true
+    }
   },
   "dependencies": {
-    "@solana/spl-token": "^0.4.0",
-    "@solana/web3.js": "^1.98.4",
     "highlight.js": "^11.11.1",
     "react-markdown": "^10.1.0",
     "rehype-autolink-headings": "^7.1.0",