feat(bounty): bounty detail page (/bounties/[id]) (#646)

Benjtalkshow · web-flow · commit 928aa7302158 · 2026-06-25T01:56:39.000+01:00
* feat(bounty): participant data layer (escrow client + hooks) Add the builder/participant data layer to features/bounties, mirroring the hackathon participant scope and reusing the shared escrow runner. The visible builder UI (marketplace, detail, apply/submit/withdraw, my-bounties) consumes this. - participant-escrow-client: on-chain apply/submit/withdraw-application/ withdraw-submission/contribute + participant op poll + submit-signed (the no-org-prefix /api/bounties/{id}/escrow/* routes) - participant-client: public list/detail, v2 application records (apply/edit/withdraw/me), competition join/leave - use-participant hooks: useBountiesList/useBounty/useMyBountyApplication, useApply/Edit/WithdrawApplication, useJoin/LeaveCompetition, and escrow-op hooks (useSubmitBounty/useWithdrawSubmission/useContributeToBounty/ useApplyToBountyEscrow/useWithdrawApplicationEscrow) driven through the runner, default MANAGED - use-escrow: EscrowOpScope is now organizer | participant; the runner routes op-poll/submit-signed to the participant URLs - keys/types/index: participant query keys, type aliases, public exports MyBountyApplication is hand-typed until boundless-nestjs #331 lands and codegen runs; useMyBountyActivity is deferred until the participant dashboard (#332). Closes #621 * feat(bounty): public bounty marketplace (discover/list) Replace the /coming-soon placeholder at /bounties with a real public marketplace, mirroring the hackathon browse and wired to the participant data layer (#621). - route app/(landing)/bounties/page.tsx + bounties metadata entry - BountiesPage: search + status + mode filters, infinite scroll, loading/empty/error states - BountyCard: mode badge (plain label), status, reward, organization, application-window date; links to /bounties/[id] - BountiesFiltersHeader + colocated useInfiniteBounties (infinite query over listBounties) Status + search filter server-side; mode narrows client-side (the public list endpoint doesn't filter on mode). Category filter and a card submission deadline are omitted because BountyPublicDto exposes neither — small backend follow-ups. Closes #622 * feat(bounty): bounty detail page (/bounties/[id]) The builder hub: shows the bounty, the caller's status, and a mode-aware entry CTA. Wired to the participant data layer (#621). - route app/(landing)/bounties/[id]/page.tsx - BountyDetail: markdown description, prize tiers, mode/status badges, organization, reward pool + eligibility sidebar (reputation minimum / application window / max applicants / shortlist); loading + not-found - BountyEntryCta: mode-aware CTA — Claim (open+single), Join (open+ competition), Apply (application). Gated/explained when not accepting, the application window closed, or already applied; shows the caller's application status via useMyBountyApplication The actual entry execution (forms / on-chain op) ships in #624; the CTA is gated + labeled and hands off to it. applicationCreditCost is not in BountyPublicDto so it's omitted from the eligibility panel. Closes #623
diff --git a/app/(landing)/bounties/[id]/page.tsx b/app/(landing)/bounties/[id]/page.tsx
@@ -0,0 +1,22 @@
+import { Metadata } from 'next';
+
+import { generatePageMetadata } from '@/lib/metadata';
+import BountyDetail from '@/components/bounties/detail/BountyDetail';
+
+export const metadata: Metadata = generatePageMetadata('bounties');
+
+interface BountyDetailPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function BountyDetailPageRoute({
+  params,
+}: BountyDetailPageProps) {
+  const { id } = await params;
+
+  return (
+    <div className='relative mx-auto min-h-screen max-w-[1440px] px-5 py-8 md:px-[50px] lg:px-[100px]'>
+      <BountyDetail id={id} />
+    </div>
+  );
+}
diff --git a/components/bounties/detail/BountyDetail.tsx 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 (
+      <div className='flex min-h-[50vh] items-center justify-center'>
+        <Loader2 className='h-6 w-6 animate-spin text-zinc-500' />
+      </div>
+    );
+  }
+
+  if (error || !bounty) {
+    return (
+      <div className='py-20'>
+        <EmptyState
+          title='Bounty not found'
+          description='This bounty may have been removed or is not public.'
+          type='compact'
+        />
+        <div className='mt-4 text-center'>
+          <Link
+            href='/bounties'
+            className='text-primary text-sm hover:underline'
+          >
+            Back to bounties
+          </Link>
+        </div>
+      </div>
+    );
+  }
+
+  const modeLabel =
+    bounty.entryType && bounty.claimType
+      ? computeBountyModeLabel(bounty.entryType, bounty.claimType)
+      : 'Bounty';
+  const currency = bounty.rewardCurrency;
+
+  return (
+    <div>
+      <Link
+        href='/bounties'
+        className='mb-6 inline-flex items-center gap-1.5 text-sm text-zinc-400 transition-colors hover:text-white'
+      >
+        <ArrowLeft className='h-4 w-4' />
+        Back to bounties
+      </Link>
+
+      <div className='grid gap-8 lg:grid-cols-[1fr_360px]'>
+        {/* Main */}
+        <div className='min-w-0'>
+          <div className='mb-4 flex flex-wrap items-center gap-2'>
+            <Badge
+              variant='outline'
+              className='rounded-full border-zinc-700 bg-zinc-800/60 px-3 py-1 text-xs font-medium text-zinc-200'
+            >
+              {modeLabel}
+            </Badge>
+            <Badge
+              variant='outline'
+              className='rounded-full border-zinc-700 bg-zinc-800/60 px-3 py-1 text-xs font-medium text-zinc-300 capitalize'
+            >
+              {bounty.status.replace(/_/g, ' ')}
+            </Badge>
+          </div>
+
+          <h1 className='text-2xl font-bold tracking-tight text-white sm:text-3xl'>
+            {bounty.title}
+          </h1>
+          <p className='mt-2 text-sm text-zinc-400'>
+            by <span className='text-zinc-200'>{bounty.organization.name}</span>
+          </p>
+
+          {/* Description (markdown) */}
+          <div className='boundless-markdown mt-8' data-color-mode='dark'>
+            <Markdown
+              source={bounty.description}
+              style={{ background: 'transparent', color: '#e4e4e7' }}
+            />
+          </div>
+
+          {/* Prize tiers */}
+          {bounty.prizeTiers.length > 0 && (
+            <div className='mt-10'>
+              <h2 className='mb-3 flex items-center gap-2 text-lg font-semibold text-white'>
+                <Award className='text-primary h-5 w-5' />
+                Prize tiers
+              </h2>
+              <div className='space-y-2'>
+                {bounty.prizeTiers
+                  .slice()
+                  .sort((a, b) => a.position - b.position)
+                  .map(tier => (
+                    <div
+                      key={tier.position}
+                      className='flex items-center justify-between rounded-lg border border-zinc-800 bg-zinc-900/30 px-4 py-3'
+                    >
+                      <span className='text-sm font-medium text-zinc-300'>
+                        {ordinal(tier.position)} place
+                      </span>
+                      <span className='text-primary text-sm font-semibold'>
+                        {Number(tier.amount).toLocaleString()} {currency}
+                      </span>
+                    </div>
+                  ))}
+              </div>
+            </div>
+          )}
+        </div>
+
+        {/* Sidebar */}
+        <aside className='space-y-4 lg:sticky lg:top-6 lg:self-start'>
+          {/* Reward */}
+          <div className='rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5'>
+            <div className='flex items-center gap-3'>
+              <div className='bg-primary/10 flex h-11 w-11 items-center justify-center rounded-xl'>
+                <Target className='text-primary h-5 w-5' />
+              </div>
+              <div>
+                <p className='text-primary text-xl font-bold'>
+                  {bounty.rewardAmount > 0
+                    ? `${bounty.rewardAmount.toLocaleString()} ${currency}`
+                    : 'No reward set'}
+                </p>
+                <p className='text-xs text-zinc-500'>total reward pool</p>
+              </div>
+            </div>
+
+            {/* Eligibility / mode facts */}
+            <dl className='mt-4 space-y-2 border-t border-zinc-800 pt-4 text-sm'>
+              {bounty.entryType === 'OPEN' &&
+                bounty.claimType === 'SINGLE_CLAIM' &&
+                bounty.reputationMinimum != null && (
+                  <Row
+                    label='Minimum reputation'
+                    value={String(bounty.reputationMinimum)}
+                  />
+                )}
+              {bounty.applicationWindowCloseAt && (
+                <Row
+                  icon={<Calendar className='h-3.5 w-3.5' />}
+                  label='Applications close'
+                  value={formatDate(bounty.applicationWindowCloseAt)}
+                />
+              )}
+              {bounty.maxApplicants != null && (
+                <Row
+                  icon={<Users className='h-3.5 w-3.5' />}
+                  label='Max applicants'
+                  value={String(bounty.maxApplicants)}
+                />
+              )}
+              {bounty.shortlistSize != null && (
+                <Row
+                  label='Shortlist size'
+                  value={String(bounty.shortlistSize)}
+                />
+              )}
+            </dl>
+          </div>
+
+          {/* Mode-aware CTA + caller status */}
+          <BountyEntryCta
+            bounty={bounty}
+            myApplication={myApplication ?? null}
+          />
+        </aside>
+      </div>
+    </div>
+  );
+}
+
+function Row({
+  label,
+  value,
+  icon,
+}: {
+  label: string;
+  value: string;
+  icon?: React.ReactNode;
+}) {
+  return (
+    <div className='flex items-center justify-between gap-3'>
+      <dt className='flex items-center gap-1.5 text-zinc-400'>
+        {icon}
+        {label}
+      </dt>
+      <dd className='text-right font-medium text-white'>{value}</dd>
+    </div>
+  );
+}
diff --git a/components/bounties/detail/BountyEntryCta.tsx 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<string, string> = {
+  SUBMITTED: 'Application submitted',
+  SHORTLISTED: 'Shortlisted',
+  SELECTED: 'Selected',
+  DECLINED: 'Not selected',
+  WITHDRAWN: 'Withdrawn',
+};
+
+const STATUS_CLASS: Record<string, string> = {
+  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 (
+    <div className='rounded-2xl border border-zinc-800 bg-zinc-900/40 p-5'>
+      {activeStatus ? (
+        <div className='space-y-3'>
+          <div className='flex items-center gap-2'>
+            <CheckCircle2 className='text-primary h-4 w-4' />
+            <span className='text-sm font-medium text-white'>
+              You&apos;re in this bounty
+            </span>
+          </div>
+          <Badge
+            variant='outline'
+            className={`rounded-full px-3 py-1 text-xs font-medium ${
+              STATUS_CLASS[activeStatus] ??
+              'border-zinc-700 bg-zinc-800/60 text-zinc-300'
+            }`}
+          >
+            {STATUS_LABEL[activeStatus] ?? activeStatus}
+          </Badge>
+        </div>
+      ) : (
+        <>
+          <BoundlessButton
+            size='lg'
+            className='w-full'
+            disabled={!accepting || deadlinePassed}
+            onClick={onEntry}
+          >
+            {label}
+          </BoundlessButton>
+          <p className='mt-2 flex items-center justify-center gap-1.5 text-center text-xs text-zinc-500'>
+            {!accepting ? (
+              <>
+                <Lock className='h-3.5 w-3.5' />
+                This bounty is not accepting entries.
+              </>
+            ) : deadlinePassed ? (
+              <>
+                <Lock className='h-3.5 w-3.5' />
+                Applications have closed.
+              </>
+            ) : myApplication?.applicationStatus === 'WITHDRAWN' ? (
+              'You withdrew earlier — you can enter again.'
+            ) : (
+              'Funds are held in escrow and paid on-chain to winners.'
+            )}
+          </p>
+        </>
+      )}
+    </div>
+  );
+}
