Hugging Face's logo

Spaces:
fullstackufo
/
roger-tracker
Running

App Files Community
fullstackufo commited on
Commit
e4da769
·
verified ·
1 Parent(s): 4275cdb

Add 2 files

Browse files
Files changed (2) hide show
  1. README.md +7 -5
  2. index.html +647 -19
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: Roger Tracker
3
- emoji: 🏢
4
- colorFrom: purple
5
- colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: roger-tracker
3
+ emoji: 🐳
4
+ colorFrom: red
5
+ colorTo: purple
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,647 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Solana Transaction Tracker</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
9
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
10
+ <style>
11
+ .gradient-bg {
12
+ background: linear-gradient(135deg, #00ffbd 0%, #0088ff 100%);
13
+ }
14
+ .transaction-card:hover {
15
+ transform: translateY(-2px);
16
+ box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
17
+ }
18
+ .pulse {
19
+ animation: pulse 2s infinite;
20
+ }
21
+ @keyframes pulse {
22
+ 0% { opacity: 1; }
23
+ 50% { opacity: 0.5; }
24
+ 100% { opacity: 1; }
25
+ }
26
+ .address-chip {
27
+ font-family: monospace;
28
+ background-color: rgba(0, 136, 255, 0.1);
29
+ border-left: 3px solid #0088ff;
30
+ }
31
+ .solana-gradient {
32
+ background: linear-gradient(135deg, #00ffbd 0%, #0088ff 100%);
33
+ -webkit-background-clip: text;
34
+ -webkit-text-fill-color: transparent;
35
+ }
36
+ </style>
37
+ </head>
38
+ <body class="bg-gray-50 min-h-screen">
39
+ <div class="gradient-bg text-white py-6 px-4 shadow-lg">
40
+ <div class="container mx-auto">
41
+ <div class="flex justify-between items-center">
42
+ <h1 class="text-3xl font-bold flex items-center">
43
+ <i class="fas fa-wallet mr-3"></i>
44
+ <span class="solana-gradient">Solana Tracker</span>
45
+ </h1>
46
+ <div class="flex items-center space-x-4">
47
+ <div class="bg-white bg-opacity-20 px-4 py-2 rounded-full">
48
+ <span id="current-time" class="font-mono"></span>
49
+ </div>
50
+ <button id="refresh-btn" class="bg-white text-blue-900 px-4 py-2 rounded-full hover:bg-blue-100 transition">
51
+ <i class="fas fa-sync-alt mr-2"></i> Refresh
52
+ </button>
53
+ </div>
54
+ </div>
55
+ <p class="mt-2 opacity-90">Tracking transactions for Solana address</p>
56
+ <div class="mt-3 px-4 py-2 rounded-md address-chip inline-flex items-center">
57
+ <span>2HZdRs4Cxkg1WbiPxPZcramcEPo22dzeemMAYZhZpump</span>
58
+ <button id="copy-address" class="ml-2 text-blue-200 hover:text-white">
59
+ <i class="fas fa-copy"></i>
60
+ </button>
61
+ </div>
62
+ </div>
63
+ </div>
64
+
65
+ <div class="container mx-auto px-4 py-8">
66
+ <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
67
+ <!-- Left Column -->
68
+ <div class="lg:col-span-2 space-y-6">
69
+ <!-- Summary Cards -->
70
+ <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
71
+ <div class="bg-white rounded-xl shadow p-6">
72
+ <div class="flex justify-between items-start">
73
+ <div>
74
+ <p class="text-gray-500">Total Inflow</p>
75
+ <h3 class="text-2xl font-bold mt-1 text-green-600" id="total-inflow">0.00 SOL</h3>
76
+ </div>
77
+ <div class="bg-green-100 p-3 rounded-full text-green-600">
78
+ <i class="fas fa-arrow-down"></i>
79
+ </div>
80
+ </div>
81
+ <p class="text-sm text-gray-500 mt-3" id="inflow-change">+0.00% today</p>
82
+ </div>
83
+
84
+ <div class="bg-white rounded-xl shadow p-6">
85
+ <div class="flex justify-between items-start">
86
+ <div>
87
+ <p class="text-gray-500">Total Outflow</p>
88
+ <h3 class="text-2xl font-bold mt-1 text-red-600" id="total-outflow">0.00 SOL</h3>
89
+ </div>
90
+ <div class="bg-red-100 p-3 rounded-full text-red-600">
91
+ <i class="fas fa-arrow-up"></i>
92
+ </div>
93
+ </div>
94
+ <p class="text-sm text-gray-500 mt-3" id="outflow-change">+0.00% today</p>
95
+ </div>
96
+
97
+ <div class="bg-white rounded-xl shadow p-6">
98
+ <div class="flex justify-between items-start">
99
+ <div>
100
+ <p class="text-gray-500">Balance</p>
101
+ <h3 class="text-2xl font-bold mt-1 text-blue-600" id="net-flow">0.00 SOL</h3>
102
+ </div>
103
+ <div class="bg-blue-100 p-3 rounded-full text-blue-600">
104
+ <i class="fas fa-coins"></i>
105
+ </div>
106
+ </div>
107
+ <p class="text-sm text-gray-500 mt-3" id="net-change">$0.00 USD</p>
108
+ </div>
109
+ </div>
110
+
111
+ <!-- Chart -->
112
+ <div class="bg-white rounded-xl shadow p-6">
113
+ <div class="flex justify-between items-center mb-6">
114
+ <h2 class="text-xl font-semibold">Transaction History</h2>
115
+ <div class="flex space-x-2">
116
+ <button class="time-btn active bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm" data-range="7">7D</button>
117
+ <button class="time-btn bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm" data-range="30">30D</button>
118
+ <button class="time-btn bg-gray-100 text-gray-700 px-3 py-1 rounded-full text-sm" data-range="90">90D</button>
119
+ </div>
120
+ </div>
121
+ <div class="h-80">
122
+ <canvas id="flowChart"></canvas>
123
+ </div>
124
+ </div>
125
+ </div>
126
+
127
+ <!-- Right Column -->
128
+ <div class="space-y-6">
129
+ <!-- Address Info -->
130
+ <div class="bg-white rounded-xl shadow p-6">
131
+ <h2 class="text-xl font-semibold mb-4">Wallet Info</h2>
132
+ <div class="space-y-3">
133
+ <div class="flex justify-between">
134
+ <span class="text-gray-500">Network</span>
135
+ <span class="font-medium">Solana Mainnet</span>
136
+ </div>
137
+ <div class="flex justify-between">
138
+ <span class="text-gray-500">First Seen</span>
139
+ <span class="font-medium" id="first-seen">Loading...</span>
140
+ </div>
141
+ <div class="flex justify-between">
142
+ <span class="text-gray-500">Transactions</span>
143
+ <span class="font-medium" id="tx-count">0</span>
144
+ </div>
145
+ <div class="flex justify-between">
146
+ <span class="text-gray-500">SOL Price</span>
147
+ <span class="font-medium" id="sol-price">$0.00</span>
148
+ </div>
149
+ </div>
150
+ <div class="mt-4 pt-4 border-t border-gray-100">
151
+ <a href="https://solscan.io/account/2HZdRs4Cxkg1WbiPxPZcramcEPo22dzeemMAYZhZpump" target="_blank" class="w-full flex items-center justify-center bg-gray-100 text-gray-800 py-2 px-4 rounded-lg hover:bg-gray-200 transition">
152
+ <i class="fas fa-external-link-alt mr-2"></i> View on Solscan
153
+ </a>
154
+ </div>
155
+ </div>
156
+
157
+ <!-- Recent Transactions -->
158
+ <div class="bg-white rounded-xl shadow p-6">
159
+ <div class="flex justify-between items-center mb-4">
160
+ <h2 class="text-xl font-semibold">Recent Transactions</h2>
161
+ <div class="text-sm text-gray-500" id="last-updated">Just now</div>
162
+ </div>
163
+ <div class="space-y-3" id="transactions-list">
164
+ <!-- Transactions will be added here -->
165
+ <div class="text-center py-8 text-gray-400">
166
+ <div class="pulse">
167
+ <i class="fas fa-spinner fa-spin text-4xl mb-2"></i>
168
+ <p>Loading transactions...</p>
169
+ </div>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ </div>
175
+ </div>
176
+
177
+ <!-- Transaction Details Modal -->
178
+ <div id="tx-modal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center hidden">
179
+ <div class="bg-white rounded-xl p-6 w-full max-w-md max-h-[90vh] overflow-y-auto">
180
+ <div class="flex justify-between items-center mb-4">
181
+ <h3 class="text-xl font-semibold">Transaction Details</h3>
182
+ <button id="close-tx-modal" class="text-gray-500 hover:text-gray-700">
183
+ <i class="fas fa-times"></i>
184
+ </button>
185
+ </div>
186
+ <div id="tx-details-content">
187
+ <!-- Transaction details will be loaded here -->
188
+ </div>
189
+ </div>
190
+ </div>
191
+
192
+ <script>
193
+ // Initialize variables
194
+ const solanaAddress = "2HZdRs4Cxkg1WbiPxPZcramcEPo22dzeemMAYZhZpump";
195
+ let transactions = [];
196
+ let chart;
197
+ let chartRange = 7;
198
+ let solPrice = 0;
199
+
200
+ // DOM Elements
201
+ const refreshBtn = document.getElementById('refresh-btn');
202
+ const transactionsList = document.getElementById('transactions-list');
203
+ const timeButtons = document.querySelectorAll('.time-btn');
204
+ const copyAddressBtn = document.getElementById('copy-address');
205
+ const txModal = document.getElementById('tx-modal');
206
+ const closeTxModalBtn = document.getElementById('close-tx-modal');
207
+
208
+ // Initialize the app
209
+ document.addEventListener('DOMContentLoaded', function() {
210
+ updateCurrentTime();
211
+ setInterval(updateCurrentTime, 1000);
212
+
213
+ // Initialize chart
214
+ initChart();
215
+
216
+ // Load transactions
217
+ loadTransactions();
218
+ fetchSolPrice();
219
+
220
+ // Set up event listeners
221
+ refreshBtn.addEventListener('click', function() {
222
+ this.classList.add('animate-spin');
223
+ loadTransactions();
224
+ fetchSolPrice();
225
+ setTimeout(() => {
226
+ this.classList.remove('animate-spin');
227
+ }, 1000);
228
+ });
229
+
230
+ copyAddressBtn.addEventListener('click', function() {
231
+ navigator.clipboard.writeText(solanaAddress);
232
+ const originalIcon = this.innerHTML;
233
+ this.innerHTML = '<i class="fas fa-check"></i>';
234
+ setTimeout(() => {
235
+ this.innerHTML = originalIcon;
236
+ }, 2000);
237
+ });
238
+
239
+ timeButtons.forEach(btn => {
240
+ btn.addEventListener('click', function() {
241
+ timeButtons.forEach(b => {
242
+ b.classList.remove('active', 'bg-blue-100', 'text-blue-700');
243
+ b.classList.add('bg-gray-100', 'text-gray-700');
244
+ });
245
+ this.classList.add('active', 'bg-blue-100', 'text-blue-700');
246
+ this.classList.remove('bg-gray-100', 'text-gray-700');
247
+ chartRange = parseInt(this.dataset.range);
248
+ updateChart();
249
+ });
250
+ });
251
+
252
+ closeTxModalBtn.addEventListener('click', () => {
253
+ txModal.classList.add('hidden');
254
+ });
255
+ });
256
+
257
+ // Update current time
258
+ function updateCurrentTime() {
259
+ const now = new Date();
260
+ const options = {
261
+ weekday: 'short',
262
+ year: 'numeric',
263
+ month: 'short',
264
+ day: 'numeric',
265
+ hour: '2-digit',
266
+ minute: '2-digit',
267
+ second: '2-digit'
268
+ };
269
+ document.getElementById('current-time').textContent = now.toLocaleDateString('en-US', options);
270
+ document.getElementById('last-updated').textContent = 'Updated: ' + now.toLocaleTimeString();
271
+ }
272
+
273
+ // Load transactions from Solana API
274
+ async function loadTransactions() {
275
+ try {
276
+ // Show loading state
277
+ transactionsList.innerHTML = `
278
+ <div class="text-center py-8 text-gray-400">
279
+ <div class="pulse">
280
+ <i class="fas fa-spinner fa-spin text-4xl mb-2"></i>
281
+ <p>Loading transactions...</p>
282
+ </div>
283
+ </div>
284
+ `;
285
+
286
+ // In a real app, you would fetch from Solana RPC or indexer API
287
+ // For this demo, we'll use mock data
288
+ const mockTransactions = generateMockTransactions();
289
+
290
+ transactions = mockTransactions;
291
+ updateUI();
292
+ updateChart();
293
+
294
+ // Update first seen date
295
+ if (transactions.length > 0) {
296
+ const firstTxDate = new Date(transactions[transactions.length - 1].date);
297
+ document.getElementById('first-seen').textContent = firstTxDate.toLocaleDateString();
298
+ }
299
+
300
+ document.getElementById('tx-count').textContent = transactions.length;
301
+
302
+ } catch (error) {
303
+ console.error('Error loading transactions:', error);
304
+ transactionsList.innerHTML = `
305
+ <div class="text-center py-8 text-red-400">
306
+ <i class="fas fa-exclamation-triangle text-4xl mb-2"></i>
307
+ <p>Failed to load transactions</p>
308
+ <button onclick="loadTransactions()" class="mt-2 text-blue-600 hover:text-blue-800">
309
+ <i class="fas fa-redo mr-1"></i> Retry
310
+ </button>
311
+ </div>
312
+ `;
313
+ }
314
+ }
315
+
316
+ // Generate mock transactions for demo
317
+ function generateMockTransactions() {
318
+ const mockTxs = [];
319
+ const now = new Date();
320
+ const types = ['inflow', 'outflow'];
321
+ const reasons = [
322
+ 'Token swap',
323
+ 'NFT purchase',
324
+ 'Staking reward',
325
+ 'Airdrop',
326
+ 'Payment received',
327
+ 'Withdrawal',
328
+ 'Deposit',
329
+ 'Token transfer'
330
+ ];
331
+
332
+ // Generate transactions for the past 90 days
333
+ for (let i = 0; i < 30; i++) {
334
+ const daysAgo = Math.floor(Math.random() * 90);
335
+ const date = new Date(now);
336
+ date.setDate(date.getDate() - daysAgo);
337
+
338
+ const type = types[Math.floor(Math.random() * types.length)];
339
+ const amount = parseFloat((Math.random() * 10).toFixed(4));
340
+ const reason = reasons[Math.floor(Math.random() * reasons.length)];
341
+ const txHash = generateRandomHash();
342
+
343
+ mockTxs.push({
344
+ id: txHash,
345
+ type: type,
346
+ amount: amount,
347
+ date: date.toISOString(),
348
+ reason: reason,
349
+ sender: type === 'inflow' ? generateRandomAddress() : solanaAddress,
350
+ receiver: type === 'inflow' ? solanaAddress : generateRandomAddress(),
351
+ fee: parseFloat((Math.random() * 0.001).toFixed(6))
352
+ });
353
+ }
354
+
355
+ // Sort by date
356
+ return mockTxs.sort((a, b) => new Date(b.date) - new Date(a.date));
357
+ }
358
+
359
+ // Generate random Solana address
360
+ function generateRandomAddress() {
361
+ const chars = '123456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz';
362
+ let result = '';
363
+ for (let i = 0; i < 44; i++) {
364
+ result += chars.charAt(Math.floor(Math.random() * chars.length));
365
+ }
366
+ return result;
367
+ }
368
+
369
+ // Generate random transaction hash
370
+ function generateRandomHash() {
371
+ const chars = '0123456789abcdef';
372
+ let result = '';
373
+ for (let i = 0; i < 64; i++) {
374
+ result += chars.charAt(Math.floor(Math.random() * chars.length));
375
+ }
376
+ return result;
377
+ }
378
+
379
+ // Fetch current SOL price (simulated)
380
+ async function fetchSolPrice() {
381
+ try {
382
+ // Simulate API call with random variation
383
+ const basePrice = 150; // Base SOL price
384
+ const variation = (Math.random() * 30) - 15; // +/- $15
385
+ solPrice = parseFloat((basePrice + variation).toFixed(2));
386
+
387
+ document.getElementById('sol-price').textContent = `$${solPrice}`;
388
+
389
+ // Update balance in USD
390
+ const netFlowElement = document.getElementById('net-flow');
391
+ const netFlow = parseFloat(netFlowElement.textContent);
392
+ document.getElementById('net-change').textContent = `$${(netFlow * solPrice).toFixed(2)} USD`;
393
+
394
+ } catch (error) {
395
+ console.error('Error fetching SOL price:', error);
396
+ }
397
+ }
398
+
399
+ // Update all UI elements
400
+ function updateUI() {
401
+ updateTransactionSummary();
402
+ updateTransactionsList();
403
+ }
404
+
405
+ // Update transaction summary cards
406
+ function updateTransactionSummary() {
407
+ const totalInflow = transactions
408
+ .filter(t => t.type === 'inflow')
409
+ .reduce((sum, t) => sum + t.amount, 0);
410
+
411
+ const totalOutflow = transactions
412
+ .filter(t => t.type === 'outflow')
413
+ .reduce((sum, t) => sum + t.amount, 0);
414
+
415
+ const netFlow = totalInflow - totalOutflow;
416
+
417
+ document.getElementById('total-inflow').textContent = `${totalInflow.toFixed(4)} SOL`;
418
+ document.getElementById('total-outflow').textContent = `${totalOutflow.toFixed(4)} SOL`;
419
+ document.getElementById('net-flow').textContent = `${netFlow.toFixed(4)} SOL`;
420
+
421
+ // Update USD values if price is available
422
+ if (solPrice > 0) {
423
+ document.getElementById('net-change').textContent = `$${(netFlow * solPrice).toFixed(2)} USD`;
424
+ }
425
+
426
+ // Random changes for demo purposes
427
+ const inflowChange = (Math.random() * 5).toFixed(2);
428
+ const outflowChange = (Math.random() * 5).toFixed(2);
429
+
430
+ document.getElementById('inflow-change').textContent = `+${inflowChange}% today`;
431
+ document.getElementById('outflow-change').textContent = `+${outflowChange}% today`;
432
+ }
433
+
434
+ // Update transactions list
435
+ function updateTransactionsList() {
436
+ if (transactions.length === 0) {
437
+ transactionsList.innerHTML = `
438
+ <div class="text-center py-8 text-gray-400">
439
+ <i class="fas fa-exchange-alt text-4xl mb-2"></i>
440
+ <p>No transactions found</p>
441
+ </div>
442
+ `;
443
+ return;
444
+ }
445
+
446
+ // Show only the most recent 10 transactions
447
+ const recentTransactions = transactions.slice(0, 10);
448
+
449
+ transactionsList.innerHTML = recentTransactions.map(tx => `
450
+ <div class="transaction-card bg-white border border-gray-100 rounded-lg p-4 hover:shadow-md transition cursor-pointer" onclick="showTxDetails('${tx.id}')">
451
+ <div class="flex justify-between items-center">
452
+ <div class="flex items-center">
453
+ <div class="${tx.type === 'inflow' ? 'bg-green-100 text-green-600' : 'bg-red-100 text-red-600'} p-2 rounded-full mr-3">
454
+ <i class="fas ${tx.type === 'inflow' ? 'fa-arrow-down' : 'fa-arrow-up'}"></i>
455
+ </div>
456
+ <div>
457
+ <p class="font-medium">${tx.reason}</p>
458
+ <p class="text-sm text-gray-500">${formatDate(tx.date)}</p>
459
+ </div>
460
+ </div>
461
+ <div class="text-right">
462
+ <p class="${tx.type === 'inflow' ? 'text-green-600' : 'text-red-600'} font-semibold">
463
+ ${tx.type === 'inflow' ? '+' : '-'}${tx.amount.toFixed(4)}
464
+ </p>
465
+ <p class="text-xs text-gray-500">SOL</p>
466
+ </div>
467
+ </div>
468
+ </div>
469
+ `).join('');
470
+ }
471
+
472
+ // Show transaction details modal
473
+ function showTxDetails(txId) {
474
+ const tx = transactions.find(t => t.id === txId);
475
+ if (!tx) return;
476
+
477
+ const txDetailsContent = document.getElementById('tx-details-content');
478
+ txDetailsContent.innerHTML = `
479
+ <div class="space-y-4">
480
+ <div class="flex justify-between">
481
+ <span class="text-gray-500">Status</span>
482
+ <span class="font-medium text-green-600">Confirmed</span>
483
+ </div>
484
+ <div class="flex justify-between">
485
+ <span class="text-gray-500">Date</span>
486
+ <span class="font-medium">${formatDate(tx.date)}</span>
487
+ </div>
488
+ <div class="flex justify-between">
489
+ <span class="text-gray-500">Type</span>
490
+ <span class="font-medium ${tx.type === 'inflow' ? 'text-green-600' : 'text-red-600'}">
491
+ ${tx.type === 'inflow' ? 'Incoming' : 'Outgoing'} Transfer
492
+ </span>
493
+ </div>
494
+ <div class="flex justify-between">
495
+ <span class="text-gray-500">Amount</span>
496
+ <span class="font-medium">${tx.amount.toFixed(4)} SOL ($${(tx.amount * solPrice).toFixed(2)})</span>
497
+ </div>
498
+ <div class="flex justify-between">
499
+ <span class="text-gray-500">Transaction Fee</span>
500
+ <span class="font-medium">${tx.fee.toFixed(6)} SOL</span>
501
+ </div>
502
+ <div>
503
+ <p class="text-gray-500 mb-1">Description</p>
504
+ <p class="font-medium">${tx.reason}</p>
505
+ </div>
506
+ <div class="${tx.type === 'inflow' ? 'block' : 'hidden'}">
507
+ <p class="text-gray-500 mb-1">From</p>
508
+ <p class="font-mono text-sm bg-gray-100 p-2 rounded break-all">${tx.sender}</p>
509
+ </div>
510
+ <div class="${tx.type === 'outflow' ? 'block' : 'hidden'}">
511
+ <p class="text-gray-500 mb-1">To</p>
512
+ <p class="font-mono text-sm bg-gray-100 p-2 rounded break-all">${tx.receiver}</p>
513
+ </div>
514
+ <div class="pt-4 border-t border-gray-100">
515
+ <a href="https://solscan.io/tx/${tx.id}" target="_blank" class="w-full flex items-center justify-center bg-blue-100 text-blue-800 py-2 px-4 rounded-lg hover:bg-blue-200 transition">
516
+ <i class="fas fa-external-link-alt mr-2"></i> View on Solscan
517
+ </a>
518
+ </div>
519
+ </div>
520
+ `;
521
+
522
+ txModal.classList.remove('hidden');
523
+ }
524
+
525
+ // Initialize chart
526
+ function initChart() {
527
+ const ctx = document.getElementById('flowChart').getContext('2d');
528
+
529
+ chart = new Chart(ctx, {
530
+ type: 'bar',
531
+ data: {
532
+ labels: [],
533
+ datasets: [
534
+ {
535
+ label: 'Inflow',
536
+ data: [],
537
+ backgroundColor: '#10B981',
538
+ borderRadius: 6
539
+ },
540
+ {
541
+ label: 'Outflow',
542
+ data: [],
543
+ backgroundColor: '#EF4444',
544
+ borderRadius: 6
545
+ }
546
+ ]
547
+ },
548
+ options: {
549
+ responsive: true,
550
+ maintainAspectRatio: false,
551
+ plugins: {
552
+ legend: {
553
+ position: 'top',
554
+ },
555
+ tooltip: {
556
+ callbacks: {
557
+ label: function(context) {
558
+ return `${context.dataset.label}: ${context.raw.toFixed(4)} SOL`;
559
+ }
560
+ }
561
+ }
562
+ },
563
+ scales: {
564
+ x: {
565
+ grid: {
566
+ display: false
567
+ }
568
+ },
569
+ y: {
570
+ beginAtZero: true,
571
+ ticks: {
572
+ callback: function(value) {
573
+ return value.toFixed(2);
574
+ }
575
+ }
576
+ }
577
+ }
578
+ }
579
+ });
580
+
581
+ updateChart();
582
+ }
583
+
584
+ // Update chart data
585
+ function updateChart() {
586
+ const now = new Date();
587
+ const pastDate = new Date();
588
+ pastDate.setDate(now.getDate() - chartRange);
589
+
590
+ // Generate labels for the selected range
591
+ const labels = [];
592
+ const days = chartRange;
593
+ for (let i = days; i >= 0; i--) {
594
+ const date = new Date();
595
+ date.setDate(date.getDate() - i);
596
+ labels.push(formatChartDate(date));
597
+ }
598
+
599
+ // Initialize data arrays with zeros
600
+ const inflowData = new Array(labels.length).fill(0);
601
+ const outflowData = new Array(labels.length).fill(0);
602
+
603
+ // Populate data arrays
604
+ transactions.forEach(tx => {
605
+ const txDate = new Date(tx.date);
606
+ if (txDate >= pastDate) {
607
+ const dayDiff = Math.floor((now - txDate) / (1000 * 60 * 60 * 24));
608
+ const index = labels.length - 1 - dayDiff;
609
+
610
+ if (index >= 0 && index < labels.length) {
611
+ if (tx.type === 'inflow') {
612
+ inflowData[index] += tx.amount;
613
+ } else {
614
+ outflowData[index] += tx.amount;
615
+ }
616
+ }
617
+ }
618
+ });
619
+
620
+ // Update chart
621
+ chart.data.labels = labels;
622
+ chart.data.datasets[0].data = inflowData;
623
+ chart.data.datasets[1].data = outflowData;
624
+ chart.update();
625
+ }
626
+
627
+ // Helper functions
628
+ function formatDate(dateString) {
629
+ const date = new Date(dateString);
630
+ return date.toLocaleString('en-US', {
631
+ month: 'short',
632
+ day: 'numeric',
633
+ year: 'numeric',
634
+ hour: '2-digit',
635
+ minute: '2-digit'
636
+ });
637
+ }
638
+
639
+ function formatChartDate(date) {
640
+ return date.toLocaleDateString('en-US', {
641
+ month: 'short',
642
+ day: 'numeric'
643
+ });
644
+ }
645
+ </script>
646
+ <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=fullstackufo/roger-tracker" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
647
+ </html>