mirror of
https://github.com/basicswap/basicswap.git
synced 2025-05-08 05:42:17 +00:00
* JS/UI: Fix scrolling lag + Various fixes and cleanup. * Fix clear button * JS: Fix when page is hidden, reconnect and proper pause/resume logic. * JS: Fix tooltips bugs. * JS: Various fixes. * JS: Fix fetch system. * JS: Cleanup
2951 lines
103 KiB
JavaScript
2951 lines
103 KiB
JavaScript
const EventManager = {
|
|
listeners: new Map(),
|
|
|
|
add(element, type, handler, options = false) {
|
|
if (!this.listeners.has(element)) {
|
|
this.listeners.set(element, new Map());
|
|
}
|
|
|
|
const elementListeners = this.listeners.get(element);
|
|
if (!elementListeners.has(type)) {
|
|
elementListeners.set(type, new Set());
|
|
}
|
|
|
|
const handlerInfo = { handler, options };
|
|
elementListeners.get(type).add(handlerInfo);
|
|
element.addEventListener(type, handler, options);
|
|
|
|
return handlerInfo;
|
|
},
|
|
|
|
remove(element, type, handler, options = false) {
|
|
const elementListeners = this.listeners.get(element);
|
|
if (!elementListeners) return;
|
|
|
|
const typeListeners = elementListeners.get(type);
|
|
if (!typeListeners) return;
|
|
|
|
typeListeners.forEach(info => {
|
|
if (info.handler === handler) {
|
|
element.removeEventListener(type, handler, options);
|
|
typeListeners.delete(info);
|
|
}
|
|
});
|
|
|
|
if (typeListeners.size === 0) {
|
|
elementListeners.delete(type);
|
|
}
|
|
if (elementListeners.size === 0) {
|
|
this.listeners.delete(element);
|
|
}
|
|
},
|
|
|
|
removeAll(element) {
|
|
const elementListeners = this.listeners.get(element);
|
|
if (!elementListeners) return;
|
|
|
|
elementListeners.forEach((typeListeners, type) => {
|
|
typeListeners.forEach(info => {
|
|
element.removeEventListener(type, info.handler, info.options);
|
|
});
|
|
});
|
|
|
|
this.listeners.delete(element);
|
|
},
|
|
|
|
clearAll() {
|
|
this.listeners.forEach((elementListeners, element) => {
|
|
this.removeAll(element);
|
|
});
|
|
this.listeners.clear();
|
|
}
|
|
};
|
|
|
|
// GLOBAL STATE VARIABLES
|
|
let latestPrices = null;
|
|
let lastRefreshTime = null;
|
|
let currentPage = 1;
|
|
let jsonData = [];
|
|
let originalJsonData = [];
|
|
let currentSortColumn = 0;
|
|
let currentSortDirection = 'desc';
|
|
let filterTimeout = null;
|
|
|
|
// CONFIGURATION CONSTANTS
|
|
|
|
// Time Constants
|
|
const CACHE_DURATION = 10 * 60 * 1000;
|
|
|
|
// Application Constants
|
|
const itemsPerPage = 100;
|
|
const isSentOffers = window.offersTableConfig.isSentOffers;
|
|
|
|
const offersConfig = {
|
|
apiEndpoints: {
|
|
coinGecko: 'https://api.coingecko.com/api/v3',
|
|
cryptoCompare: 'https://min-api.cryptocompare.com/data'
|
|
},
|
|
apiKeys: getAPIKeys()
|
|
};
|
|
|
|
// MAPPING OBJECTS
|
|
const coinNameToSymbol = {
|
|
'Bitcoin': 'bitcoin',
|
|
'Particl': 'particl',
|
|
'Particl Blind': 'particl',
|
|
'Particl Anon': 'particl',
|
|
'Monero': 'monero',
|
|
'Wownero': 'wownero',
|
|
'Litecoin': 'litecoin',
|
|
'Firo': 'firo',
|
|
'Zcoin': 'firo',
|
|
'Dash': 'dash',
|
|
'PIVX': 'pivx',
|
|
'Decred': 'decred',
|
|
'Zano': 'zano',
|
|
'Dogecoin': 'dogecoin',
|
|
'Bitcoin Cash': 'bitcoin-cash'
|
|
};
|
|
|
|
const coinNameToDisplayName = {
|
|
'Bitcoin': 'Bitcoin',
|
|
'Litecoin': 'Litecoin',
|
|
'Monero': 'Monero',
|
|
'Particl': 'Particl',
|
|
'Particl Blind': 'Particl Blind',
|
|
'Particl Anon': 'Particl Anon',
|
|
'PIVX': 'PIVX',
|
|
'Firo': 'Firo',
|
|
'Zcoin': 'Firo',
|
|
'Dash': 'Dash',
|
|
'Decred': 'Decred',
|
|
'Wownero': 'Wownero',
|
|
'Bitcoin Cash': 'Bitcoin Cash',
|
|
'Dogecoin': 'Dogecoin',
|
|
'Zano': 'Zano'
|
|
};
|
|
|
|
const coinIdToName = {
|
|
1: 'particl', 2: 'bitcoin', 3: 'litecoin', 4: 'decred',
|
|
6: 'monero', 7: 'particl blind', 8: 'particl anon',
|
|
9: 'wownero', 11: 'pivx', 13: 'firo', 17: 'bitcoincash',
|
|
18: 'dogecoin'
|
|
};
|
|
|
|
// DOM ELEMENT REFERENCES
|
|
const offersBody = document.getElementById('offers-body');
|
|
const filterForm = document.getElementById('filterForm');
|
|
const prevPageButton = document.getElementById('prevPage');
|
|
const nextPageButton = document.getElementById('nextPage');
|
|
const currentPageSpan = document.getElementById('currentPage');
|
|
const totalPagesSpan = document.getElementById('totalPages');
|
|
const lastRefreshTimeSpan = document.getElementById('lastRefreshTime');
|
|
const newEntriesCountSpan = document.getElementById('newEntriesCount');
|
|
|
|
// MANAGER OBJECTS
|
|
const WebSocketManager = {
|
|
ws: null,
|
|
messageQueue: [],
|
|
processingQueue: false,
|
|
debounceTimeout: null,
|
|
reconnectTimeout: null,
|
|
maxReconnectAttempts: 5,
|
|
reconnectAttempts: 0,
|
|
reconnectDelay: 5000,
|
|
maxQueueSize: 1000,
|
|
isIntentionallyClosed: false,
|
|
handlers: {},
|
|
isPageHidden: document.hidden,
|
|
priceUpdatePaused: false,
|
|
lastVisibilityChange: Date.now(),
|
|
|
|
connectionState: {
|
|
isConnecting: false,
|
|
lastConnectAttempt: null,
|
|
connectTimeout: null,
|
|
lastHealthCheck: null,
|
|
healthCheckInterval: null
|
|
},
|
|
|
|
initialize() {
|
|
this.setupPageVisibilityHandler();
|
|
this.connect();
|
|
this.startHealthCheck();
|
|
},
|
|
|
|
setupPageVisibilityHandler() {
|
|
this.handlers.visibilityChange = () => {
|
|
if (document.hidden) {
|
|
this.handlePageHidden();
|
|
} else {
|
|
this.handlePageVisible();
|
|
}
|
|
};
|
|
document.addEventListener('visibilitychange', this.handlers.visibilityChange);
|
|
},
|
|
|
|
handlePageHidden() {
|
|
this.isPageHidden = true;
|
|
this.priceUpdatePaused = true;
|
|
this.stopHealthCheck();
|
|
if (this.ws && this.ws.readyState === WebSocket.OPEN) {
|
|
this.isIntentionallyClosed = true;
|
|
this.ws.close(1000, 'Page hidden');
|
|
}
|
|
},
|
|
|
|
handlePageVisible() {
|
|
this.isPageHidden = false;
|
|
this.lastVisibilityChange = Date.now();
|
|
this.isIntentionallyClosed = false;
|
|
|
|
setTimeout(() => {
|
|
this.priceUpdatePaused = false;
|
|
if (!this.isConnected()) {
|
|
this.connect();
|
|
}
|
|
this.startHealthCheck();
|
|
}, 1000);
|
|
},
|
|
|
|
startHealthCheck() {
|
|
this.stopHealthCheck();
|
|
this.connectionState.healthCheckInterval = setInterval(() => {
|
|
this.performHealthCheck();
|
|
}, 30000);
|
|
},
|
|
|
|
stopHealthCheck() {
|
|
if (this.connectionState.healthCheckInterval) {
|
|
clearInterval(this.connectionState.healthCheckInterval);
|
|
this.connectionState.healthCheckInterval = null;
|
|
}
|
|
},
|
|
|
|
performHealthCheck() {
|
|
if (!this.isConnected()) {
|
|
this.handleReconnect();
|
|
return;
|
|
}
|
|
|
|
const now = Date.now();
|
|
const lastCheck = this.connectionState.lastHealthCheck;
|
|
if (lastCheck && (now - lastCheck) > 60000) {
|
|
this.handleReconnect();
|
|
return;
|
|
}
|
|
|
|
this.connectionState.lastHealthCheck = now;
|
|
},
|
|
|
|
connect() {
|
|
if (this.connectionState.isConnecting || this.isIntentionallyClosed) {
|
|
return false;
|
|
}
|
|
|
|
this.cleanup();
|
|
this.connectionState.isConnecting = true;
|
|
this.connectionState.lastConnectAttempt = Date.now();
|
|
|
|
try {
|
|
const config = getWebSocketConfig();
|
|
const wsPort = config.port || window.ws_port || '11700';
|
|
|
|
if (!wsPort) {
|
|
this.connectionState.isConnecting = false;
|
|
return false;
|
|
}
|
|
|
|
this.ws = new WebSocket(`ws://${window.location.hostname}:${wsPort}`);
|
|
this.setupEventHandlers();
|
|
|
|
this.connectionState.connectTimeout = setTimeout(() => {
|
|
if (this.connectionState.isConnecting) {
|
|
this.cleanup();
|
|
this.handleReconnect();
|
|
}
|
|
}, 5000);
|
|
|
|
return true;
|
|
} catch (error) {
|
|
this.connectionState.isConnecting = false;
|
|
this.handleReconnect();
|
|
return false;
|
|
}
|
|
},
|
|
|
|
setupEventHandlers() {
|
|
if (!this.ws) return;
|
|
|
|
this.handlers.open = () => {
|
|
this.connectionState.isConnecting = false;
|
|
this.reconnectAttempts = 0;
|
|
clearTimeout(this.connectionState.connectTimeout);
|
|
this.connectionState.lastHealthCheck = Date.now();
|
|
window.ws = this.ws;
|
|
updateConnectionStatus('connected');
|
|
};
|
|
|
|
this.handlers.message = (event) => {
|
|
try {
|
|
const message = JSON.parse(event.data);
|
|
this.handleMessage(message);
|
|
} catch (error) {
|
|
updateConnectionStatus('error');
|
|
}
|
|
};
|
|
|
|
this.handlers.error = (error) => {
|
|
updateConnectionStatus('error');
|
|
};
|
|
|
|
this.handlers.close = (event) => {
|
|
this.connectionState.isConnecting = false;
|
|
window.ws = null;
|
|
updateConnectionStatus('disconnected');
|
|
|
|
if (!this.isIntentionallyClosed) {
|
|
this.handleReconnect();
|
|
}
|
|
};
|
|
|
|
this.ws.onopen = this.handlers.open;
|
|
this.ws.onmessage = this.handlers.message;
|
|
this.ws.onerror = this.handlers.error;
|
|
this.ws.onclose = this.handlers.close;
|
|
},
|
|
|
|
handleMessage(message) {
|
|
if (this.messageQueue.length >= this.maxQueueSize) {
|
|
this.messageQueue.shift();
|
|
}
|
|
|
|
if (this.debounceTimeout) {
|
|
clearTimeout(this.debounceTimeout);
|
|
}
|
|
|
|
this.messageQueue.push(message);
|
|
|
|
this.debounceTimeout = setTimeout(() => {
|
|
this.processMessageQueue();
|
|
}, 200);
|
|
},
|
|
|
|
async processMessageQueue() {
|
|
if (this.processingQueue || this.messageQueue.length === 0) return;
|
|
|
|
this.processingQueue = true;
|
|
const endpoint = isSentOffers ? '/json/sentoffers' : '/json/offers';
|
|
|
|
try {
|
|
const response = await fetch(endpoint);
|
|
if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
|
|
|
|
const newData = await response.json();
|
|
const fetchedOffers = Array.isArray(newData) ? newData : Object.values(newData);
|
|
|
|
jsonData = formatInitialData(fetchedOffers);
|
|
originalJsonData = [...jsonData];
|
|
|
|
requestAnimationFrame(() => {
|
|
updateOffersTable();
|
|
updateJsonView();
|
|
updatePaginationInfo();
|
|
});
|
|
|
|
this.messageQueue = [];
|
|
} catch (error) {
|
|
} finally {
|
|
this.processingQueue = false;
|
|
}
|
|
},
|
|
|
|
handleReconnect() {
|
|
if (this.reconnectTimeout) {
|
|
clearTimeout(this.reconnectTimeout);
|
|
}
|
|
|
|
this.reconnectAttempts++;
|
|
if (this.reconnectAttempts <= this.maxReconnectAttempts) {
|
|
const delay = Math.min(
|
|
this.reconnectDelay * Math.pow(1.5, this.reconnectAttempts - 1),
|
|
30000
|
|
);
|
|
|
|
this.reconnectTimeout = setTimeout(() => {
|
|
if (!this.isIntentionallyClosed) {
|
|
this.connect();
|
|
}
|
|
}, delay);
|
|
} else {
|
|
updateConnectionStatus('error');
|
|
setTimeout(() => {
|
|
this.reconnectAttempts = 0;
|
|
this.connect();
|
|
}, 60000);
|
|
}
|
|
},
|
|
|
|
cleanup() {
|
|
clearTimeout(this.debounceTimeout);
|
|
clearTimeout(this.reconnectTimeout);
|
|
clearTimeout(this.connectionState.connectTimeout);
|
|
this.stopHealthCheck();
|
|
|
|
this.messageQueue = [];
|
|
this.processingQueue = false;
|
|
this.connectionState.isConnecting = false;
|
|
|
|
if (this.ws) {
|
|
this.ws.onopen = null;
|
|
this.ws.onmessage = null;
|
|
this.ws.onerror = null;
|
|
this.ws.onclose = null;
|
|
|
|
if (this.ws.readyState === WebSocket.OPEN) {
|
|
this.ws.close(1000, 'Cleanup');
|
|
}
|
|
|
|
this.ws = null;
|
|
window.ws = null;
|
|
}
|
|
|
|
if (this.handlers.visibilityChange) {
|
|
document.removeEventListener('visibilitychange', this.handlers.visibilityChange);
|
|
}
|
|
|
|
this.handlers = {};
|
|
},
|
|
|
|
disconnect() {
|
|
this.isIntentionallyClosed = true;
|
|
this.cleanup();
|
|
this.stopHealthCheck();
|
|
},
|
|
|
|
isConnected() {
|
|
return this.ws && this.ws.readyState === WebSocket.OPEN;
|
|
}
|
|
};
|
|
|
|
window.WebSocketManager = WebSocketManager;
|
|
|
|
const CacheManager = {
|
|
maxItems: 100,
|
|
maxSize: 5 * 1024 * 1024, // 5MB
|
|
|
|
set: function(key, value, customTtl = null) {
|
|
try {
|
|
this.cleanup();
|
|
|
|
if (!value) {
|
|
console.warn('Attempted to cache null/undefined value for key:', key);
|
|
return false;
|
|
}
|
|
|
|
const item = {
|
|
value: value,
|
|
timestamp: Date.now(),
|
|
expiresAt: Date.now() + (customTtl || CACHE_DURATION)
|
|
};
|
|
|
|
try {
|
|
JSON.stringify(item);
|
|
} catch (e) {
|
|
console.error('Failed to serialize cache item:', e);
|
|
return false;
|
|
}
|
|
|
|
const itemSize = new Blob([JSON.stringify(item)]).size;
|
|
if (itemSize > this.maxSize) {
|
|
console.warn(`Cache item exceeds maximum size (${(itemSize/1024/1024).toFixed(2)}MB)`);
|
|
return false;
|
|
}
|
|
|
|
try {
|
|
localStorage.setItem(key, JSON.stringify(item));
|
|
return true;
|
|
} catch (storageError) {
|
|
if (storageError.name === 'QuotaExceededError') {
|
|
this.cleanup(true);
|
|
try {
|
|
localStorage.setItem(key, JSON.stringify(item));
|
|
return true;
|
|
} catch (retryError) {
|
|
console.error('Storage quota exceeded even after cleanup:', retryError);
|
|
return false;
|
|
}
|
|
}
|
|
throw storageError;
|
|
}
|
|
|
|
} catch (error) {
|
|
console.error('Cache set error:', error);
|
|
return false;
|
|
}
|
|
},
|
|
|
|
get: function(key) {
|
|
try {
|
|
const itemStr = localStorage.getItem(key);
|
|
if (!itemStr) {
|
|
return null;
|
|
}
|
|
|
|
let item;
|
|
try {
|
|
item = JSON.parse(itemStr);
|
|
} catch (parseError) {
|
|
console.error('Failed to parse cached item:', parseError);
|
|
localStorage.removeItem(key);
|
|
return null;
|
|
}
|
|
|
|
if (!item || typeof item.expiresAt !== 'number' || !Object.prototype.hasOwnProperty.call(item, 'value')) {
|
|
console.warn('Invalid cache item structure for key:', key);
|
|
localStorage.removeItem(key);
|
|
return null;
|
|
}
|
|
|
|
const now = Date.now();
|
|
if (now < item.expiresAt) {
|
|
return {
|
|
value: item.value,
|
|
remainingTime: item.expiresAt - now
|
|
};
|
|
}
|
|
|
|
localStorage.removeItem(key);
|
|
return null;
|
|
|
|
} catch (error) {
|
|
console.error("Cache retrieval error:", error);
|
|
try {
|
|
localStorage.removeItem(key);
|
|
} catch (removeError) {
|
|
console.error("Failed to remove invalid cache entry:", removeError);
|
|
}
|
|
return null;
|
|
}
|
|
},
|
|
|
|
cleanup: function(aggressive = false) {
|
|
const now = Date.now();
|
|
let totalSize = 0;
|
|
let itemCount = 0;
|
|
const items = [];
|
|
|
|
for (let i = 0; i < localStorage.length; i++) {
|
|
const key = localStorage.key(i);
|
|
if (!key.startsWith('offers_') && !key.startsWith('prices_')) continue;
|
|
|
|
try {
|
|
const itemStr = localStorage.getItem(key);
|
|
const size = new Blob([itemStr]).size;
|
|
const item = JSON.parse(itemStr);
|
|
|
|
if (now >= item.expiresAt) {
|
|
localStorage.removeItem(key);
|
|
continue;
|
|
}
|
|
|
|
items.push({
|
|
key,
|
|
size,
|
|
expiresAt: item.expiresAt,
|
|
timestamp: item.timestamp
|
|
});
|
|
|
|
totalSize += size;
|
|
itemCount++;
|
|
} catch (error) {
|
|
console.error("Error processing cache item:", error);
|
|
localStorage.removeItem(key);
|
|
}
|
|
}
|
|
|
|
if (aggressive || totalSize > this.maxSize || itemCount > this.maxItems) {
|
|
items.sort((a, b) => b.timestamp - a.timestamp);
|
|
|
|
while ((totalSize > this.maxSize || itemCount > this.maxItems) && items.length > 0) {
|
|
const item = items.pop();
|
|
try {
|
|
localStorage.removeItem(item.key);
|
|
totalSize -= item.size;
|
|
itemCount--;
|
|
} catch (error) {
|
|
console.error("Error removing cache item:", error);
|
|
}
|
|
}
|
|
}
|
|
|
|
return {
|
|
totalSize,
|
|
itemCount,
|
|
cleaned: items.length
|
|
};
|
|
},
|
|
|
|
clear: function() {
|
|
const keys = [];
|
|
for (let i = 0; i < localStorage.length; i++) {
|
|
const key = localStorage.key(i);
|
|
if (key.startsWith('offers_') || key.startsWith('prices_')) {
|
|
keys.push(key);
|
|
}
|
|
}
|
|
|
|
keys.forEach(key => {
|
|
try {
|
|
localStorage.removeItem(key);
|
|
} catch (error) {
|
|
console.error("Error clearing cache item:", error);
|
|
}
|
|
});
|
|
},
|
|
|
|
getStats: function() {
|
|
let totalSize = 0;
|
|
let itemCount = 0;
|
|
let expiredCount = 0;
|
|
const now = Date.now();
|
|
|
|
for (let i = 0; i < localStorage.length; i++) {
|
|
const key = localStorage.key(i);
|
|
if (!key.startsWith('offers_') && !key.startsWith('prices_')) continue;
|
|
|
|
try {
|
|
const itemStr = localStorage.getItem(key);
|
|
const size = new Blob([itemStr]).size;
|
|
const item = JSON.parse(itemStr);
|
|
|
|
totalSize += size;
|
|
itemCount++;
|
|
|
|
if (now >= item.expiresAt) {
|
|
expiredCount++;
|
|
}
|
|
} catch (error) {
|
|
console.error("Error getting cache stats:", error);
|
|
}
|
|
}
|
|
|
|
return {
|
|
totalSizeMB: (totalSize / 1024 / 1024).toFixed(2),
|
|
itemCount,
|
|
expiredCount,
|
|
utilization: ((totalSize / this.maxSize) * 100).toFixed(1) + '%'
|
|
};
|
|
}
|
|
};
|
|
|
|
window.CacheManager = CacheManager;
|
|
|
|
// Identity cache management
|
|
const IdentityManager = {
|
|
cache: new Map(),
|
|
pendingRequests: new Map(),
|
|
retryDelay: 2000,
|
|
maxRetries: 3,
|
|
cacheTimeout: 5 * 60 * 1000, // 5 minutes
|
|
|
|
async getIdentityData(address) {
|
|
|
|
const cachedData = this.getCachedIdentity(address);
|
|
if (cachedData) {
|
|
return cachedData;
|
|
}
|
|
|
|
if (this.pendingRequests.has(address)) {
|
|
return this.pendingRequests.get(address);
|
|
}
|
|
|
|
const request = this.fetchWithRetry(address);
|
|
this.pendingRequests.set(address, request);
|
|
|
|
try {
|
|
const data = await request;
|
|
this.cache.set(address, {
|
|
data,
|
|
timestamp: Date.now()
|
|
});
|
|
return data;
|
|
} finally {
|
|
this.pendingRequests.delete(address);
|
|
}
|
|
},
|
|
|
|
getCachedIdentity(address) {
|
|
const cached = this.cache.get(address);
|
|
if (cached && (Date.now() - cached.timestamp) < this.cacheTimeout) {
|
|
return cached.data;
|
|
}
|
|
return null;
|
|
},
|
|
|
|
async fetchWithRetry(address, attempt = 1) {
|
|
try {
|
|
const response = await fetch(`/json/identities/${address}`, {
|
|
signal: AbortSignal.timeout(5000)
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
|
|
return await response.json();
|
|
} catch (error) {
|
|
if (attempt >= this.maxRetries) {
|
|
console.error("An error occured:", error.message);
|
|
console.warn(`Failed to fetch identity for ${address} after ${attempt} attempts`);
|
|
return null;
|
|
}
|
|
|
|
await new Promise(resolve => setTimeout(resolve, this.retryDelay * attempt));
|
|
return this.fetchWithRetry(address, attempt + 1);
|
|
}
|
|
},
|
|
|
|
clearCache() {
|
|
this.cache.clear();
|
|
this.pendingRequests.clear();
|
|
}
|
|
};
|
|
|
|
window.tableRateModule = {
|
|
coinNameToSymbol: {
|
|
'Bitcoin': 'BTC',
|
|
'Particl': 'PART',
|
|
'Particl Blind': 'PART',
|
|
'Particl Anon': 'PART',
|
|
'Monero': 'XMR',
|
|
'Wownero': 'WOW',
|
|
'Litecoin': 'LTC',
|
|
'Firo': 'FIRO',
|
|
'Dash': 'DASH',
|
|
'PIVX': 'PIVX',
|
|
'Decred': 'DCR',
|
|
'Zano': 'ZANO',
|
|
'Bitcoin Cash': 'BCH',
|
|
'Dogecoin': 'DOGE'
|
|
},
|
|
|
|
cache: {},
|
|
processedOffers: new Set(),
|
|
|
|
getCachedValue(key) {
|
|
const cachedItem = localStorage.getItem(key);
|
|
if (cachedItem) {
|
|
const parsedItem = JSON.parse(cachedItem);
|
|
if (Date.now() < parsedItem.expiry) {
|
|
return parsedItem.value;
|
|
} else {
|
|
localStorage.removeItem(key);
|
|
}
|
|
}
|
|
return null;
|
|
},
|
|
|
|
setCachedValue(key, value, ttl = 900000) {
|
|
const item = {
|
|
value: value,
|
|
expiry: Date.now() + ttl,
|
|
};
|
|
localStorage.setItem(key, JSON.stringify(item));
|
|
},
|
|
|
|
setFallbackValue(coinSymbol, value) {
|
|
this.setCachedValue(`fallback_${coinSymbol}_usd`, value, 24 * 60 * 60 * 1000);
|
|
},
|
|
|
|
isNewOffer(offerId) {
|
|
if (this.processedOffers.has(offerId)) {
|
|
return false;
|
|
}
|
|
this.processedOffers.add(offerId);
|
|
return true;
|
|
},
|
|
|
|
formatUSD(value) {
|
|
if (Math.abs(value) < 0.000001) {
|
|
return value.toExponential(8) + ' USD';
|
|
} else if (Math.abs(value) < 0.01) {
|
|
return value.toFixed(8) + ' USD';
|
|
} else {
|
|
return value.toFixed(2) + ' USD';
|
|
}
|
|
},
|
|
|
|
formatNumber(value, decimals) {
|
|
if (Math.abs(value) < 0.000001) {
|
|
return value.toExponential(decimals);
|
|
} else if (Math.abs(value) < 0.01) {
|
|
return value.toFixed(decimals);
|
|
} else {
|
|
return value.toFixed(Math.min(2, decimals));
|
|
}
|
|
},
|
|
|
|
getFallbackValue(coinSymbol) {
|
|
const value = localStorage.getItem(`fallback_${coinSymbol}_usd`);
|
|
return value ? parseFloat(value) : null;
|
|
},
|
|
|
|
initializeTable() {
|
|
document.querySelectorAll('.coinname-value').forEach(coinNameValue => {
|
|
const coinFullNameOrSymbol = coinNameValue.getAttribute('data-coinname');
|
|
if (!coinFullNameOrSymbol || coinFullNameOrSymbol === 'Unknown') {
|
|
//console.warn('Missing or unknown coin name/symbol in data-coinname attribute');
|
|
return;
|
|
}
|
|
coinNameValue.classList.remove('hidden');
|
|
if (!coinNameValue.textContent.trim()) {
|
|
coinNameValue.textContent = 'N/A';
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.usd-value').forEach(usdValue => {
|
|
if (!usdValue.textContent.trim()) {
|
|
usdValue.textContent = 'N/A';
|
|
}
|
|
});
|
|
|
|
document.querySelectorAll('.profit-loss').forEach(profitLoss => {
|
|
if (!profitLoss.textContent.trim() || profitLoss.textContent === 'Calculating...') {
|
|
profitLoss.textContent = 'N/A';
|
|
}
|
|
});
|
|
},
|
|
|
|
init() {
|
|
//console.log('Initializing TableRateModule');
|
|
this.initializeTable();
|
|
}
|
|
};
|
|
|
|
// CORE SYSTEM FUNCTIONS
|
|
function initializeTableRateModule() {
|
|
if (typeof window.tableRateModule !== 'undefined') {
|
|
tableRateModule = window.tableRateModule;
|
|
//console.log('tableRateModule loaded successfully');
|
|
return true;
|
|
} else {
|
|
//console.warn('tableRateModule not found. Waiting for it to load...');
|
|
return false;
|
|
}
|
|
}
|
|
|
|
function continueInitialization() {
|
|
updateCoinFilterImages();
|
|
fetchOffers().then(() => {
|
|
applyFilters();
|
|
if (!isSentOffers) {
|
|
return;
|
|
}
|
|
});
|
|
|
|
const listingLabel = document.querySelector('span[data-listing-label]');
|
|
if (listingLabel) {
|
|
listingLabel.textContent = isSentOffers ? 'Total Listings: ' : 'Network Listings: ';
|
|
}
|
|
//console.log('Initialization completed');
|
|
}
|
|
|
|
function initializeTooltips() {
|
|
if (typeof Tooltip === 'undefined') {
|
|
console.warn('Tooltip is not defined. Make sure the required library is loaded.');
|
|
return;
|
|
}
|
|
|
|
const tooltipElements = document.querySelectorAll('[data-tooltip-target]');
|
|
tooltipElements.forEach((el) => {
|
|
const tooltipId = el.getAttribute('data-tooltip-target');
|
|
const tooltipElement = document.getElementById(tooltipId);
|
|
if (tooltipElement) {
|
|
new Tooltip(tooltipElement, el);
|
|
}
|
|
});
|
|
}
|
|
|
|
// DATA PROCESSING FUNCTIONS
|
|
function getValidOffers() {
|
|
if (!jsonData) {
|
|
//console.warn('jsonData is undefined or null');
|
|
return [];
|
|
}
|
|
|
|
const filteredData = filterAndSortData();
|
|
//console.log(`getValidOffers: Found ${filteredData.length} valid offers`);
|
|
return filteredData;
|
|
}
|
|
|
|
function filterAndSortData() {
|
|
//console.log('[Debug] Starting filter with data length:', originalJsonData.length);
|
|
|
|
const formData = new FormData(filterForm);
|
|
const filters = Object.fromEntries(formData);
|
|
//console.log('[Debug] Active filters:', filters);
|
|
|
|
if (filters.coin_to !== 'any') {
|
|
filters.coin_to = coinIdToName[filters.coin_to] || filters.coin_to;
|
|
}
|
|
if (filters.coin_from !== 'any') {
|
|
filters.coin_from = coinIdToName[filters.coin_from] || filters.coin_from;
|
|
}
|
|
|
|
let filteredData = [...originalJsonData];
|
|
|
|
const sentFromFilter = filters.sent_from || 'any';
|
|
|
|
filteredData = filteredData.filter(offer => {
|
|
if (sentFromFilter === 'public') {
|
|
return offer.is_public;
|
|
} else if (sentFromFilter === 'private') {
|
|
return !offer.is_public;
|
|
}
|
|
return true;
|
|
});
|
|
|
|
filteredData = filteredData.filter(offer => {
|
|
if (!isSentOffers && isOfferExpired(offer)) {
|
|
return false;
|
|
}
|
|
|
|
const coinFrom = (offer.coin_from || '').toLowerCase();
|
|
const coinTo = (offer.coin_to || '').toLowerCase();
|
|
|
|
if (filters.coin_to !== 'any') {
|
|
if (!coinMatches(coinTo, filters.coin_to)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (filters.coin_from !== 'any') {
|
|
if (!coinMatches(coinFrom, filters.coin_from)) {
|
|
return false;
|
|
}
|
|
}
|
|
|
|
if (isSentOffers && filters.status && filters.status !== 'any') {
|
|
const currentTime = Math.floor(Date.now() / 1000);
|
|
const isExpired = offer.expire_at <= currentTime;
|
|
const isRevoked = Boolean(offer.is_revoked);
|
|
|
|
switch (filters.status) {
|
|
case 'active':
|
|
return !isExpired && !isRevoked;
|
|
case 'expired':
|
|
return isExpired && !isRevoked;
|
|
case 'revoked':
|
|
return isRevoked;
|
|
default:
|
|
return true;
|
|
}
|
|
}
|
|
|
|
return true;
|
|
});
|
|
|
|
if (currentSortColumn !== null) {
|
|
filteredData.sort((a, b) => {
|
|
let comparison = 0;
|
|
|
|
switch(currentSortColumn) {
|
|
case 0: // Time
|
|
comparison = a.created_at - b.created_at;
|
|
break;
|
|
case 5: // Rate
|
|
comparison = parseFloat(a.rate) - parseFloat(b.rate);
|
|
break;
|
|
case 6: // Market +/-
|
|
const aFromSymbol = getCoinSymbolLowercase(a.coin_from);
|
|
const aToSymbol = getCoinSymbolLowercase(a.coin_to);
|
|
const bFromSymbol = getCoinSymbolLowercase(b.coin_from);
|
|
const bToSymbol = getCoinSymbolLowercase(b.coin_to);
|
|
|
|
const aFromPrice = latestPrices[aFromSymbol]?.usd || 0;
|
|
const aToPrice = latestPrices[aToSymbol]?.usd || 0;
|
|
const bFromPrice = latestPrices[bFromSymbol]?.usd || 0;
|
|
const bToPrice = latestPrices[bToSymbol]?.usd || 0;
|
|
|
|
const aMarketRate = aToPrice / aFromPrice;
|
|
const bMarketRate = bToPrice / bFromPrice;
|
|
|
|
const aOfferedRate = parseFloat(a.rate);
|
|
const bOfferedRate = parseFloat(b.rate);
|
|
|
|
const aPercentDiff = ((aOfferedRate - aMarketRate) / aMarketRate) * 100;
|
|
const bPercentDiff = ((bOfferedRate - bMarketRate) / bMarketRate) * 100;
|
|
|
|
comparison = aPercentDiff - bPercentDiff;
|
|
break;
|
|
case 7: // Trade
|
|
comparison = a.offer_id.localeCompare(b.offer_id);
|
|
break;
|
|
}
|
|
return currentSortDirection === 'desc' ? -comparison : comparison;
|
|
});
|
|
}
|
|
//console.log(`[Debug] Filtered data length: ${filteredData.length}`);
|
|
return filteredData;
|
|
}
|
|
|
|
async function calculateProfitLoss(fromCoin, toCoin, fromAmount, toAmount, isOwnOffer) {
|
|
return new Promise((resolve) => {
|
|
if (!latestPrices) {
|
|
console.error('Latest prices not available. Unable to calculate profit/loss.');
|
|
resolve(null);
|
|
return;
|
|
}
|
|
|
|
const getPriceKey = (coin) => {
|
|
const lowerCoin = coin.toLowerCase();
|
|
if (lowerCoin === 'firo' || lowerCoin === 'zcoin') {
|
|
return 'zcoin';
|
|
}
|
|
if (lowerCoin === 'bitcoin cash') {
|
|
return 'bitcoin-cash';
|
|
}
|
|
if (lowerCoin === 'particl anon' || lowerCoin === 'particl blind') {
|
|
return 'particl';
|
|
}
|
|
return coinNameToSymbol[coin] || lowerCoin;
|
|
};
|
|
|
|
const fromSymbol = getPriceKey(fromCoin);
|
|
const toSymbol = getPriceKey(toCoin);
|
|
let fromPriceUSD = latestPrices[fromSymbol]?.usd;
|
|
let toPriceUSD = latestPrices[toSymbol]?.usd;
|
|
|
|
if (!fromPriceUSD || !toPriceUSD) {
|
|
fromPriceUSD = tableRateModule.getFallbackValue(fromSymbol);
|
|
toPriceUSD = tableRateModule.getFallbackValue(toSymbol);
|
|
}
|
|
if (!fromPriceUSD || !toPriceUSD || isNaN(fromPriceUSD) || isNaN(toPriceUSD)) {
|
|
resolve(null);
|
|
return;
|
|
}
|
|
const fromValueUSD = fromAmount * fromPriceUSD;
|
|
const toValueUSD = toAmount * toPriceUSD;
|
|
if (isNaN(fromValueUSD) || isNaN(toValueUSD) || fromValueUSD === 0 || toValueUSD === 0) {
|
|
resolve(null);
|
|
return;
|
|
}
|
|
let percentDiff;
|
|
if (isOwnOffer) {
|
|
percentDiff = ((toValueUSD / fromValueUSD) - 1) * 100;
|
|
} else {
|
|
percentDiff = ((fromValueUSD / toValueUSD) - 1) * 100;
|
|
}
|
|
if (isNaN(percentDiff)) {
|
|
resolve(null);
|
|
return;
|
|
}
|
|
resolve(percentDiff);
|
|
});
|
|
}
|
|
|
|
function getEmptyPriceData() {
|
|
return {
|
|
'bitcoin': { usd: null, btc: null },
|
|
'bitcoin-cash': { usd: null, btc: null },
|
|
'dash': { usd: null, btc: null },
|
|
'dogecoin': { usd: null, btc: null },
|
|
'decred': { usd: null, btc: null },
|
|
'litecoin': { usd: null, btc: null },
|
|
'particl': { usd: null, btc: null },
|
|
'pivx': { usd: null, btc: null },
|
|
'monero': { usd: null, btc: null },
|
|
'zano': { usd: null, btc: null },
|
|
'wownero': { usd: null, btc: null },
|
|
'zcoin': { usd: null, btc: null }
|
|
};
|
|
}
|
|
|
|
async function fetchLatestPrices() {
|
|
if (WebSocketManager.isPageHidden || WebSocketManager.priceUpdatePaused) {
|
|
const cachedData = CacheManager.get('prices_coingecko');
|
|
return cachedData?.value || getEmptyPriceData();
|
|
}
|
|
|
|
const PRICES_CACHE_KEY = 'prices_coingecko';
|
|
const minRequestInterval = 60000;
|
|
const currentTime = Date.now();
|
|
|
|
if (!window.isManualRefresh) {
|
|
const lastRequestTime = window.lastPriceRequest || 0;
|
|
if (currentTime - lastRequestTime < minRequestInterval) {
|
|
const cachedData = CacheManager.get(PRICES_CACHE_KEY);
|
|
if (cachedData) {
|
|
return cachedData.value;
|
|
}
|
|
}
|
|
}
|
|
window.lastPriceRequest = currentTime;
|
|
|
|
if (!window.isManualRefresh) {
|
|
const cachedData = CacheManager.get(PRICES_CACHE_KEY);
|
|
if (cachedData && cachedData.remainingTime > 60000) {
|
|
latestPrices = cachedData.value;
|
|
Object.entries(cachedData.value).forEach(([coin, prices]) => {
|
|
if (prices.usd) {
|
|
tableRateModule.setFallbackValue(coin, prices.usd);
|
|
}
|
|
});
|
|
return cachedData.value;
|
|
}
|
|
}
|
|
|
|
try {
|
|
const existingCache = CacheManager.get(PRICES_CACHE_KEY, true);
|
|
const fallbackData = existingCache ? existingCache.value : null;
|
|
const url = `${offersConfig.apiEndpoints.coinGecko}/simple/price?ids=bitcoin,bitcoin-cash,dash,dogecoin,decred,litecoin,particl,pivx,monero,zano,wownero,zcoin&vs_currencies=USD,BTC&api_key=${offersConfig.apiKeys.coinGecko}`;
|
|
|
|
const response = await fetch('/json/readurl', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({
|
|
url: url,
|
|
headers: {
|
|
'User-Agent': 'Mozilla/5.0',
|
|
'Accept': 'application/json',
|
|
'Accept-Language': 'en-US,en;q=0.5'
|
|
}
|
|
})
|
|
});
|
|
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP Error: ${response.status} ${response.statusText}`);
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (data.Error) {
|
|
if (fallbackData) {
|
|
return fallbackData;
|
|
}
|
|
throw new Error(data.Error);
|
|
}
|
|
|
|
if (data && Object.keys(data).length > 0) {
|
|
latestPrices = data;
|
|
CacheManager.set(PRICES_CACHE_KEY, data, CACHE_DURATION);
|
|
|
|
Object.entries(data).forEach(([coin, prices]) => {
|
|
if (prices.usd) {
|
|
tableRateModule.setFallbackValue(coin, prices.usd);
|
|
}
|
|
});
|
|
return data;
|
|
}
|
|
|
|
if (fallbackData) {
|
|
return fallbackData;
|
|
}
|
|
|
|
const fallbackPrices = {};
|
|
Object.keys(getEmptyPriceData()).forEach(coin => {
|
|
const fallbackValue = tableRateModule.getFallbackValue(coin);
|
|
if (fallbackValue !== null) {
|
|
fallbackPrices[coin] = { usd: fallbackValue, btc: null };
|
|
}
|
|
});
|
|
|
|
if (Object.keys(fallbackPrices).length > 0) {
|
|
return fallbackPrices;
|
|
}
|
|
|
|
return null;
|
|
} catch (error) {
|
|
const fallbackPrices = {};
|
|
Object.keys(getEmptyPriceData()).forEach(coin => {
|
|
const fallbackValue = tableRateModule.getFallbackValue(coin);
|
|
if (fallbackValue !== null) {
|
|
fallbackPrices[coin] = { usd: fallbackValue, btc: null };
|
|
}
|
|
});
|
|
return Object.keys(fallbackPrices).length > 0 ? fallbackPrices : null;
|
|
} finally {
|
|
window.isManualRefresh = false;
|
|
}
|
|
}
|
|
|
|
async function fetchOffers() {
|
|
const refreshButton = document.getElementById('refreshOffers');
|
|
const refreshIcon = document.getElementById('refreshIcon');
|
|
const refreshText = document.getElementById('refreshText');
|
|
|
|
try {
|
|
refreshButton.disabled = true;
|
|
refreshIcon.classList.add('animate-spin');
|
|
refreshText.textContent = 'Refreshing...';
|
|
refreshButton.classList.add('opacity-75', 'cursor-wait');
|
|
|
|
const endpoint = isSentOffers ? '/json/sentoffers' : '/json/offers';
|
|
const response = await fetch(endpoint);
|
|
const data = await response.json();
|
|
|
|
jsonData = formatInitialData(data);
|
|
originalJsonData = [...jsonData];
|
|
|
|
await updateOffersTable();
|
|
updateJsonView();
|
|
updatePaginationInfo();
|
|
|
|
} catch (error) {
|
|
console.error('[Debug] Error fetching offers:', error);
|
|
ui.displayErrorMessage('Failed to fetch offers. Please try again later.');
|
|
} finally {
|
|
stopRefreshAnimation();
|
|
}
|
|
}
|
|
|
|
function formatInitialData(data) {
|
|
return data.map(offer => ({
|
|
offer_id: String(offer.offer_id || ''),
|
|
swap_type: String(offer.swap_type || 'N/A'),
|
|
addr_from: String(offer.addr_from || ''),
|
|
addr_to: String(offer.addr_to || ''),
|
|
coin_from: String(offer.coin_from || ''),
|
|
coin_to: String(offer.coin_to || ''),
|
|
amount_from: String(offer.amount_from || '0'),
|
|
amount_to: String(offer.amount_to || '0'),
|
|
rate: String(offer.rate || '0'),
|
|
created_at: Number(offer.created_at || 0),
|
|
expire_at: Number(offer.expire_at || 0),
|
|
is_own_offer: Boolean(offer.is_own_offer),
|
|
amount_negotiable: Boolean(offer.amount_negotiable),
|
|
is_revoked: Boolean(offer.is_revoked),
|
|
is_public: offer.is_public !== undefined ? Boolean(offer.is_public) : false,
|
|
unique_id: `${offer.offer_id}_${offer.created_at}_${offer.coin_from}_${offer.coin_to}`
|
|
}));
|
|
}
|
|
|
|
// UI COMPONENT FUNCTIONS
|
|
function updateConnectionStatus(status) {
|
|
const dot = document.getElementById('status-dot');
|
|
const text = document.getElementById('status-text');
|
|
|
|
if (!dot || !text) {
|
|
//console.warn('Status indicators not found in DOM');
|
|
return;
|
|
}
|
|
|
|
switch(status) {
|
|
case 'connected':
|
|
dot.className = 'w-2.5 h-2.5 rounded-full bg-green-500 mr-2';
|
|
text.textContent = 'Connected';
|
|
text.className = 'text-sm text-green-500';
|
|
break;
|
|
case 'disconnected':
|
|
dot.className = 'w-2.5 h-2.5 rounded-full bg-red-500 mr-2';
|
|
text.textContent = 'Disconnected - Reconnecting...';
|
|
text.className = 'text-sm text-red-500';
|
|
break;
|
|
case 'error':
|
|
dot.className = 'w-2.5 h-2.5 rounded-full bg-yellow-500 mr-2';
|
|
text.textContent = 'Connection Error';
|
|
text.className = 'text-sm text-yellow-500';
|
|
break;
|
|
default:
|
|
dot.className = 'w-2.5 h-2.5 rounded-full bg-gray-500 mr-2';
|
|
text.textContent = 'Connecting...';
|
|
text.className = 'text-sm text-gray-500';
|
|
}
|
|
}
|
|
|
|
function updateRowTimes() {
|
|
requestAnimationFrame(() => {
|
|
const rows = document.querySelectorAll('[data-offer-id]');
|
|
rows.forEach(row => {
|
|
const offerId = row.getAttribute('data-offer-id');
|
|
const offer = jsonData.find(o => o.offer_id === offerId);
|
|
if (!offer) return;
|
|
|
|
const newPostedTime = formatTime(offer.created_at, true);
|
|
const newExpiresIn = formatTimeLeft(offer.expire_at);
|
|
|
|
const postedElement = row.querySelector('.text-xs:first-child');
|
|
const expiresElement = row.querySelector('.text-xs:last-child');
|
|
|
|
if (postedElement && postedElement.textContent !== `Posted: ${newPostedTime}`) {
|
|
postedElement.textContent = `Posted: ${newPostedTime}`;
|
|
}
|
|
if (expiresElement && expiresElement.textContent !== `Expires in: ${newExpiresIn}`) {
|
|
expiresElement.textContent = `Expires in: ${newExpiresIn}`;
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
function updateJsonView() {
|
|
jsonContent.textContent = JSON.stringify(jsonData, null, 2);
|
|
}
|
|
|
|
function updateLastRefreshTime() {
|
|
if (lastRefreshTimeSpan) {
|
|
lastRefreshTimeSpan.textContent = lastRefreshTime ? new Date(lastRefreshTime).toLocaleTimeString() : 'Never';
|
|
}
|
|
}
|
|
|
|
function stopRefreshAnimation() {
|
|
const refreshButton = document.getElementById('refreshOffers');
|
|
const refreshIcon = document.getElementById('refreshIcon');
|
|
const refreshText = document.getElementById('refreshText');
|
|
|
|
if (refreshButton) {
|
|
refreshButton.disabled = false;
|
|
refreshButton.classList.remove('opacity-75', 'cursor-wait');
|
|
}
|
|
if (refreshIcon) {
|
|
refreshIcon.classList.remove('animate-spin');
|
|
}
|
|
if (refreshText) {
|
|
refreshText.textContent = 'Refresh';
|
|
}
|
|
}
|
|
|
|
function updatePaginationInfo() {
|
|
const validOffers = getValidOffers();
|
|
const totalItems = validOffers.length;
|
|
const totalPages = Math.max(1, Math.ceil(totalItems / itemsPerPage));
|
|
|
|
currentPage = Math.max(1, Math.min(currentPage, totalPages));
|
|
|
|
currentPageSpan.textContent = currentPage;
|
|
totalPagesSpan.textContent = totalPages;
|
|
|
|
const showPrev = currentPage > 1;
|
|
const showNext = currentPage < totalPages && totalItems > 0;
|
|
|
|
prevPageButton.style.display = showPrev ? 'inline-flex' : 'none';
|
|
nextPageButton.style.display = showNext ? 'inline-flex' : 'none';
|
|
|
|
if (lastRefreshTime) {
|
|
lastRefreshTimeSpan.textContent = new Date(lastRefreshTime).toLocaleTimeString();
|
|
}
|
|
|
|
if (newEntriesCountSpan) {
|
|
newEntriesCountSpan.textContent = totalItems;
|
|
}
|
|
}
|
|
|
|
function updatePaginationControls(totalPages) {
|
|
prevPageButton.style.display = currentPage > 1 ? 'inline-flex' : 'none';
|
|
nextPageButton.style.display = currentPage < totalPages ? 'inline-flex' : 'none';
|
|
currentPageSpan.textContent = currentPage;
|
|
totalPagesSpan.textContent = totalPages;
|
|
}
|
|
|
|
function updateProfitLoss(row, fromCoin, toCoin, fromAmount, toAmount, isOwnOffer) {
|
|
const profitLossElement = row.querySelector('.profit-loss');
|
|
if (!profitLossElement) {
|
|
return;
|
|
}
|
|
|
|
if (!fromCoin || !toCoin) {
|
|
profitLossElement.textContent = 'N/A';
|
|
profitLossElement.className = 'profit-loss text-lg font-bold text-gray-300';
|
|
return;
|
|
}
|
|
|
|
calculateProfitLoss(fromCoin, toCoin, fromAmount, toAmount, isOwnOffer)
|
|
.then(percentDiff => {
|
|
if (percentDiff === null || isNaN(percentDiff)) {
|
|
profitLossElement.textContent = 'N/A';
|
|
profitLossElement.className = 'profit-loss text-lg font-bold text-gray-300';
|
|
return;
|
|
}
|
|
|
|
const formattedPercentDiff = percentDiff.toFixed(2);
|
|
const percentDiffDisplay = formattedPercentDiff === "0.00" ? "0.00" :
|
|
(percentDiff > 0 ? `+${formattedPercentDiff}` : formattedPercentDiff);
|
|
|
|
const colorClass = getProfitColorClass(percentDiff);
|
|
profitLossElement.textContent = `${percentDiffDisplay}%`;
|
|
profitLossElement.className = `profit-loss text-lg font-bold ${colorClass}`;
|
|
|
|
// Update tooltip if it exists
|
|
const tooltipId = `percentage-tooltip-${row.getAttribute('data-offer-id')}`;
|
|
const tooltipElement = document.getElementById(tooltipId);
|
|
if (tooltipElement) {
|
|
const tooltipContent = createTooltipContent(isSentOffers || isOwnOffer, fromCoin, toCoin, fromAmount, toAmount);
|
|
tooltipElement.innerHTML = `
|
|
<div class="tooltip-content">
|
|
${tooltipContent}
|
|
</div>
|
|
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
console.error('Error in updateProfitLoss:', error);
|
|
profitLossElement.textContent = 'N/A';
|
|
profitLossElement.className = 'profit-loss text-lg font-bold text-gray-300';
|
|
});
|
|
}
|
|
|
|
function updateCoinFilterImages() {
|
|
const coinToSelect = document.getElementById('coin_to');
|
|
const coinFromSelect = document.getElementById('coin_from');
|
|
const coinToButton = document.getElementById('coin_to_button');
|
|
const coinFromButton = document.getElementById('coin_from_button');
|
|
|
|
function updateButtonImage(select, button) {
|
|
const selectedOption = select.options[select.selectedIndex];
|
|
const imagePath = selectedOption.getAttribute('data-image');
|
|
if (imagePath && select.value !== 'any') {
|
|
button.style.backgroundImage = `url(${imagePath})`;
|
|
button.style.backgroundSize = 'contain';
|
|
button.style.backgroundRepeat = 'no-repeat';
|
|
button.style.backgroundPosition = 'center';
|
|
} else {
|
|
button.style.backgroundImage = 'none';
|
|
}
|
|
}
|
|
|
|
updateButtonImage(coinToSelect, coinToButton);
|
|
updateButtonImage(coinFromSelect, coinFromButton);
|
|
}
|
|
|
|
function updateClearFiltersButton() {
|
|
const clearButton = document.getElementById('clearFilters');
|
|
if (clearButton) {
|
|
const hasFilters = hasActiveFilters();
|
|
clearButton.classList.toggle('opacity-50', !hasFilters);
|
|
clearButton.disabled = !hasFilters;
|
|
|
|
if (hasFilters) {
|
|
clearButton.classList.add('hover:bg-green-600', 'hover:text-white');
|
|
clearButton.classList.remove('cursor-not-allowed');
|
|
} else {
|
|
clearButton.classList.remove('hover:bg-green-600', 'hover:text-white');
|
|
clearButton.classList.add('cursor-not-allowed');
|
|
}
|
|
}
|
|
}
|
|
|
|
function cleanupRow(row) {
|
|
EventManager.removeAll(row);
|
|
|
|
const tooltips = row.querySelectorAll('[data-tooltip-target]');
|
|
tooltips.forEach(tooltip => {
|
|
const tooltipId = tooltip.getAttribute('data-tooltip-target');
|
|
const tooltipElement = document.getElementById(tooltipId);
|
|
if (tooltipElement) {
|
|
tooltipElement.remove();
|
|
}
|
|
});
|
|
}
|
|
|
|
function cleanupTable() {
|
|
EventManager.clearAll();
|
|
|
|
if (offersBody) {
|
|
const existingRows = offersBody.querySelectorAll('tr');
|
|
existingRows.forEach(row => {
|
|
cleanupRow(row);
|
|
});
|
|
offersBody.innerHTML = '';
|
|
}
|
|
}
|
|
|
|
function handleNoOffersScenario() {
|
|
const formData = new FormData(filterForm);
|
|
const filters = Object.fromEntries(formData);
|
|
const hasActiveFilters = filters.coin_to !== 'any' ||
|
|
filters.coin_from !== 'any' ||
|
|
(filters.status && filters.status !== 'any');
|
|
|
|
stopRefreshAnimation();
|
|
|
|
const existingRows = offersBody.querySelectorAll('tr');
|
|
existingRows.forEach(row => {
|
|
cleanupRow(row);
|
|
});
|
|
|
|
if (hasActiveFilters) {
|
|
offersBody.innerHTML = `
|
|
<tr>
|
|
<td colspan="9" class="text-center py-8">
|
|
<div class="flex items-center justify-center text-gray-500 dark:text-white">
|
|
No offers match the selected filters. Try different filter options or
|
|
<button onclick="clearFilters()" class="ml-1 text-blue-500 hover:text-blue-700 font-semibold">
|
|
clear filters
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>`;
|
|
} else {
|
|
offersBody.innerHTML = `
|
|
<tr>
|
|
<td colspan="9" class="text-center py-8 text-gray-500 dark:text-white">
|
|
No active offers available.
|
|
</td>
|
|
</tr>`;
|
|
}
|
|
}
|
|
|
|
async function updateOffersTable() {
|
|
try {
|
|
const PRICES_CACHE_KEY = 'prices_coingecko';
|
|
const cachedPrices = CacheManager.get(PRICES_CACHE_KEY);
|
|
latestPrices = cachedPrices?.value || getEmptyPriceData();
|
|
|
|
const validOffers = getValidOffers();
|
|
const startIndex = (currentPage - 1) * itemsPerPage;
|
|
const endIndex = Math.min(startIndex + itemsPerPage, validOffers.length);
|
|
const itemsToDisplay = validOffers.slice(startIndex, endIndex);
|
|
|
|
fetchLatestPrices().then(freshPrices => {
|
|
if (freshPrices) {
|
|
latestPrices = freshPrices;
|
|
updateProfitLossDisplays();
|
|
}
|
|
}).catch(error => {
|
|
console.warn('Price fetch failed:', error);
|
|
});
|
|
|
|
const BATCH_SIZE = 5;
|
|
const identities = [];
|
|
|
|
for (let i = 0; i < itemsToDisplay.length; i += BATCH_SIZE) {
|
|
const batch = itemsToDisplay.slice(i, i + BATCH_SIZE);
|
|
const batchPromises = batch.map(offer =>
|
|
offer.addr_from ? IdentityManager.getIdentityData(offer.addr_from) : Promise.resolve(null)
|
|
);
|
|
|
|
const batchResults = await Promise.all(batchPromises);
|
|
identities.push(...batchResults);
|
|
|
|
if (i + BATCH_SIZE < itemsToDisplay.length) {
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
}
|
|
}
|
|
|
|
if (validOffers.length === 0) {
|
|
handleNoOffersScenario();
|
|
return;
|
|
}
|
|
|
|
const totalPages = Math.max(1, Math.ceil(validOffers.length / itemsPerPage));
|
|
currentPage = Math.min(currentPage, totalPages);
|
|
|
|
const fragment = document.createDocumentFragment();
|
|
|
|
const existingRows = offersBody.querySelectorAll('tr');
|
|
existingRows.forEach(row => {
|
|
cleanupRow(row);
|
|
});
|
|
|
|
itemsToDisplay.forEach((offer, index) => {
|
|
const identity = identities[index];
|
|
const row = createTableRow(offer, identity);
|
|
if (row) {
|
|
fragment.appendChild(row);
|
|
}
|
|
});
|
|
|
|
offersBody.textContent = '';
|
|
offersBody.appendChild(fragment);
|
|
|
|
requestAnimationFrame(() => {
|
|
initializeTooltips();
|
|
updateRowTimes();
|
|
updatePaginationControls(totalPages);
|
|
|
|
if (tableRateModule?.initializeTable) {
|
|
tableRateModule.initializeTable();
|
|
}
|
|
});
|
|
|
|
lastRefreshTime = Date.now();
|
|
updateLastRefreshTime();
|
|
|
|
} catch (error) {
|
|
console.error('[Debug] Error in updateOffersTable:', error);
|
|
handleTableError();
|
|
|
|
try {
|
|
const cachedOffers = CacheManager.get('offers_cached');
|
|
if (cachedOffers?.value) {
|
|
console.log('Recovering with cached offers data');
|
|
jsonData = cachedOffers.value;
|
|
updateOffersTable();
|
|
}
|
|
} catch (recoveryError) {
|
|
console.error('Recovery attempt failed:', recoveryError);
|
|
}
|
|
}
|
|
}
|
|
|
|
function updateProfitLossDisplays() {
|
|
const rows = document.querySelectorAll('[data-offer-id]');
|
|
rows.forEach(row => {
|
|
const offerId = row.getAttribute('data-offer-id');
|
|
const offer = jsonData.find(o => o.offer_id === offerId);
|
|
if (!offer) return;
|
|
|
|
const fromAmount = parseFloat(offer.amount_from) || 0;
|
|
const toAmount = parseFloat(offer.amount_to) || 0;
|
|
updateProfitLoss(row, offer.coin_from, offer.coin_to, fromAmount, toAmount, offer.is_own_offer);
|
|
|
|
const rateTooltipId = `tooltip-rate-${offerId}`;
|
|
const rateTooltip = document.getElementById(rateTooltipId);
|
|
if (rateTooltip) {
|
|
const tooltipContent = createCombinedRateTooltip(offer, offer.coin_from, offer.coin_to, offer.is_own_offer);
|
|
rateTooltip.innerHTML = tooltipContent;
|
|
}
|
|
});
|
|
}
|
|
|
|
function handleTableError() {
|
|
offersBody.innerHTML = `
|
|
<tr>
|
|
<td colspan="8" class="text-center py-4 text-gray-500">
|
|
<div class="flex flex-col items-center justify-center gap-2">
|
|
<span>An error occurred while updating the table.</span>
|
|
<span class="text-sm">The table will continue to function with cached data.</span>
|
|
</div>
|
|
</td>
|
|
</tr>`;
|
|
}
|
|
|
|
function getIdentityInfo(address, identity) {
|
|
if (!identity) {
|
|
return {
|
|
displayAddr: address ? `${address.substring(0, 10)}...` : 'Unspecified',
|
|
fullAddress: address || '',
|
|
label: '',
|
|
note: '',
|
|
automationOverride: 0,
|
|
stats: {
|
|
sentBidsSuccessful: 0,
|
|
recvBidsSuccessful: 0,
|
|
sentBidsRejected: 0,
|
|
recvBidsRejected: 0,
|
|
sentBidsFailed: 0,
|
|
recvBidsFailed: 0
|
|
}
|
|
};
|
|
}
|
|
|
|
return {
|
|
displayAddr: address ? `${address.substring(0, 10)}...` : 'Unspecified',
|
|
fullAddress: address || '',
|
|
label: identity.label || '',
|
|
note: identity.note || '',
|
|
automationOverride: identity.automation_override || 0,
|
|
stats: {
|
|
sentBidsSuccessful: identity.num_sent_bids_successful || 0,
|
|
recvBidsSuccessful: identity.num_recv_bids_successful || 0,
|
|
sentBidsRejected: identity.num_sent_bids_rejected || 0,
|
|
recvBidsRejected: identity.num_recv_bids_rejected || 0,
|
|
sentBidsFailed: identity.num_sent_bids_failed || 0,
|
|
recvBidsFailed: identity.num_recv_bids_failed || 0
|
|
}
|
|
};
|
|
}
|
|
|
|
function createTableRow(offer, identity = null) {
|
|
const row = document.createElement('tr');
|
|
const uniqueId = `${offer.offer_id}_${offer.created_at}`;
|
|
|
|
row.className = 'relative opacity-100 text-gray-500 dark:text-gray-100 hover:bg-coolGray-200 dark:hover:bg-gray-600';
|
|
row.setAttribute('data-offer-id', uniqueId);
|
|
|
|
const {
|
|
coin_from: coinFrom,
|
|
coin_to: coinTo,
|
|
created_at: createdAt,
|
|
expire_at: expireAt,
|
|
amount_from: amountFrom,
|
|
amount_to: amountTo,
|
|
is_own_offer: isOwnOffer,
|
|
is_revoked: isRevoked,
|
|
is_public: isPublic
|
|
} = offer;
|
|
|
|
const coinFromSymbol = coinNameToSymbol[coinFrom] || coinFrom.toLowerCase();
|
|
const coinToSymbol = coinNameToSymbol[coinTo] || coinTo.toLowerCase();
|
|
const coinFromDisplay = getDisplayName(coinFrom);
|
|
const coinToDisplay = getDisplayName(coinTo);
|
|
const postedTime = formatTime(createdAt, true);
|
|
const expiresIn = formatTime(expireAt);
|
|
|
|
const currentTime = Math.floor(Date.now() / 1000);
|
|
const isActuallyExpired = currentTime > expireAt;
|
|
const fromAmount = parseFloat(amountFrom) || 0;
|
|
const toAmount = parseFloat(amountTo) || 0;
|
|
|
|
row.innerHTML = `
|
|
${!isPublic ? createPrivateIndicator() : '<td class="w-0 p-0 m-0"></td>'}
|
|
${createTimeColumn(offer, postedTime, expiresIn)}
|
|
${createDetailsColumn(offer, identity)}
|
|
${createTakerAmountColumn(offer, coinTo, coinFrom)}
|
|
${createSwapColumn(offer, coinFromDisplay, coinToDisplay, coinFromSymbol, coinToSymbol)}
|
|
${createOrderbookColumn(offer, coinFrom, coinTo)}
|
|
${createRateColumn(offer, coinFrom, coinTo)}
|
|
${createPercentageColumn(offer)}
|
|
${createActionColumn(offer, isActuallyExpired)}
|
|
${createTooltips(
|
|
offer,
|
|
isOwnOffer,
|
|
coinFrom,
|
|
coinTo,
|
|
fromAmount,
|
|
toAmount,
|
|
postedTime,
|
|
expiresIn,
|
|
isActuallyExpired,
|
|
Boolean(isRevoked),
|
|
identity
|
|
)}
|
|
`;
|
|
|
|
updateTooltipTargets(row, uniqueId);
|
|
updateProfitLoss(row, coinFrom, coinTo, fromAmount, toAmount, isOwnOffer);
|
|
|
|
return row;
|
|
}
|
|
|
|
function createPrivateIndicator() {
|
|
return `<td class="relative w-0 p-0 m-0">
|
|
<div class="absolute top-0 bottom-0 left-0 w-1 bg-red-700" style="min-height: 100%;"></div>
|
|
</td>`;
|
|
}
|
|
|
|
function createTimeColumn(offer, postedTime, expiresIn) {
|
|
const now = Math.floor(Date.now() / 1000);
|
|
const timeLeft = offer.expire_at - now;
|
|
|
|
let strokeColor = '#10B981'; // Default green for > 30 min
|
|
if (timeLeft <= 300) {
|
|
strokeColor = '#9CA3AF'; // Grey for 5 min or less
|
|
} else if (timeLeft <= 1800) {
|
|
strokeColor = '#3B82F6'; // Blue for 5-30 min
|
|
}
|
|
|
|
return `
|
|
<td class="py-3 pl-1 pr-2 text-xs whitespace-nowrap">
|
|
<div class="flex items-center">
|
|
<div class="relative" data-tooltip-target="tooltip-active${escapeHtml(offer.offer_id)}">
|
|
<svg alt="" class="w-5 h-5 rounded-full mr-4 cursor-pointer" xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24">
|
|
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="${strokeColor}" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="11"></circle>
|
|
<polyline points="12,6 12,12 18,12" stroke="${strokeColor}"></polyline>
|
|
</g>
|
|
</svg>
|
|
</div>
|
|
<div class="flex flex-col hidden xl:block">
|
|
<div class="text-xs whitespace-nowrap"><span class="bold">Posted:</span> ${escapeHtml(postedTime)}</div>
|
|
<div class="text-xs whitespace-nowrap"><span class="bold">Expires in:</span> ${escapeHtml(expiresIn)}</div>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
`;
|
|
}
|
|
|
|
function truncateText(text, maxLength = 15) {
|
|
if (typeof text !== 'string') return '';
|
|
return text.length > maxLength
|
|
? text.slice(0, maxLength) + '...'
|
|
: text;
|
|
}
|
|
|
|
function createDetailsColumn(offer, identity = null) {
|
|
const addrFrom = offer.addr_from || '';
|
|
const identityInfo = getIdentityInfo(addrFrom, identity);
|
|
|
|
const showPublicPrivateTags = originalJsonData.some(o => o.is_public !== offer.is_public);
|
|
|
|
const tagClass = offer.is_public
|
|
? 'bg-green-600 dark:bg-green-600'
|
|
: 'bg-red-500 dark:bg-red-500';
|
|
const tagText = offer.is_public ? 'Public' : 'Private';
|
|
|
|
const displayIdentifier = truncateText(
|
|
identityInfo.label || addrFrom || 'Unspecified'
|
|
);
|
|
|
|
const identifierTextClass = identityInfo.label
|
|
? 'dark:text-white'
|
|
: 'monospace';
|
|
|
|
return `
|
|
<td class="py-8 px-4 text-xs text-left hidden xl:block">
|
|
<div class="flex flex-col gap-2 relative">
|
|
${showPublicPrivateTags ? `<span class="inline-flex pl-6 pr-6 py-1 justify-center text-[10px] w-1/4 font-medium text-gray-100 rounded-md ${tagClass}">${tagText}</span>
|
|
` : ''}
|
|
|
|
<a data-tooltip-target="tooltip-recipient-${escapeHtml(offer.offer_id)}" href="/identity/${escapeHtml(addrFrom)}" class="flex items-center">
|
|
<svg class="w-4 h-4 mr-2 text-gray-400 dark:text-white" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M10 9a3 3 0 100-6 3 3 0 000 6zm-7 9a7 7 0 1114 0H3z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
<span class="${identifierTextClass}">
|
|
${escapeHtml(displayIdentifier)}
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
`;
|
|
}
|
|
|
|
function createTakerAmountColumn(offer, coinTo) {
|
|
const fromAmount = parseFloat(offer.amount_to);
|
|
const toSymbol = getCoinSymbol(coinTo);
|
|
return `
|
|
<td class="py-0">
|
|
<div class="py-3 px-4 text-left">
|
|
<a data-tooltip-target="tooltip-wallet${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(toSymbol)}" class="items-center monospace">
|
|
<div class="pr-2">
|
|
<div class="text-sm font-semibold">${fromAmount.toFixed(4)}</div>
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">${coinTo}</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
`;
|
|
}
|
|
|
|
function createSwapColumn(offer, coinFromDisplay, coinToDisplay, coinFromSymbol, coinToSymbol) {
|
|
const getImageFilename = (symbol, displayName) => {
|
|
if (displayName.toLowerCase() === 'zcoin' || displayName.toLowerCase() === 'firo') {
|
|
return 'Firo.png';
|
|
}
|
|
return `${displayName.replace(' ', '-')}.png`;
|
|
};
|
|
|
|
return `
|
|
<td class="py-0 px-0 text-right text-sm">
|
|
<a data-tooltip-target="tooltip-offer${offer.offer_id}" href="/offer/${offer.offer_id}">
|
|
<div class="flex items-center justify-evenly monospace">
|
|
<span class="inline-flex mr-3 ml-3 align-middle items-center justify-center w-18 h-20 rounded">
|
|
<img class="h-12" src="/static/images/coins/${getImageFilename(coinToSymbol, coinToDisplay)}" alt="${coinToDisplay}">
|
|
</span>
|
|
<svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
<path fill-rule="evenodd" d="M12.293 5.293a1 1 0 011.414 0l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-2.293-2.293a1 1 0 010-1.414z" clip-rule="evenodd"></path>
|
|
</svg>
|
|
<span class="inline-flex ml-3 mr-3 align-middle items-center justify-center w-18 h-20 rounded">
|
|
<img class="h-12" src="/static/images/coins/${getImageFilename(coinFromSymbol, coinFromDisplay)}" alt="${coinFromDisplay}">
|
|
</span>
|
|
</div>
|
|
</a>
|
|
</td>
|
|
`;
|
|
}
|
|
|
|
function createOrderbookColumn(offer, coinFrom) {
|
|
const toAmount = parseFloat(offer.amount_from);
|
|
const fromSymbol = getCoinSymbol(coinFrom);
|
|
return `
|
|
<td class="p-0">
|
|
<div class="py-3 px-4 text-right">
|
|
<a data-tooltip-target="tooltip-wallet-maker${escapeHtml(offer.offer_id)}" href="/wallet/${escapeHtml(fromSymbol)}" class="items-center monospace">
|
|
<div class="pr-2">
|
|
<div class="text-sm font-semibold">${toAmount.toFixed(4)}</div>
|
|
<div class="text-sm text-gray-500 dark:text-gray-400">${coinFrom}</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</td>
|
|
`;
|
|
}
|
|
|
|
function createRateColumn(offer, coinFrom, coinTo) {
|
|
const rate = parseFloat(offer.rate);
|
|
const inverseRate = 1 / rate;
|
|
const fromSymbol = getCoinSymbol(coinFrom);
|
|
const toSymbol = getCoinSymbol(coinTo);
|
|
|
|
const getPriceKey = (coin) => {
|
|
const lowerCoin = coin.toLowerCase();
|
|
if (lowerCoin === 'firo' || lowerCoin === 'zcoin') {
|
|
return 'zcoin';
|
|
}
|
|
if (lowerCoin === 'bitcoin cash') {
|
|
return 'bitcoin-cash';
|
|
}
|
|
if (lowerCoin === 'particl anon' || lowerCoin === 'particl blind') {
|
|
return 'particl';
|
|
}
|
|
return coinNameToSymbol[coin] || lowerCoin;
|
|
};
|
|
|
|
const toSymbolKey = getPriceKey(coinTo);
|
|
let toPriceUSD = latestPrices[toSymbolKey]?.usd;
|
|
|
|
if (!toPriceUSD || isNaN(toPriceUSD)) {
|
|
toPriceUSD = tableRateModule.getFallbackValue(toSymbolKey);
|
|
}
|
|
|
|
const rateInUSD = toPriceUSD && !isNaN(toPriceUSD) && !isNaN(rate) ? rate * toPriceUSD : null;
|
|
|
|
return `
|
|
<td class="py-3 semibold monospace text-xs text-right items-center rate-table-info">
|
|
<div class="relative">
|
|
<div class="flex flex-col items-end pr-3" data-tooltip-target="tooltip-rate-${offer.offer_id}">
|
|
<span class="text-sm bold text-gray-700 dark:text-white">
|
|
${rateInUSD !== null ? `$${rateInUSD.toFixed(2)} USD` : 'N/A'}
|
|
</span>
|
|
<span class="bold text-gray-700 dark:text-white">
|
|
${rate.toFixed(8)} ${toSymbol}/${fromSymbol}
|
|
</span>
|
|
<span class="semibold text-gray-400 dark:text-gray-300">
|
|
${inverseRate.toFixed(8)} ${fromSymbol}/${toSymbol}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
`;
|
|
}
|
|
|
|
function createPercentageColumn(offer) {
|
|
return `
|
|
<td class="py-3 px-2 bold text-sm text-center monospace items-center rate-table-info">
|
|
<div class="relative" data-tooltip-target="percentage-tooltip-${offer.offer_id}">
|
|
<div class="profittype">
|
|
<span class="profit-loss text-lg font-bold" data-offer-id="${offer.offer_id}">
|
|
Calculating...
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
`;
|
|
}
|
|
|
|
function createActionColumn(offer, isActuallyExpired = false) {
|
|
const isRevoked = Boolean(offer.is_revoked);
|
|
const isTreatedAsSentOffer = offer.is_own_offer;
|
|
|
|
let buttonClass, buttonText;
|
|
|
|
if (isRevoked) {
|
|
buttonClass = 'bg-red-500 text-white hover:bg-red-600 transition duration-200';
|
|
buttonText = 'Revoked';
|
|
} else if (isActuallyExpired && isSentOffers) {
|
|
buttonClass = 'bg-gray-400 text-white dark:border-gray-300 text-white hover:bg-red-700 transition duration-200';
|
|
buttonText = 'Expired';
|
|
} else if (isTreatedAsSentOffer) {
|
|
buttonClass = 'bg-gray-300 bold text-white bold hover:bg-green-600 transition duration-200';
|
|
buttonText = 'Edit';
|
|
} else {
|
|
buttonClass = 'bg-blue-500 text-white hover:bg-green-600 transition duration-200';
|
|
buttonText = 'Swap';
|
|
}
|
|
|
|
return `
|
|
<td class="py-6 px-2 text-center">
|
|
<div class="flex justify-center items-center h-full">
|
|
<a class="inline-block w-20 py-1 px-2 font-medium text-center text-sm rounded-md ${buttonClass}"
|
|
href="/offer/${offer.offer_id}">
|
|
${buttonText}
|
|
</a>
|
|
</div>
|
|
</td>
|
|
`;
|
|
}
|
|
|
|
// TOOLTIP FUNCTIONS
|
|
function createTooltips(offer, treatAsSentOffer, coinFrom, coinTo, fromAmount, toAmount, postedTime, expiresIn, isActuallyExpired, isRevoked, identity = null) {
|
|
const uniqueId = `${offer.offer_id}_${offer.created_at}`;
|
|
|
|
const addrFrom = offer.addr_from || '';
|
|
const identityInfo = getIdentityInfo(addrFrom, identity);
|
|
|
|
const totalBids = identity ? (
|
|
identityInfo.stats.sentBidsSuccessful +
|
|
identityInfo.stats.recvBidsSuccessful +
|
|
identityInfo.stats.sentBidsFailed +
|
|
identityInfo.stats.recvBidsFailed +
|
|
identityInfo.stats.sentBidsRejected +
|
|
identityInfo.stats.recvBidsRejected
|
|
) : 0;
|
|
|
|
const successRate = totalBids ? (
|
|
((identityInfo.stats.sentBidsSuccessful + identityInfo.stats.recvBidsSuccessful) / totalBids) * 100
|
|
).toFixed(1) : 0;
|
|
|
|
const combinedRateTooltip = createCombinedRateTooltip(offer, coinFrom, coinTo, treatAsSentOffer);
|
|
const percentageTooltipContent = createTooltipContent(treatAsSentOffer, coinFrom, coinTo, fromAmount, toAmount);
|
|
|
|
return `
|
|
<div id="tooltip-active-${uniqueId}" role="tooltip" class="inline-block absolute invisible z-50 py-2 px-3 text-sm font-medium text-white bg-gray-400 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
|
|
<div class="active-revoked-expired">
|
|
<span class="bold">
|
|
<div class="text-xs"><span class="bold">Posted:</span> ${postedTime}</div>
|
|
<div class="text-xs"><span class="bold">Expires in:</span> ${expiresIn}</div>
|
|
${isRevoked ? '<div class="text-xs text-red-300"><span class="bold">Status:</span> Revoked</div>' : ''}
|
|
</span>
|
|
</div>
|
|
<div class="mt-5 text-xs">
|
|
<p class="font-bold mb-3">Time Indicator Colors:</p>
|
|
<p class="flex items-center">
|
|
<svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#10B981" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="11"></circle>
|
|
<polyline points="12,6 12,12 18,12" stroke="#10B981"></polyline>
|
|
</g>
|
|
</svg>
|
|
Green: More than 30 minutes left
|
|
</p>
|
|
<p class="flex items-center mt-3">
|
|
<svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#3B82F6" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="11"></circle>
|
|
<polyline points="12,6 12,12 18,12" stroke="#3B82F6"></polyline>
|
|
</g>
|
|
</svg>
|
|
Blue: Between 5 and 30 minutes left
|
|
</p>
|
|
<p class="flex items-center mt-3 mb-3">
|
|
<svg class="w-5 h-5 mr-3" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
|
|
<g stroke-linecap="round" stroke-width="2" fill="none" stroke="#9CA3AF" stroke-linejoin="round">
|
|
<circle cx="12" cy="12" r="11"></circle>
|
|
<polyline points="12,6 12,12 18,12" stroke="#9CA3AF"></polyline>
|
|
</g>
|
|
</svg>
|
|
Grey: Less than 5 minutes left or expired
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tooltip-wallet-${uniqueId}" role="tooltip" class="inline-block absolute invisible z-50 py-2 px-3 text-sm font-medium text-white bg-gray-400 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
|
|
<div class="active-revoked-expired">
|
|
<span class="bold">${treatAsSentOffer ? 'My' : ''} ${coinTo} Wallet</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tooltip-offer-${uniqueId}" role="tooltip" class="inline-block absolute z-50 py-2 px-3 text-sm font-medium text-white ${isRevoked ? 'bg-red-500' : (offer.is_own_offer ? 'bg-gray-300' : 'bg-green-700')} rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
|
|
<div class="active-revoked-expired">
|
|
<span class="bold">
|
|
${isRevoked ? 'Offer Revoked' : (offer.is_own_offer ? 'Edit Offer' : `Buy ${coinFrom}`)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tooltip-wallet-maker-${uniqueId}" role="tooltip" class="inline-block absolute invisible z-50 py-2 px-3 text-sm font-medium text-white bg-gray-400 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
|
|
<div class="active-revoked-expired">
|
|
<span class="bold">${treatAsSentOffer ? 'My' : ''} ${coinFrom} Wallet</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="tooltip-rate-${uniqueId}" role="tooltip" class="inline-block absolute invisible z-50 py-2 px-3 text-sm font-medium text-white bg-gray-400 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
|
|
<div class="tooltip-content">
|
|
${combinedRateTooltip}
|
|
</div>
|
|
</div>
|
|
|
|
<div id="percentage-tooltip-${uniqueId}" role="tooltip" class="inline-block absolute invisible z-50 py-2 px-3 text-sm font-medium text-white bg-gray-400 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip">
|
|
<div class="tooltip-content">
|
|
${percentageTooltipContent}
|
|
</div>
|
|
</div>
|
|
|
|
${createRecipientTooltip(uniqueId, identityInfo, identity, successRate, totalBids)}
|
|
`;
|
|
}
|
|
|
|
function createRecipientTooltip(uniqueId, identityInfo, identity, successRate, totalBids) {
|
|
|
|
const getSuccessRateColor = (rate) => {
|
|
if (rate >= 80) return 'text-green-600';
|
|
if (rate >= 60) return 'text-yellow-600';
|
|
return 'text-red-600';
|
|
};
|
|
|
|
|
|
const truncateText = (text, maxLength) => {
|
|
if (text.length <= maxLength) return text;
|
|
return text.substring(0, maxLength) + '...';
|
|
};
|
|
|
|
return `
|
|
<div id="tooltip-recipient-${uniqueId}" role="tooltip"
|
|
class="fixed z-50 py-3 px-4 text-sm font-medium text-white bg-gray-400 rounded-lg shadow-sm opacity-0 transition-opacity duration-300 tooltip max-w-sm pointer-events-none">
|
|
<div class="identity-info space-y-2">
|
|
${identityInfo.label ? `
|
|
<div class="border-b border-gray-400 pb-2">
|
|
<div class="text-white text-xs tracking-wide font-semibold">Label:</div>
|
|
<div class="text-white">${escapeHtml(identityInfo.label)}</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
<div class="space-y-1">
|
|
<div class="text-white text-xs tracking-wide font-semibold">Recipient Address:</div>
|
|
<div class="monospace text-xs break-all bg-gray-500 p-2 rounded-md text-white">
|
|
${escapeHtml(identityInfo.fullAddress)}
|
|
</div>
|
|
</div>
|
|
|
|
${identityInfo.note ? `
|
|
<div class="space-y-1 hidden">
|
|
<div class="text-white text-xs tracking-wide font-semibold">Note:</div>
|
|
<div class="text-white text-sm italic" title="${escapeHtml(identityInfo.note)}">
|
|
${escapeHtml(truncateText(identityInfo.note, 150))}
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
|
|
${identity ? `
|
|
<div class="border-t border-gray-400 pt-2 mt-2">
|
|
<div class="text-white text-xs tracking-wide font-semibold mb-2">Swap History:</div>
|
|
<div class="grid grid-cols-2 gap-2">
|
|
<div class="text-center p-2 bg-gray-500 rounded-md">
|
|
<div class="text-lg font-bold ${getSuccessRateColor(successRate)}">${successRate}%</div>
|
|
<div class="text-xs text-white">Success Rate</div>
|
|
</div>
|
|
<div class="text-center p-2 bg-gray-500 rounded-md">
|
|
<div class="text-lg font-bold text-blue-500">${totalBids}</div>
|
|
<div class="text-xs text-white">Total Trades</div>
|
|
</div>
|
|
</div>
|
|
<div class="grid grid-cols-3 gap-2 mt-2 text-center text-xs">
|
|
<div>
|
|
<div class="text-green-600 font-semibold">
|
|
${identityInfo.stats.sentBidsSuccessful + identityInfo.stats.recvBidsSuccessful}
|
|
</div>
|
|
<div class="text-white">Successful</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-yellow-600 font-semibold">
|
|
${identityInfo.stats.sentBidsRejected + identityInfo.stats.recvBidsRejected}
|
|
</div>
|
|
<div class="text-white">Rejected</div>
|
|
</div>
|
|
<div>
|
|
<div class="text-red-600 font-semibold">
|
|
${identityInfo.stats.sentBidsFailed + identityInfo.stats.recvBidsFailed}
|
|
</div>
|
|
<div class="text-white">Failed</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
` : ''}
|
|
</div>
|
|
<div class="tooltip-arrow" data-popper-arrow></div>
|
|
</div>`;
|
|
}
|
|
|
|
function createTooltipContent(isSentOffers, coinFrom, coinTo, fromAmount, toAmount, isOwnOffer) {
|
|
if (!coinFrom || !coinTo) {
|
|
return `<p class="font-bold mb-1">Unable to calculate profit/loss</p>
|
|
<p>Invalid coin data.</p>`;
|
|
}
|
|
|
|
fromAmount = parseFloat(fromAmount) || 0;
|
|
toAmount = parseFloat(toAmount) || 0;
|
|
|
|
const getPriceKey = (coin) => {
|
|
const lowerCoin = coin.toLowerCase();
|
|
return lowerCoin === 'firo' || lowerCoin === 'zcoin' ? 'zcoin' :
|
|
lowerCoin === 'bitcoin cash' ? 'bitcoin-cash' :
|
|
lowerCoin === 'particl anon' || lowerCoin === 'particl blind' ? 'particl' :
|
|
coinNameToSymbol[coin] || lowerCoin;
|
|
};
|
|
|
|
const fromSymbol = getPriceKey(coinFrom);
|
|
const toSymbol = getPriceKey(coinTo);
|
|
const fromPriceUSD = latestPrices[fromSymbol]?.usd;
|
|
const toPriceUSD = latestPrices[toSymbol]?.usd;
|
|
|
|
if (fromPriceUSD === null || toPriceUSD === null ||
|
|
fromPriceUSD === undefined || toPriceUSD === undefined) {
|
|
return `<p class="font-bold mb-1">Price Information Unavailable</p>
|
|
<p>Current market prices are temporarily unavailable.</p>
|
|
<p class="mt-2">You are ${isSentOffers ? 'selling' : 'buying'} ${fromAmount.toFixed(8)} ${coinFrom}
|
|
for ${toAmount.toFixed(8)} ${coinTo}.</p>
|
|
<p class="font-bold mt-2">Note:</p>
|
|
<p>Profit/loss calculations will be available when price data is restored.</p>`;
|
|
}
|
|
|
|
const fromValueUSD = fromAmount * fromPriceUSD;
|
|
const toValueUSD = toAmount * toPriceUSD;
|
|
const profitUSD = toValueUSD - fromValueUSD;
|
|
|
|
const marketRate = fromPriceUSD / toPriceUSD;
|
|
const offerRate = toAmount / fromAmount;
|
|
let percentDiff;
|
|
|
|
if (isSentOffers || isOwnOffer) {
|
|
percentDiff = ((toValueUSD / fromValueUSD) - 1) * 100;
|
|
} else {
|
|
percentDiff = ((fromValueUSD / toValueUSD) - 1) * 100;
|
|
}
|
|
|
|
const formattedPercentDiff = percentDiff.toFixed(2);
|
|
const percentDiffDisplay = formattedPercentDiff === "0.00" ? "0.00" :
|
|
(percentDiff > 0 ? `+${formattedPercentDiff}` : formattedPercentDiff);
|
|
|
|
const profitLabel = (isSentOffers || isOwnOffer) ? "Max Profit" : "Max Loss";
|
|
const actionLabel = (isSentOffers || isOwnOffer) ? "selling" : "buying";
|
|
const directionLabel = (isSentOffers || isOwnOffer) ? "receiving" : "paying";
|
|
|
|
return `
|
|
<p class="font-bold mb-1">Profit/Loss Calculation:</p>
|
|
<p>You are ${actionLabel} ${fromAmount.toFixed(8)} ${coinFrom} ($${fromValueUSD.toFixed(2)} USD) <br/> and ${directionLabel} ${toAmount.toFixed(8)} ${coinTo} ($${toValueUSD.toFixed(2)} USD).</p>
|
|
<p class="mt-1">Percentage difference: ${percentDiffDisplay}%</p>
|
|
<p>${profitLabel}: ${profitUSD > 0 ? '' : '-'}$${Math.abs(profitUSD).toFixed(2)} USD</p>
|
|
<p class="font-bold mt-2">Calculation:</p>
|
|
<p>Percentage = ${(isSentOffers || isOwnOffer) ?
|
|
"((To Amount in USD / From Amount in USD) - 1) * 100" :
|
|
"((From Amount in USD / To Amount in USD) - 1) * 100"}</p>
|
|
<p>USD ${profitLabel} = To Amount in USD - From Amount in USD</p>
|
|
<p class="font-bold mt-1">Interpretation:</p>
|
|
${(isSentOffers || isOwnOffer) ? `
|
|
<p><span class="text-green-500">Positive percentage:</span> You're selling above market rate (profitable)</p>
|
|
<p><span class="text-red-500">Negative percentage:</span> You're selling below market rate (loss)</p>
|
|
` : `
|
|
<p><span class="text-green-500">Positive percentage:</span> You're buying below market rate (savings)</p>
|
|
<p><span class="text-red-500">Negative percentage:</span> You're buying above market rate (premium)</p>
|
|
`}
|
|
<p class="mt-1"><strong>Note:</strong> ${(isSentOffers || isOwnOffer) ?
|
|
"As a seller, a positive percentage means <br/> you're selling for more than the current market value." :
|
|
"As a buyer, a positive percentage indicates </br> potential savings compared to current market rates."}</p>
|
|
<p class="mt-1"><strong>Market Rate:</strong> 1 ${coinFrom} = ${marketRate.toFixed(8)} ${coinTo}</p>
|
|
<p><strong>Offer Rate:</strong> 1 ${coinFrom} = ${offerRate.toFixed(8)} ${coinTo}</p>
|
|
`;
|
|
}
|
|
|
|
function createCombinedRateTooltip(offer, coinFrom, coinTo, treatAsSentOffer) {
|
|
const rate = parseFloat(offer.rate) || 0;
|
|
const inverseRate = rate ? (1 / rate) : 0;
|
|
|
|
const getPriceKey = (coin) => {
|
|
const lowerCoin = coin.toLowerCase();
|
|
if (lowerCoin === 'firo' || lowerCoin === 'zcoin') {
|
|
return 'zcoin';
|
|
}
|
|
if (lowerCoin === 'bitcoin cash') {
|
|
return 'bitcoin-cash';
|
|
}
|
|
if (lowerCoin === 'particl anon' || lowerCoin === 'particl blind') {
|
|
return 'particl';
|
|
}
|
|
return coinNameToSymbol[coin] || lowerCoin;
|
|
};
|
|
|
|
const fromSymbol = getPriceKey(coinFrom);
|
|
const toSymbol = getPriceKey(coinTo);
|
|
const fromPriceUSD = latestPrices[fromSymbol]?.usd;
|
|
const toPriceUSD = latestPrices[toSymbol]?.usd;
|
|
|
|
if (fromPriceUSD === null || toPriceUSD === null ||
|
|
fromPriceUSD === undefined || toPriceUSD === undefined) {
|
|
return `
|
|
<p class="font-bold mb-1">Exchange Rate Information</p>
|
|
<p>Market price data is temporarily unavailable.</p>
|
|
<p class="font-bold mt-2">Current Offer Rates:</p>
|
|
<p>1 ${coinFrom} = ${rate.toFixed(8)} ${coinTo}</p>
|
|
<p>1 ${coinTo} = ${inverseRate.toFixed(8)} ${coinFrom}</p>
|
|
<p class="font-bold mt-2">Note:</p>
|
|
<p>Market comparison will be available when price data is restored.</p>
|
|
`;
|
|
}
|
|
|
|
const rateInUSD = rate * toPriceUSD;
|
|
const marketRate = fromPriceUSD / toPriceUSD;
|
|
const percentDiff = marketRate ? ((rate - marketRate) / marketRate) * 100 : 0;
|
|
const formattedPercentDiff = percentDiff.toFixed(2);
|
|
const percentDiffDisplay = formattedPercentDiff === "0.00" ? "0.00" :
|
|
(percentDiff > 0 ? `+${formattedPercentDiff}` : formattedPercentDiff);
|
|
const aboveOrBelow = percentDiff > 0 ? "above" : percentDiff < 0 ? "below" : "at";
|
|
const action = treatAsSentOffer ? "selling" : "buying";
|
|
|
|
return `
|
|
<p class="font-bold mb-1">Exchange Rate Explanation:</p>
|
|
<p>This offer is ${action} ${coinFrom} for ${coinTo} <br/>at a rate that is ${percentDiffDisplay}% ${aboveOrBelow} market price.</p>
|
|
<p class="font-bold mt-1">Exchange Rates:</p>
|
|
<p>1 ${coinFrom} = ${rate.toFixed(8)} ${coinTo}</p>
|
|
<p>1 ${coinTo} = ${inverseRate.toFixed(8)} ${coinFrom}</p>
|
|
<p class="font-bold mt-2">USD Equivalent:</p>
|
|
<p>1 ${coinFrom} = $${rateInUSD.toFixed(2)} USD</p>
|
|
<p class="font-bold mt-2">Current market prices:</p>
|
|
<p>${coinFrom}: $${fromPriceUSD.toFixed(2)} USD</p>
|
|
<p>${coinTo}: $${toPriceUSD.toFixed(2)} USD</p>
|
|
<p class="mt-1">Market rate: 1 ${coinFrom} = ${marketRate.toFixed(8)} ${coinTo}</p>
|
|
`;
|
|
}
|
|
|
|
function updateTooltipTargets(row, uniqueId) {
|
|
const tooltipElements = [
|
|
{ prefix: 'tooltip-active', selector: '[data-tooltip-target^="tooltip-active"]' },
|
|
{ prefix: 'tooltip-recipient', selector: '[data-tooltip-target^="tooltip-recipient"]' },
|
|
{ prefix: 'tooltip-wallet', selector: '[data-tooltip-target^="tooltip-wallet"]' },
|
|
{ prefix: 'tooltip-offer', selector: '[data-tooltip-target^="tooltip-offer"]' },
|
|
{ prefix: 'tooltip-wallet-maker', selector: '[data-tooltip-target^="tooltip-wallet-maker"]' },
|
|
{ prefix: 'tooltip-rate', selector: '[data-tooltip-target^="tooltip-rate"]' },
|
|
{ prefix: 'percentage-tooltip', selector: '[data-tooltip-target^="percentage-tooltip"]' }
|
|
];
|
|
|
|
tooltipElements.forEach(({ prefix, selector }) => {
|
|
const element = row.querySelector(selector);
|
|
if (element) {
|
|
element.setAttribute('data-tooltip-target', `${prefix}-${uniqueId}`);
|
|
}
|
|
});
|
|
}
|
|
|
|
// FILTER FUNCTIONS
|
|
function applyFilters() {
|
|
if (filterTimeout) {
|
|
clearTimeout(filterTimeout);
|
|
filterTimeout = null;
|
|
}
|
|
|
|
try {
|
|
filterTimeout = setTimeout(() => {
|
|
jsonData = filterAndSortData();
|
|
updateOffersTable();
|
|
updateJsonView();
|
|
updatePaginationInfo();
|
|
updateClearFiltersButton();
|
|
filterTimeout = null;
|
|
}, 250);
|
|
} catch (error) {
|
|
console.error('Error in filter timeout:', error);
|
|
filterTimeout = null;
|
|
}
|
|
}
|
|
|
|
function clearFilters() {
|
|
|
|
filterForm.reset();
|
|
|
|
const selectElements = filterForm.querySelectorAll('select');
|
|
selectElements.forEach(select => {
|
|
select.value = 'any';
|
|
// Trigger change event
|
|
const event = new Event('change', { bubbles: true });
|
|
select.dispatchEvent(event);
|
|
});
|
|
|
|
const statusSelect = document.getElementById('status');
|
|
if (statusSelect) {
|
|
statusSelect.value = 'any';
|
|
}
|
|
|
|
jsonData = [...originalJsonData];
|
|
currentPage = 1;
|
|
|
|
updateOffersTable();
|
|
updateJsonView();
|
|
updateCoinFilterImages();
|
|
updateClearFiltersButton();
|
|
}
|
|
|
|
function hasActiveFilters() {
|
|
const selectElements = filterForm.querySelectorAll('select');
|
|
let hasChangedFilters = false;
|
|
|
|
selectElements.forEach(select => {
|
|
if (select.value !== 'any') {
|
|
hasChangedFilters = true;
|
|
}
|
|
});
|
|
|
|
return hasChangedFilters;
|
|
}
|
|
// UTILITY FUNCTIONS
|
|
function formatTimeLeft(timestamp) {
|
|
const now = Math.floor(Date.now() / 1000);
|
|
if (timestamp <= now) return "Expired";
|
|
return formatTime(timestamp);
|
|
}
|
|
|
|
function getDisplayName(coinName) {
|
|
if (coinName.toLowerCase() === 'zcoin') {
|
|
return 'Firo';
|
|
}
|
|
return coinNameToDisplayName[coinName] || coinName;
|
|
}
|
|
|
|
function getCoinSymbolLowercase(coin) {
|
|
if (typeof coin === 'string') {
|
|
if (coin.toLowerCase() === 'bitcoin cash') {
|
|
return 'bitcoin-cash';
|
|
}
|
|
return (coinNameToSymbol[coin] || coin).toLowerCase();
|
|
} else if (coin && typeof coin === 'object' && coin.symbol) {
|
|
return coin.symbol.toLowerCase();
|
|
} else {
|
|
//console.warn('Invalid coin input:', coin);
|
|
return 'unknown';
|
|
}
|
|
}
|
|
|
|
function coinMatches(offerCoin, filterCoin) {
|
|
if (!offerCoin || !filterCoin) return false;
|
|
|
|
offerCoin = offerCoin.toLowerCase();
|
|
filterCoin = filterCoin.toLowerCase();
|
|
|
|
if (offerCoin === filterCoin) return true;
|
|
|
|
if ((offerCoin === 'firo' || offerCoin === 'zcoin') &&
|
|
(filterCoin === 'firo' || filterCoin === 'zcoin')) {
|
|
return true;
|
|
}
|
|
|
|
if ((offerCoin === 'bitcoincash' && filterCoin === 'bitcoin cash') ||
|
|
(offerCoin === 'bitcoin cash' && filterCoin === 'bitcoincash')) {
|
|
return true;
|
|
}
|
|
|
|
const particlVariants = ['particl', 'particl anon', 'particl blind'];
|
|
if (filterCoin === 'particl' && particlVariants.includes(offerCoin)) {
|
|
return true;
|
|
}
|
|
|
|
if (particlVariants.includes(filterCoin)) {
|
|
return offerCoin === filterCoin;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
function getProfitColorClass(percentage) {
|
|
const numericPercentage = parseFloat(percentage);
|
|
if (numericPercentage > 0) return 'text-green-500';
|
|
if (numericPercentage < 0) return 'text-red-500';
|
|
if (numericPercentage === 0) return 'text-yellow-400';
|
|
return 'text-white';
|
|
}
|
|
|
|
function isOfferExpired(offer) {
|
|
if (isSentOffers) {
|
|
return false;
|
|
}
|
|
const currentTime = Math.floor(Date.now() / 1000);
|
|
const isExpired = offer.expire_at <= currentTime;
|
|
if (isExpired) {
|
|
console.log(`Offer ${offer.offer_id} is expired. Expire time: ${offer.expire_at}, Current time: ${currentTime}`);
|
|
}
|
|
return isExpired;
|
|
}
|
|
|
|
function formatTime(timestamp, addAgoSuffix = false) {
|
|
const now = Math.floor(Date.now() / 1000);
|
|
const diff = Math.abs(now - timestamp);
|
|
|
|
let timeString;
|
|
if (diff < 60) {
|
|
timeString = `${diff} seconds`;
|
|
} else if (diff < 3600) {
|
|
timeString = `${Math.floor(diff / 60)} minutes`;
|
|
} else if (diff < 86400) {
|
|
timeString = `${Math.floor(diff / 3600)} hours`;
|
|
} else if (diff < 2592000) {
|
|
timeString = `${Math.floor(diff / 86400)} days`;
|
|
} else if (diff < 31536000) {
|
|
timeString = `${Math.floor(diff / 2592000)} months`;
|
|
} else {
|
|
timeString = `${Math.floor(diff / 31536000)} years`;
|
|
}
|
|
|
|
return addAgoSuffix ? `${timeString} ago` : timeString;
|
|
}
|
|
|
|
function escapeHtml(unsafe) {
|
|
if (typeof unsafe !== 'string') {
|
|
//console.warn('escapeHtml received a non-string value:', unsafe);
|
|
return '';
|
|
}
|
|
return unsafe
|
|
.replace(/&/g, "&")
|
|
.replace(/</g, "<")
|
|
.replace(/>/g, ">")
|
|
.replace(/"/g, """)
|
|
.replace(/'/g, "'");
|
|
}
|
|
|
|
function getCoinSymbol(fullName) {
|
|
const symbolMap = {
|
|
'Bitcoin': 'BTC', 'Litecoin': 'LTC', 'Monero': 'XMR',
|
|
'Particl': 'PART', 'Particl Blind': 'PART', 'Particl Anon': 'PART',
|
|
'PIVX': 'PIVX', 'Firo': 'FIRO', 'Zcoin': 'FIRO',
|
|
'Dash': 'DASH', 'Decred': 'DCR', 'Wownero': 'WOW',
|
|
'Bitcoin Cash': 'BCH', 'Dogecoin': 'DOGE'
|
|
};
|
|
return symbolMap[fullName] || fullName;
|
|
}
|
|
|
|
// EVENT LISTENERS
|
|
function initializeTableEvents() {
|
|
const filterForm = document.getElementById('filterForm');
|
|
if (filterForm) {
|
|
EventManager.add(filterForm, 'submit', (e) => {
|
|
e.preventDefault();
|
|
applyFilters();
|
|
});
|
|
|
|
EventManager.add(filterForm, 'change', () => {
|
|
applyFilters();
|
|
updateClearFiltersButton();
|
|
});
|
|
}
|
|
|
|
const coinToSelect = document.getElementById('coin_to');
|
|
const coinFromSelect = document.getElementById('coin_from');
|
|
|
|
if (coinToSelect) {
|
|
EventManager.add(coinToSelect, 'change', () => {
|
|
applyFilters();
|
|
updateCoinFilterImages();
|
|
});
|
|
}
|
|
|
|
if (coinFromSelect) {
|
|
EventManager.add(coinFromSelect, 'change', () => {
|
|
applyFilters();
|
|
updateCoinFilterImages();
|
|
});
|
|
}
|
|
|
|
const clearFiltersBtn = document.getElementById('clearFilters');
|
|
if (clearFiltersBtn) {
|
|
EventManager.add(clearFiltersBtn, 'click', () => {
|
|
clearFilters();
|
|
updateCoinFilterImages();
|
|
});
|
|
}
|
|
|
|
const refreshButton = document.getElementById('refreshOffers');
|
|
if (refreshButton) {
|
|
let lastRefreshTime = 0;
|
|
const REFRESH_COOLDOWN = 6000;
|
|
let countdownInterval;
|
|
|
|
EventManager.add(refreshButton, 'click', async () => {
|
|
const now = Date.now();
|
|
if (now - lastRefreshTime < REFRESH_COOLDOWN) {
|
|
console.log('Refresh rate limited. Please wait before refreshing again.');
|
|
const startTime = now;
|
|
const refreshText = document.getElementById('refreshText');
|
|
|
|
refreshButton.classList.remove('bg-blue-600', 'hover:bg-green-600', 'border-blue-500', 'hover:border-green-600');
|
|
refreshButton.classList.add('bg-red-600', 'border-red-500', 'cursor-not-allowed');
|
|
|
|
if (countdownInterval) clearInterval(countdownInterval);
|
|
|
|
countdownInterval = setInterval(() => {
|
|
const currentTime = Date.now();
|
|
const elapsedTime = currentTime - startTime;
|
|
const remainingTime = Math.ceil((REFRESH_COOLDOWN - elapsedTime) / 1000);
|
|
|
|
if (remainingTime <= 0) {
|
|
clearInterval(countdownInterval);
|
|
refreshText.textContent = 'Refresh';
|
|
|
|
refreshButton.classList.remove('bg-red-600', 'border-red-500', 'cursor-not-allowed');
|
|
refreshButton.classList.add('bg-blue-600', 'hover:bg-green-600', 'border-blue-500', 'hover:border-green-600');
|
|
} else {
|
|
refreshText.textContent = `Refresh (${remainingTime}s)`;
|
|
}
|
|
}, 100);
|
|
return;
|
|
}
|
|
|
|
console.log('Manual refresh initiated');
|
|
lastRefreshTime = now;
|
|
const refreshIcon = document.getElementById('refreshIcon');
|
|
const refreshText = document.getElementById('refreshText');
|
|
refreshButton.disabled = true;
|
|
refreshIcon.classList.add('animate-spin');
|
|
refreshText.textContent = 'Refreshing...';
|
|
refreshButton.classList.add('opacity-75', 'cursor-wait');
|
|
|
|
try {
|
|
const cachedPrices = CacheManager.get('prices_coingecko');
|
|
let previousPrices = cachedPrices ? cachedPrices.value : null;
|
|
CacheManager.clear();
|
|
window.isManualRefresh = true;
|
|
const endpoint = isSentOffers ? '/json/sentoffers' : '/json/offers';
|
|
const response = await fetch(endpoint);
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
const newData = await response.json();
|
|
const processedNewData = Array.isArray(newData) ? newData : Object.values(newData);
|
|
jsonData = formatInitialData(processedNewData);
|
|
originalJsonData = [...jsonData];
|
|
const priceData = await fetchLatestPrices();
|
|
if (!priceData && previousPrices) {
|
|
console.log('Using previous price data after failed refresh');
|
|
latestPrices = previousPrices;
|
|
await updateOffersTable();
|
|
} else if (priceData) {
|
|
latestPrices = priceData;
|
|
await updateOffersTable();
|
|
} else {
|
|
throw new Error('Unable to fetch price data');
|
|
}
|
|
updateJsonView();
|
|
updatePaginationInfo();
|
|
lastRefreshTime = now;
|
|
updateLastRefreshTime();
|
|
|
|
console.log('Manual refresh completed successfully');
|
|
|
|
} catch (error) {
|
|
console.error('Error during manual refresh:', error);
|
|
ui.displayErrorMessage('Unable to refresh data. Previous data will be preserved.');
|
|
|
|
const cachedData = CacheManager.get('prices_coingecko');
|
|
if (cachedData?.value) {
|
|
latestPrices = cachedData.value;
|
|
await updateOffersTable();
|
|
}
|
|
} finally {
|
|
window.isManualRefresh = false;
|
|
refreshButton.disabled = false;
|
|
refreshIcon.classList.remove('animate-spin');
|
|
refreshText.textContent = 'Refresh';
|
|
refreshButton.classList.remove('opacity-75', 'cursor-wait');
|
|
|
|
refreshButton.classList.remove('bg-red-600', 'border-red-500', 'cursor-not-allowed');
|
|
refreshButton.classList.add('bg-blue-600', 'hover:bg-green-600', 'border-blue-500', 'hover:border-green-600');
|
|
|
|
if (countdownInterval) {
|
|
clearInterval(countdownInterval);
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
document.querySelectorAll('th[data-sortable="true"]').forEach(header => {
|
|
EventManager.add(header, 'click', () => {
|
|
const columnIndex = parseInt(header.getAttribute('data-column-index'));
|
|
handleTableSort(columnIndex, header);
|
|
});
|
|
});
|
|
|
|
const prevPageButton = document.getElementById('prevPage');
|
|
const nextPageButton = document.getElementById('nextPage');
|
|
|
|
if (prevPageButton) {
|
|
EventManager.add(prevPageButton, 'click', () => {
|
|
if (currentPage > 1) {
|
|
currentPage--;
|
|
updateOffersTable();
|
|
}
|
|
});
|
|
}
|
|
|
|
if (nextPageButton) {
|
|
EventManager.add(nextPageButton, 'click', () => {
|
|
const totalPages = Math.ceil(jsonData.length / itemsPerPage);
|
|
if (currentPage < totalPages) {
|
|
currentPage++;
|
|
updateOffersTable();
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
function handleTableSort(columnIndex, header) {
|
|
if (currentSortColumn === columnIndex) {
|
|
currentSortDirection = currentSortDirection === 'asc' ? 'desc' : 'asc';
|
|
} else {
|
|
currentSortColumn = columnIndex;
|
|
currentSortDirection = 'desc';
|
|
}
|
|
|
|
document.querySelectorAll('.sort-icon').forEach(icon => {
|
|
icon.classList.remove('text-blue-500');
|
|
icon.textContent = '↓';
|
|
});
|
|
|
|
const sortIcon = document.getElementById(`sort-icon-${columnIndex}`);
|
|
if (sortIcon) {
|
|
sortIcon.textContent = currentSortDirection === 'asc' ? '↑' : '↓';
|
|
sortIcon.classList.add('text-blue-500');
|
|
}
|
|
|
|
document.querySelectorAll('th[data-sortable="true"]').forEach(th => {
|
|
if (th === header) {
|
|
th.classList.add('text-blue-500');
|
|
} else {
|
|
th.classList.remove('text-blue-500');
|
|
}
|
|
});
|
|
|
|
localStorage.setItem('tableSortColumn', currentSortColumn);
|
|
localStorage.setItem('tableSortDirection', currentSortDirection);
|
|
|
|
applyFilters();
|
|
}
|
|
|
|
// TIMER MANAGEMENT
|
|
const timerManager = {
|
|
intervals: [],
|
|
timeouts: [],
|
|
|
|
addInterval(callback, delay) {
|
|
const intervalId = setInterval(callback, delay);
|
|
this.intervals.push(intervalId);
|
|
return intervalId;
|
|
},
|
|
|
|
addTimeout(callback, delay) {
|
|
const timeoutId = setTimeout(callback, delay);
|
|
this.timeouts.push(timeoutId);
|
|
return timeoutId;
|
|
},
|
|
|
|
clearAllIntervals() {
|
|
this.intervals.forEach(clearInterval);
|
|
this.intervals = [];
|
|
},
|
|
|
|
clearAllTimeouts() {
|
|
this.timeouts.forEach(clearTimeout);
|
|
this.timeouts = [];
|
|
},
|
|
|
|
clearAll() {
|
|
this.clearAllIntervals();
|
|
this.clearAllTimeouts();
|
|
}
|
|
};
|
|
|
|
// INITIALIZATION AND EVENT BINDING
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
console.log('DOM content loaded, initializing...');
|
|
console.log('View type:', isSentOffers ? 'sent offers' : 'received offers');
|
|
|
|
updateClearFiltersButton();
|
|
initializeTableEvents();
|
|
|
|
setTimeout(() => {
|
|
console.log('Starting WebSocket initialization...');
|
|
WebSocketManager.initialize();
|
|
}, 1000);
|
|
|
|
if (initializeTableRateModule()) {
|
|
continueInitialization();
|
|
} else {
|
|
let retryCount = 0;
|
|
const maxRetries = 5;
|
|
const retryInterval = setInterval(() => {
|
|
retryCount++;
|
|
if (initializeTableRateModule()) {
|
|
clearInterval(retryInterval);
|
|
continueInitialization();
|
|
} else if (retryCount >= maxRetries) {
|
|
clearInterval(retryInterval);
|
|
continueInitialization();
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
timerManager.addInterval(() => {
|
|
if (WebSocketManager.isConnected()) {
|
|
console.log('WebSocket Status: Connected');
|
|
}
|
|
}, 30000);
|
|
|
|
timerManager.addInterval(() => {
|
|
CacheManager.cleanup();
|
|
}, 300000);
|
|
|
|
updateCoinFilterImages();
|
|
fetchOffers().then(() => {
|
|
applyFilters();
|
|
}).catch(error => {
|
|
console.error('Error fetching initial offers:', error);
|
|
});
|
|
|
|
const listingLabel = document.querySelector('span[data-listing-label]');
|
|
if (listingLabel) {
|
|
listingLabel.textContent = isSentOffers ? 'Total Listings: ' : 'Network Listings: ';
|
|
}
|
|
|
|
timerManager.addInterval(updateRowTimes, 900000);
|
|
|
|
EventManager.add(document, 'visibilitychange', () => {
|
|
if (!document.hidden) {
|
|
console.log('Page became visible, checking WebSocket connection');
|
|
if (!WebSocketManager.isConnected()) {
|
|
WebSocketManager.connect();
|
|
}
|
|
}
|
|
});
|
|
|
|
EventManager.add(window, 'beforeunload', () => {
|
|
cleanup();
|
|
});
|
|
|
|
console.log('Initialization completed');
|
|
});
|
|
|
|
async function cleanup() {
|
|
const debug = {
|
|
startTime: Date.now(),
|
|
steps: [],
|
|
errors: [],
|
|
addStep: function(step, details = null) {
|
|
const timeFromStart = Date.now() - this.startTime;
|
|
console.log(`[Cleanup ${timeFromStart}ms] ${step}`, details || '');
|
|
this.steps.push({ step, time: timeFromStart, details });
|
|
},
|
|
addError: function(step, error) {
|
|
const timeFromStart = Date.now() - this.startTime;
|
|
console.error(`[Cleanup Error ${timeFromStart}ms] ${step}:`, error);
|
|
this.errors.push({ step, error, time: timeFromStart });
|
|
},
|
|
summarize: function() {
|
|
const totalTime = Date.now() - this.startTime;
|
|
console.group('Cleanup Summary');
|
|
console.log(`Total cleanup time: ${totalTime}ms`);
|
|
console.log('Steps completed:', this.steps.length);
|
|
console.log('Errors encountered:', this.errors.length);
|
|
|
|
if (this.steps.length > 0) {
|
|
console.group('Steps Timeline');
|
|
this.steps.forEach(({step, time}) => {
|
|
console.log(`${time}ms - ${step}`);
|
|
});
|
|
console.groupEnd();
|
|
}
|
|
|
|
if (this.errors.length > 0) {
|
|
console.group('Errors');
|
|
this.errors.forEach(({step, error, time}) => {
|
|
console.log(`${time}ms - ${step}:`, error);
|
|
});
|
|
console.groupEnd();
|
|
}
|
|
console.groupEnd();
|
|
}
|
|
};
|
|
|
|
try {
|
|
debug.addStep('Starting cleanup process');
|
|
|
|
debug.addStep('Clearing timers');
|
|
const timerCount = timerManager.intervals.length + timerManager.timeouts.length;
|
|
timerManager.clearAll();
|
|
debug.addStep('Timers cleared', `Cleaned up ${timerCount} timers`);
|
|
|
|
debug.addStep('Starting WebSocket cleanup');
|
|
await Promise.resolve(WebSocketManager.cleanup()).catch(error => {
|
|
debug.addError('WebSocket cleanup', error);
|
|
});
|
|
debug.addStep('WebSocket cleanup completed');
|
|
|
|
debug.addStep('Clearing event listeners');
|
|
const listenerCount = EventManager.listeners.size;
|
|
EventManager.clearAll();
|
|
debug.addStep('Event listeners cleared', `Cleaned up ${listenerCount} listeners`);
|
|
|
|
debug.addStep('Starting table cleanup');
|
|
const rowCount = offersBody ? offersBody.querySelectorAll('tr').length : 0;
|
|
cleanupTable();
|
|
debug.addStep('Table cleanup completed', `Cleaned up ${rowCount} rows`);
|
|
|
|
debug.addStep('Resetting global state');
|
|
const globals = {
|
|
currentPage: currentPage,
|
|
dataLength: jsonData.length,
|
|
originalDataLength: originalJsonData.length
|
|
};
|
|
currentPage = 1;
|
|
jsonData = [];
|
|
originalJsonData = [];
|
|
currentSortColumn = 0;
|
|
currentSortDirection = 'desc';
|
|
filterTimeout = null;
|
|
latestPrices = null;
|
|
lastRefreshTime = null;
|
|
debug.addStep('Global state reset', globals);
|
|
|
|
debug.addStep('Clearing global references');
|
|
if (window.WebSocketManager) {
|
|
window.WebSocketManager = null;
|
|
}
|
|
if (window.tableRateModule) {
|
|
window.tableRateModule = null;
|
|
}
|
|
debug.addStep('Global references cleared');
|
|
|
|
debug.addStep('Clearing DOM references');
|
|
const elementRefs = [
|
|
'offersBody',
|
|
'filterForm',
|
|
'prevPageButton',
|
|
'nextPageButton',
|
|
'currentPageSpan',
|
|
'totalPagesSpan',
|
|
'lastRefreshTimeSpan',
|
|
'newEntriesCountSpan'
|
|
];
|
|
let clearedRefs = 0;
|
|
elementRefs.forEach(ref => {
|
|
if (window[ref]) {
|
|
window[ref] = null;
|
|
clearedRefs++;
|
|
}
|
|
});
|
|
debug.addStep('DOM references cleared', `Cleared ${clearedRefs} references`);
|
|
|
|
debug.addStep('Clearing tooltips');
|
|
const tooltips = document.querySelectorAll('[role="tooltip"]');
|
|
const tooltipCount = tooltips.length;
|
|
tooltips.forEach(tooltip => tooltip.remove());
|
|
debug.addStep('Tooltips cleared', `Removed ${tooltipCount} tooltips`);
|
|
|
|
debug.addStep('Clearing document/window events');
|
|
const events = ['visibilitychange', 'beforeunload', 'scroll'];
|
|
events.forEach(event => {
|
|
document.removeEventListener(event, null);
|
|
window.removeEventListener(event, null);
|
|
});
|
|
debug.addStep('Document/window events cleared');
|
|
|
|
debug.addStep('Clearing localStorage items');
|
|
try {
|
|
localStorage.removeItem('tableSortColumn');
|
|
localStorage.removeItem('tableSortDirection');
|
|
debug.addStep('localStorage items cleared');
|
|
} catch (e) {
|
|
debug.addError('localStorage cleanup', e);
|
|
}
|
|
|
|
} catch (error) {
|
|
debug.addError('Main cleanup process', error);
|
|
|
|
debug.addStep('Starting failsafe cleanup');
|
|
try {
|
|
WebSocketManager.cleanup();
|
|
EventManager.clearAll();
|
|
timerManager.clearAll();
|
|
if (window.ws) {
|
|
window.ws.close();
|
|
window.ws = null;
|
|
}
|
|
debug.addStep('Failsafe cleanup completed');
|
|
} catch (criticalError) {
|
|
debug.addError('Critical failsafe cleanup', criticalError);
|
|
}
|
|
} finally {
|
|
debug.addStep('Running final cleanups');
|
|
if (document.body.classList.contains('optimize-scroll')) {
|
|
document.body.classList.remove('optimize-scroll');
|
|
}
|
|
if (document.body.classList.contains('is-scrolling')) {
|
|
document.body.classList.remove('is-scrolling');
|
|
}
|
|
const inlineStyles = document.querySelectorAll('style[data-dynamic]');
|
|
inlineStyles.forEach(style => style.remove());
|
|
debug.addStep('Final cleanups completed');
|
|
|
|
debug.summarize();
|
|
}
|
|
}
|
|
|
|
window.cleanup = cleanup;
|
|
|
|
console.log('Offers Table Module fully initialized');
|