strade-stx 1.0.0

package/frontend/src/context/README.md

@@ -0,0 +1,27 @@
+# Add your context providers here
+
+Example context structure:
+
+```tsx
+import { createContext, useContext, ReactNode } from 'react';
+
+interface YourContextType {
+  // Define your context type
+}
+
+const YourContext = createContext<YourContextType | undefined>(undefined);
+
+export function YourProvider({ children }: { children: ReactNode }) {
+  return (
+    <YourContext.Provider value={{}}>
+      {children}
+    </YourContext.Provider>
+  );
+}
+
+export function useYourContext() {
+  const context = useContext(YourContext);
+  if (!context) throw new Error('useYourContext must be used within YourProvider');
+  return context;
+}
+```

package/frontend/src/index.css

@@ -0,0 +1,166 @@
+@import "tailwindcss";
+@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&family=Outfit:wght@100;200;300;400;500;600;700;800;900&family=Syne:wght@400;500;600;700;800&display=swap');
+
+/* Tailwind v4 Theme Configuration */
+@theme {
+  /* Colors - Nu White Theme */
+  --color-app-bg: #FCFCFD;
+  --color-app-surface: #FFFFFF;
+  --color-app-card: #FFFFFF;
+  --color-app-border: #E5E7EB;
+  --color-app-hover: #F9FAFB;
+  
+  /* Accents */
+  --color-accent-indigo: #4F46E5;
+  --color-accent-indigo-hover: #4338CA;
+  --color-accent-gold: #D97706;
+  --color-accent-gold-hover: #B45309;
+  --color-accent-emerald: #059669;
+  
+  /* Text */
+  --color-text-main: #111827;
+  --color-text-dim: #4B5563;
+  --color-text-pale: #9CA3AF;
+
+  /* Fonts */
+  --font-serif: 'Cormorant Garamond', serif;
+  --font-sans: 'Outfit', sans-serif;
+  --font-display: 'Syne', sans-serif;
+
+  /* Shadows - Soft & Premium */
+  --shadow-premium: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
+  --shadow-floating: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 10px 10px -5px rgba(0, 0, 0, 0.02);
+  --shadow-glow-indigo: 0 0 20px rgba(79, 70, 229, 0.1);
+
+  /* Animations */
+  --animate-reveal: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1);
+  --animate-float: float 6s ease-in-out infinite;
+  --animate-soft-pulse: softPulse 3s ease-in-out infinite;
+}
+
+@keyframes reveal {
+  0% { transform: translateY(20px); opacity: 0; }
+  100% { transform: translateY(0); opacity: 1; }
+}
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-10px); }
+}
+
+@keyframes softPulse {
+  0%, 100% { opacity: 1; transform: scale(1); }
+  50% { opacity: 0.8; transform: scale(0.98); }
+}
+
+/* Base Styles */
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  margin: 0;
+  background-color: var(--color-app-bg);
+  color: var(--color-text-main);
+  font-family: var(--font-sans);
+  overflow-x: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, .font-serif {
+  font-family: var(--font-serif);
+}
+
+.font-display {
+  font-family: var(--font-display);
+}
+
+/* Glassmorphism */
+.glass {
+  background: rgba(255, 255, 255, 0.85);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+}
+
+/* Grid Background - Subtle */
+.grid-subtle {
+  background-image: radial-gradient(#E5E7EB 1px, transparent 1px);
+  background-size: 40px 40px;
+}
+
+/* Custom Scrollbar */
+*::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+*::-webkit-scrollbar-track {
+  background: var(--color-app-bg);
+}
+
+*::-webkit-scrollbar-thumb {
+  background: var(--color-app-border);
+  border-radius: 10px;
+}
+
+*::-webkit-scrollbar-thumb:hover {
+  background: var(--color-text-pale);
+}
+
+/* Hide scrollbar utility */
+.no-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+/* Buttons */
+.btn-primary {
+  @apply px-8 py-3.5 bg-accent-indigo text-white font-semibold rounded-full transition-all duration-300 hover:bg-accent-indigo-hover hover:shadow-floating active:scale-95 disabled:opacity-50 disabled:pointer-events-none;
+}
+
+.btn-secondary {
+  @apply px-8 py-3.5 bg-white text-accent-indigo border border-app-border font-semibold rounded-full transition-all duration-300 hover:bg-app-hover hover:shadow-premium active:scale-95 disabled:opacity-50;
+}
+
+.btn-ghost {
+  @apply px-4 py-2.5 text-text-dim hover:text-accent-indigo hover:bg-app-hover rounded-xl transition-all duration-200;
+}
+
+/* Cards */
+.card-premium {
+  @apply bg-white border border-app-border rounded-3xl p-8 transition-all duration-500 hover:shadow-floating hover:border-accent-indigo/20;
+}
+
+/* Form Elements */
+.input-premium {
+  @apply w-full px-5 py-4 bg-white border border-app-border rounded-xl focus:outline-none focus:ring-2 focus:ring-accent-indigo/10 focus:border-accent-indigo transition-all duration-200 placeholder:text-text-pale text-text-main font-medium;
+}
+
+/* Animations Helpers */
+.stagger-reveal > * {
+  opacity: 0;
+  animation: reveal 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+}
+
+.stagger-1 { animation-delay: 0.1s; }
+.stagger-2 { animation-delay: 0.2s; }
+.stagger-3 { animation-delay: 0.3s; }
+.stagger-4 { animation-delay: 0.4s; }
+.stagger-5 { animation-delay: 0.5s; }
+
+/* Focus visible for accessibility */
+:focus-visible {
+  outline: 2px solid var(--color-accent-indigo);
+  outline-offset: 2px;
+}
+
+/* Selection styling */
+::selection {
+  background-color: rgba(79, 70, 229, 0.1);
+  color: var(--color-accent-indigo);
+}

package/frontend/src/lib/notificationEvents.ts

@@ -0,0 +1,10 @@
+// events
+// purchase events
+// escrow events
+// dispute events
+// listing events
+// wire purchase
+// wire escrow
+// wire dispute
+// polling
+// cleanup

package/frontend/src/lib/notificationStore.ts

@@ -0,0 +1,13 @@
+// store
+// state
+// addNotification
+// markAsRead
+// markAllAsRead
+// remove
+// clearAll
+// persist
+// isOpen
+// togglePanel
+// dedup
+// max 50
+// shallow

package/frontend/src/lib/notifications.ts

@@ -0,0 +1,13 @@
+// notifications
+export type Notification = { id: string; type: string; message: string; read: boolean; createdAt: number; };
+export function createNotification(type: string, message: string): Notification { return { id: crypto.randomUUID(), type, message, read: false, createdAt: Date.now() }; }
+export function markAsRead(n: Notification): Notification { return { ...n, read: true }; }
+export function markAllAsRead(ns: Notification[]) { return ns.map(markAsRead); }
+export function clearNotification(ns: Notification[], id: string) { return ns.filter(n => n.id !== id); }
+export function clearAllNotifications() { return []; }
+export function getUnreadCount(ns: Notification[]) { return ns.filter(n => !n.read).length; }
+export const NOTIF_TYPES = { PURCHASE: 'purchase', ESCROW: 'escrow', DISPUTE: 'dispute', LISTING: 'listing' } as const;
+// localStorage
+export function loadNotifications(): Notification[] { try { return JSON.parse(localStorage.getItem('notifications') || '[]'); } catch { return []; } }
+export function saveNotifications(ns: Notification[]) { localStorage.setItem('notifications', JSON.stringify(ns)); }
+// unit tests

package/frontend/src/lib/search.ts

@@ -0,0 +1,28 @@
+// search utilities
+export type SearchFilters = { query?: string; minPrice?: number; maxPrice?: number; status?: string; category?: string };
+export function filterListings(listings: any[], filters: SearchFilters) { return listings; }
+// filter by query text
+// filter by min price
+// filter by max price
+// filter by status
+// filter by category
+export function sortListings(listings: any[], by: string) { return listings; }
+// sort price asc
+// sort price desc
+// sort newest
+// sort oldest
+export function debounce(fn: Function, ms: number) { let t: any; return (...a: any[]) => { clearTimeout(t); t = setTimeout(() => fn(...a), ms); }; }
+// validate price range
+export function paginate(items: any[], page: number, size: number) { return items.slice((page-1)*size, page*size); }
+export function getTotalPages(total: number, size: number) { return Math.ceil(total / size); }
+// count results
+export function isEmpty(arr: any[]) { return arr.length === 0; }
+/** Filter listings by provided filters */
+// test stubs
+// paginate tests
+// moved types
+// exports
+// undefined guard
+// trim
+// short-circuit
+// cleanup

package/frontend/src/lib/stacks.ts

@@ -0,0 +1,189 @@
+import { STACKS_TESTNET } from '@stacks/network';
+import { AppConfig, UserSession } from '@stacks/connect';
+import { fetchCallReadOnlyFunction, cvToValue, ClarityType, uintCV } from '@stacks/transactions';
+
+export const network = STACKS_TESTNET;
+export const appConfig = new AppConfig(['store_write', 'publish_data']);
+export const userSession = new UserSession({ appConfig });
+
+export const contractAddress = 'STGEE2D7NV4RJC1MHK59AN83PEN0CBBEXNG4QQVF';
+
+// Contract addresses for deployed contracts
+export const CONTRACTS = {
+  CoreMarketPlace: `${contractAddress}.CoreMarketPlace`,
+  EscrowService: `${contractAddress}.EscrowService`,
+  UserProfile: `${contractAddress}.UserProfile`,
+  DisputeResolution: `${contractAddress}.DisputeResolution_clar`,
+  Token: `${contractAddress}.token`,
+};
+
+// Default contract for marketplace operations
+export const contractName = 'CoreMarketPlace';
+
+export interface Listing {
+  listingId: number;
+  seller: string;
+  name: string;
+  description: string;
+  price: number;
+  status: string;
+  createdAt: number; // block height
+  expiresAt: number; // block height
+  imageUrl?: string;
+}
+
+// Convert Stacks block height to approximate timestamp
+// Stacks blocks are ~10 minutes apart, starting from Bitcoin block ~666050 (Jan 2021)
+export const blockHeightToTimestamp = (blockHeight: number): number => {
+  // Approximate: Stacks mainnet launched around Jan 2021 at Bitcoin block 666050
+  // For testnet, we use a similar approximation
+  const STACKS_LAUNCH_TIMESTAMP = 1611057600000; // Jan 2021 in milliseconds
+  const AVERAGE_BLOCK_TIME_MS = 10 * 60 * 1000; // 10 minutes in milliseconds
+  
+  return STACKS_LAUNCH_TIMESTAMP + (blockHeight * AVERAGE_BLOCK_TIME_MS);
+};
+
+export const getListings = async (includeAll: boolean = false): Promise<Listing[]> => {
+  try {
+    const lastIdResult = await fetchCallReadOnlyFunction({
+      contractAddress,
+      contractName,
+      functionName: 'get-last-listing-id',
+      functionArgs: [],
+      network,
+      senderAddress: contractAddress,
+    });
+
+    const lastId = cvToValue(lastIdResult).value as number;
+    const listings: Listing[] = [];
+
+    for (let i = 1; i <= lastId; i++) {
+      const listingResult = await fetchCallReadOnlyFunction({
+        contractAddress,
+        contractName,
+        functionName: 'get-listing',
+        functionArgs: [uintCV(i)],
+        network,
+        senderAddress: contractAddress,
+      });
+
+      if (listingResult.type !== ClarityType.OptionalNone) {
+        const listingData = cvToValue(listingResult).value;
+        listings.push({
+          listingId: i,
+          seller: listingData.seller.value,
+          name: listingData.name.value,
+          description: listingData.description.value,
+          price: Number(listingData.price.value),
+          status: listingData.status.value,
+          createdAt: Number(listingData['created-at'].value),
+          expiresAt: Number(listingData['expires-at'].value),
+        });
+      }
+    }
+
+    // If includeAll is true, return all listings; otherwise filter for active only
+    return includeAll ? listings : listings.filter(listing => listing.status === 'active');
+  } catch (error) {
+    console.error('Error fetching listings:', error);
+    return [];
+  }
+};
+
+export const formatSTX = (microSTX: number): string => {
+  // Handle NaN, undefined, or invalid values
+  if (microSTX === null || microSTX === undefined || isNaN(microSTX) || microSTX < 0) {
+    return '0';
+  }
+  return (microSTX / 1000000).toFixed(6);
+};
+
+export const formatAddress = (address: string): string => {
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+};
+
+// Helper function to decode hex-encoded string
+const hexToString = (hex: string): string => {
+  let str = '';
+  for (let i = 0; i < hex.length; i += 2) {
+    str += String.fromCharCode(parseInt(hex.substr(i, 2), 16));
+  }
+  return str;
+};
+
+// Check if wallet is connected (supports both old UserSession and new v8 storage)
+export const isWalletConnected = (): boolean => {
+  if (typeof window === 'undefined') return false;
+  
+  // Check old UserSession method
+  if (userSession.isUserSignedIn()) {
+    return true;
+  }
+  
+  // Check v8 @stacks/connect storage
+  const stacksConnectData = localStorage.getItem('@stacks/connect');
+  if (stacksConnectData) {
+    try {
+      const decodedString = hexToString(stacksConnectData);
+      const connectData = JSON.parse(decodedString);
+      return !!(connectData?.addresses?.stx?.[0]?.address);
+    } catch (error) {
+      return false;
+    }
+  }
+  
+  return false;
+};
+
+// Get the connected wallet address (supports both old UserSession and new v8 storage)
+export const getConnectedAddress = (): string | null => {
+  if (typeof window === 'undefined') return null;
+  
+  // Check old UserSession method
+  if (userSession.isUserSignedIn()) {
+    const userData = userSession.loadUserData();
+    return userData.profile?.stxAddress?.testnet || userData.profile?.stxAddress?.mainnet || null;
+  }
+  
+  // Check v8 @stacks/connect storage
+  const stacksConnectData = localStorage.getItem('@stacks/connect');
+  if (stacksConnectData) {
+    try {
+      const decodedString = hexToString(stacksConnectData);
+      const connectData = JSON.parse(decodedString);
+      return connectData?.addresses?.stx?.[0]?.address || null;
+    } catch (error) {
+      return null;
+    }
+  }
+  
+  return null;
+};
+
+export const getUserBalance = async (address: string): Promise<number> => {
+  try {
+    if (!address || typeof address !== 'string' || address.length < 10) {
+      return 0;
+    }
+    const response = await fetch(
+      `https://api.testnet.hiro.so/extended/v1/address/${address}/stx`
+    );
+    
+    if (!response.ok) {
+      console.error('Balance API error:', response.status);
+      return 0;
+    }
+    
+    const data = await response.json();
+    
+    // Handle different API response formats
+    if (data.balance !== undefined) {
+      return Number(data.balance) || 0;
+    }
+    
+    return 0;
+  } catch (error) {
+    console.error('Error fetching balance:', error);
+    return 0;
+  }
+};

package/frontend/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/frontend/src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App.tsx';
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

package/frontend/src/test/setup.ts

@@ -0,0 +1,23 @@
+import '@testing-library/jest-dom';
+import { vi } from 'vitest';
+
+// Mock Next.js router
+vi.mock('next/navigation', () => ({
+  useRouter: () => ({
+    push: vi.fn(),
+    replace: vi.fn(),
+    prefetch: vi.fn(),
+  }),
+  usePathname: vi.fn(() => '/'),
+  useSearchParams: () => new URLSearchParams(),
+}));
+
+// Mock Stacks connect
+vi.mock('@stacks/connect', async () => {
+  return {
+    AppConfig: vi.fn(),
+    UserSession: vi.fn(),
+    authenticate: vi.fn(),
+    openContractCall: vi.fn(),
+  };
+});

package/frontend/src/types.d.ts

@@ -0,0 +1,9 @@
+export {};
+
+declare global {
+  interface Window {
+    ethereum?: {
+      request: (args: { method: string }) => Promise<string[]>;
+    };
+  }
+}

package/frontend/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

package/frontend/tsconfig.json

@@ -0,0 +1,41 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./src/*"
+      ]
+    },
+    "noEmit": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/frontend/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

package/frontend/vercel.json

@@ -0,0 +1,4 @@
+{
+  "buildCommand": "npm run build",
+  "installCommand": "npm install"
+}

package/frontend/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})

package/frontend/vitest.config.ts

@@ -0,0 +1,17 @@
+import { defineConfig } from 'vitest/config';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    globals: true,
+    setupFiles: ['./src/test/setup.ts'],
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, './src'),
+    },
+  },
+});