Cryptocurrency Wallet UI JavaScript

👤 Sharing: AI 
```javascript
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Cryptocurrency Wallet</title>
  <style>
    body {
      font-family: sans-serif;
      margin: 0;
      padding: 0;
      background-color: #f4f4f4;
    }

    .container {
      max-width: 800px;
      margin: 20px auto;
      background-color: #fff;
      padding: 20px;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
      text-align: center;
      margin-bottom: 20px;
    }

    .balance {
      text-align: center;
      font-size: 1.5em;
      margin-bottom: 20px;
    }

    .balance span {
      font-weight: bold;
    }

    .transaction-form, .transaction-history {
      margin-bottom: 20px;
    }

    .transaction-form h2, .transaction-history h2 {
      margin-bottom: 10px;
    }

    label {
      display: block;
      margin-bottom: 5px;
    }

    input[type="text"],
    input[type="number"] {
      width: 100%;
      padding: 8px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 4px;
      box-sizing: border-box;
    }

    button {
      background-color: #4CAF50;
      color: white;
      padding: 10px 15px;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }

    button:hover {
      background-color: #3e8e41;
    }

    .transaction-history table {
      width: 100%;
      border-collapse: collapse;
    }

    .transaction-history th, .transaction-history td {
      padding: 8px;
      border: 1px solid #ddd;
      text-align: left;
    }

    .transaction-history th {
      background-color: #f2f2f2;
    }

    .error-message {
      color: red;
      margin-bottom: 10px;
    }

    #privateKeyDisplay {
      word-break: break-all; /* Prevents overflow for long keys */
    }
  </style>
</head>
<body>

  <div class="container">
    <h1>Cryptocurrency Wallet</h1>

    <div class="balance">
      Balance: <span>0.00 BTC</span>
    </div>

    <div class="transaction-form">
      <h2>Send Cryptocurrency</h2>
      <label for="recipient">Recipient Address:</label>
      <input type="text" id="recipient" placeholder="Enter recipient address">

      <label for="amount">Amount (BTC):</label>
      <input type="number" id="amount" placeholder="Enter amount to send">

      <div class="error-message" id="errorMessage"></div>

      <button onclick="sendTransaction()">Send</button>
    </div>

    <div class="transaction-history">
      <h2>Transaction History</h2>
      <table>
        <thead>
          <tr>
            <th>Type</th>
            <th>Recipient</th>
            <th>Amount</th>
            <th>Timestamp</th>
          </tr>
        </thead>
        <tbody id="transactionTableBody">
          <!-- Transactions will be added here -->
        </tbody>
      </table>
    </div>

    <div>
      <h2>Wallet Information</h2>
      <p><strong>Public Key (Address):</strong> <span id="publicKeyDisplay">Loading...</span></p>
      <p><strong>Private Key:</strong> <span id="privateKeyDisplay">Loading...</span></p>

    </div>

  </div>

  <script>
    let balance = 0;
    let transactions = [];
    let publicKey;
    let privateKey;

    // Function to generate a simple key pair (not cryptographically secure!)
    function generateKeyPair() {
      // This is a simplified example and NOT suitable for production use.
      // In a real-world scenario, use a robust cryptographic library.
      privateKey = "PRIVATE_KEY_" + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
      publicKey = "PUBLIC_KEY_" + Math.random().toString(36).substring(2, 15) + Math.random().toString(36).substring(2, 15);
    }

    function updateBalance() {
      document.querySelector('.balance span').textContent = balance.toFixed(8) + " BTC";
    }

    function updateTransactionHistory() {
      const tableBody = document.getElementById('transactionTableBody');
      tableBody.innerHTML = ''; // Clear the table

      transactions.forEach(transaction => {
        const row = document.createElement('tr');
        row.innerHTML = `
          <td>${transaction.type}</td>
          <td>${transaction.recipient}</td>
          <td>${transaction.amount.toFixed(8)}</td>
          <td>${new Date(transaction.timestamp).toLocaleString()}</td>
        `;
        tableBody.appendChild(row);
      });
    }

    function sendTransaction() {
      const recipient = document.getElementById('recipient').value;
      const amount = parseFloat(document.getElementById('amount').value);
      const errorMessage = document.getElementById('errorMessage');

      if (!recipient || !amount || isNaN(amount) || amount <= 0) {
        errorMessage.textContent = "Please enter a valid recipient address and a positive amount.";
        return;
      }

      if (amount > balance) {
        errorMessage.textContent = "Insufficient funds.";
        return;
      }

      // Simulate transaction processing
      balance -= amount;
      transactions.push({
        type: 'Send',
        recipient: recipient,
        amount: amount,
        timestamp: Date.now()
      });

      updateBalance();
      updateTransactionHistory();

      // Clear the form and error message
      document.getElementById('recipient').value = '';
      document.getElementById('amount').value = '';
      errorMessage.textContent = '';
    }

    // Initialize the wallet
    function initializeWallet() {
      generateKeyPair();
      updateBalance();
      document.getElementById('publicKeyDisplay').textContent = publicKey;
      document.getElementById('privateKeyDisplay').textContent = privateKey; //Be very careful with displaying the private key!
    }

    initializeWallet();
  </script>

</body>
</html>
```
👁️ Viewed: 8

Comments