@rotateprotocol/sdk 1.0.0

package/src/components/PaymentButton.tsx

@@ -0,0 +1,348 @@
+/**
+ * Rotate Payment Button
+ * 
+ * Drop-in payment button that handles the entire checkout flow.
+ * Just add to your page and you're accepting payments!
+ * 
+ * @example
+ * ```tsx
+ * // Simple usage - just amount!
+ * <PaymentButton amount={29.99} />
+ * 
+ * // With customization
+ * <PaymentButton 
+ *   amount={99.99}
+ *   currency="USD"
+ *   label="Buy Now"
+ *   description="Premium Plan"
+ *   onSuccess={(payment) => console.log('Paid!', payment)}
+ * />
+ * 
+ * // Styled button
+ * <PaymentButton 
+ *   amount={49.99}
+ *   variant="outline"
+ *   size="lg"
+ *   className="my-custom-class"
+ * />
+ * ```
+ */
+
+import React, { useState, useCallback, CSSProperties } from 'react';
+import { useRotateContext } from './RotateProvider';
+
+// ==================== TYPES ====================
+
+export interface PaymentButtonProps {
+  /** Amount to charge */
+  amount: number;
+  /** Currency (default: USD) */
+  currency?: 'SOL' | 'USDC' | 'USDT' | 'USD';
+  /** Button label (default: "Pay {amount}") */
+  label?: string;
+  /** Product/order description */
+  description?: string;
+  /** Your order reference ID */
+  orderRef?: string;
+  /** Allow customer tips */
+  allowTips?: boolean;
+  /** Button variant */
+  variant?: 'solid' | 'outline' | 'ghost';
+  /** Button size */
+  size?: 'sm' | 'md' | 'lg';
+  /** Disabled state */
+  disabled?: boolean;
+  /** Custom class name */
+  className?: string;
+  /** Custom inline styles */
+  style?: CSSProperties;
+  /** Success callback */
+  onSuccess?: (payment: PaymentResult) => void;
+  /** Error callback */
+  onError?: (error: Error) => void;
+  /** Cancel callback */
+  onCancel?: () => void;
+  /** Loading state change callback */
+  onLoadingChange?: (loading: boolean) => void;
+  /** Open in popup instead of redirect */
+  popup?: boolean;
+  /** Custom success URL */
+  successUrl?: string;
+  /** Custom cancel URL */
+  cancelUrl?: string;
+  /** Additional metadata */
+  metadata?: Record<string, string>;
+}
+
+export interface PaymentResult {
+  linkId: number;
+  amount: number;
+  currency: string;
+  transactionId: string;
+  paidAt: number;
+}
+
+// ==================== STYLES ====================
+
+const baseStyles: CSSProperties = {
+  display: 'inline-flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '8px',
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  fontWeight: 600,
+  border: 'none',
+  borderRadius: '8px',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  position: 'relative' as const,
+  overflow: 'hidden',
+};
+
+const sizeStyles: Record<string, CSSProperties> = {
+  sm: { padding: '8px 16px', fontSize: '14px', borderRadius: '6px' },
+  md: { padding: '12px 24px', fontSize: '16px', borderRadius: '8px' },
+  lg: { padding: '16px 32px', fontSize: '18px', borderRadius: '10px' },
+};
+
+const variantStyles: Record<string, (color: string) => CSSProperties> = {
+  solid: (color) => ({
+    background: `linear-gradient(135deg, ${color} 0%, ${adjustColor(color, -20)} 100%)`,
+    color: '#ffffff',
+    boxShadow: `0 4px 14px ${color}40`,
+  }),
+  outline: (color) => ({
+    background: 'transparent',
+    color: color,
+    border: `2px solid ${color}`,
+    boxShadow: 'none',
+  }),
+  ghost: (color) => ({
+    background: `${color}15`,
+    color: color,
+    border: 'none',
+    boxShadow: 'none',
+  }),
+};
+
+function adjustColor(hex: string, percent: number): string {
+  const num = parseInt(hex.replace('#', ''), 16);
+  const amt = Math.round(2.55 * percent);
+  const R = (num >> 16) + amt;
+  const G = (num >> 8 & 0x00FF) + amt;
+  const B = (num & 0x0000FF) + amt;
+  return '#' + (
+    0x1000000 +
+    (R < 255 ? R < 1 ? 0 : R : 255) * 0x10000 +
+    (G < 255 ? G < 1 ? 0 : G : 255) * 0x100 +
+    (B < 255 ? B < 1 ? 0 : B : 255)
+  ).toString(16).slice(1);
+}
+
+// ==================== ICONS ====================
+
+const WalletIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <path d="M21 12V7H5a2 2 0 0 1 0-4h14v4"/>
+    <path d="M3 5v14a2 2 0 0 0 2 2h16v-5"/>
+    <path d="M18 12a2 2 0 0 0 0 4h4v-4h-4z"/>
+  </svg>
+);
+
+const SpinnerIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" style={{ animation: 'rotate-spin 1s linear infinite' }}>
+    <circle cx="12" cy="12" r="10" strokeOpacity="0.25"/>
+    <path d="M12 2a10 10 0 0 1 10 10" strokeLinecap="round"/>
+  </svg>
+);
+
+const CheckIcon = () => (
+  <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+    <polyline points="20 6 9 17 4 12"/>
+  </svg>
+);
+
+// ==================== COMPONENT ====================
+
+export function PaymentButton({
+  amount,
+  currency = 'USD',
+  label,
+  description,
+  orderRef,
+  allowTips = false,
+  variant = 'solid',
+  size = 'md',
+  disabled = false,
+  className = '',
+  style = {},
+  onSuccess,
+  onError,
+  onCancel,
+  onLoadingChange,
+  popup = true,
+  successUrl,
+  cancelUrl,
+  metadata,
+}: PaymentButtonProps) {
+  const { config, createCheckoutSession, getCheckoutUrl, calculateTotal } = useRotateContext();
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+
+  const brandColor = config.brandColor || '#8B5CF6';
+  const { total } = calculateTotal(amount);
+  
+  // Format amount for display
+  const formatAmount = (amt: number, curr: string) => {
+    if (curr === 'SOL') {
+      return `${amt.toFixed(amt < 1 ? 4 : 2)} SOL`;
+    }
+    return `$${amt.toFixed(2)}`;
+  };
+
+  const buttonLabel = label || `Pay ${formatAmount(total, currency)}`;
+
+  // Handle payment click
+  const handleClick = useCallback(async () => {
+    if (disabled || loading || success) return;
+    
+    setLoading(true);
+    onLoadingChange?.(true);
+
+    try {
+      // Create checkout session
+      const session = await createCheckoutSession({
+        amount,
+        currency,
+        description,
+        orderRef,
+        allowTips,
+        successUrl: successUrl || config.successUrl,
+        cancelUrl: cancelUrl || config.cancelUrl,
+        metadata,
+      });
+
+      // Get checkout URL
+      const checkoutUrl = getCheckoutUrl(session.linkId);
+
+      if (popup) {
+        // Open in popup window
+        const width = 450;
+        const height = 700;
+        const left = window.screenX + (window.outerWidth - width) / 2;
+        const top = window.screenY + (window.outerHeight - height) / 2;
+        
+        const popupWindow = window.open(
+          checkoutUrl,
+          'rotate_checkout',
+          `width=${width},height=${height},left=${left},top=${top},popup=1`
+        );
+
+        // Listen for popup close or success message
+        if (popupWindow) {
+          const checkClosed = setInterval(() => {
+            if (popupWindow.closed) {
+              clearInterval(checkClosed);
+              setLoading(false);
+              onLoadingChange?.(false);
+              // Could be cancelled or completed
+            }
+          }, 500);
+
+          // Listen for postMessage from checkout
+          window.addEventListener('message', function handler(event) {
+            if (event.data?.type === 'rotate_payment_success') {
+              clearInterval(checkClosed);
+              setLoading(false);
+              setSuccess(true);
+              onLoadingChange?.(false);
+              onSuccess?.(event.data.payment);
+              popupWindow.close();
+              window.removeEventListener('message', handler);
+              
+              // Reset success state after animation
+              setTimeout(() => setSuccess(false), 2000);
+            } else if (event.data?.type === 'rotate_payment_cancel') {
+              clearInterval(checkClosed);
+              setLoading(false);
+              onLoadingChange?.(false);
+              onCancel?.();
+              popupWindow.close();
+              window.removeEventListener('message', handler);
+            }
+          });
+        }
+      } else {
+        // Redirect to checkout
+        window.location.href = checkoutUrl;
+      }
+    } catch (error: any) {
+      setLoading(false);
+      onLoadingChange?.(false);
+      onError?.(error);
+    }
+  }, [
+    amount, currency, description, orderRef, allowTips,
+    disabled, loading, success, popup,
+    config, createCheckoutSession, getCheckoutUrl,
+    successUrl, cancelUrl, metadata,
+    onSuccess, onError, onCancel, onLoadingChange,
+  ]);
+
+  // Combine styles
+  const combinedStyles: CSSProperties = {
+    ...baseStyles,
+    ...sizeStyles[size],
+    ...variantStyles[variant](brandColor),
+    ...(disabled && { opacity: 0.5, cursor: 'not-allowed' }),
+    ...(success && { 
+      background: '#10B981',
+      boxShadow: '0 4px 14px rgba(16, 185, 129, 0.4)',
+    }),
+    ...style,
+  };
+
+  return (
+    <>
+      <style>{`
+        @keyframes rotate-spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+        .rotate-btn:hover:not(:disabled) {
+          transform: translateY(-2px);
+          filter: brightness(1.1);
+        }
+        .rotate-btn:active:not(:disabled) {
+          transform: translateY(0);
+        }
+      `}</style>
+      <button
+        className={`rotate-btn ${className}`}
+        style={combinedStyles}
+        onClick={handleClick}
+        disabled={disabled || loading}
+        type="button"
+      >
+        {success ? (
+          <>
+            <CheckIcon />
+            <span>Paid!</span>
+          </>
+        ) : loading ? (
+          <>
+            <SpinnerIcon />
+            <span>Processing...</span>
+          </>
+        ) : (
+          <>
+            <WalletIcon />
+            <span>{buttonLabel}</span>
+          </>
+        )}
+      </button>
+    </>
+  );
+}
+
+export default PaymentButton;

