Add listing detail screen
This commit is contained in:
thesn10
207
app/src/app/listing/[id].tsx
Normal file
207
app/src/app/listing/[id].tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user