From e4158c93d363fdc4b26ade4ba07f26f9c0bb8592 Mon Sep 17 00:00:00 2001
From: Miracle Nnaji <nnajimakuochukwu4@example.com>
Date: Tue, 24 Feb 2026 17:11:59 +0100
Subject: [PATCH 1/6] feat: add frontend hooks for submission mutations

- Create useSubmitToBounty, useReviewSubmission, useMarkSubmissionPaid hooks
- Hooks call corresponding backend mutations
- Invalidate bounty detail query on success
- Add submission query key factory in lib/query/query-keys.ts
- Wire hooks into bounty detail page UI
---
 .../bounty-detail/bounty-detail-client.tsx    |   2 +
 .../bounty-detail-submissions-card.tsx        | 371 ++++++++++++++++++
 hooks/use-bounty-detail.ts                    |   5 +-
 hooks/use-submission-mutations.ts             | 120 ++++++
 lib/query/query-keys.ts                       |  18 +
 5 files changed, 515 insertions(+), 1 deletion(-)
 create mode 100644 components/bounty-detail/bounty-detail-submissions-card.tsx
 create mode 100644 hooks/use-submission-mutations.ts

diff --git a/components/bounty-detail/bounty-detail-client.tsx b/components/bounty-detail/bounty-detail-client.tsx
index 235d8640..140c10c5 100644
--- a/components/bounty-detail/bounty-detail-client.tsx
+++ b/components/bounty-detail/bounty-detail-client.tsx
@@ -6,6 +6,7 @@ import { Button } from "@/components/ui/button";
 import { MobileCTA, SidebarCTA } from "./bounty-detail-sidebar-cta";
 import { HeaderCard } from "./bounty-detail-header-card";
 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";
 
