feat(bounty): add FCFS single-claim flow with claim/approve UI and cl…

components/bounty-detail/bounty-badges.tsx

@@ -1,13 +1,20 @@
 import { STATUS_CONFIG, TYPE_CONFIG } from "@/lib/bounty-config";
 
-export function StatusBadge({ status }: { status: string }) {
+export function StatusBadge({
+  status,
+  type,
+}: {
+  status: string;
+  type?: string;
+}) {
   const cfg = STATUS_CONFIG[status] || STATUS_CONFIG.COMPLETED;
+  const isClaimed = type === "FIXED_PRICE" && status === "IN_PROGRESS";
   return (
     <span
       className={`inline-flex items-center gap-1.5 px-3 py-1 rounded-full text-xs font-semibold ${cfg.className}`}
     >
       <span className={`size-1.5 rounded-full ${cfg.dot} animate-pulse`} />
-      {cfg.label}
+      {isClaimed ? "Claimed" : cfg.label}
     </span>
   );
 }

components/bounty-detail/bounty-detail-client.tsx

@@ -9,6 +9,7 @@ import { DescriptionCard } from "./bounty-detail-description-card";
 import { BountyDetailSubmissionsCard } from "./bounty-detail-submissions-card";
 import { BountyDetailSkeleton } from "./bounty-detail-bounty-detail-skeleton";
 import { useBountyDetail } from "@/hooks/use-bounty-detail";
+import { FcfsApprovalPanel } from "@/components/bounty/fcfs-approval-panel";
 
 export function BountyDetailClient({ bountyId }: { bountyId: string }) {
   const router = useRouter();
@@ -71,6 +72,7 @@ export function BountyDetailClient({ bountyId }: { bountyId: string }) {
         <HeaderCard bounty={bounty} />
         <DescriptionCard description={bounty.description} />
         <BountyDetailSubmissionsCard bounty={bounty} />
+        <FcfsApprovalPanel bounty={bounty} />
       </div>
 
       {/* Sidebar */}

components/bounty-detail/bounty-detail-header-card.tsx

@@ -11,7 +11,7 @@ export function HeaderCard({ bounty }: { bounty: BountyFieldsFragment }) {
     <div className="p-6 rounded-xl border border-gray-800 bg-background-card backdrop-blur-xl shadow-sm">
       {/* Badges */}
       <div className="flex items-center gap-2 flex-wrap mb-4">
-        <StatusBadge status={bounty.status} />
+        <StatusBadge status={bounty.status} type={bounty.type} />
         <TypeBadge type={bounty.type} />
       </div>
 

components/bounty-detail/bounty-detail-sidebar-cta.tsx

@@ -7,10 +7,12 @@ import { Separator } from "@/components/ui/separator";
 
 import { BountyFieldsFragment } from "@/lib/graphql/generated";
 import { StatusBadge, TypeBadge } from "./bounty-badges";
+import { FcfsClaimButton } from "@/components/bounty/fcfs-claim-button";
 
 export function SidebarCTA({ bounty }: { bounty: BountyFieldsFragment }) {
   const [copied, setCopied] = useState(false);
   const canAct = bounty.status === "OPEN";
+  const isFcfs = bounty.type === "FIXED_PRICE";
 
   const handleCopy = async () => {
     try {
@@ -64,7 +66,7 @@ export function SidebarCTA({ bounty }: { bounty: BountyFieldsFragment }) {
         <div className="space-y-3 text-sm">
           <div className="flex items-center justify-between text-gray-400">
             <span>Status</span>
-            <StatusBadge status={bounty.status} />
+            <StatusBadge status={bounty.status} type={bounty.type} />
           </div>
           <div className="flex items-center justify-between text-gray-400">
             <span>Type</span>
@@ -75,17 +77,25 @@ export function SidebarCTA({ bounty }: { bounty: BountyFieldsFragment }) {
         <Separator className="bg-gray-800/60" />
 
         {/* CTA */}
-        <Button
-          className="w-full h-11 font-bold tracking-wide"
-          disabled={!canAct}
-          size="lg"
-          onClick={() =>
-            canAct &&
-            window.open(bounty.githubIssueUrl, "_blank", "noopener,noreferrer")
-          }
-        >
-          {ctaLabel()}
-        </Button>
+        {isFcfs ? (
+          <FcfsClaimButton bounty={bounty} />
+        ) : (
+          <Button
+            className="w-full h-11 font-bold tracking-wide"
+            disabled={!canAct}
+            size="lg"
+            onClick={() =>
+              canAct &&
+              window.open(
+                bounty.githubIssueUrl,
+                "_blank",
+                "noopener,noreferrer",
+              )
+            }
+          >
+            {ctaLabel()}
+          </Button>
+        )}
 
         {!canAct && (
           <p className="flex items-center gap-1.5 text-xs text-gray-500 justify-center text-center">
@@ -129,6 +139,7 @@ export function SidebarCTA({ bounty }: { bounty: BountyFieldsFragment }) {
 
 export function MobileCTA({ bounty }: { bounty: BountyFieldsFragment }) {
   const canAct = bounty.status === "OPEN";
+  const isFcfs = bounty.type === "FIXED_PRICE";
 
   const label = () => {
     if (!canAct) {
@@ -146,17 +157,21 @@ export function MobileCTA({ bounty }: { bounty: BountyFieldsFragment }) {
 
   return (
     <div className="lg:hidden fixed bottom-0 left-0 right-0 p-4 bg-background/90 backdrop-blur-xl border-t border-gray-800/60 z-20">
-      <Button
-        className="w-full h-11 font-bold tracking-wide"
-        disabled={!canAct}
-        size="lg"
-        onClick={() =>
-          canAct &&
-          window.open(bounty.githubIssueUrl, "_blank", "noopener,noreferrer")
-        }
-      >
-        {label()}
-      </Button>
+      {isFcfs ? (
+        <FcfsClaimButton bounty={bounty} />
+      ) : (
+        <Button
+          className="w-full h-11 font-bold tracking-wide"
+          disabled={!canAct}
+          size="lg"
+          onClick={() =>
+            canAct &&
+            window.open(bounty.githubIssueUrl, "_blank", "noopener,noreferrer")
+          }
+        >
+          {label()}
+        </Button>
+      )}
     </div>
   );
 }

components/bounty-detail/bounty-detail-submissions-card.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect } from "react";
 import { Loader2, DollarSign } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {

components/bounty/bounty-card.tsx

@@ -76,6 +76,8 @@ export function BountyCard({
   variant = "grid",
 }: BountyCardProps) {
   const status = statusConfig[bounty.status];
+  const isFcfsClaimed =
+    bounty.type === "FIXED_PRICE" && bounty.status === "IN_PROGRESS";
   const timeLeft = bounty.updatedAt
     ? formatDistanceToNow(new Date(bounty.updatedAt), { addSuffix: true })
     : "N/A";
@@ -107,7 +109,7 @@ export function BountyCard({
             <div className="flex items-center gap-2">
               <div className={cn("w-2 h-2 rounded-full", status.dotColor)} />
               <Badge variant={status.variant} className="text-xs font-medium">
-                {status.label}
+                {isFcfsClaimed ? "Claimed" : status.label}
               </Badge>
             </div>
 

components/bounty/fcfs-approval-panel.tsx

@@ -0,0 +1,124 @@
+"use client";
+
+import { useState } from "react";
+import { Loader2 } from "lucide-react";
+import { toast } from "sonner";
+import { authClient } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useApproveFcfs } from "@/hooks/use-claim-bounty";
+
+type FcfsApprovalBounty = {
+  id: string;
+  type: string;
+  status: string;
+  createdBy: string;
+  submissions?: Array<{
+    id: string;
+    githubPullRequestUrl?: string | null;
+    submittedBy?: string;
+    submittedByUser?: { name?: string | null } | null;
+  }> | null;
+};
+
+export function FcfsApprovalPanel({ bounty }: { bounty: FcfsApprovalBounty }) {
+  const { data: session } = authClient.useSession();
+  const approveMutation = useApproveFcfs();
+  const [points, setPoints] = useState(10);
+
+  const currentUserId = (session?.user as { id?: string } | undefined)?.id;
+  const walletAddress =
+    (session?.user as { walletAddress?: string; address?: string } | undefined)
+      ?.walletAddress ||
+    (session?.user as { walletAddress?: string; address?: string } | undefined)
+      ?.address ||
+    currentUserId;
+
+  const isCreator = Boolean(
+    currentUserId && currentUserId === bounty.createdBy,
+  );
+  const isFcfs = bounty.type === "FIXED_PRICE";
+  const isReviewState =
+    bounty.status === "IN_REVIEW" || bounty.status === "UNDER_REVIEW";
+
+  if (!isFcfs || !isCreator || !isReviewState) return null;
+
+  const targetSubmission = bounty.submissions?.[0];
+
+  const handleApprove = async () => {
+    if (!walletAddress) {
+      toast.error("Connect your wallet to approve this FCFS bounty.");
+      return;
+    }
+    if (!Number.isFinite(points) || points < 0) {
+      toast.error("Points must be a valid non-negative number.");
+      return;
+    }
+    try {
+      await approveMutation.mutateAsync({
+        bountyId: bounty.id,
+        creatorAddress: walletAddress,
+        points,
+      });
+      toast.success("Approved and released payment.");
+    } catch (error) {
+      toast.error(error instanceof Error ? error.message : "Approval failed.");
+    }
+  };
+
+  return (
+    <div className="p-5 rounded-xl border border-gray-800 bg-background-card space-y-4">
+      <h3 className="text-sm font-semibold text-gray-200">
+        FCFS Approval & Release
+      </h3>
+
+      {targetSubmission ? (
+        <div className="rounded-lg border border-gray-700 bg-gray-900/40 p-3 text-xs space-y-1">
+          <p className="text-gray-300">
+            Contributor:{" "}
+            {targetSubmission.submittedByUser?.name ||
+              targetSubmission.submittedBy}
+          </p>
+          {targetSubmission.githubPullRequestUrl && (
+            <a
+              href={targetSubmission.githubPullRequestUrl}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-primary hover:underline break-all"
+            >
+              {targetSubmission.githubPullRequestUrl}
+            </a>
+          )}
+        </div>
+      ) : (
+        <p className="text-xs text-gray-400">
+          No submission metadata is available yet. You can still approve using
+          on-chain state.
+        </p>
+      )}
+
+      <div className="space-y-2">
+        <Label htmlFor="fcfs-approval-points">Reputation points</Label>
+        <Input
+          id="fcfs-approval-points"
+          type="number"
+          min={0}
+          value={points}
+          onChange={(e) => setPoints(Number(e.target.value))}
+        />
+      </div>
+
+      <Button
+        className="w-full"
+        onClick={() => void handleApprove()}
+        disabled={approveMutation.isPending}
+      >
+        {approveMutation.isPending && (
+          <Loader2 className="mr-2 size-4 animate-spin" />
+        )}
+        Approve & Release Payment
+      </Button>
+    </div>
+  );
+}