thesn/volana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Redesign listing detail

Browse Source
This commit is contained in:
thesn10
2026-07-03 13:05:39 +02:00
parent a08e4943fc
commit cf89864444
1 changed files with 85 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
app/src/app/listing/[id].tsx
View File

@@ -1,28 +1,60 @@
import type { JSX } from "react";
import type { ViewStyle } from "react-native";
import { useMemo, useState } from "react";
import { Platform, ScrollView, View } from "react-native";
import { Platform, ScrollView, StyleSheet, View, useWindowDimensions } from "react-native";
import { useLocalSearchParams } from "expo-router";
import { Button, Chip, Separator, Typography, useToast } from "heroui-native";
import { Button, Chip, Separator, Typography, useThemeColor, useToast } from "heroui-native";
import { Ionicons } from "@expo/vector-icons";
import Svg, { Defs, LinearGradient, RadialGradient, Rect, Stop } from "react-native-svg";
import type { Currency } from "@/data/mock";
import { PRODUCTS, RESOLVERS } from "@/data/mock";
import { availabilityInfo } from "@/lib/status";
import { MICRO_LABEL_CLASS } from "@/lib/typography";
import { AppHeader } from "@/components/AppHeader";
import { StatusChip } from "@/components/StatusChip";
import { ResolverCard } from "@/components/ResolverCard";
import { ListingCard } from "@/components/ListingCard";
import { MonoText } from "@/components/MonoText";
import { PageContainer } from "@/components/PageContainer";
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;
const STICKY_BREAKPOINT = 1024;
function HeroGradientOverlay({ gradientId }: { gradientId: string }): JSX.Element {
const highlightId = `${gradientId}-highlight`;
const fadeId = `${gradientId}-fade`;
return (
<Svg style={StyleSheet.absoluteFill} width="100%" height="100%" pointerEvents="none">
<Defs>
<RadialGradient id={highlightId} cx="35%" cy="30%" r="60%">
<Stop offset="0%" stopColor="#ffffff" stopOpacity={0.08} />
<Stop offset="100%" stopColor="#ffffff" stopOpacity={0} />
</RadialGradient>
<LinearGradient id={fadeId} x1="0" y1="0" x2="0" y2="1">
<Stop offset="78%" stopColor="#000000" stopOpacity={0} />
<Stop offset="100%" stopColor="#000000" stopOpacity={0.3} />
</LinearGradient>
</Defs>
<Rect width="100%" height="100%" fill={`url(#${highlightId})`} />
<Rect width="100%" height="100%" fill={`url(#${fadeId})`} />
</Svg>
);
}
export default function ListingDetailScreen(): JSX.Element {
const { id } = useLocalSearchParams<{ id: string }>();
const { toast } = useToast();
const { requestBuy } = useModals();
const [resolverId, setResolverId] = useState(0);
const { width } = useWindowDimensions();
const accentColor = useThemeColor("accent");
// 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" && width >= STICKY_BREAKPOINT
? ({ position: "sticky", top: 92 } as ViewStyle)
: undefined;
const listing = useMemo(
() => PRODUCTS.find((product) => product.id === Number(id)) ?? PRODUCTS[0],
@@ -36,30 +68,36 @@ export default function ListingDetailScreen(): JSX.Element {
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">
<PageContainer className="gap-6 py-4 lg:flex-row lg:items-start lg:gap-8 lg:py-10">
<View className="flex-1 gap-6 lg:gap-10">
<View
className="h-52 items-center justify-center rounded-2xl md:h-80"
className="aspect-[8/5] w-full items-center justify-center overflow-hidden rounded-2xl lg:aspect-[12/5]"
style={{ backgroundColor: listing.bg }}
>
<Typography className="text-6xl">{listing.emoji}</Typography>
<HeroGradientOverlay gradientId={`hero-${listing.id}`} />
<Typography className="text-[96px] lg:text-[160px]">{listing.emoji}</Typography>
</View>
<View className="gap-2">
<Typography type="h4">{listing.name}</Typography>
<Typography type="body-sm" color="muted">
<Typography type="h4" weight="bold" className="text-2xl leading-tight lg:text-[38px]">
{listing.name}
</Typography>
<Typography type="body-sm" color="muted" className="text-[15px] lg:text-[17px]">
{listing.desc}
</Typography>
</View>
<View className="flex-row items-center gap-3 rounded-xl border border-border bg-surface p-3.5">
<View className="size-9 items-center justify-center rounded-full bg-accent-soft">
<Ionicons name="checkmark-circle" size={18} color={accentColor} />
</View>
<View className="flex-1">
<Typography type="body-sm" weight="semibold">
Verified on Solana
</Typography>
<Typography type="body-xs" color="muted">
<MonoText type="body-xs" color="muted">
{listing.seller}
</Typography>
</MonoText>
</View>
<Button size="sm" variant="ghost" onPress={() => toast.show("Address copied!")}>
<Button.Label>Copy</Button.Label>
@@ -67,41 +105,31 @@ export default function ListingDetailScreen(): JSX.Element {
</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">
<Typography className={MICRO_LABEL_CLASS}>About this listing</Typography>
<View className="flex-row flex-wrap gap-y-4">
<View className="w-1/2">
<Typography type="body-xs" color="muted">
Category
</Typography>
<Typography type="body-sm" weight="medium">
<Typography className={MICRO_LABEL_CLASS}>Category</Typography>
<Typography type="body-sm" weight="medium" className="mt-1">
{listing.cat}
</Typography>
</View>
<View className="w-1/2">
<Typography type="body-xs" color="muted">
Available
</Typography>
<Typography type="body-sm" weight="medium">
<Typography className={MICRO_LABEL_CLASS}>Available</Typography>
<Typography type="body-sm" weight="medium" className="mt-1">
{listing.qty} units
</Typography>
</View>
<View className="w-1/2">
<Typography type="body-xs" color="muted">
Currency
</Typography>
<Typography type="body-sm" weight="medium">
<Typography className={MICRO_LABEL_CLASS}>Currency</Typography>
<Typography type="body-sm" weight="medium" className="mt-1">
{listing.cur}
</Typography>
</View>
<View className="w-1/2">
<Typography type="body-xs" color="muted">
Listing ID
</Typography>
<Typography type="body-sm" color="muted">
<Typography className={MICRO_LABEL_CLASS}>Listing ID</Typography>
<MonoText type="body-sm" color="muted" className="mt-1">
{`#${listing.id}${listing.id}${listing.id}${listing.id}`}
</Typography>
</MonoText>
</View>
</View>
</View>
@@ -109,7 +137,7 @@ export default function ListingDetailScreen(): JSX.Element {
{relatedProducts.length > 0 && (
<View className="gap-3">
<Typography type="h6">Customers also bought</Typography>
<View className="flex-row flex-wrap">
<View className="flex-row flex-wrap gap-5 lg:gap-6">
{relatedProducts.map((product) => (
<ListingCard key={product.id} product={product} variant="grid" />
))}
@@ -118,14 +146,19 @@ export default function ListingDetailScreen(): JSX.Element {
)}
</View>
<View className="gap-4 rounded-2xl border border-border bg-surface p-4 md:w-80" style={stickyBoxStyle}>
<View
className="gap-5 rounded-2xl border border-border bg-surface p-6 lg:w-[340px] lg:gap-6 lg:p-8"
style={stickyBoxStyle}
>
<View>
<Typography type="h3">{listing.price}</Typography>
<Typography type="body-sm" color="muted">
<Typography weight="bold" className="text-[30px] font-extrabold leading-none lg:text-[42px]">
{listing.price}
</Typography>
<Typography className="mt-1 text-[15px] text-subtle lg:text-[18px]">
≈ {listing.usd} USD
</Typography>
<View className="mt-2 self-start">
<StatusChip label={availability.label} color={availability.color} />
<View className="mt-2.5 self-start">
<StatusChip label={availability.label} color={availability.color} variant="outline" />
</View>
</View>
@@ -134,9 +167,7 @@ export default function ListingDetailScreen(): JSX.Element {
{listing.alt.length > 0 && (
<>
<View className="gap-2">
<Typography type="body-xs" color="muted">
Pay with
</Typography>
<Typography className={MICRO_LABEL_CLASS}>Pay with</Typography>
<View className="flex-row gap-2">
<Chip
variant={currency === listing.cur ? "primary" : "soft"}
@@ -159,9 +190,7 @@ export default function ListingDetailScreen(): JSX.Element {
)}
<View className="gap-2">
<Typography type="body-xs" color="muted">
Dispute Protection
</Typography>
<Typography className={MICRO_LABEL_CLASS}>Dispute Protection</Typography>
{RESOLVERS.map((resolver) => (
<ResolverCard
key={resolver.id}
@@ -170,7 +199,7 @@ export default function ListingDetailScreen(): JSX.Element {
onSelect={() => setResolverId(resolver.id)}
/>
))}
<Typography type="body-xs" color="muted">
<Typography type="body-xs" className="text-subtle">
Fee only charged if dispute is adjudicated.
</Typography>
</View>
@@ -179,29 +208,31 @@ export default function ListingDetailScreen(): JSX.Element {
<Button
isDisabled={isOut}
size="lg"
variant={isOut ? "secondary" : "primary"}
className="w-full rounded-xl"
onPress={() => requestBuy(listing.id)}
>
<Button.Label>{isOut ? "Out of Stock" : "Buy Now →"}</Button.Label>
<Button.Label className="font-semibold">{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 size="sm" variant="secondary">
<Chip.Label>✓ Final Payment</Chip.Label>
</Chip>
<Chip size="sm" variant="soft" color="default">
<Chip size="sm" variant="secondary">
<Chip.Label>🛡 Dispute Cover</Chip.Label>
</Chip>
<Chip size="sm" variant="soft" color="default">
<Chip size="sm" variant="secondary">
<Chip.Label>⬡ On-chain</Chip.Label>
</Chip>
</View>
<Typography type="body-xs" color="muted" align="center">
<Typography type="body-xs" className="text-subtle" align="center">
Funds held in secure escrow until you confirm receipt.
</Typography>
</View>
</View>
</PageContainer>
</ScrollView>
);
}