@akta/algomd-rn 0.0.1-canary

package/src/components/AuctionListing.tsx

@@ -0,0 +1,220 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { Image } from 'expo-image';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+import type { AuctionListing as AuctionListingType, ComponentSize } from '../types/algorand';
+import { formatCurrency, formatRelativeTime } from '../utils/format';
+import { SizeContainer } from '../ui/SizeContainer';
+import { StatusBadge } from '../ui/StatusBadge';
+
+function GavelIcon({ size = 16, color = '#a1a1aa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="m14.5 12.5-8 8a2.119 2.119 0 1 1-3-3l8-8" />
+      <Path d="m16 16 6-6" />
+      <Path d="m8 8 6-6" />
+      <Path d="m9 7 8 8" />
+      <Path d="m21 11-8-8" />
+    </Svg>
+  );
+}
+
+function TrophyIcon({ size = 16, color = '#eab308' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M6 9H4.5a2.5 2.5 0 0 1 0-5H6" />
+      <Path d="M18 9h1.5a2.5 2.5 0 0 0 0-5H18" />
+      <Path d="M4 22h16" />
+      <Path d="M10 14.66V17c0 .55-.47.98-.97 1.21C7.85 18.75 7 20.24 7 22" />
+      <Path d="M14 14.66V17c0 .55.47.98.97 1.21C16.15 18.75 17 20.24 17 22" />
+      <Path d="M18 2H6v7a6 6 0 0 0 12 0V2Z" />
+    </Svg>
+  );
+}
+
+function TrendingUpIcon({ size = 12, color = '#60a5fa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="m22 7-8.5 8.5-5-5L2 17" />
+      <Path d="M16 7h6v6" />
+    </Svg>
+  );
+}
+
+function CalendarIcon({ size = 16, color = '#71717a' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M8 2v4" />
+      <Path d="M16 2v4" />
+      <Path d="M3 10h18" />
+      <Path d="M21 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z" />
+    </Svg>
+  );
+}
+
+function TimerIcon({ size = 12, color = '#fb923c' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M10 2h4" />
+      <Path d="M12 14V6" />
+      <Path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Z" />
+    </Svg>
+  );
+}
+
+interface AuctionListingProps {
+  data: AuctionListingType;
+  showBidButton?: boolean;
+  size?: ComponentSize;
+  className?: string;
+  imageUrl?: string;
+  onBid?: (auction: AuctionListingType) => void;
+}
+
+export function AuctionListingComponent({
+  data: auction,
+  showBidButton = true,
+  size = 'full',
+  className,
+  imageUrl,
+  onBid,
+}: AuctionListingProps) {
+  const isActive = auction.status === 'active';
+  const isUpcoming = auction.status === 'upcoming';
+  const timeRemaining = new Date(auction.endTime).getTime() - new Date().getTime();
+  const isEndingSoon = timeRemaining < 24 * 60 * 60 * 1000 && timeRemaining > 0;
+
+  const statusVariant = isActive ? 'success' : isUpcoming ? 'info' : 'neutral';
+
+  const isFullscreen = size === 'fullscreen';
+
+  return (
+    <SizeContainer size={size} className={className}>
+      <Animated.View
+        entering={FadeInDown.duration(400).springify()}
+        className={`rounded-2xl ${isFullscreen ? 'border border-zinc-800' : 'bg-zinc-900/80'}`}
+      >
+        <View className="p-5">
+          {/* Header */}
+          <View className="flex-row items-start gap-3 mb-4">
+            {imageUrl && (
+              <View className="w-14 h-14 rounded-lg overflow-hidden bg-zinc-800/50">
+                <Image source={{ uri: imageUrl }} style={{ width: 56, height: 56 }} contentFit="cover" />
+              </View>
+            )}
+            <View className="flex-1">
+              <View className="flex-row items-center gap-2 flex-wrap mb-1">
+                <GavelIcon size={16} color={isActive ? '#34d399' : '#71717a'} />
+                <Text className="text-sm font-medium text-zinc-400">Auction Event</Text>
+                <StatusBadge
+                  label={auction.status.charAt(0).toUpperCase() + auction.status.slice(1)}
+                  variant={statusVariant}
+                />
+                {isActive && isEndingSoon && (
+                  <StatusBadge label="Ending Soon" variant="error" />
+                )}
+                <View className="px-2 py-0.5 rounded-full bg-zinc-700">
+                  <Text className="text-xs font-medium text-white">{auction.bidCount} bids</Text>
+                </View>
+              </View>
+              <Text className="text-base font-bold text-white mb-1">{auction.title}</Text>
+              <Text className="text-sm text-zinc-300 leading-5">{auction.description}</Text>
+            </View>
+          </View>
+
+          {/* Auction Item */}
+          <View className="mb-4 bg-yellow-500/5 rounded-xl px-3 py-2.5">
+            <View className="flex-row items-center gap-2 mb-2">
+              <TrophyIcon size={16} color="#eab308" />
+              <Text className="text-sm font-medium text-yellow-300">Auction Item</Text>
+            </View>
+            {auction.prizes.map((prize, index) => (
+              <View key={index} className="flex-row items-center justify-between mb-1">
+                <Text className="text-sm font-medium text-white">{prize.name}</Text>
+                <Text className="text-xs font-mono text-yellow-300">#{prize.id}</Text>
+              </View>
+            ))}
+          </View>
+
+          {/* Bid Stats */}
+          <View className="flex-row gap-6 mb-4">
+            <View>
+              <Text className="text-2xl font-bold text-white">
+                {formatCurrency(auction.currentHighestBid, auction.bidAsset.unitName)}
+              </Text>
+              <Text className="text-xs text-zinc-400">Current Bid</Text>
+            </View>
+            <View>
+              <Text className="text-base font-semibold text-white">
+                {formatCurrency(auction.minimumNextBid, auction.bidAsset.unitName)}
+              </Text>
+              <Text className="text-xs text-zinc-400">Min Next Bid</Text>
+            </View>
+            <View>
+              <Text className="text-base font-semibold text-white">{auction.bidCount}</Text>
+              <Text className="text-xs text-zinc-400">Total Bids</Text>
+            </View>
+          </View>
+
+          {/* Bid Fee Pool */}
+          {auction.bidFeePercentage && auction.currentBidFeePool > 0 && (
+            <View className="mb-4 bg-blue-500/5 rounded-xl px-3 py-2.5">
+              <View className="flex-row items-center gap-1.5 mb-1">
+                <TrendingUpIcon size={12} color="#60a5fa" />
+                <Text className="text-xs font-medium text-blue-300">
+                  Bid Fee Pool ({auction.bidFeePercentage}%)
+                </Text>
+              </View>
+              <Text className="text-xs text-blue-200">
+                {formatCurrency(auction.currentBidFeePool, auction.bidAsset.unitName)} collected
+              </Text>
+            </View>
+          )}
+
+          {/* Timing */}
+          <View className="flex-row items-center gap-6 mb-4">
+            <View className="flex-row items-center gap-2">
+              <CalendarIcon size={16} />
+              <Text className="text-sm text-zinc-300">
+                {isUpcoming ? 'Starts' : isActive ? 'Ends' : 'Ended'}{' '}
+                {formatRelativeTime(isUpcoming ? auction.startTime : auction.endTime)}
+              </Text>
+            </View>
+            {auction.timeExtended && (
+              <View className="flex-row items-center gap-1">
+                <TimerIcon size={12} color="#fb923c" />
+                <Text className="text-xs text-orange-300">Extended</Text>
+              </View>
+            )}
+          </View>
+
+          {/* Bid Button */}
+          {showBidButton && (isActive || isUpcoming) && (
+            <Pressable
+              onPress={() => isActive && onBid?.(auction)}
+              disabled={!isActive}
+              className={`flex-row items-center justify-center gap-2 py-3 px-4 rounded-xl ${
+                !isActive ? 'bg-zinc-800/50' : 'bg-purple-600'
+              }`}
+            >
+              {!isActive ? (
+                <>
+                  <TimerIcon size={16} color="#a1a1aa" />
+                  <Text className="text-sm font-medium text-zinc-400">
+                    {isUpcoming ? 'Not Started' : 'Auction Ended'}
+                  </Text>
+                </>
+              ) : (
+                <>
+                  <GavelIcon size={16} color="#fff" />
+                  <Text className="text-sm font-medium text-white">Place Bid</Text>
+                </>
+              )}
+            </Pressable>
+          )}
+        </View>
+      </Animated.View>
+    </SizeContainer>
+  );
+}

