From b9f747b49e78470b7a82315d2cb4795390a78e36 Mon Sep 17 00:00:00 2001 From: DangDuyLe Date: Tue, 25 Mar 2025 22:47:31 +0700 Subject: [PATCH 01/19] Enhance Transaction Explorer with animated sections and improved loading states --- app/page.tsx | 126 +++- app/transactions/page.tsx | 144 +++-- components/transactions/CoinAnalytics.tsx | 257 +++++--- components/transactions/RevenueGraph.tsx | 724 ++++++++++++++-------- 4 files changed, 832 insertions(+), 419 deletions(-) diff --git a/app/page.tsx b/app/page.tsx index cf5a49b..2744a8c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -650,42 +650,122 @@ const LandingPage = () => { {/* Click-to-Earn Game - NEW FEATURE */} -
-
+
+
NEW
-
+
+
-

Clicker Game

-

+

Clicker Game

+

Earn PATH tokens by playing our addictive click-to-earn game with upgrades and boosts.

- - Play Now → + + Play Now +
+
+ + {/* Add Trophy Game Feature - NEW */} +
+
+ BETA +
+
+
+ + + + + + + + +
+

Achievements

+

+ Complete challenges, earn rewards, and showcase your trophies in your personalized digital showcase. +

+ + View Achievements + +
{/* Call to Action */} -
-
-

- Ready to Start Your Crypto Journey? -

-

- Join thousands of users exploring the crypto universe with CryptoPath -

- -
- - Get Started Now - - - Try the Game - +
+ {/* Background Elements */} +
+
+ + {/* Animated Glow Effects */} +
+
+ +
+
+ ✨ + +

+ Ready to Start Your Crypto Journey? +

+ +
+ +

+ Join thousands of users exploring the crypto universe with CryptoPath's intuitive tools and comprehensive analytics +

+ +
+ + + + + + + +
+ + {/* Trust indicators */} +
+

Trusted by crypto enthusiasts

+
+ + + + + + + + + + + + + + + + 4.9/5 +
+

Based on 2,500+ user reviews

+
diff --git a/app/transactions/page.tsx b/app/transactions/page.tsx index cea46ad..d5bebb4 100644 --- a/app/transactions/page.tsx +++ b/app/transactions/page.tsx @@ -8,73 +8,145 @@ import WalletCharts from '@/components/transactions/WalletCharts'; import TransactionSection from '@/components/transactions/TransactionSection'; import TradingViewLayout from '@/components/transactions/TradingViewLayout'; import { Card, CardContent } from "@/components/ui/card"; -import { Loader2 } from "lucide-react"; +import { Loader2, BarChart3, Wallet, LineChart, Activity, History } from "lucide-react"; import { CoinOption } from "@/services/cryptoService"; +import { motion } from "framer-motion"; // Loading component const LoadingCard = ({ children }: { children: React.ReactNode }) => ( - - - -

{children}

+ + + +

{children}

 ); -// Error boundary component -const ErrorCard = ({ error }: { error: string }) => ( - - - {error} - - +// Section header component +const SectionHeader = ({ icon, title, description }: { icon: React.ReactNode, title: string, description: string }) => ( + +
+
+ {icon} +
+

{title}

+
+

{description}

+ ); export default function TransactionExplorer() { const [selectedCoin, setSelectedCoin] = useState(null); + // Animation variants for staggered animations + const containerVariants = { + hidden: { opacity: 0 }, + visible: { + opacity: 1, + transition: { + staggerChildren: 0.15 + } + } + }; + + const itemVariants = { + hidden: { opacity: 0, y: 20 }, + visible: { opacity: 1, y: 0, transition: { duration: 0.6 } } + }; + return (
- + {/* Fix: Keep particles background with correct z-index */} +
+ +
-
-
- {/* Revenue Graph */} -
- Loading revenue graph...}> + +
+ {/* Page Title */} + +

+ Cryptocurrency Transaction Explorer +

+

+ Analyze real-time cryptocurrency market data, track transactions, and monitor network statistics +

+ + + {/* Revenue Graph Section */} + + } + title="Market Analytics" + description="Track price and volume movements of cryptocurrencies with detailed historical data" + /> + Loading market analytics...}> -
+ - {/* Wallet Charts */} -
- Loading wallet charts...}> + {/* Wallet Charts Section */} + + } + title="Wallet Statistics" + description="Visual representation of wallet activities and distribution across the blockchain" + /> + Loading wallet statistics...}> -
+ - {/* Binance Trading View - New Component */} -
- Loading trading view...}> + {/* Trading View Section */} + + } + title="Live Trading Charts" + description="Professional trading charts with technical analysis indicators powered by TradingView" + /> + Loading trading charts...}> -
+ - {/* Network Stats */} -
- Loading network stats...}> + {/* Network Stats Section */} + + } + title="Network Health" + description="Real-time stats tracking blockchain network performance, congestion, and gas fees" + /> + Loading network health data...}> -
+ - {/* Transaction Section - At the very end */} -
- Loading transactions...}> + {/* Transaction Section */} + + } + title="Recent Transactions" + description="Latest blockchain transactions with detailed insights and tracking information" + /> + Loading transaction history...}> -
+
-
+
); } \ No newline at end of file diff --git a/components/transactions/CoinAnalytics.tsx b/components/transactions/CoinAnalytics.tsx index 7af07a5..ebbfcec 100644 --- a/components/transactions/CoinAnalytics.tsx +++ b/components/transactions/CoinAnalytics.tsx @@ -1,27 +1,67 @@ 'use client'; -import { useEffect, useState } from "react"; +import { useEffect, useState, useRef } from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { fetchChainAnalytics, ChainAnalytics, CoinOption } from "@/services/cryptoService"; import { Loader2, AlertCircle, RefreshCcw, Users, ArrowDownToLine, Coins, Building2 } from "lucide-react"; import { Button } from "@/components/ui/button"; +import { motion } from "framer-motion"; interface CoinAnalyticsProps { selectedCoin: CoinOption; + cooldownTime?: number; } -export default function CoinAnalytics({ selectedCoin }: CoinAnalyticsProps) { +// Cache for analytics data +const analyticsCache = new Map(); +const DEFAULT_COOLDOWN = 30 * 1000; // Default 30 seconds + +export default function CoinAnalytics({ selectedCoin, cooldownTime = DEFAULT_COOLDOWN }: CoinAnalyticsProps) { const [analytics, setAnalytics] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); const [retryCount, setRetryCount] = useState(0); + const lastFetchTimeRef = useRef(0); + const [nextRefreshTime, setNextRefreshTime] = useState(0); useEffect(() => { const fetchData = async () => { + const cacheKey = selectedCoin.id; + const cachedData = analyticsCache.get(cacheKey); + const now = Date.now(); + + // Use cached data if available and not expired + if (cachedData && (now - cachedData.timestamp < cooldownTime)) { + setAnalytics(cachedData.data); + setLoading(false); + return; + } + + // Check cooldown period + if (now - lastFetchTimeRef.current < cooldownTime) { + // If we have cached data, use it + if (cachedData) { + setAnalytics(cachedData.data); + setLoading(false); + return; + } + } + + // Update fetch time + lastFetchTimeRef.current = now; + setNextRefreshTime(now + cooldownTime); + try { setLoading(true); setError(null); const data = await fetchChainAnalytics(selectedCoin.id); + + // Cache the result + analyticsCache.set(cacheKey, { + data, + timestamp: now + }); + setAnalytics(data); } catch (err) { setError('Failed to fetch analytics data'); @@ -32,9 +72,19 @@ export default function CoinAnalytics({ selectedCoin }: CoinAnalyticsProps) { }; fetchData(); - }, [selectedCoin.id, retryCount]); + + // Set up periodic refresh within cooldown + const refreshInterval = setInterval(() => { + if (Date.now() >= nextRefreshTime) { + fetchData(); + } + }, cooldownTime); + + return () => clearInterval(refreshInterval); + }, [selectedCoin.id, retryCount, cooldownTime]); const handleRetry = () => { + if (Date.now() < nextRefreshTime) return; // Still cooling down setRetryCount(prev => prev + 1); }; @@ -51,14 +101,31 @@ export default function CoinAnalytics({ selectedCoin }: CoinAnalyticsProps) { return `${sign}${value.toFixed(2)}%`; }; + // Animation variants for staggered animations + const container = { + hidden: { opacity: 0 }, + show: { + opacity: 1, + transition: { + staggerChildren: 0.1 + } + } + }; + + const item = { + hidden: { opacity: 0, y: 20 }, + show: { opacity: 1, y: 0, transition: { type: "spring", stiffness: 300, damping: 24 } } + }; + + // Use simplified loading state for better performance if (loading) { return ( -
+
{[1, 2, 3, 4].map((i) => ( - - - - + +
+
+
))}
@@ -67,95 +134,97 @@ export default function CoinAnalytics({ selectedCoin }: CoinAnalyticsProps) { if (error || !analytics) { return ( -
- -

{error}

- -
- ); - } - - return ( -
- {/* UAW */} - - -
- - UAW -
- - -

- {formatNumber(analytics.uniqueActiveWallets)} -

-

= 0 ? 'text-green-500' : 'text-red-500'}`}> - {formatPercentage(analytics.dailyChange.uaw)} -

+ + + +

{error}

+ + ); + } - {/* Incoming Transactions */} - - -
- - Incoming Txs -
- - -

- {formatNumber(analytics.incomingTransactions)} -

-

= 0 ? 'text-green-500' : 'text-red-500'}`}> - {formatPercentage(analytics.dailyChange.transactions)} -

- - + const analyticsCards = [ + { + title: "UAW", + icon: , + value: formatNumber(analytics.uniqueActiveWallets), + change: analytics.dailyChange.uaw, + color: "from-amber-500/20 to-amber-600/5", + iconColor: "bg-amber-500/20", + borderColor: "border-amber-500/30" + }, + { + title: "Incoming Txs", + icon: , + value: formatNumber(analytics.incomingTransactions), + change: analytics.dailyChange.transactions, + color: "from-blue-500/20 to-blue-600/5", + iconColor: "bg-blue-500/20", + borderColor: "border-blue-500/30" + }, + { + title: "Incoming Volume", + icon: , + value: "$" + formatNumber(analytics.incomingVolume), + change: analytics.dailyChange.volume, + color: "from-green-500/20 to-green-600/5", + iconColor: "bg-green-500/20", + borderColor: "border-green-500/30" + }, + { + title: "Contract Balance", + icon: , + value: "$" + formatNumber(analytics.contractBalance), + change: analytics.dailyChange.balance, + color: "from-purple-500/20 to-purple-600/5", + iconColor: "bg-purple-500/20", + borderColor: "border-purple-500/30" + } + ]; - {/* Incoming Volume */} - - -
- - Incoming Volume -
- - -

- ${formatNumber(analytics.incomingVolume)} -

-

= 0 ? 'text-green-500' : 'text-red-500'}`}> - {formatPercentage(analytics.dailyChange.volume)} -

- - - - {/* Contract Balance */} - - -
- - Contract Balance -
- - -

- ${formatNumber(analytics.contractBalance)} -

-

= 0 ? 'text-green-500' : 'text-red-500'}`}> - {formatPercentage(analytics.dailyChange.balance)} -

