@varity-labs/ui-kit 2.0.0-alpha.1 → 2.0.0-beta.10

package/dist/components/PaymentWidget/PaymentWidget.js

@@ -0,0 +1,195 @@
+/**
+ * PaymentWidget Component
+ *
+ * REQUIRED in every Varity app that charges users.
+ * All payments go through the VarityPayments contract with 90/10 revenue split:
+ * - 90% to developer
+ * - 10% to Varity treasury
+ *
+ * Zero-crypto checkout: Users pay with credit card via thirdweb Pay.
+ * No wallets, no tokens, no blockchain terminology visible.
+ * The experience is identical to Stripe checkout.
+ *
+ * Flow:
+ * 1. User clicks purchase button
+ * 2. Credit card form appears (thirdweb Pay modal)
+ * 3. thirdweb converts USD → USDC on Arbitrum One
+ * 4. USDC approve + purchaseApp() execute automatically
+ * 5. User sees "Purchase complete" — never sees crypto
+ *
+ * @example
+ * ```tsx
+ * import { PaymentWidget } from '@varity-labs/ui-kit';
+ *
+ * <PaymentWidget appId={123} price={9900}>
+ *   <button>Buy Premium - $99</button>
+ * </PaymentWidget>
+ * ```
+ */
+import React, { useState, useEffect } from 'react';
+import { TransactionButton, useActiveAccount } from 'thirdweb/react';
+import { prepareContractCall, getContract, readContract, defineChain } from 'thirdweb';
+import { approve } from 'thirdweb/extensions/erc20';
+import { useVarityPayment } from './useVarityPayment';
+/** Arbitrum One USDC contract address */
+const USDC_ADDRESS = '0xaf88d065e77c8cC2239327C5EDb3A432268e5831';
+/** Arbitrum One chain config for thirdweb */
+const ARBITRUM_ONE = defineChain(42161);
+/**
+ * Build the payModal config that hides all crypto complexity.
+ * Users see a clean credit card checkout — no wallets, tokens, or chains.
+ *
+ * The payModal auto-detects that the transaction needs USDC on Arbitrum One
+ * and shows the credit card on-ramp when the user has insufficient balance.
+ */
+function buildPayModalConfig(opts) {
+    return {
+        theme: opts.theme,
+        metadata: {
+            name: opts.title,
+            image: '/logo/varity-logo-color.svg',
+        },
+        // Credit card only — hide crypto swap/transfer options
+        buyWithCrypto: false,
+        // Prefer Stripe for the cleanest credit card experience
+        buyWithFiat: {
+            preferredProvider: 'stripe',
+        },
+        // Only show USDC on Arbitrum One, labeled as "USD" to hide crypto
+        supportedTokens: {
+            42161: [{
+                    address: USDC_ADDRESS,
+                    name: 'USD',
+                    symbol: 'USD',
+                    icon: 'https://assets.coingecko.com/coins/images/6319/standard/usdc.png',
+                }],
+        },
+        showThirdwebBranding: false,
+    };
+}
+/**
+ * PaymentWidget - Required component for app monetization
+ *
+ * Wraps a trigger element and handles the full purchase flow.
+ * Automatically checks USDC allowance — skips authorize step if sufficient.
+ * Credit card payments handled seamlessly via thirdweb Pay.
+ */
+export const PaymentWidget = ({ appId, price, type = 'one-time', intervalDays = 30, onSuccess, onCancel, onError, theme = 'dark', className = '', children, disabled = false, }) => {
+    const { hasPurchased, isLoading, pricing, } = useVarityPayment({ appId });
+    const account = useActiveAccount();
+    const [isAuthorized, setIsAuthorized] = useState(false);
+    const [hasAllowance, setHasAllowance] = useState(null);
+    // Get payment contract address
+    const paymentsAddress = (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_VARITY_PAYMENTS_ADDRESS
+        ? process.env.NEXT_PUBLIC_VARITY_PAYMENTS_ADDRESS
+        : '0x0568cf3b5b9c94542aa8d32eb51ffa38912fc48c');
+    // Amount needed in raw USDC units
+    const amountNeeded = pricing?.priceUsdc
+        ? pricing.priceUsdc
+        : price
+            ? BigInt(price * 10000) // cents * 10000 = USDC units (6 decimals)
+            : BigInt(0);
+    // Check USDC allowance on mount — skip authorize step if sufficient
+    useEffect(() => {
+        if (!account?.address || amountNeeded === BigInt(0)) {
+            setHasAllowance(false);
+            return;
+        }
+        const checkAllowance = async () => {
+            try {
+                const { createThirdwebClient } = await import('thirdweb');
+                const client = createThirdwebClient({
+                    clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID || '',
+                });
+                const usdcContract = getContract({ client, chain: ARBITRUM_ONE, address: USDC_ADDRESS });
+                const currentAllowance = await readContract({
+                    contract: usdcContract,
+                    method: 'function allowance(address owner, address spender) view returns (uint256)',
+                    params: [account.address, paymentsAddress],
+                });
+                setHasAllowance(BigInt(currentAllowance.toString()) >= amountNeeded);
+            }
+            catch {
+                setHasAllowance(false);
+            }
+        };
+        checkAllowance();
+    }, [account?.address, amountNeeded, paymentsAddress]);
+    // Calculate price in USD for display and payModal
+    const priceUsd = pricing?.priceUsdc
+        ? Number(pricing.priceUsdc) / 1_000_000
+        : price
+            ? price / 100
+            : 0;
+    const displayPrice = priceUsd > 0 ? `$${priceUsd.toFixed(2)}` : null;
+    // Already purchased
+    if (hasPurchased && !isLoading) {
+        return (React.createElement("div", { className: `inline-flex items-center gap-2 text-green-500 ${className}` },
+            React.createElement("svg", { className: "w-5 h-5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" },
+                React.createElement("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 13l4 4L19 7" })),
+            React.createElement("span", null, "Purchased")));
+    }
+    // Loading
+    if (isLoading) {
+        return React.createElement("div", { className: className }, children);
+    }
+    // No pricing set
+    if (!pricing?.isActive) {
+        return null;
+    }
+    // Helper to get thirdweb client
+    const getClient = async () => {
+        const { createThirdwebClient } = await import('thirdweb');
+        return createThirdwebClient({
+            clientId: process.env.NEXT_PUBLIC_THIRDWEB_CLIENT_ID || '',
+        });
+    };
+    const needsAuthorization = hasAllowance === false && !isAuthorized;
+    if (needsAuthorization) {
+        // Step 1: Authorize payment (sets USDC allowance)
+        // payModal handles credit card on-ramp if user has no USDC
+        return (React.createElement(TransactionButton, { transaction: async () => {
+                const client = await getClient();
+                const usdcContract = getContract({ client, chain: ARBITRUM_ONE, address: USDC_ADDRESS });
+                return approve({
+                    contract: usdcContract,
+                    spender: paymentsAddress,
+                    amount: priceUsd,
+                });
+            }, onTransactionConfirmed: () => {
+                setIsAuthorized(true);
+            }, onError: (error) => {
+                onError?.(error);
+            }, payModal: buildPayModalConfig({
+                theme,
+                title: `Payment — ${displayPrice}`,
+            }), className: className, disabled: disabled }, children));
+    }
+    // Step 2 (or only step if allowance exists): Complete purchase
+    return (React.createElement(TransactionButton, { transaction: async () => {
+            const client = await getClient();
+            const contract = getContract({ client, chain: ARBITRUM_ONE, address: paymentsAddress });
+            return prepareContractCall({
+                contract,
+                method: {
+                    name: 'purchaseApp',
+                    type: 'function',
+                    stateMutability: 'nonpayable',
+                    inputs: [{ name: 'appId', type: 'uint64' }],
+                    outputs: [],
+                },
+                params: [BigInt(appId)],
+            });
+        }, onTransactionConfirmed: (receipt) => {
+            onSuccess?.(receipt.transactionHash);
+        }, onError: (error) => {
+            onError?.(error);
+        }, payModal: buildPayModalConfig({
+            theme,
+            title: type === 'subscription'
+                ? `Subscribe — ${displayPrice}/mo`
+                : `Purchase — ${displayPrice}`,
+        }), className: className, disabled: disabled }, children));
+};
+export default PaymentWidget;
+//# sourceMappingURL=PaymentWidget.js.map

