Merge branch 'feat/t-replace' of github.com:boundlessfi/boundless into feat/t-replace

Author: 0xdevcollins

app/(landing)/bounties/[id]/submit/page.tsx

@@ -0,0 +1,22 @@
+import { Metadata } from 'next';
+
+import { generatePageMetadata } from '@/lib/metadata';
+import BountySubmitGate from '@/components/bounties/detail/submit/BountySubmitGate';
+
+export const metadata: Metadata = generatePageMetadata('bounties');
+
+interface BountySubmitPageProps {
+  params: Promise<{ id: string }>;
+}
+
+export default async function BountySubmitPageRoute({
+  params,
+}: BountySubmitPageProps) {
+  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]'>
+      <BountySubmitGate id={id} />
+    </div>
+  );
+}

components/bounties/DueCountdown.tsx

@@ -0,0 +1,39 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { Clock } from 'lucide-react';
+
+/** Format remaining time to a deadline as "Due in 4d:21h:22m" (null once past). */
+export function formatCountdown(
+  deadlineIso: string,
+  now: number
+): string | null {
+  const diff = new Date(deadlineIso).getTime() - now;
+  if (diff <= 0) return null;
+  const d = Math.floor(diff / 86_400_000);
+  const h = Math.floor((diff % 86_400_000) / 3_600_000);
+  const m = Math.floor((diff % 3_600_000) / 60_000);
+  return `Due in ${d}d:${h}h:${m}m`;
+}
+
+/** Live-ticking due-date countdown (minute granularity). */
+export function DueCountdown({
+  deadline,
+  className = 'flex items-center gap-1.5 text-xs text-zinc-500',
+}: {
+  deadline: string;
+  className?: string;
+}) {
+  const [now, setNow] = useState(() => Date.now());
+  useEffect(() => {
+    const id = setInterval(() => setNow(Date.now()), 30_000);
+    return () => clearInterval(id);
+  }, []);
+  const label = formatCountdown(deadline, now);
+  return (
+    <span className={className}>
+      <Clock className='h-3.5 w-3.5' />
+      {label ?? 'Due date passed'}
+    </span>
+  );
+}

components/bounties/detail/BountyDetail.tsx

@@ -3,21 +3,33 @@
 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 Image from 'next/image';
+import { ArrowLeft, Award, Calendar, Info, Loader2, Users } from 'lucide-react';
 
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from '@/components/ui/tooltip';
 import EmptyState from '@/components/EmptyState';
-import { computeBountyModeLabel } from '@/components/organization/bounties/new/tabs/schemas/modeSchema';
-import { useBounty, useMyBountyApplication } from '@/features/bounties';
+import {
+  computeBountyModeLabel,
+  computeBountyModeDescription,
+} from '@/components/organization/bounties/new/tabs/schemas/modeSchema';
+import {
+  CATEGORY_LABELS,
+  type BountyCategory,
+} from '@/components/organization/bounties/new/tabs/schemas/scopeSchema';
+import {
+  useBounty,
+  useMyBountyApplication,
+  useMyBountySubmission,
+} from '@/features/bounties';
 import { BountyEntryCta } from './BountyEntryCta';
 import BountySubmitPanel from './submit/BountySubmitPanel';
