import { useBalances } from '@sunnyside-io/privacy-boost-react';

function BalanceDisplay() {
  const { balances, loading } = useBalances();

  if (loading) return <div>Loading balances...</div>;

  return (
    <ul>
      {balances.map((balance) => (
        <li key={balance.tokenAddress}>
          {balance.symbol}: {balance.formattedShielded} (shielded)
        </li>
      ))}
    </ul>
  );
}

interface FormattedBalance {
  tokenAddress: Hex;
  shielded: bigint;
  wallet: bigint;
  symbol?: string;
  decimals?: number;
  formattedShielded: string;
  formattedWallet: string;
}

import { useVault, useBalances } from '@sunnyside-io/privacy-boost-react';

function SyncButton() {
  const { refreshBalances } = useVault();
  const [syncing, setSyncing] = useState(false);

  const handleSync = async () => {
    setSyncing(true);
    await refreshBalances();
    setSyncing(false);
  };

  return (
    <button onClick={handleSync} disabled={syncing}>
      {syncing ? 'Refreshing...' : 'Refresh Balances'}
    </button>
  );
}

import { useBalances, useVault } from '@sunnyside-io/privacy-boost-react';

function BalanceList() {
  const { balances, loading, lastSynced, tokenCount } = useBalances();
  const { refreshBalances } = useVault();
  const [syncing, setSyncing] = useState(false);

  const handleRefresh = async () => {
    setSyncing(true);
    await refreshBalances();
    setSyncing(false);
  };

  return (
    <div>
      <div className="header">
        <h3>Balances ({tokenCount} tokens)</h3>
        <button onClick={handleRefresh} disabled={syncing}>
          {syncing ? 'Refreshing...' : 'Refresh'}
        </button>
      </div>

      {lastSynced && (
        <small>Last synced: {new Date(lastSynced).toLocaleTimeString()}</small>
      )}

      {loading ? (
        <div>Loading...</div>
      ) : (
        <table>
          <thead>
            <tr>
              <th>Token</th>
              <th>Shielded</th>
              <th>Wallet</th>
            </tr>
          </thead>
          <tbody>
            {balances.map((balance) => (
              <tr key={balance.tokenAddress}>
                <td>{balance.symbol}</td>
                <td>{balance.formattedShielded}</td>
                <td>{balance.formattedWallet}</td>
              </tr>
            ))}
          </tbody>
        </table>
      )}
    </div>
  );
}