From b8339ca0eff043fe2c5e0abeb60b445319ff9678 Mon Sep 17 00:00:00 2001
From: Moneypennie
 <62d0caca1ee9c3ce3a753262374b3b794f0e1196cfa8b1294b0affbc90130307@buzz.block.builderlab.xyz>
Date: Tue, 1 Sep 2026 18:57:00 -0400
Subject: [PATCH] feat(market): render listing imageUrl on contract card

The buzz-market/v0 listing gains an optional imageUrl. The channel
projection carries it into the scenario, and MarketContractCard renders
it in the left media square (relay URLs proxied via rewriteRelayUrl),
falling back to the existing placeholder icon.

Full desktop suite: 5,833 pass.

Signed-off-by: Moneypennie <62d0caca1ee9c3ce3a753262374b3b794f0e1196cfa8b1294b0affbc90130307@buzz.block.builderlab.xyz>
---
 desktop/src/features/market/lib/marketProtocol.ts  |  2 ++
 .../src/features/market/lib/marketPrototypeData.ts |  1 +
 .../src/features/market/ui/MarketContractCard.tsx  | 14 ++++++++++++--
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/desktop/src/features/market/lib/marketProtocol.ts b/desktop/src/features/market/lib/marketProtocol.ts
index a27f3c04df..9629cf43ef 100644
--- a/desktop/src/features/market/lib/marketProtocol.ts
+++ b/desktop/src/features/market/lib/marketProtocol.ts
@@ -36,6 +36,7 @@ const AnnouncementEnvelope = BaseEnvelope.extend({
     closesAt: PositiveInteger.optional(),
     deliveryMinutes: PositiveInteger.optional(),
     minimumDecrementSats: PositiveInteger.optional(),
+    imageUrl: z.string().url().max(500).optional(),
   }),
 });
 
@@ -522,6 +523,7 @@ export function projectMarketChannel(
       eyebrow: `${listing.listing.direction === "offer" ? "Offer" : "Request"} · ${listing.listing.mechanism.replace("-", " ")} · ${quantity === "unlimited" ? "unlimited" : "finite"}`,
       title: listing.listing.title,
       summary: listing.listing.summary,
+      imageUrl: listing.listing.imageUrl,
       direction:
         listing.listing.direction === "offer"
           ? `Buyer pays ${listingPrice(listing.listing)} · Seller delivers`
diff --git a/desktop/src/features/market/lib/marketPrototypeData.ts b/desktop/src/features/market/lib/marketPrototypeData.ts
index 8a4496ccc0..f0c772ca61 100644
--- a/desktop/src/features/market/lib/marketPrototypeData.ts
+++ b/desktop/src/features/market/lib/marketPrototypeData.ts
@@ -26,6 +26,7 @@ export type MarketScenario = {
   direction: string;
   eyebrow: string;
   id: MarketScenarioId;
+  imageUrl?: string;
   liveMetrics: MarketTerm[];
   mode: string;
   primaryAction: string;
diff --git a/desktop/src/features/market/ui/MarketContractCard.tsx b/desktop/src/features/market/ui/MarketContractCard.tsx
index d3da5555f3..47de0c54cd 100644
--- a/desktop/src/features/market/ui/MarketContractCard.tsx
+++ b/desktop/src/features/market/ui/MarketContractCard.tsx
@@ -1,6 +1,7 @@
 import { Bot, PackageCheck, Radio, Store } from "lucide-react";
 
 import type { MarketScenario } from "@/features/market/lib/marketPrototypeData";
+import { rewriteRelayUrl } from "@/shared/lib/mediaUrl";
 import { Badge } from "@/shared/ui/badge";
 
 const COMMERCIAL_TERM_LABELS = new Set(["Price", "Reward", "Initial quantity"]);
@@ -20,8 +21,17 @@ export function MarketContractCard({ scenario }: { scenario: MarketScenario }) {
       data-testid="market-contract-card"
     >
       <div className="grid sm:grid-cols-[11rem_minmax(0,1fr)]">
-        <div className="flex aspect-square items-center justify-center border-b bg-muted/60 text-muted-foreground sm:border-b-0 sm:border-r">
-          <PackageCheck className="h-8 w-8" strokeWidth={1.5} />
+        <div className="flex aspect-square items-center justify-center overflow-hidden border-b bg-muted/60 text-muted-foreground sm:border-b-0 sm:border-r">
+          {scenario.imageUrl ? (
+            <img
+              alt={scenario.title}
+              className="h-full w-full object-cover"
+              data-testid="market-contract-image"
+              src={rewriteRelayUrl(scenario.imageUrl)}
+            />
+          ) : (
+            <PackageCheck className="h-8 w-8" strokeWidth={1.5} />
+          )}
         </div>
         <div className="min-w-0 p-5">
           <div className="flex flex-wrap items-center gap-2">