package/dist/components/PaymentWidget/PaymentWidget.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaymentWidget.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/PaymentWidget.tsx"],"names":[],"mappings":"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"}

package/dist/components/PaymentWidget/index.d.ts

@@ -0,0 +1,30 @@
+/**
+ * PaymentWidget Components
+ *
+ * Mandatory components for developer apps to charge end-users.
+ * All payments go through the VarityPayments contract with 90/10 revenue split.
+ *
+ * @example
+ * ```tsx
+ * import { PaymentWidget, PaymentGate, useVarityPayment } from '@varity/ui-kit';
+ *
+ * // Simple button wrapper
+ * <PaymentWidget appId={123} price={9900}>
+ *   <button>Buy Premium</button>
+ * </PaymentWidget>
+ *
+ * // Paywall for content
+ * <PaymentGate appId={123} fallback={<LockedUI />}>
+ *   <PremiumContent />
+ * </PaymentGate>
+ *
+ * // Custom implementation with hook
+ * const { hasPurchased, purchase } = useVarityPayment({ appId: 123 });
+ * ```
+ */
+export { PaymentWidget } from './PaymentWidget';
+export { PaymentGate } from './PaymentGate';
+export { useVarityPayment } from './useVarityPayment';
+export type { PaymentWidgetProps, PaymentGateProps, UseVarityPaymentReturn, UseVarityPaymentOptions, AppPricing, PaymentType, } from './types';
+export { VARITY_PAYMENTS_ADDRESS, VARITY_TREASURY_ADDRESS, PLATFORM_FEE_BPS, VARITY_PAYMENTS_ABI, } from './types';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/PaymentWidget/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAGH,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG5C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAGtD,YAAY,EACV,kBAAkB,EAClB,gBAAgB,EAChB,sBAAsB,EACtB,uBAAuB,EACvB,UAAU,EACV,WAAW,GACZ,MAAM,SAAS,CAAC;AAGjB,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,SAAS,CAAC"}

