Add searched address database functionality and UI integration
- Implemented SearchedAddressDB class for managing searched addresses using IndexedDB. - Added methods for saving, retrieving, deleting, and clearing searched addresses. - Integrated searched addresses history into the main UI with display and interaction features. - Updated styles for searched addresses section to enhance user experience. - Modified existing functions to save searched addresses with source information when translating from other blockchains.
This commit is contained in:
parent
0eb12a71d5
commit
62c0a7aaf2
124
doge/dogeSearchDB.js
Normal file
124
doge/dogeSearchDB.js
Normal file
@ -0,0 +1,124 @@
|
||||
class SearchedAddressDB {
|
||||
constructor() {
|
||||
this.dbName = "DogeWalletDB";
|
||||
this.version = 1;
|
||||
this.storeName = "searchedAddresses";
|
||||
this.db = null;
|
||||
}
|
||||
|
||||
async init() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const request = indexedDB.open(this.dbName, this.version);
|
||||
|
||||
request.onerror = () => reject(request.error);
|
||||
request.onsuccess = () => {
|
||||
this.db = request.result;
|
||||
resolve();
|
||||
};
|
||||
|
||||
request.onupgradeneeded = (event) => {
|
||||
const db = event.target.result;
|
||||
if (!db.objectStoreNames.contains(this.storeName)) {
|
||||
const store = db.createObjectStore(this.storeName, {
|
||||
keyPath: "address",
|
||||
});
|
||||
store.createIndex("timestamp", "timestamp", { unique: false });
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
async saveSearchedAddress(
|
||||
address,
|
||||
balance,
|
||||
timestamp = Date.now(),
|
||||
sourceInfo = null
|
||||
) {
|
||||
if (!this.db) await this.init();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = this.db.transaction([this.storeName], "readwrite");
|
||||
const store = transaction.objectStore(this.storeName);
|
||||
|
||||
// First, check if this address already exists
|
||||
const getRequest = store.get(address);
|
||||
|
||||
getRequest.onsuccess = () => {
|
||||
const existingRecord = getRequest.result;
|
||||
let finalSourceInfo = sourceInfo;
|
||||
|
||||
// If record exists and has sourceInfo, preserve it unless we're providing new sourceInfo
|
||||
if (existingRecord && existingRecord.sourceInfo && !sourceInfo) {
|
||||
finalSourceInfo = existingRecord.sourceInfo;
|
||||
}
|
||||
// If existing record has sourceInfo and new one doesn't, keep the existing one
|
||||
else if (
|
||||
existingRecord &&
|
||||
existingRecord.sourceInfo &&
|
||||
sourceInfo === null
|
||||
) {
|
||||
finalSourceInfo = existingRecord.sourceInfo;
|
||||
}
|
||||
|
||||
const data = {
|
||||
address, // This will be the DOGE address
|
||||
balance,
|
||||
timestamp,
|
||||
formattedBalance: `${balance} DOGE`,
|
||||
sourceInfo: finalSourceInfo, // Contains original blockchain info if translated from another chain
|
||||
};
|
||||
|
||||
const putRequest = store.put(data);
|
||||
putRequest.onsuccess = () => resolve();
|
||||
putRequest.onerror = () => reject(putRequest.error);
|
||||
};
|
||||
|
||||
getRequest.onerror = () => reject(getRequest.error);
|
||||
});
|
||||
}
|
||||
|
||||
async getSearchedAddresses() {
|
||||
if (!this.db) await this.init();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = this.db.transaction([this.storeName], "readonly");
|
||||
const store = transaction.objectStore(this.storeName);
|
||||
const index = store.index("timestamp");
|
||||
|
||||
const request = index.getAll();
|
||||
request.onsuccess = () => {
|
||||
const results = request.result.sort(
|
||||
(a, b) => b.timestamp - a.timestamp
|
||||
);
|
||||
resolve(results);
|
||||
};
|
||||
request.onerror = () => reject(request.error);
|
||||
});
|
||||
}
|
||||
|
||||
async deleteSearchedAddress(address) {
|
||||
if (!this.db) await this.init();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = this.db.transaction([this.storeName], "readwrite");
|
||||
const store = transaction.objectStore(this.storeName);
|
||||
|
||||
const request = store.delete(address);
|
||||
request.onsuccess = () => resolve();
|
||||
request.onerror = () => reject(request.error);
|
||||
});
|
||||
}
|
||||
|
||||
async clearAllSearchedAddresses() {
|
||||
if (!this.db) await this.init();
|
||||
|
||||
return new Promise((resolve, reject) => {
|
||||
const transaction = this.db.transaction([this.storeName], "readwrite");
|
||||
const store = transaction.objectStore(this.storeName);
|
||||
|
||||
const request = store.clear();
|
||||
request.onsuccess = () => resolve();
|
||||
request.onerror = () => reject(request.error);
|
||||
});
|
||||
}
|
||||
}
|
||||
394
index.html
394
index.html
@ -26,6 +26,7 @@
|
||||
<script src="doge/lib.dogecoin.js"></script>
|
||||
<script src="doge/dogeCrypto.js"></script>
|
||||
<script src="doge/dogeBlockchainAPI.js"></script>
|
||||
<script src="doge/dogeSearchDB.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Confirmation Popup -->
|
||||
@ -344,14 +345,14 @@
|
||||
<div id="balanceHistorySearch">
|
||||
<div class="form-group">
|
||||
<label
|
||||
><i class="fas fa-map-marker-alt"></i> Dogecoin Address /
|
||||
Private Key:</label
|
||||
><i class="fas fa-map-marker-alt"></i> DOGE/BTC/FLO/LTC
|
||||
address:</label
|
||||
>
|
||||
<div class="input-with-actions">
|
||||
<input
|
||||
id="transactionAddr"
|
||||
class="form-input"
|
||||
placeholder="Enter DOGE address or private key (DOGE/BTC/FLO/LTC)"
|
||||
placeholder="Enter DOGE/BTC/FLO/LTC address"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@ -362,10 +363,6 @@
|
||||
<i class="fas fa-times"></i>
|
||||
</button>
|
||||
</div>
|
||||
<small class="form-text"
|
||||
>Enter an address, private key (DOGE/BTC/FLO/LTC) to check
|
||||
balance</small
|
||||
>
|
||||
</div>
|
||||
<button
|
||||
class="btn btn-primary btn-block"
|
||||
@ -511,6 +508,27 @@
|
||||
|
||||
<!-- Transaction Details Results -->
|
||||
<div id="txOutput" class="transaction-result"></div>
|
||||
|
||||
<!-- Searched Addresses History -->
|
||||
<div
|
||||
id="searchedAddressesContainer"
|
||||
class="card searched-addresses-card"
|
||||
style="display: none"
|
||||
>
|
||||
<div class="searched-addresses-header">
|
||||
<h3><i class="fas fa-history"></i> Recent Addresses</h3>
|
||||
<button
|
||||
onclick="clearAllSearchedAddresses()"
|
||||
class="btn-clear-all"
|
||||
title="Clear all"
|
||||
>
|
||||
<i class="fas fa-trash"></i> Clear All
|
||||
</button>
|
||||
</div>
|
||||
<div class="searched-addresses-list" id="searchedAddressesList">
|
||||
<!-- Searched addresses will be displayed here -->
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="historyPage" class="page hidden"></div>
|
||||
@ -662,6 +680,9 @@
|
||||
<div id="notification_drawer" class="notification-drawer"></div>
|
||||
|
||||
<script>
|
||||
// Initialize the searched address database
|
||||
const searchedAddressDB = new SearchedAddressDB();
|
||||
|
||||
let currentTxOffset = 0;
|
||||
let txPerPage = 10;
|
||||
let totalTxCount = 0;
|
||||
@ -1378,33 +1399,93 @@
|
||||
});
|
||||
}
|
||||
|
||||
// Transaction History & Balance (Combined)
|
||||
function getBlockchainType(address) {
|
||||
if (address.startsWith("D")) return "DOGE";
|
||||
if (address.startsWith("F")) return "FLO";
|
||||
if (address.startsWith("L")) return "LTC";
|
||||
if (
|
||||
address.startsWith("bc1") ||
|
||||
address.startsWith("1") ||
|
||||
address.startsWith("3")
|
||||
)
|
||||
return "BTC";
|
||||
return "UNKNOWN";
|
||||
}
|
||||
|
||||
function loadTransactions() {
|
||||
const input = document.getElementById("transactionAddr").value.trim();
|
||||
if (!input) {
|
||||
notify("Please enter a Dogecoin address or private key", "error");
|
||||
notify("Please enter a blockchain address", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
// Determine if the input is an address or a private key
|
||||
// Determine if the input is a valid address
|
||||
let address = input;
|
||||
let isDogeAddress = input.startsWith("D");
|
||||
let isOtherSupportedAddress =
|
||||
input.startsWith("F") ||
|
||||
input.startsWith("L") ||
|
||||
input.startsWith("bc1") ||
|
||||
input.startsWith("1") ||
|
||||
input.startsWith("3");
|
||||
|
||||
// Check if input might be a private key (basic validation)
|
||||
if (input.length >= 40 && !input.startsWith("D")) {
|
||||
try {
|
||||
// Attempt to derive address from private key
|
||||
address = dogeCrypto.generateMultiChain(input).DOGE.address;
|
||||
notify("Using address derived from private key", "success");
|
||||
} catch (error) {
|
||||
console.error(
|
||||
"[ERROR] Failed to derive address from input:",
|
||||
error
|
||||
// Check if it's potentially a private key (which we don't want to accept)
|
||||
if (
|
||||
input.length >= 40 &&
|
||||
(input.startsWith("5") ||
|
||||
input.startsWith("6") ||
|
||||
input.startsWith("K") ||
|
||||
input.startsWith("L") ||
|
||||
input.startsWith("Q") ||
|
||||
input.startsWith("R") ||
|
||||
input.startsWith("T"))
|
||||
) {
|
||||
document.getElementById("txList").innerHTML = createErrorUI(
|
||||
"Invalid Input Type",
|
||||
"Private keys are not accepted in the balance & history search. Please enter a valid blockchain address (DOGE, FLO, BTC, or LTC)."
|
||||
);
|
||||
|
||||
notify("Private keys not allowed in this search", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if address is a valid format
|
||||
if (!isDogeAddress && !isOtherSupportedAddress) {
|
||||
document.getElementById("txList").innerHTML = createErrorUI(
|
||||
"Invalid Address Format",
|
||||
"Please enter a valid blockchain address (DOGE, FLO, BTC, or LTC)."
|
||||
);
|
||||
notify("Invalid address format", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
setButtonLoading("loadTransactions", true);
|
||||
|
||||
if (!isDogeAddress && isOtherSupportedAddress) {
|
||||
try {
|
||||
notify("Translating address to DOGE equivalent...", "info");
|
||||
const translatedAddresses = dogeCrypto.translateAddress(input);
|
||||
address = translatedAddresses.DOGE;
|
||||
notify("Address translated: " + address, "success");
|
||||
} catch (error) {
|
||||
console.error("Translation error:", error);
|
||||
document.getElementById("balanceSection").style.display = "none";
|
||||
document.getElementById("transactionSection").style.display =
|
||||
"none";
|
||||
document.getElementById("txList").innerHTML = createErrorUI(
|
||||
"Address Translation Failed",
|
||||
`Error: ${
|
||||
error.message ||
|
||||
"Unable to translate address to DOGE equivalent"
|
||||
}`,
|
||||
"loadTransactions()"
|
||||
);
|
||||
notify("Failed to translate address: " + error.message, "error");
|
||||
setButtonLoading("loadTransactions", false);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
// Reset pagination
|
||||
currentTxOffset = 0;
|
||||
currentTxAddress = address;
|
||||
@ -1424,10 +1505,36 @@
|
||||
// Set balance values
|
||||
document.getElementById("balanceValue").textContent =
|
||||
balance.toFixed(8);
|
||||
|
||||
const input = document
|
||||
.getElementById("transactionAddr")
|
||||
.value.trim();
|
||||
if (input !== address) {
|
||||
document.getElementById(
|
||||
"displayedAddress"
|
||||
).innerHTML = `${address}<br><small class="translated-from">translated from ${input}</small>`;
|
||||
|
||||
// Save to search history with source info (translated address)
|
||||
searchedAddressDB.saveSearchedAddress(
|
||||
address,
|
||||
balance,
|
||||
Date.now(),
|
||||
{
|
||||
originalAddress: input,
|
||||
blockchain: getBlockchainType(input),
|
||||
}
|
||||
);
|
||||
} else {
|
||||
document.getElementById("displayedAddress").textContent = address;
|
||||
|
||||
// Save to search history
|
||||
searchedAddressDB.saveSearchedAddress(address, balance);
|
||||
}
|
||||
|
||||
document.getElementById("balanceSection").style.display = "block";
|
||||
|
||||
updateSearchedAddressesList();
|
||||
|
||||
fetchTransactionsWithPagination();
|
||||
|
||||
document
|
||||
@ -1476,8 +1583,6 @@
|
||||
// Make sure the transaction section is visible
|
||||
document.getElementById("transactionSection").style.display = "block";
|
||||
|
||||
|
||||
|
||||
document.getElementById("paginationInfo").innerText = "";
|
||||
|
||||
dogeBlockchainAPI
|
||||
@ -1703,6 +1808,232 @@
|
||||
document.body.style.overflow = "auto";
|
||||
}
|
||||
|
||||
async function updateSearchedAddressesList() {
|
||||
try {
|
||||
const searchedAddresses =
|
||||
await searchedAddressDB.getSearchedAddresses();
|
||||
displaySearchedAddresses(searchedAddresses);
|
||||
} catch (error) {
|
||||
console.error("Error loading searched addresses:", error);
|
||||
}
|
||||
}
|
||||
|
||||
function displaySearchedAddresses(addresses) {
|
||||
const container = document.getElementById("searchedAddressesContainer");
|
||||
const list = document.getElementById("searchedAddressesList");
|
||||
|
||||
if (!container || !list) return;
|
||||
|
||||
if (addresses.length === 0) {
|
||||
container.style.display = "none";
|
||||
return;
|
||||
}
|
||||
|
||||
container.style.display = "block";
|
||||
|
||||
let html = "";
|
||||
addresses.forEach((addr, index) => {
|
||||
// Check if this was translated from another blockchain
|
||||
const hasSourceInfo =
|
||||
addr.sourceInfo && addr.sourceInfo.originalAddress !== addr.address;
|
||||
|
||||
html += `
|
||||
<div class="searched-address-item ${
|
||||
hasSourceInfo ? "has-source-info" : ""
|
||||
}" data-index="${index}" data-current-type="${
|
||||
hasSourceInfo ? addr.sourceInfo.blockchain.toLowerCase() : "doge"
|
||||
}">
|
||||
${
|
||||
hasSourceInfo
|
||||
? `
|
||||
<div class="address-toggle-section">
|
||||
<div class="address-toggle-group">
|
||||
<button onclick="toggleAddressType(${index}, '${addr.sourceInfo.blockchain.toLowerCase()}')"
|
||||
class="btn-toggle-address active"
|
||||
data-type="${addr.sourceInfo.blockchain.toLowerCase()}"
|
||||
title="Show ${addr.sourceInfo.blockchain} Address">
|
||||
${addr.sourceInfo.blockchain}
|
||||
</button>
|
||||
<button onclick="toggleAddressType(${index}, 'doge')"
|
||||
class="btn-toggle-address"
|
||||
data-type="doge"
|
||||
title="Show DOGE Address">
|
||||
DOGE
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="address-content-wrapper">
|
||||
<div class="address-info">
|
||||
<div class="address-display">
|
||||
<div class="address-text" id="address-display-${index}" title="${
|
||||
addr.sourceInfo.originalAddress
|
||||
}">
|
||||
${addr.sourceInfo.originalAddress}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="address-actions">
|
||||
<button onclick="copyCurrentAddress(${index})" class="btn-copy-current" title="Copy Selected Address">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
<button onclick="deleteSearchedAddress('${
|
||||
addr.address
|
||||
}')" class="btn-delete" title="Delete">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
<button onclick="recheckBalance('${
|
||||
addr.address
|
||||
}')" class="btn-check" title="Check balance">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
: `
|
||||
<div class="address-info">
|
||||
<div class="address-display">
|
||||
<div class="address-text" id="address-display-${index}" title="${addr.address}">
|
||||
${addr.address}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="address-actions">
|
||||
<button onclick="copyAddressToClipboard('${addr.address}')" class="btn-copy" title="Copy DOGE Address">
|
||||
<i class="fas fa-copy"></i>
|
||||
</button>
|
||||
<button onclick="deleteSearchedAddress('${addr.address}')" class="btn-delete" title="Delete">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
<button onclick="recheckBalance('${addr.address}')" class="btn-check" title="Check balance">
|
||||
<i class="fas fa-search"></i>
|
||||
</button>
|
||||
</div>
|
||||
`
|
||||
}
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
list.innerHTML = html;
|
||||
}
|
||||
|
||||
// toggle between address types in searched addresses
|
||||
async function toggleAddressType(addressIndex, type) {
|
||||
try {
|
||||
const addresses = await searchedAddressDB.getSearchedAddresses();
|
||||
if (!addresses[addressIndex]) return;
|
||||
|
||||
const addressItem = addresses[addressIndex];
|
||||
const container = document.querySelector(
|
||||
`[data-index="${addressIndex}"]`
|
||||
);
|
||||
if (!container) return;
|
||||
|
||||
const toggleButtons = container.querySelectorAll(
|
||||
".btn-toggle-address"
|
||||
);
|
||||
toggleButtons.forEach((btn) => btn.classList.remove("active"));
|
||||
|
||||
const activeButton = container.querySelector(`[data-type="${type}"]`);
|
||||
if (activeButton) {
|
||||
activeButton.classList.add("active");
|
||||
}
|
||||
|
||||
container.setAttribute("data-current-type", type);
|
||||
|
||||
const addressDisplay = container.querySelector(
|
||||
`#address-display-${addressIndex}`
|
||||
);
|
||||
if (addressDisplay) {
|
||||
if (type === "doge") {
|
||||
// Show DOGE address
|
||||
addressDisplay.textContent = addressItem.address;
|
||||
addressDisplay.title = addressItem.address;
|
||||
} else {
|
||||
// Show original blockchain address (FLO/BTC/LTC)
|
||||
const originalAddress =
|
||||
addressItem.sourceInfo?.originalAddress || addressItem.address;
|
||||
addressDisplay.textContent = originalAddress;
|
||||
addressDisplay.title = originalAddress;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Error toggling address type:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async function copyCurrentAddress(addressIndex) {
|
||||
try {
|
||||
const addresses = await searchedAddressDB.getSearchedAddresses();
|
||||
if (!addresses[addressIndex]) return;
|
||||
|
||||
const addressItem = addresses[addressIndex];
|
||||
const container = document.querySelector(
|
||||
`[data-index="${addressIndex}"]`
|
||||
);
|
||||
if (!container) return;
|
||||
|
||||
const currentType =
|
||||
container.getAttribute("data-current-type") || "doge";
|
||||
|
||||
let addressToCopy;
|
||||
let addressLabel;
|
||||
|
||||
if (currentType === "doge") {
|
||||
addressToCopy = addressItem.address;
|
||||
addressLabel = "DOGE address";
|
||||
} else {
|
||||
addressToCopy =
|
||||
addressItem.sourceInfo?.originalAddress || addressItem.address;
|
||||
addressLabel = `${
|
||||
addressItem.sourceInfo?.blockchain || "Original"
|
||||
} address`;
|
||||
}
|
||||
|
||||
await copyAddressToClipboard(addressToCopy, addressLabel);
|
||||
} catch (error) {
|
||||
console.error("Error copying current address:", error);
|
||||
notify("Failed to copy address", "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function deleteSearchedAddress(address) {
|
||||
try {
|
||||
await searchedAddressDB.deleteSearchedAddress(address);
|
||||
await updateSearchedAddressesList();
|
||||
notify("Address removed from history", "success");
|
||||
} catch (error) {
|
||||
console.error("Error deleting searched address:", error);
|
||||
notify("Failed to remove address", "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function clearAllSearchedAddresses() {
|
||||
try {
|
||||
await searchedAddressDB.clearAllSearchedAddresses();
|
||||
await updateSearchedAddressesList();
|
||||
notify("All searched addresses cleared", "success");
|
||||
} catch (error) {
|
||||
console.error("Error clearing searched addresses:", error);
|
||||
notify("Failed to clear addresses", "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function copyAddressToClipboard(address, label = "Address") {
|
||||
try {
|
||||
await navigator.clipboard.writeText(address);
|
||||
notify(`${label} copied to clipboard`, "success");
|
||||
} catch (error) {
|
||||
console.error("Error copying to clipboard:", error);
|
||||
notify("Failed to copy address", "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function recheckBalance(address) {
|
||||
document.getElementById("transactionAddr").value = address;
|
||||
loadTransactions();
|
||||
}
|
||||
|
||||
// Send Dogecoin using RPC method
|
||||
function sendDogeRPC() {
|
||||
let privateKey = document.getElementById("privateKey").value.trim();
|
||||
@ -1742,7 +2073,6 @@
|
||||
function () {
|
||||
setButtonLoading("sendBtn", true);
|
||||
|
||||
|
||||
dogeBlockchainAPI
|
||||
.sendDogecoinRPC(
|
||||
senderAddress,
|
||||
@ -1937,7 +2267,19 @@
|
||||
}
|
||||
|
||||
function shareAddress() {
|
||||
const address = document.getElementById("displayedAddress").textContent;
|
||||
const addressElement = document.getElementById("displayedAddress");
|
||||
|
||||
let address;
|
||||
if (
|
||||
addressElement.firstChild &&
|
||||
addressElement.firstChild.nodeType === Node.TEXT_NODE
|
||||
) {
|
||||
address = addressElement.firstChild.textContent.trim();
|
||||
} else {
|
||||
const fullText = addressElement.textContent;
|
||||
address = fullText.split("translated from")[0].trim();
|
||||
}
|
||||
|
||||
if (!address) {
|
||||
notify("No address to share", "error");
|
||||
return;
|
||||
@ -2412,6 +2754,8 @@
|
||||
.appendChild(txOutputElement);
|
||||
}
|
||||
|
||||
updateSearchedAddressesList();
|
||||
|
||||
initializeTheme();
|
||||
|
||||
// Show loading screen
|
||||
@ -2439,8 +2783,6 @@
|
||||
loadingScreen.style.opacity = "0";
|
||||
setTimeout(() => {
|
||||
loadingScreen.remove();
|
||||
notify("Welcome to RanchiMall Dogecoin Wallet", "success");
|
||||
|
||||
handleSharedLinks();
|
||||
|
||||
if (!window.location.hash) {
|
||||
|
||||
414
style.css
414
style.css
@ -1712,6 +1712,16 @@ h4 {
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
|
||||
.translated-from {
|
||||
font-size: 0.8em;
|
||||
opacity: 0.7;
|
||||
font-style: italic;
|
||||
display: block;
|
||||
margin-top: 0.25rem;
|
||||
text-align: center;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.address-text {
|
||||
font-size: 0.75rem;
|
||||
@ -2194,7 +2204,6 @@ h4 {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 380px) {
|
||||
.filter-btn {
|
||||
padding: 0.25rem 0.5rem;
|
||||
@ -2552,17 +2561,14 @@ h4 {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
#txOutput {
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
|
||||
.tx-detail-row {
|
||||
padding: 0.75rem 0;
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tx-detail-value {
|
||||
overflow-x: auto;
|
||||
@ -2581,7 +2587,6 @@ h4 {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.tx-detail-row {
|
||||
flex-direction: column;
|
||||
@ -2606,7 +2611,6 @@ h4 {
|
||||
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
|
||||
[data-theme="dark"] .notification.success {
|
||||
background-color: var(--success-color, #10b981);
|
||||
color: white;
|
||||
@ -2625,7 +2629,6 @@ h4 {
|
||||
border-radius: 0 0 0.5rem 0.5rem;
|
||||
}
|
||||
|
||||
|
||||
.tx-io-address {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -2654,7 +2657,6 @@ h4 {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
|
||||
.tx-detail-value {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@ -2664,7 +2666,6 @@ h4 {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.transaction-result {
|
||||
margin-top: 1rem;
|
||||
overflow: visible;
|
||||
@ -2684,7 +2685,6 @@ h4 {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
|
||||
#balanceHistoryResults,
|
||||
#txOutput {
|
||||
transition: opacity 0.3s ease, display 0.3s ease;
|
||||
@ -3068,7 +3068,7 @@ h4 {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 768px) {
|
||||
.tx-detail-value {
|
||||
margin-left: 0;
|
||||
}
|
||||
@ -3156,8 +3156,8 @@ h4 {
|
||||
}
|
||||
}
|
||||
|
||||
/* Transaction Details Card */
|
||||
.tx-details-card {
|
||||
/* Transaction Details Card */
|
||||
.tx-details-card {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border-radius: 12px;
|
||||
padding: 0;
|
||||
@ -3165,22 +3165,22 @@ h4 {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-detail-item {
|
||||
.tx-detail-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.75rem 1rem;
|
||||
border-bottom: 1px solid rgba(255, 255, 255, 0.05);
|
||||
align-items: flex-start;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-detail-item:last-child {
|
||||
.tx-detail-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-detail-label {
|
||||
.tx-detail-label {
|
||||
font-weight: 500;
|
||||
color: #4794ff;
|
||||
font-size: 0.75rem;
|
||||
@ -3191,16 +3191,16 @@ h4 {
|
||||
margin-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-detail-label i {
|
||||
.tx-detail-label i {
|
||||
color: #4794ff;
|
||||
font-size: 0.875rem;
|
||||
width: 18px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-detail-value {
|
||||
.tx-detail-value {
|
||||
color: var(--text-color);
|
||||
font-weight: 400;
|
||||
word-break: break-all;
|
||||
@ -3212,23 +3212,23 @@ h4 {
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-detail-value span {
|
||||
.tx-detail-value span {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
flex: 1;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-detail-item:last-child .tx-detail-value span {
|
||||
.tx-detail-item:last-child .tx-detail-value span {
|
||||
white-space: nowrap;
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-small {
|
||||
.copy-small {
|
||||
background: transparent;
|
||||
border: none;
|
||||
color: var(--text-secondary);
|
||||
@ -3243,34 +3243,34 @@ h4 {
|
||||
flex-shrink: 0;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.copy-small:hover {
|
||||
.copy-small:hover {
|
||||
color: var(--primary-color);
|
||||
background-color: rgba(var(--primary-color-rgb), 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.copy-small:active {
|
||||
.copy-small:active {
|
||||
transform: scale(0.95);
|
||||
}
|
||||
}
|
||||
|
||||
.view-on-chain {
|
||||
.view-on-chain {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-actions {
|
||||
.tx-actions {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.75rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-actions .btn {
|
||||
.tx-actions .btn {
|
||||
width: 100%;
|
||||
transition: all 0.2s ease;
|
||||
padding: 0.75rem;
|
||||
@ -3279,40 +3279,40 @@ h4 {
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-actions .btn:hover {
|
||||
.tx-actions .btn:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-actions .btn-primary {
|
||||
.tx-actions .btn-primary {
|
||||
background: #4794ff;
|
||||
border: none;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
.tx-actions .btn-secondary {
|
||||
.tx-actions .btn-secondary {
|
||||
background: transparent;
|
||||
color: var(--text-color);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
.view-on-chain {
|
||||
.view-on-chain {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.transaction-error .tx-actions .btn-primary {
|
||||
.transaction-error .tx-actions .btn-primary {
|
||||
background: var(--danger-color);
|
||||
border-color: var(--danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
.transaction-error .tx-actions .btn-primary:hover {
|
||||
.transaction-error .tx-actions .btn-primary:hover {
|
||||
background: rgba(var(--error-color-rgb), 0.9);
|
||||
border-color: var(--danger-color);
|
||||
}
|
||||
}
|
||||
|
||||
.transaction-error .error-details {
|
||||
.transaction-error .error-details {
|
||||
background: rgba(var(--error-color-rgb), 0.05);
|
||||
padding: 1rem;
|
||||
border-radius: 0.5rem;
|
||||
@ -3325,9 +3325,9 @@ h4 {
|
||||
text-align: left;
|
||||
max-height: 200px;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
@media (max-width: 768px) {
|
||||
.tx-detail-item {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
@ -3346,9 +3346,9 @@ h4 {
|
||||
.transaction-error h3 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
@media (max-width: 480px) {
|
||||
.transaction-success,
|
||||
.transaction-error {
|
||||
padding: 1rem;
|
||||
@ -3385,16 +3385,304 @@ h4 {
|
||||
.tx-actions .btn {
|
||||
padding: 0.625rem;
|
||||
}
|
||||
|
||||
.searched-addresses-header h3 {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
/* Transaction list */
|
||||
.transaction-list {
|
||||
.btn-clear-all {
|
||||
font-size: 0.75rem;
|
||||
padding: 0.2rem 0.4rem;
|
||||
}
|
||||
|
||||
.address-actions {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.searched-address-item {
|
||||
padding: 0.4rem;
|
||||
}
|
||||
|
||||
.btn-copy,
|
||||
.btn-copy-current,
|
||||
.btn-delete,
|
||||
.btn-check {
|
||||
padding: 0.15rem 0.3rem;
|
||||
font-size: 0.65rem;
|
||||
}
|
||||
|
||||
.address-display {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
|
||||
.address-toggle-group {
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.btn-toggle-address {
|
||||
font-size: 0.65rem;
|
||||
padding: 0.1rem 0.25rem;
|
||||
}
|
||||
} /* Transaction list */
|
||||
.transaction-list {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.hash-value,
|
||||
.address-value {
|
||||
font-size: 0.8rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Searched Addresses Styles */
|
||||
.searched-addresses-card {
|
||||
margin-top: 2rem;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.searched-addresses-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.searched-addresses-header h3 {
|
||||
margin: 0;
|
||||
font-size: 1rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.searched-addresses-header h3 i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-clear-all {
|
||||
background: none;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--danger-color);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
font-size: 0.875rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-clear-all:hover {
|
||||
background-color: rgba(var(--danger-color-rgb), 0.1);
|
||||
}
|
||||
|
||||
.searched-addresses-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.searched-address-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--card-bg);
|
||||
border-radius: 8px;
|
||||
border: 1px solid var(--border-color);
|
||||
padding: 0.75rem;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.searched-address-item:hover {
|
||||
border-color: var(--primary-color);
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.searched-address-item.has-source-info {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
||||
.address-toggle-section {
|
||||
margin-bottom: 0.5rem;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.address-toggle-group {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-toggle-address {
|
||||
background: var(--background-secondary);
|
||||
border: 1px solid var(--border-color);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.75rem;
|
||||
padding: 0.25rem 0.5rem;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-toggle-address.active {
|
||||
background: var(--primary-color);
|
||||
color: white;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.address-content-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
flex-grow: 1;
|
||||
min-width: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.address-display {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
width: 100%;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.address-text {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.address-text {
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.address-actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.btn-copy,
|
||||
.btn-copy-current,
|
||||
.btn-delete,
|
||||
.btn-check {
|
||||
background: none;
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: 4px;
|
||||
padding: 0.25rem 0.5rem;
|
||||
font-size: 0.75rem;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.25rem;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.btn-copy i,
|
||||
.btn-copy-current i {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.btn-delete i {
|
||||
color: var(--danger-color);
|
||||
}
|
||||
|
||||
.btn-check i {
|
||||
color: var(--success-color);
|
||||
}
|
||||
|
||||
.btn-copy:hover,
|
||||
.btn-copy-current:hover {
|
||||
background-color: rgba(var(--primary-color-rgb), 0.1);
|
||||
}
|
||||
|
||||
.btn-delete:hover {
|
||||
background-color: rgba(var(--danger-color-rgb), 0.1);
|
||||
}
|
||||
|
||||
.btn-check:hover {
|
||||
background-color: rgba(var(--success-color-rgb), 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.address-content-wrapper {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.hash-value,
|
||||
.address-value {
|
||||
font-size: 0.8rem;
|
||||
word-break: break-all;
|
||||
.address-actions {
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
gap: 0.35rem;
|
||||
}
|
||||
|
||||
.searched-addresses-card {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.searched-addresses-header {
|
||||
padding: 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.searched-addresses-list {
|
||||
padding: 0.5rem;
|
||||
max-height: 250px;
|
||||
}
|
||||
|
||||
.searched-address-item {
|
||||
padding: 0.75rem 0.5rem;
|
||||
}
|
||||
|
||||
.address-toggle-group {
|
||||
flex-wrap: wrap;
|
||||
margin-bottom: 0.25rem;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.btn-toggle-address {
|
||||
font-size: 0.7rem;
|
||||
padding: 0.15rem 0.35rem;
|
||||
flex-grow: 1;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.btn-copy,
|
||||
.btn-copy-current,
|
||||
.btn-delete,
|
||||
.btn-check {
|
||||
padding: 0.3rem 0.5rem;
|
||||
font-size: 0.7rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.address-info {
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user