From 3fabcd8750cd6a4f7a30d2b42953f1aab5f5c65a Mon Sep 17 00:00:00 2001 From: void-57 Date: Mon, 11 Aug 2025 17:23:03 +0530 Subject: [PATCH] Refactor CSS for improved readability and maintainability; remove generate address functionality from HTML and related JavaScript code --- css/main.css | 56 +++++++---- index.html | 103 +++----------------- scripts/wallet.js | 232 ++++------------------------------------------ 3 files changed, 65 insertions(+), 326 deletions(-) diff --git a/css/main.css b/css/main.css index 2514c8f..27f4d88 100644 --- a/css/main.css +++ b/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); @@ -2672,12 +2685,12 @@ sm-popup::part(popup) { } .page-header h2 { - font-size: 1.5rem; + font-size: 1.5rem; gap: 0.5rem; } .page-header p { - font-size: 0.9rem; + font-size: 0.9rem; } /* More compact info cards on mobile */ @@ -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 */ -.generate-actions, +/* Retrieve 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; diff --git a/index.html b/index.html index 774c23c..a5c3434 100644 --- a/index.html +++ b/index.html @@ -78,11 +78,6 @@ Send XRP -
  • - - Generate Address - -
  • Retrieve Address @@ -284,80 +279,6 @@ - - - @@ -464,14 +379,16 @@ 0 XRP - +
    From - Loading... + Loading...
    @@ -481,7 +398,9 @@
    To - Loading... + Loading...
    @@ -659,7 +578,7 @@ const detailsContent = document.getElementById("expandableDetails"); const toggleButton = document.querySelector(".details-toggle"); const icon = toggleButton.querySelector("i"); - + if (detailsContent.classList.contains("expanded")) { detailsContent.classList.remove("expanded"); icon.className = "fas fa-chevron-down"; diff --git a/scripts/wallet.js b/scripts/wallet.js index bbb5bcb..134d9e3 100644 --- a/scripts/wallet.js +++ b/scripts/wallet.js @@ -524,9 +524,10 @@ async function sendXRP() { const confirmFromEl = getRef("confirmFrom"); const confirmToEl = getRef("confirmTo"); 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"; @@ -651,7 +652,7 @@ async function confirmSend() { // Populate success popup summary const successAmountEl = getRef("successAmount"); const successFeeEl = getRef("successFee"); - + if (successAmountEl) successAmountEl.textContent = `${amount} XRP`; if (successFeeEl) successFeeEl.textContent = `${fee} XRP`; @@ -665,7 +666,9 @@ async function confirmSend() { From - ${wallet.classicAddress || wallet.address} + ${ + wallet.classicAddress || wallet.address + }
    @@ -679,7 +682,9 @@ async function confirmSend() { Transaction Hash - ${signed.hash} + ${ + signed.hash + }
    @@ -904,7 +909,6 @@ function displaySearchedAddresses(addresses) { `; } - // toggle between address types in searched addresses async function toggleAddressType(addressIndex, type) { try { @@ -1046,7 +1050,7 @@ function setTransactionFilter(filter) { } function filterAndDisplayTransactions() { - // Try to get address from either input field + // Try to get address from either input field let address = ""; const checkInput = document.getElementById("checkAddress"); @@ -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 ( @@ -1535,16 +1538,17 @@ async function checkBalanceAndTransactions() { if (allTransactions.length === 0) { document.getElementById("txList").innerHTML = '

    No transactions found for this address.

    '; - + // Hide transaction controls and reset pagination 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 = ""; - + // Disable pagination buttons document.getElementById("prevBtn").disabled = true; document.getElementById("nextBtn").disabled = true; @@ -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 = - ' 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 = ` -
    -

    Multi-Blockchain Addresses Generated

    -
    - - -
    -

    Ripple (XRP)

    -
    - -
    - ${xrpResult.address} - -
    -
    -
    - -
    - ${xrpResult.seed} - -
    -
    -
    - - ${ - btcResult - ? ` - -
    -

    Bitcoin (BTC)

    -
    - -
    - ${btcResult.address} - -
    -
    -
    - -
    - ${btcResult.privateKey} - -
    -
    -
    - ` - : "" - } - - ${ - floResult - ? ` - -
    -

    FLO Chain

    -
    - -
    - ${floResult.address} - -
    -
    -
    - -
    - ${floResult.privateKey} - -
    -
    -
    - ` - : "" - } - -
    -
    - - Important: These addresses are mathematically derived from your ${sourceBlockchain} private key using proper elliptic curve cryptography. Keep all private keys secure. -
    -
    - `; - 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 = - ' 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; @@ -2137,4 +1941,4 @@ window.copyCurrentAddress = copyCurrentAddress; document.addEventListener("DOMContentLoaded", () => { initializeInputControls(); -}); \ No newline at end of file +});