package/dist/components/PaymentWidget/index.js

@@ -0,0 +1,32 @@
+/**
+ * PaymentWidget Components
+ *
+ * Mandatory components for developer apps to charge end-users.
+ * All payments go through the VarityPayments contract with 90/10 revenue split.
+ *
+ * @example
+ * ```tsx
+ * import { PaymentWidget, PaymentGate, useVarityPayment } from '@varity/ui-kit';
+ *
+ * // Simple button wrapper
+ * <PaymentWidget appId={123} price={9900}>
+ *   <button>Buy Premium</button>
+ * </PaymentWidget>
+ *
+ * // Paywall for content
+ * <PaymentGate appId={123} fallback={<LockedUI />}>
+ *   <PremiumContent />
+ * </PaymentGate>
+ *
+ * // Custom implementation with hook
+ * const { hasPurchased, purchase } = useVarityPayment({ appId: 123 });
+ * ```
+ */
+// Components
+export { PaymentWidget } from './PaymentWidget';
+export { PaymentGate } from './PaymentGate';
+// Hooks
+export { useVarityPayment } from './useVarityPayment';
+// Constants
+export { VARITY_PAYMENTS_ADDRESS, VARITY_TREASURY_ADDRESS, PLATFORM_FEE_BPS, VARITY_PAYMENTS_ABI, } from './types';
+//# sourceMappingURL=index.js.map

package/dist/components/PaymentWidget/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,aAAa;AACb,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE5C,QAAQ;AACR,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAYtD,YAAY;AACZ,OAAO,EACL,uBAAuB,EACvB,uBAAuB,EACvB,gBAAgB,EAChB,mBAAmB,GACpB,MAAM,SAAS,CAAC"}

package/dist/components/PaymentWidget/types.d.ts

