di usage in website

apps/website/components/sponsors/SponsorInsightsCard.tsx

@@ -1,28 +1,27 @@
 'use client';
 
-import React, { useState, useCallback } from 'react';
-import { useRouter } from 'next/navigation';
-import Card from '@/components/ui/Card';
 import Button from '@/components/ui/Button';
-import { useServices } from '@/lib/services/ServiceProvider';
+import Card from '@/components/ui/Card';
 import { useAuth } from '@/lib/auth/AuthContext';
+import { useInject } from '@/lib/di/hooks/useInject';
+import { SPONSORSHIP_SERVICE_TOKEN } from '@/lib/di/tokens';
 import {
+  Activity,
+  Calendar,
+  Check,
   Eye,
-  TrendingUp,
-  Users,
+  Loader2,
+  MessageCircle,
+  Shield,
   Star,
   Target,
-  DollarSign,
-  Calendar,
+  TrendingUp,
   Trophy,
-  Zap,
-  ExternalLink,
-  MessageCircle,
-  Activity,
-  Shield,
-  Check,
-  Loader2,
+  Users,
+  Zap
 } from 'lucide-react';
+import { useRouter } from 'next/navigation';
+import React, { useCallback, useState } from 'react';
 
 // ============================================================================
 // TYPES
@@ -155,8 +154,9 @@ export default function SponsorInsightsCard({
   currentSponsorId,
   onSponsorshipRequested,
 }: SponsorInsightsProps) {
+  // TODO components should not fetch any data
   const router = useRouter();
-  const { sponsorshipService } = useServices();
+  const sponsorshipService = useInject(SPONSORSHIP_SERVICE_TOKEN);
   const tierStyles = getTierStyles(tier);
   const EntityIcon = getEntityIcon(entityType);