Skip to content

fix: #401 use (SOL) notation to prevent USD/coin amount confusion #402

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
nxz1026 wants to merge 2 commits into from
Closed

fix: #401 use (SOL) notation to prevent USD/coin amount confusion #402

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
0a23310
fix: #401 use (~SOL) notation to prevent USD/coin amount confusion
Jun 4, 2026
37d1468
fix: apply DeepSeek review suggestions — space before coin note, remo…
Jun 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 13 additions & 0 deletions src/components/gigs/GigCard.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)

@greptile-apps greptile-apps Bot Jun 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 The inline comment says (SOL) not (~SOL) but the code comments in GigCard.tsx state the opposite — that ~ prefix is used. With the stale ~ comment removed from the source, the test comment should simply describe the expected format clearly.

Suggested change
// Should show "$1.00 USD (SOL)" not "$1.00 USD (paid in SOL)" — (SOL) not (~SOL)
// Should show "$1.00 USD (SOL)" not "$1.00 USD (paid in SOL)"

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

expect(screen.getByText(/\$1\.00 USD \(SOL\)/)).toBeInTheDocument();

Check failure on line 266 in src/components/gigs/GigCard.test.tsx

View workflow job for this annotation

GitHub Actions / test

src/components/gigs/GigCard.test.tsx > GigCard > displays ~coin notation when payment_coin is set so USD value is not mistaken for coin amount 

TestingLibraryElementError: Unable to find an element with the text: /\$1\.00 USD \(SOL\)/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      data-href="/gigs/gig-1"
      role="link"
    >
      <div
        class="flex items-start justify-between gap-4"
      >
        <div
          class="flex-1 min-w-0"
        >
          <h3
            class="font-semibold text-lg truncate"
          >
            Build a React App
          </h3>
          <p
            class="text-muted-foreground text-sm mt-1 line-clamp-2 whitespace-pre-wrap break-words"
          >
            We need a skilled React developer to build our frontend.
          </p>
        </div>
        <div
          class="flex items-center gap-2 flex-shrink-0"
        >
          <button
            class="inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:text-primary hover:bg-muted transition-colors "
            title="Copy shareable link"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="lucide lucide-link h-3.5 w-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
              />
              <path
                d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
              />
            </svg>
          </button>
          <div
            class="flex flex-col items-center gap-1"
          >
            <img
              alt="Jane Doe"
              class="h-10 w-10 rounded-full ring-2 ring-border object-cover"
              height="40"
              src="https://example.com/avatar.jpg"
              width="40"
            />
            <span
              class="text-xs text-muted-foreground truncate max-w-[80px]"
            >
              @
              janedoe
            </span>
          </div>
        </div>
      </div>
      <div
        class="flex flex-wrap gap-2 mt-4"
      >
        <div
          class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-primary/80 font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
        >
          Hiring
        </div>
        <div
          class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 font-medium"
        >
          Web Development
        </div>
        <div
          data-href="/gigs?skill=React"
          role="link"
        >
          <div
            class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground cursor-pointer hover:bg-primary/10"
          >
            React
          </div>
        </div>
        <div
          data-href="/gigs?skill=TypeScript"
          role="link"
        >
          <div
            class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground cursor-pointer hover:bg-primary/10"
          >
            TypeScript
          </div>
        </div>
        <div
          data-href="/gigs?skill=Tailwind"
          role="link"
        >
          <div
            class="inline-flex items-center rounded-f

Check failure on line 266 in src/components/gigs/GigCard.test.tsx

View workflow job for this annotation

GitHub Actions / build

src/components/gigs/GigCard.test.tsx > GigCard > displays ~coin notation when payment_coin is set so USD value is not mistaken for coin amount 

TestingLibraryElementError: Unable to find an element with the text: /\$1\.00 USD \(SOL\)/. This could be because the text is broken up by multiple elements. In this case, you can provide a function for your text matcher to make your matcher more flexible.

Ignored nodes: comments, script, style
<body>
  <div>
    <div
      data-href="/gigs/gig-1"
      role="link"
    >
      <div
        class="flex items-start justify-between gap-4"
      >
        <div
          class="flex-1 min-w-0"
        >
          <h3
            class="font-semibold text-lg truncate"
          >
            Build a React App
          </h3>
          <p
            class="text-muted-foreground text-sm mt-1 line-clamp-2 whitespace-pre-wrap break-words"
          >
            We need a skilled React developer to build our frontend.
          </p>
        </div>
        <div
          class="flex items-center gap-2 flex-shrink-0"
        >
          <button
            class="inline-flex items-center justify-center h-7 w-7 rounded-md text-muted-foreground hover:text-primary hover:bg-muted transition-colors "
            title="Copy shareable link"
            type="button"
          >
            <svg
              aria-hidden="true"
              class="lucide lucide-link h-3.5 w-3.5"
              fill="none"
              height="24"
              stroke="currentColor"
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              viewBox="0 0 24 24"
              width="24"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"
              />
              <path
                d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"
              />
            </svg>
          </button>
          <div
            class="flex flex-col items-center gap-1"
          >
            <img
              alt="Jane Doe"
              class="h-10 w-10 rounded-full ring-2 ring-border object-cover"
              height="40"
              src="https://example.com/avatar.jpg"
              width="40"
            />
            <span
              class="text-xs text-muted-foreground truncate max-w-[80px]"
            >
              @
              janedoe
            </span>
          </div>
        </div>
      </div>
      <div
        class="flex flex-wrap gap-2 mt-4"
      >
        <div
          class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent hover:bg-primary/80 font-medium bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200"
        >
          Hiring
        </div>
        <div
          class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80 font-medium"
        >
          Web Development
        </div>
        <div
          data-href="/gigs?skill=React"
          role="link"
        >
          <div
            class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground cursor-pointer hover:bg-primary/10"
          >
            React
          </div>
        </div>
        <div
          data-href="/gigs?skill=TypeScript"
          role="link"
        >
          <div
            class="inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-foreground cursor-pointer hover:bg-primary/10"
          >
            TypeScript
          </div>
        </div>
        <div
          data-href="/gigs?skill=Tailwind"
          role="link"
        >
          <div
            class="inline-flex items-center rounded-f
});
});
6 changes: 4 additions & 2 deletions src/components/gigs/GigCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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})` : "";
Comment on lines +63 to +65

@greptile-apps greptile-apps Bot Jun 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 The comment says the format uses a ~ prefix (e.g., "$1.00 USD (~SOL)"), but the code produces (SOL) without any tilde. The comment misleads future readers about the actual output format.

Suggested change
// 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})` : "";
// Append "(COIN)" so readers don't mistake the USD value for a coin amount
// e.g. "$1.00 USD (SOL)" not "$1.00 USD (paid in SOL)"
const coinNote = coin ? ` (${coin})` : "";

Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!


const fmt = (val: number) => {
if (isSats) return `${val.toLocaleString("en-US")} sats`;
Expand All @@ -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 : ""}`;

@greptile-apps greptile-apps Bot Jun 4, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P1 Double space in equal min/max branch

coinNote is already defined with a leading space ( (${coin})), so prepending " " + coinNote yields " (SOL)" — two spaces — for the min === max path. The rendered text becomes $1.00 USD (SOL) instead of $1.00 USD (SOL). The new test asserts the single-space pattern /\$1\.00 USD \(SOL\)/ and would fail with this implementation.

Suggested change
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";
Expand Down
Loading