@@ -0,0 +1,200 @@
+/**
+ * PaymentWidget Types
+ * For developer apps to charge end-users with 90/10 revenue split
+ */
+/**
+ * Payment type for app purchases
+ */
+export type PaymentType = 'one-time' | 'subscription';
+/**
+ * App pricing information from VarityPayments contract
+ */
+export interface AppPricing {
+    /** Price in USDC (6 decimals, e.g., 99_000000 = $99) */
+    priceUsdc: bigint;
+    /** Developer wallet address */
+    developer: string;
+    /** Whether this is a subscription */
+    isSubscription: boolean;
+    /** Billing interval in days (for subscriptions) */
+    intervalDays: number;
+    /** Whether pricing is active */
+    isActive: boolean;
+}
+/**
+ * PaymentWidget component props
+ */
+export interface PaymentWidgetProps {
+    /** App ID from Varity App Registry (required) */
+    appId: number;
+    /**
+     * Price in cents for display (e.g., 9900 = $99.00)
+     * If not provided, will fetch from contract
+     */
+    price?: number;
+    /** Payment type: one-time or subscription */
+    type?: PaymentType;
+    /** Billing interval in days (for subscriptions, default: 30) */
+    intervalDays?: number;
+    /** Callback after successful payment */
+    onSuccess?: (txHash: string) => void;
+    /** Callback when payment is cancelled */
+    onCancel?: () => void;
+    /** Callback on payment error */
+    onError?: (error: Error) => void;
+    /** Theme variant */
+    theme?: 'light' | 'dark';
+    /** Custom class name */
+    className?: string;
+    /** Trigger element (button, link, etc.) */
+    children: React.ReactNode;
+    /** Disable the widget */
+    disabled?: boolean;
+}
+/**
+ * PaymentGate component props
+ */
+export interface PaymentGateProps {
+    /** App ID from Varity App Registry */
+    appId: number;
+    /** Price in cents for the unlock button */
+    price?: number;
+    /** Content to show when not purchased (paywall) */
+    fallback: React.ReactNode;
+    /** Premium content to show when purchased */
+    children: React.ReactNode;
+    /** Theme variant */
+    theme?: 'light' | 'dark';
+    /** Custom class name */
+    className?: string;
+}
+/**
+ * useVarityPayment hook return type
+ */
+export interface UseVarityPaymentReturn {
+    /** Whether the current user has purchased this app */
+    hasPurchased: boolean;
+    /** Loading state for purchase check */
+    isLoading: boolean;
+    /** Whether a purchase is in progress */
+    isPurchasing: boolean;
+    /** Error message if any */
+    error: string | null;
+    /** App pricing information */
+    pricing: AppPricing | null;
+    /** Trigger a purchase */
+    purchase: () => Promise<string | null>;
+    /** Refresh purchase status */
+    refresh: () => Promise<void>;
+}
+/**
+ * useVarityPayment hook options
+ */
+export interface UseVarityPaymentOptions {
+    /** App ID to check purchase status for */
+    appId: number;
+    /** Auto-fetch pricing on mount */
+    autoFetch?: boolean;
+}
+/**
+ * VarityPayments contract address on Arbitrum One (mainnet)
+ * Set NEXT_PUBLIC_VARITY_PAYMENTS_ADDRESS env var after deploying to Arb One.
+ */
+export declare const VARITY_PAYMENTS_ADDRESS: `0x${string}`;
+/**
+ * Varity Treasury address (receives 10% platform fee)
+ */
+export declare const VARITY_TREASURY_ADDRESS: "0xA0b83bBeF45FeE8c8E158b25b736E05eBd51b793";
+/**
+ * Platform fee in basis points (10% = 1000 bps)
+ */
+export declare const PLATFORM_FEE_BPS = 1000;
+/**
+ * VarityPayments contract ABI (camelCase - Stylus SDK conversion)
+ */
+export declare const VARITY_PAYMENTS_ABI: readonly [{
+    readonly name: "getAppPricing";
+    readonly type: "function";
+    readonly stateMutability: "view";
+    readonly inputs: readonly [{
+        readonly name: "appId";
+        readonly type: "uint64";
+    }];
+    readonly outputs: readonly [{
+        readonly name: "priceUsdc";
+        readonly type: "uint64";
+    }, {
+        readonly name: "developer";
+        readonly type: "address";
+    }, {
+        readonly name: "isSubscription";
+        readonly type: "bool";
+    }, {
+        readonly name: "intervalDays";
+        readonly type: "uint64";
+    }, {
+        readonly name: "isActive";
+        readonly type: "bool";
+    }];
+}, {
+    readonly name: "hasUserPurchased";
+    readonly type: "function";
+    readonly stateMutability: "view";
+    readonly inputs: readonly [{
+        readonly name: "appId";
+        readonly type: "uint64";
+    }, {
+        readonly name: "buyer";
+        readonly type: "address";
+    }];
+    readonly outputs: readonly [{
+        readonly name: "";
+        readonly type: "bool";
+    }];
+}, {
+    readonly name: "getTreasury";
+    readonly type: "function";
+    readonly stateMutability: "view";
+    readonly inputs: readonly [];
+    readonly outputs: readonly [{
+        readonly name: "";
+        readonly type: "address";
+    }];
+}, {
+    readonly name: "getUsdcAddress";
+    readonly type: "function";
+    readonly stateMutability: "view";
+    readonly inputs: readonly [];
+    readonly outputs: readonly [{
+        readonly name: "";
+        readonly type: "address";
+    }];
+}, {
+    readonly name: "purchaseApp";
+    readonly type: "function";
+    readonly stateMutability: "nonpayable";
+    readonly inputs: readonly [{
+        readonly name: "appId";
+        readonly type: "uint64";
+    }];
+    readonly outputs: readonly [];
+}, {
+    readonly name: "setAppPrice";
+    readonly type: "function";
+    readonly stateMutability: "nonpayable";
+    readonly inputs: readonly [{
+        readonly name: "appId";
+        readonly type: "uint64";
+    }, {
+        readonly name: "priceUsdc";
+        readonly type: "uint64";
+    }, {
+        readonly name: "isSubscription";
+        readonly type: "bool";
+    }, {
+        readonly name: "intervalDays";
+        readonly type: "uint64";
+    }];
+    readonly outputs: readonly [];
+}];
+//# sourceMappingURL=types.d.ts.map

