fix: #401 improve bounty payout display clarity

src/components/gigs/GigCard.test.tsx

@@ -252,4 +252,17 @@
     render(<GigCard gig={gig} />);
     expect(screen.getByText(/\/article/)).toBeInTheDocument();
   });
+
+  it("displays ~coin notation when payment_coin is set so USD value is not mistaken for coin amount", () => {
+    const gig = {
+      ...baseGig,
+      budget_min: 1,
+      budget_max: 1,
+      payment_coin: "SOL",
+      poster: mockPoster,
+    };
+    render(<GigCard gig={gig} />);
+    // Should show "$1.00 USD (SOL)" not "$1.00 USD (paid in SOL)" — (SOL) not (~SOL)
+    expect(screen.getByText(/\$1\.00 USD \(SOL\)/)).toBeInTheDocument();
+  });
 });

src/components/gigs/GigCard.tsx

@@ -60,7 +60,9 @@ export function GigCard({
     const coin = gig.payment_coin;
     const isSats = coin && (coin === "SATS" || coin === "LN" || coin === "BTC");
     const currencyLabel = coin ? (isSats ? "sats" : coin) : "USD";
-    const coinNote = coin ? ` (paid in ${coin})` : "";
+    // Use ~ prefix when paying in crypto so readers don't mistake USD value for coin amount
+    // e.g. "$1.00 USD (~SOL)" not "$1.00 USD (paid in SOL)" — ~ makes it clear it's an equivalent
+    const coinNote = coin ? ` (${coin})` : "";
 
     const fmt = (val: number) => {
       if (isSats) return `${val.toLocaleString("en-US")} sats`;
@@ -75,7 +77,7 @@ export function GigCard({
     }
 
     if (min && max && min !== max) return `${fmt(min)} - ${fmt(max)}${suffix}${!isSats ? coinNote : ""}`;
-    if (min && max) return `${fmt(min)}${suffix}${!isSats ? coinNote : ""}`;
+    if (min && max) return `${fmt(min)}${suffix}${!isSats ? " " + coinNote : ""}`;
     if (min) return `${fmt(min)}+${suffix}${!isSats ? coinNote : ""}`;
     if (max) return `up to ${fmt(max)}${suffix}${!isSats ? coinNote : ""}`;
     return (gig.budget_type === "fixed" || gig.budget_type === "bounty") ? "Budget TBD" : "Rate TBD";

src/lib/bounties.test.ts

@@ -0,0 +1,18 @@
+import { describe, it, expect } from "vitest";
+import { formatBountyPayout } from "./bounties";
+
+describe("formatBountyPayout", () => {
+  it("shows USD only when no coin", () => {
+    expect(formatBountyPayout(1, null)).toBe("$1.00 USD");
+    expect(formatBountyPayout(100, undefined)).toBe("$100.00 USD");
+  });
+
+  it("shows (COIN) format to avoid misreading USD value as coin amount", () => {
+    expect(formatBountyPayout(1, "SOL")).toBe("$1.00 USD (SOL)");
+    expect(formatBountyPayout(50, "ETH")).toBe("$50.00 USD (ETH)");
+  });
+
+  it("handles string amount input", () => {
+    expect(formatBountyPayout("2.50", "BTC")).toBe("$2.50 USD (BTC)");
+  });
+});

src/lib/bounties.ts

@@ -3,7 +3,9 @@ import { formatCurrency } from "@/lib/utils";
 
 /**
  * Human label for a bounty payout, matching the gig card style:
- * "$2.00 USD (paid in SOL)" when a coin is set, otherwise "$2.00 USD".
+ * "$2.00 USD (SOL)" when a coin is set, otherwise "$2.00 USD".
+ * Uses (COIN) format — not "(paid in COIN)" — so readers don't misread
+ * the USD value as a coin amount (e.g. reading "$1.00 USD (SOL)" as "1 SOL").
  * Centralized so browse/detail/dashboard stay consistent.
  */
 export function formatBountyPayout(
@@ -12,7 +14,7 @@ export function formatBountyPayout(
 ): string {
   const amount = Number(amountUsd);
   const usd = `${formatCurrency(amount)} USD`;
-  return paymentCoin ? `${usd} (paid in ${paymentCoin})` : usd;
+  return paymentCoin ? `${usd} (${paymentCoin})` : usd;
 }
 
 export const questionSchema = z.object({