package/src/components/NFDProfile.tsx

@@ -0,0 +1,173 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { Image } from 'expo-image';
+import * as Linking from 'expo-linking';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+import type { NFDProfile as NFDProfileType, ComponentSize } from '../types/algorand';
+import { formatAddress, formatRelativeTime } from '../utils/format';
+import { CopyButton } from '../ui/CopyButton';
+import { SizeContainer } from '../ui/SizeContainer';
+
+function VerifiedIcon({ size = 16, color = '#60a5fa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" />
+      <Path d="m9 12 2 2 4-4" />
+    </Svg>
+  );
+}
+
+function UserIcon({ size = 24, color = '#71717a' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2" />
+      <Path d="M12 3a4 4 0 1 0 0 8 4 4 0 0 0 0-8Z" />
+    </Svg>
+  );
+}
+
+function ExternalLinkIcon({ size = 16, color = '#a1a1aa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M15 3h6v6" />
+      <Path d="M10 14 21 3" />
+      <Path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6" />
+    </Svg>
+  );
+}
+
+interface NFDProfileProps {
+  data: NFDProfileType;
+  showBio?: boolean;
+  showProperties?: boolean;
+  compact?: boolean;
+  size?: ComponentSize;
+  className?: string;
+}
+
+export function NFDProfileComponent({
+  data: profile,
+  showBio = true,
+  showProperties = true,
+  compact = false,
+  size = 'full',
+  className,
+}: NFDProfileProps) {
+  const handleSocialPress = (key: string, value: string) => {
+    let url: string;
+    if (key === 'website') {
+      url = value.startsWith('http') ? value : `https://${value}`;
+    } else {
+      url = `https://${key}.com/${value.replace('@', '')}`;
+    }
+    Linking.openURL(url);
+  };
+
+  if (compact) {
+    return (
+      <View className={`flex-row items-center gap-1.5 px-2 py-1 rounded-full bg-zinc-800/60 ${className ?? ''}`}>
+        <View className="w-5 h-5 rounded-full overflow-hidden bg-zinc-700 items-center justify-center">
+          {profile.avatar ? (
+            <Image source={{ uri: profile.avatar }} style={{ width: 20, height: 20 }} contentFit="cover" />
+          ) : (
+            <UserIcon size={12} />
+          )}
+        </View>
+        {profile.verified && <VerifiedIcon size={12} />}
+        <Text className="text-xs font-medium text-white" numberOfLines={1}>{profile.name}</Text>
+        <CopyButton value={profile.name} size={12} color="#a1a1aa" />
+      </View>
+    );
+  }
+
+  const isFullscreen = size === 'fullscreen';
+
+  return (
+    <SizeContainer size={size} className={className}>
+      <Animated.View
+        entering={FadeInDown.duration(400).springify()}
+        className={`rounded-2xl ${isFullscreen ? 'border border-zinc-800' : 'bg-zinc-900/80'}`}
+      >
+        <View className="p-5">
+          {/* Header */}
+          <View className="flex-row items-start gap-3 mb-3">
+            <View className="w-14 h-14 rounded-full overflow-hidden bg-zinc-800 items-center justify-center">
+              {profile.avatar ? (
+                <Image source={{ uri: profile.avatar }} style={{ width: 56, height: 56 }} contentFit="cover" />
+              ) : (
+                <UserIcon size={28} />
+              )}
+            </View>
+
+            <View className="flex-1">
+              <View className="flex-row items-center gap-2 mb-1 flex-wrap">
+                <Text className="text-base font-bold text-white" numberOfLines={1}>{profile.name}</Text>
+                {profile.verified && <VerifiedIcon size={18} />}
+              </View>
+              <Text className="text-xs font-mono text-zinc-400 mb-2">
+                {formatAddress(profile.address)}
+              </Text>
+              <View className="flex-row gap-1">
+                <CopyButton value={profile.name} size={14} color="#a1a1aa" />
+                <CopyButton value={profile.address} size={14} color="#a1a1aa" />
+              </View>
+            </View>
+          </View>
+
+          {/* Bio */}
+          {showBio && profile.bio && (
+            <View className="mb-3">
+              <Text className="text-sm text-zinc-300 leading-5">{profile.bio}</Text>
+            </View>
+          )}
+
+          {/* Verification Badge */}
+          <View className="mb-3">
+            <View
+              className={`self-start flex-row items-center gap-2 px-3 py-1 rounded-full ${
+                profile.verified ? 'bg-blue-500/20' : 'bg-zinc-800'
+              }`}
+            >
+              {profile.verified ? (
+                <>
+                  <VerifiedIcon size={12} />
+                  <Text className="text-xs font-medium text-blue-400">Verified NFD</Text>
+                </>
+              ) : (
+                <>
+                  <UserIcon size={12} color="#a1a1aa" />
+                  <Text className="text-xs font-medium text-zinc-400">Unverified</Text>
+                </>
+              )}
+            </View>
+          </View>
+
+          {/* Social Links */}
+          {showProperties && Object.keys(profile.properties).length > 0 && (
+            <View className="mb-3">
+              <Text className="text-sm font-medium text-white mb-2">Social Links</Text>
+              <View className="flex-row flex-wrap gap-2">
+                {Object.entries(profile.properties).map(([key, value]) => (
+                  <Pressable
+                    key={key}
+                    onPress={() => handleSocialPress(key, value)}
+                    className="flex-row items-center gap-1.5 px-3 py-1.5 rounded-lg bg-zinc-800"
+                  >
+                    <ExternalLinkIcon size={14} color="#a1a1aa" />
+                    <Text className="text-xs font-medium text-zinc-300 capitalize">{key}</Text>
+                  </Pressable>
+                ))}
+              </View>
+            </View>
+          )}
+
+          {/* Created Date */}
+          <Text className="text-xs text-zinc-600">
+            Created {formatRelativeTime(profile.createdAt)}
+          </Text>
+        </View>
+      </Animated.View>
+    </SizeContainer>
+  );
+}

