-
-
{source}
+
+ {source}
+
+ )
+}
+
+// Status Badge
+function StatusBadge({ status, timeLeft }: { status: 'auction' | 'instant'; timeLeft?: string }) {
+ if (status === 'instant') {
+ return (
+
+
+ Instant
+
+ )
+ }
+
+ // Check urgency
+ const isUrgent = timeLeft?.includes('m') && !timeLeft?.includes('d') && !timeLeft?.includes('h')
+ const isWarning = timeLeft?.includes('h') && parseInt(timeLeft) <= 4
+
+ return (
+
+
+
+ {timeLeft}
+
)
}
+// Toggle Button
+function ToggleButton({
+ active,
+ onClick,
+ children
+}: {
+ active: boolean
+ onClick: () => void
+ children: React.ReactNode
+}) {
+ return (
+
+ )
+}
+
+// Dropdown Select
+function DropdownSelect({
+ value,
+ onChange,
+ options,
+ label
+}: {
+ value: string
+ onChange: (v: string) => void
+ options: { value: string; label: string }[]
+ label: string
+}) {
+ return (
+
+
+
+
+ )
+}
+
+// ============================================================================
+// MAIN COMPONENT
+// ============================================================================
+
export default function MarketPage() {
const { isAuthenticated, subscription } = useStore()
+ // Data State
const [auctions, setAuctions] = useState
([])
- const [directListings, setDirectListings] = useState([])
const [loading, setLoading] = useState(true)
const [refreshing, setRefreshing] = useState(false)
- // Filters
- const [hideSpam, setHideSpam] = useState(true) // Default: ON (as per concept)
+ // Filter State
+ const [hideSpam, setHideSpam] = useState(true) // Default: ON
const [pounceOnly, setPounceOnly] = useState(false)
- const [searchQuery, setSearchQuery] = useState('')
const [selectedTld, setSelectedTld] = useState('all')
const [selectedPrice, setSelectedPrice] = useState('all')
+ const [searchQuery, setSearchQuery] = useState('')
+
+ // Watchlist State
const [trackedDomains, setTrackedDomains] = useState>(new Set())
const [trackingInProgress, setTrackingInProgress] = useState(null)
-
- const isPaidUser = subscription?.tier === 'trader' || subscription?.tier === 'tycoon'
- // Load data
+ // Options
+ const TLD_OPTIONS = [
+ { value: 'all', label: 'All TLDs' },
+ { value: 'com', label: '.com' },
+ { value: 'ai', label: '.ai' },
+ { value: 'io', label: '.io' },
+ { value: 'ch', label: '.ch' },
+ { value: 'net', label: '.net' },
+ ]
+
+ const PRICE_OPTIONS = [
+ { value: 'all', label: 'Any Price' },
+ { value: '100', label: '< $100' },
+ { value: '1000', label: '< $1,000' },
+ { value: '10000', label: 'High Roller' },
+ ]
+
+ // Load Data
const loadData = useCallback(async () => {
setLoading(true)
try {
- const [auctionsData, listingsData] = await Promise.all([
- api.getAuctions().catch(() => ({ auctions: [] })),
- api.getMarketplaceListings().catch(() => ({ listings: [] })),
- ])
-
- setAuctions(auctionsData.auctions || [])
- setDirectListings(listingsData.listings || [])
+ const data = await api.getAuctions()
+ setAuctions(data.auctions || [])
} catch (error) {
console.error('Failed to load market data:', error)
} finally {
@@ -238,370 +313,314 @@ export default function MarketPage() {
setRefreshing(false)
}, [loadData])
- const handleTrackDomain = useCallback(async (domain: string) => {
- if (trackedDomains.has(domain)) return
+ const handleTrack = useCallback(async (domain: string) => {
+ if (trackedDomains.has(domain) || trackingInProgress) return
setTrackingInProgress(domain)
try {
await api.addDomain(domain)
setTrackedDomains(prev => new Set([...Array.from(prev), domain]))
} catch (error) {
- console.error('Failed to track domain:', error)
+ console.error('Failed to track:', error)
} finally {
setTrackingInProgress(null)
}
- }, [trackedDomains])
+ }, [trackedDomains, trackingInProgress])
- // Combine and filter market items
+ // Transform and Filter Data
const marketItems = useMemo(() => {
- const items: MarketItem[] = []
-
- // Add auctions (unless pounceOnly is active)
- if (!pounceOnly) {
- auctions.forEach(auction => {
- const score = calculatePounceScore(auction.domain, auction.tld, auction.num_bids, auction.age_years || undefined)
-
- // Apply spam filter
- if (hideSpam && !isCleanDomain(auction.domain, auction.tld)) return
-
- items.push({
- type: 'auction',
- domain: auction.domain,
- price: auction.current_bid,
- source: auction.platform,
- sourceIcon: auction.platform.toLowerCase() as any,
- status: 'auction',
- timeRemaining: auction.time_remaining,
- numBids: auction.num_bids,
- pounceScore: score,
- affiliateUrl: auction.affiliate_url,
- isPounce: false,
- ageYears: auction.age_years || undefined,
- })
- })
- }
-
- // Add Pounce Direct listings
- directListings.forEach(listing => {
- const tld = listing.domain.split('.').pop() || ''
- const score = calculatePounceScore(listing.domain, tld)
-
- // Apply spam filter
- if (hideSpam && !isCleanDomain(listing.domain, tld)) return
-
- items.push({
- type: 'direct',
- domain: listing.domain,
- price: listing.price,
- source: 'Pounce',
- sourceIcon: 'pounce',
- status: 'instant',
- pounceScore: score + 10, // Bonus for verified listings
- isPounce: true,
- verified: listing.verified,
- })
- })
-
- // Apply search filter
+ // Convert auctions to market items
+ 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' as const,
+ status: 'auction' as const,
+ timeLeft: auction.time_remaining,
+ source: auction.platform as any,
+ isPounce: false,
+ affiliateUrl: auction.affiliate_url,
+ tld: auction.tld,
+ numBids: auction.num_bids,
+ }))
+
+ // Apply Filters
let filtered = items
+
+ // 1. Hide Spam (Default: ON)
+ if (hideSpam) {
+ filtered = filtered.filter(item => !isSpamDomain(item.domain, item.tld))
+ }
+
+ // 2. Pounce Only
+ if (pounceOnly) {
+ filtered = filtered.filter(item => item.isPounce)
+ }
+
+ // 3. TLD Filter
+ if (selectedTld !== 'all') {
+ filtered = filtered.filter(item => item.tld === selectedTld)
+ }
+
+ // 4. Price Filter
+ if (selectedPrice !== 'all') {
+ const maxPrice = parseInt(selectedPrice)
+ if (selectedPrice === '10000') {
+ // High Roller = above $10k
+ filtered = filtered.filter(item => item.price >= 10000)
+ } else {
+ filtered = filtered.filter(item => item.price < maxPrice)
+ }
+ }
+
+ // 5. Search
if (searchQuery) {
const q = searchQuery.toLowerCase()
filtered = filtered.filter(item => item.domain.toLowerCase().includes(q))
}
-
- // Apply TLD filter
- if (selectedTld !== 'all') {
- filtered = filtered.filter(item => item.domain.endsWith(`.${selectedTld}`))
- }
-
- // Apply price filter
- if (selectedPrice !== 'all') {
- const maxPrice = parseInt(selectedPrice)
- filtered = filtered.filter(item => item.price <= maxPrice)
- }
-
- // Sort: Pounce Direct first, then by score
- filtered.sort((a, b) => {
- if (a.isPounce && !b.isPounce) return -1
- if (!a.isPounce && b.isPounce) return 1
- return b.pounceScore - a.pounceScore
- })
-
+
+ // Sort by Pounce Score (highest first)
+ filtered.sort((a, b) => b.pounceScore - a.pounceScore)
+
return filtered
- }, [auctions, directListings, hideSpam, pounceOnly, searchQuery, selectedTld, selectedPrice])
+ }, [auctions, hideSpam, pounceOnly, selectedTld, selectedPrice, searchQuery])
// Stats
const stats = useMemo(() => ({
total: marketItems.length,
- auctions: marketItems.filter(i => i.type === 'auction').length,
- direct: marketItems.filter(i => i.type === 'direct').length,
highScore: marketItems.filter(i => i.pounceScore >= 80).length,
+ avgScore: marketItems.length > 0
+ ? Math.round(marketItems.reduce((sum, i) => sum + i.pounceScore, 0) / marketItems.length)
+ : 0,
}), [marketItems])
- // Table columns
- const columns = useMemo(() => [
- {
- key: 'domain',
- header: 'Domain',
- render: (item: MarketItem) => (
-
-
- {item.isPounce && }
- {item.domain}
- {item.verified && (
- ✓ Verified
- )}
-
-
-
-
-
-
- {formatCurrency(item.price)}
-
- {item.type === 'auction' && (
- (Bid)
- )}
-
- ),
- },
- {
- key: 'status',
- header: 'Status / Time',
- align: 'center' as const,
- hideOnMobile: true,
- render: (item: MarketItem) => {
- if (item.type === 'direct') {
- return (
-
-
- Instant
-
- )
- }
-
- const isUrgent = item.timeRemaining?.includes('m') && !item.timeRemaining?.includes('h')
- const isWarning = item.timeRemaining?.includes('h') && parseInt(item.timeRemaining) < 2
-
- return (
-
-
- {item.timeRemaining}
-
- )
- },
- },
- {
- key: 'source',
- header: 'Source',
- align: 'center' as const,
- hideOnMobile: true,
- render: (item: MarketItem) => ,
- },
- {
- key: 'actions',
- header: '',
- align: 'right' as const,
- render: (item: MarketItem) => (
-
-
-
- {item.isPounce ? 'Buy' : 'Bid'}
- {!item.isPounce && }
-
-
-
- 0}
- />
-
-
-
-
- {/* Filter Toggles (as per concept) */}
-
-
- Filters:
-
-
- {/* Hide Spam Toggle - Default ON */}
-
-
- {/* Pounce Direct Only Toggle */}
-
-
-
- {/* Search & Dropdowns */}
-
-
-
-
-
-
- {/* Upgrade Notice for Scout */}
- {!isPaidUser && (
-
-
-
+
+
+ {/* ================================================================ */}
+ {/* FILTER BAR */}
+ {/* ================================================================ */}
+
+
+ {/* Filter Icon */}
+
+
+ Filters
-
-
Upgrade for Full Market Intelligence
-
- See Pounce Scores for all domains, unlock advanced filters, and get notified on deals.
-
+
+ {/* Toggle: Hide Spam (Default ON) */}
+
setHideSpam(!hideSpam)}>
+ Hide Spam
+
+
+ {/* Toggle: Pounce Direct Only */}
+
setPounceOnly(!pounceOnly)}>
+
+ Pounce Only
+
+
+ {/* Divider */}
+
+
+ {/* Dropdown: TLD */}
+
+
+ {/* Dropdown: Price */}
+
+
+ {/* Search */}
+
+ setSearchQuery(e.target.value)}
+ placeholder="Search domains..."
+ className="w-full px-4 py-2 bg-zinc-800/50 border border-zinc-700/50 rounded-lg
+ text-sm text-zinc-300 placeholder:text-zinc-600
+ focus:outline-none focus:border-emerald-500/50 transition-all"
+ />
-
- Upgrade
-
+
+
- )}
+
- {/* Market Table */}
-
`${item.domain}-${item.source}`}
- loading={loading}
- emptyIcon={}
- emptyTitle={searchQuery ? `No listings matching "${searchQuery}"` : "No listings found"}
- emptyDescription="Try adjusting your filters or check back later"
- columns={columns}
- />
-
+ {/* ================================================================ */}
+ {/* MARKET TABLE */}
+ {/* ================================================================ */}
+
+
+ {/* Table Header */}
+
+
Domain
+
Score
+
Price / Bid
+
Status
+
Source
+
Action
+
+
+ {/* Table Body */}
+ {loading ? (
+
+
+
+ ) : marketItems.length === 0 ? (
+
+
+
No domains match your filters
+
Try adjusting your filter settings
+
+ ) : (
+
+ {marketItems.map((item) => (
+
+ {/* Domain */}
+
+
+ {item.isPounce && (
+
+ )}
+
+
{item.domain}
+ {item.verified && (
+
+ ✓ Verified
+
+ )}
+ {/* Mobile: Show score inline */}
+
+
+
+
+
+
+
+
+ {/* Pounce Score */}
+
+
+
+
+ {/* Price / Bid */}
+
+
+ {formatPrice(item.price)}
+
+ {item.priceType === 'bid' && (
+
(bid)
+ )}
+ {item.numBids && item.numBids > 0 && (
+
{item.numBids} bids
+ )}
+
+
+ {/* Status / Time */}
+
+
+
+
+ {/* Source */}
+
+
+
+
+ {/* Actions */}
+
+ {/* Track Button */}
+
+
+ {/* Action Button */}
+
+ {item.isPounce ? 'Buy' : 'Bid'}
+
+
+
+
+ ))}
+
+ )}
+
+
+ Showing {marketItems.length} of {auctions.length} total listings
+
+
+ Data from GoDaddy, Sedo, NameJet, DropCatch • Updated every 15 minutes
+
+
+
+
)
}