Integrate Tip Stack in a React Application

import { useState, useEffect } from 'react';

export function TipButton({ creatorId }: { creatorId: string }) {
  const [sessionToken, setSessionToken] = useState<string | null>(null);

  useEffect(() => {
    // Call your own server-side proxy — never call /sdk/init directly from the client
    fetch('/api/tipstack/session', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ creatorId }),
    })
      .then(r => r.json())
      .then(data => setSessionToken(data.sessionToken));
  }, [creatorId]);

  const sendTip = async (amount: number) => {
    if (!sessionToken) return;
    const res = await fetch('https://tipstack.fun/api/sdk/tip', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${sessionToken}`,
      },
      body: JSON.stringify({
        creatorId,
        amount,
        inputTokenMint: 'EPjFWdd5AufqSSqeM2qN1xzybapC8G4wEGGkZwyTDt1v', // USDC
        sourceWalletAddress: 'YOUR_WALLET_ADDRESS',
      }),
    });
    const data = await res.json();
    console.log('Tip intent:', data.intentId);
  };

  return (
    <button onClick={() => sendTip(5)} disabled={!sessionToken}>
      ⚡ Tip $5
    </button>
  );
}

export function EmbedCheckout({ embedUrl }: { embedUrl: string }) {
  return (
    <iframe
      src={embedUrl}
      title="Tip Stack Checkout"
      width="100%"
      height="480"
      allow="clipboard-write"
      style={{ border: 'none', borderRadius: '16px' }}
    />
  );
}

import { useState, useEffect, useRef } from 'react';

interface TipEvent {
  eventId: string;
  type: string;
  amountUsdc: number;
  amountRaw: number;
  tokenSymbol: string;
  sender: string;
  timestamp: string;
  txSignature: string;
}

export function useTipEvents(creatorId: string, pollIntervalMs = 5000) {
  const [events, setEvents] = useState<TipEvent[]>([]);
  const sinceRef = useRef<string>(new Date().toISOString());

  useEffect(() => {
    const poll = async () => {
      const res = await fetch(
        `/api/tipstack/events?creatorId=${creatorId}&since=${sinceRef.current}`
      );
      const data = await res.json();

      if (data.events?.length) {
        setEvents(prev => [...data.events, ...prev]);
        // Advance the cursor to avoid re-fetching the same events
        sinceRef.current = data.events[0].timestamp;
      }
    };

    const interval = setInterval(poll, pollIntervalMs);
    return () => clearInterval(interval);
  }, [creatorId, pollIntervalMs]);

  return events;
}