package/src/components/NFDSearch.tsx

@@ -0,0 +1,81 @@
+import React, { useCallback, useState } from 'react';
+import { View, Text } from 'react-native';
+import { Image } from 'expo-image';
+import Svg, { Path } from 'react-native-svg';
+import type { NFDProfile } from '../types/algorand';
+import { formatAddress } from '../utils/format';
+import { SearchSheet } from '../ui/SearchSheet';
+
+function VerifiedIcon({ size = 12, color = '#60a5fa' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M3.85 8.62a4 4 0 0 1 4.78-4.77 4 4 0 0 1 6.74 0 4 4 0 0 1 4.78 4.78 4 4 0 0 1 0 6.74 4 4 0 0 1-4.77 4.78 4 4 0 0 1-6.75 0 4 4 0 0 1-4.78-4.77 4 4 0 0 1 0-6.76Z" />
+      <Path d="m9 12 2 2 4-4" />
+    </Svg>
+  );
+}
+
+interface NFDSearchProps {
+  data: NFDProfile[];
+  onSelect?: (profile: NFDProfile) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export function NFDSearch({
+  data,
+  onSelect,
+  placeholder = 'Search NFD profiles...',
+  className,
+}: NFDSearchProps) {
+  const [selected, setSelected] = useState<NFDProfile | null>(null);
+
+  const handleSelect = useCallback(
+    (profile: NFDProfile) => {
+      setSelected(profile);
+      onSelect?.(profile);
+    },
+    [onSelect],
+  );
+
+  const renderItem = useCallback(
+    (profile: NFDProfile) => (
+      <View className="flex-row items-center gap-3">
+        <View className="w-8 h-8 rounded-full bg-zinc-800 overflow-hidden items-center justify-center">
+          {profile.avatar ? (
+            <Image source={{ uri: profile.avatar }} style={{ width: 32, height: 32 }} contentFit="cover" />
+          ) : (
+            <Text className="text-xs text-zinc-400">NFD</Text>
+          )}
+        </View>
+        <View className="flex-1">
+          <View className="flex-row items-center gap-1">
+            <Text className="text-sm font-medium text-white" numberOfLines={1}>
+              {profile.name}
+            </Text>
+            {profile.verified && <VerifiedIcon />}
+          </View>
+          <Text className="text-xs text-zinc-400">{formatAddress(profile.address)}</Text>
+        </View>
+      </View>
+    ),
+    [],
+  );
+
+  return (
+    <View className={className}>
+      <SearchSheet
+        data={data}
+        placeholder={placeholder}
+        onSelect={handleSelect}
+        renderItem={renderItem}
+      />
+      {selected && (
+        <View className="mt-3 p-3 rounded-lg bg-zinc-800 border border-zinc-700">
+          <Text className="text-xs font-medium text-zinc-400 mb-1">Selected NFD</Text>
+          {renderItem(selected)}
+        </View>
+      )}
+    </View>
+  );
+}

package/src/components/NFTListing.tsx

@@ -0,0 +1,181 @@
+import React from 'react';
+import { View, Text, Pressable } from 'react-native';
+import { Image } from 'expo-image';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+import type { NFTListing as NFTListingType, ComponentSize } from '../types/algorand';
+import { formatCurrency, formatRelativeTime } from '../utils/format';
+import { SizeContainer } from '../ui/SizeContainer';
+import { StatusBadge } from '../ui/StatusBadge';
+
+function ShieldIcon({ size = 12, color = '#93c5fd' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z" />
+    </Svg>
+  );
+}
+
+function LockIcon({ size = 12, color = '#fdba74' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M16 10V7a4 4 0 0 0-8 0v3" />
+      <Path d="M5 10h14a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V11a1 1 0 0 1 1-1Z" />
+    </Svg>
+  );
+}
+
+function ShoppingCartIcon({ size = 16, color = '#fff' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z" />
+      <Path d="M3 6h18" />
+      <Path d="M16 10a4 4 0 0 1-8 0" />
+    </Svg>
+  );
+}
+
+function CalendarIcon({ size = 12, color = '#71717a' }: { size?: number; color?: string }) {
+  return (
+    <Svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke={color} strokeWidth={2} strokeLinecap="round" strokeLinejoin="round">
+      <Path d="M8 2v4" />
+      <Path d="M16 2v4" />
+      <Path d="M3 10h18" />
+      <Path d="M21 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V8Z" />
+    </Svg>
+  );
+}
+
+interface NFTListingProps {
+  data: NFTListingType;
+  showPurchaseButton?: boolean;
+  size?: ComponentSize;
+  className?: string;
+  imageUrl?: string;
+  onPurchase?: (listing: NFTListingType) => void;
+  onFavorite?: (listing: NFTListingType) => void;
+}
+
+export function NFTListingComponent({
+  data: listing,
+  showPurchaseButton = true,
+  size = 'full',
+  className,
+  imageUrl,
+  onPurchase,
+  onFavorite,
+}: NFTListingProps) {
+  const isReserved = !!listing.reservedFor;
+  const hasGating = listing.gating !== undefined;
+  const isExpired = listing.expiresAt ? new Date() > listing.expiresAt : false;
+  const isFullscreen = size === 'fullscreen';
+
+  return (
+    <SizeContainer size={size} className={className}>
+      <Animated.View
+        entering={FadeInDown.duration(400).springify()}
+        className={`rounded-2xl overflow-hidden ${isFullscreen ? 'border border-zinc-800' : 'bg-zinc-900/80'}`}
+      >
+        <View className="p-5">
+          {/* NFT Image */}
+          {imageUrl && (
+            <View className="mb-4 rounded-2xl overflow-hidden aspect-square">
+              <Image source={{ uri: imageUrl }} style={{ width: '100%', height: '100%' }} contentFit="cover" />
+
+              {/* Badges overlay */}
+              <View className="absolute top-2 left-2 flex-row flex-wrap gap-1">
+                {listing.authenticityBadge && (
+                  <StatusBadge label="Verified" variant="info" icon={<ShieldIcon />} />
+                )}
+                {isReserved && (
+                  <StatusBadge label="Reserved" variant="warning" icon={<LockIcon />} />
+                )}
+                {hasGating && <StatusBadge label="Gated" variant="primary" />}
+                {isExpired && <StatusBadge label="Expired" variant="error" />}
+              </View>
+            </View>
+          )}
+
+          {/* NFT Info */}
+          <View className="mb-4">
+            <Text className="text-lg font-bold text-white mb-1">{listing.nft.name}</Text>
+            <View className="flex-row items-center gap-2">
+              <Text className="text-xs font-mono text-zinc-400">#{listing.nft.id}</Text>
+              {listing.collection && (
+                <View className="px-2 py-0.5 rounded-full bg-zinc-800">
+                  <Text className="text-xs text-zinc-300">{listing.collection}</Text>
+                </View>
+              )}
+            </View>
+          </View>
+
+          {/* Price & Stats */}
+          <View className="flex-row gap-6 mb-3">
+            <View>
+              <Text className="text-2xl font-bold text-white">
+                {formatCurrency(listing.price, listing.currency)}
+              </Text>
+              <Text className="text-xs text-zinc-400">Price</Text>
+            </View>
+            <View>
+              <Text className="text-base font-semibold text-white">
+                {listing.views.toLocaleString()}
+              </Text>
+              <Text className="text-xs text-zinc-400">Views</Text>
+            </View>
+            <View>
+              <Text className="text-base font-semibold text-white">
+                {listing.favorites.toLocaleString()}
+              </Text>
+              <Text className="text-xs text-zinc-400">Favorites</Text>
+            </View>
+          </View>
+
+          {/* Gating Info */}
+          {hasGating && listing.gating && (
+            <View className="mb-3 bg-purple-500/5 rounded-xl px-3 py-2.5">
+              <Text className="text-xs font-medium text-purple-300 mb-1">Gated Access</Text>
+              <Text className="text-xs text-purple-200">
+                {listing.gating.type === 'token' &&
+                  `Requires ${listing.gating.requirement} ${listing.gating.asset} tokens`}
+                {listing.gating.type === 'nft' &&
+                  `Requires NFT from ${listing.gating.collection}`}
+              </Text>
+            </View>
+          )}
+
+          {/* Purchase Button */}
+          {showPurchaseButton && !isExpired && (
+            <Pressable
+              onPress={() => !isReserved && onPurchase?.(listing)}
+              disabled={isReserved}
+              className={`flex-row items-center justify-center gap-2 py-3 px-4 rounded-xl ${
+                isReserved
+                  ? 'bg-zinc-800/50'
+                  : 'bg-purple-600'
+              }`}
+            >
+              {isReserved ? (
+                <>
+                  <LockIcon size={16} color="#a1a1aa" />
+                  <Text className="text-sm font-medium text-zinc-400">Reserved</Text>
+                </>
+              ) : (
+                <>
+                  <ShoppingCartIcon />
+                  <Text className="text-sm font-medium text-white">Purchase NFT</Text>
+                </>
+              )}
+            </Pressable>
+          )}
+
+          {/* Listed Date */}
+          <View className="flex-row items-center gap-1.5 mt-3">
+            <CalendarIcon />
+            <Text className="text-xs text-zinc-600">Listed {formatRelativeTime(listing.listedAt)}</Text>
+          </View>
+        </View>
+      </Animated.View>
+    </SizeContainer>
+  );
+}