package/dist/components/PaymentWidget/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,UAAU,GAAG,cAAc,CAAC;AAEtD;;GAEG;AACH,MAAM,WAAW,UAAU;IACzB,wDAAwD;IACxD,SAAS,EAAE,MAAM,CAAC;IAClB,+BAA+B;IAC/B,SAAS,EAAE,MAAM,CAAC;IAClB,qCAAqC;IACrC,cAAc,EAAE,OAAO,CAAC;IACxB,mDAAmD;IACnD,YAAY,EAAE,MAAM,CAAC;IACrB,gCAAgC;IAChC,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB;IACjC,iDAAiD;IACjD,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,6CAA6C;IAC7C,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,gEAAgE;IAChE,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,wCAAwC;IACxC,SAAS,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACrC,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gCAAgC;IAChC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,oBAAoB;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,2CAA2C;IAC3C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,yBAAyB;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,sCAAsC;IACtC,KAAK,EAAE,MAAM,CAAC;IACd,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,6CAA6C;IAC7C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,oBAAoB;IACpB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,wBAAwB;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,sDAAsD;IACtD,YAAY,EAAE,OAAO,CAAC;IACtB,uCAAuC;IACvC,SAAS,EAAE,OAAO,CAAC;IACnB,wCAAwC;IACxC,YAAY,EAAE,OAAO,CAAC;IACtB,2BAA2B;IAC3B,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,8BAA8B;IAC9B,OAAO,EAAE,UAAU,GAAG,IAAI,CAAC;IAC3B,yBAAyB;IACzB,QAAQ,EAAE,MAAM,OAAO,CAAC,MAAM,GAAG,IAAI,CAAC,CAAC;IACvC,8BAA8B;IAC9B,OAAO,EAAE,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;CAC9B;AAED;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC,0CAA0C;IAC1C,KAAK,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB;AAED;;;GAGG;AACH,eAAO,MAAM,uBAAuB,EAI/B,KAAK,MAAM,EAAE,CAAC;AAEnB;;GAEG;AACH,eAAO,MAAM,uBAAuB,EAAG,4CAAqD,CAAC;AAE7F;;GAEG;AACH,eAAO,MAAM,gBAAgB,OAAO,CAAC;AAErC;;GAEG;AACH,eAAO,MAAM,mBAAmB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA4DtB,CAAC"}

package/dist/components/PaymentWidget/types.js

