feat: implement daily rewards system & streak

website/src/lib/components/self/AppSidebar.svelte

@@ -25,8 +25,8 @@
 	import { USER_DATA } from '$lib/stores/user-data';
 	import { PORTFOLIO_DATA, fetchPortfolioData } from '$lib/stores/portfolio-data';
 	import { useSidebar } from '$lib/components/ui/sidebar/index.js';
-
 	import SignInConfirmDialog from './SignInConfirmDialog.svelte';
+	import DailyRewards from './DailyRewards.svelte';
 	import { signOut } from '$lib/auth-client';
 	import { getPublicUrl } from '$lib/utils';
 	import { goto } from '$app/navigation';
@@ -142,8 +142,18 @@
 						</Sidebar.MenuButton>
 					</Sidebar.MenuItem>
 				</Sidebar.Menu>
-			</Sidebar.GroupContent>
-		</Sidebar.Group>
+			</Sidebar.GroupContent>		</Sidebar.Group>
+
+		<!-- Daily Rewards -->
+		{#if $USER_DATA}
+			<Sidebar.Group>
+				<Sidebar.GroupContent>
+					<div class="px-2 py-1">
+						<DailyRewards />
+					</div>
+				</Sidebar.GroupContent>
+			</Sidebar.Group>
+		{/if}
 
 		<!-- Portfolio Summary -->
 		{#if $USER_DATA && $PORTFOLIO_DATA}

website/src/lib/components/self/DailyRewards.svelte

@@ -0,0 +1,166 @@
+<script lang="ts">
+	import { Button } from '$lib/components/ui/button';
+	import { Gift, Clock, CheckCircle, Flame } from 'lucide-svelte';
+	import { USER_DATA } from '$lib/stores/user-data';
+	import { fetchPortfolioData } from '$lib/stores/portfolio-data';
+	import { toast } from 'svelte-sonner';
+	import { goto } from '$app/navigation';
+
+	interface RewardStatus {
+		canClaim: boolean;
+		rewardAmount: number;
+		baseReward: number;
+		timeRemaining: number;
+		nextClaimTime: string | null;
+		totalRewardsClaimed: number;
+		lastRewardClaim: string | null;
+		loginStreak: number;
+	}
+
+	type ClaimState = 'idle' | 'loading' | 'success';
+
+	let rewardStatus = $state<RewardStatus | null>(null);
+	let claimState = $state<ClaimState>('idle');
+	let error = $state<string | null>(null);
+
+	$effect(() => {
+		if ($USER_DATA) {
+			fetchRewardStatus();
+			const interval = setInterval(() => {
+				if (rewardStatus && !rewardStatus.canClaim) {
+					fetchRewardStatus();
+				}
+			}, 60000);
+
+			return () => clearInterval(interval);
+		}
+	});
+
+	async function fetchRewardStatus() {
+		try {
+			const response = await fetch('/api/rewards/claim');
+			if (response.ok) {
+				rewardStatus = await response.json();
+				error = null;
+			} else {
+				error = 'Failed to fetch reward status';
+			}
+		} catch (err) {
+			error = 'Network error';
+			console.error('Error fetching reward status:', err);
+		}
+	}
+
+	async function claimReward() {
+		if (!rewardStatus?.canClaim || claimState === 'loading') return;
+
+		claimState = 'loading';
+		error = null;
+
+		try {
+			const response = await fetch('/api/rewards/claim', {
+				method: 'POST'
+			});
+
+			if (response.ok) {
+				const result = await response.json();
+				claimState = 'success';
+
+				toast.success(`Daily reward claimed! +$${formatCurrency(result.rewardAmount)}`, {
+					description:
+						rewardStatus.loginStreak > 0
+							? `Login streak: ${rewardStatus.loginStreak} days 🔥`
+							: undefined,
+					action: {
+						label: 'View Portfolio',
+						onClick: () => {
+							goto('/portfolio');
+						}
+					}
+				});
+
+				if ($USER_DATA) {
+					await fetchPortfolioData();
+				}
+
+				await fetchRewardStatus();
+
+				setTimeout(() => {
+					claimState = 'idle';
+				}, 1000);
+			} else {
+				const errorData = await response.json();
+				if (response.status === 429 && errorData.timeRemaining) {
+					await fetchRewardStatus();
+
+					const hours = Math.floor(errorData.timeRemaining / (60 * 60 * 1000));
+					const minutes = Math.floor((errorData.timeRemaining % (60 * 60 * 1000)) / (60 * 1000));
+					const timeText = hours > 0 ? `${hours}h ${minutes}m` : `${minutes}m`;
+
+					const streakDescription =
+						rewardStatus?.loginStreak > 0
+							? `Login streak: ${rewardStatus.loginStreak} days 🔥. Next reward available in ${timeText}. Come back later!`
+							: `Next reward available in ${timeText}. Come back later!`;
+
+					toast.info('Daily reward on cooldown', {
+						description: streakDescription
+					});
+				} else {
+					error = errorData.error || errorData.message || 'Failed to claim reward';
+					toast.error('Failed to claim reward');
+				}
+			}
+		} catch (err) {
+			error = 'Network error';
+			toast.error('Network error', {
+				description: 'Please check your connection and try again.'
+			});
+			console.error('Error claiming reward:', err);
+		} finally {
+			if (claimState !== 'success') {
+				claimState = 'idle';
+			}
+		}
+	}
+
+	function formatTimeRemaining(timeMs: number): string {
+		const hours = Math.floor(timeMs / (60 * 60 * 1000));
+		const minutes = Math.floor((timeMs % (60 * 60 * 1000)) / (60 * 1000));
+
+		if (hours > 0) {
+			return `${hours}h ${minutes}m`;
+		}
+		return `${minutes}m`;
+	}
+
+	function formatCurrency(value: number): string {
+		return value.toLocaleString('en-US', {
+			minimumFractionDigits: 0,
+			maximumFractionDigits: 0
+		});
+	}
+</script>
+
+{#if $USER_DATA && rewardStatus}
+	<Button
+		onclick={claimReward}
+		disabled={claimState === 'loading' || !rewardStatus.canClaim}
+		class="w-full transition-all duration-300"
+		size="sm"
+		variant={claimState === 'success' ? 'secondary' : rewardStatus.canClaim ? 'default' : 'outline'}
+	>
+		{#if claimState === 'loading'}
+			<div class="h-4 w-4 animate-spin rounded-full border-b-2 border-current"></div>
+			<span>Claiming...</span>
+		{:else if claimState === 'success'}
+			<CheckCircle class="h-4 w-4" />
+			<span>Claimed!</span>
+		{:else if rewardStatus.canClaim}
+			<Gift class="h-4 w-4" />
+			<span>Claim ${formatCurrency(rewardStatus.rewardAmount)}</span>
+		{:else}
+			<Clock class="h-4 w-4" />
+			<span>Next in {formatTimeRemaining(rewardStatus.timeRemaining)}</span>
+		{/if}
+	</Button>
+{/if}

website/src/lib/components/self/ProfileBadges.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { UserProfile } from '$lib/types/user-profile';
 	import SilentBadge from './SilentBadge.svelte';
-	import { Hash, Hammer } from 'lucide-svelte';
+	import { Hash, Hammer, Flame } from 'lucide-svelte';
 
 	let {
 		user,
@@ -16,10 +16,13 @@
 	let badgeClass = $derived(size === 'sm' ? 'text-xs' : '');
 </script>
 
-<div class="flex items-center">
+<div class="flex items-center gap-1">
 	{#if showId}
 		<SilentBadge icon={Hash} class="text-muted-foreground {badgeClass}" text="#{user.id} to join" />
 	{/if}
+	{#if user.loginStreak && user.loginStreak > 1}
+		<SilentBadge icon={Flame} text="{user.loginStreak} day streak" class="text-orange-500 {badgeClass}" />
+	{/if}
 	{#if user.isAdmin}
 		<SilentBadge icon={Hammer} text="Admin" class="text-primary {badgeClass}" />
 	{/if}

website/src/lib/server/db/schema.ts

@@ -19,6 +19,13 @@ export const user = pgTable("user", {
 	}).notNull().default("10000.00000000"), // 10,000 *BUSS
 	bio: varchar("bio", { length: 160 }).default("Hello am 48 year old man from somalia. Sorry for my bed england. I selled my wife for internet connection for play “conter stirk”"),
 	username: varchar("username", { length: 30 }).notNull().unique(),
+
+	lastRewardClaim: timestamp("last_reward_claim", { withTimezone: true }),
+	totalRewardsClaimed: decimal("total_rewards_claimed", {
+		precision: 20,
+		scale: 8,
+	}).notNull().default("0.00000000"),
+	loginStreak: integer("login_streak").notNull().default(0)
 });
 
 export const session = pgTable("session", {

website/src/lib/types/user-profile.ts

@@ -8,6 +8,7 @@ export interface UserProfile {
 	baseCurrencyBalance: number;
 	isAdmin: boolean;
 	totalPortfolioValue: number;
+	loginStreak: number;
 }
 
 export interface UserStats {