Merge pull request #5 from void-57/main

Refactor CSS for improved readability and maintainability; remove generate address functionality from HTML and related JavaScript code

css/main.css

@@ -1399,10 +1399,7 @@ body {
   text-overflow: ellipsis;
 }
 
-/* Generate & Recover Pages */
+
-.generate-info {
-  margin-bottom: 2rem;
-}
 
 /* Transaction Filter and Pagination Controls */
 .transaction-controls {
@@ -1662,7 +1659,7 @@ body {
   }
 }
 
-.wallet-generated h3,
+
 .wallet-recovered h3 {
   display: flex;
   align-items: center;
@@ -1850,7 +1847,11 @@ sm-popup::part(popup) {
 
 /* Popup Header */
 .popup-header {
-  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+  background: linear-gradient(
+    135deg,
+    var(--primary-color),
+    var(--primary-dark)
+  );
   color: white;
   padding: 2rem 1.5rem 1.5rem;
   text-align: center;
@@ -1946,7 +1947,11 @@ sm-popup::part(popup) {
 }
 
 .amount-highlight {
-  background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(16, 185, 129, 0.05));
+  background: linear-gradient(
+    135deg,
+    rgba(59, 130, 246, 0.05),
+    rgba(16, 185, 129, 0.05)
+  );
   border: 2px solid var(--primary-color);
   box-shadow: 0 4px 15px rgba(59, 130, 246, 0.1);
 }
@@ -1955,7 +1960,11 @@ sm-popup::part(popup) {
   width: 40px;
   height: 40px;
   border-radius: 10px;
-  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+  background: linear-gradient(
+    135deg,
+    var(--primary-color),
+    var(--primary-dark)
+  );
   color: white;
   display: flex;
   align-items: center;
@@ -1988,7 +1997,7 @@ sm-popup::part(popup) {
 }
 
 .address-text {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
   font-size: 0.75rem !important;
   background: rgba(59, 130, 246, 0.1);
   padding: 0.375rem 0.5rem;
@@ -2143,7 +2152,7 @@ sm-popup::part(popup) {
 }
 
 .address-value {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
   font-size: 0.75rem !important;
   background: rgba(59, 130, 246, 0.1);
   padding: 0.25rem 0.5rem;
@@ -2152,7 +2161,7 @@ sm-popup::part(popup) {
 }
 
 .hash-value {
-  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
   font-size: 0.75rem !important;
   background: rgba(16, 185, 129, 0.1);
   padding: 0.25rem 0.5rem;
@@ -2201,7 +2210,11 @@ sm-popup::part(popup) {
 }
 
 .btn-confirm {
-  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+  background: linear-gradient(
+    135deg,
+    var(--primary-color),
+    var(--primary-dark)
+  );
   color: white;
   border: 2px solid var(--primary-color);
   box-shadow: 0 4px 15px rgba(59, 130, 246, 0.3);
@@ -2742,12 +2755,17 @@ sm-popup::part(popup) {
     max-width: 100%;
   }
 
-  .popup-actions:not(#sendConfirm .popup-actions):not(#transactionSuccess .popup-actions) {
+  .popup-actions:not(#sendConfirm .popup-actions):not(
+      #transactionSuccess .popup-actions
+    ) {
     flex-direction: column;
     gap: 1rem;
   }
 
-  .popup-actions:not(#sendConfirm .popup-actions):not(#transactionSuccess .popup-actions) .btn {
+  .popup-actions:not(#sendConfirm .popup-actions):not(
+      #transactionSuccess .popup-actions
+    )
+    .btn {
     width: 100%;
     min-width: auto;
     justify-content: center;
@@ -3014,8 +3032,8 @@ sm-popup::part(popup) {
   }
 }
 
-/* Generate and Retrieve Actions */
+/* Retrieve Actions */
-.generate-actions,
+
 .retrieve-actions {
   display: flex;
   flex-direction: column;
@@ -3090,12 +3108,10 @@ sm-popup::part(popup) {
 }
 
 @media (max-width: 768px) {
-  .generate-actions,
   .retrieve-actions {
     gap: 0.75rem;
   }
 
-  .generate-btn,
   .retrieve-btn {
     padding: 0.75rem 1rem;
     font-size: 0.9rem;

index.html

@@ -78,11 +78,6 @@
               <i class="fas fa-paper-plane"></i> Send XRP
             </a>
           </li>
-          <li>
-            <a href="#" onclick="showPage('generatePage')" class="nav-link">
-              <i class="fas fa-plus-circle"></i> Generate Address
-            </a>
-          </li>
           <li>
             <a href="#" onclick="showPage('recoverPage')" class="nav-link">
               <i class="fas fa-key"></i> Retrieve Address
@@ -284,80 +279,6 @@
           </div>
         </div>
 
-        <!-- Generate Address Page -->
-        <div id="generatePage" class="page hidden">
-          <div class="page-header">
-            <h2><i class="fas fa-plus-circle"></i> Generate XRP Address</h2>
-            <p>Generate XRP addresses from private keys of any blockchain</p>
-          </div>
-
-          <div class="card">
-            <!-- Private Key Input for XRP Generation -->
-            <div class="form-group">
-              <label for="generateKey">
-                <i class="fas fa-key"></i> Private Key (Required for XRP)
-              </label>
-              <input
-                type="password"
-                id="generateKey"
-                placeholder="Enter private key from any blockchain (BTC/FLO)"
-                class="form-input"
-              />
-              <small class="form-text">
-                Enter a private key from any blockchain (BTC/FLO) to generate
-                the corresponding XRP address.
-              </small>
-            </div>
-
-            <div class="generate-actions">
-              <button
-                onclick="generateXRPAddress()"
-                class="btn btn-primary btn-block"
-              >
-                <i class="fas fa-coins"></i> Generate XRP Address
-              </button>
-            </div>
-
-            <!-- XRP Generation Info -->
-            <div
-              id="xrpGenerationInfo"
-              class="card info-card"
-              style="display: none"
-            >
-              <div class="info-header">
-                <h3>
-                  <i class="fas fa-info-circle"></i> XRP Address Generation
-                </h3>
-              </div>
-              <div class="info-content">
-                <p>
-                  <strong>Note:</strong> This wallet doesn't generate XRP
-                  addresses directly.
-                </p>
-                <p>To get an XRP address, please:</p>
-                <ol>
-                  <li>Use our BTC wallet to generate a BTC private key</li>
-                  <li>
-                    Convert that BTC/FLO private key to Ripple seed using the
-                    conversion tool below
-                  </li>
-                </ol>
-                <button
-                  onclick="showPage('convertPage')"
-                  class="btn btn-primary"
-                >
-                  <i class="fas fa-exchange-alt"></i> Go to Conversion Tool
-                </button>
-              </div>
-            </div>
-          </div>
-
-          <!-- Generated Address Output -->
-          <div id="walletOutput" class="card output-card" style="display: none">
-            <!-- Generated address info will be inserted here -->
-          </div>
-        </div>
-
         <!-- Retrieve Address Page -->
         <div id="recoverPage" class="page hidden">
           <div class="page-header">
@@ -423,14 +344,6 @@
         <i class="fas fa-paper-plane"></i>
         <span>Send</span>
       </button>
-      <button
-        onclick="showPage('generatePage')"
-        class="nav-btn"
-        data-page="generatePage"
-      >
-        <i class="fas fa-plus"></i>
-        <span>Generate</span>
-      </button>
       <button
         onclick="showPage('recoverPage')"
         class="nav-btn"
@@ -450,7 +363,9 @@
             <i class="fas fa-shield-alt"></i>
           </div>
           <h2 class="popup-title">Confirm Transaction</h2>
-          <p class="popup-subtitle">Please review the transaction details before sending</p>
+          <p class="popup-subtitle">
+            Please review the transaction details before sending
+          </p>
         </div>
 
         <!-- Transaction Summary -->
@@ -471,7 +386,9 @@
             </div>
             <div class="summary-content">
               <span class="summary-label">From</span>
-              <span class="summary-value address-text" id="confirmFrom">Loading...</span>
+              <span class="summary-value address-text" id="confirmFrom"
+                >Loading...</span
+              >
             </div>
           </div>
 
@@ -481,7 +398,9 @@
             </div>
             <div class="summary-content">
               <span class="summary-label">To</span>
-              <span class="summary-value address-text" id="confirmTo">Loading...</span>
+              <span class="summary-value address-text" id="confirmTo"
+                >Loading...</span
+              >
             </div>
           </div>
 

scripts/wallet.js

@@ -526,7 +526,8 @@ async function sendXRP() {
     const confirmFeeEl = getRef("confirmFee");
 
     if (confirmAmountEl) confirmAmountEl.textContent = `${amount} XRP`;
-    if (confirmFromEl) confirmFromEl.textContent = wallet.address || wallet.classicAddress;
+    if (confirmFromEl)
+      confirmFromEl.textContent = wallet.address || wallet.classicAddress;
     if (confirmToEl) confirmToEl.textContent = destination;
     if (confirmFeeEl) confirmFeeEl.textContent = "~0.00001 XRP";
 
@@ -665,7 +666,9 @@ async function confirmSend() {
                 <i class="fas fa-user-minus"></i>
                 From
               </span>
-              <span class="detail-value address-value">${wallet.classicAddress || wallet.address}</span>
+              <span class="detail-value address-value">${
+                wallet.classicAddress || wallet.address
+              }</span>
             </div>
             <div class="detail-item">
               <span class="detail-label">
@@ -679,7 +682,9 @@ async function confirmSend() {
                 <i class="fas fa-hashtag"></i>
                 Transaction Hash
               </span>
-              <span class="detail-value hash-value" title="${signed.hash}">${signed.hash}</span>
+              <span class="detail-value hash-value" title="${signed.hash}">${
+          signed.hash
+        }</span>
             </div>
             <div class="detail-item">
               <span class="detail-label">
@@ -904,7 +909,6 @@ function displaySearchedAddresses(addresses) {
   `;
 }
 
-
 // toggle between address types in searched addresses
 async function toggleAddressType(addressIndex, type) {
   try {
@@ -1317,7 +1321,6 @@ async function checkBalanceAndTransactions() {
       userInput.length <= 34
     ) {
       actualXRPAddress = userInput;
-      
     }
     // Check if user is trying to enter BTC or FLO addresses (which we don't support)
     else if (
@@ -1540,7 +1543,8 @@ async function checkBalanceAndTransactions() {
           document.getElementById("transactionControls").style.display = "none";
 
           // Reset pagination info
-          document.getElementById("paginationInfo").textContent = "Showing 0 - 0 of 0 transactions";
+          document.getElementById("paginationInfo").textContent =
+            "Showing 0 - 0 of 0 transactions";
 
           // Clear page numbers
           document.getElementById("pageNumbers").innerHTML = "";
@@ -1601,205 +1605,6 @@ async function checkBalanceAndTransactions() {
   }
 }
 
-// Generate specific cryptocurrency addresses
-async function generateXRPAddress() {
-  try {
-    // Get private key from the wallet generation form input
-    const keyInput = document.getElementById("generateKey");
-    if (!keyInput) {
-      notify("Private key input field not found", "error");
-      return;
-    }
-
-    const sourcePrivateKey = keyInput.value.trim();
-    if (!sourcePrivateKey) {
-      notify(
-        "Please enter a private key from any blockchain (BTC/FLO)",
-        "error"
-      );
-      return;
-    }
-
-    // Show loading state
-    const generateBtn = document.querySelector(
-      '[onclick="generateXRPAddress()"]'
-    );
-    const originalText = generateBtn.innerHTML;
-    generateBtn.innerHTML =
-      '<i class="fas fa-spinner fa-spin"></i> Generating...';
-    generateBtn.disabled = true;
-
-    notify("Converting private key to multiple addresses...", "info");
-
-    // Convert the source private key using improved logic
-    let xrpResult;
-    let btcResult = null;
-    let floResult = null;
-    let sourceBlockchain = "Unknown";
-
-    try {
-      if (
-        sourcePrivateKey.startsWith("L") ||
-        sourcePrivateKey.startsWith("K")
-      ) {
-        // Bitcoin WIF format
-        sourceBlockchain = "Bitcoin";
-        xrpResult = convertWIFtoRippleWallet(sourcePrivateKey);
-
-        // Generate FLO from BTC
-        floResult = generateFLOFromPrivateKey(sourcePrivateKey);
-
-        // Keep original BTC info
-        btcResult = generateBTCFromPrivateKey(sourcePrivateKey);
-      } else {
-        // Try to decode as WIF (FLO or other)
-        try {
-          sourceBlockchain = "FLO/Other";
-          xrpResult = convertWIFtoRippleWallet(sourcePrivateKey);
-
-          // Generate BTC from FLO
-          btcResult = generateBTCFromPrivateKey(sourcePrivateKey);
-
-          // Keep original FLO info (if floCrypto available)
-          floResult = generateFLOFromPrivateKey(sourcePrivateKey);
-        } catch (e) {
-          throw new Error(
-            "Unsupported private key format. Please use BTC WIF, FLO WIF private key."
-          );
-        }
-      }
-
-      // Display result with all blockchain information
-      const outputDiv = document.getElementById("walletOutput");
-      if (outputDiv) {
-        outputDiv.innerHTML = `
-          <div class="wallet-result">
-            <h3><i class="fas fa-coins"></i> Multi-Blockchain Addresses Generated</h3>
-            <div class="wallet-details">
-              
-              <!-- XRP Section -->
-              <div class="blockchain-section">
-                <h4><i class="fas fa-coins" style="color: #23b469;"></i> Ripple (XRP)</h4>
-                <div class="detail-row">
-                  <label>XRP Address:</label>
-                  <div class="value-container">
-                    <code>${xrpResult.address}</code>
-                    <button onclick="copyToClipboard('${
-                      xrpResult.address
-                    }')" class="btn-copy">
-                      <i class="fas fa-copy"></i>
-                    </button>
-                  </div>
-                </div>
-                <div class="detail-row">
-                  <label>XRP Seed:</label>
-                  <div class="value-container">
-                    <code>${xrpResult.seed}</code>
-                    <button onclick="copyToClipboard('${
-                      xrpResult.seed
-                    }')" class="btn-copy">
-                      <i class="fas fa-copy"></i>
-                    </button>
-                  </div>
-                </div>
-              </div>
-
-              ${
-                btcResult
-                  ? `
-              <!-- BTC Section -->
-              <div class="blockchain-section">
-                <h4><i class="fab fa-bitcoin" style="color: #f2a900;"></i> Bitcoin (BTC)</h4>
-                <div class="detail-row">
-                  <label>BTC Address:</label>
-                  <div class="value-container">
-                    <code>${btcResult.address}</code>
-                    <button onclick="copyToClipboard('${btcResult.address}')" class="btn-copy">
-                      <i class="fas fa-copy"></i>
-                    </button>
-                  </div>
-                </div>
-                <div class="detail-row">
-                  <label>BTC Private Key:</label>
-                  <div class="value-container">
-                    <code>${btcResult.privateKey}</code>
-                    <button onclick="copyToClipboard('${btcResult.privateKey}')" class="btn-copy">
-                      <i class="fas fa-copy"></i>
-                    </button>
-                  </div>
-                </div>
-              </div>
-              `
-                  : ""
-              }
-
-              ${
-                floResult
-                  ? `
-              <!-- FLO Section -->
-              <div class="blockchain-section">
-                <h4><i class="fas fa-leaf" style="color: #00d4aa;"></i> FLO Chain</h4>
-                <div class="detail-row">
-                  <label>FLO Address:</label>
-                  <div class="value-container">
-                    <code>${floResult.address}</code>
-                    <button onclick="copyToClipboard('${floResult.address}')" class="btn-copy">
-                      <i class="fas fa-copy"></i>
-                    </button>
-                  </div>
-                </div>
-                <div class="detail-row">
-                  <label>FLO Private Key:</label>
-                  <div class="value-container">
-                    <code>${floResult.privateKey}</code>
-                    <button onclick="copyToClipboard('${floResult.privateKey}')" class="btn-copy">
-                      <i class="fas fa-copy"></i>
-                    </button>
-                  </div>
-                </div>
-              </div>
-              `
-                  : ""
-              }
-
-            </div>
-            <div class="warning-message" style="margin-top: 1rem; padding: 0.75rem; background: #fff3cd; border: 1px solid #ffeaa7; border-radius: 6px; color: #856404;">
-              <i class="fas fa-exclamation-triangle"></i>
-              <strong>Important:</strong> These addresses are mathematically derived from your ${sourceBlockchain} private key using proper elliptic curve cryptography. Keep all private keys secure.
-            </div>
-          </div>
-        `;
-        outputDiv.style.display = "block";
-      }
-
-      const blockchainCount = 1 + (btcResult ? 1 : 0) + (floResult ? 1 : 0);
-      notify(
-        `${blockchainCount} blockchain addresses generated successfully from ${sourceBlockchain} private key!`,
-        "success"
-      );
-    } catch (conversionError) {
-      console.error("Private key conversion error:", conversionError);
-      notify(
-        "Failed to convert private key: " + conversionError.message,
-        "error"
-      );
-    }
-  } catch (error) {
-    console.error("XRP generation error:", error);
-    notify("Failed to generate XRP address: " + error.message, "error");
-  } finally {
-    // Restore button state
-    const generateBtn = document.querySelector(
-      '[onclick="generateXRPAddress()"]'
-    );
-    if (generateBtn) {
-      generateBtn.innerHTML =
-        '<i class="fas fa-coins"></i> Generate XRP Address';
-      generateBtn.disabled = false;
-    }
-  }
-}
-
 // Retrieve specific cryptocurrency addresses from private key
 async function retrieveXRPAddress() {
   const keyInput = document.getElementById("recoverKey");
@@ -2106,7 +1911,6 @@ function generateFLOFromPrivateKey(privateKey) {
 
 window.sendXRP = sendXRP;
 
-window.generateXRPAddress = generateXRPAddress;
 window.retrieveXRPAddress = retrieveXRPAddress;
 window.copyToClipboard = copyToClipboard;
 window.getRippleAddress = getRippleAddress;