feat: enhance HackathonPage with published modal and session storage

- Added a modal to display published hackathon details upon successful publication.
- Implemented session storage to retain published hackathon data for user experience.
- Refactored state management to handle modal visibility and data retrieval.
- Improved loading and error handling in the HackathonPage component.

Author: 0xdevcollins

app/(landing)/organizations/[id]/hackathons/[hackathonId]/page.tsx

@@ -9,20 +9,29 @@ import {
   Check,
 } from 'lucide-react';
 import { useHackathons } from '@/hooks/use-hackathons';
-import { useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import { useHackathonAnalytics } from '@/hooks/use-hackathon-analytics';
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
 import { HackathonStatistics } from '@/components/organization/hackathons/details/HackathonStatistics';
 import { HackathonCharts } from '@/components/organization/hackathons/details/HackathonCharts';
 import { HackathonTimeline } from '@/components/organization/hackathons/details/HackathonTimeline';
 import { AuthGuard } from '@/components/auth';
 import Loading from '@/components/Loading';
+import HackathonPublishedModal from '@/components/organization/hackathons/new/tabs/components/review/HackathonPublishedModal';
+import type { PublishResponseData } from '@/hooks/use-hackathon-publish';
+
+const STORAGE_KEY = 'boundless_hackathon_published';
 
 export default function HackathonPage() {
   const params = useParams();
   const organizationId = params.id as string;
   const hackathonId = params.hackathonId as string;
 
+  const [publishedModalData, setPublishedModalData] = useState<{
+    publishResponse: PublishResponseData;
+    organizationId: string;
+  } | null>(null);
+
   const { currentHackathon, currentLoading, currentError, fetchHackathon } =
     useHackathons({
       organizationId,
@@ -41,6 +50,37 @@ export default function HackathonPage() {
     }
   }, [organizationId, hackathonId, fetchHackathon]);
 
+  useEffect(() => {
+    try {
+      const raw = sessionStorage.getItem(STORAGE_KEY);
+      if (!raw) return;
+      const payload = JSON.parse(raw) as {
+        organizationId: string;
+        id: string;
+        slug: string;
+        publishedAt: string;
+        message: string;
+        escrowAddress: string;
+        transactionHash: string | null;
+      };
+      if (payload.id !== hackathonId) return;
+      sessionStorage.removeItem(STORAGE_KEY);
+      setPublishedModalData({
+        publishResponse: {
+          id: payload.id,
+          slug: payload.slug,
+          publishedAt: payload.publishedAt,
+          message: payload.message,
+          escrowAddress: payload.escrowAddress,
+          transactionHash: payload.transactionHash,
+        },
+        organizationId: payload.organizationId,
+      });
+    } catch {
+      // ignore
+    }
+  }, [hackathonId]);
+
   if (currentLoading) {
     return (
       <div className='flex min-h-screen items-center justify-center bg-black'>
@@ -95,6 +135,15 @@ export default function HackathonPage() {
   return (
     <AuthGuard redirectTo='/auth?mode=signin' fallback={<Loading />}>
       <div className='min-h-screen bg-black'>
+        <HackathonPublishedModal
+          open={!!publishedModalData}
+          onOpenChange={open => {
+            if (!open) setPublishedModalData(null);
+          }}
+          publishResponse={publishedModalData?.publishResponse ?? null}
+          organizationId={publishedModalData?.organizationId}
+        />
+
         {/* Hero Section with Hackathon Name */}
         <div className='border-b border-gray-900 p-4'>
           <div className='mx-auto max-w-7xl'>

app/(landing)/projects/[slug]/page.tsx

@@ -79,23 +79,18 @@ function ProjectContent({
         setLoading(true);
         setError(null);
 
-        // If query param specifies submission, try that first/only
         if (isSubmission) {
           await fetchSubmission(id);
           return;
         }
 
-        // Try fetching as crowdfunding project first
         try {
           const projectData = await getCrowdfundingProject(id);
           if (projectData) {
             setProject(projectData);
             return;
           }
         } catch (e) {
-          // Ignore error and try fetching as submission
-          console.log('Not a crowdfunding project, checking submission...', e);
-          // Fallback to submission check
           await fetchSubmission(id);
         }
       } catch {

app/me/crowdfunding/[slug]/milestones/[milestoneIndex]/page.tsx

@@ -258,7 +258,6 @@ export default function MilestoneDetailPage({ params }: PageProps) {
       </div>
     );
   }
-  console.log(milestone.orderIndex);
   return (
     <div className='px-6 py-8'>
       <MilestoneDetailHeader

components/auth/login-form.tsx

@@ -36,7 +36,6 @@ export function LoginForm({ onSuccess, onError }: LoginFormProps) {
   const onSubmit = async (data: LoginFormData) => {
     try {
       setIsLoading(true);
-      // console.log('Attempting login for:', data.email);
 
       const { error } = await authClient.signIn.email(
         {
@@ -46,7 +45,6 @@ export function LoginForm({ onSuccess, onError }: LoginFormProps) {
         },
         {
           onSuccess: () => {
-            // console.log('Login successful');
             toast.success('Login successful!');
             onSuccess?.();
           },

components/hackathons/HackathonsPage.tsx

@@ -38,8 +38,6 @@ const HackathonsPage: React.FC<HackathonsPageProps> = ({ className } = {}) => {
     totalCount,
     loadMore,
   } = useHackathonsList({ initialFilters: filters });
-  // const { transformHackathonForCard } = useHackathonTransform();
-  console.log(hackathons);
   const hackathonCards = React.useMemo(() => {
     return hackathons.map(hackathon => {
       return (

components/hackathons/participants/profileCard.tsx

@@ -117,11 +117,6 @@ export function ProfileCard({ participant, onInviteClick }: ProfileCardProps) {
   // Check if current user can invite this participant
   const canInvite = useMemo(() => {
     if (!user || !currentUserParticipant || !currentHackathon) {
-      console.log('[DEBUG] canInvite: missing prerequisites', {
-        user: !!user,
-        currentUserParticipant: !!currentUserParticipant,
-        currentHackathon: !!currentHackathon,
-      });
       return false;
     }
 
@@ -151,15 +146,6 @@ export function ProfileCard({ participant, onInviteClick }: ProfileCardProps) {
 
     const isLeader = isEnrichedLeader || isDirectLeader;
 
-    console.log('[DEBUG] ProfileCard canInvite check:', {
-      target: participant.username,
-      isLeader,
-      isEnrichedLeader,
-      isDirectLeader,
-      currentUserRole: currentUserParticipant.role,
-      currentUserId,
-    });
-
     return isLeader;
   }, [user, currentUserParticipant, participant, currentHackathon, teams]);
 

components/hackathons/submissions/submissionTab.tsx

@@ -81,7 +81,6 @@ const SubmissionTabContent: React.FC<SubmissionTabContentProps> = ({
     setSelectedSort,
     setSelectedCategory,
   } = useSubmissions();
-  console.log({ submissions });
   const { currentHackathon } = useHackathonData();
   const { status } = useHackathonStatus(
     currentHackathon?.startDate,

components/hackathons/team-formation/MyInvitationsList.tsx

@@ -74,7 +74,6 @@ export function MyInvitationsList({ hackathonId }: MyInvitationsListProps) {
     teamId: teamId || '',
     autoFetch: !!teamId && isLeader,
   });
-  console.log(receivedInvitations, sentInvitations);
 
   const isLoading =
     activeTab === 'received' ? isLoadingReceived : isLoadingSent;

components/organization/hackathons/new/NewHackathonTab.tsx

@@ -82,7 +82,6 @@ export default function NewHackathonTab({
   // Define the callback after hooks are initialized
   const onDraftLoaded = useCallback(
     (formData: any, firstIncompleteStep: StepKey) => {
-      console.log('sjcdkformData', formData);
       setStepData(formData);
       setActiveTab(firstIncompleteStep);
 
@@ -323,7 +322,6 @@ export default function NewHackathonTab({
               isSavingDraft={isSavingDraft}
               organizationId={derivedOrgId}
               draftId={draftId}
-              publishResponse={publishResponse}
             />
           </TabsContent>
         </div>

components/organization/hackathons/new/tabs/ReviewTab.tsx

@@ -13,7 +13,6 @@ import {
   AccordionTrigger,
 } from '@/components/ui/accordion';
 import DraftSavedModal from './components/review/DraftSavedModal';
-import HackathonPublishedModal from './components/review/HackathonPublishedModal';
 import { ReviewHeader } from './components/review/ReviewHeader';
 import { EscrowSummary } from './components/review/EscrowSummary';
 import { WalletConnectionWarning } from './components/review/WalletConnectionWarning';
@@ -22,7 +21,6 @@ import { SectionRenderer } from './components/review/SectionRenderer';
 import { usePrizePoolCalculations } from '@/hooks/use-prize-pool-calculations';
 import { REVIEW_SECTION_CONFIG } from './constants/review-sections';
 import { toast } from 'sonner';
-import type { PublishResponseData } from '@/hooks/use-hackathon-publish';
 
 interface ReviewTabProps {
   allData: {
@@ -40,7 +38,6 @@ interface ReviewTabProps {
   isSavingDraft?: boolean;
   organizationId?: string;
   draftId?: string | null;
-  publishResponse?: PublishResponseData | null;
 }
 
 export default function ReviewTab({
@@ -52,22 +49,13 @@ export default function ReviewTab({
   isSavingDraft = false,
   organizationId,
   draftId,
-  publishResponse,
 }: ReviewTabProps) {
   const [showDraftModal, setShowDraftModal] = useState(false);
-  const [showPublishedModal, setShowPublishedModal] = useState(false);
   const { walletAddress } = useWalletContext();
 
   const { totalPrizePool, platformFee, totalFunding } =
     usePrizePoolCalculations(allData.rewards);
 
-  // Show published modal only when we have a successful publish response
-  useEffect(() => {
-    if (publishResponse) {
-      setShowPublishedModal(true);
-    }
-  }, [publishResponse]);
-
   const handlePublish = async () => {
     try {
       if (onPublish) {
@@ -158,13 +146,6 @@ export default function ReviewTab({
           // User can continue editing - modal will close
         }}
       />
-
-      <HackathonPublishedModal
-        open={showPublishedModal}
-        onOpenChange={setShowPublishedModal}
-        publishResponse={publishResponse}
-        organizationId={organizationId}
-      />
     </div>
   );
 }