CryptoPortfolio

cryptoportfolio-1779388706172.tsx

'use client';
import { useState, useEffect } from 'react';

export default function CryptoPortfolio() {
  const [assets, setAssets] = useState([
    { symbol: 'BTC', name: 'Bitcoin', amount: 0.42, price: 67420, change: 2.3, color: '#f59e0b', icon: '₿' },
    { symbol: 'ETH', name: 'Ethereum', amount: 3.8, price: 3291, change: -1.7, color: '#6366f1', icon: 'Ξ' },
    { symbol: 'SOL', name: 'Solana', amount: 28, price: 164, change: 5.8, color: '#4ade80', icon: '◎' },
    { symbol: 'ARB', name: 'Arbitrum', amount: 520, price: 1.24, change: 0.9, color: '#22d3ee', icon: '▲' },
  ]);

  useEffect(() => {
    const t = setInterval(() => {
      setAssets(prev => prev.map(a => ({
        ...a,
        price: Math.max(1, a.price * (1 + (Math.random() - 0.5) * 0.004)),
        change: a.change + (Math.random() - 0.5) * 0.2,
      })));
    }, 2000);
    return () => clearInterval(t);
  }, []);

  const total = assets.reduce((s, a) => s + a.amount * a.price, 0);

  return (
    <div style={{ fontFamily: 'system-ui, sans-serif', maxWidth: '400px' }}>
      <div style={{ background: 'linear-gradient(135deg, rgba(201,168,76,0.08), rgba(99,102,241,0.06))', border: '1px solid rgba(201,168,76,0.15)', borderRadius: '16px', padding: '20px 24px', marginBottom: '16px' }}>
        <p style={{ color: 'rgba(245,245,240,0.5)', fontSize: '12px', margin: '0 0 6px 0' }}>Total Portfolio Value</p>
        <p style={{ color: '#F5F5F0', fontSize: '32px', fontWeight: 900, margin: 0, letterSpacing: '-0.02em' }}>
          ${total.toLocaleString('en-US', { maximumFractionDigits: 0 })}
        </p>
      </div>
      {assets.map((a, i) => {
        const value = a.amount * a.price;
        const pct = (value / total) * 100;
        return (
          <div key={i} style={{
            display: 'flex', alignItems: 'center', gap: '14px',
            padding: '12px 16px', marginBottom: '8px',
            background: 'rgba(255,255,255,0.03)',
            border: '1px solid rgba(255,255,255,0.06)',
            borderRadius: '12px',
          }}>
            <div style={{ width: '36px', height: '36px', borderRadius: '10px', background: a.color + '20', display: 'flex', alignItems: 'center', justifyContent: 'center', color: a.color, fontSize: '16px', fontWeight: 900, flexShrink: 0 }}>{a.icon}</div>
            <div style={{ flex: 1 }}>
              <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                <span style={{ color: '#F5F5F0', fontSize: '13px', fontWeight: 600 }}>{a.symbol}</span>
                <span style={{ color: '#F5F5F0', fontSize: '13px', fontWeight: 700 }}>${value.toLocaleString('en-US', { maximumFractionDigits: 0 })}</span>
              </div>
              <div style={{ display: 'flex', justifyContent: 'space-between', marginTop: '4px' }}>
                <span style={{ color: 'rgba(245,245,240,0.4)', fontSize: '11px' }}>{a.amount} {a.symbol}</span>
                <span style={{ color: a.change >= 0 ? '#4ade80' : '#ef4444', fontSize: '11px', fontWeight: 600 }}>
                  {a.change >= 0 ? '+' : ''}{a.change.toFixed(1)}%
                </span>
              </div>
              <div style={{ marginTop: '6px', height: '3px', background: 'rgba(255,255,255,0.06)', borderRadius: '2px', overflow: 'hidden' }}>
                <div style={{ height: '100%', width: `${pct}%`, background: a.color, borderRadius: '2px' }} />
              </div>
            </div>
          </div>
        );
      })}
    </div>
  );
}

Component info

CategoryFinance

Frameworkreact

TierFREE

Copies0

About

Crypto portfolio summary with price tickers

More from Finance

'use client'
import { useState, useEffect } from 'react'

const BASE_PRICES: Record<string, { price: number; change: number; cap: string; icon: string; color: string }> = {
  BTC: { price: 67420, change: 2.4, cap: '1.32T', icon: '₿', color: '#f59e0b'

CryptoTicker

Finance

'use client';
import { useState } from 'react';

export default function InvoiceCard() {
  const invoices = [
    { id: 'INV-2024', client: 'Acme Corp', amount: 4800, status: 'paid', date: 'May 15, 2026' },
    { id: 'INV-2025', client: 'Globex Inc',

InvoiceCard

Finance