diff --git a/desktop/src/features/market/ui/MarketScreen.tsx b/desktop/src/features/market/ui/MarketScreen.tsx
index 5fa22e46bc..8536d5d347 100644
--- a/desktop/src/features/market/ui/MarketScreen.tsx
+++ b/desktop/src/features/market/ui/MarketScreen.tsx
@@ -5,6 +5,7 @@ import {
Radio,
Store,
TriangleAlert,
+ WalletCards,
} from "lucide-react";
import * as React from "react";
@@ -37,6 +38,37 @@ const REPRESENTING_AGENTS = [
{ name: "Sentinel", role: "Operations & safety" },
] as const;
+const WALLET_DETAILS: Record<
+ MarketScenarioId,
+ { account: string; balance: string; settlement: string }
+> = {
+ finite: {
+ account: "escrow1report…13c8",
+ balance: "150 sats funded",
+ settlement: "1 paid · 2 reserved",
+ },
+ unlimited: {
+ account: "wallet1mapper…c241",
+ balance: "80 sats escrowed",
+ settlement: "760 sats paid",
+ },
+ auction: {
+ account: "escrow1strings…9f10",
+ balance: "600 sats funded",
+ settlement: "Held until award",
+ },
+ tender: {
+ account: "escrow1tender…1b73",
+ balance: "2,000 sats funded",
+ settlement: "Held during selection",
+ },
+ awarded: {
+ account: "escrow1tender…1b73",
+ balance: "1,750 sats escrowed",
+ settlement: "Release on signed receipt",
+ },
+};
+
const COMMERCIAL_TERM_LABELS = new Set([
"Price",
"Initial quantity",
@@ -96,10 +128,11 @@ export function MarketScreen({ scenarioId }: { scenarioId: MarketScenarioId }) {
/>
-
+
setCreateOpen(true)}
scenario={scenario}
+ scenarioId={scenarioId}
/>
@@ -161,9 +194,11 @@ export function MarketScreen({ scenarioId }: { scenarioId: MarketScenarioId }) {
function OfferCard({
onCreate,
scenario,
+ scenarioId,
}: {
onCreate: () => void;
scenario: MarketScenario;
+ scenarioId: MarketScenarioId;
}) {
const author =
scenario.terms.find(
@@ -181,8 +216,11 @@ function OfferCard({
className="overflow-hidden rounded-2xl border bg-card"
data-testid="market-offer-card"
>
-
-
+
+
Product image
@@ -228,11 +266,47 @@ function OfferCard({
+
);
}
+function AgentWallet({ scenarioId }: { scenarioId: MarketScenarioId }) {
+ const wallet = WALLET_DETAILS[scenarioId];
+ return (
+
+ );
+}
+
+function WalletValue({ label, value }: { label: string; value: string }) {
+ return (
+
+
{label}
+ {value}
+
+ );
+}
+
function CreateMarketDialog({
onOpenChange,
open,
diff --git a/desktop/tests/e2e/market-prototype-screenshots.spec.ts b/desktop/tests/e2e/market-prototype-screenshots.spec.ts
index e6fb2bd86c..1d0ce05b80 100644
--- a/desktop/tests/e2e/market-prototype-screenshots.spec.ts
+++ b/desktop/tests/e2e/market-prototype-screenshots.spec.ts
@@ -46,6 +46,21 @@ test.describe("market channel prototype", () => {
: "Design a relay abuse-response playbook",
);
await expect(market.getByTestId("market-offer-card")).toBeVisible();
+ const offerCardWidth = await market
+ .getByTestId("market-offer-card")
+ .evaluate((element) => element.getBoundingClientRect().width);
+ expect(offerCardWidth).toBeGreaterThan(1100);
+ const imageAspectRatio = await market
+ .getByTestId("market-product-image")
+ .evaluate((element) => {
+ const bounds = element.getBoundingClientRect();
+ return bounds.width / bounds.height;
+ });
+ expect(imageAspectRatio).toBeCloseTo(1, 1);
+ await expect(market.getByTestId("market-agent-wallet")).toBeVisible();
+ await expect(
+ market.getByText("Agent wallet", { exact: true }),
+ ).toBeVisible();
await expect(market.getByText("Agent market channel")).toBeVisible();
await expect(market.getByTestId("market-agent-avatar")).toHaveCount(
scenario === "unlimited" ? 3 : 4,