@@ -0,0 +1,84 @@
+/**
+ * PaymentWidget Types
+ * For developer apps to charge end-users with 90/10 revenue split
+ */
+/**
+ * VarityPayments contract address on Arbitrum One (mainnet)
+ * Set NEXT_PUBLIC_VARITY_PAYMENTS_ADDRESS env var after deploying to Arb One.
+ */
+export const VARITY_PAYMENTS_ADDRESS = (typeof process !== 'undefined' && process.env?.NEXT_PUBLIC_VARITY_PAYMENTS_ADDRESS
+    ? process.env.NEXT_PUBLIC_VARITY_PAYMENTS_ADDRESS
+    : '0x0568cf3b5b9c94542aa8d32eb51ffa38912fc48c');
+/**
+ * Varity Treasury address (receives 10% platform fee)
+ */
+export const VARITY_TREASURY_ADDRESS = '0xA0b83bBeF45FeE8c8E158b25b736E05eBd51b793';
+/**
+ * Platform fee in basis points (10% = 1000 bps)
+ */
+export const PLATFORM_FEE_BPS = 1000;
+/**
+ * VarityPayments contract ABI (camelCase - Stylus SDK conversion)
+ */
+export const VARITY_PAYMENTS_ABI = [
+    // Read functions
+    {
+        name: 'getAppPricing',
+        type: 'function',
+        stateMutability: 'view',
+        inputs: [{ name: 'appId', type: 'uint64' }],
+        outputs: [
+            { name: 'priceUsdc', type: 'uint64' },
+            { name: 'developer', type: 'address' },
+            { name: 'isSubscription', type: 'bool' },
+            { name: 'intervalDays', type: 'uint64' },
+            { name: 'isActive', type: 'bool' },
+        ],
+    },
+    {
+        name: 'hasUserPurchased',
+        type: 'function',
+        stateMutability: 'view',
+        inputs: [
+            { name: 'appId', type: 'uint64' },
+            { name: 'buyer', type: 'address' },
+        ],
+        outputs: [{ name: '', type: 'bool' }],
+    },
+    {
+        name: 'getTreasury',
+        type: 'function',
+        stateMutability: 'view',
+        inputs: [],
+        outputs: [{ name: '', type: 'address' }],
+    },
+    {
+        name: 'getUsdcAddress',
+        type: 'function',
+        stateMutability: 'view',
+        inputs: [],
+        outputs: [{ name: '', type: 'address' }],
+    },
+    // Write functions — nonpayable (ERC-20 USDC transferFrom pattern)
+    // Users must approve() USDC spending before calling purchaseApp
+    {
+        name: 'purchaseApp',
+        type: 'function',
+        stateMutability: 'nonpayable',
+        inputs: [{ name: 'appId', type: 'uint64' }],
+        outputs: [],
+    },
+    {
+        name: 'setAppPrice',
+        type: 'function',
+        stateMutability: 'nonpayable',
+        inputs: [
+            { name: 'appId', type: 'uint64' },
+            { name: 'priceUsdc', type: 'uint64' },
+            { name: 'isSubscription', type: 'bool' },
+            { name: 'intervalDays', type: 'uint64' },
+        ],
+        outputs: [],
+    },
+];
+//# sourceMappingURL=types.js.map

