From cb204d8db376377b9d3b36af562d4cb9ed047369 Mon Sep 17 00:00:00 2001
From: drakkomaximo <andres.villanueva.tabares@gmail.com>
Date: Wed, 1 Oct 2025 15:00:20 -0500
Subject: [PATCH 1/8] First part of styles

---
 packages/nextjs/app/dapp/layout.tsx           |   7 +-
 packages/nextjs/components/Navbar.tsx         | 293 ++++++------------
 .../components/landing-page/layout/hader.tsx  |  20 +-
 .../AddressInfoDropdown.tsx                   |  63 ++--
 .../CustomConnectButton/ConnectModal.tsx      |  10 +-
 .../WrongNetworkDropdown.tsx                  |  15 +-
 .../nextjs/components/ui/StarkLottoLogo.tsx   |  57 ++++
 7 files changed, 213 insertions(+), 252 deletions(-)
 create mode 100644 packages/nextjs/components/ui/StarkLottoLogo.tsx

diff --git a/packages/nextjs/app/dapp/layout.tsx b/packages/nextjs/app/dapp/layout.tsx
index f5d4994f..478479be 100644
--- a/packages/nextjs/app/dapp/layout.tsx
+++ b/packages/nextjs/app/dapp/layout.tsx
@@ -20,7 +20,10 @@ export default function DappLayout({
   } | null>(null);
 
   return (
-    <div className="flex min-h-screen flex-col bg-background text-foreground overflow-x-hidden">
+    <div className="flex min-h-screen flex-col bg-[#101326] text-white overflow-x-hidden">
+      {/* Fondo degradado igual que landing page */}
+      <div className="absolute inset-0 -z-30 bg-gradient-to-b from-heroDarker via-heroDark to-heroDark" />
+
       <AnimatedBackground />
       <FloatingCoins />
       <Navbar
@@ -35,7 +38,7 @@ export default function DappLayout({
           onClose={() => setNotification(null)}
         />
       )}
-      <main className="flex-1 pt-24 relative z-10">{children}</main>
+      <main className="flex-1 pt-24 relative z-10 container mx-auto max-w-6xl px-4 sm:px-6">{children}</main>
       <ScrollToTop />
     </div>
   );
diff --git a/packages/nextjs/components/Navbar.tsx b/packages/nextjs/components/Navbar.tsx
index 099e84ba..f6b36524 100644
--- a/packages/nextjs/components/Navbar.tsx
+++ b/packages/nextjs/components/Navbar.tsx
@@ -10,11 +10,9 @@ import {
   ArrowUpDown,
   User,
   HomeIcon,
-  Menu,
-  X,
-  Globe,
 } from "lucide-react";
 import { CustomConnectButton } from "./scaffold-stark/CustomConnectButton";
+import { StarkLottoLogo } from "./ui/StarkLottoLogo";
 import { useAccount } from "@starknet-react/core";
 import { useTranslation } from "react-i18next";
 import { useLanguage } from "../hooks/useLanguage";
@@ -65,35 +63,18 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
         transition={{ duration: 0.6, ease: "easeOut" }}
       >
         {/* Gradient Border */}
-        <div className="h-[1px] w-full bg-gradient-to-r from-transparent via-[#00FFA3]/50 to-transparent"></div>
+        <div className="h-[1px] w-full bg-gradient-to-r from-transparent via-starkYellow/50 to-transparent"></div>
 
         {/* Navbar Content */}
         <div className="bg-black/20 backdrop-blur-sm">
           <div className="max-w-7xl mx-auto px-4">
             <div className="flex items-center justify-between h-14">
               {/* Logo */}
-              <Link href="/" className="flex items-center gap-2 group">
-                <motion.div
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
-                  className="relative"
-                >
-                  <div className="absolute inset-0 bg-[#00FFA3]/20 rounded-full blur-md group-hover:blur-lg transition-all"></div>
-                  <Image
-                    src="/Starklotto.png"
-                    alt="StarkLotto Logo"
-                    width={32}
-                    height={32}
-                    className="rounded-full relative z-10"
-                  />
-                </motion.div>
-                <motion.span
-                  className="text-base font-bold bg-clip-text text-transparent bg-gradient-to-r from-[#00FFA3] to-white"
-                  whileHover={{ scale: 1.05 }}
-                >
-                  StarkLotto
-                </motion.span>
-              </Link>
+              <StarkLottoLogo
+                variant="dapp"
+                href="/"
+                className=""
+              />
 
               {/* Desktop Navigation */}
               <div className="hidden md:flex items-center gap-8">
@@ -106,10 +87,9 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                         whileHover={{ scale: 1.05 }}
                         whileTap={{ scale: 0.95 }}
                       >
-                        <Icon className="h-3.5 w-3.5 text-[#00FFA3] group-hover:text-[#00FFA3] transition-colors" />
                         <span className="relative text-sm">
                           {t(labelKey)}
-                          <span className="absolute inset-x-0 -bottom-1 h-px bg-gradient-to-r from-[#00FFA3]/0 via-[#00FFA3]/70 to-[#00FFA3]/0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
+                          <span className="absolute inset-x-0 -bottom-1 h-px bg-gradient-to-r from-starkYellow/0 via-starkYellow/70 to-starkYellow/0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
                         </span>
                       </motion.div>
                     </Link>
@@ -124,13 +104,13 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                       whileTap={{ scale: 0.98 }}
                     >
                       {/* Animated background glow */}
-                      <div className="absolute -inset-1 bg-gradient-to-r from-[#8A3FFC] via-[#00FFA3] to-[#9B51E0] rounded-lg blur-lg group-hover:blur-xl opacity-70 group-hover:opacity-100 transition-all duration-500 animate-gradient-xy"></div>
+                      <div className="absolute -inset-1 bg-gradient-to-r from-[#8A3FFC] via-starkYellow to-[#9B51E0] rounded-lg blur-lg group-hover:blur-xl opacity-70 group-hover:opacity-100 transition-all duration-500 animate-gradient-xy"></div>
 
                       {/* Button content */}
-                      <div className="relative px-4 py-2 bg-black rounded-lg flex items-center gap-2 border border-[#00FFA3]/30">
-                        <div className="absolute inset-0 bg-gradient-to-r from-[#8A3FFC]/20 to-[#00FFA3]/20 rounded-lg"></div>
+                      <div className="relative px-4 py-2 bg-black rounded-lg flex items-center gap-2 border border-starkYellow/30">
+                        <div className="absolute inset-0 bg-gradient-to-r from-[#8A3FFC]/20 to-starkYellow/20 rounded-lg"></div>
 
-                        <span className="font-semibold text-sm bg-gradient-to-r from-[#00FFA3] to-white bg-clip-text text-transparent">
+                        <span className="font-semibold text-sm bg-gradient-to-r from-starkYellow to-white bg-clip-text text-transparent">
                           {t("home.hero.playNow")}
                         </span>
 
@@ -147,22 +127,21 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                           }}
                         >
                           <span className="text-base">🎲</span>
-                          <div className="absolute -inset-1 bg-[#00FFA3] rounded-full blur-md opacity-50 animate-pulse"></div>
+                          <div className="absolute -inset-1 bg-starkYellow rounded-full blur-md opacity-50 animate-pulse"></div>
                         </motion.div>
                       </div>
                     </motion.button>
 
-                    {menuItems.slice(2).map(({ id, labelKey, icon: Icon }) => (
+                    {menuItems.slice(2).map(({ id, labelKey }) => (
                       <Link key={id} href={id}>
                         <motion.div
                           className="text-white/80 hover:text-white transition-colors flex items-center gap-1.5 group cursor-pointer"
                           whileHover={{ scale: 1.05 }}
                           whileTap={{ scale: 0.95 }}
                         >
-                          <Icon className="h-3.5 w-3.5 text-[#00FFA3] group-hover:text-[#00FFA3] transition-colors" />
                           <span className="relative text-sm">
                             {t(labelKey)}
-                            <span className="absolute inset-x-0 -bottom-1 h-px bg-gradient-to-r from-[#00FFA3]/0 via-[#00FFA3]/70 to-[#00FFA3]/0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
+                            <span className="absolute inset-x-0 -bottom-1 h-px bg-gradient-to-r from-starkYellow/0 via-starkYellow/70 to-starkYellow/0 scale-x-0 group-hover:scale-x-100 transition-transform duration-300" />
                           </span>
                         </motion.div>
                       </Link>
@@ -173,135 +152,77 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
 
               {/* Right Side Actions */}
               <div className="flex items-center gap-3">
-                {/* Language Switcher */}
+                {/* Language Switcher - Modernized */}
                 <div className="relative" ref={languageRef}>
                   <motion.button
                     onClick={() => setIsLanguageOpen(!isLanguageOpen)}
-                    className="flex items-center justify-center w-8 h-8 text-white/80 hover:text-white transition-colors rounded-lg hover:bg-[#00FFA3]/10 group relative"
-                    whileHover={{ scale: 1.05 }}
-                    whileTap={{ scale: 0.95 }}
+                    className="group relative flex items-center gap-2 px-3 py-2 rounded-xl border border-white/10 bg-white/5 backdrop-blur-md hover:bg-starkYellow/10 hover:border-starkYellow/30 transition-all duration-300"
+                    whileHover={{ scale: 1.02, boxShadow: "0 4px 12px rgba(255,214,0,0.2)" }}
+                    whileTap={{ scale: 0.98 }}
                   >
-                    <Globe className="h-4 w-4 text-[#00FFA3] group-hover:text-[#00FFA3] transition-colors" />
-                    <div className="absolute -top-1 -right-1 w-3 h-3 bg-[#00FFA3] rounded-full flex items-center justify-center">
-                      <span className="text-[8px] font-bold text-black">
-                        {currentLanguage === "en"
-                          ? "EN"
-                          : currentLanguage === "es"
-                            ? "ES"
-                            : currentLanguage === "fr"
-                              ? "FR"
-                              : "PT"}
-                      </span>
-                    </div>
+                    <span className="text-sm font-medium text-white group-hover:text-starkYellow transition-colors">
+                      {currentLanguage === "en"
+                        ? "EN"
+                        : currentLanguage === "es"
+                          ? "ES"
+                          : currentLanguage === "fr"
+                            ? "FR"
+                            : "PT"}
+                    </span>
+                    <motion.div
+                      animate={{ rotate: isLanguageOpen ? 180 : 0 }}
+                      transition={{ duration: 0.2 }}
+                      className="w-3 h-3"
+                    >
+                      <svg className="w-full h-full text-starkYellow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                      </svg>
+                    </motion.div>
                   </motion.button>
 
-                  {/* Language Dropdown */}
+                  {/* Language Dropdown - Modernized */}
                   <AnimatePresence>
                     {isLanguageOpen && (
                       <motion.div
-                        className="absolute top-full right-0 mt-2 bg-black/95 backdrop-blur-md border border-[#00FFA3]/20 rounded-lg shadow-lg min-w-[120px] z-50"
+                        className="absolute top-full right-0 mt-2 rounded-xl border border-white/10 bg-white/5 backdrop-blur-md shadow-xl min-w-[160px] z-50 overflow-hidden"
                         initial={{ opacity: 0, y: -10, scale: 0.95 }}
                         animate={{ opacity: 1, y: 0, scale: 1 }}
                         exit={{ opacity: 0, y: -10, scale: 0.95 }}
                         transition={{ duration: 0.2 }}
+                        style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
                       >
-                        <div className="py-1">
-                          <motion.button
-                            onClick={() => {
-                              changeLanguage("en");
-                              setIsLanguageOpen(false);
-                            }}
-                            className={`w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-[#00FFA3]/10 transition-colors ${
-                              currentLanguage === "en"
-                                ? "text-[#00FFA3]"
-                                : "text-white/80"
-                            }`}
-                            whileHover={{ x: 4 }}
-                            whileTap={{ scale: 0.98 }}
-                          >
-                            <span>🇺🇸</span>
-                            <span className="text-sm">English</span>
-                            {currentLanguage === "en" && (
-                              <motion.div
-                                className="ml-auto w-2 h-2 bg-[#00FFA3] rounded-full"
-                                initial={{ scale: 0 }}
-                                animate={{ scale: 1 }}
-                                transition={{ duration: 0.2 }}
-                              />
-                            )}
-                          </motion.button>
-                          <motion.button
-                            onClick={() => {
-                              changeLanguage("es");
-                              setIsLanguageOpen(false);
-                            }}
-                            className={`w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-[#00FFA3]/10 transition-colors ${
-                              currentLanguage === "es"
-                                ? "text-[#00FFA3]"
-                                : "text-white/80"
-                            }`}
-                            whileHover={{ x: 4 }}
-                            whileTap={{ scale: 0.98 }}
-                          >
-                            <span>🇪🇸</span>
-                            <span className="text-sm">Español</span>
-                            {currentLanguage === "es" && (
-                              <motion.div
-                                className="ml-auto w-2 h-2 bg-[#00FFA3] rounded-full"
-                                initial={{ scale: 0 }}
-                                animate={{ scale: 1 }}
-                                transition={{ duration: 0.2 }}
-                              />
-                            )}
-                          </motion.button>
-                          <motion.button
-                            onClick={() => {
-                              changeLanguage("fr");
-                              setIsLanguageOpen(false);
-                            }}
-                            className={`w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-[#00FFA3]/10 transition-colors ${
-                              currentLanguage === "fr"
-                                ? "text-[#00FFA3]"
-                                : "text-white/80"
-                            }`}
-                            whileHover={{ x: 4 }}
-                            whileTap={{ scale: 0.98 }}
-                          >
-                            <span>🇫🇷</span>
-                            <span className="text-sm">Français</span>
-                            {currentLanguage === "fr" && (
-                              <motion.div
-                                className="ml-auto w-2 h-2 bg-[#00FFA3] rounded-full"
-                                initial={{ scale: 0 }}
-                                animate={{ scale: 1 }}
-                                transition={{ duration: 0.2 }}
-                              />
-                            )}
-                          </motion.button>
-                          <motion.button
-                            onClick={() => {
-                              changeLanguage("pt");
-                              setIsLanguageOpen(false);
-                            }}
-                            className={`w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-[#00FFA3]/10 transition-colors ${
-                              currentLanguage === "pt"
-                                ? "text-[#00FFA3]"
-                                : "text-white/80"
-                            }`}
-                            whileHover={{ x: 4 }}
-                            whileTap={{ scale: 0.98 }}
-                          >
-                            <span>🇧🇷</span>
-                            <span className="text-sm">Português</span>
-                            {currentLanguage === "pt" && (
-                              <motion.div
-                                className="ml-auto w-2 h-2 bg-[#00FFA3] rounded-full"
-                                initial={{ scale: 0 }}
-                                animate={{ scale: 1 }}
-                                transition={{ duration: 0.2 }}
-                              />
-                            )}
-                          </motion.button>
+                        <div className="py-2">
+                          {[
+                            { code: "en", flag: "🇺🇸", name: "English" },
+                            { code: "es", flag: "🇪🇸", name: "Español" },
+                            { code: "fr", flag: "🇫🇷", name: "Français" },
+                            { code: "pt", flag: "🇧🇷", name: "Português" }
+                          ].map((lang) => (
+                            <motion.button
+                              key={lang.code}
+                              onClick={() => {
+                                changeLanguage(lang.code as any);
+                                setIsLanguageOpen(false);
+                              }}
+                              className={`w-full flex items-center gap-3 px-4 py-2.5 text-left hover:bg-starkYellow/10 transition-all duration-200 ${currentLanguage === lang.code
+                                ? "text-starkYellow bg-starkYellow/5"
+                                : "text-white/80 hover:text-white"
+                                }`}
+                              whileHover={{ x: 4 }}
+                              whileTap={{ scale: 0.98 }}
+                            >
+                              <span className="text-lg">{lang.flag}</span>
+                              <span className="text-sm font-medium flex-1">{lang.name}</span>
+                              {currentLanguage === lang.code && (
+                                <motion.div
+                                  className="w-2 h-2 bg-starkYellow rounded-full"
+                                  initial={{ scale: 0 }}
+                                  animate={{ scale: 1 }}
+                                  transition={{ duration: 0.2 }}
+                                />
+                              )}
+                            </motion.button>
+                          ))}
                         </div>
                       </motion.div>
                     )}
@@ -313,16 +234,13 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                 {/* Mobile Menu Button */}
                 <motion.button
                   onClick={() => setIsMenuOpen(!isMenuOpen)}
-                  className="md:hidden flex items-center justify-center w-8 h-8 relative group"
-                  whileHover={{ scale: 1.05 }}
-                  whileTap={{ scale: 0.95 }}
+                  className="md:hidden flex items-center justify-center px-3 py-2 rounded-xl border border-white/10 bg-white/5 backdrop-blur-md hover:bg-starkYellow/10 hover:border-starkYellow/30 transition-all duration-300"
+                  whileHover={{ scale: 1.02 }}
+                  whileTap={{ scale: 0.98 }}
                 >
-                  <div className="absolute inset-0 bg-[#00FFA3]/10 rounded-full opacity-0 group-hover:opacity-100 transition-opacity" />
-                  {isMenuOpen ? (
-                    <X className="h-5 w-5 text-[#00FFA3] group-hover:text-[#00FFA3] transition-colors relative z-10" />
-                  ) : (
-                    <Menu className="h-5 w-5 text-[#00FFA3] group-hover:text-[#00FFA3] transition-colors relative z-10" />
-                  )}
+                  <span className="text-sm font-medium text-white group-hover:text-starkYellow transition-colors">
+                    {isMenuOpen ? "Close" : "Menu"}
+                  </span>
                 </motion.button>
               </div>
             </div>
@@ -339,17 +257,16 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
             animate={{ opacity: 1, y: 0 }}
             exit={{ opacity: 0, y: -10 }}
           >
-            <div className="bg-black/95 backdrop-blur-md border-t border-[#00FFA3]/20">
+            <div className="bg-black/95 backdrop-blur-md border-t border-starkYellow/20">
               <div className="container mx-auto px-4">
                 <div className="py-4 space-y-3">
                   {menuItems.map(({ id, labelKey, icon: Icon }) => (
                     <Link key={id} href={id}>
                       <motion.div
                         onClick={() => setIsMenuOpen(false)}
-                        className="flex items-center gap-3 w-full px-4 py-2.5 text-white/80 hover:text-white hover:bg-[#00FFA3]/10 rounded-lg transition-colors group text-sm cursor-pointer"
+                        className="flex items-center gap-3 w-full px-4 py-2.5 text-white/80 hover:text-white hover:bg-starkYellow/10 rounded-lg transition-colors group text-sm cursor-pointer"
                         whileTap={{ scale: 0.98 }}
                       >
-                        <Icon className="h-4 w-4 text-[#00FFA3] group-hover:text-[#00FFA3] transition-colors" />
                         {t(labelKey)}
                       </motion.div>
                     </Link>
@@ -363,13 +280,13 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                         whileTap={{ scale: 0.98 }}
                       >
                         {/* Animated background glow */}
-                        <div className="absolute -inset-1 bg-gradient-to-r from-[#8A3FFC] via-[#00FFA3] to-[#9B51E0] rounded-lg blur-lg group-hover:blur-xl opacity-70 group-hover:opacity-100 transition-all duration-500 animate-gradient-xy"></div>
+                        <div className="absolute -inset-1 bg-gradient-to-r from-[#8A3FFC] via-starkYellow to-[#9B51E0] rounded-lg blur-lg group-hover:blur-xl opacity-70 group-hover:opacity-100 transition-all duration-500 animate-gradient-xy"></div>
 
                         {/* Button content */}
-                        <div className="relative px-4 py-2 bg-black rounded-lg flex items-center justify-center gap-2 border border-[#00FFA3]/30">
-                          <div className="absolute inset-0 bg-gradient-to-r from-[#8A3FFC]/20 to-[#00FFA3]/20 rounded-lg"></div>
+                        <div className="relative px-4 py-2 bg-black rounded-lg flex items-center justify-center gap-2 border border-starkYellow/30">
+                          <div className="absolute inset-0 bg-gradient-to-r from-[#8A3FFC]/20 to-starkYellow/20 rounded-lg"></div>
 
-                          <span className="font-semibold text-sm bg-gradient-to-r from-[#00FFA3] to-white bg-clip-text text-transparent">
+                          <span className="font-semibold text-sm bg-gradient-to-r from-starkYellow to-white bg-clip-text text-transparent">
                             {t("home.hero.playNow")}
                           </span>
 
@@ -386,59 +303,55 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                             }}
                           >
                             <span className="text-base">🎲</span>
-                            <div className="absolute -inset-1 bg-[#00FFA3] rounded-full blur-md opacity-50 animate-pulse"></div>
+                            <div className="absolute -inset-1 bg-starkYellow rounded-full blur-md opacity-50 animate-pulse"></div>
                           </motion.div>
                         </div>
                       </motion.button>
                     </div>
                   )}
-                  <div className="px-4 pt-3 border-t border-[#00FFA3]/20">
+                  <div className="px-4 pt-3 border-t border-starkYellow/20">
                     <CustomConnectButton />
                   </div>
-                  <div className="px-4 pt-3 border-t border-[#00FFA3]/20">
+                  <div className="px-4 pt-3 border-t border-starkYellow/20">
                     <div className="flex items-center justify-between">
                       <span className="text-white/60 text-sm">Language</span>
                       <div className="flex gap-2">
                         <motion.button
                           onClick={() => changeLanguage("en")}
-                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
-                            currentLanguage === "en"
-                              ? "bg-[#00FFA3] text-black"
-                              : "bg-white/10 text-white/80 hover:bg-white/20"
-                          }`}
+                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${currentLanguage === "en"
+                            ? "bg-starkYellow text-black"
+                            : "bg-white/10 text-white/80 hover:bg-white/20"
+                            }`}
                           whileTap={{ scale: 0.95 }}
                         >
                           🇺🇸 EN
                         </motion.button>
                         <motion.button
                           onClick={() => changeLanguage("es")}
-                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
-                            currentLanguage === "es"
-                              ? "bg-[#00FFA3] text-black"
-                              : "bg-white/10 text-white/80 hover:bg-white/20"
-                          }`}
+                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${currentLanguage === "es"
+                            ? "bg-starkYellow text-black"
+                            : "bg-white/10 text-white/80 hover:bg-white/20"
+                            }`}
                           whileTap={{ scale: 0.95 }}
                         >
                           🇪🇸 ES
                         </motion.button>
                         <motion.button
                           onClick={() => changeLanguage("fr")}
-                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
-                            currentLanguage === "fr"
-                              ? "bg-[#00FFA3] text-black"
-                              : "bg-white/10 text-white/80 hover:bg-white/20"
-                          }`}
+                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${currentLanguage === "fr"
+                            ? "bg-starkYellow text-black"
+                            : "bg-white/10 text-white/80 hover:bg-white/20"
+                            }`}
                           whileTap={{ scale: 0.95 }}
                         >
                           🇫🇷 FR
                         </motion.button>
                         <motion.button
                           onClick={() => changeLanguage("pt")}
-                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
-                            currentLanguage === "pt"
-                              ? "bg-[#00FFA3] text-black"
-                              : "bg-white/10 text-white/80 hover:bg-white/20"
-                          }`}
+                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${currentLanguage === "pt"
+                            ? "bg-starkYellow text-black"
+                            : "bg-white/10 text-white/80 hover:bg-white/20"
+                            }`}
                           whileTap={{ scale: 0.95 }}
                         >
                           🇧🇷 PT
diff --git a/packages/nextjs/components/landing-page/layout/hader.tsx b/packages/nextjs/components/landing-page/layout/hader.tsx
index 35615d68..c56afcfb 100644
--- a/packages/nextjs/components/landing-page/layout/hader.tsx
+++ b/packages/nextjs/components/landing-page/layout/hader.tsx
@@ -3,6 +3,7 @@ import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import { Menu, X, ChevronRight } from "lucide-react";
 import { Button } from "../../ui/button";
+import { StarkLottoLogo } from "../../ui/StarkLottoLogo";
 import { useRouter } from "next/navigation";
 
 const navLinks = [
@@ -48,21 +49,12 @@ export default function Header() {
       >
         <div className="container mx-auto relative flex h-20 items-center justify-center px-6 lg:px-8">
           {/* Logo */}
-          <button
-            onClick={() => goTo("#hero")}
-            className="absolute left-6 flex items-center space-x-2"
-          >
-            <img
-              src="/Logo-sin-texto.png"
-              alt="Icono StarkLotto"
-              className="h-14 w-auto lg:h-16"
+          <div className="absolute left-6">
+            <StarkLottoLogo
+              variant="landing"
+              onClick={() => goTo("#hero")}
             />
-            <img
-              src="/Logo_Sin_Texto_Transparente.png"
-              alt="StarkLotto Logo"
-              className="h-14 w-auto lg:h-16"
-            />
-          </button>
+          </div>
 
           {/* Desktop Nav */}
           <nav className="hidden lg:flex lg:items-center lg:space-x-10">
diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx
index cbca68f6..ae3cf33d 100644
--- a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx
+++ b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx
@@ -84,11 +84,11 @@ export const AddressInfoDropdown = ({
       <details ref={dropdownRef} className="dropdown dropdown-end leading-3">
         <summary
           tabIndex={0}
-          className="btn bg-transparent btn-sm px-2 py-[0.35rem] dropdown-toggle gap-0 !h-auto border border-[#5c4fe5] "
+          className="group relative flex items-center gap-2 px-3 py-2 rounded-xl border border-white/10 bg-white/5 backdrop-blur-md hover:bg-starkYellow/10 hover:border-starkYellow/30 transition-all duration-300 cursor-pointer"
         >
           <div className="hidden [@media(min-width:412px)]:block">
             {getStarknetPFPIfExists(profile?.profilePicture) &&
-            !profileImageError ? (
+              !profileImageError ? (
               <NextImage
                 src={profile?.profilePicture || ""}
                 alt="Profile Picture"
@@ -110,27 +110,28 @@ export const AddressInfoDropdown = ({
               <BlockieAvatar address={address} size={28} ensImage={ensAvatar} />
             )}
           </div>
-          <span className="ml-2 mr-2 text-sm">
+          <span className="text-sm font-medium text-white group-hover:text-starkYellow transition-colors">
             {isENS(displayName)
               ? displayName
               : profile?.name ||
-                address?.slice(0, 6) + "..." + address?.slice(-4)}
+              address?.slice(0, 6) + "..." + address?.slice(-4)}
           </span>
-          <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0 sm:block hidden" />
+          <ChevronDownIcon className="h-4 w-4 text-starkYellow group-hover:text-starkYellow-light transition-colors" />
         </summary>
         <ul
           tabIndex={0}
-          className={`dropdown-content menu z-[2] p-2 mt-2 rounded-[5px] gap-1 border border-[#5c4fe5] bg-base-100`}
+          className="dropdown-content menu z-[2] p-2 mt-2 rounded-xl border border-white/10 bg-white/5 backdrop-blur-md shadow-xl gap-1"
+          style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
         >
           <NetworkOptions hidden={!selectingNetwork} />
           <li className={selectingNetwork ? "hidden" : ""}>
             {addressCopied ? (
-              <div className="btn-sm !rounded-xl flex gap-3 py-3">
+              <div className="flex items-center gap-3 px-4 py-2.5 text-left hover:bg-starkYellow/10 transition-all duration-200 text-starkYellow rounded-lg">
                 <CheckCircleIcon
-                  className="text-xl font-normal h-6 w-4 cursor-pointer ml-2 sm:ml-0"
+                  className="h-4 w-4"
                   aria-hidden="true"
                 />
-                <span className=" whitespace-nowrap">Copy address</span>
+                <span className="text-sm font-medium">Address copied!</span>
               </div>
             ) : (
               //@ts-ignore
@@ -143,12 +144,12 @@ export const AddressInfoDropdown = ({
                   }, 800);
                 }}
               >
-                <div className="btn-sm !rounded-xl flex gap-3 py-3">
+                <div className="flex items-center gap-3 px-4 py-2.5 text-left hover:bg-starkYellow/10 transition-all duration-200 text-white/80 hover:text-white cursor-pointer rounded-lg">
                   <DocumentDuplicateIcon
-                    className="text-xl font-normal h-6 w-4 cursor-pointer ml-2 sm:ml-0"
+                    className="h-4 w-4"
                     aria-hidden="true"
                   />
-                  <span className=" whitespace-nowrap">Copy address</span>
+                  <span className="text-sm font-medium">Copy address</span>
                 </div>
               </CopyToClipboard>
             )}
@@ -164,34 +165,29 @@ export const AddressInfoDropdown = ({
           </li> */}
           {chain.network != "devnet" ? (
             <li className={selectingNetwork ? "hidden" : ""}>
-              <button
-                className="menu-item btn-sm !rounded-xl flex gap-3 py-3"
-                type="button"
+              <a
+                target="_blank"
+                href={blockExplorerAddressLink}
+                rel="noopener noreferrer"
+                className="flex items-center gap-3 px-4 py-2.5 text-left hover:bg-starkYellow/10 transition-all duration-200 text-white/80 hover:text-white rounded-lg"
               >
-                <ArrowTopRightOnSquareIcon className="h-6 w-4 ml-2 sm:ml-0" />
-                <a
-                  target="_blank"
-                  href={blockExplorerAddressLink}
-                  rel="noopener noreferrer"
-                  className="whitespace-nowrap"
-                >
-                  View on Block Explorer
-                </a>
-              </button>
+                <ArrowTopRightOnSquareIcon className="h-4 w-4" />
+                <span className="text-sm font-medium">View on Block Explorer</span>
+              </a>
             </li>
           ) : null}
 
           {chain.network == "devnet" ? (
             <li className={selectingNetwork ? "hidden" : ""}>
               <button
-                className="menu-item btn-sm !rounded-xl flex gap-3 py-3"
+                className="flex items-center gap-3 px-4 py-2.5 text-left hover:bg-starkYellow/10 transition-all duration-200 text-white/80 hover:text-white rounded-lg w-full"
                 type="button"
                 onClick={() => {
                   setShowBurnerAccounts(true);
                 }}
               >
-                <UserCircleIcon className="h-6 w-4 ml-2 sm:ml-0" />
-                <span className="whitespace-nowrap">Switch Account</span>
+                <UserCircleIcon className="h-4 w-4" />
+                <span className="text-sm font-medium">Switch Account</span>
               </button>
             </li>
           ) : null}
@@ -234,11 +230,10 @@ export const AddressInfoDropdown = ({
                               className="w-full flex flex-col"
                             >
                               <button
-                                className={`${
-                                  isDarkMode
+                                className={`${isDarkMode
                                     ? "hover:bg-[#385183] border-[#385183]"
                                     : "hover:bg-gradient-light "
-                                } border rounded-md text-neutral py-[8px] pl-[10px] pr-16 flex items-center gap-4`}
+                                  } border rounded-md text-neutral py-[8px] pl-[10px] pr-16 flex items-center gap-4`}
                                 onClick={(e) => handleConnectBurner(e, ix)}
                               >
                                 <BlockieAvatar
@@ -279,12 +274,12 @@ export const AddressInfoDropdown = ({
           ) : null} */}
           <li className={selectingNetwork ? "hidden" : ""}>
             <button
-              className="menu-item text-secondary-content btn-sm !rounded-xl flex gap-3 py-3"
+              className="flex items-center gap-3 px-4 py-2.5 text-left hover:bg-red-500/10 transition-all duration-200 text-red-400 hover:text-red-300 rounded-lg w-full"
               type="button"
               onClick={() => disconnect()}
             >
-              <ArrowLeftEndOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" />{" "}
-              <span>Disconnect</span>
+              <ArrowLeftEndOnRectangleIcon className="h-4 w-4" />
+              <span className="text-sm font-medium">Disconnect</span>
             </button>
           </li>
         </ul>
diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/ConnectModal.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/ConnectModal.tsx
index 46d08451..db6a274e 100644
--- a/packages/nextjs/components/scaffold-stark/CustomConnectButton/ConnectModal.tsx
+++ b/packages/nextjs/components/scaffold-stark/CustomConnectButton/ConnectModal.tsx
@@ -69,9 +69,10 @@ const ConnectModal = () => {
     <div>
       <button
         onClick={() => setIsOpen(true)}
-        className="rounded-[18px] btn-sm font-bold px-8 bg-btn-wallet py-3 cursor-pointer"
+        className="group relative flex items-center gap-2 px-4 py-2 rounded-xl border border-white/10 bg-white/5 backdrop-blur-md hover:bg-starkYellow/10 hover:border-starkYellow/30 transition-all duration-300 font-medium"
+        style={{ boxShadow: "0 4px 12px rgba(255,214,0,0.1)" }}
       >
-        <span>{t("connect.button")}</span>
+        <span className="text-sm text-white group-hover:text-starkYellow transition-colors">{t("connect.button")}</span>
       </button>
 
       {isOpen && (
@@ -109,9 +110,8 @@ const ConnectModal = () => {
                         className="w-full flex flex-col"
                       >
                         <button
-                          className={`hover:bg-gradient-modal border rounded-md text-white py-[8px] pl-[10px] pr-16 flex items-center gap-4 ${
-                            isDarkMode ? "border-[#385183]" : ""
-                          }`}
+                          className={`hover:bg-gradient-modal border rounded-md text-white py-[8px] pl-[10px] pr-16 flex items-center gap-4 ${isDarkMode ? "border-[#385183]" : ""
+                            }`}
                           onClick={(e) => handleConnectBurner(e, ix)}
                         >
                           <BlockieAvatar
diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/WrongNetworkDropdown.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/WrongNetworkDropdown.tsx
index a3d9dec6..ee718ad9 100644
--- a/packages/nextjs/components/scaffold-stark/CustomConnectButton/WrongNetworkDropdown.tsx
+++ b/packages/nextjs/components/scaffold-stark/CustomConnectButton/WrongNetworkDropdown.tsx
@@ -12,26 +12,27 @@ export const WrongNetworkDropdown = () => {
     <div className="dropdown dropdown-end mr-2">
       <label
         tabIndex={0}
-        className="btn btn-error btn-sm dropdown-toggle gap-1"
+        className="group relative flex items-center gap-2 px-4 py-2 rounded-xl border border-red-500/30 bg-red-500/10 backdrop-blur-md hover:bg-red-500/20 hover:border-red-500/50 transition-all duration-300 font-medium cursor-pointer"
       >
-        <span>Wrong network</span>
-        <ChevronDownIcon className="h-6 w-4 ml-2 sm:ml-0" />
+        <span className="text-sm text-red-400 group-hover:text-red-300 transition-colors">Wrong network</span>
+        <ChevronDownIcon className="h-4 w-4 text-red-400 group-hover:text-red-300 transition-colors" />
       </label>
 
       <ul
         tabIndex={0}
-        className="dropdown-content menu p-2 mt-1 shadow-center shadow-accent bg-base-200 rounded-box gap-1"
+        className="dropdown-content menu p-2 mt-1 rounded-xl border border-white/10 bg-white/5 backdrop-blur-md shadow-xl gap-1"
+        style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
       >
         {/* TODO: reinstate if needed */}
         {/* <NetworkOptions /> */}
         <li>
           <button
-            className="menu-item text-error btn-sm !rounded-xl flex gap-3 py-3"
+            className="flex items-center gap-3 px-4 py-2.5 text-left hover:bg-red-500/10 transition-all duration-200 text-red-400 hover:text-red-300 rounded-lg"
             type="button"
             onClick={() => disconnect()}
           >
-            <ArrowLeftEndOnRectangleIcon className="h-6 w-4 ml-2 sm:ml-0" />
-            <span>Disconnect</span>
+            <ArrowLeftEndOnRectangleIcon className="h-4 w-4" />
+            <span className="text-sm font-medium">Disconnect</span>
           </button>
         </li>
       </ul>
diff --git a/packages/nextjs/components/ui/StarkLottoLogo.tsx b/packages/nextjs/components/ui/StarkLottoLogo.tsx
new file mode 100644
index 00000000..20b4ac68
--- /dev/null
+++ b/packages/nextjs/components/ui/StarkLottoLogo.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import { motion } from "framer-motion";
+import Link from "next/link";
+
+interface StarkLottoLogoProps {
+    variant?: "landing" | "dapp";
+    onClick?: () => void;
+    href?: string;
+    className?: string;
+}
+
+export function StarkLottoLogo({
+    variant = "landing",
+    onClick,
+    href = "/",
+    className = ""
+}: StarkLottoLogoProps) {
+    const logoContent = (
+        <div className={`flex items-center space-x-2 ${className}`}>
+            <img
+                src="/Logo-sin-texto.png"
+                alt="Icono StarkLotto"
+                className="h-14 w-auto lg:h-16"
+            />
+            <img
+                src="/Logo_Sin_Texto_Transparente.png"
+                alt="StarkLotto Logo"
+                className="h-14 w-auto lg:h-16"
+            />
+        </div>
+    );
+
+    if (onClick) {
+        return (
+            <motion.button
+                onClick={onClick}
+                className="group"
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+            >
+                {logoContent}
+            </motion.button>
+        );
+    }
+
+    return (
+        <Link href={href} className="group">
+            <motion.div
+                whileHover={{ scale: 1.02 }}
+                whileTap={{ scale: 0.98 }}
+            >
+                {logoContent}
+            </motion.div>
+        </Link>
+    );
+}

From 7d68918656156ebb2f921865a9cac3add0a4c2f2 Mon Sep 17 00:00:00 2001
From: drakkomaximo <andres.villanueva.tabares@gmail.com>
Date: Wed, 1 Oct 2025 15:26:10 -0500
Subject: [PATCH 2/8] TotalPool has been updated

---
 packages/nextjs/components/Navbar.tsx         |  15 +-
 .../nextjs/components/dashboard/pool/page.tsx | 184 +++++++++++-------
 2 files changed, 118 insertions(+), 81 deletions(-)

diff --git a/packages/nextjs/components/Navbar.tsx b/packages/nextjs/components/Navbar.tsx
index f6b36524..8b117e92 100644
--- a/packages/nextjs/components/Navbar.tsx
+++ b/packages/nextjs/components/Navbar.tsx
@@ -150,9 +150,12 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                 )}
               </div>
 
-              {/* Right Side Actions */}
+              {/* Right Side Actions - Reordered */}
               <div className="flex items-center gap-3">
-                {/* Language Switcher - Modernized */}
+                {/* Wallet Connect Button - handles connected/disconnected states internally */}
+                <CustomConnectButton />
+
+                {/* Language Switcher - Moved to the end */}
                 <div className="relative" ref={languageRef}>
                   <motion.button
                     onClick={() => setIsLanguageOpen(!isLanguageOpen)}
@@ -205,8 +208,8 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                                 setIsLanguageOpen(false);
                               }}
                               className={`w-full flex items-center gap-3 px-4 py-2.5 text-left hover:bg-starkYellow/10 transition-all duration-200 ${currentLanguage === lang.code
-                                ? "text-starkYellow bg-starkYellow/5"
-                                : "text-white/80 hover:text-white"
+                                  ? "text-starkYellow bg-starkYellow/5"
+                                  : "text-white/80 hover:text-white"
                                 }`}
                               whileHover={{ x: 4 }}
                               whileTap={{ scale: 0.98 }}
@@ -228,8 +231,6 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                     )}
                   </AnimatePresence>
                 </div>
-                {/* Wallet Connect Button - handles connected/disconnected states internally */}
-                <CustomConnectButton />
 
                 {/* Mobile Menu Button */}
                 <motion.button
@@ -367,4 +368,4 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
       </AnimatePresence>
     </>
   );
-}
+}
\ No newline at end of file
diff --git a/packages/nextjs/components/dashboard/pool/page.tsx b/packages/nextjs/components/dashboard/pool/page.tsx
index 34771cc5..77306ae1 100644
--- a/packages/nextjs/components/dashboard/pool/page.tsx
+++ b/packages/nextjs/components/dashboard/pool/page.tsx
@@ -9,95 +9,131 @@ export default function TotalPool() {
   const { t } = useTranslation();
   const [pool, setPool] = useState<number>(1245.67);
   const [usdValue, setUsdValue] = useState<number>(48230);
-  const [remainingTime, setRemainingTime] = useState<string>("");
+  const [remainingTime, setRemainingTime] = useState<string>("Calculando...");
 
   useEffect(() => {
-    const targetDate = new Date();
-    targetDate.setDate(targetDate.getDate() + 2);
-    targetDate.setHours(targetDate.getHours() + 14);
-    targetDate.setMinutes(targetDate.getMinutes() + 2);
+    let interval: NodeJS.Timeout;
 
-    const interval = setInterval(() => {
-      const now = new Date().getTime();
-      const distance = targetDate.getTime() - now;
+    const startCountdown = () => {
+      // Fecha objetivo: 2 días, 8 horas, 42 minutos desde ahora
+      const endTime = Date.now() + (2 * 24 * 60 * 60 * 1000) + (8 * 60 * 60 * 1000) + (42 * 60 * 1000) + (30 * 1000);
 
-      if (distance < 0) {
-        clearInterval(interval);
-        setRemainingTime(t("dashboard.pool.ended"));
-        return;
-      }
+      const updateTimer = () => {
+        const now = Date.now();
+        const timeLeft = endTime - now;
+
+        if (timeLeft <= 0) {
+          setRemainingTime("Draw Ended");
+          clearInterval(interval);
+          return;
+        }
+
+        const totalSeconds = Math.floor(timeLeft / 1000);
+        const days = Math.floor(totalSeconds / (24 * 3600));
+        const hours = Math.floor((totalSeconds % (24 * 3600)) / 3600);
+        const minutes = Math.floor((totalSeconds % 3600) / 60);
+        const seconds = totalSeconds % 60;
+
+        // Formatear con padding de ceros
+        const pad = (num: number) => num.toString().padStart(2, '0');
 
-      const days = Math.floor(distance / (1000 * 60 * 60 * 24));
-      const hours = Math.floor(
-        (distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
-      );
-      const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
+        // Formato completo siempre: días, horas, minutos, segundos
+        const display = `${days}d ${pad(hours)}h ${pad(minutes)}m ${pad(seconds)}s`;
 
-      setRemainingTime(
-        `${days}${t("dashboard.pool.days")} ${hours}${t("dashboard.pool.hours")} ${minutes}${t("dashboard.pool.minutes")}`,
-      );
-    }, 1000);
+        setRemainingTime(display);
+      };
 
-    return () => clearInterval(interval);
-  }, [t]);
+      // Ejecutar inmediatamente
+      updateTimer();
+
+      // Ejecutar cada segundo
+      interval = setInterval(updateTimer, 1000);
+    };
+
+    startCountdown();
+
+    return () => {
+      if (interval) {
+        clearInterval(interval);
+      }
+    };
+  }, []);
 
   return (
     <motion.div
       initial={{ opacity: 0, scale: 0.9 }}
       animate={{ opacity: 1, scale: 1 }}
       transition={{ duration: 1, ease: "easeOut" }}
-      className="bg-gradient-to-r from-emerald-500/30 to-green-400/30 
-                 p-12 rounded-3xl shadow-[0_0_40px_rgba(0,255,150,0.6)] 
-                 text-center text-green-400 max-w-4xl w-full mx-auto mb-16 
-                 border border-emerald-400/50"
+      className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-8 md:p-12 text-center max-w-4xl w-full mx-auto mb-8"
+      style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
     >
-      <motion.h2
-        initial={{ opacity: 0, y: -10 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 0.3 }}
-        className="text-2xl font-bold uppercase tracking-widest mb-6 text-emerald-300"
-      >
-        {t("dashboard.pool.title")}
-      </motion.h2>
-
-      <motion.p
-        initial={{ opacity: 0, scale: 0.9 }}
-        animate={{ opacity: 1, scale: 1 }}
-        transition={{ duration: 1, ease: "easeOut", delay: 0.5 }}
-        className="text-7xl md:text-8xl font-extrabold mb-4 
-                   drop-shadow-[0_0_25px_rgba(0,255,150,0.9)]"
-      >
-        <motion.span
-          animate={{ scale: [1, 1.05, 1] }}
-          transition={{
-            duration: 2,
-            repeat: Infinity,
-            repeatType: "mirror",
-            ease: "easeInOut",
-          }}
-          className="inline-block"
+      {/* Gradient Background Overlay */}
+      <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/10 via-transparent to-purple-500/10 pointer-events-none" />
+
+      {/* Animated Background Glow */}
+      <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/20 via-purple-500/20 to-starkYellow/20 rounded-2xl blur-xl opacity-50 animate-pulse" />
+
+      <div className="relative z-10">
+        <motion.h2
+          initial={{ opacity: 0, y: -10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 0.3 }}
+          className="text-2xl md:text-3xl font-bold uppercase tracking-widest mb-6 bg-gradient-to-r from-starkYellow to-white bg-clip-text text-transparent text-center"
+        >
+          ACCUMULATED POOL
+        </motion.h2>
+
+        <motion.div
+          initial={{ opacity: 0, scale: 0.9 }}
+          animate={{ opacity: 1, scale: 1 }}
+          transition={{ duration: 1, ease: "easeOut", delay: 0.5 }}
+          className="mb-6"
+        >
+          <motion.p
+            className="text-6xl md:text-7xl lg:text-8xl font-extrabold mb-2 text-white drop-shadow-[0_0_25px_rgba(255,214,0,0.5)]"
+          >
+            <motion.span
+              animate={{ scale: [1, 1.02, 1] }}
+              transition={{
+                duration: 3,
+                repeat: Infinity,
+                repeatType: "mirror",
+                ease: "easeInOut",
+              }}
+              className="inline-block bg-gradient-to-r from-starkYellow via-white to-starkYellow bg-clip-text text-transparent"
+            >
+              <CountUp end={pool} decimals={2} duration={2.5} /> STRK
+            </motion.span>
+          </motion.p>
+        </motion.div>
+
+        <motion.p
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1 }}
+          transition={{ delay: 1.2, duration: 1 }}
+          className="text-2xl md:text-3xl font-semibold text-white/80 mb-8"
+        >
+          ≈ <span className="text-starkYellow font-bold">
+            <CountUp end={usdValue} duration={3} separator="," />
+          </span> USD
+        </motion.p>
+
+        <motion.div
+          initial={{ opacity: 0, y: 10 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ delay: 1.5, duration: 1 }}
+          className="inline-block px-8 py-4 rounded-xl border border-starkYellow/30 bg-starkYellow/10 backdrop-blur-sm"
         >
-          <CountUp end={pool} decimals={2} duration={2.5} /> STRK
-        </motion.span>
-      </motion.p>
-
-      <motion.p
-        initial={{ opacity: 0 }}
-        animate={{ opacity: 1 }}
-        transition={{ delay: 1.2, duration: 1 }}
-        className="text-3xl md:text-4xl font-semibold opacity-90 mb-8"
-      >
-        ≈ <CountUp end={usdValue} duration={3} separator="," /> USD
-      </motion.p>
-
-      <motion.div
-        initial={{ opacity: 0, y: 10 }}
-        animate={{ opacity: 1, y: 0 }}
-        transition={{ delay: 1.5, duration: 1 }}
-        className="text-2xl font-medium text-emerald-300"
-      >
-        ⏳ {t("dashboard.pool.drawIn", { time: remainingTime })}
-      </motion.div>
+          <div className="text-center">
+            <div className="text-sm text-starkYellow/80 font-medium mb-2">
+              Draw in
+            </div>
+            <div className="text-2xl md:text-3xl font-bold text-white font-mono tracking-wider">
+              {remainingTime || "Calculando..."}
+            </div>
+          </div>
+        </motion.div>
+      </div>
     </motion.div>
   );
 }

From 7e697fb772d777a033df37757faf203a87773b20 Mon Sep 17 00:00:00 2001
From: drakkomaximo <andres.villanueva.tabares@gmail.com>
Date: Wed, 1 Oct 2025 15:33:59 -0500
Subject: [PATCH 3/8] HeroSection ui has been updated part 1

---
 .../dashboard/dashboard/BalancesCard.tsx      |  49 +++++----
 .../dashboard/dashboard/NotificationsCard.tsx | 103 ++++++++++--------
 .../dashboard/RecentActivityCard.tsx          |  96 ++++++++--------
 .../dashboard/dashboard/StepsWizard.tsx       |  69 ++++++------
 .../components/sections/HeroSection.tsx       |  62 ++++++-----
 5 files changed, 205 insertions(+), 174 deletions(-)

diff --git a/packages/nextjs/components/dashboard/dashboard/BalancesCard.tsx b/packages/nextjs/components/dashboard/dashboard/BalancesCard.tsx
index 9c95f557..667dcff2 100644
--- a/packages/nextjs/components/dashboard/dashboard/BalancesCard.tsx
+++ b/packages/nextjs/components/dashboard/dashboard/BalancesCard.tsx
@@ -9,24 +9,29 @@ export default function BalancesCard({ strkp, strk, loading = false }: Props) {
   const { t } = useTranslation();
 
   return (
-    <Card className="p-4 bg-[#111827] border border-white/10 rounded-2xl shadow-lg">
-      <h3 className="text-sm text-white mb-3">
-        {t("dashboard.balances.title")}
-      </h3>
-      <div className="space-y-3">
-        {loading ? (
-          <>
-            <Row label={t("dashboard.balances.strkp")} loading />
-            <Row label={t("dashboard.balances.strk")} loading />
-          </>
-        ) : (
-          <>
-            <Row label={t("dashboard.balances.strkp")} value={strkp} />
-            <Row label={t("dashboard.balances.strk")} value={strk} />
-          </>
-        )}
+    <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-4" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+      {/* Gradient Background Overlay */}
+      <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
+
+      <div className="relative z-10">
+        <h3 className="text-sm font-semibold mb-4 bg-gradient-to-r from-starkYellow to-white bg-clip-text text-transparent">
+          {t("dashboard.balances.title")}
+        </h3>
+        <div className="space-y-3">
+          {loading ? (
+            <>
+              <Row label={t("dashboard.balances.strkp")} loading />
+              <Row label={t("dashboard.balances.strk")} loading />
+            </>
+          ) : (
+            <>
+              <Row label={t("dashboard.balances.strkp")} value={strkp} />
+              <Row label={t("dashboard.balances.strk")} value={strk} />
+            </>
+          )}
+        </div>
       </div>
-    </Card>
+    </div>
   );
 }
 
@@ -40,15 +45,15 @@ function Row({
   loading?: boolean;
 }) {
   return (
-    <div className="flex items-center justify-between bg-[#1E293B] rounded-xl px-4 py-3 hover:bg-[#1F2937] transition-colors">
-      <div className="text-sm text-white">{label}</div>
+    <div className="flex items-center justify-between bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl px-4 py-3 hover:bg-white/10 hover:border-starkYellow/30 transition-all duration-300 group">
+      <div className="text-sm text-white/80 group-hover:text-white transition-colors">{label}</div>
       <div className="flex items-center gap-2">
         {loading ? (
-          <div className="w-24 h-4 bg-white/20 animate-pulse rounded"></div>
+          <div className="w-24 h-4 bg-starkYellow/20 animate-pulse rounded"></div>
         ) : (
           <>
-            <div className="font-semibold text-lg text-white">{value}</div>
-            <TrendingUp className="h-4 w-4 opacity-70 text-white" />
+            <div className="font-semibold text-lg text-starkYellow group-hover:text-starkYellow-light transition-colors">{value}</div>
+            <TrendingUp className="h-4 w-4 text-starkYellow/70 group-hover:text-starkYellow transition-colors" />
           </>
         )}
       </div>
diff --git a/packages/nextjs/components/dashboard/dashboard/NotificationsCard.tsx b/packages/nextjs/components/dashboard/dashboard/NotificationsCard.tsx
index c2a529d7..d0f49e59 100644
--- a/packages/nextjs/components/dashboard/dashboard/NotificationsCard.tsx
+++ b/packages/nextjs/components/dashboard/dashboard/NotificationsCard.tsx
@@ -12,57 +12,68 @@ export default function NotificationsCard({ list }: Props) {
   const { t } = useTranslation();
 
   return (
-    <Card className="p-6">
-      <div className="mb-3 flex items-center gap-2">
-        <Bell className="h-4 w-4 text-white/80" />
-        <h3 className="text-sm font-semibold">
-          {t("dashboard.notifications.title")}
-        </h3>
-      </div>
+    <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+      {/* Gradient Background Overlay */}
+      <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
-      <div className="space-y-3">
-        {list.length === 0 ? (
-          <div className="rounded-xl border border-white/5 bg-[#1E293B] p-4 text-sm text-white/80">
-            {t("dashboard.notifications.empty")}
+      <div className="relative z-10">
+        <div className="mb-4 flex items-center gap-2">
+          <div className="w-8 h-8 rounded-full bg-starkYellow/20 border border-starkYellow/30 flex items-center justify-center">
+            <Bell className="h-4 w-4 text-starkYellow" />
           </div>
-        ) : (
-          list.map((n) => (
-            <div
-              key={n.id}
-              className="rounded-2xl border border-white/10 bg-[#1E293B] p-4"
-            >
-              <div className="mb-2 flex items-center gap-2">
-                {n.type === "prize" ? (
-                  <Gift className="h-4 w-4 text-starkYellow" />
-                ) : (
-                  <Timer className="h-4 w-4 text-starkMagenta" />
-                )}
-                <div className="font-medium">{n.title}</div>
-              </div>
+          <h3 className="text-sm font-semibold bg-gradient-to-r from-starkYellow to-white bg-clip-text text-transparent">
+            {t("dashboard.notifications.title")}
+          </h3>
+        </div>
+
+        <div className="space-y-3">
+          {list.length === 0 ? (
+            <div className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-4 text-sm text-white/70 text-center">
+              {t("dashboard.notifications.empty")}
+            </div>
+          ) : (
+            list.map((n) => (
+              <div
+                key={n.id}
+                className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-4 hover:bg-white/10 hover:border-starkYellow/30 transition-all duration-300 group"
+              >
+                <div className="mb-2 flex items-center gap-2">
+                  <div className={`w-6 h-6 rounded-full flex items-center justify-center border ${n.type === "prize"
+                      ? "bg-starkYellow/20 border-starkYellow/30"
+                      : "bg-purple-500/20 border-purple-500/30"
+                    }`}>
+                    {n.type === "prize" ? (
+                      <Gift className="h-3 w-3 text-starkYellow" />
+                    ) : (
+                      <Timer className="h-3 w-3 text-purple-400" />
+                    )}
+                  </div>
+                  <div className="font-medium text-white group-hover:text-starkYellow transition-colors">{n.title}</div>
+                </div>
 
-              <div className="mb-3 text-sm text-white/80">{n.desc}</div>
+                <div className="mb-3 text-sm text-white/70 group-hover:text-white/80 transition-colors">{n.desc}</div>
 
-              {n.cta && (
-                <motion.div
-                  whileTap={{ scale: 0.98 }}
-                  whileHover={{ scale: 1.01 }}
-                >
-                  <Link
-                    href={n.cta.href}
-                    className={`btn btn-sm w-full ${
-                      n.type === "prize"
-                        ? "bg-starkYellow text-black hover:bg-starkYellow/90"
-                        : "bg-starkMagenta text-white hover:bg-starkMagenta/90"
-                    }`}
+                {n.cta && (
+                  <motion.div
+                    whileTap={{ scale: 0.98 }}
+                    whileHover={{ scale: 1.02 }}
                   >
-                    {n.cta.label}
-                  </Link>
-                </motion.div>
-              )}
-            </div>
-          ))
-        )}
+                    <Link
+                      href={n.cta.href}
+                      className={`inline-flex items-center justify-center w-full px-4 py-2 rounded-lg font-medium text-sm transition-all duration-300 ${n.type === "prize"
+                          ? "bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black"
+                          : "bg-gradient-to-r from-purple-500/20 to-purple-500/10 border border-purple-500/30 text-purple-400 hover:from-purple-500 hover:to-purple-400 hover:text-white"
+                        }`}
+                    >
+                      {n.cta.label}
+                    </Link>
+                  </motion.div>
+                )}
+              </div>
+            ))
+          )}
+        </div>
       </div>
-    </Card>
+    </div>
   );
 }
diff --git a/packages/nextjs/components/dashboard/dashboard/RecentActivityCard.tsx b/packages/nextjs/components/dashboard/dashboard/RecentActivityCard.tsx
index a1e14318..f65ffd55 100644
--- a/packages/nextjs/components/dashboard/dashboard/RecentActivityCard.tsx
+++ b/packages/nextjs/components/dashboard/dashboard/RecentActivityCard.tsx
@@ -13,54 +13,60 @@ export default function RecentActivityCard({
   const { t } = useTranslation();
 
   return (
-    <Card className="p-6">
-      <div className="mb-3 flex items-center gap-2">
-        <Ticket className="h-4 w-4 text-white/80" />
-        <h3 className="text-sm font-semibold">
-          {t("dashboard.recentActivity.title")}
-        </h3>
-      </div>
+    <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+      {/* Gradient Background Overlay */}
+      <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
-      <Stagger>
-        {items.length === 0 ? (
-          <Item>
-            <div className="rounded-xl border border-white/5 bg-[#1E293B] p-4 text-sm text-white/80">
-              {t("dashboard.recentActivity.empty")}
-            </div>
-          </Item>
-        ) : (
-          <div className="space-y-3">
-            {items.map((i) => (
-              <Item key={i.id}>
-                <div className="flex items-center justify-between rounded-xl border border-white/10 bg-[#0F172A]/60 px-4 py-3 hover:bg-[#111827] transition-colors">
-                  <div className="flex items-center gap-3">
-                    <div className="rounded-full bg-white/10 p-2">
-                      <Ticket className="h-4 w-4 text-white/80" />
-                    </div>
-                    <div>
-                      <div className="font-medium">
-                        {i.amount} {i.unit}
+      <div className="relative z-10">
+        <div className="mb-4 flex items-center gap-2">
+          <div className="w-8 h-8 rounded-full bg-starkYellow/20 border border-starkYellow/30 flex items-center justify-center">
+            <Ticket className="h-4 w-4 text-starkYellow" />
+          </div>
+          <h3 className="text-sm font-semibold bg-gradient-to-r from-starkYellow to-white bg-clip-text text-transparent">
+            {t("dashboard.recentActivity.title")}
+          </h3>
+        </div>
+
+        <Stagger>
+          {items.length === 0 ? (
+            <Item>
+              <div className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-4 text-sm text-white/70 text-center">
+                {t("dashboard.recentActivity.empty")}
+              </div>
+            </Item>
+          ) : (
+            <div className="space-y-3">
+              {items.map((i) => (
+                <Item key={i.id}>
+                  <div className="flex items-center justify-between rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm px-4 py-3 hover:bg-white/10 hover:border-starkYellow/30 transition-all duration-300 group">
+                    <div className="flex items-center gap-3">
+                      <div className="rounded-full bg-starkYellow/20 border border-starkYellow/30 p-2 group-hover:bg-starkYellow/30 transition-colors">
+                        <Ticket className="h-4 w-4 text-starkYellow" />
+                      </div>
+                      <div>
+                        <div className="font-medium text-white group-hover:text-starkYellow transition-colors">
+                          {i.amount} {i.unit}
+                        </div>
+                        <div className="text-xs text-white/70 group-hover:text-white/80 transition-colors">{i.when}</div>
                       </div>
-                      <div className="text-xs text-white/80">{i.when}</div>
+                    </div>
+                    <div
+                      className={`text-xs font-medium px-2 py-1 rounded-full border ${i.status === "won"
+                          ? "text-green-400 bg-green-400/10 border-green-400/30"
+                          : i.status === "pending"
+                            ? "text-starkYellow bg-starkYellow/10 border-starkYellow/30"
+                            : "text-red-400 bg-red-400/10 border-red-400/30"
+                        }`}
+                    >
+                      {i.status}
                     </div>
                   </div>
-                  <div
-                    className={`text-xs font-medium ${
-                      i.status === "won"
-                        ? "text-success"
-                        : i.status === "pending"
-                          ? "text-starkYellow"
-                          : "text-error/80"
-                    }`}
-                  >
-                    {i.status}
-                  </div>
-                </div>
-              </Item>
-            ))}
-          </div>
-        )}
-      </Stagger>
-    </Card>
+                </Item>
+              ))}
+            </div>
+          )}
+        </Stagger>
+      </div>
+    </div>
   );
 }
diff --git a/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx b/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx
index 8b8eb2ca..d96dd9d0 100644
--- a/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx
+++ b/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx
@@ -51,41 +51,42 @@ export default function StepsWizard(_: Props) {
   ];
 
   return (
-    <Card className="p-6 bg-gradient-to-br from-slate-900/70 via-slate-800/60 to-slate-900/70 backdrop-blur-xl rounded-2xl border border-white/10 shadow-lg">
-      <h3 className="mb-6 text-xl font-bold text-white">
-        {t("dashboard.steps.title")}
-      </h3>
-      <Stagger className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4 items-stretch">
-        {steps.map((s) => (
-          <Item key={s.id} className="h-full">
-            <div
-              className="flex h-full flex-col justify-between rounded-2xl border border-white/10 bg-gradient-to-br from-[#1e1e2f]/90 to-[#12121c]/90 
-              px-5 py-5 shadow-md hover:shadow-xl transition-all duration-300 hover:border-starkMagenta/60 hover:scale-[1.02]"
-            >
-              <div>
-                <div className="mb-3 flex items-center justify-between">
-                  <span className="rounded-full bg-starkMagenta/20 px-3 py-0.5 text-xs text-starkMagenta font-medium">
-                    {t("dashboard.steps.step", { id: s.id })}
-                  </span>
-                  <span className="text-starkMagenta">{s.icon}</span>
-                </div>
-                <div className="font-semibold text-lg text-white">
-                  {s.title}
+    <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+      {/* Gradient Background Overlay */}
+      <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
+
+      <div className="relative z-10">
+        <h3 className="mb-6 text-xl font-bold bg-gradient-to-r from-starkYellow to-white bg-clip-text text-transparent">
+          {t("dashboard.steps.title")}
+        </h3>
+        <Stagger className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4 items-stretch">
+          {steps.map((s) => (
+            <Item key={s.id} className="h-full">
+              <div className="flex h-full flex-col justify-between rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm px-4 py-4 hover:bg-white/10 hover:border-starkYellow/30 transition-all duration-300 hover:scale-[1.02] group">
+                <div>
+                  <div className="mb-3 flex items-center justify-between">
+                    <span className="rounded-full bg-starkYellow/20 px-2.5 py-1 text-xs text-starkYellow font-medium border border-starkYellow/30">
+                      {t("dashboard.steps.step", { id: s.id })}
+                    </span>
+                    <span className="text-starkYellow group-hover:text-starkYellow-light transition-colors">{s.icon}</span>
+                  </div>
+                  <div className="font-semibold text-base text-white mb-2">
+                    {s.title}
+                  </div>
+                  <div className="mb-4 text-sm text-white/70 group-hover:text-white/80 transition-colors">{s.desc}</div>
                 </div>
-                <div className="mb-4 text-sm text-white/70">{s.desc}</div>
-              </div>
 
-              <Link
-                href={s.href}
-                className="btn btn-sm w-full bg-gradient-to-r from-starkMagenta to-purple-600 text-white font-semibold 
-                hover:from-purple-600 hover:to-starkMagenta transition-all duration-200"
-              >
-                {s.action}
-              </Link>
-            </div>
-          </Item>
-        ))}
-      </Stagger>
-    </Card>
+                <Link
+                  href={s.href}
+                  className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black font-medium text-sm transition-all duration-300 hover:scale-105"
+                >
+                  {s.action}
+                </Link>
+              </div>
+            </Item>
+          ))}
+        </Stagger>
+      </div>
+    </div>
   );
 }
diff --git a/packages/nextjs/components/sections/HeroSection.tsx b/packages/nextjs/components/sections/HeroSection.tsx
index 83b822aa..c2d02416 100644
--- a/packages/nextjs/components/sections/HeroSection.tsx
+++ b/packages/nextjs/components/sections/HeroSection.tsx
@@ -47,36 +47,44 @@ export function HeroSection({
 
   if (isCard) {
     return (
-      <Card className="p-6">
-        <div className="flex justify-between items-center mb-4">
-          <h2 className="text-sm font-semibold">{t("buyTickets.nextDraw")}</h2>
-          <SecurityBadge type="secure" />
-        </div>
+      <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+        {/* Gradient Background Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
-        <p className="text-emerald-400 text-2xl font-bold mb-4">
-          ${jackpot.toLocaleString()} USDC
-        </p>
+        <div className="relative z-10">
+          <div className="flex justify-between items-center mb-4">
+            <h2 className="text-sm font-semibold bg-gradient-to-r from-starkYellow to-white bg-clip-text text-transparent">
+              {t("buyTickets.nextDraw")}
+            </h2>
+            <SecurityBadge type="secure" />
+          </div>
 
-        <div className="mb-6">
-          {useBlockBasedCountdown && timeRemainingFromBlocks ? (
-            <BlockBasedCountdownTimer
-              blocksRemaining={blocksRemaining}
-              currentBlock={currentBlock}
-              timeRemaining={timeRemainingFromBlocks}
-            />
-          ) : (
-            <CountdownTimer targetDate={targetDate} />
-          )}
-        </div>
+          <p className="text-2xl font-bold mb-4 bg-gradient-to-r from-starkYellow via-white to-starkYellow bg-clip-text text-transparent">
+            ${jackpot.toLocaleString()} USDC
+          </p>
 
-        <GlowingButton
-          onClick={onBuyTicket}
-          className="w-full py-3 text-base font-medium"
-          glowColor="rgba(139, 92, 246, 0.5)"
-        >
-          {t("buyTickets.buyButton")}
-        </GlowingButton>
-      </Card>
+          <div className="mb-6">
+            {useBlockBasedCountdown && timeRemainingFromBlocks ? (
+              <BlockBasedCountdownTimer
+                blocksRemaining={blocksRemaining}
+                currentBlock={currentBlock}
+                timeRemaining={timeRemainingFromBlocks}
+              />
+            ) : (
+              <CountdownTimer targetDate={targetDate} />
+            )}
+          </div>
+
+          <button
+            onClick={onBuyTicket}
+            className="group relative w-full py-3 text-base font-medium rounded-xl border border-starkYellow/30 bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black transition-all duration-300 hover:scale-105"
+            style={{ boxShadow: "0 4px 12px rgba(255,214,0,0.2)" }}
+          >
+            <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/20 via-purple-500/20 to-starkYellow/20 rounded-xl blur opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+            <span className="relative">{t("buyTickets.buyButton")}</span>
+          </button>
+        </div>
+      </div>
     );
   }
 }

From 8c7014925ad4099ef8dc026f0f4ee8e79e7b8298 Mon Sep 17 00:00:00 2001
From: drakkomaximo <andres.villanueva.tabares@gmail.com>
Date: Wed, 1 Oct 2025 15:53:09 -0500
Subject: [PATCH 4/8] HeroSection ui has been updated part 2

---
 packages/nextjs/app/dapp/dashboard/page.tsx   | 16 +++++----
 .../dashboard/dashboard/StepsWizard.tsx       | 17 ++++++----
 packages/nextjs/components/scroll-to-top.tsx  | 34 +++++++++----------
 .../components/sections/HeroSection.tsx       | 21 +++++++-----
 4 files changed, 51 insertions(+), 37 deletions(-)

diff --git a/packages/nextjs/app/dapp/dashboard/page.tsx b/packages/nextjs/app/dapp/dashboard/page.tsx
index e0b62cdb..dd43c7eb 100644
--- a/packages/nextjs/app/dapp/dashboard/page.tsx
+++ b/packages/nextjs/app/dapp/dashboard/page.tsx
@@ -22,6 +22,7 @@ export default function DashboardPage() {
   const navigate = useRouter();
   const { scrollY } = useScroll();
   const { status } = useAccount();
+  const isConnected = status === "connected";
 
   const heroY = useTransform(scrollY, [0, 500], [0, -100]);
   const prizeDistributionY = useTransform(scrollY, [0, 2000], [0, -50]);
@@ -79,7 +80,7 @@ export default function DashboardPage() {
           <TotalPool />
         </div>
 
-        <div className="space-y-4 lg:col-span-2">
+        <div className={`space-y-4 ${isConnected ? 'lg:col-span-2' : 'lg:col-span-3'}`}>
           {/* Lottery Process */}
           <StepsWizard {...data.wizard} />
 
@@ -87,6 +88,7 @@ export default function DashboardPage() {
             variant="card"
             heroY={heroY}
             jackpot={jackpot}
+            isConnected={isConnected}
             showSecurityInfo={showSecurityInfo}
             targetDate={targetDate}
             onBuyTicket={() => handleRoute("/dapp/buy-tickets")}
@@ -101,13 +103,15 @@ export default function DashboardPage() {
             useBlockBasedCountdown={true}
           />
 
-          <RecentActivityCard items={data.history} />
+          {isConnected && <RecentActivityCard items={data.history} />}
         </div>
 
-        <div className="space-y-4">
-          <BalancesCard {...data.balances} />
-          <NotificationsCard list={data.notifications} />
-        </div>
+        {isConnected && (
+          <div className="space-y-4">
+            <BalancesCard {...data.balances} />
+            <NotificationsCard list={data.notifications} />
+          </div>
+        )}
 
         <div className="lg:col-span-3">
           <LastDrawResultsCard />
diff --git a/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx b/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx
index d96dd9d0..caf488e2 100644
--- a/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx
+++ b/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx
@@ -4,6 +4,7 @@ import { Coins, Ticket, Gift, ArrowLeftRight } from "lucide-react";
 import Link from "next/link";
 import { Stagger, Item } from "~~/components/ui/motion";
 import { useTranslation } from "react-i18next";
+import { useAccount } from "@starknet-react/core";
 
 type Props = {
   hasStrkp: boolean;
@@ -14,6 +15,8 @@ type Props = {
 
 export default function StepsWizard(_: Props) {
   const { t } = useTranslation();
+  const { status } = useAccount();
+  const isConnected = status === "connected";
 
   const steps = [
     {
@@ -76,12 +79,14 @@ export default function StepsWizard(_: Props) {
                   <div className="mb-4 text-sm text-white/70 group-hover:text-white/80 transition-colors">{s.desc}</div>
                 </div>
 
-                <Link
-                  href={s.href}
-                  className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black font-medium text-sm transition-all duration-300 hover:scale-105"
-                >
-                  {s.action}
-                </Link>
+                {isConnected && (
+                  <Link
+                    href={s.href}
+                    className="inline-flex items-center justify-center px-4 py-2 rounded-lg bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black font-medium text-sm transition-all duration-300 hover:scale-105"
+                  >
+                    {s.action}
+                  </Link>
+                )}
               </div>
             </Item>
           ))}
diff --git a/packages/nextjs/components/scroll-to-top.tsx b/packages/nextjs/components/scroll-to-top.tsx
index 6af61170..256e14ef 100644
--- a/packages/nextjs/components/scroll-to-top.tsx
+++ b/packages/nextjs/components/scroll-to-top.tsx
@@ -13,7 +13,7 @@ interface ScrollToTopProps {
 export function ScrollToTop({
   threshold = 400,
   className = "",
-  variant = "dapp",
+  variant = "landing",
 }: ScrollToTopProps) {
   const [isVisible, setIsVisible] = useState(false);
 
@@ -44,23 +44,23 @@ export function ScrollToTop({
   const styles =
     variant === "landing"
       ? {
-          glowEffect:
-            "absolute inset-0 bg-gradient-to-r from-starkYellow to-starkYellow-light rounded-full blur-lg opacity-60 group-hover:opacity-80 transition-opacity duration-300",
-          buttonContent:
-            "relative w-12 h-12 bg-gradient-to-r from-starkYellow to-starkYellow-light rounded-full flex items-center justify-center shadow-lg border border-starkYellow/20 backdrop-blur-sm",
-          iconColor: "h-6 w-6 text-heroDark font-bold",
-          animatedRing:
-            "absolute inset-0 border-2 border-starkYellow/40 rounded-full",
-        }
+        glowEffect:
+          "absolute inset-0 bg-gradient-to-r from-starkYellow to-starkYellow-light rounded-full blur-lg opacity-60 group-hover:opacity-80 transition-opacity duration-300",
+        buttonContent:
+          "relative w-12 h-12 bg-gradient-to-r from-starkYellow to-starkYellow-light rounded-full flex items-center justify-center shadow-lg border border-starkYellow/20 backdrop-blur-sm",
+        iconColor: "h-6 w-6 text-heroDark font-bold",
+        animatedRing:
+          "absolute inset-0 border-2 border-starkYellow/40 rounded-full",
+      }
       : {
-          glowEffect:
-            "absolute inset-0 bg-gradient-to-r from-[#00FFA3] to-[#00E5FF] rounded-full blur-lg opacity-60 group-hover:opacity-80 transition-opacity duration-300",
-          buttonContent:
-            "relative w-12 h-12 bg-gradient-to-r from-[#00FFA3] to-[#00E5FF] rounded-full flex items-center justify-center shadow-lg border border-white/10 backdrop-blur-sm",
-          iconColor: "h-6 w-6 text-black font-bold",
-          animatedRing:
-            "absolute inset-0 border-2 border-[#00FFA3]/30 rounded-full",
-        };
+        glowEffect:
+          "absolute inset-0 bg-gradient-to-r from-[#00FFA3] to-[#00E5FF] rounded-full blur-lg opacity-60 group-hover:opacity-80 transition-opacity duration-300",
+        buttonContent:
+          "relative w-12 h-12 bg-gradient-to-r from-[#00FFA3] to-[#00E5FF] rounded-full flex items-center justify-center shadow-lg border border-white/10 backdrop-blur-sm",
+        iconColor: "h-6 w-6 text-black font-bold",
+        animatedRing:
+          "absolute inset-0 border-2 border-[#00FFA3]/30 rounded-full",
+      };
 
   return (
     <AnimatePresence>
diff --git a/packages/nextjs/components/sections/HeroSection.tsx b/packages/nextjs/components/sections/HeroSection.tsx
index c2d02416..104a2e91 100644
--- a/packages/nextjs/components/sections/HeroSection.tsx
+++ b/packages/nextjs/components/sections/HeroSection.tsx
@@ -12,6 +12,7 @@ interface HeroSectionProps {
   variant?: "hero" | "card";
   heroY: any;
   jackpot: number;
+  isConnected: boolean
   showSecurityInfo: boolean;
   targetDate: Date;
   onBuyTicket: () => void;
@@ -35,6 +36,7 @@ export function HeroSection({
   variant = "hero",
   heroY,
   jackpot,
+  isConnected,
   targetDate,
   onBuyTicket,
   blocksRemaining = 0,
@@ -75,14 +77,17 @@ export function HeroSection({
             )}
           </div>
 
-          <button
-            onClick={onBuyTicket}
-            className="group relative w-full py-3 text-base font-medium rounded-xl border border-starkYellow/30 bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black transition-all duration-300 hover:scale-105"
-            style={{ boxShadow: "0 4px 12px rgba(255,214,0,0.2)" }}
-          >
-            <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/20 via-purple-500/20 to-starkYellow/20 rounded-xl blur opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
-            <span className="relative">{t("buyTickets.buyButton")}</span>
-          </button>
+          {
+            isConnected && <button
+              onClick={onBuyTicket}
+              className="group relative w-full py-3 text-base font-medium rounded-xl border border-starkYellow/30 bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black transition-all duration-300 hover:scale-105"
+              style={{ boxShadow: "0 4px 12px rgba(255,214,0,0.2)" }}
+            >
+              <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/20 via-purple-500/20 to-starkYellow/20 rounded-xl blur opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+              <span className="relative">{t("buyTickets.buyButton")}</span>
+            </button>
+          }
+
         </div>
       </div>
     );

From 204e0ad02d30829b082b43a05bd03f901581ae1b Mon Sep 17 00:00:00 2001
From: drakkomaximo <andres.villanueva.tabares@gmail.com>
Date: Wed, 1 Oct 2025 16:11:57 -0500
Subject: [PATCH 5/8] PrizeDistributionSection has been updated

---
 .../nextjs/components/LastDrawResults.tsx     | 58 +++++++++----------
 .../nextjs/components/PrizeDistribution.tsx   | 36 ++++++------
 .../dashboard/LastDrawResultsCard.tsx         | 22 +++++--
 .../sections/PrizeDistributionSection.tsx     | 19 ++++--
 4 files changed, 78 insertions(+), 57 deletions(-)

diff --git a/packages/nextjs/components/LastDrawResults.tsx b/packages/nextjs/components/LastDrawResults.tsx
index 6bb1173f..0fef371d 100644
--- a/packages/nextjs/components/LastDrawResults.tsx
+++ b/packages/nextjs/components/LastDrawResults.tsx
@@ -98,8 +98,8 @@ export function LastDrawResults() {
     return (
       <div className="space-y-6">
         <div className="flex items-center gap-2 mb-4">
-          <Trophy className="h-5 w-5 text-gray-300" />
-          <h2 className="text-sm font-semibold text-gray-300">
+          <Trophy className="h-5 w-5 text-starkYellow" />
+          <h2 className="text-sm font-semibold text-white">
             {t("lastDraw.title")}
           </h2>
         </div>
@@ -136,12 +136,12 @@ export function LastDrawResults() {
       {/* Header */}
       <div className="flex items-center justify-between mb-2">
         <div>
-          <h2 className="flex items-center gap-2 text-sm font-semibold text-gray-300">
-            <Trophy className="h-5 w-5" />
+          <h2 className="flex items-center gap-2 text-sm font-semibold text-white">
+            <Trophy className="h-5 w-5 text-starkYellow" />
             {t("lastDraw.title")}
           </h2>
           {drawResult && (
-            <p className="mt-1 text-xs text-gray-400">
+            <p className="mt-1 text-xs text-white/70">
               {formatDrawDate(drawResult.drawDate)}
             </p>
           )}
@@ -153,19 +153,19 @@ export function LastDrawResults() {
             <motion.div
               animate={{ rotate: 360 }}
               transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
-              className="text-gray-400"
+              className="text-starkYellow"
             >
               <RefreshCw className="h-4 w-4" />
             </motion.div>
           )}
           {isPolling && !isRefreshing && (
-            <div className="flex items-center gap-1 text-gray-400 text-xs">
+            <div className="flex items-center gap-1 text-starkYellow text-xs">
               <Wifi className="h-4 w-4" />
               {t("status.live")}
             </div>
           )}
           {lastFetch && (
-            <div className="text-xs text-gray-500">
+            <div className="text-xs text-white/60">
               {t("status.updated")} {new Date(lastFetch).toLocaleTimeString()}
             </div>
           )}
@@ -184,13 +184,13 @@ export function LastDrawResults() {
           className="space-y-4"
         >
           {/* Jackpot */}
-          <p className="text-emerald-400 text-2xl font-bold">
+          <p className="text-starkYellow text-2xl font-bold">
             {formatCurrency(drawResult.jackpotAmount)}
           </p>
 
           {/* Winning Numbers */}
           <div>
-            <h3 className="text-xs font-medium text-gray-400 mb-2">
+            <h3 className="text-xs font-medium text-white/70 mb-2">
               {t("lastDraw.winningNumbers")}
             </h3>
             <div className="flex flex-wrap gap-2">
@@ -200,7 +200,7 @@ export function LastDrawResults() {
                   initial={{ scale: 0.8, opacity: 0 }}
                   animate={{ scale: 1, opacity: 1 }}
                   transition={{ delay: index * 0.1 }}
-                  className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 text-sm font-bold text-white"
+                  className="flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-starkYellow to-starkYellow-light text-sm font-bold text-black"
                 >
                   {number.toString().padStart(2, "0")}
                 </motion.div>
@@ -210,8 +210,8 @@ export function LastDrawResults() {
 
           {/* Results Info */}
           <div className="grid grid-cols-1 gap-2 md:grid-cols-2">
-            <div className="rounded-lg bg-[#232b3b] p-3">
-              <h3 className="text-xs font-medium text-gray-400">
+            <div className="rounded-lg bg-white/5 border border-white/10 p-3">
+              <h3 className="text-xs font-medium text-white/70">
                 {t("lastDraw.results")}
               </h3>
               <p className="text-lg font-bold text-white">
@@ -221,29 +221,29 @@ export function LastDrawResults() {
                   : t("lastDraw.winners")}
               </p>
             </div>
-            <div className="rounded-lg bg-[#232b3b] p-3">
-              <h3 className="text-xs font-medium text-gray-400">Draw Status</h3>
-              <p className="text-lg font-bold text-white">
+            <div className="rounded-lg bg-white/5 border border-white/10 p-3">
+              <h3 className="text-xs font-medium text-white/70">Draw Status</h3>
+              <p className="text-lg font-bold text-starkYellow">
                 {drawResult.status}
               </p>
             </div>
           </div>
 
           {/* Draw Number */}
-          <div className="text-xs text-gray-400 flex items-center gap-1">
-            <Clock className="h-4 w-4" />
+          <div className="text-xs text-white/70 flex items-center gap-1">
+            <Clock className="h-4 w-4 text-starkYellow" />
             <span>Draw #{drawResult.drawNumber}</span>
           </div>
         </motion.div>
       ) : (
-        <p className="text-center text-gray-400">{t("status.noResults")}</p>
+        <p className="text-center text-white/70">{t("status.noResults")}</p>
       )}
 
       {/* Footer */}
-      <div className="flex justify-between items-center pt-4 border-t border-gray-600">
+      <div className="flex justify-between items-center pt-4 border-t border-white/10">
         <button
           onClick={() => router.push("/results")}
-          className="inline-flex items-center text-xs font-medium text-gray-300 hover:text-white"
+          className="inline-flex items-center text-xs font-medium text-white/80 hover:text-starkYellow transition-colors"
         >
           {t("lastDraw.viewPrevious")}
           <ChevronRight className="ml-1 h-3 w-3" />
@@ -255,7 +255,7 @@ export function LastDrawResults() {
             whileTap={{ scale: 0.95 }}
             onClick={handleManualRefresh}
             disabled={isLoading || isRefreshing}
-            className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-gray-400 bg-[#232b3b] hover:bg-[#2a3441] rounded-md"
+            className="inline-flex items-center gap-1 px-2 py-1 text-xs font-medium text-white/80 bg-white/5 border border-white/10 hover:bg-starkYellow/10 hover:text-starkYellow rounded-md transition-all"
           >
             <RefreshCw
               className={`h-3 w-3 ${isRefreshing ? "animate-spin" : ""}`}
@@ -265,16 +265,14 @@ export function LastDrawResults() {
 
           <button
             onClick={isPolling ? stopPolling : startPolling}
-            className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md transition-colors ${
-              isPolling
-                ? "text-green-400 bg-green-500/20 hover:bg-green-500/30"
-                : "text-gray-400 bg-[#232b3b] hover:bg-[#2a3441]"
-            }`}
+            className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md transition-colors ${isPolling
+                ? "text-starkYellow bg-starkYellow/10 border border-starkYellow/30 hover:bg-starkYellow/20"
+                : "text-white/80 bg-white/5 border border-white/10 hover:bg-white/10"
+              }`}
           >
             <div
-              className={`h-2 w-2 rounded-full ${
-                isPolling ? "bg-green-500" : "bg-gray-400"
-              }`}
+              className={`h-2 w-2 rounded-full ${isPolling ? "bg-starkYellow" : "bg-white/60"
+                }`}
             />
             {isPolling ? t("status.autoRefreshOn") : t("status.autoRefreshOff")}
           </button>
diff --git a/packages/nextjs/components/PrizeDistribution.tsx b/packages/nextjs/components/PrizeDistribution.tsx
index 2f522123..ccd31986 100644
--- a/packages/nextjs/components/PrizeDistribution.tsx
+++ b/packages/nextjs/components/PrizeDistribution.tsx
@@ -20,18 +20,18 @@ export default function PrizeDistribution({
 }: PrizeDistributionProps) {
   return (
     <div
-      className={`bg-[#0c0818] backdrop-blur-sm rounded-xl border border-slate-700/50 overflow-hidden ${className}`}
+      className={`bg-transparent backdrop-blur-sm rounded-xl border-0 overflow-hidden ${className}`}
     >
       {/* Header */}
-      <div className="p-6 border-b border-gray-700">
+      <div className="p-6 border-b border-white/10">
         <div className="flex items-center justify-between">
           <h2 className="text-xl font-semibold text-white flex items-center gap-2">
-            <Trophy className="w-5 h-5 text-yellow-400" />
+            <Trophy className="w-5 h-5 text-starkYellow" />
             Prize Distribution
           </h2>
           <div className="text-right">
-            <div className="text-sm text-gray-400">Total Pool</div>
-            <div className="text-lg font-bold text-white">
+            <div className="text-sm text-white/70">Total Pool</div>
+            <div className="text-lg font-bold text-starkYellow">
               {formatCurrency(totalPrizePool)}
             </div>
           </div>
@@ -47,12 +47,12 @@ export default function PrizeDistribution({
               initial={{ opacity: 0, x: -20 }}
               animate={{ opacity: 1, x: 0 }}
               transition={{ delay: index * 0.1 }}
-              className="bg-gray-800/30 rounded-lg p-4 border-l-4 border-green-500"
+              className="bg-white/5 border border-white/10 rounded-lg p-4 border-l-4 border-starkYellow hover:bg-white/10 transition-all duration-300"
             >
               <div className="flex items-center justify-between">
                 <div className="flex items-center gap-4">
                   <div
-                    className={`w-12 h-12 rounded-full bg-gradient-to-br ${getTierColor(tier.tier)} flex items-center justify-center text-white font-bold text-lg`}
+                    className={`w-12 h-12 rounded-full bg-gradient-to-br from-starkYellow to-starkYellow-light flex items-center justify-center text-black font-bold text-lg`}
                   >
                     {getTierIcon(tier.tier)}
                   </div>
@@ -60,7 +60,7 @@ export default function PrizeDistribution({
                     <h3 className="text-white font-semibold">
                       {tier.description}
                     </h3>
-                    <p className="text-gray-400 text-sm">
+                    <p className="text-white/70 text-sm">
                       Match {tier.matches} number{tier.matches !== 1 ? "s" : ""}
                     </p>
                   </div>
@@ -68,18 +68,18 @@ export default function PrizeDistribution({
 
                 <div className="text-right">
                   <div className="flex items-center gap-2 mb-1">
-                    <Percent className="w-4 h-4 text-blue-400" />
+                    <Percent className="w-4 h-4 text-starkYellow" />
                     <span className="text-white font-semibold">
                       {tier.percentageOfPool}% of pool
                     </span>
                   </div>
                   {tier.estimatedReward && (
                     <div className="flex items-center gap-2">
-                      <DollarSign className="w-4 h-4 text-green-400" />
-                      <span className="text-green-400 font-semibold">
+                      <DollarSign className="w-4 h-4 text-starkYellow" />
+                      <span className="text-starkYellow font-semibold">
                         {formatCurrency(tier.estimatedReward)}
                       </span>
-                      <span className="text-gray-400 text-sm">estimated</span>
+                      <span className="text-white/60 text-sm">estimated</span>
                     </div>
                   )}
                 </div>
@@ -89,12 +89,12 @@ export default function PrizeDistribution({
         </div>
 
         {/* Additional Rules */}
-        <div className="mt-6 p-4 bg-blue-900/20 rounded-lg border border-blue-500/30">
+        <div className="mt-6 p-4 bg-starkYellow/10 rounded-lg border border-starkYellow/30">
           <div className="flex items-start gap-3">
-            <Info className="w-5 h-5 text-blue-400 mt-0.5 flex-shrink-0" />
+            <Info className="w-5 h-5 text-starkYellow mt-0.5 flex-shrink-0" />
             <div>
               <h4 className="text-white font-semibold mb-2">Prize Rules</h4>
-              <ul className="text-gray-300 text-sm space-y-1">
+              <ul className="text-white/80 text-sm space-y-1">
                 {prizeRules.map((rule, index) => (
                   <li key={index}>• {rule}</li>
                 ))}
@@ -108,11 +108,11 @@ export default function PrizeDistribution({
           <h4 className="text-white font-semibold mb-3">
             Prize Pool Distribution
           </h4>
-          <div className="flex h-8 rounded-lg overflow-hidden">
+          <div className="flex h-8 rounded-lg overflow-hidden border border-white/10">
             {defaultPrizeTiers.map((tier) => (
               <div
                 key={tier.tier}
-                className={`bg-gradient-to-r ${getTierColor(tier.tier)} flex items-center justify-center text-white text-xs font-bold`}
+                className={`bg-gradient-to-r from-starkYellow/80 to-starkYellow flex items-center justify-center text-black text-xs font-bold`}
                 style={{ width: `${tier.percentageOfPool}%` }}
                 title={`${tier.description}: ${tier.percentageOfPool}%`}
               >
@@ -120,7 +120,7 @@ export default function PrizeDistribution({
               </div>
             ))}
           </div>
-          <div className="flex justify-between text-xs text-gray-400 mt-2">
+          <div className="flex justify-between text-xs text-white/70 mt-2">
             {defaultPrizeTiers.map((tier) => (
               <span key={tier.tier} className="text-center">
                 {tier.matches} matches
diff --git a/packages/nextjs/components/dashboard/dashboard/LastDrawResultsCard.tsx b/packages/nextjs/components/dashboard/dashboard/LastDrawResultsCard.tsx
index eec16ab2..fb948b1f 100644
--- a/packages/nextjs/components/dashboard/dashboard/LastDrawResultsCard.tsx
+++ b/packages/nextjs/components/dashboard/dashboard/LastDrawResultsCard.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import Card from "~~/components/dashboard/dashboard/Card";
+import { motion } from "framer-motion";
 import { LastDrawResults } from "~~/components/LastDrawResults";
 
 interface LastDrawResultsCardProps {
@@ -12,9 +12,23 @@ export default function LastDrawResultsCard({
 }: LastDrawResultsCardProps) {
   if (variant === "card") {
     return (
-      <Card className="p-6">
-        <LastDrawResults />
-      </Card>
+      <motion.div
+        initial={{ opacity: 0, scale: 0.9 }}
+        animate={{ opacity: 1, scale: 1 }}
+        transition={{ duration: 0.6, ease: "easeOut" }}
+        className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6"
+        style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+      >
+        {/* Gradient Background Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
+
+        {/* Animated Background Glow */}
+        <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/10 via-purple-500/10 to-starkYellow/10 rounded-2xl blur-xl opacity-30 animate-pulse" />
+
+        <div className="relative z-10">
+          <LastDrawResults />
+        </div>
+      </motion.div>
     );
   }
 
diff --git a/packages/nextjs/components/sections/PrizeDistributionSection.tsx b/packages/nextjs/components/sections/PrizeDistributionSection.tsx
index 5d0283cb..1964ed3a 100644
--- a/packages/nextjs/components/sections/PrizeDistributionSection.tsx
+++ b/packages/nextjs/components/sections/PrizeDistributionSection.tsx
@@ -21,7 +21,7 @@ export function PrizeDistributionSection({
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6 }}
-            className="text-3xl md:text-4xl font-bold text-white mb-4"
+            className="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-starkYellow to-white bg-clip-text text-transparent"
           >
             Prize Distribution
           </motion.h2>
@@ -29,7 +29,7 @@ export function PrizeDistributionSection({
             initial={{ opacity: 0, y: 20 }}
             whileInView={{ opacity: 1, y: 0 }}
             transition={{ duration: 0.6, delay: 0.2 }}
-            className="text-lg text-gray-300 max-w-2xl mx-auto"
+            className="text-lg text-white/80 max-w-2xl mx-auto"
           >
             Understand how prizes are distributed across different winning
             tiers. Transparency is key to our platform.
@@ -40,9 +40,18 @@ export function PrizeDistributionSection({
           initial={{ opacity: 0, y: 40 }}
           whileInView={{ opacity: 1, y: 0 }}
           transition={{ duration: 0.8, delay: 0.4 }}
-          className="max-w-4xl mx-auto"
+          className="max-w-4xl mx-auto relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-8"
+          style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
         >
-          <PrizeDistribution />
+          {/* Gradient Background Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
+
+          {/* Animated Background Glow */}
+          <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/10 via-purple-500/10 to-starkYellow/10 rounded-2xl blur-xl opacity-30 animate-pulse" />
+
+          <div className="relative z-10">
+            <PrizeDistribution />
+          </div>
         </motion.div>
 
         <motion.div
@@ -51,7 +60,7 @@ export function PrizeDistributionSection({
           transition={{ duration: 0.6, delay: 0.6 }}
           className="text-center mt-8"
         >
-          <p className="text-gray-400 text-sm">
+          <p className="text-white/60 text-sm">
             Prize amounts are estimates based on current pool size. Actual
             prizes may vary.
           </p>

From 2aa25cf38134273897315a45b49b9c2b62a2645a Mon Sep 17 00:00:00 2001
From: drakkomaximo <andres.villanueva.tabares@gmail.com>
Date: Wed, 1 Oct 2025 16:39:33 -0500
Subject: [PATCH 6/8] Refactor UI components for Claim, Mint, Unmint pages and
 TokenMint/TokenUnmint components to enhance styling and consistency. Updated
 color schemes to use 'starkYellow' and improved layout with gradient
 backgrounds and animations.

---
 packages/nextjs/app/dapp/claim/page.tsx     |  19 ++-
 packages/nextjs/app/dapp/mint/page.tsx      | 176 +++++++++++---------
 packages/nextjs/app/dapp/unmint/page.tsx    | 128 +++++++-------
 packages/nextjs/components/token-mint.tsx   |  87 +++++-----
 packages/nextjs/components/token-unmint.tsx |  92 +++++-----
 5 files changed, 278 insertions(+), 224 deletions(-)

diff --git a/packages/nextjs/app/dapp/claim/page.tsx b/packages/nextjs/app/dapp/claim/page.tsx
index 3934db7d..4d1cd8ed 100644
--- a/packages/nextjs/app/dapp/claim/page.tsx
+++ b/packages/nextjs/app/dapp/claim/page.tsx
@@ -19,8 +19,8 @@ export default function ClaimPage() {
             transition={{ duration: 0.6 }}
           >
             <div className="flex items-center justify-center gap-3 mb-4">
-              <Gift className="h-8 w-8 text-[#00FFA3]" />
-              <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-[#00FFA3] to-[#00E5FF] bg-clip-text text-transparent">
+              <Gift className="h-8 w-8 text-starkYellow" />
+              <h1 className="text-4xl md:text-5xl font-bold bg-gradient-to-r from-starkYellow to-white bg-clip-text text-transparent">
                 {t("navigation.claim")}
               </h1>
             </div>
@@ -28,18 +28,23 @@ export default function ClaimPage() {
 
           {/* Coming Soon Message */}
           <motion.div
-            className="bg-black/40 backdrop-blur-md border border-[#00FFA3]/20 rounded-2xl p-8"
+            className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-8"
+            style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
             initial={{ y: 30, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ duration: 0.6, delay: 0.2 }}
           >
-            <div className="absolute inset-0 bg-gradient-to-r from-[#00FFA3]/10 via-transparent to-[#00E5FF]/10 rounded-2xl blur-xl" />
+            {/* Gradient Background Overlay */}
+            <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
-            <div className="relative">
-              <p className="text-xl text-white/80">
+            {/* Animated Background Glow */}
+            <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/10 via-purple-500/10 to-starkYellow/10 rounded-2xl blur-xl opacity-30 animate-pulse" />
+
+            <div className="relative z-10">
+              <p className="text-xl text-white">
                 {t("comingSoon.message", "Coming Soon")}
               </p>
-              <p className="text-sm text-white/60 mt-2">
+              <p className="text-sm text-white/70 mt-2">
                 {t(
                   "comingSoon.description",
                   "This feature will be available soon. Stay tuned!",
diff --git a/packages/nextjs/app/dapp/mint/page.tsx b/packages/nextjs/app/dapp/mint/page.tsx
index c8b7cef4..441f3c36 100644
--- a/packages/nextjs/app/dapp/mint/page.tsx
+++ b/packages/nextjs/app/dapp/mint/page.tsx
@@ -22,10 +22,10 @@ export default function MintPage() {
 
       {/* Page Header */}
       <div className="mb-8 text-center">
-        <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-violet-500 to-indigo-600 mb-4">
+        <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-starkYellow to-white mb-4">
           Mint STRKP Tokens
         </h1>
-        <p className="max-w-2xl mx-auto text-gray-300 text-lg">
+        <p className="max-w-2xl mx-auto text-white/80 text-lg">
           Convert your STRK tokens to STRKP tokens to participate in our gaming
           ecosystem.
         </p>
@@ -50,88 +50,112 @@ export default function MintPage() {
       </div>
 
       <div className="max-w-3xl mx-auto mt-12 grid md:grid-cols-2 gap-8 mb-8">
-        <div className="bg-gray-900 rounded-xl p-6 border border-purple-500/20">
-          <h2 className="text-xl font-bold mb-4 text-purple-300">
-            About STRKP Tokens
-          </h2>
-          <p className="text-gray-300 mb-4">
-            STRKP tokens are the native gaming currency of our platform. These
-            tokens are required to participate in lottery games, purchase
-            tickets, and access premium features within the StarkLotto
-            ecosystem.
-          </p>
-          <p className="text-gray-300">
-            The minting process converts your STRK tokens at a 1:1 ratio, with a
-            minimal fee of 0.5% to support platform development and maintenance.
-          </p>
+        <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+          {/* Gradient Background Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
+
+          {/* Animated Background Glow */}
+          <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/10 via-purple-500/10 to-starkYellow/10 rounded-2xl blur-xl opacity-30 animate-pulse" />
+
+          <div className="relative z-10">
+            <h2 className="text-xl font-bold mb-4 text-white">
+              About STRKP Tokens
+            </h2>
+            <p className="text-white/80 mb-4">
+              STRKP tokens are the native gaming currency of our platform. These
+              tokens are required to participate in lottery games, purchase
+              tickets, and access premium features within the StarkLotto
+              ecosystem.
+            </p>
+            <p className="text-white/80">
+              The minting process converts your STRK tokens at a 1:1 ratio, with a
+              minimal fee of 0.5% to support platform development and maintenance.
+            </p>
+          </div>
         </div>
-        <div className="bg-gray-900 rounded-xl p-6 border border-purple-500/20">
-          <h2 className="text-xl font-bold mb-4 text-purple-300">
-            Minting Guidelines
-          </h2>
-          <ul className="text-gray-300 space-y-2">
-            <li className="flex gap-2 items-start">
-              <span className="text-purple-400 font-bold">•</span>
-              <span>Minting is processed instantly on-chain</span>
-            </li>
-            <li className="flex gap-2 items-start">
-              <span className="text-purple-400 font-bold">•</span>
-              <span>1 STRK = 1 STRKP (minus 0.5% fee)</span>
-            </li>
-            <li className="flex gap-2 items-start">
-              <span className="text-purple-400 font-bold">•</span>
-              <span>No minimum amount required</span>
-            </li>
-            <li className="flex gap-2 items-start">
-              <span className="text-purple-400 font-bold">•</span>
-              <span>STRKP tokens can be used immediately for gaming</span>
-            </li>
-            <li className="flex gap-2 items-start">
-              <span className="text-purple-400 font-bold">•</span>
-              <span>Secure and transparent smart contract execution</span>
-            </li>
-          </ul>
+        <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+          {/* Gradient Background Overlay */}
+          <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
+
+          {/* Animated Background Glow */}
+          <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/10 via-purple-500/10 to-starkYellow/10 rounded-2xl blur-xl opacity-30 animate-pulse" />
+
+          <div className="relative z-10">
+            <h2 className="text-xl font-bold mb-4 text-white">
+              Minting Guidelines
+            </h2>
+            <ul className="text-white/80 space-y-2">
+              <li className="flex gap-2 items-start">
+                <span className="text-starkYellow font-bold">•</span>
+                <span>Minting is processed instantly on-chain</span>
+              </li>
+              <li className="flex gap-2 items-start">
+                <span className="text-starkYellow font-bold">•</span>
+                <span>1 STRK = 1 STRKP (minus 0.5% fee)</span>
+              </li>
+              <li className="flex gap-2 items-start">
+                <span className="text-starkYellow font-bold">•</span>
+                <span>No minimum amount required</span>
+              </li>
+              <li className="flex gap-2 items-start">
+                <span className="text-starkYellow font-bold">•</span>
+                <span>STRKP tokens can be used immediately for gaming</span>
+              </li>
+              <li className="flex gap-2 items-start">
+                <span className="text-starkYellow font-bold">•</span>
+                <span>Secure and transparent smart contract execution</span>
+              </li>
+            </ul>
+          </div>
         </div>
       </div>
 
       {/* Additional information section */}
-      <div className="max-w-3xl mx-auto mt-8 bg-gray-900 rounded-xl p-6 border border-purple-500/20">
-        <h2 className="text-xl font-bold mb-4 text-purple-300 text-center">
-          Why Mint STRKP?
-        </h2>
-        <div className="grid md:grid-cols-3 gap-6 text-center">
-          <div>
-            <div className="w-12 h-12 mx-auto mb-3 bg-purple-500/20 rounded-full flex items-center justify-center">
-              <span className="text-2xl">🎮</span>
+      <div className="max-w-3xl mx-auto mt-8 relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+        {/* Gradient Background Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
+
+        {/* Animated Background Glow */}
+        <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/10 via-purple-500/10 to-starkYellow/10 rounded-2xl blur-xl opacity-30 animate-pulse" />
+
+        <div className="relative z-10">
+          <h2 className="text-xl font-bold mb-4 text-white text-center">
+            Why Mint STRKP?
+          </h2>
+          <div className="grid md:grid-cols-3 gap-6 text-center">
+            <div>
+              <div className="w-12 h-12 mx-auto mb-3 bg-starkYellow/20 border border-starkYellow/30 rounded-full flex items-center justify-center">
+                <span className="text-2xl">🎮</span>
+              </div>
+              <h3 className="font-semibold text-white mb-2">
+                Gaming Access
+              </h3>
+              <p className="text-white/80 text-sm">
+                Required currency for all lottery games and premium features
+              </p>
             </div>
-            <h3 className="font-semibold text-purple-300 mb-2">
-              Gaming Access
-            </h3>
-            <p className="text-gray-300 text-sm">
-              Required currency for all lottery games and premium features
-            </p>
-          </div>
-          <div>
-            <div className="w-12 h-12 mx-auto mb-3 bg-purple-500/20 rounded-full flex items-center justify-center">
-              <span className="text-2xl">⚡</span>
+            <div>
+              <div className="w-12 h-12 mx-auto mb-3 bg-starkYellow/20 border border-starkYellow/30 rounded-full flex items-center justify-center">
+                <span className="text-2xl">⚡</span>
+              </div>
+              <h3 className="font-semibold text-white mb-2">
+                Instant Conversion
+              </h3>
+              <p className="text-white/80 text-sm">
+                Quick and seamless token conversion with immediate availability
+              </p>
             </div>
-            <h3 className="font-semibold text-purple-300 mb-2">
-              Instant Conversion
-            </h3>
-            <p className="text-gray-300 text-sm">
-              Quick and seamless token conversion with immediate availability
-            </p>
-          </div>
-          <div>
-            <div className="w-12 h-12 mx-auto mb-3 bg-purple-500/20 rounded-full flex items-center justify-center">
-              <span className="text-2xl">🔒</span>
+            <div>
+              <div className="w-12 h-12 mx-auto mb-3 bg-starkYellow/20 border border-starkYellow/30 rounded-full flex items-center justify-center">
+                <span className="text-2xl">🔒</span>
+              </div>
+              <h3 className="font-semibold text-white mb-2">
+                Secure Process
+              </h3>
+              <p className="text-white/80 text-sm">
+                Protected by smart contracts on the Starknet blockchain
+              </p>
             </div>
-            <h3 className="font-semibold text-purple-300 mb-2">
-              Secure Process
-            </h3>
-            <p className="text-gray-300 text-sm">
-              Protected by smart contracts on the Starknet blockchain
-            </p>
           </div>
         </div>
       </div>
diff --git a/packages/nextjs/app/dapp/unmint/page.tsx b/packages/nextjs/app/dapp/unmint/page.tsx
index fa96f71c..59bd4577 100644
--- a/packages/nextjs/app/dapp/unmint/page.tsx
+++ b/packages/nextjs/app/dapp/unmint/page.tsx
@@ -22,10 +22,10 @@ export default function UnmintPage() {
 
       {/* Page Header */}
       <div className="mb-8 text-center">
-        <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-purple-400 via-violet-500 to-indigo-600 mb-4">
+        <h1 className="text-3xl font-bold tracking-tighter sm:text-5xl bg-clip-text text-transparent bg-gradient-to-r from-starkYellow to-white mb-4">
           Unmint STRKP Tokens
         </h1>
-        <p className="max-w-2xl mx-auto text-gray-300 text-lg">
+        <p className="max-w-2xl mx-auto text-white/80 text-lg">
           Convert your STRKP prize tokens back to STRK. Only tokens earned as
           lottery prizes are eligible for conversion.
         </p>
@@ -53,68 +53,84 @@ export default function UnmintPage() {
       <div className="max-w-4xl mx-auto">
         <div className="grid md:grid-cols-2 gap-8">
           {/* How it works */}
-          <div className="bg-gray-900/50 backdrop-blur-sm rounded-xl p-6 border border-purple-500/20">
-            <h3 className="text-xl font-semibold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-purple-600">
-              How Unminting Works
-            </h3>
-            <div className="space-y-3 text-gray-300">
-              <div className="flex items-center gap-3 gap-x-5">
-                <div className="w-6 h-6 rounded-full bg-purple-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <span className="text-purple-400 text-sm font-bold">1</span>
+          <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+            {/* Gradient Background Overlay */}
+            <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
+
+            {/* Animated Background Glow */}
+            <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/10 via-purple-500/10 to-starkYellow/10 rounded-2xl blur-xl opacity-30 animate-pulse" />
+
+            <div className="relative z-10">
+              <h3 className="text-xl font-semibold mb-4 text-white">
+                How Unminting Works
+              </h3>
+              <div className="space-y-3 text-white/80">
+                <div className="flex items-center gap-3 gap-x-5">
+                  <div className="w-6 h-6 rounded-full bg-starkYellow/20 border border-starkYellow/30 flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <span className="text-starkYellow text-sm font-bold">1</span>
+                  </div>
+                  <p>
+                    Select a percentage (25%, 50%, 75%, or 100%) of your
+                    convertible STRKP balance
+                  </p>
                 </div>
-                <p>
-                  Select a percentage (25%, 50%, 75%, or 100%) of your
-                  convertible STRKP balance
-                </p>
-              </div>
-              <div className="flex items-center gap-3 gap-x-5">
-                <div className="w-6 h-6 rounded-full bg-purple-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <span className="text-purple-400 text-sm font-bold">2</span>
+                <div className="flex items-center gap-3 gap-x-5">
+                  <div className="w-6 h-6 rounded-full bg-starkYellow/20 border border-starkYellow/30 flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <span className="text-starkYellow text-sm font-bold">2</span>
+                  </div>
+                  <p>A 3% fee is deducted from the conversion amount</p>
                 </div>
-                <p>A 3% fee is deducted from the conversion amount</p>
-              </div>
-              <div className="flex items-center gap-3 gap-x-5">
-                <div className="w-6 h-6 rounded-full bg-purple-500/20 flex items-center justify-center flex-shrink-0 mt-0.5">
-                  <span className="text-purple-400 text-sm font-bold">3</span>
+                <div className="flex items-center gap-3 gap-x-5">
+                  <div className="w-6 h-6 rounded-full bg-starkYellow/20 border border-starkYellow/30 flex items-center justify-center flex-shrink-0 mt-0.5">
+                    <span className="text-starkYellow text-sm font-bold">3</span>
+                  </div>
+                  <p>Receive STRK tokens at a 1:1 rate (minus fees)</p>
                 </div>
-                <p>Receive STRK tokens at a 1:1 rate (minus fees)</p>
               </div>
             </div>
           </div>
 
           {/* Important Notes */}
-          <div className="bg-gray-900/50 backdrop-blur-sm rounded-xl p-6 border border-purple-500/20">
-            <h3 className="text-xl font-semibold mb-4 bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-purple-600">
-              Important Notes
-            </h3>
-            <div className="space-y-3 text-gray-300">
-              <div className="flex items-center gap-3">
-                <div className="w-2 h-2 rounded-full bg-purple-400 flex-shrink-0 mt-2"></div>
-                <p>
-                  <strong>Prize Tokens Only:</strong> Only STRKP tokens earned
-                  as lottery prizes can be unminted
-                </p>
-              </div>
-              <div className="flex items-center gap-3 gap-x-5">
-                <div className="w-2 h-2 rounded-full bg-purple-400 flex-shrink-0 mt-2"></div>
-                <p>
-                  <strong>Gameplay Tokens:</strong> STRKP tokens minted for
-                  gameplay are NOT convertible
-                </p>
-              </div>
-              <div className="flex items-center gap-3 gap-x-5">
-                <div className="w-2 h-2 rounded-full bg-purple-400 flex-shrink-0 mt-2"></div>
-                <p>
-                  <strong>Conversion Fee:</strong> A 3% fee applies to all
-                  unmint operations
-                </p>
-              </div>
-              <div className="flex items-center gap-3 gap-x-5">
-                <div className="w-2 h-2 rounded-full bg-purple-400 flex-shrink-0 mt-2"></div>
-                <p>
-                  <strong>Percentage Selection:</strong> Choose from predefined
-                  percentages - manual amounts are not allowed
-                </p>
+          <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+            {/* Gradient Background Overlay */}
+            <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
+
+            {/* Animated Background Glow */}
+            <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/10 via-purple-500/10 to-starkYellow/10 rounded-2xl blur-xl opacity-30 animate-pulse" />
+
+            <div className="relative z-10">
+              <h3 className="text-xl font-semibold mb-4 text-white">
+                Important Notes
+              </h3>
+              <div className="space-y-3 text-white/80">
+                <div className="flex items-center gap-3">
+                  <div className="w-2 h-2 rounded-full bg-starkYellow flex-shrink-0 mt-2"></div>
+                  <p>
+                    <strong>Prize Tokens Only:</strong> Only STRKP tokens earned
+                    as lottery prizes can be unminted
+                  </p>
+                </div>
+                <div className="flex items-center gap-3 gap-x-5">
+                  <div className="w-2 h-2 rounded-full bg-starkYellow flex-shrink-0 mt-2"></div>
+                  <p>
+                    <strong>Gameplay Tokens:</strong> STRKP tokens minted for
+                    gameplay are NOT convertible
+                  </p>
+                </div>
+                <div className="flex items-center gap-3 gap-x-5">
+                  <div className="w-2 h-2 rounded-full bg-starkYellow flex-shrink-0 mt-2"></div>
+                  <p>
+                    <strong>Conversion Fee:</strong> A 3% fee applies to all
+                    unmint operations
+                  </p>
+                </div>
+                <div className="flex items-center gap-3 gap-x-5">
+                  <div className="w-2 h-2 rounded-full bg-starkYellow flex-shrink-0 mt-2"></div>
+                  <p>
+                    <strong>Percentage Selection:</strong> Choose from predefined
+                    percentages - manual amounts are not allowed
+                  </p>
+                </div>
               </div>
             </div>
           </div>
diff --git a/packages/nextjs/components/token-mint.tsx b/packages/nextjs/components/token-mint.tsx
index f7c29261..3c39e0d7 100644
--- a/packages/nextjs/components/token-mint.tsx
+++ b/packages/nextjs/components/token-mint.tsx
@@ -308,22 +308,28 @@ export default function TokenMint({
           document.body,
         )}
 
-      <div className="bg-gray-900 text-white rounded-xl shadow-lg border border-purple-500/20 overflow-hidden">
+      <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md text-white shadow-lg" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+        {/* Gradient Background Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
+
+        {/* Animated Background Glow */}
+        <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/10 via-purple-500/10 to-starkYellow/10 rounded-2xl blur-xl opacity-30 animate-pulse" />
+
         {/* Header */}
-        <div className="flex items-center justify-center p-4 border-b border-purple-500/30">
-          <h2 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-purple-600">
+        <div className="relative z-10 flex items-center justify-center p-4 border-b border-white/10">
+          <h2 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-starkYellow to-white">
             Mint $tarkPlay
           </h2>
         </div>
 
         {/* Body */}
-        <div className="p-4 space-y-4">
+        <div className="relative z-10 p-4 space-y-4">
           {/* Input STRK */}
-          <div className="bg-gray-800 p-4 rounded-lg border border-purple-500/20">
+          <div className="bg-white/5 border border-white/10 p-4 rounded-lg">
             <div className="flex items-center justify-between mb-2">
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center p-0.5">
-                  <div className="w-full h-full rounded-full bg-gray-900 flex items-center justify-center">
+                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-starkYellow to-starkYellow-light flex items-center justify-center p-0.5">
+                  <div className="w-full h-full rounded-full bg-black flex items-center justify-center">
                     <Image
                       src="/strk-svg.svg"
                       alt="STRK"
@@ -333,7 +339,7 @@ export default function TokenMint({
                     />
                   </div>
                 </div>
-                <span className="font-semibold">STRK</span>
+                <span className="font-semibold text-white">STRK</span>
               </div>
               <div className="w-[60%]">
                 <StarkInput
@@ -346,60 +352,60 @@ export default function TokenMint({
                 />
               </div>
             </div>
-            <div className="flex items-center justify-between text-sm text-gray-300">
+            <div className="flex items-center justify-between text-sm text-white/70">
               <span>Balance: {strkBalance.toFixed(4)} STRK</span>
               <button
-                className="h-6 px-2 text-xs bg-purple-500/20 hover:bg-purple-500/30 rounded-md transition-colors text-purple-300"
+                className="h-6 px-2 text-xs bg-starkYellow/20 hover:bg-starkYellow/30 rounded-md transition-colors text-starkYellow"
                 onClick={handleMaxClick}
               >
                 MAX
               </button>
             </div>
-            <div className="text-xs text-gray-400 mt-1">
+            <div className="text-xs text-white/60 mt-1">
               💡 Max 95% of balance to leave room for transaction fees
             </div>
           </div>
 
           {/* Arrow */}
           <div className="flex justify-center">
-            <div className="bg-purple-500/20 p-2 rounded-full">
-              <RotateCw size={24} className="text-purple-400 rotate-90" />
+            <div className="bg-starkYellow/20 border border-starkYellow/30 p-2 rounded-full">
+              <RotateCw size={24} className="text-starkYellow rotate-90" />
             </div>
           </div>
 
           {/* Output STRKP */}
-          <div className="bg-gray-800 p-4 rounded-lg border border-purple-500/20">
+          <div className="bg-white/5 border border-white/10 p-4 rounded-lg">
             <div className="flex items-center justify-between mb-2">
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center p-0.5">
-                  <div className="w-full h-full rounded-full bg-gray-900 flex items-center justify-center">
-                    <span className="text-purple-400 text-xs font-bold">
+                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-starkYellow to-starkYellow-light flex items-center justify-center p-0.5">
+                  <div className="w-full h-full rounded-full bg-black flex items-center justify-center">
+                    <span className="text-starkYellow text-xs font-bold">
                       $P
                     </span>
                   </div>
                 </div>
-                <span className="font-semibold">$TRKP</span>
+                <span className="font-semibold text-white">$TRKP</span>
               </div>
-              <div className="text-right text-xl font-medium">
+              <div className="text-right text-xl font-medium text-white">
                 {isValidInput ? mintedAmount.toFixed(6) : "0.0"}
               </div>
             </div>
-            <div className="flex items-center justify-between text-sm text-gray-300">
+            <div className="flex items-center justify-between text-sm text-white/70">
               <span>You will receive</span>
-              <span className="font-medium text-purple-300">
+              <span className="font-medium text-starkYellow">
                 {isValidInput ? mintedAmount.toFixed(6) : "0.0"} $TRKP
               </span>
             </div>
-            <div className="flex items-center justify-between text-sm text-gray-300">
+            <div className="flex items-center justify-between text-sm text-white/70">
               <span>Current Balance</span>
-              <span className="font-medium text-purple-300">
+              <span className="font-medium text-starkYellow">
                 {starkPlayBalanceFormatted.toFixed(6)} $TRKP
               </span>
             </div>
           </div>
 
           {/* Fee details */}
-          <div className="bg-gray-800 p-4 rounded-lg border border-purple-500/20 space-y-2">
+          <div className="bg-white/5 border border-white/10 p-4 rounded-lg space-y-2">
             <div className="flex items-center justify-between text-sm">
               <div className="flex items-center gap-2">
                 <Image
@@ -409,12 +415,12 @@ export default function TokenMint({
                   height={16}
                   className="w-4 h-4"
                 />
-                <span>1 STRK = 1 $TRKP</span>
+                <span className="text-white/80">1 STRK = 1 $TRKP</span>
               </div>
             </div>
             <div className="flex items-center justify-between text-sm">
               <div className="flex items-center gap-1">
-                <span>
+                <span className="text-white/80">
                   Mint Fee (
                   {feePercent !== undefined
                     ? (feePercent * 100).toFixed(1) + "%"
@@ -422,28 +428,27 @@ export default function TokenMint({
                   )
                 </span>
                 <Tooltip
-                  content={`A ${
-                    feePercent !== undefined
+                  content={`A ${feePercent !== undefined
                       ? (feePercent * 100).toFixed(2)
                       : "--"
-                  }% fee is applied to all mint operations`}
+                    }% fee is applied to all mint operations`}
                 >
-                  <Info size={20} className="text-purple-400" />
+                  <Info size={20} className="text-starkYellow" />
                 </Tooltip>
               </div>
-              <span className="text-gray-300">
+              <span className="text-white/70">
                 {isValidInput ? feeAmount.toFixed(6) : "0.0"} STRK
               </span>
             </div>
             {feeLoading && (
-              <p className="text-xs text-gray-500">Loading commission…</p>
+              <p className="text-xs text-white/60">Loading commission…</p>
             )}
             {feeError && (
-              <p className="text-xs text-red-500">Error obtaining commission</p>
+              <p className="text-xs text-red-400">Error obtaining commission</p>
             )}
             <div className="flex items-center justify-between text-sm">
-              <span>You will receive</span>
-              <span className="font-medium text-purple-300">
+              <span className="text-white/80">You will receive</span>
+              <span className="font-medium text-starkYellow">
                 {isValidInput ? mintedAmount.toFixed(6) : "0.0"} $TRKP
               </span>
             </div>
@@ -452,15 +457,15 @@ export default function TokenMint({
         </div>
 
         {/* Mint button */}
-        <div className="p-4">
+        <div className="relative z-10 p-4">
           <button
-            className={`w-full py-6 text-lg font-medium rounded-lg transition-colors ${
-              isValidInput && !isLoading
-                ? "bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800"
-                : "bg-gray-700 text-gray-400 cursor-not-allowed"
-            }`}
+            className={`w-full py-6 text-lg font-medium rounded-lg transition-all duration-300 ${isValidInput && !isLoading
+                ? "bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black hover:scale-105"
+                : "bg-white/5 border border-white/20 text-white/50 cursor-not-allowed"
+              }`}
             disabled={!isValidInput || isLoading}
             onClick={handleMint}
+            style={isValidInput && !isLoading ? { boxShadow: "0 4px 12px rgba(255,214,0,0.2)" } : {}}
           >
             {isLoading ? "Minting..." : "Mint $TRKP"}
           </button>
diff --git a/packages/nextjs/components/token-unmint.tsx b/packages/nextjs/components/token-unmint.tsx
index 9d743f63..ecbc6b82 100644
--- a/packages/nextjs/components/token-unmint.tsx
+++ b/packages/nextjs/components/token-unmint.tsx
@@ -131,18 +131,24 @@ export default function TokenUnmint({
           document.body,
         )}
 
-      <div className="bg-gray-900 text-white rounded-xl shadow-lg overflow-hidden border border-purple-500/20">
-        <div className="flex items-center justify-center p-4 border-b border-purple-500/30">
-          <h2 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-purple-400 to-purple-600">
+      <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md text-white shadow-lg" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+        {/* Gradient Background Overlay */}
+        <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
+
+        {/* Animated Background Glow */}
+        <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/10 via-purple-500/10 to-starkYellow/10 rounded-2xl blur-xl opacity-30 animate-pulse" />
+
+        <div className="relative z-10 flex items-center justify-center p-4 border-b border-white/10">
+          <h2 className="text-2xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-starkYellow to-white">
             Unmint STRKP
           </h2>
         </div>
 
-        <div className="p-4 space-y-4">
+        <div className="relative z-10 p-4 space-y-4">
           {/* Warning about convertible tokens */}
-          <div className="rounded-lg bg-yellow-900/20 border border-yellow-500/30 py-1 px-3">
+          <div className="rounded-lg bg-starkYellow/10 border border-starkYellow/30 py-1 px-3">
             <div className="flex items-start gap-2">
-              <div className="text-sm text-yellow-200">
+              <div className="text-sm text-starkYellow">
                 <p>
                   Note: Only STRKP tokens earned as lottery prizes can be
                   converted to STRK. Tokens minted for gameplay are NOT
@@ -153,26 +159,26 @@ export default function TokenUnmint({
           </div>
 
           {/* Input STRKP - Token to spend */}
-          <div className="rounded-lg bg-gray-800 p-4 border border-purple-500/20">
+          <div className="rounded-lg bg-white/5 border border-white/10 p-4">
             <div className="flex items-center justify-between mb-2">
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center p-0.5">
-                  <div className="w-full h-full rounded-full bg-gray-900 flex items-center justify-center">
-                    <span className="text-purple-400 text-xs font-bold">
+                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-starkYellow to-starkYellow-light flex items-center justify-center p-0.5">
+                  <div className="w-full h-full rounded-full bg-black flex items-center justify-center">
+                    <span className="text-starkYellow text-xs font-bold">
                       $P
                     </span>
                   </div>
                 </div>
-                <span className="font-semibold">STRKP</span>
+                <span className="font-semibold text-white">STRKP</span>
               </div>
-              <div className="text-right text-xl font-medium">
+              <div className="text-right text-xl font-medium text-white">
                 {isValidSelection ? selectedAmount.toFixed(6) : "0.0"}
               </div>
             </div>
 
-            <div className="flex items-center justify-between text-sm text-gray-300">
+            <div className="flex items-center justify-between text-sm text-white/70">
               <span>Balance: {prizeBalance.toFixed(4)} STRKP</span>
-              <span className="font-medium text-purple-300">
+              <span className="font-medium text-starkYellow">
                 {isValidSelection ? selectedAmount.toFixed(6) : "0.0"} STRKP
               </span>
             </div>
@@ -183,15 +189,13 @@ export default function TokenUnmint({
             {percentageOptions.map((percentage) => (
               <button
                 key={percentage}
-                className={`py-2 px-3 text-sm font-medium rounded-md transition-all duration-200 ${
-                  selectedPercentage === percentage
-                    ? "bg-purple-500 text-white shadow-lg scale-105"
-                    : "bg-purple-500/20 hover:bg-purple-500/30 text-purple-300 hover:scale-102"
-                } ${
-                  isProcessing || prizeBalance <= 0
+                className={`py-2 px-3 text-sm font-medium rounded-md transition-all duration-200 ${selectedPercentage === percentage
+                    ? "bg-starkYellow text-black shadow-lg scale-105 border border-starkYellow/30"
+                    : "bg-starkYellow/20 hover:bg-starkYellow/30 text-starkYellow hover:scale-102 border border-starkYellow/30"
+                  } ${isProcessing || prizeBalance <= 0
                     ? "opacity-50 cursor-not-allowed"
                     : "cursor-pointer"
-                }`}
+                  }`}
                 onClick={() => handlePercentageSelect(percentage)}
                 disabled={isProcessing || prizeBalance <= 0}
               >
@@ -202,17 +206,17 @@ export default function TokenUnmint({
 
           {/* Arrow indicator */}
           <div className="flex justify-center">
-            <div className="bg-purple-500/20 p-2 rounded-full">
-              <RotateCw size={24} className="text-purple-400 rotate-90" />
+            <div className="bg-starkYellow/20 border border-starkYellow/30 p-2 rounded-full">
+              <RotateCw size={24} className="text-starkYellow rotate-90" />
             </div>
           </div>
 
           {/* Output STRK - Token to receive */}
-          <div className="rounded-lg bg-gray-800 p-4 border border-purple-500/20">
+          <div className="rounded-lg bg-white/5 border border-white/10 p-4">
             <div className="flex items-center justify-between mb-2">
               <div className="flex items-center gap-2">
-                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-purple-400 to-purple-600 flex items-center justify-center p-0.5">
-                  <div className="w-full h-full rounded-full bg-gray-900 flex items-center justify-center">
+                <div className="w-8 h-8 rounded-full bg-gradient-to-br from-starkYellow to-starkYellow-light flex items-center justify-center p-0.5">
+                  <div className="w-full h-full rounded-full bg-black flex items-center justify-center">
                     <Image
                       src="/strk-svg.svg"
                       alt="STRK Token"
@@ -222,47 +226,47 @@ export default function TokenUnmint({
                     />
                   </div>
                 </div>
-                <span className="font-semibold">STRK</span>
+                <span className="font-semibold text-white">STRK</span>
               </div>
-              <div className="text-right text-xl font-medium">
+              <div className="text-right text-xl font-medium text-white">
                 {isValidSelection ? netAmount.toFixed(6) : "0.0"}
               </div>
             </div>
 
-            <div className="flex items-center justify-between text-sm text-gray-300">
+            <div className="flex items-center justify-between text-sm text-white/70">
               <span>You will receive</span>
-              <span className="font-medium text-purple-300">
+              <span className="font-medium text-starkYellow">
                 {isValidSelection ? netAmount.toFixed(6) : "0.0"} STRK
               </span>
             </div>
           </div>
 
           {/* Unmint details */}
-          <div className="rounded-lg bg-gray-800 p-4 space-y-2 border border-purple-500/20">
+          <div className="rounded-lg bg-white/5 border border-white/10 p-4 space-y-2">
             <div className="flex items-center justify-between text-sm">
               <div className="flex items-center gap-2">
-                <span className="text-purple-400 text-xs font-bold">$P</span>
-                <span>1 STRKP = 1 STRK</span>
+                <span className="text-starkYellow text-xs font-bold">$P</span>
+                <span className="text-white/80">1 STRKP = 1 STRK</span>
               </div>
             </div>
 
             <div className="flex items-center justify-between text-sm">
               <div className="flex items-center gap-1">
-                <span>Unmint Fee (3%)</span>
+                <span className="text-white/80">Unmint Fee (3%)</span>
                 <Tooltip content="A 3% fee is applied to all unmint operations">
-                  <Info size={20} className="text-purple-400" />
+                  <Info size={20} className="text-starkYellow" />
                 </Tooltip>
               </div>
-              <span>
+              <span className="text-white/70">
                 {isValidSelection ? feeAmount.toFixed(6) : "0.0"} STRKP
               </span>
             </div>
 
             <div className="flex items-center justify-between text-sm">
               <div className="flex items-center gap-1">
-                <span>Net amount</span>
+                <span className="text-white/80">Net amount</span>
               </div>
-              <span className="font-medium text-purple-300">
+              <span className="font-medium text-starkYellow">
                 {isValidSelection ? netAmount.toFixed(6) : "0.0"} STRK
               </span>
             </div>
@@ -271,15 +275,15 @@ export default function TokenUnmint({
           {error && <div className="text-red-400 text-sm px-1">{error}</div>}
         </div>
 
-        <div className="p-4">
+        <div className="relative z-10 p-4">
           <button
-            className={`w-full py-6 text-lg font-medium rounded-lg transition-colors ${
-              isValidSelection
-                ? "bg-gradient-to-r from-purple-500 to-purple-700 hover:from-purple-600 hover:to-purple-800"
-                : "bg-gray-700 text-gray-400 cursor-not-allowed"
-            }`}
+            className={`w-full py-6 text-lg font-medium rounded-lg transition-all duration-300 ${isValidSelection
+                ? "bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black hover:scale-105"
+                : "bg-white/5 border border-white/20 text-white/50 cursor-not-allowed"
+              }`}
             disabled={!isValidSelection || isProcessing}
             onClick={handleUnmint}
+            style={isValidSelection ? { boxShadow: "0 4px 12px rgba(255,214,0,0.2)" } : {}}
           >
             {isProcessing ? "Unminting..." : "Unmint STRKP"}
           </button>

From 0c4204d2498b6db1cf1f9f2161312ef300f1aff9 Mon Sep 17 00:00:00 2001
From: drakkomaximo <andres.villanueva.tabares@gmail.com>
Date: Wed, 1 Oct 2025 16:59:48 -0500
Subject: [PATCH 7/8] Enhance UI components across NotFound and BuyTickets
 pages with updated color schemes, gradient backgrounds, and improved layouts.
 Transitioned to 'starkYellow' for consistency and refined button styles for
 better user interaction.

---
 packages/nextjs/app/dapp/buy-tickets/page.tsx | 252 +++++++++---------
 packages/nextjs/app/not-found.tsx             |  29 +-
 packages/nextjs/components/Navbar.tsx         |   6 +-
 .../components/buy-tickets/LotteryDisplay.tsx |  15 +-
 .../components/buy-tickets/NumberGrid.tsx     |  17 +-
 .../buy-tickets/PurchaseSummary.tsx           |  12 +-
 .../components/buy-tickets/TicketControls.tsx |   7 +-
 .../components/buy-tickets/TicketSelector.tsx |   5 +-
 8 files changed, 170 insertions(+), 173 deletions(-)

diff --git a/packages/nextjs/app/dapp/buy-tickets/page.tsx b/packages/nextjs/app/dapp/buy-tickets/page.tsx
index ae260ace..522ce0b6 100644
--- a/packages/nextjs/app/dapp/buy-tickets/page.tsx
+++ b/packages/nextjs/app/dapp/buy-tickets/page.tsx
@@ -5,7 +5,6 @@ import { ArrowLeft } from "lucide-react";
 import { motion } from "framer-motion";
 
 import { useRouter } from "next/navigation";
-import Image from "next/image";
 import { Abi, useContract } from "@starknet-react/core";
 import { useTransactor } from "~~/hooks/scaffold-stark/useTransactor";
 import { LOTT_CONTRACT_NAME } from "~~/utils/Constants";
@@ -397,149 +396,142 @@ export default function BuyTicketsPage() {
   return (
     <div className="pb-8 px-4">
       <div className="max-w-7xl mx-auto">
-        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
-          {/* Left Column - Main Content */}
-          <div className="lg:col-span-2 space-y-6">
+        <div className="flex justify-center">
+          {/* Main Content - Centered */}
+          <div className="w-full max-w-4xl space-y-6">
             <motion.div
-              className="bg-[#1a2234] rounded-xl p-6"
+              className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6"
+              style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
               initial={{ opacity: 0, y: 20 }}
               animate={{ opacity: 1, y: 0 }}
             >
-              <h1 className="text-3xl font-bold text-purple-400 mb-6">
-                {t("buyTickets.title")}
-              </h1>
-
-              {/* Next Draw */}
-              <div className="mb-6">
-                <p className="text-gray-300 mb-1">{t("buyTickets.nextDraw")}</p>
-                <motion.p
-                  className="text-[#4ade80] text-4xl font-bold"
-                  initial={{ scale: 0.9 }}
-                  animate={{ scale: 1 }}
-                >
-                  {jackpotAmount}
-                </motion.p>
-
-                {/* Countdown - Nuevo componente basado en bloques */}
-                <div className="mt-4">
-                  <BlockBasedCountdownTimer
-                    blocksRemaining={blocksRemaining}
-                    currentBlock={currentBlock}
-                    timeRemaining={countdownFromBlocks}
-                  />
+              {/* Gradient Background Overlay */}
+              <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
+
+              {/* Animated Background Glow */}
+              <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/10 via-purple-500/10 to-starkYellow/10 rounded-2xl blur-xl opacity-30 animate-pulse" />
+
+              <div className="relative z-10">
+                <h1 className="text-3xl font-bold bg-gradient-to-r from-starkYellow to-white bg-clip-text text-transparent mb-6">
+                  {t("buyTickets.title")}
+                </h1>
+
+                {/* Next Draw */}
+                <div className="mb-6">
+                  <p className="text-white/70 mb-1">{t("buyTickets.nextDraw")}</p>
+                  <motion.p
+                    className="text-starkYellow text-4xl font-bold"
+                    initial={{ scale: 0.9 }}
+                    animate={{ scale: 1 }}
+                  >
+                    {jackpotAmount}
+                  </motion.p>
+
+                  {/* Countdown - Nuevo componente basado en bloques */}
+                  <div className="mt-4">
+                    <BlockBasedCountdownTimer
+                      blocksRemaining={blocksRemaining}
+                      currentBlock={currentBlock}
+                      timeRemaining={countdownFromBlocks}
+                    />
+                  </div>
                 </div>
-              </div>
 
-              {/* User Balance Display */}
-              <div className="bg-[#232b3b] rounded-lg p-4 mb-6">
-                <div className="flex justify-between items-center">
-                  <div className="flex items-center gap-2">
-                    <div className="text-[#4ade80]">
-                      <svg
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <rect
-                          x="2"
-                          y="6"
-                          width="20"
-                          height="12"
-                          rx="2"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                        />
-                        <path
-                          d="M6 10H10"
-                          stroke="currentColor"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                        />
-                      </svg>
+                {/* User Balance Display */}
+                <div className="bg-white/5 border border-white/10 rounded-lg p-4 mb-6">
+                  <div className="flex justify-between items-center">
+                    <div className="flex items-center gap-2">
+                      <div className="text-starkYellow">
+                        <svg
+                          width="24"
+                          height="24"
+                          viewBox="0 0 24 24"
+                          fill="none"
+                          xmlns="http://www.w3.org/2000/svg"
+                        >
+                          <rect
+                            x="2"
+                            y="6"
+                            width="20"
+                            height="12"
+                            rx="2"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                          />
+                          <path
+                            d="M6 10H10"
+                            stroke="currentColor"
+                            strokeWidth="2"
+                            strokeLinecap="round"
+                          />
+                        </svg>
+                      </div>
+                      <p className="text-white font-medium">
+                        {t("buyTickets.yourBalance")}
+                      </p>
                     </div>
-                    <p className="text-white font-medium">
-                      {t("buyTickets.yourBalance")}
+                    <p className="text-starkYellow font-bold text-lg">
+                      {userBalanceFormatted} $TRKP
                     </p>
                   </div>
-                  <p className="text-[#4ade80] font-bold text-lg">
-                    {userBalanceFormatted} $TRKP
-                  </p>
+                  {!isDrawActive && (
+                    <p className="text-red-400 text-sm mt-2">
+                      ⚠️ {t("buyTickets.drawNotActive")}
+                    </p>
+                  )}
+                  {!contractsReady && (
+                    <p className="text-starkYellow text-sm mt-2">
+                      ⚠️ {t("buyTickets.contractsNotReady")}
+                    </p>
+                  )}
                 </div>
-                {!isDrawActive && (
-                  <p className="text-red-400 text-sm mt-2">
-                    ⚠️ {t("buyTickets.drawNotActive")}
-                  </p>
-                )}
-                {!contractsReady && (
-                  <p className="text-yellow-400 text-sm mt-2">
-                    ⚠️ {t("buyTickets.contractsNotReady")}
-                  </p>
-                )}
-              </div>
 
-              {/* Ticket Controls */}
-              <TicketControls
-                ticketCount={ticketCount}
-                onIncreaseTickets={increaseTickets}
-                onDecreaseTickets={decreaseTickets}
-                onGenerateRandomForAll={generateRandomForAll}
-              />
-
-              {/* Ticket Selection */}
-              <div className="space-y-4">
-                {Array.from({ length: ticketCount }).map((_, idx) => {
-                  const ticketId = idx + 1;
-                  return (
-                    <TicketSelector
-                      key={ticketId}
-                      ticketId={ticketId}
-                      selectedNumbers={selectedNumbers[ticketId] || []}
-                      animatingNumbers={animatingNumbers}
-                      onNumberSelect={selectNumber}
-                      onGenerateRandom={generateRandom}
-                      numberAnimationVariants={numberAnimationVariants}
-                      lotteryRevealVariants={lotteryRevealVariants}
-                      ticketVariants={ticketVariants}
-                      idx={idx}
-                    />
-                  );
-                })}
-              </div>
+                {/* Ticket Controls */}
+                <TicketControls
+                  ticketCount={ticketCount}
+                  onIncreaseTickets={increaseTickets}
+                  onDecreaseTickets={decreaseTickets}
+                  onGenerateRandomForAll={generateRandomForAll}
+                />
+
+                {/* Ticket Selection */}
+                <div className="space-y-4">
+                  {Array.from({ length: ticketCount }).map((_, idx) => {
+                    const ticketId = idx + 1;
+                    return (
+                      <TicketSelector
+                        key={ticketId}
+                        ticketId={ticketId}
+                        selectedNumbers={selectedNumbers[ticketId] || []}
+                        animatingNumbers={animatingNumbers}
+                        onNumberSelect={selectNumber}
+                        onGenerateRandom={generateRandom}
+                        numberAnimationVariants={numberAnimationVariants}
+                        lotteryRevealVariants={lotteryRevealVariants}
+                        ticketVariants={ticketVariants}
+                        idx={idx}
+                      />
+                    );
+                  })}
+                </div>
 
-              {/* Purchase Summary (usa precio on-chain) */}
-              {/* Purchase Summary (usa precio on-chain) */}
-              <PurchaseSummary
-                unitPriceFormatted={unitPriceFormatted}
-                totalCostFormatted={totalFormatted}
-                isPriceLoading={priceLoading}
-                priceError={priceError?.message ?? null}
-                isLoading={isLoading}
-                txError={buyError}
-                txSuccess={buySuccess}
-                onPurchase={handlePurchase}
-                isDrawActive={isDrawActive}
-                contractsReady={contractsReady}
-              />
+                {/* Purchase Summary (usa precio on-chain) */}
+                {/* Purchase Summary (usa precio on-chain) */}
+                <PurchaseSummary
+                  unitPriceFormatted={unitPriceFormatted}
+                  totalCostFormatted={totalFormatted}
+                  isPriceLoading={priceLoading}
+                  priceError={priceError?.message ?? null}
+                  isLoading={isLoading}
+                  txError={buyError}
+                  txSuccess={buySuccess}
+                  onPurchase={handlePurchase}
+                  isDrawActive={isDrawActive}
+                  contractsReady={contractsReady}
+                />
+              </div>
             </motion.div>
           </div>
-
-          {/* Right Column - Illustration */}
-          <div className="hidden lg:block">
-            <div className="flex flex-col items-center justify-center h-full">
-              <Image
-                src="/jackpot.svg"
-                alt="Jackpot Illustration"
-                width={320}
-                height={320}
-                className="mb-6"
-              />
-              <p className="text-gray-400 text-center">
-                {/* Puedes agregar aquí más textos traducibles si lo deseas */}
-              </p>
-            </div>
-          </div>
         </div>
       </div>
     </div>
diff --git a/packages/nextjs/app/not-found.tsx b/packages/nextjs/app/not-found.tsx
index 198f80d4..c5bd152a 100644
--- a/packages/nextjs/app/not-found.tsx
+++ b/packages/nextjs/app/not-found.tsx
@@ -19,12 +19,12 @@ export default function NotFound() {
             animate={{ scale: 1, opacity: 1 }}
             transition={{ duration: 0.6, ease: "easeOut" }}
           >
-            <div className="text-8xl md:text-9xl font-bold bg-gradient-to-r from-[#00FFA3] via-[#00E5FF] to-[#00FFA3] bg-clip-text text-transparent">
+            <div className="text-8xl md:text-9xl font-bold bg-gradient-to-r from-starkYellow via-white to-starkYellow bg-clip-text text-transparent">
               404
             </div>
             {/* Floating dice around 404 */}
             <motion.div
-              className="absolute -top-4 -left-8 text-[#00FFA3]"
+              className="absolute -top-4 -left-8 text-starkYellow"
               animate={{
                 y: [-10, 10, -10],
                 rotate: [0, 180, 360],
@@ -38,7 +38,7 @@ export default function NotFound() {
               <Dices className="h-12 w-12" />
             </motion.div>
             <motion.div
-              className="absolute -top-6 -right-6 text-[#00E5FF]"
+              className="absolute -top-6 -right-6 text-starkYellow-light"
               animate={{
                 y: [10, -10, 10],
                 rotate: [360, 180, 0],
@@ -80,24 +80,29 @@ export default function NotFound() {
 
           {/* Glowing Card with Actions */}
           <motion.div
-            className="relative bg-black/40 backdrop-blur-md border border-[#00FFA3]/20 rounded-2xl p-8 mb-8"
+            className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-8 mb-8"
+            style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
             initial={{ y: 30, opacity: 0 }}
             animate={{ y: 0, opacity: 1 }}
             transition={{ duration: 0.6, delay: 0.4 }}
           >
-            {/* Glow effect */}
-            <div className="absolute inset-0 bg-gradient-to-r from-[#00FFA3]/10 via-transparent to-[#00E5FF]/10 rounded-2xl blur-xl" />
+            {/* Gradient Background Overlay */}
+            <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
-            <div className="relative">
-              <h2 className="text-xl font-semibold mb-6 text-[#00FFA3]">
+            {/* Animated Background Glow */}
+            <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/10 via-purple-500/10 to-starkYellow/10 rounded-2xl blur-xl opacity-30 animate-pulse" />
+
+            <div className="relative z-10">
+              <h2 className="text-xl font-semibold mb-6 text-white">
                 {t("error404.suggestions.title", "What would you like to do?")}
               </h2>
 
               <div className="flex flex-col sm:flex-row gap-4 justify-center">
                 {/* Go Home Button */}
-                <Link href="/">
+                <Link href="/dapp/dashboard">
                   <motion.button
-                    className="group relative flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-[#00FFA3] to-[#00E5FF] text-black font-semibold rounded-lg shadow-lg transition-all duration-300 hover:shadow-[0_0_30px_rgba(0,255,163,0.3)] min-w-[180px]"
+                    className="group relative flex items-center gap-3 px-6 py-3 bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow font-semibold rounded-lg transition-all duration-300 hover:from-starkYellow hover:to-starkYellow-light hover:text-black hover:scale-105 min-w-[180px]"
+                    style={{ boxShadow: "0 4px 12px rgba(255,214,0,0.2)" }}
                     whileHover={{ scale: 1.05 }}
                     whileTap={{ scale: 0.95 }}
                   >
@@ -109,7 +114,7 @@ export default function NotFound() {
                 {/* Go Back Button */}
                 <motion.button
                   onClick={() => window.history.back()}
-                  className="group relative flex items-center gap-3 px-6 py-3 bg-black/50 border border-[#00FFA3]/30 text-white font-semibold rounded-lg transition-all duration-300 hover:border-[#00FFA3] hover:bg-[#00FFA3]/10 min-w-[180px]"
+                  className="group relative flex items-center gap-3 px-6 py-3 bg-white/5 border border-white/20 text-white/80 font-semibold rounded-lg transition-all duration-300 hover:border-starkYellow/30 hover:bg-starkYellow/10 hover:text-starkYellow min-w-[180px]"
                   whileHover={{ scale: 1.05 }}
                   whileTap={{ scale: 0.95 }}
                 >
@@ -137,7 +142,7 @@ export default function NotFound() {
         {[...Array(6)].map((_, i) => (
           <motion.div
             key={i}
-            className="absolute w-2 h-2 bg-[#00FFA3]/20 rounded-full"
+            className="absolute w-2 h-2 bg-starkYellow/20 rounded-full"
             initial={{
               x:
                 typeof window !== "undefined"
diff --git a/packages/nextjs/components/Navbar.tsx b/packages/nextjs/components/Navbar.tsx
index 8b117e92..ef8433d0 100644
--- a/packages/nextjs/components/Navbar.tsx
+++ b/packages/nextjs/components/Navbar.tsx
@@ -22,7 +22,7 @@ interface NavbarProps {
 }
 
 const menuItems = [
-  { id: "/dapp", labelKey: "navigation.home", icon: HomeIcon },
+  { id: "/dapp/dashboard", labelKey: "navigation.home", icon: HomeIcon },
   { id: "/dapp/mint", labelKey: "navigation.mint", icon: Coins },
   { id: "/dapp/claim", labelKey: "navigation.claim", icon: Trophy },
   { id: "/dapp/unmint", labelKey: "navigation.unmint", icon: ArrowUpDown },
@@ -208,8 +208,8 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                                 setIsLanguageOpen(false);
                               }}
                               className={`w-full flex items-center gap-3 px-4 py-2.5 text-left hover:bg-starkYellow/10 transition-all duration-200 ${currentLanguage === lang.code
-                                  ? "text-starkYellow bg-starkYellow/5"
-                                  : "text-white/80 hover:text-white"
+                                ? "text-starkYellow bg-starkYellow/5"
+                                : "text-white/80 hover:text-white"
                                 }`}
                               whileHover={{ x: 4 }}
                               whileTap={{ scale: 0.98 }}
diff --git a/packages/nextjs/components/buy-tickets/LotteryDisplay.tsx b/packages/nextjs/components/buy-tickets/LotteryDisplay.tsx
index 5bd79b1b..b2ef693a 100644
--- a/packages/nextjs/components/buy-tickets/LotteryDisplay.tsx
+++ b/packages/nextjs/components/buy-tickets/LotteryDisplay.tsx
@@ -17,7 +17,7 @@ export default function LotteryDisplay({
 }: LotteryDisplayProps) {
   return (
     <div className="mt-4">
-      <p className="text-gray-400 text-sm mb-2">Selected Numbers:</p>
+      <p className="text-white/70 text-sm mb-2">Selected Numbers:</p>
       <div className="flex gap-2 justify-center">
         {Array.from({ length: 5 }).map((_, index) => {
           const selectedNumber = selectedNumbers?.[index];
@@ -30,11 +30,10 @@ export default function LotteryDisplay({
           return (
             <motion.div
               key={index}
-              className={`w-12 h-12 rounded-full bg-gradient-to-br from-yellow-400 to-orange-500 flex items-center justify-center text-white font-bold text-lg shadow-lg border-2 border-yellow-300 ${
-                hasNumber
+              className={`w-12 h-12 rounded-full bg-gradient-to-br from-starkYellow to-starkYellow-light flex items-center justify-center text-black font-bold text-lg shadow-lg border-2 border-starkYellow ${hasNumber
                   ? "cursor-pointer hover:scale-110"
                   : "cursor-not-allowed"
-              }`}
+                }`}
               initial={{ scale: 0.8 }}
               animate={{ scale: 1 }}
               whileHover={hasNumber ? { scale: 1.1 } : {}}
@@ -49,7 +48,7 @@ export default function LotteryDisplay({
                   variants={lotteryRevealVariants}
                   initial="hidden"
                   animate="revealing"
-                  className="text-white font-bold"
+                  className="text-black font-bold"
                 >
                   {selectedNumber !== undefined
                     ? selectedNumber < 10
@@ -62,7 +61,7 @@ export default function LotteryDisplay({
                   variants={lotteryRevealVariants}
                   initial="hidden"
                   animate="deselecting"
-                  className="text-white font-bold"
+                  className="text-black font-bold"
                 >
                   {selectedNumber !== undefined
                     ? selectedNumber < 10
@@ -72,7 +71,7 @@ export default function LotteryDisplay({
                 </motion.div>
               ) : selectedNumber !== undefined ? (
                 <motion.span
-                  className="text-white font-bold"
+                  className="text-black font-bold"
                   variants={lotteryRevealVariants}
                   animate="questionMark"
                 >
@@ -80,7 +79,7 @@ export default function LotteryDisplay({
                 </motion.span>
               ) : (
                 <motion.span
-                  className="text-white font-bold text-xl"
+                  className="text-black font-bold text-xl"
                   variants={lotteryRevealVariants}
                   animate="questionMark"
                 >
diff --git a/packages/nextjs/components/buy-tickets/NumberGrid.tsx b/packages/nextjs/components/buy-tickets/NumberGrid.tsx
index ed522ad5..a43e75ba 100644
--- a/packages/nextjs/components/buy-tickets/NumberGrid.tsx
+++ b/packages/nextjs/components/buy-tickets/NumberGrid.tsx
@@ -71,20 +71,19 @@ export default function NumberGrid({
               isLuckElement ? luckAnimationVariants : numberAnimationVariants
             }
             className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium transition-colors duration-200
-              ${
-                isLuckElement
-                  ? "bg-gradient-to-br from-yellow-400 via-orange-400 to-yellow-500 text-white shadow-lg border-2 border-yellow-300 cursor-not-allowed relative overflow-hidden"
-                  : isSelected
-                    ? "bg-gradient-to-br from-purple-600 via-purple-700 to-purple-800 text-white shadow-lg border-2 border-purple-400"
-                    : selectedNumbers?.length >= 5 && !isSelected
-                      ? "bg-gray-700 text-gray-400 cursor-not-allowed opacity-60"
-                      : "bg-gray-700 text-gray-200 hover:bg-gray-600 cursor-pointer border border-gray-600"
+              ${isLuckElement
+                ? "bg-gradient-to-br from-starkYellow to-starkYellow-light text-black shadow-lg border-2 border-starkYellow cursor-not-allowed relative overflow-hidden"
+                : isSelected
+                  ? "bg-gradient-to-br from-starkYellow to-starkYellow-light text-black shadow-lg border-2 border-starkYellow"
+                  : selectedNumbers?.length >= 5 && !isSelected
+                    ? "bg-white/10 text-white/40 cursor-not-allowed opacity-60 border border-white/20"
+                    : "bg-white/5 text-white/70 hover:bg-white/10 cursor-pointer border border-white/20 hover:border-starkYellow/30"
               }`}
           >
             {isLuckElement ? (
               <>
                 <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/20 to-transparent animate-pulse"></div>
-                <span className="text-xs font-bold text-white drop-shadow-sm relative z-10">
+                <span className="text-xs font-bold text-black drop-shadow-sm relative z-10">
                   LUCK
                 </span>
               </>
diff --git a/packages/nextjs/components/buy-tickets/PurchaseSummary.tsx b/packages/nextjs/components/buy-tickets/PurchaseSummary.tsx
index bfba81c5..8796b9c9 100644
--- a/packages/nextjs/components/buy-tickets/PurchaseSummary.tsx
+++ b/packages/nextjs/components/buy-tickets/PurchaseSummary.tsx
@@ -30,20 +30,20 @@ export default function PurchaseSummary({
 
   return (
     <>
-      <div className="bg-[#232b3b] rounded-lg p-4 space-y-2 mt-6">
+      <div className="bg-white/5 border border-white/10 rounded-lg p-4 space-y-2 mt-6">
         <div className="flex justify-between items-center">
           <p className="text-white font-medium">{t("buyTickets.totalCost")}</p>
-          <p className="text-[#4ade80] font-medium">
+          <p className="text-starkYellow font-medium">
             {isPriceLoading ? "Loading…" : `${totalCostFormatted} $TRKP`}
           </p>
         </div>
         {priceError && <p className="text-red-400 text-sm">{priceError}</p>}
       </div>
 
-      <GlowingButton
+      <button
         onClick={onPurchase}
-        className="w-full"
-        glowColor="rgba(139, 92, 246, 0.5)"
+        className="w-full bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow font-semibold py-3 px-6 rounded-lg transition-all duration-300 hover:from-starkYellow hover:to-starkYellow-light hover:text-black hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
+        style={{ boxShadow: "0 4px 12px rgba(255,214,0,0.2)" }}
         disabled={
           isLoading ||
           isPriceLoading ||
@@ -53,7 +53,7 @@ export default function PurchaseSummary({
         }
       >
         {isLoading ? t("buyTickets.processing") : t("buyTickets.buyButton")}
-      </GlowingButton>
+      </button>
 
       {txError && <p className="text-red-500 mt-2">{txError}</p>}
       {txSuccess && <p className="text-green-500 mt-2">{txSuccess}</p>}
diff --git a/packages/nextjs/components/buy-tickets/TicketControls.tsx b/packages/nextjs/components/buy-tickets/TicketControls.tsx
index 122dfb6a..e596b8aa 100644
--- a/packages/nextjs/components/buy-tickets/TicketControls.tsx
+++ b/packages/nextjs/components/buy-tickets/TicketControls.tsx
@@ -22,7 +22,7 @@ export default function TicketControls({
       <div className="flex items-center gap-2">
         <motion.button
           onClick={onDecreaseTickets}
-          className="bg-purple-600 rounded-full w-8 h-8 flex items-center justify-center text-white font-bold"
+          className="bg-starkYellow/20 border border-starkYellow/30 rounded-full w-8 h-8 flex items-center justify-center text-starkYellow font-bold hover:bg-starkYellow hover:text-black transition-all duration-300"
           whileHover={{ scale: 1.1 }}
           whileTap={{ scale: 0.9 }}
           transition={{ duration: 0.2 }}
@@ -37,7 +37,7 @@ export default function TicketControls({
         </p>
         <motion.button
           onClick={onIncreaseTickets}
-          className="bg-purple-600 rounded-full w-8 h-8 flex items-center justify-center text-white font-bold"
+          className="bg-starkYellow/20 border border-starkYellow/30 rounded-full w-8 h-8 flex items-center justify-center text-starkYellow font-bold hover:bg-starkYellow hover:text-black transition-all duration-300"
           whileHover={{ scale: 1.1 }}
           whileTap={{ scale: 0.9 }}
           transition={{ duration: 0.2 }}
@@ -47,7 +47,8 @@ export default function TicketControls({
       </div>
       <motion.button
         onClick={onGenerateRandomForAll}
-        className="bg-purple-600 hover:bg-purple-700 text-white px-4 py-2 rounded-lg flex items-center gap-2"
+        className="bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow px-4 py-2 rounded-lg flex items-center gap-2 hover:from-starkYellow hover:to-starkYellow-light hover:text-black transition-all duration-300"
+        style={{ boxShadow: "0 4px 12px rgba(255,214,0,0.2)" }}
         whileHover={{ scale: 1.05 }}
         whileTap={{ scale: 0.95 }}
         transition={{ duration: 0.2 }}
diff --git a/packages/nextjs/components/buy-tickets/TicketSelector.tsx b/packages/nextjs/components/buy-tickets/TicketSelector.tsx
index 574158ef..5a28a38b 100644
--- a/packages/nextjs/components/buy-tickets/TicketSelector.tsx
+++ b/packages/nextjs/components/buy-tickets/TicketSelector.tsx
@@ -31,7 +31,7 @@ export default function TicketSelector({
 
   return (
     <motion.div
-      className="bg-[#232b3b] rounded-lg p-4 mb-4"
+      className="bg-white/5 border border-white/10 rounded-lg p-4 mb-4"
       variants={ticketVariants}
       initial="hidden"
       animate="visible"
@@ -41,7 +41,8 @@ export default function TicketSelector({
         <p className="text-white font-medium">Ticket #{ticketId}</p>
         <motion.button
           onClick={() => onGenerateRandom(ticketId)}
-          className="bg-purple-600 hover:bg-purple-700 text-white px-3 py-1 rounded-lg flex items-center gap-1"
+          className="bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow px-3 py-1 rounded-lg flex items-center gap-1 hover:from-starkYellow hover:to-starkYellow-light hover:text-black transition-all duration-300"
+          style={{ boxShadow: "0 2px 8px rgba(255,214,0,0.2)" }}
           whileHover={{ scale: 1.05 }}
           whileTap={{ scale: 0.95 }}
         >

From b9d03619acdbc7eb0357ceb44c1ae060ca107e9c Mon Sep 17 00:00:00 2001
From: drakkomaximo <andres.villanueva.tabares@gmail.com>
Date: Wed, 1 Oct 2025 17:15:45 -0500
Subject: [PATCH 8/8] Refactor UI components across various pages to improve
 code readability and maintainability. Adjusted formatting for consistency,
 including spacing and indentation in layout files, and enhanced button styles
 for better user interaction. Updated color schemes to align with the
 'starkYellow' theme.

---
 packages/nextjs/app/dapp/buy-tickets/page.tsx |   4 +-
 packages/nextjs/app/dapp/dashboard/page.tsx   |   4 +-
 packages/nextjs/app/dapp/layout.tsx           |   4 +-
 packages/nextjs/app/dapp/mint/page.tsx        |  28 +-
 packages/nextjs/app/dapp/unmint/page.tsx      |  26 +-
 .../nextjs/components/LastDrawResults.tsx     |  10 +-
 packages/nextjs/components/Navbar.tsx         |  86 +-
 .../components/buy-tickets/LotteryDisplay.tsx |   5 +-
 .../components/buy-tickets/NumberGrid.tsx     |  15 +-
 .../dashboard/dashboard/BalancesCard.tsx      |  13 +-
 .../dashboard/dashboard/NotificationsCard.tsx |  29 +-
 .../dashboard/RecentActivityCard.tsx          |  14 +-
 .../dashboard/dashboard/StepsWizard.tsx       |  13 +-
 .../nextjs/components/dashboard/pool/page.tsx |  19 +-
 .../components/landing-page/layout/hader.tsx  |   5 +-
 .../AddressInfoDropdown.tsx                   |  18 +-
 .../CustomConnectButton/ConnectModal.tsx      |   9 +-
 .../WrongNetworkDropdown.tsx                  |   4 +-
 packages/nextjs/components/scroll-to-top.tsx  |  32 +-
 .../components/sections/HeroSection.tsx       |  14 +-
 packages/nextjs/components/token-mint.tsx     |  21 +-
 packages/nextjs/components/token-unmint.tsx   |  24 +-
 .../nextjs/components/ui/StarkLottoLogo.tsx   |  83 +-
 .../snfoundry/contracts/src/Lottery.cairo     |  12 +-
 .../contracts/src/StarkPlayERC20.cairo        | 806 +++++++++---------
 .../contracts/src/StarkPlayVault.cairo        |   8 +-
 .../contracts/src/YourContract.cairo          | 226 ++---
 packages/snfoundry/contracts/src/lib.cairo    |  12 +-
 .../contracts/tests/TestContract.cairo        | 118 +--
 .../snfoundry/contracts/tests/test_CU05.cairo |  23 +-
 .../tests/test_jackpot_history.cairo          | 404 ++++-----
 .../snfoundry/scripts-ts/deploy-contract.ts   | 660 +++++++-------
 packages/snfoundry/scripts-ts/deploy.ts       |  27 +-
 .../scripts-ts/helpers/colorize-log.ts        |  32 +-
 .../scripts-ts/helpers/deploy-wrapper.ts      | 124 +--
 .../snfoundry/scripts-ts/helpers/networks.ts  | 174 ++--
 .../scripts-ts/helpers/parse-deployments.ts   | 186 ++--
 packages/snfoundry/scripts-ts/types.ts        |  32 +-
 .../snfoundry/scripts-ts/verify-contracts.ts  | 136 +--
 39 files changed, 1781 insertions(+), 1679 deletions(-)

diff --git a/packages/nextjs/app/dapp/buy-tickets/page.tsx b/packages/nextjs/app/dapp/buy-tickets/page.tsx
index 522ce0b6..d53076ba 100644
--- a/packages/nextjs/app/dapp/buy-tickets/page.tsx
+++ b/packages/nextjs/app/dapp/buy-tickets/page.tsx
@@ -418,7 +418,9 @@ export default function BuyTicketsPage() {
 
                 {/* Next Draw */}
                 <div className="mb-6">
-                  <p className="text-white/70 mb-1">{t("buyTickets.nextDraw")}</p>
+                  <p className="text-white/70 mb-1">
+                    {t("buyTickets.nextDraw")}
+                  </p>
                   <motion.p
                     className="text-starkYellow text-4xl font-bold"
                     initial={{ scale: 0.9 }}
diff --git a/packages/nextjs/app/dapp/dashboard/page.tsx b/packages/nextjs/app/dapp/dashboard/page.tsx
index dd43c7eb..c4f5d6f0 100644
--- a/packages/nextjs/app/dapp/dashboard/page.tsx
+++ b/packages/nextjs/app/dapp/dashboard/page.tsx
@@ -80,7 +80,9 @@ export default function DashboardPage() {
           <TotalPool />
         </div>
 
-        <div className={`space-y-4 ${isConnected ? 'lg:col-span-2' : 'lg:col-span-3'}`}>
+        <div
+          className={`space-y-4 ${isConnected ? "lg:col-span-2" : "lg:col-span-3"}`}
+        >
           {/* Lottery Process */}
           <StepsWizard {...data.wizard} />
 
diff --git a/packages/nextjs/app/dapp/layout.tsx b/packages/nextjs/app/dapp/layout.tsx
index 478479be..9921a1a0 100644
--- a/packages/nextjs/app/dapp/layout.tsx
+++ b/packages/nextjs/app/dapp/layout.tsx
@@ -38,7 +38,9 @@ export default function DappLayout({
           onClose={() => setNotification(null)}
         />
       )}
-      <main className="flex-1 pt-24 relative z-10 container mx-auto max-w-6xl px-4 sm:px-6">{children}</main>
+      <main className="flex-1 pt-24 relative z-10 container mx-auto max-w-6xl px-4 sm:px-6">
+        {children}
+      </main>
       <ScrollToTop />
     </div>
   );
diff --git a/packages/nextjs/app/dapp/mint/page.tsx b/packages/nextjs/app/dapp/mint/page.tsx
index 441f3c36..d8de4e79 100644
--- a/packages/nextjs/app/dapp/mint/page.tsx
+++ b/packages/nextjs/app/dapp/mint/page.tsx
@@ -50,7 +50,10 @@ export default function MintPage() {
       </div>
 
       <div className="max-w-3xl mx-auto mt-12 grid md:grid-cols-2 gap-8 mb-8">
-        <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+        <div
+          className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6"
+          style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+        >
           {/* Gradient Background Overlay */}
           <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
@@ -68,12 +71,16 @@ export default function MintPage() {
               ecosystem.
             </p>
             <p className="text-white/80">
-              The minting process converts your STRK tokens at a 1:1 ratio, with a
-              minimal fee of 0.5% to support platform development and maintenance.
+              The minting process converts your STRK tokens at a 1:1 ratio, with
+              a minimal fee of 0.5% to support platform development and
+              maintenance.
             </p>
           </div>
         </div>
-        <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+        <div
+          className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6"
+          style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+        >
           {/* Gradient Background Overlay */}
           <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
@@ -111,7 +118,10 @@ export default function MintPage() {
       </div>
 
       {/* Additional information section */}
-      <div className="max-w-3xl mx-auto mt-8 relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+      <div
+        className="max-w-3xl mx-auto mt-8 relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6"
+        style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+      >
         {/* Gradient Background Overlay */}
         <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
@@ -127,9 +137,7 @@ export default function MintPage() {
               <div className="w-12 h-12 mx-auto mb-3 bg-starkYellow/20 border border-starkYellow/30 rounded-full flex items-center justify-center">
                 <span className="text-2xl">🎮</span>
               </div>
-              <h3 className="font-semibold text-white mb-2">
-                Gaming Access
-              </h3>
+              <h3 className="font-semibold text-white mb-2">Gaming Access</h3>
               <p className="text-white/80 text-sm">
                 Required currency for all lottery games and premium features
               </p>
@@ -149,9 +157,7 @@ export default function MintPage() {
               <div className="w-12 h-12 mx-auto mb-3 bg-starkYellow/20 border border-starkYellow/30 rounded-full flex items-center justify-center">
                 <span className="text-2xl">🔒</span>
               </div>
-              <h3 className="font-semibold text-white mb-2">
-                Secure Process
-              </h3>
+              <h3 className="font-semibold text-white mb-2">Secure Process</h3>
               <p className="text-white/80 text-sm">
                 Protected by smart contracts on the Starknet blockchain
               </p>
diff --git a/packages/nextjs/app/dapp/unmint/page.tsx b/packages/nextjs/app/dapp/unmint/page.tsx
index 59bd4577..faf79dd7 100644
--- a/packages/nextjs/app/dapp/unmint/page.tsx
+++ b/packages/nextjs/app/dapp/unmint/page.tsx
@@ -53,7 +53,10 @@ export default function UnmintPage() {
       <div className="max-w-4xl mx-auto">
         <div className="grid md:grid-cols-2 gap-8">
           {/* How it works */}
-          <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+          <div
+            className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6"
+            style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+          >
             {/* Gradient Background Overlay */}
             <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
@@ -67,7 +70,9 @@ export default function UnmintPage() {
               <div className="space-y-3 text-white/80">
                 <div className="flex items-center gap-3 gap-x-5">
                   <div className="w-6 h-6 rounded-full bg-starkYellow/20 border border-starkYellow/30 flex items-center justify-center flex-shrink-0 mt-0.5">
-                    <span className="text-starkYellow text-sm font-bold">1</span>
+                    <span className="text-starkYellow text-sm font-bold">
+                      1
+                    </span>
                   </div>
                   <p>
                     Select a percentage (25%, 50%, 75%, or 100%) of your
@@ -76,13 +81,17 @@ export default function UnmintPage() {
                 </div>
                 <div className="flex items-center gap-3 gap-x-5">
                   <div className="w-6 h-6 rounded-full bg-starkYellow/20 border border-starkYellow/30 flex items-center justify-center flex-shrink-0 mt-0.5">
-                    <span className="text-starkYellow text-sm font-bold">2</span>
+                    <span className="text-starkYellow text-sm font-bold">
+                      2
+                    </span>
                   </div>
                   <p>A 3% fee is deducted from the conversion amount</p>
                 </div>
                 <div className="flex items-center gap-3 gap-x-5">
                   <div className="w-6 h-6 rounded-full bg-starkYellow/20 border border-starkYellow/30 flex items-center justify-center flex-shrink-0 mt-0.5">
-                    <span className="text-starkYellow text-sm font-bold">3</span>
+                    <span className="text-starkYellow text-sm font-bold">
+                      3
+                    </span>
                   </div>
                   <p>Receive STRK tokens at a 1:1 rate (minus fees)</p>
                 </div>
@@ -91,7 +100,10 @@ export default function UnmintPage() {
           </div>
 
           {/* Important Notes */}
-          <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+          <div
+            className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6"
+            style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+          >
             {/* Gradient Background Overlay */}
             <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
@@ -127,8 +139,8 @@ export default function UnmintPage() {
                 <div className="flex items-center gap-3 gap-x-5">
                   <div className="w-2 h-2 rounded-full bg-starkYellow flex-shrink-0 mt-2"></div>
                   <p>
-                    <strong>Percentage Selection:</strong> Choose from predefined
-                    percentages - manual amounts are not allowed
+                    <strong>Percentage Selection:</strong> Choose from
+                    predefined percentages - manual amounts are not allowed
                   </p>
                 </div>
               </div>
diff --git a/packages/nextjs/components/LastDrawResults.tsx b/packages/nextjs/components/LastDrawResults.tsx
index 0fef371d..0983a434 100644
--- a/packages/nextjs/components/LastDrawResults.tsx
+++ b/packages/nextjs/components/LastDrawResults.tsx
@@ -265,14 +265,16 @@ export function LastDrawResults() {
 
           <button
             onClick={isPolling ? stopPolling : startPolling}
-            className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md transition-colors ${isPolling
+            className={`inline-flex items-center gap-1 px-2 py-1 text-xs font-medium rounded-md transition-colors ${
+              isPolling
                 ? "text-starkYellow bg-starkYellow/10 border border-starkYellow/30 hover:bg-starkYellow/20"
                 : "text-white/80 bg-white/5 border border-white/10 hover:bg-white/10"
-              }`}
+            }`}
           >
             <div
-              className={`h-2 w-2 rounded-full ${isPolling ? "bg-starkYellow" : "bg-white/60"
-                }`}
+              className={`h-2 w-2 rounded-full ${
+                isPolling ? "bg-starkYellow" : "bg-white/60"
+              }`}
             />
             {isPolling ? t("status.autoRefreshOn") : t("status.autoRefreshOff")}
           </button>
diff --git a/packages/nextjs/components/Navbar.tsx b/packages/nextjs/components/Navbar.tsx
index ef8433d0..7078dd9a 100644
--- a/packages/nextjs/components/Navbar.tsx
+++ b/packages/nextjs/components/Navbar.tsx
@@ -4,13 +4,7 @@ import { useState, useEffect, useRef } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 import Image from "next/image";
 import Link from "next/link";
-import {
-  Coins,
-  Trophy,
-  ArrowUpDown,
-  User,
-  HomeIcon,
-} from "lucide-react";
+import { Coins, Trophy, ArrowUpDown, User, HomeIcon } from "lucide-react";
 import { CustomConnectButton } from "./scaffold-stark/CustomConnectButton";
 import { StarkLottoLogo } from "./ui/StarkLottoLogo";
 import { useAccount } from "@starknet-react/core";
@@ -70,11 +64,7 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
           <div className="max-w-7xl mx-auto px-4">
             <div className="flex items-center justify-between h-14">
               {/* Logo */}
-              <StarkLottoLogo
-                variant="dapp"
-                href="/"
-                className=""
-              />
+              <StarkLottoLogo variant="dapp" href="/" className="" />
 
               {/* Desktop Navigation */}
               <div className="hidden md:flex items-center gap-8">
@@ -160,7 +150,10 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                   <motion.button
                     onClick={() => setIsLanguageOpen(!isLanguageOpen)}
                     className="group relative flex items-center gap-2 px-3 py-2 rounded-xl border border-white/10 bg-white/5 backdrop-blur-md hover:bg-starkYellow/10 hover:border-starkYellow/30 transition-all duration-300"
-                    whileHover={{ scale: 1.02, boxShadow: "0 4px 12px rgba(255,214,0,0.2)" }}
+                    whileHover={{
+                      scale: 1.02,
+                      boxShadow: "0 4px 12px rgba(255,214,0,0.2)",
+                    }}
                     whileTap={{ scale: 0.98 }}
                   >
                     <span className="text-sm font-medium text-white group-hover:text-starkYellow transition-colors">
@@ -177,8 +170,18 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                       transition={{ duration: 0.2 }}
                       className="w-3 h-3"
                     >
-                      <svg className="w-full h-full text-starkYellow" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
+                      <svg
+                        className="w-full h-full text-starkYellow"
+                        fill="none"
+                        stroke="currentColor"
+                        viewBox="0 0 24 24"
+                      >
+                        <path
+                          strokeLinecap="round"
+                          strokeLinejoin="round"
+                          strokeWidth={2}
+                          d="M19 9l-7 7-7-7"
+                        />
                       </svg>
                     </motion.div>
                   </motion.button>
@@ -199,7 +202,7 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                             { code: "en", flag: "🇺🇸", name: "English" },
                             { code: "es", flag: "🇪🇸", name: "Español" },
                             { code: "fr", flag: "🇫🇷", name: "Français" },
-                            { code: "pt", flag: "🇧🇷", name: "Português" }
+                            { code: "pt", flag: "🇧🇷", name: "Português" },
                           ].map((lang) => (
                             <motion.button
                               key={lang.code}
@@ -207,15 +210,18 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                                 changeLanguage(lang.code as any);
                                 setIsLanguageOpen(false);
                               }}
-                              className={`w-full flex items-center gap-3 px-4 py-2.5 text-left hover:bg-starkYellow/10 transition-all duration-200 ${currentLanguage === lang.code
-                                ? "text-starkYellow bg-starkYellow/5"
-                                : "text-white/80 hover:text-white"
-                                }`}
+                              className={`w-full flex items-center gap-3 px-4 py-2.5 text-left hover:bg-starkYellow/10 transition-all duration-200 ${
+                                currentLanguage === lang.code
+                                  ? "text-starkYellow bg-starkYellow/5"
+                                  : "text-white/80 hover:text-white"
+                              }`}
                               whileHover={{ x: 4 }}
                               whileTap={{ scale: 0.98 }}
                             >
                               <span className="text-lg">{lang.flag}</span>
-                              <span className="text-sm font-medium flex-1">{lang.name}</span>
+                              <span className="text-sm font-medium flex-1">
+                                {lang.name}
+                              </span>
                               {currentLanguage === lang.code && (
                                 <motion.div
                                   className="w-2 h-2 bg-starkYellow rounded-full"
@@ -319,40 +325,44 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
                       <div className="flex gap-2">
                         <motion.button
                           onClick={() => changeLanguage("en")}
-                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${currentLanguage === "en"
-                            ? "bg-starkYellow text-black"
-                            : "bg-white/10 text-white/80 hover:bg-white/20"
-                            }`}
+                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
+                            currentLanguage === "en"
+                              ? "bg-starkYellow text-black"
+                              : "bg-white/10 text-white/80 hover:bg-white/20"
+                          }`}
                           whileTap={{ scale: 0.95 }}
                         >
                           🇺🇸 EN
                         </motion.button>
                         <motion.button
                           onClick={() => changeLanguage("es")}
-                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${currentLanguage === "es"
-                            ? "bg-starkYellow text-black"
-                            : "bg-white/10 text-white/80 hover:bg-white/20"
-                            }`}
+                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
+                            currentLanguage === "es"
+                              ? "bg-starkYellow text-black"
+                              : "bg-white/10 text-white/80 hover:bg-white/20"
+                          }`}
                           whileTap={{ scale: 0.95 }}
                         >
                           🇪🇸 ES
                         </motion.button>
                         <motion.button
                           onClick={() => changeLanguage("fr")}
-                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${currentLanguage === "fr"
-                            ? "bg-starkYellow text-black"
-                            : "bg-white/10 text-white/80 hover:bg-white/20"
-                            }`}
+                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
+                            currentLanguage === "fr"
+                              ? "bg-starkYellow text-black"
+                              : "bg-white/10 text-white/80 hover:bg-white/20"
+                          }`}
                           whileTap={{ scale: 0.95 }}
                         >
                           🇫🇷 FR
                         </motion.button>
                         <motion.button
                           onClick={() => changeLanguage("pt")}
-                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${currentLanguage === "pt"
-                            ? "bg-starkYellow text-black"
-                            : "bg-white/10 text-white/80 hover:bg-white/20"
-                            }`}
+                          className={`px-3 py-1.5 rounded-lg text-sm transition-colors ${
+                            currentLanguage === "pt"
+                              ? "bg-starkYellow text-black"
+                              : "bg-white/10 text-white/80 hover:bg-white/20"
+                          }`}
                           whileTap={{ scale: 0.95 }}
                         >
                           🇧🇷 PT
@@ -368,4 +378,4 @@ export function Navbar({ onBuyTicket }: NavbarProps) {
       </AnimatePresence>
     </>
   );
-}
\ No newline at end of file
+}
diff --git a/packages/nextjs/components/buy-tickets/LotteryDisplay.tsx b/packages/nextjs/components/buy-tickets/LotteryDisplay.tsx
index b2ef693a..f43a9c9c 100644
--- a/packages/nextjs/components/buy-tickets/LotteryDisplay.tsx
+++ b/packages/nextjs/components/buy-tickets/LotteryDisplay.tsx
@@ -30,10 +30,11 @@ export default function LotteryDisplay({
           return (
             <motion.div
               key={index}
-              className={`w-12 h-12 rounded-full bg-gradient-to-br from-starkYellow to-starkYellow-light flex items-center justify-center text-black font-bold text-lg shadow-lg border-2 border-starkYellow ${hasNumber
+              className={`w-12 h-12 rounded-full bg-gradient-to-br from-starkYellow to-starkYellow-light flex items-center justify-center text-black font-bold text-lg shadow-lg border-2 border-starkYellow ${
+                hasNumber
                   ? "cursor-pointer hover:scale-110"
                   : "cursor-not-allowed"
-                }`}
+              }`}
               initial={{ scale: 0.8 }}
               animate={{ scale: 1 }}
               whileHover={hasNumber ? { scale: 1.1 } : {}}
diff --git a/packages/nextjs/components/buy-tickets/NumberGrid.tsx b/packages/nextjs/components/buy-tickets/NumberGrid.tsx
index a43e75ba..6b4ee645 100644
--- a/packages/nextjs/components/buy-tickets/NumberGrid.tsx
+++ b/packages/nextjs/components/buy-tickets/NumberGrid.tsx
@@ -71,13 +71,14 @@ export default function NumberGrid({
               isLuckElement ? luckAnimationVariants : numberAnimationVariants
             }
             className={`w-10 h-10 rounded-full flex items-center justify-center text-sm font-medium transition-colors duration-200
-              ${isLuckElement
-                ? "bg-gradient-to-br from-starkYellow to-starkYellow-light text-black shadow-lg border-2 border-starkYellow cursor-not-allowed relative overflow-hidden"
-                : isSelected
-                  ? "bg-gradient-to-br from-starkYellow to-starkYellow-light text-black shadow-lg border-2 border-starkYellow"
-                  : selectedNumbers?.length >= 5 && !isSelected
-                    ? "bg-white/10 text-white/40 cursor-not-allowed opacity-60 border border-white/20"
-                    : "bg-white/5 text-white/70 hover:bg-white/10 cursor-pointer border border-white/20 hover:border-starkYellow/30"
+              ${
+                isLuckElement
+                  ? "bg-gradient-to-br from-starkYellow to-starkYellow-light text-black shadow-lg border-2 border-starkYellow cursor-not-allowed relative overflow-hidden"
+                  : isSelected
+                    ? "bg-gradient-to-br from-starkYellow to-starkYellow-light text-black shadow-lg border-2 border-starkYellow"
+                    : selectedNumbers?.length >= 5 && !isSelected
+                      ? "bg-white/10 text-white/40 cursor-not-allowed opacity-60 border border-white/20"
+                      : "bg-white/5 text-white/70 hover:bg-white/10 cursor-pointer border border-white/20 hover:border-starkYellow/30"
               }`}
           >
             {isLuckElement ? (
diff --git a/packages/nextjs/components/dashboard/dashboard/BalancesCard.tsx b/packages/nextjs/components/dashboard/dashboard/BalancesCard.tsx
index 667dcff2..4eeed3c3 100644
--- a/packages/nextjs/components/dashboard/dashboard/BalancesCard.tsx
+++ b/packages/nextjs/components/dashboard/dashboard/BalancesCard.tsx
@@ -9,7 +9,10 @@ export default function BalancesCard({ strkp, strk, loading = false }: Props) {
   const { t } = useTranslation();
 
   return (
-    <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-4" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+    <div
+      className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-4"
+      style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+    >
       {/* Gradient Background Overlay */}
       <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
@@ -46,13 +49,17 @@ function Row({
 }) {
   return (
     <div className="flex items-center justify-between bg-white/5 backdrop-blur-sm border border-white/10 rounded-xl px-4 py-3 hover:bg-white/10 hover:border-starkYellow/30 transition-all duration-300 group">
-      <div className="text-sm text-white/80 group-hover:text-white transition-colors">{label}</div>
+      <div className="text-sm text-white/80 group-hover:text-white transition-colors">
+        {label}
+      </div>
       <div className="flex items-center gap-2">
         {loading ? (
           <div className="w-24 h-4 bg-starkYellow/20 animate-pulse rounded"></div>
         ) : (
           <>
-            <div className="font-semibold text-lg text-starkYellow group-hover:text-starkYellow-light transition-colors">{value}</div>
+            <div className="font-semibold text-lg text-starkYellow group-hover:text-starkYellow-light transition-colors">
+              {value}
+            </div>
             <TrendingUp className="h-4 w-4 text-starkYellow/70 group-hover:text-starkYellow transition-colors" />
           </>
         )}
diff --git a/packages/nextjs/components/dashboard/dashboard/NotificationsCard.tsx b/packages/nextjs/components/dashboard/dashboard/NotificationsCard.tsx
index d0f49e59..dc47d5eb 100644
--- a/packages/nextjs/components/dashboard/dashboard/NotificationsCard.tsx
+++ b/packages/nextjs/components/dashboard/dashboard/NotificationsCard.tsx
@@ -12,7 +12,10 @@ export default function NotificationsCard({ list }: Props) {
   const { t } = useTranslation();
 
   return (
-    <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+    <div
+      className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6"
+      style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+    >
       {/* Gradient Background Overlay */}
       <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
@@ -38,20 +41,27 @@ export default function NotificationsCard({ list }: Props) {
                 className="rounded-xl border border-white/10 bg-white/5 backdrop-blur-sm p-4 hover:bg-white/10 hover:border-starkYellow/30 transition-all duration-300 group"
               >
                 <div className="mb-2 flex items-center gap-2">
-                  <div className={`w-6 h-6 rounded-full flex items-center justify-center border ${n.type === "prize"
-                      ? "bg-starkYellow/20 border-starkYellow/30"
-                      : "bg-purple-500/20 border-purple-500/30"
-                    }`}>
+                  <div
+                    className={`w-6 h-6 rounded-full flex items-center justify-center border ${
+                      n.type === "prize"
+                        ? "bg-starkYellow/20 border-starkYellow/30"
+                        : "bg-purple-500/20 border-purple-500/30"
+                    }`}
+                  >
                     {n.type === "prize" ? (
                       <Gift className="h-3 w-3 text-starkYellow" />
                     ) : (
                       <Timer className="h-3 w-3 text-purple-400" />
                     )}
                   </div>
-                  <div className="font-medium text-white group-hover:text-starkYellow transition-colors">{n.title}</div>
+                  <div className="font-medium text-white group-hover:text-starkYellow transition-colors">
+                    {n.title}
+                  </div>
                 </div>
 
-                <div className="mb-3 text-sm text-white/70 group-hover:text-white/80 transition-colors">{n.desc}</div>
+                <div className="mb-3 text-sm text-white/70 group-hover:text-white/80 transition-colors">
+                  {n.desc}
+                </div>
 
                 {n.cta && (
                   <motion.div
@@ -60,10 +70,11 @@ export default function NotificationsCard({ list }: Props) {
                   >
                     <Link
                       href={n.cta.href}
-                      className={`inline-flex items-center justify-center w-full px-4 py-2 rounded-lg font-medium text-sm transition-all duration-300 ${n.type === "prize"
+                      className={`inline-flex items-center justify-center w-full px-4 py-2 rounded-lg font-medium text-sm transition-all duration-300 ${
+                        n.type === "prize"
                           ? "bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black"
                           : "bg-gradient-to-r from-purple-500/20 to-purple-500/10 border border-purple-500/30 text-purple-400 hover:from-purple-500 hover:to-purple-400 hover:text-white"
-                        }`}
+                      }`}
                     >
                       {n.cta.label}
                     </Link>
diff --git a/packages/nextjs/components/dashboard/dashboard/RecentActivityCard.tsx b/packages/nextjs/components/dashboard/dashboard/RecentActivityCard.tsx
index f65ffd55..96260ebc 100644
--- a/packages/nextjs/components/dashboard/dashboard/RecentActivityCard.tsx
+++ b/packages/nextjs/components/dashboard/dashboard/RecentActivityCard.tsx
@@ -13,7 +13,10 @@ export default function RecentActivityCard({
   const { t } = useTranslation();
 
   return (
-    <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+    <div
+      className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6"
+      style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+    >
       {/* Gradient Background Overlay */}
       <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
@@ -47,16 +50,19 @@ export default function RecentActivityCard({
                         <div className="font-medium text-white group-hover:text-starkYellow transition-colors">
                           {i.amount} {i.unit}
                         </div>
-                        <div className="text-xs text-white/70 group-hover:text-white/80 transition-colors">{i.when}</div>
+                        <div className="text-xs text-white/70 group-hover:text-white/80 transition-colors">
+                          {i.when}
+                        </div>
                       </div>
                     </div>
                     <div
-                      className={`text-xs font-medium px-2 py-1 rounded-full border ${i.status === "won"
+                      className={`text-xs font-medium px-2 py-1 rounded-full border ${
+                        i.status === "won"
                           ? "text-green-400 bg-green-400/10 border-green-400/30"
                           : i.status === "pending"
                             ? "text-starkYellow bg-starkYellow/10 border-starkYellow/30"
                             : "text-red-400 bg-red-400/10 border-red-400/30"
-                        }`}
+                      }`}
                     >
                       {i.status}
                     </div>
diff --git a/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx b/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx
index caf488e2..65a11fa7 100644
--- a/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx
+++ b/packages/nextjs/components/dashboard/dashboard/StepsWizard.tsx
@@ -54,7 +54,10 @@ export default function StepsWizard(_: Props) {
   ];
 
   return (
-    <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+    <div
+      className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6"
+      style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+    >
       {/* Gradient Background Overlay */}
       <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
@@ -71,12 +74,16 @@ export default function StepsWizard(_: Props) {
                     <span className="rounded-full bg-starkYellow/20 px-2.5 py-1 text-xs text-starkYellow font-medium border border-starkYellow/30">
                       {t("dashboard.steps.step", { id: s.id })}
                     </span>
-                    <span className="text-starkYellow group-hover:text-starkYellow-light transition-colors">{s.icon}</span>
+                    <span className="text-starkYellow group-hover:text-starkYellow-light transition-colors">
+                      {s.icon}
+                    </span>
                   </div>
                   <div className="font-semibold text-base text-white mb-2">
                     {s.title}
                   </div>
-                  <div className="mb-4 text-sm text-white/70 group-hover:text-white/80 transition-colors">{s.desc}</div>
+                  <div className="mb-4 text-sm text-white/70 group-hover:text-white/80 transition-colors">
+                    {s.desc}
+                  </div>
                 </div>
 
                 {isConnected && (
diff --git a/packages/nextjs/components/dashboard/pool/page.tsx b/packages/nextjs/components/dashboard/pool/page.tsx
index 77306ae1..379e4496 100644
--- a/packages/nextjs/components/dashboard/pool/page.tsx
+++ b/packages/nextjs/components/dashboard/pool/page.tsx
@@ -16,7 +16,12 @@ export default function TotalPool() {
 
     const startCountdown = () => {
       // Fecha objetivo: 2 días, 8 horas, 42 minutos desde ahora
-      const endTime = Date.now() + (2 * 24 * 60 * 60 * 1000) + (8 * 60 * 60 * 1000) + (42 * 60 * 1000) + (30 * 1000);
+      const endTime =
+        Date.now() +
+        2 * 24 * 60 * 60 * 1000 +
+        8 * 60 * 60 * 1000 +
+        42 * 60 * 1000 +
+        30 * 1000;
 
       const updateTimer = () => {
         const now = Date.now();
@@ -35,7 +40,7 @@ export default function TotalPool() {
         const seconds = totalSeconds % 60;
 
         // Formatear con padding de ceros
-        const pad = (num: number) => num.toString().padStart(2, '0');
+        const pad = (num: number) => num.toString().padStart(2, "0");
 
         // Formato completo siempre: días, horas, minutos, segundos
         const display = `${days}d ${pad(hours)}h ${pad(minutes)}m ${pad(seconds)}s`;
@@ -89,9 +94,7 @@ export default function TotalPool() {
           transition={{ duration: 1, ease: "easeOut", delay: 0.5 }}
           className="mb-6"
         >
-          <motion.p
-            className="text-6xl md:text-7xl lg:text-8xl font-extrabold mb-2 text-white drop-shadow-[0_0_25px_rgba(255,214,0,0.5)]"
-          >
+          <motion.p className="text-6xl md:text-7xl lg:text-8xl font-extrabold mb-2 text-white drop-shadow-[0_0_25px_rgba(255,214,0,0.5)]">
             <motion.span
               animate={{ scale: [1, 1.02, 1] }}
               transition={{
@@ -113,9 +116,11 @@ export default function TotalPool() {
           transition={{ delay: 1.2, duration: 1 }}
           className="text-2xl md:text-3xl font-semibold text-white/80 mb-8"
         >
-          ≈ <span className="text-starkYellow font-bold">
+          ≈{" "}
+          <span className="text-starkYellow font-bold">
             <CountUp end={usdValue} duration={3} separator="," />
-          </span> USD
+          </span>{" "}
+          USD
         </motion.p>
 
         <motion.div
diff --git a/packages/nextjs/components/landing-page/layout/hader.tsx b/packages/nextjs/components/landing-page/layout/hader.tsx
index c56afcfb..4cdef84a 100644
--- a/packages/nextjs/components/landing-page/layout/hader.tsx
+++ b/packages/nextjs/components/landing-page/layout/hader.tsx
@@ -50,10 +50,7 @@ export default function Header() {
         <div className="container mx-auto relative flex h-20 items-center justify-center px-6 lg:px-8">
           {/* Logo */}
           <div className="absolute left-6">
-            <StarkLottoLogo
-              variant="landing"
-              onClick={() => goTo("#hero")}
-            />
+            <StarkLottoLogo variant="landing" onClick={() => goTo("#hero")} />
           </div>
 
           {/* Desktop Nav */}
diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx
index ae3cf33d..837d9949 100644
--- a/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx
+++ b/packages/nextjs/components/scaffold-stark/CustomConnectButton/AddressInfoDropdown.tsx
@@ -88,7 +88,7 @@ export const AddressInfoDropdown = ({
         >
           <div className="hidden [@media(min-width:412px)]:block">
             {getStarknetPFPIfExists(profile?.profilePicture) &&
-              !profileImageError ? (
+            !profileImageError ? (
               <NextImage
                 src={profile?.profilePicture || ""}
                 alt="Profile Picture"
@@ -114,7 +114,7 @@ export const AddressInfoDropdown = ({
             {isENS(displayName)
               ? displayName
               : profile?.name ||
-              address?.slice(0, 6) + "..." + address?.slice(-4)}
+                address?.slice(0, 6) + "..." + address?.slice(-4)}
           </span>
           <ChevronDownIcon className="h-4 w-4 text-starkYellow group-hover:text-starkYellow-light transition-colors" />
         </summary>
@@ -127,10 +127,7 @@ export const AddressInfoDropdown = ({
           <li className={selectingNetwork ? "hidden" : ""}>
             {addressCopied ? (
               <div className="flex items-center gap-3 px-4 py-2.5 text-left hover:bg-starkYellow/10 transition-all duration-200 text-starkYellow rounded-lg">
-                <CheckCircleIcon
-                  className="h-4 w-4"
-                  aria-hidden="true"
-                />
+                <CheckCircleIcon className="h-4 w-4" aria-hidden="true" />
                 <span className="text-sm font-medium">Address copied!</span>
               </div>
             ) : (
@@ -172,7 +169,9 @@ export const AddressInfoDropdown = ({
                 className="flex items-center gap-3 px-4 py-2.5 text-left hover:bg-starkYellow/10 transition-all duration-200 text-white/80 hover:text-white rounded-lg"
               >
                 <ArrowTopRightOnSquareIcon className="h-4 w-4" />
-                <span className="text-sm font-medium">View on Block Explorer</span>
+                <span className="text-sm font-medium">
+                  View on Block Explorer
+                </span>
               </a>
             </li>
           ) : null}
@@ -230,10 +229,11 @@ export const AddressInfoDropdown = ({
                               className="w-full flex flex-col"
                             >
                               <button
-                                className={`${isDarkMode
+                                className={`${
+                                  isDarkMode
                                     ? "hover:bg-[#385183] border-[#385183]"
                                     : "hover:bg-gradient-light "
-                                  } border rounded-md text-neutral py-[8px] pl-[10px] pr-16 flex items-center gap-4`}
+                                } border rounded-md text-neutral py-[8px] pl-[10px] pr-16 flex items-center gap-4`}
                                 onClick={(e) => handleConnectBurner(e, ix)}
                               >
                                 <BlockieAvatar
diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/ConnectModal.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/ConnectModal.tsx
index db6a274e..3e44750d 100644
--- a/packages/nextjs/components/scaffold-stark/CustomConnectButton/ConnectModal.tsx
+++ b/packages/nextjs/components/scaffold-stark/CustomConnectButton/ConnectModal.tsx
@@ -72,7 +72,9 @@ const ConnectModal = () => {
         className="group relative flex items-center gap-2 px-4 py-2 rounded-xl border border-white/10 bg-white/5 backdrop-blur-md hover:bg-starkYellow/10 hover:border-starkYellow/30 transition-all duration-300 font-medium"
         style={{ boxShadow: "0 4px 12px rgba(255,214,0,0.1)" }}
       >
-        <span className="text-sm text-white group-hover:text-starkYellow transition-colors">{t("connect.button")}</span>
+        <span className="text-sm text-white group-hover:text-starkYellow transition-colors">
+          {t("connect.button")}
+        </span>
       </button>
 
       {isOpen && (
@@ -110,8 +112,9 @@ const ConnectModal = () => {
                         className="w-full flex flex-col"
                       >
                         <button
-                          className={`hover:bg-gradient-modal border rounded-md text-white py-[8px] pl-[10px] pr-16 flex items-center gap-4 ${isDarkMode ? "border-[#385183]" : ""
-                            }`}
+                          className={`hover:bg-gradient-modal border rounded-md text-white py-[8px] pl-[10px] pr-16 flex items-center gap-4 ${
+                            isDarkMode ? "border-[#385183]" : ""
+                          }`}
                           onClick={(e) => handleConnectBurner(e, ix)}
                         >
                           <BlockieAvatar
diff --git a/packages/nextjs/components/scaffold-stark/CustomConnectButton/WrongNetworkDropdown.tsx b/packages/nextjs/components/scaffold-stark/CustomConnectButton/WrongNetworkDropdown.tsx
index ee718ad9..162c5714 100644
--- a/packages/nextjs/components/scaffold-stark/CustomConnectButton/WrongNetworkDropdown.tsx
+++ b/packages/nextjs/components/scaffold-stark/CustomConnectButton/WrongNetworkDropdown.tsx
@@ -14,7 +14,9 @@ export const WrongNetworkDropdown = () => {
         tabIndex={0}
         className="group relative flex items-center gap-2 px-4 py-2 rounded-xl border border-red-500/30 bg-red-500/10 backdrop-blur-md hover:bg-red-500/20 hover:border-red-500/50 transition-all duration-300 font-medium cursor-pointer"
       >
-        <span className="text-sm text-red-400 group-hover:text-red-300 transition-colors">Wrong network</span>
+        <span className="text-sm text-red-400 group-hover:text-red-300 transition-colors">
+          Wrong network
+        </span>
         <ChevronDownIcon className="h-4 w-4 text-red-400 group-hover:text-red-300 transition-colors" />
       </label>
 
diff --git a/packages/nextjs/components/scroll-to-top.tsx b/packages/nextjs/components/scroll-to-top.tsx
index 256e14ef..a4ece824 100644
--- a/packages/nextjs/components/scroll-to-top.tsx
+++ b/packages/nextjs/components/scroll-to-top.tsx
@@ -44,23 +44,23 @@ export function ScrollToTop({
   const styles =
     variant === "landing"
       ? {
-        glowEffect:
-          "absolute inset-0 bg-gradient-to-r from-starkYellow to-starkYellow-light rounded-full blur-lg opacity-60 group-hover:opacity-80 transition-opacity duration-300",
-        buttonContent:
-          "relative w-12 h-12 bg-gradient-to-r from-starkYellow to-starkYellow-light rounded-full flex items-center justify-center shadow-lg border border-starkYellow/20 backdrop-blur-sm",
-        iconColor: "h-6 w-6 text-heroDark font-bold",
-        animatedRing:
-          "absolute inset-0 border-2 border-starkYellow/40 rounded-full",
-      }
+          glowEffect:
+            "absolute inset-0 bg-gradient-to-r from-starkYellow to-starkYellow-light rounded-full blur-lg opacity-60 group-hover:opacity-80 transition-opacity duration-300",
+          buttonContent:
+            "relative w-12 h-12 bg-gradient-to-r from-starkYellow to-starkYellow-light rounded-full flex items-center justify-center shadow-lg border border-starkYellow/20 backdrop-blur-sm",
+          iconColor: "h-6 w-6 text-heroDark font-bold",
+          animatedRing:
+            "absolute inset-0 border-2 border-starkYellow/40 rounded-full",
+        }
       : {
-        glowEffect:
-          "absolute inset-0 bg-gradient-to-r from-[#00FFA3] to-[#00E5FF] rounded-full blur-lg opacity-60 group-hover:opacity-80 transition-opacity duration-300",
-        buttonContent:
-          "relative w-12 h-12 bg-gradient-to-r from-[#00FFA3] to-[#00E5FF] rounded-full flex items-center justify-center shadow-lg border border-white/10 backdrop-blur-sm",
-        iconColor: "h-6 w-6 text-black font-bold",
-        animatedRing:
-          "absolute inset-0 border-2 border-[#00FFA3]/30 rounded-full",
-      };
+          glowEffect:
+            "absolute inset-0 bg-gradient-to-r from-[#00FFA3] to-[#00E5FF] rounded-full blur-lg opacity-60 group-hover:opacity-80 transition-opacity duration-300",
+          buttonContent:
+            "relative w-12 h-12 bg-gradient-to-r from-[#00FFA3] to-[#00E5FF] rounded-full flex items-center justify-center shadow-lg border border-white/10 backdrop-blur-sm",
+          iconColor: "h-6 w-6 text-black font-bold",
+          animatedRing:
+            "absolute inset-0 border-2 border-[#00FFA3]/30 rounded-full",
+        };
 
   return (
     <AnimatePresence>
diff --git a/packages/nextjs/components/sections/HeroSection.tsx b/packages/nextjs/components/sections/HeroSection.tsx
index 104a2e91..09c2c8f2 100644
--- a/packages/nextjs/components/sections/HeroSection.tsx
+++ b/packages/nextjs/components/sections/HeroSection.tsx
@@ -12,7 +12,7 @@ interface HeroSectionProps {
   variant?: "hero" | "card";
   heroY: any;
   jackpot: number;
-  isConnected: boolean
+  isConnected: boolean;
   showSecurityInfo: boolean;
   targetDate: Date;
   onBuyTicket: () => void;
@@ -49,7 +49,10 @@ export function HeroSection({
 
   if (isCard) {
     return (
-      <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+      <div
+        className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md p-6"
+        style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+      >
         {/* Gradient Background Overlay */}
         <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
@@ -77,8 +80,8 @@ export function HeroSection({
             )}
           </div>
 
-          {
-            isConnected && <button
+          {isConnected && (
+            <button
               onClick={onBuyTicket}
               className="group relative w-full py-3 text-base font-medium rounded-xl border border-starkYellow/30 bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black transition-all duration-300 hover:scale-105"
               style={{ boxShadow: "0 4px 12px rgba(255,214,0,0.2)" }}
@@ -86,8 +89,7 @@ export function HeroSection({
               <div className="absolute -inset-1 bg-gradient-to-r from-starkYellow/20 via-purple-500/20 to-starkYellow/20 rounded-xl blur opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
               <span className="relative">{t("buyTickets.buyButton")}</span>
             </button>
-          }
-
+          )}
         </div>
       </div>
     );
diff --git a/packages/nextjs/components/token-mint.tsx b/packages/nextjs/components/token-mint.tsx
index 3c39e0d7..ac88bf3c 100644
--- a/packages/nextjs/components/token-mint.tsx
+++ b/packages/nextjs/components/token-mint.tsx
@@ -308,7 +308,10 @@ export default function TokenMint({
           document.body,
         )}
 
-      <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md text-white shadow-lg" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+      <div
+        className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md text-white shadow-lg"
+        style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+      >
         {/* Gradient Background Overlay */}
         <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
@@ -428,10 +431,11 @@ export default function TokenMint({
                   )
                 </span>
                 <Tooltip
-                  content={`A ${feePercent !== undefined
+                  content={`A ${
+                    feePercent !== undefined
                       ? (feePercent * 100).toFixed(2)
                       : "--"
-                    }% fee is applied to all mint operations`}
+                  }% fee is applied to all mint operations`}
                 >
                   <Info size={20} className="text-starkYellow" />
                 </Tooltip>
@@ -459,13 +463,18 @@ export default function TokenMint({
         {/* Mint button */}
         <div className="relative z-10 p-4">
           <button
-            className={`w-full py-6 text-lg font-medium rounded-lg transition-all duration-300 ${isValidInput && !isLoading
+            className={`w-full py-6 text-lg font-medium rounded-lg transition-all duration-300 ${
+              isValidInput && !isLoading
                 ? "bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black hover:scale-105"
                 : "bg-white/5 border border-white/20 text-white/50 cursor-not-allowed"
-              }`}
+            }`}
             disabled={!isValidInput || isLoading}
             onClick={handleMint}
-            style={isValidInput && !isLoading ? { boxShadow: "0 4px 12px rgba(255,214,0,0.2)" } : {}}
+            style={
+              isValidInput && !isLoading
+                ? { boxShadow: "0 4px 12px rgba(255,214,0,0.2)" }
+                : {}
+            }
           >
             {isLoading ? "Minting..." : "Mint $TRKP"}
           </button>
diff --git a/packages/nextjs/components/token-unmint.tsx b/packages/nextjs/components/token-unmint.tsx
index ecbc6b82..65a81fce 100644
--- a/packages/nextjs/components/token-unmint.tsx
+++ b/packages/nextjs/components/token-unmint.tsx
@@ -131,7 +131,10 @@ export default function TokenUnmint({
           document.body,
         )}
 
-      <div className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md text-white shadow-lg" style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}>
+      <div
+        className="relative overflow-hidden rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md text-white shadow-lg"
+        style={{ boxShadow: "0 10px 25px rgba(255,214,0,0.1)" }}
+      >
         {/* Gradient Background Overlay */}
         <div className="absolute inset-0 bg-gradient-to-br from-starkYellow/5 via-transparent to-purple-500/5 pointer-events-none" />
 
@@ -189,13 +192,15 @@ export default function TokenUnmint({
             {percentageOptions.map((percentage) => (
               <button
                 key={percentage}
-                className={`py-2 px-3 text-sm font-medium rounded-md transition-all duration-200 ${selectedPercentage === percentage
+                className={`py-2 px-3 text-sm font-medium rounded-md transition-all duration-200 ${
+                  selectedPercentage === percentage
                     ? "bg-starkYellow text-black shadow-lg scale-105 border border-starkYellow/30"
                     : "bg-starkYellow/20 hover:bg-starkYellow/30 text-starkYellow hover:scale-102 border border-starkYellow/30"
-                  } ${isProcessing || prizeBalance <= 0
+                } ${
+                  isProcessing || prizeBalance <= 0
                     ? "opacity-50 cursor-not-allowed"
                     : "cursor-pointer"
-                  }`}
+                }`}
                 onClick={() => handlePercentageSelect(percentage)}
                 disabled={isProcessing || prizeBalance <= 0}
               >
@@ -277,13 +282,18 @@ export default function TokenUnmint({
 
         <div className="relative z-10 p-4">
           <button
-            className={`w-full py-6 text-lg font-medium rounded-lg transition-all duration-300 ${isValidSelection
+            className={`w-full py-6 text-lg font-medium rounded-lg transition-all duration-300 ${
+              isValidSelection
                 ? "bg-gradient-to-r from-starkYellow/20 to-starkYellow/10 border border-starkYellow/30 text-starkYellow hover:from-starkYellow hover:to-starkYellow-light hover:text-black hover:scale-105"
                 : "bg-white/5 border border-white/20 text-white/50 cursor-not-allowed"
-              }`}
+            }`}
             disabled={!isValidSelection || isProcessing}
             onClick={handleUnmint}
-            style={isValidSelection ? { boxShadow: "0 4px 12px rgba(255,214,0,0.2)" } : {}}
+            style={
+              isValidSelection
+                ? { boxShadow: "0 4px 12px rgba(255,214,0,0.2)" }
+                : {}
+            }
           >
             {isProcessing ? "Unminting..." : "Unmint STRKP"}
           </button>
diff --git a/packages/nextjs/components/ui/StarkLottoLogo.tsx b/packages/nextjs/components/ui/StarkLottoLogo.tsx
index 20b4ac68..9a6d7bdc 100644
--- a/packages/nextjs/components/ui/StarkLottoLogo.tsx
+++ b/packages/nextjs/components/ui/StarkLottoLogo.tsx
@@ -4,54 +4,51 @@ import { motion } from "framer-motion";
 import Link from "next/link";
 
 interface StarkLottoLogoProps {
-    variant?: "landing" | "dapp";
-    onClick?: () => void;
-    href?: string;
-    className?: string;
+  variant?: "landing" | "dapp";
+  onClick?: () => void;
+  href?: string;
+  className?: string;
 }
 
 export function StarkLottoLogo({
-    variant = "landing",
-    onClick,
-    href = "/",
-    className = ""
+  variant = "landing",
+  onClick,
+  href = "/",
+  className = "",
 }: StarkLottoLogoProps) {
-    const logoContent = (
-        <div className={`flex items-center space-x-2 ${className}`}>
-            <img
-                src="/Logo-sin-texto.png"
-                alt="Icono StarkLotto"
-                className="h-14 w-auto lg:h-16"
-            />
-            <img
-                src="/Logo_Sin_Texto_Transparente.png"
-                alt="StarkLotto Logo"
-                className="h-14 w-auto lg:h-16"
-            />
-        </div>
-    );
-
-    if (onClick) {
-        return (
-            <motion.button
-                onClick={onClick}
-                className="group"
-                whileHover={{ scale: 1.02 }}
-                whileTap={{ scale: 0.98 }}
-            >
-                {logoContent}
-            </motion.button>
-        );
-    }
+  const logoContent = (
+    <div className={`flex items-center space-x-2 ${className}`}>
+      <img
+        src="/Logo-sin-texto.png"
+        alt="Icono StarkLotto"
+        className="h-14 w-auto lg:h-16"
+      />
+      <img
+        src="/Logo_Sin_Texto_Transparente.png"
+        alt="StarkLotto Logo"
+        className="h-14 w-auto lg:h-16"
+      />
+    </div>
+  );
 
+  if (onClick) {
     return (
-        <Link href={href} className="group">
-            <motion.div
-                whileHover={{ scale: 1.02 }}
-                whileTap={{ scale: 0.98 }}
-            >
-                {logoContent}
-            </motion.div>
-        </Link>
+      <motion.button
+        onClick={onClick}
+        className="group"
+        whileHover={{ scale: 1.02 }}
+        whileTap={{ scale: 0.98 }}
+      >
+        {logoContent}
+      </motion.button>
     );
+  }
+
+  return (
+    <Link href={href} className="group">
+      <motion.div whileHover={{ scale: 1.02 }} whileTap={{ scale: 0.98 }}>
+        {logoContent}
+      </motion.div>
+    </Link>
+  );
 }
diff --git a/packages/snfoundry/contracts/src/Lottery.cairo b/packages/snfoundry/contracts/src/Lottery.cairo
index ebc27024..9845141c 100644
--- a/packages/snfoundry/contracts/src/Lottery.cairo
+++ b/packages/snfoundry/contracts/src/Lottery.cairo
@@ -77,7 +77,9 @@ pub trait ILottery<TContractState> {
         number5: u16,
     ) -> u8;
     fn CreateNewDraw(ref self: TContractState, accumulatedPrize: u256);
-    fn CreateNewDrawWithDuration(ref self: TContractState, accumulatedPrize: u256, duration_blocks: u64);
+    fn CreateNewDrawWithDuration(
+        ref self: TContractState, accumulatedPrize: u256, duration_blocks: u64,
+    );
     fn GetCurrentActiveDraw(self: @TContractState) -> (u64, bool);
     fn SetDrawInactive(ref self: TContractState, drawId: u64);
     fn SetTicketPrice(ref self: TContractState, price: u256);
@@ -312,9 +314,7 @@ pub mod Lottery {
         fixedPrize2Matches: u256,
         accumulatedPrize: u256,
         userTickets: Map<(ContractAddress, u64), felt252>,
-        userTicketCount: Map<
-            (ContractAddress, u64), u32,
-        >, // (user, drawId) -> user ticket count
+        userTicketCount: Map<(ContractAddress, u64), u32>, // (user, drawId) -> user ticket count
         // (user, drawId, index)-> ticketId
         userTicketIds: Map<(ContractAddress, u64, u32), felt252>,
         draws: Map<u64, Draw>,
@@ -659,7 +659,9 @@ pub mod Lottery {
         }
 
         //=======================================================================================
-        fn CreateNewDrawWithDuration(ref self: ContractState, accumulatedPrize: u256, duration_blocks: u64) {
+        fn CreateNewDrawWithDuration(
+            ref self: ContractState, accumulatedPrize: u256, duration_blocks: u64,
+        ) {
             // Validate that the accumulated prize is not negative
             assert(accumulatedPrize >= 0, 'Invalid accumulated prize');
             // Validate that duration is not zero
diff --git a/packages/snfoundry/contracts/src/StarkPlayERC20.cairo b/packages/snfoundry/contracts/src/StarkPlayERC20.cairo
index 26dbb79b..f72fc5fa 100644
--- a/packages/snfoundry/contracts/src/StarkPlayERC20.cairo
+++ b/packages/snfoundry/contracts/src/StarkPlayERC20.cairo
@@ -1,404 +1,404 @@
-use starknet::ContractAddress;
-#[starknet::interface]
-trait ITestingHelpers<TContractState> {
-    fn getTotalSupply(self: @TContractState) -> u256;
-    fn getAllAllowances(self: @TContractState, account: ContractAddress) -> (u256, u256);
-}
-
-// SPDX-License-Identifier: MIT
-// Compatible with OpenZeppelin Contracts for Cairo ^0.20.0
+use starknet::ContractAddress;
+#[starknet::interface]
+trait ITestingHelpers<TContractState> {
+    fn getTotalSupply(self: @TContractState) -> u256;
+    fn getAllAllowances(self: @TContractState, account: ContractAddress) -> (u256, u256);
+}
+
+// SPDX-License-Identifier: MIT
+// Compatible with OpenZeppelin Contracts for Cairo ^0.20.0
 pub const INITIAL_SUPPLY: u256 = 1000; // initial supply added 1000 for testing purposes
-
-const MINTER_ROLE: felt252 = selector!("MINTER_ROLE");
-const BURNER_ROLE: felt252 = selector!("BURNER_ROLE");
-const PAUSER_ROLE: felt252 = selector!("PAUSER_ROLE");
-const PRIZE_ASSIGNER_ROLE: felt252 = selector!("PRIZE_ASSIGNER_ROLE");
-
-#[starknet::interface]
-pub trait IMintable<TContractState> {
-    fn mint(ref self: TContractState, recipient: ContractAddress, amount: u256);
-    fn grant_minter_role(ref self: TContractState, minter: ContractAddress);
-    fn revoke_minter_role(ref self: TContractState, minter: ContractAddress);
-    fn set_minter_allowance(ref self: TContractState, minter: ContractAddress, allowance: u256);
-    fn get_minter_allowance(self: @TContractState, minter: ContractAddress) -> u256;
-    fn get_authorized_minters(self: @TContractState) -> Array<ContractAddress>;
-}
-
-#[starknet::interface]
-pub trait IBurnable<TContractState> {
-    fn burn(ref self: TContractState, amount: u256);
-    fn burn_from(ref self: TContractState, account: ContractAddress, amount: u256);
-    fn grant_burner_role(ref self: TContractState, burner: ContractAddress);
-    fn revoke_burner_role(ref self: TContractState, burner: ContractAddress);
-    fn set_burner_allowance(ref self: TContractState, burner: ContractAddress, allowance: u256);
-    fn get_burner_allowance(self: @TContractState, burner: ContractAddress) -> u256;
-    fn get_authorized_burners(self: @TContractState) -> Array<ContractAddress>;
-}
-
-#[starknet::interface]
-pub trait IPrizeToken<TContractState> {
-    fn assign_prize_tokens(ref self: TContractState, recipient: ContractAddress, amount: u256);
-    fn get_prize_balance(self: @TContractState, account: ContractAddress) -> u256;
-    fn grant_prize_assigner_role(ref self: TContractState, assigner: ContractAddress);
-    fn revoke_prize_assigner_role(ref self: TContractState, assigner: ContractAddress);
-}
-
-#[starknet::contract]
-pub mod StarkPlayERC20 {
-    use openzeppelin_access::accesscontrol::{AccessControlComponent, DEFAULT_ADMIN_ROLE};
-    use openzeppelin_introspection::src5::SRC5Component;
-    use openzeppelin_security::PausableComponent;
-    use openzeppelin_token::erc20::{ERC20Component, ERC20HooksEmptyImpl};
-    use openzeppelin_upgrades::UpgradeableComponent;
-    use openzeppelin_upgrades::interface::IUpgradeable;
-    use starknet::storage::{
-        Map, StorageMapReadAccess, StorageMapWriteAccess, StoragePathEntry,
-        StoragePointerReadAccess, StoragePointerWriteAccess,
-    };
-    use starknet::{ClassHash, ContractAddress, get_caller_address};
-    use super::{
-        BURNER_ROLE, IBurnable, IMintable, IPrizeToken, ITestingHelpers, MINTER_ROLE, PAUSER_ROLE,
-        PRIZE_ASSIGNER_ROLE,
-    };
-
-    component!(path: ERC20Component, storage: erc20, event: ERC20Event);
-    component!(path: AccessControlComponent, storage: accesscontrol, event: AccessControlEvent);
-    component!(path: PausableComponent, storage: pausable, event: PausableEvent);
-    component!(path: SRC5Component, storage: src5, event: SRC5Event);
-    component!(path: UpgradeableComponent, storage: upgradeable, event: UpgradeableEvent);
-
-    #[abi(embed_v0)]
-    impl ERC20MixinImpl = ERC20Component::ERC20MixinImpl<ContractState>;
-    #[abi(embed_v0)]
-    impl PausableImpl = PausableComponent::PausableImpl<ContractState>;
-    #[abi(embed_v0)]
-    impl AccessControlMixinImpl =
-        AccessControlComponent::AccessControlMixinImpl<ContractState>;
-
-    impl ERC20InternalImpl = ERC20Component::InternalImpl<ContractState>;
-    impl PausableInternalImpl = PausableComponent::InternalImpl<ContractState>;
-    impl AccessControlInternalImpl = AccessControlComponent::InternalImpl<ContractState>;
-    impl UpgradeableInternalImpl = UpgradeableComponent::InternalImpl<ContractState>;
-
-    #[storage]
-    struct Storage {
-        #[substorage(v0)]
-        erc20: ERC20Component::Storage,
-        #[substorage(v0)]
-        pausable: PausableComponent::Storage,
-        #[substorage(v0)]
-        accesscontrol: AccessControlComponent::Storage,
-        #[substorage(v0)]
-        src5: SRC5Component::Storage,
-        #[substorage(v0)]
-        upgradeable: UpgradeableComponent::Storage,
-        minter_allowance: Map<ContractAddress, u256>,
-        burner_allowance: Map<ContractAddress, u256>,
-        minters: Map<u256, ContractAddress>,
-        burners: Map<u256, ContractAddress>,
-        minters_count: u256,
-        burners_count: u256,
-        minter_index: Map<ContractAddress, u256>,
-        burner_index: Map<ContractAddress, u256>,
-        prize_balances: Map<ContractAddress, u256>,
-        prize_assigners: Map<u256, ContractAddress>,
-        prize_assigners_count: u256,
-        prize_assigner_index: Map<ContractAddress, u256>,
-    }
-
-    #[derive(Drop, starknet::Event)]
-    pub struct Burn {
-        #[key]
-        pub burner: ContractAddress,
-        #[key]
-        pub amount: u256,
-    }
-
-    #[derive(Drop, starknet::Event)]
-    pub struct Mint {
-        #[key]
-        pub recipient: ContractAddress,
-        #[key]
-        pub amount: u256,
-    }
-
-    #[derive(Drop, starknet::Event)]
-    pub struct MinterAllowanceSet {
-        #[key]
-        pub minter: ContractAddress,
-        #[key]
-        pub allowance: u256,
-    }
-
-    #[derive(Drop, starknet::Event)]
-    pub struct BurnerAllowanceSet {
-        #[key]
-        pub burner: ContractAddress,
-        #[key]
-        pub allowance: u256,
-    }
-
-    #[derive(Drop, starknet::Event)]
-    pub struct PrizeTokensAssigned {
-        #[key]
-        pub recipient: ContractAddress,
-        #[key]
-        pub amount: u256,
-    }
-
-    #[event]
-    #[derive(Drop, starknet::Event)]
-    pub enum Event {
-        #[flat]
-        ERC20Event: ERC20Component::Event,
-        #[flat]
-        PausableEvent: PausableComponent::Event,
-        #[flat]
-        AccessControlEvent: AccessControlComponent::Event,
-        #[flat]
-        SRC5Event: SRC5Component::Event,
-        #[flat]
-        UpgradeableEvent: UpgradeableComponent::Event,
-        Burn: Burn,
-        Mint: Mint,
-        MinterAllowanceSet: MinterAllowanceSet,
-        BurnerAllowanceSet: BurnerAllowanceSet,
-        PrizeTokensAssigned: PrizeTokensAssigned,
-    }
-
-    #[constructor]
-    fn constructor(ref self: ContractState, recipient: ContractAddress, admin: ContractAddress) {
-        self.erc20.initializer("$tarkPlay", "STARKP");
-        self.accesscontrol.initializer();
-        
-        // Grant admin role to the specified admin
-        self.accesscontrol._grant_role(DEFAULT_ADMIN_ROLE, admin);
-        self.accesscontrol._grant_role(PAUSER_ROLE, admin);
-        
-        // Always grant admin role temporarily to the caller for auto-configuration
-        // This allows vault to configure itself during deployment
-        let caller = get_caller_address();
-        self.accesscontrol._grant_role(DEFAULT_ADMIN_ROLE, caller);
-        
-        // Mint initial supply for testing
-        self.erc20.mint(recipient, 1000);
-    }
-
-    #[abi(embed_v0)]
-    impl MintableImpl of IMintable<ContractState> {
-        fn mint(ref self: ContractState, recipient: ContractAddress, amount: u256) {
-            self.pausable.assert_not_paused();
-            let caller = get_caller_address();
-            self.accesscontrol.assert_only_role(MINTER_ROLE);
-            let allowance = self.minter_allowance.entry(caller).read();
-            assert(allowance >= amount, 'Insufficient minter allowance');
-            self.minter_allowance.entry(caller).write(allowance - amount);
-            self.erc20.mint(recipient, amount);
-            self.emit(Mint { recipient, amount });
-        }
-
-        fn grant_minter_role(ref self: ContractState, minter: ContractAddress) {
-            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
-            assert(is_contract(minter), 'Minter must be a contract');
-            self.accesscontrol._grant_role(MINTER_ROLE, minter);
-            let index = self.minters_count.read();
-            self.minters.entry(index).write(minter);
-            self.minter_index.entry(minter).write(index);
-            self.minters_count.write(index + 1);
-        }
-
-        fn revoke_minter_role(ref self: ContractState, minter: ContractAddress) {
-            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
-            self.accesscontrol._revoke_role(MINTER_ROLE, minter);
-            let index = self.minter_index.read(minter);
-            let last_index = self.minters_count.read() - 1;
-            if index != last_index {
-                let last_minter = self.minters.entry(last_index).read();
-                self.minters.entry(index).write(last_minter);
-                self.minter_index.entry(last_minter).write(index);
-            }
-            self.minters.entry(last_index).write(zero_address_const());
-            self.minter_index.write(minter, 0);
-            self.minters_count.write(last_index);
-        }
-
-        fn set_minter_allowance(ref self: ContractState, minter: ContractAddress, allowance: u256) {
-            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
-            self.minter_allowance.entry(minter).write(allowance);
-            self.emit(MinterAllowanceSet { minter, allowance });
-        }
-
-        fn get_minter_allowance(self: @ContractState, minter: ContractAddress) -> u256 {
-            self.minter_allowance.entry(minter).read()
-        }
-
-        fn get_authorized_minters(self: @ContractState) -> Array<ContractAddress> {
-            let mut minters = ArrayTrait::new();
-            let count = self.minters_count.read();
-            let mut i = 0;
-            while i != count {
-                minters.append(self.minters.entry(i).read());
-                i += 1;
-            }
-            minters
-        }
-    }
-
-    #[abi(embed_v0)]
-    impl BurnableImpl of IBurnable<ContractState> {
-        fn burn(ref self: ContractState, amount: u256) {
-            self.pausable.assert_not_paused();
-            let burner = get_caller_address();
-            self.accesscontrol.assert_only_role(BURNER_ROLE);
-            let allowance = self.burner_allowance.entry(burner).read();
-            assert(allowance >= amount, 'Insufficient burner allowance');
-            self.burner_allowance.entry(burner).write(allowance - amount);
-            let prize_balance = self.prize_balances.entry(burner).read();
-            if prize_balance >= amount {
-                self.prize_balances.entry(burner).write(prize_balance - amount);
-            } else {
-                self.prize_balances.entry(burner).write(0);
-            }
-            self.erc20.burn(burner, amount);
-            self.emit(Burn { burner, amount });
-        }
-
-        fn burn_from(ref self: ContractState, account: ContractAddress, amount: u256) {
-            let caller = get_caller_address();
-            self.accesscontrol.assert_only_role(BURNER_ROLE);
-            let allowance = self.burner_allowance.entry(caller).read();
-            assert(allowance >= amount, 'Insufficient burner allowance');
-            self.burner_allowance.entry(caller).write(allowance - amount);
-            let prize_balance = self.prize_balances.entry(account).read();
-            if prize_balance >= amount {
-                self.prize_balances.entry(account).write(prize_balance - amount);
-            } else {
-                self.prize_balances.entry(account).write(0);
-            }
-            self.erc20.burn(account, amount);
-            self.emit(Burn { burner: account, amount });
-        }
-
-        fn grant_burner_role(ref self: ContractState, burner: ContractAddress) {
-            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
-            assert(is_contract(burner), 'Burner must be a contract');
-            self.accesscontrol._grant_role(BURNER_ROLE, burner);
-            let index = self.burners_count.read();
-            self.burners.entry(index).write(burner);
-            self.burner_index.entry(burner).write(index);
-            self.burners_count.write(index + 1);
-        }
-
-        fn revoke_burner_role(ref self: ContractState, burner: ContractAddress) {
-            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
-            self.accesscontrol._revoke_role(BURNER_ROLE, burner);
-            let index = self.burner_index.read(burner);
-            let last_index = self.burners_count.read() - 1;
-            if index != last_index {
-                let last_burner = self.burners.entry(last_index).read();
-                self.burners.entry(index).write(last_burner);
-                self.burner_index.entry(last_burner).write(index);
-            }
-            self.burners.entry(last_index).write(zero_address_const());
-            self.burner_index.write(burner, 0);
-            self.burners_count.write(last_index);
-        }
-
-        fn set_burner_allowance(ref self: ContractState, burner: ContractAddress, allowance: u256) {
-            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
-            self.burner_allowance.entry(burner).write(allowance);
-            self.emit(BurnerAllowanceSet { burner, allowance });
-        }
-
-        fn get_burner_allowance(self: @ContractState, burner: ContractAddress) -> u256 {
-            self.burner_allowance.entry(burner).read()
-        }
-
-        fn get_authorized_burners(self: @ContractState) -> Array<ContractAddress> {
-            let mut burners = ArrayTrait::new();
-            let count = self.burners_count.read();
-            let mut i = 0;
-            while i != count {
-                burners.append(self.burners.read(i));
-                i += 1;
-            }
-            burners
-        }
-    }
-
-    #[abi(embed_v0)]
-    impl PrizeTokenImpl of IPrizeToken<ContractState> {
-        fn assign_prize_tokens(ref self: ContractState, recipient: ContractAddress, amount: u256) {
-            self.pausable.assert_not_paused();
-            self.accesscontrol.assert_only_role(PRIZE_ASSIGNER_ROLE);
-            let current_prize_balance = self.prize_balances.entry(recipient).read();
-            self.prize_balances.entry(recipient).write(current_prize_balance + amount);
-            self.erc20.mint(recipient, amount);
-            self.emit(PrizeTokensAssigned { recipient, amount });
-        }
-
-        fn get_prize_balance(self: @ContractState, account: ContractAddress) -> u256 {
-            self.prize_balances.entry(account).read()
-        }
-
-        fn grant_prize_assigner_role(ref self: ContractState, assigner: ContractAddress) {
-            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
-            assert(is_contract(assigner), 'Assigner must be a contract');
-            self.accesscontrol._grant_role(PRIZE_ASSIGNER_ROLE, assigner);
-            let index = self.prize_assigners_count.read();
-            self.prize_assigners.entry(index).write(assigner);
-            self.prize_assigner_index.entry(assigner).write(index);
-            self.prize_assigners_count.write(index + 1);
-        }
-
-        fn revoke_prize_assigner_role(ref self: ContractState, assigner: ContractAddress) {
-            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
-            self.accesscontrol._revoke_role(PRIZE_ASSIGNER_ROLE, assigner);
-            let index = self.prize_assigner_index.read(assigner);
-            let last_index = self.prize_assigners_count.read() - 1;
-            if index != last_index {
-                let last_assigner = self.prize_assigners.entry(last_index).read();
-                self.prize_assigners.entry(index).write(last_assigner);
-                self.prize_assigner_index.entry(last_assigner).write(index);
-            }
-            self.prize_assigners.entry(last_index).write(zero_address_const());
-            self.prize_assigner_index.entry(assigner).write(0);
-            self.prize_assigners_count.write(last_index);
-        }
-    }
-
-    #[abi(embed_v0)]
-    impl UpgradeableImpl of IUpgradeable<ContractState> {
-        fn upgrade(ref self: ContractState, new_class_hash: ClassHash) {
-            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
-            self.upgradeable.upgrade(new_class_hash);
-        }
-    }
-
-
-    fn is_contract(address: ContractAddress) -> bool {
-        // Avoid zero address
-        if address == zero_address_const() {
-            return false;
-        }
-
-        true
-    }
-
-    fn zero_address_const() -> ContractAddress {
-        '0x0'.try_into().unwrap()
-    }
-    #[abi(embed_v0)]
-    impl TestingHelpers of ITestingHelpers<ContractState> {
-        fn getTotalSupply(self: @ContractState) -> u256 {
-            self.erc20.total_supply()
-        }
-
-        fn getAllAllowances(self: @ContractState, account: ContractAddress) -> (u256, u256) {
-            let minter_allowance = self.minter_allowance.read(account);
-            let burner_allowance = self.burner_allowance.read(account);
-            (minter_allowance, burner_allowance)
-        }
-    }
-}
-
+
+const MINTER_ROLE: felt252 = selector!("MINTER_ROLE");
+const BURNER_ROLE: felt252 = selector!("BURNER_ROLE");
+const PAUSER_ROLE: felt252 = selector!("PAUSER_ROLE");
+const PRIZE_ASSIGNER_ROLE: felt252 = selector!("PRIZE_ASSIGNER_ROLE");
+
+#[starknet::interface]
+pub trait IMintable<TContractState> {
+    fn mint(ref self: TContractState, recipient: ContractAddress, amount: u256);
+    fn grant_minter_role(ref self: TContractState, minter: ContractAddress);
+    fn revoke_minter_role(ref self: TContractState, minter: ContractAddress);
+    fn set_minter_allowance(ref self: TContractState, minter: ContractAddress, allowance: u256);
+    fn get_minter_allowance(self: @TContractState, minter: ContractAddress) -> u256;
+    fn get_authorized_minters(self: @TContractState) -> Array<ContractAddress>;
+}
+
+#[starknet::interface]
+pub trait IBurnable<TContractState> {
+    fn burn(ref self: TContractState, amount: u256);
+    fn burn_from(ref self: TContractState, account: ContractAddress, amount: u256);
+    fn grant_burner_role(ref self: TContractState, burner: ContractAddress);
+    fn revoke_burner_role(ref self: TContractState, burner: ContractAddress);
+    fn set_burner_allowance(ref self: TContractState, burner: ContractAddress, allowance: u256);
+    fn get_burner_allowance(self: @TContractState, burner: ContractAddress) -> u256;
+    fn get_authorized_burners(self: @TContractState) -> Array<ContractAddress>;
+}
+
+#[starknet::interface]
+pub trait IPrizeToken<TContractState> {
+    fn assign_prize_tokens(ref self: TContractState, recipient: ContractAddress, amount: u256);
+    fn get_prize_balance(self: @TContractState, account: ContractAddress) -> u256;
+    fn grant_prize_assigner_role(ref self: TContractState, assigner: ContractAddress);
+    fn revoke_prize_assigner_role(ref self: TContractState, assigner: ContractAddress);
+}
+
+#[starknet::contract]
+pub mod StarkPlayERC20 {
+    use openzeppelin_access::accesscontrol::{AccessControlComponent, DEFAULT_ADMIN_ROLE};
+    use openzeppelin_introspection::src5::SRC5Component;
+    use openzeppelin_security::PausableComponent;
+    use openzeppelin_token::erc20::{ERC20Component, ERC20HooksEmptyImpl};
+    use openzeppelin_upgrades::UpgradeableComponent;
+    use openzeppelin_upgrades::interface::IUpgradeable;
+    use starknet::storage::{
+        Map, StorageMapReadAccess, StorageMapWriteAccess, StoragePathEntry,
+        StoragePointerReadAccess, StoragePointerWriteAccess,
+    };
+    use starknet::{ClassHash, ContractAddress, get_caller_address};
+    use super::{
+        BURNER_ROLE, IBurnable, IMintable, IPrizeToken, ITestingHelpers, MINTER_ROLE, PAUSER_ROLE,
+        PRIZE_ASSIGNER_ROLE,
+    };
+
+    component!(path: ERC20Component, storage: erc20, event: ERC20Event);
+    component!(path: AccessControlComponent, storage: accesscontrol, event: AccessControlEvent);
+    component!(path: PausableComponent, storage: pausable, event: PausableEvent);
+    component!(path: SRC5Component, storage: src5, event: SRC5Event);
+    component!(path: UpgradeableComponent, storage: upgradeable, event: UpgradeableEvent);
+
+    #[abi(embed_v0)]
+    impl ERC20MixinImpl = ERC20Component::ERC20MixinImpl<ContractState>;
+    #[abi(embed_v0)]
+    impl PausableImpl = PausableComponent::PausableImpl<ContractState>;
+    #[abi(embed_v0)]
+    impl AccessControlMixinImpl =
+        AccessControlComponent::AccessControlMixinImpl<ContractState>;
+
+    impl ERC20InternalImpl = ERC20Component::InternalImpl<ContractState>;
+    impl PausableInternalImpl = PausableComponent::InternalImpl<ContractState>;
+    impl AccessControlInternalImpl = AccessControlComponent::InternalImpl<ContractState>;
+    impl UpgradeableInternalImpl = UpgradeableComponent::InternalImpl<ContractState>;
+
+    #[storage]
+    struct Storage {
+        #[substorage(v0)]
+        erc20: ERC20Component::Storage,
+        #[substorage(v0)]
+        pausable: PausableComponent::Storage,
+        #[substorage(v0)]
+        accesscontrol: AccessControlComponent::Storage,
+        #[substorage(v0)]
+        src5: SRC5Component::Storage,
+        #[substorage(v0)]
+        upgradeable: UpgradeableComponent::Storage,
+        minter_allowance: Map<ContractAddress, u256>,
+        burner_allowance: Map<ContractAddress, u256>,
+        minters: Map<u256, ContractAddress>,
+        burners: Map<u256, ContractAddress>,
+        minters_count: u256,
+        burners_count: u256,
+        minter_index: Map<ContractAddress, u256>,
+        burner_index: Map<ContractAddress, u256>,
+        prize_balances: Map<ContractAddress, u256>,
+        prize_assigners: Map<u256, ContractAddress>,
+        prize_assigners_count: u256,
+        prize_assigner_index: Map<ContractAddress, u256>,
+    }
+
+    #[derive(Drop, starknet::Event)]
+    pub struct Burn {
+        #[key]
+        pub burner: ContractAddress,
+        #[key]
+        pub amount: u256,
+    }
+
+    #[derive(Drop, starknet::Event)]
+    pub struct Mint {
+        #[key]
+        pub recipient: ContractAddress,
+        #[key]
+        pub amount: u256,
+    }
+
+    #[derive(Drop, starknet::Event)]
+    pub struct MinterAllowanceSet {
+        #[key]
+        pub minter: ContractAddress,
+        #[key]
+        pub allowance: u256,
+    }
+
+    #[derive(Drop, starknet::Event)]
+    pub struct BurnerAllowanceSet {
+        #[key]
+        pub burner: ContractAddress,
+        #[key]
+        pub allowance: u256,
+    }
+
+    #[derive(Drop, starknet::Event)]
+    pub struct PrizeTokensAssigned {
+        #[key]
+        pub recipient: ContractAddress,
+        #[key]
+        pub amount: u256,
+    }
+
+    #[event]
+    #[derive(Drop, starknet::Event)]
+    pub enum Event {
+        #[flat]
+        ERC20Event: ERC20Component::Event,
+        #[flat]
+        PausableEvent: PausableComponent::Event,
+        #[flat]
+        AccessControlEvent: AccessControlComponent::Event,
+        #[flat]
+        SRC5Event: SRC5Component::Event,
+        #[flat]
+        UpgradeableEvent: UpgradeableComponent::Event,
+        Burn: Burn,
+        Mint: Mint,
+        MinterAllowanceSet: MinterAllowanceSet,
+        BurnerAllowanceSet: BurnerAllowanceSet,
+        PrizeTokensAssigned: PrizeTokensAssigned,
+    }
+
+    #[constructor]
+    fn constructor(ref self: ContractState, recipient: ContractAddress, admin: ContractAddress) {
+        self.erc20.initializer("$tarkPlay", "STARKP");
+        self.accesscontrol.initializer();
+
+        // Grant admin role to the specified admin
+        self.accesscontrol._grant_role(DEFAULT_ADMIN_ROLE, admin);
+        self.accesscontrol._grant_role(PAUSER_ROLE, admin);
+
+        // Always grant admin role temporarily to the caller for auto-configuration
+        // This allows vault to configure itself during deployment
+        let caller = get_caller_address();
+        self.accesscontrol._grant_role(DEFAULT_ADMIN_ROLE, caller);
+
+        // Mint initial supply for testing
+        self.erc20.mint(recipient, 1000);
+    }
+
+    #[abi(embed_v0)]
+    impl MintableImpl of IMintable<ContractState> {
+        fn mint(ref self: ContractState, recipient: ContractAddress, amount: u256) {
+            self.pausable.assert_not_paused();
+            let caller = get_caller_address();
+            self.accesscontrol.assert_only_role(MINTER_ROLE);
+            let allowance = self.minter_allowance.entry(caller).read();
+            assert(allowance >= amount, 'Insufficient minter allowance');
+            self.minter_allowance.entry(caller).write(allowance - amount);
+            self.erc20.mint(recipient, amount);
+            self.emit(Mint { recipient, amount });
+        }
+
+        fn grant_minter_role(ref self: ContractState, minter: ContractAddress) {
+            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
+            assert(is_contract(minter), 'Minter must be a contract');
+            self.accesscontrol._grant_role(MINTER_ROLE, minter);
+            let index = self.minters_count.read();
+            self.minters.entry(index).write(minter);
+            self.minter_index.entry(minter).write(index);
+            self.minters_count.write(index + 1);
+        }
+
+        fn revoke_minter_role(ref self: ContractState, minter: ContractAddress) {
+            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
+            self.accesscontrol._revoke_role(MINTER_ROLE, minter);
+            let index = self.minter_index.read(minter);
+            let last_index = self.minters_count.read() - 1;
+            if index != last_index {
+                let last_minter = self.minters.entry(last_index).read();
+                self.minters.entry(index).write(last_minter);
+                self.minter_index.entry(last_minter).write(index);
+            }
+            self.minters.entry(last_index).write(zero_address_const());
+            self.minter_index.write(minter, 0);
+            self.minters_count.write(last_index);
+        }
+
+        fn set_minter_allowance(ref self: ContractState, minter: ContractAddress, allowance: u256) {
+            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
+            self.minter_allowance.entry(minter).write(allowance);
+            self.emit(MinterAllowanceSet { minter, allowance });
+        }
+
+        fn get_minter_allowance(self: @ContractState, minter: ContractAddress) -> u256 {
+            self.minter_allowance.entry(minter).read()
+        }
+
+        fn get_authorized_minters(self: @ContractState) -> Array<ContractAddress> {
+            let mut minters = ArrayTrait::new();
+            let count = self.minters_count.read();
+            let mut i = 0;
+            while i != count {
+                minters.append(self.minters.entry(i).read());
+                i += 1;
+            }
+            minters
+        }
+    }
+
+    #[abi(embed_v0)]
+    impl BurnableImpl of IBurnable<ContractState> {
+        fn burn(ref self: ContractState, amount: u256) {
+            self.pausable.assert_not_paused();
+            let burner = get_caller_address();
+            self.accesscontrol.assert_only_role(BURNER_ROLE);
+            let allowance = self.burner_allowance.entry(burner).read();
+            assert(allowance >= amount, 'Insufficient burner allowance');
+            self.burner_allowance.entry(burner).write(allowance - amount);
+            let prize_balance = self.prize_balances.entry(burner).read();
+            if prize_balance >= amount {
+                self.prize_balances.entry(burner).write(prize_balance - amount);
+            } else {
+                self.prize_balances.entry(burner).write(0);
+            }
+            self.erc20.burn(burner, amount);
+            self.emit(Burn { burner, amount });
+        }
+
+        fn burn_from(ref self: ContractState, account: ContractAddress, amount: u256) {
+            let caller = get_caller_address();
+            self.accesscontrol.assert_only_role(BURNER_ROLE);
+            let allowance = self.burner_allowance.entry(caller).read();
+            assert(allowance >= amount, 'Insufficient burner allowance');
+            self.burner_allowance.entry(caller).write(allowance - amount);
+            let prize_balance = self.prize_balances.entry(account).read();
+            if prize_balance >= amount {
+                self.prize_balances.entry(account).write(prize_balance - amount);
+            } else {
+                self.prize_balances.entry(account).write(0);
+            }
+            self.erc20.burn(account, amount);
+            self.emit(Burn { burner: account, amount });
+        }
+
+        fn grant_burner_role(ref self: ContractState, burner: ContractAddress) {
+            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
+            assert(is_contract(burner), 'Burner must be a contract');
+            self.accesscontrol._grant_role(BURNER_ROLE, burner);
+            let index = self.burners_count.read();
+            self.burners.entry(index).write(burner);
+            self.burner_index.entry(burner).write(index);
+            self.burners_count.write(index + 1);
+        }
+
+        fn revoke_burner_role(ref self: ContractState, burner: ContractAddress) {
+            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
+            self.accesscontrol._revoke_role(BURNER_ROLE, burner);
+            let index = self.burner_index.read(burner);
+            let last_index = self.burners_count.read() - 1;
+            if index != last_index {
+                let last_burner = self.burners.entry(last_index).read();
+                self.burners.entry(index).write(last_burner);
+                self.burner_index.entry(last_burner).write(index);
+            }
+            self.burners.entry(last_index).write(zero_address_const());
+            self.burner_index.write(burner, 0);
+            self.burners_count.write(last_index);
+        }
+
+        fn set_burner_allowance(ref self: ContractState, burner: ContractAddress, allowance: u256) {
+            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
+            self.burner_allowance.entry(burner).write(allowance);
+            self.emit(BurnerAllowanceSet { burner, allowance });
+        }
+
+        fn get_burner_allowance(self: @ContractState, burner: ContractAddress) -> u256 {
+            self.burner_allowance.entry(burner).read()
+        }
+
+        fn get_authorized_burners(self: @ContractState) -> Array<ContractAddress> {
+            let mut burners = ArrayTrait::new();
+            let count = self.burners_count.read();
+            let mut i = 0;
+            while i != count {
+                burners.append(self.burners.read(i));
+                i += 1;
+            }
+            burners
+        }
+    }
+
+    #[abi(embed_v0)]
+    impl PrizeTokenImpl of IPrizeToken<ContractState> {
+        fn assign_prize_tokens(ref self: ContractState, recipient: ContractAddress, amount: u256) {
+            self.pausable.assert_not_paused();
+            self.accesscontrol.assert_only_role(PRIZE_ASSIGNER_ROLE);
+            let current_prize_balance = self.prize_balances.entry(recipient).read();
+            self.prize_balances.entry(recipient).write(current_prize_balance + amount);
+            self.erc20.mint(recipient, amount);
+            self.emit(PrizeTokensAssigned { recipient, amount });
+        }
+
+        fn get_prize_balance(self: @ContractState, account: ContractAddress) -> u256 {
+            self.prize_balances.entry(account).read()
+        }
+
+        fn grant_prize_assigner_role(ref self: ContractState, assigner: ContractAddress) {
+            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
+            assert(is_contract(assigner), 'Assigner must be a contract');
+            self.accesscontrol._grant_role(PRIZE_ASSIGNER_ROLE, assigner);
+            let index = self.prize_assigners_count.read();
+            self.prize_assigners.entry(index).write(assigner);
+            self.prize_assigner_index.entry(assigner).write(index);
+            self.prize_assigners_count.write(index + 1);
+        }
+
+        fn revoke_prize_assigner_role(ref self: ContractState, assigner: ContractAddress) {
+            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
+            self.accesscontrol._revoke_role(PRIZE_ASSIGNER_ROLE, assigner);
+            let index = self.prize_assigner_index.read(assigner);
+            let last_index = self.prize_assigners_count.read() - 1;
+            if index != last_index {
+                let last_assigner = self.prize_assigners.entry(last_index).read();
+                self.prize_assigners.entry(index).write(last_assigner);
+                self.prize_assigner_index.entry(last_assigner).write(index);
+            }
+            self.prize_assigners.entry(last_index).write(zero_address_const());
+            self.prize_assigner_index.entry(assigner).write(0);
+            self.prize_assigners_count.write(last_index);
+        }
+    }
+
+    #[abi(embed_v0)]
+    impl UpgradeableImpl of IUpgradeable<ContractState> {
+        fn upgrade(ref self: ContractState, new_class_hash: ClassHash) {
+            self.accesscontrol.assert_only_role(DEFAULT_ADMIN_ROLE);
+            self.upgradeable.upgrade(new_class_hash);
+        }
+    }
+
+
+    fn is_contract(address: ContractAddress) -> bool {
+        // Avoid zero address
+        if address == zero_address_const() {
+            return false;
+        }
+
+        true
+    }
+
+    fn zero_address_const() -> ContractAddress {
+        '0x0'.try_into().unwrap()
+    }
+    #[abi(embed_v0)]
+    impl TestingHelpers of ITestingHelpers<ContractState> {
+        fn getTotalSupply(self: @ContractState) -> u256 {
+            self.erc20.total_supply()
+        }
+
+        fn getAllAllowances(self: @ContractState, account: ContractAddress) -> (u256, u256) {
+            let minter_allowance = self.minter_allowance.read(account);
+            let burner_allowance = self.burner_allowance.read(account);
+            (minter_allowance, burner_allowance)
+        }
+    }
+}
+
diff --git a/packages/snfoundry/contracts/src/StarkPlayVault.cairo b/packages/snfoundry/contracts/src/StarkPlayVault.cairo
index 015c1087..34320c44 100644
--- a/packages/snfoundry/contracts/src/StarkPlayVault.cairo
+++ b/packages/snfoundry/contracts/src/StarkPlayVault.cairo
@@ -48,14 +48,14 @@ pub mod StarkPlayVault {
     //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
     //imports
     //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-    use openzeppelin_access::ownable::OwnableComponent;
-    use openzeppelin_token::erc20::interface::{IERC20Dispatcher, IERC20DispatcherTrait};
-    use starknet::storage::{StoragePointerReadAccess, StoragePointerWriteAccess};
-    use starknet::{ContractAddress, get_caller_address, get_contract_address};
     use crate::StarkPlayERC20::{
         IBurnableDispatcher, IBurnableDispatcherTrait, IMintableDispatcher,
         IMintableDispatcherTrait, IPrizeTokenDispatcher, IPrizeTokenDispatcherTrait,
     };
+    use openzeppelin_access::ownable::OwnableComponent;
+    use openzeppelin_token::erc20::interface::{IERC20Dispatcher, IERC20DispatcherTrait};
+    use starknet::storage::{StoragePointerReadAccess, StoragePointerWriteAccess};
+    use starknet::{ContractAddress, get_caller_address, get_contract_address};
     use super::IStarkPlayVault;
 
     component!(path: OwnableComponent, storage: ownable, event: OwnableEvent);
diff --git a/packages/snfoundry/contracts/src/YourContract.cairo b/packages/snfoundry/contracts/src/YourContract.cairo
index 9b7f426a..7562231e 100644
--- a/packages/snfoundry/contracts/src/YourContract.cairo
+++ b/packages/snfoundry/contracts/src/YourContract.cairo
@@ -1,113 +1,113 @@
-#[starknet::interface]
-pub trait IYourContract<TContractState> {
-    fn greeting(self: @TContractState) -> ByteArray;
-    fn set_greeting(ref self: TContractState, new_greeting: ByteArray, amount_strk: Option<u256>);
-    fn withdraw(ref self: TContractState);
-    fn premium(self: @TContractState) -> bool;
-}
-
-#[starknet::contract]
-pub mod YourContract {
-    use openzeppelin_access::ownable::OwnableComponent;
-    use openzeppelin_token::erc20::interface::{IERC20Dispatcher, IERC20DispatcherTrait};
-    use starknet::storage::{
-        Map, StorageMapReadAccess, StorageMapWriteAccess, StoragePointerReadAccess,
-        StoragePointerWriteAccess,
-    };
-    use starknet::{ContractAddress, get_caller_address, get_contract_address};
-    use super::IYourContract;
-
-    component!(path: OwnableComponent, storage: ownable, event: OwnableEvent);
-
-    #[abi(embed_v0)]
-    impl OwnableImpl = OwnableComponent::OwnableImpl<ContractState>;
-    impl OwnableInternalImpl = OwnableComponent::InternalImpl<ContractState>;
-
-    pub const FELT_STRK_CONTRACT: felt252 =
-        0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d;
-
-    #[event]
-    #[derive(Drop, starknet::Event)]
-    enum Event {
-        #[flat]
-        OwnableEvent: OwnableComponent::Event,
-        GreetingChanged: GreetingChanged,
-    }
-
-    #[derive(Drop, starknet::Event)]
-    struct GreetingChanged {
-        #[key]
-        greeting_setter: ContractAddress,
-        #[key]
-        new_greeting: ByteArray,
-        premium: bool,
-        value: Option<u256>,
-    }
-
-    #[storage]
-    struct Storage {
-        greeting: ByteArray,
-        premium: bool,
-        total_counter: u256,
-        user_greeting_counter: Map<ContractAddress, u256>,
-        #[substorage(v0)]
-        ownable: OwnableComponent::Storage,
-    }
-
-    #[constructor]
-    fn constructor(ref self: ContractState, owner: ContractAddress) {
-        self.greeting.write("Building Unstoppable Apps!!!");
-        self.ownable.initializer(owner);
-    }
-
-    #[abi(embed_v0)]
-    impl YourContractImpl of IYourContract<ContractState> {
-        fn greeting(self: @ContractState) -> ByteArray {
-            self.greeting.read()
-        }
-        fn set_greeting(
-            ref self: ContractState, new_greeting: ByteArray, amount_strk: Option<u256>,
-        ) {
-            self.greeting.write(new_greeting);
-            self.total_counter.write(self.total_counter.read() + 1);
-            let user_counter = self.user_greeting_counter.read(get_caller_address());
-            self.user_greeting_counter.write(get_caller_address(), user_counter + 1);
-
-            match amount_strk {
-                Option::Some(amount_strk) => {
-                    // In `Debug Contract` or UI implementation, call `approve` on STRK contract
-                    // before invoking fn set_greeting()
-                    let strk_contract_address: ContractAddress = FELT_STRK_CONTRACT
-                        .try_into()
-                        .unwrap();
-                    let strk_dispatcher = IERC20Dispatcher {
-                        contract_address: strk_contract_address,
-                    };
-                    strk_dispatcher
-                        .transfer_from(get_caller_address(), get_contract_address(), amount_strk);
-                    self.premium.write(true);
-                },
-                Option::None => { self.premium.write(false); },
-            }
-            self
-                .emit(
-                    GreetingChanged {
-                        greeting_setter: get_caller_address(),
-                        new_greeting: self.greeting.read(),
-                        premium: true,
-                        value: amount_strk,
-                    },
-                );
-        }
-        fn withdraw(ref self: ContractState) {
-            self.ownable.assert_only_owner();
-            let strk_contract_address = FELT_STRK_CONTRACT.try_into().unwrap();
-            let strk_dispatcher = IERC20Dispatcher { contract_address: strk_contract_address };
-            let balance = strk_dispatcher.balance_of(get_contract_address());
-            strk_dispatcher.transfer(self.ownable.owner(), balance);
-        }
-        fn premium(self: @ContractState) -> bool {
-            self.premium.read()
-        }
-    }
-}
+#[starknet::interface]
+pub trait IYourContract<TContractState> {
+    fn greeting(self: @TContractState) -> ByteArray;
+    fn set_greeting(ref self: TContractState, new_greeting: ByteArray, amount_strk: Option<u256>);
+    fn withdraw(ref self: TContractState);
+    fn premium(self: @TContractState) -> bool;
+}
+
+#[starknet::contract]
+pub mod YourContract {
+    use openzeppelin_access::ownable::OwnableComponent;
+    use openzeppelin_token::erc20::interface::{IERC20Dispatcher, IERC20DispatcherTrait};
+    use starknet::storage::{
+        Map, StorageMapReadAccess, StorageMapWriteAccess, StoragePointerReadAccess,
+        StoragePointerWriteAccess,
+    };
+    use starknet::{ContractAddress, get_caller_address, get_contract_address};
+    use super::IYourContract;
+
+    component!(path: OwnableComponent, storage: ownable, event: OwnableEvent);
+
+    #[abi(embed_v0)]
+    impl OwnableImpl = OwnableComponent::OwnableImpl<ContractState>;
+    impl OwnableInternalImpl = OwnableComponent::InternalImpl<ContractState>;
+
+    pub const FELT_STRK_CONTRACT: felt252 =
+        0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d;
+
+    #[event]
+    #[derive(Drop, starknet::Event)]
+    enum Event {
+        #[flat]
+        OwnableEvent: OwnableComponent::Event,
+        GreetingChanged: GreetingChanged,
+    }
+
+    #[derive(Drop, starknet::Event)]
+    struct GreetingChanged {
+        #[key]
+        greeting_setter: ContractAddress,
+        #[key]
+        new_greeting: ByteArray,
+        premium: bool,
+        value: Option<u256>,
+    }
+
+    #[storage]
+    struct Storage {
+        greeting: ByteArray,
+        premium: bool,
+        total_counter: u256,
+        user_greeting_counter: Map<ContractAddress, u256>,
+        #[substorage(v0)]
+        ownable: OwnableComponent::Storage,
+    }
+
+    #[constructor]
+    fn constructor(ref self: ContractState, owner: ContractAddress) {
+        self.greeting.write("Building Unstoppable Apps!!!");
+        self.ownable.initializer(owner);
+    }
+
+    #[abi(embed_v0)]
+    impl YourContractImpl of IYourContract<ContractState> {
+        fn greeting(self: @ContractState) -> ByteArray {
+            self.greeting.read()
+        }
+        fn set_greeting(
+            ref self: ContractState, new_greeting: ByteArray, amount_strk: Option<u256>,
+        ) {
+            self.greeting.write(new_greeting);
+            self.total_counter.write(self.total_counter.read() + 1);
+            let user_counter = self.user_greeting_counter.read(get_caller_address());
+            self.user_greeting_counter.write(get_caller_address(), user_counter + 1);
+
+            match amount_strk {
+                Option::Some(amount_strk) => {
+                    // In `Debug Contract` or UI implementation, call `approve` on STRK contract
+                    // before invoking fn set_greeting()
+                    let strk_contract_address: ContractAddress = FELT_STRK_CONTRACT
+                        .try_into()
+                        .unwrap();
+                    let strk_dispatcher = IERC20Dispatcher {
+                        contract_address: strk_contract_address,
+                    };
+                    strk_dispatcher
+                        .transfer_from(get_caller_address(), get_contract_address(), amount_strk);
+                    self.premium.write(true);
+                },
+                Option::None => { self.premium.write(false); },
+            }
+            self
+                .emit(
+                    GreetingChanged {
+                        greeting_setter: get_caller_address(),
+                        new_greeting: self.greeting.read(),
+                        premium: true,
+                        value: amount_strk,
+                    },
+                );
+        }
+        fn withdraw(ref self: ContractState) {
+            self.ownable.assert_only_owner();
+            let strk_contract_address = FELT_STRK_CONTRACT.try_into().unwrap();
+            let strk_dispatcher = IERC20Dispatcher { contract_address: strk_contract_address };
+            let balance = strk_dispatcher.balance_of(get_contract_address());
+            strk_dispatcher.transfer(self.ownable.owner(), balance);
+        }
+        fn premium(self: @ContractState) -> bool {
+            self.premium.read()
+        }
+    }
+}
diff --git a/packages/snfoundry/contracts/src/lib.cairo b/packages/snfoundry/contracts/src/lib.cairo
index b322f331..920ddde6 100644
--- a/packages/snfoundry/contracts/src/lib.cairo
+++ b/packages/snfoundry/contracts/src/lib.cairo
@@ -1,6 +1,6 @@
-pub mod Lottery;
-pub mod LottoTicketNFT;
-pub mod StarkPlayERC20;
-pub mod StarkPlayVault;
-pub mod YourContract;
-
+pub mod Lottery;
+pub mod LottoTicketNFT;
+pub mod StarkPlayERC20;
+pub mod StarkPlayVault;
+pub mod YourContract;
+
diff --git a/packages/snfoundry/contracts/tests/TestContract.cairo b/packages/snfoundry/contracts/tests/TestContract.cairo
index 720636d7..56c8db7a 100644
--- a/packages/snfoundry/contracts/tests/TestContract.cairo
+++ b/packages/snfoundry/contracts/tests/TestContract.cairo
@@ -1,61 +1,61 @@
-use contracts::YourContract::YourContract::FELT_STRK_CONTRACT;
-use contracts::YourContract::{IYourContractDispatcher, IYourContractDispatcherTrait};
-use openzeppelin_testing::declare_and_deploy;
-use openzeppelin_token::erc20::interface::{IERC20Dispatcher, IERC20DispatcherTrait};
-use openzeppelin_utils::serde::SerializedAppend;
-use snforge_std::{CheatSpan, cheat_caller_address};
-use starknet::ContractAddress;
-
-// Real wallet address deployed on Sepolia
-const OWNER: ContractAddress = 0x02dA5254690b46B9C4059C25366D1778839BE63C142d899F0306fd5c312A5918
-    .try_into()
-    .unwrap();
-
-const STRK_TOKEN_CONTRACT_ADDRESS: ContractAddress = FELT_STRK_CONTRACT.try_into().unwrap();
-
-fn deploy_contract(name: ByteArray) -> ContractAddress {
-    let mut calldata = array![];
-    calldata.append_serde(OWNER);
-    declare_and_deploy(name, calldata)
-}
-
-#[test]
-fn test_set_greetings() {
-    let contract_address = deploy_contract("YourContract");
-
-    let dispatcher = IYourContractDispatcher { contract_address };
-
-    let current_greeting = dispatcher.greeting();
-    let expected_greeting: ByteArray = "Building Unstoppable Apps!!!";
-    assert(current_greeting == expected_greeting, 'Should have the right message');
-
-    let new_greeting: ByteArray = "Learn Scaffold-Stark 2! :)";
+use contracts::YourContract::YourContract::FELT_STRK_CONTRACT;
+use contracts::YourContract::{IYourContractDispatcher, IYourContractDispatcherTrait};
+use openzeppelin_testing::declare_and_deploy;
+use openzeppelin_token::erc20::interface::{IERC20Dispatcher, IERC20DispatcherTrait};
+use openzeppelin_utils::serde::SerializedAppend;
+use snforge_std::{CheatSpan, cheat_caller_address};
+use starknet::ContractAddress;
+
+// Real wallet address deployed on Sepolia
+const OWNER: ContractAddress = 0x02dA5254690b46B9C4059C25366D1778839BE63C142d899F0306fd5c312A5918
+    .try_into()
+    .unwrap();
+
+const STRK_TOKEN_CONTRACT_ADDRESS: ContractAddress = FELT_STRK_CONTRACT.try_into().unwrap();
+
+fn deploy_contract(name: ByteArray) -> ContractAddress {
+    let mut calldata = array![];
+    calldata.append_serde(OWNER);
+    declare_and_deploy(name, calldata)
+}
+
+#[test]
+fn test_set_greetings() {
+    let contract_address = deploy_contract("YourContract");
+
+    let dispatcher = IYourContractDispatcher { contract_address };
+
+    let current_greeting = dispatcher.greeting();
+    let expected_greeting: ByteArray = "Building Unstoppable Apps!!!";
+    assert(current_greeting == expected_greeting, 'Should have the right message');
+
+    let new_greeting: ByteArray = "Learn Scaffold-Stark 2! :)";
     dispatcher.set_greeting(new_greeting.clone(), Option::None); // we don't transfer any strk
-    assert(dispatcher.greeting() == new_greeting, 'Should allow set new message');
-}
-
-#[test]
-#[fork("SEPOLIA_LATEST")]
-fn test_transfer() {
-    let user = OWNER;
-    let your_contract_address = deploy_contract("YourContract");
-
-    let your_contract_dispatcher = IYourContractDispatcher {
-        contract_address: your_contract_address,
-    };
-    let erc20_dispatcher = IERC20Dispatcher { contract_address: STRK_TOKEN_CONTRACT_ADDRESS };
-    let amount_to_transfer: u256 = 500;
-    cheat_caller_address(STRK_TOKEN_CONTRACT_ADDRESS, user, CheatSpan::TargetCalls(1));
-    erc20_dispatcher.approve(your_contract_address, amount_to_transfer);
-    let approved_amount = erc20_dispatcher.allowance(user, your_contract_address);
-    assert(approved_amount == amount_to_transfer, 'Not the right amount approved');
-
-    let new_greeting: ByteArray = "Learn Scaffold-Stark 2! :)";
-
-    cheat_caller_address(your_contract_address, user, CheatSpan::TargetCalls(1));
-    your_contract_dispatcher
-        .set_greeting(
-            new_greeting.clone(), Option::Some(amount_to_transfer),
+    assert(dispatcher.greeting() == new_greeting, 'Should allow set new message');
+}
+
+#[test]
+#[fork("SEPOLIA_LATEST")]
+fn test_transfer() {
+    let user = OWNER;
+    let your_contract_address = deploy_contract("YourContract");
+
+    let your_contract_dispatcher = IYourContractDispatcher {
+        contract_address: your_contract_address,
+    };
+    let erc20_dispatcher = IERC20Dispatcher { contract_address: STRK_TOKEN_CONTRACT_ADDRESS };
+    let amount_to_transfer: u256 = 500;
+    cheat_caller_address(STRK_TOKEN_CONTRACT_ADDRESS, user, CheatSpan::TargetCalls(1));
+    erc20_dispatcher.approve(your_contract_address, amount_to_transfer);
+    let approved_amount = erc20_dispatcher.allowance(user, your_contract_address);
+    assert(approved_amount == amount_to_transfer, 'Not the right amount approved');
+
+    let new_greeting: ByteArray = "Learn Scaffold-Stark 2! :)";
+
+    cheat_caller_address(your_contract_address, user, CheatSpan::TargetCalls(1));
+    your_contract_dispatcher
+        .set_greeting(
+            new_greeting.clone(), Option::Some(amount_to_transfer),
         ); // we transfer 500 wei
-    assert(your_contract_dispatcher.greeting() == new_greeting, 'Should allow set new message');
-}
+    assert(your_contract_dispatcher.greeting() == new_greeting, 'Should allow set new message');
+}
diff --git a/packages/snfoundry/contracts/tests/test_CU05.cairo b/packages/snfoundry/contracts/tests/test_CU05.cairo
index bb00b75a..ea2ebf92 100644
--- a/packages/snfoundry/contracts/tests/test_CU05.cairo
+++ b/packages/snfoundry/contracts/tests/test_CU05.cairo
@@ -38,9 +38,7 @@ fn deploy_vault_contract() -> (IStarkPlayVaultDispatcher, IMintableDispatcher) {
     let _strk_token = deploy_mock_strk_token();
 
     let starkplay_contract = declare("StarkPlayERC20").unwrap().contract_class();
-    let starkplay_constructor_calldata = array![
-        owner_address().into(), owner_address().into(),
-    ];
+    let starkplay_constructor_calldata = array![owner_address().into(), owner_address().into()];
     let (starkplay_address, _) = starkplay_contract
         .deploy(@starkplay_constructor_calldata)
         .unwrap();
@@ -57,10 +55,8 @@ fn deploy_vault_contract() -> (IStarkPlayVaultDispatcher, IMintableDispatcher) {
     start_cheat_caller_address(starkplay_token.contract_address, owner_address());
     starkplay_token.grant_minter_role(vault_address);
     starkplay_token_burn.grant_burner_role(vault_address);
-    starkplay_token
-        .set_minter_allowance(vault_address, 1000000000000000000000000000_u256);
-    starkplay_token_burn
-        .set_burner_allowance(vault_address, 1000000000000000000000000000_u256);
+    starkplay_token.set_minter_allowance(vault_address, 1000000000000000000000000000_u256);
+    starkplay_token_burn.set_burner_allowance(vault_address, 1000000000000000000000000000_u256);
     stop_cheat_caller_address(starkplay_token.contract_address);
 
     (vault, starkplay_token)
@@ -83,10 +79,7 @@ fn deploy_mock_strk_token() -> IMintableDispatcher {
     start_cheat_caller_address(deployed_address, owner_address());
 
     strk_token.grant_minter_role(owner_address());
-    strk_token
-        .set_minter_allowance(
-            owner_address(), 1000000000000000000000000000_u256,
-        );
+    strk_token.set_minter_allowance(owner_address(), 1000000000000000000000000000_u256);
 
     strk_token.mint(USER(), 1000000000000000000000000000_u256);
 
@@ -178,7 +171,9 @@ fn test_create_new_draw_default_duration() {
     let start_block = lottery.GetJackpotEntryStartBlock(current_draw_id);
     let end_block = lottery.GetJackpotEntryEndBlock(current_draw_id);
 
-    assert(end_block == start_block + STANDARD_DRAW_DURATION_BLOCKS, 'Should use standard duration');
+    assert(
+        end_block == start_block + STANDARD_DRAW_DURATION_BLOCKS, 'Should use standard duration',
+    );
 }
 
 #[test]
@@ -256,7 +251,9 @@ fn test_backward_compatibility_create_new_draw() {
     let start_block = lottery.GetJackpotEntryStartBlock(current_draw_id);
     let end_block = lottery.GetJackpotEntryEndBlock(current_draw_id);
 
-    assert(end_block == start_block + STANDARD_DRAW_DURATION_BLOCKS, 'Should use standard duration');
+    assert(
+        end_block == start_block + STANDARD_DRAW_DURATION_BLOCKS, 'Should use standard duration',
+    );
 }
 
 #[should_panic(expected: 'Duration must be > 0')]
diff --git a/packages/snfoundry/contracts/tests/test_jackpot_history.cairo b/packages/snfoundry/contracts/tests/test_jackpot_history.cairo
index a2a09e9e..119b01c5 100644
--- a/packages/snfoundry/contracts/tests/test_jackpot_history.cairo
+++ b/packages/snfoundry/contracts/tests/test_jackpot_history.cairo
@@ -1,206 +1,206 @@
-use contracts::Lottery::{ILotteryDispatcher, ILotteryDispatcherTrait};
-use contracts::StarkPlayERC20::IMintableDispatcher;
-use contracts::StarkPlayVault::IStarkPlayVaultDispatcher;
-use core::array::ArrayTrait;
-use snforge_std::{
-    ContractClassTrait, DeclareResultTrait, declare, start_cheat_caller_address,
-    stop_cheat_caller_address,
-};
-use starknet::ContractAddress;
-
-// Helper constants
-pub fn OWNER() -> ContractAddress {
-    'OWNER'.try_into().unwrap()
-}
-
-pub fn USER() -> ContractAddress {
-    'USER'.try_into().unwrap()
-}
-
-pub fn deploy_lottery() -> ContractAddress {
-    // Deploy mock contracts first
-    let mock_strk_play = deploy_mock_strk_play();
-    let mock_vault = deploy_mock_vault(mock_strk_play.contract_address);
-
-    let mut constructor_calldata = array![];
-    OWNER().serialize(ref constructor_calldata);
-    mock_strk_play.contract_address.serialize(ref constructor_calldata);
-    mock_vault.contract_address.serialize(ref constructor_calldata);
-
-    let lottery_class = declare("Lottery").unwrap().contract_class();
-    let (lottery_addr, _) = lottery_class.deploy(@constructor_calldata).unwrap();
-
-    lottery_addr
-}
-
-fn deploy_mock_strk_play() -> IMintableDispatcher {
-    let starkplay_contract = declare("StarkPlayERC20").unwrap().contract_class();
-    let starkplay_constructor_calldata = array![
-        OWNER().into(), OWNER().into(),
+use contracts::Lottery::{ILotteryDispatcher, ILotteryDispatcherTrait};
+use contracts::StarkPlayERC20::IMintableDispatcher;
+use contracts::StarkPlayVault::IStarkPlayVaultDispatcher;
+use core::array::ArrayTrait;
+use snforge_std::{
+    ContractClassTrait, DeclareResultTrait, declare, start_cheat_caller_address,
+    stop_cheat_caller_address,
+};
+use starknet::ContractAddress;
+
+// Helper constants
+pub fn OWNER() -> ContractAddress {
+    'OWNER'.try_into().unwrap()
+}
+
+pub fn USER() -> ContractAddress {
+    'USER'.try_into().unwrap()
+}
+
+pub fn deploy_lottery() -> ContractAddress {
+    // Deploy mock contracts first
+    let mock_strk_play = deploy_mock_strk_play();
+    let mock_vault = deploy_mock_vault(mock_strk_play.contract_address);
+
+    let mut constructor_calldata = array![];
+    OWNER().serialize(ref constructor_calldata);
+    mock_strk_play.contract_address.serialize(ref constructor_calldata);
+    mock_vault.contract_address.serialize(ref constructor_calldata);
+
+    let lottery_class = declare("Lottery").unwrap().contract_class();
+    let (lottery_addr, _) = lottery_class.deploy(@constructor_calldata).unwrap();
+
+    lottery_addr
+}
+
+fn deploy_mock_strk_play() -> IMintableDispatcher {
+    let starkplay_contract = declare("StarkPlayERC20").unwrap().contract_class();
+    let starkplay_constructor_calldata = array![
+        OWNER().into(), OWNER().into(),
     ]; // recipient and admin
-    let (starkplay_address, _) = starkplay_contract
-        .deploy(@starkplay_constructor_calldata)
-        .unwrap();
-    IMintableDispatcher { contract_address: starkplay_address }
-}
-
-fn deploy_mock_vault(strk_play_address: ContractAddress) -> IStarkPlayVaultDispatcher {
-    let vault_contract = declare("StarkPlayVault").unwrap().contract_class();
-    let vault_constructor_calldata = array![
-        OWNER().into(), strk_play_address.into(), 50_u64.into(),
+    let (starkplay_address, _) = starkplay_contract
+        .deploy(@starkplay_constructor_calldata)
+        .unwrap();
+    IMintableDispatcher { contract_address: starkplay_address }
+}
+
+fn deploy_mock_vault(strk_play_address: ContractAddress) -> IStarkPlayVaultDispatcher {
+    let vault_contract = declare("StarkPlayVault").unwrap().contract_class();
+    let vault_constructor_calldata = array![
+        OWNER().into(), strk_play_address.into(), 50_u64.into(),
     ]; // owner, starkPlayToken, feePercentage
-    let (vault_address, _) = vault_contract.deploy(@vault_constructor_calldata).unwrap();
-    IStarkPlayVaultDispatcher { contract_address: vault_address }
-}
-
-// Helper functions to access JackpotEntry data through getter functions
-fn get_jackpot_entry_draw_id(lottery_dispatcher: ILotteryDispatcher, draw_id: u64) -> u64 {
-    lottery_dispatcher.GetJackpotEntryDrawId(draw_id)
-}
-
-fn get_jackpot_entry_amount(lottery_dispatcher: ILotteryDispatcher, draw_id: u64) -> u256 {
-    lottery_dispatcher.GetJackpotEntryAmount(draw_id)
-}
-
-fn get_jackpot_entry_start_time(lottery_dispatcher: ILotteryDispatcher, draw_id: u64) -> u64 {
-    lottery_dispatcher.GetJackpotEntryStartTime(draw_id)
-}
-
-fn get_jackpot_entry_end_time(lottery_dispatcher: ILotteryDispatcher, draw_id: u64) -> u64 {
-    lottery_dispatcher.GetJackpotEntryEndTime(draw_id)
-}
-
-fn get_jackpot_entry_is_active(lottery_dispatcher: ILotteryDispatcher, draw_id: u64) -> bool {
-    lottery_dispatcher.GetJackpotEntryIsActive(draw_id)
-}
-
-fn get_jackpot_entry_is_completed(lottery_dispatcher: ILotteryDispatcher, draw_id: u64) -> bool {
-    lottery_dispatcher.GetJackpotEntryIsCompleted(draw_id)
-}
-
-#[test]
-fn test_get_jackpot_history_basic() {
-    let lottery_addr = deploy_lottery();
-    let lottery_dispatcher = ILotteryDispatcher { contract_address: lottery_addr };
-
-    start_cheat_caller_address(lottery_dispatcher.contract_address, OWNER());
-    // Initialize the lottery
-    lottery_dispatcher.Initialize(1000000000000000000_u256, 1000000000000000000000_u256);
-    stop_cheat_caller_address(lottery_dispatcher.contract_address);
-
-    // Get jackpot history - should return 1 entry for the initial draw
-    let jackpot_history = lottery_dispatcher.get_jackpot_history();
-    assert!(jackpot_history.len() == 1, "Should have 1 jackpot entry");
-
-    // Use getter functions to access the data
-    assert!(get_jackpot_entry_draw_id(lottery_dispatcher, 1) == 1, "First draw should have ID 1");
-    assert!(get_jackpot_entry_is_active(lottery_dispatcher, 1), "First draw should be active");
-    assert!(
-        !get_jackpot_entry_is_completed(lottery_dispatcher, 1),
-        "First draw should not be completed",
-    );
-}
-
-#[test]
-fn test_get_jackpot_history_multiple_draws() {
-    let lottery_addr = deploy_lottery();
-    let lottery_dispatcher = ILotteryDispatcher { contract_address: lottery_addr };
-
-    start_cheat_caller_address(lottery_dispatcher.contract_address, OWNER());
-    // Initialize the lottery
-    lottery_dispatcher.Initialize(1000000000000000000_u256, 1000000000000000000000_u256);
-
-    // Create additional draws
-    // close previous before next
-    lottery_dispatcher.DrawNumbers(1);
-    lottery_dispatcher.CreateNewDraw(2000000000000000000000_u256);
-    lottery_dispatcher.DrawNumbers(2);
-    lottery_dispatcher.CreateNewDraw(3000000000000000000000_u256);
-    stop_cheat_caller_address(lottery_dispatcher.contract_address);
-    // Get jackpot history - should return 3 entries
-    let jackpot_history = lottery_dispatcher.get_jackpot_history();
-    assert!(jackpot_history.len() == 3, "Should have 3 jackpot entries");
-
-    // Verify each entry using getter functions
-    assert!(
-        get_jackpot_entry_draw_id(lottery_dispatcher, 1) == 1, "First entry should have drawId 1",
-    );
-    assert!(
-        get_jackpot_entry_draw_id(lottery_dispatcher, 2) == 2, "Second entry should have drawId 2",
-    );
-    assert!(
-        get_jackpot_entry_draw_id(lottery_dispatcher, 3) == 3, "Third entry should have drawId 3",
-    );
-
-    assert!(
-        get_jackpot_entry_amount(lottery_dispatcher, 1) == 1000000000000000000000_u256,
-        "First jackpot amount incorrect",
-    );
-    assert!(
-        get_jackpot_entry_amount(lottery_dispatcher, 2) == 2000000000000000000000_u256,
-        "Second jackpot amount incorrect",
-    );
-    assert!(
-        get_jackpot_entry_amount(lottery_dispatcher, 3) == 3000000000000000000000_u256,
-        "Third jackpot amount incorrect",
-    );
-}
-
-#[test]
-fn test_get_jackpot_history_completed_draw() {
-    let lottery_addr = deploy_lottery();
-    let lottery_dispatcher = ILotteryDispatcher { contract_address: lottery_addr };
-
-    start_cheat_caller_address(lottery_dispatcher.contract_address, OWNER());
-    // Initialize the lottery
-    lottery_dispatcher.Initialize(1000000000000000000_u256, 1000000000000000000000_u256);
-
-    // Complete the draw
-    lottery_dispatcher.DrawNumbers(1);
-    stop_cheat_caller_address(lottery_dispatcher.contract_address);
-    // Get jackpot history
-    let jackpot_history = lottery_dispatcher.get_jackpot_history();
-    assert!(jackpot_history.len() == 1, "Should have 1 jackpot entry");
-
-    // Use getter functions to verify the completed draw
-    assert!(get_jackpot_entry_draw_id(lottery_dispatcher, 1) == 1, "Entry should have drawId");
-    assert!(
-        !get_jackpot_entry_is_active(lottery_dispatcher, 1),
-        "Draw should not be active after completion",
-    );
-    assert!(get_jackpot_entry_is_completed(lottery_dispatcher, 1), "Draw should be completed");
-}
-
-#[test]
-fn test_get_jackpot_history_performance() {
-    let lottery_addr = deploy_lottery();
-    let lottery_dispatcher = ILotteryDispatcher { contract_address: lottery_addr };
-
-    start_cheat_caller_address(lottery_dispatcher.contract_address, OWNER());
-    // Initialize the lottery
-    lottery_dispatcher.Initialize(1000000000000000000_u256, 1000000000000000000000_u256);
-
-    // Create many draws to test performance
-    let mut i = 0;
+    let (vault_address, _) = vault_contract.deploy(@vault_constructor_calldata).unwrap();
+    IStarkPlayVaultDispatcher { contract_address: vault_address }
+}
+
+// Helper functions to access JackpotEntry data through getter functions
+fn get_jackpot_entry_draw_id(lottery_dispatcher: ILotteryDispatcher, draw_id: u64) -> u64 {
+    lottery_dispatcher.GetJackpotEntryDrawId(draw_id)
+}
+
+fn get_jackpot_entry_amount(lottery_dispatcher: ILotteryDispatcher, draw_id: u64) -> u256 {
+    lottery_dispatcher.GetJackpotEntryAmount(draw_id)
+}
+
+fn get_jackpot_entry_start_time(lottery_dispatcher: ILotteryDispatcher, draw_id: u64) -> u64 {
+    lottery_dispatcher.GetJackpotEntryStartTime(draw_id)
+}
+
+fn get_jackpot_entry_end_time(lottery_dispatcher: ILotteryDispatcher, draw_id: u64) -> u64 {
+    lottery_dispatcher.GetJackpotEntryEndTime(draw_id)
+}
+
+fn get_jackpot_entry_is_active(lottery_dispatcher: ILotteryDispatcher, draw_id: u64) -> bool {
+    lottery_dispatcher.GetJackpotEntryIsActive(draw_id)
+}
+
+fn get_jackpot_entry_is_completed(lottery_dispatcher: ILotteryDispatcher, draw_id: u64) -> bool {
+    lottery_dispatcher.GetJackpotEntryIsCompleted(draw_id)
+}
+
+#[test]
+fn test_get_jackpot_history_basic() {
+    let lottery_addr = deploy_lottery();
+    let lottery_dispatcher = ILotteryDispatcher { contract_address: lottery_addr };
+
+    start_cheat_caller_address(lottery_dispatcher.contract_address, OWNER());
+    // Initialize the lottery
+    lottery_dispatcher.Initialize(1000000000000000000_u256, 1000000000000000000000_u256);
+    stop_cheat_caller_address(lottery_dispatcher.contract_address);
+
+    // Get jackpot history - should return 1 entry for the initial draw
+    let jackpot_history = lottery_dispatcher.get_jackpot_history();
+    assert!(jackpot_history.len() == 1, "Should have 1 jackpot entry");
+
+    // Use getter functions to access the data
+    assert!(get_jackpot_entry_draw_id(lottery_dispatcher, 1) == 1, "First draw should have ID 1");
+    assert!(get_jackpot_entry_is_active(lottery_dispatcher, 1), "First draw should be active");
+    assert!(
+        !get_jackpot_entry_is_completed(lottery_dispatcher, 1),
+        "First draw should not be completed",
+    );
+}
+
+#[test]
+fn test_get_jackpot_history_multiple_draws() {
+    let lottery_addr = deploy_lottery();
+    let lottery_dispatcher = ILotteryDispatcher { contract_address: lottery_addr };
+
+    start_cheat_caller_address(lottery_dispatcher.contract_address, OWNER());
+    // Initialize the lottery
+    lottery_dispatcher.Initialize(1000000000000000000_u256, 1000000000000000000000_u256);
+
+    // Create additional draws
+    // close previous before next
+    lottery_dispatcher.DrawNumbers(1);
+    lottery_dispatcher.CreateNewDraw(2000000000000000000000_u256);
+    lottery_dispatcher.DrawNumbers(2);
+    lottery_dispatcher.CreateNewDraw(3000000000000000000000_u256);
+    stop_cheat_caller_address(lottery_dispatcher.contract_address);
+    // Get jackpot history - should return 3 entries
+    let jackpot_history = lottery_dispatcher.get_jackpot_history();
+    assert!(jackpot_history.len() == 3, "Should have 3 jackpot entries");
+
+    // Verify each entry using getter functions
+    assert!(
+        get_jackpot_entry_draw_id(lottery_dispatcher, 1) == 1, "First entry should have drawId 1",
+    );
+    assert!(
+        get_jackpot_entry_draw_id(lottery_dispatcher, 2) == 2, "Second entry should have drawId 2",
+    );
+    assert!(
+        get_jackpot_entry_draw_id(lottery_dispatcher, 3) == 3, "Third entry should have drawId 3",
+    );
+
+    assert!(
+        get_jackpot_entry_amount(lottery_dispatcher, 1) == 1000000000000000000000_u256,
+        "First jackpot amount incorrect",
+    );
+    assert!(
+        get_jackpot_entry_amount(lottery_dispatcher, 2) == 2000000000000000000000_u256,
+        "Second jackpot amount incorrect",
+    );
+    assert!(
+        get_jackpot_entry_amount(lottery_dispatcher, 3) == 3000000000000000000000_u256,
+        "Third jackpot amount incorrect",
+    );
+}
+
+#[test]
+fn test_get_jackpot_history_completed_draw() {
+    let lottery_addr = deploy_lottery();
+    let lottery_dispatcher = ILotteryDispatcher { contract_address: lottery_addr };
+
+    start_cheat_caller_address(lottery_dispatcher.contract_address, OWNER());
+    // Initialize the lottery
+    lottery_dispatcher.Initialize(1000000000000000000_u256, 1000000000000000000000_u256);
+
+    // Complete the draw
+    lottery_dispatcher.DrawNumbers(1);
+    stop_cheat_caller_address(lottery_dispatcher.contract_address);
+    // Get jackpot history
+    let jackpot_history = lottery_dispatcher.get_jackpot_history();
+    assert!(jackpot_history.len() == 1, "Should have 1 jackpot entry");
+
+    // Use getter functions to verify the completed draw
+    assert!(get_jackpot_entry_draw_id(lottery_dispatcher, 1) == 1, "Entry should have drawId");
+    assert!(
+        !get_jackpot_entry_is_active(lottery_dispatcher, 1),
+        "Draw should not be active after completion",
+    );
+    assert!(get_jackpot_entry_is_completed(lottery_dispatcher, 1), "Draw should be completed");
+}
+
+#[test]
+fn test_get_jackpot_history_performance() {
+    let lottery_addr = deploy_lottery();
+    let lottery_dispatcher = ILotteryDispatcher { contract_address: lottery_addr };
+
+    start_cheat_caller_address(lottery_dispatcher.contract_address, OWNER());
+    // Initialize the lottery
+    lottery_dispatcher.Initialize(1000000000000000000_u256, 1000000000000000000000_u256);
+
+    // Create many draws to test performance
+    let mut i = 0;
     let mut next_amount: u256 = 2000000000000000000000_u256; // starts at draw 2 amount
-    while i != 10 {
-        // Close last active then create next
-        lottery_dispatcher.DrawNumbers(i + 1);
-        lottery_dispatcher.CreateNewDraw(next_amount);
+    while i != 10 {
+        // Close last active then create next
+        lottery_dispatcher.DrawNumbers(i + 1);
+        lottery_dispatcher.CreateNewDraw(next_amount);
         next_amount = next_amount + 1000000000000000000000_u256; // increment 1e18 each iteration
-        i = i + 1;
-    }
-    stop_cheat_caller_address(lottery_dispatcher.contract_address);
-    // Get jackpot history - should handle multiple entries efficiently
-    let jackpot_history = lottery_dispatcher.get_jackpot_history();
-    assert!(jackpot_history.len() == 11, "Should have 11 jackpot entries");
-
-    // Verify the last entry using getter functions
-    assert!(
-        get_jackpot_entry_draw_id(lottery_dispatcher, 11) == 11, "Last entry should have drawId 11",
-    );
-    assert!(
-        get_jackpot_entry_amount(lottery_dispatcher, 11) == 11000000000000000000000_u256,
-        "Last jackpot amount incorrect",
-    );
-}
+        i = i + 1;
+    }
+    stop_cheat_caller_address(lottery_dispatcher.contract_address);
+    // Get jackpot history - should handle multiple entries efficiently
+    let jackpot_history = lottery_dispatcher.get_jackpot_history();
+    assert!(jackpot_history.len() == 11, "Should have 11 jackpot entries");
+
+    // Verify the last entry using getter functions
+    assert!(
+        get_jackpot_entry_draw_id(lottery_dispatcher, 11) == 11, "Last entry should have drawId 11",
+    );
+    assert!(
+        get_jackpot_entry_amount(lottery_dispatcher, 11) == 11000000000000000000000_u256,
+        "Last jackpot amount incorrect",
+    );
+}
diff --git a/packages/snfoundry/scripts-ts/deploy-contract.ts b/packages/snfoundry/scripts-ts/deploy-contract.ts
index 376cce75..5cb88b36 100644
--- a/packages/snfoundry/scripts-ts/deploy-contract.ts
+++ b/packages/snfoundry/scripts-ts/deploy-contract.ts
@@ -1,330 +1,330 @@
-import fs from "fs";
-import path from "path";
-import { networks } from "./helpers/networks";
-import yargs from "yargs";
-import {
-  CallData,
-  stark,
-  RawArgs,
-  transaction,
-  extractContractHashes,
-  DeclareContractPayload,
-  UniversalDetails,
-  constants,
-} from "starknet";
-import { DeployContractParams, Network } from "./types";
-import { green, red, yellow } from "./helpers/colorize-log";
-
-interface Arguments {
-  network: string;
-  reset: boolean;
-  [x: string]: unknown;
-  _: (string | number)[];
-  $0: string;
-}
-
-const argv = yargs(process.argv.slice(2))
-  .option("network", {
-    type: "string",
-    description: "Specify the network",
-    demandOption: true,
-  })
-  .option("reset", {
-    type: "boolean",
-    description: "Reset deployments (remove existing deployments)",
-    default: true,
-  })
-  .parseSync() as Arguments;
-
-const networkName: string = argv.network;
-const resetDeployments: boolean = argv.reset;
-
-let deployments = {};
-let deployCalls = [];
-
-const { provider, deployer }: Network = networks[networkName];
-
-const declareIfNot_NotWait = async (
-  payload: DeclareContractPayload,
-  options?: UniversalDetails
-) => {
-  const declareContractPayload = extractContractHashes(payload);
-  try {
-    await provider.getClassByHash(declareContractPayload.classHash);
-  } catch (error) {
-    try {
-      const { transaction_hash } = await deployer.declare(payload, {
-        ...options,
-        version: constants.TRANSACTION_VERSION.V3,
-      });
-      if (networkName === "sepolia" || networkName === "mainnet") {
-        console.log(
-          yellow("Waiting for declaration transaction to be accepted...")
-        );
-        const receipt = await provider.waitForTransaction(transaction_hash);
-        console.log(
-          yellow("Declaration transaction receipt:"),
-          JSON.stringify(
-            receipt,
-            (_, v) => (typeof v === "bigint" ? v.toString() : v),
-            2
-          )
-        );
-
-        const receiptAny = receipt as any;
-        if (receiptAny.execution_status !== "SUCCEEDED") {
-          const revertReason = receiptAny.revert_reason || "Unknown reason";
-          throw new Error(
-            red(`Declaration failed or reverted. Reason: ${revertReason}`)
-          );
-        }
-        console.log(green("Declaration successful"));
-      }
-    } catch (e) {
-      console.error(red("Error declaring contract:"), e);
-      throw e;
-    }
-  }
-  return {
-    classHash: declareContractPayload.classHash,
-  };
-};
-
-const deployContract_NotWait = async (payload: {
-  salt: string;
-  classHash: string;
-  constructorCalldata: RawArgs;
-}) => {
-  try {
-    const { calls, addresses } = transaction.buildUDCCall(
-      payload,
-      deployer.address
-    );
-    deployCalls.push(...calls);
-    return {
-      contractAddress: addresses[0],
-    };
-  } catch (error) {
-    console.error(red("Error building UDC call:"), error);
-    throw error;
-  }
-};
-
-const findContractFile = (
-  contract: string,
-  fileType: "compiled_contract_class" | "contract_class"
-): string => {
-  const targetDir = path.resolve(__dirname, "../contracts/target/dev");
-  const files = fs.readdirSync(targetDir);
-
-  const pattern = new RegExp(`.*${contract}\\.${fileType}\\.json$`);
-  const matchingFile = files.find((file) => pattern.test(file));
-
-  if (!matchingFile) {
-    throw new Error(
-      `Could not find ${fileType} file for contract "${contract}". ` +
-        `Try removing snfoundry/contracts/target, then run 'yarn compile' and check if your contract name is correct inside the contracts/target/dev directory.`
-    );
-  }
-
-  return path.join(targetDir, matchingFile);
-};
-
-/**
- * Deploy a contract using the specified parameters.
- *
- * @param {DeployContractParams} params - The parameters for deploying the contract.
- * @param {string} params.contract - The name of the contract to deploy.
- * @param {string} [params.contractName] - The name to export the contract as (optional).
- * @param {RawArgs} [params.constructorArgs] - The constructor arguments for the contract (optional).
- * @param {UniversalDetails} [params.options] - Additional deployment options (optional).
- *
- * @returns {Promise<{ classHash: string; address: string }>} The deployed contract's class hash and address.
- *
- * @example
- * ///Example usage of deployContract function
- * await deployContract({
- *   contract: "YourContract",
- *   contractName: "YourContractExportName",
- *   constructorArgs: { owner: deployer.address },
- *   options: { maxFee: BigInt(1000000000000) }
- * });
- */
-
-const deployContract = async (
-  params: DeployContractParams
-): Promise<{
-  classHash: string;
-  address: string;
-}> => {
-  const { contract, constructorArgs, contractName, options } = params;
-
-  try {
-    await deployer.getContractVersion(deployer.address);
-  } catch (e) {
-    if (e.toString().includes("Contract not found")) {
-      const errorMessage = `The wallet you're using to deploy the contract is not deployed in the ${networkName} network.`;
-      console.error(red(errorMessage));
-      throw new Error(errorMessage);
-    } else {
-      console.error(red("Error getting contract version: "), e);
-      throw e;
-    }
-  }
-
-  let compiledContractCasm;
-  let compiledContractSierra;
-
-  try {
-    compiledContractCasm = JSON.parse(
-      fs
-        .readFileSync(findContractFile(contract, "compiled_contract_class"))
-        .toString("ascii")
-    );
-  } catch (error) {
-    if (error.message.includes("Could not find")) {
-      console.error(
-        red(`The contract "${contract}" doesn't exist or is not compiled`)
-      );
-    } else {
-      console.error(red("Error reading compiled contract class file: "), error);
-    }
-    return {
-      classHash: "",
-      address: "",
-    };
-  }
-
-  try {
-    compiledContractSierra = JSON.parse(
-      fs
-        .readFileSync(findContractFile(contract, "contract_class"))
-        .toString("ascii")
-    );
-  } catch (error) {
-    console.error(red("Error reading contract class file: "), error);
-    return {
-      classHash: "",
-      address: "",
-    };
-  }
-
-  const contractCalldata = new CallData(compiledContractSierra.abi);
-  const constructorCalldata = constructorArgs
-    ? contractCalldata.compile("constructor", constructorArgs)
-    : [];
-
-  console.log(yellow("Deploying Contract "), contractName || contract);
-
-  let { classHash } = await declareIfNot_NotWait(
-    {
-      contract: compiledContractSierra,
-      casm: compiledContractCasm,
-    },
-    options
-  );
-
-  let randomSalt = stark.randomAddress();
-
-  let { contractAddress } = await deployContract_NotWait({
-    salt: randomSalt,
-    classHash,
-    constructorCalldata,
-  });
-
-  console.log(green("Contract Deployed at "), contractAddress);
-
-  let finalContractName = contractName || contract;
-
-  deployments[finalContractName] = {
-    classHash: classHash,
-    address: contractAddress,
-    contract: contract,
-  };
-
-  return {
-    classHash: classHash,
-    address: contractAddress,
-  };
-};
-
-const executeDeployCalls = async (options?: UniversalDetails) => {
-  if (deployCalls.length < 1) {
-    throw new Error(
-      red(
-        "Aborted: No contract to deploy. Please prepare the contracts with `deployContract`"
-      )
-    );
-  }
-
-  try {
-    let { transaction_hash } = await deployer.execute(deployCalls, {
-      ...options,
-      version: constants.TRANSACTION_VERSION.V3,
-    });
-    if (networkName === "sepolia" || networkName === "mainnet") {
-      const receipt = await provider.waitForTransaction(transaction_hash);
-      const receiptAny = receipt as any;
-      if (receiptAny.execution_status !== "SUCCEEDED") {
-        const revertReason = receiptAny.revert_reason;
-        throw new Error(red(`Deploy Calls Failed: ${revertReason}`));
-      }
-    }
-    console.log(green("Deploy Calls Executed at "), transaction_hash);
-  } catch (error) {
-    // split the calls in half and try again recursively
-    if (deployCalls.length > 100) {
-      let half = Math.ceil(deployCalls.length / 2);
-      let firstHalf = deployCalls.slice(0, half);
-      let secondHalf = deployCalls.slice(half);
-      deployCalls = firstHalf;
-      await executeDeployCalls(options);
-      deployCalls = secondHalf;
-      await executeDeployCalls(options);
-    } else {
-      throw error;
-    }
-  }
-};
-
-const loadExistingDeployments = () => {
-  const networkPath = path.resolve(
-    __dirname,
-    `../deployments/${networkName}_latest.json`
-  );
-  if (fs.existsSync(networkPath)) {
-    return JSON.parse(fs.readFileSync(networkPath, "utf8"));
-  }
-  return {};
-};
-
-const exportDeployments = () => {
-  const networkPath = path.resolve(
-    __dirname,
-    `../deployments/${networkName}_latest.json`
-  );
-
-  if (!resetDeployments && fs.existsSync(networkPath)) {
-    const currentTimestamp = new Date().getTime();
-    fs.renameSync(
-      networkPath,
-      networkPath.replace("_latest.json", `_${currentTimestamp}.json`)
-    );
-  }
-
-  if (resetDeployments && fs.existsSync(networkPath)) {
-    fs.unlinkSync(networkPath);
-  }
-
-  fs.writeFileSync(networkPath, JSON.stringify(deployments, null, 2));
-};
-
-export {
-  deployContract,
-  provider,
-  deployer,
-  loadExistingDeployments,
-  exportDeployments,
-  executeDeployCalls,
-  resetDeployments,
-};
+import fs from "fs";
+import path from "path";
+import { networks } from "./helpers/networks";
+import yargs from "yargs";
+import {
+  CallData,
+  stark,
+  RawArgs,
+  transaction,
+  extractContractHashes,
+  DeclareContractPayload,
+  UniversalDetails,
+  constants,
+} from "starknet";
+import { DeployContractParams, Network } from "./types";
+import { green, red, yellow } from "./helpers/colorize-log";
+
+interface Arguments {
+  network: string;
+  reset: boolean;
+  [x: string]: unknown;
+  _: (string | number)[];
+  $0: string;
+}
+
+const argv = yargs(process.argv.slice(2))
+  .option("network", {
+    type: "string",
+    description: "Specify the network",
+    demandOption: true,
+  })
+  .option("reset", {
+    type: "boolean",
+    description: "Reset deployments (remove existing deployments)",
+    default: true,
+  })
+  .parseSync() as Arguments;
+
+const networkName: string = argv.network;
+const resetDeployments: boolean = argv.reset;
+
+let deployments = {};
+let deployCalls = [];
+
+const { provider, deployer }: Network = networks[networkName];
+
+const declareIfNot_NotWait = async (
+  payload: DeclareContractPayload,
+  options?: UniversalDetails
+) => {
+  const declareContractPayload = extractContractHashes(payload);
+  try {
+    await provider.getClassByHash(declareContractPayload.classHash);
+  } catch (error) {
+    try {
+      const { transaction_hash } = await deployer.declare(payload, {
+        ...options,
+        version: constants.TRANSACTION_VERSION.V3,
+      });
+      if (networkName === "sepolia" || networkName === "mainnet") {
+        console.log(
+          yellow("Waiting for declaration transaction to be accepted...")
+        );
+        const receipt = await provider.waitForTransaction(transaction_hash);
+        console.log(
+          yellow("Declaration transaction receipt:"),
+          JSON.stringify(
+            receipt,
+            (_, v) => (typeof v === "bigint" ? v.toString() : v),
+            2
+          )
+        );
+
+        const receiptAny = receipt as any;
+        if (receiptAny.execution_status !== "SUCCEEDED") {
+          const revertReason = receiptAny.revert_reason || "Unknown reason";
+          throw new Error(
+            red(`Declaration failed or reverted. Reason: ${revertReason}`)
+          );
+        }
+        console.log(green("Declaration successful"));
+      }
+    } catch (e) {
+      console.error(red("Error declaring contract:"), e);
+      throw e;
+    }
+  }
+  return {
+    classHash: declareContractPayload.classHash,
+  };
+};
+
+const deployContract_NotWait = async (payload: {
+  salt: string;
+  classHash: string;
+  constructorCalldata: RawArgs;
+}) => {
+  try {
+    const { calls, addresses } = transaction.buildUDCCall(
+      payload,
+      deployer.address
+    );
+    deployCalls.push(...calls);
+    return {
+      contractAddress: addresses[0],
+    };
+  } catch (error) {
+    console.error(red("Error building UDC call:"), error);
+    throw error;
+  }
+};
+
+const findContractFile = (
+  contract: string,
+  fileType: "compiled_contract_class" | "contract_class"
+): string => {
+  const targetDir = path.resolve(__dirname, "../contracts/target/dev");
+  const files = fs.readdirSync(targetDir);
+
+  const pattern = new RegExp(`.*${contract}\\.${fileType}\\.json$`);
+  const matchingFile = files.find((file) => pattern.test(file));
+
+  if (!matchingFile) {
+    throw new Error(
+      `Could not find ${fileType} file for contract "${contract}". ` +
+        `Try removing snfoundry/contracts/target, then run 'yarn compile' and check if your contract name is correct inside the contracts/target/dev directory.`
+    );
+  }
+
+  return path.join(targetDir, matchingFile);
+};
+
+/**
+ * Deploy a contract using the specified parameters.
+ *
+ * @param {DeployContractParams} params - The parameters for deploying the contract.
+ * @param {string} params.contract - The name of the contract to deploy.
+ * @param {string} [params.contractName] - The name to export the contract as (optional).
+ * @param {RawArgs} [params.constructorArgs] - The constructor arguments for the contract (optional).
+ * @param {UniversalDetails} [params.options] - Additional deployment options (optional).
+ *
+ * @returns {Promise<{ classHash: string; address: string }>} The deployed contract's class hash and address.
+ *
+ * @example
+ * ///Example usage of deployContract function
+ * await deployContract({
+ *   contract: "YourContract",
+ *   contractName: "YourContractExportName",
+ *   constructorArgs: { owner: deployer.address },
+ *   options: { maxFee: BigInt(1000000000000) }
+ * });
+ */
+
+const deployContract = async (
+  params: DeployContractParams
+): Promise<{
+  classHash: string;
+  address: string;
+}> => {
+  const { contract, constructorArgs, contractName, options } = params;
+
+  try {
+    await deployer.getContractVersion(deployer.address);
+  } catch (e) {
+    if (e.toString().includes("Contract not found")) {
+      const errorMessage = `The wallet you're using to deploy the contract is not deployed in the ${networkName} network.`;
+      console.error(red(errorMessage));
+      throw new Error(errorMessage);
+    } else {
+      console.error(red("Error getting contract version: "), e);
+      throw e;
+    }
+  }
+
+  let compiledContractCasm;
+  let compiledContractSierra;
+
+  try {
+    compiledContractCasm = JSON.parse(
+      fs
+        .readFileSync(findContractFile(contract, "compiled_contract_class"))
+        .toString("ascii")
+    );
+  } catch (error) {
+    if (error.message.includes("Could not find")) {
+      console.error(
+        red(`The contract "${contract}" doesn't exist or is not compiled`)
+      );
+    } else {
+      console.error(red("Error reading compiled contract class file: "), error);
+    }
+    return {
+      classHash: "",
+      address: "",
+    };
+  }
+
+  try {
+    compiledContractSierra = JSON.parse(
+      fs
+        .readFileSync(findContractFile(contract, "contract_class"))
+        .toString("ascii")
+    );
+  } catch (error) {
+    console.error(red("Error reading contract class file: "), error);
+    return {
+      classHash: "",
+      address: "",
+    };
+  }
+
+  const contractCalldata = new CallData(compiledContractSierra.abi);
+  const constructorCalldata = constructorArgs
+    ? contractCalldata.compile("constructor", constructorArgs)
+    : [];
+
+  console.log(yellow("Deploying Contract "), contractName || contract);
+
+  let { classHash } = await declareIfNot_NotWait(
+    {
+      contract: compiledContractSierra,
+      casm: compiledContractCasm,
+    },
+    options
+  );
+
+  let randomSalt = stark.randomAddress();
+
+  let { contractAddress } = await deployContract_NotWait({
+    salt: randomSalt,
+    classHash,
+    constructorCalldata,
+  });
+
+  console.log(green("Contract Deployed at "), contractAddress);
+
+  let finalContractName = contractName || contract;
+
+  deployments[finalContractName] = {
+    classHash: classHash,
+    address: contractAddress,
+    contract: contract,
+  };
+
+  return {
+    classHash: classHash,
+    address: contractAddress,
+  };
+};
+
+const executeDeployCalls = async (options?: UniversalDetails) => {
+  if (deployCalls.length < 1) {
+    throw new Error(
+      red(
+        "Aborted: No contract to deploy. Please prepare the contracts with `deployContract`"
+      )
+    );
+  }
+
+  try {
+    let { transaction_hash } = await deployer.execute(deployCalls, {
+      ...options,
+      version: constants.TRANSACTION_VERSION.V3,
+    });
+    if (networkName === "sepolia" || networkName === "mainnet") {
+      const receipt = await provider.waitForTransaction(transaction_hash);
+      const receiptAny = receipt as any;
+      if (receiptAny.execution_status !== "SUCCEEDED") {
+        const revertReason = receiptAny.revert_reason;
+        throw new Error(red(`Deploy Calls Failed: ${revertReason}`));
+      }
+    }
+    console.log(green("Deploy Calls Executed at "), transaction_hash);
+  } catch (error) {
+    // split the calls in half and try again recursively
+    if (deployCalls.length > 100) {
+      let half = Math.ceil(deployCalls.length / 2);
+      let firstHalf = deployCalls.slice(0, half);
+      let secondHalf = deployCalls.slice(half);
+      deployCalls = firstHalf;
+      await executeDeployCalls(options);
+      deployCalls = secondHalf;
+      await executeDeployCalls(options);
+    } else {
+      throw error;
+    }
+  }
+};
+
+const loadExistingDeployments = () => {
+  const networkPath = path.resolve(
+    __dirname,
+    `../deployments/${networkName}_latest.json`
+  );
+  if (fs.existsSync(networkPath)) {
+    return JSON.parse(fs.readFileSync(networkPath, "utf8"));
+  }
+  return {};
+};
+
+const exportDeployments = () => {
+  const networkPath = path.resolve(
+    __dirname,
+    `../deployments/${networkName}_latest.json`
+  );
+
+  if (!resetDeployments && fs.existsSync(networkPath)) {
+    const currentTimestamp = new Date().getTime();
+    fs.renameSync(
+      networkPath,
+      networkPath.replace("_latest.json", `_${currentTimestamp}.json`)
+    );
+  }
+
+  if (resetDeployments && fs.existsSync(networkPath)) {
+    fs.unlinkSync(networkPath);
+  }
+
+  fs.writeFileSync(networkPath, JSON.stringify(deployments, null, 2));
+};
+
+export {
+  deployContract,
+  provider,
+  deployer,
+  loadExistingDeployments,
+  exportDeployments,
+  executeDeployCalls,
+  resetDeployments,
+};
diff --git a/packages/snfoundry/scripts-ts/deploy.ts b/packages/snfoundry/scripts-ts/deploy.ts
index 67596480..b180c055 100644
--- a/packages/snfoundry/scripts-ts/deploy.ts
+++ b/packages/snfoundry/scripts-ts/deploy.ts
@@ -104,7 +104,7 @@ const deployScript = async (): Promise<void> => {
     constructorArgs: {
       owner: deployer.address,
       strkPlayContractAddress: starkPlayERC20Address,
-      strkPlayVaultContractAddress: starkPlayVaultAddress
+      strkPlayVaultContractAddress: starkPlayVaultAddress,
     },
   });
   const lotteryAddress = lotteryDeploymentResult.address;
@@ -133,11 +133,14 @@ const deployScript = async (): Promise<void> => {
   console.log("Assigning roles to StarkPlayVault...");
   try {
     const { Contract } = await import("starknet");
-    
+
     // Load StarkPlayERC20 contract ABI to interact with it
     const starkPlayTokenCompiledContract = JSON.parse(
       fs.readFileSync(
-        path.join(__dirname, "../contracts/target/dev/contracts_StarkPlayERC20.contract_class.json"),
+        path.join(
+          __dirname,
+          "../contracts/target/dev/contracts_StarkPlayERC20.contract_class.json"
+        ),
         "utf8"
       )
     );
@@ -151,18 +154,24 @@ const deployScript = async (): Promise<void> => {
     // Owner (deployer) assigns MINTER_ROLE to the vault
     console.log("Granting MINTER_ROLE to vault...");
     await starkPlayTokenContract.grant_minter_role(starkPlayVaultAddress);
-    
+
     // Set minter allowance for the vault
     const mint_allowance = 1_000_000_000n * 1000000000000000000n; // 1B tokens with 18 decimals
-    await starkPlayTokenContract.set_minter_allowance(starkPlayVaultAddress, mint_allowance);
-    
+    await starkPlayTokenContract.set_minter_allowance(
+      starkPlayVaultAddress,
+      mint_allowance
+    );
+
     // Owner (deployer) assigns BURNER_ROLE to the vault
     console.log("Granting BURNER_ROLE to vault...");
     await starkPlayTokenContract.grant_burner_role(starkPlayVaultAddress);
-    
-    // Set burner allowance for the vault  
+
+    // Set burner allowance for the vault
     const burn_allowance = 1_000_000_000n * 1000000000000000000n; // 1B tokens with 18 decimals
-    await starkPlayTokenContract.set_burner_allowance(starkPlayVaultAddress, burn_allowance);
+    await starkPlayTokenContract.set_burner_allowance(
+      starkPlayVaultAddress,
+      burn_allowance
+    );
 
     console.log("StarkPlayVault roles assigned successfully by owner");
   } catch (error) {
diff --git a/packages/snfoundry/scripts-ts/helpers/colorize-log.ts b/packages/snfoundry/scripts-ts/helpers/colorize-log.ts
index 6dda5d9b..1e37792c 100644
--- a/packages/snfoundry/scripts-ts/helpers/colorize-log.ts
+++ b/packages/snfoundry/scripts-ts/helpers/colorize-log.ts
@@ -1,16 +1,16 @@
-const colors = {
-  reset: "\x1b[0m",
-  red: "\x1b[31m",
-  green: "\x1b[32m",
-  yellow: "\x1b[33m",
-};
-
-const colorize = (color: string, message: string): string => {
-  return `${color}${message}${colors.reset}`;
-};
-
-export const red = (message: string): string => colorize(colors.red, message);
-export const green = (message: string): string =>
-  colorize(colors.green, message);
-export const yellow = (message: string): string =>
-  colorize(colors.yellow, message);
+const colors = {
+  reset: "\x1b[0m",
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+};
+
+const colorize = (color: string, message: string): string => {
+  return `${color}${message}${colors.reset}`;
+};
+
+export const red = (message: string): string => colorize(colors.red, message);
+export const green = (message: string): string =>
+  colorize(colors.green, message);
+export const yellow = (message: string): string =>
+  colorize(colors.yellow, message);
diff --git a/packages/snfoundry/scripts-ts/helpers/deploy-wrapper.ts b/packages/snfoundry/scripts-ts/helpers/deploy-wrapper.ts
index ced16ec4..8843ab86 100644
--- a/packages/snfoundry/scripts-ts/helpers/deploy-wrapper.ts
+++ b/packages/snfoundry/scripts-ts/helpers/deploy-wrapper.ts
@@ -1,62 +1,62 @@
-#!/usr/bin/env node
-import yargs from "yargs";
-import { execSync } from "child_process";
-
-interface CommandLineOptions {
-  _: string[]; // Non-hyphenated arguments are usually under the `_` key
-  $0: string; // The script name or path is under the `$0` key
-  network?: string; // The --network option
-  reset?: boolean;
-}
-
-function main() {
-  const argv = yargs(process.argv.slice(2))
-    .option("network", {
-      type: "string",
-      choices: ["devnet", "sepolia", "mainnet"],
-      default: "devnet",
-      description: "Specify the network to deploy to",
-    })
-    .option("reset", {
-      type: "boolean",
-      description:
-        "Reset deployments (overwrites the latest file only, previous generated files will remain)",
-      default: true,
-      hidden: true,
-    })
-    .option("no-reset", {
-      type: "boolean",
-      description: "Do not reset deployments (keep existing deployments)",
-      default: false,
-    })
-    .demandOption(["network"])
-    .strict() // This will make yargs throw an error for unknown options
-    .help()
-    .parseSync() as CommandLineOptions;
-
-  if (argv._.length > 0) {
-    console.error(
-      `❌ Invalid arguments, only --network or --no-reset can be passed in`
-    );
-    return;
-  }
-
-  const resetFlag = argv.reset === false ? "--no-reset" : "";
-
-  try {
-    const command =
-      `cd contracts && scarb build && ts-node ../scripts-ts/deploy.ts` +
-      ` --network ${argv.network || "devnet"}` +
-      `${resetFlag ? " " + resetFlag : ""}` +
-      ` && ts-node ../scripts-ts/helpers/parse-deployments.ts && cd ..`;
-
-    execSync(command, { stdio: "inherit" });
-  } catch (error) {
-    console.error("Error during deployment:", error);
-    process.exit(1);
-  }
-}
-
-if (require.main === module) {
-  main();
-}
+#!/usr/bin/env node
+import yargs from "yargs";
+import { execSync } from "child_process";
+
+interface CommandLineOptions {
+  _: string[]; // Non-hyphenated arguments are usually under the `_` key
+  $0: string; // The script name or path is under the `$0` key
+  network?: string; // The --network option
+  reset?: boolean;
+}
+
+function main() {
+  const argv = yargs(process.argv.slice(2))
+    .option("network", {
+      type: "string",
+      choices: ["devnet", "sepolia", "mainnet"],
+      default: "devnet",
+      description: "Specify the network to deploy to",
+    })
+    .option("reset", {
+      type: "boolean",
+      description:
+        "Reset deployments (overwrites the latest file only, previous generated files will remain)",
+      default: true,
+      hidden: true,
+    })
+    .option("no-reset", {
+      type: "boolean",
+      description: "Do not reset deployments (keep existing deployments)",
+      default: false,
+    })
+    .demandOption(["network"])
+    .strict() // This will make yargs throw an error for unknown options
+    .help()
+    .parseSync() as CommandLineOptions;
+
+  if (argv._.length > 0) {
+    console.error(
+      `❌ Invalid arguments, only --network or --no-reset can be passed in`
+    );
+    return;
+  }
+
+  const resetFlag = argv.reset === false ? "--no-reset" : "";
+
+  try {
+    const command =
+      `cd contracts && scarb build && ts-node ../scripts-ts/deploy.ts` +
+      ` --network ${argv.network || "devnet"}` +
+      `${resetFlag ? " " + resetFlag : ""}` +
+      ` && ts-node ../scripts-ts/helpers/parse-deployments.ts && cd ..`;
+
+    execSync(command, { stdio: "inherit" });
+  } catch (error) {
+    console.error("Error during deployment:", error);
+    process.exit(1);
+  }
+}
+
+if (require.main === module) {
+  main();
+}
diff --git a/packages/snfoundry/scripts-ts/helpers/networks.ts b/packages/snfoundry/scripts-ts/helpers/networks.ts
index 4398b4b5..d08b0783 100644
--- a/packages/snfoundry/scripts-ts/helpers/networks.ts
+++ b/packages/snfoundry/scripts-ts/helpers/networks.ts
@@ -1,87 +1,87 @@
-import { RpcProvider, Account, constants } from "starknet";
-import path from "path";
-import dotenv from "dotenv";
-import { Networks } from "../types";
-
-dotenv.config({ path: path.resolve(__dirname, "../../.env") });
-
-// devnet
-const PRIVATE_KEY_DEVNET =
-  process.env.PRIVATE_KEY_DEVNET || "0x71d7bb07b9a64f6f78ac4c816aff4da9";
-const RPC_URL_DEVNET = process.env.RPC_URL_DEVNET || "http://127.0.0.1:5050";
-const ACCOUNT_ADDRESS_DEVNET =
-  process.env.ACCOUNT_ADDRESS_DEVNET ||
-  "0x64b48806902a367c8598f4f95c305e8c1a1acba5f082d294a43793113115691";
-
-const providerDevnet =
-  RPC_URL_DEVNET && new RpcProvider({ nodeUrl: RPC_URL_DEVNET });
-const deployerDevnet =
-  ACCOUNT_ADDRESS_DEVNET &&
-  PRIVATE_KEY_DEVNET &&
-  new Account(
-    providerDevnet,
-    ACCOUNT_ADDRESS_DEVNET,
-    PRIVATE_KEY_DEVNET,
-    "1",
-    constants.TRANSACTION_VERSION.V3
-  );
-
-const STRK_TOKEN_ADDRESS_DEVNET =
-  "0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d";
-
-// sepolia
-const providerSepolia =
-  process.env.RPC_URL_SEPOLIA &&
-  new RpcProvider({ nodeUrl: process.env.RPC_URL_SEPOLIA });
-const deployerSepolia =
-  process.env.ACCOUNT_ADDRESS_SEPOLIA &&
-  process.env.PRIVATE_KEY_SEPOLIA &&
-  new Account(
-    providerSepolia,
-    process.env.ACCOUNT_ADDRESS_SEPOLIA,
-    process.env.PRIVATE_KEY_SEPOLIA,
-    "1",
-    constants.TRANSACTION_VERSION.V3
-  );
-
-const STRK_TOKEN_ADDRESS =
-  "0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d";
-
-// mainnet
-const providerMainnet =
-  process.env.RPC_URL_MAINNET &&
-  new RpcProvider({ nodeUrl: process.env.RPC_URL_MAINNET });
-const deployerMainnet =
-  process.env.ACCOUNT_ADDRESS_MAINNET &&
-  process.env.PRIVATE_KEY_MAINNET &&
-  new Account(
-    providerMainnet,
-    process.env.ACCOUNT_ADDRESS_MAINNET,
-    process.env.PRIVATE_KEY_MAINNET,
-    "1",
-    constants.TRANSACTION_VERSION.V3
-  );
-
-const feeTokenOptions = {
-  devnet: [{ name: "strk", address: STRK_TOKEN_ADDRESS_DEVNET }],
-  mainnet: [{ name: "strk", address: STRK_TOKEN_ADDRESS }],
-  sepolia: [{ name: "strk", address: STRK_TOKEN_ADDRESS }],
-};
-
-export const networks: Networks = {
-  devnet: {
-    provider: providerDevnet,
-    deployer: deployerDevnet,
-    feeToken: feeTokenOptions.devnet,
-  },
-  sepolia: {
-    provider: providerSepolia,
-    deployer: deployerSepolia,
-    feeToken: feeTokenOptions.sepolia,
-  },
-  mainnet: {
-    provider: providerMainnet,
-    deployer: deployerMainnet,
-    feeToken: feeTokenOptions.mainnet,
-  },
-};
+import { RpcProvider, Account, constants } from "starknet";
+import path from "path";
+import dotenv from "dotenv";
+import { Networks } from "../types";
+
+dotenv.config({ path: path.resolve(__dirname, "../../.env") });
+
+// devnet
+const PRIVATE_KEY_DEVNET =
+  process.env.PRIVATE_KEY_DEVNET || "0x71d7bb07b9a64f6f78ac4c816aff4da9";
+const RPC_URL_DEVNET = process.env.RPC_URL_DEVNET || "http://127.0.0.1:5050";
+const ACCOUNT_ADDRESS_DEVNET =
+  process.env.ACCOUNT_ADDRESS_DEVNET ||
+  "0x64b48806902a367c8598f4f95c305e8c1a1acba5f082d294a43793113115691";
+
+const providerDevnet =
+  RPC_URL_DEVNET && new RpcProvider({ nodeUrl: RPC_URL_DEVNET });
+const deployerDevnet =
+  ACCOUNT_ADDRESS_DEVNET &&
+  PRIVATE_KEY_DEVNET &&
+  new Account(
+    providerDevnet,
+    ACCOUNT_ADDRESS_DEVNET,
+    PRIVATE_KEY_DEVNET,
+    "1",
+    constants.TRANSACTION_VERSION.V3
+  );
+
+const STRK_TOKEN_ADDRESS_DEVNET =
+  "0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d";
+
+// sepolia
+const providerSepolia =
+  process.env.RPC_URL_SEPOLIA &&
+  new RpcProvider({ nodeUrl: process.env.RPC_URL_SEPOLIA });
+const deployerSepolia =
+  process.env.ACCOUNT_ADDRESS_SEPOLIA &&
+  process.env.PRIVATE_KEY_SEPOLIA &&
+  new Account(
+    providerSepolia,
+    process.env.ACCOUNT_ADDRESS_SEPOLIA,
+    process.env.PRIVATE_KEY_SEPOLIA,
+    "1",
+    constants.TRANSACTION_VERSION.V3
+  );
+
+const STRK_TOKEN_ADDRESS =
+  "0x04718f5a0fc34cc1af16a1cdee98ffb20c31f5cd61d6ab07201858f4287c938d";
+
+// mainnet
+const providerMainnet =
+  process.env.RPC_URL_MAINNET &&
+  new RpcProvider({ nodeUrl: process.env.RPC_URL_MAINNET });
+const deployerMainnet =
+  process.env.ACCOUNT_ADDRESS_MAINNET &&
+  process.env.PRIVATE_KEY_MAINNET &&
+  new Account(
+    providerMainnet,
+    process.env.ACCOUNT_ADDRESS_MAINNET,
+    process.env.PRIVATE_KEY_MAINNET,
+    "1",
+    constants.TRANSACTION_VERSION.V3
+  );
+
+const feeTokenOptions = {
+  devnet: [{ name: "strk", address: STRK_TOKEN_ADDRESS_DEVNET }],
+  mainnet: [{ name: "strk", address: STRK_TOKEN_ADDRESS }],
+  sepolia: [{ name: "strk", address: STRK_TOKEN_ADDRESS }],
+};
+
+export const networks: Networks = {
+  devnet: {
+    provider: providerDevnet,
+    deployer: deployerDevnet,
+    feeToken: feeTokenOptions.devnet,
+  },
+  sepolia: {
+    provider: providerSepolia,
+    deployer: deployerSepolia,
+    feeToken: feeTokenOptions.sepolia,
+  },
+  mainnet: {
+    provider: providerMainnet,
+    deployer: deployerMainnet,
+    feeToken: feeTokenOptions.mainnet,
+  },
+};
diff --git a/packages/snfoundry/scripts-ts/helpers/parse-deployments.ts b/packages/snfoundry/scripts-ts/helpers/parse-deployments.ts
index 70440f4b..aa2490c5 100644
--- a/packages/snfoundry/scripts-ts/helpers/parse-deployments.ts
+++ b/packages/snfoundry/scripts-ts/helpers/parse-deployments.ts
@@ -1,93 +1,93 @@
-import fs from "fs";
-import path from "path";
-import prettier from "prettier";
-import { Abi, CompiledSierra } from "starknet";
-
-const TARGET_DIR = path.join(__dirname, "../../../nextjs/contracts");
-const deploymentsDir = path.join(__dirname, "../../deployments");
-const files = fs.readdirSync(deploymentsDir);
-
-const generatedContractComment = `/**
- * This file is autogenerated by Scaffold-Stark.
- * You should not edit it manually or your changes might be overwritten.
- */`;
-
-const getContractDataFromDeployments = (): Record<
-  string,
-  Record<string, { address: string; abi: Abi; classHash: string }>
-> => {
-  const allContractsData: Record<
-    string,
-    Record<string, { address: string; abi: Abi; classHash: string }>
-  > = {};
-
-  files.forEach((file) => {
-    if (path.extname(file) === ".json" && file.endsWith("_latest.json")) {
-      const filePath = path.join(deploymentsDir, file);
-      const content: Record<
-        string,
-        {
-          contract: string;
-          address: string;
-          classHash: string;
-        }
-      > = JSON.parse(fs.readFileSync(filePath, "utf8"));
-      const chainId = path.basename(file, "_latest.json");
-
-      Object.entries(content).forEach(([contractName, contractData]) => {
-        try {
-          const abiFilePath = path.join(
-            __dirname,
-            `../../contracts/target/dev/contracts_${contractData.contract}.contract_class.json`
-          );
-          const abiContent: CompiledSierra = JSON.parse(
-            fs.readFileSync(abiFilePath, "utf8")
-          );
-
-          allContractsData[chainId] = {
-            ...allContractsData[chainId],
-            [contractName]: {
-              address: contractData.address,
-              abi: abiContent.abi.filter((item) => item.type !== "l1_handler"),
-              classHash: contractData.classHash,
-            },
-          };
-        } catch (e) {}
-      });
-    }
-  });
-
-  return allContractsData;
-};
-
-const generateTsAbis = () => {
-  const allContractsData = getContractDataFromDeployments();
-
-  const fileContent = Object.entries(allContractsData).reduce(
-    (content, [chainId, chainConfig]) => {
-      // Use chainId directly as it is already a hex string
-      return `${content}${chainId}:${JSON.stringify(chainConfig, null, 2)},`;
-    },
-    ""
-  );
-
-  if (!fs.existsSync(TARGET_DIR)) {
-    fs.mkdirSync(TARGET_DIR);
-  }
-
-  fs.writeFileSync(
-    path.join(TARGET_DIR, "deployedContracts.ts"),
-    prettier.format(
-      `${generatedContractComment}\n\nconst deployedContracts = {${fileContent}} as const;\n\nexport default deployedContracts;`,
-      {
-        parser: "typescript",
-      }
-    )
-  );
-
-  console.log(
-    `📝 Updated TypeScript contract definition file on ${TARGET_DIR}/deployedContracts.ts`
-  );
-};
-
-generateTsAbis();
+import fs from "fs";
+import path from "path";
+import prettier from "prettier";
+import { Abi, CompiledSierra } from "starknet";
+
+const TARGET_DIR = path.join(__dirname, "../../../nextjs/contracts");
+const deploymentsDir = path.join(__dirname, "../../deployments");
+const files = fs.readdirSync(deploymentsDir);
+
+const generatedContractComment = `/**
+ * This file is autogenerated by Scaffold-Stark.
+ * You should not edit it manually or your changes might be overwritten.
+ */`;
+
+const getContractDataFromDeployments = (): Record<
+  string,
+  Record<string, { address: string; abi: Abi; classHash: string }>
+> => {
+  const allContractsData: Record<
+    string,
+    Record<string, { address: string; abi: Abi; classHash: string }>
+  > = {};
+
+  files.forEach((file) => {
+    if (path.extname(file) === ".json" && file.endsWith("_latest.json")) {
+      const filePath = path.join(deploymentsDir, file);
+      const content: Record<
+        string,
+        {
+          contract: string;
+          address: string;
+          classHash: string;
+        }
+      > = JSON.parse(fs.readFileSync(filePath, "utf8"));
+      const chainId = path.basename(file, "_latest.json");
+
+      Object.entries(content).forEach(([contractName, contractData]) => {
+        try {
+          const abiFilePath = path.join(
+            __dirname,
+            `../../contracts/target/dev/contracts_${contractData.contract}.contract_class.json`
+          );
+          const abiContent: CompiledSierra = JSON.parse(
+            fs.readFileSync(abiFilePath, "utf8")
+          );
+
+          allContractsData[chainId] = {
+            ...allContractsData[chainId],
+            [contractName]: {
+              address: contractData.address,
+              abi: abiContent.abi.filter((item) => item.type !== "l1_handler"),
+              classHash: contractData.classHash,
+            },
+          };
+        } catch (e) {}
+      });
+    }
+  });
+
+  return allContractsData;
+};
+
+const generateTsAbis = () => {
+  const allContractsData = getContractDataFromDeployments();
+
+  const fileContent = Object.entries(allContractsData).reduce(
+    (content, [chainId, chainConfig]) => {
+      // Use chainId directly as it is already a hex string
+      return `${content}${chainId}:${JSON.stringify(chainConfig, null, 2)},`;
+    },
+    ""
+  );
+
+  if (!fs.existsSync(TARGET_DIR)) {
+    fs.mkdirSync(TARGET_DIR);
+  }
+
+  fs.writeFileSync(
+    path.join(TARGET_DIR, "deployedContracts.ts"),
+    prettier.format(
+      `${generatedContractComment}\n\nconst deployedContracts = {${fileContent}} as const;\n\nexport default deployedContracts;`,
+      {
+        parser: "typescript",
+      }
+    )
+  );
+
+  console.log(
+    `📝 Updated TypeScript contract definition file on ${TARGET_DIR}/deployedContracts.ts`
+  );
+};
+
+generateTsAbis();
diff --git a/packages/snfoundry/scripts-ts/types.ts b/packages/snfoundry/scripts-ts/types.ts
index 6272650c..0c98ef6a 100644
--- a/packages/snfoundry/scripts-ts/types.ts
+++ b/packages/snfoundry/scripts-ts/types.ts
@@ -1,16 +1,16 @@
-import { Account, RawArgs, RpcProvider, UniversalDetails } from "starknet";
-
-export type Networks = Record<"devnet" | "sepolia" | "mainnet", Network>;
-
-export type Network = {
-  provider: RpcProvider;
-  deployer: Account;
-  feeToken: { name: string; address: string }[];
-};
-
-export type DeployContractParams = {
-  contract: string;
-  contractName?: string;
-  constructorArgs?: RawArgs;
-  options?: UniversalDetails;
-};
+import { Account, RawArgs, RpcProvider, UniversalDetails } from "starknet";
+
+export type Networks = Record<"devnet" | "sepolia" | "mainnet", Network>;
+
+export type Network = {
+  provider: RpcProvider;
+  deployer: Account;
+  feeToken: { name: string; address: string }[];
+};
+
+export type DeployContractParams = {
+  contract: string;
+  contractName?: string;
+  constructorArgs?: RawArgs;
+  options?: UniversalDetails;
+};
diff --git a/packages/snfoundry/scripts-ts/verify-contracts.ts b/packages/snfoundry/scripts-ts/verify-contracts.ts
index 5118f3c7..734743c9 100644
--- a/packages/snfoundry/scripts-ts/verify-contracts.ts
+++ b/packages/snfoundry/scripts-ts/verify-contracts.ts
@@ -1,68 +1,68 @@
-import path from "path";
-import { execSync } from "child_process";
-import yargs from "yargs";
-import { green, red, yellow } from "./helpers/colorize-log";
-import deployedContracts from "../../nextjs/contracts/deployedContracts";
-
-function main() {
-  // Parse command line arguments
-  const argv = yargs(process.argv.slice(2))
-    .option("network", {
-      type: "string",
-      description: "Specify the network mainnet or sepolia",
-      demandOption: true,
-    })
-    .parseSync();
-
-  const network = argv.network;
-
-  if (network !== "sepolia" && network !== "mainnet") {
-    console.error(
-      `Unsupported network: ${network}. Please use 'sepolia' or 'mainnet'.`
-    );
-    process.exit(1);
-  }
-
-  const contractsToVerify = deployedContracts[network];
-
-  if (!contractsToVerify) {
-    console.error(`No deployed contracts found for network: ${network}`);
-    process.exit(1);
-  }
-
-  // Change to the contracts directory
-  const contractsDir = path.resolve(__dirname, "../contracts");
-  process.chdir(contractsDir);
-
-  // Verify each contract
-  Object.entries(contractsToVerify).forEach(
-    ([contractName, contractInfo]: [string, any]) => {
-      const { address, abi } = contractInfo;
-      const interfaceNameItem = abi.find(
-        (item) => item.type === "impl" && item.interface_name
-      );
-      if (!interfaceNameItem) {
-        console.error(red(`Failed to find Contract for ${contractName}`));
-        return;
-      }
-      const contractParts = interfaceNameItem.interface_name.split("::");
-      const contract = contractParts[contractParts.length - 2];
-
-      console.log(yellow(`Verifying ${contractName} on ${network}...`));
-      try {
-        execSync(
-          `sncast verify --contract-address ${address} --contract-name ${contract} --network ${network} --verifier walnut --confirm-verification`,
-          { stdio: "inherit" }
-        );
-        console.log(green("Successfully verified"), contractName);
-      } catch (error) {
-        console.error(red(`Failed to verify ${contractName}:`), error);
-      }
-    }
-  );
-  console.log(green("✅ Verification process completed."));
-}
-
-if (typeof module !== "undefined" && require.main === module) {
-  main();
-}
+import path from "path";
+import { execSync } from "child_process";
+import yargs from "yargs";
+import { green, red, yellow } from "./helpers/colorize-log";
+import deployedContracts from "../../nextjs/contracts/deployedContracts";
+
+function main() {
+  // Parse command line arguments
+  const argv = yargs(process.argv.slice(2))
+    .option("network", {
+      type: "string",
+      description: "Specify the network mainnet or sepolia",
+      demandOption: true,
+    })
+    .parseSync();
+
+  const network = argv.network;
+
+  if (network !== "sepolia" && network !== "mainnet") {
+    console.error(
+      `Unsupported network: ${network}. Please use 'sepolia' or 'mainnet'.`
+    );
+    process.exit(1);
+  }
+
+  const contractsToVerify = deployedContracts[network];
+
+  if (!contractsToVerify) {
+    console.error(`No deployed contracts found for network: ${network}`);
+    process.exit(1);
+  }
+
+  // Change to the contracts directory
+  const contractsDir = path.resolve(__dirname, "../contracts");
+  process.chdir(contractsDir);
+
+  // Verify each contract
+  Object.entries(contractsToVerify).forEach(
+    ([contractName, contractInfo]: [string, any]) => {
+      const { address, abi } = contractInfo;
+      const interfaceNameItem = abi.find(
+        (item) => item.type === "impl" && item.interface_name
+      );
+      if (!interfaceNameItem) {
+        console.error(red(`Failed to find Contract for ${contractName}`));
+        return;
+      }
+      const contractParts = interfaceNameItem.interface_name.split("::");
+      const contract = contractParts[contractParts.length - 2];
+
+      console.log(yellow(`Verifying ${contractName} on ${network}...`));
+      try {
+        execSync(
+          `sncast verify --contract-address ${address} --contract-name ${contract} --network ${network} --verifier walnut --confirm-verification`,
+          { stdio: "inherit" }
+        );
+        console.log(green("Successfully verified"), contractName);
+      } catch (error) {
+        console.error(red(`Failed to verify ${contractName}:`), error);
+      }
+    }
+  );
+  console.log(green("✅ Verification process completed."));
+}
+
+if (typeof module !== "undefined" && require.main === module) {
+  main();
+}