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

Merge pull request #4 from void-57/main

Browse Source 
Enhance transaction confirmation and success popups with modern design and detailed summaries
This commit is contained in:
Aniruddha 2025-08-11 15:41:36 +05:30 committed by GitHub
commit 1ac0c9b734
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 1323 additions and 79 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1160
css/main.css
View File

File diff suppressed because it is too large Load Diff

132
index.html
View File

@ -443,17 +443,68 @@
<!-- Confirmation Popup -->
<sm-popup id="sendConfirm">
<div class="popup-content">
<h3><i class="fas fa-exclamation-triangle"></i> Confirm Transaction</h3>
<div class="transaction-details" id="transactionDetails">
<!-- Transaction details will be populated here -->
<div class="modern-popup-container">
<!-- Popup Header -->
<div class="popup-header">
<div class="popup-icon confirm-icon">
<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>
</div>
<div class="popup-actions">
<button onclick="closePopup()" class="btn btn-secondary">
<i class="fas fa-times"></i> Cancel
<!-- Transaction Summary -->
<div class="transaction-summary">
<div class="summary-item amount-highlight">
<div class="summary-icon">
<i class="fas fa-coins"></i>
</div>
<div class="summary-content">
<span class="summary-label">Amount to Send</span>
<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>
</div>
</div>
<div class="summary-item">
<div class="summary-icon">
<i class="fas fa-user-plus"></i>
</div>
<div class="summary-content">
<span class="summary-label">To</span>
<span class="summary-value address-text" id="confirmTo">Loading...</span>
</div>
</div>
<div class="summary-item">
<div class="summary-icon">
<i class="fas fa-receipt"></i>
</div>
<div class="summary-content">
<span class="summary-label">Network Fee</span>
<span class="summary-value" id="confirmFee">~0.00001 XRP</span>
</div>
</div>
</div>
<!-- Action Buttons -->
<div class="popup-actions modern-actions">
<button onclick="closePopup()" class="btn btn-cancel">
<i class="fas fa-times"></i>
<span>Cancel</span>
</button>
<button onclick="confirmSend()" class="btn btn-primary">
<i class="fas fa-paper-plane"></i> Send
<button onclick="confirmSend()" class="btn btn-confirm">
<i class="fas fa-paper-plane"></i>
<span>Confirm</span>
</button>
</div>
</div>
@ -461,14 +512,46 @@
<!-- Transaction Success Popup -->
<sm-popup id="transactionSuccess">
<div class="popup-content">
<h3><i class="fas fa-check-circle"></i> Transaction Successful!</h3>
<div class="transaction-details" id="successTransactionDetails">
<!-- Success transaction details will be populated here -->
<div class="modern-popup-container success-popup">
<!-- Success Header -->
<div class="popup-header success-header">
<div class="popup-icon success-icon">
<i class="fas fa-check-circle"></i>
</div>
<h2 class="popup-title">Transaction Successful!</h2>
<p class="popup-subtitle">Your XRP has been sent successfully</p>
</div>
<div class="popup-actions">
<button onclick="closePopup()" class="btn btn-primary">
<i class="fas fa-check"></i> Close
<!-- Transaction Details -->
<div class="success-details">
<div class="success-summary">
<div class="success-item">
<span class="success-label">Amount Sent</span>
<span class="success-value" id="successAmount">0 XRP</span>
</div>
<div class="success-item">
<span class="success-label">Network Fee</span>
<span class="success-value" id="successFee">0 XRP</span>
</div>
</div>
<!-- Expandable Details -->
<div class="expandable-details">
<button class="details-toggle" onclick="toggleTransactionDetails()">
<span>View Details</span>
<i class="fas fa-chevron-down"></i>
</button>
<div class="details-content" id="expandableDetails">
<!-- Detailed transaction info will be populated here -->
</div>
</div>
</div>
<!-- Success Actions -->
<div class="popup-actions modern-actions">
<button onclick="closePopup()" class="btn btn-done">
<i class="fas fa-check"></i>
<span>Done</span>
</button>
</div>
</div>
@ -571,6 +654,23 @@
}
}
// Toggle transaction details in success popup
function toggleTransactionDetails() {
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";
toggleButton.querySelector("span").textContent = "View Details";
} else {
detailsContent.classList.add("expanded");
icon.className = "fas fa-chevron-up";
toggleButton.querySelector("span").textContent = "Hide Details";
}
}
// Initialize theme when DOM is loaded
document.addEventListener("DOMContentLoaded", function () {
initializeTheme();

110
scripts/wallet.js
View File

@ -520,28 +520,15 @@ async function sendXRP() {
};
// Populate transaction details in confirmation popup
const detailsContainer = getRef("transactionDetails");
if (detailsContainer) {
detailsContainer.innerHTML = ` <div class="detail-row">
<span class="detail-label">From:</span>
<span class="detail-value">${
wallet.address || wallet.classicAddress
}</span>
</div>
<div class="detail-row">
<span class="detail-label">To:</span>
<span class="detail-value">${destination}</span>
</div>
<div class="detail-row">
<span class="detail-label">Amount:</span>
<span class="detail-value">${amount} XRP</span>
</div>
<div class="detail-row">
<span class="detail-label">Network Fee:</span>
<span class="detail-value">~0.00001 XRP</span>
</div>
`;
}
const confirmAmountEl = getRef("confirmAmount");
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 (confirmToEl) confirmToEl.textContent = destination;
if (confirmFeeEl) confirmFeeEl.textContent = "~0.00001 XRP";
// Show confirmation popup
openPopup("sendConfirm");
@ -661,43 +648,46 @@ async function confirmSend() {
// Close the confirmation popup first
closePopup();
// Populate detailed success popup
const successDetailsContainer = getRef("successTransactionDetails");
if (successDetailsContainer) {
successDetailsContainer.innerHTML = `
<div class="detail-row">
<span class="detail-label">Status:</span>
<span class="detail-value" style="color: var(--success-color); font-weight: bold;">✅ Confirmed</span>
</div>
<div class="detail-row">
<span class="detail-label">Amount Sent:</span>
<span class="detail-value">${amount} XRP</span>
</div>
<div class="detail-row">
<span class="detail-label">Network Fee:</span>
<span class="detail-value">${fee} XRP</span>
</div>
<div class="detail-row">
<span class="detail-label">From:</span>
<span class="detail-value">${
wallet.classicAddress || wallet.address
}</span>
</div>
<div class="detail-row">
<span class="detail-label">To:</span>
<span class="detail-value">${destination}</span>
</div>
<div class="detail-row">
<span class="detail-label">Transaction Hash:</span>
<span class="detail-value">${signed.hash}</span>
</div>
<div class="detail-row">
<span class="detail-label">Ledger Index:</span>
<span class="detail-value">${Ledger_Index}</span>
</div>
<div class="detail-row">
<span class="detail-label">Transaction Date:</span>
<span class="detail-value">${rippleDate}</span>
// Populate success popup summary
const successAmountEl = getRef("successAmount");
const successFeeEl = getRef("successFee");
if (successAmountEl) successAmountEl.textContent = `${amount} XRP`;
if (successFeeEl) successFeeEl.textContent = `${fee} XRP`;
// Populate detailed expandable section
const expandableDetails = getRef("expandableDetails");
if (expandableDetails) {
expandableDetails.innerHTML = `
<div class="detail-grid">
<div class="detail-item">
<span class="detail-label">
<i class="fas fa-user-minus"></i>
From
</span>
<span class="detail-value address-value">${wallet.classicAddress || wallet.address}</span>
</div>
<div class="detail-item">
<span class="detail-label">
<i class="fas fa-user-plus"></i>
To
</span>
<span class="detail-value address-value">${destination}</span>
</div>
<div class="detail-item">
<span class="detail-label">
<i class="fas fa-hashtag"></i>
Transaction Hash
</span>
<span class="detail-value hash-value" title="${signed.hash}">${signed.hash}</span>
</div>
<div class="detail-item">
<span class="detail-label">
<i class="fas fa-clock"></i>
Transaction Time
</span>
<span class="detail-value">${rippleDate}</span>
</div>
</div>
`;
}
@ -1509,7 +1499,7 @@ async function checkBalanceAndTransactions() {
document.getElementById("balanceInfo").style.display = "block";
notify(
"Account not found - Address not activated (needs 10 XRP minimum)",
"Account not found - Address not activated (needs 1 XRP minimum)",
"warning"
);
} else {