Refactor Tron Wallet UI: Merge Balance and Transaction History Pages, Enhance Transaction Search Functionality, and Update URL Management

- Merged balance checking and transaction history into a single Transactions page.
- Updated navigation links and icons for improved user experience.
- Added search type selection for balance and transaction details.
- Implemented URL management for sharing balance and transaction links.
- Enhanced transaction search
- Improved loading states and notifications for user actions.

css/style.css

@@ -1,9 +1,11 @@
 :root {
   --primary-color: #3b82f6;
   --primary-dark: #2563eb;
+  --primary-rgb: 59, 130, 246;
   --success-color: #10b981;
   --warning-color: #f59e0b;
   --danger-color: #ef4444;
+  --error-color: #ef4444;
   --background-color: #f8fafc;
   --surface-color: #ffffff;
   --text-primary: #1f2937;
@@ -17,6 +19,7 @@
   --border-radius: 0.75rem;
   --border-radius-sm: 0.5rem;
   --transition: all 0.3s ease;
+  --font-mono: "Monaco", "Menlo", "Ubuntu Mono", monospace;
 }
 
 /* Dark mode support - both media query and data attribute */
@@ -27,6 +30,7 @@
     --text-primary: #f1f5f9;
     --text-secondary: #94a3b8;
     --border-color: #334155;
+    --primary-rgb: 59, 130, 246;
   }
 }
 
@@ -37,6 +41,7 @@
   --text-primary: #f1f5f9;
   --text-secondary: #94a3b8;
   --border-color: #334155;
+  --primary-rgb: 59, 130, 246;
 }
 
 /* Explicit light theme via data attribute */
@@ -2011,7 +2016,7 @@ sm-popup::part(popup) {
   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>');
+  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;
 }
 