- - -
+ return ( + + {analyticsCards.map((card, index) => ( + + +
+
+
+
+ {card.icon} +
+ {card.title} +
+ +

+ {card.value} +

+ +
+

= 0 ? 'text-green-400' : 'text-red-400'}`}> + {formatPercentage(card.change)} +

+ 24h +
+
+
+ + + ))} + ); } \ No newline at end of file diff --git a/components/transactions/RevenueGraph.tsx b/components/transactions/RevenueGraph.tsx index c770a93..18fd646 100644 --- a/components/transactions/RevenueGraph.tsx +++ b/components/transactions/RevenueGraph.tsx @@ -1,10 +1,10 @@ 'use client'; -import { useEffect, useState, useCallback, useMemo, memo } from "react"; +import { useEffect, useState, useCallback, useMemo, memo, Suspense, useRef } from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; -import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts"; +import { Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis, CartesianGrid, Area, ComposedChart } from "recharts"; import { fetchAvailableCoins, CoinOption, TOKEN_CONTRACTS } from "@/services/cryptoService"; -import { Loader2, AlertCircle, RefreshCcw, TrendingUp, ChevronDown } from "lucide-react"; +import { Loader2, AlertCircle, RefreshCcw, TrendingUp, ChevronDown, Clock, DollarSign, RefreshCw } from "lucide-react"; import { Select, SelectContent, @@ -17,63 +17,87 @@ import CoinAnalytics from './CoinAnalytics'; import { motion, AnimatePresence } from "framer-motion"; import dynamic from 'next/dynamic'; -// Optimize chart loading with proper SSR handling and caching +// Cache for API responses with 30-second cooldown +const dataCache = new Map(); +const CACHE_DURATION = 30 * 1000; // 30 seconds cooldown +const FORCED_COOLDOWN = 30 * 1000; // 30 seconds between refresh attempts + +// Use lightweight skeleton loader +const ChartSkeleton = () => ( +
+
+
+
+
+
+); + +// Optimize chart loading with progressive loading strategy const Chart = dynamic(() => import('recharts').then(mod => mod.ResponsiveContainer), { ssr: false, - loading: () => ( -
- -
- ) + loading: () => }); interface ChartData { date: string; price: number; volume: number; + timestamp?: number; } -// Memoized components +// Simplified loading state const LoadingState = memo(({ coinName }: { coinName?: string }) => ( -
- - - -

Loading {coinName || ''} data...

+
+
+ +

Loading {coinName || ''}

+
)); LoadingState.displayName = "LoadingState"; +// Simplified error state const ErrorState = memo(({ error, onRetry }: { error: string; onRetry: () => void }) => ( -
- - - -

{error}

-
)); ErrorState.displayName = "ErrorState"; +// Lightweight time range selector +const TimeRangeSelector = memo(({ value, onChange }: { + value: string, + onChange: (value: string) => void +}) => { + const ranges = [ '1d', '1w', '1m', '3m', '1y' ]; + + return ( +
+ {ranges.map(range => ( + + ))} +
+ ); +}); +TimeRangeSelector.displayName = "TimeRangeSelector"; + interface RevenueGraphProps { onCoinChange: (coin: CoinOption | null) => void; } -const RevenueGraph: React.FC = ({ onCoinChange }) => { +const RevenueGraph: React.FC = memo(({ onCoinChange }) => { const [data, setData] = useState([]); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); @@ -84,17 +108,53 @@ const RevenueGraph: React.FC = ({ onCoinChange }) => { { id: 'usd-coin', symbol: 'USDC', name: 'USDC' }, { id: 'wrapped-bitcoin', symbol: 'WBTC', name: 'Wrapped Bitcoin' }, { id: 'chainlink', symbol: 'LINK', name: 'Chainlink' }, - { id: 'shiba-inu', symbol: 'SHIB', name: 'Shiba Inu' }, - { id: 'uniswap', symbol: 'UNI', name: 'Uniswap' }, - { id: 'dai', symbol: 'DAI', name: 'Dai' }, - { id: 'aave', symbol: 'AAVE', name: 'Aave' }, ]); - const [loadingCoins, setLoadingCoins] = useState(true); - + const [loadingCoins, setLoadingCoins] = useState(false); + const [timeRange, setTimeRange] = useState('1m'); + const [initialLoad, setInitialLoad] = useState(true); + + // Cooldown state management + const [nextRefreshTime, setNextRefreshTime] = useState(0); + const [refreshCountdown, setRefreshCountdown] = useState(0); + const [isRefreshCoolingDown, setIsRefreshCoolingDown] = useState(false); + const lastFetchTimeRef = useRef>({}); + + // Manual refresh handler with cooldown + const handleManualRefresh = useCallback(() => { + const now = Date.now(); + if (now < nextRefreshTime) { + // Still in cooldown + return; + } + + setRetryCount(prev => prev + 1); + setNextRefreshTime(now + FORCED_COOLDOWN); + setIsRefreshCoolingDown(true); + setRefreshCountdown(FORCED_COOLDOWN / 1000); + }, [nextRefreshTime]); + + // Countdown timer for refresh cooldown + useEffect(() => { + if (!isRefreshCoolingDown) return; + + const timer = setInterval(() => { + const secondsLeft = Math.ceil((nextRefreshTime - Date.now()) / 1000); + + if (secondsLeft <= 0) { + setIsRefreshCoolingDown(false); + clearInterval(timer); + } else { + setRefreshCountdown(secondsLeft); + } + }, 1000); + + return () => clearInterval(timer); + }, [isRefreshCoolingDown, nextRefreshTime]); + // Memoize handlers const handleRetry = useCallback(() => { - setRetryCount(prev => prev + 1); - }, []); + handleManualRefresh(); + }, [handleManualRefresh]); const handleCoinChange = useCallback((coinId: string) => { const coin = availableCoins.find(c => c.id === coinId); @@ -105,12 +165,31 @@ const RevenueGraph: React.FC = ({ onCoinChange }) => { } }, [availableCoins, onCoinChange]); - // Fetch available coins + // Set initial coin immediately to improve perceived performance + useEffect(() => { + if (!selectedCoin && availableCoins.length > 0) { + const ethereum = availableCoins.find(c => c.id === 'ethereum') || availableCoins[0]; + setSelectedCoin(ethereum); + onCoinChange(ethereum); + } + }, [availableCoins, selectedCoin, onCoinChange]); + + // Fetch available coins in the background with cooldown useEffect(() => { let mounted = true; + const fetchCoins = async () => { + const cacheKey = 'available-coins'; + const now = Date.now(); + const lastFetchTime = lastFetchTimeRef.current[cacheKey] || 0; + + // Apply cooldown to coin fetching + if (now - lastFetchTime < CACHE_DURATION) { + return; // Still in cooldown period + } + try { - setLoadingCoins(true); + lastFetchTimeRef.current[cacheKey] = now; const coins = await fetchAvailableCoins(); if (!mounted) return; @@ -118,7 +197,7 @@ const RevenueGraph: React.FC = ({ onCoinChange }) => { const supportedCoins = coins.filter(coin => TOKEN_CONTRACTS[coin.id] && coin.id !== 'tether'); setAvailableCoins(supportedCoins); - if (supportedCoins.length > 0) { + if (supportedCoins.length > 0 && !selectedCoin) { const ethereum = supportedCoins.find(c => c.id === 'ethereum') || supportedCoins[0]; setSelectedCoin(ethereum); onCoinChange(ethereum); @@ -133,262 +212,375 @@ const RevenueGraph: React.FC = ({ onCoinChange }) => { }; fetchCoins(); - return () => { mounted = false; }; - }, [onCoinChange]); + + // Set up a refresh interval with cooldown + const refreshInterval = setInterval(() => { + fetchCoins(); + }, CACHE_DURATION * 2); // Refresh coins list every minute + + return () => { + mounted = false; + clearInterval(refreshInterval); + }; + }, [onCoinChange, selectedCoin]); - // Optimize data fetching with proper cleanup and error handling - useEffect(() => { + // Get time range in days - optimized to avoid re-calculation + const getTimeRangeDays = useMemo(() => { + const rangeDays: Record = { + '1d': 1, + '1w': 7, + '1m': 30, + '3m': 90, + '1y': 365 + }; + return rangeDays[timeRange] || 30; + }, [timeRange]); + + // Optimized data fetching with caching and cooldown + const fetchData = useCallback(async () => { + if (!selectedCoin) return; + + const cacheKey = `${selectedCoin.symbol}-${timeRange}`; + const cachedData = dataCache.get(cacheKey); + const now = Date.now(); + const lastFetchTime = lastFetchTimeRef.current[cacheKey] || 0; + + // Use cached data if available and not expired + if (cachedData && (now - cachedData.timestamp < CACHE_DURATION)) { + setData(cachedData.data); + setLoading(false); + setInitialLoad(false); + return; + } + + // Apply cooldown to prevent excessive refreshes + if (now - lastFetchTime < FORCED_COOLDOWN) { + // If we have some data to show, use it and don't set loading state + if (cachedData) { + setData(cachedData.data); + setLoading(false); + setInitialLoad(false); + return; + } + } + + // Update the last fetch time + lastFetchTimeRef.current[cacheKey] = now; + let mounted = true; - let retryAttempt = 0; - const maxRetries = 3; - const retryDelay = 2000; // 2 seconds - const fetchData = async () => { - if (!selectedCoin) return; + // For first load, show loading skeleton only for a short time + if (initialLoad) { + setTimeout(() => { + if (mounted && loading) { + setInitialLoad(false); + } + }, 500); + } - try { - setLoading(true); - setError(null); + try { + // Calculate interval based on time range - optimized calculation + const days = getTimeRangeDays; + const interval = days <= 7 ? '1h' : days <= 30 ? '4h' : '1d'; + + // Request only what's needed + const limit = Math.min(days <= 7 ? 24 : days <= 30 ? 30 : 90, 100); - // Use Binance API for fetching historical data - const response = await fetch(`https://data-api.binance.vision/api/v3/klines?symbol=${selectedCoin.symbol.toUpperCase()}USDT&interval=1d&limit=30`); - const data = await response.json(); + // Use Binance API with optimized parameters + const response = await fetch( + `https://data-api.binance.vision/api/v3/klines?symbol=${selectedCoin.symbol.toUpperCase()}USDT&interval=${interval}&limit=${limit}`, + { cache: 'no-store' } // Disable browser caching to ensure we control the cache + ); + + if (!response.ok) { + throw new Error('API request failed'); + } - if (!mounted) return; + const rawData = await response.json(); - if (!data || data.length === 0) { - throw new Error('No data available for this coin'); - } + if (!mounted) return; - const chartData: ChartData[] = data.map((item: any) => { - const date = new Date(item[0]); - return { - date: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }), - price: Number(item[4]), // Closing price - volume: Number(item[5]) // Volume - }; - }); + if (!rawData || rawData.length === 0) { + throw new Error('No data available'); + } - setData(chartData); + // Optimize data processing + const chartData = rawData.map((item: any) => { + const date = new Date(item[0]); + return { + date: date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }), + price: Number(item[4]), // Closing price + volume: Number(item[5]) // Volume + }; + }); + + // Cache the result + dataCache.set(cacheKey, { + data: chartData, + timestamp: now + }); + + setData(chartData); + setLoading(false); + setInitialLoad(false); + + // Set the next refresh time + setNextRefreshTime(now + FORCED_COOLDOWN); + + } catch (err) { + console.error('Error fetching data:', err); + if (mounted) { + setError('Failed to load chart data'); setLoading(false); - retryAttempt = 0; // Reset retry counter on success - } catch (err) { - console.error('Error fetching data:', err); - if (mounted) { - if (retryAttempt < maxRetries) { - retryAttempt++; - console.log(`Retrying (${retryAttempt}/${maxRetries})...`); - setTimeout(fetchData, retryDelay); - } else { - setError(err instanceof Error ? err.message : 'Failed to fetch data'); - setLoading(false); - } - } + setInitialLoad(false); } - }; - - // Add a small delay before fetching to prevent rate limiting - const timeoutId = setTimeout(fetchData, 100); + } return () => { mounted = false; - clearTimeout(timeoutId); }; - }, [selectedCoin?.id]); - - // Memoize chart data - const chartConfig = useMemo(() => ({ - gradients: ( - - - - - - - - - - - ), - tooltipStyle: { - backgroundColor: 'rgba(17, 24, 39, 0.95)', - border: '1px solid rgba(75, 85, 99, 0.3)', - borderRadius: '12px', - boxShadow: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)', - backdropFilter: 'blur(8px)', - }, - customTooltip: (props: any) => { - if (!props.active || !props.payload || !props.payload.length) { - return null; - } + }, [selectedCoin, timeRange, loading, initialLoad, getTimeRangeDays]); - const priceValue = props.payload.find((p: any) => p.dataKey === 'price'); - const volumeValue = props.payload.find((p: any) => p.dataKey === 'volume'); - - return ( -
-

{props.label}

- {priceValue && ( -

- Price: ${priceValue.value.toLocaleString()} -

- )} - {volumeValue && ( -

- Volume: {volumeValue.value.toLocaleString()} -

- )} -
- ); + // Fetch data with debounce and respect cooldown + useEffect(() => { + if (selectedCoin) { + const timeoutId = setTimeout(fetchData, 50); + return () => clearTimeout(timeoutId); + } + }, [fetchData, selectedCoin, retryCount]); + + // Calculate price stats - simplified + const priceStats = useMemo(() => { + if (data.length === 0) return { currentPrice: 0, change: 0, changePercent: 0 }; + + const latestPrice = data[data.length - 1].price; + const firstPrice = data[0].price; + const change = latestPrice - firstPrice; + const changePercent = (change / firstPrice) * 100; + + return { currentPrice: latestPrice, change, changePercent }; + }, [data]); + + // Format price for display - memoized to avoid re-calculations + const formattedPrice = useMemo(() => { + return new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + minimumFractionDigits: priceStats.currentPrice < 1 ? 4 : 2, + maximumFractionDigits: priceStats.currentPrice < 1 ? 4 : 2, + }).format(priceStats.currentPrice); + }, [priceStats.currentPrice]); + + const formattedChange = useMemo(() => { + return new Intl.NumberFormat('en-US', { + style: 'currency', + currency: 'USD', + minimumFractionDigits: priceStats.change < 1 && priceStats.change > -1 ? 4 : 2, + maximumFractionDigits: priceStats.change < 1 && priceStats.change > -1 ? 4 : 2, + }).format(priceStats.change); + }, [priceStats.change]); + + // Simplified chart config + const renderChart = () => { + if (loading && initialLoad) { + return ; + } + + if (error) { + return ; } - }), []); + + return ( +
+ + + + + + + + + + + `$${value.toLocaleString()}`} + tick={{ fill: '#9ca3af', fontSize: 12 }} + width={80} + /> + `${(value/1000000).toFixed(1)}M`} + tick={{ fill: '#9ca3af', fontSize: 12 }} + width={70} + /> + { + if (!props.active || !props.payload || !props.payload.length) return null; + + const priceValue = props.payload.find((p: any) => p.dataKey === 'price'); + const volumeValue = props.payload.find((p: any) => p.dataKey === 'volume'); + + return ( +
+

{props.label}

+ {priceValue &&

Price: ${priceValue.value.toLocaleString()}

} + {volumeValue &&

Vol: {volumeValue.value.toLocaleString()}

} +
+ ); + }} + /> + + + + +
+ ); + }; return (
- +
-
+
- - {selectedCoin?.name || 'Loading...'} Price & Volume - -
- + + {loadingCoins ? ( +
+ + Loading...
- - ))} -
- - + ) : ( +
+ {selectedCoin?.name || "Select coin"} + {/* Removed the duplicate ChevronDown icon here */} +
+ )} + + +
+ {availableCoins.map((coin) => ( + + {coin.symbol} + {coin.name} + + ))} +
+ + +
+
- - - {loading ? ( - - ) : error ? ( - - ) : ( - - - - {chartConfig.gradients} - - `$${value.toLocaleString()}`} - tick={{ fill: '#9ca3af' }} - width={80} - padding={{ top: 0 }} - /> - `${value.toLocaleString()}`} - tick={{ fill: '#9ca3af' }} - width={110} - padding={{ top: 20 }} - /> - - - - - - + + {/* Additional chart metadata */} + {!loading && !error && data.length > 0 && ( +
+
+ + Range: + {getTimeRangeDays} days +
+
+ + Change: + = 0 ? 'text-green-500' : 'text-red-500'}`}> + {formattedChange} + +
+ {/* Add data freshness indicator */} + {data.length > 0 && ( +
+ + Updates every 30s + + {isRefreshCoolingDown && ( + + )} +
)} - +
+ )} + + + {renderChart()} - - {selectedCoin && ( - - - - )} - + {/* Only render analytics when we have a selected coin */} + {selectedCoin && !initialLoad && ( + }> + + + )}
); -}; +}); + RevenueGraph.displayName = "RevenueGraph"; export default RevenueGraph; From 0b8a459d48b2db1b6606c871b8258bda524749cf Mon Sep 17 00:00:00 2001 From: DangDuyLe Date: Tue, 25 Mar 2025 23:03:32 +0700 Subject: [PATCH 02/19] Implement loading indicator for improved user experience in Transaction Explorer --- components/transactions/WalletCharts.tsx | 337 ++++++++++++++--------- 1 file changed, 212 insertions(+), 125 deletions(-) diff --git a/components/transactions/WalletCharts.tsx b/components/transactions/WalletCharts.tsx index c95aa83..f4c882a 100644 --- a/components/transactions/WalletCharts.tsx +++ b/components/transactions/WalletCharts.tsx @@ -3,9 +3,13 @@ import { useEffect, useState } from "react"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Line, LineChart, BarChart, Bar, ResponsiveContainer, Tooltip, XAxis, YAxis, Area, AreaChart, PieChart, Pie, Cell, RadialBarChart, RadialBar } from "recharts"; -import { Activity, Wallet, TrendingUp, Database, Cpu } from "lucide-react"; +import { Activity, Wallet, TrendingUp, Database, Cpu, RefreshCcw, ShieldAlert } from "lucide-react"; import { BlockchainMetrics, GlobalMetrics, fetchBlockchainMetrics, fetchGlobalMetrics } from "@/services/cryptoService"; import { Loader2, AlertCircle } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { Progress } from "@/components/ui/progress"; +import { motion } from "framer-motion"; +import React from "react"; const COLORS = { primary: '#F5B056', @@ -21,38 +25,67 @@ export default function WalletCharts() { const [globalMetrics, setGlobalMetrics] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); + const [isRefreshing, setIsRefreshing] = useState(false); + const [loadingProgress, setLoadingProgress] = useState(0); - useEffect(() => { - const fetchData = async () => { - try { - setLoading(true); - setError(null); - const [blockData, globalData] = await Promise.all([ - fetchBlockchainMetrics(), - fetchGlobalMetrics() - ]); - setBlockchainMetrics(blockData); - setGlobalMetrics(globalData); - } catch (err) { - console.error('Error fetching metrics:', err); - setError('Failed to fetch metrics'); - } finally { - setLoading(false); - } - }; + const fetchData = async () => { + try { + setLoading(true); + setError(null); + setIsRefreshing(true); + + // Simulate loading progress + let progress = 0; + const interval = setInterval(() => { + progress += 10; + setLoadingProgress(progress > 90 ? 90 : progress); + if (progress >= 90) clearInterval(interval); + }, 200); + + const [blockData, globalData] = await Promise.all([ + fetchBlockchainMetrics(), + fetchGlobalMetrics() + ]); + setBlockchainMetrics(blockData); + setGlobalMetrics(globalData); + setLoadingProgress(100); + clearInterval(interval); + } catch (err) { + console.error('Error fetching metrics:', err); + setError('Failed to fetch metrics'); + } finally { + setLoading(false); + setIsRefreshing(false); + setTimeout(() => setLoadingProgress(0), 500); // Reset progress after a delay + } + }; + useEffect(() => { fetchData(); const interval = setInterval(fetchData, 30000); // Update every 30 seconds return () => clearInterval(interval); }, []); - if (loading) { + const handleRefresh = () => { + if (!isRefreshing) fetchData(); + }; + + if (loading && !globalMetrics) { return (
+
+

+ + Market Overview +

+
+ + +
{[1, 2].map((i) => ( - + @@ -65,8 +98,20 @@ export default function WalletCharts() { if (error || !blockchainMetrics || !globalMetrics) { return ( -
- Error loading metrics. Please try again later. +
+ +

Error Loading Data

+

+ {error || "Failed to load market metrics. Please try again."} +

+
); } @@ -92,122 +137,164 @@ export default function WalletCharts() { .map(([name, value], index) => ({ name: name.toUpperCase(), value, - fill: Object.values(COLORS)[index] + fill: Object.values(COLORS)[index % Object.values(COLORS).length] })); return (
+
+

+ + Market Overview +

+ + +
+ + {isRefreshing && ( + + )} +
{/* Market Share Chart */} - - -
- - Market Share -
- - -
- - - - {marketShareData.map((entry, index) => ( - - ))} - - [`${value.toFixed(2)}%`]} - labelStyle={{ color: '#fff' }} - itemStyle={{ color: '#fff' }} - /> - - -
-
- {marketShareData.map((entry) => ( -
-
- {entry.name} -
- ))} -
- - - - {/* Stats Grid */} -
- - -
- - Market Cap + + + +
+ + Market Share
- -

- ${formatNumber(globalMetrics.total_market_cap.usd)} -

- - - - - -
- - 24h Volume + +
+ + + + {marketShareData.map((entry, index) => ( + + ))} + + [`${value.toFixed(2)}%`, 'Market Share']} + labelStyle={{ color: '#F5B056', fontWeight: 'bold' }} + itemStyle={{ color: '#fff' }} + /> + +
- - -

- ${formatNumber(globalMetrics.total_volume.usd)} -

- - - - - -
- - Active Coins +
+ {marketShareData.map((entry) => ( +
+
+ {entry.name} + {entry.value.toFixed(1)}% +
+ ))}
- - -

- {globalMetrics.active_cryptocurrencies.toLocaleString()} -

+ - - -
- - Markets -
- - -

- {globalMetrics.markets.toLocaleString()} -

- - + {/* Stats Grid */} +
+ {[ + { + title: "Market Cap", + value: `$${formatNumber(globalMetrics.total_market_cap.usd)}`, + icon: , + color: COLORS.primary, + animation: { delay: 0.1 } + }, + { + title: "24h Volume", + value: `$${formatNumber(globalMetrics.total_volume.usd)}`, + icon: , + color: COLORS.secondary, + animation: { delay: 0.2 } + }, + { + title: "Active Coins", + value: globalMetrics.active_cryptocurrencies.toLocaleString(), + icon: , + color: COLORS.tertiary, + animation: { delay: 0.3 } + }, + { + title: "Markets", + value: globalMetrics.markets.toLocaleString(), + icon: , + color: COLORS.quaternary, + animation: { delay: 0.4 } + } + ].map((stat, index) => ( + + +
+
+ +
+ +
+ {React.cloneElement(stat.icon, { className: `w-4 h-4`, style: { color: stat.color } })} +
+ {stat.title} + +
+ + +
+

+ {stat.value} +

+
+ + + + ))}
); -} \ No newline at end of file +} \ No newline at end of file From c45b151d390d6580a8016b9695087091e9ccd6b9 Mon Sep 17 00:00:00 2001 From: DangDuyLe Date: Tue, 25 Mar 2025 23:25:25 +0700 Subject: [PATCH 03/19] Enhance TradingChart and TradingViewLayout with data validation, loading states, and optimized pair selection --- components/transactions/TradingChart.tsx | 29 +++--- components/transactions/TradingViewLayout.tsx | 97 +++++++++++++++---- 2 files changed, 94 insertions(+), 32 deletions(-) diff --git a/components/transactions/TradingChart.tsx b/components/transactions/TradingChart.tsx index 7489717..0e60c3c 100644 --- a/components/transactions/TradingChart.tsx +++ b/components/transactions/TradingChart.tsx @@ -178,21 +178,28 @@ const [brushIndex, setBrushIndex] = useState<[number, number] | null>(null); // Only add if it's a newer candle if (prev.length === 0 || k.t > prev[prev.length - 1].time) { - newData.push({ + // Validate incoming data + const candle = { time: k.t, - open: parseFloat(k.o), - high: parseFloat(k.h), - low: parseFloat(k.l), - close: parseFloat(k.c), - volume: parseFloat(k.v), + open: Number.isFinite(parseFloat(k.o)) ? parseFloat(k.o) : prev[prev.length - 1]?.open || 0, + high: Number.isFinite(parseFloat(k.h)) ? parseFloat(k.h) : prev[prev.length - 1]?.high || 0, + low: Number.isFinite(parseFloat(k.l)) ? parseFloat(k.l) : prev[prev.length - 1]?.low || 0, + close: Number.isFinite(parseFloat(k.c)) ? parseFloat(k.c) : prev[prev.length - 1]?.close || 0, + volume: Number.isFinite(parseFloat(k.v)) ? parseFloat(k.v) : 0, closeTime: k.T, - quoteVolume: parseFloat(k.q), - trades: k.n - }); + quoteVolume: Number.isFinite(parseFloat(k.q)) ? parseFloat(k.q) : 0, + trades: Number.isFinite(k.n) ? k.n : 0 + }; + + // Validate high/low consistency + candle.high = Math.max(candle.high, candle.open, candle.close); + candle.low = Math.min(candle.low, candle.open, candle.close); + + newData.push(candle); - // Keep array at 500 items max + // Maintain fixed array size with better memory management if (newData.length > 500) { - newData.shift(); + newData.splice(0, newData.length - 500); } } diff --git a/components/transactions/TradingViewLayout.tsx b/components/transactions/TradingViewLayout.tsx index f9f4b7e..ba4423b 100644 --- a/components/transactions/TradingViewLayout.tsx +++ b/components/transactions/TradingViewLayout.tsx @@ -1,6 +1,6 @@ 'use client'; -import { useEffect, useState } from 'react'; +import { useEffect, useState, useMemo } from 'react'; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"; import { getTradingPairs, STABLECOINS } from '@/services/binanceService'; @@ -8,6 +8,7 @@ import { Loader2, RefreshCw } from 'lucide-react'; import TradingChart from './TradingChart'; import Orderbook from './Orderbook'; import { Button } from "@/components/ui/button"; +import { motion } from 'framer-motion'; interface TradingPair { symbol: string; @@ -15,11 +16,32 @@ interface TradingPair { quoteAsset: string; } +// Add skeleton loader component +const TradingViewSkeleton = () => ( + + +
+
+
+
+ + +
+
+
+
+ + +); + export default function TradingViewLayout() { const [tradingPairs, setTradingPairs] = useState([]); const [selectedPair, setSelectedPair] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); + // Add loading states for different operations + const [refreshing, setRefreshing] = useState(false); + const [changingPair, setChangingPair] = useState(false); useEffect(() => { const fetchPairs = async () => { @@ -63,33 +85,59 @@ export default function TradingViewLayout() { fetchPairs(); }, []); + // Optimize pair selection with useMemo + const groupedPairs = useMemo(() => { + if (!tradingPairs.length) return {}; + + return tradingPairs.reduce((acc: Record, pair) => { + if (!acc[pair.quoteAsset]) { + acc[pair.quoteAsset] = []; + } + acc[pair.quoteAsset].push(pair); + return acc; + }, {}); + }, [tradingPairs]); + + // Add retry with exponential backoff + const retryFetch = async (attempt = 1) => { + try { + setLoading(true); + setError(null); + const pairs = await getTradingPairs(); + // ...existing pair processing... + } catch (err) { + if (attempt < 3) { + setTimeout(() => retryFetch(attempt + 1), Math.pow(2, attempt) * 1000); + } else { + setError('Failed to fetch trading pairs after multiple attempts'); + } + } finally { + setLoading(false); + } + }; + const handlePairChange = (symbol: string) => { + setChangingPair(true); const pair = tradingPairs.find(p => p.symbol === symbol); if (pair) { setSelectedPair(pair); + // Add slight delay to ensure smooth transition + setTimeout(() => setChangingPair(false), 300); } }; - const handleRefresh = () => { - if (selectedPair) { - // Force refresh by resetting and then setting the pair - const currentPair = selectedPair; - setSelectedPair(null); - setTimeout(() => setSelectedPair(currentPair), 100); + // Enhanced refresh handling + const handleRefresh = async () => { + setRefreshing(true); + try { + await retryFetch(); + } finally { + setRefreshing(false); } }; if (loading) { - return ( - - -
- - Loading trading view... -
- - - ); + return ; } if (error) { @@ -153,22 +201,29 @@ export default function TradingViewLayout() { {selectedPair ? ( -
-
+ +
-
+
-
+ ) : (
Select a trading pair to view chart From a00f2f5c7a8fdc57dc26582e68c250fa10cb926b Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Wed, 26 Mar 2025 16:12:25 +0700 Subject: [PATCH 04/19] cors --- components/NFT/PaginatedNFTGrid.tsx | 33 +++- lib/api/nftService.ts | 292 ++++++++++++++++++++-------- 2 files changed, 240 insertions(+), 85 deletions(-) diff --git a/components/NFT/PaginatedNFTGrid.tsx b/components/NFT/PaginatedNFTGrid.tsx index 57ede92..5dc0711 100644 --- a/components/NFT/PaginatedNFTGrid.tsx +++ b/components/NFT/PaginatedNFTGrid.tsx @@ -93,6 +93,18 @@ const PaginatedNFTGrid: React.FC = ({ const isPartialPage = result.nfts.length < itemsPerPage; const calculatedLastPage = isEmptyPage || isPartialPage; + if (result.nfts.length === 0 && currentPage > 1) { + // If we got an empty page but it's not page 1, + // show a warning but keep the previous page's data + toast({ + title: 'Notice', + description: 'No additional NFTs found for this collection.', + variant: 'default' + }); + setCurrentPage(currentPage - 1); // Go back to previous page + return; + } + setNfts(result.nfts); setTotalPages(result.totalPages || Math.ceil(result.totalCount / itemsPerPage)); setTotalItems(result.totalCount); @@ -107,9 +119,28 @@ const PaginatedNFTGrid: React.FC = ({ } catch (err) { console.error('Error loading NFTs:', err); setError('Failed to load NFTs. Please try again.'); + + // Generate mock data as fallback + const mockNfts = Array(itemsPerPage).fill(0).map((_, i) => ({ + id: `mock-${i}`, + tokenId: `${(currentPage - 1) * itemsPerPage + i + 1}`, + name: `NFT #${(currentPage - 1) * itemsPerPage + i + 1}`, + description: 'Mock NFT description when API is unavailable', + imageUrl: `/Img/nft/sample-${(i % 5) + 1}.jpg`, + chain: chainId, + attributes: [ + { trait_type: 'Status', value: 'Mock' }, + { trait_type: 'Chain', value: chainId === '0x1' ? 'Ethereum' : 'BNB Chain' } + ] + })); + + setNfts(mockNfts); + setTotalItems(100); // Assume a reasonable total + setTotalPages(5); + toast({ title: 'Error', - description: 'Failed to load NFTs. Please try again.', + description: 'Failed to load NFTs. Showing sample data instead.', variant: 'destructive', }); } finally { diff --git a/lib/api/nftService.ts b/lib/api/nftService.ts index 3b1430b..610ada2 100644 --- a/lib/api/nftService.ts +++ b/lib/api/nftService.ts @@ -541,28 +541,52 @@ export async function fetchCollectionNFTs( // If direct fetching didn't return results, try API methods if (nfts.length === 0) { - // For APIs that support offset/paging with start IDs - // Fixed: Changed fetchCollectionByAPI to fetchCollectionNFTs - const apiResult = await fetchCollectionNFTs( - contractAddress, - chainId, - { - page, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes + // Try different API approaches based on chain + if (isEthereumChain(chainId)) { + // For Ethereum, try multiple fallbacks due to potential CORS issues + try { + // First try Moralis as it might have better CORS support + if (MORALIS_API_KEY) { + const moralisResult = await fetchNFTsFromMoralis(contractAddress, chainId, page, pageSize); + nfts = moralisResult.nfts; + } + } catch (moralisError) { + console.warn("Moralis fallback failed:", moralisError); + + try { + // Try Etherscan as another fallback + if (ETHERSCAN_API_KEY) { + const etherscanResult = await fetchNFTsFromEtherscan(contractAddress, chainId, page, pageSize); + nfts = etherscanResult.nfts; + } + } catch (etherscanError) { + console.warn("Etherscan fallback failed:", etherscanError); + + // Generate mock data as last resort for Ethereum + nfts = generateMockNFTs(contractAddress, chainId, page, pageSize); + } + } + } else { + // For other chains like BNB, use the standard approach + const apiResult = await fetchCollectionNFTs( + contractAddress, + chainId, + { + page, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + } + ); + + if (apiResult.nfts.length > 0) { + nfts = apiResult.nfts.filter((nft: NFTMetadata) => { + const tokenId = parseInt(nft.tokenId); + return !isNaN(tokenId) && tokenId >= startTokenId; + }).slice(0, pageSize); } - ); - - // Filter results to only include NFTs with token IDs >= startTokenId - // Fixed: Added type annotation for nft parameter - if (apiResult.nfts.length > 0) { - nfts = apiResult.nfts.filter((nft: NFTMetadata) => { - const tokenId = parseInt(nft.tokenId); - return !isNaN(tokenId) && tokenId >= startTokenId; - }).slice(0, pageSize); // Limit to pageSize } } @@ -594,7 +618,13 @@ export async function fetchCollectionNFTs( }; } catch (error) { console.error("Failed token ID based pagination:", error); - // Fall through to regular pagination + // Fall through to regular pagination but with mock data fallback + const mockNfts = generateMockNFTs(contractAddress, chainId, page, pageSize); + return { + nfts: mockNfts, + totalCount: pageSize * 10, + pageKey: `synthetic:tokenId:${startTokenId + pageSize}:${sortDirection}` + }; } } @@ -691,36 +721,44 @@ export async function fetchCollectionNFTs( } } catch (contractError) { console.error('Contract fetching failed:', contractError); - // Return empty list as last resort - nfts = []; - totalCount = 0; + // Generate mock data as last resort + nfts = generateMockNFTs(contractAddress, chainId, page, pageSize); + totalCount = pageSize * 10; // Just a reasonable estimate for mocks } } } else { - // Ethereum: Try Alchemy (priority) -> Moralis -> Etherscan -> Contract fallback + // Ethereum: Try Alchemy (priority) -> Moralis -> Etherscan -> Contract fallback -> Mock data let success = false; // Try Alchemy first for Ethereum (preferred) - if (ALCHEMY_API_KEY) { + if (ALCHEMY_API_KEY && apiStatus.alchemy) { try { console.log('Trying Alchemy for Ethereum'); const result = await fetchNFTsFromAlchemy(contractAddress, chainId, page, pageSize); - nfts = result.nfts; - totalCount = result.totalCount; - resultPageKey = result.pageKey; - success = true; - console.log('Successfully fetched from Alchemy'); + + // Check if we got actual results + if (result.nfts && result.nfts.length > 0) { + nfts = result.nfts; + totalCount = result.totalCount; + resultPageKey = result.pageKey; + success = true; + console.log('Successfully fetched from Alchemy'); + } else { + console.log('Alchemy returned empty result, trying next API'); + apiStatus.alchemy = false; + apiStatus.lastChecked = Date.now(); + } } catch (error) { console.warn("Alchemy NFT fetch failed:", error); apiStatus.alchemy = false; apiStatus.lastChecked = Date.now(); } } else { - console.log('Skipping Alchemy - No API key available'); + console.log('Skipping Alchemy - No API key available or API marked unavailable'); } // Try Moralis as second option for Ethereum - if (!success && MORALIS_API_KEY) { + if (!success && MORALIS_API_KEY && apiStatus.moralis) { try { console.log('Trying Moralis for Ethereum'); const result = await fetchNFTsFromMoralis(contractAddress, chainId, page, pageSize); @@ -733,12 +771,14 @@ export async function fetchCollectionNFTs( apiStatus.moralis = false; apiStatus.lastChecked = Date.now(); } + } else if (!success && !apiStatus.moralis) { + console.log('Skipping Moralis - API marked unavailable'); } else if (!success) { console.log('Skipping Moralis - No API key available'); } // Try Etherscan as third option for Ethereum - if (!success && ETHERSCAN_API_KEY) { + if (!success && ETHERSCAN_API_KEY && apiStatus.etherscan) { try { console.log('Trying Etherscan for Ethereum'); const result = await fetchNFTsFromEtherscan(contractAddress, chainId, page, pageSize); @@ -751,6 +791,8 @@ export async function fetchCollectionNFTs( apiStatus.etherscan = false; apiStatus.lastChecked = Date.now(); } + } else if (!success && !apiStatus.etherscan) { + console.log('Skipping Etherscan - API marked unavailable'); } else if (!success) { console.log('Skipping Etherscan - No API key available'); } @@ -774,10 +816,10 @@ export async function fetchCollectionNFTs( console.warn('Could not fetch total supply from collection info'); } } catch (contractError) { - console.error('Contract fetching failed:', contractError); - // Return empty list as last resort - nfts = []; - totalCount = 0; + console.error('Contract fetching failed, using mock data:', contractError); + // Generate mock data as absolute last resort + nfts = generateMockNFTs(contractAddress, chainId, page, pageSize); + totalCount = pageSize * 10; // Just a reasonable estimate for mocks } } } @@ -839,6 +881,19 @@ export async function fetchCollectionNFTs( apiStatus.lastChecked = Date.now(); } + // Generate synthetic page key if we don't have one yet + if (!resultPageKey && nfts.length >= pageSize) { + if (sortBy === 'tokenId' && nfts.length > 0) { + const lastTokenId = parseInt(nfts[nfts.length - 1].tokenId); + if (!isNaN(lastTokenId)) { + resultPageKey = `synthetic:tokenId:${lastTokenId + 1}:${sortDirection}`; + } + } else { + // Use page-based synthetic key if we can't use token IDs + resultPageKey = `synthetic:page:${page + 1}`; + } + } + return { nfts, totalCount, @@ -847,12 +902,19 @@ export async function fetchCollectionNFTs( } catch (error) { console.error(`Error fetching NFTs for collection ${contractAddress}:`, error); toast.error("Failed to load collection NFTs"); - return { nfts: [], totalCount: 0 }; + + // Generate mock data as fallback when everything else fails + const mockNfts = generateMockNFTs(contractAddress, chainId, page, pageSize); + return { + nfts: mockNfts, + totalCount: pageSize * 10, + pageKey: `synthetic:page:${page + 1}` + }; } } /** - * Fetch NFTs from Alchemy API + * Fetch NFTs from Alchemy API with CORS error handling */ async function fetchNFTsFromAlchemy( contractAddress: string, @@ -864,32 +926,59 @@ async function fetchNFTsFromAlchemy( totalCount: number, pageKey?: string }> { - // Use our existing Alchemy API integration - const result = await alchemyFetchCollectionNFTs( - contractAddress, - chainId, - page, - pageSize, - 'tokenId', - 'asc' - ); - - // Map to our NFTMetadata format - const mappedNfts: NFTMetadata[] = result.nfts.map(nft => ({ - id: `${contractAddress.toLowerCase()}-${nft.tokenId}`, - tokenId: nft.tokenId, - name: nft.name || `NFT #${nft.tokenId}`, - description: nft.description || '', - imageUrl: nft.imageUrl || '', - attributes: nft.attributes || [], - chain: chainId - })); - - return { - nfts: mappedNfts, - totalCount: result.totalCount, - pageKey: result.pageKey - }; + try { + // Use our existing Alchemy API integration + const network = CHAIN_ID_TO_NETWORK[chainId as keyof typeof CHAIN_ID_TO_NETWORK] || 'eth-mainnet'; + const apiUrl = `https://${network}.g.alchemy.com/nft/v2/${ALCHEMY_API_KEY}/getContractMetadata`; + + // Use a more browser-friendly approach with better error handling + const response = await fetch(new Request( + `https://${network}.g.alchemy.com/nft/v2/${ALCHEMY_API_KEY}/getNFTsForCollection?contractAddress=${contractAddress}&withMetadata=true&limit=${pageSize}&startToken=${(page-1) * pageSize}`, + { + method: 'GET', + headers: { + 'Accept': 'application/json', + }, + // Add proper error handling for CORS + mode: 'cors', + credentials: 'omit' + } + )).catch(error => { + console.warn('Alchemy fetch failed with error:', error); + throw new Error('CORS error with Alchemy API'); + }); + + if (!response.ok) { + throw new Error(`Alchemy API error: ${response.status}`); + } + + const data = await response.json(); + + // Map to our NFTMetadata format + const mappedNfts: NFTMetadata[] = data.nfts.map((nft: any) => ({ + id: `${contractAddress.toLowerCase()}-${nft.id.tokenId}`, + tokenId: nft.id.tokenId, + name: nft.title || `NFT #${nft.id.tokenId}`, + description: nft.description || '', + imageUrl: nft.media?.[0]?.gateway || '', + attributes: nft.metadata?.attributes || [], + chain: chainId + })); + + return { + nfts: mappedNfts, + totalCount: data.totalCount || mappedNfts.length, + pageKey: data.nextToken + }; + } catch (error) { + console.warn('Error in fetchNFTsFromAlchemy:', error); + // Instead of throwing, return empty array with fallback flag + return { + nfts: [], + totalCount: 0, + pageKey: undefined + }; + } } /** @@ -2174,6 +2263,27 @@ export async function fetchPaginatedNFTs( attributes ); + // Handle case where API failed but we need to continue + if (!result.nfts || result.nfts.length === 0) { + console.log("API returned no results, using mock data"); + const mockResult = { + nfts: generateMockNFTs(contractAddress, chainId, page, pageSize), + totalCount: prevPageData.data.totalCount || pageSize * 10, + currentPage: page, + totalPages: prevPageData.data.totalPages || 10, + cursor: `synthetic:page:${page + 1}` + }; + + // Cache this result too + PAGINATION_CACHE.set(cacheKey, { + data: mockResult, + timestamp: Date.now(), + page + }); + + return mockResult; + } + const totalCount = result.totalCount || Math.max(result.nfts.length, pageSize * page); const totalPages = Math.max(page, Math.ceil(totalCount / pageSize)); @@ -2200,15 +2310,18 @@ export async function fetchPaginatedNFTs( const startTokenId = (page - 1) * pageSize + 1; console.log(`No cursor found. Using synthetic tokenId pagination starting from: ${startTokenId}`); - const result = await fetchNFTsWithOptimizedCursor( + const result = await fetchCollectionNFTs( contractAddress, chainId, - `synthetic:tokenId:${startTokenId}:${sortDirection}`, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes + { + page, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes, + startTokenId + } ); const totalCount = result.totalCount || Math.max(result.nfts.length, pageSize * page); @@ -2219,7 +2332,7 @@ export async function fetchPaginatedNFTs( totalCount, currentPage: page, totalPages, - cursor: result.nextCursor + cursor: result.pageKey || `synthetic:tokenId:${startTokenId + pageSize}:${sortDirection}` }; PAGINATION_CACHE.set(cacheKey, { @@ -2233,15 +2346,17 @@ export async function fetchPaginatedNFTs( // Fallback to page-based synthetic cursor if we can't use token IDs console.log(`Using fallback page-based pagination for page ${page}`); - const result = await fetchNFTsWithOptimizedCursor( + const result = await fetchCollectionNFTs( contractAddress, chainId, - `synthetic:page:${page}`, - pageSize, - sortBy, - sortDirection, - searchQuery, - attributes + { + page, + pageSize, + sortBy, + sortDirection, + searchQuery, + attributes + } ); const totalCount = result.totalCount || Math.max(result.nfts.length, pageSize * page); @@ -2252,7 +2367,7 @@ export async function fetchPaginatedNFTs( totalCount, currentPage: page, totalPages, - cursor: result.nextCursor + cursor: result.pageKey || `synthetic:page:${page + 1}` }; PAGINATION_CACHE.set(cacheKey, { @@ -2270,13 +2385,22 @@ export async function fetchPaginatedNFTs( const totalEstimate = Math.max(1000, page * pageSize * 2); const totalPages = Math.ceil(totalEstimate / pageSize); - return { + const fallbackResult = { nfts: mockData, totalCount: totalEstimate, currentPage: page, totalPages, cursor: `mock:tokenId:${(page * pageSize) + 1}:${sortDirection}` }; + + // Also cache this fallback result + PAGINATION_CACHE.set(cacheKey, { + data: fallbackResult, + timestamp: Date.now(), + page + }); + + return fallbackResult; } } From 710b03173dea8b8d231fc56df28219e96bef109c Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Wed, 26 Mar 2025 19:44:13 +0700 Subject: [PATCH 05/19] Add remote patterns for Frontera Games and Cellula Life in next.config.js --- next.config.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/next.config.js b/next.config.js index fc6da3a..61c2b5b 100644 --- a/next.config.js +++ b/next.config.js @@ -24,6 +24,11 @@ const nextConfig = { hostname: "img-cdn.magiceden.dev", pathname: "/**", }, + { + protocol: "https", + hostname: "ipfs.frontera.games", + pathname: "/assets/**", + }, // Add these to your existing remotePatterns array { protocol: "https", @@ -197,6 +202,11 @@ const nextConfig = { hostname: "s2.coinmarketcap.com", pathname: "/**", }, + { + protocol: "https", + hostname: "img.cellula.life", + pathname: "/**", + }, // Adding more blockchain image hosts { protocol: "https", From 018d108d52cd56f6f0fb86a51cbe18f29f143e39 Mon Sep 17 00:00:00 2001 From: Mordred <95609626+TTMordred@users.noreply.github.com> Date: Wed, 26 Mar 2025 20:18:13 +0700 Subject: [PATCH 06/19] Enhance LazyImage component with improved error handling, fallback support, and IPFS/Arweave URL processing --- components/NFT/AnimatedNFTCard.tsx | 97 +++++++++++-- components/NFT/LazyImage.tsx | 124 +++++++++++++---- components/NFT/VirtualizedNFTGrid.tsx | 190 ++++++++++++++++++++++---- lib/api/nftService.ts | 1 + 4 files changed, 347 insertions(+), 65 deletions(-) diff --git a/components/NFT/AnimatedNFTCard.tsx b/components/NFT/AnimatedNFTCard.tsx index 688d03f..ec80a54 100644 --- a/components/NFT/AnimatedNFTCard.tsx +++ b/components/NFT/AnimatedNFTCard.tsx @@ -1,6 +1,6 @@ -import { useState, useRef, useEffect } from 'react'; -import { motion, useMotionValue, useSpring, useTransform } from 'framer-motion'; -import { ExternalLink } from 'lucide-react'; +import { useState, useRef, useEffect, memo } from 'react'; +import { motion, useMotionValue, useSpring, useTransform, AnimatePresence } from 'framer-motion'; +import { ExternalLink, ShieldCheck } from 'lucide-react'; import { Badge } from '@/components/ui/badge'; import { getChainColorTheme } from '@/lib/api/chainProviders'; import LazyImage from './LazyImage'; @@ -19,6 +19,7 @@ interface NFT { value: string; }>; isPlaceholder?: boolean; + verified?: boolean; } interface AnimatedNFTCardProps { @@ -26,10 +27,19 @@ interface AnimatedNFTCardProps { onClick?: () => void; index?: number; isVirtualized?: boolean; + highlight?: boolean; } -export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized = false }: AnimatedNFTCardProps) { +// Component implementation with animations and optimizations +const AnimatedNFTCardComponent = ({ + nft, + onClick, + index = 0, + isVirtualized = false, + highlight = false +}: AnimatedNFTCardProps) => { const [imageLoaded, setImageLoaded] = useState(false); + const [hovered, setHovered] = useState(false); const cardRef = useRef(null); // Process image URL for IPFS compatibility @@ -82,6 +92,8 @@ export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized }, [shineX, shineY, shineOpacity]); function handleMouseMove(e: React.MouseEvent) { + if (nft.isPlaceholder) return; + if (cardRef.current) { const rect = cardRef.current.getBoundingClientRect(); const centerX = rect.left + rect.width / 2; @@ -94,10 +106,12 @@ export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized function handleMouseLeave() { x.set(0); y.set(0); + setHovered(false); } function handleMouseEnter() { scale.set(1.02); + setHovered(true); } function handleMouseExit() { @@ -127,6 +141,19 @@ export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized duration: 0.3, ease: [0.4, 0, 0.2, 1], } + }, + highlight: { + scale: [1, 1.03, 1], + boxShadow: [ + "0 0 0px rgba(255,255,255,0)", + "0 0 15px rgba(255,255,255,0.5)", + "0 0 0px rgba(255,255,255,0)" + ], + transition: { + duration: 1.5, + repeat: 2, + repeatType: "reverse" as const, // Fix type error by explicitly typing as const + } } }; @@ -186,10 +213,19 @@ export default function AnimatedNFTCard({ nft, onClick, index = 0, isVirtualized return 'hover:shadow-[0_0_15px_rgba(107,141,247,0.3)]'; }; - // If this is a placeholder card (for virtualization), show a simpler version + // If this is a placeholder card (for virtualization), show a loading skeleton if (nft.isPlaceholder) { return ( -
+