RanchiMall/xrpwallet
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5 from void-57/main

Browse Source 
Refactor CSS for improved readability and maintainability; remove generate address functionality from HTML and related JavaScript code
This commit is contained in:
Aniruddha 2025-08-11 17:31:08 +05:30 committed by GitHub
commit cbe4901d24
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 65 additions and 326 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
css/main.css
View File

@ -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;

103
index.html
View File

@ -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 -->
@ -464,14 +379,16 @@
<span class="summary-value" id="confirmAmount">0 XRP</span>
</div>
</div>
<div class="summary-item">
<div class="summary-icon">
<i class="fas fa-user-minus"></i>
</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>
@ -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";

232
scripts/wallet.js
View File

@ -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() {
<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 {
@ -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 =
'<div class="no-transactions"><i class="fas fa-inbox"></i><p>No transactions found for this address.</p></div>';
// 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 =
'<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;
@ -2137,4 +1941,4 @@ window.copyCurrentAddress = copyCurrentAddress;
document.addEventListener("DOMContentLoaded", () => {
initializeInputControls();
});
});