External Wallet Operations

curl -X GET "https://api.example.com/v1/wallet/external" \
  -H "x-client-key: YOUR_PUBLIC_KEY" \
  -H "Authorization: Bearer USER_ACCESS_TOKEN"

async function fetchExternalWallets(userToken) {
  const response = await fetch(
    'https://api.example.com/v1/wallet/external',
    {
      headers: {
        'x-client-key': 'YOUR_PUBLIC_KEY',
        'Authorization': `Bearer ${userToken}`
      }
    }
  );

  const wallets = await response.json();

  return wallets.map(wallet => ({
    ...wallet,
    balanceNumber: parseFloat(wallet.balance),
    allowanceNumber: parseFloat(wallet.allowance),
    isLowAllowance: parseFloat(wallet.allowance) < parseFloat(wallet.balance) * 0.2,
    isLowBalance: parseFloat(wallet.balance) < 100,
    effectiveLimit: Math.min(
      parseFloat(wallet.balance),
      parseFloat(wallet.allowance)
    )
  }));
}

// Usage
const wallets = await fetchExternalWallets(userToken);

wallets.forEach(wallet => {
  console.log(`${wallet.network} ${wallet.currency.toUpperCase()}`);
  console.log(`  Address: ${wallet.address}`);
  console.log(`  Balance: ${wallet.balance}`);
  console.log(`  Allowance: ${wallet.allowance}`);
  console.log(`  Effective Limit: ${wallet.effectiveLimit}`);

  if (wallet.isLowAllowance) {
    console.log('  ⚠️ Low allowance - suggest redelegation');
  }

  if (wallet.isLowBalance) {
    console.log('  ⚠️ Low balance - suggest funding wallet');
  }
});

import { useState, useEffect } from 'react';

function ExternalWalletList({ userToken }) {
  const [wallets, setWallets] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetchWallets();
  }, []);

  const fetchWallets = async () => {
    setLoading(true);
    const response = await fetch(
      'https://api.example.com/v1/wallet/external',
      {
        headers: {
          'x-client-key': 'YOUR_PUBLIC_KEY',
          'Authorization': `Bearer ${userToken}`
        }
      }
    );

    const data = await response.json();
    setWallets(data);
    setLoading(false);
  };

  const getWalletStatus = (wallet) => {
    const balance = parseFloat(wallet.balance);
    const allowance = parseFloat(wallet.allowance);

    if (allowance === 0) return { status: 'exhausted', color: 'red' };
    if (allowance < balance * 0.2) return { status: 'low-allowance', color: 'orange' };
    if (balance < 100) return { status: 'low-balance', color: 'yellow' };
    return { status: 'healthy', color: 'green' };
  };

  const formatAddress = (address) => {
    return `${address.slice(0, 6)}...${address.slice(-4)}`;
  };

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

  if (wallets.length === 0) {
    return (
      <div className="empty-state">
        <p>No external wallets connected</p>
        <button onClick={() => window.location.href = '/connect-wallet'}>
          Connect Wallet
        </button>
      </div>
    );
  }

  return (
    <div className="wallet-list">
      <h3>External Wallets</h3>

      {wallets.map((wallet, index) => {
        const { status, color } = getWalletStatus(wallet);
        const effectiveLimit = Math.min(
          parseFloat(wallet.balance),
          parseFloat(wallet.allowance)
        );

        return (
          <div key={index} className={`wallet-card status-${color}`}>
            <div className="wallet-header">
              <div>
                <h4>{wallet.currency.toUpperCase()} on {wallet.network}</h4>
                <code>{formatAddress(wallet.address)}</code>
              </div>
              <div className={`status-badge ${color}`}>
                {status.replace('-', ' ')}
              </div>
            </div>

            <div className="wallet-stats">
              <div className="stat">
                <label>Balance</label>
                <span>{wallet.balance} {wallet.currency.toUpperCase()}</span>
              </div>

              <div className="stat">
                <label>Allowance</label>
                <span>{wallet.allowance} {wallet.currency.toUpperCase()}</span>
              </div>

              <div className="stat">
                <label>Available for Card</label>
                <span className="highlight">
                  {effectiveLimit.toFixed(2)} {wallet.currency.toUpperCase()}
                </span>
              </div>
            </div>

            {status === 'low-allowance' && (
              <div className="warning-banner">
                Allowance is low. Redelegate to continue card payments.
                <button onClick={() => handleRedelegate(wallet)}>
                  Redelegate
                </button>
              </div>
            )}

            {status === 'low-balance' && (
              <div className="warning-banner">
                Wallet balance is low. Add funds to enable purchases.
                <button onClick={() => handleFundWallet(wallet)}>
                  Fund Wallet
                </button>
              </div>
            )}

            {status === 'exhausted' && (
              <div className="error-banner">
                Allowance exhausted. Redelegate to resume card payments.
                <button onClick={() => handleRedelegate(wallet)}>
                  Redelegate Now
                </button>
              </div>
            )}
          </div>
        );
      })}
    </div>
  );
}