Complete Dashboard with Wallet Operations

import { useMoonKey, useLogout } from '@moon-key/react-auth';
import { useSendTransaction } from '@moon-key/react-auth/ethereum';
import { useState } from 'react';

export default function UserDashboard() {
  const { user, isAuthenticated, ready } = useMoonKey();
  const { logout } = useLogout();
  const { sendTransaction } = useSendTransaction();
  
  const [recipient, setRecipient] = useState('');
  const [amount, setAmount] = useState('');
  const [txStatus, setTxStatus] = useState('');

  if (!ready) {
    return <div>Loading...</div>;
  }

  if (!isAuthenticated) {
    return <div>Please log in to view your dashboard</div>;
  }

  const handleSendTransaction = async () => {
    setTxStatus('sending');
    try {
      const txHash = await sendTransaction({
        to: recipient,
        value: (parseFloat(amount) * 1e18).toString() // Convert ETH to wei
      });
      
      setTxStatus('success');
      console.log('Transaction successful:', txHash);
      
      // Reset form
      setRecipient('');
      setAmount('');
      
      // Clear status after 3 seconds
      setTimeout(() => setTxStatus(''), 3000);
    } catch (error) {
      setTxStatus('error');
      console.error('Transaction failed:', error);
      setTimeout(() => setTxStatus(''), 3000);
    }
  };

  return (
    <div className="dashboard">
      <header>
        <h1>My Dashboard</h1>
        <button onClick={logout} className="logout-button">
          Log Out
        </button>
      </header>

      <section className="user-info">
        <h2>Account Information</h2>
        <div className="info-row">
          <span className="label">Email:</span>
          <span className="value">{user?.email?.address}</span>
        </div>
        <div className="info-row">
          <span className="label">User ID:</span>
          <span className="value">{user?.id}</span>
        </div>
        {user?.wallet && (
          <div className="info-row">
            <span className="label">Wallet:</span>
            <span className="value mono">{user.wallet.address}</span>
          </div>
        )}
      </section>

      <section className="send-transaction">
        <h2>Send ETH</h2>
        
        {txStatus === 'success' && (
          <div className="success-message">Transaction sent successfully!</div>
        )}
        {txStatus === 'error' && (
          <div className="error-message">Transaction failed. Please try again.</div>
        )}
        
        <div className="form-group">
          <label>Recipient Address</label>
          <input
            type="text"
            placeholder="0x..."
            value={recipient}
            onChange={(e) => setRecipient(e.target.value)}
            disabled={txStatus === 'sending'}
          />
        </div>
        
        <div className="form-group">
          <label>Amount (ETH)</label>
          <input
            type="number"
            placeholder="0.001"
            step="0.001"
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            disabled={txStatus === 'sending'}
          />
        </div>
        
        <button
          onClick={handleSendTransaction}
          disabled={!recipient || !amount || txStatus === 'sending'}
          className="primary-button"
        >
          {txStatus === 'sending' ? 'Sending...' : 'Send Transaction'}
        </button>
      </section>
    </div>
  );
}