+
-
+
-
diff --git a/components/lottery/auth/ProtectedRoute.tsx b/components/lottery/auth/ProtectedRoute.tsx
index 889f8b8..76cdb05 100644
--- a/components/lottery/auth/ProtectedRoute.tsx
+++ b/components/lottery/auth/ProtectedRoute.tsx
@@ -1,24 +1,41 @@
'use client';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { useLotteryAuth } from '@/store/useLotteryAuth';
+import { Queries } from '@/api/queries';
-interface ProtectedRouteProps {
- children: React.ReactNode;
-}
-
-const ProtectedRoute = ({ children }: ProtectedRouteProps) => {
+const ProtectedRoute = ({ children }: { children: React.ReactNode }) => {
const router = useRouter();
- const { isAuthenticated } = useLotteryAuth();
+ const { isAuthenticated, phone, code, setAuth } = useLotteryAuth();
+ const [isLoading, setIsLoading] = useState(true);
useEffect(() => {
- if (!isAuthenticated) {
- router.replace('/lottery/auth');
- }
- }, [isAuthenticated, router]);
+ const checkAuth = async () => {
+ // First, check if we have credentials in localStorage
+ if (phone && code) {
+ try {
+ // Try to authenticate with stored credentials
+ const response = await Queries.authenticateLottery(phone, code);
+ setAuth(response, phone, code);
+ setIsLoading(false);
+ return; // Exit early if authentication successful
+ } catch (err) {
+ console.error('Authentication failed:', err);
+ // Only redirect if API request fails
+ router.replace('/lottery/auth');
+ }
+ } else {
+ // Only redirect if no credentials found
+ router.replace('/lottery/auth');
+ }
+ };
- if (!isAuthenticated) {
+ checkAuth();
+ }, []);
+
+ // Show nothing while checking auth
+ if (isLoading) {
return null;
}
diff --git a/components/lottery/slotCounter/LotterySlotCounter.tsx b/components/lottery/slotCounter/LotterySlotCounter.tsx
index 5f34d1c..e598790 100644
--- a/components/lottery/slotCounter/LotterySlotCounter.tsx
+++ b/components/lottery/slotCounter/LotterySlotCounter.tsx
@@ -1,27 +1,24 @@
-"use client";
-import Image from "next/image";
-import React, { useEffect, useState } from "react";
-import SlotCounter from "react-slot-counter";
-import { useMediaQuery } from "usehooks-ts";
+'use client';
+import Image from 'next/image';
+import React, { useEffect, useState } from 'react';
+import SlotCounter from 'react-slot-counter';
+import { useMediaQuery } from 'usehooks-ts';
interface LotterySlotCounterProps {
numberString: string;
isAnimating: boolean;
}
-const LotterySlotCounter = ({
- numberString,
- isAnimating,
-}: LotterySlotCounterProps) => {
+const LotterySlotCounter = ({ numberString, isAnimating }: LotterySlotCounterProps) => {
const [formattedNumber, setFormattedNumber] = useState(numberString);
useEffect(() => {
- const formatted = numberString.replace(/-/g, ",");
+ const formatted = numberString.replace(/-/g, ',');
setFormattedNumber(formatted);
}, [numberString]);
- const tablet = useMediaQuery("(max-width: 769px)");
- const mobile = useMediaQuery("(max-width: 426px)");
+ const tablet = useMediaQuery('(max-width: 769px)');
+ const mobile = useMediaQuery('(max-width: 426px)');
return (
@@ -65,31 +62,29 @@ const LotterySlotCounter = ({
className="flex items-center h-fit md:max-w-[1132px] sm:max-w-[640px] max-w-[324px] w-full justify-center text-white md:py-4 md:px-6 rounded-full overflow-y-hidden overflow-x-visible relative border-4 border-lightPrimary"
style={{
background:
- "linear-gradient(180deg, #454673 0%, #575992 10.5%, #575992 90%, #454673 100%)",
- boxShadow: "0px 4px 4px 0px #00000040",
- }}
- >
+ 'linear-gradient(180deg, #454673 0%, #575992 10.5%, #575992 90%, #454673 100%)',
+ boxShadow: '0px 4px 4px 0px #00000040',
+ }}>
{/* Highlight */}
+ 'linear-gradient(180deg, rgba(87, 89, 146, 0) 0%, #7274AB 50%, rgba(87, 89, 146, 0) 100%)',
+ }}>
diff --git a/components/lottery/winners/LotteryWinnersList.tsx b/components/lottery/winners/LotteryWinnersList.tsx
index 879fdfa..1f57c43 100644
--- a/components/lottery/winners/LotteryWinnersList.tsx
+++ b/components/lottery/winners/LotteryWinnersList.tsx
@@ -1,16 +1,9 @@
-import {
- LotteryWinnerData,
- LotteryWinnerDataSimplified,
-} from "@/typings/lottery/lottery.types";
-import LotteryWinner from "./LotteryWinner";
-import { motion, AnimatePresence } from "framer-motion";
-import { v4 } from "uuid";
+import { LotteryWinnerData, LotteryWinnerDataSimplified } from '@/typings/lottery/lottery.types';
+import LotteryWinner from './LotteryWinner';
+import { motion, AnimatePresence } from 'framer-motion';
+import { v4 } from 'uuid';
-const LotteryWinnersList = ({
- winners,
-}: {
- winners: LotteryWinnerDataSimplified[];
-}) => {
+const LotteryWinnersList = ({ winners }: { winners: LotteryWinnerDataSimplified[] }) => {
return (