@@ -69,6 +70,7 @@ export function BountyDetailClient({ bountyId }: { bountyId: string }) {
       <div className="flex-1 min-w-0 space-y-6">
         <HeaderCard bounty={bounty} />
         <DescriptionCard description={bounty.description} />
+        <BountyDetailSubmissionsCard bounty={bounty} />
       </div>
 
       {/* Sidebar */}
diff --git a/components/bounty-detail/bounty-detail-submissions-card.tsx b/components/bounty-detail/bounty-detail-submissions-card.tsx
new file mode 100644
index 00000000..756723f4
--- /dev/null
+++ b/components/bounty-detail/bounty-detail-submissions-card.tsx
@@ -0,0 +1,371 @@
+"use client";
+
+import { useState } from "react";
+import { Loader2, DollarSign } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Textarea } from "@/components/ui/textarea";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { BountySubmissionType } from "@/lib/graphql/generated";
+import {
+  useSubmitToBounty,
+  useReviewSubmission,
+  useMarkSubmissionPaid,
+} from "@/hooks/use-submission-mutations";
+import { authClient } from "@/lib/auth-client";
+
+interface BountyDetailSubmissionsCardProps {
+  bounty: {
+    id: string;
+    status: string;
+    organizationId: string;
+    submissions?: Array<BountySubmissionType> | null;
+  };
+}
+
+export function BountyDetailSubmissionsCard({
+  bounty,
+}: BountyDetailSubmissionsCardProps) {
+  const { data: session } = authClient.useSession();
+  const submissions = bounty.submissions || [];
+  const [submitDialogOpen, setSubmitDialogOpen] = useState(false);
+  const [reviewDialogOpen, setReviewDialogOpen] = useState(false);
+  const [selectedSubmission, setSelectedSubmission] =
+    useState<BountySubmissionType | null>(null);
+  const [prUrl, setPrUrl] = useState("");
+  const [comments, setComments] = useState("");
+  const [reviewStatus, setReviewStatus] = useState("APPROVED");
+  const [transactionHash, setTransactionHash] = useState("");
+
+  const submitToBounty = useSubmitToBounty();
+  const reviewSubmission = useReviewSubmission();
+  const markSubmissionPaid = useMarkSubmissionPaid();
+
+  const isOrgMember = session?.user?.id && bounty.organizationId; // Simplified check
+
+  const handleSubmitPR = async () => {
+    if (!prUrl.trim()) return;
+
+    await submitToBounty.mutateAsync({
+      bountyId: bounty.id,
+      githubPullRequestUrl: prUrl,
+      comments: comments.trim() || undefined,
+    });
+
+    setPrUrl("");
+    setComments("");
+    setSubmitDialogOpen(false);
+  };
+
+  const handleReviewSubmission = async () => {
+    if (!selectedSubmission) return;
+
+    await reviewSubmission.mutateAsync({
+      submissionId: selectedSubmission.id,
+      status: reviewStatus,
+      reviewComments: comments.trim() || undefined,
+    });
+
+    setReviewDialogOpen(false);
+    setSelectedSubmission(null);
+    setComments("");
+  };
+
+  const handleMarkPaid = async (submission: BountySubmissionType) => {
+    if (!transactionHash.trim()) return;
+
+    await markSubmissionPaid.mutateAsync({
+      submissionId: submission.id,
+      transactionHash: transactionHash.trim(),
+    });
+
+    setTransactionHash("");
+  };
+
+  const getStatusBadgeColor = (status: string) => {
+    switch (status) {
+      case "APPROVED":
+        return "bg-emerald-100 text-emerald-900";
+      case "REJECTED":
+        return "bg-red-100 text-red-900";
+      case "PENDING":
+      default:
+        return "bg-gray-100 text-gray-900";
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {/* Submit PR Section */}
+      {bounty.status === "OPEN" && (
+        <div className="p-5 rounded-xl border border-gray-800 bg-background-card backdrop-blur-xl shadow-sm space-y-4">
+          <h3 className="text-sm font-semibold text-gray-200">
+            Submit Your PR
+          </h3>
+          <Dialog open={submitDialogOpen} onOpenChange={setSubmitDialogOpen}>
+            <DialogTrigger asChild>
+              <Button className="w-full" variant="default">
+                Submit PR to Bounty
+              </Button>
+            </DialogTrigger>
+            <DialogContent className="sm:max-w-md">
+              <DialogHeader>
+                <DialogTitle>Submit Pull Request</DialogTitle>
+                <DialogDescription>
+                  Submit your GitHub pull request URL to claim this bounty.
+                </DialogDescription>
+              </DialogHeader>
+              <div className="space-y-4">
+                <div className="space-y-2">
+                  <Label htmlFor="pr-url">Pull Request URL</Label>
+                  <Input
+                    id="pr-url"
+                    placeholder="https://github.com/owner/repo/pull/123"
+                    value={prUrl}
+                    onChange={(e) => setPrUrl(e.target.value)}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <Label htmlFor="comments">Comments (Optional)</Label>
+                  <Textarea
+                    id="comments"
+                    placeholder="Add any additional context..."
+                    value={comments}
+                    onChange={(e) => setComments(e.target.value)}
+                    rows={3}
+                  />
+                </div>
+                <div className="flex gap-2 justify-end">
+                  <Button
+                    variant="outline"
+                    onClick={() => setSubmitDialogOpen(false)}
+                  >
+                    Cancel
+                  </Button>
+                  <Button
+                    onClick={handleSubmitPR}
+                    disabled={!prUrl.trim() || submitToBounty.isPending}
+                  >
+                    {submitToBounty.isPending && (
+                      <Loader2 className="mr-2 size-4 animate-spin" />
+                    )}
+                    Submit
+                  </Button>
+                </div>
+              </div>
+            </DialogContent>
+          </Dialog>
+        </div>
+      )}
+
+      {/* Submissions List */}
+      {submissions.length > 0 && (
+        <div className="p-5 rounded-xl border border-gray-800 bg-background-card backdrop-blur-xl shadow-sm space-y-4">
+          <h3 className="text-sm font-semibold text-gray-200">
+            Submissions ({submissions.length})
+          </h3>
+          <div className="space-y-3">
+            {submissions.map((submission: BountySubmissionType) => (
+              <div
+                key={submission.id}
+                className="p-3 rounded-lg border border-gray-700 bg-gray-900/30 space-y-2"
+              >
+                {/* Submitter Info */}
+                <div className="flex items-start justify-between">
+                  <div className="flex-1 space-y-1">
+                    <p className="text-sm font-medium text-gray-200">
+                      {submission.submittedByUser?.name ||
+                        submission.submittedBy}
+                    </p>
+                    {submission.githubPullRequestUrl && (
+                      <a
+                        href={submission.githubPullRequestUrl}
+                        target="_blank"
+                        rel="noopener noreferrer"
+                        className="text-xs text-primary hover:underline"
+                      >
+                        {submission.githubPullRequestUrl}
+                      </a>
+                    )}
+                  </div>
+                  <div
+                    className={`px-2 py-1 rounded text-xs font-medium ${getStatusBadgeColor(
+                      submission.status,
+                    )}`}
+                  >
+                    {submission.status}
+                  </div>
+                </div>
+
+                {/* Review Info */}
+                {submission.reviewedAt && (
+                  <div className="text-xs text-gray-400 space-y-1">
+                    <p>
+                      Reviewed by:{" "}
+                      {submission.reviewedByUser?.name || submission.reviewedBy}
+                    </p>
+                    {submission.reviewComments && (
+                      <p className="italic text-gray-500">
+                        &quot;{submission.reviewComments}&quot;
+                      </p>
+                    )}
+                  </div>
+                )}
+
+                {/* Payment Status */}
+                {submission.paidAt ? (
+                  <div className="flex items-center gap-2 text-xs text-emerald-400">
+                    <DollarSign className="size-3" />
+                    <span>
+                      Paid on {new Date(submission.paidAt).toLocaleDateString()}
+                    </span>
+                  </div>
+                ) : submission.status === "APPROVED" && isOrgMember ? (
+                  <div className="pt-2 border-t border-gray-700">
+                    <Dialog>
+                      <DialogTrigger asChild>
+                        <Button size="sm" variant="outline" className="w-full">
+                          Mark as Paid
+                        </Button>
+                      </DialogTrigger>
+                      <DialogContent className="sm:max-w-md">
+                        <DialogHeader>
+                          <DialogTitle>Mark Submission as Paid</DialogTitle>
+                          <DialogDescription>
+                            Enter the transaction hash for the payment.
+                          </DialogDescription>
+                        </DialogHeader>
+                        <div className="space-y-4">
+                          <div className="space-y-2">
+                            <Label htmlFor="tx-hash">Transaction Hash</Label>
+                            <Input
+                              id="tx-hash"
+                              placeholder="0x..."
+                              value={transactionHash}
+                              onChange={(e) =>
+                                setTransactionHash(e.target.value)
+                              }
+                            />
+                          </div>
+                          <div className="flex gap-2 justify-end">
+                            <Button variant="outline">Cancel</Button>
+                            <Button
+                              onClick={() => handleMarkPaid(submission)}
+                              disabled={
+                                !transactionHash.trim() ||
+                                markSubmissionPaid.isPending
+                              }
+                            >
+                              {markSubmissionPaid.isPending && (
+                                <Loader2 className="mr-2 size-4 animate-spin" />
+                              )}
+                              Mark as Paid
+                            </Button>
+                          </div>
+                        </div>
+                      </DialogContent>
+                    </Dialog>
+                  </div>
+                ) : null}
+
+                {/* Review Actions */}
+                {!submission.reviewedAt && isOrgMember && (
+                  <div className="pt-2 border-t border-gray-700">
+                    <Button
+                      size="sm"
+                      variant="outline"
+                      className="w-full"
+                      onClick={() => {
+                        setSelectedSubmission(submission);
+                        setReviewDialogOpen(true);
+                      }}
+                    >
+                      Review Submission
+                    </Button>
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+
+      {/* Review Submission Dialog */}
+      <Dialog open={reviewDialogOpen} onOpenChange={setReviewDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Review Submission</DialogTitle>
+            <DialogDescription>
+              Review the pull request and provide feedback.
+            </DialogDescription>
+          </DialogHeader>
+          {selectedSubmission && (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="status">Status</Label>
+                <select
+                  id="status"
+                  className="w-full px-3 py-2 rounded border border-gray-700 bg-gray-900 text-gray-200"
+                  value={reviewStatus}
+                  onChange={(e) => setReviewStatus(e.target.value)}
+                >
+                  <option value="PENDING">Pending</option>
+                  <option value="APPROVED">Approved</option>
+                  <option value="REJECTED">Rejected</option>
+                </select>
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="review-comments">Comments</Label>
+                <Textarea
+                  id="review-comments"
+                  placeholder="Add review feedback..."
+                  value={comments}
+                  onChange={(e) => setComments(e.target.value)}
+                  rows={3}
+                />
+              </div>
+              <div className="flex gap-2 justify-end">
+                <Button
+                  variant="outline"
+                  onClick={() => {
+                    setReviewDialogOpen(false);
+                    setSelectedSubmission(null);
+                    setComments("");
+                  }}
+                >
+                  Cancel
+                </Button>
+                <Button
+                  onClick={handleReviewSubmission}
+                  disabled={reviewSubmission.isPending}
+                >
+                  {reviewSubmission.isPending && (
+                    <Loader2 className="mr-2 size-4 animate-spin" />
+                  )}
+                  Submit Review
+                </Button>
+              </div>
+            </div>
+          )}
+        </DialogContent>
+      </Dialog>
+
+      {/* Empty State */}
+      {submissions.length === 0 && bounty.status === "OPEN" && (
+        <div className="p-8 rounded-xl border border-gray-800 bg-background-card backdrop-blur-xl shadow-sm text-center space-y-2">
+          <p className="text-sm text-gray-400">
+            No submissions yet. Be the first to submit!
+          </p>
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/hooks/use-bounty-detail.ts b/hooks/use-bounty-detail.ts
index 2087cd1d..01f9a2f8 100644
--- a/hooks/use-bounty-detail.ts
+++ b/hooks/use-bounty-detail.ts
@@ -1,5 +1,6 @@
 import {
   useBountyQuery,
+  type BountyQuery,
   type BountyFieldsFragment,
 } from "@/lib/graphql/generated";
 
@@ -8,6 +9,8 @@ export function useBountyDetail(id: string) {
 
   return {
     ...rest,
-    data: data?.bounty as BountyFieldsFragment | undefined,
+    data: data?.bounty as
+      | (BountyFieldsFragment & Partial<BountyQuery["bounty"]>)
+      | undefined,
   };
 }
diff --git a/hooks/use-submission-mutations.ts b/hooks/use-submission-mutations.ts
new file mode 100644
index 00000000..8a9128d9
--- /dev/null
+++ b/hooks/use-submission-mutations.ts
@@ -0,0 +1,120 @@
+import { useQueryClient, type MutateOptions } from "@tanstack/react-query";
+import {
+  useSubmitToBountyMutation,
+  useReviewSubmissionMutation,
+  useMarkSubmissionPaidMutation,
+  type CreateSubmissionInput,
+  type ReviewSubmissionInput,
+  type SubmitToBountyMutation,
+  type ReviewSubmissionMutation,
+  type MarkSubmissionPaidMutation,
+  type SubmitToBountyMutationVariables,
+  type ReviewSubmissionMutationVariables,
+  type MarkSubmissionPaidMutationVariables,
+} from "@/lib/graphql/generated";
+import { bountyKeys } from "@/lib/query/query-keys";
+
+export function useSubmitToBounty() {
+  const queryClient = useQueryClient();
+  const mutation = useSubmitToBountyMutation({
+    onSuccess: (data) => {
+      const bountyId = data.submitToBounty.bountyId;
+      queryClient.invalidateQueries({ queryKey: bountyKeys.detail(bountyId) });
+      queryClient.invalidateQueries({ queryKey: bountyKeys.lists() });
+    },
+  });
+
+  return {
+    ...mutation,
+    mutate: (
+      input: CreateSubmissionInput,
+      options?: MutateOptions<
+        SubmitToBountyMutation,
+        unknown,
+        SubmitToBountyMutationVariables,
+        unknown
+      >,
+    ) => mutation.mutate({ input }, options),
+    mutateAsync: (
+      input: CreateSubmissionInput,
+      options?: MutateOptions<
+        SubmitToBountyMutation,
+        unknown,
+        SubmitToBountyMutationVariables,
+        unknown
+      >,
+    ) => mutation.mutateAsync({ input }, options),
+  };
+}
+
+export function useReviewSubmission() {
+  const queryClient = useQueryClient();
+  const mutation = useReviewSubmissionMutation({
+    onSuccess: (data) => {
+      const bountyId = data.reviewSubmission.bountyId;
+      queryClient.invalidateQueries({ queryKey: bountyKeys.detail(bountyId) });
+      queryClient.invalidateQueries({ queryKey: bountyKeys.lists() });
+    },
+  });
+
+  return {
+    ...mutation,
+    mutate: (
+      input: ReviewSubmissionInput,
+      options?: MutateOptions<
+        ReviewSubmissionMutation,
+        unknown,
+        ReviewSubmissionMutationVariables,
+        unknown
+      >,
+    ) => mutation.mutate({ input }, options),
+    mutateAsync: (
+      input: ReviewSubmissionInput,
+      options?: MutateOptions<
+        ReviewSubmissionMutation,
+        unknown,
+        ReviewSubmissionMutationVariables,
+        unknown
+      >,
+    ) => mutation.mutateAsync({ input }, options),
+  };
+}
+
+export function useMarkSubmissionPaid() {
+  const queryClient = useQueryClient();
+  const mutation = useMarkSubmissionPaidMutation({
+    onSuccess: (data) => {
+      const bountyId = data.markSubmissionPaid.bountyId;
+      queryClient.invalidateQueries({ queryKey: bountyKeys.detail(bountyId) });
+      queryClient.invalidateQueries({ queryKey: bountyKeys.lists() });
+    },
+  });
+
+  return {
+    ...mutation,
+    mutate: (
+      {
+        submissionId,
+        transactionHash,
+      }: { submissionId: string; transactionHash: string },
+      options?: MutateOptions<
+        MarkSubmissionPaidMutation,
+        unknown,
+        MarkSubmissionPaidMutationVariables,
+        unknown
+      >,
+    ) => mutation.mutate({ submissionId, transactionHash }, options),
+    mutateAsync: (
+      {
+        submissionId,
+        transactionHash,
+      }: { submissionId: string; transactionHash: string },
+      options?: MutateOptions<
+        MarkSubmissionPaidMutation,
+        unknown,
+        MarkSubmissionPaidMutationVariables,
+        unknown
+      >,
+    ) => mutation.mutateAsync({ submissionId, transactionHash }, options),
+  };
+}
diff --git a/lib/query/query-keys.ts b/lib/query/query-keys.ts
index f9c76024..7c2566b7 100644
--- a/lib/query/query-keys.ts
+++ b/lib/query/query-keys.ts
@@ -19,6 +19,24 @@ export type BountyQueryKey =
   | ReturnType<typeof bountyKeys.infinite>
   | ReturnType<typeof bountyKeys.detail>;
 
+/**
+ * Query Key Factory for Submissions
+ */
+export const submissionKeys = {
+  all: ["Submissions"] as const,
+  lists: () => [...submissionKeys.all, "lists"] as const,
+  list: (bountyId: string) =>
+    [...submissionKeys.lists(), { bountyId }] as const,
+  detail: (id: string) => [...submissionKeys.all, "detail", id] as const,
+  byBounty: (bountyId: string) =>
+    [...submissionKeys.all, "byBounty", bountyId] as const,
+};
+
+export type SubmissionQueryKey =
+  | ReturnType<typeof submissionKeys.list>
+  | ReturnType<typeof submissionKeys.detail>
+  | ReturnType<typeof submissionKeys.byBounty>;
+
 /**
  * Query Key Factory for Authentication
  *

From 17030d9fe3a907f22a0c1a225ccd9f680184a40f Mon Sep 17 00:00:00 2001
From: Miracle Nnaji <nnajimakuochukwu4@example.com>
Date: Tue, 24 Feb 2026 19:25:19 +0100
Subject: [PATCH 2/6] corrected code according to review and added type to
 resolve typescript error

---
 .../bounty-detail-submissions-card.tsx        | 13 +++++++++++-
 types/shims.d.ts                              | 21 +++++++++++--------
 2 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/components/bounty-detail/bounty-detail-submissions-card.tsx b/components/bounty-detail/bounty-detail-submissions-card.tsx
index 756723f4..eae0b876 100644
--- a/components/bounty-detail/bounty-detail-submissions-card.tsx
+++ b/components/bounty-detail/bounty-detail-submissions-card.tsx
@@ -22,6 +22,14 @@ import {
 } from "@/hooks/use-submission-mutations";
 import { authClient } from "@/lib/auth-client";
 
+interface ExtendedUser {
+  id: string;
+  name?: string | null;
+  email?: string | null;
+  image?: string | null;
+  organizations?: string[];
+}
+
 interface BountyDetailSubmissionsCardProps {
   bounty: {
     id: string;
@@ -49,7 +57,10 @@ export function BountyDetailSubmissionsCard({
   const reviewSubmission = useReviewSubmission();
   const markSubmissionPaid = useMarkSubmissionPaid();
 
-  const isOrgMember = session?.user?.id && bounty.organizationId; // Simplified check
+  const isOrgMember =
+    (session?.user as ExtendedUser)?.organizations?.includes(
+      bounty.organizationId,
+    ) ?? false;
 
   const handleSubmitPR = async () => {
     if (!prUrl.trim()) return;
diff --git a/types/shims.d.ts b/types/shims.d.ts
index 3916dfe3..0f2538b9 100644
--- a/types/shims.d.ts
+++ b/types/shims.d.ts
@@ -1,24 +1,27 @@
 declare module "@tabler/icons-react" {
-  import * as React from 'react'
-  export const IconMenu2: React.FC<React.SVGProps<SVGSVGElement>>
-  export const IconX: React.FC<React.SVGProps<SVGSVGElement>>
+  import * as React from "react";
+  export const IconMenu2: React.FC<React.SVGProps<SVGSVGElement>>;
+  export const IconX: React.FC<React.SVGProps<SVGSVGElement>>;
 }
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 declare module "motion/react" {
-  import { RefObject } from 'react'
+  import { RefObject } from "react";
 
   // Relaxed typing for motion to avoid build-time type issues in environments
   // where `motion/react` types are not available. Using `any` here is a small
   // compromise to let the build proceed; we keep it local to this project.
-  export const motion: any
-  export const AnimatePresence: any
+  export const motion: any;
+  export const AnimatePresence: any;
 
-  export function useScroll(options?: { target?: RefObject<Element | null>; offset?: string[] }): { scrollY: { get(): number } }
+  export function useScroll(options?: {
+    target?: RefObject<Element | null>;
+    offset?: string[];
+  }): { scrollY: { get(): number } };
 
   export function useMotionValueEvent<T = number>(
     motionValue: { get(): T },
     eventName: string,
-    handler: (latest: T) => void
-  ): void
+    handler: (latest: T) => void,
+  ): void;
 }

From 53a0080a2462a1c0f358defdeef7f1f8081f199d Mon Sep 17 00:00:00 2001
From: Miracle Nnaji <nnajimakuochukwu4@example.com>
Date: Tue, 24 Feb 2026 19:54:29 +0100
Subject: [PATCH 3/6] corrected code according to review

---
 .../bounty-detail-submissions-card.tsx        | 177 ++++--------------
 1 file changed, 33 insertions(+), 144 deletions(-)

diff --git a/components/bounty-detail/bounty-detail-submissions-card.tsx b/components/bounty-detail/bounty-detail-submissions-card.tsx
index eae0b876..7e3ad232 100644
--- a/components/bounty-detail/bounty-detail-submissions-card.tsx
+++ b/components/bounty-detail/bounty-detail-submissions-card.tsx
@@ -113,9 +113,17 @@ export function BountyDetailSubmissionsCard({
     }
   };
 
+  const isSafeHttpUrl = (url: string) => {
+    try {
+      const parsed = new URL(url);
+      return parsed.protocol === "http:" || parsed.protocol === "https:";
+    } catch {
+      return false;
+    }
+  };
+
   return (
     <div className="space-y-6">
-      {/* Submit PR Section */}
       {bounty.status === "OPEN" && (
         <div className="p-5 rounded-xl border border-gray-800 bg-background-card backdrop-blur-xl shadow-sm space-y-4">
           <h3 className="text-sm font-semibold text-gray-200">
@@ -123,9 +131,7 @@ export function BountyDetailSubmissionsCard({
           </h3>
           <Dialog open={submitDialogOpen} onOpenChange={setSubmitDialogOpen}>
             <DialogTrigger asChild>
-              <Button className="w-full" variant="default">
-                Submit PR to Bounty
-              </Button>
+              <Button className="w-full">Submit PR to Bounty</Button>
             </DialogTrigger>
             <DialogContent className="sm:max-w-md">
               <DialogHeader>
@@ -134,6 +140,7 @@ export function BountyDetailSubmissionsCard({
                   Submit your GitHub pull request URL to claim this bounty.
                 </DialogDescription>
               </DialogHeader>
+
               <div className="space-y-4">
                 <div className="space-y-2">
                   <Label htmlFor="pr-url">Pull Request URL</Label>
@@ -144,6 +151,7 @@ export function BountyDetailSubmissionsCard({
                     onChange={(e) => setPrUrl(e.target.value)}
                   />
                 </div>
+
                 <div className="space-y-2">
                   <Label htmlFor="comments">Comments (Optional)</Label>
                   <Textarea
@@ -154,6 +162,7 @@ export function BountyDetailSubmissionsCard({
                     rows={3}
                   />
                 </div>
+
                 <div className="flex gap-2 justify-end">
                   <Button
                     variant="outline"
@@ -177,36 +186,42 @@ export function BountyDetailSubmissionsCard({
         </div>
       )}
 
-      {/* Submissions List */}
       {submissions.length > 0 && (
         <div className="p-5 rounded-xl border border-gray-800 bg-background-card backdrop-blur-xl shadow-sm space-y-4">
           <h3 className="text-sm font-semibold text-gray-200">
             Submissions ({submissions.length})
           </h3>
+
           <div className="space-y-3">
-            {submissions.map((submission: BountySubmissionType) => (
+            {submissions.map((submission) => (
               <div
                 key={submission.id}
                 className="p-3 rounded-lg border border-gray-700 bg-gray-900/30 space-y-2"
               >
-                {/* Submitter Info */}
                 <div className="flex items-start justify-between">
                   <div className="flex-1 space-y-1">
                     <p className="text-sm font-medium text-gray-200">
                       {submission.submittedByUser?.name ||
                         submission.submittedBy}
                     </p>
-                    {submission.githubPullRequestUrl && (
-                      <a
-                        href={submission.githubPullRequestUrl}
-                        target="_blank"
-                        rel="noopener noreferrer"
-                        className="text-xs text-primary hover:underline"
-                      >
-                        {submission.githubPullRequestUrl}
-                      </a>
-                    )}
+
+                    {submission.githubPullRequestUrl &&
+                      (isSafeHttpUrl(submission.githubPullRequestUrl) ? (
+                        <a
+                          href={submission.githubPullRequestUrl}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-xs text-primary hover:underline break-all"
+                        >
+                          {submission.githubPullRequestUrl}
+                        </a>
+                      ) : (
+                        <span className="text-xs text-gray-400 break-all">
+                          {submission.githubPullRequestUrl}
+                        </span>
+                      ))}
                   </div>
+
                   <div
                     className={`px-2 py-1 rounded text-xs font-medium ${getStatusBadgeColor(
                       submission.status,
@@ -216,7 +231,6 @@ export function BountyDetailSubmissionsCard({
                   </div>
                 </div>
 
-                {/* Review Info */}
                 {submission.reviewedAt && (
                   <div className="text-xs text-gray-400 space-y-1">
                     <p>
@@ -231,7 +245,6 @@ export function BountyDetailSubmissionsCard({
                   </div>
                 )}
 
-                {/* Payment Status */}
                 {submission.paidAt ? (
                   <div className="flex items-center gap-2 text-xs text-emerald-400">
                     <DollarSign className="size-3" />
@@ -239,139 +252,15 @@ export function BountyDetailSubmissionsCard({
                       Paid on {new Date(submission.paidAt).toLocaleDateString()}
                     </span>
                   </div>
-                ) : submission.status === "APPROVED" && isOrgMember ? (
-                  <div className="pt-2 border-t border-gray-700">
-                    <Dialog>
-                      <DialogTrigger asChild>
-                        <Button size="sm" variant="outline" className="w-full">
-                          Mark as Paid
-                        </Button>
-                      </DialogTrigger>
-                      <DialogContent className="sm:max-w-md">
-                        <DialogHeader>
-                          <DialogTitle>Mark Submission as Paid</DialogTitle>
-                          <DialogDescription>
-                            Enter the transaction hash for the payment.
-                          </DialogDescription>
-                        </DialogHeader>
-                        <div className="space-y-4">
-                          <div className="space-y-2">
-                            <Label htmlFor="tx-hash">Transaction Hash</Label>
-                            <Input
-                              id="tx-hash"
-                              placeholder="0x..."
-                              value={transactionHash}
-                              onChange={(e) =>
-                                setTransactionHash(e.target.value)
-                              }
-                            />
-                          </div>
-                          <div className="flex gap-2 justify-end">
-                            <Button variant="outline">Cancel</Button>
-                            <Button
-                              onClick={() => handleMarkPaid(submission)}
-                              disabled={
-                                !transactionHash.trim() ||
-                                markSubmissionPaid.isPending
-                              }
-                            >
-                              {markSubmissionPaid.isPending && (
-                                <Loader2 className="mr-2 size-4 animate-spin" />
-                              )}
-                              Mark as Paid
-                            </Button>
-                          </div>
-                        </div>
-                      </DialogContent>
-                    </Dialog>
-                  </div>
                 ) : null}
-
-                {/* Review Actions */}
-                {!submission.reviewedAt && isOrgMember && (
-                  <div className="pt-2 border-t border-gray-700">
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      className="w-full"
-                      onClick={() => {
-                        setSelectedSubmission(submission);
-                        setReviewDialogOpen(true);
-                      }}
-                    >
-                      Review Submission
-                    </Button>
-                  </div>
-                )}
               </div>
             ))}
           </div>
         </div>
       )}
 
-      {/* Review Submission Dialog */}
-      <Dialog open={reviewDialogOpen} onOpenChange={setReviewDialogOpen}>
-        <DialogContent className="sm:max-w-md">
-          <DialogHeader>
-            <DialogTitle>Review Submission</DialogTitle>
-            <DialogDescription>
-              Review the pull request and provide feedback.
-            </DialogDescription>
-          </DialogHeader>
-          {selectedSubmission && (
-            <div className="space-y-4">
-              <div className="space-y-2">
-                <Label htmlFor="status">Status</Label>
-                <select
-                  id="status"
-                  className="w-full px-3 py-2 rounded border border-gray-700 bg-gray-900 text-gray-200"
-                  value={reviewStatus}
-                  onChange={(e) => setReviewStatus(e.target.value)}
-                >
-                  <option value="PENDING">Pending</option>
-                  <option value="APPROVED">Approved</option>
-                  <option value="REJECTED">Rejected</option>
-                </select>
-              </div>
-              <div className="space-y-2">
-                <Label htmlFor="review-comments">Comments</Label>
-                <Textarea
-                  id="review-comments"
-                  placeholder="Add review feedback..."
-                  value={comments}
-                  onChange={(e) => setComments(e.target.value)}
-                  rows={3}
-                />
-              </div>
-              <div className="flex gap-2 justify-end">
-                <Button
-                  variant="outline"
-                  onClick={() => {
-                    setReviewDialogOpen(false);
-                    setSelectedSubmission(null);
-                    setComments("");
-                  }}
-                >
-                  Cancel
-                </Button>
-                <Button
-                  onClick={handleReviewSubmission}
-                  disabled={reviewSubmission.isPending}
-                >
-                  {reviewSubmission.isPending && (
-                    <Loader2 className="mr-2 size-4 animate-spin" />
-                  )}
-                  Submit Review
-                </Button>
-              </div>
-            </div>
-          )}
-        </DialogContent>
-      </Dialog>
-
-      {/* Empty State */}
       {submissions.length === 0 && bounty.status === "OPEN" && (
-        <div className="p-8 rounded-xl border border-gray-800 bg-background-card backdrop-blur-xl shadow-sm text-center space-y-2">
+        <div className="p-8 rounded-xl border border-gray-800 bg-background-card backdrop-blur-xl shadow-sm text-center">
           <p className="text-sm text-gray-400">
             No submissions yet. Be the first to submit!
           </p>

From c7743a0dca97cac7f1839283e430d844c5fe8ce5 Mon Sep 17 00:00:00 2001
From: Miracle Nnaji <nnajimakuochukwu4@example.com>
Date: Tue, 24 Feb 2026 20:04:24 +0100
Subject: [PATCH 4/6] corrected code according to review pt2

---
 .../bounty-detail-submissions-card.tsx        | 56 ++++++++++++++++---
 1 file changed, 47 insertions(+), 9 deletions(-)

diff --git a/components/bounty-detail/bounty-detail-submissions-card.tsx b/components/bounty-detail/bounty-detail-submissions-card.tsx
index 7e3ad232..651ade14 100644
--- a/components/bounty-detail/bounty-detail-submissions-card.tsx
+++ b/components/bounty-detail/bounty-detail-submissions-card.tsx
@@ -198,7 +198,8 @@ export function BountyDetailSubmissionsCard({
                 key={submission.id}
                 className="p-3 rounded-lg border border-gray-700 bg-gray-900/30 space-y-2"
               >
-                <div className="flex items-start justify-between">
+                {/* Header */}
+                <div className="flex items-start justify-between gap-3">
                   <div className="flex-1 space-y-1">
                     <p className="text-sm font-medium text-gray-200">
                       {submission.submittedByUser?.name ||
@@ -222,15 +223,51 @@ export function BountyDetailSubmissionsCard({
                       ))}
                   </div>
 
-                  <div
-                    className={`px-2 py-1 rounded text-xs font-medium ${getStatusBadgeColor(
-                      submission.status,
-                    )}`}
-                  >
-                    {submission.status}
+                  <div className="flex flex-col items-end gap-2">
+                    <div
+                      className={`px-2 py-1 rounded text-xs font-medium ${getStatusBadgeColor(
+                        submission.status,
+                      )}`}
+                    >
+                      {submission.status}
+                    </div>
+
+                    {/* Org-only Actions */}
+                    {isOrgMember && (
+                      <div className="flex gap-2">
+                        {!submission.reviewedAt && (
+                          <Button
+                            size="sm"
+                            variant="outline"
+                            onClick={() => {
+                              setSelectedSubmission(submission);
+                              setReviewDialogOpen(true);
+                            }}
+                          >
+                            Review
+                          </Button>
+                        )}
+
+                        {submission.status === "APPROVED" &&
+                          !submission.paidAt && (
+                            <Button
+                              size="sm"
+                              variant="outline"
+                              onClick={() => handleMarkPaid(submission)}
+                              disabled={markSubmissionPaid.isPending}
+                            >
+                              {markSubmissionPaid.isPending && (
+                                <Loader2 className="mr-2 size-3 animate-spin" />
+                              )}
+                              Mark Paid
+                            </Button>
+                          )}
+                      </div>
+                    )}
                   </div>
                 </div>
 
+                {/* Review Info */}
                 {submission.reviewedAt && (
                   <div className="text-xs text-gray-400 space-y-1">
                     <p>
@@ -245,14 +282,15 @@ export function BountyDetailSubmissionsCard({
                   </div>
                 )}
 
-                {submission.paidAt ? (
+                {/* Payment Info */}
+                {submission.paidAt && (
                   <div className="flex items-center gap-2 text-xs text-emerald-400">
                     <DollarSign className="size-3" />
                     <span>
                       Paid on {new Date(submission.paidAt).toLocaleDateString()}
                     </span>
                   </div>
-                ) : null}
+                )}
               </div>
             ))}
           </div>

From b23e89ded985a6e33938434f86c219ef0be3030e Mon Sep 17 00:00:00 2001
From: Miracle Nnaji <nnajimakuochukwu4@example.com>
Date: Tue, 24 Feb 2026 20:15:57 +0100
Subject: [PATCH 5/6] corrected code according to review pt3

---
 .../bounty-detail-submissions-card.tsx        | 126 ++++++++++++------
 1 file changed, 86 insertions(+), 40 deletions(-)

diff --git a/components/bounty-detail/bounty-detail-submissions-card.tsx b/components/bounty-detail/bounty-detail-submissions-card.tsx
index 651ade14..9226ec9e 100644
--- a/components/bounty-detail/bounty-detail-submissions-card.tsx
+++ b/components/bounty-detail/bounty-detail-submissions-card.tsx
@@ -44,10 +44,16 @@ export function BountyDetailSubmissionsCard({
 }: BountyDetailSubmissionsCardProps) {
   const { data: session } = authClient.useSession();
   const submissions = bounty.submissions || [];
+
   const [submitDialogOpen, setSubmitDialogOpen] = useState(false);
   const [reviewDialogOpen, setReviewDialogOpen] = useState(false);
+  const [markPaidDialogOpen, setMarkPaidDialogOpen] = useState(false);
+
   const [selectedSubmission, setSelectedSubmission] =
     useState<BountySubmissionType | null>(null);
+  const [selectedPaidSubmission, setSelectedPaidSubmission] =
+    useState<BountySubmissionType | null>(null);
+
   const [prUrl, setPrUrl] = useState("");
   const [comments, setComments] = useState("");
   const [reviewStatus, setReviewStatus] = useState("APPROVED");
@@ -99,6 +105,8 @@ export function BountyDetailSubmissionsCard({
     });
 
     setTransactionHash("");
+    setSelectedPaidSubmission(null);
+    setMarkPaidDialogOpen(false);
   };
 
   const getStatusBadgeColor = (status: string) => {
@@ -124,11 +132,13 @@ export function BountyDetailSubmissionsCard({
 
   return (
     <div className="space-y-6">
+      {/* Submit PR Section */}
       {bounty.status === "OPEN" && (
-        <div className="p-5 rounded-xl border border-gray-800 bg-background-card backdrop-blur-xl shadow-sm space-y-4">
+        <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">
             Submit Your PR
           </h3>
+
           <Dialog open={submitDialogOpen} onOpenChange={setSubmitDialogOpen}>
             <DialogTrigger asChild>
               <Button className="w-full">Submit PR to Bounty</Button>
@@ -137,7 +147,7 @@ export function BountyDetailSubmissionsCard({
               <DialogHeader>
                 <DialogTitle>Submit Pull Request</DialogTitle>
                 <DialogDescription>
-                  Submit your GitHub pull request URL to claim this bounty.
+                  Submit your GitHub pull request URL.
                 </DialogDescription>
               </DialogHeader>
 
@@ -146,20 +156,17 @@ export function BountyDetailSubmissionsCard({
                   <Label htmlFor="pr-url">Pull Request URL</Label>
                   <Input
                     id="pr-url"
-                    placeholder="https://github.com/owner/repo/pull/123"
                     value={prUrl}
                     onChange={(e) => setPrUrl(e.target.value)}
                   />
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="comments">Comments (Optional)</Label>
+                  <Label htmlFor="comments">Comments</Label>
                   <Textarea
                     id="comments"
-                    placeholder="Add any additional context..."
                     value={comments}
                     onChange={(e) => setComments(e.target.value)}
-                    rows={3}
                   />
                 </div>
 
@@ -186,8 +193,9 @@ export function BountyDetailSubmissionsCard({
         </div>
       )}
 
+      {/* Submissions */}
       {submissions.length > 0 && (
-        <div className="p-5 rounded-xl border border-gray-800 bg-background-card backdrop-blur-xl shadow-sm space-y-4">
+        <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">
             Submissions ({submissions.length})
           </h3>
@@ -198,7 +206,6 @@ export function BountyDetailSubmissionsCard({
                 key={submission.id}
                 className="p-3 rounded-lg border border-gray-700 bg-gray-900/30 space-y-2"
               >
-                {/* Header */}
                 <div className="flex items-start justify-between gap-3">
                   <div className="flex-1 space-y-1">
                     <p className="text-sm font-medium text-gray-200">
@@ -232,7 +239,6 @@ export function BountyDetailSubmissionsCard({
                       {submission.status}
                     </div>
 
-                    {/* Org-only Actions */}
                     {isOrgMember && (
                       <div className="flex gap-2">
                         {!submission.reviewedAt && (
@@ -253,12 +259,11 @@ export function BountyDetailSubmissionsCard({
                             <Button
                               size="sm"
                               variant="outline"
-                              onClick={() => handleMarkPaid(submission)}
-                              disabled={markSubmissionPaid.isPending}
+                              onClick={() => {
+                                setSelectedPaidSubmission(submission);
+                                setMarkPaidDialogOpen(true);
+                              }}
                             >
-                              {markSubmissionPaid.isPending && (
-                                <Loader2 className="mr-2 size-3 animate-spin" />
-                              )}
                               Mark Paid
                             </Button>
                           )}
@@ -267,28 +272,10 @@ export function BountyDetailSubmissionsCard({
                   </div>
                 </div>
 
-                {/* Review Info */}
-                {submission.reviewedAt && (
-                  <div className="text-xs text-gray-400 space-y-1">
-                    <p>
-                      Reviewed by:{" "}
-                      {submission.reviewedByUser?.name || submission.reviewedBy}
-                    </p>
-                    {submission.reviewComments && (
-                      <p className="italic text-gray-500">
-                        &quot;{submission.reviewComments}&quot;
-                      </p>
-                    )}
-                  </div>
-                )}
-
-                {/* Payment Info */}
                 {submission.paidAt && (
                   <div className="flex items-center gap-2 text-xs text-emerald-400">
                     <DollarSign className="size-3" />
-                    <span>
-                      Paid on {new Date(submission.paidAt).toLocaleDateString()}
-                    </span>
+                    Paid on {new Date(submission.paidAt).toLocaleDateString()}
                   </div>
                 )}
               </div>
@@ -297,13 +284,72 @@ export function BountyDetailSubmissionsCard({
         </div>
       )}
 
-      {submissions.length === 0 && bounty.status === "OPEN" && (
-        <div className="p-8 rounded-xl border border-gray-800 bg-background-card backdrop-blur-xl shadow-sm text-center">
-          <p className="text-sm text-gray-400">
-            No submissions yet. Be the first to submit!
-          </p>
-        </div>
-      )}
+      {/* Review Dialog */}
+      <Dialog open={reviewDialogOpen} onOpenChange={setReviewDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Review Submission</DialogTitle>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <Textarea
+              placeholder="Add review feedback..."
+              value={comments}
+              onChange={(e) => setComments(e.target.value)}
+            />
+
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="outline"
+                onClick={() => setReviewDialogOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button onClick={handleReviewSubmission}>Submit Review</Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      {/* Mark Paid Dialog */}
+      <Dialog open={markPaidDialogOpen} onOpenChange={setMarkPaidDialogOpen}>
+        <DialogContent className="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle>Mark Submission as Paid</DialogTitle>
+            <DialogDescription>Enter the transaction hash.</DialogDescription>
+          </DialogHeader>
+
+          <div className="space-y-4">
+            <Input
+              value={transactionHash}
+              onChange={(e) => setTransactionHash(e.target.value)}
+            />
+
+            <div className="flex justify-end gap-2">
+              <Button
+                variant="outline"
+                onClick={() => setMarkPaidDialogOpen(false)}
+              >
+                Cancel
+              </Button>
+              <Button
+                onClick={() =>
+                  selectedPaidSubmission &&
+                  handleMarkPaid(selectedPaidSubmission)
+                }
+                disabled={
+                  !transactionHash.trim() || markSubmissionPaid.isPending
+                }
+              >
+                {markSubmissionPaid.isPending && (
+                  <Loader2 className="mr-2 size-4 animate-spin" />
+                )}
+                Confirm
+              </Button>
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
   );
 }

From 5b5fd322ebdc43e984a8e93088ea5f7ae71a63bf Mon Sep 17 00:00:00 2001
From: Collins Ikechukwu <collinschristroa@gmail.com>
Date: Wed, 25 Feb 2026 05:52:55 +0100
Subject: [PATCH 6/6] refactor: separate submit and review comments state
 management in BountyDetailSubmissionsCard

---
 .../bounty-detail-submissions-card.tsx        | 85 +++++++++++--------
 1 file changed, 49 insertions(+), 36 deletions(-)

diff --git a/components/bounty-detail/bounty-detail-submissions-card.tsx b/components/bounty-detail/bounty-detail-submissions-card.tsx
index 9226ec9e..40f95a45 100644
--- a/components/bounty-detail/bounty-detail-submissions-card.tsx
+++ b/components/bounty-detail/bounty-detail-submissions-card.tsx
@@ -55,7 +55,8 @@ export function BountyDetailSubmissionsCard({
     useState<BountySubmissionType | null>(null);
 
   const [prUrl, setPrUrl] = useState("");
-  const [comments, setComments] = useState("");
+    const [submitComments, setSubmitComments] = useState("");
+    const [reviewComments, setReviewComments] = useState("");
   const [reviewStatus, setReviewStatus] = useState("APPROVED");
   const [transactionHash, setTransactionHash] = useState("");
 
@@ -70,43 +71,55 @@ export function BountyDetailSubmissionsCard({
 
   const handleSubmitPR = async () => {
     if (!prUrl.trim()) return;
-
-    await submitToBounty.mutateAsync({
-      bountyId: bounty.id,
-      githubPullRequestUrl: prUrl,
-      comments: comments.trim() || undefined,
-    });
-
-    setPrUrl("");
-    setComments("");
-    setSubmitDialogOpen(false);
+    try {
+      await submitToBounty.mutateAsync({
+        bountyId: bounty.id,
+        githubPullRequestUrl: prUrl,
+        comments: submitComments.trim() || undefined,
+      });
+    } catch (err) {
+      // Replace with toast or error UI as needed
+      console.error("Submit PR failed:", err);
+    } finally {
+      setPrUrl("");
+      setSubmitComments("");
+      setSubmitDialogOpen(false);
+    }
   };
 
   const handleReviewSubmission = async () => {
     if (!selectedSubmission) return;
-
-    await reviewSubmission.mutateAsync({
-      submissionId: selectedSubmission.id,
-      status: reviewStatus,
-      reviewComments: comments.trim() || undefined,
-    });
-
-    setReviewDialogOpen(false);
-    setSelectedSubmission(null);
-    setComments("");
+    try {
+      await reviewSubmission.mutateAsync({
+        submissionId: selectedSubmission.id,
+        status: reviewStatus,
+        reviewComments: reviewComments.trim() || undefined,
+      });
+    } catch (err) {
+      // Replace with toast or error UI as needed
+      console.error("Review submission failed:", err);
+    } finally {
+      setReviewDialogOpen(false);
+      setSelectedSubmission(null);
+      setReviewComments("");
+    }
   };
 
   const handleMarkPaid = async (submission: BountySubmissionType) => {
     if (!transactionHash.trim()) return;
-
-    await markSubmissionPaid.mutateAsync({
-      submissionId: submission.id,
-      transactionHash: transactionHash.trim(),
-    });
-
-    setTransactionHash("");
-    setSelectedPaidSubmission(null);
-    setMarkPaidDialogOpen(false);
+    try {
+      await markSubmissionPaid.mutateAsync({
+        submissionId: submission.id,
+        transactionHash: transactionHash.trim(),
+      });
+    } catch (err) {
+      // Replace with toast or error UI as needed
+      console.error("Mark paid failed:", err);
+    } finally {
+      setTransactionHash("");
+      setSelectedPaidSubmission(null);
+      setMarkPaidDialogOpen(false);
+    }
   };
 
   const getStatusBadgeColor = (status: string) => {
@@ -162,11 +175,11 @@ export function BountyDetailSubmissionsCard({
                 </div>
 
                 <div className="space-y-2">
-                  <Label htmlFor="comments">Comments</Label>
+                  <Label htmlFor="submit-comments">Comments</Label>
                   <Textarea
-                    id="comments"
-                    value={comments}
-                    onChange={(e) => setComments(e.target.value)}
+                    id="submit-comments"
+                    value={submitComments}
+                    onChange={(e) => setSubmitComments(e.target.value)}
                   />
                 </div>
 
@@ -294,8 +307,8 @@ export function BountyDetailSubmissionsCard({
           <div className="space-y-4">
             <Textarea
               placeholder="Add review feedback..."
-              value={comments}
-              onChange={(e) => setComments(e.target.value)}
+              value={reviewComments}
+              onChange={(e) => setReviewComments(e.target.value)}
             />
 
             <div className="flex justify-end gap-2">