@@ -2603,7 +2608,7 @@ sm-popup::part(popup) {
   word-break: break-all;
   text-align: right;
   max-width: 250px;
-  font-family: "Monaco", "Menlo", "Ubuntu Mono", monospace;
+  font-family: var(--font-mono);
   background: linear-gradient(
     135deg,
     rgba(59, 130, 246, 0.1),
@@ -2618,6 +2623,22 @@ sm-popup::part(popup) {
   margin-left: 0.75rem;
 }
 
+.transaction-details .detail-value.success {
+  color: var(--success-color);
+  font-weight: 600;
+}
+
+.transaction-details .detail-value.failed {
+  color: var(--error-color);
+  font-weight: 600;
+}
+
+.transaction-details .detail-value.amount {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--primary-color);
+}
+
 /* Balance Info Styling */
 .balance-info {
   margin-top: 1rem;
@@ -2667,6 +2688,10 @@ sm-popup::part(popup) {
   text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
 }
 
+.balance-amount .amount-number {
+  display: inline;
+}
+
 .account-details {
   border-top: 1px solid var(--border-color);
   padding-top: 1rem;
@@ -2749,7 +2774,10 @@ sm-popup::part(popup) {
   }
 
   .balance-amount {
-    font-size: 1.3rem;
+    font-size: 1.1rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 }
 
@@ -3969,7 +3997,6 @@ sm-popup::part(popup) {
   .summary-value {
     font-size: 0.8rem;
   }
-
   .address-text {
     font-size: 0.75rem;
   }
@@ -4376,29 +4403,8 @@ sm-popup::part(popup) {
   color: var(--primary-color);
 }
 
-/* ===== MOBILE RESPONSIVE FOR NEW ELEMENTS ===== */
+
 @media (max-width: 768px) {
-  .search-type-tabs {
-    flex-direction: column;
-    gap: 0.25rem;
-  }
-
-  .tab-btn {
-    justify-content: flex-start;
-    padding: 0.625rem 1rem;
-  }
-
-  .balance-header,
-  .transaction-details-header {
-    flex-direction: column;
-    align-items: flex-start;
-    gap: 1rem;
-  }
-
-  .share-btn {
-    align-self: flex-end;
-  }
-
   .tx-detail-row {
     flex-direction: column;
     align-items: flex-start;
@@ -4571,6 +4577,177 @@ sm-popup::part(popup) {
   font-style: italic;
 }
 
+/* Search Type Section */
+.search-type-section {
+  margin-bottom: 1.5rem;
+}
+
+.search-type-label {
+  display: block;
+  font-weight: 600;
+  color: var(--text-color);
+  margin-bottom: 0.75rem;
+  font-size: 0.9rem;
+}
+
+.search-type-buttons {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.search-type-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border: 1px solid var(--border-color);
+  background: var(--surface-color);
+  color: var(--text-secondary);
+  border-radius: var(--border-radius-sm);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+.search-type-btn:hover {
+  background: var(--background-color);
+  color: var(--text-primary);
+}
+
+.search-type-btn.active {
+  background: var(--primary-color);
+  color: white;
+  border-color: var(--primary-color);
+}
+
+.search-type-btn i {
+  font-size: 0.875rem;
+}
+
+/* Transaction Details Card */
+.transaction-details {
+  background: var(--background-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius-sm);
+  padding: 1rem;
+  margin: 1rem 0;
+  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
+  position: relative;
+}
+
+.transaction-details::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  height: 3px;
+  background: linear-gradient(
+    90deg,
+    var(--primary-color),
+    var(--success-color)
+  );
+  border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;
+}
+
+.transaction-details .detail-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border-color);
+  transition: all 0.2s ease;
+  border-radius: var(--border-radius-sm);
+}
+
+.transaction-details .detail-row:last-child {
+  border-bottom: none;
+  padding-bottom: 0;
+}
+
+.transaction-details .detail-row:hover {
+  background-color: rgba(59, 130, 246, 0.05);
+  margin: 0 -0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.transaction-details .detail-label {
+  font-weight: 600;
+  color: var(--text-secondary);
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  min-width: 80px;
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.transaction-details-header {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.transaction-details-header .share-btn {
+  position: absolute;
+  right: 0;
+}
+
+.transaction-details-header h3 {
+  margin: 0;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--text-primary);
+}
+
+
+@media (max-width: 768px) {
+  .transaction-details-header {
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+  }
+
+  .transaction-details-header h3 {
+    margin: 0;
+    font-size: 1rem;
+  }
+
+  .transaction-details-header .share-btn {
+    position: static;
+    flex-shrink: 0;
+  }
+
+  .transaction-details .detail-row {
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 0;
+  }
+
+  .transaction-details .detail-value {
+    text-align: right;
+    margin-left: 0.75rem;
+    max-width: 180px;
+    font-size: 0.7rem;
+  }
+
+  .transaction-details .detail-label {
+    min-width: 70px;
+    font-size: 0.7rem;
+  }
+}
+
 .success-header {
   display: flex;
   align-items: center;
@@ -4744,3 +4921,117 @@ sm-popup::part(popup) {
   background: var(--text-secondary);
   color: var(--bg-primary);
 }
+
+/* ===== TRANSACTION DETAILS CONTENT ===== */
+.transaction-details-content {
+  display: grid;
+  gap: 1rem;
+}
+
+.tx-detail-card {
+  background: var(--surface-color);
+  border: 1px solid var(--border-color);
+  border-radius: var(--border-radius);
+  padding: 1rem;
+  transition: all 0.2s ease;
+}
+
+.tx-detail-card:hover {
+  border-color: var(--primary-color);
+  box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.1);
+}
+
+.tx-detail-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 0.5rem 0;
+  border-bottom: 1px solid var(--border-color);
+}
+
+.tx-detail-row:last-child {
+  border-bottom: none;
+}
+
+.tx-detail-label {
+  font-weight: 600;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  min-width: 120px;
+}
+
+.tx-detail-value {
+  color: var(--text-primary);
+  font-family: var(--font-mono);
+  word-break: break-all;
+  text-align: right;
+  flex: 1;
+  margin-left: 1rem;
+}
+
+.tx-detail-value.success {
+  color: var(--success-color);
+  font-weight: 600;
+}
+
+.tx-detail-value.failed {
+  color: var(--error-color);
+  font-weight: 600;
+}
+
+.tx-detail-value.amount {
+  font-size: 1.125rem;
+  font-weight: 700;
+  color: var(--primary-color);
+}
+
+/* ===== MOBILE RESPONSIVE FOR NEW ELEMENTS ===== */
+@media (max-width: 768px) {
+  .tx-detail-row {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.5rem;
+  }
+
+  .tx-detail-value {
+    text-align: left;
+    margin-left: 0;
+  }
+
+  .tx-detail-label {
+    min-width: auto;
+  }
+}
+
+
+@media (max-width: 600px) {
+  .balance-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    gap: 0.5rem;
+    margin-bottom: 1.5rem;
+    width: 100%;
+  }
+  .balance-header h3 {
+    margin: 0;
+    text-align: left;
+    font-size: 1.1rem;
+    flex: 1 1 auto;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+  .balance-header .share-btn {
+    margin-left: 0.5rem;
+    align-self: center;
+    flex-shrink: 0;
+  }
+}
+
+.detail-link{
+  text-decoration: none; color:white; cursor: pointer;
+}

index.html

@@ -4,6 +4,7 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Tron Wallet</title>
+    <link rel="shortcut icon" href="favicon.svg" type="image/x-icon" />
     <link
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.0/css/all.min.css"
@@ -54,8 +55,8 @@
             >
           </li>
           <li>
-            <a href="#" onclick="showPage('historyPage')" class="nav-link"
-              ><i class="fas fa-clock-rotate-left"></i>History</a
+            <a href="#" onclick="showPage('transactionsPage')" class="nav-link"
+              ><i class="fas fa-arrows-rotate"></i>Transactions</a
             >
           </li>
           <li>
@@ -63,11 +64,6 @@
               ><i class="fas fa-key"></i>Recover</a
             >
           </li>
-          <li>
-            <a href="#" onclick="showPage('balancePage')" class="nav-link"
-              ><i class="fas fa-coins"></i>Balance</a
-            >
-          </li>
         </ul>
       </nav>
       <main class="main-content">
@@ -218,39 +214,138 @@
             <div id="sendOutput"></div>
           </div>
         </div>
-        <!-- History Page -->
-        <div id="historyPage" class="page hidden">
+        <!-- Transactions Page (Merged Balance + History + TX Search) -->
+        <div id="transactionsPage" class="page hidden">
           <div class="page-header">
-            <h2>
-              <i class="fas fa-clock-rotate-left"></i> Transaction History
-            </h2>
+            <h2><i class="fas fa-arrows-rotate"></i> Transactions</h2>
+            <p>Check balance, browse history, and search by transaction hash</p>
           </div>
+
+          <!-- Balance Card -->
           <div class="card">
+            <div class="search-type-section">
+              <label class="search-type-label">Search Type:</label>
+              <div class="search-type-buttons">
+                <button
+                  class="search-type-btn active"
+                  data-type="balance"
+                  onclick="setSearchType('balance')"
+                >
+                  <i class="fas fa-wallet"></i> Balance & History
+                </button>
+                <button
+                  class="search-type-btn"
+                  data-type="transaction"
+                  onclick="setSearchType('transaction')"
+                >
+                  <i class="fas fa-file-alt"></i> Transaction Details
+                </button>
+              </div>
+            </div>
+
             <div class="form-group">
-              <label>Tron Address:</label>
+              <label
+                ><i class="fas fa-map-marker-alt"></i> Tron Address / Private
+                Key (FLO/BTC):</label
+              >
               <div class="input-with-actions">
                 <input
-                  id="historyAddr"
+                  id="balanceAddr"
                   class="form-input"
-                  placeholder="Enter Tron address"
+                  placeholder="Enter Tron address / Private Key"
                 />
                 <button
                   type="button"
                   class="input-action-btn clear-btn"
-                  onclick="clearInput('historyAddr')"
+                  onclick="clearInput('balanceAddr')"
                   title="Clear"
                 >
                   <i class="fas fa-times"></i>
                 </button>
               </div>
+              <small class="form-help"
+                >Enter an address, private key (BTC/FLO), or Tron hex to check
+                balance.</small
+              >
             </div>
-            <button class="btn btn-primary btn-block" id="loadHistory">
-              <span class="btn-text">Load History</span>
+
+            <button
+              class="btn btn-primary btn-block"
+              onclick="runBalanceCheck()"
+              id="balanceBtn"
+            >
+              <span class="btn-text"
+                ><i class="fas fa-search"></i> Check Balance</span
+              >
               <span class="btn-loading" style="display: none">
                 <i class="fas fa-spinner fa-spin"></i> Loading...
               </span>
             </button>
+            <div id="balanceOutput"></div>
           </div>
+
+          <!-- TX Search Card -->
+          <div class="card">
+            <div class="search-type-section">
+              <label class="search-type-label">Search Type:</label>
+              <div class="search-type-buttons">
+                <button
+                  class="search-type-btn"
+                  data-type="balance"
+                  onclick="setSearchType('balance')"
+                >
+                  <i class="fas fa-wallet"></i> Balance & History
+                </button>
+                <button
+                  class="search-type-btn active"
+                  data-type="transaction"
+                  onclick="setSearchType('transaction')"
+                >
+                  <i class="fas fa-file-alt"></i> Transaction Details
+                </button>
+              </div>
+            </div>
+
+            <div class="form-group">
+              <label
+                ><i class="fas fa-file-alt"></i> Transaction Hash (TX
+                ID):</label
+              >
+              <div class="input-with-actions">
+                <input
+                  id="txHash"
+                  class="form-input"
+                  placeholder="Enter transaction hash (TX ID)"
+                />
+                <button
+                  type="button"
+                  class="input-action-btn clear-btn"
+                  onclick="clearInput('txHash')"
+                  title="Clear"
+                >
+                  <i class="fas fa-times"></i>
+                </button>
+              </div>
+              <small class="form-help"
+                >Enter a transaction hash to view transaction details.</small
+              >
+            </div>
+
+            <button
+              class="btn btn-primary btn-block"
+              onclick="runTxSearch()"
+              id="txSearchBtn"
+            >
+              <span class="btn-text"
+                ><i class="fas fa-search"></i> View Transaction</span
+              >
+              <span class="btn-loading" style="display: none">
+                <i class="fas fa-spinner fa-spin"></i> Searching...
+              </span>
+            </button>
+            <div id="txOutput"></div>
+          </div>
+
           <div
             id="transactionSection"
             class="card transaction-section"
@@ -380,43 +475,6 @@
             <div id="recoveryOutput"></div>
           </div>
         </div>
-        <!-- Balance Page -->
-        <div id="balancePage" class="page hidden">
-          <div class="page-header">
-            <h2><i class="fas fa-coins"></i> Check TRX Balance</h2>
-          </div>
-          <div class="card">
-            <div class="form-group">
-              <label>Tron Address / Private Key (FLO/BTC):</label>
-              <div class="input-with-actions">
-                <input
-                  id="balanceAddr"
-                  class="form-input"
-                  placeholder="Enter Tron address / Private Key"
-                />
-                <button
-                  type="button"
-                  class="input-action-btn clear-btn"
-                  onclick="clearInput('balanceAddr')"
-                  title="Clear"
-                >
-                  <i class="fas fa-times"></i>
-                </button>
-              </div>
-            </div>
-            <button
-              class="btn btn-primary btn-block"
-              onclick="runBalanceCheck()"
-              id="balanceBtn"
-            >
-              <span class="btn-text">Check Balance</span>
-              <span class="btn-loading" style="display: none">
-                <i class="fas fa-spinner fa-spin"></i> Loading...
-              </span>
-            </button>
-            <div id="balanceOutput"></div>
-          </div>
-        </div>
       </main>
     </div>
     <!-- Confirmation Popup for Send TRX -->
@@ -537,11 +595,11 @@
         <i class="fas fa-paper-plane"></i><span>Send</span>
       </button>
       <button
-        onclick="showPage('historyPage')"
+        onclick="showPage('transactionsPage')"
         class="nav-btn"
-        data-page="historyPage"
+        data-page="transactionsPage"
       >
-        <i class="fas fa-clock-rotate-left"></i><span>History</span>
+        <i class="fas fa-arrows-rotate"></i><span>Transactions</span>
       </button>
       <button
         onclick="showPage('recoverPage')"
@@ -550,13 +608,6 @@
       >
         <i class="fas fa-key"></i><span>Recover</span>
       </button>
-      <button
-        onclick="showPage('balancePage')"
-        class="nav-btn"
-        data-page="balancePage"
-      >
-        <i class="fas fa-coins"></i><span>Balance</span>
-      </button>
     </div>
     <!-- Scripts -->
     <script src="https://cdn.jsdelivr.net/npm/tronweb@5.3.2/dist/TronWeb.js"></script>
@@ -982,6 +1033,11 @@
             const balanceOutput = document.getElementById("balanceOutput");
             if (balanceOutput) balanceOutput.innerHTML = "";
             break;
+          case "txHash":
+            // Clear tx search output
+            const txOutput = document.getElementById("txOutput");
+            if (txOutput) txOutput.innerHTML = "";
+            break;
         }
 
         // Show notification
@@ -990,39 +1046,102 @@
         }
       }
 
-      // History
-      document.getElementById("loadHistory").addEventListener("click", () => {
-        const address = document.getElementById("historyAddr").value.trim();
-        if (!address) return alert("Please enter a Tron address");
+      // Search type management
+      let __currentSearchType = "balance";
+      function setSearchType(type) {
+        __currentSearchType = type;
 
-        setButtonLoading("loadHistory", true);
+        document.querySelectorAll(".search-type-btn").forEach((btn) => {
+          btn.classList.remove("active");
+        });
+        document.querySelectorAll(`[data-type="${type}"]`).forEach((btn) => {
+          btn.classList.add("active");
+        });
 
+        // Show/hide cards based on search type
+        const balanceCard = document
+          .querySelector("#balanceOutput")
+          .closest(".card");
+        const txCard = document.querySelector("#txOutput").closest(".card");
+
+        if (type === "balance") {
+          if (balanceCard) balanceCard.style.display = "block";
+          if (txCard) txCard.style.display = "none";
+          updateURLForPage(
+            "balance",
+            document.getElementById("balanceAddr").value.trim()
+          );
+        } else {
+          if (balanceCard) balanceCard.style.display = "none";
+          if (txCard) txCard.style.display = "block";
+          updateURLForPage(
+            "transaction",
+            document.getElementById("txHash").value.trim()
+          );
+          const historyOutput = document.getElementById("historyOutput");
+          if (historyOutput) historyOutput.innerHTML = "";
+          const transactionSection =
+            document.getElementById("transactionSection");
+          if (transactionSection) transactionSection.style.display = "none";
+        }
+      }
+
+      // History (auto-load after balance)
+      let __historyAddress = "";
+      function loadHistoryFor(address) {
+        __historyAddress = address;
         const perPageSelect = document.getElementById("perPageSelect");
         const limit = perPageSelect ? parseInt(perPageSelect.value, 10) : 10;
         const url = `https://api.shasta.trongrid.io/v1/accounts/${address}/transactions?limit=${limit}`;
         const section = document.getElementById("transactionSection");
         if (section) section.style.display = "block";
         resetHistoryState(limit);
-
-        transactionHistory(url, address).finally(() => {
-          setButtonLoading("loadHistory", false);
-        });
-      });
-      // Pagination buttons handled in transactionHistory.js
+        transactionHistory(url, address);
+      }
 
       // Init theme on load
       document.addEventListener("DOMContentLoaded", initializeTheme);
+
+      document.addEventListener("DOMContentLoaded", () => {
+        const txCard = document.querySelector("#txOutput").closest(".card");
+        if (txCard) txCard.style.display = "none";
+      });
+      
+      document.addEventListener("DOMContentLoaded", () => {
+        const params = new URLSearchParams(window.location.search);
+        const page = params.get("page");
+        if (page === "transactions") {
+          showPage("transactionsPage");
+          const address = params.get("address");
+          const tx = params.get("tx");
+          if (tx) {
+            setSearchType("transaction");
+            const txInput = document.getElementById("txHash");
+            if (txInput) {
+              txInput.value = tx;
+              runTxSearch();
+            }
+          } else if (address) {
+            setSearchType("balance");
+            const input = document.getElementById("balanceAddr");
+            if (input) {
+              input.value = address;
+              runBalanceCheck();
+            }
+          }
+        }
+      });
       const perSel = document.getElementById("perPageSelect");
       if (perSel) {
         perSel.addEventListener("change", () => {
-          const address = document.getElementById("historyAddr").value.trim();
-          if (!address) return;
+          if (!__historyAddress) return;
           const limit = parseInt(perSel.value, 10) || 10;
-          const url = `https://api.shasta.trongrid.io/v1/accounts/${address}/transactions?limit=${limit}`;
+          const url = `https://api.shasta.trongrid.io/v1/accounts/${__historyAddress}/transactions?limit=${limit}`;
           resetHistoryState(limit);
-          transactionHistory(url, address);
+          transactionHistory(url, __historyAddress);
         });
       }
+      
     </script>
     <div id="notification_drawer" class="notification-drawer"></div>
   </body>

scripts/balance.js

@@ -1,7 +1,96 @@
+function updateURLForPage(page, value) {
+  let params = new URLSearchParams();
+  if (page === "transaction") {
+    params.set("page", "transactions");
+    params.set("tx", value);
+  } else if (page === "balance" || page === "history") {
+    params.set("page", "transactions");
+    params.set("address", value);
+  }
+  window.history.replaceState(
+    {},
+    "",
+    `${location.pathname}?${params.toString()}`
+  );
+}
+
+function shareBalanceLink(address) {
+  const addr =
+    address || (document.getElementById("balanceAddr").value || "").trim();
+  if (!addr) return;
+  const url = new URL(window.location.href);
+  url.searchParams.set("page", "transactions");
+  url.searchParams.set("address", addr);
+  navigator.clipboard.writeText(url.toString()).then(() => {
+    if (typeof notify === "function")
+      notify("Shareable balance link copied", "success");
+  });
+}
+function shareTxLink(txid) {
+  const id = txid || (document.getElementById("txHash").value || "").trim();
+  if (!id) return;
+  const url = new URL(window.location.href);
+  url.searchParams.set("page", "transactions");
+  url.searchParams.set("tx", id);
+  navigator.clipboard.writeText(url.toString()).then(() => {
+    if (typeof notify === "function")
+      notify("Shareable tx link copied", "success");
+  });
+}
+async function getTransactionDetails(txHash) {
+  const url = "https://api.shasta.trongrid.io/wallet/gettransactionbyid";
+  const headers = {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  };
+  const body = JSON.stringify({
+    value: txHash,
+    visible: true,
+  });
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers,
+    body,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Error ${response.status}: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+  console.log("Transaction details:", data);
+  return data;
+}
+
+async function getTransactionInfoById(txHash) {
+  const url = "https://api.shasta.trongrid.io/wallet/gettransactioninfobyid";
+  const headers = {
+    Accept: "application/json",
+    "Content-Type": "application/json",
+  };
+  const body = JSON.stringify({
+    value: txHash,
+  });
+
+  const response = await fetch(url, {
+    method: "POST",
+    headers,
+    body,
+  });
+
+  if (!response.ok) {
+    throw new Error(`Error ${response.status}: ${response.statusText}`);
+  }
+
+  const data = await response.json();
+  console.log("Transaction info:", data);
+  return data;
+}
 async function getBalanceByAddress(address) {
   try {
     const balance = await tronWeb.trx.getBalance(address);
-    return balance / 1e6; 
+    return balance / 1e6;
   } catch (err) {
     throw new Error("Failed to fetch balance: " + err.message);
   }
@@ -18,6 +107,7 @@ async function getBalanceByPrivKey(privKey) {
         throw new Error("Invalid WIF private key");
       }
       rawHexKey = decoded.privkey;
+      console.log("Detected WIF private key:", rawHexKey);
 
       // Detect 64-char raw hex private key
     } else if (/^[0-9a-fA-F]{64}$/.test(privKey)) {
@@ -36,10 +126,9 @@ async function getBalanceByPrivKey(privKey) {
   }
 }
 
-
 async function runBalanceCheck() {
   const inputVal = document.getElementById("balanceAddr").value.trim();
-  const out = document.getElementById("balanceOutput");
+  const output = document.getElementById("balanceOutput");
 
   // Set loading state
   if (typeof setButtonLoading === "function") {
@@ -49,54 +138,220 @@ async function runBalanceCheck() {
   try {
     if (inputVal.startsWith("T")) {
       // Direct Tron address
+      const tronAddress = inputVal;
       const balance = await getBalanceByAddress(inputVal);
-      out.innerHTML = `
-        <div class="card balance-info">
-          <div class="balance-header">
-            <h3><i class="fas fa-coins"></i> Account Balance</h3>
-          </div>
-          <div class="balance-display"><span class="balance-amount">${balance} TRX</span></div>
-          <div class="account-details">
-            <div class="detail-row">
-              <label>Address:</label>
-              <div class="address-container">
-                <span class="address-text">${inputVal}</span>
-                <button class="btn-icon" onclick="navigator.clipboard.writeText('${inputVal}').then(()=>notify && notify('Copied','success'))" title="Copy"><i class="fas fa-copy"></i></button>
+      output.innerHTML = `
+            <div class="card balance-info">
+              <div class="balance-header">
+                <h3><i class="fas fa-wallet"></i> Account Balance</h3>
+                <button class="btn-icon share-btn" onclick="shareBalanceLink('${tronAddress}')" title="Copy shareable balance link">
+                  <i class="fas fa-share-alt"></i>
+                </button>
+              </div>
+              <div class="balance-display">
+                <div class="balance-amount">
+                  <span class="amount-number">${balance.toLocaleString()} TRX</span>
+              </div>
+              </div>
+              <div class="account-details">
+                <div class="detail-row">
+                  <label><i class="fas fa-map-marker-alt"></i> Address</label>
+                  <div class="value-container">
+                    <code>${tronAddress}</code>
+                    <button class="btn-icon" onclick="navigator.clipboard.writeText('${tronAddress}').then(()=>notify && notify('Address copied','success'))" title="Copy Address">
+                      <i class="fas fa-copy"></i>
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
-      `;
+          `;
       if (typeof notify === "function") notify("Balance loaded", "success");
+      loadHistoryFor(tronAddress);
+
+      updateURLForPage("balance", tronAddress);
     } else {
       // Treat as private key (WIF or HEX)
       const { tronAddress, balance } = await getBalanceByPrivKey(inputVal);
-      out.innerHTML = `
+      output.innerHTML = `
         <div class="card balance-info">
-          <div class="balance-header">
-            <h3><i class="fas fa-coins"></i> Account Balance</h3>
-          </div>
-          <div class="balance-display"><span class="balance-amount">${balance} TRX</span></div>
-          <div class="account-details">
-            <div class="detail-row">
-              <label>Derived Address:</label>
-              <div class="address-container">
-                <span class="address-text">${tronAddress}</span>
-                <button class="btn-icon" onclick="navigator.clipboard.writeText('${tronAddress}').then(()=>notify && notify('Copied','success'))" title="Copy"><i class="fas fa-copy"></i></button>
+              <div class="balance-header">
+                <h3><i class="fas fa-wallet"></i> Account Balance</h3>
+                <button class="btn-icon share-btn" onclick="shareBalanceLink('${tronAddress}')" title="Copy shareable balance link">
+                  <i class="fas fa-share-alt"></i>
+                </button>
+              </div>
+              <div class="balance-display">
+                <div class="balance-amount">
+                  <span class="amount-number">${balance.toLocaleString()} TRX</span>
+              </div>
+              </div>
+              <div class="account-details">
+                <div class="detail-row">
+                  <label><i class="fas fa-map-marker-alt"></i> Address</label>
+                  <div class="value-container">
+                    <code>${tronAddress}</code>
+                    <button class="btn-icon" onclick="navigator.clipboard.writeText('${tronAddress}').then(()=>notify && notify('Address copied','success'))" title="Copy Address">
+                      <i class="fas fa-copy"></i>
+                    </button>
+                  </div>
+                </div>
               </div>
             </div>
-          </div>
-        </div>
       `;
       if (typeof notify === "function") notify("Balance loaded", "success");
+      loadHistoryFor(tronAddress);
+
+      updateURLForPage("balance", tronAddress);
     }
   } catch (err) {
-    out.innerHTML = `<div class="error-state"><i class="fas fa-triangle-exclamation"></i>${err.message}</div>`;
+    output.innerHTML = `<div class="error-state"><div class="error-icon"><i class=\"fas fa-exclamation-triangle\"></i></div><h3>Failed</h3><p>${err.message}</p></div>`;
     if (typeof notify === "function") notify(err.message, "error");
   } finally {
-    // Clear loading state
-    if (typeof setButtonLoading === "function") {
-      setButtonLoading("balanceBtn", false);
-    }
+    setButtonLoading("balanceBtn", false);
   }
 }
+
+async function runTxSearch() {
+ 
+  const input = document.getElementById("txHash");
+  const output = document.getElementById("txOutput");
+  const txid = (input.value || "").trim();
+  if (!txid) {
+    alert("Please enter a transaction hash");
+    return;
+  }
+
+  // Validation for Tron transaction hash
+  if (!/^[a-fA-F0-9]{64}$/.test(txid)) {
+    if (typeof notify === "function") {
+      notify("Invalid transaction hash format.", "error");
+    } else {
+      alert("Invalid transaction hash format.");
+    }
+    return;
+  }
+
+  setButtonLoading("txSearchBtn", true);
+  try {
+    if (typeof notify === "function")
+      notify("Searching transaction...", "success", 1200);
+
+    const [tx, txInfo] = await Promise.all([
+      getTransactionDetails(txid),
+      getTransactionInfoById(txid),
+    ]);
+
+    // Extract transaction details from the response
+    const id = tx.txID || txid;
+    const ret = (tx.ret && tx.ret[0] && tx.ret[0].contractRet) || "SUCCESS";
+    const contract =
+      (tx.raw_data && tx.raw_data.contract && tx.raw_data.contract[0]) || {};
+    const type = contract.type || "TransferContract";
+    const parameter = contract.parameter && contract.parameter.value;
+    const to = (parameter && parameter.to_address) || "-";
+    const owner = (parameter && parameter.owner_address) || "-";
+    const amount =
+      parameter && parameter.amount ? parameter.amount / 1000000 : "-";
+    const timestamp =
+      tx.raw_data && tx.raw_data.timestamp
+        ? new Date(tx.raw_data.timestamp).toLocaleString()
+        : "-";
+    const fee = txInfo.fee ? txInfo.fee / 1000000 : "-";
+    const blockNumber = txInfo.blockNumber || "-";
+
+    output.innerHTML = `
+            <div class="card transaction-details">
+              <div class="transaction-details-header">
+                <h3><i class="fas fa-receipt"></i> Transaction Details</h3>
+                <button
+                  onclick="shareTxLink('${id}')"
+                  class="btn-icon share-btn"
+                  title="Copy Shareable Link"
+                >
+                  <i class="fas fa-share-alt"></i>
+                </button>
+              </div>
+              <div class="transaction-details-content">
+                <div class="tx-detail-card">
+                  <div class="tx-detail-row">
+                    <span class="tx-detail-label">
+                      <i class="fas fa-check-circle"></i>
+                      Status:
+                    </span>
+                    <span class="tx-detail-value success">${ret}</span>
+                  </div>
+                  <div class="tx-detail-row">
+                    <span class="tx-detail-label">
+                      <i class="fas fa-exchange-alt"></i>
+                      Type:
+                    </span>
+                    <span class="tx-detail-value">${type}</span>
+                  </div>
+                  <div class="tx-detail-row">
+                    <span class="tx-detail-label">
+                      <i class="fas fa-coins"></i>
+                      Amount:
+                    </span>
+                    <span class="tx-detail-value amount">${amount} TRX</span>
+                  </div>
+                  <div class="tx-detail-row">
+                    <span class="tx-detail-label">
+                      <i class="fas fa-receipt"></i>
+                      Fee:
+                    </span>
+                    <span class="tx-detail-value">${fee} TRX</span>
+                  </div>
+                </div>
+                <div class="tx-detail-card">
+                  <div class="tx-detail-row">
+                    <span class="tx-detail-label">
+                      <i class="fas fa-user-minus"></i>
+                      From:
+                    </span>
+                    <span class="tx-detail-value">${owner}</span>
+                  </div>
+                  <div class="tx-detail-row">
+                    <span class="tx-detail-label">
+                      <i class="fas fa-user-plus"></i>
+                      To:
+                    </span>
+                    <span class="tx-detail-value">${to}</span>
+                  </div>
+                  <div class="tx-detail-row">
+                    <span class="tx-detail-label">
+                      <i class="fas fa-hashtag"></i>
+                      Hash:
+                    </span>
+                    <span class="tx-detail-value">${id}</span>
+                  </div>
+                </div>
+                <div class="tx-detail-card">
+                  <div class="tx-detail-row">
+                    <span class="tx-detail-label">
+                      <i class="fas fa-layer-group"></i>
+                      Block:
+                    </span>
+                    <span class="tx-detail-value">${blockNumber}</span>
+                  </div>
+                  <div class="tx-detail-row">
+                    <span class="tx-detail-label">
+                      <i class="fas fa-clock"></i>
+                      Date:
+                    </span>
+                    <span class="tx-detail-value">${timestamp}</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          `;
+
+    if (typeof notify === "function") notify("Transaction found", "success");
+  } catch (err) {
+    output.innerHTML = `<div class="error-state"><div class="error-icon"><i class="fas fa-exclamation-triangle"></i></div><h3>Failed</h3><p>${err.message}</p></div>`;
+    if (typeof notify === "function") notify(err.message, "error");
+  } finally {
+    setButtonLoading("txSearchBtn", false);
+  }
+  updateURLForPage("transaction", txid);
+}

scripts/sendTRX.js

@@ -45,7 +45,6 @@ async function sendTrx() {
     // Broadcast transaction
     const receipt = await tronWeb.trx.sendRawTransaction(signedtxn);
 
-    
     const status = receipt.result ? "✅ Success" : "❌ Failed";
     const statusColor = receipt.result ? "green" : "red";
     const txid = receipt.txid ? truncate(receipt.txid) : "N/A";
@@ -61,23 +60,7 @@ async function sendTrx() {
         </div>
       </div>
 
-      <div class="blockchain-section">
-        <div class="blockchain-header">
-          <h4><i class="fas fa-key"></i> Private Key Used</h4>
-          <div class="blockchain-badge primary">${source}</div>
-        </div>
-        <div class="detail-row">
-          <label><i class="fas fa-key"></i> Private Key</label>
-          <div class="value-container">
-            <code>${document.getElementById("privKey").value.trim()}</code>
-            <button class="btn-icon" onclick="navigator.clipboard.writeText('${document
-              .getElementById("privKey")
-              .value.trim()}').then(()=>notify && notify('Private key copied','success'))" title="Copy Private Key">
-              <i class="fas fa-copy"></i>
-            </button>
-          </div>
-        </div>
-      </div>
+     
 
       <div class="blockchain-section">
         <div class="blockchain-header">
@@ -87,7 +70,15 @@ async function sendTrx() {
         <div class="detail-row">
           <label><i class="fas fa-map-marker-alt"></i> From Address</label>
           <div class="value-container">
-            <code>${fromAddress}</code>
+            <code>
+          <a
+    class="detail-link"
+    href="index.html?page=transactions&address=${fromAddress}"
+    target="_blank"
+    rel="noopener"
+    title="View address details"
+  >${fromAddress}</a>
+        </code>
             <button class="btn-icon" onclick="navigator.clipboard.writeText('${fromAddress}').then(()=>notify && notify('From address copied','success'))" title="Copy From Address">
               <i class="fas fa-copy"></i>
             </button>
@@ -96,7 +87,15 @@ async function sendTrx() {
         <div class="detail-row">
           <label><i class="fas fa-map-marker-alt"></i> To Address</label>
           <div class="value-container">
-            <code>${toAddress}</code>
+            <code>
+          <a
+    class="detail-link"
+    href="index.html?page=transactions&address=${toAddress}"
+    target="_blank"
+    rel="noopener"
+    title="View address details"
+  >${toAddress}</a>
+        </code>
             <button class="btn-icon" onclick="navigator.clipboard.writeText('${toAddress}').then(()=>notify && notify('To address copied','success'))" title="Copy To Address">
               <i class="fas fa-copy"></i>
             </button>
@@ -113,7 +112,15 @@ async function sendTrx() {
         <div class="detail-row">
           <label><i class="fas fa-hashtag"></i> Transaction Hash</label>
           <div class="value-container">
-            <code>${txid}</code>
+            <code>
+          <a
+    class="detail-link"
+    href="index.html?page=transactions&tx=${receipt.txid}"
+    target="_blank"
+    rel="noopener"
+    title="View transaction details"
+  >${txid}</a>
+        </code>
             ${
               receipt.txid
                 ? `<button class="btn-icon" onclick="navigator.clipboard.writeText('${receipt.txid}').then(()=>notify && notify('Transaction hash copied','success'))" title="Copy Transaction Hash">