strade-stx 1.0.0

package/frontend/src/components/LandingPage.tsx

@@ -0,0 +1,322 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+import Link from 'next/link';
+import { 
+  Shield, 
+  Zap, 
+  Users, 
+  Lock, 
+  TrendingUp, 
+  CheckCircle,
+  ArrowRight,
+  Sparkles,
+  Globe,
+  Code
+} from 'lucide-react';
+
+const fadeInUp = {
+  initial: { opacity: 0, y: 20 },
+  animate: { opacity: 1, y: 0 },
+  transition: { duration: 0.5 }
+};
+
+const staggerContainer = {
+  animate: {
+    transition: {
+      staggerChildren: 0.1
+    }
+  }
+};
+
+const features = [
+  {
+    icon: Shield,
+    title: 'Secure Escrow',
+    description: 'Trustless transactions with automated smart contract escrow protection'
+  },
+  {
+    icon: Users,
+    title: 'Reputation System',
+    description: 'Build trust with transparent on-chain ratings and reputation scores'
+  },
+  {
+    icon: Lock,
+    title: 'Dispute Resolution',
+    description: 'Fair arbitration through community-based voting mechanism'
+  },
+  {
+    icon: Zap,
+    title: 'Instant Settlement',
+    description: 'Fast transactions powered by Stacks blockchain finality'
+  },
+  {
+    icon: Globe,
+    title: 'Decentralized',
+    description: 'No middlemen, no censorship, complete ownership of your data'
+  },
+  {
+    icon: Code,
+    title: 'Open Source',
+    description: 'Transparent smart contracts verified on-chain with Clarity 4'
+  }
+];
+
+const stats = [
+  { value: '5', label: 'Smart Contracts' },
+  { value: '100%', label: 'Decentralized' },
+  { value: '0', label: 'Platform Fees' },
+  { value: '$0.43', label: 'Deploy Cost' }
+];
+
+export default function LandingPage() {
+  return (
+    <div className="min-h-screen bg-white dark:bg-black">
+      {/* Hero Section */}
+      <section className="relative overflow-hidden border-b border-gray-200 dark:border-gray-800">
+        <div className="absolute inset-0 bg-gradient-to-br from-gray-50 to-white dark:from-gray-950 dark:to-black" />
+        
+        {/* Animated background grid */}
+        <div className="absolute inset-0 bg-[linear-gradient(to_right,#00000008_1px,transparent_1px),linear-gradient(to_bottom,#00000008_1px,transparent_1px)] dark:bg-[linear-gradient(to_right,#ffffff08_1px,transparent_1px),linear-gradient(to_bottom,#ffffff08_1px,transparent_1px)] bg-[size:4rem_4rem]" />
+        
+        <div className="relative max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-24 sm:py-32">
+          <motion.div
+            initial="initial"
+            animate="animate"
+            variants={staggerContainer}
+            className="text-center"
+          >
+            <motion.div variants={fadeInUp} className="mb-8">
+              <Badge variant="outline" className="px-4 py-2 text-sm font-medium border-black dark:border-white">
+                <Sparkles className="h-3 w-3 mr-2 inline" />
+                Built on Stacks • Powered by Bitcoin
+              </Badge>
+            </motion.div>
+
+            <motion.h1
+              variants={fadeInUp}
+              className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight text-black dark:text-white mb-6"
+            >
+              Trade Without
+              <br />
+              <span className="bg-gradient-to-r from-gray-900 to-gray-600 dark:from-white dark:to-gray-400 bg-clip-text text-transparent">
+                Trust Issues
+              </span>
+            </motion.h1>
+
+            <motion.p
+              variants={fadeInUp}
+              className="max-w-2xl mx-auto text-lg sm:text-xl text-gray-600 dark:text-gray-400 mb-10"
+            >
+              A decentralized marketplace where smart contracts ensure security, 
+              escrow protects transactions, and blockchain guarantees transparency.
+            </motion.p>
+
+            <motion.div
+              variants={fadeInUp}
+              className="flex flex-col sm:flex-row gap-4 justify-center"
+            >
+              <Link href="/marketplace">
+                <Button size="lg" className="bg-black hover:bg-gray-800 dark:bg-white dark:hover:bg-gray-200 text-white dark:text-black px-8 h-12">
+                  Explore Marketplace
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </Link>
+              <Link href="/about">
+                <Button size="lg" variant="outline" className="border-black dark:border-white text-black dark:text-white hover:bg-gray-100 dark:hover:bg-gray-900 px-8 h-12">
+                  Learn More
+                </Button>
+              </Link>
+            </motion.div>
+
+            {/* Stats */}
+            <motion.div
+              variants={fadeInUp}
+              className="mt-20 grid grid-cols-2 md:grid-cols-4 gap-8"
+            >
+              {stats.map((stat, index) => (
+                <div key={index} className="text-center">
+                  <div className="text-3xl sm:text-4xl font-bold text-black dark:text-white mb-2">
+                    {stat.value}
+                  </div>
+                  <div className="text-sm text-gray-600 dark:text-gray-400">
+                    {stat.label}
+                  </div>
+                </div>
+              ))}
+            </motion.div>
+          </motion.div>
+        </div>
+      </section>
+
+      {/* Features Section */}
+      <section className="py-24 border-b border-gray-200 dark:border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={staggerContainer}
+            className="text-center mb-16"
+          >
+            <motion.h2
+              variants={fadeInUp}
+              className="text-3xl sm:text-4xl font-bold text-black dark:text-white mb-4"
+            >
+              Everything You Need for Safe Trading
+            </motion.h2>
+            <motion.p
+              variants={fadeInUp}
+              className="text-lg text-gray-600 dark:text-gray-400 max-w-2xl mx-auto"
+            >
+              Built with security, transparency, and user experience in mind
+            </motion.p>
+          </motion.div>
+
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={staggerContainer}
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
+          >
+            {features.map((feature, index) => (
+              <motion.div
+                key={index}
+                variants={fadeInUp}
+                whileHover={{ y: -4, transition: { duration: 0.2 } }}
+                className="p-6 border border-gray-200 dark:border-gray-800 rounded-lg hover:shadow-lg transition-shadow bg-white dark:bg-black"
+              >
+                <div className="w-12 h-12 rounded-lg bg-black dark:bg-white flex items-center justify-center mb-4">
+                  <feature.icon className="h-6 w-6 text-white dark:text-black" />
+                </div>
+                <h3 className="text-xl font-semibold text-black dark:text-white mb-2">
+                  {feature.title}
+                </h3>
+                <p className="text-gray-600 dark:text-gray-400">
+                  {feature.description}
+                </p>
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+      </section>
+
+      {/* How It Works Section */}
+      <section className="py-24 border-b border-gray-200 dark:border-gray-800">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={staggerContainer}
+            className="text-center mb-16"
+          >
+            <motion.h2
+              variants={fadeInUp}
+              className="text-3xl sm:text-4xl font-bold text-black dark:text-white mb-4"
+            >
+              How It Works
+            </motion.h2>
+            <motion.p
+              variants={fadeInUp}
+              className="text-lg text-gray-600 dark:text-gray-400"
+            >
+              Trading on Strade is simple and secure
+            </motion.p>
+          </motion.div>
+
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={staggerContainer}
+            className="grid grid-cols-1 md:grid-cols-3 gap-8"
+          >
+            {[
+              {
+                step: '01',
+                title: 'Connect Your Wallet',
+                description: 'Use Leather or any Stacks-compatible wallet to get started'
+              },
+              {
+                step: '02',
+                title: 'Create or Browse',
+                description: 'List your items or discover what others are selling'
+              },
+              {
+                step: '03',
+                title: 'Trade Securely',
+                description: 'Smart contracts handle escrow and ensure safe transactions'
+              }
+            ].map((item, index) => (
+              <motion.div
+                key={index}
+                variants={fadeInUp}
+                className="relative text-center"
+              >
+                <div className="text-6xl font-bold text-gray-200 dark:text-gray-800 mb-4">
+                  {item.step}
+                </div>
+                <h3 className="text-xl font-semibold text-black dark:text-white mb-2">
+                  {item.title}
+                </h3>
+                <p className="text-gray-600 dark:text-gray-400">
+                  {item.description}
+                </p>
+                {index < 2 && (
+                  <div className="hidden md:block absolute top-1/2 -right-4 transform -translate-y-1/2">
+                    <ArrowRight className="h-6 w-6 text-gray-300 dark:text-gray-700" />
+                  </div>
+                )}
+              </motion.div>
+            ))}
+          </motion.div>
+        </div>
+      </section>
+
+      {/* CTA Section */}
+      <section className="py-24 bg-black dark:bg-white">
+        <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center">
+          <motion.div
+            initial="initial"
+            whileInView="animate"
+            viewport={{ once: true }}
+            variants={staggerContainer}
+          >
+            <motion.h2
+              variants={fadeInUp}
+              className="text-3xl sm:text-4xl font-bold text-white dark:text-black mb-4"
+            >
+              Ready to Start Trading?
+            </motion.h2>
+            <motion.p
+              variants={fadeInUp}
+              className="text-lg text-gray-400 dark:text-gray-600 mb-8"
+            >
+              Join the decentralized marketplace revolution today
+            </motion.p>
+            <motion.div variants={fadeInUp}>
+              <Link href="/marketplace">
+                <Button size="lg" className="bg-white hover:bg-gray-200 dark:bg-black dark:hover:bg-gray-800 text-black dark:text-white px-8 h-12">
+                  Get Started Now
+                  <ArrowRight className="ml-2 h-4 w-4" />
+                </Button>
+              </Link>
+            </motion.div>
+          </motion.div>
+        </div>
+      </section>
+    </div>
+  );
+}
+// hero responsive
+// flex-col sm:flex-row
+// text-3xl md:text-5xl
+// grid-cols-1 md:grid-cols-3
+// stats mobile
+// overflow-x-auto
+// footer mobile
+// alt texts

package/frontend/src/components/ListingCard.tsx

@@ -0,0 +1,154 @@
+'use client';
+
+import { useState } from 'react';
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+import { Badge } from '@/components/ui/badge';
+
+import { Listing, formatSTX, formatAddress, blockHeightToTimestamp } from '@/lib/stacks';
+import { ShoppingCart, Clock, User, Package } from 'lucide-react';
+import Image from 'next/image';
+
+interface ListingCardProps {
+  listing: Listing;
+  onPurchase?: (listingId: number) => void;
+  onCancel?: (listingId: number) => void;
+  isOwner?: boolean;
+}
+
+export default function ListingCard({ listing, onPurchase, onCancel, isOwner }: ListingCardProps) {
+  const [isPurchasing, setIsPurchasing] = useState(false);
+  const [isCancelling, setIsCancelling] = useState(false);
+  
+  // For demo purposes: use placeholder image if no imageUrl provided
+  const displayImage = listing.imageUrl || `https://picsum.photos/seed/${listing.listingId}/400/300`;
+
+  const handlePurchase = async () => {
+    if (onPurchase) {
+      setIsPurchasing(true);
+      try {
+        await onPurchase(listing.listingId);
+      } finally {
+        setIsPurchasing(false);
+      }
+    }
+  };
+
+  const handleCancel = async () => {
+    if (onCancel) {
+      setIsCancelling(true);
+      try {
+        await onCancel(listing.listingId);
+      } finally {
+        setIsCancelling(false);
+      }
+    }
+  };
+
+  // Convert block heights to timestamps for display
+  const expiresAtTimestamp = blockHeightToTimestamp(listing.expiresAt);
+  const isExpired = expiresAtTimestamp < Date.now();
+
+  return (
+    <Card className="h-full flex flex-col hover:shadow-xl transition-all hover:-translate-y-1 bg-white dark:bg-slate-800 border-slate-200 dark:border-slate-700">
+      {/* Image Section */}
+      <div className="relative w-full h-48 bg-slate-100 dark:bg-slate-700">
+        <Image
+          src={displayImage}
+          alt={listing.name}
+          fill
+          className="object-cover rounded-t-lg"
+          sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+          unoptimized
+        />
+      </div>
+
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <CardTitle className="text-lg line-clamp-2 text-slate-900 dark:text-white">{listing.name}</CardTitle>
+          <Badge variant={listing.status === 'active' ? 'default' : 'secondary'} className={listing.status === 'active' ? 'bg-green-500 dark:bg-green-600' : ''}>
+            {listing.status}
+          </Badge>
+        </div>
+        <div className="flex items-center space-x-2 text-sm text-slate-600 dark:text-slate-400">
+          <User className="h-4 w-4" />
+          <span>{formatAddress(listing.seller)}</span>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex-1">
+        <p className="text-slate-700 dark:text-slate-300 text-sm mb-4 line-clamp-3">
+          {listing.description}
+        </p>
+
+        <div className="space-y-3">
+          <div className="flex items-center justify-between">
+            <span className="text-2xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
+              {formatSTX(listing.price)} STX
+            </span>
+          </div>
+
+          <div className="flex items-center space-x-2 text-sm text-slate-500 dark:text-slate-400">
+            <Clock className="h-4 w-4" />
+            <span>
+              Expires: {new Date(expiresAtTimestamp).toLocaleDateString()}
+            </span>
+          </div>
+
+          {isExpired && (
+            <Badge variant="destructive" className="text-xs bg-red-500 dark:bg-red-600">
+              Expired
+            </Badge>
+          )}
+        </div>
+      </CardContent>
+
+      <CardFooter className="flex-col gap-2 pt-4">
+        {!isOwner && listing.status === 'active' && !isExpired && (
+          <Button
+            onClick={handlePurchase}
+            disabled={isPurchasing}
+            className="w-full bg-gradient-to-r from-blue-600 to-purple-600 hover:from-blue-700 hover:to-purple-700 text-white border-0"
+          >
+            <ShoppingCart className="h-4 w-4 mr-2" />
+            {isPurchasing ? 'Purchasing...' : 'Purchase'}
+          </Button>
+        )}
+
+        {isOwner && listing.status === 'active' && !isExpired && (
+          <div className="w-full space-y-2">
+            <div className="text-center text-sm text-blue-600 dark:text-blue-400 mb-2 font-medium">
+              Your listing
+            </div>
+            <Button
+              onClick={handleCancel}
+              disabled={isCancelling}
+              variant="destructive"
+              className="w-full bg-red-500 hover:bg-red-600 dark:bg-red-600 dark:hover:bg-red-700"
+              size="sm"
+            >
+              {isCancelling ? 'Cancelling...' : 'Cancel Listing'}
+            </Button>
+          </div>
+        )}
+
+        {isOwner && (listing.status !== 'active' || isExpired) && (
+          <div className="w-full text-center text-sm text-slate-500 dark:text-slate-400">
+            Your listing ({isExpired ? 'expired' : listing.status})
+          </div>
+        )}
+
+        {(isExpired || listing.status !== 'active') && !isOwner && (
+          <div className="w-full text-center text-sm text-slate-500 dark:text-slate-400">
+            Not available
+          </div>
+        )}
+      </CardFooter>
+    </Card>
+  );
+}
+// w-full
+// aspect-ratio
+// flex-col
+// min-h-[44px]
+// truncate

package/frontend/src/components/LoadingSkeleton.tsx

@@ -0,0 +1,44 @@
+import { Card, CardContent, CardFooter, CardHeader } from '@/components/ui/card';
+
+export function ListingCardSkeleton() {
+  return (
+    <Card className="h-full flex flex-col animate-pulse">
+      <CardHeader>
+        <div className="flex items-start justify-between">
+          <div className="h-6 bg-slate-200 rounded w-3/4"></div>
+          <div className="h-6 bg-slate-200 rounded w-16"></div>
+        </div>
+        <div className="flex items-center space-x-2 mt-2">
+          <div className="h-4 bg-slate-200 rounded w-24"></div>
+        </div>
+      </CardHeader>
+
+      <CardContent className="flex-1">
+        <div className="space-y-2 mb-4">
+          <div className="h-4 bg-slate-200 rounded w-full"></div>
+          <div className="h-4 bg-slate-200 rounded w-5/6"></div>
+          <div className="h-4 bg-slate-200 rounded w-4/6"></div>
+        </div>
+
+        <div className="space-y-2">
+          <div className="h-8 bg-slate-200 rounded w-32"></div>
+          <div className="h-4 bg-slate-200 rounded w-40"></div>
+        </div>
+      </CardContent>
+
+      <CardFooter>
+        <div className="h-10 bg-slate-200 rounded w-full"></div>
+      </CardFooter>
+    </Card>
+  );
+}
+
+export function ListingGridSkeleton({ count = 6 }: { count?: number }) {
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {Array.from({ length: count }).map((_, i) => (
+        <ListingCardSkeleton key={i} />
+      ))}
+    </div>
+  );
+}

package/frontend/src/components/MobileNav.tsx

@@ -0,0 +1,89 @@
+'use client';
+
+import { useState } from 'react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Menu, X, Home, Package, HelpCircle } from 'lucide-react';
+import { Button } from '@/components/ui/button';
+
+export default function MobileNav() {
+  const [isOpen, setIsOpen] = useState(false);
+  const pathname = usePathname();
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  const navItems = [
+    { href: '/', label: 'Marketplace', icon: Home },
+    { href: '/my-listings', label: 'My Listings', icon: Package },
+    { href: '/help', label: 'Help & FAQ', icon: HelpCircle },
+  ];
+
+  return (
+    <>
+      {/* Mobile Menu Button */}
+      <button
+        onClick={toggleMenu}
+        className="md:hidden p-2 hover:bg-slate-100 dark:hover:bg-slate-800 rounded-lg transition-colors"
+        aria-label="Toggle menu"
+      >
+        {isOpen ? (
+          <X className="h-6 w-6 text-slate-900 dark:text-white" />
+        ) : (
+          <Menu className="h-6 w-6 text-slate-900 dark:text-white" />
+        )}
+      </button>
+
+      {/* Mobile Menu Overlay */}
+      {isOpen && (
+        <>
+          <div
+            className="fixed inset-0 bg-black bg-opacity-50 z-40 md:hidden"
+            onClick={toggleMenu}
+          />
+          
+          <div className="fixed top-16 left-0 right-0 bg-white dark:bg-slate-900 shadow-lg z-50 md:hidden border-t border-slate-200 dark:border-slate-700">
+            <nav className="p-4 space-y-2">
+              {navItems.map((item) => {
+                const Icon = item.icon;
+                const isActive = pathname === item.href;
+                
+                return (
+                  <Link
+                    key={item.href}
+                    href={item.href}
+                    onClick={toggleMenu}
+                    className={`flex items-center gap-3 px-4 py-3 rounded-lg transition-colors ${
+                      isActive
+                        ? 'bg-gradient-to-r from-blue-600 to-purple-600 text-white'
+                        : 'text-slate-700 dark:text-slate-300 hover:bg-slate-100 dark:hover:bg-slate-800'
+                    }`}
+                  >
+                    <Icon className="h-5 w-5" />
+                    <span className="font-medium">{item.label}</span>
+                  </Link>
+                );
+              })}
+            </nav>
+          </div>
+        </>
+      )}
+    </>
+  );
+}
+// MobileNav
+// hamburger
+// drawer
+// close
+// links
+// route change
+// wallet
+// theme
+// transition
+// aria
+// focus trap
+// escape key
+// pb-safe
+// render test
+// useMediaQuery
+// lazy
+// active

package/frontend/src/components/NotificationBell.tsx

@@ -0,0 +1,8 @@
+// NotificationBell
+// bell icon
+// badge
+// hide when 0
+// onClick
+// animate-bounce
+// aria-label
+// export

package/frontend/src/components/NotificationPanel.tsx

@@ -0,0 +1,14 @@
+// NotificationPanel
+// list
+// empty state
+// mark all read
+// clear all
+// dismiss
+// type icons
+// time ago
+// slide-in
+// colors
+// outside click
+// escape
+// role=dialog
+// mobile

package/frontend/src/components/README.md

@@ -0,0 +1,14 @@
+# Add your components here
+
+Example component structure:
+
+```tsx
+export function YourComponent() {
+  return (
+    <div className="glass rounded-2xl p-8 border border-app-border">
+      <h2 className="font-bold text-xl mb-4">Your Component</h2>
+      <p className="text-text-dim">Component content</p>
+    </div>
+  );
+}
+```

package/frontend/src/components/SearchBar.tsx

@@ -0,0 +1,10 @@
+// SearchBar
+interface SearchBarProps { onSearch: (q: string) => void; placeholder?: string; }
+// input element
+// clear button
+// debounced onChange
+// loading spinner
+// tailwind styles
+// Ctrl+K hint
+// aria-label
+// e.preventDefault()

package/frontend/src/components/TestnetBanner.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import { AlertCircle, X } from 'lucide-react';
+import { useState } from 'react';
+
+export default function TestnetBanner() {
+  const [isVisible, setIsVisible] = useState(true);
+
+  if (!isVisible) return null;
+
+  return (
+    <div className="bg-orange-500 text-white py-3 px-4 relative">
+      <div className="max-w-7xl mx-auto flex items-center justify-center gap-2">
+        <AlertCircle className="h-5 w-5" />
+        <p className="text-sm font-medium">
+          <strong>TESTNET MODE:</strong> This is a test network. STX tokens have no real value. 
+          Do not use real assets.
+        </p>
+        <button
+          onClick={() => setIsVisible(false)}
+          className="absolute right-4 hover:bg-orange-600 rounded p-1 transition-colors"
+          aria-label="Dismiss banner"
+        >
+          <X className="h-4 w-4" />
+        </button>
+      </div>
+    </div>
+  );
+}