feat(#978): add key subscription status and content access gate

src/components/__tests__/SubscriptionAccessGate.test.tsx

@@ -0,0 +1,87 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach } from 'vitest';
+import SubscriptionAccessGate from '../common/SubscriptionAccessGate';
+import { useWalletHoldings } from '@/hooks/useWallet';
+import { useProfileStore } from '@/hooks/useProfileStore';
+
+vi.mock('@/hooks/useWallet', () => ({
+	useWalletHoldings: vi.fn(),
+}));
+
+vi.mock('@/hooks/useProfileStore', () => ({
+	useProfileStore: vi.fn(),
+}));
+
+describe('SubscriptionAccessGate', () => {
+	const mockOnBuyClick = vi.fn();
+
+	beforeEach(() => {
+		vi.clearAllMocks();
+	});
+
+	it('shows non-connected state when no wallet is connected', () => {
+		(useProfileStore as unknown as ReturnType<typeof vi.fn>).mockImplementation((selector: unknown) => (selector as (state: unknown) => unknown)({ profile: null }));
+		(useWalletHoldings as unknown as ReturnType<typeof vi.fn>).mockReturnValue({ data: [], isLoading: false });
+
+		render(
+			<SubscriptionAccessGate creatorId="creator1" onBuyClick={mockOnBuyClick}>
+				<div>Exclusive Content</div>
+			</SubscriptionAccessGate>
+		);
+
+		expect(screen.getByTestId('subscription-gate-unconnected')).toBeInTheDocument();
+		expect(screen.getByText(/Wallet Not Connected/i)).toBeInTheDocument();
+	});
+
+	it('shows loading state while fetching holdings', () => {
+		(useProfileStore as unknown as ReturnType<typeof vi.fn>).mockImplementation((selector: unknown) => (selector as (state: unknown) => unknown)({ profile: { id: 'wallet1' } }));
+		(useWalletHoldings as unknown as ReturnType<typeof vi.fn>).mockReturnValue({ data: [], isLoading: true });
+
+		render(
+			<SubscriptionAccessGate creatorId="creator1" onBuyClick={mockOnBuyClick}>
+				<div>Exclusive Content</div>
+			</SubscriptionAccessGate>
+		);
+
+		expect(screen.getByTestId('subscription-gate-loading')).toBeInTheDocument();
+	});
+
+	it('shows locked state when holding is below minimum threshold', () => {
+		(useProfileStore as unknown as ReturnType<typeof vi.fn>).mockImplementation((selector: unknown) => (selector as (state: unknown) => unknown)({ profile: { id: 'wallet1' } }));
+		(useWalletHoldings as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			data: [{ creatorId: 'creator1', quantity: 0 }],
+			isLoading: false,
+		});
+
+		render(
+			<SubscriptionAccessGate creatorId="creator1" onBuyClick={mockOnBuyClick} minimumHolding={1}>
+				<div>Exclusive Content</div>
+			</SubscriptionAccessGate>
+		);
+
+		expect(screen.getByTestId('subscription-gate-locked')).toBeInTheDocument();
+		expect(screen.getByText(/Content Locked/i)).toBeInTheDocument();
+
+		const buyButton = screen.getByRole('button', { name: /Buy Keys to Unlock/i });
+		fireEvent.click(buyButton);
+		expect(mockOnBuyClick).toHaveBeenCalled();
+	});
+
+	it('shows unlocked state and content when holding meets minimum threshold', () => {
+		(useProfileStore as unknown as ReturnType<typeof vi.fn>).mockImplementation((selector: unknown) => (selector as (state: unknown) => unknown)({ profile: { id: 'wallet1' } }));
+		(useWalletHoldings as unknown as ReturnType<typeof vi.fn>).mockReturnValue({
+			data: [{ creatorId: 'creator1', quantity: 1, last_buy_timestamp: Date.now() }],
+			isLoading: false,
+		});
+
+		render(
+			<SubscriptionAccessGate creatorId="creator1" onBuyClick={mockOnBuyClick} minimumHolding={1}>
+				<div>Exclusive Content</div>
+			</SubscriptionAccessGate>
+		);
+
+		expect(screen.getByTestId('subscription-gate-unlocked')).toBeInTheDocument();
+		expect(screen.getByText(/Active Subscription/i)).toBeInTheDocument();
+		expect(screen.getByText('Exclusive Content')).toBeInTheDocument();
+	});
+});

src/components/common/SubscriptionAccessGate.tsx

