@chainloyalty/react 1.0.0

package/src/RewardsDashboard.tsx

@@ -0,0 +1,602 @@
+/**
+ * @chainloyalty/react - RewardsDashboard Component
+ * 
+ * Purpose:
+ * A comprehensive, production-ready component that displays user rewards information.
+ * This embeddable component shows wallet connection status, points balance, earned badges,
+ * reward history, and tier level.
+ * 
+ * Key Features:
+ * - Wallet connection display with copy functionality
+ * - Large, prominent points display
+ * - Badge gallery showing earned badges
+ * - Reward history with timestamps
+ * - Tier level indicator
+ * - Fully responsive design (mobile + desktop)
+ * - Dark theme with professional UI
+ * - Loading and empty states
+ * - Customizable via props
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  Wallet,
+  Copy,
+  CheckCircle,
+  Award,
+  TrendingUp,
+  Zap,
+  ExternalLink,
+  RefreshCw,
+  Lock,
+} from 'lucide-react';
+
+// ============================================================================
+// Types & Interfaces
+// ============================================================================
+
+export interface Badge {
+  id: string;
+  name: string;
+  icon: string; // emoji or URL
+  description: string;
+  earnedAt: string;
+  rarity: 'common' | 'rare' | 'epic' | 'legendary';
+}
+
+export interface RewardHistoryItem {
+  id: string;
+  type: 'purchase' | 'referral' | 'milestone' | 'subscription' | 'feature_usage';
+  title: string;
+  points: number;
+  timestamp: string;
+  description?: string;
+}
+
+export interface TierInfo {
+  name: string;
+  level: number;
+  icon: string;
+  nextMilestone: number;
+  currentProgress: number;
+}
+
+export interface RewardsDashboardProps {
+  walletAddress?: string | null;
+  onConnectWallet?: () => void;
+  onDisconnectWallet?: () => void;
+  customColors?: {
+    background?: string;
+    accent1?: string;
+    accent2?: string;
+  };
+  hideHistory?: boolean;
+  hideBadges?: boolean;
+  hideTier?: boolean;
+  compactMode?: boolean;
+}
+
+export interface DashboardData {
+  totalPoints: number;
+  badges: Badge[];
+  rewardHistory: RewardHistoryItem[];
+  tier: TierInfo;
+  lastUpdated: string;
+}
+
+// ============================================================================
+// Mock Data & API Functions
+// ============================================================================
+
+const generateMockBadges = (): Badge[] => {
+  return [
+    {
+      id: 'badge_1',
+      name: 'Early Bird',
+      icon: '🌅',
+      description: 'Joined in the first 100 users',
+      earnedAt: '2024-01-15',
+      rarity: 'legendary',
+    },
+    {
+      id: 'badge_2',
+      name: 'Referral Master',
+      icon: '🎯',
+      description: 'Referred 5+ users',
+      earnedAt: '2024-02-20',
+      rarity: 'epic',
+    },
+    {
+      id: 'badge_3',
+      name: 'Subscriber',
+      icon: '🔔',
+      description: 'Active subscription holder',
+      earnedAt: '2024-02-01',
+      rarity: 'rare',
+    },
+    {
+      id: 'badge_4',
+      name: 'Power User',
+      icon: '⚡',
+      description: 'Made 10+ transactions',
+      earnedAt: '2024-03-10',
+      rarity: 'rare',
+    },
+    {
+      id: 'badge_5',
+      name: 'Champion',
+      icon: '👑',
+      description: 'Top 10 leaderboard',
+      earnedAt: '2024-03-25',
+      rarity: 'legendary',
+    },
+  ];
+};
+
+const generateMockRewardHistory = (): RewardHistoryItem[] => {
+  return [
+    {
+      id: 'evt_1',
+      type: 'purchase',
+      title: 'Premium Purchase',
+      points: 500,
+      timestamp: new Date(Date.now() - 1 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Purchased premium features',
+    },
+    {
+      id: 'evt_2',
+      type: 'referral',
+      title: 'Referral Bonus',
+      points: 250,
+      timestamp: new Date(Date.now() - 3 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Friend Bob joined via your referral',
+    },
+    {
+      id: 'evt_3',
+      type: 'milestone',
+      title: 'Milestone Reached',
+      points: 1000,
+      timestamp: new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString(),
+      description: '5000 total points milestone',
+    },
+    {
+      id: 'evt_4',
+      type: 'subscription',
+      title: 'Daily Subscription',
+      points: 100,
+      timestamp: new Date(Date.now() - 10 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Active subscription reward',
+    },
+    {
+      id: 'evt_5',
+      type: 'feature_usage',
+      title: 'Feature Usage',
+      points: 75,
+      timestamp: new Date(Date.now() - 15 * 24 * 60 * 60 * 1000).toISOString(),
+      description: 'Used advanced analytics feature',
+    },
+  ];
+};
+
+const fetchDashboardData = async (walletAddress: string): Promise<DashboardData> => {
+  // Simulate API delay
+  await new Promise((resolve) => setTimeout(resolve, 800));
+
+  // Mock data based on wallet address
+  const totalPoints = walletAddress.length * 123 + 4567; // Pseudo-random but deterministic
+
+  return {
+    totalPoints,
+    badges: generateMockBadges(),
+    rewardHistory: generateMockRewardHistory(),
+    tier: {
+      name: 'Platinum',
+      level: 3,
+      icon: '💎',
+      nextMilestone: 8000,
+      currentProgress: totalPoints,
+    },
+    lastUpdated: new Date().toISOString(),
+  };
+};
+
+// ============================================================================
+// Utility Functions
+// ============================================================================
+
+const shortenAddress = (address: string): string => {
+  if (!address) return '';
+  return `${address.substring(0, 6)}...${address.substring(address.length - 4)}`;
+};
+
+const copyToClipboard = (text: string) => {
+  navigator.clipboard.writeText(text);
+};
+
+const formatDate = (isoDate: string): string => {
+  const date = new Date(isoDate);
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+
+  if (diffDays === 0) return 'Today';
+  if (diffDays === 1) return 'Yesterday';
+  if (diffDays < 7) return `${diffDays} days ago`;
+  if (diffDays < 30) return `${Math.floor(diffDays / 7)} weeks ago`;
+  if (diffDays < 365) return `${Math.floor(diffDays / 30)} months ago`;
+  return `${Math.floor(diffDays / 365)} years ago`;
+};
+
+const getRarityColor = (rarity: string): string => {
+  const rarityColors: Record<string, string> = {
+    common: '#A0AEC0',
+    rare: '#3FB950',
+    epic: '#2F81F7',
+    legendary: '#F59E0B',
+  };
+  return rarityColors[rarity] || '#A0AEC0';
+};
+
+// ============================================================================
+// Reward History Component
+// ============================================================================
+
+interface RewardHistoryProps {
+  items: RewardHistoryItem[];
+  accentColor: string;
+}
+
+const RewardHistory: React.FC<RewardHistoryProps> = ({ items, accentColor }) => {
+  return (
+    <div className="space-y-3">
+      {items.map((item) => (
+        <div
+          key={item.id}
+          className="flex items-start justify-between p-3 rounded-lg border border-gray-700 hover:border-gray-600 transition-colors"
+          style={{ borderLeftColor: accentColor, borderLeftWidth: '3px' }}
+        >
+          <div className="flex-1">
+            <div className="flex items-center gap-2">
+              <span className="text-sm font-semibold text-white">{item.title}</span>
+              <span className="text-xs px-2 py-0.5 rounded-full bg-gray-700 text-gray-300">
+                {item.type}
+              </span>
+            </div>
+            {item.description && (
+              <p className="text-xs text-gray-400 mt-1">{item.description}</p>
+            )}
+            <p className="text-xs text-gray-500 mt-1">{formatDate(item.timestamp)}</p>
+          </div>
+          <div className="ml-4 text-right">
+            <p className="text-lg font-bold" style={{ color: accentColor }}>
+              +{item.points}
+            </p>
+            <p className="text-xs text-gray-400">points</p>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// ============================================================================
+// Badge Grid Component
+// ============================================================================
+
+interface BadgeGridProps {
+  badges: Badge[];
+  compactMode?: boolean;
+}
+
+const BadgeGrid: React.FC<BadgeGridProps> = ({ badges, compactMode = false }) => {
+  const displayBadges = compactMode ? badges.slice(0, 4) : badges;
+
+  return (
+    <div
+      className={`grid gap-3 ${compactMode ? 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4' : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5'}`}
+    >
+      {displayBadges.map((badge) => (
+        <div
+          key={badge.id}
+          className="group relative p-3 rounded-lg border transition-all hover:scale-105 cursor-pointer"
+          style={{
+            borderColor: getRarityColor(badge.rarity),
+            backgroundColor: 'rgba(31, 41, 55, 0.5)',
+          }}
+          title={`${badge.name} - ${badge.description}`}
+        >
+          <div className="text-3xl mb-1 text-center">{badge.icon}</div>
+          <p className="text-xs font-semibold text-white text-center truncate">{badge.name}</p>
+          <p className="text-xs text-gray-400 text-center mt-0.5">
+            {new Date(badge.earnedAt).toLocaleDateString()}
+          </p>
+
+          {/* Tooltip on hover */}
+          <div className="hidden group-hover:block absolute bottom-full left-1/2 transform -translate-x-1/2 mb-2 p-2 bg-gray-900 border border-gray-700 rounded-lg text-xs text-gray-300 w-32 text-center whitespace-normal z-10">
+            {badge.description}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+// ============================================================================
+// Tier Card Component
+// ============================================================================
+
+interface TierCardProps {
+  tier: TierInfo;
+  accentColor: string;
+}
+
+const TierCard: React.FC<TierCardProps> = ({ tier, accentColor }) => {
+  const progressPercent = (tier.currentProgress / tier.nextMilestone) * 100;
+
+  return (
+    <div
+      className="p-4 rounded-lg border"
+      style={{
+        borderColor: accentColor,
+        backgroundColor: 'rgba(31, 41, 55, 0.3)',
+      }}
+    >
+      <div className="flex items-start justify-between mb-3">
+        <div className="flex items-center gap-2">
+          <span className="text-3xl">{tier.icon}</span>
+          <div>
+            <p className="text-sm font-semibold text-white">{tier.name}</p>
+            <p className="text-xs text-gray-400">Level {tier.level}</p>
+          </div>
+        </div>
+      </div>
+      <div className="space-y-2">
+        <div className="flex justify-between text-xs text-gray-400">
+          <span>{tier.currentProgress.toLocaleString()} points</span>
+          <span>{tier.nextMilestone.toLocaleString()} goal</span>
+        </div>
+        <div className="w-full bg-gray-700 rounded-full h-2 overflow-hidden">
+          <div
+            className="h-full rounded-full transition-all duration-500"
+            style={{
+              width: `${Math.min(progressPercent, 100)}%`,
+              backgroundColor: accentColor,
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+// ============================================================================
+// Main RewardsDashboard Component
+// ============================================================================
+
+export const RewardsDashboard: React.FC<RewardsDashboardProps> = ({
+  walletAddress = null,
+  onConnectWallet,
+  customColors = {},
+  hideHistory = false,
+  hideBadges = false,
+  hideTier = false,
+  compactMode = false,
+}) => {
+  const [data, setData] = useState<DashboardData | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [copied, setCopied] = useState(false);
+
+  const backgroundColor = customColors.background || '#0D1117';
+  const accentColor = customColors.accent1 || '#2F81F7';
+  const accentColor2 = customColors.accent2 || '#3FB950';
+
+  // Fetch data when wallet changes
+  useEffect(() => {
+    if (!walletAddress) {
+      setData(null);
+      return;
+    }
+
+    setLoading(true);
+    setError(null);
+
+    fetchDashboardData(walletAddress)
+      .then((result) => {
+        setData(result);
+        setLoading(false);
+      })
+      .catch((err) => {
+        setError(err.message);
+        setLoading(false);
+      });
+  }, [walletAddress]);
+
+  const handleCopyAddress = () => {
+    if (walletAddress) {
+      copyToClipboard(walletAddress);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    }
+  };
+
+  const handleRefresh = async () => {
+    if (walletAddress) {
+      setLoading(true);
+      const result = await fetchDashboardData(walletAddress);
+      setData(result);
+      setLoading(false);
+    }
+  };
+
+  // Disconnected state
+  if (!walletAddress) {
+    return (
+      <div
+        className="p-6 rounded-lg border border-gray-700 max-w-2xl"
+        style={{ backgroundColor }}
+      >
+        <div className="text-center">
+          <Lock className="w-12 h-12 mx-auto mb-4 text-gray-500" />
+          <h2 className="text-xl font-bold text-white mb-2">Connect Your Wallet</h2>
+          <p className="text-gray-400 mb-6">
+            Connect your wallet to view your rewards, badges, and track your achievements.
+          </p>
+          {onConnectWallet && (
+            <button
+              onClick={onConnectWallet}
+              className="inline-flex items-center gap-2 px-6 py-2 rounded-lg font-semibold text-white transition-all hover:opacity-90"
+              style={{
+                backgroundColor: accentColor,
+              }}
+            >
+              <Wallet className="w-5 h-5" />
+              Connect Wallet
+            </button>
+          )}
+        </div>
+      </div>
+    );
+  }
+
+  // Loading state
+  if (loading && !data) {
+    return (
+      <div
+        className="p-6 rounded-lg border border-gray-700 max-w-2xl"
+        style={{ backgroundColor }}
+      >
+        <div className="space-y-4">
+          <div className="h-20 bg-gray-700 rounded-lg animate-pulse" />
+          <div className="h-40 bg-gray-700 rounded-lg animate-pulse" />
+          <div className="h-32 bg-gray-700 rounded-lg animate-pulse" />
+        </div>
+      </div>
+    );
+  }
+
+  // Error state
+  if (error && !data) {
+    return (
+      <div
+        className="p-6 rounded-lg border border-red-700 max-w-2xl"
+        style={{ backgroundColor }}
+      >
+        <p className="text-red-400">Failed to load rewards: {error}</p>
+        <button
+          onClick={handleRefresh}
+          className="mt-4 px-4 py-2 rounded-lg text-white text-sm transition-all"
+          style={{ backgroundColor: accentColor }}
+        >
+          Try Again
+        </button>
+      </div>
+    );
+  }
+
+  if (!data) return null;
+
+  return (
+    <div
+      className="rounded-lg border border-gray-700 overflow-hidden"
+      style={{ backgroundColor }}
+    >
+      {/* Header */}
+      <div className="p-6 border-b border-gray-700">
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-2xl font-bold text-white">Rewards Dashboard</h2>
+          <button
+            onClick={handleRefresh}
+            disabled={loading}
+            className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-700 transition-all disabled:opacity-50"
+          >
+            <RefreshCw className={`w-5 h-5 ${loading ? 'animate-spin' : ''}`} />
+          </button>
+        </div>
+
+        {/* Wallet Display */}
+        <div className="flex items-center justify-between p-3 rounded-lg bg-gray-800/50 border border-gray-700">
+          <div className="flex items-center gap-2">
+            <Wallet className="w-5 h-5" style={{ color: accentColor }} />
+            <div>
+              <p className="text-xs text-gray-400">Connected Wallet</p>
+              <p className="text-sm font-mono font-semibold text-white">{shortenAddress(walletAddress)}</p>
+            </div>
+          </div>
+          <button
+            onClick={handleCopyAddress}
+            className="p-2 rounded-lg text-gray-400 hover:text-white hover:bg-gray-700 transition-all"
+            title={walletAddress}
+          >
+            {copied ? <CheckCircle className="w-5 h-5" style={{ color: accentColor2 }} /> : <Copy className="w-5 h-5" />}
+          </button>
+        </div>
+      </div>
+
+      {/* Main Content */}
+      <div className={`p-6 space-y-6 ${compactMode ? 'max-w-3xl' : ''}`} style={{backgroundColor: 'rgba(31, 41, 55, 0.2)'}}>
+        {/* Points Display */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div
+            className="p-6 rounded-lg border text-center"
+            style={{
+              borderColor: accentColor,
+              backgroundColor: 'rgba(47, 129, 247, 0.1)',
+            }}
+          >
+            <p className="text-sm text-gray-400 mb-2">Total Points</p>
+            <p className="text-4xl font-bold" style={{ color: accentColor }}>
+              {data.totalPoints.toLocaleString()}
+            </p>
+            <div className="flex items-center justify-center gap-1 mt-2 text-xs text-gray-400">
+              <TrendingUp className="w-4 h-4" />
+              <span>Keep earning rewards</span>
+            </div>
+          </div>
+
+          {!hideTier && (
+            <TierCard tier={data.tier} accentColor={accentColor2} />
+          )}
+        </div>
+
+        {/* Badges Section */}
+        {!hideBadges && data.badges.length > 0 && (
+          <div>
+            <div className="flex items-center gap-2 mb-4">
+              <Award className="w-5 h-5" style={{ color: accentColor }} />
+              <h3 className="text-lg font-semibold text-white">
+                Badges ({data.badges.length})
+              </h3>
+            </div>
+            <BadgeGrid badges={data.badges} compactMode={compactMode} />
+          </div>
+        )}
+
+        {/* Reward History Section */}
+        {!hideHistory && data.rewardHistory.length > 0 && (
+          <div>
+            <div className="flex items-center gap-2 mb-4">
+              <Zap className="w-5 h-5" style={{ color: accentColor2 }} />
+              <h3 className="text-lg font-semibold text-white">Recent Rewards</h3>
+            </div>
+            <RewardHistory
+              items={compactMode ? data.rewardHistory.slice(0, 3) : data.rewardHistory}
+              accentColor={accentColor}
+            />
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="px-6 py-3 border-t border-gray-700 flex items-center justify-between text-xs text-gray-500">
+        <span>Last updated: {formatDate(data.lastUpdated)}</span>
+        <span className="flex items-center gap-1">
+          <ExternalLink className="w-3 h-3" />
+          @chainloyalty/react
+        </span>
+      </div>
+    </div>
+  );
+};
+
+export default RewardsDashboard;

package/src/index.ts

@@ -0,0 +1,18 @@
+/**
+ * @chainloyalty/react
+ * Main entry point for the ChainLoyalty React package
+ */
+
+// Export hooks
+export { useTrackEvent, trackEvent } from './useTrackEvent.js';
+export type { EventData, EventType, TrackEventResponse, UseTrackEventState } from './useTrackEvent.js';
+
+// Export components
+export { RewardsDashboard } from './RewardsDashboard.js';
+export type { RewardsDashboardProps, Badge, RewardHistoryItem, TierInfo, DashboardData } from './RewardsDashboard.js';
+
+export { Leaderboard } from './Leaderboard.js';
+export type { LeaderboardProps, LeaderboardEntry, LeaderboardTimeframe } from './Leaderboard.js';
+
+// Version info
+export const PACKAGE_VERSION = '1.0.0';