Feat/bounty selection flow model 2

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

@@ -29,6 +29,12 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { MilestoneSubmissionCard } from "./milestone-submission-card";
 import { Model4MaintainerDashboard } from "./model4-maintainer-dashboard";
 import type { Milestone, ContributorProgress } from "@/types/bounty";
+import {
+  ApplicationReviewDashboard,
+  type Application,
+} from "@/components/bounty/application-review-dashboard";
+import { SubmissionApprovalPanel } from "@/components/bounty/submission-approval-panel";
+import { ApplicationSubmitWorkPanel } from "@/components/bounty/application-submit-work-panel";
 
 type BountyData = ReturnType<typeof useBountyDetail>["data"];
 
@@ -62,6 +68,15 @@ function getFullMilestoneData(bounty: BountyData): {
   };
 }
 
+// Backend does not currently provide applications in the response.
+// Fall back to empty array until the schema supports it.
+const getApplications = (bounty: BountyData): Application[] => {
+  return (
+    (bounty as BountyData & { applications?: Application[] })?.applications ??
+    []
+  );
+};
+
 export function BountyDetailClient({ bountyId }: { bountyId: string }) {
   const router = useRouter();
   const { data: bounty, isPending, isError, error } = useBountyDetail(bountyId);
@@ -133,6 +148,18 @@ export function BountyDetailClient({ bountyId }: { bountyId: string }) {
   const isCreator =
     (session?.user as { id?: string } | undefined)?.id === bounty.createdBy;
   const isFinalized = bounty.status === "COMPLETED";
+  // walletAddress is required for contract actions. Do NOT fallback to user.id.
+  const walletAddress =
+    (session?.user as { walletAddress?: string })?.walletAddress || "";
+
+  // Identify if the current user is the assigned contributor
+  // using a fallback check on submissions or assumed backend field.
+  const isAssignedApplicant =
+    (bounty as BountyData & { assignedContributorId?: string })
+      ?.assignedContributorId === session?.user?.id ||
+    bounty.submissions?.some((s) => s.submittedBy === session?.user?.id) ||
+    (!isCreator && bounty.status === "IN_PROGRESS");
+
   // submissions is present on BountyQuery (single-bounty query) but not on
   // BountyFieldsFragment (list query). The cast is safe here because
   // useBountyDetail returns BountyFieldsFragment & Partial<BountyQuery["bounty"]>.
@@ -200,9 +227,43 @@ export function BountyDetailClient({ bountyId }: { bountyId: string }) {
 
         {!isCancelled && pool && <EscrowDetailPanel poolId={bountyId} />}
         <RefundStatusTracker bountyId={bountyId} isCancelled={isCancelled} />
-        {bounty.type !== "FIXED_PRICE" && !isCompetition && (
-          <BountyDetailSubmissionsCard bounty={bounty} />
-        )}
+
+        {/* Model 2 Application Flow integration */}
+        {bounty.type === "MILESTONE_BASED" &&
+          isCreator &&
+          bounty.status === "OPEN" && (
+            <ApplicationReviewDashboard
+              bountyId={bountyId}
+              creatorAddress={walletAddress}
+              applications={getApplications(bounty)}
+            />
+          )}
+
+        {bounty.type === "MILESTONE_BASED" &&
+          isAssignedApplicant &&
+          walletAddress &&
+          bounty.status === "IN_PROGRESS" && (
+            <ApplicationSubmitWorkPanel
+              bountyId={bountyId}
+              contributorAddress={walletAddress}
+            />
+          )}
+
+        {bounty.type === "MILESTONE_BASED" &&
+          isCreator &&
+          bounty.status === "UNDER_REVIEW" && (
+            <SubmissionApprovalPanel
+              bounty={bounty}
+              creatorAddress={walletAddress}
+              submittedWorkCid={
+                bounty.submissions?.[0]?.githubPullRequestUrl || undefined
+              }
+            />
+          )}
+
+        {bounty.type !== "FIXED_PRICE" &&
+          bounty.type !== "MILESTONE_BASED" &&
+          !isCompetition && <BountyDetailSubmissionsCard bounty={bounty} />}
         {bounty.type === "FIXED_PRICE" && <FcfsApprovalPanel bounty={bounty} />}
         {isCompetition && isCreator && (pastDeadline || isFinalized) && (
           <CompetitionJudging

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

@@ -35,6 +35,11 @@ import { useCompetitionJoinState } from "@/hooks/use-competition-join-state";
 import type { CancellationRecord } from "@/types/escrow";
 import { useCancelBountyDialog } from "@/hooks/use-cancel-bounty-dialog";
 import type { Bounty } from "@/types/bounty";
+import {
+  ApplicationDialog,
+  type ApplicationFormValues,
+} from "@/components/bounty/application-dialog";
+import { useApplyToBounty } from "@/hooks/use-bounty-application";
 
 /** Props accept the wider intersection returned by useBountyDetail so
  * callers don't need a cast. Optional Bounty fields (maxSlots, etc.)
@@ -87,6 +92,17 @@ export function SidebarCTA({ bounty, onCancelled }: SidebarCTAProps) {
     }
   };
 
+  const { mutateAsync: applyToBounty } = useApplyToBounty();
+
+  const handleApply = async (values: ApplicationFormValues) => {
+    if (!walletAddress) return;
+    await applyToBounty({
+      bountyId: bounty.id,
+      applicantAddress: walletAddress,
+      proposal: JSON.stringify(values),
+    });
+  };
+
   const ctaLabel = () => {
     if (!canAct) {
       switch (bounty.status) {
@@ -203,6 +219,20 @@ export function SidebarCTA({ bounty, onCancelled }: SidebarCTAProps) {
               {canAct && !isPastDeadline ? "Join Competition" : ctaLabel()}
             </Button>
           )
+        ) : bounty.type === "MILESTONE_BASED" && canAct && !isCreator ? (
+          <ApplicationDialog
+            bountyTitle={bounty.title}
+            onApply={handleApply}
+            trigger={
+              <Button
+                className="w-full h-11 font-bold tracking-wide"
+                size="lg"
+                disabled={!walletAddress}
+              >
+                Apply for Bounty
+              </Button>
+            }
+          />
         ) : (
           <Button
             className="w-full h-11 font-bold tracking-wide"
@@ -393,6 +423,17 @@ export function MobileCTA({ bounty, onCancelled }: MobileCTAProps) {
   const { walletAddress, hasJoined, isPastDeadline, joinMutation, handleJoin } =
     useCompetitionJoinState(bounty);
 
+  const { mutateAsync: applyToBounty } = useApplyToBounty();
+
+  const handleApply = async (values: ApplicationFormValues) => {
+    if (!walletAddress) return;
+    await applyToBounty({
+      bountyId: bounty.id,
+      applicantAddress: walletAddress,
+      proposal: JSON.stringify(values),
+    });
+  };
+
   const label = () => {
     if (!canAct) {
       switch (bounty.status) {
@@ -436,6 +477,32 @@ export function MobileCTA({ bounty, onCancelled }: MobileCTAProps) {
               ? "Join Competition"
               : label()}
         </Button>
+      ) : bounty.type === "MILESTONE_BASED" && canAct && !isCreator ? (
+        <div className="flex gap-2">
+          <ApplicationDialog
+            bountyTitle={bounty.title}
+            onApply={handleApply}
+            trigger={
+              <Button
+                className="flex-1 h-11 font-bold tracking-wide"
+                size="lg"
+                disabled={!walletAddress}
+              >
+                Apply for Bounty
+              </Button>
+            }
+          />
+          {canCancel && (
+            <Button
+              variant="outline"
+              size="lg"
+              className="h-11 border-red-500/30 text-red-400 hover:bg-red-500/10 shrink-0"
+              onClick={() => setCancelDialogOpen(true)}
+            >
+              <XCircle className="size-4" />
+            </Button>
+          )}
+        </div>
       ) : (
         <div className="flex gap-2">
           <Button