@@ -0,0 +1,129 @@
+import type { ReactNode } from 'react';
+import { useWalletHoldings } from '@/hooks/useWallet';
+import { useProfileStore } from '@/hooks/useProfileStore';
+import { Button } from '@/components/ui/button';
+import { formatDistanceToNow } from 'date-fns';
+
+interface SubscriptionAccessGateProps {
+	creatorId: string;
+	minimumHolding?: number;
+	children: ReactNode;
+	onBuyClick?: () => void;
+}
+
+export default function SubscriptionAccessGate({
+	creatorId,
+	minimumHolding = 1,
+	children,
+	onBuyClick,
+}: SubscriptionAccessGateProps) {
+	const profile = useProfileStore(state => state.profile);
+	const userAddress = profile?.id;
+	const { data: holdings = [], isLoading } = useWalletHoldings(
+		userAddress ?? ''
+	);
+
+	const userPosition = holdings.find(h => h.creatorId === creatorId);
+	const quantity = userPosition?.quantity ?? 0;
+	const isUnlocked = quantity >= minimumHolding;
+
+	// Mock expiry countdown for now (e.g. 30 days from last buy, defaulting to 30 days from now if not present)
+	const expiryDate = userPosition?.last_buy_timestamp
+		? new Date(
+				new Date(userPosition.last_buy_timestamp).getTime() +
+					30 * 24 * 60 * 60 * 1000
+		  )
+		: new Date(Date.now() + 30 * 24 * 60 * 60 * 1000);
+
+	if (!userAddress) {
+		return (
+			<div className="rounded-2xl border border-white/10 bg-[#06111f] p-8 text-center" data-testid="subscription-gate-unconnected">
+				<h3 className="mb-2 text-xl font-bold text-white">Wallet Not Connected</h3>
+				<p className="mb-4 text-white/70">
+					Connect your wallet to verify your key holdings and access this content.
+				</p>
+			</div>
+		);
+	}
+
+	if (isLoading) {
+		return (
+			<div className="rounded-2xl border border-white/10 bg-white/[0.02] p-8 text-center text-white/50 animate-pulse" data-testid="subscription-gate-loading">
+				Checking subscription status...
+			</div>
+		);
+	}
+
+	if (!isUnlocked) {
+		return (
+			<div className="rounded-2xl border border-rose-500/20 bg-rose-500/10 p-8 text-center" data-testid="subscription-gate-locked">
+				<div className="mb-4 text-rose-400">
+					<svg
+						className="mx-auto h-12 w-12"
+						fill="none"
+						viewBox="0 0 24 24"
+						stroke="currentColor"
+					>
+						<path
+							strokeLinecap="round"
+							strokeLinejoin="round"
+							strokeWidth={2}
+							d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
+						/>
+					</svg>
+				</div>
+				<h3 className="mb-2 text-xl font-bold text-white">Content Locked</h3>
+				<p className="mb-6 text-white/70">
+					You need at least {minimumHolding} key{minimumHolding === 1 ? '' : 's'}{' '}
+					to access this creator's gated content. You currently hold {quantity}.
+				</p>
+				{onBuyClick && (
+					<Button onClick={onBuyClick} variant="default" className="font-bold">
+						Buy Keys to Unlock
+					</Button>
+				)}
+			</div>
+		);
+	}
+
+	return (
+		<div className="space-y-6" data-testid="subscription-gate-unlocked">
+			<div className="flex items-center justify-between rounded-xl border border-emerald-500/20 bg-emerald-500/10 px-5 py-3">
+				<div className="flex items-center gap-3">
+					<div className="flex h-8 w-8 items-center justify-center rounded-full bg-emerald-500/20 text-emerald-400">
+						<svg
+							className="h-5 w-5"
+							fill="none"
+							viewBox="0 0 24 24"
+							stroke="currentColor"
+						>
+							<path
+								strokeLinecap="round"
+								strokeLinejoin="round"
+								strokeWidth={2}
+								d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
+							/>
+						</svg>
+					</div>
+					<div>
+						<h4 className="font-bold text-emerald-400">Active Subscription</h4>
+						<p className="text-xs text-emerald-400/80">
+							You hold {quantity} key{quantity === 1 ? '' : 's'}
+						</p>
+					</div>
+				</div>
+				{expiryDate && (
+					<div className="text-right">
+						<p className="text-xs uppercase tracking-wider text-emerald-400/70">
+							Expires
+						</p>
+						<p className="font-mono text-sm font-semibold text-emerald-400">
+							{formatDistanceToNow(expiryDate, { addSuffix: true })}
+						</p>
+					</div>
+				)}
+			</div>
+			{children}
+		</div>
+	);
+}

src/pages/CreatorDetailPage.tsx

