- Bounties Page
+
+
);
-};
-
-export default GrantPage;
+}
diff --git a/components/bounties/detail/BountyDetail.tsx b/components/bounties/detail/BountyDetail.tsx
new file mode 100644
index 000000000..4da15dd83
--- /dev/null
+++ b/components/bounties/detail/BountyDetail.tsx
@@ -0,0 +1,231 @@
+'use client';
+
+import React from 'react';
+import dynamic from 'next/dynamic';
+import Link from 'next/link';
+import {
+ ArrowLeft,
+ Award,
+ Calendar,
+ Loader2,
+ Target,
+ Users,
+} from 'lucide-react';
+
+import { Badge } from '@/components/ui/badge';
+import EmptyState from '@/components/EmptyState';
+import { computeBountyModeLabel } from '@/components/organization/bounties/new/tabs/schemas/modeSchema';
+import { useBounty, useMyBountyApplication } from '@/features/bounties';
+import { BountyEntryCta } from './BountyEntryCta';
+
+// Markdown renderer (matches the wizard's editor package).
+const Markdown = dynamic(
+ () => import('@uiw/react-md-editor').then(mod => mod.default.Markdown),
+ { ssr: false }
+);
+
+function formatDate(iso: string): string {
+ return new Date(iso).toLocaleDateString(undefined, {
+ month: 'short',
+ day: 'numeric',
+ year: 'numeric',
+ });
+}
+
+const ordinal = (n: number): string => {
+ const s = ['th', 'st', 'nd', 'rd'];
+ const v = n % 100;
+ return `${n}${s[(v - 20) % 10] ?? s[v] ?? s[0]}`;
+};
+
+export default function BountyDetail({ id }: { id: string }) {
+ const { data: bounty, isLoading, error } = useBounty(id);
+ const { data: myApplication } = useMyBountyApplication(id);
+
+ if (isLoading) {
+ return (
+
+
+
+ );
+ }
+
+ if (error || !bounty) {
+ return (
+
+
+
+
+ Back to bounties
+
+
+
+ );
+ }
+
+ const modeLabel =
+ bounty.entryType && bounty.claimType
+ ? computeBountyModeLabel(bounty.entryType, bounty.claimType)
+ : 'Bounty';
+ const currency = bounty.rewardCurrency;
+
+ return (
+
+
+
+ Back to bounties
+
+
+
+ {/* Main */}
+
+
+
+ {modeLabel}
+
+
+ {bounty.status.replace(/_/g, ' ')}
+
+
+
+
+ {bounty.title}
+
+
+ by {bounty.organization.name}
+
+
+ {/* Description (markdown) */}
+
+
+
+
+ {/* Prize tiers */}
+ {bounty.prizeTiers.length > 0 && (
+
+
+
+ Prize tiers
+
+
+ {bounty.prizeTiers
+ .slice()
+ .sort((a, b) => a.position - b.position)
+ .map(tier => (
+
+
+ {ordinal(tier.position)} place
+
+
+ {Number(tier.amount).toLocaleString()} {currency}
+
+
+ ))}
+
+
+ )}
+
+
+ {/* Sidebar */}
+
+
+
+ );
+}
+
+function Row({
+ label,
+ value,
+ icon,
+}: {
+ label: string;
+ value: string;
+ icon?: React.ReactNode;
+}) {
+ return (
+
+
+ {icon}
+ {label}
+
+ {value}
+
+ );
+}
diff --git a/components/bounties/detail/BountyEntryCta.tsx b/components/bounties/detail/BountyEntryCta.tsx
new file mode 100644
index 000000000..688a2baeb
--- /dev/null
+++ b/components/bounties/detail/BountyEntryCta.tsx
@@ -0,0 +1,123 @@
+'use client';
+
+import { toast } from 'sonner';
+import { CheckCircle2, Lock } from 'lucide-react';
+
+import { BoundlessButton } from '@/components/buttons';
+import { Badge } from '@/components/ui/badge';
+import type { BountyPublic, MyBountyApplication } from '@/features/bounties';
+
+/** Statuses where a bounty still accepts new entries. */
+const ACCEPTING_STATUSES = new Set([
+ 'open',
+ 'open_for_applications',
+ 'upcoming',
+]);
+
+type EntryKind = 'claim' | 'join' | 'apply' | 'view';
+
+function entryKind(b: BountyPublic): { kind: EntryKind; label: string } {
+ const open = b.entryType === 'OPEN';
+ const application =
+ b.entryType === 'APPLICATION_LIGHT' || b.entryType === 'APPLICATION_FULL';
+ if (open && b.claimType === 'SINGLE_CLAIM')
+ return { kind: 'claim', label: 'Claim this bounty' };
+ if (open && b.claimType === 'COMPETITION')
+ return { kind: 'join', label: 'Join competition' };
+ if (application) return { kind: 'apply', label: 'Apply' };
+ return { kind: 'view', label: 'View' };
+}
+
+const STATUS_LABEL: Record
= {
+ SUBMITTED: 'Application submitted',
+ SHORTLISTED: 'Shortlisted',
+ SELECTED: 'Selected',
+ DECLINED: 'Not selected',
+ WITHDRAWN: 'Withdrawn',
+};
+
+const STATUS_CLASS: Record = {
+ SUBMITTED: 'border-blue-500/30 bg-blue-500/10 text-blue-400',
+ SHORTLISTED: 'border-amber-500/30 bg-amber-500/10 text-amber-400',
+ SELECTED: 'border-emerald-500/30 bg-emerald-500/10 text-emerald-400',
+ DECLINED: 'border-red-500/30 bg-red-500/10 text-red-400',
+ WITHDRAWN: 'border-zinc-700 bg-zinc-800/60 text-zinc-300',
+};
+
+export function BountyEntryCta({
+ bounty,
+ myApplication,
+}: {
+ bounty: BountyPublic;
+ myApplication: MyBountyApplication | null;
+}) {
+ const { label } = entryKind(bounty);
+
+ const deadlinePassed =
+ !!bounty.applicationWindowCloseAt &&
+ new Date(bounty.applicationWindowCloseAt).getTime() < Date.now();
+ const accepting = ACCEPTING_STATUSES.has(bounty.status);
+
+ // An active (non-withdrawn) application means the caller is already in.
+ const activeStatus =
+ myApplication && myApplication.applicationStatus !== 'WITHDRAWN'
+ ? myApplication.applicationStatus
+ : null;
+
+ // The real entry flow (forms / on-chain op) ships in #624; the CTA here is
+ // mode-aware and correctly gated, and hands off to that flow.
+ const onEntry = () =>
+ toast.info('The entry flow is coming in the next step (apply/join/claim).');
+
+ return (
+
+ {activeStatus ? (
+
+
+
+
+ You're in this bounty
+
+
+
+ {STATUS_LABEL[activeStatus] ?? activeStatus}
+
+
+ ) : (
+ <>
+
+ {label}
+
+
+ {!accepting ? (
+ <>
+
+ This bounty is not accepting entries.
+
+ ) : deadlinePassed ? (
+ <>
+
+ Applications have closed.
+
+ ) : myApplication?.applicationStatus === 'WITHDRAWN' ? (
+ 'You withdrew earlier — you can enter again.'
+ ) : (
+ 'Funds are held in escrow and paid on-chain to winners.'
+ )}
+
+
+ )}
+
+
+
+
+ Bounties
+
+
+ Discover open bounties and start earning.
+
+
+
+ {totalCount} bount{totalCount === 1 ? 'y' : 'ies'}
+
+
+
+
+
+
+ onSearch(e.target.value)}
+ className='focus:border-primary h-10 rounded-xl border-zinc-800/50 bg-zinc-900/30 pl-10 text-sm text-white placeholder:text-zinc-500 hover:border-zinc-700'
+ />
+
+
+
+
+
+
+
+
+
+ {loading && (
+
+
+
+ )}
+
+ {!loading && error && (
+
+
+
+ )}
+
+ {!loading && !error && visible.length === 0 && (
+
+
+ {hasFilters && (
+
+
+ Clear filters
+
+
+ )}
+
+ )}
+
+ {!loading && !error && visible.length > 0 && (
+ <>
+
+ {visible.map(b => (
+
+ ))}
+
+
+
+
+ {loadingMore && (
+
+
+ Loading more...
+
+ )}
+
+ )}
+
+
+ {modeLabel(bounty)}
+
+
+ {bounty.status.replace(/_/g, ' ')}
+
+
+
+
+ {bounty.title}
+
+ {bounty.description && (
+
+ {bounty.description}
+
+ )}
+
+ {bounty.applicationWindowCloseAt && (
+
+
+ Applications close {formatDate(bounty.applicationWindowCloseAt)}
+
+ )}
+
+
+
+
+
+
+
+
+ {reward
+ ? `${bounty.rewardAmount.toLocaleString()} ${bounty.rewardCurrency}`
+ : 'No reward set'}
+
+
reward
+
+
+
+ {bounty.organization.name}
+
+