- {/* View Tabs */}
-
- {views.map((view) => (
-
- ))}
-
-
- {/* Filters */}
-
- {/* Search */}
-
-
- setSearchQuery(e.target.value)}
- placeholder="Search domains..."
- className="w-full h-10 pl-10 pr-4 bg-background-secondary border border-border rounded-lg
- text-sm text-foreground placeholder:text-foreground-subtle
- focus:outline-none focus:border-accent"
- />
-
-
- {/* Platform Filter */}
-
-
-
-
-
- {/* Sort */}
-
-
-
-
-
-
- {/* Stats Bar */}
-
- {filteredAuctions.length} auctions
- โข
-
-
- {platforms.length} platforms
-
-
-
- {/* Auction List */}
- {loading ? (
-
- {[...Array(5)].map((_, i) => (
-
- ))}
-
- ) : filteredAuctions.length === 0 ? (
-
-
-
No auctions found
-
Try adjusting your filters
-
- ) : (
-
- {filteredAuctions.map((auction, idx) => (
-
-
- {/* Domain Info */}
-
-
-
{auction.domain}
-
- {auction.platform}
-
-
-
-
-
- {auction.time_remaining}
-
- {auction.num_bids} bids
-
-
-
- {/* Price + Action */}
-
-
-
${auction.current_bid.toLocaleString()}
-
Current bid
-
-
- Bid
-
-
-
-
-
- ))}
-
- )}
+
+
+
+
Redirecting to Market...
-
+
)
}
-
diff --git a/frontend/src/app/terminal/market/page.tsx b/frontend/src/app/terminal/market/page.tsx
index 540bf8c..ef02922 100644
--- a/frontend/src/app/terminal/market/page.tsx
+++ b/frontend/src/app/terminal/market/page.tsx
@@ -1,6 +1,6 @@
'use client'
-import { useEffect, useState, useMemo, useCallback } from 'react'
+import { useEffect, useState, useMemo, useCallback, memo } from 'react'
import { useStore } from '@/lib/store'
import { api } from '@/lib/api'
import { TerminalLayout } from '@/components/TerminalLayout'
@@ -27,101 +27,48 @@ import {
SlidersHorizontal,
MoreHorizontal,
Eye,
- Info
+ Info,
+ ShieldCheck,
+ Sparkles,
+ Store
} from 'lucide-react'
import clsx from 'clsx'
+import Link from 'next/link'
// ============================================================================
// TYPES
// ============================================================================
-interface Auction {
- domain: string
- platform: string
- platform_url?: string
- current_bid: number
- currency?: string
- num_bids: number
- time_remaining: string
- end_time: string
- buy_now_price?: number | null
- reserve_met?: boolean | null
- traffic?: number | null
- tld: string
- affiliate_url: string
- age_years?: number | null
-}
-
interface MarketItem {
id: string
domain: string
- pounceScore: number
- price: number
- priceType: 'bid' | 'fixed'
- status: 'auction' | 'instant'
- timeLeft?: string
- endTime?: string
- source: 'GoDaddy' | 'Sedo' | 'NameJet' | 'DropCatch' | 'Pounce'
- isPounce: boolean
- verified?: boolean
- affiliateUrl?: string
tld: string
- numBids?: number
+ price: number
+ currency: string
+ price_type: 'bid' | 'fixed' | 'negotiable'
+ status: 'auction' | 'instant'
+ source: string
+ is_pounce: boolean
+ verified: boolean
+ time_remaining?: string
+ end_time?: string
+ num_bids?: number
+ slug?: string
+ seller_verified: boolean
+ url: string
+ is_external: boolean
+ pounce_score: number
}
type SortField = 'domain' | 'score' | 'price' | 'time' | 'source'
type SortDirection = 'asc' | 'desc'
+type SourceFilter = 'all' | 'pounce' | 'external'
+type PriceRange = 'all' | 'low' | 'mid' | 'high'
// ============================================================================
-// POUNCE SCORE ALGORITHM
+// HELPER FUNCTIONS
// ============================================================================
-function calculatePounceScore(domain: string, tld: string, numBids?: number, ageYears?: number): number {
- let score = 50
- const name = domain.split('.')[0]
-
- // Length bonus
- if (name.length <= 3) score += 30
- else if (name.length === 4) score += 25
- else if (name.length === 5) score += 20
- else if (name.length <= 7) score += 10
- else if (name.length <= 10) score += 5
- else score -= 5
-
- // Premium TLD bonus
- if (['com', 'ai', 'io'].includes(tld)) score += 15
- else if (['co', 'net', 'org', 'ch', 'de'].includes(tld)) score += 10
- else if (['app', 'dev', 'xyz'].includes(tld)) score += 5
-
- // Age bonus
- if (ageYears && ageYears > 15) score += 10
- else if (ageYears && ageYears > 10) score += 7
- else if (ageYears && ageYears > 5) score += 3
-
- // Activity bonus
- if (numBids && numBids >= 20) score += 8
- else if (numBids && numBids >= 10) score += 5
- else if (numBids && numBids >= 5) score += 2
-
- // Penalties
- if (name.includes('-')) score -= 25
- if (/\d/.test(name) && name.length > 3) score -= 20
- if (name.length > 15) score -= 15
- if (/(.)\1{2,}/.test(name)) score -= 10
-
- return Math.max(0, Math.min(100, score))
-}
-
-function isSpamDomain(domain: string, tld: string): boolean {
- const name = domain.split('.')[0]
- if (name.includes('-')) return true
- if (/\d/.test(name) && name.length > 4) return true
- if (name.length > 20) return true
- if (!['com', 'ai', 'io', 'co', 'net', 'org', 'ch', 'de', 'app', 'dev', 'xyz', 'tech', 'cloud'].includes(tld)) return true
- return false
-}
-
-// Parse time remaining to seconds
function parseTimeToSeconds(timeStr?: string): number {
if (!timeStr) return Infinity
let seconds = 0
@@ -134,62 +81,68 @@ function parseTimeToSeconds(timeStr?: string): number {
return seconds || Infinity
}
+function formatPrice(price: number, currency = 'USD'): string {
+ return new Intl.NumberFormat('en-US', {
+ style: 'currency',
+ currency,
+ maximumFractionDigits: 0
+ }).format(price)
+}
+
// ============================================================================
// COMPONENTS
// ============================================================================
-// Tooltip Component
-function Tooltip({ children, content }: { children: React.ReactNode; content: string }) {
- return (
-
- {children}
-
- {content}
- {/* Arrow */}
-
-
+// Tooltip
+const Tooltip = memo(({ children, content }: { children: React.ReactNode; content: string }) => (
+
+))
+Tooltip.displayName = 'Tooltip'
// Stat Card
-function StatCard({
+const StatCard = memo(({
label,
value,
subValue,
icon: Icon,
- trend
+ highlight
}: {
label: string
value: string | number
subValue?: string
- icon: any
- trend?: 'up' | 'down' | 'neutral'
-}) {
- return (
-
-
-
-
{label}
-
- {value}
- {subValue && {subValue}}
-
-
-
-
+ icon: React.ElementType
+ highlight?: boolean
+}) => (
+
+
+
+
{label}
+
+ {value}
+ {subValue && {subValue}}
- )
-}
+
+
+
+
+))
+StatCard.displayName = 'StatCard'
-// Score Ring (Desktop) / Badge (Mobile)
-function ScoreDisplay({ score, mobile = false }: { score: number; mobile?: boolean }) {
+// Score Ring
+const ScoreDisplay = memo(({ score, mobile = false }: { score: number; mobile?: boolean }) => {
const color = score >= 80 ? 'text-emerald-500' : score >= 50 ? 'text-amber-500' : 'text-zinc-600'
if (mobile) {
@@ -234,31 +187,43 @@ function ScoreDisplay({ score, mobile = false }: { score: number; mobile?: boole
)
-}
+})
+ScoreDisplay.displayName = 'ScoreDisplay'
-// Minimal Toggle
-function FilterToggle({ active, onClick, label }: { active: boolean; onClick: () => void; label: string }) {
- return (
-
- )
-}
+// Filter Toggle
+const FilterToggle = memo(({ active, onClick, label, icon: Icon }: {
+ active: boolean
+ onClick: () => void
+ label: string
+ icon?: React.ElementType
+}) => (
+
+))
+FilterToggle.displayName = 'FilterToggle'
// Sort Header
-function SortableHeader({
+const SortableHeader = memo(({
label, field, currentSort, currentDirection, onSort, align = 'left', tooltip
}: {
- label: string; field: SortField; currentSort: SortField; currentDirection: SortDirection; onSort: (field: SortField) => void; align?: 'left'|'center'|'right'; tooltip?: string
-}) {
+ label: string
+ field: SortField
+ currentSort: SortField
+ currentDirection: SortDirection
+ onSort: (field: SortField) => void
+ align?: 'left'|'center'|'right'
+ tooltip?: string
+}) => {
const isActive = currentSort === field
return (
)
-}
+})
+SortableHeader.displayName = 'SortableHeader'
+
+// Pounce Direct Badge
+const PounceBadge = memo(({ verified }: { verified: boolean }) => (
+
+ {verified ? (
+ <>
+
+ Verified
+
+ ) : (
+ <>
+
+ Pounce
+
+ )}
+
+))
+PounceBadge.displayName = 'PounceBadge'
// ============================================================================
// MAIN PAGE
@@ -296,15 +285,16 @@ export default function MarketPage() {
const { subscription } = useStore()
// Data
- const [auctions, setAuctions] = useState
([])
+ const [items, setItems] = useState([])
const [loading, setLoading] = useState(true)
const [refreshing, setRefreshing] = useState(false)
+ const [stats, setStats] = useState({ total: 0, pounceCount: 0, auctionCount: 0, highScore: 0 })
// Filters
- const [hideSpam, setHideSpam] = useState(true)
- const [pounceOnly, setPounceOnly] = useState(false)
+ const [sourceFilter, setSourceFilter] = useState('all')
const [searchQuery, setSearchQuery] = useState('')
- const [priceRange, setPriceRange] = useState<'all' | 'low' | 'mid' | 'high'>('all')
+ const [priceRange, setPriceRange] = useState('all')
+ const [verifiedOnly, setVerifiedOnly] = useState(false)
// Sort
const [sortField, setSortField] = useState('score')
@@ -314,18 +304,36 @@ export default function MarketPage() {
const [trackedDomains, setTrackedDomains] = useState>(new Set())
const [trackingInProgress, setTrackingInProgress] = useState(null)
- // Load
+ // Load data
const loadData = useCallback(async () => {
setLoading(true)
try {
- const data = await api.getAuctions()
- setAuctions(data.auctions || [])
+ const result = await api.getMarketFeed({
+ source: sourceFilter,
+ keyword: searchQuery || undefined,
+ minPrice: priceRange === 'low' ? undefined : priceRange === 'mid' ? 100 : priceRange === 'high' ? 1000 : undefined,
+ maxPrice: priceRange === 'low' ? 100 : priceRange === 'mid' ? 1000 : undefined,
+ verifiedOnly,
+ sortBy: sortField === 'score' ? 'score' :
+ sortField === 'price' ? (sortDirection === 'asc' ? 'price_asc' : 'price_desc') :
+ sortField === 'time' ? 'time' : 'newest',
+ limit: 100
+ })
+
+ setItems(result.items || [])
+ setStats({
+ total: result.total,
+ pounceCount: result.pounce_direct_count,
+ auctionCount: result.auction_count,
+ highScore: (result.items || []).filter(i => i.pounce_score >= 80).length
+ })
} catch (error) {
console.error('Failed to load market data:', error)
+ setItems([])
} finally {
setLoading(false)
}
- }, [])
+ }, [sourceFilter, searchQuery, priceRange, verifiedOnly, sortField, sortDirection])
useEffect(() => { loadData() }, [loadData])
@@ -336,8 +344,9 @@ export default function MarketPage() {
}, [loadData])
const handleSort = useCallback((field: SortField) => {
- if (sortField === field) setSortDirection(d => d === 'asc' ? 'desc' : 'asc')
- else {
+ if (sortField === field) {
+ setSortDirection(d => d === 'asc' ? 'desc' : 'asc')
+ } else {
setSortField(field)
setSortDirection(field === 'score' || field === 'price' ? 'desc' : 'asc')
}
@@ -349,81 +358,68 @@ export default function MarketPage() {
try {
await api.addDomain(domain)
setTrackedDomains(prev => new Set([...Array.from(prev), domain]))
- } catch (error) { console.error(error) } finally { setTrackingInProgress(null) }
+ } catch (error) {
+ console.error(error)
+ } finally {
+ setTrackingInProgress(null)
+ }
}, [trackedDomains, trackingInProgress])
- // Transform & Filter
- const marketItems = useMemo(() => {
- const items: MarketItem[] = auctions.map(auction => ({
- id: `${auction.domain}-${auction.platform}`,
- domain: auction.domain,
- pounceScore: calculatePounceScore(auction.domain, auction.tld, auction.num_bids, auction.age_years ?? undefined),
- price: auction.current_bid,
- priceType: 'bid',
- status: 'auction',
- timeLeft: auction.time_remaining,
- endTime: auction.end_time,
- source: auction.platform as any,
- isPounce: false,
- affiliateUrl: auction.affiliate_url,
- tld: auction.tld,
- numBids: auction.num_bids,
- }))
-
+ // Client-side filtering for immediate UI feedback
+ const filteredItems = useMemo(() => {
let filtered = items
- if (hideSpam) filtered = filtered.filter(item => !isSpamDomain(item.domain, item.tld))
- if (pounceOnly) filtered = filtered.filter(item => item.isPounce)
- if (priceRange === 'low') filtered = filtered.filter(item => item.price < 100)
- if (priceRange === 'mid') filtered = filtered.filter(item => item.price >= 100 && item.price < 1000)
- if (priceRange === 'high') filtered = filtered.filter(item => item.price >= 1000)
- if (searchQuery) filtered = filtered.filter(item => item.domain.toLowerCase().includes(searchQuery.toLowerCase()))
+ // Additional client-side search (API already filters, but this is for instant feedback)
+ if (searchQuery && !loading) {
+ const query = searchQuery.toLowerCase()
+ filtered = filtered.filter(item => item.domain.toLowerCase().includes(query))
+ }
+
+ // Sort
const mult = sortDirection === 'asc' ? 1 : -1
- filtered.sort((a, b) => {
+ filtered = [...filtered].sort((a, b) => {
+ // Pounce Direct always appears first within same score tier
+ if (a.is_pounce !== b.is_pounce && sortField === 'score') {
+ return a.is_pounce ? -1 : 1
+ }
+
switch (sortField) {
case 'domain': return mult * a.domain.localeCompare(b.domain)
- case 'score': return mult * (a.pounceScore - b.pounceScore)
+ case 'score': return mult * (a.pounce_score - b.pounce_score)
case 'price': return mult * (a.price - b.price)
- case 'time': return mult * (parseTimeToSeconds(a.timeLeft) - parseTimeToSeconds(b.timeLeft))
+ case 'time': return mult * (parseTimeToSeconds(a.time_remaining) - parseTimeToSeconds(b.time_remaining))
case 'source': return mult * a.source.localeCompare(b.source)
default: return 0
}
})
+
return filtered
- }, [auctions, hideSpam, pounceOnly, priceRange, searchQuery, sortField, sortDirection])
+ }, [items, searchQuery, sortField, sortDirection, loading])
- // Stats
- const stats = useMemo(() => ({
- total: marketItems.length,
- highScore: marketItems.filter(i => i.pounceScore >= 80).length,
- endingSoon: marketItems.filter(i => parseTimeToSeconds(i.timeLeft) < 3600).length,
- avgPrice: marketItems.length > 0 ? Math.round(marketItems.reduce((acc, i) => acc + i.price, 0) / marketItems.length) : 0
- }), [marketItems])
-
- const formatPrice = (price: number) => new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD', maximumFractionDigits: 0 }).format(price)
+ // Separate Pounce Direct from external
+ const pounceItems = useMemo(() => filteredItems.filter(i => i.is_pounce), [filteredItems])
+ const externalItems = useMemo(() => filteredItems.filter(i => !i.is_pounce), [filteredItems])
return (
- {/* Page-specific emerald glow (mirrors landing page look) */}
+ {/* Ambient glow */}
{/* METRICS */}
-
-
- 5 ? 'down' : 'neutral'} />
-
+
+ 0} />
+
+
{/* CONTROLS */}
@@ -444,17 +440,38 @@ export default function MarketPage() {
{/* Filters */}
-
-
setHideSpam(!hideSpam)} label="No Spam" />
- setPounceOnly(!pounceOnly)} label="Pounce Exclusive" />
+
+
setSourceFilter(f => f === 'pounce' ? 'all' : 'pounce')}
+ label="Pounce Only"
+ icon={Diamond}
+ />
+ setVerifiedOnly(!verifiedOnly)}
+ label="Verified"
+ icon={ShieldCheck}
+ />
- setPriceRange(p => p === 'low' ? 'all' : 'low')} label="< $100" />
- setPriceRange(p => p === 'high' ? 'all' : 'high')} label="$1k+" />
+ setPriceRange(p => p === 'low' ? 'all' : 'low')}
+ label="< $100"
+ />
+ setPriceRange(p => p === 'high' ? 'all' : 'high')}
+ label="$1k+"
+ />
- ) : marketItems.length === 0 ? (
+ ) : filteredItems.length === 0 ? (
@@ -477,151 +494,242 @@ export default function MarketPage() {
Try adjusting your filters
) : (
- <>
- {/* DESKTOP TABLE */}
-
-
-
- {marketItems.map((item) => {
- const timeLeftSec = parseTimeToSeconds(item.timeLeft)
- const isUrgent = timeLeftSec < 3600
- return (
-
+
+
+ {/* POUNCE DIRECT SECTION (if any) */}
+ {pounceItems.length > 0 && (
+
+
+
+
+ Pounce Direct
+
+
Verified โข Instant Buy โข 0% Commission
+
+
+
+
+ {pounceItems.map((item) => (
+
{/* Domain */}
-
+
- {item.isPounce && (
-
-
-
- )}
+
-
{item.domain}
-
- {item.source}
-
+
{item.domain}
+
+
{/* Score */}
-
+
+
+
+
{/* Price */}
-
-
-
{formatPrice(item.price)}
- {item.numBids !== undefined && item.numBids > 0 &&
{item.numBids} bids
}
-
+
{formatPrice(item.price, item.currency)}
+
Instant Buy
- {/* Time */}
-
-
-
-
- {item.timeLeft}
-
-
-
- {/* Actions */}
-
- {/* Monitor Button - Distinct Style & Spacing */}
-
+
+ {/* Action */}
+
+
- {/* Buy Button */}
-
-
- {item.isPounce ? 'Buy Now' : 'Place Bid'}
-
-
-
+
+ Buy Now
+
+
- )
- })}
+ ))}
+
-
-
- {/* MOBILE CARDS */}
-
- {marketItems.map((item) => {
- const timeLeftSec = parseTimeToSeconds(item.timeLeft)
- const isUrgent = timeLeftSec < 3600
- return (
-
-
-
- {item.isPounce && }
- {item.domain}
-
-
+ )}
+
+ {/* EXTERNAL AUCTIONS */}
+ {externalItems.length > 0 && (
+
+
+
+
+ External Auctions
+
+
{externalItems.length} from global platforms
+
+
+
+ {/* Desktop Table */}
+
+
+
+
-
-
-
-
Current Bid
-
{formatPrice(item.price)}
-
-
-
Ends In
-
-
- {item.timeLeft}
-
-
+
+
-
-
-
-
- {item.isPounce ? 'Buy Now' : 'Place Bid'}
-
-
+
+
+
+
+
+
+
+ Action
- )
- })}
-
-
+
+
+ {externalItems.map((item) => {
+ const timeLeftSec = parseTimeToSeconds(item.time_remaining)
+ const isUrgent = timeLeftSec < 3600
+ return (
+
+ {/* Domain */}
+
+
{item.domain}
+
{item.source}
+
+
+ {/* Score */}
+
+
+
+
+ {/* Price */}
+
+
{formatPrice(item.price, item.currency)}
+ {item.num_bids !== undefined && item.num_bids > 0 && (
+
{item.num_bids} bids
+ )}
+
+
+ {/* Time */}
+
+
+
+ {item.time_remaining || 'N/A'}
+
+
+
+ {/* Actions */}
+
+
+
+
+
+
+ Place Bid
+
+
+
+
+ )
+ })}
+
+
+
+ {/* Mobile Cards */}
+
+ {externalItems.map((item) => {
+ const timeLeftSec = parseTimeToSeconds(item.time_remaining)
+ const isUrgent = timeLeftSec < 3600
+ return (
+
+
+ {item.domain}
+
+
+
+
+
+
Current Bid
+
{formatPrice(item.price, item.currency)}
+
+
+
Ends In
+
+
+ {item.time_remaining || 'N/A'}
+
+
+
+
+
+
+
+ Place Bid
+
+
+
+
+ )
+ })}
+
+
+ )}
+
)}
diff --git a/frontend/src/lib/api.ts b/frontend/src/lib/api.ts
index 246217f..1686610 100644
--- a/frontend/src/lib/api.ts
+++ b/frontend/src/lib/api.ts
@@ -572,6 +572,69 @@ class ApiClient {
return this.request
(`/portfolio/valuation/${domain}`)
}
+ // ============== Market Feed (Unified) ==============
+
+ /**
+ * Get unified market feed combining Pounce Direct listings + external auctions.
+ * This is the main feed for the Market page.
+ */
+ async getMarketFeed(options: {
+ source?: 'all' | 'pounce' | 'external'
+ keyword?: string
+ tld?: string
+ minPrice?: number
+ maxPrice?: number
+ minScore?: number
+ endingWithin?: number
+ verifiedOnly?: boolean
+ sortBy?: 'score' | 'price_asc' | 'price_desc' | 'time' | 'newest'
+ limit?: number
+ offset?: number
+ } = {}) {
+ const params = new URLSearchParams()
+
+ if (options.source) params.append('source', options.source)
+ if (options.keyword) params.append('keyword', options.keyword)
+ if (options.tld) params.append('tld', options.tld)
+ if (options.minPrice !== undefined) params.append('min_price', options.minPrice.toString())
+ if (options.maxPrice !== undefined) params.append('max_price', options.maxPrice.toString())
+ if (options.minScore !== undefined) params.append('min_score', options.minScore.toString())
+ if (options.endingWithin !== undefined) params.append('ending_within', options.endingWithin.toString())
+ if (options.verifiedOnly) params.append('verified_only', 'true')
+ if (options.sortBy) params.append('sort_by', options.sortBy)
+ if (options.limit !== undefined) params.append('limit', options.limit.toString())
+ if (options.offset !== undefined) params.append('offset', options.offset.toString())
+
+ return this.request<{
+ items: Array<{
+ id: string
+ domain: string
+ tld: string
+ price: number
+ currency: string
+ price_type: 'bid' | 'fixed' | 'negotiable'
+ status: 'auction' | 'instant'
+ source: string
+ is_pounce: boolean
+ verified: boolean
+ time_remaining?: string
+ end_time?: string
+ num_bids?: number
+ slug?: string
+ seller_verified: boolean
+ url: string
+ is_external: boolean
+ pounce_score: number
+ }>
+ total: number
+ pounce_direct_count: number
+ auction_count: number
+ sources: string[]
+ last_updated: string
+ filters_applied: Record
+ }>(`/auctions/feed?${params.toString()}`)
+ }
+
// ============== Auctions (Smart Pounce) ==============
async getAuctions(