@rotateprotocol/sdk 1.0.0

package/src/components/HostedCheckout.tsx

@@ -0,0 +1,675 @@
+/**
+ * Rotate Hosted Checkout
+ * 
+ * A complete, hosted checkout page that handles the entire payment flow.
+ * Redirect customers here to pay.
+ * 
+ * @example
+ * ```tsx
+ * // Use as a full page checkout
+ * <HostedCheckout 
+ *   linkId={12345}
+ *   onSuccess={(result) => router.push(`/success?tx=${result.transactionId}`)}
+ *   onCancel={() => router.push('/cart')}
+ * />
+ * 
+ * // Or redirect to the hosted URL
+ * window.location.href = `https://rotate.app/checkout/?link=${linkId}&network=mainnet-beta`;
+ * ```
+ */
+
+import React, { useState, useCallback, useEffect, useMemo, CSSProperties } from 'react';
+import { PublicKey } from '@solana/web3.js';
+import RotateSDK, { PaymentLink, Platform, Merchant } from '../index';
+
+// ==================== TYPES ====================
+
+export interface HostedCheckoutProps {
+  /** Payment link ID */
+  linkId: number;
+  /** Merchant ID */
+  merchantId: number;
+  /** Platform ID */
+  platformId: number;
+  /** Network */
+  network?: 'devnet' | 'mainnet-beta';
+  /** Custom RPC endpoint */
+  rpcEndpoint?: string;
+  /** Brand name */
+  brandName?: string;
+  /** Brand logo URL */
+  brandLogo?: string;
+  /** Brand color */
+  brandColor?: string;
+  /** Success callback */
+  onSuccess?: (result: PaymentResult) => void;
+  /** Cancel callback */
+  onCancel?: () => void;
+  /** Error callback */
+  onError?: (error: Error) => void;
+  /** Success redirect URL */
+  successUrl?: string;
+  /** Cancel redirect URL */
+  cancelUrl?: string;
+}
+
+export interface PaymentResult {
+  linkId: number;
+  amount: bigint;
+  currency: string;
+  transactionId: string;
+  paidAt: number;
+}
+
+// ==================== STYLES ====================
+
+const pageStyles: CSSProperties = {
+  minHeight: '100vh',
+  background: 'linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f0f23 100%)',
+  fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: '20px',
+};
+
+const cardStyles: CSSProperties = {
+  background: '#ffffff',
+  borderRadius: '16px',
+  boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+  maxWidth: '420px',
+  width: '100%',
+  overflow: 'hidden',
+};
+
+const headerStyles = (color: string): CSSProperties => ({
+  background: `linear-gradient(135deg, ${color} 0%, ${adjustColor(color, -30)} 100%)`,
+  padding: '24px',
+  color: '#ffffff',
+  textAlign: 'center' as const,
+});
+
+const logoStyles: CSSProperties = {
+  width: '48px',
+  height: '48px',
+  borderRadius: '12px',
+  objectFit: 'cover' as const,
+  marginBottom: '12px',
+};
+
+const amountStyles: CSSProperties = {
+  fontSize: '36px',
+  fontWeight: 700,
+  marginBottom: '4px',
+};
+
+const bodyStyles: CSSProperties = {
+  padding: '24px',
+};
+
+const sectionStyles: CSSProperties = {
+  marginBottom: '20px',
+};
+
+const labelStyles: CSSProperties = {
+  display: 'block',
+  fontSize: '12px',
+  fontWeight: 600,
+  color: '#64748b',
+  marginBottom: '8px',
+  textTransform: 'uppercase' as const,
+  letterSpacing: '0.5px',
+};
+
+const currencyGridStyles: CSSProperties = {
+  display: 'grid',
+  gridTemplateColumns: 'repeat(3, 1fr)',
+  gap: '8px',
+};
+
+const currencyButtonStyles = (selected: boolean, color: string): CSSProperties => ({
+  padding: '16px 12px',
+  border: `2px solid ${selected ? color : '#e2e8f0'}`,
+  borderRadius: '12px',
+  background: selected ? `${color}10` : '#ffffff',
+  cursor: 'pointer',
+  transition: 'all 0.2s ease',
+  display: 'flex',
+  flexDirection: 'column' as const,
+  alignItems: 'center',
+  gap: '8px',
+});
+
+const walletSectionStyles: CSSProperties = {
+  background: '#f8fafc',
+  borderRadius: '12px',
+  padding: '20px',
+  marginBottom: '20px',
+};
+
+const walletButtonStyles = (color: string, loading: boolean): CSSProperties => ({
+  width: '100%',
+  padding: '16px',
+  background: loading ? '#94a3b8' : `linear-gradient(135deg, ${color} 0%, ${adjustColor(color, -20)} 100%)`,
+  border: 'none',
+  borderRadius: '12px',
+  color: '#ffffff',
+  fontSize: '16px',
+  fontWeight: 600,
+  cursor: loading ? 'wait' : 'pointer',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: '10px',
+  boxShadow: `0 4px 14px ${color}40`,
+  transition: 'all 0.2s ease',
+});
+
+const detailRowStyles: CSSProperties = {
+  display: 'flex',
+  justifyContent: 'space-between',
+  padding: '12px 0',
+  borderBottom: '1px solid #f1f5f9',
+  fontSize: '14px',
+};
+
+const footerStyles: CSSProperties = {
+  padding: '16px 24px',
+  background: '#f8fafc',
+  textAlign: 'center' as const,
+  fontSize: '12px',
+  color: '#94a3b8',
+};
+
+const cancelLinkStyles: CSSProperties = {
+  color: '#64748b',
+  textDecoration: 'none',
+  fontSize: '14px',
+  display: 'block',
+  textAlign: 'center' as const,
+  marginTop: '16px',
+  cursor: 'pointer',
+};
+
+const statusStyles = (status: string): CSSProperties => ({
+  textAlign: 'center' as const,
+  padding: '40px 20px',
+});
+
+const statusIconStyles = (success: boolean): CSSProperties => ({
+  width: '80px',
+  height: '80px',
+  borderRadius: '50%',
+  background: success ? '#10B981' : '#EF4444',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  margin: '0 auto 20px',
+  fontSize: '40px',
+});
+
+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 = ({ name }: { name: string }) => (
+  <div style={{ 
+    width: '40px', 
+    height: '40px', 
+    borderRadius: '10px',
+    background: '#f1f5f9',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    fontSize: '20px',
+  }}>
+    {name === 'Phantom' ? '👻' : name === 'Solflare' ? '🌞' : '💳'}
+  </div>
+);
+
+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>
+);
+
+// ==================== COMPONENT ====================
+
+export function HostedCheckout({
+  linkId,
+  merchantId,
+  platformId,
+  network = 'mainnet-beta',
+  rpcEndpoint,
+  brandName = 'Checkout',
+  brandLogo,
+  brandColor = '#8B5CF6',
+  onSuccess,
+  onCancel,
+  onError,
+  successUrl,
+  cancelUrl,
+}: HostedCheckoutProps) {
+  // State
+  const [loading, setLoading] = useState(true);
+  const [paying, setPaying] = useState(false);
+  const [link, setLink] = useState<PaymentLink | null>(null);
+  const [merchant, setMerchant] = useState<Merchant | null>(null);
+  const [platform, setPlatform] = useState<Platform | null>(null);
+  const [selectedCurrency, setSelectedCurrency] = useState<'SOL' | 'USDC' | 'USDT'>('USDC');
+  const [status, setStatus] = useState<'loading' | 'ready' | 'paying' | 'success' | 'error' | 'expired'>('loading');
+  const [error, setError] = useState<string | null>(null);
+  const [solPrice, setSolPrice] = useState<number>(100);
+  const [selectedWallet, setSelectedWallet] = useState<string | null>(null);
+
+  // Initialize SDK (memoized to prevent re-creation on every render)
+  const sdk = useMemo(() => new RotateSDK({ network, rpcEndpoint }), [network, rpcEndpoint]);
+
+  // Load payment data
+  useEffect(() => {
+    async function loadData() {
+      try {
+        const [linkData, merchantData, platformData, price] = await Promise.all([
+          sdk.getPaymentLink(linkId),
+          sdk.getMerchant(merchantId),
+          sdk.getPlatform(platformId),
+          sdk.getSolPrice(),
+        ]);
+
+        if (!linkData) {
+          setStatus('error');
+          setError('Payment link not found');
+          return;
+        }
+
+        if (linkData.status === 'Paid') {
+          setStatus('success');
+          return;
+        }
+
+        if (linkData.status === 'Cancelled') {
+          setStatus('error');
+          setError('This payment was cancelled');
+          return;
+        }
+
+        if (linkData.expiresAt > 0 && Date.now() / 1000 > linkData.expiresAt) {
+          setStatus('expired');
+          return;
+        }
+
+        setLink(linkData);
+        setMerchant(merchantData);
+        setPlatform(platformData);
+        setSolPrice(price);
+        setStatus('ready');
+      } catch (e: any) {
+        setStatus('error');
+        setError(e.message);
+        onError?.(e);
+      } finally {
+        setLoading(false);
+      }
+    }
+
+    loadData();
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [linkId, merchantId, platformId, sdk]);
+
+  // Format amount
+  const formatAmount = (lamports: bigint, currency: string): string => {
+    const amount = Number(lamports) / (currency === 'SOL' ? 1e9 : 1e6);
+    
+    if (currency === 'SOL') {
+      return `${amount.toFixed(amount < 1 ? 4 : 3)} SOL`;
+    }
+    return `$${amount.toFixed(2)}`;
+  };
+
+  // Get amount in selected currency
+  const getAmountInCurrency = (): string => {
+    if (!link) return '—';
+    
+    const usdAmount = Number(link.amount) / 1e6; // Assuming USD base
+    
+    if (selectedCurrency === 'SOL') {
+      const solAmount = usdAmount / solPrice;
+      return `${solAmount.toFixed(solAmount < 1 ? 4 : 3)} SOL`;
+    }
+    
+    return `$${usdAmount.toFixed(2)}`;
+  };
+
+  // Handle wallet connect and payment
+  const connectWallet = useCallback(async (walletName: string) => {
+    setSelectedWallet(walletName);
+    setPaying(true);
+    setStatus('paying');
+
+    try {
+      // Detect wallet adapter
+      let wallet: any = null;
+      
+      if (walletName === 'Phantom' && (window as any).solana?.isPhantom) {
+        wallet = (window as any).solana;
+      } else if (walletName === 'Solflare' && (window as any).solflare?.isSolflare) {
+        wallet = (window as any).solflare;
+      }
+
+      if (!wallet) {
+        throw new Error(`${walletName} wallet not found. Please install it.`);
+      }
+
+      // Connect wallet
+      const response = await wallet.connect();
+      const buyerPublicKey = response.publicKey;
+
+      if (!link) throw new Error('Payment link not loaded');
+
+      // Initialize SDK with the connected wallet for transaction signing
+      sdk.initWithWallet({
+        publicKey: buyerPublicKey,
+        signTransaction: (tx: any) => wallet.signTransaction(tx),
+        signAllTransactions: (txs: any[]) => wallet.signAllTransactions(txs),
+      } as any);
+
+      let txSignature: string;
+
+      const baseParams = {
+        linkId,
+        merchantId,
+        platformId,
+        amount: link.amount,
+      };
+
+      // Route to the correct payment method based on link type and selected currency.
+      // For USD-denominated links (tokenType === 'Usd'), the user selects which
+      // currency to pay with. For native SOL/token links, use the matching payment
+      // method directly.
+      if (link.tokenType === 'Usdc' || link.tokenType === 'Usdt') {
+        // Native token link — pay with the link's token
+        const currency = link.tokenType === 'Usdc' ? 'USDC' : 'USDT';
+        txSignature = await sdk.payLinkToken({ ...baseParams, currency } as any);
+      } else if (link.tokenType === 'Sol') {
+        // Native SOL link — pay with SOL directly
+        txSignature = await sdk.payLinkSol({ ...baseParams } as any);
+      } else if (selectedCurrency === 'SOL') {
+        // USD-denominated link paid in SOL
+        const lamportsAmount = await sdk.microUsdToLamports(link.amount);
+        txSignature = await sdk.payLinkUsdSol({
+          ...baseParams,
+          lamportsAmount,
+        } as any);
+      } else {
+        // USD-denominated link paid with USDC/USDT
+        txSignature = await sdk.payLinkUsdToken({
+          ...baseParams,
+          currency: selectedCurrency as 'USDC' | 'USDT',
+        } as any);
+      }
+
+      const result: PaymentResult = {
+        linkId,
+        amount: link.amount,
+        currency: selectedCurrency,
+        transactionId: txSignature,
+        paidAt: Date.now(),
+      };
+
+      setStatus('success');
+      onSuccess?.(result);
+
+      // Post message to parent if in popup
+      if (window.opener) {
+        window.opener.postMessage({ type: 'rotate_payment_success', payment: result }, '*');
+      }
+
+      // Redirect if URL provided
+      if (successUrl) {
+        setTimeout(() => {
+          window.location.href = successUrl;
+        }, 2000);
+      }
+
+    } catch (e: any) {
+      setPaying(false);
+      setStatus('ready');
+      setError(e.message);
+      onError?.(e);
+    }
+  }, [link, linkId, merchantId, platformId, sdk, selectedCurrency, onSuccess, onError, successUrl]);
+
+  // Handle cancel
+  const handleCancel = useCallback(() => {
+    if (window.opener) {
+      window.opener.postMessage({ type: 'rotate_payment_cancel' }, '*');
+      window.close();
+    } else if (cancelUrl) {
+      window.location.href = cancelUrl;
+    } else {
+      onCancel?.();
+    }
+  }, [cancelUrl, onCancel]);
+
+  // Render loading state
+  if (status === 'loading') {
+    return (
+      <div style={pageStyles}>
+        <style>{`@keyframes rotate-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
+        <div style={cardStyles}>
+          <div style={{ ...statusStyles('loading'), padding: '60px 20px' }}>
+            <SpinnerIcon />
+            <p style={{ marginTop: '16px', color: '#64748b' }}>Loading payment details...</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Render success state
+  if (status === 'success') {
+    return (
+      <div style={pageStyles}>
+        <div style={cardStyles}>
+          <div style={statusStyles('success')}>
+            <div style={statusIconStyles(true)}>✓</div>
+            <h2 style={{ fontSize: '24px', fontWeight: 700, marginBottom: '8px' }}>Payment Successful!</h2>
+            <p style={{ color: '#64748b' }}>Thank you for your payment.</p>
+            {successUrl && (
+              <p style={{ color: '#64748b', marginTop: '16px', fontSize: '14px' }}>
+                Redirecting you back...
+              </p>
+            )}
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Render error state
+  if (status === 'error' || status === 'expired') {
+    return (
+      <div style={pageStyles}>
+        <div style={cardStyles}>
+          <div style={statusStyles('error')}>
+            <div style={statusIconStyles(false)}>✕</div>
+            <h2 style={{ fontSize: '24px', fontWeight: 700, marginBottom: '8px' }}>
+              {status === 'expired' ? 'Payment Expired' : 'Payment Error'}
+            </h2>
+            <p style={{ color: '#64748b' }}>
+              {status === 'expired' 
+                ? 'This payment link has expired.' 
+                : error || 'Something went wrong.'}
+            </p>
+            <button
+              onClick={handleCancel}
+              style={{ 
+                marginTop: '24px',
+                padding: '12px 24px',
+                background: '#f1f5f9',
+                border: 'none',
+                borderRadius: '8px',
+                fontSize: '14px',
+                fontWeight: 500,
+                cursor: 'pointer',
+              }}
+            >
+              Go Back
+            </button>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  // Main checkout render
+  return (
+    <div style={pageStyles}>
+      <style>{`@keyframes rotate-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`}</style>
+      
+      <div style={cardStyles}>
+        {/* Header */}
+        <div style={headerStyles(brandColor)}>
+          {brandLogo && <img src={brandLogo} alt={brandName} style={logoStyles} />}
+          <div style={{ fontSize: '14px', opacity: 0.9, marginBottom: '8px' }}>{brandName}</div>
+          <div style={amountStyles}>{getAmountInCurrency()}</div>
+          <div style={{ fontSize: '14px', opacity: 0.8 }}>Link #{linkId}</div>
+        </div>
+
+        {/* Body */}
+        <div style={bodyStyles}>
+          {/* Error Alert */}
+          {error && (
+            <div style={{ 
+              padding: '12px 16px', 
+              background: '#fef2f2', 
+              border: '1px solid #fecaca',
+              borderRadius: '8px',
+              color: '#dc2626',
+              fontSize: '14px',
+              marginBottom: '16px',
+            }}>
+              {error}
+            </div>
+          )}
+
+          {/* Currency Selection */}
+          <div style={sectionStyles}>
+            <label style={labelStyles}>Pay with</label>
+            <div style={currencyGridStyles}>
+              {(['USDC', 'USDT', 'SOL'] as const).map((curr) => (
+                <button
+                  key={curr}
+                  type="button"
+                  onClick={() => setSelectedCurrency(curr)}
+                  style={currencyButtonStyles(selectedCurrency === curr, brandColor)}
+                >
+                  <span style={{ fontSize: '20px' }}>
+                    {curr === 'SOL' ? '◎' : '$'}
+                  </span>
+                  <span style={{ 
+                    fontSize: '14px', 
+                    fontWeight: selectedCurrency === curr ? 600 : 400,
+                    color: selectedCurrency === curr ? brandColor : '#64748b',
+                  }}>
+                    {curr}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Payment Details */}
+          <div style={sectionStyles}>
+            <label style={labelStyles}>Payment Details</label>
+            <div style={{ background: '#f8fafc', borderRadius: '8px', padding: '4px 16px' }}>
+              <div style={detailRowStyles}>
+                <span style={{ color: '#64748b' }}>Amount</span>
+                <span style={{ fontWeight: 500 }}>{getAmountInCurrency()}</span>
+              </div>
+              <div style={detailRowStyles}>
+                <span style={{ color: '#64748b' }}>Network Fee</span>
+                <span style={{ fontWeight: 500 }}>~$0.01</span>
+              </div>
+              <div style={{ ...detailRowStyles, borderBottom: 'none' }}>
+                <span style={{ fontWeight: 600 }}>Total</span>
+                <span style={{ fontWeight: 700, color: brandColor }}>{getAmountInCurrency()}</span>
+              </div>
+            </div>
+          </div>
+
+          {/* Wallet Selection */}
+          <div style={walletSectionStyles}>
+            <label style={labelStyles}>Connect Wallet</label>
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+              {['Phantom', 'Solflare'].map((wallet) => (
+                <button
+                  key={wallet}
+                  onClick={() => connectWallet(wallet)}
+                  disabled={paying}
+                  style={{
+                    display: 'flex',
+                    alignItems: 'center',
+                    gap: '12px',
+                    padding: '14px 16px',
+                    background: '#ffffff',
+                    border: '2px solid #e2e8f0',
+                    borderRadius: '10px',
+                    cursor: paying ? 'wait' : 'pointer',
+                    transition: 'all 0.2s ease',
+                    width: '100%',
+                  }}
+                >
+                  <WalletIcon name={wallet} />
+                  <span style={{ flex: 1, textAlign: 'left', fontWeight: 500 }}>
+                    {paying && selectedWallet === wallet ? (
+                      <span style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+                        <SpinnerIcon /> Confirming...
+                      </span>
+                    ) : (
+                      `Pay with ${wallet}`
+                    )}
+                  </span>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Cancel Link */}
+          <a onClick={handleCancel} style={cancelLinkStyles}>
+            Cancel and go back
+          </a>
+        </div>
+
+        {/* Footer */}
+        <div style={footerStyles}>
+          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '6px' }}>
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="#94a3b8">
+              <path d="M19 11H5c-1.1 0-2 .9-2 2v7c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-7c0-1.1-.9-2-2-2zm0 9H5v-7h14v7z"/>
+            </svg>
+            <span>Secured by <strong style={{ color: brandColor }}>Rotate Protocol</strong></span>
+          </div>
+          <div style={{ marginTop: '4px', fontSize: '11px' }}>
+            Funds go directly to merchant • Non-custodial
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default HostedCheckout;