package/src/components/RotateProvider.tsx

@@ -0,0 +1,370 @@
+/**
+ * Rotate Provider - Context Wrapper
+ * 
+ * Provides Rotate SDK context to your entire app with one simple wrapper.
+ * Wrap your app once, and all Rotate components will work seamlessly.
+ * 
+ * @example
+ * ```tsx
+ * import { RotateProvider } from '@rotateprotocol/sdk/components';
+ * 
+ * function App() {
+ *   return (
+ *     <RotateProvider 
+ *       merchantId={1000000}
+ *       platformId={1000000}
+ *       network="mainnet-beta"
+ *     >
+ *       <YourApp />
+ *     </RotateProvider>
+ *   );
+ * }
+ * ```
+ */
+
+import React, { createContext, useContext, useMemo, useState, useCallback, useEffect, ReactNode } from 'react';
+import { PublicKey } from '@solana/web3.js';
+import RotateSDK, { 
+  Network, 
+  Platform, 
+  Merchant, 
+  calculateFees,
+} from '../index';
+
+// ==================== TYPES ====================
+
+export interface RotateConfig {
+  /** Your merchant ID (7-digit number) */
+  merchantId: number;
+  /** Platform ID (7-digit number) */
+  platformId: number;
+  /** Network to use */
+  network?: Network;
+  /** Custom RPC endpoint */
+  rpcEndpoint?: string;
+  /** Your brand name (shown on checkout) */
+  brandName?: string;
+  /** Your brand logo URL */
+  brandLogo?: string;
+  /** Primary brand color (hex) */
+  brandColor?: string;
+  /** Success redirect URL */
+  successUrl?: string;
+  /** Cancel redirect URL */
+  cancelUrl?: string;
+  /** Webhook URL for payment notifications */
+  webhookUrl?: string;
+  /** Custom checkout base URL (default: https://rotate.app) */
+  checkoutBaseUrl?: string;
+}
+
+export interface CheckoutSession {
+  id: string;
+  linkId: number;
+  amount: number;
+  currency: 'SOL' | 'USDC' | 'USDT' | 'USD';
+  status: 'pending' | 'paid' | 'expired' | 'cancelled';
+  createdAt: number;
+  expiresAt?: number;
+  metadata?: Record<string, string>;
+}
+
+export interface RotateContextType {
+  // Configuration
+  config: RotateConfig;
+  sdk: RotateSDK;
+  connected: boolean;
+  
+  // Merchant data
+  merchant: Merchant | null;
+  platform: Platform | null;
+  
+  // Checkout methods
+  createCheckoutSession: (params: CreateCheckoutParams) => Promise<CheckoutSession>;
+  getCheckoutUrl: (linkId: number) => string;
+  
+  // Payment helpers
+  calculateTotal: (amount: number) => {
+    subtotal: number;
+    fees: number;
+    total: number;
+    merchantReceives: number;
+  };
+  
+  // State
+  loading: boolean;
+  error: string | null;
+}
+
+export interface CreateCheckoutParams {
+  /** Amount in the specified currency */
+  amount: number;
+  /** Currency (default: USD) */
+  currency?: 'SOL' | 'USDC' | 'USDT' | 'USD';
+  /** Order description */
+  description?: string;
+  /** Order reference (your order ID) */
+  orderRef?: string;
+  /** Allow customer tips */
+  allowTips?: boolean;
+  /** Expiration in seconds (default: 3600 = 1 hour) */
+  expiresIn?: number;
+  /** Custom metadata */
+  metadata?: Record<string, string>;
+  /** Success redirect URL (overrides provider config) */
+  successUrl?: string;
+  /** Cancel redirect URL (overrides provider config) */
+  cancelUrl?: string;
+}
+
+// ==================== CONTEXT ====================
+
+const RotateContext = createContext<RotateContextType | null>(null);
+
+// ==================== PROVIDER ====================
+
+export interface RotateProviderProps {
+  children: ReactNode;
+  merchantId: number;
+  platformId: number;
+  network?: Network;
+  rpcEndpoint?: string;
+  brandName?: string;
+  brandLogo?: string;
+  brandColor?: string;
+  successUrl?: string;
+  cancelUrl?: string;
+  webhookUrl?: string;
+  /** Custom checkout base URL (default: https://rotate.app) */
+  checkoutBaseUrl?: string;
+}
+
+export function RotateProvider({
+  children,
+  merchantId,
+  platformId,
+  network = 'mainnet-beta',
+  rpcEndpoint,
+  brandName,
+  brandLogo,
+  brandColor = '#8B5CF6',
+  successUrl,
+  cancelUrl,
+  webhookUrl,
+  checkoutBaseUrl,
+}: RotateProviderProps) {
+  const [merchant, setMerchant] = useState<Merchant | null>(null);
+  const [platform, setPlatform] = useState<Platform | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [connected, setConnected] = useState(false);
+
+  // Config object
+  const config: RotateConfig = useMemo(() => ({
+    merchantId,
+    platformId,
+    network,
+    rpcEndpoint,
+    brandName,
+    brandLogo,
+    brandColor,
+    successUrl,
+    cancelUrl,
+    webhookUrl,
+    checkoutBaseUrl,
+  }), [merchantId, platformId, network, rpcEndpoint, brandName, brandLogo, brandColor, successUrl, cancelUrl, webhookUrl, checkoutBaseUrl]);
+
+  // Initialize SDK
+  const sdk = useMemo(() => {
+    return new RotateSDK({
+      network,
+      rpcEndpoint,
+    });
+  }, [network, rpcEndpoint]);
+
+  // Load merchant and platform data
+  useEffect(() => {
+    async function loadData() {
+      setLoading(true);
+      setError(null);
+      
+      try {
+        const [merchantData, platformData] = await Promise.all([
+          sdk.getMerchant(merchantId),
+          sdk.getPlatform(platformId),
+        ]);
+        
+        if (!merchantData) {
+          setError(`Merchant #${merchantId} not found`);
+        } else if (!platformData) {
+          setError(`Platform #${platformId} not found`);
+        } else {
+          setMerchant(merchantData);
+          setPlatform(platformData);
+          setConnected(true);
+        }
+      } catch (e: any) {
+        setError(e.message);
+      } finally {
+        setLoading(false);
+      }
+    }
+    
+    loadData();
+  }, [sdk, merchantId, platformId]);
+
+  // Calculate total with fees
+  // `amount` is in human-readable units (e.g. dollars).
+  // calculateFees uses integer math, so we convert to micro-units first,
+  // then convert back to dollars for display.
+  const calculateTotal = useCallback((amount: number) => {
+    const platformFeeBps = platform?.feeBps || 0;
+    const microAmount = Math.floor(amount * 1_000_000);
+    const fees = calculateFees(microAmount, platformFeeBps);
+    
+    return {
+      subtotal: amount,
+      fees: fees.buyerFeeShare / 1_000_000,
+      total: fees.buyerPays / 1_000_000,
+      merchantReceives: fees.merchantReceives / 1_000_000,
+    };
+  }, [platform]);
+
+  // Create checkout session — creates a real on-chain payment link via the SDK
+  const createCheckoutSession = useCallback(async (params: CreateCheckoutParams): Promise<CheckoutSession> => {
+    if (!merchant || !platform) {
+      throw new Error('Merchant or platform not loaded');
+    }
+
+    const currency = params.currency || 'USD';
+    const expiresAt = params.expiresIn 
+      ? Math.floor(Date.now() / 1000) + params.expiresIn 
+      : 0;
+    const orderRef = params.orderRef || Date.now().toString();
+
+    // Convert amount to on-chain micro-units (6 decimal places for USD/USDC/USDT, lamports for SOL)
+    let amountMicro: bigint;
+    if (currency === 'SOL') {
+      // params.amount is in SOL; convert to lamports
+      amountMicro = BigInt(Math.floor(params.amount * 1_000_000_000));
+    } else {
+      // USD / USDC / USDT: params.amount is in dollars; convert to micro-units (6 decimals)
+      amountMicro = BigInt(Math.floor(params.amount * 1_000_000));
+    }
+
+    let linkId: number;
+    let txSig: string;
+
+    try {
+      if (currency === 'SOL') {
+        // Create a SOL-denominated payment link
+        const result = await sdk.createLinkSol({
+          merchantId: config.merchantId,
+          platformId: config.platformId,
+          amount: amountMicro,
+          expiresAt,
+          allowTips: params.allowTips ?? false,
+          allowPartial: false,
+          orderRef,
+        });
+        linkId = result.linkId;
+        txSig = result.tx;
+      } else if (currency === 'USDC' || currency === 'USDT') {
+        // Create a token-denominated payment link
+        const result = await sdk.createLinkToken({
+          merchantId: config.merchantId,
+          platformId: config.platformId,
+          amount: amountMicro,
+          expiresAt,
+          allowTips: params.allowTips ?? false,
+          allowPartial: false,
+          orderRef,
+          currency,
+        });
+        linkId = result.linkId;
+        txSig = result.tx;
+      } else {
+        // USD-denominated link (buyer chooses SOL/USDC/USDT at payment time)
+        const result = await sdk.createLinkUsd({
+          merchantId: config.merchantId,
+          platformId: config.platformId,
+          amount: amountMicro,
+          expiresAt,
+          allowTips: params.allowTips ?? false,
+          allowPartial: false,
+          orderRef,
+        });
+        linkId = result.linkId;
+        txSig = result.tx;
+      }
+    } catch (e: any) {
+      throw new Error(`Failed to create on-chain payment link: ${e.message}`);
+    }
+
+    return {
+      id: txSig,
+      linkId,
+      amount: params.amount,
+      currency,
+      status: 'pending',
+      createdAt: Date.now(),
+      expiresAt: expiresAt > 0 ? expiresAt * 1000 : undefined,
+      metadata: params.metadata,
+    };
+  }, [merchant, platform, sdk, config]);
+
+  // Get checkout URL — uses configurable base URL from config or environment
+  const getCheckoutUrl = useCallback((linkId: number): string => {
+    const baseUrl = config.checkoutBaseUrl || 'https://rotate.app';
+    const params = new URLSearchParams({
+      link: linkId.toString(),
+      network: config.network || 'mainnet-beta',
+      merchant: merchantId.toString(),
+      platform: platformId.toString(),
+    });
+    
+    if (config.brandName) params.set('brand', config.brandName);
+    if (config.brandColor) params.set('color', config.brandColor.replace('#', ''));
+    if (config.successUrl) params.set('success', config.successUrl);
+    if (config.cancelUrl) params.set('cancel', config.cancelUrl);
+    
+    return `${baseUrl}/checkout/?${params.toString()}`;
+  }, [merchantId, platformId, config]);
+
+  // Context value
+  const value: RotateContextType = useMemo(() => ({
+    config,
+    sdk,
+    connected,
+    merchant,
+    platform,
+    createCheckoutSession,
+    getCheckoutUrl,
+    calculateTotal,
+    loading,
+    error,
+  }), [config, sdk, connected, merchant, platform, createCheckoutSession, getCheckoutUrl, calculateTotal, loading, error]);
+
+  return (
+    <RotateContext.Provider value={value}>
+      {children}
+    </RotateContext.Provider>
+  );
+}
+
+// ==================== HOOK ====================
+
+export function useRotateContext(): RotateContextType {
+  const context = useContext(RotateContext);
+  
+  if (!context) {
+    throw new Error(
+      'useRotateContext must be used within a RotateProvider. ' +
+      'Wrap your app with <RotateProvider merchantId={...} platformId={...}>'
+    );
+  }
+  
+  return context;
+}
+
+export default RotateProvider;