@@ -4,10 +4,19 @@ import { courseService } from '@/services/course.service';
 import type { Course } from '@/services/course.service';
 import BondingCurveChart from '@/components/common/BondingCurveChart';
 import CreatorProfileHeader from '@/components/common/CreatorProfileHeader';
-import KeySupplyBadge from '@/components/common/KeySupplyBadge';
-import { formatCreatorKeyPriceDisplay } from '@/utils/keyPriceDisplay.utils';
-import { resolveCreatorKeyPriceStroops } from '@/utils/keyPriceDisplay.utils';
-import { BUY_QUANTITY_BOUNDS } from '@/constants/fees';
+import CreatorProfileInfoGrid from '@/components/common/CreatorProfileInfoGrid';
+import CreatorActivityFeed from '@/components/common/CreatorActivityFeed';
+import CreatorProfileStaleIndicator from '@/components/common/CreatorProfileStaleIndicator';
+import CreatorProfileStatRow from '@/components/common/CreatorProfileStatRow';
+import { BondingCurveChart } from '@/components/common/BondingCurveChart';
+import KeySimulationTool from '@/components/common/KeySimulationTool';
+import BuyCooldownCountdown from '@/components/common/BuyCooldownCountdown';
+import KeyHolderList from '@/components/common/KeyHolderList';
+import HolderConcentrationChart from '@/components/common/HolderConcentrationChart';
+import StakingRewardsSection from '@/components/common/StakingRewardsSection';
+import DeprecationNotice from '@/components/common/DeprecationNotice';
+import SubscriptionAccessGate from '@/components/common/SubscriptionAccessGate';
+import { isKeyDeprecated } from '@/utils/keyDeprecation.utils';
 import { Button } from '@/components/ui/button';
 import { ShoppingCart } from 'lucide-react';
 import toast from 'react-hot-toast';
@@ -236,8 +245,67 @@ const CreatorDetailPage: React.FC = () => {
 						</div>
 					</div>
 				</div>
-			</main>
-		</div>
+
+				{/* Gated Content */}
+				<div className="rounded-[2rem] border border-white/10 bg-white/[0.02] p-6 shadow-2xl backdrop-blur-md md:p-8">
+					<h2 className="font-grotesque text-xl font-black tracking-tight text-white mb-6">
+						Exclusive Content
+					</h2>
+					<SubscriptionAccessGate 
+						creatorId={creator.id} 
+						minimumHolding={1}
+						onBuyClick={() => setBuyDialogOpen(true)}
+					>
+						<div className="rounded-xl bg-white/[0.03] p-6 border border-white/10">
+							<p className="text-white/80">
+								🎉 Welcome to the exclusive content section! Here you can access premium videos, articles, and perks from {creator.title || creator.name || 'this creator'}.
+							</p>
+						</div>
+					</SubscriptionAccessGate>
+				</div>
+
+				<div className="mt-8 rounded-[2rem] border border-white/10 bg-white/[0.02] p-6 shadow-2xl backdrop-blur-md md:p-8">
+					<h2 className="font-grotesque text-xl font-black tracking-tight text-white mb-6">
+						Activity
+					</h2>
+					<CreatorActivityFeed creatorId={creator.id} />
+				</div>
+				{/* Key Buyback Modal (#923) */}
+				{isKeyDeprecated(creator) && (
+					<KeyBuybackModal
+						open={buybackModalOpen}
+						onOpenChange={setBuybackModalOpen}
+						creatorId={creator.id}
+						creatorTitle={creator.title || creator.name || 'Creator Key'}
+						holdingsCount={holdingsCount}
+						buybackPriceStroops={resolveCreatorKeyPriceStroops(creator) ?? 0}
+						userAddress={userAddress}
+						onSettled={receipt => {
+							setRecentSettlement(receipt);
+						}}
+					/>
+				)}
+
+				{creator && (
+					<TradeDialog
+						open={buyDialogOpen}
+						side="buy"
+						creatorName={creator.title || creator.name || 'Creator'}
+						availableHoldings={holdingsCount}
+						keyPriceStroops={resolveCreatorKeyPriceStroops(creator)}
+						currentSupply={creator.creatorShareSupply}
+						maxBuyQuantity={creator.maxBuyQuantity}
+						launchPenaltyBps={creator.launchPenaltyBps}
+						keyConfig={keyConfig}
+						isKeyConfigLoading={isKeyConfigLoading}
+						onOpenChange={setBuyDialogOpen}
+						onConfirm={handleConfirmBuy}
+						isSubmitting={tradeSubmitting}
+						requireConfirmation={true}
+					/>
+				)}
+			</div>
+		</main>
 	);
 };