package/dist/components/PaymentWidget/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/components/PaymentWidget/types.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAsGH;;;GAGG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,CACrC,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,CAAC,GAAG,EAAE,mCAAmC;IAChF,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,mCAAmC;IACjD,CAAC,CAAC,4CAA4C,CAChC,CAAC;AAEnB;;GAEG;AACH,MAAM,CAAC,MAAM,uBAAuB,GAAG,4CAAqD,CAAC;AAE7F;;GAEG;AACH,MAAM,CAAC,MAAM,gBAAgB,GAAG,IAAI,CAAC;AAErC;;GAEG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG;IACjC,iBAAiB;IACjB;QACE,IAAI,EAAE,eAAe;QACrB,IAAI,EAAE,UAAU;QAChB,eAAe,EAAE,MAAM;QACvB,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;QAC3C,OAAO,EAAE;YACP,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE;YACrC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE;YACtC,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE;YACxC,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE;YACxC,EAAE,IAAI,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,EAAE;SACnC;KACF;IACD;QACE,IAAI,EAAE,kBAAkB;QACxB,IAAI,EAAE,UAAU;QAChB,eAAe,EAAE,MAAM;QACvB,MAAM,EAAE;YACN,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE;YACjC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE;SACnC;QACD,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;KACtC;IACD;QACE,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,UAAU;QAChB,eAAe,EAAE,MAAM;QACvB,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;KACzC;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,IAAI,EAAE,UAAU;QAChB,eAAe,EAAE,MAAM;QACvB,MAAM,EAAE,EAAE;QACV,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;KACzC;IACD,kEAAkE;IAClE,gEAAgE;IAChE;QACE,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,UAAU;QAChB,eAAe,EAAE,YAAY;QAC7B,MAAM,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;QAC3C,OAAO,EAAE,EAAE;KACZ;IACD;QACE,IAAI,EAAE,aAAa;QACnB,IAAI,EAAE,UAAU;QAChB,eAAe,EAAE,YAAY;QAC7B,MAAM,EAAE;YACN,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE;YACjC,EAAE,IAAI,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE;YACrC,EAAE,IAAI,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,EAAE;YACxC,EAAE,IAAI,EAAE,cAAc,EAAE,IAAI,EAAE,QAAQ,EAAE;SACzC;QACD,OAAO,EAAE,EAAE;KACZ;CACO,CAAC"}

package/dist/components/PaymentWidget/useSeamlessPayment.d.ts

@@ -0,0 +1,51 @@
+/**
+ * useSeamlessPayment - One-Click Payment with Auto On-Ramp
+ *
+ * Combines balance check + on-ramp + approval + purchase into a single flow.
+ * User just clicks "Pay" - everything happens automatically.
+ *
+ * Flow:
+ * 1. Check USDC balance
+ * 2. If insufficient → Auto-trigger Privy on-ramp (Bridge/MoonPay/Coinbase modal)
+ * 3. Auto-approve USDC allowance if needed
+ * 4. Execute purchase (90/10 split)
+ *
+ * Integration with Bridge:
+ * - Once Bridge is configured in PrivyProvider's fundingMethodConfig
+ * - useFundWallet automatically uses Bridge (Stripe UX)
+ * - Falls back to MoonPay/Coinbase if Bridge unavailable
+ *
+ * @example
+ * ```tsx
+ * const { seamlessPurchase } = useSeamlessPayment({ appId: 123 });
+ *
+ * <button onClick={() => seamlessPurchase()}>
+ *   Pay $99
+ * </button>
+ * ```
+ */
+/**
+ * Enhanced payment hook with seamless on-ramp integration
+ */
+export declare function useSeamlessPayment({ appId }: {
+    appId: number;
+}): {
+    seamlessPurchase: () => Promise<{
+        success: boolean;
+        txHash?: string;
+        error?: string;
+        needsApproval?: boolean;
+        needsFunding?: boolean;
+    }>;
+    onrampStatus: "idle" | "checking" | "funding" | "approving" | "purchasing";
+    checkBalance: (address: string) => Promise<bigint>;
+    checkAllowance: (address: string) => Promise<bigint>;
+    hasPurchased: boolean;
+    isLoading: boolean;
+    isPurchasing: boolean;
+    error: string | null;
+    pricing: import("./types").AppPricing | null;
+    purchase: () => Promise<string | null>;
+    refresh: () => Promise<void>;
+};
+//# sourceMappingURL=useSeamlessPayment.d.ts.map

package/dist/components/PaymentWidget/useSeamlessPayment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useSeamlessPayment.d.ts","sourceRoot":"","sources":["../../../src/components/PaymentWidget/useSeamlessPayment.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAaH;;GAEG;AACH,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,MAAM,CAAA;CAAE;4BAiEd,OAAO,CAAC;QACrD,OAAO,EAAE,OAAO,CAAC;QACjB,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,KAAK,CAAC,EAAE,MAAM,CAAC;QACf,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,YAAY,CAAC,EAAE,OAAO,CAAC;KACxB,CAAC;;4BA5D+C,MAAM,KAAG,OAAO,CAAC,MAAM,CAAC;8BAmBtB,MAAM,KAAG,OAAO,CAAC,MAAM,CAAC;;;;;;;;EA6H5E"}