From 79e3e5cdc901f3518d0db1ab209ef5b4d33fad39 Mon Sep 17 00:00:00 2001
From: void-57 <ruddhaani60@gmail.com>
Date: Mon, 11 Aug 2025 13:26:50 +0530
Subject: [PATCH 1/3] Update notification message for account activation
 requirement is 1 XRP

---
 scripts/wallet.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/wallet.js b/scripts/wallet.js
index 6cc967b..27f59fb 100644
--- a/scripts/wallet.js
+++ b/scripts/wallet.js
@@ -1509,7 +1509,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 {

From a6177c3a2fd212260621977c5b11116a53904968 Mon Sep 17 00:00:00 2001
From: void-57 <ruddhaani60@gmail.com>
Date: Mon, 11 Aug 2025 14:50:37 +0530
Subject: [PATCH 2/3] Enhance transaction confirmation and success popups with
 modern design and detailed summaries

- Redesigned confirmation popup with improved layout and transaction summary details.
- Added security notice to the confirmation popup.
- Implemented expandable details section in the transaction success popup for better user experience.
- Updated JavaScript functions to populate new elements in the confirmation and success popups.
---
 css/main.css      | 1160 ++++++++++++++++++++++++++++++++++++++++++++-
 index.html        |  138 +++++-
 scripts/wallet.js |  122 ++---
 3 files changed, 1342 insertions(+), 78 deletions(-)

diff --git a/css/main.css b/css/main.css
index e5a7ff7..2514c8f 100644
--- a/css/main.css
+++ b/css/main.css
@@ -1804,7 +1804,7 @@ sm-popup::part(popup) {
   box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
     0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
   border: 1px solid var(--border-color) !important;
-  max-height: 85vh !important;
+  max-height: 90vh !important;
   overflow-y: auto !important;
   animation: popupFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
 }
@@ -1833,6 +1833,412 @@ sm-popup::part(popup) {
   }
 }
 
