import pageData from "~/data/crypto-portfolio-simulator-app.json"; import { toast } from "sonner"; export function PortfolioSimulator() { const { data, updateData } = useData(pageData); const [selectedPortfolio, setSelectedPortfolio] = React.useState(0); const [showCreateForm, setShowCreateForm] = React.useState(false); const [newPortfolioName, setNewPortfolioName] = React.useState(''); const [newAllocations, setNewAllocations] = React.useState({ 'BTC': 40, 'ETH': 30, 'ADA': 10, 'SOL': 15, 'DOGE': 5 }); const [newInvestment, setNewInvestment] = React.useState(10000); const [timeframeValue, setTimeframeValue] = React.useState(30); const [debouncedTimeframe, setDebouncedTimeframe] = React.useState(30); const [cryptoPrices, setCryptoPrices] = React.useState(null); const [isLoading, setIsLoading] = React.useState(true); const [error, setError] = React.useState(null); // Ensure there's always a Basic Portfolio const basicPortfolio = { id: 'basic', name: 'Basic Portfolio', allocation: { 'BTC': 40, 'ETH': 30, 'ADA': 10, 'SOL': 15, 'DOGE': 5 }, initialInvestment: 10000 }; const userPortfolios = data.portfolios || []; const portfolios = [basicPortfolio, ...userPortfolios]; const totalDays = debouncedTimeframe; // Debounce timeframe changes to avoid excessive API calls React.useEffect(() => { const timer = setTimeout(() => { setDebouncedTimeframe(timeframeValue); }, 800); // Wait 800ms after user stops changing the value return () => clearTimeout(timer); }, [timeframeValue]); // Coinbase API mapping const coinbaseIds = { 'BTC': 'BTC-USD', 'ETH': 'ETH-USD', 'ADA': 'ADA-USD', 'SOL': 'SOL-USD', 'DOGE': 'DOGE-USD' }; const coinNames = { 'BTC': 'Bitcoin', 'ETH': 'Ethereum', 'ADA': 'Cardano', 'SOL': 'Solana', 'DOGE': 'Dogecoin' }; // Fetch real crypto prices from Coinbase const fetchCryptoPrices = React.useCallback(async () => { setIsLoading(true); setError(null); try { const priceData = {}; // Calculate start and end dates const endDate = new Date(); const startDate = new Date(); startDate.setDate(endDate.getDate() - totalDays); for (const [symbol, productId] of Object.entries(coinbaseIds)) { const response = await fetch( `https://api.exchange.coinbase.com/products/${productId}/candles?start=${startDate.toISOString()}&end=${endDate.toISOString()}&granularity=86400` ); if (!response.ok) { throw new Error(`Failed to fetch ${symbol} data`); } const data = await response.json(); // Coinbase returns data in reverse chronological order // Each candle is [timestamp, low, high, open, close, volume] const prices = data.reverse().map(candle => candle[4]); // close price priceData[symbol] = { name: coinNames[symbol], prices: prices.slice(-totalDays) // Ensure we have exactly the right number of days }; } setCryptoPrices(priceData); } catch (err) { console.error('Error fetching crypto prices:', err); setError('Failed to load cryptocurrency data. Please try again.'); } finally { setIsLoading(false); } }, [totalDays]); // Fetch data when component mounts or timeframe changes React.useEffect(() => { fetchCryptoPrices(); }, [fetchCryptoPrices]); const createPortfolio = () => { if (!newPortfolioName.trim() || userPortfolios.length >= 4) return; // Check if allocations add up to 100% const totalAllocation = Object.values(newAllocations).reduce((sum, val) => sum + val, 0); if (totalAllocation !== 100) { toast('Portfolio allocation must total 100%'); return; } const newPortfolio = { id: Date.now(), name: newPortfolioName, allocation: { ...newAllocations }, initialInvestment: newInvestment }; updateData({ ...data, portfolios: [...userPortfolios, newPortfolio] }); setNewPortfolioName(''); setNewAllocations({ 'BTC': 40, 'ETH': 30, 'ADA': 10, 'SOL': 15, 'DOGE': 5 }); setNewInvestment(10000); setShowCreateForm(false); }; const deletePortfolio = (id) => { // Don't allow deleting the basic portfolio if (id === 'basic') return; updateData({ ...data, portfolios: userPortfolios.filter(p => p.id !== id) }); if (selectedPortfolio >= portfolios.length - 1) { setSelectedPortfolio(Math.max(0, portfolios.length - 2)); } }; const calculatePortfolioValue = (portfolio, dayIndex) => { if (!cryptoPrices) return 0; let totalValue = 0; Object.entries(portfolio.allocation).forEach(([crypto, percentage]) => { if (cryptoPrices[crypto] && cryptoPrices[crypto].prices.length > dayIndex) { const initialPrice = cryptoPrices[crypto].prices[0]; const currentPrice = cryptoPrices[crypto].prices[dayIndex]; const initialAmount = (portfolio.initialInvestment * percentage / 100) / initialPrice; totalValue += initialAmount * currentPrice; } }); return totalValue; }; const getChartData = () => { if (!cryptoPrices) return []; const today = new Date(); const days = []; // Generate dates based on selected timeframe for (let i = totalDays - 1; i >= 0; i--) { const date = new Date(today); date.setDate(today.getDate() - i); if (i === 0) { days.push('Today'); } else { days.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' })); } } return days.map((day, index) => { const dataPoint = { day }; portfolios.forEach((portfolio, portfolioIndex) => { const value = calculatePortfolioValue(portfolio, index); dataPoint[`portfolio${portfolioIndex}`] = value; }); return dataPoint; }); }; const chartData = getChartData(); const chartConfig = portfolios.reduce((config, portfolio, index) => { const colors = [ 'oklch(0.646 0.222 41.116)', 'oklch(0.6 0.118 184.704)', 'oklch(0.398 0.07 227.392)', 'oklch(0.828 0.189 84.429)', 'oklch(0.769 0.188 70.08)' ]; config[`portfolio${index}`] = { label: portfolio.name, color: colors[index] }; return config; }, {}); if (error) { return ( Portfolio Simulator

{error}

); } return (

Portfolio Simulator Compare up to 5 crypto portfolios over {debouncedTimeframe} days using real market data {isLoading && (

Loading real cryptocurrency data...

This may take a moment

)} {!isLoading && cryptoPrices && ( <> {/* Timeframe Controls */}

Days: setTimeframeValue(Number(e.target.value))} className="w-16 h-8" />

{userPortfolios.length < 4 && ( <> {!showCreateForm ? ( ) : (

setNewPortfolioName(e.target.value)} className="w-full" /> setNewInvestment(Number(e.target.value))} className="w-full" />

{Object.entries(newAllocations).map(([crypto, percentage]) => (

{coinNames[crypto]} {percentage}%

{ const newValue = value[0]; const oldValue = newAllocations[crypto]; const diff = newValue - oldValue; // Get all other cryptos const otherCryptos = Object.keys(newAllocations).filter(c => c !== crypto); const otherTotal = otherCryptos.reduce((sum, c) => sum + newAllocations[c], 0); if (otherTotal === 0 && newValue < 100) { // If all others are 0, set the first other crypto to remaining const remaining = 100 - newValue; setNewAllocations({ ...newAllocations, [crypto]: newValue, [otherCryptos[0]]: remaining }); } else if (otherTotal > 0) { // Distribute the difference proportionally among other cryptos const updatedAllocations = { ...newAllocations, [crypto]: newValue }; otherCryptos.forEach(otherCrypto => { const proportion = newAllocations[otherCrypto] / otherTotal; const adjustment = diff * proportion; updatedAllocations[otherCrypto] = Math.max(0, Math.min(100, newAllocations[otherCrypto] - adjustment)); }); // Ensure total is exactly 100 const currentTotal = Object.values(updatedAllocations).reduce((sum, val) => sum + val, 0); if (currentTotal !== 100) { const adjustment = 100 - currentTotal; const adjustableOthers = otherCryptos.filter(c => updatedAllocations[c] > 0); if (adjustableOthers.length > 0) { updatedAllocations[adjustableOthers[0]] += adjustment; } } setNewAllocations(updatedAllocations); } }} max={100} min={0} step={1} className="w-full" />

))}

Total: {Object.values(newAllocations).reduce((sum, val) => sum + val, 0).toFixed(1)}%

)} )}

{portfolios.length > 0 && (

{portfolios.map((portfolio, index) => { const initialValue = portfolio.initialInvestment; const currentValue = calculatePortfolioValue(portfolio, totalDays - 1); const gainLoss = currentValue - initialValue; const gainLossPercent = ((gainLoss / initialValue) * 100); return (

{portfolio.name}

{portfolio.id !== 'basic' && ( )}

Initial: ${initialValue.toLocaleString()}

Current: ${currentValue.toLocaleString()}

Gain/Loss: = 0 ? 'text-green-600' : 'text-red-600'}`}> ${gainLoss.toLocaleString()} ({gainLossPercent.toFixed(1)}%)

Allocation:

{Object.entries(portfolio.allocation).map(([crypto, percentage]) => (

{crypto}

{percentage}%

))}

); })}

)} {userPortfolios.length === 0 && (

Create your first custom portfolio to compare with the Basic Portfolio

)} {portfolios.length > 0 && (

Performance Chart

`$${(value/1000).toFixed(0)}k`} fontSize={10} /> { if (active && payload && payload.length) { return (

{label}

{payload.map((entry, index) => (

{entry.name} ${entry.value.toLocaleString()}

))}

); } return null; }} /> {portfolios.map((portfolio, index) => ( ))}

)} )}

); }