UTXOTab.tsx

interface UTXOTabProps {
  utxos: any[];
  utxoTree: any[];
  onFetchTree: () => void;
}

export default function UTXOTab({ utxos, utxoTree, onFetchTree }: UTXOTabProps) {
  const totalSats = utxos.reduce((sum, u) => sum + (u.amount || 0), 0);
  const totalBtc = totalSats / 100_000_000;

  return (
    <div className="tab-content">
      <div className="stats-grid">
        <div className="stat-card">
          <div className="stat-label">Total UTXOs</div>
          <div className="stat-value">{utxos.length}</div>
        </div>
        <div className="stat-card">
          <div className="stat-label">Total Value</div>
          <div className="stat-value mono">{totalBtc.toFixed(8)} <span className="text-tertiary" style={{ fontSize: '14px' }}>BTC</span></div>
        </div>
      </div>

      {/* UTXO Tree */}
      {utxos.length > 0 && (
        <div className="section">
          <div className="section-header">
            <h3>UTXO Tree</h3>
            <button className="btn btn-ghost btn-small" onClick={onFetchTree}>
              Refresh Tree
            </button>
          </div>
          {utxoTree.length > 0 ? (
            <div>
              {utxoTree.map((node, i) => (
                <div key={i} className={`utxo-node ${node.spent_by ? 'utxo-node-spent' : ''}`}>
                  <div className="utxo-node-main">
                    <span className={`badge ${node.spent_by ? 'badge-red' : 'badge-green'}`}>
                      {node.spent_by ? 'Spent' : 'Available'}
                    </span>
                    <span className="mono" style={{ fontSize: '12px' }}>
                      {node.txid.slice(0, 12)}…v{node.vout}
                    </span>
                    <span className="mono" style={{ fontSize: '12px', marginLeft: 'auto' }}>
                      {(node.amount || 0).toFixed(8)} BTC
                    </span>
                  </div>
                  {node.spent_by && (
                    <div className="utxo-node-spent-by">
                      Spent by: <span className="mono">{node.spent_by.slice(0, 12)}…{node.spent_by.slice(-4)}</span>
                    </div>
                  )}
                </div>
              ))}
            </div>
          ) : (
            <div className="empty-state">
              <div className="empty-state-icon">◇</div>
              Click "Refresh Tree" to build the UTXO dependency graph
            </div>
          )}
        </div>
      )}

      {/* UTXO List */}
      <div className="section">
        <div className="section-header">
          <h3>UTXO List</h3>
        </div>
        {utxos.length === 0 ? (
          <div className="empty-state">
            <div className="empty-state-icon">◇</div>
            No UTXOs found
          </div>
        ) : (
          <table className="wallet-table">
            <thead>
              <tr>
                <th>TXID</th>
                <th>Vout</th>
                <th>Amount (BTC)</th>
                <th>Amount (sats)</th>
              </tr>
            </thead>
            <tbody>
              {utxos.map((u, i) => (
                <tr key={`${u.txid}-${u.vout}`}>
                  <td className="mono" style={{ fontSize: '12px' }}>
                    {u.txid}
                  </td>
                  <td>{u.vout}</td>
                  <td className="mono">{(u.amount / 100_000_000).toFixed(8)}</td>
                  <td className="mono">{u.amount}</td>
                </tr>
              ))}
            </tbody>
          </table>
        )}
      </div>
    </div>
  );
}