+/* ===== MODERN POPUP DESIGN ===== */
+
+/* Base Popup Container */
+.modern-popup-container {
+  padding: 0;
+  width: 100%;
+  background: var(--surface-color);
+  border-radius: 16px;
+  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+  overflow: hidden;
+  position: relative;
+  max-width: 500px;
+  margin: 0 auto;
+}
+
+/* Popup Header */
+.popup-header {
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+  color: white;
+  padding: 2rem 1.5rem 1.5rem;
+  text-align: center;
+  position: relative;
+}
+
+.popup-header::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
+  opacity: 0.3;
+}
+
+.popup-header > * {
+  position: relative;
+  z-index: 1;
+}
+
+.popup-icon {
+  width: 60px;
+  height: 60px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto 1rem;
+  font-size: 1.5rem;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+}
+
+.confirm-icon {
+  background: rgba(245, 158, 11, 0.2);
+  color: #f59e0b;
+  border: 3px solid rgba(245, 158, 11, 0.3);
+}
+
+.success-icon {
+  background: rgba(16, 185, 129, 0.2);
+  color: #10b981;
+  border: 3px solid rgba(16, 185, 129, 0.3);
+}
+
+.popup-title {
+  font-size: 1.5rem;
+  font-weight: 700;
+  margin: 0 0 0.5rem 0;
+  letter-spacing: -0.025em;
+}
+
+.popup-subtitle {
+  font-size: 0.875rem;
+  opacity: 0.9;
+  margin: 0;
+  font-weight: 400;
+}
+
+/* Success Popup Header */
+.success-header {
+  background: linear-gradient(135deg, var(--success-color), #059669);
+}
+
+/* Transaction Summary */
+.transaction-summary {
+  padding: 1.5rem;
+  background: var(--background-color);
+  border-bottom: 1px solid var(--border-color);
+}
+
+.summary-item {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  padding: 1rem;
+  margin-bottom: 0.75rem;
+  background: var(--surface-color);
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
+}
+
+.summary-item:last-child {
+  margin-bottom: 0;
+}
+
+.summary-item:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
+  border-color: var(--primary-color);
+}
+
+.amount-highlight {
+  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);
+}
+
+.summary-icon {
+  width: 40px;
+  height: 40px;
+  border-radius: 10px;
+  background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+.summary-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.summary-label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+  margin-bottom: 0.25rem;
+}
+
+.summary-value {
+  display: block;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  font-weight: 600;
+  word-break: break-all;
+}
+
+.address-text {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.75rem !important;
+  background: rgba(59, 130, 246, 0.1);
+  padding: 0.375rem 0.5rem;
+  border-radius: 6px;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+/* Security Notice */
+.security-notice {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 1rem 1.5rem;
+  background: rgba(245, 158, 11, 0.1);
+  border-top: 3px solid var(--warning-color);
+  color: var(--text-primary);
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.security-notice i {
+  color: var(--warning-color);
+  font-size: 1.125rem;
+}
+
+/* Success Details */
+.success-details {
+  padding: 1.5rem;
+  background: var(--background-color);
+}
+
+.success-summary {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  margin-bottom: 1.5rem;
+}
+
+.success-item {
+  background: var(--surface-color);
+  padding: 1rem;
+  border-radius: 12px;
+  border: 1px solid var(--border-color);
+  text-align: center;
+}
+
+.success-label {
+  display: block;
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 600;
+  margin-bottom: 0.5rem;
+}
+
+.success-value {
+  display: block;
+  font-size: 1rem;
+  color: var(--success-color);
+  font-weight: 700;
+}
+
+/* Expandable Details */
+.expandable-details {
+  margin-top: 1rem;
+}
+
+.details-toggle {
+  width: 100%;
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
+  padding: 0.875rem 1rem;
+  border-radius: 8px;
+  color: var(--text-primary);
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.details-toggle:hover {
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+}
+
+.details-toggle i {
+  transition: transform 0.3s ease;
+}
+
+.details-content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.3s ease;
+}
+
+.details-content.expanded {
+  max-height: 500px;
+}
+
+.detail-grid {
+  padding: 1rem;
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
+  border-top: none;
+  border-radius: 0 0 8px 8px;
+}
+
+.detail-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.detail-item:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.detail-item .detail-label {
+  font-size: 0.75rem;
+  color: var(--text-secondary);
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 120px;
+}
+
+.detail-item .detail-label i {
+  color: var(--primary-color);
+  width: 16px;
+}
+
+.detail-item .detail-value {
+  color: var(--text-primary);
+  font-weight: 500;
+  text-align: right;
+  max-width: 250px;
+  word-break: break-all;
+  font-size: 0.875rem;
+}
+
+.success-status {
+  color: var(--success-color) !important;
+  font-weight: 700 !important;
+}
+
+.address-value {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.75rem !important;
+  background: rgba(59, 130, 246, 0.1);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  border: 1px solid rgba(59, 130, 246, 0.2);
+}
+
+.hash-value {
+  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+  font-size: 0.75rem !important;
+  background: rgba(16, 185, 129, 0.1);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  border: 1px solid rgba(16, 185, 129, 0.2);
+  cursor: pointer;
+}
+
+/* Modern Action Buttons */
+.modern-actions {
+  padding: 1.5rem;
+  background: var(--surface-color);
+  border-top: 1px solid var(--border-color);
+  display: flex;
+  gap: 1rem;
+}
+
+.modern-actions .btn {
+  flex: 1;
+  padding: 0.875rem 1.5rem;
+  border-radius: 10px;
+  font-weight: 600;
+  font-size: 0.875rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+  overflow: hidden;
+  min-height: 48px;
+}
+
+.btn-cancel {
+  background: var(--background-color);
+  color: var(--text-primary);
+  border: 2px solid var(--border-color);
+}
+
+.btn-cancel:hover {
+  background: var(--danger-color);
+  color: white;
+  border-color: var(--danger-color);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(239, 68, 68, 0.3);
+}
+
+.btn-confirm {
+  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);
+}
+
+.btn-confirm:hover {
+  background: linear-gradient(135deg, var(--primary-dark), #1d4ed8);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(59, 130, 246, 0.4);
+}
+
+.btn-done {
+  background: linear-gradient(135deg, var(--success-color), #059669);
+  color: white;
+  border: 2px solid var(--success-color);
+  box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3);
+}
+
+.btn-done:hover {
+  background: linear-gradient(135deg, #059669, #047857);
+  transform: translateY(-2px);
+  box-shadow: 0 8px 25px rgba(16, 185, 129, 0.4);
+}
+
+/* Loading State */
+.btn:disabled {
+  opacity: 0.7;
+  cursor: not-allowed;
+  transform: none !important;
+}
+
+.btn:disabled:hover {
+  transform: none !important;
+  box-shadow: none !important;
+}
+
+/* Legacy popup styles - keeping for compatibility */
 .popup-content {
   padding: 1.5rem;
   width: 100%;
@@ -2797,8 +3203,9 @@ sm-popup::part(popup) {
   color: #e2e8f0;
 }
 
-/* Responsive design for blockchain sections */
+/* ===== MOBILE RESPONSIVE STYLES ===== */
 @media (max-width: 768px) {
+  /* Blockchain Section Mobile Styles */
   .blockchain-section {
     padding: 0.75rem;
     margin: 0.5rem 0;
@@ -2819,7 +3226,154 @@ sm-popup::part(popup) {
     width: auto;
   }
 
-  /* Enhanced popup mobile styles - keep buttons side by side */
+  /* Modern Popup Mobile Styles */
+  .modern-popup-container {
+    max-width: 95%;
+    margin: 0.5rem auto;
+    border-radius: 12px;
+    max-height: 95vh;
+    overflow-y: auto;
+  }
+
+  .popup-header {
+    padding: 1rem 1rem 0.75rem;
+  }
+
+  .popup-icon {
+    width: 45px;
+    height: 45px;
+    font-size: 1.125rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .popup-title {
+    font-size: 1.125rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .popup-subtitle {
+    font-size: 0.75rem;
+  }
+
+  /* Transaction Summary Mobile */
+  .transaction-summary {
+    padding: 0.75rem;
+  }
+
+  .summary-item {
+    padding: 0.625rem;
+    gap: 0.625rem;
+    margin-bottom: 0.375rem;
+  }
+
+  .summary-icon {
+    width: 32px;
+    height: 32px;
+    font-size: 0.8rem;
+  }
+
+  .summary-label {
+    font-size: 0.65rem;
+  }
+
+  .summary-value {
+    font-size: 0.75rem;
+  }
+
+  .address-text {
+    font-size: 0.65rem !important;
+    padding: 0.2rem 0.3rem;
+  }
+
+  /* Security Notice Mobile */
+  .security-notice {
+    padding: 0.625rem 0.75rem;
+    font-size: 0.75rem;
+    gap: 0.375rem;
+  }
+
+  .security-notice i {
+    font-size: 0.875rem;
+  }
+
+  /* Success Details Mobile */
+  .success-details {
+    padding: 0.75rem;
+  }
+
+  .success-summary {
+    grid-template-columns: 1fr;
+    gap: 0.5rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .success-item {
+    padding: 0.625rem;
+  }
+
+  .success-label {
+    font-size: 0.65rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .success-value {
+    font-size: 0.8rem;
+  }
+
+  /* Expandable Details Mobile */
+  .details-toggle {
+    padding: 0.625rem;
+    font-size: 0.8rem;
+  }
+
+  .detail-grid {
+    padding: 0.625rem;
+  }
+
+  .detail-item {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+    padding: 0.375rem 0;
+  }
+
+  .detail-item .detail-label {
+    font-size: 0.65rem;
+    min-width: auto;
+  }
+
+  .detail-item .detail-value {
+    font-size: 0.7rem;
+    max-width: 100%;
+    text-align: left;
+  }
+
+  .address-value,
+  .hash-value {
+    font-size: 0.65rem !important;
+    padding: 0.2rem 0.3rem;
+    word-break: break-all;
+  }
+
+  /* Modern Actions Mobile - Keep buttons side by side */
+  .modern-actions {
+    padding: 0.75rem;
+    gap: 0.5rem;
+    flex-direction: row !important;
+  }
+
+  .modern-actions .btn {
+    padding: 0.625rem 0.75rem;
+    font-size: 0.75rem;
+    min-height: 40px;
+    flex: 1;
+  }
+
+  .modern-actions .btn i {
+    font-size: 0.8rem;
+  }
+
+  /* Legacy popup mobile compatibility */
   #sendConfirm .popup-actions,
   #transactionSuccess .popup-actions {
     flex-direction: row !important;
@@ -2840,6 +3394,479 @@ sm-popup::part(popup) {
   #sendConfirm .popup-actions .btn i {
     font-size: 0.75rem;
   }
+
+  /* Popup container responsive adjustments */
+  sm-popup {
+    --width: 95%;
+    --max-width: 95%;
+  }
+
+  sm-popup::part(popup-container) {
+    padding: 0.5rem !important;
+  }
+
+  sm-popup::part(popup) {
+    max-height: 95vh !important;
+    margin: 0 auto !important;
+    min-width: auto !important;
+    width: 100% !important;
+    border-radius: 12px !important;
+  }
+
+  /* Legacy popup content mobile */
+  .popup-content {
+    padding: 1rem;
+  }
+
+  .popup-content h3 {
+    font-size: 1rem;
+    margin-bottom: 0.75rem;
+    gap: 0.375rem;
+  }
+
+  .popup-content h3 i {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 1rem;
+  }
+
+  /* Ensure consistent spacing and layout */
+  .transaction-details {
+    margin: 0.75rem 0;
+    padding: 0.75rem;
+  }
+
+  .transaction-details .detail-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.25rem;
+    padding: 0.5rem 0;
+  }
+
+  .transaction-details .detail-value {
+    max-width: 100%;
+    margin-left: 0;
+    text-align: left;
+    font-size: 0.7rem;
+    padding: 0.25rem 0.375rem;
+  }
+
+  .transaction-details .detail-label {
+    font-size: 0.7rem;
+    min-width: auto;
+  }
+}
+
+/* Extra Small Mobile Screens (Samsung Galaxy S8+, iPhone SE, etc.) */
+@media (max-width: 480px) and (max-height: 740px) {
+  /* More compact popup for very small screens */
+  .modern-popup-container {
+    margin: 0.25rem auto;
+    max-height: 98vh;
+  }
+
+  .popup-header {
+    padding: 0.75rem 0.75rem 0.5rem;
+  }
+
+  .popup-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 1rem;
+    margin-bottom: 0.375rem;
+  }
+
+  .popup-title {
+    font-size: 1rem;
+    margin-bottom: 0.125rem;
+  }
+
+  .popup-subtitle {
+    font-size: 0.7rem;
+  }
+
+  .transaction-summary {
+    padding: 0.5rem;
+  }
+
+  .summary-item {
+    padding: 0.5rem;
+    gap: 0.5rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .summary-icon {
+    width: 28px;
+    height: 28px;
+    font-size: 0.75rem;
+  }
+
+  .summary-label {
+    font-size: 0.6rem;
+  }
+
+  .summary-value {
+    font-size: 0.7rem;
+  }
+
+  .address-text {
+    font-size: 0.6rem !important;
+    padding: 0.15rem 0.25rem;
+  }
+
+  .security-notice {
+    padding: 0.5rem;
+    font-size: 0.7rem;
+    gap: 0.25rem;
+  }
+
+  .security-notice i {
+    font-size: 0.8rem;
+  }
+
+  .modern-actions {
+    padding: 0.5rem;
+    gap: 0.375rem;
+  }
+
+  .modern-actions .btn {
+    padding: 0.5rem 0.625rem;
+    font-size: 0.7rem;
+    min-height: 36px;
+  }
+
+  .modern-actions .btn i {
+    font-size: 0.75rem;
+  }
+
+  .modern-actions .btn span {
+    display: none;
+  }
+
+  /* Show only icons on very small screens */
+  .modern-actions .btn {
+    justify-content: center;
+  }
+
+  /* Success popup adjustments */
+  .success-details {
+    padding: 0.5rem;
+  }
+
+  .success-summary {
+    gap: 0.375rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .success-item {
+    padding: 0.5rem;
+  }
+
+  .details-toggle {
+    padding: 0.5rem;
+    font-size: 0.75rem;
+  }
+
+  .detail-grid {
+    padding: 0.5rem;
+  }
+
+  /* Ensure popup fits in viewport */
+  sm-popup::part(popup) {
+    max-height: 98vh !important;
+  }
+
+  sm-popup::part(popup-container) {
+    padding: 0.25rem !important;
+  }
+}
+
+/* Large Screen Optimizations */
+@media (min-width: 1200px) {
+  /* Fix popup sizing for large screens */
+  sm-popup {
+    --max-width: 600px;
+  }
+
+  sm-popup::part(popup) {
+    max-width: 550px !important;
+    max-height: 85vh !important;
+    position: relative !important;
+    margin: 4vh auto !important;
+    transform: none !important;
+    left: auto !important;
+    right: auto !important;
+    top: auto !important;
+    bottom: auto !important;
+    display: block !important;
+  }
+
+  .modern-popup-container {
+    max-width: 550px;
+  }
+
+  .popup-header {
+    padding: 0.75rem 2rem 0.5rem;
+  }
+
+  .popup-icon {
+    width: 30px;
+    height: 30px;
+    font-size: 0.75rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .popup-title {
+    font-size: 0.9rem;
+    margin-bottom: 0.125rem;
+  }
+
+  .popup-subtitle {
+    font-size: 0.7rem;
+    margin-bottom: 0;
+  }
+
+  .transaction-summary,
+  .success-details {
+    padding: 1rem;
+  }
+
+  .summary-item {
+    padding: 0.5rem;
+    margin-bottom: 0.375rem;
+  }
+
+  .summary-label {
+    font-size: 0.65rem;
+  }
+
+  .summary-value {
+    font-size: 0.7rem;
+  }
+
+  .address-text {
+    font-size: 0.65rem;
+  }
+
+  .security-notice {
+    font-size: 0.65rem;
+    padding: 0.5rem 1rem;
+  }
+
+  .modern-actions {
+    padding: 0.875rem;
+  }
+
+  .modern-actions .btn {
+    font-size: 0.7rem;
+    padding: 0.5rem 0.75rem;
+    min-height: 36px;
+  }
+}
+
+/* Extra Large Screens (Wide Desktops and Ultra-wide monitors) */
+@media (min-width: 1400px) {
+  sm-popup {
+    --max-width: 700px;
+  }
+
+  sm-popup::part(popup) {
+    max-width: 650px !important;
+    max-height: 85vh !important;
+    margin: 5vh auto !important;
+  }
+
+  .modern-popup-container {
+    max-width: 650px;
+  }
+
+  .popup-header {
+    padding: 1rem 2.5rem 0.75rem;
+  }
+
+  .popup-icon {
+    width: 35px;
+    height: 35px;
+    font-size: 0.875rem;
+    margin-bottom: 0.375rem;
+  }
+
+  .popup-title {
+    font-size: 1rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .popup-subtitle {
+    font-size: 0.75rem;
+  }
+
+  .transaction-summary,
+  .success-details {
+    padding: 1.25rem;
+  }
+
+  .summary-item {
+    padding: 0.625rem;
+  }
+
+  .summary-label {
+    font-size: 0.7rem;
+  }
+
+  .summary-value {
+    font-size: 0.75rem;
+  }
+
+  .address-text {
+    font-size: 0.7rem;
+  }
+
+  .security-notice {
+    font-size: 0.7rem;
+  }
+
+  .modern-actions {
+    padding: 1rem;
+  }
+
+  .modern-actions .btn {
+    font-size: 0.75rem;
+    padding: 0.625rem 0.875rem;
+    min-height: 38px;
+  }
+}
+
+/* Ultra-Wide Screens (4K+ monitors) */
+@media (min-width: 1800px) {
+  sm-popup {
+    --max-width: 800px;
+  }
+
+  sm-popup::part(popup) {
+    max-width: 750px !important;
+    max-height: 85vh !important;
+    margin: 7vh auto !important;
+    position: relative !important;
+    transform: none !important;
+  }
+
+  .modern-popup-container {
+    max-width: 750px;
+    margin: 0 auto;
+  }
+
+  .popup-header {
+    padding: 1.25rem 3rem 1rem;
+  }
+
+  .popup-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 1rem;
+    margin-bottom: 0.375rem;
+  }
+
+  .popup-title {
+    font-size: 1.1rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .popup-subtitle {
+    font-size: 0.8rem;
+  }
+
+  .transaction-summary,
+  .success-details {
+    padding: 1.5rem;
+  }
+
+  .summary-item {
+    padding: 0.75rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .summary-label {
+    font-size: 0.75rem;
+  }
+
+  .summary-value {
+    font-size: 0.8rem;
+  }
+
+  .address-text {
+    font-size: 0.75rem;
+  }
+
+  .security-notice {
+    font-size: 0.75rem;
+  }
+
+  .modern-actions {
+    padding: 1.25rem;
+  }
+
+  .modern-actions .btn {
+    padding: 0.75rem 1.25rem;
+    font-size: 0.8rem;
+    min-height: 40px;
+  }
+}
+
+/* Tablet and Medium Desktop Screens */
+@media (min-width: 768px) and (max-width: 991px) {
+  sm-popup {
+    --max-width: 500px;
+  }
+
+  sm-popup::part(popup) {
+    max-width: 500px !important;
+    max-height: 80vh !important;
+    margin: 2vh auto !important;
+  }
+
+  .modern-popup-container {
+    max-width: 500px;
+    margin: 0 auto;
+  }
+
+  .popup-header {
+    padding: 1.5rem 1.5rem 1.25rem;
+  }
+
+  .popup-icon {
+    width: 50px;
+    height: 50px;
+    font-size: 1.25rem;
+  }
+
+  .popup-title {
+    font-size: 1.25rem;
+  }
+
+  .transaction-summary,
+  .success-details {
+    padding: 1.25rem;
+  }
+
+  .modern-actions {
+    padding: 1.25rem;
+  }
+}
+
+/* Medium Large Screens */
+@media (min-width: 992px) and (max-width: 1199px) {
+  sm-popup {
+    --max-width: 550px;
+  }
+
+  sm-popup::part(popup) {
+    max-width: 550px !important;
+    max-height: 85vh !important;
+  }
+
+  .modern-popup-container {
+    max-width: 550px;
+  }
 }
 
 /* Enhanced Confirm Transaction Popup Desktop Styles */
@@ -2879,3 +3906,130 @@ sm-popup::part(popup) {
   min-width: 150px;
   max-width: 200px;
 }
+
+/* Extra Small Mobile Screens (Samsung Galaxy S8+ and similar) */
+@media (max-width: 480px) and (max-height: 740px) {
+  /* Specific optimizations for Galaxy S8+ (360x740px) */
+  sm-popup::part(popup) {
+    max-height: 95vh !important;
+    max-width: 95vw !important;
+    margin: 1vh auto !important;
+    border-radius: 12px !important;
+  }
+
+  .modern-popup-container {
+    max-height: 95vh;
+    overflow-y: auto;
+    padding: 0;
+  }
+
+  .popup-header {
+    padding: 1rem 1rem 0.75rem;
+    text-align: center;
+  }
+
+  .popup-icon {
+    width: 40px;
+    height: 40px;
+    font-size: 1.1rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .popup-title {
+    font-size: 1.1rem;
+    margin-bottom: 0.25rem;
+  }
+
+  .popup-subtitle {
+    font-size: 0.8rem;
+    margin-bottom: 0;
+  }
+
+  .transaction-summary,
+  .success-details {
+    padding: 0.75rem 1rem;
+  }
+
+  .summary-item {
+    padding: 0.5rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .summary-icon {
+    width: 28px;
+    height: 28px;
+    font-size: 0.8rem;
+  }
+
+  .summary-label {
+    font-size: 0.7rem;
+  }
+
+  .summary-value {
+    font-size: 0.8rem;
+  }
+
+  .address-text {
+    font-size: 0.7rem;
+    word-break: break-all;
+  }
+
+  .security-notice {
+    padding: 0.5rem 1rem;
+    font-size: 0.7rem;
+  }
+
+  .popup-actions {
+    padding: 0.75rem 1rem 1rem;
+    gap: 0.75rem;
+  }
+
+  .popup-actions .btn {
+    padding: 0.75rem 1rem;
+    font-size: 0.8rem;
+    font-weight: 600;
+    min-height: 44px; /* Touch-friendly button height */
+  }
+
+  /* Success popup specific adjustments */
+  .success-details {
+    padding: 0.75rem 1rem;
+  }
+
+  .success-summary {
+    margin-bottom: 0.75rem;
+  }
+
+  .success-item {
+    font-size: 0.8rem;
+    margin-bottom: 0.5rem;
+  }
+
+  .expandable-details {
+    margin-top: 0.75rem;
+  }
+
+  .details-toggle {
+    padding: 0.5rem;
+    font-size: 0.8rem;
+  }
+
+  .details-content {
+    padding: 0.75rem 0;
+    font-size: 0.7rem;
+  }
+
+  /* Ensure content doesn't overflow */
+  .modern-popup-container * {
+    box-sizing: border-box;
+  }
+
+  /* Reduce spacing further if needed */
+  .summary-item:last-child {
+    margin-bottom: 0;
+  }
+
+  .success-item:last-child {
+    margin-bottom: 0;
+  }
+}
diff --git a/index.html b/index.html
index 1d79def..aecaf05 100644
--- a/index.html
+++ b/index.html
@@ -443,17 +443,74 @@
 
     <!-- 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>
+
+        <!-- Security Notice -->
+        <div class="security-notice">
+          <i class="fas fa-lock"></i>
+          <span>This transaction cannot be reversed once confirmed</span>
+        </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 +518,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 +660,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();
diff --git a/scripts/wallet.js b/scripts/wallet.js
index 27f59fb..a00758c 100644
--- a/scripts/wallet.js
+++ b/scripts/wallet.js
@@ -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,60 @@ 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-check-circle"></i>
+                Status
+              </span>
+              <span class="detail-value success-status">Confirmed</span>
+            </div>
+            <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-layer-group"></i>
+                Ledger Index
+              </span>
+              <span class="detail-value">${Ledger_Index}</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>
         `;
       }

From 5c425b66ce7730f843f80b309c6f083651237284 Mon Sep 17 00:00:00 2001
From: void-57 <ruddhaani60@gmail.com>
Date: Mon, 11 Aug 2025 15:30:10 +0530
Subject: [PATCH 3/3] Remove redundant security notice and transaction status
 details from confirmation popups

---
 index.html        |  6 ------
 scripts/wallet.js | 14 --------------
 2 files changed, 20 deletions(-)

diff --git a/index.html b/index.html
index aecaf05..774c23c 100644
--- a/index.html
+++ b/index.html
@@ -496,12 +496,6 @@
           </div>
         </div>
 
-        <!-- Security Notice -->
-        <div class="security-notice">
-          <i class="fas fa-lock"></i>
-          <span>This transaction cannot be reversed once confirmed</span>
-        </div>
-
         <!-- Action Buttons -->
         <div class="popup-actions modern-actions">
           <button onclick="closePopup()" class="btn btn-cancel">
diff --git a/scripts/wallet.js b/scripts/wallet.js
index a00758c..bbb5bcb 100644
--- a/scripts/wallet.js
+++ b/scripts/wallet.js
@@ -660,13 +660,6 @@ async function confirmSend() {
       if (expandableDetails) {
         expandableDetails.innerHTML = `
           <div class="detail-grid">
-            <div class="detail-item">
-              <span class="detail-label">
-                <i class="fas fa-check-circle"></i>
-                Status
-              </span>
-              <span class="detail-value success-status">Confirmed</span>
-            </div>
             <div class="detail-item">
               <span class="detail-label">
                 <i class="fas fa-user-minus"></i>
@@ -688,13 +681,6 @@ async function confirmSend() {
               </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-layer-group"></i>
-                Ledger Index
-              </span>
-              <span class="detail-value">${Ledger_Index}</span>
-            </div>
             <div class="detail-item">
               <span class="detail-label">
                 <i class="fas fa-clock"></i>