From 494ebdb104d627b883cdebfe47f5d61138658ebc Mon Sep 17 00:00:00 2001
From: thesn10 <38666407+thesn10@users.noreply.github.com>
Date: Thu, 2 Jul 2026 23:01:00 +0200
Subject: [PATCH] Add listing detail screen

---
 app/src/app/listing/[id].tsx | 207 +++++++++++++++++++++++++++++++++++
 1 file changed, 207 insertions(+)
 create mode 100644 app/src/app/listing/[id].tsx

diff --git a/app/src/app/listing/[id].tsx b/app/src/app/listing/[id].tsx
new file mode 100644
index 0000000..38515f7
--- /dev/null
+++ b/app/src/app/listing/[id].tsx
@@ -0,0 +1,207 @@
+import type { JSX } from "react";
+import type { ViewStyle } from "react-native";
+import { useMemo, useState } from "react";
+import { Platform, ScrollView, View } from "react-native";
+import { useLocalSearchParams } from "expo-router";
+import { Button, Chip, Separator, Typography, useToast } from "heroui-native";
+import type { Currency } from "@/data/mock";
+import { PRODUCTS, RESOLVERS } from "@/data/mock";
+import { availabilityInfo } from "@/lib/status";
+import { AppHeader } from "@/components/AppHeader";
+import { StatusChip } from "@/components/StatusChip";
+import { ResolverCard } from "@/components/ResolverCard";
+import { ListingCard } from "@/components/ListingCard";
+import { useModals } from "@/state/modals";
+
+// react-native-web supports CSS `position: sticky`, but React Native's own
+// ViewStyle type doesn't include it — cast is required to use it web-only.
+const stickyBoxStyle: ViewStyle | undefined =
+  Platform.OS === "web" ? ({ position: "sticky", top: 84 } as ViewStyle) : undefined;
+
+export default function ListingDetailScreen(): JSX.Element {
+  const { id } = useLocalSearchParams<{ id: string }>();
+  const { toast } = useToast();
+  const { requestBuy } = useModals();
+  const [resolverId, setResolverId] = useState(0);
+
+  const listing = useMemo(
+    () => PRODUCTS.find((product) => product.id === Number(id)) ?? PRODUCTS[0],
+    [id],
+  );
+  const [currency, setCurrency] = useState<Currency>(listing.cur);
+  const availability = availabilityInfo(listing.qty);
+  const isOut = listing.qty === 0;
+  const relatedProducts = PRODUCTS.filter((p) => p.id !== listing.id && p.qty > 0).slice(0, 6);
+
+  return (
+    <ScrollView className="flex-1 bg-background">
+      <AppHeader title={listing.name} />
+      <View className="gap-6 p-4 md:flex-row md:items-start md:gap-8 md:p-8">
+        <View className="flex-1 gap-5">
+          <View
+            className="h-52 items-center justify-center rounded-2xl md:h-80"
+            style={{ backgroundColor: listing.bg }}
+          >
+            <Typography className="text-6xl">{listing.emoji}</Typography>
+          </View>
+
+          <View className="gap-2">
+            <Typography type="h4">{listing.name}</Typography>
+            <Typography type="body-sm" color="muted">
+              {listing.desc}
+            </Typography>
+          </View>
+
+          <View className="flex-row items-center gap-3 rounded-xl border border-border bg-surface p-3.5">
+            <View className="flex-1">
+              <Typography type="body-sm" weight="semibold">
+                Verified on Solana
+              </Typography>
+              <Typography type="body-xs" color="muted">
+                {listing.seller}
+              </Typography>
+            </View>
+            <Button size="sm" variant="ghost" onPress={() => toast.show("Address copied!")}>
+              <Button.Label>Copy</Button.Label>
+            </Button>
+          </View>
+
+          <View className="gap-3 rounded-xl border border-border bg-surface p-3.5">
+            <Typography type="body-xs" color="muted">
+              About this listing
+            </Typography>
+            <View className="flex-row flex-wrap gap-y-3">
+              <View className="w-1/2">
+                <Typography type="body-xs" color="muted">
+                  Category
+                </Typography>
+                <Typography type="body-sm" weight="medium">
+                  {listing.cat}
+                </Typography>
+              </View>
+              <View className="w-1/2">
+                <Typography type="body-xs" color="muted">
+                  Available
+                </Typography>
+                <Typography type="body-sm" weight="medium">
+                  {listing.qty} units
+                </Typography>
+              </View>
+              <View className="w-1/2">
+                <Typography type="body-xs" color="muted">
+                  Currency
+                </Typography>
+                <Typography type="body-sm" weight="medium">
+                  {listing.cur}
+                </Typography>
+              </View>
+              <View className="w-1/2">
+                <Typography type="body-xs" color="muted">
+                  Listing ID
+                </Typography>
+                <Typography type="body-sm" color="muted">
+                  {`#${listing.id}${listing.id}${listing.id}${listing.id}`}
+                </Typography>
+              </View>
+            </View>
+          </View>
+
+          {relatedProducts.length > 0 && (
+            <View className="gap-3">
+              <Typography type="h6">Customers also bought</Typography>
+              <View className="flex-row flex-wrap">
+                {relatedProducts.map((product) => (
+                  <ListingCard key={product.id} product={product} variant="grid" />
+                ))}
+              </View>
+            </View>
+          )}
+        </View>
+
+        <View className="gap-4 rounded-2xl border border-border bg-surface p-4 md:w-80" style={stickyBoxStyle}>
+          <View>
+            <Typography type="h3">{listing.price}</Typography>
+            <Typography type="body-sm" color="muted">
+              ≈ {listing.usd} USD
+            </Typography>
+            <View className="mt-2 self-start">
+              <StatusChip label={availability.label} color={availability.color} />
+            </View>
+          </View>
+
+          <Separator />
+
+          {listing.alt.length > 0 && (
+            <>
+              <View className="gap-2">
+                <Typography type="body-xs" color="muted">
+                  Pay with
+                </Typography>
+                <View className="flex-row gap-2">
+                  <Chip
+                    variant={currency === listing.cur ? "primary" : "soft"}
+                    color={currency === listing.cur ? "accent" : "default"}
+                    onPress={() => setCurrency(listing.cur)}
+                  >
+                    <Chip.Label>{listing.cur}</Chip.Label>
+                  </Chip>
+                  <Chip
+                    variant={currency === listing.alt[0] ? "primary" : "soft"}
+                    color={currency === listing.alt[0] ? "accent" : "default"}
+                    onPress={() => setCurrency(listing.alt[0])}
+                  >
+                    <Chip.Label>{listing.alt[0]}</Chip.Label>
+                  </Chip>
+                </View>
+              </View>
+              <Separator />
+            </>
+          )}
+
+          <View className="gap-2">
+            <Typography type="body-xs" color="muted">
+              Dispute Protection
+            </Typography>
+            {RESOLVERS.map((resolver) => (
+              <ResolverCard
+                key={resolver.id}
+                resolver={resolver}
+                isSelected={resolver.id === resolverId}
+                onSelect={() => setResolverId(resolver.id)}
+              />
+            ))}
+            <Typography type="body-xs" color="muted">
+              Fee only charged if dispute is adjudicated.
+            </Typography>
+          </View>
+
+          <Separator />
+
+          <Button
+            isDisabled={isOut}
+            variant={isOut ? "secondary" : "primary"}
+            onPress={() => requestBuy(listing.id)}
+          >
+            <Button.Label>{isOut ? "Out of Stock" : "Buy Now →"}</Button.Label>
+          </Button>
+
+          <View className="flex-row flex-wrap gap-1.5">
+            <Chip size="sm" variant="soft" color="success">
+              <Chip.Label>✓ Final Payment</Chip.Label>
+            </Chip>
+            <Chip size="sm" variant="soft" color="default">
+              <Chip.Label>🛡 Dispute Cover</Chip.Label>
+            </Chip>
+            <Chip size="sm" variant="soft" color="default">
+              <Chip.Label>⬡ On-chain</Chip.Label>
+            </Chip>
+          </View>
+
+          <Typography type="body-xs" color="muted" align="center">
+            Funds held in secure escrow until you confirm receipt.
+          </Typography>
+        </View>
+      </View>
+    </ScrollView>
+  );
+}