fix profile, empty-state, and activity fallbacks

src/components/common/CompactEmptyWalletState.tsx

@@ -1,5 +1,6 @@
 import { WalletMinimal } from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { EMPTY_STATE_ILLUSTRATION_SIZES } from './emptyStateIllustration.config';
 
 interface CompactEmptyWalletStateProps {
 	title?: string;
@@ -19,8 +20,18 @@ const CompactEmptyWalletState: React.FC<CompactEmptyWalletStateProps> = ({
 				className
 			)}
 		>
-			<div className="mt-0.5 rounded-lg bg-amber-300/20 p-1.5">
-				<WalletMinimal className="size-4 text-amber-200" />
+			<div
+				className={cn(
+					'mt-0.5 flex items-center justify-center rounded-lg bg-amber-300/20',
+					EMPTY_STATE_ILLUSTRATION_SIZES.compactBadgeFrame
+				)}
+			>
+				<WalletMinimal
+					className={cn(
+						'text-amber-200',
+						EMPTY_STATE_ILLUSTRATION_SIZES.compactBadgeIcon
+					)}
+				/>
 			</div>
 			<div>
 				<p className="text-sm font-semibold text-amber-100">{title}</p>

src/components/common/CreatorProfileHeader.tsx

@@ -17,6 +17,9 @@ interface CreatorProfileHeaderProps {
 	className?: string;
 }
 
+const CREATOR_PROFILE_SUBTITLE_WRAP_CLASS_NAME =
+	'max-w-full whitespace-normal break-words [overflow-wrap:anywhere]';
+
 const CreatorProfileHeader: React.FC<CreatorProfileHeaderProps> = ({
 	name,
 	handle,
@@ -77,7 +80,14 @@ const CreatorProfileHeader: React.FC<CreatorProfileHeaderProps> = ({
 						</h1>
 						{isVerified && <div className="shrink-0"><VerifiedBadge verified={true} /></div>}
 					</div>
-					<p className="truncate font-jakarta text-lg text-white/50">@{handle}</p>
+					<p
+						className={cn(
+							'font-jakarta text-lg text-white/50',
+							CREATOR_PROFILE_SUBTITLE_WRAP_CLASS_NAME
+						)}
+					>
+						@{handle}
+					</p>
 					<CreatorBio bio={bio} variant="profile" className="mt-2 max-w-md" />
 				</div>
 			</div>

src/components/common/CreatorProfileInfoGrid.tsx

@@ -5,6 +5,7 @@ import CreatorProfileStatItem from './CreatorProfileStatItem';
 interface CreatorProfileInfoItem {
 	label: string;
 	value: ReactNode;
+	helperText?: ReactNode;
 }
 
 interface CreatorProfileInfoGridProps {
@@ -28,6 +29,7 @@ const CreatorProfileInfoGrid: React.FC<CreatorProfileInfoGridProps> = ({
 					key={item.label}
 					label={item.label}
 					value={item.value}
+					helperText={item.helperText}
 				/>
 			))}
 		</div>

src/components/common/CreatorProfileStatItem.tsx

@@ -4,12 +4,14 @@ import { cn } from '@/lib/utils';
 interface CreatorProfileStatItemProps {
 	label: string;
 	value: ReactNode;
+	helperText?: ReactNode;
 	className?: string;
 }
 
 const CreatorProfileStatItem: React.FC<CreatorProfileStatItemProps> = ({
 	label,
 	value,
+	helperText,
 	className,
 }) => {
 	return (
@@ -26,6 +28,11 @@ const CreatorProfileStatItem: React.FC<CreatorProfileStatItemProps> = ({
 			<div className="relative z-10 mt-2.5 font-jakarta text-base font-bold text-white md:text-[1.05rem]">
 				{value}
 			</div>
+			{helperText && (
+				<p className="relative z-10 mt-1.5 text-xs text-white/45">
+					{helperText}
+				</p>
+			)}
 		</div>
 	);
 };

src/components/common/EmptyState.tsx

@@ -1,6 +1,7 @@
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
 import { RotateCcw } from 'lucide-react';
+import { EMPTY_STATE_ILLUSTRATION_SIZES } from './emptyStateIllustration.config';
 
 interface EmptyStateProps {
 	image: string;
@@ -26,11 +27,19 @@ const EmptyState: React.FC<EmptyStateProps> = ({
 			role="status"
 			aria-label={title}
 		>
-			<div className="relative mb-6">
+			<div
+				className={cn(
+					'relative mb-6 flex items-center justify-center',
+					EMPTY_STATE_ILLUSTRATION_SIZES.heroFrame
+				)}
+			>
 				<div className="absolute inset-0 size-full rounded-full bg-amber-500/10 blur-2xl" />
 				<img
 					src={image}
-					className="relative z-10 size-[180px] object-contain opacity-60 grayscale transition-all duration-500 hover:opacity-80 hover:grayscale-0"
+					className={cn(
+						'relative z-10 opacity-60 grayscale transition-all duration-500 hover:opacity-80 hover:grayscale-0',
+						EMPTY_STATE_ILLUSTRATION_SIZES.heroVisual
+					)}
 					alt=""
 					aria-hidden="true"
 				/>

src/components/common/EmptyTransactionTimelineState.tsx

@@ -1,6 +1,9 @@
 import { useState } from 'react';
 import { Button } from '@/components/ui/button';
 import { Check, Clock3, Copy, XCircle } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { EMPTY_STATE_ILLUSTRATION_SIZES } from './emptyStateIllustration.config';
+import { formatRecentActivityCompactTimestamp } from '@/utils/recentActivityTimestamp.utils';
 
 type CopyState = 'idle' | 'success' | 'error';
 
@@ -9,7 +12,7 @@ interface TimelineEntry {
 	action: string;
 	amount: string;
 	txHash: string;
-	timeLabel: string;
+	compactTimestamp?: string | null;
 	status: 'confirmed' | 'pending' | 'failed';
 }
 
@@ -19,23 +22,23 @@ const TIMELINE_ENTRIES: TimelineEntry[] = [
 		action: 'Buy',
 		amount: '+2 keys',
 		txHash: '0x2a43bcfdef77ca4c50ef7d38148dd5d7f0149a6e2e20f70f04ce1f4b66fe55dd',
-		timeLabel: '2m ago',
+		compactTimestamp: '2m ago',
 		status: 'confirmed',
 	},
 	{
 		id: 'entry-2',
 		action: 'Sell',
 		amount: '-1 key',
 		txHash: '0x90c82ac01478b42fcbf9db73a26ed32bd8e50a8917e2408c31c95e9f6a59fc19',
-		timeLabel: '18m ago',
+		compactTimestamp: '18m ago',
 		status: 'pending',
 	},
 	{
 		id: 'entry-3',
 		action: 'Buy',
 		amount: '+3 keys',
 		txHash: '0x16d2ffbc4297a8c2c3086e07c16e66f47287df0d5a1ce1aef9e448e2f0f3ab51',
-		timeLabel: '51m ago',
+		compactTimestamp: '51m ago',
 		status: 'failed',
 	},
 ];
@@ -70,8 +73,15 @@ const EmptyTransactionTimelineState: React.FC = () => {
 							Recent trade events with quick copy access for tx hashes.
 						</p>
 					</div>
-					<div className="inline-flex size-11 shrink-0 items-center justify-center rounded-full border border-white/15 bg-white/10 text-amber-300">
-						<Clock3 className="size-5" />
+					<div
+						className={cn(
+							'inline-flex items-center justify-center rounded-full border border-white/15 bg-white/10 text-amber-300',
+							EMPTY_STATE_ILLUSTRATION_SIZES.panelBadgeFrame
+						)}
+					>
+						<Clock3
+							className={EMPTY_STATE_ILLUSTRATION_SIZES.panelBadgeIcon}
+						/>
 					</div>
 				</div>
 
@@ -138,7 +148,11 @@ const EmptyTransactionTimelineState: React.FC = () => {
 								</div>
 								<div className="text-right">
 									<p className={statusClass}>{entry.status}</p>
-									<p className="text-[10px] text-white/40">{entry.timeLabel}</p>
+									<p className="text-[10px] text-white/40">
+										{formatRecentActivityCompactTimestamp(
+											entry.compactTimestamp
+										)}
+									</p>
 								</div>
 							</div>
 						);

src/components/common/__tests__/CreatorProfileStatItem.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it } from 'vitest';
+import CreatorProfileStatItem from '../CreatorProfileStatItem';
+
+describe('CreatorProfileStatItem', () => {
+	it('renders helper text beneath the value when provided', () => {
+		render(
+			<CreatorProfileStatItem
+				label="Followers"
+				value="Not available"
+				helperText="Follower count not available yet."
+			/>
+		);
+
+		expect(screen.getByText('Followers')).toBeInTheDocument();
+		expect(screen.getByText('Not available')).toBeInTheDocument();
+		expect(
+			screen.getByText('Follower count not available yet.')
+		).toBeInTheDocument();
+	});
+
+	it('omits helper text when not provided', () => {
+		render(<CreatorProfileStatItem label="Followers" value="12.4K" />);
+
+		expect(
+			screen.queryByText('Follower count not available yet.')
+		).not.toBeInTheDocument();
+	});
+});

src/components/common/emptyStateIllustration.config.ts

@@ -0,0 +1,8 @@
+export const EMPTY_STATE_ILLUSTRATION_SIZES = {
+	heroFrame: 'size-36 sm:size-40 md:size-44',
+	heroVisual: 'size-full object-contain',
+	compactBadgeFrame: 'size-8 shrink-0',
+	compactBadgeIcon: 'size-4',
+	panelBadgeFrame: 'size-11 shrink-0',
+	panelBadgeIcon: 'size-5',
+} as const;

src/pages/LandingPage.tsx

@@ -35,6 +35,8 @@ const FEATURED_CREATOR_FACTS = [
 	{ label: 'Community', value: 'Private behind-the-scenes notes' },
 ];
 
+const FEATURED_CREATOR_FOLLOWER_COUNT: number | null = null;
+
 // Fallback demo data in case API fails
 const DEMO_CREATORS: Course[] = [
 	{
@@ -598,6 +600,19 @@ function LandingPage() {
 						<CreatorProfileInfoGrid
 							items={[
 								...FEATURED_CREATOR_FACTS,
+								{
+									label: 'Followers',
+									value:
+										FEATURED_CREATOR_FOLLOWER_COUNT != null
+											? formatCompactNumber(
+													FEATURED_CREATOR_FOLLOWER_COUNT
+												)
+											: 'Not available',
+									helperText:
+										FEATURED_CREATOR_FOLLOWER_COUNT != null
+											? undefined
+											: 'Follower count not available yet.',
+								},
 								{
 									label: 'Your holdings',
 									value: `${formatNumber(featuredHoldings)} keys`,

src/utils/__tests__/recentActivityTimestamp.utils.test.ts

@@ -0,0 +1,30 @@
+import { describe, expect, it } from 'vitest';
+import { formatRecentActivityCompactTimestamp } from '../recentActivityTimestamp.utils';
+
+describe('formatRecentActivityCompactTimestamp', () => {
+	it('preserves supported compact timestamp labels', () => {
+		expect(formatRecentActivityCompactTimestamp('2m ago')).toBe('2m ago');
+		expect(formatRecentActivityCompactTimestamp('18 min ago')).toBe(
+			'18 min ago'
+		);
+		expect(formatRecentActivityCompactTimestamp('just now')).toBe('just now');
+	});
+
+	it('falls back when the compact timestamp input is missing', () => {
+		expect(formatRecentActivityCompactTimestamp(undefined)).toBe(
+			'Time unavailable'
+		);
+		expect(formatRecentActivityCompactTimestamp('   ')).toBe(
+			'Time unavailable'
+		);
+	});
+
+	it('falls back when the compact timestamp input is invalid', () => {
+		expect(formatRecentActivityCompactTimestamp('yesterday')).toBe(
+			'Time unavailable'
+		);
+		expect(formatRecentActivityCompactTimestamp('18 minutes')).toBe(
+			'Time unavailable'
+		);
+	});
+});

src/utils/recentActivityTimestamp.utils.ts

@@ -0,0 +1,18 @@
+const COMPACT_RECENT_ACTIVITY_TIMESTAMP_PATTERN =
+	/^(just now|\d+\s?(?:s|sec|secs|m|min|mins|h|hr|hrs|d|day|days)\s+ago)$/i;
+
+const RECENT_ACTIVITY_TIMESTAMP_FALLBACK = 'Time unavailable';
+
+export function formatRecentActivityCompactTimestamp(
+	compactTimestamp: string | null | undefined
+): string {
+	const normalized = compactTimestamp?.trim();
+
+	if (!normalized) {
+		return RECENT_ACTIVITY_TIMESTAMP_FALLBACK;
+	}
+
+	return COMPACT_RECENT_ACTIVITY_TIMESTAMP_PATTERN.test(normalized)
+		? normalized
+		: RECENT_ACTIVITY_TIMESTAMP_FALLBACK;
+}