+import { DueCountdown } from '../DueCountdown';
 
 // Markdown renderer (matches the wizard's editor package).
 const Markdown = dynamic(
@@ -42,6 +54,10 @@ const ordinal = (n: number): string => {
 export default function BountyDetail({ id }: { id: string }) {
   const { data: bounty, isLoading, error } = useBounty(id);
   const { data: myApplication } = useMyBountyApplication(id);
+  const { data: mySubmission } = useMyBountySubmission(id);
+  // An anchored (non-withdrawn) submission must be withdrawn before the
+  // application/claim can be withdrawn (the contract enforces this order).
+  const hasActiveSubmission = mySubmission?.escrowAnchorStatus === 'active';
 
   if (isLoading) {
     return (
@@ -75,7 +91,15 @@ export default function BountyDetail({ id }: { id: string }) {
     bounty.entryType && bounty.claimType
       ? computeBountyModeLabel(bounty.entryType, bounty.claimType)
       : 'Bounty';
+  const modeDescription =
+    bounty.entryType && bounty.claimType
+      ? computeBountyModeDescription(bounty.entryType, bounty.claimType)
+      : null;
   const currency = bounty.rewardCurrency;
+  const isUsdc = currency?.toUpperCase() === 'USDC';
+  const categoryLabel = bounty.category
+    ? (CATEGORY_LABELS[bounty.category as BountyCategory] ?? bounty.category)
+    : null;
 
   return (
     <div>
@@ -91,26 +115,61 @@ export default function BountyDetail({ id }: { id: string }) {
         {/* 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>
+            {modeDescription ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <Badge
+                    variant='outline'
+                    className='flex cursor-help items-center gap-1 rounded-full border-zinc-700 bg-zinc-800/60 px-3 py-1 text-xs font-medium text-zinc-200'
+                  >
+                    {modeLabel}
+                    <Info className='h-3 w-3 text-zinc-400' />
+                  </Badge>
+                </TooltipTrigger>
+                <TooltipContent className='max-w-xs text-xs leading-relaxed'>
+                  {modeDescription}
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <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>
+            {categoryLabel && (
+              <Badge
+                variant='outline'
+                className='rounded-full border-zinc-700 bg-zinc-800/40 px-3 py-1 text-xs font-medium text-zinc-300'
+              >
+                {categoryLabel}
+              </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>
+          <div className='mt-2 flex items-center gap-2 text-sm text-zinc-400'>
+            <span>by</span>
+            <Avatar className='h-5 w-5'>
+              <AvatarImage
+                src={bounty.organization.logo ?? undefined}
+                alt={bounty.organization.name}
+              />
+              <AvatarFallback className='text-[10px]'>
+                {bounty.organization.name.charAt(0).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <span className='text-zinc-200'>{bounty.organization.name}</span>
+          </div>
 
           {/* Description (markdown) */}
           <div className='boundless-markdown mt-8' data-color-mode='dark'>
@@ -154,9 +213,20 @@ export default function BountyDetail({ id }: { id: string }) {
           {/* 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>
+              {isUsdc ? (
+                <Image
+                  src='/assets/usdc.svg'
+                  alt='USDC'
+                  width={44}
+                  height={44}
+                  unoptimized
+                  className='h-11 w-11'
+                />
+              ) : (
+                <div className='bg-primary/10 flex h-11 w-11 items-center justify-center rounded-xl'>
+                  <Award className='text-primary h-5 w-5' />
+                </div>
+              )}
               <div>
                 <p className='text-primary text-xl font-bold'>
                   {bounty.rewardAmount > 0
@@ -169,6 +239,17 @@ export default function BountyDetail({ id }: { id: string }) {
 
             {/* Eligibility / mode facts */}
             <dl className='mt-4 space-y-2 border-t border-zinc-800 pt-4 text-sm'>
+              {bounty.submissionDeadline && (
+                <div className='flex items-center justify-between gap-3'>
+                  <dt className='text-zinc-400'>Deadline</dt>
+                  <dd className='text-right'>
+                    <DueCountdown
+                      deadline={bounty.submissionDeadline}
+                      className='flex items-center gap-1.5 text-xs font-medium text-zinc-200'
+                    />
+                  </dd>
+                </div>
+              )}
               {bounty.entryType === 'OPEN' &&
                 bounty.claimType === 'SINGLE_CLAIM' &&
                 bounty.reputationMinimum != null && (
@@ -204,12 +285,14 @@ export default function BountyDetail({ id }: { id: string }) {
           <BountyEntryCta
             bounty={bounty}
             myApplication={myApplication ?? null}
+            hasActiveSubmission={hasActiveSubmission}
           />
 
           {/* Submit work (shown when the builder is eligible) */}
           <BountySubmitPanel
             bounty={bounty}
             myApplication={myApplication ?? null}
+            hasActiveSubmission={hasActiveSubmission}
           />
         </aside>
       </div>

components/bounties/detail/BountyEntryCta.tsx

@@ -1,10 +1,12 @@
 'use client';
 
 import { useEffect, useState } from 'react';
+import Link from 'next/link';
 import { toast } from 'sonner';
-import { CheckCircle2, Loader2, Lock } from 'lucide-react';
+import { CheckCircle2, ChevronRight, Loader2, Lock } from 'lucide-react';
 
 import { BoundlessButton } from '@/components/buttons';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
 import { Badge } from '@/components/ui/badge';
 import { useWalletContext } from '@/components/providers/wallet-provider';
 import {
@@ -41,9 +43,12 @@ const STATUS_CLASS: Record<string, string> = {
 export function BountyEntryCta({
   bounty,
   myApplication,
+  hasActiveSubmission = false,
 }: {
   bounty: BountyPublic;
   myApplication: MyBountyApplication | null;
+  /** An anchored submission blocks application/claim withdrawal until pulled. */
+  hasActiveSubmission?: boolean;
 }) {
   const { walletAddress } = useWalletContext();
   const [dialogOpen, setDialogOpen] = useState(false);
@@ -76,6 +81,10 @@ export function BountyEntryCta({
     (myApplication.applicationStatus === 'WITHDRAWN' ||
       myApplication.status === 'withdrawn');
   const isActive = !!myApplication && !withdrawn;
+  // A single-claim bounty taken by someone else. The claimant themselves sees
+  // the "you're in this bounty" branch, so this is the locked view for others.
+  const claimant = bounty.claimedBy ?? null;
+  const claimedByOther = !isActive && !!claimant;
   // Application records are only mutable while SUBMITTED.
   const editable =
     isApplication && myApplication?.applicationStatus === 'SUBMITTED';
@@ -175,6 +184,20 @@ export function BountyEntryCta({
                   )}
                 </BoundlessButton>
               </div>
+            ) : hasActiveSubmission ? (
+              <div className='space-y-1.5'>
+                <BoundlessButton
+                  variant='outline'
+                  className='w-full text-zinc-500'
+                  disabled
+                >
+                  {withdrawLabel}
+                </BoundlessButton>
+                <p className='flex items-center gap-1.5 text-xs text-zinc-500'>
+                  <Lock className='h-3.5 w-3.5' />
+                  Withdraw your submission first.
+                </p>
+              </div>
             ) : (
               <BoundlessButton
                 variant='outline'
@@ -185,6 +208,35 @@ export function BountyEntryCta({
               </BoundlessButton>
             ))}
         </div>
+      ) : claimedByOther ? (
+        <div className='space-y-3'>
+          <div className='flex items-center gap-2'>
+            <Lock className='h-4 w-4 text-zinc-400' />
+            <span className='text-sm font-medium text-white'>Claimed</span>
+          </div>
+          <Link
+            href={`/profile/${claimant!.username}`}
+            target='_blank'
+            className='group flex items-center gap-3 rounded-xl border border-zinc-800 bg-zinc-900/60 p-3 transition-colors hover:border-zinc-700 hover:bg-zinc-800/60'
+          >
+            <Avatar className='h-9 w-9'>
+              <AvatarImage
+                src={claimant!.avatarUrl ?? undefined}
+                alt={claimant!.username}
+              />
+              <AvatarFallback className='text-xs'>
+                {claimant!.username.charAt(0).toUpperCase()}
+              </AvatarFallback>
+            </Avatar>
+            <div className='min-w-0 flex-1'>
+              <p className='truncate text-sm font-medium text-white group-hover:underline'>
+                @{claimant!.username}
+              </p>
+              <p className='text-xs text-zinc-500'>View profile</p>
+            </div>
+            <ChevronRight className='h-4 w-4 shrink-0 text-zinc-500 transition-transform group-hover:translate-x-0.5 group-hover:text-zinc-300' />
+          </Link>
+        </div>
       ) : (
         <>
           <BoundlessButton