diff --git a/css/style.css b/css/style.css
index 01896c6..b70501a 100644
--- a/css/style.css
+++ b/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,');
+ background: url('data:image/svg+xml,');
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;
+}
\ No newline at end of file
diff --git a/favicon.svg b/favicon.svg
new file mode 100644
index 0000000..478032b
--- /dev/null
+++ b/favicon.svg
@@ -0,0 +1,12143 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 0842378..7765503 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
Tron Wallet
+
- HistoryTransactions
@@ -63,11 +64,6 @@
>Recover
-
- Balance
-
@@ -218,39 +214,138 @@
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+
+
+
+
+
+
+ Balance & History
+
+
+ Transaction Details
+
+
+
+
+
+
+
+ View Transaction
+
+ Searching...
+
+
+
+
+
-
-
-
-
-
-
- Check Balance
-
- Loading...
-
-
-
-
-
@@ -537,11 +595,11 @@
Send
- History
+ Transactions
Recover
-
- Balance
-
@@ -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);
});
}
+